/* ============================================================
   Aether — Shared theme system (light / dark)
   ERP-harmonized emerald + violet palette.
   Toggle via:  document.documentElement.dataset.theme = 'light' | 'dark'
   Persisted in localStorage as 'aether-theme'.
   ============================================================ */

/* ── DARK (default) ─────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  --bg: #0a0e13;
  --bg-2: #131922;
  --bg-3: #1c2433;
  --bg-4: #243044;
  --line: #2a3548;
  --line-2: #3a4761;

  --text: #e8eef5;
  --text-2: #aeb9c8;
  --text-3: #6b7689;

  --primary: #10b981;
  --primary-2: #34d399;
  --primary-3: #6ee7b7;
  --primary-soft: rgba(16, 185, 129, 0.10);
  --primary-glow: rgba(16, 185, 129, 0.28);

  --violet: #a78bfa;
  --violet-2: #8b5cf6;

  --amber: #fbbf24;
  --gold: #d4a747;
  --rose: #f472b6;
  --bad: #ef4444;
  --warn: #f59e0b;
  --info: #38bdf8;
  --good: #22c55e;

  --grad-1: linear-gradient(135deg, #10b981 0%, #06d6a0 100%);
  --grad-2: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --grad-3: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

  --card-bg: linear-gradient(180deg, rgba(28,36,51,.55) 0%, rgba(19,25,34,.55) 100%);
  --card-bg-solid: rgba(28,36,51,.6);
  --card-border: rgba(255,255,255,.06);
  --kpi-bg: linear-gradient(135deg, rgba(28,36,51,.7) 0%, rgba(19,25,34,.7) 100%);

  --input-bg: rgba(15,20,25,.6);
  --input-bg-focus: rgba(15,20,25,.85);
  --input-border: rgba(255,255,255,.08);

  --hover-bg: rgba(255,255,255,.04);
  --shadow-1: 0 6px 18px rgba(0,0,0,.28);
  --shadow-2: 0 10px 30px rgba(0,0,0,.45);

  --scrollbar-track: rgba(255,255,255,.02);
  --scrollbar-thumb: rgba(255,255,255,.10);

  --body-overlay: radial-gradient(circle 700px at 0% 0%, rgba(16,185,129,.08) 0%, transparent 50%),
                  radial-gradient(circle 600px at 100% 100%, rgba(139,92,246,.06) 0%, transparent 50%);
  --color-scheme: dark;
}

/* ── LIGHT ──────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #f7f9fc;
  --bg-2: #ffffff;
  --bg-3: #f1f4f8;
  --bg-4: #e6ecf2;
  --line: #e3e8ee;
  --line-2: #cfd6df;

  --text: #0f172a;
  --text-2: #45556b;
  --text-3: #7a8699;

  --primary: #059669;
  --primary-2: #10b981;
  --primary-3: #047857;
  --primary-soft: rgba(5,150,105,.08);
  --primary-glow: rgba(5,150,105,.22);

  --violet: #7c3aed;
  --violet-2: #6d28d9;

  --amber: #d97706;
  --gold: #b45309;
  --rose: #db2777;
  --bad: #dc2626;
  --warn: #ea580c;
  --info: #0284c7;
  --good: #16a34a;

  --grad-1: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-2: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
  --grad-3: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  --card-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --card-bg-solid: #ffffff;
  --card-border: #e3e8ee;
  --kpi-bg: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);

  --input-bg: #ffffff;
  --input-bg-focus: #ffffff;
  --input-border: #d1d8e2;

  --hover-bg: #f1f4f8;
  --shadow-1: 0 4px 12px rgba(15,23,42,.06);
  --shadow-2: 0 12px 32px rgba(15,23,42,.10);

  --scrollbar-track: #f1f4f8;
  --scrollbar-thumb: #cfd6df;

  --body-overlay: radial-gradient(circle 700px at 0% 0%, rgba(16,185,129,.06) 0%, transparent 60%),
                  radial-gradient(circle 600px at 100% 100%, rgba(124,58,237,.04) 0%, transparent 60%);
  --color-scheme: light;
}

/* ── Smooth theme transitions on body/cards/inputs ─────── */
html { color-scheme: var(--color-scheme); }
body, .card, .kpi, .tbl th, .tbl td, .field input, .field select, .field textarea,
.sidebar, .topbar, .pill-btn, .btn, .drawer, .toolbar, .attachment, .toast {
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}

/* ── Light-mode tweaks for pill states ──────────────────── */
:root[data-theme="light"] .pill.draft     { background: #eef0f3; color: #4b5563; }
:root[data-theme="light"] .pill.issued    { background: #d1fae5; color: #065f46; }
:root[data-theme="light"] .pill.posted    { background: #d1fae5; color: #065f46; }
:root[data-theme="light"] .pill.paid      { background: #bbf7d0; color: #14532d; }
:root[data-theme="light"] .pill.partial   { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .pill.overdue   { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .pill.cancelled { background: #f1f4f8; color: #6b7280; }
:root[data-theme="light"] .pill.unpaid    { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .pill.pending   { background: #fef3c7; color: #92400e; }
:root[data-theme="light"] .pill.approved  { background: #bbf7d0; color: #14532d; }
:root[data-theme="light"] .pill.rejected  { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .pill.damage,
:root[data-theme="light"] .pill.shortage,
:root[data-theme="light"] .pill.loss,
:root[data-theme="light"] .pill.wastage,
:root[data-theme="light"] .pill.theft,
:root[data-theme="light"] .pill.return_out { background: #fee2e2; color: #991b1b; }
:root[data-theme="light"] .pill.excess,
:root[data-theme="light"] .pill.found,
:root[data-theme="light"] .pill.return_in { background: #bbf7d0; color: #14532d; }

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

/* ── Theme toggle button (shared widget) ────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  color: var(--text-2); cursor: pointer; font-size: 14px;
  transition: all .18s;
}
.theme-toggle:hover { color: var(--primary-2); border-color: var(--primary); transform: translateY(-1px); }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline-block; }
:root[data-theme="light"] .theme-toggle .sun { display: inline-block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }

/* ── Drag-and-drop hover state (shared) ─────────────────── */
.dnd-active * { pointer-events: none; }
.dnd-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(16,185,129,.08); backdrop-filter: blur(2px);
  border: 4px dashed var(--primary); border-radius: 0;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.dnd-active .dnd-overlay { display: flex; animation: dnd-pulse 1.2s infinite; }
.dnd-overlay .dnd-card {
  background: var(--card-bg-solid); border: 1px solid var(--primary);
  border-radius: 16px; padding: 28px 36px; box-shadow: var(--shadow-2);
  text-align: center; color: var(--text);
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 16px;
}
.dnd-overlay .dnd-card i {
  font-size: 36px; color: var(--primary); display: block; margin-bottom: 10px;
  animation: dnd-bounce 1s infinite ease-in-out;
}
.dnd-overlay .dnd-card small {
  display: block; font-family: 'Crimson Pro', serif; font-style: italic;
  font-size: 13px; color: var(--text-2); font-weight: 400; margin-top: 6px;
}
@keyframes dnd-pulse {
  0%, 100% { background: rgba(16,185,129,.06); }
  50%      { background: rgba(16,185,129,.14); }
}
@keyframes dnd-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}