/* Light theme (default) */
:root {
  --bg-color: #ffffff;
  --text-color: #1a202c;
  --border-color: #e5e7eb;
  --card-bg: #f8fafc;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --sidebar-bg: #f7fafc;
  --sidebar-text: #4a5568;
  --sidebar-hover: #edf2f7;
  --header-bg: #ffffff;
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f7fafc;
  --divider: #e2e8f0;
  --blue-light: #dbeafe;
  --blue-dark: #1e40af;
  --green-light: #d1fae5;
  --green-dark: #065f46;
  --red-light: #fee2e2;
  --red-dark: #991b1b;
  --yellow-light: #fef3c7;
  --yellow-dark: #92400e;
  --purple-light: #ede9fe;
  --purple-dark: #5b21b6;
  --orange-light: #ffedd5;
  --orange-dark: #9a3412;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --danger: #ef4444;
  --primary: #2563eb;
  --success: #16a34a;
  --warning: #ca8a04;
}

/* Dark theme */
.dark {
  --bg-color: #0f172a;
  --text-color: #f7fafc;
  --border-color: #2d3748;
  --card-bg: #1e293b;
  --input-bg: #2d3748;
  --input-border: #475569;
  --sidebar-bg: #020617;
  --sidebar-text: #cbd5e0;
  --sidebar-hover: #1e293b;
  --header-bg: #1a202c;
  --dropdown-bg: #2d3748;
  --dropdown-hover: #4a5568;
  --divider: #475569;
  --blue-light: #1e3a8a;
  --blue-dark: #60a5fa;
  --green-light: #065f46;
  --green-dark: #34d399;
  --red-light: #991b1b;
  --red-dark: #fca5a5;
  --yellow-light: #92400e;
  --yellow-dark: #fbbf24;
  --purple-light: #5b21b6;
  --purple-dark: #a78bfa;
  --orange-light: #9a3412;
  --orange-dark: #fb923c;
  --blue-50: #1e3a8a;
  --blue-100: #1e40af;
  --blue-200: #1d4ed8;
  --green-50: #064e3b;
  --green-100: #065f46;
  --green-200: #047857;
  --yellow-50: #854d0e;
  --yellow-100: #a16207;
  --yellow-200: #ca8a04;
  --red-50: #7f1d1d;
  --red-100: #991b1b;
  --red-200: #b91c1c;
  --purple-50: #581c87;
  --purple-100: #6b21a8;
  --purple-200: #7c3aed;
  --gray-50: #111827;
  --gray-100: #1f2937;
  --gray-200: #374151;
  --gray-800: #9ca3af;
  --gray-900: #d1d5db;
  --hover-bg: #374151;
  --primary: #60a5fa;
  --success: #4ade80;
  --warning: #facc15;
  --danger: #f87171;
}

/* Apply theme colors to base elements */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply theme to Tailwind-like classes */
.bg-white {
  background-color: var(--card-bg) !important;
}

.bg-gray-50 {
  background-color: var(--sidebar-bg) !important;
}

.bg-gray-100 {
  background-color: var(--sidebar-hover) !important;
}

.bg-gray-800 {
  background-color: var(--sidebar-bg) !important;
}

.bg-green-100 {
  background-color: var(--green-light) !important;
}

.bg-green-900 {
  background-color: var(--green-dark) !important;
}

.bg-blue-100 {
  background-color: var(--blue-light) !important;
}

.bg-blue-900 {
  background-color: var(--blue-dark) !important;
}

.bg-red-100 {
  background-color: var(--red-light) !important;
}

.bg-yellow-100 {
  background-color: var(--yellow-light) !important;
}

.bg-orange-100 {
  background-color: var(--orange-light) !important;
}

.bg-orange-900 {
  background-color: var(--orange-dark) !important;
}

/* Text colors */
.text-gray-600,
.text-gray-700,
.text-gray-800,
.text-gray-900 {
  color: var(--text-color) !important;
}

.border,
.border-b,
.border-t,
.border-l,
.border-r {
  border-color: color-mix(in srgb, var(--border-color) 80%, transparent) !important;
}

.bg-white,
.dark .bg-white {
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.text-gray-500 {
  color: var(--sidebar-text) !important;
}

.text-gray-300 {
  color: var(--sidebar-text) !important;
}

.text-green-700,
.text-green-900 {
  color: var(--green-dark) !important;
}

.dark .text-green-700,
.dark .text-yellow-700,
.dark .text-green-900 {
  color: var(--gray-light) !important;
}

.text-blue-600 {
  color: var(--blue-dark) !important;
}

.dark .text-blue-600 {
  color: var(--blue-light) !important;
}

.text-red-600 {
  color: var(--red-dark) !important;
}

.dark .text-red-600 {
  color: var(--red-light) !important;
}

.text-yellow-600 {
  color: var(--yellow-dark) !important;
}

.dark .text-yellow-600 {
  color: var(--yellow-light) !important;
}

.text-orange-800 {
  color: var(--orange-dark) !important;
}

.dark .text-orange-800 {
  color: var(--orange-light) !important;
}

/* Border colors */
.border,
.border-b,
.border-t,
.border-l,
.border-r,
.border-gray-200,
.border-gray-300,
.border-gray-400 {
  border-color: var(--border-color) !important;
}

.border-green-400 {
  border-color: var(--green-dark) !important;
}

.dark .border-green-400 {
  border-color: var(--green-light) !important;
}

.border-red-500 {
  border-color: var(--red-dark) !important;
}

.dark .border-red-500 {
  border-color: var(--red-light) !important;
}

.border-yellow-500 {
  border-color: var(--yellow-dark) !important;
}

.dark .border-yellow-500 {
  border-color: var(--yellow-light) !important;
}

/* Input fields */
input,
select,
textarea {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

/* Remove default focus rings and add theme-based ones */
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--blue-dark);
  outline-offset: 2px;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline-color: var(--blue-light);
}

/* Hover states */
.hover\:bg-gray-50:hover {
  background-color: var(--dropdown-hover) !important;
}

.hover\:bg-gray-100:hover {
  background-color: var(--sidebar-hover) !important;
}

/* Modal backgrounds */
.bg-white.dark\:bg-gray-800 {
  background-color: var(--card-bg) !important;
}

/* Scrollbar styling */
.dark ::-webkit-scrollbar {
  width: 10px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--sidebar-bg);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 5px;
}

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

/* Apply to all background classes */
.bg-blue-50 { background-color: var(--blue-50) !important; }
.bg-blue-100 { background-color: var(--blue-100) !important; }
.bg-green-50 { background-color: var(--green-50) !important; }
.bg-green-100 { background-color: var(--green-100) !important; }
.bg-yellow-50 { background-color: var(--yellow-50) !important; }
.bg-yellow-100 { background-color: var(--yellow-100) !important; }
.bg-red-50 { background-color: var(--red-50) !important; }
.bg-red-100 { background-color: var(--red-100) !important; }
.bg-purple-50 { background-color: var(--purple-50) !important; }
.bg-purple-100 { background-color: var(--purple-100) !important; }
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-white { background-color: var(--card-bg) !important; }

/* Apply to text classes */
.text-blue-600 { color: var(--blue-600) !important; }
.text-blue-700 { color: var(--blue-700) !important; }
.text-blue-800 { color: var(--blue-dark) !important; }
.text-blue-900 { color: var(--blue-900) !important; }
.text-green-800 { color: var(--green-dark) !important; }
.text-yellow-800 { color: var(--yellow-dark) !important; }
.text-red-800 { color: var(--red-dark) !important; }
.text-purple-800 { color: var(--purple-dark) !important; }
.text-gray-800 { color: var(--gray-800) !important; }
.text-gray-900 { color: var(--gray-900) !important; }
.text-yellow-800 { color: var(--yellow-800) !important; }
.text-yellow-900 { color: var(--yellow-900) !important; }

/* Apply to border classes */
.border-blue-200 { border-color: var(--blue-200) !important; }
.border-green-200 { border-color: var(--green-200) !important; }
.border-yellow-200 { border-color: var(--yellow-200) !important; }
.border-red-200 { border-color: var(--red-200) !important; }
.border-purple-200 { border-color: var(--purple-200) !important; }
.border, 
.border-gray-200 { border-color: var(--gray-200) !important; }
.dark .border-gray-200 { outline: auto; border-color: var(--gray-800) !important; }

/* Special component-specific overrides */
.dark .bg-white { background-color: var(--card-bg) !important; }
.dark .border { border-color: var(--border-color) !important; }

/* Add transitions */
.bg-blue-50,
.bg-green-50,
.bg-yellow-50,
.bg-red-50,
.bg-purple-50,
.bg-gray-50,
.bg-blue-100,
.bg-green-100,
.bg-yellow-100,
.bg-red-100,
.bg-purple-100,
.bg-gray-100,
.text-blue-800,
.text-green-800,
.text-yellow-800,
.text-red-800,
.text-purple-800,
.text-gray-800,
.border-blue-200,
.border-green-200,
.border-yellow-200,
.border-red-200,
.border-purple-200,
.border-gray-200 {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease !important;
}

.bg-primary, .active.bg-primary {
  background-color: transparent !important;
}

.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

.text-muted {
  color: var(--sidebar-text);
}

.light-only {
  background: #ffffff;
  color: #111827;
}

.light-only .nav a {
  color: #111827 !important;
}

.light-only .nav a:hover,
.light-only .nav a.active {
  color: #2563eb !important;
}

.light-only .nav a::after {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}

@media (max-width: 768px) {
  .light-only .nav {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
  }
}

.mobile-menu-btn {
  color: #000 !important;
  background-color: #fff !important;
  border-color: #000 !important;
  border-radius: 6px;
}

.mobile-menu-btn i {
  color: #000 !important;
}