/* Mode sombre "naturel" pour les pages historiques (contrairement a
   index.html qui a deja son propre theme sombre via des variables CSS dans
   design.css). Ancienne version : un filtre invert()+hue-rotate() sur toute
   la page. Ca rendait tout illisible ou "bizarre" (rouge->rose, vert->
   magenta...) car cette transformation ne restaure pas fidelement les
   teintes d'origine. Nouvelle approche : pas de filtre du tout — on
   redefinit directement en CSS normal les variables de couleur que la
   plupart de ces pages partagent (meme gabarit de depart), + quelques
   filets de securite generiques (body, tableaux, formulaires) pour les
   pages qui n'utilisent pas ces variables. Les couleurs de marque
   (teal/vert) et les couleurs de statut (rouge/orange/vert/bleu) restent
   des vraies couleurs choisies a la main, pas des teintes recalculees. */

html[data-theme="dark"] {
  color-scheme: dark;
}

/* ---- 1) Variables CSS partagees par la plupart des pages ---- */
html[data-theme="dark"] {
  /* Fonds */
  --bg: #0b1220;
  --background-color: #0b1220;
  --bg-body: #0b1220;
  --bg-light: #0b1220;
  --bg-color: #0b1220;
  --body-bg: #0b1220;
  --background-main: #0b1220;
  --bg-soft: #0b1220;
  --list-background: #0b1220;
  --light-bg: #0b1220;

  --card: #141b2d;
  --card-bg: #141b2d;
  --white: #141b2d;
  --light: #141b2d;
  --footer-bg: #141b2d;
  --glass-bg: #141b2d;

  /* Texte */
  --text-color: #f1f5f9;
  --text-main: #f1f5f9;
  --text-primary: #f1f5f9;
  --text-dark: #f1f5f9;
  --text: #f1f5f9;
  --active-text: #f1f5f9;
  --text-color-ar: #f1f5f9;

  --text-muted: #cbd5e1;
  --text-secondary: #cbd5e1;
  --text-light: #cbd5e1;
  --text-soft: #cbd5e1;
  --icon-color: #e2e8f0;

  /* Bordures / survol */
  --border: rgba(255, 255, 255, .12);
  --border-color: rgba(255, 255, 255, .12);
  --border-light: rgba(255, 255, 255, .12);
  --footer-border: rgba(255, 255, 255, .12);
  --card-border: rgba(255, 255, 255, .12);
  --hover-color: rgba(255, 255, 255, .06);
  --zone-background: rgba(255, 255, 255, .05);
  --zone-background1: rgba(255, 255, 255, .05);
  --active-bg: rgba(255, 255, 255, .08);

  /* Ombres (attenuees sur fond sombre) */
  --shadow: 0 4px 16px -6px rgba(0, 0, 0, .5);
  --shadow-color: rgba(0, 0, 0, .5);
  --card-shadow: 0 4px 16px -6px rgba(0, 0, 0, .5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, .55);

  /* Statuts (gardees vives, juste choisies pour bien ressortir sur fond sombre) */
  --danger: #f87171;
  --danger-color: #f87171;
  --danger-light: #f87171;
  --diff-color: #f87171;
  --success: #34d399;
  --success-color: #34d399;
  --warning: #fbbf24;
  --warning-color: #fbbf24;
  --info: #60a5fa;
}

/* ---- 2) Filets de securite generiques pour les pages qui n'utilisent pas
   ces variables (couleurs codees en dur) ---- */
html[data-theme="dark"] body {
  background-color: #0b1220 !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modall-content,
html[data-theme="dark"] .modall-header,
html[data-theme="dark"] .modall-body,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .stats-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .stats-container,
html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .filters-container,
html[data-theme="dark"] .filters-form,
html[data-theme="dark"] .main-container,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .graph-container,
html[data-theme="dark"] .search-container,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .cards-container,
html[data-theme="dark"] .top-bar,
html[data-theme="dark"] .modern-filter-bar,
html[data-theme="dark"] .modern-table,
html[data-theme="dark"] .modern-card,
html[data-theme="dark"] .unified-toolbar,
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .toolbar,
html[data-theme="dark"] .pagination-container {
  background: #141b2d !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}

/* Les cartes stat-card/stats-card codent souvent leur propre couleur de
   texte sur les enfants (h4, p, small), pensee pour le fond clair d'origine
   (gris fonce, teal fonce...) : trop peu contrastee sur le fond sombre
   applique ci-dessus au conteneur. */
html[data-theme="dark"] .stat-card h4,
html[data-theme="dark"] .stats-card h4 {
  color: #5eead4 !important;
}
html[data-theme="dark"] .stat-card p,
html[data-theme="dark"] .stats-card p {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .stat-card p small,
html[data-theme="dark"] .stats-card p small {
  color: #cbd5e1 !important;
}

/* .stat-box (charges.php, recettes.php) : label et valeur peints en inline
   style="color:#64748b"/"color:var(--accent)", plus specifique que
   n'importe quelle classe donc illisible une fois le fond assombri. */
html[data-theme="dark"] .stat-box [style*="color:#64748b"],
html[data-theme="dark"] .stat-box [style*="color: #64748b"] {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .stat-box .value,
html[data-theme="dark"] .stat-box [style*="color:var(--accent)"],
html[data-theme="dark"] .stat-box [style*="color: var(--accent)"] {
  color: #5eead4 !important;
}

/* Onglets inactifs (fiche animal, rebouclage, subventions) : fond blanc
   fixe, seul l'onglet actif (degrade de marque) est deja adapte. */
html[data-theme="dark"] .tab-button:not(.active) {
  background: #141b2d !important;
  background-image: none !important;
  color: #f1f5f9 !important;
}

/* Bootstrap 5.3 gere ses tableaux via des variables CSS (--bs-table-bg,
   --bs-table-color...) qui restent en clair tant qu'on n'active pas
   data-bs-theme="dark" (attribut propre a Bootstrap, differet du data-theme
   de l'appli). Sans ca, chaque <td> repeint un fond blanc par-dessus la
   ligne, meme quand tr/table sont deja sombres. */
html[data-theme="dark"] .table {
  --bs-table-bg: transparent !important;
  --bs-table-color: #f1f5f9 !important;
  --bs-table-striped-bg: rgba(255, 255, 255, .03) !important;
  --bs-table-striped-color: #f1f5f9 !important;
  --bs-table-active-bg: rgba(255, 255, 255, .08) !important;
  --bs-table-active-color: #f1f5f9 !important;
  --bs-table-hover-bg: rgba(255, 255, 255, .07) !important;
  --bs-table-hover-color: #f1f5f9 !important;
  --bs-table-border-color: rgba(255, 255, 255, .12) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: rgba(255, 255, 255, .1) !important;
  color: #f1f5f9;
}

/* Entetes de tableau (th) : on garde un fond blanc bien contraste plutot que
   d'assombrir la ligne d'entete, avec le texte force en noir pour rester
   lisible dans les deux themes. Prioritaire sur la regle generique th/td
   ci-dessus et sur les eventuelles surcharges par page grace a !important. */
html[data-theme="dark"] th,
html[data-theme="dark"] thead th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .modern-table th {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #d1d5db !important;
}
html[data-theme="dark"] th * {
  color: #000000 !important;
}

/* Beaucoup de tableaux peignent la couleur alternee directement sur <tr>
   (pas sur le conteneur), ce qui redevenait blanc au-dessus du fond fonce
   du conteneur. On garde un leger zebrage en sombre. */
html[data-theme="dark"] tr {
  background-color: #141b2d !important;
}
html[data-theme="dark"] tr:nth-child(even) {
  background-color: #101728 !important;
}
html[data-theme="dark"] tr:nth-child(odd) {
  background-color: #141b2d !important;
}

/* Les pages "Claire" (DgClaire, VelClaire, tarClaire, etc.) codent en dur un
   survol vert menthe clair sur #mainTable, avec !important : il faut le
   meme niveau de specificite pour le regagner en sombre. */
/* Etiquettes de resultat (POS/NEG/DT, positif/negatif/douteux...) : couleurs
   sombres pensees pour un fond clair (vert/rouge/orange fonces), illisibles
   sur fond sombre. Les etats "coche" avec badge pastel (styleTar.css) sont
   plus specifiques et restent inchanges. */
html[data-theme="dark"] .l-نج {
  color: #4ade80 !important;
}
html[data-theme="dark"] .l-فش {
  color: #f87171 !important;
}
html[data-theme="dark"] .l-مشك {
  color: #fbbf24 !important;
}

/* Ligne selectionnee (case a cocher) : chaque page utilise un pastel clair
   different (bleu, vert, violet, teal) pense pour un fond blanc. On
   uniformise avec une seule teinte sombre bien visible, partout. */
html[data-theme="dark"] .alert-low-stock td {
  background-color: #3f2a1e !important;
}

html[data-theme="dark"] tr.selected,
html[data-theme="dark"] tr.selected-row,
html[data-theme="dark"] .row-selected {
  background-color: #1e3a5f !important;
  border-color: #38bdf8 !important;
}

html[data-theme="dark"] #mainTable tbody tr:hover {
  background-color: rgba(255, 255, 255, .07) !important;
}
html[data-theme="dark"] tr:hover {
  background-color: rgba(255, 255, 255, .07) !important;
}

/* Tailwind (charge via CDN sur plusieurs pages) : classes utilitaires de
   texte gris fonce, codees en dur dans le HTML (pas de variable). */
html[data-theme="dark"] [class*="text-gray-5"],
html[data-theme="dark"] [class*="text-gray-6"],
html[data-theme="dark"] [class*="text-gray-7"],
html[data-theme="dark"] [class*="text-gray-8"],
html[data-theme="dark"] [class*="text-gray-9"] {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-gray-5"],
html[data-theme="dark"] [class*="bg-gray-10"],
html[data-theme="dark"] [class*="bg-gray-20"],
html[data-theme="dark"] [class*="bg-gray-30"] {
  background-color: #141b2d !important;
}

/* jQuery DataTables : la colonne triee recoit une classe .sorting_1/2/3
   avec un fond clair fixe par defaut, par-dessus le fond deja sombre de la
   ligne. */
html[data-theme="dark"] table.dataTable tbody td.sorting_1,
html[data-theme="dark"] table.dataTable tbody td.sorting_2,
html[data-theme="dark"] table.dataTable tbody td.sorting_3 {
  background-color: rgba(255, 255, 255, .04) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: #101728 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, .15) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: #101728 !important;
  color: #f1f5f9 !important;
  border-color: rgba(255, 255, 255, .15) !important;
  color-scheme: dark;
}

/* Cases a cocher/radios : la regle generique ci-dessus leur peignait un
   fond uni qui ecrasait leur rendu natif (coche/non coche indiscernable,
   case qui parait pleine et noire). On les laisse dans leur rendu natif,
   simplement adapte au theme sombre via color-scheme. */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
  color-scheme: dark;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* Bootstrap (charge sur plusieurs pages) code ses classes utilitaires de
   texte en dur avec !important, invisibles sur fond sombre. */
html[data-theme="dark"] .text-muted {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black {
  color: #f1f5f9 !important;
}
/* .bg-light est souvent combine a .text-dark (badge "neutre" Bootstrap,
   ex: bg-light text-dark border) : sans ca, le texte passe clair (regle
   ci-dessus) sur un fond reste clair -> invisible. */
html[data-theme="dark"] .bg-light {
  background-color: #101728 !important;
  border-color: rgba(255, 255, 255, .15) !important;
}

/* Champs desactives : Bootstrap/le navigateur les grisent, quasi invisibles
   sur fond deja sombre. */
html[data-theme="dark"] input:disabled:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] input[readonly] {
  background-color: #0d1526 !important;
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

/* Textes d'aide/petits caracteres (Bootstrap .form-text, <small>) : couleur
   heritee du gris clair d'origine, trop terne sur fond sombre. */
html[data-theme="dark"] .form-text,
html[data-theme="dark"] small {
  color: #cbd5e1 !important;
}

/* Labels de formulaire generiques (souvent gris moyen code en dur, ex:
   .field label, .form-label) : trop ternes sur fond sombre. */
html[data-theme="dark"] label,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .form-label {
  color: #e2e8f0;
}

/* Boutons et badges blancs/clairs : plutot que de traquer chacun pour
   l'assombrir, on garde leur fond clair d'origine (design pense pour) et on
   force juste le texte en noir pour qu'il reste lisible dessus. Priorite
   sur les regles plus generiques ci-dessus grace aux selecteurs composes. */
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn.bg-white,
html[data-theme="dark"] .btn.bg-light,
html[data-theme="dark"] button.bg-white,
html[data-theme="dark"] button.bg-light,
html[data-theme="dark"] .badge.bg-white,
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.text-bg-light,
html[data-theme="dark"] .badge.text-bg-white,
html[data-theme="dark"] button[style*="background: white"],
html[data-theme="dark"] button[style*="background:#fff"],
html[data-theme="dark"] button[style*="background: #fff"],
html[data-theme="dark"] a[style*="background: white"],
html[data-theme="dark"] a[style*="background:#fff"],
html[data-theme="dark"] a[style*="background: #fff"],
html[data-theme="dark"] .badge[style*="background: white"],
html[data-theme="dark"] .badge[style*="background:#fff"],
html[data-theme="dark"] .badge[style*="background: #fff"],
html[data-theme="dark"] .custom-tabs .nav-link:not(.active) {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #d1d5db !important;
}
html[data-theme="dark"] .btn-light *,
html[data-theme="dark"] .btn-outline-light *,
html[data-theme="dark"] .btn.bg-white *,
html[data-theme="dark"] .btn.bg-light *,
html[data-theme="dark"] .badge.bg-white *,
html[data-theme="dark"] .badge.bg-light *,
html[data-theme="dark"] .badge.text-bg-light *,
html[data-theme="dark"] .badge.text-bg-white *,
html[data-theme="dark"] .custom-tabs .nav-link:not(.active) *,
html[data-theme="dark"] a[style*="background: white"] *,
html[data-theme="dark"] a[style*="background:#fff"] *,
html[data-theme="dark"] a[style*="background: #fff"] * {
  color: #000000 !important;
}

/* Radios de niveau d'acces (module-card) : la regle generique input/select
   plus haut peint un fond sombre uniforme sur tous les radios, effacant la
   distinction visuelle coche/non-coche. On la neutralise ici et on remplace
   par un jaune vif pour le radio selectionne. */
html[data-theme="dark"] .module-card .radio-row input[type="radio"] {
  background-color: transparent !important;
  border-color: #64748b !important;
}
html[data-theme="dark"] .module-card .radio-row input[type="radio"]:checked {
  background: radial-gradient(#facc15 0 40%, transparent 44%) !important;
  border-color: #facc15 !important;
}