/**
 * Theme CSS - Modern 2025 Design System
 * CSS Custom Properties for Light and Dark modes
 */

/* ================================
   CSS Custom Properties - Light Mode (Default)
   ================================ */
:root {
  /* Background colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-hover: #f1f5f9;
  --bg-active: #e2e8f0;
  
  /* Surface colors (cards, panels) */
  --surface-primary: #ffffff;
  --surface-secondary: #f8fafc;
  --surface-elevated: #ffffff;
  --surface-overlay: rgba(0, 0, 0, 0.5);
  
  /* Text colors */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  
  /* Border colors */
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e1;
  --border-focus: #3b82f6;
  
  /* Brand/Primary colors */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  
  /* Secondary/Accent colors */
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6;
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;
  
  /* Semantic colors - Success */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  
  /* Semantic colors - Warning */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  
  /* Semantic colors - Error/Danger */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  
  /* Semantic colors - Info */
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  
  /* Sidebar specific */
  --sidebar-bg: #1e293b;
  --sidebar-border: #334155;
  --sidebar-text: #cbd5e1;
  --sidebar-text-muted: #64748b;
  --sidebar-hover: #334155;
  --sidebar-active: #3b82f6;
  
  /* Input/Form colors */
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #111827;
  --input-placeholder: #9ca3af;
  --input-focus-ring: rgba(59, 130, 246, 0.5);
  
  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ================================
   CSS Custom Properties - Dark Mode
   ================================ */
.dark {
  /* Background colors */
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-elevated: #1e293b;
  --bg-hover: #334155;
  --bg-active: #475569;
  
  /* Surface colors (cards, panels) */
  --surface-primary: #1e293b;
  --surface-secondary: #0f172a;
  --surface-elevated: #334155;
  --surface-overlay: rgba(0, 0, 0, 0.7);
  
  /* Text colors */
  --text-primary: #f8fafc;
  --text-secondary: #e2e8f0;
  --text-tertiary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-inverse: #0f172a;
  
  /* Border colors */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-focus: #60a5fa;
  
  /* Sidebar specific - darker in dark mode */
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-text: #e2e8f0;
  --sidebar-text-muted: #94a3b8;
  --sidebar-hover: #1e293b;
  --sidebar-active: #3b82f6;
  
  /* Input/Form colors */
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-text: #f8fafc;
  --input-placeholder: #94a3b8;
  --input-focus-ring: rgba(96, 165, 250, 0.5);
  
  /* Shadow - more subtle in dark mode */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

/* ================================
   Base Element Styling with CSS Variables
   ================================ */
body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* ================================
   Form Input Theming
   ================================ */
.theme-input {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.theme-input::placeholder {
  color: var(--input-placeholder);
}

.theme-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
  outline: none;
}

/* ================================
   Card/Surface Theming
   ================================ */
.theme-card {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.theme-card-elevated {
  background-color: var(--surface-elevated);
  box-shadow: var(--shadow-md);
}

/* ================================
   Text Utility Classes
   ================================ */
.theme-text-primary {
  color: var(--text-primary);
}

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

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

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

/* ================================
   Background Utility Classes
   ================================ */
.theme-bg-primary {
  background-color: var(--bg-primary);
}

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

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

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

/* ================================
   Border Utility Classes
   ================================ */
.theme-border {
  border-color: var(--border-primary);
}

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

/* ================================
   Button Theming
   ================================ */
.theme-btn-primary {
  background-color: var(--primary-600);
  color: var(--text-inverse);
  border: none;
  transition: background-color 0.15s ease;
}

.theme-btn-primary:hover {
  background-color: var(--primary-700);
}

.theme-btn-primary:focus {
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.theme-btn-secondary {
  background-color: var(--secondary-600);
  color: var(--text-inverse);
  border: none;
  transition: background-color 0.15s ease;
}

.theme-btn-secondary:hover {
  background-color: var(--secondary-700);
}

.theme-btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  transition: all 0.15s ease;
}

.theme-btn-ghost:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* ================================
   Status Badge Theming
   ================================ */
.theme-badge-success {
  background-color: var(--success-100);
  color: var(--success-700);
}

.dark .theme-badge-success {
  background-color: rgba(34, 197, 94, 0.2);
  color: var(--success-500);
}

.theme-badge-warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.dark .theme-badge-warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--warning-500);
}

.theme-badge-error {
  background-color: var(--error-100);
  color: var(--error-700);
}

.dark .theme-badge-error {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--error-500);
}

.theme-badge-info {
  background-color: var(--info-100);
  color: var(--info-700);
}

.dark .theme-badge-info {
  background-color: rgba(59, 130, 246, 0.2);
  color: var(--info-500);
}

/* ================================
   Table Theming
   ================================ */
.theme-table {
  background-color: var(--surface-primary);
}

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

.theme-table th {
  color: var(--text-secondary);
  font-weight: 600;
}

.theme-table td {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-primary);
}

.theme-table tbody tr:hover {
  background-color: var(--bg-hover);
}

/* ================================
   Dropdown Theming
   ================================ */
.theme-dropdown {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

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

.theme-dropdown-item:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* ================================
   Divider Theming
   ================================ */
.theme-divider {
  background-color: var(--border-primary);
}

/* ================================
   Icon Colors
   ================================ */
.theme-icon {
  color: var(--text-tertiary);
}

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

/* ================================
   Focus Ring Utility
   ================================ */
.theme-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

/* ================================
   Scrollbar Theming
   ================================ */
.theme-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

.theme-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.theme-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.theme-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--text-muted);
  border-radius: 4px;
}

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

/* ================================
   Flatpickr Dark Mode Override
   ================================ */
.dark .flatpickr-calendar {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg);
}

.dark .flatpickr-months .flatpickr-month,
.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
.dark .flatpickr-weekdays,
.dark span.flatpickr-weekday {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.dark .flatpickr-day {
  color: var(--text-primary);
}

.dark .flatpickr-day:hover {
  background: var(--bg-hover);
  border-color: var(--bg-hover);
}

.dark .flatpickr-day.selected,
.dark .flatpickr-day.startRange,
.dark .flatpickr-day.endRange {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.dark .flatpickr-day.inRange {
  background: var(--primary-900);
  border-color: var(--primary-900);
  color: var(--text-primary);
}

.dark .flatpickr-day.today {
  border-color: var(--primary-500);
}

.dark .flatpickr-time input,
.dark .flatpickr-time .flatpickr-am-pm {
  background: var(--input-bg);
  color: var(--text-primary);
}

.dark .flatpickr-months .flatpickr-prev-month,
.dark .flatpickr-months .flatpickr-next-month {
  fill: var(--text-primary);
}

.dark .flatpickr-months .flatpickr-prev-month:hover,
.dark .flatpickr-months .flatpickr-next-month:hover {
  fill: var(--primary-500);
}

.dark .numInputWrapper span {
  border-color: var(--border-primary);
}

.dark .numInputWrapper span:hover {
  background: var(--bg-hover);
}

.dark .numInputWrapper span svg path {
  fill: var(--text-muted);
}

.dark .flatpickr-time {
  background: var(--surface-primary);
  border-top: 1px solid var(--border-primary);
}

.dark .flatpickr-time input:hover,
.dark .flatpickr-time .flatpickr-am-pm:hover,
.dark .flatpickr-time input:focus,
.dark .flatpickr-time .flatpickr-am-pm:focus {
  background: var(--bg-hover);
}

.dark .flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--text-primary);
}

.dark .flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--text-primary);
}

.dark .flatpickr-time .flatpickr-time-separator {
  color: var(--text-primary);
}