:root {
    --bg:            #08090d;
    --surface:       #0f1116;
    --surface-2:     #161921;
    --surface-3:     #1c2130;
    --border:        #1e2330;
    --border-sub:    #13151c;
    --accent:        #00d4b8;
    --accent-dim:    rgba(0,212,184,0.08);
    --accent-border: rgba(0,212,184,0.25);
    --warn:          #f59e0b;
    --warn-dim:      rgba(245,158,11,0.08);
    --error:         #f43f5e;
    --error-dim:     rgba(244,63,94,0.08);
    --success:       #10b981;
    --success-dim:   rgba(16,185,129,0.08);
    --ghost:         #7a9db2;
    --ghost-dim:     rgba(122,157,178,0.12);
    --text:          #e2e8f0;
    --text-2:        #9ac0d8;
    --text-3:        #6899ac;
    --mono:          'JetBrains Mono', monospace;
    --sans:          'Inter', sans-serif;
    --thead-top:     52px;   /* updated by updateStickyOffsets() */
    --overlay-bg:        rgba(8,9,13,0.88);
    --login-overlay-bg:  rgba(8,9,13,0.92);
    --stripe-bg:         rgba(255,255,255,0.012);
    --btn-accent-text:   #000;
    --body-font-size:    14px;
    --body-font-weight:  500;
    --table-font-size:   14px;
    --table-font-weight: 500;
    --mono-font-weight:  500;
}

/* ── VELVET CIRCUIT THEME ───────────────────────────── */
/* ── POLAR MIST THEME ──────────────────────────────── */
html[data-theme="polar-mist"] {
    --bg:            #f0f6fb;
    --surface:       #ffffff;
    --surface-2:     #e8f0f8;
    --surface-3:     #dde8f3;
    --border:        #bfd0e2;
    --border-sub:    #d1deea;
    --accent:        #197fc2;
    --accent-dim:    rgba(25,127,194,0.10);
    --accent-border: rgba(25,127,194,0.26);
    --warn:          #9f5f00;
    --warn-dim:      rgba(159,95,0,0.09);
    --error:         #bf3434;
    --error-dim:     rgba(191,52,52,0.08);
    --success:       #117a5d;
    --success-dim:   rgba(17,122,93,0.09);
    --ghost:         #68849f;
    --ghost-dim:     rgba(104,132,159,0.13);
    --text:          #10283b;
    --text-2:        #2f4f66;
    --text-3:        #5a7b92;
    --overlay-bg:        rgba(16,40,59,0.61);
    --login-overlay-bg:  rgba(16,40,59,0.67);
    --stripe-bg:         rgba(0,45,90,0.017);
    --btn-accent-text:   #ffffff;
    --body-font-size:    14.5px;
    --body-font-weight:  540;
    --table-font-size:   14.5px;
    --table-font-weight: 540;
    --mono-font-weight:  540;
}

/* ── PERSONAL THEME (Customizable) ─────────────────── */
html[data-theme="personal"] {
    --bg:            #08090d;
    --surface:       #0f1116;
    --surface-2:     #161921;
    --surface-3:     #1c2130;
    --border:        #1e2330;
    --border-sub:    #13151c;
    --accent:        #00d4b8;
    --accent-dim:    rgba(0,212,184,0.08);
    --accent-border: rgba(0,212,184,0.25);
    --warn:          #f59e0b;
    --warn-dim:      rgba(245,158,11,0.08);
    --error:         #f43f5e;
    --error-dim:     rgba(244,63,94,0.08);
    --success:       #10b981;
    --success-dim:   rgba(16,185,129,0.08);
    --ghost:         #7a9db2;
    --ghost-dim:     rgba(122,157,178,0.12);
    --text:          #e2e8f0;
    --text-2:        #9ac0d8;
    --text-3:        #6899ac;
    --overlay-bg:        rgba(8,9,13,0.88);
    --login-overlay-bg:  rgba(8,9,13,0.92);
    --stripe-bg:         rgba(255,255,255,0.012);
    --btn-accent-text:   #000;
    --body-font-size:    14px;
    --body-font-weight:  500;
    --table-font-size:   14px;
    --table-font-weight: 500;
    --mono-font-weight:  500;
}

/* ── PERSONAL THEME (Light mode) ───────────────────── */
html[data-theme="personal"][data-personal-mode="light"] {
    --bg:            #f0f6fb;
    --surface:       #ffffff;
    --surface-2:     #e8f0f8;
    --surface-3:     #dde8f3;
    --border:        #bfd0e2;
    --border-sub:    #d1deea;
    --accent-dim:    rgba(0,212,184,0.10);
    --accent-border: rgba(0,212,184,0.26);
    --warn:          #9f5f00;
    --warn-dim:      rgba(159,95,0,0.09);
    --error:         #bf3434;
    --error-dim:     rgba(191,52,52,0.08);
    --success:       #117a5d;
    --success-dim:   rgba(17,122,93,0.09);
    --ghost:         #68849f;
    --ghost-dim:     rgba(104,132,159,0.13);
    --text:          #10283b;
    --text-2:        #2f4f66;
    --text-3:        #5a7b92;
    --overlay-bg:        rgba(16,40,59,0.61);
    --login-overlay-bg:  rgba(16,40,59,0.67);
    --stripe-bg:         rgba(0,45,90,0.017);
    --btn-accent-text:   #ffffff;
    --body-font-size:    14.5px;
    --body-font-weight:  540;
    --table-font-size:   14.5px;
    --table-font-weight: 540;
    --mono-font-weight:  540;
}

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

/* ── Skip links (keyboard users) ──────────────────────── */
.skip-link {
    position: fixed;
    top: -100px;
    left: 16px;
    z-index: 999;
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 8px;
    outline: none;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: 1.6;
    min-height: 100vh;
}

/* ── Global focus-visible ────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Comfortable density mode ─────────────────────────── */
html[data-density="comfortable"] .panel-card { padding: 20px; border-radius: 14px; }
html[data-density="comfortable"] .home-grid { gap: 16px; }
html[data-density="comfortable"] .home-kpi { min-height: 120px; }
html[data-density="comfortable"] .kpi-label { font-size: 13px; }
html[data-density="comfortable"] .kpi-val { font-size: 34px; }
html[data-density="comfortable"] table td { padding: 10px 14px; font-size: 14px; }
html[data-density="comfortable"] table th { padding: 10px 14px; font-size: 13px; }
html[data-density="comfortable"] .detail-filter-item { padding: 10px 10px; }
html[data-density="comfortable"] .detail-item-label { font-size: 14px; }
html[data-density="comfortable"] .needs-attention-card { padding: 14px 16px; }
html[data-density="comfortable"] .home-briefing { padding: 18px 22px; }
html[data-density="comfortable"] .briefing-sentence { font-size: 17px; }
html[data-density="comfortable"] .btn-sync { padding: 8px 20px; font-size: 13px; }
html[data-density="comfortable"] .btn-pulse { padding: 8px 14px; font-size: 12px; }
html[data-density="comfortable"] .drawer-field { padding: 10px 14px; }
html[data-density="comfortable"] .pinned-filter-chip { padding: 6px 14px; font-size: 11px; }

/* ── HEADER ────────────────────────────────────────── */
header {
    position: sticky; top: 0; z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 24px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.brand svg { width: 14px; height: 14px; fill: var(--accent); }

.h-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }

.subtitle {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.h-spacer { flex: 1; }

.source-indicators {
    display: flex;
    gap: 14px;
    align-items: center;
}

.src-ind {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: 0.04em;
}

.src-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}

.src-ind.ok    .src-dot { background: var(--success); }
.src-ind.error .src-dot { background: var(--error); }
.src-ind.ok    { color: var(--text-2); }

.last-sync {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
}

.last-sync b { color: var(--text-2); font-weight: 500; }

.last-sync.stale {
    color: var(--warn);
}

.last-sync.stale b {
    color: var(--warn);
    font-weight: 600;
}

.btn-sync {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--btn-accent-text);
    background: var(--accent);
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
    flex-shrink: 0;
}

.btn-sync:hover:not(:disabled) { opacity: 0.88; box-shadow: 0 0 0 3px var(--accent-dim); }
.btn-sync:active:not(:disabled) { transform: scale(0.97); }
.btn-sync:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-sync.syncing { background: var(--accent); opacity: 1; }

.sync-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
}
.sync-progress-pill[hidden] { display: none; }

.sync-progress-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.sync-progress-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ── SYSTEM PULSE PANEL ────────────────────────────── */
.pulse-wrap {
    position: relative;
    flex-shrink: 0;
}

.btn-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-pulse:hover,
.btn-pulse.open {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-3);
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    transition: background 0.3s;
}

.pulse-dot.stale { background: var(--warn); }
.pulse-dot.error { background: var(--error); }

.pulse-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-height: min(78vh, 760px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0;
    z-index: 910;
    box-shadow: 0 8px 24px var(--overlay-bg);
}

.pulse-panel.open { display: block; }

.pulse-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border-sub);
}

.pulse-panel-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.pulse-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.pulse-section {
    padding: 12px 16px;
}

.pulse-section-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    margin-bottom: 8px;
}

.pulse-row {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 4px;
}

.pulse-row b { color: var(--text); font-weight: 600; }

#syncStatusSection.stale .pulse-row,
#syncStatusSection.stale .pulse-row b {
    color: var(--warn);
}

.pulse-divider {
    height: 1px;
    background: var(--border-sub);
    margin: 0;
}

.pulse-sources-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.pulse-src-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-sub);
    border-radius: 8px;
    background: var(--surface-2);
}

.pulse-src-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.pulse-src-details {
    flex: 1;
    min-width: 0;
}

.pulse-src-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.03em;
}

.pulse-src-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
}

.pulse-src-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
}

.settings-wrap {
    position: relative;
    flex-shrink: 0;
}

.btn-settings {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-settings:hover,
.btn-settings.open {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface-3);
}

.btn-settings.has-alert::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--error);
    box-shadow: 0 0 0 2px var(--surface-2);
}

.btn-settings.has-alert.stale-alert::after {
    background: var(--warn);
}

.settings-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: min(78vh, 760px);
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    z-index: 900;
    box-shadow: 0 8px 24px var(--overlay-bg);
}

.settings-menu.open { display: block; }

.settings-section { display: grid; gap: 8px; }

.settings-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
}

.settings-row {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
}

.settings-row b { color: var(--text); font-weight: 600; }

#syncStatusSection.stale .settings-row,
#syncStatusSection.stale .settings-row b {
    color: var(--warn);
}

.settings-row-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settings-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 10px;
    border: 1px solid var(--warn);
    background: var(--warn-dim);
    color: var(--warn);
}

.settings-divider {
    height: 1px;
    background: var(--border-sub);
    margin: 12px 0;
}

.settings-link-btn {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.settings-link-btn:hover { color: var(--text); }

.settings-tool-btn {
    width: 100%;
    text-align: left;
}

.stale-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 16px;
    background: var(--warn-dim);
    color: var(--warn);
    border-bottom: 1px solid var(--warn);
}
.stale-banner[hidden] { display: none; }

.stale-icon {
    font-size: 14px;
    line-height: 1;
}

.stale-text {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--warn);
}

.stale-sync-btn,
.stale-dismiss {
    border: 1px solid var(--warn);
    background: transparent;
    color: var(--warn);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 8px;
    cursor: pointer;
}

.stale-sync-btn { margin-left: auto; }

.stale-sync-btn:hover,
.stale-dismiss:hover {
    background: var(--warn);
    color: var(--bg);
}

/* ── MAIN ──────────────────────────────────────────── */
main {
    flex: 1;
    min-width: 0;
    padding: 20px 24px 40px;
}

/* ── STAT CARDS ────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 1px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.stat {
    background: var(--surface);
    padding: 16px 20px 14px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s, box-shadow 0.12s;
    overflow: hidden;
}

.stat:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent-border); }

.stat::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    transform: scaleX(0);
    transition: transform 0.2s;
}

.stat.active::after { transform: scaleX(1); }
.stat.s-total::after  { background: var(--accent); }
.stat.s-ok::after     { background: var(--success); }
.stat.s-disc::after   { background: var(--warn); }
.stat.s-unmanaged::after { background: var(--error); }
.stat.s-phantom::after { background: var(--ghost); }

.stat.active { background: var(--surface-2); }

.stat-label {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 6px;
}

.stat-val {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}

.s-total    .stat-val { color: var(--accent); }
.s-ok       .stat-val { color: var(--success); }
.s-disc     .stat-val { color: var(--warn); }
.s-unmanaged .stat-val { color: var(--error); }
.s-phantom  .stat-val { color: var(--ghost); }

.stat-sub {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
}

/* ── SOURCE CARDS ──────────────────────────────────── */
.sources-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-top: none;
    margin-bottom: 20px;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.src-card {
    background: var(--surface);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: background 0.12s;
}

.src-card:hover { background: var(--surface-2); }

.src-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.src-details { flex: 1; min-width: 0; }

.src-name {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
}

.src-count {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.src-badge {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
    flex-shrink: 0;
}

.src-badge.ok            { color: var(--success); background: var(--success-dim); }
.src-badge.error         { color: var(--error);   background: var(--error-dim); }
.src-badge.not_configured { color: var(--text-3);  background: var(--ghost-dim); }

/* ── TOAST NOTIFICATIONS ───────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10000;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    min-width: 260px;
    max-width: 380px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.24);
    pointer-events: all;
    animation: toast-in 0.2s ease;
    font-size: 13px;
    line-height: 1.4;
}
.toast.dismissing { animation: toast-out 0.2s ease forwards; }
.toast-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; min-width: 0; }
.toast-msg  { color: var(--text); font-weight: 500; }
.toast-detail { color: var(--text-2); font-size: 11px; margin-top: 2px; }
.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    margin-top: 1px;
}
.toast-close:hover { color: var(--text); }
.toast.success { border-color: var(--success); background: var(--success-dim); }
.toast.success .toast-msg { color: var(--success); }
.toast.error   { border-color: var(--error);   background: var(--error-dim); }
.toast.error   .toast-msg { color: var(--error); }
.toast.warning { border-color: var(--warn);    background: var(--warn-dim); }
.toast.warning .toast-msg { color: var(--warn); }
.toast.info    { border-color: var(--accent);  background: var(--accent-dim); }
.toast.info    .toast-msg { color: var(--accent); }
@keyframes toast-in  {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(16px); }
}

/* ── CONTROLS ──────────────────────────────────────── */
.controls {
    display: flex;
    gap: 6px;
    margin-bottom: 1px;
    align-items: center;
}

.s-input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 8px 14px;
    outline: none;
    width: 220px;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.s-input::placeholder { color: var(--text-3); }
.s-input:focus        { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.f-select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 13px;
    padding: 8px 12px;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.f-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.c-spacer { flex: 1; }

.result-count {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: var(--mono-font-weight);
    color: var(--text-3);
}

/* ── TABLE ─────────────────────────────────────────── */
.tbl-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: auto;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

#deviceTable.hide-col-serial th.col-serial,
#deviceTable.hide-col-serial td.col-serial,
#deviceTable.hide-col-hostname th.col-hostname,
#deviceTable.hide-col-hostname td.col-hostname,
#deviceTable.hide-col-platform th.col-platform,
#deviceTable.hide-col-platform td.col-platform,
#deviceTable.hide-col-model th.col-model,
#deviceTable.hide-col-model td.col-model,
#deviceTable.hide-col-username th.col-username,
#deviceTable.hide-col-username td.col-username,
#deviceTable.hide-col-source th.col-source,
#deviceTable.hide-col-source td.col-source,
#deviceTable.hide-col-last_seen th.col-last_seen,
#deviceTable.hide-col-last_seen td.col-last_seen,
#deviceTable.hide-col-snipe_asset_tag th.col-snipe_asset_tag,
#deviceTable.hide-col-snipe_asset_tag td.col-snipe_asset_tag,
#deviceTable.hide-col-snipe_status th.col-snipe_status,
#deviceTable.hide-col-snipe_status td.col-snipe_status,
#deviceTable.hide-col-status th.col-status,
#deviceTable.hide-col-status td.col-status,
#deviceTable.hide-col-issues th.col-issues,
#deviceTable.hide-col-issues td.col-issues,
#deviceTable.hide-col-confidence th.col-confidence,
#deviceTable.hide-col-confidence td.col-confidence,
#deviceTable.hide-col-encryption_status th.col-encryption_status,
#deviceTable.hide-col-encryption_status td.col-encryption_status {
    display: none !important;
}

thead {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

th {
    padding: 10px 14px;
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-3);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    border-right: 1px solid var(--border-sub);
}

th:last-child { border-right: none; cursor: default; }
th:hover { color: var(--text-2); }
th:last-child:hover { color: var(--text-3); }
th.sorted { color: var(--accent); }

.sort-arr { opacity: 0.3; margin-left: 3px; }
.sorted .sort-arr { opacity: 1; }

tbody tr {
    border-bottom: 1px solid var(--border-sub);
    transition: background 0.08s;
}
tbody tr:nth-child(even) { background: var(--stripe-bg); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface) !important; }

td {
    padding: 11px 14px;
    font-family: var(--sans);
    font-size: var(--table-font-size);
    font-weight: var(--table-font-weight);
    color: var(--text-2);
    border-right: 1px solid var(--border-sub);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

td:last-child { border-right: none; white-space: normal; }

/* Serial stays mono — it's a code */
td.c-serial {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Hostname is human-readable text */
td.c-hostname {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}

/* User field */
td.c-user {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-2);
}

/* Model field */
td.c-model {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--text-2);
}

/* Dim empty dash */
td.c-empty {
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 13px;
}

.serial-link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
}

.serial-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Status pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}

.pill::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pill.ok          { color: var(--success); background: var(--success-dim); }
.pill.ok::before  { background: var(--success); border-radius: 50%; }
.pill.discrepancy { color: var(--warn);    background: var(--warn-dim); }
.pill.discrepancy::before { background: var(--warn); border-radius: 1px; transform: rotate(45deg); }
.pill.unmanaged   { color: var(--error);   background: var(--error-dim); }
.pill.unmanaged::before { background: var(--error); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); border-radius: 0; width: 7px; height: 6px; }
.pill.outdated_info { color: #f59e0b; background: rgba(245,158,11,0.12); }
.pill.outdated_info::before { background: #f59e0b; border-radius: 1px; transform: rotate(45deg); }
.pill.unused { color: var(--ghost); background: var(--ghost-dim); }
.pill.unused::before { background: var(--ghost); }
.pill.phantom     { color: var(--ghost);   background: var(--ghost-dim); }
.pill.phantom::before { background: var(--ghost); }

/* Okta status urgency tiers */
.pill.okta-active   { color: var(--text-3); background: transparent; border: 1px solid var(--border-sub); }
.pill.okta-active::before { display: none; }
.pill.okta-medium   { color: var(--warn);  background: rgba(245, 158, 11, 0.10); border: 1px solid var(--warn); }
.pill.okta-medium::before { background: var(--warn); }
.pill.okta-high     { color: var(--err);   background: rgba(239, 68, 68, 0.10); border: 1px solid var(--err); }
.pill.okta-high::before { background: var(--err); }
.pill.okta-critical { color: #fff; background: var(--err); border: 1px solid var(--err); font-weight: 600; }
.pill.okta-critical::before { background: #fff; }

/* Stale row */
.row-stale { opacity: 0.72; }

/* Encryption badge */
.enc-badge { font-size: 14px; cursor: default; }
.enc-on  { color: var(--success); }
.enc-off { color: var(--error); }

/* Confidence badge */
.conf-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    min-width: 28px;
    text-align: center;
}
.conf-high { color: var(--success); background: var(--success-dim); }
.conf-mid  { color: var(--warn);    background: var(--warn-dim); }
.conf-low  { color: var(--error);   background: var(--error-dim); }

/* Source badge — each source has its own color */
.s-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 100px;
}
.s-tag.jc  { color: #60a5fa; border-color: rgba(96,165,250,0.3);  background: rgba(96,165,250,0.06); }
.s-tag.kj  { color: #a78bfa; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.06); }
.s-tag.gw  { color: #34d399; border-color: rgba(52,211,153,0.3);  background: rgba(52,211,153,0.06); }
.s-tag.si  { color: #f59e0b; border-color: rgba(245,158,11,0.3);  background: rgba(245,158,11,0.06); }
.s-tag.tn  { color: #06b6d4; border-color: rgba(6,182,212,0.3);   background: rgba(6,182,212,0.06); }

/* Platform badge */
.p-tag {
    font-family: var(--mono);
    font-size: 11px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-3);
}

.p-tag.macos    { color: #a78bfa; border-color: rgba(167,139,250,0.25); background: rgba(167,139,250,0.05); }
.p-tag.windows  { color: #60a5fa; border-color: rgba(96,165,250,0.25);  background: rgba(96,165,250,0.05); }
.p-tag.linux    { color: #fb923c; border-color: rgba(251,146,60,0.25);  background: rgba(251,146,60,0.05); }
.p-tag.chromeos { color: #34d399; border-color: rgba(52,211,153,0.25);  background: rgba(52,211,153,0.05); }

/* Issues — truncated with expand */
.issue-wrap { white-space: normal; max-width: 280px; }
.issue-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--warn);
    line-height: 1.5;
}
.issue-item::before { content: '⚠'; font-size: 12px; flex-shrink: 0; }

/* Writeback feedback */
.wb-ok  { color: var(--success); font-size: 12px; font-family: var(--mono); }
.wb-err { color: var(--error);   font-size: 12px; font-family: var(--mono); white-space: normal; }

/* Empty */
.empty {
    padding: 56px 24px;
    text-align: center;
}

.empty-glyph {
    font-family: var(--mono);
    font-size: 36px;
    color: var(--text-3);
    margin-bottom: 12px;
    letter-spacing: -4px;
}

.empty-text {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-3);
    letter-spacing: 0.06em;
}

.empty-hint {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--text-3);
    margin-top: 8px;
    opacity: 0.7;
}

/* ── LOADING ───────────────────────────────────────── */
.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.overlay.show { display: flex; }

.sync-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    cursor: default;
}

.sync-center {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 320px;
    max-width: 520px;
    cursor: default;
}

.sync-cancel-btn {
    padding: 6px 16px;
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sync-cancel-btn:hover {
    background: var(--error, #d04848);
    color: #fff;
    border-color: var(--error, #d04848);
}

.spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.load-label {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--text-2);
}

.load-sub {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-3);
}

.sync-status-list {
    width: min(560px, calc(100vw - 32px));
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    padding: 10px;
    max-height: 44vh;
    overflow: auto;
}

.sync-status-row {
    display: grid;
    grid-template-columns: 14px minmax(100px, 140px) 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-sub);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: var(--text-2);
}

.sync-status-row:last-child {
    border-bottom: none;
}

.sync-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-3);
    box-shadow: 0 0 0 1px var(--border);
}

.sync-status-row.queued .sync-dot,
.sync-status-row.running .sync-dot {
    background: var(--warn);
    box-shadow: 0 0 0 1px var(--warn-dim);
}

.sync-status-row.running .sync-dot {
    animation: pulse-dot 1.1s ease-in-out infinite;
}

.sync-status-row.ok .sync-dot {
    background: var(--success);
    box-shadow: 0 0 0 1px var(--success-dim);
}

.sync-status-row.error .sync-dot {
    background: var(--error);
    box-shadow: 0 0 0 1px var(--error-dim);
}

.sync-status-row.not_configured .sync-dot {
    background: var(--text-3);
}

.sync-source-name {
    text-transform: uppercase;
    color: var(--text);
}

.sync-source-msg {
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sync-source-meta {
    color: var(--text-3);
    font-size: 11px;
    white-space: nowrap;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* ── EXPORT BTN ────────────────────────────────────── */
.btn-export {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    padding: 7px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn-export:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.btn-export:disabled { opacity: 0.3; cursor: not-allowed; }

/* ── PUSH BTN ──────────────────────────────────────── */
.btn-push {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--error);
    border: none;
    padding: 7px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: opacity 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.btn-push:hover:not(:disabled) { opacity: 0.88; box-shadow: 0 0 0 3px var(--error-dim); }
.btn-push:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── EXCLUDE BTN ────────────────────────────────────── */
.btn-exclude {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--warn);
    background: transparent;
    border: 1px solid var(--warn-dim);
    padding: 7px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.btn-exclude:hover:not(:disabled) { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.btn-exclude:disabled { opacity: 0.3; cursor: not-allowed; }

.excluded-bar {
    display: none;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
    align-items: center;
    gap: 8px;
}
.excluded-bar.show { display: flex; }
.excluded-bar b { color: var(--warn); font-weight: 400; }
.restore-link {
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── CHECKBOX ───────────────────────────────────────── */
.cb-col { width: 32px; text-align: center; padding: 9px 8px; }
input[type=checkbox] {
    appearance: none;
    width: 13px; height: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    border-radius: 3px;
    transition: border-color 0.15s, background 0.15s;
}
input[type=checkbox]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 2px; top: 0px;
    width: 5px; height: 8px;
    border: 1.5px solid #000;
    border-top: none; border-left: none;
    transform: rotate(40deg);
}
input[type=checkbox]:hover { border-color: var(--accent); }

/* ── LAYOUT ────────────────────────────────────────── */
.layout {
    display: flex;
    min-height: calc(100vh - 52px);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
    margin: 1px 6px;
    border-radius: 0 6px 6px 0;
}

.nav-item:hover  { background: var(--surface-2); }
.nav-item.active { background: var(--surface-2); }

.nav-item.active[data-filter="all"]         { border-left-color: var(--accent); }
.nav-item.active[data-filter="ok"]          { border-left-color: var(--success); }
.nav-item.active[data-filter="discrepancy"] { border-left-color: var(--warn); }
.nav-item.active[data-filter="unmanaged"]   { border-left-color: var(--error); }
.nav-item.active[data-filter="missing_mdm"] { border-left-color: #fb923c; }
.nav-item.active[data-filter="outdated_info"] { border-left-color: #f59e0b; }
.nav-item.active[data-filter="unused"]      { border-left-color: var(--ghost); }
.nav-item.active[data-filter="not_in_kandji"],
.nav-item.active[data-filter="not_in_jumpcloud"],
.nav-item.active[data-filter="multi_device"] { border-left-color: #fb923c; }
.nav-item.active[data-filter="snipe_not_in_s1"],
.nav-item.active[data-filter="mdm_not_in_s1"],
.nav-item.active[data-filter="not_in_s1"],
.nav-item.active[data-filter="s1_not_in_kandji"],
.nav-item.active[data-filter="s1_not_in_jc"] { border-left-color: #a78bfa; }

.nav-item.active[data-filter="snipe_not_in_gw"],
.nav-item.active[data-filter="mdm_not_in_gw"],
.nav-item.active[data-filter="not_in_gw"] { border-left-color: #34d399; }

.nav-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

[data-filter="all"]         .nav-dot { background: var(--accent); }
[data-filter="ok"]          .nav-dot { background: var(--success); }
[data-filter="discrepancy"] .nav-dot { background: var(--warn); }
[data-filter="unmanaged"]   .nav-dot { background: var(--error); }
[data-filter="missing_mdm"]   .nav-dot { background: #fb923c; }
[data-filter="outdated_info"] .nav-dot { background: #f59e0b; }
[data-filter="unused"]      .nav-dot { background: var(--ghost); }
[data-filter="not_in_kandji"] .nav-dot,
[data-filter="not_in_jumpcloud"] .nav-dot,
[data-filter="multi_device"] .nav-dot { background: #fb923c; }
[data-filter="snipe_not_in_s1"] .nav-dot,
[data-filter="mdm_not_in_s1"] .nav-dot,
[data-filter="not_in_s1"] .nav-dot,
[data-filter="s1_not_in_kandji"] .nav-dot,
[data-filter="s1_not_in_jc"] .nav-dot { background: #a78bfa; }

[data-filter="snipe_not_in_gw"] .nav-dot,
[data-filter="mdm_not_in_gw"] .nav-dot,
[data-filter="not_in_gw"] .nav-dot { background: #34d399; }

.nav-text {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: var(--mono-font-weight);
    color: var(--text-2);
    flex: 1;
    letter-spacing: 0.02em;
}

.nav-item.active .nav-text { color: var(--text); }

.nav-count {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
}

.nav-item.active .nav-count { color: var(--text-2); }

/* Utility: initially hidden elements shown by JS */
.js-hidden { display: none; }

/* Filter description bar */
#filterDescription {
    padding: 12px 16px;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 8px;
}

/* Login overlay */
#loginOverlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: var(--login-overlay-bg);
    align-items: center; justify-content: center;
}
#loginOverlay.visible { display: flex; }
#loginBox {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px 40px;
    display: flex; flex-direction: column; gap: 16px;
    min-width: 320px;
}
#loginBox h2 { font-size: 15px; font-weight: 600; color: var(--text); }
#loginBox p  { font-size: 12px; color: var(--text-3); }
#loginSecretInput {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 8px 10px;
    width: 100%;
}
#loginSecretInput:focus { outline: 1px solid var(--accent); }
#loginError { font-size: 12px; color: var(--error); display: none; }
#loginSubmitBtn {
    background: var(--accent);
    color: var(--btn-accent-text);
    border: none; border-radius: 4px;
    font-weight: 600; font-size: 13px;
    padding: 8px 16px;
    cursor: pointer;
    align-self: flex-end;
}
#loginSubmitBtn:hover { opacity: 0.88; }

/* ── THEME PICKER ─────────────────────────────────────── */
.btn-theme {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.btn-theme:hover { border-color: var(--accent); color: var(--accent); }
.btn-theme.open  { border-color: var(--accent); color: var(--accent); }

.theme-menu {
    display: none;
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    min-width: 100%;
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden;
}

.theme-menu.open { display: block; }

.theme-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    padding: 9px 14px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-2);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-sub);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.theme-opt:last-child { border-bottom: none; }
.theme-opt:hover { background: var(--surface-2); color: var(--text); }
.theme-opt.active { color: var(--accent); }

.theme-opt .theme-check {
    opacity: 0;
    font-size: 10px;
}
.theme-opt.active .theme-check { opacity: 1; }

.theme-swatch {
    display: inline-flex;
    gap: 3px;
    margin-right: 8px;
}
.theme-swatch span {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,0.35);
    flex-shrink: 0;
}

/* ── PERSONAL THEME CONTROLS ─────────────────────────── */
.theme-divider {
    height: 1px;
    background: var(--border-sub);
    margin: 4px 0;
}

.theme-personal {
    padding: 10px 12px;
    border-bottom: none;
}

.theme-personal-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 8px;
    display: block;
}

.theme-personal-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.theme-mode-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-2);
    user-select: none;
}

.theme-mode-radio input[type="radio"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
    accent-color: var(--accent);
}

.theme-personal-accent {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.theme-personal-accent label {
    font-size: 10px;
    color: var(--text-2);
    letter-spacing: 0.06em;
    font-family: var(--mono);
    flex-shrink: 0;
}

#personalAccentInput {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

#personalApplyBtn {
    width: 100%;
    padding: 6px 10px;
    background: var(--accent);
    color: var(--btn-accent-text);
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.1s;
}

#personalApplyBtn:hover {
    opacity: 0.9;
}

/* Swatch colors — defined here (nonce-covered) instead of inline styles (CSP-blocked) */
.sw-night-owl-bg          { background: #08090d; }
.sw-night-owl-ac          { background: #00d4b8; }
.sw-polar-mist-bg         { background: #f0f6fb; }
.sw-polar-mist-ac         { background: #197fc2; }

/* ── SIDEBAR MINIMIZE ──────────────────────────────────── */
.sidebar { position: relative; transition: width 0.2s ease; overflow: hidden; }
.sidebar.minimized { width: 32px; min-width: 32px; }
.sidebar.minimized .nav-section { display: none; }

.sidebar-min-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 7px 10px;
    background: transparent;
    border: none; border-bottom: 1px solid var(--border);
    cursor: pointer; color: var(--text-3);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.1s, color 0.1s;
}
.sidebar-min-btn:hover { background: var(--surface-2); color: var(--text-2); }
.sidebar-min-btn .min-icon { transition: transform 0.2s; display: inline-block; }
.sidebar.minimized .sidebar-min-btn { justify-content: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sidebar.minimized .sidebar-min-btn .min-label { display: none; }
.sidebar.minimized .sidebar-min-btn .min-icon { transform: rotate(180deg); }

/* ── NAV SECTION COLLAPSIBLE ──────────────────────────────── */
.nav-section-header {
    display: flex; align-items: center;
    padding: 16px 16px 8px;
    cursor: pointer; user-select: none;
}
.nav-section-header .nav-section-label { flex: 1; padding: 0; }
.nav-section-header:hover .nav-section-label { color: var(--text-2); }
.nav-chevron {
    font-size: 9px; color: var(--text-3);
    transition: transform 0.18s; line-height: 1; margin-left: 4px;
}
.nav-section.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-section.collapsed .nav-items { display: none; }

/* ── SOURCES COLLAPSE ──────────────────────────────────────── */
.sources-section { position: relative; }
.sources-collapse-btn {
    display: flex; align-items: center; gap: 5px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 6px 6px 0 0; border-bottom: none;
    color: var(--text-3); font-family: var(--mono); font-size: 11px;
    padding: 5px 12px; cursor: pointer; letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s, background 0.12s;
    margin-bottom: -1px; position: relative; z-index: 1;
}
.sources-collapse-btn:hover { color: var(--accent); background: var(--surface-2); }
.sources-collapse-btn .src-chevron { font-size: 9px; transition: transform 0.18s; }
.sources-section.collapsed .src-chevron { transform: rotate(-90deg); }
.sources-section.collapsed .sources-row { display: none; }
.sources-section.collapsed .sources-collapse-btn { border-radius: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }

/* ── COLUMN RESIZER ──────────────────────────────────────── */
th { position: relative; }
.col-resizer {
    position: absolute; right: 0; top: 0; bottom: 0; width: 5px;
    cursor: col-resize; background: transparent; z-index: 2;
    transition: background 0.1s;
}
.col-resizer:hover { background: var(--accent-border); }
.col-resizing .col-resizer { background: var(--accent); opacity: 0.5; }

/* ── TOP TABS + PANELS ───────────────────────────────────── */
.tabs-shell {
    padding: 12px 24px 32px;
}

/* Tabs live inside the sticky <header>, no separate strip */
header .top-tabs {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    align-items: center;
}

header .tab-btn {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
}

header .tab-name { font-size: 11px; letter-spacing: 0.06em; }
header .tab-sub { font-size: 9px; }

.tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.tab-btn:hover { background: var(--surface-2); color: var(--text); }
.tab-btn.active {
    background: var(--surface-2);
    border-color: var(--accent-border);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--accent-dim);
}

.tab-name {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tab-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--warn);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tab-btn.wip {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--border);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── MODE SUB-TABS (Insights / Operations) ──────────── */
.mode-subtabs {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-sub);
    margin-bottom: 16px;
}

.mode-subtab {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.mode-subtab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.mode-subtab.active {
    background: var(--surface-2);
    border-color: var(--accent-border);
    color: var(--text);
}

.mode-subpanel { display: none; }
.mode-subpanel.active { display: block; }

.specific-layout {
    display: flex;
    min-height: calc(100vh - 72px);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.specific-layout .sidebar {
    position: sticky;
    top: 52px;
    height: calc(100vh - 72px);
    border-right: 1px solid var(--border);
    overflow-y: auto;
}

.specific-main {
    flex: 1;
    min-width: 0;
    padding: 16px;
    overflow: hidden;
}

/* ── HOME TAB ─────────────────────────────────────────────── */

/* Briefing bar */
.home-briefing {
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    background: var(--surface);
}

.briefing-sentence {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.5;
}

.briefing-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
}

.briefing-meta:empty { display: none; }

.needs-attention {
    margin-bottom: 12px;
}

.needs-attention-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.needs-attention-card {
    position: relative;
    min-width: 190px;
    flex: 1 1 210px;
    border: 1px solid var(--border-sub);
    background: var(--surface-2);
    border-radius: 10px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.needs-attention-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: var(--accent);
}

.needs-attention-card.sev-error::before { background: var(--error); }
.needs-attention-card.sev-warn::before { background: var(--warn); }
.needs-attention-card.sev-info::before { background: var(--accent); }

.needs-attention-card:hover {
    border-color: var(--accent-border);
    background: var(--surface-3);
}

.needs-attention-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.needs-attention-count {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

.needs-attention-clear {
    font-size: 12px;
    color: var(--success);
    font-family: var(--mono);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 12px;
}

.home-grid-glance { margin-bottom: 16px; }

.home-details-section {
    margin-bottom: 12px;
}

.home-details-toggle {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 8px;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.home-details-toggle::-webkit-details-marker { display: none; }

.home-details-toggle::before {
    content: '▸';
    transition: transform 0.15s;
    display: inline-block;
}

.home-details-section[open] > .home-details-toggle::before {
    transform: rotate(90deg);
}

.panel-card {
    border: 1px solid var(--border-sub);
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    border-radius: 12px;
    padding: 14px;
    transition: border-color 0.15s ease;
}
.panel-card:hover { border-color: var(--border); }

.home-kpi {
    grid-column: span 3;
    min-height: 96px;
    display: flex;
    flex-direction: column;
}

.kpi-spark-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}

.kpi-sparkline {
    flex: 1;
    height: 30px;
    display: block;
}

.kpi-trend {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--error); }
.kpi-trend.flat { color: var(--text-3); }

.donut-tab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.donut-tab-btn {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border: 1px solid var(--border-sub);
    border-radius: 20px;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.donut-tab-btn.active {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.issues-card {
    grid-column: span 4;
}

.issues-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 4px;
}

.issue-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
}

.issue-row-btn {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.issue-row-btn:hover .issue-label {
    color: var(--accent);
}

.issue-rank {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    text-align: right;
}

.issue-body {
    min-width: 0;
}

.issue-label {
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-bar {
    height: 3px;
    background: var(--border-sub);
    border-radius: 2px;
    margin-top: 3px;
}

.issue-bar-fill {
    height: 100%;
    background: var(--warn);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.issue-count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
}

.issue-empty {
    font-size: 12px;
    color: var(--text-3);
    padding: 8px 0;
}

.kpi-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kpi-val {
    font-family: var(--mono);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 6px;
    color: var(--text);
}

.kpi-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}

.home-sources {
    grid-column: span 7;
}

.home-sync {
    grid-column: span 5;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 220px;
}

.sync-ring {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: conic-gradient(var(--success) 0deg, var(--surface-3) 0deg);
}

.sync-ring::after {
    content: '';
    position: absolute;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
}

.sync-ring-label {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 25px;
    font-weight: 700;
    color: var(--success);
}

.sync-meta {
    display: grid;
    gap: 7px;
    min-width: 220px;
}

.sync-meta-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
}

.chart-card {
    grid-column: span 4;
    min-height: 248px;
}

.card-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.chart-canvas {
    width: 100%;
    height: 190px;
    border: 1px solid var(--border-sub);
    background: rgba(255, 255, 255, 0.01);
    border-radius: 8px;
}

.chart-canvas.is-clickable {
    cursor: pointer;
}

.home-clickable-card {
    cursor: pointer;
}

.home-clickable-card:hover,
.home-clickable-card:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.home-list-card {
    display: flex;
    flex-direction: column;
}

.home-action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.home-action-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-2);
    text-align: left;
    cursor: pointer;
}

.home-action-row:hover {
    border-color: var(--accent);
}

.home-action-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.home-action-label {
    font-size: 12px;
    color: var(--text-2);
}

.home-action-meta {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
}

.home-action-count {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
}
}

.source-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.source-mini {
    border: 1px solid var(--border-sub);
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.01);
}

.source-mini .name {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.source-mini .count {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 22px;
    color: var(--text);
    line-height: 1;
}

/* ── CUSTOM FILTERS TAB ──────────────────────────────────── */
.custom-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    gap: 10px;
}

.custom-filters-area {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 14px;
    flex-shrink: 0;
}

.custom-results-panel {
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    overflow: hidden;
}

.custom-results-panel .tbl-wrap {
    height: 100%;
    border: none;
    border-radius: 0;
}

.custom-controls {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.custom-input,
.custom-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
}

.custom-input:focus,
.custom-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.advanced-wrap {
    border: 1px solid var(--border-sub);
    border-radius: 8px;
    margin-bottom: 10px;
}

.advanced-toggle {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 10px 12px;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.advanced-panel {
    display: none;
    padding: 0 12px 12px;
}

.advanced-wrap.open .advanced-panel { display: block; }

.advanced-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 8px;
}

.custom-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.custom-count {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
}

.btn-muted {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
}

.btn-muted:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── OS Versions tab ───────────────────────────────────────────── */
.osv-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    height: 100%;
    overflow-y: auto;
}

.osv-subtabs {
    display: flex;
    gap: 6px;
}

.osv-tab {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.osv-tab:hover { background: var(--surface-2); color: var(--text); }
.osv-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.osv-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.osv-kpi { min-height: 88px; }

.osv-chart-card { padding: 14px; }

.osv-chart-scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

#osvChart {
    display: block;
    width: 100%;
    height: 260px;
}

.osv-heatmap-card { padding: 14px; }
.osv-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}
.osv-heat-cell {
    position: relative;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 56px;
    overflow: hidden;
}
.osv-heat-cell .v { font-weight: 600; white-space: normal; word-break: break-word; }
.osv-heat-cell .c { font-size: 12.5px; opacity: 0.9; }
.osv-heat-cell .rank {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.05em;
}
.osv-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--mono);
}
.osv-heatmap-legend .ramp {
    flex: 0 0 140px;
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(0,212,184,0.08), rgba(0,212,184,0.95));
    border: 1px solid var(--border);
}

.osv-table-card { padding: 14px; }

.osv-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.osv-search {
    flex: 1;
    min-width: 180px;
    max-width: 340px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    outline: none;
}
.osv-search:focus { border-color: var(--accent); }

.osv-table-wrap {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

#osvTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

#osvTable thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

#osvTable tbody tr { cursor: pointer; transition: background 0.1s; }
#osvTable tbody tr:hover { background: var(--surface-2); }
#osvTable tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-sub);
    color: var(--text-2);
    white-space: nowrap;
}


@media (max-width: 1200px) {
    .osv-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── End OS Versions ──────────────────────────────────────────── */

/* ── Stock tab ────────────────────────────────────────────────── */
.stock-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    height: 100%;
    overflow-y: auto;
}

.stock-subtabs {
    display: flex;
    gap: 6px;
}

.stock-view-tabs {
    display: flex;
    gap: 6px;
    margin-top: -4px;
}

.stock-tab {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.stock-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.stock-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.stock-view-tab {
    padding: 6px 14px;
    border-radius: 18px;
    border: 1px solid var(--border-sub);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.stock-view-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.stock-view-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.stock-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.stock-kpi {
    min-height: 88px;
}

.stock-status-card,
.stock-table-card {
    padding: 14px;
}

.stock-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.stock-status-item {
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
}

button.stock-status-item {
    width: 100%;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

button.stock-status-item:hover,
button.stock-status-item:focus-visible {
    border-color: var(--accent);
    outline: none;
}

.stock-status-name {
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-status-count {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 24px;
    color: var(--text);
}

.stock-model-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stock-model-breakdown {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stock-model-pill {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-sub);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-2);
}

.stock-model-pill b {
    color: var(--text);
}

.stock-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.stock-search {
    flex: 1;
    min-width: 180px;
    max-width: 340px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    outline: none;
}

.stock-search:focus {
    border-color: var(--accent);
}

.stock-table-wrap {
    overflow-x: auto;
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

#stockTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12.5px;
}

#stockTable thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

#stockTable tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

#stockTable tbody tr:hover {
    background: var(--surface-2);
}

#offboardingTable tbody tr[data-serial] {
    cursor: pointer;
    transition: background 0.1s;
}

#offboardingTable tbody tr[data-serial]:hover {
    background: var(--surface-2);
}

.okta-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--accent-border);
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    opacity: 1;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.okta-link-icon:hover,
.okta-link-icon:focus-visible {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.okta-link-icon:focus-visible {
    outline: 2px solid var(--accent-border);
    outline-offset: 2px;
}

#stockTable tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-sub);
    color: var(--text-2);
    vertical-align: middle;
}

.stock-col-asset-tag {
    width: 13ch;
}

.stock-col-serial {
    width: 18ch;
}

.stock-col-model {
    width: 24ch;
}

.stock-col-category {
    width: 14ch;
}

.stock-col-status {
    width: 28ch;
}

.stock-col-user {
    width: 20ch;
}

.stock-col-location {
    width: 18ch;
}

.stock-col-updated {
    width: 18ch;
}

.stock-cell {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-cell.mono {
    font-family: var(--mono);
    font-size: 11.5px;
}

@media (max-width: 1200px) {
    .stock-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── End Stock tab ───────────────────────────────────── */

/* ── Offboarding Tracker tab ─────────────────────────────────── */
.offboarding-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    height: 100%;
    overflow-y: auto;
}

.offboarding-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.offboarding-table-card {
    padding: 14px;
}

/* ── Security tab ─────────────────────────────────────────────── */
.sec-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    height: 100%;
    overflow-y: auto;
}

.sec-subtabs {
    display: flex;
    gap: 6px;
}

.sec-tab {
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sec-tab:hover { background: var(--surface-2); color: var(--text); }
.sec-tab.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.sec-panel { display: none; flex-direction: column; gap: 14px; }
.sec-panel.active { display: flex; }

.sec-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.sec-kpi { min-height: 88px; }

.sec-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.sec-chart-card { min-height: 230px; }
.sec-chart-full { grid-column: span 1; }

.sec-xref-card { padding: 14px; }
.sec-xref-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sec-xref-card-header .card-title { margin-bottom: 0; }

.sec-xref-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.sec-xref-btn {
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sec-xref-btn:hover { background: var(--surface-2); color: var(--text); }
.sec-xref-btn.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

.sec-xref-desc {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 8px;
    min-height: 16px;
}

.sec-table-wrap {
    overflow-x: auto;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.sec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.sec-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
    text-align: left;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

.sec-table tbody tr { cursor: pointer; transition: background 0.1s; }
.sec-table tbody tr:hover { background: var(--surface-2); }
.sec-table tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-sub);
    color: var(--text-2);
    white-space: nowrap;
}

/* Sortable table header styling */
.sortable-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.sortable-table thead th.sortable:hover {
    background: var(--surface-2);
}
.sortable-table thead th.sortable:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}
.sortable-table thead th.sortable .sort-arrow {
    display: inline-block;
    margin-left: 4px;
    color: var(--text-2);
    font-size: 11px;
}
.sortable-table thead th.sortable.asc .sort-arrow::after {
    content: ' ▲';
}
.sortable-table thead th.sortable.desc .sort-arrow::after {
    content: ' ▼';
}

@media (max-width: 1200px) {
    .sec-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .sec-charts-row { grid-template-columns: 1fr; }
}
/* ── End Security ─────────────────────────────────────────────── */

@media (max-width: 1200px) {
    .home-kpi { grid-column: span 6; }
    .home-sources, .home-sync { grid-column: span 12; }
    .chart-card { grid-column: span 12; }
    .issues-card { grid-column: span 12; }
    .custom-controls { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .advanced-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    .specific-layout { min-height: auto; }
    .specific-layout .sidebar {
        position: static;
        height: 420px;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .specific-layout { flex-direction: column; }
}

@media (max-width: 760px) {
    .tabs-shell { padding: 10px 10px 24px; }
    header .top-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    header .tab-btn {
        flex-shrink: 0;
        padding: 5px 8px;
    }
    header .tab-name { font-size: 10px; }
    .custom-controls,
    .advanced-grid {
        grid-template-columns: 1fr;
    }
    .source-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* Tablet (≤900px): the 1200px rule stacks sidebar at 420px — too tall.
   Shrink it to natural content height and let it collapse gracefully. */
@media (max-width: 900px) {
    .specific-layout .sidebar {
        height: auto !important;
        min-height: unset !important;
        max-height: 50vh;
        overflow-y: auto;
    }
    .osv-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .sec-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .home-kpi   { grid-column: span 6; }
}

/* Small tablet / large phone (≤768px): compact header, scrollable table. */
@media (max-width: 768px) {
    header { padding: 0 10px; gap: 6px; }
    .settings-menu { width: min(360px, calc(100vw - 20px)); }
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 560px; }
    .home-kpi { grid-column: span 12; }
    .home-sources, .home-sync { grid-column: span 12; }
    .chart-card  { grid-column: span 12; }
}

/* Phone (≤480px): hide non-essential header elements, single-column everything. */
@media (max-width: 480px) {
    header { gap: 4px; padding: 0 8px; }
    .specific-layout .sidebar { max-height: 30vh; }
    .osv-kpi-row { grid-template-columns: 1fr; }
    .sec-kpi-row { grid-template-columns: 1fr; }
    .source-mini-grid { grid-template-columns: 1fr; }
    .tabs-shell { padding: 6px 6px 16px; }
}

/* ── DENSITY TOGGLE ──────────────────────────────────────── */
.btn-density {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-density:hover { border-color: var(--accent); color: var(--accent); }

.btn-report {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.btn-report:hover { border-color: var(--accent); color: var(--accent); }

.btn-api-docs {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border);
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.btn-api-docs:hover { border-color: var(--accent); color: var(--accent); }

.home-report-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 16px 24px 20px;
}
.btn-generate-report {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-generate-report:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-3); }
.btn-md-report { margin-left: 0; }

/* ── COMPACT DENSITY MODE ────────────────────────────────────
   Dramatically shrinks the whole UI for data-heavy views:
   smaller fonts, tighter padding, compact controls, KPIs.
   ───────────────────────────────────────────────────────── */
html[data-density="compact"] body { font-size: 12px; }

/* Header — shorter bar, smaller controls */
html[data-density="compact"] header { height: 40px; padding: 0 14px; gap: 10px; }
html[data-density="compact"] .brand { font-size: 11px; letter-spacing: 0.14em; }
html[data-density="compact"] .brand svg { width: 11px; height: 11px; }
html[data-density="compact"] .subtitle { font-size: 10px; }
html[data-density="compact"] .h-sep { height: 14px; }
html[data-density="compact"] .btn-sync { font-size: 10px; padding: 5px 12px; }
html[data-density="compact"] .sync-progress-pill { font-size: 10px; padding: 4px 8px; }
html[data-density="compact"] .btn-settings { width: 30px; height: 30px; font-size: 12px; }
html[data-density="compact"] .btn-pulse { font-size: 9px; padding: 4px 8px; }
html[data-density="compact"] .btn-pulse .pulse-dot { width: 6px; height: 6px; }
html[data-density="compact"] .btn-density,
html[data-density="compact"] .btn-report,
html[data-density="compact"] .btn-theme,
html[data-density="compact"] .btn-api-docs { font-size: 9px; padding: 4px 8px; }

/* Header tabs inside compact mode */
html[data-density="compact"] header .tab-btn { padding: 4px 8px; }
html[data-density="compact"] header .tab-name { font-size: 10px; letter-spacing: 0.04em; }
html[data-density="compact"] header .tab-sub { font-size: 8px; }

/* Main padding */
html[data-density="compact"] main { padding: 10px 14px 20px; }
html[data-density="compact"] .tabs-shell { padding: 8px 14px 18px; }

/* Table — the star of compact mode */
html[data-density="compact"] table { font-size: 11px; }
html[data-density="compact"] td { padding: 3px 8px !important; line-height: 1.25 !important; }
html[data-density="compact"] th { padding: 4px 8px !important; font-size: 10px !important; letter-spacing: 0.03em !important; }
html[data-density="compact"] tr { height: auto; }
html[data-density="compact"] .badge,
html[data-density="compact"] .status-pill { font-size: 9px; padding: 1px 5px; letter-spacing: 0.02em; }
html[data-density="compact"] .issue-pill { font-size: 9px; padding: 1px 4px; }

/* Hide non-essential row icons and decorations in compact */
html[data-density="compact"] td .row-icon,
html[data-density="compact"] td .source-mini-icons,
html[data-density="compact"] th .col-hint,
html[data-density="compact"] .issue-count-bubble,
html[data-density="compact"] .kpi-note,
html[data-density="compact"] .stat-sub { display: none !important; }

/* KPI / stat cards — shrink significantly */
html[data-density="compact"] .stat { padding: 8px 10px 6px; }
html[data-density="compact"] .stat-label { font-size: 9px; }
html[data-density="compact"] .stat-val { font-size: 20px; line-height: 1.05; }
html[data-density="compact"] .panel-card { padding: 8px; border-radius: 8px; }
html[data-density="compact"] .home-kpi { min-height: 60px; }
html[data-density="compact"] .home-briefing { padding: 8px 12px; margin-bottom: 8px; }
html[data-density="compact"] .briefing-sentence { font-size: 12px; }
html[data-density="compact"] .briefing-meta { font-size: 10px; }
html[data-density="compact"] .kpi-label { font-size: 9px; }
html[data-density="compact"] .kpi-val { font-size: 22px; line-height: 1.05; }
html[data-density="compact"] .kpi-spark-row { padding-top: 4px; }
html[data-density="compact"] .kpi-sparkline { height: 20px; }
html[data-density="compact"] .issues-card { display: none; }
html[data-density="compact"] .donut-tab-bar { margin-bottom: 4px; }
html[data-density="compact"] .home-grid { gap: 8px; }

/* Toolbar / filter controls */
html[data-density="compact"] .toolbar { padding: 6px 10px; gap: 6px; }
html[data-density="compact"] .toolbar input,
html[data-density="compact"] .toolbar select,
html[data-density="compact"] .toolbar button { font-size: 11px; padding: 4px 8px; }
html[data-density="compact"] .sidebar { font-size: 11px; }
html[data-density="compact"] .nav-item { padding: 4px 8px; font-size: 11px; }
html[data-density="compact"] .nav-section-title { font-size: 9px; padding: 6px 8px 3px; }

/* Charts — shrink card padding */
html[data-density="compact"] .chart-card { padding: 8px; }
html[data-density="compact"] .chart-title { font-size: 10px; }

/* ── COLUMN PICKER ───────────────────────────────────────── */
.col-picker-wrap { position: relative; flex-shrink: 0; }
#colPickerBtn {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    padding: 7px 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
#colPickerBtn:hover,
#colPickerBtn.open { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.col-picker-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    min-width: 160px;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.col-picker-menu.open { display: block; }

.col-pick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    transition: background 0.1s;
}
.col-pick-item:hover { background: var(--surface-2); color: var(--text); }
.col-pick-item input[type=checkbox] { cursor: pointer; }

/* ── INLINE DIFF ─────────────────────────────────────────── */
.diff-snipe {
    color: var(--text-3);
    text-decoration: line-through;
    font-size: 11px;
    font-family: var(--mono);
}
.diff-arrow { color: var(--text-3); font-size: 11px; }
.diff-source { color: var(--warn); font-weight: 600; }

/* ── DEVICE DRAWER ───────────────────────────────────────── */
#deviceDrawer {
    position: fixed; inset: 0; z-index: 500;
    pointer-events: none;
}
#deviceDrawer.open { pointer-events: all; }

#drawerBackdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.25s;
}
#deviceDrawer.open #drawerBackdrop { opacity: 1; }

#drawerPanel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 480px; max-width: 92vw;
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex; flex-direction: column;
    overflow: hidden;
}
#deviceDrawer.open #drawerPanel { transform: translateX(0); }

#drawerHeader {
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
#drawerTitle {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
#drawerClose {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    transition: color 0.1s;
}
#drawerClose:hover { color: var(--text); }

#drawerBody {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.drawer-device-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--border-sub);
}

.drawer-sticky-identity {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
    border-bottom: 1px solid var(--border);
}
.drawer-serial {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.05em;
}
.drawer-hostname {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}
.drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 2px; }

.drawer-section-title {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 14px 20px 6px;
    border-top: 1px solid var(--border-sub);
}
.drawer-section-title:first-of-type { border-top: none; }

.drawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-sub);
    margin: 0 0 0 0;
}
.drawer-field {
    background: var(--surface);
    padding: 10px 20px;
}
.drawer-field-label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.drawer-field-value {
    font-size: 13px;
    color: var(--text-2);
    word-break: break-all;
}

.drawer-issues { padding: 8px 20px 20px; }
.drawer-issue {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--warn);
    border-bottom: 1px solid var(--border-sub);
}
.drawer-issue:last-child { border-bottom: none; }
.drawer-issue-icon { flex-shrink: 0; font-size: 12px; }

/* ── Drawer: header actions (Copy button) ─────────────────────── */
.drawer-actions { display: flex; gap: 6px; align-items: center; }
.drawer-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-2);
    background: var(--surface-2, var(--surface));
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.drawer-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.drawer-copy-btn.flash { color: var(--success); border-color: var(--success); }
.drawer-copy-icon { font-size: 13px; line-height: 1; }

/* ── Drawer: tabs ─────────────────────────────────────────────── */
.drawer-tabs {
    display: flex;
    gap: 2px;
    padding: 0 14px;
    background: var(--surface);
    overflow-x: auto;
    scrollbar-width: thin;
}
.drawer-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
}
.drawer-tab:hover { color: var(--text-2); }
.drawer-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.drawer-tab-panels { padding-bottom: 16px; }
.drawer-tab-panel { display: block; }
.drawer-tab-panel[hidden] { display: none; }

/* ── Drawer: per-panel "Open in [tool]" deep-link ────────────── */
.drawer-panel-header {
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-sub);
    background: var(--surface);
}
.drawer-open-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    transition: background 0.1s, color 0.1s;
}
.drawer-open-link:hover { background: var(--accent); color: var(--bg); }

/* ── Drawer: Snipe-IT notes block ─────────────────────────────── */
.drawer-snipe-notes {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-sub);
    background: var(--surface);
}
.drawer-snipe-notes-body {
    font-size: 13px;
    color: var(--text-2);
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 4px;
}

/* ── Drawer: issue drill-down with severity colors ────────────── */
.drawer-issue {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    color: var(--text-2);
}
.drawer-issue[data-issue-toggle] { cursor: pointer; }
.drawer-issue-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
}
.drawer-issue-text { flex: 1; font-size: 13px; }
.drawer-issue-chev {
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--mono);
}
.drawer-issue-detail {
    padding: 4px 0 12px 56px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}
.drawer-sev-pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 3px;
    min-width: 40px;
    text-align: center;
}
.drawer-sev-pill.sev-critical { background: rgba(220, 53, 69, 0.18); color: var(--error, #dc3545); }
.drawer-sev-pill.sev-high     { background: rgba(255, 140, 50, 0.18); color: var(--orange, #ff8c32); }
.drawer-sev-pill.sev-medium   { background: rgba(255, 193, 7, 0.18);  color: var(--warn, #ffc107); }
.drawer-sev-pill.sev-info     { background: rgba(120, 130, 145, 0.18); color: var(--text-3); }
.drawer-issue.sev-critical .drawer-issue-text { color: var(--error, #dc3545); }
.drawer-issue.sev-high     .drawer-issue-text { color: var(--orange, #ff8c32); }

/* ── HEATMAP CARD ────────────────────────────────────────── */
.heatmap-card {
    grid-column: span 12;
}

.home-insight-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 90;
    padding: 68px 16px 16px;
    box-sizing: border-box;
}

.home-insight-modal.visible {
    display: flex;
}

.home-insight-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 14, 0.7);
    backdrop-filter: blur(8px);
}

.home-insight-panel {
    position: relative;
    width: min(980px, 100%);
    max-height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.home-insight-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.home-insight-title {
    margin: 0;
    font-size: 18px;
    color: var(--text);
}

.home-insight-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-3);
}

.home-insight-actions {
    display: flex;
    gap: 6px;
}

.home-insight-body {
    min-height: 0;
    overflow: auto;
}

.home-insight-table-wrap {
    overflow: auto;
    border: 1px solid var(--border-sub);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.home-insight-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    color: var(--text-2);
}

.home-insight-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
}

.home-insight-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-sub);
    vertical-align: middle;
}

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

.home-insight-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.home-insight-col-serial {
    width: 18ch;
}

.home-insight-col-hostname {
    width: 28ch;
}

.home-insight-col-user {
    width: 22ch;
}

.home-insight-col-status {
    width: 14ch;
}

.home-insight-col-source {
    width: 20ch;
}

.home-insight-cell {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-insight-cell.is-mono {
    font-family: var(--mono);
}

.home-insight-serial-link {
    display: block;
    width: 100%;
    text-align: left;
}

.home-insight-truncated {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-3);
}

@media (max-width: 720px) {
    .home-insight-modal {
        padding: 60px 10px 10px;
    }

    .home-insight-panel {
        max-height: calc(100vh - 70px);
        padding: 12px;
    }
}
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.heatmap-scroll { overflow-x: auto; }

/* ── SOURCE LAST-FETCH TIME ──────────────────────────────── */
.src-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    margin-top: 1px;
    min-height: 13px;
}

/* ── ISSUES ONLY BUTTON ACTIVE STATE ─────────────────────── */
.btn-muted.active {
    border-color: var(--warn);
    color: var(--warn);
    background: var(--warn-dim);
}

/* ── FILTERS TAB: LAYOUT ──────────────────────────────────── */
.filters-layout {
    display: flex;
    height: calc(100vh - 150px);
    overflow: hidden;
}

/* Icon Rail */
.icon-rail {
    width: 52px;
    min-width: 52px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    gap: 2px;
    overflow: hidden;
}
.rail-top { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rail-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: auto;
    padding-bottom: 4px;
}
.rail-sep {
    width: 28px;
    height: 1px;
    background: var(--border);
    margin: 6px 0;
    flex-shrink: 0;
}
.rail-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.rail-btn:hover { background: var(--surface-2); color: var(--text-2); }
.rail-btn.active { background: var(--accent-dim); color: var(--accent); }
.rail-btn[title] { /* tooltip via CSS */ }
.rail-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--error);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--mono);
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.rail-badge.hidden { display: none; }

/* Detail Panel */
.detail-panel {
    width: 220px;
    min-width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail-panel-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
    padding: 14px 14px 8px;
    flex-shrink: 0;
}

/* Preset mode */
.detail-preset { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.detail-items { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.detail-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s;
    min-height: 34px;
}
.detail-filter-item:hover { background: var(--surface-2); }
.detail-filter-item.active { background: var(--surface-3); }
.detail-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.detail-item-label {
    flex: 1;
    font-size: 13px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.detail-filter-item.active .detail-item-label { color: var(--text); }
.detail-item-count {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-3);
    background: var(--surface-2);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
}
.detail-filter-item.active .detail-item-count { background: var(--surface-3); }

.detail-pin-btn {
    opacity: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10px;
    padding: 2px;
    transition: opacity 0.12s;
    flex-shrink: 0;
    line-height: 1;
}

.detail-filter-item:hover .detail-pin-btn { opacity: 0.4; }
.detail-pin-btn:hover { opacity: 1 !important; }
.detail-pin-btn.pinned { opacity: 0.7; }

/* Custom mode */
.detail-custom { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.detail-custom.visible { display: flex; }
.detail-preset.hidden { display: none; }
.detail-custom-scroll { flex: 1; overflow-y: auto; padding: 0 10px 12px; }
.detail-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
    margin: 10px 0 4px;
}
.no-presets-msg {
    font-size: 12px;
    color: var(--text-3);
    padding: 8px 0;
    font-style: italic;
}
.preset-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin-bottom: 4px;
    transition: border-color 0.12s;
}
.preset-item:hover { border-color: var(--accent-border); }
.preset-item.active { border-color: var(--accent); background: var(--accent-dim); }
.preset-item-name {
    flex: 1;
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preset-item.active .preset-item-name { color: var(--text); }
.preset-item-del {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.preset-item-del:hover { background: var(--error-dim); color: var(--error); }
.cf-control {
    display: block;
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: var(--sans);
    box-sizing: border-box;
    margin-bottom: 6px;
}
.cf-control:focus { outline: none; border-color: var(--accent); }
.builder-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}
.builder-btn {
    width: 100%;
    padding: 7px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    margin-top: 6px;
    transition: border-color 0.12s, color 0.12s;
}
.builder-btn:hover { border-color: var(--accent); color: var(--accent); }
.builder-btn.primary {
    background: var(--accent);
    color: var(--btn-accent-text);
    border-color: var(--accent);
}
.builder-btn.primary:hover { opacity: 0.88; }

/* Main Area */
.filters-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
/* Pinned filters quick-access bar */
.pinned-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-sub);
    min-height: 0;
}

.pinned-filters-bar:empty {
    display: none;
}

.pinned-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

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

.pinned-filter-chip.active {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.pinned-filter-chip .pin-count {
    font-weight: 600;
    opacity: 0.7;
}

.pinned-filter-chip .pin-remove {
    margin-left: 2px;
    opacity: 0.4;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.pinned-filter-chip .pin-remove:hover {
    opacity: 1;
    color: var(--error);
}

.filters-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: nowrap;
}
.toolbar-search-wrap {
    position: relative;
    flex: 1;
    min-width: 140px;
    max-width: 300px;
}
.toolbar-search-wrap svg {
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.toolbar-search-wrap input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 6px 10px 6px 30px;
    font-size: 13px;
    font-family: var(--sans);
    box-sizing: border-box;
}
.toolbar-search-wrap input:focus { outline: none; border-color: var(--accent); }
.cmdk-hint {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: default;
}

.cmdk-hint kbd {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    border: 1px solid var(--border-sub);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 4px 7px;
    letter-spacing: 0.04em;
    box-shadow: inset 0 -1px 0 var(--border);
    user-select: none;
}

.filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.filter-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--accent-dim);
    border: 1px solid var(--accent-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--accent);
    white-space: nowrap;
}
.pill-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--accent);
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    opacity: 0.7;
}
.pill-remove:hover { opacity: 1; }
.btn-toolbar {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: border-color 0.12s, color 0.12s;
}
.btn-toolbar:hover { border-color: var(--accent); color: var(--accent); }
.filter-desc-bar {
    padding: 7px 16px;
    font-size: 12px;
    color: var(--text-2);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    display: none;
}
.filter-desc-bar.visible { display: block; }
/* override old rule that targets #filterDescription as block element */
#filterDescription {
    display: inline;
    background: none;
    padding: 0;
    border: none;
    font-size: inherit;
    color: inherit;
}
.result-count-bar {
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-sub);
}

.result-help {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.04em;
    opacity: 0.8;
    white-space: nowrap;
}

tbody tr.row-focused {
    box-shadow: inset 3px 0 0 var(--accent);
}
.filters-table-wrap {
    flex: 1;
    overflow: auto;
    position: relative;
}


/* ── Command Palette Modal ───────────────────────────────────────────────────── */

.command-palette-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
}

.command-palette-modal.visible {
    display: flex;
}

.palette-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 1999;
}

.palette-container {
    position: relative;
    width: 90%;
    max-width: 600px;
    background: var(--surface);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    z-index: 2001;
    overflow: hidden;
}

.palette-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.palette-icon {
    width: 18px;
    height: 18px;
    color: var(--text-3);
    flex-shrink: 0;
}

.palette-search {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 15px;
    outline: none;
    font-family: inherit;
    padding: 0;
}

.palette-search::placeholder {
    color: var(--text-3);
}

.palette-close {
    background: transparent;
    border: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 150ms ease;
    flex-shrink: 0;
}

.palette-close:hover {
    background: var(--surface-2);
    color: var(--text);
}

.palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.palette-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 100ms ease;
    border-left: 3px solid transparent;
}

.palette-result-item:hover {
    background: var(--surface-2);
}

.palette-result-item.selected {
    background: var(--surface-2);
    border-left-color: var(--accent);
}

.palette-result-icon {
    font-size: 14px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.palette-result-body {
    flex: 1;
    min-width: 0;
}

.palette-result-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.palette-result-desc {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.palette-result-cat {
    font-size: 10px;
    color: var(--text-4);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.palette-section-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    padding: 10px 16px 4px;
}

.palette-section-label:first-child {
    padding-top: 4px;
}

.palette-empty {
    padding: 24px 16px;
    text-align: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
}

/* Scrollbar styling for palette results */
.palette-results::-webkit-scrollbar {
    width: 8px;
}

.palette-results::-webkit-scrollbar-track {
    background: transparent;
}

.palette-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.palette-results::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}