/* =========================================================
   THEME ENGINE — 8 themes (4 light, 4 dark)
   Applied via [data-theme] on <html>
========================================================= */

/* Default fallbacks before a theme is set */
:root {
  --bg-body: #111827;
  --bg-card: #1f2937;
  --bg-sidebar: #131c2e;
  --bg-navbar: rgba(17, 24, 39, 0.72);
  --bg-input: #1f2937;
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --border-color: rgba(255, 255, 255, 0.08);
  --sidebar-hover: rgba(255, 255, 255, 0.05);
  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-tick: #9ca3af;
}

/* ── LIGHT: Cloud — clean blue-gray ─────────────────────── */
/* ── LIGHT: Cloud — stronger blue contrast ─────────────── */
[data-theme="cloud"] {
  --bg-body: #dfeaf7;
  --bg-card: #ffffff;
  --bg-sidebar: #edf5ff;
  --bg-navbar: rgba(255, 255, 255, 0.96);
  --bg-input: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #475569;

  --border-color: rgba(71, 85, 105, 0.22);
  --sidebar-hover: rgba(37, 99, 235, 0.14);

  --chart-grid: rgba(71, 85, 105, 0.14);
  --chart-tick: #475569;

  --accent-color: #2563eb;
  --accent-dark: #1d4ed8;

  /* navbar readability */
  --navbar-text: #0f172a;
  --navbar-icon: #1e293b;
}

/* ── LIGHT: Pearl — richer warm ivory ─────────────────── */
[data-theme="pearl"] {
  --bg-body: #efe4d4;
  --bg-card: #fffdfa;
  --bg-sidebar: #f8efe3;
  --bg-navbar: rgba(255, 250, 244, 0.96);
  --bg-input: #fffdfa;

  --text-primary: #2f241b;
  --text-secondary: #6b5643;

  --border-color: rgba(120, 87, 56, 0.22);
  --sidebar-hover: rgba(180, 83, 9, 0.12);

  --chart-grid: rgba(120, 87, 56, 0.14);
  --chart-tick: #6b5643;

  --accent-color: #c26b06;
  --accent-dark: #9a4d04;

  /* navbar readability */
  --navbar-text: #2f241b;
  --navbar-icon: #3f3226;
}

/* ── LIGHT: Blossom — deeper pink visibility ──────────── */
[data-theme="blossom"] {
  --bg-body: #f9dce8;
  --bg-card: #fffafd;
  --bg-sidebar: #ffeef5;
  --bg-navbar: rgba(255, 250, 252, 0.96);
  --bg-input: #fffafd;

  --text-primary: #3f1728;
  --text-secondary: #7a4b5d;

  --border-color: rgba(190, 92, 132, 0.22);
  --sidebar-hover: rgba(219, 39, 119, 0.12);

  --chart-grid: rgba(190, 92, 132, 0.14);
  --chart-tick: #7a4b5d;

  --accent-color: #db2777;
  --accent-dark: #be185d;

  /* navbar readability */
  --navbar-text: #3f1728;
  --navbar-icon: #4b2233;
}

/* ── LIGHT: Sage — stronger mint contrast ─────────────── */
[data-theme="sage"] {
  --bg-body: #dcefe3;
  --bg-card: #fbfffc;
  --bg-sidebar: #ecfaf1;
  --bg-navbar: rgba(248, 255, 250, 0.96);
  --bg-input: #ffffff;

  --text-primary: #10261e;
  --text-secondary: #4d6659;

  --border-color: rgba(22, 163, 74, 0.22);
  --sidebar-hover: rgba(22, 163, 74, 0.12);

  --chart-grid: rgba(22, 163, 74, 0.14);
  --chart-tick: #4d6659;

  --accent-color: #16a34a;
  --accent-dark: #15803d;

  /* navbar readability */
  --navbar-text: #10261e;
  --navbar-icon: #18342a;
}

/* ── DARK: Midnight — premium navy dark ────────────────── */
[data-theme="midnight"] {
  --bg-body: #0b1120;
  --bg-card: #111827;
  --bg-sidebar: #0f172a;
  --bg-navbar: rgba(11, 17, 32, 0.82);
  --bg-input: #1e293b;

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;

  --border-color: rgba(255, 255, 255, 0.08);
  --sidebar-hover: rgba(59, 130, 246, 0.12);

  --chart-grid: rgba(148, 163, 184, 0.10);
  --chart-tick: #94a3b8;

  --accent-color: #3b82f6;
  --accent-dark: #2563eb;
}

/* ── DARK: Charcoal — balanced neutral dark ────────────── */
[data-theme="charcoal"] {
  --bg-body: #111315;
  --bg-card: #1a1d21;
  --bg-sidebar: #16181c;
  --bg-navbar: rgba(17, 19, 21, 0.88);
  --bg-input: #23272d;

  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;

  --border-color: rgba(255, 255, 255, 0.07);
  --sidebar-hover: rgba(139, 92, 246, 0.10);

  --chart-grid: rgba(255, 255, 255, 0.06);
  --chart-tick: #9ca3af;

  --accent-color: #8b5cf6;
  --accent-dark: #7c3aed;
}

/* ── DARK: Ocean — rich teal blue ──────────────────────── */
[data-theme="ocean"] {
  --bg-body: #071824;
  --bg-card: #0d2536;
  --bg-sidebar: #0a1f2e;
  --bg-navbar: rgba(7, 24, 36, 0.88);
  --bg-input: #123044;

  --text-primary: #e6f4f9;
  --text-secondary: #8ab4c7;

  --border-color: rgba(45, 212, 191, 0.14);
  --sidebar-hover: rgba(45, 212, 191, 0.10);

  --chart-grid: rgba(45, 212, 191, 0.08);
  --chart-tick: #8ab4c7;

  --accent-color: #2dd4bf;
  --accent-dark: #14b8a6;
}

/* ── DARK: Dusk — modern purple twilight ───────────────── */
[data-theme="dusk"] {
  --bg-body: #140f1f;
  --bg-card: #21182f;
  --bg-sidebar: #1a1328;
  --bg-navbar: rgba(20, 15, 31, 0.88);
  --bg-input: #2a1f3d;

  --text-primary: #f5f3ff;
  --text-secondary: #b4a7d6;

  --border-color: rgba(168, 85, 247, 0.14);
  --sidebar-hover: rgba(168, 85, 247, 0.12);

  --chart-grid: rgba(168, 85, 247, 0.08);
  --chart-tick: #b4a7d6;

  --accent-color: #a855f7;
  --accent-dark: #9333ea;
}
/* =========================================================
   EARLY THEME INIT — html.white-content mirrors body.white-content
   so the pre-body inline script can set the class on <html>
   and have it take effect before DOMContentLoaded.
========================================================= */
html.white-content body,
html.white-content .main-panel,
html.white-content .sidebar,
html.white-content .off-canvas-sidebar {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

/* =========================================================
   SMOOTH TRANSITIONS
========================================================= */

body,
.sidebar,
.navbar,
.card,
.main-panel,
.btn,
.form-control,
.table {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.change-background,
.change-background *,
.change-background *::before,
.change-background *::after {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease !important;
}