/* Dark-navy theme tokens, matching the SAGER Bot e-mail identity
   (header #061A40) adapted for a full-page control-room dashboard. */

:root {
  --bg-canvas: #061A40;
  --bg-surface: #0D2B5C;
  --bg-surface-raised: #123A73;
  --border-subtle: #1E4C8C;

  --text-primary: #FFFFFF;
  --text-secondary: #7FA6E0;
  --text-muted: #A9C2E8;

  --accent: #0D47A1;
  --success: #2E7D32;
  --error: #C62828;

  --source-eolica: #42A5F5;
  --source-solar: #FFB300;

  --font-base: 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
}

html, body {
  height: 100%;
  margin: 0;
  /* Executive/control-room view: the page itself never scrolls — every
     region below is sized to fit exactly within one viewport. */
  overflow: hidden;
}

body {
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-base);
}

/* Root shell: fixed-height rows (topbar/filters/KPIs) stacked above a
   content grid that absorbs all remaining vertical space. Sized with
   100vh (not %) so it doesn't depend on Dash's wrapper divs having an
   explicit height. */
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-6);
  gap: var(--space-3);
}

.app-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Rows that must keep their natural content height and never grow/shrink
   to absorb the flex container's leftover space (filters, KPI strip). */
.app-fixed-row {
  flex: 0 0 auto;
}

.app-content-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
}

.app-content-cell {
  min-height: 0;
  min-width: 0;
}

.grid-kpi-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: var(--space-3) var(--space-4);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  word-break: break-word;
  box-sizing: border-box;
}

.grid-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.grid-kpi-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--space-1) 0 0;
}

.grid-panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: var(--space-3);
  box-sizing: border-box;
}

/* Sizing behavior for panels that must fill a CSS grid cell exactly
   (the chart cards). Kept separate from .grid-panel: reusing height:100%
   on .grid-panel broke the filter bar, which also has that class but
   lives in a column flexbox (app-shell) where height:100% is read as
   flex-basis:100% and balloons the element. */
.chart-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-card .js-plotly-plot,
.chart-card .plot-container {
  flex: 1 1 auto;
  min-height: 0;
}

.grid-error-banner {
  background-color: var(--error);
  color: #FFFFFF;
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 13px;
}