/*
 * dark.css — Surcharges dark mode pour les classes Tailwind codées en dur
 * (bg-white, bg-gray-*, border-gray-*, text-gray-* qui n'utilisent pas
 *  les variables CSS sémantiques de l'application)
 *
 * Ce fichier complète output.css et header.css.
 */

/* ══════════════════════════════════════════════════════════════
   1. FORMULAIRES — inputs, selects, textareas (global)
   ══════════════════════════════════════════════════════════════ */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark select,
.dark textarea {
  background-color: hsl(var(--input)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  color-scheme: dark;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: hsl(var(--muted-foreground)) !important;
}
/* Highlight au focus */
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  outline-color: hsl(var(--ring));
}

/* ══════════════════════════════════════════════════════════════
   2. MODALS / OFFCANVAS / DIALOGS
      Tout ce qui est dans [aria-modal="true"] ou [role="dialog"]
   ══════════════════════════════════════════════════════════════ */

/* --- Panneaux blancs (fond principal) --- */
.dark [aria-modal="true"] .bg-white,
.dark [role="dialog"] .bg-white {
  background-color: hsl(var(--card)) !important;
}

/* --- Fonds gris clair (corps, section info) --- */
.dark [aria-modal="true"] .bg-gray-50,
.dark [role="dialog"] .bg-gray-50 {
  background-color: hsl(var(--background)) !important;
}

.dark [aria-modal="true"] .bg-gray-100,
.dark [role="dialog"] .bg-gray-100 {
  background-color: hsl(var(--muted)) !important;
}

/* --- Textes sombres figés --- */
.dark [aria-modal="true"] .text-gray-900,
.dark [role="dialog"] .text-gray-900,
.dark [aria-modal="true"] .text-gray-800,
.dark [role="dialog"] .text-gray-800,
.dark [aria-modal="true"] .text-gray-700,
.dark [role="dialog"] .text-gray-700 {
  color: hsl(var(--foreground)) !important;
}

/* --- Bordures figées --- */
.dark [aria-modal="true"] .border-gray-300,
.dark [role="dialog"] .border-gray-300,
.dark [aria-modal="true"] .border-gray-200,
.dark [role="dialog"] .border-gray-200,
.dark [aria-modal="true"] .border-gray-100,
.dark [role="dialog"] .border-gray-100 {
  border-color: hsl(var(--border)) !important;
}

/* --- Divider (border-b, border-t seuls dans les listes) --- */
.dark [aria-modal="true"] .border-b,
.dark [role="dialog"] .border-b,
.dark [aria-modal="true"] .border-t,
.dark [role="dialog"] .border-t {
  border-color: hsl(var(--border)) !important;
}

/* --- Labels --- */
.dark [aria-modal="true"] label,
.dark [role="dialog"] label {
  color: hsl(var(--foreground));
}

/* --- Boutons secondaires "Annuler / Fermer" (bg-white + border) --- */
.dark [aria-modal="true"] button.bg-white,
.dark [role="dialog"] button.bg-white,
.dark [aria-modal="true"] button.border-gray-300,
.dark [role="dialog"] button.border-gray-300 {
  background-color: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}

/* --- Code / mono dans les dialogs --- */
.dark [aria-modal="true"] code,
.dark [role="dialog"] code {
  background-color: hsl(var(--muted));
  color: hsl(var(--foreground));
}

/* ══════════════════════════════════════════════════════════════
   3. BARRES DE FILTRE ET BOUTONS D'ACTION SUR LES PAGES
   ══════════════════════════════════════════════════════════════ */

/* Boutons outline blanc sur les pages (Importer, Exporter…) */
.dark button.bg-white,
.dark a.bg-white {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
/* sauf s'ils ont une couleur de texte spécifique déjà (blue-700, green-700…) */
.dark button.text-blue-700.bg-white,
.dark a.text-blue-700.bg-white  {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--primary)) !important;
}
.dark button.text-green-700.bg-white,
.dark a.text-green-700.bg-white {
  background-color: hsl(var(--card)) !important;
}

/* ══════════════════════════════════════════════════════════════
   4. ÉLÉMENTS DE PAGE AVEC bg-gray-* et text-gray-* codés en dur
      (tableaux, listes, labels de filtre…)
   ══════════════════════════════════════════════════════════════ */

/* Tables */
.dark table .text-gray-700,
.dark table .text-gray-800,
.dark table .text-gray-900 {
  color: hsl(var(--foreground)) !important;
}

/* Labels dans la page (hors dialog) */
.dark label.text-gray-800,
.dark label.text-gray-700 {
  color: hsl(var(--foreground)) !important;
}

/* Paragraphes / spans avec texte gris figé */
.dark p.text-gray-700,
.dark span.text-gray-700,
.dark p.text-gray-800,
.dark span.text-gray-800 {
  color: hsl(var(--foreground)) !important;
}

/* ══════════════════════════════════════════════════════════════
   5. CHECKBOXES ET TOGGLES
   ══════════════════════════════════════════════════════════════ */
.dark input[type="checkbox"],
.dark input[type="radio"] {
  color-scheme: dark;
  accent-color: hsl(var(--primary));
}

/* Container label avec checkbox (style card) */
.dark label.bg-white.border-gray-200,
.dark label.border-2.border-gray-200 {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ══════════════════════════════════════════════════════════════
   6. BADGES DE FILTRE (rôle, bg-blue-50 etc.)
      On les laisse colorés mais on adapte le fond sombre
   ══════════════════════════════════════════════════════════════ */
.dark .bg-blue-50   { background-color: rgba(59,130,246,.12) !important; }
.dark .bg-green-50  { background-color: rgba(34,197,94,.12)  !important; }
.dark .bg-red-50    { background-color: rgba(239,68,68,.12)  !important; }
.dark .bg-amber-50  { background-color: rgba(245,158,11,.12) !important; }
.dark .bg-orange-50 { background-color: rgba(249,115,22,.12) !important; }
.dark .bg-purple-50 { background-color: rgba(168,85,247,.12) !important; }
.dark .bg-gray-100  { background-color: hsl(var(--muted))    !important; }

/* Textes sur ces fonds clairs → on garde la couleur */
.dark .bg-blue-50   .text-blue-700,
.dark .bg-blue-50.text-blue-700   { color: #93c5fd !important; }
.dark .bg-green-50  .text-green-700,
.dark .bg-green-50.text-green-700 { color: #86efac !important; }
.dark .bg-red-50    .text-red-700,
.dark .bg-red-50.text-red-700     { color: #fca5a5 !important; }
.dark .bg-amber-50  .text-amber-700,
.dark .bg-amber-50.text-amber-700 { color: #fcd34d !important; }
.dark .bg-orange-50 .text-orange-700,
.dark .bg-orange-50.text-orange-700 { color: #fdba74 !important; }
.dark .bg-orange-50 .text-orange-800,
.dark .bg-orange-50.text-orange-800 { color: #fdba74 !important; }
.dark .bg-purple-50 .text-purple-700 { color: #d8b4fe !important; }
.dark .bg-gray-100  .text-gray-600   { color: hsl(var(--muted-foreground)) !important; }

/* Badges statut (bg-*-100) */
.dark .bg-red-100    { background-color: rgba(239,68,68,.15)  !important; }
.dark .bg-green-100  { background-color: rgba(34,197,94,.15)  !important; }
.dark .bg-blue-100   { background-color: rgba(59,130,246,.15) !important; }
.dark .bg-amber-100  { background-color: rgba(245,158,11,.15) !important; }
.dark .bg-purple-100 { background-color: rgba(168,85,247,.15) !important; }

/* ══════════════════════════════════════════════════════════════
   7. VARIANTES SLATE (badges neutres, boutons tertiaires)
      Non couverts par les overrides gray — ajoutés ici comme filet
   ══════════════════════════════════════════════════════════════ */
.dark .bg-slate-100  { background-color: hsl(var(--muted))            !important; }
.dark .bg-slate-50   { background-color: hsl(var(--card))             !important; }
.dark .text-slate-600,
.dark .text-slate-700 { color: hsl(var(--muted-foreground))           !important; }
.dark .border-slate-300 { border-color: hsl(var(--border))            !important; }
.dark .hover\:bg-slate-100:hover { background-color: hsl(var(--accent)) !important; }

/* ══════════════════════════════════════════════════════════════
   8. HOVER STATES AVEC bg-gray-50 / bg-amber-50 sur boutons
   ══════════════════════════════════════════════════════════════ */
.dark .hover\:bg-gray-50:hover  { background-color: hsl(var(--muted)) !important; }
.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11,.1) !important; }
.dark .hover\:bg-blue-50:hover  { background-color: rgba(59,130,246,.1) !important; }
.dark .hover\:bg-green-50:hover { background-color: rgba(34,197,94,.1)  !important; }
.dark .hover\:bg-red-50:hover   { background-color: rgba(239,68,68,.1)  !important; }

/* ══════════════════════════════════════════════════════════════
   9. ÉTATS D'ERREUR / ALERTES COLORÉES
   ══════════════════════════════════════════════════════════════ */

/* Inputs en état d'erreur — spécificité identique à section 1, vient après */
.dark input.border-red-500:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  border-color: rgba(239,68,68,.7) !important;
  background-color: rgba(239,68,68,.08) !important;
}

/* Bordures d'alertes colorées (banners, cards d'erreur/info/succès) */
.dark .border-red-200,
.dark .border-red-300   { border-color: rgba(239,68,68,.3)   !important; }
.dark .border-red-400   { border-color: rgba(239,68,68,.45)  !important; }
.dark .border-green-200,
.dark .border-green-300 { border-color: rgba(34,197,94,.3)   !important; }
.dark .border-amber-200,
.dark .border-amber-300 { border-color: rgba(245,158,11,.3)  !important; }
.dark .border-blue-200,
.dark .border-blue-100  { border-color: rgba(59,130,246,.3)  !important; }
.dark .border-orange-200,
.dark .border-orange-300 { border-color: rgba(249,115,22,.3) !important; }

/* Textes *-800 sur fonds colorés clairs (text-*-700 couvert section 6) */
.dark .bg-red-50    .text-red-800,
.dark .bg-red-50.text-red-800     { color: #fca5a5 !important; }
.dark .bg-green-50  .text-green-800,
.dark .bg-green-50.text-green-800 { color: #86efac !important; }
.dark .bg-blue-50   .text-blue-700,
.dark .bg-blue-50.text-blue-700   { color: #93c5fd !important; }
.dark .bg-blue-50   .text-blue-800,
.dark .bg-blue-50.text-blue-800   { color: #93c5fd !important; }
.dark .bg-amber-50  .text-amber-800,
.dark .bg-amber-50.text-amber-800 { color: #fcd34d !important; }