/**
 * Modern Dark Mode Styles for GestorAxion
 * Slate-based palette for a clean, premium look
 */

:root {
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-tertiary: #334155;
  --dark-text-primary: #f8fafc;
  --dark-text-secondary: #94a3b8;
  --dark-text-muted: #64748b;
  --dark-border-color: #334155;
  --dark-input-bg: #1e293b;
  --dark-input-border: #475569;
  --dark-card-shadow: rgba(0, 0, 0, 0.4);
  --dark-hover-bg: #334155;
  --primary-glow: rgba(99, 102, 241, 0.15);
}

/* ========================================
   Base Styles
   ======================================== */
html.dark-mode,
html.dark-mode body {
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

html.dark-mode .bg-white,
html.dark-mode .bg-slate-50,
html.dark-mode .bg-gray-50 {
  background-color: var(--dark-bg-secondary) !important;
}

html.dark-mode .bg-gray-100 {
  background-color: var(--dark-bg-tertiary) !important;
}

/* ========================================
   Text Colors
   ======================================== */
html.dark-mode p,
html.dark-mode span,
html.dark-mode div:not(.bg-gradient-primary):not(.bg-gradient-red-black):not([class*="bg-indigo-"]):not([class*="bg-emerald-"]):not([class*="bg-rose-"]):not([class*="bg-sky-"]):not([class*="bg-amber-"]),
html.dark-mode label {
  color: var(--dark-text-secondary);
}

/* Ensure buttons maintain their background colors */
html.dark-mode button[class*="bg-"],
html.dark-mode a[class*="bg-"] {
  color: #ffffff !important;
}

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6,
html.dark-mode strong,
html.dark-mode .font-bold,
html.dark-mode .font-semibold,
html.dark-mode .text-slate-700,
html.dark-mode .text-gray-800 {
  color: var(--dark-text-primary) !important;
}

html.dark-mode .text-slate-500,
html.dark-mode .text-gray-500,
html.dark-mode .text-muted {
  color: var(--dark-text-muted) !important;
}

/* ========================================
   Cards and Containers
   ======================================== */
html.dark-mode .card,
html.dark-mode .bg-clip-border,
html.dark-mode [fixed-plugin-card] {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

html.dark-mode .shadow-soft-xl,
html.dark-mode .shadow-soft-2xl,
html.dark-mode .shadow-soft-3xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* ========================================
   Sidebar & Nav
   ======================================== */
html.dark-mode aside,
html.dark-mode .sidenav {
  background-color: var(--dark-bg-secondary) !important;
  border-right: 1px solid var(--dark-border-color) !important;
}

html.dark-mode aside ul li a:hover,
html.dark-mode aside ul li button:hover {
  background-color: var(--dark-hover-bg) !important;
  color: var(--dark-text-primary) !important;
}

html.dark-mode aside ul li a:hover div,
html.dark-mode aside ul li button:hover div {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

html.dark-mode .sidenav .nav-link {
  color: var(--dark-text-secondary) !important;
}

html.dark-mode hr {
  background-image: linear-gradient(to right, transparent, var(--dark-border-color), transparent) !important;
  opacity: 0.25;
}

/* ========================================
   Forms
   ======================================== */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background-color: var(--dark-bg-primary) !important;
  border-color: var(--dark-input-border) !important;
  color: var(--dark-text-primary) !important;
}

html.dark-mode input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* ========================================
   Tables
   ======================================== */
html.dark-mode table thead th {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

html.dark-mode table tbody td {
  border-color: var(--dark-border-color) !important;
}

html.dark-mode tr:hover td {
  background-color: var(--dark-hover-bg) !important;
}

/* ========================================
   Modals
   ======================================== */
html.dark-mode .modal-content,
html.dark-mode #passwordModal > div {
  background-color: var(--dark-bg-secondary) !important;
  border: 1px solid var(--dark-border-color) !important;
}

/* ========================================
   Buttons
   ======================================== */
.bg-indigo-600, .bg-indigo-500, [class*="bg-indigo-"] {
  background-color: #4f46e5 !important;
  color: white !important;
}

.bg-indigo-600:hover, .bg-indigo-500:hover {
  background-color: #4338ca !important;
}

html.dark-mode .bg-indigo-600, 
html.dark-mode .bg-indigo-500,
html.dark-mode [class*="bg-indigo-"] {
  background-color: #6366f1 !important;
  color: white !important;
}

html.dark-mode .bg-indigo-600:hover, 
html.dark-mode .bg-indigo-500:hover {
  background-color: #4f46e5 !important;
}

html.dark-mode .btn-white,
html.dark-mode .bg-white.text-slate-700 {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

/* ========================================
   Scrollbar
   ======================================== */
html.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-bg-primary);
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-bg-tertiary);
  border-radius: 10px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-text-muted);
}

/* ========================================
   Transitions & Animations
   ======================================== */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}