/* ── Fonts ── */
@font-face {
    font-family: 'Exo 2';
    src: url('/fonts/Exo2-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'Exo 2';
    src: url('/fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;

}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('/fonts/Saira-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Saira';
    src: url('/fonts/Saira-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: italic;
    font-display: swap;
}

/* Global Text Stylings */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: 0.04rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
    font-weight: 500;
}

h3 {
    font-weight: 500;
    font-size: 1.2rem;
}


/* ── Theme Variables ── */
:root {
    --bg-app:            #E4ECF5;
    --bg-surface:        #ffffff;
    --bg-surface-2:      #f9fafb;
    --bg-surface-3:      #f3f4f6;
    --bg-hover:          #f0f4f9;
    --border-color:      #e5e7eb;
    --border-color-2:    #f3f4f6;
    --text-primary:      #111827;
    --text-secondary:    #374151;
    --text-muted:        #4b5563;
    --text-faint:        #6b7280;
    --text-link:         #0077C5;
    --text-error:        #b91c1c;
    --text-on-accent:    #ffffff;
    --btn-accent:        #0077C5;
    --btn-accent-hover:  #005fa0;
    --btn-primary-bg:        #cc3e00;
    --btn-primary-bg-hover:  #a83400;
    --btn-primary-bg-active: #8a2900;
    --btn-primary-text:      #f9fafb;
    --btn-primary-glow:      rgba(204,62,0,.35);
    --success:           #15803d;
    --success-bg:        rgba(21,128,61,.12);
    --accent:            #0077C5;
    --accent-hover:      #005fa0;
    --accent-strong:     #005fa0;
    --accent-bg:         #deeef8;
    --toggle-on-bg:      #FF4E00;   /* switch ON track: brand orange in light, accent blue in dark */
    --water-green:       #15803d;
    --water-yellow:      #a16207;
    --water-orange:      #c2410c;
    --water-red:         #b91c1c;
    --sidebar-bg:        linear-gradient(180deg, #001a35 0%, #003e72 100%);
    --sidebar-text:      rgba(255,255,255,0.82);
    --table-head-bg:     #f9fafb;
    --table-row-bg:      #f9fafb;
    --table-row-hover:   #f0f4f9;
    --input-bg:          #ffffff;
    --input-border:      #d1d5db;
    --input-text:        #111827;
    --card-bg:           #f5f5f5;
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:         0 4px 16px rgba(0,0,0,0.10);
    --fluid-hero:        clamp(1.5rem, 4vw, 2.75rem);
    --chevron-mask:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E");

    /* ── Responsive sizing (mobile defaults, <650px) ── */
    --space-1:           0.25rem;
    --space-2:           0.5rem;
    --space-3:           0.75rem;
    --space-4:           1rem;
    --space-5:           1.5rem;
    --space-6:           2rem;
    --space-7:           3rem;

    --fs-small:          0.8125rem;
    --fs-body:           0.9375rem;
    --fs-h3:             1.125rem;
    --fs-h2:             1.375rem;
    --fs-h1:             1.75rem;

    --container-max:     100%;
    --container-pad:     1rem;
    --sidebar-w:         0;
    --grid-cols:         1;
}

[data-theme="dark"] {
    --bg-app:            #101826;
    --bg-surface:        #192538;
    --bg-surface-2:      #1d2d43;
    --bg-surface-3:      #22364f;
    --bg-hover:          #22364f;
    --border-color:      #28425f;
    --border-color-2:    #22364f;
    --text-primary:      #d4d4d4;
    --text-secondary:    #c5d0db;
    --text-muted:        #b0bfcc;
    --text-faint:        #8e99a8;
    --text-link:         #00b8f5;
    --text-error:        #f87171;
    --text-on-accent:    #ffffff;
    --accent:            #00b8f5;
    --accent-hover:      #0077C5;
    --accent-strong:     #00b8f5;
    --toggle-on-bg:      #0079C5;   /* switch ON track: blue in dark mode */
    --btn-accent:        #0079C5;
    --btn-accent-hover:  #005fa0;
    --btn-primary-bg:        #0079C5;
    --btn-primary-bg-hover:  #005fa0;
    --btn-primary-bg-active: #00497a;
    --btn-primary-text:      #ffffff;
    --btn-primary-glow:      rgba(0,121,197,.35);
    --success:           #4ade80;
    --success-bg:        rgba(74,222,128,.15);
    --accent-bg:         #102e46;
    --water-green:       #4ade80;
    --water-yellow:      #facc15;
    --water-orange:      #fb923c;
    --water-red:         #f87171;
    --sidebar-bg:        linear-gradient(180deg, #060e18 0%, #001a35 100%);
    --sidebar-text:      rgba(255,255,255,0.82);
    --table-head-bg:     #1d2d43;
    --table-row-bg:      #192538;
    --table-row-hover:   #22364f;
    --input-bg:          #1d2d43;
    --input-border:      #2e4a63;
    --input-text:        #e8edf3;
    --card-bg:           #1d2d43;
    --shadow-sm:         0 1px 3px rgba(0,0,0,0.30);
    --shadow-md:         0 4px 16px rgba(0,0,0,0.40);
}

/* ── Tablet (650-899px) ── */
@media (min-width: 650px) {
    :root {
        --space-5:           1.75rem;
        --space-6:           2.5rem;
        --space-7:           3.5rem;

        --fs-body:           1rem;
        --fs-h3:             1.25rem;
        --fs-h2:             1.625rem;
        --fs-h1:             2.25rem;

        --container-max:     92%;
        --container-pad:     1.5rem;
        --sidebar-w:         0;          /* still drawer at this width — change to e.g. 200px for a slim persistent sidebar */
        --grid-cols:         2;
    }
}

/* Breakpoint note: the tablet/desktop split is 900px. CSS custom properties can't be used inside @media conditions, so this literal (min-width: 900px / max-width: 899.98px) is repeated in every @media below and in the component .razor.css files — change them together. */
/* ── Desktop (≥900px) ── */
@media (min-width: 900px) {
    :root {
        --space-6:           3rem;
        --space-7:           4rem;

        --fs-h2:             1.75rem;
        --fs-h1:             2.75rem;

        --container-max:     1200px;
        --container-pad:     2rem;
        --sidebar-w:         275px;
        --grid-cols:         3;
    }
}

/* ── Mobile (<650px): page-header stacks vertically ── */
@media (max-width: 649.98px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .page-header-actions,
    .page-header-left {
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .search-box input {
        width: 100%;
    }
}

/* ── Mobile + tablet (<900px): tables become a vertical card list ── */
@media (max-width: 899.98px) {
    .table-scroll {
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .table-scroll table,
    .table-scroll tbody,
    .table-scroll tr {
        display: block;
        width: 100%;
    }

    .table-scroll td {
        display: block;
        padding: var(--space-1) 0;
        border: none;
        width: auto;
        background: transparent;     /* card is uniformly white; drop the per-cell grey row fill */
    }

    .table-scroll thead {
        display: none;
    }

    .table-scroll tbody tr {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: var(--space-3);
        margin-bottom: var(--space-3);
        box-shadow: var(--shadow-sm);
        position: relative;          /* anchor for the floating action icon */
    }

    /* Action icon sits at the right edge, vertically centered against the card height. */
    .table-scroll td.td-actions {
        position: absolute;
        top: 50%;
        right: var(--space-3);
        transform: translateY(-50%);
        width: auto;
        padding: 0;
        text-align: right;
        background: transparent;     /* override the sticky cell's solid fill */
    }

    .table-scroll td.table-footer {
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-2) 0;
        background: transparent;     /* end-of-list text sits on the page, not a card */
    }

    /* Touch: tapping a card row must not leave a lingering hover highlight on its cells. */
    .table-scroll tbody tr:hover td,
    .table-scroll tbody tr:active td {
        background: transparent;
    }

    /* Action icons never sit on a fill, even on tap (tap = :hover, which the global td.td-actions rule would otherwise re-fill). */
    .table-scroll tbody tr:hover td.td-actions,
    .table-scroll tbody tr:active td.td-actions,
    .table-scroll tbody tr:focus-within td.td-actions {
        background: transparent;
    }

    /* Dark theme pins the sticky-cell fill with !important for the desktop scroll case; cancel it in card mode so icons stay on the bare card, even on tap. */
    [data-theme="dark"] .table-scroll td.td-actions,
    [data-theme="dark"] .table-scroll tbody tr:hover td.td-actions,
    [data-theme="dark"] .table-scroll tbody tr:active td.td-actions,
    [data-theme="dark"] .table-scroll tbody tr:focus-within td.td-actions {
        background: transparent !important;
    }
}

/* ── Mobile + tablet (<900px): 40px minimum height for inputs, search & dropdowns
   so every interactive control is a comfortable touch target. ── */
@media (max-width: 899.98px) {
    .search-box,
    .form-input,
    .form-select,
    .form-control,
    .dp-field {
        min-height: 40px;
    }
}

/* ── Mobile + tablet (<900px): hide scrollbars on scrollable containers.
   The scroll still works — just no visible bar (matches native mobile UX where
   the indicator only flashes briefly during a swipe). Applied to the main page
   article, dialogs, and any in-page table-scroll. ── */
@media (max-width: 899.98px) {
    html,
    body,
    article,
    .dialog-body,
    .fixed-dialog-body,
    .sc-sensors-scroll,
    .sc-notes-list,
    .table-scroll {
        scrollbar-width: none;          /* Firefox */
        -ms-overflow-style: none;       /* legacy Edge / IE */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    article::-webkit-scrollbar,
    .dialog-body::-webkit-scrollbar,
    .fixed-dialog-body::-webkit-scrollbar,
    .sc-sensors-scroll::-webkit-scrollbar,
    .sc-notes-list::-webkit-scrollbar,
    .table-scroll::-webkit-scrollbar {
        display: none;                  /* WebKit (Chrome / Safari / new Edge) */
        width: 0;
        height: 0;
    }
}

/* ── Dashboard address cards (<900px)  */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.dcol-client) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        padding-right: 2.75rem;     
    }

    .table-scroll td.dcol-client {
        order: 1;
        flex: 0 0 auto;
        padding: 0;
        font-size: 16px;            
        font-weight: 600;
        color: var(--text-primary);
    }

    .table-scroll td.dcol-status {
        order: 2;
        flex: 0 1 auto;
        padding-left: 10px;
    }

    .table-scroll td.dcol-address {
        order: 3;
        flex: 1 0 100%;      
        padding: 0.15rem 0 0;
        font-size: 14px;        
    }

    /* End-of-list footer ("All addresses loaded") reads as muted text on the page,
       not as a card. */
    .table-scroll tbody tr:has(.table-footer) {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-bottom: 0;
    }
}

/* ── Dashboard address cards (tablet, 650–899px): name, address, badge inline, each sharing the row width as an equal third. The status column scales with the row (rather than a fixed width) and centers its badge with symmetric padding, so the badge sits centered in the gap between the address and the action icon. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.dcol-client) {
        align-items: center;
    }

    /* min-width:0 lets these two columns shrink/truncate when space is tight,
       so the squeeze comes out of the left — the badge keeps its column and its
       gap to the action icon instead of being pushed into it. */
    .table-scroll td.dcol-client {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-scroll td.dcol-address {
        order: 2;
        flex: 1 1 0;
        min-width: 0;
        padding: 0 0 0 0.75rem;
        border-left: 1px solid var(--border-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* min-width keeps the "N Sensors Need Attention" badge (nowrap, ~14rem) from
       being squeezed into the action icon on narrow tablets: the column can't drop
       below this floor, so the two min-width:0 columns on the left give up the room
       instead, preserving the gap to the icon. On wider tablets the equal-third
       grow wins and this floor is inactive. Badge is left-aligned so it hugs the
       address with a tighter left gutter, leaving more room toward the action icon. */
    .table-scroll td.dcol-status {
        order: 3;
        flex: 1 1 0;
        min-width: 14rem;
        padding: 0 1.5rem 0 0.5rem;
        text-align: left;
    }
}

/* ── Dashboard address cards (mobile, <650px): badge stacked above the name. ── */
@media (max-width: 649.98px) {
    .table-scroll td.dcol-status {
        order: 0;
        flex: 1 0 100%;
        padding: 0 0 0.25rem;
    }

    /* No badge → no empty row above the name. */
    .table-scroll td.dcol-status:not(:has(.badge-alerted)) {
        display: none;
    }
}

/* ── Dashboard table (desktop ≥900px): left-align the Status column so the badge
   sits closer to the address and leaves more room toward the action icon. ── */
@media (min-width: 900px) {
    .table-scroll thead th.dash-status-head {
        text-align: left;
    }

    .table-scroll td.dcol-status {
        text-align: left;
        padding-left: 0.75rem;
    }
}

/* ── Dashboard view (eye) icon: identical centred footprint on every breakpoint.
   Drops the global asymmetric icon padding and gives the button a fixed square so
   the eye lands at the same right inset (var(--space-3)) on desktop, tablet and
   mobile, vertically centred in its action area. ── */
.table-scroll tbody tr:has(.dcol-client) td.td-actions .btn-view {
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    gap: 0;
}

.table-scroll tbody tr:has(.dcol-client) td.td-actions .btn-view::before {
    padding-right: 0;
}

@media (min-width: 900px) {
    .table-scroll tbody tr:has(.dcol-client) td.td-actions {
        padding-left: 0;
        padding-right: var(--space-3);
    }
}

/* Customers icons (view + kebab) float top-right; transform:none so the kebab's fixed dropdown anchors to the viewport, not this (transformed) cell — otherwise it mis-positions off-screen. Matches the other list pages. */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.ccol-first) td.td-actions {
        top: var(--space-3);
        transform: none;
    }

    .table-scroll tbody tr:has(.ccol-first) td.td-actions .data-cell {
        gap: 0.6rem;
    }
}

/* ── Manage Customers cards (mobile, <650px) */
@media (max-width: 649.98px) {
    .table-scroll tbody tr:has(.ccol-first) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.3rem;
        padding-right: 4.25rem;     /* clear the two floating action icons */
    }

    .table-scroll td.ccol-first,
    .table-scroll td.ccol-last {
        order: 1;
        flex: 0 0 auto;
        padding: 0;
        font-size: 16px;            
        font-weight: 600;
        color: var(--text-primary);
    }

    .table-scroll tbody tr:has(.ccol-first) > td:not(.ccol-first):not(.ccol-last):not(.td-actions) {
        order: 2;
        flex: 1 0 100%;
    }
}

/* The inline last name (rendered inside the first cell) only surfaces in the tablet grid, where the name must be one fluid column so rows line up; desktop and mobile use the standalone last-name cell instead. */
.table-scroll td.ccol-first .ccol-first-last {
    display: none;
}

@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.ccol-first) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto auto;   /* name (first + inline last as one cell) and email are fluid so columns line up across rows; email gets the larger share since names run short but emails truncate; phone & actions hug their content */
        align-items: stretch;        /* equal-height columns so the dividers + centered icons span the row */
        column-gap: 0;
        padding-left: 20px;          /* 20px inner gutter each side (overrides the card's space-3 L/R; top/bottom stay space-3) */
        padding-right: 20px;
    }

    /* Show the inline last name so the name is one grid column; the standalone last-name cell drops out of the grid. */
    .table-scroll td.ccol-first .ccol-first-last {
        display: inline;
        padding-left: 0.3rem;        /* small gap so "First Last" reads as one name */
    }

    .table-scroll td.ccol-last {
        display: none;
    }

    .table-scroll td.ccol-first,
    .table-scroll td.ccol-last {
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /* fixed-width columns clip long names rather than widening the row */
    }

    /* Email & phone fill the rest evenly, each opened by a vertical divider. */
    .table-scroll td.ccol-email,
    .table-scroll td.ccol-phone {
        margin-left: var(--space-4);
        padding-left: var(--space-4);
        border-left: 1px solid var(--border-color);
        font-size: 14px;
        color: var(--text-secondary);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Phone hugs its number with 10px either side (auto track); it leaves the flex pool so the freed width goes to email. */
    .table-scroll td.ccol-phone {
        padding-left: 10px;
        padding-right: 10px;
        overflow: visible;
    }

    /* Section labels above each column — same treatment as the Addresses cards. */
    .table-scroll td.ccol-first::before,
    .table-scroll td.ccol-email::before,
    .table-scroll td.ccol-phone::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        font-size: var(--fs-small);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

    /* Blank label line over the last name so it baselines with the labelled columns. */
    .table-scroll td.ccol-last::before {
        content: "\00a0";
        display: block;
        margin-bottom: 0.25rem;
        font-size: var(--fs-small);
        font-weight: 600;
    }

    /* Icons inline as the last column, centered, divider on the left; negative margin-right pulls the ⋮ glyph's side-bearing flush so its visible edge matches the row's 20px left padding. */
    .table-scroll tbody tr:has(.ccol-first) td.td-actions {
        position: static;
        transform: none;
        justify-self: end;
        display: flex;
        align-items: center;
        margin-left: var(--space-3);
        padding-left: var(--space-3);
        margin-right: -0.5rem;
        border-left: 1px solid var(--border-color);
    }
}

/* Mobile-only badge cell. On desktop/tablet the Open Call badge lives in the
   status column; this dedicated cell only surfaces on the mobile card. */
.table-scroll td.acol-badge {
    display: none;
}

/* ── Addresses cards (<1000px — this table goes to cards 100px before the global 900px split) */
@media (max-width: 999.98px) {
    .table-scroll td.acol-name {
        padding: 0;
        font-size: 16px;             /* nickname reads as the card title */
        font-weight: 600;
        color: var(--text-primary);
    }
}

/* ── Addresses cards (tablet, 650–1000px): name, address and status as three
   equal labelled columns separated by full-height vertical dividers; contact is
   dropped (open the address to see it); action icons vertically centered. ── */
@media (min-width: 650px) and (max-width: 999.98px) {
    .table-scroll tbody tr:has(.acol-name) {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
        column-gap: 0.5rem;       /* half the gap; each divider's padding-left adds the other half (~1rem total) */
        align-items: stretch;     /* equal-height columns so the dividers span the full row */
    }

    .table-scroll td.acol-name {
        align-self: start;
    }

    /* Contact dropped on tablet — open the address (view icon) to see it. */
    .table-scroll td.acol-contact {
        display: none;
    }

    /* Action icons sit inline as the last column, centered on both axes in the
       full-height cell, with a divider on the left. The left padding matches the
       card's right padding so the icon group reads as centered in the strip
       (rather than jammed against the divider). */
    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        position: static;
        transform: none;
        justify-self: end;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: var(--space-4);
        border-left: 1px solid var(--border-color);
    }

    /* Each column opens with a vertical divider, centered in the inter-column gap. */
    .table-scroll td.acol-address,
    .table-scroll td.acol-status {
        padding: 0 0 0 0.5rem;
        border-left: 1px solid var(--border-color);
    }

    /* Address stays exactly two rows: street line + city/state/zip line, each
       clipped with an ellipsis rather than wrapping onto extra rows. */
    .table-scroll td.acol-address > div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* A little more breathing room between the STATUS label and its content. */
    .table-scroll td.acol-status::before {
        margin-bottom: 0.5rem;
    }

    /* Center the status indicators (and their label) within the column. */
    .table-scroll td.acol-status {
        text-align: center;
    }

    .table-scroll td.acol-status .data-cell {
        justify-content: center;
    }

    /* "No-container" column header: a plain label above each section,
       styled like the desktop table head. Includes the name column so the
       inline row reads consistently. */
    .table-scroll td.acol-name::before,
    .table-scroll td.acol-address::before,
    .table-scroll td.acol-status::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.25rem;
        font-size: var(--fs-small);  /* 13px — the text-size floor */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }
}

/* Addresses cards (mobile): row 1 is the Open Call badge with the nickname to
   its right (both sharing the line with the floating action icons); then the
   sensor status, then the address. A long name shrinks to fit the remaining
   width (acdwFitNames in helpers.js) rather than wrapping or clipping the icons. */
@media (max-width: 649.98px) {
    .table-scroll tbody tr:has(.acol-name) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.6rem;
        padding-right: 4.25rem;      /* clear the two floating action icons */
    }

    /* Row 1, left — Open Call badge, inline with the name. Collapses entirely
       when there's no badge so the name takes the whole line. */
    .table-scroll td.acol-badge {
        order: 1;
        display: flex;
        flex: 0 0 auto;
        padding: 0;
    }

    .table-scroll td.acol-badge:empty {
        display: none;
    }

    /* The badge inside the status column is replaced by the row-1 cell here. */
    .table-scroll td.acol-status .badge-open-call {
        display: none;
    }

    /* Row 1, right — nickname. Takes the remaining width; shrinks to one line
       (JS) and clips with an ellipsis as the no-JS fallback. */
    .table-scroll td.acol-name {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
    }

    /* Row 2 — sensor quantity and status. */
    .table-scroll td.acol-status {
        order: 3;
        flex: 1 0 100%;
        padding: 0;
    }

    /* Row 3 — full-width address. */
    .table-scroll td.acol-address {
        order: 4;
        flex: 1 0 100%;
        padding: 0;
        min-width: 0;
    }

    /* Action icons float top-right of the card (per the row-icon convention). */
    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        top: var(--space-3);
        right: var(--space-3);
        transform: none;
    }

    /* Contact hidden on mobile — open the address (view icon) to see its phone. */
    .table-scroll td.acol-contact {
        display: none;
    }
}

/* ── Addresses cards (900–999px): the desktop table is too tight below 1000px, so this
   table keeps the tablet card layout; these rules replicate the generic <900px card base
   for this table only (:where keeps specificity identical to the generic base so the
   tablet-grid per-cell rules above still win). ── */
@media (min-width: 900px) and (max-width: 999.98px) {
    .table-scroll:has(td.acol-name) {
        border: none;
        background: transparent;
        border-radius: 0;
    }

    :where(.table-scroll:has(td.acol-name)) table,
    :where(.table-scroll:has(td.acol-name)) tbody {
        display: block;
        width: 100%;
    }

    :where(.table-scroll:has(td.acol-name)) tr {
        display: block;
        width: 100%;
    }

    :where(.table-scroll:has(td.acol-name)) thead {
        display: none;
    }

    .table-scroll tbody tr:has(.acol-name) {
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: var(--space-3);
        margin-bottom: var(--space-3);
        box-shadow: var(--shadow-sm);
        position: relative;
    }

    .table-scroll :where(tr:has(.acol-name)) td {
        display: block;
        padding: var(--space-1) 0;
        border: none;
        width: auto;
        background: transparent;
    }

    .table-scroll:has(td.acol-name) td.table-footer {
        display: block;
        width: auto;
        border: none;
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-2) 0;
        background: transparent;
    }

    .table-scroll:has(td.acol-name) tbody tr:hover td {
        background: transparent;
    }

    /* Action icons sit on the bare card, never on the sticky cell's fill (mirrors the generic <900 card rules). */
    .table-scroll:has(td.acol-name) td.td-actions,
    .table-scroll:has(td.acol-name) tbody tr:hover td.td-actions,
    .table-scroll:has(td.acol-name) tbody tr:active td.td-actions,
    .table-scroll:has(td.acol-name) tbody tr:focus-within td.td-actions {
        background: transparent;
    }

    [data-theme="dark"] .table-scroll:has(td.acol-name) td.td-actions,
    [data-theme="dark"] .table-scroll:has(td.acol-name) tbody tr:hover td.td-actions,
    [data-theme="dark"] .table-scroll:has(td.acol-name) tbody tr:active td.td-actions,
    [data-theme="dark"] .table-scroll:has(td.acol-name) tbody tr:focus-within td.td-actions {
        background: transparent !important;
    }

    /* The desktop sticky rule's width:1% leaks into this band (the <900 card base that
       resets it stops at 899.98px, and the :where() td reset above can't outrank it);
       the 17px-wide cell spilled its icons over the divider and past the card edge. */
    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        width: auto;
    }

    /* Name and status hug their content (labels included); address absorbs the slack. */
    .table-scroll tbody tr:has(.acol-name) {
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) auto;
    }

    .table-scroll td.acol-name {
        max-width: 11rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Alerted/clear status never wraps — dot, count and text stay on one row at every breakpoint. */
.table-scroll td.acol-status .data-cell {
    white-space: nowrap;
}

/* ── Addresses table (desktop ≥1000px): contact name + phone each stay on one line, trim
   the name column to hand that width to the contact column, and pull the action icons in
   so the row's right inset matches its left (the ⋮ glyph centers in its button, so it
   otherwise floats further inside the cell padding than the name does on the left). ── */
@media (min-width: 1000px) {
    .table-scroll td.acol-contact > div {
        white-space: nowrap;
    }

    .table-scroll td.acol-name {
        padding-right: 0.5rem;
    }

    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        padding-right: 1rem;
    }
}

/* ── Addresses header contact strip (desktop ≥900px): h3-size email + phone that never
   truncate. The heading wrapper dissolves (display:contents) so the strip escapes its
   half-width heading cell onto its own full-width header row. ── */
@media (min-width: 900px) {
    .detail-header:has(.addresses-contact-strip) {
        grid-template-areas:
            "back     back"
            "heading  actions"
            "strip    strip"
            "divider  divider";
    }

    .detail-header:has(.addresses-contact-strip) > .detail-header-heading {
        display: contents;
    }

    .detail-header:has(.addresses-contact-strip) > .detail-header-heading > h2 {
        grid-area: heading;
        padding-left: 2.5rem;   /* the dissolved wrapper's indent */
        margin: 0;
        min-width: 0;
    }

    /* Specificity: must beat the page's scoped `.detail-header-heading .info-strip` zero-padding rule. */
    .page-content .detail-header .detail-header-heading > .info-strip.addresses-contact-strip {
        grid-area: strip;
        padding: 0 0 0 2.5rem;
        margin: 0;
    }

    .addresses-contact-strip .info-strip-item {
        font-size: var(--fs-h3, 1.25rem);
    }

    .addresses-contact-strip .info-strip-item span:not(.info-label) {
        white-space: nowrap;
    }
}

/* Address-sensor cards (<900px): name + water level inline, then labelled Battery / Last Check-in rows. `.scol-*` classes live on the cells in AddressSensorDetails.razor. */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.scol-name) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.6rem;
        row-gap: 0.4rem;
        padding-right: 4.25rem;      /* clear the two floating action icons */
    }

    /* Row 1 — sensor name (card title) + water level inline. */
    .table-scroll td.scol-name {
        order: 1;
        flex: 0 1 auto;
        min-width: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .table-scroll td.scol-water {
        order: 2;
        flex: 0 1 auto;
        padding: 0;
        font-size: 14px;
    }

    /* Rows 2 & 3 — labelled lines, each full width. */
    .table-scroll td.scol-battery,
    .table-scroll td.scol-connect {
        flex: 1 0 100%;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 14px;
        color: var(--text-secondary);
    }

    .table-scroll td.scol-battery { order: 3; }
    .table-scroll td.scol-connect { order: 4; }

    .table-scroll td.scol-battery::before,
    .table-scroll td.scol-connect::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
    }

    /* Hide the labelled rows when the sensor has never checked in (no data). */
    .table-scroll td.scol-hide {
        display: none;
    }

    /* Action icons float top-right of the card (per the row-icon convention). */
    .table-scroll tbody tr:has(.scol-name) td.td-actions {
        top: var(--space-3);
        right: var(--space-3);
        transform: none;
    }

    /* Comfortable gap between the two action icons. */
    .table-scroll tbody tr:has(.scol-name) td.td-actions .data-cell {
        gap: 0.6rem;
    }
}

/* ── Address-sensor cards (tablet, 650–899px): keep the shared <900 flex row — sensor name
   with the water level inline beside it — then a full-width break drops battery + last
   check-in onto their own row, battery on a fixed 8rem column so the divider and
   "Last Check-in" line up across every card. Names shouldn't run long; if name + water
   ever reach within 20px of the logs icon they wrap. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.scol-name) {
        row-gap: 0;
        /* logs icon offset (--space-3) + its 25px width + a 20px gap before name/water wrap */
        padding-right: calc(var(--space-3) + 25px + 20px);
    }

    /* Full-width break + gap: forces battery + last check-in onto the row below. */
    .table-scroll tbody tr:has(.scol-name)::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        height: 0.5rem;
    }

    .table-scroll td.scol-battery {
        order: 4;
        flex: 0 0 8rem;
    }

    .table-scroll td.scol-connect {
        order: 5;
        flex: 1 1 auto;
        border-left: 1px solid var(--border-color);
        padding-left: 0.75rem;
        white-space: nowrap;
    }
}

/* ── Manage Employees header (mobile, <650px): centered title, divider, full-width stacked buttons ── */
.employees-page .page-header-divider {
    display: none;                       /* only shown in the stacked mobile header below */
}

@media (max-width: 649.98px) {
    .employees-page .page-header {
        gap: 0;                          /* spacing handled by the divider + button margins */
    }

    .employees-page .page-header-left {
        justify-content: center;
        text-align: center;
    }

    .employees-page .page-header-divider {
        display: block;
        width: 95%;
        height: 2px;
        margin: var(--space-4) auto;     /* 1rem above + below, centered */
        border: none;
        border-radius: 1px;
        background: linear-gradient(to right,
            transparent 0%,
            var(--accent) 20%,
            var(--accent) 80%,
            transparent 100%);           /* blue gradient — matches the shared <Divider/> */
    }

    .employees-page .page-header-actions {
        flex-direction: column-reverse;  /* Invitations (2nd in DOM) on top */
        align-items: stretch;
        gap: var(--space-2);
        margin-bottom: var(--space-4);   /* 1rem below the buttons */
    }

    .employees-page .page-header-actions .btn-primary {
        width: 100%;
    }
}

/* ── Manage Employees accordion rows (<1000px): chevron + First Last + Role inline,
   kebab far right; tapping the row reveals email | phone beneath. Cuts over at 1000px
   (not the usual 900) because the expanded sidenav leaves the full table no room at
   small desktop and horizontal scroll is not allowed. ── */
@media (max-width: 999.98px) {
    .employees-page .table-scroll {
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .employees-page .table-scroll table,
    .employees-page .table-scroll tbody {
        display: block;
        width: 100%;
    }

    .employees-page .table-scroll thead {
        display: none;
    }

    .employees-page .table-scroll tbody tr {
        display: grid;
        grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        grid-template-areas: "chevron first last role kebab";
        column-gap: 0.4rem;
        row-gap: 0.5rem;
        align-items: center;
        min-height: 50px;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: var(--space-3);
        margin-bottom: var(--space-3);
        box-shadow: var(--shadow-sm);
        cursor: pointer;
    }

    .employees-page .table-scroll tbody tr.employee-row-expanded {
        grid-template-areas:
            "chevron first last role kebab"
            "details details details details details";
    }

    /* Chevron signals the row expands: down collapsed, up open (global --chevron-mask). */
    .employees-page .table-scroll tbody tr::before {
        content: "";
        grid-area: chevron;
        width: 0.85rem;
        height: 0.85rem;
        margin-right: 0.35rem;
        background-color: var(--text-muted);
        -webkit-mask: var(--chevron-mask) center / contain no-repeat;
        mask: var(--chevron-mask) center / contain no-repeat;
        transform: rotate(0deg);
        transition: transform 0.2s ease;
    }

    .employees-page .table-scroll tbody tr.employee-row-expanded::before {
        transform: rotate(180deg);
    }

    .employees-page .table-scroll tbody tr:has(.table-footer) {
        display: block;
        text-align: center;
        cursor: default;
    }

    .employees-page .table-scroll tbody tr:has(.table-footer)::before {
        content: none;
    }

    .employees-page .table-scroll tbody tr > td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0;
        border: none;
        background: transparent;
    }

    .employees-page .table-scroll td.ecol-first { grid-area: first; }
    .employees-page .table-scroll td.ecol-last  { grid-area: last; }

    .employees-page .table-scroll td.ecol-first,
    .employees-page .table-scroll td.ecol-last {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .employees-page .table-scroll td.ecol-role {
        grid-area: role;
        margin-left: 0.5rem;
        font-size: 14px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .employees-page .table-scroll td.ecol-role::before {
        content: "Role : ";
        font-weight: 600;
        color: var(--text-muted);
    }

    /* Raw table columns stay hidden — email/phone render in the details row instead. */
    .employees-page .table-scroll td.ecol-email,
    .employees-page .table-scroll td.ecol-phone,
    .employees-page .table-scroll tbody tr:not(.employee-row-expanded) > td.ecol-details {
        display: none;
    }

    .employees-page .table-scroll tbody tr.employee-row-expanded > td.ecol-details {
        grid-area: details;
        display: flex;
        align-items: baseline;
        min-width: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    .ecol-details-email {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ecol-details-phone {
        flex-shrink: 0;
        margin-left: 0.75rem;
        padding-left: 0.75rem;
        border-left: 1px solid var(--border-color);
        white-space: nowrap;
    }

    .employees-page .table-scroll tbody tr > td.td-actions {
        grid-area: kebab;
        position: static;
        transform: none;
        width: auto;
        margin-left: 0.35rem;
        text-align: right;
        background: transparent;
    }

    .employees-page .table-scroll td.table-footer {
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-2) 0;
        background: transparent;
    }

    /* Tapping a row (to expand) must not tint it — also covers 900-999px where the
       generic <900 card resets don't reach. */
    .employees-page .table-scroll tbody tr:hover td,
    .employees-page .table-scroll tbody tr:active td,
    .employees-page .table-scroll tbody tr:hover td.td-actions {
        background: transparent;
    }

    [data-theme="dark"] .employees-page .table-scroll td.td-actions,
    [data-theme="dark"] .employees-page .table-scroll tbody tr:hover td.td-actions,
    [data-theme="dark"] .employees-page .table-scroll tbody tr:active td.td-actions,
    [data-theme="dark"] .employees-page .table-scroll tbody tr:focus-within td.td-actions {
        background: transparent !important;
    }
}

/* ── Manage Employees table (desktop, ≥1000px): first/last/role/email/phone all on one
   line; text scales down with the viewport (13px floor); phone absorbs the trailing
   slack but its nowrap content is a hard floor (it never truncates). Squeeze order:
   the inter-column gap yields first (~2rem shrinking to ~1rem as the viewport narrows),
   then email truncates (fluid cap — generous when there's room), then <1000px drops
   to the card view. Row edges stay 0.625rem. ── */
@media (min-width: 1000px) {
    .employees-page .table-scroll thead th {
        font-size: clamp(0.8125rem, 0.9vw + 0.1rem, 0.9rem);
        white-space: nowrap;
    }

    .employees-page .table-scroll tbody td {
        font-size: clamp(0.8125rem, 1vw + 0.1rem, 1rem);
        white-space: nowrap;
    }

    /* Per-side = half the gap; the gap steps up with the viewport:
       1.5rem at 1000px, 3rem at 1200px, 5rem at 1500px+ (overrides below). */
    .employees-page .table-scroll thead th,
    .employees-page .table-scroll tbody td {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .employees-page .table-scroll thead th:first-child,
    .employees-page .table-scroll tbody td:first-child {
        padding-left: 0.625rem;
    }

    .employees-page .table-scroll thead th:last-child,
    .employees-page .table-scroll tbody td:last-child {
        padding-right: 0.625rem;
    }

    /* Fluid cap: ~30ch at a 1000px viewport, growing fast with width — real-world
       emails never hit it; only genuinely oversized ones ellipsize under squeeze. */
    .employees-page .table-scroll td.ecol-email {
        max-width: max(11rem, 50vw - 19rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .employees-page .table-scroll td.ecol-phone {
        width: 100%;
    }

    .employees-page .table-scroll td.ecol-details {
        display: none;
    }
}

/* Employees column-gap steps (per-side = half the gap; edges stay 0.625rem). */
@media (min-width: 1200px) {
    .employees-page .table-scroll thead th,
    .employees-page .table-scroll tbody td {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1500px) {
    .employees-page .table-scroll thead th,
    .employees-page .table-scroll tbody td {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* ── Service Calls cards (My Calls / All Calls, <900px): priority badge first,
   then name + phone inline, then address last. `.sccol-*` classes live on the
   cells in ServiceCalls.razor. ── */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.sccol-priority) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.5rem;
        row-gap: 0.3rem;
        padding-right: 4.25rem;          /* clear the two floating action icons */
    }

    /* Row 1 — priority badge, full width. */
    .table-scroll td.sccol-priority {
        order: 1;
        flex: 1 0 100%;
        padding: 0;
    }

    /* Row 2 — customer name (card title) + phone inline. */
    .table-scroll td.sccol-name {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .table-scroll td.sccol-phone {
        order: 3;
        flex: 0 1 auto;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* Row 3 — address, full width. */
    .table-scroll td.sccol-address {
        order: 4;
        flex: 1 0 100%;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* Action icons float top-right of the card (per the row-icon convention). */
    .table-scroll tbody tr:has(.sccol-priority) td.td-actions {
        top: var(--space-3);
        right: var(--space-3);
        transform: none;
    }

    .table-scroll tbody tr:has(.sccol-priority) td.td-actions .data-cell {
        gap: 0.6rem;
    }
}

/* ── Service Calls cards (tablet, 650–899px): priority badge in its own left-most
   column, then name (+ phone under it), then the address — vertically centered in
   the row. The badge sits on the far left, clear of the floating action icons on
   the right. Columns are split by full-height vertical dividers. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.sccol-priority) {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 3fr) minmax(0, 6fr);   /* priority (fixed — fits the widest badge so names align across rows) / name / address */
        align-items: center;
        column-gap: 0;
        row-gap: 0.15rem;
    }

    /* Action icons vertically centered against the card height. */
    .table-scroll tbody tr:has(.sccol-priority) td.td-actions {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Left column — priority badge, vertically centered, divider on its right. */
    .table-scroll td.sccol-priority {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        padding: 0 0.75rem 0 0;
        border-right: 1px solid var(--border-color);
    }

    /* Middle column — name then phone stacked, meeting at the vertical center. */
    .table-scroll td.sccol-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        padding-left: 0.75rem;
    }

    .table-scroll td.sccol-phone {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        padding-left: 0.75rem;
    }

    /* Right column — address, vertically centered, opened by a full-height divider. */
    .table-scroll td.sccol-address {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0.75rem;
        border-left: 1px solid var(--border-color);
    }
}

/* ── Service Calls table (desktop ≥900px): tighten the gaps around the priority
   badge (address↔priority and priority↔name) to free width for the customer name
   and phone. Phone never wraps. Same goal as the landscape-tablet / small-desktop
   pass — keep all columns on one line without overflow. ── */
@media (min-width: 900px) {
    .table-scroll td.sccol-address {
        padding-right: 0.5rem;
    }

    .table-scroll td.sccol-priority {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table-scroll td.sccol-name {
        padding-left: 0.5rem;
    }

    .table-scroll td.sccol-phone {
        white-space: nowrap;
    }
}

/* ── Needy addresses cards (<900px): alerts badge + customer name on row 1,
   phone on row 2, address on row 3. `.nccol-*` classes live on the cells in
   ServiceCalls.razor; mirrors the My Calls card treatment above. ── */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.nccol-alerts) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.5rem;
        row-gap: 0.3rem;
        padding-right: 5.75rem;          /* clear the floating Create button */
    }

    /* Row 1 — alerts badge + customer name (card title) inline. */
    .table-scroll td.nccol-alerts {
        order: 1;
        flex: 0 0 auto;
        padding: 0;
    }

    .table-scroll td.nccol-name {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        padding: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    /* Row 2 — customer phone, full width. */
    .table-scroll td.nccol-phone {
        order: 3;
        flex: 1 0 100%;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* Row 3 — address, full width (its own two-line block). */
    .table-scroll td.nccol-address {
        order: 4;
        flex: 1 0 100%;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* Create button floats top-right of the card (matches the My Calls cards). */
    .table-scroll tbody tr:has(.nccol-alerts) td.td-actions {
        top: var(--space-3);
        transform: none;
    }
}

/* ── Needy cards (tablet 650–899px): match the My Calls / All Calls columnar grid so all three tabs read the same on tablet. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.nccol-alerts) {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 3fr) minmax(0, 6fr);
        align-items: center;
        column-gap: 0;
        row-gap: 0.15rem;
    }

    .table-scroll tbody tr:has(.nccol-alerts) td.td-actions {
        top: 50%;
        transform: translateY(-50%);
    }

    .table-scroll td.nccol-alerts {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
        padding: 0 0.75rem 0 0;
        border-right: 1px solid var(--border-color);
    }

    .table-scroll td.nccol-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        padding-left: 0.75rem;
    }

    .table-scroll td.nccol-phone {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        padding-left: 0.75rem;
    }

    .table-scroll td.nccol-address {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 0.75rem;
        border-left: 1px solid var(--border-color);
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    font-family: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 0.15rem + 0.7vw, 1.15rem);
    letter-spacing: 0.06rem;
    margin: 0px;
    background-color: var(--bg-app);
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
    letter-spacing: 0.04rem;
}

a, .btn-link {
    color: var(--text-link);
}

::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

table {
    width: 100%;
    border-collapse: collapse;
}

    table thead th {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: 0.5rem 1rem;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        text-align: left;
        background: var(--table-head-bg);
        position: sticky;
        top: 0;
        z-index: 700;
    }

    table thead th.td-actions {
        position: sticky;
        top: 0;
        right: 0;
        z-index: 701;
        background: var(--table-head-bg);
    }

    table tbody td {
        padding: 0.5rem 1.4rem;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
        background-color: var(--table-row-bg);
        color: var(--text-secondary);
    }

    table tbody tr:last-child td {
        border-bottom: none;
    }

    table tbody tr:hover td {
        background-color: var(--table-row-hover);
    }

    table tbody tr:hover td.td-actions,
    table tbody tr:hover .td-actions {
        background-color: var(--table-row-hover);
    }

.table-scroll {
    flex: 1;
    min-height: 150px;
    overflow-y: auto;
    border-radius: 0.375rem;
    margin-top: 1;
}

.page-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Page load fade-in ── */
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

article {
    padding: 20px;
}

article,
.login-page {
    /* No `both`/`forwards` fill: a filling opacity animation leaves <article> a
       PERMANENT stacking context in Chrome, which traps every in-page dialog
       overlay (z≥1000) below the root-level sidebar pull-tab (z800). Default fill
       lets the context dissolve once the fade ends so dialogs paint above the tab. */
    animation: page-fade-in 1.5s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    article,
    .login-page {
        animation: none;
    }
}
.btn-primary,
.btn-secondary,
.btn-secondary-view,
.btn-cancel,
.btn-critical {
    letter-spacing: 0.05em;
    font-size: 1.15rem;

}

.btn-primary {
    color: var(--btn-primary-text);
    background-color: var(--btn-primary-bg);
    /* explicit solid border: the UA default 2px outset button border paints a dark 3D edge that reads as a resting drop shadow */
    border: 1px solid var(--btn-primary-bg);
    border-radius: 0.375rem;
    padding: 0.5rem 1.1rem;
    font-weight: 550;
    cursor: pointer;
}

    .btn-primary:hover {
        background-color: var(--btn-primary-bg-hover);
        border-color: var(--btn-primary-bg-hover);
    }

/* Buttons: ring only for keyboard focus (no shadow on mouse click); inputs keep theirs */
.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #0077C5;
}

.btn-critical {
    background-color: #991b1b;
    border: 1px solid #991b1b;
    border-radius: 0.375rem;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    color: #f9fafb;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    .btn-critical:hover {
        background-color: #7f1d1d;
        border-color: #7f1d1d;
    }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--text-error);
}

.validation-message {
    color: var(--text-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.btn-view {
    background: none;
    border: none;
    color: #0077C5;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: underline;
}

    .btn-view::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%230077C5'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8a13 13 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'%2F%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'%2F%3E%3C%2Fsvg%3E");
        display: inline-block;
        line-height: 0;
    }

table .btn-view::before {
    padding-right: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-label {
    font-size: 1.2rem;
    font-weight: 450;
    letter-spacing: 0.12rem;
    margin: 0 0 0.2rem;
}

.data-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Global chevron (single source of truth): collapsed points down ▼; add `.open` to flip up ▲. Size via --chevron-size, recolor via `color`. ── */
.chevron {
    display: inline-block;
    flex-shrink: 0;
    width: var(--chevron-size, 0.85rem);
    height: var(--chevron-size, 0.85rem);
    color: var(--text-muted);
    background-color: currentColor;
    -webkit-mask: var(--chevron-mask) center / contain no-repeat;
    mask: var(--chevron-mask) center / contain no-repeat;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.chevron.open {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .chevron {
        transition: none;
    }
}

.progress-track {
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    overflow: hidden;
    flex-shrink: 0;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    background: currentColor;
}

.data-cell.water-green {
    color: var(--water-green);
}

.data-cell.water-yellow {
    color: var(--water-yellow);
}

.data-cell.water-orange {
    color: var(--water-orange);
}

.data-cell.water-red {
    color: var(--water-red);
}

.water-level-low {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--water-green);
    letter-spacing: 0.05em;
}

.indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

    .indicator-dot.green {
        background-color: #22c55e;
    }

    .indicator-dot.orange {
        background-color: #f97316;
    }

    .indicator-dot.red {
        background-color: #ef4444;
    }

.btn-logs {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
}

    .btn-logs::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 16 16' fill='%237a94aa'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z'%2F%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'%2F%3E%3C%2Fsvg%3E");
        display: inline-block;
        line-height: 0;
    }

.btn-alert {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #f97316;
    display: inline-flex;
    align-items: center;
}

    .btn-alert::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%23f97316'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.921L8 1.918zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z'%2F%3E%3C%2Fsvg%3E");
        display: inline-block;
        line-height: 0;
    }

.btn-secondary,
.btn-secondary-view {
    color: var(--text-secondary);
    background-color: var(--bg-surface-2);
    /* brand-orange border so light-mode secondary buttons don't fade into the page (dark mode uses --accent) */
    border: 1px solid var(--btn-primary-bg);
    border-radius: 0.375rem;
    padding: 0.5rem 1.1rem;
    font-weight: 530;
    cursor: pointer;
}

    .btn-secondary:hover,
    .btn-secondary-view:hover {
        background-color: var(--bg-hover);
        border-color: var(--btn-primary-bg-hover);
    }

    .btn-secondary:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.btn-secondary-view {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

    .btn-secondary-view::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%23374151'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8a13 13 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'%2F%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'%2F%3E%3C%2Fsvg%3E");
        display: inline-block;
        line-height: 0;
    }

.btn-cancel {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
}

    .btn-cancel:hover {
        background: var(--bg-hover);
    }

    .btn-cancel:disabled,
    .btn-primary:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.error-message {
    color: var(--text-error);
    font-size: 0.875rem;
    padding: 1rem;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    background: var(--input-bg);
}

    .search-box input {
        border: none;
        outline: none;
        width: 240px;
        color: var(--input-text);
        background: transparent;
        font-size: 1rem;
        letter-spacing: 0.04rem;
    }


.btn-menu {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 20px;
}

    .btn-menu:hover {
        color: var(--text-primary);
    }

.table-footer {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-faint);
    padding: 0.75rem;
    background-color: var(--table-row-bg);
}

    .table-footer:hover {
        background-color: var(--table-row-bg);
    }

.page-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-strip {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.info-strip-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 1.0rem;
    position: relative;
}

.info-strip-item + .info-strip-item::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 10%;
    height: 90%;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #d1d5db 60%, transparent);
    pointer-events: none;
}

.info-strip-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    flex-basis: 100%;
}

.addr-secondary {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.badge-open-call,
.badge-deactivating,
.badge-deactivated,
.badge-alerted,
.badge-monitoring,
.badge-priority-low,
.badge-priority-medium,
.badge-priority-high,
.badge-priority-emergency,
.badge-billing-paid,
.badge-billing-failed,
.badge-enabled {
    display: inline-block;
    font-size: var(--fs-small);
    font-weight: 500;
    line-height: 1.4;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-open-call,
.badge-deactivating {
    background: #fef3c7;
    color: #92400e;
}

.badge-deactivated {
    background: #fee2e2;
    color: #991b1b;
}

.badge-alerted {
    background: #fff7ed;
    color: #c2410c;
}

.badge-monitoring {
    background: #dcfce7;
    color: #166534;
}

.sensor-alert-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #f97316;
    display: inline-flex;
    align-items: center;
}

    .sensor-alert-icon::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%23f97316'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.921L8 1.918zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z'%2F%3E%3C%2Fsvg%3E");
        display: inline-block;
        line-height: 0;
    }

.card {
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.5rem 2rem;
    margin-top: 1rem;
}

.card-actions,
.settings-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.dropdown-menu-wrapper {
    position: relative;
    display: inline-flex;
}

table tbody td.td-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    position: sticky;
    right: 0;
    background-color: var(--table-row-bg);
    z-index: 2;
}

.td-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    position: sticky;
    right: 0;
    background-color: var(--table-row-bg);
    z-index: 2;
}

    .td-actions .data-cell {
        justify-content: flex-end;
    }

table tbody td {
    position: relative;
    z-index: 0;
}

.dropdown-menu {
    position: fixed;
    right: 0;
    top: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    min-width: 160px;
    z-index: 1000;
    padding: 0.25rem 0;
    visibility: hidden;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

    .dropdown-item:hover {
        background: #f3f4f6;
    }

.dropdown-item-danger {
    color: var(--text-error);
}

    .dropdown-item-danger:hover {
        background: #fef2f2;
        color: var(--text-error);
    }

.dropdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 499;
}

/* Elevate the row while its dropdown is open so the menu paints above adjacent cells
   and the overlay, without per-page z-index changes. */
table tr:has(.dropdown-menu) {
    position: relative;
    z-index: 500;
}

.notif-tpl-row:has(.dropdown-menu) {
    position: relative;
    z-index: 500;
}

/* ══════════════════════════════════════════
   ADDRESS GROUPS — Tree + Node
   ══════════════════════════════════════════ */

.ag-tree-wrap {
    position: relative;
}

.ag-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--bg-surface, #fff);
    opacity: 0.65;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    pointer-events: none;
}

.ag-drop-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color, #ccc);
    border-top-color: var(--accent-color, #0d6efd);
    border-radius: 50%;
    animation: ag-spin 0.7s linear infinite;
    pointer-events: none;
}

@keyframes ag-spin {
    to { transform: rotate(360deg); }
}

.ag-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 3rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
}

/* Border shell only — no overflow:hidden so dropdowns can escape it */
.ag-tree {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-surface);
    min-height: 60px;
    overflow: visible;
}

.ag-tree > .ag-node:first-child > .ag-node-row {
    border-radius: 0.375rem 0.375rem 0 0;
}

.ag-tree > .ag-node:last-child > .ag-node-row {
    border-radius: 0 0 0.375rem 0.375rem;
}

.ag-tree.ag-root-dragover {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

.ag-node {
    border-bottom: 1px solid var(--border-color);
    overflow: visible;
}

.ag-node:last-child {
    border-bottom: none;
}

.ag-node:has(.dropdown-menu) {
    position: relative;
    z-index: 500;
}

.ag-node-row.ag-node-row-dragover {
    background-color: var(--accent-bg);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.ag-node-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-right: 0.5rem;
    cursor: grab;
    user-select: none;
    background: var(--bg-surface);
    transition: background-color 0.12s;
    position: relative;
    overflow: visible;
}

.ag-node-row:hover {
    background: var(--bg-hover);
}

.ag-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    border-radius: 4px;
    transition: background-color 0.1s, color 0.1s;
}

.ag-toggle:hover {
    background: var(--bg-surface-3);
    color: var(--text-secondary);
}

.ag-chevron-placeholder {
    display: inline-block;
    width: 1rem;
}

.ag-icon {
    color: var(--accent);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.ag-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-info-sections {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-right: 0.25rem;
}

.ag-notif-section {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--bg-surface-2, rgba(0,0,0,0.04));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    height: 1.55rem;
    width: 140px;
}

.ag-notif-type-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    margin-right: 0.15rem;
    flex-shrink: 0;
}

.ag-notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.18rem;
    border-radius: 3px;
    background: var(--accent-bg, rgba(13,110,253,0.12));
    color: var(--accent-strong, #005fa0);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    cursor: default;
}

.ag-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-surface-2, rgba(0,0,0,0.04));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    height: 1.55rem;
    cursor: default;
    white-space: nowrap;
}

.ag-count-badge svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.ag-menu-wrapper {
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.ag-view-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
    border-radius: 4px;
    transition: background-color 0.1s, color 0.1s;
}

.ag-view-btn:hover {
    background: var(--bg-surface-3);
    color: var(--accent);
}

.ag-children {
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface-2);
    overflow: visible;
}

.ag-children .ag-node {
    background: var(--bg-surface-2);
}

.ag-children .ag-node-row {
    background: var(--bg-surface-2);
}

.ag-children .ag-node-row:hover {
    background: var(--bg-hover);
}

.ag-children .ag-node:last-child {
    border-bottom: none;
}

.ag-dialog-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.btn-icon-save {
    background: #cc3e00;
    color: #f9fafb;
    border: none;
    border-radius: 0.375rem;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .btn-icon-save:hover {
        background: #a83400;
    }

    .btn-icon-save:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* --- Critical Sensors Dialog --- */
.cs-dialog-title {
    text-align: center;
    margin-bottom: 0.25rem;
}

.cs-dialog-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.cs-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .cs-table th {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        background: var(--table-head-bg);
    }

.cs-address-row {
    cursor: pointer;
    background: var(--table-row-bg);
}

    .cs-address-row:hover {
        background: var(--table-row-hover);
    }

    .cs-address-row td {
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        font-weight: 600;
        color: var(--text-primary);
    }

.cs-expand-cell {
    width: 2rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cs-sensor-container td {
    padding: 0;
}

.cs-sensor-inner {
    padding: 0.75rem 0.75rem 0.75rem 2rem;
    background: var(--bg-surface-2);
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid #FF4E00;
}

.cs-nested-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .cs-nested-table th {
        text-align: left;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0.35rem 0.5rem;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-surface-3);
    }

    .cs-nested-table td {
        padding: 0.5rem 0.5rem;
        border-bottom: 1px solid var(--border-color);
        vertical-align: middle;
        background: var(--table-row-bg);
        color: var(--text-secondary);
    }

    .cs-nested-table tr:last-child td {
        border-bottom: none;
    }

    .cs-nested-table tbody tr {
        cursor: pointer;
    }

    /* Tap/click highlights only the chosen sensor row. */
    .cs-nested-table tbody tr.cs-sensor-selected td {
        background: var(--table-row-hover);
    }

.cs-row-actions {
    width: 1px;
    white-space: nowrap;
    text-align: right;
}

.cs-row-action-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    width: 50px;
    padding: 0.25rem 0;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 19px;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.cs-row-action-btn + .cs-row-action-btn {
    margin-left: 5px;
}

.cs-row-action-btn:hover {
    background-color: var(--bg-surface-3);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ── Critical Sensors: mobile (<650px) client-grouped cards (the desktop/tablet table is hidden here) ── */
.cs-mobile-list {
    display: none;
}

@media (max-width: 649.98px) {
    .cs-table-wrap {
        display: none;
    }

    .cs-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .cs-m-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Multi-address clients indent their address cards to show the grouping. */
    .cs-m-group:has(.cs-m-client) .cs-m-address {
        margin-left: 0.75rem;
    }

    .cs-m-client {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.85rem 0.75rem;
        background: var(--table-row-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

    .cs-m-client-name {
        font-weight: 600;
        font-size: 1rem;
        color: var(--text-primary);
    }

    .cs-m-address {
        display: flex;
        flex-direction: column;
        background: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        box-shadow: var(--shadow-sm);
        padding: 0.85rem 0.75rem;
    }

    .cs-m-divider {
        height: 1px;
        background: var(--border-color);
        margin: 0.6rem 0;
    }

    /* Slightly smaller divider before the sensor list: inset + lighter. */
    .cs-m-divider-sm {
        margin: 0.5rem 0.5rem;
        opacity: 0.6;
    }

    .cs-m-address-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .cs-m-address-text {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .cs-m-address-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .cs-m-address-line {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .cs-m-actions {
        display: flex;
        gap: 0.4rem;
        flex-shrink: 0;
    }

    .cs-m-actions .cs-row-action-btn {
        width: 40px;
        height: 40px;
    }

    .cs-m-sensors {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .cs-m-sensor {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
        margin: 0 -0.5rem;
        border-radius: 0.375rem;
        cursor: pointer;
    }

    .cs-m-sensor.cs-sensor-selected {
        background: var(--table-row-hover);
    }

    .cs-m-sensor-name {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .cs-m-sensor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .cs-m-sensor-time {
        font-size: 0.8125rem;
        color: var(--text-muted);
        white-space: nowrap;
    }
}

[data-tooltip]:not(.tooltip-suppress)::after {
    content: attr(data-tooltip);
    position: fixed;
    top: anchor(top);
    /* Centre on the anchor, but clamp the centre so neither edge of the bubble can
       cross the viewport at any screen size. 8.5rem = half the 16rem max-width plus
       a 0.5rem gutter, so a centred bubble always stays fully on-screen. */
    left: clamp(8.5rem, anchor(center), calc(100vw - 8.5rem));
    transform: translate(-50%, calc(-100% - 6px));
    max-width: min(16rem, calc(100vw - 1rem));
    background: rgba(17, 24, 39, 0.95);
    color: #fff;
    border: 1px solid #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: normal;
    text-align: center;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    [data-tooltip]:not(.tooltip-suppress):hover::after {
        opacity: 1;
        transition: opacity 0s 0.6s;
    }

    table tbody td:has([data-tooltip]:not(.tooltip-suppress):hover) {
        z-index: 1000;
    }
}

[data-tooltip]:not(.tooltip-suppress):focus-visible::after {
    opacity: 1;
    transition: opacity 0s 0.6s;
}

table tbody td:has([data-tooltip]:not(.tooltip-suppress):focus-visible) {
    z-index: 1000;
}

/* Tooltip fallback: flip below the anchor when there's not enough space above */
@position-try --tooltip-below {
    top: anchor(bottom);
    transform: translate(-50%, 6px);
}

[data-tooltip]:not(.tooltip-suppress)::after {
    position-try-fallbacks: --tooltip-below;
}

/* Company Quick Look Simple: tooltip appears below since the component sits at the top of the page */
.cqls-container [data-tooltip]:not(.tooltip-suppress)::after {
    top: anchor(bottom);
    transform: translate(-50%, 50px);
}

/* Nav utility strip: tooltip appears to the right so it never clips at the left edge */
.nav-utility-row [data-tooltip]:not(.tooltip-suppress)::after {
    top: anchor(center);
    left: anchor(right);
    transform: translate(6px, -50%);
}

/* --- Inline page header actions (button + search) --- */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Shared detail-page header ──────────────────────────────────────────────
   Back button on its own row; the heading (title + optional info strip) and any
   page action buttons sit inline on the row below. Single source of truth for the
   Addresses / Sensors / Employee Roles / Employee Invitations / Address Groups
   detail headers. Pages add their own content tweaks via their scoped CSS. */
.detail-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "back     back"
        "heading  actions"
        "divider  divider";
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
}

.detail-header > .detail-header-back {
    grid-area: back;
    justify-self: start;
}

.detail-header > .detail-header-heading {
    grid-area: heading;
    /* ~half the Back button's width, so the title starts under the button rather
       than flush against the page edge. */
    padding-left: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.detail-header > .detail-header-heading h2 {
    margin: 0;
}

.detail-header > .detail-header-actions {
    grid-area: actions;
    align-self: start;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.detail-header > .app-divider {
    grid-area: divider;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* List-page divider: flush to the header, 20px (1.25rem) below; compound selector beats <Divider>'s scoped margin. */
.page-content.sc-page .app-divider,
.page-content.employees-page .app-divider {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

/* Manage Employees (tablet 650–899px): drop the two buttons under the title; desktop keeps them inline top-right like Customers/Service Calls. Drop the h2's UA bottom margin so row-gap owns the title→buttons gap; the divider gets its own 20px top since the buttons (not the h2) sit above it. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .employees-page .page-header {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.25rem;
    }

    .employees-page .page-header-left h2 {
        margin-bottom: 0;
    }

    .page-content.employees-page .app-divider {
        margin-top: 1.25rem;
    }
}

/* Service Calls (tablet 650–899px): drop the button under the header like Manage Employees; desktop keeps it inline top-right. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .sc-page .page-header {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.25rem;
    }

    .sc-page .page-header-left h2 {
        margin-bottom: 0;
    }

    .page-content.sc-page .app-divider {
        margin-top: 1.25rem;
    }
}

/* Tablet (650–899px): app-wide button standard — detail pages drop their action
   buttons onto their own full-width row below the heading. (List pages now stack
   their buttons under the header on tablet too — see the per-page blocks above.) */
@media (min-width: 650px) and (max-width: 899.98px) {
    .detail-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "back"
            "heading"
            "actions"
            "divider";
    }

    .detail-header > .detail-header-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

/* Mobile: single column; Back flush-left above a centered heading; the divider,
   then any action buttons (centered) below it. */
@media (max-width: 649.98px) {
    .detail-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "back"
            "heading"
            "divider"
            "actions";
    }

    .detail-header > .detail-header-back {
        justify-self: start;
    }

    .detail-header > .detail-header-heading {
        padding-left: 0;
        align-items: center;
    }

    .detail-header > .detail-header-heading h2 {
        text-align: center;
    }

    .detail-header > .detail-header-actions {
        flex-direction: column;
        align-items: center;
    }

    .detail-header > .detail-header-actions > button {
        width: 300px;
        max-width: 100%;
    }
}

/* ── Small desktop (900–1100px): header action buttons drop below the title but stay an
   inline row (tablet treatment); ≥1100 keeps them top-right. ── */
@media (min-width: 900px) and (max-width: 1099.98px) {
    .page-header:has(.page-header-actions > *) {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .page-header:has(.page-header-actions > *) .page-header-left h2 {
        margin: 0;
    }

    .detail-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "back"
            "heading"
            "actions"
            "divider";
    }

    .detail-header:has(.addresses-contact-strip) {
        grid-template-areas:
            "back"
            "heading"
            "strip"
            "actions"
            "divider";
    }

    /* Inline row, indented to line up with the heading. */
    .detail-header > .detail-header-actions {
        padding-left: 2.5rem;
    }
}

/* Service Calls page (mobile only): centered header, action below the divider.
   display:contents promotes the header's children so the button can be ordered
   after the divider; desktop/tablet keep the default inline header. */
@media (max-width: 649.98px) {
    .sc-page-header {
        display: contents;
    }

    .sc-page .page-header-left {
        order: -3;
        justify-content: center;
        text-align: center;
    }

    .sc-page .app-divider {
        order: -2;
    }

    .sc-page .page-header-actions {
        order: -1;
        justify-content: flex-end;
        margin-bottom: var(--space-3);
    }
}

/* Service Calls view toggle (Needy / My Calls / All Calls) — segmented control */
.sc-view-toggle {
    display: flex;
    width: 100%;
    max-width: 420px;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.sc-view-toggle-btn {
    flex: 1;
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02rem;
    white-space: nowrap;
    cursor: pointer;
}

    .sc-view-toggle-btn:hover {
        color: var(--text-primary);
    }

.sc-view-toggle-active,
.sc-view-toggle-active:hover {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

/* Compact "Create" action in the Needy addresses rows */
.sc-create-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    min-height: 36px;
    white-space: nowrap;
}

/* --- Welcome overlay --- */
/* JS-appended to <body> to escape MainLayout's `isolation: isolate`. 3.125s total: swipe-in (32%),
   hold (36%), swipe-out + backdrop fade (32%). Keyframes below; JS setTimeout matches the total. */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bg-app) 55%, transparent);
    backdrop-filter: blur(24px) saturate(110%);
    -webkit-backdrop-filter: blur(24px) saturate(110%);
    overflow: hidden;
    pointer-events: none;
    animation: welcome-overlay-fade-out 3.125s ease-out forwards;
}

.welcome-overlay-text {
    color: var(--text-primary);
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 600;
    text-align: center;
    padding: 0 1rem;
    animation: welcome-overlay-text-cycle 3.125s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Backdrop is at full opacity from t=0 (no fade-in). It holds until 68% (= 2.125s)
   then fades out by 100% (= 3.125s). The text inherits this fade via parent opacity. */
@keyframes welcome-overlay-fade-out {
    0%, 68% { opacity: 1; }
    100%    { opacity: 0; }
}

/* Swipe-in then swipe-out with blur-to-sharp + letter-spacing tighten, mirrored.
   Text opacity stays at 1 once arrived; parent backdrop's fade-out drives the disappearance. */
@keyframes welcome-overlay-text-cycle {
    0% {
        opacity: 0;
        transform: translateX(-40%);
        filter: blur(10px);
        letter-spacing: 0.3em;
    }
    32% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
        letter-spacing: 0.02em;
    }
    68% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
        letter-spacing: 0.02em;
    }
    100% {
        opacity: 1;
        transform: translateX(40%);
        filter: blur(10px);
        letter-spacing: 0.3em;
    }
}

/* --- Dialog form styles --- */
.dialog-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

/* Shared close button used by Dialog and FixedDialog */
.dialog-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
}

.dialog-close:hover,
.dialog-close:focus,
.dialog-close:active {
    color: var(--text-primary);
    background: transparent;
    outline: none;
}

.form-grid {
    display: grid;
    gap: 1rem 1.25rem;
}

.form-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.form-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Larger inter-field spacing for prominent forms (login, register, etc.) */
.form-group--lg {
    margin-bottom: 1.1rem;
}

/* When form-groups stack outside a grid, ensure breathing room between them */
.form-group + .form-group {
    margin-top: 0.75rem;
}

/* Reset margin inside form-grid since grid gap handles spacing */
.form-grid .form-group + .form-group,
.settings-col .form-group + .form-group {
    margin-top: 0;
}

.form-label {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.03rem;
    color: var(--text-secondary);
}

.form-label-required::after {
    content: " *";
    color: var(--text-error);
}

.form-input,
.form-select,
.form-control {
    min-height: 42px;
    letter-spacing: 0.05rem;
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    font-size: 1.1rem;
    color: var(--input-text);
    outline: none;
    box-sizing: border-box;
    background-color: var(--input-bg);
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    padding-right: calc(0.65rem + 12px + 0.65rem);
}

    .form-input:focus,
    .form-select:focus {
        border-color: #0077C5;
        box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.2);
    }

/* iOS Safari zooms the viewport whenever a focused field renders below 16px.
   This floor keeps every text-entry control at 16px (or larger if a class sets
   more), so focusing an input never triggers a zoom — at any screen width. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]),
textarea,
select,
[contenteditable="true"] {
    font-size: max(16px, 1em);
}

/* Larger size variant — used by the login/register/auth forms for visual prominence */
.form-input--lg {
    padding: 0.65rem 1rem;
    border-width: 1.5px;
    border-radius: 8px;
    font-size: 1rem;
}

    .form-input--lg:focus {
        box-shadow: 0 0 0 3px rgba(0, 119, 197, 0.15);
    }

/* --- Native <input type="date"> refinement (Feedback page date filters) --- */
input[type="date"].form-input {
    color-scheme: light;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    letter-spacing: 0.04em;
}

    input[type="date"].form-input::-webkit-calendar-picker-indicator {
        opacity: 0.55;
        cursor: pointer;
        padding: 0.15rem 0.25rem;
        margin-right: -0.15rem;
        border-radius: 0.25rem;
        transition: opacity 0.15s ease, background-color 0.15s ease;
    }

        input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
            background: var(--bg-surface-3);
        }

    input[type="date"].form-input::-webkit-inner-spin-button {
        display: none;
    }

/* --- TimePickerInline (Components/Shared/TimePickerInline.razor) --- */
.tp-wrap {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.1rem;
    /* fixed 42px so it matches .dp-field exactly; the stacked hover-arrows are compressed to fit */
    height: 42px;
    padding: 0 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    background: var(--input-bg);
    color: var(--input-text);
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .tp-wrap:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.2);
    }

.tp-wrap-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.tp-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    /* fixed basis: without it the field inherits the text input's intrinsic ~20ch width and the digits spread across the box */
    flex: 0 1 2rem;
    min-width: 2rem;
    min-height: 0;
}

.tp-field-ampm {
    flex-basis: 2.4rem;
    min-width: 2.4rem;
}

.tp-arrow {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.05rem 0.3rem;
    border-radius: 0.2rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, color 0.12s ease;
}

    /* Chevrons revealed only on container hover/focus. */
    .tp-wrap:hover .tp-arrow,
    .tp-wrap:focus-within .tp-arrow {
        opacity: 1;
        pointer-events: auto;
    }

    .tp-arrow:hover {
        color: var(--text-primary);
    }

    .tp-arrow:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    .tp-arrow svg {
        width: 9px;
        height: 5px;
        display: block;
    }

.tp-value {
    appearance: none;
    background: transparent !important;
    border: 0;
    color: inherit;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.2rem;
    border-radius: 0.25rem;
    cursor: text;
    outline: none;
    box-shadow: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    letter-spacing: 0.03em;
}

    .tp-value::placeholder {
        color: var(--text-faint);
        font-weight: 500;
        letter-spacing: 0.05em;
    }

    .tp-value:hover,
    .tp-value:focus {
        background: transparent !important;
        box-shadow: none;
    }

.tp-value-ampm {
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.tp-sep {
    align-self: center;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0 0.05rem;
    user-select: none;
}

/* --- DatePickerInline (Components/Shared/DatePickerInline.razor) --- */
.dp-wrap {
    position: relative;
    width: 100%;
}

.dp-wrap-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.dp-field {
    appearance: none;
    width: 100%;
    min-height: 42px;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 0.9rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .dp-wrap.dp-open .dp-field,
    .dp-field:focus-visible {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.2);
    }

.dp-field-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-field-placeholder {
    color: var(--text-faint);
    font-weight: 400;
    letter-spacing: normal;
}

.dp-field-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dp-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

/* Popup is positioned via JS (acdwPositionPopup); visibility hidden until then. */
.dp-popup {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 10000;
    width: 17rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 0.75rem;
    color: var(--input-text);
    font-size: 0.875rem;
}

.dp-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
}

.dp-month-label {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    text-align: center;
    color: var(--text-primary);
}

.dp-nav {
    appearance: none;
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .dp-nav:hover {
        background: var(--bg-surface-3);
        color: var(--text-primary);
    }

    .dp-nav svg {
        width: 14px;
        height: 14px;
    }

.dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.1rem;
    padding: 0.1rem 0 0.3rem;
}

    .dp-weekdays span {
        text-align: center;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.15rem 0;
    }

.dp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.15rem;
}

.dp-day {
    appearance: none;
    background: transparent;
    border: 0;
    aspect-ratio: 1;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.12s ease, color 0.12s ease;
    padding: 0;
}

    .dp-day:hover {
        background: var(--bg-hover);
    }

.dp-day-other {
    color: var(--text-faint);
}

.dp-day-today {
    box-shadow: inset 0 0 0 1px var(--accent);
    font-weight: 700;
    color: var(--accent);
}

.dp-day-selected,
.dp-day-selected.dp-day-other {
    background: var(--accent);
    color: var(--text-on-accent);
    font-weight: 700;
}

    .dp-day-selected:hover {
        background: var(--accent-hover);
    }

    .dp-day-selected.dp-day-today {
        box-shadow: none;
        color: var(--text-on-accent);
    }

.dp-day-disabled,
.dp-day-disabled:hover {
    color: var(--text-faint);
    background: transparent;
    cursor: not-allowed;
    opacity: 0.45;
}

.dp-popup-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.55rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--border-color-2);
}

.dp-footer-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.3rem 0.55rem;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .dp-footer-btn:hover {
        background: var(--accent-bg);
    }

    .dp-footer-btn:disabled {
        color: var(--text-faint);
        cursor: not-allowed;
    }

.dp-footer-btn-muted {
    color: var(--text-muted);
}

    .dp-footer-btn-muted:hover {
        background: var(--bg-surface-3);
        color: var(--text-primary);
    }

/* --- PasswordInput component (Components/Shared/PasswordInput.razor) --- */

/* Suppress browser-native password reveal/clear controls so only our custom
   toggle is visible. Without this, Edge shows its own eye next to ours. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button,
input[type="password"]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}

.password-input-wrap {
    position: relative;
    display: block;
}

    .password-input-wrap > input {
        padding-right: 2.5rem;
    }

.password-input-toggle {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 0;
}

    .password-input-toggle:hover {
        color: var(--text-primary);
        background: rgba(0, 0, 0, 0.05);
    }

    .password-input-toggle:focus-visible {
        outline: 2px solid #0077C5;
        outline-offset: 2px;
    }

.password-input-eye {
    width: 1.15rem;
    height: 1.15rem;
}

.password-input-eye--hide {
    display: none;
}

.password-input-toggle[aria-pressed="true"] .password-input-eye--show {
    display: none;
}

.password-input-toggle[aria-pressed="true"] .password-input-eye--hide {
    display: inline-block;
}

[data-theme="dark"] .password-input-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.form-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.form-span-3 {
    grid-column: span 3;
}

.form-row-split-2 {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}

    .form-row-split-2 .form-group + .form-group {
        margin-top: 0;
    }

.dialog-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

.dialog-error-list {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.375rem;
    color: var(--text-error);
    font-size: 0.85rem;
}

/* Empty states inside dialogs stay compact — the page-level 50vh/flex-1 footprint would force the dialog body to scroll. */
.dialog-overlay .dialog-body .empty-state {
    min-height: 0;
    flex: none;
    padding: 1rem;
}

.dialog-overlay .dialog-body .empty-state-icon {
    width: 80px;
}

/* Desktop pages: the empty state fills whatever height the article has left (it can shrink) instead of pinning a 50vh minimum that forces a scroll on short windows. */
@media (min-width: 900px) {
    article .page-content .empty-state {
        min-height: 0;
    }
}

    .dialog-error-list ul {
        margin: 0;
        padding-left: 1.25rem;
    }

/* Mobile dialog tweaks; title/close alignment scoped to form dialogs (.card confirmations opt out). */
@media (max-width: 649.98px) {
    /* ~20px top band for the close button (matches the dialog body's mobile padding-top). */
    .dialog-close {
        top: 1.25rem;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 2.75rem;
    }

    .fixed-dialog-box:not(:has(.card)) .dialog-close {
        top: 1.25rem;
    }

    .fixed-dialog-box:not(:has(.card)) .dialog-title {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        margin-bottom: 1rem;
        padding-right: 4rem;
    }

    .dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .dialog-actions > button {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .form-span-3,
    .form-row-split-2 {
        grid-column: span 1;
    }

    .form-row-split-2 {
        grid-template-columns: 1fr;
    }
}

/* Shared confirmation box (ConfirmDialog.razor): no inner border; the title sits
   on the close-button row, aligned left. Title min-height matches the close button
   so they share one band; the box's 2rem top padding fixes both bands at the top. */
.fixed-dialog-box.confirm-dialog-box .dialog-close {
    top: 2rem;
}

/* Mobile: pull the confirm dialog's close + title into the same ~20px top band. */
@media (max-width: 649.98px) {
    .fixed-dialog-box.confirm-dialog-box .dialog-close {
        top: 1.25rem;
    }

    .confirm-dialog-title {
        min-height: 2.75rem;
    }
}

.confirm-dialog-title {
    display: flex;
    align-items: center;
    min-height: 3rem;
    margin: 0 0 1rem 0;
    padding-right: 2.5rem;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
}

.confirm-dialog-text {
    color: var(--text-secondary);
}

.confirm-dialog-text p {
    margin: 0 0 0.5rem 0;
}

.confirm-dialog-text p:last-child {
    margin-bottom: 0;
}

.reset-sensor-dialog .confirm-dialog-title {
    font-size: var(--fs-h2);
    justify-content: center;
    padding-left: 2.5rem;
}

.confirm-dialog-text .reset-sensor-name {
    margin: 0 0 0.75rem 0;
    text-align: center;
    color: var(--text-primary);
    font-size: var(--fs-h3);
    font-weight: 600;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 649.98px) {
    .confirm-dialog-title {
        min-height: 3.75rem;
        padding-right: 3.25rem;
    }

    .reset-sensor-dialog .confirm-dialog-title {
        padding-left: 3.25rem;
    }

    .confirm-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .confirm-dialog-actions > button {
        width: 100%;
    }
}

/* --- Priority Badges --- */
.badge-priority-low {
    background: #dcfce7;
    color: #166534;
}

.badge-priority-medium {
    background: #fef9c3;
    color: #854d0e;
}

.badge-priority-high {
    background: #ffedd5;
    color: #9a3412;
}

.badge-priority-emergency {
    background: #fee2e2;
    color: var(--text-error);
}

/* --- Table Section Divider --- */
.table-section-header td {
    background: var(--bg-surface-3);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.75rem;
    border-top: 2px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.table-section-header td:hover{
    background: var(--bg-surface-3);

}
/* --- Service Call Dialog --- */
.sc-dialog-box {
    width: min(96vw, 1200px);
}

.sc-dialog-box .fixed-dialog-body {
    overflow: hidden;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Short viewports (landscape tablet / small desktop): body must scroll or the sensors block is unreachable */
@media (min-width: 900px) and (max-height: 849.98px) {
    .sc-dialog-box .fixed-dialog-body {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* .dialog-title is shared by ~26 dialogs — tighten only the service-call one */
.sc-dialog-box .dialog-title {
    margin-bottom: 0.1rem;
}

.sc-dialog-layout {
    display: flex;
    gap: 1.25rem;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

.sc-dialog-col-form {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sc-dialog-col-notes {
    flex: 0 0 400px;
    min-height: 250px;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .sc-dialog-col-notes .sc-notes-section {
        flex: 1;
        min-height: 0;
    }

    .sc-dialog-col-notes .sc-notes-list {
        flex: 1;
        max-height: none;
        min-height: 0;
    }

.sc-sensors-scroll {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    padding: 0.65rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color-2);
    border-radius: 0.375rem;
}

.sc-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.1rem 0 0.4rem;
}

.sc-sensors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.sc-sensor-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    background: transparent;
    font-size: 0.82rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-secondary);
}

    .sc-sensor-chip:hover {
        border-color: var(--text-faint);
        background: var(--bg-hover);
    }

.sc-sensor-chip-checked {
    border-color: var(--accent);
    background: var(--accent-bg);
}

    .sc-sensor-chip-checked:hover {
        border-color: var(--accent-hover);
        background: var(--accent-bg);
    }

.sc-sensor-chip-alerted {
    color: var(--text-error);
}

.sc-sensor-chip-readonly {
    cursor: default;
}

    .sc-sensor-chip-readonly:hover {
        border-color: var(--input-border);
        background: transparent;
    }

    .sc-sensor-chip-readonly.sc-sensor-chip-checked:hover {
        border-color: var(--accent);
        background: var(--accent-bg);
    }

.sc-notes-section {
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sc-notes-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.4rem;
    background: #f3f4f6;
}

.sc-note-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
}

.sc-note-body {
    padding: 0.55rem 0.7rem 0.3rem;
    font-size: 0.875rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.sc-note-footer {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0.7rem 0.4rem;
    border-top: 1px solid #f3f4f6;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.sc-note-add {
    border-top: 1px solid #e5e7eb;
    padding: 0.6rem 0.75rem;
    display: flex;
    gap: 0.6rem;
    align-items: flex-end;
    background: #f9fafb;
    flex-shrink: 0;
}

.sc-note-textarea {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    padding: 0.4rem 0.65rem;
    font-size: 1rem;
    font-family: inherit;
    resize: none;
    outline: none;
    color: #374151;
    min-height: 36px;
}

    .sc-note-textarea:focus {
        border-color: #0077C5;
        box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.15);
    }

/* Add-dialog initial note fills its column on desktop */
.sc-initial-note {
    min-height: 0;
    padding: 0.6rem 0.75rem;
}

/* "Change Address" sits left-aligned under the address with a comfortable tap height */
.sc-change-address {
    align-self: flex-start;
    min-height: 36px;
    margin-top: 0.75rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.875rem;
}

/* ── Stack the Service Call dialog to one column below desktop (899.98px); form
   first, notes last. flex:0 0 auto keeps each block at content height so nothing
   shrinks and overlaps; the scoped .fixed-dialog-body (overflow-y:auto) scrolls. ── */
@media (max-width: 899.98px) {
    /* Now that the dialog is a centered max-height:90dvh box (not a full-screen
       sheet), let the stacked content scroll instead of clipping under overflow:hidden. */
    .sc-dialog-box .fixed-dialog-body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .sc-dialog-layout {
        flex-direction: column;
        flex: 0 0 auto;
        gap: 1.25rem;
    }

    .sc-dialog-col-form {
        flex: 0 0 auto;
        overflow: visible;
    }

    .sc-dialog-col-notes {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }

    .sc-dialog-col-notes .sc-notes-section {
        flex: 0 0 auto;
    }

    .sc-dialog-col-notes .sc-notes-list {
        flex: 0 0 auto;
        max-height: 200px;
    }

    .sc-sensors-scroll {
        flex: 0 0 auto;
        max-height: 180px;
    }

    .sc-initial-note {
        flex: 0 0 auto;
        min-height: 140px;
    }
}

/* ── Phone (649.98px): compact fields + trimmed side padding. The dialog's
   title/close alignment and stacked action buttons are handled by the global
   mobile-dialog rules above. ── */
@media (max-width: 649.98px) {
    .sc-dialog-box .fixed-dialog-body {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .sc-dialog-col-form .form-grid-2,
    .sc-dialog-col-form .form-grid-3 {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}


.btn-send {
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 0.375rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    white-space: nowrap;
}

    .btn-send:hover {
        background: #d1d5db;
    }

    .btn-send:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* --- Address search dropdown (Add service call) --- */
.addr-search-wrap {
    position: relative;
}

.addr-search-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: var(--shadow-md);
    z-index: 50;
    max-height: 340px;
    overflow-y: auto;
    color: var(--text-primary);
}

.addr-search-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--border-color-2);
    color: var(--text-primary);
}

    .addr-search-item:hover {
        background: var(--bg-hover);
    }

    .addr-search-item:last-child {
        border-bottom: none;
    }

.addr-search-item.addr-search-item--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

    .addr-search-item.addr-search-item--disabled:hover {
        background: transparent;
    }

.addr-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.addr-badge-sc {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.addr-badge-sensor {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.addr-initial-list {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    overflow-y: auto;
    max-height: 40vh;
}

/* --- Service Call View Page --- */
.scv-layout {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    padding: 0.5rem 0 0;
}

.scv-col-details {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
}

.scv-col-notes {
    flex: 2 1 0;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
}

.scv-col-notes .sc-section-label {
    padding: 0.75rem 0.75rem 0.25rem;
    margin: 0;
}

.scv-col-notes .sc-notes-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scv-col-notes .sc-notes-list {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* ── Service Call detail view: stack to one column below desktop. Removes the
   fixed 400px notes column (the cause of horizontal scroll on mobile) and uses
   flex:0 0 auto so the sections keep their height and the page scrolls. ── */
@media (max-width: 899.98px) {
    .scv-layout {
        flex-direction: column;
        flex: 0 0 auto;
    }

    .scv-col-details {
        flex: 0 0 auto;
        overflow: visible;
    }

    .scv-col-notes {
        flex: 0 0 auto;
        min-width: 0;
        min-height: 360px;
    }
}

.scv-detail-grid {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
}

.scv-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
    padding: 0.75rem 1rem;
}

.scv-detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 140px;
}

.scv-status {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.scv-status-open {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.scv-status-completed {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.scv-status-canceled {
    background: var(--bg-surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

/* --- View Permissions Dialog --- */
.fixed-dialog-box-narrow {
    width: min(92vw, 990px) !important;   /* span the full standard dialog width (~92vw on tablet) instead of a cramped 430px */
}

/* Stack the title and the "X of X enabled" pill so the pill drops below the
   absolutely-positioned .dialog-close button instead of sitting behind it. */
.vp-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.vp-summary {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent-strong);
    background: var(--accent-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.role-perms-group {
    margin-bottom: 1.25rem;
}

.role-perms-group:last-child {
    margin-bottom: 0;
}

.perm-group-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color-2);
}

.perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border-color-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.perm-row:last-child {
    border-bottom: none;
}

/* Direct children only — a descendant `span:last-child` would also catch the .ar-toggle-track span inside the toggle label, shrinking the track and pushing the ON knob outside it. */
.perm-row > span:first-child {
    flex: 1;
    min-width: 0;
}

.perm-row > span:last-child {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.perm-off {
    color: var(--text-faint);
}

/* Status pill — identical box for both states so every perm-row is the same height. */
.perm-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.perm-status-on {
    background: #dcfce7;
    color: #166534;
}

.perm-status-off {
    background: transparent;
    color: var(--text-faint);
}

/* --- Edit Employee Dialog --- */
.ee-subtitle {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* Role dropdown spans the full width on phones, but only half the dialog on tablet/desktop. */
@media (min-width: 650px) {
    .ee-role-field .form-select {
        max-width: 50%;
    }
}

.ee-perms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1.25rem 0 0.75rem;
}

.ee-perms-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.ee-enabled-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #0077C5;
}

.role-perms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    align-items: start;
}

/* Management spans the full top row, its rows filling both columns; the other
   groups (Service, Clients) take one column each on the second row. */
.role-perms-group--wide {
    grid-column: 1 / -1;
    column-count: 2;
    column-gap: 1.5rem;
}

.role-perms-group--wide .perm-group-label {
    column-span: all;
}

.role-perms-group--wide .perm-row {
    break-inside: avoid;
}

/* Permission groups stack to a single column on mobile. */
@media (max-width: 649.98px) {
    .role-perms-grid {
        grid-template-columns: 1fr;
    }

    .role-perms-group--wide {
        column-count: 1;
    }
}

.er-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.er-section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

/* --- Add Employee Role Dialog --- */
.ar-section-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    margin-top: 0.1rem;
}

.ar-perms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .ar-perms-grid {
        grid-template-columns: 1fr;
    }
}

.ar-perm-group {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.85rem 1rem;
}

.ar-perm-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.ar-perm-group-title {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.ar-select-all {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: #0077C5;
    cursor: pointer;
}

    .ar-select-all:hover {
        color: #005fa0;
        text-decoration: underline;
    }

.ar-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
}

    .ar-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

.ar-toggle-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: background 0.18s;
}

    .ar-toggle-track::before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 3px;
        top: 3px;
        background: #f9fafb;
        border-radius: 50%;
        transition: transform 0.18s;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    }

.ar-toggle input:checked + .ar-toggle-track {
    background: var(--toggle-on-bg);
}

.ar-toggle input:checked + .ar-toggle-track::before {
    transform: translateX(20px);
}

/* Add Employee Role dialog — desktop: title shares the close-button row, trim vertical
   space so the whole form fits on one screen without scrolling. */
@media (min-width: 900px) {
    .fixed-dialog-box.ar-role-dialog .fixed-dialog-body {
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }

    .fixed-dialog-box.ar-role-dialog .dialog-close {
        top: 1rem;
    }

    .fixed-dialog-box.ar-role-dialog .dialog-title {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        margin-bottom: 0.85rem;
        padding-right: 3.5rem;
    }

    .fixed-dialog-box.ar-role-dialog .ar-perm-group {
        padding: 0.75rem 1rem;
    }

    .fixed-dialog-box.ar-role-dialog .perm-row {
        padding: 0.45rem 0;
    }

    .fixed-dialog-box.ar-role-dialog .dialog-actions {
        margin-top: 1.1rem;
        padding-top: 1rem;
    }
}

/* Add Invitation Dialog */
.ai-dialog-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ai-dialog-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.ai-input-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.ai-email-field {
    flex: 1;
}

.ai-role-field {
    width: 200px;
}

.ai-add-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .ai-input-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ai-role-field {
        width: 100%;
    }
}

.ai-staged-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.ai-staged-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ai-staged-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.ai-staged-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: #f9fafb;
    user-select: none;
}

.ai-staged-card-header:hover {
    background: #f9fafb;
}

.ai-staged-email-block {
    flex: 1;
    min-width: 0;
    margin-left: 10px;     /* extra breathing room between the chevron and the email */
}

.ai-staged-email {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: auto 2rem auto 0.01rem;
}

.ai-staged-role {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.ai-staged-role svg {
    flex-shrink: 0;
}

/* Tablet + desktop: the role sits inline to the right of the email instead of
   stacked beneath it. Mobile keeps the stacked layout. */
@media (min-width: 650px) {
    .ai-staged-email-block {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .ai-staged-email {
        flex: 0 1 auto;
        min-width: 0;     /* let a long email ellipsis, leaving room for the role */
    }

    .ai-staged-role {
        margin-top: 0;
        flex-shrink: 0;
    }
}

.ai-delete-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
}

.ai-delete-btn:hover {
    background: #fee2e2;
}

.ai-staged-perms {
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.btn-stop-impersonate {
    color: #92400e;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 0.375rem;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 0.75rem;
}

/* --- Nav Utility Button (shared by FeedbackButton / WhatsNewButton) --- */
.nav-utility-btn {
    color: rgba(255,255,255,0.82);
    background: none;
    border: none;
    border-radius: 6px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    padding: 0 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    text-decoration: none;
}

.nav-utility-btn:hover {
    background-color: rgba(255,255,255,0.12);
    color: white;
}

.nav-utility-icon {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/* --- Login Page --- */
.login-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-app);
    align-items: stretch;
}

.login-panel--left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(155deg, #001A35 0%, #0077C5 100%);  /* brand hero — intentionally fixed across themes */
    color: var(--text-on-accent);
    padding: 2.5rem 2.5rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.login-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    margin-bottom: 2rem;
}

.login-hero {
    margin-bottom: 2.25rem;
}

.login-hero h1 {
    font-size: var(--fluid-hero);
    white-space: nowrap;
}

.login-hero-title {
    font-size: 1.6rem;
    line-height: 1.35;
    margin-bottom: .75rem;
    font-weight: 550;
}

.login-hero-sub {
    font-size: 1rem;
    opacity: .85;
    line-height: 1.55;
    margin: 0;
}

.login-image-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 -.5rem;
}

.login-img-card {
    position: relative;
    width: 58%;
    max-width: 380px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
}

.login-img-card--front {
    align-self: flex-end;
    z-index: 1;
}

.login-img-card--back {
    align-self: flex-start;
    margin-top: -20%;
    z-index: 2;
}

@media (min-width: 1400px) {
    .login-img-card--back {
        margin-top: -16%;
    }
}

.login-img-placeholder {
    width: 100%;
    padding-top: 72%;
    background: rgba(255,255,255,.12);
    border: 2px dashed rgba(255,255,255,.3);
    border-radius: 14px 14px 0 0;
    position: relative;
}

.login-img-placeholder::after {
    content: '+ Image';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
    font-weight: 600;
    letter-spacing: .04em;
}

.login-img-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.login-img-label {
    display: block;
    text-align: right;
    font-size: .9rem;
    font-weight: 550;
    padding: .5rem 1.25rem;
    background: rgba(0,0,0,.25);
    letter-spacing: .075em;
}

.login-copyright {
    font-size: .72rem;
    opacity: .55;
    margin: 1.5rem 0 0;
    text-align: left;
}

.login-panel--right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    padding: 3rem 2rem;
}

.login-form-wrap {
    width: 100%;
    max-width: 420px;
}

/* Sign-up form is taller than login; on phones pin it near the top (≈2rem above
   the title) instead of vertically centering, so the title isn't pushed down. */
@media (max-width: 768px) {
    .login-register .login-form-wrap {
        margin-bottom: auto;
    }
}

.login-form-title {
    text-align: center;
    margin-bottom: 1.75rem;
}

/* Theme-aware auth error banner (replaces Bootstrap's .alert-danger so it adapts
   to dark mode): tints the error token for the fill/border in both themes. */
.login-alert {
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-error);
    background: color-mix(in srgb, var(--text-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-error) 35%, transparent);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.login-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.5px solid var(--accent);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .login-checkbox:hover {
        border-color: var(--accent-hover);
        box-shadow: 0 0 0 3px var(--accent-bg);
    }

    .login-checkbox:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .login-checkbox:checked {
        background-color: var(--accent-bg);
        border-color: var(--accent);
    }

        .login-checkbox:checked::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 47%;
            width: 5px;
            height: 9px;
            border: solid var(--accent);
            border-width: 0 2px 2px 0;
            transform: translate(-50%, -55%) rotate(45deg);
        }

.login-forgot {
    font-size: .875rem;
    color: var(--text-link);
    text-decoration: none;
    font-weight: 500;
}

    .login-forgot:hover {
        text-decoration: underline;
    }

.login-submit {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: .03em;
    transition: background .18s, box-shadow .18s;
    margin-bottom: 1.5rem;
}

    .login-submit:hover {
        background: var(--btn-primary-bg-hover);
    }

    .login-submit:active {
        background: var(--btn-primary-bg-active);
    }

    .login-submit:disabled {
        opacity: .6;
        cursor: default;
        box-shadow: none;
    }

.login-signup-prompt {
    text-align: center;
    font-size: .9rem;
    color: var(--text-muted);
    margin: 0;
}

    .login-signup-prompt a {
        color: var(--text-link);
        font-weight: 600;
        text-decoration: none;
    }

    .login-signup-prompt a:hover {
        text-decoration: underline;
    }

@media (max-width: 899.98px) {
    .login-page {
        flex-direction: column;
        position: relative;
    }

    .login-panel--left {
        flex: none;
        min-height: 0;
        /* Vertical padding scales with viewport so the logo keeps the same breathing
           room (~36% of its height) on small iPhones as on larger phones. */
        padding: clamp(14px, 4.6vw, 20px) 1.5rem;
        align-items: center;
        justify-content: center;
        position: static;
        overflow: visible;
    }

    .login-logo {
        /* Shrink the logo on narrow screens (below ~430px) instead of a fixed 56px,
           so small phones don't feel cramped; caps at 56px on larger phones. */
        height: clamp(42px, 13vw, 56px);
        margin-bottom: 0;
    }

    .login-hero,
    .login-image-stack {
        display: none;
    }

    .login-panel--right {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 1.5rem 1.25rem 6rem;
    }


    .login-copyright {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0.85rem 1.25rem;
        text-align: center;
        color: var(--text-muted);
        opacity: 1;
    }
}
    .btn-stop-impersonate:hover {
        background-color: #fde68a;
    }

/* --- Select Contractor Page --- */
.sc-select-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 10%;
}

@media (max-width: 649.98px) {
    .sc-select-wrap {
        padding: 2rem 0rem;
    }

    .sc-select-card {
        max-width: 95vw;
    }
}

.sc-select-card {
    width: 100%;
    max-width: 650px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
    overflow: hidden;
}

.sc-select-header {
    background: linear-gradient(135deg, #001A35 0%, #0077C5 100%);
    color: #fff;
    padding: 2rem 2rem 1.75rem;
    text-align: center;
}

.sc-select-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
}

.sc-select-title {
    font-size: 2rem;
    margin: 0 0 0.4rem;
    color: #fff;
}

.sc-select-sub {
    opacity: 0.8;
    margin: 0;
    line-height: 1.5;
}

.sc-select-list {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.5rem;
}

.sc-select-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

    .sc-select-item:hover {
        background: #f0f4f9;
        border-color: #0077C5;
        box-shadow: 0 0 0 2px rgba(0,119,197,.1);
    }

    .sc-select-item:active {
        background: #e5eef8;
    }

.sc-select-item-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    line-height: 1;
    align-self: flex-start;
    margin-top: 0.55rem;
}

.sc-select-item-body {
    flex: 1;
    min-width: 0;
}

.sc-select-item-name {
    margin: 0.15rem;
    letter-spacing: 0.05rem;
}

.sc-select-item-addr {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.5rem;
}

.sc-select-item-arrow {
    font-size: 1.25rem;
    color: var(--text-faint);
    flex-shrink: 0;
    line-height: 1;
}

    .sc-select-item:hover .sc-select-item-arrow {
        color: #0077C5;
    }

.sc-select-empty {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sc-select-create {
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;
    border-top: 1px solid #f3f4f6;
}

.sc-select-create-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0077C5;
    text-decoration: none;
    transition: color 0.15s;
}

    .sc-select-create-link:hover {
        color: #005fa3;
        text-decoration: underline;
    }

/* ── Create Company page ── */

.sc-create-card {
    max-width: 860px !important;
}

.sc-create-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Symmetric padding reserves room for the absolutely-positioned ✕ on the right
       (and keeps the title optically centered on the card). */
    padding: 0 2rem;
    text-align: center;
}

/* Fluid scaling so the centered title shrinks on small screens instead of
   wrapping to two lines or running under the ✕. */
.sc-create-card .sc-select-title {
    font-size: clamp(1.15rem, 5vw, 2rem);
    white-space: nowrap;
}

.sc-create-card .sc-select-sub {
    text-align: center;
}

.sc-create-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    line-height: 1;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

    .sc-create-close:hover {
        color: #fff;
        background: rgba(255,255,255,.15);
    }

.sc-create-form {
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}

    @media (max-width: 600px) {
        .sc-create-form {
            grid-template-columns: 1fr;
        }

        /* Stacked (single-column) layout: show Phone + its notification disclaimer
           above Address 1. Desktop keeps the Address 1 | Phone two-up row, so this
           reorder is scoped to the mobile breakpoint. Full sequence is assigned
           because `order` re-sorts every item against the default-0 baseline. */
        .sc-create-form .form-group:nth-child(1) { order: 1; }   /* Company Name  */
        .sc-create-form .form-group:nth-child(2) { order: 2; }   /* Company Email */
        .sc-create-form .form-group:nth-child(4) { order: 3; }   /* Phone Number  */
        .sc-create-form .form-group:nth-child(3) { order: 4; }   /* Address 1     */
        .sc-create-form .form-group:nth-child(5) { order: 5; }   /* Address 2     */
        .sc-create-form .form-group:nth-child(6) { order: 6; }   /* City          */
        .sc-create-form .form-group:nth-child(7) { order: 7; }   /* Zipcode       */
        .sc-create-form .form-group:nth-child(8) { order: 8; }   /* State         */
    }

.sc-create-actions {
    padding: 0.5rem 2rem 1.75rem;
    display: flex;
    justify-content: center;
}

.sc-create-submit {
    padding: 0.75rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: #9ca3af;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.18s, box-shadow 0.18s;
    min-width: 240px;
}

    .sc-create-submit:not(:disabled):hover {
        background: #0077C5;
    }

    .sc-create-submit:not(:disabled) {
        background: #0077C5;
    }

    .sc-create-submit:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

.dialog-error-list {
    margin: 0 2rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: var(--text-error);
    font-size: 0.875rem;
}

    .dialog-error-list ul {
        margin: 0;
        padding-left: 1.25rem;
    }

    .dialog-error-list li {
        margin-bottom: 0.2rem;
    }
.settings-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.5rem;
}

.settings-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
}

.settings-card .form-input,
.settings-card .form-select {
    max-width: 300px;
}

.settings-card-header h3 {
    margin: 0 0 0.2rem;
}

.settings-card-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.settings-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1.25rem 0 1.5rem;
}

.settings-readonly {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 0.45rem 0;
    display: block;
}

.settings-success {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 0.375rem;
    color: #166534;
    font-size: 0.85rem;
    width: fit-content;     /* hug the text instead of spanning the full card width */
    max-width: 100%;
}

.settings-sub-card {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
}

.settings-check-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

    .settings-check-label input[type=checkbox] {
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        accent-color: #FF4E00;
    }

.settings-card-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.settings-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 700px) {
    .settings-card-cols {
        grid-template-columns: 1fr;
    }
}

.page-content.settings-page {
    padding: 30px;
    flex: 0 0 auto;
}

.settings-company-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
}

    .settings-company-grid .form-input,
    .settings-company-grid .form-select {
        max-width: 100%;
        width: 100%;
    }

.settings-card-actions-left {
    justify-content: flex-start;
}

.settings-actions-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color-2);
}

    .settings-actions-row .settings-actions-left {
        grid-column: 1 / span 2;
        display: flex;
        gap: 0.75rem;
    }

    .settings-actions-row .settings-company-transfer {
        grid-column: 3;
        width: 100%;
    }

.settings-notif-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .settings-company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-actions-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .settings-actions-row .settings-actions-left {
            grid-column: 1;
        }

        .settings-actions-row .settings-company-transfer {
            grid-column: 2;
        }
}

@media (max-width: 700px) {
    .settings-company-grid {
        grid-template-columns: 1fr;
    }

    .settings-notif-inline {
        grid-template-columns: 1fr;
    }

    .settings-actions-row {
        grid-template-columns: 1fr;
    }

        .settings-actions-row .settings-actions-left {
            grid-column: 1;
        }

        .settings-actions-row .settings-company-transfer {
            grid-column: 1;
        }
}

.settings-card-danger {
    text-align: center;
    border-color: #fecaca;
    background-color: #fef2f2;
    margin-bottom: 2rem;
}

.settings-card-danger.settings-card-danger-collapsed {
    text-align: left;
}

/* ── Accordion (global) ── */
:root {
    --accordion-anim-duration: 1s;
    --accordion-anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-card-header-clickable {
    cursor: pointer;
    user-select: none;
}

.settings-card-header .chevron {
    margin-right: 0.5rem;
    vertical-align: -0.08em;
}

.accordion-body {
    animation: accordion-body-in var(--accordion-anim-duration) var(--accordion-anim-ease) both;
    overflow: hidden;
}

@keyframes accordion-body-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-body {
        transition: none;
        animation: none;
    }
}

.settings-danger-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}

.settings-danger-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 auto 1.25rem;
    max-width: 480px;
    line-height: 1.6;
}

.settings-danger-action {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.settings-delete-confirm {
    margin-top: 1rem;
    color: var(--text-primary);
}

.settings-delete-confirm-line {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0 0 0.25rem;
}

.settings-delete-confirm-line + .settings-delete-confirm-line {
    font-size: 0.875rem;
    margin-bottom: 1.65rem;
}

.settings-delete-confirm-input {
    margin: 0 auto 2rem;
}

.settings-delete-confirm .form-input::placeholder {
    color: var(--text-faint);
    font-style: italic;
}

/* Delete Company card: keep all text at primary in both themes */
.settings-card-danger .settings-card-header h3,
.settings-card-danger .settings-card-header p {
    color: var(--text-primary);
}

[data-theme="dark"] .settings-card-danger .settings-card-header h3,
[data-theme="dark"] .settings-card-danger .settings-card-header p {
    color: var(--text-primary);
}

.btn-delete-company {
    background: #f9fafb;
    border: 1.5px solid var(--text-error);
    color: var(--text-error);
    border-radius: 0.375rem;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

    .btn-delete-company:hover {
        background: #fef2f2;
    }

.btn-transfer {
    background: var(--bg-surface-2);
    border: 1.5px solid #FF4E00;
    color: #FF4E00;
    border-radius: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

    .btn-transfer:hover {
        background: var(--bg-hover);
    }

/* ── SelectContractor hint ── */

.sc-select-create-hint {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── SelectContractor leaving overlay ── */
/* Fades in a translucent backdrop-blur over the page while the click → navigate
   delay plays out, so the swap to the dashboard's loading state isn't a hard cut. */

.sc-leaving-overlay {
    position: fixed;
    inset: 0;
    background: rgba(249, 250, 251, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    opacity: 0;
    pointer-events: auto;
    animation: sc-leaving-fade-in 260ms ease-out forwards;
}

@keyframes sc-leaving-fade-in {
    to { opacity: 1; }
}

[data-theme="dark"] .sc-leaving-overlay {
    background: rgba(22, 32, 48, 0.5);
}

/* ── Date filter ── */

.date-filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-filter-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.date-filter-input {
    width: auto;
    min-width: 0;
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
}

/* ── Feedback table ── */

.feedback-date {
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-muted);
    width: 12rem;
}

.feedback-message {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Exception logs table ── */

.exception-log-date {
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-muted);
    width: 12rem;
}

.exception-log-message {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Exception log occurrences dialog ── */

.elo-message {
    color: var(--text-muted);
}

.elo-stack-trace {
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0;
}

.elo-grouped-heading {
    margin-top: 1.25rem;
}

.elo-grouped-table {
    width: 100%;
    border-collapse: collapse;
}

.elo-grouped-table th {
    text-align: left;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.elo-grouped-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.elo-query-cell,
.elo-body-cell {
    font-family: monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Onboarding dialog ── */

.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.onboard-card {
    position: relative;
    background: var(--bg-surface);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: min(95vw, 1000px);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    padding: 2rem 2rem 1.5rem;
    animation: dialog-in 0.2s ease;
}

.onboard-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-faint);
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

    .onboard-close:hover {
        color: var(--text-secondary);
        background: var(--bg-surface-3);
    }

.onboard-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.onboard-title {
    margin: 0 0 1rem;
}

.onboard-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 1.25rem;
}

.onboard-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.onboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 600px) {
    .onboard-actions {
        grid-template-columns: 1fr;
    }
}

.onboard-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.625rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .onboard-action-card:hover {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-bg);
    }

.onboard-action-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
}

    .onboard-action-icon svg {
        width: 100%;
        height: 100%;
    }

.onboard-action-title {
    font-size: 1rem;
}

.onboard-action-desc {
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
}

.onboard-action-btn {
    margin-top: 0.5rem;
    padding: 0.55rem 1.25rem;
    background: var(--btn-accent);
    color: var(--text-on-accent);
    font-size: 0.875rem;
    font-weight: 550;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    transition: background 0.15s;
}

    .onboard-action-card:hover .onboard-action-btn:not(.onboard-action-btn-secondary) {
        background: var(--btn-accent-hover);
    }

.onboard-footer {
    text-align: center;
}

.onboard-skip {
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

    .onboard-skip:hover {
        color: var(--text-secondary);
    }

.onboard-invite-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    gap: 1rem;
}

.onboard-invite-footer-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.onboard-back-btn {
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--accent);
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    text-decoration: underline;
}

    .onboard-back-btn:hover {
        color: var(--accent-hover);
    }

.onboard-sending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.onboard-sending-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Onboarding action status badge ── */

.onboard-action-btn-secondary {
    background: var(--bg-surface-3);
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── Onboarding clients tab nav ── */

/* tab-nav, tab-btn, tab-btn-active defined in Settings Tab Nav section below */

/* ── Onboarding client section label ── */

.onboard-client-section-label {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

/* ── Onboarding address block ── */

.onboard-address-block {
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0 1rem;
    margin-bottom: 0.75rem;
}

.onboard-address-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    background: none;
    border: none;
    padding: 0.85rem 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.onboard-address-block-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0;
}

.onboard-address-block .form-grid {
    margin-bottom: 0.875rem;
}

/* Mobile single-column: stack Zip Code above State (desktop keeps State | Zip side-by-side). */
@media (max-width: 600px) {
    .onboard-address-block .form-grid-2 .form-group:nth-child(1) { order: 1; } /* Address Name   */
    .onboard-address-block .form-grid-2 .form-group:nth-child(2) { order: 2; } /* Address Line 1 */
    .onboard-address-block .form-grid-2 .form-group:nth-child(3) { order: 3; } /* Address Line 2 */
    .onboard-address-block .form-grid-2 .form-group:nth-child(4) { order: 4; } /* City           */
    .onboard-address-block .form-grid-2 .form-group:nth-child(6) { order: 5; } /* Zip Code       */
    .onboard-address-block .form-grid-2 .form-group:nth-child(5) { order: 6; } /* State          */
    .onboard-address-block .form-grid-2 .form-group:nth-child(7) { order: 7; } /* Contact Phone  */
}

/* ── Onboarding add address / client row ── */

.onboard-client-add-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.onboard-add-address-link {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

    .onboard-add-address-link:hover {
        text-decoration: underline;
    }

/* ── Onboarding CSV tab ── */

.onboard-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bg-surface-3);
    border: 1.5px solid var(--input-border);
    color: var(--text-secondary);
    border-radius: 0.375rem;
    padding: 0.45rem 1rem;
    text-decoration: none;
    cursor: pointer;
}

    .onboard-template-btn:hover {
        background: var(--border-color);
    }

.onboard-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--input-border);
    border-radius: 0.5rem;
    padding: 2.5rem 1rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

    .onboard-drop-zone:hover {
        border-color: var(--accent);
        background: var(--accent-bg);
    }

.onboard-drop-icon {
    color: var(--text-faint);
    margin-bottom: 0.25rem;
}

.onboard-drop-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.onboard-drop-link {
    color: var(--accent);
    font-weight: 600;
}

/* ── Onboarding client info grid (responsive: 1 / 2 / 4 cols) ── */

.onboard-client-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
    .onboard-client-grid {
        grid-template-columns: 1fr;
    }
}

/* On wide desktops the client info fits one 4-col row (card width inherits the .onboard-card base) */
@media (min-width: 900px) {
    .onboard-card-wide .onboard-client-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.settings-roles-btn {
    display: block;
    width: 100%;
    margin-bottom: 0.75rem;
    text-align: left;
}

/* ── Employee Roles Dialog (erl-*) ── */

.erl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.erl-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.erl-add-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.erl-count {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0 0 0.5rem;
}

.erl-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.erl-item {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.erl-item-expanded {
    border-color: var(--accent);
}

.erl-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--bg-surface);
    user-select: none;
    transition: background 0.12s;
}

    .erl-item-header:hover {
        background: var(--bg-surface-2);
    }

.erl-item-info {
    flex: 1;
    min-width: 0;
}

.erl-item-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.erl-perm-count {
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 500;
}

.erl-edit-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

    .erl-edit-btn:hover {
        color: var(--accent);
        background: var(--bg-surface-3);
    }

.erl-perm-detail {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem 0.5rem;
    background: var(--bg-surface-2);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.75rem;
}

.erl-perm-group {
    min-width: 0;
}

.erl-perm-detail .perm-group-label {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.erl-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color-2);
    margin-top: 0.5rem;
}

.erl-back-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 899.98px) {
    .erl-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .erl-add-btn {
        align-self: stretch;
    }
}

@media (max-width: 600px) {
    .erl-perm-detail {
        grid-template-columns: 1fr;
    }
}

/* ── Settings Tab Nav ── */

.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 1.25rem;
}

.tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

    .tab-btn:hover {
        color: var(--text-secondary);
    }

.tab-btn-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── Billing Section ── */

.billing-section-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.6rem;
}

.billing-empty {
    font-size: 0.875rem;
    color: var(--text-faint);
    margin-bottom: 1.5rem;
}

.billing-payment-row {
    padding-top: 0.5rem;
}

.badge-billing-paid {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-billing-failed {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.stripe-payment-form {
    padding: 1rem 0 0.5rem 0;
}

.stripe-payment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ── Webhooks tab ── */
.webhook-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.webhook-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-color-2);
    flex-wrap: wrap;
}

.webhook-row:last-child {
    border-bottom: none;
}

.webhook-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 220px;
    flex: 0 0 220px;
}

.webhook-event-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.webhook-event-desc {
    font-size: 0.78rem;
    color: var(--text-faint);
}

.webhook-row-input {
    flex: 1 1 280px;
    min-width: 200px;
}

.webhook-url-input {
    width: 100%;
}

.webhook-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 36px;
}

.webhook-save-btn {
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
}

.webhook-save-error {
    font-size: 0.8rem;
    color: var(--text-error);
}

.webhook-save-success {
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 500;
}

.webhook-content-wrapper {
    position: relative;
}

.webhook-content-locked {
    max-height: clamp(220px, 38vh, 360px);
    overflow: hidden;
}

.webhook-content-locked > :not(.webhook-accept-overlay) {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
}

.webhook-accept-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 250, 251, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    z-index: 5;
}

.webhook-accept-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 640px;
    padding: 1.5rem 2rem;
    text-align: center;
}

.webhook-accept-message {
    margin: 0;
    color: var(--text-primary, #1f2937);
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 500;
}

.webhook-accept-btn {
    min-width: 160px;
}

[data-theme="dark"] .webhook-accept-overlay {
    background: rgba(17, 24, 39, 0.55);
}

[data-theme="dark"] .webhook-accept-message {
    color: var(--text-primary);
}



/* -- Notification Templates tab -- */
.notif-tpl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.notif-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.notif-tpl-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color-2);
}

.notif-tpl-row:last-child {
    border-bottom: none;
}

.notif-tpl-info {
    flex: 0 0 220px;
    min-width: 0;
}

.notif-tpl-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-tpl-meta {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-top: 0.1rem;
}

.notif-tpl-body-preview {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-tpl-badge {
    font-size: 0.73rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.notif-tpl-badge-active {
    background: #dcfce7;
    color: #16a34a;
}

.notif-tpl-badge-inactive {
    background: var(--bg-surface-3);
    color: var(--text-faint);
}

.notif-tpl-actions {
    position: relative;
    flex-shrink: 0;
}

/* Variable-picker editor */
.var-editor-wrap {
    position: relative;
}

.var-editor {
    width: 100%;
    min-height: 110px;
    font-size: 1rem;
    line-height: 1.55;
    font-family: inherit;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 0.4rem;
    outline: none;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--input-text);
    cursor: text;
}

.var-editor:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.2);
}

.var-token {
    display: inline;
    font-weight: 700;
    color: var(--accent-strong);
    background: var(--accent-bg);
    border-radius: 3px;
    padding: 0 2px;
    cursor: default;
    user-select: all;
    white-space: nowrap;
}

.var-dropdown {
    position: absolute;
    z-index: 9999;
    background: var(--bg-surface);
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    min-width: 220px;
    max-height: 260px;
    overflow-y: auto;
}

.var-dropdown-item {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-color-2);
    cursor: pointer;
}

.var-dropdown-item:last-child {
    border-bottom: none;
}

.var-dropdown-item:hover,
.var-dropdown-item.highlighted {
    background: var(--accent-bg);
}

.var-dropdown-item-name {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.var-dropdown-item-key {
    font-size: 0.78rem;
    color: var(--text-faint);
}

.var-char-count {
    font-size: 0.78rem;
    color: var(--text-faint);
    text-align: right;
    margin-top: 0.25rem;
}

.var-char-count.over-limit {
    color: var(--text-error);
    font-weight: 600;
}

/* Notification template dialog inline row */
.notif-tpl-inline-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
}


/* ══════════════════════════════════════════
   DARK THEME OVERRIDES  [data-theme="dark"]
   ══════════════════════════════════════════ */

[data-theme="dark"] .page-content,
[data-theme="dark"] .page-content-full {
    background: var(--bg-app);
}

/* --- Layout / Sidebar --- */
[data-theme="dark"] .sidebar {
    background: var(--sidebar-bg);
    background-attachment: fixed;
}

/* --- Page chrome --- */
[data-theme="dark"] .top-bar {
    background: var(--bg-surface);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .top-bar-crumb,
[data-theme="dark"] .top-bar-item {
    color: var(--text-secondary);
}

/* --- Cards --- */
[data-theme="dark"] .settings-card,
[data-theme="dark"] .card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-sub-card {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-card-header h3,
[data-theme="dark"] .settings-card-header p {
    color: var(--text-secondary);
}

[data-theme="dark"] .settings-divider {
    border-color: var(--border-color);
}

[data-theme="dark"] .settings-readonly {
    color: var(--text-secondary);
}

/* --- Table scroll container --- */
[data-theme="dark"] .table-scroll {
    border-color: var(--border-color);
}

/* --- Table section header --- */
[data-theme="dark"] .table-section-header td {
    background: var(--bg-surface-3);
    color: var(--text-muted);
    border-color: var(--border-color);
}
[data-theme="dark"] .table-section-header td:hover {
    background: var(--bg-surface-3);
}

/* --- Inputs, selects, textareas --- */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"] {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0,184,245,0.2);
}

[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled {
    background: var(--bg-surface-3);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Native <input type="date"> picker popup matches dark theme. */
[data-theme="dark"] input[type="date"].form-input {
    color-scheme: dark;
}

    [data-theme="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator:hover {
        background: var(--bg-surface-3);
    }

/* TimePickerInline / DatePickerInline dark overrides. */
[data-theme="dark"] .tp-wrap .tp-value {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
}

    [data-theme="dark"] .tp-wrap .tp-value:focus {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
    }

[data-theme="dark"] .tp-value::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .tp-wrap:focus-within {
    box-shadow: 0 0 0 2px rgba(0, 184, 245, 0.2);
}

[data-theme="dark"] .dp-wrap.dp-open .dp-field,
[data-theme="dark"] .dp-field:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 184, 245, 0.2);
}

[data-theme="dark"] .dp-popup-footer {
    border-top-color: var(--border-color);
}

/* Address search dropdown badges — muted for dark surface */
[data-theme="dark"] .addr-badge-sc {
    background: rgba(254, 215, 170, 0.12);
    color: #fdba74;
    border-color: rgba(254, 215, 170, 0.28);
}

[data-theme="dark"] .addr-badge-sensor {
    background: rgba(252, 165, 165, 0.12);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.28);
}


/* --- Buttons --- */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-secondary-view,
[data-theme="dark"] .btn-cancel {
    background: transparent;
    border-color: var(--accent);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary-view:hover,
[data-theme="dark"] .btn-cancel:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-icon {
    color: var(--text-muted);
}

[data-theme="dark"] .btn-icon:hover {
    background: var(--bg-surface-3);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-danger {
    background: #450a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

[data-theme="dark"] .btn-danger:hover {
    background: #7f1d1d;
}

/* --- Page header --- */
[data-theme="dark"] .page-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 {
    color: var(--text-primary);
}

/* --- Tab nav --- */
[data-theme="dark"] .tab-nav {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tab-btn {
    color: var(--text-muted);
}

[data-theme="dark"] .tab-btn:hover {
    color: var(--text-secondary);
}

[data-theme="dark"] .tab-btn-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- Info strip --- */
[data-theme="dark"] .info-strip-item {
    color: var(--text-secondary);
}

[data-theme="dark"] .info-strip-item + .info-strip-item::before {
    background: linear-gradient(to bottom, transparent, var(--border-color) 50%, transparent);
}

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--border-color);
}

/* --- Dialogs / Modals --- */
[data-theme="dark"] .fixed-dialog-backdrop {
    background: rgba(0,0,0,0.6);
}

[data-theme="dark"] .fixed-dialog-box {
    background: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

[data-theme="dark"] .fixed-dialog-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .fixed-dialog-footer {
    border-top-color: var(--border-color);
    background: var(--bg-surface-2);
}

[data-theme="dark"] .fixed-dialog-title {
    color: var(--text-primary);
}

/* --- Perm rows / groups --- */
[data-theme="dark"] .perm-row {
    border-bottom-color: var(--border-color-2);
    color: var(--text-secondary);
}

[data-theme="dark"] .perm-group-label {
    color: var(--text-faint);
    border-bottom-color: var(--border-color-2);
}

/* --- Permission group cards (ar-perm-group) --- */
[data-theme="dark"] .ar-perm-group {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .ar-perm-group-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .ar-perm-group-title {
    color: var(--text-secondary);
}

/* --- Toggle track --- */
[data-theme="dark"] .ar-toggle-track {
    background: #2e4a63;
}

/* --- ERL detail panel --- */
[data-theme="dark"] .erl-perm-detail {
    background: var(--bg-surface-2);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .erl-perm-detail .perm-group-label {
    color: var(--text-primary);
}

/* --- Service call layout --- */
[data-theme="dark"] .sc-sensors-scroll {
    background: var(--bg-surface-2);
}


/* --- Notifications template list --- */
[data-theme="dark"] .notif-tpl-badge-inactive {
    background: var(--bg-surface-3);
    color: var(--text-faint);
}

/* --- Var editor --- */
[data-theme="dark"] .var-editor:focus {
    box-shadow: 0 0 0 2px rgba(0,184,245,0.2);
}

/* --- Webhook rows --- */
/* --- Settings: billing --- */
/* (base rules use CSS vars — no dark overrides needed) */

/* --- Addr / sensor secondary text --- */
[data-theme="dark"] .settings-readonly {
    color: var(--text-muted);
}

/* --- Search input wrapper --- */
[data-theme="dark"] .search-input-wrap input {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* --- Loading / empty states --- */
[data-theme="dark"] .empty-state {
    color: var(--text-muted);
}

/* --- Impersonation banner (keep warm amber) --- */
[data-theme="dark"] .impersonating-banner {
    background-color: #2d1800;
    border-color: #92400e;
}

/* --- Appearance section (dark mode toggle) --- */
.appearance-section {
    margin-top: 1.5rem;
}

.appearance-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.theme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0;
}

.theme-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.theme-toggle-label span:first-child {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

.theme-toggle-label span:last-child {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--input-border);
    border-radius: 26px;
    transition: background 0.2s;
    cursor: pointer;
}

.theme-toggle-track::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.theme-toggle-switch input:checked + .theme-toggle-track {
    background: var(--toggle-on-bg);
}

.theme-toggle-switch input:checked + .theme-toggle-track::before {
    transform: translateX(22px);
}

/* Appearance card keeps its small gap below User Info on desktop (was an inline style). */
.settings-card-appearance {
    margin-top: 1rem;
}

/* ══════════════════════════════════════════
   SETTINGS — MOBILE DRILL-DOWN  (≤649.98px)
   Phone: a single-column category list ⇄ the category's accordion cards.
   Desktop/tablet (≥650px) is untouched — horizontal tabs + accordion cards.
   ══════════════════════════════════════════ */

/* Back button: hidden everywhere by default; shown only in mobile detail (below). */
.settings-mobile-back {
    display: none;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    padding: 0.5rem 0;
    margin: 0 0 0.75rem;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    min-height: 40px;
}

@media (max-width: 649.98px) {
    .page-content.settings-page {
        padding: var(--space-4);
    }

    /* Page title only heads the list; in detail the back button stands in for it. */
    .settings-mobile-detail .page-header {
        display: none;
    }

    /* ── Category nav becomes a single-column list ── */
    .settings-mobile-list .settings-cat-nav {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

    .settings-mobile-list .settings-cat-nav .tab-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        margin: 0;
        padding: 0.95rem 0.25rem;
        font-size: var(--fs-body);
        font-weight: 500;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-color);
        min-height: 52px;
    }

    /* Drill-in chevron on the right of each row */
    .settings-mobile-list .settings-cat-nav .tab-btn::after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-left: 0.75rem;
        border-right: 2px solid var(--text-faint);
        border-bottom: 2px solid var(--text-faint);
        transform: rotate(-45deg);
        flex: 0 0 auto;
    }

    /* It's a menu here, not tabs — drop the active-underline treatment */
    .settings-mobile-list .settings-cat-nav .tab-btn-active {
        color: var(--text-primary);
        border-bottom-color: var(--border-color);
        font-weight: 500;
    }

    /* ── List vs detail visibility ── */
    .settings-mobile-list .settings-tab-content { display: none; }
    .settings-mobile-detail .settings-cat-nav { display: none; }
    .settings-mobile-detail .settings-mobile-back { display: flex; }

    /* In detail, the category's accordion cards render exactly as on desktop
       (containers intact); only the back button + hidden list differ. */
}

/* ── Additional dark overrides ── */

/* Top row: white in light mode, fixed gradient in dark mode aligns with sidebar as one surface */
[data-theme="dark"] .top-row {
    background: var(--sidebar-bg);
    background-attachment: fixed;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.82);
}

/* Table scroll border */
[data-theme="dark"] .table-scroll {
    border-color: var(--border-color);
}

/* Search box */
[data-theme="dark"] .search-box {
    background: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .search-box input {
    background: transparent;
    color: var(--input-text);
}

/* Info labels (Attention Needed, etc.) */
[data-theme="dark"] .info-label {
    color: var(--text-primary);
}

/* "Attention Needed" alert value */
[data-theme="dark"] .dash-stat-alert {
    color: var(--text-error);
}

/* Dashboard welcome heading */
/* View (eye) button */
[data-theme="dark"] .btn-view {
    color: var(--accent);
}

[data-theme="dark"] .btn-view::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16' fill='%2300b8f5'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8a13 13 0 0 1-1.66 2.043C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'%2F%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'%2F%3E%3C%2Fsvg%3E");
}

/* Status badges */
[data-theme="dark"] .badge-alerted {
    background: #3b1a0a;
    color: #fdba74;
    border: 1px solid #92400e;
}

[data-theme="dark"] .badge-open-call,
[data-theme="dark"] .badge-deactivating {
    background: #2d1f00;
    color: #fcd34d;
    border: 1px solid #78350f;
}

[data-theme="dark"] .badge-deactivated {
    background: #2d0a0a;
    color: #fca5a5;
    border: 1px solid #7f1d1d;
}

[data-theme="dark"] .badge-monitoring {
    background: #052e16;
    color: #86efac;
    border: 1px solid #166534;
}

[data-theme="dark"] .badge-enabled {
    background: #052e16;
    color: #86efac;
    border: 1px solid #166534;
}

[data-theme="dark"] .badge-priority-low {
    background: #052e16;
    color: #86efac;
}

[data-theme="dark"] .perm-status-on {
    background: #052e16;
    color: #86efac;
}

[data-theme="dark"] .badge-priority-medium {
    background: #2d1f00;
    color: #fcd34d;
}

[data-theme="dark"] .badge-priority-high {
    background: #3b1a0a;
    color: #fdba74;
}

[data-theme="dark"] .badge-priority-emergency {
    background: #2d0a0a;
    color: var(--text-error);
}

[data-theme="dark"] .badge-billing-paid {
    background: #052e16;
    color: #86efac;
}

[data-theme="dark"] .badge-billing-failed {
    background: #2d0a0a;
    color: #fca5a5;
}

/* table-footer rows */
[data-theme="dark"] .table-footer {
    color: var(--text-muted);
    background: var(--bg-surface);
}

/* Card */
[data-theme="dark"] .card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-actions,
[data-theme="dark"] .settings-card-actions {
    border-top-color: var(--border-color);
}

/* Critical sensors dialog */
/* Onboarding dialog */
[data-theme="dark"] .onboard-card {
    background: var(--bg-surface);
    box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

[data-theme="dark"] .onboard-close {
    color: var(--text-muted);
}

[data-theme="dark"] .onboard-close:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .onboard-divider {
    border-top-color: var(--border-color);
}


[data-theme="dark"] .onboard-action-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .onboard-skip:hover {
    color: var(--text-primary);
}

/* Dashboard welcome heading */
/* Dark scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-surface-2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2e4a63;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3d6080;
}

[data-theme="dark"] .cs-table-wrap {
    border-color: var(--border-color);
}

/* sc-section-label */
[data-theme="dark"] .sc-section-label {
    color: var(--text-muted);
}

/* sc-notes */
[data-theme="dark"] .sc-notes-section {
    border-color: var(--border-color);
}

[data-theme="dark"] .sc-notes-list {
    background: var(--bg-surface-2);
}

[data-theme="dark"] .sc-note-item {
    background: var(--bg-surface);
    border-color: var(--border-color);
}

[data-theme="dark"] .sc-note-footer {
    border-top-color: var(--border-color-2);
}

[data-theme="dark"] .sc-note-add {
    background: var(--bg-surface-2);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .sc-note-textarea {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

/* Service call view page */
[data-theme="dark"] .scv-col-notes {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .scv-detail-grid {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .scv-detail-row {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .scv-status-open {
    background: #3b1a0a;
    color: #fdba74;
    border-color: #92400e;
}

[data-theme="dark"] .scv-status-completed {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}

[data-theme="dark"] .scv-status-canceled {
    background: var(--bg-surface-2);
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* View Permissions / vp-summary */
[data-theme="dark"] .vp-summary {
    color: var(--accent-strong);
    background: var(--accent-bg);
}

/* Edit Employee dialog */
[data-theme="dark"] .ee-enabled-count {
    color: var(--accent);
}

/* Employees / Roles section titles */
/* Add Invitation dialog */
[data-theme="dark"] .ai-staged-card {
    border-color: var(--border-color);
}

[data-theme="dark"] .ai-staged-card-header {
    background: var(--bg-surface-2);
}

[data-theme="dark"] .ai-staged-card-header:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .ai-staged-perms {
    background: var(--bg-surface-2);
    border-top-color: var(--border-color);
}

[data-theme="dark"] .ai-delete-btn:hover {
    background: #2d0a0a;
}

/* Select company / create service call flow */
[data-theme="dark"] .sc-select-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .sc-select-item {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .sc-select-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

[data-theme="dark"] .sc-select-create {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .sc-select-create-link {
    color: var(--accent);
}

/* btn-critical */
[data-theme="dark"] .btn-critical {
    background: #b91c1c;
    color: #f9fafb;
    border-color: #b91c1c;
}

    [data-theme="dark"] .btn-critical:hover {
        background: #991b1b;
        border-color: #991b1b;
    }

/* Misc text colors */
[data-theme="dark"] .settings-success,
[data-theme="dark"] .green {
    color: #86efac;
}

/* Dark mode success banner: a darker green fill + border so the light-green text
   reads with contrast — the light-mode pale green (#f0fdf4) washed out on dark. */
[data-theme="dark"] .settings-success {
    background: #0c2a18;
    border-color: #15803d;
}

[data-theme="dark"] .red {
    color: #f87171;
}

/* td-actions sticky cell — high specificity to beat table tbody td */
[data-theme="dark"] table tbody td.td-actions {
    background-color: var(--table-row-bg) !important;
}

[data-theme="dark"] table tbody tr:hover td.td-actions {
    background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] table thead th.td-actions {
    background-color: var(--table-head-bg) !important;
}

/* --- Notification template badges --- */
[data-theme="dark"] .notif-tpl-badge-active {
    background: #052e16;
    color: #86efac;
}

/* --- Billing badges --- */
[data-theme="dark"] .badge-billing-paid {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}

[data-theme="dark"] .badge-billing-failed {
    background: #2d0a0a;
    color: #fca5a5;
    border-color: #7f1d1d;
}

/* --- btn-stop-impersonate (keep amber warning tone) --- */
[data-theme="dark"] .btn-stop-impersonate {
    background-color: #2d1800;
    border-color: #92400e;
    color: #fcd34d;
}

/* --- btn-delete-company --- */
[data-theme="dark"] .btn-delete-company {
    background: var(--bg-surface-2);
}

[data-theme="dark"] .btn-delete-company:hover {
    background: #2d0a0a;
}

/* --- btn-transfer --- */
[data-theme="dark"] .btn-transfer {
    background: var(--bg-surface-2);
    border-color: #FF4E00;
    color: #FF4E00;
}

[data-theme="dark"] .btn-transfer:hover {
    background: #2d1200;
}

/* --- sensor-edit-error --- */
[data-theme="dark"] .sensor-edit-error {
    border-bottom-color: #450a0a;
}

/* --- Onboarding payment success icon --- */
[data-theme="dark"] .opm-success-icon {
    background: #052e16;
    color: #86efac;
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
#acdw-toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 19999;
    pointer-events: none;
}

.acdw-toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 2rem));
    padding: 0.6rem 0.875rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 18px rgba(0,0,0,0.32);
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: all;
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.acdw-toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.acdw-toast-out {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.acdw-toast-success {
    background: #166534;
    color: #dcfce7;
    border: 1px solid #4ade80;
}

.acdw-toast-success .acdw-toast-icon::before { content: "✓"; font-weight: 700; }

.acdw-toast-error {
    background: #7f1d1d;
    color: #fee2e2;
    border: 1px solid #f87171;
}

.acdw-toast-error .acdw-toast-icon::before { content: "✕"; font-weight: 700; }

.acdw-toast-info {
    background: #1e3a5f;
    color: #dbeafe;
    border: 1px solid #60a5fa;
}

.acdw-toast-info .acdw-toast-icon::before { content: "ℹ"; font-weight: 700; }

.acdw-toast-msg { flex: 1; }

.acdw-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1.15rem;
    line-height: 1;
    opacity: 0.7;
    padding: 0 0 0 0.25rem;
    flex-shrink: 0;
}

.acdw-toast-close:hover { opacity: 1; }