/* Vortex Dark Theme — toggled with data-theme="dark" */
[data-theme="dark"] {
  --bg-body:       #0d0f14;
  --bg-card:       #13161f;
  --bg-surface:    #0f1119;
  --bg-hover:      #1a1d28;
  --bg-input:      #13161f;
  --bg-console:    #0a0c10;
  --bg-secondary:  #10121a;
  --bg-inset:      #0f1119;

  --border-default: #1e2338;
  --border-light:   #1a1d2e;
  --border-hover:   #2d3452;
  --border-strong:  #353d5a;

  --text-primary:   #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted:     #6b7a94;
  --text-dim:       #4a5568;

  --accent-blue:       #7b9ef7;
  --accent-blue-bg:    #2b4acb;
  --accent-blue-hover: #3b5ed4;
  --accent-blue-dim:   rgba(123,158,247,.08);
  --accent-blue-light: rgba(123,158,247,.12);
  --accent-blue-ring:  rgba(123,158,247,.2);

  --color-pass:        #48bb78;
  --color-pass-bg:     rgba(72,187,120,.12);
  --color-pass-border: rgba(72,187,120,.28);
  --color-pass-grad:   linear-gradient(90deg, #276749, #48bb78);

  --color-fail:        #fc8181;
  --color-fail-bg:     rgba(252,129,129,.10);
  --color-fail-border: rgba(252,129,129,.22);
  --color-fail-grad:   linear-gradient(90deg, #742a2a, #fc8181);
  --color-fail-deep:   rgba(116,42,42,.4);
  --color-fail-hover:  rgba(155,44,44,.3);
  --color-fail-block:  #1a1015;

  --color-flaky:        #f6ad55;
  --color-flaky-bg:     rgba(246,173,85,.10);
  --color-flaky-border: rgba(246,173,85,.22);
  --color-flaky-grad:   linear-gradient(90deg, #9c4221, #f6ad55);

  --color-skipped:        #ecc94b;
  --color-skipped-bg:     rgba(236,201,75,.10);
  --color-skipped-border: rgba(236,201,75,.22);

  --color-running:        #63b3ed;
  --color-running-bg:     rgba(99,179,237,.10);
  --color-running-border: rgba(99,179,237,.22);

  --shadow-xs:  0 1px 2px rgba(0,0,0,.2);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.5);
  --shadow-accent: 0 2px 8px rgba(123,158,247,.18);
}

/* Dark-mode specific overrides that can't use tokens alone */
[data-theme="dark"] .header {
  background: rgba(15,17,25,.90);
  border-bottom-color: #1e2338;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .vnc-wrap { background: #0a0c10; }
[data-theme="dark"] .btn-danger { color: #fc8181; }
[data-theme="dark"] .btn-danger:hover { background: rgba(252,129,129,.15); color: #fc8181; }
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .completion-card,
[data-theme="dark"] .dash-summary { box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); }
[data-theme="dark"] .kpi,
[data-theme="dark"] .stat-item,
[data-theme="dark"] .monitor-widget { box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04); }
[data-theme="dark"] .nav-logo-mark { background: #7b9ef7; }
[data-theme="dark"] .bar-label { text-shadow: 0 0 4px rgba(0,0,0,.6); }
[data-theme="dark"] .badge-source { background: var(--bg-hover); }

/* Dark-mode overrides for new components */
[data-theme="dark"] .db-banner { background: #742a2a; border-bottom-color: rgba(252,129,129,.22); }
[data-theme="dark"] .rec-notification { background: var(--bg-card); border-color: var(--border-default); box-shadow: 0 4px 16px rgba(0,0,0,.5); }
[data-theme="dark"] .error-page-center { color: var(--text-primary); }