[data-theme="dark"],
:root:not([data-theme="light"]) {
  --bg: #0a0e17;
  --bg-gradient: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    linear-gradient(160deg, #0a0e17 0%, #111827 40%, #0f172a 100%);

  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  --glass-glow: 0 0 40px rgba(59, 130, 246, 0.08);

  --surface: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #64748b;

  --side-bg: rgba(15, 23, 42, 0.75);
  --side-bg2: rgba(11, 18, 32, 0.85);
  --side-border: rgba(255, 255, 255, 0.1);
  --side-text: #e2e8f0;
  --side-muted: #64748b;
  --side-label: #475569;

  --brand-soft: rgba(59, 130, 246, 0.15);
  --input-bg: rgba(255, 255, 255, 0.05);
  --table-header-bg: rgba(255, 255, 255, 0.04);
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --search-bg: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] {
  --bg: #eef2f7;
  --bg-gradient: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, #f0f4f8 0%, #e8edf4 50%, #eef2f7 100%);

  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.78);
  --glass-bg-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-border-strong: rgba(15, 23, 42, 0.08);
  --glass-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
  --glass-glow: 0 0 40px rgba(59, 130, 246, 0.06);

  --surface: rgba(255, 255, 255, 0.7);
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.12);

  --text: #0f172a;
  --text2: #475569;
  --text3: #94a3b8;

  --side-bg: rgba(255, 255, 255, 0.72);
  --side-bg2: rgba(255, 255, 255, 0.85);
  --side-border: rgba(15, 23, 42, 0.08);
  --side-text: #1e293b;
  --side-muted: #64748b;
  --side-label: #94a3b8;

  --brand-soft: rgba(59, 130, 246, 0.1);
  --input-bg: rgba(255, 255, 255, 0.9);
  --table-header-bg: rgba(248, 250, 252, 0.9);
  --table-row-hover: rgba(59, 130, 246, 0.04);
  --overlay-bg: rgba(15, 23, 42, 0.35);
  --search-bg: rgba(255, 255, 255, 0.8);
}

/* Sidebar always uses dark theme — independent of global light/dark toggle */
.sidebar {
  color-scheme: dark;
  --side-bg: rgba(15, 23, 42, 0.75);
  --side-bg2: rgba(11, 18, 32, 0.85);
  --side-border: rgba(255, 255, 255, 0.1);
  --side-text: #e2e8f0;
  --side-muted: #64748b;
  --side-label: #475569;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.09);
  --glass-bg-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-strong: rgba(255, 255, 255, 0.18);
  --text: #f1f5f9;
  --text2: #94a3b8;
}

html.theme-transition .sidebar,
html.theme-transition .sidebar *,
html.theme-transition .sidebar *::before,
html.theme-transition .sidebar *::after {
  transition: none !important;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease) !important;
}