/* ========================================
   VARIABLES CSS - CHARTE GRAPHIQUE
   Configuration Tailwind Override
   ======================================== */
:root {
  /* Couleurs primaires */
  --primary-color: #1dcde2;
  --primary-hover: #19b8ce;
  --premium-color: #1dcde2;
  
  /* Couleurs de succès (boutons verts) */
  --success-text: #e2e2e2;
  --success-border: #56aa2b;
  --success-bg: #65e185;
  --success-hover: #52c96f;
  
  /* Couleurs de danger (boutons rouges) */
  --danger-text: #e2e2e2;
  --danger-border: #aa2a2a;
  --danger-bg: #dc362b;
  --danger-hover: #c22f25;
  
  /* Couleurs secondaires (boutons gris) */
  --secondary-text: #e2e2e2;
  --secondary-border: #2f3440;
  --secondary-bg: #1e2227;
  --secondary-hover: #252a31;
  
  /* Nuances de gris - Nouvelle charte */
  --gray-50: #23272e;
  --gray-100: #1e2227;
  --gray-200: #e2e2e2;
  --gray-300: #787878;
  --gray-400: #787878;
  --gray-500: #787878;
  --gray-600: #787878;
  --gray-700: #1e2227;
  --gray-800: #2f3440;
  --gray-900: #1e2227;
  
  /* Couleurs supplémentaires pour compatibilité */
  --blue-50: rgba(29, 205, 226, 0.05);
  --blue-100: rgba(29, 205, 226, 0.1);
  --blue-200: rgba(29, 205, 226, 0.2);
  --blue-500: #1dcde2;
  --blue-600: #1dcde2;
  --blue-700: #19b8ce;
  --blue-800: #1598ad;
  
  --green-50: rgba(101, 225, 133, 0.05);
  --green-100: rgba(101, 225, 133, 0.1);
  --green-200: rgba(101, 225, 133, 0.2);
  --green-500: #65e185;
  --green-600: #52c96f;
  --green-800: #56aa2b;
  
  --red-50: rgba(220, 54, 43, 0.05);
  --red-100: rgba(220, 54, 43, 0.1);
  --red-200: rgba(220, 54, 43, 0.2);
  --red-500: #dc362b;
  --red-600: #dc362b;
  --red-800: #aa2a2a;
  
  --yellow-50: rgba(255, 193, 7, 0.05);
  --yellow-100: rgba(255, 193, 7, 0.1);
  --yellow-200: rgba(255, 193, 7, 0.2);
  --yellow-600: #ffc107;
  --yellow-800: #f59e0b;
  
  --purple-50: rgba(156, 39, 176, 0.05);
  --purple-100: rgba(156, 39, 176, 0.1);
  --purple-600: #9c27b0;
}

/* ========================================
   OVERRIDE TAILWIND - BACKGROUNDS
   ======================================== */
.bg-gray-50 { background-color: #23272e !important; }
.bg-gray-100 { background-color: #1e2227 !important; }
.bg-gray-200 { background-color: #e2e2e2 !important; }
.bg-gray-300 { background-color: #787878 !important; }
.bg-gray-400 { background-color: #787878 !important; }
.bg-gray-500 { background-color: #787878 !important; }
.bg-gray-600 { background-color: #787878 !important; }
.bg-gray-700 { background-color: #1e2227 !important; }
.bg-gray-800 { background-color: #2f3440 !important; }
.bg-gray-900 { background-color: #1e2227 !important; }

.bg-blue-50 { background-color: var(--blue-50) !important; }
.bg-blue-100 { background-color: var(--blue-100) !important; }
.bg-blue-200 { background-color: var(--blue-200) !important; }
.bg-blue-600 { background-color: var(--blue-600) !important; }
.bg-blue-700 { background-color: var(--blue-700) !important; }

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

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

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

.bg-purple-50 { background-color: var(--purple-50) !important; }
.bg-purple-100 { background-color: var(--purple-100) !important; }

.bg-white { background-color: #1e2227 !important; }

/* ========================================
   OVERRIDE TAILWIND - TEXTES
   ======================================== */
.text-gray-50 { color: #e2e2e2 !important; }
.text-gray-100 { color: #e2e2e2 !important; }
.text-gray-200 { color: #e2e2e2 !important; }
.text-gray-300 { color: #787878 !important; }
.text-gray-400 { color: #787878 !important; }
.text-gray-500 { color: #787878 !important; }
.text-gray-600 { color: #787878 !important; }
.text-gray-700 { color: #e2e2e2 !important; }
.text-gray-800 { color: #e2e2e2 !important; }
.text-gray-900 { color: #e2e2e2 !important; }

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

.text-green-500 { color: var(--green-500) !important; }
.text-green-600 { color: var(--green-600) !important; }
.text-green-800 { color: var(--green-800) !important; }

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

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

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

.text-white { color: #ffffff !important; }
.text-black { color: #e2e2e2 !important; }

/* ========================================
   OVERRIDE TAILWIND - BORDURES
   ======================================== */
.border-gray-50 { border-color: #2f3440 !important; }
.border-gray-100 { border-color: #2f3440 !important; }
.border-gray-200 { border-color: #787878 !important; }
.border-gray-300 { border-color: #787878 !important; }
.border-gray-400 { border-color: #787878 !important; }
.border-gray-500 { border-color: #787878 !important; }
.border-gray-600 { border-color: #787878 !important; }
.border-gray-700 { border-color: #2f3440 !important; }
.border-gray-800 { border-color: #2f3440 !important; }
.border-gray-900 { border-color: #2f3440 !important; }

.border-blue-200 { border-color: var(--blue-200) !important; }
.border-green-200 { border-color: var(--green-200) !important; }
.border-red-200 { border-color: var(--red-200) !important; }
.border-yellow-200 { border-color: var(--yellow-200) !important; }

/* ========================================
   OVERRIDE TAILWIND - HOVER STATES
   ======================================== */
.hover\:bg-blue-100:hover { background-color: var(--blue-100) !important; }
.hover\:bg-blue-700:hover { background-color: var(--blue-700) !important; }
.hover\:bg-gray-50:hover { background-color: #23272e !important; }
.hover\:bg-gray-100:hover { background-color: #1e2227 !important; }
.hover\:bg-gray-700:hover { background-color: #1e2227 !important; }
.hover\:bg-green-100:hover { background-color: var(--green-100) !important; }
.hover\:bg-purple-100:hover { background-color: var(--purple-100) !important; }

.hover\:text-blue-600:hover { color: var(--blue-600) !important; }
.hover\:text-blue-800:hover { color: var(--blue-800) !important; }
.hover\:text-gray-600:hover { color: #787878 !important; }

/* ========================================
   BOUTONS PERSONNALISÉS
   ======================================== */
.btn-primary-custom {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary-color) !important;
}

.btn-primary-custom:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}

/* Override des boutons Tailwind existants */
.bg-blue-600 { background-color: var(--primary-color) !important; }
.hover\:bg-blue-700:hover { background-color: var(--primary-hover) !important; }

.bg-green-600 { background-color: var(--success-bg) !important; }
.hover\:bg-green-700:hover { background-color: var(--success-hover) !important; }

.bg-red-600 { background-color: var(--danger-bg) !important; }
.hover\:bg-red-700:hover { background-color: var(--danger-hover) !important; }

.bg-gray-600 { background-color: var(--secondary-bg) !important; }
.hover\:bg-gray-700:hover { background-color: var(--secondary-hover) !important; }

/* ========================================
   BADGES/PILLS
   ======================================== */
.bg-green-100.text-green-800 {
  background-color: var(--green-100) !important;
  color: var(--green-800) !important;
}

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

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

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

/* ========================================
   FOCUS STATES
   ======================================== */
.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--primary-color) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--primary-color) !important;
}

/* ========================================
   INPUTS & FORM ELEMENTS
   ======================================== */
input,
textarea,
select {
  background-color: #2f3440 !important;
  color: #e2e2e2 !important;
  border-color: #787878 !important;
}

input::placeholder,
textarea::placeholder {
  color: #787878 !important;
}

input:focus,
textarea:focus,
select:focus {
  background-color: #2f3440 !important;
  color: #e2e2e2 !important;
  border-color: var(--primary-color) !important;
}

/* Inputs spécifiques avec classes */
.border-gray-300 {
  border-color: #787878 !important;
}

/* Code inputs (2FA) */
.code-input {
  background-color: #2f3440 !important;
  color: #e2e2e2 !important;
  border-color: #787878 !important;
}

.code-input:focus {
  border-color: var(--primary-color) !important;
}

/* ========================================
   MODALS
   ======================================== */
.modal-content {
  background-color: #1e2227 !important;
  color: #e2e2e2 !important;
}

.modal-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important;
}