/* ═══════════════════════════════════════════════════════════════════════════
   AAC — Refonte V2 (Editorial Pro, bloomberg.com-style)
   ═══════════════════════════════════════════════════════════════════════════

   Philosophy:
     - Light, editorial, calm. NOT a dark terminal.
     - Strong typography hierarchy (Inter + tabular-nums for numbers)
     - Red (Aleph brand) used sparingly — live indicators, nav active, accent bars
     - Data-dense but breathable: generous line-height, thin dividers, no striping
     - No gradients, no heavy shadows, minimal decoration
     - Hover states for interactive elements, never for decoration

   This file loads AFTER terminal.css so selectors here override where needed.
   Existing IDs/classes are preserved — no JS changes required for this file.
*/

/* ── Typography: Inter (Google Fonts) + tabular-nums for all numbers ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Light editorial palette */
  --r2-bg:           #f7f8fa;
  --r2-surface:      #ffffff;
  --r2-surface-alt:  #fafbfc;
  --r2-hover:        #f0f2f5;
  --r2-sunken:       #eef0f4;

  --r2-ink:          #0b0d12;   /* headlines, primary text */
  --r2-ink-2:        #2d3139;   /* body */
  --r2-ink-muted:    #6b7280;   /* labels, captions */
  --r2-ink-dim:      #9ca3af;   /* very muted / placeholders */

  --r2-line:         #e5e7eb;   /* thin dividers */
  --r2-line-strong:  #d1d5db;   /* stronger dividers */

  /* Aleph brand red */
  --r2-accent:       #e11d48;
  --r2-accent-ink:   #ffffff;
  --r2-accent-dim:   #ffe4e6;
  --r2-accent-bar:   #e11d48;

  /* Semantic (COLORBLIND-SAFE — Okabe-Ito palette)
     Red/green is the worst couple for deuteranopia & protanopia (most common
     forms, ~8% of men). We use Teal for gains and Vermillion/Orange for
     losses — both universally distinguishable regardless of color vision.
     Always paired with ▲/▼ arrow + sign ($+/$-) for double-encoding. */
  --r2-gain:         #0d9488;   /* teal-700 — gains */
  --r2-gain-bg:      #ccfbf1;
  --r2-loss:         #ea580c;   /* orange-600 — losses */
  --r2-loss-bg:      #ffedd5;
  --r2-warn:         #b45309;
  --r2-warn-bg:      #fef3c7;
  --r2-info:         #1d4ed8;
  --r2-info-bg:      #dbeafe;

  /* Shadow: one level only */
  --r2-shadow:       0 1px 2px rgba(10, 13, 18, 0.04), 0 1px 1px rgba(10, 13, 18, 0.03);
  --r2-shadow-hover: 0 2px 8px rgba(10, 13, 18, 0.06), 0 1px 2px rgba(10, 13, 18, 0.04);

  /* Radii */
  --r2-radius-sm: 4px;
  --r2-radius:    6px;
  --r2-radius-lg: 10px;

  /* Typography scale */
  --r2-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --r2-font-mono: 'SF Mono', ui-monospace, 'Menlo', 'Consolas', monospace;

  /* Override existing terminal.css vars so legacy selectors pick up the new palette */
  --bg: var(--r2-bg);
  --card: var(--r2-surface);
  --surface: var(--r2-surface);
  --surface-2: var(--r2-surface-alt);
  --text: var(--r2-ink);
  --text-dim: var(--r2-ink-muted);
  --muted: var(--r2-ink-muted);
  --border: var(--r2-line);
  --green: var(--r2-gain);
  --red: var(--r2-loss);
  --accent: var(--r2-accent);
  --accent-hover: #be123c;
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */
html, body {
  background: var(--r2-bg) !important;
  color: var(--r2-ink) !important;
  font-family: var(--r2-font-sans) !important;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body { font-size: 13px; line-height: 1.5; }

/* Tabular numbers everywhere a number is shown — keeps columns aligned */
td, th, .stat-value, .perf-value, .return-value, .metric-value, .price, .money,
input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Headings */
h1, h2, h3, h4, h5, .page-title, .card-title, .welcome-greeting {
  font-family: var(--r2-font-sans);
  color: var(--r2-ink);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ─────────────────────────────────────────────────────────────
   Top bar (brand + status)
   ───────────────────────────────────────────────────────────── */
.top-bar, header, .header-bar {
  background: var(--r2-surface) !important;
  border-bottom: 1px solid var(--r2-line);
  box-shadow: none;
}

/* Brand title */
.brand, .logo-text, .brand-title {
  font-family: var(--r2-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--r2-ink);
}

/* Health status items in the top bar */
.health-item {
  font-size: 12px;
  color: var(--r2-ink-2);
  padding: 0 10px;
  border-right: 1px solid var(--r2-line);
}
.health-item:last-child { border-right: 0; }

.connection-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; margin-right: 6px; vertical-align: middle;
}
.dot-green { background: var(--r2-gain); box-shadow: 0 0 4px rgba(4, 120, 87, 0.45); }
.dot-red   { background: var(--r2-loss); box-shadow: 0 0 4px rgba(190, 18, 60, 0.45); }

/* ─────────────────────────────────────────────────────────────
   Navigation tabs
   ───────────────────────────────────────────────────────────── */
.nav-tabs {
  background: var(--r2-surface);
  border-bottom: 1px solid var(--r2-line);
  padding: 0 16px;
  display: flex;
  gap: 0;
  align-items: stretch;
  box-shadow: none !important;
}

.nav-tab {
  background: transparent !important;
  color: var(--r2-ink-muted) !important;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.nav-tab:hover {
  color: var(--r2-ink) !important;
  background: transparent !important;
}

.nav-tab.active {
  color: var(--r2-accent) !important;
  border-bottom-color: var(--r2-accent) !important;
  background: transparent !important;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Cards
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--r2-surface) !important;
  border: 1px solid var(--r2-line) !important;
  border-radius: var(--r2-radius) !important;
  box-shadow: var(--r2-shadow);
  padding: 16px !important;
  transition: box-shadow 160ms ease;
}

.card:hover {
  box-shadow: var(--r2-shadow-hover);
}

/* Card title: uppercase, small, muted. Accent bar on left stays only on
   featured cards (Open Positions) via the existing terminal.css rule.  */
.card-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--r2-ink-muted);
  margin-bottom: 10px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--r2-line);
  display: flex;
  align-items: center;
}

/* The accent bar on Open Positions (from terminal.css) keeps its brand red */
#dtab-overview .card:has(#positions-tbody) {
  border-left: 3px solid var(--r2-accent) !important;
}

/* Sub-title / caption under card titles */
.card > div[style*="color:var(--text-dim)"],
.card > div[style*="color:var(--muted)"] {
  font-size: 11px !important;
  color: var(--r2-ink-muted) !important;
}

/* ─────────────────────────────────────────────────────────────
   Tables (Bloomberg-inspired)
   ───────────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: transparent;
}

table thead tr {
  background: transparent !important;
}

table th {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--r2-ink-muted) !important;
  border-bottom: 1px solid var(--r2-line-strong);
  padding: 8px 10px !important;
  text-align: left;
  background: transparent !important;
  white-space: nowrap;
}

table td {
  padding: 9px 10px !important;
  border-bottom: 1px solid var(--r2-line);
  color: var(--r2-ink-2) !important;
  background: transparent !important;
  font-size: 12px;
}

table tbody tr {
  transition: background 100ms ease;
}
table tbody tr:hover {
  background: var(--r2-hover) !important;
}

/* Numeric columns (typically 2nd+) should be right-aligned.
   Keep symbol/name columns left-aligned. */
.positions-table th:not(:first-child),
.positions-table td:not(:first-child),
#history-tbody td:nth-child(n+4),
#recent-trades-tbody td:nth-child(n+5),
#ai-analysis-feed-tbody td:nth-child(n+4) {
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   Stat cards (Performance, Returns, Auto-trade stats)
   ───────────────────────────────────────────────────────────── */
.stat-card, .perf-item, .return-item {
  background: var(--r2-surface) !important;
  border: 1px solid var(--r2-line) !important;
  border-radius: var(--r2-radius) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
  transition: border-color 150ms ease;
}
.stat-card:hover, .perf-item:hover, .return-item:hover {
  border-color: var(--r2-line-strong) !important;
}

.stat-label, .perf-label, .return-period {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--r2-ink-muted) !important;
  margin-bottom: 4px;
}

.stat-value, .perf-value, .return-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--r2-ink) !important;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Sub-text below a stat (already added in tooltips) */
.stat-card div:last-child:not(.stat-value):not(.stat-label),
.stat-sub {
  font-size: 10px;
  color: var(--r2-ink-muted);
  margin-top: 3px;
}

/* Green/red accents on values — colorblind-safe with icon double-encoding.
   CSS ::before adds ▲ or ▼ so meaning is readable without color. */
.stat-value.positive, .perf-value.positive, .return-value.positive { color: var(--r2-gain) !important; }
.stat-value.positive::before, .perf-value.positive::before, .return-value.positive::before {
  content: '▲ ';
  font-size: 0.7em;
  margin-right: 2px;
  vertical-align: middle;
}
.stat-value.negative, .perf-value.negative, .return-value.negative { color: var(--r2-loss) !important; }
.stat-value.negative::before, .perf-value.negative::before, .return-value.negative::before {
  content: '▼ ';
  font-size: 0.7em;
  margin-right: 2px;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn, button.btn {
  font-family: var(--r2-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding: 7px 14px;
  border-radius: var(--r2-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1.4;
}

.btn-primary {
  background: var(--r2-accent);
  color: var(--r2-accent-ink);
  border-color: var(--r2-accent);
}
.btn-primary:hover {
  background: #be123c;
  border-color: #be123c;
}

.btn-outline {
  background: transparent;
  color: var(--r2-ink-2);
  border-color: var(--r2-line-strong);
}
.btn-outline:hover {
  background: var(--r2-hover);
  border-color: var(--r2-ink-muted);
}

.btn-success {
  background: var(--r2-gain);
  color: #ffffff;
  border-color: var(--r2-gain);
}
.btn-success:hover { background: #065f46; border-color: #065f46; }

.btn-danger {
  background: var(--r2-loss);
  color: #ffffff;
  border-color: var(--r2-loss);
}
.btn-danger:hover { background: #9f1239; border-color: #9f1239; }

.btn-sm {
  font-size: 11px !important;
  padding: 5px 10px !important;
}

.btn:disabled, .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────
   Forms
   ───────────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--r2-font-sans);
  font-size: 13px;
  color: var(--r2-ink);
  background: var(--r2-surface);
  border: 1px solid var(--r2-line-strong);
  border-radius: var(--r2-radius);
  padding: 8px 10px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--r2-accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

input::placeholder, textarea::placeholder {
  color: var(--r2-ink-dim);
}

label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--r2-ink-muted);
  display: block;
  margin-bottom: 4px;
}

.form-group { margin-bottom: 12px; }

/* ─────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 10px;
  background: var(--r2-sunken);
  color: var(--r2-ink-2);
  border: none;
}
.badge-success { background: var(--r2-gain-bg) !important; color: var(--r2-gain) !important; }
.badge-danger  { background: var(--r2-loss-bg) !important; color: var(--r2-loss) !important; }
.badge-warning { background: var(--r2-warn-bg) !important; color: var(--r2-warn) !important; }
.badge-info    { background: var(--r2-info-bg) !important; color: var(--r2-info) !important; }
.badge-muted   { background: var(--r2-sunken) !important; color: var(--r2-ink-muted) !important; }

/* ─────────────────────────────────────────────────────────────
   Auto-Trade indicator (pulse dot)
   ───────────────────────────────────────────────────────────── */
.auto-trade-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--r2-accent-dim);
  color: var(--r2-accent);
  border-radius: 12px;
}
.pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--r2-accent);
  animation: r2-pulse 1.5s ease-in-out infinite;
}
@keyframes r2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* ─────────────────────────────────────────────────────────────
   Market status badge (open/closed)
   ───────────────────────────────────────────────────────────── */
.market-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 12px;
  background: var(--r2-sunken);
  color: var(--r2-ink-muted);
}
.market-status-badge.open {
  background: var(--r2-gain-bg);
  color: var(--r2-gain);
}
.market-status-badge.closed {
  background: var(--r2-sunken);
  color: var(--r2-ink-muted);
}
.market-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ─────────────────────────────────────────────────────────────
   NYC clock
   ───────────────────────────────────────────────────────────── */
.nyc-clock-box {
  background: var(--r2-sunken);
  border: 1px solid var(--r2-line);
  border-radius: var(--r2-radius);
  padding: 6px 12px;
  text-align: center;
}
.nyc-clock-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r2-ink-muted);
}
.nyc-clock-time {
  font-family: var(--r2-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--r2-ink);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   Welcome bar (Markets page header)
   ───────────────────────────────────────────────────────────── */
.welcome-bar {
  background: var(--r2-surface) !important;
  border: 1px solid var(--r2-line) !important;
  border-radius: var(--r2-radius);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: var(--r2-shadow);
}

.welcome-greeting {
  font-size: 18px !important;
  font-weight: 700;
  color: var(--r2-ink);
  letter-spacing: -0.015em;
}

.welcome-summary {
  font-size: 12px;
  color: var(--r2-ink-muted);
}

.welcome-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────
   Dashboard sub-tabs (Overview / Analytics / Risk / ...)
   ───────────────────────────────────────────────────────────── */
.dash-subtabs, .sub-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--r2-line);
  margin-bottom: 16px;
  padding: 0;
  background: transparent !important;
}

.dash-subtab {
  background: transparent !important;
  color: var(--r2-ink-muted) !important;
  font-size: 12px;
  font-weight: 500;
  padding: 9px 16px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: var(--r2-radius-sm) var(--r2-radius-sm) 0 0 !important;
  cursor: pointer;
  transition: all 120ms ease;
}

.dash-subtab:hover {
  color: var(--r2-ink) !important;
  background: var(--r2-hover) !important;
}

.dash-subtab.active {
  color: var(--r2-accent) !important;
  background: transparent !important;
  border-bottom-color: var(--r2-accent) !important;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Modals (Options chain, place order, etc.)
   ───────────────────────────────────────────────────────────── */
.modal {
  background: rgba(10, 13, 18, 0.45) !important;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: var(--r2-surface) !important;
  border: 1px solid var(--r2-line) !important;
  border-radius: var(--r2-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(10, 13, 18, 0.18) !important;
}

.modal-header {
  border-bottom: 1px solid var(--r2-line) !important;
  padding: 14px 20px !important;
  font-weight: 600 !important;
  font-size: 14px;
  color: var(--r2-ink);
}

.modal-close {
  color: var(--r2-ink-muted) !important;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover {
  color: var(--r2-ink) !important;
  background: var(--r2-hover) !important;
  border-radius: 4px;
}

.modal-body {
  padding: 18px 20px !important;
  color: var(--r2-ink-2);
}

/* ─────────────────────────────────────────────────────────────
   Heatmap
   ───────────────────────────────────────────────────────────── */
.markets-heatmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.hm-sector-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r2-ink-muted);
  margin-bottom: 4px;
}

.hm-full-cell {
  border-radius: var(--r2-radius-sm);
  padding: 6px 8px;
  color: rgba(10, 13, 18, 0.88);
  font-size: 11px;
  transition: transform 120ms ease;
}
.hm-full-cell:hover {
  transform: translateY(-1px);
  z-index: 5;
}
.hm-symbol { font-weight: 600; font-size: 11px; }
.hm-change { font-size: 10px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.hm-price  { font-size: 10px; opacity: 0.7;  font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────────────────────
   Page & layout
   ───────────────────────────────────────────────────────────── */
.page {
  padding: 16px;
  max-width: 1680px;
  margin: 0 auto;
}

/* Charts: make them blend instead of looking like terminal readouts */
canvas { background: transparent !important; }

.chart-container {
  background: transparent;
}

.chart-empty {
  color: var(--r2-ink-muted) !important;
  font-size: 12px;
}

/* Fade-in baseline (keep existing animation) */
.fade-in {
  animation: r2-fadein 260ms ease-out both;
}
@keyframes r2-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   Scrollbars (subtle)
   ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--r2-line-strong);
  border-radius: 5px;
  border: 2px solid var(--r2-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--r2-ink-muted); }

/* ─────────────────────────────────────────────────────────────
   Dark-theme toggle: this refonte is LIGHT ONLY.
   If the user force-toggles to dark, we fall back to a softened dark palette
   that still follows the editorial rules (no neon, no gradient).
   ───────────────────────────────────────────────────────────── */
/* Explicit light theme — same as :root defaults, but active when data-theme="light" */
[data-theme="light"] {
  --r2-bg:           #f7f8fa;
  --r2-surface:      #ffffff;
  --r2-surface-alt:  #fafbfc;
  --r2-hover:        #f0f2f5;
  --r2-sunken:       #eef0f4;
  --r2-ink:          #0b0d12;
  --r2-ink-2:        #2d3139;
  --r2-ink-muted:    #6b7280;
  --r2-ink-dim:      #9ca3af;
  --r2-line:         #e5e7eb;
  --r2-line-strong:  #d1d5db;
}

/* Dark theme — deep editorial, still colorblind-safe (teal + orange) */
[data-theme="dark"] {
  --r2-bg:          #0b0f17;
  --r2-surface:     #141924;
  --r2-surface-alt: #1a1f2c;
  --r2-hover:       #1f2532;
  --r2-sunken:      #181d28;

  --r2-ink:         #f3f4f6;
  --r2-ink-2:       #d1d5db;
  --r2-ink-muted:   #9aa0a6;
  --r2-ink-dim:     #6b7280;

  --r2-line:        #262b36;
  --r2-line-strong: #3a404d;

  --r2-accent:      #f43f5e;
  --r2-accent-dim:  rgba(244, 63, 94, 0.12);
  --r2-accent-bar:  #f43f5e;
  --r2-accent-ink:  #ffffff;

  /* Colorblind-safe dark: teal + orange */
  --r2-gain:        #2dd4bf;
  --r2-gain-bg:     rgba(45, 212, 191, 0.14);
  --r2-loss:        #fb923c;
  --r2-loss-bg:     rgba(251, 146, 60, 0.14);
  --r2-warn:        #fbbf24;
  --r2-warn-bg:     rgba(251, 191, 36, 0.12);
  --r2-info:        #60a5fa;
  --r2-info-bg:     rgba(96, 165, 250, 0.12);

  --r2-shadow:       0 1px 2px rgba(0, 0, 0, 0.4);
  --r2-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.55);

  /* Re-map legacy vars so every card/table/form picks it up */
  --bg: var(--r2-bg);
  --card: var(--r2-surface);
  --surface: var(--r2-surface);
  --surface-2: var(--r2-surface-alt);
  --text: var(--r2-ink);
  --text-dim: var(--r2-ink-muted);
  --muted: var(--r2-ink-muted);
  --border: var(--r2-line);
  --green: var(--r2-gain);
  --red: var(--r2-loss);
  --accent: var(--r2-accent);
}

/* Explicit fill for legacy inline-styled backgrounds that don't use the CSS var */
[data-theme="dark"] body,
[data-theme="dark"] html { background: var(--r2-bg) !important; color: var(--r2-ink) !important; }
[data-theme="dark"] .card { background: var(--r2-surface) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] .topbar,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .market-ticker,
[data-theme="dark"] .news-ticker { background: var(--r2-surface) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: var(--r2-surface-alt) !important; color: var(--r2-ink) !important; border-color: var(--r2-line-strong) !important; }
[data-theme="dark"] table th { color: var(--r2-ink-muted) !important; border-color: var(--r2-line-strong) !important; }
[data-theme="dark"] table td { color: var(--r2-ink-2) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] table tbody tr:hover { background: var(--r2-hover) !important; }
[data-theme="dark"] .stat-card,
[data-theme="dark"] .perf-item,
[data-theme="dark"] .return-item { background: var(--r2-surface) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] .market-ticker-item { border-right-color: var(--r2-line) !important; }
[data-theme="dark"] .modal-content { background: var(--r2-surface) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] .news-source { background: var(--r2-sunken) !important; color: var(--r2-ink-muted) !important; }
[data-theme="dark"] .welcome-bar { background: var(--r2-surface) !important; border-color: var(--r2-line) !important; }
[data-theme="dark"] .nyc-clock-box { background: var(--r2-sunken) !important; border-color: var(--r2-line) !important; }

/* ─────────────────────────────────────────────────────────────
   Overrides for legacy terminal.css elements that clash with editorial
   ───────────────────────────────────────────────────────────── */

/* Remove any leftover glow/shadow on buttons from terminal theme */
.quick-actions .btn { box-shadow: none !important; }

/* Place Order form on Trading page */
.order-form .form-group {
  margin-bottom: 12px;
}

/* Symbol price card on Trading page */
#symbol-price-content { padding: 8px 0; }

/* Kill-switch banner: make it a clear warning bar instead of neon */
.kill-switch-banner {
  background: var(--r2-loss-bg) !important;
  color: var(--r2-loss) !important;
  border: 1px solid var(--r2-loss);
  border-radius: var(--r2-radius);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 13px;
}

/* Dashboard sidebar news items */
.news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--r2-line);
}
.news-item:last-child { border-bottom: 0; }
.news-title {
  font-size: 13px;
  color: var(--r2-ink);
  font-weight: 500;
  line-height: 1.4;
}
.news-source, .news-meta {
  font-size: 11px;
  color: var(--r2-ink-muted);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* Logos inline in table cells */
td img[src*="favicons"], td img[src*="logo"] {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid var(--r2-line);
  background: var(--r2-surface);
}

/* Equity / price cell emphasis */
.positions-table td:first-child,
#recent-trades-tbody td:nth-child(2),
#history-tbody td:nth-child(2) {
  font-weight: 600;
  color: var(--r2-ink) !important;
}

/* Action cells (BUY/SELL) — simpler pill */
#recent-trades-tbody td:nth-child(3) span,
#history-tbody td:nth-child(3) span {
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* Tighter spacing on overview row for data density */
.overview-row-1 { gap: 12px; }
.overview-row-1 .card { padding: 14px !important; }

/* Auto-Trade status line */
#auto-status {
  font-size: 14px;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────
   Login page (editorial, calm, brand-anchored)
   ───────────────────────────────────────────────────────────── */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 10%, rgba(225, 29, 72, 0.04), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(225, 29, 72, 0.03), transparent 50%),
    var(--r2-bg);
  padding: 24px;
  position: relative;
}

/* Login-page footer pinned to bottom-center, full width */
.aac-footer-login-inline {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
  justify-content: center !important;
  padding: 12px 16px !important;
}
.aac-footer-login-inline .aac-footer-inner {
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.login-box {
  background: var(--r2-surface) !important;
  border: 1px solid var(--r2-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(10, 13, 18, 0.06), 0 2px 6px rgba(10, 13, 18, 0.03) !important;
  padding: 40px 36px !important;
  width: 100%;
  max-width: 420px;
}

.login-box h1 {
  color: var(--r2-accent) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 14px 0 4px 0;
}

.login-box .subtitle {
  color: var(--r2-ink-muted) !important;
  font-size: 13px;
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

.login-box .btn-primary {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}

.login-box .error-msg, .login-box .error {
  color: var(--r2-loss) !important;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
}

.twofa-icon { font-size: 28px; text-align: center; margin-bottom: 12px; }
.twofa-input {
  text-align: center;
  font-family: var(--r2-font-mono);
  font-size: 22px;
  letter-spacing: 0.3em;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   Topbar (post-login app top bar)
   ───────────────────────────────────────────────────────────── */
.topbar {
  background: var(--r2-surface) !important;
  border-bottom: 1px solid var(--r2-line) !important;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: none !important;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-logo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--r2-ink);
}
.topbar-logo-img { height: 22px; width: auto; }

.mode-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--r2-sunken);
  color: var(--r2-ink-muted);
}
.mode-badge.mode-LIVE    { background: var(--r2-gain-bg); color: var(--r2-gain); }
.mode-badge.mode-PAPER   { background: var(--r2-info-bg); color: var(--r2-info); }
.mode-badge.mode-OFFLINE { background: var(--r2-sunken); color: var(--r2-ink-muted); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--r2-ink-2);
}

.theme-toggle, .compact-toggle {
  background: transparent;
  border: 1px solid var(--r2-line-strong);
  color: var(--r2-ink-muted);
  border-radius: var(--r2-radius-sm);
  padding: 5px 9px;
  cursor: pointer;
  transition: all 120ms ease;
}
.theme-toggle:hover, .compact-toggle:hover {
  color: var(--r2-ink);
  background: var(--r2-hover);
}

/* ─────────────────────────────────────────────────────────────
   Market Ticker Bar — light editorial + slower scroll
   ───────────────────────────────────────────────────────────── */
.market-ticker {
  background: var(--r2-surface) !important;
  border-bottom: 1px solid var(--r2-line) !important;
  font-size: 12px !important;
}

.market-ticker-content { padding: 10px 0 !important; }

/* Slower scroll — 150s instead of 60s (2.5× slower, much more readable) */
.market-ticker-inner {
  animation-duration: var(--ticker-duration, 150s) !important;
}

.market-ticker-item {
  border-right: 1px solid var(--r2-line) !important;
  padding: 0 18px !important;
  gap: 10px !important;
}

.market-name {
  color: var(--r2-ink-2) !important;
  font-weight: 600 !important;
}
.market-price {
  color: var(--r2-ink) !important;
  font-variant-numeric: tabular-nums;
}
.market-change {
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
}
/* Colorblind-safe up/down (teal / orange + arrows are added via JS inline) */
.market-change.up, .market-change.positive { color: var(--r2-gain) !important; }
.market-change.down, .market-change.negative { color: var(--r2-loss) !important; }

/* ─────────────────────────────────────────────────────────────
   News Ticker Bar (NEW — scrolling headlines)
   ───────────────────────────────────────────────────────────── */
.news-ticker {
  background: var(--r2-surface);
  border-bottom: 1px solid var(--r2-line);
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* NEWS label on the left with accent color */
.news-ticker-label {
  flex-shrink: 0;
  background: var(--r2-accent);
  color: var(--r2-accent-ink);
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.news-ticker-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r2-accent-ink);
  animation: r2-pulse 1.6s ease-in-out infinite;
}

.news-ticker-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.news-ticker-inner {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: news-scroll linear infinite;
  animation-duration: var(--news-ticker-duration, 420s) !important;
  padding: 0 24px;
}
.news-ticker-inner:hover { animation-play-state: paused; }

/* Content is duplicated so translating 50% yields a seamless loop (same
   mechanic as the market ticker). */
@keyframes news-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--r2-ink-2);
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}
.news-ticker-item .news-source {
  font-size: 10px;
  font-weight: 700;
  color: var(--r2-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--r2-sunken);
  border-radius: 3px;
}
.news-ticker-item .news-time {
  color: var(--r2-ink-muted);
  font-size: 11px;
  margin-left: 4px;
}
.news-ticker-item a {
  color: inherit;
  text-decoration: none;
}
.news-ticker-item a:hover { color: var(--r2-accent); }

/* ─────────────────────────────────────────────────────────────
   STICKY HEADER (topbar + clocks + tickers + nav all frozen on scroll)
   ───────────────────────────────────────────────────────────── */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--r2-surface);
  border-bottom: 1px solid var(--r2-line);
  box-shadow: 0 1px 4px rgba(10, 13, 18, 0.04);
}

/* Compact topbar — health items inline between logo and action icons */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px !important;
  flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-health {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  min-width: 0;
  justify-content: center;
}
.topbar-health .health-item {
  padding: 0 10px;
  font-size: 11px;
  border-right: 1px solid var(--r2-line);
  white-space: nowrap;
}
.topbar-health .health-item:last-child { border-right: 0; }

/* World clock: tighter vertical */
.world-clock-bar {
  padding: 4px 16px !important;
  border-bottom: 1px solid var(--r2-line);
  background: var(--r2-surface-alt);
}

/* Market ticker with LIVE + REGION INLINE (same row, no separate line) */
.market-region-selector {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 6px 14px !important;
  background: var(--r2-surface-alt);
  border-right: 1px solid var(--r2-line);
  flex-shrink: 0;
  font-size: 11px;
  color: var(--r2-ink-muted);
}
.market-region-selector .live-badge {
  padding: 2px 8px;
  background: var(--r2-gain-bg);
  color: var(--r2-gain);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.market-region-selector label {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--r2-ink-muted) !important;
}
.market-region-selector select {
  padding: 3px 8px !important;
  font-size: 11px !important;
  background: var(--r2-surface);
  border: 1px solid var(--r2-line);
  border-radius: 4px;
  color: var(--r2-ink);
}
.market-last-update {
  font-size: 10px;
  color: var(--r2-ink-dim);
  margin-left: 4px;
}

/* Market ticker row: selector on left, scroll on right, single line */
#market-ticker {
  display: flex;
  align-items: center;
}
#market-ticker-content {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────
   NEWS PAGE — grid of cards, filter, search, daily briefing
   ───────────────────────────────────────────────────────────── */
.news-briefing-card {
  background: linear-gradient(180deg, var(--r2-surface), var(--r2-surface-alt));
  border: 1px solid var(--r2-line) !important;
  border-left: 3px solid var(--r2-accent) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
}

.news-briefing-card h3 {
  font-size: 15px;
  margin: 12px 0 4px 0;
  color: var(--r2-ink);
}

.news-briefing-card p {
  margin: 6px 0;
  line-height: 1.6;
}

.news-briefing-card ul {
  margin: 8px 0;
  padding-left: 20px;
}

/* ─────────────────────────────────────────────────────────────
   News page — Bloomberg.com-inspired (editorial, category bar,
   lead story, grouped cards)
   ───────────────────────────────────────────────────────────── */
.page-news { padding: 10px 14px !important; }

.news-cat-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--r2-surface);
  border: 1px solid var(--r2-line);
  border-radius: var(--r2-radius);
  padding: 8px 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  box-shadow: 0 1px 2px rgba(10, 13, 18, 0.04);
}
.news-cat {
  background: transparent;
  border: 1px solid transparent;
  color: var(--r2-ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.news-cat:hover { color: var(--r2-ink); background: var(--r2-hover); }
.news-cat.active {
  background: var(--r2-ink);
  color: var(--r2-surface);
  border-color: var(--r2-ink);
}

/* Bloomberg-style lead story — bigger card, image + body side-by-side on desktop */
.news-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--r2-surface);
  border: 1px solid var(--r2-line);
  border-radius: var(--r2-radius);
  overflow: hidden;
  margin-bottom: 8px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.news-lead:hover {
  border-color: var(--r2-line-strong);
  box-shadow: 0 4px 20px rgba(10, 13, 18, 0.08);
}
.news-lead-image {
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 220px;
  background: var(--r2-sunken);
  overflow: hidden;
}
.news-lead-image img { width: 100%; height: 100%; object-fit: cover; }
.news-lead-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.news-lead-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--r2-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.news-lead-title:hover { color: var(--r2-accent); }
.news-lead-summary {
  font-size: 14px;
  color: var(--r2-ink-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-lead-link {
  font-size: 12px;
  color: var(--r2-accent);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead-image { min-height: 180px; }
  .news-lead-body { padding: 16px 18px; }
  .news-lead-title { font-size: 18px; }
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 0;
}

.news-card {
  background: var(--r2-surface);
  border: 1px solid var(--r2-line);
  border-radius: var(--r2-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(10, 13, 18, 0.06);
  border-color: var(--r2-line-strong);
}
.news-card .news-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.news-card .news-card-image {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--r2-sunken);
  overflow: hidden;
}
.news-card .news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.news-card:hover .news-card-image img {
  transform: scale(1.03);
}

/* Source section header when grid is grouped by source */
.news-grid.grouped .news-source-header {
  padding: 16px 4px 8px;
  margin-top: 8px;
  border-bottom: 1px solid var(--r2-line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-grid.grouped .news-source-header:first-child {
  padding-top: 0;
  margin-top: 0;
}

.news-card-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.news-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--r2-sunken);
  color: var(--r2-ink-muted);
  border-radius: 3px;
}
.news-card-badge.bloomberg   { background: rgba(249, 115, 22, 0.12); color: #c2410c; }
.news-card-badge.investing   { background: rgba(16, 185, 129, 0.12); color: #059669; }
.news-card-badge.yahoo       { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.news-card-badge.ft          { background: rgba(236, 72, 153, 0.12); color: #be185d; }
.news-card-badge.cnbc        { background: rgba(234, 179, 8, 0.12);  color: #a16207; }
.news-card-badge.reuters     { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.news-card-badge.marketwatch { background: rgba(20, 184, 166, 0.12); color: #0d9488; }

.news-card-time {
  font-size: 10px;
  color: var(--r2-ink-muted);
  letter-spacing: 0.02em;
}

.news-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--r2-ink);
  text-decoration: none;
}
.news-card-title:hover { color: var(--r2-accent); }

.news-card-summary {
  font-size: 12px;
  color: var(--r2-ink-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  margin-top: auto;
  font-size: 11px;
  color: var(--r2-ink-muted);
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
.aac-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 14px 18px;
  border-top: 1px solid var(--r2-line);
  background: linear-gradient(180deg, transparent, var(--r2-surface-alt));
  font-size: 11px;
  color: var(--r2-ink-muted);
  letter-spacing: 0.02em;
}
.aac-footer strong {
  color: var(--r2-ink-2);
  font-weight: 600;
}
.aac-footer-left,
.aac-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aac-footer-sep {
  color: var(--r2-line-strong);
  font-weight: 700;
}
.aac-footer-heb {
  background: var(--r2-accent);
  color: var(--r2-accent-ink);
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 11px;
}
.aac-footer-dot {
  color: var(--r2-accent);
  font-size: 18px;
  line-height: 0;
  margin-right: 2px;
}
@media (max-width: 720px) {
  .aac-footer { flex-direction: column; gap: 6px; font-size: 10px; }
}

/* ─────────────────────────────────────────────────────────────
   Print (nice P&L reports)
   ───────────────────────────────────────────────────────────── */
@media print {
  .nav-tabs, .auto-trade-indicator, .btn { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #000 !important; }
  body { background: #ffffff !important; }
}