/* Variables de couleurs pour le thème clair (par défaut) */
:root {
  /* Couleurs de fond */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f4f6;
  --bg-tertiary: #e5e7eb;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafb;
  --bg-modal: #ffffff;
  --bg-input: #ffffff;
  --bg-button-secondary: #f3f4f6;
  --bg-tooltip: #374151;
  --bg-header: #ffffff;
  --bg-header-dropdown: #ffffff;
  --bg-selected: #eef2ff;
  
  /* Couleurs de texte */
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-disabled: #d1d5db;
  --text-inverse: #ffffff;
  --text-link: #4f46e5;
  --text-link-hover: #4338ca;
  
  /* Couleurs de bordure */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-focus: #a5b4fc;
  --border-card: #e5e7eb;
  --border-modal: #e5e7eb;
  
  /* Couleurs d'état */
  --success-light: #d1fae5;
  --success-medium: #34d399;
  --success-dark: #047857;
  --warning-light: #fef3c7;
  --warning-medium: #fbbf24;
  --warning-dark: #d97706;
  --error-light: #fee2e2;
  --error-medium: #f87171;
  --error-dark: #dc2626;
  --info-light: #dbeafe;
  --info-medium: #60a5fa;
  --info-dark: #2563eb;
  
  /* Couleurs d'actions */
  --primary-light: #eef2ff;
  --primary-medium: #6366f1;
  --primary-dark: #4f46e5;
  --primary-hover: #4338ca;
  --primary-active: #3730a3;
  
  /* Ombres */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Variables de couleurs pour le thème sombre */
[data-theme="dark"] {
  /* Couleurs de fond */
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --bg-card: #1f2937;
  --bg-card-hover: #374151;
  --bg-modal: #1f2937;
  --bg-input: #374151;
  --bg-button-secondary: #374151;
  --bg-tooltip: #d1d5db;
  --bg-header: #1f2937;
  --bg-header-dropdown: #1f2937;
  --bg-selected: #312e81;
  
  /* Couleurs de texte */
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-tertiary: #d1d5db;
  --text-muted: #9ca3af;
  --text-disabled: #6b7280;
  --text-inverse: #111827;
  --text-link: #818cf8;
  --text-link-hover: #a5b4fc;
  
  /* Couleurs de bordure */
  --border-primary: #374151;
  --border-secondary: #4b5563;
  --border-focus: #6366f1;
  --border-card: #374151;
  --border-modal: #4b5563;
  
  /* Couleurs d'état - Ajustées pour le mode sombre */
  --success-light: #065f46;
  --success-medium: #34d399;
  --success-dark: #d1fae5;
  --warning-light: #92400e;
  --warning-medium: #fbbf24;
  --warning-dark: #fef3c7;
  --error-light: #991b1b;
  --error-medium: #f87171;
  --error-dark: #fee2e2;
  --info-light: #1e40af;
  --info-medium: #60a5fa;
  --info-dark: #dbeafe;
  
  /* Couleurs d'actions - Ajustées pour le mode sombre */
  --primary-light: #4338ca;
  --primary-medium: #6366f1;
  --primary-dark: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-active: #c7d2fe;
  
  /* Ombres - Plus prononcées pour le mode sombre */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Base */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
  color-scheme: dark;
}

/* Header and Navigation */
header {
  background-color: var(--bg-header);
  border-bottom-color: var(--border-primary);
}

nav a {
  color: var(--text-secondary);
}

nav a:hover {
  color: var(--text-primary);
}

.dropdown-menu {
  background-color: var(--bg-header-dropdown);
  border-color: var(--border-primary);
}

/* Container Backgrounds */
.bg-white, 
.bg-white.shadow, 
.bg-white.rounded-lg, 
.bg-white.overflow-hidden {
  background-color: var(--bg-card);
  border-color: var(--border-card);
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-200 {
  background-color: var(--bg-secondary);
}

.hover\:bg-gray-50:hover {
  background-color: var(--bg-card-hover);
}

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

/* Modals and Dialogs */
div[id$="Modal"] {
  background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent overlay */
}

div[id$="Modal"] > div {
  background-color: var(--bg-modal);
  border-color: var(--border-modal);
}

.modal-header {
  background-color: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
}

.modal-footer {
  background-color: var(--bg-tertiary);
  border-top-color: var(--border-primary);
}

/* Forms and Inputs */
input, 
select, 
textarea {
  background-color: var(--bg-input);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

input::placeholder, 
textarea::placeholder {
  color: var(--text-muted);
}

input:focus, 
select:focus, 
textarea:focus {
  border-color: var(--border-focus);
  ring-color: var(--border-focus);
}

/* Buttons */
.bg-indigo-600 {
  background-color: var(--primary-medium);
}

.hover\:bg-indigo-700:hover {
  background-color: var(--primary-hover);
}

.bg-gray-600,
.bg-gray-700 {
  background-color: var(--bg-button-secondary);
  color: var(--text-primary);
}

.bg-green-600,
.bg-red-600,
.bg-yellow-600,
.bg-blue-600 {
  /* Les boutons d'action conservent leurs couleurs pour la lisibilité */
  color: white;
}

/* Text Colors */
.text-gray-900 {
  color: var(--text-primary);
}

.text-gray-800, 
.text-gray-700 {
  color: var(--text-secondary);
}

.text-gray-600, 
.text-gray-500 {
  color: var(--text-tertiary);
}

.text-gray-400, 
.text-gray-300 {
  color: var(--text-muted);
}

.text-indigo-600 {
  color: var(--text-link);
}

.hover\:text-indigo-900:hover {
  color: var(--text-link-hover);
}

/* Tables */
thead {
  background-color: var(--bg-secondary);
}

tr:hover {
  background-color: var(--bg-card-hover);
}

th {
  color: var(--text-secondary);
}

td {
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* Cards and Shadows */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow,
.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-xl {
  box-shadow: var(--shadow-xl);
}

/* État spécifiques */
.bg-green-100 {
  background-color: var(--success-light);
}

.text-green-800 {
  color: var(--success-dark);
}

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

.text-yellow-800 {
  color: var(--warning-dark);
}

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

.text-red-800 {
  color: var(--error-dark);
}

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

.text-blue-800 {
  color: var(--info-dark);
}

.bg-indigo-100 {
  background-color: var(--primary-light);
}

.text-indigo-800 {
  color: var(--primary-dark);
}

/* Borders */
.border,
.border-t,
.border-b,
.border-l,
.border-r,
.divide-y > * + * {
  border-color: var(--border-primary);
}

/* Misc Elements */
.badge {
  background-color: var(--bg-secondary);
  color: var(--text-secondary);
}

code, pre {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 5px;
}

/* Footer */
footer {
  background-color: var(--bg-secondary);
  border-top-color: var(--border-primary);
}

/* Améliorations spécifiques pour les composants */

/* Menu déroulant */
.dropdown-content {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
}

/* Notifications */
.notification {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-lg);
}

/* Progress bar */
.progress-bar {
  background-color: var(--bg-tertiary);
}

.progress-value {
  background-color: var(--primary-medium);
}

/* Tabs */
.tab-active {
  background-color: var(--bg-selected);
  color: var(--text-primary);
  border-color: var(--primary-medium);
}

/* Tooltip */
.tooltip {
  background-color: var(--bg-tooltip);
  color: var(--text-inverse);
}

/* Liens de la barre de navigation */
.nav-link {
  color: var(--text-secondary);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-medium);
}