/* /Components/Layout/AdminLayout.razor.rz.scp.css */
#blazor-error-ui[b-s01cu3zmo4] {
    background: var(--pnt-danger, #ef4444);
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.5rem 1.5rem;
    display: none;
}
#blazor-error-ui .dismiss[b-s01cu3zmo4] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.3rem;
}
/* /Components/Layout/AdminNavMenu.razor.rz.scp.css */
.sidebar-nav-scrollable[b-70ul24f5ak] {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem 0;
}
/* /Components/Layout/CustomerLayout.razor.rz.scp.css */
#blazor-error-ui[b-12d4eacfx3] {
    background: var(--pnt-danger, #ef4444);
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.5rem 1.5rem;
    display: none;
}
#blazor-error-ui .dismiss[b-12d4eacfx3] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.3rem;
}
/* /Components/Layout/CustomerNavMenu.razor.rz.scp.css */
.sidebar-nav-scrollable[b-7zqqw432qk] {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem 0;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
main[b-h43ycwvvu4] {
    min-height: calc(100vh - 250px);
    padding-top: 70px; /* space for fixed navbar */
}

#blazor-error-ui[b-h43ycwvvu4] {
    background: var(--pnt-danger);
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.5rem 1.5rem;
    display: none;
}
#blazor-error-ui .dismiss[b-h43ycwvvu4] {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.3rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.pnt-navbar[b-bd5g9w8yhi] {
    background-color: var(--pnt-dark, #0f172a);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    padding: 0.5rem 0;
}

.brand-icon[b-bd5g9w8yhi] {
    width: 36px;
    height: 36px;
    background: var(--pnt-gradient-primary, linear-gradient(135deg, #6366f1, #8b5cf6));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
}

.brand-text[b-bd5g9w8yhi] {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.brand-sub[b-bd5g9w8yhi] {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--pnt-gray-light, #94a3b8);
    margin-left: 0.25rem;
}

[b-bd5g9w8yhi] .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

[b-bd5g9w8yhi] .nav-link:hover,
[b-bd5g9w8yhi] .nav-link.active {
    color: white !important;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-emsobo4nbt],
.components-reconnect-repeated-attempt-visible[b-emsobo4nbt],
.components-reconnect-failed-visible[b-emsobo4nbt],
.components-pause-visible[b-emsobo4nbt],
.components-resume-failed-visible[b-emsobo4nbt],
.components-rejoining-animation[b-emsobo4nbt] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-retrying[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-failed[b-emsobo4nbt],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-emsobo4nbt] {
    display: block;
}


#components-reconnect-modal[b-emsobo4nbt] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-emsobo4nbt 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-emsobo4nbt 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-emsobo4nbt 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-emsobo4nbt]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-emsobo4nbt 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-emsobo4nbt {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-emsobo4nbt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-emsobo4nbt {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-emsobo4nbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-emsobo4nbt] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-emsobo4nbt] {
    border: 0;
    background-color: var(--pnt-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-emsobo4nbt] {
        background-color: var(--pnt-primary-dark);
    }

    #components-reconnect-modal button:active[b-emsobo4nbt] {
        background-color: var(--pnt-primary);
    }

.components-rejoining-animation[b-emsobo4nbt] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-emsobo4nbt] {
        position: absolute;
        border: 3px solid var(--pnt-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-emsobo4nbt 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-emsobo4nbt] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-emsobo4nbt {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Customer/CustomerDevices.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   2026-09-28 (devices redesign, owner decision 4) — /customer/devices.

   ONE MARKUP, TWO LAYOUTS. At 768px and up the list is a table; below that the SAME rows are
   restyled as stacked cards by the media block at the end of this file. Nothing is rendered
   twice, which is what keeps the page's marked seat-wait badges, its Connect link and its
   per-row accessible names each in one place (w129SeatReductionLifoV3Tests, ViewerAccessWave9Tests).
   The table keeps explicit ARIA roles (role="table" / "row" / "cell" in the markup) because
   changing a table's display value drops its implicit semantics in some browsers; the column
   headers stay in the accessibility tree, visually hidden, rather than display:none. Column
   priority on the table layout is the page's own d-none / d-*-table-cell classes, and nothing
   here selects a column by position (no nth-child — GL-61).

   THEME. Dark theme tokens from wwwroot/app.css :root only. Nothing here reads --pnt-primary, the
   one token a tenant's branding overrides (CustomerLayout.razor), so every surface reads the same
   under any brand colour; the Connect button keeps the global .btn-primary / .btn-outline-primary,
   whose label colours are fixed (app.css PC-A11Y-06). Contrast is computed from the sRGB values
   with the WCAG formula, not measured in a browser — re-measure before sign-off, as app.css says
   of its own tokens:
     text   --pnt-light #f1f5f9 on --pnt-dark-light #1e293b ~13:1; --pnt-gray-light #94a3b8 on
            the page #0f172a ~7.0:1 and on #1e293b ~5.7:1; --pnt-gray #8b98ad on #1e293b ~5.0:1;
            --pnt-success #10b981 on #0f172a ~7.0:1; --pnt-warning #f59e0b on #0f172a ~8.3:1.
     edges  --pnt-border-input #75859c on the page ~5.0:1 (WCAG 1.4.11 wants 3:1).
   Hover is a background tint only — no transform — and the one animation (the progress bar)
   stops under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Summary strip ─────────────────────────────────────────────────────────────────────── */

.devices-status-strip[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.devices-pill[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--pnt-border-input);
    border-radius: 999px;
    background: var(--pnt-dark-light);
    color: var(--pnt-light);
    font-size: 0.875rem;
}

.devices-pill:hover[b-c6j33z5ui4] {
    background: var(--pnt-dark-lighter);
}

/* The pressed pill is marked by shape as well as colour: a heavier light border. */
.devices-pill.is-active[b-c6j33z5ui4] {
    border-color: var(--pnt-light);
    box-shadow: inset 0 0 0 1px var(--pnt-light);
    background: var(--pnt-dark-lighter);
}

.devices-pill-count[b-c6j33z5ui4] {
    font-weight: 700;
}

.devices-pill-online[b-c6j33z5ui4] {
    color: var(--pnt-success);
}

.devices-pill-attention[b-c6j33z5ui4] {
    color: var(--pnt-warning);
}

/* ─── Toolbar, filter chips, result line ────────────────────────────────────────────────── */

.devices-toolbar[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.devices-field[b-c6j33z5ui4] {
    display: flex;
    flex-direction: column;
    flex: 1 1 9rem;
    min-width: 0;
    max-width: 16rem;
}

.devices-field-search[b-c6j33z5ui4] {
    flex: 2 1 16rem;
    max-width: 28rem;
}

.devices-field .form-label[b-c6j33z5ui4] {
    margin-bottom: 0.25rem;
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
}

.devices-filter-chips[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.devices-filter-chip[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--pnt-border-input);
    border-radius: 999px;
    background: var(--pnt-dark-lighter);
    color: var(--pnt-light);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    text-align: left;
}

.devices-filter-chip:hover[b-c6j33z5ui4] {
    border-color: var(--pnt-light);
}

.devices-result-bar[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--pnt-gray-light);
    font-size: 0.875rem;
}

.devices-page-size[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.devices-page-size .form-label[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
}

.devices-page-size .form-select[b-c6j33z5ui4] {
    width: auto;
}

/* ─── Busy indicator ────────────────────────────────────────────────────────────────────── */

.devices-progress[b-c6j33z5ui4] {
    position: relative;
    height: 3px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    border-radius: 2px;
    background: var(--pnt-dark-lighter);
}

.devices-progress[b-c6j33z5ui4]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--pnt-accent);
    animation: devices-progress-slide-b-c6j33z5ui4 1.2s ease-in-out infinite;
}

@keyframes devices-progress-slide-b-c6j33z5ui4 {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* ─── The table ─────────────────────────────────────────────────────────────────────────── */

.devices-table[b-c6j33z5ui4] {
    margin-bottom: 0.5rem;
}

.devices-table > tbody > tr.device-row > td[b-c6j33z5ui4] {
    vertical-align: middle;
    border-bottom: 1px solid var(--pnt-dark-lighter);
}

.device-row:hover > td[b-c6j33z5ui4] {
    background-color: var(--pnt-dark-light);
}

.device-select-cell[b-c6j33z5ui4] {
    width: 2.5rem;
}

.device-name-line[b-c6j33z5ui4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.device-dot[b-c6j33z5ui4] {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.device-dot.is-online[b-c6j33z5ui4] {
    background: var(--pnt-success);
}

.device-dot.is-offline[b-c6j33z5ui4] {
    box-shadow: inset 0 0 0 2px var(--pnt-gray-light);
}

.device-name[b-c6j33z5ui4] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.device-hostname code[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

/* The company, under the name, on widths where the Company column is not shown. */
.device-meta-compact[b-c6j33z5ui4] {
    display: none;
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
}

/* Fix round 1 (decision 3): a shared row in a view with no Company column at all (grouped by
   company) — the only place its company is named, so it is shown at every width. */
.device-meta-compact.is-always-shown[b-c6j33z5ui4] {
    display: block;
}

.device-chips[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.device-status[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
}

.device-status.is-online[b-c6j33z5ui4] {
    color: var(--pnt-success);
}

.device-status.is-offline[b-c6j33z5ui4],
.device-status-age[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
}

.device-mode[b-c6j33z5ui4],
.device-uninstall-badge[b-c6j33z5ui4] {
    margin-left: 0.35rem;
}

.device-mode[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--pnt-border-input);
    border-radius: 999px;
    color: var(--pnt-gray-light);
    font-size: 0.75rem;
    white-space: nowrap;
}

.device-mode.is-auto[b-c6j33z5ui4] {
    border-color: var(--pnt-warning);
    color: var(--pnt-warning);
}

.device-system[b-c6j33z5ui4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.device-agent[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
}

.device-actions-cell[b-c6j33z5ui4] {
    text-align: right;
    white-space: nowrap;
}

.device-actions[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
}

.device-viewonly[b-c6j33z5ui4] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--pnt-border-input);
    border-radius: 0.375rem;
    color: var(--pnt-gray-light);
    font-size: 0.8rem;
}

/* ─── Details panel ─────────────────────────────────────────────────────────────────────── */

.device-details-row > td[b-c6j33z5ui4] {
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid var(--pnt-dark-lighter);
}

/* Its own class, NOT the global .card, whose hover lift (app.css .card:hover) would make the
   panel jump under the pointer. */
.device-details[b-c6j33z5ui4] {
    padding: 1rem;
    border: 1px solid var(--pnt-dark-lighter);
    border-radius: 0.75rem;
    background: var(--pnt-dark-light);
    color: var(--pnt-light);
}

.device-details-grid[b-c6j33z5ui4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem 1.5rem;
}

.device-details-wide[b-c6j33z5ui4] {
    grid-column: 1 / -1;
}

.device-details-heading[b-c6j33z5ui4] {
    margin-bottom: 0.5rem;
    color: var(--pnt-gray);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.device-facts[b-c6j33z5ui4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.875rem;
}

.device-facts dt[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
    font-weight: 500;
}

.device-facts dd[b-c6j33z5ui4] {
    margin: 0;
    overflow-wrap: anywhere;
}

.device-details-muted[b-c6j33z5ui4] {
    color: var(--pnt-gray-light);
    font-size: 0.85rem;
}

.device-action-bar[b-c6j33z5ui4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--pnt-dark-lighter);
}

.devices-empty-row > td[b-c6j33z5ui4],
.devices-more-row > td[b-c6j33z5ui4] {
    padding: 0.75rem;
    color: var(--pnt-gray-light);
}

.devices-more-count[b-c6j33z5ui4] {
    margin-left: 0.75rem;
    font-size: 0.85rem;
}

/* ─── Narrower than the Company column (below lg): the company moves under the name ─────── */

@media (max-width: 991.98px) {
    .device-meta-compact[b-c6j33z5ui4] {
        display: block;
    }
}

/* ─── Phones: the same rows as stacked cards ────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .devices-field[b-c6j33z5ui4],
    .devices-field-search[b-c6j33z5ui4] {
        flex-basis: 100%;
        max-width: none;
    }

    .devices-table[b-c6j33z5ui4],
    .devices-table > tbody[b-c6j33z5ui4] {
        display: block;
        width: 100%;
    }

    /* Visually hidden, still announced: the column headers name each cell for a screen reader. */
    .devices-table > thead[b-c6j33z5ui4] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Fix round 1 (WCAG 2.1 AA — 2.4.7 Focus Visible, 2.4.3 Focus Order): …but never an invisible
       tab stop. The headers hold the Device and Status sort buttons and, where a row can be
       selected, "Select all devices shown"; they stay in the tab order, so while focus is inside
       them the header row is shown, above the cards, where its place in the tab order is. This is
       Bootstrap's visually-hidden-focusable pattern applied to the row group. 320px is also a
       1280px screen at 400% zoom, so this is the reflow case as well as the phone. */
    .devices-table > thead:focus-within[b-c6j33z5ui4] {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    .devices-table > tbody > tr.device-row[b-c6j33z5ui4] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.5rem 0.75rem;
        align-items: start;
        margin-bottom: 0.5rem;
        padding: 0.75rem;
        border: 1px solid var(--pnt-dark-lighter);
        border-radius: 0.75rem;
        background: var(--pnt-dark-light);
    }

    .devices-table > tbody > tr.device-row > td[b-c6j33z5ui4] {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: left;
        white-space: normal;
    }

    .devices-table > tbody > tr.device-row > .device-select-cell[b-c6j33z5ui4] {
        grid-row: 1 / span 3;
        width: auto;
    }

    .devices-table > tbody > tr.device-row > .device-main-cell[b-c6j33z5ui4],
    .devices-table > tbody > tr.device-row > .device-status-cell[b-c6j33z5ui4],
    .devices-table > tbody > tr.device-row > .device-actions-cell[b-c6j33z5ui4] {
        grid-column: 2;
    }

    .device-actions[b-c6j33z5ui4] {
        display: flex;
        width: 100%;
    }

    .device-connect[b-c6j33z5ui4] {
        flex: 1 1 auto;
    }

    .devices-table > tbody > tr.device-details-row[b-c6j33z5ui4],
    .devices-table > tbody > tr.devices-empty-row[b-c6j33z5ui4],
    .devices-table > tbody > tr.devices-more-row[b-c6j33z5ui4] {
        display: block;
    }

    .devices-table > tbody > tr.device-details-row > td[b-c6j33z5ui4],
    .devices-table > tbody > tr.devices-empty-row > td[b-c6j33z5ui4],
    .devices-table > tbody > tr.devices-more-row > td[b-c6j33z5ui4] {
        display: block;
        min-width: 0;
        border: 0;
    }

    .devices-table > tbody > tr.device-details-row > td[b-c6j33z5ui4] {
        padding: 0 0 0.75rem;
    }

    .device-facts[b-c6j33z5ui4] {
        grid-template-columns: minmax(0, 1fr);
    }

    .device-facts dd[b-c6j33z5ui4] {
        margin-bottom: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .devices-progress[b-c6j33z5ui4]::after {
        width: 100%;
        animation: none;
        opacity: 0.6;
    }
}
/* /Components/Pages/Customer/Devices/DeviceBulkBar.razor.rz.scp.css */
/* 2026-09-28 (devices redesign, owner decisions 2 and 4) — the bulk bar. Sticky at the bottom of
   the page's scroll area while a selection exists, so the actions stay in reach while more rows
   are ticked. It wraps onto several lines on a narrow screen instead of scrolling sideways
   (WCAG 1.4.10 reflow at 320px). Tokens only; nothing here reads the tenant's --pnt-primary. */

.devices-bulk-bar[b-uazim4jo7w] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pnt-border-input);
    border-radius: 0.75rem;
    background: var(--pnt-dark-light);
    color: var(--pnt-light);
}

.devices-bulk-count[b-uazim4jo7w] {
    white-space: nowrap;
}

.devices-bulk-group[b-uazim4jo7w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.devices-bulk-group .form-select[b-uazim4jo7w] {
    width: auto;
    min-width: 8rem;
    max-width: 16rem;
}

.devices-bulk-note[b-uazim4jo7w] {
    color: var(--pnt-gray-light);
    font-size: 0.85rem;
}

.devices-bulk-clear[b-uazim4jo7w] {
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .devices-bulk-group[b-uazim4jo7w],
    .devices-bulk-group .form-select[b-uazim4jo7w] {
        width: 100%;
        max-width: none;
    }

    .devices-bulk-clear[b-uazim4jo7w] {
        margin-left: 0;
    }
}
/* /Components/Pages/Customer/Devices/DeviceSectionHeader.razor.rz.scp.css */
/* 2026-09-28 (devices redesign, owner decision 4) — a section header of the grouped device list.
   Dark theme tokens only (wwwroot/app.css :root); nothing here reads --pnt-primary, so the header
   looks the same under any tenant brand colour. Contrast is computed from the sRGB values, not
   measured in a browser: --pnt-light on --pnt-dark-light is ~13:1, --pnt-gray on it ~5.0:1. */

.devices-section-header > th[b-ri8n081eo7] {
    background: var(--pnt-dark-light);
    color: var(--pnt-light);
    border-top: 1px solid var(--pnt-dark-lighter);
    border-bottom: 1px solid var(--pnt-dark-lighter);
    padding: 0.5rem 0.75rem;
    font-weight: 400;
}

.devices-section-bar[b-ri8n081eo7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
}

.devices-section-toggle[b-ri8n081eo7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--pnt-light);
    font-weight: 600;
    text-align: left;
}

.devices-section-toggle:hover[b-ri8n081eo7] {
    background: var(--pnt-dark-lighter);
}

.devices-section-toggle:focus-visible[b-ri8n081eo7] {
    outline: 2px solid var(--pnt-primary-light);
    outline-offset: 2px;
}

.devices-section-chevron[b-ri8n081eo7] {
    font-size: 0.8rem;
    color: var(--pnt-gray-light);
}

.devices-section-icon[b-ri8n081eo7] {
    color: var(--pnt-gray-light);
}

.devices-section-label[b-ri8n081eo7] {
    overflow-wrap: anywhere;
}

.devices-section-qualifier[b-ri8n081eo7],
.devices-section-counts[b-ri8n081eo7],
.devices-section-busy[b-ri8n081eo7] {
    color: var(--pnt-gray);
    font-size: 0.85rem;
    font-weight: 400;
}

.devices-section-select[b-ri8n081eo7] {
    margin-left: auto;
    padding: 0;
}

.devices-section-note[b-ri8n081eo7] {
    margin: 0.25rem 0 0 1.75rem;
    color: var(--pnt-gray);
    font-size: 0.8rem;
    font-weight: 400;
}

/* Phones: the list becomes stacked cards (CustomerDevices.razor.css), and the header row
   becomes a plain block above its cards. Same markup, restyled — nothing is duplicated. */
@media (max-width: 767.98px) {
    .devices-section-header[b-ri8n081eo7],
    .devices-section-header > th[b-ri8n081eo7] {
        display: block;
        width: 100%;
    }

    .devices-section-header > th[b-ri8n081eo7] {
        border-radius: 0.5rem;
        margin: 0.75rem 0 0.5rem;
    }
}
/* /Components/Pages/Customer/Devices/ManageTaxonomyModal.razor.rz.scp.css */
/* 2026-09-28 (devices redesign) — "Manage groups and locations". Tokens only; nothing reads the
   tenant's --pnt-primary. Every row wraps rather than scrolling sideways on a narrow screen. */

.taxonomy-intro[b-2807lp07mz],
.taxonomy-muted[b-2807lp07mz] {
    color: var(--pnt-gray-light);
    font-size: 0.875rem;
}

.taxonomy-section[b-2807lp07mz] {
    margin-top: 1.25rem;
}

.taxonomy-heading[b-2807lp07mz] {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.taxonomy-list[b-2807lp07mz] {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.taxonomy-item[b-2807lp07mz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pnt-dark-lighter);
}

.taxonomy-address[b-2807lp07mz] {
    overflow-wrap: anywhere;
}

.taxonomy-actions[b-2807lp07mz] {
    display: inline-flex;
    gap: 0.375rem;
    margin-left: auto;
}

.taxonomy-edit[b-2807lp07mz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.taxonomy-edit .form-control[b-2807lp07mz] {
    flex: 1 1 12rem;
    min-width: 0;
}

.taxonomy-confirm[b-2807lp07mz] {
    width: 100%;
}

.taxonomy-color[b-2807lp07mz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.taxonomy-color .form-select[b-2807lp07mz] {
    width: auto;
}

.taxonomy-add[b-2807lp07mz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
}

.taxonomy-add-field[b-2807lp07mz] {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}

.taxonomy-add-field .form-label[b-2807lp07mz] {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
}
/* /Components/Pages/Customer/Devices/OrganizeDeviceModal.razor.rz.scp.css */
/* 2026-09-28 (devices redesign) — the Organize dialog's own text. Tokens only; --pnt-gray-light
   on the modal surface clears 4.5:1 (see CustomerDevices.razor.css for the computed ratios). */

.organize-intro[b-5lvc71mjyh],
.organize-muted[b-5lvc71mjyh] {
    color: var(--pnt-gray-light);
    font-size: 0.875rem;
}

.form-check-label[b-5lvc71mjyh] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}