body { font-family: 'Lexend', sans-serif; }

/* ─── Theme Variables ─── */
:root {
  /* Light theme (default) — matches AppColors.light */
  --bg-background: #F6F8F7;
  --bg-surface: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-elevated: #F1F5F9;
  --border-subtle: #F1F5F9;
  --border-medium: #E2E8F0;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --text-on-primary: #0F172A;
  --scrollbar-thumb: #CBD5E1;
  --scrollbar-hover: #94A3B8;
  --tooltip-bg: #1E293B;
  --tooltip-text: #F8FAFC;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.12);
  --input-bg: #F8FAFC;
  --input-border: #E2E8F0;
  --input-placeholder: #94A3B8;
  --bulk-bar-bg: #FFFFFF;
  --bulk-bar-border: rgba(19,236,109,0.3);
  /* Badge colors — standard for light */
  --emerald-100-bg: rgba(16,185,129,0.12);
  --emerald-50-bg: rgba(16,185,129,0.06);
  --emerald-700-text: #047857;
  --emerald-600-text: #059669;
  --blue-100-bg: rgba(59,130,246,0.12);
  --blue-50-bg: rgba(59,130,246,0.06);
  --blue-700-text: #1D4ED8;
  --blue-600-text: #2563EB;
  --rose-100-bg: rgba(239,68,68,0.12);
  --rose-50-bg: rgba(239,68,68,0.06);
  --rose-700-text: #BE123C;
  --rose-50-hover: rgba(239,68,68,0.08);
  --amber-100-bg: rgba(245,158,11,0.12);
  --amber-50-bg: rgba(245,158,11,0.06);
  --amber-700-text: #B45309;
  --purple-100-bg: rgba(168,85,247,0.12);
  --purple-700-text: #7C3AED;
  --orange-100-bg: rgba(249,115,22,0.12);
  --orange-700-text: #C2410C;
  --edit-row-tint: rgba(19,236,109,0.05);
}

[data-theme="dark"] {
  /* Dark theme — matches AppColors.dark */
  --bg-background: #0A1A12;
  --bg-surface: #102218;
  --bg-card: #162C21;
  --bg-card-elevated: #1A3A2A;
  --border-subtle: rgba(255,255,255,0.05);
  --border-medium: rgba(255,255,255,0.10);
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-on-primary: #0A1A12;
  --scrollbar-thumb: #1A3A2A;
  --scrollbar-hover: #2A5040;
  --tooltip-bg: #1A3A2A;
  --tooltip-text: #F8FAFC;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.7);
  --input-bg: #162C21;
  --input-border: rgba(255,255,255,0.10);
  --input-placeholder: #64748B;
  --bulk-bar-bg: #162C21;
  --bulk-bar-border: rgba(19,236,109,0.25);
  /* Badge colors — brightened for dark backgrounds */
  --emerald-100-bg: rgba(52,211,153,0.15);
  --emerald-50-bg: rgba(52,211,153,0.08);
  --emerald-700-text: #34D399;
  --emerald-600-text: #34D399;
  --blue-100-bg: rgba(96,165,250,0.15);
  --blue-50-bg: rgba(96,165,250,0.08);
  --blue-700-text: #93C5FD;
  --blue-600-text: #60A5FA;
  --rose-100-bg: rgba(239,68,68,0.15);
  --rose-50-bg: rgba(239,68,68,0.08);
  --rose-700-text: #FCA5A5;
  --rose-50-hover: rgba(239,68,68,0.12);
  --amber-100-bg: rgba(245,158,11,0.15);
  --amber-50-bg: rgba(245,158,11,0.08);
  --amber-700-text: #FCD34D;
  --purple-100-bg: rgba(168,85,247,0.15);
  --purple-700-text: #C084FC;
  --orange-100-bg: rgba(249,115,22,0.15);
  --orange-700-text: #FB923C;
  --edit-row-tint: rgba(19,236,109,0.07);
}

/* Auto-detect system preference when no explicit choice */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-background: #0A1A12;
    --bg-surface: #102218;
    --bg-card: #162C21;
    --bg-card-elevated: #1A3A2A;
    --border-subtle: rgba(255,255,255,0.05);
    --border-medium: rgba(255,255,255,0.10);
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-on-primary: #0A1A12;
    --scrollbar-thumb: #1A3A2A;
    --scrollbar-hover: #2A5040;
    --tooltip-bg: #1A3A2A;
    --tooltip-text: #F8FAFC;
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
    --shadow-2xl: 0 25px 50px rgba(0,0,0,0.7);
    --input-bg: #162C21;
    --input-border: rgba(255,255,255,0.10);
    --input-placeholder: #64748B;
    --bulk-bar-bg: #162C21;
    --bulk-bar-border: rgba(19,236,109,0.25);
    --emerald-100-bg: rgba(52,211,153,0.15);
    --emerald-50-bg: rgba(52,211,153,0.08);
    --emerald-700-text: #34D399;
    --emerald-600-text: #34D399;
    --blue-100-bg: rgba(96,165,250,0.15);
    --blue-50-bg: rgba(96,165,250,0.08);
    --blue-700-text: #93C5FD;
    --blue-600-text: #60A5FA;
    --rose-100-bg: rgba(239,68,68,0.15);
    --rose-50-bg: rgba(239,68,68,0.08);
    --rose-700-text: #FCA5A5;
    --rose-50-hover: rgba(239,68,68,0.12);
    --amber-100-bg: rgba(245,158,11,0.15);
    --amber-50-bg: rgba(245,158,11,0.08);
    --amber-700-text: #FCD34D;
    --purple-100-bg: rgba(168,85,247,0.15);
    --purple-700-text: #C084FC;
    --orange-100-bg: rgba(249,115,22,0.15);
    --orange-700-text: #FB923C;
    --edit-row-tint: rgba(19,236,109,0.07);
  }
}

/* ─── Scrollbar ─── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ─── Grid interactions ─── */
.cell-focus:focus-within { outline: 2px solid #13EC6D; outline-offset: -2px; z-index: 10; }
.sticky-col { position: sticky; left: 0; z-index: 20; }
@keyframes fadeIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-anim { animation: fadeIn 0.25s ease; }
.col-resize-handle {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 40; user-select: none;
}
.col-resize-handle:hover, .col-resize-handle.dragging { background: #13EC6D; opacity: 0.4; }
th.resizable { position: relative; }
table.grid-table { table-layout: fixed; border-collapse: collapse; }
.help-tooltip {
  position: fixed; max-width: 280px; padding: 8px 12px;
  background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: 8px;
  font-size: 12px; line-height: 1.4; z-index: 300;
  pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ─── Theme-aware overrides ─── */

/* Backgrounds */
.bg-white            { background-color: var(--bg-surface) !important; }
.bg-slate-50         { background-color: var(--bg-card) !important; }
.bg-slate-100        { background-color: var(--bg-card-elevated) !important; }
.bg-slate-200        { background-color: var(--bg-card-elevated) !important; }

/* Borders */
.border-slate-200    { border-color: var(--border-medium) !important; }
.border-slate-100    { border-color: var(--border-subtle) !important; }
.divide-slate-100 > * + * { border-color: var(--border-subtle) !important; }
.divide-slate-200 > * + * { border-color: var(--border-medium) !important; }

/* Text */
.text-slate-900, .text-slate-800 { color: var(--text-primary) !important; }
.text-slate-700, .text-slate-600 { color: var(--text-secondary) !important; }
.text-slate-500, .text-slate-400 { color: var(--text-tertiary) !important; }
.text-slate-300                  { color: var(--text-tertiary) !important; }

/* Hover backgrounds */
.hover\:bg-slate-50:hover,
.group:hover .group-hover\:bg-slate-50 { background-color: var(--bg-card) !important; }
.hover\:bg-slate-100:hover    { background-color: var(--bg-card-elevated) !important; }
.hover\:bg-slate-200:hover    { background-color: var(--bg-card-elevated) !important; }
.hover\:bg-slate-50\/50:hover { background-color: var(--bg-card) !important; }
.hover\:text-slate-600:hover  { color: var(--text-secondary) !important; }

/* Primary — text on primary bg */
.bg-primary { color: var(--text-on-primary) !important; }

/* Editing row tint */
.bg-blue-50\/40 { background-color: var(--edit-row-tint) !important; }

/* Status / category badge backgrounds */
.bg-emerald-100   { background-color: var(--emerald-100-bg) !important; }
.bg-emerald-50    { background-color: var(--emerald-50-bg)  !important; }
.text-emerald-700 { color: var(--emerald-700-text) !important; }
.text-emerald-600 { color: var(--emerald-600-text) !important; }
.bg-blue-100      { background-color: var(--blue-100-bg)    !important; }
.bg-blue-50       { background-color: var(--blue-50-bg)     !important; }
.text-blue-700    { color: var(--blue-700-text) !important; }
.text-blue-600    { color: var(--blue-600-text) !important; }
.bg-rose-100      { background-color: var(--rose-100-bg)    !important; }
.bg-rose-50       { background-color: var(--rose-50-bg)     !important; }
.text-rose-700    { color: var(--rose-700-text) !important; }
.hover\:bg-rose-50:hover { background-color: var(--rose-50-hover) !important; }
.bg-amber-100     { background-color: var(--amber-100-bg)   !important; }
.bg-amber-50      { background-color: var(--amber-50-bg)    !important; }
.text-amber-700   { color: var(--amber-700-text) !important; }
.bg-purple-100    { background-color: var(--purple-100-bg)  !important; }
.text-purple-700  { color: var(--purple-700-text) !important; }
.bg-orange-100    { background-color: var(--orange-100-bg)  !important; }
.text-orange-700  { color: var(--orange-700-text) !important; }

/* Form inputs */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--input-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder) !important; }

/* Shadows */
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* ─── Theme toggle ─── */
.theme-toggle {
  position: relative; width: 36px; height: 20px;
  border-radius: 9999px; cursor: pointer;
  background: var(--bg-card-elevated); border: 1px solid var(--border-medium);
  transition: background 0.2s;
}
.theme-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-secondary); transition: transform 0.2s, background 0.2s;
}
[data-theme="dark"] .theme-toggle::after,
.theme-toggle.is-dark::after {
  transform: translateX(16px); background: #13EC6D;
}