/* Executive Risk Dashboard.
 *
 * **The reference is a fixed 1600×900 stage** that a transform scales to fill a recording frame,
 * with its own hard-coded light palette. Neither can come across: this host is a fluid shell with
 * six themes and a phone layout, so what is kept is the *design* — the severity pill, the one big
 * figure, the slice bars, the insight line — rebuilt on the shell's own cards and variables. Every
 * colour here resolves through the theme, so the report is readable on the four dark ones too;
 * the mock-up's hex codes would not be.
 *
 * Scoped to .rk-scope, like inventory.css is to .iv-scope, so it cannot reach the other reports.
 */

/* **The panel body is what stacks the blocks, not the panel.** .rk-scope is the tab-panel itself
   and the blocks live one level down in .tp-inner, so a gap here never reached them — measured,
   .tp-inner came back with gap:normal and the hero cards sat 0px from the grid cards. */
.rk-scope .tp-inner { display:flex; flex-direction:column; gap:10px; }

/* Bootstrap pulls a .row up by its own vertical gutter (margin-top:-16px with g-3), which
   cancelled the column gap exactly and left consecutive blocks touching. Zeroing it lets the
   gutter do what it is for — spacing the columns when they wrap — and the flex gap space the
   blocks, which are two different jobs the one value was being asked to do. */
.rk-scope .tp-inner > .row { margin-top:0; }

/* What is left of the head: the severity pill alone, riding at the right end of the section
   divider so the status is level with the heading it belongs to. The heading takes the slack and
   `min-width:0` lets it ellipsise rather than push the pill off the end on a narrow screen. */
.rk-scope .rk-divider { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rk-scope .rk-divider > span { min-width:0; }
.rk-scope .rk-head { display:flex; justify-content:flex-end; flex:0 0 auto; }

/* The window a single card was measured over, printed beside its title. `.ct` is
   display:flex; justify-content:space-between, so the title and the pill become the two ends and
   this rides along inside the title's own span rather than becoming a third item. */
.rk-scope .rk-ct-win {
  font-weight:400; font-size:0.74rem; color:var(--text-secondary);
  text-transform:none; letter-spacing:0; margin-left:8px;
}

/* ── a domain card ─────────────────────────────────────────────────────── */
.rk-scope .rk-card { display:flex; flex-direction:column; gap:10px; }
.rk-scope .rk-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.rk-scope .rk-title { font-size:0.95rem; font-weight:700; color:var(--text-primary); }
.rk-scope .rk-title .rk-sub {
  display:block; font-size:0.74rem; font-weight:400; color:var(--text-secondary);
  text-transform:none; letter-spacing:0;
}
.rk-scope .rk-win { font-size:0.74rem; color:var(--text-secondary); }

/* A clickable title gets the same affordance the other reports' card titles have. */
.rk-scope .rk-clickable { cursor:pointer; }
.rk-scope .rk-clickable:hover { text-decoration:underline; }

/* ── severity ──────────────────────────────────────────────────────────── */
.rk-scope .rk-pill {
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary);
}
.rk-scope .rk-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.rk-scope .rk-pill.rk-critical { color:var(--danger, #d9534f); border-color:currentColor; }
.rk-scope .rk-pill.rk-serious  { color:var(--warning, #e8912d); border-color:currentColor; }
.rk-scope .rk-pill.rk-warning  { color:var(--series-3, #d4a72c); border-color:currentColor; }
.rk-scope .rk-pill.rk-ok       { color:var(--success, #3d9970); border-color:currentColor; }

/* A left edge in the severity colour, so the grid reads at a glance without the pills. */
.rk-scope .rk-card.rk-critical { border-left:3px solid var(--danger, #d9534f); }
.rk-scope .rk-card.rk-serious  { border-left:3px solid var(--warning, #e8912d); }
.rk-scope .rk-card.rk-warning  { border-left:3px solid var(--series-3, #d4a72c); }
.rk-scope .rk-card.rk-ok       { border-left:3px solid var(--success, #3d9970); }

/* ── the headline figure ───────────────────────────────────────────────── */
.rk-scope .rk-metric { display:flex; flex-direction:column; gap:3px; }
.rk-scope .rk-value {
  font-size:1.6rem; font-weight:700; color:var(--text-primary); line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.rk-scope .rk-chg { font-size:0.82rem; font-weight:700; margin-left:6px; }
.rk-scope .rk-metric-label { font-size:0.8rem; color:var(--text-secondary); }
.rk-scope .rk-prev { font-size:0.74rem; color:var(--text-secondary); }
.rk-scope .rk-caption { font-size:0.78rem; color:var(--text-secondary); margin-top:4px; }

/* ── slice bars ────────────────────────────────────────────────────────── */
.rk-scope .rk-slices { display:flex; flex-direction:column; gap:9px; }
.rk-scope .rk-slice-top { display:flex; justify-content:space-between; gap:8px; font-size:0.76rem; }
.rk-scope .rk-slice-label { color:var(--text-primary); }
.rk-scope .rk-slice-val { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rk-scope .rk-track {
  height:7px; border-radius:4px; background:var(--plane, rgba(127,127,127,0.15)); margin-top:3px; overflow:hidden;
}
.rk-scope .rk-fill { height:100%; border-radius:4px; }
.rk-scope .rk-slice-pct { font-size:0.7rem; color:var(--text-secondary); margin-top:2px; }

/* ── the insight line and the notes ────────────────────────────────────── */
.rk-scope .rk-insight {
  font-size:0.8rem; color:var(--text-primary); padding:8px 10px; border-radius:8px;
  background:var(--plane, rgba(127,127,127,0.08)); border:1px solid var(--border);
}
.rk-scope .rk-note { font-size:0.74rem; color:var(--text-secondary); margin-top:6px; }
.rk-scope .rk-empty { font-size:0.8rem; color:var(--text-secondary); padding:10px 0; }

/* ── the hero strip ────────────────────────────────────────────────────── */
.rk-scope .rk-hero-card { display:flex; flex-direction:column; gap:8px; height:100%; }
.rk-scope .rk-hero-label,
.rk-scope .rk-hero-title { font-size:0.8rem; font-weight:700; color:var(--text-secondary); }
.rk-scope .rk-exposure {
  font-size:2rem; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums;
}
.rk-scope .rk-hero-sub { font-size:0.74rem; color:var(--text-secondary); }
.rk-scope .rk-chips { display:flex; flex-wrap:wrap; gap:6px; }
.rk-scope .rk-chip {
  font-size:0.72rem; padding:3px 9px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface-1); color:var(--text-secondary);
}
.rk-scope .rk-chip b { color:var(--text-primary); }
.rk-scope .rk-balance {
  display:flex; flex-wrap:wrap; gap:12px; font-size:0.74rem; color:var(--text-secondary);
  padding-top:6px; border-top:1px solid var(--border);
}

/* ── the urgent / watch lists ──────────────────────────────────────────── */
.rk-scope .rk-item { display:flex; gap:8px; align-items:flex-start; }
.rk-scope .rk-num {
  flex:0 0 auto; width:19px; height:19px; border-radius:50%; font-size:0.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:var(--text-secondary);
}
.rk-scope .rk-num.rk-n1 { background:var(--danger, #d9534f); }
.rk-scope .rk-num.rk-nmore { background:var(--text-secondary); }
.rk-scope .rk-item-text { font-size:0.76rem; color:var(--text-primary); line-height:1.5; }

/* ── the severity mix ──────────────────────────────────────────────────── */
.rk-scope .rk-mix-row { display:flex; align-items:center; gap:8px; font-size:0.76rem; }
.rk-scope .rk-mix-label { flex:1 1 auto; color:var(--text-primary); }
.rk-scope .rk-mix-n { font-weight:700; font-variant-numeric:tabular-nums; }
.rk-scope .rk-mix-track {
  display:flex; height:8px; border-radius:4px; overflow:hidden; margin-top:6px;
  background:var(--plane, rgba(127,127,127,0.15));
}
.rk-scope .rk-mix-seg { height:100%; }

/* ── the trend chart's legend ──────────────────────────────────────────── */
.rk-scope .rk-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:0.74rem; color:var(--text-secondary); }
.rk-scope .rk-legend i {
  display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;
}

/* ── phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .rk-scope .rk-value { font-size:1.35rem; }
  .rk-scope .rk-exposure { font-size:1.6rem; }
  /* The trend SVG carries its own min-width and scrolls inside .cscroll, like every other
     chart in this app — squashing it would make the bars meaningless. */
}

/* Three file inputs stacked in the source pane, so each one still names its own model. */
.src-drop-sm { padding:12px 14px; margin-bottom:8px; }
.src-drop-sm .src-drop-icon { font-size:20px; }