:root {
  color-scheme: dark;
  --page-bg: #050915;
  --surface-1: #0b1221;
  --surface-2: #0f172a;
  --surface-3: #111827;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #7c8ca5;
  --border-soft: #1f2937;
  --border-strong: #273449;
  --accent-indigo: #6366f1;
  --accent-pink: #ec4899;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background-color: var(--page-bg) !important;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.18), transparent 26%),
    radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.16), transparent 28%),
    linear-gradient(120deg, #050915 0%, #0b1221 45%, #060b17 100%) !important;
  color: var(--text-primary) !important;
}

main,
section,
article {
  background-color: transparent;
}

.glass-card {
  background: linear-gradient(135deg, rgba(22, 28, 45, 0.82), rgba(15, 23, 42, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.45),
    0 10px 30px rgba(99, 102, 241, 0.18);
}

.sidebar-scroll {
  scrollbar-width: none;
}

.sidebar-scroll:hover {
  scrollbar-width: thin;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 0;
}

.sidebar-scroll:hover::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.45), rgba(236, 72, 153, 0.4));
  border-radius: 9999px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

/* Sidebar hover matches selected feel */
.sidebar-scroll a {
  transition: all 0.15s ease;
}

.sidebar-scroll a:hover {
  background-color: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
}

.sidebar-scroll a:hover i {
  color: #c7d2fe !important;
}

/* Shadow tuning for dark surfaces */
.shadow-indigo-50 {
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 6px 16px rgba(99, 102, 241, 0.18) !important;
}

.shadow-indigo-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(99, 102, 241, 0.22) !important;
}

.shadow-indigo-200 {
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(99, 102, 241, 0.26) !important;
}

.shadow-indigo-300,
.shadow-indigo-500 {
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.5),
    0 12px 30px rgba(99, 102, 241, 0.3) !important;
}

.shadow-emerald-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(16, 185, 129, 0.22) !important;
}

.shadow-pink-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(236, 72, 153, 0.22) !important;
}

.shadow-amber-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(251, 191, 36, 0.22) !important;
}

.shadow-rose-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(244, 63, 94, 0.22) !important;
}

.shadow-sky-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(14, 165, 233, 0.2) !important;
}

.shadow-lime-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(132, 204, 22, 0.2) !important;
}

.shadow-slate-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.42),
    0 8px 20px rgba(148, 163, 184, 0.2) !important;
}

.shadow-orange-100 {
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.4),
    0 8px 20px rgba(249, 115, 22, 0.22) !important;
}

/* Text overrides for dark surfaces */
.text-slate-950,
.text-slate-900,
.text-slate-800 {
  color: var(--text-primary) !important;
}

.text-slate-700 {
  color: #cbd5e1 !important;
}

.text-slate-600 {
  color: #a5b4c6 !important;
}

.text-slate-500 {
  color: var(--text-secondary) !important;
}

.text-slate-400 {
  color: var(--text-muted) !important;
}

.text-slate-300 {
  color: #6b7a96 !important;
}

.text-slate-200 {
  color: #5a6882 !important;
}

.text-slate-100 {
  color: #424d67 !important;
}

.text-slate-50 {
  color: #323a50 !important;
}

input,
select,
textarea {
  background-color: var(--surface-2);
  border-color: var(--border-soft);
  color: var(--text-primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* Surface + tint overrides */
.bg-white {
  background-color: var(--surface-2) !important;
}

.bg-slate-50 {
  background-color: #0c1424;
}

.bg-slate-100 {
  background-color: var(--surface-3);
}

.bg-slate-300 {
  background-color: #1f2937;
}

.bg-indigo-50 {
  background-color: #11182d;
}

.bg-indigo-100 {
  background-color: #151c36;
}

.bg-indigo-200 {
  background-color: #1c2545;
}

.bg-indigo-300 {
  background-color: #1f2950;
}

.bg-emerald-50 {
  background-color: #0c1914;
}

.bg-emerald-100 {
  background-color: #0f241b;
}

.bg-amber-50 {
  background-color: #24170c;
}

.bg-amber-100 {
  background-color: #2c1e0f;
}

.bg-amber-200 {
  background-color: #352514;
}

.bg-pink-50 {
  background-color: #1d0f1d;
}

.bg-pink-100 {
  background-color: #261327;
}

/* Translucent overlays */
.bg-white\/95 {
  background-color: rgba(15, 23, 42, 0.95) !important;
}

.bg-white\/90 {
  background-color: rgba(15, 23, 42, 0.9) !important;
}

.bg-white\/85 {
  background-color: rgba(15, 23, 42, 0.85) !important;
}

.bg-white\/80 {
  background-color: rgba(15, 23, 42, 0.8) !important;
}

.bg-white\/70 {
  background-color: rgba(15, 23, 42, 0.7) !important;
}

.bg-white\/60 {
  background-color: rgba(15, 23, 42, 0.6) !important;
}

.bg-white\/30 {
  background-color: rgba(15, 23, 42, 0.3) !important;
}

.bg-white\/20 {
  background-color: rgba(99, 102, 241, 0.16) !important;
}

.bg-white\/15 {
  background-color: rgba(99, 102, 241, 0.14) !important;
}

.bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.1) !important;
}

/* Third-party widgets */
.gridjs-container,
.gridjs-wrapper,
.gridjs-table,
.gridjs-footer,
.gridjs-head,
.gridjs-pagination,
.gridjs-pages button,
.gridjs-search input,
input.gridjs-input,
.gridjs-tbody,
td.gridjs-td {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}

th.gridjs-th {
  background-color: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}

.gridjs-pages button:hover,
.gridjs-pages button.gridjs-currentPage {
  background-color: var(--surface-1) !important;
  color: var(--text-primary) !important;
}

.c3-tooltip,
.c3-legend-background,
.apexcharts-menu {
  background-color: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}

.c3-grid line {
  stroke: var(--border-soft);
}

.c3 text {
  fill: var(--text-primary);
}

.apexcharts-tooltip {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

/* Border adjustments */
.border-white {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.border-white\/100 {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.border-white\/80 {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.border-white\/70 {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.border-white\/60 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.border-white\/50 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.border-black,
.border-black\/10,
.border-black\/9,
.border-black\/5 {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.border-slate-100,
.border-slate-200,
.border-slate-300 {
  border-color: var(--border-soft) !important;
}

.divide-white\/70 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.divide-white\/60 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.border-indigo-100,
.border-indigo-200,
.border-indigo-300 {
  border-color: rgba(99, 102, 241, 0.35) !important;
}

.border-emerald-100,
.border-emerald-200,
.border-emerald-300 {
  border-color: rgba(34, 197, 94, 0.35) !important;
}

.border-amber-100,
.border-amber-200,
.border-amber-300,
.border-amber-400 {
  border-color: rgba(251, 191, 36, 0.28) !important;
}

.border-pink-100 {
  border-color: rgba(236, 72, 153, 0.28) !important;
}

.border-rose-100 {
  border-color: rgba(244, 63, 94, 0.28) !important;
}

/* Gradient stops tuned for dark */
.from-white {
  --tw-gradient-from: #121a2b !important;
  --tw-gradient-to: rgba(18, 26, 43, 0) !important;
}

.via-white {
  --tw-gradient-stops: var(--tw-gradient-from), #121a2b, var(--tw-gradient-to, rgba(18, 26, 43, 0)) !important;
}

.to-white {
  --tw-gradient-to: #121a2b !important;
}

.from-indigo-50 {
  --tw-gradient-from: #11182d !important;
  --tw-gradient-to: rgba(17, 24, 45, 0) !important;
}

.from-indigo-100 {
  --tw-gradient-from: #161d38 !important;
  --tw-gradient-to: rgba(22, 29, 56, 0) !important;
}

.from-indigo-200 {
  --tw-gradient-from: #1c2545 !important;
  --tw-gradient-to: rgba(28, 37, 69, 0) !important;
}

.from-emerald-50 {
  --tw-gradient-from: #0c1914 !important;
  --tw-gradient-to: rgba(12, 25, 20, 0) !important;
}

.from-emerald-100 {
  --tw-gradient-from: #0f241b !important;
  --tw-gradient-to: rgba(15, 36, 27, 0) !important;
}

.from-amber-50 {
  --tw-gradient-from: #24170c !important;
  --tw-gradient-to: rgba(36, 23, 12, 0) !important;
}

.from-pink-50 {
  --tw-gradient-from: #1d0f1d !important;
  --tw-gradient-to: rgba(29, 15, 29, 0) !important;
}

.via-indigo-50 {
  --tw-gradient-stops: var(--tw-gradient-from), #11182d, var(--tw-gradient-to, rgba(17, 24, 45, 0)) !important;
}

.via-indigo-100 {
  --tw-gradient-stops: var(--tw-gradient-from), #161d38, var(--tw-gradient-to, rgba(22, 29, 56, 0)) !important;
}

.via-sky-50 {
  --tw-gradient-stops: var(--tw-gradient-from), #0f1f32, var(--tw-gradient-to, rgba(15, 31, 50, 0)) !important;
}

.via-sky-100 {
  --tw-gradient-stops: var(--tw-gradient-from), #102440, var(--tw-gradient-to, rgba(16, 36, 64, 0)) !important;
}

.via-slate-200 {
  --tw-gradient-stops: var(--tw-gradient-from), #1c2638, var(--tw-gradient-to, rgba(28, 38, 56, 0)) !important;
}

.to-pink-50 {
  --tw-gradient-to: #1d0f1d !important;
}

.to-pink-100 {
  --tw-gradient-to: #24122b !important;
}

.to-pink-200 {
  --tw-gradient-to: #2e1a35 !important;
}

.to-indigo-50 {
  --tw-gradient-to: #11182d !important;
}

/* Hover background fixes for dark mode */
.hover\:bg-indigo-50:hover {
  background-color: #11182d !important;
}

.hover\:bg-indigo-50\/60:hover {
  background-color: rgba(17, 24, 45, 0.6) !important;
}

.hover\:bg-indigo-50\/80:hover {
  background-color: rgba(17, 24, 45, 0.8) !important;
}

.hover\:bg-indigo-100:hover {
  background-color: #161d38 !important;
}

.morris-hover-dark {
  background-color: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}