/* ============================================================
   Panel — base reusable container with header / body / footer
   ============================================================ */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.panel__header {
  background: var(--bg-panel-alt);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-amber);
  font-weight: 600;
  flex: 0 0 auto;
}
.panel__header .panel__meta {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.panel__body {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}
.panel__footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-5);
  font-size: var(--fs-xxs);
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
}

/* ============================================================
   App Header
   ============================================================ */
.app-header {
  background: var(--bg-header);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
}
.app-header__brand {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-amber);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.app-header__brand::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent-amber);
}
.app-header__clock {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.app-header__clock .date { color: var(--text-secondary); letter-spacing: 0.08em; }
.app-header__clock .time { color: var(--text-primary); font-weight: 600; }
.app-header__clock .sep { color: var(--text-muted); }

/* ============================================================
   Ticker bar
   ============================================================ */
.ticker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.7fr;
  gap: var(--gap);
}
.ticker__tile {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.ticker__tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: var(--accent-amber-dim);
}
.ticker__label {
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 600;
}
.ticker__value-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.ticker__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xxl);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ticker__unit {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 400;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.ticker__meta {
  font-size: var(--fs-xxs);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* OD/UD composite tile */
.ticker__composite {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  gap: var(--sp-4);
  align-items: end;
  flex: 1 1 auto;
}
.ticker__composite .op {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  color: var(--text-muted);
  padding-bottom: 2px;
  font-weight: 400;
}
.ticker__composite .cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ticker__composite .cell .lbl {
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label);
  font-weight: 600;
}
.ticker__composite .cell .val {
  font-family: var(--font-mono);
  font-size: var(--fs-xxl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ticker__composite .cell .val.neg { color: var(--accent-cyan); }
.ticker__composite .cell .val.pos { color: var(--accent-amber); }
.ticker__composite .cell .val-with-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.ticker__composite .cell .tag {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.ticker__composite .cell .tag.neg { color: var(--accent-cyan); }
.ticker__composite .cell .tag.pos { color: var(--accent-amber); }

/* ============================================================
   Chart panel body — uPlot manages its own canvas sizing
   ============================================================ */
.chart-body {
  /* No padding here — uPlot's canvas dimensions must match the container's
     content box exactly, otherwise cursor positions don't align with the line.
     Visual breathing comes from uPlot's own axis margins. */
  padding: 0;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* uPlot theme overrides — dark-on-dark */
.uplot,
.u-title,
.u-legend,
.u-tooltip {
  font-family: var(--font-mono) !important;
  color: var(--text-secondary);
}
.u-cursor-pt {
  border-color: var(--bg-page) !important;
}
.u-select {
  background: rgba(95, 179, 240, 0.15);
}

/* Panel meta — error state */
.panel__meta.is-error {
  color: var(--accent-red);
}

/* Panel-level empty state (snapshot fetch failed, etc.) */
.panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--sp-6);
  color: var(--text-muted);
  text-align: center;
}
.panel-empty__title {
  font-size: var(--fs-sm);
  color: var(--accent-yellow);
  margin-bottom: var(--sp-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.panel-empty__hint {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}

/* Non-fatal warning banner (e.g. partial snapshot failure) */
.warning-banner {
  background: var(--bg-panel-alt);
  border: 1px solid var(--accent-yellow);
  border-left-width: 4px;
  color: var(--text-secondary);
  padding: var(--sp-3) var(--sp-5);
  margin: 0 var(--gap) var(--gap);
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.warning-banner__title {
  color: var(--accent-yellow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.warning-banner__body {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  flex: 1 1 auto;
}
.warning-banner__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--fs-lg);
  line-height: 1;
  padding: 0 var(--sp-2);
}
.warning-banner__close:hover { color: var(--text-primary); }

/* Quality dot */
.q-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--quality-ok);
  vertical-align: middle;
}
.q-dot--suspect { background: var(--quality-suspect); }
.q-dot--bad { background: var(--quality-bad); }

/* ============================================================
   Generation section — single column-stream filling the panel
   ============================================================ */
.gen-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Column-flow container for the entire generation tree */
.gen-stream {
  flex: 1 1 auto;
  min-height: 0;
  column-width: 175px;
  column-gap: var(--sp-5);
  column-fill: balance;
  padding: 0 var(--sp-5) var(--sp-3);
  overflow: hidden;
}

/* ───── Section header (Hydro / Thermal / IPP / RES) — spans all cols ───── */
.gen-section__head {
  column-span: all;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-strong);
}
.gen-section__name {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-amber);
  font-weight: 700;
}
.gen-section__cap {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.gen-section__cap::before { content: "cap "; opacity: 0.6; }
.gen-section__dots {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  min-width: 8px;
}
.gen-section__val {
  flex: 0 0 auto;
  font-size: var(--fs-md);
  font-family: var(--font-mono);
  color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* SUSPECT flag from API is no longer surfaced visually — neutral color */
.gen-section__val .unit-suffix {
  font-size: var(--fs-xxs);
  color: var(--accent-amber-dim);
  margin-left: 2px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.gen-section__util {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 600;
  min-width: 32px;
  text-align: right;
}

/* ───── Station block — never splits across columns ───── */
.gen-station {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  display: block;
}

.gen-station__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.gen-station__name {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  font-weight: 700;
  white-space: nowrap;
}
.gen-station__cap {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 400;
}
.gen-station__dots {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3px;
  min-width: 4px;
}
.gen-station__val {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--accent-cyan);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.gen-station__util {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}
/* SUSPECT flag intentionally not surfaced visually on stations */

.gen-station.is-leaf { margin-bottom: var(--sp-2); }

/* Forces a station to start in a new CSS column (used for manual Hydro layout) */
.gen-station.col-break {
  break-before: column;
  -webkit-column-break-before: column;
}

/* ───── Unit rows inside a station ───── */
.gen-station__units {
  padding-left: var(--sp-3);
}

.gen-unit {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  break-inside: avoid;
  line-height: 1.35;
}
.gen-unit__name {
  flex: 0 0 auto;
  color: var(--text-secondary);
  white-space: nowrap;
  font-size: var(--fs-xxs);
  letter-spacing: 0.04em;
}
.gen-unit__cap {
  flex: 0 0 auto;
  font-size: var(--fs-xxs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 400;
  opacity: 0.75;
}
.gen-unit__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--border);
  margin-bottom: 3px;
  min-width: 6px;
}
.gen-unit__val {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
}

.gen-unit.is-zero .gen-unit__name,
.gen-unit.is-zero .gen-unit__val,
.gen-unit.is-zero .gen-unit__cap { color: var(--text-muted); }
/* SUSPECT flag intentionally not surfaced visually on units */
.gen-unit.is-nodata .gen-unit__name,
.gen-unit.is-nodata .gen-unit__val {
  color: var(--text-muted);
  font-style: italic;
}

/* ───── Grand total — pinned at the bottom (outside the column flow) ───── */
.gen-total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-panel-alt);
  border-top: 2px solid var(--accent-amber);
}
.gen-total__name {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-amber);
  font-weight: 700;
}
.gen-total__cap {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 400;
}
.gen-total__cap::before { content: "cap "; opacity: 0.6; }
.gen-total__dots {
  flex: 1 1 auto;
  border-bottom: 1px solid var(--accent-amber-dim);
  margin-bottom: 6px;
  min-width: 8px;
}
.gen-total__val {
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  font-family: var(--font-mono);
  color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* SUSPECT flag intentionally not surfaced visually on grand total */
.gen-total__val .unit-suffix {
  font-size: var(--fs-xs);
  color: var(--accent-amber-dim);
  margin-left: 3px;
  font-weight: 400;
  letter-spacing: 0.04em;
}
.gen-total__util {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-family: var(--font-mono);
  color: var(--accent-amber);
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}