/* styles/platform.css — platform dashboard (super admin). Order in VulnerabilityCore.html is the cascade order. */

/* ================================================== platform dashboard (super admin)
   The estate view. Deliberately built from the SAME parts as Administration - the card,
   the inset panel, the 3px rail, the chip recipe - because it is the other half of one
   job, not a second product. Nothing here borrows the severity ramp: none of these
   numbers is a CVE, and spending --sev-critical on "no company admin" would put a
   tenant's onboarding on the same scale as a remote code execution. */

/* The stat strip, matching the tenant Overview's so the two read as siblings. */
.plat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.plat-stat {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 22px;
  border-left: 1px solid var(--line);
}
.plat-stat:first-child { padding-left: 0; border-left: none; }
.plat-stat b {
  font: 700 22px/1 var(--font-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plat-stat b.is-warn { color: color-mix(in oklab, var(--st-prog) 72%, var(--text)); }
.plat-stat-when { font-size: 17px !important; }
.plat-stat span { font: 12.5px/1.2 var(--font); color: var(--text-dim); }

.plat-queue { margin-bottom: 18px; }
.plat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 18px;
  align-items: start;
}

/* ---- the attention queue ----
   One row per thing to do. The rail carries the rank and the row is a button, because
   every one of these ends in the same place: Administration, with that tenant in view. */
.plat-issues {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  --pc: var(--text-faint);
}
.plat-issue {
  display: grid;
  grid-template-columns: 12px 200px 190px 1fr 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 14px 9px 11px;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 0 var(--pc);
  transition: background 0.1s;
}
.plat-issue:first-child { border-top: none; }
.plat-issue:hover { background: var(--surface-2); }
.plat-issue:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Operational impact, not CVE severity: amber blocks the tenant, indigo is a silent
   fault, grey is a nudge. Kept off the severity ramp on purpose. */
.plat-issue.is-crit { --pc: color-mix(in oklab, var(--st-prog) 72%, var(--text)); }
.plat-issue.is-warn { --pc: var(--focus); }
.plat-issue.is-info { --pc: var(--text-faint); }
.plat-issue-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 7px color-mix(in oklab, var(--pc) 60%, transparent);
}
.plat-issue-co {
  font: 600 13px/1.3 var(--font);
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plat-issue-kind {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 5px;
  font: 600 10px/1.5 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pc);
  background: color-mix(in oklab, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--pc) 24%, transparent);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plat-issue-detail {
  min-width: 0;
  font: 12px/1.35 var(--font);
  color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plat-issue-go { color: var(--text-faint); opacity: 0.5; }
.plat-issue:hover .plat-issue-go { opacity: 1; }
.plat-pending {
  display: flex; align-items: center; gap: 9px;
  margin: 11px 0 0;
  font: 12px/1.4 var(--font);
  color: var(--text-faint);
}

/* ---- proportion bars: a share of a small total, where a donut would over-dress it ---- */
.plat-bars { display: flex; flex-direction: column; gap: 9px; }
.plat-bar {
  display: grid;
  grid-template-columns: 116px 1fr 34px;
  align-items: center;
  gap: 12px;
}
.plat-bar-lab { font: 12.5px/1.3 var(--font); color: var(--text-dim); }
.plat-bar-track {
  height: 7px;
  border-radius: 4px;
  background: var(--bg);
  overflow: hidden;
}
.plat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--focus);
  min-width: 3px;
}
.plat-bar-num {
  text-align: right;
  font: 600 12.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ---- roll-up chips, one recipe with the role/verify/severity pills ---- */
.plat-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.plat-chip {
  --pc: var(--text-faint);
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  font: 12px/1.3 var(--font);
  color: var(--text-dim);
  background: color-mix(in oklab, var(--pc) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--pc) 24%, transparent);
}
.plat-chip b {
  font: 700 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklab, var(--pc) 72%, var(--text));
}
.plat-chip.is-ok  { --pc: var(--st-done); }
.plat-chip.is-off { --pc: var(--st-prog); }
.plat-chip.is-bad { --pc: var(--sev-critical); }

.plat-counts { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.plat-count { display: flex; flex-direction: column; gap: 2px; }
.plat-count b {
  font: 700 20px/1 var(--font-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.plat-count span { font: 11.5px/1.2 var(--font); color: var(--text-faint); }

.plat-quiet {
  margin: 12px 0 0;
  font: 12px/1.55 var(--font);
  color: var(--text-dim);
  max-width: 68ch;
}
.plat-quiet code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
/* The card that says what it cannot show. Dashed, because it is a placeholder for work
   not done - it must not look like a finished panel that happens to be empty. */
.plat-gap { border: 1px dashed var(--line-2); }

/* A smaller segmented control for the topbar, where 44px would tower over the row. */
.seg-sm .seg-btn { padding: 5px 10px; font-size: 12px; gap: 6px; }

@media (max-width: 1100px) {
  .plat-issue { grid-template-columns: 12px 170px 1fr 14px; }
  .plat-issue-detail { display: none; }
}
@media (max-width: 700px) {
  .plat-issue { grid-template-columns: 12px 1fr 14px; }
  .plat-issue-kind { display: none; }
  .plat-stat { padding: 0 14px; }
}