/* =============================================================================
   DASHBOARD HUB (dbx-*) — tabbed dashboard refactor.
   Every color/border/shadow comes from the --theme-* tokens in global-theme.css,
   so dark <-> light switching needs no per-component overrides.
   Layout targets desktop consoles: 1080p first, scales to 2560/3440.
   ============================================================================= */

.dbx-container {
    padding: 20px 28px 48px;
    color: var(--theme-text-primary);
}

/* ---------------------------------------------------------------- tab bar */
.dbx-tabbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 18px 0 22px;
    padding: 5px;
    border: 1px solid var(--theme-border-color);
    border-radius: 12px;
    background: var(--theme-bg-card);
    width: fit-content;
    box-shadow: var(--theme-shadow-sm);
}
.dbx-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.dbx-tab-btn:hover { background: var(--theme-bg-subtle-hover); color: var(--theme-text-primary); }
.dbx-tab-btn.active {
    background: var(--theme-accent-blue);
    color: #fff;
    box-shadow: 0 2px 8px var(--theme-accent-blue-glow);
}
.dbx-tab-btn.active:hover { background: var(--theme-accent-blue); color: #fff; }
.dbx-tab-btn i { font-size: 13px; }
.dbx-tab-btn--soon { cursor: default; opacity: .55; }
.dbx-tab-btn--soon:hover { background: transparent; color: var(--theme-text-secondary); }
.dbx-soon-chip {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--theme-accent-purple-bg);
    color: var(--theme-accent-purple);
}

/* ------------------------------------------------------------------ grids */
.dbx-grid { display: grid; gap: 18px; margin-bottom: 18px; }
.dbx-grid--attention { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); align-items: stretch; }
.dbx-grid--main { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); align-items: start; }
.dbx-grid--charts { grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr); }
.dbx-grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dbx-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dbx-grid--quarters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dbx-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1400px) {
    .dbx-grid--attention, .dbx-grid--main, .dbx-grid--charts { grid-template-columns: 1fr; }
}
@media (max-width: 1400px) {
    .dbx-grid--quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
    .dbx-grid--thirds { grid-template-columns: 1fr; }
    .dbx-grid--half { grid-template-columns: 1fr; }
    .dbx-grid--quarters { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------- panels */
.dbx-panel {
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 12px;
    box-shadow: var(--theme-shadow-sm);
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: border-color .15s ease;
}
.dbx-panel:hover { border-color: var(--theme-border-strong); }
.dbx-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--theme-border-subtle);
}
.dbx-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--theme-text-primary);
}
.dbx-panel-title i { color: var(--theme-accent-blue-light); font-size: 13px; }
.dbx-panel-badge { display: inline-flex; align-items: center; }
.dbx-panel-sub { font-size: 11.5px; font-weight: 500; color: var(--theme-text-muted); }
.dbx-panel-body { padding: 16px 18px; flex: 1; min-width: 0; }
.dbx-panel-body--flush { padding: 0; }
.dbx-panel-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--theme-border-color);
    border-radius: 8px;
    background: var(--theme-bg-subtle);
    color: var(--theme-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s ease;
}
.dbx-panel-action:hover {
    color: var(--theme-accent-blue-light);
    border-color: var(--theme-border-accent);
    background: var(--theme-accent-blue-bg-subtle);
    text-decoration: none;
}
.dbx-count-chip {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--theme-danger-bg);
    color: var(--theme-danger);
    font-size: 11.5px;
    font-weight: 700;
}

/* -------------------------------------------------------------- KPI cards */
.dbx-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.dbx-kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 0; flex: 1; }
.dbx-kpi-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) {
    .dbx-kpi-grid, .dbx-kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dbx-kpi-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
    .dbx-kpi-grid, .dbx-kpi-grid--5, .dbx-kpi-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dbx-kpi {
    position: relative;
    background: var(--theme-bg-card);
    border: 1px solid var(--theme-border-color);
    border-radius: 12px;
    padding: 15px 17px 13px;
    box-shadow: var(--theme-shadow-sm);
    overflow: hidden;
    min-width: 0;
    transition: border-color .15s ease, transform .15s ease;
}
.dbx-kpi[data-goto] { cursor: pointer; }
.dbx-kpi[data-goto]:hover { border-color: var(--theme-border-accent); transform: translateY(-1px); }
.dbx-kpi::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--theme-accent-blue);
    opacity: .9;
}
.dbx-kpi--threats::before { background: var(--theme-accent-blue); }
.dbx-kpi--review::before { background: var(--theme-accent-purple); }
.dbx-kpi--high::before { background: var(--theme-danger); }
.dbx-kpi--endpoints::before, .dbx-kpi--ok::before { background: var(--theme-success); }
.dbx-kpi--kev::before, .dbx-kpi--warnv::before { background: var(--theme-warning); }
.dbx-kpi--auto::before { background: var(--theme-accent-purple); }
.dbx-kpi--muted::before { background: var(--theme-text-muted); }
.dbx-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dbx-kpi-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbx-kpi-value { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--theme-text-primary); }
.dbx-kpi--sm .dbx-kpi-value { font-size: 23px; }
.dbx-kpi-unit { font-size: 15px; font-weight: 600; color: var(--theme-text-secondary); margin-left: 2px; }
.dbx-kpi-denominator { font-size: 15px; font-weight: 600; color: var(--theme-text-muted); }
.dbx-kpi-foot { margin-top: 6px; font-size: 11.5px; color: var(--theme-text-muted); min-height: 15px; }
.dbx-kpi .dbx-spark { position: absolute; right: 10px; bottom: 8px; width: 108px; height: 30px; opacity: .9; }

.dbx-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}
.dbx-delta--good { color: var(--theme-success); background: var(--theme-success-bg); }
.dbx-delta--bad { color: var(--theme-danger); background: var(--theme-danger-bg); }
.dbx-delta--neutral { color: var(--theme-text-secondary); background: var(--theme-bg-subtle-strong); }
.dbx-flame {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
    padding: 2px 8px; border-radius: 999px;
    color: var(--theme-warning); background: var(--theme-warning-bg);
}
.dbx-live-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--theme-danger);
    box-shadow: 0 0 0 0 var(--theme-danger-glow);
    animation: dbxPulse 2s infinite;
}
@keyframes dbxPulse {
    0% { box-shadow: 0 0 0 0 var(--theme-danger-glow); }
    70% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* ------------------------------------------------------------- sparklines */
.dbx-spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.dbx-spark-area { stroke: none; }
.dbx-spark--blue .dbx-spark-line { stroke: var(--theme-accent-blue-light); }
.dbx-spark--blue .dbx-spark-area { fill: var(--theme-accent-blue-bg); }
.dbx-spark--purple .dbx-spark-line { stroke: var(--theme-accent-purple); }
.dbx-spark--purple .dbx-spark-area { fill: var(--theme-accent-purple-bg); }
.dbx-spark--red .dbx-spark-line { stroke: var(--theme-danger); }
.dbx-spark--red .dbx-spark-area { fill: var(--theme-danger-bg); }

/* --------------------------------------------------------- meters / strips */
.dbx-meter {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--theme-bg-subtle-strong);
    overflow: hidden;
    min-width: 40px;
}
.dbx-meter-fill { height: 100%; border-radius: 999px; }
.dbx-meter-fill--ok { background: var(--theme-success); }
.dbx-meter-fill--warn { background: var(--theme-warning); }
.dbx-meter-fill--bad { background: var(--theme-danger); }
.dbx-meter-label { font-size: 11px; color: var(--theme-text-muted); margin-left: 8px; white-space: nowrap; }
.dbx-kpi-foot .dbx-meter { display: inline-block; vertical-align: middle; width: 52%; }

.dbx-strip {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--theme-bg-subtle-strong);
}
.dbx-strip-seg { min-width: 3px; }
.dbx-strip-seg--ok { background: var(--theme-success); }
.dbx-strip-seg--warn { background: var(--theme-warning); }
.dbx-strip-seg--bad { background: var(--theme-danger); }
.dbx-strip-seg--kev { background: var(--theme-accent-purple); }
.dbx-strip-seg--muted { background: var(--theme-text-disabled); }
.dbx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; }
.dbx-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--theme-text-secondary); }
.dbx-legend-item strong { color: var(--theme-text-primary); font-weight: 700; }
.dbx-dot { width: 9px; height: 9px; border-radius: 3px; }
.dbx-dot--ok { background: var(--theme-success); }
.dbx-dot--warn { background: var(--theme-warning); }
.dbx-dot--bad { background: var(--theme-danger); }
.dbx-dot--kev { background: var(--theme-accent-purple); }
.dbx-dot--muted { background: var(--theme-text-disabled); }
.dbx-mini-foot { margin-top: 12px; font-size: 11.5px; color: var(--theme-text-muted); }

/* --------------------------------------------------------- needs attention */
.dbx-panel--attention .dbx-panel-body { display: flex; flex-direction: column; gap: 8px; }
.dbx-attn-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 14px 11px 16px;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-bg-subtle);
    cursor: pointer;
    overflow: hidden;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.dbx-attn-item:hover { background: var(--theme-bg-subtle-hover); border-color: var(--theme-border-strong); transform: translateX(2px); }
.dbx-attn-rail { position: absolute; inset: 0 auto 0 0; width: 3px; }
.dbx-attn-item--critical .dbx-attn-rail { background: var(--theme-danger); }
.dbx-attn-item--warn .dbx-attn-rail { background: var(--theme-warning); }
.dbx-attn-item--info .dbx-attn-rail { background: var(--theme-accent-blue); }
.dbx-attn-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    flex: none;
    font-size: 14px;
}
.dbx-attn-item--critical .dbx-attn-icon { color: var(--theme-danger); background: var(--theme-danger-bg); }
.dbx-attn-item--warn .dbx-attn-icon { color: var(--theme-warning); background: var(--theme-warning-bg); }
.dbx-attn-item--info .dbx-attn-icon { color: var(--theme-accent-blue-light); background: var(--theme-accent-blue-bg); }
.dbx-attn-main { flex: 1; min-width: 0; }
.dbx-attn-label { font-size: 13.5px; font-weight: 600; color: var(--theme-text-primary); }
.dbx-attn-desc { font-size: 12px; color: var(--theme-text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-attn-go { color: var(--theme-text-muted); font-size: 16px; }
.dbx-attn-item:hover .dbx-attn-go { color: var(--theme-accent-blue-light); }

/* ------------------------------------------------------------ posture ring */
.dbx-posture { display: flex; align-items: center; gap: 22px; }
.dbx-ring { position: relative; width: 128px; height: 128px; flex: none; }
.dbx-ring svg { width: 100%; height: 100%; }
.dbx-ring-track { fill: none; stroke: var(--theme-bg-subtle-strong); stroke-width: 10; }
.dbx-ring-value { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.dbx-ring--good .dbx-ring-value { stroke: var(--theme-success); }
.dbx-ring--warn .dbx-ring-value { stroke: var(--theme-warning); }
.dbx-ring--bad .dbx-ring-value { stroke: var(--theme-danger); }
.dbx-ring-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dbx-ring-score { font-size: 30px; font-weight: 800; line-height: 1; color: var(--theme-text-primary); }
.dbx-ring-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-top: 3px; }
.dbx-ring--good .dbx-ring-label { color: var(--theme-success); }
.dbx-ring--warn .dbx-ring-label { color: var(--theme-warning); }
.dbx-ring--bad .dbx-ring-label { color: var(--theme-danger); }
.dbx-subscores { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.dbx-subscore { display: flex; align-items: center; gap: 11px; cursor: pointer; border-radius: 6px; padding: 2px 4px; }
.dbx-subscore:hover { background: var(--theme-bg-subtle-hover); }
.dbx-subscore-label { width: 92px; flex: none; font-size: 12px; font-weight: 600; color: var(--theme-text-secondary); }
.dbx-subscore-val { width: 26px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--theme-text-primary); }
.dbx-posture-note { margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: var(--theme-text-muted); }

/* ------------------------------------------------------------------ tables */
.dbx-table { width: 100%; border-collapse: collapse; }
.dbx-table thead th {
    padding: 11px 18px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-align: left;
    color: var(--theme-text-muted);
    border-bottom: 1px solid var(--theme-border-subtle);
    background: var(--theme-bg-subtle);
}
.dbx-th-right { text-align: right !important; }
.dbx-table tbody td {
    padding: 11px 18px;
    border-bottom: 1px solid var(--theme-border-subtle);
    font-size: 13px;
    color: var(--theme-text-primary);
    vertical-align: middle;
}
.dbx-table tbody tr { cursor: pointer; transition: background .12s ease; }
.dbx-table tbody tr:hover { background: var(--theme-bg-subtle-hover); }
.dbx-table tbody tr:last-child td { border-bottom: none; }
.dbx-threat-desc {
    font-weight: 600;
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbx-threat-engine { font-size: 11.5px; color: var(--theme-text-muted); margin-top: 2px; }
.dbx-ep-chip {
    display: inline-flex; align-items: center; gap: 7px;
    max-width: 170px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--theme-bg-subtle-strong);
    font-size: 12px;
    color: var(--theme-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-ep-chip i { font-size: 10.5px; color: var(--theme-text-muted); }
.dbx-time { text-align: right; font-size: 12px; color: var(--theme-text-muted); white-space: nowrap; }
.dbx-empty-cell { text-align: center; padding: 40px !important; color: var(--theme-text-muted); }

/* --------------------------------------------------------------- toolbar */
.dbx-toolbar { display: flex; gap: 18px; align-items: stretch; margin-bottom: 18px; }
.dbx-range {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--theme-border-color);
    border-radius: 12px;
    background: var(--theme-bg-card);
    align-self: flex-start;
    box-shadow: var(--theme-shadow-sm);
}
.dbx-range-label { font-size: 11.5px; font-weight: 600; color: var(--theme-text-muted); margin-right: 5px; white-space: nowrap; }
.dbx-range-btn {
    padding: 6px 13px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--theme-text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
}
.dbx-range-btn:hover { background: var(--theme-bg-subtle-hover); color: var(--theme-text-primary); }
.dbx-range-btn.active { background: var(--theme-accent-blue); color: #fff; }
@media (max-width: 1400px) { .dbx-toolbar { flex-direction: column-reverse; } }

/* ----------------------------------------------------------------- charts */
.dbx-chart { width: 100%; }
.dbx-chart--trend { height: 320px; }
.dbx-chart--donut { height: 250px; }

/* ------------------------------------------------------------------ MITRE */
.dbx-panel--mitre { margin-bottom: 18px; }
.dbx-mitre-strip-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--theme-text-muted);
    margin-bottom: 9px;
}
.dbx-mitre-strip {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 7px;
}
@media (max-width: 1400px) { .dbx-mitre-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 950px) { .dbx-mitre-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dbx-tactic {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1px solid var(--theme-border-subtle);
    background: var(--theme-bg-subtle);
    text-decoration: none;
    min-width: 0;
    transition: transform .15s ease, border-color .15s ease;
}
.dbx-tactic:hover { transform: translateY(-2px); border-color: var(--theme-border-accent); text-decoration: none; }
.dbx-tactic-count { font-size: 16px; font-weight: 800; line-height: 1; color: var(--theme-text-primary); }
.dbx-tactic-name {
    font-size: 10px; font-weight: 600;
    color: var(--theme-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.dbx-tactic--h1 { background: var(--theme-accent-blue-bg-subtle); }
.dbx-tactic--h2 { background: var(--theme-warning-bg); border-color: rgba(210, 153, 34, .3); }
.dbx-tactic--h2 .dbx-tactic-count { color: var(--theme-warning-light, var(--theme-warning)); }
.dbx-tactic--h3 { background: var(--theme-danger-bg); border-color: rgba(248, 81, 73, .35); }
.dbx-tactic--h3 .dbx-tactic-count { color: var(--theme-danger); }

.dbx-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 28px;
}
@media (max-width: 1150px) { .dbx-tech-grid { grid-template-columns: 1fr; } }
.dbx-tech {
    display: flex; align-items: center; gap: 11px;
    padding: 7px 8px;
    border-radius: 8px;
    min-width: 0;
}
.dbx-tech:hover { background: var(--theme-bg-subtle-hover); }
.dbx-tech-rank {
    width: 20px; flex: none;
    font-size: 11.5px; font-weight: 700;
    color: var(--theme-text-disabled);
    text-align: right;
}
.dbx-tech-id {
    flex: none;
    font-family: Consolas, Menlo, monospace;
    font-size: 11.5px; font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--theme-accent-blue-bg);
    color: var(--theme-accent-blue-light);
    text-decoration: none;
}
.dbx-tech-id:hover { background: var(--theme-accent-blue); color: #fff; text-decoration: none; }
.dbx-tech-main { flex: 1; min-width: 0; }
.dbx-tech-name {
    font-size: 12.5px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-tech-tactic {
    margin-left: 8px;
    font-size: 10.5px; font-weight: 600;
    color: var(--theme-text-muted);
}
.dbx-tech-bar { height: 4px; border-radius: 999px; background: var(--theme-bg-subtle-strong); margin-top: 5px; overflow: hidden; }
.dbx-tech-fill { height: 100%; border-radius: 999px; background: var(--theme-accent-blue); }
.dbx-tech-count { flex: none; width: 30px; text-align: right; font-size: 13px; font-weight: 700; color: var(--theme-text-primary); }

/* ---------------------------------------------------------- bar-row lists */
.dbx-age-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.dbx-age-label { width: 52px; flex: none; font-size: 12.5px; font-weight: 600; color: var(--theme-text-secondary); }
.dbx-age-label--wide { width: 118px; }
.dbx-age-bar { flex: 1; height: 9px; border-radius: 999px; background: var(--theme-bg-subtle-strong); overflow: hidden; }
.dbx-age-fill { height: 100%; border-radius: 999px; min-width: 2px; }
.dbx-age-fill--ok { background: var(--theme-success); }
.dbx-age-fill--warn { background: var(--theme-warning); }
.dbx-age-fill--bad { background: var(--theme-danger); }
.dbx-age-fill--blue { background: var(--theme-accent-blue); }
.dbx-age-fill--muted { background: var(--theme-text-disabled); }
.dbx-age-count { width: 46px; flex: none; text-align: right; font-size: 13px; font-weight: 700; color: var(--theme-text-primary); }
.dbx-age-pct { width: 34px; flex: none; text-align: right; font-size: 11.5px; color: var(--theme-text-muted); }
.dbx-mono { font-family: Consolas, Menlo, monospace; }
.dbx-ver-tag {
    margin-left: 7px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 6px; border-radius: 999px;
    vertical-align: 1px;
}
.dbx-ver-tag--latest { background: var(--theme-success-bg); color: var(--theme-success); }
.dbx-ver-tag--old { background: var(--theme-warning-bg); color: var(--theme-warning); }

/* -------------------------------------------------------- top endpoints */
.dbx-topep { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 8px; cursor: pointer; }
.dbx-topep:hover { background: var(--theme-bg-subtle-hover); }
.dbx-topep-rank { width: 18px; flex: none; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--theme-text-disabled); }
.dbx-topep-os {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--theme-bg-subtle-strong);
    color: var(--theme-text-secondary);
    font-size: 14px;
}
.dbx-topep-main { flex: 1.2; min-width: 0; }
.dbx-topep-name { font-size: 13px; font-weight: 600; color: var(--theme-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-topep-oslabel { font-size: 11px; color: var(--theme-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-topep-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--theme-bg-subtle-strong); overflow: hidden; }
.dbx-topep-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--theme-warning), var(--theme-danger)); }
.dbx-topep-count { width: 30px; flex: none; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--theme-text-primary); }

/* ------------------------------------------------------------ vital signs */
.dbx-vs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 28px;
}
@media (max-width: 1150px) { .dbx-vs-grid { grid-template-columns: 1fr; } }
.dbx-vs-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 8px;
    min-width: 0;
}
.dbx-vs-row:hover { background: var(--theme-bg-subtle-hover); }
.dbx-vs-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dbx-vs-dot--critical { background: var(--theme-danger); box-shadow: 0 0 6px var(--theme-danger-glow); }
.dbx-vs-dot--warn { background: var(--theme-warning); }
.dbx-vs-dot--info { background: var(--theme-accent-blue-light); }
.dbx-vs-main { flex: 1; min-width: 0; }
.dbx-vs-name {
    font-size: 12.5px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-vs-cat {
    margin-left: 8px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 7px; border-radius: 999px;
    background: var(--theme-bg-subtle-strong);
    color: var(--theme-text-muted);
    vertical-align: 1px;
}
.dbx-vs-bar { height: 4px; border-radius: 999px; background: var(--theme-bg-subtle-strong); margin-top: 5px; overflow: hidden; }
.dbx-vs-fill { height: 100%; border-radius: 999px; }
.dbx-vs-fill--critical { background: var(--theme-danger); }
.dbx-vs-fill--warn { background: var(--theme-warning); }
.dbx-vs-fill--info { background: var(--theme-accent-blue); }
.dbx-vs-count { flex: none; min-width: 84px; text-align: right; font-size: 13px; font-weight: 700; color: var(--theme-text-primary); white-space: nowrap; }
.dbx-vs-of { font-size: 11px; font-weight: 500; color: var(--theme-text-muted); margin-left: 3px; }

.dbx-role { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; }
.dbx-role + .dbx-role { border-top: 1px solid var(--theme-border-subtle); }
.dbx-role-icon {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--theme-bg-subtle-strong);
    color: var(--theme-accent-blue-light);
    font-size: 13px;
    margin-top: 2px;
}
.dbx-role-main { flex: 1; min-width: 0; }
.dbx-role-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dbx-role-name { font-size: 13px; font-weight: 700; color: var(--theme-text-primary); }
.dbx-role-counts { display: inline-flex; align-items: baseline; gap: 9px; }
.dbx-role-count { font-size: 12.5px; font-weight: 700; }
.dbx-role-count--ok { color: var(--theme-success); }
.dbx-role-count--warn { color: var(--theme-warning); }
.dbx-role-count--bad { color: var(--theme-danger); }
.dbx-role-total { font-size: 11px; color: var(--theme-text-muted); margin-left: 3px; }
.dbx-strip--sm { height: 8px; }
.dbx-att-top {
    font-size: 12px; color: var(--theme-text-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dbx-vs-issues { margin-top: 14px; border-top: 1px solid var(--theme-border-subtle); padding-top: 6px; }
.dbx-vs-issue {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 4px;
}
.dbx-vs-issue + .dbx-vs-issue { border-top: 1px solid var(--theme-border-subtle); }
.dbx-vs-issue-name { font-size: 12.5px; color: var(--theme-text-secondary); }
.dbx-vs-issue-count {
    min-width: 24px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 7px; border-radius: 999px;
    background: var(--theme-warning-bg); color: var(--theme-warning);
    font-size: 11.5px; font-weight: 700;
}

/* -------------------------------------------------------- update / traffic */
.dbx-upd-grid { display: flex; flex-direction: column; gap: 13px; }
.dbx-upd-card {
    border: 1px solid var(--theme-border-subtle);
    border-radius: 10px;
    background: var(--theme-bg-subtle);
    padding: 11px 14px;
}
.dbx-upd-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.dbx-upd-os { font-size: 13px; font-weight: 700; color: var(--theme-text-primary); }
.dbx-upd-total { font-size: 11.5px; color: var(--theme-text-muted); }
.dbx-upd-card .dbx-strip { height: 9px; }
.dbx-upd-foot { display: flex; justify-content: space-between; margin-top: 9px; }
.dbx-upd-stat { font-size: 11.5px; font-weight: 600; }
.dbx-upd-stat--ok { color: var(--theme-success); }
.dbx-upd-stat--bad { color: var(--theme-danger); }

.dbx-traffic-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--theme-border-subtle);
}
.dbx-traffic-row:last-child { border-bottom: none; }
.dbx-traffic-label { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--theme-text-secondary); }
.dbx-traffic-label i { margin-right: 7px; color: var(--theme-accent-blue-light); }
.dbx-traffic-val { font-size: 17px; font-weight: 700; color: var(--theme-text-primary); }

/* ---------------------------------------------------------------- network */
.dbx-attn-when { flex: none; font-size: 11px; color: var(--theme-text-muted); white-space: nowrap; }

.dbx-cat-row { display: flex; align-items: center; gap: 11px; padding: 8px 4px; }
.dbx-cat-row + .dbx-cat-row { border-top: 1px solid var(--theme-border-subtle); }
.dbx-cat-main { flex: 1; min-width: 0; }
.dbx-cat-name {
    font-size: 12.5px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 5px;
}
.dbx-cat-bytes { flex: none; width: 56px; text-align: right; font-size: 13px; font-weight: 700; color: var(--theme-text-primary); }

.dbx-dom-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 6px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
}
.dbx-dom-row:hover { background: var(--theme-bg-subtle-hover); }
.dbx-dom-row + .dbx-dom-row { border-top: 1px solid var(--theme-border-subtle); }
.dbx-dom-name {
    flex: 1; min-width: 0;
    font-size: 12.5px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-dom-flag { color: var(--theme-danger); font-size: 11px; margin-left: 4px; }
.dbx-dom-meta { flex: none; font-size: 11px; color: var(--theme-text-muted); white-space: nowrap; }
.dbx-dom-eps { flex: none; width: 52px; font-size: 11.5px; color: var(--theme-text-secondary); white-space: nowrap; }
.dbx-dom-eps i { font-size: 10px; color: var(--theme-text-muted); margin-right: 3px; }
.dbx-dom-out { flex: none; min-width: 74px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--theme-text-primary); white-space: nowrap; }
.dbx-dom-out i { font-size: 10px; color: var(--theme-warning); }
.dbx-dom-in { flex: none; min-width: 74px; text-align: right; font-size: 12px; color: var(--theme-text-muted); white-space: nowrap; }
.dbx-dom-in i { font-size: 10px; }
.dbx-dom-row--wide .dbx-dom-name { flex: 1.4; }

.dbx-app-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; min-width: 0; }
.dbx-app-row + .dbx-app-row { border-top: 1px solid var(--theme-border-subtle); }
.dbx-app-row--flagged { background: var(--theme-danger-bg); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.dbx-app-row--flagged + .dbx-app-row { border-top: none; }
.dbx-app-main { flex: 1; min-width: 0; }
.dbx-app-name {
    font-size: 12.5px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-app-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.dbx-dom-signer { font-size: 11px; color: var(--theme-success); white-space: nowrap; }
.dbx-dom-signer i { margin-right: 3px; }
.dbx-dom-signer--bad { color: var(--theme-danger); font-weight: 700; }

.dbx-port-proto { flex: none; width: 46px; font-size: 11.5px; font-weight: 600; color: var(--theme-text-secondary); }
.dbx-port-note { flex: none; width: 205px; font-size: 11px; color: var(--theme-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dbx-port-note--bad { color: var(--theme-danger); font-weight: 600; }
.dbx-port-note--bad i { margin-right: 3px; }
.dbx-geo-code {
    flex: none; width: 34px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 5px;
    background: var(--theme-bg-subtle-strong);
    color: var(--theme-text-secondary);
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.dbx-geo-code--bad { background: var(--theme-danger-bg); color: var(--theme-danger); }

/* flagged row in flush tables (largest uploads) */
.dbx-row--flagged td { background: var(--theme-danger-bg); }

/* hourly egress profile */
.dbx-hour-chart {
    display: flex; align-items: flex-end; gap: 3px;
    height: 130px; padding: 6px 2px 0;
}
.dbx-hour-col {
    flex: 1; min-width: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
}
.dbx-hour-bar {
    width: 100%; border-radius: 3px 3px 0 0;
    background: var(--theme-accent-blue);
    opacity: .75;
}
.dbx-hour-col:hover .dbx-hour-bar { opacity: 1; }
.dbx-hour-bar--bad { background: var(--theme-danger); opacity: .9; }
.dbx-hour-label {
    flex: none; height: 13px;
    font-size: 9.5px; color: var(--theme-text-muted);
    font-family: var(--font-mono, monospace);
}
@media (max-width: 1500px) { .dbx-port-note { width: 150px; } }

/* ------------------------------------------------------------------- ITDR */
.dbx-id-user {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 120px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--theme-accent-purple-bg);
    color: var(--theme-accent-purple);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dbx-id-user i { font-size: 10px; }

.dbx-lockout-row { display: flex; padding: 9px 4px; }
.dbx-lockout-row + .dbx-lockout-row { border-top: 1px solid var(--theme-border-subtle); }
.dbx-lockout-main { flex: 1; min-width: 0; }
.dbx-lockout-head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; min-width: 0; }
.dbx-lockout-src {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 700; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-lockout-src i { font-size: 11px; color: var(--theme-text-muted); }
.dbx-lockout-arrow { color: var(--theme-text-muted); font-size: 12px; }
.dbx-lockout-count { margin-left: auto; font-size: 13px; font-weight: 800; color: var(--theme-warning); white-space: nowrap; }

.dbx-riskid { display: flex; align-items: center; gap: 11px; padding: 9px 4px; min-width: 0; }
.dbx-riskid + .dbx-riskid { border-top: 1px solid var(--theme-border-subtle); }
.dbx-riskid-score {
    flex: none;
    width: 40px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 14.5px; font-weight: 800;
    font-family: Consolas, Menlo, monospace;
}
.dbx-riskid-score--bad { background: var(--theme-danger-bg); color: var(--theme-danger); }
.dbx-riskid-score--warn { background: var(--theme-warning-bg); color: var(--theme-warning); }
.dbx-riskid-score--kev { background: var(--theme-accent-purple-bg); color: var(--theme-accent-purple); }
.dbx-riskid-main { flex: 1; min-width: 0; }
.dbx-riskid-name {
    font-size: 13px; font-weight: 600; color: var(--theme-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dbx-riskid-main .dbx-attn-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------- exposure */
.dbx-expo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dbx-expo-note { font-size: 12px; color: var(--theme-text-muted); }
.dbx-expo-note i { margin-right: 6px; color: var(--theme-accent-blue-light); }
/* embedded inside the hub: neutralize any page-level chrome from expd-page */
.dbx-expo-embed { padding: 0 !important; margin: 0 !important; max-width: none !important; background: transparent !important; }

/* ------------------------------------------------------------------- misc */
.dbx-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 36px 16px;
    color: var(--theme-text-muted);
    font-size: 13px;
}
.dbx-empty i { font-size: 26px; color: var(--theme-success); }
.dbx-toast {
    position: fixed;
    bottom: 24px; left: 50%;
    transform: translateX(-50%);
    background: var(--theme-bg-dropdown);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-accent);
    border-radius: 8px;
    padding: 12px 20px;
    z-index: 9999;
    box-shadow: var(--theme-shadow-lg);
    font-size: 13px;
}
.dbx-pane { animation: dbxFadeIn .25s ease; }
@keyframes dbxFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }