/* ═══════════════════════════════════════════════════════════
   SmartTrade AI — Apex Design System  v4.0
   Enterprise trading platform visual language.
   Inspiration: TradingView, Bloomberg Terminal, Stripe, Linear.
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Legacy aliases so older templates referencing these still work */
  --card-bg: #10141c;
  --input-bg: #141a24;
  --surface-2: #141a24;

  /* Surfaces — deeper, more saturated near-black with a cool blue cast */
  --bg-primary: #0a0d13;
  --bg-secondary: #12161f;
  --bg-card: #10141c;
  --bg-card-hover: #171d29;
  --bg-sidebar: #090b10;
  /* Semantic surface aliases used by new shared components. Keep the older
     --bg-* names above so existing page-local styles remain compatible. */
  --surface-page: var(--bg-primary);
  --surface-raised: var(--bg-secondary);
  --surface-card: var(--bg-card);
  --surface-hover: var(--bg-card-hover);
  --surface-overlay: rgba(9, 11, 16, 0.92);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(245, 166, 35, 0.5);
  --text-primary: #f1f5fb;
  --text-secondary: #95a2b8;
  --text-muted: #7683a0;
  --text-disabled: #536077;
  --focus-ring: var(--accent-light);
  --focus-ring-offset: var(--bg-primary);
  /* ~4.85:1 on --bg-card — WCAG AA for normal text */
  --accent: #f5a623;
  --accent-light: #ffc861;
  --accent-dark: #d97f0a;
  --green: #22d97f;
  /* brighter for pop on dark surfaces */
  --green-bg: rgba(34, 217, 127, 0.12);
  --red: #ff5a6a;
  /* brighter for pop on dark surfaces */
  --red-bg: rgba(255, 90, 106, 0.12);
  --yellow: #f5b544;
  --yellow-bg: rgba(245, 181, 68, 0.12);
  --blue: #3b82f6;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --purple: #8b5cf6;
  --purple-bg: rgba(139, 92, 246, 0.12);
  --cyan: #06b6d4;
  --cyan-bg: rgba(6, 182, 212, 0.12);

  /* Semantic status names keep UI states and data visualizations aligned. */
  --success: var(--green);
  --success-bg: var(--green-bg);
  --danger: var(--red);
  --danger-bg: var(--red-bg);
  --warning: var(--yellow);
  --warning-bg: var(--yellow-bg);
  --info: var(--blue);
  --info-bg: var(--blue-bg);

  /* Semantic signal tokens — named by meaning, map to base palette so UI +
     charts stay consistent. Charts read these via getComputedStyle. */
  --up: var(--green);
  --up-bg: var(--green-bg);
  --down: var(--red);
  --down-bg: var(--red-bg);
  --hold: var(--yellow);
  --hold-bg: var(--yellow-bg);
  --exit: var(--purple);
  --exit-bg: var(--purple-bg);

  --sidebar-width: 256px;
  --sidebar-collapsed: 60px;
  --navbar-height: 56px;
  --ticker-height: 32px;
  --control-height-sm: 32px;
  --control-height: 38px;
  --control-height-lg: 44px;

  --glass: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius scale — tightened for a denser, data-terminal feel */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 56px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(245, 166, 35, 0.15), 0 8px 32px rgba(245, 166, 35, 0.18);

  --transition: 0.16s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: 0.28s cubic-bezier(.4, 0, .2, 1);
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --z-sidebar: 1000;
  --z-overlay: 2000;
  --z-toast: 9999;

  /* Typefaces — Inter for UI/prose, JetBrains Mono for all numerics/data
     (prices, %s, KPI values, table numbers) for a trading-terminal feel */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #f5a623 0%, #e0921a 60%, #d97f0a 100%);
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
  --grad-bull: linear-gradient(135deg, #059669, #10b981);
  --grad-bear: linear-gradient(135deg, #e11d48, #f43f5e);

  /* card accent for KPI cards */
  --card-accent: var(--accent);
}

[data-theme="light"] {
  --bg-primary: #f3f5f9;
  --bg-secondary: #e8ebf1;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafc;
  --bg-sidebar: #ffffff;
  --surface-overlay: rgba(255, 255, 255, 0.94);
  --border: rgba(15, 23, 42, 0.09);
  --border-hover: rgba(15, 23, 42, 0.18);
  --border-accent: rgba(245, 166, 35, 0.4);
  --text-primary: #0b1220;
  --text-secondary: #4b5872;
  --text-muted: #64708c;
  --text-disabled: #9aa5b8;
  --focus-ring: #b56800;
  --focus-ring-offset: #f3f5f9;
  /* ~4.95:1 on white --bg-card — WCAG AA for normal text */
  --glass: rgba(15, 23, 42, 0.025);
  --glass-border: rgba(15, 23, 42, 0.07);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px rgba(245, 166, 35, 0.12), 0 8px 28px rgba(245, 166, 35, 0.1);
  /* Legacy aliases (--card-bg/--input-bg/--surface-2) were never overridden
     here, so any template still referencing them stayed dark permanently
     even in light mode (e.g. admin/api_configs.html config panel & modals). */
  --card-bg: var(--bg-card);
  --input-bg: var(--bg-secondary);
  --surface-2: var(--bg-secondary);

  /* --green/--red/--yellow are tuned bright/pastel "for pop on dark
     surfaces" (see their :root definitions) — on white cards those same
     hues drop below WCAG AA contrast (e.g. --yellow #f5b544 on its own
     --yellow-bg tint is ~1.8:1). Darken all three for light theme so every
     rule built on these tokens (badges, heatmap tiles, signal/risk pills)
     inherits legible text without needing a per-selector fix. */
  --green: #0f9d6e;
  --red: #dc2626;
  --yellow: #b45309;
}

/* Light-theme contrast fixes for pastel status text that was tuned for a dark
   background (too low-contrast on white cards). Dark theme values untouched. */
[data-theme="light"] .ta-buy {
  color: #0f9d6e;
}

[data-theme="light"] .ta-sell {
  color: #dc2626;
}

/* "Silver" slate-gray accents (icons/badges) used on commodities/markets pages —
   #94a3b8 is legible on dark cards but too light on white ones. */
[data-theme="light"] .silver-tone {
  color: #475569 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* body already has this, but body's own overflow-x doesn't reliably stop
     page-level horizontal scroll — html is the actual scrolling root in
     most browsers, and position:fixed elements (the off-canvas mobile
     sidebar included) escape body's overflow clipping entirely since they
     sit relative to the viewport, not to body. Without this, mobile
     browsers could still scroll the whole page horizontally and reveal
     bare background past the right/left edge of the real content. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keyboard users can bypass the persistent dashboard chrome. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #10141c;
  font-weight: 700;
  transform: translateY(-140%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ── Monospace numerics ───────────────────────────────────────
   Trading-terminal typography: all numbers/prices/percentages/data
   render in JetBrains Mono for a premium terminal feel and perfectly
   aligned columns. Prose and UI labels stay in Inter. */
.kpi-value,
.gauge-value,
.cell-symbol,
.cell-change,
.cell-price,
.ticker-symbol,
.ticker-price,
.ticker-change,
.qs-value,
.quick-stat .qs-value,
.asset-card .asset-price,
.asset-card .asset-change,
.price-hero,
#livePrice,
.mtf-summary-card .value,
.stat-row-value,
.indicator-value,
.confidence-wrap small,
.score-breakdown-val,
.signal-progress-label,
.mover-price,
.mover-chg,
.asset-cell-sub,
.logline,
.smart-table td .num,
.smart-table td.num,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Slightly tighten mono at large sizes so big values don't feel wide */
.kpi-value,
.gauge-value,
.price-hero,
#livePrice,
.mtf-summary-card .value {
  letter-spacing: -0.5px;
}

/* Data tables: numeric cells in mono for aligned columns; the asset-name
   cell and any explicitly sans cell stay in Inter for readability. */
.smart-table tbody td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.smart-table tbody td .asset-cell-name,
.smart-table tbody td.text-sans,
.smart-table tbody td .signal-badge,
.smart-table tbody td .badge-tag,
.smart-table tbody td[colspan] {
  font-family: var(--font-sans);
}

.asset-cell-name {
  font-family: var(--font-sans);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(245, 166, 35, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.55);
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — flat, no accordion, section labels
   ════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* Pre-paint equivalent of .sidebar.collapsed/.main-wrapper.expanded — set on
   <html> by an early <head> script (before #sidebar/#mainWrapper even exist
   in the DOM) so a saved collapsed preference never flashes expanded first.
   Only the couple of rules that are visible at first paint; the real
   .collapsed/.expanded classes (with all their detail rules) take over a
   moment later once JS can reach the actual elements. */
html.sidebar-preload-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

html.sidebar-preload-collapsed .main-wrapper {
  margin-left: var(--sidebar-collapsed);
}

html.sidebar-preload-collapsed .sidebar .brand-name,
html.sidebar-preload-collapsed .sidebar .nav-text,
html.sidebar-preload-collapsed .sidebar .nav-badge,
html.sidebar-preload-collapsed .sidebar .badge-live,
html.sidebar-preload-collapsed .sidebar .badge-pro,
html.sidebar-preload-collapsed .sidebar .badge-tag,
html.sidebar-preload-collapsed .sidebar .sidebar-user-info {
  display: none !important;
}

/* ── Sidebar Header ──────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 50px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: var(--grad-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(245, 166, 35, 0.45);
}

.brand-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 8px;
  transition: var(--transition);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--glass);
  color: var(--text-primary);
}

/* ── Nav (flat, scrollable) ──────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Collapsible nav group ───────────────────────────────── */
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 3px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  margin: 3px 6px 0;
  transition: background 0.15s;
  width: calc(100% - 12px);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
}

.nav-group-header:hover {
  background: var(--glass);
}

.nav-section-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  flex: 1;
}

.nav-group-arrow {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Body hidden by default; JS adds/removes .open on .nav-group */
.nav-group-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.nav-group.open>.nav-group-body {
  max-height: 500px;
}

/* Arrow rotates when open */
.nav-group:not(.open)>.nav-group-header .nav-group-arrow {
  transform: rotate(-90deg);
}

.nav-group.open>.nav-group-header .nav-group-arrow {
  transform: rotate(0deg);
}

/* Collapsed sidebar (icon-only): always show all items, hide labels/arrows */
.sidebar.collapsed .nav-group-header {
  justify-content: center;
  padding: 4px 0 3px;
  margin: 3px 4px 0;
}

.sidebar.collapsed .nav-section-label {
  display: none;
}

.sidebar.collapsed .nav-group-arrow {
  display: none;
}

.sidebar.collapsed .nav-group-body {
  max-height: 500px !important;
}

/* Section separator no longer needed */
.nav-section-sep {
  display: none;
}

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  min-height: 32px;
  border-radius: 7px;
  margin: 1px 6px;
  border-left: none;
}

.nav-item i {
  font-size: 14px;
  flex-shrink: 0;
  width: 17px;
  text-align: center;
  color: var(--text-muted);
  transition: color 0.15s;
}

/* Per-icon base colors — each nav icon gets a distinct resting hue drawn
   from the app's existing semantic tokens (amber/green/red/yellow/blue/
   purple/cyan), so the sidebar reads as colorful/scannable like the
   reference design instead of one flat muted tone. These rules must stay
   ABOVE the .nav-item:hover i / .nav-item.active i rules below in source
   order: both sides are equal specificity (0,2,1), so whichever comes
   later in the cascade wins — keeping hover/active below here means
   hovering or activating a nav item still overrides the per-icon color,
   same as before this change. */
.nav-item i.nav-icon-amber   { color: var(--accent); }
.nav-item i.nav-icon-green   { color: var(--green); }
.nav-item i.nav-icon-red     { color: var(--red); }
.nav-item i.nav-icon-yellow  { color: var(--yellow); }
.nav-item i.nav-icon-blue    { color: var(--blue); }
.nav-item i.nav-icon-purple  { color: var(--purple); }
.nav-item i.nav-icon-cyan    { color: var(--cyan); }

.nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.nav-item:hover i {
  color: var(--accent-light);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0.05));
  color: var(--accent-light);
  font-weight: 600;
}

.nav-item.active i {
  color: var(--accent-light);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  background: var(--grad-accent);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
}

.nav-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.5;
  flex-shrink: 0;
}

.badge-live {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.badge-pro {
  background: rgba(245, 166, 35, 0.15);
  color: var(--accent-light);
  border: 1px solid rgba(245, 166, 35, 0.3);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-pro.nav-tier-gate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-pro.nav-tier-gate::before {
  font-family: "bootstrap-icons";
  content: "\f47a";
  font-size: 8px;
}

/* Collapsed sidebar — icon only + tooltip */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-badge,
/* .nav-badge above is dead CSS — no template ever used that class. The
   real badges (LIVE / BASIC / PREMIUM / PRO / ON) are .badge-live,
   .badge-pro and .badge-tag, which this never matched — so they stayed
   visible as loose text next to the icon in icon-only mode. */
.sidebar.collapsed .badge-live,
.sidebar.collapsed .badge-pro,
.sidebar.collapsed .badge-tag,
.sidebar.collapsed .sidebar-user-info {
  display: none !important;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 11px 8px;
}

.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 7px 8px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 7px;
  margin: 1px 6px;
}

.sidebar.collapsed .nav-item.active::before {
  display: none;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .sidebar-footer .nav-item {
  position: relative;
}

/* Hover tooltip for collapsed-sidebar nav icons — a single shared element
   positioned via JS (see base.html), not a per-item ::after. .sidebar has
   overflow:hidden (needed so nav-text doesn't flash outside the narrowed
   width during the collapse transition), which would silently clip an
   ::after positioned outside the sidebar's own box — this lives in <body>
   instead so it isn't clipped by that. */
#sidebarTooltip {
  position: fixed;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2000;
}

#sidebarTooltip.show {
  opacity: 1;
}

/* ── Sidebar Footer ──────────────────────────────────────── */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 4px 0 3px;
  flex-shrink: 0;
}

.sidebar-footer .nav-item {
  padding-left: 16px;
  min-height: 32px;
  font-size: 13px;
}

/* ── Sidebar User (bottom) ───────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition);
}

.sidebar-user:hover {
  background: var(--glass);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  color: white;
}

.user-avatar-sm {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  color: white;
  cursor: pointer;
}

.sidebar-user-info {
  overflow: hidden;
  flex: 1;
}

.user-name {
  font-weight: 600;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.user-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Legacy group toggle — hidden, kept for JS that might reference it */
.nav-group-toggle {
  display: none !important;
}

.nav-group-items {
  max-height: none !important;
  overflow: visible !important;
}

.nav-label,
.nav-chevron,
.nav-group-icon {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   MAIN WRAPPER
   ════════════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition);
  display: flex;
  flex-direction: column;
}

.main-wrapper.expanded {
  margin-left: var(--sidebar-collapsed);
}

/* ════════════════════════════════════════════════════════════
   TOP NAVBAR — minimal
   ════════════════════════════════════════════════════════════ */
.top-navbar {
  position: sticky;
  top: 0;
  height: var(--navbar-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.breadcrumb-nav {
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  font-size: 14px;
}

.btn-icon:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* ── Command Palette Trigger ─────────────────────────────── */
.cmd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 200px;
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
}

.cmd-trigger:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}

.cmd-trigger kbd {
  margin-left: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: inherit;
}

@media (max-width: 768px) {
  .cmd-trigger {
    min-width: 36px;
  }

  .cmd-trigger span {
    display: none;
  }

  .cmd-trigger kbd {
    display: none;
  }
}

/* Notification bell */
.notification-bell {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: var(--transition);
}

.notification-bell:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary);
}

.notif-dropdown {
  position: fixed;
  top: calc(var(--navbar-height) + var(--ticker-height) + 6px);
  right: 12px;
  width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  max-height: 460px;
  overflow-y: auto;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.notif-item:hover {
  background: var(--glass);
}

.notif-item.unread {
  background: rgba(245, 166, 35, 0.05);
  position: relative;
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.notif-item.unread {
  padding-left: 20px;
}

/* Read notifications now stay visible in the list (previously vanished
   entirely once read, since the dropdown only ever fetched unread=true) —
   dim them slightly so unread still reads as "new". */
.notif-item:not(.unread) {
  opacity: 0.65;
}

.notif-item:not(.unread):hover {
  opacity: 1;
}

/* User menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: var(--transition);
  font-size: 12.5px;
}

.user-menu:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* WS Status */
.topbar-clock {
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.topbar-clock #clockDate {
  color: var(--text-muted);
}

.topbar-clock #clockTime {
  font-weight: 600;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

.ws-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--border);
}

.ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.ws-dot.live {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: pulse-dot 2s infinite;
}

.ws-dot.delayed {
  background: #f59e0b;
}

.ws-dot.offline {
  background: #ef4444;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
  }
}

/* ════════════════════════════════════════════════════════════
   TICKER STRIP — thin bar below navbar
   ════════════════════════════════════════════════════════════ */
.ticker-strip {
  height: var(--ticker-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.ticker-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-secondary), transparent);
}

.ticker-strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 1;
  background: linear-gradient(-90deg, var(--bg-secondary), transparent);
}

.ticker-ribbon {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ticker-ribbon::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-secondary), transparent);
}

.ticker-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  z-index: 1;
  background: linear-gradient(-90deg, var(--bg-secondary), transparent);
}

.ticker-track {
  display: flex;
  gap: 28px;
  /* Matches the landing page's marquee speed (32s) for a consistent feel
     from the public homepage into the logged-in dashboard. */
  animation: ticker-scroll 32s linear infinite;
  white-space: nowrap;
  font-size: 11.5px;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.ticker-toggle-btn {
  flex: none;
  position: relative;
  z-index: 2;
  width: 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: color .15s;
}

.ticker-toggle-btn:hover {
  color: var(--text-primary);
}

/* Collapsed height is applied by JS via the --ticker-height custom property
   itself (not a separate variable) so the notif-dropdown's top offset
   (which also reads --ticker-height) stays correctly in sync in both states. */
.ticker-strip.collapsed .ticker-ribbon {
  display: none;
}

.ticker-strip.collapsed .ticker-toggle-btn {
  width: 100%;
  border-left: none;
  font-size: 9px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ticker-symbol {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 11.5px;
}

.ticker-price {
  color: var(--text-secondary);
  font-size: 11px;
}

.ticker-change.up {
  color: var(--green);
  font-size: 11px;
}

.ticker-change.down {
  color: var(--red);
  font-size: 11px;
}

/* Live dot in ticker */
.ticker-live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 4px;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   COMMAND PALETTE OVERLAY
   ════════════════════════════════════════════════════════════ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cmd-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cmd-palette {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), var(--shadow-glow);
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.18s cubic-bezier(.16, 1, .3, 1);
}

.cmd-overlay.open .cmd-palette {
  transform: translateY(0) scale(1);
}

.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.cmd-input-wrap i {
  color: var(--text-muted);
  font-size: 15px;
  flex-shrink: 0;
}

.cmd-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
}

.cmd-input::placeholder {
  color: var(--text-muted);
}

.cmd-esc {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
}

.cmd-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 0;
}

.cmd-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 18px 4px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  color: var(--text-secondary);
}

.cmd-item:hover,
.cmd-item.highlighted {
  background: rgba(245, 166, 35, 0.1);
  color: var(--text-primary);
}

.cmd-item i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.cmd-item:hover i,
.cmd-item.highlighted i {
  color: var(--accent-light);
}

.cmd-item-label {
  font-size: 13.5px;
  font-weight: 500;
}

.cmd-item-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: auto;
}

.cmd-item .badge-pro.nav-tier-gate {
  margin-left: auto;
}

.cmd-footer {
  border-top: 1px solid var(--border);
  padding: 8px 18px;
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.cmd-footer kbd {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════
   PAGE CONTENT
   ════════════════════════════════════════════════════════════ */
.page-content {
  position: relative;
  padding: 20px 24px 28px;
  flex: 1;
}

/* Route-aware atmosphere gives dense modules a visual starting point while
   keeping all operational data in normal, accessible HTML components. */
.page-content::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: min(560px, 58vw);
  height: 260px;
  background: url('/static/img/hero-market-atmosphere.png') top right / cover no-repeat;
  opacity: 0.13;
  pointer-events: none;
  mask-image: linear-gradient(135deg, transparent 10%, #000 70%);
}

body[data-active="crypto"] .page-content::before,
body[data-active="forex"] .page-content::before,
body[data-active="commodity"] .page-content::before,
body[data-active="commodities"] .page-content::before,
body[data-active="stocks"] .page-content::before,
body[data-active="indian_stock"] .page-content::before,
body[data-active="indices"] .page-content::before,
body[data-active="index"] .page-content::before,
body[data-active="terminal"] .page-content::before {
  background-image: url('/static/img/markets-atmosphere.png');
  opacity: 0.16;
}

body[data-active="risk"] .page-content::before,
body[data-active="portfolio"] .page-content::before,
body[data-active="performance"] .page-content::before,
body[data-active="journal"] .page-content::before,
body[data-active="reports"] .page-content::before {
  background-image: url('/static/img/legal-center-atmosphere.png');
  opacity: 0.13;
}

.financial-disclaimer-strip {
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}
.financial-disclaimer-strip strong {
  color: var(--text-secondary);
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.page-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 3px;
}

/* Eyebrow — small uppercase section label above a page title
   (e.g. "OVERVIEW" over "Dashboard"). Terminal/enterprise hierarchy cue. */
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 5px;
  display: block;
}

/* Page greeting */
.page-greeting {
  margin-bottom: 6px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.page-greeting-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Page-level filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filter-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 4px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   KPI CARDS — 4-card layout, large numbers
   ════════════════════════════════════════════════════════════ */
.kpi-card {
  background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-secondary) 130%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--card-accent, var(--accent));
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--card-accent, var(--accent)) 65%, transparent);
}

.kpi-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

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

.kpi-card.green {
  --card-accent: var(--green);
}

.kpi-card.red {
  --card-accent: var(--red);
}

.kpi-card.yellow {
  --card-accent: var(--yellow);
}

.kpi-card.blue {
  --card-accent: var(--blue);
}

.kpi-card.purple {
  --card-accent: var(--purple);
}

/* Alarm state for metrics that must actually warn (e.g. system CPU/RAM
   crossing a critical threshold) — distinct from the decorative per-card
   colors above, which don't otherwise change based on the value shown. */
@keyframes pulse-red {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.45);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 90, 106, 0);
  }
}

.kpi-card.alert,
.confidence-fill.alert {
  animation: pulse-red 1.6s ease-in-out infinite;
}

.kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.kpi-top>div:first-child {
  min-width: 0;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
  margin: 7px 0 8px;
  letter-spacing: -1.6px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kpi-change {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

.kpi-change.up {
  color: var(--green);
}

.kpi-change.down {
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════
   SECTION CARDS
   ════════════════════════════════════════════════════════════ */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
  position: relative;
  transition: border-color var(--transition-slow);
}

/* A quiet curved highlight adds depth to dense trading surfaces without
   competing with prices, signals, or chart data. */
.section-card::after {
  content: '';
  position: absolute;
  width: 240px;
  height: 90px;
  right: -78px;
  bottom: -54px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 50%;
  transform: rotate(-10deg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}

.section-card-header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, var(--glass), transparent);
}

.section-card-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.section-card-body {
  padding: 18px;
}

.admin-tool-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.admin-tool-link > i {
  width: 26px;
  flex: 0 0 26px;
  color: var(--accent);
  font-size: 16px;
  text-align: center;
}

.admin-tool-link span {
  min-width: 0;
}

.admin-tool-link strong,
.admin-tool-link small {
  display: block;
}

.admin-tool-link strong {
  font-size: 12px;
  font-weight: 700;
}

.admin-tool-link small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

.admin-tool-link:hover {
  border-color: var(--accent-violet, var(--accent));
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(10px);
}

/* ════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════ */
.smart-table {
  width: 100%;
  border-collapse: collapse;
}

.smart-table thead th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.smart-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--text-primary);
}

.smart-table tbody td,
.smart-table tbody td strong,
.smart-table tbody td span,
.smart-table tbody td a {
  color: var(--text-primary);
}

.smart-table thead th {
  color: var(--text-muted);
}

.smart-table tbody tr {
  transition: background 0.12s;
}

.smart-table tbody tr:hover {
  background: var(--glass);
}

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

/* Click-to-sort table headers (Delta Scanner BUY/SELL, etc.) */
.smart-table thead th.sortable-th {
  cursor: pointer;
  user-select: none;
}
.smart-table thead th.sortable-th > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.smart-table thead th.sortable-th:hover {
  color: var(--text-primary);
  background: var(--glass);
}
.smart-table thead th.sortable-th .sort-th-icon {
  font-size: 9px;
  opacity: 0.45;
}
.smart-table thead th.sortable-th:hover .sort-th-icon {
  opacity: 0.8;
}
.smart-table thead th.sortable-th.sort-active {
  color: var(--accent);
}
.smart-table thead th.sortable-th.sort-active .sort-th-icon {
  opacity: 1;
  color: var(--accent);
}

.smart-table thead th:first-child {
  border-top-left-radius: var(--radius-xs);
}

.smart-table thead th:last-child {
  border-top-right-radius: var(--radius-xs);
}

/* Asset cell with sub-info */
.asset-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-cell-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
}

.asset-cell-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* SL/Target row inside confidence cell */
.signal-levels {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.signal-levels .sl {
  color: var(--red);
}

.signal-levels .tgt {
  color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   SIGNAL BADGES
   ════════════════════════════════════════════════════════════ */
.signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.signal-buy {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.06) inset;
}

.signal-sell {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.06) inset;
}

.signal-hold {
  background: var(--yellow-bg);
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.signal-exit {
  background: var(--purple-bg);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.35);
}

/* ════════════════════════════════════════════════════════════
   CONFIDENCE BAR
   ════════════════════════════════════════════════════════════ */
.confidence-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}

.confidence-bar {
  height: 5px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.confidence-fill {
  height: 5px;
  border-radius: 10px;
  transition: width 0.7s ease;
  filter: saturate(1.15);
}

/* ════════════════════════════════════════════════════════════
   SCORE BREAKDOWN WIDGET
   ════════════════════════════════════════════════════════════ */
.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.score-breakdown-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.score-breakdown-label {
  width: 72px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.score-breakdown-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.score-breakdown-fill {
  height: 4px;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.score-breakdown-val {
  width: 28px;
  text-align: right;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Signal P&L progress */
.signal-progress-wrap {
  margin-top: 6px;
}

.signal-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

.signal-progress-fill {
  height: 4px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.signal-progress-fill.profit {
  background: var(--green);
}

.signal-progress-fill.loss {
  background: var(--red);
}

.signal-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════
   HEATMAP
   ════════════════════════════════════════════════════════════ */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 7px;
  padding: 14px;
}

.heatmap-cell {
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  padding: 11px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 1px solid var(--border);
}

.heatmap-cell:hover {
  transform: scale(1.05) translateY(-1px);
  z-index: 5;
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.heatmap-cell.up {
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04));
  border-color: rgba(16, 185, 129, 0.28);
}

.heatmap-cell.down {
  background: linear-gradient(165deg, rgba(244, 63, 94, 0.14), rgba(244, 63, 94, 0.04));
  border-color: rgba(244, 63, 94, 0.28);
}

.cell-symbol {
  font-weight: 800;
  font-size: 12px;
  color: var(--text-primary);
}

.cell-change {
  font-size: 13px;
  font-weight: 800;
  margin: 3px 0 1px;
  font-variant-numeric: tabular-nums;
}

.cell-price {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   FORMS & BUTTONS
   ════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12) !important;
  background: var(--bg-secondary) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.form-label {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 5px;
}

.form-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Plain Bootstrap tables (anything using .table without this app's own
   .smart-table) inherit Bootstrap's own --bs-table-bg, which defaults to
   --bs-body-bg — white — since this app themes its own --bg-* tokens
   instead of Bootstrap's variables. Left alone, every plain .table on a
   dark page renders as a white block with dark-on-dark Bootstrap text.
   Re-pointing Bootstrap's own table variables at this app's tokens fixes
   every plain .table site-wide, not just the ones someone remembers to
   add .smart-table to. */
.table {
  --bs-table-bg: var(--bg-secondary);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--glass);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--glass);
  --bs-table-hover-color: var(--text-primary);
}
.table > thead {
  --bs-table-color: var(--text-muted);
}

/* Toggle switches — every .form-switch site-wide (Settings notifications,
   admin nav-item toggles, Telegram alert categories, etc.) previously fell
   through to Bootstrap's stock blue for "on" with no distinct "off" state,
   which reads as an unstyled foreign widget against this app's dark/amber
   terminal theme and gives no at-a-glance read of which switches are live.
   Green/red match the --green/--red this app already uses everywhere else
   for status (P&L, verdicts) — checked = on = green, unchecked = off = a
   muted red tint, not just "not blue". */
.form-switch .form-check-input:checked {
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}

.form-switch .form-check-input:not(:checked) {
  background-color: rgba(255, 90, 106, 0.16) !important;
  border-color: var(--red) !important;
}

.form-switch .form-check-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18) !important;
}

.form-switch .form-check-input:disabled {
  opacity: 0.45;
}

select option {
  background: #131920;
  color: #e8edf5;
}

.btn-primary {
  background: var(--grad-accent) !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  color: #fff !important;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition) !important;
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.38) !important;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-light {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
}

.btn-outline-light:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
  background: var(--glass) !important;
}

.btn-accent {
  color: #fff !important;
  font-weight: 600;
}

.btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover {
  background: var(--glass) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   SEARCH BAR
   ════════════════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  transition: var(--transition);
}

.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.1);
}

.search-bar input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13.5px;
  width: 100%;
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

.search-bar i {
  color: var(--text-muted);
}

/* Optional clear (x) button — add <i class="bi bi-x-circle-fill search-bar-clear">
   as the last child of a .search-bar and call wireSearchClear() (app.js) on the
   input. Hidden until the bar has a value, so existing .search-bar usages that
   don't include this element are completely unaffected. */
.search-bar-clear {
  cursor: pointer;
  flex-shrink: 0;
  display: none;
  font-size: 13px;
}
.search-bar-clear:hover { color: var(--text-secondary) !important; }
.search-bar.has-value .search-bar-clear { display: block; }

/* ════════════════════════════════════════════════════════════
   BADGES / TAGS
   ════════════════════════════════════════════════════════════ */
.badge-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge {
  color: inherit;
}

.badge.bg-secondary {
  background: rgba(100, 116, 139, 0.2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

.badge.bg-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.badge.bg-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

[data-theme="light"] .badge.bg-success {
  color: #0f9d6e !important;
}

[data-theme="light"] .badge.bg-danger {
  color: #dc2626 !important;
}

[data-theme="light"] .badge.bg-warning {
  color: #b45309 !important;
}

[data-theme="light"] .badge.bg-info {
  color: #1d4ed8 !important;
}

.badge.bg-primary {
  background: rgba(245, 166, 35, 0.2) !important;
  color: var(--accent-light) !important;
  border: 1px solid rgba(245, 166, 35, 0.35) !important;
}

.bg-glass {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

/* ════════════════════════════════════════════════════════════
   SKELETON / LOADING STATES
   ════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255, 255, 255, 0.04) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-row {
  height: 44px;
  margin-bottom: 2px;
}

.skeleton-kpi {
  height: 90px;
  border-radius: var(--radius);
}

.skeleton-text {
  height: 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-text.w-50 {
  width: 50%;
}

.skeleton-text.w-75 {
  width: 75%;
}

.skeleton-text.w-30 {
  width: 30%;
}

/* ════════════════════════════════════════════════════════════
   AUTH PAGES
   ════════════════════════════════════════════════════════════ */
.auth-container {
  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(245, 166, 35, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.07) 0%, transparent 55%);
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ════════════════════════════════════════════════════════════
   CHART CONTAINERS
   ════════════════════════════════════════════════════════════ */
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-wrapper-lg {
  height: 420px;
}

.chart-wrapper-sm {
  height: 150px;
}

/* ════════════════════════════════════════════════════════════
   ASSET CARDS (market pages)
   ════════════════════════════════════════════════════════════ */
.asset-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s;
  height: 100%;
}

.asset-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

.asset-card .asset-symbol {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary);
}

.asset-card .asset-name {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 1px;
}

.asset-card .asset-price {
  font-size: 18px;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.asset-card .asset-change {
  font-size: 12px;
  margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════
   QUICK STATS
   ════════════════════════════════════════════════════════════ */
.quick-stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}

.quick-stat .qs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.quick-stat .qs-value {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-top: 3px;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════
   SENTIMENT GAUGE
   ════════════════════════════════════════════════════════════ */
.gauge-value {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
}

.gauge-label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

/* Fear & Greed style gradient sentiment track with a sliding marker pin.
   Full-width red→amber→green gradient; marker positioned via --pos (0–100%). */
.sentiment-track {
  position: relative;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%);
}

.sentiment-track .sentiment-marker {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 4px;
  height: 16px;
  border-radius: 3px;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 2px 6px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  transition: left 0.6s cubic-bezier(.4, 0, .2, 1);
}

.sentiment-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════
   NAV TABS
   ════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-color: var(--border) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px 8px 0 0 !important;
  transition: var(--transition);
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--glass) !important;
}

.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
  border-color: var(--border) var(--border) var(--bg-card) !important;
}

/* ════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════ */
.pagination .page-link {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
}

.pagination .page-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

.pagination .page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.smart-toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  min-width: 280px;
}

/* ════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════ */
.modal {
  z-index: 99999 !important;
}

.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
}

.modal-header,
.modal-footer {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

.modal-body {
  background: var(--bg-card) !important;
}

.modal-backdrop {
  z-index: 99998 !important;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.65) !important;
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-green {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-in {
  animation: fadeInUp 0.3s ease forwards;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-green 1.8s infinite;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}

/* ════════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════════ */
.text-green {
  color: var(--green) !important;
}

.text-red {
  color: var(--red) !important;
}

.text-yellow {
  color: var(--yellow) !important;
}

.text-blue {
  color: var(--blue) !important;
}

.text-purple {
  color: var(--purple) !important;
}

.text-accent {
  color: var(--accent-light) !important;
}

.bg-glass {
  background: var(--glass) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.fs-xs {
  font-size: 11px !important;
  color: var(--text-secondary);
}

.fs-sm {
  font-size: 12.5px !important;
}

.number-ticker {
  display: inline-block;
  transition: all 0.4s ease;
}

.kpi-value {
  color: var(--text-primary);
}

.kpi-value.text-green {
  color: var(--green) !important;
}

.kpi-value.text-red {
  color: var(--red) !important;
}

.kpi-value.text-yellow {
  color: var(--yellow) !important;
}

.kpi-value.text-blue {
  color: var(--blue) !important;
}

.kpi-value.text-purple {
  color: var(--purple) !important;
}

.kpi-change {
  color: var(--text-secondary) !important;
  font-size: 11.5px;
}

.section-card-title {
  color: var(--text-primary) !important;
}

.page-subtitle {
  color: var(--text-secondary) !important;
}

.breadcrumb-nav {
  color: var(--text-secondary) !important;
}

.form-label {
  color: var(--text-secondary) !important;
}

.notif-header {
  color: var(--text-primary);
}

.spinner-border {
  border-color: var(--accent);
  border-right-color: transparent;
}

.progress {
  background: var(--border) !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--green)) !important;
}

.ticker-symbol {
  color: var(--text-primary) !important;
}

.ticker-price {
  color: var(--text-secondary) !important;
}

#markAllRead {
  color: var(--text-secondary) !important;
}

#markAllRead:hover {
  color: var(--text-primary) !important;
}

.auth-card .form-control {
  color: var(--text-primary) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
}

.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .cmd-trigger {
    min-width: 160px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 14px 14px 20px;
  }

  .ticker-strip {
    display: none;
  }

  .page-title {
    font-size: 18px;
  }

  .kpi-value {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .filter-bar {
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════
   TA SUMMARY — rating cells and analysis decision layers
   ════════════════════════════════════════════════════════════ */
.analysis-insight-strip {
  display: grid;
  grid-template-columns: minmax(300px, 1.6fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
  align-items: stretch;
  margin: 18px 0 20px;
  padding: 12px;
  border: 1px solid rgba(58, 189, 214, .26);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(18, 50, 63, .68), rgba(16, 24, 36, .82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.12);
}
.analysis-insight-lead, .analysis-insight-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.analysis-insight-lead { padding: 2px 10px 2px 2px; }
.analysis-insight-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; color: #67e8f9; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.28); font-size: 17px; }
.analysis-insight-kicker { display: block; color: #67e8f9; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 2px; }
.analysis-insight-lead strong { display: block; color: var(--text-primary); font-size: 13px; }
.analysis-insight-lead p { margin: 2px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.analysis-insight-item { padding: 8px 10px; border-left: 1px solid rgba(148,163,184,.16); color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.analysis-insight-item i { color: var(--accent); font-size: 14px; }
.analysis-insight-item b { display: block; color: var(--text-secondary); font-size: 11px; }
.mtf-insight-strip { margin-top: 14px; margin-bottom: 18px; }
.analysis-kpi-row .kpi-card { height: 100%; min-height: 112px; }
.analysis-kpi-row .kpi-change { color: var(--text-muted); }
.ta-insight-strip + .nav-tabs { margin-top: 2px; }
.signal-workflow-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 16px;
  padding: 8px 12px;
  border: 1px solid rgba(53, 201, 232, .22);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(53,201,232,.06), rgba(139,124,255,.04), transparent);
  color: var(--text-muted);
  font-size: 11px;
}
.signal-workflow-label { color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-right: 4px; }
.signal-workflow-bar a { color: var(--text-secondary); text-decoration: none; padding: 4px 7px; border-radius: 6px; }
.signal-workflow-bar a:hover, .signal-workflow-bar a.active { color: var(--accent-cyan); background: rgba(53,201,232,.1); }
.signal-workflow-arrow { color: var(--text-muted); font-size: 9px; }
.scanner-discovery-note { padding: 8px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(245,166,35,.045); color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.scanner-discovery-note i { color: var(--accent); }
.scanner-discovery-note a { color: var(--accent-light); text-decoration: none; font-weight: 700; }
.scanner-discovery-note a:hover { text-decoration: underline; }
#ratingsWrap, #aiRatingsWrap, #emaRatingsWrap, #matrixWrap { position: relative; }
#ratingsWrap .smart-table, #aiRatingsWrap .smart-table, #emaRatingsWrap .smart-table, #matrixWrap .smart-table { width: 100%; }
#ratingsWrap::after, #aiRatingsWrap::after, #emaRatingsWrap::after, #matrixWrap::after { content: 'Scroll horizontally to explore all timeframes'; display: block; padding: 7px 12px; color: var(--text-muted); font-size: 10px; text-align: right; background: linear-gradient(90deg, transparent, rgba(34,211,238,.05)); }
@media (max-width: 900px) {
  .analysis-insight-strip { grid-template-columns: 1fr 1fr; }
  .analysis-insight-lead { grid-column: 1 / -1; }
  .analysis-insight-item { border-left: 0; border-top: 1px solid rgba(148,163,184,.16); }
}
@media (max-width: 576px) {
  .analysis-insight-strip { grid-template-columns: 1fr; gap: 0; padding: 10px; }
  .analysis-insight-lead { grid-column: auto; padding: 2px 0 10px; }
  .analysis-insight-item { padding: 9px 2px; }
  .analysis-insight-lead p { max-width: 240px; }
  .analysis-kpi-row { margin-bottom: 16px !important; }
  .analysis-kpi-row .kpi-card { min-height: 96px; padding: 12px; }
  .analysis-kpi-row .kpi-value { font-size: 1.55rem; }
}

.rating-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ta-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .3px;
}

.ta-strong-buy {
  background: rgba(16, 185, 129, 0.20);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ta-buy {
  background: rgba(110, 231, 183, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.35);
}

.ta-neutral {
  background: rgba(100, 116, 139, 0.18);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.30);
}

.ta-sell {
  background: rgba(252, 165, 165, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.30);
}

.ta-strong-sell {
  background: rgba(239, 68, 68, 0.20);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.40);
}

.ta-loading {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 400;
  font-size: 11px;
}

.ai-cell {
  gap: 5px;
  min-width: 108px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: default;
}

.ai-cell:hover {
  opacity: .85;
}

.ai-bull {
  background: rgba(16, 185, 129, 0.18);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ai-bear {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.40);
}

.ai-neut {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.30);
}

.ai-conf {
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  margin-left: 2px;
}

.asset-row-header td {
  background: var(--glass) !important;
  padding: 5px 12px !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   SETTINGS — asset selection grid
   ════════════════════════════════════════════════════════════ */
.asset-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}

.asset-toggle:hover {
  border-color: var(--accent);
}

.asset-toggle.active {
  border-color: var(--accent);
  background: rgba(245, 166, 35, 0.12);
}

.asset-toggle .check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}

.asset-toggle.active .check {
  background: var(--accent);
  border-color: var(--accent);
}

.asset-toggle.active .check::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mkt-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

/* ════════════════════════════════════════════════════════════
   ASSET DETAIL — indicator panel, chart tabs
   ════════════════════════════════════════════════════════════ */
.tf-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}

.tf-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tf-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.indicator-group {
  margin-bottom: 1.25rem;
}

.indicator-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.indicator-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  transition: background .15s;
}

.indicator-card:hover {
  background: var(--bg-card-hover);
}

.indicator-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.indicator-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sentiment-bar-wrap {
  background: var(--bg-secondary);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin: 6px 0;
}

.sentiment-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  transition: width .4s;
}

.tab-nav .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  background: transparent;
}

.tab-nav .nav-link.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.market-badge.crypto {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}

.market-badge.forex {
  background: rgba(139, 92, 246, .15);
  color: #a78bfa;
}

.market-badge.gold,
.market-badge.silver,
.market-badge.commodity {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
}

.market-badge.indian_stock {
  background: rgba(16, 185, 129, .15);
  color: #10b981;
}

.market-badge.index {
  background: rgba(59, 130, 246, .15);
  color: #60a5fa;
}

[data-theme="light"] .market-badge.crypto,
[data-theme="light"] .market-badge.gold,
[data-theme="light"] .market-badge.silver,
[data-theme="light"] .market-badge.commodity {
  color: #92400e;
}

[data-theme="light"] .market-badge.forex {
  color: #6d28d9;
}

[data-theme="light"] .market-badge.indian_stock {
  color: #047857;
}

[data-theme="light"] .market-badge.index {
  color: #1d4ed8;
}

/* ════════════════════════════════════════════════════════════
   INFO / ALERT BOXES
   ════════════════════════════════════════════════════════════ */
.info-box {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.info-box.blue {
  background: var(--blue-bg);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--text-secondary);
}

.info-box.green {
  background: var(--green-bg);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--text-secondary);
}

.info-box.yellow {
  background: var(--yellow-bg);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--text-secondary);
}

.info-box.red {
  background: var(--red-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════
   JOURNAL / WATCHLIST / RISK pages
   ════════════════════════════════════════════════════════════ */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row-label {
  color: var(--text-secondary);
}

.stat-row-value {
  font-weight: 700;
  color: var(--text-primary);
}

/* Alert / risk level pill */
.risk-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.risk-low {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.risk-medium {
  background: var(--yellow-bg);
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-high {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ════════════════════════════════════════════════════════════
   NEWS / ECONOMIC CALENDAR — shared
   ════════════════════════════════════════════════════════════ */
.spin {
  display: inline-block;
  animation: spin360 1s linear infinite;
}

@keyframes spin360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Impact badges used in news.html + briefing.html */
.impact-high {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.impact-medium {
  background: rgba(245, 158, 11, 0.85);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.impact-low {
  background: rgba(100, 116, 139, 0.7);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.actual-better {
  color: var(--green);
  font-weight: 600;
}

.actual-worse {
  color: var(--red);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   BRIEFING page — mover cards, signal mini cards
   ════════════════════════════════════════════════════════════ */
.market-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.status-open {
  background: rgba(16, 185, 129, 0.18);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.status-closed {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.mover-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color .2s;
}

.mover-card:hover {
  border-color: var(--accent);
}

.mover-sym {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.mover-name {
  font-size: 10px;
  color: var(--text-muted);
}

.mover-price {
  font-size: 11px;
  color: var(--text-secondary);
}

.mover-chg {
  font-weight: 700;
  font-size: 13px;
}

.mover-up {
  color: var(--green);
}

.mover-down {
  color: var(--red);
}

.signal-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.signal-mini-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dot-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════
   UI AUDIT FIXES — visibility, color, empty states
   ════════════════════════════════════════════════════════════ */

/* --- Global: ensure all table cell text is readable (never white-on-white) --- */
.smart-table td {
  color: var(--text-primary) !important;
}

/* .smart-table td above outranks the plain .text-green/.text-red utilities
   (same !important tier, but higher specificity), so gain/loss cells were
   silently losing their color and rendering as plain text everywhere —
   Portfolio holdings, signal P&L, etc. These re-assert it at matching
   specificity so both rules can coexist: readable text by default, real
   color where a row is explicitly marked as a gain or loss. */
.smart-table td.text-green, .smart-table td.text-green * { color: var(--green) !important; }
.smart-table td.text-red,   .smart-table td.text-red   * { color: var(--red)   !important; }
.smart-table td.text-yellow, .smart-table td.text-yellow * { color: var(--yellow) !important; }
.smart-table td.text-blue,   .smart-table td.text-blue   * { color: var(--blue)   !important; }

.smart-table th {
  color: var(--text-muted) !important;
}

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

/* --- Forms: inputs, selects, textareas must show text --- */
.form-control,
.form-select {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-secondary) !important;
  border-color: var(--accent) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important;
}

textarea.form-control {
  color: var(--text-primary) !important;
}

/* --- Modal --- */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
}

.modal-title {
  color: var(--text-primary) !important;
}

/* btn-close must invert only in dark theme (light icon on dark header);
   in light theme the default dark X already reads correctly on light headers. */
.btn-close {
  opacity: 0.7;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) opacity(0.7);
}

.btn-close:hover {
  opacity: 1;
}

/* --- Watchlist: make empty state more guiding --- */
.watchlist-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* --- Portfolio KPI cards: zero values still visible --- */
.kpi-value {
  color: var(--text-primary) !important;
}

/* --- Scanner info bar: improve contrast --- */
.scanner-info-bar {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
}

/* --- Journal: glass-card inside insight panel --- */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.glass-card.border-success {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.glass-card.border-danger {
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* --- MTF summary KPI cards at bottom --- */
.mtf-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}

.mtf-summary-card .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.mtf-summary-card .value {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
}

.mtf-summary-card .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Admin table action icon buttons visibility --- */
.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.btn-outline-secondary:hover {
  color: var(--text-primary) !important;
  border-color: var(--text-secondary) !important;
  background: var(--glass) !important;
}

.btn-outline-light {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.btn-outline-light:hover {
  color: var(--text-primary) !important;
  background: var(--glass) !important;
  border-color: var(--border-hover) !important;
}

.btn-outline-danger {
  color: var(--red) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* --- Code tags in tables and logs --- */
code {
  color: var(--accent-light) !important;
  background: rgba(245, 166, 35, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* --- Pagination --- */
.pagination .page-link {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.pagination .page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  color: var(--text-primary) !important;
  background: var(--bg-card-hover) !important;
}

/* --- Badge visibility --- */
.badge.bg-secondary {
  background: rgba(100, 116, 139, 0.3) !important;
  color: var(--text-secondary) !important;
}

.badge.bg-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: var(--green) !important;
}

.badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: var(--red) !important;
}

.badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--yellow) !important;
}

.badge.bg-info {
  background: rgba(6, 182, 212, 0.2) !important;
  color: var(--cyan, #06b6d4) !important;
}

.badge.bg-primary {
  background: rgba(245, 166, 35, 0.2) !important;
  color: var(--accent-light) !important;
}

/* --- Alert --- */
.alert-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* --- Model performance perf-table td color --- */
.perf-table td {
  color: var(--text-primary) !important;
}

/* --- Section-sub-title --- */
.section-sub-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}

/* --- Watchlist list item text --- */
.watchlist-item-symbol {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.watchlist-item-name {
  color: var(--text-muted) !important;
  font-size: 11px;
}

/* --- Admin API configs row text --- */
.api-row-name {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* --- kpi-top: when no margin-bottom needed (no kpi-change row) --- */
.kpi-top {
  margin-bottom: 0;
}

/* --- Input date color fix (date picker text) --- */
input[type="date"] {
  color-scheme: dark;
  color: var(--text-primary) !important;
}

[data-theme="light"] input[type="date"] {
  color-scheme: light;
}

input[type="range"] {
  accent-color: var(--accent);
}

/* --- Select option text inside dark bg --- */
select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* --- Empty state shared style --- */
.empty-state-box {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-box i {
  font-size: 2.5rem;
  opacity: .35;
  display: block;
  margin-bottom: 14px;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.watchlist-empty i,
#signalsBody i.bi-hourglass-split {
  opacity: .35;
}

.empty-state-box p {
  font-size: 13px;
  margin: 0;
}

/* --- Confidence bar --- */
.confidence-bar {
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}

/* --- News card grid --- */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s;
}

.news-card:hover {
  border-color: var(--border-hover);
}

.news-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary) !important;
  line-height: 1.4;
}

.news-card-meta {
  font-size: 11px;
  color: var(--text-muted) !important;
}

.news-card-read {
  font-size: 12px;
  color: var(--accent-light) !important;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
}

/* --- Auth card inputs --- */
.auth-card {
  color: var(--text-primary) !important;
}

.auth-card label {
  color: var(--text-secondary) !important;
}

.auth-card h2 {
  color: var(--text-primary) !important;
}

/* --- Text muted override — never pure white --- */
.text-muted {
  color: var(--text-muted) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* ═══ Enhanced Dashboard (image-parity) ═══════════════════════════ */
.dash-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

/* Deeepr-style editorial label: it gives every module a visual entry point
   while keeping the actual page title and data-driven content untouched. */
#pageContentBody::before {
  content: '01 / MARKET OVERVIEW';
  display: block;
  width: fit-content;
  margin-bottom: 12px;
  color: var(--accent-light);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.dash-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 118px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-radius: 50%;
  transform: rotate(-3deg);
  pointer-events: none;
}

body[data-active="signals"] #pageContentBody::before,
body[data-active="scanner"] #pageContentBody::before,
body[data-active="heatmap"] #pageContentBody::before,
body[data-active="delta_scanner"] #pageContentBody::before,
body[data-active="delta_bubbles"] #pageContentBody::before {
  content: '02 / SIGNAL DISCOVERY';
}

body[data-active="ai"] #pageContentBody::before,
body[data-active="ta_summary"] #pageContentBody::before,
body[data-active="mtf"] #pageContentBody::before,
body[data-active="advanced_analysis"] #pageContentBody::before,
body[data-active="news"] #pageContentBody::before,
body[data-active="economic_calendar"] #pageContentBody::before {
  content: '03 / INTELLIGENCE';
}

body[data-active="backtesting"] #pageContentBody::before,
body[data-active="analytics"] #pageContentBody::before,
body[data-active="reports"] #pageContentBody::before,
body[data-active="model_perf"] #pageContentBody::before {
  content: '04 / RESEARCH LAB';
}

body[data-active="portfolio"] #pageContentBody::before,
body[data-active="watchlist"] #pageContentBody::before,
body[data-active="risk"] #pageContentBody::before,
body[data-active="performance"] #pageContentBody::before,
body[data-active="journal"] #pageContentBody::before,
body[data-active="trading"] #pageContentBody::before,
body[data-active="algo_trading"] #pageContentBody::before {
  content: '05 / CAPITAL CONTROL';
}

body[data-active="settings"] #pageContentBody::before,
body[data-active="help"] #pageContentBody::before {
  content: '06 / ACCOUNT & SUPPORT';
}

body[data-requires-admin] #pageContentBody::before {
  content: '07 / OPERATIONS CONSOLE';
}

.dash-header-greet {
  flex: 0 0 auto
}

.dash-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.dashboard-context {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: -4px 0 16px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
  color: var(--text-muted);
  font-size: 11px;
}

.dashboard-context-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
}

.dashboard-context-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.dashboard-context.is-ready .dashboard-context-dot {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 16%, transparent);
}

.dashboard-context.is-degraded .dashboard-context-dot,
.dashboard-context.is-error .dashboard-context-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 16%, transparent);
}

.dashboard-context.is-error .dashboard-context-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 16%, transparent);
}

@media(max-width:680px) {
  .dashboard-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.report-page-header {
  align-items: flex-start;
}

.report-header-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.report-toolbar {
  margin-bottom: 16px;
  padding: 16px;
}

.report-toolbar-heading,
.report-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.report-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
}

.report-help {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}

.report-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.report-control {
  min-width: 150px;
}

.report-control label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.report-run {
  min-height: 32px;
}

.report-validation {
  margin-top: 12px;
}

.report-context {
  margin-bottom: 16px;
}

.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.report-outcomes {
  margin-bottom: 16px;
  padding: 16px;
}

.report-outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}

.report-outcome-grid > div {
  min-width: 0;
}

.report-outcome-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.report-outcome-grid strong {
  display: block;
  color: var(--text-primary);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.report-progress {
  height: 6px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--bg-input);
}

.report-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .25s ease;
}

.report-progress-win { background: var(--green); }
.report-progress-loss { background: var(--red); }
.report-progress-neutral { background: var(--text-muted); }

.report-chart-wrap {
  height: 260px;
}

.report-chart-empty {
  padding: 50px 16px;
  color: var(--text-muted);
  text-align: center;
  font-size: 12px;
}

@media(max-width:1200px) {
  .report-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:680px) {
  .report-page-header,
  .report-toolbar-heading {
    flex-direction: column;
  }

  .report-header-actions {
    margin-left: 0;
  }

  .report-controls,
  .report-control,
  .report-run {
    width: 100%;
  }

  .report-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-outcome-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.btn-generate {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 7px
}

.btn-generate:hover {
  filter: brightness(1.08);
  color: #fff
}

.market-state {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding: 0 4px
}

.ms-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px
}

.ms-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600
}

.ms-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary)
}

/* 8-up KPI grid */
.kpi-grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px
}

@media(max-width:1400px) {
  .kpi-grid-8 {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:760px) {
  .kpi-grid-8 {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* AI Opportunity Radar */
.opp-radar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 14px
}

@media(max-width:1200px) {
  .opp-radar {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:680px) {
  .opp-radar {
    grid-template-columns: repeat(2, 1fr)
  }
}

.opp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: .15s;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.opp-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px)
}

.opp-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.opp-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary)
}

.opp-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 7px
}

.opp-conf {
  font-size: 26px;
  font-weight: 800;
  line-height: 1
}

.opp-spark {
  height: 34px;
  line-height: 0
}

.opp-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary)
}

/* Enhanced signals table */
.signals-table-adv td {
  color: var(--text-primary);
  font-size: 12px;
  vertical-align: middle
}

.signals-table-adv td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap
}

.signals-table-adv .asset-cell-sub {
  margin-top: 2px
}

.regime-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary)
}

.status-chip {
  font-size: 10px;
  font-weight: 800;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap
}

.model-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px
}

.model-bars .mbar {
  width: 4px;
  border-radius: 1px;
  min-height: 3px
}

/* AI Decision Inspector */
.insp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 12px
}

.insp-k {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600
}

.insp-v {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums
}

.insp-context {
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0;
  background: var(--bg-card);
  font-size: 11px
}

.insp-context-main,
.insp-context-meta {
  display: flex;
  align-items: center;
  gap: 7px
}

.insp-context-main span { color: var(--text-secondary); margin-left: auto }
.insp-context-meta { color: var(--text-muted); margin-top: 4px; font-size: 10px }
.insp-quality-green { border-left-color: var(--green) }
.insp-quality-yellow { border-left-color: var(--yellow) }
.insp-quality-red { border-left-color: var(--red) }
.insp-quality-unknown { border-left-color: var(--text-muted) }
.insp-regime { border-left-color: var(--accent) }

.insp-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 14px 0 8px
}

.insp-checks {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.insp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary)
}

.insp-warns {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.insp-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary)
}

.insp-model {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px
}

.insp-model-n {
  width: 78px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0
}

.insp-model-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-input);
  overflow: hidden
}

.insp-model-fill {
  height: 100%;
  border-radius: 4px
}

.insp-model-p {
  width: 36px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

/* Heatmap mode tabs */
.heatmap-modes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.hm-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: .15s
}

.hm-tab:hover {
  color: var(--text-primary)
}

.hm-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

/* Today's Summary strip */
.today-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px
}

.ts-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap
}

.ts-item {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.ts-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  font-weight: 600
}

.ts-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums
}

/* 8-up KPI grid: allow full labels + tighter values in narrow cards */
.kpi-grid-8 .kpi-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 9.5px;
  letter-spacing: .5px;
  line-height: 1.25;
  min-height: 24px
}

.kpi-grid-8 .kpi-value {
  font-size: 23px;
  letter-spacing: -1px;
  margin: 5px 0 6px
}

.kpi-grid-8 .kpi-change {
  font-size: 10px
}

.kpi-grid-8 .kpi-card {
  padding: 13px 14px
}

.kpi-grid-8 .kpi-icon {
  font-size: 15px
}

/* ═══ Morning Briefing (enhanced) ═════════════════════════════════ */
.brief-state-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

@media(max-width:1100px) {
  .brief-state-row {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:640px) {
  .brief-state-row {
    grid-template-columns: repeat(2, 1fr)
  }
}

.brief-state {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px
}

.bs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 5px
}

.bs-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px
}

/* Market Summary breadth */
.breadth-stats {
  display: flex;
  gap: 14px
}

.breadth-stat {
  text-align: center
}

.bst-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em
}

.bst-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1
}

.bst-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600
}

.breadth-donut {
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: auto
}

.breadth-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.breadth-pct {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary)
}

.breadth-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase
}

/* Key Headlines */
.headline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none
}

.headline-row:last-child {
  border-bottom: none
}

.headline-time {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0
}

.headline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.headline-text {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.3
}

.headline-row:hover .headline-text {
  color: var(--accent-light)
}

/* Econ + movers + crypto tables */
.brief-econ td,
.brief-movers td,
.brief-crypto td {
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 8px
}

.brief-econ td.num,
.brief-movers td.num,
.brief-crypto td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.mv-sym {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 12.5px
}

.mv-name {
  font-size: 10.5px;
  color: var(--text-muted)
}

/* Sentiment gauge */
.sent-gauge {
  position: relative;
  display: inline-block
}

.sent-gauge-val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary)
}

.sent-gauge-lbl {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px
}

.sbm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px
}

.sbm-name {
  width: 92px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0
}

.sbm-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-input);
  overflow: hidden
}

.sbm-fill {
  height: 100%;
  border-radius: 4px
}

.sbm-val {
  width: 24px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

/* Key levels */
.level-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.level-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer
}

.level-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.lv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px
}

.lv-name {
  color: var(--text-secondary);
  font-weight: 600
}

.lv-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.level-chart {
  min-height: 150px;
  display: flex;
  align-items: center
}

/* AI insights */
.insight-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.35
}

.insight-row:last-child {
  border-bottom: none
}

.insight-row i {
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0
}

/* ═══ Markets Overview ════════════════════════════════════════════ */
.mkt-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.mkt-tab {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s
}

.mkt-tab:hover {
  color: var(--text-primary);
  border-color: var(--accent)
}

.mkt-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.kpi-grid-auto {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px
}

@media(max-width:1500px) {
  .kpi-grid-auto {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:820px) {
  .kpi-grid-auto {
    grid-template-columns: repeat(2, 1fr)
  }
}

.kpi-grid-auto .kpi-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 9.5px;
  min-height: 22px;
  line-height: 1.25
}

.kpi-grid-auto .kpi-value {
  font-size: 22px;
  letter-spacing: -.8px;
  margin: 5px 0 6px
}

.kpi-grid-auto .kpi-card {
  padding: 13px 14px
}

/* sentiment counts */
.sent-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px
}

.sc-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  text-align: center
}

.sc-item.sc-bull {
  background: rgba(16, 185, 129, .08)
}

.sc-item.sc-neu {
  background: rgba(148, 163, 184, .08)
}

.sc-item.sc-bear {
  background: rgba(239, 68, 68, .08)
}

.sc-lbl {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted)
}

.sc-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary)
}

.sc-bull .sc-val {
  color: var(--green)
}

.sc-bear .sc-val {
  color: var(--red)
}

/* AI score heatmap */
.ai-heat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px
}

@media(max-width:1400px) {
  .ai-heat-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

.ai-heat-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
  transition: .15s
}

.ai-heat-cell:hover {
  transform: translateY(-2px)
}

.ahc-sym {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

.ahc-score {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1
}

.ahc-lbl {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .02em
}

.ai-heat-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-muted)
}

.ai-heat-legend .dot,
.cons-leg .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px
}

/* top opportunities list */
.opp-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.opp-list-row:last-child {
  border-bottom: none
}

.opp-rank {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.opp-list-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  min-width: 70px
}

.opp-list-conf {
  font-weight: 800;
  font-size: 13px;
  margin-left: auto
}

.opp-list-rr {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 34px;
  text-align: right
}

.opp-list-spark {
  width: 56px;
  line-height: 0
}

/* consensus donut */
.consensus-donut {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto
}

.consensus-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.cons-leg {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 2px 4px
}

/* news impact */
.ni-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none
}

.ni-row:last-child {
  border-bottom: none
}

.ni-imp {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0
}

.ni-text {
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1
}

.ni-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0
}

/* upcoming events */
.ue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border)
}

.ue-row:last-child {
  border-bottom: none
}

.ue-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0
}

.ue-name {
  font-size: 11.5px;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.25
}

.ue-imp {
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0
}

/* quick actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.qa-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: .15s
}

.qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light)
}

.qa-btn i {
  font-size: 14px
}

/* ═══ Market Scanner ══════════════════════════════════════════════ */
.scan-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block
}

.scan-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 5px
}

.scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px
}

.scan-chip {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s
}

.scan-chip.c-green {
  color: #4ade80
}

.scan-chip.c-red {
  color: #f87171
}

.scan-chip.c-yellow {
  color: #fbbf24
}

.scan-chip.c-blue {
  color: var(--accent-light)
}

[data-theme="light"] .scan-chip.c-green {
  color: #0f9d6e
}

[data-theme="light"] .scan-chip.c-red {
  color: #dc2626
}

[data-theme="light"] .scan-chip.c-yellow {
  color: #b45309
}

.scan-chip:hover {
  border-color: currentColor
}

.scan-chip.active {
  background: currentColor;
  border-color: currentColor
}

.scan-chip.active {
  color: #fff !important
}

.scan-chip.c-green.active {
  background: rgba(16, 185, 129, .9);
  border-color: var(--green)
}

.scan-chip.c-red.active {
  background: rgba(239, 68, 68, .9);
  border-color: var(--red)
}

.scan-chip.c-yellow.active {
  background: rgba(245, 158, 11, .9);
  border-color: var(--yellow)
}

.scan-chip.c-blue.active {
  background: var(--accent);
  border-color: var(--accent)
}

.scan-sig {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap
}

.mf-icons {
  display: flex;
  gap: 6px;
  align-items: center
}

.mf-ico {
  font-size: 13px
}

.scan-actions {
  display: flex;
  gap: 6px
}

.scan-act {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  font-size: 12px
}

.scan-act:hover {
  border-color: var(--accent);
  color: var(--accent-light)
}

.scan-star.bi-star-fill {
  color: var(--yellow) !important
}

/* ═══ Auto Generate additions ═════════════════════════════════════ */
.ag-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border)
}

.ag-sent-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 6px
}

.ag-sent-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green))
}

.ag-sent-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-card);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: left .4s
}

.ag-qs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px
}

.ag-qs-row:last-child {
  border-bottom: none
}

.ag-qs-k {
  color: var(--text-muted);
  font-weight: 600
}

.ag-qs-v {
  color: var(--text-primary);
  font-weight: 700
}

/* ═══ Account approval banner ═══════════════════════════════════════ */
.approval-banner {
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600
}

.approval-banner-pending {
  background: var(--yellow-bg, rgba(245, 158, 11, .12));
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, .35)
}

.approval-banner-rejected {
  background: var(--red-bg, rgba(239, 68, 68, .12));
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, .35)
}

.approval-banner-trial {
  background: rgba(245, 166, 35, .12);
  color: var(--accent, #f5a623);
  border: 1px solid rgba(245, 166, 35, .35)
}

/* ═══ Global page polish (lifts all .page-header pages) ═══════════ */
.page-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border)
}

.page-title {
  font-size: 22px;
  letter-spacing: -.5px
}

.page-title .bi:first-child {
  color: var(--accent)
}

/* data cells app-wide: bright on dark cards, dark on light cards */
.smart-table tbody td {
  color: var(--text-primary)
}

.smart-table tbody td .text-muted,
.smart-table tbody td small.text-muted {
  color: var(--text-muted)
}

/* ═══ Key Levels asset picker ═════════════════════════════════════ */
.kl-config {
  margin: 8px 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary)
}

.kl-config-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px
}

.kl-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px 12px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px
}

.kl-chk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap
}

.kl-chk input {
  accent-color: var(--accent);
  cursor: pointer
}

.kl-config-actions {
  display: flex;
  gap: 8px
}

/* Top Opportunities column header */
.opp-list-head {
  cursor: default;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px
}

.opp-list-head:hover {
  background: none
}

.opp-list-head span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted)
}

.opp-head-sig {
  margin-right: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted)
}

/* ═══ EMA 9/21 MTF detail popover (TA Summary page) ═══════════════ */
.ema-popover {
  position: absolute;
  z-index: 1000;
  width: 300px;
  max-width: 92vw;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 12px
}

.ema-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border)
}

.ema-pop-close {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px
}

.ema-pop-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary)
}

.ema-pop-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: 1px dashed var(--border)
}

.ema-pop-row:last-of-type {
  border-bottom: none
}

.ema-pop-row b {
  color: var(--text-primary);
  font-weight: 700
}

.ema-pop-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--yellow)
}

/* ═══ EMA 9/21 MTF history scrubber ═══════════════════════════════ */
.ema-scrub-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px
}

.ema-scrub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em
}

.ema-pop-ts {
  font-size: 10px;
  color: var(--text-muted);
  margin: -2px 0 6px 2px
}

.bubble-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bubble-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.bubble-legend-label {
  font-size: 10px;
  font-weight: 700;
}

.bubble-legend-label.neg {
  color: var(--red);
}

.bubble-legend-label.pos {
  color: var(--green);
}

.bubble-canvas {
  position: relative;
  overflow: auto;
  max-height: 75vh;
  padding: 12px;
  /* The packed cluster's own width/height varies per group (8 bubbles on
     Major vs. 189 on Altcoin) and is always narrower than this card, which
     spans the full row -- without centering, every group's bubbles sat
     flush at the top-left with the rest of the card empty. The actual
     absolute-positioned bubbles live in .bubble-canvas-inner, sized to
     exactly that group's packed dimensions; this just centers that box. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.bubble-canvas-inner {
  position: relative;
  flex-shrink: 0;
}

/* Packed circle-map bubble: a light "card" disc with a green/red ring
   showing direction, rather than a fully color-filled disc — closer to how
   traders read a market bubble map (color is a status ring, not the whole
   shape) and gives small bubbles a fighting chance at legibility since text
   sits on a near-white surface regardless of direction/theme. */
.mkt-bubble {
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f1f5f9 62%, #e2e8f0 100%);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
  transition: transform .15s ease-out, box-shadow .15s ease-out, z-index 0s;
  animation: mktBubbleFloat 4.5s ease-in-out infinite, mktBubblePop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}

.mkt-bubble.dir-up { border: 3px solid var(--green); }
.mkt-bubble.dir-down { border: 3px solid var(--red); }

.mkt-bubble:hover {
  transform: scale(1.1);
  z-index: 5;
  animation-play-state: paused;
  box-shadow: 0 8px 22px -4px rgba(0, 0, 0, 0.6), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
}

@keyframes mktBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes mktBubblePop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-bubble { animation: none; }
}

.mkt-bubble-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.mkt-bubble-ticker {
  color: #64748b;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-bubble-name {
  color: #0f172a;
  font-weight: 800;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-bubble-pct {
  font-weight: 800;
}

.scanner-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  padding: 16px;
}

.scanner-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 14px;
}

.scanner-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.scanner-card-symbol {
  font-weight: 700;
  color: var(--text-primary);
}

.scanner-card-price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.scanner-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.scanner-card-metrics span.num {
  color: var(--text-primary);
  font-family: var(--font-mono);
  float: right;
}

.scanner-card-actions {
  display: flex;
  gap: 6px;
}

.scanner-card-actions .btn {
  flex: 1;
}

/* MTF Scanner cell backgrounds — bullish/bearish/mixed at a glance, on both
   the Common Coins status panel and the All Coins BUY/SELL tables. Amber is
   reserved for genuine disagreement (a mixed multi-timeframe read, or an
   unchanged live tick) — it is never used for a plain bullish/bearish call. */
.mtf-cell-bull {
  background: rgba(16, 185, 129, 0.16) !important;
  color: var(--green) !important;
  font-weight: 700;
}

.mtf-cell-bear {
  background: rgba(239, 68, 68, 0.16) !important;
  color: var(--red) !important;
  font-weight: 700;
}

.mtf-cell-mixed {
  background: rgba(245, 158, 11, 0.16) !important;
  color: var(--yellow) !important;
  font-weight: 700;
}
/* ════════════════════════════════════════════════════════════
   ASK AI FLOATING WIDGET — global, every logged-in page
   ════════════════════════════════════════════════════════════ */
.ask-ai-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  color: #0b0d12;
  border: none;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 950;
  transition: transform 0.15s ease;
}
.ask-ai-fab:hover { transform: scale(1.06); }
.ask-ai-fab i.bi-x-lg { font-size: 18px; }

.ask-ai-popup {
  position: fixed;
  right: 24px;
  bottom: 90px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 950;
  padding: 14px;
  display: none;
}
.ask-ai-popup.open { display: block; animation: askAiPopIn 0.15s ease; }
@keyframes askAiPopIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ask-ai-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ask-ai-popup-title {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ask-ai-popup-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
}
.ask-ai-popup-close:hover { color: var(--text-primary); }
.ask-ai-popup-context {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.ask-ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.ask-ai-suggestion-chip {
  text-align: left;
  background: var(--bg-elevated, rgba(255,255,255,0.04));
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ask-ai-suggestion-chip:hover {
  border-color: var(--accent);
  background: rgba(245, 166, 35, 0.08);
}
.ask-ai-input-row {
  display: flex;
  gap: 6px;
}
.ask-ai-popup-answer {
  max-height: 240px;
  overflow-y: auto;
}
.ask-ai-popup-footnote {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 8px;
}

/* ═══ UI-2 shared design primitives ═══════════════════════════════════════
   New pages should use these semantic classes instead of inventing a
   page-local card, toolbar, or loading state. Existing classes remain the
   compatibility layer while the UI is migrated incrementally. */
.app-shell {
  color-scheme: dark;
}

html[data-theme="light"] .app-shell {
  color-scheme: light;
}

.app-shell :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.app-shell :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ui-surface {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.ui-surface--raised {
  background: linear-gradient(165deg, var(--surface-card), var(--surface-raised));
  box-shadow: var(--shadow);
}

.ui-surface--interactive {
  transition: border-color var(--motion-base) ease, box-shadow var(--motion-base) ease, transform var(--motion-base) ease;
}

.ui-surface--interactive:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.ui-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.ui-toolbar__label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 132px;
  padding: var(--space-6);
  color: var(--text-secondary);
  text-align: center;
}

.ui-state[hidden] {
  display: none !important;
}

.ui-state__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 17px;
}

.ui-state__content {
  min-width: 0;
}

.ui-state__title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
}

.ui-state__description {
  max-width: 48ch;
  margin: 2px auto 0;
  color: var(--text-muted);
  font-size: 12px;
}

.ui-state--loading .ui-state__icon {
  color: var(--accent);
}

.ui-state--error .ui-state__icon {
  background: var(--danger-bg);
  color: var(--danger);
}

.ui-state--empty .ui-state__icon {
  background: var(--info-bg);
  color: var(--info);
}

.ui-state__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 680px) {
  .ui-state {
    flex-direction: column;
    min-height: 156px;
    padding: var(--space-5) var(--space-4);
  }

  .ui-state__actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.ui-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scrollbar-color: rgba(245, 166, 35, 0.45) transparent;
}

.ui-table-wrap > .smart-table,
.ui-table-wrap > .table {
  margin-bottom: 0;
}

.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.ui-chip--positive {
  border-color: color-mix(in srgb, var(--success) 42%, transparent);
  background: var(--success-bg);
  color: var(--success);
}

.ui-chip--negative {
  border-color: color-mix(in srgb, var(--danger) 42%, transparent);
  background: var(--danger-bg);
  color: var(--danger);
}

.ui-chip--warning {
  border-color: color-mix(in srgb, var(--warning) 42%, transparent);
  background: var(--warning-bg);
  color: var(--warning);
}

.ui-metric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ui-metric--positive { color: var(--success); }
.ui-metric--negative { color: var(--danger); }
.ui-metric--neutral { color: var(--text-secondary); }

.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 576px) {
  .ui-state {
    flex-direction: column;
    min-height: 116px;
    padding: var(--space-5) var(--space-3);
  }

  .ui-toolbar {
    align-items: stretch;
  }

  .ui-toolbar > :where(.form-control, .form-select, .btn) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell *,
  .app-shell *::before,
  .app-shell *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .ui-surface--interactive:hover {
    transform: none;
  }
}

/* ── UI refinement layer ────────────────────────────────────────────────
   Shared presentation polish for every authenticated module. This layer
   deliberately sits at the end of the stylesheet so legacy page markup can
   inherit one consistent treatment without changing its data hooks. */
:root {
  --accent-violet: #8b7cff;
  --accent-cyan: #35c9e8;
  --surface-glow: rgba(139, 124, 255, 0.16);
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.24);
  --radius-card: 14px;
}

.app-shell {
  background:
    radial-gradient(circle at 92% -8%, rgba(53, 201, 232, 0.055), transparent 28rem),
    radial-gradient(circle at 18% 0%, rgba(139, 124, 255, 0.045), transparent 32rem),
    var(--bg-primary);
}

.app-shell .main-wrapper {
  background: transparent;
}

.app-shell .page-content {
  isolation: isolate;
  padding-top: clamp(22px, 3vw, 34px);
  padding-inline: clamp(16px, 2.6vw, 34px);
}

/* Keep route artwork atmospheric, never above page content. The pseudo
   element is positioned for visual coverage, so content needs an explicit
   stacking layer to remain readable in every theme and viewport. */
.app-shell .page-content > * {
  position: relative;
  z-index: 1;
}

.app-shell .page-content::before {
  z-index: 0;
}

.app-shell .page-header {
  position: relative;
  padding-bottom: 17px;
  margin-bottom: 14px;
}

.app-shell .page-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(320px, 60%);
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-violet), transparent);
  opacity: 0.75;
}

.app-shell .page-title {
  font-size: clamp(21px, 2vw, 27px);
  letter-spacing: -0.7px;
}

.app-shell .page-subtitle {
  max-width: 70ch;
}

.app-shell .section-card,
.app-shell .kpi-card,
.app-shell .glass-card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.app-shell .section-card {
  border-color: color-mix(in srgb, var(--border) 72%, var(--accent-violet));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 40%),
    var(--bg-card);
}

.app-shell .section-card:hover {
  border-color: color-mix(in srgb, var(--border-hover) 72%, var(--accent-violet));
}

.app-shell .section-card-header {
  min-height: 54px;
  padding-inline: 20px;
  background: linear-gradient(105deg, rgba(139, 124, 255, 0.08), transparent 58%);
}

.app-shell .section-card-title i,
.app-shell .kpi-icon {
  color: var(--accent-light);
}

.app-shell .kpi-card {
  border-color: color-mix(in srgb, var(--border) 78%, var(--card-accent, var(--accent)));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--accent)) 7%, transparent), transparent 48%),
    linear-gradient(165deg, var(--bg-card), var(--bg-secondary));
}

.app-shell .kpi-card:hover {
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 25%, transparent);
}

.app-shell .smart-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--bg-secondary) 94%, var(--accent-violet));
  backdrop-filter: blur(10px);
}

.app-shell .smart-table tbody td {
  height: 54px;
}

.app-shell .smart-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(139, 124, 255, 0.09), rgba(53, 201, 232, 0.025));
}

.app-shell .form-control,
.app-shell .form-select,
.app-shell textarea,
.app-shell input[type="date"],
.app-shell input[type="number"] {
  min-height: var(--control-height);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--bg-card) 86%, var(--accent-violet));
  border-color: color-mix(in srgb, var(--border) 80%, var(--accent-violet));
}

.app-shell .form-control:hover,
.app-shell .form-select:hover,
.app-shell textarea:hover {
  border-color: color-mix(in srgb, var(--border-hover) 60%, var(--accent-cyan));
}

.app-shell .form-control:focus,
.app-shell .form-select:focus,
.app-shell textarea:focus,
.app-shell input:focus-visible,
.app-shell button:focus-visible,
.app-shell a:focus-visible {
  border-color: var(--accent-violet);
  box-shadow: 0 0 0 3px rgba(139, 124, 255, 0.18), 0 0 22px rgba(139, 124, 255, 0.1);
  outline: none;
}

.app-shell .btn {
  border-radius: var(--radius-sm);
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.app-shell .btn:hover {
  transform: translateY(-1px);
}

.app-shell .btn-primary,
.app-shell .btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: transparent;
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.18);
}

.app-shell .btn-primary:hover,
.app-shell .btn-accent:hover {
  box-shadow: 0 10px 26px rgba(245, 166, 35, 0.28);
}

.app-shell .btn-outline-light,
.app-shell .btn-outline-secondary {
  border-color: color-mix(in srgb, var(--border-hover) 70%, var(--accent-violet));
  color: var(--text-secondary);
}

.app-shell .btn-outline-light:hover,
.app-shell .btn-outline-secondary:hover {
  border-color: var(--accent-violet);
  background: rgba(139, 124, 255, 0.12);
  color: var(--text-primary);
}

.app-shell .sidebar {
  background:
    linear-gradient(180deg, rgba(139, 124, 255, 0.06), transparent 22%),
    var(--bg-sidebar);
  border-right-color: color-mix(in srgb, var(--border) 72%, var(--accent-violet));
}

.app-shell .nav-item {
  border-radius: var(--radius-sm);
  margin-inline: 8px;
  width: auto;
}

.app-shell .nav-item:hover {
  background: rgba(139, 124, 255, 0.1);
}

.app-shell .nav-item.active {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.16), rgba(139, 124, 255, 0.1));
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 0.16);
}

.app-shell .filter-bar,
.app-shell .ui-toolbar {
  border-color: color-mix(in srgb, var(--border) 78%, var(--accent-violet));
  border-radius: var(--radius-card);
  background: linear-gradient(105deg, rgba(139, 124, 255, 0.06), transparent 60%), var(--bg-card);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  .app-shell .page-content {
    padding-inline: 14px;
  }

  .app-shell .page-header {
    align-items: flex-start;
  }

  .app-shell .section-card-body {
    padding: 14px;
  }

  .app-shell .kpi-card {
    padding: 16px;
  }

  .app-shell .ui-table-wrap {
    border-radius: var(--radius-sm);
  }
}

/* Authenticated terminal shell finish: make the visual change immediately
   apparent on dense post-login pages, not only inside individual cards. */
.app-shell .top-navbar {
  background: linear-gradient(90deg, rgba(139, 124, 255, 0.07), transparent 42%), rgba(10, 13, 19, 0.9);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--accent-violet));
}

.app-shell .top-navbar::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 124, 255, 0.55), rgba(53, 201, 232, 0.35), transparent);
  pointer-events: none;
}

.app-shell .ticker-strip {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.07), rgba(139, 124, 255, 0.055), rgba(53, 201, 232, 0.045)), var(--bg-secondary);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--accent-cyan));
}

.app-shell .dash-header {
  margin-bottom: 12px;
  padding: 18px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, var(--accent-violet));
  border-radius: var(--radius-card);
  background: linear-gradient(120deg, rgba(139, 124, 255, 0.1), rgba(53, 201, 232, 0.025) 48%, transparent 76%), var(--bg-card);
  box-shadow: var(--shadow-card);
}

.app-shell .dash-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-violet), transparent);
  box-shadow: 0 0 16px rgba(139, 124, 255, 0.4);
}

.app-shell .dashboard-context {
  border-radius: var(--radius-sm);
  border-color: color-mix(in srgb, var(--border) 75%, var(--accent-cyan));
  background: linear-gradient(90deg, rgba(53, 201, 232, 0.06), rgba(139, 124, 255, 0.04), transparent), var(--bg-card);
}

.app-shell .kpi-grid-8 {
  gap: 14px;
}

.app-shell .opp-card {
  border-color: color-mix(in srgb, var(--border) 78%, var(--accent-violet));
  background: linear-gradient(145deg, rgba(139, 124, 255, 0.065), transparent 55%), var(--bg-secondary);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.app-shell .opp-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-violet);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28), 0 0 20px rgba(139, 124, 255, 0.1);
}

@media (max-width: 760px) {
  .app-shell .dash-header {
    padding: 16px;
  }

  .app-shell .dash-header-actions {
    width: 100%;
    margin-left: 0;
  }

  .app-shell .dash-header-actions > * {
    flex: 1 1 auto;
  }
}

/* Full responsive QA pass. Keep dense trading modules fluid at every
   requested viewport without changing their data or interaction contracts. */
.app-shell :where(#pageContentBody, .page-content, .main-wrapper),
.app-shell .row > *,
.app-shell .section-card,
.app-shell .kpi-card,
.app-shell .glass-card {
  min-width: 0;
}

.app-shell .page-header > *,
.app-shell .dash-header > *,
.app-shell .section-card-header > * {
  min-width: 0;
}

.app-shell .section-card-header .text-muted,
.app-shell .section-card-header small {
  overflow-wrap: anywhere;
}

/* Tables keep their readable intrinsic width and scroll inside the card on
   small screens instead of forcing the entire document wider than its shell. */
.app-shell .table-responsive,
.app-shell .ui-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.app-shell .table-responsive > table,
.app-shell .ui-table-wrap > table {
  width: max-content;
  min-width: 100%;
}

.app-shell :where(.chart-wrapper, .chart-wrapper-lg, .chart-wrapper-sm,
  .report-chart-wrap, .trend-canvas-wrap, #aaChartWrap) {
  min-width: 0;
  max-width: 100%;
}

.app-shell :where(.chart-wrapper, .chart-wrapper-lg, .chart-wrapper-sm,
  .report-chart-wrap, .trend-canvas-wrap) > canvas,
.app-shell #aaChart {
  display: block;
  max-width: 100%;
}

.app-shell img {
  max-width: 100%;
  height: auto;
}

/* AI Insights uses a dedicated fluid grid so the results panel always owns
   the remaining width rather than inheriting a constrained Bootstrap column. */
.app-shell .ai-insights-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.68fr);
  gap: var(--space-6);
  margin-inline: 0;
}

.app-shell .ai-insights-layout > .ai-insights-controls,
.app-shell .ai-insights-layout > .ai-insights-results {
  width: auto;
  max-width: none;
  padding-inline: 0;
  margin-top: 0;
  flex: none;
}

.app-shell .ai-insights-controls,
.app-shell .ai-insights-results,
.app-shell #aiRightPanel {
  min-width: 0;
  width: 100%;
}

.app-shell .data-context-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--accent-cyan));
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(53, 201, 232, 0.06), transparent 72%), var(--bg-card);
  color: var(--text-secondary);
  font-size: 12px;
}

@media (max-width: 1100px) {
  .app-shell .ai-insights-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  /* The 768px tablet target cannot support eight readable KPI cards. */
  .app-shell .kpi-grid-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Risk Manager has a legacy inline four-column declaration. The important
     override keeps that presentation readable on phone and tablet widths. */
  .app-shell .kpi-grid-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .app-shell .top-navbar {
    gap: 7px;
    padding-inline: 10px;
  }

  .app-shell .navbar-left {
    min-width: 0;
    gap: 6px;
  }

  .app-shell .breadcrumb-nav {
    min-width: 0;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-shell .navbar-right {
    gap: 5px;
  }

  .app-shell .ws-status {
    padding-inline: 6px;
  }

  .app-shell .section-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .app-shell .section-card-header > .text-muted,
  .app-shell .section-card-header > small {
    flex: 1 1 100%;
  }

  .app-shell .section-card-header > .d-flex {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .app-shell .data-context-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .app-shell .filter-bar > :where(.form-control, .form-select, .search-bar) {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: none;
  }

  .app-shell .notif-dropdown {
    width: min(340px, calc(100vw - 24px));
  }
}

/* The compact command trigger must win over the wider tablet minimum above.
   Keeping it icon-only at phone widths prevents the toolbar from creating a
   horizontal scroll area that can push page content off-screen. */
@media (max-width: 768px) {
  .app-shell .cmd-trigger {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    margin-inline: 0;
    padding-inline: 9px;
  }
}

@media (max-width: 520px) {
  .app-shell .kpi-grid-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell #backupCodesList {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .app-shell #hourHeatmap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Sidebar hierarchy: section markers and active destinations make the long
   authenticated menu scannable without changing its existing routes. */
.app-shell .sidebar-nav {
  padding: 8px 0 10px;
  scroll-behavior: smooth;
}

.app-shell .nav-group {
  position: relative;
  padding-bottom: 3px;
}

.app-shell .nav-group + .nav-group {
  margin-top: 5px;
}

.app-shell .nav-group-header {
  min-height: 28px;
  margin: 5px 8px 2px;
  padding: 6px 10px 5px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.app-shell .nav-group-header:hover,
.app-shell .nav-group.active-group > .nav-group-header {
  border-color: rgba(139, 124, 255, 0.18);
  background: linear-gradient(90deg, rgba(139, 124, 255, 0.09), transparent);
}

.app-shell .nav-group.active-group > .nav-group-header {
  color: var(--text-primary);
}

.app-shell .nav-section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  letter-spacing: 1.35px;
}

.app-shell .nav-group.active-group .nav-section-label {
  color: var(--accent-light);
}

.app-shell .nav-section-icon {
  width: 14px;
  color: var(--accent-violet);
  font-size: 11px;
  letter-spacing: 0;
}

.app-shell .nav-group.active-group .nav-section-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 5px rgba(245, 166, 35, 0.35));
}

.app-shell .nav-group-body {
  padding: 1px 0 4px;
}

.app-shell .nav-item {
  min-height: 35px;
  padding-top: 7px;
  padding-bottom: 7px;
  border: 1px solid transparent;
}

.app-shell .nav-item:hover {
  border-color: rgba(139, 124, 255, 0.2);
  transform: translateX(2px);
}

.app-shell .nav-item.active {
  border-color: rgba(245, 166, 35, 0.25);
  box-shadow: inset 3px 0 0 var(--accent), 0 5px 18px rgba(245, 166, 35, 0.08);
}

.app-shell .nav-item.active::before {
  display: none;
}

.app-shell .nav-item:focus-visible,
.app-shell .nav-group-header:focus-visible,
.app-shell .sidebar-toggle:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

.app-shell .sidebar-footer {
  padding: 7px 0 6px;
  background: linear-gradient(180deg, rgba(15, 18, 27, 0), rgba(15, 18, 27, 0.95) 30%);
}

.app-shell .sidebar-footer .nav-item {
  color: var(--text-muted);
}

.app-shell .sidebar-footer .nav-item:hover {
  color: var(--red-light, #ff718b);
  border-color: rgba(255, 88, 112, 0.2);
  background: rgba(255, 88, 112, 0.07);
}

.app-shell .sidebar.collapsed .nav-group-header {
  justify-content: center;
  min-height: 24px;
  margin: 3px 4px 0;
  padding: 4px 0 3px;
  border-color: transparent;
}

.app-shell .sidebar.collapsed .nav-section-label {
  display: inline-flex;
  justify-content: center;
  width: 14px;
  font-size: 0;
  letter-spacing: 0;
  gap: 0;
}

.app-shell .sidebar.collapsed .nav-section-icon {
  display: inline-block;
  font-size: 11px;
}

.app-shell .sidebar.collapsed .nav-group-header:hover,
.app-shell .sidebar.collapsed .nav-group.active-group > .nav-group-header {
  background: transparent;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .nav-item:hover {
    transform: none;
  }
}

@media (max-width: 992px) {
  .app-shell .sidebar {
    border-right-color: color-mix(in srgb, var(--border) 78%, var(--accent));
  }
}

/* Respect the operating system's reduced-motion preference. This is shared
   by all dashboard modules, including dynamically-rendered result cards. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* High-priority data tables become readable stacked cards on phones. The
   labels are supplied from each table header by the shared shell script, so
   dynamic rows do not need to duplicate presentation markup. */
@media (max-width: 680px) {
  .app-shell table[data-mobile-cards] {
    min-width: 0 !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0 8px;
  }

  .app-shell table[data-mobile-cards] thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .app-shell table[data-mobile-cards] tbody,
  .app-shell table[data-mobile-cards] tr,
  .app-shell table[data-mobile-cards] td {
    display: block;
    width: 100%;
  }

  .app-shell table[data-mobile-cards] tr {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(139,124,255,.06), transparent 70%), var(--bg-card);
  }

  .app-shell table[data-mobile-cards] td {
    display: grid;
    grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 32px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .app-shell table[data-mobile-cards] td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
  }

  .app-shell table[data-mobile-cards] td[colspan] {
    display: block;
    text-align: center;
  }

  .app-shell table[data-mobile-cards] td[colspan]::before { content: none; }
}

/* Light theme finish: keep the terminal hierarchy, but replace dark-mode
   overlays with cool paper surfaces and ink-readable accents. This sits at
   the end of the shell stylesheet so legacy module rules inherit the same
   treatment without page-by-page overrides. */
html[data-theme="light"] {
  --accent: #c87508;
  --accent-light: #9a5b00;
  --accent-dark: #a95f00;
  --accent-violet: #665db8;
  --accent-cyan: #087f9f;
  --surface-glow: rgba(102, 93, 184, 0.1);
  --shadow-card: 0 10px 28px rgba(15, 23, 42, 0.09);
}

html[data-theme="light"] .app-shell {
  background:
    radial-gradient(circle at 92% -8%, rgba(8, 127, 159, 0.055), transparent 28rem),
    radial-gradient(circle at 18% 0%, rgba(102, 93, 184, 0.05), transparent 32rem),
    var(--bg-primary);
}

html[data-theme="light"] .app-shell .top-navbar {
  background: linear-gradient(90deg, rgba(102, 93, 184, 0.06), transparent 42%), rgba(255, 255, 255, 0.92);
  border-bottom-color: #d8e0eb;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.045);
}

html[data-theme="light"] .app-shell .top-navbar::after {
  background: linear-gradient(90deg, transparent, rgba(102, 93, 184, 0.38), rgba(8, 127, 159, 0.28), transparent);
}

html[data-theme="light"] .app-shell .ticker-strip {
  background: linear-gradient(90deg, rgba(200, 117, 8, 0.045), rgba(102, 93, 184, 0.04), rgba(8, 127, 159, 0.035)), #edf2f7;
  border-bottom-color: #d3dce8;
}

html[data-theme="light"] .app-shell .sidebar {
  background: linear-gradient(180deg, rgba(102, 93, 184, 0.045), transparent 22%), #fbfcfe;
  border-right-color: #d8e0eb;
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.035);
}

html[data-theme="light"] .app-shell .sidebar-footer {
  background: linear-gradient(180deg, rgba(251, 252, 254, 0), rgba(238, 242, 247, 0.98) 30%);
}

html[data-theme="light"] .app-shell .nav-group-header:hover,
html[data-theme="light"] .app-shell .nav-group.active-group > .nav-group-header {
  border-color: rgba(102, 93, 184, 0.18);
  background: linear-gradient(90deg, rgba(102, 93, 184, 0.08), transparent);
}

html[data-theme="light"] .app-shell .nav-item:hover {
  border-color: rgba(102, 93, 184, 0.18);
  background: rgba(102, 93, 184, 0.07);
}

html[data-theme="light"] .app-shell .nav-item.active {
  border-color: rgba(200, 117, 8, 0.28);
  background: linear-gradient(90deg, rgba(200, 117, 8, 0.12), rgba(102, 93, 184, 0.07));
  box-shadow: inset 3px 0 0 var(--accent), 0 5px 16px rgba(200, 117, 8, 0.07);
}

html[data-theme="light"] .app-shell .section-card,
html[data-theme="light"] .app-shell .glass-card {
  border-color: #d7dfeb;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 253, 0.98));
  box-shadow: var(--shadow-card);
}

html[data-theme="light"] .app-shell .section-card:hover {
  border-color: #b8c4d6;
}

html[data-theme="light"] .app-shell .section-card-header {
  background: linear-gradient(105deg, rgba(102, 93, 184, 0.065), transparent 58%);
}

html[data-theme="light"] .app-shell .kpi-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--accent)) 6%, transparent), transparent 48%),
    linear-gradient(165deg, #ffffff, #f4f7fb);
}

html[data-theme="light"] .app-shell .kpi-card:hover {
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12), 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 22%, transparent);
}

html[data-theme="light"] .app-shell .filter-bar,
html[data-theme="light"] .app-shell .ui-toolbar {
  border-color: #d2dce9;
  background: linear-gradient(105deg, rgba(102, 93, 184, 0.045), transparent 60%), #ffffff;
}

html[data-theme="light"] .app-shell .form-control,
html[data-theme="light"] .app-shell .form-select,
html[data-theme="light"] .app-shell textarea,
html[data-theme="light"] .app-shell input[type="date"],
html[data-theme="light"] .app-shell input[type="number"] {
  background: #ffffff;
  border-color: #cbd6e4;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.025);
}

html[data-theme="light"] .app-shell .form-control:focus,
html[data-theme="light"] .app-shell .form-select:focus,
html[data-theme="light"] .app-shell textarea:focus {
  border-color: var(--accent-violet);
  box-shadow: 0 0 0 3px rgba(102, 93, 184, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .app-shell .smart-table thead th {
  background: #eef2f7;
}

html[data-theme="light"] .app-shell .smart-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(102, 93, 184, 0.065), rgba(8, 127, 159, 0.025));
}

html[data-theme="light"] select option {
  background: #ffffff;
  color: #0b1220;
}

html[data-theme="light"] .app-shell .btn-outline-light,
html[data-theme="light"] .app-shell .btn-outline-secondary {
  border-color: #c4cfdd;
  color: #43516a;
}

html[data-theme="light"] .app-shell .btn-outline-light:hover,
html[data-theme="light"] .app-shell .btn-outline-secondary:hover {
  border-color: var(--accent-violet);
  background: rgba(102, 93, 184, 0.08);
  color: var(--text-primary);
}

html[data-theme="light"] .app-shell .sidebar-footer .nav-item:hover {
  color: #b4233e;
  border-color: rgba(180, 35, 62, 0.18);
  background: rgba(180, 35, 62, 0.06);
}

/* Shared admin operations surfaces. These classes keep high-impact controls,
   summaries, and dense tables legible without changing their data contracts. */
.admin-ops-page {
  --admin-accent: var(--accent);
  --admin-violet: var(--accent-violet);
}

.admin-page-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  margin-bottom: 14px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--admin-violet) 38%, var(--border));
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-cyan) 9%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--admin-violet) 9%, var(--bg-card)), var(--bg-card) 62%);
  box-shadow: var(--shadow-card);
}

.admin-page-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -52px;
  width: 260px;
  height: 100px;
  border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, transparent);
  border-radius: 50%;
  transform: rotate(-9deg);
  pointer-events: none;
}

.admin-page-hero-copy,
.admin-page-hero-actions {
  position: relative;
  z-index: 1;
}

.admin-page-hero-copy { min-width: 0; }

.admin-page-hero-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.admin-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 1px solid color-mix(in srgb, var(--admin-accent) 46%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--admin-accent) 12%, var(--glass));
  color: var(--admin-accent);
  font-size: 17px;
}

.admin-page-hero .page-subtitle {
  max-width: 760px;
  margin-bottom: 0;
  line-height: 1.55;
}

.admin-page-hero-actions {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.admin-page-badge,
.admin-page-hero-note {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.admin-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--admin-accent) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--admin-accent) 8%, var(--glass));
  color: var(--text-secondary);
  font-weight: 700;
}

.admin-page-badge i { color: var(--admin-accent); }

.admin-meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.admin-meta-item {
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(120deg, color-mix(in srgb, var(--admin-violet) 6%, var(--bg-card)), var(--bg-card));
}

.admin-meta-label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.admin-meta-value {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-section-card { margin-bottom: 14px; }

.admin-section-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.admin-section-heading > span { min-width: 0; }

.admin-section-heading small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}

.admin-section-intro {
  max-width: 980px;
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.6;
}

.admin-table-shell {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--glass) 70%, transparent);
}

.admin-table-shell > table { min-width: 680px; }

.admin-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(105deg, color-mix(in srgb, var(--admin-violet) 6%, var(--glass)), var(--glass));
}

.admin-filter-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
}

.admin-filter-heading i { color: var(--admin-accent); font-size: 16px; }

.admin-filter-heading strong,
.admin-filter-heading span { display: block; }

.admin-filter-heading strong { color: var(--text-primary); font-size: 12px; }
.admin-filter-heading span { color: var(--text-muted); font-size: 10px; }

.admin-filter-control {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: min(100%, 300px);
  margin-left: auto;
}

.admin-filter-input-wrap { position: relative; flex: 1 1 220px; }
.admin-filter-input-wrap > i {
  position: absolute;
  top: 50%;
  left: 10px;
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}

.admin-filter-input-wrap .form-control { padding-left: 30px; }
.admin-filter-clear { white-space: nowrap; }

.admin-status-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 18px;
  margin-bottom: 9px;
  color: var(--text-muted);
  font-size: 11px;
}

.admin-status-line::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--admin-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 13%, transparent);
  content: '';
}

.admin-setup-card summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
}

.admin-setup-card summary::after {
  margin-left: auto;
  color: var(--text-muted);
  content: '\f282';
  font-family: 'bootstrap-icons';
  font-size: 11px;
  transition: transform .15s ease;
}

.admin-setup-card details[open] summary::after { transform: rotate(180deg); }

.admin-setup-card .admin-setup-content {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.admin-quick-test {
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-cyan) 5%, var(--bg-card)), var(--bg-card));
}

.admin-channel-list .channel-row {
  display: grid !important;
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(140px, 1fr) auto;
  align-items: center;
  gap: 14px !important;
}

.admin-channel-list .channel-row > div { min-width: 0 !important; }

.admin-channel-list .channel-row code {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.admin-audit-table > table { min-width: 760px; }
.admin-audit-table tbody tr { transition: background-color .15s ease; }
.admin-audit-table tbody tr:hover { background: color-mix(in srgb, var(--admin-violet) 7%, transparent); }
.admin-audit-table td:first-child,
.admin-audit-table th:first-child { text-align: center; }
.admin-audit-table td:nth-child(2) strong { color: var(--text-primary); }
.admin-audit-table td:nth-child(3) { font-weight: 650; }
.admin-audit-table td:nth-child(7) { color: var(--text-muted); font-size: 11px; }

@media (max-width: 760px) {
  .admin-page-hero { padding: 17px; }
  .admin-page-hero-actions { align-items: flex-start; }
  .admin-page-hero-note { white-space: normal; }
  .admin-meta-strip { grid-template-columns: 1fr; gap: 7px; }
  .admin-filter-control { width: 100%; margin-left: 0; }
  .admin-channel-list .channel-row { grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .admin-channel-list .channel-row > div:first-child,
  .admin-channel-list .channel-row > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .admin-page-hero { display: block; }
  .admin-page-hero-actions { margin-top: 14px; }
  .admin-page-badge { white-space: normal; }
  .admin-filter-toolbar { align-items: stretch; }
  .admin-filter-control { display: block; }
  .admin-filter-clear { width: 100%; margin-top: 7px; }
  .admin-channel-list .channel-row { grid-template-columns: 1fr; }
  .admin-channel-list .channel-row > div { grid-column: 1 / -1 !important; }
}

/* Final viewport guardrails. These rules address controls that are rendered
   by many legacy modules, including inline-sized dropdowns and modal forms.
   Keep them shared so a new route inherits the same small-screen behavior. */
html.sidebar-mobile-open,
html.sidebar-mobile-open body {
  overflow-x: hidden;
}

@media (max-width: 680px) {
  html.sidebar-mobile-open,
  html.sidebar-mobile-open body {
    overflow-y: hidden;
  }

  .app-shell :where(.btn, .btn-icon, .notification-bell, .sidebar-toggle) {
    min-height: 40px;
  }

  .app-shell :where(.btn-icon, .notification-bell) {
    width: 40px;
    height: 40px;
  }

  .app-shell .sidebar-toggle {
    min-width: 40px;
  }

  .app-shell .sidebar-nav .nav-item {
    min-height: 40px;
  }

  .app-shell .filter-bar .search-bar,
  .app-shell .section-card-header .search-bar {
    width: 100% !important;
    max-width: none !important;
  }

  .app-shell .dropdown-menu {
    width: min(320px, calc(100vw - 24px));
    min-width: 0 !important;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 96px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .app-shell .modal-dialog {
    width: auto;
    max-width: calc(100% - 1rem);
    margin: .5rem auto;
  }

  .app-shell .modal-content {
    display: flex;
    max-height: calc(100dvh - 1rem);
  }

  .app-shell .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-shell .modal-footer {
    flex-wrap: wrap;
  }

  .app-shell .modal-footer > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 380px) {
  .app-shell .page-content {
    padding-inline: 10px;
  }

  .app-shell .top-navbar {
    padding-inline: 7px;
  }

  .app-shell .breadcrumb-nav {
    max-width: 27vw;
    font-size: 12px;
  }

  .app-shell .section-card-header {
    padding-inline: 14px;
  }
}

/* Keep shared analysis guidance readable when the light theme is active. */
[data-theme="light"] .app-shell .analysis-insight-strip {
  border-color: #b7d4dc;
  background:
    linear-gradient(110deg, rgba(8, 127, 159, .10), rgba(102, 93, 184, .07)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 24px rgba(15, 23, 42, .08);
}

[data-theme="light"] .app-shell .analysis-insight-icon {
  color: #087f9f;
  background: rgba(8, 127, 159, .10);
  border-color: rgba(8, 127, 159, .28);
}

[data-theme="light"] .app-shell .analysis-insight-kicker,
[data-theme="light"] .app-shell .analysis-insight-item i {
  color: #087f9f;
}

[data-theme="light"] .app-shell .analysis-insight-lead strong,
[data-theme="light"] .app-shell .analysis-insight-item b {
  color: #0b1220;
}

[data-theme="light"] .app-shell .analysis-insight-lead p,
[data-theme="light"] .app-shell .analysis-insight-item {
  color: #40516a;
}

[data-theme="light"] .app-shell .analysis-insight-item {
  border-left-color: #d2dde7;
}

@media (max-width: 900px) {
  [data-theme="light"] .app-shell .analysis-insight-item {
    border-left-color: transparent;
    border-top-color: #d2dde7;
  }
}