/* ============================================================
   Dark Theme for AdminJS Admin Panel
   Palette: Catppuccin Mocha
   ============================================================ */

/* --- Light theme (default) CSS variables --- */
:root {
  --theme-background: #f8fafc;
  --theme-background-alt: #f1f5f9;
  --theme-surface: #ffffff;
  --theme-surface-hover: #f8fafc;
  --theme-border: #e2e8f0;
  --theme-text-primary: #0f172a;
  --theme-text-secondary: #64748b;
  --theme-text-muted: #94a3b8;
  --theme-primary: #3b82f6;
  --theme-primary-hover: #2563eb;
  --theme-primary-bg: #eff6ff;
  --theme-danger: #ef4444;
  --theme-danger-hover: #dc2626;
  --theme-danger-bg: #fef2f2;
  --theme-success: #10b981;
  --theme-success-bg: #ecfdf5;
  --theme-warning: #f59e0b;
  --theme-warning-bg: #fffbeb;
  --theme-info: #6366f1;
  --theme-info-bg: #eef2ff;
  --theme-shadow: rgba(0, 0, 0, 0.1);
  --theme-shadow-lg: rgba(0, 0, 0, 0.15);
  --theme-input-bg: #ffffff;
  --theme-input-border: #d1d5db;
  --theme-badge-bg: #e0e7ff;
  --theme-badge-text: #3730a3;
  --theme-code-bg: #f1f5f9;
  --theme-scrollbar-track: #f1f5f9;
  --theme-scrollbar-thumb: #cbd5e1;
  --theme-overlay: rgba(0, 0, 0, 0.5);
  --theme-gradient-from: #667eea;
  --theme-gradient-to: #764ba2;
  --theme-online: #22c55e;
  --theme-offline: #cbd5e1;
  --theme-purple: #8b5cf6;
  --theme-purple-bg: #f5f3ff;
  --theme-orange: #f97316;
  --theme-orange-bg: #fff7ed;
  --theme-cyan: #06b6d4;
  --theme-cyan-bg: #ecfeff;
  --theme-pink: #ec4899;
  --theme-reported-bg: #FEE2E2;
  --theme-reported-border: #FECACA;
  --theme-selected-bg: #EBF5FF;
  --theme-expanded-bg: #F0F9FF;
  --theme-blue-bubble: #DBEAFE;
  --theme-warning-text: #92400e;
  --theme-warning-border: #fcd34d;
  --theme-danger-text: #991b1b;
  --theme-success-text: #065f46;
  --theme-primary-border: #93c5fd;
  --theme-pink-bg: #fdf2f8;
  --theme-info-border: #91d5ff;
}

/* --- Dark theme overrides --- */
[data-theme="dark"] {
  --theme-background: #11111b;
  --theme-background-alt: #181825;
  --theme-surface: #1e1e2e;
  --theme-surface-hover: #313244;
  --theme-border: #313244;
  --theme-text-primary: #cdd6f4;
  --theme-text-secondary: #a6adc8;
  --theme-text-muted: #6c7086;
  --theme-primary: #89b4fa;
  --theme-primary-hover: #74c7ec;
  --theme-primary-bg: rgba(137, 180, 250, 0.1);
  --theme-danger: #f38ba8;
  --theme-danger-hover: #eba0ac;
  --theme-danger-bg: rgba(243, 139, 168, 0.1);
  --theme-success: #a6e3a1;
  --theme-success-bg: rgba(166, 227, 161, 0.1);
  --theme-warning: #f9e2af;
  --theme-warning-bg: rgba(249, 226, 175, 0.1);
  --theme-info: #b4befe;
  --theme-info-bg: rgba(180, 190, 254, 0.1);
  --theme-shadow: rgba(0, 0, 0, 0.3);
  --theme-shadow-lg: rgba(0, 0, 0, 0.5);
  --theme-input-bg: #181825;
  --theme-input-border: #45475a;
  --theme-badge-bg: rgba(137, 180, 250, 0.15);
  --theme-badge-text: #89b4fa;
  --theme-code-bg: #181825;
  --theme-scrollbar-track: #181825;
  --theme-scrollbar-thumb: #45475a;
  --theme-overlay: rgba(0, 0, 0, 0.7);
  --theme-gradient-from: #89b4fa;
  --theme-gradient-to: #cba6f7;
  --theme-online: #a6e3a1;
  --theme-offline: #6c7086;
  --theme-purple: #cba6f7;
  --theme-purple-bg: rgba(203, 166, 247, 0.1);
  --theme-orange: #fab387;
  --theme-orange-bg: rgba(250, 179, 135, 0.1);
  --theme-cyan: #94e2d5;
  --theme-cyan-bg: rgba(148, 226, 213, 0.1);
  --theme-pink: #f5c2e7;
  --theme-reported-bg: rgba(243, 139, 168, 0.15);
  --theme-reported-border: rgba(243, 139, 168, 0.3);
  --theme-selected-bg: rgba(137, 180, 250, 0.1);
  --theme-expanded-bg: rgba(137, 180, 250, 0.08);
  --theme-blue-bubble: rgba(137, 180, 250, 0.15);
  --theme-warning-text: #f9e2af;
  --theme-warning-border: rgba(249, 226, 175, 0.3);
  --theme-danger-text: #f38ba8;
  --theme-success-text: #a6e3a1;
  --theme-primary-border: rgba(137, 180, 250, 0.3);
  --theme-pink-bg: rgba(245, 194, 231, 0.1);
  --theme-info-border: rgba(137, 180, 250, 0.25);
}

/* ============================================================
   AdminJS Built-in UI Overrides (dark theme only)
   ============================================================ */

/* --- Global body --- */
[data-theme="dark"] body {
  background-color: var(--theme-background) !important;
  color: var(--theme-text-primary) !important;
}

/* --- Sidebar --- */
[data-theme="dark"] [data-css="sidebar"],
[data-theme="dark"] aside[class*="Sidebar"],
[data-theme="dark"] nav[class*="Navigation"] {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] [data-css="sidebar"] a,
[data-theme="dark"] aside[class*="Sidebar"] a,
[data-theme="dark"] nav[class*="Navigation"] a {
  color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] [data-css="sidebar"] a:hover,
[data-theme="dark"] aside[class*="Sidebar"] a:hover,
[data-theme="dark"] nav[class*="Navigation"] a:hover {
  color: var(--theme-text-primary) !important;
  background-color: var(--theme-surface-hover) !important;
}

[data-theme="dark"] [data-css="sidebar"] a[aria-current="page"],
[data-theme="dark"] [data-css="sidebar"] a[class*="active"],
[data-theme="dark"] [data-css="sidebar"] a.active {
  color: var(--theme-primary) !important;
  background-color: var(--theme-primary-bg) !important;
}

/* Sidebar section titles */
[data-theme="dark"] [data-css="sidebar"] [class*="SectionTitle"],
[data-theme="dark"] [data-css="sidebar"] h3,
[data-theme="dark"] [data-css="sidebar"] section > span {
  color: var(--theme-text-muted) !important;
}

/* --- Navbar / Top bar --- */
[data-theme="dark"] [data-css="topbar"],
[data-theme="dark"] .adminjs_NavBar {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme="dark"] [data-css="topbar"] a,
[data-theme="dark"] .adminjs_NavBar a {
  color: var(--theme-text-secondary) !important;
}

/* --- Main content area --- */
[data-theme="dark"] [data-css="app"],
[data-theme="dark"] [class*="DrawerContent"],
[data-theme="dark"] main,
[data-theme="dark"] [class*="ActionBody"],
[data-theme="dark"] section[class*="Wrapper"] {
  background-color: var(--theme-background) !important;
}

/* --- Cards / Boxes --- */
[data-theme="dark"] [class*="Box"],
[data-theme="dark"] [data-css="default-dashboard"] [class*="Card"] {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

/* --- Tables --- */
[data-theme="dark"] table {
  background-color: var(--theme-surface) !important;
}

[data-theme="dark"] table th {
  background-color: var(--theme-background-alt) !important;
  color: var(--theme-text-secondary) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] table td {
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] table tr:hover td {
  background-color: var(--theme-surface-hover) !important;
}

[data-theme="dark"] table tr:nth-child(even) td {
  background-color: var(--theme-background-alt) !important;
}

/* --- Forms --- */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--theme-input-bg) !important;
  border-color: var(--theme-input-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--theme-text-muted) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 2px var(--theme-primary-bg) !important;
}

[data-theme="dark"] label {
  color: var(--theme-text-secondary) !important;
}

/* --- Buttons --- */
[data-theme="dark"] button[class*="Button"]:not(.theme-toggle-btn) {
  color: var(--theme-text-primary) !important;
}

[data-theme="dark"] button[data-css="button-primary"],
[data-theme="dark"] a[data-css="button-primary"] {
  background-color: var(--theme-primary) !important;
  color: #1e1e2e !important;
}

[data-theme="dark"] button[data-css="button-danger"] {
  background-color: var(--theme-danger) !important;
  color: #1e1e2e !important;
}

/* --- Links --- */
[data-theme="dark"] a {
  color: var(--theme-primary) !important;
}

/* --- Breadcrumbs --- */
[data-theme="dark"] [class*="Breadcrumb"],
[data-theme="dark"] [data-css="breadcrumb"] {
  color: var(--theme-text-muted) !important;
}

[data-theme="dark"] [class*="Breadcrumb"] a,
[data-theme="dark"] [data-css="breadcrumb"] a {
  color: var(--theme-text-secondary) !important;
}

/* --- Pagination --- */
[data-theme="dark"] [class*="Pagination"] button {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

[data-theme="dark"] [class*="Pagination"] button:hover {
  background-color: var(--theme-surface-hover) !important;
}

/* --- Badges / Tags --- */
[data-theme="dark"] [class*="Badge"],
[data-theme="dark"] [class*="Tag"] {
  background-color: var(--theme-badge-bg) !important;
  color: var(--theme-badge-text) !important;
}

/* --- Dropdowns --- */
[data-theme="dark"] [class*="Dropdown"],
[data-theme="dark"] [class*="Menu"],
[data-theme="dark"] [role="listbox"],
[data-theme="dark"] [role="menu"] {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme="dark"] [class*="Dropdown"] [class*="Option"]:hover,
[data-theme="dark"] [class*="Menu"] [class*="Item"]:hover,
[data-theme="dark"] [role="option"]:hover {
  background-color: var(--theme-surface-hover) !important;
}

/* --- Modal / Drawer --- */
[data-theme="dark"] [class*="Modal"],
[data-theme="dark"] [class*="Drawer"],
[data-theme="dark"] [class*="Dialog"] {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text-primary) !important;
}

/* --- Login page --- */
[data-theme="dark"] [data-css="login"] {
  background-color: var(--theme-background) !important;
}

[data-theme="dark"] [data-css="login"] [class*="Box"],
[data-theme="dark"] [data-css="login"] [class*="Card"],
[data-theme="dark"] [data-css="login"] form {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text-primary) !important;
}

[data-theme="dark"] [data-css="login"] h2,
[data-theme="dark"] [data-css="login"] p {
  color: var(--theme-text-primary) !important;
}

/* --- Scrollbar (Webkit) --- */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--theme-scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--theme-scrollbar-thumb);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-muted);
}

/* --- Misc text overrides --- */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] p, [data-theme="dark"] span,
[data-theme="dark"] div {
  color: inherit;
}

/* --- Icons in sidebar (SVG fill) --- */
[data-theme="dark"] [data-css="sidebar"] svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* --- Tooltip --- */
[data-theme="dark"] [class*="Tooltip"] {
  background-color: var(--theme-surface) !important;
  color: var(--theme-text-primary) !important;
  border-color: var(--theme-border) !important;
}

/* --- Theme toggle button styles --- */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--theme-border);
  background-color: var(--theme-surface);
  color: var(--theme-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
  margin-left: auto;
  margin-right: 16px;
}

/* Fallback: if button ends up in body instead of navbar */
body > .theme-toggle-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-width: 2px;
  box-shadow: 0 2px 8px var(--theme-shadow);
  margin: 0;
}

.theme-toggle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--theme-shadow-lg);
  border-color: var(--theme-primary);
  color: var(--theme-primary) !important;
  background-color: var(--theme-surface) !important;
}

/* --- Smooth transitions for theme switch --- */
body,
[data-css="sidebar"],
[data-css="topbar"],
.adminjs_NavBar,
[data-css="app"],
main, table, input, select, textarea,
.theme-toggle-btn {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}