/* ==========================================================================
 * ARES-E Analytics Dashboard — Master Stylesheet
 * ==========================================================================
 *
 * PURPOSE:
 *   Provides the full visual design system for the ARES-E single-pane-of-glass
 *   analytics dashboard. Built mobile-first, with dark-theme defaults inspired
 *   by operational C2 (command & control) display aesthetics.
 *
 * ARCHITECTURE NOTES:
 *   - CSS Custom Properties (variables) centralize the color palette and
 *     spacing so a theme swap is a single-block edit.
 *   - BEM-lite naming: `.card`, `.card__title`, `.card--alert` etc.
 *   - Grid + Flexbox layout: the dashboard uses CSS Grid for the main canvas
 *     and Flexbox for internal widget alignment.
 *   - Responsive breakpoints: 1400px (3-col), 1024px (2-col), 768px (1-col).
 *
 * EDUCATIONAL TIP — CSS Custom Properties:
 *   Custom properties (`--var-name`) let you define reusable values.
 *   They cascade, meaning child elements inherit them from parents,
 *   AND you can override them in media queries or component scopes.
 *   Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/--*
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. DESIGN TOKENS — Color Palette, Typography, Spacing
 * --------------------------------------------------------------------------
 * All magic numbers live here. Change the theme by editing these variables.
 * EDUCATIONAL TIP: Separating tokens from usage is a best practice called
 * "design token architecture" — popular in design systems like Material UI.
 * -------------------------------------------------------------------------- */
:root {
  /* --- Background layers (darkest → lightest) --- */
  --bg-base:        #0a0e17;   /* Page background                        */
  --bg-surface:     #111827;   /* Card/widget background                  */
  --bg-surface-alt: #1a2235;   /* Slightly lighter surface for contrast   */
  --bg-hover:       #1f2937;   /* Hover state on interactive surfaces     */

  /* --- Text colors --- */
  --text-primary:   #e5e7eb;   /* Main body text                          */
  --text-secondary: #9ca3af;   /* Muted / supporting text                 */
  --text-dimmed:    #6b7280;   /* Timestamps, footnotes                   */

  /* --- Accent / brand colors --- */
  --accent-cyan:    #06b6d4;   /* Primary accent (ARES-E brand)           */
  --accent-blue:    #3b82f6;   /* Links, interactive elements             */
  --accent-indigo:  #6366f1;   /* Charts, secondary accent                */
  --accent-purple:  #8b5cf6;   /* PHIAK module branding                   */

  /* --- Semantic status colors --- */
  --status-ok:      #10b981;   /* Green — nominal / healthy               */
  --status-warn:    #f59e0b;   /* Amber — elevated / warning              */
  --status-alert:   #ef4444;   /* Red — critical / alert                  */
  --status-info:    #3b82f6;   /* Blue — informational                    */

  /* --- Module-specific accent colors --- */
  --ewis-color:     #facc15;   /* EWIS — Energy (gold/yellow)             */
  --woik-color:     #06b6d4;   /* WOIK — Water (cyan)                     */
  --phiak-color:    #a78bfa;   /* PHIAK — Health (lavender)               */

  /* --- Typography --- */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* --- Spacing scale (8px base) --- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* --- Border & Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --border-dim: 1px solid rgba(255, 255, 255, 0.06);
  --border-accent: 1px solid rgba(6, 182, 212, 0.3);

  /* --- Shadows --- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* --- Transitions --- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}


/* --------------------------------------------------------------------------
 * 2. RESET & BASE STYLES
 * --------------------------------------------------------------------------
 * Minimal reset. We use `box-sizing: border-box` globally so padding and
 * borders are included in element width calculations — essential for
 * predictable grid layouts.
 * -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;                /* Base size; rem units scale from here  */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
 * 3. LAYOUT — Top Bar + Main Grid
 * --------------------------------------------------------------------------
 * The dashboard is structured as:
 *   ┌─────────── Top Bar (fixed) ───────────┐
 *   ├───────────── KPI Strip ───────────────┤
 *   ├──────┬──────┬──────┬──────────────────┤
 *   │Chart │Chart │Chart │  Alert Panel     │
 *   │EWIS  │WOIK  │PHIAK │  (right rail)    │
 *   ├──────┴──────┴──────┤                  │
 *   │ Forecasting / LOE  │                  │
 *   └────────────────────┴──────────────────┘
 *
 * EDUCATIONAL TIP — CSS Grid:
 *   `grid-template-columns: repeat(auto-fit, minmax(360px, 1fr))` creates
 *   a responsive grid that auto-wraps without needing media queries.
 * -------------------------------------------------------------------------- */

/* --- Top navigation bar --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-6);
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-dim);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar__logo {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.05em;
}

.topbar__subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 0.8rem;
}

.topbar__clock {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

/* Pulse indicator for "live" status */
.pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--status-ok);
  font-weight: 600;
}
.pulse::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-ok);
  animation: pulse-ring 2s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* --- Main content wrapper --- */
.dashboard {
  max-width: 1680px;
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-6);
}

/* --- KPI strip (horizontal row of metric cards) --- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* --- Primary grid for charts & panels --- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 340px;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* --- Full-width section --- */
.grid-full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* --- Module row (EWIS / WOIK / PHIAK side by side) --- */
.module-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}


/* --------------------------------------------------------------------------
 * 4. CARD COMPONENT
 * --------------------------------------------------------------------------
 * Cards are the fundamental container for every dashboard widget.
 * Variants: --ewis, --woik, --phiak, --alert, --forecast
 *
 * EDUCATIONAL TIP — Component Composition:
 *   Instead of creating unique CSS for every widget, we compose widgets
 *   from a base `.card` class + modifier classes. This reduces duplication
 *   and keeps the stylesheet maintainable (DRY principle).
 * -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: var(--border-dim);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: var(--border-dim);
}

.card__title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.card__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.card__badge--ok      { background: rgba(16,185,129,0.15); color: var(--status-ok); }
.card__badge--warn    { background: rgba(245,158,11,0.15); color: var(--status-warn); }
.card__badge--alert   { background: rgba(239,68,68,0.15);  color: var(--status-alert); }
.card__badge--info    { background: rgba(59,130,246,0.15);  color: var(--status-info); }

/* Module accent borders (top stripe) */
.card--ewis  { border-top: 3px solid var(--ewis-color); }
.card--woik  { border-top: 3px solid var(--woik-color); }
.card--phiak { border-top: 3px solid var(--phiak-color); }
.card--loe   { border-top: 3px solid var(--accent-indigo); }

/* Alert panel styling */
.card--alerts {
  border-top: 3px solid var(--status-alert);
  max-height: 720px;
  overflow-y: auto;
}


/* --------------------------------------------------------------------------
 * 5. KPI METRIC CARD
 * --------------------------------------------------------------------------
 * A compact card showing a single key metric with trend indicator.
 * -------------------------------------------------------------------------- */
.kpi {
  background: var(--bg-surface);
  border: var(--border-dim);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dimmed);
}

.kpi__value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.kpi__trend {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.kpi__trend--up   { color: var(--status-ok); }
.kpi__trend--down { color: var(--status-alert); }
.kpi__trend--flat { color: var(--text-dimmed); }

/* Module-colored KPI accent */
.kpi--ewis  .kpi__value { color: var(--ewis-color); }
.kpi--woik  .kpi__value { color: var(--woik-color); }
.kpi--phiak .kpi__value { color: var(--phiak-color); }
.kpi--loe   .kpi__value { color: var(--accent-indigo); }


/* --------------------------------------------------------------------------
 * 6. CHART CONTAINERS
 * --------------------------------------------------------------------------
 * Chart.js needs a parent container with a defined height to render properly.
 * We use `position: relative` so Chart.js can absolutely position its canvas.
 *
 * EDUCATIONAL TIP — Chart.js Responsiveness:
 *   Chart.js uses its parent container dimensions for sizing. Always set
 *   a fixed or relative height on the wrapper element, never on the canvas.
 * -------------------------------------------------------------------------- */
.chart-wrap {
  position: relative;
  width: 100%;
  height: 220px;
}

.chart-wrap--tall {
  height: 300px;
}

.chart-wrap--short {
  height: 160px;
}


/* --------------------------------------------------------------------------
 * 7. ALERT LIST
 * --------------------------------------------------------------------------
 * Alert items in the right-rail panel. Each alert has a severity-colored
 * left border and timestamp.
 * -------------------------------------------------------------------------- */
.alert-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 600px;
  overflow-y: auto;
}

.alert-item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--bg-surface-alt);
  border-left: 3px solid var(--text-dimmed);
  font-size: 0.82rem;
  line-height: 1.4;
  animation: alert-slide-in 0.3s var(--ease-default);
}

@keyframes alert-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.alert-item--critical { border-left-color: var(--status-alert); }
.alert-item--warning  { border-left-color: var(--status-warn); }
.alert-item--info     { border-left-color: var(--status-info); }
.alert-item--ok       { border-left-color: var(--status-ok); }

.alert-item__time {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-dimmed);
  margin-bottom: 2px;
}

.alert-item__module {
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  margin-right: var(--sp-1);
}

.alert-item__module--ewis  { color: var(--ewis-color); }
.alert-item__module--woik  { color: var(--woik-color); }
.alert-item__module--phiak { color: var(--phiak-color); }


/* --------------------------------------------------------------------------
 * 8. GAUGE / METER
 * --------------------------------------------------------------------------
 * Simple horizontal gauge bar for KPIs that have a target range.
 * -------------------------------------------------------------------------- */
.gauge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.gauge__bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.gauge__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s var(--ease-default);
}

.gauge__fill--ok   { background: var(--status-ok); }
.gauge__fill--warn { background: var(--status-warn); }
.gauge__fill--alert { background: var(--status-alert); }

.gauge__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  min-width: 42px;
  text-align: right;
}


/* --------------------------------------------------------------------------
 * 9. LOE SCORECARD
 * --------------------------------------------------------------------------
 * Composite LOE benchmark results displayed as a scorecard widget.
 * -------------------------------------------------------------------------- */
.scorecard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.scorecard__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scorecard__metric-label {
  font-size: 0.72rem;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scorecard__metric-value {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-indigo);
}

.composite-score {
  text-align: center;
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border-top: var(--border-dim);
}

.composite-score__value {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.composite-score__label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}

.composite-score__grade {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-indigo);
}


/* --------------------------------------------------------------------------
 * 10. FORECAST PANEL
 * -------------------------------------------------------------------------- */
.forecast-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.forecast-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-2) var(--sp-2);
  border-bottom: var(--border-dim);
  font-size: 0.72rem;
}

.forecast-table td {
  padding: var(--sp-2);
  border-bottom: var(--border-dim);
  font-family: var(--font-mono);
}

.forecast-table tr:last-child td {
  border-bottom: none;
}


/* --------------------------------------------------------------------------
 * 11. SECTION HEADERS
 * -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--border-dim);
}

.section-header__icon {
  font-size: 1.4rem;
}

.section-header__title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.section-header__desc {
  font-size: 0.78rem;
  color: var(--text-dimmed);
  margin-left: auto;
}


/* --------------------------------------------------------------------------
 * 12. SIMULATION STATUS TABLE
 * -------------------------------------------------------------------------- */
.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.sim-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-2);
  border-bottom: var(--border-dim);
  font-size: 0.72rem;
}

.sim-table td {
  padding: var(--sp-2);
  border-bottom: var(--border-dim);
}

.sim-table tr:last-child td { border-bottom: none; }

.sim-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  font-size: 0.78rem;
}
.sim-status--pass { color: var(--status-ok); }
.sim-status--fail { color: var(--status-alert); }
.sim-status--run  { color: var(--status-warn); }


/* --------------------------------------------------------------------------
 * 13. FOOTER
 * -------------------------------------------------------------------------- */
.footer {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  font-size: 0.75rem;
  color: var(--text-dimmed);
  border-top: var(--border-dim);
}

.footer a {
  color: var(--accent-cyan);
}


/* --------------------------------------------------------------------------
 * 14. SCROLLBAR STYLING
 * --------------------------------------------------------------------------
 * Custom scrollbars for Chromium-based browsers to match the dark theme.
 * -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }


/* --------------------------------------------------------------------------
 * 15. RESPONSIVE BREAKPOINTS
 * --------------------------------------------------------------------------
 * EDUCATIONAL TIP — Mobile-First vs Desktop-First:
 *   We use desktop-first here because dashboards are primarily used on
 *   wide screens. We degrade gracefully to single-column on tablets/phones.
 *   For public-facing websites, mobile-first is generally preferred.
 * -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .grid > .card--alerts {
    grid-column: 1 / -1;
  }
  .module-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .module-row {
    grid-template-columns: 1fr;
  }
  .kpi-strip {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .topbar {
    flex-direction: column;
    gap: var(--sp-2);
    text-align: center;
  }
  .dashboard {
    padding: var(--sp-2) var(--sp-3);
  }
}

@media (max-width: 600px) {
  html { font-size: 12px; }
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
  .scorecard {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
 * 16. UTILITY CLASSES
 * --------------------------------------------------------------------------
 * Small helper classes for common one-off styling needs.
 * EDUCATIONAL TIP: Utility classes are a pattern popularized by Tailwind CSS.
 * They keep HTML expressive and reduce the need for single-use CSS rules.
 * -------------------------------------------------------------------------- */
.text-ok    { color: var(--status-ok); }
.text-warn  { color: var(--status-warn); }
.text-alert { color: var(--status-alert); }
.text-info  { color: var(--status-info); }
.text-dim   { color: var(--text-dimmed); }
.text-mono  { font-family: var(--font-mono); }
.text-sm    { font-size: 0.78rem; }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }