@import '_content/Exovo.Ui/Exovo.Ui.9vtec2q1u4.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Pages/Apps.razor.rz.scp.css */
/* Apps — mobile-apps "coming soon" empty state (mirrors the fax-empty / vm-empty pattern). */

.apps-empty[b-44bjvjuogw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
    text-align: center;
}

.apps-empty-icon[b-44bjvjuogw] {
    color: var(--op-muted);
    opacity: 0.55;
    margin-bottom: 18px;
}

.apps-empty-title[b-44bjvjuogw] {
    font-family: var(--op-sans);
    font-size: 19px;
    font-weight: 600;
    color: var(--op-ink);
    margin: 0 0 8px;
}

.apps-empty-text[b-44bjvjuogw] {
    font-family: var(--op-sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--op-muted);
    max-width: 460px;
    margin: 0 0 28px;
}

/* Store badges — deliberately non-interactive until the apps ship. */
.apps-badges[b-44bjvjuogw] {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.apps-badge[b-44bjvjuogw] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    min-width: 220px;
    text-align: left;
}

.apps-badge-logo[b-44bjvjuogw] {
    color: var(--op-ink2);
    flex-shrink: 0;
    opacity: 0.85;
}

.apps-badge-text[b-44bjvjuogw] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.apps-badge-kicker[b-44bjvjuogw] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.apps-badge-name[b-44bjvjuogw] {
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--op-ink);
    white-space: nowrap;
}

.apps-badge-soon[b-44bjvjuogw] {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 6px;
}

.apps-empty-note[b-44bjvjuogw] {
    margin: 26px 0 0;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-muted);
    max-width: 420px;
}

@media (max-width: 640px) {
    .apps-empty[b-44bjvjuogw] {
        padding: 44px 18px;
    }

    .apps-badges[b-44bjvjuogw] {
        flex-direction: column;
        width: 100%;
        max-width: 340px;
    }

    .apps-badge[b-44bjvjuogw] {
        min-width: 0;
    }
}
/* /Pages/CallHistory.razor.rz.scp.css */
/* Call History — mobile filters disclosure (the sidebar is hidden by app.css at <=900px).
   Desktop is untouched: the toggle is display:none above the breakpoint. */

.pane-nav-toggle[b-y17djqb8rh] {
    display: none;
}

@media (max-width: 900px) {
    .pane-nav-toggle[b-y17djqb8rh] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .ch-layout.pane-nav[b-y17djqb8rh] {
        grid-template-rows: auto 1fr;
    }

    .ch-layout.pane-nav .ch-sidebar[b-y17djqb8rh] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }
}
/* /Pages/Chat.razor.rz.scp.css */
/* Chat — contrast fixes + mobile pane switching (list ↔ thread) and a context-panel
   slide-over. Desktop (>1024px) keeps the app.css three-column layout untouched;
   the mobile helpers are display:none above the breakpoints. */

/* ── Contrast: sent-bubble timestamps were rgba(255,255,255,.75) (<4.5:1 at 10px on
      the accentDk bubble). White passes on both accentDk (5.5:1) and success. ── */
.chat-bubble-sent .chat-bubble-meta[b-5j1tsqtnwo] {
    color: #fff;
}

/* Mobile helpers hidden on desktop. */
.pane-back[b-5j1tsqtnwo],
.chat-ctx-toggle[b-5j1tsqtnwo],
.chat-ctx-backdrop[b-5j1tsqtnwo] {
    display: none;
}

/* ── <=1024px: app.css drops the context panel; the info button opens it as a
      right-side slide-over with a full-screen backdrop. ── */
@media (max-width: 1024px) {
    .chat-ctx-toggle[b-5j1tsqtnwo] {
        display: inline-flex;
    }

    .chat-layout.ctx-open .chat-ctx-backdrop[b-5j1tsqtnwo] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 900;
        background: rgba(10, 12, 16, 0.35);
        border: none;
        padding: 0;
        cursor: pointer;
    }

    .chat-layout.ctx-open .chat-context-panel[b-5j1tsqtnwo] {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 901;
        box-shadow: -12px 0 32px -12px rgba(10, 12, 16, 0.25);
    }
}

/* ── <=768px: ONE pane at a time — list by default, thread after selection. ── */
@media (max-width: 768px) {
    /* app.css stacks list (40vh) above thread; instead show a single pane. */
    .chat-sidebar[b-5j1tsqtnwo] {
        max-height: none;
    }

    .chat-layout.pane-thread .chat-sidebar[b-5j1tsqtnwo] {
        display: none;
    }

    .chat-layout:not(.pane-thread) .chat-thread[b-5j1tsqtnwo] {
        display: none;
    }

    .pane-back[b-5j1tsqtnwo] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
        padding: 6px;
        background: none;
        border: none;
        border-radius: 6px;
        color: var(--op-ink2);
        cursor: pointer;
        flex-shrink: 0;
    }

    .pane-back:hover[b-5j1tsqtnwo] {
        background: var(--op-surfaceAlt);
    }
}
/* /Pages/Contacts.razor.rz.scp.css */
/* Contacts — mobile directories disclosure (the sidebar is hidden by app.css at <=900px).
   Desktop is untouched: the toggle is display:none above the breakpoint. */

.pane-nav-toggle[b-woufgm1lt9] {
    display: none;
}

/* "+N" chip after the primary phone number — the contact has more numbers
   (hover title lists them; the Call/Text menus offer each one). */
.ct-num-chip[b-woufgm1lt9] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 15px;
    border: 1px solid var(--op-hairline);
    border-radius: 999px;
    background: var(--op-surfaceAlt);
    color: var(--op-muted);
    cursor: default;
}

/* Number picker dialog — a contact with several numbers opens this on Call/Text. */
.ct-picker-overlay[b-woufgm1lt9] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.28);
}

.ct-picker[b-woufgm1lt9] {
    min-width: 260px;
    max-width: 340px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.ct-picker-head[b-woufgm1lt9] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
}

.ct-picker-verb[b-woufgm1lt9] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--op-accentDk);
}

.ct-picker-name[b-woufgm1lt9] {
    font-size: 13px;
    font-weight: 600;
    color: var(--op-ink);
}

.ct-picker-row[b-woufgm1lt9] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--op-hairlineSoft);
}

.ct-picker-row:last-child[b-woufgm1lt9] {
    border-bottom: none;
}

.ct-picker-row:hover[b-woufgm1lt9],
.ct-picker-row:focus-visible[b-woufgm1lt9] {
    background: var(--op-accentSoft);
}

.ct-picker-label[b-woufgm1lt9] {
    min-width: 76px;
    font-size: 11px;
    color: var(--op-muted);
}

.ct-picker-num[b-woufgm1lt9] {
    font-size: 13px;
    color: var(--op-ink);
}

/* Source filter checkboxes (the base .ct-sidebar-source row layout lives in app.css). */
.ct-source-toggle[b-woufgm1lt9] {
    cursor: pointer;
    user-select: none;
}

.ct-source-toggle:hover[b-woufgm1lt9] {
    background: var(--op-surfaceAlt);
}

.ct-source-toggle input[type="checkbox"][b-woufgm1lt9] {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--op-accent);
    cursor: pointer;
}

.ct-source-toggle input[type="checkbox"]:focus-visible[b-woufgm1lt9] {
    outline: 2px solid var(--op-accent);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .pane-nav-toggle[b-woufgm1lt9] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .ct-layout.pane-nav[b-woufgm1lt9] {
        grid-template-rows: auto 1fr;
    }

    .ct-layout.pane-nav .ct-sidebar[b-woufgm1lt9] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }
}
/* /Pages/Fax.razor.rz.scp.css */
/* Fax — mobile pane switching (list ↔ detail) + folders/filters disclosure.
   Desktop (>1100px) is untouched: the helpers are display:none and the app.css
   layout applies unchanged. */

.pane-back[b-jy7f4fn9ep],
.pane-nav-toggle[b-jy7f4fn9ep] {
    display: none;
}

/* ── <=1100px: app.css hides .fax-detail; show ONE pane at a time. ── */
@media (max-width: 1100px) {

    .fax-layout.pane-detail .fax-detail[b-jy7f4fn9ep] {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-left: none;
    }

    .fax-layout.pane-detail .fax-list-panel[b-jy7f4fn9ep] {
        display: none;
    }

    .pane-back[b-jy7f4fn9ep] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 10px;
        padding: 5px 10px;
        background: var(--op-surfaceAlt);
        border: 1px solid var(--op-hairline);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--op-ink2);
        cursor: pointer;
    }
}

/* ── <=900px: app.css hides .fax-sidebar; a toggle discloses it stacked above. ── */
@media (max-width: 900px) {
    .pane-nav-toggle[b-jy7f4fn9ep] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .fax-layout.pane-nav[b-jy7f4fn9ep] {
        grid-template-rows: auto 1fr;
    }

    .fax-layout.pane-nav .fax-sidebar[b-jy7f4fn9ep] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }

    .fax-layout.pane-detail .pane-nav-toggle[b-jy7f4fn9ep] {
        display: none;
    }
}
/* /Pages/OfficeAdvancedBlf.razor.rz.scp.css */
/* Column-priority reflow for the BLF template list
   (see the op-grid-table convention in wwwroot/css/app.css).
   Desktop is untouched; !important beats the inline --table-cols. */
@media (max-width: 1024px) {
    .blf-table[b-der0p5m1un] {
        --table-cols: 1.3fr 70px 110px 230px !important;
    }

    /* Editor name/description grid stacks. */
    .blf-edit-grid[b-der0p5m1un] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    .blf-table[b-der0p5m1un] {
        --table-cols: 1fr auto !important;
    }
}
/* /Pages/OfficeDashboard.razor.rz.scp.css */
/* Scoped styles for /office/dashboard. Tile/grid wrapping already lives in
   app.css (op-dash-tiles / op-dash-grid); this page overrides the grid to a
   row-flow layout so System Information | License Information sit side by
   side with Storage & Maintenance spanning full width beneath them, followed
   by Services | Quick Links. Also: the recent-events mini table column
   priority (≤640px drops Category). */

.dash-grid[b-xxxbhfps75] {
    grid-auto-flow: row;
    grid-template-rows: none;
}

.dash-span-full[b-xxxbhfps75] {
    grid-column: 1 / -1;
}

/* Full-width Storage & Maintenance: toggles (Auto Backup / Remote Storage /
   Audit Log) on the left, usage bars (Disk / Recordings / Voicemail) on the
   right. */
.dash-storage[b-xxxbhfps75] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px 40px;
    align-items: start;
}

@media (max-width: 768px) {
    .dash-storage[b-xxxbhfps75] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .op-table-header[b-xxxbhfps75],
    .op-table-row[b-xxxbhfps75] {
        grid-template-columns: 130px 80px 1fr;
    }
}
/* /Pages/OfficeGroups.razor.rz.scp.css */
/* Scoped styles for /office/groups — responsive column priority.
   All three columns (Name · Users · Actions) survive on phones; the grid
   just re-weights so the Edit/Delete buttons keep room. */

@media (max-width: 640px) {
    .gr-table-head[b-42ha4u1x2h],
    .gr-table-row[b-42ha4u1x2h] {
        grid-template-columns: 1.4fr 0.5fr auto;
    }
}
/* /Pages/OfficeHours.razor.rz.scp.css */
/* Scoped styles for /office/office-hours. */

/* Card titles were spans; keep the h2 rendering identical. */
h2.oh-card-title[b-pzf219zw13] {
    margin: 0;
    font-family: inherit;
}

/* Week grid — was an inline style; moved to a class so the layout can respond.
   Desktop rendering is identical to the old inline declaration. */
.oh-week-grid[b-pzf219zw13] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 8px;
}

/* ≤640px: the seven day columns stack into full-width day cards. */
@media (max-width: 640px) {
    .oh-week-grid[b-pzf219zw13] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/OfficeInboundRules.razor.rz.scp.css */
/* Scoped styles for /office/inbound-rules — responsive column priority +
   heading restyle. Desktop rendering is pixel-identical (all rules live
   behind max-width queries except the h2 reset below, which restores the
   former div's box metrics). */

/* ir-section-title was a div; keep the h2 rendering identical. */
h2.ir-section-title[b-27k161kif2] {
    margin-top: 0;
}

/* Column priority (see the op-grid-table convention in app.css):
   base: 40px 60px 1.5fr 1fr 1.2fr 1.4fr 1.4fr
         select · type · name · trunk · did · in-office · out-of-office
   ≤1024px hides TRUNK (op-col-hide-md); ≤640px also hides DID + OUT OF OFFICE
   (op-col-hide-sm), leaving select · type · name · in-office. */
@media (max-width: 1024px) {
    .ir-table-head[b-27k161kif2],
    .ir-table-row[b-27k161kif2] {
        grid-template-columns: 40px 60px 1.5fr 1.2fr 1.4fr 1.4fr;
    }
}

@media (max-width: 640px) {
    .ir-table-head[b-27k161kif2],
    .ir-table-row[b-27k161kif2] {
        grid-template-columns: 40px 52px 1.4fr 1.6fr;
    }
}
/* /Pages/OfficeOutboundRules.razor.rz.scp.css */
/* Scoped styles for /office/outbound-rules — responsive column priority +
   heading/button restyles. Desktop rendering stays pixel-identical. */

/* or-section-title was a div; keep the h2 rendering identical. */
h2.or-section-title[b-blzryrarbz] {
    margin-top: 0;
}

/* Row edit action was a bare clickable icon; the wrapping button is
   visually transparent (icon keeps its own color/size). */
.or-edit-btn[b-blzryrarbz] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

/* Column priority (see the op-grid-table convention in app.css):
   base: 40px 1.5fr 1.2fr 1fr 2fr 30px
         select · name/pattern · manipulation · groups · trunk chain · edit
   ≤1024px hides GROUPS; ≤640px also hides MANIPULATION + TRUNK CHAIN,
   leaving select · name/pattern · edit. */
@media (max-width: 1024px) {
    .or-table-head[b-blzryrarbz],
    .or-table-row[b-blzryrarbz] {
        grid-template-columns: 40px 1.5fr 1.2fr 2fr 30px;
    }
}

@media (max-width: 640px) {
    .or-table-head[b-blzryrarbz],
    .or-table-row[b-blzryrarbz] {
        grid-template-columns: 40px 1fr 30px;
    }
}

/* Edit form: stack the 3-across criteria grid and the 5-column routes grid
   on narrow screens so fields stay usable at 360px. */
@media (max-width: 640px) {
    .or-criteria-grid[b-blzryrarbz] {
        grid-template-columns: 1fr;
    }

    .or-routes-grid[b-blzryrarbz] {
        grid-template-columns: 1fr;
    }

    /* Column headers of the routes grid make no sense stacked. */
    .or-routes-grid-head[b-blzryrarbz] {
        display: none;
    }
}
/* /Pages/OfficePhones.razor.rz.scp.css */
/* Scoped styles for /office/phones — responsive column priority.
   base: 32px 70px 110px 1.4fr 1.2fr 1fr 140px 30px
         select · ext · vendor · model/fw · name · mac/ip · actions · kebab
   ≤1024px hides VENDOR + ACTIONS (row actions repeat in the kebab menu);
   ≤640px also hides NAME + MAC/IP, leaving select · ext · model · kebab. */

@media (max-width: 1024px) {
    .ph-table-head[b-qdwmahol2s],
    .ph-table-row[b-qdwmahol2s] {
        grid-template-columns: 32px 70px 1.4fr 1.2fr 1fr 30px;
    }
}

@media (max-width: 640px) {
    .ph-table-head[b-qdwmahol2s],
    .ph-table-row[b-qdwmahol2s] {
        grid-template-columns: 32px 60px 1fr 30px;
    }
}
/* /Pages/OfficeUsersEdit.razor.rz.scp.css */
/* Scoped styles for /office/users/edit. */

/* Inline required-field error (paired with aria-invalid/aria-describedby on
   the Extension field; the toast + tab marker remain). */
.ue-field-error[b-cd0iujhjuv] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--op-error);
}

/* Codec rows gained keyboard Move up/down buttons next to Remove; the last
   grid track widens to fit the three stealth buttons. */
.ue-codec-header[b-cd0iujhjuv],
.ue-codec-row[b-cd0iujhjuv] {
    grid-template-columns: 30px 60px 1fr 110px;
}

.ue-codec-actions[b-cd0iujhjuv] {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

/* The inline "Mailbox" heading style lives in a11y.css — Settings renders the
   same class, and a scoped rule here would leave it unstyled there. */

/* ── Responsive (desktop unchanged) ── */
@media (max-width: 1024px) {
    /* 8-column permissions table scrolls instead of crushing. */
    .ue-perm-table[b-cd0iujhjuv] {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 640px) {
    .ue-identity[b-cd0iujhjuv] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ue-identity-actions[b-cd0iujhjuv] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* /Pages/Panel.razor.rz.scp.css */
/* ── Panel page: pause toggle + responsive layout (desktop pixels untouched except
      the new pause button; base classes live in Panel.razor's style block). ── */

/* Pause/resume live updates (WCAG 2.2.2) — sits between the Live pill and the clock. */
.pnl-pause[b-8e51izg2mz] {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-ink2);
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.pnl-pause:hover[b-8e51izg2mz] {
    background: var(--op-surfaceAlt);
}

.pnl-pause[aria-pressed="true"][b-8e51izg2mz] {
    color: var(--op-accent);
    border-color: var(--op-accent);
    background: var(--op-accentSoft);
}

/* Paused state of the Live pill. */
.pnl-live.paused[b-8e51izg2mz] {
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
}

.pnl-live.paused .pnl-live-dot[b-8e51izg2mz] {
    background: var(--op-muted);
    box-shadow: none;
}

/* Keep the view-selector menu inside the viewport on narrow screens. */
.pnl-sel-menu[b-8e51izg2mz] {
    max-width: min(320px, calc(100vw - 24px));
}

/* ── ≤1024px: stack the queue columns; page scrolls vertically ── */
@media (max-width: 1024px) {
    .pnl-body[b-8e51izg2mz] {
        overflow-y: auto;
    }

    .pnl-singlequeue[b-8e51izg2mz] {
        grid-template-columns: 1fr;
    }

    /* Single-queue roster rail (Panel-owned tablewrap/card): grow with content. */
    .pnl-tablewrap[b-8e51izg2mz] {
        flex: none;
        min-height: 0;
    }

    .pnl-card[b-8e51izg2mz] {
        flex: none;
        overflow: visible;
    }

    /* Receptionist: the two halves stack and size to content; page scrolls. */
    .pnl-rec-active[b-8e51izg2mz],
    .pnl-rec-dir[b-8e51izg2mz] {
        flex: none;
        min-height: 0;
    }

    .pnl-rec-scroll[b-8e51izg2mz] {
        overflow: visible;
    }

    /* Wallboard stat tiles wrap 2-up. */
    .pnl-wall[b-8e51izg2mz] {
        grid-template-rows: none;
        grid-auto-rows: auto;
        overflow-y: auto;
    }

    .pnl-wall-tilerow[b-8e51izg2mz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pnl-wall-tile:nth-child(2n)[b-8e51izg2mz] {
        border-right: none;
    }
}

/* ── ≤640px: phone ── */
@media (max-width: 640px) {
    .pnl-header[b-8e51izg2mz] {
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 10px 12px;
    }

    .pnl-title[b-8e51izg2mz] {
        font-size: 18px;
    }

    .pnl-clock[b-8e51izg2mz] {
        font-size: 10.5px;
    }

    .pnl-body[b-8e51izg2mz] {
        padding: 12px 12px 14px;
        gap: 12px;
    }

    /* Receptionist directory becomes 2-up cards. */
    .pnl-rec-toolbar[b-8e51izg2mz] {
        flex-wrap: wrap;
    }

    .pnl-rec-cards.grid[b-8e51izg2mz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pnl-rec-card[b-8e51izg2mz] {
        padding: 9px 10px;
        gap: 8px;
    }

    /* Wallboard banner stacks; clock/title shrink via their existing clamp()s. */
    .pnl-wall-banner[b-8e51izg2mz] {
        grid-template-columns: 1fr;
    }

    .pnl-wall-clockcell[b-8e51izg2mz] {
        border-right: none;
        border-bottom: 1px solid var(--op-hairline);
        padding: 14px 0;
    }

    .pnl-wall-titlecell[b-8e51izg2mz] {
        padding: 14px 0;
    }
}
/* /Pages/PanelAgentsTable.razor.rz.scp.css */
/* ── Panel agents table: responsive column-priority overrides (desktop untouched) ──
 * Same convention as PanelCallsTable.razor.css / the app.css op-grid-table contract. */

@media (max-width: 1024px) {
    .op-col-hide-md[b-nfxf90iz5y] {
        display: none !important;
    }

    /* Queues hidden → Ext · Agent · Status · Today · Talk. */
    .pnl-grid-head[b-nfxf90iz5y],
    .pnl-grid-row[b-nfxf90iz5y] {
        grid-template-columns: 66px 1.5fr 1fr 96px 78px !important;
    }

    /* Stacked layout: let the card grow with its rows and the page scroll instead. */
    .pnl-tablewrap[b-nfxf90iz5y] {
        flex: none;
        min-height: 0;
    }

    .pnl-card[b-nfxf90iz5y] {
        flex: none;
        overflow: visible;
    }

    .pnl-section-label[b-nfxf90iz5y],
    .pnl-legend[b-nfxf90iz5y] {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

@media (max-width: 640px) {
    .op-col-hide-sm[b-nfxf90iz5y] {
        display: none !important;
    }

    /* Ext/Today/Talk hidden too → Agent · Status. */
    .pnl-grid-head[b-nfxf90iz5y],
    .pnl-grid-row[b-nfxf90iz5y] {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
        padding-left: 10px;
        padding-right: 10px;
        gap: 8px;
    }
}
/* /Pages/PanelCallsTable.razor.rz.scp.css */
/* ── Panel calls table: responsive column-priority overrides (desktop untouched) ──
 *
 * Follows the app.css op-grid-table convention: cells marked op-col-hide-md/-sm
 * (on BOTH the head and row cell) disappear at ≤1024px / ≤640px, and the
 * grid-template-columns is re-declared here (!important beats the inline style)
 * to mirror the remaining column count. The actions column always stays last.
 */

@media (max-width: 1024px) {
    .op-col-hide-md[b-e0y3evgzrl] {
        display: none !important;
    }

    /* Rec hidden → 7 cols (with Queue) / 6 cols (single-queue view). */
    .pnl-grid-head.has-q[b-e0y3evgzrl],
    .pnl-grid-row.has-q[b-e0y3evgzrl] {
        grid-template-columns: 104px 2fr 1.7fr 0.9fr 1fr 74px minmax(0, auto) !important;
    }

    .pnl-grid-head.no-q[b-e0y3evgzrl],
    .pnl-grid-row.no-q[b-e0y3evgzrl] {
        grid-template-columns: 104px 2fr 1.7fr 1fr 74px minmax(0, auto) !important;
    }

    /* Stacked layout: let the card grow with its rows and the page scroll instead. */
    .pnl-tablewrap[b-e0y3evgzrl] {
        flex: none;
        min-height: 0;
    }

    .pnl-card[b-e0y3evgzrl] {
        flex: none;
        overflow: visible;
    }
}

@media (max-width: 640px) {
    .op-col-hide-sm[b-e0y3evgzrl] {
        display: none !important;
    }

    /* Callee/Queue/Agent/Rec hidden → State · Caller · Time · Actions. */
    .pnl-grid-head.has-q[b-e0y3evgzrl],
    .pnl-grid-row.has-q[b-e0y3evgzrl],
    .pnl-grid-head.no-q[b-e0y3evgzrl],
    .pnl-grid-row.no-q[b-e0y3evgzrl] {
        grid-template-columns: 84px minmax(0, 1fr) 60px minmax(0, auto) !important;
        gap: 8px;
    }

    .pnl-grid-head[b-e0y3evgzrl],
    .pnl-grid-row[b-e0y3evgzrl] {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Comfortable touch targets + let the action row wrap instead of widening the grid. */
    .pnl-actions[b-e0y3evgzrl] {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 138px;
        row-gap: 4px;
    }

    .pnl-actions .pnl-pillbtn[b-e0y3evgzrl] {
        height: 28px;
    }

    .pnl-actions .pnl-iconbtn[b-e0y3evgzrl] {
        width: 28px;
        height: 28px;
    }
}
/* /Pages/PanelStatFooter.razor.rz.scp.css */
/* ── Panel KPI footer: responsive wrap (desktop = single 6-across row, untouched) ── */

@media (max-width: 1024px) {
    .pnl-footer[b-1bsprlg4rq] {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
    }

    .pnl-footer-cell:nth-child(3n)[b-1bsprlg4rq] {
        border-right: none;
    }

    .pnl-footer-cell:nth-child(n+4)[b-1bsprlg4rq] {
        border-top: 1px solid var(--op-hairline);
    }
}

@media (max-width: 640px) {
    .pnl-footer[b-1bsprlg4rq] {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset the 3-per-row borders, then re-apply for 2 per row. */
    .pnl-footer-cell:nth-child(3n)[b-1bsprlg4rq] {
        border-right: 1px solid var(--op-hairline);
    }

    .pnl-footer-cell:nth-child(2n)[b-1bsprlg4rq] {
        border-right: none;
    }

    .pnl-footer-cell:nth-child(n+4)[b-1bsprlg4rq] {
        border-top: none;
    }

    .pnl-footer-cell:nth-child(n+3)[b-1bsprlg4rq] {
        border-top: 1px solid var(--op-hairline);
    }

    .pnl-footer-cell[b-1bsprlg4rq] {
        padding: 9px 12px;
    }

    .pnl-footer-val[b-1bsprlg4rq] {
        font-size: 19px;
    }
}
/* /Pages/Recordings.razor.rz.scp.css */
/* Recordings — mobile pane switching (list ↔ detail) + library/filters disclosure.
   Desktop (>1100px) is untouched: the helpers are display:none and the app.css
   layout applies unchanged. */

.pane-back[b-2w3ny8ty5o],
.pane-nav-toggle[b-2w3ny8ty5o] {
    display: none;
}

/* Detail-pane fallback shown in place of the audio player when the recording's
   file is gone (cleaned up, or media absent after a config-profile restore). */
.rc-detail-unavailable[b-2w3ny8ty5o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    margin: 4px 0 8px;
    background: var(--op-surfaceAlt);
    border: 1px dashed var(--op-hairline);
    border-radius: 10px;
    text-align: center;
}

.rc-detail-unavailable-text[b-2w3ny8ty5o] {
    font-size: 13px;
    color: var(--op-muted);
}

/* Play buttons for missing-file rows read as inert rather than actionable. */
.rc-play-btn:disabled[b-2w3ny8ty5o] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rc-icon-btn:disabled[b-2w3ny8ty5o] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── <=1100px: app.css hides .rc-detail-panel; show ONE pane at a time. ── */
@media (max-width: 1100px) {

    .rc-layout.pane-detail .rc-detail-panel[b-2w3ny8ty5o] {
        display: flex;
        width: 100%;
        border-left: none;
    }

    .rc-layout.pane-detail .rc-list-panel[b-2w3ny8ty5o] {
        display: none;
    }

    .pane-back[b-2w3ny8ty5o] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 10px;
        padding: 5px 10px;
        background: var(--op-surfaceAlt);
        border: 1px solid var(--op-hairline);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--op-ink2);
        cursor: pointer;
    }
}

/* ── <=900px: app.css hides .rc-sidebar; a toggle discloses it stacked above. ── */
@media (max-width: 900px) {
    .pane-nav-toggle[b-2w3ny8ty5o] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .rc-layout.pane-nav[b-2w3ny8ty5o] {
        grid-template-rows: auto 1fr;
    }

    .rc-layout.pane-nav .rc-sidebar[b-2w3ny8ty5o] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }

    .rc-layout.pane-detail .pane-nav-toggle[b-2w3ny8ty5o] {
        display: none;
    }
}
/* /Pages/Reports/ReportAbandonedQueueCalls.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤640px: Queue hidden (op-col-hide-sm) → Time / Caller / Wait Time. */
@media (max-width: 640px) {
    .aqc-row[b-kjqjfmvcyd] {
        grid-template-columns: 130px 1fr 90px;
    }
}
/* /Pages/Reports/ReportAgentInQueue.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Avg Talk hidden (op-col-hide-md).
   ≤640px:  Queue + Unanswered also hidden (op-col-hide-sm) → Agent / Answered / Total Talk. */
@media (max-width: 1024px) {
    .aiq-row[b-yln5d6uzjv] {
        grid-template-columns: 1fr 100px 100px 110px 120px;
    }
}

@media (max-width: 640px) {
    .aiq-row[b-yln5d6uzjv] {
        grid-template-columns: 1fr 90px 100px;
    }
}
/* /Pages/Reports/ReportAuditLog.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: IP + Object Type hidden (op-col-hide-md).
   ≤640px:  Object Name also hidden (op-col-hide-sm) → Time / User / Action / Details. */
@media (max-width: 1024px) {
    .al-row[b-n8hbdm8r1z] {
        grid-template-columns: 170px 1fr 100px 1fr 70px;
    }
}

@media (max-width: 640px) {
    .al-row[b-n8hbdm8r1z] {
        grid-template-columns: 140px 1fr 90px 70px;
    }
}
/* /Pages/Reports/ReportCallDistribution.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   Only 4 narrow columns — none hidden; they re-flow to fit phone widths. */
@media (max-width: 640px) {
    .cd-row[b-vcxjbb5501] {
        grid-template-columns: 110px 1fr 1fr 1fr;
    }
}
/* /Pages/Reports/ReportCallLog.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Ring hidden (op-col-hide-md).
   ≤640px:  Direction + To also hidden (op-col-hide-sm) → Time / From / Status / Talk. */
@media (max-width: 1024px) {
    .rpt-cl-row[b-7z7z1368u1] {
        grid-template-columns: 160px 90px 1fr 1fr 100px 80px;
    }
}

@media (max-width: 640px) {
    .rpt-cl-row[b-7z7z1368u1] {
        grid-template-columns: 130px 1fr 90px 70px;
    }
}
/* /Pages/Reports/ReportChatLog.razor.rz.scp.css */
/* The page title spans were promoted to h1 for heading structure —
   neutralize the UA heading styles so the look is unchanged
   (.rpt-chat-title in app.css supplies size/weight/color). */
h1.rpt-chat-title[b-ndff78981q] {
    margin: 0;
    font-size: 16px;
    line-height: var(--type-ramp-base-line-height);
}

/* Column-priority responsive overrides (op-grid-table convention, app.css). */

/* Main chat-log table:
   ≤1024px: Email hidden (op-col-hide-md).
   ≤640px:  To + Type also hidden (op-col-hide-sm) → Date / From / view-messages action. */
@media (max-width: 1024px) {
    .cl-row[b-ndff78981q] {
        grid-template-columns: 180px 1fr 1fr 100px 40px;
    }
}

@media (max-width: 640px) {
    .cl-row[b-ndff78981q] {
        grid-template-columns: 150px 1fr 40px;
    }
}

/* Detail (messages) table:
   ≤1024px: Email hidden (op-col-hide-md).
   ≤640px:  To also hidden (op-col-hide-sm) → Date / From / Message. */
@media (max-width: 1024px) {
    .cl-detail-row[b-ndff78981q] {
        grid-template-columns: 180px 1fr 1fr 2fr;
    }
}

@media (max-width: 640px) {
    .cl-detail-row[b-ndff78981q] {
        grid-template-columns: 150px 1fr 1.5fr;
    }
}
/* /Pages/Reports/ReportDetailedQueueStatistics.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Ring Time + Avg Ring hidden (op-col-hide-md).
   ≤640px:  Avg Talk also hidden (op-col-hide-sm) → Queue / Total / Answered / Talk Time. */
@media (max-width: 1024px) {
    .dqs-row[b-a3564numsl] {
        grid-template-columns: 1fr 100px 100px 100px 100px;
    }
}

@media (max-width: 640px) {
    .dqs-row[b-a3564numsl] {
        grid-template-columns: 1fr 80px 90px 90px;
    }
}
/* /Pages/Reports/ReportExtensionStatistic.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: In Talk + Out Talk hidden (op-col-hide-md).
   ≤640px:  Out Answered + Out Missed also hidden (op-col-hide-sm)
            → Extension / In Answered / In Missed. */
@media (max-width: 1024px) {
    .ext-row[b-afk8vfjxpv] {
        grid-template-columns: 1fr 100px 90px 110px 90px;
    }
}

@media (max-width: 640px) {
    .ext-row[b-afk8vfjxpv] {
        grid-template-columns: 1fr 100px 90px;
    }
}
/* /Pages/Reports/ReportInboundCalls.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Wait hidden (op-col-hide-md).
   ≤640px:  Destination also hidden (op-col-hide-sm) → Time / Caller / Status / Talk. */
@media (max-width: 1024px) {
    .rpt-ib-row[b-qjezpue6e7] {
        grid-template-columns: 160px 1fr 1fr 100px 80px;
    }
}

@media (max-width: 640px) {
    .rpt-ib-row[b-qjezpue6e7] {
        grid-template-columns: 130px 1fr 90px 70px;
    }
}
/* /Pages/Reports/ReportInboundRules.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Trunk hidden (op-col-hide-md).
   ≤640px:  Out of Office also hidden (op-col-hide-sm) → Rule Name / DID / Office Hours. */
@media (max-width: 1024px) {
    .ir-row[b-2ivwszochf] {
        grid-template-columns: 1fr 140px 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ir-row[b-2ivwszochf] {
        grid-template-columns: 1fr 110px 1fr;
    }
}
/* /Pages/Reports/ReportOutboundCalls.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Ring hidden (op-col-hide-md).
   ≤640px:  Extension also hidden (op-col-hide-sm) → Time / Dialed Number / Status / Talk. */
@media (max-width: 1024px) {
    .rpt-ob-row[b-yz1qfmmruc] {
        grid-template-columns: 160px 1fr 1fr 100px 80px;
    }
}

@media (max-width: 640px) {
    .rpt-ob-row[b-yz1qfmmruc] {
        grid-template-columns: 130px 1fr 90px 70px;
    }
}
/* /Pages/Reports/ReportQueueAnsweredByWaitTime.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤640px: Queue hidden (op-col-hide-sm) → Time / Caller / Wait Time. */
@media (max-width: 640px) {
    .qwt-row[b-50jt32v255] {
        grid-template-columns: 130px 1fr 90px;
    }
}
/* /Pages/Reports/ReportQueuePerformanceOverview.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Talk Time hidden (op-col-hide-md).
   ≤640px:  Dropped also hidden (op-col-hide-sm) → Queue / Received / Answered / Answer %. */
@media (max-width: 1024px) {
    .qpo-row[b-g2ulht7zx2] {
        grid-template-columns: 1fr 100px 100px 100px 100px;
    }
}

@media (max-width: 640px) {
    .qpo-row[b-g2ulht7zx2] {
        grid-template-columns: 1fr 75px 85px 85px;
    }
}
/* /Pages/Reports/ReportRingGroup.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   Only 4 columns — none hidden; they re-flow to fit phone widths. */
@media (max-width: 640px) {
    .rg-row[b-vmf3qelaap] {
        grid-template-columns: 1fr 80px 90px 90px;
    }
}
/* /Pages/Reports/ReportScheduled.razor.rz.scp.css */
/* Responsive fallback: this page uses a real <table> (not op-grid-table), so on
   narrow screens the wide 7-column table scrolls horizontally inside the card
   instead of breaking the page (mirrors the op-grid-table ≤1024px fallback). */
@media (max-width: 1024px) {
    .rs-table-wrap[b-owu781ni2x] {
        overflow-x: auto;
    }
}
/* /Pages/Reports/ReportSlaBreaches.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤640px: Queue hidden (op-col-hide-sm) → Time / Caller / Wait Time. */
@media (max-width: 640px) {
    .slb-row[b-8vny5w92ev] {
        grid-template-columns: 130px 1fr 90px;
    }
}
/* /Pages/Reports/ReportSlaStatistics.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Avg Wait + Max Wait hidden (op-col-hide-md).
   ≤640px:  Answered + Unanswered also hidden (op-col-hide-sm) → Queue / Total / SLA %. */
@media (max-width: 1024px) {
    .sla-row[b-vp21qa8fy8] {
        grid-template-columns: 1fr 80px 90px 100px 80px;
    }
}

@media (max-width: 640px) {
    .sla-row[b-vp21qa8fy8] {
        grid-template-columns: 1fr 80px 80px;
    }
}
/* /Pages/Reports/ReportTeamQueueGeneral.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Avg Talk hidden (op-col-hide-md).
   ≤640px:  Agents + Total Talk also hidden (op-col-hide-sm) → Queue / Received / Answered. */
@media (max-width: 1024px) {
    .tqg-row[b-4aqq182e25] {
        grid-template-columns: 1fr 80px 100px 100px 120px;
    }
}

@media (max-width: 640px) {
    .tqg-row[b-4aqq182e25] {
        grid-template-columns: 1fr 90px 90px;
    }
}
/* /Pages/Reports/ReportUserActivity.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   Only 4 narrow columns — none hidden; they re-flow to fit phone widths. */
@media (max-width: 640px) {
    .ua-row[b-krcf6gyf2d] {
        grid-template-columns: 110px 1fr 1fr 1fr;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Settings — small screens: app.css hides the tab sidebar at <=768px, which left the
   tabs unreachable. Restore it as a horizontally scrolling chip row above the body.
   Desktop is untouched. */

@media (max-width: 768px) {
    .st-layout[b-q6qsko1h8j] {
        grid-template-rows: auto 1fr;
    }

    .st-layout .st-sidebar[b-q6qsko1h8j] {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        padding: 8px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--op-hairline);
        white-space: nowrap;
    }

    .st-layout .st-sidebar .st-sidebar-section-label[b-q6qsko1h8j] {
        display: none;
    }

    .st-layout .st-sidebar .st-sidebar-item[b-q6qsko1h8j] {
        width: auto;
        flex-shrink: 0;
        padding: 6px 12px;
        border: 1px solid var(--op-hairline);
        border-radius: 999px;
    }

    .st-layout .st-sidebar .st-sidebar-item.active[b-q6qsko1h8j] {
        border-color: var(--op-accent);
    }
}
/* /Pages/Team.razor.rz.scp.css */
/* Team — mobile filters/groups disclosure (the sidebar is hidden by app.css at <=900px).
   Desktop is untouched: the toggle is display:none above the breakpoint. */

.pane-nav-toggle[b-666jyt61lp] {
    display: none;
}

@media (max-width: 900px) {
    .pane-nav-toggle[b-666jyt61lp] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .tm-layout.pane-nav[b-666jyt61lp] {
        grid-template-rows: auto 1fr;
    }

    .tm-layout.pane-nav .tm-sidebar[b-666jyt61lp] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }
}
/* /Pages/Voicemails.razor.rz.scp.css */
/* Voicemails — mobile pane switching (list ↔ detail) + folders/filters disclosure.
   Desktop (>1100px) is untouched: the helpers are display:none and the app.css
   layout applies unchanged. */

.pane-back[b-pyw2c5zao3],
.pane-nav-toggle[b-pyw2c5zao3] {
    display: none;
}

/* Detail-pane fallback shown in place of the audio player when the voicemail's
   WAV is gone (cleaned up, or media absent after a config-profile restore). The
   transcript section below stays visible — its sidecar can outlive the audio. */
.vm-detail-unavailable[b-pyw2c5zao3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    margin: 4px 0 8px;
    background: var(--op-surfaceAlt);
    border: 1px dashed var(--op-hairline);
    border-radius: 10px;
    text-align: center;
}

.vm-detail-unavailable-text[b-pyw2c5zao3] {
    font-size: 13px;
    color: var(--op-muted);
}

/* Play buttons for missing-file rows read as inert rather than actionable. */
.vm-play-btn:disabled[b-pyw2c5zao3] {
    opacity: 0.4;
    cursor: not-allowed;
}

.vm-icon-btn:disabled[b-pyw2c5zao3] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── <=1100px: app.css hides .vm-detail-panel; show ONE pane at a time. ── */
@media (max-width: 1100px) {

    /* Detail mode: detail pane replaces the list. */
    .vm-layout.pane-detail .vm-detail-panel[b-pyw2c5zao3] {
        display: flex;
        width: 100%;
        border-left: none;
    }

    .vm-layout.pane-detail .vm-list-panel[b-pyw2c5zao3] {
        display: none;
    }

    /* Back-to-list button (top of the detail pane). */
    .pane-back[b-pyw2c5zao3] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 10px;
        padding: 5px 10px;
        background: var(--op-surfaceAlt);
        border: 1px solid var(--op-hairline);
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--op-ink2);
        cursor: pointer;
    }
}

/* ── <=900px: app.css hides .vm-sidebar; a toggle discloses it stacked above. ── */
@media (max-width: 900px) {
    .pane-nav-toggle[b-pyw2c5zao3] {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 10px 14px 0;
        padding: 7px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        align-self: flex-start;
    }

    .vm-layout.pane-nav[b-pyw2c5zao3] {
        grid-template-rows: auto 1fr;
    }

    .vm-layout.pane-nav .vm-sidebar[b-pyw2c5zao3] {
        display: flex;
        flex-direction: column;
        max-height: 45vh;
        overflow-y: auto;
        border-bottom: 1px solid var(--op-hairline);
    }

    /* In detail mode the toggle is irrelevant — hide it with the list. */
    .vm-layout.pane-detail .pane-nav-toggle[b-pyw2c5zao3] {
        display: none;
    }
}
/* /Shared/QueueCallbackReport.razor.rz.scp.css */
/* Column-priority responsive overrides (op-grid-table convention, app.css).
   ≤1024px: Rang hidden (op-col-hide-md).
   ≤640px:  Queue + Attempts also hidden (op-col-hide-sm) → Requested / Caller / Outcome. */
@media (max-width: 1024px) {
    .rpt-cb-row[b-cm8cj96683] {
        grid-template-columns: 150px 1fr 1fr 110px 90px;
    }
}

@media (max-width: 640px) {
    .rpt-cb-row[b-cm8cj96683] {
        grid-template-columns: 120px 1fr 100px;
    }
}