/* /Pages/Customers/Aliases/Aliases.razor.rz.scp.css */
/* Scoped styles for /customers/aliases.
   Moved out of the global wwwroot/main.css (section
   "Alias regex tester (regex101-style highlighting) — /customers/aliases")
   so the rules live with the only component that uses them. Declarations are
   unchanged apart from the hardcoded-colour → --kendo-color-* conversions noted
   inline (originals kept as fallbacks). */

/* ---- Alias regex tester (regex101-style highlighting) ---- */
.rx-tester[b-r4d7ecfouk] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rx-field[b-r4d7ecfouk] {
    display: flex;
    flex-direction: column;
}

.rx-label[b-r4d7ecfouk] {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
}

.rx-hint[b-r4d7ecfouk] {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 3px;
    color: var(--kendo-color-subtle, #6c6c6c);
}

.rx-error[b-r4d7ecfouk] {
    color: var(--kendo-color-error, #c0392b);
    font-size: 12px;
}

/* interpretation line: mode badge + syntax-highlighted effective pattern */
.rx-interpret[b-r4d7ecfouk] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 8px;
    border-radius: var(--kendo-border-radius-md, 4px);
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    background: var(--kendo-color-base-subtle, var(--kendo-color-base, #f5f5f5));
}

.rx-mode-badge[b-r4d7ecfouk] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    color: var(--kendo-color-primary, #2980b9);
    background: color-mix(in srgb, var(--kendo-color-primary, #2980b9) 14%, transparent);
}

.rx-pattern[b-r4d7ecfouk],
.rx-plate[b-r4d7ecfouk] {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 13px;
}

.rx-pattern[b-r4d7ecfouk] {
    word-break: break-all;
}

.rx-results[b-r4d7ecfouk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 210px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--kendo-border-radius-md, 4px);
}

.rx-result-row[b-r4d7ecfouk] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
}

.rx-plate[b-r4d7ecfouk] {
    flex: 0 1 auto;
}

.rx-raw-note[b-r4d7ecfouk] {
    font-size: 11px;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    color: var(--kendo-color-subtle, #9a9a9a);
}

.rx-spacer[b-r4d7ecfouk] {
    flex: 1 1 auto;
}

.rx-accept[b-r4d7ecfouk] {
    color: var(--kendo-color-success, #27ae60);
    font-weight: 700;
    white-space: nowrap;
}

.rx-reject[b-r4d7ecfouk] {
    color: var(--kendo-color-error, #c0392b);
    font-weight: 700;
    white-space: nowrap;
}

/* regex token syntax colours (code-editor style, theme-agnostic mid-tones).
   The token spans are produced from RegexHighlighter tokens, so they are
   addressed through ::deep from the .rx-tester wrapper (which IS in this
   component's markup) — that keeps the rules matching regardless of whether the
   token spans carry the CSS-isolation scope attribute.
   Colours are a deliberate syntax palette (not semantic UI colours), so they are
   kept literal — mapping them onto --kendo-color-error/warning/... would restyle
   the highlighter. */
.rx-tester[b-r4d7ecfouk]  .rx-literal { color: inherit; }
.rx-tester[b-r4d7ecfouk]  .rx-anchor  { color: #e0457b; font-weight: 600; }
.rx-tester[b-r4d7ecfouk]  .rx-class   { color: #8e5cd9; }
.rx-tester[b-r4d7ecfouk]  .rx-quant   { color: #2f9e9e; font-weight: 600; }
.rx-tester[b-r4d7ecfouk]  .rx-group   { color: #c9772b; font-weight: 600; }
.rx-tester[b-r4d7ecfouk]  .rx-escape  { color: #3d8bd4; }
.rx-tester[b-r4d7ecfouk]  .rx-meta    { color: #c9772b; }

/* highlighted matched span inside a test plate */
.rx-tester[b-r4d7ecfouk]  .rx-match {
    /* was rgba(46, 204, 113, 0.28) / rgba(46, 204, 113, 0.45) */
    background: var(--kendo-color-success-subtle, rgba(46, 204, 113, 0.28));
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--kendo-color-success, rgba(46, 204, 113, 0.45));
}

.rx-actions[b-r4d7ecfouk] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}
/* /Pages/Customers/Banks/Banks.razor.rz.scp.css */
.super-admin-notice[b-8j3jlovjh2] {
    margin: 8px 0 12px;
    padding: 8px 12px;
    /* Not --kendo-color-primary-subtle: the theme overrides --kendo-color-primary but
       leaves -subtle at the stock pink, so a tint has to be derived from the primary. */
    background: color-mix(in srgb, var(--kendo-color-primary, #27348a) 8%, transparent);
    border-left: 3px solid var(--kendo-color-primary, #27348a);
    border-radius: 3px;
    font-size: .9em;
}
/* /Pages/Customers/Blacklist/Blacklist.razor.rz.scp.css */
.import-form[b-6n22ww7ytq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog-actions[b-6n22ww7ytq] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
/* /Pages/Customers/BookingGroups/BookingGroups.razor.rz.scp.css */
.company-editor-row[b-3ua5an2m92] {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}
/* /Pages/Customers/BookingGroups/BookingGroupView.razor.rz.scp.css */
.title-bar[b-66ylivjae0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-nav[b-66ylivjae0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-66ylivjae0] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-66ylivjae0] {
    opacity: .4;
}

.breadcrumb-title[b-66ylivjae0] {
    margin: 0;
}

.breadcrumb-id[b-66ylivjae0] {
    opacity: .6;
}

.breadcrumb-meta[b-66ylivjae0] {
    margin-left: auto;
    opacity: .6;
}

.status-chip[b-66ylivjae0] {
    padding: 2px 6px;
    border-radius: 2px;
}

.status-chip.status-paid[b-66ylivjae0] {
    background-color: var(--kendo-color-success-subtle, #DEFED3);
}

.status-chip.status-unpaid[b-66ylivjae0] {
    background-color: var(--kendo-color-warning-subtle, #FDFCE1);
}

.status-chip.status-cancelled[b-66ylivjae0] {
    background-color: var(--kendo-color-error-subtle, #FEEBEA);
}

.status-chip.status-deactivated[b-66ylivjae0] {
    background-color: var(--kendo-color-surface-alt, #EDEDED);
}

.status-chip.status-moved[b-66ylivjae0] {
    background-color: var(--kendo-color-info-subtle, #CEE0FF);
}
/* /Pages/Customers/Bookings/Bookings.razor.rz.scp.css */
.bookings-filter-toolbar[b-flrpp1lpbz] {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 8px 0;
    flex-wrap: wrap;
}

.warn-text[b-flrpp1lpbz] {
    color: var(--kendo-color-error, #d9534f);
}

/* Co-located static decoration for the status chip; the background-color stays inline
   because GetStatusColor(...) is a runtime value (helper returns hardcoded hex —
   follow-up: move that palette to tokens in Bookings.razor.cs). */
.status-chip[b-flrpp1lpbz] {
    padding: 2px 6px;
    border-radius: 2px;
}

.status-chip.status-paid[b-flrpp1lpbz] {
    background-color: var(--kendo-color-success-subtle, #DEFED3);
}

.status-chip.status-unpaid[b-flrpp1lpbz] {
    background-color: var(--kendo-color-warning-subtle, #FDFCE1);
}

.status-chip.status-cancelled[b-flrpp1lpbz] {
    background-color: var(--kendo-color-error-subtle, #FEEBEA);
}

.status-chip.status-deactivated[b-flrpp1lpbz] {
    background-color: var(--kendo-color-surface-alt, #EDEDED);
}

.status-chip.status-moved[b-flrpp1lpbz] {
    background-color: var(--kendo-color-info-subtle, #CEE0FF);
}
/* /Pages/Customers/Companies/Companies.razor.rz.scp.css */
[b-j9vgy7conq] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

/* Match the form pane's fixed height, or the two panes end up different sizes. */
.surface[b-j9vgy7conq] {
    height: 98vh;
    min-width: 0;
}

/* A flex item min-width defaults to its content width, so the pane would never shrink. */
[b-j9vgy7conq] .k-pane {
    min-width: 0;
}
/* /Pages/Customers/Companies/CompanyForm.razor.rz.scp.css */
.required[b-bvui6y6pe8] {
    color: #d9534f;
    margin-left: 2px;
}

.field-hint[b-bvui6y6pe8] {
    font-size: 0.8em;
    opacity: 0.75;
    margin-bottom: 2px;
}

/* Telerik owns the inner markup, so every rule below reaches in through ::deep. */
[b-bvui6y6pe8] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-bvui6y6pe8] .k-form-field-wrap {
    margin: 0;
}

[b-bvui6y6pe8] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-bvui6y6pe8] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-bvui6y6pe8] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

/* Dragging a textarea by its corner grows it past the dialog; the row count is the size. */
[b-bvui6y6pe8] textarea {
    resize: none;
}

.title[b-bvui6y6pe8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title h3[b-bvui6y6pe8] {
    margin: 0;
}
.company-form:focus[b-bvui6y6pe8] {
    outline: none;
}
/* /Pages/Customers/Companies/CompanyView.razor.rz.scp.css */
/* Drill-in breadcrumb header: Back button + "Companies / <name>" trail. */
.view-header[b-i2mun1btv3] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #e0e0e0);
}

.breadcrumb-nav[b-i2mun1btv3] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    min-width: 0;
}

.breadcrumb-link[b-i2mun1btv3] {
    color: var(--kendo-color-primary, #3f51b5);
    text-decoration: none;
    cursor: pointer;
    font-size: .95em;
}

.breadcrumb-link:hover[b-i2mun1btv3] {
    text-decoration: underline;
}

.breadcrumb-sep[b-i2mun1btv3] {
    opacity: .35;
}

.breadcrumb-title[b-i2mun1btv3] {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Same toolbar placement as the Companies list. */
[b-i2mun1btv3] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

.required[b-i2mun1btv3] {
    color: #d9534f;
    margin-left: 2px;
}

[b-i2mun1btv3] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-i2mun1btv3] .k-form-field-wrap {
    margin: 0;
}

[b-i2mun1btv3] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-i2mun1btv3] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-i2mun1btv3] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

.company-form:focus[b-i2mun1btv3] {
    outline: none;
}

.surface[b-i2mun1btv3] {
    height: 98vh;
    min-width: 0;
}

[b-i2mun1btv3] .k-pane {
    min-width: 0;
}
/* brui puts the tab strip in the right corner. */
[b-i2mun1btv3] .k-tabstrip-items-wrapper .k-tabstrip-items {
    justify-content: flex-end;
}

.company-form .title[b-i2mun1btv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.company-form .title h3[b-i2mun1btv3] {
    margin: 0;
}
/* Rows open the form; checkbox and command cells do not. */
[b-i2mun1btv3] .k-grid-content .k-table-td {
    cursor: pointer;
}

[b-i2mun1btv3] .k-grid-content .k-table-td:has(.k-checkbox),
[b-i2mun1btv3] .k-grid-content .k-table-td:has(.k-button) {
    cursor: default;
}
/* Telerik rings the clicked cell on both :focus and .k-focus; rows here are not keyboard-navigated. */
[b-i2mun1btv3] .k-grid-content:focus,
[b-i2mun1btv3] .k-grid-content:focus-visible,
[b-i2mun1btv3] .k-grid-content .k-table-row:focus,
[b-i2mun1btv3] .k-grid-content .k-table-row.k-focus,
[b-i2mun1btv3] .k-grid-content .k-table-td:focus,
[b-i2mun1btv3] .k-grid-content .k-table-td.k-focus {
    outline: none;
    box-shadow: none;
}
/* /Pages/Customers/InvoicePreparedData/InvoicePreparedData.razor.rz.scp.css */
/* Wizard step indicator */
.wizard-steps[b-r7z3k69f63] {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0 4px;
}

.step-label[b-r7z3k69f63] {
    font-weight: 400;
}

.step-reached[b-r7z3k69f63] {
    opacity: 1;
}

.step-unreached[b-r7z3k69f63] {
    opacity: .4;
}

.step-current[b-r7z3k69f63] {
    font-weight: 600;
}

.step-sep[b-r7z3k69f63] {
    opacity: .4;
}

/* Alert boxes */
.alert-warning[b-r7z3k69f63] {
    padding: 10px 16px;
    background: var(--kendo-color-warning-subtle, #fff3cd);
    border: 1px solid var(--kendo-color-warning, #ffeeba);
    color: var(--kendo-color-warning-on-subtle, #856404);
    border-radius: 4px;
    margin-bottom: 8px;
}

.alert-danger[b-r7z3k69f63] {
    padding: 10px 16px;
    background: var(--kendo-color-error-subtle, #f8d7da);
    border: 1px solid var(--kendo-color-error, #f5c2c7);
    color: var(--kendo-color-error-on-subtle, #842029);
    border-radius: 4px;
    margin-bottom: 8px;
}

.loader-inline[b-r7z3k69f63] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Wizard action button rows */
.wizard-actions[b-r7z3k69f63] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Invoice form pane (step 2) */
.form-pane[b-r7z3k69f63] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pane-title[b-r7z3k69f63] {
    margin: 0;
}

.pane-title-spaced[b-r7z3k69f63] {
    margin: 16px 0 0;
}

.field-label[b-r7z3k69f63] {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.required-mark[b-r7z3k69f63] {
    color: var(--kendo-color-error, #a00);
}

.field-row[b-r7z3k69f63] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Send / created-invoices pane (step 3) */
.send-pane[b-r7z3k69f63] {
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.download-actions[b-r7z3k69f63] {
    display: flex;
    gap: 8px;
}
/* /Pages/Customers/Invoices/InvoiceCronData.razor.rz.scp.css */
.title-bar[b-si5ntw4alz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.heading-flush[b-si5ntw4alz] {
    margin: 0;
}

.restricted-msg[b-si5ntw4alz] {
    color: var(--kendo-color-error, #a00);
    margin: 16px;
}

.form-panel[b-si5ntw4alz] {
    padding: 16px;
    max-width: 800px;
}

.field-block[b-si5ntw4alz] {
    margin-bottom: 16px;
}

.checkbox-label[b-si5ntw4alz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-heading[b-si5ntw4alz] {
    margin-top: 24px;
    border-bottom: 1px solid var(--kendo-color-border, #ccc);
    padding-bottom: 4px;
}

.form-grid[b-si5ntw4alz] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.required-mark[b-si5ntw4alz] {
    color: var(--kendo-color-error, #a00);
}

.form-actions[b-si5ntw4alz] {
    margin-top: 24px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Pages/Customers/Invoices/Invoices.razor.rz.scp.css */
.status-error-link[b-05ts5ah0lg] {
    text-decoration: underline;
}

.dialog-form[b-05ts5ah0lg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.required-mark[b-05ts5ah0lg] {
    color: var(--kendo-color-error, #a00);
}

.selection-note[b-05ts5ah0lg] {
    opacity: .6;
}

.dialog-actions[b-05ts5ah0lg] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Pages/Customers/Invoices/InvoicesWizard.razor.rz.scp.css */
/* Step indicator strip */
.step-strip[b-8tjmsm5h79] {
    display: flex;
    gap: 14px;
    align-items: center;
    margin: 0 0 18px;
    padding: 0 4px;
    flex-wrap: wrap;
}

/* Per-step chip state (dynamic toggles converted to conditional classes) */
.step-reached[b-8tjmsm5h79] {
    opacity: 1;
}

.step-unreached[b-8tjmsm5h79] {
    opacity: .4;
}

.step-current[b-8tjmsm5h79] {
    font-weight: 700;
}

.step-other[b-8tjmsm5h79] {
    font-weight: 500;
}

/* Separator glyph between step chips */
.step-sep[b-8tjmsm5h79] {
    opacity: .4;
}

/* Alert boxes */
.alert-danger[b-8tjmsm5h79] {
    padding: 10px 16px;
    background: var(--kendo-color-error-subtle, #f8d7da);
    border: 1px solid var(--kendo-color-error, #f5c2c7);
    color: var(--kendo-color-error-on-subtle, #842029);
    border-radius: 4px;
    margin-bottom: 8px;
}

.alert-warning[b-8tjmsm5h79] {
    padding: 10px 16px;
    background: var(--kendo-color-warning-subtle, #fff3cd);
    border: 1px solid var(--kendo-color-warning, #ffeeba);
    color: var(--kendo-color-warning-on-subtle, #856404);
    border-radius: 4px;
}

.alert-info[b-8tjmsm5h79] {
    padding: 10px 16px;
    background: var(--kendo-color-info-subtle, #cfe2ff);
    border: 1px solid var(--kendo-color-info, #b6d4fe);
    color: var(--kendo-color-info-on-subtle, #084298);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alert-success[b-8tjmsm5h79] {
    padding: 10px 16px;
    background: var(--kendo-color-success-subtle, #d1e7dd);
    border: 1px solid var(--kendo-color-success, #badbcc);
    color: var(--kendo-color-success-on-subtle, #0f5132);
    border-radius: 4px;
}

/* Bottom-margin modifier (alert-warning variant used on lines 62) */
.mb-8[b-8tjmsm5h79] {
    margin-bottom: 8px;
}

/* Step panels (column layouts per step) */
.step-panel[b-8tjmsm5h79] {
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.step-panel-narrow[b-8tjmsm5h79] {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.step-panel-full[b-8tjmsm5h79] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step-panel-wide[b-8tjmsm5h79] {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Step heading */
.step-heading[b-8tjmsm5h79] {
    margin: 0;
}

/* Field label + required marker */
.field-label[b-8tjmsm5h79] {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.required-mark[b-8tjmsm5h79] {
    color: var(--kendo-color-error, #a00);
}

/* Horizontal field group */
.field-row[b-8tjmsm5h79] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Progress bar wrapper (TelerikProgressBar has no Width param) */
.progress-wrap[b-8tjmsm5h79] {
    width: 520px;
    max-width: 100%;
}

/* Poll status hint text */
.poll-status[b-8tjmsm5h79] {
    opacity: .7;
    font-size: 12px;
}

/* Action button rows */
.actions-row[b-8tjmsm5h79] {
    display: flex;
    gap: 8px;
}

.actions-end[b-8tjmsm5h79] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.actions-end-sm[b-8tjmsm5h79] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
/* /Pages/Customers/LtcGroups/LtcGroupForm.razor.rz.scp.css */
.required[b-1044yg4xqy] {
    color: #d9534f;
    margin-left: 2px;
}

.field-hint[b-1044yg4xqy] {
    font-size: 0.8em;
    opacity: 0.75;
    margin-bottom: 2px;
}

.field-hint-warning[b-1044yg4xqy] {
    color: #b8860b;
    opacity: 1;
}

/* Telerik owns the inner markup, so every rule below reaches in through ::deep. */
[b-1044yg4xqy] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-1044yg4xqy] .k-form-field-wrap {
    margin: 0;
}

[b-1044yg4xqy] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-1044yg4xqy] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-1044yg4xqy] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

/* Dragging a textarea by its corner grows it past the pane; the row count is the size. */
[b-1044yg4xqy] textarea {
    resize: none;
}

.title[b-1044yg4xqy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title h3[b-1044yg4xqy] {
    margin: 0;
}

.ltc-group-form:focus[b-1044yg4xqy] {
    outline: none;
}

.company-editor[b-1044yg4xqy] {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}
/* /Pages/Customers/LtcGroups/LtcGroups.razor.rz.scp.css */
[b-yeqnxh3dgt] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

/* Match the form pane's fixed height, or the two panes end up different sizes. */
.surface[b-yeqnxh3dgt] {
    height: 98vh;
    min-width: 0;
}

/* A flex item min-width defaults to its content width, so the pane would never shrink. */
[b-yeqnxh3dgt] .k-pane {
    min-width: 0;
}

/* Rows open the group view; checkbox and command cells do not. */
[b-yeqnxh3dgt] .k-grid-content .k-table-td {
    cursor: pointer;
}

[b-yeqnxh3dgt] .k-grid-content .k-table-td:has(.k-checkbox),
[b-yeqnxh3dgt] .k-grid-content .k-table-td:has(.k-button) {
    cursor: default;
}

/* Rows here are not keyboard-navigated, so drop Telerik's clicked-cell ring. */
[b-yeqnxh3dgt] .k-grid-content:focus,
[b-yeqnxh3dgt] .k-grid-content:focus-visible,
[b-yeqnxh3dgt] .k-grid-content .k-table-row:focus,
[b-yeqnxh3dgt] .k-grid-content .k-table-row.k-focus,
[b-yeqnxh3dgt] .k-grid-content .k-table-td:focus,
[b-yeqnxh3dgt] .k-grid-content .k-table-td.k-focus {
    outline: none;
    box-shadow: none;
}
/* /Pages/Customers/LtcGroups/LtcGroupView.razor.rz.scp.css */
/* Drill-in breadcrumb header: Back button + "Subscriber groups / <name>" trail. */
.view-header[b-hsfmbzynf1] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--kendo-color-border, #e0e0e0);
}

.breadcrumb-nav[b-hsfmbzynf1] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    min-width: 0;
}

.breadcrumb-link[b-hsfmbzynf1] {
    color: var(--kendo-color-primary, #3f51b5);
    text-decoration: none;
    cursor: pointer;
    font-size: .95em;
}

.breadcrumb-link:hover[b-hsfmbzynf1] {
    text-decoration: underline;
}

.breadcrumb-sep[b-hsfmbzynf1] {
    opacity: .35;
}

.breadcrumb-title[b-hsfmbzynf1] {
    margin: 0;
    font-size: 1.15em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.company-name[b-hsfmbzynf1] {
    opacity: .6;
}

.vehicle-limit[b-hsfmbzynf1] {
    margin-left: auto;
    opacity: .6;
}

.dialog-form[b-hsfmbzynf1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog-hint[b-hsfmbzynf1] {
    opacity: .6;
}

.dialog-actions[b-hsfmbzynf1] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.import-filename[b-hsfmbzynf1] {
    opacity: .7;
}

/* Same toolbar placement as the ltc-groups list. */
[b-hsfmbzynf1] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

/* brui puts the tab strip in the right corner. */
[b-hsfmbzynf1] .k-tabstrip-items-wrapper .k-tabstrip-items {
    justify-content: flex-end;
}

/* Match the form pane's fixed height, or the two panes end up different sizes. */
.surface[b-hsfmbzynf1] {
    height: 98vh;
    min-width: 0;
}

/* A flex item min-width defaults to its content width, so the pane would never shrink. */
[b-hsfmbzynf1] .k-pane {
    min-width: 0;
}

.required[b-hsfmbzynf1] {
    color: #d9534f;
    margin-left: 2px;
}

[b-hsfmbzynf1] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-hsfmbzynf1] .k-form-field-wrap {
    margin: 0;
}

[b-hsfmbzynf1] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-hsfmbzynf1] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-hsfmbzynf1] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

.ltc-group-view-form:focus[b-hsfmbzynf1] {
    outline: none;
}

/* Telerik gives text and numeric inputs a fixed default width; only the dropdowns carry
   Width="100%", so without this the pane looks half-filled. */
.ltc-group-view-form[b-hsfmbzynf1]  .k-input,
.ltc-group-view-form[b-hsfmbzynf1]  .k-picker {
    width: 100%;
}

.ltc-group-view-form .title[b-hsfmbzynf1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ltc-group-view-form .title h3[b-hsfmbzynf1] {
    margin: 0;
}

/* Rows open the form; checkbox and command cells do not. */
[b-hsfmbzynf1] .k-grid-content .k-table-td {
    cursor: pointer;
}

[b-hsfmbzynf1] .k-grid-content .k-table-td:has(.k-checkbox),
[b-hsfmbzynf1] .k-grid-content .k-table-td:has(.k-button) {
    cursor: default;
}

/* Rows here are not keyboard-navigated, so drop Telerik's clicked-cell ring. */
[b-hsfmbzynf1] .k-grid-content:focus,
[b-hsfmbzynf1] .k-grid-content:focus-visible,
[b-hsfmbzynf1] .k-grid-content .k-table-row:focus,
[b-hsfmbzynf1] .k-grid-content .k-table-row.k-focus,
[b-hsfmbzynf1] .k-grid-content .k-table-td:focus,
[b-hsfmbzynf1] .k-grid-content .k-table-td.k-focus {
    outline: none;
    box-shadow: none;
}

/* Date range filter cell: the two pickers stack, the clear button sits beside them. */
[b-hsfmbzynf1] .datesField {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

[b-hsfmbzynf1] .datesField > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
/* /Pages/Customers/LtCustomers/LtCustomerForm.razor.rz.scp.css */
.required[b-qtztmnjnus] {
    color: #d9534f;
    margin-left: 2px;
}

.field-hint[b-qtztmnjnus] {
    font-size: 0.8em;
    opacity: 0.75;
    margin-bottom: 2px;
}

.field-hint-warning[b-qtztmnjnus] {
    color: #b8860b;
    opacity: 1;
}

/* Telerik owns the inner markup, so every rule below reaches in through ::deep. */
[b-qtztmnjnus] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-qtztmnjnus] .k-form-field-wrap {
    margin: 0;
}

[b-qtztmnjnus] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-qtztmnjnus] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-qtztmnjnus] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

/* Dragging a textarea by its corner grows it past the pane; the row count is the size. */
[b-qtztmnjnus] textarea {
    resize: none;
}

.title[b-qtztmnjnus] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title h3[b-qtztmnjnus] {
    margin: 0;
}

.ltc-form:focus[b-qtztmnjnus] {
    outline: none;
}
/* /Pages/Customers/LtCustomers/LtCustomers.razor.rz.scp.css */
[b-gdwhxb0ez8] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

/* Match the form pane's fixed height, or the two panes end up different sizes. */
.surface[b-gdwhxb0ez8] {
    height: 98vh;
    min-width: 0;
}

/* A flex item min-width defaults to its content width, so the pane would never shrink. */
[b-gdwhxb0ez8] .k-pane {
    min-width: 0;
}

/* Rows open the form; checkbox and command cells do not. */
[b-gdwhxb0ez8] .k-grid-content .k-table-td {
    cursor: pointer;
}

[b-gdwhxb0ez8] .k-grid-content .k-table-td:has(.k-checkbox),
[b-gdwhxb0ez8] .k-grid-content .k-table-td:has(.k-button) {
    cursor: default;
}

/* Rows here are not keyboard-navigated, so drop Telerik's clicked-cell ring. */
[b-gdwhxb0ez8] .k-grid-content:focus,
[b-gdwhxb0ez8] .k-grid-content:focus-visible,
[b-gdwhxb0ez8] .k-grid-content .k-table-row:focus,
[b-gdwhxb0ez8] .k-grid-content .k-table-row.k-focus,
[b-gdwhxb0ez8] .k-grid-content .k-table-td:focus,
[b-gdwhxb0ez8] .k-grid-content .k-table-td.k-focus {
    outline: none;
    box-shadow: none;
}

/* Date range filter cell: the two pickers stack, the clear button sits beside them. */
[b-gdwhxb0ez8] .datesField {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

[b-gdwhxb0ez8] .datesField > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Telerik draws the expand arrow on every row; hide it where there are no secondary plates. */
[b-gdwhxb0ez8] .k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}

[b-gdwhxb0ez8] .k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

/* The detail cell's own padding would push every child cell right of its parent column. */
[b-gdwhxb0ez8] .k-grid td.k-detail-cell {
    padding: 0;
}

/* Child rows repeat the parent's data, so they stay muted and the real rows read first.
   Widths come from lt-customers.js; fixed layout makes the colgroup authoritative. */
.child-plates[b-gdwhxb0ez8] {
    table-layout: fixed;
    border-collapse: collapse;
    color: #8a8a8a;
}

.child-plates td[b-gdwhxb0ez8] {
    padding: 4px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.child-plates .child-plate[b-gdwhxb0ez8] {
    font-weight: 600;
}
/* /Pages/Customers/OverSlotSubscribers/OverSlotSubscribers.razor.rz.scp.css */
.overslot-link[b-ojc4g0gif7] {
    text-decoration: underline;
    cursor: pointer;
}

.no-data-box[b-ojc4g0gif7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
}

.no-data-msg[b-ojc4g0gif7] {
    opacity: .7;
}
/* /Pages/Customers/Rfid/Rfid.razor.rz.scp.css */
#rfid .surface[b-f8u27w34kg] 
{
    height: 96%;
}
/* /Pages/Events/CrossReport/CrossReport.razor.rz.scp.css */
.cross-report-link[b-1crtly5fmm] {
    text-decoration: underline;
    cursor: pointer;
}

.no-data-box[b-1crtly5fmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
}

.no-data-text[b-1crtly5fmm] {
    opacity: .7;
}
/* /Pages/Events/ParkingLog/AddSubscriberForm.razor.rz.scp.css */
.required[b-sz0t1la5pk] {
    color: #d9534f;
    margin-left: 2px;
}

.field-hint[b-sz0t1la5pk] {
    font-size: 0.8em;
    opacity: 0.75;
    margin-bottom: 2px;
}

/* Telerik renders its own markup, so the scope attribute lands on this wrapper only - every rule
   below has to reach in through ::deep from here. The 25px padding-bottom Telerik puts on every
   field is what makes the dialog tall, not the margin. */
[b-sz0t1la5pk] .k-form-field {
    margin: 0;
    padding-bottom: 6px;
}

[b-sz0t1la5pk] .k-form-field-wrap {
    margin: 0;
}

[b-sz0t1la5pk] .form-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.9em;
    line-height: 1.3;
}

[b-sz0t1la5pk] .inline-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

[b-sz0t1la5pk] .k-form-buttons {
    margin-top: 10px;
    padding: 0;
}

/* Dragging a textarea by its corner grows it past the dialog; the row count is the size. */
[b-sz0t1la5pk] textarea {
    resize: none;
}
/* /Pages/Events/ParkingLog/ParkingLog.razor.rz.scp.css */
[b-b3jc6jwssi] .datesField {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
   gap: 8px;
   width: 100%;
   height: 100%;
}
.datesField >  div[b-b3jc6jwssi] {
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: flex-end;
   justify-content: flex-start;
   height: 100%;
}
[b-b3jc6jwssi] .k-table-td[data-col-index="0"]  {
   align-content: center;
} 
[b-b3jc6jwssi] .k-filtercell-wrapper 
{
   display: flex;
   justify-content: center;
}
 [b-b3jc6jwssi] .title{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

[b-b3jc6jwssi] .checkBox {
   display: flex;
   align-items: center;
   justify-content: center;
}
[b-b3jc6jwssi] .checked-button {
   background-color: #3E5394;
   color: white;
}
[b-b3jc6jwssi] .comment-center{
   display: flex;
   justify-content: center;
}
.k-dropdown .k-list-container[b-b3jc6jwssi] {
   position: relative;
   z-index: 1000;
}
[b-b3jc6jwssi] .surface{
   width: auto;
 }
.none[b-b3jc6jwssi]{
   display:none;
 }
#parkingLog[b-b3jc6jwssi]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
#parkingLog[b-b3jc6jwssi]  .k-table-row.k-expanded {
    background-color: #d7dadb;
}
.telerik-row:hover[b-b3jc6jwssi] {
    background-color: #f0f0f0; 
    cursor: pointer;
}
.telerik-row.selected[b-b3jc6jwssi] {
    background-color: #d0e7ff; 
    color: #333;
}
[b-b3jc6jwssi] .grid-reduce-row-height .k-grid-header .k-table-th,
.grid-reduce-row-height .k-grid-content .k-table-td[b-b3jc6jwssi] {
    padding: 2px 4px;
    font-size: 10px;
}

[b-b3jc6jwssi] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}

[b-b3jc6jwssi] .k-grid .k-table-thead .k-table-row .select-field[data-col-index="1"] .k-link {
    display: none;
}
#toolbar-total[b-b3jc6jwssi] {
    padding-right: 0.3vw;
}
#toolbar-pagginator-switch[b-b3jc6jwssi] {
    padding-right: 0.3vw;
}
[b-b3jc6jwssi] .k-grid tr.no-children td.k-hierarchy-cell * {
    display: none;
}

[b-b3jc6jwssi] .k-grid tr.no-children td.k-hierarchy-cell {
    pointer-events: none;
}

[b-b3jc6jwssi] .child-table .k-grid-pager {
    display: none;
}
.surface[b-b3jc6jwssi] {
    height: 98vh;
}
.k-splitter-flex .k-splitbar[b-b3jc6jwssi] {
    position: static;
    flex: 0 0 auto;
    background-color: var(--layout-color-background);
}

@media (orientation: portrait) {
    #parkingLog[b-b3jc6jwssi]  .invisible-button {
        justify-content: center;
    }
}
/* /Pages/Events/TrafficLog/TrafficLog.razor.rz.scp.css */
[b-32i8lv7rvk] .datesField {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    gap: 8px;
    width: 100%;
    height: 100%;
}
.datesField > div[b-32i8lv7rvk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    height: 100%;

}
.wrapper[b-32i8lv7rvk] {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
[b-32i8lv7rvk] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
[b-32i8lv7rvk] .k-table-td[data-col-index="0"] {
    align-content: center;
}

[b-32i8lv7rvk] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}

[b-32i8lv7rvk] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
[b-32i8lv7rvk] .k-badge-solid-success {
    border-color: #49915c;
    color: var(--kendo-color-on-success, #ffffff);
    background-color: #49915c;
}
.k-badge[b-32i8lv7rvk] {
    margin: 5px;
}
.surface[b-32i8lv7rvk] {
    height: 98vh;
}
.k-splitter-flex .k-splitbar[b-32i8lv7rvk] {
    position: static;
    flex: 0 0 auto;
    background-color: var(--layout-color-background);
}
/* /Pages/Help/Help.razor.rz.scp.css */
/* Moved out of the global wwwroot/main.css into this component's scoped
   CSS-isolation file. Declarations are unchanged apart from hardcoded colours
   being expressed as Kendo theme variables with the original value as fallback. */

/* Help page (Pages/Help/Help.razor) — list of PDF manual rows. */
.help-manual-list[b-vkxdy5p19n] {
    padding: 16px;
    max-width: 720px;
}

.help-manual-row[b-vkxdy5p19n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--kendo-color-border, #eee);
}

.help-manual-row > label[b-vkxdy5p19n] {
    min-width: 180px;
}

.help-empty-state[b-vkxdy5p19n] {
    opacity: 0.6;
}
/* /Pages/Lists/Calendar/Calendar.razor.rz.scp.css */
#calendar .surface[b-o45zkbx2di] {
    min-height: 98vh;
}
#calendar[b-o45zkbx2di]  .k-scheduler-footer {
    display: none;
}
.k-form-field label[b-o45zkbx2di]
{
    display:block;
}
#calendar_crud_buttons[b-o45zkbx2di] {
    text-align: right;
    padding-top: 1vh;
    padding-bottom:2vh;
}
#calendar_crud_buttons[b-o45zkbx2di]  button {
    margin-left: 0.3vw;
}
#calendar_field[b-o45zkbx2di] {
    padding-bottom: 0;
    padding-top: 3vh;
}
.k-window-content label[b-o45zkbx2di] {
    display:block;
    padding-bottom: 1vh;
}
[b-o45zkbx2di] .k-window-content .k-textbox {
    padding-bottom: 1vh;
    color: red;
}
[b-o45zkbx2di] .calendar-utc-label {
    font-size: 0.75em;
    opacity: 0.7;
}
/* /Pages/Lists/Debt/Debt.razor.rz.scp.css */
[b-g64ne4e6ci] .datesField {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: 100%;
}
.datesField > div[b-g64ne4e6ci] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100%;
}

[b-g64ne4e6ci] .surface {
    width: auto;
    overflow: hidden;
}
.surface[b-g64ne4e6ci] {
    height: 98vh;
}
[b-g64ne4e6ci] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
[b-g64ne4e6ci] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Round grid corners */
[b-g64ne4e6ci] .k-grid {
    border-radius: 8px;
    overflow: hidden;
}

/* Remove column separator lines; keep row separators (border-bottom) */
[b-g64ne4e6ci] .k-grid .k-table-th {
    border-right-color: transparent;
    border-left-color: transparent;
}

[b-g64ne4e6ci] .k-grid .k-table-td {
    border-right-color: transparent;
    border-left-color: transparent;
}

[b-g64ne4e6ci] .k-grid .k-filter-row .k-table-td {
    border-right-color: transparent;
    border-left-color: transparent;
}
[b-g64ne4e6ci] .checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
}
[b-g64ne4e6ci] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}
[b-g64ne4e6ci] .k-grid .k-table-thead .k-table-row .select-field[data-col-index="0"] .k-link {
    display: none;
}
#overdue-payments[b-g64ne4e6ci]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
.telerik-row.selected[b-g64ne4e6ci] {
    background-color: #d0e7ff;
    color: #333;
}

[b-g64ne4e6ci] .bulk-edit-invalid {
    outline: 2px solid #c0392b;
    color: #c0392b;
    outline-offset: 1px;
}

.selection-count-text[b-g64ne4e6ci] {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: #555;
    white-space: nowrap;
    margin-right: 4px;
}

/* Body cells */
[b-g64ne4e6ci] .k-grid .k-table-tbody .k-table-td {
    font-size: 0.82rem;
    color: #374151;
}


[b-g64ne4e6ci] .sub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: default;
}

[b-g64ne4e6ci] .sub-icon-active {
    background-color: #dcfce7;
    color: #15803d;
}

[b-g64ne4e6ci] .sub-icon-former {
    background-color: #f3f4f6;
    color: #9ca3af;
}
/* /Pages/Lists/Debt/DebtBulkForm.razor.rz.scp.css */
#paymentManagement[b-q1jpy6zuht]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-q1jpy6zuht] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-q1jpy6zuht] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}
[b-q1jpy6zuht] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-q1jpy6zuht] .k-panelbar {
    border: transparent;
}
.content[b-q1jpy6zuht] {
    padding: 10px 20px;
}
.info-row[b-q1jpy6zuht] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-q1jpy6zuht] {
        border-bottom: none;
    }

    .info-row.comment-section[b-q1jpy6zuht] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-q1jpy6zuht] {
    width: 100%;
    resize: vertical;
}
[b-q1jpy6zuht] .k-actions-start {
    justify-content: center;
    gap: 20px;
}
/* /Pages/Lists/Debt/DebtBulkUpdateForm.razor.rz.scp.css */
#paymentManagement[b-yuvx0sqhg0]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-yuvx0sqhg0] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-yuvx0sqhg0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}
[b-yuvx0sqhg0] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-yuvx0sqhg0] .k-panelbar {
    border: transparent;
}
.content[b-yuvx0sqhg0] {
    padding: 10px 20px;
}
.info-row[b-yuvx0sqhg0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-yuvx0sqhg0] {
        border-bottom: none;
    }

    .info-row.comment-section[b-yuvx0sqhg0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-yuvx0sqhg0] {
    width: 100%;
    resize: vertical;
}
[b-yuvx0sqhg0] .k-actions-start {
    justify-content: center;
    gap: 20px;
}
[b-yuvx0sqhg0] .optional-date.k-invalid,
[b-yuvx0sqhg0] .optional-date.k-invalid:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}
/* /Pages/Lists/Debt/DebtManagementForm.razor.rz.scp.css */
#paymentManagement[b-ibyc7i9tkq]  .k-form .k-form-fieldset {
    padding: MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
#paymentManagement[b-ibyc7i9tkq] .k-form .k-form-legend{
    border-color: transparent;
    width: auto;
    font-weight: bold;
}
.panel-header[b-ibyc7i9tkq] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}

.timeline-entry[b-ibyc7i9tkq] {
    display: flex;
    gap: 16px;
    position: relative;
}

.timeline-marker[b-ibyc7i9tkq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
}

.timeline-dot[b-ibyc7i9tkq] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid #0066cc;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-line[b-ibyc7i9tkq] {
    width: 2px;
    flex: 1;
    background: #e0e0e0;
    margin-top: 4px;
    min-height: 40px;
}

.timeline-content[b-ibyc7i9tkq] {
    flex: 1;
    padding-bottom: 20px;
}

.entry-header[b-ibyc7i9tkq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.entry-icon[b-ibyc7i9tkq] {
    color: #666;
}

.entry-title[b-ibyc7i9tkq] {
    color: #0066cc;
    font-weight: 500;
    flex: 1;
}

.entry-amount[b-ibyc7i9tkq] {
    color: #333;
    font-weight: 600;
    font-size: 14px;
}

.entry-date[b-ibyc7i9tkq] {
    color: #999;
    font-size: 13px;
    margin-bottom: 8px;
    margin-left: 28px;
}

.entry-details[b-ibyc7i9tkq] {
    background: #f7f7f7;
    border-radius: 4px;
    padding: 10px 12px;
    margin-left: 28px;
    font-size: 13px;
    border-left: 3px solid #e0e0e0;
}

.operator-info[b-ibyc7i9tkq] {
    color: #666;
    margin-bottom: 4px;
}

.change-reason[b-ibyc7i9tkq] {
    color: #333;
}

[b-ibyc7i9tkq] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom:2rem;
    outline: red;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}
[b-ibyc7i9tkq] .k-panelbar {
    border: transparent;
}
.content[b-ibyc7i9tkq] {
    padding: 10px 20px;
}
.info-row-column[b-ibyc7i9tkq] {
    display: flex;
    flex-direction:column;
   gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.info-row[b-ibyc7i9tkq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .info-row:last-child[b-ibyc7i9tkq] {
        border-bottom: none;
    }

    .info-row.comment-section[b-ibyc7i9tkq] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
.comment-textarea[b-ibyc7i9tkq] {
    width: 100%;
    resize: vertical;
}

/*neveikai sitas*/

#paymentManagement[b-ibyc7i9tkq]  .k-grid-header, .k-grid-header-wrap[b-ibyc7i9tkq], .k-grouping-header[b-ibyc7i9tkq], .k-grid .k-table-th[b-ibyc7i9tkq], .k-grid td[b-ibyc7i9tkq], .k-grid .k-table-td[b-ibyc7i9tkq], .k-grid-footer[b-ibyc7i9tkq], .k-grid-footer-wrap[b-ibyc7i9tkq], .k-grid-content-locked[b-ibyc7i9tkq], .k-grid-footer-locked[b-ibyc7i9tkq], .k-grid-header-locked[b-ibyc7i9tkq], .k-filter-row > .k-table-th[b-ibyc7i9tkq], .k-filter-row > td[b-ibyc7i9tkq], .k-filter-row > .k-table-td[b-ibyc7i9tkq] {
    border-color: transparent;
}
[b-ibyc7i9tkq] .k-actions-start {
    justify-content: center;
    gap: 20px;
}

[b-ibyc7i9tkq] .optional-date.k-invalid,
[b-ibyc7i9tkq] .optional-date.k-invalid:hover {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    box-shadow: none;
}

.carousel-aspect-wrapper[b-ibyc7i9tkq] {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 45vh;
}

[b-ibyc7i9tkq] .carousel-aspect-wrapper .k-carousel {
    height: 100%;
}

.subscriber-badge[b-ibyc7i9tkq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    border: 1px solid;
    white-space: nowrap;
    vertical-align: middle;
}

.subscriber-badge-active[b-ibyc7i9tkq] {
    color: #15803d;
    background-color: #dcfce7;
    border-color: #86efac;
}

.subscriber-badge-former[b-ibyc7i9tkq] {
    color: #4b5563;
    background-color: #f3f4f6;
    border-color: #d1d5db;
}
/* /Pages/Lists/PriceRate/PriceRate.razor.rz.scp.css */
#priceRate[b-7c235lfe4s]  .surface-popout {
    overflow: auto;
}
[b-7c235lfe4s] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
#priceRate[b-7c235lfe4s]  .k-table-row.selected-row {
    background-color: #BDC3C7;
}
[b-7c235lfe4s] .checkBox {
    display: flex;
    align-items: center;
    justify-content: center;
}
[b-7c235lfe4s] .k-table-td[data-col-index="0"] {
    align-content: center;
}

[b-7c235lfe4s] .k-filtercell-wrapper {
    display: flex;
    justify-content: center;
}
.can-write[b-7c235lfe4s]  .k-grid .k-table-thead .k-table-row .k-table-th[data-col-index="0"] .k-link {
    display: none;
}
[b-7c235lfe4s] .k-grid-toolbar {
    display: flex;
    justify-content: end;
}
.surface[b-7c235lfe4s] {
    height: 98vh;
}
[b-7c235lfe4s] .surface {
    width: auto;
    overflow: hidden;
}
/* /Pages/Lists/PriceRate/PriceRateCalcTmpl/TotalFreeTimePriceCalculator.razor.rz.scp.css */
.week-rates-segment[b-umt7ssv0kb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    padding: 16px 20px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.13);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.week-rates-segment h4[b-umt7ssv0kb] {
    margin: 0 0 10px 0;
    align-self: flex-start;
}

.week-rates-segment input[type="checkbox"][b-umt7ssv0kb] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #8aabcc;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    position: relative;
    display: block;
    margin: auto;
}

.week-rates-segment input[type="checkbox"]:checked[b-umt7ssv0kb]::after {
    content: "✓";
    position: absolute;
    top: -3px;
    left: 1px;
    font-size: 13px;
    color: #2a6fa8;
    font-weight: bold;
}
/* /Pages/Lists/PriceRate/PriceRateForm.razor.rz.scp.css */
.title[b-4n0bmyp9bb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 101;
    background-color: white;
    margin: 0 calc(-1 * min(2vw, 2vh)) 0 calc(-1 * min(2vw, 2vh));
    padding: min(1vw, 1vh) min(2vw, 2vh) 0 min(2vw, 2vh);
    border-radius: min(0.5vh, 0.5vw) min(0.5vh, 0.5vw) 0 0;
}

.panel-header[b-4n0bmyp9bb] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}

[b-4n0bmyp9bb] .k-panelbar .k-panelbar-item {
    border-radius: MIN(0.5vh, 0.5vw);
    margin-bottom: 2rem;
    border-top-width: 0.1vh;
    border-left-width: 0.1vh;
    border-right-width: 0.1vh;
    border-bottom-width: 0.1vh;
    border-color: #e2e2e2;
    border-style: solid;
    overflow: auto;
    box-sizing: border-box;
    scroll-behavior: auto;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px #fafafa, 0px 0px 15px 0px rgba(0, 0, 0, 0.13);
}

[b-4n0bmyp9bb] .k-panelbar {
    border: transparent;
}

.content[b-4n0bmyp9bb] {
    padding: 10px 20px;
}

.form-grid[b-4n0bmyp9bb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1vw;
}

.info-row[b-4n0bmyp9bb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

    .info-row.comment-section[b-4n0bmyp9bb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

[b-4n0bmyp9bb] .k-form-field {
    padding: 12px 0;
}

[b-4n0bmyp9bb] .k-form-field label {
    padding-bottom: 8px;
}

[b-4n0bmyp9bb] .form-field-switch {
    padding: 12px 0;
}

[b-4n0bmyp9bb] .k-actions-start {
    justify-content: center;
    gap: 20px;
}

.tmpl-placeholder[b-4n0bmyp9bb] {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

.group-lable[b-4n0bmyp9bb] {
    font-weight: bold;
    font-family: var(--kendo-font-family, inherit);
}
/* /Pages/Lists/PriceRate/PriceRateTmpl/RollingPriceRate.razor.rz.scp.css */
.segments-grid-wrap[b-ka9doenk44]  td,
.segments-grid-wrap[b-ka9doenk44]  th {
    border-left: none;
    border-right: none;
}

.segments-grid-wrap[b-ka9doenk44]  td:first-child {
    text-align: center;
}
/* /Pages/Lists/PriceRate/PriceRateTmpl/TemplatedPriceRate.razor.rz.scp.css */
.segments-grid-wrap[b-573mga6ce9]  .k-grid-table {
    table-layout: fixed;
}

.segments-grid-wrap[b-573mga6ce9]  td,
.segments-grid-wrap[b-573mga6ce9]  th {
    border-left: none;
    border-right: none;
}

.segments-grid-wrap[b-573mga6ce9]  td:first-child {
    text-align: center;
}
/* /Pages/Lists/PriceRate/PriceRateTmpl/UniversalPriceRate.razor.rz.scp.css */
.week-rates-segment[b-xcn6wopkdm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    padding: 16px 20px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.13);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.week-rates-segment h4[b-xcn6wopkdm] {
    margin: 0 0 10px 0;
    align-self: flex-start;
}

.week-rates-segment .week-rates-controls[b-xcn6wopkdm] {
    align-self: flex-start;
    margin-bottom: 8px;
}

.week-rates-controls label[b-xcn6wopkdm] {
    padding-bottom: 0;
}

.week-rates-segment table[b-xcn6wopkdm]  .week-rate-input {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 1px 2px;
    text-overflow: clip;
}
/* /Pages/Lists/PriceRate/PriceRateTmpl/UniversalPriceRate4.razor.rz.scp.css */
.week-rates-segment[b-uuiw7p5oeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e2e2e2;
    border-radius: 0.5rem;
    padding: 16px 20px;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    background-color: #f5f7f8;
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.13);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.week-rates-segment h4[b-uuiw7p5oeo] {
    margin: 0 0 10px 0;
    align-self: flex-start;
}

.week-rates-segment .week-rates-controls[b-uuiw7p5oeo] {
    align-self: flex-start;
    margin-bottom: 8px;
}

.week-rates-controls label[b-uuiw7p5oeo] {
    padding-bottom: 0;
}

.week-rates-segment table[b-uuiw7p5oeo]  .week-rate-input {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 1px 2px;
    text-overflow: clip;
}
/* /Pages/Login/Login.razor.rz.scp.css */
#login[b-gelithhg5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

h1[b-gelithhg5g] {
    color: white;
    padding: 7vh 1vw;
    font-weight: 400;
    font-size: MIN(1.5vw, 2.8vh);
}
:focus-visible[b-gelithhg5g]
{
    outline:0;
}

#left[b-gelithhg5g]  svg {
    right: -40%;
    bottom: 10%;
    position: absolute;
    width: 130%;
}

#login-surface[b-gelithhg5g] {
    display: flex;
    box-shadow: 0 0.3vh 1vh 0vh #ccc;
    padding: 1vh;
    border-radius: min(1vw, 1vh);
    min-height: 430px;
    align-self: center;
    background-color: white;
    width: 35%;
    min-width: 400px;
}

#login[b-gelithhg5g]  span.k-input-solid,
#login[b-gelithhg5g]  span.k-input-solid:focus {
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0;
    display: block;
    box-shadow: none;
}
#login[b-gelithhg5g]  span.k-form-error {
    position: absolute;
    top: -45%;
}

#left[b-gelithhg5g] {
    background: linear-gradient(202.34deg, #5672B3 0%, #3A4D8F 100%);
    border-radius: min(1vw, 1vh);
    width: 40%;
    position: relative;
    overflow: hidden;


}
@media only screen and (max-width: 1200px) {
    #left[b-gelithhg5g]
    {
        display: none;
    }
}
#form[b-gelithhg5g] {
    height: 46vh;
    padding: MIN(3vh,3vw) MIN(1vw,1vh) 2% 4%;
    display: grid;
    width: 50%;
    min-width:360px;
}

#form img[b-gelithhg5g] {
	justify-self: center;
	max-height: MIN(18vh,18vw);
	max-width: MIN(25vh,25vw);
	padding-bottom: min(1vh, 1vw);
}
	#form img.default-logo[b-gelithhg5g] {
		padding-top: min(4vh, 4vw);
		padding-bottom: min(4vh, 4vw);
	}

#login[b-gelithhg5g]  #btn-forgot {
	justify-self: left;
	height: 6vh;
	color: var(--kendo-color-primary);
	font-weight: bold;
}

#login[b-gelithhg5g]  .k-form-buttons {
    justify-content: right;
    padding-top: 2%;
}
#form[b-gelithhg5g]  .k-form-field {
    padding-bottom: 3vh;
    position: relative;
}
#left[b-gelithhg5g]  svg#cloud {
	top: 9vh;
	width: 31vh;
	right: MIN(-4vw, -16%);
}
#left[b-gelithhg5g]  svg#powered {
	bottom: 2vh;
	width: 9vw;
	left: 1vw;
}
/* /Pages/Login/LoginLayout.razor.rz.scp.css */
video[b-6pc7am74bf], img[b-6pc7am74bf], .login-background-fallback[b-6pc7am74bf] {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
}

/* Stand-in for the video on small displays, so the login screen still reads as branded. */
.login-background-fallback[b-6pc7am74bf] {
	top: 0;
	left: 0;
	background-color: var(--layout-color-primary, #465D9E);
}
img[b-6pc7am74bf]
{
	width:100%;
	/* The <video> above gets only the min-width/min-height pair, and for a replaced element that
	   pair preserves the intrinsic ratio and simply overflows - which is why the clip has always
	   looked right. This rule pins the image to the viewport WIDTH as well, so the two constraints
	   fight and the browser resolves them by stretching: measured 3.8x vertical squash on a
	   390x844 phone, 1.11x at 1440x900, exact only at 16:9. object-fit makes it crop like the
	   video instead of distorting. */
	object-fit: cover;
}

/* The video is painted over the still poster, so fade it in rather than letting the first frame
   snap into place. Both sit at z-index -1; the video wins because it comes later in the DOM. */
.login-background-video[b-6pc7am74bf] {
	opacity: 0;
	transition: opacity .4s ease-in;
}

.login-background-video.ready[b-6pc7am74bf] {
	opacity: 1;
}
/* /Pages/Lot/Dashboard/Dashboard.razor.rz.scp.css */
.lot-dashboard-tab[b-nslfig7348],
.tab-body[b-nslfig7348] {
    padding: 24px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.slot-widget[b-nslfig7348],
.slot-widget-box[b-nslfig7348] {
    flex: 0 0 200px;
    text-align: center;
}

.slot-label-lg[b-nslfig7348] {
    font-size: 1.1em;
}

.panel-row[b-nslfig7348] {
    padding: 0 24px 24px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.term-panel[b-nslfig7348] {
    flex: 0 0 300px;
}

.device-panel[b-nslfig7348] {
    flex: 1 1 320px;
    min-width: 260px;
}

.panel-heading[b-nslfig7348] {
    margin-top: 0;
}

.status-cell[b-nslfig7348] {
    text-align: right;
    width: 24px;
}

.activity-cell[b-nslfig7348] {
    text-align: center;
    width: 80px;
    font-size: .9em;
}

.polling-notice[b-nslfig7348] {
    padding: 8px 12px;
    opacity: .6;
    font-size: .85em;
}

/* ==========================================================================
   Moved out of the global wwwroot/main.css into this component's scoped
   stylesheet (Blazor CSS isolation). Declarations are unchanged.
   NOTE: the .status-dot set below is intentionally duplicated here and in
   TrafficEvents.razor.css — each component now owns its own scoped copy.
   ========================================================================== */

/* ---- Themed status dot (colours come from the active Kendo theme, never hardcoded) ---- */
.status-dot[b-nslfig7348] {
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--kendo-color-base-emphasis);
}
.status-dot--ok[b-nslfig7348] { background: var(--kendo-color-success); }
.status-dot--error[b-nslfig7348] { background: var(--kendo-color-error); }
.status-dot--warning[b-nslfig7348] { background: var(--kendo-color-warning); }
.status-dot--disabled[b-nslfig7348] { background: var(--kendo-color-on-base); }
.status-dot--offline[b-nslfig7348] { background: var(--kendo-color-base-emphasis); }

/* ---- Lot dashboard slot widgets (theme colours) ---- */
.slot-label[b-nslfig7348] { color: var(--kendo-color-subtle); }
.slot-num[b-nslfig7348] { font-size: 3.5em; font-weight: 700; }
.slot-num--used[b-nslfig7348] { color: var(--kendo-color-error); }
.slot-num--free[b-nslfig7348] { color: var(--kendo-color-success); }
.slot-num--total[b-nslfig7348] { color: var(--kendo-color-primary); }
.dashboard-devices-table[b-nslfig7348] { width: 100%; border-collapse: collapse; }
.dashboard-devices-table td[b-nslfig7348] { padding: 4px 8px; }
.dashboard-devices-table tr[b-nslfig7348] { border-bottom: 1px solid var(--kendo-color-border); }
/* /Pages/Lot/Video/Video.razor.rz.scp.css */
.loader-container[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 98.6vh;
}
.draggable[b-2swmspgzzf] {
	cursor: grab;
	padding: 1vh;
}
#videoElements[b-2swmspgzzf]
{
	height:100%;
}

#videoElements[b-2swmspgzzf] {
	--vid-header: color-mix(in srgb, var(--kendo-color-on-app-surface) 82%, var(--menu-selection-color));
	--vid-chrome: color-mix(in srgb, var(--kendo-color-on-app-surface) 54%, var(--menu-selection-color));
	--vid-chrome-hover: color-mix(in srgb, var(--vid-chrome) 78%, var(--kendo-color-surface-alt));
	--vid-border: color-mix(in srgb, var(--layout-color-third) 40%, transparent);
	--vid-border-hover: color-mix(in srgb, var(--layout-color-third) 85%, var(--kendo-color-surface-alt));
	--vid-ground: #000;
	--vid-shadow: color-mix(in srgb, var(--layout-color-primary) 62%, #000);
	--vid-overlay: color-mix(in srgb, color-mix(in srgb, var(--layout-color-primary) 30%, #000) 92%, transparent);
	--vid-events-scrim: color-mix(in srgb, color-mix(in srgb, var(--layout-color-primary) 30%, #000) 72%, transparent);
	--vid-events-header: color-mix(in srgb, var(--layout-color-primary) 30%, #000);
	/* The same shade as the header on purpose. The edge runs OUTSIDE the header (the tile clips its
	   children to the padding box, so nothing can paint over a border), and at 54% it was lighter
	   than the header — which read as a stray hairline drawn across the top of the bar and around
	   its rounded corners. Matching the header leaves the top as one piece, and against the light
	   page the edge still separates the tile everywhere else. */
	--vid-tile-edge: var(--vid-header);
	--vid-on-chrome: var(--kendo-color-on-primary);
	--vid-ok: var(--kendo-color-success);
}

#videoElements[b-2swmspgzzf]  .k-tilelayout
{
	height: 100%;
}
#videoElements canvas[b-2swmspgzzf] {
	width: 100%;
}

#videoElements[b-2swmspgzzf]  .camera-id canvas.video-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#videoElements[b-2swmspgzzf]  .k-card-header {
	z-index: 2;
	position: absolute;
	width: 100%;
	border:0;
	background-color: var(--vid-header);
	color: var(--vid-on-chrome);
	flex-wrap: nowrap;
	min-height: 2.4rem;
	align-items: center;
	padding-inline: 0.75rem;
	padding-block: 0.25rem;
	gap: 0;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.video-fullscreen .k-card-header {
	background-color: transparent;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
	cursor: default;
}

#videoElements .tile-actions[b-2swmspgzzf]
{
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.55rem;
	min-width: 0;
}

#videoElements .video-header[b-2swmspgzzf]
{
	container-type: inline-size;
	container-name: tilehdr;
}

#videoElements .tile-actions .icon-only[b-2swmspgzzf]  .k-button-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@container tilehdr (max-width: 38rem) {
	#videoElements .tile-actions[b-2swmspgzzf]  .k-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	#videoElements .tile-actions[b-2swmspgzzf]  .barrier-btn .k-button-text {
		display: inline-flex;
		align-items: center;
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip-path: none;
	}
	#videoElements .tile-actions[b-2swmspgzzf]  .barrier-btn .btn-label {
		min-width: 0;
	}
	#videoElements[b-2swmspgzzf]  .k-card-title {
		min-width: 0;
	}
	#videoElements[b-2swmspgzzf]  .terminal-status-icons {
		margin-inline: 0.45rem;
	}
	#videoElements .tile-actions[b-2swmspgzzf]  .k-button {
		padding-inline: 0.4em;
	}
}

@container tilehdr (max-width: 27rem) {
	#videoElements .video-header .terminal-direction[b-2swmspgzzf] {
		display: none;
	}
	#videoElements .video-header .k-card-title label[b-2swmspgzzf] {
		display: none;
	}
}

#videoElements .tile-side-column[b-2swmspgzzf] {
	position: absolute;
	top: 5.5rem;
	right: 0.4vw;
	max-height: calc(100% - 6rem);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4vh;
	overflow: hidden;
	z-index: 3;
	pointer-events: auto;
}

#videoElements[b-2swmspgzzf]  .camera-id .tile-clock {
	position: absolute;
	top: 3.4rem;
	left: 0.5vw;
	z-index: 3;
	padding: 0.15rem 0.45rem;
	border-radius: 0.35rem;
	background: rgba(0, 0, 0, 0.55);
	font-variant-numeric: tabular-nums;
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--kendo-color-on-primary);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover .camera-id .tile-clock {
	opacity: 1;
}

#videoElements[b-2swmspgzzf]  .k-tilelayout-item:has(.tile-events) .camera-id .tile-clock {
	display: none;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item:has(.tile-events) .tile-fullscreen-btn {
	display: none;
}
#videoElements .tile-hover-btn[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid rgba(255,255,255,0.35);
	border-radius: 0.3rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
}

#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover .tile-hover-btn {
	opacity: 1;
	pointer-events: auto;
}
#videoElements .tile-hover-btn:hover[b-2swmspgzzf] {
	background: rgba(0,0,0,0.8);
}

#videoElements .camera-id > .tile-fullscreen-btn[b-2swmspgzzf] {
	position: absolute;
	top: 3.4rem;
	right: 0.5vw;
	z-index: 3;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 0.45rem;
	padding: 0;
}

#videoElements .tile-fullscreen-glyph[b-2swmspgzzf] {
	width: 100%;
	height: 100%;
	display: block;
}

#videoElements[b-2swmspgzzf]  .barrier-boom {
	display: inline-flex;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.35em;
	vertical-align: -0.15em;
}
#videoElements[b-2swmspgzzf]  .barrier-boom svg {
	width: 100%;
	height: 100%;
}
#videoElements[b-2swmspgzzf]  .barrier-boom .boom-arm {
	transform-box: view-box;
	transform-origin: 5px 9px;
	transition: transform 0.2s ease;
}
#videoElements[b-2swmspgzzf]  .barrier-boom.boom-up .boom-arm {
	transform: rotate(-55deg);
}
#videoElements[b-2swmspgzzf]  .barrier-boom.boom-error {
	color: var(--kendo-color-error);
}

#videoElements[b-2swmspgzzf]  .barrier-boom.boom-absent {
	display: none;
}

#videoElements[b-2swmspgzzf]  .barrier-boom.boom-unconfirmed .boom-arm {
	stroke-dasharray: 3 3;
}
#videoElements[b-2swmspgzzf]  .barrier-boom.boom-unconfirmed {
	opacity: 0.75;
}

#videoElements[b-2swmspgzzf]  .tile-events {
	position: absolute;
	inset: 3.4rem 0 0 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--vid-events-scrim) 35%, transparent) 0%,
		var(--vid-events-scrim) 55%,
		var(--vid-events-scrim) 100%);
	color: var(--vid-on-chrome);
	border: 0;
	text-align: left;
}

#videoElements[b-2swmspgzzf]  .tile-events::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2.2rem;
	background: linear-gradient(to bottom, transparent, var(--vid-events-scrim));
	pointer-events: none;
}
#videoElements[b-2swmspgzzf]  .tile-events-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.2rem 0.3rem 0.2rem 0.8rem;
	background: var(--vid-events-header);
	border-bottom: 1px solid color-mix(in srgb, var(--vid-on-chrome) 25%, transparent);
}
#videoElements[b-2swmspgzzf]  .tile-events-title {
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#videoElements[b-2swmspgzzf]  .tile-events-close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.15s;
}
#videoElements[b-2swmspgzzf]  .tile-events-close:hover {
	background: color-mix(in srgb, var(--vid-on-chrome) 18%, transparent);
}
#videoElements[b-2swmspgzzf]  .tile-events-close:focus-visible {
	outline: 2px solid var(--kendo-color-primary);
	outline-offset: 1px;
}

#videoElements[b-2swmspgzzf]  .tile-events-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

#videoElements[b-2swmspgzzf]  .tile-events-empty {
	margin: 0;
	padding: 0.9rem 0.8rem;
	text-align: center;
	opacity: 0.7;
}
#videoElements[b-2swmspgzzf]  .tile-events-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

#videoElements[b-2swmspgzzf]  .tile-events-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	text-align: left;
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	background: var(--vid-events-header);
	border-bottom: 0;
	color: color-mix(in srgb, var(--vid-on-chrome) 85%, transparent);
}

#videoElements[b-2swmspgzzf]  .tile-events-table th.evt-plate-col {
	font-weight: 700;
	color: var(--vid-on-chrome);
}

#videoElements[b-2swmspgzzf]  .tile-events-table td {
	padding: 0.32rem 0.5rem;
	border-bottom: 0;
	white-space: nowrap;
}

#videoElements[b-2swmspgzzf]  .tile-events-table tr.evt-ok td {
	color: var(--vid-ok);
}

#videoElements[b-2swmspgzzf]  .tile-events-table .evt-dir-col {
	width: 1.6em;
	padding-right: 0;
	text-align: center;
}

#videoElements[b-2swmspgzzf]  .tile-events-table th.evt-dir-col {
	width: auto;
	padding-right: 0.5rem;
	text-align: left;
	white-space: nowrap;
}
#videoElements[b-2swmspgzzf]  .tile-events-table .evt-dir-col .console-dir {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
}
#videoElements[b-2swmspgzzf]  .tile-events-table .event-plate {
	font-weight: 600;
}
#videoElements[b-2swmspgzzf]  .tile-events-table tr.clickable {
	cursor: pointer;
}
#videoElements[b-2swmspgzzf]  .tile-events-table tr.clickable:hover td {
	background: var(--kendo-color-base-hover, rgba(0,0,0,0.06));
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	max-height: calc(100% - 3.4rem);
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--vid-overlay) 45%, transparent) 0%,
		var(--vid-overlay) 45%,
		var(--vid-overlay) 100%);
	color: var(--vid-on-chrome);
	border: 0;
	text-align: left;
}
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem 0.45rem 1rem;
	background: rgba(255, 255, 255, 0.06);
	border-bottom: 0;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-header strong {
	font-size: 1.05rem;
	font-weight: 400;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body {
	flex: 0 1 auto;
	overflow-y: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	padding: 0.45rem 1rem;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .required-mark {
	color: var(--kendo-color-error);
	margin-left: 0.15em;
}
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body label:not(:has(.required-mark)) {
	opacity: 0.7;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .k-textbox,
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .k-dropdownlist,
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .k-datepicker,
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .k-timepicker {
	flex: 0 0 auto;
	width: auto !important;
	min-width: 7em;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .plate-datetime-pair {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .plate-recent {
	flex: 1 0 100%;
	margin: 0;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body .open-reason-plate {
	flex: 1 0 100%;
	margin: 0;
	opacity: 0.85;
}
#videoElements[b-2swmspgzzf]  .tile-plate-dialog-body label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	white-space: nowrap;
	opacity: 0.85;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 0.2rem 1rem 0.8rem;
	border-top: 0;
}

#videoElements[b-2swmspgzzf]  .tile-plate-dialog-footer .k-button {
	border-radius: 0.5rem;
}
#videoElements[b-2swmspgzzf]  .k-card-title .main-tile-badge {
	display: inline-flex;
	align-items: center;
	opacity: 0.65;
	margin-right: 0.2rem;
}
#videoElements .tile-console[b-2swmspgzzf] {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 1vh;
	--console-lines: 5;
	--console-line-height: 1.35;
	line-height: var(--console-line-height);
	box-sizing: content-box;
	max-height: calc(var(--console-lines) * var(--console-line-height) * 1em);
	user-select: none;
	font-size: 0.95rem;
	line-break: anywhere;
	overflow: hidden;
	border-radius: 0.3vw;
	padding: 0.2vh 5%;
	transition: background-color 0.2s;
}
#videoElements .tile-console:not(:empty):hover[b-2swmspgzzf] {
	background-color: rgba(0, 0, 0, 0.6);
}
#videoElements .tile-console p[b-2swmspgzzf] {
	margin: 0;
}

#videoElements .tile-console .console-dir[b-2swmspgzzf] {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-inline-end: 0.35em;
	flex: none;
}

#videoElements .tile-console p[b-2swmspgzzf] {
	color: var(--vid-on-chrome);
	text-shadow: none;
	font-variant-numeric: tabular-nums;
}
#videoElements .tile-console[b-2swmspgzzf] {
	background: linear-gradient(to top, color-mix(in srgb, var(--vid-ground) 85%, transparent), transparent);
	border-radius: 0;
}
#videoElements .tile-console p.evt-ok[b-2swmspgzzf] {
	color: var(--vid-ok);
}
#videoElements .tile-console p.clickable[b-2swmspgzzf] {
	cursor: pointer;
}
#videoElements .tile-console p.clickable:hover[b-2swmspgzzf] {
	text-decoration: underline;
}
#videoElements[b-2swmspgzzf]  .k-card-body {
	padding: 0;
	justify-content: center;
	display: flex;
	align-items: center;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item {
	background-color: var(--vid-ground);
	border: 1px solid var(--vid-tile-edge);
	box-shadow: 0 3px 8px color-mix(in srgb, var(--vid-shadow) 22%, transparent);
	background-clip: padding-box;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s;
}

#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover {
	border-color: var(--vid-border-hover);
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-red-thick {
	outline: 5px solid var(--kendo-color-error);
	outline-offset: -5px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-red-thin {
	outline: 2px solid var(--kendo-color-error);
	outline-offset: -2px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-green-thick {
	outline: 5px solid var(--kendo-color-success);
	outline-offset: -5px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.alert-green-thin {
	outline: 2px solid var(--kendo-color-success);
	outline-offset: -2px;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item.blank-tile {
	background-color: var(--layout-color-background);
}
#videoElements[b-2swmspgzzf]  .tile-content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#videoElements[b-2swmspgzzf]  .camera-id
{
	width: 100%;
	height: 100%;
	position: relative;
}
.video-element-mirror[b-2swmspgzzf] {
	display: none;
}
@media (pointer: coarse), (max-width: 1024px) {
	/* Mobile: keep canvas in the rendering tree (captureStream needs it visible
	   to produce frames in Chromium) but overlay the <video> on top of it. */
	#videoElements[b-2swmspgzzf]  .camera-id,
	.mobile-camera-canvas[b-2swmspgzzf] {
		position: relative;
	}
	#videoElements[b-2swmspgzzf]  .camera-id .video-element-mirror,
	.mobile-camera-canvas .video-element-mirror[b-2swmspgzzf] {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		background: #000;
		/* Above canvas (later in source) but below overlays (.video-overlay z:1,
		   stats overlays z:1+). pointer-events:none so clicks reach overlays. */
		z-index: 0;
		pointer-events: none;
	}
}

#video_settings[b-2swmspgzzf] {
	position: absolute;
}
#video[b-2swmspgzzf] {
	height: 98.6vh;
}
[b-2swmspgzzf] #tabstrip-buttons {
	order: 999;
	flex: 1;
}
[b-2swmspgzzf] #tabstrip-buttons .k-link
{
	display: flex;
	gap: 0.6vw;
	width: 100%;
	cursor: auto;
	padding-block: 0.5vh;
	padding-left: 1vw;
	padding-right: 0;
}
[b-2swmspgzzf] #tabstrip-buttons:focus,
[b-2swmspgzzf] #tabstrip-buttons:active 
{
	box-shadow: none;
	border:0;
	margin-bottom:0;
	border-bottom-color: var(--layout-color-background)!important;
	background-color: var(--layout-color-background);
}
[b-2swmspgzzf] .lot-occupancy {
	margin-left: auto;
	align-self: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-size: 1.25rem;
	line-height: 1;
	cursor: default;
	/* Flex, not inline: the lot name needs overflow:hidden for its ellipsis, and an inline-block
	   with overflow other than visible takes its bottom margin edge as the baseline instead of the
	   text baseline — measured 1px off its same-sized neighbour. Flex baseline alignment uses the
	   real first baseline, so the parts stop stepping. */
	display: inline-flex;
	align-items: baseline;
}
[b-2swmspgzzf] .lot-occupancy-lot {
	opacity: 0.75;
	font-size: 0.8em;
	margin-right: 0.5em;
	max-width: 12em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}
[b-2swmspgzzf] .lot-occupancy-free {
	font-weight: 600;
}
[b-2swmspgzzf] .lot-occupancy-word {
	opacity: 0.75;
	font-size: 0.8em;
	/* 0.5em, not 0.15em: inline layout used to add a real space from the markup newline before this
	   word, and the flex row above drops it. Measured 8px, matching the lot-name gap. */
	margin-inline: 0.5em 0.35em;
}
[b-2swmspgzzf] .lot-occupancy-low .lot-occupancy-free {
	color: var(--kendo-color-warning);
}
[b-2swmspgzzf] .lot-occupancy-full .lot-occupancy-free {
	color: var(--kendo-color-error);
}
[b-2swmspgzzf] .lot-occupancy-sep,
[b-2swmspgzzf] .lot-occupancy-total {
	opacity: 0.65;
}
[b-2swmspgzzf] .lot-occupancy-sep {
	margin: 0 0.15em;
}
[b-2swmspgzzf] .lot-occupancy + .settings-btn,
[b-2swmspgzzf] .lot-occupancy + .event-close-btn {
	margin-left: 0;
}
[b-2swmspgzzf] .settings-btn {
	margin-left: auto;
	height: 2.1rem;
	padding-inline: 0.9em;
	gap: 0.45em;
	background: var(--layout-color-background);
	border: 1px solid color-mix(in srgb, var(--kendo-color-primary) 25%, transparent);
	border-radius: 0.45rem;
	color: var(--kendo-color-primary);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--kendo-color-primary) 15%, transparent);
	white-space: nowrap;
}
[b-2swmspgzzf] .event-close-btn {
	margin-left: auto;
	width: MIN(5vw, 5vh);
	height: MIN(6vw, 4vh);
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .tab-drag-handle {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .tab-drag-handle.is-draggable,
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .tab-drag-handle.is-draggable * {
	cursor: grab;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items {
	row-gap: 0.75rem;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item {
	background: var(--kendo-color-surface-alt);
	border: 1px solid color-mix(in srgb, var(--vid-shadow) 16%, transparent);
	border-radius: 0.625rem;
	color: var(--kendo-color-on-base);
	margin-right: 0.75rem;
	padding-inline: 0;
	height: 2.4rem;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item:has(.settings-btn),
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item:has(.settings-btn):hover {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
	color: inherit;
	cursor: default;
	margin-right: 0;
	border-width: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item:has(.settings-btn) > .k-link {
	padding-right: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item {
	transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item:hover {
	background: color-mix(in srgb, var(--kendo-color-primary) 20%, var(--kendo-color-surface-alt));
	border-color: color-mix(in srgb, var(--kendo-color-primary) 55%, transparent);
	color: var(--kendo-color-primary);
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item.k-active:hover {
	background: color-mix(in srgb, var(--kendo-color-primary) 85%, #fff);
	color: var(--kendo-color-on-primary);
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item.k-active {
	background: var(--kendo-color-primary);
	border-color: transparent;
	color: var(--kendo-color-on-primary);
	margin-bottom: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item.k-active::after {
	display: none;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip > .k-tabstrip-items-wrapper {
	border-bottom: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items .k-item > .k-link {
	height: 100%;
	min-height: 0;
	align-items: center;
	padding-block: 0;
	padding-inline: 1.05rem;
	font-size: 1.125rem;
	line-height: 1.2;
}
[b-2swmspgzzf] .settings-btn .k-button-icon,
[b-2swmspgzzf] .settings-btn.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg,
[b-2swmspgzzf] .settings-btn.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg,
[b-2swmspgzzf] .event-close-btn .k-button-icon,
[b-2swmspgzzf] .event-close-btn.k-button-md.k-icon-button .k-button-icon.k-svg-icon > svg,
[b-2swmspgzzf] .event-close-btn.k-button-md.k-icon-button .k-button-icon.k-icon-md > svg
 {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}
.surface[b-2swmspgzzf] {
	background-color: var(--layout-color-background);
	border-width: 0;
	padding: 0.65rem;
}
[b-2swmspgzzf] .k-pane {
	background: var(--layout-color-background);
}
[b-2swmspgzzf] .k-splitter {
	background: transparent;
	border-width: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-content {
	border-width: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-content,
[b-2swmspgzzf] .k-tilelayout {
	background: transparent;
}
[b-2swmspgzzf] .k-tilelayout {
	padding: 0 !important;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-content {
	padding-top: 1.45rem;
	padding-inline: 0;
	padding-bottom: 0;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-content:focus
{
	border: 0;
	outline: 0;
}
[b-2swmspgzzf] .tab-button {
	padding: 0;
	margin-left: 0.3vw;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items input {
	field-sizing: content;
}
[b-2swmspgzzf] .k-pane > .k-tabstrip .k-tabstrip-items label {
	user-select: none;
}
.is-presented[b-2swmspgzzf]
{
	cursor: not-allowed;
}
.video-header .k-card-title label.renameable[b-2swmspgzzf] {
	cursor: cell;
}
.terminal-id-badge.renameable[b-2swmspgzzf] {
	cursor: cell;
}
.terminal-rename-active[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	margin-left: 0.4em;
	max-width: 12em;
}
.camera-rename-active[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	padding: 0.2em 0;
}
[b-2swmspgzzf] .camera-rename-active .k-input {
	height: 1.6em;
}
.camera-rename-active .camera-suffix[b-2swmspgzzf] {
	white-space: nowrap;
}
.camera-change-drop-target[b-2swmspgzzf] {
	box-shadow: inset 0 0 0 0.1vw var(--kendo-color-primary);
}
#ctrl-tip[b-2swmspgzzf] {
	width: 100%;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	background-color: var(--kendo-color-base);
}
#ctrl-tip span[b-2swmspgzzf] {
	padding: 1vh 1vw;
	text-align: center;
}
#ctrl-tip span[b-2swmspgzzf]  span
{
	padding-right:0.3vw;
}
[b-2swmspgzzf] .hidden
{
	display: none;
}

/* Blank tile placeholder */
.blank-tile-placeholder[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.blank-tile-placeholder:hover[b-2swmspgzzf] {
	opacity: 0.8;
}
.blank-tile-placeholder span[b-2swmspgzzf] {
	font-size: 0.85rem;
}

/* Video overlay states (loader + signal lost) */
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	background-color: rgba(0, 0, 0, 0.7);
	color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	pointer-events: none;
}
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay span {
	font-size: 0.85rem;
}
/* Annotation overlay: a transparent canvas covering the video box, drawn at display resolution
   (see webcodecs.js drawAnnotationOverlay) so boxes/text stay crisp on low-res streams. Below the
   loader/lost overlays (later in source, same z) and click-through. */
#videoElements[b-2swmspgzzf]  .camera-id .annotation-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay.hidden {
	display: none;
}
#videoElements[b-2swmspgzzf]  .video-overlay-lost .k-svg-icon {
	color: color-mix(in srgb, color-mix(in srgb, var(--kendo-color-error) 72%, var(--kendo-color-surface-alt)) 80%, transparent);
}

#videoElements[b-2swmspgzzf]  .video-overlay-lost .lost-never {
	display: none;
}
#videoElements[b-2swmspgzzf]  .video-overlay-lost.never-connected .lost-stale {
	display: none;
}
#videoElements[b-2swmspgzzf]  .video-overlay-lost.never-connected .lost-never {
	display: inline;
}

#videoElements[b-2swmspgzzf]  .video-overlay-lost.never-connected .k-svg-icon {
	color: color-mix(in srgb, var(--kendo-color-warning) 85%, transparent);
}

#videoElements[b-2swmspgzzf]  .camera-id .video-overlay.video-overlay-unavailable {
	pointer-events: auto;
	padding: 0.5rem;
	text-align: center;
}
#videoElements[b-2swmspgzzf]  .camera-id .video-overlay.video-overlay-unavailable .k-svg-icon {
	color: color-mix(in srgb, var(--kendo-color-warning) 90%, transparent);
}

[b-2swmspgzzf] .k-tilelayout-item.video-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999;
	width: 100vw !important;
	height: 100vh !important;
	border-radius: 0 !important;
	border:0;
}

@keyframes blink-b-2swmspgzzf
{
	50%
	{
		opacity: 0.0;
	}
}

.blink[b-2swmspgzzf] 
{
	animation: blink-b-2swmspgzzf 1s step-start 0s infinite;
}
#simulation[b-2swmspgzzf]
{
	user-select: none;
}
#simulation svg[b-2swmspgzzf]
{
	background: var(--menu-selection-color);
	border-radius: 12px;
}
#simulation #simulated-car[b-2swmspgzzf]
{
	cursor: grab;
}
#simulation #simulated-camera[b-2swmspgzzf]
{
	cursor: pointer;
}
.event-panel[b-2swmspgzzf],
.settings-panel[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.8vh;
	padding: 1vh 0.5vw;
}
.event-panel[b-2swmspgzzf]
{
	padding-top: 1vh;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	box-sizing: border-box;
}

.side-pane[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}
.side-pane-header[b-2swmspgzzf] {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.35rem 0.35rem 0.35rem 1.5rem;
}
.side-pane-header[b-2swmspgzzf]::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	right: 0.35rem;
	bottom: 0;
	border-bottom: 1px solid var(--kendo-color-border-alt);
}
.side-pane-header h3[b-2swmspgzzf] {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.side-pane-header[b-2swmspgzzf]  .side-pane-close {
	flex: 0 0 auto;
}
.event-panel[b-2swmspgzzf]  .k-tabstrip .k-content {
	overflow-y: visible;
}
.event-panel[b-2swmspgzzf]  .title {
	display: none;
}
.event-panel[b-2swmspgzzf]  .event-info {
	height: auto;
	overflow-y: visible;
	scrollbar-width: auto;
}
.setting-group[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.3vh;
}
.setting-group-button[b-2swmspgzzf] {
	padding-top: 1.2vh;
}
.setting-label[b-2swmspgzzf] {
	font-size: 0.85em;
	font-weight: 600;
	opacity: 0.85;
	padding-top:1vh;
}
.video-header[b-2swmspgzzf]
{
	display: flex;
	justify-content: space-between;
}
.video-header .k-card-title[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 6em;
	overflow: hidden;
}
.video-header .k-card-title label[b-2swmspgzzf] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

#videoElements .video-header .video-stat-fps[b-2swmspgzzf],
#videoElements .video-header .video-stat-bitrate[b-2swmspgzzf] {
	opacity: 0;
	transition: opacity 0.15s;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover .video-header .video-stat-fps,
#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover .video-header .video-stat-bitrate {
	opacity: 0.85;
}
.video-header .video-stats[b-2swmspgzzf] {
	position: absolute;
	top: 5.6rem;
	right: 0.6vw;
	z-index: 3;
	overflow: hidden;
	min-width: 0;
	gap: 0.5em;
	padding: 0.1em 0.5em;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.45);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

#videoElements .tile-actions[b-2swmspgzzf]  .k-button {
	background: var(--vid-chrome);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: var(--vid-on-chrome);
	border-radius: 999px;
	box-shadow: none;
	justify-content: center;
}

#videoElements .tile-actions[b-2swmspgzzf]  .k-button:hover {
	background: var(--vid-chrome-hover);
}

#videoElements .tile-actions[b-2swmspgzzf]  .k-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.75);
}

#videoElements .tile-actions .icon-only[b-2swmspgzzf]  .k-button {
	background: transparent;
	border-color: transparent;
	border-radius: 6px;
}
#videoElements .tile-actions .icon-only[b-2swmspgzzf]  .k-button:hover {
	background: rgba(255, 255, 255, 0.18);
}
.video-header .k-card-title .title-direction[b-2swmspgzzf] {
	order: -1;
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-right: 0.35em;
	color: var(--vid-on-chrome);
}
.video-header .terminal-status-icons[b-2swmspgzzf] {
	flex: none;
	overflow: hidden;
	min-width: 0;
	margin-inline: 1.1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}
.video-header .loop-cue[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1em;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	opacity: 0.45;
}
.video-header .loop-cue.loop-cue-on[b-2swmspgzzf] {
	color: var(--kendo-color-warning);
	opacity: 1;
}
.video-header .terminal-direction[b-2swmspgzzf] {
	flex: 0 0 auto;
}
.video-header .terminal-direction svg[b-2swmspgzzf] {
	width: 1.25em;
	height: 1.25em;
	vertical-align: -0.25em;
}
.video-header .k-card-title[b-2swmspgzzf]  .k-input {
	height: 1.6vh;
	min-height: 0;
}
.video-header .k-card-title[b-2swmspgzzf]  input {
	field-sizing: content;
}
.camera-suffix[b-2swmspgzzf] {
	opacity: 0.6;
	font-size: 0.85em;
	white-space: nowrap;
}
.terminal-id-badge.terminal-colored[b-2swmspgzzf] {
	background: rgba(128, 128, 128, 0.25);   
	color: #fff;
	opacity: 1;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.terminal-color-bar[b-2swmspgzzf] {
	display: inline-block;
	width: 0.35em;
	height: 1em;
	margin-right: 0.35em;
	border-radius: 2px;
	vertical-align: text-bottom;
}
.terminal-id-badge[b-2swmspgzzf] {
	order: -2;
	flex: none;
	margin-left: 0;
	margin-right: 0.5em;
	padding: 0.12em 0.55em;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.25);
	opacity: 1;
	font-weight: 800;
	font-size: 1.2em;
	white-space: nowrap;
	cursor: default;
	display: inline-block;
	vertical-align: bottom;
}
.video-stats[b-2swmspgzzf]
{
	display: flex;
	gap: 0.8vw;
	font-size: MIN(0.7vw, 1.2vh);
	opacity: 0.45;
	align-items: center;
}
.video-stats span:empty[b-2swmspgzzf]
{
	display: none;
}
.video-stat-loader[b-2swmspgzzf] {
	opacity: 1;
	font-size: initial;
}
.video-stat-loader[b-2swmspgzzf]  .k-loader-segment {
	color: var(--kendo-color-on-primary);
}
.video-stat-throttle[b-2swmspgzzf] {
	display: none;
	color: var(--kendo-color-warning);
}
[b-2swmspgzzf] .k-splitbar
{
	display:none;
}

.settings-pane-wrapper[b-2swmspgzzf],
.event-panel[b-2swmspgzzf] {
	padding-left: 1.5rem;
}
.settings-pane-wrapper[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}
.settings-pane-wrapper .settings-panel[b-2swmspgzzf] {
	flex-shrink: 0;
}
.settings-pane-wrapper[b-2swmspgzzf]  .k-treelist {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.tree-direction[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}
.tree-direction svg[b-2swmspgzzf] {
	width: 1rem;
	height: 1rem;
}
.settings-panel .layout-setting-container[b-2swmspgzzf] {
	display:flex;
	justify-content:center;
}

/* === MOBILE LAYOUT === */
.mobile-video-container[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.mobile-tab-bar[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1vh 2vw;
	background-color: var(--kendo-color-surface);
	border-bottom: 1px solid var(--kendo-color-border-alt);
	flex-shrink: 0;
	height: 6vh;
}
.mobile-carousel[b-2swmspgzzf] {
	flex: 1;
	overflow: hidden;
	position: relative;
	touch-action: pan-x;
}
.mobile-carousel-track[b-2swmspgzzf] {
	display: flex;
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.mobile-slide[b-2swmspgzzf] {
	min-width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: black;
}
.mobile-camera-header[b-2swmspgzzf] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1vh 3vw;
	color: white;
	height: 5vh;
	pointer-events: none;
}
.mobile-camera-name[b-2swmspgzzf] {
	font-size: 3.5vw;
	font-weight: 600;
	text-align: center;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Gate context in the phone's top bar: which gate, which way it faces, whether its barrier is up
   and what mode it is in — the same four things the wall puts in a tile header. Everything here is
   flex-0 so the camera name is the only part that gives way when the row runs out of width. */
.mobile-tab-bar .mobile-gate-badge[b-2swmspgzzf] {
	flex: 0 0 auto;
	font-size: 3vw;
	padding: 0.2rem 0.5rem;
	border-radius: 0.4rem;
	color: #fff;
}
.mobile-tab-bar .mobile-gate-direction[b-2swmspgzzf],
.mobile-tab-bar .mobile-gate-state[b-2swmspgzzf],
.mobile-tab-bar .mobile-gate-mode[b-2swmspgzzf] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
/* The mode glyph is a status, not a control: muted so it reads beside the gate badge rather than
   as a stray black block on the light bar. */
.mobile-tab-bar .mobile-gate-mode[b-2swmspgzzf],
.mobile-tab-bar .mobile-gate-state[b-2swmspgzzf] {
	opacity: 0.65;
}
.mobile-tab-bar .mobile-gate-direction svg[b-2swmspgzzf] {
	width: 1.25rem;
	height: 1.25rem;
}

.mobile-board-band[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	padding: 1vh 0;
	background-color: var(--kendo-color-surface);
}
.mobile-camera-stats[b-2swmspgzzf] {
	font-size: 2.5vw;
	opacity: 0.85;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
}
.mobile-camera-canvas[b-2swmspgzzf] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
}
.mobile-camera-canvas .video-overlay-unavailable[b-2swmspgzzf] {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	padding: 0.5rem;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	pointer-events: auto;
}
[b-2swmspgzzf] .mobile-camera-canvas .video-overlay-unavailable .k-svg-icon {
	color: color-mix(in srgb, var(--kendo-color-warning) 90%, transparent);
}

/* The carousel lives outside #videoElements, so the wall's overlay rules do not reach it — these
   are the paired copies for "connecting" and "no picture". Same class names on purpose: the JS
   watchdog toggles .hidden / .never-connected without knowing which layout it is painting. */
.mobile-camera-canvas .video-overlay-loader[b-2swmspgzzf],
.mobile-camera-canvas .video-overlay-lost[b-2swmspgzzf] {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1vh;
	padding: 0.5rem;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7);
	color: rgba(255, 255, 255, 0.8);
	z-index: 1;
}
/* The loader is a state, not a control — a tap belongs to the picture under it. The lost overlay
   carries the retry button, so it takes its taps. */
.mobile-camera-canvas .video-overlay-loader[b-2swmspgzzf] {
	pointer-events: none;
}
.mobile-camera-canvas .video-overlay-lost[b-2swmspgzzf] {
	pointer-events: auto;
}
.mobile-camera-canvas .video-overlay.hidden[b-2swmspgzzf] {
	display: none;
}
.mobile-camera-canvas .video-overlay-lost .lost-never[b-2swmspgzzf] {
	display: none;
}
.mobile-camera-canvas .video-overlay-lost.never-connected .lost-stale[b-2swmspgzzf] {
	display: none;
}
.mobile-camera-canvas .video-overlay-lost.never-connected .lost-never[b-2swmspgzzf] {
	display: inline;
}
[b-2swmspgzzf] .mobile-camera-canvas .video-overlay-lost .k-svg-icon {
	color: color-mix(in srgb, color-mix(in srgb, var(--kendo-color-error) 72%, var(--kendo-color-surface-alt)) 80%, transparent);
}
[b-2swmspgzzf] .mobile-camera-canvas .video-overlay-lost.never-connected .k-svg-icon {
	color: color-mix(in srgb, var(--kendo-color-warning) 85%, transparent);
}
.mobile-camera-canvas canvas[b-2swmspgzzf] {
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mobile-carousel .mobile-camera-canvas[b-2swmspgzzf] {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	background-color: #000;
}
.mobile-carousel .mobile-camera-canvas canvas.video-element[b-2swmspgzzf] {
	height: 100%;
	max-height: 100%;
}
.mobile-events[b-2swmspgzzf] {
	order: 2;
	flex: 1 1 auto;
	min-height: 0;
	border-top: 1px solid var(--kendo-color-border-alt);
	overflow: hidden;
	background: var(--kendo-color-surface);
	color: var(--kendo-color-on-app-surface);
}/* The buttons spread across the width instead of one wide Open on the left and two icons
   squeezed against the right edge; every target ends up under a thumb. */
.mobile-gate-row[b-2swmspgzzf] {
	order: 1;
	display: flex;
	align-items: stretch;
	gap: 3vw;
	padding: 1.2vh 4vw 0.8vh;
	background-color: var(--kendo-color-surface);
}
.mobile-gate-row[b-2swmspgzzf]  .k-button {
	height: 56px;
	border-radius: 0.6rem;
	font-size: 1rem;
}
.mobile-gate-row[b-2swmspgzzf]  .mobile-open-btn {
	flex: 6 1 0;
}
.mobile-gate-row[b-2swmspgzzf]  .mobile-plate-btn {
	flex: 4 1 0;
}

.mobile-state-row[b-2swmspgzzf] {
	order: 1;
	display: flex;
	align-items: center;
	gap: 1.2vw;
	min-height: 44px;
	padding: 0 2.5vw 1.2vh;
	background-color: var(--kendo-color-surface);
}
.mobile-state-spacer[b-2swmspgzzf] {
	flex: 1 1 auto;
}
.mobile-boom[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--kendo-color-on-app-surface) 80%, transparent);
}
.mobile-boom .barrier-boom[b-2swmspgzzf] {
	display: inline-flex;
	width: 1.2em;
	height: 1.2em;
}
.mobile-boom .barrier-boom svg[b-2swmspgzzf] {
	width: 100%;
	height: 100%;
}
.mobile-boom .barrier-boom.boom-up .boom-arm[b-2swmspgzzf] {
	transform-box: view-box;
	transform-origin: 5px 9px;
	transform: rotate(-55deg);
}
.mobile-boom .barrier-boom.boom-error[b-2swmspgzzf] {
	color: var(--kendo-color-error);
}
.mobile-boom .barrier-boom.boom-unconfirmed .boom-arm[b-2swmspgzzf] {
	stroke-dasharray: 3 3;
}

.mobile-mode-chip[b-2swmspgzzf] {
	display: inline-flex;
	min-width: 0;
	align-items: center;
	gap: 0.25em;
	flex: 0 1 auto;
	min-height: 44px;
	max-width: 46vw;
	padding: 0 0.5rem;
	border: 1px solid var(--kendo-color-border-alt);
	border-radius: 0.5rem;
	background: var(--kendo-color-base);
	color: var(--kendo-color-on-app-surface);
	font-size: 0.8rem;
	cursor: pointer;
}
.mobile-mode-chip span[b-2swmspgzzf] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mobile-mode-chip.is-override[b-2swmspgzzf] {
	border-color: var(--kendo-color-warning);
	background: color-mix(in srgb, var(--kendo-color-warning) 18%, var(--kendo-color-base));
	font-weight: 600;
}
.mobile-state-row[b-2swmspgzzf]  .mobile-icon-btn {
	flex: 0 0 auto;
	min-width: 40px;
	min-height: 40px;
}

@media (orientation: portrait) {
	.mobile-carousel[b-2swmspgzzf] {
		flex: 0 0 auto;
		aspect-ratio: 16 / 9;
		max-height: 60vh;
	}
}
@media (orientation: landscape) {
	.mobile-events[b-2swmspgzzf] {
		display: none;
	}
}
.mobile-dots[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2vw;
	padding: 1.2vh 0 0.9vh;
	flex: 0 0 auto;
	background-color: var(--kendo-color-surface);
}
.mobile-dot[b-2swmspgzzf] {
	width: 2.5vw;
	height: 2.5vw;
	min-width: 8px;
	min-height: 8px;
	border-radius: 50%;
	background-color: var(--kendo-color-border-alt);
	transition: background-color 0.2s, transform 0.2s;
	cursor: pointer;
}
.mobile-dot.active[b-2swmspgzzf] {
	background-color: var(--kendo-color-primary);
	transform: scale(1.3);
}
.mobile-overlay[b-2swmspgzzf] {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1000;
	animation: fadeIn-b-2swmspgzzf 0.2s ease;
}
.mobile-bottom-sheet[b-2swmspgzzf] {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--kendo-color-surface);
	border-radius: 3vw 3vw 0 0;
	z-index: 1001;
	padding: 2vh 4vw 4vh;
	max-height: 70vh;
	overflow-y: auto;
	animation: slideUp-b-2swmspgzzf 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bottom-sheet-handle[b-2swmspgzzf] {
	width: 10vw;
	height: 0.5vh;
	min-height: 4px;
	background-color: var(--kendo-color-border-alt);
	border-radius: 1vw;
	margin: 0 auto 2vh;
}
.bottom-sheet-actions[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 1.5vh;
}
.bottom-sheet-actions[b-2swmspgzzf]  button {
	width: 100%;
	justify-content: flex-start;
	padding: 1.5vh 3vw;
	min-height: 44px;
}
.mobile-settings-sheet .settings-panel[b-2swmspgzzf] {
	padding: 0;
}
.mobile-settings-sheet .layout-setting-container[b-2swmspgzzf] {
	display: flex;
	justify-content: center;
}
@keyframes fadeIn-b-2swmspgzzf {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes slideUp-b-2swmspgzzf {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
.mobile-video-container.chrome-hidden .mobile-tab-bar[b-2swmspgzzf],
.mobile-video-container.chrome-hidden .mobile-dots[b-2swmspgzzf],
.mobile-video-container.chrome-hidden .mobile-camera-header[b-2swmspgzzf] {
	display: none;
}

.mobile-video-container.is-fullscreen[b-2swmspgzzf] {
	height: 100dvh;
}
.mobile-video-container.is-fullscreen .mobile-tab-bar[b-2swmspgzzf],
.mobile-video-container.is-fullscreen .mobile-dots[b-2swmspgzzf] {
	display: none;
}
.mobile-video-container.is-fullscreen .mobile-carousel[b-2swmspgzzf] {
	flex: 1 1 auto;
	aspect-ratio: auto;
	max-height: none;
}
.mobile-video-container.is-fullscreen .mobile-events[b-2swmspgzzf] {
	display: none;
}
.mobile-events p[b-2swmspgzzf] {
	margin: 0;
	padding: 0.45rem 3vw 0.45rem calc(3vw + 1.4em);
	text-indent: -1.4em;
	border-bottom: 1px solid color-mix(in srgb, var(--kendo-color-border-alt) 55%, transparent);
	font-size: 0.78rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.mobile-events p.evt-ok[b-2swmspgzzf] {
	color: var(--kendo-color-success);
}
.mobile-events p.clickable[b-2swmspgzzf] {
	cursor: pointer;
}
.mobile-events .console-dir[b-2swmspgzzf] {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-inline-end: 0.4em;
	flex: none;
}
.mobile-events-empty[b-2swmspgzzf] {
	text-align: center;
	opacity: 0.7;
	border-bottom: 0 !important;
}

/* Camera list in mobile settings */
.mobile-camera-list[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.5vh;
	max-height: 40vh;
	overflow-y: auto;
}
.mobile-camera-item[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 2vw;
	padding: 1.5vh 2vw;
	border-radius: 1vw;
	cursor: pointer;
	min-height: 44px;
	background-color: var(--kendo-color-base);
}
.mobile-camera-item.added[b-2swmspgzzf] {
	opacity: 0.6;
}
.mobile-camera-item span[b-2swmspgzzf] {
	flex: 1;
}
.mobile-camera-item .mobile-camera-action[b-2swmspgzzf] {
	margin-left: auto;
}
.mobile-camera-item .mobile-terminal-cams[b-2swmspgzzf] {
	flex: 0 0 auto;
	min-width: 1.4em;
	padding: 0.05em 0.45em;
	border-radius: 0.6em;
	background: color-mix(in srgb, var(--kendo-color-on-app-surface) 12%, transparent);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	text-align: center;
}
.mobile-fs-btn[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0.6rem;
	border: 0;
	border-radius: 0.4rem;
	background: transparent;
	color: var(--kendo-color-on-app-surface);
	cursor: pointer;
}
.mobile-fs-btn:hover[b-2swmspgzzf] {
	background: color-mix(in srgb, var(--kendo-color-on-app-surface) 10%, transparent);
}
.mobile-fs-btn:focus-visible[b-2swmspgzzf] {
	outline: 2px solid var(--kendo-color-primary);
	outline-offset: 1px;
}
.mobile-fs-btn .tile-fullscreen-glyph[b-2swmspgzzf] {
	width: 100%;
	height: 100%;
	display: block;
}
/* Pinch-to-zoom support */
.mobile-camera-canvas.zoomed[b-2swmspgzzf] {
	overflow: hidden;
	touch-action: none;
}
.mobile-camera-canvas.zoomed canvas[b-2swmspgzzf] {
	transform-origin: 0 0;
}

/* PosFreq region editor (theme-driven colours via Kendo CSS vars) */
.posfreq-editor[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 4px 2px 2px;
}
.posfreq-toolbar[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.posfreq-toolbar .posfreq-spacer[b-2swmspgzzf] {
	flex: 1;
}
.posfreq-grid-controls[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--kendo-color-border-alt);
}
.posfreq-grid-controls label[b-2swmspgzzf] {
	color: var(--kendo-color-on-app-surface);
}
.posfreq-palette[b-2swmspgzzf] {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.posfreq-swatch-btn[b-2swmspgzzf] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	background: var(--kendo-color-surface);
	color: var(--kendo-color-on-app-surface);
	border: 2px solid transparent;
	transition: border-color 0.12s, background 0.12s;
}
.posfreq-swatch-btn:hover[b-2swmspgzzf] {
	background: var(--kendo-color-base-hover);
}
.posfreq-swatch-btn.active[b-2swmspgzzf] {
	border-color: var(--kendo-color-primary);
	background: var(--kendo-color-base);
}
.posfreq-swatch[b-2swmspgzzf] {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid var(--kendo-color-border-alt);
}
.posfreq-hint[b-2swmspgzzf] {
	font-size: 12px;
	color: var(--kendo-color-on-app-surface);
	opacity: 0.65;
}
.posfreq-canvas-wrap[b-2swmspgzzf] {
	position: relative;
	text-align: center;
	min-height: 140px;
}
.posfreq-canvas[b-2swmspgzzf] {
	max-width: 100%;
	max-height: 58vh;
	cursor: crosshair;
	touch-action: none;
	background: #000;
	border-radius: 6px;
	border: 1px solid var(--kendo-color-border-alt);
}
.posfreq-loader-overlay[b-2swmspgzzf] {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
}

.terminal-id-badge[b-2swmspgzzf] {
	transition: filter 0.15s, box-shadow 0.15s;
}
.terminal-id-badge.renameable:hover[b-2swmspgzzf] {
	filter: brightness(1.18);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
}
.video-header .k-card-title label.renameable[b-2swmspgzzf] {
	padding: 0.15em 0.45em;
	border-radius: 5px;
	transition: background-color 0.15s;
}
.video-header .k-card-title label.renameable:hover[b-2swmspgzzf] {
	background: rgba(255, 255, 255, 0.16);
}
.video-header .terminal-status-icons[b-2swmspgzzf] {
	transition: filter 0.15s;
}
#videoElements[b-2swmspgzzf]  .k-tilelayout-item:hover .video-header .terminal-status-icons {
	filter: opacity(0.9);
}

#videoElements[b-2swmspgzzf]  .tile-console p {
	transition: background-color 0.12s;
	border-radius: 4px;
	padding: 0 0.4em;
}
#videoElements[b-2swmspgzzf]  .tile-console p:hover {
	background: rgba(255, 255, 255, 0.08);
}
#videoElements[b-2swmspgzzf]  .tile-console p.clickable:hover {
	background: rgba(255, 255, 255, 0.16);
}

#videoElements .tile-hover-btn[b-2swmspgzzf] {
	transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
}
#videoElements .tile-hover-btn:hover[b-2swmspgzzf] {
	border-color: rgba(255, 255, 255, 0.75);
}

#videoElements .tile-hover-btn:focus-visible[b-2swmspgzzf] {
	opacity: 1;
	outline: 2px solid var(--kendo-color-primary);
	outline-offset: 2px;
}

#videoElements .tile-actions[b-2swmspgzzf]  .barrier-btn .btn-label {
	display: inline-block;
	min-width: 9ch;
	text-align: center;
}

#videoElements .tile-actions[b-2swmspgzzf]  .barrier-mode-btn {
	padding-inline: 1rem 0.5rem;
}
#videoElements .tile-actions[b-2swmspgzzf]  .barrier-mode-btn .k-button-arrow {
	margin-inline-end: 0;
}

#videoElements .tile-preview[b-2swmspgzzf] {
	position: relative;
	flex: 0 0 auto;
	width: 11.25rem;
	height: 6.3rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0.35rem;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
#videoElements .tile-preview:hover[b-2swmspgzzf] {
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

#videoElements .tile-preview[b-2swmspgzzf]  .camera-id {
	position: absolute;
	inset: 0;
}
#videoElements .tile-preview[b-2swmspgzzf]  canvas.video-element {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The LED board strip sits in the same column as the camera previews and takes its width, but
   keeps the board's own proportions instead of a fixed height: boards run from 3:1 to much wider,
   and letterboxing a 96x32 matrix into a camera-shaped box wastes the little height it has. */
/* Both layouts, one rule: #videoElements only exists in the wall branch, so a rule scoped to it
   alone leaves the phone's board unstyled — the same trap this file already notes for the
   overlays further down. The wall keeps its board over the picture, where it costs about a percent
   of a 958x452 tile; the phone gives it a band of its own (.mobile-board-band above), because the
   same box was a tenth of a 312x176 picture. */
#videoElements .tile-board-bar[b-2swmspgzzf] {
	position: absolute;
	top: 3.1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4vh;
	max-width: 60%;
	z-index: 3;
	pointer-events: none;
}

#videoElements .tile-board[b-2swmspgzzf],
.mobile-board-band .tile-board[b-2swmspgzzf] {
	flex: 0 0 auto;
	width: 7.5rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0.3rem;
	overflow: hidden;
	/* No ground of its own: the frame already paints the board's dark body, and a second layer
	   under it would only cancel out the transparency the frame is carrying. */
	background: transparent;
	line-height: 0;
}
#videoElements .tile-board-img[b-2swmspgzzf],
.mobile-board-band .tile-board-img[b-2swmspgzzf] {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: auto;
	opacity: 0.82;
}

.mobile-board-band .tile-board[b-2swmspgzzf] {
	width: 10rem;
	background: #000;
	border-color: rgba(255, 255, 255, 0.28);
}
.mobile-board-band .tile-board-img[b-2swmspgzzf] {
	opacity: 1;
}

#videoElements .tile-preview-hide[b-2swmspgzzf] {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 0.2rem;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s, background-color 0.15s;
}

#videoElements .tile-preview:hover .tile-preview-hide[b-2swmspgzzf] {
	opacity: 1;
	pointer-events: auto;
}
#videoElements .tile-preview-hide:hover[b-2swmspgzzf] {
	background: rgba(0, 0, 0, 0.9);
}

#videoElements .tile-preview-hide:focus-visible[b-2swmspgzzf] {
	opacity: 1;
	outline: 2px solid var(--kendo-color-primary);
	outline-offset: 1px;
}

#videoElements .tile-preview-hide[b-2swmspgzzf]  .k-svg-icon {
	width: 0.8rem;
	height: 0.8rem;
}

#videoElements .tile-preview-label[b-2swmspgzzf] {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0.1em 0.35em;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-family: inherit;
	font-size: 0.72rem;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	pointer-events: auto;
}
#videoElements .tile-preview-label:hover[b-2swmspgzzf] {
	background: rgba(0, 0, 0, 0.75);
}
#videoElements .tile-preview-label:focus-visible[b-2swmspgzzf] {
	outline: 2px solid var(--kendo-color-primary);
	outline-offset: -2px;
}

.mobile-gate-status[b-2swmspgzzf] {
	order: 1;
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.5vh 4vw;
	font-size: 0.75rem;
	line-height: 1.35;
	background-color: var(--kendo-color-surface);
	color: color-mix(in srgb, var(--kendo-color-on-app-surface) 80%, transparent);
	border-top: 1px solid var(--kendo-color-border-alt);
}
.mobile-status-hint[b-2swmspgzzf] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.85;
}
.mobile-gate-status.is-override[b-2swmspgzzf] {
	background: color-mix(in srgb, var(--kendo-color-warning) 22%, var(--kendo-color-surface));
	color: var(--kendo-color-on-app-surface);
	border-top: 2px solid var(--kendo-color-warning);
}
.mobile-gate-status.is-override.mode-denyall[b-2swmspgzzf] {
	background: color-mix(in srgb, var(--kendo-color-error) 20%, var(--kendo-color-surface));
	border-top-color: var(--kendo-color-error);
}

.mobile-mode-list[b-2swmspgzzf] {
	display: flex;
	flex-direction: column;
	gap: 0.5vh;
	max-height: 45vh;
	overflow-y: auto;
}
.mobile-mode-item[b-2swmspgzzf] {
	display: grid;
	grid-template-columns: 1.6em 1fr;
	grid-template-areas: "icon name" "icon hint";
	align-items: center;
	gap: 0 0.6em;
	width: 100%;
	min-height: 52px;
	padding: 0.6vh 3vw;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	background: var(--kendo-color-base);
	color: var(--kendo-color-on-app-surface);
	text-align: left;
	cursor: pointer;
}
.mobile-mode-item[b-2swmspgzzf]  .k-svg-icon {
	grid-area: icon;
}
.mobile-mode-name[b-2swmspgzzf] {
	grid-area: name;
	font-weight: 600;
	font-size: 0.9rem;
}
.mobile-mode-hint[b-2swmspgzzf] {
	grid-area: hint;
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.75;
}
.mobile-mode-item.is-active[b-2swmspgzzf] {
	background: color-mix(in srgb, var(--kendo-color-primary) 12%, var(--kendo-color-base));
}
.mobile-mode-item.is-armed[b-2swmspgzzf] {
	border-color: var(--kendo-color-primary);
	background: color-mix(in srgb, var(--kendo-color-primary) 20%, var(--kendo-color-base));
}
.mobile-mode-confirm[b-2swmspgzzf] {
	margin-top: 1.5vh;
	padding-top: 1.2vh;
	border-top: 1px solid var(--kendo-color-border-alt);
}
.mobile-mode-confirm-text[b-2swmspgzzf] {
	display: block;
	font-size: 0.8rem;
	line-height: 1.35;
	margin-bottom: 1.2vh;
}
.mobile-mode-confirm-actions[b-2swmspgzzf] {
	display: flex;
	justify-content: flex-end;
	gap: 3vw;
}
.mobile-mode-confirm-actions[b-2swmspgzzf]  .k-button {
	min-height: 44px;
	padding-inline: 1.2rem;
}

.mobile-lot-name[b-2swmspgzzf] {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	opacity: 0.7;
}

.mobile-video-container[b-2swmspgzzf] {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* /Pages/Lot/Video/VideoLayoutButton.razor.rz.scp.css */
.layout-grid[b-8lq9fpgivn] {
    display: grid;
    cursor: pointer;
    max-width: MIN(20vw,20vh);
    gap: MIN(0.2vw, 0.2vh);
    background-color: var(--layout-color-background);
}

.layout-option:hover[b-8lq9fpgivn] {
    border-color: var(--layout-color-primary);
}

.layout-option[b-8lq9fpgivn] {
    border: MIN(0.2vw, 0.2vh) solid var(--kendo-color-border-alt);
    display: none;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16 / 9;
    background: var(--kendo-color-base-hover);
    width: MIN(5vw, 5vh);
    height: MIN(6vw, 4vh);
}
.layout-grid.is-selecting .layout-option.selected[b-8lq9fpgivn],
.layout-grid.is-selecting .layout-option[b-8lq9fpgivn] {
    display: flex;
}
.layout-grid.is-selecting[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    position:absolute;
    z-index:1;
    top:0;
    right:0;
}
.layout-grid.always-open .layout-option[b-8lq9fpgivn] {
    display: flex;
}
.layout-grid.always-open[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
}

.layout-option.selected[b-8lq9fpgivn] {
    display: flex;
    border-color: var(--layout-color-primary);
    background-color: var(--menu-selection-color);
}
.layout-option.selected .layout-preview[b-8lq9fpgivn]
{
    background: transparent;
}

.layout-preview[b-8lq9fpgivn] {
    width: 80%;
    height: 80%;
    display: grid;
    gap: MIN(0.2vw, 0.2vh);
    background: var(--layout-color-background);
}

    .layout-preview div[b-8lq9fpgivn] {
        background: var(--kendo-color-primary);
    }

.layout-2-vertical .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

    .layout-2-vertical .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 2 / 2;
    }

    .layout-2-vertical .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 2 / 2 / 3;
    }

.layout-2 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.layout-2x3 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.layout-3 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-4 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

    .layout-4 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 5 / 4;
    }

    .layout-4 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 4 / 2 / 5;
    }

    .layout-4 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 2 / 4 / 3 / 5;
    }

    .layout-4 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 4 / 4 / 5;
    }

    .layout-4 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 4 / 4 / 5 / 5;
    }

.layout-5 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

    .layout-5 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 3 / 3;
    }

    .layout-5 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 3 / 2 / 4;
    }

    .layout-5 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 2 / 3 / 3 / 4;
    }

    .layout-5 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 3 / 4 / 4;
    }

    .layout-5 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 3 / 2 / 4 / 3;
    }

    .layout-5 .layout-preview div:nth-child(6)[b-8lq9fpgivn] {
        grid-area: 3 / 1 / 4 / 2;
    }

.layout-7 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

    .layout-7 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
        grid-area: 1 / 1 / 3 / 3;
    }

    .layout-7 .layout-preview div:nth-child(2)[b-8lq9fpgivn] {
        grid-area: 1 / 3 / 3 / 5;
    }

    .layout-7 .layout-preview div:nth-child(3)[b-8lq9fpgivn] {
        grid-area: 3 / 1 / 5 / 3;
    }

    .layout-7 .layout-preview div:nth-child(4)[b-8lq9fpgivn] {
        grid-area: 3 / 3 / 5 / 5;
    }

    .layout-7 .layout-preview div:nth-child(5)[b-8lq9fpgivn] {
        grid-area: 1 / 5 / 2 / 6;
    }

    .layout-7 .layout-preview div:nth-child(6)[b-8lq9fpgivn] {
        grid-area: 2 / 5 / 3 / 6;
    }

    .layout-7 .layout-preview div:nth-child(7)[b-8lq9fpgivn] {
        grid-area: 3 / 5 / 4 / 6;
    }

    .layout-7 .layout-preview div:nth-child(8)[b-8lq9fpgivn] {
        grid-area: 4 / 5 / 5 / 6;
    }

.layout-1 .layout-preview[b-8lq9fpgivn] {
    grid-template-areas: 'a';
}

.layout-9 .layout-preview[b-8lq9fpgivn] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.layout-9 .layout-preview div:nth-child(1)[b-8lq9fpgivn] {
    grid-area: 1 / 1 / 3 / 3;
    border: MIN(0.5vw,0.5vh) dashed var(--layout-color-primary);
    background-color: var(--layout-color-background)
}
/* /Pages/PGS/CameraConfig.razor.rz.scp.css */
[b-l0q8768dsd] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[b-l0q8768dsd] .module-title {
    color: var(--kendo-color-primary);
}
/* /Pages/PGS/CreateNewMap.razor.rz.scp.css */
[b-k9t5xjhy1g] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* /Pages/PGS/DiagnosticsPanel.razor.rz.scp.css */
.pgs-diagnostics[b-oyv82usxoe] {
    padding: min(1vw, 1vh) min(2vw, 2vh) min(2vw, 2vh) min(2vw, 2vh);
    overflow: auto;
    box-sizing: border-box;
}

.pgs-diagnostics-header-actions[b-oyv82usxoe] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pgs-diagnostics-asof[b-oyv82usxoe] {
    font-size: 12px;
    color: #666;
    margin-bottom: 0.8vh;
}

.pgs-diagnostics-section[b-oyv82usxoe] {
    margin-bottom: 1.2vh;
}

.pgs-diagnostics-bad[b-oyv82usxoe] {
    color: #e80707;
    font-weight: bold;
}

.pgs-diagnostics-warning-pill[b-oyv82usxoe] {
    display: inline-block;
    background: #fbe3b3;
    color: #7a5b00;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 1px 2px;
    font-size: 11px;
    white-space: nowrap;
}

.pgs-diagnostics-warnings[b-oyv82usxoe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pgs-diagnostics-warning-block[b-oyv82usxoe] {
    background: #fdf1f1;
    border-left: 3px solid #e80707;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
}

.pgs-diagnostics-warning-block strong[b-oyv82usxoe] {
    display: block;
    margin-bottom: 2px;
}

.pgs-diagnostics-ids[b-oyv82usxoe] {
    font-family: Consolas, monospace;
    color: #333;
    word-break: break-word;
}

.pgs-diagnostics-ok[b-oyv82usxoe] {
    color: #2e7d32;
    font-size: 13px;
}
/* /Pages/PGS/PgsList.razor.rz.scp.css */
[b-3ucx4owd4q] .surface {
    background-color: var(--kendo-color-on-primary);
    padding: MIN(1vw, 1vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top: 2vh;
    border-left-width: 0.2vh;
    border-right-width: 0.2vh;
    border-bottom-width: 0.2vh;
    border-color: var(--kendo-color-primary);
    border-style: solid;
    height: 98vh;
    overflow: hidden;
    box-sizing: border-box;
    /* Column flex so the title + zone-plan picker stay fixed and the grid below grows to
       fill the rest of the surface (down to the bottom, like the other list pages). */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-3ucx4owd4q] .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}
 .side-surface[b-3ucx4owd4q] {
    background-color: var(--kendo-color-on-primary);
    padding: MIN(1vw, 1vh) MIN(2vw, 2vh) MIN(2vw, 2vh) MIN(2vw, 2vh);
    border-radius: MIN(0.5vh, 0.5vw);
    outline: red;
    border-top: 2vh;
    border-left-width: 0.2vh;
    border-right-width: 0.2vh;
    border-bottom-width: 0.2vh;
    border-color: var(--kendo-color-primary);
    border-style: solid;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
 .wrapper-pgs[b-3ucx4owd4q] {
    margin: MIN(0.7vh, 0.4vw) MIN(1.4vh, 0.8vw) MIN(0.7vh, 0.4vw) 0;
    position: relative;
    min-height: 98.6vh;
    display: flex;
    gap: 1vh;
}
.main-part[b-3ucx4owd4q]{
    width: 90%;
}
.side-part[b-3ucx4owd4q] {
    width: 10%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}
.title[b-3ucx4owd4q]{
    font-weight: bold;
}
.pgs-subtitle[b-3ucx4owd4q] {
    margin: 0.2rem 0 0.6rem 0;
    font-weight: normal;
    font-size: 0.85rem;
    color: var(--kendo-color-subtle);
}
[b-3ucx4owd4q] .box {
    display: flex;
    justify-content: space-between;
    width: 6rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid #e3e3e3;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: white;
    font-weight:bold;

}
    [b-3ucx4owd4q] .box:hover {
     
        background-color: #c5bebe;
    }

[b-3ucx4owd4q] .color-box {
    width: 1em;
    height: 1em;
    background-color: green;
    border-radius: 0.5rem;
}
[b-3ucx4owd4q] .slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.5rem; 
    justify-content: center;
    align-items: center;
    padding: 1rem;
    overflow-y: auto; 
    height:100%;
    scrollbar-width: none;
}
/* /Pages/PGS/PgsPlan.razor.rz.scp.css */
[b-4c71jtp1z7] #tool_image {
    display: none;
}

[b-4c71jtp1z7] #tool_path {
    display: none;
}

[b-4c71jtp1z7] #tool_line {
    display: none;
}

[b-4c71jtp1z7] #tool_source {
    display: none;
}

[b-4c71jtp1z7] #MenuButton {
    display: none;
}

[b-4c71jtp1z7] #title_panel {
    display: none;
}

[b-4c71jtp1z7] #stroke_width {
    display: none;
}

[b-4c71jtp1z7] #stroke_style {
    display: none;
}

[b-4c71jtp1z7] #stroke_linejoin {
    display: none;
}

[b-4c71jtp1z7] #stroke_linecap {
    display: none;
}

[b-4c71jtp1z7] #blur {
    display: none;
}

[b-4c71jtp1z7] #opacity {
    display: none;
}

[b-4c71jtp1z7] #tool_wireframe {
    display: none;
}

[b-4c71jtp1z7] #sidepanels {
    display: none;
}

[b-4c71jtp1z7] #canvasBackground {
    display: none;
}

[b-4c71jtp1z7] .rect_panel {
    display: none;
}

[b-4c71jtp1z7] #selected_x {
    display: none;
}

[b-4c71jtp1z7] #selected_y {
    display: none;
}

[b-4c71jtp1z7] #rect_width {
    display: none;
}

[b-4c71jtp1z7] #tool_topath {
    display: none;
}

[b-4c71jtp1z7] #tool_make_link {
    display: none;
}

[b-4c71jtp1z7] #tool_reorient {
    display: none;
}

[b-4c71jtp1z7] #rect_height {
    display: none;
}

[b-4c71jtp1z7] #rect_rx {
    display: none;
}

[b-4c71jtp1z7] #tool_position {
    display: none;
}

[b-4c71jtp1z7] #palette {
    display: none;
}

[b-4c71jtp1z7] #tool_clone {
    display: none;
}

[b-4c71jtp1z7] #angle {
    display: none;
}

[b-4c71jtp1z7] #circle_cx {
    display: none;
}

[b-4c71jtp1z7] #circle_cy {
    display: none;
}

[b-4c71jtp1z7] #circle_r {
    display: none;
}

[b-4c71jtp1z7] #tool_text {
    display: none;
}

[b-4c71jtp1z7] #stroke_color {
    display: none;
}

[b-4c71jtp1z7] #fill_color {
    display: none;
}

[b-4c71jtp1z7] #se-tool_fhpath {
    display: none;
}

[b-4c71jtp1z7] #tools_rect {
    display: none;
}

[b-4c71jtp1z7] #tool_fhpath {
    display: none;
}

[b-4c71jtp1z7] #tools_ellipse {
    display: none;
}

[b-4c71jtp1z7] #tool_unlink_use {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_n {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_s {
    display: none;
}

[b-4c71jtp1z7] #se-cmenu_canvas {
    display: none;
}

[b-4c71jtp1z7] #main_button {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_w {
    display: none;
}

[b-4c71jtp1z7] #selectorGrip_resize_e {
    display: none;
}

/* The rotate grip is intentionally NOT hidden here: plan objects are meant to be rotatable
   (their angle is saved). It is hidden only while Edit-background is active (the background
   itself must not rotate) via body.pgs-bg-edit in svgedit-softra.css. */
/* hides the ungroup-elements button */
[b-4c71jtp1z7] .g_panel {
    display:none;
}

[b-4c71jtp1z7] .svg_editor {
    --main-bg-color: var(--kendo-color-primary) !important;
    --text-color: #000000;
    --border-color: #808080;
    --canvas-bg-color: white !important;
    --link-color: #19c;
    --ruler-color: #B2B2B2;
    --icon-bg-color: var(--kendo-color-primary-active, #2d448c);
    --icon-bg-color-hover: var(--kendo-color-primary-hover, #33457A);
    --input-color: white !important;
    --orange-color: black;
    --global-se-spin-input-width: 82px;
    display: grid;
    grid-template-rows: auto 15px 1fr 40px;
    grid-template-columns: 40px 15px 50px 1fr 15px;
    grid-template-areas:
        "main top top top top"
        "left corner rulerX rulerX side"
        "left rulerY workarea workarea side"
        "left bottom bottom bottom bottom";
    font-size: 8pt;
    background: var(--main-bg-color);
    font-family: Verdana, Helvetica, Arial;
    color: var(--text-color);
    user-select: text;
    width: 100%;
    height: 100%;
}

[b-4c71jtp1z7] #workarea {
    background-color: var(--canvas-bg-color);
}

/* View mode (the default, class-free state — `.pgs-editing` is added by setViewActive only in
   the edit modes): hide the X/Y rulers, which are only useful while placing objects. Collapse
   their 15px grid tracks too so no empty strip of the primary-coloured editor background shows
   where the ruler was. The base `.svg_editor` grid (with rulers) applies again once .pgs-editing
   is present. */
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) {
    grid-template-rows: auto 0 1fr 40px;
    grid-template-columns: 40px 0 50px 1fr 15px;
}

[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_x,
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_y,
[b-4c71jtp1z7] .svg_editor:not(.pgs-editing) #ruler_corner {
    display: none;
}

.main-logs-display[b-4c71jtp1z7] {
    display: flex;
    flex-direction: column;
    gap: 0.7vh;
    height: auto;
}

.logs-layout[b-4c71jtp1z7] {
    display: flex;
    gap: 0.7vh;
    height: auto;
}

/* Selected mode button (View / Edit layout / Edit background). The toolbar itself is
   --kendo-color-primary and the unpressed buttons are --kendo-color-primary-active, so the
   selected one is drawn as a light "lifted" chip from the theme base surface (with on-surface
   text) — clearly distinct from both, and theme-driven instead of an improvised black. */
[b-4c71jtp1z7] .pressed {
    background-color: var(--kendo-color-base, #f5f5f5) !important;
    color: var(--kendo-color-on-app-surface, #3d3d3d) !important;
}

[b-4c71jtp1z7] .tool_sep {
    display: none;
}
[b-4c71jtp1z7] #history_panel {
    display: none;
}
[b-4c71jtp1z7] #ruler_corner {
    background: white;
}

[b-4c71jtp1z7] #ruler_x {
    background: white;
}

[b-4c71jtp1z7] #ruler_y {
    background: white;
}

.availBoard[b-4c71jtp1z7] {
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

[b-4c71jtp1z7] .tool-button {
    height: auto;
    width: auto;
    margin: 4px 1px 4px;
    padding: 3px;
    background-color: var(--icon-bg-color);
    cursor: pointer;
    border-radius: 3px;
    color: white;
    border: none;
}

[b-4c71jtp1z7] #elem_id {
    pointer-events: none;
}

[b-4c71jtp1z7] #elem_class {
    pointer-events: none;
}

.k-tabstrip-content[b-4c71jtp1z7] {
    display: none;
}

[b-4c71jtp1z7] .k-tabstrip-content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box;
}



/* The rules below are main css, created for the parking logo. */

[b-4c71jtp1z7] .password-field {
    display: flex;
}
[b-4c71jtp1z7] .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button-wrapper[b-4c71jtp1z7] {
    position: relative;
    display: inline-block;
    text-align: center;
}

.button-label[b-4c71jtp1z7] {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #555;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: bold;
    white-space: nowrap;
}

[b-4c71jtp1z7] .sensor ::before {
    content: attr('data-id');
    display: inline-block;
    font-size: 32px;
    width: 85px;
    height: 80px;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: #95A73B;
    vertical-align: middle;
    margin-right: 1em;
    color: white;
    margin-top: 20px;
}

#container.disabled[b-4c71jtp1z7] {
    pointer-events: none;
    opacity: 0.5;
}

[b-4c71jtp1z7] .k-tabstrip-items-wrapper .k-item.k-active {
    background-color: var(--layout-color-primary);
    color: var(--kendo-color-on-primary);
}

[b-4c71jtp1z7] .marginnew {
    margin: 6px;
}

/* Toolbar above the plan editor (background upload, write permission only). */
.pgs-plan-toolbar[b-4c71jtp1z7] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: min(1vw, 1vh);
    padding: 0.4vh 0.8vw;
    margin-bottom: 0.3vh;
    background-color: var(--kendo-color-primary);
    color: var(--kendo-color-on-primary);
    border-radius: min(0.5vh, 0.5vw);
    font-size: 12px;
}

.pgs-plan-toolbar-label[b-4c71jtp1z7] {
    font-weight: bold;
    white-space: nowrap;
}

.pgs-plan-toolbar[b-4c71jtp1z7]  input[type="file"] {
    color: var(--kendo-color-on-primary);
}

/* Full-height layout: the editor and the side panel must stretch to the bottom of the
   viewport (like the parking-log page) instead of collapsing to content height. This needs
   a definite height at the top — the Telerik splitter measures pane sizes against it — and a
   height:100% / flex chain all the way down to the SVG editor's runtime #container mount. */
.logs-layout.wrapper[b-4c71jtp1z7] {
    height: 98vh;
    min-height: 0;
    overflow: hidden;
}

[b-4c71jtp1z7] .k-splitter {
    height: 100%;
}

/* Both the editor pane's surface and the side-panel dialog's surface fill their pane. */
[b-4c71jtp1z7] .surface {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

[b-4c71jtp1z7] .k-tabstrip {
    flex: 1 1 auto;
    min-height: 0;
}

[b-4c71jtp1z7] .k-tabstrip-content {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* #container is the svg-editor mount created at runtime by SoftraEditorInit.js. */
[b-4c71jtp1z7] #container {
    height: 100%;
}

.pgs-load-failed[b-4c71jtp1z7] {
    padding: 2rem;
    text-align: center;
    color: var(--kendo-color-subtle, #666);
}
/* /Pages/PGS/PgsVideoModal.razor.rz.scp.css */
/* PGS video preview modal: a toolbar above a fixed-aspect stage that stacks the
   live-frame video canvas and the slot-overlay canvas at identical size. */

.pgs-video-modal[b-rbgr87y21r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* The host window sizes us now, so fill it completely. A small min-width keeps
       the toolbar from collapsing, but is low enough that the 16:9 stage still gets
       a usable height in the (larger) host window. */
    width: 100%;
    height: 100%;
    min-width: 320px;
}

.pgs-video-toolbar[b-rbgr87y21r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pgs-video-toolbar-left[b-rbgr87y21r],
.pgs-video-toolbar-right[b-rbgr87y21r] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Camera title sits in the toolbar centre and truncates rather than pushing the
   button groups apart on a narrow window. */
.pgs-video-title[b-rbgr87y21r] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pgs-video-caption[b-rbgr87y21r] {
    margin-left: 6px;
    font-weight: normal;
    font-size: 0.85em;
    opacity: 0.7;
}

.pgs-video-error[b-rbgr87y21r] {
    color: var(--kendo-color-error, #d9534f);
    font-size: 0.9rem;
}

/* The stage keeps a 16:9 box so the overlay quads (normalized to the frame) line
   up with the painted JPEG regardless of the actual stream resolution. It grows to
   take all the vertical space the toolbar leaves; aspect-ratio + the 100% max box
   makes it fill the larger window dimension while staying inside it (no overflow). */
.pgs-video-stage[b-rbgr87y21r] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background: #000;
    overflow: hidden;
}

/* Container for the stacked video + slot-overlay canvases; it fills the stage so both
   share one box and the overlay quads line up with the painted frame. */
.pgs-video-camera[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
}

.pgs-video-camera .video-element[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Overlay canvas: same box, on top, transparent. Pointer events stay on so the
   edit-mode drag handlers receive input; in view mode the JS simply ignores them. */
.pgs-video-camera .slot-overlay[b-rbgr87y21r] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}
/* /Pages/PGS/SensorConfig.razor.rz.scp.css */
/* Colour control row: the Telerik ColorPicker sits next to the "Set colour"
   button, mirroring the inline layout of the other form actions. */
.pgs-colour-row[b-3ukdepf4fk] {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* /Pages/PGS/SensorHistoryPanel.razor.rz.scp.css */
/* The panel chrome (border, background, padding, scroll, height) comes from the shared
   .surface class — matching the config/diagnostics side panels. Only the occupation-history
   list itself needs component styles. */

.sensor-history-empty[b-5k7ezgqj4a] {
    color: #666;
    font-size: 12px;
    margin-top: 0.8vh;
}

.sensor-history-list[b-5k7ezgqj4a] {
    display: flex;
    flex-direction: column;
    margin-top: 0.8vh;
}

.sensor-history-row[b-5k7ezgqj4a] {
    display: grid;
    grid-template-columns: 9.5rem 6rem 1fr 4.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 2px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.sensor-history-when[b-5k7ezgqj4a] {
    font-variant-numeric: tabular-nums;
    color: #555;
}

.sensor-history-status[b-5k7ezgqj4a] {
    font-weight: 600;
}

.sensor-history-plate[b-5k7ezgqj4a] {
    font-family: Consolas, monospace;
    color: #333;
}

/* Fixed-size viewport; the img inside is scaled + shifted (ThumbImgStyle) to show just the slot's
   crop box. overflow:hidden clips the rest of the frame. Rendered only when there is a photo. */
.sensor-history-thumb[b-5k7ezgqj4a] {
    position: relative;
    width: 4.5rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.sensor-history-thumb img[b-5k7ezgqj4a] {
    position: absolute;
    display: block;
    cursor: zoom-in;
}

.sensor-history-more[b-5k7ezgqj4a] {
    display: flex;
    justify-content: center;
    padding-top: 1vh;
}

/* In-app full-frame lightbox (no new tab / redirect). */
.sensor-history-preview[b-5k7ezgqj4a] {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    outline: none; /* focused on open (for Esc-to-close) — suppress the focus ring */
}

.sensor-history-preview img[b-5k7ezgqj4a] {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6);
}
/* /Pages/Pos/EventsLog/PosEventsLog.razor.rz.scp.css */
.dates-field-col[b-h6ez8w5qld] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}

/* brui coloured the action label: red when the door opens / the bag is removed, green for the
   opposite. Kept as classes on tokens rather than the original inline <font> colours. */
.action-on[b-h6ez8w5qld] {
    color: var(--kendo-color-error, #FF6347);
    font-weight: 600;
}

.action-off[b-h6ez8w5qld] {
    color: var(--kendo-color-success, #3CB371);
    font-weight: 600;
}

.action-raw[b-h6ez8w5qld] {
    color: var(--kendo-color-subtle, #6b7280);
}
/* /Pages/Pos/ManualPos/ManualPos.razor.rz.scp.css */
.disabled-banner[b-scnejo2qdn] {
    margin: 1rem 0;
    padding: 1rem;
}

.search-row[b-scnejo2qdn] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.field-plate[b-scnejo2qdn] {
    flex: 1;
    max-width: 280px;
}

.field-voucher-no[b-scnejo2qdn] {
    flex: 1;
    max-width: 220px;
}

.field-voucher-value[b-scnejo2qdn] {
    flex: 1;
    max-width: 160px;
}

.field-action[b-scnejo2qdn] {
    flex: 0 0 auto;
}

.label-spacer[b-scnejo2qdn] {
    display: block;
}

.section-heading[b-scnejo2qdn] {
    margin-top: 1rem;
}

.receipt-form[b-scnejo2qdn] {
    max-width: 640px;
}

.receipt-success[b-scnejo2qdn] {
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    margin: 0.5rem 0 1rem;
}

.receipt-field[b-scnejo2qdn] {
    display: flex;
    gap: 1rem;
}

.receipt-label[b-scnejo2qdn] {
    width: 250px;
    font-weight: 600;
}

.amount-paid[b-scnejo2qdn] {
    color: var(--kendo-color-success, #336600);
    font-weight: 700;
}

.receipt-actions[b-scnejo2qdn] {
    margin-top: 1.5rem;
}
/* /Pages/Pos/Monitoring/PosMonitoring.razor.rz.scp.css */
.cell-wrap[b-a7q8x3rtzi] {
    white-space: normal;
}

/* Footer wrapping the "Show more events" button under the side-panel event list. */
.pos-monitoring-side-panel__footer[b-a7q8x3rtzi] {
    padding: 10px 14px;
    border-top: 1px solid var(--kendo-color-border, #f3f4f6);
    text-align: center;
}

/* ===================================================================================
   Rules below were MOVED OUT OF the global wwwroot/main.css into this component's
   scoped (CSS-isolation) stylesheet — they are page-specific to PosMonitoring.razor
   and were the only consumers of these class names. Declarations are unchanged apart
   from hardcoded colours, which are now themed via var(--kendo-color-*, <original>)
   so the original value survives as the fallback.

   No ::deep is needed anywhere in this block: every element these selectors target
   (.pos-cards / .pos-card* / .pos-pill / table / th / td / the side-panel <aside>,
   <header>, <div>s) is written literally in PosMonitoring.razor, so Blazor stamps the
   scope attribute on it. The tab content is a Telerik RenderFragment, but the markup
   inside <TabStripTab><Content> is still compiled as part of THIS component, so it is
   scoped too.
   =================================================================================== */

/* POS monitoring page — connection state pill + dialog error banner. Moved out of
   inline styles so the project's theme can override colors when needed. */
.pos-pill[b-a7q8x3rtzi] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    background: var(--kendo-color-base-emphasis);
}
.pos-pill--ok[b-a7q8x3rtzi] { background: var(--kendo-color-success); }
.pos-pill--err[b-a7q8x3rtzi] { background: var(--kendo-color-error); }
.pos-pill--disconnected[b-a7q8x3rtzi] { background: var(--kendo-color-base-emphasis); }

.pos-monitoring-error-banner[b-a7q8x3rtzi] {
    padding: 8px 12px;
    background: var(--kendo-color-error-subtle);
    border: 1px solid var(--kendo-color-error-emphasis);
    color: var(--kendo-color-error-on-subtle);
    border-radius: 4px;
}

/* ---- POS monitoring: one card per pay station, repositories/devices shown inline
   (brui MonitoringCashStatusTab: a grid per POS in a 2-column layout, no row-expand). ---- */
.pos-cards[b-a7q8x3rtzi] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px;
    align-items: flex-start;
}
.pos-card[b-a7q8x3rtzi] {
    flex: 1 1 460px;
    min-width: 360px;
    max-width: 680px;
    border: 1px solid var(--kendo-color-border);
    border-radius: 6px;
    overflow: hidden;
}
.pos-card__head[b-a7q8x3rtzi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--kendo-color-base);
    border-bottom: 1px solid var(--kendo-color-border);
    cursor: pointer;
}
.pos-card__title[b-a7q8x3rtzi] {
    flex: 1 1 auto;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-card__meta[b-a7q8x3rtzi] { flex: 0 0 auto; color: var(--kendo-color-subtle); font-size: .9em; }
.pos-card__total[b-a7q8x3rtzi] { flex: 0 0 auto; font-weight: 700; }
.pos-card__body[b-a7q8x3rtzi] { overflow-x: auto; }
.pos-card__empty[b-a7q8x3rtzi] { padding: 12px; color: var(--kendo-color-subtle); }
.pos-table[b-a7q8x3rtzi] { width: 100%; border-collapse: collapse; font-size: .88em; }
.pos-table th[b-a7q8x3rtzi] {
    text-align: left;
    padding: 5px 10px;
    font-weight: 600;
    color: var(--kendo-color-subtle);
    background: var(--kendo-color-surface);
    border-bottom: 1px solid var(--kendo-color-border);
    white-space: nowrap;
}
.pos-table td[b-a7q8x3rtzi] { padding: 5px 10px; border-bottom: 1px solid var(--kendo-color-border); white-space: nowrap; }

/* Empty-state inside an expanded POS row's detail template — shown when a terminal
   reports no repositories / no devices on the initial component list. Keeps the
   expanded row visually consistent with the populated case (same padding / colour
   as the grid's empty cell). */
.pos-monitoring-empty-detail[b-a7q8x3rtzi] {
    padding: 12px 16px;
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 13px;
    font-style: italic;
}

.pos-monitoring-failed-dispense[b-a7q8x3rtzi] {
    color: var(--kendo-color-error, #c0392b);
}

/* PosMonitoring side panel — slide-in from the right that surfaces the recent
   pos_events_log rows for the POS the operator just clicked. Quick-glance UX, not a
   replacement for /pos/events-log; positioned absolute over the grid so the page
   layout stays intact. */
.pos-monitoring-side-panel[b-a7q8x3rtzi] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: var(--kendo-color-surface, #ffffff);
    border-left: 1px solid var(--kendo-color-border, #e5e7eb);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.08);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.2s ease-out;
}

.pos-monitoring-side-panel--open[b-a7q8x3rtzi] {
    transform: translateX(0);
}

.pos-monitoring-side-panel__header[b-a7q8x3rtzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kendo-color-border, #e5e7eb);
    background: var(--kendo-color-surface-alt, #f9fafb);
}

.pos-monitoring-side-panel__title[b-a7q8x3rtzi] {
    font-weight: 600;
    font-size: 14px;
    color: var(--kendo-color-on-app-surface, #111827);
}

.pos-monitoring-side-panel__subtitle[b-a7q8x3rtzi] {
    font-size: 12px;
    color: var(--kendo-color-subtle, #6b7280);
}

.pos-monitoring-side-panel__body[b-a7q8x3rtzi] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 0;
}

.pos-monitoring-side-panel__empty[b-a7q8x3rtzi],
.pos-monitoring-side-panel__loading[b-a7q8x3rtzi] {
    padding: 24px 16px;
    text-align: center;
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 13px;
}

.pos-monitoring-side-panel__event[b-a7q8x3rtzi] {
    padding: 8px 14px;
    border-bottom: 1px solid var(--kendo-color-border, #f3f4f6);
    font-size: 13px;
}

.pos-monitoring-side-panel__event-time[b-a7q8x3rtzi] {
    color: var(--kendo-color-subtle, #6b7280);
    font-size: 11px;
    margin-bottom: 2px;
}

.pos-monitoring-side-panel__event-action[b-a7q8x3rtzi] {
    font-weight: 600;
    color: var(--kendo-color-on-app-surface, #111827);
    margin-bottom: 2px;
}

.pos-monitoring-side-panel__event-message[b-a7q8x3rtzi] {
    color: var(--kendo-color-on-app-surface, #374151);
    word-wrap: break-word;
}

.pos-monitoring-side-panel__event--error .pos-monitoring-side-panel__event-action[b-a7q8x3rtzi] {
    color: var(--kendo-color-error, #b91c1c);
}

.pos-monitoring-side-panel__event--warn .pos-monitoring-side-panel__event-action[b-a7q8x3rtzi] {
    color: var(--kendo-color-warning, #b45309);
}

.pos-monitoring-side-panel__backdrop[b-a7q8x3rtzi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 1099;
}

/* Moved out of the global main.css. Despite the historical "te-" prefix these belong to this
   page only: PosMonitoring.razor.cs sets FlashClass on a repository <tr> inside .pos-table.
   Cash-move flash: highlight a repository row for ~1.8s whenever its Count/Total changes via a
   live WS RepositoryStatus push (ApplyRepositoryStatus bumps FlashSeq, which changes the row's
   @key and recreates the <tr>, replaying this one-shot animation). Direction-coloured from the
   theme: cash in (accept) → success-subtle green, cash out (dispense/withdrawal) → error-subtle
   red, both fading to the row's normal background so nothing lingers. */
@keyframes teRepoFlashUp-b-a7q8x3rtzi {
    from { background-color: var(--kendo-color-success-subtle); }
    to   { background-color: transparent; }
}
@keyframes teRepoFlashDown-b-a7q8x3rtzi {
    from { background-color: var(--kendo-color-error-subtle); }
    to   { background-color: transparent; }
}
.te-repo-flash--up > td[b-a7q8x3rtzi]   { animation: teRepoFlashUp-b-a7q8x3rtzi 1.8s ease-out; }
.te-repo-flash--down > td[b-a7q8x3rtzi] { animation: teRepoFlashDown-b-a7q8x3rtzi 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .te-repo-flash--up > td[b-a7q8x3rtzi],
    .te-repo-flash--down > td[b-a7q8x3rtzi] { animation-duration: .01ms; }
}
/* /Pages/Pos/PosView.razor.rz.scp.css */
/* Page-specific bits only — the wrapper/surface/title chrome comes from main.css so this page
   matches every other CloudUI page. */

/* .surface is flex-grow:1 inside the flex-column .wrapper, so it already fills the page height.
   Making it a column here lets the stage claim the leftover space and centre the screen in it,
   without anyone having to subtract header/toolbar heights in pixels. */
.pos-view-surface[b-85tyjg42kv] {
    display: flex;
    flex-direction: column;
}

.pos-view-toolbar[b-85tyjg42kv] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pos-view-status[b-85tyjg42kv] {
    font-size: 13px;
    opacity: 0.75;
}

.pos-view-status.is-live[b-85tyjg42kv] {
    opacity: 1;
    font-weight: 600;
}

.pos-view-status.is-stale[b-85tyjg42kv] {
    opacity: 1;
    font-weight: 600;
    color: var(--kendo-color-warning, #d68910);
}

/* A live indicator earns its keep here: a frozen frame and a live one look identical, so
   without it an operator cannot tell a stalled stream from an idle paystation. */
.pos-view-status.is-live[b-85tyjg42kv]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--kendo-color-success, #2ecc71);
    animation: pos-view-pulse-b-85tyjg42kv 1.6s ease-in-out infinite;
}

@keyframes pos-view-pulse-b-85tyjg42kv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Takes the space the title and toolbar leave over, and centres the screen in it both ways.
   min-height:0 is what lets the canvas shrink instead of overflowing the surface. */
.pos-view-stage[b-85tyjg42kv] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* min-* matter before the first frame: the canvas backing store starts at 2x2, and this box
   shrink-wraps it, so the "waiting" overlay (inset: 0) would otherwise measure 2x2 and its loader
   collapse to nothing — invisible exactly when it is the only thing to show. */
.pos-view-screen[b-85tyjg42kv] {
    position: relative;
    display: flex;
    min-width: 320px;
    min-height: 180px;
    max-width: 100%;
    max-height: 100%;
    background: #000;
    border-radius: min(0.5vh, 0.5vw);
    border: 0.2vh solid var(--kendo-color-primary);
    overflow: hidden;
}

/* The backing store is the frame's own pixel size; this scales it down to fit while keeping the
   aspect ratio, which is what makes normalized click coordinates land correctly. */
.pos-view-canvas[b-85tyjg42kv] {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: pointer;
}

/* Frozen frame: still readable, visibly not live, and not clickable — a click would be sent to a
   paystation whose screen has almost certainly moved on. */
.pos-view-screen.is-stale .pos-view-canvas[b-85tyjg42kv] {
    filter: grayscale(0.7) brightness(0.6);
    cursor: not-allowed;
}

.pos-view-overlay[b-85tyjg42kv] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-size: 14px;
}

/* Click feedback, spawned by pos-screen.js showRipple(). */
[b-85tyjg42kv] .pos-screen-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--kendo-color-success, #2ecc71);
    border-radius: 50%;
    pointer-events: none;
    animation: pos-screen-ripple-b-85tyjg42kv 0.5s ease-out forwards;
}

@keyframes pos-screen-ripple-b-85tyjg42kv {
    from { transform: scale(0.4); opacity: 1; }
    to { transform: scale(2.6); opacity: 0; }
}
/* /Pages/Pos/Reports/PosReports.razor.rz.scp.css */
.report-toolbar[b-5jxgsag0uy] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.posTotalSum[b-5jxgsag0uy],
.total-sum[b-5jxgsag0uy] {
    margin-top: 0.5rem;
    font-weight: 600;
}

/* Every toolbar button sits together at the right edge, as on the traffic and parking logs. */
[b-5jxgsag0uy] .k-grid-toolbar {
    justify-content: flex-end;
}

/* Two pickers stacked over one clear button, as on the subscriber grids. */
[b-5jxgsag0uy] .datesField {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

[b-5jxgsag0uy] .datesField > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Nobody steps an ID or a sum one unit at a time in a filter; the arrows only eat width. */
[b-5jxgsag0uy] .k-filter-row .k-input-spinner {
    display: none;
}

/* The .pos-cashlog-window rule stays in wwwroot/main.css: TelerikWindow renders outside this
   component's subtree, so neither a plain selector nor ::deep reaches it. */

/* Telerik renders the row action buttons flush against each other. */
[b-5jxgsag0uy] .k-grid-content td .k-button + .k-button {
    margin-left: 4px;
}

/* Sits beside the sum, not under it. */
[b-5jxgsag0uy] .total-count {
    margin-left: 1.5rem;
    font-weight: 400;
}
/* /Pages/Pos/Roles/PosRoles.razor.rz.scp.css */
.perm-matrix-scroll[b-3v7hqcqve2] {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--kendo-color-border, #e0e0e0);
    padding: 8px;
}

.perm-matrix-table[b-3v7hqcqve2] {
    width: 100%;
    border-collapse: collapse;
}

.perm-matrix-head-row[b-3v7hqcqve2] {
    text-align: left;
    border-bottom: 1px solid var(--kendo-color-border, #ccc);
}

.perm-cell[b-3v7hqcqve2] {
    padding: 4px 8px;
}

.perm-cell-center[b-3v7hqcqve2] {
    padding: 4px 8px;
    text-align: center;
}

.perm-selectall-row[b-3v7hqcqve2] {
    border-bottom: 2px solid var(--kendo-color-border, #ccc);
    background: var(--kendo-color-surface-alt, #f7f7f7);
}

.perm-selectall-label[b-3v7hqcqve2] {
    padding: 4px 8px;
    font-style: italic;
}

.perm-selectall-cell[b-3v7hqcqve2] {
    padding: 2px;
    text-align: center;
}

.perm-row[b-3v7hqcqve2] {
    border-bottom: 1px solid var(--kendo-color-border, #f0f0f0);
}
/* /Pages/Pos/Users/PosUsers.razor.rz.scp.css */
.password-editor-col[b-6jyc3ow21k] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
/* /Pages/Statistics/CurrentActivityReports/ComparisonArrow.razor.rz.scp.css */
.comparison-arrow[b-1uaosb1nq2] {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.comparison-arrow svg[b-1uaosb1nq2] {
    width: 18px;
    height: 18px;
}

.comparison-arrow-good[b-1uaosb1nq2] {
    color: #2e7d32;
}

.comparison-arrow-bad[b-1uaosb1nq2] {
    color: #c62828;
}

.comparison-arrow-neutral[b-1uaosb1nq2] {
    color: #9e9e9e;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentActivityReport.razor.rz.scp.css */
/* Root layout (.statistics-layout) lives in wwwroot/css/statistics.css so
   every Statistics dashboard shares the same outer gutters and viewport
   lock. This file only adds CurrentActivity-specific tweaks. */

.stat-cards[b-jtz0fd9ayk] {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

.stat-card[b-jtz0fd9ayk] {
    flex: 1;
    background-color: white;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-card-highlighted[b-jtz0fd9ayk] {
    border: 1.5px solid #3b5998;
}

.stat-card-header[b-jtz0fd9ayk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stat-card-label[b-jtz0fd9ayk] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-icon[b-jtz0fd9ayk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #e9ecef;
    color: #1a2b5f;
    flex-shrink: 0;
}

.stat-card-icon-active[b-jtz0fd9ayk] {
    background-color: #dce3f5;
}

.stat-card-value[b-jtz0fd9ayk] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-card-placeholder[b-jtz0fd9ayk] {
    color: #adb5bd;
}

.stat-card-footer[b-jtz0fd9ayk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.stat-card-footer[b-jtz0fd9ayk]  .comparison-arrow + .stat-card-direction,
.stat-card-footer[b-jtz0fd9ayk]  .comparison-arrow {
    margin-right: 0;
}

.stat-card-footer .stat-card-direction[b-jtz0fd9ayk] {
    margin-left: -3px;
}

.stat-card-direction[b-jtz0fd9ayk] {
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-direction-good[b-jtz0fd9ayk] {
    color: #2e7d32;
}

.stat-card-direction-bad[b-jtz0fd9ayk] {
    color: #c62828;
}

.stat-card-direction-neutral[b-jtz0fd9ayk] {
    color: #9e9e9e;
}

.stat-card-description[b-jtz0fd9ayk] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
}

.current-activity-tab[b-jtz0fd9ayk] {
    flex: 1;
    /* No shared white backdrop — each child component paints its own cards. */
    min-height: 0;
    overflow: auto;
}

.tab-loader[b-jtz0fd9ayk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.tab-placeholder[b-jtz0fd9ayk] {
    color: #6c757d;
    padding: 24px;
    text-align: center;
}

h3[b-jtz0fd9ayk] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1.4rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentDwellReport.razor.rz.scp.css */
/* Each block paints its own white card; gaps between rows let the page
   background show through. */

.dwell-report[b-vwfxuwxqnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab) is
       locked to viewport height and handles overflow internally. */
    height: 100%;
    background-color: transparent;
}

.dwell-row-1[b-vwfxuwxqnv] {
    display: flex;
    gap: 8px;
    flex: 0 0 360px;
}

.dwell-row-filter[b-vwfxuwxqnv] {
    flex: 0 0 auto;
}

/* .k-button-group base styles live in statistics.css. */

.dwell-row-2[b-vwfxuwxqnv] {
    display: flex;
    gap: 8px;
    /* Absorbs the remaining vertical space below row-1 + filter row.
       min-height: 0 lets it shrink so internal grids/charts scroll instead
       of forcing a page-level scroll. */
    flex: 1 1 360px;
    min-height: 0;
}

.dwell-cell[b-vwfxuwxqnv] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-vwfxuwxqnv] {
    flex: 0 0 calc(35% - 4px);
}

.cell-65[b-vwfxuwxqnv] {
    flex: 1 1 calc(65% - 4px);
}

.dwell-cell[b-vwfxuwxqnv]  .k-chart,
.dwell-cell[b-vwfxuwxqnv]  .k-grid {
    flex: 1;
    min-height: 0;
}

/* Group-mode search box mustn't push the grid past the card; the grid below
   it absorbs whatever height is left. */
.group-search[b-vwfxuwxqnv] {
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.dwell-cell.cell-35[b-vwfxuwxqnv]  .k-chart {
    min-height: 220px;
}

/* Fixed-width pills so toggling labels doesn't reflow the chart header. */
.period-badge[b-vwfxuwxqnv] {
    width: 180px;
    height: 26px;
    overflow: hidden;
}

/* Right-hand side panel cards (DwellAvgBy*) reuse the shared .legend-card
   visuals for consistency with the donut legend, but stack vertically
   inside the narrow column. */
.kind-cards[b-vwfxuwxqnv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
}

/* Anomaly variant of the shared legend card — soft red surface + red note.
   Targets only the kind-cards column so donut-side legend cards aren't
   accidentally affected. */
.kind-cards .legend-card-anomaly[b-vwfxuwxqnv] {
    background-color: #fdecec;
}

.legend-card-anomaly-note[b-vwfxuwxqnv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c62828;
    margin-top: 2px;
}

/* Over24Count cell (DwellGrid) — red when there are anomalies. */
.anomaly-cell[b-vwfxuwxqnv] {
    color: #c62828;
    font-weight: 600;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-vwfxuwxqnv]  .k-chart {
    flex: 1;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentOccupationReport.razor.rz.scp.css */
/* Each block paints its own white card; gaps between rows let the page
   background show through (grey). */

.occupation-report[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab)
       handles overflow if any tab outgrows the viewport. */
    height: 100%;
    background-color: transparent;
}

.occupation-row-1[b-8jfm338x1c] {
    display: flex;
    gap: 8px;
    /* Lock the height so the donut + lot bar don't reflow when the row-2
       filter switches between PlateType / Group / VehicleType (each tab has
       a slightly different intrinsic height). */
    flex: 0 0 360px;
}

.occupation-row-filter[b-8jfm338x1c] {
    flex: 0 0 auto;
}

/* Mirror OccupationReport's report-card-title + button group pill styling so
   the filter row visually matches the legacy Occupation report. */
/* .report-card-title and .k-button-group base styles live in statistics.css. */

.occupation-row-2[b-8jfm338x1c] {
    display: flex;
    gap: 8px;
    /* Absorbs the remaining vertical space below row-1 + filter row so the
       cards reach the bottom of the tab. min-height: 0 lets it shrink when
       the viewport is short so internal grids/charts scroll instead of
       pushing the page taller. */
    flex: 1 1 360px;
    min-height: 0;
}

.occupation-cell[b-8jfm338x1c] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-8jfm338x1c] {
    flex: 0 0 calc(35% - 4px);
}

.cell-65[b-8jfm338x1c] {
    flex: 1 1 calc(65% - 4px);
}

/* Row 2 reverses the balance — the group grid (right side) needs more room
   than the hour-flow line chart (left side). */
.occupation-row-2 .cell-35[b-8jfm338x1c] {
    flex: 0 0 calc(60% - 4px);
}

/* Card-title height + a bit so the right-side panel (grid or vehicle donut)
   starts at the same y as the neighbouring chart's plot area. */
.occupation-row-2 .cell-35[b-8jfm338x1c]  .k-grid {
    margin-top: 4px;
}

.occupation-row-2 .cell-65[b-8jfm338x1c] {
    flex: 1 1 calc(40% - 4px);
}

.occupation-cell[b-8jfm338x1c]  .k-chart,
.occupation-cell[b-8jfm338x1c]  .k-grid {
    flex: 1;
}

/* The lot donut needs a generous square area; legend cards sit below. */
.occupation-cell.cell-35[b-8jfm338x1c]  .k-chart {
    min-height: 220px;
}

/* The base .card / .card-title / .card-subtitle / .empty-state come from
   statistics.css — the override below adds an icon-friendly flex layout to
   .card-title that's specific to this report. */
.card-title[b-8jfm338x1c] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* OccupationReport-specific .period-badge tweaks:
   - right: 34px aligns the badge with the bar chart's plot-area right edge
     (Telerik pads ~28px for the value-axis last tick).
   - .period-badge-flush snaps to the card's right edge for cards that wrap
     a grid (no chart padding to compensate for).
   - .period-badge-line uses 16px because the line chart has a different
     right gutter than the bar chart. */
.period-badge[b-8jfm338x1c] {
    right: 34px;
    width: 180px;
    height: 26px;
    overflow: hidden;
}

.period-badge.period-badge-flush[b-8jfm338x1c] {
    right: 12px;
}

.period-badge.period-badge-line[b-8jfm338x1c] {
    right: 16px;
}

[b-8jfm338x1c] .group-search {
    margin-bottom: 8px;
    width: 100%;
}

/* Average column: trend arrow + number, kept compact so the cell width is
   driven by the title, not the arrow. */
.avg-cell[b-8jfm338x1c] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    width: 100%;
}

.avg-cell-arrow[b-8jfm338x1c]  .comparison-arrow svg {
    width: 12px;
    height: 12px;
}

/* Occupancy traffic-light — coloured pill in the group grid's "current" cell. */
.occ-badge[b-8jfm338x1c] {
    display: block;
    text-align: center;
}

.occ-cell-critical[b-8jfm338x1c] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.occ-cell-warning[b-8jfm338x1c] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.occ-cell-caution[b-8jfm338x1c] {
    background-color: rgba(255, 193, 7, 0.25);
    color: #664d03;
    border-color: rgba(255, 193, 7, 0.45);
}

.occ-cell-normal[b-8jfm338x1c] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}

.kind-cards[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    /* Telerik chart adds ~16px of internal top padding before the plot area;
       nudge the cards down by the same amount so the first card top lines up
       with the chart's top gridline (where Y=80 sits). */
    margin-top: 16px;
}

.kind-card[b-8jfm338x1c] {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    border-left: 4px solid #1a2b5f;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.kind-card-label[b-8jfm338x1c] {
    font-size: 0.8rem;
    color: #6c757d;
}

.kind-card-value[b-8jfm338x1c] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a2b5f;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-8jfm338x1c]  .k-chart {
    flex: 1;
}
/* /Pages/Statistics/CurrentActivityReports/CurrentRecognitionRatesReport.razor.rz.scp.css */
/* Each block gets its own white card; the gaps between them let the page
   background show through (grey), matching the dashboard look in the mockup. */

.recognition-report[b-wsxvh2b1m7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab; can grow past it when row min-heights demand more
       space (parent .current-activity-tab handles the scroll). */
    min-height: 100%;
    background-color: transparent;
}

.recognition-row-1[b-wsxvh2b1m7] {
    display: flex;
    gap: 8px;
    flex: 0 0 25%;
    min-height: 180px;
}

.recognition-cell[b-wsxvh2b1m7] {
    padding: 12px;
    position: relative;
}

.cell-35[b-wsxvh2b1m7] {
    flex: 0 0 calc(35% - 4px); /* account for half the 8px gap */
}

.cell-65[b-wsxvh2b1m7] {
    flex: 1 1 calc(65% - 4px);
}

/* Donut chart sits inside .cell-35; the Telerik chart reserves room for a
   legend even when one is hidden, leaving a visible gap between the title and
   the ring. Pull the chart up a notch so the donut hugs the title. */
.cell-35[b-wsxvh2b1m7]  .k-chart {
    margin-top: -8px;
}

/* .donut-wrapper / .donut-center come from statistics.css; only the centre
   value font-size is overridden here (recognition uses a slightly larger
   number than the other reports). */
.donut-center-value[b-wsxvh2b1m7] {
    font-size: 1.5rem;
}

.recognition-row-2[b-wsxvh2b1m7] {
    flex: 1 1 50%;
    padding: 12px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.recognition-row-2[b-wsxvh2b1m7]  .k-grid {
    flex: 1;
}

.recognition-row-3[b-wsxvh2b1m7] {
    flex: 0 0 25%;
    padding: 12px;
    min-height: 140px;
    position: relative;
}

/* Recognition's pill grows with content — terminal names can be long. */
.period-badge[b-wsxvh2b1m7] {
    max-width: 320px;
    height: 26px;
    overflow: hidden;
}

/* Sit the time-window badge to the left of the terminal-name badge so they
   don't overlap. Terminal badge max-width is 320px + 8px gap. */
.period-badge.period-badge-hours[b-wsxvh2b1m7] {
    right: 344px;
    width: auto;
    max-width: none;
    padding: 4px 10px;
}

[b-wsxvh2b1m7] .chart-tooltip-title {
    font-weight: 600;
    margin-bottom: 4px;
}

[b-wsxvh2b1m7] .chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    line-height: 1.4;
}

[b-wsxvh2b1m7] .chart-tooltip-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

[b-wsxvh2b1m7] .chart-tooltip-name {
    flex: 1;
}

[b-wsxvh2b1m7] .chart-tooltip-value {
    font-weight: 600;
}

/* Unrecognized % traffic-light — coloured pill (matches TlsCertificates expiry badge) */
.unrec-badge[b-wsxvh2b1m7] {
    display: block;
    text-align: center;
}

.unrec-cell-critical[b-wsxvh2b1m7] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.unrec-cell-warning[b-wsxvh2b1m7] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.unrec-cell-normal[b-wsxvh2b1m7] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}

/* Plate-type dot colours used by the donut legend cards — set as CSS vars so
   the markup can apply them via .dot-unreadable / .dot-unknown / .dot-rest. */
.dot-unreadable[b-wsxvh2b1m7] {
    --dot-color: #F0A04B;
}

.dot-unknown[b-wsxvh2b1m7] {
    --dot-color: #D46A6A;
}

.dot-rest[b-wsxvh2b1m7] {
    --dot-color: #B0B8CC;
}

.report-load-failed[b-wsxvh2b1m7] {
    padding: 2rem;
    text-align: center;
    color: var(--kendo-color-subtle, #666);
}
/* /Pages/Statistics/CurrentActivityReports/CurrentRevenueReport.razor.rz.scp.css */
/* Each block gets its own white card; the gaps between them let the page
   background show through (grey), matching the dashboard look. */

.revenue-report[b-n1och0n84t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Fills the parent tab container; the parent (.current-activity-tab)
       handles overflow if any tab outgrows the viewport. */
    height: 100%;
    background-color: transparent;
}

.revenue-row-1[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    /* Absorbs the leftover vertical space below row-2 without growing past
       the parent tab. Min-height keeps the donut readable on shorter
       viewports; legend cards inside scroll if they overflow. */
    flex: 1 1 360px;
    min-height: 0;
}

.revenue-row-2[b-n1och0n84t] {
    display: flex;
    gap: 8px;
    flex: 0 0 320px;
}

/* Legend cards inside row-1 take only the natural height of their content,
   so the row above (donut/bar chart) absorbs the leftover vertical space.
   max-height + scroll keeps overflow contained when there are many cards. */
.revenue-row-1[b-n1och0n84t]  .legend-cards {
    flex: 0 0 auto;
    overflow-y: auto;
    max-height: 50%;
    min-height: 0;
    align-content: flex-start;
}

/* Match POS cards' compact height — same vertical padding either side. */
.revenue-row-1[b-n1och0n84t]  .legend-card {
    align-items: center;
}

.revenue-cell[b-n1och0n84t] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.cell-35[b-n1och0n84t] {
    flex: 0 0 calc(35% - 4px); /* account for half the 8px gap */
}

.cell-65[b-n1och0n84t] {
    flex: 1 1 calc(65% - 4px);
}

/* Wide-donut variant: kicks in when the donut has too many legend cards to
   fit the 35%-width column without overflowing. The donut card grows to 60%
   of the row and the lots-bar shrinks to 40%. */
.cell-donut-wide[b-n1och0n84t] {
    flex: 0 0 calc(60% - 4px);
}

.cell-lots-narrow[b-n1och0n84t] {
    flex: 1 1 calc(40% - 4px);
}

.revenue-cell[b-n1och0n84t]  .k-chart {
    flex: 1;
}

/* Donut chart fills the wrapper height (shared rules in statistics.css). */
.donut-wrapper[b-n1och0n84t]  .k-chart {
    flex: 1;
}

/* Revenue's badges are fixed-width so toggling between "N aikšt." and a long
   lot/terminal title doesn't reflow the chart header — long titles ellipsise
   instead. The dynamic width is set inline via LotBadgeWidthPx; this just
   locks the height + overflow so the pill keeps its shape. */
.period-badge[b-n1och0n84t] {
    height: 26px;
    overflow: hidden;
}
/* /Pages/Statistics/CurrentActivityReports/RecognitionRates.razor.rz.scp.css */
.topCharts[b-hbd4g5zf8t] {
    display: flex;
}

[b-hbd4g5zf8t] .k-chart {
    display: flex;
    flex-grow: 1;
    border: 0.5px solid LightGray;
    padding: 0px 4px 4px 0px;
}
#sucessScore[b-hbd4g5zf8t]
{
    position:absolute;
    left:45%;
}
@media (orientation: portrait) {
    .topCharts[b-hbd4g5zf8t] {
        flex-direction: column;
    }
}

.donut-center-text[b-hbd4g5zf8t] {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a2b5f;
}

.level2[b-hbd4g5zf8t] {
    display: flex;
}
.report-load-failed[b-hbd4g5zf8t] {
    padding: 2rem;
    text-align: center;
    color: var(--kendo-color-subtle, #666);
}
/* /Pages/Statistics/OccupationReports/OccupationPeakReport.razor.rz.scp.css */

/* .filtersLevel1 and .filtersLevel2 base styles live in statistics.css. */

.sc-page-layout[b-rr3c2npa5d] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.sc-filters h4[b-rr3c2npa5d] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
    margin-top: 12px;
}

.sc-filters[b-rr3c2npa5d] {
    padding: 10px;
    background-color: white;
    min-width: 220px;
    width: max-content;
    flex-shrink: 0;
    margin-top: 0;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.charts-row[b-rr3c2npa5d] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-rr3c2npa5d] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

.charts-row > .report-card:not(:first-child)[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Trim the chart cards' vertical real estate aggressively — the goal is
   for the top of the grid to peek above the fold on a standard laptop,
   so the user immediately sees "there's a grid below" without scrolling. */
.charts-row > .report-card .k-chart[b-rr3c2npa5d] {
    height: 14vh;
    min-height: 110px;
    max-height: 180px;
}

/* The PlateType / VehicleType peak-comparison grid card sits beside the
   Monthly comparison chart. Its page size is fixed at 15 rows, so a
   partially-filled page renders the remaining rows as empty space inside
   the grid frame and the pager stays at the card bottom — no height
   reservation needed since the row count is constant. */

/* Lot strip directly above the charts-row also contributes to the
   above-the-fold budget — keep it tight so it doesn't push the chart
   row past the grid. */
.lot-strip-card[b-rr3c2npa5d] {
    padding: 8px 12px;
}

.lot-strip-row[b-rr3c2npa5d] {
    margin-top: 4px;
}

/* Collapsed state — only the "Aikštelės" title is shown, the row of
   lot cards is hidden via the class toggle below. Shrink the padding
   so the collapsed strip is just a slim bar. (The HTML `hidden`
   attribute can't be used here — Blazor renders `hidden="false"`
   when expanded, and any value of `hidden` is truthy to the browser,
   so the row would never re-appear.) */
.lot-strip-card-collapsed[b-rr3c2npa5d] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-row-hidden[b-rr3c2npa5d] {
    display: none;
}

/* The Užimtumas + Transporto srautai grid card collapses to just its
   title when the user clicks anywhere on its white background outside
   the grid wrapper. Cursor signals the click target; the chevron flips
   between ▾ and ▸ depending on state. The grid wrapper itself stops
   propagation so row clicks don't trigger the collapse. */
.monthly-grid-card[b-rr3c2npa5d] {
    cursor: pointer;
}

.monthly-grid-card-collapsed[b-rr3c2npa5d] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.monthly-grid-card-chevron[b-rr3c2npa5d] {
    margin-left: 6px;
    font-size: 0.8em;
    color: #6c757d;
}


/* Row-block selection — clicking any row of a (lot × category) block
   highlights every row that shares its BlockKey. The TR-level class is
   stamped on by OnRowRender; we paint a tinted background on the cells
   so the whole grouped section reads as one selected block. The colour
   is deliberately stronger than the expand-group grey backdrop so the
   selection still reads after the user expands a terminal list. */
[b-rr3c2npa5d] tr.monthly-grid-block-selected td {
    background-color: rgba(59, 89, 152, 0.18) !important;
}

[b-rr3c2npa5d] tr.monthly-grid-block-selected td:first-child {
    border-left: 3px solid #3b5998;
}

/* Header row of a selected block (Parkavimo įvykiai for recognised
   categories, first TrafficIn for failure-mode ones). A stronger
   accent paint so the user reads it as the title of the highlighted
   group while everything below it is the body. */
[b-rr3c2npa5d] tr.monthly-grid-block-header td {
    background-color: rgba(59, 89, 152, 0.28) !important;
    font-weight: 600;
}

/* Clickable title — acts as the accordion toggle. The chevron sits to
   its right and rotates between ▾ (expanded) / ▸ (collapsed) so the
   user reads "click here to toggle" at a glance. */
.lot-strip-title[b-rr3c2npa5d] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-rr3c2npa5d] {
    font-size: 0.8em;
    color: #6c757d;
}

/* Match the Monthly comparison legend card typography to the Traffic
   Flow legend cards above — plate-type name is the prominent dark navy
   title on top, the all-months total sits below as a slightly smaller
   bold value. Keeps both legend strips visually consistent. */
.legend-cards .legend-card-value[b-rr3c2npa5d] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

/* The figure sits below the name and stays quieter than it — lighter weight
   and a grey tone, matching the Summary report's cards. */
.legend-card-total[b-rr3c2npa5d] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* .report-card base styles live in statistics.css. */

.summary-loader[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.no-groups-placeholder[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #adb5bd;
    font-size: 4rem;
}

/* .report-card-title comes from statistics.css. */
.filter-label[b-rr3c2npa5d] {
    font-size: 1.3vh;
    color: slategrey;
}

.group-section[b-rr3c2npa5d] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

.group-section-header[b-rr3c2npa5d] {
    cursor: pointer;
    margin: 0;
}

[b-rr3c2npa5d] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-rr3c2npa5d] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-rr3c2npa5d] .k-chart {
    padding: 0px 4px 4px 0px;
}

[b-rr3c2npa5d] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

/* .k-button-group base styles live in statistics.css. */

[b-rr3c2npa5d] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}


/* Legend cards in this report click to toggle a series on/off. */
.legend-card[b-rr3c2npa5d] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* …except the plate-type cards, which are read-only: the peak is the max of
   the SUM across plate types, so an individual type cannot be switched off.
   Show a default cursor so the card doesn't advertise a click that does
   nothing. */
.legend-card-static[b-rr3c2npa5d] {
    cursor: default;
}

/* Plate-type dot colours used by the donut legend cards (set as CSS vars
   so the markup can apply them via .dot-online / .dot-short-term / etc.). */
.dot-online[b-rr3c2npa5d] {
    --dot-color: #48B8A0;
}

.dot-short-term[b-rr3c2npa5d] {
    --dot-color: #2E5FA1;
}

.dot-subscriber[b-rr3c2npa5d] {
    --dot-color: #3F8E5C;
}

/* Override the shared .legend-card-line geometry — peak limits use a taller
   line marker (12px) so the dot sits centred on the dotted line. */
.legend-card-line[b-rr3c2npa5d] {
    height: 12px;
    margin-top: 4px;
}

/* Static legend card — shown when the chart line is suppressed (limit too
   far above peak) but we still want to display the limit value. No click
   handler, no hover effect, slightly muted look so the user understands
   the card is informational rather than a visibility toggle. */
.legend-card-static[b-rr3c2npa5d] {
    cursor: default;
    opacity: 0.85;
}

.legend-card-static:hover[b-rr3c2npa5d] {
    background: inherit;
}

/* Lot legend cards row below the Monthly comparison chart. Single-select
   filter — clicking a card pins that lot, others fade out. The selected
   card gets a navy border highlight; others drop to opacity 0.4 via
   .legend-card-faded (defined in statistics.css). Cards are evenly
   distributed across the full chart width; a single lot expands to fill
   the whole row. */
.lot-cards[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.lot-cards .lot-card[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 10px;
}

.lot-cards .dot-lot[b-rr3c2npa5d] {
    --dot-color: #3b5998;
}

/* Full-width strip above the charts that surfaces the lot picker as its
   own card. Visually mirrors the report-card pattern (white background,
   rounded corners, soft shadow) so it reads as part of the dashboard
   family. The strip sits below the grouping-mode tabs and above the
   charts-row; lot cards inside flex-fill across the entire width. */
.lot-strip-card[b-rr3c2npa5d] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
    margin-bottom: 8px;
}

/* Wrapping row of lot cards. Each card has a fixed minimum width so
   titles stay readable when there are many lots (15-20+); cards that
   don't fit on the first row wrap to the next, keeping every card at a
   consistent readable size. */
.lot-strip-row[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lot-strip-row .lot-card[b-rr3c2npa5d] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-rr3c2npa5d] {
    --dot-color: #3b5998;
}

/* Prompt shown inside the lot strip when no lots are selected. Same colour
   family as the in-grid warning banner so all "you need to pick X" prompts
   visually belong together. Sits below the lot cards so the user reads
   "here's the list, pick one" in one visual flow. */
/* Traffic Flow legend cards — one card per terminal with two rows
   inside: Įtekas total (green dot) and Ištekas total (navy dot). The
   row wraps when the chart card is narrow so cards never overflow. */
.traffic-flow-legend[b-rr3c2npa5d] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.traffic-flow-legend-card[b-rr3c2npa5d] {
    flex: 1 1 0;
    min-width: 140px;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.traffic-flow-legend-title[b-rr3c2npa5d] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a2b5f;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.traffic-flow-legend-row[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #495057;
}

.traffic-flow-legend-row strong[b-rr3c2npa5d] {
    margin-left: auto;
    color: #1a2b5f;
}

.traffic-flow-legend-dot[b-rr3c2npa5d] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dot-color, #999);
}

.traffic-flow-legend-label[b-rr3c2npa5d] {
    color: slategrey;
}

.lot-strip-empty-message[b-rr3c2npa5d] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}

/* Monthly grid below the two charts — category + lot + 12 month columns.
   Styles mirror the .cell-monthly-grid look used by RevenueSummaryReport's
   per-terminal grid so both dashboards read as the same UI family. */
[b-rr3c2npa5d] .k-grid-header,
[b-rr3c2npa5d] .k-grid-header-wrap,
[b-rr3c2npa5d] .k-grid .k-table-thead,
[b-rr3c2npa5d] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

[b-rr3c2npa5d] .k-grid,
[b-rr3c2npa5d] .k-grid .k-table-th,
[b-rr3c2npa5d] .k-grid .k-table-td {
    font-size: 0.75rem;
}

[b-rr3c2npa5d] .k-grid .k-table-th,
[b-rr3c2npa5d] .k-grid .k-table-td {
    padding-block: 4px;
    padding-inline: 6px;
}

/* Charts-row uses margin-bottom: 8px to separate from siblings, but the
   grid card is a direct .report-card placed between charts-row and the
   Day view card. Without its own bottom margin it sits flush against the
   Day view chart; this restores the same 8px gap the other report cards
   have. */
.charts-row + .report-card[b-rr3c2npa5d] {
    margin-bottom: 8px;
}

/* Grid wrapper + body reserve space for the full (lots × categories) row
   count so the card height doesn't shift when the user toggles legend
   cards or moves between paginated lot counts. Wrapper min-height covers
   header + body + pager; body min-height keeps the data area from
   shrinking when only a few rows are visible. Both come from inline CSS
   custom properties set in the .razor markup, in lockstep with PageSize. */
.monthly-grid-wrapper[b-rr3c2npa5d] {
    min-height: var(--monthly-grid-wrapper-min);
}

.monthly-grid-wrapper[b-rr3c2npa5d]  .k-grid-content {
    min-height: var(--monthly-grid-body-min);
}

/* Groups grid card — tabs (Subscriber / Online), 10-group cap warning,
   search input, and the grid itself stacked vertically. The button group
   doubles as the tab strip; the warning banner only appears when the
   active tab has more than the selectable cap. */
.groups-grid-card[b-rr3c2npa5d] {
    margin-bottom: 8px;
}

.groups-grid-card[b-rr3c2npa5d]  .k-button-group {
    margin-bottom: 12px;
}

.groups-grid-warning[b-rr3c2npa5d] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

/* Toolbar above the Groups grid: left slot (over the checkbox + ID
   columns, 108px wide) holds the "Sort selected first" toggle button;
   the rest of the row hosts the search input lined up with the
   GroupTitle column. */
.groups-grid-toolbar[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.groups-grid-toolbar-left[b-rr3c2npa5d] {
    flex: 0 0 auto;
    min-width: 108px;
    display: flex;
    align-items: center;
}

.groups-grid-toolbar-mid[b-rr3c2npa5d] {
    flex: 1;
    min-width: 0;
}

.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search {
    width: 100%;
}

/* Match the sort-selected button height (28px) so the toolbar reads as
   one consistent row instead of the search box looking shrunken next to
   the taller button. */
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search,
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search .k-input,
.groups-grid-card[b-rr3c2npa5d]  .groups-grid-search .k-input-inner {
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
}

.groups-grid-sort-selected[b-rr3c2npa5d] {
    background-color: transparent;
    border: 1px solid #3b5998;
    color: #3b5998;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
    min-width: 180px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.groups-grid-sort-selected:hover[b-rr3c2npa5d],
.groups-grid-sort-selected.active[b-rr3c2npa5d] {
    background-color: #3b5998;
    color: #fff;
}

.groups-grid-sort-selected-icon[b-rr3c2npa5d] {
    display: inline-block;
    width: 12px;
    text-align: center;
}

.groups-grid-select-header-row[b-rr3c2npa5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.groups-grid-deselect-icon[b-rr3c2npa5d] {
    background-color: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
}

.groups-grid-deselect-icon:hover[b-rr3c2npa5d] {
    color: #dc3545;
}

.groups-grid-select-header[b-rr3c2npa5d] {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    color: #3b5998;
    font-size: 0.85rem;
    padding: 0 4px;
}

.groups-grid-select-header:hover[b-rr3c2npa5d] {
    color: #1a2b5f;
}

/* Wrapper around both upper chart cards so a single overlay banner can
   sit centred across them when the Groups cap kicks in. */
.charts-row-wrapper[b-rr3c2npa5d] {
    position: relative;
}

/* Title blur only on the LEFT card (the Monthly comparison chart) —
   the right card is now the Groups grid, which must stay crisp so the
   user can read its column headers and tab labels while picking groups. */
.charts-row-wrapper.charts-blurred[b-rr3c2npa5d]  .charts-row > .report-card:first-child .report-card-title {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
}

/* Blue centred banner over the Monthly comparison chart only — in Peak
   the second top-row card is now the Groups grid, which the user needs
   to click on to pick groups. Blurring it would hide the very control
   the prompt is asking them to use. The Monthly comparison card occupies
   the left ~35% of the wrapper, so left: 17.5% centres the overlay on
   it. Anchored a third of the way down so it lands at roughly the
   optical centre of the chart area. pointer-events: none keeps clicks
   falling through. */
.charts-blurred-overlay[b-rr3c2npa5d] {
    position: absolute;
    top: 35%;
    left: 17.5%;
    transform: translate(-50%, -50%);
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    max-width: 32%;
}

.charts-blurred-content[b-rr3c2npa5d] {
    filter: blur(5px) !important;
    opacity: 0.55 !important;
    pointer-events: none;
}

/* Inline spinner next to the Groups grid title — visible while a
   Shift+click range selection's chart rebuild is in flight. */
.groups-grid-range-spinner[b-rr3c2npa5d] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}

/* Soft-deleted group title rendered with the same struck-through look the
   legacy sidebar used so the user can recognise inactive groups at a
   glance. */
.filter-label-deleted[b-rr3c2npa5d] {
    color: #6c757d;
    text-decoration: line-through;
}

/* Highlight the month column the user picked in the grid header or in the
   Monthly comparison chart. Applied via OnCellRender + HeaderClass so each
   cell of the selected column gets the side borders / tinted background. */
[b-rr3c2npa5d] .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

[b-rr3c2npa5d] .k-table-th.monthly-grid-col-selected,
[b-rr3c2npa5d] th.monthly-grid-col-selected {
    border-top: 2px solid #3b5998 !important;
}

[b-rr3c2npa5d] .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* Month column header is clickable — cursor + tight inline layout so the
   selection feels actionable. */
.monthly-grid-month-header[b-rr3c2npa5d] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.monthly-grid-month-header:hover[b-rr3c2npa5d] {
    color: #1a2b5f;
}

/* Shown when the selected lots span more than one time zone. Each lot is
   bucketed by its own local day and hour, so a row totalling several lots
   sums their separate local periods instead of measuring one interval —
   correct for comparing lots against their own rhythm, but the reader has
   to know it rather than assume a single shared clock. */
.multi-timezone-warning[b-rr3c2npa5d] {
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
/* /Pages/Statistics/OccupationReports/OccupationReport.razor.rz.scp.css */

.page-layout[b-5pmr7jdjti] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.page-main[b-5pmr7jdjti] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    /* min-height: 0 propagates the height constraint down to .peaks-layout
       so its overflow: auto can actually contain the scroll. Without this,
       .page-main grows to fit content and pushes the whole page to scroll. */
    min-height: 0;
}

.stat-cards[b-5pmr7jdjti] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.stat-card[b-5pmr7jdjti] {
    flex: 1;
    background-color: white;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    /* Reserve a transparent 1.5px border on every card so the highlighted
       state can swap colour without changing the content-box size. Without
       this, switching the active tab shrinks the active card's content area
       by 3px and triggers a small reflow that nudges everything below the
       stat-cards row (e.g. the "Grupavimas pagal" button group). */
    border: 1.5px solid transparent;
    box-sizing: border-box;
}

.stat-card-highlighted[b-5pmr7jdjti] {
    border-color: #3b5998;
}

.stat-card-header[b-5pmr7jdjti] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.stat-card-label[b-5pmr7jdjti] {
    font-size: 0.75rem;
    color: #6c757d;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-icon[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: #e9ecef;
    color: #1a2b5f;
    flex-shrink: 0;
}

.stat-card-icon-active[b-5pmr7jdjti] {
    background-color: #dce3f5;
    color: #1a2b5f;
}

.stat-card-value[b-5pmr7jdjti] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    font-family: 'Segoe UI', sans-serif;
}

.stat-card-description[b-5pmr7jdjti] {
    font-size: 1rem;
    font-weight: 600;
    color: #1a2b5f;
    font-family: 'Segoe UI', sans-serif;
    line-height: 1.2;
}

/* Root layout (.statistics-layout) lives in wwwroot/css/statistics.css so
   every Statistics dashboard shares the same outer gutters and viewport
   lock. The marker class below is kept for OccupationReport-specific
   selectors (e.g. .occupation-reports-layout h3 below). */
.occupation-reports-layout[b-5pmr7jdjti] {
}

.nav-cards[b-5pmr7jdjti] {
    display: flex;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
    overflow: hidden;
}

.nav-card[b-5pmr7jdjti] {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    color: #6c757d;
    border-radius: 0;
}

.nav-card-active[b-5pmr7jdjti] {
    background-color: white;
    color: #1a2b5f;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-card-disabled[b-5pmr7jdjti] {
    color: #adb5bd;
    cursor: default;
}

.nav-card-inactive[b-5pmr7jdjti] {
    color: #6c757d;
    cursor: pointer;
}

.nav-card-inactive:hover[b-5pmr7jdjti] {
    color: #1a2b5f;
}

.stat-card-clickable[b-5pmr7jdjti] {
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.stat-card-clickable:hover[b-5pmr7jdjti] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.stat-card-visable[b-5pmr7jdjti] {
    display: none;
    visibility: hidden;
}

.filtersLevel1 h4[b-5pmr7jdjti] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
    margin-top: 20px;
}

/* Outer wrapper owns the single scrollbar for the region below the button
   group. .peaks-layout lives inside and grows to fit its content (sidebar
   stretches to match the chart column, charts can keep their natural
   heights), and this wrapper scrolls the whole thing when it overflows. */
.peaks-scroll[b-5pmr7jdjti] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.peaks-layout[b-5pmr7jdjti] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    /* min-height: 100% keeps the row at least as tall as the visible scroll
       viewport so the sidebar's white card reaches the bottom of the side
       menu when the chart column is short. Taller content (e.g. the day
       chart added later) grows the row past that height, and the wrapper
       scrolls. */
    min-height: 100%;
}

.tab-loader[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.peaks-layout[b-5pmr7jdjti]  .sc-page-layout {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-start;
}

.peaks-layout[b-5pmr7jdjti]  .sc-filters {
    flex-shrink: 0;
    align-self: flex-start;
}

/* .filtersLevel1 base styles live in statistics.css. Vertical flex column
   so the Subscriber/Online .group-section children can split the leftover
   space below Lots + Periods. position: sticky pins the sidebar to the top
   of the scroll container (.peaks-scroll), and max-height: 100% caps it at
   the viewport height — so when the user clicks "Show all" and the group
   list would otherwise extend below the chart column, the cap stops the
   sidebar at the same bottom edge as the third chart and the inner
   .group-list-scroll picks up the overflow with its own scrollbar. */
.filtersLevel1[b-5pmr7jdjti] {
    display: flex;
    flex-direction: column;
    /* Sidebar is one of two flex children inside .peaks-layout. The parent
       has height: 100% + align-items: stretch, so the sidebar already
       claims the full visible region height — no sticky/contain tricks
       needed. min-height: 0 + overflow: hidden are still required so the
       inner .group-section's intrinsic content height doesn't push the
       sidebar past those bounds; the inner .group-list-scroll handles the
       overflow with its own scrollbar instead. */
    min-height: 0;
    overflow: hidden;
}

/* h3 base styles (.statistics-layout h3, .filtersLevel2 h3) live in statistics.css. */

/* .filtersLevel2 base styles live in statistics.css. */

.charts-row[b-5pmr7jdjti] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-5pmr7jdjti] {
    flex: 0 0 35%;
    min-width: 0;
    max-width: 35%;
    padding-top: 36px;
}

.charts-row > .report-card:nth-child(2)[b-5pmr7jdjti] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 36px;
}

/* .report-card and .report-card-title live in statistics.css. */

[b-5pmr7jdjti] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-5pmr7jdjti] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-5pmr7jdjti] .k-chart {
    padding: 0px 4px 4px 0px;
}


[b-5pmr7jdjti] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

.filter-label[b-5pmr7jdjti] {
    font-size: 1.3vh;
    color: slategrey;
}

[b-5pmr7jdjti] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}

/* .k-button-group base styles live in statistics.css. */

/* Group row container inside a .group-section. flex: 1 + min-height: 0
   make it claim whatever vertical space is left in the .group-section
   after the chrome above it (ComboBox / select-all / show-all). The
   sidebar's max-height + overflow: hidden chain (.filtersLevel1 with
   min-height: 0 + overflow: hidden, .group-section with flex: 1 +
   min-height: 0) prevents the intrinsic content height from pushing the
   sidebar past the chart column's bottom; this container then handles
   the overflow with its own scrollbar. */
.group-list-scroll[b-5pmr7jdjti] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Each .group-section claims the leftover vertical space in the sidebar
   below the Lots/Periods/Klientų tipai blocks. flex: 1 + min-height: 0
   lets it stretch to fill that space — the inner .group-list-scroll
   (flex: 1; min-height: 0; overflow-y: auto) then takes the area below
   the section's chrome and scrolls internally when the group list is
   long. With two sections (Subscriber + Online) flex distributes the
   leftover space evenly between them. */
.group-section[b-5pmr7jdjti] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

.period-year-row[b-5pmr7jdjti] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1a2b5f;
    padding-top: 8px;
    padding-bottom: 4px;
}

.period-year-toggle[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    font-size: 0.7rem;
    width: 12px;
    color: #6c757d;
}

/* Align month checkboxes with the year label text start. */
.period-month-row[b-5pmr7jdjti] {
    padding-left: 42px;
    font-size: 0.85em;
}

.period-month-row[b-5pmr7jdjti]  .k-checkbox {
    width: 14px;
    height: 14px;
}

.group-section-header[b-5pmr7jdjti] {
    cursor: pointer;
    margin: 0;
}

/* Lots and Periods sidebar headers — same collapse/expand affordance as the
   group sub-section headers above. user-select: none prevents the heading
   text from flashing into a text-selection state on quick double-clicks.
   The tighter top + bottom margins (vs. the default .filtersLevel1 h4
   spacing — see line ~153) keep two collapsed sections from leaving a
   tall blank gap before the next sidebar block. We chain the parent
   class .filtersLevel1 into the selector to win the specificity race
   against `.filtersLevel1 h4 { margin: 20px 0 12px }`. */
.filtersLevel1 h4.filter-section-header[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    margin-top: 16px;
    margin-bottom: 4px;
}

.slot-limit-card[b-5pmr7jdjti] {
    position: absolute;
    right: 20px;
    top: 70%;
    z-index: 10;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-width: 140px;
}

.slot-limit-title[b-5pmr7jdjti] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    margin-bottom: 2px;
}

.slot-limit-value[b-5pmr7jdjti] {
    font-size: 2rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

.chart-with-badge[b-5pmr7jdjti] {
    position: relative;
    overflow: visible;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* OccupationReport's legend cards click to toggle a series on/off. */
.legend-card[b-5pmr7jdjti] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}


/* Informational notice underneath the group section header. The 10-group
   cap is a constant feature of the chart, so we show it any time the user
   is filtering by groups (informational, not error). Light-blue pill so the
   notice reads a touch louder than surrounding text without being alarming. */
.group-limit-warning[b-5pmr7jdjti] {
    min-height: 18px;
    color: #1a2b5f;
    font-size: 0.8rem;
    margin: 4px 0 8px 0;
    line-height: 1.2;
    background: #eaf1fb;
    border: 1px solid #cfdcef;
    border-radius: 4px;
    padding: 4px 8px;
}

/* 8 px breathing room after each section title and after the combo box,
   so the filter sidebar reads as separate blocks instead of a wall. */
.group-section .group-section-header[b-5pmr7jdjti] {
    margin-bottom: 8px;
}

.group-section[b-5pmr7jdjti]  .k-combobox {
    margin-bottom: 8px;
}

/* Shift-click range-toggling on group rows would otherwise highlight the
   label text (because the browser interprets shift-click as "extend text
   selection"). Disable user text selection on group rows so the click
   reaches the checkbox cleanly instead of selecting the row's title. */
.group-section .mt-sm[b-5pmr7jdjti] {
    user-select: none;
    -webkit-user-select: none;
}

/* Greyed out "Deselect all" label after the user has just clicked it —
   the row stays visible but inert until at least one group is picked
   again, so the click doesn't visually bounce back to "Select all". */
.filter-label-disabled[b-5pmr7jdjti] {
    color: #adb5bd;
    cursor: not-allowed;
}

/* Group row whose underlying LtcGroup row has Deleted=true. Lighter text
   (still legible) so the user can tell at a glance which rows refer to
   historical/no-longer-existing groups, without hiding them — those rows
   still represent real parking logs from when the group existed. */
.filter-label-deleted[b-5pmr7jdjti] {
    color: #8a93a3;
    font-style: italic;
}

/* "Show all (N)" toggle that appears under the group list when the list
   has more than 20 entries — collapsed list shows only selected rows so
   the sidebar stays compact; this button expands to the full list. */
.group-show-all[b-5pmr7jdjti] {
    text-align: left;
}

.group-show-all-button[b-5pmr7jdjti] {
    background: none;
    border: none;
    padding: 0;
    color: #1a2b5f;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.group-show-all-button:hover[b-5pmr7jdjti] {
    color: #0d1a3f;
}

/* Threshold-based initial state shown in the chart area when the user is
   filtering by groups but >10 groups exist and none are picked yet — gives
   the user an explicit next step instead of an empty chart.
   flex: 1 + min-width: 0 makes it occupy the same horizontal slot as the
   real chart components do (via ::deep .sc-page-layout), so the filter
   sidebar does not collapse toward the center when the chart is replaced. */
.chart-empty-state[b-5pmr7jdjti] {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 24px;
    color: #1a2b5f;
    font-size: 1rem;
    text-align: center;
    background: #f6f8fb;
    border: 1px dashed #c5cee0;
    border-radius: 6px;
    overflow: hidden;
}

.chart-empty-state-message[b-5pmr7jdjti] {
    align-self: center;
    margin-bottom: 16px;
    padding: 8px 16px;
    font-weight: 500;
    background: #eaf1fb;
    border: 1px solid #cfdcef;
    border-radius: 4px;
}

/* Decorative blurred chart silhouette shown beneath the prompt. Pure visual
   filler — not a real chart, never interactive (aria-hidden on the wrapper).
   Heavy blur + low opacity so the user reads the message as the actionable
   bit and the silhouette is purely a "this is where charts would be" hint. */
.chart-empty-state-placeholder[b-5pmr7jdjti] {
    flex: 1;
    min-height: 240px;
    filter: blur(8px);
    opacity: 0.15;
    pointer-events: none;
    user-select: none;
}

.chart-empty-state-placeholder svg[b-5pmr7jdjti] {
    width: 100%;
    height: 100%;
    display: block;
}

/* Aikštelės strip lives in the parent OccupationReport component now —
   it sits above the grouping-mode tab strip so every sub-report shares
   one instance of the lot picker. Styles previously duplicated in the
   per-report scoped CSS files were left there but no longer apply
   because the markup migrated up here. */
.lot-strip-card[b-5pmr7jdjti] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 8px 12px;
    margin-bottom: 8px;
    /* Whole card is the accordion toggle — clicking anywhere on the
       white background collapses/expands the strip. The lot tiles
       inside use @onclick:stopPropagation so picking a lot doesn't
       also flip the accordion. */
    cursor: pointer;
}

.lot-strip-card-collapsed[b-5pmr7jdjti] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-title[b-5pmr7jdjti] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-5pmr7jdjti] {
    font-size: 0.8em;
    color: #6c757d;
}

.lot-strip-row[b-5pmr7jdjti] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.lot-strip-row-hidden[b-5pmr7jdjti] {
    display: none;
}

.lot-strip-row .lot-card[b-5pmr7jdjti] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-5pmr7jdjti] {
    --dot-color: #3b5998;
}

.lot-strip-empty-message[b-5pmr7jdjti] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}
/* /Pages/Statistics/OccupationReports/OccupationSummaryReport.razor.rz.scp.css */

/* .filtersLevel1 and .filtersLevel2 base styles live in statistics.css. */

.sc-page-layout[b-thlhhlau2b] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
}

.sc-filters h4[b-thlhhlau2b] {
    color: #1a2b5f;
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 8px;
    margin-top: 12px;
}

.sc-filters[b-thlhhlau2b] {
    padding: 10px;
    background-color: white;
    min-width: 220px;
    width: max-content;
    flex-shrink: 0;
    margin-top: 0;
    box-sizing: border-box;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.charts-row[b-thlhhlau2b] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

.charts-row > .report-card:first-child[b-thlhhlau2b] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

.charts-row > .report-card:not(:first-child)[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Trim the chart cards' vertical real estate aggressively — the goal is
   for the top of the grid to peek above the fold on a standard laptop,
   so the user immediately sees "there's a grid below" without scrolling. */
.charts-row > .report-card .k-chart[b-thlhhlau2b] {
    height: 14vh;
    min-height: 110px;
    max-height: 180px;
}

/* Lot strip directly above the charts-row also contributes to the
   above-the-fold budget — keep it tight so it doesn't push the chart
   row past the grid. */
.lot-strip-card[b-thlhhlau2b] {
    padding: 8px 12px;
}

.lot-strip-row[b-thlhhlau2b] {
    margin-top: 4px;
}

/* Collapsed state — only the "Aikštelės" title is shown, the row of
   lot cards is hidden via the class toggle below. Shrink the padding
   so the collapsed strip is just a slim bar. (The HTML `hidden`
   attribute can't be used here — Blazor renders `hidden="false"`
   when expanded, and any value of `hidden` is truthy to the browser,
   so the row would never re-appear.) */
.lot-strip-card-collapsed[b-thlhhlau2b] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.lot-strip-row-hidden[b-thlhhlau2b] {
    display: none;
}

/* The Užimtumas + Transporto srautai grid card collapses to just its
   title when the user clicks anywhere on its white background outside
   the grid wrapper. Cursor signals the click target; the chevron flips
   between ▾ and ▸ depending on state. The grid wrapper itself stops
   propagation so row clicks don't trigger the collapse. */
.monthly-grid-card[b-thlhhlau2b] {
    cursor: pointer;
}

.monthly-grid-card-collapsed[b-thlhhlau2b] {
    padding-top: 6px;
    padding-bottom: 6px;
}

.monthly-grid-card-chevron[b-thlhhlau2b] {
    margin-left: 6px;
    font-size: 0.8em;
    color: #6c757d;
}

/* Direction label cell (Įvažiavimų / Išvažiavimų srautas) — italic + bold
   to read as a distinct marker without competing with the numeric values
   for emphasis. */
[b-thlhhlau2b] td.monthly-grid-row-kind-cell {
    color: #495057;
    font-style: italic;
    font-weight: 500;
}

/* Row-block selection — clicking any row of a (lot × category) block
   highlights every row that shares its BlockKey. The TR-level class is
   stamped on by OnRowRender; we paint a tinted background on the cells
   so the whole grouped section reads as one selected block. The colour
   is deliberately stronger than the expand-group grey backdrop so the
   selection still reads after the user expands a terminal list. */
[b-thlhhlau2b] tr.monthly-grid-block-selected td {
    background-color: rgba(59, 89, 152, 0.18) !important;
}

[b-thlhhlau2b] tr.monthly-grid-block-selected td:first-child {
    border-left: 3px solid #3b5998;
}

/* Header row of a selected block (Parkavimo įvykiai for recognised
   categories, first TrafficIn for failure-mode ones). A stronger
   accent paint so the user reads it as the title of the highlighted
   group while everything below it is the body. */
[b-thlhhlau2b] tr.monthly-grid-block-header td {
    background-color: rgba(59, 89, 152, 0.28) !important;
    font-weight: 600;
}

/* Clickable title — acts as the accordion toggle. The chevron sits to
   its right and rotates between ▾ (expanded) / ▸ (collapsed) so the
   user reads "click here to toggle" at a glance. */
.lot-strip-title[b-thlhhlau2b] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lot-strip-chevron[b-thlhhlau2b] {
    font-size: 0.8em;
    color: #6c757d;
}

/* All three grouping modes (customer type / customer group / vehicle type)
   share one card shape: a muted dimension label, the name as the prominent
   dark navy line, and the selected month's figure beneath it. */
.legend-cards .legend-card-value[b-thlhhlau2b] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

/* The figure is deliberately quieter than the name above it — smaller, lighter
   weight and a grey tone. It answers "how many" only after the eye has found
   "which one", so it must not compete with the name for attention. */
.legend-card-total[b-thlhhlau2b] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

/* .report-card base styles live in statistics.css. */

.summary-loader[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

.no-groups-placeholder[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #adb5bd;
    font-size: 4rem;
}

/* .report-card-title comes from statistics.css. */
.filter-label[b-thlhhlau2b] {
    font-size: 1.3vh;
    color: slategrey;
}

.group-section[b-thlhhlau2b] {
    border: 0.7px solid LightGray;
    border-radius: 4px;
    padding: 6px;
    margin-bottom: 8px;
}

.group-section-header[b-thlhhlau2b] {
    cursor: pointer;
    margin: 0;
}

[b-thlhhlau2b] .k-splitter {
    background-color: transparent;
    border: none;
}

[b-thlhhlau2b] .k-splitter-flex .k-splitbar {
    position: static;
    flex: 0 0 auto;
    background-color: transparent;
    border: none;
}

[b-thlhhlau2b] .k-chart {
    padding: 0px 4px 4px 0px;
}

[b-thlhhlau2b] .k-input-inner {
    font-size: x-small;
    color: slategrey;
}

/* .k-button-group base styles live in statistics.css. */

[b-thlhhlau2b] .k-checkbox-wrap {
    margin-right: 8px;
    margin-bottom: 4px;
}


/* Legend cards in this report click to toggle a series on/off. */
.legend-card[b-thlhhlau2b] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

/* Plate-type dot colours used by the donut legend cards. */
.dot-online[b-thlhhlau2b] {
    --dot-color: #48B8A0;
}

.dot-short-term[b-thlhhlau2b] {
    --dot-color: #2E5FA1;
}

.dot-subscriber[b-thlhhlau2b] {
    --dot-color: #3F8E5C;
}

/* Lot legend cards row below the Monthly comparison chart. Single-select
   filter — clicking a card pins that lot, others fade out. The selected
   card gets a navy border highlight; others drop to opacity 0.4 via
   .legend-card-faded (defined in statistics.css). Cards are evenly
   distributed across the full chart width; a single lot expands to fill
   the whole row. */
.lot-cards[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.lot-cards .lot-card[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 10px;
}

.lot-cards .dot-lot[b-thlhhlau2b] {
    --dot-color: #3b5998;
}

/* Full-width strip above the charts that surfaces the lot picker as its
   own card. Visually mirrors the report-card pattern (white background,
   rounded corners, soft shadow) so it reads as part of the dashboard
   family. The strip sits below the grouping-mode tabs and above the
   charts-row; lot cards inside flex-fill across the entire width. */
.lot-strip-card[b-thlhhlau2b] {
    background-color: white;
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
    margin-bottom: 8px;
}

/* Wrapping row of lot cards. Each card has a fixed minimum width so
   titles stay readable when there are many lots (15-20+); cards that
   don't fit on the first row wrap to the next, keeping every card at a
   consistent readable size. */
.lot-strip-row[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.lot-strip-row .lot-card[b-thlhhlau2b] {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 6px 10px;
}

.lot-strip-row .dot-lot[b-thlhhlau2b] {
    --dot-color: #3b5998;
}

/* Prompt shown inside the lot strip when no lots are selected. Same colour
   family as the in-grid warning banner so all "you need to pick X" prompts
   visually belong together. Sits below the lot cards so the user reads
   "here's the list, pick one" in one visual flow. */
/* Traffic Flow legend cards — one card per terminal with two rows
   inside: Įtekas total (green dot) and Ištekas total (navy dot). The
   row wraps when the chart card is narrow so cards never overflow. */
.traffic-flow-legend[b-thlhhlau2b] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.traffic-flow-legend-card[b-thlhhlau2b] {
    flex: 1 1 0;
    min-width: 140px;
    padding: 8px 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.traffic-flow-legend-title[b-thlhhlau2b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a2b5f;
    margin-bottom: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.traffic-flow-legend-row[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #495057;
}

.traffic-flow-legend-row strong[b-thlhhlau2b] {
    margin-left: auto;
    color: #1a2b5f;
}

.traffic-flow-legend-dot[b-thlhhlau2b] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--dot-color, #999);
}

.traffic-flow-legend-label[b-thlhhlau2b] {
    color: slategrey;
}

.lot-strip-empty-message[b-thlhhlau2b] {
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: center;
}

/* Monthly grid below the two charts — category + lot + 12 month columns.
   Styles mirror the .cell-monthly-grid look used by RevenueSummaryReport's
   per-terminal grid so both dashboards read as the same UI family. */
[b-thlhhlau2b] .k-grid-header,
[b-thlhhlau2b] .k-grid-header-wrap,
[b-thlhhlau2b] .k-grid .k-table-thead,
[b-thlhhlau2b] .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

[b-thlhhlau2b] .k-grid,
[b-thlhhlau2b] .k-grid .k-table-th,
[b-thlhhlau2b] .k-grid .k-table-td {
    font-size: 0.75rem;
}

[b-thlhhlau2b] .k-grid .k-table-th,
[b-thlhhlau2b] .k-grid .k-table-td {
    padding-block: 4px;
    padding-inline: 6px;
}

/* Charts-row uses margin-bottom: 8px (line 38) to separate from siblings,
   but the grid card is a direct .report-card placed between charts-row and
   the Day view card. Without its own bottom margin it sits flush against
   the Day view chart; this restores the same 8px gap the other report
   cards have. */
.charts-row + .report-card[b-thlhhlau2b] {
    margin-bottom: 8px;
}

/* Grid wrapper + body reserve space for the full (lots × categories) row
   count so the card height doesn't shift when the user toggles legend
   cards or moves between paginated lot counts. Wrapper min-height covers
   header + body + pager; body min-height keeps the data area from
   shrinking when only a few rows are visible. Both come from inline CSS
   custom properties set in the .razor markup, in lockstep with PageSize. */
.monthly-grid-wrapper[b-thlhhlau2b] {
    min-height: var(--monthly-grid-wrapper-min);
}

.monthly-grid-wrapper[b-thlhhlau2b]  .k-grid-content {
    min-height: var(--monthly-grid-body-min);
}

/* Groups grid card — tabs (Subscriber / Online), 10-group cap warning,
   search input, and the grid itself stacked vertically. The button group
   doubles as the tab strip; the warning banner only appears when the
   active tab has more than the selectable cap. */
.groups-grid-card[b-thlhhlau2b] {
    margin-bottom: 8px;
}

.groups-grid-card[b-thlhhlau2b]  .k-button-group {
    margin-bottom: 12px;
}

.groups-grid-warning[b-thlhhlau2b] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

/* Toolbar above the Groups grid: left slot (over the checkbox + ID
   columns, 108px wide) holds the "Sort selected first" toggle button;
   the rest of the row hosts the search input lined up with the
   GroupTitle column. */
.groups-grid-toolbar[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.groups-grid-toolbar-left[b-thlhhlau2b] {
    flex: 0 0 auto;
    min-width: 108px;
    display: flex;
    align-items: center;
}

.groups-grid-toolbar-mid[b-thlhhlau2b] {
    flex: 1;
    min-width: 0;
}

.groups-grid-card[b-thlhhlau2b]  .groups-grid-search {
    width: 100%;
}

/* Match the sort-selected button height (28px) so the toolbar reads as
   one consistent row instead of the search box looking shrunken next to
   the taller button. Telerik's TelerikTextBox renders as a wrapper +
   inner .k-input + .k-input-inner; we lock the height on every layer
   that contributes to the visible box so font / padding inside doesn't
   collapse the field below the button's box. */
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search,
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search .k-input,
.groups-grid-card[b-thlhhlau2b]  .groups-grid-search .k-input-inner {
    height: 28px !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
}

.groups-grid-sort-selected[b-thlhhlau2b] {
    background-color: transparent;
    border: 1px solid #3b5998;
    color: #3b5998;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    /* Lock width / height + border-box so flipping the chevron between
       ▼ and ▽ (which render at slightly different widths) doesn't make
       the button visibly reflow on each toggle click. The :active /
       :focus borders also stay within the same outer box because the
       border lives inside the height via box-sizing. */
    box-sizing: border-box;
    min-width: 180px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.groups-grid-sort-selected:hover[b-thlhhlau2b],
.groups-grid-sort-selected.active[b-thlhhlau2b] {
    background-color: #3b5998;
    color: #fff;
}

/* Fixed-width slot for the leading chevron — keeps text aligned across
   the ▼ / ▽ swap. */
.groups-grid-sort-selected-icon[b-thlhhlau2b] {
    display: inline-block;
    width: 12px;
    text-align: center;
}

/* Layout for the select-column header: chevron toggle (sort-selected-on-
   top) on the left, "deselect all" button on the right. Both share the
   48px column so they stay compact regardless of grid font size. */
.groups-grid-select-header-row[b-thlhhlau2b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.groups-grid-deselect-icon[b-thlhhlau2b] {
    background-color: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 4px;
    line-height: 1;
}

.groups-grid-deselect-icon:hover[b-thlhhlau2b] {
    color: #dc3545;
}

/* Clickable header in the group grid's select column — toggles whether
   selected rows float to the top. The triangle icon flips filled when the
   sort is active, mirrors the affordance used by sortable grid headers. */
.groups-grid-select-header[b-thlhhlau2b] {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    color: #3b5998;
    font-size: 0.85rem;
    padding: 0 4px;
}

.groups-grid-select-header:hover[b-thlhhlau2b] {
    color: #1a2b5f;
}

/* Wrapper around both upper chart cards so a single overlay banner can
   sit centred across them when the Groups cap kicks in. position:
   relative anchors the absolute-positioned overlay below. */
.charts-row-wrapper[b-thlhhlau2b] {
    position: relative;
}

/* Blur state leaves the chart cards at their normal size — only the
   filter blur + overlay banner change, no height tweaks. Resizing the
   chart between blur and normal states triggered visible re-layout
   jumps each time the selection updated. */

/* Blur the chart card titles too — without this the bold "Mėnesių
   palyginimas" / "Mėnesio rodinys" headings stay crisp and pull the
   eye away from the centred prompt banner. The overlay banner itself
   has z-index: 3 so it sits above the blurred titles. */
.charts-row-wrapper.charts-blurred[b-thlhhlau2b]  .report-card-title {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
}

/* Blue centred banner over both upper chart cards — when the Groups cap
   kicks in, the Monthly comparison chart AND the Traffic Flow chart are
   both blurred (their data is meaningless until the user picks groups
   from the grid on the right). The banner spans across both cards so
   the prompt visually belongs to the whole row, not just the left card.
   Same colour family as the in-grid warning banner so both "too many
   groups" prompts visually belong together. Anchored a third of the
   way down so it lands at roughly the optical centre of the chart area.
   pointer-events: none keeps clicks falling through to the Groups grid
   below. */
.charts-blurred-overlay[b-thlhhlau2b] {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    text-align: center;
    z-index: 3;
    pointer-events: none;
    max-width: 60%;
}

/* Chart frame stays mounted (data + axes valid) but renders blurred when
   the overlay banner is showing. filter: blur + opacity dims the chart
   so the user's eye lands on the prompt / Groups grid instead. */
.charts-blurred-content[b-thlhhlau2b] {
    filter: blur(5px) !important;
    opacity: 0.55 !important;
    pointer-events: none;
}

/* Inline spinner next to the Groups grid title — visible while a
   Shift+click range selection's chart rebuild is in flight. The grid
   keeps its highlighted rows visible instantly; the spinner signals
   that the chart catches up shortly. */
.groups-grid-range-spinner[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
}


/* Soft-deleted group title rendered with the same struck-through look the
   legacy sidebar used so the user can recognise inactive groups at a
   glance. */
.filter-label-deleted[b-thlhhlau2b] {
    color: #6c757d;
    text-decoration: line-through;
}

/* Keyboard navigation deferred — Telerik's built-in Navigable="true"
   handles arrow keys at the cell level. Row-focus highlighting via a
   custom .groups-grid-row-focused class can be re-added when we wire
   our own keyboard handler. */

/* Highlight the month column the user picked in the grid header or in the
   Monthly comparison chart. Applied via OnCellRender + HeaderClass so each
   cell of the selected column gets the side borders / tinted background. */
[b-thlhhlau2b] .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

[b-thlhhlau2b] .k-table-th.monthly-grid-col-selected,
[b-thlhhlau2b] th.monthly-grid-col-selected {
    border-top: 2px solid #3b5998 !important;
}

[b-thlhhlau2b] .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* Terminal name + lot cells of the flow grid. Each terminal spans two rows
   (entry / exit); only the first carries the text, so the borders between
   the pair are hidden and the pair reads as one block. */
[b-thlhhlau2b] td.monthly-grid-terminal-cell {
    border-bottom-color: transparent;
    border-top-color: transparent;
}

[b-thlhhlau2b] td.monthly-grid-terminal-banner {
    font-weight: 600;
    color: #1a2b5f;
}

/* Chip naming the terminal the user pinned in the grid. Sits at the right
   edge of the Traffic Flow and heatmap card titles; clicking it clears the
   filter, so it doubles as the way back to "all terminals". */
.terminal-filter-title[b-thlhhlau2b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.terminal-filter-chip[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    max-width: 240px;
}

.terminal-filter-chip:hover[b-thlhhlau2b] {
    background-color: #b6d9fc;
}

.terminal-filter-chip-label[b-thlhhlau2b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.terminal-filter-chip-clear[b-thlhhlau2b] {
    font-size: 0.8em;
    opacity: 0.7;
}

/* Month column header is clickable — cursor + tight inline layout so the
   selection feels actionable. */
.monthly-grid-month-header[b-thlhhlau2b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.monthly-grid-month-header:hover[b-thlhhlau2b] {
    color: #1a2b5f;
}

/* Shown when the selected lots span more than one time zone. Each lot is
   bucketed by its own local day and hour, so a row totalling several lots
   sums their separate local periods instead of measuring one interval —
   correct for comparing lots against their own rhythm, but the reader has
   to know it rather than assume a single shared clock. */
.multi-timezone-warning[b-thlhhlau2b] {
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
/* /Pages/Statistics/OccupationReports/ParkingDurationReport.razor.rz.scp.css */

/* .filtersLevel2 base styles live in statistics.css. */

.charts-row[b-gzava70gfb] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 8px;
}

/* Only the TOP row is height-locked — the Month/Day row below shares the
   .charts-row class and must keep sizing to its own content.
   700px = the average grid's fixed 324px (5 rows + tabs + search + pager, see
   .dwell-right-column) plus ~370px for the donuts above it. The donuts are
   three side-by-side pies, so their card needs real vertical room or they
   render as tiny circles; the Monthly-comparison chart beside them grows by
   the same amount. */
.charts-row-top[b-gzava70gfb] {
    height: 700px;
    align-items: stretch;
}

.charts-row > .report-card:first-child[b-gzava70gfb] {
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    padding-top: 16px;
    position: relative;
    box-sizing: border-box;
}

/* In the height-locked top row the Monthly-comparison card must divide its
   560px between the chart and the legend strip instead of letting the chart
   keep its default 400px and push the cards out of the card. Flex column +
   min-height:0 on the chart is what makes the chart the part that gives way,
   so every legend card stays visible. */
.charts-row-top > .report-card:first-child[b-gzava70gfb] {
    display: flex;
    flex-direction: column;
}

.charts-row-top > .report-card:first-child[b-gzava70gfb]  .k-chart {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* The legend strip keeps its natural height — it is what the chart yields to. */
.charts-row-top > .report-card:first-child > .legend-cards[b-gzava70gfb] {
    flex: 0 0 auto;
}

.charts-row > .report-card:not(:first-child)[b-gzava70gfb] {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 16px;
}

/* Right-hand 65% of the top row, split vertically between the donuts and the
   average grid. Takes the same flex share the Month view card used to have, so
   the row's 35/65 split is unchanged. */
.dwell-right-column[b-gzava70gfb] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* min-height: 0 lets the cards shrink to their allotted share instead of being
   pushed taller by their content. */
.dwell-right-column > .report-card[b-gzava70gfb] {
    min-height: 0;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
}

/* The grid gets a fixed 324px — enough for 5 data rows plus its tabs, search box
   and pager — and the donuts take whatever is left. An even 50/50 split left the
   grid showing only two or three rows, which is the whole reason this row is
   height-locked. */
.dwell-right-column > .dwell-donuts-card[b-gzava70gfb] {
    flex: 1 1 auto;
}

.dwell-right-column > .dwell-avg-grid-card[b-gzava70gfb] {
    flex: 0 0 324px;
}

/* THREE fixed slots, always — a donut occupies one third of the card whether one
   group is ticked or three, and empty slots simply stay empty. Only when more than
   three groups are ticked does the row divide by the real count (see
   .dwell-donuts-row-many).

   This is deliberate after several attempts at sizing columns to the live count:
   every one of them made the column width change as groups were ticked, and
   because Telerik draws the ring to the box's SHORTER side while centring it on
   the longer one, a widening column moved the ring away from its own title and a
   narrowing one clipped it. A constant third keeps the ring the same size in the
   same place, so ticking a group only fills or empties a slot. */
.dwell-donuts-row[b-gzava70gfb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Past three, equal slices of the real count — three fixed slots would overflow
   the card. Set from the markup, which knows the count. */
.dwell-donuts-row-many[b-gzava70gfb] {
    grid-template-columns: repeat(var(--dwell-donut-count), 1fr);
}

.dwell-donut[b-gzava70gfb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Legend card inside each donut's frame, above the ring. flex: 0 0 auto keeps it
   at its natural height so the ring below absorbs the leftover space instead of
   the card stretching; the ring is what should grow when the row gets taller. */
.dwell-donut-legend-card[b-gzava70gfb] {
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: 4px;
    padding: 4px 0;
    /* Centre the title over the ring, which Telerik centres horizontally in the
       chart box below. justify-content, NOT text-align: .legend-card is itself a
       flex container, so text-align does not move its child div — that is why the
       titles stayed hard left while the rings sat centred, and the two looked
       unrelated. */
    justify-content: center;
    text-align: center;
    /* The parent .dwell-donut is the click target, so the card must not swallow
       hover/click events on its way there. */
    pointer-events: none;
}

/* The card sits ON the donut frame, which is what carries the hover tint, so the
   card must not paint its own surface over it — .legend-card's default #f8f9fa
   would hide the tint exactly the way Telerik's white chart background did.
   Transparent here means the whole panel tints as one on hover. */
.dwell-donut-legend-card[b-gzava70gfb],
.dwell-donut:hover .dwell-donut-legend-card[b-gzava70gfb] {
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
}

/* Long group names get an ellipsis rather than wrapping to a second line, which
   would make the donuts in the row uneven in height. The full name stays
   available as the element's title attribute. */
.dwell-donut-legend-card .legend-card-value[b-gzava70gfb] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chart box spans the full column and the ring centres inside it.

   Two earlier attempts tried to left-align the ring by shrinking this box to a
   square (aspect-ratio + width:auto + margin-right:auto). Do NOT reintroduce
   that: the hover/click tint lives on .dwell-donut, which is always full column
   width, so a narrower chart box makes the tinted rectangle extend far past the
   ring — a big empty highlighted area on the right. A full-width box keeps the
   ring, the tint and the click target as one region, which matters more here than
   flush-left alignment, because the whole panel is a toggle. */
.dwell-donut[b-gzava70gfb]  .k-chart {
    /* height:0 + flex:1 1 auto, not height:100%: the latter resolves against the
       parent's full height and so overshoots the space actually left under the
       title, which pushed the ring down and let it spill past the column. This way
       flex assigns the height and the box is exactly the remainder. */
    flex: 1 1 auto;
    width: 100%;
    height: 0;
    min-height: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

/* Each donut doubles as its category's on/off switch. Background-only states —
   no border, so there is no second colour that could fail to match the fill.
   At rest the card stays white (no tint, no frame): three permanently outlined
   panels made the row look busy. The wash appears only on hover/focus below. */
.dwell-donut-clickable[b-gzava70gfb] {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px;
    transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.15s ease;
}

/* The browser's own focus ring is what drew that hard outline after a click —
   Firefox renders :focus-visible on any element carrying a click handler, and it
   uses the accent colour, which is why it appeared red and ignored every border
   rule tried here. Replace it with the same wash the hover uses, so focus and
   hover are indistinguishable and there is only ever one colour on the card. */
.dwell-donut.dwell-donut-clickable:hover[b-gzava70gfb],
.dwell-donut.dwell-donut-clickable:focus[b-gzava70gfb],
.dwell-donut.dwell-donut-clickable:focus-visible[b-gzava70gfb] {
    background-color: rgba(59, 89, 152, 0.06);
    outline: none;
}

/* Telerik paints the chart's own white background from all.css, which sits on
   top of the card's hover tint and leaves a white block where the ring is — so
   hovering appeared to do nothing over most of the donut. !important is needed
   because the framework's own selector is more specific than this one. */
.dwell-donut[b-gzava70gfb]  .k-chart,
.dwell-donut[b-gzava70gfb]  .k-chart-surface,
.dwell-donut[b-gzava70gfb]  .k-chart svg,
.dwell-donut[b-gzava70gfb]  .k-chart .k-chart-surface > svg {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* Switched-off state greys the WHOLE donut — ring, title and figure — rather
   than tinting a border around it. The ring is the thing the eye reads here, so
   desaturating it is what actually communicates "excluded"; a greyed frame
   around a still-colourful chart read as a rendering glitch.
   grayscale() drains the slice colours, and the reduced opacity pushes the
   whole card back without hiding which category it is. */
.dwell-donut-off[b-gzava70gfb] {
    filter: grayscale(100%);
    opacity: 0.45;
}

/* === Group picker inside the average grid (Groups mode only) ========= */

.dwell-avg-grid-card[b-gzava70gfb]  .k-button-group {
    margin-bottom: 8px;
}

/* Shown when a tab holds more groups than can be ticked — the cap is a hard
   limit, so the user needs to know why a checkbox went dead. */
.dwell-group-warning[b-gzava70gfb] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    font-size: 0.75rem;
}

.dwell-group-toolbar[b-gzava70gfb] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-search {
    flex: 1;
    min-width: 0;
}

/* "3 / 10" — reads as a budget, so the user sees how much room is left before
   the checkboxes start refusing. */
.dwell-group-count[b-gzava70gfb] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-checkbox {
    cursor: pointer;
}

/* A checkbox disabled by the cap still needs to look deliberate rather than
   broken. */
.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-clear {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0 2px;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-clear:hover {
    color: #dc3545;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-group-select-header {
    text-align: center;
}

/* Month header doubles as the month picker, like the grids on the Occupation
   reports — clicking it selects that month everywhere (chart plot band, donuts,
   Month view). Cursor signals that. */
.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-month-header {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-month-header:hover {
    color: #1a2b5f;
}

/* Month headers right-align with the figures beneath them. Telerik's TextAlign
   only reaches the data cells, so the header cell needs its own rule — and the
   inner .k-link it wraps the title in has to be pushed over too, otherwise the
   text stays left inside a right-aligned cell. */
.dwell-avg-grid-card[b-gzava70gfb]  .dwell-avg-header-right,
.dwell-avg-grid-card[b-gzava70gfb]  th.dwell-avg-header-right {
    text-align: right;
}

.dwell-avg-grid-card[b-gzava70gfb]  .dwell-avg-header-right .k-link {
    justify-content: flex-end;
}

/* Selected month column in the average grid — same treatment as the Occupation
   reports' grids so the highlight reads identically across tabs. */
.dwell-avg-grid-card[b-gzava70gfb]  .monthly-grid-col-selected {
    background-color: rgba(59, 89, 152, 0.08);
    border-left: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
}

.dwell-avg-grid-card[b-gzava70gfb]  .k-table-th.monthly-grid-col-selected,
.dwell-avg-grid-card[b-gzava70gfb]  th.monthly-grid-col-selected {
    border-top: 2px solid #3b5998 !important;
}

/* Closes the outline along the bottom. The side borders come from every cell in
   the column and the top from the header, so the last row has to supply the
   fourth edge — without it the highlight reads as an open-ended channel. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-table-row:last-child .monthly-grid-col-selected {
    border-bottom: 2px solid #3b5998;
}

/* The grid area scrolls inside its half rather than stretching the card. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* .report-card base styles live in statistics.css. */

/* .report-card-title comes from statistics.css. */


.summary-loader[b-gzava70gfb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
}

/* .month-nav and .month-nav-btn live in statistics.css. */

[b-gzava70gfb] .k-chart {
    padding: 0px 4px 4px 0px;
}

/* Average-duration grid — same compact typography as the grids on the
   Occupation Summary / Peak reports so all four tabs read as one family. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid-header,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid-header-wrap,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-thead,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-header {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

.dwell-avg-grid-card[b-gzava70gfb]  .k-grid,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-th,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-td {
    font-size: 0.75rem;
}

.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-th,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-td {
    padding-block: 4px;
    padding-inline: 6px;
}

/* Never ellipsise: a truncated average is worse than no average, since the
   figure is the whole point of the row. */
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-td,
.dwell-avg-grid-card[b-gzava70gfb]  .k-grid .k-table-th {
    text-overflow: clip;
    white-space: nowrap;
}

/* ParkingDurationReport's legend cards click to toggle a series on/off.
   Base styles (gap/padding/dot/labels) come from statistics.css. */
.legend-card[b-gzava70gfb] {
    cursor: pointer;
    transition: opacity 0.2s ease;
    min-width: 120px;
}

/* Dwell-span name on top, its figure beneath — the same two-line card the
   Occupation Summary and Peak reports use. The figure stays quieter than the
   name: smaller, lighter and grey, so the eye finds "which interval" first. */
.legend-cards .legend-card-value[b-gzava70gfb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a2b5f;
}

.legend-card-total[b-gzava70gfb] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    margin-top: 2px;
}

/* Override the shared .legend-card-line: this report's threshold legend
   uses a solid dashed line without a centred dot. */
.legend-card-line[b-gzava70gfb] {
    width: 20px;
    height: 0;
    border-top: 3px dashed #D46A6A;
    margin-top: 10px;
    flex-shrink: 0;
}
.legend-card-line[b-gzava70gfb]::before,
.legend-card-line[b-gzava70gfb]::after {
    content: none;
}

.donut-center-label[b-gzava70gfb] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.donut-total[b-gzava70gfb] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a2b5f;
    font-family: 'Segoe UI', sans-serif;
}

/* Weekday averages grid */
.weekday-grid[b-gzava70gfb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.weekday-card[b-gzava70gfb] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weekday-name[b-gzava70gfb] {
    width: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a2b5f;
    text-transform: capitalize;
    flex-shrink: 0;
}

.weekday-bar-stack[b-gzava70gfb] {
    flex: 1;
    display: flex;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f0f2f5;
}

.weekday-bar-segment[b-gzava70gfb] {
    height: 100%;
    transition: width 0.3s ease;
    min-width: 1px;
}

.weekday-avg[b-gzava70gfb] {
    width: 36px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #212529;
    text-align: right;
    flex-shrink: 0;
}

/* Shown when the selected lots span more than one time zone. Each lot is
   bucketed by its own local day and hour, so a row totalling several lots
   sums their separate local periods instead of measuring one interval —
   correct for comparing lots against their own rhythm, but the reader has
   to know it rather than assume a single shared clock. */
.multi-timezone-warning[b-gzava70gfb] {
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    color: #664d03;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}
/* /Pages/SystemPages/AnalysisService/AsView.razor.rz.scp.css */
.as-view-title[b-jabjqunxd1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-nav[b-jabjqunxd1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-jabjqunxd1] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-jabjqunxd1] {
    opacity: .4;
}

.breadcrumb-title[b-jabjqunxd1] {
    margin: 0;
}

.head-muted[b-jabjqunxd1] {
    opacity: .6;
}

.service-list-heading[b-jabjqunxd1] {
    margin-top: 24px;
}
/* /Pages/SystemPages/AnprSettings/AnprSettings.razor.rz.scp.css */
.value-preview[b-llb0rjbk9o] {
    white-space: pre-wrap;
    word-break: break-word;
}

.dialog-col[b-llb0rjbk9o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog-actions[b-llb0rjbk9o] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.json-error[b-llb0rjbk9o] {
    color: var(--kendo-color-error, #a00);
    margin-left: 12px;
}

/* Moved out of an in-file <style> block. ::deep because the <textarea> is rendered by
   TelerikTextArea (CSS isolation's scope attribute never lands on Telerik-internal elements). */
.advanced-script-editor[b-llb0rjbk9o]  textarea {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
}

.settings-value-link[b-llb0rjbk9o] {
    cursor: pointer;
    text-decoration: underline;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--kendo-color-primary, #0d6efd);
}
/* /Pages/SystemPages/AnprSettings/CustomerSettingsView.razor.rz.scp.css */
.customer-settings-view[b-ie3f57lk9q] {
    padding: 8px;
}

.cs-toolbar[b-ie3f57lk9q] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    background: var(--kendo-color-surface-alt, #f6f7f9);
    border-radius: 4px;
}

.toolbar-label[b-ie3f57lk9q] {
    font-weight: 600;
    margin-right: 4px;
}

.toolbar-divider[b-ie3f57lk9q] {
    border-left: 1px solid var(--kendo-color-border, #ccc);
    height: 24px;
    margin: 0 4px;
}

.pointer-label[b-ie3f57lk9q] {
    cursor: pointer;
}

.flex-1[b-ie3f57lk9q] {
    flex: 1;
}

.empty-msg[b-ie3f57lk9q] {
    margin: 12px;
}

.match-counter[b-ie3f57lk9q] {
    font-size: .85em;
    opacity: .65;
    margin-bottom: 6px;
}

.settings-group[b-ie3f57lk9q] {
    border: 1px solid var(--kendo-color-border, #d0d0d0);
    margin-bottom: 8px;
    border-radius: 3px;
    background: var(--kendo-color-surface, #fff);
}

.group-summary[b-ie3f57lk9q] {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 600;
    background: var(--kendo-color-surface-alt, #eef1f4);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.group-count[b-ie3f57lk9q] {
    opacity: .7;
    font-weight: normal;
    font-size: .85em;
}

.cs-table[b-ie3f57lk9q] {
    width: 100%;
    border-collapse: collapse;
    padding: 8px 14px;
}

.setting-row[b-ie3f57lk9q] {
    border-bottom: 1px solid var(--kendo-color-border, #eee);
}

.label-cell[b-ie3f57lk9q] {
    width: 40%;
    padding: 8px;
    vertical-align: top;
}

.label-row[b-ie3f57lk9q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.readonly-badge[b-ie3f57lk9q] {
    font-size: .75em;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--kendo-color-surface-alt, #e0e0e0);
    color: var(--kendo-color-base, #555);
}

.setting-desc[b-ie3f57lk9q] {
    opacity: .6;
    font-size: 0.85em;
    margin-top: 4px;
}

.editor-cell[b-ie3f57lk9q] {
    width: 60%;
    padding: 8px;
    vertical-align: middle;
}

.editor-row[b-ie3f57lk9q] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dialog-text[b-ie3f57lk9q] {
    margin: 0 0 8px 0;
}

.dialog-code[b-ie3f57lk9q] {
    margin: 0;
    font-family: monospace;
    background: var(--kendo-color-surface-alt, #f3f3f3);
    padding: 6px 8px;
    border-radius: 3px;
}

/* Moved out of an in-file <style> block. */
.cs-recent-dot[b-ie3f57lk9q] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kendo-color-warning, #e89400);
    box-shadow: 0 0 0 2px var(--kendo-color-warning-subtle, rgba(232,148,0,.18));
}

/* Custom disclosure triangle for the <details> setting groups. */
.customer-settings-view details > summary[b-ie3f57lk9q]::-webkit-details-marker {
    display: none;
}

.customer-settings-view details > summary[b-ie3f57lk9q]::marker {
    content: '';
}

.customer-settings-view details > summary[b-ie3f57lk9q]::before {
    content: '\25B6'; /* ► */
    font-size: .7em;
    margin-right: 6px;
    transition: transform .15s;
    display: inline-block;
}

.customer-settings-view details[open] > summary[b-ie3f57lk9q]::before {
    transform: rotate(90deg);
}
/* /Pages/SystemPages/AnprSettings/SettingsForm.razor.rz.scp.css */
.settings-form[b-fm6yuf05e1] {
    padding: 8px;
}

.settings-form-table[b-fm6yuf05e1] {
    width: 100%;
    border-collapse: collapse;
}

.settings-table-primary[b-fm6yuf05e1] {
    margin-bottom: 12px;
}

.settings-table-nested[b-fm6yuf05e1] {
    padding: 8px 12px;
}

.settings-row[b-fm6yuf05e1] {
    border-bottom: 1px solid var(--kendo-color-border, #eee);
}

.settings-label-cell[b-fm6yuf05e1] {
    width: 40%;
    padding: 6px 8px;
    vertical-align: top;
}

.settings-desc[b-fm6yuf05e1] {
    opacity: .6;
    font-size: 0.85em;
    margin-top: 2px;
}

.settings-editor-cell[b-fm6yuf05e1] {
    width: 60%;
    padding: 6px 8px;
    vertical-align: middle;
}

.settings-editor-wrap[b-fm6yuf05e1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.settings-group[b-fm6yuf05e1] {
    border: 1px solid var(--kendo-color-border, #d0d0d0);
    margin-bottom: 8px;
    border-radius: 3px;
    background: var(--kendo-color-surface-alt, #fafafa);
}

.settings-group-summary[b-fm6yuf05e1] {
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 600;
    background: var(--kendo-color-surface-alt, #f0f0f0);
    user-select: none;
}

.settings-group-count[b-fm6yuf05e1] {
    opacity: .6;
    font-weight: normal;
    margin-left: 8px;
    font-size: .85em;
}

.settings-empty[b-fm6yuf05e1] {
    margin: 12px;
}

.settings-actions[b-fm6yuf05e1] {
    padding: 12px 8px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Rendered through RenderTreeBuilder, so the compiler adds no scope attribute to it;
   reach it through the scoped wrapper with ::deep. */
.settings-editor-wrap[b-fm6yuf05e1]  .settings-reset {
    margin-left: 8px;
}
/* /Pages/SystemPages/ComponentTemplates/ComponentTemplateView.razor.rz.scp.css */
.title-bar[b-iylmkp9lcg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-nav[b-iylmkp9lcg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-iylmkp9lcg] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-iylmkp9lcg] {
    opacity: .4;
}

.breadcrumb-title[b-iylmkp9lcg] {
    margin: 0;
}

.template-key[b-iylmkp9lcg] {
    opacity: .6;
}

.template-class[b-iylmkp9lcg] {
    margin-left: auto;
    opacity: .6;
}
/* /Pages/SystemPages/CustomerProfile/CustomerProfile.razor.rz.scp.css */
.super-admin-notice[b-70b8hydliu] {
    padding: 16px;
    color: var(--kendo-color-error, #a00);
}

.support-phone-hint[b-70b8hydliu] {
    font-size: .85em;
    opacity: .7;
}

.logo-field[b-70b8hydliu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.logo-pending[b-70b8hydliu] {
    font-size: .85em;
    opacity: .8;
}
/* /Pages/SystemPages/Customers/SysCustomers.razor.rz.scp.css */
.upload-column[b-bgu3lhvrmi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pending-hint[b-bgu3lhvrmi] {
    font-size: .85em;
    opacity: .8;
}

/* ---------------------------------------------------------------------------
   Moved out of the global wwwroot/main.css into this component's scoped
   stylesheet — these rules are page-specific to SysCustomers and only ever
   matched markup owned by this component. Declarations are unchanged.
   The elements they target (the .module-checkbox-list div and its
   .module-checkbox-item labels, inside the FormItem <Template>) are written
   literally in SysCustomers.razor, so they carry the CSS-isolation scope
   attribute and need no ::deep.
   --------------------------------------------------------------------------- */

/* --- SysCustomers modules picker (brui parity): a scrollable checkbox list. Assigned modules
   render as disabled (checked) boxes — add-only, no message. Colours from theme tokens. */
.module-checkbox-list[b-bgu3lhvrmi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 18px;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    border-radius: var(--kendo-border-radius-md, 4px);
    background: var(--kendo-color-base-subtle, var(--kendo-color-base, #f5f5f5));
}
.module-checkbox-item[b-bgu3lhvrmi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
}
.module-checkbox-item.is-locked[b-bgu3lhvrmi] {
    cursor: default;
    opacity: 0.7;
}
/* /Pages/SystemPages/Lots/FreeSlotsEditor.razor.rz.scp.css */
.free-slots-fieldset[b-4duygu7lmu] {
    border: 1px solid var(--kendo-color-border, #d0d0d0);
    margin-top: 8px;
    padding: 8px 12px;
}

.free-slots-legend[b-4duygu7lmu] {
    padding: 0 6px;
}

.status-loading[b-4duygu7lmu] {
    opacity: .6;
    margin: 8px 0;
}

.status-failed[b-4duygu7lmu] {
    color: var(--kendo-color-error, #a00);
    margin: 8px 0;
}

.free-slots-table[b-4duygu7lmu] {
    width: 100%;
    border-collapse: collapse;
}

.cell-label[b-4duygu7lmu] {
    width: 40%;
    padding: 6px 8px;
    vertical-align: middle;
}

.help-text[b-4duygu7lmu] {
    opacity: .6;
    font-size: 0.85em;
    margin-top: 2px;
}

.cell-value[b-4duygu7lmu] {
    width: 60%;
    padding: 6px 8px;
    vertical-align: middle;
}

.value-row[b-4duygu7lmu] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.capacity-info[b-4duygu7lmu] {
    opacity: .6;
}
/* /Pages/SystemPages/Lots/LotView.razor.rz.scp.css */
.title[b-ijna3ucy72] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.breadcrumb[b-ijna3ucy72] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-ijna3ucy72] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-ijna3ucy72] {
    opacity: .4;
}

.breadcrumb-title[b-ijna3ucy72] {
    margin: 0;
}

.breadcrumb-customer[b-ijna3ucy72] {
    opacity: .6;
}

.service-components-heading[b-ijna3ucy72] {
    margin-top: 24px;
}

.bulk-add-actions[b-ijna3ucy72] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Pages/SystemPages/Lots/ServiceView.razor.rz.scp.css */
.title-bar[b-yt0prdo5en] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-nav[b-yt0prdo5en] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-yt0prdo5en] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-yt0prdo5en] {
    opacity: .4;
}

.breadcrumb-title[b-yt0prdo5en] {
    margin: 0;
}

.breadcrumb-id[b-yt0prdo5en] {
    opacity: .6;
}
/* /Pages/SystemPages/Lots/TerminalView.razor.rz.scp.css */
.title-bar[b-zdeagtrkaj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb-nav[b-zdeagtrkaj] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-zdeagtrkaj] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-zdeagtrkaj] {
    opacity: .4;
}

.breadcrumb-title[b-zdeagtrkaj] {
    margin: 0;
}

.breadcrumb-id[b-zdeagtrkaj] {
    opacity: .6;
}

.devices-section[b-zdeagtrkaj] {
    margin-top: 16px;
}

.devices-heading[b-zdeagtrkaj] {
    margin: 8px 0;
}

.device-fieldset[b-zdeagtrkaj] {
    border: 1px solid var(--kendo-color-border, #d0d0d0);
    margin-bottom: 12px;
    padding: 0;
}

.device-legend[b-zdeagtrkaj] {
    padding: 4px 10px;
    cursor: pointer;
}

.device-toggle[b-zdeagtrkaj] {
    opacity: .6;
    margin-left: 8px;
}

.device-settings-pad[b-zdeagtrkaj] {
    padding: 4px 8px;
}

.device-loading-pad[b-zdeagtrkaj] {
    padding: 12px;
}
/* /Pages/SystemPages/Lots/ZoneView.razor.rz.scp.css */
.title-bar[b-u6uhas6lcr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.breadcrumb[b-u6uhas6lcr] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.breadcrumb-link[b-u6uhas6lcr] {
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.breadcrumb-sep[b-u6uhas6lcr] {
    opacity: .4;
}

.breadcrumb-current[b-u6uhas6lcr] {
    margin: 0;
}

.muted[b-u6uhas6lcr] {
    opacity: .6;
}
/* /Pages/SystemPages/Maintenance/Maintenance.razor.rz.scp.css */
/* Status / info messages */
.load-failed-msg[b-cjlect37to] {
    color: var(--kendo-color-error, #a00);
    padding: 10px;
}

.muted-msg[b-cjlect37to] {
    opacity: .6;
    padding: 10px;
}

/* Cards / boxes */
.settings-card[b-cjlect37to] {
    border: 1px solid var(--kendo-color-border, #e3e3e3);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--kendo-color-surface-alt, #fafafa);
}

.info-card[b-cjlect37to] {
    border: 1px solid var(--kendo-color-border, #e3e3e3);
    padding: 12px;
    margin-bottom: 12px;
    background: var(--kendo-color-surface-alt, #fafafa);
    max-width: 840px;
}

.detail-box[b-cjlect37to] {
    border: 1px solid var(--kendo-color-border, #e3e3e3);
    padding: 8px 12px;
    background: var(--kendo-color-surface-alt, #fafafa);
}

.card-heading[b-cjlect37to] {
    margin-top: 0;
}

/* Field grids */
.settings-grid[b-cjlect37to] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 8px 16px;
    align-items: center;
}

.info-grid[b-cjlect37to] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 6px 16px;
}

.detail-grid[b-cjlect37to] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 12px;
    align-items: start;
}

/* Spacing helpers / action rows */
.top-gap[b-cjlect37to] {
    margin-top: 12px;
}

.action-row[b-cjlect37to] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* Changelog details */
.changelog-summary[b-cjlect37to] {
    cursor: pointer;
    font-weight: 600;
}

.changelog-pre[b-cjlect37to] {
    white-space: pre-wrap;
    font-family: inherit;
}

.log-pre[b-cjlect37to] {
    white-space: pre-wrap;
    max-height: 180px;
    overflow: auto;
    margin: 0;
}

/* Misc */
.type-badge[b-cjlect37to] {
    margin-left: 6px;
}

.cell-overdue[b-cjlect37to] {
    color: var(--kendo-color-error, red);
}

/* Dialog layout */
.dialog-col[b-cjlect37to] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.warn-row[b-cjlect37to] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.help-text[b-cjlect37to] {
    opacity: .75;
    margin-top: 4px;
}

.bold-label[b-cjlect37to] {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Moved out of the global wwwroot/main.css (page-specific rules belong here).
   `::deep` is used wherever the selector reaches Telerik-rendered markup
   (.maintenance-tabs is the Class passed to TelerikTabStrip, and
   .k-tabstrip-items* / .k-tabstrip-content / .k-content / .k-grid* are
   Telerik's own elements) — those never receive the Blazor scope attribute.
   The #maintenance wrapper and the .surface / .title divs ARE authored in
   Maintenance.razor, so they need no ::deep.
   --------------------------------------------------------------------------- */

/* Maintenance page — make the TabStrip + its active grid fill the surface to the bottom.
   The grids use Height="100%"; the flex chain below gives that 100% a definite parent so the
   grid data area scrolls internally instead of the whole content leaving a gap at the bottom.
   Scoped to #maintenance so it never touches other pages' shared .surface. */
#maintenance .surface[b-cjlect37to] { display: flex; flex-direction: column; min-height: 0; }
#maintenance .surface > .title[b-cjlect37to] { flex: 0 0 auto; }
#maintenance[b-cjlect37to]  .maintenance-tabs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#maintenance[b-cjlect37to]  .maintenance-tabs > .k-tabstrip-items-wrapper,
#maintenance[b-cjlect37to]  .maintenance-tabs > .k-tabstrip-items { flex: 0 0 auto; }
#maintenance[b-cjlect37to]  .maintenance-tabs > .k-tabstrip-content,
#maintenance[b-cjlect37to]  .maintenance-tabs > .k-content,
#maintenance[b-cjlect37to]  .maintenance-tabs .k-tabstrip-content.k-active {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto;
}
/* Settings form (bordered div) + status <p> keep their natural height; the grid fills the rest. */
#maintenance[b-cjlect37to]  .maintenance-tabs .k-tabstrip-content > div,
#maintenance[b-cjlect37to]  .maintenance-tabs .k-tabstrip-content > p { flex: 0 0 auto; }
#maintenance[b-cjlect37to]  .maintenance-tabs .k-tabstrip-content > .k-grid {
    flex: 1 1 auto; min-height: 0; height: auto !important;
}
#maintenance[b-cjlect37to]  .maintenance-tabs .k-tabstrip-content > .k-grid > .k-grid-content { flex: 1 1 auto; }
/* /Pages/SystemPages/Maintenance/ServerSupportEditor.razor.rz.scp.css */
.form-grid[b-5mzlomfsdh] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.form-actions[b-5mzlomfsdh] {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
/* /Pages/SystemPages/Maintenance/ServerUpdateEditor.razor.rz.scp.css */
.form-grid[b-roiuhcx4gx] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 10px 12px;
    align-items: center;
}

.form-actions[b-roiuhcx4gx] {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
/* /Pages/SystemPages/Permissions/Permissions.razor.rz.scp.css */
/* Import-preset dialog: stacked form + right-aligned action buttons. */
.import-form[b-2sboarej41] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog-actions[b-2sboarej41] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
/* /Pages/SystemPages/Roles/RolePermissionsMatrix.razor.rz.scp.css */
/* Content-layout helpers for the role editor INSIDE a standard TelerikDialog. The dialog chrome
   (overlay, blue titlebar, frame, shadow, footer, and the shared discard-confirm) all come from the
   global Kendo skin in wwwroot/main.css, so nothing here re-implements it — this file only lays out
   the editor's own content and references theme tokens so it re-skins with the rest of the app. */

/* Fill the TelerikWindow's content area and pin the Save/Cancel actions at the bottom while the
   fields + matrix scroll (ComponentView uses the same height:100% + overflow pattern). */
.role-editor-window-body[b-lusa6cd8fm] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.role-editor-scroll[b-lusa6cd8fm] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 14px 16px;
}

.role-editor-window-actions[b-lusa6cd8fm] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--kendo-color-border);
}

/* ── Edit fields (RoleName / SystemType / Customer) above the matrix ── */
.role-editor-fields[b-lusa6cd8fm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.role-editor-fields label[b-lusa6cd8fm] {
    display: block;
    font-weight: 500;
    margin-bottom: 3px;
    font-size: .88rem;
    color: var(--kendo-color-subtle);
}

.role-editor-req[b-lusa6cd8fm] {
    color: var(--kendo-color-error);
}

/* ── Permission matrix ── */
.role-editor-selall[b-lusa6cd8fm] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--kendo-color-border);
}

.role-editor-selall td[b-lusa6cd8fm] {
    text-align: center;
    padding: 2px 0;
}

.role-editor-selall .role-editor-selall-label[b-lusa6cd8fm] {
    text-align: left;
    font-weight: 500;
    padding: 4px 8px;
    color: var(--kendo-color-subtle);
}

.role-editor-module[b-lusa6cd8fm] {
    border: 1px solid var(--kendo-color-border);
    border-radius: var(--kendo-border-radius-md);
    margin-bottom: 8px;
    padding: 6px 10px;
}

.role-editor-module > summary[b-lusa6cd8fm] {
    cursor: pointer;
    font-weight: 500;
}

.role-editor-perm-table[b-lusa6cd8fm] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.role-editor-perm-table thead tr[b-lusa6cd8fm] {
    text-align: center;
    opacity: .65;
    font-weight: 500;
    font-size: .85rem;
}

.role-editor-perm-table thead th:first-child[b-lusa6cd8fm] {
    text-align: left;
}

.role-editor-perm-table td[b-lusa6cd8fm] {
    padding: 4px 0;
}

.role-perm-cell[b-lusa6cd8fm] {
    text-align: center;
    cursor: pointer;
}

/* Radio-look indicator: outer ring, filled inner dot when selected. Telerik cannot supply this
   tri-state per-cell control, so the geometry lives here; colours track the theme tokens. */
.role-perm-dot[b-lusa6cd8fm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid var(--kendo-color-border);
}

.role-perm-dot.on[b-lusa6cd8fm] {
    border-color: var(--kendo-color-primary);
}

.role-perm-dot-inner[b-lusa6cd8fm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kendo-color-primary);
}

/* ── States ── */
.role-editor-error[b-lusa6cd8fm] {
    padding: 12px;
    background: var(--kendo-color-error-subtle);
    border-left: 3px solid var(--kendo-color-error);
    border-radius: var(--kendo-border-radius-md);
}

.role-editor-error-detail[b-lusa6cd8fm] {
    margin-top: 4px;
    font-size: .9em;
    opacity: .85;
}

.role-editor-empty[b-lusa6cd8fm] {
    padding: 16px;
    text-align: center;
    opacity: .6;
}
/* /Pages/SystemPages/SettingsTemplates/SettingsTemplates.razor.rz.scp.css */
.title-suffix[b-tugr51cgak] {
    opacity: .6;
    margin-left: 8px;
}

.field-label[b-tugr51cgak] {
    display: block;
    margin-bottom: 4px;
}

.required-mark[b-tugr51cgak] {
    color: var(--kendo-color-error, #a00);
}

.dialog-actions[b-tugr51cgak] {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ==========================================================================================
   Moved here out of the global wwwroot/main.css. These three rules belong to the Translations
   component (they also live in Translations.razor.css), but the Barrier-messages tab of THIS
   page writes .translations-toolbar / .translations-toolbar-row in its OWN markup, above the
   embedded <Translations Scoped> editor. CSS isolation scopes per component, so the copy in
   Translations.razor.css cannot style markup written here — the duplication is intentional.
   Declarations are byte-identical to the originals; keep the two copies in sync.
   ========================================================================================== */
.translations-toolbar[b-tugr51cgak] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.translations-toolbar-row[b-tugr51cgak] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.translations-toolbar-row label[b-tugr51cgak] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--kendo-color-base-emphasis, #444);
}
/* /Pages/SystemPages/Theme/ThemeBuilder.razor.rz.scp.css */
#logo-preview[b-0yanm30p9r],
#menu-logo-preview[b-0yanm30p9r] {
	width: 3vw;
	height:8vh;
	padding: 3vh;
	margin-top: 1vw;
	border-radius: min(2vh,2vw);
	background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, var(--kendo-color-primary) 5px, var(--kendo-color-primary) 10px), repeating-linear-gradient(to right, var(--kendo-color-base), var(--kendo-color-base) 5px, var(--kendo-color-primary) 5px, var(--kendo-color-primary) 10px);
}
.preview-image[b-0yanm30p9r] {
	height: 7vh;
	padding-bottom: 1vh;
	display: block;
}
div.preview-image[b-0yanm30p9r] {
	background-color: var(--kendo-color-surface);
}
#menu-logo-preview[b-0yanm30p9r]  svg {
	width: 100%;
	height: 100%;
}
.hint[b-0yanm30p9r] {
	padding-top: 0.5vh;
	display: block;
	color: var(--layout-color-primary)
}
.left[b-0yanm30p9r] {
	display: flex;
	gap: 1vw;
}
.right[b-0yanm30p9r] {
	margin-left: auto;
	display: flex;
	align-items: center;
}
.right label[b-0yanm30p9r]
{
	padding-left: 2vw;
	padding-right: 0.5vw;
}
/* /Pages/SystemPages/TlsCertificates/ManagementForm.razor.rz.scp.css */
.title[b-rkx7u8lx7h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hint[b-rkx7u8lx7h] {
    padding-top: 0.2vh;
    display: block;
    color: var(--layout-color-primary);
}

[b-rkx7u8lx7h] .k-upload .k-file-icon-wrapper {
    display: none;
}

.upload-section[b-rkx7u8lx7h] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.upload-section .text-danger[b-rkx7u8lx7h] {
    margin-top: 0.5rem;
}

.upload-section-buttons[b-rkx7u8lx7h] {
    margin-top: 1rem;
}

.upload-error-message[b-rkx7u8lx7h] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.success-message[b-rkx7u8lx7h] {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.upload-key-row[b-rkx7u8lx7h] {
    display: flex;
    gap: 4px;
    align-items: center;
}

.upload-key-input[b-rkx7u8lx7h] {
    width: 100%;
}
/* /Pages/SystemPages/TlsCertificates/TlsCertificates.razor.rz.scp.css */
[b-32bpgxtgpl] .k-grid .k-sort-icon,
[b-32bpgxtgpl] .k-grid .k-sort-order {
    display: none !important;
}

[b-32bpgxtgpl] .k-grid td .k-numerictextbox,
[b-32bpgxtgpl] .k-grid th .k-numerictextbox {
    width: 100% !important;
    min-width: unset !important;
}

[b-32bpgxtgpl] td.k-checkbox-cell,
[b-32bpgxtgpl] th.k-checkbox-cell {
    padding: 0 4px !important;
    text-align: center !important;
}

.expiry-badge[b-32bpgxtgpl] {
    display: block;
    text-align: center;
}

.expiry-badge-none[b-32bpgxtgpl] {
    background-color: rgba(13, 110, 253, 0.25);
    color: #084298;
    border-color: rgba(13, 110, 253, 0.45);
}

.expiry-badge-critical[b-32bpgxtgpl] {
    background-color: rgba(220, 53, 69, 0.25);
    color: #842029;
    border-color: rgba(220, 53, 69, 0.45);
}

.expiry-badge-warning[b-32bpgxtgpl] {
    background-color: rgba(253, 126, 20, 0.25);
    color: #7d3800;
    border-color: rgba(253, 126, 20, 0.45);
}

.expiry-badge-caution[b-32bpgxtgpl] {
    background-color: rgba(255, 193, 7, 0.25);
    color: #664d03;
    border-color: rgba(255, 193, 7, 0.45);
}

.expiry-badge-ok[b-32bpgxtgpl] {
    background-color: rgba(25, 135, 84, 0.25);
    color: #0a3622;
    border-color: rgba(25, 135, 84, 0.45);
}
/* /Pages/SystemPages/Translations/Translations.razor.rz.scp.css */
.import-col[b-06dpcsup7t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scroll-box[b-06dpcsup7t] {
    max-height: 120px;
    overflow: auto;
}

.plain-list[b-06dpcsup7t] {
    margin: 4px 0;
    padding-left: 18px;
}

.dialog-actions[b-06dpcsup7t] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.translations-locale-missing-badge[b-06dpcsup7t] {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: .75em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--kendo-color-warning, #b26a00);
    background: var(--kendo-color-warning-subtle, #fff4e5);
    border: 1px solid var(--kendo-color-warning, #b26a00);
}

/* ==========================================================================================
   Moved here out of the global wwwroot/main.css (page-specific styles belong in the owning
   component's isolated stylesheet). Selectors and declarations are unchanged. Every element
   below is written literally in Translations.razor — including the markup inside the grid
   column <Template>s and the TelerikWindow <WindowContent>s, which is compiled into THIS
   component and therefore carries the scope attribute — so no ::deep is needed.
   SettingsTemplates.razor embeds this component (Scoped) for its Barrier-messages tab; that
   markup still belongs to Translations.razor, so these rules keep working there.
   ========================================================================================== */

/* Translations page (System → Translations).
   The original grid had one column per locale (17 of them) which became unreadable as the
   number of supported languages grew. The redesign uses a focused single-primary-language
   view plus a side dialog for editing every locale at once. Styles below cover:
     - the inline toolbar (language picker, value search, missing/defaulted toggles)
     - row-level decoration (defaulted-to-English, missing-primary highlights)
     - the all-locales side editor's vertical stack of textareas
   NOTE: the row-level decoration rules (.k-grid tr.translations-defaulted-row /
   .translations-missing-row) stay in main.css — that class lands on the Telerik-rendered <tr>
   via OnRowRender, i.e. on DOM this component's scope attribute never reaches.
*/
.translations-toolbar[b-06dpcsup7t] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.translations-toolbar-row[b-06dpcsup7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.translations-toolbar-row label[b-06dpcsup7t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--kendo-color-base-emphasis, #444);
}

.translations-toolbar-hint[b-06dpcsup7t] {
    font-size: 0.85rem;
    color: var(--kendo-color-warning, #b26a00);
    font-style: italic;
}

/* --- Status filter chips (All / Missing / Defaulted) — a segmented control that replaces the
   raw checkboxes. All colours come from the Kendo theme tokens so the Theme Editor owns them. */
.trans-chips[b-06dpcsup7t] {
    display: inline-flex;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    overflow: hidden;
}
.trans-chip[b-06dpcsup7t] {
    appearance: none;
    border: 0;
    border-right: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    background: var(--kendo-color-surface, #fafafa);
    color: var(--kendo-color-on-base, #3d3d3d);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    padding: 6px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.trans-chip:last-child[b-06dpcsup7t] { border-right: 0; }
.trans-chip:hover:not(:disabled)[b-06dpcsup7t] { background: var(--kendo-color-base-hover, #ebebeb); }
.trans-chip[aria-pressed="true"][b-06dpcsup7t] {
    background: var(--kendo-color-primary, #3E5394);
    color: var(--kendo-color-on-primary, #ffffff);
}
/* Active chip on hover — keep the primary (dark) ground so the on-primary (white) text stays legible.
   Higher specificity than the generic :hover so it doesn't fall back to the light base-hover ground
   (which produced white-on-white). */
.trans-chip[aria-pressed="true"]:hover:not(:disabled)[b-06dpcsup7t] {
    background: var(--kendo-color-primary-hover, #33457A);
    color: var(--kendo-color-on-primary, #ffffff);
}
.trans-chip:disabled[b-06dpcsup7t] { opacity: 0.5; cursor: not-allowed; }
.trans-chip .cnt[b-06dpcsup7t] {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    opacity: 0.72;
}
.trans-chip[aria-pressed="true"] .cnt[b-06dpcsup7t] { opacity: 0.92; }

/* --- Per-language completeness counts (filled / total · N missing). No progress bar — see the
   Translations page for why (always ~100% on a translated corpus, so it conveyed nothing). */
.trans-stat[b-06dpcsup7t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--kendo-color-on-base, #3d3d3d);
}
.trans-stat .num[b-06dpcsup7t] { font-variant-numeric: tabular-nums; font-weight: 600; }
.trans-stat .miss[b-06dpcsup7t] { color: var(--kendo-color-warning, #b26a00); }

/* --- Per-row status dot + placeholder-mismatch flag in the leading status column.
   Both live in a GridColumn <Template>, which is compiled into this component, so the scope
   attribute is emitted on them even though they render inside the Telerik grid. */
.trans-dot[b-06dpcsup7t] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
}
.trans-dot.done[b-06dpcsup7t] { background: var(--kendo-color-success, #37b400); }
.trans-dot.missing[b-06dpcsup7t] { background: var(--kendo-color-warning, #ffc000); }
.trans-dot.defaulted[b-06dpcsup7t] { background: var(--kendo-color-border-alt, rgba(0, 0, 0, 0.22)); }
.trans-dot.warn[b-06dpcsup7t] { background: var(--kendo-color-error, #f31700); }
.trans-warn-icon[b-06dpcsup7t] {
    color: var(--kendo-color-error, #f31700);
    font-weight: 700;
    margin-left: 6px;
    cursor: help;
}

/* --- Small inline loading spinner (toolbar) — shown while the grid fetches, instead of the old
   full-page overlay. Ring colour = the theme primary. */
.trans-spinner[b-06dpcsup7t] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--kendo-color-border, rgba(0, 0, 0, 0.15));
    border-top-color: var(--kendo-color-primary, #3E5394);
    border-radius: 50%;
    vertical-align: middle;
    /* Always reserve the 16px slot so the toolbar never reflows; hidden until a fetch runs. */
    visibility: hidden;
}
.trans-spinner.is-busy[b-06dpcsup7t] {
    visibility: visible;
    animation: trans-spin-b-06dpcsup7t 0.7s linear infinite;
}
/* @keyframes are not scoped by CSS isolation (the name stays global), so the animation above
   still resolves after the move. */
@keyframes trans-spin-b-06dpcsup7t { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trans-spinner.is-busy[b-06dpcsup7t] { animation: none; } }

/* All-locales side editor — vertical stack inside the TelerikWindow. */
.translations-all-editor[b-06dpcsup7t] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.translations-all-editor-row label[b-06dpcsup7t] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
}

.translations-locale-label[b-06dpcsup7t] {
    font-family: monospace;
    color: var(--kendo-color-base-emphasis, #333);
}

.translations-all-editor-row.translations-locale-missing .translations-locale-label[b-06dpcsup7t] {
    color: var(--kendo-color-subtle, #888);
    font-style: italic;
}

/* --- Migration-code generator (innerAnalysisDetails) -------------------------------------
   Selection checkboxes + the read-only SQL output panel. Every colour comes from a Kendo theme
   token so the Theme Editor owns them (accent-color tints the checkboxes with the palette). */
.trans-select-all[b-06dpcsup7t],
.trans-select-row[b-06dpcsup7t] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--kendo-color-primary, #3E5394);
    vertical-align: middle;
}

/* The companion rule `.trans-mig-window .k-window-content { display: flex; flex-direction: column; }`
   deliberately STAYS in wwwroot/main.css: `.trans-mig-window` is the Class of a TelerikWindow, so
   both it and .k-window-content are Telerik-rendered — and the window renders outside this
   component's DOM subtree (under TelerikRootComponent), so neither a plain selector nor ::deep
   can reach it from an isolated stylesheet. Same reason .k-window.component-window-top is global.
   The .trans-migration-* rules below are fine: those elements are written in this .razor. */
.trans-migration-output[b-06dpcsup7t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0; /* allow the textarea child to shrink/grow within the flex column */
}
.trans-migration-hint[b-06dpcsup7t] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--kendo-color-subtle, #6b7280);
}
.trans-migration-skipped[b-06dpcsup7t] {
    color: var(--kendo-color-warning, #b26a00);
    font-weight: 600;
}
.trans-migration-textarea[b-06dpcsup7t] {
    width: 100%;
    box-sizing: border-box;
    /* Grow to fill the modal height instead of a fixed min-height that left white space below. */
    flex: 1 1 auto;
    min-height: 0;
    font-family: var(--kendo-font-family-monospace, "Consolas", "Courier New", monospace);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    background: var(--kendo-color-base, #f5f5f5);
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.12));
    border-radius: 2px;
    padding: 10px;
    resize: vertical;
    white-space: pre;
    overflow: auto;
}

/* "value = key" rows: filled on paper, untranslated in practice. Same weight as the missing
   counter but a distinct colour so the two are not read as one number. */
.trans-stat .keyed[b-06dpcsup7t] {
    color: var(--kendo-color-error, #f31700);
    margin-left: 0.35rem;
}

.trans-dot.keyed[b-06dpcsup7t] { background: var(--kendo-color-error, #f31700); }
/* /Pages/SystemPages/Users/SysUsers.razor.rz.scp.css */
/* Inline company-picker editor (grid popup): dropdown + inline-create button. */
.company-editor[b-hzlbjsfnt6] {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

/* Paired password inputs (new + verify) in the grid popup editor. */
.password-editor[b-hzlbjsfnt6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Muted placeholder text in grid cell templates (All lots / — / hints). */
.muted[b-hzlbjsfnt6] {
    opacity: .6;
}

/* User-settings dialog: vertical layout filling the window content. */
.settings-body[b-hzlbjsfnt6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.settings-scroll[b-hzlbjsfnt6] {
    flex: 1 1 auto;
    overflow: auto;
    padding: 6px 8px;
}

.settings-empty[b-hzlbjsfnt6] {
    padding: 16px;
    opacity: .6;
    text-align: center;
}

.settings-table[b-hzlbjsfnt6] {
    width: 100%;
    border-collapse: collapse;
}

.settings-row[b-hzlbjsfnt6] {
    border-bottom: 1px solid var(--kendo-color-border);
}

.settings-label-cell[b-hzlbjsfnt6] {
    width: 42%;
    padding: 8px 10px;
    vertical-align: top;
}

.setting-desc[b-hzlbjsfnt6] {
    font-size: .82rem;
    color: var(--kendo-color-subtle);
    margin-top: 2px;
}

.settings-value-cell[b-hzlbjsfnt6] {
    width: 58%;
    padding: 8px 10px;
    vertical-align: top;
}

.settings-footer[b-hzlbjsfnt6] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid var(--kendo-color-border);
}

/* Impersonate/support dialog content. */
.impersonate-content[b-hzlbjsfnt6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 4px;
}

.token-code[b-hzlbjsfnt6] {
    word-break: break-all;
}

/* Import dialog content. */
.import-content[b-hzlbjsfnt6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 4px;
}

.import-error[b-hzlbjsfnt6] {
    color: var(--kendo-color-error);
}

.dialog-actions[b-hzlbjsfnt6] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Pages/SystemPages/UsersLog/UsersLog.razor.rz.scp.css */
/* Moved out of the global wwwroot/main.css (page-specific styling belongs with the
   page). Declarations are unchanged from the global originals. */

/* UsersLog (Action Log) — toolbar quick-filters and per-action row tinting.
   The grid renders ~100 rows of mostly-similar text; colour-coding by action class
   lets operators visually scan for inserts/updates/deletes/auth without reading the
   Action column. Backgrounds are deliberately light so dark text stays readable. */
.users-log-toolbar[b-aedphnfmun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    width: 100%;
}

.users-log-toolbar-group[b-aedphnfmun] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.users-log-toolbar-label[b-aedphnfmun] {
    font-weight: 600;
    color: var(--kendo-color-base-emphasis, #444);
    margin-right: 4px;
}
/* /Pages/User/EditUser.razor.rz.scp.css */
[b-khpfa8pobt]  form
{
    padding: MIN(2vw, 2vh);
}
/* /Shared/ComponentSettingsTab.razor.rz.scp.css */
.loading-box[b-eweitqxqp1] {
    padding: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    opacity: .7;
}
/* /Shared/ComponentView.razor.rz.scp.css */
.parent-name[b-0lfn0s74v3] {
    font-weight: 600;
}

.crumb-sep[b-0lfn0s74v3] {
    opacity: .5;
    margin: 0 6px;
}

.crumb-meta[b-0lfn0s74v3] {
    opacity: .6;
    margin-left: 8px;
}

.window-body[b-0lfn0s74v3] {
    height: 100%;
    overflow: auto;
}

.new-service-bar[b-0lfn0s74v3] {
    padding: 6px 8px;
}

.new-service-form[b-0lfn0s74v3] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dialog-actions[b-0lfn0s74v3] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
/* /Shared/ComponentWindowStack.razor.rz.scp.css */
.component-stack-toolbar[b-2k8sdtufp6] {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 20000;
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--kendo-color-surface-alt, #fff);
    padding: 6px 10px;
    border-radius: 4px;
    /* Shadow tint kept as a literal rgba: no semantic Kendo color token maps to a
       drop-shadow (mapping it to --kendo-color-base would recolor the shadow when the
       token is present). */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.stack-count[b-2k8sdtufp6] {
    font-size: .85rem;
    opacity: .75;
}
/* /Shared/ConfirmDiscardDialog.razor.rz.scp.css */
.discard-msg[b-xd041fhxy0] {
    margin: 0;
}
/* /Shared/FormValidationNotice.razor.rz.scp.css */
.validation-notice[b-l5shta0u3y] {
    border: 1px solid #d9534f;
    border-left-width: 4px;
    background: #fdf3f3;
    padding: 6px 10px;
    margin-bottom: 10px;
}

.validation-notice ul[b-l5shta0u3y] {
    margin: 0;
    padding-left: 18px;
}

.validation-notice li[b-l5shta0u3y] {
    color: #b02a37;
    font-size: 0.9em;
    line-height: 1.4;
}
/* /Shared/GridColumnChooser.razor.rz.scp.css */
.chooser-anchor[b-toz1jvy6dx] {
    display: inline-flex;
}

.chooser[b-toz1jvy6dx] {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.chooser-head[b-toz1jvy6dx],
.chooser-foot[b-toz1jvy6dx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
}

.chooser-head[b-toz1jvy6dx] {
    justify-content: space-between;
    border-bottom: 1px solid var(--kendo-color-border, #e0e0e0);
}

.chooser-title[b-toz1jvy6dx] {
    font-weight: 600;
}

.chooser-foot[b-toz1jvy6dx] {
    border-top: 1px solid var(--kendo-color-border, #e0e0e0);
}

.chooser-list[b-toz1jvy6dx] {
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    overflow-y: auto;
}

.chooser-row[b-toz1jvy6dx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .75rem;
    user-select: none;
}

.chooser-row:hover[b-toz1jvy6dx] {
    background: var(--kendo-color-base-hover, #f0f0f0);
}

.chooser-handle[b-toz1jvy6dx] {
    display: inline-flex;
    color: var(--kendo-color-subtle, #666);
    cursor: grab;
}

.chooser-row-pinned .chooser-handle[b-toz1jvy6dx] {
    cursor: default;
    opacity: .3;
}

/* The dragged row fades; a line on the hovered row marks the landing edge. */
.chooser-row-dragging[b-toz1jvy6dx] {
    opacity: .4;
}

.chooser-row-drop-above[b-toz1jvy6dx] {
    box-shadow: inset 0 2px 0 0 var(--kendo-color-primary, #3f51b5);
}

.chooser-row-drop-below[b-toz1jvy6dx] {
    box-shadow: inset 0 -2px 0 0 var(--kendo-color-primary, #3f51b5);
}

.chooser-label[b-toz1jvy6dx] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Shared/GroupOccupation.razor.rz.scp.css */
.group-occupation-banner[b-xvel0oxokl] {
    background-color: #d1e7fd;
    border: 1px solid #9ec5fe;
    color: #084298;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.8rem;
}

.group-occupation-banner.denied[b-xvel0oxokl] {
    background-color: #f8d7da;
    border-color: #f1aeb5;
    color: #58151c;
}

.group-occupation-banner .headline[b-xvel0oxokl] {
    font-weight: 600;
    margin-bottom: 4px;
}

.group-occupation-banner .hint[b-xvel0oxokl] {
    margin-top: 4px;
    opacity: 0.85;
}

.group-occupation-notice[b-xvel0oxokl] {
    padding: 8px 12px;
    font-size: 0.8rem;
    opacity: 0.75;
}
/* /Shared/InlineCreateCompany.razor.rz.scp.css */
.form-fields[b-l4ua10v9wc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.required-mark[b-l4ua10v9wc] {
    color: var(--kendo-color-error, #a00);
}

.error-text[b-l4ua10v9wc] {
    color: var(--kendo-color-error, #a00);
    margin: 0;
}

.form-actions[b-l4ua10v9wc] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
/* /Shared/MainLayout.razor.rz.scp.css */
#main-layout[b-vszgjxwyxk] 
{
    background-color: var(--layout-color-background);
}
#main-layout[b-vszgjxwyxk],
[b-vszgjxwyxk] .k-drawer-container,
[b-vszgjxwyxk] .k-drawer-content {
    height: 100vh;
}
[b-vszgjxwyxk] .k-drawer {
	background-color: var(--layout-color-primary);
	color: var(--kendo-color-on-primary);
	border-radius: MIN(0.5vw, 1vh);
	margin: MIN(0.7vh, 0.4vw) MIN(1.4vh, 0.8vw) MIN(0.7vh, 0.4vw) MIN(0.7vh, 0.4vw);
	padding: 0.5vh 0 0.5vh 0;
}
[b-vszgjxwyxk] #drawer-logo,
[b-vszgjxwyxk] #drawer-logo:active,
[b-vszgjxwyxk] #drawer-logo:hover,
[b-vszgjxwyxk] #drawer-logofocus {
    padding: 5vh 0 3vh 0;
    width: 100%;
    border: 0;
    outline: 0;
    transition: padding 0.3s;
}
[b-vszgjxwyxk] #drawer-logo span{
    width: auto;
    height: auto;
}
	[b-vszgjxwyxk] #drawer-logo svg {
		width: 4vh;
		height: 4vh;
		flex: 1;
		fill: var(--kendo-color-on-primary);
		transition: width 0.3s,height 0.3s;
	}
[b-vszgjxwyxk] .k-drawer-expanded #drawer-logo
{
    padding-top:2vh;
}
[b-vszgjxwyxk] .k-drawer-expanded #drawer-logo svg {
    width: 7vh;
    height: 7vh;
}
[b-vszgjxwyxk] .k-drawer-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}
[b-vszgjxwyxk] .k-drawer-wrapper {
   
}

:: deep .k-drawer-mini .k-drawer-wrapper[b-vszgjxwyxk] {
   width: calc(var(--kendo-spacing-4, 1rem)* 2 + 25px);
}
#menubar[b-vszgjxwyxk] {
    flex: 1;
}
#drawer-bottom[b-vszgjxwyxk] {
    padding-bottom: 2vh;
    margin:0 auto;
}
#drawer-bottom[b-vszgjxwyxk]  button 
{
    display: block;
    background: transparent;
    border-color: var(--layout-color-third);
    color: var(--kendo-color-on-primary);
    width: 90%;
    margin: 1vh 1vh;
    text-align: left;
    padding: 1vh 2vh 0.5vh 2vh;
    border-radius: MIN(0.5vw, 1vh);
}
#drawer-bottom[b-vszgjxwyxk]  button:hover
{
    border-color:var(--kendo-color-on-primary);
}
#drawer-bottom[b-vszgjxwyxk]  .separator
{
    border-left: 1px var(--layout-color-third) solid;
    padding-left: 1vh;
    margin-left: 1vh;
}
#drawer-bottom[b-vszgjxwyxk]  .k-button-text 
{
    width: 90%;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
}
#drawer-bottom[b-vszgjxwyxk]  .k-button-icon
{
    float:left;
}
[b-vszgjxwyxk] .k-drawer-mini #drawer-bottom .k-button-text {
    display:none;
}
[b-vszgjxwyxk] .k-drawer-mini #drawer-bottom button {
    margin: 1vh auto 1vh auto;
    padding: 1vh 1vh 1.3vh 1vh;
}
#menubar[b-vszgjxwyxk]  .k-level-0.k-drawer-item
{
    border-inline:0.3vw solid transparent;
}
#menubar[b-vszgjxwyxk]  .group-selected.k-drawer-item {
	border-left-color: var(--menu-selection-color);
}
[b-vszgjxwyxk] .k-drawer-mini #menubar .k-level-1
{
    display:none;
}
[b-vszgjxwyxk] .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    box-sizing: border-box;
}
[b-vszgjxwyxk] .error-content .error-icon {
    font-size: 4rem;
    color: var(--kendo-color-primary);
}
[b-vszgjxwyxk] .error-content h3 {
    margin: 0;
    font-size: 1.6rem;
}
[b-vszgjxwyxk] .error-content .error-message {
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    font-size: 1rem;
    width: 100%;
    max-width: 60%;
    word-break: break-word;
    background: var(--kendo-color-surface, #fafafa);
    padding: 1.5rem 2rem;
    border-radius: 6px;
    border-left: 4px solid var(--kendo-color-primary);
    line-height: 1.6;
}
[b-vszgjxwyxk] .error-content .error-hint {
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    font-size: 0.95rem;
    opacity: 0.7;
}
[b-vszgjxwyxk] .error-content .error-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
/* /Shared/PlateNumberTags.razor.rz.scp.css */
.plate-tags[b-vyni0zabwg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 6px;
    cursor: text;
    border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.16));
    border-radius: 4px;
    background-color: var(--kendo-color-surface-alt, #fff);
}

.plate-tags:focus-within[b-vyni0zabwg] {
    border-color: var(--kendo-color-primary, #3f51b5);
}

.plate-tag[b-vyni0zabwg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--kendo-color-primary, #3f51b5);
    border-radius: 4px;
    background-color: var(--kendo-color-primary-subtle, #e9ecf8);
    color: var(--kendo-color-primary, #3f51b5);
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.5;
    white-space: nowrap;
}

.plate-tag.invalid[b-vyni0zabwg] {
    border-color: #d9534f;
    background-color: #f8d7da;
    color: #a94442;
}

.plate-tag-remove[b-vyni0zabwg] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.65;
}

.plate-tag-remove:hover[b-vyni0zabwg] {
    opacity: 1;
}

.plate-tags-input[b-vyni0zabwg] {
    flex: 1 1 60px;
    min-width: 60px;
    border: none;
    outline: none;
    background: none;
    padding: 2px;
    font: inherit;
    text-transform: uppercase;
}
/* /Shared/PosLotsTab.razor.rz.scp.css */
.toolbar-actions[b-6g729bwxr6] {
    display: flex;
    gap: 8px;
    align-items: center;
}
/* /Shared/WsStatusIndicator.razor.rz.scp.css */
[b-nuskjhtcul] #ws-button.Connected svg,
.state.Connected[b-nuskjhtcul]  svg {
    fill: #28a745;
}

[b-nuskjhtcul] #ws-button.Connecting svg,
.state.Connecting[b-nuskjhtcul]  svg {
    fill: #ffc107;
}

[b-nuskjhtcul] #ws-button.Disconnected svg,
.state.Disconnected[b-nuskjhtcul]  svg {
    fill: #6c757d;
}

[b-nuskjhtcul] #ws-button.Error svg,
.state.Error[b-nuskjhtcul]  svg {
    fill: #dc3545;
}

#log-container[b-nuskjhtcul] {
    min-width: 90vw;
    max-height: 80vh;
}

.ws-connection[b-nuskjhtcul] {
    padding-bottom: 1vh;
}

.ws-log[b-nuskjhtcul] {
    background-color: var(--layout-color-background);
    padding: 1vh 1vw;
    border-radius: MIN(0.5vh, 0.5vw);
    max-height: 30vh;
    min-height: 30vh;
    overflow-y: scroll;
    width: 90vw;
}

.ws-log div[b-nuskjhtcul] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-log .Log[b-nuskjhtcul] {
    color: var(--kendo-color-primary-active);
    font-weight: bold;
}

.ws-log .Error[b-nuskjhtcul] {
    color: #dc3545;
    font-weight: bold;
}

.ws-log .Sent[b-nuskjhtcul] {
    color: var(--layout-color-primary);
    font-weight: bold;
}

.ws-title[b-nuskjhtcul] {
    padding: min(1vw, 1vh);
    display: flex;
    align-items: center;
    gap: 0.4vw;
}

.ws-title .state[b-nuskjhtcul] {
    padding-right: 0.5vw;
}

.ws-toolbar[b-nuskjhtcul] {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    padding-bottom: 1vh;
}

.ws-filters[b-nuskjhtcul] {
    display: flex;
    gap: 0.3vw;
    flex-shrink: 0;
}

.ws-subscribe[b-nuskjhtcul] {
    padding: 0.3vh 0;
}

.ws-subscribe-types[b-nuskjhtcul] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2vw;
    max-height: 20vh;
    overflow-y: auto;
    padding-bottom: 0.5vh;
}

.ws-subscribe-types[b-nuskjhtcul]  .k-button {
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    min-width: 0;
    line-height: 1.2;
}

.ws-subscribe-actions[b-nuskjhtcul] {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    padding-top: 0.3vh;
}

.ws-presets[b-nuskjhtcul] {
    display: flex;
    align-items: flex-start;
    gap: 0.4vw;
    padding-top: 0.3vh;
}

.ws-presets[b-nuskjhtcul]  .k-textarea {
    flex: 1;
    min-width: 30vw;
}

.ws-flow[b-nuskjhtcul] {
    padding: 0.5vh 0;
}

.ws-flow-toolbar[b-nuskjhtcul] {
    display: flex;
    gap: 0.4vw;
    padding-bottom: 0.5vh;
}

.ws-flow-empty[b-nuskjhtcul] {
    color: #888;
    padding: 3vh 2vw;
    text-align: center;
    font-style: italic;
}

.ws-flow-svg[b-nuskjhtcul] {
    width: 90vw;
    height: 50vh;
    background: var(--layout-color-background);
    border-radius: MIN(0.5vh, 0.5vw);
}

.flow-edge-label[b-nuskjhtcul] {
    pointer-events: none;
    font-size: 10px;
    color: #ccc;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;
    transition: color 0.3s, text-shadow 0.3s;
}

.flow-edge-active[b-nuskjhtcul] {
    color: #00ff88;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
    font-weight: bold;
}

.flow-node-label[b-nuskjhtcul] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    pointer-events: none;
}

.flow-node-name[b-nuskjhtcul] {
    font-size: 11px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    word-break: break-word;
    line-height: 1.2;
}

.flow-node-time[b-nuskjhtcul] {
    font-size: 9px;
    color: #888;
}

.flow-broadcast[b-nuskjhtcul] {
    color: #ffc107;
    font-style: italic;
}