/* ============================================================================
   Control Tower — layout
   Manager dashboard: aggregation first. A KPI strip of big expressive numbers,
   then a "needs attention" rank, a pipeline funnel, machine load and delivering-
   soon — composed from sds-card panels on a 2/1 grid. Brand-restrained: neutral
   surfaces and bars; colour appears only where it's a real alarm (at-risk KPI,
   crit/warn rank markers, an over-loaded machine). One primary CTA.
   ========================================================================== */

/* ---- App grid + rail + pagehead (shared shell) -------------------------- */
.app { display: grid; grid-template-columns: 224px 1fr; min-height: calc(100vh - 34px); }
.rail {
  border-right: 1px solid var(--sds-color-border); background: var(--sds-color-surface);
  position: sticky; top: 34px; height: calc(100vh - 34px);
  display: flex; flex-direction: column; padding: var(--sds-space-400) var(--sds-space-300);
  gap: var(--sds-space-200); overflow: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: var(--sds-space-200) var(--sds-space-200) var(--sds-space-300); }
.brand sds-logo { --sds-logo-height: 22px; height: 22px; display: inline-flex; }
.brand .product { font-family: var(--sds-font-family-headline); font-weight: var(--sds-font-weight-bold); font-size: 16px; letter-spacing: .01em; }
.brand .product .sub { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); }
.rail sds-sidenav { width: 100%; }

.main { min-width: 0; display: flex; flex-direction: column; }
.pagehead {
  display: flex; align-items: flex-end; gap: var(--sds-space-400);
  padding: var(--sds-space-500) var(--sds-space-600) var(--sds-space-400);
  border-bottom: 1px solid var(--sds-color-border);
}
.pagehead .title { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-4-size); line-height: var(--sds-type-headline-4-line); font-weight: var(--sds-type-headline-4-weight); margin: 0; }
.pagehead .sub { color: var(--sds-color-text-muted); font-size: var(--sds-type-body-small-size); margin-top: var(--sds-space-100); }
.pagehead .actions { margin-left: auto; display: flex; align-items: center; gap: var(--sds-space-200); }

.viewseg {
  display: inline-flex; gap: 2px; margin: var(--sds-space-400) var(--sds-space-600) 0;
  padding: 3px; align-self: flex-start; background: var(--sds-color-surface-strong);
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-pill);
}
.viewseg .seg { font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text-muted); padding: 6px 14px; border-radius: var(--sds-radius-pill); cursor: pointer; white-space: nowrap; }
.viewseg a.seg:hover { color: var(--sds-color-text); background: var(--sds-color-surface-hover); }
.viewseg .seg.on { background: var(--sds-color-surface); color: var(--sds-color-text); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* ---- Dashboard --------------------------------------------------------- */
.dash { padding: var(--sds-space-500) var(--sds-space-600) var(--sds-space-700); display: grid; gap: var(--sds-space-600); }

/* KPI strip — big expressive numbers */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sds-space-400); }
.kpi {
  border: 1px solid var(--sds-color-border); border-radius: var(--sds-radius-l);
  background: var(--sds-color-surface); padding: var(--sds-space-400) var(--sds-space-400) var(--sds-space-300);
}
.kpi .kv { font-family: var(--sds-font-family-headline); font-weight: 300; font-size: var(--sds-type-headline-1-size); line-height: 1; letter-spacing: -.02em; }
.kpi .kv.warn { color: var(--sds-color-warning); }
.kpi .kl { margin-top: var(--sds-space-200); font-size: var(--sds-type-body-small-size); color: var(--sds-color-text-muted); }
/* the one alarm tile: a restrained error accent, not a fill */
.kpi.alert { box-shadow: inset 3px 0 0 var(--sds-color-error); }
.kpi.alert .kv { color: var(--sds-color-error); }

/* panel grid: 2/1 rhythm */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sds-space-400); align-items: start; }
.panel { --sds-card-corner-radius: var(--sds-radius-l); display: block; }
.panel.span2 { grid-column: span 2; }
.panel-in { display: grid; gap: var(--sds-space-300); }
.ph { display: flex; align-items: baseline; gap: var(--sds-space-300); }
.ph h2 { font-family: var(--sds-font-family-headline); font-size: var(--sds-type-headline-5-size); margin: 0; }
.ph .pmeta { font-size: var(--sds-type-footnote-size); color: var(--sds-color-text-muted); margin-left: auto; }

/* needs-attention rank */
.risk { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--sds-color-border); border-radius: var(--sds-radius-m); overflow: hidden; }
.risk li { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: var(--sds-space-300); padding: var(--sds-space-300) var(--sds-space-400); background: var(--sds-color-surface); }
.risk .when { font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); color: var(--sds-color-text-muted); }
.risk .when.crit { color: var(--sds-color-error); }
.risk .when.warn { color: var(--sds-color-warning); }
.risk .rn { font-weight: var(--sds-font-weight-bold); font-size: var(--sds-type-body-small-size); }
.risk .rid { color: var(--sds-color-text-muted); font-weight: var(--sds-font-weight-regular); font-size: var(--sds-type-footnote-size); margin-left: 6px; }
.risk .rs { font-size: var(--sds-type-footnote-size); margin-top: 2px; }

/* pipeline funnel — neutral bars */
.funnel, .load, .soon { list-style: none; margin: 0; padding: 0; }
.funnel li { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: var(--sds-space-300); padding: var(--sds-space-200) 0; }
.funnel .fl { font-size: var(--sds-type-body-small-size); }
.fbar { height: 8px; border-radius: var(--sds-radius-pill); background: var(--sds-color-surface-strong); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--sds-color-text); opacity: .55; border-radius: var(--sds-radius-pill); }
.funnel b { font-variant-numeric: tabular-nums; font-weight: var(--sds-font-weight-bold); }

/* machine load */
.load li { display: grid; grid-template-columns: 160px 1fr 28px 64px; align-items: center; gap: var(--sds-space-300); padding: var(--sds-space-300) 0; border-top: 1px solid var(--sds-color-border); }
.load li:first-child { border-top: 0; }
.load .ml { font-size: var(--sds-type-body-small-size); font-weight: var(--sds-font-weight-bold); }
.lbar { height: 8px; border-radius: var(--sds-radius-pill); background: var(--sds-color-surface-strong); overflow: hidden; }
.lbar i { display: block; height: 100%; background: var(--sds-color-text); opacity: .6; border-radius: var(--sds-radius-pill); }
.lbar i.urgent { background: var(--sds-color-error); opacity: 1; }
.load .lc { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--sds-font-weight-bold); }
.load .lstate { font-size: var(--sds-type-footnote-size); text-align: right; color: var(--sds-color-text-muted); }
.load .lstate.run { color: var(--sds-color-success); }

/* delivering soon */
.soon li { display: flex; align-items: baseline; gap: var(--sds-space-300); padding: var(--sds-space-300) 0; border-top: 1px solid var(--sds-color-border); font-size: var(--sds-type-body-small-size); }
.soon li:first-child { border-top: 0; }
.soon .d { flex: none; width: 54px; font-weight: var(--sds-font-weight-bold); font-variant-numeric: tabular-nums; }
.soon .c { margin-left: auto; font-size: var(--sds-type-footnote-size); }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
  .panel.span2 { grid-column: auto; }
}
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .rail { display: none; } }