/* ══════════════════════════════════════════
   DESIGN TOKENS — WWOF Brand System
   Dark navy shell + luminous gold accent
   Based on WWOF brand guidelines (wwof.com navy family)
   modular extract
══════════════════════════════════════════ */
:root{
  /* ── wwof.com public-site palette (master-template.css, Jun 2026) ──
     Use alongside internal PMS-468 tokens — portal chrome leans navy like
     the corporate site; app accent stays the enterprise gold (#B5880B). */
  --wwof-navy:        #253948;   /* --color-primary-workwear */
  --wwof-navy-deep:   #1a2b3c;   /* --color-dark-blue */
  --wwof-navy-footer: #091421;   /* footer / dark UI on wwof.com */
  --wwof-gold-web:    #d4af37;   /* --color-primary (marketing site) */
  --wwof-gold-soft:   #EAD5AF;   /* --color-primary-gold */
  --wwof-gray:        #6c757d;   /* --color-gray */
  --wwof-gray-light:  #e9ecef;   /* --color-light-gray */

  /* Brand accent base (overridden per theme below) */
  --accent-deep: #B5880B;

  /* Semantic — enterprise standard */
  --success: #2E7D32;
  --success-soft: rgba(46,125,50,.08);
  --warning: #C47F17;
  --warning-soft: rgba(196,127,23,.10);
  --danger: #B83230;
  --danger-soft: rgba(184,50,48,.08);
  --info: #2c6bed;
  --info-soft: rgba(44,107,237,.08);

  /* Status tokens — strict mapping */
  --status-pass: #2E7D32;
  --status-pending: #C47F17;
  --status-fail: #B83230;
  --status-info: #2c6bed;

  /* Semantic soft backgrounds — chip / pill / status fills.
     Single source so the ~1,567 inline chip hexes can later fold onto
     these (e.g. background:var(--success-fill)). Stronger (.12) than the
     .08 *-soft tokens used for hovers/rings so chip text stays legible. */
  --success-fill: rgba(46,125,50,.12);
  --warning-fill: rgba(196,127,23,.12);
  --danger-fill: rgba(184,50,48,.12);
  --info-fill: rgba(44,107,237,.12);
  --accent-fill: rgba(181, 136, 11, 0.12);
  --neutral-fill: rgba(44,48,52,.06);

  /* Focus ring — crisp, consistent across buttons/inputs/controls.
     Built from the accent so brand-correct on every surface. */
  --focus-ring: 0 0 0 3px var(--accent-soft);
  --focus-ring-w: 2px;

  /* Header chrome — wwof.com navy family */
  --chrome: var(--wwof-navy);
  --chrome-2: var(--wwof-navy-deep);
  --chrome-text: #e8e4dd;
  --chrome-muted: #9a958d;

  /* Elevation — defaults; dark theme deepens below */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 56px rgba(0, 0, 0, 0.22);

  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;

  --ease: cubic-bezier(.25,1,.5,1);
  --t-fast: 150ms var(--ease);
  --t: 280ms var(--ease);
  --t-slow: 400ms var(--ease);

  --topbar-h: 0px;
  --unified-nav-h: 60px;          /* Modern chrome — readable, not cramped */
  --unified-nav-h-scrolled: 54px;
  --glass-h: 56px;
  --glass-gap: 12px;
  --subnav-h: 34px;               /* Secondary scope bar — legible tabs */
  --nav-h: 0px;
  --ticker-h: 38px;
  --ticker-credit-w: 168px;

  /* v7 aliases for new dashboard components */
  --card: var(--surface);
  --text-muted: var(--muted);
}

/* ── Dark theme (default) — navy + luminous gold ── */
html[data-theme="dark"],
html:not([data-theme]) {
  --bg: #0b1018;
  --bg-elevated: #101722;
  --surface: #151d2b;
  --surface-2: #1a2436;
  --surface-3: #222f45;
  --border: rgba(212, 175, 55, 0.14);
  --border-2: rgba(255, 255, 255, 0.06);
  --text: #e8e4dd;
  --text-2: #c8c2b8;
  --muted: #8a96a8;
  --muted-2: #5e6b7d;
  --accent: #d4af37;
  --accent-hover: #e8c547;
  --accent-soft: rgba(212, 175, 55, 0.12);
  --accent-glow: 0 0 24px rgba(212, 175, 55, 0.22);
  --accent-fill: rgba(212, 175, 55, 0.16);
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65);
  --card: var(--surface);
  --bg-card: var(--surface);
  --fg: var(--text);
  --bg-inset: rgba(0, 0, 0, 0.22);
  /* Footer ticker + mega-menu — navy chrome (dark default) */
  --ticker-bg: linear-gradient(180deg, var(--wwof-navy-deep, #1a2b3c) 0%, var(--wwof-navy-footer, #091421) 100%);
  --ticker-bg-solid: var(--wwof-navy-deep, #1a2b3c);
  --ticker-border: rgba(212, 175, 55, 0.2);
  --ticker-text: rgba(232, 228, 221, 0.7);
  --ticker-text-muted: rgba(232, 228, 221, 0.55);
  --ticker-divider: rgba(212, 175, 55, 0.15);
  --ticker-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(212, 175, 55, 0.1);
  --ticker-credit-shadow: -20px 0 24px rgba(9, 20, 33, 0.92);
  --mega-menu-bg: linear-gradient(180deg, var(--wwof-navy-deep, #1a2b3c) 0%, var(--wwof-navy, #253948) 100%);
  --mega-menu-border-top: rgba(212, 175, 55, 0.14);
  --mega-menu-border-bottom: rgba(0, 0, 0, 0.28);
  --mega-menu-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  --mega-menu-backdrop: rgba(9, 20, 33, 0.42);
  --mega-col-surface: transparent;
  --mega-col-border: transparent;
  --mega-link-surface: transparent;
  --mega-link-border: transparent;
  --mega-feat-surface: linear-gradient(155deg, #2f4d62 0%, #243d50 48%, #2a4a5e 100%);
  --mega-feat-border: rgba(212, 175, 55, 0.22);
  --mega-alert-detail: #e2e8ef;
}

/* ── Bright theme — warm neutral + WWOF gold ── */
html[data-theme="bright"] {
  --bg: #f0ede7;
  --bg-elevated: #faf8f5;
  --surface: #ffffff;
  --surface-2: #faf8f5;
  --surface-3: #f0ede7;
  --border: #e4e0d7;
  --border-2: #eeeae3;
  --text: var(--wwof-navy);
  --text-2: #3d4248;
  --muted: var(--wwof-gray);
  --muted-2: #9a958d;
  --accent: #b5880b;
  --accent-hover: #9a7309;
  --accent-soft: rgba(181, 136, 11, 0.08);
  --accent-glow: none;
  --accent-fill: rgba(181, 136, 11, 0.12);
  --card: var(--surface);
  --bg-card: #ffffff;
  --fg: var(--wwof-navy);
  --bg-inset: #f8f7fc;
  /* Footer ticker — warm ivory + WWOF gold trim (not flat white) */
  --ticker-bg: linear-gradient(180deg, #fffefb 0%, #f8f3ea 100%);
  --ticker-bg-solid: #faf6ee;
  --ticker-border: rgba(181, 136, 11, 0.32);
  --ticker-text: var(--text-2);
  --ticker-text-muted: var(--muted);
  --ticker-divider: rgba(181, 136, 11, 0.2);
  --ticker-shadow: 0 -1px 0 rgba(181, 136, 11, 0.14), 0 -8px 22px rgba(181, 136, 11, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ticker-credit-shadow: -18px 0 22px rgba(250, 246, 238, 0.98);
  --mega-menu-bg: var(--surface);
  --mega-menu-border-top: var(--border);
  --mega-menu-border-bottom: var(--border);
  --mega-menu-shadow: 0 10px 36px rgba(44, 48, 52, 0.1);
  --mega-menu-backdrop: rgba(37, 57, 72, 0.14);
  --mega-col-surface: var(--bg-elevated);
  --mega-col-border: var(--border);
  --mega-link-surface: var(--surface);
  --mega-link-border: var(--border);
  --mega-feat-surface: linear-gradient(155deg, #ffffff 0%, var(--bg-elevated) 100%);
  --mega-feat-border: var(--border);
  --mega-alert-detail: var(--text-2);
}

/* ── Box-sizing & reset ── */
*{ box-sizing: border-box; }
html, body{ height: 100%; margin: 0; }
/* Prevent iOS Safari from auto-scaling text on landscape rotate / zoom. */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html[data-theme="dark"] body,
html:not([data-theme]) body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(212, 175, 55, 0.07), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(37, 57, 72, 0.45), transparent 50%),
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
}
body{
  font-family: 'Averta Std', 'Averta', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Removed body overflow-x:hidden — it was masking layout overflow at
     zoom-in / narrow viewports instead of letting child wrappers expose
     a horizontal scrollbar. Dense tables now use .table-wrap explicitly. */
}

/* ── Typography tightening ── */
h1{font-weight:700;letter-spacing:-.02em;}
h2{font-weight:600;letter-spacing:-.01em;}
h3{font-weight:600;}

/* ── Keyframes ── */
@keyframes pulse{ 0%,100%{ opacity:1; transform: scale(1); } 50%{ opacity:.5; transform: scale(1.4); } }
@keyframes pageIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes ripple{ to{ transform: scale(4); opacity: 0; } }

/* ── Scrollbar ── */
::-webkit-scrollbar{ width: 5px; height: 5px; }
::-webkit-scrollbar-track{ background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html:not([data-theme]) ::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.25);
  border-radius: 3px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
html:not([data-theme]) ::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.4);
}

/* ── Print media query basics ── */
@media print{
  body *{ visibility:hidden; }
  .coc-modal-backdrop, .coc-modal-backdrop *{ visibility:visible; }
  .coc-modal-backdrop{
    position:absolute; inset:0; background:none;
    display:flex !important; padding:0; overflow:visible;
  }
  .coc-modal{
    width:100%; box-shadow:none; border:none; border-radius:0;
    margin:0;
  }
  .coc-modal-header{ background:#fff; border-radius:0; }
  .coc-modal-actions{ display:none !important; }
  .topbar, .primary-nav, .ticker, .toasts, .palette-backdrop, .main{ display:none !important; }
  @page{ margin:0.5in; size:letter landscape; }
}

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal{ opacity: 1; transform: none; }

  /* Explicitly kill the supply-chain background animations */
  #dashMapSvg .animated-flow,
  #dashMapSvg .shipment-dot,
  #dashMapSvg .live-node,
  .map-live-dot {
    animation: none !important;
  }

  /* But keep functional loader spinners rotating — they indicate progress */
  .app-loader .loader-icon {
    animation: spin 0.9s linear infinite !important;
  }
}

/* ── Perf-lite mode (user request 2026-05-08) ──────────────────────
   Default-on. Kills infinite CSS animations to reduce GPU/CPU drain.
   The bottom ticker (`.ticker-track`) is intentionally preserved —
   user wants the live data scroll to keep moving.

   Short, one-shot animations (toasts, modal slide-in, page-in fade,
   command-palette open) are kept since they don't loop and
   communicate state changes that matter.

   Override per-element: add `data-keep-anim` attribute or class
   `.keep-anim` to opt back in. */

body.animations-off
*:not(.ticker-track):not(.ticker-track *):not([data-keep-anim]):not(.keep-anim):not(.loader-icon):not(.app-loader .loader-icon) {
  /* Stop infinite loops without breaking initial-render transforms.
     Functional loaders (spinners) are deliberately kept — they provide
     important "in progress" feedback and are not decorative. */
  animation-iteration-count: 1 !important;
}

/* Explicitly protect the branded loading spinner even under default perf-lite mode */
body.animations-off .app-loader .loader-icon {
  animation: spin 0.9s linear infinite !important;
}

/* Specific infinite-loop killers — these are the ones flagged as
   GPU-heavy. Each line matches a class that defined an infinite
   animation; we override iteration-count and duration so the
   keyframe runs once at near-zero duration and rests in its end
   state. */
body.animations-off .map-live-dot,                    /* mapPulse */
body.animations-off [data-pulse],                     /* pulse 2.4s */
body.animations-off .skeleton,                        /* shimmer 1.5s */
body.animations-off .map-arc-dot,
body.animations-off .animated-flow,
body.animations-off .shipment-dot,
body.animations-off .live-node {
  animation-iteration-count: 1 !important;
  animation-duration: 0.001s !important;
}
/* Disable nav auto-hide transform for reduced motion / perf mode */
body.animations-off .primary-nav.nav-hidden,
body.animations-off body.nav-hidden .secondary-nav {
  transition: none !important;
}

/* Keep the ticker scrolling even with animations off — user-facing
   requirement (the operator wants the marquee). */
body.animations-off .ticker-track {
  animation-iteration-count: infinite !important;
  animation-duration: var(--scroll-speed, 300s) !important;
}