/* =============================================================================
   Ceertia — onspanel back-office · MODE SOMBRE
   -----------------------------------------------------------------------------
   Couche ADDITIVE. Le thème clair reste intact ; ce fichier se charge en
   DERNIER (après theme.css / skins / custom.css) et ne s'active que sous
   `html.dark` (la bascule pose `class="dark"` + `data-theme="dark"` sur <html>,
   persistance localStorage clé « ceertia-theme », anti-flash dans head.blade).

   POURQUOI autant de `!important` ?
   Chaque widget dashboard scope ses tokens (--navy, --gray, --line, --cyan…) et
   ses couleurs EN DUR sur son conteneur `#{{ $widgetId }}` (id ALÉATOIRE). Un
   sélecteur `#id .classe` (spécificité 1,1,0) bat tout sélecteur `html.dark .x`
   (0,2,1). On ne peut pas viser l'id aléatoire ; on bat donc la cascade par :
     1) re-déclaration des tokens via le PRÉFIXE d'id (`[id^="usage-widget-"]`…)
        en `!important` → recolore tout ce qui passe par var() ;
     2) surcharge `!important` des hex EN DUR, par classe.
   Le chrome partagé (header, body, Bootstrap, tableaux) n'est PAS id-scopé :
   `html.dark .classe` suffit, `!important` ajouté seulement là où theme.css
   pousse une règle tenace.

   PALETTE SOMBRE (hex de référence) — voir DARK-MODE-SPEC.md
     --app-bg   #0e151d   fond de page
     --card     #18222e   surface carte / widget
     --card-2   #1f2b38   surface interne (inputs, puces, tuiles)
     --inset    #131c26   pieds de carte / puits
     --line     #2a3744   bordures
     --line-2   #243140   filets de lignes / séparateurs discrets
     --ink      #e4e9ef   texte courant
     --title    #e9eef3   texte fort (remplace l'usage « navy » en texte)
     --muted    #93a1b0   texte atténué (remplace « gray »)
     --muted-2  #6b7888   texte plus faible
     --cyan     #16b5d4   marque (inchangé)
     --cyan-h   #3ec6e0   survol cyan (éclairci pour le sombre)
     --green    #1f9d6b   (inchangé)
     piste anneaux/donuts  #2c3a48
   ============================================================================= */

html.dark {
  --d-app-bg: #0e151d;
  --d-card:   #18222e;
  --d-card-2: #1f2b38;
  --d-inset:  #131c26;
  --d-line:   #2a3744;
  --d-line-2: #243140;
  --d-ink:    #e4e9ef;
  --d-title:  #e9eef3;
  --d-muted:  #93a1b0;
  --d-muted-2:#6b7888;
  --d-cyan:   #16b5d4;
  --d-cyan-h: #3ec6e0;
  --d-track:  #2c3a48;
  color-scheme: dark;
}

/* =============================================================================
   0 · BOUTON DE BASCULE (toutes thèmes) — placé dans .header-right, avant la
   cloche. Le markup vit dans header-right.blade.php. Styles de base + sombre.
   ============================================================================= */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: 1px solid #e1e6ec; background: transparent; color: #8a96a3;
  display: grid; place-items: center; cursor: pointer; padding: 0; margin-right: 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { background: #f2f5f8; color: #1c3c5a; }
.theme-toggle .ic-sun { display: none; }
html.dark .theme-toggle { border-color: var(--d-line); color: #aeb9c5; }
html.dark .theme-toggle:hover { background: #223445; color: #eaf0f5; }
html.dark .theme-toggle .ic-sun { display: block; }
html.dark .theme-toggle .ic-moon { display: none; }

/* =============================================================================
   1 · SHELL — fond de page, header, contenu, sidebar, footer
   ============================================================================= */
html.dark, html.dark body { background: var(--d-app-bg) !important; }
html.dark body { color: var(--d-ink); }

/* Topbar (.header) */
html.dark .header { background: var(--d-card) !important; border-bottom: 1px solid var(--d-line); }
html.dark .header .app-header-title { color: var(--d-title); }
html.dark .header .app-header-title a { color: inherit; }
/* l'accent cyan sous le titre + le data-toggle restent tels quels */
html.dark .header .app-header-sidebar-right-toggle { color: #8a96a3; }
html.dark .header .app-header-sidebar-right-toggle:hover { color: var(--d-cyan-h); }

/* Userbox (nom + rôle) */
html.dark .header .header-right .userbox .profile-info .name { color: var(--d-title); }
html.dark .header .header-right .userbox .profile-info .role { color: var(--d-muted); }
html.dark .userbox .custom-caret,
html.dark .userbox .profile-info + i { color: var(--d-muted); }

/* Pastille IA en ligne — garde le vert sémantique, fond translucide */
html.dark .ia-status.is-online,
html.dark .ia-status { background: rgba(31,157,107,.16); color: #57c79a; border-color: rgba(31,157,107,.32); }

/* Sidebar gauche (déjà foncée en clair sur AdminPorto — on l'harmonise) */
html.dark .sidebar-left { background: var(--d-inset) !important; border-right: 1px solid var(--d-line); }
html.dark .sidebar-left .sidebar-header .sidebar-toggle { background-color: #0f1822; }
html.dark ul.nav-main li > a { color: #c4d0dc; }
html.dark ul.nav-main li > a:hover { background: #1c2733; color: #eaf2f6; }
html.dark ul.nav-main > li.nav-active > a,
html.dark ul.nav-main li.nav-expanded > a { background: rgba(22,181,212,.14); color: #eaf6fb; }
html.dark ul.nav-main li i,
html.dark ul.nav-main li svg { color: #aeb9c5; }
html.dark ul.nav-main li.nav-active > a i,
html.dark ul.nav-main li.nav-active > a svg,
html.dark ul.nav-main li.nav-expanded > a i,
html.dark ul.nav-main li.nav-expanded > a svg { color: var(--d-cyan-h); }

/* Contenu + footer */
html.dark .content-body { background: transparent; }
html.dark .footer, html.dark #footer { background: var(--d-card); border-top: 1px solid var(--d-line); color: var(--d-muted); }
html.dark .footer a, html.dark #footer a { color: var(--d-cyan-h); }

/* Barre de défilement (WebKit) */
html.dark ::-webkit-scrollbar { width: 12px; height: 12px; }
html.dark ::-webkit-scrollbar-thumb { background: #2f3e4d; border-radius: 6px; border: 3px solid var(--d-app-bg); }
html.dark ::-webkit-scrollbar-track { background: transparent; }

/* =============================================================================
   2 · BOOTSTRAP / ADMINPORTO — cartes, onglets, formulaires, select2,
   dropdowns, modales, badges, pagination, datatables
   ============================================================================= */
/* Cartes (dashboard grid + .card / .card-modern) */
html.dark .card,
html.dark .card-modern,
html.dark section.card,
html.dark .dashboard-widget-item,
html.dark .cw-card,
html.dark .dz-card {
  background: var(--d-card) !important;
  border-color: var(--d-line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.28) !important;
  color: var(--d-ink);
}
html.dark .card-header { background: transparent; border-bottom-color: var(--d-line); }
html.dark .card-title,
html.dark .card-header h2,
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5 { color: var(--d-title); }
html.dark .text-color-dark,
html.dark .text-dark { color: var(--d-ink) !important; }
html.dark .text-muted, html.dark .text-3, html.dark .small { color: var(--d-muted); }

/* En-tête de widget dashboard (.cw-head / titres / outils) */
html.dark .cw-title { color: var(--d-title); }
html.dark .cw-sub { color: var(--d-muted); }
html.dark .cw-ico { color: var(--d-muted); }
html.dark .cw-ico:hover { background: rgba(22,181,212,.16); color: var(--d-cyan-h); }
html.dark .cw-foot { background: var(--d-inset); border-top-color: var(--d-line); color: var(--d-muted); }
html.dark .cw-validity-pill { background: var(--d-card-2); color: var(--d-muted); }

/* Onglets (.nav-tabs) */
html.dark .nav-tabs { border-bottom-color: var(--d-line); }
html.dark .nav-tabs .nav-link { color: var(--d-muted); }
html.dark .nav-tabs .nav-link:hover { border-color: transparent transparent var(--d-line); color: var(--d-ink); }
html.dark .nav-tabs .nav-link.active {
  background: var(--d-card); color: var(--d-title);
  border-color: var(--d-line) var(--d-line) var(--d-card);
}

/* Champs de formulaire */
html.dark .form-control,
html.dark .custom-select,
html.dark input[type="text"], html.dark input[type="date"],
html.dark input[type="search"], html.dark input[type="number"],
html.dark input[type="email"], html.dark textarea, html.dark select {
  background: var(--d-card-2) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html.dark .form-control::placeholder { color: var(--d-muted-2); }
html.dark .form-control:focus {
  background: var(--d-card-2) !important; border-color: var(--d-cyan) !important;
  box-shadow: 0 0 0 .15rem rgba(22,181,212,.25) !important; color: var(--d-ink) !important;
}
html.dark label { color: var(--d-muted); }
html.dark .input-group-text,
html.dark .input-group-addon {
  background: var(--d-inset) !important; border-color: var(--d-line) !important; color: var(--d-muted) !important;
}
html.dark hr, html.dark .separator { border-color: var(--d-line); background: var(--d-line); }

/* Select2 */
html.dark .select2-container--default .select2-selection,
html.dark .select2-selection--multiple,
html.dark .select2-selection--single {
  background: var(--d-card-2) !important; border-color: var(--d-line) !important;
}
html.dark .select2-container--default .select2-selection__rendered,
html.dark .select2-selection__choice { color: var(--d-ink) !important; }
html.dark .select2-selection__choice { background: #25323f !important; border-color: var(--d-line) !important; }
html.dark .select2-dropdown { background: var(--d-card) !important; border-color: var(--d-line) !important; }
html.dark .select2-results__option { color: var(--d-ink); }
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--d-cyan) !important; color: #08222b; }
html.dark .select2-search__field { background: var(--d-card-2) !important; color: var(--d-ink) !important; border-color: var(--d-line) !important; }

/* Dropdowns */
html.dark .dropdown-menu { background: var(--d-card) !important; border-color: var(--d-line) !important; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
html.dark .dropdown-item, html.dark .dropdown-menu a { color: var(--d-ink) !important; }
html.dark .dropdown-item:hover, html.dark .dropdown-menu a:hover { background: #243140 !important; color: #fff !important; }
html.dark .dropdown-menu .divider, html.dark .dropdown-divider { background: var(--d-line); border-color: var(--d-line); }

/* Modales (bsModal) */
html.dark .modal-content { background: var(--d-card); border-color: var(--d-line); color: var(--d-ink); }
html.dark .modal-header, html.dark .modal-footer { border-color: var(--d-line); }
html.dark .modal-title { color: var(--d-title); }
html.dark .close { color: var(--d-ink); text-shadow: none; opacity: .8; }

/* Boutons — on garde les remplissages de marque ; on adapte les variantes claires */
html.dark .btn-outline-light { color: var(--d-ink); border-color: var(--d-line); }
html.dark .btn-outline-light:hover { background: #243140; color: #fff; }
html.dark .btn-light { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }
html.dark .btn-light:hover { background: #243140; color: #fff; }
html.dark .btn-default { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }

/* Badges */
html.dark .badge-info { background: rgba(22,181,212,.2); color: #6fd6ec; }
html.dark .badge-success { background: rgba(31,157,107,.2); color: #57c79a; }

/* Pagination */
html.dark .pagination > li > a,
html.dark .pagination > li > span { background: var(--d-card-2); border-color: var(--d-line); color: var(--d-ink); }
html.dark .pagination > li > a:hover { background: #243140; }
html.dark .pagination > .active > a,
html.dark .pagination > .active > span { background: var(--d-cyan); border-color: var(--d-cyan); color: #08222b; }

/* DataTables */
html.dark .dataTables_wrapper,
html.dark .dataTables_info, html.dark .dataTables_length, html.dark .dataTables_filter { color: var(--d-muted); }
html.dark table.dataTable, html.dark table.display { color: var(--d-ink); }
html.dark table.dataTable thead th { color: var(--d-muted); border-color: var(--d-line); }
html.dark table.dataTable tbody td { border-color: var(--d-line-2); }
html.dark .dataTables_paginate .paginate_button { color: var(--d-ink) !important; }

/* =============================================================================
   3 · TABLEAUX DE LISTING (composant partagé + skin « Mes Dossiers »)
   Les ids de listing sont des str_random() SANS préfixe → on vise les classes
   globales du composant, en `!important` (bat `#id .x` non-important).
   NB : l'en-tête du skin Mes Dossiers force `color:#9aa6b2 !important` derrière
   un id — non surchargeable ; #9aa6b2 reste lisible sur fond sombre (assumé).
   ============================================================================= */
html.dark table.table { color: var(--d-ink); }
html.dark table.table tbody td { color: var(--d-ink) !important; border-bottom-color: var(--d-line-2) !important; border-top-color: var(--d-line-2) !important; }
html.dark table.table thead th { border-bottom-color: var(--d-line) !important; }
html.dark table.table tbody tr.listing-row:hover,
html.dark table.table tbody tr:hover { background: #1c2733 !important; }
html.dark table.table.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }
html.dark .listing-row.warning,
html.dark tr.warning > td { background: rgba(211,150,42,.16) !important; }
/* .listing-row.warning is the SELECTED-dossier marker (lot-control/index.blade
   « la classe .warning reste le marqueur de sélection ») — recolour it to a dark
   cyan SELECTION, not the amber warning fallback just above. Higher specificity
   than that rule (adds table.table tbody), so it wins for the listing case while
   real warnings elsewhere keep the amber. The blade's own #listingId recolour is
   dead (the style's id doesn't match the wrapper), so this is the only fix needed. */
html.dark table.table tbody tr.listing-row.warning > td { background: #123742 !important; color: #eaf6fb !important; }
html.dark table.table tbody tr.listing-row.warning:hover > td { background: #16424f !important; }
html.dark table.table tbody tr.listing-row.warning > td:first-child { box-shadow: inset 3px 0 0 0 #20a8d8 !important; }

/* Pastille statut « .text-default » : color-mix avec le fond CLAIR #fff dans la
   source → on re-mixe avec la surface SOMBRE pour garder la teinte de statut. */
html.dark table.table tbody td .text-default {
  background: color-mix(in srgb, currentColor 22%, #18222e) !important;
}

/* Bandeau filtre risque (Mes Dossiers) */
html.dark .mp-risk-filter { background: rgba(226,88,77,.14) !important; border-color: rgba(226,88,77,.34) !important; color: #ef8b82 !important; }
html.dark .mp-risk-filter__clear { background: var(--d-card-2) !important; border-color: rgba(226,88,77,.4) !important; color: #ef8b82 !important; }
html.dark .mp-risk-filter__clear:hover { background: #2a1f20 !important; }

/* =============================================================================
   4 · WIDGET — Charger un dossier  (#upload-widget-…)
   classes : .nl-hero(-ico/-title/-sub) .nl-quick(-label) .nl-chip .nl-cta .dz-foot
   ============================================================================= */
html.dark [id^="upload-widget-"] { --navy: var(--d-title) !important; --gray: var(--d-muted) !important; --line: var(--d-line) !important; }
html.dark [id^="upload-widget-"] .nl-hero-ico { background: rgba(22,181,212,.14) !important; }
html.dark [id^="upload-widget-"] .nl-quick-label { color: var(--d-muted) !important; }
html.dark [id^="upload-widget-"] .nl-chip { background: var(--d-card-2) !important; color: var(--d-ink) !important; }
html.dark [id^="upload-widget-"] .nl-chip:hover { background: #233646 !important; border-color: var(--d-cyan) !important; color: var(--d-cyan-h) !important; }
html.dark [id^="upload-widget-"] .nl-cta.is-disabled,
html.dark [id^="upload-widget-"] .nl-cta.is-disabled:hover { background: #2a3744 !important; color: var(--d-muted-2) !important; }
html.dark [id^="upload-widget-"] .dz-foot { background: var(--d-inset) !important; border-top-color: var(--d-line) !important; color: var(--d-muted) !important; }
/* .nl-cta (cyan) inchangé — déjà sur fond de marque */

/* =============================================================================
   5 · WIDGET — Consommation (Pages / Cumac)  (.usage-summary-widget)
   PAS d'id-scope (classe stable) → pas de !important nécessaire.
   Donut : <circle stroke="#eef1f4"> = piste (override §9) ; les dégradés
   Pages/Cumac (cyan/vert) sont SÉMANTIQUES → inchangés.
   ============================================================================= */
html.dark .usage-summary-widget { color: var(--d-ink); }
html.dark .usage-summary-widget__subtitle,
html.dark .usage-summary-widget__remaining,
html.dark .usage-summary-widget__ring-unit,
html.dark .usage-summary-widget__progress,
html.dark .usage-summary-widget__ratio,
html.dark .usage-summary-widget__footer-label,
html.dark .usage-summary-widget__footer-stat-meta { color: var(--d-muted); }
html.dark .usage-summary-widget__heading,
html.dark .usage-summary-widget__ring-value,
html.dark .usage-summary-widget__ratio strong { color: var(--d-title); }
html.dark .usage-summary-widget__footer-separator { color: #5a6675; }
html.dark .usage-summary-widget__meter + .usage-summary-widget__meter { border-left-color: var(--d-line); }
html.dark .usage-summary-widget__footer { background: var(--d-inset); border-top-color: var(--d-line); }
html.dark .usage-summary-widget__empty { color: var(--d-muted); }
@media (max-width: 767.98px) {
  html.dark .usage-summary-widget__meter + .usage-summary-widget__meter { border-top-color: var(--d-line); }
}

/* =============================================================================
   6 · WIDGET — Risque fraude  (#fraud-risk-overview-…)
   classes : .fr-prio .fr-leg(-name/-pct) .fr-cta .fr-foot + modale .fr-modal__*
   Donut : segments = teintes de risque SÉMANTIQUES (inchangées) ; piste §9.
   ============================================================================= */
html.dark [id^="fraud-risk-overview-"] { --navy: var(--d-title) !important; --gray: var(--d-muted) !important; --line: var(--d-line) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-prio { background: rgba(226,88,77,.14) !important; border-color: rgba(226,88,77,.30) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-leg-name { color: #cdd7e1 !important; }
html.dark [id^="fraud-risk-overview-"] .fr-leg-pct { color: var(--d-muted) !important; }
/* .fr-cta utilisait background:var(--navy) → re-mappé en clair, on le force en cyan */
html.dark [id^="fraud-risk-overview-"] .fr-cta { background: var(--d-cyan) !important; color: #08222b !important; }
html.dark [id^="fraud-risk-overview-"] .fr-cta:hover { background: var(--d-cyan-h) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-foot { background: var(--d-inset) !important; border-top-color: var(--d-line) !important; color: var(--d-muted) !important; }
/* Modale « Comment ça marche ? » */
html.dark [id^="fraud-risk-overview-"] .fr-modal__dialog { background: var(--d-card) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__head,
html.dark [id^="fraud-risk-overview-"] .fr-modal__foot { border-color: var(--d-line) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__head-ico { background: rgba(22,181,212,.14) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__close { background: var(--d-card-2) !important; border-color: var(--d-line) !important; color: var(--d-muted) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__close:hover { background: #243140 !important; color: var(--d-title) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__intro { color: #cdd7e1 !important; }
html.dark [id^="fraud-risk-overview-"] .fr-step-num { background: rgba(22,181,212,.14) !important; border-color: rgba(22,181,212,.4) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-step:not(:last-child)::before { background: var(--d-line) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-level { border-bottom-color: var(--d-line-2) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-source { background: var(--d-card-2) !important; border-color: var(--d-line) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__note { background: rgba(22,181,212,.10) !important; border-color: rgba(22,181,212,.28) !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__note span { color: #aab6c2 !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__ok { background: var(--d-cyan) !important; color: #08222b !important; }
html.dark [id^="fraud-risk-overview-"] .fr-modal__ok:hover { background: var(--d-cyan-h) !important; }
/* .fr-level-badge : pastilles pastel inline (par teinte) — conservées telles
   quelles, lisibles en chips clairs sur le dialogue sombre. */

/* =============================================================================
   7 · WIDGET — Dossiers par statuts  (#status-overview-…)
   classes : .st-tabs .st-tab .st-tile .st-num .st-lab .st-empty
   ============================================================================= */
html.dark [id^="status-overview-"] { --navy: var(--d-title) !important; --gray: var(--d-muted) !important; --line: var(--d-line) !important; }
html.dark [id^="status-overview-"] .st-tabs { background: var(--d-inset) !important; }
html.dark [id^="status-overview-"] .st-tab.is-active { background: #25323f !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; }
html.dark [id^="status-overview-"] .st-tile { background: var(--d-card-2) !important; }
html.dark [id^="status-overview-"] .st-tile:hover { box-shadow: 0 8px 20px rgba(0,0,0,.35) !important; }
html.dark [id^="status-overview-"] .st-tile.is-zero .st-num { color: #5a6675 !important; }
html.dark [id^="status-overview-"] .st-empty { background: var(--d-inset) !important; color: var(--d-muted) !important; }
/* la barre couleur .st-tile::before (var(--c)) = teinte de statut, inchangée */

/* =============================================================================
   8 · WIDGET — Non-conformités à confirmer  (#nonconformites-…)
   classes : .nc-list .nc-doss .nc-count .nc-info(-head/-ref) .nc-tag .nc-chev .nc-foot
   ============================================================================= */
html.dark [id^="nonconformites-"] { --navy: var(--d-title) !important; --gray: var(--d-muted) !important; --line: var(--d-line) !important; --r-eleve-bg: rgba(226,88,77,.18) !important; }
html.dark [id^="nonconformites-"] .nc-list::-webkit-scrollbar-thumb { background: #324252 !important; border-color: var(--d-card) !important; }
html.dark [id^="nonconformites-"] .nc-doss { border-bottom-color: var(--d-line-2) !important; }
html.dark [id^="nonconformites-"] .nc-doss:hover { background: #1c2733 !important; }
html.dark [id^="nonconformites-"] .nc-info-ref { color: var(--d-muted) !important; }
html.dark [id^="nonconformites-"] .nc-tag { background: var(--d-card-2) !important; }
html.dark [id^="nonconformites-"] .nc-chev { color: #4a5663 !important; }
html.dark [id^="nonconformites-"] .nc-empty { color: var(--d-muted) !important; }
html.dark [id^="nonconformites-"] .nc-foot { background: var(--d-inset) !important; border-top-color: var(--d-line) !important; color: var(--d-muted) !important; }
/* .nc-count : chip rouge sémantique (var --r-eleve-bg re-mappé translucide) */

/* =============================================================================
   9 · WIDGET — Aperçu non-conformités (variante)  (#flagged-overview-…)
   classes : .flagged-overview-row/-count/-main/-name/-meta/-tags/-tag/-foot/-link
   ============================================================================= */
html.dark [id^="flagged-overview-"] { color: var(--d-ink) !important; }
html.dark [id^="flagged-overview-"] .flagged-overview-row { background: var(--d-card-2) !important; border-color: var(--d-line) !important; }
html.dark [id^="flagged-overview-"] .flagged-overview-row:hover { background: #233646 !important; border-color: #2f3e4d !important; }
html.dark [id^="flagged-overview-"] .flagged-overview-meta { color: var(--d-muted) !important; }
html.dark [id^="flagged-overview-"] .flagged-overview-tag { background: var(--d-card) !important; color: #aab6c2 !important; border-color: var(--d-line) !important; }
html.dark [id^="flagged-overview-"] .flagged-overview-foot { border-top-color: var(--d-line) !important; color: var(--d-muted) !important; }
/* .flagged-overview-count (rouge plein) + .flagged-overview-link (cyan) inchangés */

/* =============================================================================
   10 · WIDGET — Statuts par mois (graphe à barres CSS)  (#time-status-overview-…)
   classes : .chart-filters .cf .chart-legend .cl .chart-plot .chart-grid-line
             .month-group .bar .bval .chart-xaxis .chart-empty
   Barres : background inline = teinte de statut SÉMANTIQUE → inchangé.
   ============================================================================= */
html.dark [id^="time-status-overview-"] { --navy: var(--d-title) !important; --gray: var(--d-muted) !important; --line: var(--d-line) !important; }
html.dark [id^="time-status-overview-"] .cf label { color: var(--d-muted) !important; }
html.dark [id^="time-status-overview-"] .cf select { background: var(--d-card-2) !important; }
html.dark [id^="time-status-overview-"] .chart-plot { border-bottom-color: var(--d-line) !important; }
html.dark [id^="time-status-overview-"] .chart-grid-line { border-top-color: var(--d-line-2) !important; }
html.dark [id^="time-status-overview-"] .chart-empty { background: var(--d-inset) !important; color: var(--d-muted) !important; }
/* .bval (valeurs) + .chart-xaxis span passent par var(--navy)/var(--gray) re-mappés */

/* =============================================================================
   11 · GRAPHES JS — pistes SVG, Flot, Chart.js, liquid-meter
   ============================================================================= */
/* Piste des anneaux/donuts (usage + fraud) : <circle stroke="#eef1f4"> en dur. */
html.dark circle[stroke="#eef1f4"] { stroke: var(--d-track) !important; }
/* Filets pointillés éventuels en SVG */
html.dark [stroke="#eef1f4"] { stroke: var(--d-track) !important; }

/* gc_chart (Flot) : conteneurs.  Les axes/grille sont peints par Flot via options
   JS (rgba noir) — voir DARK-MODE-SPEC §Charts pour les valeurs sombres. */
html.dark #gc-chart .chart-data-selector h2 span,
html.dark #gc-chart .card-title { color: var(--d-title); }
html.dark .flotTip, html.dark .legend > div { background: var(--d-card) !important; color: var(--d-ink) !important; border-color: var(--d-line) !important; }
html.dark .legend table { color: var(--d-ink) !important; }

/* =============================================================================
   12 · PASTILLES STATUT & BADGES RISQUE globaux (hors widgets ci-dessus)
   Les TEINTES restent identiques (sémantique) ; seuls les fonds pastel passent
   en translucide pour tenir sur surface sombre.  Utiliser ces classes utilitaires
   si le markup statut/risque n'est pas déjà couvert par .text-default.
   ============================================================================= */
html.dark .s-pill,
html.dark .risk-pill,
html.dark .status-pill {
  background: color-mix(in srgb, currentColor 20%, #18222e) !important;
}
/* status-block (project_statuses : tuiles colorées plein) : garde la couleur
   pleine sémantique, juste un texte blanc déjà en place — rien à changer. */

/* =============================================================================
   INTÉGRATION (hors livrable design) — widgets dashboard chargés en AJAX.
   Le corps de carte `.card-body.lazy-content` est blanc tant que le contenu
   n'est pas arrivé → flash blanc sur fond sombre. On le rend transparent pour
   laisser voir la carte sombre dessous (et après chargement, le contenu garde
   ses propres surfaces gérées par les règles [id^=...]).
   ============================================================================= */
html.dark .card-body.lazy-content { background: var(--d-card) !important; }
html.dark .card-body.lazy-content.manual { background: var(--d-card) !important; }

/* -- en-têtes de widget : .card-header garde un fond blanc (règle theme.css plus
   spécifique que html.dark .card-header) → le titre quasi-blanc devient illisible.
   On force transparent pour révéler la carte sombre dessous (rendu de référence). */
html.dark .card .card-header,
html.dark .card-modern .card-header,
html.dark #dashboard-widgets-grid .card-header { background: transparent !important; }

/* -- contrôles « filtrer par période » (calendrier) dans les en-têtes de widget -- */
html.dark .cw-df-btn,
html.dark .cw-df-pop,
html.dark .cw-df-preset,
html.dark .cw-df-reset { background: var(--d-card-2) !important; color: var(--d-ink) !important; border-color: var(--d-line) !important; }
html.dark .cw-df-btn:hover,
html.dark .cw-df-preset:hover,
html.dark .cw-df-reset:hover { background: #243140 !important; }

/* -- pastilles de risque à fond pastel INLINE (style="background:#…;color:#…")
   dans le tableau Mes Dossiers : spec §3 → fond pastel devient translucide, la
   teinte de texte reste. On cible le COUPLE fond pastel + couleur sémantique
   (chaîne d'attributs) pour ne toucher QUE ces pastilles. !important bat l'inline. */
html.dark [style*="#e7f6ee"][style*="#1f9d6b"] { background: rgba(31,157,107,.18) !important; }   /* faible  */
html.dark [style*="#fbf2de"][style*="#d3962a"] { background: rgba(211,150,42,.20) !important; }    /* modéré  */
html.dark [style*="#fcebe9"][style*="#e2584d"] { background: rgba(226,88,77,.20) !important; }     /* élevé   */
html.dark [style*="#f6e2e0"][style*="#a32a23"] { background: rgba(163,42,35,.26) !important; }     /* bloquant*/
html.dark [style*="#f0f3f6"][style*="#9aa6b2"] { background: rgba(154,166,178,.16) !important; }   /* indét.  */

/* -- .dashboard-widget-item est la COLONNE Bootstrap (col-12 col-lg-6, avec
   gouttière), PAS la carte. La règle « carte » plus haut lui applique fond +
   ombre -> un bloc rectangulaire sombre + un halo d'ombre débordent autour de
   chaque carte arrondie (les « dégradés/couleurs autour des widgets »).
   Dans l'aperçu de référence, .dashboard-widget-item EST la carte ; ici c'est
   un wrapper de colonne. On le neutralise : seule la .card intérieure porte le
   fond + l'ombre. -- */
html.dark .dashboard-widget-item {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* -- Hover/focus du menu de navigation : le thème pousse un hover CLAIR (#fafafa)
   tenace en sidebar-light ; on force le hover sombre (!important bat le non-important). -- */
html.dark ul.nav-main > li > a:hover,
html.dark ul.nav-main > li > a:focus { background: #1c2733 !important; color: #eaf2f6 !important; }
html.dark ul.nav-main > li > a:hover i,
html.dark ul.nav-main > li > a:hover svg { color: #eaf2f6 !important; }

/* -- Sous-menu déroulant (nav-children) + flyout quand la sidebar est repliée -- */
html.dark ul.nav-main li .nav-children,
html.dark ul.nav-main li.nav-expanded .nav-children { background: #131c26 !important; }
html.dark ul.nav-main li .nav-children li a { color: #c4d0dc !important; }
html.dark ul.nav-main li .nav-children li a:hover,
html.dark ul.nav-main li .nav-children li a:focus { background: #1f2b38 !important; color: #eaf2f6 !important; }

/* =============================================================================
   COMPLÉTION QC — composants Bootstrap/AdminPorto communs aux pages de listing
   (corps de carte génériques, barres de progression, lignes de tableau,
   boutons outline, pagination) restés clairs.
   ============================================================================= */
html.dark .card-body { background: transparent !important; }
html.dark .progress, html.dark .progress-sm { background-color: #1f2b38 !important; }

/* lignes de tableau (DataTables : striping/hover en dur) */
html.dark table tbody tr, html.dark .table tbody tr { background-color: transparent !important; }
html.dark table.dataTable tbody tr.odd, html.dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025) !important; }
html.dark table.dataTable tbody tr.even { background-color: transparent !important; }
html.dark tr.rowHover:hover, html.dark table tbody tr:hover, html.dark .table-hover tbody tr:hover { background-color: #1c2733 !important; }

/* boutons outline (outline-dark/secondary : fond clair + texte sombre) */
html.dark .btn-outline-dark, html.dark .btn-outline-secondary { color: var(--d-ink) !important; border-color: var(--d-line) !important; background: transparent !important; }
html.dark .btn-outline-dark:hover, html.dark .btn-outline-secondary:hover { background: #243140 !important; color: #fff !important; }

/* pagination (Bootstrap .page-link + DataTables .paginate_button) */
html.dark .page-link,
html.dark .dataTables_paginate .paginate_button { background-color: var(--d-card-2) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html.dark .page-item.active .page-link,
html.dark .dataTables_paginate .paginate_button.current { background: var(--d-cyan) !important; border-color: var(--d-cyan) !important; color: #08222b !important; }
html.dark .page-item.disabled .page-link { color: var(--d-muted-2) !important; }

/* -- page Consommation détaillée (usage/index) : composant .detail-* -- */
html.dark .detail-panel,
html.dark .detail-summary-card,
html.dark .detail-selector-card,
html.dark .detail-breakdown-card { background: var(--d-card) !important; border-color: var(--d-line) !important; }
html.dark .detail-stat-box,
html.dark .detail-breakdown-item,
html.dark .detail-progress-shell { background: #1f2b38 !important; border-color: var(--d-line) !important; }
html.dark .detail-chip,
html.dark .detail-breakdown-badge { background: #243140 !important; border-color: var(--d-line) !important; color: #cfe0f0 !important; }

/* =============================================================================
   QC round 3 — sidebar = fond topbar, item actif, logo sombre, menu contextuel
   ============================================================================= */
/* sidebar : MÊME fond que la topbar (carte #18222e) au lieu du puits #131c26 */
html.dark .sidebar-left,
html.dark .sidebar-left .nano-content,
html.dark .sidebar-left .sidebar-header { background: var(--d-card) !important; }
html.dark .sidebar-left .sidebar-header .sidebar-toggle { background-color: var(--d-card) !important; }

/* item de navigation ACTIF / déplié : le thème force un fond clair (#fafafa) ;
   on impose la teinte cyan translucide + accent à gauche (rendu dashboard) */
html.dark ul.nav-main > li.nav-active > a,
html.dark ul.nav-main > li.nav-expanded > a,
html.dark ul.nav-main > li.nav-active > a:hover,
html.dark ul.nav-main > li.nav-expanded > a:hover,
html.dark ul.nav-main > li.nav-active > a:focus { background: rgba(22,181,212,.16) !important; color: #eaf6fb !important; box-shadow: inset 3px 0 0 var(--d-cyan) !important; }
html.dark ul.nav-main > li.nav-active > a i, html.dark ul.nav-main > li.nav-active > a svg,
html.dark ul.nav-main > li.nav-expanded > a i, html.dark ul.nav-main > li.nav-expanded > a svg { color: var(--d-cyan-h) !important; }

/* logo : variante sombre (texte blanc). Le PNG sombre est plus large que le logo
   clair du tenant → à hauteur égale il déborde à droite. On le cale sur la même
   empreinte : hauteur fixe + largeur auto + contain, aligné à gauche. */
html.dark .header .logo img.admin-logo,
html.dark .header .logo .admin-logo,
html.dark img.admin-logo {
  content: url('/logos/ceertia-logo-dark.png') !important;
  height: 34px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* cloche dans un cercle, uniforme avec le bouton de bascule (.theme-toggle).
   Appliqué aux deux thèmes (dark.css est toujours chargé). */
.notif-bell {
  width: 36px !important; height: 36px !important; flex: none;
  border-radius: 50% !important; border: 1px solid #e1e6ec; background: transparent;
  display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important;
  transition: background .15s, color .15s, border-color .15s;
}
.notif-bell:hover { background: #f2f5f8; }
html.dark .notif-bell { border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html.dark .notif-bell:hover { background: #223445; color: #eaf0f5 !important; }

/* menu contextuel des tableaux (plugin jQuery contextMenu) */
html.dark .context-menu-list { background: var(--d-card) !important; border-color: var(--d-line) !important; box-shadow: 0 12px 34px rgba(0,0,0,.55) !important; }
html.dark .context-menu-item { background: transparent !important; color: var(--d-ink) !important; }
html.dark .context-menu-item.context-menu-hover,
html.dark .context-menu-item.context-menu-visible.context-menu-hover { background: #243140 !important; color: #fff !important; }
html.dark .context-menu-item span { color: inherit !important; }
html.dark .context-menu-separator { border-bottom-color: var(--d-line) !important; }

/* -- en-tête de tableau (thead) : la ligne restait blanche (dataTable/striped) -- */
html.dark table thead tr,
html.dark .table thead tr,
html.dark table.dataTable thead tr { background-color: transparent !important; }
html.dark .table thead th,
html.dark table.table thead th,
html.dark table.dataTable thead th { background-color: var(--d-card-2) !important; color: var(--d-muted) !important; }

/* -- sidebar : la couche .nano (conteneur de scroll) gardait le fond stock du
   skin (#1d2127), visible sous le contenu en bas -> uniformiser sur le fond carte. */
html.dark .sidebar-left .nano,
html.dark .sidebar-left .nano > .nano-content { background: var(--d-card) !important; }
/* séparateurs entre items de navigation : bordure blanche (#fafafa) ->
   même couleur que la bordure topbar/contenu (--d-line). */
html.dark ul.nav-main > li > a { border-top-color: var(--d-line) !important; }

/* -- doc-workspace : pastille compteur (.n) dans l'en-tête du panneau questions -- */
html.dark .ws-panel-h .n { background: rgba(22,181,212,.18) !important; color: #7cc6e8 !important; }

/* -- panneau « Pièces du dossier » (.rf-docrow) : survol clair + séparateur trop
   clair (#f4f6f8). Survol -> sombre ; séparateur -> couleur bordure topbar/contenu. */
html.dark .rf-docrow { border-top-color: var(--d-line) !important; border-color: var(--d-line) !important; }
html.dark .rf-docrow.click:hover { background: #1f2b38 !important; }

/* =============================================================================
   QC — Refonte Rôles & Permissions + Page/Fiche Utilisateur (scope .rp-scope,
   roles-permissions.css). Override des tokens --rp-* (texte/lignes/pastels) +
   des surfaces claires en dur. Couleurs sémantiques conservées (translucides).
   ============================================================================= */
html.dark .rp-scope {
  --rp-navy: #e9eef3; --rp-ink: #e4e9ef; --rp-gray: #93a1b0; --rp-mute: #8b939e;
  --rp-line: #2a3744; --rp-line-2: #243140;
  --rp-cyan-bg: rgba(22,181,212,.14); --rp-green-bg: rgba(31,157,107,.16);
  --rp-amber-bg: rgba(211,150,42,.18); --rp-red-bg: rgba(226,88,77,.18);
  --rp-violet-bg: rgba(122,95,196,.22);
}
/* cartes / surfaces blanches */
html.dark .rp-scope .rp-card,
html.dark .rp-scope .acc-mod { background: #18222e !important; border-color: #2a3744 !important; }
/* boutons clairs */
html.dark .rp-scope .rp-btn-ghost,
html.dark .rp-scope .uf-avatar-btn,
html.dark .rp-scope .up-btn-edit { background: #1f2b38 !important; border-color: #2a3744 !important; color: #e4e9ef !important; }
html.dark .rp-scope .rp-btn-ghost:hover,
html.dark .rp-scope .uf-avatar-btn:hover,
html.dark .rp-scope .up-btn-edit:hover { background: #243140 !important; }
/* chips / tags / pills / pistes neutres clairs */
html.dark .rp-scope .rv-tag.iface,
html.dark .rp-scope .rv-tag.twofa-off,
html.dark .rp-scope .rv-pill.off,
html.dark .rp-scope .po-pill.po-state-inherit .po-seg.active,
html.dark .rp-scope .up-pf-tag.inactive,
html.dark .rp-scope .up-detail-ic,
html.dark .rp-scope .uf-tab-count,
html.dark .rp-scope .acc-mini,
html.dark .rp-scope .rp-ty-badge.rp-ty-internal { background: #1f2b38 !important; color: #cfd8e2 !important; }
html.dark .rp-scope .mtx-progress { background: #2c3a48 !important; }
/* en-têtes / bannières / sous-surfaces claires */
html.dark .rp-scope .grid-row.head,
html.dark .rp-scope .uf-avatar-block,
html.dark .rp-scope .uf-rolebanner,
html.dark .rp-scope .up-tbl thead th,
html.dark .rp-scope .up-meta-raw pre,
html.dark .rp-scope .pc.pc-locked .box,
html.dark .rp-scope .idx-act { background: #1f2b38 !important; }
/* survols de lignes / accordéon */
html.dark .rp-scope .idx-table tbody tr:hover,
html.dark .rp-scope .acc-head:hover,
html.dark .rp-scope .grid-row:not(.head):hover,
html.dark .rp-scope .up-tbl tbody tr:hover { background: #1c2733 !important; }
html.dark .rp-scope thead th { background: #1f2b38 !important; color: var(--rp-mute, #8b939e) !important; }
/* interrupteurs d'override de permission + bordure d'onglet au survol */
html.dark .rp-scope .po-switch-track { background: #2c3a48 !important; }
html.dark .rp-scope .uf-tabs .nav-link:hover { border-bottom-color: var(--rp-line) !important; }
/* fiche rôle (modale Voir) : bandeau stats + en-têtes de carte module */
html.dark .rp-scope .rv-stats { background: #131c26 !important; }
html.dark .rp-scope .rv-perm-card .h { background: #1f2b38 !important; border-color: var(--rp-line) !important; }

/* =====================================================================
   Sidebar repliée — flyout de sous-menu (.nav-children) en dark mode.
   La « carte blanche » (public/assets/themes/admin-porto/css/custom.css)
   restait blanche en dark. Mirror de ces règles préfixé html.dark.<état> :
   la classe .dark en plus donne une spécificité supérieure → gagne sur la
   carte claire (les deux en !important), quel que soit l'ordre de chargement.
   ===================================================================== */
html.dark.sidebar-left-collapsed .sidebar-left .nav-main li.nav-parent > ul.nav-children,
html.dark.sidebar-left-big-icons  .sidebar-left .nav-main li > ul.nav-children {
    background: var(--d-card-2) !important;
    border: 1px solid var(--d-line) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4) !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children > li.nav-children-header,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children > li.nav-children-header {
    color: #e7edf3;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li > a,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li > a {
    color: #c4d0dc !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li > a:hover,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li > a:hover {
    background: #1c2733 !important;
    color: #eaf2f6 !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li > a > i,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li > a > i {
    color: var(--d-muted) !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li.nav-active > a,
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li > a.active,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li.nav-active > a,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li > a.active {
    background: rgba(22,181,212,.16) !important;
    color: #5fd0ec !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children li.nav-active > a > i,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children li.nav-active > a > i {
    color: #5fd0ec !important;
}
html.dark .sidebar-left ul.nav-children .nav-count-badge { background: var(--d-line); color: #aeb9c5; }
html.dark .sidebar-left ul.nav-children li.nav-active > a .nav-count-badge { background: #16202a; color: #5fd0ec; }
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children .append > a,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children .append > a {
    color: var(--d-muted) !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children .append > a:hover,
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children .append > a:hover {
    background: rgba(22,181,212,.16);
    color: #5fd0ec !important;
}
html.dark.sidebar-left-collapsed .sidebar-left ul.nav-children > li:has(> a.hasAppend) + li:not(:has(> a.hasAppend)):not(.nav-children-header),
html.dark.sidebar-left-big-icons  .sidebar-left ul.nav-children > li:has(> a.hasAppend) + li:not(:has(> a.hasAppend)):not(.nav-children-header) {
    border-top-color: var(--d-line);
}