/* ═══════════════════════════════════════════════════════════════════════════
   Click Soft — MODE SOMBRE : surcharges de cohérence (<html data-theme="dark">)
   Chargé APRÈS window-overrides.css. Corrige les zones restées « blanches » :
   DataTables (fond/lignes/textes), navigation par période, cartes Tailwind,
   modales, menus déroulants, pickers, pagination, totaux…
   Toutes les règles sont préfixées :root[data-theme="dark"] → aucun effet en clair.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] {
  --dk-bg:        #0A1631;
  --dk-surface:   #10203F;
  --dk-surface-2: #16294D;
  --dk-surface-3: #1C335C;
  --dk-border:    rgba(255,255,255,.08);
  --dk-border-2:  rgba(255,255,255,.14);
  --dk-text:      #E7EDF8;
  --dk-text-soft: #A9B8D1;
  --dk-text-mute: #7487A6;
  --dk-hover:     rgba(61,127,232,.09);
  --dk-accent:    #7FB3FF;
  color-scheme: dark;
}

/* ── 1. DataTables ─────────────────────────────────────────────────────── */
:root[data-theme="dark"] .dataTables_wrapper {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
  color: var(--dk-text) !important;
}
/* Barre d'outils : « Afficher … entrées », recherche, info */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length label,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter label,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper > .dataTables_info {
  color: var(--dk-text-soft) !important;
}
:root[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
:root[data-theme="dark"] .dataTables_wrapper input[type="search"],
:root[data-theme="dark"] .dataTables_wrapper input[type="text"] {
  background-color: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-2) !important;
}
:root[data-theme="dark"] .dataTables_wrapper input::placeholder { color: var(--dk-text-mute) !important; }

/* En-têtes */
:root[data-theme="dark"] .dataTables_wrapper table.dataTable thead th,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable thead td,
:root[data-theme="dark"] table.dataTable thead th,
:root[data-theme="dark"] table.dataTable thead td {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text-soft) !important;
  border-bottom: 1px solid var(--dk-border-2) !important;
}

/* Corps : fond, alternance, survol */
:root[data-theme="dark"] .dataTables_wrapper table.dataTable,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody {
  background: transparent !important;
}
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody td,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody th {
  color: var(--dk-text) !important;
  border-color: var(--dk-border) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr.even,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.stripe tbody tr.even,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.display tbody tr.even {
  background: var(--dk-surface) !important;
}
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:nth-child(even),
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr.odd,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.stripe tbody tr.odd,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.display tbody tr.odd {
  background: #13254A !important;
}
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr:hover,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.hover tbody tr:hover,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.display tbody tr:hover,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.display tbody tr.even:hover,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable.display tbody tr.odd:hover {
  background: var(--dk-hover) !important;
}
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr.selected,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr.selected td {
  background: rgba(61,127,232,.18) !important;
}
/* « Aucune donnée disponible » */
:root[data-theme="dark"] .dataTables_wrapper td.dataTables_empty,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_empty {
  color: var(--dk-text-soft) !important;
  background: transparent !important;
}
/* Pieds de tableau / lignes de total */
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tfoot th,
:root[data-theme="dark"] .dataTables_wrapper table.dataTable tfoot td,
:root[data-theme="dark"] table tfoot tr,
:root[data-theme="dark"] table tfoot td,
:root[data-theme="dark"] .footer-total,
:root[data-theme="dark"] tr.bg-gray, :root[data-theme="dark"] td.bg-gray {
  background: var(--dk-surface-2) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-border-2) !important;
}
/* Barre du bas : pagination + info */
:root[data-theme="dark"] .dataTables_wrapper > .dataTables_paginate,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
  background: transparent !important;
  border-color: var(--dk-border) !important;
}
:root[data-theme="dark"] .dataTables_wrapper > .dataTables_info { background: transparent !important; }
:root[data-theme="dark"] .dataTables_wrapper .pagination .page-link,
:root[data-theme="dark"] .pagination .page-link,
:root[data-theme="dark"] .dataTables_paginate .paginate_button {
  background: transparent !important;
  color: var(--dk-text-soft) !important;
  border-color: var(--dk-border) !important;
}
:root[data-theme="dark"] .dataTables_paginate .paginate_button.current,
:root[data-theme="dark"] .pagination .active .page-link,
:root[data-theme="dark"] .pagination > .active > a {
  background: #2F74E0 !important; color: #fff !important; border-color: #2F74E0 !important;
}
:root[data-theme="dark"] .dataTables_paginate .paginate_button:hover,
:root[data-theme="dark"] .pagination .page-link:hover { background: var(--dk-hover) !important; color: #fff !important; }
:root[data-theme="dark"] .dataTables_processing {
  background: rgba(16,32,63,.94) !important;
  color: var(--dk-text) !important;
  border: 1px solid var(--dk-border-2) !important;
}
:root[data-theme="dark"] .dataTables_scrollBody,
:root[data-theme="dark"] .dataTables_scrollHead,
:root[data-theme="dark"] .table-responsive { background: transparent !important; border-color: var(--dk-border) !important; }

/* ── 2. Filtre par période Mois/Année (toutes les pages : Ventes, Achats, POS, Dépenses…) ──
   Chaque page embarque sa propre copie du filtre (#pnf, #pnf-qt, #pnf-po, #pnf-dr…) avec des
   IDs/classes préfixés différemment. On cible donc par motifs d'attribut, sans dépendre d'une
   classe commune : racine = élément #pnf* dont un enfant direct a un id finissant par « -top ». */
:root[data-theme="dark"] [id^="pnf"]:has(> [id$="-top"]) {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
:root[data-theme="dark"] [id^="pnf"] [id$="-top"] {
  background: transparent !important;
  border-bottom-color: var(--dk-border) !important;
}
:root[data-theme="dark"] [id^="pnf"] [id$="-bar"] { background: rgba(255,255,255,.025) !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-mode-label"],
:root[data-theme="dark"] [id^="pnf"] [id$="-period-val"] { color: #E7EDF8 !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-range-txt"],
:root[data-theme="dark"] [id^="pnf"] [id$="-back-btn"],
:root[data-theme="dark"] [id^="pnf"] [id$="-back"] { color: var(--dk-accent) !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-back-btn"]:hover,
:root[data-theme="dark"] [id^="pnf"] [id$="-back"]:hover { color: #A9CBFF !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-sep"] { background: var(--dk-border-2) !important; }

/* Flèches précédent / suivant (rondes) */
:root[data-theme="dark"] [id^="pnf"] [class*="-nav"],
:root[data-theme="dark"] [id^="pnf"] [class*="-arrow"],
:root[data-theme="dark"] [id^="pnf"] .pf-nav,
:root[data-theme="dark"] [id^="pnf"] .pf-arr {
  background: transparent !important;
  border-color: var(--dk-border-2) !important;
  color: var(--dk-text-soft) !important;
}
:root[data-theme="dark"] [id^="pnf"] [class*="-nav"]:hover,
:root[data-theme="dark"] [id^="pnf"] [class*="-arrow"]:hover,
:root[data-theme="dark"] [id^="pnf"] .pf-nav:hover,
:root[data-theme="dark"] [id^="pnf"] .pf-arr:hover {
  background: var(--dk-hover) !important;
  border-color: rgba(127,179,255,.55) !important;
  color: var(--dk-accent) !important;
}

/* Bascule Mois / Année */
:root[data-theme="dark"] [id^="pnf"] [id$="-toggle"] {
  background: var(--dk-surface-2) !important;
  border-color: var(--dk-border-2) !important;
}
:root[data-theme="dark"] [id^="pnf"] [id$="-toggle"] button,
:root[data-theme="dark"] [id^="pnf"] [class*="-tb"] {
  background: transparent !important;
  color: var(--dk-text-soft) !important;
}
:root[data-theme="dark"] [id^="pnf"] [id$="-toggle"] button.on,
:root[data-theme="dark"] [id^="pnf"] [class*="-tb"].on {
  background: var(--dk-surface-3) !important;
  color: var(--dk-accent) !important;
}
:root[data-theme="dark"] [id^="pnf"] [class*="-tb"].on::after { background: var(--dk-accent) !important; }

/* Bouton calendrier (variante composant) */
:root[data-theme="dark"] [id^="pnf"] [id$="-cal-btn"] { color: var(--dk-text-soft) !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-cal-btn"]:hover,
:root[data-theme="dark"] [id^="pnf"] [id$="-cal-btn"].active { background: var(--dk-hover) !important; color: var(--dk-accent) !important; }

/* Années + mois */
:root[data-theme="dark"] [id^="pnf"] [class*="-year-sep"],
:root[data-theme="dark"] [id^="pnf"] .pf-ysep { color: var(--dk-text-mute) !important; }
:root[data-theme="dark"] [id^="pnf"] [class*="-year-sep"][class*="-yactive"],
:root[data-theme="dark"] [id^="pnf"] .pf-ysep.on { color: var(--dk-accent) !important; }
:root[data-theme="dark"] [id^="pnf"] [id$="-items"] button,
:root[data-theme="dark"] [id^="pnf"] [class*="-item"] {
  background: transparent !important;
  color: var(--dk-text-soft) !important;
  border-color: transparent !important;
}
:root[data-theme="dark"] [id^="pnf"] [class*="-item"]:hover {
  background: var(--dk-hover) !important;
  color: var(--dk-accent) !important;
  border-color: rgba(127,179,255,.35) !important;
}
/* Mois courant (orange) */
:root[data-theme="dark"] [id^="pnf"] [class*="-item"][class*="-cur"] {
  background: rgba(251,146,60,.12) !important;
  color: #fb923c !important;
  border-color: rgba(251,146,60,.35) !important;
}
/* Mois sélectionné (bleu) — prioritaire sur « courant » */
:root[data-theme="dark"] [id^="pnf"] [class*="-item"][class*="-sel"],
:root[data-theme="dark"] [id^="pnf"] [class*="-item"][class*="-sel"][class*="-cur"] {
  background: rgba(61,127,232,.16) !important;
  color: var(--dk-accent) !important;
  border-color: rgba(127,179,255,.55) !important;
}
:root[data-theme="dark"] [id^="pnf"] [class*="-item"][class*="-sel"]::after { background: var(--dk-accent) !important; }

/* ── 3. Cartes / panneaux (BS + utilitaires Tailwind préfixés tw-) ──────── */
:root[data-theme="dark"] .box,
:root[data-theme="dark"] .box-solid,
:root[data-theme="dark"] .box-primary,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .well {
  background: var(--dk-surface) !important;
  border-color: var(--dk-border) !important;
  color: var(--dk-text) !important;
}
:root[data-theme="dark"] .box-body,
:root[data-theme="dark"] .box-footer,
:root[data-theme="dark"] .panel-body,
:root[data-theme="dark"] .card-body { background: transparent !important; color: var(--dk-text) !important; }
:root[data-theme="dark"] .box-footer, :root[data-theme="dark"] .panel-footer { border-top-color: var(--dk-border) !important; }

:root[data-theme="dark"] .tw-bg-white { background-color: var(--dk-surface) !important; }
:root[data-theme="dark"] .tw-bg-gray-50,
:root[data-theme="dark"] .tw-bg-gray-100,
:root[data-theme="dark"] .\!tw-bg-white { background-color: var(--dk-surface-2) !important; }
:root[data-theme="dark"] .tw-text-gray-900,
:root[data-theme="dark"] .tw-text-gray-800,
:root[data-theme="dark"] .tw-text-gray-700 { color: #E7EDF8 !important; }
:root[data-theme="dark"] .tw-text-gray-600,
:root[data-theme="dark"] .tw-text-gray-500 { color: var(--dk-text-soft) !important; }
:root[data-theme="dark"] .tw-ring-gray-200,
:root[data-theme="dark"] .tw-ring-gray-100,
:root[data-theme="dark"] .\!tw-ring-gray-200 { --tw-ring-color: rgba(255,255,255,.09) !important; }
:root[data-theme="dark"] .tw-border-gray-200,
:root[data-theme="dark"] .tw-border-gray-100,
:root[data-theme="dark"] .tw-border-gray-300 { border-color: var(--dk-border) !important; }
:root[data-theme="dark"] .hover\:tw-bg-gray-100:hover,
:root[data-theme="dark"] .hover\:tw-bg-gray-50:hover { background-color: var(--dk-hover) !important; }
:root[data-theme="dark"] .hover\:tw-text-gray-900:hover { color: #fff !important; }
:root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .help-block, :root[data-theme="dark"] small { color: var(--dk-text-soft) !important; }
:root[data-theme="dark"] hr { border-color: var(--dk-border) !important; }

/* ── 4. Modales, menus déroulants, popovers ───────────────────────────── */
:root[data-theme="dark"] .modal-content {
  background: var(--dk-surface) !important; color: var(--dk-text) !important;
  border: 1px solid var(--dk-border-2) !important;
}
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer { background: transparent !important; border-color: var(--dk-border) !important; }
:root[data-theme="dark"] .modal-title { color: #E7EDF8 !important; }
:root[data-theme="dark"] .close { color: #fff !important; text-shadow: none !important; opacity: .7; }
:root[data-theme="dark"] .dropdown-menu {
  background: var(--dk-surface-2) !important; border-color: var(--dk-border-2) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
}
:root[data-theme="dark"] .dropdown-menu > li > a,
:root[data-theme="dark"] .dropdown-menu a { color: var(--dk-text) !important; }
:root[data-theme="dark"] .dropdown-menu > li > a:hover,
:root[data-theme="dark"] .dropdown-menu > li > a:focus { background: var(--dk-hover) !important; color: #fff !important; }
:root[data-theme="dark"] .dropdown-menu .divider { background: var(--dk-border) !important; }
:root[data-theme="dark"] .popover { background: var(--dk-surface-2) !important; border-color: var(--dk-border-2) !important; color: var(--dk-text) !important; }
:root[data-theme="dark"] .popover-title { background: var(--dk-surface-3) !important; border-color: var(--dk-border) !important; color: #fff !important; }
:root[data-theme="dark"] .list-group-item { background: var(--dk-surface) !important; border-color: var(--dk-border) !important; color: var(--dk-text) !important; }

/* ── 5. Formulaires & pickers ─────────────────────────────────────────── */
:root[data-theme="dark"] .input-group-addon,
:root[data-theme="dark"] .btn-default {
  background: var(--dk-surface-2) !important; border-color: var(--dk-border-2) !important; color: var(--dk-text) !important;
}
:root[data-theme="dark"] .btn-default:hover { background: var(--dk-surface-3) !important; color: #fff !important; }
:root[data-theme="dark"] .daterangepicker,
:root[data-theme="dark"] .datepicker-dropdown {
  background: var(--dk-surface-2) !important; border-color: var(--dk-border-2) !important; color: var(--dk-text) !important;
}
:root[data-theme="dark"] .daterangepicker .calendar-table,
:root[data-theme="dark"] .daterangepicker td, :root[data-theme="dark"] .daterangepicker th,
:root[data-theme="dark"] .daterangepicker .ranges li {
  background: transparent !important; color: var(--dk-text) !important; border-color: transparent !important;
}
:root[data-theme="dark"] .daterangepicker td.off, :root[data-theme="dark"] .daterangepicker td.disabled { color: var(--dk-text-mute) !important; }
:root[data-theme="dark"] .daterangepicker td.in-range { background: rgba(61,127,232,.18) !important; }
:root[data-theme="dark"] .daterangepicker td.active, :root[data-theme="dark"] .daterangepicker td.active:hover,
:root[data-theme="dark"] .daterangepicker .ranges li.active { background: #2F74E0 !important; color: #fff !important; }
:root[data-theme="dark"] .daterangepicker td.available:hover, :root[data-theme="dark"] .daterangepicker .ranges li:hover { background: var(--dk-hover) !important; }
:root[data-theme="dark"] .daterangepicker .drp-buttons, :root[data-theme="dark"] .daterangepicker .ranges { border-color: var(--dk-border) !important; }
:root[data-theme="dark"] .daterangepicker select { background: var(--dk-surface-3) !important; color: var(--dk-text) !important; border-color: var(--dk-border-2) !important; }
:root[data-theme="dark"] .daterangepicker:before, :root[data-theme="dark"] .daterangepicker:after { border-bottom-color: var(--dk-surface-2) !important; }
:root[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] { background: var(--dk-surface-3) !important; }
:root[data-theme="dark"] .select2-search--dropdown .select2-search__field { background: var(--dk-surface-3) !important; color: var(--dk-text) !important; border-color: var(--dk-border-2) !important; }

/* ── 6. Tableaux simples (sans DataTables) ────────────────────────────── */
:root[data-theme="dark"] .table,
:root[data-theme="dark"] .table > tbody > tr > td,
:root[data-theme="dark"] .table > thead > tr > th { border-color: var(--dk-border) !important; }
:root[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background: #13254A !important; }
:root[data-theme="dark"] .table-bordered, :root[data-theme="dark"] .table-bordered > tbody > tr > td,
:root[data-theme="dark"] .table-bordered > thead > tr > th, :root[data-theme="dark"] .table-bordered > tfoot > tr > td { border-color: var(--dk-border-2) !important; }

/* ── 7. Traits résiduels clairs (bordures haut/bas des barres info & pagination) ── */
:root[data-theme="dark"] .dataTables_wrapper .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper > .dataTables_info,
:root[data-theme="dark"] .dataTables_wrapper .dataTables_paginate,
:root[data-theme="dark"] .dataTables_wrapper > .dataTables_paginate,
:root[data-theme="dark"] .dataTables_wrapper .row {
  border-top-color: var(--dk-border) !important;
  border-bottom-color: var(--dk-border) !important;
  border-left-color: var(--dk-border) !important;
  border-right-color: var(--dk-border) !important;
}