/* ============================================================================
   Kenhos-FS UI — ported verbatim from the Django proof-of-concept design system
   (dev-stuff/djangosrc/templates/base.html + per-page extra_css). Foundation,
   shell (sidebar/topbar), and shared components live here. White-label colours
   come from CSS vars set by App.razor (defaults match the Django palette).
   ============================================================================ */

:root {
    --accent: #3b82f6;
    --sidebar-bg: #1e293b;
    --sidebar-active: #334155;
    --sidebar-fg: #cbd5e1;
    --shadow: 0 1px 3px rgba(0,0,0,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    background: #f5f5f5;
    color: #333;
}

/* ---- Layout shell (base.html) ---- */
.layout { display: flex; min-height: 100vh; }

.sidebar { width: 240px; flex-shrink: 0; background: var(--sidebar-bg); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.sidebar-header { padding: 20px; font-size: 1.25rem; font-weight: 600; border-bottom: 1px solid #334155; }
.sidebar-logo { max-height: 28px; display: block; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--sidebar-fg); text-decoration: none; transition: background 0.15s; }
.sidebar-nav a:hover, .sidebar-nav a.active { background: var(--sidebar-active); color: #fff; text-decoration: none; }
.nav-label { display: flex; align-items: center; gap: 10px; }

.nav-parent-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 20px; color: var(--sidebar-fg); background: none; border: none; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.nav-parent-toggle:hover { background: var(--sidebar-active); color: #fff; }
.nav-arrow::after { content: "\25B8"; font-size: 0.75rem; transition: transform 0.15s; display: inline-block; }
.nav-parent-toggle.open .nav-arrow::after { transform: rotate(90deg); }
.nav-children { display: none; }
.nav-children.open { display: block; }
.nav-children a { padding-left: 48px; }

.nav-section-label { padding: 32px 20px 4px; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
.nav-section-label:first-child { padding-top: 4px; }

.nav-coming-soon { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: #475569; font-size: inherit; }
.nav-coming-soon .badge-soon, .nav-child-coming-soon .badge-soon { font-size: 0.55rem; background: #334155; color: #64748b; padding: 1px 6px; border-radius: 9999px; margin-left: auto; }
.nav-child-coming-soon { display: flex; align-items: center; padding: 8px 20px 8px 48px; color: #475569; font-size: inherit; }

.sidebar-footer { padding: 14px 20px; border-top: 1px solid #334155; }
.role-badge { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .05em; background: #334155; color: #94a3b8; padding: 3px 8px; border-radius: 6px; }

.content-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---- Top bar (base.html) ---- */
.topbar { background: #fff; border-bottom: 1px solid #dde1e7; padding: 0 20px; height: 44px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 20; }
.topbar-breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: #5a6472; }
.topbar-breadcrumb a { color: #8b95a1; text-decoration: none; }
.topbar-breadcrumb a:hover { color: #5a6472; }
.topbar-breadcrumb .separator { color: #c8cdd4; }
.topbar-breadcrumb .current { color: #0d1117; font-weight: 500; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.topbar-user { font-size: 0.8rem; color: #5a6472; text-decoration: none; }
.topbar-user:hover { color: #1e293b; }
.topbar-logout { font-size: 0.8rem; color: #5a6472; background: none; border: 1px solid #dde1e7; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-family: inherit; }
.topbar-logout:hover { background: #f5f5f5; color: #333; }
.topbar-divider { width: 1px; height: 20px; background: #dde1e7; }

.tenant-selector { display: flex; align-items: center; }
.tenant-current { font-size: 0.8rem; color: #374151; font-weight: 500; }
.tenant-dropdown { position: relative; }
.tenant-dropdown-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-family: inherit; color: #374151; background: #f9fafb; border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.tenant-dropdown-toggle:hover { background: #f3f4f6; }
.tenant-dropdown-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); min-width: 330px; max-width: 480px; z-index: 100; overflow: hidden; }
.tenant-dropdown-menu.open { display: block; }
.tenant-search-wrap { padding: 8px; border-bottom: 1px solid #e5e7eb; }
.tenant-search { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.8rem; font-family: inherit; }
.tenant-search:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); }
.tenant-options { max-height: 240px; overflow-y: auto; }
.tenant-option { padding: 8px 12px; font-size: 0.8rem; color: #374151; cursor: pointer; }
.tenant-option:hover { background: #f3f4f6; }
.tenant-option.selected { background: #eff6ff; color: #1e40af; font-weight: 500; }

.apply-config-btn { padding: 5px 14px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; cursor: default; border: 1px solid #d1d5db; background: #e5e7eb; color: #9ca3af; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; }
.apply-config-btn.pending { background: #dc2626; color: #fff; border-color: #dc2626; cursor: pointer; animation: apply-pulse 2s infinite; }
.apply-config-btn.pending:hover { background: #b91c1c; border-color: #b91c1c; }
@keyframes apply-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); } 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0); } }

.main-content { flex: 1; padding: 32px; }

/* ---- Page banner alert (base.html) ---- */
.alert { background: #fef3c7; border: 1px solid #f59e0b; color: #92400e; padding: 12px 16px; border-radius: 6px; margin-bottom: 24px; font-size: 0.875rem; }
.alert a { color: #92400e; font-weight: 600; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; }
.alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; }
.alert-ok { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; padding: 10px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 0.85rem; }

/* ---- Pagination (base.html) ---- */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 0.75rem; color: #64748b; }
.pagination-bar .pagination-info { display: flex; align-items: center; gap: 8px; }
.pagination-bar select { padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.75rem; font-family: inherit; background: #fff; cursor: pointer; }
.pagination-nav { display: flex; align-items: center; gap: 2px; }
.pagination-nav a, .pagination-nav span { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid #d1d5db; border-radius: 4px; text-decoration: none; color: #374151; font-size: 0.75rem; background: #fff; }
.pagination-nav a:hover { background: #f3f4f6; }
.pagination-nav .current { background: #1e293b; color: #fff; border-color: #1e293b; }
.pagination-nav .disabled { color: #c8cdd4; cursor: default; pointer-events: none; }

/* ============================================================================
   Shared components (ported from the Django per-page extra_css blocks)
   ============================================================================ */

h1 { font-size: 1.5rem; font-weight: 600; color: #1e293b; margin: 0 0 22px; }
.page-header { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-header h1 { margin: 0; }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
h2 { font-size: 1.05rem; font-weight: 600; color: #1e293b; }
h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #94a3b8; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }
.page-lead { color: #64748b; margin: 0 0 20px; max-width: 80ch; }
/* Inline page breadcrumbs are redundant — the topbar renders the breadcrumb trail. */
.breadcrumb { display: none; }

/* Toolbar above tables */
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.search-box, input.search { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: inherit; width: 240px; font-family: inherit; }
.search-box:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* Stat cards */
.stat-bar, .stat-cards { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.stat-card { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 14px 20px; flex: 1; min-width: 160px; }
.stat-card .value { font-size: 1.25rem; font-weight: 700; color: #1e293b; }
.stat-card .label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .03em; margin-top: 2px; }
.stat-card.green .value { color: #166534; }
.stat-card.red .value { color: #991b1b; }
.stat-card.amber .value { color: #92400e; }

/* Hub / settings index card grid */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 18px 20px; }
.card-link { display: block; color: #333; }
.card-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); text-decoration: none; }
.card-kicker { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 600; }
.card-value { font-size: 1.25rem; font-weight: 600; margin: 4px 0 6px; color: #1e293b; }
.card-desc { color: #64748b; font-size: 0.82rem; }
.card-section-title { font-weight: 600; color: #1e293b; font-size: 0.85rem; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid #e5e7eb; }
.card-columns { column-gap: 16px; column-count: 3; }
@media (max-width: 1300px) { .card-columns { column-count: 2; } }
@media (max-width: 860px) { .card-columns { column-count: 1; } }
.card-columns > .card { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }

/* Form cards (Django .form-card + .card-title). .panel/.panel-head/.panel-body
   are kept as aliases so existing pages keep rendering during migration. */
.form-card, .panel { background: #fff; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card-title, .panel-head { padding: 12px 16px; font-weight: 600; color: #1e293b; font-size: 0.85rem; border-bottom: 1px solid #e5e7eb; background: #f9fafb; border-radius: 8px 8px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-body { padding: 6px 16px; }
.form-card .card-body { padding: 16px; }

/* Settings table (Django .settings-tbl): name | control | description */
.settings-tbl { width: 100%; border-collapse: collapse; }
.settings-tbl td { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.settings-tbl tr:last-child td { border-bottom: none; }
.settings-tbl .setting-name { font-weight: 500; color: #374151; white-space: nowrap; width: 220px; }
.settings-tbl .setting-control { width: 420px; }
.settings-tbl .setting-desc { color: #94a3b8; font-size: 0.78rem; }
.dependent-row { display: none; }
.dependent-row.visible { display: table-row; }

/* Generic label|control|desc grid rows (.setting-row) — alias of settings-tbl for Razor components */
.setting-row { display: grid; grid-template-columns: 190px minmax(0, 320px) minmax(140px, 1fr); gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.setting-row:last-child { border-bottom: none; }
.setting-row > .lbl { font-weight: 500; color: #374151; }
.setting-row > .help { font-size: 0.78rem; color: #94a3b8; }
@media (max-width: 980px) { .setting-row { grid-template-columns: 1fr; gap: 6px; } }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 500; font-size: 0.8rem; color: #374151; }
.field-inline { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.input, select.input, .settings-tbl input, .settings-tbl select, .settings-tbl textarea {
    padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: inherit;
    font-family: inherit; background: #fff; color: #1e293b; width: 100%;
}
select.input, .input { height: 36px; }
select, select.input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
textarea.input { height: auto; min-height: 70px; resize: vertical; }
.input:focus, select:focus, textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.input:disabled, .input[readonly] { background: #f8fafc; color: #64748b; }
.input-color { width: 56px; height: 36px; padding: 3px; }
.readonly-field { height: 36px; display: flex; align-items: center; padding: 0 10px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; color: #64748b; }

/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-dark, .btn-outline, .btn-outline-danger, .btn-delete, .btn-warning {
    padding: 8px 16px; border-radius: 6px; font-size: inherit; font-weight: 500; cursor: pointer;
    text-decoration: none; border: 1px solid transparent; font-family: inherit; display: inline-flex;
    align-items: center; gap: 6px; white-space: nowrap;
}
.btn-primary, .btn-dark { background: #1e293b; color: #fff; }
.btn-primary:hover, .btn-dark:hover { background: #334155; text-decoration: none; }
.btn, .btn-secondary, .btn-outline { background: #fff; color: #374151; border-color: #d1d5db; }
.btn:hover, .btn-secondary:hover, .btn-outline:hover { background: #f9fafb; text-decoration: none; }
.btn-warning { background: #fff; color: #d97706; border-color: #fbbf24; }
.btn-warning:hover { background: #fffbeb; }
.btn-delete, .btn-outline-danger, .btn-danger { background: #fff; color: #dc2626; border-color: #fca5a5; }
.btn-delete:hover, .btn-outline-danger:hover { background: #fef2f2; border-color: #f87171; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled, .btn-primary:disabled, .btn-dark:disabled { opacity: .55; cursor: default; }
.btn-sm, .action-btn { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; border: 1px solid #d1d5db; background: #fff; color: #374151; }
.btn-sm:hover, .action-btn:hover { background: #f3f4f6; text-decoration: none; }
.btn-sm.btn-danger { color: #dc2626; border-color: #fca5a5; }
.btn-sm:disabled, .action-btn:disabled { opacity: .4; cursor: default; background: #fff; pointer-events: none; }
.svc-status { width: 1%; text-align: right; white-space: nowrap; padding-right: 4px; }
.kv-table { width: 100%; border-collapse: collapse; }
.kv-table th, .kv-table td { padding: 9px 16px; text-align: left; font-size: .85rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.kv-table tr:last-child th, .kv-table tr:last-child td { border-bottom: none; }
.kv-table th { width: 40%; color: #64748b; font-weight: 500; white-space: nowrap; }
.kv-table td { color: #1e293b; font-weight: 500; }
.stat-bad { color: #dc2626; font-weight: 600; }

/* Alpha / NDA confidentiality banner */
.alpha-banner { display: flex; align-items: flex-start; gap: 12px; background: linear-gradient(90deg, #fef3c7, #fffbeb); border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; box-shadow: var(--shadow); }
.alpha-banner-icon { width: 22px; height: 22px; color: #b45309; flex-shrink: 0; margin-top: 1px; }
.alpha-banner-text { font-size: .82rem; color: #78350f; line-height: 1.45; }
.alpha-banner-text strong { display: block; color: #92400e; margin-bottom: 2px; font-size: .88rem; }

/* Extension status chip (page header) + diagnostics tab */
.ext-status-chip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; padding: 9px 18px; box-shadow: var(--shadow); }
.ext-status-chip .dot { width: 12px; height: 12px; flex-shrink: 0; }
.ext-status-label { font-weight: 600; color: #1e293b; font-size: .92rem; line-height: 1.25; white-space: nowrap; }
.ext-status-sub { font-size: .74rem; color: #64748b; line-height: 1.2; white-space: nowrap; }
.diag-offline { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.diag-offline .dot { width: 14px; height: 14px; }
.diag-wrap { word-break: break-all; white-space: normal; }

/* Diagnostics summary tiles */
.diag-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.diag-tile { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 14px 16px; }
.diag-tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 600; margin-bottom: 6px; }
.diag-tile-value { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.diag-tile-value.ok { color: #16a34a; }
.diag-tile-value.warn { color: #d97706; }

/* Per-call quality metric chips */
.diag-call { padding: 6px 0 14px; border-bottom: 1px solid #f1f5f9; }
.diag-call:last-child { border-bottom: none; }
.diag-call-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.diag-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; margin-bottom: 12px; }
.qmetric { text-align: center; border-radius: 8px; padding: 10px 6px; background: #f8fafc; border: 1px solid #eef2f7; }
.qmetric .qv { font-size: 1.05rem; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.qmetric .ql { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin-top: 2px; }
.qmetric.q-good { background: #ecfdf5; border-color: #a7f3d0; } .qmetric.q-good .qv { color: #16a34a; }
.qmetric.q-warn { background: #fffbeb; border-color: #fde68a; } .qmetric.q-warn .qv { color: #d97706; }
.qmetric.q-bad  { background: #fef2f2; border-color: #fecaca; } .qmetric.q-bad .qv  { color: #dc2626; }

/* Firewall add-rule rows */
.fw-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 4px 0; }

/* Bulk selection bar + edit panel (DID Numbers) */
.bulk-bar { display: flex; align-items: center; gap: 10px; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.bulk-bar .spacer { flex: 1; }
.bulk-panel { margin-bottom: 16px; }
.bulk-field { padding: 12px 0; border-bottom: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 10px; }
.bulk-field:last-of-type { border-bottom: none; }
.bulk-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.bulk-routing { display: flex; flex-wrap: wrap; gap: 10px; padding-left: 26px; }
.data-table tr.row-selected td { background: #eef2ff; }

/* DID page top settings (Panel + SettingRow) */
.did-setting-row { display: flex; flex-direction: column; gap: 8px; }
/* Higher specificity than select.input (which forces width:100%) so the fixed width applies. */
.did-settings-panel select.did-select { width: 520px; max-width: 100%; }
.did-settings-panel .setting-row { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
.did-settings-panel .setting-row > .lbl { padding-top: 8px; }
@media (max-width: 980px) { .did-settings-panel .setting-row { grid-template-columns: 1fr; } }

/* Click-to-edit inline cell (DID description) */
.inline-edit-cell { position: relative; }
.inline-edit { width: 100%; min-width: 140px; border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 5px 8px; font: inherit; color: #1e293b; }
.inline-edit::placeholder { color: #cbd5e1; }
.inline-edit:hover { border-color: #e2e8f0; background: #f8fafc; }
.inline-edit:focus { outline: none; border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.inline-saved { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #16a34a; font-weight: 700; pointer-events: none; }
.perf-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.perf-col .perf-card .spark { height: 120px; }
.core-grid { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 20px; }
.core-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.core-label { font-size: .7rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.core-pct { font-size: .72rem; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.core-bar { width: 32px; height: 96px; background: #eef2f7; border-radius: 5px; display: flex; align-items: flex-end; overflow: hidden; box-shadow: inset 0 0 0 1px #e2e8f0; }
.core-fill { width: 100%; background: #3b82f6; border-radius: 0 0 5px 5px; transition: height .5s ease; }
.core-fill.warm { background: #f59e0b; }
.core-fill.hot { background: #ef4444; }

/* Per-interface split: details left, live graphs right */
.net-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 16px 16px; align-items: start; }
@media (max-width: 1000px) { .net-split { grid-template-columns: 1fr; } }
.net-left { min-width: 0; }
.net-right { display: flex; flex-direction: column; gap: 16px; }
.graph-card { background: #f9fafb; border: 1px solid #eef2f7; border-radius: 8px; padding: 12px 14px; }
.graph-card .spark { height: 110px; }

/* Live readouts: fixed-width slots so updating figures never shift surrounding text */
.metric-now.legend { display: inline-flex; gap: 14px; }
.metric-now.legend > span { display: inline-block; min-width: 8.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.metric-now.legend .dn { color: #6366f1; }
.metric-now.legend .up { color: #f59e0b; }
.metric-now { font-variant-numeric: tabular-nums; }
.kv-table td, .kv-table th, .data-table td, .data-table th, .mono { font-variant-numeric: tabular-nums; }
.net-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.net-table td:first-child, .net-table th:first-child { color: #64748b; }
.net-table tr.net-bad td { color: #dc2626; font-weight: 600; }
.form-card + .form-card { margin-top: 16px; }
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; flex-wrap: wrap; }

/* Toggle switch */
.toggle, .toggle-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input, .toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track, .toggle-slider { width: 36px; height: 20px; background: #d1d5db; border-radius: 10px; transition: background .2s; position: relative; flex-shrink: 0; }
.toggle-track::after, .toggle-slider::after { content: ''; position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 2px; left: 2px; transition: transform .2s; }
.toggle input:checked + .toggle-track, .toggle-switch input:checked + .toggle-slider { background: #1e293b; }
.toggle input:checked + .toggle-track::after, .toggle-switch input:checked + .toggle-slider::after { transform: translateX(16px); }

/* Badges */
.badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-purple { background: #ede9fe; color: #6d28d9; }
.badge-action { background: #e0e7ff; color: #3730a3; }

/* Data tables (list pages) */
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.data-table th { background: #f8fafc; padding: 10px 16px; text-align: left; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.data-table td { padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table tr:last-child td { border-bottom: none; }
.row-actions, td.actions-cell { display: flex; gap: 6px; white-space: nowrap; align-items: center; justify-content: flex-end; }
th.actions-cell { text-align: right; }

/* Tabs */
.tabs, .tab-bar { display: flex; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; gap: 0; flex-wrap: wrap; }
.tab, .tab-btn { padding: 8px 18px; border: none; background: none; font-size: inherit; font-family: inherit; color: #64748b; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; font-weight: 500; }
.tab:hover, .tab-btn:hover { color: #374151; }
.tab.active, .tab-btn.active { color: #1e293b; border-bottom-color: #1e293b; }
.tab.is-soon { opacity: .5; cursor: default; }

/* Two-column editor (form + right-hand cards) */
.editor-grid { display: flex; gap: 16px; align-items: flex-start; }
.editor-grid > div:first-child { flex: 1; min-width: 0; }
.editor-grid > div:nth-child(2) { width: 340px; flex-shrink: 0; }
@media (max-width: 1100px) { .editor-grid { flex-direction: column; } .editor-grid > div:nth-child(2) { width: 100%; } }
.side-card { background: #fff; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 16px; }
.side-card .head { padding: 12px 16px; font-weight: 600; font-size: 0.85rem; border-bottom: 1px solid #e5e7eb; background: #f9fafb; color: #1e293b; border-radius: 8px 8px 0 0; }
.side-card .body { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.side-card .body .desc { color: #94a3b8; font-size: 0.78rem; }

/* Chips (legacy assignment control) */
.chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; min-height: 36px; background: #fff; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 9999px; font-size: 0.75rem; white-space: nowrap; }
.chip button { border: none; background: none; cursor: pointer; color: #1e40af; font-size: .9rem; line-height: 1; padding: 0; opacity: .65; }
.chip button:hover { opacity: 1; }
.chips-empty { color: #94a3b8; font-size: 0.8rem; padding: 2px; }

/* Searchable multi-select chip box + checkbox dropdown */
.add-member-row { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0 16px; flex-wrap: nowrap; }
.add-member-type-select { padding: 7px 28px 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: inherit; font-family: inherit; background: #fff; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; flex-shrink: 0; }
.add-member-number { flex: 1; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: inherit; font-family: monospace; }
.add-member-number:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.btn-add-member { padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: inherit; font-family: inherit; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-add-member:hover { background: #f9fafb; }
.btn-add-member:disabled { opacity: .5; cursor: not-allowed; }
.ext-search-wrap { position: relative; flex: 1; min-width: 0; }
.ext-chip-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; cursor: text; min-height: 38px; }
.ext-chip-box:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.ext-sel-chip { display: inline-flex; align-items: center; gap: 4px; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 9999px; font-size: .75rem; white-space: nowrap; }
.ext-sel-chip-remove { background: none; border: none; color: #1e40af; font-size: .85rem; cursor: pointer; padding: 0; line-height: 1; opacity: .6; }
.ext-sel-chip-remove:hover { opacity: 1; }
.ext-search-input { border: none; outline: none; font-size: inherit; font-family: inherit; padding: 2px 4px; min-width: 120px; flex: 1; background: transparent; }
.ext-search-input::placeholder { color: #94a3b8; }
.ext-search-dropdown { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 200; overflow: hidden; }
.ext-check-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid #e5e7eb; background: #f9fafb; }
.ext-check-header-label { font-size: .75rem; color: #94a3b8; }
.ext-select-all { font-size: .75rem; color: #3b82f6; cursor: pointer; border: none; background: none; font-family: inherit; padding: 0; }
.ext-select-all:hover { text-decoration: underline; }
.ext-check-list { max-height: 220px; overflow-y: auto; }
.ext-search-option { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: .875rem; color: #1e293b; }
.ext-search-option:hover { background: #f1f5f9; }
.ext-search-option input[type="checkbox"] { flex-shrink: 0; accent-color: #1e293b; width: 14px; height: 14px; cursor: pointer; }
.ext-search-option.no-results { color: #94a3b8; cursor: default; font-style: italic; padding: 12px; }

/* Ordered member list */
.member-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.member-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f5f9; background: #fff; }
.member-item:last-child { border-bottom: none; }
.member-empty { padding: 18px 12px; color: #94a3b8; font-style: italic; font-size: .85rem; }
.member-idx { width: 20px; color: #94a3b8; font-size: .8rem; text-align: center; flex-shrink: 0; }
.member-label { color: #1e293b; font-size: .875rem; }
.member-item .spacer { flex: 1 1 auto; }
.member-remove { background: none; border: none; color: #64748b; cursor: pointer; padding: 4px 6px; border-radius: 4px; flex-shrink: 0; font-size: 1rem; line-height: 1; }
.member-remove:hover { color: #dc2626; background: #fef2f2; }
.icon-btn { border: none; background: none; cursor: pointer; color: #64748b; padding: 4px 6px; border-radius: 4px; }
.icon-btn:hover:not(:disabled) { color: #1e293b; background: #f1f5f9; }
.icon-btn:disabled { color: #cbd5e1; cursor: default; }

/* Business-hours day grid */
.quick-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; }
.btn-quick { padding: 4px 10px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; color: #374151; font-size: .78rem; font-family: inherit; cursor: pointer; white-space: nowrap; }
.btn-quick:hover { background: #f9fafb; }
.day-grid { padding: 4px 0; }
.day-row { display: flex; align-items: center; gap: 0; padding: 9px 16px; border-bottom: 1px solid #f1f5f9; }
.day-row:last-child { border-bottom: none; }
.day-row.weekend { background: #fafafa; }
.day-name { width: 110px; font-weight: 500; color: #374151; font-size: .875rem; flex-shrink: 0; }
.day-row.weekend .day-name { color: #64748b; }
.day-times { display: flex; align-items: center; gap: 8px; margin-left: 20px; }
.day-times input[type="time"] { width: 120px; }
.time-sep { color: #94a3b8; font-size: .8rem; flex-shrink: 0; }
.day-closed-label { margin-left: 20px; color: #94a3b8; font-size: .85rem; font-style: italic; }
.holiday-add-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }

/* Profile multi-card grid */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.profile-grid .full-width { grid-column: 1 / -1; }
@media (max-width: 980px) { .profile-grid { grid-template-columns: 1fr; } }
.detail-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { width: 140px; flex-shrink: 0; font-weight: 500; color: #64748b; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.detail-value { color: #1e293b; }
.help-text { font-size: .8rem; color: #64748b; margin-top: 8px; }

/* Notification template editor */
.content-layout { display: grid; grid-template-columns: 1fr 260px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .content-layout { grid-template-columns: 1fr; } }
.sidebar-panel { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 20px; }
.sidebar-panel h3 { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin: 0 0 12px; }
.placeholder-list { list-style: none; padding: 0; margin: 0; }
.placeholder-list li { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.placeholder-list li:last-child { border-bottom: none; }
.placeholder-code { display: inline-block; font-family: monospace; font-size: .75rem; background: #f1f5f9; color: #1e293b; padding: 2px 6px; border-radius: 4px; user-select: all; }
.placeholder-desc { display: block; font-size: .7rem; color: #64748b; margin-top: 2px; }
.section-title { font-weight: 600; color: #374151; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }

/* Voicemail greeting controls */
.greeting-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.greeting-filename { color: #374151; font-size: .85rem; font-family: monospace; }
.greeting-none { color: #94a3b8; font-size: .85rem; font-style: italic; }
.btn-upload-greeting { padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: .8rem; font-family: inherit; cursor: pointer; white-space: nowrap; }
.btn-upload-greeting:hover { background: #f9fafb; }
.btn-record-greeting { padding: 5px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: .8rem; font-family: inherit; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.btn-record-greeting:hover { background: #f9fafb; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; flex-shrink: 0; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-box { background: #fff; border-radius: 10px; width: 420px; max-width: calc(100vw - 32px); box-shadow: 0 20px 50px rgba(0,0,0,.25); padding: 24px; }
.modal-title { font-weight: 600; color: #1e293b; font-size: 1rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Auth pages */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f5f5; }
.auth-card { width: 380px; background: #fff; border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,.08); padding: 32px; }
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-logo { max-height: 40px; }
.auth-wordmark { font-size: 1.4rem; font-weight: 700; color: #1e293b; }
.auth-title { font-size: 1.15rem; text-align: center; margin-bottom: 24px; color: #1e293b; }

.validation-message { color: #dc2626; font-size: 0.78rem; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fee2e2; color: #991b1b; padding: 12px 20px; z-index: 1000; }

/* Collapsible nav groups implemented with <details> (works without JS) */
.sidebar-nav details > summary { list-style: none; }
.sidebar-nav details > summary::-webkit-details-marker { display: none; }
.sidebar-nav details[open] > .nav-children { display: block; }
.sidebar-nav details[open] .nav-arrow::after { transform: rotate(90deg); }

/* MOH track upload (drop zone + progress) */
.upload-area { position: relative; border: 2px dashed #cbd5e1; border-radius: 8px; padding: 22px; text-align: center; background: #f9fafb; transition: border-color .15s, background .15s; }
.upload-area:hover { border-color: #3b82f6; background: #f0f6ff; }
.upload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-input:disabled { cursor: default; }
.upload-inner { display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.upload-inner strong { color: #1e293b; }
.upload-inner .muted { font-size: .78rem; }
.upload-job { margin-top: 12px; }
.upload-job-head { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; margin-bottom: 4px; }
.progress { height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; background: #1e293b; border-radius: 9999px; transition: width .15s ease; }
.progress-bar.indeterminate { width: 40% !important; animation: progress-slide 1.1s ease-in-out infinite; }
@keyframes progress-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* MOH track row: [num] [name] ......scrubber(only while playing)...... [play][len][size][up][down][del] */
.track-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9; background: #fff; }
.track-item:last-child { border-bottom: none; }
.track-name { color: #1e293b; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.track-scrubber { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 40px; padding: 0 20px; visibility: hidden; }
.track-item.playing .track-scrubber { visibility: visible; }
.track-cur { font-size: .72rem; color: #64748b; min-width: 30px; }
.scrubber-bar { flex: 1; height: 6px; background: #e5e7eb; border-radius: 9999px; cursor: pointer; overflow: hidden; }
.scrubber-fill { height: 100%; width: 0%; background: #1e293b; border-radius: 9999px; }
.track-play { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid #d1d5db; background: #fff; border-radius: 50%; color: #1e293b; cursor: pointer; font-size: .7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.track-play:hover { background: #f1f5f9; }
.track-len, .track-size { font-size: .78rem; white-space: nowrap; flex-shrink: 0; min-width: 42px; text-align: right; }

/* FreeSWITCH live log console */
.log-console { background: #0d1117; color: #d1d5db; border-radius: 8px; padding: 12px 14px; height: calc(100vh - 260px); min-height: 320px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.5; box-shadow: var(--shadow); }
.log-empty { color: #6b7280; font-style: italic; }
.log-line { display: flex; gap: 10px; padding: 1px 0; align-items: flex-start; }
.log-time { flex-shrink: 0; width: 62px; color: #6b7280; font-variant-numeric: tabular-nums; }
.log-lvl { flex-shrink: 0; width: 64px; color: #6b7280; text-transform: uppercase; font-size: .68rem; padding-top: 1px; }
.log-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.log-line.lvl-err { color: #fca5a5; }
.log-line.lvl-err .log-lvl { color: #ef4444; }
.log-line.lvl-warn { color: #fcd34d; }
.log-line.lvl-warn .log-lvl { color: #f59e0b; }
.log-line.lvl-notice .log-lvl { color: #60a5fa; }
.log-line.lvl-debug { color: #94a3b8; }
.log-line.lvl-info { color: #d1d5db; }

/* Hover/focus info tooltip */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: .72rem; cursor: help; flex-shrink: 0; outline: none; }
.info-tip:hover, .info-tip:focus { background: #cbd5e1; color: #1e293b; }
.info-pop { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 360px; max-width: 70vw; background: #fff; color: #374151; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 12px 14px; z-index: 300; font-size: .78rem; line-height: 1.45; cursor: default; }
.info-tip:hover .info-pop, .info-tip:focus .info-pop, .info-tip:focus-within .info-pop { display: block; }
.info-pop strong { color: #1e293b; }
.info-pop p { margin: 6px 0 8px; color: #64748b; }
.info-pop ul { margin: 0; padding-left: 0; list-style: none; }
.info-pop li { padding: 3px 0; border-top: 1px solid #f1f5f9; }
.info-pop li b { color: #1e293b; }

/* System Health */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .metric-grid { grid-template-columns: 1fr; } }
.metric-card { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 14px 16px; }
.metric-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.metric-head > span:first-child { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 600; }
.metric-now { font-size: 1.15rem; font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 44px; display: block; }
.metric-sub { font-size: .72rem; color: #64748b; margin-top: 6px; }

/* Task-manager style Performance tab: big, double-size charts */
.perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 900px) { .perf-grid { grid-template-columns: 1fr; } }
.perf-card { background: #fff; border-radius: 8px; box-shadow: var(--shadow); padding: 18px 20px; }
.perf-card .metric-head > span:first-child { font-size: .8rem; }
.perf-card .metric-now { font-size: 1.4rem; }
.perf-card .spark { height: 150px; margin-top: 8px; }
.perf-card .metric-sub { font-size: .76rem; margin-top: 8px; }

/* Processes tab: scrollable, sortable table */
.proc-scroll { max-height: calc(100vh - 300px); overflow-y: auto; border-radius: 8px; box-shadow: var(--shadow); background: #fff; }
.proc-scroll .data-table { box-shadow: none; }
.proc-scroll thead th { position: sticky; top: 0; z-index: 1; background: #f9fafb; }
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: #1e293b; }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table th.sort-asc::after { content: " \25B2"; font-size: .6rem; }
.data-table th.sort-desc::after { content: " \25BC"; font-size: .6rem; }
.health-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .health-cols { grid-template-columns: 1fr; } }
.disk-row { padding: 8px 0; }
.disk-row:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
.disk-label { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: 5px; }
.disk-bar { height: 8px; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.disk-fill { height: 100%; background: #10b981; border-radius: 9999px; }
.disk-fill.warm { background: #f59e0b; }
.disk-fill.hot { background: #ef4444; }

/* Extension presence traffic-light */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; vertical-align: middle; }
.dot-available { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.dot-busy { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.18); }
.dot-ringing { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.18); animation: dot-pulse 1s ease-in-out infinite; }
.dot-offline { background: #cbd5e1; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.status-legend { display: flex; gap: 14px; font-size: .72rem; color: #64748b; }
.status-legend span { display: inline-flex; align-items: center; gap: 5px; }