/* Dark Mode CSS Variables */
:root {
  --bg-primary: #f9fafb;
  --bg-secondary: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --shadow: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --border-color: #374151;
  --shadow: rgba(0, 0, 0, 0.5);
}

/* Dark Mode Transitions */
body, 
.bg-white,
.bg-gray-50,
.bg-gradient-to-br {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Styles */
[data-theme="dark"] body {
  background: linear-gradient(to bottom right, #1a1a1a, #2d2d2d, #1a1a1a) !important;
  color: var(--text-primary);
}

[data-theme="dark"] .bg-white {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: #2d2d2d !important;
}

[data-theme="dark"] .bg-blue-50 {
  background-color: #1e3a5f !important;
}

[data-theme="dark"] .bg-green-50 {
  background-color: #1e4d3c !important;
}

[data-theme="dark"] .bg-yellow-50 {
  background-color: #4d3e1e !important;
}

[data-theme="dark"] .bg-red-50 {
  background-color: #4d1e1e !important;
}

[data-theme="dark"] .bg-purple-50 {
  background-color: #3a1e4d !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #374151 !important;
}

/* TEXT COLORS - All Gray Shades (IMPORTANT!) */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: #f9fafb !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-400 {
  color: #9ca3af !important;
}

[data-theme="dark"] .text-gray-300 {
  color: #6b7280 !important;
}

/* Specific text colors that might be invisible */
[data-theme="dark"] .text-sm.text-gray-700,
[data-theme="dark"] .text-sm.text-gray-600,
[data-theme="dark"] .text-sm.text-gray-500 {
  color: #d1d5db !important;
}

[data-theme="dark"] .text-xs.text-gray-700,
[data-theme="dark"] .text-xs.text-gray-600,
[data-theme="dark"] .text-xs.text-gray-500 {
  color: #9ca3af !important;
}

/* Border Colors */
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .border-b {
  border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .divide-gray-200 > * + * {
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl {
  box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow) !important;
}

/* Dark Mode für Cards */
[data-theme="dark"] .border-2 {
  background-color: #2d2d2d !important;
}

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

[data-theme="dark"] thead {
  background-color: #374151 !important;
}

[data-theme="dark"] tbody tr:hover {
  background-color: #374151 !important;
}

[data-theme="dark"] th {
  color: #d1d5db !important;
}

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

/* Specific overrides for light text on dark */
[data-theme="dark"] .text-xs.font-medium.text-gray-500 {
  color: #9ca3af !important;
}

[data-theme="dark"] .text-left.text-xs.font-medium.text-gray-500 {
  color: #9ca3af !important;
}

[data-theme="dark"] .bg-purple-100 {
  background-color: #4c1d95 !important;
  color: #e9d5ff !important;
}

[data-theme="dark"] .bg-orange-100 {
  background-color: #7c2d12 !important;
  color: #fed7aa !important;
}

[data-theme="dark"] .bg-blue-100 {
  background-color: #1e3a8a !important;
  color: #bfdbfe !important;
}

[data-theme="dark"] .bg-green-100 {
  background-color: #065f46 !important;
  color: #d1fae5 !important;
}

[data-theme="dark"] .bg-red-100 {
  background-color: #7f1d1d !important;
  color: #fecaca !important;
}

[data-theme="dark"] .bg-yellow-100 {
  background-color: #78350f !important;
  color: #fef3c7 !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: #374151 !important;
  color: #d1d5db !important;
}

/* Badge Text Colors */
[data-theme="dark"] .text-purple-800 {
  color: #e9d5ff !important;
}

[data-theme="dark"] .text-blue-800,
[data-theme="dark"] .text-blue-700,
[data-theme="dark"] .text-blue-600 {
  color: #bfdbfe !important;
}

[data-theme="dark"] .text-green-800,
[data-theme="dark"] .text-green-700 {
  color: #d1fae5 !important;
}

[data-theme="dark"] .text-red-800,
[data-theme="dark"] .text-red-700 {
  color: #fecaca !important;
}

[data-theme="dark"] .text-yellow-800,
[data-theme="dark"] .text-yellow-700 {
  color: #fef3c7 !important;
}

[data-theme="dark"] .text-gray-600 {
  color: #d1d5db !important;
}

/* Dark Mode für Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #333333 !important;
  color: #f9fafb !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #9ca3af !important;
}

/* Input focus with red border for danger inputs */
[data-theme="dark"] input.border-red-300:focus,
[data-theme="dark"] input.border-2.border-red-300:focus {
  border-color: #dc2626 !important;
  --tw-ring-color: #dc2626 !important;
}

/* Border Colors for Colored Boxes */
[data-theme="dark"] .border-blue-300,
[data-theme="dark"] .border-blue-200 {
  border-color: #2563eb !important;
}

[data-theme="dark"] .border-green-300,
[data-theme="dark"] .border-green-200 {
  border-color: #059669 !important;
}

[data-theme="dark"] .border-yellow-300,
[data-theme="dark"] .border-yellow-200 {
  border-color: #d97706 !important;
}

[data-theme="dark"] .border-red-300,
[data-theme="dark"] .border-red-200 {
  border-color: #dc2626 !important;
}

[data-theme="dark"] .border-purple-300,
[data-theme="dark"] .border-purple-200 {
  border-color: #7c3aed !important;
}

/* Specific fixes for info boxes */
[data-theme="dark"] .bg-gradient-to-r {
  background: #2d2d2d !important;
}

[data-theme="dark"] .bg-gradient-to-r.from-purple-50.to-blue-50 {
  background: linear-gradient(to right, #2d2d2d, #374151) !important;
}

/* Whitespace and opacity fixes */
[data-theme="dark"] .text-sm.opacity-90 {
  opacity: 1 !important;
}

[data-theme="dark"] .opacity-75 {
  opacity: 0.9 !important;
}

[data-theme="dark"] .opacity-50 {
  opacity: 0.7 !important;
}

/* Hover & Focus States */
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: #374151 !important;
}

[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: #4b5563 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: #6366f1 !important;
  --tw-ring-color: #6366f1 !important;
}

/* Links */
[data-theme="dark"] a {
  color: #93c5fd !important;
}

[data-theme="dark"] a:hover {
  color: #bfdbfe !important;
}

/* Disabled States */
[data-theme="dark"] input:disabled,
[data-theme="dark"] button:disabled {
  opacity: 0.5 !important;
  background-color: #1f2937 !important;
}

/* Select Dropdowns */
[data-theme="dark"] select option {
  background-color: #2d2d2d !important;
  color: #f9fafb !important;
}

/* Icon colors for colored sections */
[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}

[data-theme="dark"] .text-purple-600 {
  color: #c084fc !important;
}

[data-theme="dark"] .text-green-600 {
  color: #4ade80 !important;
}

[data-theme="dark"] .text-red-600 {
  color: #f87171 !important;
}

/* Admin Dashboard specific fixes */
[data-theme="dark"] .text-red-800 {
  color: #fecaca !important;
}

/* Dark Mode Toggle Icon */
#darkModeToggle .fa-sun {
  display: none;
}

[data-theme="dark"] #darkModeToggle .fa-moon {
  display: none;
}

[data-theme="dark"] #darkModeToggle .fa-sun {
  display: inline;
}

/* Strong/Bold tags */
[data-theme="dark"] strong {
  color: #f9fafb !important;
}

[data-theme="dark"] .text-gray-700 strong,
[data-theme="dark"] .text-gray-600 strong {
  color: #f9fafb !important;
}

/* Lists */
[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
  color: #d1d5db !important;
}

[data-theme="dark"] .list-disc li,
[data-theme="dark"] .list-inside li {
  color: #d1d5db !important;
}

/* Labels */
[data-theme="dark"] label {
  color: #d1d5db !important;
}

[data-theme="dark"] .text-sm.font-medium.text-gray-700 {
  color: #d1d5db !important;
}

/* Paragraphs */
[data-theme="dark"] p {
  color: #d1d5db !important;
}

[data-theme="dark"] .text-gray-700 p {
  color: #d1d5db !important;
}

/* Summary/Details */
[data-theme="dark"] summary {
  color: #f9fafb !important;
}

[data-theme="dark"] summary:hover {
  color: #f87171 !important;
}

[data-theme="dark"] details {
  color: #d1d5db !important;
}

[data-theme="dark"] details .bg-white {
  background-color: #2d2d2d !important;
}

/* Headings in colored boxes */
[data-theme="dark"] .bg-blue-50 h2,
[data-theme="dark"] .bg-blue-50 p,
[data-theme="dark"] .bg-blue-50 .text-gray-700 {
  color: #bfdbfe !important;
}

[data-theme="dark"] .bg-blue-50 .text-gray-800 {
  color: #bfdbfe !important;
}

[data-theme="dark"] .bg-red-50 h2,
[data-theme="dark"] .bg-red-50 p,
[data-theme="dark"] .bg-red-50 .text-gray-700,
[data-theme="dark"] .bg-red-50 .text-gray-800 {
  color: #fecaca !important;
}

[data-theme="dark"] .bg-red-50 ul li {
  color: #fecaca !important;
}

[data-theme="dark"] .bg-red-50 .text-red-600,
[data-theme="dark"] .bg-red-50 .text-red-700 {
  color: #fecaca !important;
}

[data-theme="dark"] .bg-white .text-gray-700,
[data-theme="dark"] .bg-white .text-gray-800 {
  color: #d1d5db !important;
}

/* Red text variants for warnings */
[data-theme="dark"] .text-red-600 {
  color: #fca5a5 !important;
}

[data-theme="dark"] .text-red-700 {
  color: #fecaca !important;
}

/* Final catch-all for any remaining gray text */
[data-theme="dark"] * {
  scrollbar-color: #4b5563 #1a1a1a;
}

[data-theme="dark"] ::-webkit-scrollbar {
  background-color: #1a1a1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #4b5563;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}