/* /Components/ApprovalTrafficLightBlock.razor.rz.scp.css */
/* One-row dashboard summary; the panel chrome comes from the global .dash-panel classes. */
.atl-head[b-l9ry7ichqk] {
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: none;
}

.atl-period[b-l9ry7ichqk] {
    font-size: 11px;
    color: var(--st-subtle);
}

.atl-counter[b-l9ry7ichqk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.atl-count[b-l9ry7ichqk] {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-text);
}

.atl-label[b-l9ry7ichqk] {
    font-size: 12px;
    color: var(--st-muted);
}
/* /Components/AssignCustomerGroupDialog.razor.rz.scp.css */
/* Three choices side by side (the shared .st-radio-group defaults to two columns). */
.assign-modes[b-w2tlijy5ro] { grid-template-columns: repeat(3, 1fr); }
/* /Components/BugReportWidget.razor.rz.scp.css */
.bug-fab[b-1q1v5mir74] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--st-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(74, 118, 249, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: grab;
    touch-action: none;
}

.bug-fab:active[b-1q1v5mir74] {
    cursor: grabbing;
}

.bug-fab:hover[b-1q1v5mir74] {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(74, 118, 249, 0.5);
}

.bug-panel[b-1q1v5mir74] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-height: 520px;
    z-index: 1000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bug-panel-header[b-1q1v5mir74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--st-primary);
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.bug-close-btn[b-1q1v5mir74] {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    opacity: 0.8;
}

.bug-close-btn:hover[b-1q1v5mir74] {
    opacity: 1;
}

.bug-chat-area[b-1q1v5mir74] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
}

.bug-msg[b-1q1v5mir74] {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.bug-msg-ai[b-1q1v5mir74] {
    align-self: flex-start;
    background: #F1F5F9;
    color: #334155;
}

.bug-msg-user[b-1q1v5mir74] {
    align-self: flex-end;
    background: var(--st-primary);
    color: white;
}

.bug-thinking[b-1q1v5mir74] {
    opacity: 0.6;
    font-style: italic;
}

.bug-summary-card[b-1q1v5mir74] {
    background: var(--st-bg);
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 4px;
}

.bug-summary-card h4[b-1q1v5mir74] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    margin: 0 0 8px 0;
}

.bug-summary-field[b-1q1v5mir74] {
    margin-bottom: 6px;
    font-size: 12px;
    color: #475569;
}

.bug-summary-field p[b-1q1v5mir74] {
    margin: 2px 0 0 0;
}

.bug-label[b-1q1v5mir74] {
    font-weight: 600;
    color: #334155;
}

.bug-severity[b-1q1v5mir74] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.bug-severity-critical[b-1q1v5mir74] { background: #FEE2E2; color: var(--st-error); }
.bug-severity-high[b-1q1v5mir74] { background: #FED7AA; color: #EA580C; }
.bug-severity-medium[b-1q1v5mir74] { background: #FEF9C3; color: #CA8A04; }
.bug-severity-low[b-1q1v5mir74] { background: #F1F5F9; color: var(--st-muted); }

.bug-submit-btn[b-1q1v5mir74] {
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: var(--st-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.bug-submit-btn:hover[b-1q1v5mir74] { background: #3B63D9; }
.bug-submit-btn:disabled[b-1q1v5mir74] { opacity: 0.6; cursor: not-allowed; }

.bug-success[b-1q1v5mir74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.bug-success p[b-1q1v5mir74] {
    color: #10B981;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.bug-input-area[b-1q1v5mir74] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #E2E8F0;
}

.bug-input[b-1q1v5mir74] {
    flex: 1;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.bug-input:focus[b-1q1v5mir74] {
    border-color: var(--st-primary);
}

.bug-input:disabled[b-1q1v5mir74] {
    background: var(--st-bg);
    cursor: not-allowed;
}

.bug-send-btn[b-1q1v5mir74] {
    background: var(--st-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.bug-send-btn:hover[b-1q1v5mir74] { background: #3B63D9; }
.bug-send-btn:disabled[b-1q1v5mir74] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Checklists/ChecklistItemVisibilityList.razor.rz.scp.css */
/* Item rows with an eye toggle (location tab + checklist picker). Every colour is a token. */

.civ[b-6jxnwgnoo8] {
    padding: 4px 0;
}

.civ-item[b-6jxnwgnoo8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 8px 2px 16px;
    min-height: 36px;
}

.civ-item + .civ-item[b-6jxnwgnoo8] {
    border-top: 1px solid var(--st-border-light);
}

.civ-item--section[b-6jxnwgnoo8] {
    background: var(--st-bg);
}

/* A follow-up, indented under its question with a left rule. */
.civ-item--followup[b-6jxnwgnoo8] {
    margin-left: 24px;
    padding-left: 12px;
    border-left: 2px solid var(--st-border);
}

.civ[b-6jxnwgnoo8]  .civ-item__icon {
    color: var(--st-subtle);
    flex-shrink: 0;
}

.civ-item__label[b-6jxnwgnoo8] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.civ-item--section .civ-item__label[b-6jxnwgnoo8] {
    font-weight: 700;
}

.civ-item--hidden .civ-item__label[b-6jxnwgnoo8] {
    color: var(--st-subtle);
    text-decoration: line-through;
}
/* /Components/Checklists/ChecklistPhonePreview.razor.rz.scp.css */
/* Phone mock beside the checklist builder. Sizes, weights and spacing are copied from the mobile
   app (TaskChecklistSection.tsx and the task screen's card styles) so the preview reads like the
   real thing; every colour is a --st-* token (the mobile palette is the same scale). */

.cpp[b-abab8pe1yj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

.cpp-phone[b-abab8pe1yj] {
    width: 100%;
    max-width: 360px;
    padding: 10px;
    border-radius: 44px;
    background: var(--st-text);
    box-shadow: var(--st-shadow-md);
}

.cpp-screen[b-abab8pe1yj] {
    position: relative;
    display: flex;
    flex-direction: column;
    /* As tall as the dialog body allows (title bar, footer and paddings take ~250px). */
    height: calc(100vh - 250px);
    min-height: 480px;
    overflow: hidden;
    border-radius: 34px;
    background: var(--st-bg);
    font-family: var(--st-font-body);
    color: var(--st-text);
}

.cpp-status[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 4px;
    background: var(--st-white);
    font-size: 12px;
    font-weight: 700;
}

.cpp-status__icons[b-abab8pe1yj] {
    display: inline-flex;
    gap: 3px;
}

/* The phone's sizes, scaled down a notch so more of a long checklist fits on screen. */
.cpp-scroll[b-abab8pe1yj] {
    zoom: 0.85;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 24px;
    scrollbar-width: thin;
}

.cpp-card[b-abab8pe1yj] {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
}

.cpp-card__title[b-abab8pe1yj] {
    font-size: 13px;
    font-weight: 700;
    color: var(--st-text);
    margin-bottom: 6px;
}

/* ── Checklist ─────────────────────────────────────────────────────────── */

.cpp-checklist-row[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0 6px;
}

.cpp[b-abab8pe1yj]  .cpp-done-icon {
    color: var(--st-success);
}

.cpp[b-abab8pe1yj]  .cpp-open-icon {
    color: var(--st-muted);
}

.cpp-checklist-name[b-abab8pe1yj] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cpp-readonly[b-abab8pe1yj] {
    font-size: 11px;
    color: var(--st-subtle);
}

.cpp-italic[b-abab8pe1yj] {
    font-style: italic;
}

/* Under the checklist row, indented to its text column (icon + gap), as on the phone. */
.cpp-progress[b-abab8pe1yj] {
    height: 4px;
    margin: 0 0 8px 28px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--st-border);
}

.cpp-progress__bar[b-abab8pe1yj] {
    height: 100%;
    background: var(--st-primary);
    transition: width var(--st-duration-fast) var(--st-ease);
}

.cpp-empty[b-abab8pe1yj] {
    padding: 16px 0 8px;
    font-size: 12px;
    color: var(--st-subtle);
    text-align: center;
}

.cpp-field-label[b-abab8pe1yj] {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cpp-section[b-abab8pe1yj] {
    margin-top: 14px;
}

.cpp-desc[b-abab8pe1yj] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--st-muted);
}

.cpp-label[b-abab8pe1yj] {
    flex: 1;
    min-width: 0;
}

.cpp-label__name[b-abab8pe1yj] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    overflow-wrap: anywhere;
}

.cpp-required[b-abab8pe1yj] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.cpp-ref[b-abab8pe1yj] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--st-radius);
    background: var(--st-border-light);
}

.cpp-bullet[b-abab8pe1yj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.cpp-bullet__dot[b-abab8pe1yj] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin: 7px 6px 0 8px;
    border-radius: 3px;
    background: var(--st-muted);
}

.cpp-bullet__text[b-abab8pe1yj] {
    font-size: 13px;
    color: var(--st-text);
    overflow-wrap: anywhere;
}

.cpp-check-row[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cpp[b-abab8pe1yj]  .cpp-check {
    flex-shrink: 0;
    font-size: 22px;
    color: var(--st-muted);
}

.cpp[b-abab8pe1yj]  .cpp-check--on {
    color: var(--st-primary);
}

.cpp-item[b-abab8pe1yj] {
    padding: 8px 0;
    border-bottom: 1px solid var(--st-border-light);
}

.cpp-item__head[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Follow-ups sit under their question, indented behind a thin rule. */
.cpp-followups[b-abab8pe1yj] {
    margin-left: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--st-border);
}

/* ── Answers ───────────────────────────────────────────────────────────── */

.cpp-yesno[b-abab8pe1yj] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.cpp-yesno__btn[b-abab8pe1yj] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    height: 36px;
    border: 1px solid var(--st-border-light);
    border-radius: var(--st-radius);
    background: var(--st-border-light);
    color: var(--st-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--st-duration-fast), border-color var(--st-duration-fast), color var(--st-duration-fast);
}

.cpp-yesno__btn--yes[b-abab8pe1yj] {
    border-color: color-mix(in srgb, var(--st-success) 40%, var(--st-white));
    background: var(--st-success-light);
    color: var(--st-success);
}

.cpp-yesno__btn--no[b-abab8pe1yj] {
    border-color: color-mix(in srgb, var(--st-error) 35%, var(--st-white));
    background: var(--st-error-light);
    color: var(--st-error);
}

.cpp-yesno__btn--na[b-abab8pe1yj] {
    border-color: var(--st-subtle);
    background: var(--st-border);
    color: var(--st-text);
}

.cpp-input[b-abab8pe1yj] {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.cpp-input:focus[b-abab8pe1yj],
.cpp-number:focus-within[b-abab8pe1yj] {
    border-color: var(--st-primary);
}

.cpp-input[b-abab8pe1yj]::placeholder,
.cpp-number__input[b-abab8pe1yj]::placeholder {
    color: var(--st-subtle);
}

.cpp-textarea[b-abab8pe1yj] {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.cpp-dropdown[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    cursor: pointer;
}

.cpp-dropdown__text[b-abab8pe1yj] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpp-placeholder[b-abab8pe1yj] {
    color: var(--st-subtle);
}

.cpp-number[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 0;
}

.cpp-number--invalid[b-abab8pe1yj],
.cpp-number--invalid:focus-within[b-abab8pe1yj] {
    border-color: var(--st-error);
}

.cpp-number__input[b-abab8pe1yj] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--st-text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.cpp-number__unit[b-abab8pe1yj] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-muted);
}

.cpp-slot[b-abab8pe1yj] {
    margin-top: 10px;
}

.cpp-slot__head[b-abab8pe1yj] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cpp-photos[b-abab8pe1yj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cpp-thumb[b-abab8pe1yj] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--st-radius);
    background: var(--st-border-light);
}

.cpp-thumb--filled[b-abab8pe1yj] {
    background: var(--st-primary-100);
    color: var(--st-primary);
}

.cpp-thumb--add[b-abab8pe1yj] {
    border: 1px dashed var(--st-primary);
    color: var(--st-primary);
    cursor: pointer;
}

.cpp-thumb__remove[b-abab8pe1yj] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: color-mix(in srgb, var(--st-text-strong) 60%, transparent);
    color: var(--st-white);
    cursor: pointer;
}

/* ── Action sheet (dropdown options) ───────────────────────────────────── */

.cpp-sheet-backdrop[b-abab8pe1yj] {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--st-text-strong) 35%, transparent);
}

.cpp-sheet[b-abab8pe1yj] {
    zoom: 0.85;
    position: absolute;
    right: 8px;
    bottom: 12px;
    left: 8px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpp-sheet__group[b-abab8pe1yj] {
    max-height: 420px;
    overflow-y: auto;
    border-radius: 14px;
    background: var(--st-white);
}

.cpp-sheet__title[b-abab8pe1yj] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
    text-align: center;
}

.cpp-sheet__btn[b-abab8pe1yj] {
    display: block;
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: var(--st-white);
    color: var(--st-primary);
    font-family: inherit;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

.cpp-sheet__btn:last-child[b-abab8pe1yj] {
    border-bottom: none;
}

.cpp-sheet__btn:hover[b-abab8pe1yj] {
    background: var(--st-bg);
}

.cpp-sheet__btn--danger[b-abab8pe1yj] {
    color: var(--st-error);
}

.cpp-sheet__cancel[b-abab8pe1yj] {
    border-radius: 14px;
    font-weight: 700;
}
/* /Components/Checklists/ChecklistPicker.razor.rz.scp.css */
/* Checklist picker for the task / agreement dialogs. The dropdown row is the shared
   .st-with-action pattern; the chosen-template card follows the location tab's cards. */

.ckp[b-6gyhmbxos7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ckp-card[b-6gyhmbxos7] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    overflow: hidden;
}

.ckp-card__head[b-6gyhmbxos7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 12px;
}

.ckp[b-6gyhmbxos7]  .ckp-card__icon {
    color: var(--st-primary);
    flex-shrink: 0;
}

.ckp-card__id[b-6gyhmbxos7] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ckp-card__name[b-6gyhmbxos7] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ckp-card__meta[b-6gyhmbxos7] {
    font-size: 11px;
    color: var(--st-muted);
}

.ckp-items[b-6gyhmbxos7] {
    border-top: 1px solid var(--st-border);
    max-height: 280px;
    overflow-y: auto;
}
/* /Components/Checklists/ChecklistTemplateEditor.razor.rz.scp.css */
/* Checklist builder. Layout and spacing come from MudBlazor utilities in the markup where they
   fit; this file holds the builder's own structure (editor | preview grid, item rows, follow-ups,
   slot and option rows, drop zone) and reads every colour from a --st-* token. Card look follows LocationContactsTab. */

/* Hosted in ChecklistTemplateEditorDialog: the dialog sets the width, carries the title and
   owns the Cancel / Save footer. */
.cte[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
}

/* Editor | phone preview. The preview column sticks to the top of the dialog body's scroll. */
.cte-grid[b-qmss6mf1ey] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.cte-main[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cte-side[b-qmss6mf1ey] {
    position: sticky;
    top: 0;
    min-width: 0;
}

/* Edit / Preview switch, shown only where the preview cannot sit beside the editor. */
.cte-mode[b-qmss6mf1ey] {
    display: none;
    max-width: 320px;
    margin-bottom: 16px;
}

.cte-empty[b-qmss6mf1ey] {
    border: 1.5px dashed var(--st-border-hover);
    border-radius: var(--st-radius-md);
    margin-bottom: 12px;
}

/* ── Item rows ─────────────────────────────────────────────────────────── */

.cte-list[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cte-item[b-qmss6mf1ey] {
    scroll-margin: 16px 0;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.cte-item--section[b-qmss6mf1ey] {
    background: var(--st-bg);
}

/* A follow-up row inside its parent's body. */
.cte-item--child[b-qmss6mf1ey] {
    background: var(--st-surface-alt);
}

/* Set by touch-reorder.js on the row being dragged. */
.cte-item.reorder-dragging[b-qmss6mf1ey] {
    border-color: var(--st-primary);
    border-style: dashed;
    background: var(--st-primary-light);
    opacity: 0.7;
}

.cte-item__head[b-qmss6mf1ey] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 6px;
}

.cte-handle[b-qmss6mf1ey] {
    display: inline-flex;
    align-items: center;
    color: var(--st-subtle);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.cte-handle:hover[b-qmss6mf1ey] {
    color: var(--st-muted);
}

.cte-type[b-qmss6mf1ey] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    min-width: 104px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--st-radius-full);
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 11px;
    font-weight: 600;
}

.cte-item--section .cte-type[b-qmss6mf1ey] {
    background: var(--st-bg-alt);
    color: var(--st-muted);
}

.cte-label[b-qmss6mf1ey] {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    font-size: 13px;
}

.cte-item--section .cte-label[b-qmss6mf1ey] {
    font-weight: 700;
}

.cte[b-qmss6mf1ey]  .cte-required {
    flex-shrink: 0;
    margin: 0;
}

.cte-item__body[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px 12px 42px;
    border-top: 1px solid var(--st-border-light);
}

.cte-sub[b-qmss6mf1ey] {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-text);
    margin-bottom: 6px;
}

.cte-badge[b-qmss6mf1ey] {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: var(--st-radius-full);
    background: var(--st-bg-alt);
    color: var(--st-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Follow-ups ────────────────────────────────────────────────────────── */

.cte-followups[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--st-border-light);
    border-left: 3px solid var(--st-primary-border);
    border-radius: var(--st-radius);
    background: var(--st-bg);
}

.cte-followups__hint[b-qmss6mf1ey] {
    font-size: 11px;
    color: var(--st-subtle);
}

.cte-children[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cte-trigger[b-qmss6mf1ey] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px 0 34px;
}

.cte-trigger__label[b-qmss6mf1ey] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
}

.cte-trigger__empty[b-qmss6mf1ey] {
    font-size: 12px;
    color: var(--st-subtle);
    font-style: italic;
}

.cte-trigger--invalid .cte-trigger__label[b-qmss6mf1ey],
.cte-trigger--invalid .cte-trigger__empty[b-qmss6mf1ey] {
    color: var(--st-error);
}

.cte-add--followup[b-qmss6mf1ey] {
    margin-top: 0;
    padding: 10px 12px;
    background: var(--st-white);
}

/* ── Dropdown options, number unit ─────────────────────────────────────── */

.cte-option__num[b-qmss6mf1ey] {
    min-width: 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
    text-align: right;
}

.cte-unit[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    max-width: 240px;
}

/* ── Photo slots ───────────────────────────────────────────────────────── */

.cte-slots[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cte-slot[b-qmss6mf1ey] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-bg);
}

.cte-slot--invalid[b-qmss6mf1ey] {
    border-color: var(--st-error);
    background: var(--st-error-light);
}

.cte-input-sm[b-qmss6mf1ey] {
    padding: 6px 10px;
    font-size: 13px;
}

.cte-slot__label[b-qmss6mf1ey] {
    flex: 1;
    min-width: 140px;
}

.cte-slot__num[b-qmss6mf1ey] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--st-muted);
}

.cte-slot__num input[b-qmss6mf1ey] {
    width: 64px;
}

/* ── Reference photo ───────────────────────────────────────────────────── */

/* Compact version of the dashed upload target (same 1.5px dashed token border as .st-attach). */
.cte-drop[b-qmss6mf1ey] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    padding: 10px 14px;
    border: 1.5px dashed var(--st-border-hover);
    border-radius: 10px;
    background: var(--st-white);
    cursor: pointer;
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.cte-drop:hover[b-qmss6mf1ey],
.cte-drop.dragover[b-qmss6mf1ey] {
    border-color: var(--st-primary);
    background: var(--st-primary-light);
}

.cte-drop__text[b-qmss6mf1ey] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cte-drop__title[b-qmss6mf1ey] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.cte-drop__meta[b-qmss6mf1ey] {
    font-size: 11px;
    color: var(--st-subtle);
}

/* The real file input fills the zone invisibly, so both a click and a dropped file reach it. */
.cte[b-qmss6mf1ey]  .cte-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cte-ref[b-qmss6mf1ey] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cte-ref__img[b-qmss6mf1ey] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    cursor: zoom-in;
}

/* ── Add item + footer ─────────────────────────────────────────────────── */

.cte-add[b-qmss6mf1ey] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1.5px dashed var(--st-border-hover);
    border-radius: var(--st-radius-md);
}

.cte-add__label[b-qmss6mf1ey] {
    font-size: 12px;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Too narrow for editor and phone side by side: one at a time, switched in .cte-mode. */
@media (max-width: 1100px) {
    .cte-mode[b-qmss6mf1ey] {
        display: block;
    }

    .cte-grid[b-qmss6mf1ey] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cte-side[b-qmss6mf1ey] {
        display: none;
        position: static;
    }

    .cte--preview .cte-side[b-qmss6mf1ey] {
        display: block;
    }

    .cte--preview .cte-main[b-qmss6mf1ey] {
        display: none;
    }
}

@media (max-width: 640px) {
    .cte-type__label[b-qmss6mf1ey] {
        display: none;
    }

    .cte-type[b-qmss6mf1ey] {
        min-width: 0;
        padding: 3px 6px;
    }

    .cte-item__body[b-qmss6mf1ey] {
        padding-left: 14px;
    }

    .cte-trigger[b-qmss6mf1ey] {
        padding-left: 10px;
    }
}
/* /Components/Checklists/ChecklistTemplateEditorDialog.razor.rz.scp.css */
/* Footer of the checklist builder dialog: the "Add item" buttons sit left of Cancel / Save. */
.cted-add__label[b-vs5gjfbwmj] {
    font-size: 12px;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* /Components/Checklists/LocationChecklistsTab.razor.rz.scp.css */
/* Location popup > Checklists: one card with the attach row on top and a row per attached
   template (expandable to hide items at this location). Every colour is a --st-* token. */

.lct-attach[b-wkh6ojndp9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border-light);
}

.lct[b-wkh6ojndp9]  .lct-attach__select {
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}

.lct-note[b-wkh6ojndp9] {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--st-subtle);
}

.lct-card[b-wkh6ojndp9] {
    border-bottom: 1px solid var(--st-border-light);
}

.lct-card:last-child[b-wkh6ojndp9] {
    border-bottom: none;
}

.lct-card__head[b-wkh6ojndp9] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 8px 8px 16px;
}

.lct[b-wkh6ojndp9]  .lct-card__icon {
    color: var(--st-primary);
    flex-shrink: 0;
}

.lct-card__id[b-wkh6ojndp9] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lct-card__name[b-wkh6ojndp9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.lct-items[b-wkh6ojndp9] {
    border-top: 1px solid var(--st-border-light);
}

/* The row menu sits outside an .st-table here: same muted icon colour. */
.lct[b-wkh6ojndp9]  .st-row-menu .mud-icon-button { color: var(--st-subtle); }
/* /Components/Checklists/TaskChecklistsView.razor.rz.scp.css */
/* Task view > Checklists (read-only answers). Every colour is a --st-* token; the warning
   line uses the shared .st-callout-warn. */

.tcv-card[b-6xdkc8uzqa] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    padding: 12px 14px;
    background: var(--st-white);
}

.tcv-card + .tcv-card[b-6xdkc8uzqa] {
    margin-top: 2px;
}

.tcv-card__name[b-6xdkc8uzqa] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.tcv-progress[b-6xdkc8uzqa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
}

.tcv-progress--warn[b-6xdkc8uzqa] {
    margin-top: 8px;
    padding: 6px 10px;
    color: var(--st-text);
}

.tcv[b-6xdkc8uzqa]  .tcv-progress--warn .mud-icon-root {
    color: var(--st-warning);
}

.tcv-items[b-6xdkc8uzqa] {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.tcv-section[b-6xdkc8uzqa] {
    font-size: 11px;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 0 4px;
}

.tcv-item[b-6xdkc8uzqa] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--st-border-light);
}

/* A follow-up question, indented under its parent with a left rule. */
.tcv-followup[b-6xdkc8uzqa] {
    margin-left: 14px;
    padding-left: 12px;
    border-left: 2px solid var(--st-border);
}

/* Read-only "jog your memory" line: a dot and body text, no answer. */
.tcv-bullet[b-6xdkc8uzqa] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--st-text);
    border-top: 1px solid var(--st-border-light);
}

.tcv-bullet__dot[b-6xdkc8uzqa] {
    color: var(--st-muted);
    line-height: inherit;
}

.tcv-number[b-6xdkc8uzqa] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tcv-item__main[b-6xdkc8uzqa] {
    flex: 1;
    min-width: 0;
}

.tcv-item__label[b-6xdkc8uzqa] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.tcv-item__desc[b-6xdkc8uzqa] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
}

.tcv-answer[b-6xdkc8uzqa] {
    margin-top: 6px;
    font-size: 13px;
    color: var(--st-text);
}

.tcv-check[b-6xdkc8uzqa] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--st-subtle);
}

.tcv-check--on[b-6xdkc8uzqa] {
    color: var(--st-success-dark);
}

.tcv-none[b-6xdkc8uzqa] {
    font-size: 12px;
    color: var(--st-subtle);
}

.tcv-text[b-6xdkc8uzqa] {
    white-space: pre-wrap;
    word-break: break-word;
}

.tcv-meta[b-6xdkc8uzqa] {
    font-size: 11px;
    color: var(--st-subtle);
    margin-top: 4px;
}

/* Photo slots side by side, each a labelled group of thumbnails. */
.tcv-slots[b-6xdkc8uzqa] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tcv-slot[b-6xdkc8uzqa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tcv-slot__label[b-6xdkc8uzqa] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
}

.tcv-slot__count[b-6xdkc8uzqa] {
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    border-radius: var(--st-radius-full);
    background: var(--st-bg-alt);
    color: var(--st-muted);
}

.tcv-thumbs[b-6xdkc8uzqa] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tcv-thumb[b-6xdkc8uzqa] {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    cursor: zoom-in;
    transition: border-color var(--st-duration-fast);
}

.tcv-thumb:hover[b-6xdkc8uzqa] {
    border-color: var(--st-primary);
}

.tcv-ref[b-6xdkc8uzqa] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    cursor: zoom-in;
}
/* /Components/CustomerAddressReportsDialog.razor.rz.scp.css */
/* Same overlay as the report dialog it opens (CustomerQualityReportViewDialog), which renders
   after this one and so sits on top of it. */
.car-backdrop[b-y105v1bore] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-modal[b-y105v1bore] {
    background: var(--st-white);
    border-radius: 12px;
    padding: 24px;
    max-width: 640px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.car-header[b-y105v1bore] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
}

.car-heading[b-y105v1bore] {
    min-width: 0;
}

.car-title[b-y105v1bore] {
    font-size: 16px;
    font-weight: 600;
    color: var(--st-text);
}

.car-sub[b-y105v1bore] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 4px;
}

.car-close[b-y105v1bore] {
    background: none;
    border: none;
    color: var(--st-subtle);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .car-modal[b-y105v1bore] {
        width: calc(100% - 32px);
        padding: 16px;
    }

    /* Rows stack as cards: template on top, date and result underneath. */
    .car-table[b-y105v1bore],
    .car-table tbody[b-y105v1bore] {
        display: block;
        width: 100%;
    }

    .car-table thead[b-y105v1bore] {
        display: none;
    }

    .car-table tr[b-y105v1bore] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--st-border-light);
    }

    .car-table td[b-y105v1bore] {
        display: inline-flex;
        height: auto;
        border: none;
        padding: 0;
        color: var(--st-muted);
    }

    .car-table .car-cell-main[b-y105v1bore] {
        flex-basis: 100%;
        color: var(--st-text);
    }

    .car-outcome[b-y105v1bore] {
        margin-left: auto;
    }
}
/* /Components/CustomerGroupsDialog.razor.rz.scp.css */
/* Customer-group management dialog: the inline create/edit form panel. */
.grp-edit[b-rjmk43sl69] { padding: 12px; border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-bg); }
/* /Components/CustomerRefusalPanel.razor.rz.scp.css */
/* Customer refusal (kravspec 1.23) at the top of the task view. Error tone while a head has to
   decide, neutral once decided. Token-backed; the tv-banner error tint is the same pair. */
.crp-card[b-g9lb8duym9] {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--st-white); border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md); padding: 12px 14px;
}
.crp-card.is-pending[b-g9lb8duym9] { background: var(--st-error-light); border-color: #FCA5A5; }

.crp[b-g9lb8duym9]  .crp-icon { width: 18px; height: 18px; font-size: 18px; color: var(--st-muted); }
.crp .crp-card.is-pending[b-g9lb8duym9]  .crp-icon { color: var(--st-error); }

.crp-title[b-g9lb8duym9] { font-size: 13.5px; font-weight: 700; color: var(--st-text-strong); }
.crp-meta[b-g9lb8duym9] { font-size: 12px; color: var(--st-muted); }
.crp-comment[b-g9lb8duym9] {
    font-size: 13px; line-height: 1.55; color: var(--st-text); white-space: pre-wrap;
    background: var(--st-white); border: 1px solid var(--st-border-light);
    border-radius: 10px; padding: 8px 10px;
}
.crp-hint[b-g9lb8duym9] { font-size: 12px; color: var(--st-muted); }

.crp-thumb[b-g9lb8duym9] {
    width: 64px; height: 64px; padding: 0; border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm); overflow: hidden; cursor: pointer; background: var(--st-bg);
}
.crp-thumb img[b-g9lb8duym9] { width: 100%; height: 100%; object-fit: cover; display: block; }

.crp-resolution[b-g9lb8duym9] { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--st-text); }
.crp[b-g9lb8duym9]  .crp-resolution-icon { width: 16px; height: 16px; font-size: 16px; color: var(--st-success-dark); }
/* /Components/CustomerRequestDialog.razor.rz.scp.css */
.crd-backdrop[b-9i0soqv8gm] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crd-modal[b-9i0soqv8gm] {
    background: var(--st-white);
    border-radius: 16px;
    padding: 32px;
    width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.crd-title[b-9i0soqv8gm] {
    font-size: 18px;
    font-weight: 700;
    color: var(--st-text);
    margin: 0 0 20px;
}

.crd-form[b-9i0soqv8gm] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crd-toggle[b-9i0soqv8gm] {
    display: flex;
    gap: 8px;
    background: #F1F5F9;
    border-radius: 10px;
    padding: 4px;
}

.crd-toggle-btn[b-9i0soqv8gm] {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.crd-toggle-btn.active[b-9i0soqv8gm] {
    background: var(--st-white);
    color: var(--st-text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.crd-label[b-9i0soqv8gm] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
    margin-bottom: 4px;
}

.crd-input[b-9i0soqv8gm] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--st-white);
    box-sizing: border-box;
}

.crd-textarea[b-9i0soqv8gm] {
    resize: vertical;
}

.crd-photos[b-9i0soqv8gm] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crd-photo[b-9i0soqv8gm] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--st-border);
}

.crd-photo img[b-9i0soqv8gm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crd-photo-x[b-9i0soqv8gm] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    color: var(--st-white);
    font-size: 10px;
    cursor: pointer;
    line-height: 1;
}

.crd-photo-add[b-9i0soqv8gm] {
    width: 72px;
    height: 72px;
    border: 1px dashed var(--st-border-hover);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--st-muted);
    cursor: pointer;
}

.crd-error[b-9i0soqv8gm] {
    background: #FEE2E2;
    color: var(--st-error);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.crd-error-text[b-9i0soqv8gm] {
    color: var(--st-error);
    font-size: 12px;
    margin: 4px 0 0;
}

.crd-hint[b-9i0soqv8gm] {
    font-size: 13px;
    color: var(--st-muted);
    margin: 0 0 16px;
}

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

.crd-btn-primary[b-9i0soqv8gm] {
    background: var(--st-primary);
    color: var(--st-white);
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.crd-btn-primary:disabled[b-9i0soqv8gm] {
    background: #93B4FD;
    cursor: wait;
}

.crd-btn-secondary[b-9i0soqv8gm] {
    background: var(--st-white);
    color: #334155;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.crd-success[b-9i0soqv8gm] {
    text-align: center;
    padding: 8px 0;
}

.crd-success-icon[b-9i0soqv8gm] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #DCFCE7;
    color: var(--st-success);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .crd-modal[b-9i0soqv8gm] {
        padding: 20px;
    }
}
/* /Components/Customers/CustomerDashboardDialog.razor.rz.scp.css */
/* Customer dashboard popup: component-specific structure only.
   The cards are StCard (global .st-card), the users list is the shared .st-table, and the nested
   add/edit-user + add-customer dialogs use the global .st-cd-* block in design-system.css.
   These rules land on elements written in THIS component's markup, so they keep their
   scope attribute and still apply once MudBlazor portals the dialog. */
.cd-dlg-name[b-slkuvdxkns] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cd-dlg-body[b-slkuvdxkns] { max-height: 68vh; overflow-y: auto; gap: 16px; }

.cd-mail[b-slkuvdxkns] { color: var(--st-primary); text-decoration: none; }
.cd-mail:hover[b-slkuvdxkns] { text-decoration: underline; }
/* /Components/Customers/CustomerLocationMapFilterBar.razor.rz.scp.css */
/* The floating map bar hosts the list toolbar: stack the toolbar and the chips row, let the
   search stretch, and open the Filters panel towards the right edge like the in-card toolbar. */
.clm-filterbar.clm-filterbar--st[b-lxp96d7jyr] { flex-direction: column; align-items: stretch; gap: var(--st-space-2); }

.clm-filterbar--st[b-lxp96d7jyr]  .st-list-toolbar { margin-bottom: 0; }

.clm-filterbar--st[b-lxp96d7jyr]  .st-list-toolbar__main { flex-wrap: nowrap; }

.clm-filterbar--st[b-lxp96d7jyr]  .st-search { flex: 1; width: auto; min-width: 160px; }

.clm-filterbar--st[b-lxp96d7jyr]  .st-filter__panel { left: auto; right: 0; }

.clm-filterbar--st[b-lxp96d7jyr]  .st-filter-chips { margin-bottom: 0; }

.clm-filter-none[b-lxp96d7jyr] { padding: 7px 10px; font-size: 12px; color: var(--st-subtle); }
/* /Components/CustomerYearCalendar.razor.rz.scp.css */
/* Year navigation uses the shared .st-icon-btn arrows, like the 14-day calendar. */
.ycal-year[b-mrhcmhhfxk] {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
    min-width: 44px;
    text-align: center;
}

.ycal-loc[b-mrhcmhhfxk] {
    width: 100%;
    max-width: 280px;
}

.ycal-legend[b-mrhcmhhfxk] {
    font-size: 12px;
    color: var(--st-muted);
}

/* Status colours: one dot/badge pair per status, all from the design tokens. */
.ycal-dot[b-mrhcmhhfxk] {
    width: 10px;
    height: 10px;
    border-radius: var(--st-radius-full);
    flex-shrink: 0;
}

.ycal-dot.done[b-mrhcmhhfxk]      { background: var(--st-success); }
.ycal-dot.planned[b-mrhcmhhfxk]   { background: var(--st-primary); }
.ycal-dot.month[b-mrhcmhhfxk]     { background: var(--st-white); border: 2px dashed var(--st-primary); }
.ycal-dot.declined[b-mrhcmhhfxk]  { background: var(--st-error); }
.ycal-dot.cancelled[b-mrhcmhhfxk] { background: var(--st-subtle); }

.ycal-note[b-mrhcmhhfxk] {
    font-size: 13px;
    color: var(--st-subtle);
    padding: 24px 0;
    text-align: center;
}

/* Twelve blocks: as many columns as fit at 260px, a single column on a phone. */
.ycal-grid[b-mrhcmhhfxk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.ycal-month[b-mrhcmhhfxk] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 12px;
    min-width: 0;
}

.ycal-month.current[b-mrhcmhhfxk] {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 1px var(--st-primary);
}

.ycal-month-name[b-mrhcmhhfxk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.ycal-month-count[b-mrhcmhhfxk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-primary);
    background: var(--st-primary-light);
    border-radius: var(--st-radius-full);
    padding: 2px 8px;
}

.ycal-empty[b-mrhcmhhfxk] {
    font-size: 12px;
    color: var(--st-subtle);
    padding: 6px 0;
}

.ycal-month-only-label[b-mrhcmhhfxk] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* One visit row: day | title + location | status badge. */
.ycal-visit[b-mrhcmhhfxk] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: var(--st-radius-sm);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.ycal-visit:hover:not(:disabled)[b-mrhcmhhfxk] {
    background: var(--st-bg);
}

.ycal-visit:disabled[b-mrhcmhhfxk] {
    cursor: default;
}

.ycal-visit-day[b-mrhcmhhfxk] {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.ycal-visit-dnum[b-mrhcmhhfxk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.ycal-visit-dow[b-mrhcmhhfxk] {
    font-size: 10px;
    color: var(--st-subtle);
    text-transform: uppercase;
}

.ycal[b-mrhcmhhfxk]  .ycal-visit-noday {
    font-size: 18px;
    color: var(--st-primary);
}

.ycal-visit-main[b-mrhcmhhfxk] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ycal-visit-title[b-mrhcmhhfxk],
.ycal-visit-loc[b-mrhcmhhfxk] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ycal-visit-title[b-mrhcmhhfxk] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
}

.ycal-visit-loc[b-mrhcmhhfxk] {
    font-size: 11px;
    color: var(--st-muted);
}

.ycal-badge[b-mrhcmhhfxk] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--st-radius-full);
    padding: 2px 8px;
    white-space: nowrap;
}

.ycal-badge.done[b-mrhcmhhfxk]      { background: var(--st-success-light); color: var(--st-success-dark); }
.ycal-badge.planned[b-mrhcmhhfxk]   { background: var(--st-primary-light); color: var(--st-primary); }
.ycal-badge.month[b-mrhcmhhfxk]     { background: var(--st-white); color: var(--st-primary); border: 1px dashed var(--st-primary); }
.ycal-badge.declined[b-mrhcmhhfxk]  { background: var(--st-error-light); color: var(--st-error-dark); }
.ycal-badge.cancelled[b-mrhcmhhfxk] { background: var(--st-bg-alt); color: var(--st-muted); }

.ycal-more[b-mrhcmhhfxk] {
    border: none;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-primary);
    cursor: pointer;
}

.ycal-more:hover[b-mrhcmhhfxk] {
    text-decoration: underline;
}
/* /Components/Departments/DepartmentPayCodesPanel.razor.rz.scp.css */
/* DepartmentPayCodesPanel (Lønkoder): version picker in the table card's toolbar, then a dense
   spreadsheet grid (vertical flag headers) that keeps its compact rows on purpose. */

.lk-spreadsheet[b-cj8c6yuqsm] { color: var(--st-text); }
.lk-skel-toolbar[b-cj8c6yuqsm] { display: block; width: 45%; height: 34px; border-radius: var(--st-radius); }

/* ── Version picker ─────────────────────────────────────────────────────── */
.lk-version[b-cj8c6yuqsm] { position: relative; flex-shrink: 0; }
.lk-version-btn[b-cj8c6yuqsm] {
    display: inline-flex; align-items: center; gap: 8px; height: 34px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    padding: 0 10px 0 12px; font: inherit; font-size: 13px; color: var(--st-text); cursor: pointer;
}
.lk-version-btn:hover[b-cj8c6yuqsm] { border-color: var(--st-border-hover); }
.lk-version-btn:focus-visible[b-cj8c6yuqsm] { outline: none; box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.lk-version[b-cj8c6yuqsm]  .lk-version-caret { font-size: 16px; color: var(--st-muted); }
.lk-version-dot[b-cj8c6yuqsm] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lk-version-dot.now[b-cj8c6yuqsm] { background: var(--st-success); }
.lk-version-dot.past[b-cj8c6yuqsm] { background: var(--st-subtle); }
.lk-version-dot.next[b-cj8c6yuqsm] { background: var(--st-warning); }
.lk-version-name[b-cj8c6yuqsm] { font-weight: 600; }
.lk-version-range[b-cj8c6yuqsm] { color: var(--st-muted); font-size: 12px; }
.lk-version-menu[b-cj8c6yuqsm] {
    position: absolute; top: 100%; left: 0; margin-top: 6px; min-width: 380px; z-index: 50; overflow: hidden;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-popover);
}
.lk-version-menu-head[b-cj8c6yuqsm] {
    padding: 12px 14px 6px; font-size: 11px; color: var(--st-subtle);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.lk-version-item[b-cj8c6yuqsm] {
    background: transparent; border: none; border-top: 1px solid var(--st-border-light); padding: 10px 14px;
    display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center;
    text-align: left; cursor: pointer; font: inherit; width: 100%;
}
.lk-version-item:hover[b-cj8c6yuqsm] { background: var(--st-bg); }
.lk-version-item.active[b-cj8c6yuqsm] { background: var(--st-primary-light); }
.lk-version-item .t[b-cj8c6yuqsm] { font-size: 13px; font-weight: 600; color: var(--st-text); }
.lk-version-item .d[b-cj8c6yuqsm] { font-size: 11px; color: var(--st-muted); margin-top: 2px; }
.lk-version-action[b-cj8c6yuqsm] {
    background: var(--st-bg); border: none; border-top: 1px solid var(--st-border); padding: 11px 14px;
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--st-primary);
}
.lk-version-action:hover[b-cj8c6yuqsm] { background: var(--st-primary-light); }
.lk-version-action.lk-version-action--danger[b-cj8c6yuqsm] { color: var(--st-error); }
.lk-version-action.lk-version-action--danger:hover[b-cj8c6yuqsm] { background: var(--st-error-light); }
.lk-version-menu[b-cj8c6yuqsm]  .lk-version-action .mud-icon-root { font-size: 16px; }

/* ── Spreadsheet grid ───────────────────────────────────────────────────── */
.lk-table-wrap[b-cj8c6yuqsm] { overflow-x: auto; max-height: 50vh; overflow-y: auto; }
table.lk-table[b-cj8c6yuqsm] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 0; table-layout: auto; }
table.lk-table th[b-cj8c6yuqsm] {
    background: var(--st-bg); font-size: 10px; font-weight: 600; color: var(--st-muted);
    padding: 4px 6px; border-bottom: 1px solid var(--st-border); text-align: left; white-space: nowrap;
    vertical-align: middle; position: sticky; top: 0; z-index: 2;
}
table.lk-table th.num[b-cj8c6yuqsm] { text-align: right; }
table.lk-table td[b-cj8c6yuqsm] {
    padding: 0; border-bottom: 1px solid var(--st-border-light); background: var(--st-white);
    color: var(--st-text); vertical-align: middle; font-size: 12px;
}
table.lk-table tbody tr[b-cj8c6yuqsm] { cursor: pointer; }
table.lk-table tr:hover td[b-cj8c6yuqsm] { background: var(--st-bg); }
table.lk-table tr.selected td[b-cj8c6yuqsm] { background: var(--st-primary-light); }
table.lk-table tr.selected td:first-child[b-cj8c6yuqsm] { box-shadow: inset 3px 0 0 0 var(--st-primary); }
.lk-w-code[b-cj8c6yuqsm] { width: 64px; }
.lk-w-text[b-cj8c6yuqsm] { min-width: 140px; }
.lk-w-amount[b-cj8c6yuqsm] { width: 80px; }
.lk-w-unit[b-cj8c6yuqsm] { width: 50px; }
.lk-w-time[b-cj8c6yuqsm] { width: 64px; }
.lk-w-integ[b-cj8c6yuqsm] { width: 72px; }
.lk-w-shifttypes[b-cj8c6yuqsm] { min-width: 120px; }
.lk-w-actions[b-cj8c6yuqsm] { width: 44px; }
.lk-actions-cell[b-cj8c6yuqsm] { text-align: right; padding: 0 4px !important; }
.lk-empty[b-cj8c6yuqsm] { padding: 24px !important; text-align: center; color: var(--st-subtle) !important; cursor: default; }
.lk-cell[b-cj8c6yuqsm] { display: flex; align-items: center; min-height: 30px; padding: 0 6px; }
.lk-cell.center[b-cj8c6yuqsm] { justify-content: center; }
.lk-cell.right[b-cj8c6yuqsm] { justify-content: flex-end; }
.lk-cell[b-cj8c6yuqsm]  .lk-flag-icon { font-size: 16px; color: var(--st-border-hover); }
.lk-cell[b-cj8c6yuqsm]  .lk-flag-icon.is-on { color: var(--st-text); }
.lk-table th.flag-col[b-cj8c6yuqsm], .lk-table td.flag-col[b-cj8c6yuqsm] { text-align: center; border-left: 1px solid var(--st-border-light); }
.lk-table th.flag-col:first-of-type[b-cj8c6yuqsm], .lk-table td.flag-col:first-of-type[b-cj8c6yuqsm] { border-left: 1px solid var(--st-border); }
.lk-table th.time-col[b-cj8c6yuqsm], .lk-table td.time-col[b-cj8c6yuqsm] { border-left: 1px solid var(--st-border-light); }
.lk-table th.code-col[b-cj8c6yuqsm], .lk-table td.code-col[b-cj8c6yuqsm] { border-left: 1px solid var(--st-border-light); }
.lk-table.dense th.flag-col[b-cj8c6yuqsm] { height: 80px; width: 26px; padding: 4px 0; vertical-align: bottom; }
.lk-table.dense th.flag-col span[b-cj8c6yuqsm] { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 10px; }
.lk-table.dense td.flag-col[b-cj8c6yuqsm] { width: 26px; }
.lk-table.dense td.flag-col .lk-cell[b-cj8c6yuqsm] { padding: 0 2px; }
.lk-readonly[b-cj8c6yuqsm] { font-size: 12px; color: var(--st-text); padding: 0 2px; }
.lk-readonly.strong[b-cj8c6yuqsm] { font-weight: 500; }
.lk-readonly.muted[b-cj8c6yuqsm] { color: var(--st-muted); }
.lk-readonly.code[b-cj8c6yuqsm] { font-weight: 600; font-variant-numeric: tabular-nums; }
.lk-readonly.num[b-cj8c6yuqsm] { font-variant-numeric: tabular-nums; }
.lk-readonly.time[b-cj8c6yuqsm] { font-size: 11px; color: var(--st-muted); font-variant-numeric: tabular-nums; }
.lk-shifttypes-cell[b-cj8c6yuqsm] { display: flex; align-items: center; gap: 3px; padding: 0 4px; flex-wrap: wrap; min-height: 30px; }
.lk-st-chip[b-cj8c6yuqsm] {
    display: inline-flex; align-items: center; padding: 1px 5px; border-radius: var(--st-radius-full); font-size: 10px;
    border: 1px solid var(--st-primary-border); color: var(--st-primary); background: var(--st-primary-light); white-space: nowrap;
}
.lk-st-chip.all[b-cj8c6yuqsm] { color: var(--st-primary-hover); }
.lk-more[b-cj8c6yuqsm] { font-size: 11px; color: var(--st-subtle); }
.lk-status-row[b-cj8c6yuqsm] {
    background: var(--st-bg); padding: 9px 14px; border-top: 1px solid var(--st-border); font-size: 12px;
    color: var(--st-muted); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.lk-status-row strong[b-cj8c6yuqsm] { color: var(--st-text); }

/* ── Column legend card ─────────────────────────────────────────────────── */
.lk-legend-list[b-cj8c6yuqsm] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
.lk-legend-list .row[b-cj8c6yuqsm] {
    display: grid; grid-template-columns: 140px 1fr; gap: 10px; font-size: 12px;
    line-height: 1.5; padding: 4px 0; border-top: 1px solid var(--st-border-light);
}
.lk-legend-list .row:first-child[b-cj8c6yuqsm], .lk-legend-list .row:nth-child(2)[b-cj8c6yuqsm] { border-top: none; }
.lk-legend-list .k[b-cj8c6yuqsm] { font-weight: 600; color: var(--st-text); }
.lk-legend-list .v[b-cj8c6yuqsm] { color: var(--st-muted); }

/* ── Pay-code dialog ────────────────────────────────────────────────────── */
.lk-code-body[b-cj8c6yuqsm] { gap: 24px; max-height: 72vh; overflow-y: auto; }
.lk-flag-list[b-cj8c6yuqsm] { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.lk-chip-list[b-cj8c6yuqsm] { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Pay groups (løngrupper) ────────────────────────────────────────────── */
.lk-w-paygroups[b-cj8c6yuqsm] { min-width: 120px; }
/* Its own full-width row under the toolbar (the toolbar is a wrapping flex row ordered 1-4). */
.lk-filter-hint[b-cj8c6yuqsm] { order: 5; flex: 1 0 100%; font-size: 12px; color: var(--st-muted); }
/* Small markers after the text: absence-file codes and deduction (negative) codes. */
.lk-tag[b-cj8c6yuqsm] {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 0 5px; border-radius: var(--st-radius-full);
    font-size: 10px; font-weight: 600; color: var(--st-muted); background: var(--st-bg-alt); white-space: nowrap;
}
.lk-tag--deduction[b-cj8c6yuqsm] { color: var(--st-error); background: var(--st-error-light); }
/* /Components/ELearning/ELearningCourseBuilder.razor.rz.scp.css */
/* E-learning course builder: course details card, then one collapsible card per module. */
.elb-field-label[b-5bso456b8i] { font-size: 11px; font-weight: 600; color: var(--st-muted); margin-bottom: 6px; }

.elb-min0[b-5bso456b8i] { min-width: 0; }

.elb-dept[b-5bso456b8i] { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; }

.elb-dept__dot[b-5bso456b8i] { width: 8px; height: 8px; }

.elb-module[b-5bso456b8i] { margin-bottom: 10px; overflow: hidden; }

.elb-module__head[b-5bso456b8i] {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer;
    background: var(--st-bg);
}

.elb-module.is-open .elb-module__head[b-5bso456b8i] { border-bottom: 1px solid var(--st-border); }

.elb-module__num[b-5bso456b8i] {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--st-primary-light); color: var(--st-primary); font-weight: 700; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
}

.elb-module__titles[b-5bso456b8i] { flex: 1; min-width: 0; }

.elb-module__body[b-5bso456b8i] { padding: 16px; }

.elb-module__grid[b-5bso456b8i] { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; margin-bottom: 16px; }

@media (max-width: 900px) { .elb-module__grid[b-5bso456b8i] { grid-template-columns: 1fr; } }

.elb-media[b-5bso456b8i] { border: 1px solid var(--st-border); border-radius: 10px; overflow: hidden; background: var(--st-white); }

.elb-media__view[b-5bso456b8i] { display: block; width: 100%; height: 180px; border: 0; }

.elb-media__view--image[b-5bso456b8i] { object-fit: cover; background: var(--st-bg-alt); }

.elb-media__view--video[b-5bso456b8i] { background: var(--st-text-strong); }

.elb-media__bar[b-5bso456b8i] {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--st-bg); border-top: 1px solid var(--st-border);
}

.elb-media__bar[b-5bso456b8i]  .elb-media__icon { color: var(--st-primary); font-size: 18px; }

.elb-media__name[b-5bso456b8i] {
    font-size: 12px; font-weight: 500; color: var(--st-text-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.elb-media__size[b-5bso456b8i] { font-size: 11px; color: var(--st-muted); }

.elb-drop[b-5bso456b8i] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 140px; padding: 24px 16px; text-align: center; cursor: pointer;
    border: 2px dashed var(--st-border-hover); border-radius: 10px; background: var(--st-bg); color: var(--st-muted);
    transition: border-color var(--st-duration-fast);
}

.elb-drop:hover[b-5bso456b8i] { border-color: var(--st-primary); }

.elb-drop[b-5bso456b8i]  .elb-drop__icon { font-size: 28px; color: var(--st-subtle); }

.elb-drop__title[b-5bso456b8i] { font-size: 13px; font-weight: 600; color: var(--st-text); }

.elb-drop__text[b-5bso456b8i] { font-size: 13px; }

.elb-drop__hint[b-5bso456b8i] { font-size: 11px; color: var(--st-subtle); }

.elb-questions[b-5bso456b8i] { border-top: 1px solid var(--st-border-light); padding-top: 12px; }

.elb-questions__head[b-5bso456b8i] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }

.elb-questions__title[b-5bso456b8i] { font-size: 13px; font-weight: 600; color: var(--st-text-strong); }

.elb-questions__empty[b-5bso456b8i] {
    padding: 14px; text-align: center; font-size: 12px; color: var(--st-subtle);
    border: 1px dashed var(--st-border-hover); border-radius: 10px;
}

.elb-question[b-5bso456b8i] {
    padding: 12px; margin-bottom: 8px; background: var(--st-bg);
    border: 1px solid var(--st-border); border-radius: 10px;
}

.elb-question__head[b-5bso456b8i] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.elb-question__num[b-5bso456b8i] { font-weight: 700; color: var(--st-primary); }

.elb-answers[b-5bso456b8i] { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.elb-answer[b-5bso456b8i] {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius);
}

.elb-answer:focus-within[b-5bso456b8i] { border-color: var(--st-primary); }

.elb-answer input[type="radio"][b-5bso456b8i], .elb-answer input[type="checkbox"][b-5bso456b8i] { accent-color: var(--st-primary); }

.elb-answer__input[b-5bso456b8i] {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13px; color: var(--st-text-strong);
}

.elb-answer__input[b-5bso456b8i]::placeholder { color: var(--st-subtle); }

.elb-add-module[b-5bso456b8i] {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px; border: 1.5px dashed var(--st-border-hover); border-radius: var(--st-radius-md);
    background: var(--st-white); color: var(--st-muted); font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: border-color var(--st-duration-fast), color var(--st-duration-fast);
}

.elb-add-module:hover[b-5bso456b8i] { border-color: var(--st-primary); color: var(--st-primary); }

.elb-add-module[b-5bso456b8i]  .mud-icon-root { font-size: 18px; }
/* /Components/ELearning/ELearningCourseList.razor.rz.scp.css */
.el-course-desc[b-q836vtzq3f] { max-width: 380px; }
/* /Components/ELearning/ELearningCourseStats.razor.rz.scp.css */
.el-skel-title[b-78zfylhsez] { width: 240px; height: 18px; }

.el-kpi-skel[b-78zfylhsez] { padding: 16px; }

.el-kpi-skel .st-skeleton:first-child[b-78zfylhsez] { width: 50%; }

.el-stats-charts[b-78zfylhsez] { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--st-space-4); margin-bottom: var(--st-space-4); }

@media (max-width: 900px) { .el-stats-charts[b-78zfylhsez] { grid-template-columns: 1fr; } }

.el-bars[b-78zfylhsez] {
    display: flex; align-items: flex-end; gap: 14px; height: 160px;
    border-bottom: 1px dashed var(--st-border); padding-bottom: 6px;
}

.el-bars__col[b-78zfylhsez] { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }

.el-bars__count[b-78zfylhsez] { font-size: 12px; font-weight: 600; color: var(--st-muted); }

.el-bars__bar[b-78zfylhsez] { width: 100%; border-radius: 6px 6px 0 0; }

.el-bars__labels[b-78zfylhsez] { display: flex; gap: 14px; margin-top: 8px; }

.el-bars__label[b-78zfylhsez] { flex: 1; text-align: center; font-size: 11px; color: var(--st-subtle); }

.el-donut-row[b-78zfylhsez] { display: flex; align-items: center; gap: 18px; }

.el-donut[b-78zfylhsez] {
    width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

.el-donut__hole[b-78zfylhsez] {
    width: 84px; height: 84px; border-radius: 50%; background: var(--st-white);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.el-donut__pct[b-78zfylhsez] { font-size: 20px; font-weight: 700; color: var(--st-text-strong); }

.el-donut__label[b-78zfylhsez] { font-size: 10px; color: var(--st-subtle); text-transform: uppercase; letter-spacing: 0.04em; }

.el-score[b-78zfylhsez] { font-weight: 700; }

.el-score--low[b-78zfylhsez] { color: var(--st-error); }
/* /Components/ELearning/Kpi.razor.rz.scp.css */
.el-kpi[b-8t3tauoza2] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    padding: 14px 16px;
}

.el-kpi__label[b-8t3tauoza2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.el-kpi__value[b-8t3tauoza2] {
    font-size: 24px;
    font-weight: 700;
    color: var(--st-text-strong);
    margin-top: 4px;
    letter-spacing: -0.01em;
}

.el-kpi__sub[b-8t3tauoza2] { font-size: 11px; font-weight: 600; color: var(--st-success); margin-top: 2px; }

.el-kpi__sub.is-down[b-8t3tauoza2] { color: var(--st-error); }
/* /Components/ELearning/Legend.razor.rz.scp.css */
.el-legend[b-mp4tfrjeke] { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }

.el-legend__swatch[b-mp4tfrjeke] { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.el-legend__label[b-mp4tfrjeke] { flex: 1; color: var(--st-muted); }

.el-legend__value[b-mp4tfrjeke] { font-weight: 700; color: var(--st-text-strong); }
/* /Components/EmployeeEditDialog.razor.rz.scp.css */
/* EmployeeEditDialog: create/edit employee. The shell is the shared .st-dialog (icon tile
   title, padded single-column body, Ghost Cancel + Primary Save); these rules only size the
   photo row, the invite row and the small helper text. */

.emp-edit-skeleton[b-4cxrqo99fu] {
    padding: 16px 0;
}

.emp-edit-photo[b-4cxrqo99fu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.emp-edit-photo__side[b-4cxrqo99fu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.emp-edit-avatar[b-4cxrqo99fu] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.emp-edit-avatar--photo[b-4cxrqo99fu] {
    object-fit: cover;
    border: 2px solid var(--st-border);
}

.emp-edit-avatar--initials[b-4cxrqo99fu] {
    color: var(--st-white);
    font-size: 18px;
    font-weight: 600;
}

.emp-edit-avatar--empty[b-4cxrqo99fu] {
    background: var(--st-bg-alt);
    color: var(--st-subtle);
}

.emp-edit-avatar--empty[b-4cxrqo99fu]  .mud-icon-root {
    font-size: 32px;
}

.emp-edit-hint[b-4cxrqo99fu] {
    font-size: 12px;
    color: var(--st-subtle);
}

.emp-edit-hint--muted[b-4cxrqo99fu] {
    color: var(--st-muted);
}

.emp-edit-dept-dot[b-4cxrqo99fu] {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.emp-edit-invite[b-4cxrqo99fu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--st-border-light);
}

.emp-edit-invite__text[b-4cxrqo99fu] {
    flex: 1;
    font-size: 14px;
    color: var(--st-muted);
}

.emp-edit[b-4cxrqo99fu]  .emp-edit-invite-link input {
    font-size: 12px;
}

.emp-edit[b-4cxrqo99fu]  .emp-edit-password {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.emp-edit-consequences[b-4cxrqo99fu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
}
/* /Components/EmployeeLearningHistoryPanel.razor.rz.scp.css */
/* EmployeeLearningHistoryPanel: stat tiles above two StCard tables (courses, knowledge files).
   Moved out of an inline <style> block, which leaked these rules globally. Tables are the
   shared .st-table; statuses are StStatusBadge. */

.lv-stats[b-7yc2vo4j97] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

@media (max-width: 900px) {
    .lv-stats[b-7yc2vo4j97] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lv-stat[b-7yc2vo4j97] {
    padding: 14px 16px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
}

.lv-stat--accent[b-7yc2vo4j97] {
    background: var(--st-primary-light);
    border-color: var(--st-primary-border);
}

.lv-stat__label[b-7yc2vo4j97] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.lv-stat__value[b-7yc2vo4j97] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--st-text);
}

.lv-stat--accent .lv-stat__value[b-7yc2vo4j97] {
    color: var(--st-primary);
}

.lv-stat__unit[b-7yc2vo4j97] {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
}

.lv-stat__meta[b-7yc2vo4j97] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.lv-skeleton[b-7yc2vo4j97] {
    width: 60%;
}

.lv-row--clickable[b-7yc2vo4j97] {
    cursor: pointer;
}

.lv-num[b-7yc2vo4j97] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lv-ts[b-7yc2vo4j97] {
    color: var(--st-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lv-course-cell[b-7yc2vo4j97] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.lv-course-cell__icon[b-7yc2vo4j97] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--st-radius);
    background: var(--st-primary-light);
    color: var(--st-primary);
}

.lv-course-cell__icon[b-7yc2vo4j97]  .mud-icon-root {
    font-size: 16px;
}

.lv-course-cell__body[b-7yc2vo4j97] {
    min-width: 0;
}

.lv-course-cell__title[b-7yc2vo4j97] {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Knowledge file type: a tag (not a state), tinted per type. */
.lv-type--pdf[b-7yc2vo4j97] {
    background: var(--st-error-light);
    color: var(--st-error);
}

.lv-type--video[b-7yc2vo4j97] {
    background: var(--st-primary-light);
    color: var(--st-primary);
}

.lv-type--image[b-7yc2vo4j97] {
    background: var(--st-success-light);
    color: var(--st-success-dark);
}

.lv-file-meta[b-7yc2vo4j97] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lv-mobile[b-7yc2vo4j97] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.lv-mobile[b-7yc2vo4j97]  .mud-icon-root {
    font-size: 11px;
}

.lv-score[b-7yc2vo4j97] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lv-score--high[b-7yc2vo4j97] {
    color: var(--st-success);
}

.lv-score--mid[b-7yc2vo4j97] {
    color: var(--st-warning);
}

.lv-score--low[b-7yc2vo4j97] {
    color: var(--st-error);
}

.lv-views[b-7yc2vo4j97] {
    font-weight: 700;
}

.lv-views-x[b-7yc2vo4j97] {
    font-weight: 500;
    color: var(--st-subtle);
}

.lv-foot[b-7yc2vo4j97] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--st-subtle);
}

.lv-foot[b-7yc2vo4j97]  .mud-icon-root {
    font-size: 12px;
}
/* /Components/EmployeeSalaryPanel.razor.rz.scp.css */
/* Layout for the employee pay panel: the current base pay on one line, one list of all rates
   (base pay history and individual pay code rates), and "+ Add rate", which opens a dialog.
   All colours come from the --st-* tokens. */

.st-salary-panel[b-juzu0qqboj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Current base pay on one line, or a small muted note when there is none ── */

.st-salary-current[b-juzu0qqboj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.st-salary-current-empty[b-juzu0qqboj] {
    font-size: 12.5px;
    color: var(--st-muted);
}

/* Two-up on a dialog's width, single column once it gets narrow. */
.st-salary-form[b-juzu0qqboj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ── History ─────────────────────────────────────────────────────────────── */

.st-salary-history[b-juzu0qqboj] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
    overflow: hidden;
}

.st-salary-row[b-juzu0qqboj] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 40px;
    grid-template-areas: "main dates actions" "note note actions";
    align-items: center;
    gap: 2px 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--st-border-light);
}

.st-salary-row:last-child[b-juzu0qqboj] {
    border-bottom: none;
}

.st-salary-row--current[b-juzu0qqboj] {
    background: var(--st-success-light);
}

.st-salary-row-main[b-juzu0qqboj] {
    grid-area: main;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.st-salary-row-amount[b-juzu0qqboj] {
    font-weight: 600;
    color: var(--st-text-strong);
}

.st-salary-row-unit[b-juzu0qqboj] {
    font-size: 12px;
    color: var(--st-muted);
}

.st-salary-row-dates[b-juzu0qqboj] {
    grid-area: dates;
    font-size: 12.5px;
    color: var(--st-muted);
}

.st-salary-row-note[b-juzu0qqboj] {
    grid-area: note;
    font-size: 12px;
    color: var(--st-subtle);
}

.st-salary-row-actions[b-juzu0qqboj] {
    grid-area: actions;
    justify-self: end;
}

@media (max-width: 599px) {
    .st-salary-form[b-juzu0qqboj] {
        grid-template-columns: minmax(0, 1fr);
    }

    .st-salary-row[b-juzu0qqboj] {
        grid-template-columns: minmax(0, 1fr) 40px;
        grid-template-areas: "main actions" "dates actions" "note note";
    }
}

/* Individual-rate rows carry two actions (edit + archive). */
.st-salary-row--two-actions[b-juzu0qqboj] {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) 72px;
}
/* /Components/GpsAutoCompleteFields.razor.rz.scp.css */
/* GPS auto-complete block. Only the layout MudBlazor's utilities do not cover:
   the fence select and the "New drawing" button share one row, and the button has to
   line up with the dense outlined select's input box rather than with its label slot. */

.gps-fence-select[b-6vojcv0568]  .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.gps-new-drawing[b-6vojcv0568] {
    flex: 0 0 auto;
}

/* Matches the 40px height of a dense outlined MudSelect next to it. */
.gps-new-drawing[b-6vojcv0568]  .mud-button-root {
    height: 40px;
    white-space: nowrap;
}

.gps-hint[b-6vojcv0568] {
    font-size: 11px;
    color: var(--st-subtle);
}

.gps-fence-note[b-6vojcv0568] {
    font-size: 12px;
    color: var(--st-muted);
}
/* /Components/ImportTasksDialog.razor.rz.scp.css */
/* Import tasks from documents (drafts workspace). The drop zone, file rows, chips and defaults
   box reuse the shared .cfd-*, .cfu-*, .st-chip-* and .sai-* classes in design-system.css; only
   the review cards are here. */

/* A compact version of the shared dashed drop zone: the workspace below is the main content. */
.tid-drop[b-5oea31lgve] {
    padding: 14px 16px;
}

.tid-chip-count[b-5oea31lgve] {
    margin-left: 4px;
    font-weight: 500;
    opacity: 0.7;
}

.tid-toolbar[b-5oea31lgve] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.tid-cards[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tid-card[b-5oea31lgve] {
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-white);
}

.tid-card.is-off[b-5oea31lgve] {
    opacity: 0.6;
    border-style: dashed;
}

.tid-card__head[b-5oea31lgve] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.tid-card__titles[b-5oea31lgve] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tid-card__meta[b-5oea31lgve] {
    font-size: 11px;
    color: var(--st-subtle);
}

.tid-card__trades[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 10px 50px;
}

.tid-card__file[b-5oea31lgve] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tid-card__body[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--st-border-light);
}

.tid-grid[b-5oea31lgve] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}

.tid-grid--4[b-5oea31lgve] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tid-title-row[b-5oea31lgve] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 760px) {
    .tid-grid[b-5oea31lgve],
    .tid-grid--4[b-5oea31lgve],
    .tid-title-row[b-5oea31lgve] { grid-template-columns: minmax(0, 1fr); }
}

.tid-field[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tid-field__label[b-5oea31lgve] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
}

.tid-pair[b-5oea31lgve] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 8px;
}

.tid-missing[b-5oea31lgve] {
    font-size: 12px;
    color: var(--st-error);
}

.tid-checklist[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tid-checklist__toggle[b-5oea31lgve] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    cursor: pointer;
}

.tid-checklist__summary[b-5oea31lgve] {
    font-weight: 400;
    color: var(--st-muted);
}

.tid-section[b-5oea31lgve] {
    display: flex;
    flex-direction: column;
    padding-left: 24px;
}

.tid-section__name[b-5oea31lgve] {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
    margin: 6px 0 2px;
}

.tid-item[b-5oea31lgve] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--st-text);
    border-bottom: 1px solid var(--st-border-light);
}

.tid-item__text[b-5oea31lgve] {
    flex: 1;
    min-width: 0;
}
/* /Components/Inventory/CatalogItemCard.razor.rz.scp.css */
/* Catalog item card (Inventory > Manage): photo, name, price, edit + activate controls and a
   drag handle for pointer reorder (touch-reorder.js toggles .reorder-dragging on the card). */
.inventory-card[b-ru76ac0p7c] {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: relative; padding: 14px 10px 12px;
    border: 2px solid var(--st-border); border-radius: var(--st-radius-md); background: var(--st-white);
    transition: border-color 0.15s;
    /* No text selection on the card: on iPad a long-press to drag would otherwise trigger the
       selection highlight / callout magnifier and swallow the reorder gesture. */
    user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.inventory-card.inactive[b-ru76ac0p7c] { opacity: 0.45; }
.inventory-card.has-qty[b-ru76ac0p7c] { border-color: var(--st-primary); background: var(--st-primary-light); }
.inventory-card.has-qty-return[b-ru76ac0p7c] { border-color: var(--st-error); background: var(--st-error-light); }
.inventory-card.reorder-dragging[b-ru76ac0p7c] { border-color: var(--st-primary); border-style: dashed; background: var(--st-primary-light); opacity: 0.7; }

.inventory-card-edit-bar[b-ru76ac0p7c] { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; gap: 4px; }
.inventory-card-reorder-bar[b-ru76ac0p7c] { position: absolute; top: 6px; left: 6px; z-index: 2; display: flex; align-items: center; gap: 4px; }
.inventory-drag-handle[b-ru76ac0p7c] { cursor: grab; display: flex; align-items: center; touch-action: none; padding: 6px; margin: -6px; }

.inventory-edit-btn[b-ru76ac0p7c] {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-white);
    color: var(--st-muted); cursor: pointer;
}
.inventory-edit-btn:hover[b-ru76ac0p7c] { background: var(--st-bg-alt); border-color: var(--st-border-hover); }
.inventory-edit-btn:disabled[b-ru76ac0p7c] { opacity: .35; cursor: not-allowed; }
.inventory-edit-btn.deactivate[b-ru76ac0p7c] { color: var(--st-error); }
.inventory-edit-btn.activate[b-ru76ac0p7c] { color: var(--st-success); }

.inventory-card-photo[b-ru76ac0p7c] { margin-top: 4px; }
.inventory-card-img[b-ru76ac0p7c] { display: block; width: 128px; height: 128px; object-fit: cover; border-radius: var(--st-radius); }
.inventory-card-img--empty[b-ru76ac0p7c] { display: flex; align-items: center; justify-content: center; background: var(--st-bg-alt); }
.inventory-card-img--empty[b-ru76ac0p7c]  .inventory-card-img__icon { font-size: 64px; color: var(--st-border-hover); }

.inventory-card-name[b-ru76ac0p7c],
.inventory-card-desc[b-ru76ac0p7c] {
    width: 100%; max-width: 100%; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inventory-card-name[b-ru76ac0p7c] { font-size: 13px; font-weight: 600; color: var(--st-text); }
.inventory-card-desc[b-ru76ac0p7c] { font-size: 11px; color: var(--st-subtle); }
.inventory-card-price[b-ru76ac0p7c] { font-size: 12px; font-weight: 600; color: var(--st-primary); text-align: center; }

.inventory-reorder-link[b-ru76ac0p7c] { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--st-muted); text-decoration: none; }
.inventory-reorder-link:hover[b-ru76ac0p7c] { color: var(--st-primary); text-decoration: underline; }

.inventory-card-qty-row[b-ru76ac0p7c] { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.inventory-qty-btn[b-ru76ac0p7c] {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--st-border); border-radius: 50%; background: var(--st-bg);
    font-size: 22px; font-weight: 600; line-height: 1; color: var(--st-text); cursor: pointer;
    transition: background 0.1s;
}
.inventory-qty-btn:hover:not(:disabled)[b-ru76ac0p7c] { background: var(--st-border); }
.inventory-qty-btn:disabled[b-ru76ac0p7c] { opacity: 0.4; cursor: not-allowed; }
.inventory-qty-display[b-ru76ac0p7c] { min-width: 32px; text-align: center; font-size: 20px; font-weight: 700; color: var(--st-muted); }
.inventory-qty-display.qty-nonzero[b-ru76ac0p7c] { color: var(--st-primary); }
.inventory-qty-display.qty-nonzero-return[b-ru76ac0p7c] { color: var(--st-error); }
/* /Components/Inventory/CatalogItemModal.razor.rz.scp.css */
/* Catalog item dialog: photo row, barcode preview and the camera scan overlay. */
.cim-photo-row[b-0xg9dzskzc] { display: flex; align-items: center; gap: 16px; }
.cim-photo[b-0xg9dzskzc] {
    width: 80px; height: 80px; flex-shrink: 0; object-fit: cover;
    border: 1px solid var(--st-border); border-radius: var(--st-radius);
}
.cim-photo--empty[b-0xg9dzskzc] { display: flex; align-items: center; justify-content: center; background: var(--st-bg-alt); }

.cim-barcode-row[b-0xg9dzskzc] { display: flex; align-items: flex-start; gap: 12px; }
.cim-barcode-row[b-0xg9dzskzc]  .cim-uom { flex: 0 0 120px; }
.cim-barcode-preview[b-0xg9dzskzc] {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius); background: var(--st-surface-alt);
}
.cim-barcode-svg[b-0xg9dzskzc] { max-width: 100%; }

.cim-scan-overlay[b-0xg9dzskzc] {
    position: fixed; inset: 0; z-index: 11000; padding: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .6);
}
.cim-scan-box[b-0xg9dzskzc] {
    width: 100%; max-width: 380px; padding: 20px;
    background: var(--st-white); border-radius: var(--st-radius-lg); box-shadow: var(--st-shadow-modal);
}
.cim-scan-video[b-0xg9dzskzc] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--st-radius-md); background: var(--st-text-strong); }
/* /Components/Inventory/InventoryStatsCharts.razor.rz.scp.css */
/* Inventory statistics charts: two cards with the approved title bar (semibold 14px title,
   divider under it). Colours come from the --st-* tokens, SVG strokes included. */
.stats-charts[b-t8v2quqb6u] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 900px) { .stats-charts[b-t8v2quqb6u] { grid-template-columns: 1fr; } }

.chart-card[b-t8v2quqb6u] { background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md); min-width: 0; }
.chart-head[b-t8v2quqb6u] { display: flex; align-items: center; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--st-border-light); }
.chart-title[b-t8v2quqb6u] { margin: 0; font-size: 14px; font-weight: 600; color: var(--st-text); }
.chart-card > :not(.chart-head)[b-t8v2quqb6u] { margin: 16px; }
.chart-empty[b-t8v2quqb6u] { color: var(--st-subtle); font-size: 13px; padding: 32px 0; text-align: center; }

.trend-wrap[b-t8v2quqb6u] { display: flex; gap: 8px; }
.trend-yaxis[b-t8v2quqb6u] {
    display: flex; flex-direction: column; justify-content: space-between; height: 180px; min-width: 24px;
    font-size: 10px; color: var(--st-subtle); text-align: right;
}
.trend-plot[b-t8v2quqb6u] { flex: 1; min-width: 0; }
.trend-svg[b-t8v2quqb6u] { display: block; width: 100%; height: 180px; }
.trend-grid[b-t8v2quqb6u] { stroke: var(--st-border-light); stroke-width: 1; }
.trend-base[b-t8v2quqb6u] { stroke: var(--st-border); stroke-width: 1; }
.trend-area[b-t8v2quqb6u] { fill: var(--st-primary-light); }
.trend-line[b-t8v2quqb6u] { fill: none; stroke: var(--st-primary); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-xaxis[b-t8v2quqb6u] { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--st-subtle); }

.bars[b-t8v2quqb6u] { display: flex; flex-direction: column; gap: 10px; }
.bar-row[b-t8v2quqb6u] { display: flex; align-items: center; gap: 10px; }
.bar-label[b-t8v2quqb6u] { width: 130px; font-size: 12px; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track[b-t8v2quqb6u] { flex: 1; height: 18px; background: var(--st-bg-alt); border-radius: var(--st-radius-sm); overflow: hidden; }
.bar-fill[b-t8v2quqb6u] { height: 100%; min-width: 2px; background: var(--st-primary); border-radius: var(--st-radius-sm); }
.bar-value[b-t8v2quqb6u] { width: 48px; text-align: right; font-size: 12px; font-weight: 600; color: var(--st-text); }
/* /Components/Inventory/IssuerPinManager.razor.rz.scp.css */
/* Issuer PIN list: one row per station issuer inside a flush StCard. */
.pin-manager[b-t9wwnajpnr] { max-width: 720px; }
.pin-row[b-t9wwnajpnr] {
    display: flex; align-items: center; gap: 12px;
    min-height: 64px; padding: 10px 16px; border-top: 1px solid var(--st-border-light);
}
.pin-row:first-child[b-t9wwnajpnr] { border-top: none; }
.pin-row-avatar[b-t9wwnajpnr] {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    background: var(--st-primary); color: var(--st-white); font-size: 15px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pin-skel-avatar[b-t9wwnajpnr] { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; }
.pin-row-avatar img[b-t9wwnajpnr] { width: 40px; height: 40px; object-fit: cover; }
.pin-skel-name[b-t9wwnajpnr] { width: 40%; }
.pin-row[b-t9wwnajpnr]  .pin-input { width: 140px; flex: 0 0 auto; }
.pin-row[b-t9wwnajpnr]  .pin-clear.mud-button-root { color: var(--st-error); }
.pin-row[b-t9wwnajpnr]  .pin-clear.mud-button-root:hover { background: var(--st-error-light); }
/* /Components/InvoiceEditDialog.razor.rz.scp.css */
/* InvoiceEditDialog: header fields in a three-column grid, the lines in the shared st-table
   (edited in place), the source tasks, and a footer with the total and the send action. */

/* ── Dialog body ──────────────────────────────────────────────────────── */
.inv-body[b-03i5vtce8p] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 24px;
    /* Keep the whole dialog within the viewport so the title bar (and its action
       buttons) never clip against the top edge: the body scrolls instead. */
    max-height: 72vh;
    overflow-y: auto;
}

/* ── Title bar (icon-tile + heading + right actions) ──────────────────── */
.inv-head[b-03i5vtce8p] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.inv-head .ttl[b-03i5vtce8p] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-sub[b-03i5vtce8p] {
    font-size: 12px;
    color: var(--st-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-head-right[b-03i5vtce8p] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 36px;
}

/* ── Header fields (3-column grid) ─────────────────────────────────────── */
.inv-meta-row[b-03i5vtce8p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.inv-note-row[b-03i5vtce8p] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .inv-meta-row[b-03i5vtce8p],
    .inv-note-row[b-03i5vtce8p] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.inv-skel-field[b-03i5vtce8p] {
    height: 40px;
    border-radius: var(--st-radius);
}

/* ── Lines ─────────────────────────────────────────────────────────────── */
.inv-lines-head[b-03i5vtce8p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.inv-col-drag[b-03i5vtce8p] { width: 36px; padding-left: 8px !important; padding-right: 0 !important; }
.inv-col-type[b-03i5vtce8p] { width: 160px; }
.inv-col-qty[b-03i5vtce8p] { width: 90px; }
.inv-col-money[b-03i5vtce8p] { width: 116px; }

.inv-drag-handle[b-03i5vtce8p] {
    cursor: grab;
    color: var(--st-border-hover);
    user-select: none;
    display: inline-flex;
}

.inv-drag-handle:active[b-03i5vtce8p] {
    cursor: grabbing;
}

/* In-place editors inside a line: outlined dense Mud fields. ::deep because the classes land on
   MudBlazor's rendered roots. The description grows with its text (AutoGrow); numbers align right. */
.inv-lines td[b-03i5vtce8p] { vertical-align: top; }
.inv-col-desc[b-03i5vtce8p] { min-width: 220px; }
[b-03i5vtce8p] .inv-line-field { margin: 0; width: 100%; }
[b-03i5vtce8p] .inv-line-field .mud-input { font-size: 13px; }
[b-03i5vtce8p] .inv-line-field--num input { text-align: right; }

/* ── Linked source tasks ──────────────────────────────────────────────── */
.inv-tasks-section[b-03i5vtce8p] {
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    padding: 6px 14px;
}

.inv-task-row[b-03i5vtce8p] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.inv-task-row + .inv-task-row[b-03i5vtce8p] { border-top: 1px solid var(--st-border-light); }

.inv-task-info[b-03i5vtce8p] { min-width: 0; flex: 1; }
.inv-task-primary[b-03i5vtce8p] { font-size: 13px; font-weight: 500; color: var(--st-text); }
.inv-task-meta[b-03i5vtce8p] { font-size: 11px; color: var(--st-subtle); margin-top: 1px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
/* The total keeps the left edge; the gap pushes the send action across to the right. */
.inv-footer-total[b-03i5vtce8p] {
    font-size: 14px;
    color: var(--st-muted);
    margin-right: auto;
    padding: 0 8px;
}

.inv-footer-total strong[b-03i5vtce8p] {
    color: var(--st-text);
    font-weight: 700;
}

.inv-footer-saving[b-03i5vtce8p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
    font-size: 12px;
    color: var(--st-muted);
}

.inv-footer-saving .mud-progress-circular[b-03i5vtce8p] { width: 13px !important; height: 13px !important; }

/* While a push is in flight the button is disabled; ::deep is needed because the
   class lands on StButton's own rendered root, not on an element written here. */
[b-03i5vtce8p] .inv-send-btn[disabled],
[b-03i5vtce8p] .inv-send-btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: progress;
}
/* /Components/InvoiceTimelineDialog.razor.rz.scp.css */
/* Invoice history: the shared st-table in a table card, plain and monochrome (no coloured dots). */

.itl-body[b-6z861bgeec] {
    padding: 16px 24px 20px;
    max-height: 62vh;
    overflow-y: auto;
}

/* ── Table: the shared .st-table in a .st-table-card, with StPager under it ── */
.itl-table td[b-6z861bgeec] {
    vertical-align: top;
}

.itl-col-when[b-6z861bgeec] { width: 150px; }
.itl-col-who[b-6z861bgeec] { width: 140px; }
.itl-col-event[b-6z861bgeec] { width: 150px; }

.itl-when[b-6z861bgeec] {
    color: var(--st-muted);
    white-space: nowrap;
}

.itl-who[b-6z861bgeec] {
    white-space: nowrap;
}

.itl-event[b-6z861bgeec] {
    white-space: nowrap;
    font-weight: 500;
}

/* ── Change details ────────────────────────────────────────────────────── */
.itl-change-row[b-6z861bgeec] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
}

.itl-change-row + .itl-change-row[b-6z861bgeec] {
    margin-top: 2px;
}

.itl-change-field[b-6z861bgeec] {
    color: var(--st-muted);
}

.itl-change-val[b-6z861bgeec] {
    color: var(--st-text-strong);
}

.itl-arrow[b-6z861bgeec] {
    color: var(--st-subtle);
    padding: 0 2px;
}

.itl-removed[b-6z861bgeec] {
    text-decoration: line-through;
    color: var(--st-subtle);
}

.itl-line-name[b-6z861bgeec] {
    font-weight: 600;
    color: var(--st-text-strong);
    margin-bottom: 2px;
}
/* /Components/Knowledge/KnowledgeAddItemDialog.razor.rz.scp.css */
/* KnowledgeAddItemDialog: type tiles, the file drop area and the YouTube preview. */
.kbi-sub[b-p2kh9hxdfr] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
}

.kbi-types[b-p2kh9hxdfr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kbi-type[b-p2kh9hxdfr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.kbi-type:hover[b-p2kh9hxdfr] { border-color: var(--st-border-hover); }
.kbi-type.is-on[b-p2kh9hxdfr] {
    background: var(--st-primary-light);
    border-color: var(--st-primary);
}

.kbi-type-label[b-p2kh9hxdfr] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-text-strong);
}

/* Dashed drop area wired to the hidden InputFile through label for=. */
.kbi-drop[b-p2kh9hxdfr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 24px 16px;
    border: 2px dashed var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
    text-align: center;
    cursor: pointer;
}

.kbi-drop:hover[b-p2kh9hxdfr] { border-color: var(--st-border-hover); }
.kbi-drop[b-p2kh9hxdfr]  .kbi-drop-icon {
    font-size: 28px;
    color: var(--st-subtle);
    margin-bottom: 4px;
}

.kbi-drop-title[b-p2kh9hxdfr] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.kbi-drop-sub[b-p2kh9hxdfr] {
    font-size: 11px;
    color: var(--st-subtle);
}

.kbi-video[b-p2kh9hxdfr] {
    border-radius: 10px;
    overflow: hidden;
    background: var(--st-text-strong);
    aspect-ratio: 16 / 9;
}

.kbi-video iframe[b-p2kh9hxdfr] {
    width: 100%;
    height: 100%;
    border: 0;
}
/* /Components/Knowledge/KnowledgeFolderDialog.razor.rz.scp.css */
/* KnowledgeFolderDialog: the "shared with" department picker inside the st-dialog shell. */
.kbf-sub[b-b7vduvap6o] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
}

.kbf-list[b-b7vduvap6o] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
}

.kbf-row[b-b7vduvap6o] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.kbf-row:last-child[b-b7vduvap6o] { border-bottom: none; }
.kbf-row:hover[b-b7vduvap6o] { background: var(--st-bg); }
.kbf-row.is-on[b-b7vduvap6o] { background: var(--st-bg); }
.kbf-row.is-implicit[b-b7vduvap6o] { opacity: 0.55; }
.kbf-row--all[b-b7vduvap6o] { background: var(--st-surface-alt); }
.kbf-row--all.is-on[b-b7vduvap6o] { background: var(--st-primary-light); }

/* Department colour is data, passed as --dept. */
.kbf-glyph[b-b7vduvap6o] {
    width: 28px;
    height: 28px;
    border-radius: var(--st-radius-sm);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dept, var(--st-primary));
    background: color-mix(in srgb, var(--dept, var(--st-primary)) 10%, transparent);
}

.kbf-glyph--all[b-b7vduvap6o] {
    color: var(--st-primary);
    background: var(--st-primary-light);
}

.kbf-row-text[b-b7vduvap6o] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kbf-row-title[b-b7vduvap6o] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text-strong);
}

.kbf-row-sub[b-b7vduvap6o] {
    font-size: 11px;
    color: var(--st-muted);
}

.kbf-row-name[b-b7vduvap6o] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text-strong);
}

/* Check indicator: empty box, blue when picked, grey when implied by "all". */
.kbf-check[b-b7vduvap6o] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--st-border-hover);
    color: var(--st-white);
}

.kbf-check.is-on[b-b7vduvap6o] {
    background: var(--st-primary);
    border-color: var(--st-primary);
}

.kbf-check.is-implicit[b-b7vduvap6o] {
    background: var(--st-subtle);
    border-color: var(--st-subtle);
}

.kbf-empty[b-b7vduvap6o] {
    padding: 14px;
    font-size: 12px;
    color: var(--st-subtle);
    text-align: center;
}

.kbf-note[b-b7vduvap6o] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    font-size: 12px;
    color: var(--st-muted);
}

/* MudIcon renders its own root, so reach it through ::deep from the span written here. */
.kbf-glyph[b-b7vduvap6o]  .mud-icon-root { font-size: 16px; color: inherit; }
.kbf-check[b-b7vduvap6o]  .mud-icon-root { font-size: 13px; color: inherit; }
.kbf-note[b-b7vduvap6o]  .kbf-note-icon {
    font-size: 14px;
    color: var(--st-subtle);
    flex-shrink: 0;
    margin-top: 1px;
}
/* /Components/Knowledge/KnowledgeFolderList.razor.rz.scp.css */
.kn-min0[b-bte009xuk3] { min-width: 0; }

.kn-ellipsis[b-bte009xuk3] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }

.kn-all-teams[b-bte009xuk3] { --dept: var(--st-ai); }
/* /Components/Knowledge/KnowledgeFolderView.razor.rz.scp.css */
.kn-skel-title[b-he0u32pf4u] { width: 220px; height: 18px; }

.kn-min0[b-he0u32pf4u] { min-width: 0; }

.kn-ellipsis[b-he0u32pf4u] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }

.kn-all-teams[b-he0u32pf4u] { --dept: var(--st-ai); }

.kn-viewers[b-he0u32pf4u] { display: inline-flex; align-items: center; gap: 5px; }

.kn-viewers[b-he0u32pf4u]  .mud-icon-root { font-size: 13px; }
/* /Components/Knowledge/KnowledgeItemServiceTypesDialog.razor.rz.scp.css */
/* The item title under the dialog title. */
.kb-st-sub[b-1fifvfj531] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Knowledge/KnowledgeServiceTypesView.razor.rz.scp.css */
.kb-st-layout[b-fdlcq37nem] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 900px) {
    .kb-st-layout[b-fdlcq37nem] { grid-template-columns: 1fr; }
}

/* One service type in the left rail. */
.kb-st-row[b-fdlcq37nem] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: transparent;
    font-family: var(--st-font-body);
    text-align: left;
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.kb-st-row:last-child[b-fdlcq37nem] { border-bottom: none; }
.kb-st-row:hover[b-fdlcq37nem] { background: var(--st-bg); }
.kb-st-row.is-active[b-fdlcq37nem] { background: var(--st-primary-light); }
.kb-st-row.is-active span:first-child[b-fdlcq37nem] { color: var(--st-primary); }

/* StCard is a component: reach its root through ::deep from the layout wrapper. */
.kb-st-layout[b-fdlcq37nem]  .kb-st-detail { min-height: 320px; }

.kb-st-item[b-fdlcq37nem] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--st-border-light);
}

.kb-st-ellipsis[b-fdlcq37nem] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Attach existing item" picker (a MudDialog on the st-dialog shell). */
.kb-st-picker-search[b-fdlcq37nem] { padding: 16px 24px 10px; }

.kb-st-picker-body[b-fdlcq37nem] {
    max-height: 55vh;
    overflow-y: auto;
    border-top: 1px solid var(--st-border-light);
}

.kb-st-picker-row[b-fdlcq37nem] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: transparent;
    font-family: var(--st-font-body);
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.kb-st-picker-row:hover[b-fdlcq37nem] { background: var(--st-bg); }

/* Fill mode (design-system .st-fill): above the stacking breakpoint the two cards share the
   height left under the segment switch, each scrolling inside its own body. The layout stays a
   grid (this scoped rule outranks the shared .st-fill flex column). */
@media (min-width: 901px) {
    .kb-st-layout.st-fill[b-fdlcq37nem] {
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }
}
/* /Components/LocationContactsTab.razor.rz.scp.css */
/* Structure for the location contacts tab. Layout and spacing come from MudBlazor's utility
   classes in the markup; what lives here is the tab-specific structure the utilities have no
   name for (the contact card, the result list, the drop zone, the preview table) and every
   colour is read from a --st-* token. */

/* ── Attach-existing panel ─────────────────────────────────────────────── */

.lc-panel__empty[b-v03bo6h3z0] {
    font-size: 12px;
    color: var(--st-subtle);
    padding: 10px 2px;
}

.lc-results[b-v03bo6h3z0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.lc-result[b-v03bo6h3z0] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.lc-result:hover:not(:disabled)[b-v03bo6h3z0] {
    border-color: var(--st-primary);
    background: var(--st-primary-light);
}

.lc-result:disabled[b-v03bo6h3z0] {
    opacity: 0.5;
    cursor: default;
}

.lc-result[b-v03bo6h3z0]  .lc-result__icon {
    color: var(--st-subtle);
    flex-shrink: 0;
}

.lc-result__body[b-v03bo6h3z0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.lc-result__name[b-v03bo6h3z0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.lc-result__meta[b-v03bo6h3z0] {
    font-size: 11px;
    color: var(--st-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lc-result[b-v03bo6h3z0]  .lc-result__add {
    color: var(--st-primary);
    flex-shrink: 0;
}

/* ── CSV import (dialog) ───────────────────────────────────────────────── */

/* The drop zone is the global .cfd-drop; its file input is invisible and fills the zone, so a
   click opens the picker and a dropped file lands on the input itself. */
.lc-drop[b-v03bo6h3z0]  .lc-drop__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.lc-preview__summary[b-v03bo6h3z0] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    margin-bottom: 8px;
}

.lc-result-errors[b-v03bo6h3z0] {
    margin: 8px 0 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--st-error-dark);
}

/* ── Attached contacts table ───────────────────────────────────────────── */

.lc-name[b-v03bo6h3z0] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* The switch alone in its cell: no label, centred under its column header. */
.st-table[b-v03bo6h3z0]  .lc-switch {
    margin: 0;
}

/* ── CSV import preview ────────────────────────────────────────────────── */

/* A wide preview scrolls inside its own box; the dialog body must never scroll sideways. */
.lc-preview-scroll[b-v03bo6h3z0] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.lc-preview-table td[b-v03bo6h3z0] {
    white-space: nowrap;
}

.lc-preview-table tr.lc-invalid td[b-v03bo6h3z0] {
    background: var(--st-error-light);
}

.lc-preview-table td.lc-errors[b-v03bo6h3z0] {
    color: var(--st-error-dark);
    white-space: normal;
    min-width: 200px;
}
/* /Components/LocationDrawingPreview.razor.rz.scp.css */
/* Drawing preview inside a form (create-agreement dialog). Token-backed; only the structure
   that is specific to this strip lives here. */

.ldp[b-8i3cmnevsp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md, 8px);
    background: var(--st-bg);
}

.ldp-label[b-8i3cmnevsp] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.ldp-empty[b-8i3cmnevsp] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--st-subtle);
}

.ldp-empty-icon[b-8i3cmnevsp] {
    font-size: 18px;
    color: var(--st-subtle);
}

.ldp-grid[b-8i3cmnevsp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.ldp-thumb[b-8i3cmnevsp] {
    position: relative;
    height: 74px;
    border-radius: 8px;
    border: 1px solid var(--st-border);
    background-color: #F1F5F9;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.ldp-thumb-noimg[b-8i3cmnevsp] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-border-hover);
}

.ldp-thumb-name[b-8i3cmnevsp] {
    position: relative;
    width: 100%;
    padding: 3px 6px;
    font-size: 11px;
    color: var(--st-white);
    background: rgba(15, 23, 42, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ldp-hint[b-8i3cmnevsp] {
    font-size: 11px;
    color: var(--st-subtle);
}
/* /Components/LocationDrawingTab.razor.rz.scp.css */
/* Location popup > Drawings: a gallery of drawing cards, then the drawing editor (map canvas
   with a floating toolbar). Every colour is a --st-* token; per-tool colours are data (inline). */

/* ── Gallery ───────────────────────────────────────────────────────────── */

.ld-grid[b-8tbn731jdt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.ld-card[b-8tbn731jdt] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ld-card__thumb[b-8tbn731jdt] {
    height: 140px;
    background-color: var(--st-bg-alt);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.ld-card__placeholder[b-8tbn731jdt] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--st-border-hover);
}

.ld-card__placeholder[b-8tbn731jdt]  .mud-icon-root { font-size: 36px; }

.ld-card__totals[b-8tbn731jdt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px 0;
}

.ld-card__total[b-8tbn731jdt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--st-muted);
}

.ld-card__foot[b-8tbn731jdt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 4px 8px 12px;
}

.ld-card__foot--skel[b-8tbn731jdt] {
    display: block;
    padding: 12px;
}

.ld-card__foot--skel .st-skeleton:first-child[b-8tbn731jdt] { width: 60%; }

.ld-card__id[b-8tbn731jdt] {
    min-width: 0;
    flex: 1;
    cursor: pointer;
}

.ld-ellipsis[b-8tbn731jdt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ld-card__foot[b-8tbn731jdt]  .st-row-menu .mud-icon-button { color: var(--st-subtle); }

.ld-dot[b-8tbn731jdt] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ld-dot--tool[b-8tbn731jdt] {
    width: 12px;
    height: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.ld-dot--stat[b-8tbn731jdt] {
    width: 11px;
    height: 11px;
}

/* ── Editor ────────────────────────────────────────────────────────────── */

/* The editor's head row (back, name, autosave, Save) and its canvas sit in one white card rather
   than on the page grey; expanded, the shared .st-map-fs-on layer takes over the frame. */
.ld-editor:not(.st-map-fs-on)[b-8tbn731jdt] {
    padding: 12px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
}

/* On the full location page the editor fills the window like the list: the canvas takes the
   height left under the head row instead of its own vh calc. */
@media (min-width: 769px) {
    .ld-editor.st-fill:not(.st-map-fs-on) .st-drawing-canvas[b-8tbn731jdt] {
        flex: 1 1 0;
        height: auto;
        min-height: 420px;
    }
}

.ld-editor-head[b-8tbn731jdt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ld-editor-name[b-8tbn731jdt] {
    width: 320px;
    max-width: 100%;
}

.ld-autosave[b-8tbn731jdt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
    font-size: 12px;
    color: var(--st-subtle);
    white-space: nowrap;
}

.ld-autosave[b-8tbn731jdt]  .ld-autosave__spin {
    width: 15px;
    height: 15px;
}

.ld-map-host[b-8tbn731jdt] {
    position: absolute;
    inset: 0;
    outline: none;
}

.ld-toolbar[b-8tbn731jdt] {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    max-width: calc(100% - 80px);
    padding: 6px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.ld-sep[b-8tbn731jdt] {
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--st-border-input);
}

.ld-tbtn[b-8tbn731jdt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
    background: var(--st-white);
    border: 1px solid var(--st-border-input);
    border-radius: var(--st-radius);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.ld-tbtn:hover[b-8tbn731jdt] { background: var(--st-bg); border-color: var(--st-border-hover); }
.ld-tbtn.ld-active[b-8tbn731jdt] { background: var(--st-primary-light); border-color: var(--st-primary); color: var(--st-primary); }
.ld-tbtn:disabled[b-8tbn731jdt] { opacity: .4; cursor: default; }
.ld-tbtn:disabled:hover[b-8tbn731jdt] { background: var(--st-white); border-color: var(--st-border-input); }
.ld-tbtn.ld-tbtn--danger[b-8tbn731jdt] { color: var(--st-error); }
.ld-tbtn.ld-add[b-8tbn731jdt] { color: var(--st-primary); }
.ld-tbtn.ld-lasso[b-8tbn731jdt] { border-style: dashed; color: var(--st-primary); font-size: 12px; padding: 4px 8px; }
.ld-tbtn.ld-lasso.ld-active[b-8tbn731jdt] { border-style: solid; background: var(--st-primary-light); }

.ld-tipwrap[b-8tbn731jdt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ld-tooltip[b-8tbn731jdt] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 25;
    width: max-content;
    max-width: 240px;
    padding: 9px 12px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s, visibility 0s linear .15s;
}

.ld-tipwrap:hover .ld-tooltip[b-8tbn731jdt] { opacity: 1; visibility: visible; transition-delay: .45s; }

.ld-tooltip__title[b-8tbn731jdt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-text-strong);
}

.ld-tooltip__meta[b-8tbn731jdt] { font-size: 11px; color: var(--st-muted); margin-top: 2px; }

.ld-tooltip__hint[b-8tbn731jdt] { font-size: 11px; color: var(--st-subtle); margin-top: 6px; }

.ld-editicon[b-8tbn731jdt] {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    color: var(--st-subtle);
    transition: opacity .15s, color .15s;
    cursor: pointer;
}

.ld-tbtn:hover .ld-editicon[b-8tbn731jdt] { opacity: 1; }
.ld-editicon:hover[b-8tbn731jdt] { color: var(--st-primary); }
.ld-editicon[b-8tbn731jdt]  .ld-icon-13 { font-size: 13px; }

.ld-panel-title[b-8tbn731jdt] {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-text-strong);
}

.ld-toolform[b-8tbn731jdt] {
    position: absolute;
    top: 58px;
    left: 12px;
    z-index: 5;
    width: 280px;
    padding: 14px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.ld-gap-10[b-8tbn731jdt] { gap: 10px; }

.ld-color[b-8tbn731jdt] {
    width: 40px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--st-border-input);
    border-radius: var(--st-radius);
    background: none;
    cursor: pointer;
}

.ld-type-label[b-8tbn731jdt] { font-size: 12px; color: var(--st-subtle); }

.ld-toolform__foot[b-8tbn731jdt] { margin-top: 2px; }

.ld-help[b-8tbn731jdt] {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 6;
}

.ld-help-btn[b-8tbn731jdt] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-muted);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    transition: background .15s, color .15s;
}

.ld-help-btn:hover[b-8tbn731jdt] { background: var(--st-bg-alt); color: var(--st-primary); }
.ld-help-btn.ld-active[b-8tbn731jdt] { background: var(--st-primary); color: var(--st-white); }

.ld-help-card[b-8tbn731jdt] {
    position: absolute;
    top: 38px;
    right: 0;
    width: 252px;
    padding: 12px 14px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.ld-help-card .ld-panel-title[b-8tbn731jdt] { margin-bottom: 8px; }

.ld-help-row[b-8tbn731jdt] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--st-muted);
}

.ld-help-row[b-8tbn731jdt]  .ld-help-row__icon { font-size: 16px; color: var(--st-primary); flex-shrink: 0; }

.ld-styletoggles[b-8tbn731jdt] {
    position: absolute;
    top: 88px;
    right: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--st-white);
    border-radius: var(--st-radius);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}

.ld-styletoggle[b-8tbn731jdt] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--st-white);
    color: var(--st-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ld-styletoggle + .ld-styletoggle[b-8tbn731jdt] { border-top: 1px solid var(--st-border-input); }
.ld-styletoggle:hover[b-8tbn731jdt] { background: var(--st-bg-alt); }
.ld-styletoggle.ld-active[b-8tbn731jdt] { background: var(--st-primary); color: var(--st-white); }

.ld-stats[b-8tbn731jdt] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 90%;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}

.ld-stat[b-8tbn731jdt] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--st-text);
    white-space: nowrap;
}

.ld-foot-hint[b-8tbn731jdt] {
    margin-top: 8px;
    font-size: 12px;
    color: var(--st-subtle);
}
/* /Components/LocationPopupDialog.razor.rz.scp.css */
/* LocationPopupDialog: a side navigation beside a content pane, matching the employee modal
   (ShiftScheduler/EmployeeDetailView.razor.css). Content is StCard / .st-card-grid / .st-kv /
   .st-table; the rules here are only the structure those shared pieces do not cover. The
   dialog shell itself (.loc-popup-dialog: width, no padding, hidden title) lives in app.css. */

/* ── Modal layout ────────────────────────────────────────────────────────── */

.loc-popup-body[b-wtjt70t86j] {
    display: flex;
    height: 88vh;
    overflow: hidden;
    margin: 0;
}

.loc-side[b-wtjt70t86j] {
    width: 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--st-bg);
    border-right: 1px solid var(--st-border);
}

.loc-side__head[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--st-border);
}

.loc-side__tile[b-wtjt70t86j] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-primary-light);
    color: var(--st-primary);
}

.loc-side__tile[b-wtjt70t86j]  .mud-icon-root {
    font-size: 20px;
}

.loc-side__who[b-wtjt70t86j] {
    min-width: 0;
}

.loc-side__name[b-wtjt70t86j] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
    word-break: break-word;
}

.loc-side__meta[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

/* Items reuse the sidebar's .st-nav-item (active = primary tint + primary text). */
.loc-side__nav[b-wtjt70t86j] {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.loc-side__nav[b-wtjt70t86j]  .mud-icon-root {
    font-size: 18px;
}

.loc-pane[b-wtjt70t86j] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--st-bg);
}

.loc-pane__head[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px 14px;
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border);
}

.loc-pane__titles[b-wtjt70t86j] {
    min-width: 0;
}

.loc-pane__title-row[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.loc-pane__title[b-wtjt70t86j] {
    font-size: 18px;
    font-weight: 700;
    color: var(--st-text);
    overflow-wrap: anywhere;
}

.loc-pane__facts[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 13px;
    color: var(--st-muted);
}

.loc-pane__actions[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.loc-pane__actions[b-wtjt70t86j]  .loc-pane__close {
    color: var(--st-muted);
}

.loc-pane__body[b-wtjt70t86j] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Full page (PageMode, /locations/{id}) ─────────────────────────────── */

/* The same compact single-line inputs the modal gets from .loc-popup-dialog in app.css. */
.loc-page[b-wtjt70t86j]  .mud-input.mud-input-outlined:not(.mud-input-multiline) {
    min-height: 40px;
    height: 40px;
}

.loc-page[b-wtjt70t86j]  .mud-input.mud-input-outlined:not(.mud-input-multiline) input {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ── Shared bits ─────────────────────────────────────────────────────────── */

.loc-hint[b-wtjt70t86j] {
    font-size: 12px;
    color: var(--st-subtle);
}

.loc-nowrap[b-wtjt70t86j] {
    white-space: nowrap;
}

.loc-prewrap[b-wtjt70t86j] {
    white-space: pre-wrap;
}

.loc-skeleton-w60[b-wtjt70t86j] {
    width: 60%;
}

.loc-skeleton-qr[b-wtjt70t86j] {
    width: 120px;
    height: 120px;
    margin: 16px auto 0;
    border-radius: var(--st-radius);
}

/* A small muted group heading inside a card (13px semibold). */
.loc-subhead[b-wtjt70t86j] {
    margin: 16px 0 4px;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
}

/* Form footer inside a card: Cancel (Ghost) then the primary action, right-aligned. */
/* ── Overview ────────────────────────────────────────────────────────────── */

.loc-req[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--st-border-light);
    font-size: 13px;
    color: var(--st-subtle);
}

.loc-req[b-wtjt70t86j]  .mud-icon-root {
    font-size: 18px;
    color: var(--st-border-hover);
}

.loc-req--on[b-wtjt70t86j] {
    color: var(--st-text);
}

.loc-req--on[b-wtjt70t86j]  .mud-icon-root {
    color: var(--st-success);
}

/* Sized wrappers so the flex sizing doesn't end up on the MudTextField's internal layout
   (which makes the input grow vertically when narrow). */
.loc-f-postal[b-wtjt70t86j] {
    flex: 0 0 120px;
}

.loc-f-city[b-wtjt70t86j] {
    flex: 1 1 120px;
}

.loc-f-region[b-wtjt70t86j] {
    flex: 0 0 110px;
}

.loc-f-country[b-wtjt70t86j] {
    flex: 0 0 140px;
}

.loc-issues__intro[b-wtjt70t86j] {
    padding: 12px 16px 4px;
    font-size: 12px;
    color: var(--st-muted);
}

.loc-issue[b-wtjt70t86j] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border-light);
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.loc-issue:last-child[b-wtjt70t86j] {
    border-bottom: none;
}

.loc-issue:hover[b-wtjt70t86j] {
    background: var(--st-bg);
}

.loc-issue__head[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.loc-issue__title[b-wtjt70t86j] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
}

.loc-issue__line[b-wtjt70t86j] {
    margin: 4px 0 0 4px;
    font-size: 12px;
    color: var(--st-muted);
}

/* Activity timeline rows. */
.loc-tl[b-wtjt70t86j] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
}

.loc-tl + .loc-tl[b-wtjt70t86j] {
    border-top: 1px solid var(--st-border-light);
}

.loc-tl__icon[b-wtjt70t86j] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-primary-light);
}

.loc-tl__icon[b-wtjt70t86j]  .mud-icon-root {
    font-size: 16px;
    color: var(--st-primary);
}

.loc-tl__body[b-wtjt70t86j] {
    flex: 1;
    min-width: 0;
}

.loc-tl__text[b-wtjt70t86j] {
    font-size: 13px;
    color: var(--st-text);
}

.loc-tl__meta[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.loc-tl__more[b-wtjt70t86j] {
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--st-border-light);
}

/* ── Work descriptions ───────────────────────────────────────────────────── */

/* "Create from document" carries a small AI mark on its corner. */
.loc-ai[b-wtjt70t86j] {
    position: relative;
    display: inline-flex;
}

.loc-ai__badge[b-wtjt70t86j] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-ai);
    pointer-events: none;
}

.loc-ai__badge[b-wtjt70t86j]  .mud-icon-root {
    font-size: 11px;
    color: var(--st-white);
}

/* An import in progress is not clickable. */
.st-table.st-table--clickable tbody tr.loc-row-static[b-wtjt70t86j] {
    cursor: default;
}

/* ── Checkpoints ─────────────────────────────────────────────────────────── */

.loc-cp-grid[b-wtjt70t86j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.loc-cp-card[b-wtjt70t86j] {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
}

.loc-cp-card.is-inactive[b-wtjt70t86j] {
    opacity: 0.7;
}

.loc-cp-card.is-dragging[b-wtjt70t86j] {
    opacity: 0.4;
}

.loc-cp-card.is-drop-target[b-wtjt70t86j] {
    outline: 2px solid var(--st-primary);
    outline-offset: -2px;
}

/* Card header: drag handle, name + placement, then the three-dot menu. */
.loc-cp-card__head[b-wtjt70t86j] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: -4px -6px 10px -8px;
}

.loc-cp-card__handle[b-wtjt70t86j] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 28px;
    border-radius: var(--st-radius-sm);
    color: var(--st-subtle);
    cursor: grab;
    transition: background var(--st-duration-fast), color var(--st-duration-fast);
}

.loc-cp-card__handle:hover[b-wtjt70t86j] {
    background: var(--st-bg);
    color: var(--st-muted);
}

.loc-cp-card__handle:active[b-wtjt70t86j] {
    cursor: grabbing;
}

.loc-cp-card__titles[b-wtjt70t86j] {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.loc-cp-card__name[b-wtjt70t86j] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
    overflow-wrap: anywhere;
}

.loc-cp-card__desc[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--st-subtle);
}

.loc-cp-card__badges[b-wtjt70t86j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.loc-cp-card__visual[b-wtjt70t86j] {
    margin: 8px 0;
    text-align: center;
}

.loc-cp-card__visual--link[b-wtjt70t86j]  .mud-icon-root {
    font-size: 56px;
    color: var(--st-border-hover);
}

.loc-cp-card__qr[b-wtjt70t86j] {
    width: 120px;
    height: 120px;
}

.loc-cp-card__url[b-wtjt70t86j] {
    margin-bottom: 12px;
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 4px;
    background: var(--st-bg);
    font-family: monospace;
    font-size: 10px;
    color: var(--st-subtle);
}

/* One labelled main action, pinned to the card's bottom so a row of cards lines up. */
.loc-cp-card__actions[b-wtjt70t86j] {
    margin-top: auto;
}

/* ── Public landing page settings + callouts ─────────────────────────────── */

.loc-settings[b-wtjt70t86j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* A labelled setting row with a control on the right (the public contact picker). */
.loc-setting-row[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
}

.loc-setting-row__info[b-wtjt70t86j] {
    flex: 1;
    min-width: 0;
}

.loc-setting-row__title[b-wtjt70t86j] {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--st-text-strong);
}

.loc-setting-row__hint[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-muted);
}

.loc-setting-row__control[b-wtjt70t86j] {
    flex: 0 0 280px;
    min-width: 0;
}

.loc-callout[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--st-text);
}

.loc-callout__text[b-wtjt70t86j] {
    flex: 1;
    min-width: 0;
}

.st-callout-warn[b-wtjt70t86j]  .loc-callout__icon {
    color: var(--st-warning);
}

.st-callout-info[b-wtjt70t86j]  .loc-callout__icon {
    color: var(--st-primary);
}

/* The "+ new contact" button beside a picker with helper text: keep it the input's height. */
.loc-action-btn--top[b-wtjt70t86j] {
    align-self: flex-start;
    height: 40px;
}

/* Contact picker options: avatar (photo or initials) + name + email/phone. */
.loc-contact-option[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.loc-contact-option__avatar[b-wtjt70t86j] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--st-border);
    object-fit: cover;
    font-size: 11px;
    font-weight: 700;
    color: var(--st-muted);
}

.loc-contact-option__who[b-wtjt70t86j] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.loc-contact-option__name[b-wtjt70t86j] {
    font-size: 13px;
    color: var(--st-text);
}

.loc-contact-option__meta[b-wtjt70t86j] {
    font-size: 11px;
    color: var(--st-subtle);
}

/* ── Quality reports: template picker over the pane ──────────────────────── */

.loc-tpl-panel__empty[b-wtjt70t86j] {
    text-align: center;
    font-size: 13px;
    color: var(--st-subtle);
}

.loc-tpl[b-wtjt70t86j] {
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-bg);
    cursor: pointer;
}

.loc-tpl.is-selected[b-wtjt70t86j] {
    border-color: var(--st-primary);
    box-shadow: inset 0 0 0 1px var(--st-primary);
    background: var(--st-primary-light);
}

.loc-tpl__name[b-wtjt70t86j] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.loc-tpl__meta[b-wtjt70t86j] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.loc-tpl-new[b-wtjt70t86j] {
    width: 100%;
    margin: 0;
    padding: 10px;
    border: 2px dashed var(--st-border);
    border-radius: var(--st-radius);
    background: none;
    font-family: inherit;
    font-size: 13px;
    color: var(--st-muted);
    cursor: pointer;
}

.loc-tpl-new:hover[b-wtjt70t86j] {
    border-color: var(--st-primary);
    color: var(--st-primary);
}

/* ── Drawings ────────────────────────────────────────────────────────────── */

.loc-coverage[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 16px;
    font-size: 12px;
    color: var(--st-muted);
}

.loc-coverage[b-wtjt70t86j]  .mud-icon-root {
    font-size: 16px;
    color: var(--st-muted);
}

.loc-coverage__never[b-wtjt70t86j] {
    color: var(--st-subtle);
}

/* ── Narrow screens: the side navigation becomes a scrolling strip on top ── */

@media (max-width: 768px) {
    .loc-popup-body[b-wtjt70t86j] {
        flex-direction: column;
        height: calc(100vh - 64px);
    }

    .loc-side[b-wtjt70t86j] {
        width: auto;
        min-width: 0;
        border-right: none;
        border-bottom: 1px solid var(--st-border);
    }

    .loc-side__head[b-wtjt70t86j] {
        display: none;
    }

    .loc-side__nav[b-wtjt70t86j] {
        display: flex;
        flex: none;
        overflow-x: auto;
        padding: 8px 0;
    }

    .loc-side__nav .st-nav-item[b-wtjt70t86j] {
        width: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .loc-pane__body[b-wtjt70t86j] {
        padding: 16px;
    }

    .loc-setting-row[b-wtjt70t86j] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .loc-setting-row__control[b-wtjt70t86j] {
        flex: none;
    }

    .loc-callout[b-wtjt70t86j] {
        flex-wrap: wrap;
    }
}

/* QR printing row on the Checkpoints card: template picker + "Print all". */
.loc-qr-print-bar[b-wtjt70t86j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.loc-qr-print-bar[b-wtjt70t86j]  .loc-qr-template-select { max-width: 280px; }
/* /Components/LocationPricesTab.razor.rz.scp.css */
/* Price descriptions can be several lines. */
.lp-desc[b-3yfntr7qte] { white-space: pre-wrap; max-width: none; }
/* /Components/MachineryOverview.razor.rz.scp.css */
/* Month label between the previous/next chevrons in the card toolbar. */
.mach-month[b-gil0hen2ta] {
    min-width: 140px; text-align: center; text-transform: capitalize;
    font-size: 13px; font-weight: 600; color: var(--st-text);
}

/* Month usage grid. Fixed layout: the day columns share the width equally. Below 1000px the
   table takes a data-driven minimum width (--mach-min-w, set inline from the day count) and
   the .st-table-scroll box scrolls, with the machine column sticky on the left. */
.mach-table[b-gil0hen2ta] { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mach-table th[b-gil0hen2ta], .mach-table td[b-gil0hen2ta] { overflow: hidden; }
@media (max-width: 1000px) {
    .mach-table[b-gil0hen2ta] { min-width: var(--mach-min-w); }
}
.mach-col-machine[b-gil0hen2ta] { width: 200px; }

.mach-table thead[b-gil0hen2ta] { position: sticky; top: 0; z-index: 10; background: var(--st-white); }
.mach-table thead tr[b-gil0hen2ta] { border-bottom: 1px solid var(--st-border); }
.mach-table tbody tr[b-gil0hen2ta] { border-bottom: 1px solid var(--st-border-light); }
.mach-table tbody tr:last-child[b-gil0hen2ta] { border-bottom: none; }

.mach-th-machine[b-gil0hen2ta] {
    position: sticky; left: 0; z-index: 11; padding: 10px 16px; background: var(--st-bg);
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--st-muted);
}
.mach-th-day[b-gil0hen2ta] {
    padding: 6px 0; text-align: center; background: var(--st-bg);
    font-size: 10px; font-weight: 600; color: var(--st-muted);
}
.mach-th-date[b-gil0hen2ta] { font-size: 11px; color: var(--st-text); }
.mach-th-day.is-weekend[b-gil0hen2ta], .mach-th-day.is-weekend .mach-th-date[b-gil0hen2ta] { color: var(--st-border-hover); }
.mach-th-day.is-holiday[b-gil0hen2ta], .mach-th-day.is-holiday .mach-th-date[b-gil0hen2ta] { color: var(--st-error-dark); }
.mach-th-day.is-today[b-gil0hen2ta], .mach-th-day.is-today .mach-th-date[b-gil0hen2ta] { color: var(--st-primary); font-weight: 700; }
.is-weekend[b-gil0hen2ta] { background: var(--st-surface-alt); }
.is-holiday[b-gil0hen2ta] { background: var(--st-error-light); }

.mach-td-machine[b-gil0hen2ta] { position: sticky; left: 0; z-index: 5; padding: 8px 8px 8px 16px; background: var(--st-white); }
.mach-td-day[b-gil0hen2ta] { padding: 2px 1px; text-align: center; }

.mach-name[b-gil0hen2ta] {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--st-text);
}
.mach-name__text[b-gil0hen2ta] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mach-name[b-gil0hen2ta]  .mach-inactive { flex-shrink: 0; font-size: 11px; padding: 1px 8px; }
.mach-name[b-gil0hen2ta]  .mach-edit { margin-left: auto; flex-shrink: 0; padding: 4px; color: var(--st-subtle); }
.mach-name[b-gil0hen2ta]  .mach-edit .mud-icon-root { font-size: 14px; }
.mach-meta[b-gil0hen2ta] {
    font-size: 11px; color: var(--st-subtle);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mach-meta--usage[b-gil0hen2ta] { color: var(--st-muted); margin-top: 2px; }

/* Booked hours in a day cell: <80% green, 80-100% amber, >100% red. */
.mach-cell[b-gil0hen2ta] {
    cursor: pointer; border-radius: 6px; padding: 5px 0;
    font-size: 10px; font-weight: 600; overflow: hidden; white-space: nowrap;
}
.mach-cell--ok[b-gil0hen2ta] { background: color-mix(in srgb, var(--st-success) 14%, transparent); color: var(--st-success-dark); }
.mach-cell--high[b-gil0hen2ta] { background: color-mix(in srgb, var(--st-warning) 18%, transparent); color: var(--st-warning); }
.mach-cell--over[b-gil0hen2ta] { background: color-mix(in srgb, var(--st-error) 16%, transparent); color: var(--st-error-dark); }
.mach-util--ok[b-gil0hen2ta] { color: var(--st-success-dark); }
.mach-util--high[b-gil0hen2ta] { color: var(--st-warning); }
.mach-util--over[b-gil0hen2ta] { color: var(--st-error-dark); }

/* Dialog pieces. */
.mach-task[b-gil0hen2ta] {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius);
}
/* /Components/MultiSelectFilter.razor.rz.scp.css */
.msf[b-vlfql1f1wt] { position: relative; display: inline-block; }

.msf-btn[b-vlfql1f1wt] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: auto;
    min-width: 180px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.msf-btn.has-value[b-vlfql1f1wt] { border-color: var(--st-primary); color: var(--st-primary); }
.msf-label[b-vlfql1f1wt] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msf-caret[b-vlfql1f1wt] { flex-shrink: 0; color: var(--st-subtle); }

/* Transparent full-screen catcher so a click outside closes the panel */
.msf-backdrop[b-vlfql1f1wt] { position: fixed; inset: 0; z-index: 40; }

.msf-panel[b-vlfql1f1wt] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 41;
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-popover);
    padding: 6px;
}

.msf-item[b-vlfql1f1wt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--st-radius-sm);
    font-size: 13px;
    color: var(--st-text);
    cursor: pointer;
}
.msf-item:hover[b-vlfql1f1wt] { background: var(--st-bg); }
.msf-item input[b-vlfql1f1wt] { cursor: pointer; }

.msf-clear[b-vlfql1f1wt] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    color: var(--st-primary);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px 8px;
    margin-bottom: 4px;
    cursor: pointer;
}
.msf-clear:hover[b-vlfql1f1wt] { text-decoration: underline; }

.msf-empty[b-vlfql1f1wt] { padding: 14px; text-align: center; color: var(--st-subtle); font-size: 13px; }
/* /Components/Onboarding/GettingStartedGuide.razor.rz.scp.css */
/* ── Dashboard resume panel ─────────────────────────────────────────── */
.gs-panel[b-1i7sru3sz3] {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #EEF3FF 0%, #F7FAFF 100%);
    border: 1px solid #D9E2F7;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 20px;
}
.gs-panel-main[b-1i7sru3sz3] { flex: 1; min-width: 0; }
.gs-panel-head[b-1i7sru3sz3] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gs-panel-title[b-1i7sru3sz3] { font-size: 15px; font-weight: 700; color: var(--st-text); }
.gs-panel-dismiss[b-1i7sru3sz3] {
    background: none; border: none; cursor: pointer; color: var(--st-subtle);
    padding: 2px; border-radius: 6px; display: inline-flex;
}
.gs-panel-dismiss:hover[b-1i7sru3sz3] { color: #475569; background: #E2E8F0; }
.gs-progress[b-1i7sru3sz3] { height: 7px; background: #DBE4F5; border-radius: 99px; margin: 10px 0 6px; overflow: hidden; }
.gs-progress-fill[b-1i7sru3sz3] { height: 100%; background: linear-gradient(90deg, var(--st-primary), #6D9BFF); border-radius: 99px; transition: width .3s ease; }
.gs-panel-sub[b-1i7sru3sz3] { font-size: 12.5px; color: var(--st-muted); }
.gs-panel-cta[b-1i7sru3sz3] {
    flex-shrink: 0;
    background: var(--st-primary); color: #fff; border: none; border-radius: 9px;
    padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.gs-panel-cta:hover[b-1i7sru3sz3] { background: #3B63D9; }

/* ── Modal ──────────────────────────────────────────────────────────── */
.gs-overlay[b-1i7sru3sz3] {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.gs-modal[b-1i7sru3sz3] {
    width: min(1120px, 100%); height: min(760px, 94vh); max-height: 94vh;
    background: #fff; border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.gs-modal-head[b-1i7sru3sz3] {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 26px 34px 20px; border-bottom: 1px solid #EEF2F8;
}
.gs-head-left[b-1i7sru3sz3] { display: flex; align-items: center; gap: 14px; }
.gs-head-icon[b-1i7sru3sz3] {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: linear-gradient(135deg, var(--st-primary) 0%, #6D9BFF 100%);
    box-shadow: 0 6px 16px rgba(74, 118, 249, .28);
}
.gs-title[b-1i7sru3sz3] { font-size: 22px; font-weight: 700; color: #0F172A; margin: 0; }
.gs-sub[b-1i7sru3sz3] { font-size: 13px; color: var(--st-muted); margin: 4px 0 0; }
.gs-close[b-1i7sru3sz3] { background: none; border: none; cursor: pointer; color: var(--st-subtle); padding: 4px; border-radius: 8px; display: inline-flex; }
.gs-close:hover[b-1i7sru3sz3] { color: #475569; background: #F1F5F9; }

.gs-body[b-1i7sru3sz3] { display: grid; grid-template-columns: 264px 1fr; min-height: 0; flex: 1; }
.gs-rail[b-1i7sru3sz3] { border-right: 1px solid #EEF2F8; padding: 16px 12px; overflow-y: auto; background: #FBFCFE; }
.gs-rail-section[b-1i7sru3sz3] { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-subtle); padding: 14px 12px 6px; }
.gs-rail-section:first-child[b-1i7sru3sz3] { padding-top: 4px; }
.gs-rail-item[b-1i7sru3sz3] {
    /* justify-content is forced to flex-start: a global button style sets it to
       center, which otherwise centres each row's badge+label and fakes indentation. */
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 9px 12px; border-radius: 9px; color: #475569; font-size: 13.5px;
}
.gs-rail-item:hover[b-1i7sru3sz3] { background: #EEF3FF; }
.gs-rail-item.active[b-1i7sru3sz3] { background: #E4ECFF; color: #1E3A8A; font-weight: 600; }
.gs-rail-num[b-1i7sru3sz3] {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #E2E8F0; color: var(--st-muted); font-size: 12px; font-weight: 600;
}
.gs-rail-item.active .gs-rail-num[b-1i7sru3sz3] { background: var(--st-primary); color: #fff; }
.gs-rail-item.done .gs-rail-num[b-1i7sru3sz3] { background: var(--st-success); color: #fff; }
.gs-rail-label[b-1i7sru3sz3] { line-height: 1.25; }
.gs-rail-dash[b-1i7sru3sz3] { line-height: 1; }

.gs-pane[b-1i7sru3sz3] { padding: 30px 40px; overflow-y: auto; }
.gs-pane-icon[b-1i7sru3sz3] {
    width: 48px; height: 48px; border-radius: 13px; margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--st-primary); background: linear-gradient(135deg, #EAF1FF 0%, #F5F9FF 100%);
    border: 1px solid #E1E9F8;
}
.gs-pane-title[b-1i7sru3sz3] { font-size: 19px; font-weight: 700; color: #0F172A; margin: 0 0 8px; }

/* Inline forms (departments / teams) */
.gs-field[b-1i7sru3sz3] { margin-bottom: 14px; }
.gs-field-label[b-1i7sru3sz3] { display: block; font-size: 12.5px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.gs-select[b-1i7sru3sz3] {
    width: 100%; border: 1.5px solid #D9E1EE; border-radius: 9px;
    padding: 10px 12px; font-size: 13.5px; color: var(--st-text); outline: none; background: #fff;
}
.gs-select:focus[b-1i7sru3sz3] { border-color: var(--st-primary); }
.gs-member-empty[b-1i7sru3sz3] { font-size: 13px; color: var(--st-muted); }
.gs-warn[b-1i7sru3sz3] {
    background: #FFF7ED; border: 1px solid #FCD9AE; color: #9A5A15;
    border-radius: 9px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
}
.gs-pane-blurb[b-1i7sru3sz3] { font-size: 14px; color: #475569; line-height: 1.55; margin: 0 0 18px; }
.gs-pane-note[b-1i7sru3sz3] { font-size: 13px; color: var(--st-muted); margin: 0 0 14px; }

/* How-it-works flow */
.gs-flow[b-1i7sru3sz3] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 18px; }
.gs-flow-node[b-1i7sru3sz3] {
    background: #EEF3FF; border: 1px solid #D9E2F7; color: #1E3A8A;
    border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600;
}
.gs-flow-arrow[b-1i7sru3sz3] { color: var(--st-subtle); font-weight: 700; }

/* Department presets */
.gs-chips[b-1i7sru3sz3] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gs-chip[b-1i7sru3sz3] {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid #D9E1EE; color: #334155;
    border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.gs-chip:hover[b-1i7sru3sz3] { border-color: #B7C4DC; }
.gs-chip.on[b-1i7sru3sz3] { font-weight: 600; }
.gs-chip-dot[b-1i7sru3sz3] { width: 9px; height: 9px; border-radius: 50%; }
.gs-chip-custom[b-1i7sru3sz3] { background: #F1F5F9; border-color: var(--st-border-hover); }
.gs-chip-static[b-1i7sru3sz3] { cursor: default; background: #F1F5F9; border-color: #E2E8F0; color: #475569; }
.gs-link-btn[b-1i7sru3sz3] {
    align-self: flex-start; background: none; border: none; cursor: pointer;
    color: var(--st-primary); font-size: 13px; font-weight: 600; padding: 8px 2px; margin-top: 4px;
}
.gs-link-btn:hover[b-1i7sru3sz3] { text-decoration: underline; }
.gs-chip-x[b-1i7sru3sz3] { background: none; border: none; cursor: pointer; color: var(--st-muted); font-size: 15px; line-height: 1; padding: 0 0 0 4px; }
.gs-custom-row[b-1i7sru3sz3] { display: flex; gap: 8px; margin-bottom: 14px; }
.gs-input[b-1i7sru3sz3] {
    flex: 1; border: 1.5px solid #D9E1EE; border-radius: 9px;
    padding: 9px 12px; font-size: 13.5px; color: var(--st-text); outline: none;
}
.gs-input:focus[b-1i7sru3sz3] { border-color: var(--st-primary); }
.gs-done-line[b-1i7sru3sz3] { font-size: 12.5px; color: var(--st-success); font-weight: 600; margin: 12px 0 0; }

/* Example callout (service agreements / work descriptions / service points) */
.gs-example[b-1i7sru3sz3] {
    background: #F7FAFF; border: 1px solid #E1E9F8; border-left: 3px solid var(--st-primary);
    border-radius: 8px; padding: 12px 14px; margin: 0 0 18px;
    display: flex; flex-direction: column; gap: 5px;
}
.gs-example-tag[b-1i7sru3sz3] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--st-primary); }
.gs-example-text[b-1i7sru3sz3] { font-size: 13px; color: #334155; line-height: 1.55; }

/* Buttons */
.gs-btn-primary[b-1i7sru3sz3] {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--st-primary); color: #fff; border: none; border-radius: 9px;
    padding: 11px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.gs-btn-primary:hover[b-1i7sru3sz3] { background: #3B63D9; }
.gs-btn-primary:disabled[b-1i7sru3sz3] { background: #A9BEF3; cursor: default; }
.gs-btn-ghost[b-1i7sru3sz3] {
    background: #fff; color: #475569; border: 1.5px solid #D9E1EE; border-radius: 9px;
    padding: 9px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.gs-btn-ghost:hover:not(:disabled)[b-1i7sru3sz3] { background: #F1F5F9; }
.gs-btn-ghost:disabled[b-1i7sru3sz3] { opacity: .5; cursor: default; }
.gs-actions[b-1i7sru3sz3] { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gs-spin[b-1i7sru3sz3] {
    width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff; border-radius: 50%; display: inline-block;
    animation: gs-spin-b-1i7sru3sz3 .7s linear infinite;
}
@keyframes gs-spin-b-1i7sru3sz3 { to { transform: rotate(360deg); } }

/* Concept card */
.gs-concept[b-1i7sru3sz3] { display: flex; flex-direction: column; gap: 2px; border: 1px solid #EEF2F8; border-radius: 12px; overflow: hidden; }
.gs-concept-row[b-1i7sru3sz3] { display: grid; grid-template-columns: 168px 1fr; gap: 14px; padding: 14px 16px; background: #fff; }
.gs-concept-row:nth-child(even)[b-1i7sru3sz3] { background: #FBFCFE; }
.gs-concept-name[b-1i7sru3sz3] { font-size: 14px; font-weight: 700; color: #1E3A8A; }
.gs-concept-what[b-1i7sru3sz3] { font-size: 13px; color: #334155; line-height: 1.5; }
.gs-concept-when[b-1i7sru3sz3] { font-size: 12.5px; color: var(--st-muted); line-height: 1.5; margin-top: 4px; }
.gs-concept-tldr[b-1i7sru3sz3] { margin-top: 16px; font-weight: 600; color: #1E3A8A; }

/* Footer nav */
.gs-nav[b-1i7sru3sz3] { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #EEF2F8; }
/* /Components/Onboarding/InlineInviteUser.razor.rz.scp.css */
.iiu[b-j1xmslkfgp] {
    display: flex; flex-direction: column; gap: 10px;
    background: #FBFCFE; border: 1px solid var(--st-border); border-radius: 10px;
    padding: 16px; margin-top: 6px;
}
.iiu-row[b-j1xmslkfgp] { display: flex; gap: 10px; }
.iiu-input[b-j1xmslkfgp] {
    flex: 1; min-width: 0; border: 1.5px solid #D9E1EE; border-radius: 9px;
    padding: 9px 12px; font-size: 13.5px; color: var(--st-text); outline: none; background: #fff;
}
.iiu-input:focus[b-j1xmslkfgp] { border-color: var(--st-primary); }
.iiu-select[b-j1xmslkfgp] {
    border: 1.5px solid #D9E1EE; border-radius: 9px;
    padding: 9px 12px; font-size: 13.5px; color: var(--st-text); outline: none; background: #fff;
}
.iiu-select:focus[b-j1xmslkfgp] { border-color: var(--st-primary); }
.iiu-dial[b-j1xmslkfgp] { flex: 0 0 118px; }
.iiu-btn[b-j1xmslkfgp] {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
    background: var(--st-primary); color: #fff; border: none; border-radius: 9px;
    padding: 10px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.iiu-btn:hover:not(:disabled)[b-j1xmslkfgp] { background: #3B63D9; }
.iiu-btn:disabled[b-j1xmslkfgp] { background: #A9BEF3; cursor: default; }
.iiu-spin[b-j1xmslkfgp] {
    width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.5);
    border-top-color: #fff; border-radius: 50%; display: inline-block;
    animation: iiu-spin-b-j1xmslkfgp .7s linear infinite;
}
@keyframes iiu-spin-b-j1xmslkfgp { to { transform: rotate(360deg); } }
/* /Components/Onboarding/OnboardingModal.razor.rz.scp.css */
/* Onboarding modal — ported from Claude Design "V1 Classic" variant.
   Uses app palette (see wwwroot/css/app.css hardcoded hexes). */

.onb-overlay[b-59kkgtgysu] {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 24, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.onb-modal[b-59kkgtgysu] {
    position: relative;
    width: min(560px, 100%);
    background: var(--st-white);
    border-radius: 20px;
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(15, 23, 42, 0.05);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--st-text);
}

/* Head */
.onb-modal-head[b-59kkgtgysu] {
    padding: 28px 32px 20px;
    border-bottom: 1px solid #F1F5F9;
}
.onb-title[b-59kkgtgysu] {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    color: var(--st-text);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.onb-sub[b-59kkgtgysu] {
    font-size: 14px;
    color: var(--st-muted);
    margin: 0 0 20px;
    line-height: 1.55;
}
.onb-wave[b-59kkgtgysu] {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: onb-wave-b-59kkgtgysu 2.2s ease-in-out 0.4s 2;
}
@keyframes onb-wave-b-59kkgtgysu {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}

/* Stepper */
.onb-stepper[b-59kkgtgysu] {
    display: flex;
    align-items: center;
    gap: 6px;
}
.onb-step[b-59kkgtgysu] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border-radius: 9999px;
}
.onb-step-num[b-59kkgtgysu] {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background: var(--st-border);
    color: var(--st-subtle);
    transition: background .2s, color .2s;
}
.onb-step-label[b-59kkgtgysu] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-subtle);
}
.onb-step.active .onb-step-num[b-59kkgtgysu] { background: var(--st-primary); color: var(--st-white); }
.onb-step.active .onb-step-label[b-59kkgtgysu] { color: var(--st-text); font-weight: 600; }
.onb-step.done .onb-step-num[b-59kkgtgysu] { background: var(--st-success); color: var(--st-white); }
.onb-step.done .onb-step-label[b-59kkgtgysu] { color: var(--st-text); }
.onb-step-line[b-59kkgtgysu] {
    flex: 1;
    height: 2px;
    background: var(--st-border);
    border-radius: 1px;
    margin: 0 4px;
    max-width: 40px;
}
.onb-step-line.done[b-59kkgtgysu] { background: var(--st-success); }

/* Body */
.onb-modal-body[b-59kkgtgysu] {
    padding: 24px 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
}
.onb-sec[b-59kkgtgysu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Fields */
.onb-field[b-59kkgtgysu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.onb-field-label[b-59kkgtgysu] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
}
.onb-field-label-row[b-59kkgtgysu] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.onb-field-optional[b-59kkgtgysu] {
    font-size: 12px;
    color: var(--st-subtle);
    font-weight: 500;
}
.onb-field-error[b-59kkgtgysu] {
    font-size: 12px;
    color: var(--st-error);
    margin-top: 2px;
}
.onb-req[b-59kkgtgysu] { color: var(--st-error); }

/* Input + select */
.onb-input[b-59kkgtgysu],
.onb-select[b-59kkgtgysu] {
    width: 100%;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--st-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    min-width: 0;
    box-sizing: border-box;
}
.onb-input[b-59kkgtgysu]::placeholder { color: var(--st-subtle); }
.onb-input:focus[b-59kkgtgysu],
.onb-select:focus[b-59kkgtgysu] {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 3px rgba(74, 118, 249, 0.15);
}
.onb-input.invalid[b-59kkgtgysu],
.onb-select.invalid[b-59kkgtgysu] {
    border-color: var(--st-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Rows */
.onb-row[b-59kkgtgysu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.onb-row.onb-3col[b-59kkgtgysu] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Segmented (Metric/Imperial) */
.onb-seg[b-59kkgtgysu] {
    position: relative;
    display: inline-flex;
    padding: 3px;
    background: var(--st-bg);
    border-radius: 8px;
    border: 1px solid var(--st-border);
    width: 100%;
}
.onb-seg-btn[b-59kkgtgysu] {
    flex: 1;
    padding: 7px 16px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--st-muted);
    cursor: pointer;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
}
.onb-seg-btn.active[b-59kkgtgysu] {
    color: var(--st-primary);
    font-weight: 600;
    background: var(--st-white);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Trial card (payment step) */
.onb-trial-card[b-59kkgtgysu] {
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    background: #E8F8EF;
    border: 1px solid #BEEBCE;
    border-radius: 10px;
    border-left: 3px solid var(--st-success);
    align-items: flex-start;
}
.onb-trial-icon[b-59kkgtgysu] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--st-white);
    color: var(--st-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.onb-trial-title[b-59kkgtgysu] {
    font-size: 14px;
    font-weight: 600;
    color: #065F46;
}
.onb-trial-sub[b-59kkgtgysu] {
    font-size: 12px;
    color: #047857;
    line-height: 1.5;
    margin-top: 2px;
}

/* Stripe Payment Element container */
.onb-payment-element[b-59kkgtgysu] {
    min-height: 44px;
    padding: 4px 0;
}

/* Footer */
.onb-modal-footer[b-59kkgtgysu] {
    padding: 18px 32px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.onb-footer-trust[b-59kkgtgysu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--st-muted);
    font-size: 13px;
}
.onb-footer-trust svg[b-59kkgtgysu] { color: var(--st-success); flex-shrink: 0; }

.onb-btn-primary[b-59kkgtgysu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    white-space: nowrap;
    background: var(--st-primary);
    color: var(--st-white);
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, transform .05s;
}
.onb-btn-primary:hover:not(:disabled)[b-59kkgtgysu] { background: var(--st-primary-hover); }
.onb-btn-primary:active:not(:disabled)[b-59kkgtgysu] { transform: translateY(1px); }
.onb-btn-primary:disabled[b-59kkgtgysu] { opacity: 0.6; cursor: not-allowed; }

.onb-btn-ghost[b-59kkgtgysu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: transparent;
    color: var(--st-text);
    border: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
}
.onb-btn-ghost:hover:not(:disabled)[b-59kkgtgysu] { background: var(--st-bg); }
.onb-btn-ghost:disabled[b-59kkgtgysu] { opacity: 0.5; cursor: not-allowed; }

/* Spinner (save in progress) */
.onb-spinner[b-59kkgtgysu] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--st-white);
    border-radius: 50%;
    animation: onb-spin-b-59kkgtgysu .7s linear infinite;
    display: inline-block;
}
@keyframes onb-spin-b-59kkgtgysu {
    to { transform: rotate(360deg); }
}

/* Done state */
.onb-done-head[b-59kkgtgysu] {
    text-align: center;
    padding-bottom: 8px;
}
.onb-done-check[b-59kkgtgysu] {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #E8F8EF;
    color: var(--st-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 12px;
}
.onb-done-body[b-59kkgtgysu] {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 32px;
}

/* Small-screen compact */
@media (max-width: 520px) {
    .onb-modal-head[b-59kkgtgysu] { padding: 20px 20px 16px; }
    .onb-modal-body[b-59kkgtgysu] { padding: 16px 20px; }
    .onb-modal-footer[b-59kkgtgysu] { padding: 14px 20px; }
    .onb-title[b-59kkgtgysu] { font-size: 19px; }
    .onb-row[b-59kkgtgysu], .onb-row.onb-3col[b-59kkgtgysu] { grid-template-columns: 1fr; }
}

/* Escape hatch for upgrading subcontractors (CanRevertToFree): top-right corner */
.onb-modal[b-59kkgtgysu] { position: relative; }
.onb-close-corner[b-59kkgtgysu] {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: #64748B;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
}
.onb-close-corner:hover[b-59kkgtgysu] { color: #1E293B; background: #F1F5F9; }
.onb-close-corner:disabled[b-59kkgtgysu] { opacity: 0.5; cursor: default; }
/* /Components/OverdueTasksDialog.razor.rz.scp.css */
/* Overdue review popup: a filter grid, a toolbar with the count and the Clear action, then one
   row per task (checkbox, task, due, assigned) paged from the server. */

.od-body[b-i955ytfvq5] { display: flex; flex-direction: column; max-height: 76vh; }

.od-filters[b-i955ytfvq5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--st-border);
}

@media (max-width: 720px) {
    .od-filters[b-i955ytfvq5] { grid-template-columns: minmax(0, 1fr); }
}

.od-toolbar[b-i955ytfvq5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--st-border);
}

.od-list[b-i955ytfvq5] { flex: 1; min-height: 0; overflow-y: auto; }

.od-tasknum[b-i955ytfvq5] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
}
/* /Components/Planning/DrawnRouteSidebar.razor.rz.scp.css */
/* Drawn-route detail sidebar: right-hand overlay panel (drs- prefix).
   Below MudDialog (1400) so the delete confirm renders on top, and below the run map
   overlay (1300) so a run opens over the panel. */

.drs-overlay[b-d0jxf3xeh1] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1250;
    display: flex;
    justify-content: flex-end;
}

.drs-panel[b-d0jxf3xeh1] {
    width: min(560px, 100vw);
    height: 100%;
    background: var(--st-white);
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    animation: drs-slide-in-b-d0jxf3xeh1 0.18s ease-out;
}

@keyframes drs-slide-in-b-d0jxf3xeh1 {
    from { transform: translateX(24px); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1; }
}

.drs-header[b-d0jxf3xeh1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px 14px 20px;
    border-bottom: 1px solid var(--st-border);
}

.drs-header-text[b-d0jxf3xeh1] { flex: 1; min-width: 0; }

.drs-title[b-d0jxf3xeh1] {
    font-size: 17px;
    font-weight: 700;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drs-subtitle[b-d0jxf3xeh1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--st-subtle);
}

.drs-tabs[b-d0jxf3xeh1] {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid var(--st-border);
}

.drs-tab[b-d0jxf3xeh1] {
    border: none;
    background: none;
    padding: 8px 12px 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.drs-tab.active[b-d0jxf3xeh1] {
    color: var(--st-primary);
    border-bottom-color: var(--st-primary);
}

.drs-body[b-d0jxf3xeh1] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px 20px;
}

.drs-empty[b-d0jxf3xeh1] {
    color: var(--st-subtle);
    font-size: 13px;
    padding: 24px 0;
    text-align: center;
}

/* Overview */
.drs-map[b-d0jxf3xeh1] {
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--st-border);
    background: var(--st-bg);
}

.drs-facts[b-d0jxf3xeh1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.drs-fact[b-d0jxf3xeh1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--st-bg);
    border: 1px solid var(--st-border-light);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

.drs-fact-wide[b-d0jxf3xeh1] { grid-column: span 2; }

.drs-fact-label[b-d0jxf3xeh1] {
    font-size: 11px;
    color: var(--st-muted);
}

.drs-fact-value[b-d0jxf3xeh1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
}

.drs-fact-value.muted[b-d0jxf3xeh1] { color: var(--st-subtle); font-weight: 500; }

/* "Any day" marker beside the schedule summary. */
.drs-fact-tag[b-d0jxf3xeh1] {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--st-primary);
    background: var(--st-primary-light);
    border-radius: 999px;
    padding: 1px 7px;
}

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

/* Settings */
.drs-field[b-d0jxf3xeh1] { margin-bottom: 16px; }

.drs-label[b-d0jxf3xeh1] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.drs-label-inline[b-d0jxf3xeh1] { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--st-text); margin-bottom: 0; }

.drs-input[b-d0jxf3xeh1] {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    background: var(--st-white);
    font-size: 13px;
    font-family: inherit;
    color: var(--st-text);
    outline: none;
    box-sizing: border-box;
}

.drs-input:focus[b-d0jxf3xeh1] { border-color: var(--st-border-hover); }
.drs-input:disabled[b-d0jxf3xeh1] { background: var(--st-bg); color: var(--st-muted); }

.drs-hint[b-d0jxf3xeh1] {
    font-size: 11px;
    color: var(--st-subtle);
    margin-top: 4px;
}

.drs-toggle-row[b-d0jxf3xeh1] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.drs-schedule[b-d0jxf3xeh1] {
    margin-top: 10px;
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 12px 14px;
}

.drs-danger[b-d0jxf3xeh1] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    border: 1px solid color-mix(in srgb, var(--st-error) 45%, var(--st-white));
    background: var(--st-error-light);
    border-radius: 12px;
    padding: 12px 14px;
}

.drs-danger-text[b-d0jxf3xeh1] { flex: 1; min-width: 0; }

.drs-danger-title[b-d0jxf3xeh1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-error-dark);
}

/* Dispatch history */
.drs-run[b-d0jxf3xeh1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--st-border-light);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
}

.drs-run:hover[b-d0jxf3xeh1] { background: var(--st-bg); border-color: var(--st-border); }

.drs-avatar[b-d0jxf3xeh1] {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.drs-avatar img[b-d0jxf3xeh1] { width: 100%; height: 100%; object-fit: cover; }

.drs-run-main[b-d0jxf3xeh1] { flex: 1; min-width: 0; }

.drs-run-top[b-d0jxf3xeh1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drs-run-date[b-d0jxf3xeh1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
}

.drs-run-sub[b-d0jxf3xeh1] {
    font-size: 11px;
    color: var(--st-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drs-run-bar[b-d0jxf3xeh1] {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: var(--st-bg-alt);
    overflow: hidden;
}

.drs-run-bar-fill[b-d0jxf3xeh1] {
    height: 100%;
    border-radius: 999px;
    background: var(--st-success);
}

.drs-run-reason[b-d0jxf3xeh1] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--st-warning);
}

.drs-run-reason-text[b-d0jxf3xeh1] { display: block; }

/* The worker's own note goes on its own line: run together with the reason it read as
   one word ("GPS errore2e done"). */
.drs-run-comment[b-d0jxf3xeh1] {
    display: block;
    margin-top: 2px;
    color: var(--st-muted);
}

.drs-run-pct[b-d0jxf3xeh1] {
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--st-text-strong);
    font-variant-numeric: tabular-nums;
}

/* Loading placeholder for the preview map. */
.drs-skel-map[b-d0jxf3xeh1] { height: 180px; border-radius: var(--st-radius-md); margin-bottom: 12px; }
/* /Components/Planning/DrawnRoutesTab.razor.rz.scp.css */
/* Drawn-routes library (Planning > Drawn routes). The card, toolbar and table come from the
   design-system st-table-card / st-table; this file only holds what is specific to routes. */

.st-table td.drt-num[b-952k17d5ks],
.st-table th.drt-num[b-952k17d5ks] { text-align: right; white-space: nowrap; }

.drt-sort[b-952k17d5ks] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-transform: inherit;
    letter-spacing: inherit;
}

.drt-sort.active[b-952k17d5ks] { color: var(--st-text-strong); }
.drt-sort-right[b-952k17d5ks] { justify-content: flex-end; }

.drt-sort[b-952k17d5ks]  .drt-sort-icon {
    font-size: 14px;
    color: var(--st-subtle);
}

.drt-name[b-952k17d5ks] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* A run is in progress right now. */
.drt-live[b-952k17d5ks] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-success) 18%, transparent);
    flex: none;
    animation: drt-live-pulse-b-952k17d5ks 1.8s ease-in-out infinite;
}

@keyframes drt-live-pulse-b-952k17d5ks {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .drt-live[b-952k17d5ks] { animation: none; }
}

/* "Any day" marker after the schedule text. */
.drt-anyday[b-952k17d5ks] { margin-left: 6px; }

.drt-strong[b-952k17d5ks] { font-weight: 600; color: var(--st-text-strong); }
.drt-muted[b-952k17d5ks] { color: var(--st-subtle); }

.drt-lastrun[b-952k17d5ks] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.drt-sub[b-952k17d5ks] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
/* /Components/Planning/PlanEntryEditDialog.razor.rz.scp.css */
/* Day settings dialog: each switch with its muted explanation, indented under the label. */
.plan-day-option[b-uupzwu6t6p] { display: flex; flex-direction: column; gap: 4px; }

.plan-day-hint[b-uupzwu6t6p] {
    margin-left: 44px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--st-muted);
}
/* /Components/Planning/RouteRunMapDialog.razor.rz.scp.css */
/* Full-viewport run map (rrm- prefix). Above the drawn-route sidebar (1250), below
   MudDialog (1400). */

.rrm-overlay[b-tyes71qjap] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: var(--st-white);
    display: flex;
    flex-direction: column;
}

.rrm-toolbar[b-tyes71qjap] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--st-border);
    flex: none;
    flex-wrap: wrap;
}

.rrm-titles[b-tyes71qjap] { min-width: 0; }

.rrm-title[b-tyes71qjap] {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Started manually" marker on an ad hoc run. */
.rrm-adhoc-tag[b-tyes71qjap] { margin-left: 6px; vertical-align: middle; }

.rrm-subtitle[b-tyes71qjap] {
    font-size: 12px;
    color: var(--st-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rrm-kpis[b-tyes71qjap] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
}

.rrm-kpi[b-tyes71qjap] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--st-bg);
    border: 1px solid var(--st-border-light);
    border-radius: 10px;
    padding: 6px 12px;
    min-width: 0;
}

.rrm-kpi-label[b-tyes71qjap] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--st-muted);
    white-space: nowrap;
}

.rrm-kpi-value[b-tyes71qjap] {
    font-size: 13px;
    font-weight: 700;
    color: var(--st-text-strong);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rrm-reason[b-tyes71qjap] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--st-caution-light);
    border-bottom: 1px solid color-mix(in srgb, var(--st-caution) 40%, var(--st-white));
    font-size: 12px;
    flex: none;
}

.rrm-reason[b-tyes71qjap]  .rrm-reason-icon { font-size: 16px; color: var(--st-warning); }
.rrm-reason-text[b-tyes71qjap] { font-weight: 600; color: var(--st-warning); }
.rrm-reason-comment[b-tyes71qjap] { color: var(--st-muted); }

.rrm-map[b-tyes71qjap] {
    position: relative;
    flex: 1;
    min-height: 0;
}

.rrm-centered[b-tyes71qjap] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rrm-error[b-tyes71qjap] { color: var(--st-subtle); font-size: 13px; }

/* Play / scrub bar, overlaid at the bottom of the map (mirrors .tpd-gps-bar). */
.rrm-gps-bar[b-tyes71qjap] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--st-border);
    padding: 8px 12px;
}

.rrm-gps-controls[b-tyes71qjap] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rrm-gps-play[b-tyes71qjap] {
    width: 28px;
    height: 28px;
    flex: none;
    border: none;
    border-radius: 6px;
    background: var(--st-primary);
    color: var(--st-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rrm-gps-play:hover[b-tyes71qjap] { background: var(--st-primary-hover); }

/* A run with no pings still shows its time window, but there is nothing to play or scrub. */
.rrm-gps-play:disabled[b-tyes71qjap],
.rrm-gps-range:disabled[b-tyes71qjap] {
    opacity: 0.45;
    cursor: default;
}

.rrm-gps-play:disabled:hover[b-tyes71qjap] { background: var(--st-primary); }

.rrm-gps-range[b-tyes71qjap] {
    flex: 1;
    accent-color: var(--st-primary);
    cursor: pointer;
    margin: 0;
    height: 4px;
}

.rrm-gps-time[b-tyes71qjap] {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--st-text-strong);
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: right;
}
/* /Components/PriceRegulationHistoryDialog.razor.rz.scp.css */
/* PriceRegulationHistoryDialog: one bordered card per regulation run (head + price table). */
.prh-body[b-8e7vh3r3tw] { max-height: 70vh; overflow-y: auto; }
.prh-entry[b-8e7vh3r3tw] { border: 1px solid var(--st-border); border-radius: 10px; overflow: hidden; background: var(--st-white); flex-shrink: 0; }
.prh-entry__head[b-8e7vh3r3tw] {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px; background: var(--st-bg); border-bottom: 1px solid var(--st-border-light);
}
.prh-entry__location[b-8e7vh3r3tw] { font-weight: 600; color: var(--st-text); }
.prh-entry__meta[b-8e7vh3r3tw] { margin-left: auto; color: var(--st-muted); font-size: 13px; }
.prh-entry__foot[b-8e7vh3r3tw] { padding: 6px 14px 10px; color: var(--st-subtle); font-size: 12px; }
.prh-arrow[b-8e7vh3r3tw] { width: 24px; text-align: center; color: var(--st-subtle); padding-left: 0; padding-right: 0; }
.prh-old[b-8e7vh3r3tw] { color: var(--st-muted); text-decoration: line-through; white-space: nowrap; }
.prh-new[b-8e7vh3r3tw] { font-weight: 700; color: var(--st-success-dark); white-space: nowrap; }
.prh-num[b-8e7vh3r3tw] { text-align: right; }
.prh-tag[b-8e7vh3r3tw] { background: var(--st-bg-alt); color: var(--st-muted); }
/* /Components/ProfileSettingsDialog.razor.rz.scp.css */
/* ProfileSettingsDialog: avatar row and the change-email / change-password panels. */
.psd-body[b-i55k72bvnm] { max-height: 72vh; overflow-y: auto; gap: 24px; }
.psd-photo[b-i55k72bvnm] { display: flex; align-items: center; gap: 16px; }
.psd-avatar[b-i55k72bvnm] {
    width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--st-white); font-weight: 600; font-size: 18px;
}
.psd-avatar--img[b-i55k72bvnm] { object-fit: cover; border: 2px solid var(--st-border); }
.psd-skel-avatar[b-i55k72bvnm] { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.psd-skel-field[b-i55k72bvnm] { height: 40px; }
.psd-panel[b-i55k72bvnm] { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
/* /Components/QrPrint/QrBulkPrintDialog.razor.rz.scp.css */
/* Bulk QR print: search + select links, then a scrolling checkbox list of locations. */

.qbp-body[b-9h65wtegmo] { display: flex; flex-direction: column; max-height: 70vh; }

.qbp-toolbar[b-9h65wtegmo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--st-border);
}

.qbp-toolbar[b-9h65wtegmo]  .qbp-search { flex: 1; min-width: 160px; }

.qbp-list[b-9h65wtegmo] { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px; }

.qbp-row[b-9h65wtegmo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--st-radius);
    cursor: pointer;
}

.qbp-row:hover[b-9h65wtegmo] { background: var(--st-bg); }
.qbp-row--on[b-9h65wtegmo] { background: var(--st-primary-light); }
.qbp-row input[b-9h65wtegmo] { flex-shrink: 0; accent-color: var(--st-primary); }
.qbp-row-main[b-9h65wtegmo] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qbp-row-name[b-9h65wtegmo] { font-size: 13px; font-weight: 600; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbp-row-meta[b-9h65wtegmo] { font-size: 12px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qbp-row-count[b-9h65wtegmo] { font-size: 12px; color: var(--st-subtle); white-space: nowrap; }

.qbp-summary[b-9h65wtegmo] { flex: 1; font-size: 12px; color: var(--st-muted); }
/* /Components/QualityReportPeriodExportDialog.razor.rz.scp.css */
/* QualityReportPeriodExportDialog: preview tiles. */
.qrx-body[b-6w8m83d1ef] { gap: 24px; }
.qrx-tile-label[b-6w8m83d1ef] { font-size: 12px; color: var(--st-muted); margin-top: 2px; }
.qrx-skel-count[b-6w8m83d1ef] { display: block; width: 40px; height: 24px; }
/* /Components/QualityReportTemplatesDialog.razor.rz.scp.css */
/* QualityReportTemplatesDialog: the template table scrolls inside the dialog. */
.qrt-body[b-jc01j5pyv7] { max-height: 70vh; overflow-y: auto; }
/* /Components/QualityReportViewDialog.razor.rz.scp.css */
/* QualityReportViewDialog: a layout-level overlay drawn as the shared side panel (global
   .st-side-overlay / .st-side-overlay__panel in design-system.css) in the st-dialog look (title
   bar with an icon tile, bordered footer). */
.qrv-head[b-28iyip4c4g] { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--st-border); }
.qrv-tile[b-28iyip4c4g] {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--st-primary-light); color: var(--st-primary);
}
.qrv-head__text[b-28iyip4c4g] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qrv-title-row[b-28iyip4c4g] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qrv-title[b-28iyip4c4g] { font-family: var(--st-font-heading); font-size: 16px; font-weight: 700; color: var(--st-text-strong); }
.qrv-tag[b-28iyip4c4g] { background: var(--st-bg-alt); color: var(--st-muted); }
.qrv-sub[b-28iyip4c4g] { font-size: 12px; color: var(--st-muted); }
.qrv-loc[b-28iyip4c4g] { display: flex; align-items: center; gap: 4px; }
.qrv-skel-title[b-28iyip4c4g] { width: 220px; }
.qrv-skel-card[b-28iyip4c4g] { display: block; height: 96px; border-radius: var(--st-radius-md); margin-bottom: 12px; }

.qrv-body[b-28iyip4c4g] { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }

.qrv-score[b-28iyip4c4g] { border: 1px solid var(--st-border); border-radius: var(--st-radius-md); padding: 20px; display: flex; align-items: center; gap: 20px; }
.qrv-score__ring[b-28iyip4c4g] {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700;
}
.qrv-score__title[b-28iyip4c4g] { font-size: 14px; font-weight: 600; color: var(--st-text); margin-bottom: 4px; }
.qrv-score__meta[b-28iyip4c4g] { font-size: 12px; color: var(--st-muted); }
.qrv-pill[b-28iyip4c4g] { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--st-radius-sm); }

.is-neutral[b-28iyip4c4g] { background: var(--st-bg-alt); color: var(--st-subtle); }
.is-error[b-28iyip4c4g]   { background: var(--st-error-light); color: var(--st-error); }
.is-warning[b-28iyip4c4g] { background: var(--st-warning-light); color: var(--st-warning); }
.is-success[b-28iyip4c4g] { background: var(--st-success-light); color: var(--st-success); }
.is-strong[b-28iyip4c4g]  { background: color-mix(in srgb, var(--st-success) 18%, var(--st-white)); color: var(--st-success-dark); }

.qrv-fields[b-28iyip4c4g] { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--st-border); }
.qrv-label[b-28iyip4c4g] { font-size: 12px; font-weight: 600; color: var(--st-muted); margin-bottom: 4px; }
.qrv-quote[b-28iyip4c4g] {
    background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    padding: 10px; font-size: 13px; color: var(--st-text); white-space: pre-line;
}
.qrv-quote--small[b-28iyip4c4g] { border-radius: var(--st-radius-sm); padding: 8px; }
.qrv-quote__label[b-28iyip4c4g] { font-weight: 600; color: var(--st-muted); }

.qrv-section[b-28iyip4c4g] { border: 1px solid var(--st-border); border-radius: 10px; padding: 16px; }
.qrv-section__head[b-28iyip4c4g] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qrv-section__title[b-28iyip4c4g] { font-size: 14px; font-weight: 600; color: var(--st-text); }
.qrv-item[b-28iyip4c4g] { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--st-text); }
.qrv-images[b-28iyip4c4g] { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qrv-thumb[b-28iyip4c4g] { width: 80px; height: 80px; object-fit: cover; border-radius: var(--st-radius-sm); border: 1px solid var(--st-border); }

.qrv-block[b-28iyip4c4g] { border-top: 1px solid var(--st-border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.qrv-line[b-28iyip4c4g] { font-size: 13px; color: var(--st-text); }
.qrv-line--icon[b-28iyip4c4g] { display: flex; align-items: center; gap: 6px; }
.qrv-outcome[b-28iyip4c4g] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.qrv-signature[b-28iyip4c4g] {
    display: block; max-width: 100%; max-height: 160px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 8px; background: var(--st-bg);
}

.qrv-foot[b-28iyip4c4g] { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--st-border); }
.qrv-foot[b-28iyip4c4g]  .qrv-link { font-size: 13px; cursor: pointer; }

.qrv-dialog[b-28iyip4c4g]  .qrv-close { margin-left: auto; flex-shrink: 0; color: var(--st-muted); }
.qrv-dialog[b-28iyip4c4g]  .qrv-rate { color: var(--st-subtle); }
.qrv-dialog[b-28iyip4c4g]  .qrv-rate.is-up { color: var(--st-success); }
.qrv-dialog[b-28iyip4c4g]  .qrv-rate.is-down { color: var(--st-error); }
.qrv-dialog[b-28iyip4c4g]  .qrv-rate.is-mid { color: var(--st-caution); }
.qrv-dialog[b-28iyip4c4g]  .qrv-tile .mud-icon-root { font-size: 20px; }
.qrv-dialog[b-28iyip4c4g]  .qrv-loc .mud-icon-root { font-size: 14px; }
/* /Components/RegisterSickLeaveDialog.razor.rz.scp.css */
/* RegisterSickLeaveDialog: the employee search and its suggestion list. */
.rsl-search[b-br0xqsxm79] { position: relative; }
.rsl-suggest[b-br0xqsxm79] {
    position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin-top: 2px;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    max-height: 200px; overflow-y: auto; box-shadow: var(--st-shadow);
}
.rsl-suggest__item[b-br0xqsxm79] { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rsl-suggest__item:hover[b-br0xqsxm79] { background: var(--st-bg); }
.rsl-suggest__name[b-br0xqsxm79] { color: var(--st-text); font-weight: 500; }
.rsl-suggest__email[b-br0xqsxm79] { color: var(--st-subtle); font-size: 11px; }
.rsl-avatar[b-br0xqsxm79] { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rsl-avatar--initials[b-br0xqsxm79] {
    background: var(--st-bg-alt); color: var(--st-muted);
    display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
/* /Components/SalaryPeriodTimelineDialog.razor.rz.scp.css */
/* Salary-period history: a plain st-table with an event icon and the employee the change
   belongs to, a filter row above and the pager below. */

.spt-body[b-17lf7595h2] {
    display: flex;
    flex-direction: column;
    max-height: 72vh;
}

.spt-filter[b-17lf7595h2] {
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--st-border);
}

.spt-filter[b-17lf7595h2]  .mud-input-control {
    min-width: 220px;
    max-width: 320px;
}

.spt-scroll[b-17lf7595h2] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.spt-table thead th[b-17lf7595h2] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.spt-table tbody td[b-17lf7595h2] {
    vertical-align: top;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
}

.spt-col-when[b-17lf7595h2] { width: 150px; }
.spt-col-who[b-17lf7595h2] { width: 140px; }
.spt-col-event[b-17lf7595h2] { width: 170px; }
.spt-col-employee[b-17lf7595h2] { width: 160px; }

.spt-when[b-17lf7595h2] {
    color: var(--st-muted);
    white-space: nowrap;
}

.spt-who[b-17lf7595h2],
.spt-employee[b-17lf7595h2] {
    white-space: nowrap;
}

.spt-event[b-17lf7595h2] {
    white-space: nowrap;
    font-weight: 500;
}

.spt-event-label[b-17lf7595h2] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spt-kind[b-17lf7595h2] {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--st-subtle);
    margin-top: 2px;
}

/* ── Change details ────────────────────────────────────────────────────── */
.spt-trigger[b-17lf7595h2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.spt-chip[b-17lf7595h2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--st-border);
    border-radius: 999px;
    font-size: 11px;
    color: var(--st-muted);
}

.spt-change-row[b-17lf7595h2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
}

.spt-change-row + .spt-change-row[b-17lf7595h2] {
    margin-top: 2px;
}

.spt-change-field[b-17lf7595h2] {
    color: var(--st-muted);
}

.spt-change-val[b-17lf7595h2] {
    color: var(--st-text-strong);
}

.spt-arrow[b-17lf7595h2] {
    color: var(--st-subtle);
    padding: 0 2px;
}

.spt-removed[b-17lf7595h2] {
    text-decoration: line-through;
    color: var(--st-subtle);
}

.spt-muted[b-17lf7595h2] {
    color: var(--st-subtle);
}
/* /Components/ServiceAgreementViewDialog.razor.rz.scp.css */
/* ServiceAgreementViewDialog: agreement facts on the left, tasks / drawing tabs on the right. */
.sav-grid[b-wbicmqhxao] { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 420px; max-height: 76vh; }
.sav-left[b-wbicmqhxao] {
    padding: 20px 24px; display: flex; flex-direction: column; gap: 24px;
    overflow-y: auto; border-right: 1px solid var(--st-border-light);
}
.sav-right[b-wbicmqhxao] { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--st-surface-alt); }
.sav-tabs[b-wbicmqhxao] { padding: 0 24px; background: var(--st-white); flex-shrink: 0; }
.sav-pane[b-wbicmqhxao] { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 24px; }
.sav-text[b-wbicmqhxao] { font-size: 13px; color: var(--st-text); line-height: 1.5; }
.sav-table-wrap[b-wbicmqhxao] { border: 1px solid var(--st-border); border-radius: var(--st-radius-md); overflow: hidden; background: var(--st-white); }
.sav-col-num[b-wbicmqhxao] { width: 64px; }
.sav-col-cov[b-wbicmqhxao] { width: 96px; }
.sav-col-status[b-wbicmqhxao] { width: 120px; }
.sav-num[b-wbicmqhxao] { font-size: 12px; font-weight: 500; }
.sav-skel-block[b-wbicmqhxao] { display: block; height: 220px; border-radius: var(--st-radius-md); margin: 20px 24px; }
.sav-pane .sav-skel-block[b-wbicmqhxao] { margin: 0; }
@media (max-width: 900px) {
    .sav-grid[b-wbicmqhxao] { grid-template-columns: 1fr; max-height: none; }
    .sav-left[b-wbicmqhxao] { border-right: none; border-bottom: 1px solid var(--st-border-light); }
}
/* /Components/ServiceAssets/ServiceAssetsHistoryView.razor.rz.scp.css */
/* Asset service History tab: the list-page pattern (st-table-card, st-table, StPager). Only what
   the shared blocks do not cover lives here. */

/* Period navigator: kind of period, back / label / forward, all on the toolbar's 34px line. */
.sah-period[b-v9s2l3vepb] { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sah-period__label[b-v9s2l3vepb] {
    min-width: 150px; text-align: center; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: var(--st-text);
}
.sah-period__dash[b-v9s2l3vepb] { color: var(--st-subtle); }

/* The search gives way first, so the period, the totals and Filters stay on one line. */
.st-table-card__toolbar[b-v9s2l3vepb]  .sah-search { flex: 1 1 200px; }

/* The period totals, right after the search. */
.sah-summary[b-v9s2l3vepb] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Who is auto-registering right now: a quiet band under the toolbar. */
.sah-autosessions[b-v9s2l3vepb] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 16px; border-bottom: 1px solid var(--st-border-light);
    background: var(--st-bg); font-size: 12px; color: var(--st-muted);
}

.sah-nowrap[b-v9s2l3vepb] { white-space: nowrap; }
.sah-action[b-v9s2l3vepb] { display: inline-flex; align-items: center; gap: 6px; }
.sah-num[b-v9s2l3vepb] { color: var(--st-subtle); font-weight: 500; font-size: 12px; }
.sah-note[b-v9s2l3vepb] { font-style: italic; }
.sah-type[b-v9s2l3vepb] { display: inline-flex; align-items: center; gap: 8px; }
.sah-swatch[b-v9s2l3vepb] { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

.sah-photos[b-v9s2l3vepb] { display: flex; gap: 4px; flex-wrap: wrap; }
.sah-photo[b-v9s2l3vepb] { flex-shrink: 0; }
.sah-photo img[b-v9s2l3vepb] {
    width: 36px; height: 36px; border-radius: 6px; object-fit: cover;
    border: 1px solid var(--st-border); display: block;
}

/* The server stops at its row cap: say so above the pager. */
.sah-truncated[b-v9s2l3vepb] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-top: 1px solid var(--st-border);
    background: var(--st-warning-light); color: var(--st-warning);
    font-size: 12px; font-weight: 500;
}
/* /Components/Settings/AccessLocationsTab.razor.rz.scp.css */
/* Access locations card: the location list beside the map, both inside the one flush card. */
.al-intro[b-q84fu5zb1b] { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--st-muted); border-bottom: 1px solid var(--st-border-light); }
/* List column grows with the card (300px on laptops, up to 380px on wide screens). */
.al-layout[b-q84fu5zb1b] { display: grid; grid-template-columns: clamp(300px, 26%, 380px) minmax(0, 1fr); height: 480px; }
.al-list[b-q84fu5zb1b] { overflow-y: auto; padding: 8px; border-right: 1px solid var(--st-border-light); }
.al-map-wrap[b-q84fu5zb1b] { position: relative; min-width: 0; }
.al-map[b-q84fu5zb1b] { position: absolute; inset: 0; width: 100%; height: 100%; border-bottom-right-radius: var(--st-radius-md); }
.al-row-text[b-q84fu5zb1b] { flex: 1; min-width: 0; }
.al-row-title[b-q84fu5zb1b] { font-weight: 500; font-size: 13px; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-row-sub[b-q84fu5zb1b] { font-size: 11px; color: var(--st-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) {
    .al-layout[b-q84fu5zb1b] { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 360px; height: auto; }
    .al-list[b-q84fu5zb1b] { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--st-border-light); }
    .al-map[b-q84fu5zb1b] { border-bottom-left-radius: var(--st-radius-md); }
}
/* /Components/Settings/BillingTab.razor.rz.scp.css */
/* Billing tab (inside the shared .st-settings column): the account-state banner and the plan/seat lines. */
.bill-banner[b-u5c8jo0auk] {
    display: flex; gap: 20px; align-items: flex-start; padding: 24px 28px;
    border: 2px solid; border-radius: var(--st-radius-md);
}
.bill-banner--warn[b-u5c8jo0auk] {
    background: var(--st-warning-light);
    border-color: color-mix(in srgb, var(--st-warning) 40%, var(--st-white));
    color: color-mix(in srgb, var(--st-warning) 55%, var(--st-text-strong));
}
.bill-banner--error[b-u5c8jo0auk] {
    background: var(--st-error-light);
    border-color: color-mix(in srgb, var(--st-error) 35%, var(--st-white));
    color: var(--st-error-dark);
}
.bill-banner[b-u5c8jo0auk]  .bill-banner__icon { font-size: 40px; color: inherit; flex-shrink: 0; margin-top: 2px; }
.bill-banner__title[b-u5c8jo0auk] { font-size: 22px; font-weight: 700; margin-bottom: 6px; line-height: 1.2; }
.bill-banner__text[b-u5c8jo0auk] { font-size: 15px; line-height: 1.5; }
.bill-line[b-u5c8jo0auk] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; background: var(--st-bg); border-radius: var(--st-radius);
}
.bill-num[b-u5c8jo0auk] { font-variant-numeric: tabular-nums; }
.bill-total[b-u5c8jo0auk] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; margin-top: 4px; border-top: 1px solid var(--st-border);
}
.bill-total__amount[b-u5c8jo0auk] { font-weight: 700; font-size: 18px; }
.bill-payment-element[b-u5c8jo0auk] { margin: 16px 0; min-height: 180px; }
/* Full page width: postal code (narrow) + city share one cell of the billing-details grid. */
.bill-postcity[b-u5c8jo0auk] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
/* Invoice-billed seat caps as tiles instead of full-width lines. */
.bill-seats[b-u5c8jo0auk] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
/* Invoice history column widths: the period column takes the rest. */
.bill-col-number[b-u5c8jo0auk] { width: 200px; }
.bill-col-status[b-u5c8jo0auk] { width: 160px; }
.bill-col-amount[b-u5c8jo0auk] { width: 180px; text-align: right; }
/* /Components/Settings/ChecklistTemplatesTab.razor.rz.scp.css */
/* Settings > Checklists list view: one table card inside the shared .st-settings column.
   The "Show archived" switch sits in the card title bar next to "New checklist". */
.st-settings[b-bs5o7xj6bt]  .clt-archived-switch { margin: 0; }
.st-settings[b-bs5o7xj6bt]  .clt-archived-switch .mud-typography { font-size: 13px; color: var(--st-muted); }
/* Table column widths: the name (with its description line) takes the rest of the card. */
.clt-col-items[b-bs5o7xj6bt] { width: 140px; }
.clt-col-updated[b-bs5o7xj6bt] { width: 140px; }
.clt-col-status[b-bs5o7xj6bt] { width: 160px; }
/* /Components/Settings/Integrations/CustomerMappingTable.razor.rz.scp.css */
/* Customer mapping card: scrolling rows, unmapped highlight, and the remap dialog's search list. */
.cmt-scroll[b-au84ayg0dn] { max-height: min(52vh, 520px); overflow-y: auto; }
.cmt-row--unmapped td[b-au84ayg0dn] { background: var(--st-warning-light); }
.cmt-search[b-au84ayg0dn] { position: relative; }
.cmt-search__input[b-au84ayg0dn] {
    width: 100%; padding: 10px 12px; border: 1px solid var(--st-border-hover); border-radius: var(--st-radius);
    font-family: var(--st-font-body); font-size: 14px; outline: none;
}
.cmt-search__input:focus[b-au84ayg0dn] { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.cmt-search__spinner[b-au84ayg0dn] { position: absolute; right: 10px; top: 10px; }
.cmt-results[b-au84ayg0dn] { min-height: 180px; max-height: 300px; overflow-y: auto; }
.cmt-result[b-au84ayg0dn] {
    display: block; width: 100%; text-align: left; padding: 10px 12px; border: none;
    border-bottom: 1px solid var(--st-border-light); background: transparent; cursor: pointer;
    font-family: var(--st-font-body); font-size: 14px; border-radius: var(--st-radius-sm);
}
.cmt-result:hover[b-au84ayg0dn] { background: var(--st-bg); }
.cmt-result__name[b-au84ayg0dn] { font-weight: 600; color: var(--st-text); }
.cmt-result__meta[b-au84ayg0dn] { color: var(--st-muted); }
.cmt-results__empty[b-au84ayg0dn] { padding: 16px 4px; color: var(--st-muted); font-size: 13px; }
/* /Components/Settings/Integrations/IntegrationCard.razor.rz.scp.css */
.int-card[b-xlifuqr4fh] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    padding: 18px;
    background: var(--st-white);
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    min-height: 118px;
    outline: none;
}

.int-card:hover[b-xlifuqr4fh],
.int-card:focus-visible[b-xlifuqr4fh] {
    border-color: var(--st-primary-border);
    box-shadow: var(--st-shadow);
}

.int-card:active[b-xlifuqr4fh] {
    transform: translateY(1px);
}

.int-card--selected[b-xlifuqr4fh] {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 3px var(--st-primary-focus-ring);
}

.int-card--disabled[b-xlifuqr4fh] {
    cursor: not-allowed;
    opacity: .5;
    filter: grayscale(.5);
    pointer-events: auto; /* keep the tooltip on hover */
}

.int-card--disabled:hover[b-xlifuqr4fh],
.int-card--disabled:focus-visible[b-xlifuqr4fh] {
    border-color: var(--st-border);
    box-shadow: none;
}

.int-card__top[b-xlifuqr4fh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

[b-xlifuqr4fh] .int-card__chip { white-space: nowrap; }

.int-card__name[b-xlifuqr4fh] {
    font-weight: 700;
    font-size: 15px;
    color: var(--st-text);
    line-height: 1.25;
}

.int-card__sub[b-xlifuqr4fh] {
    font-size: 12px;
    color: var(--st-subtle);
    line-height: 1.35;
}
/* /Components/Settings/Integrations/IntegrationConnectWizard.razor.rz.scp.css */
/* Connect wizard: numbered "what happens" steps. */
.icw-step[b-s9tpeb8nfy] {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: var(--st-primary-light); color: var(--st-primary);
    font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

[b-s9tpeb8nfy] .icw-step__text { padding-top: 2px; }
/* /Components/Settings/Integrations/IntegrationDetailSidebar.razor.rz.scp.css */
.int-drawer-backdrop[b-kk86bdlqcx] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .38);
    z-index: 1249;
    animation: int-fade-b-kk86bdlqcx .15s ease;
}

.int-drawer[b-kk86bdlqcx] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 600px;
    max-width: 94vw;
    background: var(--st-bg);
    box-shadow: -8px 0 28px rgba(15, 23, 42, .18);
    z-index: 1250;
    /* Grid (not flex column): a 1fr row + min-height:0 makes the body scroll
       reliably in every browser — Safari mis-sizes the flex:1 equivalent. */
    display: grid;
    grid-template-rows: auto 1fr;
    animation: int-slide-b-kk86bdlqcx .2s ease;
    outline: none;
}

.int-drawer__head[b-kk86bdlqcx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--st-border);
    background: var(--st-white);
    flex-shrink: 0;
}

.int-drawer__head-text[b-kk86bdlqcx] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.int-drawer__title[b-kk86bdlqcx] {
    font-weight: 700;
    font-size: 17px;
    color: var(--st-text);
}

[b-kk86bdlqcx] .int-drawer__chip { white-space: nowrap; }

.int-drawer__body[b-kk86bdlqcx] {
    min-height: 0;   /* grid items default to min-height:auto and won't shrink, which kills the scroll */
    overflow-y: auto;
    overscroll-behavior: contain;   /* don't hand the wheel to the page behind the drawer */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The body is a fixed-height flex column: without this, its cards (default
   flex-shrink:1) compress to fit instead of overflowing, so nothing scrolls
   and the customer mapping table gets squashed. */
.int-drawer__body[b-kk86bdlqcx]  > * {
    flex-shrink: 0;
}

@keyframes int-slide-b-kk86bdlqcx {
    from { transform: translateX(24px); opacity: .4; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes int-fade-b-kk86bdlqcx {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Settings/Integrations/IntegrationProductsCard.razor.rz.scp.css */
/* Account table: wide enough for a department multi-select, scrolls inside the card
   instead of widening the settings drawer. */
.products-scroll[b-52nx86nv79] {
    overflow-x: auto;
}

.products-table[b-52nx86nv79] {
    min-width: 520px;
}

.products-add[b-52nx86nv79] {
    border-top: 1px solid var(--st-border);
}

.col-departments[b-52nx86nv79] {
    min-width: 220px;
}

/* MudBlazor renders its own root for these, so the rules must reach through ::deep. */
[b-52nx86nv79] .add-account-no {
    max-width: 160px;
}

[b-52nx86nv79] .add-name {
    min-width: 200px;
}
/* /Components/Settings/Integrations/QuickBooksDesktopSetupWizard.razor.rz.scp.css */
/* QuickBooks Desktop wizard: credential boxes, step progress and screenshots. */
.qbd-value[b-x6qqxu7hyp] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--st-bg);
    border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 8px 12px; margin-top: 6px;
    user-select: all;
}
.qbd-shot[b-x6qqxu7hyp] {
    max-width: 100%; max-height: 320px; object-fit: contain; object-position: left top;
    border: 1px solid var(--st-border); border-radius: var(--st-radius); display: block;
}
[b-x6qqxu7hyp] .qbd-progress { height: 4px; border-radius: 2px; margin-top: 8px; }
/* /Components/Settings/IntegrationsTab.razor.rz.scp.css */
/* Integrations tab: search toolbar, then grouped grids of provider tiles (same tile size in every card). */

.int-grid[b-byzmhpiusy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* CRM + Maps share a row (st-settings__row) when both show; otherwise the wrapper steps aside. */
.int-contents[b-byzmhpiusy] { display: contents; }

.int-empty[b-byzmhpiusy] {
    padding: 40px;
    text-align: center;
    color: var(--st-subtle);
}

.int-skel[b-byzmhpiusy] { padding: 18px; border: 1px solid var(--st-border); border-radius: var(--st-radius-md); min-height: 118px; }

/* Sidebar: connected map facts and the salary company id field. */
.int-facts[b-byzmhpiusy] { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--st-text); }
.int-company-id[b-byzmhpiusy] { max-width: 220px; }
/* /Components/Settings/PayGroupsTab.razor.rz.scp.css */
/* Settings > Pay groups list view: one table card inside the shared .st-settings column, laid out
   like the Checklists tab. The "Show archived" switch sits in the card title bar next to "New". */
.st-settings[b-jl7et3580b]  .pg-archived-switch { margin: 0; }
.st-settings[b-jl7et3580b]  .pg-archived-switch .mud-typography { font-size: 13px; color: var(--st-muted); }
/* Table column widths: the codes column (departments + count) takes the rest of the card. */
.pg-col-kind[b-jl7et3580b] { width: 140px; }
.pg-col-employees[b-jl7et3580b] { width: 140px; }
.pg-col-status[b-jl7et3580b] { width: 140px; }
/* /Components/Settings/PermissionsTab.razor.rz.scp.css */
/* Permissions tab: page badges in the levels table and the page picker grid in the dialog. */
.perm-pages-list[b-6gbz4hj1ia] { display: flex; flex-wrap: wrap; gap: 4px; }
.perm-page-badge[b-6gbz4hj1ia] { display: inline-flex; align-items: center; gap: 4px; }
.perm-page-badge[b-6gbz4hj1ia]  .mud-icon-root { font-size: 13px; }
.perm-group-label[b-6gbz4hj1ia] {
  display: block; margin-top: 10px; font-size: 11px; color: var(--st-subtle);
  text-transform: uppercase; letter-spacing: .04em;
}
.perm-pages[b-6gbz4hj1ia] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Intro line: the "Learn how levels work" link toggles the three rules as a compact callout. */
.perm-help-toggle[b-6gbz4hj1ia] {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--st-primary); cursor: pointer;
}
.perm-help-toggle:hover[b-6gbz4hj1ia] { text-decoration: underline; }
.perm-help-toggle[b-6gbz4hj1ia]  .mud-icon-root { font-size: 18px; }
.perm-help[b-6gbz4hj1ia] { max-width: 90ch; margin: 10px 0 0; padding: 10px 14px 10px 30px; color: var(--st-text); display: flex; flex-direction: column; gap: 4px; }
/* Levels table column widths: the pages column takes the rest of the full-width card. */
.perm-col-name[b-6gbz4hj1ia] { width: 240px; }
.perm-col-money[b-6gbz4hj1ia] { width: 140px; }
.perm-col-users[b-6gbz4hj1ia] { width: 160px; }
/* /Components/Settings/QrTemplateEditorDialog.razor.rz.scp.css */
/* QR placement editor. The stage keeps page proportions (its height is set by the JS from the
   page's aspect ratio); the template fills it and the square sits on top. */

.qte-layout[b-2ix9qcdeko] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 760px) {
    .qte-layout[b-2ix9qcdeko] { grid-template-columns: minmax(0, 1fr); }
}

.qte-stage[b-2ix9qcdeko] {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    touch-action: none;
    user-select: none;
}

.qte-bg[b-2ix9qcdeko] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.qte-box[b-2ix9qcdeko] {
    position: absolute;
    cursor: move;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.qte-box--qr[b-2ix9qcdeko] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--st-primary);
    background: rgba(255, 255, 255, 0.82);
}

/* The text box shows sample names at their printed size, in the font the PDF uses. Text that
   doesn't fit is cut, as in the print. */
.qte-box--label[b-2ix9qcdeko] {
    display: flex;
    flex-direction: column;
    border: 1.5px dashed var(--st-warning);
    background: rgba(255, 255, 255, 0.35);
    font-family: Lato, sans-serif;
    line-height: 1.2;
    overflow: visible;
}

.qte-line1[b-2ix9qcdeko],
.qte-line2[b-2ix9qcdeko] {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Print colours (black / DimGray in the PDF), not theme colours: this previews paper. */
.qte-line1[b-2ix9qcdeko] { font-weight: 700; color: #000; }
.qte-line2[b-2ix9qcdeko] { color: #696969; }

.qte-side[b-2ix9qcdeko]  .qte-font-size { max-width: 140px; }

.qte-box[b-2ix9qcdeko]  .qte-box-icon {
    width: 60%;
    height: 60%;
    color: var(--st-primary);
    pointer-events: none;
}

.qte-handle[b-2ix9qcdeko] {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--st-white);
    border-radius: var(--st-radius-full);
    background: var(--st-primary);
    cursor: nwse-resize;
}
/* /Components/Settings/QrTemplatesTab.razor.rz.scp.css */
/* Settings > QR templates. The upload dialog is portaled, but its markup is written in this
   component, so the scoped classes still apply to it. */

.qtt-col-thumb[b-63loewmseo] { width: 64px; }
.qtt-col-used[b-63loewmseo] { width: 200px; }

.qtt-thumb[b-63loewmseo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-sm);
    background: var(--st-bg);
}

.qtt-thumb--pdf[b-63loewmseo] { color: var(--st-subtle); }

.qtt-dropzone[b-63loewmseo] {
    display: block;
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    border: 1.5px dashed var(--st-border-hover);
    border-radius: 10px;
    background: var(--st-white);
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.qtt-dropzone:hover[b-63loewmseo] { border-color: var(--st-primary); background: var(--st-bg); }
.qtt-dropzone[b-63loewmseo]  .qtt-dropzone-icon { display: block; margin: 0 auto 6px; font-size: 26px; color: var(--st-subtle); }
.qtt-dropzone-title[b-63loewmseo] { display: block; font-size: 13px; font-weight: 600; color: var(--st-text); margin-bottom: 2px; }
.qtt-dropzone-sub[b-63loewmseo] { display: block; font-size: 12px; color: var(--st-subtle); }

.qtt-staged-file[b-63loewmseo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.qtt-staged-file[b-63loewmseo]  .qtt-file-icon { color: var(--st-subtle); flex-shrink: 0; }
.qtt-staged-file-main[b-63loewmseo] { flex: 1; min-width: 0; }
.qtt-staged-file-name[b-63loewmseo] { font-size: 12px; font-weight: 500; color: var(--st-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qtt-staged-file-size[b-63loewmseo] { font-size: 11px; color: var(--st-subtle); }
/* /Components/Settings/RouteAreasSection.razor.rz.scp.css */
/* Settings > Business > Route areas: the municipality search sits between the intro and the
   area table, divided from the table like the intro is from the search. */
.ra-search[b-ahtdgyi5jl] { border-bottom: 1px solid var(--st-border); }
.ra-result + .ra-result[b-ahtdgyi5jl] { border-top: 1px solid var(--st-border); }
/* Table column widths: the name takes the rest of the card. */
.ra-col-status[b-ahtdgyi5jl] { width: 150px; }
.ra-col-roads[b-ahtdgyi5jl] { width: 110px; }
.ra-col-updated[b-ahtdgyi5jl] { width: 150px; }
/* /Components/Settings/VisitEmailTemplatesSection.razor.rz.scp.css */
/* Settings > Notifications > visit email templates: list card + in-place editor; every colour is a --st-* token. */
.vet-back[b-0sqxf05g0w] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-muted);
    cursor: pointer;
}

.vet-back:hover[b-0sqxf05g0w] {
    border-color: var(--st-border-hover);
    color: var(--st-text);
}












.vet-editor[b-0sqxf05g0w] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 960px) {
    .vet-editor[b-0sqxf05g0w] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vet-editor__form[b-0sqxf05g0w] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.vet-hint-tight[b-0sqxf05g0w] {
    margin-top: -10px;
}

.vet-editor__preview[b-0sqxf05g0w] {
    min-width: 0;
}

.vet-preview[b-0sqxf05g0w] {
    min-height: 160px;
    padding: 16px 20px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    font-size: 14px;
    line-height: 1.5;
    color: var(--st-text);
    overflow-wrap: anywhere;
}

.vet-preview__subject[b-0sqxf05g0w] {
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--st-border-light);
    font-weight: 600;
}

/* List: the name (with its usage line) takes the width; languages get a fixed column. */
.vet-col-lang[b-0sqxf05g0w] { width: 240px; }
/* /Components/ShiftScheduler/AccordApprovalDetailDialog.razor.rz.scp.css */
/* Piecework approval detail dialog: employee header, locked amounts, audit timeline. */
.aad-head[b-rvx2dbh84t] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aad-sub[b-rvx2dbh84t] { font-size: 12px; color: var(--st-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aad-skel[b-rvx2dbh84t] { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.aad-employee[b-rvx2dbh84t] { display: flex; align-items: center; gap: 12px; }
.aad-avatar[b-rvx2dbh84t] {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-border); color: var(--st-muted); font-size: 13px; font-weight: 600;
}
.aad-employee-name[b-rvx2dbh84t] { font-size: 14px; font-weight: 600; color: var(--st-text); }

.aad-timeline[b-rvx2dbh84t] { display: flex; flex-direction: column; position: relative; }
.aad-timeline-item[b-rvx2dbh84t] { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.aad-timeline-item:not(:last-child)[b-rvx2dbh84t]::before {
    content: ''; position: absolute; left: 5px; top: 22px; bottom: -4px;
    width: 1px; background: var(--st-border);
}
.aad-timeline-dot[b-rvx2dbh84t] {
    width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
    background: var(--st-border-hover);
}
.aad-timeline-dot.is-success[b-rvx2dbh84t] { background: var(--st-success); }
.aad-timeline-dot.is-info[b-rvx2dbh84t] { background: var(--st-primary); }
.aad-timeline-dot.is-warning[b-rvx2dbh84t] { background: var(--st-warning); }
.aad-timeline-dot.is-error[b-rvx2dbh84t] { background: var(--st-error); }
/* /Components/ShiftScheduler/AccordApprovalTab.razor.rz.scp.css */
/* Piecework approval tab: st-table with a virtualized body. */
.accord-toolbar-main[b-w7eub99ybe] { flex-wrap: wrap; }
.accord-table td.accord-nowrap[b-w7eub99ybe] { white-space: nowrap; }
.accord-table tbody tr.is-deleted td[b-w7eub99ybe] { opacity: 0.6; }
.accord-task-link[b-w7eub99ybe] { color: var(--st-primary); font-weight: 500; font-size: 13px; text-decoration: none; }
.accord-task-link:hover[b-w7eub99ybe] { text-decoration: underline; }
.accord-avatar[b-w7eub99ybe] {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-border); color: var(--st-muted); font-size: 11px; font-weight: 600;
}
/* /Components/ShiftScheduler/ApprovalOverviewTab.razor.rz.scp.css */
/* Approval traffic-light overview. Every hook sits on a plain HTML element (classes on MudBlazor
   components never receive the scope attribute); the light dot itself is the global .st-light. */

/* ── Toolbar (inside the table card) ─────────────────────────────────── */
.aov-toolbar-main[b-sw4jnvka8q] { flex-wrap: wrap; }

/* Summary tiles + rules: a band between the card toolbar and the table. */
.aov-band[b-sw4jnvka8q] { padding: 12px 16px 0; }

/* ── Period summary tiles ──────────────────────────────────────────────── */
.aov-summary[b-sw4jnvka8q] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

@media (max-width: 700px) {
    .aov-summary[b-sw4jnvka8q] { grid-template-columns: 1fr; }
}

.aov-tile[b-sw4jnvka8q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color var(--st-duration-fast) var(--st-ease), opacity var(--st-duration-fast) var(--st-ease);
}

.aov-tile:hover[b-sw4jnvka8q] { border-color: var(--st-border-hover); }
.aov-tile-active[b-sw4jnvka8q] { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.aov-tile-dim[b-sw4jnvka8q] { opacity: 0.55; }

.aov-tile-count[b-sw4jnvka8q] {
    font-family: var(--st-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--st-text-strong);
    line-height: 1;
}

.aov-tile-label[b-sw4jnvka8q] {
    font-size: 13px;
    color: var(--st-muted);
}

.aov-rules[b-sw4jnvka8q] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--st-muted);
    margin-bottom: 16px;
}

/* ── Table (st-table) ─────────────────────────────────────────────────── */
.aov-light[b-sw4jnvka8q] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-weight: 500;
    color: var(--st-text);
}

.aov-count[b-sw4jnvka8q] {
    display: inline-block;
    padding: 2px 8px;
    margin: 1px 4px 1px 0;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    background: var(--st-success-light);
    color: var(--st-success-dark);
}

.aov-count-pending[b-sw4jnvka8q] {
    background: var(--st-caution-light);
    color: var(--st-warning);
}

.aov-count-bad[b-sw4jnvka8q] {
    background: var(--st-error-light);
    color: var(--st-error-dark);
}

.st-table .aov-actions[b-sw4jnvka8q] {
    white-space: nowrap;
    text-align: right;
    width: 96px;
}

/* /Components/ShiftScheduler/BulkActionBar.razor.rz.scp.css */
/* Ghost button on the dark bulk bar (.bulk-action-bar in app.css): light text and a faint
   light outline instead of the white-card Ghost look. */
.bulk-action-bar[b-goizciqgw5]  .bulk-action-reset {
    background: transparent; color: var(--st-white);
    border-color: color-mix(in srgb, var(--st-white) 30%, transparent);
}
/* /Components/ShiftScheduler/ConflictWarningDialog.razor.rz.scp.css */
/* Template conflict list: kept days tinted warning, previously deleted days neutral. */
.cwd-tile[b-xalysbipt1] { background: var(--st-warning-light); color: var(--st-warning); }
.cwd-list[b-xalysbipt1] { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cwd-item[b-xalysbipt1] {
    background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm);
    padding: 8px 12px; font-size: 13px; color: var(--st-text);
}
.cwd-item--warn[b-xalysbipt1] {
    background: var(--st-warning-light);
    border-color: color-mix(in srgb, var(--st-warning) 35%, var(--st-white));
}
/* /Components/ShiftScheduler/CreateShiftDialog.razor.rz.scp.css */
.csd-head[b-2610385t3w] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.csd-sub[b-2610385t3w] { font-size: 12px; color: var(--st-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csd-grid-2[b-2610385t3w] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* /Components/ShiftScheduler/EmployeeDetailView.razor.rz.scp.css */
/* EmployeeDetailView: the page renders PageTabs + .st-content; the modal renders a side
   navigation beside a content pane. Content is StCard / .st-card-grid / .st-kv / .st-table;
   the rules here are only the structure those shared pieces do not cover. */

/* ── Modal layout ────────────────────────────────────────────────────────── */

/* Tall enough for the salary tab's payslip and akkord lines. The dialog itself caps at the
   viewport minus MudBlazor's dialog margin, so this stays on screen. */
.emp-popup-body[b-lkkp1op1vp] {
    display: flex;
    height: calc(100vh - 96px);
    overflow: hidden;
    margin: 0;
}

.emp-side[b-lkkp1op1vp] {
    width: 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--st-bg);
    border-right: 1px solid var(--st-border);
}

.emp-side__head[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--st-border);
}

.emp-side__who[b-lkkp1op1vp] {
    min-width: 0;
}

.emp-side__name[b-lkkp1op1vp] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.emp-side__team[b-lkkp1op1vp] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

/* Items reuse the sidebar's .st-nav-item (active = primary tint + primary text). */
.emp-side__nav[b-lkkp1op1vp] {
    flex: 1;
    padding: 12px 0;
}

.emp-side__nav[b-lkkp1op1vp]  .mud-icon-root {
    font-size: 18px;
}

.emp-pane[b-lkkp1op1vp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--st-bg);
}

.emp-pane__head[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border);
}

.emp-pane__title[b-lkkp1op1vp] {
    font-size: 18px;
    font-weight: 700;
    color: var(--st-text);
}

.emp-pane__body[b-lkkp1op1vp] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Shared bits ─────────────────────────────────────────────────────────── */

.emp-avatar[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--st-border);
    color: var(--st-muted);
    font-weight: 700;
    object-fit: cover;
}

.emp-avatar--sm[b-lkkp1op1vp] {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.emp-avatar--lg[b-lkkp1op1vp] {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.emp-muted[b-lkkp1op1vp] {
    font-size: 13px;
    color: var(--st-subtle);
}

.emp-kv-inline[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.emp-skeleton-w60[b-lkkp1op1vp] {
    width: 60%;
}

.emp-skeleton-row + .emp-skeleton-row[b-lkkp1op1vp] {
    margin-top: 16px;
}

/* ── Info tab ────────────────────────────────────────────────────────────── */

.emp-profile[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.emp-profile__who[b-lkkp1op1vp] {
    min-width: 0;
}

.emp-profile__name[b-lkkp1op1vp] {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
}

.emp-profile__roles[b-lkkp1op1vp] {
    font-size: 13px;
    color: var(--st-muted);
}

.emp-chips[b-lkkp1op1vp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.emp-chip[b-lkkp1op1vp] {
    padding: 4px 12px;
    border-radius: var(--st-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.emp-chip--team[b-lkkp1op1vp] {
    background: var(--st-primary-light);
    color: var(--st-primary);
}

/* ── Sick leave tab ──────────────────────────────────────────────────────── */

/* Inside a toolbar card's band (.st-table-card__toolbar supplies the padding). */
.emp-sl-toolbar[b-lkkp1op1vp] {
    justify-content: space-between;
}

.emp-sl-toolbar__period[b-lkkp1op1vp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.emp-stat-value[b-lkkp1op1vp] {
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 700;
    color: var(--st-text);
}

.emp-stat-meta[b-lkkp1op1vp] {
    font-size: 12px;
    color: var(--st-muted);
}

.emp-stat-meta--subtle[b-lkkp1op1vp] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.emp-rate-bar[b-lkkp1op1vp] {
    position: relative;
    height: 6px;
    margin-bottom: 4px;
    border-radius: 3px;
    background: var(--st-border);
}

.emp-rate-bar__fill[b-lkkp1op1vp] {
    height: 100%;
    border-radius: 3px;
}

.emp-rate-bar__fill--ok[b-lkkp1op1vp] {
    background: var(--st-primary);
}

.emp-rate-bar__fill--warn[b-lkkp1op1vp] {
    background: var(--st-warning);
}

.emp-rate-bar__fill--high[b-lkkp1op1vp] {
    background: var(--st-error);
}

/* Tenant average marker on the rate bar. */
.emp-rate-bar__avg[b-lkkp1op1vp] {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: var(--st-subtle);
}

.emp-legend[b-lkkp1op1vp] {
    display: flex;
    gap: 18px;
    padding-top: 8px;
    font-size: 12px;
    color: var(--st-muted);
}

.emp-legend__dot[b-lkkp1op1vp] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 2px;
    vertical-align: middle;
}

.emp-legend__dot--current[b-lkkp1op1vp] {
    background: var(--st-primary);
}

.emp-legend__dot--previous[b-lkkp1op1vp] {
    background: var(--st-border-hover);
}

.emp-weekdays[b-lkkp1op1vp] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    gap: 14px;
    height: 180px;
    padding: 18px;
}

.emp-weekday[b-lkkp1op1vp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    height: 100%;
}

.emp-weekday__bar[b-lkkp1op1vp] {
    flex-shrink: 0;
    width: 100%;
    max-width: 36px;
    min-height: 4px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--st-primary) 0%, color-mix(in srgb, var(--st-primary) 75%, var(--st-white)) 100%);
}

.emp-weekday__bar--peak[b-lkkp1op1vp] {
    background: linear-gradient(180deg, var(--st-warning) 0%, var(--st-caution) 100%);
}

.emp-weekday__value[b-lkkp1op1vp] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--st-text-strong);
    white-space: nowrap;
}

.emp-weekday__label[b-lkkp1op1vp] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.emp-row--clickable[b-lkkp1op1vp] {
    cursor: pointer;
}

.emp-note[b-lkkp1op1vp] {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 12px;
    font-style: italic;
    color: var(--st-muted);
}

.st-table-scroll[b-lkkp1op1vp]  .emp-edit-hint {
    color: var(--st-warning);
}

/* ── History tab ─────────────────────────────────────────────────────────── */

.emp-timeline[b-lkkp1op1vp] {
    display: flex;
    flex-direction: column;
    max-width: 640px;
}

.emp-tl[b-lkkp1op1vp] {
    display: flex;
    gap: 14px;
}

.emp-tl__rail[b-lkkp1op1vp] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.emp-tl__icon[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
}

.emp-tl__icon[b-lkkp1op1vp]  .mud-icon-root {
    font-size: 16px;
}

.emp-tl__icon--success[b-lkkp1op1vp] {
    background: var(--st-success-light);
    color: var(--st-success);
}

.emp-tl__icon--primary[b-lkkp1op1vp] {
    background: var(--st-primary-light);
    color: var(--st-primary);
}

.emp-tl__icon--error[b-lkkp1op1vp] {
    background: var(--st-error-light);
    color: var(--st-error);
}

.emp-tl__icon--warning[b-lkkp1op1vp] {
    background: var(--st-warning-light);
    color: var(--st-warning);
}

.emp-tl__icon--neutral[b-lkkp1op1vp] {
    background: var(--st-bg-alt);
    color: var(--st-muted);
}

.emp-tl__line[b-lkkp1op1vp] {
    flex: 1;
    width: 2px;
    margin: 4px 0;
    background: var(--st-border);
}

.emp-tl__body[b-lkkp1op1vp] {
    flex: 1;
    min-width: 0;
}

.emp-tl__body--spaced[b-lkkp1op1vp] {
    padding-bottom: 20px;
}

.emp-tl__title[b-lkkp1op1vp] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--st-text);
}

.emp-tl__change[b-lkkp1op1vp] {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--st-muted);
}

.emp-tl__meta[b-lkkp1op1vp] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--st-subtle);
}

/* ── Salary tab ──────────────────────────────────────────────────────────── */
/* Base pay, period selector, Lønliste summary, akkord lines, hours and overwork. Only
   sections with content render (see RenderSalaryTab). */

.sal-section[b-lkkp1op1vp] {
    margin-bottom: 24px;
}

/* Inside a toolbar card's band (.st-table-card__toolbar supplies the padding). */
.sal-period[b-lkkp1op1vp] {
    gap: 12px;
}

.sal-period-btn[b-lkkp1op1vp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-full);
    background: var(--st-white);
    color: var(--st-muted);
    cursor: pointer;
}

.sal-period-btn:disabled[b-lkkp1op1vp] {
    cursor: default;
    opacity: 0.5;
}

.sal-period-text[b-lkkp1op1vp] {
    text-align: center;
    min-width: 180px;
}

.sal-period-title[b-lkkp1op1vp] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.sal-period-sub[b-lkkp1op1vp] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-subtle);
}

.sal-period-skeleton[b-lkkp1op1vp] {
    width: 140px;
    margin: 0 auto;
}

.sal-current[b-lkkp1op1vp] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Right-aligned money / quantity columns in the salary tables. */
.sal-num[b-lkkp1op1vp] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sal-nowrap[b-lkkp1op1vp] {
    white-space: nowrap;
}

.sal-total td[b-lkkp1op1vp] {
    border-top: 2px solid var(--st-border);
    font-weight: 700;
}

.sal-code[b-lkkp1op1vp] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}

.sal-real-times[b-lkkp1op1vp] {
    font-size: 11px;
    color: var(--st-muted);
    white-space: nowrap;
}

/* Inner tiles (per shift type) inside the Hours card. */
.sal-card[b-lkkp1op1vp] {
    padding: 14px 16px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
}

.sal-card-kicker[b-lkkp1op1vp] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-muted);
}

.sal-note[b-lkkp1op1vp] {
    margin-top: 10px;
    font-size: 11px;
    font-style: italic;
    color: var(--st-subtle);
}

/* ── Lønliste summary: pay codes beside absences, stacked when narrow ────── */

.sal-payslip-grid[b-lkkp1op1vp] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.sal-payslip-grid--single[b-lkkp1op1vp] {
    grid-template-columns: minmax(0, 1fr);
}

.sal-absence[b-lkkp1op1vp] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    font-size: 13px;
    color: var(--st-text);
}

.sal-absence-code[b-lkkp1op1vp] {
    font-weight: 600;
}

.sal-absence-days[b-lkkp1op1vp] {
    color: var(--st-muted);
    white-space: nowrap;
}

/* ── Akkord totals (top of the flush Akkord card) ────────────────────────── */

.sal-stats[b-lkkp1op1vp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--st-border-light);
}

.sal-stat[b-lkkp1op1vp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
    padding: 10px 14px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-bg);
}

.sal-stat--approved[b-lkkp1op1vp] {
    background: var(--st-success-light);
}

.sal-stat-label[b-lkkp1op1vp] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
}

.sal-stat-value[b-lkkp1op1vp] {
    font-size: 15px;
    font-weight: 700;
    color: var(--st-text);
    font-variant-numeric: tabular-nums;
}

/* ── Hours ───────────────────────────────────────────────────────────────── */

.sal-hours-grid[b-lkkp1op1vp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.sal-dot[b-lkkp1op1vp] {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sal-kv[b-lkkp1op1vp] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--st-muted);
}

.sal-kv-value[b-lkkp1op1vp] {
    font-weight: 500;
    color: var(--st-text);
}

.sal-kv-value--minus[b-lkkp1op1vp] {
    color: var(--st-error);
}

.sal-kv--net[b-lkkp1op1vp] {
    padding-top: 6px;
    border-top: 2px solid var(--st-primary);
}

.sal-kv--net .sal-kv-value[b-lkkp1op1vp] {
    font-weight: 600;
    color: var(--st-primary);
}

/* ── Overwork by week ────────────────────────────────────────────────────── */

.sal-weeks[b-lkkp1op1vp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sal-week[b-lkkp1op1vp] {
    flex: 1;
    min-width: 100px;
    padding: 12px 16px;
    border: 1px solid var(--st-border);
    border-radius: 10px;
    background: var(--st-white);
    text-align: center;
}

.sal-week--over[b-lkkp1op1vp] {
    border-color: color-mix(in srgb, var(--st-warning) 35%, var(--st-white));
}

.sal-week--total[b-lkkp1op1vp] {
    background: var(--st-bg);
}

.sal-week-label[b-lkkp1op1vp] {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--st-subtle);
}

.sal-week-value[b-lkkp1op1vp] {
    margin: 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--st-border-hover);
}

.sal-week--over .sal-week-value[b-lkkp1op1vp] {
    color: var(--st-warning);
}

.sal-week--total .sal-week-value[b-lkkp1op1vp] {
    color: var(--st-text);
}

.sal-week-range[b-lkkp1op1vp] {
    font-size: 10px;
    color: var(--st-subtle);
}

@media (max-width: 800px) {
    .sal-payslip-grid[b-lkkp1op1vp] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sal-period[b-lkkp1op1vp] {
        justify-content: center;
    }
}
/* /Components/ShiftScheduler/PeriodNavigator.razor.rz.scp.css */
/* The period label between the prev/next arrows (was a MudText body2 with inline styles). */
.period-label[b-wbrhopbvbf] {
    min-width: 200px; text-align: center;
    font-size: 14px; font-weight: 500; line-height: 1.43; color: var(--st-text);
}
/* /Components/ShiftScheduler/SalaryApprovalHeader.razor.rz.scp.css */
/* Period headline + 3-step progress strip on top of the payroll export tab.
   Every hook below sits on a plain HTML element: classes put on MudBlazor components never receive
   the scope attribute, so MudIcon/MudChip innards are reached with ::deep from a plain ancestor. */

/* ── Period headline ───────────────────────────────────────────────────── */
/* A slim white card of its own (period stepper left, status + Timeline right), not controls
   floating on the page grey. */
.sap-head[b-rt0hogoe9s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 16px 8px 8px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
}

.sap-nav[b-rt0hogoe9s] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sap-period[b-rt0hogoe9s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 240px;
    padding: 0 6px;
}

.sap-period-caption[b-rt0hogoe9s] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--st-subtle);
    line-height: 1.4;
}

.sap-period-label[b-rt0hogoe9s] {
    font-family: var(--st-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--st-text-strong);
    line-height: 1.3;
    white-space: nowrap;
}

.sap-head-actions[b-rt0hogoe9s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Step card ─────────────────────────────────────────────────────────── */
.sap-card[b-rt0hogoe9s] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.sap-card-plain[b-rt0hogoe9s] {
    padding: 16px 20px;
}

.sap-steps[b-rt0hogoe9s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 20px;
}

.sap-step[b-rt0hogoe9s] {
    min-width: 0;
}

.sap-step-head[b-rt0hogoe9s] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sap-circle[b-rt0hogoe9s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--st-radius-full);
    border: 1.5px solid var(--st-border);
    background: var(--st-white);
    color: var(--st-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.sap-circle[b-rt0hogoe9s]  .mud-icon-root {
    font-size: 17px;
}

.sap-step-title[b-rt0hogoe9s] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text-strong);
    white-space: nowrap;
}

.sap-connector[b-rt0hogoe9s] {
    flex: 1 1 auto;
    min-width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--st-border);
}

.sap-step-body[b-rt0hogoe9s] {
    padding-left: 38px;
}

.sap-step-text[b-rt0hogoe9s] {
    font-size: 13px;
    color: var(--st-muted);
    line-height: 1.45;
}

.sap-warn[b-rt0hogoe9s] {
    color: var(--st-warning);
}

/* ── Step states ───────────────────────────────────────────────────────── */
.sap-step-done .sap-circle[b-rt0hogoe9s] {
    border-color: var(--st-success);
    background: var(--st-success-light);
    color: var(--st-success-dark);
}

.sap-step-done .sap-connector[b-rt0hogoe9s] {
    background: var(--st-success);
    opacity: 0.4;
}

.sap-step-attention .sap-circle[b-rt0hogoe9s] {
    border-color: var(--st-warning);
    background: var(--st-warning-light);
    color: var(--st-warning);
}

/* ── Approver checklist ────────────────────────────────────────────────── */
.sap-people[b-rt0hogoe9s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.sap-person[b-rt0hogoe9s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--st-muted);
    min-width: 0;
}

.sap-person-done[b-rt0hogoe9s] {
    color: var(--st-text);
}

.sap-person[b-rt0hogoe9s]  .mud-icon-root {
    font-size: 16px;
    color: var(--st-subtle);
}

.sap-person-done[b-rt0hogoe9s]  .mud-icon-root {
    color: var(--st-success-dark);
}

.sap-person-when[b-rt0hogoe9s] {
    font-size: 12px;
    color: var(--st-subtle);
}

.sap-actions[b-rt0hogoe9s] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* ── Narrow screens: stack the steps, drop the connectors ──────────────── */
@media (max-width: 1100px) {
    .sap-steps[b-rt0hogoe9s] {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sap-connector[b-rt0hogoe9s] {
        display: none;
    }

    .sap-head[b-rt0hogoe9s] {
        justify-content: flex-start;
    }
}
/* /Components/ShiftScheduler/SalaryApprovalStatusChip.razor.rz.scp.css */
.sasc-wrap[b-jg0pwim4a5] {
    display: inline-flex;
    align-items: center;
}

/* MudChip swallows pointer events on its own root, so the cursor has to be set on it too. */
.sasc-clickable[b-jg0pwim4a5],
.sasc-clickable[b-jg0pwim4a5]  .mud-chip {
    cursor: pointer;
}

/* The chip carries its own margins for use inside chip sets; inline next to a heading it must not. */
.sasc-wrap[b-jg0pwim4a5]  .mud-chip {
    margin: 0;
}
/* /Components/ShiftScheduler/SalaryExportTab.razor.rz.scp.css */
/* Export controls + history card under the period header.
   Classes on MudBlazor components (MudSelect/MudText/MudDivider/MudIcon) never receive the scope
   attribute, so they are reached with ::deep from the plain .sx-card / .sx-empty wrappers. */

.sx-card[b-ccujmj9ovp] {
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    padding: 24px;
}

/* ── Controls row ──────────────────────────────────────────────────────── */
.sx-controls[b-ccujmj9ovp] {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.sx-card[b-ccujmj9ovp]  .sx-select {
    min-width: 240px;
}

.sx-actions[b-ccujmj9ovp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sx-card[b-ccujmj9ovp]  .sx-divider {
    margin: 20px 0;
}

/* ── History (st-table) ───────────────────────────────────────────────── */
.sx-history-title[b-ccujmj9ovp] { margin-bottom: 8px; }
.st-table th.sx-col-action[b-ccujmj9ovp],
.st-table td.sx-col-action[b-ccujmj9ovp] { padding: 0 8px; width: 96px; text-align: right; white-space: nowrap; }
/* /Components/ShiftScheduler/SalaryPeriodApproveDialog.razor.rz.scp.css */
/* Review-before-sign-off — the timeline dialog's plain table, grouped per employee. */

.spa-head[b-lzdp89wagy] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.spa-sub[b-lzdp89wagy] {
    font-size: 12px;
    color: var(--st-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spa-body[b-lzdp89wagy] {
    padding: 16px 24px 20px;
    max-height: 62vh;
    overflow-y: auto;
}

.spa-loading[b-lzdp89wagy] {
    padding: 32px;
    text-align: center;
}

.spa-empty-state[b-lzdp89wagy] {
    padding: 40px 24px;
    text-align: center;
    color: var(--st-subtle);
    font-size: 13px;
}

.spa-alert-hint[b-lzdp89wagy] {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.85;
}

.spa-integration[b-lzdp89wagy] {
    font-size: 12px;
    color: var(--st-subtle);
    margin-bottom: 6px;
}

/* ── Table ─────────────────────────────────────────────────────────────── */
.spa-table[b-lzdp89wagy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.spa-table thead th[b-lzdp89wagy] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--st-bg);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--st-subtle);
    padding: 10px 12px;
    border-bottom: 1px solid var(--st-border);
    white-space: nowrap;
}

.spa-table tbody td[b-lzdp89wagy],
.spa-table tfoot td[b-lzdp89wagy] {
    padding: 7px 12px;
    border-bottom: 1px solid var(--st-border-light);
    vertical-align: top;
    color: var(--st-text-strong);
}

.spa-col-code[b-lzdp89wagy] { width: 110px; }
.spa-col-type[b-lzdp89wagy] { width: 180px; }
.spa-col-num[b-lzdp89wagy] { width: 130px; text-align: right; }

.spa-num[b-lzdp89wagy] {
    text-align: right;
    white-space: nowrap;
}

.spa-code[b-lzdp89wagy] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.spa-type[b-lzdp89wagy] {
    color: var(--st-muted);
}

/* Employee band — a full-width separator row that opens each employee's block. */
.spa-table tbody tr.spa-emp td[b-lzdp89wagy] {
    background: var(--st-bg);
    padding-top: 12px;
    border-bottom: 1px solid var(--st-border);
}

.spa-emp-no[b-lzdp89wagy] {
    display: inline-block;
    min-width: 56px;
    color: var(--st-subtle);
    font-variant-numeric: tabular-nums;
}

.spa-emp-name[b-lzdp89wagy] {
    font-weight: 600;
}

.spa-table tbody tr.spa-emp-total td[b-lzdp89wagy] {
    font-weight: 600;
    border-bottom: 1px solid var(--st-border);
}

.spa-table tfoot tr.spa-grand-total td[b-lzdp89wagy] {
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid var(--st-border);
    background: var(--st-bg);
    position: sticky;
    bottom: 0;
}
/* /Components/ShiftScheduler/SalaryPushPreviewDialog.razor.rz.scp.css */
/* Salary push preview: grouped st-tables inside a scrolling dialog body. */
.spp-body[b-7y3jad7aze] { max-height: 65vh; overflow-y: auto; }
.spp-table td[b-7y3jad7aze], .spp-table th[b-7y3jad7aze] { height: 40px; padding: 6px 10px; }
.spp-table .spp-num[b-7y3jad7aze] { text-align: right; }
/* /Components/ShiftScheduler/ShiftApprovalTab.razor.rz.scp.css */
/* Shift approval tab: an editable st-table (inline clock-in/out inputs and shift-type picker). */
.appr-toolbar-main[b-9aw6hcwcjg] { flex-wrap: wrap; }
.appr-table td.appr-nowrap[b-9aw6hcwcjg] { white-space: nowrap; }
.appr-table .appr-col-actions[b-9aw6hcwcjg] { width: 100px; padding: 0 8px; }
/* A row with unsaved edits. */
.appr-table tbody tr.is-dirty td[b-9aw6hcwcjg] { background: var(--st-warning-light); }
.appr-warnings[b-9aw6hcwcjg] { display: flex; flex-wrap: wrap; gap: 4px; }
.appr-comment[b-9aw6hcwcjg] {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--st-muted);
}
.appr-table[b-9aw6hcwcjg]  .appr-type-select { min-width: 120px; }
.appr-table[b-9aw6hcwcjg]  .appr-type-chip { cursor: pointer; }
.appr-table[b-9aw6hcwcjg]  .appr-type-chip-dot { width: 8px; height: 8px; margin-right: 4px; }
/* /Components/ShiftScheduler/ShiftCard.razor.rz.scp.css */
/* Shift card in the week grid. Base layout is .shift-card in app.css; an approved card's
   colours are its shift type's (inline, data). */
.shift-card.new[b-a61gp92ld9] { background: var(--st-bg-alt); border-color: var(--st-border); }
.shift-card.selected[b-a61gp92ld9] { box-shadow: 0 0 0 2px var(--st-primary); }
.shift-card-actual--row[b-a61gp92ld9] { display: flex; align-items: center; gap: 3px; }
.shift-card-variance[b-a61gp92ld9] { color: var(--st-warning); margin-right: 1px; }
/* /Components/ShiftScheduler/ShiftDetailDialog.razor.rz.scp.css */
/* Shift history — plain monochrome table matching the invoice timeline design
   (InvoiceTimelineDialog.razor.css), tightened to fit the small shift dialog. */

.sdd-history-wrap[b-kob41p9s3p] {
    max-height: 320px;
    overflow-y: auto;
}

.itl-table[b-kob41p9s3p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.itl-table thead th[b-kob41p9s3p] {
    position: sticky;
    top: 0;
    background: var(--st-bg);
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--st-subtle);
    padding: 8px 10px;
    border-bottom: 1px solid var(--st-border);
    white-space: nowrap;
}

.itl-table tbody td[b-kob41p9s3p] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--st-border-light);
    vertical-align: top;
    color: var(--st-text-strong);
}

.itl-table tbody tr:last-child td[b-kob41p9s3p] {
    border-bottom: none;
}

.itl-col-when[b-kob41p9s3p] { width: 115px; }
.itl-col-who[b-kob41p9s3p] { width: 110px; }
.itl-col-event[b-kob41p9s3p] { width: 90px; }

.itl-when[b-kob41p9s3p] {
    color: var(--st-muted);
    white-space: nowrap;
}

.itl-who[b-kob41p9s3p] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.itl-event[b-kob41p9s3p] {
    font-weight: 500;
}

.itl-change-row[b-kob41p9s3p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.5;
}

.itl-change-row + .itl-change-row[b-kob41p9s3p] {
    margin-top: 2px;
}

.itl-change-field[b-kob41p9s3p] {
    color: var(--st-muted);
}

.itl-change-val[b-kob41p9s3p] {
    color: var(--st-text-strong);
}

.itl-arrow[b-kob41p9s3p] {
    color: var(--st-subtle);
    padding: 0 2px;
}

.itl-removed[b-kob41p9s3p] {
    text-decoration: line-through;
    color: var(--st-subtle);
}

.itl-muted[b-kob41p9s3p] {
    color: var(--st-subtle);
}

/* Dialog body (design rollout): sections, duration hints, break info, collapsible toggles. */
.sdd-body[b-kob41p9s3p] { max-height: 70vh; overflow-y: auto; gap: 18px; }
.sdd-skel[b-kob41p9s3p] { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.sdd-grid-2[b-kob41p9s3p] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sdd-duration[b-kob41p9s3p] { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--st-muted); }
.sdd-break[b-kob41p9s3p] {
    display: flex; align-items: center; gap: 8px; padding: 9px 14px;
    background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--st-radius);
    font-size: 12.5px; color: var(--st-subtle);
}
.sdd-break--applies[b-kob41p9s3p] {
    align-items: flex-start; gap: 10px; padding: 10px 14px;
    background: var(--st-warning-light);
    border-color: color-mix(in srgb, var(--st-warning) 35%, var(--st-white));
}
.sdd-break[b-kob41p9s3p]  .sdd-break-icon { font-size: 18px; color: var(--st-warning); flex-shrink: 0; }
.sdd-break-title[b-kob41p9s3p] { font-size: 13px; font-weight: 600; color: var(--st-warning); margin-bottom: 2px; }
.sdd-break-hint[b-kob41p9s3p] { font-size: 12px; color: var(--st-text); }
.sdd-toggle[b-kob41p9s3p] {
    background: none; border: none; cursor: pointer; padding: 4px 0;
    display: flex; align-items: center; gap: 8px;
    color: var(--st-muted); font-size: 13px; font-family: inherit;
}
.sdd-toggle:hover[b-kob41p9s3p] { color: var(--st-text); }
.sdd-history[b-kob41p9s3p] { margin-top: 8px; border-top: 1px solid var(--st-border-light); padding-top: 8px; }
/* /Components/ShiftScheduler/ShiftExportDialog.razor.rz.scp.css */
[b-ktuftvb8xk] .mud-dialog { padding: 0; max-width: 980px; width: 980px; }
[b-ktuftvb8xk] .mud-dialog-content { padding: 0 !important; overflow: hidden; }

.ex-modal-a[b-ktuftvb8xk] {
    width: 100%;
    background: var(--st-white);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 360px;
    max-height: calc(100vh - 120px);
}

.ex-create[b-ktuftvb8xk] { display: flex; flex-direction: column; min-width: 0; }
.ex-history[b-ktuftvb8xk] { background: var(--st-bg); border-left: 1px solid var(--st-border); display: flex; flex-direction: column; min-width: 0; }

/* Title bar: the global .st-dialog-title look, with the create-dialog title padding. */
.ex-head[b-ktuftvb8xk] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--st-border);
}

.ex-body[b-ktuftvb8xk] { padding: 22px; overflow-y: auto; flex: 1; }

.ex-label[b-ktuftvb8xk] {
    font-size: 11px; font-weight: 700; color: var(--st-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 10px;
}

.ex-templates[b-ktuftvb8xk] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ex-tpl[b-ktuftvb8xk] {
    border: 1px solid var(--st-border); background: var(--st-white);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
    position: relative;
}
.ex-tpl:hover[b-ktuftvb8xk] { border-color: var(--st-border-hover); }
.ex-tpl.on[b-ktuftvb8xk] {
    border-color: var(--st-primary);
    background: var(--st-primary-light);
    box-shadow: 0 0 0 3px rgba(74,118,249,0.12);
}
.ex-tpl .ico[b-ktuftvb8xk] {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--st-primary-light); color: var(--st-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.ex-tpl.on .ico[b-ktuftvb8xk] { background: var(--st-primary); color: var(--st-white); }
.ex-tpl .nm[b-ktuftvb8xk] { font-size: 14px; font-weight: 700; color: var(--st-text-strong); }
.ex-tpl .desc[b-ktuftvb8xk] { font-size: 12px; color: var(--st-muted); line-height: 1.4; }
.ex-tpl .radio[b-ktuftvb8xk] {
    position: absolute; top: 12px; right: 12px;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--st-border-hover);
    display: inline-flex; align-items: center; justify-content: center;
}
.ex-tpl.on .radio[b-ktuftvb8xk] { border-color: var(--st-primary); }
.ex-tpl.on .radio[b-ktuftvb8xk]::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-primary);
}

.ex-settings-hint[b-ktuftvb8xk] {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--st-muted);
    background: var(--st-bg-alt); padding: 5px 10px; border-radius: 6px;
    margin-bottom: 10px;
}
.ex-settings-hint b[b-ktuftvb8xk] { color: var(--st-text); font-weight: 600; }

.ex-period-list[b-ktuftvb8xk] {
    border: 1px solid var(--st-border); border-radius: 10px;
    background: var(--st-white);
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}
.ex-period-row[b-ktuftvb8xk] {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--st-bg-alt);
    cursor: pointer;
    font-size: 13px; color: var(--st-text);
    transition: background .12s;
}
.ex-period-row:last-child[b-ktuftvb8xk] { border-bottom: none; }
.ex-period-row:hover[b-ktuftvb8xk] { background: var(--st-bg); }
.ex-period-row.on[b-ktuftvb8xk] { background: var(--st-primary-light); }
.ex-period-row .dot[b-ktuftvb8xk] {
    width: 16px; height: 16px; border-radius: 50%;
    border: 1.5px solid var(--st-border-hover);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ex-period-row.on .dot[b-ktuftvb8xk] { border-color: var(--st-primary); }
.ex-period-row.on .dot[b-ktuftvb8xk]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st-primary); }
.ex-period-row .rng[b-ktuftvb8xk] { font-weight: 600; }

.ex-year-list[b-ktuftvb8xk] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ex-year[b-ktuftvb8xk] {
    border: 1px solid var(--st-border); background: var(--st-white);
    border-radius: 8px;
    padding: 14px 0;
    text-align: center;
    font-size: 14px; font-weight: 700; color: var(--st-text);
    cursor: pointer;
    font-family: inherit;
}
.ex-year:hover[b-ktuftvb8xk] { border-color: var(--st-border-hover); }
.ex-year.on[b-ktuftvb8xk] { background: var(--st-primary); color: var(--st-white); border-color: var(--st-primary); }

.ex-empty[b-ktuftvb8xk] {
    border: 1px dashed var(--st-border);
    border-radius: 10px;
    padding: 16px;
    font-size: 12px;
    color: var(--st-subtle);
    text-align: center;
    background: var(--st-bg);
}

.ex-foot[b-ktuftvb8xk] {
    padding: 14px 22px;
    border-top: 1px solid var(--st-border);
    display: flex; align-items: center; gap: 10px;
    background: var(--st-white);
}
.ex-foot .info[b-ktuftvb8xk] { font-size: 12px; color: var(--st-muted); flex: 1; }
.ex-foot .info b[b-ktuftvb8xk] { color: var(--st-text); font-weight: 600; }

.btn-ghost[b-ktuftvb8xk] {
    border: 1px solid var(--st-border); background: var(--st-white);
    color: var(--st-muted); cursor: pointer;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 600;
    font-family: inherit;
}
.btn-ghost:hover[b-ktuftvb8xk] { background: var(--st-bg); }

.btn-link[b-ktuftvb8xk] {
    border: none; background: none;
    color: var(--st-primary);
    cursor: pointer;
    padding: 7px 4px;
    font-size: 11px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}
.btn-link:hover[b-ktuftvb8xk] { color: var(--st-primary-hover); }
.btn-link:disabled[b-ktuftvb8xk] { color: var(--st-border-hover); cursor: not-allowed; text-decoration: none; }

.btn-primary[b-ktuftvb8xk] {
    display: inline-flex; align-items: center; gap: 6px;
    border: none;
    background: var(--st-primary); color: var(--st-white);
    cursor: pointer;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px; font-weight: 600;
    font-family: inherit;
}
.btn-primary:hover[b-ktuftvb8xk] { background: var(--st-primary-hover); }
.btn-primary:disabled[b-ktuftvb8xk] { background: var(--st-border-hover); cursor: not-allowed; }

.ex-hist-head[b-ktuftvb8xk] {
    padding: 18px 18px 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.ex-hist-head h3[b-ktuftvb8xk] {
    margin: 0;
    font-size: 13px; font-weight: 700; color: var(--st-text-strong);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ex-hist-head .count[b-ktuftvb8xk] {
    font-size: 11px; color: var(--st-muted); background: var(--st-white); border: 1px solid var(--st-border);
    padding: 2px 8px; border-radius: 9999px;
}

.ex-hist-list[b-ktuftvb8xk] { flex: 1; overflow-y: auto; padding: 8px 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.ex-hist-empty[b-ktuftvb8xk] {
    border: 1px dashed var(--st-border);
    border-radius: 10px;
    padding: 24px 12px;
    font-size: 12px;
    color: var(--st-subtle);
    text-align: center;
    background: var(--st-white);
}

.ex-hist-card[b-ktuftvb8xk] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    padding: 12px 12px 10px;
    position: relative;
}
.ex-hist-card .nm[b-ktuftvb8xk] { font-size: 13px; font-weight: 700; color: var(--st-text-strong); line-height: 1.3; }
.ex-hist-card .rng[b-ktuftvb8xk] { font-size: 12px; color: var(--st-muted); margin-top: 2px; }
.ex-hist-card .meta[b-ktuftvb8xk] { font-size: 11px; color: var(--st-subtle); margin-top: 8px; }
.ex-hist-card .row-act[b-ktuftvb8xk] { display: flex; align-items: center; gap: 6px; margin-top: 10px; }

.ex-hist-card .dl[b-ktuftvb8xk] {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--st-primary); color: var(--st-white);
    font-size: 11px; font-weight: 600;
    border: none; cursor: pointer;
    font-family: inherit;
}
.ex-hist-card .dl:hover[b-ktuftvb8xk] { background: var(--st-primary-hover); }

.ex-progress[b-ktuftvb8xk] {
    height: 4px; background: var(--st-primary-light); border-radius: 9999px;
    margin-top: 8px; overflow: hidden; position: relative;
}
.ex-progress .bar[b-ktuftvb8xk] {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--st-primary);
    border-radius: 9999px;
    width: 18%;
    animation: ex-creep-b-ktuftvb8xk 14s ease-out forwards;
}
@keyframes ex-creep-b-ktuftvb8xk {
    0%   { width: 12%; }
    100% { width: 86%; }
}

.ex-fail-reason[b-ktuftvb8xk] {
    margin-top: 6px;
    font-size: 11px;
    color: var(--st-error-dark);
    background: var(--st-error-light);
    border: 1px solid color-mix(in srgb, var(--st-error) 35%, var(--st-white));
    border-radius: 6px;
    padding: 6px 8px;
    display: flex; gap: 6px;
    align-items: flex-start;
}

/* Design rollout: the step label spacing and the mono range label (were inline). */
.ex-label.ex-label--spaced[b-ktuftvb8xk] { margin-top: 18px; }
.ex-mono[b-ktuftvb8xk] { font-family: var(--st-font-mono); }
/* /Components/ShiftScheduler/TemplateApplyModeDialog.razor.rz.scp.css */
.tam-body[b-sp28qu2luo] { max-width: 440px; gap: 12px; }
/* /Components/ShiftScheduler/TemplatesModal.razor.rz.scp.css */
/* Shift templates dialog: card-scale underline tabs over one scrolling body. */
.tm-tabs[b-7idw040od9] { padding: 0 24px; }
.tm-body[b-7idw040od9] { padding: 20px 24px; max-height: 70vh; overflow-y: auto; }
.tm-skel[b-7idw040od9] { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; }

/* Create / edit template form. */
.tm-editor[b-7idw040od9] { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.tm-scroll[b-7idw040od9] { overflow-x: auto; }
.tm-week[b-7idw040od9] { width: 100%; border-collapse: collapse; min-width: 700px; }
.tm-week th[b-7idw040od9] {
    padding: 8px; text-align: center; border-bottom: 1px solid var(--st-border);
    font-size: 12px; font-weight: 600; color: var(--st-muted);
}
.tm-editor-day[b-7idw040od9] { padding: 4px; vertical-align: top; min-width: 100px; }

/* A template slot chip; its colours are the shift type's (inline). */
.tm-slot[b-7idw040od9] {
    border: 1px solid transparent; border-radius: 4px; padding: 2px 6px; margin-bottom: 3px;
    font-size: 10px; white-space: nowrap;
}
.tm-slot--edit[b-7idw040od9] {
    display: flex; justify-content: space-between; align-items: center; gap: 4px;
    padding: 4px 6px; margin-bottom: 4px; font-size: 11px; white-space: normal; cursor: pointer;
}
.tm-slot-label[b-7idw040od9] { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tm-slot-dot[b-7idw040od9] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tm-slot-text[b-7idw040od9] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-slot-remove[b-7idw040od9] {
    background: none; border: none; cursor: pointer; padding: 0 2px;
    color: var(--st-error); font-size: 12px; display: inline-flex;
}
.tm-add-slot[b-7idw040od9] {
    display: block; width: 100%; padding: 4px; cursor: pointer;
    background: none; border: 1px dashed var(--st-border-hover); border-radius: 4px;
    color: var(--st-subtle); font-size: 12px;
}
.tm-add-slot:hover[b-7idw040od9] { color: var(--st-primary); border-color: var(--st-primary); }
.tm-slot-form[b-7idw040od9] {
    margin-top: 4px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
    background: var(--st-bg); border: 1px solid var(--st-border); border-radius: var(--st-radius-sm);
}

/* Templates list. */
.tm-list tbody tr.is-archived td[b-7idw040od9] { opacity: 0.55; }
.tm-list td.tm-list-day[b-7idw040od9] { padding: 6px 4px; vertical-align: top; text-align: center; }
.tm-list .tm-col-actions[b-7idw040od9] { width: 80px; padding: 0 4px; text-align: center; white-space: nowrap; }

/* Apply tab. */
.tm-apply[b-7idw040od9] { max-width: 600px; display: flex; flex-direction: column; gap: 16px; }
.tm-grid-2[b-7idw040od9] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tm-apply[b-7idw040od9]  .st-search.tm-search { width: 100%; }
.tm-emp-list[b-7idw040od9] { max-height: 200px; overflow-y: auto; }
.tm-emp[b-7idw040od9] {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid var(--st-border-light); transition: background 0.12s;
}
.tm-emp:last-child[b-7idw040od9] { border-bottom: none; }
.tm-emp:hover[b-7idw040od9] { background: var(--st-bg); }
.tm-emp.is-selected[b-7idw040od9] { background: var(--st-primary-light); }
.tm-emp-name[b-7idw040od9] { flex: 1; min-width: 0; font-size: 13px; color: var(--st-text); }
.tm-emp.is-selected .tm-emp-name[b-7idw040od9] { font-weight: 600; }
.tm-empty[b-7idw040od9] { padding: 16px; text-align: center; color: var(--st-subtle); font-size: 13px; }
.tm-chip-remove[b-7idw040od9] { background: none; border: none; cursor: pointer; margin-left: 4px; color: var(--st-muted); }

/* Workers by template tab. */
.tm-group[b-7idw040od9] { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tm-group-name[b-7idw040od9] { font-size: 14px; font-weight: 600; color: var(--st-text); }
.tm-group[b-7idw040od9]  .tm-ended-icon { font-size: 13px; color: var(--st-warning); margin-left: 4px; vertical-align: text-bottom; }
[b-7idw040od9] .tm-narrow { max-width: 320px; }
/* /Components/SickLeaveStats/SickLeaveStatsTab.razor.rz.scp.css */
/* Company sick-leave statistics (Employees > Sick leave). Was a global <style> block in the
   component; scoped here. Cards are StCard; the date presets are the shared .st-segment. The
   trend chart is a MarkupString SVG, so it is reached with ::deep. */
.sick-stats-tab[b-y1fn3y0yto] { padding:0;overflow-x:clip; }
.sl-presets[b-y1fn3y0yto] { flex-wrap: nowrap; }

.sl-filter-bar[b-y1fn3y0yto] { background:var(--st-white);border:1px solid var(--st-border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;margin-bottom:18px;overflow-x:auto; }
.sl-arrow[b-y1fn3y0yto] { color:var(--st-subtle);flex-shrink:0; }

.sl-kpi-grid[b-y1fn3y0yto] { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px; }
.sl-kpi[b-y1fn3y0yto] { background:var(--st-white);border:1px solid var(--st-border);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:6px; }
.sl-kpi .lbl[b-y1fn3y0yto] { font-size:11px;color:var(--st-muted);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px; }

/* Help icon + hover tooltip */
.sl-help[b-y1fn3y0yto] { position:relative;display:inline-flex;align-items:center;color:var(--st-subtle);cursor:help;outline:none; }
.sl-help:hover[b-y1fn3y0yto], .sl-help:focus-visible[b-y1fn3y0yto] { color:var(--st-primary); }
.sl-help-tip[b-y1fn3y0yto] {
    position:absolute;left:0;top:calc(100% + 6px);z-index:10;
    background:var(--st-text-strong);color:var(--st-white);border-radius:6px;padding:8px 10px;
    font-size:11px;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none;
    width:240px;white-space:normal;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events:none;box-shadow:var(--st-shadow-md);
}
.sl-help-tip[b-y1fn3y0yto]::after { content:"";position:absolute;left:8px;top:-4px;width:8px;height:8px;background:var(--st-text-strong);transform:rotate(45deg); }
.sl-help:hover .sl-help-tip[b-y1fn3y0yto], .sl-help:focus-visible .sl-help-tip[b-y1fn3y0yto] { opacity:1;visibility:visible;transform:translateY(0); }
/* Right-anchor the tooltip on the last KPI so it doesn't overflow the page */
.sl-kpi-grid > .sl-kpi:last-child .sl-help-tip[b-y1fn3y0yto] { left:auto;right:0; }
.sl-kpi-grid > .sl-kpi:last-child .sl-help-tip[b-y1fn3y0yto]::after { left:auto;right:8px; }
.sl-kpi .val[b-y1fn3y0yto] { font-size:32px;font-weight:800;color:var(--st-text-strong);letter-spacing:-0.02em;line-height:1.05;margin-top:2px; }
.sl-kpi .sub[b-y1fn3y0yto] { font-size:12px;color:var(--st-subtle); }
.sl-kpi-bar[b-y1fn3y0yto] { height:6px;background:var(--st-bg-alt);border-radius:9999px;overflow:hidden;margin-top:8px; }
.sl-kpi-bar > span[b-y1fn3y0yto] { display:block;height:100%;border-radius:9999px; }
.sl-kpi .delta[b-y1fn3y0yto] { font-size:12px;font-weight:600;margin-top:2px; }
.sl-kpi .delta.up[b-y1fn3y0yto] { color:var(--st-error); }
.sl-kpi .delta.down[b-y1fn3y0yto] { color:var(--st-success); }
.sl-kpi .delta.neutral[b-y1fn3y0yto] { color:var(--st-muted); }

.sl-row-2[b-y1fn3y0yto] { display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:18px; }
.sl-row-2-eq[b-y1fn3y0yto] { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px; }

[b-y1fn3y0yto] .sl-chart-svg { width:100%;height:auto;max-height:250px;display:block;aspect-ratio:760/220; }
.sl-legend[b-y1fn3y0yto] { display:flex;gap:18px;padding:0 18px 14px;font-size:12px;color:var(--st-muted); }
.sl-legend .sw[b-y1fn3y0yto] { display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle; }

.sl-weekday-chart[b-y1fn3y0yto] { padding:24px 24px 18px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px; }
.sl-weekday-col[b-y1fn3y0yto] { display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;height:220px; }
.sl-weekday-col .bar[b-y1fn3y0yto] { width:100%;max-width:44px;min-height:4px;background:linear-gradient(180deg,var(--st-primary) 0%,color-mix(in srgb, var(--st-primary) 80%, var(--st-white)) 100%);border-radius:8px 8px 0 0;flex-shrink:0; }
.sl-weekday-col .bar.peak[b-y1fn3y0yto] { background:linear-gradient(180deg,var(--st-warning) 0%,color-mix(in srgb, var(--st-warning) 70%, var(--st-white)) 100%); }
.sl-weekday-col .vlbl[b-y1fn3y0yto] { font-size:12px;font-weight:700;color:var(--st-text-strong);white-space:nowrap;flex-shrink:0; }
.sl-weekday-col .day[b-y1fn3y0yto] { font-size:12px;font-weight:600;color:var(--st-muted);text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0; }


.sl-dept-table[b-y1fn3y0yto] { width:100%;border-collapse:collapse;font-size:13px; }
.sl-dept-table th[b-y1fn3y0yto] { text-align:left;font-size:11px;font-weight:600;color:var(--st-muted);text-transform:uppercase;letter-spacing:0.04em;padding:10px 18px;border-bottom:1px solid var(--st-border);background:var(--st-bg); }
.sl-dept-table th.num[b-y1fn3y0yto] { text-align:right; }
.sl-dept-table td[b-y1fn3y0yto] { padding:12px 18px;border-bottom:1px solid var(--st-bg-alt); }
.sl-dept-table td.num[b-y1fn3y0yto] { text-align:right;font-variant-numeric:tabular-nums; }
.sl-dept-table .dept-name[b-y1fn3y0yto] { font-weight:600;color:var(--st-text); }
.sl-dept-table .dept-dot[b-y1fn3y0yto] { display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:middle; }
.sl-dept-table tr.dept-row-clickable[b-y1fn3y0yto] { cursor:pointer; }
.sl-dept-table tr.dept-row-clickable:hover[b-y1fn3y0yto] { background:var(--st-bg); }
.sl-dept-table tr.dept-employees-row td[b-y1fn3y0yto] { padding:0;border-bottom:1px solid var(--st-bg-alt); }
.sl-chevron[b-y1fn3y0yto] { display:inline-flex;align-items:center;justify-content:center;color:var(--st-subtle);transition:transform 0.15s ease; }
.sl-chevron.open[b-y1fn3y0yto] { transform:rotate(90deg);color:var(--st-primary); }

.sl-leaderboard[b-y1fn3y0yto] { padding:6px 0; }
/* Show ~10 rows by default; scroll inside the box for the rest. Row height ≈ 38px. */
.sl-leaderboard-scroll[b-y1fn3y0yto] { max-height:380px;overflow-y:auto; }
.sl-lb-row[b-y1fn3y0yto] { display:grid;grid-template-columns:28px 1fr auto auto;align-items:center;gap:10px;padding:6px 16px;font-size:12px;cursor:pointer;text-decoration:none;color:inherit;line-height:1.25; }
.sl-lb-row:hover[b-y1fn3y0yto] { background:var(--st-bg); }
.sl-lb-row + .sl-lb-row[b-y1fn3y0yto] { border-top:1px solid var(--st-bg-alt); }
.sl-lb-row .rank[b-y1fn3y0yto] { font-size:11px;font-weight:700;color:var(--st-subtle);font-variant-numeric:tabular-nums; }
.sl-lb-row .who[b-y1fn3y0yto] { display:flex;align-items:center;gap:8px;min-width:0; }
.sl-lb-row .av[b-y1fn3y0yto] { width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--st-primary-border),var(--st-primary));color:var(--st-white);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;background-size:cover;background-position:center; }
.sl-lb-row.perfect .av[b-y1fn3y0yto] { background:linear-gradient(135deg,color-mix(in srgb, var(--st-success) 35%, var(--st-white)),var(--st-success)); }
.sl-lb-row .who .name[b-y1fn3y0yto] { font-weight:600;color:var(--st-text); }
.sl-lb-row .who .dept[b-y1fn3y0yto] { font-size:11px;color:var(--st-subtle); }
.sl-lb-row .stat[b-y1fn3y0yto] { font-weight:700;color:var(--st-text-strong);font-variant-numeric:tabular-nums;text-align:right; }
.sl-lb-row .stat-sub[b-y1fn3y0yto] { font-size:11px;color:var(--st-subtle);text-align:right; }
.sl-lb-row .pill-pct[b-y1fn3y0yto] { background:var(--st-error-light);color:var(--st-error);font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px; }
.sl-lb-row .pill-pct.green[b-y1fn3y0yto] { background:var(--st-success-light);color:var(--st-success); }
.sl-lb-row .pill-pct.amber[b-y1fn3y0yto] { background:var(--st-warning-light);color:var(--st-warning); }

.sl-heatmap[b-y1fn3y0yto] { padding:18px;overflow-x:auto; }
.sl-heatmap-rows[b-y1fn3y0yto] { display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:2px; }
.sl-hm-cell[b-y1fn3y0yto] { width:14px;height:14px;border-radius:2px;background:var(--st-bg-alt);display:inline-block; }
.sl-heatmap-legend[b-y1fn3y0yto] { display:flex;align-items:center;gap:6px;padding:14px 18px 12px;justify-content:flex-end;font-size:11px;color:var(--st-subtle); }

.dept-dot[b-y1fn3y0yto] { display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px;vertical-align:middle; }

/* Card bodies (StCard Flush): each block pads itself. */
.sl-trend[b-y1fn3y0yto] { padding: 18px; }
.sl-empty[b-y1fn3y0yto] { padding: 24px; text-align: center; color: var(--st-subtle); font-size: 13px; }
.sl-empty--lg[b-y1fn3y0yto] { padding: 32px; }
.sl-dept-table .sl-col-chevron[b-y1fn3y0yto] { width: 32px; text-align: center; }
.sl-dept-table td.sl-muted[b-y1fn3y0yto] { color: var(--st-muted); }
.sl-dept-table td.sl-delta[b-y1fn3y0yto] { font-weight: 600; color: var(--st-success); }
.sl-dept-table td.sl-delta.is-up[b-y1fn3y0yto] { color: var(--st-error); }
.sl-dept-table tr.dept-employees-row > td[b-y1fn3y0yto] { background: var(--st-white); }
.sl-dept-table tr.sl-total-row[b-y1fn3y0yto] { background: var(--st-bg); }
.sl-leaderboard--nested .sl-lb-row[b-y1fn3y0yto] { padding-left: 42px; }
.sl-kpi-skel[b-y1fn3y0yto] { display: flex; flex-direction: column; gap: 10px; }
.sl-kpi-skel .st-skeleton:first-child[b-y1fn3y0yto] { width: 50%; }
.sl-kpi-skel .st-skeleton:nth-child(2)[b-y1fn3y0yto] { height: 24px; width: 40%; }
/* Full-width cards between the rows. */
.sick-stats-tab[b-y1fn3y0yto]  .sl-block { margin-bottom: 18px; }
/* A photo avatar in a leaderboard row. */
.sl-lb-row .av.has-photo[b-y1fn3y0yto] { background-size: cover; background-position: center; }
.sl-sw[b-y1fn3y0yto] { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.sl-sw--current[b-y1fn3y0yto] { background: var(--st-primary); }
.sl-sw--previous[b-y1fn3y0yto] { background: var(--st-border-hover); }
.sl-hm-cell.hm-0[b-y1fn3y0yto] { background: var(--st-bg-alt); }
.sl-hm-cell.hm-1[b-y1fn3y0yto] { background: var(--st-caution-light); }
.sl-hm-cell.hm-2[b-y1fn3y0yto] { background: var(--st-caution); }
.sl-hm-cell.hm-3[b-y1fn3y0yto] { background: var(--st-warning); }
.sl-hm-cell.hm-4[b-y1fn3y0yto] { background: var(--st-error); }

/* /Components/SubcontractedWorkTab.razor.rz.scp.css */
/* What is owed per counterpart over the last 30 days: small stat cards above the table. */
.subw-payable[b-45slmzbr5o] { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.subw-payable__card[b-45slmzbr5o] {
    flex: 1; min-width: 220px; padding: 12px 16px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius-md); background: var(--st-white);
}
.subw-payable__label[b-45slmzbr5o] { font-size: 12px; color: var(--st-muted); }
.subw-payable__value[b-45slmzbr5o] { font-size: 17px; font-weight: 700; color: var(--st-text); margin-top: 2px; }

/* Principal rows have no popup; withdrawn rows read as ghosts. */
.st-table tbody tr.subw-row--static[b-45slmzbr5o] { cursor: default; }
.subw-row--ghost > td:first-child[b-45slmzbr5o] { opacity: .45; }
/* /Components/Subcontracting/AddSubcontractorDialog.razor.rz.scp.css */
/* AddSubcontractorDialog: directory search results. */
.asd-body[b-wawzedmbha] { gap: 24px; }
.asd-results[b-wawzedmbha] { min-height: 300px; max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.asd-row[b-wawzedmbha] { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--st-border); border-radius: var(--st-radius); }
.asd-row__main[b-wawzedmbha] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asd-row__title[b-wawzedmbha] { display: flex; align-items: center; gap: 6px; }
.asd-row__name[b-wawzedmbha] { font-size: 14px; font-weight: 600; color: var(--st-text); }
.asd-row__meta[b-wawzedmbha] { font-size: 12px; color: var(--st-muted); }
.asd-row__tags[b-wawzedmbha] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.asd-tag[b-wawzedmbha] { background: var(--st-bg-alt); color: var(--st-muted); }
/* /Components/Subcontracting/SubcontractInvitationDialog.razor.rz.scp.css */
/* SubcontractInvitationDialog: key-figure tiles above the facts list. */
.sid-body[b-c182xia4rt] { gap: 18px; }
.sid-tag[b-c182xia4rt] { background: var(--st-bg-alt); color: var(--st-muted); }
.sid-facts[b-c182xia4rt] { display: flex; gap: 12px; flex-wrap: wrap; }
.sid-fact[b-c182xia4rt] { flex: 1; min-width: 150px; border: 1px solid var(--st-border); border-radius: 10px; padding: 10px 14px; }
.sid-fact__label[b-c182xia4rt] { font-size: 12px; color: var(--st-muted); }
.sid-fact__value[b-c182xia4rt] { font-size: 15px; font-weight: 600; color: var(--st-text); }
.sid-fact__value--lg[b-c182xia4rt] { font-size: 17px; font-weight: 700; }
.sid-strong[b-c182xia4rt] { font-weight: 600; }
.sid-muted[b-c182xia4rt] { color: var(--st-muted); }
/* /Components/Subcontracting/SubcontractorDetailSidebar.razor.rz.scp.css */
/* Subcontractor detail sidebar — right-hand overlay panel (scd- prefix) */

/* Below MudDialog (z-index 1400) so task/agreement popups opened from the
   sidebar render on top of it. */
.scd-overlay[b-wtszp14dma] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 1250;
    display: flex;
    justify-content: flex-end;
}

.scd-panel[b-wtszp14dma] {
    width: min(540px, 100vw);
    height: 100%;
    background: #fff;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    animation: scd-slide-in-b-wtszp14dma 0.18s ease-out;
}

@keyframes scd-slide-in-b-wtszp14dma {
    from { transform: translateX(24px); opacity: 0.4; }
    to   { transform: translateX(0);    opacity: 1; }
}

.scd-header[b-wtszp14dma] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px 20px;
    border-bottom: 1px solid #E8EDF5;
}

.scd-title[b-wtszp14dma] {
    font-size: 17px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scd-subtitle[b-wtszp14dma] {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 2px;
}

.scd-close[b-wtszp14dma] {
    border: none;
    background: none;
    font-size: 16px;
    color: #64748B;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

.scd-close:hover[b-wtszp14dma] { background: #F1F5F9; }

.scd-kpis[b-wtszp14dma] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid #E8EDF5;
}

.scd-kpi[b-wtszp14dma] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #F8FAFC;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

.scd-kpi-label[b-wtszp14dma] {
    font-size: 11px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scd-kpi-value[b-wtszp14dma] {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
}

.scd-tabs[b-wtszp14dma] {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0 20px;
    border-bottom: 1px solid #E8EDF5;
}

.scd-tab[b-wtszp14dma] {
    border: none;
    background: none;
    padding: 8px 12px 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.scd-tab.active[b-wtszp14dma] {
    color: #4A76F9;
    border-bottom-color: #4A76F9;
}

.scd-body[b-wtszp14dma] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px 20px;
}

.scd-card[b-wtszp14dma] {
    border: 1px solid #E8EDF5;
    border-radius: 12px;
    padding: 14px 16px;
}

.scd-card-title[b-wtszp14dma] {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 12px;
}

.scd-chart-x[b-wtszp14dma] {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: #94A3B8;
    margin-top: 4px;
}

.scd-chart-x span[b-wtszp14dma] {
    flex: 1;
    text-align: center;
    overflow: hidden;
}

.scd-legend[b-wtszp14dma] {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 11px;
    color: #64748B;
}

.scd-legend i[b-wtszp14dma] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 5px;
}

.scd-counts[b-wtszp14dma] {
    margin-top: 14px;
    border: 1px solid #E8EDF5;
    border-radius: 12px;
    padding: 6px 16px;
}

.scd-count-row[b-wtszp14dma] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 13px;
    color: #475569;
}

.scd-count-row + .scd-count-row[b-wtszp14dma] { border-top: 1px solid #F1F5F9; }

.scd-count-row b[b-wtszp14dma] { color: #1E293B; }

.scd-section-title[b-wtszp14dma] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
    margin-bottom: 8px;
}

.scd-task[b-wtszp14dma] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #EEF2F7;
    border-radius: 10px;
    margin-bottom: 6px;
}

.scd-click[b-wtszp14dma] { cursor: pointer; }

.scd-click:hover[b-wtszp14dma] {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.scd-period-row[b-wtszp14dma] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 20px 0 20px;
}

.scd-period[b-wtszp14dma] {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 8px;
    cursor: pointer;
    outline: none;
}

.scd-period:hover[b-wtszp14dma] { border-color: #CBD5E1; }

.scd-task-title[b-wtszp14dma] {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scd-task-sub[b-wtszp14dma] {
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scd-task-right[b-wtszp14dma] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.scd-task-date[b-wtszp14dma] {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
}

.scd-task-money[b-wtszp14dma] {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
}

.scd-chip[b-wtszp14dma] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.scd-empty[b-wtszp14dma] {
    color: #94A3B8;
    font-size: 13px;
    padding: 18px 0;
    text-align: center;
}
/* /Components/Subcontracting/SubcontractorDirectoryMapDialog.razor.rz.scp.css */
/* SubcontractorDirectoryMapDialog: overlays on the directory map. */
.sdm-map[b-1ixfpz7z1o] { position: relative; }
.sdm-map[b-1ixfpz7z1o]  .sdm-style-icon { font-size: 18px; }
.sdm-overlay[b-1ixfpz7z1o] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sdm-overlay--loading[b-1ixfpz7z1o] { background: rgba(255, 255, 255, 0.6); border-radius: var(--st-radius-md); padding: 16px; pointer-events: auto; }
.sdm-skel[b-1ixfpz7z1o] { display: block; width: 100%; height: 100%; border-radius: var(--st-radius-md); }
.sdm-empty[b-1ixfpz7z1o] {
    padding: 16px; border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    background: rgba(255, 255, 255, 0.92); font-size: 13px; color: var(--st-muted);
}
.sdm-card[b-1ixfpz7z1o] {
    position: absolute; top: 12px; left: 12px; width: 300px; max-width: calc(100% - 24px);
    padding: 16px; border-radius: var(--st-radius-md); background: var(--st-white);
    border: 1px solid var(--st-border); box-shadow: var(--st-shadow-md);
}
.sdm-card__text[b-1ixfpz7z1o] { min-width: 0; }
.sdm-card__name[b-1ixfpz7z1o] { font-size: 14px; font-weight: 700; color: var(--st-text); }
.sdm-card__meta[b-1ixfpz7z1o] { font-size: 12px; color: var(--st-subtle); }
.sdm-card__about[b-1ixfpz7z1o] { font-size: 13px; color: var(--st-muted); margin-top: 4px; }
.sdm-card__tags[b-1ixfpz7z1o] { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sdm-tag[b-1ixfpz7z1o] { background: var(--st-bg-alt); color: var(--st-muted); }
/* /Components/Subcontracting/SubcontractorPartnersTab.razor.rz.scp.css */
/* Invitation we've received: a soft warning-tinted strip above the partner table. */
.subc-invite[b-tgc52kyuiu] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 12px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    background: var(--st-warning-light);
}
.subc-invite[b-tgc52kyuiu]  .subc-invite__icon { color: var(--st-warning); }
.subc-invite__text[b-tgc52kyuiu] { flex: 1; min-width: 200px; font-size: 14px; color: var(--st-text); }

/* Pending rows (invite not accepted yet) have no detail to open. */
.st-table tbody tr.subc-row--static[b-tgc52kyuiu] { cursor: default; }
.subc-pending[b-tgc52kyuiu] { color: var(--st-warning); }

/* "You work for" rows inside a flush StCard. */
.subc-principal[b-tgc52kyuiu] {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; border-top: 1px solid var(--st-border-light);
}
.subc-principal:first-child[b-tgc52kyuiu] { border-top: none; }

/* Open work listed in the "cannot disconnect yet" dialog. */
.subc-blocked-row[b-tgc52kyuiu] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-top: 1px solid var(--st-border-light);
}
.subc-blocked-row:first-child[b-tgc52kyuiu] { border-top: none; }
/* /Components/Subcontracting/SubcontractorProfileTab.razor.rz.scp.css */
/* Directory listing card (Settings > Business): the drawn service-area map. */
.subc-area:not(.st-map-fs-on)[b-awdxe4r1hm] { position: relative; }
.subc-area__map[b-awdxe4r1hm] { height: 320px; border-radius: var(--st-radius); border: 1px solid var(--st-border); }
.map-styletoggle-group.subc-area__styles[b-awdxe4r1hm] { left: auto; right: 10px; top: 50px; }
/* Listed editor at full page width: fields beside the service-area map; stacked on laptops. */
.subc-editor[b-awdxe4r1hm] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--st-space-6); align-items: start; }
@media (max-width: 1280px) { .subc-editor[b-awdxe4r1hm] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Subcontracting/UpgradePlanDialog.razor.rz.scp.css */
/* UpgradePlanDialog: the feature checklist. */
.upd-features[b-7nnh39gn14] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upd-features li[b-7nnh39gn14] { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--st-text); }
.upd-features[b-7nnh39gn14]  .upd-check { color: var(--st-success); }
/* /Components/Teams/TeamDayMembershipEditor.razor.rz.scp.css */
/* Per-weekday membership editor. Everything hangs off .day-editor with ::deep so the
   rules also reach the MudBlazor roots rendered inside it. */

/* ---- the seven-day table ------------------------------------------------ */

/* minmax keeps the columns shrinkable so the grid never widens the dialog; the
   overflow is only a safety net for very narrow viewports. */
.day-editor[b-f9hpu5e789]  .day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(64px, 1fr));
  gap: 6px;
  align-items: stretch;
  overflow-x: auto;
}

.day-editor[b-f9hpu5e789]  .day-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--st-white);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--st-duration-fast) var(--st-ease),
              background var(--st-duration-fast) var(--st-ease);
}

.day-editor[b-f9hpu5e789]  .day-col:hover {
  border-color: var(--st-border-hover);
}

.day-editor[b-f9hpu5e789]  .day-col--selected,
.day-editor[b-f9hpu5e789]  .day-col--selected:hover {
  border-color: var(--st-primary);
  background: var(--st-primary-light);
  /* second ring instead of a 2px border so the columns keep the same box size */
  box-shadow: inset 0 0 0 1px var(--st-primary);
}

.day-editor[b-f9hpu5e789]  .day-col__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 4px;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-border);
}

.day-editor[b-f9hpu5e789]  .day-col--selected .day-col__head {
  background: var(--st-primary-100);
  border-bottom-color: var(--st-primary-border);
}

.day-editor[b-f9hpu5e789]  .day-col__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--st-text);
  white-space: nowrap;
}

.day-editor[b-f9hpu5e789]  .day-col--selected .day-col__name {
  color: var(--st-primary);
}

.day-editor[b-f9hpu5e789]  .day-col__count {
  min-width: 16px;
  padding: 0 4px;
  line-height: 14px;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--st-muted);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-full);
}

.day-editor[b-f9hpu5e789]  .day-col--selected .day-col__count {
  color: var(--st-white);
  background: var(--st-primary);
  border-color: var(--st-primary);
}

.day-editor[b-f9hpu5e789]  .day-col__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  min-height: 84px;
  max-height: 168px;
  overflow-y: auto;
}

.day-editor[b-f9hpu5e789]  .day-col__empty {
  padding: 8px 2px;
  text-align: center;
  font-size: 10px;
  color: var(--st-subtle);
}

.day-editor[b-f9hpu5e789]  .day-chip {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.day-editor[b-f9hpu5e789]  .day-chip__name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--st-text);
  /* long names wrap inside the column instead of widening the grid */
  overflow-wrap: anywhere;
}

.day-editor[b-f9hpu5e789]  .day-chip__x {
  flex-shrink: 0;
  width: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  line-height: 1.3;
  color: var(--st-subtle);
  cursor: pointer;
}

.day-editor[b-f9hpu5e789]  .day-chip__x:hover {
  color: var(--st-error);
}

.day-editor[b-f9hpu5e789]  .day-chip__x:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---- panel for the selected day ----------------------------------------- */

.day-editor[b-f9hpu5e789]  .day-panel {
  border-top: 1px solid var(--st-border);
  padding-top: 14px;
}

.day-editor[b-f9hpu5e789]  .day-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--st-text);
}

.day-editor[b-f9hpu5e789]  .day-count {
  background: var(--st-primary-light);
  color: var(--st-primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--st-radius-full);
  padding: 1px 9px;
}

.day-editor[b-f9hpu5e789]  .day-hint {
  display: block;
  font-size: 11px;
  color: var(--st-subtle);
}

.day-editor[b-f9hpu5e789]  .day-picker {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.day-editor[b-f9hpu5e789]  .day-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--st-radius);
  cursor: pointer;
  transition: background var(--st-duration-fast) var(--st-ease);
}

.day-editor[b-f9hpu5e789]  .day-pick:hover {
  background: var(--st-bg);
}

.day-editor[b-f9hpu5e789]  .day-pick--selected,
.day-editor[b-f9hpu5e789]  .day-pick--selected:hover {
  background: var(--st-primary-light);
}

.day-editor[b-f9hpu5e789]  .day-photo,
.day-editor[b-f9hpu5e789]  .day-initials {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}

.day-editor[b-f9hpu5e789]  .day-photo {
  object-fit: cover;
}

.day-editor[b-f9hpu5e789]  .day-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--st-muted);
  color: var(--st-white);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.day-editor[b-f9hpu5e789]  .day-person {
  flex: 1;
  min-width: 0;
}

.day-editor[b-f9hpu5e789]  .day-person__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--st-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.day-editor[b-f9hpu5e789]  .day-person__sub {
  font-size: 11px;
  color: var(--st-subtle);
}

.day-editor[b-f9hpu5e789]  .day-add-icon {
  color: var(--st-primary);
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- per-day note row (second grid row, one field under each column) ---- */

.day-editor[b-f9hpu5e789]  .day-note-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  resize: vertical;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.35;
  color: var(--st-text);
  background: var(--st-white);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius);
  transition: border-color var(--st-duration-fast) var(--st-ease);
}

.day-editor[b-f9hpu5e789]  .day-note-input::placeholder {
  color: var(--st-subtle);
}

.day-editor[b-f9hpu5e789]  .day-note-input:hover {
  border-color: var(--st-border-hover);
}

.day-editor[b-f9hpu5e789]  .day-note-input--selected,
.day-editor[b-f9hpu5e789]  .day-note-input:focus {
  outline: none;
  border-color: var(--st-primary);
  box-shadow: inset 0 0 0 1px var(--st-primary);
}

.day-editor[b-f9hpu5e789]  .day-note-input:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Same look as TeamEditDialog's fixed-list "add members" hint and empty text. */
.day-editor[b-f9hpu5e789]  .day-add-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--st-subtle);
}

.day-editor[b-f9hpu5e789]  .day-empty-text {
  font-size: 14px;
  color: var(--st-subtle);
}
/* /Components/Teams/TeamEditDialog.razor.rz.scp.css */
/* TeamEditDialog (opened from /planning). Elements written in this file carry its scope
   attribute even though the dialog is portaled, so plain scoped classes reach them. */

.team-edit-skel[b-p02fb0uxca] { height: 36px; }

.team-edit-option[b-p02fb0uxca] { display: flex; flex-direction: column; gap: 2px; }

.team-edit-hint[b-p02fb0uxca] {
    margin-left: 44px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--st-muted);
}

.team-edit-hint--flush[b-p02fb0uxca] { margin-left: 0; color: var(--st-subtle); }

.team-edit-empty-text[b-p02fb0uxca] { font-size: 14px; color: var(--st-subtle); }

.team-edit-count[b-p02fb0uxca] {
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--st-radius-full);
    padding: 1px 9px;
}

.team-edit-empty-box[b-p02fb0uxca] {
    border: 1px dashed var(--st-border);
    border-radius: var(--st-radius);
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--st-subtle);
}

.team-edit-list[b-p02fb0uxca] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-edit-list--members[b-p02fb0uxca] {
    max-height: 180px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 6px;
}

.team-edit-list--pool[b-p02fb0uxca] { max-height: 220px; }

.team-edit-person[b-p02fb0uxca] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--st-radius-sm);
}

.team-edit-person--pick[b-p02fb0uxca] {
    padding: 8px 10px;
    border-radius: var(--st-radius);
    cursor: pointer;
    transition: background 0.15s;
}

.team-edit-person--pick:hover[b-p02fb0uxca] { background: var(--st-bg); }

.team-edit-avatar[b-p02fb0uxca] { width: 30px; height: 30px; }

.team-edit-person-body[b-p02fb0uxca] { flex: 1; min-width: 0; }

.team-edit-person-name[b-p02fb0uxca] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-edit-person-role[b-p02fb0uxca] { font-size: 11px; color: var(--st-subtle); }

.team-edit-other-team[b-p02fb0uxca] { font-size: 10px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; }

.team-edit-add[b-p02fb0uxca] { display: inline-flex; color: var(--st-primary); flex-shrink: 0; }

.team-edit-person[b-p02fb0uxca]  .team-edit-remove { color: var(--st-subtle); }

/* Department colour dot in the department select (colour is data, inline). */
.team-edit-dept-dot[b-p02fb0uxca] { width: 10px; height: 10px; }
/* /Components/Teams/TeamHistoryDialog.razor.rz.scp.css */
/* TeamHistoryDialog: month navigator above a day table. */
.thd-body[b-8uq19whiq0] { display: flex; flex-direction: column; max-height: 72vh; }
.thd-toolbar[b-8uq19whiq0] { padding: 12px 24px; border-bottom: 1px solid var(--st-border); display: flex; align-items: center; }
.thd-scroll[b-8uq19whiq0] { flex: 1; min-height: 0; overflow: auto; }
.thd-scroll table[b-8uq19whiq0] { min-width: 640px; }
.thd-scroll thead th[b-8uq19whiq0] { position: sticky; top: 0; z-index: 1; }
.thd-dot[b-8uq19whiq0] { width: 10px; height: 10px; }
.thd-nowrap[b-8uq19whiq0] { white-space: nowrap; }
.thd-muted[b-8uq19whiq0] { color: var(--st-muted); }
.thd-meta[b-8uq19whiq0] { color: var(--st-subtle); font-size: 12px; }
.thd-count[b-8uq19whiq0] { font-weight: 600; color: var(--st-text); }
.thd-count.is-done[b-8uq19whiq0] { color: var(--st-success-dark); }
/* /Components/Teams/TeamRosterDrawer.razor.rz.scp.css */
/* Same right-drawer shell as IntegrationDetailSidebar (backdrop + fixed panel, grid rows so the
   body scrolls reliably in Safari). */
.roster-backdrop[b-hzmqmobtc8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .38);
    z-index: 1249;
    animation: roster-fade-b-hzmqmobtc8 .15s ease;
}

.roster-drawer[b-hzmqmobtc8] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    background: var(--st-white);
    box-shadow: -8px 0 28px rgba(15, 23, 42, .18);
    z-index: 1250;
    display: grid;
    grid-template-rows: auto auto 1fr;
    animation: roster-slide-b-hzmqmobtc8 .2s ease;
    outline: none;
}

.roster-head[b-hzmqmobtc8] {
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid var(--st-border);
}

.roster-sub[b-hzmqmobtc8] {
    font-size: 12px;
    color: var(--st-muted);
    margin-top: 2px;
}

.roster-tools[b-hzmqmobtc8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px 4px;
    border-bottom: 1px solid var(--st-border);
}

.roster-days-bar[b-hzmqmobtc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.roster-day-chip[b-hzmqmobtc8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--st-border);
    border-radius: 13px;
    background: var(--st-white);
    color: var(--st-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.roster-day-chip:hover[b-hzmqmobtc8] { border-color: var(--st-border-hover); }
.roster-day-chip.is-active[b-hzmqmobtc8] { border-color: var(--st-primary); background: var(--st-primary-light); color: var(--st-primary); font-weight: 600; }

/* Workers with no team in this department that day. */
.roster-day-chip__open[b-hzmqmobtc8] {
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #FEF3C7;
    color: #B45309;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.roster-count[b-hzmqmobtc8] {
    font-size: 12px;
    color: var(--st-muted);
}

.roster-body[b-hzmqmobtc8] {
    min-height: 0;   /* grid items default to min-height:auto and won't shrink, which kills the scroll */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.roster-row[b-hzmqmobtc8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--st-border-light);
}

.roster-name[b-hzmqmobtc8] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roster-routes[b-hzmqmobtc8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--st-muted);
}

.roster-route[b-hzmqmobtc8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.roster-route .st-color-dot[b-hzmqmobtc8] { width: 8px; height: 8px; }

/* Teams in other departments: shown so the planner knows, never changed from here. */
.roster-routes--other[b-hzmqmobtc8] { color: #B45309; font-size: 11px; }

.roster-days[b-hzmqmobtc8] {
    color: var(--st-subtle);
    font-size: 11px;
}

.roster-none[b-hzmqmobtc8] { font-style: italic; }

.roster-edit[b-hzmqmobtc8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 36px;   /* under the name, past the 28px avatar + gap */
}

.roster-pick-btn[b-hzmqmobtc8] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.roster-pick-btn:hover:not(:disabled)[b-hzmqmobtc8] { border-color: var(--st-border-hover); }
.roster-pick-btn:focus-visible[b-hzmqmobtc8],
.roster-pick-btn.is-open[b-hzmqmobtc8] { outline: none; border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.roster-pick-btn:disabled[b-hzmqmobtc8] { cursor: default; opacity: .6; }

.roster-pick-btn__label[b-hzmqmobtc8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.roster-pick-btn[b-hzmqmobtc8]  .roster-pick-btn__chevron { color: var(--st-subtle); }
.roster-pick-btn.is-open[b-hzmqmobtc8]  .roster-pick-btn__chevron { transform: rotate(180deg); }

.roster-picker[b-hzmqmobtc8] {
    margin-left: 36px;
    padding: 8px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-bg);
}

.roster-picker__list[b-hzmqmobtc8] {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 6px;
}

.roster-option[b-hzmqmobtc8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--st-text);
    cursor: pointer;
}

.roster-option:hover[b-hzmqmobtc8] { background: var(--st-white); }
.roster-option.is-selected[b-hzmqmobtc8] { background: var(--st-primary-light); color: var(--st-primary); font-weight: 600; }

.roster-option__name[b-hzmqmobtc8] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Whether picking the team moves one weekday (per weekday) or always the whole week. */
.roster-option__kind[b-hzmqmobtc8] {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--st-primary-light);
    color: var(--st-primary);
    white-space: nowrap;
}

.roster-option__kind.is-week[b-hzmqmobtc8] { background: var(--st-bg-alt); color: var(--st-muted); }

.roster-option__count[b-hzmqmobtc8] {
    font-size: 11px;
    color: var(--st-subtle);
}

.roster-option--empty[b-hzmqmobtc8] { cursor: default; color: var(--st-muted); }
.roster-option--empty:hover[b-hzmqmobtc8] { background: none; }

.roster-warn[b-hzmqmobtc8] {
    padding-left: 36px;
    font-size: 11px;
    color: #B45309;
}

@keyframes roster-slide-b-hzmqmobtc8 {
    from { transform: translateX(24px); opacity: .4; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes roster-fade-b-hzmqmobtc8 {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/UninvoicedTasksDialog.razor.rz.scp.css */
/* Uninvoiced tasks popup: department filter, then one row per task with an inline price and
   a Create invoice row action, paged client-side. */

.ut-body[b-tj5jupgva7] { display: flex; flex-direction: column; max-height: 72vh; }

.ut-filter[b-tj5jupgva7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid var(--st-border);
}

.ut-filter[b-tj5jupgva7]  .ut-dept { max-width: 260px; }
.ut-filter[b-tj5jupgva7]  .ut-search { flex: 1; min-width: 200px; }
.ut-count[b-tj5jupgva7] { font-size: 12px; color: var(--st-subtle); }

.ut-list[b-tj5jupgva7] { flex: 1; min-height: 0; overflow-y: auto; }

.ut-row-primary[b-tj5jupgva7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ut-tasknum[b-tj5jupgva7] {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
}

.ut-price-cell[b-tj5jupgva7] { width: 170px; }
.ut-action-cell[b-tj5jupgva7] { width: 150px; text-align: right; white-space: nowrap; }

/* The price field: right-aligned amount, fixed width in its cell. */
.ut-price-cell[b-tj5jupgva7]  .ut-price { width: 150px; }
.ut-price-cell[b-tj5jupgva7]  .ut-price input { text-align: right; }

.ut-clickable[b-tj5jupgva7] { cursor: pointer; border-radius: var(--st-radius-sm); margin: -4px -6px; padding: 4px 6px; transition: background var(--st-duration-fast); }
.ut-clickable:hover[b-tj5jupgva7] { background: var(--st-bg-alt); }
.ut-clickable:hover .ut-row-title[b-tj5jupgva7] { color: var(--st-primary); }
/* /Components/WorkDescriptionBuilderSidebar.razor.rz.scp.css */
/* Work Description Builder Sidebar — scoped styles (wdb-sb- prefix) */

/* Task search autocomplete styling inside sidebar */
.wdb-task-search-wrap[b-w4qtluxtu3] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
}

/* Spinner centered */
.wdb-loading[b-w4qtluxtu3] {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

/* Empty state */
.wdb-empty[b-w4qtluxtu3] {
    text-align: center;
    padding: 32px 16px;
    color: var(--st-subtle);
    font-size: 13px;
}
/* /Components/WorkRequestDetailDialog.razor.rz.scp.css */
/* WorkRequestDetailDialog: the triage flow (origin, message, AI analysis, decision, ...). */
.wr-body[b-bqaauv7tdf] { gap: 22px; max-height: 74vh; overflow-y: auto; }
.wr-type[b-bqaauv7tdf] { background: color-mix(in srgb, var(--st-primary) 10%, var(--st-white)); color: var(--st-primary); }
.wr-type.is-complaint[b-bqaauv7tdf] { background: var(--st-error-light); color: var(--st-error); }
.wr-label[b-bqaauv7tdf] { display: block; font-size: 12px; color: var(--st-muted); }
.wr-value[b-bqaauv7tdf] { font-size: 13px; color: var(--st-text); }
.wr-muted[b-bqaauv7tdf] { color: var(--st-muted); }
.wr-minw0[b-bqaauv7tdf] { min-width: 0; }
.wr-meta[b-bqaauv7tdf] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px;
    border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 10px 12px;
}
.wr-message[b-bqaauv7tdf] {
    white-space: pre-wrap; background: var(--st-bg); border: 1px solid var(--st-border);
    border-radius: var(--st-radius); padding: 10px 12px; max-height: 180px; overflow-y: auto;
    font-size: 13px; color: var(--st-text);
}
.wr-ai[b-bqaauv7tdf] {
    border: 1px solid color-mix(in srgb, var(--st-ai) 25%, var(--st-white));
    background: color-mix(in srgb, var(--st-ai) 4%, var(--st-white));
    border-radius: var(--st-radius); padding: 10px 12px;
}
.wr-ai-title[b-bqaauv7tdf] { color: var(--st-ai); }
.wr-ai-title[b-bqaauv7tdf]  .mud-icon-root { color: var(--st-ai); }
.wr-ai-hint[b-bqaauv7tdf] { font-size: 12px; color: var(--st-ai); }
.wr-facts[b-bqaauv7tdf] { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; font-size: 13px; }
.wr-fact-label[b-bqaauv7tdf] { font-weight: 600; }
.wr-decision-item[b-bqaauv7tdf] { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.wr-decision-item + .wr-decision-item[b-bqaauv7tdf] { border-top: 1px dashed var(--st-border); }
.wr-decision-item[b-bqaauv7tdf]  .wr-decision-icon { margin-top: 2px; }
.wr-decision-item[b-bqaauv7tdf]  .wr-dept-select { max-width: 320px; }
.wr-photos[b-bqaauv7tdf] { display: flex; flex-wrap: wrap; gap: 10px; }
.wr-photo[b-bqaauv7tdf] { width: 96px; height: 96px; border-radius: var(--st-radius); overflow: hidden; border: 1px solid var(--st-border); display: block; }
.wr-photo img[b-bqaauv7tdf] { width: 100%; height: 100%; object-fit: cover; display: block; }
.wr-rating[b-bqaauv7tdf] {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: var(--st-radius-full);
    color: var(--st-white); font-weight: 700; font-size: 14px;
}
.st-section[b-bqaauv7tdf]  .wr-extlink { display: inline-flex; align-items: center; gap: 2px; }
.st-section[b-bqaauv7tdf]  .wr-extlink__icon { font-size: 14px; }
/* /Components/Zones/ImportZonesDialog.razor.rz.scp.css */
/* ImportZonesDialog: text inside the drop zone (the zone itself is .zn-dropzone in zones.css). */
.izd-drop-text[b-l4mw3nwsld] { font-size: 14px; color: var(--st-text); }
.izd-drop-hint[b-l4mw3nwsld] { font-size: 12px; color: var(--st-muted); }
/* /Layout/CustomerLayout.razor.rz.scp.css */
.customer-layout[b-rnzxgk4eyt] {
    min-height: 100vh;
    background: var(--st-bg);
}

/* ── "View as" preview bar ──────────────────────────────────────────────── */
/* Same amber language as MainLayout's .st-impersonation-note, as a slim sticky strip above
   the header so the way back is on screen no matter how far the portal is scrolled. */
.preview-bar[b-rnzxgk4eyt] {
    position: sticky;
    top: 0;
    z-index: 101;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 32px;
    background: #FEF3C7;
    color: #92400E;
    font-size: 12px;
    line-height: 1.35;
    border-bottom: 1px solid #FDE68A;
}

/* ::deep, MudIcon renders its own root, so the scope attribute never lands on it. */
.preview-bar[b-rnzxgk4eyt]  .preview-bar-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.preview-bar-text[b-rnzxgk4eyt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-bar-return[b-rnzxgk4eyt] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: #92400E;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-white);
    cursor: pointer;
    transition: background 0.15s;
}

.preview-bar-return:hover[b-rnzxgk4eyt] {
    background: #7C3308;
}

.preview-bar[b-rnzxgk4eyt]  .preview-bar-return-icon {
    font-size: 15px;
}

/* The header sticks below the bar rather than over it. */
.customer-layout.preview .customer-header[b-rnzxgk4eyt] {
    top: 36px;
}

.customer-header[b-rnzxgk4eyt] {
    background: var(--st-white);
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--st-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
}

.customer-header-left[b-rnzxgk4eyt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.tenant-logo-initials[b-rnzxgk4eyt] {
    width: 34px;
    height: 34px;
    background: var(--st-primary);
    border-radius: 8px;
    color: var(--st-white);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tenant-logo-img[b-rnzxgk4eyt] {
    height: 34px;
    width: auto;
}

.tenant-name[b-rnzxgk4eyt] {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
}

.header-divider[b-rnzxgk4eyt] {
    width: 1px;
    height: 20px;
    background: var(--st-border);
    flex-shrink: 0;
}

.customer-names[b-rnzxgk4eyt] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-muted);
}

/* Activator for the customer filter dropdown: same visual weight as the plain names label. */
.customer-names-btn[b-rnzxgk4eyt] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    background: transparent;
    border: none;
    font-family: inherit;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.customer-names-btn:hover[b-rnzxgk4eyt] {
    background: var(--st-bg);
}

.customer-names-chevron[b-rnzxgk4eyt] {
    color: var(--st-subtle);
    flex-shrink: 0;
}

.customer-header-right[b-rnzxgk4eyt] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.header-user[b-rnzxgk4eyt] {
    font-size: 13px;
    color: var(--st-muted);
}

.btn-user-email[b-rnzxgk4eyt] {
    background: transparent;
    border: none;
    font-size: 13px;
    color: var(--st-primary);
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-user-email:hover[b-rnzxgk4eyt] {
    background: var(--st-primary-light);
}

.btn-nav[b-rnzxgk4eyt] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-muted);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.btn-nav:hover[b-rnzxgk4eyt] {
    background: var(--st-bg-alt);
    color: var(--st-text);
}

.btn-logout[b-rnzxgk4eyt] {
    background: transparent;
    border: 1px solid var(--st-border);
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--st-muted);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

/* Logout: a small leading icon, vertically centred with the label. */
.btn-logout[b-rnzxgk4eyt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-logout:hover[b-rnzxgk4eyt] {
    background: var(--st-bg-alt);
}

.customer-body[b-rnzxgk4eyt] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.hamburger-btn[b-rnzxgk4eyt] {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--st-text);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.mobile-menu[b-rnzxgk4eyt] {
    display: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .customer-header[b-rnzxgk4eyt] {
        padding: 0 12px;
        gap: 10px;
        justify-content: flex-start;
    }

    .preview-bar[b-rnzxgk4eyt] {
        padding: 0 12px;
        gap: 8px;
    }

    /* Hamburger first, logo + names to the right of it; desktop nav hidden */
    .hamburger-btn[b-rnzxgk4eyt] {
        display: flex;
    }

    .customer-header-right[b-rnzxgk4eyt] {
        display: none;
    }

    .customer-header-left[b-rnzxgk4eyt] {
        min-width: 0;
        overflow: hidden;
    }

    .tenant-name[b-rnzxgk4eyt],
    .customer-names[b-rnzxgk4eyt] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-menu[b-rnzxgk4eyt] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--st-white);
        border-bottom: 1px solid var(--st-border);
        padding: 6px 12px 12px;
        position: sticky;
        top: 60px;
        z-index: 99;
    }

    .customer-layout.preview .mobile-menu[b-rnzxgk4eyt] {
        top: 96px;
    }

    .mobile-menu a[b-rnzxgk4eyt],
    .mobile-menu button[b-rnzxgk4eyt] {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        text-align: left;
        padding: 13px 10px;
        font-size: 15px;
        font-weight: 500;
        color: var(--st-text);
        background: none;
        border: none;
        border-radius: 8px;
        text-decoration: none;
        font-family: inherit;
        cursor: pointer;
    }

    .mobile-menu a:hover[b-rnzxgk4eyt],
    .mobile-menu button:hover[b-rnzxgk4eyt] {
        background: var(--st-bg-alt);
    }

    .customer-body[b-rnzxgk4eyt] {
        padding: 16px 12px 48px;
    }
}

.customer-header[b-rnzxgk4eyt]  .btn-logout-icon,
.mobile-menu[b-rnzxgk4eyt]  .btn-logout-icon {
    font-size: 16px;
}

.mobile-menu button[b-rnzxgk4eyt] {
    align-items: center;
    gap: 6px;
}

/* ── Profile dialog ─────────────────────────────────────────────────────── */
/* Country-code picker beside the local phone number. */
.cl-phone-code[b-rnzxgk4eyt] {
    width: 110px;
    flex-shrink: 0;
}

/* Field-height placeholder bars while the profile loads. */
.cl-profile-skel[b-rnzxgk4eyt] {
    height: 40px;
    border-radius: 8px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-avc003xpbo] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-avc003xpbo] {
    flex: 1;
}

.sidebar[b-avc003xpbo] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-avc003xpbo] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-avc003xpbo]  a, .top-row[b-avc003xpbo]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-avc003xpbo]  a:hover, .top-row[b-avc003xpbo]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-avc003xpbo]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-avc003xpbo] {
        justify-content: space-between;
    }

    .top-row[b-avc003xpbo]  a, .top-row[b-avc003xpbo]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-avc003xpbo] {
        flex-direction: row;
    }

    .sidebar[b-avc003xpbo] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-avc003xpbo] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-avc003xpbo]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-avc003xpbo], article[b-avc003xpbo] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── Notifications dialog (design rollout): one row per notification, unread rows tinted
   with a primary left edge. ─────────────────────────────────────────────────────────── */
.notif-body[b-avc003xpbo] { max-height: 70vh; overflow-y: auto; }
.notif-row[b-avc003xpbo] {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 24px 12px 21px;
    border-bottom: 1px solid var(--st-border-light); border-left: 3px solid transparent;
}
.notif-row:last-child[b-avc003xpbo] { border-bottom: none; }
.notif-row.is-unread[b-avc003xpbo] { border-left-color: var(--st-primary); background: var(--st-primary-light); }
.notif-row.is-actionable[b-avc003xpbo] { cursor: pointer; }
.notif-row.is-actionable:hover[b-avc003xpbo] { background: var(--st-bg); }
.notif-row.is-unread.is-actionable:hover[b-avc003xpbo] { background: var(--st-primary-50); }
.notif-dot[b-avc003xpbo] { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.notif-row.is-unread .notif-dot[b-avc003xpbo] { background: var(--st-primary); }
.notif-main[b-avc003xpbo] { flex: 1; min-width: 0; }
.notif-row.is-read .notif-main[b-avc003xpbo] { opacity: 0.6; }
.notif-head[b-avc003xpbo] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif-title[b-avc003xpbo] { font-size: 13px; font-weight: 400; color: var(--st-text); }
.notif-row.is-unread .notif-title[b-avc003xpbo] { font-weight: 600; }
.notif-text[b-avc003xpbo] { font-size: 12px; color: var(--st-muted); margin-top: 2px; }
.notif-time[b-avc003xpbo] { font-size: 11px; color: var(--st-subtle); margin-top: 2px; }
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-2932rdhr0n] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-2932rdhr0n] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-2932rdhr0n] {
    font-size: 1.1rem;
}

.bi[b-2932rdhr0n] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-2932rdhr0n] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-2932rdhr0n] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-2932rdhr0n] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-2932rdhr0n] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-2932rdhr0n] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-2932rdhr0n] {
        padding-bottom: 1rem;
    }

    .nav-item[b-2932rdhr0n]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-2932rdhr0n]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-2932rdhr0n]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-2932rdhr0n] {
        display: none;
    }

    .collapse[b-2932rdhr0n] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-2932rdhr0n] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/CustomerDashboard.razor.rz.scp.css */
.cd-page[b-z83mj961f4] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Calendar */
/* The view toggle sits in the title bar, so it sizes to its two labels instead of filling the row. */
.cal-mode[b-z83mj961f4] {
    width: auto;
}

.cal-range-label[b-z83mj961f4] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-muted);
    white-space: nowrap;
}

.cal-table[b-z83mj961f4] {
    display: grid;
    grid-template-columns: 36px repeat(7, 1fr);
    gap: 4px;
}

.cal-header-cell[b-z83mj961f4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-subtle);
    text-align: center;
    padding: 4px 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cal-wk-cell[b-z83mj961f4] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-border-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cal-cell[b-z83mj961f4] {
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 8px 6px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
    transition: background 0.1s;
}

/* Only a day with activities opens the day popup. */
.cal-cell.has-items[b-z83mj961f4] {
    cursor: pointer;
}

.cal-cell:hover[b-z83mj961f4] {
    background: var(--st-bg);
}

.cal-cell.today[b-z83mj961f4] {
    background: var(--st-primary-light);
    border-color: var(--st-primary);
}

.cal-cell.today .cal-date[b-z83mj961f4] {
    color: var(--st-primary);
    font-weight: 600;
}

.cal-cell.weekend[b-z83mj961f4] {
    background: var(--st-surface-alt);
}

.cal-date[b-z83mj961f4] {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-muted);
}

.cal-pill[b-z83mj961f4] {
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Loading placeholder where a day's count pill will appear. */
.cal-skel[b-z83mj961f4] {
    width: 70%;
    height: 18px;
    border-radius: 4px;
}

/* Tasks row */
/* stretch, not flex-start: both cards in a row share the row's height, so a short list and a
   full one still read as one pair of equal boxes. */
.tasks-row[b-z83mj961f4] {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* A column so the title bar stays put, the table area takes the slack, and the pager sits at the
   bottom of the card outside the scrolling region. */
.tasks-row[b-z83mj961f4]  .cd-list-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;

    /* One two-line table row (52px + its hairline) and the column header, at the current type
       scale. The list is capped at four rows plus a sliver of the fifth, so the cut is visible
       and the rest of the loaded page is reached by scrolling inside the panel. */
    --cd-row-h: 53px;
    --cd-head-h: 41px;
    --cd-peek: 20px;
}

.tasks-row[b-z83mj961f4]  .cd-list-card > .st-card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* The pager is pinned to the bottom of the card, however short the other card in the row is. */
.tasks-row[b-z83mj961f4]  .cd-list-card .st-pager {
    margin-top: auto;
}

/* Table */
.cd-table-wrap[b-z83mj961f4] {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(var(--cd-head-h) + (4 * var(--cd-row-h)) + var(--cd-peek));
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The header stays on top while the rows scroll under it. The inset shadow repeats the bottom
   border at the same pixel: a collapsed border belongs to the table, not the cell, so it would
   scroll away with the first row. */
.cd-table th[b-z83mj961f4] {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: inset 0 -1px 0 var(--st-border);
}

/* One line each, ellipsised: the lists are fixed-height scrollers, so a long title must not wrap
   and eat a second row's worth of the four visible slots. */
.cd-ellipsis[b-z83mj961f4] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-muted[b-z83mj961f4] {
    color: var(--st-muted);
}

@media (max-width: 900px) {
    .tasks-row[b-z83mj961f4] {
        flex-direction: column;
    }
    .tasks-row[b-z83mj961f4]  .cd-list-card {
        width: 100%;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* The calendar keeps its 7-day grid and swipes horizontally */
    .cal-scroll[b-z83mj961f4] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cal-table[b-z83mj961f4] {
        min-width: 560px;
    }

    .tasks-row[b-z83mj961f4] {
        flex-direction: column;
    }

    /* A reflowed row is a stacked card, not a table row: taller, and with no column header
       above it. Four of those plus a peek is the same rule at a different size, measured per
       list, because each one wraps a different number of cells onto the stack. */
    .tasks-row[b-z83mj961f4]  .cd-list-card {
        width: 100%;
        --cd-row-h: 91px;
        --cd-head-h: 0px;
        --cd-peek: 28px;
    }

    .tasks-row[b-z83mj961f4]  .quality-card {
        --cd-row-h: 114px;
    }

    .tasks-row[b-z83mj961f4]  .requests-card {
        --cd-row-h: 46px;
    }

    /* Tables reflow into stacked cards: no horizontal scrolling */
    .cd-table[b-z83mj961f4],
    .cd-table tbody[b-z83mj961f4] {
        display: block;
        width: 100%;
    }

    .cd-table thead[b-z83mj961f4] {
        display: none;
    }

    .cd-table tr[b-z83mj961f4] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--st-border-light);
    }

    .cd-table td[b-z83mj961f4] {
        display: inline-flex;
        align-items: center;
        height: auto;
        border: none;
        padding: 0;
    }

    .cd-cell-main[b-z83mj961f4] {
        flex-basis: 100%;
        display: block !important;
        min-width: 0;
    }

    .cd-hide-mobile[b-z83mj961f4] {
        display: none !important;
    }
}
/* /Pages/CustomerDashboardAddresses.razor.rz.scp.css */
.cda-page[b-fb49o7syxa] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}

.cda-muted[b-fb49o7syxa] {
    color: var(--st-muted);
}

/* Words that replace the column headers once rows stack on a phone. */
.cda-mobile-label[b-fb49o7syxa] {
    display: none;
}

/* Report count: a narrow, centred column. */
.cda-num[b-fb49o7syxa] {
    width: 110px;
    text-align: center;
}

@media (max-width: 768px) {
    .cda-page[b-fb49o7syxa] {
        padding: 16px;
    }

    /* Rows reflow into stacked cards, like the dashboard lists. */
    .cda-table[b-fb49o7syxa],
    .cda-table tbody[b-fb49o7syxa] {
        display: block;
        width: 100%;
    }

    .cda-table thead[b-fb49o7syxa] {
        display: none;
    }

    .cda-table tr[b-fb49o7syxa] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--st-border-light);
    }

    .cda-table td[b-fb49o7syxa] {
        display: inline-flex;
        align-items: center;
        height: auto;
        border: none;
        padding: 0;
        width: auto;
    }

    .cda-cell-main[b-fb49o7syxa] {
        flex-basis: 100%;
        display: block !important;
        min-width: 0;
    }

    .cda-hide-mobile[b-fb49o7syxa] {
        display: none !important;
    }

    .cda-mobile-label[b-fb49o7syxa] {
        display: inline;
        color: var(--st-muted);
        font-size: 13px;
    }

    .cda-num[b-fb49o7syxa] {
        gap: 6px;
    }
}
/* /Pages/CustomerDashboardUsers.razor.rz.scp.css */
.cdu-page[b-lvfc91eupz] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* Location list column: long lists wrap within a sensible width. */
.cdu-locs[b-lvfc91eupz] {
    max-width: 280px;
    font-size: 13px;
    color: var(--st-muted);
}

.cdu-row2[b-lvfc91eupz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Label above the location picker in the user dialog. */
.cdu-label[b-lvfc91eupz] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-muted);
}

/* Muted help line under a user-dialog control (the admin checkbox, the location list). */
.cdu-hint[b-lvfc91eupz] {
    font-size: 12px;
    color: var(--st-subtle);
    margin: 0;
}

.cdu-hint--warn[b-lvfc91eupz] {
    color: var(--st-warning);
    margin-top: 6px;
}

.cdu-loc-list[b-lvfc91eupz] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 6px 12px;
    max-height: 220px;
    overflow-y: auto;
}

/* Customer header above its locations when the caller has several customers. */
.cdu-loc-group[b-lvfc91eupz] {
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
    padding-top: 4px;
}

.cdu-loc-group:first-child[b-lvfc91eupz] {
    padding-top: 0;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cdu-page[b-lvfc91eupz] {
        padding: 16px 12px;
    }

    /* Table reflows into stacked cards: no horizontal scrolling */
    .cdu-table[b-lvfc91eupz],
    .cdu-table tbody[b-lvfc91eupz] {
        display: block;
        width: 100%;
    }

    .cdu-table thead[b-lvfc91eupz] {
        display: none;
    }

    .cdu-table tr[b-lvfc91eupz] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 12px;
        padding: 14px 12px;
        border-bottom: 1px solid var(--st-border-light);
    }

    .cdu-table td[b-lvfc91eupz] {
        display: inline-flex;
        align-items: center;
        height: auto;
        border: none;
        padding: 0;
    }

    .cdu-table td:first-child[b-lvfc91eupz],
    .cdu-table td:nth-child(2)[b-lvfc91eupz] {
        flex-basis: 100%;
        display: block;
    }

    .cdu-locs[b-lvfc91eupz] {
        max-width: none;
    }

    .cdu-actions[b-lvfc91eupz] {
        margin-left: auto;
    }

    .cdu-row2[b-lvfc91eupz] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Customers/CustomerDashboards.razor.rz.scp.css */
/* Customer dashboards list: the card, table, empty state and row menu are the shared st-* rollout
   classes (design-system.css). Dialog content is portal-rendered and styled by the global
   .st-cd-* block there, so nothing page-specific is left here. */
/* /Pages/Customers/CustomerLocationMap.razor.rz.scp.css */
/* Location map page chrome. The map, overlays and panel styles live in the global
   customer-location-map.css; only the style toggle's offset is page-specific (it sits under
   the floating fullscreen button). */
.clm-styletoggle[b-ybibivmsuc] { top: 70px; }
/* /Pages/Customers/CustomerView.razor.rz.scp.css */
/* Customer detail page (design rollout). Layout comes from the shared building blocks
   (PageHeader, PageTabs, StCard, .st-card-grid, .st-kv, .st-table-card); only page-specific
   bits live here. */

/* An archived task row in the tasks tab: greyed out. */
.cv-row--archived[b-l40los9djt] { opacity: 0.6; }
.cv-row--archived td[b-l40los9djt] { background: var(--st-bg-alt); }

/* mailto: / tel: links in the contacts table. */
.cv-link[b-l40los9djt] { color: var(--st-primary); text-decoration: none; }
.cv-link:hover[b-l40los9djt] { text-decoration: underline; }

/* Department pill in the locations table. The colour comes from the department (inline);
   departments without one get the neutral tint. */
.cv-dept-pill[b-l40los9djt] {
    display: inline-block; font-size: 11px; font-weight: 500;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.cv-dept-pill--plain[b-l40los9djt] { background: var(--st-bg-alt); color: var(--st-muted); }

/* Quality report score pill, coloured by score band. */
.cv-score[b-l40los9djt] {
    display: inline-block; font-size: 13px; font-weight: 600;
    padding: 2px 8px; border-radius: var(--st-radius-sm); white-space: nowrap;
}
.cv-score--none[b-l40los9djt] { background: var(--st-bg-alt); color: var(--st-subtle); }
.cv-score--low[b-l40los9djt]  { background: var(--st-error-light); color: var(--st-error); }
.cv-score--mid[b-l40los9djt]  { background: var(--st-warning-light); color: var(--st-warning); }
.cv-score--good[b-l40los9djt] { background: var(--st-success-light); color: var(--st-success); }
.cv-score--high[b-l40los9djt] { background: var(--st-success-light); color: var(--st-success-dark); }
/* /Pages/Customers/QualityReportsOverview.razor.rz.scp.css */
/* Page-specific bits of the quality-report overview. The card, toolbar, table, badges and pager
   are the shared st-* rollout classes (design-system.css). */

/* The customer cell is a plain link to the customer page (it does not open the report). */
.qr-customer-link[b-v71di4urnh] {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
}

.qr-customer-link:hover[b-v71di4urnh] {
    color: var(--st-primary);
}

/* Score pill: a number, not a state, so no status dot. Tone by score band. */
.qr-score[b-v71di4urnh] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--st-radius-sm);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.qr-score--none[b-v71di4urnh]  { background: var(--st-bg-alt); color: var(--st-subtle); }
.qr-score--low[b-v71di4urnh]   { background: var(--st-error-light); color: var(--st-error); }
.qr-score--mid[b-v71di4urnh]   { background: var(--st-warning-light); color: var(--st-warning); }
.qr-score--good[b-v71di4urnh]  { background: var(--st-success-light); color: var(--st-success); }
.qr-score--great[b-v71di4urnh] { background: var(--st-success-light); color: var(--st-success-dark); }
/* /Pages/Customers/SubcontractorLocations.razor.rz.scp.css */
/* Subcontractor locations: one card per location (title bar, contacts, upcoming tasks), two per
   row on wide screens. Shared vocabulary (tokens, badges, skeleton, empty state) is in
   design-system.css; only the card structure lives here. */

.subloc-grid[b-8jr4xvukvk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 959px) {
    .subloc-grid[b-8jr4xvukvk] { grid-template-columns: minmax(0, 1fr); }
}

.subloc-card[b-8jr4xvukvk] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
}

/* Title bar: semibold 14px title, divider under it. */
.subloc-card__head[b-8jr4xvukvk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border);
}

.subloc-card__titles[b-8jr4xvukvk] { min-width: 0; }

.subloc-card__title[b-8jr4xvukvk] {
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
    line-height: 1.35;
}

.subloc-card__section[b-8jr4xvukvk] {
    padding: 10px 16px;
}

.subloc-card__section + .subloc-card__section[b-8jr4xvukvk] {
    border-top: 1px solid var(--st-border-light);
}

.subloc-card__tasks[b-8jr4xvukvk] { padding: 6px 8px; }

.subloc-skel-title[b-8jr4xvukvk] { width: 55%; }

.subloc-contact[b-8jr4xvukvk] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    color: var(--st-muted);
}

/* One upcoming task: status icon, title, date. Opens the task dialog. */
.subloc-task[b-8jr4xvukvk] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: none;
    border-radius: var(--st-radius-sm);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.subloc-task:hover[b-8jr4xvukvk] { background: var(--st-bg); }
.subloc-task.is-ghost[b-8jr4xvukvk] { opacity: .45; }

.subloc-task__title[b-8jr4xvukvk] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--st-text);
}

.subloc-task__date[b-8jr4xvukvk] {
    font-size: 12px;
    color: var(--st-subtle);
    flex-shrink: 0;
}

.subloc-task[b-8jr4xvukvk]  .subloc-task__icon { font-size: 15px; }
.subloc-task[b-8jr4xvukvk]  .subloc-task__icon.is-done { color: var(--st-success); }
.subloc-task[b-8jr4xvukvk]  .subloc-task__icon.is-active { color: var(--st-warning); }
.subloc-task[b-8jr4xvukvk]  .subloc-task__icon.is-cancelled { color: var(--st-subtle); }
.subloc-task[b-8jr4xvukvk]  .subloc-task__icon.is-planned { color: var(--st-muted); }
/* /Pages/Dashboard.razor.rz.scp.css */
/* Live positions card (team GPS overview) + its fullscreen mode. */
.live-card[b-ldtj58d3ki] {
    margin-top: 20px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.live-card.fullscreen[b-ldtj58d3ki] {
    position: fixed;
    inset: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    z-index: 1300;
}

.live-head[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border-light);
    flex-wrap: wrap;
}

.live-title[b-ldtj58d3ki] {
    font-size: 15px;
    font-weight: 600;
    color: var(--st-text);
}

.live-filters[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}

/* Filter input pinned above the worker list it filters. */
.live-list-filter[b-ldtj58d3ki] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border-light);
}

.live-search[b-ldtj58d3ki] {
    border: none;
    outline: none;
    font-size: 13px;
    min-width: 0;
    width: 100%;
    background: transparent;
    color: var(--st-text);
}

.live-chip[b-ldtj58d3ki] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--st-success);
    background: var(--st-success-light);
    border: 1px solid color-mix(in srgb, var(--st-success) 20%, var(--st-white));
    padding: 3px 10px;
    border-radius: 999px;
}

.live-chip.historical[b-ldtj58d3ki] {
    color: var(--st-warning);
    background: var(--st-warning-light);
    border-color: color-mix(in srgb, var(--st-warning) 20%, var(--st-white));
}

.live-chip .dot[b-ldtj58d3ki] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* "Today only" marker filter: pill toggle, highlighted blue when active. */
.live-toggle[b-ldtj58d3ki] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-muted);
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: 999px;
    padding: 4px 12px 4px 9px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.live-toggle:hover[b-ldtj58d3ki],
.live-toggle.active[b-ldtj58d3ki] {
    background: var(--st-primary-light);
    color: var(--st-primary);
    border-color: var(--st-primary-border);
}

.live-expand[b-ldtj58d3ki] {
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 5px 8px;
    color: var(--st-muted);
    display: inline-flex;
    align-items: center;
    transition: background .15s, color .15s;
}

/* Department filter pill + checkbox dropdown (pattern from the customer map). */
.live-dept-wrap[b-ldtj58d3ki] {
    position: relative;
}

.live-pill-count[b-ldtj58d3ki] {
    background: var(--st-primary);
    color: var(--st-white);
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    line-height: 1.4;
}

.live-dropdown[b-ldtj58d3ki] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 210px;
    max-height: 260px;
    overflow-y: auto;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(10, 15, 24, 0.12);
    padding: 6px;
}

.live-dropdown-row[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--st-text);
    border-radius: 6px;
    cursor: pointer;
}

.live-dropdown-row:hover[b-ldtj58d3ki] {
    background: var(--st-bg);
}

.live-dropdown-row input[type="checkbox"][b-ldtj58d3ki] {
    accent-color: var(--st-primary);
    cursor: pointer;
}

.live-dropdown-row .dot[b-ldtj58d3ki] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.live-dropdown-empty[b-ldtj58d3ki] {
    padding: 7px 10px;
    font-size: 12px;
    color: var(--st-subtle);
}

.live-expand:hover[b-ldtj58d3ki] {
    background: var(--st-primary-light);
    color: var(--st-primary);
    border-color: var(--st-primary-border);
}

/* Day-replay scrub timeline, pinned under the map. */
.live-timeline[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--st-border-light);
    background: var(--st-white);
}

.live-play[b-ldtj58d3ki] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--st-primary);
    color: var(--st-white);
    cursor: pointer;
    flex: none;
    transition: background .15s;
}

.live-play:hover[b-ldtj58d3ki] {
    background: var(--st-primary-hover);
}

.live-scrub-wrap[b-ldtj58d3ki] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.live-scrub[b-ldtj58d3ki] {
    flex: 1;
    width: 100%;
    accent-color: var(--st-primary);
    cursor: pointer;
    height: 4px;
}

/* Tick marks at each GPS fix. Inset by ~half the thumb so ticks line up with the
   thumb's travel; behind the thumb and non-interactive so dragging still works. */
.live-scrub-ticks[b-ldtj58d3ki] {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 10px;
    transform: translateY(-50%);
    pointer-events: none;
}

.live-tick[b-ldtj58d3ki] {
    position: absolute;
    top: 0;
    width: 2px;
    height: 10px;
    margin-left: -1px;
    background: var(--st-subtle);
    border-radius: 1px;
}

.live-scrub:disabled[b-ldtj58d3ki] {
    cursor: default;
    opacity: .5;
}

.live-time-edge[b-ldtj58d3ki] {
    font-size: 11px;
    color: var(--st-subtle);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.live-time-cur[b-ldtj58d3ki] {
    font-size: 13px;
    font-weight: 700;
    color: var(--st-text);
    font-variant-numeric: tabular-nums;
    min-width: 44px;
    text-align: right;
    flex: none;
}

.live-time-empty[b-ldtj58d3ki] {
    font-size: 12px;
    color: var(--st-subtle);
    flex: none;
}

.live-body[b-ldtj58d3ki] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Spinner overlay shown over the map/list while a date reload is in flight. */
.live-loading[b-ldtj58d3ki] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* Same overlay, but for a failed positions fetch: stacked, and clickable so the
   retry button actually works (the spinner variant is deliberately inert). */
.live-error[b-ldtj58d3ki] {
    flex-direction: column;
    gap: 10px;
    color: var(--st-muted);
    font-size: 13px;
    pointer-events: auto;
}

.live-map[b-ldtj58d3ki] {
    flex: 1;
    min-width: 320px;
    height: 360px;
    background: var(--st-bg-alt);
}

.live-card.fullscreen .live-map[b-ldtj58d3ki] {
    height: auto;
}

/* Base map style toggle: top-left of the live map. */
.live-styletoggle-group[b-ldtj58d3ki] {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: var(--st-white);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.live-styletoggle[b-ldtj58d3ki] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--st-white);
    color: var(--st-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.live-styletoggle + .live-styletoggle[b-ldtj58d3ki] {
    border-top: 1px solid var(--st-border);
}

.live-styletoggle:hover[b-ldtj58d3ki] {
    background: var(--st-bg-alt);
}

.live-styletoggle.on[b-ldtj58d3ki] {
    background: var(--st-primary);
    color: var(--st-white);
}

.live-list[b-ldtj58d3ki] {
    width: 300px;
    border-left: 1px solid var(--st-border-light);
    overflow-y: auto;
    max-height: 360px;
}

.live-card.fullscreen .live-list[b-ldtj58d3ki] {
    width: 340px;
    max-height: none;
}

.live-row[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--st-bg);
    cursor: pointer;
    transition: background .12s;
}

.live-row:hover[b-ldtj58d3ki] {
    background: var(--st-bg);
}

.live-row.selected[b-ldtj58d3ki] {
    background: var(--st-warning-light);
}

.live-avatar[b-ldtj58d3ki] {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 50%;
    background: var(--st-primary-light);
    color: var(--st-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    overflow: hidden;
}

.live-avatar img[b-ldtj58d3ki] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.live-name[b-ldtj58d3ki] {
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-sub[b-ldtj58d3ki] {
    font-size: 11px;
    color: var(--st-subtle);
}

.live-empty[b-ldtj58d3ki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--st-subtle);
    font-size: 13px;
    text-align: center;
}

/* ── Asset widget: zones needing attention ─────────────────────────────────── */

.dash-asset-zones[b-ldtj58d3ki] {
    border: 1px solid var(--st-border);
    border-radius: 12px;
    padding: 8px 10px;
}

.dash-asset-zones-head[b-ldtj58d3ki] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--st-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.dash-asset-zone-row[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 2px;
    background: none;
    border: none;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
}

.dash-asset-zone-row:hover[b-ldtj58d3ki] {
    background: var(--st-bg);
}

.dash-asset-zone-swatch[b-ldtj58d3ki] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-asset-zone-name[b-ldtj58d3ki] {
    font-weight: 600;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-asset-zone-total[b-ldtj58d3ki] {
    color: var(--st-subtle);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Asset widget: one collapsible accordion row per service asset type ────── */

.dash-asset-type[b-ldtj58d3ki] {
    border: 1px solid var(--st-border);
    border-radius: 12px;
    overflow: hidden;
}

.dash-asset-type + .dash-asset-type[b-ldtj58d3ki],
.dash-asset-zones + .dash-asset-type[b-ldtj58d3ki] {
    margin-top: 8px;
}

.dash-asset-type-row[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dash-asset-type-row:hover[b-ldtj58d3ki] {
    background: var(--st-bg);
}

.dash-asset-type-chevron[b-ldtj58d3ki] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--st-subtle);
    transition: transform 0.15s ease;
}

.dash-asset-type-chevron.open[b-ldtj58d3ki] {
    transform: rotate(90deg);
}

.dash-asset-type-row[b-ldtj58d3ki]  .dash-asset-type-chevron-icon {
    font-size: 18px;
}

.dash-asset-type-dot[b-ldtj58d3ki] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-asset-type-name[b-ldtj58d3ki] {
    font-size: 14px;
    font-weight: 700;
    color: var(--st-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-asset-type-count[b-ldtj58d3ki] {
    font-size: 12px;
    color: var(--st-subtle);
    white-space: nowrap;
}

.dash-asset-type-pct[b-ldtj58d3ki] {
    margin-left: auto;
    font-size: 18px;
    font-weight: 700;
    color: var(--st-text);
}

.dash-asset-type-pct.complete[b-ldtj58d3ki] {
    color: var(--st-success);
}

.dash-asset-type-body[b-ldtj58d3ki] {
    padding: 0 12px 12px;
}

.dash-asset-type-meta[b-ldtj58d3ki] {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--st-muted);
}

.dash-asset-type-meta-overdue[b-ldtj58d3ki] {
    color: var(--st-error);
    font-weight: 600;
}

.dash-asset-issues[b-ldtj58d3ki] {
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--st-warning) 30%, var(--st-white));
    background: var(--st-warning-light);
    border-radius: 10px;
    padding: 8px 10px;
}

.dash-asset-issues-head[b-ldtj58d3ki] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--st-warning);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.dash-asset-issue-row[b-ldtj58d3ki] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 3px 0;
    font-size: 12.5px;
    cursor: pointer;
}

.dash-asset-issue-row[b-ldtj58d3ki]  .dash-asset-issue-icon {
    font-size: 13px;
    color: var(--st-warning);
    margin-top: 2px;
}

.dash-asset-issue-text[b-ldtj58d3ki] {
    flex: 1;
    min-width: 0;
}

.dash-asset-issue-name[b-ldtj58d3ki] {
    font-weight: 600;
    color: var(--st-text);
}

.dash-asset-issue-area[b-ldtj58d3ki] {
    color: var(--st-subtle);
}

.dash-asset-issue-note[b-ldtj58d3ki] {
    color: var(--st-muted);
}

.dash-asset-issue-sub[b-ldtj58d3ki] {
    font-size: 11px;
    color: var(--st-subtle);
}

.dash-asset-latest[b-ldtj58d3ki] {
    margin-top: 10px;
}

.dash-asset-latest-head[b-ldtj58d3ki] {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--st-subtle);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.dash-asset-latest-row[b-ldtj58d3ki] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12.5px;
    cursor: pointer;
}

.dash-asset-latest-row[b-ldtj58d3ki]  .dash-asset-latest-icon {
    font-size: 13px;
    color: var(--st-success);
}

.dash-asset-latest-name[b-ldtj58d3ki] {
    font-weight: 600;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-asset-latest-area[b-ldtj58d3ki] {
    color: var(--st-subtle);
}

.dash-asset-latest-meta[b-ldtj58d3ki] {
    margin-left: auto;
    color: var(--st-muted);
    white-space: nowrap;
}

/* Calendar pill for a task whose customer refused the visit, awaiting a head's decision (kravspec 1.23). */
.dash-cal-item.refused[b-ldtj58d3ki] { color: var(--st-error-dark); font-weight: 600; }
.dash-cal-item.refused .dash-cal-item-dot[b-ldtj58d3ki] { background: var(--st-error); }

/* ── Wave 5A: dashboard cards (StCard title bars, skeletons, tokenized bars) ── */

/* A dashboard card's list scrolls inside the card past this height. */
.dash-panel-scroll[b-ldtj58d3ki] {
    max-height: 360px;
    overflow-y: auto;
}

/* "View all N tasks" under a list cut at 12 rows. */
.dash-panel-more[b-ldtj58d3ki] {
    padding: 8px 16px;
    text-align: center;
    border-top: 1px solid var(--st-border-light);
}

.dash-min-w0[b-ldtj58d3ki] {
    min-width: 0;
}

.dash-team-row[b-ldtj58d3ki] {
    cursor: pointer;
    transition: background var(--st-duration-fast);
}

.dash-team-row:hover[b-ldtj58d3ki] {
    background: var(--st-bg);
}

.dash-team-head[b-ldtj58d3ki] {
    min-width: 0;
}

.dash-team-dot[b-ldtj58d3ki] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-team-name[b-ldtj58d3ki] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
}

/* The team skeleton's second line stands in for the progress bar. */
.dash-skel-bar[b-ldtj58d3ki] {
    width: 100%;
}

.dash-search-wrap[b-ldtj58d3ki]  .st-search {
    width: 100%;
}

.dash-cal-skel[b-ldtj58d3ki] {
    width: 60px;
    height: 18px;
    border-radius: var(--st-radius-sm);
}

.live-filters[b-ldtj58d3ki]  .dash-live-date {
    width: 160px;
}

.live-empty[b-ldtj58d3ki]  .dash-live-empty-icon {
    font-size: 30px;
    color: var(--st-border-hover);
}
/* /Pages/Departments.razor.rz.scp.css */
/* Departments list: the card, table, badges, empty state and row menu are the shared st-* rollout
   classes (design-system.css). What is left here is the colour dot, the member pill and the
   inline teams panel under an expanded row. */

.dept-dot[b-w904z0amth] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dept-dot--sm[b-w904z0amth] {
    width: 8px;
    height: 8px;
}

.dept-member-pill[b-w904z0amth] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--st-primary-light);
    color: var(--st-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.st-table[b-w904z0amth]  .dept-expand { color: var(--st-muted); }

/* The expanded row is a panel, not a link: no pointer, no hover tint. */
.st-table tbody tr.dept-teams-row td[b-w904z0amth] {
    height: auto;
    padding: 0;
    cursor: default;
    background: var(--st-surface-alt);
    border-bottom: 1px solid var(--st-border);
}

.dept-teams[b-w904z0amth] {
    padding: 8px 48px 12px;
}

.dept-teams__skel[b-w904z0amth] {
    width: 40%;
    margin-top: 8px;
}

.dept-teams__bar[b-w904z0amth] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--st-border-light);
}

.dept-teams__search[b-w904z0amth] {
    flex: 1;
    max-width: 260px;
}

.dept-teams__note[b-w904z0amth] {
    padding: 12px 0;
    font-size: 13px;
    color: var(--st-subtle);
}

.dept-teams__note[b-w904z0amth]  .dept-teams__note-icon { color: var(--st-border-hover); }

.dept-team[b-w904z0amth] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--st-border-light);
}

.dept-team__main[b-w904z0amth] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.dept-team__name[b-w904z0amth] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
}

.dept-team__members[b-w904z0amth] {
    margin-left: 8px;
    font-size: 12px;
    color: var(--st-muted);
}

.dept-team__members--none[b-w904z0amth] { color: var(--st-border-hover); }
/* /Pages/Departments/DepartmentView.razor.rz.scp.css */
/* Department detail page (design rollout). Layout comes from the shared building blocks
   (PageHeader, PageTabs, StCard, .st-card-grid, .st-kv, .st-table-card); only page-specific
   bits live here. */

/* Colour dot before a department or team name; the colour itself is inline (data). */
.dv-dot[b-9l9be3ugj6] { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.dv-check[b-9l9be3ugj6] { color: var(--st-success); }

/* Round avatar: a photo (img) or initials on a muted tile; heads get the amber tile. */
.dv-avatar[b-9l9be3ugj6] {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--st-muted); color: var(--st-white);
    font-size: 12px; font-weight: 500; object-fit: cover;
}
.dv-avatar--head[b-9l9be3ugj6] { background: var(--st-warning); }
.dv-avatar--lg[b-9l9be3ugj6] { width: 36px; height: 36px; font-size: 13px; }

/* Overview quick stats: two clickable tiles that open the members / teams tab. */
.dv-stats[b-9l9be3ugj6] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--st-space-4); }
.dv-stat[b-9l9be3ugj6] {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 20px 16px; cursor: pointer; font-family: inherit;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
    transition: border-color var(--st-duration-fast);
}
.dv-stat:hover[b-9l9be3ugj6] { border-color: var(--st-border-hover); }
.dv-stat:focus-visible[b-9l9be3ugj6] { outline: none; box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.dv-stat__value[b-9l9be3ugj6] { font-size: 28px; font-weight: 700; color: var(--st-text); line-height: 1.2; }
.dv-stat__label[b-9l9be3ugj6] { font-size: 13px; color: var(--st-muted); }
/* /Pages/Employees.razor.rz.scp.css */
/* Employees list: page-specific structure only. The table, toolbar, pager and states are the
   shared st-* list building blocks in design-system.css. */

/* Name cell: 32px avatar (photo or role-coloured initials) + name/email lines. */
.emp-person[b-2b40vpoqq9] { display: flex; align-items: center; gap: 10px; min-width: 0; }
.emp-person__text[b-2b40vpoqq9] { min-width: 0; }

.emp-avatar[b-2b40vpoqq9] {
    width: 32px; height: 32px; min-width: 32px; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
}
.emp-avatar img[b-2b40vpoqq9] { width: 100%; height: 100%; object-fit: cover; }
/* The background is the role colour, set inline from data. */
.emp-avatar--initials[b-2b40vpoqq9] { color: var(--st-white); font-size: 13px; font-weight: 500; }

/* Department and team tags (labels, not states). Departments override the tint inline with
   their own colour. */
.emp-chips[b-2b40vpoqq9] { display: flex; flex-wrap: wrap; gap: 4px; }
.emp-chip[b-2b40vpoqq9] {
    background: var(--st-primary-light); color: var(--st-primary);
    font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 12px; white-space: nowrap;
}
/* /Pages/EmployeeView.razor.rz.scp.css */
/* Employee detail page: only the loading placeholders need page-specific sizing; the header,
   tabs and cards are PageHeader / PageTabs / StCard (see EmployeeDetailView). */
.emp-view-skeleton[b-jcv5ke6k0y] {
    width: 220px;
}
/* /Pages/Inventory.razor.rz.scp.css */
/* Inventory page: page-specific structure only. Colours, radii and spacing come from the
   --st-* tokens; the list/table pieces come from the shared st-table-card vocabulary. */

/* ── Transaction log ─────────────────────────────────────────────────────
   The recipient filters are search comboboxes with their own dropdown, so the Filters panel
   body must not clip or scroll them away. */
.inv-log[b-rp0fny44he]  .st-filter__body { overflow: visible; max-height: none; }
.inv-log[b-rp0fny44he]  .st-filter__panel { width: 340px; }

/* ── Statistics ──────────────────────────────────────────────────────────── */
.inv-stats-controls[b-rp0fny44he] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 16px; margin-bottom: 16px;
}
.inv-stats-field[b-rp0fny44he] { min-width: 150px; max-width: 190px; }
.inv-stats-field--date[b-rp0fny44he] { min-width: 140px; max-width: 160px; }
.inv-stats-field--wide[b-rp0fny44he] { min-width: 180px; max-width: 240px; }

.inv-kpis[b-rp0fny44he] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px; margin-bottom: 16px;
}
.inv-kpi[b-rp0fny44he] {
    padding: 16px; background: var(--st-white);
    border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
}
.inv-kpi__label[b-rp0fny44he] {
    margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--st-subtle);
}
.inv-kpi__value[b-rp0fny44he] { font-size: 24px; font-weight: 700; color: var(--st-text); }
.inv-kpi__delta[b-rp0fny44he] { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--st-subtle); }
.inv-kpi__delta.is-up[b-rp0fny44he] { color: var(--st-error); }
.inv-kpi__delta.is-down[b-rp0fny44he] { color: var(--st-success); }

.st-table th.inv-rank[b-rp0fny44he], .st-table td.inv-rank[b-rp0fny44he] { width: 56px; }
.st-table tbody tr.inv-row--outlier td[b-rp0fny44he] { background: var(--st-warning-light); }
.inv-row--outlier[b-rp0fny44he]  .inv-outlier-icon { color: var(--st-warning); }

/* ── Manage catalog: item card grid (drag to reorder) ─────────────────── */
.inventory-grid[b-rp0fny44he] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .inventory-grid[b-rp0fny44he] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .inventory-grid[b-rp0fny44he] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Loading placeholder in the shape of an item card. */
.inv-card-skeleton[b-rp0fny44he] {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 18px 10px 16px; background: var(--st-white);
    border: 2px solid var(--st-border); border-radius: var(--st-radius-md);
}
.inv-card-skeleton .st-skeleton--line2[b-rp0fny44he] { margin-top: 0; }
.inv-card-skeleton__photo[b-rp0fny44he] { width: 128px; height: 128px; border-radius: var(--st-radius); }
.inv-card-skeleton__line[b-rp0fny44he] { width: 70%; }
/* /Pages/Invoices.razor.rz.scp.css */
/* ══ Invoices page ═══════════════════════════════════════════════════════════
   Page-specific structure only. The card, toolbar, table, pager, status pills and states are
   the shared st-* list building blocks in design-system.css; the status tabs reuse the global
   underline tab look (.cust-tab / .cust-tab-count in app.css).                  */

/* ── Status sub-filter: underline tabs across the top of the table card ─── */
.inv-status-tabs[b-xdfuonw1th] {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    padding: 0 16px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    flex-shrink: 0;
    /* Divider as an inset shadow so the active tab's 2px underline covers it (as in PageTabs). */
    box-shadow: inset 0 -1px 0 var(--st-border);
}

.inv-status-tabs[b-xdfuonw1th]::-webkit-scrollbar { display: none; }

/* ── Table cells ─────────────────────────────────────────────────────────── */
.inv-num[b-xdfuonw1th] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--st-muted);
}

.inv-muted[b-xdfuonw1th] { font-size: 12px; color: var(--st-muted); }
.inv-nowrap[b-xdfuonw1th] { white-space: nowrap; }
.st-table th.inv-right[b-xdfuonw1th],
.st-table td.inv-right[b-xdfuonw1th] { text-align: right; }
.inv-total[b-xdfuonw1th] { font-weight: 500; white-space: nowrap; }

/* Small spinner inside the "Sending" status pill and the bulk send button. */
.st-table-card[b-xdfuonw1th]  .inv-btn-spinner { width: 12px !important; height: 12px !important; }
/* /Pages/Locations/LocationList.razor.rz.scp.css */
/* Page-specific bits of the tenant-wide location register. The card, toolbar, table and pager
   are the shared st-* rollout classes (design-system.css); only the chip has no shared vocabulary. */

/* Department / zone chip. The customer page colours these per department; the list endpoint
   returns names only, so they render in the neutral muted tone (same shape and alpha). */
.loc-dept-chip[b-pcbcgl9ma3] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(100, 116, 139, 0.13);
    color: var(--st-muted);
}
/* /Pages/Locations/LocationView.razor.rz.scp.css */
/* Location detail page: only the loading placeholders need page-specific sizing; the header,
   tabs and cards are PageHeader / PageTabs / StCard (see LocationPopupDialog in PageMode). */
.loc-view-skeleton[b-gg923mvevf] {
    width: 220px;
}
/* /Pages/Messages.razor.rz.scp.css */
/* Messages inbox: page-specific pieces on top of the msg-* shell in app.css. The page keeps
   its full-height two-column layout (no page header). */

/* The shared StSearchField spans the sidebar. */
.msg-search-wrap[b-ayodqs8yqa]  .st-search { width: 100%; }

/* Loading placeholder rows in the conversation list. */
.msg-conv-item.msg-conv-item--skeleton[b-ayodqs8yqa] { cursor: default; }
.msg-conv-item.msg-conv-item--skeleton:hover[b-ayodqs8yqa] { background: transparent; }
.msg-skel-avatar[b-ayodqs8yqa] { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; }
.msg-skel-name[b-ayodqs8yqa] { width: 60%; }

/* Thread header: member count after the type badge. */
.msg-thread-members[b-ayodqs8yqa] { margin-left: 8px; font-size: 12px; color: var(--st-subtle); }

/* Loading placeholder bubbles in the thread. */
.msg-skeleton[b-ayodqs8yqa] { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.msg-skeleton__row[b-ayodqs8yqa] { display: flex; }
.msg-skeleton__row.self[b-ayodqs8yqa] { justify-content: flex-end; }
.msg-skeleton__bubble[b-ayodqs8yqa] { width: 38%; height: 34px; border-radius: var(--st-radius-md); }
.msg-skeleton__bubble.wide[b-ayodqs8yqa] { width: 56%; }

/* Remove the pending attachment from the composer. */
.msg-attach-remove[b-ayodqs8yqa] {
    display: inline-flex; align-items: center; padding: 0;
    border: none; background: none; color: var(--st-muted); cursor: pointer;
}
.msg-attach-remove:hover[b-ayodqs8yqa] { color: var(--st-text); }
/* /Pages/Planning.razor.rz.scp.css */
/* ── Planning Page Layout ─────────────────────────────────────────────────── */

.planning-filters[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    margin: 20px 24px 0;
    background: var(--st-white);
    flex-wrap: wrap;
}

.planning-content[b-wftzrgsyp2] {
    padding: 20px 24px;
    overflow-x: auto;
}

/* This page sits straight in .st-main rather than in a .st-content, so on a wide screen line
   the bar and the board up with the header's 1600px column (1552px inside its 24px padding)
   instead of running past it. The board keeps its scrollbar on the window edge: the gutter
   is padding, not margin. Percentages here resolve against .st-main's width. */
@media (min-width: 769px) {
    .planning-filters[b-wftzrgsyp2] { margin-inline: max(24px, calc((100% - 1552px) / 2)); }
    .planning-content[b-wftzrgsyp2] { padding-inline: max(24px, calc((100% - 1552px) / 2)); }
}

/* ── Search ───────────────────────────────────────────────────────────────── */

/* StSearchField renders its root outside this file, so size it through ::deep. */
.planning-filters[b-wftzrgsyp2]  .planning-search { width: 240px; min-width: 200px; }

/* ── Selects ──────────────────────────────────────────────────────────────── */

/* Form fields inside the planning dialogs: a native select / input / textarea on the
   design-system 34px field look (st-native-select carries the chevron for selects). */
.planning-field[b-wftzrgsyp2] { width: 100%; }

.planning-input[b-wftzrgsyp2] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-text);
    font-family: var(--st-font-body);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.planning-input:hover[b-wftzrgsyp2] { border-color: var(--st-border-hover); }
.planning-input:focus[b-wftzrgsyp2] { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }

.planning-textarea[b-wftzrgsyp2] {
    height: auto;
    min-height: 72px;
    padding: 8px 10px;
    resize: vertical;
}

.planning-label[b-wftzrgsyp2] {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--st-muted);
    margin-bottom: 4px;
}

/* ── Plan selector ────────────────────────────────────────────────────────── */

.plan-selector-wrap[b-wftzrgsyp2] {
    position: relative;
}

.plan-selector-btn[b-wftzrgsyp2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    padding: 0 8px 0 10px;
    background: var(--st-white);
    font-family: var(--st-font-body);
    font-size: 13px;
    color: var(--st-text);
    cursor: pointer;
    min-width: 180px;
    white-space: nowrap;
}

.plan-selector-btn:hover[b-wftzrgsyp2] { border-color: var(--st-border-hover); }
.plan-selector-name[b-wftzrgsyp2] { flex: 1; text-align: left; }
.plan-selector-placeholder[b-wftzrgsyp2] { flex: 1; text-align: left; color: var(--st-subtle); }
.plan-selector-btn[b-wftzrgsyp2]  .plan-selector-chevron { font-size: 18px; color: var(--st-subtle); }

.plan-dropdown[b-wftzrgsyp2] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    box-shadow: var(--st-shadow-popover);
    z-index: 100;
    overflow: hidden;
}

.plan-dropdown-item[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--st-text);
    transition: background 0.1s;
}

.plan-dropdown-item:hover[b-wftzrgsyp2] { background: var(--st-bg); }
.plan-dropdown-item.active[b-wftzrgsyp2] { background: var(--st-primary-light); }

.plan-dropdown-name[b-wftzrgsyp2] { flex: 1; }
.plan-dropdown-date[b-wftzrgsyp2] { font-size: 12px; color: var(--st-muted); white-space: nowrap; }

.plan-dropdown-empty[b-wftzrgsyp2] {
    padding: 16px;
    text-align: center;
    color: var(--st-subtle);
    font-size: 13px;
}

/* ── Labelled toolbar selects ─────────────────────────────────────────────── */

/* A toolbar select with its label on the top border, like an outlined MudBlazor field, so the
   bar keeps its 34px height and every control still says what it is. */
.planning-labelled[b-wftzrgsyp2] {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.planning-labelled__label[b-wftzrgsyp2] {
    position: absolute;
    top: -7px;
    left: 8px;
    z-index: 1;
    padding: 0 4px;
    background: var(--st-white);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--st-muted);
    white-space: nowrap;
    pointer-events: none;
}

/* Toolbar buttons keep their label on one line. */
.planning-filters[b-wftzrgsyp2]  .planning-nowrap {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Bulk action bar ──────────────────────────────────────────────────────── */

/* .planning-board is its own scroll region, so the bar sticks to its top edge: ticking an
   entry far down the list must still show the bar, not insert it above the viewport. */
.bulk-bar[b-wftzrgsyp2] {
    position: sticky;
    top: 0;
    z-index: 15;
    box-shadow: var(--st-shadow-md);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 16px;
    background: var(--st-primary-light);
    border: 1px solid var(--st-primary-border);
    border-radius: var(--st-radius-md);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bulk-bar-count[b-wftzrgsyp2] {
    font-size: 13px;
    color: var(--st-primary);
    font-weight: 600;
    flex: 1;
}

.bulk-bar-actions[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Team card ────────────────────────────────────────────────────────────── */

.team-card[b-wftzrgsyp2] {
    border: 1px solid var(--st-border);
    border-radius: 12px;
    margin-bottom: 16px;
    background: var(--st-white);
    overflow: hidden;
}

.team-header[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.1s;
}

.team-header:hover[b-wftzrgsyp2] { background: var(--st-bg); }

.team-header-left[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.team-header-right[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-header-right[b-wftzrgsyp2]  .team-edit-btn { color: var(--st-muted); }
.team-header-right[b-wftzrgsyp2]  .team-edit-btn:hover { background: var(--st-primary-light); color: var(--st-primary); }

.team-header-right[b-wftzrgsyp2]  .team-chevron {
    font-size: 20px;
    color: var(--st-muted);
    transition: transform 0.2s;
}

.team-header-right[b-wftzrgsyp2]  .team-chevron.is-open { transform: rotate(180deg); }

.team-color-dot[b-wftzrgsyp2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.team-name[b-wftzrgsyp2] {
    font-weight: 600;
    font-size: 14px;
    color: var(--st-text);
}

.team-hours-badge[b-wftzrgsyp2],
.team-dkk-badge[b-wftzrgsyp2] {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--st-primary-light);
    color: var(--st-primary);
}

.team-dkk-badge[b-wftzrgsyp2] {
    background: var(--st-success-light);
    color: var(--st-success);
}

.team-employees[b-wftzrgsyp2] {
    font-size: 12px;
    color: var(--st-subtle);
}

.team-body[b-wftzrgsyp2] {
    border-top: 1px solid var(--st-border);
    overflow-x: auto;
}

/* ── Skeleton loaders ─────────────────────────────────────────────────────── */

@keyframes sk-shimmer-b-wftzrgsyp2 {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.sk[b-wftzrgsyp2] {
    background-color: var(--st-border);
    background-image: linear-gradient(90deg, var(--st-border) 0px, var(--st-bg) 90px, var(--st-border) 180px);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    animation: sk-shimmer-b-wftzrgsyp2 1.3s ease-in-out infinite;
}

.sk-dot[b-wftzrgsyp2]  { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.sk-box[b-wftzrgsyp2]  { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.sk-menu[b-wftzrgsyp2] { width: 4px; height: 16px; border-radius: 2px; flex: none; }
.sk-line[b-wftzrgsyp2] { height: 12px; }
.sk-pill[b-wftzrgsyp2] { height: 18px; border-radius: 9px; }
.sk-chip[b-wftzrgsyp2] { height: 16px; width: 88px; border-radius: 4px; }

/* Skeleton entry cards shown inside an open route while its work areas load.
   Reuses .entry-card and the real weekly grid for an exact layout match. */
.entry-card-skeleton[b-wftzrgsyp2] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: default;
}

.entry-card-skeleton .entry-top[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.entry-card-skeleton:hover[b-wftzrgsyp2] { box-shadow: none; }

/* ── Weekly grid ──────────────────────────────────────────────────────────── */

/* Rows: header, day crew, day settings, entries. Every day column spans all four as a subgrid, so
   each band lines up across the week however many names or settings a single day carries. */
.weekly-grid[b-wftzrgsyp2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(200px, 1fr));
    grid-template-rows: auto auto auto minmax(80px, 1fr);
    gap: 0;
    min-width: 1400px;
}

.day-col[b-wftzrgsyp2] {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    /* Without an explicit column the implicit `auto` track grows to the cards' min-content — a
       nowrap customer name's full width — and the column spills over its neighbours. */
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    border-right: 1px solid var(--st-border);
    min-height: 120px;
}

.day-col > .day-header[b-wftzrgsyp2]   { grid-row: 1; }
.day-col > .day-crew[b-wftzrgsyp2]     { grid-row: 2; }
.day-col > .day-settings[b-wftzrgsyp2] { grid-row: 3; }
.day-col > .day-entries[b-wftzrgsyp2]  { grid-row: 4; }

.day-col:last-child[b-wftzrgsyp2] { border-right: none; }

/* An empty weekend day collapsed to a strip (width comes from the grid template). */
.day-col--narrow[b-wftzrgsyp2] {
    cursor: pointer;
    background: var(--st-bg);
    overflow: hidden;
}

.day-col--narrow:hover[b-wftzrgsyp2] { background: var(--st-bg-alt); }

.day-col--narrow .day-header[b-wftzrgsyp2] {
    justify-content: center;
    padding: 8px 0;
}

.day-col--narrow .day-entries[b-wftzrgsyp2] {
    padding: 4px;
    min-height: 0;
}

/* An opened weekend day: its background collapses it again. */
.day-col--collapsible[b-wftzrgsyp2] { cursor: pointer; }
.day-col--collapsible:hover[b-wftzrgsyp2] { background: var(--st-bg); }

/* Who works this day, on a team whose crew varies by weekday; opens Edit team on that day. */
/* Icon | names | add icon. The names wrap within their own column, so a second line starts under
   the first name rather than under the icon; both icons stay on the first line. */
.day-crew[b-wftzrgsyp2] {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--st-border-light);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    align-content: start;
    column-gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    color: var(--st-muted);
}

.day-crew:hover[b-wftzrgsyp2] { background: var(--st-bg); }
.day-crew:focus-visible[b-wftzrgsyp2] { outline: none; box-shadow: inset 0 0 0 2px var(--st-primary-focus-ring); }

/* Icons are 14px against an 18px chip line: 2px down centres them on the first line. */
.day-crew[b-wftzrgsyp2]  .day-crew__icon { font-size: 14px; margin-top: 2px; color: var(--st-subtle); }

.day-crew[b-wftzrgsyp2]  .day-crew__add {
    font-size: 14px;
    margin-top: 2px;
    color: var(--st-primary);
    opacity: 0;
}

.day-crew:hover[b-wftzrgsyp2]  .day-crew__add,
.day-crew:focus-visible[b-wftzrgsyp2]  .day-crew__add,
.day-crew--empty[b-wftzrgsyp2]  .day-crew__add { opacity: 1; }

.day-crew__names[b-wftzrgsyp2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.day-crew__none[b-wftzrgsyp2] { line-height: 18px; }

.day-crew__name[b-wftzrgsyp2] {
    line-height: 16px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--st-bg-alt);
    color: var(--st-text);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.day-crew--empty[b-wftzrgsyp2] { color: #B45309; }

.day-header[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 8px 12px;
    background: var(--st-bg);
    border-bottom: 1px solid var(--st-border);
}

.day-name[b-wftzrgsyp2] {
    font-size: 11px;
    font-weight: 700;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.day-hours[b-wftzrgsyp2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-primary);
}

/* Staffing on the day: employees on the team / employees the planned hours need. */
.day-staffing[b-wftzrgsyp2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px 1px 4px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
}
.day-staffing.is-ok[b-wftzrgsyp2] { color: var(--st-success-dark); background: var(--st-success-light); }
.day-staffing.is-off[b-wftzrgsyp2] { color: var(--st-error-dark); background: var(--st-error-light); }
.day-staffing[b-wftzrgsyp2]  .day-staffing__icon { font-size: 13px; }

/* ── Day settings (pills + note) ──────────────────────────────────────────── */

.day-settings[b-wftzrgsyp2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px 0;
}

.day-pills[b-wftzrgsyp2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.day-pill[b-wftzrgsyp2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.day-pill svg[b-wftzrgsyp2] { flex-shrink: 0; }

.day-pill-start[b-wftzrgsyp2] {
    background: var(--st-primary-light);
    color: var(--st-primary);
    border: 1px solid var(--st-primary-100);
}

.day-pill-end[b-wftzrgsyp2] {
    background: var(--st-success-light);
    color: var(--st-success);
    border: 1px solid color-mix(in srgb, var(--st-success) 20%, var(--st-white));
}

.day-note-box[b-wftzrgsyp2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    background: var(--st-caution-light);
    border: 1px solid color-mix(in srgb, var(--st-caution) 40%, var(--st-white));
    border-left: 3px solid var(--st-warning);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--st-text);
    line-height: 1.45;
}

.day-note-icon[b-wftzrgsyp2] {
    flex-shrink: 0;
    color: var(--st-warning);
    margin-top: 2px;
}

.day-note-text[b-wftzrgsyp2] {
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}

.day-entries[b-wftzrgsyp2] {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 80px;
    transition: background 0.15s;
}

.day-entries.drag-over[b-wftzrgsyp2] {
    background: var(--st-primary-light);
    border: 2px dashed var(--st-primary);
    border-radius: 8px;
}

/* ── Entry card ───────────────────────────────────────────────────────────── */

.entry-card[b-wftzrgsyp2] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: grab;
    transition: box-shadow 0.15s, opacity 0.15s;
}

.entry-card:hover[b-wftzrgsyp2] { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.entry-card.dragging[b-wftzrgsyp2] { opacity: 0.4; cursor: grabbing; }
.entry-card.selected[b-wftzrgsyp2] { border-color: var(--st-primary); background: var(--st-primary-light); }
.entry-card.search-match[b-wftzrgsyp2] {
    border-color: var(--st-warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), 0 2px 8px rgba(245, 158, 11, 0.25);
}


.entry-top[b-wftzrgsyp2] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.entry-checkbox[b-wftzrgsyp2] {
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.entry-customer[b-wftzrgsyp2] {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-middle[b-wftzrgsyp2] {
    margin-top: 2px;
    font-size: 11px;
    color: var(--st-muted);
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.entry-customer-id[b-wftzrgsyp2] {
    color: var(--st-subtle);
    margin-right: 4px;
}

.entry-location-name[b-wftzrgsyp2] {
    color: var(--st-text);
    font-weight: 500;
    margin-right: 4px;
}

.entry-address[b-wftzrgsyp2] {
    color: var(--st-muted);
}

/* Small icon buttons in the day header and on entry cards (MudIconButton, so ::deep). */
.day-header[b-wftzrgsyp2]  .planning-mini-btn,
.entry-top[b-wftzrgsyp2]  .planning-mini-btn {
    padding: 3px;
    flex-shrink: 0;
    color: var(--st-subtle);
    border-radius: var(--st-radius-sm);
}

.day-header[b-wftzrgsyp2]  .planning-mini-btn .mud-icon-root,
.entry-top[b-wftzrgsyp2]  .planning-mini-btn .mud-icon-root { font-size: 15px; }

.day-header[b-wftzrgsyp2]  .planning-mini-btn:hover,
.entry-top[b-wftzrgsyp2]  .planning-mini-btn:hover { background: var(--st-bg-alt); color: var(--st-primary); }

/* ── Work areas list ─────────────────────────────────────────────────────── */

.entry-areas[b-wftzrgsyp2] {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.area-item[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.area-name[b-wftzrgsyp2] {
    color: var(--st-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.area-name.area-archived[b-wftzrgsyp2] { color: var(--st-warning); }

.area-archived-badge[b-wftzrgsyp2] {
    color: var(--st-warning);
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}

.area-freq-badge[b-wftzrgsyp2] {
    background: var(--st-bg-alt);
    color: var(--st-muted);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Entry footer badges ─────────────────────────────────────────────────── */

.entry-footer[b-wftzrgsyp2] {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.entry-note[b-wftzrgsyp2] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--st-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge[b-wftzrgsyp2] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
}

.badge-hours[b-wftzrgsyp2] { background: var(--st-primary-light); color: var(--st-primary); }
.badge-value[b-wftzrgsyp2] { background: var(--st-success-light); color: var(--st-success); }

/* ── Empty day placeholder ────────────────────────────────────────────────── */

.empty-day[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border: 2px dashed var(--st-border);
    border-radius: 8px;
    color: var(--st-subtle);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.empty-day:hover[b-wftzrgsyp2] {
    border-color: var(--st-primary);
    color: var(--st-primary);
}

/* ── WA option ───────────────────────────────────────────────────────────── */

.wa-option[b-wftzrgsyp2] {
    padding: 8px 0;
    border-bottom: 1px solid var(--st-border-light);
}

.wa-option:last-child[b-wftzrgsyp2] { border-bottom: none; }

/* ── Plan radio options ────────────────────────────────────────────────────── */

.plan-radio-option[b-wftzrgsyp2] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 2px solid var(--st-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.plan-radio-option.selected[b-wftzrgsyp2] { border-color: var(--st-primary); background: var(--st-primary-light); }
.plan-radio-option:hover[b-wftzrgsyp2] { border-color: var(--st-subtle); }

/* ── Draw Route calendar cell button ─────────────────────────────────────── */

.cell-draw-btn[b-wftzrgsyp2] {
    background: none;
    border: 1px dashed var(--st-route-border);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--st-route-soft);
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    width: 100%;
    margin-bottom: 4px;
}

.cell-draw-btn:hover[b-wftzrgsyp2] {
    background: var(--st-route-light);
    border-color: var(--st-route);
    color: var(--st-route-dark);
    border-style: solid;
}

/* ── Route drawn indicator card ──────────────────────────────────────────── */

.route-indicator[b-wftzrgsyp2] {
    background: var(--st-route-light);
    border: 1px solid var(--st-route-border);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.1s;
    flex: 1;
}

.route-indicator:hover[b-wftzrgsyp2] { background: var(--st-route-hover); }
.route-indicator.dragging[b-wftzrgsyp2] { opacity: 0.4; cursor: grabbing; }


.route-indicator-icon[b-wftzrgsyp2] {
    width: 28px;
    height: 28px;
    background: var(--st-route);
    color: var(--st-white);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.route-indicator-body[b-wftzrgsyp2] { flex: 1; min-width: 0; }

.route-indicator-label[b-wftzrgsyp2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-route-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.route-indicator-meta[b-wftzrgsyp2] { font-size: 10px; color: var(--st-route); margin-top: 1px; }
.route-indicator-dist[b-wftzrgsyp2] { font-size: 10px; font-weight: 600; color: var(--st-route); white-space: nowrap; }

.route-freq-badge[b-wftzrgsyp2] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--st-route);
    color: var(--st-white);
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    vertical-align: middle;
}

/* ── Draw Route modal overlay ────────────────────────────────────────────── */

.draw-modal-overlay[b-wftzrgsyp2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1200;
    display: flex;
    align-items: stretch;
}

.draw-modal[b-wftzrgsyp2] {
    display: flex;
    flex-direction: column;
    background: var(--st-white);
    width: 100%;
    height: 100%;
}

.draw-modal-toolbar[b-wftzrgsyp2] {
    height: 56px;
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: 10;
}

.draw-modal-title[b-wftzrgsyp2] { font-size: 15px; font-weight: 600; color: var(--st-text); line-height: 1.2; }
.draw-modal-subtitle[b-wftzrgsyp2] { font-size: 11px; color: var(--st-subtle); }
.draw-map-layout[b-wftzrgsyp2] { flex: 1; display: flex; overflow: hidden; }
.draw-map-container[b-wftzrgsyp2] { flex: 1; position: relative; overflow: hidden; cursor: crosshair; }
.draw-map-container.readonly[b-wftzrgsyp2] { cursor: default; }

.draw-map-sidebar[b-wftzrgsyp2] {
    width: 360px;
    background: var(--st-white);
    border-left: 1px solid var(--st-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.draw-map-sidebar-header[b-wftzrgsyp2] {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--st-border-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--st-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.draw-map-sidebar-body[b-wftzrgsyp2] { flex: 1; overflow-y: auto; padding: 12px 16px; }

/* ── Route schedule accordion (collapsed by default in the draw sidebar) ──── */
.route-schedule-accordion[b-wftzrgsyp2] {
    margin-bottom: 10px;
    border: 1px solid var(--st-border);
    border-radius: 8px;
    overflow: hidden;
}
.route-schedule-accordion.open[b-wftzrgsyp2] { border-color: var(--st-primary); }
.route-schedule-accordion-header[b-wftzrgsyp2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--st-bg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s;
}
.route-schedule-accordion-header:hover[b-wftzrgsyp2] { background: var(--st-bg-alt); }
.route-schedule-accordion-text[b-wftzrgsyp2] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.route-schedule-accordion-label[b-wftzrgsyp2] {
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.route-schedule-accordion-summary[b-wftzrgsyp2] {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.route-schedule-chevron[b-wftzrgsyp2] { color: var(--st-subtle); flex-shrink: 0; transition: transform 0.2s; }
.route-schedule-accordion.open .route-schedule-chevron[b-wftzrgsyp2] { transform: rotate(180deg); }
.route-schedule-accordion-body[b-wftzrgsyp2] { padding: 12px; border-top: 1px solid var(--st-border-light); }

/* "Scheduled" switch inside the accordion: a route may run on no weekday at all, which
   keeps it in the route library only. */
.route-schedule-toggle[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-text);
    cursor: pointer;
    margin-bottom: 10px;
}

.route-schedule-toggle input[b-wftzrgsyp2] { accent-color: var(--st-primary); cursor: pointer; }

.route-schedule-unscheduled[b-wftzrgsyp2] {
    font-size: 12px;
    color: var(--st-subtle);
}

/* "Can be started on any day": sits below the recurrence, separated by the same hairline
   the accordion body uses. */
.route-schedule-anyday[b-wftzrgsyp2] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--st-border-light);
}

.route-anyday-tag[b-wftzrgsyp2] {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--st-primary);
    background: var(--st-primary-light);
    border-radius: 999px;
    padding: 1px 7px;
}

/* Labelled field in the draw sidebar (team picker). */
.draw-field[b-wftzrgsyp2] { margin-bottom: 10px; }

.draw-field-label[b-wftzrgsyp2] {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.draw-field-select[b-wftzrgsyp2] {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--st-border-hover);
    border-radius: 6px;
    background: var(--st-white);
    font-size: 13px;
    font-family: inherit;
    color: var(--st-text);
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}

.draw-field-value[b-wftzrgsyp2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--st-text);
    padding: 6px 0;
}

.distance-badge[b-wftzrgsyp2] {
    background: var(--st-primary);
    color: var(--st-white);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.route-stat-card[b-wftzrgsyp2] {
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.stat-row[b-wftzrgsyp2] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.stat-row:last-child[b-wftzrgsyp2] { margin-bottom: 0; }
.stat-label[b-wftzrgsyp2] { font-size: 11px; color: var(--st-subtle); font-weight: 500; }
.stat-value[b-wftzrgsyp2] { font-size: 13px; font-weight: 600; color: var(--st-text); }
.stat-value.blue[b-wftzrgsyp2] { color: var(--st-primary); }

.map-instruction-banner[b-wftzrgsyp2] {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--st-muted);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 5;
}

.map-instruction-dot[b-wftzrgsyp2] {
    width: 8px; height: 8px;
    background: var(--st-primary); border-radius: 50%;
    animation: pulse-b-wftzrgsyp2 1.5s infinite;
}

@keyframes pulse-b-wftzrgsyp2 { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }

.view-mode-banner[b-wftzrgsyp2] {
    position: absolute;
    top: 12px;
    left: 12px;
    background: color-mix(in srgb, var(--st-route) 90%, transparent);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--st-white);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 5;
}

.snapping-toast[b-wftzrgsyp2] {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--st-text);
    color: var(--st-white);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 20;
    white-space: nowrap;
}

.spinner[b-wftzrgsyp2] {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--st-white);
    border-radius: 50%;
    animation: spin-b-wftzrgsyp2 0.7s linear infinite;
}

@keyframes spin-b-wftzrgsyp2 { to { transform: rotate(360deg); } }

/* Location search on the draw map: our own input + dropdown (Google Places
   with Mapbox fallback), so we control keyboard nav and fly-to-on-confirm. */
.map-search-bar[b-wftzrgsyp2] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 6;
    width: 300px;
}

.map-search-input[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.97);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    color: var(--st-muted);
}

.map-search-input:focus-within[b-wftzrgsyp2] { border-color: var(--st-primary); box-shadow: 0 0 0 3px var(--st-primary-focus-ring); }
.map-search-input.has-results[b-wftzrgsyp2] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.map-search-input input[b-wftzrgsyp2] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--st-text);
}

.map-search-input input[b-wftzrgsyp2]::placeholder { color: var(--st-subtle); }

.map-search-clear[b-wftzrgsyp2] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--st-subtle);
    display: flex;
    align-items: center;
}

.map-search-clear:hover[b-wftzrgsyp2] { color: var(--st-muted); }

.map-search-spinner[b-wftzrgsyp2] {
    width: 14px; height: 14px;
    flex-shrink: 0;
    border: 2px solid var(--st-border);
    border-top-color: var(--st-primary);
    border-radius: 50%;
    animation: spin-b-wftzrgsyp2 0.7s linear infinite;
}

.map-search-results[b-wftzrgsyp2] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 260px;
    overflow-y: auto;
}

.map-search-result[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--st-text);
    cursor: pointer;
    border-bottom: 1px solid var(--st-border-light);
}

.map-search-result:last-child[b-wftzrgsyp2] { border-bottom: none; }
.map-search-result:hover[b-wftzrgsyp2], .map-search-result.active[b-wftzrgsyp2] { background: var(--st-primary-light); }
.map-search-result svg[b-wftzrgsyp2] { color: var(--st-subtle); flex-shrink: 0; }
.map-search-result span[b-wftzrgsyp2] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.map-search-empty[b-wftzrgsyp2] { padding: 12px; font-size: 12px; color: var(--st-subtle); text-align: center; }

.map-overlay-dropdown[b-wftzrgsyp2] {
    position: absolute;
    top: 12px;
    right: 51px;
    z-index: 6;
}

.overlay-btn[b-wftzrgsyp2] {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border);
    border-radius: 6px;
    padding: 7px 10px 7px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--st-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 190px;
    justify-content: space-between;
    transition: border-color 0.15s;
    font-family: inherit;
}

.overlay-btn:hover[b-wftzrgsyp2], .overlay-btn.open[b-wftzrgsyp2] { background: var(--st-bg-alt); border-color: var(--st-primary); }

.overlay-panel[b-wftzrgsyp2] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 230px;
    z-index: 50;
    overflow: hidden;
}

.overlay-item[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--st-bg);
}

.overlay-item:hover[b-wftzrgsyp2] { background: var(--st-bg); }

.overlay-item-checkbox[b-wftzrgsyp2] {
    width: 15px; height: 15px;
    border: 1.5px solid var(--st-border-hover);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.15s; background: var(--st-white); color: var(--st-white);
}

.overlay-item.checked .overlay-item-checkbox[b-wftzrgsyp2] { background: var(--st-primary); border-color: var(--st-primary); }
.overlay-item-swatch[b-wftzrgsyp2] { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.mode-toggle[b-wftzrgsyp2] { display: flex; background: var(--st-bg-alt); border-radius: 6px; padding: 3px; gap: 2px; }

.mode-btn[b-wftzrgsyp2] {
    border: none; background: none;
    padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--st-muted);
    cursor: pointer; border-radius: 4px; font-family: inherit;
    display: flex; align-items: center; gap: 5px; transition: all 0.1s;
}

.mode-btn.active[b-wftzrgsyp2] { background: var(--st-white); color: var(--st-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.waypoint-list-title[b-wftzrgsyp2] {
    font-size: 11px; font-weight: 600; color: var(--st-subtle);
    text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 8px;
}

/* "Nothing here yet" under a list title, in both draw modes (waypoints and painted roads). */
.waypoint-list-empty[b-wftzrgsyp2] {
    font-size: 12px; color: var(--st-border-hover);
    text-align: center; padding: 20px 0;
}

.waypoint-item[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; border-bottom: 1px solid var(--st-border-light); font-size: 12px;
    transition: background 0.1s;
}

.waypoint-item.draggable[b-wftzrgsyp2] { cursor: grab; }
.waypoint-item.draggable:active[b-wftzrgsyp2] { cursor: grabbing; }
.waypoint-item.dragging[b-wftzrgsyp2] { opacity: 0.35; }
.waypoint-item.selected[b-wftzrgsyp2] { background: var(--st-primary-light); border-radius: 6px; border-bottom-color: var(--st-primary-border); }

.wp-drop-indicator[b-wftzrgsyp2] {
    height: 2px;
    background: var(--st-primary);
    border-radius: 1px;
    margin: 0 0 -1px;
    position: relative;
}

.wp-drop-indicator[b-wftzrgsyp2]::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st-primary);
}

.waypoint-grip[b-wftzrgsyp2] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    cursor: grab;
    padding: 2px 0;
    opacity: 0.5;
    transition: opacity 0.1s;
}

.waypoint-item:hover .waypoint-grip[b-wftzrgsyp2] { opacity: 1; }

.draw-map-sidebar-body[b-wftzrgsyp2]  .wp-delete-btn { margin-top: 8px; color: var(--st-error); }
.draw-map-sidebar-body[b-wftzrgsyp2]  .wp-delete-btn:hover { background: var(--st-error-light); border-color: var(--st-error); }

.waypoint-num[b-wftzrgsyp2] {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--st-primary-light); color: var(--st-primary);
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.waypoint-num.green[b-wftzrgsyp2] { background: var(--st-success-light); color: var(--st-success-dark); }
.waypoint-num.red[b-wftzrgsyp2] { background: var(--st-error-light); color: var(--st-error); }
.waypoint-label[b-wftzrgsyp2] {
    flex: 1; color: var(--st-muted); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.overlay-legend[b-wftzrgsyp2] {
    position: absolute; bottom: 32px; left: 12px;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border); border-radius: 8px;
    padding: 10px 12px; font-size: 11px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 5;
}


/* ── Road Type Filter ──────────────────────────────────────────────────── */
.road-type-panel[b-wftzrgsyp2] { position: absolute; bottom: 12px; right: 12px; z-index: 6; }
.road-type-toggle[b-wftzrgsyp2] {
    background: rgba(255,255,255,0.95); border: 1px solid var(--st-border); border-radius: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 500; color: var(--st-muted);
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    transition: border-color 0.15s; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.road-type-toggle:hover[b-wftzrgsyp2], .road-type-panel.open .road-type-toggle[b-wftzrgsyp2] { border-color: var(--st-primary); }
.road-type-count[b-wftzrgsyp2] {
    background: var(--st-primary); color: var(--st-white); font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.road-type-list[b-wftzrgsyp2] {
    position: absolute; bottom: calc(100% + 4px); right: 0;
    background: var(--st-white); border: 1px solid var(--st-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 220px; overflow: hidden;
}
.road-type-item[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; cursor: pointer; transition: background 0.1s;
    border-bottom: 1px solid var(--st-bg);
}
.road-type-item:hover[b-wftzrgsyp2] { background: var(--st-bg); }
.road-type-swatch[b-wftzrgsyp2] { height: 4px; min-width: 24px; border-radius: 2px; flex-shrink: 0; }
.road-type-check[b-wftzrgsyp2] {
    width: 16px; height: 16px; border: 1.5px solid var(--st-border-hover); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--st-white); color: var(--st-white); transition: all 0.15s;
}
.road-type-item.active .road-type-check[b-wftzrgsyp2] { background: var(--st-primary); border-color: var(--st-primary); }

/* ── POI / Stops ───────────────────────────────────────────────────────── */
.poi-item[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--st-border-light);
}
.poi-marker-dot[b-wftzrgsyp2] {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--st-warning); border: 2px solid var(--st-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15); flex-shrink: 0;
}

/* ── Route Progress Scrubber ───────────────────────────────────────────── */
.route-progress-bar[b-wftzrgsyp2] {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.95); border: 1px solid var(--st-border); border-radius: 8px;
    padding: 8px 14px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); z-index: 6; width: 320px;
}
.route-progress-bar input[type="range"][b-wftzrgsyp2] { flex: 1; accent-color: var(--st-primary); cursor: pointer; margin: 0; }
.route-progress-pct[b-wftzrgsyp2] { font-size: 11px; font-weight: 600; color: var(--st-muted); min-width: 34px; text-align: right; }

/* ── Sidebar Action Footer ─────────────────────────────────────────────── */
.draw-map-sidebar-footer[b-wftzrgsyp2] {
    flex-shrink: 0; padding: 10px 16px 12px;
    border-top: 1px solid var(--st-border); background: var(--st-white);
    box-shadow: 0 -4px 12px rgba(15,23,42,0.06);
}
.draw-map-sidebar-footer > div[b-wftzrgsyp2] { margin-top: 8px; }
.draw-map-sidebar-footer > div:first-child[b-wftzrgsyp2] { margin-top: 0; }

/* ── Route paint tools (draw modal, paint routes only) ─────────────────────
   Stacked under the map search box on the left. The colours themselves are the
   --st-paint-* tokens; this block is structure only. */
.paint-tools[b-wftzrgsyp2] {
    position: absolute; top: 56px; left: 12px; z-index: 6;
    display: flex; flex-direction: column; gap: 6px; width: 200px;
}

.paint-tool-row[b-wftzrgsyp2] { display: flex; align-items: center; gap: 6px; }

.paint-tool-btn[b-wftzrgsyp2] {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border); border-radius: 6px;
    color: var(--st-muted); cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.paint-tool-btn:hover:not(:disabled)[b-wftzrgsyp2] { border-color: var(--st-primary); }
.paint-tool-btn:disabled[b-wftzrgsyp2] { opacity: 0.5; cursor: default; }

.paint-tool-spinner[b-wftzrgsyp2] {
    width: 14px; height: 14px; flex-shrink: 0;
    border: 2px solid var(--st-border); border-top-color: var(--st-primary);
    border-radius: 50%; animation: spin-b-wftzrgsyp2 0.7s linear infinite;
}

.paint-size-row[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border); border-radius: 6px;
    padding: 6px 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.paint-size-label[b-wftzrgsyp2] { font-size: 11px; color: var(--st-muted); white-space: nowrap; }
.paint-size-row input[type="range"][b-wftzrgsyp2] { flex: 1; min-width: 0; accent-color: var(--st-primary); cursor: pointer; margin: 0; }

.paint-legend[b-wftzrgsyp2] {
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--st-border); border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden;
}
.paint-legend-row[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; cursor: pointer; transition: background 0.1s;
    border-bottom: 1px solid var(--st-bg);
}
.paint-legend-row:last-child[b-wftzrgsyp2] { border-bottom: none; }
.paint-legend-row:hover[b-wftzrgsyp2] { background: var(--st-bg); }
.paint-legend-row.active .road-type-check[b-wftzrgsyp2] { background: var(--st-primary); border-color: var(--st-primary); }
.paint-legend-label[b-wftzrgsyp2] { flex: 1; font-size: 12px; color: var(--st-muted); }

/* The road-network endpoint's "zoom in" answer. MudAlert renders its own root, so the
   scoped class sits on a wrapper the page itself writes. */
.paint-alert-wrap[b-wftzrgsyp2] {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    z-index: 7; max-width: 460px;
}

/* ── Painted per-group breakdown (draw sidebar) ──────────────────────────── */
.paint-breakdown[b-wftzrgsyp2] {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px; margin-bottom: 10px;
    background: var(--st-bg); border: 1px solid var(--st-border); border-radius: 8px;
}
.paint-breakdown-row[b-wftzrgsyp2] {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px; border-radius: 6px; font-size: 12px; cursor: pointer;
    transition: background 0.1s;
}
.paint-breakdown-row:hover[b-wftzrgsyp2] { background: var(--st-bg-alt); }
.paint-breakdown-row.active[b-wftzrgsyp2] { background: var(--st-primary-light); }
.paint-breakdown-row.active .paint-breakdown-label[b-wftzrgsyp2] { color: var(--st-primary); font-weight: 600; }
.paint-breakdown-label[b-wftzrgsyp2] { color: var(--st-muted); }
.paint-breakdown-value[b-wftzrgsyp2] { margin-left: auto; font-weight: 600; color: var(--st-text); font-variant-numeric: tabular-nums; }

/* ── Design rollout (wave 5B): empty states, skeleton widths, dialog pieces ── */

.planning-empty[b-wftzrgsyp2] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    margin-bottom: 16px;
}

/* Fixed skeleton widths (the loading team rows and entry cards). */
.sk-w48[b-wftzrgsyp2]  { width: 48px; }
.sk-w52[b-wftzrgsyp2]  { width: 52px; }
.sk-w64[b-wftzrgsyp2]  { width: 64px; }
.sk-w40p[b-wftzrgsyp2] { width: 40%; }
.sk-w80p[b-wftzrgsyp2] { width: 80%; }
.sk-grow[b-wftzrgsyp2] { flex: 1; max-width: 120px; }

/* New plan dialog: the two "start from" choices. */
.plan-radio-title[b-wftzrgsyp2] { font-weight: 500; font-size: 14px; color: var(--st-text); }
.plan-radio-desc[b-wftzrgsyp2] { font-size: 12px; color: var(--st-muted); }

/* Address search + results in the add-entry / switch-location dialogs. */
.planning-dialog-search[b-wftzrgsyp2] { width: 100%; }

.planning-loc-list[b-wftzrgsyp2] {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.planning-loc-list--tall[b-wftzrgsyp2] { max-height: 240px; }

.planning-loc-result[b-wftzrgsyp2] {
    padding: 10px 14px;
    background: var(--st-white);
    cursor: pointer;
    border-bottom: 1px solid var(--st-border-light);
    transition: background 0.15s;
}

.planning-loc-result--nolocation[b-wftzrgsyp2] {
    cursor: default;
}

.planning-loc-result.is-current[b-wftzrgsyp2] {
    background: var(--st-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

.planning-loc-selected[b-wftzrgsyp2] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 8px 10px 14px;
    background: var(--st-white);
    border: 2px solid var(--st-primary);
    border-radius: var(--st-radius);
}

.planning-loc-name[b-wftzrgsyp2] { font-weight: 600; font-size: 14px; color: var(--st-text); }
.planning-loc-meta[b-wftzrgsyp2] { font-size: 12px; color: var(--st-muted); }
.planning-loc-num[b-wftzrgsyp2] { color: var(--st-subtle); }

/* Work area picker rows (add / edit entry). */
.wa-row[b-wftzrgsyp2] { display: flex; align-items: center; gap: 10px; }
.wa-check[b-wftzrgsyp2] { cursor: pointer; }

.wa-toggle[b-wftzrgsyp2] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.wa-toggle.is-expandable[b-wftzrgsyp2] { cursor: pointer; }
.wa-name[b-wftzrgsyp2] { font-weight: 500; font-size: 14px; color: var(--st-text); }
.wa-archived[b-wftzrgsyp2] { color: var(--st-warning); font-size: 11px; }
.wa-count[b-wftzrgsyp2] { font-size: 11px; color: var(--st-subtle); }
.wa-toggle[b-wftzrgsyp2]  .wa-chevron { font-size: 18px; color: var(--st-subtle); }

.wa-freqs[b-wftzrgsyp2] {
    margin: 6px 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wa-freq[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.wa-freq.is-disabled[b-wftzrgsyp2] { cursor: default; opacity: 0.5; }
.wa-freq-text[b-wftzrgsyp2] { font-size: 12px; color: var(--st-muted); }

/* Muted info box with an inline link (no work description yet). */
.planning-note-box[b-wftzrgsyp2] {
    padding: 12px 14px;
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    font-size: 14px;
    color: var(--st-muted);
}

.planning-link[b-wftzrgsyp2] { color: var(--st-primary); }

.planning-form-row[b-wftzrgsyp2] { display: flex; gap: 16px; }
.planning-hint[b-wftzrgsyp2] { font-size: 12px; color: var(--st-subtle); margin-bottom: 8px; }

/* Edit entry: header facts and the per-entry drawing toggles. */
.planning-entry-title[b-wftzrgsyp2] { font-weight: 600; font-size: 14px; color: var(--st-text); }
.planning-entry-address[b-wftzrgsyp2] { font-size: 13px; color: var(--st-muted); }

.planning-drawing[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
}

.planning-drawing.is-hidden[b-wftzrgsyp2] { opacity: 0.5; }

.planning-drawing-thumb[b-wftzrgsyp2] {
    width: 56px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--st-border);
    flex-shrink: 0;
}

.planning-drawing-thumb--empty[b-wftzrgsyp2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-bg-alt);
    color: var(--st-border-hover);
    border: none;
}

.planning-drawing-name[b-wftzrgsyp2] { font-size: 13px; color: var(--st-text); }

/* ── Route editor (draw modal) ─────────────────────────────────────────────── */

.mode-btn-count[b-wftzrgsyp2] { font-size: 10px; color: var(--st-warning); }

/* Stop mode tints the instruction banner amber. */
.map-instruction-banner.is-stop[b-wftzrgsyp2] { background: var(--st-warning); color: var(--st-white); }
.map-instruction-banner.is-stop .map-instruction-dot[b-wftzrgsyp2] { background: var(--st-white); }

.view-mode-banner-btn[b-wftzrgsyp2] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    color: var(--st-white);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    cursor: pointer;
    font-family: inherit;
}

.route-progress-icon[b-wftzrgsyp2] { color: var(--st-primary); flex-shrink: 0; }

/* Header row of the floating map panels (other drawings, road types). */
.map-panel-head[b-wftzrgsyp2] {
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--st-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.map-panel-head--tinted[b-wftzrgsyp2] { background: var(--st-bg); }

.map-panel-title[b-wftzrgsyp2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--st-subtle);
    text-transform: uppercase;
}

.map-panel-empty[b-wftzrgsyp2] { padding: 12px; font-size: 12px; color: var(--st-subtle); text-align: center; }
.map-panel-label[b-wftzrgsyp2] { flex: 1; font-size: 12px; color: var(--st-muted); }
.map-panel-meta[b-wftzrgsyp2] { font-size: 11px; color: var(--st-subtle); }

.overlay-legend-title[b-wftzrgsyp2] { font-weight: 600; color: var(--st-muted); margin-bottom: 6px; }
.overlay-legend-row[b-wftzrgsyp2] { display: flex; align-items: center; gap: 6px; color: var(--st-muted); margin-bottom: 3px; }
.overlay-legend-line[b-wftzrgsyp2] { width: 24px; height: 3px; border-radius: 2px; }
.overlay-legend-label[b-wftzrgsyp2] { font-size: 11px; }
.overlay-legend-row--current[b-wftzrgsyp2] { color: var(--st-primary); margin: 6px 0 0; }
.overlay-legend-row--current .overlay-legend-line[b-wftzrgsyp2] { background: var(--st-primary); }
.overlay-legend-row--current .overlay-legend-label[b-wftzrgsyp2] { font-size: 10px; font-weight: 600; }

.road-type-swatch--lane1[b-wftzrgsyp2] { background: var(--st-error); min-width: 12px; }
.road-type-swatch--lane2[b-wftzrgsyp2] { background: var(--st-success); min-width: 20px; }
.road-type-swatch--path[b-wftzrgsyp2] { background: var(--st-muted); min-width: 8px; }

.waypoint-grip[b-wftzrgsyp2] { color: var(--st-subtle); }

.waypoint-list-title--stops[b-wftzrgsyp2] { margin-top: 20px; display: flex; align-items: center; gap: 6px; }
.poi-title-icon[b-wftzrgsyp2] { color: var(--st-warning); }
.poi-empty[b-wftzrgsyp2] { font-size: 12px; color: var(--st-border-hover); text-align: center; padding: 12px 0; }
.poi-body[b-wftzrgsyp2] { flex: 1; min-width: 0; }

.poi-name[b-wftzrgsyp2] {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-text);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poi-name.is-editable[b-wftzrgsyp2] { cursor: pointer; }
.poi-street[b-wftzrgsyp2] { font-size: 10px; color: var(--st-subtle); }

.poi-name-input[b-wftzrgsyp2] {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--st-warning);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.poi-item[b-wftzrgsyp2]  .poi-remove-btn { padding: 2px; color: var(--st-border-hover); }
.poi-item[b-wftzrgsyp2]  .poi-remove-btn:hover { color: var(--st-error); }
.poi-item[b-wftzrgsyp2]  .poi-remove-btn .mud-icon-root { font-size: 14px; }

.draw-map-sidebar-footer[b-wftzrgsyp2]  .draw-clear-btn { color: var(--st-error); }

/* ── Fill mode (desktop) ──────────────────────────────────────────────────── */
/* The week plan fills the window under the filter card (design-system .st-fill): the team
   list scrolls inside .planning-board while the filters stay put, and the "no plan" / "no
   teams" card stretches to the bottom with its empty state centred. Team cards keep their
   natural height (they clip their own overflow, so a flex item would otherwise shrink). */
@media (min-width: 769px) {
    .planning-board[b-wftzrgsyp2] { overflow: auto; }
    .planning-board > *[b-wftzrgsyp2] { flex-shrink: 0; }
    .planning-board > .planning-empty[b-wftzrgsyp2] {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 0;
    }
}
/* /Pages/PriceRegulation.razor.rz.scp.css */
/* Price regulation: page-specific structure only. The card, toolbar, table, status pills and
   states are the shared st-* list building blocks in design-system.css. */

/* Rows without a percentage cannot be regulated: shown dimmed and not selectable. */
.pr-row--muted td[b-9p9icfo6it] { opacity: 0.6; }

.st-table th.pr-right[b-9p9icfo6it],
.st-table td.pr-right[b-9p9icfo6it] { text-align: right; }
.pr-nowrap[b-9p9icfo6it] { white-space: nowrap; }
/* Customer names stay on one line; the price preview column is the one that gives way. */
.pr-customer[b-9p9icfo6it] { min-width: 180px; }
.pr-customer .st-table__primary[b-9p9icfo6it] { white-space: nowrap; }

.pr-sub[b-9p9icfo6it] { font-size: 12px; color: var(--st-muted); }
.pr-muted[b-9p9icfo6it] { font-size: 12px; color: var(--st-muted); }

/* Per-row price preview: current, then projected new price for every price a run would touch */
.pr-prices[b-9p9icfo6it] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* The prices column has a fixed width so the table stays inside its card: a long price name
   is truncated (full name in its title tooltip) while the amounts always show. */
.st-table th.pr-prices-cell[b-9p9icfo6it],
.st-table td.pr-prices-cell[b-9p9icfo6it] { width: 280px; min-width: 240px; max-width: 280px; }

.pr-price-line[b-9p9icfo6it] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.pr-price-name[b-9p9icfo6it] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--st-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-price-old[b-9p9icfo6it],
.pr-price-new[b-9p9icfo6it] { flex-shrink: 0; }

.pr-price-old[b-9p9icfo6it] {
    margin-left: auto;
    color: var(--st-muted);
    text-decoration: line-through;
}

.pr-price-line[b-9p9icfo6it]  .pr-price-arrow { font-size: 14px; color: var(--st-subtle); }

.pr-price-new[b-9p9icfo6it] {
    font-weight: 700;
    color: var(--st-success-dark);
}
/* /Pages/PublicRequest.razor.rz.scp.css */
/* Page-specific structure for the public thread page; visual vocabulary comes from
   public-landing.css (.ql-*) and the shared st-thread classes in design-system.css. */

.pr-head[b-i66vm0k9oc] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-head-row[b-i66vm0k9oc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pr-head-title[b-i66vm0k9oc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--st-text-strong);
    min-width: 0;
}

.pr-head-ico[b-i66vm0k9oc] {
    display: inline-flex;
    color: var(--st-primary);
    flex-shrink: 0;
}

.pr-orig-msg[b-i66vm0k9oc] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--st-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.pr-orig-meta[b-i66vm0k9oc] {
    font-size: 12px;
    color: var(--st-subtle);
}

.pr-photos[b-i66vm0k9oc] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.pr-thread-card[b-i66vm0k9oc] {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pr-empty[b-i66vm0k9oc] {
    font-size: 13.5px;
    margin: 0;
}

.pr-composer[b-i66vm0k9oc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--st-border);
    padding-top: 14px;
}

.pr-captcha[b-i66vm0k9oc] {
    display: flex;
    justify-content: center;
}

/* ─── satisfaction rating (NPS) card ─── */
.pr-rate-card[b-i66vm0k9oc] { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.pr-rate-hint[b-i66vm0k9oc] { margin: 0; font-size: 13px; color: var(--st-muted); }
.pr-rate-row[b-i66vm0k9oc] { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-rate-btn[b-i66vm0k9oc] {
    min-width: 48px; height: 48px; padding: 0 8px;
    border: 1px solid var(--st-border); border-radius: 10px;
    background: var(--st-white); font-size: 16px; font-weight: 600; cursor: pointer;
    color: var(--st-text);
}
.pr-rate-btn.sel[b-i66vm0k9oc] { background: var(--st-primary); border-color: var(--st-primary); color: var(--st-white); }
.pr-rate-thanks[b-i66vm0k9oc] { display: flex; align-items: flex-start; gap: 12px; }
.pr-rate-badge[b-i66vm0k9oc] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 9999px; flex-shrink: 0;
    color: var(--st-white); font-weight: 700; font-size: 15px;
}
.pr-rate-badge.hi[b-i66vm0k9oc] { background: var(--st-success); }
.pr-rate-badge.mid[b-i66vm0k9oc] { background: var(--st-warning); }
.pr-rate-badge.lo[b-i66vm0k9oc] { background: var(--st-error); }
.pr-rate-thanks-title[b-i66vm0k9oc] { font-weight: 600; font-size: 14px; }
.pr-rate-thanks-comment[b-i66vm0k9oc] { font-size: 13px; color: var(--st-muted); margin-top: 2px; }
.pr-rate-captcha-note[b-i66vm0k9oc] { margin: 0; font-size: 12px; }
/* /Pages/Reports.razor.rz.scp.css */
/* Reports page: page-specific structure only. Colors, radii and spacing come from the
   --st-* design tokens; layout leans on MudBlazor's utility classes in the markup. */

.rp-card[b-x1mri3usmh] {
    background: var(--st-white);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    overflow: hidden;
}

/* Card title bar (approved design): semibold 14px title, divider under it, controls right. */
.rp-card-head[b-x1mri3usmh] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border);
    min-height: 52px;
}

.rp-card-title[b-x1mri3usmh] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.rp-card-body[b-x1mri3usmh] {
    padding: 16px;
}

/* Period controls: narrow enough to sit beside the section title, wide enough for
   "Last quarter" and a dd/MM/yyyy date. */
.rp-period[b-x1mri3usmh] {
    min-width: 150px;
    max-width: 190px;
}

.rp-date[b-x1mri3usmh] {
    min-width: 130px;
    max-width: 150px;
}

/* ── Count strip ───────────────────────────────────────────────────────── */

.rp-strip[b-x1mri3usmh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.rp-tile[b-x1mri3usmh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    background: var(--st-white);
    text-decoration: none;
    transition: border-color var(--st-duration-fast) var(--st-ease), background var(--st-duration-fast) var(--st-ease);
}

.rp-tile:hover[b-x1mri3usmh] {
    border-color: var(--st-primary);
    background: var(--st-bg);
}

.rp-tile-value[b-x1mri3usmh] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--st-text-strong);
}

.rp-tile-label[b-x1mri3usmh] {
    font-size: 12px;
    color: var(--st-muted);
}

.rp-tile--primary[b-x1mri3usmh] {
    background: var(--st-bg);
}

.rp-tile--warn .rp-tile-value[b-x1mri3usmh] {
    color: var(--st-error);
}

/* Loading placeholder tile: same box, no hover. */
.rp-tile--skeleton:hover[b-x1mri3usmh] {
    border-color: var(--st-border);
    background: var(--st-white);
}

.rp-skel-value[b-x1mri3usmh] {
    height: 20px;
    width: 40%;
    margin: 3px 0 2px;
}

/* ── Per-service-type table ────────────────────────────────────────────── */

/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.rp-table-scroll[b-x1mri3usmh] {
    overflow-x: auto;
}

.rp-table[b-x1mri3usmh] {
    min-width: 620px;
    background: transparent;
}

.rp-name[b-x1mri3usmh] {
    font-weight: 500;
    color: var(--st-text);
}

.rp-num[b-x1mri3usmh] {
    text-align: right;
    white-space: nowrap;
}

.rp-num-total[b-x1mri3usmh] {
    font-weight: 600;
}

.rp-link[b-x1mri3usmh] {
    color: var(--st-text);
    text-decoration: none;
    border-bottom: 1px dotted var(--st-border-hover);
}

.rp-link:hover[b-x1mri3usmh] {
    color: var(--st-primary);
    border-bottom-color: var(--st-primary);
}

.rp-link--warn[b-x1mri3usmh] {
    color: var(--st-error);
}

/* ── Quality inspections card ──────────────────────────────────────────── */

.rp-quality-icon[b-x1mri3usmh] {
    font-size: 22px;
    color: var(--st-subtle);
}

.rp-quality-text[b-x1mri3usmh] {
    flex: 1;
    min-width: 220px;
    font-size: 13px;
    color: var(--st-muted);
}
/* /Pages/ServiceAssets.razor.rz.scp.css */
/* Service assets: the page's own look lives in wwwroot/css/service-assets.css (global, because the
   map panels reach Mapbox chrome, MudBlazor component roots and portaled content). This file only
   holds what used to be inline styles on plain elements of this page. */
.sam-suggest-dot[b-82fkr8a9fw] { width: 8px; height: 8px; }
/* /Pages/Settings.razor.rz.scp.css */
/* Settings page — page-specific structural styles (inline-style migration).
   ::deep so rules also reach in-page MudBlazor roots. Shared vocab lives in design-system.css. */
.st-content[b-aycjew87kc]  .st-set-grid-01 { display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));align-items: start; }
.st-content[b-aycjew87kc]  .st-set-mw-02 { max-width: 640px; }
.st-content[b-aycjew87kc]  .st-set-box-03 { max-height: 80px;max-width: 200px;object-fit: contain;border: 1px solid var(--st-border);border-radius: var(--st-radius); }
.st-content[b-aycjew87kc]  .st-set-x-04 { grid-column: 1 / -1; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-05 { flex: 1 1 0;min-width: 280px;max-width: 33%;height: 100%; }
.st-content[b-aycjew87kc]  .st-set-box-07 { border: 1px solid var(--st-border);border-radius: var(--st-radius);max-height: 240px;overflow-y: auto; }
.st-content[b-aycjew87kc]  .st-set-mw-08 { max-width: 440px; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-09 { flex: 2 1 0;min-width: 320px; }
.st-content[b-aycjew87kc]  .st-set-mnw-10 { min-width: 64px; }
.st-content[b-aycjew87kc]  .st-set-mxw-14 { max-width: 220px; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-11 { flex: 1 1 360px;min-width: 320px; }
.st-content[b-aycjew87kc]  .st-set-grid-12 { display: grid;grid-template-columns: repeat(7,1fr); }
.st-content[b-aycjew87kc]  .st-set-fill-13 { width: 12px;height: 12px;border-radius: 3px;background: var(--st-primary-100); }
.st-content[b-aycjew87kc]  .st-set-fill-14 { width: 12px;height: 12px;border-radius: 3px;background: color-mix(in srgb, var(--st-success) 20%, var(--st-white)); }
.st-content[b-aycjew87kc]  .st-set-fill-15 { width: 12px;height: 12px;border-radius: 3px;background: var(--st-bg-alt); }
.st-content[b-aycjew87kc]  .st-set-flexbasis-16 { flex: 1 1 280px;min-width: 260px; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-17 { flex: 1 1 300px;min-width: 280px; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-18 { flex: 2;min-width: 140px; }
.st-content[b-aycjew87kc]  .st-set-flexbasis-19 { flex: 1;min-width: 130px; }
.st-content[b-aycjew87kc]  .st-set-x-21 { color: var(--st-success); }
.st-content[b-aycjew87kc]  .st-set-mw-27 { max-width: 160px; }
.st-content[b-aycjew87kc]  .st-set-x-33 { width: 16px;height: 16px; }
.st-content[b-aycjew87kc]  .st-set-x-36 { max-width: 600px;border-radius: 4px; }
.st-content[b-aycjew87kc]  .st-set-mw-37 { max-width: 200px; }
.st-content[b-aycjew87kc]  .st-set-box-38 { border: 1px solid var(--st-border);border-radius: var(--st-radius);min-width: 180px; }
.st-content[b-aycjew87kc]  .st-set-box-42 { border: 2px dashed var(--st-border);border-radius: var(--st-radius-md); }
.st-content[b-aycjew87kc]  .st-set-x-43 { color: var(--st-border-hover);display: block;margin: 0 auto 12px; }
.st-content[b-aycjew87kc]  .st-set-mnw-48 { min-width: 600px; }
.st-content[b-aycjew87kc]  .st-set-x-49 th { position: sticky;top: 0;z-index: 1; }
.st-content[b-aycjew87kc]  .st-set-x-50 { width: 50px; }
.st-content[b-aycjew87kc]  .st-set-x-51 { width: 60px; }
.st-content[b-aycjew87kc]  .st-set-x-52 { color: var(--st-success);display: block;margin: 0 auto 12px; }
.st-content[b-aycjew87kc]  .st-set-x-53 { color: var(--st-warning);display: block;margin: 0 auto 12px; }
.st-content[b-aycjew87kc]  .st-set-box-54 { border: 1px solid color-mix(in srgb, var(--st-error) 50%, var(--st-white));border-radius: var(--st-radius);max-height: 200px;overflow: auto; }

/* ── Design rollout (wave 4A): cards, tables and tiles on the settings tabs ── */
/* Small bordered box around a compact in-card table (holiday lists, import preview). */
.st-content[b-aycjew87kc]  .st-set-table-box { border: 1px solid var(--st-border);border-radius: var(--st-radius);overflow: auto; }
.st-content[b-aycjew87kc]  .st-set-x-47 { max-height: 500px; }
.st-content[b-aycjew87kc]  .st-set-table--dense th { height: 34px;padding: 0 12px; }
.st-content[b-aycjew87kc]  .st-set-table--dense td { height: 36px;padding: 6px 12px; }
.st-content[b-aycjew87kc]  .st-set-row--archived td:not(.st-table__actions) { opacity: 0.45; }
.st-content[b-aycjew87kc]  .st-set-row--invalid td { background: var(--st-error-light); }
.st-content[b-aycjew87kc]  .st-set-swatch { display: inline-block;width: 20px;height: 20px;border-radius: 4px;border: 1px solid var(--st-border);flex-shrink: 0; }
/* Holiday calendar cells. */
.st-content[b-aycjew87kc]  .st-set-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--st-radius); font-size: 13px; cursor: pointer;
  background: var(--st-white); color: var(--st-text);
}
.st-content[b-aycjew87kc]  .st-set-day.is-national { background: var(--st-primary-100); color: var(--st-primary-hover); }
.st-content[b-aycjew87kc]  .st-set-day.is-org { background: color-mix(in srgb, var(--st-success) 20%, var(--st-white)); color: var(--st-success-dark); }
.st-content[b-aycjew87kc]  .st-set-day.is-weekend { background: var(--st-bg-alt); color: var(--st-subtle); }
.st-content[b-aycjew87kc]  .st-set-day.is-selected { box-shadow: 0 0 0 2px var(--st-primary); }
.st-content[b-aycjew87kc]  .st-set-nat-row { display: flex;align-items: center;gap: 8px;padding: 2px 4px;border-radius: var(--st-radius-sm); }
.st-content[b-aycjew87kc]  .st-set-nat-row.is-selected { background: var(--st-primary-light); }
.st-content[b-aycjew87kc]  .st-set-nat-name { flex: 1; }
.st-content[b-aycjew87kc]  .st-set-nat-name.is-suppressed { color: var(--st-subtle);text-decoration: line-through; }
/* AI tab: default-language segmented control (content width), date range in the usage card's
   title bar, and the per-feature summary strip above the usage table. */
.st-content[b-aycjew87kc]  .st-set-seg { width: auto; }
.st-content[b-aycjew87kc]  .st-set-ai-date { width: 160px; }
.st-content[b-aycjew87kc]  .st-set-ai-date .mud-input-control { margin: 0; }
.st-content[b-aycjew87kc]  .st-set-ai-summary { border-bottom: 1px solid var(--st-border); }
/* Import tab: the preview counters. */
.st-content[b-aycjew87kc]  .st-set-count {
  display: flex; flex-direction: column; align-items: center; padding: 16px 24px; min-width: 100px;
  background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-radius-md);
}
.st-content[b-aycjew87kc]  .st-set-count--ok { border-color: var(--st-success); }
.st-content[b-aycjew87kc]  .st-set-count--error { border-color: var(--st-error); }
/* Notifications tab: rule rows inside the flush card. */
.st-content[b-aycjew87kc]  .st-set-rule { display: flex;align-items: center;gap: 12px;padding: 14px 16px; }
.st-content[b-aycjew87kc]  .st-set-rule + .st-set-rule { border-top: 1px solid var(--st-border-light); }
.st-content[b-aycjew87kc]  .st-set-rule--inactive > :not(:last-child) { opacity: 0.65; }
.st-content[b-aycjew87kc]  .st-set-skel-title { width: 40%; }

/* ── Settings round (2026-09-28): Business / Shifts / Salary tabs in the one .st-settings column ── */
/* Company card: logo block beside the company name. */
.st-content[b-aycjew87kc]  .st-set-company { display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: var(--st-space-5);align-items: start; }
/* Field grids: a little more row gap than .st-grid-2 so helper texts never touch the next field. */
.st-content[b-aycjew87kc]  .st-set-fields { row-gap: var(--st-space-4); }
/* Per-department "require location" checklist under its toggle row. */
.st-content[b-aycjew87kc]  .st-set-dept-list { border: 1px solid var(--st-border);border-radius: 10px;padding: 10px 14px 6px;margin-left: var(--st-space-5); }
.st-content[b-aycjew87kc]  .st-set-dept-list__head { display: flex;flex-direction: column;gap: 2px;margin-bottom: 4px; }
.st-content[b-aycjew87kc]  .st-set-dept-row { display: flex;align-items: center;gap: var(--st-space-2);min-height: 36px;border-top: 1px solid var(--st-border-light); }
/* Holidays: calendar beside the month totals, public list beside the organisation list. */
.st-content[b-aycjew87kc]  .st-set-hol-grid { display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: var(--st-space-6);align-items: stretch; }
.st-content[b-aycjew87kc]  .st-set-checklist { border: 1px solid var(--st-border);border-radius: var(--st-radius);padding: 4px 8px; }
.st-content[b-aycjew87kc]  .st-set-checklist .st-set-nat-row { min-height: 36px;border-top: 1px solid var(--st-border-light); }
.st-content[b-aycjew87kc]  .st-set-checklist .st-set-nat-row:first-child { border-top: 0; }
.st-content[b-aycjew87kc]  .st-set-hol-form { display: grid;grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);gap: var(--st-space-2) var(--st-space-3);padding: 12px;border: 1px solid var(--st-border);border-radius: var(--st-radius);background: var(--st-bg); }
.st-content[b-aycjew87kc]  .st-set-hol-form__foot { grid-column: 1 / -1;display: flex;align-items: center;justify-content: space-between;gap: var(--st-space-3); }
@media (max-width: 1100px) {
  .st-content[b-aycjew87kc]  .st-set-company,
  .st-content[b-aycjew87kc]  .st-set-hol-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Settings full width (2026-09-28): AI usage, Import and Notifications tabs ── */
/* AI tab: the three translation settings as equal blocks side by side (stacked on laptops). The
   auto-translate block holds a StToggleRow whose own border is dropped so the block is the frame. */
.st-content[b-aycjew87kc]  .st-set-ai-blocks { display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--st-space-4);align-items: stretch; }
.st-content[b-aycjew87kc]  .st-set-ai-block { display: flex;flex-direction: column;min-width: 0;padding: 14px 16px;border: 1px solid var(--st-border);border-radius: var(--st-radius-md); }
.st-content[b-aycjew87kc]  .st-set-ai-block--toggle { padding: 0; }
.st-content[b-aycjew87kc]  .st-set-ai-block--toggle > .st-toggle-row { flex: 1;align-items: flex-start;border: 0;background: none;padding: 14px 16px; }
.st-content[b-aycjew87kc]  .st-set-ai-block--toggle .st-toggle-row .info .t { font-size: 14px; }
.st-content[b-aycjew87kc]  .st-set-ai-block--toggle .st-toggle-row .info .d { margin-top: 2px;font-size: 14px;line-height: 1.43;color: var(--st-muted); }
@media (max-width: 1280px) { .st-content[b-aycjew87kc]  .st-set-ai-blocks { grid-template-columns: minmax(0, 1fr); } }
/* Column widths for the settings tables: the name/description column takes the rest. */
.st-content[b-aycjew87kc]  .st-set-col-date { width: 200px; }
.st-content[b-aycjew87kc]  .st-set-col-person { width: 220px; }
.st-content[b-aycjew87kc]  .st-set-col-num { width: 120px; }
.st-content[b-aycjew87kc]  .st-set-col-type { width: 200px; }
.st-content[b-aycjew87kc]  .st-set-col-count { width: 180px; }
/* Import tab: entity tiles fill the row evenly. */
.st-content[b-aycjew87kc]  .st-set-import-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Notifications tab: rule row = switch, title + schedule (grows), badges (right), row menu. */
.st-content[b-aycjew87kc]  .st-set-rule__main { flex: 1 1 auto;min-width: 0; }
.st-content[b-aycjew87kc]  .st-set-rule__badges { display: flex;align-items: center;justify-content: flex-end;flex-wrap: wrap;gap: 8px;flex-shrink: 0;max-width: 45%; }
.st-content[b-aycjew87kc]  .st-set-rule__msg { font-style: italic;max-width: 72ch; }
@media (max-width: 700px) {
  .st-content[b-aycjew87kc]  .st-set-rule { flex-wrap: wrap; }
  .st-content[b-aycjew87kc]  .st-set-rule__badges { order: 3;max-width: none;justify-content: flex-start;padding-left: 52px; }
}

/* ── Settings at full page width (2026-09-28): Business / Shifts / Salary column widths + holidays ── */
/* Table column widths so short lookup tables do not stretch their numbers across the card. */
.st-content[b-aycjew87kc]  .st-set-col-color { width: 150px; }
.st-content[b-aycjew87kc]  .st-set-col-num { width: 96px; }
.st-content[b-aycjew87kc]  .st-table th.st-ta-right { text-align: right; }
.st-content[b-aycjew87kc]  .st-set-col-kind { width: 150px; }
.st-content[b-aycjew87kc]  .st-set-applies { max-width: 200px; }
.st-content[b-aycjew87kc]  .st-set-col-id { width: 160px; }
.st-content[b-aycjew87kc]  .st-set-col-amount { width: 220px; }
.st-content[b-aycjew87kc]  .st-set-col-date { width: 160px; }
/* Holidays: each half is a column whose list box fills the row, so both halves end level. */
.st-content[b-aycjew87kc]  .st-set-hol-col { display: flex;flex-direction: column;min-width: 0; }
.st-content[b-aycjew87kc]  .st-set-hol-fill { flex: 1 1 auto; }
.st-content[b-aycjew87kc]  .st-set-hol-empty { display: flex;align-items: center;justify-content: center; }
/* Calendar days: rows share the column height (so the calendar ends level with the month table)
   instead of square cells, which grew to ~100px at full width. */
.st-content[b-aycjew87kc]  .st-set-day { aspect-ratio: auto;min-height: 40px; }
.st-content[b-aycjew87kc]  .st-set-cal-grid { flex: 1 1 auto;grid-template-rows: auto;grid-auto-rows: minmax(40px, 1fr); }
/* A toggle grid with an odd number of rows: the last row spans both columns (no empty slot). */
.st-content[b-aycjew87kc]  .st-set-toggles-fill > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* /Pages/ShiftScheduler.razor.rz.scp.css */
/* ShiftScheduler (/shifts, schedule tab): the week grid is a tool, so it keeps its own table
   structure (sticky employee column, day cells with shift cards). Toolbar, pager, loading and
   empty states come from the shared st-table-card vocabulary in design-system.css. */

/* Room for the fixed bulk action bar while shifts are selected. */
.st-content.sched-has-bulkbar[b-pff3rrpkzl] { padding-bottom: 72px; }

/* The toolbar holds the week navigator, search and two toggles: let it wrap instead of the
   table-card toolbar's single row. */
.sched-toolbar-main[b-pff3rrpkzl] { flex-wrap: wrap; column-gap: 12px; }
.sched-toolbar-main[b-pff3rrpkzl]  .st-search.sched-search { flex: 1; min-width: 180px; max-width: 320px; }

.sched-table[b-pff3rrpkzl] { width: 100%; border-collapse: collapse; min-width: 800px; }
.sched-table thead[b-pff3rrpkzl] { position: sticky; top: 0; z-index: 10; }
.sched-table thead th[b-pff3rrpkzl] {
    background: var(--st-bg);
    border-bottom: 1px solid var(--st-border);
    font-size: 12px; font-weight: 600; color: var(--st-muted);
}
.sched-th-employee[b-pff3rrpkzl] { padding: 10px 12px; text-align: left; min-width: 160px; }
.sched-th-day[b-pff3rrpkzl] { padding: 10px 8px; text-align: center; min-width: 100px; }
.sched-th-date[b-pff3rrpkzl] { font-size: 13px; color: var(--st-text); }
.sched-table thead th.sched-th-day.is-today[b-pff3rrpkzl] { font-weight: 700; color: var(--st-primary); }
.sched-th-day.is-today .sched-th-date[b-pff3rrpkzl] { color: var(--st-primary); }

/* Template group header row (group-by-template mode). */
.sched-group-row[b-pff3rrpkzl] { background: var(--st-bg-alt); border-bottom: 1px solid var(--st-border); }
.sched-group-row td[b-pff3rrpkzl] {
    padding: 8px 12px; position: sticky; left: 0;
    font-size: 12px; font-weight: 700; color: var(--st-muted);
}
.sched-group-row[b-pff3rrpkzl]  .sched-group-icon { font-size: 14px; vertical-align: text-bottom; margin-right: 4px; }
.sched-group-count[b-pff3rrpkzl] { color: var(--st-subtle); font-weight: 500; }

.sched-row[b-pff3rrpkzl] { border-bottom: 1px solid var(--st-border-light); }

/* Sticky employee column. The hover tint is .shift-employee-cell in app.css. */
.sched-employee-cell[b-pff3rrpkzl] { padding: 0; vertical-align: top; position: sticky; left: 0; background: var(--st-white); z-index: 5; }
.sched-employee[b-pff3rrpkzl] { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.sched-avatar[b-pff3rrpkzl] { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sched-avatar--initials[b-pff3rrpkzl] {
    background: var(--st-border); color: var(--st-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}
.sched-employee-name[b-pff3rrpkzl] { font-size: 13px; font-weight: 500; color: var(--st-text); }
.sched-employee-cell[b-pff3rrpkzl]  .sched-inline-icon { vertical-align: text-bottom; }

.sched-day-cell[b-pff3rrpkzl] { padding: 6px 4px; vertical-align: top; min-width: 100px; cursor: pointer; }
.add-shift-btn[b-pff3rrpkzl] {
    display: block; width: 100%; padding: 4px; margin-top: 0;
    background: none; border: 1px dashed var(--st-border-hover); border-radius: 4px;
    color: var(--st-border-hover); font-size: 12px; cursor: pointer;
    transition: color var(--st-duration-fast), border-color var(--st-duration-fast);
}
.add-shift-btn.has-shifts[b-pff3rrpkzl] { margin-top: 4px; }
.add-shift-btn:hover[b-pff3rrpkzl] { color: var(--st-primary); border-color: var(--st-primary); }

.sched-empty[b-pff3rrpkzl] { padding: 0; }

/* StTableSkeleton rows while the week loads. */
.sched-table[b-pff3rrpkzl]  tr[aria-hidden="true"] td { padding: 16px 12px; }
/* /Pages/SubcontractorOnboarding.razor.rz.scp.css */
/* Service-area map on the onboarding card. The fullscreen state (.st-map-fs-on, design-system.css)
   takes over position and height, so these only describe the collapsed map. */
.sub-map:not(.st-map-fs-on)[b-mj6wgyji3g] {
    position: relative;
}

.sub-map-body[b-mj6wgyji3g] {
    height: 300px;
    border-radius: 8px;
    border: 1px solid var(--st-border);
}

/* Right side: the draw controls occupy the top-left corner. */
.map-styletoggle-group.sub-map-styles[b-mj6wgyji3g] {
    left: auto;
    right: 10px;
    top: 50px;
}
/* /Pages/Tasks/CreateTaskDialog.razor.rz.scp.css */
/* ── Service-agreement lock ─────────────────────────────────────────── */
/* Banner on agreement-generated tasks that are still managed by their agreement */
.sa-locked-banner[b-rjkahmm1np] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #EEF3FF;
    border: 1px solid #D9E2F7;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.sa-locked-icon[b-rjkahmm1np] {
    flex-shrink: 0;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: #DCE6FD; color: var(--st-primary);
}
.sa-locked-text[b-rjkahmm1np] { flex: 1; min-width: 0; }
.sa-locked-title[b-rjkahmm1np] { font-size: 13.5px; font-weight: 700; color: var(--st-text); margin-bottom: 3px; }
.sa-locked-body[b-rjkahmm1np] { font-size: 12.5px; line-height: 1.5; color: #475569; }
.sa-locked-btn[b-rjkahmm1np] { flex-shrink: 0; align-self: center; white-space: nowrap; }

/* Note once a task has been disconnected and is edited individually */
.sa-detached-note[b-rjkahmm1np] {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--st-muted);
    background: var(--st-bg);
    border: 1px dashed var(--st-border-hover);
    border-radius: 9px;
    padding: 8px 12px;
    margin-bottom: 14px;
}

/* While locked the form stays visible for reference but is not interactive — except the
   schedule section (.sa-date-editable): moving the planned day is per-occurrence planning,
   not agreement content, so it remains allowed. */
.sa-form-locked .st-section[b-rjkahmm1np] { pointer-events: none; opacity: 0.55; user-select: none; }
.sa-form-locked .st-section.sa-date-editable[b-rjkahmm1np] { pointer-events: auto; opacity: 1; user-select: auto; }

/* ── Employee filter inside the workers card (shown for large pools) ────── */
.st-worker-search[b-rjkahmm1np] {
    width: 100%;
    border: 1px solid #E2E8F0; border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px; font-family: inherit;
    outline: none;
    background: #fff;
}
.st-worker-search:focus[b-rjkahmm1np] { border-color: #4A76F9; box-shadow: 0 0 0 3px rgba(74,118,249,0.12); }

/* ── Invoice details fold ───────────────────────────────────────────── */
/* A plain row button that opens the optional invoice fields; reads like a field-sized row. */
.ctd-fold[b-rjkahmm1np] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    background: var(--st-white);
    color: var(--st-muted);
    font-family: var(--st-font-body);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--st-duration-fast), background var(--st-duration-fast);
}

.ctd-fold:hover[b-rjkahmm1np] {
    border-color: var(--st-border-hover);
    background: var(--st-bg);
}

.ctd-fold__title[b-rjkahmm1np] {
    font-weight: 600;
    color: var(--st-text);
}

.ctd-fold__meta[b-rjkahmm1np] {
    font-size: 12px;
    color: var(--st-subtle);
}

/* Same rhythm as the surrounding .st-section. */
.ctd-fold__body[b-rjkahmm1np] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* /Pages/Tasks/TaskList.razor.rz.scp.css */
/* Tasks list (/tasks). The shared list building blocks (.st-table-card, .st-table, toolbar,
   filters, pager) live in wwwroot/css/design-system.css; only page-specific structure is here. */

/* "My drafts" card above the task table. In fill mode (.st-content--fill) every direct
   .st-table-card grows to fill the window; this one keeps its natural height instead, and
   its rows scroll once there are many, so the task table below keeps most of the room. */
.tl-drafts[b-rxvhyjre3x] {
    flex: 0 0 auto;
    min-height: 0;
    margin-bottom: 14px;
}

.tl-drafts .st-table-scroll[b-rxvhyjre3x] {
    max-height: 260px;
    overflow-y: auto;
}

.tl-drafts__actions[b-rxvhyjre3x] {
    width: 1%;
    white-space: nowrap;
}

/* Card title bar: semibold 14px title with a divider under it. */
.tl-card-title[b-rxvhyjre3x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--st-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--st-text);
}

.tl-card-title__count[b-rxvhyjre3x] {
    font-size: 12px;
    font-weight: 500;
    color: var(--st-muted);
}

/* An undated task: the missing date is itself the information. */
.tl-unscheduled[b-rxvhyjre3x] {
    color: var(--st-warning);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* Requester star rating next to a task title (its colour is data-driven, set inline). */
.tl-rating[b-rxvhyjre3x] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
}

/* Archived tasks, and closed requests: greyed out, still readable. */
.st-table tbody tr.tl-row--muted td[b-rxvhyjre3x] {
    background: var(--st-bg-alt);
    opacity: 0.6;
}

/* Service-agreements table: the "Planned" (upcoming task count) column. */
.sa-td-planned[b-rxvhyjre3x] {
    white-space: nowrap;
}

/* ── Planning tab ─────────────────────────────────────────────────────────── */
.tl-plan-toolbar[b-rxvhyjre3x] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.tl-plan-toolbar__team[b-rxvhyjre3x] {
    min-width: 160px;
    max-width: 220px;
}

.tl-plan-toolbar__status[b-rxvhyjre3x] {
    min-width: 110px;
    max-width: 160px;
}

/* Second sidebar section ("No team") under the first one. */
.tl-plan-split[b-rxvhyjre3x] {
    border-top: 1px solid var(--st-border-light);
}

/* Estimated time after a sidebar card's title. */
.tl-plan-est[b-rxvhyjre3x] {
    font-weight: 400;
    color: var(--st-subtle);
    margin-left: 4px;
}

/* Loading placeholders shaped like the sidebar cards and the calendar. */
.tl-plan-skeleton[b-rxvhyjre3x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
}

.tl-plan-skeleton__card[b-rxvhyjre3x] {
    padding: 10px 12px;
    border: 1px solid var(--st-border-light);
    border-radius: var(--st-radius);
}

.tl-plan-cal-skeleton[b-rxvhyjre3x] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 16px;
}

/* ── Requests tab ─────────────────────────────────────────────────────────── */
.tl-req-message[b-rxvhyjre3x] {
    max-width: 360px;
}

.tl-req-message__text[b-rxvhyjre3x] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 360px;
}

/* Planning tab in fill mode (desktop): the sidebar + calendar row takes the height left under
   the toolbar card (design-system .st-fill). The unscheduled list and the calendar each scroll
   inside their own card; the month navigation stays pinned at the top of the calendar. */
@media (min-width: 769px) {
    .sap-layout.st-fill[b-rxvhyjre3x] { flex-direction: row; min-height: 0; }
    .sap-layout.st-fill .sap-sidebar[b-rxvhyjre3x] { position: static; max-height: none; }
    .sap-layout.st-fill .sap-calendar[b-rxvhyjre3x] { overflow-y: auto; }
    .sap-layout.st-fill .sap-calendar .task-cal-grid[b-rxvhyjre3x] { flex: 1 0 auto; }
    .sap-layout.st-fill .task-cal-nav[b-rxvhyjre3x] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--st-white);
    }
    .sap-layout.st-fill .sap-calendar[b-rxvhyjre3x]  .st-empty-state { flex: 1 1 auto; justify-content: center; }
}

/* Dropping files on the task list opens the import dialog (setupFileDropZone in
   drop-file-forward.js toggles .is-file-over). The overlay is the shared .st-dropzone-overlay,
   hidden until files hover over the list. */
.tl-dropzone[b-rxvhyjre3x] {
    position: relative;
}

.tl-drop-overlay[b-rxvhyjre3x] {
    display: none;
}

.tl-dropzone.is-file-over .tl-drop-overlay[b-rxvhyjre3x] {
    display: flex;
}

.tl-drop-overlay[b-rxvhyjre3x]  .mud-icon-root {
    font-size: 40px;
    color: var(--st-primary);
}

/* Import button: count of documents ready for review, or a pulsing dot while some are read. */
.tl-import-badge[b-rxvhyjre3x] {
    display: inline-block;
    margin-left: 6px;
    min-width: 18px;
    padding: 0 6px;
    border-radius: var(--st-radius-full);
    background: var(--st-primary);
    color: var(--st-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.tl-import-dot[b-rxvhyjre3x] {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--st-primary);
    animation: tl-import-pulse-b-rxvhyjre3x 1.4s ease-in-out infinite;
}

@keyframes tl-import-pulse-b-rxvhyjre3x {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-import-dot[b-rxvhyjre3x] { animation: none; }
}