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

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

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

/* 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] {
    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;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
    }

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

    .sensor-alert-icon[b-04izq9imi9]::before {
        display: block;
        transform: scale(1.5);
        transform-origin: center;
    }

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

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

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

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

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

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

/* Mobile: email and phone each get their own row; drop the dot separator. */
@media (max-width: 649.98px) {
    .ac-contact-part[b-bx31mu57aj] {
        display: block;
    }

    .ac-contact-sep[b-bx31mu57aj] {
        display: none;
    }
}
/* /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-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;
}

/* Mobile/tablet (<900px): stay a centered modal box (matching the Dialog
   component) rather than a full-screen sheet. The centered geometry comes from
   the base .fixed-dialog-box rule above (width: min(92vw, 990px); max-height:
   90dvh). Phones just get trimmed side padding so content keeps usable width. */
@media (max-width: 649.98px) {
    .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-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;
}

.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/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;
    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/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");
}