/* ==========================================================================
   D12 · Keel Console  (pages/console.html)
   --------------------------------------------------------------------------
   White-label: console.js overrides the --w-* tokens (and --brand-radius) on
   .console, so everything inside follows the selected brand preset.
   ========================================================================== */

.console {
  --brand-radius: 0 0 8px 8px;
}

.console__layout {
  display: grid;
  grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--w-canvas);
  color: var(--w-text);
  font-size: 14px;
}

/* Sidebar ------------------------------------------------------------------ */

.console-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  /* bottom padding keeps the theme switch clear of the fixed .ward-pill */
  padding: 18px 12px 72px;
  border-right: 1px solid var(--w-line);
  background: var(--w-surface-1);
}

.console-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font: 600 17px var(--w-sans);
}

.console-brand__mark {
  width: 16px;
  height: 16px;
  border-radius: var(--brand-radius);
  background: var(--w-action);
}

.console-brand__suffix {
  font: 400 10px var(--w-mono);
  color: var(--w-text-3);
}

.console-nav__tabs {
  display: grid;
  gap: 2px;
}

.console-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--w-text-2);
  font: 400 14px var(--w-sans);
  text-align: left;
}

.console-tab:hover {
  color: var(--w-text);
}

.console-tab[aria-current="page"] {
  background: var(--w-surface-3);
  color: var(--w-text);
}

.console-tab__badge {
  font: 11px var(--w-mono);
  color: var(--w-text-3);
}

.console-tab__badge--action {
  color: var(--w-action);
}

.console-nav__soc {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid var(--w-line);
  border-radius: 4px;
  font: 12px var(--w-mono);
  color: var(--w-text-2);
}

.console-nav__soc-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-nav__hotline,
.console-nav__hotline:hover {
  color: var(--w-emergency-text);
}

.console-nav__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.console-nav__dot--ok        { background: var(--w-ok); }
.console-nav__dot--emergency { background: var(--w-emergency); }

.console-nav__theme {
  display: grid;
  gap: 6px;
  padding: 0 4px;
}

.console-nav__theme-label {
  font: 10px var(--w-mono);
  color: var(--w-text-3);
}

.console-nav__theme-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--w-line-2);
  border-radius: 4px;
}

.console-nav__theme-option {
  height: 30px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--w-text-2);
  font: 500 12px var(--w-sans);
}

.console-nav__theme-option[aria-checked="true"] {
  background: var(--w-surface-3);
  color: var(--w-text);
}

/* Main column + page head --------------------------------------------------- */

.console-main {
  min-width: 0;
  padding: 24px clamp(16px, 2.4vw, 32px) 80px;
}

.console-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.console-head__crumb {
  margin-bottom: 4px;
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

.console-head__title {
  font: 300 28px/1.15 var(--w-sans);
  letter-spacing: -.02em;
}

.console-head__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.console-head__search {
  padding: 6px 10px;
  border: 1px solid var(--w-line-2);
  border-radius: 4px;
  font: 12px var(--w-mono);
  color: var(--w-text-2);
}

.console-head__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--w-surface-3);
  font: 500 12px var(--w-sans);
}

/* Shared: panel grids, cards, tables --------------------------------------- */

.console-grid {
  --min: 380px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
  gap: 16px;
  align-items: start;
}

.console-grid--300 { --min: 300px; }
.console-grid--380 { --min: 380px; align-items: stretch; }
.console-grid--400 { --min: 400px; }
.console-grid--420 { --min: 420px; }

.console-grid--spaced {
  margin-bottom: 16px;
}

.card {
  border: 1px solid var(--w-line-2);
  border-radius: 4px;
  background: var(--w-surface-1);
}

.card--action {
  border-color: var(--w-action-line);
}

.card--scroll {
  overflow-x: auto;
}

.card__head {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--w-line);
  font: 12px var(--w-mono);
  color: var(--w-text-2);
}

.card__title {
  color: var(--w-text);
}

.ctable {
  width: 100%;
  border-collapse: collapse;
  font: 13px var(--w-mono);
}

.ctable--560 { min-width: 560px; }
.ctable--600 { min-width: 600px; }
.ctable--640 { min-width: 640px; }

.ctable--sans {
  font-family: var(--w-sans);
}

.ctable th {
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--w-line);
  font: 400 11px var(--w-mono);
  color: var(--w-text-3);
  text-align: left;
}

.ctable td {
  padding: 0 12px;
  border-bottom: 1px solid var(--w-line);
}

.ctable tbody tr {
  height: 36px;
}

.ctable--tall tbody tr {
  height: 38px;
}

.ctable__sans {
  font-family: var(--w-sans);
}

.ctable__sev {
  color: var(--sev);
}

/* Overview · KPIs ---------------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--w-line-2);
  border-radius: 4px;
  background: var(--w-line);
}

.kpis__item {
  padding: 16px;
  background: var(--w-surface-1);
}

.kpis__key {
  margin-bottom: 8px;
  font: 11px var(--w-mono);
  color: var(--w-text-3);
}

.kpis__value {
  font: 400 26px var(--w-mono);
}

.kpis__sub {
  margin-top: 6px;
  font: 12px var(--w-sans);
  color: var(--w-text-2);
}

/* Overview · Needs review + alert volume ---------------------------------- */

.review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--w-line);
}

.review__title {
  display: block;
  font: 500 14px var(--w-sans);
}

.review__meta {
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

.volume {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 168px;
  padding: 14px;
}

.volume__bar {
  flex: 1;
  height: var(--h);
  border-radius: 1px;
  background: var(--w-action);
  opacity: .7;
}

/* Alerts · queue + detail --------------------------------------------------- */

.ctable--560 thead {
  position: sticky;
  top: 0;
  background: var(--w-surface-1);
}

.ctable__row {
  cursor: pointer;
}

.ctable__row:hover {
  background: var(--w-surface-2);
}

.ctable__row[aria-selected="true"] {
  background: var(--w-surface-3);
}

/* Small severity label: diamond + text in the severity color */
.csev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sev);
}

.csev::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--sev);
  transform: rotate(45deg);
}

.alert-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.alert-detail__title {
  font: 400 18px/1.3 var(--w-sans);
}

.alert-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font: 13px var(--w-mono);
}

.alert-detail__facts dt {
  color: var(--w-text-3);
}

.alert-detail__note {
  padding: 12px;
  border-radius: 4px;
  background: var(--w-surface-2);
  font: 14px/1.5 var(--w-sans);
  color: var(--w-text-2);
}

/* Incident · timeline + audit log ----------------------------------------- */

.inc-timeline {
  padding: 16px 16px 4px 28px;
}

.inc-timeline__item {
  --c: var(--w-text-2);
  position: relative;
  padding: 0 0 16px 16px;
  border-left: 1px solid var(--w-line-2);
}

.inc-timeline__item--key {
  --c: var(--w-action);
}

.inc-timeline__item::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
}

.inc-timeline__t {
  display: block;
  font: 500 13px var(--w-mono);
  color: var(--c);
}

.inc-timeline__text {
  font: 14px/1.5 var(--w-sans);
}

.ctable--audit {
  min-width: 420px;
  font-size: 12px;
}

.ctable--audit tbody tr {
  height: 32px;
}

.ctable--audit td {
  padding: 0 14px;
}

.ctable--audit td:first-child {
  white-space: nowrap;
}

/* Vulnerabilities · aging chart ------------------------------------------- */

.aging {
  padding: 14px;
}

.aging__title {
  margin-bottom: 14px;
  font: 12px var(--w-mono);
}

.aging__rows {
  display: grid;
  gap: 10px;
}

.aging__row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  gap: 10px;
  align-items: center;
  font: 12px var(--w-mono);
}

.aging__key {
  color: var(--sev);
}

.aging__track {
  display: flex;
  height: 14px;
  background: rgba(230, 234, 237, .05);
}

.aging__seg {
  width: var(--w);
  background: var(--sev);
}

.aging__seg:nth-child(2) { opacity: .55; }
.aging__seg:nth-child(3) { opacity: .3; }

.aging__count {
  text-align: right;
}

.aging__legend {
  margin-top: 12px;
  font: 11px var(--w-mono);
  color: var(--w-text-3);
}

/* Users · MFA state ---------------------------------------------------------- */

.mfa {
  --c: var(--w-ok);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 12px var(--w-mono);
  color: var(--c);
}

.mfa::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}

.mfa--missing {
  --c: var(--w-warn);
}

/* Phones: stack the sidebar above the content (the original two-column grid
   left ~150px for the content and overflowed horizontally) ---------------- */

@media (max-width: 720px) {
  .console__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .console-nav {
    position: static;
    height: auto;
    padding-bottom: 18px;
    border-right: 0;
    border-bottom: 1px solid var(--w-line);
  }
}