/* ================================================================
   WO UI Upgrade — Batch 2 Visual Overhaul
   2026-02-24 | Additive CSS only. No removals.

   WHAT'S IN THIS FILE (all visible, substantial changes):
   1)  Sidebar: complete visual rebuild — deeper bg, bordered nav
       groups with accent left-edge, improved icons, glow on active
   2)  Brand header: gold monogram, crisper type, client pill upgrade
   3)  Nav search: glass-morphism pill, animated focus ring
   4)  Nav group headers: color-coded per section, icon dot, count badge
   5)  Navbtn: taller touch target, left-border active state w/ glow
   6)  Topbar: stronger glass blur, orange gradient left-border accent
   7)  Card: layered shadows, subtle top-border accent, h2 upgrade
   8)  Metric card: bigger value, colored border-top, mini-chart bars
   9)  Table: proper zebra, sticky header backdrop, hover row highlight
   10) Tags/pills: sharper contrast, distinct ok/warn/bad palette
   11) Buttons: primary gets gradient, all get sharper hover
   12) Sidebar footer: connection status panel injected via CSS+JS shim
   13) Inputs: focus ring glow, cleaner padding
   14) Color variable overrides: lift panel/card backgrounds slightly
   15) RL theme: full parallel override set
   16) Navy theme: full parallel override set
   ================================================================ */

/* ── 0) LIFTED BACKGROUND VARIABLES ────────────────────────────
   Existing --panel and --card are very close to --bg.
   Lift them just enough to add spatial depth.              ──── */
:root {
  --panel:  var(--wo-panel);
  --panel2: color-mix(in srgb, var(--wo-panel) 88%, var(--wo-card) 12%);
  --card:   var(--wo-card);
  --line:   var(--wo-border);

  /* New accent-tinted card top-border color */
  --card-accent-border: rgba(var(--wo-accent-rgb), 0.18);

  /* Sidebar accent width */
  --nav-active-bar: 3px;

  /* Group colors – one per section */
  --gc-operate:  var(--wo-info);
  --gc-invest:   var(--wo-positive);
  --gc-plan:     color-mix(in srgb, var(--wo-accent) 45%, var(--wo-info) 55%);
  --gc-comply:   var(--wo-warning);
  --gc-admin:    color-mix(in srgb, var(--wo-negative) 60%, var(--wo-accent) 40%);
  --gc-market:   var(--wo-accent);
  --gc-edge:     color-mix(in srgb, var(--wo-positive) 70%, var(--wo-info) 30%);
  --gc-client:   color-mix(in srgb, var(--wo-info) 85%, var(--wo-text-primary) 15%);
  --gc-tools:    color-mix(in srgb, var(--wo-accent) 50%, var(--wo-info) 50%);
  --gc-analytics:color-mix(in srgb, var(--wo-negative) 45%, var(--wo-accent) 55%);
  --gc-other:    var(--wo-text-secondary);
}

:root.rl-theme {
  --panel:  var(--wo-panel);
  --panel2: color-mix(in srgb, var(--wo-panel) 80%, var(--wo-card) 20%);
  --card:   var(--wo-card);
  --line:   var(--wo-border);
  --card-accent-border: rgba(var(--wo-accent-rgb), 0.22);

  --gc-operate:  var(--wo-warning);
  --gc-invest:   var(--wo-positive);
  --gc-plan:     color-mix(in srgb, var(--wo-accent) 35%, var(--wo-info) 65%);
  --gc-comply:   var(--wo-warning);
  --gc-admin:    color-mix(in srgb, var(--wo-negative) 65%, var(--wo-accent) 35%);
  --gc-market:   var(--wo-accent);
  --gc-edge:     color-mix(in srgb, var(--wo-positive) 70%, var(--wo-info) 30%);
  --gc-client:   color-mix(in srgb, var(--wo-info) 70%, var(--wo-text-primary) 30%);
  --gc-tools:    color-mix(in srgb, var(--wo-accent) 50%, var(--wo-info) 50%);
  --gc-analytics:color-mix(in srgb, var(--wo-negative) 50%, var(--wo-accent) 50%);
  --gc-other:    var(--wo-text-muted);
}

:root.navy-theme {
  --gc-operate:  var(--wo-accent);
  --gc-invest:   var(--wo-positive);
  --gc-plan:     color-mix(in srgb, var(--wo-accent) 35%, var(--wo-info) 65%);
  --gc-comply:   var(--wo-warning);
  --gc-admin:    color-mix(in srgb, var(--wo-negative) 60%, var(--wo-accent) 40%);
  --gc-market:   var(--wo-accent);
  --gc-edge:     color-mix(in srgb, var(--wo-positive) 70%, var(--wo-info) 30%);
  --gc-client:   var(--wo-info);
  --gc-tools:    color-mix(in srgb, var(--wo-accent) 50%, var(--wo-info) 50%);
  --gc-analytics:color-mix(in srgb, var(--wo-negative) 50%, var(--wo-accent) 50%);
  --gc-other:    var(--wo-text-secondary);
}


/* ══════════════════════════════════════════════════════════════
   §1  SIDEBAR SHELL
   ══════════════════════════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel) 100%, var(--wo-bg) 0%) 0%,
    color-mix(in srgb, var(--bg) 85%, var(--wo-bg) 15%) 100%
  );
  border-right: 1px solid var(--line);
  /* Fallback for browsers without color-mix */
}
/* Stronger panel bg */
:root:not(.rl-theme):not(.navy-theme) .sidebar {
  background: linear-gradient(180deg, var(--wo-panel) 0%, var(--wo-bg) 100%);
}
:root.rl-theme .sidebar {
  background: linear-gradient(180deg, var(--wo-panel) 0%, var(--wo-bg) 100%);
}

/* ── §1a  Brand Block ─────────────────────────────────────────── */
.brand {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 16px 14px 12px !important;
  gap: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Monogram badge */
.brand > div > div:first-child {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wo-info) 35%, var(--wo-bg) 65%) 0%, color-mix(in srgb, var(--wo-info) 60%, var(--wo-panel) 40%) 100%) !important;
  border: 1px solid rgba(201, 168, 76, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(201,168,76,0.2) !important;
}

#brandTitle {
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  color: var(--wo-text-primary) !important;
}
#brandSubtitle {
  font-size: 10px !important;
  letter-spacing: 0.04em !important;
  opacity: 0.45 !important;
  text-transform: uppercase !important;
}

/* Active client pill — make it pop */
#activeClientPill {
  background: rgba(125, 211, 252, 0.08) !important;
  border: 1px solid rgba(125, 211, 252, 0.20) !important;
  color: var(--accent) !important;
  font-size: 10px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
:root.rl-theme #activeClientPill {
  background: rgba(181, 154, 91, 0.08) !important;
  border-color: rgba(181, 154, 91, 0.22) !important;
  color: var(--gold) !important;
}


/* ── §1b  Nav Search ──────────────────────────────────────────── */
.nav-search {
  padding: 10px 10px 6px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  background: inherit !important;
}
.nav-search input {
  width: 100% !important;
  padding: 8px 10px 8px 30px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.nav-search input::placeholder { color: rgba(154,164,175,0.45) !important; }
.nav-search input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.10) !important;
  color: var(--text) !important;
}
:root.rl-theme .nav-search input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(181, 154, 91, 0.10) !important;
}
/* Search icon */
.nav-search::before {
  content: '' !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 13px !important;
  height: 13px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4af' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat !important;
  pointer-events: none !important;
  opacity: 0.6 !important;
}


/* ── §1c  Nav Group Headers ───────────────────────────────────── */
.nav-group {
  margin-bottom: 2px !important;
}

.nav-group-header {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 10px 7px 8px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.15s !important;
  position: relative !important;
}
.nav-group-header:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* Colored dot per section */
.nav-group-header::before {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
}
.nav-group[data-group="OPERATE"]  .nav-group-header::before { background: var(--gc-operate); }
.nav-group[data-group="INVEST"]   .nav-group-header::before { background: var(--gc-invest); }
.nav-group[data-group="PLAN"]     .nav-group-header::before { background: var(--gc-plan); }
.nav-group[data-group="COMPLY"]   .nav-group-header::before { background: var(--gc-comply); }
.nav-group[data-group="ADMIN"]    .nav-group-header::before { background: var(--gc-admin); }
.nav-group[data-group="MARKET"]   .nav-group-header::before { background: var(--gc-market); }
.nav-group[data-group="EDGE"]     .nav-group-header::before { background: var(--gc-edge); }
.nav-group[data-group="CLIENT"]   .nav-group-header::before { background: var(--gc-client); }
.nav-group[data-group="TOOLS"]    .nav-group-header::before { background: var(--gc-tools); }
.nav-group[data-group="ANALYTICS"].nav-group-header::before { background: var(--gc-analytics); }

/* Group count badge */
.nav-group-header .group-count {
  font-size: 9px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 99px !important;
  padding: 1px 6px !important;
  color: var(--muted) !important;
  margin-left: 2px !important;
  opacity: 1 !important;
}

/* Chevron upgrade */
.nav-group-header .chevron {
  margin-left: auto !important;
  font-size: 8px !important;
  opacity: 0.45 !important;
  transition: transform 0.2s, opacity 0.2s !important;
}
.nav-group.collapsed .nav-group-header .chevron {
  transform: rotate(-90deg) !important;
}
.nav-group-header:hover .chevron { opacity: 0.8 !important; }

/* Subtle divider line above each group */
.nav-group + .nav-group .nav-group-header {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding-top: 9px !important;
  margin-top: 4px !important;
}


/* ── §1d  Nav Buttons ─────────────────────────────────────────── */
.nav-group-items {
  padding-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.navbtn {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 10px 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: rgba(210, 218, 226, 0.75) !important;
  cursor: pointer !important;
  text-align: left !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  letter-spacing: 0.01em !important;
  transition: background 0.12s, color 0.12s, border-color 0.12s !important;
  position: relative !important;
  width: 100% !important;
  border-left: var(--nav-active-bar) solid transparent !important;
}
.navbtn:hover {
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 232, 240, 0.95) !important;
  border-left-color: rgba(255,255,255,0.10) !important;
}

/* Active state — left accent bar + glow per section */
.navbtn.active {
  font-weight: 700 !important;
  color: var(--wo-text-primary) !important;
  background: rgba(125, 211, 252, 0.09) !important;
  border-left-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(125,211,252,0.08) !important;
}

/* Section-colored active left bar */
.nav-group[data-group="OPERATE"]  .navbtn.active { border-left-color: var(--gc-operate) !important; background: rgba(125,211,252,0.07) !important; }
.nav-group[data-group="INVEST"]   .navbtn.active { border-left-color: var(--gc-invest)  !important; background: rgba(134,239,172,0.07) !important; }
.nav-group[data-group="PLAN"]     .navbtn.active { border-left-color: var(--gc-plan)    !important; background: rgba(196,181,253,0.07) !important; }
.nav-group[data-group="COMPLY"]   .navbtn.active { border-left-color: var(--gc-comply)  !important; background: rgba(253,230,138,0.07) !important; }
.nav-group[data-group="ADMIN"]    .navbtn.active { border-left-color: var(--gc-admin)   !important; background: rgba(249,168,212,0.07) !important; }
.nav-group[data-group="MARKET"]   .navbtn.active { border-left-color: var(--gc-market)  !important; background: rgba(251,146,60,0.07)  !important; }
.nav-group[data-group="EDGE"]     .navbtn.active { border-left-color: var(--gc-edge)    !important; background: rgba(52,211,153,0.07)  !important; }
.nav-group[data-group="CLIENT"]   .navbtn.active { border-left-color: var(--gc-client)  !important; background: rgba(103,232,249,0.07) !important; }
.nav-group[data-group="ANALYTICS"].navbtn.active { border-left-color: var(--gc-analytics)!important; background: rgba(244,114,182,0.07)!important; }

/* Nav icon chip */
.navicon {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 5px !important;
  background: rgba(0,0,0,0.28) !important;
  color: rgba(180,190,200,0.70) !important;
  letter-spacing: -0.02em !important;
  flex-shrink: 0 !important;
  transition: background 0.12s, color 0.12s !important;
}
.navbtn.active .navicon {
  background: rgba(125,211,252,0.14) !important;
  border-color: rgba(125,211,252,0.25) !important;
  color: var(--accent) !important;
}
.nav-group[data-group="INVEST"]  .navbtn.active .navicon { background: rgba(134,239,172,0.14)!important; border-color: rgba(134,239,172,0.25)!important; color: var(--gc-invest)!important; }
.nav-group[data-group="PLAN"]    .navbtn.active .navicon { background: rgba(196,181,253,0.14)!important; border-color: rgba(196,181,253,0.25)!important; color: var(--gc-plan)!important; }
.nav-group[data-group="COMPLY"]  .navbtn.active .navicon { background: rgba(253,230,138,0.14)!important; border-color: rgba(253,230,138,0.25)!important; color: var(--gc-comply)!important; }
.nav-group[data-group="MARKET"]  .navbtn.active .navicon { background: rgba(251,146,60,0.14)!important;  border-color: rgba(251,146,60,0.25)!important;  color: var(--gc-market)!important; }

/* Fav star */
.navbtn .fav-star {
  opacity: 0 !important;
  margin-left: auto !important;
  font-size: 10px !important;
  cursor: pointer !important;
  color: var(--muted) !important;
  transition: opacity 0.15s !important;
  flex-shrink: 0 !important;
}
.navbtn:hover .fav-star { opacity: 0.5 !important; }
.navbtn .fav-star.is-fav { opacity: 1 !important; color: var(--wo-warning) !important; }


/* ══════════════════════════════════════════════════════════════
   §2  TOPBAR
   ══════════════════════════════════════════════════════════════ */
.topbar {
  background: rgba(12, 13, 15, 0.82) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid var(--line) !important;
  border-left: 3px solid var(--text) !important;   /* orange left accent */
  padding: 10px 18px 10px 16px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
:root.rl-theme .topbar {
  border-left-color: var(--gold) !important;
  background: rgba(9, 16, 22, 0.84) !important;
}
:root.navy-theme .topbar {
  border-left-color: var(--wo-accent) !important;
}

/* View title — bigger, crisper */
.title {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  color: var(--wo-text-primary) !important;
  line-height: 1.2 !important;
}
/* Subtitle below title */
.subtitle {
  font-size: 11px !important;
  color: var(--muted) !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  margin-top: 1px !important;
}


/* ══════════════════════════════════════════════════════════════
   §3  CARDS
   ══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-top: 2px solid var(--card-accent-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.30),
    0 1px 2px rgba(0,0,0,0.20) !important;
  position: relative !important;
}
:root.rl-theme .card {
  border-top-color: rgba(181,154,91,0.22) !important;
}

.card h2 {
  margin: 0 0 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  color: var(--wo-text-primary) !important;
  line-height: 1.3 !important;
}
:root.rl-theme .card h2 { color: var(--wo-text-primary) !important; }

.card p {
  font-size: 13px !important;
  line-height: 1.62 !important;
  color: rgba(210, 218, 228, 0.85) !important;
}
.card .muted {
  color: var(--muted) !important;
  line-height: 1.55 !important;
}


/* ══════════════════════════════════════════════════════════════
   §4  METRIC CARDS (Dashboard KPI boxes)
   ══════════════════════════════════════════════════════════════ */
.metric-card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid rgba(125,211,252,0.28) !important;
  border-radius: 12px !important;
  padding: 16px 14px 14px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Subtle bg glow behind value */
.metric-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(125,211,252,0.06) 0%, transparent 65%) !important;
  pointer-events: none !important;
}
.metric-card .metric-value {
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  color: var(--wo-text-primary) !important;
  font-family: var(--mono) !important;
}
.metric-card .metric-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
}
.metric-card.good {
  border-top-color: rgba(134,239,172,0.45) !important;
}
.metric-card.good::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(134,239,172,0.07) 0%, transparent 65%) !important;
}
.metric-card.good .metric-value { color: var(--wo-positive) !important; }

.metric-card.warn {
  border-top-color: rgba(253,230,138,0.45) !important;
}
.metric-card.warn::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(253,230,138,0.06) 0%, transparent 65%) !important;
}
.metric-card.warn .metric-value { color: var(--wo-warning) !important; }

.metric-card.bad {
  border-top-color: rgba(252,165,165,0.45) !important;
}
.metric-card.bad::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(252,165,165,0.07) 0%, transparent 65%) !important;
}
.metric-card.bad .metric-value { color: var(--wo-negative) !important; }

/* Mini chart bars inside metric cards */
.mini-chart {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  height: 28px !important;
  margin-top: 8px !important;
  opacity: 0.55 !important;
}
.mini-chart .bar {
  flex: 1 !important;
  background: var(--accent) !important;
  border-radius: 2px 2px 0 0 !important;
  min-height: 4px !important;
  transition: opacity 0.2s !important;
}
.metric-card.good .mini-chart .bar  { background: var(--good) !important; }
.metric-card.warn .mini-chart .bar  { background: var(--warn) !important; }
.metric-card.bad  .mini-chart .bar  { background: var(--bad)  !important; }
.metric-card:hover .mini-chart { opacity: 0.85 !important; }


/* ══════════════════════════════════════════════════════════════
   §5  TABLES
   ══════════════════════════════════════════════════════════════ */
table {
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.18) !important;
}
th {
  background: rgba(255,255,255,0.025) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  backdrop-filter: blur(6px) !important;
}
td {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(42,47,54,0.7) !important;
  font-size: 12.5px !important;
  color: rgba(210,218,228,0.88) !important;
  vertical-align: middle !important;
}
tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,0.012) !important;
}
tbody tr:hover td {
  background: rgba(125,211,252,0.055) !important;
  color: rgba(226,232,240,0.96) !important;
}
:root.rl-theme tbody tr:hover td {
  background: rgba(181,154,91,0.055) !important;
}
tr:last-child td { border-bottom: none !important; }


/* ══════════════════════════════════════════════════════════════
   §6  BUTTONS
   ══════════════════════════════════════════════════════════════ */
.btn {
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(210,218,228,0.90) !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s !important;
  white-space: nowrap !important;
}
.btn:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--wo-text-primary) !important;
}
.btn.primary {
  background: linear-gradient(135deg,
    rgba(125,211,252,0.20) 0%,
    rgba(125,211,252,0.10) 100%) !important;
  border-color: rgba(125,211,252,0.40) !important;
  color: var(--wo-info) !important;
}
.btn.primary:hover {
  background: linear-gradient(135deg,
    rgba(125,211,252,0.30) 0%,
    rgba(125,211,252,0.16) 100%) !important;
  border-color: rgba(125,211,252,0.55) !important;
  box-shadow: 0 0 14px rgba(125,211,252,0.12) !important;
  color: var(--wo-text-primary) !important;
}
:root.rl-theme .btn.primary {
  background: linear-gradient(135deg, rgba(181,154,91,0.22) 0%, rgba(181,154,91,0.10) 100%) !important;
  border-color: rgba(181,154,91,0.40) !important;
  color: var(--wo-warning) !important;
}
:root.rl-theme .btn.primary:hover {
  background: linear-gradient(135deg, rgba(181,154,91,0.32) 0%, rgba(181,154,91,0.18) 100%) !important;
  border-color: rgba(181,154,91,0.55) !important;
  box-shadow: 0 0 14px rgba(181,154,91,0.14) !important;
}
.btn.danger {
  border-color: rgba(252,165,165,0.40) !important;
  color: var(--wo-negative) !important;
}
.btn.danger:hover {
  background: rgba(252,165,165,0.10) !important;
  border-color: rgba(252,165,165,0.55) !important;
}
.btn.small {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  border-radius: 7px !important;
}


/* ══════════════════════════════════════════════════════════════
   §7  TAGS / PILLS
   ══════════════════════════════════════════════════════════════ */
.tag {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  border: 1px solid var(--line) !important;
  background: rgba(0,0,0,0.22) !important;
  color: var(--muted) !important;
  white-space: nowrap !important;
}
.tag.ok {
  border-color: rgba(134,239,172,0.40) !important;
  background: rgba(134,239,172,0.10) !important;
  color: var(--wo-positive) !important;
}
.tag.warn {
  border-color: rgba(253,230,138,0.40) !important;
  background: rgba(253,230,138,0.10) !important;
  color: var(--wo-warning) !important;
}
.tag.bad {
  border-color: rgba(252,165,165,0.40) !important;
  background: rgba(252,165,165,0.10) !important;
  color: var(--wo-negative) !important;
}
.pill {
  font-size: 10px !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
}


/* ══════════════════════════════════════════════════════════════
   §8  INPUTS & SELECTS
   ══════════════════════════════════════════════════════════════ */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: rgba(0, 0, 0, 0.28) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: rgba(210,218,228,0.92) !important;
  padding: 9px 11px !important;
  font-size: 13px !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(125,211,252,0.55) !important;
  box-shadow: 0 0 0 3px rgba(125,211,252,0.10) !important;
  outline: none !important;
}
:root.rl-theme input:focus,
:root.rl-theme select:focus,
:root.rl-theme textarea:focus {
  border-color: rgba(181,154,91,0.55) !important;
  box-shadow: 0 0 0 3px rgba(181,154,91,0.10) !important;
}
label {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}


/* ══════════════════════════════════════════════════════════════
   §9  CONNECTION STATUS FOOTER — injected by wo-ui-upgrade.js
   ══════════════════════════════════════════════════════════════ */
#wo-conn-footer {
  margin-top: auto !important;
  padding: 10px 12px 14px !important;
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}
#wo-conn-footer .wo-conn-row {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11px !important;
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
#wo-conn-footer .conn-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--muted) !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.30) !important;
}
#wo-conn-footer .conn-dot.online  { background: var(--good) !important; box-shadow: 0 0 6px rgba(134,239,172,0.45) !important; }
#wo-conn-footer .conn-dot.offline { background: var(--bad)  !important; }
#wo-conn-footer .conn-dot.loading {
  background: var(--warn) !important;
  animation: wo-pulse 1.2s ease-in-out infinite !important;
}
@keyframes wo-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
#wo-conn-footer .wo-data-mode {
  margin-left: auto !important;
  font-size: 9.5px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
  padding: 2px 7px !important;
  color: rgba(154,164,175,0.70) !important;
}


/* ══════════════════════════════════════════════════════════════
   §10  USER MENU + AVATAR
   ══════════════════════════════════════════════════════════════ */
.user-btn {
  padding: 5px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,0.22) !important;
  font-size: 12px !important;
  color: rgba(210,218,228,0.85) !important;
  gap: 7px !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.user-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: var(--wo-text-primary) !important;
}
.user-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;   /* square-ish, not circle */
  background: rgba(125,211,252,0.18) !important;
  border: 1px solid rgba(125,211,252,0.30) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
}
:root.rl-theme .user-avatar {
  background: rgba(181,154,91,0.18) !important;
  border-color: rgba(181,154,91,0.30) !important;
  color: var(--gold) !important;
}
.user-dropdown {
  background: var(--wo-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  min-width: 200px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;
}
.user-dropdown-item {
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  color: rgba(210,218,228,0.80) !important;
}
.user-dropdown-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--wo-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   §11  SCENARIO CARDS (used in Dashboard deadlines block)
   ══════════════════════════════════════════════════════════════ */
.scenario-card {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: background 0.15s !important;
}
.scenario-card:hover {
  background: rgba(255,255,255,0.045) !important;
}
.scenario-card h4 {
  margin: 0 0 4px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--wo-text-primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   §12  LIST ITEMS & SPLIT LAYOUT
   ══════════════════════════════════════════════════════════════ */
.listitem {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,0.02) !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.listitem:hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
.listitem.active {
  border-color: rgba(125,211,252,0.35) !important;
  background: rgba(125,211,252,0.07) !important;
}
.li-title { font-size: 12.5px !important; font-weight: 700 !important; color: var(--wo-text-primary) !important; }
.li-sub   { font-size: 11px !important; color: var(--muted) !important; margin-top: 3px !important; }


/* ══════════════════════════════════════════════════════════════
   §13  NOTICE / CODE BLOCKS
   ══════════════════════════════════════════════════════════════ */
.notice {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  border-color: rgba(125,211,252,0.22) !important;
  background: rgba(125,211,252,0.06) !important;
}
.code {
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: rgba(210,218,228,0.88) !important;
}


/* ══════════════════════════════════════════════════════════════
   §14  SIDEBAR COLLAPSED STATE — preserve icon chips
   ══════════════════════════════════════════════════════════════ */
body.sidebar-collapsed .navbtn {
  justify-content: center !important;
  padding: 8px !important;
  border-left-color: transparent !important;
}
body.sidebar-collapsed .navbtn.active {
  border-left-color: transparent !important;
  border-radius: 8px !important;
}
body.sidebar-collapsed #wo-conn-footer {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   §15  RL THEME OVERRIDES (parallel set)
   ══════════════════════════════════════════════════════════════ */
:root.rl-theme .navbtn.active {
  background: rgba(181,154,91,0.09) !important;
  border-left-color: var(--gold) !important;
}
:root.rl-theme .navbtn.active .navicon {
  background: rgba(181,154,91,0.16) !important;
  border-color: rgba(181,154,91,0.28) !important;
  color: var(--gold) !important;
}
:root.rl-theme tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,0.008) !important;
}
:root.rl-theme .metric-card {
  border-top-color: rgba(181,154,91,0.30) !important;
}
:root.rl-theme .metric-card::after {
  background: radial-gradient(ellipse at 50% 0%, rgba(181,154,91,0.07) 0%, transparent 65%) !important;
}


/* ══════════════════════════════════════════════════════════════
   §16  NAVY THEME OVERRIDES (parallel set)
   ══════════════════════════════════════════════════════════════ */
:root.navy-theme .topbar {
  background: var(--wo-card) !important;
  border-left-color: var(--wo-accent) !important;
  border-bottom-color: var(--wo-border) !important;
}
:root.navy-theme .title { color: var(--wo-panel) !important; }
:root.navy-theme .subtitle { color: var(--wo-text-secondary) !important; }
:root.navy-theme .card {
  background: var(--wo-card) !important;
  border-top-color: rgba(26,75,140,0.20) !important;
  border-color: var(--wo-border) !important;
}
:root.navy-theme .card h2 { color: var(--wo-panel) !important; }
:root.navy-theme .navbtn { color: var(--wo-text-secondary) !important; }
:root.navy-theme .navbtn:hover { background: rgba(26,75,140,0.06) !important; color: var(--wo-panel) !important; }
:root.navy-theme .navbtn.active {
  background: rgba(26,75,140,0.10) !important;
  border-left-color: var(--wo-accent) !important;
  color: var(--wo-panel) !important;
}
:root.navy-theme .navbtn.active .navicon {
  background: rgba(26,75,140,0.14) !important;
  border-color: rgba(26,75,140,0.25) !important;
  color: var(--wo-accent) !important;
}
:root.navy-theme .nav-group-header { color: var(--wo-text-secondary) !important; }
:root.navy-theme .metric-card {
  background: var(--wo-card) !important;
  border-color: var(--wo-border) !important;
  border-top-color: rgba(26,75,140,0.25) !important;
}
:root.navy-theme .metric-card .metric-value { color: var(--wo-panel) !important; }
:root.navy-theme .metric-card::after { background: none !important; }
:root.navy-theme .mini-chart .bar { background: var(--wo-accent) !important; }
:root.navy-theme .btn.primary {
  background: linear-gradient(135deg, rgba(26,75,140,0.18) 0%, rgba(26,75,140,0.08) 100%) !important;
  border-color: rgba(26,75,140,0.40) !important;
  color: var(--wo-accent) !important;
}
:root.navy-theme td { color: var(--wo-text-primary) !important; }
:root.navy-theme tbody tr:hover td { background: rgba(26,75,140,0.04) !important; }
:root.navy-theme #wo-conn-footer .wo-conn-row {
  background: var(--wo-bg) !important;
  border-color: var(--wo-border) !important;
  color: var(--wo-text-secondary) !important;
}
:root.navy-theme .user-avatar {
  background: rgba(26,75,140,0.14) !important;
  border-color: rgba(26,75,140,0.28) !important;
  color: var(--wo-accent) !important;
}


/* ══════════════════════════════════════════════════════════════
   §17  PAGE PADDING & CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════ */
/* Standardize page-level padding so all views feel consistent */
.content {
  padding: 20px 20px 40px !important;
  max-width: 1280px !important;
}
/* All direct-render views that use page-pad class */
.page-pad {
  padding: 20px !important;
}


/* ══════════════════════════════════════════════════════════════
   §18  SCROLLBAR (sidebar nav scroll)
   ══════════════════════════════════════════════════════════════ */
#nav::-webkit-scrollbar { width: 4px; }
#nav::-webkit-scrollbar-track { background: transparent; }
#nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
#nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.14);
}


/* ══════════════════════════════════════════════════════════════
   §19  AUTH MODAL UPGRADE
   ══════════════════════════════════════════════════════════════ */
.auth-card {
  background: var(--wo-panel) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--text) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65) !important;
}
.auth-card h2 {
  font-size: 17px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 18px !important;
  color: var(--wo-text-primary) !important;
}
:root.rl-theme .auth-card { border-top-color: var(--gold) !important; }


/* ══════════════════════════════════════════════════════════════
   §20  PRINT — hide upgrade-only elements
   ══════════════════════════════════════════════════════════════ */
@media print {
  #wo-conn-footer { display: none !important; }
}
body.print-mode #wo-conn-footer { display: none !important; }

/* ================================================================
   WO IA + Mobile + Header Cleanup (2026-02-26)
   Goals:
   - One sidebar search: reuse #navSearchInput; hide Batch29 injected filter UI.
   - Reduce sidebar top density so more tabs are visible.
   - Cleaner top banner; smaller global search; hide on mobile.
   - Mobile nav drawer toggle + scrim.
   - Breadcrumbs + Navigator hover mega menu (desktop).
   - Sidebar width resizer (default 320px; persisted).
   ================================================================ */

:root{
  --wo-sidebar-w: 320px;
  --wo-sidebar-min: 300px;
  --wo-sidebar-max: 480px;
}

/* Sidebar width variable (desktop) */
.app{
  grid-template-columns: var(--wo-sidebar-w) 1fr !important;
}
.sidebar{
  min-width: var(--wo-sidebar-min) !important;
}
.sidebar{ position: relative; }

/* Sidebar top density */
.brand{ padding: 10px 12px !important; }
.brand .subtitle{ opacity: .70; }
.nav-search{ margin: 8px 12px 10px !important; }
.nav-search input{
  height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}

/* Make nav list more compact while keeping click targets sane */
.navbtn{ padding: 10px 10px !important; gap: 10px !important; }
.navbtn span{ font-size: 12px !important; }
.nav-group-header{ padding: 10px 10px !important; }
.nav{ gap: 6px !important; }

/* Batch29 injected filter/search bar (duplicate) — hidden. We bind filter to #navSearchInput instead. */
#woB29NavSearchWrap{ display:none !important; }

/* Breadcrumbs */
.wo-breadcrumbs{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.wo-crumb{ color: var(--muted); }
.wo-crumb-active{ color: var(--text); }
.wo-crumb-sep{ opacity: .6; }

/* Top banner cleanup */
.topbar{
  padding: 10px 12px !important;
  gap: 10px !important;
}
.searchwrap{ gap: 10px !important; }
.searchwrap .search{
  height: 34px !important;
  padding: 0 10px !important;
}
#globalSearch{ width: 240px !important; }

/* Hide the big header search on narrow screens to prevent jumbled banner */
@media (max-width: 1100px){
  #globalSearch{ width: 180px !important; }
}
@media (max-width: 980px){
  .searchwrap .search{ display:none !important; }
}

/* Mobile drawer navigation */
.wo-mobile-navbtn{ display:none; min-width: 40px; justify-content:center; }
.wo-nav-scrim{ display:none; }

@media (max-width: 980px){
  /* App becomes single column; sidebar becomes off-canvas */
  .app{ grid-template-columns: 1fr !important; }

  .sidebar{
    display:flex !important; /* override wo-styles mobile hide */
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: min(86vw, 360px) !important;
    max-width: 360px !important;
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 1000;
  }

  body.wo-nav-open .sidebar{ transform: translateX(0); }

  .wo-mobile-navbtn{ display:inline-flex !important; }

  .wo-nav-scrim{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 950;
    display: none;
  }
  body.wo-nav-open .wo-nav-scrim{ display:block; }

  /* Compact topbar on mobile */
  .topbar{ padding: 8px 10px !important; }
  .top-left .subtitle{ display:none !important; }
  .righttools{ gap: 8px !important; }
  .topbar .btn{ padding: 8px 10px !important; }
}

/* Sidebar resizer */
.wo-side-resizer{
  position: absolute;
  top: 0;
  right: -6px;
  width: 12px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}
body.wo-resize-drag *{ cursor: col-resize !important; user-select:none !important; }

/* Desktop hover mega menu */
.wo-megamenu{
  position: fixed;
  left: 20px;
  top: 60px;
  z-index: 2000;
  border: 1px solid var(--stroke);
  background: rgba(12,16,20,.96);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 12px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.wo-megamenu.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wo-megamenu-inner{
  display: grid;
  grid-template-columns: repeat(var(--wo-mm-cols, 2), minmax(180px, 1fr));
  gap: 12px;
}
.wo-mm-group{ padding: 6px; }
.wo-mm-title{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 8px;
}
.wo-mm-items{ display:flex; flex-direction:column; gap:6px; }
.wo-mm-item{
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
}
.wo-mm-item:hover{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }

/* Navy theme readability for mega menu */
:root.navy-theme .wo-megamenu{
  background: rgba(255,255,255,.96);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}
:root.navy-theme .wo-mm-item{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: var(--wo-text-primary);
}
:root.navy-theme .wo-mm-item:hover{ background: rgba(0,0,0,.06); }
:root.navy-theme .wo-mm-title{ color: rgba(11,19,32,.65); }

/* Navy theme: ensure sidebar/nav text stays dark enough */
:root.navy-theme .navbtn span{ color:var(--wo-text-primary) !important; }
:root.navy-theme .nav-group-header{ color: rgba(11,19,32,.78) !important; }
:root.navy-theme .navbtn{ border-color: rgba(0,0,0,.10) !important; }
:root.navy-theme .navbtn:hover{ background: rgba(0,0,0,.04) !important; }

/* ══════════════════════════════════════════════════════════════
   Batch 8 — shell status + view hierarchy
   ══════════════════════════════════════════════════════════════ */
#woBreadcrumbs{
  margin-top: 6px !important;
}
.wo-shell-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.wo-shell-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--wo-text-secondary);
}
.wo-shell-pill.good{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.18);color:var(--wo-positive)}
.wo-shell-pill.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.18);color:var(--wo-warning)}
.wo-shell-pill.info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.18);color:var(--wo-info)}
.wo-shell-pill.muted{background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.16);color:var(--wo-text-primary)}
.topbar .top-left{
  display:flex;
  align-items:flex-start;
  gap:16px;
}
.topbar .top-left > div:last-child{
  min-width:0;
}
.topbar .title{
  line-height:1.08 !important;
  letter-spacing:-0.02em;
}
.topbar .subtitle{
  margin-top:4px;
  max-width:920px;
}
body.wo-hide-shell-status .wo-shell-status{display:none !important}
body[data-wo-view="settings"] .topbar .title,
body[data-wo-view="dashboard"] .topbar .title,
body[data-wo-view="clients"] .topbar .title,
body[data-wo-view="book-of-business"] .topbar .title{
  font-size:28px !important;
}
:root.navy-theme .wo-shell-pill.muted{background:var(--wo-card);border-color:var(--wo-border);color:var(--wo-text-secondary)}
:root.navy-theme .wo-shell-pill.info{background:rgba(var(--wo-accent-rgb), 0.08);border-color:var(--wo-border);color:var(--wo-info)}
:root.navy-theme .wo-shell-pill.warn{background:rgba(var(--wo-accent-rgb), 0.08);border-color:var(--wo-border);color:var(--wo-accent)}
:root.navy-theme .wo-shell-pill.good{background:rgba(var(--wo-accent-rgb), 0.08);border-color:var(--wo-border);color:var(--wo-positive)}

@media (max-width: 980px){
  .wo-shell-status{gap:6px}
  .wo-shell-pill{font-size:9px;padding:4px 8px}
  .topbar .top-left{gap:10px}
}


/* FINAL TERMINAL CLEANUP */
body.b20-present, html.b20-present, body.wo-present-mode, html.wo-present-mode { background:var(--wo-bg) !important; }
#b20_present_badge, #b20_present_btn { display:none !important; }
:root.navy-theme body, :root.navy-theme .app, :root.navy-theme #content { background:var(--wo-bg) !important; color:var(--wo-text-primary) !important; }
:root.navy-theme .card, :root.navy-theme .cockpit-panel, :root.navy-theme .cockpit-overlay, :root.navy-theme .kpi, :root.navy-theme .account-card { background:var(--wo-card) !important; color:var(--wo-text-primary) !important; border-color:var(--wo-border) !important; }
:root.navy-theme h1, :root.navy-theme h2, :root.navy-theme h3, :root.navy-theme .title, :root.navy-theme .account-name, :root.navy-theme .value, :root.navy-theme strong, :root.navy-theme .wo-cockpit-cardhead, :root.navy-theme .wo-readiness-name { color:var(--wo-text-primary) !important; }
:root.navy-theme .muted, :root.navy-theme .small, :root.navy-theme .account-rules, :root.navy-theme p, :root.navy-theme span { color:var(--wo-text-muted) !important; }
:root.navy-theme .sidebar, :root.navy-theme aside { background:linear-gradient(180deg,var(--wo-panel),var(--wo-panel)) !important; }
:root.navy-theme .sidebar *, :root.navy-theme aside * { color:var(--wo-text-primary) !important; }
:root.navy-theme .sidebar .navbtn.active, :root.navy-theme aside .navbtn.active { color:var(--wo-accent) !important; }
:root.midnight-theme body, :root.midnight-theme .app, :root.midnight-theme #content { background:
linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/40px 40px,
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/40px 40px,
linear-gradient(135deg,var(--wo-bg),var(--wo-panel) 55%,var(--wo-bg)) !important; }
.cockpit-pb { overflow:auto; }
.cockpit-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cockpit-row { display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.cockpit-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.cockpit-stat { padding:12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.cockpit-stat .label { font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.08em; }
.cockpit-stat .value { font-size:18px; font-weight:800; margin-top:6px; }
.cockpit-panel-expanded { z-index: 3000; width: 70% !important; height: 70% !important; left: 15% !important; top: 15% !important; }
#cmdpal .cmdrow, #cmdpal .cmdrow * { cursor:pointer; }
.accounts-guide-hero h2, #ag-instruments h2, #ag-trusts h2, #ag-accounts h2 { color:var(--wo-bg) !important; }
.instrument-empty { background:rgba(var(--wo-accent-rgb), 0.08) !important; color:var(--wo-accent) !important; }