/**
 * MIDNIGHT COMMAND — Design System v2
 * NATO Tactical · Bloomberg Terminal · Palantir Foundry
 * NO neon, NO Tron glow, NO rounded corners, NO playful elements
 */

/* ═══════════════════════════════════════
   1. PALETTE — Military Field Operations
   ═══════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* Abyss blacks */
  --mc-bg-deep: #050607;
  --mc-bg-base: #0A0D10;
  --mc-bg-raised: #111418;
  --mc-bg-surface: #161A1F;
  --mc-card-border: #1E2328;
  --mc-border-subtle: #282D33;
  --mc-border-active: #3A4149;

  /* NATO palette — muted, functional, zero neon */
  --mc-amber: #C8973E;
  --mc-amber-dim: rgba(200, 151, 62, 0.15);
  --mc-green: #5A8F5C;
  --mc-green-dim: rgba(90, 143, 92, 0.12);
  --mc-red: #9E4444;
  --mc-red-dim: rgba(158, 68, 68, 0.12);
  --mc-blue: #4E7A94;
  --mc-blue-dim: rgba(78, 122, 148, 0.10);
  --mc-steel: #6B7786;

  /* No glow anywhere */
  --mc-glow-safe: none;
  --mc-glow-active: none;
  --mc-glow-warning: none;
  --mc-glow-critical: none;

  /* Text hierarchy */
  --mc-text-primary: #D1D5DB;
  --mc-text-secondary: #8A909A;
  --mc-text-tertiary: #555B63;
  --mc-text-inverse: #0A0D10;

  /* Typography */
  --mc-font-sans: 'Inter', 'Barlow', -apple-system, system-ui, sans-serif;
  --mc-font-mono: 'JetBrains Mono', 'Consolas', 'SF Mono', monospace;
  --mc-letter-tight: -0.01em;
  --mc-letter-wide: 0.08em;

  /* Density — compressed spacing */
  --mc-space-2: 2px;
  --mc-space-4: 4px;
  --mc-space-6: 6px;
  --mc-space-8: 8px;
  --mc-space-10: 10px;
  --mc-space-12: 12px;
  --mc-space-16: 16px;
  --mc-space-20: 20px;

  /* Override legacy tokens */
  --primary-bg: var(--mc-bg-base);
  --secondary-bg: var(--mc-bg-raised);
  --card-bg: var(--mc-bg-raised);
  --input-bg: var(--mc-bg-deep);
  --border-color: var(--mc-card-border);
  --border-light: var(--mc-border-subtle);
  --text-white: var(--mc-text-primary);
  --text-gray: var(--mc-text-secondary);
  --text-muted: var(--mc-text-tertiary);
  --accent-amber: var(--mc-amber);
  --accent-blue: var(--mc-blue);
  --accent-emerald: var(--mc-green);
  --accent-red: var(--mc-red);
  --accent-green: var(--mc-green);
  --font: var(--mc-font-sans);
  --font-mono: var(--mc-font-mono);
  --hover-bg: var(--mc-bg-surface);
}

/* ═══════════════════════════════════════
   2. BASE RESET
   ═══════════════════════════════════════ */
body {
  background: var(--mc-bg-base) !important;
  color: var(--mc-text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill ALL border-radius everywhere */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Kill ALL box-shadows */
.mc-panel, .mc-card, .cc-panel, .controls-panel, .results-section,
.market-overview, .ticker-card, .top-pick, .saa-toast,
.report-modal .box, .header-watchlist-dropdown, .header-analytics-dropdown,
.ticker-sector-panel, .cc-rec-item, .cc-kpi-item, .cc-health-item,
.cc-agent-card, .assistant-modal-card {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════
   3. PANELS & CARDS
   ═══════════════════════════════════════ */
.mc-panel,
.cc-panel,
.controls-panel,
.market-overview,
.results-section,
.dashboard-alerts-panel {
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
  padding: var(--mc-space-12) var(--mc-space-16) !important;
}

.ticker-card,
.top-pick,
.cc-kpi-item,
.cc-health-item,
.cc-agent-card,
.cc-rec-item,
.agent-block {
  background: var(--mc-bg-surface) !important;
  border: 1px solid var(--mc-card-border) !important;
  padding: var(--mc-space-10) var(--mc-space-12) !important;
}

.ticker-card:hover,
.top-pick:hover {
  border-color: var(--mc-border-active) !important;
  background: var(--mc-bg-surface) !important;
}

/* ═══════════════════════════════════════
   4. TYPOGRAPHY — Bloomberg density
   ═══════════════════════════════════════ */

/* Headers: geometric sans, tight, uppercase micro-labels */
.header h1 {
  color: var(--mc-text-primary) !important;
  font-family: var(--mc-font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: var(--mc-letter-wide) !important;
  text-transform: uppercase;
}

.cc-panel-title,
.results-title,
.overview-title,
.scores-title,
.dashboard-alerts-title {
  font-family: var(--mc-font-sans) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mc-letter-wide) !important;
  color: var(--mc-text-tertiary) !important;
  border-bottom: 1px solid var(--mc-card-border);
  padding-bottom: var(--mc-space-6);
  margin-bottom: var(--mc-space-10) !important;
}

/* ALL numbers, values, prices, scores — monospace */
.index-cell .value,
.ticker-score,
.ticker-price,
.metric-value,
.score-value,
.cc-kpi-value,
.top-pick-score,
.top-pick-ticker,
.header-watchlist-badge,
.mc-kpi-value,
[data-metric] {
  font-family: var(--mc-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: var(--mc-letter-tight) !important;
}

/* Labels — micro, uppercase, muted */
.metric-label,
.score-label,
.mc-kpi-label,
.cc-kpi-label,
.cc-health-name,
.control-group label,
.lang-label,
.index-cell .label {
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mc-letter-wide) !important;
  color: var(--mc-text-tertiary) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════
   5. HUD KPI CARDS
   ═══════════════════════════════════════ */
.mc-kpi {
  background: var(--mc-bg-deep);
  border: 1px solid var(--mc-card-border);
  padding: var(--mc-space-8) var(--mc-space-12);
  position: relative;
}
.mc-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--mc-amber);
}
.mc-kpi-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: var(--mc-letter-wide);
  color: var(--mc-text-tertiary);
  margin-bottom: var(--mc-space-2);
  font-family: var(--mc-font-sans);
  font-weight: 600;
}
.mc-kpi-value {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--mc-font-mono);
  color: var(--mc-text-primary);
  line-height: 1.15;
}
.mc-kpi-value.positive { color: var(--mc-green); }
.mc-kpi-value.negative { color: var(--mc-red); }
.mc-kpi-value.warning { color: var(--mc-amber); }

.mc-delta {
  font-size: 10px;
  font-family: var(--mc-font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
  color: var(--mc-text-secondary);
}
.mc-delta.up { color: var(--mc-green); }
.mc-delta.up::before { content: '▲ '; font-size: 7px; }
.mc-delta.down { color: var(--mc-red); }
.mc-delta.down::before { content: '▼ '; font-size: 7px; }

/* ═══════════════════════════════════════
   6. STATUS INDICATORS — square dots, no glow
   ═══════════════════════════════════════ */
.mc-status-dot,
.agent-status-dot,
.cc-agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 0 !important;
  flex-shrink: 0;
  background: var(--mc-text-tertiary);
  box-shadow: none !important;
}
.mc-status-dot.safe, .mc-status-dot.healthy, .mc-status-dot.online,
.agent-status-dot.available,
.cc-agent-card.online .cc-agent-dot {
  background: var(--mc-green) !important;
  box-shadow: none !important;
}
.mc-status-dot.warning { background: var(--mc-amber) !important; }
.mc-status-dot.critical, .mc-status-dot.error { background: var(--mc-red) !important; }

/* Health status text */
.cc-health-status.healthy { color: var(--mc-green) !important; }
.cc-health-status.warning { color: var(--mc-amber) !important; }
.cc-health-status.critical { color: var(--mc-red) !important; }

/* ═══════════════════════════════════════
   7. SEVERITY TAGS — Bloomberg style
   ═══════════════════════════════════════ */
.mc-severity-tag {
  display: inline-block;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: var(--mc-letter-wide);
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid currentColor;
  font-family: var(--mc-font-mono);
  line-height: 1.6;
}
.mc-severity-tag.safe { color: var(--mc-green); }
.mc-severity-tag.warning { color: var(--mc-amber); }
.mc-severity-tag.critical { color: var(--mc-red); }

/* ═══════════════════════════════════════
   8. BUTTONS — flat, tactical
   ═══════════════════════════════════════ */
.mc-btn,
.analyze-btn,
.cc-action-btn,
.export-btn,
.lang-btn,
.ticker-sector-btn,
.header-watchlist-btn,
.header-analytics-btn {
  border-radius: 0 !important;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-family: var(--mc-font-sans);
  transition: border-color 0.15s, background 0.15s;
}

.analyze-btn,
.cc-action-btn.primary {
  background: var(--mc-amber) !important;
  color: var(--mc-bg-deep) !important;
  border: 1px solid var(--mc-amber) !important;
  font-weight: 700 !important;
}
.analyze-btn:hover,
.cc-action-btn.primary:hover {
  filter: brightness(1.1);
  box-shadow: none !important;
}

.cc-action-btn {
  background: transparent !important;
  border: 1px solid var(--mc-border-subtle) !important;
  color: var(--mc-text-secondary) !important;
}
.cc-action-btn:hover {
  border-color: var(--mc-border-active) !important;
  color: var(--mc-text-primary) !important;
  background: var(--mc-bg-surface) !important;
}

.lang-btn.active {
  background: var(--mc-amber) !important;
  color: var(--mc-bg-deep) !important;
  border-color: var(--mc-amber) !important;
  box-shadow: none !important;
}

.ticker-option.selected {
  background: var(--mc-amber) !important;
  color: var(--mc-bg-deep) !important;
  border-color: var(--mc-amber) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════
   9. INPUTS — terminal style
   ═══════════════════════════════════════ */
input, select, textarea,
.cc-input, .date-input,
.search-wrap input,
.ticker-select,
.ticker-sector-trigger {
  border-radius: 0 !important;
  border: 1px solid var(--mc-card-border) !important;
  background: var(--mc-bg-deep) !important;
  color: var(--mc-text-primary) !important;
  font-family: var(--mc-font-mono);
}
input:focus, select:focus, textarea:focus,
.cc-input:focus, .search-wrap input:focus {
  outline: none !important;
  border-color: var(--mc-amber) !important;
  box-shadow: none !important;
}
input::placeholder, .cc-input::placeholder,
.search-wrap input::placeholder {
  color: var(--mc-text-tertiary) !important;
}

/* ═══════════════════════════════════════
   10. TABLES — Palantir data grid
   ═══════════════════════════════════════ */
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--mc-font-mono);
}
.cc-table th {
  background: var(--mc-bg-deep) !important;
  font-size: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: var(--mc-letter-wide) !important;
  font-family: var(--mc-font-mono) !important;
  color: var(--mc-text-tertiary) !important;
  font-weight: 600 !important;
  padding: var(--mc-space-4) var(--mc-space-8) !important;
  border-bottom: 1px solid var(--mc-border-subtle) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.cc-table td {
  padding: var(--mc-space-4) var(--mc-space-8) !important;
  border-bottom: 1px solid var(--mc-card-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: var(--mc-text-primary);
}
.cc-table tr:hover td {
  background: var(--mc-bg-surface);
}

/* ═══════════════════════════════════════
   11. TOP BAR — command strip
   ═══════════════════════════════════════ */
.top-bar {
  background: var(--mc-bg-deep) !important;
  border-bottom: 1px solid var(--mc-card-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.top-bar .header-item,
.index-cell {
  border: 1px solid var(--mc-card-border) !important;
  border-radius: 0 !important;
}
.index-cell .label {
  font-size: 8px !important;
  color: var(--mc-text-tertiary) !important;
}
.market-open::before,
.market-closed::before {
  border-radius: 0 !important;
  width: 6px !important;
  height: 6px !important;
}
.market-open { color: var(--mc-green) !important; }
.market-open::before { background: var(--mc-green) !important; }
.market-closed { color: var(--mc-red) !important; }
.market-closed::before { background: var(--mc-red) !important; }

/* Market pulse ticker tape */
.market-pulse {
  background: var(--mc-bg-deep) !important;
  border-bottom: 1px solid var(--mc-card-border) !important;
  font-size: 11px !important;
  backdrop-filter: none !important;
}
.market-pulse .pulse-item { color: var(--mc-text-secondary) !important; }
.market-pulse .pulse-item.up { color: var(--mc-green) !important; }
.market-pulse .pulse-item.down { color: var(--mc-red) !important; }

/* ═══════════════════════════════════════
   12. TICKER CARDS — dense grid
   ═══════════════════════════════════════ */
.ticker-name {
  font-family: var(--mc-font-mono) !important;
  font-weight: 700 !important;
  color: var(--mc-text-primary) !important;
}
.ticker-score {
  background: transparent !important;
  border: 1px solid var(--mc-amber) !important;
  color: var(--mc-amber) !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  font-weight: 700 !important;
}
.ticker-price {
  color: var(--mc-text-primary) !important;
  font-size: 1.3em !important;
}
.metric {
  border-bottom: 1px solid var(--mc-card-border) !important;
  padding: 3px 0 !important;
}

/* ═══════════════════════════════════════
   13. HERO / SEARCH — streamlined
   ═══════════════════════════════════════ */
.main-hero {
  padding: 32px 24px 28px !important;
}
.main-hero .subtitle {
  font-size: 1.1rem !important;
  color: var(--mc-text-secondary) !important;
}
.chip {
  background: var(--mc-bg-surface) !important;
  border: 1px solid var(--mc-card-border) !important;
  color: var(--mc-text-secondary) !important;
}
.chip:hover {
  border-color: var(--mc-amber) !important;
  color: var(--mc-amber) !important;
  background: var(--mc-amber-dim) !important;
}

/* Sector dropdown */
.ticker-sector-trigger {
  background: var(--mc-bg-surface) !important;
}
.ticker-sector-name {
  border-left: 2px solid var(--mc-amber) !important;
  background: var(--mc-bg-deep) !important;
  color: var(--mc-text-tertiary) !important;
}
.ticker-sector-btn {
  font-family: var(--mc-font-mono) !important;
  background: var(--mc-bg-surface) !important;
  border: 1px solid var(--mc-card-border) !important;
  color: var(--mc-text-secondary) !important;
}
.ticker-sector-btn:hover {
  border-color: var(--mc-amber) !important;
  color: var(--mc-amber) !important;
}

/* ═══════════════════════════════════════
   14. TOAST — minimal
   ═══════════════════════════════════════ */
.saa-toast {
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
  color: var(--mc-text-primary) !important;
  backdrop-filter: none !important;
}
.saa-toast.error { border-left: 3px solid var(--mc-red) !important; }
.saa-toast.success { border-left: 3px solid var(--mc-green) !important; }
.saa-toast.warning { border-left: 3px solid var(--mc-amber) !important; }

/* ═══════════════════════════════════════
   15. REPORT MODAL
   ═══════════════════════════════════════ */
.report-modal {
  background: rgba(5, 6, 7, 0.92) !important;
  backdrop-filter: none !important;
}
.report-modal .box {
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
}
.report-modal .progress {
  background: var(--mc-bg-deep) !important;
}
.report-modal .progress-bar {
  background: var(--mc-amber) !important;
}
.report-modal .progress-pct {
  color: var(--mc-amber) !important;
}

/* ═══════════════════════════════════════
   16. COMMAND CENTER PANELS
   ═══════════════════════════════════════ */
.cc-kpi-item {
  position: relative;
}
.cc-kpi-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--mc-amber);
}
.cc-kpi-value {
  font-size: 1.15em !important;
  color: var(--mc-text-primary) !important;
}
.cc-kpi-value.positive { color: var(--mc-green) !important; }
.cc-kpi-value.negative { color: var(--mc-red) !important; }

/* Agent cards */
.cc-agent-card.online {
  border-color: rgba(90, 143, 92, 0.3) !important;
}
.cc-agent-card.online .cc-agent-badge {
  color: var(--mc-green) !important;
}
.cc-agent-name {
  font-family: var(--mc-font-mono) !important;
}
.cc-agent-meta {
  color: var(--mc-blue) !important;
  font-family: var(--mc-font-mono) !important;
}

/* Reason chips — muted */
.cc-reason-chip {
  background: var(--mc-bg-deep) !important;
  border: 1px solid var(--mc-card-border) !important;
  color: var(--mc-text-tertiary) !important;
}
.cc-reason-chip:hover {
  border-color: var(--mc-border-active) !important;
  color: var(--mc-text-secondary) !important;
}

/* ═══════════════════════════════════════
   17. EXPLAINABLE AI — [TRACE LOGIC]
   ═══════════════════════════════════════ */
.mc-trace-btn {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--mc-letter-wide);
  font-weight: 600;
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--mc-border-subtle);
  color: var(--mc-text-tertiary);
  cursor: pointer;
  font-family: var(--mc-font-mono);
  transition: border-color 0.15s, color 0.15s;
}
.mc-trace-btn:hover {
  border-color: var(--mc-amber);
  color: var(--mc-amber);
}

/* ═══════════════════════════════════════
   18. KILL SWITCH — 2-step confirm
   ═══════════════════════════════════════ */
.mc-confirm-wrap {
  border: 1px solid var(--mc-red);
  padding: var(--mc-space-10);
  background: var(--mc-red-dim);
}
.mc-confirm-wrap .mc-confirm-actions {
  margin-top: var(--mc-space-8);
  display: flex;
  gap: var(--mc-space-6);
}
.mc-btn-destructive {
  background: var(--mc-red) !important;
  color: var(--mc-text-primary) !important;
  border: 1px solid var(--mc-red) !important;
  padding: var(--mc-space-4) var(--mc-space-12);
  font-family: var(--mc-font-mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--mc-letter-wide);
  cursor: pointer;
}
.mc-btn-destructive:hover {
  filter: brightness(1.15);
}

/* ═══════════════════════════════════════
   19. SCROLLBARS — minimal
   ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mc-border-subtle); }
::-webkit-scrollbar-thumb:hover { background: var(--mc-border-active); }

/* ═══════════════════════════════════════
   20. WATCHLIST / ALERTS dropdowns
   ═══════════════════════════════════════ */
.header-watchlist-dropdown,
.header-analytics-dropdown {
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════
   21. ASSISTANT FAB
   ═══════════════════════════════════════ */
.assistant-fab {
  border-radius: 0 !important;
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
  color: var(--mc-blue) !important;
  box-shadow: none !important;
}
.assistant-fab:hover {
  border-color: var(--mc-border-active) !important;
  box-shadow: none !important;
}
.assistant-modal-card {
  background: var(--mc-bg-raised) !important;
  border: 1px solid var(--mc-card-border) !important;
  box-shadow: none !important;
}
.assistant-chip {
  border: 1px solid var(--mc-card-border) !important;
  background: var(--mc-bg-surface) !important;
}
.assistant-chip:hover {
  border-color: var(--mc-border-active) !important;
  color: var(--mc-text-primary) !important;
}

/* ═══════════════════════════════════════
   22. FOOTER
   ═══════════════════════════════════════ */
.footer-tagline {
  border-top: 1px solid var(--mc-card-border) !important;
  color: var(--mc-text-tertiary) !important;
}

/* ═══════════════════════════════════════
   23. DEMO BADGES
   ═══════════════════════════════════════ */
.cc-demo-badge {
  font-size: 7px !important;
  letter-spacing: var(--mc-letter-wide) !important;
  background: var(--mc-bg-surface) !important;
  color: var(--mc-text-tertiary) !important;
  border: 1px solid var(--mc-card-border) !important;
  padding: 1px 5px !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════
   24. SCANLINE OVERLAY (optional — class on body)
   ═══════════════════════════════════════ */
body.mc-scanlines::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
}