/* ── 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;
    --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);

    /* ── 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;
    --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;
    }
}

/* ── 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 left-aligns its badge, so on wider tablets the badge stays left instead of being shoved to the right edge, and every row still lines up the same. ── */
@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. */
    .table-scroll td.dcol-status {
        order: 3;
        flex: 1 1 0;
        min-width: 14rem;
        padding: 0 0 0 0.75rem;
        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): center the Status column and its badges. ── */
@media (min-width: 900px) {
    .table-scroll thead th.dash-status-head {
        text-align: center;
    }

    .table-scroll td.dcol-status {
        text-align: center;
    }
}

/* ── 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: 2.75rem;     

    }

    .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%;
    }
}

@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.ccol-first) {
        display: grid;
        grid-template-columns: max-content max-content minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        column-gap: 0;
        padding-right: 4.25rem;      /* clear the floating view + kebab icons */
    }

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

    .table-scroll td.ccol-last {
        padding-left: 0.3rem;        /* small gap so "First Last" reads as one name */
    }

    /* 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;
    }

    /* 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;
    }
}

/* ── Addresses cards (<900px) */
@media (max-width: 899.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–900px): labelled columns separated by full-height vertical dividers; action icons vertically centered. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.acol-name) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) 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;
    }

    /* Action icons sit inline as the last column, vertically centered in the
       full-height cell, with a divider on the left. */
    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        position: static;
        transform: none;
        justify-self: end;
        display: flex;
        align-items: center;
        padding-left: 0.5rem;
        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-contact,
    .table-scroll td.acol-status {
        padding: 0 0 0 0.5rem;
        border-left: 1px solid var(--border-color);
    }

    /* "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-contact::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 nickname + address with action icons inline; row 2 status indented to the address; contact hidden. */
@media (max-width: 649.98px) {
    .table-scroll tbody tr:has(.acol-name) {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "name    address  actions"
            ".       status   status";
        column-gap: 0.5rem;
        row-gap: 1rem;
        align-items: start;
    }

    .table-scroll td.acol-status {
        grid-area: status;
        padding: 0;
    }

    /* Nickname sits inline-left of the address with a muted em-dash separator. */
    .table-scroll td.acol-name {
        grid-area: name;
        align-self: start;
        white-space: nowrap;
    }

        .table-scroll td.acol-name::after {
            content: " — ";
            color: var(--text-muted);
            font-weight: 400;
        }

    .table-scroll td.acol-address {
        grid-area: address;
        padding: 0;
        min-width: 0;
    }

    /* Action icons inline with the name + address (centered against that block),
       no longer floating beside the status badge. */
    .table-scroll tbody tr:has(.acol-name) td.td-actions {
        position: static;
        transform: none;
        grid-area: actions;
        justify-self: end;
        align-self: center;
        padding: 0;
    }

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

/* 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;
    }

    /* Show the battery level before its colour dot. */
    .table-scroll td.scol-battery .indicator-dot {
        order: 2;
    }

    /* 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;
    }
}

/* ── 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 (tablet 650–899px): keep ≥1rem between the header buttons and the first card ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .employees-page .page-header {
        margin-bottom: var(--space-4);
    }
}

/* ── Manage Employees cards (<900px): name row, then labelled Email & Role rows; phone dropped ── */
@media (max-width: 899.98px) {
    .table-scroll tbody tr:has(.ecol-first) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.4rem;
        row-gap: 0.4rem;
        padding-right: 2.75rem;          /* clear the floating action icon */
    }

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

    .table-scroll td.ecol-first { order: 1; }
    .table-scroll td.ecol-last  { order: 2; }

    .table-scroll td.ecol-email {
        order: 3;
        flex: 1 0 100%;
        min-width: 0;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-scroll td.ecol-email::before {
        content: "Email : ";
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-scroll td.ecol-phone {
        display: none;                   /* phone omitted from the mobile card */
    }

    .table-scroll td.ecol-role {
        order: 4;
        flex: 1 0 100%;
        padding: 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

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

    .table-scroll tbody tr:has(.ecol-first) td.td-actions {
        top: var(--space-3);             /* float top-right of the card, not vertically centered */
        right: var(--space-3);
        transform: none;
    }
}

/* ── 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;
    }

    /* Keep the action cell transparent on tap/click — the global desktop
       tr:hover td.td-actions fill otherwise wins on touch (tap = :hover). */
    .table-scroll tbody tr:has(.sccol-priority):hover td.td-actions,
    .table-scroll tbody tr:has(.sccol-priority):active td.td-actions,
    .table-scroll tbody tr:has(.sccol-priority):focus-within td.td-actions {
        background: transparent;
    }
}

/* ── Service Calls cards (tablet, 650–899px): badge stays full-width on top;
   name (+ phone under it) and address sit inline as two even columns split by a
   vertical divider — same treatment as the Dashboard address cards. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.sccol-priority) {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);   /* name 30% / address 70% — pulls the address left */
        align-items: start;
        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%);
    }

    /* Row 1 — priority badge, spans both columns. */
    .table-scroll td.sccol-priority {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0 0 0.35rem;
    }

    /* Left column — name then phone stacked. */
    .table-scroll td.sccol-name {
        grid-column: 1;
        grid-row: 2;
    }

    .table-scroll td.sccol-phone {
        grid-column: 1;
        grid-row: 3;
    }

    /* Right column — address, vertically centered, opened by a full-height divider. */
    .table-scroll td.sccol-address {
        grid-column: 2;
        grid-row: 2 / 4;
        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 {
    animation: page-fade-in 1.5s ease-out both;
}

@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);
    border-color: 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);
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .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;
}

.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='20' height='20' 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);
    border: 1px solid var(--border-color);
    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(--input-border);
    }

    .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 {
    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='16' height='16' viewBox='0 0 16 16' fill='%23ef4444'%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 {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.18s ease;
    transform: rotate(0deg);
}

.ag-chevron-open {
    transform: rotate(90deg);
}

.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-chevron {
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .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);
    left: anchor(center);
    transform: translate(-50%, calc(-100% - 6px));
    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: nowrap;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0s;
}

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

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

/* 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;
}

/* Mobile: single column; Back flush-right 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: end;
    }

    .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%;
    }
}

/* Service Calls title: no h2 margin — the gap to the divider comes solely from
   the shared <Divider/>'s global 1rem, so top/bottom spacing stays symmetric. */
.sc-page .page-header-left h2 {
    margin: 0;
}

/* 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;
    min-height: 42px;
    padding: 0.1rem 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.05rem;
    min-width: 2rem;
}

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

.tp-arrow {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.15rem 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: 10px;
        height: 6px;
        display: block;
    }

.tp-value {
    appearance: none;
    background: transparent !important;
    border: 0;
    color: inherit;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 0.15rem 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: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.tp-sep {
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
    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;
}

    .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) {
    .dialog-close {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 3.75rem;
    }

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

    .fixed-dialog-box:not(:has(.card)) .dialog-title {
        display: flex;
        align-items: center;
        min-height: 3.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;
}

.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;
}

.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;
    }

    .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;
}

.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.4rem;
    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) {
    .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 {
        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-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;
}

.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: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

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

.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: #FF4E00;
}

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

/* 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;
}

.ai-staged-email {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-staged-role {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Left-side accordion chevron: points right when collapsed, rotates down when expanded. */
.ai-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.ai-chevron.expanded {
    transform: rotate(90deg);
}

.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%);
    color: #fff;
    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;
}

.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);
        box-shadow: 0 4px 14px var(--btn-primary-glow);
    }

    .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;
    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;
        box-shadow: 0 4px 14px rgba(0,119,197,.35);
    }

    .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;
}

.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;
}

.accordion-chevron {
    color: var(--text-muted);
    width: 0.9em;
    height: 0.9em;
    display: inline-block;
    transition: transform var(--accordion-anim-duration) var(--accordion-anim-ease);
    vertical-align: -0.08em;
    margin-right: 0.5rem;
}

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

.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-chevron,
    .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;
}

/* ── 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-invite-footer-stack {
    flex-direction: column;
    align-items: stretch;
}

.onboard-invite-footer-stack .onboard-invite-footer-right {
    justify-content: flex-end;
}

.onboard-back-full {
    width: 100%;
}

.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-chevron {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
    transform: rotate(0deg);
}

.onboard-address-chevron-open {
    transform: rotate(90deg);
}

.onboard-address-block .form-grid {
    margin-bottom: 0.875rem;
}

/* ── 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-chevron {
    font-size: 1rem;
    color: var(--text-faint);
    width: 14px;
    flex-shrink: 0;
    line-height: 1;
}

.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(--accent);
}

.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;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.25), 0 2px 10px rgba(185, 28, 28, 0.3);
}

    [data-theme="dark"] .btn-critical:hover {
        background: #991b1b;
        border-color: #991b1b;
        box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.4), 0 3px 14px rgba(185, 28, 28, 0.45);
    }

/* Misc text colors */
[data-theme="dark"] .settings-success,
[data-theme="dark"] .green {
    color: #86efac;
}

[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; }