/* AMA-TMS v2 — Blade Runner 2049 Theme
   ─────────────────────────────────────────────────────────
   Inspired by: Blade Runner 2049 (dir. Denis Villeneuve)
   Visual language: cyberpunk darkness, amber neon smog,
   holographic cyan, void-black depths, glowing halos.
   ───────────────────────────────────────────────────────── */

[data-theme="blade-runner"] {

  /* ══ Brand / Accent Colors ══════════════════════════════
     Amber (#FF7300) — the smoggy LA fire, neon-lit rain
     Cyan  (#00D4FF) — K's holographic displays, Joi's glow  */
  --clr-primary:       #FF7300;
  --clr-primary-dark:  #CC5A00;
  --clr-primary-light: #FFAB5E;
  --clr-accent:        #00D4FF;   /* Holographic cyan */
  --clr-success:       #39FF14;   /* Neon radiation green */
  --clr-warning:       #FFE600;   /* Amber warning */
  --clr-danger:        #FF073A;   /* Critical red */
  --clr-info:          #00D4FF;

  /* ══ Background Layers — near-void darkness ═════════════ */
  --bg-base:     #020305;   /* Absolute void */
  --bg-surface:  #060810;   /* Deep space black-blue */
  --bg-elevated: #0B0E1C;
  --bg-overlay:  #111527;
  --bg-input:    #08091A;

  /* Aliases for JS inline styles */
  --bg-card:     #060810;
  --border-color: rgba(255,115,0,0.20);

  /* ══ Text — high contrast, slightly blue-tinted white ═══ */
  --txt-primary:   #F2F4FF;
  --txt-secondary: #7B88AA;
  --txt-muted:     #3A4260;
  --txt-inverse:   #020305;

  /* ══ Borders — amber-tinted glow ════════════════════════ */
  --border-subtle:  rgba(255,115,0,0.09);
  --border-normal:  rgba(255,115,0,0.20);
  --border-strong:  rgba(255,115,0,0.45);
  --border-primary: rgba(255,115,0,0.70);

  /* ══ Semantic / Component Tokens ════════════════════════ */
  --nav-active-bg:  rgba(255,115,0,0.10);

  --badge-primary-bg: rgba(255,115,0,0.12);
  --badge-success-bg: rgba(57,255,20,0.10);
  --badge-warning-bg: rgba(255,230,0,0.10);
  --badge-danger-bg:  rgba(255,7,58,0.12);
  --badge-urgent-bg:  rgba(255,115,0,0.15);

  --form-focus-shadow: 0 0 0 2px rgba(255,115,0,0.25),
                       0 0 16px rgba(255,115,0,0.15);

  --modal-backdrop:   rgba(0,0,0,0.88);
  --loading-backdrop: rgba(2,3,5,0.92);

  /* ══ Shadows — deep black + amber ambient ═══════════════ */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.85);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.90);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.96);
  --shadow-glow: 0 0 30px rgba(255,115,0,0.30),
                 0 0 70px rgba(255,115,0,0.10);
}

/* ══ BLADE RUNNER EXTRA EFFECTS ════════════════════════════
   Beyond tokens — glows, scanlines, ambient halos.
   These cannot be expressed as variable overrides alone.
   ──────────────────────────────────────────────────────── */

/* Scanline overlay — the CRT grain of the future */
[data-theme="blade-runner"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.035) 2px,
    rgba(0, 0, 0, 0.035) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Sidebar brand icon — intense amber halo */
[data-theme="blade-runner"] .sidebar-brand-icon {
  background: linear-gradient(135deg, #FF7300, #CC5A00);
  box-shadow: 0 0 16px rgba(255,115,0,0.55),
              0 0 40px rgba(255,115,0,0.20);
}

/* ── App name glow */
[data-theme="blade-runner"] .sidebar-brand-text .app-name {
  color: var(--clr-primary);
  text-shadow: 0 0 8px rgba(255,115,0,0.50);
}

/* ── Nav active — amber glow text */
[data-theme="blade-runner"] .nav-item.active {
  color: var(--clr-primary);
  text-shadow: 0 0 10px rgba(255,115,0,0.55);
}

/* ── Cards — ambient amber border glow */
[data-theme="blade-runner"] .card {
  border-color: var(--border-normal);
  box-shadow: 0 0 18px rgba(255,115,0,0.06),
              inset 0 0 30px rgba(0,0,0,0.3);
}

[data-theme="blade-runner"] .card:hover {
  border-color: rgba(255,115,0,0.32);
  box-shadow: 0 0 28px rgba(255,115,0,0.14);
}

/* ── Stat cards — amber top border + hover glow */
[data-theme="blade-runner"] .stat-card {
  border-top-color: rgba(255,115,0,0.40);
  box-shadow: none;
}
[data-theme="blade-runner"] .stat-card.primary,
[data-theme="blade-runner"] .stat-card.success { border-top-color: var(--clr-success); }
[data-theme="blade-runner"] .stat-card.warning  { border-top-color: var(--clr-warning); }
[data-theme="blade-runner"] .stat-card.danger   { border-top-color: var(--clr-danger);  }
[data-theme="blade-runner"] .stat-card:hover {
  border-color: rgba(255,115,0,0.28);
  box-shadow: 0 0 22px rgba(255,115,0,0.10);
  transform: none;
}

/* ── Stat values — neon numerals */
[data-theme="blade-runner"] .stat-value {
  text-shadow: 0 0 6px rgba(255,115,0,0.25);
}

/* ── Primary button — amber fire */
[data-theme="blade-runner"] .btn-primary {
  box-shadow: 0 0 14px rgba(255,115,0,0.40);
  letter-spacing: 0.02em;
}
[data-theme="blade-runner"] .btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 24px rgba(255,115,0,0.65),
              0 0 50px rgba(255,115,0,0.20);
  transform: translateY(-1px);
}

/* ── Ghost button hover */
[data-theme="blade-runner"] .btn-ghost:hover:not(:disabled) {
  border-color: rgba(255,115,0,0.25);
  color: var(--clr-primary-light);
}

/* ── Form inputs — amber focus glow */
[data-theme="blade-runner"] .form-control:focus {
  border-color: var(--clr-primary);
  box-shadow: var(--form-focus-shadow);
}

/* ── Table header — amber-tinted labels */
[data-theme="blade-runner"] .table th {
  color: var(--clr-primary);
  border-bottom-color: rgba(255,115,0,0.18);
  text-shadow: 0 0 8px rgba(255,115,0,0.35);
  letter-spacing: 0.09em;
}

/* ── Table row hover — amber wash */
[data-theme="blade-runner"] .table tbody tr:hover td {
  background: rgba(255,115,0,0.04);
}

/* ── Table wrap border */
[data-theme="blade-runner"] .table-wrap {
  border-color: rgba(255,115,0,0.16);
}

/* ── Master tab active */
[data-theme="blade-runner"] .btn-ghost.master-tab.active,
[data-theme="blade-runner"] .master-tab.active {
  color: var(--clr-primary);
  text-shadow: 0 0 8px rgba(255,115,0,0.45);
  border-color: rgba(255,115,0,0.30) !important;
}

/* ── Modal — deep void with amber framing */
[data-theme="blade-runner"] .modal {
  border-color: rgba(255,115,0,0.22);
  box-shadow: 0 8px 60px rgba(0,0,0,0.97),
              0 0 60px rgba(255,115,0,0.07);
}

[data-theme="blade-runner"] .modal-title {
  text-shadow: 0 0 6px rgba(255,115,0,0.25);
}

/* ── Toast — amber left border already via var(--clr-primary) */
[data-theme="blade-runner"] .toast {
  box-shadow: 0 4px 24px rgba(0,0,0,0.80),
              0 0 16px rgba(255,115,0,0.08);
}

/* ── Sync badge hover */
[data-theme="blade-runner"] .sync-badge:hover {
  border-color: rgba(255,115,0,0.40);
  box-shadow: 0 0 10px rgba(255,115,0,0.20);
}

/* ── Spinner — amber loading ring */
[data-theme="blade-runner"] .spinner {
  border-top-color: var(--clr-primary);
  filter: drop-shadow(0 0 6px rgba(255,115,0,0.60));
}

/* ── Progress fill */
[data-theme="blade-runner"] .progress-fill {
  box-shadow: 0 0 8px rgba(255,115,0,0.50);
}

/* ── Badge primary uses cyan for extra contrast */
[data-theme="blade-runner"] .badge-primary {
  background: rgba(0,212,255,0.10);
  color: var(--clr-accent);
}

/* ── Scrollbar — thin amber tint */
[data-theme="blade-runner"] ::-webkit-scrollbar-thumb {
  background: rgba(255,115,0,0.20);
}
[data-theme="blade-runner"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,115,0,0.40);
}

/* ── Theme toggle button itself — subtle cyan glow in BR mode */
[data-theme="blade-runner"] #theme-toggle-btn {
  color: var(--clr-accent);
  text-shadow: 0 0 8px rgba(0,212,255,0.60);
}