/* /Components/Account/Pages/ConfirmEmailChange.razor.rz.scp.css */
/* Center the confirmation message on all breakpoints (AccountLayout renders @Body bare). */
.confirm-status[b-stcr7xgwvh] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    text-align: center;
}

.confirm-status-card[b-stcr7xgwvh] {
    width: 100%;
    max-width: 440px;
}

.confirm-status-card h1[b-stcr7xgwvh] {
    margin: 0 0 1rem;
    font-size: 1.5rem;
}
/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
.login-hero-sub[b-dxrkmroqf8] {
    margin: 0 0 1.5rem;
    text-align: center;
}
.login-form-title[b-dxrkmroqf8] {
    font-size: 2rem;
    margin-bottom: .5rem;
}

.h1[b-dxrkmroqf8] {
    text-align: center;
}

/* ── Submit → success cross-fade ──
   Both faces share one grid cell so the container keeps a stable height while the
   form fades out and the success message fades in (no layout jump, any breakpoint). */
.fp-flip[b-dxrkmroqf8] {
    display: grid;
}

.fp-face[b-dxrkmroqf8] {
    grid-area: 1 / 1;
    transition: opacity .4s ease, transform .4s ease, visibility .4s;
}

.fp-face--success[b-dxrkmroqf8] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    pointer-events: none;
}

.fp-flip.is-sent .fp-face--form[b-dxrkmroqf8] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
}

.fp-flip.is-sent .fp-face--success[b-dxrkmroqf8] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.fp-success-icon[b-dxrkmroqf8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    color: var(--success);
    background: var(--success-bg);
}

.fp-success-icon svg[b-dxrkmroqf8] {
    width: 32px;
    height: 32px;
}

.fp-success-title[b-dxrkmroqf8] {
    margin-bottom: .75rem;
}

.fp-success-msg[b-dxrkmroqf8] {
    margin: 0 0 1.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* "Return to Sign In" reuses the orange .login-submit button styling as an anchor */
.fp-success-back[b-dxrkmroqf8] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .fp-face[b-dxrkmroqf8] {
        transition: none;
        transform: none;
    }

    .fp-flip.is-sent .fp-face--form[b-dxrkmroqf8],
    .fp-face--success[b-dxrkmroqf8] {
        transform: none;
    }
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* 2-column fields on tablet/desktop; stacks to 1 column on mobile (<768px). */
@media (min-width: 768px) {
    .login-register .login-form-wrap[b-70lci1uf3x] {
        max-width: 560px;
    }

    .register-fields[b-70lci1uf3x] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 1.25rem;
        margin-bottom: 1.1rem;
    }

    .register-field--full[b-70lci1uf3x] {
        grid-column: 1 / -1;
    }

    /* grid gap owns spacing — drop the stacked-field margins */
    .register-fields .form-group--lg[b-70lci1uf3x] {
        margin-bottom: 0;
    }

    .register-fields .form-group + .form-group[b-70lci1uf3x] {
        margin-top: 0;
    }
}
/* /Components/Account/Pages/RegisterConfirmation.razor.rz.scp.css */
.register-confirm-msg[b-62hdotk1rs] {
    text-align: center;
}

.confirm-error[b-62hdotk1rs] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-error);
    margin: 0.5rem 0 0;
}

/* "Resend confirmation" is a button styled as the inline link; greys when disabled */
.resend-link[b-62hdotk1rs] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-link);
    font-weight: 600;
    cursor: pointer;
}

.resend-link:hover:not(:disabled)[b-62hdotk1rs] {
    text-decoration: underline;
}

.resend-link:disabled[b-62hdotk1rs] {
    color: var(--text-muted);
    cursor: default;
}

.resend-timer[b-62hdotk1rs] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}

/* clear separation from the resend link above */
.register-confirm-backlink[b-62hdotk1rs] {
    margin-top: 2rem;
}
/* /Components/Account/Pages/ResetPassword.razor.rz.scp.css */
.main-text[b-1vyf8nii8o] {
   font-size: 2rem !important;
}

.reset-email-static[b-1vyf8nii8o] {
    margin: 0;
    padding: 0.4rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.04rem;
    overflow-wrap: anywhere;
}

.reset-success[b-1vyf8nii8o] {
    text-align: center;
}

.reset-success-icon[b-1vyf8nii8o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    color: var(--success);
    background: var(--success-bg);
}

.reset-success-icon svg[b-1vyf8nii8o] {
    width: 34px;
    height: 34px;
}

.reset-success-title[b-1vyf8nii8o] {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.reset-success-sub[b-1vyf8nii8o] {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
}

.reset-redirect[b-1vyf8nii8o] {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
}

.reset-redirect #reset-redirect-count[b-1vyf8nii8o] {
    font-weight: 700;
    color: var(--text-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-om65wr7pw9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-om65wr7pw9] {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

article[b-om65wr7pw9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding-top: 10px;
    padding-bottom: var(--space-5);
    /* No stacking context here: page content (sticky headers ≤701, dialog overlays ≥1000)
       must stack at the root so dialogs paint above the sidebar collapse toggle (z 800). */
    position: relative;
}

/* <900px the layout stacks column: a rigid 100vh <main> sitting under the logo header pushes content off-screen on short iOS viewports (100vh = the large viewport) — flow and scroll the page naturally instead. */
@media (max-width: 899.98px) {
    main[b-om65wr7pw9] {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    article[b-om65wr7pw9] {
        overflow: visible;
    }
}

.sidebar[b-om65wr7pw9] {
    position: relative;
    background: var(--sidebar-bg);
    background-attachment: fixed;
}

.top-row[b-om65wr7pw9] {
    background-color: var(--bg-surface);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    justify-content: flex-start;
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-right: var(--container-pad);
}

    .top-row[b-om65wr7pw9]  .btn-critical {
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        line-height: 1.2;
    }

    .top-row[b-om65wr7pw9]  a, .top-row[b-om65wr7pw9]  .btn-link {
        white-space: nowrap;
        margin-left: var(--space-5);
        text-decoration: none;
    }

    .top-row[b-om65wr7pw9]  a:hover, .top-row[b-om65wr7pw9]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-om65wr7pw9]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Mobile (<650): top-row links collapse */
@media (max-width: 649.98px) {
    .top-row[b-om65wr7pw9] {
        justify-content: space-between;
    }

    .top-row[b-om65wr7pw9]  a, .top-row[b-om65wr7pw9]  .btn-link {
        margin-left: 0;
    }

    /* Critical button sits top-right on mobile; the impersonate link (if any) stays left. */
    .top-row[b-om65wr7pw9]  .btn-critical {
        margin-left: auto;
    }
}

/* <900 the layout stacks under the logo header: collapse this row to nothing when empty so it isn't a blank surface bar, but let it grow for the critical/impersonate buttons when present */
@media (max-width: 899.98px) {
    .top-row[b-om65wr7pw9] {
        height: auto;
        min-height: 0;
        background-color: transparent;
        border-bottom: none;
        /* Indent the button to where page content begins (≈ Dashboard's Quick Look title); applies site-wide via the layout. */
        padding-left: 2.5rem;
    }

    .top-row[b-om65wr7pw9]  .btn-critical,
    .top-row[b-om65wr7pw9]  .btn-stop-impersonate {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }
}

/* Desktop (≥900): persistent side-by-side sidebar */
@media (min-width: 900px) {
    .page[b-om65wr7pw9] {
        flex-direction: row;
        /* Site-wide desktop floor: below 600px tall the window scrolls instead of squeezing the sidenav/content. */
        height: 100vh;
        /* Landscape tablets ≥900px: 100vh is the large viewport (browser UI hidden) so the sidenav ran past the visible bottom; dvh tracks the visible height and equals 100vh on desktop. */
        height: 100dvh;
        min-height: 600px;
    }

    .sidebar[b-om65wr7pw9] {
        width: var(--sidebar-w);
        height: 100%;
        overflow: hidden;
        transition: width 0.3s ease;
    }

    main[b-om65wr7pw9] {
        height: 100%;
    }

    /* Collapsed icon-rail: narrows the sidebar so main swipes left to fill the space.
       Toggled by the `sidebar-collapsed` class on <html> (see helpers.js / NavMenu). */
    html.sidebar-collapsed .sidebar[b-om65wr7pw9] {
        width: 50px;
    }

    .top-row.auth[b-om65wr7pw9]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-om65wr7pw9], article[b-om65wr7pw9] {
        padding-left: var(--container-pad) !important;
        padding-right: var(--container-pad) !important;
    }

    article[b-om65wr7pw9] {
        position: relative;
    }
}

/* Desktop + landscape tablet (≥900px): the white top strip eats vertical space and
   forces a scroll. Strip its chrome and let it collapse to its content so the article
   rises into that space. */
@media (min-width: 900px) {
    .top-row[b-om65wr7pw9] {
        height: auto;
        min-height: 0;
        background-color: transparent;
        border-bottom: none;
    }

    /* When the critical/impersonate buttons are present, give them a little breathing
       room; when the row is empty these match nothing and it collapses fully. */
    .top-row[b-om65wr7pw9]  .btn-critical,
    .top-row[b-om65wr7pw9]  .btn-stop-impersonate {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

#blazor-error-ui[b-om65wr7pw9] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-om65wr7pw9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-om65wr7pw9] {
        transition: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-lzybjy9pxz] {
    appearance: none;
    cursor: pointer;
    width: 30px;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: calc(50% - 2px);
    right: 1rem;
    transform: translateY(-50%);
    border: none;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M1 2h28M1 9h28M1 16h28'/%3e%3c/svg%3e") no-repeat center/30px transparent;
}

.top-row[b-lzybjy9pxz] {
    height: 3.5rem;
    background: transparent;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.navbar-brand[b-lzybjy9pxz] {
    font-size: 1.1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bi[b-lzybjy9pxz] {
    display: inline-block;
    position: relative;
    width: calc(1em + 2px);
    height: calc(1em + 2px);
    flex-shrink: 0;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-calendar-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
}

.bi-collection-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2 3.5a1.5 1.5 0 1 1 3 0c0 .67-.405 1.388-.84 1.966a11 11 0 0 1-.855.966l-.03.03-.008.007-.003.003a.3.3 0 0 1-.428 0l-.003-.003-.008-.007-.03-.03a11 11 0 0 1-.855-.966C2.405 4.888 2 4.17 2 3.5zM10.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9 8.5a1.5 1.5 0 1 1 3 0c0 .67-.405 1.388-.84 1.966a11 11 0 0 1-.855.966l-.03.03-.008.007-.003.003a.3.3 0 0 1-.428 0l-.003-.003-.008-.007-.03-.03a11 11 0 0 1-.855-.966C9.405 9.888 9 9.17 9 8.5zM3.5 3a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1zm7 5a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1zM1 14s-1 0-1-1 1-4 6.5-4c.5 0 .976.026 1.43.074-.293.456-.53.941-.53 1.426 0 .74.408 1.39.84 1.909.171.207.35.4.52.57C8.558 13.96 8.07 14 7.5 14H1zm12 0h-1.5l.03-.012c.2-.063.4-.148.594-.255.543-.3.876-.73.876-1.233C13 11.672 11.933 11 10.5 11c-.667 0-1.248.187-1.64.437A7.4 7.4 0 0 0 8 10.074C8.696 10.026 9.343 10 10.5 10c5.5 0 6.5 3 6.5 4s-1 1-1 1h-3z'/%3E%3C/svg%3E");
}

.bi-id-card-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4m4-2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5M9 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4A.5.5 0 0 1 9 8m1 2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1'/%3E%3Cpath d='M7 9.5C7 10.328 6.104 11 5 11s-2-.672-2-1.5S3.896 8 5 8s2 .672 2 1.5'/%3E%3C/svg%3E");
}

.bi-eye-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.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 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.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'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E");
}

.bi-clipboard-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 0a.5.5 0 0 1 .5.5V2h4V.5a.5.5 0 0 1 1 0V2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M4 3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z'/%3E%3Cpath d='M4 6.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.bi-exclamation-triangle-fill-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

.bi-building-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zM4 5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM7.5 5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zM4.5 8a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm2.5.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5z'/%3E%3Cpath d='M2 1a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v14h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1zm1 14h4v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h4V1H3z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-question-nav-menu[b-lzybjy9pxz] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1M2 8a6 6 0 1 1 12 0A6 6 0 0 1 2 8'/%3E%3C/svg%3E");
}

/* Utility row: desktop — single icon-only row */
.nav-utility-row[b-lzybjy9pxz] {
    display: flex;
    flex-direction: row;
    margin-top: auto;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 4px 0;
}

.nav-utility-item[b-lzybjy9pxz] {
    flex: 1;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.nav-utility-item[b-lzybjy9pxz]  .nav-link,
.nav-utility-item[b-lzybjy9pxz]  .nav-utility-btn {
    justify-content: center;
    padding: 0;
    height: 2.75rem;
    width: 100%;
}

.nav-utility-item .utility-text[b-lzybjy9pxz] {
    display: none;
}

.nav-utility-item[b-lzybjy9pxz]  .bi,
.nav-utility-item[b-lzybjy9pxz]  .nav-utility-icon {
    margin-right: 0;
}

.nav-utility-item[b-lzybjy9pxz]  .btn-text {
    display: none;
}

/* <900px: hide the desktop icon strip; its items now live in .nav-secondary-mobile below.
   The .nav-utility-item rules still style the What's New / Submit Feedback buttons in the Help dropdown. */
@media (max-width: 899.98px) {
    .nav-utility-row[b-lzybjy9pxz] {
        display: none;
    }

    .nav-utility-item[b-lzybjy9pxz] {
        padding-bottom: 0.25rem !important;
    }

    .nav-utility-item:first-of-type[b-lzybjy9pxz] {
        padding-top: 0 !important;
    }

    .nav-utility-item[b-lzybjy9pxz]  .nav-link,
    .nav-utility-item[b-lzybjy9pxz]  .nav-utility-btn {
        justify-content: flex-start;
        padding: 0 20px;
        height: 3rem;
    }

    .nav-utility-item .utility-text[b-lzybjy9pxz] {
        display: inline;
    }

    .nav-utility-item[b-lzybjy9pxz]  .bi,
    .nav-utility-item[b-lzybjy9pxz]  .nav-utility-icon {
        margin-right: 0.75rem;
    }

    .nav-utility-item[b-lzybjy9pxz]  .btn-text {
        display: inline;
    }
}

/* Secondary section — mobile/tablet (<900px) only. Hidden on desktop, where .nav-utility-row is used instead. */
.nav-secondary-mobile[b-lzybjy9pxz] {
    display: none;
}

/* Hidden checkbox driving the Help dropdown (CSS-only, like .navbar-toggler). The label toggles it. */
.nav-help-cb[b-lzybjy9pxz] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}

@media (max-width: 899.98px) {
    .nav-secondary-mobile[b-lzybjy9pxz] {
        display: flex;
        flex-direction: column;
    }

    /* Request 1: divider between the main nav items and the secondary group */
    .nav-divider[b-lzybjy9pxz] {
        height: 1px;
        background: rgba(255, 255, 255, 0.12);
        margin: 0.5rem 20px;
    }

    .nav-help-toggle[b-lzybjy9pxz] {
        cursor: pointer;
        user-select: none;
    }

    .nav-help-chevron[b-lzybjy9pxz] {
        display: inline-block;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform 0.2s ease;
    }

    .nav-help-cb:checked ~ .nav-help-item .nav-help-chevron[b-lzybjy9pxz] {
        transform: rotate(90deg);
    }

    /* Collapsed by default; expands when the Help checkbox is checked */
    .nav-help-submenu[b-lzybjy9pxz] {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.25s ease;
    }

    .nav-help-cb:checked ~ .nav-help-submenu[b-lzybjy9pxz] {
        max-height: 200px;
    }

    /* Indent the collapsed items so they read as children of Help */
    .nav-help-submenu .nav-utility-item[b-lzybjy9pxz]  .nav-utility-btn,
    .nav-help-submenu .nav-utility-item[b-lzybjy9pxz]  .nav-link {
        padding-left: 44px;
    }
}

@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
    .nav-help-chevron[b-lzybjy9pxz],
    .nav-help-submenu[b-lzybjy9pxz] {
        transition: none;
    }
}

.navbar-brand img[b-lzybjy9pxz] {
    height: 2rem;
    object-fit: contain;
}

/* Mobile/tablet: 150px-wide logo, ratio-correct height (389×90 native), 15px top/bottom padding in its container */
@media (max-width: 899.98px) {
    .top-row[b-lzybjy9pxz] {
        height: auto;
    }

    .navbar-brand[b-lzybjy9pxz] {
        padding: 15px 0;
    }

    .navbar-brand img[b-lzybjy9pxz] {
        width: 150px;
        height: 34.7px;
    }
}

.contractor-name[b-lzybjy9pxz] {
    color: rgba(255,255,255,0.92);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04rem;
    user-select: none;
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-align: center;
}

.impersonating-banner[b-lzybjy9pxz] {
    margin: 0 12px;
    padding: 8px 12px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.impersonating-label[b-lzybjy9pxz] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.impersonating-name[b-lzybjy9pxz] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #78350f;
}

nav[b-lzybjy9pxz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-item[b-lzybjy9pxz] {
    font-size: min(1rem, 17px);
    padding-bottom: 0.25rem;
}

    .nav-item:first-of-type[b-lzybjy9pxz] {
        padding: 1rem .5rem;
    }

    .nav-item:last-of-type[b-lzybjy9pxz] {
        padding-bottom: 1rem;
    }

    .nav-item[b-lzybjy9pxz]  .nav-link {
        color: var(--sidebar-text);
        font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: inherit;
        font-weight: 500;
        background: none;
        border: none;
        border-radius: 6px;
        height: 3rem;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        line-height: 3rem;
        width: 100%;
        padding: 0 20px 0 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
        transition: background-color 0.15s, color 0.15s;
    }

.nav-item[b-lzybjy9pxz]  a.active {
    background-color: rgba(255,255,255,0.14);
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    box-shadow: inset 3px 0 0 #FF4E00;
    border-radius: 0 6px 6px 0;
}

.nav-item[b-lzybjy9pxz]  .nav-link:hover {
    background-color: rgba(255,255,255,0.12);
    color: white;
}

.nav-scrollable[b-lzybjy9pxz] {
    display: none;
    overflow-x: hidden;
}

.navbar-toggler:checked ~ .nav-scrollable[b-lzybjy9pxz] {
    display: block;
}

/* Desktop (≥900px) — sidebar is persistent, no hamburger */
@media (min-width: 900px) {
    .navbar-toggler[b-lzybjy9pxz] {
        display: none;
    }

    .nav-scrollable[b-lzybjy9pxz] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus (100% of the sidebar, which has a 600px floor) */
        height: calc(100% - 3.5rem);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* ── Mobile / tablet (<900px): slide-in drawer ──────────────────────────────
   Replaces the old expand-from-top menu. .nav-scrollable is a full-screen fading
   backdrop; the inner <nav> panel slides in from the left. Driven entirely by the
   .navbar-toggler checkbox (no JS). Tapping the backdrop or any link closes it via
   the existing onclick on .nav-scrollable. */
@media (max-width: 899.98px) {
    .nav-scrollable[b-lzybjy9pxz] {
        display: flex;             /* always rendered so it can animate; hidden via opacity */
        justify-content: flex-end; /* anchor the panel to the right edge (mobile drawer) */
        position: fixed;
        inset: 0;
        z-index: 1100;             /* above page content; below modals (≥1000 overlays cover the hamburger) */
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        overflow: hidden;          /* the panel handles its own scrolling */
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-lzybjy9pxz] {
        display: flex;             /* stay flex when open so the panel keeps its right anchor
                                      (overrides the base `:checked ~ .nav-scrollable { display: block }`) */
        justify-content: flex-end;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    .nav-scrollable nav[b-lzybjy9pxz] {
        width: min(82vw, 300px);
        height: 100%;
        background: var(--sidebar-bg);
        background-attachment: fixed;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -2px 0 16px rgba(0, 0, 0, 0.25);
    }

    .navbar-toggler:checked ~ .nav-scrollable nav[b-lzybjy9pxz] {
        transform: translateX(0);
    }

    /* Hamburger keeps its default z-index (below the overlay's 1100) so it's hidden while the drawer is open; close via backdrop/link tap */
}

@media (max-width: 899.98px) and (prefers-reduced-motion: reduce) {
    .nav-scrollable[b-lzybjy9pxz],
    .nav-scrollable nav[b-lzybjy9pxz] {
        transition: none;
    }
}

/* ── Collapsible icon-rail ────────────────────────────────────────────────────
   A pull-tab fixed to the sidebar's right edge toggles the rail. The collapsed
   state is a `sidebar-collapsed` class on <html> (set from localStorage in
   helpers.js) so it survives enhanced navigations. The width change itself lives
   in MainLayout.razor.css since .sidebar is owned there. Desktop-only. */

/* Positioning context for the expanded (in-header) toggle. overflow:hidden clips
   that absolute strip to the company-name box so its hover fill can't spill onto
   the row below; the collapsed tab is position:fixed, so it escapes the clip. */
.nav-header[b-lzybjy9pxz] {
    position: relative;
    overflow: hidden;
}

.nav-collapse-tab[b-lzybjy9pxz] {
    z-index: 800;                 /* above page content (sticky headers ≤701, open-row lifts ≤500); below every modal dialog overlay (Dialog 1000, FixedDialog 9999, etc.) */
    display: none;                /* shown only on the persistent desktop sidebar */
    align-items: center;
    justify-content: center;
    width: 24px;
    padding: 0;
    appearance: none;
    cursor: pointer;
    color: #fff;
    background: var(--sidebar-bg);
    background-attachment: fixed;  /* anchor the gradient to the viewport so it continues the sidebar */
    border: none;
    transition: background-color 0.15s, filter 0.15s;
}

.nav-collapse-tab:hover[b-lzybjy9pxz] {
    filter: brightness(1.25);
}

/* Dark mode: the sidebar gradient is near-black, so use a lighter blue so the
   tab stays visible against both the rail and the page background. */
[data-theme="dark"] .nav-collapse-tab[b-lzybjy9pxz] {
    background: linear-gradient(180deg, #14497a 0%, #0e3a63 100%);
}

/* ── Nav utility tooltip: appear to the right so they don't clip off the left edge ── */
/* Positioning override is in app.css (.nav-utility-row [data-tooltip]) since
   pseudo-elements on child component elements can't be overridden from scoped CSS. */

.nav-collapse-chevron[b-lzybjy9pxz] {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
}

/* Desktop only: show the tab, and wire up the collapsed icon-rail */
@media (min-width: 900px) {
    .nav-collapse-tab[b-lzybjy9pxz] {
        display: inline-flex;
    }

    /* Expanded: the toggle sits inside the company-name header, flush to its
       right edge and spanning the full container height. A slightly lighter
       shade of the sidebar's dark blue so it reads; only the inner (left)
       corners are rounded. */
    html:not(.sidebar-collapsed) .nav-collapse-tab[b-lzybjy9pxz] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(33, 95, 160, 0.40);
        border-radius: 8px 0 0 8px;
    }

    html:not(.sidebar-collapsed) .nav-collapse-tab:hover[b-lzybjy9pxz] {
        background: rgba(33, 95, 160, 0.60);
        filter: none;
    }

    /* Keep the centered company name clear of the toggle strip. */
    html:not(.sidebar-collapsed) .contractor-name[b-lzybjy9pxz] {
        padding-left: 28px;
        padding-right: 28px;
    }

    /* Collapsed: unchanged — a rounded pull-tab fixed to the rail's right edge. */
    html.sidebar-collapsed .nav-collapse-tab[b-lzybjy9pxz] {
        position: fixed;
        top: 3.5rem;              /* top edge of the contractor-name container, below the logo row */
        left: 50px;               /* follows the collapsed sidebar's right edge */
        right: auto;
        bottom: auto;
        height: 24px;
        border-left: none;
        border-radius: 0 8px 8px 0;    /* flat left edge, rounded right — reads as part of the nav */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.18);
        transition: left 0.3s ease, filter 0.15s;
    }

    html.sidebar-collapsed .nav-collapse-chevron[b-lzybjy9pxz] {
        transform: rotate(180deg);
    }

    html.sidebar-collapsed .contractor-name[b-lzybjy9pxz],
    html.sidebar-collapsed .impersonating-banner[b-lzybjy9pxz] {
        display: none;
    }

    html.sidebar-collapsed .nav-text[b-lzybjy9pxz] {
        display: none;
    }

    html.sidebar-collapsed .navbar-brand img[b-lzybjy9pxz] {
        max-width: 34px;
    }

    html.sidebar-collapsed .nav-item[b-lzybjy9pxz]  .nav-link {
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    /* Utility icons stack vertically so each fits the 50px rail */
    html.sidebar-collapsed .nav-utility-row[b-lzybjy9pxz] {
        flex-direction: column;
        border-top: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-collapse-tab[b-lzybjy9pxz],
    .nav-collapse-chevron[b-lzybjy9pxz] {
        transition: none;
    }
}
/* /Components/Pages/Addresses/Addresses.razor.rz.scp.css */
.addr-no-sensors-icon[b-tvcw1yulhn] {
    width: 14px;
    height: 14px;
    color: #ef4444;
    flex-shrink: 0;
    stroke-linecap: round;
}

/* Header structure comes from the shared .detail-header (app.css); only the
   Addresses-specific content tweaks live here. */
.detail-header-heading .info-strip[b-tvcw1yulhn] {
    padding: 0;
    margin: 0;
}

/* Search box wrapper — sits below the header. */
.addresses-search-wrap[b-tvcw1yulhn] {
    display: flex;
    justify-content: flex-end;
    margin: 1rem 0;
}

/* Desktop default: only the possessive title and short "Alerted" text show. */
.addr-title-mobile[b-tvcw1yulhn],
.alerted-text-mobile[b-tvcw1yulhn] {
    display: none;
}

/* ── Tablet (650–899px): title stays flush-left on one line. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .detail-header > .detail-header-heading[b-tvcw1yulhn] {
        padding-left: 0;
    }

    .detail-header-heading h2[b-tvcw1yulhn] {
        white-space: nowrap;
    }

    /* Inline the two buttons left-aligned (overrides the shared full-width stack). */
    .detail-header > .detail-header-actions[b-tvcw1yulhn] {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    /* Equal width, snug — just past "Add a New Address"; not the full row. */
    .detail-header > .detail-header-actions > button[b-tvcw1yulhn] {
        flex: 0 0 auto;
        min-width: 14rem;
    }
}

/* ── Mobile (<650px) */
@media (max-width: 649.98px) {
    /* DOM order is now Contact History → Add (for desktop/tablet); reverse the mobile
       stack to keep the primary "Add" button on top as before. */
    .detail-header > .detail-header-actions[b-tvcw1yulhn] {
        flex-direction: column-reverse;
    }

    /* Phone then Email stacked and centered (DOM order already puts phone first). */
    .detail-header-heading .info-strip[b-tvcw1yulhn] {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Drop the inline vertical divider — it only reads correctly side-by-side. */
    .detail-header-heading .info-strip-item + .info-strip-item[b-tvcw1yulhn]::before {
        display: none;
    }

    /* Center the values and let a long email wrap rather than force horizontal scroll. */
    .detail-header-heading .info-strip-item span[b-tvcw1yulhn] {
        text-align: center;
        overflow-wrap: anywhere;
    }

    .addr-title-desktop[b-tvcw1yulhn],
    .alerted-text-desktop[b-tvcw1yulhn] {
        display: none;
    }

    .addr-title-mobile[b-tvcw1yulhn] {
        display: inline;
    }

    .alerted-text-mobile[b-tvcw1yulhn] {
        display: inline;
    }

    .addresses-search-wrap[b-tvcw1yulhn] {
        margin-top: 2rem;
    }
}
/* /Components/Pages/AddressGroups/AddressGroupDetails.razor.rz.scp.css */
/* ── Address Group Details Page ── */

/* ── Transfer widget (addresses & employees tabs) ── */

.agd-transfer[b-ff2cs6ic0v] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.agd-transfer-panel[b-ff2cs6ic0v] {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 360px;
}

.agd-panel-header[b-ff2cs6ic0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.875rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface-2);
}

.agd-panel-title[b-ff2cs6ic0v] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.agd-panel-count[b-ff2cs6ic0v] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface-3, rgba(0,0,0,0.06));
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.agd-search[b-ff2cs6ic0v] {
    margin: 0.5rem 0.625rem 0;
    flex-shrink: 0;
}

.agd-list[b-ff2cs6ic0v] {
    flex: 1;
    overflow-y: auto;
    padding: 0.375rem 0;
    min-height: 0;
}

.agd-list-item[b-ff2cs6ic0v] {
    padding: 0.45rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agd-list-item:hover[b-ff2cs6ic0v] {
    background: var(--bg-hover);
}

.agd-list-item-selected[b-ff2cs6ic0v] {
    background: var(--accent-bg, rgba(13,110,253,0.1));
    color: var(--accent, #0077C5);
    font-weight: 500;
}

.agd-list-item-selected:hover[b-ff2cs6ic0v] {
    background: var(--accent-bg, rgba(13,110,253,0.15));
}

/* ── Middle transfer buttons ── */

.agd-transfer-controls[b-ff2cs6ic0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 3rem;
}

.agd-ctrl-btn[b-ff2cs6ic0v] {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 0.375rem;
}

.agd-ctrl-btn:disabled[b-ff2cs6ic0v] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Footer (reset / save) ── */

.agd-footer[b-ff2cs6ic0v] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

/* ── Notifications grid ── */

.agd-notif-grid[b-ff2cs6ic0v] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.65rem 1rem;
    align-items: center;
}

.agd-notif-label[b-ff2cs6ic0v] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.agd-notif-select[b-ff2cs6ic0v] {
    max-width: 340px;
}
/* /Components/Pages/AddressGroups/AddressGroupNode.razor.rz.scp.css */
/* Address group node styles moved to wwwroot/app.css — "ADDRESS GROUPS" section. */
/* /Components/Pages/AddressGroups/AddressGroups.razor.rz.scp.css */
/* Address group styles moved to wwwroot/app.css — "ADDRESS GROUPS" section. */
/* /Components/Pages/ContractorImpersonation/ContractorImpersonation.razor.rz.scp.css */
.ci-search-section[b-n04z6s1jlg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ci-search-section[b-n04z6s1jlg]  .addr-search-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ci-search-section[b-n04z6s1jlg]  .addr-search-dropdown {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 1;
    max-height: none;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: none;
    overflow-y: auto;
}
/* /Components/Pages/Customers/Customers.razor.rz.scp.css */
/* Mobile: page-header→contents so its title + button reorder around the divider via `order`. */
@media (max-width: 649.98px) {
    .page-header[b-294kdx9o65] {
        display: contents;
    }

    .page-header-left[b-294kdx9o65] {
        order: -4;
        justify-content: center;
        text-align: center;
    }

    /* Zero the h2's default block margin so the divider's 0.5rem owns the gap. */
    .page-header-left h2[b-294kdx9o65] {
        margin: 0;
    }

    .page-content[b-294kdx9o65]  .app-divider {
        order: -3;
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }

    /* Two actions (Import + Add): stack full-width with the primary Add on top. */
    .page-header-actions[b-294kdx9o65] {
        order: -2;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .page-header-actions .btn-primary[b-294kdx9o65],
    .page-header-actions .btn-secondary[b-294kdx9o65] {
        width: 100%;
    }

    .customers-search-wrap[b-294kdx9o65] {
        order: -1;
    }
}

/* Tablet + desktop: drop the divider's vertical margin so short landscape-tablet
   viewports don't push the nav / table bottom off-screen. */
@media (min-width: 650px) {
    .page-content[b-294kdx9o65]  .app-divider {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* Tablet (650–899px): drop the buttons under the header like Manage Employees; desktop keeps them inline top-right. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .page-header[b-294kdx9o65] {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.25rem;
    }

    .page-header-left h2[b-294kdx9o65] {
        margin-bottom: 0;
    }

    .page-content[b-294kdx9o65]  .app-divider {
        margin-top: 1.25rem;
    }
}

/* Desktop table (≥900px): a grid with shared tracks — rows stay column-aligned while the
   email track sizes to the longest email (max-content). The actions track is the only fr,
   so it is last in line for free space: email consumes the whitespace between phone and
   the icons before it ever truncates. Columns: first | last | email | phone | actions. */
@media (min-width: 900px) {
    .table-scroll table[b-294kdx9o65] {
        display: grid;
        grid-template-columns:
            minmax(7.5rem, 10rem)
            minmax(7.5rem, 10rem)
            minmax(6.5rem, max-content)
            minmax(8rem, 9.5rem)
            minmax(5.5rem, 1fr);
        width: 100%;
    }

    .table-scroll thead[b-294kdx9o65],
    .table-scroll tbody[b-294kdx9o65],
    .table-scroll tr[b-294kdx9o65] {
        display: contents;
    }

    /* Cells are grid items now: center content vertically like the table cells they replace. */
    .table-scroll th[b-294kdx9o65],
    .table-scroll td[b-294kdx9o65] {
        align-content: center;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Text scales down with the viewport (13px floor) so the columns never clip at small desktop. */
    .table-scroll thead th[b-294kdx9o65] {
        font-size: clamp(0.8125rem, 0.9vw + 0.1rem, 0.9rem);
    }

    .table-scroll tbody td[b-294kdx9o65] {
        font-size: clamp(0.8125rem, 1vw + 0.1rem, 1rem);
    }

    .table-scroll thead th:nth-child(1)[b-294kdx9o65],
    .table-scroll thead th:nth-child(2)[b-294kdx9o65] {
        white-space: nowrap;
    }

    /* The global .td-actions width:1% would shrink the cell box inside its grid track. */
    .table-scroll thead th.td-actions[b-294kdx9o65],
    .table-scroll tbody td.td-actions[b-294kdx9o65] {
        width: auto;
    }

    .table-scroll td.table-footer[b-294kdx9o65] {
        grid-column: 1 / -1;
    }

    /* First/last/email truncate with an ellipsis rather than widening their track. */
    .table-scroll td.ccol-first[b-294kdx9o65],
    .table-scroll td.ccol-last[b-294kdx9o65],
    .table-scroll td.ccol-email[b-294kdx9o65] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Phone track never shrinks below a formatted US number; the hidden overflow is a guard for malformed values. */
    .table-scroll td.ccol-phone[b-294kdx9o65] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* /Components/Pages/Dashboard/AddressSensorDetails.razor.rz.scp.css */
.asd-section-title[b-sxtoaxlf3v] {
    color: var(--text-primary);
    margin: 0 0 0 0.2rem;
    align-self: center;
    white-space: nowrap;
}

/* Sensor-logs heading: "Sensor Logs" as the h2 dialog title with the sensor name as an
   h3 beneath it — mirrors the Address Details + address-subtitle layout. */
.asd-logs-heading[b-sxtoaxlf3v] {
    min-width: 0;
}

/* Top-align so the back button rides the "Sensor Logs" title line, not the center of the two-line heading. */
.page-header-left[b-sxtoaxlf3v] {
    align-items: flex-start;
}

.asd-logs-title[b-sxtoaxlf3v] {
    margin-bottom: 0.25rem;
}

.asd-logs-name[b-sxtoaxlf3v] {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* Firmware the sensor last reported. Rides the name line but stays small and muted:
   it identifies the unit, it isn't part of what the unit is called. */
.asd-logs-firmware[b-sxtoaxlf3v] {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: var(--text-secondary);
    background: var(--bg-surface-3);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
    vertical-align: baseline;
}

@media (max-width: 649.98px) {
    .asd-logs-heading[b-sxtoaxlf3v] {
        width: 100%;
        text-align: center;
    }
}

/* The address now reads as a subtitle under the "Address Details" heading (all breakpoints). */
.asd-address-subtitle[b-sxtoaxlf3v] {
    margin: 0 0 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* The dialog body reserves 3rem on top for the × close button; pull the overview up
   so the title sits ~20px below the dialog top instead (× stays clear, top-right). */
.asd-overview[b-sxtoaxlf3v] {
    margin-top: -1.75rem;
}

/* Alert bell sits inline, left of the sensor name. */
.scol-name-inner[b-sxtoaxlf3v] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* This dialog's table headers scroll away with the content — opt out of the global sticky thead (app.css). */
.table-scroll thead th[b-sxtoaxlf3v] {
    position: static;
}

/* Natural width on a common floor so the bars align — the old fixed 30px let "100%" spill onto the bar. */
.scol-water-pct[b-sxtoaxlf3v] {
    flex-shrink: 0;
    min-width: 2.75em;
}

.asd-logs-loading[b-sxtoaxlf3v] {
    display: flex;
}

/* Logs view (spinner and loaded list) keeps a floor at every breakpoint so opening logs doesn't shrink the dialog. */
.table-scroll.asd-logs-loading[b-sxtoaxlf3v],
.table-scroll.asd-logs-table[b-sxtoaxlf3v] {
    min-height: 200px;
}

/* ── Wi-Fi logs: secondary line under a cell's headline value (RSSI, BSSID, "Not reported") ── */
.wifi-detail[b-sxtoaxlf3v] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
}

/* Scan counts behind the per-row expander. */
.wifi-scan-detail[b-sxtoaxlf3v] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
}

/* ── Setup baseline: one banner above the table, not a column on every row ── */
.wifi-baseline-strip[b-sxtoaxlf3v] {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    border-radius: 6px;
    background: var(--bg-surface-2);
}

.wifi-baseline-label[b-sxtoaxlf3v] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    flex-shrink: 0;
}

.wifi-baseline-values[b-sxtoaxlf3v] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    word-break: break-word;
}

/* Dismiss-alert box: centered in the dialog, content + actions centered (no title — the sensor name lives in the paragraph). */
.asd-dismiss-card[b-sxtoaxlf3v] {
    max-width: 34rem;
    margin-inline: auto;
    text-align: center;
}

    .asd-dismiss-card .card-actions[b-sxtoaxlf3v] {
        justify-content: center;
    }

.asd-dismiss-text[b-sxtoaxlf3v] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    line-height: 1.5;
    width: clamp(60%, 60ch, 90%);
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
}

/* View Address + View Open Service Call sit inline above the client info strip. */
.asd-action-row[b-sxtoaxlf3v] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Wi-Fi channel labels itself where the card layout hides the column header (<900px; matches the Sensors-page dialog, bugs 816/824). */
.wifi-ch-label[b-sxtoaxlf3v] {
    display: none;
}

@media (max-width: 899.98px) {
    .wifi-ch-label[b-sxtoaxlf3v] {
        display: inline;
    }
}

/* ── Mobile + tablet (<900px): sensor cards get a soft surface (list keeps its own scroll on tablet; mobile and desktop scroll the dialog) ── */
@media (max-width: 899.98px) {
    .table-scroll[b-sxtoaxlf3v] {
        margin-top: 1rem;
    }

    .table-scroll tbody tr:not(:has(.table-footer))[b-sxtoaxlf3v] {
        background: var(--bg-surface-2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    /* Logs footer rows read like the Sensors-page dialog's: a filled, left-aligned card (bug 816). */
    .asd-logs-table tbody tr:has(.table-footer)[b-sxtoaxlf3v] {
        background: var(--bg-surface-2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    .asd-logs-table td.table-footer[b-sxtoaxlf3v] {
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }

    /* Alert bell follows the sensor-name text size on the cards (bug 802). */
    .scol-name-inner .btn-alert[b-sxtoaxlf3v]::before {
        width: clamp(0.875rem, 1em, 1.25rem);
    }
}

/* ── Desktop (≥900px): one scroll container — the dialog body scrolls and the sensor/logs tables flow at natural height (load-more is wired to the dialog body's scroll, see onAncestorScrollBottom). ── */
@media (min-width: 900px) {
    .table-scroll[b-sxtoaxlf3v] {
        flex: none;
        overflow-y: visible;
        min-height: 0;
        /* Breathing room under the sort header — the global margin-top is a dropped unitless `1` (app.css). */
        margin-top: 0.75rem;
    }

    /* Nothing sticks in this dialog; <900px cards reposition this cell themselves. */
    .table-scroll tbody td.td-actions[b-sxtoaxlf3v] {
        position: static;
    }
}

/* ── Mobile (<650px) ────────────────────────────────────────────────────────── */
@media (max-width: 649.98px) {
    .info-strip[b-sxtoaxlf3v] {
        flex-direction: column;
        gap: 0.85rem;
    }

    .info-strip-item[b-sxtoaxlf3v] {
        padding-left: 1rem;
    }

    .info-strip-item + .info-strip-item[b-sxtoaxlf3v]::before {
        left: 0;
        top: -0.45rem;
        height: 1px;
        width: 100%;
        background: linear-gradient(to right, transparent, #d1d5db 50%, transparent);
    }

    .info-strip-item span[b-sxtoaxlf3v] {
        overflow-wrap: anywhere;
    }

    /* Back button on its own row above the section title on mobile; lines up with dialog × top-right. */
    .page-header-left[b-sxtoaxlf3v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .page-header-left button[b-sxtoaxlf3v] {
        margin-bottom: 1.25rem;
    }

    /* Title reads left-aligned under the back button (override the base align-self:center used for the desktop inline row). */
    .page-header-left .asd-section-title[b-sxtoaxlf3v] {
        align-self: flex-start;
    }

    /* Short title scales up to the true 2rem h2 (matches desktop from ~400px); eases down only on the narrowest phones so the nowrap text never overflows. */
    h2.dialog-title[b-sxtoaxlf3v] {
        font-size: clamp(1.25rem, 8vw, 2rem);
        white-space: nowrap;
    }

    .asd-section-title[b-sxtoaxlf3v] {
        font-size: 1rem;
        margin: 0;
        white-space: normal;
    }

    /* Keep "Sensors attached…" inline with the sort dropdown on mobile. */
    .page-header.asd-sensors-header[b-sxtoaxlf3v] {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
    }

    .page-header.asd-sensors-header .asd-section-title[b-sxtoaxlf3v] {
        flex: 1;
        min-width: 0;
    }

    /* Stack both actions full-width above the client data; Open Call on top. */
    .asd-action-row[b-sxtoaxlf3v] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .asd-action-row .asd-open-call-btn[b-sxtoaxlf3v] {
        order: -1;
    }

    /* Mobile: the whole dialog scrolls, so the sensor list flows inline. */
    .table-scroll[b-sxtoaxlf3v] {
        overflow-y: visible;
        flex: none;
        min-height: 0;
    }

    /* Center the address subtitle under the title on mobile. */
    .asd-address-subtitle[b-sxtoaxlf3v] {
        text-align: center;
    }

    /* Address subtitle becomes two lines: street on top, city/state lighter below. */
    .asd-addr-line1[b-sxtoaxlf3v] {
        display: block;
    }

    .asd-addr-sep[b-sxtoaxlf3v] {
        display: none;
    }

    .asd-addr-line2[b-sxtoaxlf3v] {
        display: block;
        margin-top: 0.15rem;
        font-size: var(--fs-small);
        font-weight: 400;
        color: var(--text-muted);
    }

    /* Keep the "Last Check-in" label and its date on one inline line. */
    .table-scroll td.scol-connect[b-sxtoaxlf3v] {
        white-space: nowrap;
    }

    /* Logs / dismiss view: drop the address overview so only the back button and the
       "Sensor Logs" header show — no confusing scroll past the address details. */
    .asd-overview-collapsed[b-sxtoaxlf3v] {
        display: none;
    }

    /* Mobile dialogs now carry ~20px top padding globally, so the overview no longer
       needs the negative pull used on desktop/tablet (which had a 3rem dialog top). */
    .asd-overview[b-sxtoaxlf3v] {
        margin-top: 0;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* --- Toolbar row above the table: filter chip on the left, search box on the right.
   Search-box uses margin-left:auto so it stays right-aligned whether or not a chip is present. */
.dash-toolbar[b-kpleegs6z5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

    .dash-toolbar .search-box[b-kpleegs6z5] {
        margin-left: auto;
    }

.dash-filter-chip[b-kpleegs6z5] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .dash-filter-chip:hover[b-kpleegs6z5] {
        background: var(--bg-hover);
        box-shadow: var(--shadow-sm);
    }

    .dash-filter-chip:focus-visible[b-kpleegs6z5] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

.dash-filter-chip-close[b-kpleegs6z5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* Mobile (<650px): stack the toolbar so the search box sits on top and the
   active-filter chip drops below it (instead of side-by-side). */
@media (max-width: 649.98px) {
    .dash-toolbar[b-kpleegs6z5] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

        .dash-toolbar .search-box[b-kpleegs6z5] {
            order: -1;          /* search on top, chip below */
            margin-left: 0;
        }

        .dash-toolbar .dash-filter-chip[b-kpleegs6z5] {
            align-self: flex-start;   /* keep the chip pill-sized, hugging the left */
        }
}
/* /Components/Pages/Deployment/Deployment.razor.rz.scp.css */
/* Categorical slots for the firmware donut, in the documented order (blue, orange,
   aqua, yellow) so adjacent slices stay separable for colour-blind readers. The dark
   column is the same four hues re-stepped for the dark surface, not an inverted copy.

   "Older" and "Not reported" are deliberately achromatic: neither is a firmware
   version, and giving them a hue would make them read as one more release. */
.fw-card[b-ckr416g9a2] {
    --fw-series-1: #2a78d6;
    --fw-series-2: #eb6834;
    --fw-series-3: #1baf7a;
    --fw-series-4: #eda100;
    --fw-series-older: #52514e;
    --fw-series-unknown: #898781;
}

[data-theme="dark"] .fw-card[b-ckr416g9a2] {
    --fw-series-1: #3987e5;
    --fw-series-2: #d95926;
    --fw-series-3: #199e70;
    --fw-series-4: #c98500;
    --fw-series-older: #c3c2b7;
    --fw-series-unknown: #898781;
}

.fw-card[b-ckr416g9a2] {
    max-width: 820px;
}

.fw-body[b-ckr416g9a2] {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* Chart and legend side by side on desktop; the legend wraps under the ring when the
   card gets narrow. */
.fw-chart[b-ckr416g9a2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

/* Square box the ring and all of its overlaid text share, so the percentage labels can
   be placed as a percentage of it and stay put at any rendered size. */
.fw-donut-wrap[b-ckr416g9a2] {
    position: relative;
    width: 240px;
    height: 240px;
    flex: 0 0 auto;
}

.fw-donut[b-ckr416g9a2] {
    display: block;
    width: 100%;
    height: 100%;
}

.fw-slice[b-ckr416g9a2] {
    /* Arcs are drawn from 12 o'clock rather than 3, which is where an SVG circle
       starts. */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Outside the ring, on the card surface, so one ink stays readable against every
   slice colour. */
.fw-slice-label[b-ckr416g9a2] {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

/* Centred in the hole. */
.fw-donut-total[b-ckr416g9a2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    pointer-events: none;
}

.fw-donut-total-value[b-ckr416g9a2] {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fw-donut-total-label[b-ckr416g9a2] {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Legend carries the count and share for every slice, including the ones too thin to
   hold a label on the ring. */
.fw-legend[b-ckr416g9a2] {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 240px;
    min-width: 0;
}

.fw-legend-item[b-ckr416g9a2] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color-2);
}

    .fw-legend-item:last-child[b-ckr416g9a2] {
        border-bottom: none;
    }

.fw-legend-swatch[b-ckr416g9a2] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    flex: 0 0 auto;
}

.fw-legend-label[b-ckr416g9a2] {
    color: var(--text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.fw-legend-value[b-ckr416g9a2] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.fw-legend-share[b-ckr416g9a2] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
}

.fw-table[b-ckr416g9a2] {
    margin-top: 1.75rem;
}

.fw-num[b-ckr416g9a2] {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 649.98px) {
    .fw-body[b-ckr416g9a2] {
        padding: 1rem;
    }

    .fw-chart[b-ckr416g9a2] {
        gap: 1.25rem;
        justify-content: center;
    }

    .fw-donut-wrap[b-ckr416g9a2] {
        width: 200px;
        height: 200px;
    }
}
/* /Components/Pages/Employees/AddEmployeeRoleDialog.razor.rz.scp.css */
/* Permission groups stack to a single column on mobile. */
@media (max-width: 649.98px) {
    .ar-perms-grid[b-liqa1ojzok] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Employees/AddInvitationDialog.razor.rz.scp.css */
/* Mobile: Email on its own row; Role + "+ Add" share the second row. */
@media (max-width: 649.98px) {
    .ai-input-row[b-pntyfo1hpm] {
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .ai-email-field[b-pntyfo1hpm] {
        flex: 1 0 100%;
    }

    .ai-role-field[b-pntyfo1hpm] {
        flex: 1 1 auto;
        width: auto;
    }

    .ai-add-btn[b-pntyfo1hpm] {
        flex: 0 0 auto;
    }

    /* Expanded staged-invite permissions: single column. */
    .ai-staged-perms[b-pntyfo1hpm] {
        grid-template-columns: 1fr;
    }

    /* Drop the nested 420px scroll so the dialog body is the only scroll container — expanded permissions stay fully reachable. */
    .ai-staged-list[b-pntyfo1hpm] {
        max-height: none;
        overflow: visible;
    }
}
/* /Components/Pages/Employees/EditEmployeeRoleDialog.razor.rz.scp.css */
/* Permission groups stack to a single column on mobile. */
@media (max-width: 649.98px) {
    .ar-perms-grid[b-brme7hu2w2] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Employees/EmployeeInvitations.razor.rz.scp.css */
/* Header uses the shared .detail-header layout (app.css). */

/* Cards (<900px): email is the card title; Role and Sent On are labelled lines.
   The shared <900 table-card rules (app.css) hide the thead and stack the cells. */
@media (max-width: 899.98px) {
    .table-scroll td.icol-email[b-j4i06a0mfc] {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-scroll td.icol-role[b-j4i06a0mfc],
    .table-scroll td.icol-date[b-j4i06a0mfc] {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .table-scroll td.icol-role[b-j4i06a0mfc]::before {
        content: "Role : ";
        font-weight: 600;
        color: var(--text-muted);
    }

    .table-scroll td.icol-date[b-j4i06a0mfc]::before {
        content: "Sent On : ";
        font-weight: 600;
        color: var(--text-muted);
    }
}

/* Tablet (650–899px): collapse email, role and sent on onto one inline row
   (mirrors Manage Employees). Email shrinks with an ellipsis so the row never wraps. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .table-scroll tbody tr:has(.icol-email)[b-j4i06a0mfc] {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        column-gap: 1rem;
        padding-right: 2.75rem;      /* clear the floating action icon */
    }

    .table-scroll td.icol-email[b-j4i06a0mfc] {
        order: 1;
        flex: 1 1 auto;
    }

    .table-scroll td.icol-role[b-j4i06a0mfc] {
        order: 2;
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-scroll td.icol-date[b-j4i06a0mfc] {
        order: 3;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}
/* /Components/Pages/Employees/EmployeeRoles.razor.rz.scp.css */
/* Header uses the shared .detail-header layout (app.css). */
/* /Components/Pages/JoinContractor/JoinContractor.razor.rz.scp.css */
/* clear separation from the OTP boxes above */
.join-confirm-backlink[b-9sc4nxtgj2] {
    margin-top: 2rem;
}

/* invite email is fixed by the invitation — readonly, muted like disabled inputs */
.login-page[b-9sc4nxtgj2]  .form-input--locked {
    background: var(--bg-surface-3);
    color: var(--text-muted);
    cursor: default;
}

.login-page[b-9sc4nxtgj2]  .form-input--locked:focus {
    border-color: var(--border-color);
    box-shadow: none;
}

/* 2-column signup fields on tablet/desktop; stacks to 1 column on mobile (<768px). */
@media (min-width: 768px) {
    .login-register .login-form-wrap[b-9sc4nxtgj2] {
        max-width: 560px;
    }

    .register-fields[b-9sc4nxtgj2] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem 1.25rem;
        margin-bottom: 1.1rem;
    }

    .register-field--full[b-9sc4nxtgj2] {
        grid-column: 1 / -1;
    }

    /* grid gap owns spacing — drop the stacked-field margins */
    .register-fields .form-group--lg[b-9sc4nxtgj2] {
        margin-bottom: 0;
    }

    .register-fields .form-group + .form-group[b-9sc4nxtgj2] {
        margin-top: 0;
    }
}
/* /Components/Pages/Onboarding/AddPaymentMethod.razor.rz.scp.css */
.opm-wrap[b-czy3hqehwy] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1rem 2rem;
    background: var(--bg-app);
}

.opm-card[b-czy3hqehwy] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.875rem;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 540px;
    padding: 2.5rem 2rem 2rem;
    animation: dialog-in 0.2s ease;
}

.opm-logo[b-czy3hqehwy] {
    display: block;
    height: 40px;
    margin: 0 auto 1.25rem;
}

.opm-header[b-czy3hqehwy] {
    text-align: center;
    margin-bottom: 2rem;
}

.opm-title[b-czy3hqehwy] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
}

.opm-sub[b-czy3hqehwy] {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.opm-success[b-czy3hqehwy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    gap: 0.5rem;
    text-align: center;
}

.opm-success-icon[b-czy3hqehwy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.opm-success-text[b-czy3hqehwy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.opm-success-sub[b-czy3hqehwy] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}
/* /Components/Pages/SelectContractor/SelectContractor.razor.rz.scp.css */
/* Intentionally empty — content was reverted to app.css. Safe to delete. */
/* /Components/Pages/Sensors/Sensors.razor.rz.scp.css */
/* Header layout is the shared .detail-header (app.css); only Sensors content
   tweaks live here. */
.sensors-title-row[b-04izq9imi9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.sensors-name[b-04izq9imi9] {
    margin: 0;
}

.sensors-title[b-04izq9imi9] {
    font-size: 1.4rem;
    margin: 0;
}

.address-contact-accordion[b-04izq9imi9] {
    display: none;
}

/* No. of Sensors: left-aligned subheader directly above the table, every breakpoint. */
.sensors-count-subheader[b-04izq9imi9] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-left: 20px;
    font-size: 1.0rem;
}

    .sensors-count-subheader .info-label[b-04izq9imi9] {
        margin: 0;
    }

    .sensors-count-subheader .info-label[b-04izq9imi9]::after {
        content: ":";
    }

/* Phone: "No. of Sensors: N" scales down to stay on one line beside the sort control (bug 796). */
@media (max-width: 649.98px) {
    .sensors-count-subheader[b-04izq9imi9] {
        min-width: 0;
        white-space: nowrap;
    }

    .sensors-count-subheader .info-label[b-04izq9imi9] {
        font-size: clamp(0.85rem, 4.4vw, 1.2rem);
        letter-spacing: 0.06rem;
    }
}

/* Advanced Settings: "Advanced Settings" as the h2 with the sensor name as an h3 beneath it (bug 813). */
.adv-title[b-04izq9imi9] {
    margin-bottom: 0.25rem;
}

.adv-sensor-name[b-04izq9imi9] {
    margin: 0 0 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* Wi-Fi channel: the column header carries the label on wide screens; the card
   layout (<900px) hides the headers, so the cell labels itself there (bug 824). */
.wifi-ch-label[b-04izq9imi9] {
    display: none;
}

@media (max-width: 899.98px) {
    .wifi-ch-label[b-04izq9imi9] {
        display: inline;
    }
}

/* Toolbar above the sensor table: count subheader (left) + sort control (right). */
.sensors-list-toolbar[b-04izq9imi9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.sensors-sort-wrap[b-04izq9imi9] {
    margin-left: auto;   /* count on the left, sort control pushed to the right */
}

.page-content[b-04izq9imi9]  .app-divider {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Sensor Logs dialog title: "Sensor Logs" + sensor name inline (desktop/tablet);
   "Sensor Logs" keeps .dialog-title so the global one-line fitter only sizes it. */
.logs-dialog-header[b-04izq9imi9] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

    .logs-dialog-header .dialog-title[b-04izq9imi9] {
        margin: 0;
    }

.logs-dialog-name[b-04izq9imi9] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.04rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

    .logs-dialog-name[b-04izq9imi9]::before {
        content: "— ";
        color: var(--text-muted);
    }

/* Firmware the sensor last reported. Sits on the name's baseline but stays small and
   muted: it identifies the unit, it isn't part of what the unit is called. */
.logs-dialog-firmware[b-04izq9imi9] {
    /* Stays a pill when the phone layout stacks the header into a column. */
    display: inline-block;
    align-self: flex-start;
    width: max-content;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: var(--text-secondary);
    background: var(--bg-surface-3);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.1rem 0.5rem;
    white-space: nowrap;
}

@media (max-width: 649.98px) {
    /* Sensor name drops to its own row under "Sensor Logs", clear of the × close (top-right). */
    .logs-dialog-header[b-04izq9imi9] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding-right: 3rem;
    }

    .logs-dialog-name[b-04izq9imi9] {
        font-size: 1.5rem;
    }

        .logs-dialog-name[b-04izq9imi9]::before {
            content: none;
        }

    /* Shared mobile centers the heading; Sensors keeps its children full-width. */
    .detail-header-heading.sensors-header-body[b-04izq9imi9] {
        align-items: stretch;
    }

    /* Additional Contacts button sits above the address contact info accordion. */
    .detail-header.sensors-header[b-04izq9imi9] {
        grid-template-areas:
            "back"
            "heading"
            "actions"
            "contact"
            "divider";
    }

    .sensors-addr-sep[b-04izq9imi9] {
        display: none;
    }

    .sensors-addr-line2[b-04izq9imi9] {
        display: block;
    }
}

@media (max-width: 899.98px) {
    /* Centered title — drop the shared heading indent so it reads truly centered. */
    .detail-header > .detail-header-heading.sensors-header-body[b-04izq9imi9] {
        padding-left: 0;
    }

    .sensors-name[b-04izq9imi9],
    .sensors-title[b-04izq9imi9] {
        text-align: center;
        width: 100%;
    }

    /* Contact info (incl. Contact Name) moves out of the strip into the accordion below. */
    .info-strip[b-04izq9imi9] {
        display: none;
    }

    .address-contact-body .info-label[b-04izq9imi9]::after {
        content: " :";
    }

    .detail-header-heading.sensors-header-body[b-04izq9imi9] {
        gap: 1.5rem;
    }

    .table-scroll[b-04izq9imi9] {
        margin-top: 0.5rem;
    }

    .table-scroll tbody tr[b-04izq9imi9] {
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        grid-template-areas: "chevron bell name status kebab";
        column-gap: 1.5rem;
        row-gap: 0.5rem;
        align-items: center;
        align-content: center;
        min-height: 50px;
        cursor: pointer;
    }

    /* Expanded: stack the metric rows beneath the header row. */
    .table-scroll tbody tr.sensor-row-expanded[b-04izq9imi9] {
        grid-template-areas:
            "chevron bell name status kebab"
            "water water water water water"
            "battery battery battery battery battery"
            "last last last last last";
    }

    /* No alert bell → drop its column so the name stays flush to the chevron. */
    .table-scroll tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer))[b-04izq9imi9] {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas: "chevron name status kebab";
    }

    .table-scroll tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer)).sensor-row-expanded[b-04izq9imi9] {
        grid-template-areas:
            "chevron name status kebab"
            "water water water water"
            "battery battery battery battery"
            "last last last last";
    }

    .table-scroll tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer)) > td:nth-child(1)[b-04izq9imi9] {
        display: none;
    }

    /* Chevron signals the row is an expandable accordion: down when collapsed, flips up when open. Shares the global --chevron-mask. */
    .table-scroll tbody tr[b-04izq9imi9]::before {
        content: "";
        grid-area: chevron;
        width: 0.85rem;
        height: 0.85rem;
        background-color: var(--text-muted);
        -webkit-mask: var(--chevron-mask) center / contain no-repeat;
        mask: var(--chevron-mask) center / contain no-repeat;
        transform: rotate(0deg);
        transform-origin: center;
        transition: transform 0.2s ease;
        align-self: center;
        justify-self: center;
    }

    .table-scroll tbody tr.sensor-row-expanded[b-04izq9imi9]::before {
        transform: rotate(180deg);
    }

    .table-scroll tbody tr:has(.table-footer)[b-04izq9imi9]::before {
        content: none;
    }

    .table-scroll tbody tr > td[b-04izq9imi9] {
        padding: 0;
    }

    .table-scroll tbody td:nth-child(1)[b-04izq9imi9] {
        grid-area: bell;
        width: auto;
        /* The auto column collapsed to ~1px and the bell overflowed into the name (bug 814). */
        min-width: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
    }

    .sensor-alert-icon[b-04izq9imi9] {
        line-height: 0;
        flex-shrink: 0;
    }

    /* Bell follows the row text size instead of the desktop 20px. */
    .sensor-alert-icon[b-04izq9imi9]::before {
        width: clamp(0.875rem, 1em, 1.25rem);
    }

    .table-scroll tbody td:nth-child(2)[b-04izq9imi9] {
        grid-area: name;
        font-size: 16px;
        font-weight: 600;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .table-scroll tbody td:nth-child(3)[b-04izq9imi9] {
        grid-area: water;
    }

    .table-scroll tbody td:nth-child(4)[b-04izq9imi9] {
        grid-area: battery;
    }

    .table-scroll tbody td:nth-child(5)[b-04izq9imi9] {
        grid-area: last;
    }

    /* Expanded rows show a label beside the value. */
    .table-scroll tbody td:nth-child(3)[b-04izq9imi9],
    .table-scroll tbody td:nth-child(4)[b-04izq9imi9],
    .table-scroll tbody td:nth-child(5)[b-04izq9imi9] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .table-scroll tbody td:nth-child(3)[b-04izq9imi9]::before,
    .table-scroll tbody td:nth-child(4)[b-04izq9imi9]::before,
    .table-scroll tbody td:nth-child(5)[b-04izq9imi9]::before {
        content: attr(data-label) " :";
        flex-shrink: 0;
        font-size: var(--fs-small);
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

    .table-scroll tbody td:nth-child(6)[b-04izq9imi9] {
        grid-area: status;
        justify-self: center;
    }

    .sensor-status-cell[b-04izq9imi9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .table-scroll tbody td.td-actions[b-04izq9imi9] {
        grid-area: kebab;
        position: static;
        transform: none;
        top: auto;
        right: auto;
        background: transparent;
        margin-left: 0.75rem;
    }

    .table-scroll tbody tr:not(.sensor-row-expanded) > td:nth-child(3)[b-04izq9imi9],
    .table-scroll tbody tr:not(.sensor-row-expanded) > td:nth-child(4)[b-04izq9imi9],
    .table-scroll tbody tr:not(.sensor-row-expanded) > td:nth-child(5)[b-04izq9imi9] {
        display: none;
    }

    .table-scroll tbody tr:has(.table-footer)[b-04izq9imi9] {
        display: block;
        text-align: center;
    }

    /* Editing row: collapse to a single full-width cell so the input has maximum room.
       !important needed to beat the higher-specificity :not(:has(...)) grid overrides. */
    .table-scroll tbody tr.sensor-row-editing[b-04izq9imi9] {
        grid-template-columns: 1fr !important;
        grid-template-areas: "edit" !important;
        grid-template-rows: auto !important;
        min-height: unset !important;
    }

    .table-scroll tbody tr.sensor-row-editing > td[b-04izq9imi9] {
        display: none !important;
    }

    .table-scroll tbody tr.sensor-row-editing > td.sensor-edit-td[b-04izq9imi9] {
        display: block !important;
        grid-area: edit;
    }

    .table-scroll tbody tr.sensor-row-editing[b-04izq9imi9]::before {
        display: none !important;
    }

    /* Tapping a card (to expand) must not tint it. */
    .table-scroll tbody tr:hover td[b-04izq9imi9],
    .table-scroll tbody tr:active td[b-04izq9imi9],
    .table-scroll tbody tr:hover td.td-actions[b-04izq9imi9] {
        background-color: transparent;
    }

    /* Email + phone move out of the info strip into the accordion below. */
    .info-item-contact[b-04izq9imi9] {
        display: none;
    }

    /* Lifted out of the heading into its own grid row (grid-area: contact) so the
       Additional Contacts button can sit above it — see the grid overrides below. */
    .address-contact-accordion[b-04izq9imi9] {
        display: block;
        width: 100%;
        grid-area: contact;
    }

    .address-contact-toggle[b-04izq9imi9] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        min-height: 40px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-weight: 450;
        font-size: 1.2rem;
        letter-spacing: 0.12rem;
        cursor: pointer;
    }

    .address-contact-body[b-04izq9imi9] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 0 0;
    }

    .address-contact-body .info-strip-item[b-04izq9imi9] {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
    }

    .address-contact-body .info-strip-item > span:last-child[b-04izq9imi9] {
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .address-contact-body .info-strip-item + .info-strip-item[b-04izq9imi9]::before {
        display: none;
    }
}

/* Tablet: Additional Contacts button drops above the address contact info, sized to
   its wording (not full-width), centered like the heading and accordion below it. */
@media (min-width: 650px) and (max-width: 899.98px) {
    .detail-header.sensors-header[b-04izq9imi9] {
        grid-template-areas:
            "back"
            "heading"
            "actions"
            "contact"
            "divider";
    }

    /* Un-stretch the shared tablet full-width treatment; center the natural-width
       button, and give it room to breathe below the address/title. */
    .detail-header.sensors-header > .detail-header-actions[b-04izq9imi9] {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 1rem;
    }

    /* Accordion is a grid item now — justify-self centers its 70% width horizontally;
       margin-top separates it from the button above. */
    .address-contact-accordion[b-04izq9imi9] {
        width: 70%;
        justify-self: center;
        margin-top: 1rem;
    }
}

/* Full table only exists ≥1000px — 900–999.98px switches to accordion rows below. */
@media (min-width: 1000px) {
    .td-center[b-04izq9imi9] {
        text-align: center;
    }

    .td-center .data-cell[b-04izq9imi9] {
        justify-content: center;
    }

    thead th:not(:first-child):not(:last-child)[b-04izq9imi9] {
        width: 20%;
    }

    /* Tighten the alert-bell column's gap so the sensor name gets more room. */
    thead th:first-child[b-04izq9imi9],
    tbody td:first-child[b-04izq9imi9] {
        padding-right: 0.3rem;
    }

    thead th:nth-child(2)[b-04izq9imi9],
    tbody td:nth-child(2)[b-04izq9imi9] {
        padding-left: 0.5rem;
    }

    /* Editing: neighbor cells fade out, so the editor overlays the whole row — input (≤250px) + save/cancel stay inline regardless of column width. */
    .sensor-edit-td[b-04izq9imi9] {
        height: 52px;
    }

    .sensor-edit-cell[b-04izq9imi9] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0.5rem;
        width: 340px;
    }

    .sensor-edit-cell .form-input[b-04izq9imi9] {
        max-width: 250px;
    }
}

/* ── Narrow desktop (1000–1113.98px): tighter cell padding so the full table fits with no horizontal scroll. ── */
@media (min-width: 1000px) and (max-width: 1113.98px) {
    /* 7.5px per side = 15px between columns. */
    .sensors-table thead th[b-04izq9imi9],
    .sensors-table tbody td[b-04izq9imi9] {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    /* 10px row inset left/right; bell column keeps its tightened gap. */
    .sensors-table thead th:first-child[b-04izq9imi9],
    .sensors-table tbody td:first-child[b-04izq9imi9] {
        padding-left: 10px;
        padding-right: 0.3rem;
    }

    .sensors-table thead th:nth-child(2)[b-04izq9imi9],
    .sensors-table tbody td:nth-child(2)[b-04izq9imi9] {
        padding-left: 0.5rem;
    }

    .sensors-table thead th:last-child[b-04izq9imi9],
    .sensors-table tbody td:last-child[b-04izq9imi9] {
        padding-right: 10px;
    }
}

/* ── Accordion rows (900–999.98px): the desktop table is too tight below 1000px (same
   precedent as the Addresses 900–999 cards). Collapsed row = name + status badge with a
   chevron far right; expanding drops Water Level / Battery / Last Connection below. ── */
@media (min-width: 900px) and (max-width: 999.98px) {
    .sensors-table[b-04izq9imi9] {
        border-radius: 0;
    }

    .sensors-table table[b-04izq9imi9],
    .sensors-table tbody[b-04izq9imi9] {
        display: block;
        width: 100%;
    }

    /* No orphan column headers over the accordion. */
    .sensors-table thead[b-04izq9imi9] {
        display: none;
    }

    .sensors-table tbody tr[b-04izq9imi9] {
        display: grid;
        grid-template-columns: auto 1fr auto auto auto;
        grid-template-areas: "bell name status chevron kebab";
        column-gap: 1.25rem;
        row-gap: 0.5rem;
        align-items: center;
        align-content: center;
        min-height: 50px;
        cursor: pointer;
        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;
    }

    .sensors-table tbody tr.sensor-row-expanded[b-04izq9imi9] {
        grid-template-areas:
            "bell name status chevron kebab"
            "water water water water water"
            "battery battery battery battery battery"
            "last last last last last";
    }

    /* No alert bell → drop its column so the name sits flush left. */
    .sensors-table tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer))[b-04izq9imi9] {
        grid-template-columns: 1fr auto auto auto;
        grid-template-areas: "name status chevron kebab";
    }

    .sensors-table tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer)).sensor-row-expanded[b-04izq9imi9] {
        grid-template-areas:
            "name status chevron kebab"
            "water water water water"
            "battery battery battery battery"
            "last last last last";
    }

    .sensors-table tbody tr:not(:has(.sensor-alert-icon)):not(:has(.table-footer)) > td:nth-child(1)[b-04izq9imi9] {
        display: none;
    }

    /* Accordion chevron, far right beside the kebab: down collapsed, up open (global --chevron-mask). */
    .sensors-table tbody tr[b-04izq9imi9]::before {
        content: "";
        grid-area: chevron;
        width: 0.85rem;
        height: 0.85rem;
        background-color: var(--text-muted);
        -webkit-mask: var(--chevron-mask) center / contain no-repeat;
        mask: var(--chevron-mask) center / contain no-repeat;
        transform: rotate(0deg);
        transform-origin: center;
        transition: transform 0.2s ease;
        align-self: center;
        justify-self: end;
    }

    .sensors-table tbody tr.sensor-row-expanded[b-04izq9imi9]::before {
        transform: rotate(180deg);
    }

    .sensors-table tbody tr:has(.table-footer)[b-04izq9imi9]::before {
        content: none;
    }

    .sensors-table tbody tr > td[b-04izq9imi9] {
        padding: 0;
        border: none;
        width: auto;
        background: transparent;
    }

    /* Clicking a row (to expand) must not tint its cells. */
    .sensors-table tbody tr:hover td[b-04izq9imi9],
    .sensors-table tbody tr:active td[b-04izq9imi9] {
        background: transparent;
    }

    .sensors-table tbody td:nth-child(1)[b-04izq9imi9] {
        grid-area: bell;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
    }

    .sensors-table tbody td:nth-child(2)[b-04izq9imi9] {
        grid-area: name;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .sensors-table tbody td:nth-child(3)[b-04izq9imi9] {
        grid-area: water;
    }

    .sensors-table tbody td:nth-child(4)[b-04izq9imi9] {
        grid-area: battery;
    }

    .sensors-table tbody td:nth-child(5)[b-04izq9imi9] {
        grid-area: last;
    }

    /* Expanded metric rows show a label beside the value. */
    .sensors-table tbody td:nth-child(3)[b-04izq9imi9],
    .sensors-table tbody td:nth-child(4)[b-04izq9imi9],
    .sensors-table tbody td:nth-child(5)[b-04izq9imi9] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .sensors-table tbody td:nth-child(3)[b-04izq9imi9]::before,
    .sensors-table tbody td:nth-child(4)[b-04izq9imi9]::before,
    .sensors-table tbody td:nth-child(5)[b-04izq9imi9]::before {
        content: attr(data-label) " :";
        flex-shrink: 0;
        font-size: var(--fs-small);
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }

    /* Collapsed rows hide the metric cells. */
    .sensors-table tbody tr:not(.sensor-row-expanded) > td:nth-child(3)[b-04izq9imi9],
    .sensors-table tbody tr:not(.sensor-row-expanded) > td:nth-child(4)[b-04izq9imi9],
    .sensors-table tbody tr:not(.sensor-row-expanded) > td:nth-child(5)[b-04izq9imi9] {
        display: none;
    }

    .sensors-table tbody td:nth-child(6)[b-04izq9imi9] {
        grid-area: status;
        justify-self: end;
    }

    .sensors-table .sensor-status-cell[b-04izq9imi9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    /* Kebab stays far right on the bare row — cancel the desktop sticky cell + fill. */
    .sensors-table tbody td.td-actions[b-04izq9imi9] {
        grid-area: kebab;
        position: static;
        transform: none;
        width: auto;
        background: transparent;
    }

    .sensors-table tbody tr:hover td.td-actions[b-04izq9imi9],
    .sensors-table tbody tr:active td.td-actions[b-04izq9imi9],
    .sensors-table tbody tr:focus-within td.td-actions[b-04izq9imi9] {
        background: transparent;
    }

    /* Dark theme pins the sticky fill with !important globally; cancel it here. */
    [data-theme="dark"] .sensors-table tbody td.td-actions[b-04izq9imi9],
    [data-theme="dark"] .sensors-table tbody tr:hover td.td-actions[b-04izq9imi9],
    [data-theme="dark"] .sensors-table tbody tr:active td.td-actions[b-04izq9imi9],
    [data-theme="dark"] .sensors-table tbody tr:focus-within td.td-actions[b-04izq9imi9] {
        background: transparent !important;
    }

    /* Loading / end-of-list rows read as muted text, not accordion cards. */
    .sensors-table tbody tr:has(.table-footer)[b-04izq9imi9] {
        display: block;
        text-align: center;
        background: transparent;
        border: none;
        box-shadow: none;
        cursor: default;
        min-height: unset;
    }

    .sensors-table td.table-footer[b-04izq9imi9] {
        display: block;
        text-align: center;
        color: var(--text-muted);
        padding: var(--space-2) 0;
        background: transparent;
    }

    /* Editing row: collapse to a single full-width cell (mirrors the <900 treatment).
       !important beats the higher-specificity :not(:has(...)) grid overrides. */
    .sensors-table tbody tr.sensor-row-editing[b-04izq9imi9] {
        grid-template-columns: 1fr !important;
        grid-template-areas: "edit" !important;
        min-height: unset !important;
        cursor: default;
    }

    .sensors-table tbody tr.sensor-row-editing > td[b-04izq9imi9] {
        display: none !important;
    }

    .sensors-table tbody tr.sensor-row-editing > td.sensor-edit-td[b-04izq9imi9] {
        display: block !important;
        grid-area: edit;
    }

    .sensors-table tbody tr.sensor-row-editing[b-04izq9imi9]::before {
        display: none !important;
    }

    .sensors-table .sensor-edit-cell .form-input[b-04izq9imi9] {
        min-height: 40px;
    }
}

.sensor-row-editing td[b-04izq9imi9] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* ── Cell-content wrapper: slides right + fades when row enters edit mode ── */
.sensor-cell-wrap[b-04izq9imi9] {
    overflow: hidden;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

.sensor-row-editing .sensor-cell-wrap[b-04izq9imi9] {
    transform: translateX(10px);
    opacity: 0;
    pointer-events: none;
}

/* ── Edit-name td: paints above the sibling cells' opaque backgrounds (app.css gives
   every td z-index:0 and the sticky actions cell z-index:2, which clipped the overlay editor). ── */
.sensor-edit-td[b-04izq9imi9] {
    position: relative;
    z-index: 5;
}

/* ── Edit-name cell: slides in from the left ── */
.sensor-edit-cell[b-04izq9imi9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    animation: sensor-edit-appear-b-04izq9imi9 0.25s ease forwards;
}

    .sensor-edit-cell .form-input[b-04izq9imi9] {
        flex: 1;
        min-width: 100px;
    }

    .sensor-edit-cell .btn-menu[b-04izq9imi9] {
        flex-shrink: 0;
    }

/* Natural width on a common floor so the bars align — a fixed 30px let "100%" spill onto the bar. */
.sensor-water-pct[b-04izq9imi9] {
    flex-shrink: 0;
    min-width: 2.75em;
}

@keyframes sensor-edit-appear-b-04izq9imi9 {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ── Advanced dialog ── */
.adv-section[b-04izq9imi9] {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    /* The dialog body is a flex column; without this the sections shrink to fit a
       short phone screen and clip Level 3 instead of letting the body scroll. */
    flex: none;
    margin-bottom: 1.25rem;
    background: var(--bg-surface-2);
}

.adv-section-header[b-04izq9imi9] {
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 0.9rem;
}

.adv-section-title[b-04izq9imi9] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.adv-section-desc[b-04izq9imi9] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-top: 0.15rem;
}

.alert-level-row[b-04izq9imi9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-color-2);
    gap: 1rem;
    transition: background 0.15s;
}

.alert-level-row:last-child[b-04izq9imi9] {
    border-bottom: none;
}

.alert-level-row-locked[b-04izq9imi9] {
    opacity: 0.45;
    pointer-events: none;
    background: var(--bg-surface-2);
}

.alert-level-label[b-04izq9imi9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 70px;
}

.alert-level-controls[b-04izq9imi9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-level-toggle[b-04izq9imi9] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.alert-level-toggle-disabled[b-04izq9imi9] {
    cursor: not-allowed;
}

.alert-level-input-row[b-04izq9imi9] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.alert-level-input[b-04izq9imi9] {
    width: 70px;
    text-align: center;
    padding: 0.3rem 0.4rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The browser's spinner arrows are too coarse for a percentage and crowd a 70px field. */
.alert-level-input[b-04izq9imi9]::-webkit-outer-spin-button,
.alert-level-input[b-04izq9imi9]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.alert-level-input-invalid[b-04izq9imi9] {
    border-color: #c62828;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.15);
}

/* Sized against the longest option ("Errors & Wi-Fi (default)") so the row does not resize
   as the level is changed. Text scales with the viewport and the right padding reserves the
   chevron's width so it never sits on the text (bug 812). */
.adv-log-level-select[b-04izq9imi9] {
    min-width: 200px;
    padding: 0.3rem calc(0.65rem + 12px + 0.65rem) 0.3rem 0.4rem;
    font-size: clamp(0.875rem, 0.3vw + 0.6rem, 0.9rem);
}

.alert-level-pct[b-04izq9imi9] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.alert-level-disabled-label[b-04izq9imi9] {
    font-size: 0.82rem;
    color: var(--text-faint);
    font-style: italic;
}

/* Phone: the sections drop the boxed look (a box inside the dialog box squeezed the rows;
   the '%' and the Log Level select were clipped) and span the dialog's content width (bugs 795/803). */
@media (max-width: 649.98px) {
    .adv-section[b-04izq9imi9] {
        border: none;
        border-radius: 0;
        background: none;
        overflow: visible;
        margin-bottom: 1rem;
    }

    .adv-section + .adv-section[b-04izq9imi9] {
        border-top: 1px solid var(--border-color);
        padding-top: 1rem;
    }

    .adv-section-header[b-04izq9imi9] {
        padding: 0 0 0.5rem;
    }

    .alert-level-row[b-04izq9imi9] {
        padding: 0.6rem 0;
    }

    .alert-level-row-locked[b-04izq9imi9] {
        background: none;
    }

    .alert-level-label[b-04izq9imi9] {
        min-width: 0;
        white-space: nowrap;
    }

    /* Log Level: the longest option needs ~200px, so the select drops under its label at full width. */
    .alert-level-row:has(.adv-log-level-select)[b-04izq9imi9] {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }

    .alert-level-controls:has(.adv-log-level-select)[b-04izq9imi9] {
        flex: 1 1 100%;
        min-width: 0;
    }

    .adv-log-level-select[b-04izq9imi9] {
        min-width: 0;
        width: 100%;
    }
}

/* ── Sensor logs dialog: restore standard card layout on mobile (matches AddressSensorDetails) ── */
@media (max-width: 899.98px) {
    /* Undo the sensor-grid overrides so rows render as plain block cards. */
    .sensor-logs-table tbody tr[b-04izq9imi9] {
        display: block !important;
        grid-template-columns: unset !important;
        grid-template-areas: unset !important;
        min-height: unset !important;
        cursor: default !important;
        /* ASD-style surface — slightly elevated vs the page bg. */
        background: var(--bg-surface-2) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
    }

    /* Remove the chevron pseudo-element injected for the expandable sensor rows. */
    .sensor-logs-table tbody tr[b-04izq9imi9]::before {
        content: none !important;
        display: none !important;
    }

    /* Reset all td nth-child grid placements and restore block + padding. */
    .sensor-logs-table tbody td[b-04izq9imi9] {
        display: block !important;
        padding: var(--space-1) 0 !important;
        grid-area: unset !important;
        font-size: unset !important;
        font-weight: unset !important;
        min-width: unset !important;
        text-align: left !important;
        justify-content: unset !important;
        align-self: unset !important;
        justify-self: unset !important;
        width: auto !important;
    }

    /* The end-of-list row keeps the site footer size and padding (bug 816). */
    .sensor-logs-table tbody td.table-footer[b-04izq9imi9] {
        font-size: 0.8rem !important;
        padding: var(--space-2) var(--space-3) !important;
    }

    /* Cancel the "hide metric cells on collapsed rows" rule — logs rows are never collapsible. */
    .sensor-logs-table tbody tr > td:nth-child(3)[b-04izq9imi9],
    .sensor-logs-table tbody tr > td:nth-child(4)[b-04izq9imi9],
    .sensor-logs-table tbody tr > td:nth-child(5)[b-04izq9imi9] {
        display: block !important;
        justify-content: unset !important;
        text-align: left !important;
    }

    /* Remove the "data-label :" colon injected for the sensor metric cells. */
    .sensor-logs-table tbody td[b-04izq9imi9]::before {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 649.98px) {
    /* Let the dialog itself scroll rather than the table. */
    .sensor-logs-table[b-04izq9imi9] {
        overflow-y: visible;
        flex: none;
        min-height: 0;
    }
}

/* Phone: the name gets the row - tighter column gaps, the status badge hugs the kebab,
   the name scales down and never wraps (bug 814). */
@media (max-width: 649.98px) {
    .sensors-table tbody tr[b-04izq9imi9] {
        column-gap: 0.85rem;
    }

    .sensors-table tbody td:nth-child(2)[b-04izq9imi9] {
        font-size: clamp(0.8125rem, 4vw, 1rem);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
    }

    .sensors-table tbody td:nth-child(6)[b-04izq9imi9] {
        justify-self: end;
    }

    .sensors-table tbody td.td-actions[b-04izq9imi9] {
        margin-left: 0.25rem;
    }
}

/* ── Wi-Fi logs: secondary line under a cell's headline value (RSSI, BSSID, "Not reported") ── */
.wifi-detail[b-04izq9imi9] {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
}

/* Scan counts behind the per-row expander. */
.wifi-scan-detail[b-04izq9imi9] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: normal;
    word-break: break-word;
}

/* Wi-Fi tab with nothing behind it — no check-ins and no baseline. */
.wifi-empty[b-04izq9imi9] {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-secondary);
}

/* ── Setup baseline: one banner above the table, not a column on every row ── */
.wifi-baseline-strip[b-04izq9imi9] {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    margin-top: 0.75rem;
    border-radius: 6px;
    background: var(--bg-surface-2);
}

.wifi-baseline-label[b-04izq9imi9] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-faint);
    flex-shrink: 0;
}

.wifi-baseline-values[b-04izq9imi9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    word-break: break-word;
}

/* ── Validation error floats below the row so it never expands row height ── */
.sensor-edit-error[b-04izq9imi9] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    font-size: 0.78rem;
    color: var(--text-error);
    background: var(--bg-surface);
    padding: 0.2rem 0.75rem;
    border-bottom: 1px solid #fecaca;
    pointer-events: none;
}
/* /Components/Pages/ServiceCalls/ServiceCallDetails.razor.rz.scp.css */
/* ── Header: grid so the badge stack, back button, title and actions can be
   re-placed per breakpoint without separate markup. Desktop keeps the classic
   "Back  Title ………  Edit Complete" inline row; the badge stack is hidden here
   because the detail grid still carries the labelled Status / Priority. ── */
.scv-header[b-0ih2yrrl35] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "back title actions";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.scv-header-badges[b-0ih2yrrl35] {
    display: none;
}

.scv-back[b-0ih2yrrl35] {
    grid-area: back;
    justify-self: start;
}

/* Desktop + tablet: "Service Call - 123 Main St" on one line; if it can't fit,
   the address wraps as a whole to a second line under the title. */
.scv-title[b-0ih2yrrl35] {
    grid-area: title;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4rem;
}

.scv-title-addr[b-0ih2yrrl35]::before {
    content: "- ";
}

.scv-header-actions[b-0ih2yrrl35] {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
}

/* #4 — wrapper around the contact-info + job-details blocks. Desktop/tablet keep
   display:contents (no box, layout unchanged); phones turn it into one unified
   card (see the <650px block). */
.scv-info[b-0ih2yrrl35] {
    display: contents;
}

[data-theme="dark"] .scv-info[b-0ih2yrrl35] {
    background: var(--bg-surface-2);
    border-color: var(--border-color);
}

[data-theme="dark"] .scv-info .info-strip[b-0ih2yrrl35] {
    border-bottom-color: var(--border-color);
}

/* #3 — overlaid "older notes above" cue, pinned to the top of the notes list and
   revealed only on phones/tablets when scrolled away from the top (the
   has-older-above class is toggled by blazorHelpers.initNotesOlderHint). */
.sc-notes-section[b-0ih2yrrl35] {
    position: relative;
}

.sc-notes-older-hint[b-0ih2yrrl35] {
    display: none;
    position: absolute;
    top: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    padding: 0.1rem 0.55rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 2;
}

.sc-notes-older-hint .chevron[b-0ih2yrrl35] {
    --chevron-size: 0.95rem;
    color: var(--accent);
}

/* The bottom Complete button is phone-only; on desktop/tablet Complete stays in
   the header, so hide the bottom one here (revealed in the <650px block). */
.scv-actions-bottom[b-0ih2yrrl35] {
    display: none;
}

/* ── Mobile only (<650px): Back sits top-left with Edit top-right; "Service Call"
   is centered on its own line with the Open/Priority badges centered just beneath
   it (the address moves into the unified details card below). Complete drops to the
   bottom of the card. Tablet (650–899px) keeps the desktop header. ── */
@media (max-width: 649.98px) {
    .scv-header[b-0ih2yrrl35] {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "back   .      actions"
            "title  title  title"
            "status status status";
    }

    /* Badges centered directly under the title — where the address used to be. */
    .scv-header-badges[b-0ih2yrrl35] {
        grid-area: status;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        justify-self: center;
    }

    .scv-back[b-0ih2yrrl35] {
        justify-self: start;
        align-self: start;
    }

    /* "Service Call" alone, centered; the address is dropped from the header. */
    .scv-title[b-0ih2yrrl35] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.1rem;
        margin: 0.25rem 0;
    }

    .scv-title-addr[b-0ih2yrrl35] {
        display: none;
    }

    /* Edit stays top-right; the header Complete is hidden (rendered at the bottom). */
    .scv-header-actions[b-0ih2yrrl35] {
        grid-area: actions;
        justify-self: end;
        align-self: start;
        margin: 0;
    }

    .scv-complete-header[b-0ih2yrrl35] {
        display: none;
    }

    .scv-actions-bottom[b-0ih2yrrl35] {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
    }

        .scv-actions-bottom .btn-primary[b-0ih2yrrl35] {
            width: 300px;
            max-width: 100%;
        }

    /* Status + Priority now live in the header badge stack — drop both from the
       detail grid to avoid duplicates. */
    .scv-status-detail[b-0ih2yrrl35],
    .scv-priority-detail[b-0ih2yrrl35] {
        display: none;
    }

    /* #4 — Contact info + job details become ONE card. The wrapper draws the card;
       the two inner blocks shed their own chrome and line up as a single 2-column
       label/value grid, split by one internal divider. */
    .scv-info[b-0ih2yrrl35] {
        display: flex;
        flex-direction: column;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .scv-info .info-strip[b-0ih2yrrl35] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem 1rem;
        padding: 0.8rem 1rem;
        margin: 0;
        border-bottom: 1px solid #e5e7eb;
    }

        .scv-info .info-strip .info-strip-item[b-0ih2yrrl35] {
            align-items: flex-start;
            min-width: 0;
        }

        .scv-info .info-strip .info-strip-item[b-0ih2yrrl35]::before {
            display: none;
        }

    .scv-addr-item[b-0ih2yrrl35] {
        grid-column: 1 / -1;
    }

    .scv-info .scv-detail-grid[b-0ih2yrrl35] {
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /* Detail box: two columns (Tech, Created, Scheduled, Completed) instead of a
       single stacked column, so it stays compact on phones. */
    .scv-detail-row[b-0ih2yrrl35] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem 1rem;
    }

    .scv-detail-item[b-0ih2yrrl35] {
        min-width: 0;
    }

    /* Notes panel reads as "big list, tiny input" — taller compose box. */
    .sc-note-textarea[b-0ih2yrrl35] {
        min-height: 76px;
    }
}

/* ── Tablet (650–899px): vertical header — the Back button sits top-left with the
   Status/Priority badges to its right (matching mobile), then the "Service Call -
   address" title, then the Edit/Complete buttons beneath. Status/Priority are
   dropped from the detail box. ── */
@media (min-width: 650px) and (max-width: 899.98px) {
    .scv-header[b-0ih2yrrl35] {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "back    status"
            "title   title"
            "actions actions";
        align-items: start;
    }

    .scv-back[b-0ih2yrrl35] {
        justify-self: start;
        align-self: start;
    }

    .scv-header-badges[b-0ih2yrrl35] {
        grid-area: status;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        justify-self: end;
        margin-top: 0;
    }

    .scv-header-actions[b-0ih2yrrl35] {
        justify-self: stretch;
        margin-top: 0.5rem;
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .scv-status-detail[b-0ih2yrrl35],
    .scv-priority-detail[b-0ih2yrrl35] {
        display: none;
    }
}

/* ── Very small phones: the two-column detail box gets cramped, so fall back to
   a single stacked column. ── */
@media (max-width: 379.98px) {
    .scv-detail-row[b-0ih2yrrl35] {
        grid-template-columns: 1fr;
    }
}

/* Desktop (≥900px): fixed two-column grid so the right column (Priority/Created/Completed) lines up regardless of the left items' widths — the wrapping flex left them ragged. */
@media (min-width: 900px) {
    .scv-detail-row[b-0ih2yrrl35] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scv-detail-item[b-0ih2yrrl35] {
        min-width: 0;
    }
}

/* #3 — Below desktop (≤899px) the notes list is capped so it scrolls on its own
   instead of stretching the page; it auto-scrolls to the newest note and shows the
   "older notes" cue when scrolled up. ── */
@media (max-width: 899.98px) {
    .scv-col-notes[b-0ih2yrrl35] {
        min-height: 0;
    }

    .scv-col-notes .sc-notes-list[b-0ih2yrrl35] {
        flex: 0 1 auto;
        max-height: 50vh;
    }

    .sc-notes-list.has-older-above ~ .sc-notes-older-hint[b-0ih2yrrl35] {
        display: flex;
    }
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
h2[b-u16h3nyudl] {
    margin-top: 1rem;
}

/* Settings page — change-password trigger button */
.btn-change-password[b-u16h3nyudl] {
    align-self: flex-start;
}

/* Settings page — change-password form sub-card */
.settings-sub-card[b-u16h3nyudl] {
    padding: 1.25rem 0.75rem;
    max-width: 340px;
}

/* ── Update Payment Method dialog ── */
.stripe-form-wrap[b-u16h3nyudl] {
    position: relative;
    min-height: 240px;
}

.stripe-or-divider[b-u16h3nyudl] {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 1.25rem 0;
}

    .stripe-or-divider[b-u16h3nyudl]::before,
    .stripe-or-divider[b-u16h3nyudl]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--border-color);
    }

    .stripe-or-divider span[b-u16h3nyudl] {
        padding: 0 0.75rem;
    }

.stripe-hidden[b-u16h3nyudl] {
    visibility: hidden;
}

.stripe-loading-overlay[b-u16h3nyudl] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-radius: 0.5rem;
    z-index: 2;
}

/* ── Change Password dialog — new-password requirements checklist ── */
.password-reqs[b-u16h3nyudl] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .password-reqs li[b-u16h3nyudl] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        color: var(--text-faint);
        transition: color 0.15s ease;
    }

        .password-reqs li[b-u16h3nyudl]::before {
            content: '';
            flex: 0 0 auto;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            border: 1.5px solid var(--border-color);
            background: transparent center / 0.7rem no-repeat;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }

    .password-reqs li.met[b-u16h3nyudl] {
        color: var(--success);
    }

        .password-reqs li.met[b-u16h3nyudl]::before {
            border-color: var(--success);
            background-color: var(--success);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        }

/* /Components/Shared/AddressContactsManager.razor.rz.scp.css */
/* List header: title + subtitle only. The Add button moved to the toolbar below,
   so the header sits clear of (inline with) the × close button, every breakpoint. */
.ac-header[b-bx31mu57aj] {
    margin-bottom: 1rem;
}

/* Toolbar above the contact list: Add button (left) + count pushed far right. */
.ac-list-toolbar[b-bx31mu57aj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ac-add-btn[b-bx31mu57aj] {
    white-space: nowrap;
    flex-shrink: 0;
}

.ac-count[b-bx31mu57aj] {
    font-size: 0.8125rem;
    color: var(--text-faint);
    flex-shrink: 0;
}

/* Email + phone: inline with a dot separator on desktop/tablet. */
.ac-contact-sep[b-bx31mu57aj] {
    color: var(--text-muted);
}

/* AAA contrast (7:1) on the card: the accent is 4.7:1 on white and 6.7:1 on the dark card. */
.ac-contact-part[b-bx31mu57aj] {
    color: #0058a5;
}

[data-theme="dark"] .ac-contact-part[b-bx31mu57aj] {
    color: #46c3f8;
}

.ac-item-header[b-bx31mu57aj] {
    cursor: default;
}

.ac-item-actions[b-bx31mu57aj] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.ac-delete-btn:hover[b-bx31mu57aj] {
    color: var(--danger, #dc2626);
    background: var(--bg-surface-3);
}

.ac-badges[b-bx31mu57aj] {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.ac-toggle-row[b-bx31mu57aj] {
    border-bottom: none;
}

/* Phone (<650px, bug 805): the card becomes a grid — name + edit/delete on line 1,
   email + Email badge on line 2, phone + SMS badge on line 3. The wrappers are
   flattened with display: contents so the leaf spans can take grid areas. */
@media (max-width: 649.98px) {
    .ac-list-toolbar[b-bx31mu57aj] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .ac-count[b-bx31mu57aj] {
        text-align: right;
    }

    /* Wrapping flex row ordered name, icons | Email badge, email | SMS badge, phone; the
       ::before/::after spacers force the two line breaks. A badge leads its line; text that
       does not fit beside it moves whole to the next line and takes the full width. */
    .ac-item-header[b-bx31mu57aj] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
    }

    /* The spacers also carry the extra 10px between the lines, so a text that drops under
       its badge keeps the plain 0.3rem gap. */
    .ac-item-header[b-bx31mu57aj]::before,
    .ac-item-header[b-bx31mu57aj]::after {
        content: "";
        flex-basis: 100%;
        height: 10px;
    }

    .ac-item-header[b-bx31mu57aj]::before {
        order: 3;
    }

    .ac-item-header[b-bx31mu57aj]::after {
        order: 6;
    }

    .erl-item-info[b-bx31mu57aj],
    .ac-contact-lines[b-bx31mu57aj],
    .ac-badges[b-bx31mu57aj] {
        display: contents;
    }

    .erl-item-name[b-bx31mu57aj] {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .ac-item-actions[b-bx31mu57aj] {
        order: 2;
        margin-left: 0.5rem;
    }

    /* Text next to a badge keeps the 0.5rem gap, and stays indented by it when it drops under the badge. */
    .ac-item-header:has(.ac-badge-email) .ac-contact-email[b-bx31mu57aj],
    .ac-item-header:has(.ac-badge-sms) .ac-contact-phone[b-bx31mu57aj] {
        margin-left: 0.5rem;
    }

    .ac-contact-part[b-bx31mu57aj] {
        display: block;
        flex: 0 0 auto;
        max-width: 100%;
        overflow-wrap: anywhere;
        margin-top: 0.3rem;
    }

    .ac-contact-email[b-bx31mu57aj] {
        order: 5;
    }

    .ac-contact-phone[b-bx31mu57aj] {
        order: 8;
    }

    /* Badges match the email/phone text size. */
    .ac-badge-email[b-bx31mu57aj],
    .ac-badge-sms[b-bx31mu57aj] {
        font-size: 0.78rem;
        padding: 0.1rem 0.45rem;
        margin-top: 0.3rem;
    }

    .ac-badge-email[b-bx31mu57aj] {
        order: 4;
    }

    .ac-badge-sms[b-bx31mu57aj] {
        order: 7;
    }

    .ac-item-header[b-bx31mu57aj] {
        padding-top: calc(0.75rem + 10px);
        padding-bottom: calc(0.75rem + 10px);
    }

    .ac-contact-sep[b-bx31mu57aj] {
        display: none;
    }

    /* Back on its own line: beside it the global title fitter (helpers.js) shrank the title to 13px. */
    .ac-back-row[b-bx31mu57aj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding-right: 0;
    }

    .ac-back-row .dialog-title[b-bx31mu57aj] {
        align-self: stretch;
        padding-right: 0;
        min-height: 0;
    }
}
/* /Components/Shared/CompanyQuickLook.razor.rz.scp.css */
.cql-container[b-6gkxz900uo] {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

/* Header is a flex row of two zones: toggle button (left) + stats (right). */
.cql-header[b-6gkxz900uo] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.4rem;
    transition: background-color 0.15s ease;
}

    /* Hovering the toggle (title/chevron area) lights up the entire header row */
    .cql-header:has(.cql-toggle:hover)[b-6gkxz900uo] {
        background: var(--bg-hover);
    }

/* Toggle button — chevron + title, expands the accordion */
.cql-toggle[b-6gkxz900uo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    flex-shrink: 0;
}

    .cql-toggle:focus-visible[b-6gkxz900uo] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.cql-title[b-6gkxz900uo] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Stats zone */
.cql-stats[b-6gkxz900uo] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1;
}

/* Each stat tile — base style (used for non-interactive Total Clients / Sensors) */
.cql-stat[b-6gkxz900uo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    min-width: 0;
    border-radius: 0.375rem;
}

/* Stat info column (label above value) */
.cql-stat-info[b-6gkxz900uo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    align-items: flex-start;
}

/* When .cql-stat is a button (Attention / Active SC) — clickable affordance */
.cql-stat-action[b-6gkxz900uo] {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: background-color 0.15s ease;
}

    .cql-stat-action:hover[b-6gkxz900uo] {
        background: var(--bg-hover);
    }

    .cql-stat-action:focus-visible[b-6gkxz900uo] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

    .cql-stat-action:hover .cql-stat-chevron[b-6gkxz900uo] {
        color: var(--accent);
        transform: translateX(2px);
    }

.cql-stat-chevron[b-6gkxz900uo] {
    color: var(--text-faint);
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.15s ease;
}

/* For .cql-stat without .cql-stat-info wrapper (non-action tiles), keep label-above-value */
.cql-stat:not(.cql-stat-action)[b-6gkxz900uo] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.cql-stat-label[b-6gkxz900uo] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cql-stat-value[b-6gkxz900uo] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.cql-stat-alert[b-6gkxz900uo] {
    color: #cc3e00;
}

/* Accordion body — collapses with max-height transition */
.cql-body[b-6gkxz900uo] {
    max-height: 0;
    overflow: hidden;
    border-top: 0 solid var(--border-color);
    transition: max-height 0.25s ease, border-top-width 0s linear 0.25s;
}

.cql-expanded .cql-body[b-6gkxz900uo] {
    max-height: 25vh;
    border-top-width: 1px;
    transition: max-height 0.25s ease, border-top-width 0s linear;
}

.cql-body-inner[b-6gkxz900uo] {
    padding: 1rem 1.1rem;
    height: 100%;
    overflow-y: auto;
}

/* --- Breakdown grid (expanded body) --- */
.cql-breakdown-grid[b-6gkxz900uo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    min-height: 0;
}

.cql-breakdown-card[b-6gkxz900uo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem 1rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.cql-breakdown-card-action[b-6gkxz900uo] {
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    padding-right: 2.2rem; /* room for chevron */
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .cql-breakdown-card-action:hover[b-6gkxz900uo] {
        background: var(--bg-hover);
        border-color: var(--accent);
    }

    .cql-breakdown-card-action:focus-visible[b-6gkxz900uo] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

    .cql-breakdown-card-action:hover .cql-breakdown-chevron[b-6gkxz900uo] {
        color: var(--accent);
        transform: translateY(-50%) translateX(3px);
    }

.cql-breakdown-card-label[b-6gkxz900uo] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cql-breakdown-card-value[b-6gkxz900uo] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.cql-breakdown-card-description[b-6gkxz900uo] {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.cql-loading-text[b-6gkxz900uo] {
    font-style: italic;
    opacity: 0.85;
}

.cql-breakdown-chevron[b-6gkxz900uo] {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    transition: transform 0.15s ease, color 0.15s ease;
}

/* Priority chip row for Active Service Calls breakdown */
.cql-priority-row[b-6gkxz900uo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

.cql-priority-chip[b-6gkxz900uo] {
    display: inline-flex;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem !important; /* override .badge-priority-* font-size */
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}

/* Responsive: collapse the grid */
@media (max-width: 900px) {
    .cql-breakdown-grid[b-6gkxz900uo] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .cql-breakdown-grid[b-6gkxz900uo] {
        grid-template-columns: 1fr;
    }
}

/* Mobile: stack title above stats */
@media (max-width: 720px) {
    .cql-header[b-6gkxz900uo] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .cql-stats[b-6gkxz900uo] {
        justify-content: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Shared/CompanyQuickLookSimple.razor.rz.scp.css */
/* Container query collapses each stat to icon + value (label hidden) at narrow widths. */

.cqls-container[b-ny1syoqlnq] {
    container-type: inline-size;
    container-name: cqls;
}

/* 0.5rem gap is the minimum before the container query collapses to icon mode. */
.cqls-row[b-ny1syoqlnq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem 0.5rem 0.4rem;
}

.cqls-title[b-ny1syoqlnq] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    white-space: nowrap;
    align-self: center;
    margin: 0;
    padding: 0.5rem 0.85rem;
    flex-shrink: 0;
}

/* --- Stats zone — sized to content, no wrapping, right-aligned so its right edge
   lines up with the search bar and the table on the right side of the dashboard. --- */
.cqls-stats[b-ny1syoqlnq] {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: auto;
}

/* Each stat tile — label above value. Same shape whether it's a <button> or <div>. */
.cqls-stat[b-ny1syoqlnq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.85rem;
    min-width: 0;
    border-radius: 0.375rem;
}

/* Clickable variants — aggressively reset browser button chrome so it looks identical
   to the info-only stats, then layer on hover/focus affordances. */
.cqls-stat-action[b-ny1syoqlnq] {
    /* reset */
    background: transparent;
    border: none;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;

    /* affordance */
    cursor: pointer;
    transition: background-color 0.21s ease, box-shadow 0.21s ease;
}

    .cqls-stat-action:hover[b-ny1syoqlnq] {
        background: var(--bg-hover);
        box-shadow: inset 0 -2px 0 0 var(--accent);
    }

    .cqls-stat-action:focus-visible[b-ny1syoqlnq] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.cqls-stat-label[b-ny1syoqlnq] {
    font-size: 0.81rem; /* 13px — meets project text-minimum */
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.cqls-stat-value[b-ny1syoqlnq] {
    font-family: 'Saira', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.cqls-stat-alert[b-ny1syoqlnq] {
    color: #cc3e00;
}

/* Stat icon — hidden in text mode, shown in icon mode (via container query below). */
.cqls-stat-icon[b-ny1syoqlnq] {
    display: none;
    color: var(--text-muted);
    flex-shrink: 0;
}

.cqls-stat-icon-alert[b-ny1syoqlnq] {
    color: #cc3e00;
}

/* Row holding the Active SC big number + priority circles inline */
.cqls-value-row[b-ny1syoqlnq] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

/* --- Priority circles (replace text chips from the original) --- */
.cqls-priority-circles[b-ny1syoqlnq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cqls-priority-circle[b-ny1syoqlnq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.81rem; /* 13px */
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.cqls-priority-emergency[b-ny1syoqlnq] {
    background: #fee2e2;
    color: var(--text-error);
}

.cqls-priority-high[b-ny1syoqlnq] {
    background: #ffedd5;
    color: #9a3412;
}

.cqls-priority-medium[b-ny1syoqlnq] {
    background: #fef9c3;
    color: #854d0e;
}

.cqls-priority-low[b-ny1syoqlnq] {
    background: #dcfce7;
    color: #166534;
}

/* Loading indicator while priority breakdown is being fetched */
.cqls-loading-dot[b-ny1syoqlnq] {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--text-faint);
    animation: cqls-pulse-b-ny1syoqlnq 1s ease-in-out infinite;
}

@keyframes cqls-pulse-b-ny1syoqlnq {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* 920 container-px ≈ viewport 1250 on this dashboard layout.
   Hover on any stat swipes the hidden label out to the right of the value (and circles, for Active SC). */
@container cqls (max-width: 920px) {
    /* In icon mode the stats sit next to the title (left-aligned) with a 3rem margin */


    .cqls-stats[b-ny1syoqlnq] {
        margin-left: 0;
    }

    .cqls-stat[b-ny1syoqlnq] {
        flex-direction: row;
        align-items: center;
        gap: 0; /* spacing controlled by margins so collapsed state has zero visible gap */
        padding: 0.5rem 0.7rem;

        /* All stats get the same border treatment so the hover effect is consistent */
        border: 2px solid transparent;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        transition: border-color 0.3125s ease;
    }

    .cqls-stat:hover[b-ny1syoqlnq] {
        border-color: var(--accent);
    }

    /* Order: icon (1) → value (2) → label (3) → priority circles (4). Active SC's
       .cqls-value-row uses display:contents so circles lift to direct flex items. */
    .cqls-stat-icon[b-ny1syoqlnq] {
        display: inline-block;
        order: 1;
        margin-right: 0.45rem;
    }

    .cqls-stat-value[b-ny1syoqlnq] {
        order: 2;
        font-size: 1.2rem;
    }

    .cqls-value-row[b-ny1syoqlnq] {
        display: contents;
    }

    /* Hide label via max-width collapse (not display:none) so it can animate open */
    .cqls-stat-label[b-ny1syoqlnq] {
        display: inline-block;
        order: 3;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        margin-left: 0;
        transition: max-width 0.375s ease-out,
                    opacity 0.25s ease-out 0.0625s,
                    margin-left 0.375s ease-out;
    }

    .cqls-stat:hover .cqls-stat-label[b-ny1syoqlnq] {
        max-width: 14rem;
        opacity: 1;
        margin-left: 0.45rem;
    }

    /* Same swipe-in trick for the Active SC priority circles — order 4 puts them
       on the far right, after the label. */
    .cqls-priority-circles[b-ny1syoqlnq] {
        order: 4;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        margin-left: 0;
        transition: max-width 0.375s ease-out,
                    opacity 0.25s ease-out 0.0625s,
                    margin-left 0.375s ease-out;
    }

    .cqls-stat:hover .cqls-priority-circles[b-ny1syoqlnq] {
        max-width: 14rem;
        opacity: 1;
        margin-left: 0.45rem;
    }

    /* Active filter: show only the selected stat, expanded to its full wording. */
    .cqls-stats--filtered .cqls-stat:not(.cqls-stat-selected)[b-ny1syoqlnq] {
        display: none;
    }

    .cqls-stat-selected .cqls-stat-label[b-ny1syoqlnq] {
        max-width: 14rem;
        opacity: 1;
        margin-left: 0.45rem;
    }

    .cqls-stat-selected .cqls-priority-circles[b-ny1syoqlnq] {
        max-width: 14rem;
        opacity: 1;
        margin-left: 0.45rem;
    }

    /* The two action stats: keep the click affordance (cursor) but suppress the
       text-mode underline+bg hover so it doesn't fight the new border treatment. */
    .cqls-stat-action[b-ny1syoqlnq] {
        background: transparent;
        box-shadow: none;
    }

    .cqls-stat-action:hover[b-ny1syoqlnq] {
        background: transparent;
        box-shadow: none;
    }
}

/* Very narrow: stack title above stats (icon mode is already active by this point) */
@container cqls (max-width: 480px) {
    .cqls-row[b-ny1syoqlnq] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .cqls-stats[b-ny1syoqlnq] {
        justify-content: center;   /* center the icon stats on mobile */
        gap: 0.4rem;
    }
}

/* --- Dark theme overrides for priority circles --- */
:global([data-theme="dark"]) .cqls-priority-emergency[b-ny1syoqlnq] {
    background: #2d0a0a;
    color: var(--text-error);
}

:global([data-theme="dark"]) .cqls-priority-high[b-ny1syoqlnq] {
    background: #3b1a0a;
    color: #fdba74;
}

:global([data-theme="dark"]) .cqls-priority-medium[b-ny1syoqlnq] {
    background: #2d1f00;
    color: #f59e0b; /* amber-500 — darker warning yellow, more saturated than the previous #fcd34d */
}

:global([data-theme="dark"]) .cqls-priority-low[b-ny1syoqlnq] {
    background: #052e16;
    color: #86efac;
}
/* /Components/Shared/Dialog.razor.rz.scp.css */
.dialog-overlay[b-twpsy1tu5e] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog-box[b-twpsy1tu5e] {
    background: var(--bg-surface);
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: min(92vw, 1100px);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.dialog-body[b-twpsy1tu5e] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Padding lives here (not on the box) so the close button scrolls with the content. */
    padding: 3rem 1.8rem;
    position: relative;
    overflow-y: auto;
}

/* Mobile (<650px): trim the dialog's horizontal padding so content has more
   usable width. Top/bottom 3rem stays — that's the room for the X close button. */
@media (max-width: 649.98px) {
    .dialog-box[b-twpsy1tu5e] {
        width: 95vw;
    }

    .dialog-body[b-twpsy1tu5e] {
        /* Mobile modal dialogs: ~20px above the title + close button (site-wide). */
        padding-top: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* /Components/Shared/Divider.razor.rz.scp.css */
.app-divider[b-omddb0rnm5] {
    width: 95%;
    height: 2px;
    margin: 1rem auto;
    background: linear-gradient(to right,
        transparent 0%,
        var(--accent) 20%,
        var(--accent) 80%,
        transparent 100%);
    border-radius: 1px;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-96msyztary] {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
    width: 100%;
    min-height: 50vh;
    text-align: center;
    color: var(--text-muted);
}

.empty-state-icon[b-96msyztary] {
    width: 120px;
    height: auto;
    opacity: 0.55;
    color: var(--text-muted);
}

.empty-state-text[b-96msyztary] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-muted);
}
/* /Components/Shared/FeedbackButton.razor.rz.scp.css */
.feedback-icon[b-0efx99l8rl] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105'/%3E%3C/svg%3E");
}
/* /Components/Shared/FixedDialog.razor.rz.scp.css */
.fixed-dialog-overlay[b-kb1s3mu415] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.fixed-dialog-box[b-kb1s3mu415] {
    background: var(--bg-surface);
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: min(92vw, 990px);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.fixed-dialog-body[b-kb1s3mu415] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Padding lives here (not on the box) so the close button can sit inside this
       scroll container and scroll away with the content instead of staying pinned. */
    padding: 2rem;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Phones: still a centered modal box (matching the Dialog component), wider and with
   trimmed side padding so content keeps usable width. Must follow the base rules. */
@media (max-width: 649.98px) {
    .fixed-dialog-box[b-kb1s3mu415] {
        width: 95vw;
    }

    .fixed-dialog-body[b-kb1s3mu415] {
        /* Mobile modal dialogs: ~20px above the title + close button (site-wide). */
        padding-top: 1.25rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.fixed-dialog-box-wide[b-kb1s3mu415] {
    width: min(92vw, 900px);
}

.fixed-dialog-box-compact[b-kb1s3mu415] {
    width: min(92vw, 500px);
}

.fixed-dialog-box-tall[b-kb1s3mu415] {
    max-height: 90vh;
    max-height: 90dvh;
}
/* /Components/Shared/InviteEmployeesForm.razor.rz.scp.css */
.ai-empty-roles-hint[b-ha85icyn94] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
}

.ai-existing-list[b-ha85icyn94] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.ai-existing-row[b-ha85icyn94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-surface-2);
}

.ai-existing-email[b-ha85icyn94] {
    font-size: 0.9rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    min-width: 0;
}

.ai-existing-role[b-ha85icyn94] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* /Components/Shared/OnboardingDialog.razor.rz.scp.css */
.onboard-csv-plan-list[b-q0fltwfpet] {
    max-height: 22rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.onboard-csv-plan-row[b-q0fltwfpet] {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.onboard-csv-plan-row-header[b-q0fltwfpet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.onboard-csv-plan-name[b-q0fltwfpet] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.onboard-csv-plan-row-detail[b-q0fltwfpet] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

    .onboard-csv-plan-row-detail span[b-q0fltwfpet] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.onboard-csv-plan-addresses[b-q0fltwfpet] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.onboard-csv-plan-address[b-q0fltwfpet] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.onboard-csv-plan-address-lines[b-q0fltwfpet] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

    .onboard-csv-plan-address-lines span[b-q0fltwfpet] {
        overflow-wrap: anywhere;
    }

.onboard-csv-plan-status[b-q0fltwfpet] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.onboard-csv-plan-status-adding[b-q0fltwfpet] {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.onboard-csv-plan-status-updating[b-q0fltwfpet] {
    background: color-mix(in srgb, #d97706 15%, transparent);
    color: #d97706;
}

.onboard-csv-plan-status-duplicate[b-q0fltwfpet] {
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    color: var(--text-muted);
}

/* ── Existing-clients accordion ── */

.onboard-existing-client-header[b-q0fltwfpet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

    .onboard-existing-client-header:disabled[b-q0fltwfpet] {
        cursor: default;
    }

.onboard-existing-client-main[b-q0fltwfpet] {
    min-width: 0;
    flex: 1;
}

.onboard-existing-address-name[b-q0fltwfpet] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Back | Skip + primary can't fit one row on very narrow screens; wrap instead of overflowing. */
.onboard-invite-footer[b-q0fltwfpet],
.onboard-invite-footer-right[b-q0fltwfpet] {
    flex-wrap: wrap;
}
/* /Components/Shared/OtpCodeInput.razor.rz.scp.css */
.code-inputs[b-gte4s2wsng] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    /* digit size lives here: the global iOS-zoom rule sizes inputs as max(16px, 1em),
       so 1em must resolve against this parent to render large digits */
    font-size: 1.5rem;
}

.code-box[b-gte4s2wsng] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 3rem;
    height: 3rem;
    padding: 0;
    text-align: center;
    font-weight: 600;
}
/* /Components/Shared/SensorLogDays.razor.rz.scp.css */
.sld-list[b-hs90r69ukx] {
    --sld-cols: 1rem minmax(8.5rem, 1fr) minmax(0, 2fr) minmax(6.5rem, 1fr);
    --sld-pad: var(--space-4);
    --sld-gap: var(--space-4);
    display: flex;
    flex-direction: column;
}

.sld-columns[b-hs90r69ukx],
.sld-day-header[b-hs90r69ukx],
.sld-gap[b-hs90r69ukx],
.sld-checkin[b-hs90r69ukx] {
    display: grid;
    grid-template-columns: var(--sld-cols);
    column-gap: var(--sld-gap);
    align-items: center;
}

.sld-columns[b-hs90r69ukx] {
    padding: 0.5rem var(--sld-pad);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--table-head-bg);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.sld-day[b-hs90r69ukx] {
    border-bottom: 1px solid var(--border-color-2);
}

.sld-day-header[b-hs90r69ukx] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--sld-pad);
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

    .sld-day-header:hover[b-hs90r69ukx] {
        background: var(--bg-hover);
    }

    .sld-day-header:focus-visible[b-hs90r69ukx] {
        outline: 2px solid var(--text-link);
        outline-offset: -2px;
    }

.sld-day-static[b-hs90r69ukx],
.sld-day-static:hover[b-hs90r69ukx] {
    background: none;
    cursor: default;
}

.sld-date[b-hs90r69ukx] {
    font-weight: 600;
    white-space: nowrap;
}

.sld-level[b-hs90r69ukx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    min-width: 0;
}

.sld-range[b-hs90r69ukx] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sld-pct[b-hs90r69ukx] {
    min-width: 2.75em;
}

.water-level-low[b-hs90r69ukx] {
    font-size: 0.8125rem;
}

.progress-track[b-hs90r69ukx],
.progress-fill[b-hs90r69ukx] {
    display: block;
}

.sld-day-body[b-hs90r69ukx] {
    padding: 0 var(--sld-pad) var(--space-3);
}

.sld-count[b-hs90r69ukx] {
    padding: var(--space-1) 0 var(--space-2) calc(1rem + var(--sld-gap));
    font-size: 0.8125rem;
    color: var(--text-faint);
}

.sld-checkins[b-hs90r69ukx] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 0.375rem;
    background: var(--bg-surface-2);
}

.sld-checkin[b-hs90r69ukx] {
    padding: var(--space-2) 0;
    font-size: 0.875rem;
}

    .sld-checkin + .sld-checkin[b-hs90r69ukx] {
        border-top: 1px solid var(--border-color-2);
    }

.sld-time[b-hs90r69ukx] {
    grid-column: 2;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sld-gap[b-hs90r69ukx] {
    min-height: 40px;
    padding: var(--space-2) var(--sld-pad);
    border-bottom: 1px solid var(--border-color-2);
    color: var(--text-faint);
}

    .sld-gap .sld-date[b-hs90r69ukx] {
        font-weight: 400;
    }

.sld-gap-text[b-hs90r69ukx] {
    grid-column: 3 / -1;
    font-style: italic;
}

.sld-nosignal .sld-date[b-hs90r69ukx] {
    white-space: normal;
}

.sld-nosignal-label[b-hs90r69ukx] {
    font-style: normal;
    font-weight: 600;
    color: var(--text-secondary);
}

.sld-sentinel[b-hs90r69ukx] {
    height: 1px;
}

.sld-footer[b-hs90r69ukx] {
    padding: var(--space-4);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-faint);
}

@media (min-width: 900px) and (max-width: 999.98px) {
    .sld-list[b-hs90r69ukx] {
        --sld-cols: 1rem minmax(7.5rem, 1fr) minmax(0, 2fr) minmax(5.5rem, 1fr);
        --sld-pad: var(--space-3);
        --sld-gap: var(--space-3);
    }

    .progress-track[b-hs90r69ukx] {
        width: 64px;
    }
}

@media (max-width: 899.98px) {
    .sld-list[b-hs90r69ukx] {
        --sld-pad: var(--space-3);
        --sld-gap: var(--space-3);
        gap: var(--space-2);
    }

    .sld-columns[b-hs90r69ukx] {
        display: none;
    }

    .sld-day[b-hs90r69ukx] {
        border-bottom: none;
        border-radius: 0.5rem;
        background: var(--bg-surface-2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    /* Date on its own line; the readings (water, then battery) sit together on the second so the
       two values read as one row, the way the check-in rows below them do. */
    .sld-day-header[b-hs90r69ukx] {
        grid-template-columns: 1rem minmax(0, 1fr) auto;
        grid-template-areas:
            "chev date  date"
            ".    level battery";
        row-gap: var(--space-1);
        border-radius: inherit;
    }

        .sld-day-header > .chevron[b-hs90r69ukx],
        .sld-day-header > .sld-spacer[b-hs90r69ukx] {
            grid-area: chev;
        }

        .sld-day-header > .sld-date[b-hs90r69ukx] {
            grid-area: date;
        }

        .sld-day-header > .sld-level[b-hs90r69ukx] {
            grid-area: level;
        }

        .sld-day-header > .sld-battery[b-hs90r69ukx] {
            grid-area: battery;
            justify-self: end;
        }

    .sld-checkins[b-hs90r69ukx] {
        background: var(--bg-surface);
    }

    .sld-checkin[b-hs90r69ukx] {
        grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr) auto;
        padding-inline: var(--space-3);
    }

    .sld-time[b-hs90r69ukx] {
        grid-column: auto;
    }

    .sld-gap[b-hs90r69ukx] {
        grid-template-columns: 1rem minmax(0, 1fr) auto;
        border: 1px dashed var(--border-color);
        border-radius: 0.5rem;
    }

    .sld-gap-text[b-hs90r69ukx] {
        grid-column: auto;
    }
}

@media (max-width: 649.98px) {
    .sld-day-header[b-hs90r69ukx] {
        min-height: 44px;
    }

    .sld-count[b-hs90r69ukx] {
        padding-left: 0;
    }

    .sld-nosignal[b-hs90r69ukx] {
        grid-template-columns: 1rem minmax(0, 1fr);
        row-gap: var(--space-1);
    }

        .sld-nosignal .sld-gap-text[b-hs90r69ukx] {
            grid-column: 2;
        }

    .sld-checkin[b-hs90r69ukx] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .sld-checkin-water[b-hs90r69ukx] {
        /* Left-aligned so LOW lines up with the percentage readings above and below it. */
        justify-self: start;
    }

    .progress-track[b-hs90r69ukx] {
        width: 56px;
    }
}
/* /Components/Shared/ServiceCallDialogShell.razor.rz.scp.css */
/* Fills the dialog body and shrinks with it (min-height:0) so only .sc-shell-scroll
   ever scrolls — the title/divider stay pinned on top, the actions pinned at the bottom. */
.sc-shell[b-1nfa4j3u7n] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sc-title-row[b-1nfa4j3u7n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.sc-title-row[b-1nfa4j3u7n],
.sc-shell > .sc-info-row[b-1nfa4j3u7n],
.sc-shell > .dialog-error-list[b-1nfa4j3u7n],
.sc-shell > .dialog-actions[b-1nfa4j3u7n] {
    flex-shrink: 0;
}

/* Info trio lives in the pinned header now, between the title and the divider. */
.sc-shell > .sc-info-row[b-1nfa4j3u7n] {
    margin: 0.25rem 0 0.75rem;
}

/* Change Address rides the title row now — drop the spacing it carried inside the info strip. */
.sc-title-row[b-1nfa4j3u7n]  .sc-change-address {
    margin-top: 0;
    align-self: center;
    flex-shrink: 0;
}

.sc-shell[b-1nfa4j3u7n]  .app-divider {
    flex-shrink: 0;
}

.sc-shell-scroll[b-1nfa4j3u7n] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Field rows: either all five inputs on one row (≥1000px) or a 2/3 split —
   date/start/end on top, technician + priority below. Never one input alone. */
.sc-fields[b-1nfa4j3u7n] {
    display: flex;
    flex-direction: column;
}

.sc-grid-assign[b-1nfa4j3u7n] {
    margin-top: 1rem;
    grid-template-columns: repeat(2, minmax(0, 170px));
    justify-content: center;
}

/* Compact date/start/end at every breakpoint — the inputs hug their content
   instead of splitting the row into thirds. minmax(0,·) lets them shrink on phones. */
.sc-grid-schedule[b-1nfa4j3u7n] {
    grid-template-columns: minmax(0, 190px) minmax(0, 150px) minmax(0, 150px);
    justify-content: center;
}

.sc-sensors-row[b-1nfa4j3u7n] {
    margin-top: 1rem;
}

/* Content-sized (capped by max-height) instead of the app.css flex:1 column-fill. */
.sc-sensors-row .sc-sensors-scroll[b-1nfa4j3u7n] {
    flex: 0 0 auto;
}

.sc-notes-full[b-1nfa4j3u7n] {
    margin-top: 1rem;
}

.sc-notes-full[b-1nfa4j3u7n]  .sc-notes-list {
    display: flex;
}

@media (min-width: 900px) {
    /* Address leads (capped, wraps beyond it), customer and phone hug their text;
       the trio centers as a group instead of filling left-to-right. */
    .sc-info-row[b-1nfa4j3u7n] {
        display: grid;
        grid-template-columns: fit-content(26rem) max-content max-content;
        justify-content: center;
        gap: 1rem 3.5rem;
    }

    .sc-sensors-row .sc-sensors-scroll[b-1nfa4j3u7n] {
        max-height: 180px;
    }

    .sc-notes-full[b-1nfa4j3u7n]  .sc-initial-note {
        min-height: 120px;
    }
}

/* ≥1000px: date/start/end/technician/priority share one centered row (the grids
   dissolve via display:contents so their form-groups become flex items). nowrap —
   under pressure the inputs compress rather than orphaning one onto its own row. */
@media (min-width: 1000px) {
    /* Header info trio reads left-aligned on desktop; tablet/mobile stay centered. */
    .sc-info-row[b-1nfa4j3u7n] {
        justify-content: start;
    }

    .sc-fields[b-1nfa4j3u7n] {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 1.25rem;
    }

    .sc-fields > .sc-grid-schedule[b-1nfa4j3u7n],
    .sc-fields > .sc-grid-assign[b-1nfa4j3u7n] {
        display: contents;
    }

    .sc-grid-schedule > .form-group[b-1nfa4j3u7n] {
        flex: 0 1 150px;
    }

    .sc-grid-schedule > .form-group:first-child[b-1nfa4j3u7n] {
        flex-basis: 190px;
    }

    .sc-grid-assign > .form-group[b-1nfa4j3u7n] {
        flex: 0 1 170px;
    }
}

@media (max-width: 899.98px) {
    /* Match the <900px hidden-scrollbar convention from app.css. */
    .sc-shell-scroll[b-1nfa4j3u7n] {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sc-shell-scroll[b-1nfa4j3u7n]::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

@media (max-width: 649.98px) {
    /* Mobile rows: date alone, then start/end as halves, then technician/priority
       as halves — the 3-up row is too tight for the time boxes here. */
    .sc-grid-schedule[b-1nfa4j3u7n] {
        grid-template-columns: 1fr 1fr;
    }

    .sc-grid-schedule > .form-group:first-child[b-1nfa4j3u7n] {
        grid-column: 1 / -1;
    }

    .sc-grid-assign[b-1nfa4j3u7n] {
        grid-template-columns: 1fr 1fr;
    }

    .sc-grid-schedule[b-1nfa4j3u7n]  .tp-value,
    .sc-grid-schedule[b-1nfa4j3u7n]  .tp-sep,
    .sc-grid-schedule[b-1nfa4j3u7n]  .dp-field {
        font-size: 0.8125rem;
    }

    .sc-grid-schedule[b-1nfa4j3u7n],
    .sc-grid-assign[b-1nfa4j3u7n] {
        gap: 0.75rem;
    }
}
/* /Components/Shared/ServiceCallQuickView.razor.rz.scp.css */
/* Root container — fills the .dialog-body's available height so the notes zone can flex */
.scqv-root[b-mufrzq1k1a] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Notes zone — takes all remaining vertical space after the header, info strip, and sensors */
.scqv-notes-zone[b-mufrzq1k1a] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 150px;
    margin-top: 1.25rem;
    overflow: hidden;
}

.scqv-notes-heading[b-mufrzq1k1a] {
    margin: 0 0 0.4rem 0;
}

/* The actual scrolling notes list — overrides the global .sc-notes-list { max-height: 220px } */
[b-mufrzq1k1a] .scqv-notes-list {
    flex: 1;
    min-height: 0;
    max-height: none;
}

/* Loading/empty placeholders fill the notes zone so the layout doesn't collapse */
.scqv-notes-state[b-mufrzq1k1a] {
    flex: 1;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scqv-footer-note[b-mufrzq1k1a] {
    margin: 1rem 0 0 0;
    font-style: italic;
    flex-shrink: 0;
}
/* /Components/Shared/SignupGuardFields.razor.rz.scp.css */
/* Honeypot. Has to be a real, fillable input that merely looks ordinary in the markup — bots
   deliberately skip type="hidden", and some also skip anything computing to display:none, so it
   is moved offscreen instead. Paired with aria-hidden/tabindex/autocomplete on the markup side
   to keep screen readers, keyboard users and password managers from ever reaching it. */
.signup-guard-hp[b-sdrn5iqzf3] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Matches the gap the submit button carries below itself, so the widget sits in the form rhythm. */
.signup-guard-captcha[b-sdrn5iqzf3] {
    margin-bottom: 1.25rem;
}
/* /Components/Shared/SortDropdown.razor.rz.scp.css */
/* Custom icon sort dropdown — replaces a native <select> when each option
   needs its own icon. Trigger reads like a form-select; menu paints an icon +
   label per row. Outside-click backdrop matches the global .dropdown-overlay
   z-index convention (overlay 499, menu 500). */

.sort-dd[b-shv074fe5m] {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.sort-dd-trigger[b-shv074fe5m] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--input-border);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1rem;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}

    .sort-dd-trigger:hover[b-shv074fe5m] {
        border-color: var(--accent);
    }

    .sort-dd-trigger:focus-visible[b-shv074fe5m],
    .sort-dd-open .sort-dd-trigger[b-shv074fe5m] {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(0, 119, 197, 0.2);
    }

.sort-dd-trigger-label[b-shv074fe5m] {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sort-dd-placeholder[b-shv074fe5m] {
    color: var(--text-faint);
    font-weight: 400;
}

.sort-dd-icon[b-shv074fe5m] {
    flex-shrink: 0;
    color: var(--text-muted);
}

/* Outside-click backdrop — sits just below the menu's z-index so clicks anywhere
   else close the dropdown. High enough to win against sticky table headers (700)
   and other in-page chrome. */
.sort-dd-overlay[b-shv074fe5m] {
    position: fixed;
    inset: 0;
    z-index: 1099;
}

/* Menu uses position:fixed + JS placement (acdwPositionPopup) so it escapes any
   ancestor overflow (dialog body, table-scroll) and can be clamped to the
   viewport when the trigger sits near the right edge. Hidden until JS positions
   it so we don't flash at (0,0). */
.sort-dd-menu[b-shv074fe5m] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    visibility: hidden;
    width: max-content;
    min-width: 12rem;
    max-width: min(320px, 92vw);
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 0.25rem 0;
}

.sort-dd-item[b-shv074fe5m] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background-color 0.1s ease;
}

    .sort-dd-item:hover[b-shv074fe5m] {
        background: var(--bg-hover);
    }

    .sort-dd-item:focus-visible[b-shv074fe5m] {
        outline: 2px solid var(--accent);
        outline-offset: -2px;
    }

.sort-dd-item-selected[b-shv074fe5m],
.sort-dd-item-selected:hover[b-shv074fe5m] {
    background: var(--accent-bg);
    color: var(--accent-strong);
    font-weight: 600;
}

    .sort-dd-item-selected .sort-dd-icon[b-shv074fe5m] {
        color: var(--accent-strong);
    }

.sort-dd-item-label[b-shv074fe5m] {
    flex: 1;
}

/* Mobile: drop the trigger's vertical padding — min-height keeps it a 40px touch target. */
@media (max-width: 649.98px) {
    .sort-dd-trigger[b-shv074fe5m] {
        padding-top: 0;
        padding-bottom: 0;
        min-height: 40px;
    }
}
/* /Components/Shared/TransferOwnershipDialog.razor.rz.scp.css */
/* Icon + title share one row (rocket / door beside the heading) instead of the
   icon stacking above it. */
.to-header[b-hkcv4jtvjy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.to-icon[b-hkcv4jtvjy] {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Title sits inline beside the icon; drop the base .dialog-title bottom margin. */
.to-title[b-hkcv4jtvjy] {
    margin: 0;
    color: var(--text-error);
}

.to-text[b-hkcv4jtvjy] {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    margin-bottom: var(--space-5);
}

.to-hint[b-hkcv4jtvjy] {
    color: var(--text-secondary);
    font-size: var(--fs-body);
}

.to-field[b-hkcv4jtvjy] {
    margin-bottom: var(--space-5);
}

.to-confirm-field[b-hkcv4jtvjy] {
    max-width: 240px;
    margin-bottom: var(--space-4);
}

.to-error[b-hkcv4jtvjy] {
    margin-bottom: var(--space-3);
}
/* /Components/Shared/WhatsNewButton.razor.rz.scp.css */
.whats-new-icon[b-ssj4t0u9mi] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z'/%3E%3C/svg%3E");
}