/*
 * pbx-web custom CSS layered on top of Fluent UI Blazor v4.
 *
 * Fluent UI publishes its design tokens (CSS variables) via the
 * <FluentDesignTheme Mode=...> component declared in Routes.razor. Available
 * tokens we care about:
 *   --neutral-layer-1 / --neutral-layer-2 / --neutral-layer-3   (backgrounds)
 *   --neutral-fill-rest / --neutral-fill-hover                  (subtle fills)
 *   --neutral-foreground-rest / --neutral-foreground-hint       (text)
 *   --accent-fill-rest / --accent-foreground-rest               (brand accent)
 *
 * Avoid hardcoding hex outside of operator-tunable variables below — colors
 * should flow from the design system so future theme changes (light mode,
 * brand recolor) propagate automatically.
 */

/* Design tokens defined in operator-tokens.css — all rules use --op-* variables. */

/*
 * FluentCard hugs content by default.
 *
 * Fluent UI's <fluent-card> web component sets `:host { height: var(--card-height, 100%) }`
 * in its shadow DOM. With no override, every card stretches to 100% of its parent's
 * height — fine for dashboard-tile layouts inside a fixed grid cell, disastrous as a
 * section wrapper inside a tall `FluentBodyContent` where it makes a ~50-line filter
 * card consume the entire visible viewport. Override the design token globally so
 * cards size to their content. Pages that want a fixed-height tile can re-set
 * `--card-height` inline via Style="...".
 */
fluent-card {
    --card-height: auto;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--op-sans);
    background-color: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
}

/*
 * Override Fluent UI's internal body-font design token.
 *
 * Fluent web components read --body-font from their nearest provider element.
 * <FluentDesignTheme /> in our layout is self-closing (not a wrapper), so the
 * token set on fluent-design-theme alone doesn't cascade into page content.
 *
 * Fix: set the token on :root (global cascade), on fluent-design-theme (the
 * design system's own provider), AND directly on all fluent-* custom elements
 * whose shadow DOM reads font-family from --body-font.
 */
:root,
fluent-design-theme {
    --body-font: var(--op-sans);
}

fluent-label,
fluent-text-field,
fluent-text-area,
fluent-number-field,
fluent-button,
fluent-anchor,
fluent-card,
fluent-data-grid,
fluent-data-grid-cell,
fluent-data-grid-row,
fluent-select,
fluent-option,
fluent-checkbox,
fluent-radio,
fluent-radio-group,
fluent-switch,
fluent-tabs,
fluent-tab,
fluent-dialog,
fluent-search,
fluent-badge,
fluent-menu,
fluent-menu-item,
fluent-tooltip,
fluent-divider,
fluent-progress-ring,
fluent-message-bar {
    --body-font: var(--op-sans);
}

#app {
    height: 100%;
}

/* ── Operator utilities ──────────────────────────────────────────────────── */

.op-mono {
    font-family: var(--op-mono);
    font-variant-numeric: tabular-nums;
}

.op-mono-muted {
    font-family: var(--op-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: var(--op-muted);
}

.op-loading-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.op-content-narrow { max-width: 900px; }

/* ============================================================================
 * Operator shell — single top-level CSS Grid.
 *
 *   ┌────────────────────────────────────────────────────────┐
 *   │  HEADER (52px, chrome)                       spans all │
 *   ├──────┬────────┬──────────┬─────────────────────────────┤
 *   │SIDE  │ ADMIN  │TERTIARY  │                             │
 *   │BAR   │ 200px  │ 200px    │  BODY (bg, scrollable)     │
 *   │76px  │(opt)   │(opt)     │                             │
 *   │chrome│        │          │                             │
 *   └──────┴────────┴──────────┴─────────────────────────────┘
 *
 * The grid auto-expands via :has() when child layouts render
 * .op-admin-sidebar or .op-tertiary-sidebar. Intermediate wrappers
 * (op-main, op-admin-body) use display:contents so sidebar elements
 * participate directly in the top-level grid.
 * ============================================================================ */

/* --- Shell grid ------------------------------------------------------------ */

.op-shell {
    display: grid;
    grid-template-columns: 76px 1fr;
    grid-template-rows: 52px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar main";
    height: 100vh;
    width: 100vw;
    background-color: var(--op-chrome);
}

.op-shell:has(.op-admin-sidebar) {
    grid-template-columns: 76px 200px 1fr;
    grid-template-areas:
        "header  header header"
        "sidebar admin  main";
}

.op-shell:has(.op-tertiary-sidebar) {
    grid-template-columns: 76px 200px 200px 1fr;
    grid-template-areas:
        "header  header header   header"
        "sidebar admin  tertiary main";
}

/* --- Impersonation banner -------------------------------------------------- */
/* A fixed top strip warns the admin they're viewing the console as another user.
   The shell shrinks + shifts down by the banner height (via :has) so no content
   is ever hidden behind it. */
.op-shell:has(.op-impersonation-banner) {
    height: calc(100vh - 36px);
    margin-top: 36px;
}

.op-impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 16px;
    background: #b45309;
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.op-impersonation-text strong {
    font-weight: 700;
}

.op-impersonation-exit {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 4px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.op-impersonation-exit:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Header (52px) --------------------------------------------------------- */

.op-header {
    grid-area: header;
    background: var(--op-chrome);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 16px 0 22px;
    border-bottom: 1px solid var(--op-chromeAlt);
    z-index: 10;
}

.op-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

/* The mark renders white on the chrome; on hover it returns to its natural
   gradient and the wordmark picks up the account-pill blue. */
.op-header-brand:not(:hover) .op-exovo-mark g {
    fill: #fff;
}

.op-header-brand:hover {
    color: #fff; /* keep reboot's a:hover accent off the version chip/gaps */
}

.op-header-brand:hover .op-header-wordmark {
    color: var(--op-accentDk);
}

/* .op-header-mark removed — ExovoMark component renders inline SVG */

.op-header-wordmark {
    font-family: var(--op-sans);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.06em;
}

.op-header-version {
    margin-left: 10px;
    font-size: 10.5px;
    color: var(--op-chromeIcon);
    padding: 2px 7px;
    background: var(--op-chromeAlt);
    border-radius: 4px;
    font-weight: 500;
}

/* ── Command bar ── */

.op-header-search {
    margin-left: 24px;
    height: 30px;
    background: var(--op-chromeAlt);
    border-radius: 6px;
    width: 360px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--op-chromeIcon);
    font-size: 12.5px;
    cursor: pointer;
    transition: background 0.15s;
}

.op-header-search:hover { background: rgba(255,255,255,0.08); }

.op-header-search span { flex: 1; }

.op-header-search kbd {
    font-size: 10.5px;
    padding: 1px 6px;
    background: #000;
    border-radius: 3px;
    border: 1px solid rgba(139,145,154,0.25);
    color: var(--op-chromeIcon);
}

/* ── Command palette overlay ── */

.cp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.45);
    display: flex;
    justify-content: center;
    padding-top: 80px;
    animation: cpFadeIn 0.12s ease-out;
}

@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cpSlideIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }

.cp-dialog {
    width: 560px;
    max-height: min(480px, calc(100vh - 160px));
    background: var(--op-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cpSlideIn 0.15s ease-out;
    align-self: flex-start;
}

.cp-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--op-border);
}

.cp-search-icon { flex-shrink: 0; }

.cp-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--op-fg);
    outline: none;
    font-family: var(--body-font);
}

.cp-input::placeholder { color: var(--op-muted); }

.cp-kbd {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--op-surfaceAlt);
    border-radius: 4px;
    border: 1px solid var(--op-border);
    color: var(--op-muted);
    flex-shrink: 0;
}

.cp-status {
    padding: 24px 16px;
    text-align: center;
    color: var(--op-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.cp-results {
    overflow-y: auto;
    padding: 6px 0;
}

.cp-group { padding: 4px 0; }

.cp-group-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--op-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 16px 4px;
}

.cp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    text-decoration: none;
    color: var(--op-fg);
    cursor: pointer;
    transition: background 0.08s;
}

.cp-item:hover,
.cp-item--sel {
    background: var(--op-surfaceAlt);
}

.cp-item--sel {
    background: color-mix(in srgb, var(--op-accent) 8%, transparent);
}

.cp-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cp-item-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-item-sub {
    font-size: 11.5px;
    color: var(--op-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cp-item-arrow {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}

.cp-item:hover .cp-item-arrow,
.cp-item--sel .cp-item-arrow { opacity: 1; }

/* ── Header right region ── */

.op-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.op-header-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--op-chromeIcon);
}

.op-header-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #22c55e;
}

.op-header-action {
    appearance: none;
    background: transparent;
    border: none;
    color: #d4d5d8;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background-color var(--op-transition);
}

.op-header-action:hover {
    background: var(--op-chromeAlt);
}

.op-header-action--active {
    background: var(--op-chromeAlt);
}

.op-header-action svg {
    width: 17px;
    height: 17px;
}

.op-header-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--op-accentDk);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Account pill ── */

.op-header-account {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: var(--op-accentDk);
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: var(--op-sans);
    box-shadow: 0 0 0 2px rgba(14,165,233,0.25);
    transition: box-shadow var(--op-transition);
}

.op-header-account:hover {
    box-shadow: 0 0 0 3px rgba(14,165,233,0.35);
}

.op-header-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #fff;
    color: var(--op-accentDk);
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    position: relative;
}

.op-header-account-email {
    font-size: 12px;
    font-weight: 500;
}

/* --- User dropdown --------------------------------------------------------- */

.op-user-menu-wrapper { position: relative; }

.op-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px -20px rgba(10,12,16,0.18),
                0 8px 24px -8px rgba(10,12,16,0.10);
    z-index: 10000;
    overflow: hidden;
    color: var(--op-ink);
    font-family: var(--op-sans);
}

/* ── Profile header ── */

.op-udrop-profile {
    padding: 16px 16px 14px;
    background: var(--op-surfaceAlt);
    border-bottom: 1px solid var(--op-hairlineSoft);
}

.op-udrop-profile-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.op-udrop-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 999px;
    background: var(--op-accentDk);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    position: relative;
}

.op-udrop-info { flex: 1; min-width: 0; }

.op-udrop-name-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.op-udrop-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--op-ink);
    letter-spacing: -0.01em;
}

.op-udrop-ext {
    font-size: 11px;
    color: var(--op-muted);
}

.op-udrop-email {
    font-size: 11.5px;
    color: var(--op-muted);
    margin-top: 1px;
}

.op-udrop-status-live {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.op-udrop-status-live.dot-available { color: var(--op-success); }
.op-udrop-status-live.dot-away      { color: var(--op-warning); }
.op-udrop-status-live.dot-dnd       { color: var(--op-error); }
.op-udrop-status-live.dot-meeting   { color: var(--op-purple); }
.op-udrop-status-live.dot-ooo       { color: var(--op-muted); }
.op-udrop-status-live.dot-custom    { color: color-mix(in srgb, var(--op-teal) 85%, black); }

.op-udrop-gear {
    width: 26px;
    height: 26px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 5px;
    cursor: pointer;
    color: var(--op-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    align-self: flex-start;
}

.op-udrop-gear:hover { background: var(--op-surfaceAlt); }

/* ── Tenant chip ── */

.op-udrop-tenant {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px 7px 7px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
}

.op-udrop-tenant-mark {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--op-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.op-udrop-tenant-body { flex: 1; min-width: 0; }

.op-udrop-tenant-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--op-ink);
}

.op-udrop-tenant-meta {
    font-size: 10px;
    color: var(--op-muted);
    margin-top: 1px;
}

/* ── Sections ── */

.op-udrop-section { padding: 10px 0 6px; }
.op-udrop-section--border { border-top: 1px solid var(--op-hairlineSoft); }

.op-udrop-section-head {
    display: flex;
    align-items: baseline;
    padding: 0 14px 6px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--op-muted);
}

/* ── Status rows ── */

.op-udrop-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    width: 100%;
    border: none;
    background: transparent;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-family: var(--op-sans);
    transition: background-color var(--op-transition);
}

.op-udrop-status:hover { background: var(--op-surfaceAlt); }

.op-udrop-status.active {
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
}

.op-udrop-status.dim { opacity: 0.55; }

.op-udrop-status-text { flex: 1; min-width: 0; text-align: left; }

.op-udrop-status-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
}

.op-udrop-status.active .op-udrop-status-name {
    font-weight: 600;
    color: var(--op-accentDk);
}

.op-udrop-status-sub {
    font-size: 10px;
    color: var(--op-muted);
    margin-top: 1px;
}

.op-udrop-sched-pill {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--op-warning);
    background: var(--op-warningSoft);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ── Forward toggles ── */

.op-udrop-fwd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
}

.op-udrop-fwd-text { flex: 1; min-width: 0; }

.op-udrop-fwd-label {
    font-size: 12px;
    color: var(--op-ink);
    font-weight: 500;
}

.op-udrop-fwd-detail {
    font-size: 10px;
    color: var(--op-muted);
    margin-top: 1px;
}

/* ── Menu items ── */

.op-udrop-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    width: 100%;
    border: none;
    background: none;
    color: var(--op-ink2);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--op-sans);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--op-transition);
}

.op-udrop-menu-item:hover { background: var(--op-surfaceAlt); }

.op-udrop-menu-item--danger { color: var(--op-error); }

.op-udrop-menu-item svg,
.op-udrop-menu-item svg * {
    fill: currentColor !important;
}

.op-udrop-item-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.op-udrop-item-sub {
    font-size: 10.5px;
    color: var(--op-muted);
    margin-top: 1px;
}

.op-udrop-count {
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    background: var(--op-accentDk);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: auto;
}

.op-udrop-kbd {
    font-size: 10px;
    color: var(--op-muted);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    margin-left: auto;
}

/* ── Footer ── */

.op-udrop-footer {
    padding: 8px 14px;
    background: var(--op-surfaceAlt);
    border-top: 1px solid var(--op-hairlineSoft);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--op-muted);
}

.op-udrop-footer-sys {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Status dots ── */

.op-status-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.op-status-dot.dot-available { background-color: var(--op-success); }
.op-status-dot.dot-away      { background-color: var(--op-warning); }
.op-status-dot.dot-dnd       { background-color: var(--op-error); }
.op-status-dot.dot-meeting   { background-color: var(--op-purple); }
.op-status-dot.dot-ooo       { background-color: var(--op-muted); }
.op-status-dot.dot-custom    { background-color: var(--op-teal); }

/* Small dot on header avatar */
.op-status-dot--sm {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 8px;
    height: 8px;
    min-width: 8px;
    border: 1.5px solid #fff;
}

/* Larger dot on dropdown avatar */
.op-status-dot--lg {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    min-width: 12px;
    border: 2px solid var(--op-surfaceAlt);
}

/* --- Primary sidebar (76px) ------------------------------------------------ */

.op-sidebar {
    grid-area: sidebar;
    background: var(--op-chrome);
    color: var(--op-chromeIcon);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
    border-right: 1px solid var(--op-chromeAlt);
}

.op-sidebar-section {
    display: flex;
    flex-direction: column;
}

.op-sidebar-top {
    flex: 1;
}

.op-sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--op-chromeIcon);
    transition: color var(--op-transition), background-color var(--op-transition);
    border-left: 2px solid transparent;
    font-family: var(--op-sans);
    font-size: 10.5px;
    font-weight: 500;
}

.op-sidebar-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.op-sidebar-item.active {
    color: #fff;
    background: rgba(5, 151, 212, 0.08);
    border-left-color: var(--op-accent);
}

.op-sidebar-item svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.op-sidebar-item svg,
.op-sidebar-item svg * {
    fill: currentColor !important;
}

/* --- Body areas ------------------------------------------------------------ */

/* op-main: body for user pages (no admin sidebar).
   When admin sidebar is present, becomes display:contents so children
   participate in the parent grid. */
.op-main {
    grid-area: main;
    background: var(--op-bg);
    color: var(--op-ink);
    overflow-y: auto;
}

.op-shell:has(.op-admin-sidebar) > .op-main {
    display: contents;
}

/* op-admin-body: body for admin pages (no tertiary sidebar).
   When tertiary sidebar is present, becomes display:contents. */
.op-admin-body {
    grid-area: main;
    background: var(--op-bg);
    color: var(--op-ink);
    padding: 16px 22px 28px;
    overflow-y: auto;
}

.op-shell:has(.op-tertiary-sidebar) .op-admin-body {
    display: contents;
}

/* op-body: body for settings pages (innermost, always a real box). */
.op-body {
    grid-area: main;
    background: var(--op-bg);
    color: var(--op-ink);
    padding: 16px 22px 28px;
    overflow-y: auto;
}

/* --- Admin sidebar (200px) ------------------------------------------------- */

.op-admin-sidebar {
    grid-area: admin;
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 12px 0;
    overflow-y: auto;
}

.op-admin-sidebar-kicker {
    margin: 0; /* kickers render as headings (h2) — kill UA margins */
    line-height: var(--type-ramp-base-line-height); /* and reboot's h2 type ramp — restore the body metric divs inherited */
    padding: 0 16px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
}

/* Grouped nav: breathing room before each section kicker that follows items (Dashboard's
   standalone entry above the first kicker keeps the sidebar's own top padding). */
.op-admin-sidebar-item + .op-admin-sidebar-kicker {
    margin-top: 16px;
}

/* ── Read-only credential fields (users edit → IP Phone → Configuration) ──
   Boxed mono value with in-row eye/copy actions — replaces FluentTextField end-slot buttons,
   which overflowed the input's fixed height. */
.ue-copy-field-label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--op-ink2);
}

.ue-copy-field-row {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
}

.ue-copy-field-value {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.op-admin-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    text-decoration: none;
    color: var(--op-ink2);
    font-size: 12.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--op-transition), color var(--op-transition);
}

.op-admin-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}

.op-admin-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.op-admin-sidebar-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.op-admin-sidebar-item svg,
.op-admin-sidebar-item svg * {
    fill: currentColor !important;
}

.op-admin-sidebar-item.active svg {
    color: var(--op-accentDk);
}

.op-admin-sidebar-item span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.op-admin-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
}

/* --- Tertiary sidebar (200px) ---------------------------------------------- */

.op-tertiary-sidebar {
    grid-area: tertiary;
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 8px 0;
    overflow-y: auto;
}

.op-tertiary-sidebar-item {
    display: block;
    padding: 7px 16px;
    text-decoration: none;
    color: var(--op-ink2);
    font-size: 12.5px;
    font-weight: 500;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--op-transition), color var(--op-transition);
}

.op-tertiary-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}

.op-tertiary-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

/* ============================================================================
 * Operator design-system components.
 *
 * Styles for all Shared/Operator/*.razor primitives, plus utility classes
 * for tables, save bars, selection toolbars, empty states.
 * ============================================================================ */

/* ── ExovoMark ── */
.op-exovo-mark {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ── OpCard ── */
.op-card {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.op-card-header {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
}

.op-card-title {
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--op-ink);
    text-transform: uppercase;
}

.op-card-action {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--op-muted);
    cursor: pointer;
}

.op-card-body {
    padding: 14px;
}
.op-card-body--flush {
    padding: 0;
}

/* ── OpTile ── */
.op-tile {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}

.op-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.op-tile-label {
    font-family: var(--op-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.op-tile-value-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.op-tile-value {
    font-size: 30px;
    font-weight: 500;
    color: var(--op-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}

.op-tile-suffix {
    color: var(--op-mutedSoft);
    font-size: 14px;
}

.op-tile-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 4px;
}

.op-tile-sub {
    font-size: 11px;
    color: var(--op-muted);
    font-family: var(--op-sans);
}

/* ── OpBadge ── */
.op-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.op-badge--success { background: var(--op-successSoft); color: color-mix(in srgb, var(--op-success) 85%, black); }
.op-badge--warning { background: var(--op-warningSoft); color: color-mix(in srgb, var(--op-warning) 85%, black); }
.op-badge--error   { background: var(--op-errorSoft);   color: var(--op-error); }
.op-badge--info    { background: var(--op-accentSoft);   color: var(--op-accentDk); }
.op-badge--purple  { background: var(--op-purpleSoft);   color: var(--op-purple); }
.op-badge--pink    { background: var(--op-pinkSoft);     color: var(--op-pink); }
.op-badge--teal    { background: var(--op-tealSoft);     color: color-mix(in srgb, var(--op-teal) 85%, black); }

/* ── OpToggle ── */
.op-toggle {
    width: 28px;
    height: 16px;
    border-radius: 999px;
    background: var(--op-hairline);
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: background var(--op-transition);
}

.op-toggle--on {
    background: var(--op-accent);
}

.op-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #fff;
    transition: transform var(--op-transition);
}

.op-toggle--on .op-toggle-knob {
    transform: translateX(12px);
}

.op-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── OpKicker ── */
.op-kicker {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-muted);
}

/* ── AdHeader ── */
.op-ad-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--op-hairline);
    position: sticky;
    top: 0;
    background: var(--op-bg);
    z-index: 2;
    padding-top: 2px;
}

.op-ad-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.op-ad-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--op-muted);
    border-radius: 6px;
    padding: 2px;
    transition: color var(--op-transition), background var(--op-transition);
}

.op-ad-header-back:hover {
    color: var(--op-ink);
    background: var(--op-surfaceAlt);
}

.op-ad-header-breadcrumb {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.op-ad-header-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 4px 0 0;
    color: var(--op-ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.op-ad-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 18px;
}

/* ── AdBtn ── */
.op-ad-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-ink2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background var(--op-transition), border-color var(--op-transition);
}

.op-ad-btn:hover {
    background: var(--op-surfaceAlt);
    border-color: var(--op-hairline);
}

.op-ad-btn--primary {
    background: var(--op-ink);
    color: #fff;
    border-color: var(--op-ink);
}

.op-ad-btn--primary:hover {
    background: #1f2937;
}

.op-ad-btn--danger {
    color: var(--op-error);
    background: var(--op-errorSoft);
    border-color: transparent;
}

.op-ad-btn--danger:hover {
    background: rgba(185, 28, 28, 0.15);
}

.op-ad-btn--sm {
    height: 26px;
    font-size: 11.5px;
    padding: 0 10px;
}

.op-ad-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── StSection ── */
.op-st-section {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

.op-st-section-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.op-st-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink);
}

.op-st-section-desc {
    font-size: 12px;
    color: var(--op-muted);
    margin-top: 2px;
}

.op-st-section-body {
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    gap: 12px;
}

/* ── StField / StSelect ── */
.op-st-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.op-st-field-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--op-ink2);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.op-st-field-required {
    color: var(--op-error);
    margin-left: 2px;
}

.op-st-field-hint {
    font-size: 11px;
    color: var(--op-muted);
}

.op-st-field-input-wrap {
    display: flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    overflow: hidden;
}

.op-st-field-input-wrap input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--op-ink);
    background: transparent;
}

.op-st-field-input-wrap:focus-within {
    border-color: var(--op-accent);
}

.op-st-field--readonly {
    background: var(--op-surfaceAlt);
}

.op-st-select-wrap {
    display: flex;
    align-items: center;
    height: 34px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
}

.op-st-select-wrap select {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    color: var(--op-ink);
    background: transparent;
    appearance: none;
    cursor: pointer;
}

.op-st-select-wrap:focus-within {
    border-color: var(--op-accent);
}

/* ── StCheckbox ── */
.op-st-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.op-st-checkbox input { display: none; }

.op-st-checkbox-box {
    width: 15px;
    height: 15px;
    min-width: 15px;
    border-radius: 3px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background var(--op-transition), border-color var(--op-transition);
}

.op-st-checkbox--checked .op-st-checkbox-box {
    background: var(--op-accent);
    border-color: var(--op-accent);
}

.op-st-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12.5px;
    color: var(--op-ink);
}

.op-st-checkbox-sub {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── Selection toolbar ── */
.op-selection-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--op-accentSoft);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--op-accentDk);
    font-weight: 500;
}

/* ── Table ── */
.op-table {
    width: 100%;
    border-collapse: collapse;
}

.op-table thead th {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    white-space: nowrap;
}

.op-table tbody td {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--op-ink);
    border-bottom: 1px solid var(--op-hairlineSoft);
    vertical-align: middle;
}

.op-table tbody tr:hover {
    background: var(--op-surfaceAlt);
}

.op-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Grid table (CSS-grid-based data table — shared base for admin pages) ── */

.op-grid-table {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.op-grid-table-head {
    display: grid;
    align-items: center;
    background: var(--op-surfaceAlt);
    border-bottom: 1px solid var(--op-hairline);
}

.op-grid-table-head > span,
.op-grid-table-head > div {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
    padding: 8px 14px;
    white-space: nowrap;
}

.op-grid-table-row {
    display: grid;
    border-bottom: 1px solid var(--op-hairlineSoft);
    transition: background var(--op-transition);
}

.op-grid-table-row:last-child { border-bottom: none; }
.op-grid-table-row:hover { background: var(--op-surfaceAlt); }

.op-grid-table-row > span,
.op-grid-table-row > div {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--op-ink);
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ── Grid table: column-priority responsive convention ──────────────────────
 *
 * CONTRACT FOR PAGE SWEEPS (per-page .razor.css):
 *   1. Mark low-priority cells — on BOTH the head cell and the matching row
 *      cell — with `op-col-hide-md` (hidden ≤1024px) or `op-col-hide-sm`
 *      (hidden ≤640px). A column marked -sm but not -md stays visible on
 *      tablets and disappears on phones.
 *   2. In the page's scoped CSS, override the grid-template-columns of the
 *      head + row at the SAME breakpoints (@media max-width 1024px / 640px)
 *      so the remaining columns re-flow — mirror the hidden-column count.
 *      (See the /office/users "Responsive" block in this file for the shape.)
 *   3. NEVER hide the row's kebab/action column — it stays visible (and last)
 *      at all sizes.
 *   4. Until a page is swept, the ≤1024px overflow-x fallback below keeps
 *      unswept tables usable (they scroll horizontally inside the card
 *      instead of breaking the page).
 */
@media (max-width: 1024px) {
    .op-grid-table,
    div.op-table {
        overflow-x: auto;
    }
    .op-grid-table .op-col-hide-md,
    div.op-table .op-col-hide-md {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .op-grid-table .op-col-hide-sm,
    div.op-table .op-col-hide-sm {
        display: none !important;
    }
}

/* ── Grid table shorthand aliases ── */
/* Dashboard and parameters pages use op-table + op-table-header/row
   as a shorter alias for the op-grid-table system above.            */

div.op-table {
    display: block;
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
    background: var(--op-surface);
}

.op-table-header {
    display: grid;
    grid-template-columns: var(--table-cols);
    align-items: center;
    background: var(--op-surfaceAlt);
    border-bottom: 1px solid var(--op-hairline);
}

.op-table-header > span {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
    padding: 8px 14px;
    white-space: nowrap;
}

.op-table-row {
    display: grid;
    grid-template-columns: var(--table-cols);
    align-items: center;
    border-bottom: 1px solid var(--op-hairlineSoft);
    transition: background var(--op-transition);
}

.op-table-row:last-child { border-bottom: none; }
.op-table-row:hover { background: var(--op-surfaceAlt); }

.op-table-row > span,
.op-table-row > div {
    padding: 9px 14px;
    font-size: 12.5px;
    color: var(--op-ink);
    display: flex;
    align-items: center;
    min-width: 0;
}

.op-table-empty {
    padding: 32px 14px;
    text-align: center;
    color: var(--op-muted);
    font-size: 13px;
}

/* ── Status dot (generic, not dropdown-specific) ── */
.op-status-dot--glow.dot-available { box-shadow: 0 0 6px var(--op-success); }
.op-status-dot--glow.dot-away      { box-shadow: 0 0 6px var(--op-warning); }
.op-status-dot--glow.dot-dnd       { box-shadow: 0 0 6px var(--op-error); }
.op-status-dot--glow.dot-meeting   { box-shadow: 0 0 6px var(--op-purple); }
.op-status-dot--glow.dot-ooo       { box-shadow: 0 0 6px var(--op-muted); }
.op-status-dot--glow.dot-custom    { box-shadow: 0 0 6px var(--op-teal); }

/* ── Empty state ── */
.op-empty-state {
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.op-empty-state-label {
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.op-empty-state-desc {
    font-size: 13px;
    color: var(--op-muted);
}

/* ============================================================================
 * CANONICAL LIST-PAGE SPACING RHYTHM (apply to every admin list page).
 *
 *   Page heading          (FluentLabel H4 + Help link)
 *   12px gap
 *   Divider               (FluentDivider, margin: 0 0 4px)
 *   Button toolbar        (FluentStack, margin-bottom: 4px)
 *   Divider               (FluentDivider, margin: 0)
 *   Search bar            (FluentSearch, margin: 0)
 *   Divider               (FluentDivider, margin: 0)
 *   Table                 (FluentDataGrid)
 *
 * Reference implementation: Pages/OfficeUsers.razor.
 * Carry this pattern forward when touching: OfficeVoiceAndChat, OfficeOutbound-
 * Rules, OfficeCallHandling, OfficeGroups, OfficeRecordings, etc.
 * ============================================================================ */

/* ============================================================================
 * /office/users — toolbar buttons, status dots, integration badges.
 *
 * The toolbar button look (light-accent tint, dark text) matches the 3CX
 * inspiration screenshot. We override Fluent's default Stealth/Neutral
 * styling rather than using Accent (which is too saturated for a row of
 * 10 buttons) — the result is a tinted "available action" appearance.
 * ============================================================================ */


/* ── CSS grid table (column widths — base from .op-grid-table) ── */
.ou-table {
    width: 100%;
    background: var(--op-surface);
}

.ou-table-head,
.ou-table-row {
    grid-template-columns: 32px 70px 1.5fr 1.2fr 0.8fr 0.8fr 1fr 50px 30px;
    padding: 0 14px;
}

.ou-table-head {
    min-height: 36px;
}

.ou-table-head > span {
    padding: 8px 0;
}

.ou-table-row {
    min-height: 48px;
}

.ou-table-row > span {
    padding: 9px 0;
}

/* ── Cell centering helper (checkbox, 2FA, kebab) ── */
.ou-cell-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Status dot ── */
.ou-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Avatar ── */
.ou-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--op-sans);
    letter-spacing: 0.3px;
}

/* ── User info (name + role stack) ── */
.ou-user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ou-user-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ou-name-link {
    color: var(--op-ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ou-name-link:hover {
    color: var(--op-accent);
    text-decoration: underline;
}

.ou-role {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── IP Phone dot ── */
.ou-phone-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--op-mutedSoft);
    margin-right: 6px;
    flex-shrink: 0;
}

.ou-phone-dot.active {
    background: var(--op-success);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ou-table-head,
    .ou-table-row {
        grid-template-columns: 32px 60px 1.4fr 1fr 0.8fr 0.8fr 50px 30px;
    }
    /* Hide IP Phone on medium screens */
    .ou-table-head > span:nth-child(7),
    .ou-table-row > span:nth-child(7) {
        display: none;
    }
}

@media (max-width: 768px) {
    .ou-table-head,
    .ou-table-row {
        grid-template-columns: 32px 50px 1fr 1fr 30px;
    }
    /* Hide email, group, DIDs, IP phone, 2FA on small screens */
    .ou-table-head > span:nth-child(4),
    .ou-table-row > span:nth-child(4),
    .ou-table-head > span:nth-child(5),
    .ou-table-row > span:nth-child(5),
    .ou-table-head > span:nth-child(6),
    .ou-table-row > span:nth-child(6),
    .ou-table-head > span:nth-child(7),
    .ou-table-row > span:nth-child(7),
    .ou-table-head > span:nth-child(8),
    .ou-table-row > span:nth-child(8) {
        display: none;
    }
}

/* ============================================================================
 * FluentDataGrid — global center-aligned column fix.
 *
 * When TemplateColumn / PropertyColumn uses Align="Align.Center", Fluent adds
 * the .col-justify-center class. Its default justify-content doesn't reliably
 * center content (checkboxes, icon buttons) inside the grid cell because the
 * cell's default layout is block-ish. Flexbox with explicit centering fixes
 * every grid in the app. The .office-users-grid rules above are a subset of
 * this — kept for their additional first-child / kebab specializations.
 * ============================================================================ */
th.col-justify-center,
td.col-justify-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

th.col-justify-center > div {
    justify-content: center !important;
    width: 100%;
}

th.col-justify-center .col-title {
    width: 100% !important;
}


/* ── Stat strip ─────────────────────────────────────────────────────────── */
.op-stat-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.op-stat-tile {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 14px 16px 12px;
}

.op-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--op-muted);
    margin-bottom: 4px;
}

.op-stat-value {
    font-size: 26px;
    font-weight: 500;
    color: var(--op-ink);
    line-height: 1.1;
}

.op-stat-suffix {
    font-size: 13px;
    color: var(--op-mutedSoft);
    font-weight: 400;
}

.op-stat-delta {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--op-error);
    margin-left: 6px;
    text-transform: uppercase;
}

.op-stat-sub {
    font-size: 11px;
    color: var(--op-muted);
    font-family: var(--op-sans);
    margin-top: 4px;
}

@media (max-width: 1200px) {
    .op-stat-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .op-stat-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Filter chips ───────────────────────────────────────────────────────── */
.op-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.op-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid var(--op-hairline);
    border-radius: 999px;
    background: var(--op-surface);
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--op-transition);
    white-space: nowrap;
}

.op-filter-chip:hover {
    border-color: var(--op-accent);
    color: var(--op-accent);
}

.op-filter-chip.active {
    background: var(--op-accentSoft);
    border-color: var(--op-accent);
    color: var(--op-accentDk);
    font-weight: 600;
}

.op-filter-count {
    font-size: 10px;
    background: var(--op-bg);
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--op-muted);
}

.op-filter-chip.active .op-filter-count {
    background: rgba(5, 151, 212, 0.15);
    color: var(--op-accentDk);
}

.op-filter-divider {
    width: 1px;
    height: 20px;
    background: var(--op-hairline);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Inline search ──────────────────────────────────────────────────────── */
.op-inline-search {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 280px;
    padding: 5px 10px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    flex-shrink: 0;
}

.op-inline-search:focus-within {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 2px var(--op-accentSoft);
}

.op-inline-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12px;
    color: var(--op-ink);
    width: 100%;
    line-height: 1.4;
}

.op-inline-search-input::placeholder {
    color: var(--op-muted);
}

/* ── Audit log detail panel ── */
.audit-detail-panel {
    background: var(--op-bgCard);
    border: 1px solid var(--op-border);
    border-radius: 6px;
    margin: 8px 0;
    padding: 12px 16px;
}

.audit-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--op-muted);
    margin-bottom: 8px;
}

.audit-detail-body {
    display: flex;
    gap: 24px;
}

.audit-detail-col {
    flex: 1;
    min-width: 0;
}

.audit-detail-col strong {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--op-muted);
    margin-bottom: 4px;
}

.audit-detail-col pre {
    font-size: 11.5px;
    line-height: 1.5;
    background: var(--op-bgSurface);
    border: 1px solid var(--op-border);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 0;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Abuse Control stat cards ── */
.op-ac-stat-card {
    background: var(--op-bgCard);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    padding: 16px 20px;
    text-align: center;
}

.op-ac-stat-value {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--op-fg);
}

.op-ac-stat-label {
    font-size: 12px;
    color: var(--op-muted);
    margin-top: 2px;
}

/* ============================================================================
 * /office/users/edit (and /add) — Operator design system reskin.
 *
 *   ue-*  prefix = user-edit page scope
 * ============================================================================ */

/* ── Page wrapper — bleeds into op-admin-body padding so identity
      strip and tab bar go edge-to-edge without fighting the web component ── */
.ue-page {
    margin: -16px -22px -28px;
}

/* ── Identity strip ── */
.ue-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    padding: 14px 22px;
}
.ue-identity-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.ue-back-btn {
    appearance: none;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--op-ink2);
    flex-shrink: 0;
    transition: background 0.15s;
}
.ue-back-btn:hover {
    background: var(--op-bg);
}

.ue-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--op-accentDk);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
    font-family: var(--op-sans);
}
.ue-presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--op-surface);
}
.ue-presence-online  { background: var(--op-success); }
.ue-presence-offline { background: var(--op-mutedSoft); }

.ue-identity-info {
    min-width: 0;
    flex: 1;
}
.ue-identity-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ue-identity-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ue-ext-badge {
    font-size: 11px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 4px;
    padding: 1px 6px;
    color: var(--op-ink2);
}

.ue-identity-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--op-muted);
    flex-wrap: wrap;
}
.ue-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ue-meta-item svg {
    width: 14px;
    height: 14px;
}

.ue-identity-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Tab bar (full-bleed: bleeds into op-admin-body padding) ── */
/* Negative margin lives on the host element so it isn't clipped by
   the FluentTabs web component's internal overflow. */
.ue-tabs {
}
.ue-tabs::part(tablist),
.ue-tabs [role="tablist"] {
    width: 100%;              /* full-width row + bottom border (the bar stays edge-to-edge) */
    box-sizing: border-box;
    display: flex;            /* override FAST's stretch layout so the tabs hug their content
                                 and pack left instead of spreading across the whole row.
                                 Safe here: ShowActiveIndicator="false", so FAST's grid-row
                                 active indicator is unused (we draw our own ::after underline). */
    justify-content: flex-start;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    padding: 0 22px;
}
.ue-tabs fluent-tab {
    position: relative;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--op-muted);
    transition: color 0.15s;
}
.ue-tabs fluent-tab:hover {
    color: var(--op-ink2);
}
.ue-tabs fluent-tab[aria-selected="true"] {
    font-weight: 600;
    color: var(--op-ink);
}
.ue-tabs fluent-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background-color: var(--op-accent);
    z-index: 2;
}

.ue-tab-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ue-tab-label svg {
    width: 14px;
    height: 14px;
}

.ue-required-tab::after {
    content: " *";
    color: var(--op-error);
    font-weight: 700;
}

/* ── Tab content area ── */
.ue-tab-content {
    padding: 8px 22px 28px;
}

/* ── Section titles ── */
.ue-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink);
    border-bottom: 1px solid var(--op-hairlineSoft);
    padding-bottom: 8px;
    margin: 24px 0 14px;
}

/* ── Field grid (2-col default) ── */
.ue-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.ue-field-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.ue-field {
    min-width: 0;
}
.ue-field-hint {
    font-size: 11px;
    color: var(--op-muted);
    margin-top: 2px;
    display: block;
}
.ue-muted-text {
    font-size: 13px;
    color: var(--op-muted);
}

/* ── Authentication rows (General tab) ── */
.ue-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.ue-auth-label {
    font-size: 13px;
    color: var(--op-ink2);
}
/* Left group: the label + its status badge, kept together away from the control on the right. */
.ue-auth-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ue-auth-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Membership pills (General tab) ── */
.ue-membership {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.ue-group-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 4px 10px;
    color: var(--op-ink2);
}
.ue-group-pill svg {
    width: 14px;
    height: 14px;
    color: var(--op-muted);
}

/* ── Empty state ── */
.ue-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: 14px;
    color: var(--op-muted);
    font-size: 14px;
}

/* ── IP Phone summary card ── */
.ue-phone-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
}
.ue-phone-icon-box {
    width: 46px;
    height: 60px;
    background: var(--op-chrome);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ue-phone-card-info {
    flex: 1;
    min-width: 0;
}
.ue-phone-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ue-phone-model-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--op-ink);
}
.ue-phone-card-meta {
    font-size: 11px;
    color: var(--op-muted);
    margin-top: 4px;
}
.ue-phone-card-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Codecs grid ── */
.ue-codec-header {
    display: grid;
    grid-template-columns: 30px 60px 1fr 40px;
    gap: 0 12px;
    align-items: center;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--op-hairline);
}
.ue-codec-col-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--op-ink2);
}
.ue-codec-row {
    display: grid;
    grid-template-columns: 30px 60px 1fr 40px;
    gap: 0 12px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--op-hairlineSoft);
    font-size: 13px;
}

/* ── BLF tab ── */
.ue-blf-tpl-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ue-blf-tpl-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--op-ink2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ue-blf-tpl-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--op-muted);
}
.ue-blf-tpl-manage {
    font-size: 12px;
    color: var(--op-accentDk);
    text-decoration: none;
}
.ue-blf-tpl-manage:hover {
    text-decoration: underline;
}
.ue-blf-editor {
    width: 100%;
}
.ue-blf-header {
    display: grid;
    grid-template-columns: 24px 36px 190px 1fr 28px;
    gap: 0 10px;
    padding: 8px 4px;
    background: var(--op-surfaceAlt);
    border-radius: 6px 6px 0 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--op-ink2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ue-blf-row {
    display: grid;
    grid-template-columns: 24px 36px 190px 1fr 28px;
    gap: 0 10px;
    padding: 6px 4px;
    align-items: center;
    border-bottom: 1px solid var(--op-hairlineSoft);
    font-size: 13px;
}
.ue-blf-row:last-of-type {
    border-bottom: none;
}
.ue-blf-row--blank {
    background: var(--op-surfaceAlt);
}
.ue-blf-col-drag { display: flex; align-items: center; }
.ue-blf-col-key  { font-weight: 600; text-align: right; font-size: 12px; }
.ue-blf-col-type { min-width: 0; }
.ue-blf-col-value { min-width: 0; }
.ue-blf-col-del  { display: flex; justify-content: center; }
/* FAST selects default to min-width: 250px, which overflows the fixed Type track and
   visually overlaps the Value column — pin them to their grid cell instead. */
.ue-blf-col-type fluent-select,
.ue-blf-col-value fluent-select { min-width: 0; }

.ue-blf-add {
    appearance: none;
    border: 2px dashed var(--op-hairline);
    background: transparent;
    border-radius: 6px;
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--op-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color 0.15s, color 0.15s;
}
.ue-blf-add:hover {
    border-color: var(--op-accent);
    color: var(--op-accent);
}

/* ── Permissions table ── */
.ue-perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ue-perm-table thead th {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    padding: 10px 6px;
    background: var(--op-surfaceAlt);
    border-bottom: 1px solid var(--op-hairline);
    white-space: nowrap;
    color: var(--op-ink2);
}
.ue-perm-table thead th:first-child {
    text-align: left;
    border-radius: 6px 0 0 0;
}
.ue-perm-table thead th:last-child {
    border-radius: 0 6px 0 0;
}
.ue-perm-table tbody td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    vertical-align: middle;
}
.ue-perm-table tbody tr:last-child td {
    border-bottom: none;
}
.ue-perm-group-col {
    text-align: left;
    min-width: 160px;
}
.ue-perm-group-name {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ue-perm-group-name svg {
    width: 16px;
    height: 16px;
}
.ue-perm-group-num {
    font-size: 11px;
    color: var(--op-muted);
    margin-left: 22px;
}
.ue-perm-check-col {
    text-align: center;
    width: 100px;
}
.ue-perm-check-col fluent-checkbox {
    display: inline-flex;
    justify-content: center;
}

/* ── SortableJS drag-and-drop (shared) ── */
.sortable-ghost {
    opacity: 0.4;
    background: var(--op-accentSoft);
}
.drag-handle {
    cursor: grab;
}
.drag-handle:active {
    cursor: grabbing;
}

/* ── Phone model combobox (Configure Phone dialog) ── */
.phone-model-dropdown fluent-listbox,
.phone-model-dropdown::part(listbox) {
    max-height: 250px;
    overflow-y: auto;
}

/* ============================================================================
 * /office/users/edit Call Forwarding tab.
 *
 *   .office-users-fw-layout  — two-column grid: 150px inner sidebar + 1fr form
 *   .office-users-fw-sidebar — vertical list of profile slots
 *   .office-users-fw-content — form pane on the right
 *   .office-users-fw-section — labelled block within a form (Unanswered Calls
 *                              / Busy or not Registered / General options / Greeting)
 *   .office-users-fw-row     — single label-and-input line
 *   .office-users-fw-field   — labelled control (label on top, control below)
 *   .office-users-fw-dest-row— horizontal row of type-picker + sub-picker
 * ============================================================================ */

.office-users-fw-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
}

.office-users-fw-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--op-hairline);
    padding-right: 12px;
}

.office-users-fw-sidebar-item {
    appearance: none;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    color: var(--op-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.office-users-fw-sidebar-item:hover {
    background-color: var(--op-bg);
}

.office-users-fw-sidebar-item.active {
    color: var(--op-accentDk);
    background-color: rgba(5, 151, 212, 0.08);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.office-users-fw-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.office-users-fw-section {
    border-top: 1px solid var(--op-hairline);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.office-users-fw-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.office-users-fw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.office-users-fw-label {
    font-size: 13px;
    color: var(--op-ink);
}

.office-users-fw-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.office-users-fw-dest-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Exceptions table — non-Fluent layout (4-column CSS grid). Phase 2 ships
   read-only; Phase 2B adds the Add/Edit modal and inline-edit affordances. */
.office-users-fw-exceptions-grid {
    border: 1px solid var(--op-hairline);
    border-radius: 4px;
    overflow: hidden;
}

.office-users-fw-exceptions-header,
.office-users-fw-exceptions-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr 1fr;
    gap: 12px;
    padding: 10px 16px;
}

.office-users-fw-exceptions-header {
    background-color: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    font-weight: 600;
    font-size: 13px;
}

.office-users-fw-exceptions-row {
    border-bottom: 1px solid var(--op-hairline);
    font-size: 13px;
}

.office-users-fw-exceptions-row:last-child {
    border-bottom: none;
}

.office-users-fw-exceptions-empty {
    padding: 24px;
    text-align: center;
}

/* ============================================================================
 * Login layout — Operator design: light bg, centered 420px card, utility bars.
 * ============================================================================ */

.op-login-shell {
    height: 100vh;
    background: var(--op-bg);
    font-family: var(--op-sans);
    color: var(--op-ink);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.op-login-topbar {
    display: flex;
    align-items: center;
    padding: 22px 28px;
}

.op-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.op-login-wordmark {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.op-login-kicker {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--op-hairline);
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.op-login-help {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12.5px;
    color: var(--op-muted);
}

.op-login-help a {
    color: var(--op-ink2);
    font-weight: 500;
    text-decoration: none;
}

.op-login-help a:hover { text-decoration: underline; }

.op-login-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.op-login-card {
    width: 420px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px -20px rgba(10,12,16,0.10);
    padding: 38px 36px;
}

.op-login-footer {
    border-top: 1px solid var(--op-hairline);
    background: var(--op-surface);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-muted);
}

.op-login-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.op-login-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #15803d;
    box-shadow: 0 0 6px #15803d;
}

.op-login-status-text {
    color: var(--op-ink2);
    font-weight: 500;
}

.op-login-sep { opacity: 0.4; }

.op-login-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
    color: var(--op-ink);
}

.op-login-subtitle {
    font-size: 13.5px;
    color: var(--op-muted);
    margin: 0 0 26px;
    line-height: 1.5;
}

.op-login-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
    text-decoration: none;
}

.op-login-field { margin-bottom: 14px; }

.op-login-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--op-ink2);
    margin-bottom: 6px;
    display: block;
}

.op-login-label-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;
}

.op-login-label-row .op-login-label { margin-bottom: 0; }

.op-login-forgot {
    margin-left: auto;
    color: var(--op-accentDk);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.op-login-forgot:hover { text-decoration: underline; }

.op-login-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 12px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 7px;
    transition: border-color var(--op-transition), box-shadow var(--op-transition);
}

.op-login-input-wrap:focus-within {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 3px var(--op-accentSoft);
}

.op-login-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 14px;
    color: var(--op-ink);
    width: 100%;
    min-width: 0;
}

.op-login-input::placeholder { color: var(--op-muted); }

.op-login-input[type="password"] {
    font-family: var(--op-mono);
    letter-spacing: 0.2em;
}

.op-login-eye {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--op-muted);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.op-login-eye:hover { color: var(--op-ink2); }

.op-error-banner {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--op-errorSoft);
    border: 1px solid var(--op-error);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--op-error);
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-error-banner::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16v0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16v0'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Warning-tinted sibling of .op-error-banner (e.g. the expired-license notice on the dashboard). */
.op-warning-banner {
    margin-bottom: 14px;
    padding: 10px 14px;
    background: var(--op-warningSoft);
    border: 1px solid var(--op-warning);
    border-radius: 7px;
    font-size: 12.5px;
    color: var(--op-warning);
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-warning-banner::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16v0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16v0'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.op-login-success {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: var(--op-successSoft);
    border: 1px solid var(--op-success);
    border-radius: 7px;
    font-size: 13px;
    color: var(--op-success);
    display: flex;
    align-items: center;
    gap: 8px;
}

.op-login-btn-primary {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    border: none;
    background: var(--op-ink);
    color: #fff;
    font-family: var(--op-sans);
    font-size: 14px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity var(--op-transition);
}

.op-login-btn-primary:hover { opacity: 0.9; }
.op-login-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.op-login-sso-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 14px;
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-mutedSoft);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.op-login-sso-line {
    flex: 1;
    height: 1px;
    background: var(--op-hairlineSoft);
}

.op-login-btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--op-hairline);
    border-radius: 7px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink2);
    text-decoration: none;
    transition: opacity var(--op-transition), border-color var(--op-transition);
}

.op-login-btn-sso:hover { opacity: 0.9; }

.op-login-sso-icon { display: flex; align-items: center; }
.op-login-sso-icon svg { width: 18px; height: 18px; }

.op-login-info {
    margin-top: 22px;
    padding: 12px 14px;
    background: var(--op-bg);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    font-size: 12.5px;
    color: var(--op-ink2);
    line-height: 1.5;
}

/* ============================================================================
 * Dashboard
 * ============================================================================ */

.op-dash-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.op-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
}

.op-dash-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.op-dash-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    align-items: center;
}

.op-dash-kv-label {
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
    white-space: nowrap;
}

.op-dash-kv-value {
    font-size: 12.5px;
    color: var(--op-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}

.op-dash-kv-link {
    margin-left: auto;
    color: var(--op-accentDk);
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.op-dash-kv-link:hover { text-decoration: underline; }

.op-dash-svc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    font-size: 12.5px;
}

.op-dash-svc-row:last-child { border-bottom: none; }

.op-dash-svc-label {
    font-weight: 500;
    color: var(--op-ink);
}

.op-dash-svc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
}

.op-dash-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.op-dash-bar-item {}

.op-dash-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 4px;
}

.op-dash-progress {
    height: 6px;
    background: var(--op-hairlineSoft);
    border-radius: 3px;
    overflow: hidden;
}

.op-dash-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.op-dash-usage-green { background: var(--op-success); }
.op-dash-usage-amber { background: var(--op-warning); }
.op-dash-usage-red   { background: var(--op-error); }

.op-dash-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.op-dash-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink2);
    text-decoration: none;
    border-bottom: 1px solid var(--op-hairlineSoft);
    transition: background var(--op-transition);
}

.op-dash-link:nth-child(odd) { border-right: 1px solid var(--op-hairlineSoft); }
.op-dash-link:hover { background: var(--op-bg); }
.op-dash-link svg { color: var(--op-muted); }

@media (max-width: 1200px) {
    .op-dash-tiles { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .op-dash-tiles { grid-template-columns: repeat(2, 1fr); }
    .op-dash-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .op-dash-links { grid-template-columns: 1fr; }
    .op-dash-link:nth-child(odd) { border-right: none; }
}

/* ============================================================================
 * FluentUI Operator Overrides — restyle web components inside the admin body
 * to match the Operator design system without replacing component markup.
 * ============================================================================ */

.op-admin-body,
.op-body,
.op-main {
    --neutral-stroke-divider-rest: var(--op-hairlineSoft);
    --neutral-fill-input-rest:   var(--op-surface);
    --neutral-fill-input-hover:  var(--op-surface);
    --neutral-fill-input-focus:  var(--op-surface);
    --neutral-stroke-input-rest: var(--op-hairline);
    --neutral-stroke-input-hover: var(--op-ink2);
    --neutral-stroke-input-focus: var(--op-accent);
    --neutral-layer-card-container: var(--op-surface);
    --accent-fill-rest: var(--op-accentDk);
    --accent-fill-hover: color-mix(in srgb, var(--op-accentDk) 88%, black);
    --accent-fill-active: color-mix(in srgb, var(--op-accentDk) 88%, black);
    --foreground-on-accent-rest: #fff;
    --foreground-on-accent-hover: #fff;
}

fluent-data-grid {
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
}

fluent-data-grid-row[row-type="header"],
fluent-data-grid-row[row-type="header"]::part(row) {
    background: var(--op-surfaceAlt);
}

fluent-data-grid-row[row-type="header"] fluent-data-grid-cell {
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--op-muted);
}

fluent-data-grid-row:not([row-type="header"]) {
    border-bottom: 1px solid var(--op-hairlineSoft);
    font-size: 12.5px;
}

fluent-data-grid-row:not([row-type="header"]):hover {
    background: var(--op-bg);
}

fluent-data-grid-cell {
    color: var(--op-ink);
    font-variant-numeric: tabular-nums;
    padding: 7px 12px;
    align-items: center;
}

fluent-data-grid-cell a {
    color: var(--op-accentDk);
    text-decoration: none;
    font-weight: 500;
}

fluent-data-grid-cell a:hover { text-decoration: underline; }

fluent-data-grid fluent-button,
fluent-data-grid .fluent-button {
    --neutral-fill-stealth-rest: transparent;
    --neutral-fill-stealth-hover: var(--op-bg);
}

fluent-search {
    --neutral-fill-input-rest: var(--op-surface);
    --neutral-stroke-input-rest: var(--op-hairline);
}

fluent-search::part(root) {
    border-radius: 0;
    border-left: none;
    border-right: none;
    height: 38px;
}

fluent-select::part(control) {
    border-color: var(--op-hairline);
    border-radius: 6px;
    font-size: 12.5px;
    height: 34px;
}

fluent-tabs::part(tablist) {
    border-bottom-color: var(--op-hairline);
}

fluent-tab {
    font-size: 13px;
    font-weight: 500;
    color: var(--op-ink2);
}

fluent-tab[aria-selected="true"] {
    color: var(--op-accentDk);
    font-weight: 600;
}

fluent-dialog::part(control) {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 12px;
    box-shadow: var(--op-shadow-float);
}

fluent-text-field::part(root) {
    border-color: var(--op-hairline);
    border-radius: 6px;
}

fluent-text-field::part(control) {
    font-size: 13px;
    height: 34px;
}

fluent-text-field:focus-within::part(root) {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 2px var(--op-accentSoft);
}

fluent-message-bar {
    border-radius: 8px;
    margin-bottom: 12px;
}

fluent-progress-ring {
    --accent-fill-rest: var(--op-accent);
}

/* ============================================================================
 * Misc utilities
 * ============================================================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-layer-1);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-foreground-hint);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-foreground-rest);
}

/* --- Report stub page layout --- */
.report-stub-page {
    max-width: 900px;
}

.report-stub-page .report-stub-notice {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: 6px;
    background: var(--neutral-layer-2, #f5f5f5);
    color: var(--neutral-foreground-hint);
    font-size: 14px;
}

/* ============================================================================
 * Chat Log Report — /office/reports/chats
 * Toolbar with range badge + filter toggle + search, collapsible filter panel,
 * tabular results, detail drill-down. Matches the 3CX Chat Log UI.
 * ============================================================================ */

.rpt-chat { display: flex; flex-direction: column; gap: 0; }

/* ── Header bar ── */
.rpt-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}
.rpt-chat-back {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.rpt-chat-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--op-ink);
}
.rpt-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
}
.rpt-chat-export,
.rpt-chat-print,
.rpt-chat-search-btn { background: var(--op-accentDk); }
.rpt-chat-export:hover,
.rpt-chat-print:hover,
.rpt-chat-search-btn:hover { background: color-mix(in srgb, var(--op-accentDk) 88%, black); }
.rpt-chat-help {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--op-muted);
    text-decoration: none;
    padding: 8px 4px;
}

/* ── Toolbar: range badge + filter + search ── */
.rpt-chat-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--op-hairline);
}
.rpt-chat-range-badge {
    display: inline-block;
    background: var(--op-accentDk);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
}
.rpt-chat-filter-toggle {
    background: none;
    border: 1px solid var(--op-hairline);
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.rpt-chat-filter-toggle:hover { background: var(--op-bg); }
.rpt-chat-filter-toggle.active { background: var(--op-accent); border-color: var(--op-accent); }
.rpt-chat-search {
    flex: 1;
    padding: 6px 12px;
    border: none;
    outline: none;
    font-size: 13px;
    background: transparent;
    color: var(--op-ink);
}

/* ── Collapsible filter panel ── */
.rpt-chat-filter-panel {
    padding: 16px 0;
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
}
.rpt-chat-filter-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.rpt-chat-filter-row label {
    width: 80px;
    font-size: 13px;
    font-weight: 500;
    color: var(--op-ink);
    flex-shrink: 0;
}
.rpt-chat-filter-row select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--op-hairline);
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    background: var(--op-surface);
    color: var(--op-ink);
}
.rpt-chat-filter-row select:focus { border-color: var(--op-accent); }
.rpt-chat-filter-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

/* ── Results table ── */
.rpt-chat-table-wrap {
    margin-top: 0;
    overflow-x: auto;
}
.rpt-chat-loading {
    display: flex;
    justify-content: center;
    padding: 40px;
}
.rpt-chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rpt-chat-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--op-ink);
    border-bottom: 2px solid var(--op-hairline);
    white-space: nowrap;
}
.rpt-chat-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    color: var(--op-ink);
    vertical-align: top;
}
.rpt-chat-table tbody tr:hover { background: var(--op-bg); }
.rpt-chat-no-data {
    text-align: center;
    padding: 40px 12px !important;
    color: var(--op-muted);
}
.rpt-chat-detail-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 4px;
}
.rpt-chat-detail-btn:hover { background: var(--op-bg); }

@media print {
    .rpt-chat-header,
    .rpt-chat-toolbar,
    .rpt-chat-filter-panel { display: none; }
    .rpt-chat-table { font-size: 11px; }
}

/* --- Allowed Country Codes accordion --- */
.acc-region-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}

.acc-region-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    text-align: left;
    color: inherit;
}

.acc-region-toggle:hover {
    background: var(--neutral-layer-2, #f5f5f5);
    border-radius: 4px;
}

.acc-region-body {
    display: flex;
    flex-direction: column;
    padding: 0 0 12px 28px;
}

/* ── Alerts page ── */

.alerts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px;
    max-width: 1100px;
}
.alerts-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alert-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}
.alert-unit {
    font-size: 13px;
    color: var(--neutral-foreground-hint, #888);
    white-space: nowrap;
}
@media (max-width: 768px) {
    .alerts-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── Remote Storage page ── */

.storage-table-wrap {
    overflow-x: auto;
}
.storage-table {
    width: 100%;
    border-collapse: collapse;
}
.storage-table th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    white-space: nowrap;
}
.storage-table td {
    padding: 10px 12px 10px 0;
    vertical-align: middle;
}

/* ============================================================================
 * Softphone Panel — Operator Design System
 * Slide-out from right edge, 360px wide, 5 visual states.
 * All classes use `sp-*` prefix.
 * ============================================================================ */

/* ── Animations ── */
@keyframes sp-ring {
    0%   { transform: scale(1);   opacity: 0.5; }
    100% { transform: scale(2.4); opacity: 0; }
}
@keyframes sp-caret {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ── Frame (outer shell) ── */
.sp-frame {
    position: fixed;
    top: 52px;
    right: 0;
    width: 360px;
    background: var(--op-surface);
    border-left: 1px solid var(--op-hairline);
    box-shadow: -8px 0 24px rgba(0,0,0,0.06);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow: visible;
    max-height: calc(100vh - 52px);
}
.sp-frame.sp-open { transform: translateX(0); }

/* ── Header (44px) ── */
.sp-header {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px;
    border-bottom: 1px solid var(--op-hairline);
    flex-shrink: 0;
    background: var(--op-surfaceAlt);
}
.sp-header-btn {
    width: 26px; height: 26px;
    border-radius: 5px;
    border: 1px solid var(--op-hairline);
    background: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--op-transition);
}
.sp-header-btn:hover { background: var(--op-bg); }
.sp-header-btn--close { border: none; }

/* Registration state */
.sp-reg { display: flex; align-items: center; gap: 5px; }
.sp-reg-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.sp-reg-dot.dot-available {
    background: var(--op-success);
    box-shadow: 0 0 0 3px var(--op-successSoft);
}
.sp-reg-dot.dot-dnd {
    background: var(--op-error);
    box-shadow: 0 0 0 3px var(--op-errorSoft);
}
.sp-reg-dot.dot-away {
    background: var(--op-warning);
    box-shadow: 0 0 0 3px var(--op-warningSoft);
}
.sp-reg-label {
    font-family: var(--op-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.sp-reg-dot.dot-available + .sp-reg-label { color: var(--op-success); }
.sp-reg-dot.dot-dnd + .sp-reg-label      { color: var(--op-error); }
.sp-reg-dot.dot-away + .sp-reg-label     { color: var(--op-warning); }
.sp-reg-sub {
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-muted);
}

/* ── Status dot (shared by BLF rows, results) ── */
.sp-status-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.sp-status-dot.dot-available {
    background: var(--op-success);
    box-shadow: 0 0 0 3px var(--op-successSoft);
}
.sp-status-dot.dot-away {
    background: var(--op-warning);
    box-shadow: 0 0 0 3px var(--op-warningSoft);
}
.sp-status-dot.dot-busy {
    background: var(--op-error);
    box-shadow: 0 0 0 3px var(--op-errorSoft);
}

/* ── BLF Panel ── */
.sp-blf {
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.sp-blf-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.sp-blf-title {
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--op-muted);
}
.sp-blf-count {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-success);
    background: var(--op-successSoft);
    padding: 2px 8px;
    border-radius: 10px;
}
.sp-blf-list {
    max-height: 240px;
    overflow-y: auto;
}
.sp-blf-empty {
    padding: 16px 14px;
    font-size: 12px;
    color: var(--op-muted);
}
.sp-blf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: background var(--op-transition);
}
.sp-blf-row:hover { background: var(--op-bg); }
.sp-blf-ext {
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-ink);
    flex-shrink: 0;
    min-width: 32px;
}
.sp-blf-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--op-ink2);
}
.sp-blf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 14px;
    border-top: 1px solid var(--op-hairlineSoft);
}
.sp-blf-summary {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-muted);
}

/* ── Body ── */
.sp-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    flex: 1;
}

/* ======== STATE 1: Idle / Dialer ======== */
.sp-dialer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px 0;
    gap: 10px;
    flex: 1;
}

/* Input row */
.sp-dial-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color var(--op-transition), box-shadow var(--op-transition);
}
.sp-dial-input-row:focus-within {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 2px var(--op-accentSoft);
}
.sp-dial-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-family: var(--op-mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--op-ink);
    min-width: 0;
}
.sp-dial-input::placeholder { color: var(--op-muted); }
.sp-dial-clear {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; padding: 2px;
    opacity: 0.5;
}
.sp-dial-clear:hover { opacity: 1; }
.sp-dial-caret {
    width: 1.5px; height: 20px;
    background: var(--op-accent);
    animation: sp-caret 1s step-end infinite;
    flex-shrink: 0;
}
/* Hide custom caret when real browser cursor is active */
.sp-dial-input-row:focus-within .sp-dial-caret { display: none; }

/* Call-via info */
.sp-call-via {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 2px;
}
.sp-call-via span {
    font-family: var(--op-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--op-muted);
}

/* Search results (always rendered; sp-results--empty when no hits) */
.sp-results {
    width: 100%;
    min-height: 48px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    background: var(--op-surface);
    transition: min-height 0.15s ease;
}
.sp-results--empty {
    border-color: transparent;
    background: transparent;
    min-height: 48px;
}
.sp-result {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 12px;
    border: none; background: none; cursor: pointer;
    text-align: left; font-size: 13px;
    transition: background var(--op-transition);
}
.sp-result:hover, .sp-result--active { background: var(--op-accentSoft); }
.sp-result-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--op-accentDk); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600; flex-shrink: 0;
}
.sp-result-info { display: flex; flex-direction: column; min-width: 0; }
.sp-result-name {
    font-weight: 500; font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--op-ink);
}
.sp-result-num {
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-muted);
}

/* Dialpad */
.sp-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 280px;
    margin: 4px 0;
}
.sp-pad-key {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    cursor: pointer;
    transition: background var(--op-transition);
    font-family: var(--op-mono);
}
.sp-pad-key:hover { background: var(--op-bg); }
.sp-pad-key:active { background: var(--op-hairlineSoft); }
.sp-pad-digit { font-size: 22px; font-weight: 500; line-height: 1; color: var(--op-ink); }
.sp-pad-letters { font-size: 9px; color: var(--op-muted); letter-spacing: 0.10em; margin-top: 2px; }

/* Compact DTMF pad (in-call) */
.sp-pad--compact { max-width: 240px; gap: 5px; }
.sp-pad-key--sm { height: 52px; }

/* Dialer footer */
.sp-dial-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0 16px;
    margin-top: auto;
}
.sp-call-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--op-success);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sp-call-circle:hover:not(:disabled) {
    opacity: 0.9;
    box-shadow: 0 0 0 4px var(--op-successSoft);
}
.sp-call-circle:disabled { opacity: 0.4; cursor: default; }

/* ======== STATE 2: Active Call ======== */
.sp-active {
    display: flex; flex-direction: column;
    align-items: center;
    flex: 1;
}

/* Party block */
.sp-party {
    display: flex; flex-direction: column;
    align-items: center;
    padding: 28px 20px 16px;
    gap: 4px;
}
.sp-party-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--op-accentDk); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 600;
}
.sp-party-name {
    font-size: 15px; font-weight: 600;
    color: var(--op-ink);
    margin-top: 8px;
}
.sp-party-sub {
    font-family: var(--op-mono);
    font-size: 11.5px;
    color: var(--op-muted);
}
.sp-party-timer {
    font-family: var(--op-mono);
    font-size: 32px;
    font-variant-numeric: tabular-nums;
    color: var(--op-ink);
    letter-spacing: -0.02em;
    margin-top: 4px;
}

/* DTMF display bar */
.sp-dtmf-bar {
    font-family: var(--op-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--op-accentDk);
    text-align: center;
    padding: 6px 14px;
    margin: 0 20px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    word-break: break-all;
    min-height: 28px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

/* 3x2 Control grid */
.sp-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 20px;
    width: 100%;
    box-sizing: border-box;
}
.sp-ctrl {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    cursor: pointer;
    font-size: 10px;
    color: var(--op-ink2);
    transition: background var(--op-transition), border-color var(--op-transition);
}
.sp-ctrl:hover { background: var(--op-bg); }
.sp-ctrl--on {
    background: var(--op-accentSoft);
    border-color: var(--op-accent);
    color: var(--op-accentDk);
}

/* End call footer */
.sp-end-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px 16px;
    margin-top: auto;
}
.sp-end-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--op-error);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    transition: opacity 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sp-end-circle:hover {
    opacity: 0.9;
    box-shadow: 0 0 0 4px var(--op-errorSoft);
}

/* Held calls strip (multi-call) */
.sp-held-strip {
    width: 100%;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    flex-shrink: 0;
}
.sp-held-call {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.sp-held-call:last-child { border-bottom: none; }
.sp-held-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--op-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-held-badge {
    font-family: var(--op-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--op-warning);
    background: var(--op-warningSoft);
    padding: 2px 7px;
    border-radius: 10px;
}
.sp-held-resume {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--op-hairline);
    background: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--op-transition);
    flex-shrink: 0;
}
.sp-held-resume:hover { background: var(--op-bg); }

/* ======== STATE 3: Incoming Ring ======== */
.sp-incoming {
    display: flex; flex-direction: column;
    align-items: center;
    padding: 32px 20px 0;
    gap: 8px;
    flex: 1;
}

/* Pulsing avatar */
.sp-ring-wrap {
    position: relative;
    width: 90px; height: 90px;
    margin-bottom: 12px;
}
.sp-ring-pulse {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid var(--op-accent);
    animation: sp-ring 2s ease-out infinite;
}
.sp-ring-pulse--2 { animation-delay: 0.5s; }
.sp-ring-pulse--3 { animation-delay: 1.0s; }
.sp-ring-avatar {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--op-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 600;
    /* Keep avatar centered within the 90px box */
    width: 90px; height: 90px;
}
.sp-ring-badge {
    font-family: var(--op-mono);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--op-accentDk);
    margin-top: 4px;
}
.sp-ring-name {
    font-size: 19px;
    font-weight: 600;
    color: var(--op-ink);
}
.sp-ring-number {
    font-family: var(--op-mono);
    font-size: 13px;
    color: var(--op-muted);
}

/* Context card */
.sp-ring-ctx {
    width: 100%;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
}
.sp-ring-ctx-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.sp-ring-ctx-row span:first-child {
    font-family: var(--op-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--op-muted);
}
.sp-ring-ctx-row span:last-child {
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-ink2);
}

/* Quick actions */
.sp-ring-quick {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.sp-ring-quick-btn {
    font-family: var(--op-mono);
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--op-hairline);
    background: none;
    cursor: pointer;
    color: var(--op-ink2);
    transition: background var(--op-transition);
}
.sp-ring-quick-btn:hover { background: var(--op-bg); }

/* Accept / Decline footer */
.sp-ring-footer {
    display: flex;
    gap: 10px;
    width: 100%;
    padding: 16px 0;
    margin-top: auto;
}
.sp-ring-decline {
    flex: 1;
    height: 52px;
    border-radius: 10px;
    background: var(--op-error);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff;
    font-family: var(--op-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sp-ring-answer {
    flex: 1.6;
    height: 52px;
    border-radius: 10px;
    background: var(--op-success);
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff;
    font-family: var(--op-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 0 0 4px var(--op-successSoft);
}
.sp-ring-decline:hover, .sp-ring-answer:hover { opacity: 0.92; }

/* ======== STATE 5: Transfer Overlay ======== */
.sp-transfer {
    position: absolute; inset: 0;
    background: var(--op-surface);
    display: flex; flex-direction: column;
    z-index: 10;
    padding: 20px;
}
.sp-transfer-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.sp-transfer-title {
    font-size: 14px; font-weight: 600;
    color: var(--op-ink);
}
.sp-transfer-held {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-warning);
    background: var(--op-warningSoft);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Transfer input */
.sp-transfer-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-accent);
    border-radius: 8px;
    box-shadow: 0 0 0 3px var(--op-accentSoft);
    box-sizing: border-box;
    margin-bottom: 12px;
}
.sp-transfer-input {
    flex: 1;
    border: none; background: none; outline: none;
    font-family: var(--op-mono);
    font-size: 13px;
    color: var(--op-ink);
}
.sp-transfer-input::placeholder { color: var(--op-muted); }

/* Transfer type pills */
.sp-transfer-types {
    display: flex; gap: 6px;
    margin-bottom: 16px;
}
.sp-transfer-pill {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--op-hairline);
    background: none;
    cursor: pointer;
    text-align: center;
    transition: background var(--op-transition);
}
.sp-transfer-pill--active {
    background: var(--op-chrome);
    border-color: var(--op-chrome);
    color: #fff;
}
.sp-transfer-pill-label {
    display: block;
    font-family: var(--op-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.sp-transfer-pill-sub {
    display: block;
    font-size: 10px;
    color: var(--op-muted);
    margin-top: 1px;
}
.sp-transfer-pill--active .sp-transfer-pill-sub { color: rgba(255,255,255,0.6); }

/* Transfer footer */
.sp-transfer-footer {
    display: flex; gap: 10px;
    margin-top: auto;
}
.sp-transfer-cancel {
    padding: 10px 20px;
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    background: var(--op-surface);
    color: var(--op-ink);
    cursor: pointer;
    font-size: 13px;
    transition: background var(--op-transition);
}
.sp-transfer-cancel:hover { background: var(--op-bg); }
.sp-transfer-go {
    flex: 1.5;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: var(--op-accentDk);
    color: #fff;
    cursor: pointer;
    font-family: var(--op-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
}
.sp-transfer-go:hover:not(:disabled) { opacity: 0.9; }
.sp-transfer-go:disabled { opacity: 0.4; cursor: default; }

/* ============================================================================
 * Chat Page — Operator design, 3-column layout
 * Left (300px): conversation list | Center: thread | Right (280px): context
 * ============================================================================ */

.chat-layout {
    display: grid;
    grid-template-columns: 300px 1fr 280px;
    grid-template-rows: 1fr;
    height: 100%;
    overflow: hidden;
    background: var(--op-surface);
}

/* ══ Sidebar (left panel) ══════════════════════════════════════════════════ */

.chat-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--op-hairline);
    background: var(--op-surface);
}
.chat-sidebar-header {
    padding: 12px 12px 0;
    flex-shrink: 0;
}
.chat-sidebar-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-search-wrap {
    flex: 1;
    position: relative;
}
.chat-search-input {
    width: 100%;
    height: 30px;
    padding: 0 10px 0 28px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    font-family: var(--op-sans);
    font-size: 12px;
    outline: none;
    background: var(--op-surfaceAlt);
    color: var(--op-ink);
    box-sizing: border-box;
}
.chat-search-input::placeholder { color: var(--op-muted); }
.chat-search-input:focus { border-color: var(--op-accent); background: var(--op-surface); }
.chat-sidebar-new {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 6px;
    background: var(--op-chrome);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--op-transition);
}
.chat-sidebar-new:hover { background: var(--op-chromeAlt); }

/* ── Filter tabs ── */

.chat-filter-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 8px;
    flex-shrink: 0;
}
.chat-filter-tab {
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid var(--op-hairline);
    background: none;
    font-family: var(--op-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--op-ink2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--op-transition);
    white-space: nowrap;
}
.chat-filter-tab em {
    font-style: normal;
    font-weight: 600;
    color: var(--op-muted);
    font-size: 10px;
}
.chat-filter-tab:hover { background: var(--op-bg); }
.chat-filter-tab.active {
    background: var(--op-chrome);
    color: #fff;
    border-color: var(--op-chrome);
}
.chat-filter-tab.active em { color: rgba(255,255,255,0.7); }

/* ── Sidebar list ── */

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
}
.chat-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 6px;
    color: var(--op-muted);
    font-size: 12px;
}

/* ── Conversation item ── */

.chat-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--op-transition);
}
.chat-conv-item:hover { background: var(--op-bg); }
.chat-conv-item.active {
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
}
.chat-conv-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-conv-top {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.chat-conv-name {
    font-weight: 500;
    font-size: 13px;
    color: var(--op-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.chat-conv-name.unread { font-weight: 700; }
.chat-conv-ext {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-muted);
    flex-shrink: 0;
}
.chat-conv-time {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-muted);
    flex-shrink: 0;
    margin-left: auto;
}
.chat-conv-bottom {
    display: flex;
    align-items: center;
}
.chat-conv-preview {
    font-size: 11.5px;
    color: var(--op-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.chat-conv-preview.unread { color: var(--op-ink2); font-weight: 500; }
.chat-conv-badge {
    background: var(--op-accentDk);
    color: #fff;
    font-family: var(--op-sans);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    flex-shrink: 0;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── Avatar + presence ── */

.chat-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.chat-avatar,
.chat-avatar-sm {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--op-sans);
}
.chat-avatar {
    width: 34px; height: 34px;
    font-weight: 700;
    font-size: 12px;
}
.chat-avatar.chat-avatar-lg {
    width: 36px; height: 36px;
    font-size: 13px;
}
.chat-avatar-sm {
    width: 28px; height: 28px;
    font-weight: 600;
    font-size: 10px;
}
.chat-presence-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--op-surface);
    background: var(--op-mutedSoft);
}
.chat-presence-dot.online { background: var(--op-success); }
.chat-presence-dot.busy { background: var(--op-error); }
.chat-presence-dot.away { background: var(--op-warning); }
.chat-presence-dot.lg {
    width: 11px; height: 11px;
}
.chat-presence-dot.busy.lg {
    box-shadow: 0 0 0 3px var(--op-errorSoft);
}

/* ── New chat bar ── */

.chat-new-chat-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--op-hairline);
    position: relative;
}
.chat-new-chat-results {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 100%;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    box-shadow: var(--op-shadow-float);
    z-index: 10;
    max-height: 200px;
    overflow-y: auto;
}
.chat-new-chat-result {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    transition: background var(--op-transition);
}
.chat-new-chat-result:hover { background: var(--op-bg); }
.chat-new-chat-name {
    font-weight: 500;
    color: var(--op-ink);
    flex: 1;
}
.chat-new-chat-ext {
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-muted);
}

/* ══ Group chat (P4) ══ */
.chat-bubble-sender {
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 600;
    color: var(--op-accentDk);
    margin-bottom: 2px;
}
.chat-member-add {
    border: none;
    background: none;
    color: var(--op-accentDk);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.chat-members-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.chat-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 12px;
}
.chat-member-name {
    flex: 1;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-member-owner {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.chat-member-remove {
    border: none;
    background: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    opacity: 0.5;
    flex-shrink: 0;
}
.chat-member-remove:hover { opacity: 1; }
.chat-pick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.chat-pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: color-mix(in srgb, var(--op-accent) 12%, transparent);
    color: var(--op-accentDk);
    border-radius: 999px;
    padding: 2px 6px 2px 10px;
    font-size: 12px;
    font-weight: 500;
}
.chat-pick-chip button {
    border: none;
    background: none;
    color: var(--op-accentDk);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.chat-pick-result {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-size: 12px;
    border-radius: 6px;
}
.chat-pick-result:hover { background: var(--op-bg); }
.chat-pick-result.picked { background: var(--op-surfaceAlt); }
.chat-channel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.chat-channel-row:last-child { border-bottom: none; }

/* Presence (P6) */
.chat-presence-dot.offline { background: var(--op-mutedSoft); }
.chat-status-badge.offline {
    background: var(--op-surfaceAlt);
    color: var(--op-muted);
}
.chat-member-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chat-member-dot.online { background: var(--op-success); }
.chat-member-dot.offline { background: var(--op-mutedSoft); }

/* ══ Thread panel (center) ═════════════════════════════════════════════════ */

.chat-thread {
    display: flex;
    flex-direction: column;
    background: var(--op-surface);
    min-height: 0;
}
.chat-thread-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.chat-thread-empty-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--op-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.chat-thread-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--op-ink);
}
.chat-thread-empty-sub {
    font-size: 12px;
    color: var(--op-muted);
}

/* ── Thread header ── */

.chat-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surface);
    flex-shrink: 0;
}
.chat-thread-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.chat-thread-header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.chat-thread-header-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-thread-header-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--op-ink);
}
.chat-thread-header-ext {
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-muted);
}
.chat-thread-header-sub {
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-muted);
}

/* Status badge */
.chat-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.chat-status-badge.available {
    background: var(--op-successSoft);
    color: var(--op-success);
}
.chat-status-badge.on-call {
    background: var(--op-errorSoft);
    color: var(--op-error);
}
.chat-status-badge.away {
    background: var(--op-warningSoft);
    color: var(--op-warning);
}
.chat-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Header action buttons */
.chat-thread-header-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.chat-header-action {
    width: 32px; height: 30px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--op-transition);
}
.chat-header-action:hover { background: var(--op-bg); }
.chat-header-action.accent {
    background: var(--op-accent);
    border-color: var(--op-accent);
}
.chat-header-action.accent:hover { background: var(--op-accentDk); }

/* ── Messages area ── */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--op-bg);
}

/* ── Date separator ── */

.chat-date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 8px;
}
.chat-date-separator span {
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--op-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Message bubbles ── */

.chat-bubble-row {
    display: flex;
    margin-bottom: 2px;
}
.chat-bubble-row.sent { justify-content: flex-end; }
.chat-bubble-row.received { justify-content: flex-start; }
.chat-bubble {
    max-width: 72%;
    padding: 10px 14px;
    position: relative;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}
.chat-bubble-sent {
    background: var(--op-accentDk);
    color: #fff;
    border-radius: 12px 12px 4px 12px;
}
.chat-bubble-received {
    background: var(--op-hairline);
    color: var(--op-ink);
    border-radius: 12px 12px 12px 4px;
}
/* Outbound SMS goes green (iMessage-style) to distinguish carrier texts from internal chat */
.chat-bubble-sent.chat-bubble-sms {
    background: var(--op-success);
}
.chat-bubble-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}
.chat-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-left: auto;
    font-family: var(--op-mono);
    font-size: 10px;
}
.chat-bubble-sent .chat-bubble-meta { color: rgba(255,255,255,0.75); }
.chat-bubble-received .chat-bubble-meta { color: var(--op-muted); }

/* ── Composer ── */

.chat-input-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 20px;
    border-top: 1px solid var(--op-hairline);
    background: var(--op-surface);
    flex-shrink: 0;
}
.chat-composer-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-composer-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
/* Auto-growing composer: the ::after mirror sizes the grid, the textarea stretches to fill it. */
.chat-grow-wrap {
    display: grid;
    width: 100%;
}
.chat-grow-wrap::after {
    content: attr(data-replicated-value) " ";
    visibility: hidden;
}
.chat-grow-wrap > .chat-input,
.chat-grow-wrap::after {
    grid-area: 1 / 1 / 2 / 2;
    padding: 9px 46px 9px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: var(--op-sans);
    font-size: 13px;
    line-height: 1.5;
    box-sizing: border-box;
    max-height: 132px;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
.chat-grow-wrap > .chat-input {
    resize: none;
    overflow-y: auto;
    outline: none;
    background: var(--op-surface);
    color: var(--op-ink);
    border-color: var(--op-hairline);
}
.chat-grow-wrap > .chat-input:focus { border-color: var(--op-accent); }
.chat-grow-wrap > .chat-input::placeholder { color: var(--op-muted); }
.chat-tool-btn {
    width: 36px; height: 36px;
    border: none;
    border-radius: 8px;
    background: var(--op-surfaceAlt);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--op-transition);
}
.chat-tool-btn:hover { background: var(--op-bg); }
.chat-file-input { display: none; }
.chat-send-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 28px; height: 28px;
    border-radius: 6px;
    border: none;
    background: var(--op-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--op-transition), opacity var(--op-transition);
}
.chat-send-btn:hover:not(:disabled) { background: var(--op-accentDk); }
.chat-send-btn:disabled { opacity: 0.3; cursor: default; }
.chat-composer-hint {
    font-size: 11px;
    color: var(--op-muted);
    padding-left: 44px;
}

/* ── Row context menu + header kebab + Recents/Archive footer ── */
.chat-header-action { text-decoration: none; }
.chat-header-action:disabled { opacity: 0.4; cursor: default; }

.chat-kebab-wrap { position: relative; }
.chat-ctx-overlay { position: fixed; inset: 0; z-index: 900; background: transparent; }
.chat-ctx-menu, .chat-kebab-menu {
    z-index: 901;
    min-width: 172px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    box-shadow: var(--op-shadow-float);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.chat-ctx-menu { position: fixed; }
.chat-kebab-menu { position: absolute; right: 0; top: 36px; }
.chat-ctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    background: none;
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-ink);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 6px;
}
.chat-ctx-item:hover { background: var(--op-bg); }
.chat-ctx-item:disabled { opacity: 0.4; cursor: default; background: none; }
.chat-ctx-item.danger { color: var(--op-error); }
.chat-ctx-item.danger:hover { background: var(--op-errorSoft); }
.chat-ctx-item svg, .chat-view-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.chat-ctx-sep { height: 1px; background: var(--op-hairline); margin: 4px 6px; }

.chat-sidebar-foot {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--op-hairline);
    flex-shrink: 0;
}
.chat-view-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--op-muted);
    cursor: pointer;
    transition: background var(--op-transition), color var(--op-transition);
}
.chat-view-btn:hover { background: var(--op-bg); }
.chat-view-btn.active { background: var(--op-accentSoft); color: var(--op-accentDk); }

/* ── Shared-file chip in a message bubble ── */
.chat-file-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 180px;
    flex: 0 0 100%;
}
.chat-file-bubble-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.chat-file-bubble-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.chat-file-bubble-size {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Shared Files list in the context panel ── */
.chat-files-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.chat-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--op-ink2);
    transition: background var(--op-transition);
}
.chat-file-row:hover { background: var(--op-surfaceAlt); }
.chat-file-row-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.chat-file-row-name {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-file-row-meta {
    font-size: 10px;
    color: var(--op-muted);
}

/* ══ Context panel (right) ═════════════════════════════════════════════════ */

.chat-context-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--op-hairline);
    background: var(--op-surface);
    overflow-y: auto;
}
.chat-context-section {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.chat-context-kicker {
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--op-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.chat-context-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-context-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--op-ink);
}
.chat-context-calls-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: var(--op-bg);
    border-radius: 6px;
    font-size: 11px;
    color: var(--op-muted);
}
.chat-context-pinned {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--op-warningSoft);
    border-left: 3px solid var(--op-warning);
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    color: var(--op-ink2);
    line-height: 1.4;
}
.chat-context-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    font-size: 12px;
    color: var(--op-muted);
    text-align: center;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
    .chat-layout {
        grid-template-columns: 300px 1fr;
    }
    .chat-context-panel { display: none; }
}
@media (max-width: 768px) {
    .chat-layout {
        grid-template-columns: 1fr;
    }
    .chat-sidebar { max-height: 40vh; }
    .chat-context-panel { display: none; }
    .chat-bubble { max-width: 85%; }
}


/* ============================================================================
 * Team page (/team)
 * Dense card-grid view of all extensions with live presence,
 * contextual sidebar for group/filter navigation, quick-action buttons.
 * ============================================================================ */

/* ── Layout: sidebar + body ── */
.tm-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* ── Contextual sidebar ── */
.tm-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.tm-sidebar-section-label {
    padding: 0 16px 8px;
    font-family: var(--op-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
    display: flex;
    align-items: center;
}

/* Filter / group row */
.tm-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.tm-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}
.tm-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.tm-sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    margin: 0 3.5px;
}

.tm-sidebar-square {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    margin: 0 3.5px;
}

.tm-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

/* Live activity widget */
.tm-sidebar-live {
    margin: 20px 12px 0;
    padding: 10px 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
}
.tm-sidebar-live-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--op-muted);
    margin-bottom: 8px;
}
.tm-sidebar-live-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

/* ── Page header ── */
.tm-body {
    background: var(--op-bg);
    overflow: auto;
    min-height: 0;
}

.tm-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.tm-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.tm-badge {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tm-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--op-success);
    background: var(--op-successSoft);
    padding: 3px 8px;
    border-radius: 4px;
}

.tm-live-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--op-success);
    box-shadow: 0 0 6px var(--op-success);
}

/* Search bar */
.tm-search {
    margin-left: 14px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 0 10px;
    flex: 1;
    max-width: 420px;
}
.tm-search:focus-within {
    border-color: var(--op-accent);
}
.tm-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink);
    outline: none;
    min-width: 0;
}
.tm-search-input::placeholder {
    color: var(--op-muted);
}
.tm-search-hint {
    font-size: 10px;
    color: var(--op-muted);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    flex-shrink: 0;
}

/* Filter chips in header */
.tm-chip {
    height: 28px;
    padding: 0 10px;
    background: var(--op-surface);
    color: var(--op-ink2);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s, color 0.12s;
}
.tm-chip.active {
    background: var(--op-ink);
    color: #fff;
    border-color: var(--op-ink);
}

/* Add person button */
.tm-header-btn {
    height: 28px;
    padding: 0 11px;
    background: var(--op-ink);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
}
.tm-header-btn:hover {
    background: var(--op-chrome);
}

/* ── Card grid ── */
.tm-grid {
    padding: 16px 22px 28px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

/* ── Team card ── */
.tm-card {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    transition: border-color 0.12s;
}
.tm-card:hover {
    border-color: var(--op-accent);
}

/* Top row: avatar + identity + actions */
.tm-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* Avatar */
.tm-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.tm-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.tm-presence-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 2px solid var(--op-surface);
}

/* Identity block */
.tm-identity {
    flex: 1;
    min-width: 0;
}
.tm-name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.tm-name {
    font-family: var(--op-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.tm-ext {
    font-size: 11px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

/* Presence badge + since */
.tm-presence-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.tm-presence-badge {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}
.tm-since {
    font-size: 10.5px;
    color: var(--op-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card actions (overflow) */
.tm-card-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-top: -2px;
}
.tm-overflow {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-mutedSoft);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.12s, background 0.12s;
}
.tm-overflow:hover {
    color: var(--op-ink2);
    background: var(--op-surfaceAlt);
}

/* Meta row: DID + role */
.tm-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: var(--op-muted);
    min-height: 16px;
}

/* Live call strip */
.tm-call-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--op-errorSoft);
    border: 1px solid color-mix(in srgb, var(--op-error) 15%, transparent);
    border-radius: 5px;
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-error);
}
.tm-call-party {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--op-ink);
}
.tm-call-dur {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Bottom row: quick actions + group tag */
.tm-card-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}
.tm-quick-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Action buttons */
.tm-action-btn {
    width: 28px;
    height: 26px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 5px;
    color: var(--op-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    padding: 0;
}
.tm-action-btn:hover:not(:disabled) {
    border-color: var(--op-accent);
    color: var(--op-accent);
}
.tm-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.tm-action-btn.primary {
    background: var(--op-accentSoft);
    border-color: color-mix(in srgb, var(--op-accent) 25%, transparent);
    color: var(--op-accentDk);
}
.tm-action-btn.primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--op-accent) 20%, transparent);
    border-color: var(--op-accent);
}

/* Group tag */
.tm-group-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px 2px 5px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 3px;
    font-family: var(--op-mono);
    font-size: 10px;
    color: var(--op-ink2);
    font-weight: 500;
    margin-left: auto;
}
.tm-group-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .tm-layout {
        grid-template-columns: 1fr;
    }
    .tm-sidebar {
        display: none;
    }
    .tm-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        padding: 12px 14px 20px;
    }
    .tm-header {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
    .tm-search {
        margin-left: 0;
        max-width: none;
        order: 10;
        flex-basis: 100%;
    }
}

/* ============================================================================
 * Call History page (/call-history)
 * Contextual sidebar + body with enhanced table.
 * ============================================================================ */

/* ── Layout: sidebar + body ── */
.ch-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* ── Contextual sidebar ── */
.ch-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.ch-sidebar-kicker {
    padding: 0 16px 8px;
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
    display: flex;
    align-items: center;
}

.ch-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.ch-sidebar-item:hover:not(:disabled) {
    background: var(--op-surfaceAlt);
}

.ch-sidebar-item:disabled {
    opacity: 0.55;
    cursor: default;
}

.ch-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.ch-sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    margin: 0 3.5px;
}

.ch-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

/* Today summary card */
.ch-sidebar-summary {
    margin: auto 12px 0;
    padding: 10px 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
}

.ch-sidebar-summary-label {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--op-muted);
    margin-bottom: 8px;
}

.ch-sidebar-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ch-sidebar-summary-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ch-sidebar-summary-value {
    font-size: 18px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ch-sidebar-summary-key {
    font-size: 10.5px;
    color: var(--op-muted);
}

/* ── Body ── */
.ch-body {
    background: var(--op-bg);
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Sticky header ── */
.ch-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}

.ch-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--op-ink);
    white-space: nowrap;
}

.ch-header-badge {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Inline search in header */
.ch-search {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 360px;
    flex: 1;
    padding: 5px 10px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    margin-left: auto;
}

.ch-search:focus-within {
    border-color: var(--op-accent);
    box-shadow: 0 0 0 2px var(--op-accentSoft);
}

.ch-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12px;
    color: var(--op-ink);
    width: 100%;
    line-height: 1.4;
}

.ch-search-input::placeholder {
    color: var(--op-muted);
}

/* ── Table card ── */
.ch-table-wrap {
    padding: 16px 22px 0;
    flex: 1;
}

.ch-table-wrap .op-table {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
}

.ch-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 22px 16px;
}

.ch-page-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    color: var(--op-ink2);
    cursor: pointer;
    transition: all var(--op-transition);
}

.ch-page-btn:hover:not(:disabled) {
    border-color: var(--op-accent);
    color: var(--op-accent);
}

.ch-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ch-page-info {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── From/To cell ── */
.ch-cell-caller {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Direction icon: colored square */
.ch-dir-icon {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ch-dir--inbound {
    background: var(--op-successSoft);
    color: color-mix(in srgb, var(--op-success) 85%, black);
}

.ch-dir--outbound {
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
}

.ch-dir--local {
    background: var(--op-surfaceAlt);
    color: var(--op-muted);
}

.ch-dir--missed {
    background: var(--op-errorSoft) !important;
    color: var(--op-error) !important;
}

.ch-dir--voicemail {
    background: var(--op-warningSoft) !important;
    color: var(--op-warning) !important;
}

/* INT / EXT badge */
.ch-int-ext-badge {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ch-int-ext--int {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
}

.ch-int-ext--ext {
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
}

/* Caller identity */
.ch-caller-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ch-caller-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ch-caller--missed {
    color: var(--op-error);
    font-weight: 600;
}

.ch-caller-sep {
    color: var(--op-muted);
    margin: 0 4px;
}

.ch-caller-org {
    font-size: 11px;
    color: var(--op-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Handled by cell ── */
.ch-cell-handler {
    display: flex;
    flex-direction: column;
}

.ch-handler-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
}

.ch-handler-ext {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── Duration cell ── */
.ch-duration {
    font-size: 12.5px;
    color: var(--op-ink);
    font-variant-numeric: tabular-nums;
}

.ch-duration--none {
    color: var(--op-mutedSoft);
}

/* ── Time cell ── */
.ch-time {
    font-size: 11px;
    color: var(--op-ink2);
    display: block;
}

.ch-date {
    font-size: 10.5px;
    color: var(--op-muted);
}

/* ── Recording indicator ── */
.ch-rec-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--op-errorSoft);
    color: var(--op-error);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Action buttons ── */
.ch-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ch-action-btn {
    width: 26px;
    height: 26px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 5px;
    color: var(--op-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    padding: 0;
}

.ch-action-btn:hover {
    border-color: var(--op-accent);
    color: var(--op-accent);
}

.ch-action-btn--accent {
    background: var(--op-accentSoft);
    border-color: color-mix(in srgb, var(--op-accent) 25%, transparent);
    color: var(--op-accentDk);
}

.ch-action-btn--accent:hover {
    background: color-mix(in srgb, var(--op-accent) 20%, transparent);
    border-color: var(--op-accent);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ch-layout {
        grid-template-columns: 1fr;
    }
    .ch-sidebar {
        display: none;
    }
    .ch-header {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
    .ch-search {
        margin-left: 0;
        max-width: none;
        order: 10;
        flex-basis: 100%;
    }
    .ch-table-wrap {
        padding: 12px 14px 0;
    }
}

/* ============================================================================
 * Contacts page (/contacts)
 * Operator design: 220px contextual sidebar + sticky header + table layout.
 * ============================================================================ */

/* ── Layout: sidebar + body ── */
.ct-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* ── Contextual sidebar ── */
.ct-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.ct-sidebar-label {
    padding: 0 16px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.ct-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.ct-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}

.ct-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.ct-sidebar-item.ct-sidebar-accent {
    color: var(--op-accentDk);
}

.ct-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

/* Source rows */
.ct-sidebar-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-size: 12px;
}

.ct-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
}

.ct-source-name {
    flex: 1;
    color: var(--op-ink2);
    font-weight: 500;
}

.ct-source-status {
    font-size: 10px;
    color: var(--op-muted);
}

/* ── Body ── */
.ct-body {
    background: var(--op-bg);
    overflow: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Sticky header ── */
.ct-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}

.ct-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--op-ink);
}

.ct-count-badge {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ct-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    cursor: pointer;
    color: var(--op-ink2);
    transition: background 0.12s;
}

.ct-back-btn:hover {
    background: var(--op-surfaceAlt);
}

/* ── Search ── */
.ct-search {
    margin-left: 14px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 0 10px;
    flex: 1;
    max-width: 380px;
}

.ct-search:focus-within {
    border-color: var(--op-accent);
}

.ct-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink);
    outline: none;
    min-width: 0;
}

.ct-search-input::placeholder {
    color: var(--op-muted);
}

/* ── Table wrapper ── */
.ct-table-wrap {
    padding: 16px 22px 28px;
    flex: 1;
}

.ct-table-wrap .op-table {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    overflow: hidden;
}

/* ── Table rows ── */
.ct-table tbody tr {
    cursor: pointer;
}

.ct-table tbody tr.ct-row-active {
    background: var(--op-accentSoft);
}

/* ── KIND badge ── */
.ct-kind-badge {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.ct-kind-int {
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
}

.ct-kind-ext {
    background: var(--op-surfaceAlt);
    color: var(--op-muted);
}

/* ── Name cell ── */
.ct-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ct-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 600;
    flex-shrink: 0;
}

.ct-name-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ct-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-type-tag {
    font-size: 10px;
    color: var(--op-muted);
}

/* ── Company / Title ── */
.ct-company {
    font-size: 12.5px;
    color: var(--op-ink);
}

.ct-title-sub {
    font-size: 10.5px;
    color: var(--op-muted);
    margin-top: 1px;
}

/* ── Phone / Email ── */
.ct-phone {
    font-size: 12px;
    color: var(--op-ink);
}

.ct-email {
    font-size: 12px;
    color: var(--op-ink2);
}

/* ── Action buttons ── */
.ct-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── New-contact form ── */
.ct-form-body {
    padding: 24px 22px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ct-form-avatar {
    flex-shrink: 0;
}

.ct-form-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--op-hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--op-surfaceAlt);
}

.ct-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    flex: 1;
    max-width: 900px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .ct-layout {
        grid-template-columns: 1fr;
    }
    .ct-sidebar {
        display: none;
    }
    .ct-header {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
    .ct-search {
        margin-left: 0;
        max-width: none;
        order: 10;
        flex-basis: 100%;
    }
    .ct-table-wrap {
        padding: 12px 14px 20px;
    }
    .ct-form-body {
        flex-direction: column;
        padding: 16px 14px;
    }
    .ct-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * /recordings — Operator-themed recording browser with contextual sidebar,
 * enriched data grid, and inline player placeholder.
 * ============================================================================ */

/* ── Page layout ── */
.rc-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
}

/* ── Contextual sidebar ── */
.rc-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rc-sidebar-kicker {
    padding: 0 14px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
}

.rc-sidebar-nav {
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
}

.rc-sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink2);
    border-left: 3px solid transparent;
    text-align: left;
    transition: background-color var(--op-transition), color var(--op-transition);
}

.rc-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}

.rc-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.rc-sidebar-item--warning.active,
.rc-sidebar-item--warning:hover {
    color: var(--op-warning);
    background: var(--op-warningSoft);
    border-left-color: var(--op-warning);
}

.rc-sidebar-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.rc-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
}

.rc-sidebar-item.active .rc-sidebar-count {
    color: var(--op-accentDk);
}

/* Colored trigger dots */
.rc-trigger-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Storage card ── */
.rc-storage-card {
    margin: 16px 12px 0;
    padding: 12px;
    background: var(--op-surfaceAlt);
    border-radius: 8px;
}

.rc-storage-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.rc-storage-size {
    font-size: 18px;
    font-weight: 600;
    color: var(--op-ink);
}

.rc-storage-files {
    font-size: 10.5px;
    color: var(--op-muted);
}

.rc-storage-bar {
    height: 4px;
    background: var(--op-hairlineSoft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.rc-storage-bar-fill {
    height: 100%;
    background: var(--op-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.rc-storage-meta {
    font-size: 10.5px;
    color: var(--op-muted);
}

/* ── Compliance card ── */
.rc-compliance-card {
    margin: 10px 12px 0;
    padding: 12px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
}

.rc-compliance-text {
    font-size: 11px;
    color: var(--op-muted);
    line-height: 1.5;
}

/* ── Body area ── */
.rc-body {
    background: var(--op-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rc-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* ── Empty state ── */
.rc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    padding: 48px 24px;
}
.rc-empty-icon { line-height: 0; margin-bottom: 4px; }
.rc-empty-title {
    font-family: var(--op-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--op-ink);
    margin: 0;
}
.rc-empty-text {
    font-size: 13px;
    color: var(--op-muted);
    margin: 0;
}

/* ── Content: list + detail split ── */
.rc-content {
    display: flex;
    height: 100%;
    min-height: 0;
}

/* -- List panel -- */
.rc-list-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rc-list-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-wrap: wrap;
}

.rc-list-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--op-ink);
}

.rc-search {
    margin-left: 14px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 0 10px;
    flex: 1;
    max-width: 320px;
}
.rc-search:focus-within {
    border-color: var(--op-accent);
}
.rc-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink);
    outline: none;
    min-width: 0;
}
.rc-search-input::placeholder {
    color: var(--op-muted);
}

/* -- Recording list scroll area -- */
.rc-list-scroll {
    overflow: auto;
    flex: 1;
}

/* -- Recording row -- */
.rc-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 22px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    cursor: pointer;
    transition: background 0.1s;
    border-left: 3px solid transparent;
    background: var(--op-bg);
}
.rc-row:hover {
    background: var(--op-surfaceAlt);
}
.rc-row--selected {
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
}
.rc-row--selected:hover {
    background: var(--op-accentSoft);
}

.rc-row-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.rc-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--op-ink2);
    transition: background 0.12s, color 0.12s;
    margin-top: 2px;
}
.rc-play-btn:hover {
    background: var(--op-accent);
    color: #fff;
    border-color: var(--op-accent);
}

.rc-row-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rc-row-top-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rc-row-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-row-sub {
    font-size: 11px;
    color: var(--op-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rc-row-waveform {
    margin-top: 4px;
}

.rc-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    padding-top: 2px;
}
.rc-row-duration {
    font-size: 11px;
    color: var(--op-ink2);
}
.rc-row-time {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── Direction icon ── */
.rc-dir-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rc-dir--inbound  { background: var(--op-successSoft); }
.rc-dir--outbound { background: var(--op-accentSoft); }
.rc-dir--local    { background: var(--op-surfaceAlt); }

/* -- Detail panel -- */
.rc-detail-panel {
    width: 380px;
    flex-shrink: 0;
    background: var(--op-surface);
    border-left: 1px solid var(--op-hairline);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.rc-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.rc-detail-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rc-detail-id {
    font-size: 11px;
    color: var(--op-muted);
}
.rc-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--op-hairline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-ink2);
    transition: background 0.12s, color 0.12s;
}
.rc-icon-btn:hover {
    background: var(--op-surfaceAlt);
}

/* From/To parties section */
.rc-detail-parties {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.rc-detail-party {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.rc-detail-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-sans);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.rc-detail-party-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.rc-detail-party-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-muted);
}
.rc-detail-party-name {
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-detail-party-number {
    font-size: 11px;
    color: var(--op-muted);
}
.rc-detail-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Player */
.rc-detail-player {
    padding: 16px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.rc-detail-waveform {
    line-height: 0;
    margin-bottom: 10px;
}
.rc-detail-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rc-detail-player-time {
    font-size: 11px;
    color: var(--op-muted);
    min-width: 32px;
}
.rc-detail-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--op-ink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}
.rc-detail-play-btn:hover {
    background: var(--op-chrome);
}

/* Call details metadata */
.rc-detail-meta {
    padding: 16px 18px;
    flex: 1;
}
.rc-detail-meta-grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 6px 12px;
    font-size: 12.5px;
    color: var(--op-ink2);
    margin-top: 10px;
}
.rc-detail-meta-label {
    font-size: 11px;
    color: var(--op-muted);
}

/* Detail empty state */
.rc-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 24px;
}
.rc-detail-empty-text {
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-muted);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .rc-detail-panel {
        display: none;
    }
}
@media (max-width: 900px) {
    .rc-layout {
        grid-template-columns: 1fr;
    }
    .rc-sidebar {
        display: none;
    }
    .rc-row {
        padding: 10px 14px;
    }
    .rc-search {
        max-width: none;
        margin-left: 0;
    }
}


/* ============================================================================
 * Voicemail page (/voicemails)
 * Split layout: contextual sidebar (220px) + body (list + detail panel).
 * Follows same sidebar pattern as Team page (.tm-*).
 * ============================================================================ */

/* -- Layout -- */
.vm-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* -- Contextual sidebar -- */
.vm-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.vm-sidebar-section-label {
    padding: 0 16px 8px;
    font-family: var(--op-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
    display: flex;
    align-items: center;
}

.vm-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.vm-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}
.vm-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}

.vm-sidebar-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    margin: 0 3.5px;
}

.vm-sidebar-count {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--op-muted);
    font-family: var(--op-mono);
    font-variant-numeric: tabular-nums;
}

.vm-sidebar-badge {
    margin-left: auto;
    background: var(--op-accentDk);
    color: #fff;
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.vm-sidebar-divider {
    height: 1px;
    background: var(--op-hairlineSoft);
    margin: 10px 16px;
}

/* Greeting card */
.vm-greeting-card {
    margin: 10px 12px 0;
    padding: 10px 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
}
.vm-greeting-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vm-greeting-play {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--op-ink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}
.vm-greeting-play:hover {
    background: var(--op-chrome);
}
.vm-greeting-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vm-greeting-name {
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--op-ink);
}
.vm-greeting-meta {
    font-size: 10.5px;
    color: var(--op-muted);
}

/* -- Body -- */
.vm-body {
    background: var(--op-bg);
    overflow: auto;
    min-height: 0;
}

.vm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* -- Empty state -- */
.vm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}
.vm-empty-icon {
    margin-bottom: 16px;
    opacity: 0.5;
}
.vm-empty-title {
    font-family: var(--op-sans);
    font-size: 18px;
    font-weight: 600;
    color: var(--op-ink);
    margin: 0 0 6px;
}
.vm-empty-text {
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-muted);
    margin: 0;
}
.vm-empty-note {
    margin-top: 16px;
    font-family: var(--op-sans);
    font-size: 12px;
    color: var(--op-warning);
}
.vm-empty-note code {
    background: var(--op-warningSoft);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: var(--op-mono);
    font-size: 11px;
}

/* -- Content split: list + detail -- */
.vm-content {
    display: flex;
    height: 100%;
    min-height: 0;
}

/* -- List panel -- */
.vm-list-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vm-list-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-wrap: wrap;
}

.vm-list-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--op-ink);
}

.vm-new-badge {
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.vm-search {
    margin-left: 14px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 0 10px;
    flex: 1;
    max-width: 320px;
}
.vm-search:focus-within {
    border-color: var(--op-accent);
}
.vm-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink);
    outline: none;
    min-width: 0;
}
.vm-search-input::placeholder {
    color: var(--op-muted);
}

.vm-mark-read-btn {
    height: 28px;
    padding: 0 11px;
    background: transparent;
    color: var(--op-ink2);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
    margin-left: auto;
}
.vm-mark-read-btn:hover {
    background: var(--op-surfaceAlt);
}

/* -- Voicemail list scroll area -- */
.vm-list-scroll {
    overflow: auto;
    flex: 1;
}

/* -- Voicemail row -- */
.vm-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 22px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    cursor: pointer;
    transition: background 0.1s;
    border-left: 3px solid transparent;
}
.vm-row:hover {
    background: var(--op-surfaceAlt);
}
.vm-row--selected {
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
}
.vm-row--selected:hover {
    background: var(--op-accentSoft);
}
.vm-row--new {
    background: var(--op-surface);
    border-left-color: color-mix(in srgb, var(--op-accent) 40%, transparent);
}
.vm-row--read {
    background: var(--op-bg);
    border-left-color: transparent;
}

.vm-row-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.vm-play-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--op-ink2);
    transition: background 0.12s, color 0.12s;
    margin-top: 2px;
}
.vm-play-btn:hover {
    background: var(--op-accent);
    color: #fff;
    border-color: var(--op-accent);
}
.vm-play-btn--new {
    background: var(--op-accent);
    color: #fff;
    border-color: var(--op-accent);
}
.vm-play-btn--new:hover {
    background: color-mix(in srgb, var(--op-accent) 85%, #000);
}

.vm-row-info {
    min-width: 0;
    flex: 1;
}

.vm-row-top-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.vm-row-name {
    font-family: var(--op-sans);
    font-size: 13.5px;
    color: var(--op-ink);
    font-weight: 400;
}
.vm-row-name--bold {
    font-weight: 600;
}

.vm-status-read {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--op-muted);
    background: var(--op-surfaceAlt);
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.vm-row-sub {
    font-size: 11px;
    color: var(--op-muted);
    margin-bottom: 4px;
}

.vm-row-transcript {
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 360px;
    margin-bottom: 6px;
}
.vm-row-transcript em {
    font-style: italic;
}

.vm-row-waveform {
    line-height: 0;
}

.vm-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    padding-top: 2px;
}
.vm-row-duration {
    font-size: 11px;
    color: var(--op-ink2);
}
.vm-row-time {
    font-size: 11px;
    color: var(--op-muted);
}

/* -- Detail panel -- */
.vm-detail-panel {
    width: 380px;
    flex-shrink: 0;
    background: var(--op-surface);
    border-left: 1px solid var(--op-hairline);
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.vm-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.vm-detail-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vm-detail-id {
    font-size: 11px;
    color: var(--op-muted);
}
.vm-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vm-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--op-hairline);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--op-ink2);
    transition: background 0.12s, color 0.12s;
}
.vm-icon-btn:hover {
    background: var(--op-surfaceAlt);
}
.vm-icon-btn--danger:hover {
    background: var(--op-errorSoft);
    color: var(--op-error);
    border-color: var(--op-error);
}

/* From section */
.vm-detail-from {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.vm-detail-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--op-accentDk);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-sans);
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}
.vm-detail-from-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.vm-detail-from-name {
    font-family: var(--op-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--op-ink);
}
.vm-detail-from-number {
    font-size: 11px;
    color: var(--op-muted);
}
.vm-detail-from-time {
    font-size: 11px;
    color: var(--op-muted);
}

/* Action buttons row */
.vm-detail-actions-row {
    display: flex;
    gap: 6px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.vm-action-btn {
    flex: 1;
    height: 30px;
    background: transparent;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--op-ink2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.12s;
}
.vm-action-btn:hover {
    background: var(--op-surfaceAlt);
}

/* Player */
.vm-detail-player {
    padding: 16px 18px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.vm-detail-waveform {
    line-height: 0;
    margin-bottom: 10px;
}
.vm-detail-player-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}
.vm-detail-player-time {
    font-size: 11px;
    color: var(--op-muted);
    min-width: 32px;
}
.vm-detail-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--op-ink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}
.vm-detail-play-btn:hover {
    background: var(--op-chrome);
}

/* Transcript */
.vm-detail-transcript {
    padding: 16px 18px;
    flex: 1;
}
.vm-detail-transcript-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.vm-detail-transcript-text {
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-ink2);
    line-height: 1.6;
    margin: 0;
}

/* Detail empty state */
.vm-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 24px;
}
.vm-detail-empty-text {
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-muted);
}

/* -- Responsive -- */
@media (max-width: 1100px) {
    .vm-detail-panel {
        display: none;
    }
}
@media (max-width: 900px) {
    .vm-layout {
        grid-template-columns: 1fr;
    }
    .vm-sidebar {
        display: none;
    }
    .vm-list-header {
        padding: 12px 14px;
    }
    .vm-row {
        padding: 10px 14px;
    }
    .vm-search {
        margin-left: 0;
        max-width: none;
        order: 10;
        flex-basis: 100%;
    }
}

/* Voicemail — additional styles for wired-up controls */

.vm-icon-btn--starred { color: var(--op-warning); }

.vm-transcribe-btn {
    font-family: var(--op-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--op-accentDk);
    background: none;
    border: 1px solid var(--op-accent);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
}
.vm-transcribe-btn:hover { background: rgba(5,151,212,.08); }

/* Dialog / modal overlay */
.vm-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.vm-dialog {
    background: var(--op-surface);
    border-radius: 10px;
    padding: 20px 24px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.vm-dialog-title {
    font-family: var(--op-sans);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
}
.vm-dialog-select {
    width: 100%;
    padding: 8px 10px;
    font-family: var(--op-mono);
    font-size: 13px;
    border: 1px solid var(--op-border);
    border-radius: 6px;
    background: var(--op-ground);
    color: var(--op-ink);
    margin-bottom: 16px;
}
.vm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.vm-dialog-btn {
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--op-border);
    background: var(--op-surface);
    color: var(--op-ink);
    cursor: pointer;
}
.vm-dialog-btn:hover { background: var(--op-ground); }
.vm-dialog-btn--primary {
    background: var(--op-accentDk);
    color: #fff;
    border-color: var(--op-accentDk);
}
.vm-dialog-btn--primary:hover { opacity: .9; }
.vm-dialog-btn--primary:disabled {
    opacity: .4;
    cursor: not-allowed;
}
.vm-dialog-btn--danger {
    background: var(--op-error);
    color: #fff;
    border-color: var(--op-error);
}
.vm-dialog-btn--danger:hover { opacity: .9; }

/* ============================================================================
 * Fax — /fax  (user inbox / outbox · Operator design)
 *
 *   fax-*  prefix = fax page scope. Sibling of the vm-* (Voicemail) block;
 *   same shell pattern: folder sidebar · combined list · detail pane, rendered
 *   inside op-main. Token source: operator-tokens.css.
 * ============================================================================ */

.fax-layout {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* ── Folder sidebar ───────────────────────────────────────────────────── */
.fax-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.fax-compose-wrap {
    padding: 0 12px 12px;
}
.fax-compose-btn {
    width: 100%;
    height: 38px;
    background: var(--op-accentDk);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-shadow: 0 1px 2px rgba(5, 151, 212, 0.4), 0 4px 12px -4px rgba(5, 151, 212, 0.5);
    transition: background 0.12s;
}
.fax-compose-btn:hover { background: var(--op-accentDk); }

.fax-side-label {
    padding: 4px 16px 8px;
    font-family: var(--op-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
}
.fax-side-label--mt { padding-top: 18px; }

.fax-folder {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.fax-folder:hover { background: var(--op-surfaceAlt); }
.fax-folder .fax-folder-ico { color: var(--op-muted); display: flex; flex-shrink: 0; }
.fax-folder.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}
.fax-folder.active .fax-folder-ico { color: var(--op-accentDk); }

.fax-folder-count {
    margin-left: auto;
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}
.fax-folder-badge {
    margin-left: auto;
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--op-accentDk);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 17px;
    text-align: center;
}
.fax-folder-badge--alert { background: var(--op-error); }

.fax-filter {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.fax-filter:hover { background: var(--op-surfaceAlt); }
.fax-filter.active { color: var(--op-accentDk); font-weight: 600; }
.fax-filter-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin: 0 4px;
    flex-shrink: 0;
}
.fax-filter-count {
    margin-left: auto;
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-muted);
    font-variant-numeric: tabular-nums;
}

.fax-spacer { flex: 1; }

/* "Your fax line" card */
.fax-line-card {
    margin: 18px 12px 0;
    padding: 11px 12px;
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
}
.fax-line-label {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--op-muted);
    margin-bottom: 7px;
}
.fax-line-row { display: flex; align-items: center; gap: 9px; }
.fax-line-tile {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fax-line-num {
    font-family: var(--op-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
}
.fax-line-status { font-family: var(--op-sans); font-size: 10.5px; color: var(--op-muted); }
.fax-line-status .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--op-success);
    margin-right: 5px;
}

/* ── Body: list + detail ──────────────────────────────────────────────── */
.fax-body { background: var(--op-bg); min-height: 0; overflow: hidden; }
.fax-content { display: flex; height: 100%; min-height: 0; }

.fax-list-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--op-hairline);
}

.fax-list-header {
    padding: 14px 22px 12px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.fax-list-title {
    font-family: var(--op-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--op-ink);
}
.fax-new-badge {
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.fax-search {
    margin-left: 2px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    padding: 0 10px;
    flex: 1;
    max-width: 320px;
    min-width: 160px;
}
.fax-search:focus-within { border-color: var(--op-accent); }
.fax-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink);
    outline: none;
    min-width: 0;
}
.fax-search-input::placeholder { color: var(--op-muted); }
.fax-hspacer { flex: 1; }

.fax-ghost-btn {
    height: 28px;
    padding: 0 11px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
}
.fax-ghost-btn:hover { background: var(--op-surfaceAlt); }
.fax-mini-accent {
    height: 28px;
    padding: 0 12px;
    background: var(--op-accentDk);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s;
}
.fax-mini-accent:hover { background: var(--op-accentDk); }

.fax-list-scroll { flex: 1; overflow: auto; }

/* ── List row ─────────────────────────────────────────────────────────── */
.fax-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--op-hairlineSoft);
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.1s;
    background: var(--op-bg);
}
.fax-row:hover { background: var(--op-surfaceAlt); }
.fax-row--new { background: var(--op-surface); border-left-color: color-mix(in srgb, var(--op-accent) 38%, transparent); }
.fax-row--read { background: var(--op-bg); }
.fax-row--selected { background: var(--op-accentSoft); border-left-color: var(--op-accent); }
.fax-row--selected:hover { background: var(--op-accentSoft); }

/* page-1 thumbnail (decorative document glyph) */
.fax-thumb {
    width: 46px;
    height: 60px;
    background: #fff;
    border: 1px solid var(--op-hairline);
    border-radius: 3px;
    padding: 6px 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(10, 12, 16, 0.05);
}
.fax-thumb--dim { background: var(--op-surfaceAlt); }
.fax-thumb-head {
    width: 46%;
    height: 5px;
    background: var(--op-ink2);
    border-radius: 1px;
    opacity: 0.8;
    margin-bottom: 1px;
}
.fax-thumb--dim .fax-thumb-head { background: var(--op-hairline); opacity: 0.6; }
.fax-thumb-line { height: 2.5px; background: var(--op-hairline); border-radius: 1px; }
.fax-thumb-line:nth-child(2) { width: 92%; }
.fax-thumb-line:nth-child(3) { width: 78%; }
.fax-thumb-line:nth-child(4) { width: 95%; }
.fax-thumb-line:nth-child(5) { width: 64%; }
.fax-thumb-line:nth-child(6) { width: 84%; }
.fax-thumb-line:nth-child(7) { width: 72%; }
.fax-thumb--xs { width: 26px; height: 34px; padding: 4px 3px; gap: 2px; border-radius: 2px; }
.fax-thumb--xs .fax-thumb-head { height: 3px; margin-bottom: 0; }
.fax-thumb--xs .fax-thumb-line { height: 1.5px; }

.fax-row-main { flex: 1; min-width: 0; }
.fax-row-line1 { display: flex; align-items: center; gap: 8px; }
.fax-dir {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.fax-dir--in { color: var(--op-success); }
.fax-dir--out { color: var(--op-muted); }
.fax-row-party {
    font-family: var(--op-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--op-ink);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.fax-row--new .fax-row-party { font-weight: 700; }
.fax-row-time {
    margin-left: auto;
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-muted);
    flex-shrink: 0;
    padding-left: 8px;
}
.fax-row-subj {
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-muted);
    margin-top: 4px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fax-row--new .fax-row-subj { color: var(--op-ink2); }
.fax-row-line3 { margin-top: 8px; display: flex; align-items: center; gap: 9px; }
.fax-row-num { font-family: var(--op-mono); font-size: 10.5px; color: var(--op-muted); }
.fax-row-meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-muted);
}

/* status pill */
.fax-pill {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
}
.fax-pill--received { color: var(--op-accentDk);  background: var(--op-accentSoft); }
.fax-pill--read     { color: var(--op-muted);   background: var(--op-surfaceAlt); }
.fax-pill--sent     { color: color-mix(in srgb, var(--op-success) 85%, black); background: var(--op-successSoft); }
.fax-pill--sending  { color: var(--op-accentDk);  background: var(--op-accentSoft); }
.fax-pill--queued   { color: color-mix(in srgb, var(--op-warning) 85%, black); background: var(--op-warningSoft); }
.fax-pill--failed   { color: var(--op-error);   background: var(--op-errorSoft); }
.fax-pill--draft    { color: var(--op-muted);   background: var(--op-surfaceAlt); }

.fax-fail {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--op-mono);
    font-size: 10.5px;
    color: var(--op-error);
}

/* ── Detail pane ──────────────────────────────────────────────────────── */
.fax-detail {
    width: 460px;
    flex-shrink: 0;
    background: var(--op-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fax-detail-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.fax-detail-id { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); }
.fax-detail-tools { margin-left: auto; display: flex; gap: 4px; }
.fax-icobtn {
    width: 28px;
    height: 26px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 5px;
    cursor: pointer;
    color: var(--op-ink2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    text-decoration: none;
}
.fax-icobtn:hover { background: var(--op-surfaceAlt); }
.fax-icobtn--danger { color: var(--op-error); }
.fax-icobtn--danger:hover { background: var(--op-errorSoft); border-color: var(--op-error); }

.fax-sender { padding: 15px 20px; border-bottom: 1px solid var(--op-hairlineSoft); flex-shrink: 0; }
.fax-sender-row { display: flex; align-items: center; gap: 11px; }
.fax-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}
.fax-avatar--in { background: var(--op-purple); }
.fax-avatar--out { background: var(--op-ink2); }
.fax-sender-name { font-family: var(--op-sans); font-size: 14.5px; font-weight: 600; color: var(--op-ink); letter-spacing: -0.01em; }
.fax-sender-sub { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); margin-top: 1px; }
.fax-sender-subj { font-family: var(--op-sans); font-size: 13px; font-weight: 500; color: var(--op-ink); margin-top: 11px; line-height: 1.4; }

.fax-detail-actions { display: flex; gap: 6px; margin-top: 12px; }
.fax-act {
    flex: 1;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-ink2);
    transition: background 0.12s, opacity 0.12s;
    text-decoration: none;
}
.fax-act:hover { background: var(--op-surfaceAlt); }
.fax-act--dark { background: var(--op-ink); color: #fff; border-color: var(--op-ink); }
.fax-act--dark:hover { background: var(--op-chrome); }
.fax-act--accent { background: var(--op-accentDk); color: #fff; border-color: var(--op-accentDk); }
.fax-act--accent:hover { background: var(--op-accentDk); }

/* document viewer */
.fax-viewer {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--op-bg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fax-viewer-doc {
    width: 100%;
    max-width: 360px;
    flex: 1;
    min-height: 420px;
    background: #fff;
    border: 1px solid var(--op-hairline);
    border-radius: 3px;
    box-shadow: 0 6px 24px -8px rgba(10, 12, 16, 0.22), 0 1px 3px rgba(10, 12, 16, 0.08);
}
.fax-viewer-empty {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: var(--op-muted);
}
.fax-viewer-empty-text { font-family: var(--op-sans); font-size: 13px; color: var(--op-muted); max-width: 260px; }

/* clickable preview → full-size lightbox */
.fax-viewer-frame {
    position: relative;
    width: 100%;
    max-width: 380px;
    /* Shape the frame like a portrait page so the fit-width PDF fills it with no
       dead space below. Center it in the viewer; it scrolls if taller than the pane. */
    aspect-ratio: 17 / 22;
    margin: auto;
    min-height: 0;
}
.fax-viewer-frame .fax-viewer-doc {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 0;
}
.fax-viewer-overlay {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.fax-viewer-overlay:hover { background: rgba(10, 12, 16, 0.04); }
.fax-viewer-expand {
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--op-ink);
    color: #fff;
    font-family: var(--op-sans);
    font-size: 11.5px;
    font-weight: 600;
    box-shadow: 0 4px 14px -4px rgba(10, 12, 16, 0.4);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}
.fax-viewer-overlay:hover .fax-viewer-expand { opacity: 1; transform: translateY(0); }

/* full-size preview lightbox */
.fax-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.62);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9500;
    padding: 28px;
}
.fax-lightbox {
    width: min(900px, 96vw);
    height: min(92vh, 1180px);
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    box-shadow: 0 24px 70px -20px rgba(10, 12, 16, 0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fax-lightbox-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    flex-shrink: 0;
}
.fax-lightbox-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-family: var(--op-mono);
    font-size: 12px;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fax-lightbox-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    color: var(--op-ink);
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}
.fax-lightbox-act:hover { background: var(--op-surfaceAlt); border-color: var(--op-accent); }
.fax-lightbox-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--op-hairline);
    border-radius: 6px;
    background: var(--op-surface);
    color: var(--op-muted);
    cursor: pointer;
}
.fax-lightbox-close:hover { background: var(--op-errorSoft); border-color: var(--op-error); color: var(--op-error); }
.fax-lightbox-doc {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
    background: #fff;
}

/* metadata footer */
.fax-meta {
    border-top: 1px solid var(--op-hairline);
    background: var(--op-surface);
    padding: 12px 20px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 9px 14px;
}
.fax-meta-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fax-meta-k { font-family: var(--op-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--op-mutedSoft); }
.fax-meta-v {
    font-family: var(--op-mono);
    font-size: 11.5px;
    color: var(--op-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* detail empty state */
.fax-detail-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
}
.fax-detail-empty-text { font-family: var(--op-sans); font-size: 13px; color: var(--op-muted); }

/* ── Send Fax modal ───────────────────────────────────────────────────── */
.fax-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 16, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}
.fax-modal {
    width: 560px;
    max-width: 94vw;
    max-height: 86vh;
    overflow: auto;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 12px;
    box-shadow: 0 24px 64px -12px rgba(10, 12, 16, 0.5);
}
.fax-modal-head {
    padding: 16px 22px;
    border-bottom: 1px solid var(--op-hairline);
    display: flex;
    align-items: center;
    gap: 10px;
}
.fax-modal-tile {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fax-modal-title { font-family: var(--op-sans); font-size: 16px; font-weight: 600; color: var(--op-ink); letter-spacing: -0.01em; }
.fax-modal-sub { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); }
.fax-modal-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-ink2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fax-modal-close:hover { background: var(--op-surfaceAlt); }

.fax-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.fax-field-label {
    display: block;
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--op-muted);
    margin-bottom: 6px;
}
.fax-input {
    width: 100%;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    padding: 0 11px;
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-ink);
    outline: none;
    transition: border-color 0.12s;
}
.fax-input:focus { border-color: var(--op-accent); }
.fax-input--mono { font-family: var(--op-mono); }
.fax-textarea {
    width: 100%;
    border-radius: 7px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    padding: 9px 11px;
    font-family: var(--op-sans);
    font-size: 13px;
    color: var(--op-ink);
    outline: none;
    resize: none;
    line-height: 1.45;
    transition: border-color 0.12s;
}
.fax-textarea:focus { border-color: var(--op-accent); }

.fax-recipient-row { display: flex; gap: 8px; }
.fax-contacts-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-ink2);
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.fax-contacts-btn:hover { background: var(--op-surfaceAlt); }

.fax-contact-list {
    margin-top: 8px;
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    max-height: 196px;
    overflow: auto;
    background: var(--op-surface);
}
.fax-contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 11px;
    border: none;
    border-bottom: 1px solid var(--op-hairlineSoft);
    background: transparent;
    cursor: pointer;
    text-align: left;
}
.fax-contact-item:last-child { border-bottom: none; }
.fax-contact-item:hover { background: var(--op-surfaceAlt); }
.fax-contact-name { font-family: var(--op-sans); font-size: 12.5px; font-weight: 500; color: var(--op-ink); }
.fax-contact-num { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); margin-left: auto; }
.fax-contact-empty { padding: 12px; font-family: var(--op-sans); font-size: 12px; color: var(--op-muted); text-align: center; }

.fax-chip {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--op-sans);
    font-size: 12px;
    color: var(--op-muted);
}
.fax-chip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--op-ink2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
}

.fax-dropzone {
    border: 1.5px dashed var(--op-hairline);
    border-radius: 9px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--op-surfaceAlt);
    text-align: center;
    position: relative;
    transition: border-color 0.12s, background 0.12s;
}
.fax-dropzone:hover { border-color: var(--op-accent); }
.fax-dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.fax-dropzone-text { font-family: var(--op-sans); font-size: 12.5px; color: var(--op-ink2); }
.fax-dropzone-text b { color: var(--op-accentDk); font-weight: 600; }
.fax-dropzone-hint { font-family: var(--op-mono); font-size: 10.5px; color: var(--op-mutedSoft); }

.fax-file-chip {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid var(--op-hairline);
    border-radius: 7px;
}
.fax-file-name { font-family: var(--op-sans); font-size: 12.5px; font-weight: 500; color: var(--op-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fax-file-meta { font-family: var(--op-mono); font-size: 10.5px; color: var(--op-muted); }
.fax-file-x {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-error);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.fax-file-x:hover { background: var(--op-errorSoft); }

.fax-cover-head { display: flex; align-items: center; gap: 10px; }
.fax-cover-head .fax-field-label { margin-bottom: 0; }
.fax-toggle {
    margin-left: auto;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: var(--op-hairline);
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}
.fax-toggle.on { background: var(--op-accent); }
.fax-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: left 0.15s;
}
.fax-toggle.on .fax-toggle-knob { left: 18px; }
.fax-cover-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.fax-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fax-seg {
    display: flex;
    border: 1px solid var(--op-hairline);
    border-radius: 7px;
    overflow: hidden;
}
.fax-seg-btn {
    flex: 1;
    height: 32px;
    border: none;
    cursor: pointer;
    background: var(--op-surface);
    color: var(--op-muted);
    font-family: var(--op-sans);
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.12s, color 0.12s;
}
.fax-seg-btn.active { background: var(--op-ink); color: #fff; }

.fax-notify {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink2);
    cursor: pointer;
    user-select: none;
}
.fax-notify input { width: 15px; height: 15px; accent-color: var(--op-accent); cursor: pointer; }

.fax-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--op-hairline);
    background: var(--op-surfaceAlt);
    display: flex;
    align-items: center;
    gap: 10px;
}
.fax-modal-est { font-family: var(--op-mono); font-size: 11px; color: var(--op-muted); }
.fax-cancel-btn {
    margin-left: auto;
    height: 34px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid var(--op-hairline);
    background: var(--op-surface);
    color: var(--op-ink2);
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 500;
}
.fax-cancel-btn:hover { background: var(--op-surfaceAlt); }
.fax-send-btn {
    height: 34px;
    padding: 0 18px;
    border-radius: 7px;
    border: none;
    background: var(--op-accentDk);
    color: #fff;
    cursor: pointer;
    font-family: var(--op-sans);
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px -4px rgba(5, 151, 212, 0.5);
    transition: background 0.12s;
}
.fax-send-btn:hover { background: var(--op-accentDk); }
.fax-send-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* empty state (no faxes at all) */
.fax-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
}
.fax-empty-title { font-family: var(--op-sans); font-size: 18px; font-weight: 600; color: var(--op-ink); margin: 16px 0 6px; }
.fax-empty-text { font-family: var(--op-sans); font-size: 13px; color: var(--op-muted); margin: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .fax-detail { display: none; }
    .fax-list-panel { border-right: none; }
}
@media (max-width: 900px) {
    .fax-layout { grid-template-columns: 1fr; }
    .fax-sidebar { display: none; }
    .fax-list-header { padding: 12px 14px; }
    .fax-row { padding: 10px 14px; }
    .fax-search { margin-left: 0; max-width: none; order: 10; flex-basis: 100%; }
}

/* ============================================================================
 * OfficeInboundRules — /office/inbound-rules
 *
 *   ir-*  prefix = inbound rules page scope
 * ============================================================================ */

/* ── Toolbar ── */
.ir-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ir-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── CSS grid table (column widths only — base from .op-grid-table) ── */
.ir-table-head,
.ir-table-row {
    grid-template-columns: 40px 60px 1.5fr 1fr 1.2fr 1.4fr 1.4fr;
}

.ir-table-row--active {
    background: var(--op-accentSoft);
}

.ir-cell-check {
    justify-content: center;
}

.ir-cell-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ir-cell-trunk {
    color: var(--op-ink2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ir-cell-did {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Type badge (CID / DID) ── */
.ir-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ir-type-badge--did {
    background: var(--op-accentSoft);
    color: var(--op-accentDk);
}

.ir-type-badge--cid {
    background: var(--op-purpleSoft);
    color: var(--op-purple);
}

/* ── Destination cell ── */
.ir-cell-dest {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Destination type icon: 24x24 colored square */
.ir-dest-icon {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ir-dest--queue    { background: var(--op-accentSoft); color: var(--op-accentDk); }
.ir-dest--ext      { background: var(--op-successSoft); color: color-mix(in srgb, var(--op-success) 85%, black); }
.ir-dest--rg       { background: var(--op-purpleSoft); color: var(--op-purple); }
.ir-dest--ivr      { background: var(--op-warningSoft); color: color-mix(in srgb, var(--op-warning) 85%, black); }
.ir-dest--vm       { background: var(--op-surfaceAlt); color: var(--op-muted); }
.ir-dest--external { background: var(--op-tealSoft); color: color-mix(in srgb, var(--op-teal) 85%, black); }
.ir-dest--fax      { background: var(--op-surfaceAlt); color: var(--op-ink2); }

.ir-dest-text {
    font-size: 12px;
    color: var(--op-ink2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Edit form section card ── */
.ir-form-section {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.ir-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink);
    margin-bottom: 12px;
}

.ir-field-hint {
    font-size: 11px;
    color: var(--op-muted);
    margin-top: 2px;
    margin-bottom: 8px;
}

/* ============================================================================
 * OfficePhones — /office/phones
 *
 *   ph-*  prefix = phones page scope
 * ============================================================================ */

/* ── CSS grid table (column widths + spacing overrides — base from .op-grid-table) ── */
.ph-table {
    width: 100%;
    background: var(--op-surface);
}

.ph-table-head,
.ph-table-row {
    grid-template-columns: 32px 70px 110px 1.4fr 1.2fr 1fr 140px 30px;
    padding: 0 14px;
}

.ph-table-head {
    min-height: 36px;
}

.ph-table-head > span {
    padding: 8px 0;
}

.ph-table-row {
    min-height: 48px;
}

.ph-table-row > span {
    padding: 9px 0;
}

/* ── Vendor tag (colored initial badge) ── */
.ph-vendor-tag {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-mono);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Firmware upgrade badge ── */
.ph-fw-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 1px 7px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ph-fw-badge:hover {
    background: rgba(5, 151, 212, 0.18);
}

/* ── MAC / IP stacked lines ── */
.ph-mac-line {
    font-family: var(--op-mono);
    font-size: 12px;
    color: var(--op-ink2);
    display: flex;
    align-items: center;
    gap: 4px;
}

.ph-ip-line {
    font-family: var(--op-mono);
    font-size: 11px;
    color: var(--op-muted);
    margin-top: 1px;
}

/* ── Copy button (inline, minimal) ── */
.ph-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    color: var(--op-mutedSoft);
    transition: color var(--op-transition), background var(--op-transition);
}

.ph-copy-btn:hover {
    color: var(--op-accent);
    background: var(--op-accentSoft);
}

/* ── Auth info modal grid ── */
.ph-auth-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 16px;
}

/* ── Kebab dropdown (custom — FluentMenuButton didn't dismiss on outside click) ── */
/* The dropdown lives inside the table, so the container's overflow:hidden would clip it —
   make this table overflow:visible and re-round the head/last-row corners to keep the 8px look. */
.ph-table { overflow: visible; }
.ph-table .op-grid-table-head { border-radius: 8px 8px 0 0; }
.ph-table .op-grid-table-row:last-child { border-radius: 0 0 8px 8px; }

.ph-kebab-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-kebab-cell--open {
    position: relative;
    z-index: 1000;          /* float this cell's backdrop + menu above the rest of the page */
}
.ph-kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--op-muted);
    transition: color var(--op-transition), background var(--op-transition);
}
.ph-kebab-btn:hover {
    color: var(--op-ink);
    background: var(--op-surfaceAlt);
}
.ph-kebab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;             /* below the menu, above the page — captures outside clicks */
}
.ph-kebab-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 2;
    min-width: 172px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    box-shadow: 0 12px 32px -12px rgba(10,12,16,0.22), 0 4px 12px -6px rgba(10,12,16,0.12);
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.ph-kebab-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: none;
    border-radius: 6px;
    text-align: left;
    white-space: nowrap;
    font-family: var(--op-sans);
    font-size: 12.5px;
    color: var(--op-ink2);
    cursor: pointer;
    transition: background var(--op-transition), color var(--op-transition);
}
.ph-kebab-item:hover {
    background: var(--op-surfaceAlt);
    color: var(--op-ink);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .ph-table-head,
    .ph-table-row {
        grid-template-columns: 32px 60px 90px 1.2fr 1fr 1fr 120px 30px;
    }
}

@media (max-width: 768px) {
    .ph-table-head,
    .ph-table-row {
        grid-template-columns: 32px 50px 1fr 1fr 30px;
    }
    /* Hide vendor, name, actions cols on small screens */
    .ph-table-head > span:nth-child(3),
    .ph-table-row > span:nth-child(3),
    .ph-table-head > span:nth-child(5),
    .ph-table-row > span:nth-child(5),
    .ph-table-head > span:nth-child(7),
    .ph-table-row > span:nth-child(7) {
        display: none;
    }
}

/* ============================================================================
 * OfficeOutboundRules — /office/outbound-rules
 *
 *   or-*  prefix = outbound rules page scope
 * ============================================================================ */

/* ── CSS grid table (column widths only — base from .op-grid-table) ── */
.or-table {
    width: 100%;
    background: var(--op-surface);
}

.or-table-head,
.or-table-row {
    grid-template-columns: 40px 1.5fr 1.2fr 1fr 2fr 30px;
}

.or-table-row--selected {
    background: var(--op-accentSoft);
}

.or-table-cell {
    flex-direction: column;
    justify-content: center;
    min-height: 52px;
}

/* ── Prefix pill ── */
.or-prefix-pill {
    display: inline-block;
    font-family: var(--op-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ── Trunk chain ── */
.or-trunk-chain {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.or-trunk-chain-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--op-ink);
    line-height: 1.5;
}

.or-trunk-priority {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--op-mutedSoft);
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairline);
    border-radius: 3px;
    min-width: 20px;
    padding: 0 4px;
    height: 17px;
    flex-shrink: 0;
}

.or-trunk-priority--primary {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-color: transparent;
}

/* ── Edit form sections ── */
.or-form-section {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.or-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--op-ink);
    margin-bottom: 12px;
}

.or-field-hint {
    font-size: 11px;
    color: var(--op-muted);
    margin-top: 2px;
    margin-bottom: 8px;
}

/* ── 3-column criteria grid ── */
.or-criteria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

/* ── 5-column routes grid ── */
.or-routes-grid {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    gap: 8px 12px;
    align-items: center;
}

.or-routes-grid-head {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--op-muted);
    padding-bottom: 4px;
}

.or-routes-grid-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--op-ink);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .or-table-head,
    .or-table-row {
        grid-template-columns: 40px 1.5fr 1fr 2fr 30px;
    }
    /* hide Manipulation column */
    .or-table-head > div:nth-child(3),
    .or-table-row > .or-table-cell:nth-child(3) {
        display: none;
    }
}

@media (max-width: 900px) {
    .or-table-head,
    .or-table-row {
        grid-template-columns: 40px 1fr 1.5fr 30px;
    }
    /* hide Groups column too */
    .or-table-head > div:nth-child(4),
    .or-table-row > .or-table-cell:nth-child(4) {
        display: none;
    }
}

@media (max-width: 768px) {
    .or-criteria-grid { grid-template-columns: 1fr; }
    .or-routes-grid { grid-template-columns: 1fr; }
    .or-routes-grid-head { display: none; }
}

/* ============================================================================
 * OfficeGroups — /office/groups
 *
 *   gr-*  prefix = groups page scope
 * ============================================================================ */

/* ── CSS grid table (column widths + spacing overrides — base from .op-grid-table) ── */
.gr-table {
    width: 100%;
    background: var(--op-surface);
}

.gr-table-head,
.gr-table-row {
    grid-template-columns: 2fr 1fr 1.2fr;
    padding: 0 14px;
}

.gr-table-head {
    min-height: 36px;
}

.gr-table-head > span {
    padding: 8px 0;
}

.gr-table-row {
    min-height: 48px;
}

/* ── Group name link ── */
.gr-group-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--op-ink);
    text-decoration: none;
    display: block;
}

.gr-group-name:hover {
    color: var(--op-accent);
}

/* ── Default badge ── */
.gr-default-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--op-success);
    background: var(--op-successSoft);
    padding: 1px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Row actions ── */
.gr-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* ── Modal overrides ── */
.gr-modal::part(control) {
    border-radius: 10px;
    border: 1px solid var(--op-hairline);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .gr-table-head,
    .gr-table-row {
        grid-template-columns: 1.5fr 0.8fr 1.2fr;
    }
}

/* ============================================================================
 * OfficeHours — /office/office-hours
 *
 *   oh-*  prefix = office hours page scope
 * ============================================================================ */

/* ── Time zone selector row ── */
.oh-tz-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

/* ── Legend (Open / Break / Closed) ── */
.oh-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    font-size: 11px;
}

.oh-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.oh-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* ── Schedule card (office hours, break hours, holidays) ── */
.oh-schedule-card {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    padding: 16px;
}

.oh-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.oh-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--op-ink);
}

/* ── Bottom two-panel grid ── */
.oh-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 14px;
    align-items: start;
}

/* ── Holiday CSS-grid table ── */
.oh-holiday-table-head {
    display: grid;
    grid-template-columns: 110px 1fr 90px 1.2fr 1fr 60px;
    gap: 0 8px;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--op-muted);
    border-bottom: 1px solid var(--op-hairline);
    font-family: var(--op-mono);
}

.oh-holiday-row {
    display: grid;
    grid-template-columns: 110px 1fr 90px 1.2fr 1fr 60px;
    gap: 0 8px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--op-hairlineSoft, var(--op-hairline));
    transition: background 0.12s;
}

.oh-holiday-row:last-child {
    border-bottom: none;
}

.oh-holiday-row:hover {
    background: var(--op-hairlineSoft, rgba(0, 0, 0, 0.02));
}

/* ── Small icon action button ── */
.oh-action-btn {
    appearance: none;
    border: 1px solid var(--op-hairline);
    background: transparent;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--op-muted);
    padding: 0;
    transition: color 0.12s, border-color 0.12s;
}

.oh-action-btn:hover {
    color: var(--op-ink);
    border-color: var(--op-ink2, var(--op-muted));
}

/* ── Type badge pills ── */
.oh-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    font-family: var(--op-mono);
}

.oh-type-badge--closed {
    background: color-mix(in srgb, var(--op-error) 14%, transparent);
    color: var(--op-error);
}

.oh-type-badge--partial {
    background: color-mix(in srgb, var(--op-warning) 14%, transparent);
    color: var(--op-warning);
}

/* ── Responsive: collapse bottom grid to single column ── */
@media (max-width: 1100px) {
    .oh-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .oh-holiday-table-head,
    .oh-holiday-row {
        grid-template-columns: 90px 1fr 70px 60px;
    }
    /* hide Time and Occurs columns on small screens */
    .oh-holiday-table-head > span:nth-child(4),
    .oh-holiday-table-head > span:nth-child(5),
    .oh-holiday-row > span:nth-child(4),
    .oh-holiday-row > span:nth-child(5) {
        display: none;
    }
}

/* ============================================================================
 * OfficeCallHandling — /office/call-distribution
 *
 *   cd-*  prefix = call distribution page scope
 * ============================================================================ */

/* ── CSS grid table (column widths + spacing overrides — base from .op-grid-table) ── */
.cd-table {
    width: 100%;
    background: var(--op-surface);
}

.cd-table-head,
.cd-table-row {
    grid-template-columns: 110px 70px 1.4fr 1.3fr 30px;
    padding: 0 14px;
}

.cd-table-head {
    min-height: 36px;
}

.cd-table-head > span {
    padding: 8px 0;
}

.cd-table-row {
    min-height: 52px;
}

/* The container supplies the 14px gutter; zero the cells' horizontal padding so row
   content lines up with the header columns (otherwise rows sit 14px to the right). */
.cd-table-row > span,
.cd-table-row > div {
    padding-left: 0;
    padding-right: 0;
}

/* ── Kind icon (22px colored square) ── */
.cd-kind-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Kind label ── */
.cd-kind-label {
    font-family: var(--op-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Name link ── */
.cd-name-link {
    font-weight: 500;
    font-size: 13px;
    color: var(--op-ink);
    text-decoration: none;
}

.cd-name-link:hover {
    color: var(--op-accent);
    text-decoration: underline;
}

/* ── Responsive: hide Destination column on narrow screens ── */
@media (max-width: 900px) {
    .cd-table-head,
    .cd-table-row {
        grid-template-columns: 110px 70px 1.4fr 30px;
    }

    .cd-col-dest {
        display: none;
    }
}

/* ============================================================================
 * OfficeReports — /office/reports
 *
 *   rp-*  prefix = reports index page scope
 * ============================================================================ */

.rp-catalog {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}

.rp-card {
    display: flex;
    flex-direction: column;
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: 8px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.rp-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--op-accent);
    text-decoration: none;
    color: inherit;
}

.rp-card-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.rp-cat-badge {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
    flex-shrink: 0;
    white-space: nowrap;
}

.rp-card-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--op-ink);
    line-height: 1.3;
    margin-bottom: 0;
}

.rp-card-desc {
    font-size: 11.5px;
    color: var(--op-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}

.rp-card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rp-view-link {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--op-accentDk);
    text-decoration: none;
}

.rp-card:hover .rp-view-link {
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .rp-catalog {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .rp-catalog {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
 * OfficeRecordings — /office/recordings (admin)
 *
 *   orc-*  prefix = office recordings admin page scope
 * ============================================================================ */

/* ── CSS grid table (column widths only — base from .op-grid-table) ── */
.orc-table {
    width: 100%;
    background: var(--op-surface);
}

/* 7 tracks — one per column: select · play · date · from/to · duration ·
   transcription · actions. Responsive overrides live in OfficeRecordings.razor
   (column-priority convention: ≤1024px drops Transcription via .op-col-hide-md,
   ≤640px also Date + Duration via .op-col-hide-sm). */
.orc-table-head,
.orc-table-row {
    grid-template-columns: 32px 96px 130px 1.8fr 60px 1.4fr 70px;
}

.orc-table-row--selected {
    background: var(--op-accentSoft);
}

.orc-table-cell {
    flex-direction: column;
    justify-content: center;
    /* Column direction flips the cross axis: the inherited align-items:center
       would center content HORIZONTALLY, drifting cells off their headers. */
    align-items: flex-start;
    min-height: 48px;
}

/* ── From/To stacked cell ── */
.orc-from-to {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.orc-from-to-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--op-ink);
}

.orc-from-to-dest {
    font-size: 11px;
    color: var(--op-muted);
}

/* ── Transcription cell ── */
.orc-transcription-cell {
    overflow: hidden;
}

.orc-transcription-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: var(--op-ink2);
    line-height: 1.4;
}

/* ── Filter panel ── */
.orc-filter-panel {
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

/* ============================================================================
 * Settings page (/settings)
 * ========================================================================= */

.st-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 0;
}

/* -- Sidebar -- */
.st-sidebar {
    background: var(--op-surface);
    border-right: 1px solid var(--op-hairline);
    padding: 14px 0;
    overflow: hidden auto;
    display: flex;
    flex-direction: column;
}

.st-sidebar-section-label {
    padding: 0 16px 8px;
    font-family: var(--op-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--op-muted);
    display: flex;
    align-items: center;
}

.st-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    color: var(--op-ink2);
    font-family: var(--op-sans);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}
.st-sidebar-item:hover {
    background: var(--op-surfaceAlt);
}
.st-sidebar-item.active {
    color: var(--op-accentDk);
    background: var(--op-accentSoft);
    border-left-color: var(--op-accent);
    font-weight: 600;
}
.st-sidebar-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* -- Body -- */
.st-body {
    background: var(--op-bg);
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.st-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-hairline);
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
}

.st-content {
    flex: 1;
    min-height: 0;
}

.st-section {
    padding: 8px 22px 28px;
}

/* -- Responsive -- */
@media (max-width: 768px) {
    .st-layout {
        grid-template-columns: 1fr;
    }
    .st-sidebar {
        display: none;
    }
    .st-header {
        padding: 12px 14px;
    }
    .st-section {
        padding: 8px 14px 20px;
    }
}

/* ══ Notification feed (header bell dropdown) ════════════════════════════════ */
.op-notif-wrapper { position: relative; }

.op-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-radius: 10px;
    box-shadow: var(--op-shadow-float);
    z-index: 10000;
    overflow: hidden;
    color: var(--op-ink);
    font-family: var(--op-sans);
}
.op-notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--op-hairlineSoft);
}
.op-notif-title { font-size: 13px; font-weight: 600; color: var(--op-ink); }
.op-notif-markall {
    appearance: none; background: none; border: none; cursor: pointer;
    font-family: var(--op-sans); font-size: 11.5px; color: var(--op-accentDk); padding: 0;
}
.op-notif-markall:hover { text-decoration: underline; }

.op-notif-list { max-height: 360px; overflow-y: auto; }

.op-notif-item {
    appearance: none; border: none; background: var(--op-surface); cursor: pointer;
    width: 100%; text-align: left;
    display: flex; gap: 11px; align-items: flex-start;
    padding: 11px 14px;
    font-family: var(--op-sans);
    transition: background var(--op-transition);
}
.op-notif-item:hover { background: var(--op-surfaceAlt); }
.op-notif-item.unread { background: var(--op-accentSoft); }
.op-notif-item.unread:hover { background: rgba(5, 151, 212, 0.16); }

.op-notif-avatar {
    width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
    color: #fff; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.op-notif-body { flex: 1; min-width: 0; }
.op-notif-item-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.op-notif-name {
    font-size: 12.5px; font-weight: 500; color: var(--op-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-notif-time { font-size: 10.5px; color: var(--op-mutedSoft); flex-shrink: 0; }
.op-notif-preview {
    font-size: 12px; color: var(--op-muted); margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.op-notif-item.unread .op-notif-preview { color: var(--op-ink2); }
.op-notif-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--op-accent); flex-shrink: 0; margin-top: 6px;
}
.op-notif-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 28px 14px; color: var(--op-muted); font-size: 12.5px;
}
.op-notif-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-top: 1px solid var(--op-hairlineSoft);
}
.op-notif-openchat {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--op-accentDk); text-decoration: none;
}
.op-notif-openchat:hover { text-decoration: underline; }
.op-notif-count { font-size: 11px; color: var(--op-mutedSoft); }

/* ══ Chat toast (custom, accent-themed — not a Fluent intent) ════════════════ */
.chat-toast-host {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 11000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 344px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}
.chat-toast {
    pointer-events: auto;
    background: var(--op-surface);
    border: 1px solid var(--op-hairline);
    border-left: 3px solid var(--op-accent);
    border-radius: 8px;
    box-shadow: var(--op-shadow-float);
    padding: 12px 12px 12px 13px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    font-family: var(--op-sans);
    animation: chat-toast-in 160ms ease-out;
}
.chat-toast:hover { background: var(--op-surfaceAlt); }
@keyframes chat-toast-in {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: none; }
}
.chat-toast-avatar {
    width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
    color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.chat-toast-body { flex: 1; min-width: 0; }
.chat-toast-top { display: flex; align-items: center; gap: 7px; }
.chat-toast-name {
    font-size: 13px; font-weight: 600; color: var(--op-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-toast-pill {
    display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
    font-size: 10px; color: var(--op-accentDk);
    background: var(--op-accentSoft);
    padding: 1px 6px; border-radius: 999px;
}
.chat-toast-preview {
    font-size: 12.5px; color: var(--op-ink2); margin-top: 3px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-toast-meta { font-size: 11px; color: var(--op-mutedSoft); margin-top: 5px; }
.chat-toast-x {
    appearance: none; background: none; border: none; cursor: pointer;
    color: var(--op-mutedSoft); padding: 2px; line-height: 1; flex-shrink: 0;
    display: flex; align-items: center; border-radius: 4px;
}
.chat-toast-x:hover { color: var(--op-ink2); background: var(--op-surfaceAlt); }

/* ── 3CX import wizard (/office/import-3cx) ── */
.op-callout {
    background: var(--op-surfaceAlt);
    border: 1px solid var(--op-hairlineSoft);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--op-muted);
}
.op-callout-warn {
    background: color-mix(in srgb, var(--op-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--op-accent) 30%, transparent);
    color: var(--op-ink2);
}
.op-upload-drop {
    border: 1px dashed var(--op-hairline);
    border-radius: 8px;
    padding: 20px;
    background: var(--op-surfaceAlt);
}
.op-import-sections { display: flex; flex-direction: column; gap: 2px; }
.op-import-section-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 6px; cursor: default;
}
.op-import-section-row:hover { background: var(--op-surfaceAlt); }
.op-import-section-name { flex: 1; font-size: 14px; }
.op-import-section-count { min-width: 40px; text-align: right; color: var(--op-muted); }
.op-import-section-row.op-dim, .op-dim { opacity: 0.5; }
.op-import-warnings {
    margin: 6px 0 0; padding-left: 18px; font-size: 12.5px;
    color: var(--op-muted); display: flex; flex-direction: column; gap: 3px;
}
.op-import-warnings li { line-height: 1.4; }
.op-progress-track {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--op-surfaceAlt); border: 1px solid var(--op-hairlineSoft);
}
.op-progress-fill { height: 100%; background: var(--op-accent); transition: width 0.3s ease; }

/* ============================================================================
 * ACCESSIBILITY FOUNDATION (WCAG 2.2 AA audit 2026-07-08 — themes T9/T13/T14)
 *
 * Global, desktop-affecting on purpose: focus-visible rings (the app had
 * zero), reduced-motion handling, and >=24px hit areas on the smallest
 * controls (pseudo-element hit extension — no visual growth).
 * ============================================================================ */

/* ── Focus-visible ring for every interactive element (2.4.7 / 2.4.11) ──
 * --op-accent is used for the ring (non-text: 3.29:1 on white, ~5:1 on
 * chrome — passes 1.4.11 on both light and dark surfaces). The :is() list
 * normalizes specificity to 0,2,0 so it beats the scattered single-class
 * `outline: none` rules on inputs. Keyboard-only — mouse focus is untouched. */
:is(a, button, input, select, textarea, summary,
    [role="button"], [role="checkbox"], [role="tab"], [tabindex]):focus-visible {
    outline: 2px solid var(--op-accent);
    outline-offset: 2px;
}

/* ── Reduced motion (2.2.2 / 2.3.3) — kill pulses, slides, spins ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Target size >=24px (2.5.8) — hit-area extension, no visual growth ──
 * The ::after overlay is part of the button for hit-testing; visuals and
 * layout are unchanged. Toggles are 28x16 → hit area 36x24. */
.op-toggle::after {
    content: "";
    position: absolute;
    inset: -4px;
}

.chat-member-remove,
.chat-toast-x,
.chat-pin-toggle,
.sp-dial-clear,
.ph-copy-btn {
    position: relative;
}

.chat-pin-toggle { display: inline-flex; align-items: center; }

.chat-member-remove::after,
.chat-toast-x::after,
.chat-pin-toggle::after,
.sp-dial-clear::after,
.ph-copy-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    transform: translate(-50%, -50%);
}

/* ============================================================================
 * RESPONSIVE FOUNDATION (F2) — 3CX-style mobile treatment.
 *
 * Breakpoints:
 *   <=1024px tablet — admin/tertiary sidebars collapse to stacked dropdowns
 *            (markup in AdminLayout / OfficeTertiaryLayout), grid tables gain
 *            the overflow-x fallback + op-col-hide-md (see grid-table section).
 *   <=640px  phone — slimmer icon rail (3CX-style: the rail STAYS), condensed
 *            header, single-column forms, full-screen dialogs, softphone as a
 *            full-screen sheet, op-col-hide-sm.
 *
 * Every rule is behind a max-width media query — desktop rendering is
 * pixel-identical. Per-page table/pane tweaks belong in per-page .razor.css
 * (see the column-priority convention at the op-grid-table section).
 * ============================================================================ */

/* Mobile section dropdown (rendered by AdminLayout + OfficeTertiaryLayout,
   hidden on desktop). Native <details>/<summary> = keyboard + SR disclosure
   semantics for free; @key on the element recreates it closed on navigation. */
.op-mobilenav { display: none; }

/* ── <=1024px: sidebars → dropdowns ── */
@media (max-width: 1024px) {
    /* Collapse the shell back to rail + main; the hidden asides still match
       :has(), so the expanded 3-/4-column templates must be overridden. */
    .op-shell:has(.op-admin-sidebar),
    .op-shell:has(.op-tertiary-sidebar) {
        grid-template-columns: 76px 1fr;
        grid-template-areas:
            "header  header"
            "sidebar main";
    }

    .op-admin-sidebar,
    .op-tertiary-sidebar { display: none; }

    /* op-admin-body reverts from display:contents so the admin dropdown,
       tertiary dropdown and page content stack inside the single main cell. */
    .op-shell:has(.op-tertiary-sidebar) .op-admin-body { display: block; }

    /* op-body nests inside op-admin-body here — drop its own padding/scroll
       so the outer body owns both (no double padding, single scroll). */
    .op-admin-body .op-body {
        padding: 0;
        height: auto;
        overflow: visible;
    }

    .op-mobilenav {
        display: block;
        position: relative;
        margin-bottom: 10px;
    }

    .op-mobilenav > summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--op-ink);
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .op-mobilenav > summary::-webkit-details-marker { display: none; }

    .op-mobilenav-chevron {
        margin-left: auto;
        display: flex;
        color: var(--op-muted);
        transition: transform var(--op-transition);
    }

    .op-mobilenav[open] > summary .op-mobilenav-chevron { transform: rotate(180deg); }

    .op-mobilenav-list {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        z-index: 150;
        background: var(--op-surface);
        border: 1px solid var(--op-hairline);
        border-radius: 8px;
        box-shadow: var(--op-shadow-float);
        max-height: min(60vh, 420px);
        overflow-y: auto;
        padding: 6px 0;
    }

    /* Dropdown items reuse the sidebar item/kicker classes so active states,
       counts and icons match; just restore flex on the anchor. */
    .op-mobilenav .op-admin-sidebar-item { display: flex; }
    .op-mobilenav .op-admin-sidebar-kicker { padding-top: 10px; }
}

/* ── <=640px: phone — slim rail + condensed header ── */
@media (max-width: 640px) {
    .op-shell,
    .op-shell:has(.op-admin-sidebar),
    .op-shell:has(.op-tertiary-sidebar) {
        grid-template-columns: 60px 1fr;
    }

    .op-sidebar-item {
        font-size: 9.5px;
        padding: 9px 0;
    }

    /* Header condenses: brand mark stays, version/status/search-hint text
       and the account email go; icon buttons remain (F1 markup, CSS-only). */
    .op-header { padding: 0 10px 0 12px; }
    .op-header-wordmark { font-size: 18px; }
    .op-header-version { display: none; }
    .op-header-status { display: none; }

    .op-header-search {
        margin-left: auto;
        margin-right: 10px;
        width: 30px;
        padding: 0;
        justify-content: center;
    }
    .op-header-search span,
    .op-header-search kbd { display: none; }

    .op-header-actions { margin-left: 0; gap: 12px; }
    .op-header-account { padding: 4px; }
    .op-header-account-email { display: none; }

    /* Body areas never scroll horizontally — wide content scrolls inside
       its own container (grid-table fallback above). 1.4.10 at 320px. */
    .op-main,
    .op-admin-body,
    .op-body { overflow-x: hidden; }

    .op-admin-body { padding: 12px 12px 24px; }
    .op-body { padding: 12px 12px 24px; }
    .op-admin-body .op-body { padding: 0; }

    /* Toolbars (FluentStack rows) + inline searches wrap into rows instead
       of overflowing. !important beats FluentStack's inline flex-wrap. */
    .op-main .stack-horizontal,
    .op-admin-body .stack-horizontal,
    .op-body .stack-horizontal {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }
    .op-inline-search { max-width: 100%; }

    /* Forms/editors collapse to a single column. */
    .ue-field-grid,
    .ue-field-grid--3 { grid-template-columns: 1fr; }

    /* Dialogs go full-screen-ish. */
    .vm-dialog-backdrop { padding: 0; }
    .vm-dialog {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        overflow-y: auto;
        border-radius: 0;
    }
    .fax-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100dvh;
        border-radius: 0;
    }
    .fax-lightbox {
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
    }
    .cp-backdrop { padding: 10px; }
    .cp-dialog {
        width: 100%;
        max-height: calc(100dvh - 20px);
    }

    /* Softphone becomes a full-screen sheet; dialpad scales up. */
    .sp-frame {
        top: 0;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-left: none;
    }
    .sp-pad {
        max-width: min(320px, calc(100vw - 48px));
        gap: 10px;
    }
    .sp-pad-key { height: 64px; }
}