/* ============================================================================
   OPSMERA app — LIGHT theme (white canvas, NAVY chrome)
   Scoped to body.theme-light. Loaded AFTER app.css. A clean white workspace
   framed by a navy left rail + navy top header (the brand anchor). Status
   "traffic lights" (chips, dots, deadline numbers, mint/red signals) stay
   fully saturated.  Note: the brand default is the all-dark "control room";
   this is an exploration.
   ============================================================================ */
body.theme-light {
  /* surfaces: white page + white cards, separated by hairline + soft shadow */
  --navy-900: #FFFFFF;   /* app / view / search / sticky bars              */
  --navy-800: #FFFFFF;   /* cards · drawer · panels                        */
  --navy-700: #F2F5FA;   /* raised (icon chips, channel tiles)             */
  --navy-600: #E2E8F1;   /* avatars · bar tracks                           */
  --navy-500: #CFD9E6;
  /* ink: navy text on white */
  --fg-1: #0B2545;
  --fg-2: #41506A;
  --fg-3: #71809A;
  --fg-4: #B9C5D8;
  /* hairlines: navy-tinted instead of white */
  --line-1: rgba(11, 37, 69, 0.12);
  --line-2: rgba(11, 37, 69, 0.07);
  --line-3: rgba(11, 37, 69, 0.22);
  background: #FFFFFF;
}

/* ---- NAVY CHROME: left rail + top header --------------------------------
   Re-scope the ink/line tokens INSIDE the navy chrome so every child renders
   light-on-navy automatically (no per-element overrides needed). */
body.theme-light .side,
body.theme-light .topbar {
  background: #0B2545;
  --fg-1: #F4F7FB;
  --fg-2: #9AA7BC;
  --fg-3: #6E7E96;
  --line-1: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.06);
  --line-3: rgba(255, 255, 255, 0.18);
  --navy-900: #0B2545;             /* search well sits on navy             */
  --navy-600: rgba(255,255,255,.10);/* avatar bg                            */
}
/* search well: a touch lighter than the navy bar */
body.theme-light .topbar .search { background: rgba(255, 255, 255, 0.06); }
/* the sidebar logo stays the WHITE mark on navy (only the field-app top swaps) */

/* primary action flips: navy fill, white text (was white-on-navy) */
body.theme-light .btn-primary { background: #0B2545; color: #fff; }
body.theme-light .btn-primary:hover { background: #16365E; }

/* active segmented/tab = navy fill (was #fff, invisible on white) */
body.theme-light .seg button.on { background: #0B2545; color: #fff; }

/* sidebar nav lives on navy -> white-tint hovers */
body.theme-light .nav-item:hover { background: rgba(255,255,255,.05); }
body.theme-light .nav-item.on { background: rgba(255,255,255,.08); }
/* content hovers / selection: navy tint on white */
body.theme-light .deadline:hover,
body.theme-light .mini-row:hover,
body.theme-light .in-row:hover,
body.theme-light .tbl tbody tr:hover { background: rgba(11,37,69,.035); }
body.theme-light .in-row.sel { background: rgba(11,37,69,.05); box-shadow: inset 2px 0 0 #0B2545; }

/* dashboard hero: white, no globe (the globe is a dark-canvas motif) */
body.theme-light .dash-hero .globe,
body.theme-light .field-stage .globe { display: none; }
body.theme-light .hero-pulse .cell { background: #fff; }

/* logo mark: the field-app phone top is light, so swap to the navy glyph there
   (the sidebar logo stays white on the navy rail). */
body.theme-light .fa-top .b img { content: url('../assets/mark-navy.svg'); }

/* AI card text: darker violet for contrast on the light tint */
body.theme-light .ai-card p { color: #3b3170; }
body.theme-light .ai-card .hd { color: #5d4fb0; }
/* active workflow node: navy fill (was #fff) */
body.theme-light .flow-step.active .ic { background: #0B2545; color: #fff; }

/* ---- keep the traffic lights readable ON WHITE ----
   The dot colours stay fully saturated (that's the signal); only the text/label
   tones are darkened so they have contrast against a light fill. */
body.theme-light .chip.resolved { color: #0d8a5e; }
body.theme-light .chip.info     { color: #2c5fb0; }
body.theme-light .chip.warning  { color: #946410; }
body.theme-light .chip.urgent   { color: #b23b30; }
body.theme-light .chip.auto     { color: #5a48b0; }
body.theme-light .chip.neutral  { color: #41506A; }

body.theme-light .prio.p1 { color: #b23b30; }
body.theme-light .prio.p2 { color: #946410; }
body.theme-light .prio.p3 { color: #41506A; }

body.theme-light .tbl .exposure { color: #946410; }
body.theme-light .count.alert,
body.theme-light .hero-pulse .n.alert,
body.theme-light .job .stall { color: #c0392b; }

/* card subtle shadow reads better than a bare hairline on white */
body.theme-light .card,
body.theme-light .drawer { box-shadow: 0 1px 2px rgba(11,37,69,.04), 0 8px 24px rgba(11,37,69,.05); }
body.theme-light .drawer { box-shadow: -24px 0 60px rgba(11,37,69,.12); }