/* ═══════════════════════════════════════════════════════════════════════════
   ev-unified-dark-v304.css  —  2026-05-25
   ───────────────────────────────────────────────────────────────────────────
   DIRECTIVE FINALE DIRECTEUR : 100% DARK UNIFIÉ — PLUS AUCUN FOND BLANC
   ───────────────────────────────────────────────────────────────────────────
   Cette surcouche élimine définitivement la dualité clair/sombre :
     • Tous les fonds blancs (#FFF, #FFFFFF) inline ou en classe → fond sombre.
     • Tout le texte sur fond sombre → blanc pur ou slate-300 (libellés).
     • Les couleurs ne servent QUE pour fonctionnel (badges, états, boutons).

   STRATÉGIE
   ─────────
   • Catch-alls sur attribute selectors [style*="background:#FFFFFF"] etc.
     pour neutraliser les ~230 fonds blancs inline du legacy.
   • Surcharge des classes Tailwind tw-bg-white, tw-bg-slate-50,
     tw-text-slate-* foncés, etc.
   • Sélecteurs ciblés sur composants nommés (KPI, fin service, parrainage)
     pour battre les overlays précédents (v283 white KPI, v303 light
     parrainage). v304 charge en DERNIER → gagne la cascade.

   PALETTE DARK UNIFIÉE
   ────────────────────
     Surface primaire   : #0A0E17  (fond page)
     Surface élevée 1   : #131C2E  (cards, encarts)
     Surface élevée 2   : #1E293B  (interactifs, hovers)
     Bordure neutre     : rgba(255,255,255,.08)
     Bordure accent     : rgba(34,211,238,.25)  cyan néon

     Texte principal    : #FFFFFF  (blanc pur, headings, montants, valeurs)
     Texte secondaire   : #CBD5E1  (slate-300, libellés, descriptions)
     Texte tertiaire    : #94A3B8  (slate-400, méta, timestamps)

     Accent succès      : #10F0A1 / #34D399  (vert vif)
     Accent danger      : #F87171              (rouge clair)
     Accent warning     : #FBBF24              (ambre)
     Accent info        : #22D3EE              (cyan)
     Accent violet      : #C084FC
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   §1. CATCH-ALL — FONDS BLANCS INLINE → SOMBRE
   ───────────────────────────────────────────────────────────────────────
   Cible les 230+ occurrences d'inline style="background:#FFFFFF" ou
   variantes. On utilise [style*="..." i] case-insensitive. */

[style*="background:#fff" i],
[style*="background:#FFF" i],
[style*="background:#ffffff" i],
[style*="background:#FFFFFF" i],
[style*="background-color:#fff" i],
[style*="background-color:#ffffff" i],
[style*="background: #fff" i],
[style*="background: #ffffff" i],
[style*="background:white" i],
[style*="background: white" i] {
  background: #131C2E !important;
  color: #F1F5F9 !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Classes Tailwind blanches souvent utilisées */
.tw-bg-white,
.tw-bg-slate-50,
.tw-bg-gray-50,
.tw-bg-gray-100,
.tw-bg-slate-100,
.bg-white {
  background: #131C2E !important;
  color: #F1F5F9 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2. CATCH-ALL — TEXTES SOMBRES SUR FOND SOMBRE → CLAIR
   ───────────────────────────────────────────────────────────────────────
   Tous les color:#0F172A (slate-900), #1F2937 (gray-800), #020617
   (slate-950), #1E293B (slate-800) en inline → blanc pur. */

[style*="color:#0F172A" i],
[style*="color:#0f172a" i],
[style*="color:#020617" i],
[style*="color:#1F2937" i],
[style*="color:#1f2937" i],
[style*="color:#1E293B" i],
[style*="color:#1e293b" i],
[style*="color:#111827" i],
[style*="color:#0B1220" i],
[style*="color:#0b1220" i],
[style*="color:#000000" i],
[style*="color:#000" i],
[style*="color:black" i] {
  color: #FFFFFF !important;
}

/* Gris foncés (slate-600/700) → slate-300 pour rester lisible */
[style*="color:#334155" i],
[style*="color:#475569" i],
[style*="color:#3F3F46" i],
[style*="color:#52525B" i] {
  color: #CBD5E1 !important;
}

/* Gris moyens (slate-500) → slate-400 */
[style*="color:#64748B" i],
[style*="color:#64748b" i],
[style*="color:#71717A" i],
[style*="color:#6B7280" i],
[style*="color:#6b7280" i] {
  color: #94A3B8 !important;
}

/* Tailwind text-slate-* foncés */
.tw-text-slate-900,
.tw-text-slate-800,
.tw-text-gray-900,
.tw-text-gray-800,
.tw-text-zinc-900,
.tw-text-black {
  color: #FFFFFF !important;
}
.tw-text-slate-700,
.tw-text-slate-600,
.tw-text-gray-700,
.tw-text-gray-600 {
  color: #CBD5E1 !important;
}
.tw-text-slate-500,
.tw-text-slate-400,
.tw-text-gray-500 {
  color: #94A3B8 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3. CARTES KPI DASHBOARD — .tbd-card (les 4 du haut)
   ───────────────────────────────────────────────────────────────────────
   Annule v283 (qui les forçait à background:#FFFFFF !important) et v302
   (qui forçait textes black). Spécificité maximale avec body:has() +
   #p-app + .tbd-card. */

body:has(#p-app.on) #p-app .tbd-card,
body:has(#p-app.on) #p-app .tbd-chart-wrap,
.tbd-card,
.tbd-chart-wrap {
  background: #131C2E !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 4px solid #22D3EE !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45) !important;
  color: #F1F5F9 !important;
}

body:has(#p-app.on) #p-app .tbd-card-label,
.tbd-card-label {
  color: #CBD5E1 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

body:has(#p-app.on) #p-app .tbd-card-value,
.tbd-card-value {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}

body:has(#p-app.on) #p-app .tbd-card-suffix,
.tbd-card-suffix {
  color: #CBD5E1 !important;
  font-weight: 700 !important;
}

body:has(#p-app.on) #p-app .tbd-trend-sub,
.tbd-trend-sub {
  color: #CBD5E1 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* Bar chart — labels et valeurs en blanc */
body:has(#p-app.on) #p-app .tbd-chart-title,
.tbd-chart-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
body:has(#p-app.on) #p-app .tbd-chart-sub,
.tbd-chart-sub {
  color: #94A3B8 !important;
}
body:has(#p-app.on) #p-app .tbd-chart-label,
.tbd-chart-label {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
body:has(#p-app.on) #p-app .tbd-chart-bar-val,
.tbd-chart-bar-val {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Trio CA Brut / Dépenses / Bénéfice Net (rendu inline par app.js trio()) —
   On laisse l'inline app.js gérer (déjà ajusté en clair). Catch-all §2
   protège si une variante slate-foncée traîne. */


/* ═══════════════════════════════════════════════════════════════════════
   §4. BADGES — TROIS VARIANTES VERT / ORANGE / ROUGE
   ───────────────────────────────────────────────────────────────────────
   Conserve la sémantique mais en mode dark : fond translucide néon + bord
   subtil + texte vif. Selon le pattern Tailwind demandé par le Directeur :
   text-emerald-400 bg-emerald-950/50 border border-emerald-500/30. */

.tbd-trend.up,
body:has(#p-app.on) #p-app .tbd-trend.up,
.tw-bg-emerald-950\/50,
.ev-badge-success {
  background: rgba(6,78,59,.50) !important;     /* emerald-950 / 50 */
  border: 1px solid rgba(16,185,129,.30) !important;
  color: #34D399 !important;                    /* emerald-400 */
}
.tbd-trend.dn,
body:has(#p-app.on) #p-app .tbd-trend.dn,
.tw-bg-red-950\/50,
.ev-badge-danger {
  background: rgba(69,10,10,.50) !important;    /* red-950 / 50 */
  border: 1px solid rgba(239,68,68,.30) !important;
  color: #F87171 !important;                    /* red-400 */
}
.tbd-trend.zero,
body:has(#p-app.on) #p-app .tbd-trend.zero,
.ev-badge-warning {
  background: rgba(69,26,3,.50) !important;     /* amber-950 / 50 */
  border: 1px solid rgba(245,158,11,.30) !important;
  color: #FBBF24 !important;                    /* amber-400 */
}


/* ═══════════════════════════════════════════════════════════════════════
   §5. PAGE D'AUTH — Encadré Parrainage repasse en SOMBRE
   ───────────────────────────────────────────────────────────────────────
   Bat v303 qui le voulait clair (#FAF5FF + texte slate-900). Le Directeur
   a tranché : tous les encarts sombres. Texte blanc, accent violet. */

body:has(#p-auth.on) #p-auth #ev-parrainage-card {
  background: #1E1B2E !important;             /* slate-800 violet-ish */
  border: 1px solid #6D28D9 !important;
  border-radius: 12px !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card h4 {
  color: #C084FC !important;                  /* violet-400, lisible sur sombre */
  font-weight: 800 !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card p {
  color: #FFFFFF !important;
  font-weight: 500 !important;
}
body:has(#p-auth.on) #p-auth #ev-parrainage-card p span[style*="color:#0F766E"] {
  color: #34D399 !important;                  /* "4 DH" repasse en vert vif */
  font-weight: 900 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §6. TABLEAUX — fond sombre, texte clair, bordures discrètes
   ───────────────────────────────────────────────────────────────────── */

table:not(.no-dark),
.tbl2,
.mbrs-table,
.tbl,
.lst-table {
  background: transparent !important;
  color: #F1F5F9 !important;
}
table:not(.no-dark) thead th,
.tbl2 thead th,
.mbrs-table thead th,
table:not(.no-dark) th {
  background: #1E293B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
table:not(.no-dark) tbody td,
.tbl2 tbody td,
.mbrs-table tbody td,
table:not(.no-dark) td {
  background: transparent !important;
  color: #F1F5F9 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
table:not(.no-dark) tbody tr:hover td,
.tbl2 tbody tr:hover td {
  background: rgba(255,255,255,.03) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7. CARDS GÉNÉRIQUES — .cd, .acard, .ev-card, .bi-card, .kpi-card
   ───────────────────────────────────────────────────────────────────── */

.cd, .acard, .ev-card, .bi-card, .kpi-card, .stat-card, .mbrs-card {
  background: #131C2E !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: #F1F5F9 !important;
}
.cd-h, .ev-card-h, .bi-card-h, .kpi-card-h, .acard-h, .tbd-card-h {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8. FIN DE SERVICE — m-fs / pg-fin / blocs Fin Service
   ───────────────────────────────────────────────────────────────────── */

#m-fs, #pg-fin, .fs-card, .fs-bar, .fs-seg, .fs-block {
  background: #131C2E !important;
  color: #F1F5F9 !important;
  border-color: rgba(255,255,255,.08) !important;
}
#m-fs .fs-ttl, #m-fs .fs-lbl, #pg-fin .fs-ttl {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.fs-seg b {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9. PROTECTION FINALE — body & html toujours sombres
   ───────────────────────────────────────────────────────────────────── */

html, body {
  background: #0A0E17 !important;
  color: #F1F5F9 !important;
}

/* Override inline body style si quelqu'un essaie de re-imposer du clair */
body[style*="background:#fff" i],
body[style*="background:#FFFFFF" i],
body[style*="background-color:#fff" i] {
  background: #0A0E17 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §10. HEADER CTA — TOGGLE LOGIN ↔ LOGOUT selon état d'auth
   ───────────────────────────────────────────────────────────────────────
   Le bouton "Se connecter" du header v300 (.ev-header__cta) restait
   affiché même quand l'utilisateur était dans l'app (#p-app.on).
   2 boutons sont désormais injectés (cf. ev-homepage-v300.js l.93-94 +
   drawer l.106-107) :
     • .ev-header__cta--login     "Se connecter"  (link)
     • .ev-header__cta--logout    "Déconnexion"   (button)
   CSS toggle : un seul visible à la fois selon body:has(#p-app.on).
   ─────────────────────────────────────────────────────────────────────── */

/* Par défaut (page d'accueil / login) : Login visible, Logout caché */
.ev-header__cta--logout,
.ev-drawer__cta--logout {
  display: none;
}

/* Quand l'utilisateur est dans l'app (#p-app.on OR body.in-app) :
   on inverse — Login disparaît, Logout apparaît.
   body.in-app est la classe redondante posée par app.js l.5734 — fallback
   pour les navigateurs sans :has() (Safari < 15.4, Firefox < 121). */
body:has(#p-app.on) .ev-header__cta--login,
body:has(#p-app.on) .ev-drawer__cta--login,
body.in-app .ev-header__cta--login,
body.in-app .ev-drawer__cta--login {
  display: none !important;
}
/* Desktop (≥900px) : header logout visible ; mobile : caché (le drawer le porte) */
@media (min-width: 900px) {
  body:has(#p-app.on) .ev-header__cta--logout,
  body.in-app .ev-header__cta--logout {
    display: inline-flex !important;
  }
}
body:has(#p-app.on) .ev-drawer__cta--logout,
body.in-app .ev-drawer__cta--logout {
  display: block !important;
}

/* Styling rouge unifié — pattern badge danger v304 §4 (Tailwind original :
   bg-red-950/40 text-red-400 border-red-500/30) */
.ev-header__cta--logout {
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  font-family: inherit;
  background: rgba(69,10,10,.40) !important;   /* red-950 / 40 */
  color: #F87171 !important;                    /* red-400 */
  border: 1px solid rgba(239,68,68,.30) !important;
  transition: background .15s ease-out, transform .12s ease-out, box-shadow .15s ease-out;
}
.ev-header__cta--logout:hover {
  background: rgba(127,29,29,.55) !important;   /* red-900 / 55 */
  border-color: rgba(239,68,68,.50) !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.10);
}
.ev-header__cta--logout:active {
  transform: scale(.97);
}
.ev-header__cta--logout:focus-visible {
  outline: 2px solid #F87171;
  outline-offset: 2px;
}

/* Drawer mobile : version pleine largeur */
.ev-drawer__cta--logout {
  width: 100%;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  background: rgba(69,10,10,.40) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239,68,68,.30) !important;
}
.ev-drawer__cta--logout:hover {
  background: rgba(127,29,29,.55) !important;
}

/* Sur grand écran, le burger doit aussi disparaître si on est dans l'app —
   le menu mobile n'a pas de sens hors home publique. */
@media (min-width: 900px) {
  body:has(#p-app.on) .ev-burger,
  body.in-app .ev-burger {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §11. NEUTRALISATION DU BOOT SCREEN v300
   ───────────────────────────────────────────────────────────────────────
   `.ev-boot` (z-index 99999, position:fixed, plein écran, pointer-events
   par défaut activés) bloquait la page chez certains utilisateurs quand
   son `dismiss()` ne tirait pas. La fonction `initBootScreen()` a été
   commentée dans ev-homepage-v300.js, ce CSS est un filet de sécurité
   pour neutraliser toute occurrence résiduelle (cache stale, autre script
   qui l'aurait recréée, etc.). */

.ev-boot,
#ev-boot {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  z-index: -1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §12. ONGLETS ACCUEIL DIRECTEUR — .acc-tabs / .acc-tab
   ───────────────────────────────────────────────────────────────────────
   Le bandeau d'onglets "Vue générale" / "Équipe & Shifts" / "Sécurité"
   avait un fond blanc `#FFFFFF` + bord `#CBD5E1` (index.html l.3828).
   Directeur veut ce bandeau sombre, onglet actif clairement contrasté. */

.acc-tabs {
  background: #0F172A !important;           /* slate-900 */
  border: 1px solid #1E293B !important;     /* slate-800 */
  box-shadow: 0 4px 12px rgba(0,0,0,.30) !important;
}
.acc-tab {
  color: #CBD5E1 !important;                /* slate-300 — libellé inactif */
  background: transparent !important;
  font-weight: 700 !important;
}
.acc-tab:hover {
  background: rgba(255,255,255,.04) !important;
  color: #FFFFFF !important;
}
.acc-tab.on {
  background: #1E293B !important;           /* slate-800 */
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 1px solid #334155 !important;     /* slate-700 */
  box-shadow: 0 4px 12px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.acc-tab .acc-tab-badge {
  background: #DC2626 !important;
  color: #FFFFFF !important;
}
.acc-tab.on .acc-tab-badge {
  background: #FFFFFF !important;
  color: #DC2626 !important;
}

/* Pareil pour les autres patterns d'onglets (.tabs/.tab, .atabs/.atab,
   .tab2/.t2 etc.) — uniformiser le rendu dark. */
.tabs,
.atabs {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
}
.tab,
.atab {
  color: #CBD5E1 !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.tab:hover,
.atab:hover {
  background: rgba(255,255,255,.04) !important;
  color: #FFFFFF !important;
}
.tab.on,
.atab.on {
  background: #1E293B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: 1px solid #334155 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §13. BARRES DE PROGRESSION / STATS PUNCHY — .bi-bar-* + génériques
   ───────────────────────────────────────────────────────────────────────
   Fonds sombres + barres saturées (emerald / amber / indigo / cyan).
   Valeurs et labels en blanc pur. */

.bi-bar-row {
  background: transparent !important;
}
.bi-bar-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.bi-bar-track {
  background: #1E293B !important;           /* slate-800 = rail */
  border-radius: 999px !important;
  overflow: hidden !important;
}
.bi-bar-fill {
  /* Override le linear-gradient cyan→violet de v283 par défaut emerald */
  background: linear-gradient(90deg, #10B981 0%, #059669 100%) !important;
  box-shadow: 0 0 12px rgba(16,185,129,.40) !important;
  border-radius: 999px !important;
}
.bi-bar-fill.ca,
.bi-bar-fill.benef,
.bi-bar-fill.success {
  background: linear-gradient(90deg, #10B981 0%, #059669 100%) !important; /* emerald */
  box-shadow: 0 0 12px rgba(16,185,129,.40) !important;
}
.bi-bar-fill.vol,
.bi-bar-fill.info {
  background: linear-gradient(90deg, #6366F1 0%, #4F46E5 100%) !important; /* indigo */
  box-shadow: 0 0 12px rgba(99,102,241,.40) !important;
}
.bi-bar-fill.warning,
.bi-bar-fill.amber {
  background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%) !important; /* amber */
  box-shadow: 0 0 12px rgba(245,158,11,.40) !important;
}
.bi-bar-fill.danger,
.bi-bar-fill.red {
  background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%) !important; /* red */
  box-shadow: 0 0 12px rgba(239,68,68,.40) !important;
}
.bi-bar-val {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}
.bi-bar-val.ca   { color: #34D399 !important; }   /* emerald-400 */
.bi-bar-val.vol  { color: #818CF8 !important; }   /* indigo-400 */


/* ═══════════════════════════════════════════════════════════════════════
   §14. TABLES — zébrage strict slate-900 / slate-800-rgba + headers strong
   ─────────────────────────────────────────────────────────────────────── */

table:not(.no-dark),
.tbl2,
.mbrs-table,
.tbl,
.lst-table {
  background: transparent !important;
  color: #F1F5F9 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table:not(.no-dark) thead th,
.tbl2 thead th,
.mbrs-table thead th,
table:not(.no-dark) th,
.tbl2 th {
  background: #1E293B !important;           /* slate-800 */
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  border-bottom: 2px solid #334155 !important;
}
/* Zébrage : ligne impaire slate-900, ligne paire slate-800 transparent */
table:not(.no-dark) tbody tr:nth-child(odd) td,
.tbl2 tbody tr:nth-child(odd) td,
.mbrs-table tbody tr:nth-child(odd) td {
  background: #0F172A !important;           /* slate-900 */
  color: #F1F5F9 !important;
}
table:not(.no-dark) tbody tr:nth-child(even) td,
.tbl2 tbody tr:nth-child(even) td,
.mbrs-table tbody tr:nth-child(even) td {
  background: rgba(30,41,59,.50) !important; /* slate-800 / 50 */
  color: #F1F5F9 !important;
}
table:not(.no-dark) tbody td,
.tbl2 tbody td,
.mbrs-table tbody td {
  padding: 11px 14px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
/* Hover ligne entière */
table:not(.no-dark) tbody tr:hover td,
.tbl2 tbody tr:hover td,
.mbrs-table tbody tr:hover td {
  background: rgba(51,65,85,.60) !important; /* slate-700 / 60 */
}
/* `<b>` ou `<strong>` dans une cellule = chiffre clé → blanc pur */
table:not(.no-dark) tbody td b,
table:not(.no-dark) tbody td strong,
.tbl2 tbody td b,
.mbrs-table tbody td b {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §15. INPUTS — recherche & formulaires DARK STRICT
   ───────────────────────────────────────────────────────────────────────
   Force fond slate-800, texte blanc, placeholder slate-400, bord slate-700.
   Pattern Tailwind original demandé : bg-slate-800 text-white
   placeholder-slate-400 border-slate-700. */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="url"],
select,
textarea,
.fi,
.fta,
.mbrs-search {
  background: #1E293B !important;           /* slate-800 */
  color: #FFFFFF !important;
  border: 1px solid #334155 !important;     /* slate-700 */
  font-weight: 600 !important;
}
input::placeholder,
textarea::placeholder,
.fi::placeholder,
.fta::placeholder,
.mbrs-search::placeholder {
  color: #94A3B8 !important;                /* slate-400 */
  font-weight: 500 !important;
  opacity: 1 !important;
}
input:focus,
select:focus,
textarea:focus,
.fi:focus,
.fta:focus,
.mbrs-search:focus {
  background: #1E293B !important;
  color: #FFFFFF !important;
  border-color: #22D3EE !important;         /* cyan-400 focus ring */
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.20) !important;
}
/* Autofill (Chrome blue / yellow) → on force dark */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px #1E293B inset !important;
  caret-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* ═══════════════════════════════════════════════════════════════════════
   §16. RACINE — fond global slate-950
   ─────────────────────────────────────────────────────────────────────── */

html, body, #app, #root, .pg, .page-root {
  background: #020617 !important;           /* slate-950 — racine demandée */
}
/* Mais les conteneurs scrollables restent légèrement plus clairs pour
   créer une hiérarchie visuelle : page = slate-950, cards = slate-900. */
.scrl, .scrollable, main, .main-content {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §17. PAGE PLAN (#pg-pln) — éradication des fonds blancs résiduels
   ───────────────────────────────────────────────────────────────────────
   Les règles d'origine (index.html l.956-982) posaient background:#FFFFFF
   sur 4 éléments imbriqués :
     • #pg-pln           (page Plan elle-même)
     • #pg-pln .pw2      (wrapper interne scrollable)
     • #pg-pln .ps       (bandeau TOP — compteurs Libres/Occupés/En attente)
     • #pg-pln .pl       (bandeau BOTTOM — légende couleurs <1h/1-2h/>2h)
   Spécificité v304 augmentée pour battre l'inline. */

#pg-pln,
body:has(#p-app.on) #pg-pln {
  background: #020617 !important;           /* slate-950 — page racine */
}
#pg-pln .pw2,
body:has(#p-app.on) #pg-pln .pw2 {
  background: transparent !important;       /* laisse traverser le slate-950 */
}

/* Bandeau status TOP — Libres (cyan) / Occupés (rouge) / En attente (ambre) */
#pg-pln .ps,
body:has(#p-app.on) #pg-pln .ps {
  background: #0F172A !important;           /* slate-900 */
  color: #FFFFFF !important;
  border-bottom: 1px solid #1E293B !important;  /* slate-800 */
  padding: 12px 16px !important;
  font-weight: 700 !important;
}
/* Sémantique des compteurs : on conserve les accents cyan/rouge/ambre
   mais on les éclaircit pour bien contraster sur fond sombre. */
#pg-pln .ps > div:first-child,
body:has(#p-app.on) #pg-pln .ps > div:first-child {
  color: #22D3EE !important;                /* cyan-400 — Libres */
  text-shadow: 0 0 8px rgba(34,211,238,.30) !important;
}
#pg-pln .ps > div:nth-child(2),
body:has(#p-app.on) #pg-pln .ps > div:nth-child(2) {
  color: #F87171 !important;                /* red-400 — Occupés */
  text-shadow: 0 0 8px rgba(248,113,113,.30) !important;
}
#pg-pln .ps > div:nth-child(3),
body:has(#p-app.on) #pg-pln .ps > div:nth-child(3) {
  color: #FBBF24 !important;                /* amber-400 — En attente */
  text-shadow: 0 0 8px rgba(251,191,36,.30) !important;
}
/* Compteurs numériques (<span id="ps-l/o/a">) → blanc pur, plus visibles */
#pg-pln .ps span[id^="ps-"] {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Bandeau légende BOTTOM — Libre / <1h / 1-2h / >2h */
#pg-pln .pl,
body:has(#p-app.on) #pg-pln .pl {
  background: #0F172A !important;           /* slate-900 */
  color: #E2E8F0 !important;                /* slate-200 — Directeur demande ce ton précis */
  border-top: 1px solid #1E293B !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
}
#pg-pln .lgi,
body:has(#p-app.on) #pg-pln .lgi {
  color: #E2E8F0 !important;                /* items légende */
  font-weight: 600 !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §18. PAGE FIN SERVICE (#pg-fin / #s-fin) — toutes les colonnes en sombre
   ───────────────────────────────────────────────────────────────────────
   Page Fin Service contient des sous-cartes (.cd) ACTIVES/TERMINÉES/etc.
   On force la racine en slate-950, les sous-blocs slate-900, sessions
   slate-800 avec bord slate-700 comme demandé. */

#pg-fin,
#s-fin,
body:has(#p-app.on) #pg-fin,
body:has(#p-app.on) #s-fin {
  background: #020617 !important;           /* slate-950 */
  color: #F1F5F9 !important;
}
#pg-fin .cd,
#s-fin .cd,
body:has(#p-app.on) #pg-fin .cd,
body:has(#p-app.on) #s-fin .cd {
  background: #0F172A !important;           /* slate-900 — colonnes */
  border: 1px solid #1E293B !important;
  color: #F1F5F9 !important;
}
#pg-fin .cd-h,
#s-fin .cd-h,
body:has(#p-app.on) #pg-fin .cd-h,
body:has(#p-app.on) #s-fin .cd-h {
  color: #FFFFFF !important;                /* titres "ACTIVES (6)" etc. */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
/* Sous-cartes session à l'intérieur (PS4 — P.8, etc.) — pattern .sc / .sc-card / .ev-session */
#pg-fin .sc,
#pg-fin .sc-card,
#pg-fin .ev-session,
#pg-fin .session-card,
#s-fin .sc,
#s-fin .sc-card,
#s-fin .ev-session,
#s-fin .session-card {
  background: #1E293B !important;           /* slate-800 */
  border: 1px solid #334155 !important;     /* slate-700 */
  border-radius: 10px !important;
  color: #FFFFFF !important;
}
#pg-fin .sc .ttl,
#pg-fin .sc-card .ttl,
#pg-fin .sc b,
#pg-fin .sc-card b,
#s-fin .sc .ttl,
#s-fin .sc-card .ttl,
#s-fin .sc b,
#s-fin .sc-card b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
/* Minuteurs / chronos / temps écoulé dans les sessions */
#pg-fin .timer,
#pg-fin .chrono,
#pg-fin .elapsed,
#s-fin .timer,
#s-fin .chrono,
#s-fin .elapsed {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §19. MINI CARTE FLOTTANTE #fs-bar — Fin de Service bottom-left
   ───────────────────────────────────────────────────────────────────────
   Le `#fs-bar` (Opérateur / Encaissé / Wallet / En cours / Total) a déjà
   été partiellement traité par v283/v284, mais il restait des textes
   inline `color:#0F172A` invisibles sur fond sombre. On verrouille. */

#fs-bar,
body:has(#p-app.on) #fs-bar {
  background: #020617 !important;           /* slate-950 — racine */
  border: 1px solid #1E293B !important;     /* slate-800 */
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
  padding: 14px !important;
}
#fs-bar .fs-ttl,
body:has(#p-app.on) #fs-bar .fs-ttl {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
#fs-bar .fs-lbl,
body:has(#p-app.on) #fs-bar .fs-lbl {
  color: #CBD5E1 !important;                /* slate-300 — libellés */
  font-weight: 600 !important;
}
#fs-bar .fs-seg,
body:has(#p-app.on) #fs-bar .fs-seg {
  color: #FFFFFF !important;                /* parent par défaut */
}
#fs-bar .fs-seg b,
body:has(#p-app.on) #fs-bar .fs-seg b {
  color: #FFFFFF !important;                /* TOUS les chiffres en blanc */
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Total final en accent vert pour saillir */
#fs-bar .fs-total b,
#fs-bar #fs-tot,
body:has(#p-app.on) #fs-bar .fs-total b,
body:has(#p-app.on) #fs-bar #fs-tot {
  color: #10F0A1 !important;                /* vert néon */
  font-weight: 900 !important;
  font-size: 14px !important;
}
/* Encaissé / En cours en vert plus léger */
#fs-bar #fs-enc,
#fs-bar #fs-cours,
body:has(#p-app.on) #fs-bar #fs-enc,
body:has(#p-app.on) #fs-bar #fs-cours {
  color: #34D399 !important;                /* emerald-400 */
  font-weight: 800 !important;
}
/* Wallet en cyan pour le distinguer du cash */
#fs-bar #fs-wallet,
body:has(#p-app.on) #fs-bar #fs-wallet {
  color: #22D3EE !important;                /* cyan-400 */
  font-weight: 800 !important;
}
/* Border-top du Total (était #E2E8F0 clair) */
#fs-bar .fs-seg.fs-total,
body:has(#p-app.on) #fs-bar .fs-seg.fs-total {
  border-top: 1px solid #1E293B !important; /* slate-800 */
  padding-top: 8px !important;
  margin-top: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §20. CARTES KPI OPÉRATEUR (.kc/.kl/.kv) — les 6 du dashboard opérateur
   ───────────────────────────────────────────────────────────────────────
   Pattern : <div class="kc"><div class="kl">💰 Mon CA</div>
              <div class="kv g">24 DH</div></div>
   Distinctes des .tbd-card (§3). Définies index.html l.564-594. */

.kc,
body:has(#p-app.on) .kc {
  background: #0F172A !important;             /* slate-900 */
  border: 1px solid #1E293B !important;       /* slate-800 */
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.30),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.kc:hover,
body:has(#p-app.on) .kc:hover {
  border-color: #334155 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.50),
              inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.kl,
body:has(#p-app.on) .kl {
  color: #94A3B8 !important;                  /* slate-400 — label */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-size: 11px !important;
}
.kv,
body:has(#p-app.on) .kv {
  color: #FFFFFF !important;                  /* blanc par défaut */
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Variantes sémantiques colorées — text-shadow garde le glow néon */
.kv.g,
body:has(#p-app.on) .kv.g {
  color: #34D399 !important;                  /* emerald-400 — vert positif */
  text-shadow: 0 0 24px rgba(52,211,153,.30) !important;
}
.kv.b,
body:has(#p-app.on) .kv.b {
  color: #22D3EE !important;                  /* cyan-400 — info */
  text-shadow: 0 0 24px rgba(34,211,238,.30) !important;
}
.kv.r,
body:has(#p-app.on) .kv.r {
  color: #F87171 !important;                  /* red-400 — alerte */
  text-shadow: 0 0 24px rgba(248,113,113,.30) !important;
}
.kv.o,
body:has(#p-app.on) .kv.o {
  color: #FBBF24 !important;                  /* amber-400 — warning */
  text-shadow: 0 0 24px rgba(251,191,36,.30) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §21. CARTES SESSIONS ACTIVES (.sc) — PS4 — P.13, PS5 — P.2, etc.
   ───────────────────────────────────────────────────────────────────────
   Pattern actuel index.html l.2731-2760 : fond NON défini par défaut
   (transparent → page) MAIS variantes .sc.w (warning) et .sc.a (alerte)
   forcent des fonds pastel clairs. Pastille prix .sc .sp en vert pâle.
   Timer .sc .tg:has([id^="ld-"]) sur fond gris pâle.
   → On dark-ifie tout avec couleurs vives sur fonds sombres. */

.sc,
body:has(#p-app.on) .sc {
  background: #1E293B !important;             /* slate-800 — Directeur demande */
  border: 1px solid rgba(51,65,85,.60) !important;  /* slate-700/60 */
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}
/* Warning (>1h) et Alert (>2h) — on garde la sémantique via bord saturé */
.sc.w,
body:has(#p-app.on) .sc.w {
  background: #1E293B !important;
  border-color: #F59E0B !important;           /* amber-500 */
  box-shadow: 0 4px 12px rgba(245,158,11,.20),
              inset 0 1px 0 rgba(245,158,11,.10) !important;
}
.sc.a,
body:has(#p-app.on) .sc.a {
  background: #1E293B !important;
  border-color: #EF4444 !important;           /* red-500 */
  box-shadow: 0 4px 12px rgba(239,68,68,.25),
              inset 0 1px 0 rgba(239,68,68,.10) !important;
}
/* Titre poste "PS4 — P.13" */
.sc .sn,
body:has(#p-app.on) .sc .sn,
body:has(#p-app.on) #p-app .sc .sn {
  color: #CBD5E1 !important;                  /* slate-300 — Directeur demande */
  font-weight: 800 !important;
  font-size: 14px !important;
}
/* Pastille prix "17 DH" — capsule emerald dark */
.sc .sp,
body:has(#p-app.on) .sc .sp,
body:has(#p-app.on) #p-app .sc .sp {
  background: rgba(6,78,59,.80) !important;   /* emerald-950 / 80 */
  color: #34D399 !important;                  /* emerald-400 */
  border: 1px solid rgba(16,185,129,.30) !important; /* emerald-500/30 */
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
/* Timer central (TEMPS ÉCOULÉ "01:06:26") */
.sc .tg:has([id^="ld-"]),
body:has(#p-app.on) .sc .tg:has([id^="ld-"]) {
  background: #0F172A !important;             /* slate-900 — fond timer */
  border: 1px solid #334155 !important;       /* slate-700 */
  border-radius: 14px !important;
  padding: 16px 12px !important;
}
.sc .tg:has([id^="ld-"])::before,
body:has(#p-app.on) .sc .tg:has([id^="ld-"])::before {
  color: #94A3B8 !important;                  /* slate-400 — "TEMPS ÉCOULÉ" */
  font-weight: 800 !important;
}
.sc .tg:has([id^="ld-"]) [id^="ld-"],
body:has(#p-app.on) .sc .tg:has([id^="ld-"]) [id^="ld-"],
body:has(#p-app.on) #p-app .sc .tg:has([id^="ld-"]) [id^="ld-"] {
  color: #FFFFFF !important;                  /* blanc pur pour le chrono */
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(34,211,238,.20) !important;  /* glow cyan léger */
}
/* Variantes warning/alert — timer prend la teinte de l'état */
.sc.w .tg:has([id^="ld-"]),
body:has(#p-app.on) .sc.w .tg:has([id^="ld-"]) {
  background: rgba(69,26,3,.50) !important;   /* amber-950/50 */
  border-color: rgba(245,158,11,.40) !important;
}
.sc.a .tg:has([id^="ld-"]),
body:has(#p-app.on) .sc.a .tg:has([id^="ld-"]) {
  background: rgba(69,10,10,.50) !important;  /* red-950/50 */
  border-color: rgba(239,68,68,.40) !important;
}
.sc.w .tg:has([id^="ld-"]) [id^="ld-"],
body:has(#p-app.on) .sc.w .tg:has([id^="ld-"]) [id^="ld-"] {
  color: #FBBF24 !important;                  /* amber-400 — timer warning */
}
.sc.a .tg:has([id^="ld-"]) [id^="ld-"],
body:has(#p-app.on) .sc.a .tg:has([id^="ld-"]) [id^="ld-"] {
  color: #F87171 !important;                  /* red-400 — timer alerte */
}
/* Tags annexes (heure d'entrée, badge pause) */
.sc .tg,
body:has(#p-app.on) .sc .tg {
  background: rgba(15,23,42,.60) !important;
  color: #CBD5E1 !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §22. CHARTS SVG — labels, axes, text en blanc pur
   ───────────────────────────────────────────────────────────────────────
   Les charts (CSS bar chart `.tbd-chart`, et tout SVG inline ayant `<text>`
   pour axes/labels) doivent avoir leurs textes en blanc pour rester
   lisibles sur le fond slate-950. CSS `fill` cible les éléments SVG. */

svg text,
svg tspan,
svg .axis,
svg .axis text,
svg .legend,
svg .legend text,
svg .label,
svg .chart-label,
svg .data-label {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  font-family: inherit !important;
}
/* Lignes d'axes / grilles → slate-700 discrètes */
svg .axis line,
svg .axis path,
svg .grid line,
svg .gridline,
svg line.grid {
  stroke: #334155 !important;                /* slate-700 */
  stroke-opacity: .60 !important;
}
/* Tick labels (les valeurs sur les axes) */
svg .tick text,
svg g.tick text,
svg .axis .tick text {
  fill: #CBD5E1 !important;                  /* slate-300 — secondaires */
  font-weight: 600 !important;
}
/* Legend swatches — laisser leur fill brand intact (couleurs sémantiques),
   mais leur texte en slate-200 par défaut. */
svg .legend-item text,
svg .legend text {
  fill: #E2E8F0 !important;                  /* slate-200 */
  font-weight: 600 !important;
}

/* Bar chart CSS .tbd-chart — déjà couvert §3 mais on verrouille les valeurs */
.tbd-chart-bar-val {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §23. PAGE FIN SERVICE — boutons .btn.bgh + carte hero .bx-hero
   ───────────────────────────────────────────────────────────────────────
   Les boutons "🔄 Actualiser" et "📥 Export CSV" (rendus app.js l.9531-9532
   en flex:1 chacun) ont le style `.btn.bgh{background:#FFFFFF}` défini
   index.html l.2709 dans le style block 160-3851. v283/v290 ont des
   overrides scope `body:has(#p-app.on)` (l.3427, 6005…). Sans le scope
   ça reste blanc → c'est ce que le Directeur voit comme "2 colonnes
   géantes blanches" sur la page Fin Service.

   v304 ajoute des règles SANS scope :has() pour être actif partout. */

.btn.bgh,
button.bgh,
body:has(#p-app.on) .btn.bgh,
body:has(#p-app.on) #p-app .btn.bgh {
  background: #1E293B !important;             /* slate-800 */
  border: 1px solid #334155 !important;       /* slate-700 */
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
  transition: background .15s, border-color .15s, transform .12s !important;
}
.btn.bgh:hover:not(:disabled),
button.bgh:hover:not(:disabled),
body:has(#p-app.on) .btn.bgh:hover:not(:disabled) {
  background: rgba(34,211,238,.10) !important;
  border-color: #22D3EE !important;           /* cyan-400 highlight */
  color: #22D3EE !important;
}
.btn.bgh:active:not(:disabled) {
  transform: scale(.97) !important;
}

/* Carte HERO Fin Service .bx-hero (le bloc "88 DH" à gauche du Directeur) */
.bx-hero,
body:has(#p-app.on) .bx-hero,
body:has(#p-app.on) #p-app .bx-hero {
  background: #0F172A !important;             /* slate-900 */
  border: 1px solid #1E293B !important;       /* slate-800 */
  border-left: 4px solid #10B981 !important;  /* emerald-500 accent */
  border-radius: 14px !important;
  padding: 18px 20px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.40),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: #F1F5F9 !important;
}
/* Libellé "💰 CA — date" */
.bx-hero .bh-lb,
body:has(#p-app.on) .bx-hero .bh-lb {
  color: #94A3B8 !important;                  /* slate-400 — métadonnée */
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
/* Le BIG montant "88 DH" — blanc pur 900 avec glow vert subtil */
.bx-hero .bh-am,
body:has(#p-app.on) .bx-hero .bh-am {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  letter-spacing: -.02em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 24px rgba(16,185,129,.25) !important;
  margin: 6px 0 4px !important;
}
/* Sous-titre "✅ X terminées · ⏳ Y active(s)" */
.bx-hero .bh-sb,
body:has(#p-app.on) .bx-hero .bh-sb {
  color: #E2E8F0 !important;                  /* slate-200 — secondaire visible */
  font-weight: 600 !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Carte "Actives (X)" — header avec couleur ambre conservée */
#pg-fin .cd-h[style*="color:var(--org)"],
#s-fin .cd-h[style*="color:var(--org)"],
body:has(#p-app.on) #pg-fin .cd-h,
body:has(#p-app.on) #s-fin .cd-h {
  color: #FBBF24 !important;                  /* amber-400 pour "Actives (X)" */
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
/* Override quand il s'agit d'un .cd-h générique (sans style ambre) */
#pg-fin .cd .cd-h,
#s-fin .cd .cd-h {
  color: #FFFFFF !important;                  /* autres en-têtes en blanc */
}
/* "Par produit" header (vert) */
#pg-fin .cd-h:not([style*="color"]),
#s-fin .cd-h:not([style*="color"]) {
  color: #FFFFFF !important;
}

/* Cartes produit .tc2 (📦 Par produit) — slate-800 */
.tc2,
body:has(#p-app.on) .tc2 {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: #F1F5F9 !important;
}
.tc2 .tp {
  color: #CBD5E1 !important;                  /* nom produit */
  font-weight: 700 !important;
}
.tc2 .tpr {
  color: #34D399 !important;                  /* prix emerald-400 */
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}
.tc2 .td {
  color: #94A3B8 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §24. PAGE CLIENTS — .mbrs-bar parent + #mbrs-search input + filtres
   ───────────────────────────────────────────────────────────────────────
   index.html l.3517-3520 force `.mbrs-bar { background:#FFFFFF }` et
   l.3521-3526 force `#mbrs-search { background:#F8FAFC; color:#0F172A }`
   dans #p-app — d'où "rien à voir l'écriture" rapporté par le Directeur.
   v304 bat avec spécificité supérieure (ajout d'un sélecteur element). */

/* Conteneur de la barre Clients — fond transparent (page slate-950 visible) */
body:has(#p-app.on) #p-app div.mbrs-bar,
body.in-app div.mbrs-bar,
div.mbrs-bar {
  background: transparent !important;
  border: 0 !important;
  padding: 8px 0 !important;
}

/* Input recherche Clients — spécificité (1,2,1) qui bat l.3521 (1,1,1) */
body:has(#p-app.on) input#mbrs-search,
body:has(#p-app.on) input#mbrs-filter,
body.in-app input#mbrs-search,
body.in-app input#mbrs-filter,
input#mbrs-search,
input#mbrs-filter {
  background: #1E293B !important;             /* slate-800 */
  color: #FFFFFF !important;                  /* texte blanc */
  border: 1px solid #334155 !important;       /* slate-700 */
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
}
input#mbrs-search:focus,
input#mbrs-filter:focus {
  border-color: #22D3EE !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.20) !important;
}
input#mbrs-search::placeholder,
input#mbrs-filter::placeholder {
  color: #94A3B8 !important;                  /* slate-400 placeholder */
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Labels de stats KPI Clients */
body:has(#p-app.on) #p-app .mbrs-stat-lbl,
body.in-app .mbrs-stat-lbl,
.mbrs-stat-lbl {
  color: #94A3B8 !important;                  /* slate-400 */
  font-weight: 700 !important;
}
body:has(#p-app.on) #p-app .mbrs-stat-val,
body.in-app .mbrs-stat-val,
.mbrs-stat-val {
  color: #FFFFFF !important;                  /* blanc pur valeurs */
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Boutons refresh / export — slate-800 */
.mbrs-refresh,
.mbrs-export,
body:has(#p-app.on) .mbrs-refresh,
body:has(#p-app.on) .mbrs-export {
  background: #1E293B !important;
  color: #FFFFFF !important;
  border: 1px solid #334155 !important;
  font-weight: 800 !important;
}
.mbrs-export,
body:has(#p-app.on) .mbrs-export {
  background: #22D3EE !important;             /* cyan accent pour Export */
  color: #04141C !important;
  border-color: #22D3EE !important;
}
.mbrs-export:hover,
body:has(#p-app.on) .mbrs-export:hover {
  background: #67E8F9 !important;             /* cyan-300 hover */
}

/* ═══════════════════════════════════════════════════════════════════════
   §25. PAGE PLAN — cellules postes .pc (PS4-1, PS5-3, etc.)
   ───────────────────────────────────────────────────────────────────────
   Les cellules postes (index.html l.991-1071) ont :
     • fonds pastel clairs (`#CFFAFE`, `#FEE2E2`, `#FEF3C7`, etc.) selon
       famille ET état → mauvaises sur thème sombre
     • textes `color:#0F172A` (slate-900) + text-shadow blanc → illisible
       et halo blanc choquant sur dark
   Solution : fonds slate-900 partout, BORDS gardent leur couleur famille
   saturée (cyan PS5, indigo PS4, amber VIP, etc.), GLOWs saturés
   conservés, textes en BLANC avec shadow noire pour profondeur. */

/* Base .pc — fond slate-900 unique, bord+glow gardent les CSS vars */
.pc,
body:has(#p-app.on) .pc,
body:has(#p-app.on) #p-app .pc {
  background: #0F172A !important;             /* slate-900 — fond uniforme */
  /* on garde --rgb-color (bord) et --rgb-glow (shadow) tels que définis
     par les classes .pc.fam-* et .pc.s-* — ce sont les couleurs vives. */
  color: #FFFFFF !important;
}

/* Override pour les variantes famille — bgs pastel → slate-900 */
.pc.fam-ps5,
.pc.fam-ps4,
.pc.fam-vip,
.pc.fam-ping-pong,
.pc.fam-volant {
  --rgb-bg: #0F172A !important;
}

/* Override pour les variantes état — bgs pastel → slate-900 + on garde
   color saturé pour le bord et glow */
.pc.s-libre   { --rgb-bg: #0F172A !important; }
.pc.s-occupe  { --rgb-bg: #0F172A !important; }
.pc.s-warn    { --rgb-bg: #0F172A !important; }
.pc.s-alerte  { --rgb-bg: #0F172A !important; }
.pc.s-attente { --rgb-bg: #0F172A !important; }
.pc.s-pause   { --rgb-bg: #0F172A !important; }
.pc.s         { --rgb-bg: #1E293B !important; opacity:.6 !important; } /* postes libres "fantômes" */

/* Bord plus saillant — 2px au lieu de 3px pour ne pas dominer */
.pc,
body:has(#p-app.on) .pc {
  border-width: 2px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.45),
              0 0 18px var(--rgb-glow) !important;
}

/* Texte du nom poste (.pc-lbl PS4-1) — blanc avec shadow noire profonde */
.pc .pc-lbl,
body:has(#p-app.on) .pc .pc-lbl {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85),
               0 0 8px rgba(0,0,0,.65) !important;
  font-size: 14px !important;
  letter-spacing: .04em !important;
}

/* Timer (00:45:12) — blanc avec shadow */
.pc .pc-timer,
body:has(#p-app.on) .pc .pc-timer {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85),
               0 0 6px rgba(0,0,0,.55) !important;
  font-size: 12px !important;
}

/* Montant DH (sous le timer) — saturé selon l'état */
.pc .pc-amt,
body:has(#p-app.on) .pc .pc-amt {
  color: #34D399 !important;                  /* emerald-400 par défaut */
  font-weight: 900 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85),
               0 0 6px rgba(0,0,0,.55) !important;
  font-size: 13px !important;
}
.pc.s-warn .pc-amt,
.pc.s-alerte .pc-amt,
body:has(#p-app.on) .pc.s-warn .pc-amt,
body:has(#p-app.on) .pc.s-alerte .pc-amt {
  color: #F87171 !important;                  /* red-400 — warn/alerte */
}
.pc.s-pause .pc-amt,
body:has(#p-app.on) .pc.s-pause .pc-amt {
  color: #FBBF24 !important;                  /* amber-400 — pause */
}

/* Raison (.pc-reason — petit texte italique) */
.pc .pc-reason,
body:has(#p-app.on) .pc .pc-reason {
  color: var(--rgb-color, #22D3EE) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
  font-weight: 700 !important;
}

/* Icône SVG chaise/écran — filter drop-shadow plus prononcé */
.pc svg.pc-svg,
body:has(#p-app.on) .pc svg.pc-svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.65))
          drop-shadow(0 0 6px var(--rgb-glow)) !important;
}

/* État libre (.s-libre) — opacité légère du fond + bord cyan/emerald */
.pc.s-libre {
  --rgb-color: #10B981 !important;            /* emerald-500 — vert vif libre */
  --rgb-glow: rgba(16,185,129,.50) !important;
}
.pc.s-occupe,
.pc.s-warn {
  --rgb-color: #EF4444 !important;            /* red-500 */
  --rgb-glow: rgba(239,68,68,.55) !important;
}
.pc.s-alerte {
  --rgb-color: #DC2626 !important;            /* red-600 saturé */
  --rgb-glow: rgba(220,38,38,.65) !important;
}
.pc.s-attente,
.pc.s-pause {
  --rgb-color: #F59E0B !important;            /* amber-500 */
  --rgb-glow: rgba(245,158,11,.55) !important;
}

/* Modal mini "pbt" (postes dans modales sélection) — refonte sombre aussi */
.pbt,
body:has(#p-app.on) .pbt {
  background: #1E293B !important;             /* slate-800 */
  border: 1px solid #334155 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.pbt:hover,
body:has(#p-app.on) .pbt:hover {
  background: #334155 !important;             /* slate-700 hover */
  border-color: #22D3EE !important;
  color: #22D3EE !important;
}
.pbt.sel,
body:has(#p-app.on) .pbt.sel {
  background: #22D3EE !important;             /* cyan-400 actif */
  border-color: #22D3EE !important;
  color: #04141C !important;
  box-shadow: 0 4px 14px rgba(34,211,238,.40) !important;
}
.pbt.occ,
body:has(#p-app.on) .pbt.occ {
  background: rgba(69,10,10,.50) !important;  /* red-950/50 occupé */
  border-color: #EF4444 !important;
  color: #F87171 !important;
  opacity: .65 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   §26. SIDEBAR GAUCHE CLIENT (mb-p-app) — <aside tw-bg-white>
   ───────────────────────────────────────────────────────────────────────
   Sidebar desktop ≥1024px (index.html l.4375) — `<aside class="tw-bg-white">`
   avec wrapper interne `tw-bg-[#F8FAFC]` + textes `tw-text-[#1F2937]`
   et `tw-text-[#64748B]`. Tailwind utilities arbitraires en `tw-bg-[#...]`
   ne sont pas couvertes par mon §1 (qui ne cible que les classes
   nommées comme `tw-bg-white`). On les cible via [class*="tw-bg-["]. */

/* Sidebar racine */
aside.tw-bg-white,
aside[class*="tw-bg-white"] {
  background: #0F172A !important;             /* slate-900 */
  border-right: 1px solid #1E293B !important; /* slate-800 */
  color: #F1F5F9 !important;
}

/* Wrapper "avatar + nom + solde" — était tw-bg-[#F8FAFC] (slate-50) */
aside .tw-bg-\[\#F8FAFC\],
aside [class*="tw-bg-[#F8FAFC]"],
aside [class*="tw-bg-[#F1F5F9]"],
aside [class*="tw-bg-[#FFFFFF]"] {
  background: #1E293B !important;             /* slate-800 */
  border: 1px solid #334155 !important;       /* slate-700 */
  color: #F1F5F9 !important;
}

/* Texte nom client (tb-nm) et solde (tb-pts) — étaient slate-900/slate-500 */
aside #tb-nm,
aside [class*="tw-text-[#1F2937]"],
aside [class*="tw-text-[#0F172A]"],
aside [class*="tw-text-[#111827]"],
aside [class*="tw-text-[#1E293B]"] {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
aside #tb-pts,
aside [class*="tw-text-[#64748B]"],
aside [class*="tw-text-[#475569]"],
aside [class*="tw-text-[#94A3B8]"] {
  color: #34D399 !important;                  /* emerald-400 pour le solde */
  font-weight: 700 !important;
}

/* Logo "🎮 EspaceVirtuel" en haut — était teal foncé invisible */
aside [class*="tw-text-[#2D5A60]"] {
  color: #22D3EE !important;                  /* cyan-400 — brand sur dark */
  font-weight: 800 !important;
}

/* Bordures internes — slate-700 */
aside [class*="tw-border-[#E2E8F0]"],
aside [class*="tw-border-[#CBD5E1]"] {
  border-color: #334155 !important;
}

/* Boutons de navigation .evcx-side (Accueil, QR, Historique, Contact) */
.evcx-side,
aside .evcx-side {
  background: transparent !important;
  color: #CBD5E1 !important;                  /* slate-300 par défaut */
  border: 0 !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .15s, color .15s !important;
}
.evcx-side:hover,
aside .evcx-side:hover {
  background: rgba(34,211,238,.08) !important;
  color: #FFFFFF !important;
}
.evcx-side.evcx-navactive,
aside .evcx-side.evcx-navactive {
  background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(34,211,238,.04)) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 0 #22D3EE !important;
}
.evcx-ic,
aside .evcx-ic {
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

/* Sous-boutons en bas (Mot de passe / Mes données / Déconnexion) */
.evcx-sub,
aside .evcx-sub {
  background: transparent !important;
  color: #94A3B8 !important;                  /* slate-400 — secondaires */
  border: 0 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .15s, color .15s !important;
}
.evcx-sub:hover,
aside .evcx-sub:hover {
  background: rgba(255,255,255,.04) !important;
  color: #FFFFFF !important;
}
/* Bouton Déconnexion en rouge */
.evcx-sub[onclick*="doLogout"],
aside .evcx-sub[onclick*="doLogout"] {
  color: #F87171 !important;                  /* red-400 */
}
.evcx-sub[onclick*="doLogout"]:hover,
aside .evcx-sub[onclick*="doLogout"]:hover {
  background: rgba(69,10,10,.40) !important;
  color: #FCA5A5 !important;
}

/* Header mobile (#mb-mobile-header) qui apparaît < 1024px — fond white inline */
header#mb-mobile-header,
#mb-mobile-header {
  background: #0F172A !important;             /* slate-900 */
  border-bottom: 1px solid #1E293B !important;
  color: #FFFFFF !important;
}
header#mb-mobile-header > div:first-child,
#mb-mobile-header [style*="color:#1e293b"] {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Wrapper main container — était tw-bg-slate-50 light */
div.tw-flex.tw-bg-slate-50,
div[class*="tw-bg-slate-50"] {
  background: #020617 !important;             /* slate-950 — racine page */
}

/* ═══════════════════════════════════════════════════════════════════════
   §27. PAGE CLIENTS — 4 cartes KPI .mbrs-stat (Total/Actifs/Solde/CA)
   ───────────────────────────────────────────────────────────────────────
   index.html l.3510-3516 force `.mbrs-stat { background:#FFFFFF }` +
   `.mbrs-stat-val { color:#0F172A }` avec spécificité (2,1,1) dans
   #p-app. v304 §24 ne ciblait que les enfants — j'ai oublié le
   conteneur, d'où chiffres blancs invisibles sur fond blanc.
   Cette section bat avec même spécificité (source order favorise v304). */

body:has(#p-app.on) #p-app .mbrs-stat,
body.in-app .mbrs-stat,
.mbrs-stat {
  background: #0F172A !important;             /* slate-900 */
  border: 1px solid #1E293B !important;       /* slate-800 */
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.30),
              inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: #F1F5F9 !important;
}
body:has(#p-app.on) #p-app .mbrs-stat:hover,
.mbrs-stat:hover {
  border-color: #334155 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45) !important;
}

/* Label "Total clients" / "Actifs" / "Solde global" / "CA cumulé" */
body:has(#p-app.on) #p-app .mbrs-stat-lbl,
body.in-app .mbrs-stat-lbl,
.mbrs-stat-lbl {
  color: #CBD5E1 !important;                  /* slate-300 — Directeur demande */
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin-bottom: 6px !important;
}

/* Valeurs "118" / "1290 DH" / etc. — blanc pur 900 */
body:has(#p-app.on) #p-app .mbrs-stat-val,
body.in-app .mbrs-stat-val,
.mbrs-stat-val {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.02em !important;
}

/* Variante teintée pour stat positive / négative si présente */
.mbrs-stat.is-positive .mbrs-stat-val,
.mbrs-stat.is-good .mbrs-stat-val {
  color: #34D399 !important;                  /* emerald-400 */
  text-shadow: 0 0 20px rgba(52,211,153,.30) !important;
}
.mbrs-stat.is-warning .mbrs-stat-val {
  color: #FBBF24 !important;                  /* amber-400 */
}
.mbrs-stat.is-danger .mbrs-stat-val {
  color: #F87171 !important;                  /* red-400 */
}

/* Conteneur des 4 cartes .mbrs-stats — grille slate-950 transparent */
body:has(#p-app.on) #p-app .mbrs-stats,
.mbrs-stats {
  background: transparent !important;
  padding: 8px 0 12px !important;
}

/* Cartes .mbrs-card (rangées Clients vue mobile/grille) si présentes */
body:has(#p-app.on) #p-app .mbrs-card,
.mbrs-card {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #F1F5F9 !important;
}

/* Filtres "Tous / Actifs récents / Inactifs" — boutons probables */
body:has(#p-app.on) #p-app .mbrs-filter,
.mbrs-filter {
  background: #1E293B !important;
  color: #FFFFFF !important;
  border: 1px solid #334155 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   §50. BUG 7 FIX (2026-05-26) — CONTRASTE CONSOLES / SESSIONS
   ───────────────────────────────────────────────────────────────────────────
   index.html (l. ~3639/3671 et voisins) contient encore des règles LEGACY du
   thème clair de la forme :
     body:has(#p-app.on) #p-app .pc-lbl { color:#0F172A !important; }
     body:has(#p-app.on) #p-app .sc .sn { color:#0F172A !important; }
     body:has(#p-app.on) #p-app .sc .tg:has([id^="ld-"]) [id^="ld-"] {
       color:#0F172A !important; -webkit-text-fill-color:#0F172A !important;
     }
   Ces sélecteurs ont la spécificité (0,3,2) — ils battent §21/§25 (0,2,2/0,3,2)
   et imposent du texte slate-900 sur fond slate-900 → texte noir sur noir,
   illisible (compteurs et tarifs des cartes consoles "PS4 — P.13", etc.).
   On enchâsse les overrides dans `html` (spécificité 0,0,1 supplémentaire)
   pour atteindre (0,3,3) et gagner sur (0,3,2) du legacy.

   PALETTE STRICTEMENT THÈME SOMBRE (feedback Directeur 2026-05-26) :
     • Texte courant : #FFFFFF (principal) / #F1F5F9 / #CBD5E1 (secondaires)
     • PAS de couleurs vives (emerald/amber/red) sur le texte — la sémantique
       d'état (warn/alerte/pause) passe par le BORD et le GLOW de la cellule,
       pas par la couleur du texte. */
html body:has(#p-app.on) #p-app .pc .pc-lbl,
html body:has(#p-app.on) #p-app .pc .pc-timer,
html body:has(#p-app.on) #p-app .pc .pc-amt {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.55) !important;
  font-weight: 900 !important;
  filter: none !important;            /* anti-blur défensif */
  opacity: 1 !important;
}
/* États warn / alerte / pause : on garde un texte clair lisible.
   La distinction visuelle se fait via le bord coloré et le glow déjà gérés
   par §25 (lignes 1442-1460), pas via la couleur du texte. */
html body:has(#p-app.on) #p-app .pc.s-warn .pc-amt,
html body:has(#p-app.on) #p-app .pc.s-alerte .pc-amt,
html body:has(#p-app.on) #p-app .pc.s-pause .pc-amt {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Postes libres "fantômes" (.pc.s sans état actif) — texte slate atténué */
html body:has(#p-app.on) #p-app .pc.s .pc-lbl {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
}

/* Cartes sessions actives .sc (PS4 — P.13, PS5 — P.2…) — titre + pastille prix
   + timer central. Tout en blanc/slate, pas d'emerald, pas d'amber, pas de red. */
html body:has(#p-app.on) #p-app .sc .sn {
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  filter: none !important;
}
/* Pastille prix : pas de teinte verte ni jaune — on garde le badge en
   slate-800 avec texte blanc. Le bord conserve un léger glow neutre. */
html body:has(#p-app.on) #p-app .sc .sp {
  background: #1E293B !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: 1px solid #334155 !important;
}
html body:has(#p-app.on) #p-app .sc .tg:has([id^="ld-"]) [id^="ld-"],
html body:has(#p-app.on) #p-app .sc.w .tg:has([id^="ld-"]) [id^="ld-"],
html body:has(#p-app.on) #p-app .sc.a .tg:has([id^="ld-"]) [id^="ld-"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  filter: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   §51. MODAL DÉTAIL DES DÉPENSES (#m-dep-detail) — 2026-05-26
   ───────────────────────────────────────────────────────────────────────────
   Le modal contient des logs/textes libres saisis par l'opérateur (commande
   en darija, justificatif…). Texte STRICTEMENT BLANC sur slate-950 partout —
   on neutralise toute règle de coloration héritée qui pousserait du violet
   ou du bleu foncé (var(--tx2), syntax highlighters, etc.). Aucun fond clair. */
html body:has(#p-app.on) #m-dep-detail .md,
#m-dep-detail .md {
  background: #0F172A !important;
  border: 1px solid #1E293B !important;
  color: #FFFFFF !important;
}
html body:has(#p-app.on) #m-dep-detail .mdt,
#m-dep-detail .mdt {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body:has(#p-app.on) #m-dep-detail #m-dep-detail-head,
#m-dep-detail #m-dep-detail-head {
  background: #020617 !important;
  border: 1px solid #1E293B !important;
  color: #FFFFFF !important;
}
html body:has(#p-app.on) #m-dep-detail #m-dep-detail-list,
html body:has(#p-app.on) #m-dep-detail #m-dep-detail-list *,
#m-dep-detail #m-dep-detail-list,
#m-dep-detail #m-dep-detail-list * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Anti syntax-highlight : neutralise toute coloration de spans tokens
   éventuelle (au cas où un plugin tierce injecterait des tokens colorés). */
#m-dep-detail [class*="hljs"],
#m-dep-detail [class*="token"],
#m-dep-detail code,
#m-dep-detail pre {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: transparent !important;
  filter: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   §52. INPUTS DATE / TIME / DATETIME — color-scheme dark 2026-05-26
   ───────────────────────────────────────────────────────────────────────────
   Chrome/Safari/Firefox utilisent leur palette par défaut (texte noir, icône
   calendrier sombre) pour le rendu natif des contrôles `<input type=date>` —
   ignorés par les règles `color:` classiques. La solution est `color-scheme`
   qui bascule TOUTES les UI natives (texte JJ/MM/AAAA, icône, spinner, picker
   overlay) en mode sombre. On l'applique globalement, en filet de sécurité. */
html body:has(#p-app.on) input[type="date"],
html body:has(#p-app.on) input[type="datetime-local"],
html body:has(#p-app.on) input[type="time"],
html body:has(#p-app.on) input[type="month"],
html body:has(#p-app.on) input[type="week"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  color-scheme: dark !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: #0F172A !important;
  border-color: #334155 !important;
}
/* Icône calendrier WebKit en blanc (par défaut elle est sombre) */
html body:has(#p-app.on) input[type="date"]::-webkit-calendar-picker-indicator,
html body:has(#p-app.on) input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html body:has(#p-app.on) input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.9) !important;
  cursor: pointer !important;
}
/* Texte interne JJ/MM/AAAA — WebKit utilise un pseudo-element dédié */
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit,
html body:has(#p-app.on) input[type="datetime-local"]::-webkit-datetime-edit,
html body:has(#p-app.on) input[type="time"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: #FFFFFF !important;
}
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit-text,
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit-month-field,
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit-day-field,
html body:has(#p-app.on) input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* Placeholder texte (champ vide) en slate-400 */
html body:has(#p-app.on) input[type="date"]::placeholder,
input[type="date"]::placeholder {
  color: #94A3B8 !important;
  -webkit-text-fill-color: #94A3B8 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   §53. TABLE CLIENTS — boutons d'action inline 2026-05-26
   ───────────────────────────────────────────────────────────────────────────
   Les boutons rendus par voirMembreDetail / validerCINMembre / etc. ont
   un `style="background:#ECFDF5"` (vert pâle) ou `background:#FEF2F2` (rose
   pâle) inline. v304 catch-all les passe en sombre → texte initialement
   en couleur saturée (047857, B91C1C…) reste lisible MAIS sur fond sombre
   parfois trop terne. On force ici une variante "alpha sur slate-800" pour
   chaque action, avec texte en variante claire (300/400) bien lisible. */
html body:has(#p-app.on) #s-mbrs .mbrs-act,
#s-mbrs .mbrs-act {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  color: #F1F5F9 !important;
  -webkit-text-fill-color: #F1F5F9 !important;
}
/* Variante "Valider CIN" — vert succès */
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="ECFDF5" i],
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="#10B981" i],
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="047857" i] {
  background: rgba(6,78,59,.45) !important;
  border-color: #10B981 !important;
  color: #6EE7B7 !important;
  -webkit-text-fill-color: #6EE7B7 !important;
}
/* Variante "M.D.P Oublié" — cyan info */
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="0EA5E9" i],
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="0369A1" i] {
  background: rgba(8,47,73,.45) !important;
  border-color: #22D3EE !important;
  color: #67E8F9 !important;
  -webkit-text-fill-color: #67E8F9 !important;
}
/* Variante "Supprimer" — rouge danger */
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="FCA5A5" i],
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="FEF2F2" i],
html body:has(#p-app.on) #s-mbrs .mbrs-act[style*="B91C1C" i] {
  background: rgba(127,29,29,.40) !important;
  border-color: #EF4444 !important;
  color: #FECACA !important;
  -webkit-text-fill-color: #FECACA !important;
}

/* Fin du fichier — ev-unified-dark-v304.css */