/* /Components/GlobalControls/AccountDropDown.razor.rz.scp.css */
.account-selector[b-6ov95sfl4w] {
    position: relative;
    width: 100%;
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    /* Flex item of the header's left group: the default min-width:auto floored it at
       its content width, so on phones it spilled out of the group and painted UNDER
       the theme/notification buttons. With 0 it shrinks and the trigger truncates. */
    min-width: 0;
}

.account-selector-trigger[b-6ov95sfl4w] {
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Super-admin copy-account-name button */
.account-copy-btn[b-6ov95sfl4w] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
    font-size: 0.95rem;
}

.account-copy-btn:hover[b-6ov95sfl4w] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
    color: var(--bs-body-color);
}

.account-selector-backdrop[b-6ov95sfl4w] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.account-selector-panel[b-6ov95sfl4w] {
    position: fixed;
    z-index: 1050;
    max-height: 400px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 280px;
}

.account-selector-search[b-6ov95sfl4w] {
    border: 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0;
    padding: 0.625rem 0.875rem;
}

.account-selector-search:focus[b-6ov95sfl4w] {
    box-shadow: none;
    border-color: var(--bs-border-color, #dee2e6);
    border-bottom-color: var(--bs-primary, #0d6efd);
}

.account-selector-list[b-6ov95sfl4w] {
    max-height: 320px;
    min-height: 36px;
    overflow-y: auto;
}

.account-selector-item[b-6ov95sfl4w] {
    padding: 8px 12px;
    height: 66px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    line-height: 1.25;
}

.account-selector-item:hover[b-6ov95sfl4w] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08);
}

.account-selector-item.selected[b-6ov95sfl4w] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.14);
    font-weight: 500;
}

/* Keyboard highlight (arrow keys / first search match). The inset bar distinguishes it
   from the mouse :hover tint and marks the row that Enter will select. */
.account-selector-item.active[b-6ov95sfl4w] {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.18);
    box-shadow: inset 3px 0 0 var(--bs-primary, #0d6efd);
}

.account-selector-name[b-6ov95sfl4w] {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-selector-realm[b-6ov95sfl4w] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-selector-empty[b-6ov95sfl4w] {
    padding: 1rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
}

.account-selector-footer[b-6ov95sfl4w] {
    padding: 4px 12px;
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: rgba(0, 0, 0, 0.02);
    text-align: right;
}

/* ---- phones ---- */
/* Must stay AFTER the .account-copy-btn base rule above: same specificity, so file
   order decides, and an earlier display:none would lose to the base display:flex. */
@media (max-width: 575.98px) {
    /* Drop the copy-name convenience so its ~40px go to the account name, which is
       fighting for every character at this width. */
    .account-copy-btn[b-6ov95sfl4w] {
        display: none;
    }
}
/* /Components/Home.razor.rz.scp.css */
/* Quick-action tiles: subtle lift on hover, icon in a rounded tinted square. */
.dash-action[b-aon71y96uz] {
    transition: transform .12s ease, box-shadow .15s ease;
    color: inherit;
}

.dash-action:hover[b-aon71y96uz] {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important;
}

.dash-action-icon[b-aon71y96uz] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    /* Tinted neutral square; the icon itself is colored via Bootstrap text-* classes. */
    background: var(--bs-secondary-bg, rgba(0, 0, 0, .06));
}

/* Keep long action titles/descriptions from pushing the tile wider. */
.min-w-0[b-aon71y96uz] {
    min-width: 0;
}

.min-w-0 > div[b-aon71y96uz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-0htsge5e66] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-0htsge5e66] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Account/AccountManager.razor.rz.scp.css */
.ac-page h4[b-b1cfzuni73] {
    font-weight: 600;
}

.ac-card[b-b1cfzuni73] {
    border: none;
    border-radius: 0.75rem;
}

.ac-card-head[b-b1cfzuni73] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-nano[b-b1cfzuni73] {
    font-size: 0.72rem;
}

.ac-field[b-b1cfzuni73] {
    margin-bottom: 0.9rem;
}

.ac-switch-row[b-b1cfzuni73] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.ac-switch-row:last-child[b-b1cfzuni73] {
    border-bottom: none;
}

.ac-table-wrap[b-b1cfzuni73] {
    max-height: 24rem;
    overflow-y: auto;
}

.ac-table-wrap thead th[b-b1cfzuni73] {
    position: sticky;
    top: 0;
    background: var(--bs-body-bg);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}

.ac-table-wrap td[b-b1cfzuni73],
.ac-table-wrap th[b-b1cfzuni73] {
    padding: 0.45rem 1rem;
}

/* Staged hold-music upload — the file sits here while its name is edited, set off
   from the settings fields so it reads as a pending action rather than a saved value. */
.ac-moh-staged[b-b1cfzuni73] {
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    max-width: 34rem;
}

/* Reporting: each report is a small block — switch, its shared recipient list, add picker. */
.ac-report[b-b1cfzuni73] {
    padding: 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ac-report:last-of-type[b-b1cfzuni73] {
    border-bottom: 0;
}

.ac-recipients[b-b1cfzuni73] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.ac-recipients li[b-b1cfzuni73] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.84rem;
    max-width: 26rem;
}

.ac-recipients li > span[b-b1cfzuni73] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/Blocklists/BlocklistManager.razor.rz.scp.css */
.bl-page h4[b-fwz9xt45ck] {
    font-weight: 600;
}

.bl-card[b-fwz9xt45ck] {
    border: none;
    border-radius: 0.75rem;
}

.bl-tabs .nav-link[b-fwz9xt45ck] {
    color: var(--bs-body-color);
    font-weight: 500;
    padding: 0.4rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bl-tabs .nav-link.active[b-fwz9xt45ck] {
    background: var(--bs-primary);
    color: #fff;
}

.bl-tab-count[b-fwz9xt45ck] {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.bl-tabs .nav-link.active .bl-tab-count[b-fwz9xt45ck] {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.bl-card-head[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.bl-row[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.bl-row:last-child[b-fwz9xt45ck] {
    border-bottom: none;
}

.bl-row:hover[b-fwz9xt45ck] {
    background: var(--bs-tertiary-bg);
}

.bl-row-active[b-fwz9xt45ck] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.bl-row-main[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.25rem 0;
    text-align: left;
    cursor: pointer;
}

.bl-row-static[b-fwz9xt45ck] {
    cursor: default;
}

.bl-row-actions[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.bl-sms-add[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.bl-num-row[b-fwz9xt45ck] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bl-num-input[b-fwz9xt45ck] {
    max-width: 11rem;
    flex: 0 0 auto;
}
/* /Components/Pages/ButtonManager/ButtonManager.razor.rz.scp.css */
.bm-device-select[b-qda7wviiub] {
    min-width: 16rem;
    max-width: 20rem;
}

/* ---- family tab chips ---- */

.bm-family-tabs[b-qda7wviiub] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.bm-chip[b-qda7wviiub] {
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--bs-border-color, #d9d9d9);
    border-radius: 2rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.bm-chip:hover[b-qda7wviiub] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

.bm-chip.active[b-qda7wviiub] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

/* ---- assignment grid ---- */

.bm-grid-head[b-qda7wviiub],
.bm-grid-row[b-qda7wviiub] {
    display: grid;
    grid-template-columns: 1.3rem 2.6rem 8.5rem minmax(9rem, 1.2fr) minmax(7rem, 1fr);
    gap: 0.5rem;
    align-items: start;
    padding: 0.3rem 0.6rem;
}

.bm-grid-head[b-qda7wviiub] {
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-tertiary-bg, #f6f7f9);
    border-radius: 0.375rem 0.375rem 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
}

.bm-table-scroll[b-qda7wviiub] {
    max-height: 30rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color, #ececec);
    border-top: 0;
    border-radius: 0 0 0.375rem 0.375rem;
}

.bm-grid-row[b-qda7wviiub] {
    border-bottom: 1px solid var(--bs-border-color, #f0f0f0);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.bm-grid-row:last-child[b-qda7wviiub] {
    border-bottom: 0;
}

.bm-grid-row:hover[b-qda7wviiub] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.03));
}

.bm-grid-row.bm-row-sel[b-qda7wviiub] {
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

/* ---- drag to reorder ---- */

.bm-drag-handle[b-qda7wviiub] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.35rem;
    color: var(--bs-secondary-color, #999);
    cursor: grab;
    opacity: 0.55;
    transition: opacity 0.1s ease;
}

.bm-grid-row:hover .bm-drag-handle[b-qda7wviiub] {
    opacity: 1;
}

.bm-drag-handle:active[b-qda7wviiub] {
    cursor: grabbing;
}

.bm-grid-row.bm-row-dragging[b-qda7wviiub] {
    opacity: 0.4;
}

.bm-grid-row.bm-row-dragover[b-qda7wviiub] {
    box-shadow: inset 0 2px 0 var(--bs-primary);
}

.bm-keynum[b-qda7wviiub] {
    font-weight: 700;
    font-size: 0.85rem;
    padding-top: 0.35rem;
    text-align: center;
    color: var(--bs-secondary-color, #666);
}

.bm-row-sel .bm-keynum[b-qda7wviiub] {
    color: var(--bs-primary);
}

/* ---- misc switches ---- */

.bm-switch-grid[b-qda7wviiub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1rem;
}

.bm-switch-grid .form-check-label[b-qda7wviiub] {
    font-size: 0.85rem;
}

@media (max-width: 575px) {
    .bm-grid-head[b-qda7wviiub],
    .bm-grid-row[b-qda7wviiub] {
        grid-template-columns: 1.1rem 2rem 7rem minmax(6rem, 1fr) minmax(5rem, 1fr);
        gap: 0.35rem;
        padding: 0.3rem 0.4rem;
    }
}
/* /Components/Pages/ButtonManager/PhoneDiagram.razor.rz.scp.css */
.pd-shell[b-smqt04ezc8] {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
}

.pd-shell svg[b-smqt04ezc8] {
    display: block;
    width: 100%;
    height: auto;
    font-family: inherit;
}

/* Phones are dark hardware in both themes; only the accents follow the theme. */
.pd-body[b-smqt04ezc8] {
    fill: #2c3038;
    stroke: #1d2026;
    stroke-width: 1;
}

.pd-screen.pd-color[b-smqt04ezc8] {
    fill: #10151f;
    stroke: #000;
    stroke-width: 1;
}

.pd-screen.pd-grey[b-smqt04ezc8] {
    fill: #b9c4b5;
    stroke: #7d8a79;
    stroke-width: 1;
}

.pd-screen-tint[b-smqt04ezc8] {
    fill: rgba(8, 10, 16, 0.28);
    pointer-events: none;
}

.pd-key[b-smqt04ezc8] {
    cursor: pointer;
}

.pd-keycap[b-smqt04ezc8] {
    fill: #454b56;
    stroke: #23262c;
    stroke-width: 0.75;
    transition: fill 0.1s ease;
}

.pd-key:hover .pd-keycap[b-smqt04ezc8] {
    fill: #5a6270;
}

.pd-key.pd-sel .pd-keycap[b-smqt04ezc8] {
    fill: var(--bs-primary, #886ab5);
    stroke: var(--bs-primary, #886ab5);
}

.pd-pagekey .pd-keycap[b-smqt04ezc8] {
    fill: #383e48;
    stroke-dasharray: 2 1.5;
}

.pd-led[b-smqt04ezc8] {
    fill: #3fe07c;
    pointer-events: none;
}

/* On-screen label strips beside physical keys */
.pd-strip[b-smqt04ezc8] {
    fill: rgba(12, 16, 24, 0.55);
}

.pd-key.pd-sel .pd-strip[b-smqt04ezc8] {
    fill: var(--bs-primary, #886ab5);
}

/* Grey LCDs get darker, ink-style strips */
.pd-grey ~ g .pd-strip[b-smqt04ezc8] {
    fill: rgba(28, 36, 26, 0.75);
}

.pd-home[b-smqt04ezc8] {
    fill: #1f242c;
    stroke: #4a515c;
    stroke-width: 1;
}

/* ---- SVG <text> elements ----------------------------------------------------------
   Emitted as raw markup (Razor reserves the <text> tag) so they carry no CSS-isolation
   scope attribute — style them through ::deep from the scoped .pd-shell root. */

.pd-shell[b-smqt04ezc8]  .pd-keynum {
    fill: #cfd4dc;
    font-size: 7px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}

.pd-shell[b-smqt04ezc8]  .pd-key.pd-sel .pd-keynum {
    fill: #fff;
}

.pd-shell[b-smqt04ezc8]  .pd-chipnum {
    fill: rgba(255, 255, 255, 0.55);
    font-size: 5.5px;
    pointer-events: none;
    user-select: none;
}

.pd-shell[b-smqt04ezc8]  .pd-chiplabel {
    fill: #f2f4f8;
    font-size: 6.8px;
    pointer-events: none;
    user-select: none;
}

.pd-shell[b-smqt04ezc8]  .pd-striplabel {
    fill: #eef1f6;
    font-size: 6.5px;
    pointer-events: none;
    user-select: none;
}

.pd-shell[b-smqt04ezc8]  .pd-page-ind {
    fill: #aeb6c2;
    font-size: 7px;
    font-weight: 600;
    pointer-events: none;
    user-select: none;
}
/* /Components/Pages/CallForwarding/ForwardEditorPanel.razor.rz.scp.css */
.fw-switch-row[b-bjsv01bxmh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.fw-switch-row:last-child[b-bjsv01bxmh] {
    border-bottom: none;
}

.fw-switch-primary[b-bjsv01bxmh] {
    border: 1.5px solid var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--bs-tertiary-bg);
}

.fw-switch-label[b-bjsv01bxmh] {
    font-weight: 500;
}

.fw-switch-sub[b-bjsv01bxmh] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.fw-config[b-bjsv01bxmh] {
    margin-top: 0.85rem;
}
/* /Components/Pages/CallForwarding/ForwardPhone.razor.rz.scp.css */
.fw-page h4[b-ipra4adzvf] {
    font-weight: 600;
}

.fw-card[b-ipra4adzvf] {
    border: none;
    border-radius: 0.75rem;
}

.fw-toolbar[b-ipra4adzvf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-nano[b-ipra4adzvf] {
    font-size: 0.72rem;
}

.fw-user-row[b-ipra4adzvf] {
    border-bottom: 1px solid var(--bs-border-color);
}

.fw-user-row:last-child[b-ipra4adzvf] {
    border-bottom: none;
}

.fw-user-row.expanded[b-ipra4adzvf] {
    background: var(--bs-tertiary-bg);
}

.fw-user-main[b-ipra4adzvf] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.fw-user-main:hover[b-ipra4adzvf] {
    background: var(--bs-tertiary-bg);
}

.fw-avatar[b-ipra4adzvf] {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.8rem;
}

.fw-user-names[b-ipra4adzvf] {
    display: flex;
    flex-direction: column;
    min-width: 10rem;
}

.fw-user-status[b-ipra4adzvf] {
    margin-left: auto;
}

.fw-user-editor[b-ipra4adzvf] {
    padding: 0.25rem 1rem 1rem 3.95rem;
}

@media (max-width: 575.98px) {
    .fw-user-editor[b-ipra4adzvf] {
        padding-left: 1rem;
    }
}
/* /Components/Pages/CallLogs/CallLogList.razor.rz.scp.css */
/* ---- range chips + filters ---- */

.cl-chips[b-py9ha74qzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cl-chip[b-py9ha74qzn] {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--bs-border-color, #d9d9d9);
    border-radius: 2rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cl-chip:hover[b-py9ha74qzn] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

.cl-chip.active[b-py9ha74qzn] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.cl-custom[b-py9ha74qzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.cl-custom > div[b-py9ha74qzn] {
    min-width: 13rem;
}

.cl-filters[b-py9ha74qzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* ---- stat tiles ---- */

.cl-stats[b-py9ha74qzn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(8rem, 1fr));
    gap: 0.75rem;
}

.cl-stat[b-py9ha74qzn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cl-stat-value[b-py9ha74qzn] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.cl-stat-label[b-py9ha74qzn] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #888);
}

/* ---- tabs ---- */

.cl-tabs .nav-link[b-py9ha74qzn] {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

/* ---- view bar: Call Logs + report picker ---- */

.cl-viewbar[b-py9ha74qzn] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.cl-viewtab[b-py9ha74qzn] {
    padding: 0.35rem 1rem;
    border: 1px solid var(--bs-primary);
    border-radius: 2rem;
    background: transparent;
    color: var(--bs-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.cl-viewtab:hover[b-py9ha74qzn] {
    background: rgba(var(--bs-primary-rgb), 0.08);
}

.cl-viewtab.active[b-py9ha74qzn] {
    background: var(--bs-primary);
    color: #fff;
}

.cl-report-picker[b-py9ha74qzn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cl-report-picker select[b-py9ha74qzn] {
    min-width: 14rem;
}

/* ---- log grid ---- */

.cl-card[b-py9ha74qzn] {
    overflow: visible; /* the quick-call popover must escape the card */
}

.cl-thead[b-py9ha74qzn],
.cl-row[b-py9ha74qzn],
.cl-leg[b-py9ha74qzn] {
    display: grid;
    grid-template-columns: 2.2rem 6.8rem minmax(9rem, 1.2fr) minmax(9rem, 1.2fr) minmax(8rem, 1fr) 4.6rem minmax(7.5rem, 0.9fr) 8.2rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
}

.cl-thead[b-py9ha74qzn] {
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-tertiary-bg, #f6f7f9);
    border-radius: 0.375rem 0.375rem 0 0;
}

.cl-th[b-py9ha74qzn] {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
    white-space: nowrap;
}

.cl-th:hover[b-py9ha74qzn] {
    color: var(--bs-body-color);
}

.cl-th-center[b-py9ha74qzn] {
    text-align: center;
}

.cl-row-wrap[b-py9ha74qzn] {
    border-bottom: 1px solid var(--bs-border-color, #efefef);
}

.cl-row-wrap:last-of-type[b-py9ha74qzn] {
    border-bottom: 0;
}

.cl-row.has-legs[b-py9ha74qzn] {
    cursor: pointer;
}

.cl-row:hover[b-py9ha74qzn] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.03));
}

.cl-col-dir[b-py9ha74qzn] {
    text-align: center;
}

.cl-dir-in[b-py9ha74qzn] {
    color: var(--bs-warning, #f0ad4e);
}

.cl-dir-out[b-py9ha74qzn] {
    color: var(--bs-success, #1dc9b7);
}

.cl-cell[b-py9ha74qzn] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.cl-main[b-py9ha74qzn] {
    font-size: 0.87rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-sub[b-py9ha74qzn] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-cause[b-py9ha74qzn] {
    display: inline-block;
    max-width: 100%;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cl-cause.is-ok[b-py9ha74qzn] {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12);
    color: var(--bs-success, #198754);
}

.cl-cause.is-warn[b-py9ha74qzn] {
    background: rgba(var(--bs-warning-rgb, 255, 193, 7), 0.18);
    color: #a07800;
}

.cl-cause.is-info[b-py9ha74qzn] {
    background: rgba(var(--bs-info-rgb, 13, 202, 240), 0.14);
    color: var(--bs-info-text-emphasis, #087990);
}

.cl-cause.is-bad[b-py9ha74qzn] {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.12);
    color: var(--bs-danger, #dc3545);
}

.cl-actions[b-py9ha74qzn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1rem;
}

.cl-icon-btn[b-py9ha74qzn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
    font-size: 0.85rem;
}

.cl-icon-btn:hover[b-py9ha74qzn] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
    color: var(--bs-body-color);
}

/* Empty stand-in for the expand caret on rows with no legs, so action icons align. */
.cl-expander-spacer[b-py9ha74qzn] {
    background: transparent;
    pointer-events: none;
}

.cl-expander i[b-py9ha74qzn] {
    transition: transform 0.15s ease;
}

.cl-expander.open i[b-py9ha74qzn] {
    transform: rotate(180deg);
}

.cl-mini-btn[b-py9ha74qzn] {
    border: 0;
    background: transparent;
    padding: 0 0.2rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #999);
    cursor: pointer;
}

.cl-mini-btn:hover[b-py9ha74qzn] {
    color: var(--bs-primary);
}

/* ---- b-leg drill-down ---- */

.cl-legs[b-py9ha74qzn] {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border-top: 1px dashed var(--bs-border-color, #e5e5e5);
}

.cl-leg[b-py9ha74qzn] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    border-left: 3px solid rgba(var(--bs-primary-rgb), 0.35);
}

.cl-leg .cl-main[b-py9ha74qzn] {
    font-weight: 400;
    font-size: 0.82rem;
}

/* ---- pager ---- */

.cl-pager[b-py9ha74qzn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--bs-border-color, #e5e5e5);
}

/* ---- conference report ---- */

.cl-conf-table[b-py9ha74qzn] {
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cl-conf-head[b-py9ha74qzn],
.cl-conf-row[b-py9ha74qzn] {
    display: grid;
    grid-template-columns: 2fr 1.2fr 0.6fr;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
}

.cl-conf-head[b-py9ha74qzn] {
    background: var(--bs-tertiary-bg, #f6f7f9);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
}

.cl-conf-row[b-py9ha74qzn] {
    border-top: 1px solid var(--bs-border-color, #efefef);
}

/* ---- missed call report ---- */

.cl-stat-btn[b-py9ha74qzn] {
    cursor: pointer;
    text-align: left;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cl-stat-btn:hover[b-py9ha74qzn] {
    border-color: var(--bs-danger);
    box-shadow: 0 2px 6px rgba(var(--bs-danger-rgb), 0.18);
}

.cl-missed-table[b-py9ha74qzn] {
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cl-missed-head[b-py9ha74qzn],
.cl-missed-row[b-py9ha74qzn] {
    display: grid;
    /* Fixed last column so rows stay aligned whether or not the add-contact button shows. */
    grid-template-columns: 2fr 0.7fr 1.1fr 1.1fr 4.75rem;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

/* Keep the callback button in the same spot regardless of the add-contact button. */
.cl-missed-row .cl-actions[b-py9ha74qzn] {
    justify-content: flex-start;
}

.cl-attempt-badge[b-py9ha74qzn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.1;
    /* Deep rose, fixed in both themes: white text ~5.6:1 either way, versus the light
       theme --bs-danger pink that was only ~3.4:1. Saturated enough to read clearly on
       dark surfaces too. */
    background: #c81e4a;
    color: #fff;
}

.cl-missed-head[b-py9ha74qzn] {
    background: var(--bs-tertiary-bg, #f6f7f9);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
}

.cl-missed-row[b-py9ha74qzn] {
    border-top: 1px solid var(--bs-border-color, #efefef);
}

.cl-missed-row:hover[b-py9ha74qzn] {
    background: var(--bs-tertiary-bg, #f6f7f9);
}

.cl-missed-caller[b-py9ha74qzn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-missed-caller .cl-main[b-py9ha74qzn] {
    font-weight: 600;
}

.cl-missed-caller .cl-sub[b-py9ha74qzn] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #888);
}

.cl-missed-when[b-py9ha74qzn] {
    color: var(--bs-secondary-color, #666);
}

@media (max-width: 767px) {
    .cl-missed-head[b-py9ha74qzn],
    .cl-missed-row[b-py9ha74qzn] {
        grid-template-columns: 1.6fr 0.6fr 1fr 4.75rem;
    }
    .cl-missed-head span:nth-child(3)[b-py9ha74qzn],
    .cl-missed-row .cl-missed-when:first-of-type[b-py9ha74qzn] {
        display: none;
    }
}

/* ---- shared ---- */

.cl-modal-backdrop[b-py9ha74qzn] {
    background-color: rgba(0, 0, 0, 0.5);
}

.cl-code[b-py9ha74qzn] {
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
    font-size: 0.75rem;
}

/* Super-admin raw CDR dump in the details modal */
.cl-raw-json[b-py9ha74qzn] {
    max-height: 20rem;
    overflow: auto;
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, #f6f7f9);
    font-size: 0.72rem;
    line-height: 1.45;
}

/* ---- responsive ---- */

@media (max-width: 1199.98px) {
    .cl-thead[b-py9ha74qzn],
    .cl-row[b-py9ha74qzn],
    .cl-leg[b-py9ha74qzn] {
        grid-template-columns: 2.2rem 6.8rem minmax(9rem, 1.2fr) minmax(9rem, 1.2fr) 4.6rem 8.2rem;
    }

    .cl-col-cause[b-py9ha74qzn],
    .cl-col-ans[b-py9ha74qzn] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .cl-thead[b-py9ha74qzn],
    .cl-row[b-py9ha74qzn],
    .cl-leg[b-py9ha74qzn] {
        grid-template-columns: 1.6rem 6.4rem minmax(7rem, 1fr) 7.4rem;
        gap: 0.35rem;
        padding: 0.45rem 0.6rem;
    }

    /* keep direction, time, from, actions; hide to + duration */
    .cl-thead > :nth-child(4)[b-py9ha74qzn],
    .cl-row > :nth-child(4)[b-py9ha74qzn],
    .cl-leg > :nth-child(4)[b-py9ha74qzn],
    .cl-thead > :nth-child(6)[b-py9ha74qzn],
    .cl-row > :nth-child(6)[b-py9ha74qzn],
    .cl-leg > :nth-child(6)[b-py9ha74qzn] {
        display: none;
    }

    .cl-stats[b-py9ha74qzn] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/CallLogs/ConcurrencyPanel.razor.rz.scp.css */
/* ---- concurrency report ---- */

.cc-headline[b-2tvzhz1hfs] {
    display: grid;
    grid-template-columns: repeat(5, minmax(7rem, 1fr));
    gap: 0.75rem;
}

.cc-kpi[b-2tvzhz1hfs] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
}

.cc-kpi-value[b-2tvzhz1hfs] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
}

.cc-kpi-of[b-2tvzhz1hfs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #888);
}

.cc-kpi-label[b-2tvzhz1hfs] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #888);
}

/* The defensible figure under the headline one — see the verdict note in the panel. */
.cc-kpi-sub[b-2tvzhz1hfs] {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #888);
}

.cc-h[b-2tvzhz1hfs] {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.cc-split[b-2tvzhz1hfs] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.cc-levels[b-2tvzhz1hfs] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cc-level-row[b-2tvzhz1hfs] {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem 3.5rem;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.82rem;
}

.cc-level-name[b-2tvzhz1hfs] {
    font-weight: 600;
}

.cc-bar[b-2tvzhz1hfs] {
    display: block;
    height: 0.6rem;
    border-radius: 0.3rem;
    background: var(--bs-tertiary-bg, #f0f1f4);
    overflow: hidden;
}

.cc-bar-fill[b-2tvzhz1hfs] {
    display: block;
    height: 100%;
    border-radius: 0.3rem;
    background: rgba(var(--bs-primary-rgb), 0.55);
}

.cc-bar-fill.cc-bar-hot[b-2tvzhz1hfs] {
    background: rgba(var(--bs-danger-rgb), 0.65);
}

.cc-level-val[b-2tvzhz1hfs],
.cc-level-pct[b-2tvzhz1hfs] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--bs-secondary-color, #777);
}

.cc-table[b-2tvzhz1hfs] {
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cc-head[b-2tvzhz1hfs],
.cc-row[b-2tvzhz1hfs] {
    display: grid;
    gap: 0.5rem;
    align-items: center;
    padding: 0.42rem 0.75rem;
    font-size: 0.83rem;
}

.cc-head[b-2tvzhz1hfs] {
    background: var(--bs-tertiary-bg, #f6f7f9);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
}

.cc-row[b-2tvzhz1hfs] {
    border-top: 1px solid var(--bs-border-color, #efefef);
}

/* Provisioned but never used in the range — the "paying for shelfware" rows. */
.cc-row-idle[b-2tvzhz1hfs] {
    color: var(--bs-secondary-color, #888);
}

.cc-table-dev .cc-head[b-2tvzhz1hfs],
.cc-table-dev .cc-row[b-2tvzhz1hfs] {
    grid-template-columns: minmax(8rem, 1.6fr) 7rem minmax(6rem, 1fr) 4rem 5.5rem 5rem 5rem 8.5rem;
}

.cc-table-ep .cc-head[b-2tvzhz1hfs],
.cc-table-ep .cc-row[b-2tvzhz1hfs] {
    grid-template-columns: 11rem 5rem 4rem minmax(0, 1fr);
}

.cc-table-day .cc-head[b-2tvzhz1hfs],
.cc-table-day .cc-row[b-2tvzhz1hfs] {
    grid-template-columns: minmax(7rem, 1fr) 6.5rem 6rem 5rem 6rem;
}

.cc-num[b-2tvzhz1hfs] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cc-strong[b-2tvzhz1hfs] {
    font-weight: 600;
}

.cc-devs[b-2tvzhz1hfs] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #777);
    overflow-wrap: anywhere;
}

.cc-peak-badge[b-2tvzhz1hfs] {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.75rem;
    background: rgba(var(--bs-primary-rgb), 0.14);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.cc-peak-badge.cc-peak-hot[b-2tvzhz1hfs] {
    background: rgba(var(--bs-danger-rgb), 0.16);
    color: var(--bs-danger);
}

/* Paper-only masthead — see the print block at the bottom of this file. */
.cc-print-head[b-2tvzhz1hfs] {
    display: none;
}

/* Episodes past the on-screen limit: rendered, but only revealed when printing. */
.cc-row-overflow[b-2tvzhz1hfs] {
    display: none;
}

/* ---- responsive ---- */

@media (max-width: 1199.98px) {
    .cc-headline[b-2tvzhz1hfs] {
        grid-template-columns: repeat(3, minmax(7rem, 1fr));
    }

    .cc-split[b-2tvzhz1hfs] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    /* Drop "Assigned to" and "Last used" before the numbers that carry the finding. */
    .cc-table-dev .cc-head[b-2tvzhz1hfs],
    .cc-table-dev .cc-row[b-2tvzhz1hfs] {
        grid-template-columns: minmax(7rem, 1.6fr) 6.5rem 4rem 5.5rem 4.5rem 4.5rem;
    }

    .cc-table-dev .cc-head > :nth-child(3)[b-2tvzhz1hfs],
    .cc-table-dev .cc-row > :nth-child(3)[b-2tvzhz1hfs],
    .cc-table-dev .cc-head > :nth-child(8)[b-2tvzhz1hfs],
    .cc-table-dev .cc-row > :nth-child(8)[b-2tvzhz1hfs] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .cc-headline[b-2tvzhz1hfs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cc-level-row[b-2tvzhz1hfs] {
        grid-template-columns: 4.5rem minmax(0, 1fr) 4rem 3rem;
        font-size: 0.78rem;
    }

    /* Device / talk time / days only — the rest is unreadable at this width. */
    .cc-table-dev .cc-head[b-2tvzhz1hfs],
    .cc-table-dev .cc-row[b-2tvzhz1hfs] {
        grid-template-columns: minmax(0, 1fr) 5rem 4rem;
    }

    .cc-table-dev .cc-head > :nth-child(2)[b-2tvzhz1hfs],
    .cc-table-dev .cc-row > :nth-child(2)[b-2tvzhz1hfs],
    .cc-table-dev .cc-head > :nth-child(4)[b-2tvzhz1hfs],
    .cc-table-dev .cc-row > :nth-child(4)[b-2tvzhz1hfs],
    .cc-table-dev .cc-head > :nth-child(7)[b-2tvzhz1hfs],
    .cc-table-dev .cc-row > :nth-child(7)[b-2tvzhz1hfs] {
        display: none;
    }

    .cc-table-ep .cc-head[b-2tvzhz1hfs],
    .cc-table-ep .cc-row[b-2tvzhz1hfs] {
        grid-template-columns: 8.5rem 4rem 3rem;
    }

    .cc-table-ep .cc-head > :nth-child(4)[b-2tvzhz1hfs],
    .cc-table-ep .cc-row > :nth-child(4)[b-2tvzhz1hfs] {
        grid-column: 1 / -1;
        text-align: left;
    }

    .cc-table-day .cc-head[b-2tvzhz1hfs],
    .cc-table-day .cc-row[b-2tvzhz1hfs] {
        grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem;
    }

    .cc-table-day .cc-head > :nth-child(4)[b-2tvzhz1hfs],
    .cc-table-day .cc-row > :nth-child(4)[b-2tvzhz1hfs],
    .cc-table-day .cc-head > :nth-child(5)[b-2tvzhz1hfs],
    .cc-table-day .cc-row > :nth-child(5)[b-2tvzhz1hfs] {
        display: none;
    }
}

/* ---- print / save as PDF ---- */

@media print {
    /* Controls are not part of the report. */
    .cc-noprint[b-2tvzhz1hfs] {
        display: none !important;
    }

    .cc-print-head[b-2tvzhz1hfs] {
        display: block !important;
        margin-bottom: 0.9rem;
        padding-bottom: 0.6rem;
        border-bottom: 2px solid #222;
    }

    .cc-print-title[b-2tvzhz1hfs] {
        font-size: 1.35rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .cc-print-account[b-2tvzhz1hfs] {
        font-size: 1rem;
        font-weight: 600;
    }

    .cc-print-meta[b-2tvzhz1hfs] {
        font-size: 0.8rem;
        color: #444 !important;
    }

    /* Every overlap episode belongs in the document, including the ones the screen pages away. */
    .cc-row-overflow[b-2tvzhz1hfs] {
        display: grid !important;
    }

    /*
        Paper is white even when the viewer is in dark mode. The theme flips Bootstrap's
        variables on <html>, so the fix is to re-point those variables inside the report
        rather than chase every class that reads them — otherwise dark mode prints pale
        grey body text (--bs-secondary-color becomes a light tint) onto white paper.
    */
    .cc-print-area[b-2tvzhz1hfs] {
        --bs-body-bg: #fff;
        --bs-body-color: #000;
        --bs-body-color-rgb: 0, 0, 0;
        --bs-emphasis-color: #000;
        --bs-secondary-color: #444;
        --bs-secondary-bg: #f2f2f2;
        --bs-tertiary-bg: #ececec;
        --bs-border-color: #bbb;
        background: #fff !important;
        color: #000 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Bootstrap utility classes set colour directly, so they need saying explicitly. */
    .cc-print-area .text-muted[b-2tvzhz1hfs] {
        color: #444 !important;
    }

    /*
        Alerts carry their own theme variables, so in dark mode they print as muddy olive
        and slate blocks — and the warning one is the report's headline finding.
    */
    .cc-print-area .alert-warning[b-2tvzhz1hfs] {
        background: #fdf3dd !important;
        border-color: #e3c684 !important;
        color: #6b4c00 !important;
    }

    .cc-print-area .alert-success[b-2tvzhz1hfs] {
        background: #e9f7ef !important;
        border-color: #9dd3b0 !important;
        color: #14532d !important;
    }

    .cc-print-area .alert-info[b-2tvzhz1hfs] {
        background: #e8f2fb !important;
        border-color: #a8cbea !important;
        color: #0b3d63 !important;
    }

    .cc-print-area .card-body[b-2tvzhz1hfs] {
        padding: 0 !important;
    }

    .cc-kpi[b-2tvzhz1hfs],
    .cc-table[b-2tvzhz1hfs],
    .cc-row[b-2tvzhz1hfs],
    .cc-head[b-2tvzhz1hfs] {
        border-color: #bbb !important;
        color: #000 !important;
    }

    .cc-kpi[b-2tvzhz1hfs] {
        background: #fff !important;
    }

    .cc-head[b-2tvzhz1hfs] {
        background: #ececec !important;
        color: #222 !important;
    }

    .cc-kpi-label[b-2tvzhz1hfs],
    .cc-kpi-sub[b-2tvzhz1hfs],
    .cc-level-val[b-2tvzhz1hfs],
    .cc-level-pct[b-2tvzhz1hfs],
    .cc-devs[b-2tvzhz1hfs],
    .cc-kpi-of[b-2tvzhz1hfs] {
        color: #444 !important;
    }

    .cc-row-idle[b-2tvzhz1hfs] {
        color: #777 !important;
    }

    /* Browsers drop backgrounds when printing unless told otherwise; without this the
       usage bars and peak badges vanish and the charts read as empty rows. */
    .cc-bar[b-2tvzhz1hfs],
    .cc-bar-fill[b-2tvzhz1hfs],
    .cc-peak-badge[b-2tvzhz1hfs],
    .cc-head[b-2tvzhz1hfs] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cc-bar[b-2tvzhz1hfs] {
        background: #e4e4e4 !important;
    }

    .cc-bar-fill[b-2tvzhz1hfs] {
        background: #6c6c6c !important;
    }

    .cc-bar-fill.cc-bar-hot[b-2tvzhz1hfs] {
        background: #a4123a !important;
    }

    .cc-peak-badge[b-2tvzhz1hfs] {
        background: #e4e4e4 !important;
        color: #222 !important;
    }

    .cc-peak-badge.cc-peak-hot[b-2tvzhz1hfs] {
        background: #f4d0da !important;
        color: #7d0d2b !important;
    }

    /* Keep the two level charts side by side on paper — there is room at letter width. */
    .cc-split[b-2tvzhz1hfs] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Don't split a row, a tile or a heading across a page boundary. */
    .cc-row[b-2tvzhz1hfs],
    .cc-head[b-2tvzhz1hfs],
    .cc-kpi[b-2tvzhz1hfs],
    .cc-level-row[b-2tvzhz1hfs] {
        break-inside: avoid;
    }

    .cc-h[b-2tvzhz1hfs] {
        break-after: avoid;
    }

    .cc-table[b-2tvzhz1hfs] {
        break-inside: auto;
    }
}
/* /Components/Pages/Contacts/ContactImportModal.razor.rz.scp.css */
.cim-backdrop[b-wtzelqkru6] {
    background: rgba(0, 0, 0, 0.5);
}

.cim-preview[b-wtzelqkru6] {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color) !important;
    max-height: 18rem;
    overflow-y: auto;
}
/* /Components/Pages/Contacts/ContactList.razor.rz.scp.css */
.ct-page h4[b-51jrz39krx] {
    font-weight: 600;
}

.ct-card[b-51jrz39krx] {
    border: none;
    border-radius: 0.75rem;
}

.ct-toolbar[b-51jrz39krx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.fs-nano[b-51jrz39krx] {
    font-size: 0.72rem;
}

.ct-bulkbar[b-51jrz39krx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-bottom: 1px solid var(--bs-border-color);
}

.ct-check[b-51jrz39krx] {
    flex: 0 0 auto;
    margin-top: 0;
    cursor: pointer;
}

.ct-row[b-51jrz39krx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ct-row.selected[b-51jrz39krx] {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

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

.ct-row:hover[b-51jrz39krx] {
    background: var(--bs-tertiary-bg);
}

.ct-row.editing[b-51jrz39krx] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.ct-avatar[b-51jrz39krx] {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.8rem;
}

.ct-names[b-51jrz39krx] {
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    flex: 1 1 11rem;
}

.ct-names .fs-nano[b-51jrz39krx] {
    font-size: 0.8rem;
}

.ct-share[b-51jrz39krx] {
    flex: 0 1 auto;
    margin-left: auto;
}

.ct-share .form-check[b-51jrz39krx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ct-actions[b-51jrz39krx] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ct-edit-fields[b-51jrz39krx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1 1 24rem;
}

.ct-edit-fields input[b-51jrz39krx] {
    flex: 1 1 8rem;
    max-width: 12rem;
}
/* /Components/Pages/Devices/DeviceEditModal.razor.rz.scp.css */
.dem-backdrop[b-1u3fudrd9e] {
    background: rgba(0, 0, 0, 0.5);
}

.dem-inline-select[b-1u3fudrd9e] {
    width: auto;
    min-width: 8rem;
}

.dem-tabs .nav-link[b-1u3fudrd9e] {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
    cursor: pointer;
}

.dem-static[b-1u3fudrd9e] {
    background: var(--bs-tertiary-bg, #f6f7f9);
    min-height: calc(1.5em + 0.5rem + 2px);
}

.dem-cloud[b-1u3fudrd9e] {
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.dem-cred[b-1u3fudrd9e] {
    background: var(--bs-tertiary-bg, #f6f7f9);
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.dem-qr[b-1u3fudrd9e] {
    width: 300px;
    max-width: 100%;
    image-rendering: pixelated;
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.5rem;
}

.dem-codec-card .card-body[b-1u3fudrd9e] {
    max-height: 20rem;
    overflow-y: auto;
}

.dem-codec[b-1u3fudrd9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color, #f0f0f0);
    font-size: 0.85rem;
}

.dem-codec:last-child[b-1u3fudrd9e] {
    border-bottom: 0;
}

.dem-codec-btn[b-1u3fudrd9e] {
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
}

.dem-restriction-grid[b-1u3fudrd9e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.5rem 1.5rem;
    max-width: 40rem;
}

.dem-restriction[b-1u3fudrd9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
/* /Components/Pages/Devices/DeviceList.razor.rz.scp.css */
.dl-search[b-r5ovlqj89r] {
    min-width: 14rem;
}

.dl-card[b-r5ovlqj89r] {
    overflow: visible; /* action dropdowns must escape the card */
}

.dl-table thead th[b-r5ovlqj89r] {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #777);
    background: var(--bs-tertiary-bg, #f6f7f9);
    white-space: nowrap;
}

/* Blazor-controlled dropdowns: an invisible backdrop closes the menu on any
   outside click without needing document-level JS listeners. */
.dl-menu-backdrop[b-r5ovlqj89r] {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

/* Base positioning for the header "Add Device" menu, which sits outside the table and
   isn't clipped. The row "Actions" menus override this with an inline position:fixed
   style (nexusUi.menuPosition) so they escape the .table-responsive overflow clip —
   whose overflow-x:auto also clips the y-axis — and flip up when short on room below.
   The max-height keeps a tall menu on-screen (it scrolls internally). */
.dl-menu[b-r5ovlqj89r] {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1050;
    min-width: 13rem;
    max-height: min(70vh, 22rem);
    overflow-y: auto;
}

.dl-reg-table td:first-child[b-r5ovlqj89r] {
    white-space: nowrap;
}

.dl-backdrop[b-r5ovlqj89r] {
    background: rgba(0, 0, 0, 0.5);
}

/* ---- multi-select delete ---- */

.dl-check-col[b-r5ovlqj89r] {
    width: 2.5rem;
    text-align: center;
}

.dl-row-sel[b-r5ovlqj89r] {
    background: color-mix(in srgb, var(--bs-danger) 8%, transparent);
}

.dl-bulkbar[b-r5ovlqj89r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--bs-danger) 35%, var(--bs-border-color));
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bs-danger) 8%, transparent);
}

.dl-bulk-list[b-r5ovlqj89r] {
    max-height: 14rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem 0.75rem;
    list-style: none;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--bs-tertiary-bg);
}

.dl-bulk-list li[b-r5ovlqj89r] {
    padding: 0.15rem 0;
}

@media (max-width: 767px) {
    .dl-search[b-r5ovlqj89r] {
        min-width: 9rem;
    }
}

/* ---- phones: table rows become cards ---- */

/* Below md only three of the eight columns fit and the rest sat behind a sideways
   scroll nobody discovers. Keep the same markup but re-lay each row as a small
   card grid: type + status + Actions on top, then name, then the detail lines.
   Cells whose value is just "-" (dl-na) disappear instead of showing labeled
   dashes. Desktop rendering is untouched. */
@media (max-width: 767.98px) {
    .dl-table thead[b-r5ovlqj89r] {
        display: none;
    }

    .dl-table[b-r5ovlqj89r],
    .dl-table tbody[b-r5ovlqj89r] {
        display: block;
    }

    .dl-table tr[b-r5ovlqj89r] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "check type    enabled actions"
            "check name    name    name"
            "check mac     mac     mac"
            "check owner   owner   owner"
            "check ip      ip      ip";
        align-items: center;
        gap: 0.1rem 0.6rem;
        padding: 0.65rem 0.75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .dl-table td[b-r5ovlqj89r] {
        display: block;
        border: 0;
        padding: 0;
        min-width: 0;
    }

    .dl-table .dl-check-col[b-r5ovlqj89r] { grid-area: check; }
    .dl-table .dl-c-type[b-r5ovlqj89r]    { grid-area: type; }
    .dl-table .dl-c-name[b-r5ovlqj89r]    { grid-area: name; }
    .dl-table .dl-c-mac[b-r5ovlqj89r]     { grid-area: mac; }
    .dl-table .dl-c-owner[b-r5ovlqj89r]   { grid-area: owner; }
    .dl-table .dl-c-enabled[b-r5ovlqj89r] { grid-area: enabled; }
    .dl-table .dl-c-ip[b-r5ovlqj89r]      { grid-area: ip; }
    .dl-table .dl-c-actions[b-r5ovlqj89r] { grid-area: actions; }

    .dl-table .dl-na[b-r5ovlqj89r] {
        display: none;
    }

    /* Touch-scrolling runs the finger over rows and mobile browsers treat that as
       :hover + tap-highlight, flashing whole cards mid-scroll. The rows aren't
       clickable (actions live in the dropdown), so hover feedback means nothing
       here — kill both. Desktop keeps its normal table-hover. */
    .dl-table tr[b-r5ovlqj89r] {
        -webkit-tap-highlight-color: transparent;
    }

    .dl-table > tbody > tr:hover > *[b-r5ovlqj89r] {
        --bs-table-bg-state: transparent;
        --bs-table-accent-bg: transparent;
        --bs-table-color-state: inherit;
    }

    .dl-table .dl-c-mac[b-r5ovlqj89r],
    .dl-table .dl-c-owner[b-r5ovlqj89r] {
        font-size: 0.82rem;
        color: var(--bs-secondary-color);
    }

    .dl-table .dl-c-mac[b-r5ovlqj89r]::before {
        content: "MAC ";
        color: var(--bs-tertiary-color);
    }

    .dl-table .dl-c-owner[b-r5ovlqj89r]::before {
        content: "Owner ";
        color: var(--bs-tertiary-color);
    }
}
/* /Components/Pages/MainNumbers/MainNumbersBasic.razor.rz.scp.css */
.mn-page h4[b-iece8zfyud] {
    font-weight: 600;
}

.mn-tabs .nav-link[b-iece8zfyud] {
    color: var(--bs-body-color);
    font-weight: 500;
    padding: 0.4rem 1rem;
}

.mn-tabs .nav-link.active[b-iece8zfyud] {
    background: var(--bs-primary);
    color: #fff;
}

.mn-subtabs .nav-link[b-iece8zfyud] {
    color: var(--bs-body-color);
    font-size: 0.875rem;
    padding: 0.3rem 0.85rem;
}

.mn-subtabs .nav-link.active[b-iece8zfyud] {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
}

.mn-card[b-iece8zfyud] {
    border: none;
    border-radius: 0.75rem;
}

/* ---- numbers ---- */

.mn-number-row[b-iece8zfyud] {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-tertiary-bg);
}

/* ---- hours mode choice + routing option cards ---- */

.mn-choice-row[b-iece8zfyud] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mn-choice[b-iece8zfyud],
.mn-route-option[b-iece8zfyud] {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1.5px solid var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    margin-bottom: 0;
}

.mn-choice:hover[b-iece8zfyud],
.mn-route-option:hover[b-iece8zfyud] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.mn-choice.active[b-iece8zfyud],
.mn-route-option.active[b-iece8zfyud] {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.mn-choice input[b-iece8zfyud],
.mn-route-option input[b-iece8zfyud] {
    display: none;
}

.mn-choice-title[b-iece8zfyud],
.mn-route-title[b-iece8zfyud] {
    font-weight: 600;
    font-size: 0.925rem;
}

.mn-choice-sub[b-iece8zfyud],
.mn-route-sub[b-iece8zfyud] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.mn-route-options[b-iece8zfyud] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.6rem;
}

.mn-route-config[b-iece8zfyud] {
    max-width: 30rem;
}

.mn-dest[b-iece8zfyud] {
    max-width: 30rem;
}

/* ---- per-day hour rows ---- */

.mn-day-row[b-iece8zfyud] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.mn-day-row.is-off[b-iece8zfyud] {
    background: var(--bs-tertiary-bg);
}

.mn-day-name[b-iece8zfyud] {
    width: 11rem;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
}

.mn-day-times[b-iece8zfyud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mn-day-times input[type="time"][b-iece8zfyud] {
    width: 8rem;
}

.mn-day-state[b-iece8zfyud] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.mn-lunch-row[b-iece8zfyud] {
    margin-top: 0.5rem;
    border-top: 2px solid var(--bs-border-color);
}

/* Phones: the row is wider than the screen (11rem label + two 8rem time inputs),
   which left the closing time unreachable. Wrap instead — day + Open/Closed on the
   first line, the time window on its own line below. */
@media (max-width: 575.98px) {
    .mn-day-row[b-iece8zfyud] {
        flex-wrap: wrap;
        gap: 0.35rem 0.75rem;
    }

    .mn-day-name[b-iece8zfyud] {
        width: auto;
    }

    .mn-day-state[b-iece8zfyud] {
        order: 1;
        margin-left: auto;
    }

    .mn-day-times[b-iece8zfyud] {
        order: 2;
        flex-basis: 100%;
        min-width: 0; /* it's a flex item too — without this its intrinsic width (two
                         native time inputs) beats flex-basis and overflows the row */
        padding-left: 1.65rem; /* line the times up under the day name, past the checkbox */
    }

    .mn-day-times input[type="time"][b-iece8zfyud] {
        width: auto;
        flex: 1 1 6rem;
        min-width: 0;
    }
}

/* ---- holidays ---- */

.mn-holiday-row[b-iece8zfyud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.mn-holiday-name[b-iece8zfyud] {
    flex: 1 1 11rem;
    min-width: 9rem;
}

.mn-holiday-month[b-iece8zfyud] {
    width: 8.5rem;
    flex: 0 0 auto;
}

.mn-holiday-day[b-iece8zfyud],
.mn-holiday-ordinal[b-iece8zfyud] {
    width: 6rem;
    flex: 0 0 auto;
}

.mn-holiday-wday[b-iece8zfyud] {
    width: 8rem;
    flex: 0 0 auto;
}

.mn-holiday-time[b-iece8zfyud] {
    width: 7.5rem;
    flex: 0 0 auto;
}

/* ---- call path selector ---- */

.mn-paths[b-iece8zfyud] {
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.mn-path-pill[b-iece8zfyud] {
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 2rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.mn-path-pill:hover[b-iece8zfyud] {
    background: var(--bs-secondary-bg);
}

.mn-path-pill.active[b-iece8zfyud] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.mn-holiday-row > .form-check[b-iece8zfyud] {
    padding-top: 0.3rem;
    margin-left: 0.25rem;
}

.mn-holiday-off > *:not(.form-check):not(button)[b-iece8zfyud] {
    opacity: 0.55;
}
/* /Components/Pages/MainNumbers/MenuEditModal.razor.rz.scp.css */
.menu-backdrop[b-o27mfsyd1m] {
    background: rgba(15, 23, 42, 0.55);
}

.menu-route-row[b-o27mfsyd1m] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.45rem;
    background: var(--bs-tertiary-bg);
}

.menu-route-press[b-o27mfsyd1m] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    flex: 0 0 auto;
}

.menu-route-key[b-o27mfsyd1m] {
    flex: 0 0 auto;
    min-width: 4.25rem;
    text-align: center;
    font-weight: 700;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
}

.menu-route-dest[b-o27mfsyd1m] {
    flex: 1 1 auto;
}

.menu-accordion[b-o27mfsyd1m] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.menu-accordion summary[b-o27mfsyd1m] {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    user-select: none;
}

.menu-accordion[open] summary[b-o27mfsyd1m] {
    border-bottom: 1px solid var(--bs-border-color);
}
/* /Components/Pages/Messaging/ConversationListPanel.razor.rz.scp.css */
.convo-list-wrap[b-4p88x58sdc] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.convo-row[b-4p88x58sdc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.12s ease;
}

.convo-row:hover[b-4p88x58sdc] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

.convo-row.active[b-4p88x58sdc] {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.convo-avatar[b-4p88x58sdc] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: hsl(var(--avatar-hue, 210), 42%, 48%);
    user-select: none;
}

.convo-avatar .sa-icon[b-4p88x58sdc] {
    width: 1.1rem;
    height: 1.1rem;
    fill: rgba(255, 255, 255, 0.9);
}

.convo-main[b-4p88x58sdc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.convo-top[b-4p88x58sdc] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.convo-name[b-4p88x58sdc] {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-age[b-4p88x58sdc] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #888);
}

.convo-bottom[b-4p88x58sdc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.convo-preview[b-4p88x58sdc] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-you[b-4p88x58sdc] {
    opacity: 0.8;
}

.convo-unread[b-4p88x58sdc] {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}
/* /Components/Pages/Messaging/MessageComposer.razor.rz.scp.css */
.composer[b-0jw6r1hf0x] {
    flex-shrink: 0;
    border-top: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
    padding: 0.6rem 1rem;
}

.composer-bar[b-0jw6r1hf0x] {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.composer-input[b-0jw6r1hf0x] {
    flex: 1;
    min-height: 2.4rem;
    max-height: 8rem;
    resize: none;
    field-sizing: content; /* auto-grow on modern browsers; harmless elsewhere */
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--bs-border-color, #ddd);
    border-radius: 1.2rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.92rem;
    line-height: 1.35;
    outline: none;
}

.composer-input:focus[b-0jw6r1hf0x] {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
}

.composer-btn[b-0jw6r1hf0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
}

.composer-btn:hover[b-0jw6r1hf0x] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
}

.composer-btn.is-disabled[b-0jw6r1hf0x] {
    opacity: 0.45;
    pointer-events: none;
}

.composer-btn .sa-icon[b-0jw6r1hf0x] {
    width: 1.15rem;
    height: 1.15rem;
}

.composer-send[b-0jw6r1hf0x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.composer-send:hover:not(:disabled)[b-0jw6r1hf0x] {
    transform: scale(1.05);
}

.composer-send:disabled[b-0jw6r1hf0x] {
    opacity: 0.45;
    cursor: default;
}

.composer-send .sa-icon[b-0jw6r1hf0x] {
    width: 1.05rem;
    height: 1.05rem;
    fill: #fff;
}

.composer-attachment[b-0jw6r1hf0x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.6rem;
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.03));
}

.composer-thumb[b-0jw6r1hf0x] {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.composer-file-icon[b-0jw6r1hf0x] {
    font-size: 1.8rem;
    color: var(--bs-danger, #d33);
}

.composer-attachment-info[b-0jw6r1hf0x] {
    flex: 1;
    min-width: 0;
}

.composer-attachment-name[b-0jw6r1hf0x] {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer-attachment-size[b-0jw6r1hf0x] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #888);
}

.composer-error[b-0jw6r1hf0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.1);
    color: var(--bs-danger, #c33);
    font-size: 0.8rem;
}
/* /Components/Pages/Messaging/MessageThread.razor.rz.scp.css */
.msg-thread[b-0ocyqx25up] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    background: var(--bs-tertiary-bg, #f6f7f9);
}

.msg-thread-empty[b-0ocyqx25up] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

.msg-day[b-0ocyqx25up] {
    display: flex;
    justify-content: center;
    margin: 0.9rem 0 0.5rem;
}

.msg-day span[b-0ocyqx25up] {
    padding: 0.15rem 0.7rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
    color: var(--bs-secondary-color, #777);
    font-size: 0.72rem;
    font-weight: 600;
}

.msg-row[b-0ocyqx25up] {
    display: flex;
    flex-direction: column;
    margin-top: 0.12rem;
}

.msg-row.grp-start[b-0ocyqx25up] {
    margin-top: 0.6rem;
}

.msg-bubble[b-0ocyqx25up] {
    max-width: min(70%, 34rem);
    width: fit-content;
    padding: 0.45rem 0.8rem;
    border-radius: 1.05rem;
    font-size: 0.92rem;
    line-height: 1.35;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.msg-bubble-media[b-0ocyqx25up] {
    padding: 0.25rem;
    background: transparent !important;
}

/* Inbound: left, neutral */
.msg-in .msg-bubble[b-0ocyqx25up] {
    align-self: flex-start;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-bottom-left-radius: 0.35rem;
}

.msg-in.grp-end .msg-bubble[b-0ocyqx25up] {
    border-bottom-left-radius: 1.05rem;
}

.msg-in.grp-start .msg-bubble[b-0ocyqx25up] {
    border-top-left-radius: 1.05rem;
}

.msg-in:not(.grp-start) .msg-bubble[b-0ocyqx25up] {
    border-top-left-radius: 0.35rem;
}

/* Outbound: right, primary */
.msg-out .msg-bubble[b-0ocyqx25up] {
    align-self: flex-end;
    background: var(--bs-primary);
    color: #fff;
    border-bottom-right-radius: 0.35rem;
}

.msg-out.grp-end .msg-bubble[b-0ocyqx25up] {
    border-bottom-right-radius: 1.05rem;
}

.msg-out:not(.grp-start) .msg-bubble[b-0ocyqx25up] {
    border-top-right-radius: 0.35rem;
}

/* Bubble + its info button ride one flex line; the bubble's old align-self job
   (left for inbound, right for outbound) moves to the line's justify-content.
   Outbound reverses so the button sits on the bubble's inner side both ways. */
.msg-line[b-0ocyqx25up] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
}

.msg-out .msg-line[b-0ocyqx25up] {
    flex-direction: row-reverse;
}

/* Inconspicuous per-message metadata trigger: invisible until the row is hovered
   (desktop) — touch has no hover, so there it idles at low opacity instead. */
.msg-info[b-0ocyqx25up] {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 0.15rem 0.3rem;
    font-size: 0.78rem;
    line-height: 1;
    color: var(--bs-secondary-color, #999);
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.msg-row:hover .msg-info[b-0ocyqx25up],
.msg-info:focus-visible[b-0ocyqx25up] {
    opacity: 0.55;
}

.msg-info:hover[b-0ocyqx25up] {
    opacity: 1;
}

@media (pointer: coarse) {
    .msg-info[b-0ocyqx25up] {
        opacity: 0.3;
        position: relative;
    }

    /* Same invisible hit-area extension the app's other small icons use. */
    .msg-info[b-0ocyqx25up]::before {
        content: "";
        position: absolute;
        inset: -8px;
    }
}

.msg-time[b-0ocyqx25up] {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--bs-secondary-color, #999);
}

.msg-in .msg-time[b-0ocyqx25up] {
    align-self: flex-start;
    padding-left: 0.4rem;
}

.msg-out .msg-time[b-0ocyqx25up] {
    align-self: flex-end;
    padding-right: 0.4rem;
}

/* MMS images inside bubbles */
.msg-bubble[b-0ocyqx25up]  .mms-image,
.msg-bubble[b-0ocyqx25up]  .mms-placeholder {
    max-width: 16rem;
    border-radius: 0.8rem;
}

.msg-bubble[b-0ocyqx25up]  .mms-image {
    display: block;
    max-height: 20rem;
    object-fit: cover;
}
/* /Components/Pages/Messaging/Messaging.razor.rz.scp.css */
.msgr-shell[b-qy9x97da0g] {
    display: flex;
    width: 100%;
    height: calc(100vh - (var(--app-header-height, 4.125rem) + 56px));
    min-height: 24rem;
    overflow: hidden;
}

/* ---- side panel ---- */

.msgr-side[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* smartapp's slide-on-mobile hides the panel by shifting it left by
       --sidepanel-width (default 15rem) — it MUST match the real width, or the
       difference stays on-screen as a clipped sliver over the thread. */
    --sidepanel-width: 24rem;
    width: var(--sidepanel-width);
    max-width: 100%;
    border-right: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
}

.msgr-side-head[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0.9rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
}

.msgr-side-title[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.msgr-side-list[b-qy9x97da0g] {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
}

.msgr-single-number[b-qy9x97da0g] {
    padding: 0 0.1rem;
}

.msgr-search-clear[b-qy9x97da0g] {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #999);
    cursor: pointer;
}

/* ---- compose picker ---- */

.msgr-compose[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.msgr-compose-results[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
}

.msgr-compose-row[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
}

.msgr-compose-row:hover[b-qy9x97da0g] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

/* ---- thread column ---- */

.msgr-main[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--bs-tertiary-bg, #f6f7f9);
}

/* Takes the thread's flex slot so the "new message" pill can float over it. */
.msgr-thread-wrap[b-qy9x97da0g] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.msgr-thread-wrap[b-qy9x97da0g]  .msg-thread {
    flex: 1;
    min-height: 0;
}

/* "Load older messages" — floats over the top of the thread, counterpart to the
   new-message pill at the bottom. Muted styling: it's a history control, not an alert. */
.msgr-loadolder[b-qy9x97da0g] {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 2rem;
    padding: 0.3rem 0.9rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);
}

.msgr-loadolder:hover:not(:disabled)[b-qy9x97da0g] {
    color: var(--bs-body-color, #212529);
    border-color: var(--bs-secondary-color, #6c757d);
}

.msgr-newmsg-pill[b-qy9x97da0g] {
    position: absolute;
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    border: none;
    border-radius: 2rem;
    padding: 0.35rem 0.95rem;
    background: #0d6efd;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.35);
    animation: msgr-pill-in-b-qy9x97da0g 0.18s ease-out;
}

.msgr-newmsg-pill:hover[b-qy9x97da0g] {
    background: #0b5ed7;
}

@keyframes msgr-pill-in-b-qy9x97da0g {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(0.5rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.msgr-empty[b-qy9x97da0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 2rem;
}

.msgr-thread-head[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
}

.msgr-head-avatar[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: hsl(var(--avatar-hue, 210), 42%, 48%);
    user-select: none;
}

.msgr-head-avatar .sa-icon[b-qy9x97da0g] {
    width: 1.05rem;
    height: 1.05rem;
    fill: rgba(255, 255, 255, 0.9);
}

.msgr-head-info[b-qy9x97da0g] {
    min-width: 0;
}

.msgr-head-name[b-qy9x97da0g] {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msgr-head-sub[b-qy9x97da0g] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}

.msgr-addcontact[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
}

.msgr-addcontact .form-control[b-qy9x97da0g] {
    width: 10rem;
    flex: 0 1 auto;
}

/* ---- shared bits ---- */

.msgr-icon-btn[b-qy9x97da0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
}

.msgr-icon-btn:hover[b-qy9x97da0g] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
    color: var(--bs-body-color);
}

/* Mobile: the side panel becomes the SmartAdmin off-canvas slide (classes handled globally). */
@media (max-width: 991.98px) {
    .msgr-side[b-qy9x97da0g] {
        --sidepanel-width: 20rem;
    }
}

/* ---- message-details modal ---- */

.msgr-info-backdrop[b-qy9x97da0g] {
    background: rgba(15, 23, 42, 0.55);
}

.msgr-info-list dt[b-qy9x97da0g] {
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.msgr-info-list dd[b-qy9x97da0g] {
    overflow-wrap: anywhere;
}

/* GUID / row id — mono so it reads as an identifier, wraps rather than clips. */
.msgr-info-guid[b-qy9x97da0g] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.82rem;
}

.msgr-info-copy[b-qy9x97da0g] {
    border: 0;
    background: transparent;
    padding: 0 0.25rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.msgr-info-copy:hover[b-qy9x97da0g] {
    color: var(--bs-primary);
}
/* /Components/Pages/Messaging/SmsAccessModal.razor.rz.scp.css */
.smsacc-backdrop[b-o9xq5n9osz] {
    background-color: rgba(0, 0, 0, 0.5);
}

.smsacc-row[b-o9xq5n9osz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
}

.smsacc-row:last-child[b-o9xq5n9osz] {
    border-bottom: 0;
}

.smsacc-info[b-o9xq5n9osz] {
    min-width: 0;
}

.smsacc-name[b-o9xq5n9osz] {
    font-weight: 600;
    font-size: 0.9rem;
}

.smsacc-sub[b-o9xq5n9osz] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}
/* /Components/Pages/Messaging/SmsUsageModal.razor.rz.scp.css */
.usage-backdrop[b-zu2297f5rq] {
    background-color: rgba(0, 0, 0, 0.5);
}

.usage-period-label[b-zu2297f5rq] {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--bs-secondary-color, #777);
    margin-bottom: 0.75rem;
}

.usage-tiles[b-zu2297f5rq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.usage-tile[b-zu2297f5rq] {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
}

.usage-tile-primary[b-zu2297f5rq] {
    border-color: rgba(var(--bs-primary-rgb), 0.35);
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.usage-tile-value[b-zu2297f5rq] {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.usage-tile-primary .usage-tile-value[b-zu2297f5rq] {
    color: var(--bs-primary);
}

.usage-tile-label[b-zu2297f5rq] {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.15rem;
}

.usage-tile-sub[b-zu2297f5rq] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #999);
}

.usage-table th[b-zu2297f5rq] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #888);
    white-space: nowrap;
}

.usage-table td[b-zu2297f5rq] {
    white-space: nowrap;
}

.usage-row-current[b-zu2297f5rq] {
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.usage-footnote[b-zu2297f5rq] {
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--bs-border-color, #eee);
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #999);
}
/* /Components/Pages/Messaging/ThreadCallButton.razor.rz.scp.css */
.callbtn-wrap[b-esqaqzhxx0] {
    position: relative;
}

/* Green call trigger in the thread header. Fully self-styled — the shared
   .msgr-icon-btn styles are scoped to Messaging.razor and don't reach in here,
   which is what left the browser's default button border showing. */
.callbtn-trigger[b-esqaqzhxx0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    outline: none;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-success, #1dc9b7);
    font-size: 1.05rem;
    cursor: pointer;
}

.callbtn-trigger:hover[b-esqaqzhxx0] {
    color: var(--bs-success, #1dc9b7);
    background: rgba(var(--bs-success-rgb, 29, 201, 183), 0.12);
}

.callbtn-trigger:focus-visible[b-esqaqzhxx0] {
    box-shadow: 0 0 0 0.15rem rgba(var(--bs-success-rgb, 29, 201, 183), 0.35);
}

.callbtn-panel[b-esqaqzhxx0] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 1055;
    width: 17rem;
    padding: 0.85rem;
    border: 1px solid var(--bs-border-color, #e5e5e5);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.callbtn-title[b-esqaqzhxx0] {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.callbtn-sub[b-esqaqzhxx0] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #888);
    margin-bottom: 0.2rem;
}

.callbtn-label[b-esqaqzhxx0] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #888);
    margin-top: 0.35rem;
}

.callbtn-single[b-esqaqzhxx0] {
    font-size: 0.88rem;
    padding: 0.25rem 0;
}

.callbtn-hint[b-esqaqzhxx0] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #999);
}

.callbtn-status[b-esqaqzhxx0] {
    margin-top: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.4rem;
    font-size: 0.8rem;
}

.callbtn-status.is-ok[b-esqaqzhxx0] {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.1);
    color: var(--bs-success, #198754);
}

.callbtn-status.is-error[b-esqaqzhxx0] {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.1);
    color: var(--bs-danger, #dc3545);
}

.callbtn-actions[b-esqaqzhxx0] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
/* /Components/Pages/RingGroups/AddRingGroupModal.razor.rz.scp.css */
.rg-add-backdrop[b-mstu7kt0rs] {
    background: rgba(15, 23, 42, 0.55);
}

.fs-nano[b-mstu7kt0rs] {
    font-size: 0.72rem;
}

.rg-add-select[b-mstu7kt0rs] {
    min-width: 13rem;
}

/* ---- member rows (duplicated from RingGroupList.razor.css — scoped styles
   don't reach child components) ---- */

.rg-member-row[b-mstu7kt0rs] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.rg-member-name[b-mstu7kt0rs] {
    flex: 1 1 11rem;
    font-weight: 500;
    min-width: 10rem;
}

.rg-member-window[b-mstu7kt0rs] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 2 1 16rem;
}

.rg-member-window input[type="number"][b-mstu7kt0rs] {
    width: 5.25rem;
}

.rg-window-bar[b-mstu7kt0rs] {
    position: relative;
    flex: 1 1 6rem;
    height: 0.45rem;
    margin-bottom: 0.85rem;
    background: var(--bs-border-color);
    border-radius: 1rem;
    min-width: 4rem;
}

.rg-window-fill[b-mstu7kt0rs] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--bs-primary);
    border-radius: 1rem;
}

.rg-member-actions[b-mstu7kt0rs] {
    display: flex;
    gap: 0.35rem;
}
/* /Components/Pages/RingGroups/RingGroupList.razor.rz.scp.css */
.rg-page h4[b-rwap1jxz5s] {
    font-weight: 600;
}

.rg-card[b-rwap1jxz5s] {
    border: none;
    border-radius: 0.75rem;
}

.rg-table thead th[b-rwap1jxz5s] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
    padding: 0.65rem 1rem;
}

.rg-table tbody td[b-rwap1jxz5s] {
    padding: 0.65rem 1rem;
    cursor: pointer;
}

.rg-row-active[b-rwap1jxz5s] {
    background: rgba(var(--bs-primary-rgb), 0.1);
}

.rg-subtabs .nav-link[b-rwap1jxz5s] {
    color: var(--bs-body-color);
    font-size: 0.875rem;
    padding: 0.3rem 0.85rem;
}

.rg-subtabs .nav-link.active[b-rwap1jxz5s] {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
}

.fs-nano[b-rwap1jxz5s] {
    font-size: 0.72rem;
}

.rg-ext-input[b-rwap1jxz5s] {
    width: 6.5rem;
    text-align: center;
}

.rg-add-select[b-rwap1jxz5s] {
    min-width: 13rem;
}

/* ---- member rows (duplicated in AddRingGroupModal.razor.css — scoped styles
   don't reach child components) ---- */

.rg-member-row[b-rwap1jxz5s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bs-tertiary-bg);
}

.rg-member-name[b-rwap1jxz5s] {
    flex: 1 1 11rem;
    font-weight: 500;
    min-width: 10rem;
}

.rg-member-window[b-rwap1jxz5s] {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 2 1 16rem;
}

.rg-member-window input[type="number"][b-rwap1jxz5s] {
    width: 5.25rem;
}

.rg-window-bar[b-rwap1jxz5s] {
    position: relative;
    flex: 1 1 6rem;
    height: 0.45rem;
    margin-bottom: 0.85rem;
    background: var(--bs-border-color);
    border-radius: 1rem;
    min-width: 4rem;
}

.rg-window-fill[b-rwap1jxz5s] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--bs-primary);
    border-radius: 1rem;
}

.rg-member-actions[b-rwap1jxz5s] {
    display: flex;
    gap: 0.35rem;
}

/* ---- phones: master/detail swap (same pattern as the Users page) ---- */

/* Below lg the columns stack, burying the editor below the whole group list —
   tapping a group looked like it did nothing. Show one pane at a time instead;
   the editor brings its own "All groups" back button (hidden on desktop). */
@media (max-width: 991.98px) {
    .rg-row-wrap.has-selection .rg-col-list[b-rwap1jxz5s] {
        display: none;
    }
}

.rg-back[b-rwap1jxz5s] {
    text-decoration: none;
    font-weight: 500;
}
/* /Components/Pages/SmsRegistration/SmsRegistration.razor.rz.scp.css */
.sr-page h4[b-bpd5b4n4xc] {
    font-weight: 600;
}

.sr-card[b-bpd5b4n4xc] {
    border: none;
    border-radius: 0.75rem;
}

.sr-hint[b-bpd5b4n4xc] {
    font-size: 0.72rem;
    line-height: 1.35;
}

/* ---- pinned help-guide banner ---- */

.sr-guide-banner[b-bpd5b4n4xc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--bs-primary), #3b8bfd);
    color: #fff;
    box-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.25);
}

.sr-guide-icon[b-bpd5b4n4xc] {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1.15rem;
}

.sr-guide-text[b-bpd5b4n4xc] {
    flex: 1 1 18rem;
}

.sr-guide-text .small[b-bpd5b4n4xc] {
    opacity: 0.9;
}

.sr-guide-actions[b-bpd5b4n4xc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sr-state-icon[b-bpd5b4n4xc] {
    width: 4rem;
    height: 4rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
}

.sr-fact-row[b-bpd5b4n4xc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sr-fact[b-bpd5b4n4xc] {
    flex: 1 1 11rem;
    min-width: 10rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--bs-tertiary-bg);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sr-fact-label[b-bpd5b4n4xc] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}

.sr-fact-value[b-bpd5b4n4xc] {
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Users/AddUserModal.razor.rz.scp.css */
.aum-backdrop[b-lc0sy0p8s7] {
    background: rgba(0, 0, 0, 0.5);
}
/* /Components/Pages/Users/UserList.razor.rz.scp.css */
/* Colors use Bootstrap theme variables throughout — the portal's dark mode flips
   data-bs-theme on the root, and hard-coded light hexes turn white-on-white. */

.um-search[b-6bbh2onsnp] {
    width: 15rem;
}

.um-card[b-6bbh2onsnp] {
    border: none;
    border-radius: 0.75rem;
}

.um-purple[b-6bbh2onsnp] {
    color: #6f42c1;
}

/* ---- directory ---- */

.um-dir-head[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.um-dir[b-6bbh2onsnp] {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
}

.um-dir-row[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 1rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    cursor: pointer;
}

.um-dir-row:last-child[b-6bbh2onsnp] {
    border-bottom: none;
}

.um-dir-row:hover[b-6bbh2onsnp] {
    background: var(--bs-tertiary-bg);
}

.um-dir-row.selected[b-6bbh2onsnp] {
    background: rgba(var(--bs-primary-rgb), 0.1);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.um-avatar[b-6bbh2onsnp] {
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-weight: 600;
    font-size: 0.8rem;
}

.um-avatar-lg[b-6bbh2onsnp] {
    width: 3rem;
    height: 3rem;
    font-size: 1.05rem;
}

.um-dir-names[b-6bbh2onsnp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.um-dir-sub[b-6bbh2onsnp] {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon strip wraps into tidy right-aligned rows instead of squishing the name —
   capped at roughly four icons per row. */
.um-dir-icons[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    flex: 0 0 auto;
    max-width: 5.9rem;
    font-size: 0.8rem;
}

/* Icon + count sit side by side as a small chip — an overlaid corner badge
   covered the glyph and read poorly at this size. */
.um-dev-icon[b-6bbh2onsnp] {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
}

.um-dev-count[b-6bbh2onsnp] {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.14rem 0.32rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ---- detail panel ---- */

.um-detail-head[b-6bbh2onsnp] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.um-detail-names[b-6bbh2onsnp] {
    min-width: 0;
    flex: 1 1 auto;
}

.um-detail-names h5[b-6bbh2onsnp] {
    font-weight: 600;
}

.um-detail-chips[b-6bbh2onsnp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.um-detail-actions[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.um-tabs[b-6bbh2onsnp] {
    gap: 0.25rem;
}

.um-tabs .nav-link[b-6bbh2onsnp] {
    color: var(--bs-body-color);
    font-size: 0.875rem;
    padding: 0.35rem 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.um-tabs .nav-link.active[b-6bbh2onsnp] {
    background: var(--bs-primary);
    color: #fff;
}

.um-dot[b-6bbh2onsnp] {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--bs-success);
    display: inline-block;
}

.um-tabs .nav-link.active .um-dot[b-6bbh2onsnp] {
    background: #fff;
}

/* ---- features accordion ---- */

.um-feature-row[b-6bbh2onsnp] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.6rem;
    margin-bottom: 0.55rem;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
}

.um-feature-row.open[b-6bbh2onsnp] {
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

.um-feature-head[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: none;
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
    cursor: pointer;
}

.um-feature-head:hover[b-6bbh2onsnp] {
    background: var(--bs-secondary-bg);
}

.um-feature-icon[b-6bbh2onsnp] {
    width: 1.4rem;
    text-align: center;
    color: var(--bs-primary);
}

.um-feature-label[b-6bbh2onsnp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.um-feature-sub[b-6bbh2onsnp] {
    font-size: 0.75rem;
}

.um-feature-body[b-6bbh2onsnp] {
    padding: 0.35rem 0.9rem 0.9rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}

/* ---- find me follow me rows ---- */

.um-fmfm-row[b-6bbh2onsnp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.um-fmfm-row.silent[b-6bbh2onsnp] {
    background: var(--bs-tertiary-bg);
    opacity: 0.75;
}

.um-fmfm-name[b-6bbh2onsnp] {
    flex: 1 1 10rem;
    font-weight: 500;
    min-width: 9rem;
}

.um-fmfm-timing[b-6bbh2onsnp] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.um-fmfm-timing input[b-6bbh2onsnp] {
    width: 5rem;
}

/* ---- misc ---- */

.um-ext-input[b-6bbh2onsnp] {
    max-width: 10rem;
}

.um-backdrop[b-6bbh2onsnp] {
    background: rgba(15, 23, 42, 0.55);
}

/* ---- phones: master/detail swap ---- */

/* Below lg the two columns stack, which buried the detail panel underneath the whole
   directory — tapping a user appeared to do nothing (the panel rendered ~950px down).
   Instead show ONE pane at a time: the directory until a user is picked, then the
   detail full-width with its own "All users" back button (hidden on desktop). */
@media (max-width: 991.98px) {
    .um-row.has-selection .um-col-dir[b-6bbh2onsnp] {
        display: none;
    }

    .um-row:not(.has-selection) .um-col-detail[b-6bbh2onsnp] {
        display: none;
    }

    /* The header row (avatar · name · 3 action buttons) doesn't fit — the buttons
       squeezed the name to one letter per line. Let the actions wrap onto their
       own line under the name instead. */
    .um-detail-head[b-6bbh2onsnp] {
        flex-wrap: wrap;
    }

    .um-detail-names[b-6bbh2onsnp] {
        flex: 1 1 min(14rem, 60%);
    }

    .um-detail-actions[b-6bbh2onsnp] {
        flex-basis: 100%;
        justify-content: flex-end;
    }
}

.um-back[b-6bbh2onsnp] {
    text-decoration: none;
    font-weight: 500;
}
/* /Components/Pages/Voicemail/VoicemailAccessModal.razor.rz.scp.css */
.vmacc-backdrop[b-hebytiitk8] {
    background-color: rgba(0, 0, 0, 0.5);
}

.vmacc-row[b-hebytiitk8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
}

.vmacc-row:last-child[b-hebytiitk8] {
    border-bottom: 0;
}

.vmacc-info[b-hebytiitk8] {
    min-width: 0;
}

.vmacc-name[b-hebytiitk8] {
    font-weight: 600;
    font-size: 0.9rem;
}

.vmacc-sub[b-hebytiitk8] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}
/* /Components/Pages/Voicemail/VoicemailList.razor.rz.scp.css */
.vm-shell[b-4gyoy1rxl8] {
    display: flex;
    width: 100%;
    height: calc(100vh - (var(--app-header-height, 4.125rem) + 56px));
    min-height: 24rem;
    overflow: hidden;
}

/* ---- mailbox side panel ---- */

.vm-side[b-4gyoy1rxl8] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* smartapp's slide-on-mobile hides the panel by shifting it left by
       --sidepanel-width (default 15rem) — it MUST match the real width, or the
       difference stays on-screen as a clipped sliver over the messages. */
    --sidepanel-width: 22rem;
    width: var(--sidepanel-width);
    max-width: 100%;
    border-right: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
}

.vm-side-head[b-4gyoy1rxl8] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0.9rem 0.6rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
}

.vm-side-title[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vm-side-list[b-4gyoy1rxl8] {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
}

.vm-box-row[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.12s ease;
}

.vm-box-row:hover[b-4gyoy1rxl8] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

.vm-box-row.active[b-4gyoy1rxl8] {
    background: rgba(var(--bs-primary-rgb), 0.12);
}

.vm-box-avatar[b-4gyoy1rxl8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 0.9rem;
}

.vm-box-main[b-4gyoy1rxl8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.vm-box-name[b-4gyoy1rxl8] {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-box-sub[b-4gyoy1rxl8] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}

.vm-box-count[b-4gyoy1rxl8] {
    flex-shrink: 0;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4rem;
    text-align: center;
}

/* ---- messages column ---- */

.vm-main[b-4gyoy1rxl8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: var(--bs-tertiary-bg, #f6f7f9);
}

.vm-empty[b-4gyoy1rxl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 2rem;
}

.vm-head[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
    background: var(--bs-body-bg);
}

.vm-head-info[b-4gyoy1rxl8] {
    min-width: 0;
}

.vm-head-name[b-4gyoy1rxl8] {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-head-sub[b-4gyoy1rxl8] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #888);
}

.vm-notice[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
}

.vm-notice.is-ok[b-4gyoy1rxl8] {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.1);
    color: var(--bs-success, #198754);
}

.vm-notice.is-error[b-4gyoy1rxl8] {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.1);
    color: var(--bs-danger, #dc3545);
}

.vm-toolbar[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--bs-border-color, #eee);
    background: var(--bs-body-bg);
}

.vm-messages[b-4gyoy1rxl8] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem 1rem;
}

.vm-select-all[b-4gyoy1rxl8] {
    padding: 0.35rem 0.25rem;
}

.vm-msg[b-4gyoy1rxl8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--bs-border-color, #e6e6e6);
    border-radius: 0.6rem;
    background: var(--bs-body-bg);
}

.vm-msg.is-new[b-4gyoy1rxl8] {
    border-left: 3px solid var(--bs-primary);
}

.vm-msg-check[b-4gyoy1rxl8] {
    margin-top: 0.55rem;
    flex-shrink: 0;
}

.vm-play[b-4gyoy1rxl8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.12s ease;
}

.vm-play:hover[b-4gyoy1rxl8] {
    background: var(--bs-primary);
    color: #fff;
    transform: scale(1.05);
}

.vm-msg-main[b-4gyoy1rxl8] {
    flex: 1;
    min-width: 0;
}

.vm-msg-top[b-4gyoy1rxl8] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vm-msg-caller[b-4gyoy1rxl8] {
    font-weight: 600;
    font-size: 0.92rem;
}

.vm-msg-number[b-4gyoy1rxl8] {
    font-size: 0.8rem;
    color: var(--bs-secondary-color, #888);
}

.vm-badge-new[b-4gyoy1rxl8] {
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.vm-badge-deleted[b-4gyoy1rxl8] {
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
    background: var(--bs-secondary-bg, #e5e5e5);
    color: var(--bs-secondary-color, #777);
    font-size: 0.68rem;
    font-weight: 700;
}

.vm-msg.is-deleted[b-4gyoy1rxl8] {
    opacity: 0.65;
    border-style: dashed;
}

.vm-msg-restore[b-4gyoy1rxl8] {
    color: var(--bs-success, #198754);
}

.vm-msg-restore:hover[b-4gyoy1rxl8] {
    background: rgba(var(--bs-success-rgb, 25, 135, 84), 0.12);
    color: var(--bs-success, #198754);
}

.vm-deleted-toggle[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    cursor: pointer;
}

.vm-msg-sub[b-4gyoy1rxl8] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #888);
    margin-top: 0.1rem;
}

.vm-transcript[b-4gyoy1rxl8] {
    margin-top: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    color: var(--bs-body-color);
    font-size: 0.85rem;
    line-height: 1.4;
    font-style: italic;
}

.vm-msg-actions[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    align-self: center;
    flex-shrink: 0;
}

.vm-msg-delete[b-4gyoy1rxl8] {
    align-self: center;
    color: var(--bs-secondary-color, #999);
}

.vm-msg-delete:hover[b-4gyoy1rxl8] {
    color: var(--bs-danger, #dc3545);
}

/* ---- shared bits ---- */

.vm-icon-btn[b-4gyoy1rxl8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color, #777);
    cursor: pointer;
}

.vm-icon-btn:hover[b-4gyoy1rxl8] {
    background: var(--bs-secondary-bg, rgba(0, 0, 0, 0.06));
    color: var(--bs-body-color);
}

.vm-modal-backdrop[b-4gyoy1rxl8] {
    background-color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 991.98px) {
    .vm-side[b-4gyoy1rxl8] {
        --sidepanel-width: 20rem;
    }
}
/* /Components/Pages/Voicemail/VoicemailSettingsModal.razor.rz.scp.css */
.vmset-backdrop[b-1owfxwtk65] {
    background-color: rgba(0, 0, 0, 0.5);
}

.vmset-options[b-1owfxwtk65] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.35rem 1rem;
    font-size: 0.85rem;
}

.vmset-options label[b-1owfxwtk65] {
    margin: 0;
    cursor: pointer;
}

.vmset-chip[b-1owfxwtk65] {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.55rem;
}
/* /Components/Shared/CopyNumber.razor.rz.scp.css */
/* Subtle inline copy icon that sits next to a phone number without disturbing the line. */
.np-copy[b-y2qlrids2k] {
    border: 0;
    background: transparent;
    padding: 0 .15rem;
    margin-left: .3rem;
    font-size: .82em;
    line-height: 1;
    color: var(--bs-secondary-color, #8a909c);
    cursor: pointer;
    opacity: .6;
    vertical-align: baseline;
    transition: opacity .12s ease, color .12s ease;
}

.np-copy:hover[b-y2qlrids2k],
.np-copy:focus-visible[b-y2qlrids2k] {
    opacity: 1;
    color: var(--bs-primary, #0d6efd);
}
/* /Components/Shared/MmsImage.razor.rz.scp.css */
.mms-image[b-2qrbbvqmcp] {
    display: block;
    max-width: min(320px, 100%);
    max-height: 360px;
    border-radius: 12px;
    object-fit: contain;
    background-color: rgba(0, 0, 0, 0.05);
}

.mms-image-clickable[b-2qrbbvqmcp] {
    cursor: zoom-in;
    transition: filter 0.12s ease;
}

.mms-image-clickable:hover[b-2qrbbvqmcp] {
    filter: brightness(0.92);
}

/* JS-driven container: nexus-mms-image.js toggles is-loading / is-loaded / is-failed.
   The <img> only shows once loaded; the placeholder shows the state until then. */
.mms-media img[b-2qrbbvqmcp] {
    display: none;
}

.mms-media.is-loaded img[b-2qrbbvqmcp] {
    display: block;
}

.mms-media.is-loaded .mms-placeholder[b-2qrbbvqmcp] {
    display: none;
}

.mms-only-loading[b-2qrbbvqmcp],
.mms-only-failed[b-2qrbbvqmcp] {
    display: none;
}

.mms-media.is-loading .mms-only-loading[b-2qrbbvqmcp] {
    display: inline-block;
}

.mms-media.is-loading .mms-only-idle[b-2qrbbvqmcp],
.mms-media.is-failed .mms-only-idle[b-2qrbbvqmcp] {
    display: none;
}

.mms-media.is-failed .mms-only-failed[b-2qrbbvqmcp] {
    display: inline;
}

.mms-media.is-failed .mms-placeholder[b-2qrbbvqmcp] {
    cursor: pointer;
    background-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.06);
    border-color: rgba(var(--bs-danger-rgb, 220, 53, 69), 0.3);
    color: var(--bs-danger, #dc3545);
}

.mms-media.is-loading .mms-placeholder[b-2qrbbvqmcp] {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.04);
    border-style: solid;
}

.mms-placeholder[b-2qrbbvqmcp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    min-height: 120px;
    min-width: 220px;
    border-radius: 12px;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    background-color: rgba(0, 0, 0, 0.02);
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.85rem;
}

.mms-placeholder-icon[b-2qrbbvqmcp] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    opacity: 0.6;
}

.mms-placeholder-label[b-2qrbbvqmcp] {
    flex: 1;
}
/* /Components/Shared/Partials/Header.razor.rz.scp.css */
/* Masquerade banner — deliberately loud in both themes so an impersonated session
   can never be mistaken for a normal one. Fixed bottom-left toast (it renders between
   the fixed header and sidebar, so normal flow would leave it in an awkward spot);
   sized and wrapped so long names never clip. Sits below modals/backdrops (BS ~1050). */
.masq-banner[b-ipbxrj0pcf] {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: min(26rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.masq-banner > i[b-ipbxrj0pcf] {
    margin-top: 0.15rem;
}

/* Let the text flex item shrink below its content size so it wraps instead of clipping. */
.masq-banner span[b-ipbxrj0pcf] {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.masq-banner b[b-ipbxrj0pcf] {
    font-weight: 700;
}
/* /Components/Shared/Partials/Notifications.razor.rz.scp.css */
/* The theme styles .notification-header as a centered column, which overrides the
   Bootstrap utilities on the element and stacks the action buttons under the title
   (where they collide with the tab strip). Scoped selectors carry the component's
   attribute, so they out-specify the theme without needing !important. */
.notification-header[b-tb47mebk1r] {
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.notification-header h4[b-tb47mebk1r] {
    text-align: left;
}
/* /Components/Shared/SessionReauthModal.razor.rz.scp.css */
.reauth-backdrop[b-0fnejruqjr] {
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 12000; /* above drawers, lightbox stays below the login ask */
}

.reauth-dialog[b-0fnejruqjr] {
    max-width: 24rem;
}