/* ═══════════════════════════════════════════════════════════════════════ */
/*  TEMA-OVERRIDES — högre specificitet än :root i app.css               */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ── DARK (default) ──────────────────────────────────────────────────── */
html, html[data-theme="dark"] {
  --bg: #0d0d14;
  --surface: #16161f;
  --card: #1e1e2c;
  --card2: #252535;
  --accent: #f5a623;
  --accent-dim: rgba(245,166,35,0.15);
  --accent2: #4ade80;
  --text: #f0f0f8;
  --muted: #9e9ec4;
  --border: rgba(255,255,255,0.12);
  --danger: #f87171;
  --danger-dim: rgba(248,113,113,0.15);
  --success: #4ade80;
  --success-dim: rgba(74,222,128,0.12);
  --warn: #fb923c;
  --warn-dim: rgba(251,146,60,0.15);
}

/* ── LIGHT ───────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --card: #ffffff;
  --card2: #f0f0f5;
  --accent: #d97706;
  --accent-dim: rgba(217,119,6,0.12);
  --accent2: #16a34a;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(0,0,0,0.08);
  --danger: #dc2626;
  --danger-dim: rgba(220,38,38,0.08);
  --success: #16a34a;
  --success-dim: rgba(22,163,74,0.08);
  --warn: #d97706;
  --warn-dim: rgba(217,119,6,0.08);
}

/* ── MIDNIGHT (extra mörkt, stilrent) ───────────────────────────────── */
html[data-theme="midnight"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --card: #111111;
  --card2: #1a1a1a;
  --accent: #f5a623;
  --accent-dim: rgba(245,166,35,0.12);
  --accent2: #a3a3a3;
  --text: #ffffff;
  --muted: #a3a3a3;
  --border: rgba(255,255,255,0.10);
  --danger: #ef4444;
  --danger-dim: rgba(239,68,68,0.10);
  --success: #22c55e;
  --success-dim: rgba(34,197,94,0.10);
  --warn: #f59e0b;
  --warn-dim: rgba(245,158,11,0.10);
}

/* MIDNIGHT: Notis-badge röd */
html[data-theme="midnight"] .badge {
  background: #ef4444 !important;
  color: #fff !important;
}

/* MIDNIGHT: Aktiv flik — gul bakgrund + gul text */
html[data-theme="midnight"] .nav-item.active {
  color: #f5a623;
  background: rgba(245,166,35,0.12);
  border-radius: 8px;
}

/* MIDNIGHT: Loggans accent */
html[data-theme="midnight"] .logo .accent {
  color: #f5a623;
}

/* MIDNIGHT: Fältetiketter */
html[data-theme="midnight"] .settings-label,
html[data-theme="midnight"] .field label {
  color: #d4d4d4;
}

/* MIDNIGHT: Primärknapp */
html[data-theme="midnight"] .btn-primary {
  background: #f5a623;
  color: #000;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/*  FILTER-CHIPS — fix för alla teman så de syns tydligt                 */
/* ═══════════════════════════════════════════════════════════════════════ */

/* MIDNIGHT: Filter-chip — tydligare ram så text syns */
html[data-theme="midnight"] .filter-chip,
html[data-theme="midnight"] .filter-chip-val {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.18);
  color: #d4d4d4;
}

/* MIDNIGHT: Aktiv filter-chip — gul ram + gul text */
html[data-theme="midnight"] .filter-chip.active,
html[data-theme="midnight"] .filter-chip-val.active {
  background: rgba(245,166,35,0.15);
  border-color: #f5a623;
  color: #f5a623;
  font-weight: 600;
}

/* DARK: Aktiv filter-chip — lite tydligare */
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .filter-chip-val.active {
  background: rgba(245,166,35,0.18);
  border-color: #f5a623;
  color: #f5a623;
}

/* LIGHT: Aktiv filter-chip */
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .filter-chip-val.active {
  background: rgba(217,119,6,0.12);
  border-color: #d97706;
  color: #d97706;
}