/* ═══════════════════════════════════════════════════════════
   ENERLYTIK BRAND TOKENS — canonical design system (single source of truth)
   Source-of-truth: docs/ENERLYTIK_BRAND_TOKENS.md (2026-06-13)
   Loaded by the portal pages via /assets/enerlytik-tokens.css
   SP-C1 (2026-06-29): unified the 3 token systems into this one file.
     - Brand orange = #E8500A everywhere (was #f97316 in enerlytik_v4 inline).
     - Both light + dark defined here via [data-theme]; dark base = navy #0A1628.
     - Defines BOTH naming schemes so every surface inherits from one place:
         canonical  : --bg-primary / --bg-card / --text-primary / --status-*
         v4 scheme  : --bg / --card / --text / --accent / --orange / --fd …
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;800&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

/* ─── Theme-agnostic: brand accent, signal/status colours, fonts ──────────────
   These are identical in light + dark, so they live in a plain :root. */
:root {
  /* Brand accent — Magma orange, same in both themes */
  --accent:        #E8500A;
  --accent-hover:  #c94008;
  --accent-g:      rgba(232,80,10,0.08);
  --orange:        #E8500A;   /* v4-scheme brand alias (was #f97316) */

  /* Signal colours (data-display only — never UI chrome) */
  --teal:   #1D9E75; --teal-g:   rgba(29,158,117,0.10);
  --amber:  #EF9F27; --amber-g:  rgba(239,159,39,0.08);
  --red:    #E24B4A; --red-g:    rgba(226,75,74,0.08);
  --purple: #7F77DD; --purple-g: rgba(127,119,221,0.08);
  --blue:   #378ADD; --blue-g:   rgba(55,138,221,0.08);
  --green:  #1D9E75;

  /* Status scale — canonical names + v4 aliases (consistent across both modes) */
  --status-prime:   #16A34A;
  --status-stable:  #22C55E;
  --status-watch:   #F59E0B;
  --status-stressed:#F97316;
  --status-critical:#EF4444;
  --prime:   #14b8a6;
  --stable:  #22c55e;
  --watch:   #f59e0b;
  --stressed:#f97316;
  --critical:#ef4444;

  /* Fonts — canonical names + v4 aliases */
  --font-display:'Outfit', sans-serif;
  --font-body:   'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;
  --fd:'Outfit', sans-serif;
  --fb:'DM Sans', sans-serif;
  --fm:'DM Mono','Fira Code', monospace;
}

/* ─── DARK (default) — navy base #0A1628 ─────────────────────────────────────
   :root also carries dark so pages that never set data-theme still get dark. */
:root,
[data-theme="dark"] {
  /* canonical */
  --bg-primary:   #0A1628;
  --bg-secondary: #0d1f3c;
  --bg-card:      #111e35;
  --text-primary: #FFFFFF;
  --text-muted:   #8A9BB0;
  --text-label:   #6B7A90;
  --border:       rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.15);
  --surface-light:#F5F2EC;

  /* v4 scheme (mapped onto the navy palette) */
  --bg:#0A1628; --bg2:#0d1f3c; --bg3:#111e35; --bg4:#16243B;
  --card:#111e35; --card2:#16243B; --light:#1b2a44;
  --text:#c8d2e0; --text2:#8A9BB0; --text3:#5a6b82;
  --text-strong:#ffffff; --muted:#8a9bb0;
  --border2:rgba(255,255,255,0.14);
  --nav:#0A1628; --nav-text:#8A9BB0;
  --input-bg:#0d1f3c; --input-border:rgba(255,255,255,0.14);
  --skeleton:rgba(255,255,255,0.04);
  --row-hover:rgba(255,255,255,0.03);
  --scanline:rgba(0,0,0,.03);
}

/* ─── LIGHT — cream surfaces / navy ink ──────────────────────────────────────*/
[data-theme="light"] {
  /* canonical */
  --bg-primary:   #F5F2EC;
  --bg-secondary: #ECEAE4;
  --bg-card:      #FFFFFF;
  --text-primary: #0A1628;
  --text-muted:   #4A5568;
  --text-label:   #6B7A90;
  --border:       rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.15);

  /* v4 scheme */
  --bg:#F5F0E8; --bg2:#FDFAF5; --bg3:#EEEAE0; --bg4:#E4DFD3;
  --card:#FDFAF5; --card2:#F9F4EC; --light:#F5F0E8;
  --text:#0A1628; --text2:#52525b; --text3:#888895;
  --text-strong:#0A1628; --muted:#52525b;
  --border2:rgba(120,100,75,0.22);
  --nav:#0A1628; --nav-text:#cbd5e1;
  --input-bg:#F5F0E8; --input-border:rgba(120,100,75,0.22);
  --skeleton:rgba(0,0,0,0.04);
  --row-hover:rgba(120,100,75,0.05);
  --scanline:transparent;
}

/* ─── Unified nav (applied to all portal pages) ────────────────────────────
   Override existing nav/topbar backgrounds so every page has the same
   dark-navy header regardless of its own page-level theme. */
.topbar,
.enerlytik-nav,
nav.site-nav,
#shared-nav,
.shared-nav-bar {
  background: #0A1628 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Shared nav bar helper classes */
.shared-nav-bar {
  color: var(--text-primary, #fff);
  font-family: var(--font-body, 'DM Sans', sans-serif);
}
.ely-nav-btn {
  background: var(--accent, #E8500A);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 14px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.ely-nav-btn:hover {
  background: var(--accent-hover, #c94008);
}

/* Wordmark always orange regardless of page theme */
.logo em,
.tb-logo,
.site-wordmark,
.enerlytik-wordmark {
  color: #E8500A !important;
  font-family: 'Outfit', sans-serif !important;
}

/* ─── Enerlyst panel trigger button ──────────────────────────────────────── */
#enerlyst-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #E8500A;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(232,80,10,0.35);
  transition: box-shadow 0.2s ease, background 0.15s ease;
}
#enerlyst-nav-btn:hover {
  background: #c94008;
  box-shadow: 0 4px 16px rgba(232,80,10,0.55);
}
#enerlyst-nav-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
}

/* Theme toggle — canonical style across all pages */
.et-theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #8A9BB0;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.et-theme-toggle:hover {
  border-color: #E8500A;
  color: #E8500A;
}

/* ═══ Sprint C-Mobile: shared responsive rules ══════════════════════════════
   Desktop layout UNCHANGED — every rule is breakpoint-scoped.
   Breakpoints: 768px (tablet/wide-phone) · 480px (narrow phone).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 768px — topbar compression */
@media (max-width: 768px) {
  .topbar { padding: 0 10px; }
  .shared-nav-bar { padding: 0 10px; }
}

/* 480px — narrow phone */
@media (max-width: 480px) {
  /* Surface spine / sub-tab bars: horizontal-scroll strip (no wrap) */
  .surface-bar,
  .spine-bar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    /* Prevent bar itself from shrinking away */
    flex-shrink: 0 !important;
  }
  .surf-btn {
    padding: 10px 12px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .surf-btn svg { width: 18px; height: 18px; min-width: 18px; }
  /* Spine separators stay visible but don't grow */
  .spine-sep { flex-shrink: 0; }

  /* Enerlyst chat panel: full-screen on phone
     (!important needed to override the 340px inline style set by enerlyst-panel.js) */
  #ely-panel {
    top: 0 !important;
    width: 100% !important;
    right: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
  }

  /* Topbar KPI strip: too cramped on 390px, hide it */
  .tb-kpi { display: none !important; }
}