/* ============================================================
   RealVuln dashboard — analyst console (extends styles.css)
   ============================================================ */

/* sticky controls bar */
.dash-controls { position: sticky; top: 60px; z-index: 40; background: rgba(12,11,9,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); }
.dash-controls-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 0; flex-wrap: wrap; }
.dc-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dc-title { font-family: var(--serif); font-size: 20px; color: var(--fg); letter-spacing: -0.015em; font-weight: 500; }
.dc-meta { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.dc-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.ctrl-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); margin-right: 2px; }

/* KPI strip */
.kpi-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; padding: 30px 0 8px; }
.kpi { border: 1px solid var(--hair); border-radius: 11px; padding: 18px 20px; background: var(--ink-2); }
.kpi .kv { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--fg); letter-spacing: -0.025em; line-height: 1; }
.kpi .kv .u { font-size: .46em; color: var(--fg-3); font-weight: 600; }
.kpi .kl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-3); margin-top: 11px; }
.kpi .ks { font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); margin-top: 5px; }

/* panels grid */
.dash-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; padding: 22px 0 70px; }
.panel { border: 1px solid var(--hair); border-radius: 12px; background: var(--ink-2); overflow: hidden; display: flex; flex-direction: column; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--hair); gap: 12px; }
.panel-head h3 { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; }
.panel-head .pm { font-family: var(--mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }
.panel-body { padding: 20px; flex: 1; min-width: 0; }
.panel-body.flush { padding: 0; }

.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }

/* leaderboard inside panel: reuse table.lb; remove outer border */
.panel .table-scroll { border: none; border-radius: 0; background: transparent; }

/* horizontal ranking bars */
.hbars { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.hbar { display: grid; grid-template-columns: 140px 1fr 42px; align-items: center; gap: 12px; transition: opacity .15s; }
.hbar .hn { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.hbar .hn .hd { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.hbar .ht { height: 15px; border-radius: 3px; background: rgba(255,255,255,0.05); overflow: hidden; }
.hbar .hf { height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.4,0,.1,1); }
.hbar .hv { text-align: right; color: var(--fg); font-weight: 500; }
.hbar.dimmed { opacity: 0.22; }

/* category stat cards */
.catstats { display: flex; flex-direction: column; gap: 12px; }
.catstat { border: 1px solid var(--hair); border-radius: 9px; padding: 15px 17px; border-left-width: 2px; }
.catstat .ctop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.catstat .cname { font-family: var(--serif); font-size: 16px; color: var(--fg); font-weight: 500; }
.catstat .ccount { font-family: var(--mono); font-size: 11px; color: var(--fg-3); }
.catstat .cmetrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; font-family: var(--mono); }
.catstat .cm .v { font-size: 18px; color: var(--fg); font-weight: 700; letter-spacing: -0.02em; }
.catstat .cm .l { font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-faint); margin-top: 3px; }

/* class detection grouped bars */
.classbars { display: flex; flex-direction: column; gap: 18px; }
.classrow .clabel { font-family: var(--mono); font-size: 12.5px; color: var(--fg-2); margin-bottom: 9px; display: flex; justify-content: space-between; }
.classrow .clabel .cwe { color: var(--fg-faint); font-size: 11px; }
.gbar { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11.5px; }
.gbar .gr { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; }
.gbar .gr .gn { color: var(--fg-3); }
.gbar .gr .gt { height: 12px; border-radius: 3px; background: rgba(255,255,255,0.05); overflow: hidden; }
.gbar .gr .gf { height: 100%; border-radius: 3px; }
.gbar .gr .gv { text-align: right; color: var(--fg-2); }
.class-note { font-family: var(--mono); font-size: 12px; color: var(--fg-3); line-height: 1.7; border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 4px; }
.class-note b { color: var(--fg-2); font-weight: 600; }
.class-note .ic { color: var(--accent-dim); }

/* dataset composition */
.compose-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 26px; }
.compose-grid h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 16px; font-weight: 500; }
.split-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; border: 1px solid var(--hair); }
.split-bar .seg { display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink); font-weight: 600; }
.split-legend { display: flex; gap: 18px; margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.split-legend .li { display: flex; align-items: center; gap: 7px; }
.split-legend .sw { width: 10px; height: 10px; border-radius: 2px; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { border: 1px solid var(--hair); border-radius: 8px; padding: 14px 16px; }
.mini .mv { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; }
.mini .ml { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-top: 6px; }

/* scatter tooltip */
.dash-tip { position: fixed; z-index: 100; pointer-events: none; background: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 7px; padding: 9px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--fg); opacity: 0; transition: opacity .1s; box-shadow: 0 8px 24px rgba(0,0,0,0.5); white-space: nowrap; }
.dash-tip .tt-name { color: var(--accent); font-weight: 600; margin-bottom: 3px; }
.dash-tip .tt-cat { color: var(--fg-3); }
.scatter circle.pt { cursor: pointer; }
.scatter circle.pt.dimmed { opacity: 0.15 !important; }
.scatter text.pt-label.dimmed { opacity: 0.15; }

/* responsive */
@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(3,1fr); }
  .col-8, .col-7, .col-6, .col-5 { grid-column: span 12; }
  .compose-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .hbar { grid-template-columns: 104px 1fr 38px; }
  .dc-title { font-size: 17px; }
}