/* Base styles for light and dark mode */
:root {
  /* Light mode colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --accent-primary: #3b82f6;
  --accent-secondary: #1d4ed8;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --shadow: rgba(0, 0, 0, 0.1);
}

.dark {
  /* Dark mode colors */
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --border-primary: #374151;
  --border-secondary: #4b5563;
  --accent-primary: #60a5fa;
  --accent-secondary: #3b82f6;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;
  --shadow: rgba(0, 0, 0, 0.3);
}

/* Smooth transition for theme changes */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom utility classes for theme-aware styling */
.bg-theme-primary {
  background-color: var(--bg-primary);
}

.bg-theme-secondary {
  background-color: var(--bg-secondary);
}

.bg-theme-tertiary {
  background-color: var(--bg-tertiary);
}

.text-theme-primary {
  color: var(--text-primary);
}

.text-theme-secondary {
  color: var(--text-secondary);
}

.text-theme-tertiary {
  color: var(--text-tertiary);
}

.border-theme-primary {
  border-color: var(--border-primary);
}

.border-theme-secondary {
  border-color: var(--border-secondary);
}

/* Override Tailwind classes for dark mode support */
.dark .bg-white {
  background-color: var(--bg-primary) !important;
}

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

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

.dark .bg-gray-200 {
  background-color: var(--border-secondary) !important;
}

.dark .text-gray-900 {
  color: var(--text-primary) !important;
}

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

.dark .text-gray-700 {
  color: var(--text-secondary) !important;
}

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

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

.dark .text-gray-400 {
  color: var(--text-tertiary) !important;
}

.dark .border-gray-200 {
  border-color: var(--border-primary) !important;
}

.dark .border-gray-300 {
  border-color: var(--border-secondary) !important;
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-primary) !important;
}

/* Form inputs dark mode */
.dark input, .dark textarea, .dark select {
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
}

.dark input:focus, .dark textarea:focus, .dark select:focus {
  background-color: var(--bg-primary) !important;
  border-color: var(--accent-primary) !important;
}

/* Shadow adjustments for dark mode */
.dark .shadow {
  box-shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px 0 var(--shadow) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px var(--shadow), 0 4px 6px -2px var(--shadow) !important;
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px var(--shadow), 0 10px 10px -5px var(--shadow) !important;
}

/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
}

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

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

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

/* Ensure modals and overlays work well in dark mode */
.dark .bg-black.bg-opacity-50 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Dashboard specific dark mode improvements */
.dark .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.25) !important;
}

.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.35) !important;
}

.dark .text-indigo-600 {
  color: #a5b4fc !important;
  font-weight: 700 !important;
}

.dark .text-indigo-700 {
  color: #c7d2fe !important;
  font-weight: 600 !important;
}

.dark .hover\:bg-indigo-200:hover {
  background-color: rgba(99, 102, 241, 0.45) !important;
}

/* Ensure today row is clearly visible in dark mode */
.dark tr.bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.3) !important;
  border: 2px solid rgba(129, 140, 248, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4) !important;
}

/* Make today text much more visible in dark mode */
.dark .text-indigo-600.font-bold {
  color: #c7d2fe !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* Holiday rows in dark mode */
.dark .bg-rose-50 {
  background-color: rgba(244, 63, 94, 0.15) !important;
}

.dark .text-rose-700 {
  color: #fb7185 !important;
}

/* Weekend rows in dark mode */
.dark tr.bg-gray-50 {
  background-color: var(--bg-tertiary) !important;
}

/* Day off rows styling */
.day-off-row {
  background-color: #f8f9fa !important;
  color: #6c757d !important;
}

.dark .day-off-row {
  background-color: rgba(156, 163, 175, 0.1) !important;
  color: #9ca3af !important;
}

/* Fully disabled rows (both AM/PM off) */
.fully-disabled-row {
  background-color: #f1f3f4 !important;
  color: #8e8e93 !important;
}

.dark .fully-disabled-row {
  background-color: rgba(156, 163, 175, 0.15) !important;
  color: #8e8e93 !important;
}

/* Make date text more visible in dark mode */
.dark .text-gray-900 {
  color: #f9fafb !important;
}

/* Day off and disabled date text */
.day-off-row .text-gray-900,
.fully-disabled-row .text-gray-900 {
  color: #9ca3af !important;
}

.dark .day-off-row .text-gray-900,
.dark .fully-disabled-row .text-gray-900 {
  color: #6b7280 !important;
}

/* Force light theme for PDF preview regardless of dark mode */
.pdf-preview-light,
.pdf-preview-light *,
.light,
.light * {
  color: black !important;
  background-color: initial;
  border-color: initial;
}

/* Override for buttons that should keep white text */
.light .text-white,
.pdf-preview-light .text-white {
  color: white !important;
}

/* Override for icons inside white text buttons */
.light .text-white svg,
.pdf-preview-light .text-white svg {
  color: white !important;
  stroke: white !important;
}

.pdf-preview-light .bg-white,
.light .bg-white {
  background-color: white !important;
}

.pdf-preview-light .bg-gray-50,
.light .bg-gray-50 {
  background-color: #f9fafb !important;
}

.pdf-preview-light .bg-gray-100,
.light .bg-gray-100 {
  background-color: #f3f4f6 !important;
}

.pdf-preview-light .bg-gray-200,
.light .bg-gray-200 {
  background-color: #e5e7eb !important;
}

.pdf-preview-light .text-gray-900,
.light .text-gray-900 {
  color: #111827 !important;
}

.pdf-preview-light .text-gray-800,
.light .text-gray-800 {
  color: #1f2937 !important;
}

.pdf-preview-light .text-gray-700,
.light .text-gray-700 {
  color: #374151 !important;
}

.pdf-preview-light .text-gray-600,
.light .text-gray-600 {
  color: #4b5563 !important;
}

.pdf-preview-light .text-gray-500,
.light .text-gray-500 {
  color: #6b7280 !important;
}

.pdf-preview-light .text-gray-400,
.light .text-gray-400 {
  color: #9ca3af !important;
}

.pdf-preview-light .border-gray-200,
.light .border-gray-200 {
  border-color: #e5e7eb !important;
}

.pdf-preview-light .border-gray-300,
.light .border-gray-300 {
  border-color: #d1d5db !important;
}

.pdf-preview-light .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.light .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e5e7eb !important;
}

/* Specifically for PDF preview container */
.pdf-preview-container {
  background: white !important;
  color: black !important;
}

.pdf-preview-container * {
  color: black !important;
}

.pdf-preview-container .bg-white {
  background-color: white !important;
}

.pdf-preview-container .text-gray-900 {
  color: #111827 !important;
}

/* Print styles - always use light colors */
@media print {
  * {
    background-color: white !important;
    color: black !important;
    border-color: #e5e7eb !important;
  }

  /* Ensure PDF generation always uses light theme */
  .dark * {
    background-color: white !important;
    color: black !important;
    border-color: #e5e7eb !important;
  }
}