/* ════════════════════════════════════════════════════════════════
   main.v2.css — Thème SOMBRE NATIF (v283, 2026-05-24)
   ────────────────────────────────────────────────────────────────
   Conversion à la SOURCE : le sombre est désormais le thème par
   défaut, sans dépendre de html[data-theme="light"]. Les anciennes
   règles claires (fond #F8FAFC, texte #0F172A, bordures #E5E7EB)
   sont remplacées par la palette dark gaming.

   PALETTE :
     fond global   #0A0E17 (deep space)
     surface 1     #0F1623 (sidebar, top-bar)
     surface 2     #131C2E (cartes)
     surface 3     #1A2336 (cartes secondaires, hover)
     surface 4     #1B2740 (table headers, KPI accent)
     bordure       #2B3A5A (visible sur dark, AAA)
     bord faible   #1E2A44 (séparateurs internes)
     texte 1       #FFFFFF / #F1F5F9 (17.6–19.3:1)
     texte 2       #E2E8F0 (15.7:1)
     texte 3       #CBD5E1 (13:1) — plafond bas
     accent brand  #1F4E4A / #2D5A60 (teal historique, conservé pour
                   les boutons d'action — texte blanc 14:1+ dessus)
     accent néon   #22D3EE (cyan AAA 10.7:1)
     accent néon 2 #A855F7 (violet, highlights)

   IMPORTANT : seules les COULEURS sont modifiées. Tout le layout
   (grids, padding, font-size, @media) et la règle v252 « DÉBLOCAGE
   GLOBAL DU SCROLL SOURIS » sont PRÉSERVÉS À L'IDENTIQUE.

   Chargé APRÈS le CSS inline d'index.html. Cette feuille définit le
   thème natif ; les surcouches `ev-gaming-dark-v280`, `ev-darkfix-v281`,
   `ev-contrast-v282` restent en place comme filets de sécurité pour
   les couleurs encore présentes dans le markup inline.
════════════════════════════════════════════════════════════════ */

/* 1 · Jetons couleur — Gaming Dark natif (sans dépendance à data-theme).
   On cible :root + toutes les variantes data-theme connues pour neutraliser
   l'ancien scope `html[data-theme="light"]` sans le supprimer (back-compat). */
:root,
html,
html[data-theme],
html[data-theme="light"],
html[data-theme="dark"]{
  --c0:#0A0E17 !important;
  --c1:#0F1623 !important;
  --c2:#131C2E !important;
  --c3:#1A2336 !important;
  --card:#131C2E !important;
  --card-2:#1A2336 !important;
  --acc:#22D3EE !important;
  --acc-2:#67E8F9 !important;
  --acc-ink:#04141C !important;
  --blu:#22D3EE !important;
  --grad-brand:linear-gradient(135deg,#22D3EE 0%,#A855F7 100%) !important;
  --tx:#FFFFFF !important;
  --tx2:#E2E8F0 !important;
  --tx3:#CBD5E1 !important;
  --bdr:#2B3A5A !important;
  --bdr2:#1E2A44 !important;
  --bdr3:#2B3A5A !important;
}

/* 2 · Arrière-plan : sombre profond, plus aucun fond clair en source */
html,body,
html[data-theme="light"] body,
html[data-theme="dark"] body{
  background:#0A0E17 !important;color:#F1F5F9 !important;
}
html::before,
html[data-theme="light"]::before,
html[data-theme="dark"]::before{
  background:#0A0E17 !important;background-image:none !important;
}
body::before,body::after{display:none !important}

/* 3 · États actifs (navigation, indicateur, onglets admin) */
.bn .ni.on{background:rgba(34,211,238,.16) !important;color:#FFFFFF !important}
.bn .ni.on::before{background:#22D3EE !important}
.tab.on{background:rgba(34,211,238,.16) !important;color:#22D3EE !important}
.tab:hover:not(.on){background:rgba(255,255,255,.04) !important;color:#FFFFFF !important}

/* 4 · Onglets « Se connecter / S'inscrire » : actif Teal · inactif sombre */
.atab.on{background:#1F4E4A !important;color:#FFFFFF !important;border-color:#1F4E4A !important}
.atab:not(.on){background:#131C2E !important;color:#CBD5E1 !important;border:1px solid #2B3A5A !important}

/* 5 · Boutons principaux → Teal #1F4E4A (brand historique) sur dark */
.btn.ba,.btn.bg,.btn.br,.btn.bo,.btn.bd{
  background:#1F4E4A !important;color:#FFFFFF !important;
  border:1px solid #1F4E4A !important;
}
.btn.ba:hover,.btn.bg:hover,.btn.br:hover,.btn.bo:hover,.btn.bd:hover{
  background:#2D5A60 !important;border-color:#2D5A60 !important;
}

/* 6 · Filet anti-bleu vif : tout fond bleu vif codé en dur → Cyan néon */
[style*="background:#3b82f6"],[style*="background:#3B82F6"],
[style*="background:#2563eb"],[style*="background:#2563EB"],
[style*="background:#60a5fa"],[style*="background:#60A5FA"],
[style*="background:#1d4ed8"],[style*="background:#1D4ED8"]{
  background:#22D3EE !important;color:#04141C !important;
}

/* 7 · Dégradés résiduels inline → aplatis en surface sombre */
[style*="linear-gradient(135deg,#"]{background:#131C2E !important;border-color:#2B3A5A !important;color:#F1F5F9 !important}

/* ════════════════════════════════════════════════════════════════
   8 · Page Membres — data-table dark (LAYOUT INCHANGÉ)
════════════════════════════════════════════════════════════════ */
/* Header de stats — 4 cartes compactes sur une ligne */
#s-mbrs .mbrs-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
#s-mbrs .mbrs-stat{background:#131C2E;border:1px solid #2B3A5A;border-radius:10px;padding:10px 13px}
#s-mbrs .mbrs-stat-lbl{font-size:11px;color:#CBD5E1;font-weight:600;white-space:nowrap}
#s-mbrs .mbrs-stat-val{font-size:21px;font-weight:800;color:#FFFFFF;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:3px}
@media (max-width:560px){#s-mbrs .mbrs-stats{grid-template-columns:repeat(2,1fr)}}

/* Barre recherche (gauche) + filtre + export (droite) */
#s-mbrs .mbrs-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#s-mbrs .mbrs-search{flex:1;min-width:200px;padding:9px 13px;background:#0A0E17;border:1px solid #2B3A5A;border-radius:8px;font-size:14px;font-family:inherit;color:#FFFFFF;outline:none}
#s-mbrs .mbrs-search:focus{border-color:#22D3EE;box-shadow:0 0 0 3px rgba(34,211,238,.22)}
#s-mbrs .mbrs-search::placeholder{color:#94A3B8;opacity:1}
#s-mbrs .mbrs-filter{padding:9px 12px;background:#0A0E17;border:1px solid #2B3A5A;border-radius:8px;font-size:13px;font-family:inherit;color:#FFFFFF;cursor:pointer;outline:none}
#s-mbrs .mbrs-refresh{background:#131C2E;border:1px solid #2B3A5A;border-radius:8px;padding:8px 12px;font-size:14px;cursor:pointer;color:#F1F5F9}
#s-mbrs .mbrs-refresh:hover{border-color:#22D3EE;color:#22D3EE}
#s-mbrs .mbrs-export{margin-left:auto;background:#22D3EE;color:#04141C;border:1px solid #22D3EE;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
#s-mbrs .mbrs-export:hover{background:#67E8F9;border-color:#67E8F9}

/* Data-table : surface sombre, bordures #2B3A5A, en-tête legèrement plus clair */
#s-mbrs .mbrs-table-wrap,#s-env .mbrs-table-wrap{background:#131C2E;border:1px solid #2B3A5A;border-radius:12px;overflow:hidden;overflow-x:auto}
#s-mbrs table.mbrs-table,#s-env table.mbrs-table{width:100%;border-collapse:collapse;background:transparent;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
#s-mbrs .mbrs-table th,#s-env .mbrs-table th{background:#1B2740;color:#CBD5E1;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:11px 14px;text-align:left;border-bottom:1px solid #2B3A5A;white-space:nowrap}
#s-mbrs .mbrs-table td,#s-env .mbrs-table td{padding:12px 14px;border-bottom:1px solid #1E2A44;font-size:13px;color:#F1F5F9;vertical-align:middle}
#s-mbrs .mbrs-table tbody tr:last-child td,#s-env .mbrs-table tbody tr:last-child td{border-bottom:0}
#s-mbrs .mbrs-table tbody tr:hover td,#s-env .mbrs-table tbody tr:hover td{background:rgba(34,211,238,.07)}
/* Refonte 2026-05-26 — meilleure densité texte secondaire + boutons aérés */
#s-mbrs .mbrs-qr,#s-env .mbrs-qr{font-size:12px;color:#94A3B8;font-family:ui-monospace,monospace;margin-top:5px;letter-spacing:.02em;font-weight:500}
#s-mbrs .mbrs-email,#s-env .mbrs-email{font-size:12px;color:#CBD5E1;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-mbrs .mbrs-dot,#s-env .mbrs-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-left:5px}
#s-mbrs .mbrs-act,#s-env .mbrs-act{background:#1E293B;border:1px solid #334155;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;margin:3px 4px;font-family:inherit;color:#F1F5F9;transition:all .15s}
#s-mbrs .mbrs-act:hover,#s-env .mbrs-act:hover{border-color:#22D3EE;color:#22D3EE;background:rgba(34,211,238,.10)}
#s-mbrs .mbrs-act-edit,#s-env .mbrs-act-edit{border-color:#22D3EE;color:#22D3EE}

/* ════════════════════════════════════════════════════════════════
   9 · Tableau de bord (Dashboard) — Dark, scopé à #s-acc
════════════════════════════════════════════════════════════════ */
/* Fond de page transparent — laisser le fond global #0A0E17 transparaître */
#pg-acc,#s-acc{background:transparent !important}
/* Widgets & cartes (Manager, CA, Actifs, postes PS4/VIP) → surface sombre, ombre profonde, coins 16px */
#s-acc .cd,#s-acc .kc,#s-acc .sc{
  background:#131C2E !important;
  border:1px solid #2B3A5A !important;
  border-radius:16px !important;
  box-shadow:0 4px 15px rgba(0,0,0,0.40) !important;
}
/* Boutons d'action → Bleu-Vert foncé #1F4E4A, texte blanc (brand préservé) */
#s-acc .btn.ba,#s-acc .btn.bg,#s-acc .btn.br,#s-acc .btn.bo,#s-acc .btn.bd{
  background:#1F4E4A !important;color:#FFFFFF !important;border:1px solid #1F4E4A !important;
}
#s-acc .btn.ba *,#s-acc .btn.bg *,#s-acc .btn.br *,#s-acc .btn.bo *,#s-acc .btn.bd *{color:#FFFFFF !important}
/* Compteurs géants & titres → BLANC franc (au lieu de l'ancien #0F172A invisible sur dark) */
#s-acc .kv,#s-acc .cd-h,#s-acc .sn,
#s-acc .sc .tg:has([id^="ld-"]) [id^="ld-"]{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important}
/* Structure : cartes des postes bien espacées, alignées, sans chevauchement */
@media (min-width:1024px){#s-acc{gap:24px !important}}

/* ════════════════════════════════════════════════════════════════
   10 · Tableau de bord Direction (#mobile-dashboard) — Dark
════════════════════════════════════════════════════════════════ */
#mobile-dashboard{color:#F1F5F9}
/* Rangée de statistiques — grille 4 colonnes */
#mobile-dashboard .md-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;
}
#mobile-dashboard .md-stat{
  background:#131C2E;border:1px solid #2B3A5A;border-radius:16px;
  box-shadow:0 4px 15px rgba(0,0,0,0.40);padding:14px 16px;
}
#mobile-dashboard .md-stat-lbl{
  font-size:10.5px;color:#CBD5E1;text-transform:uppercase;letter-spacing:.05em;
}
#mobile-dashboard .md-stat-val{
  font-size:27px;font-weight:900;line-height:1.1;margin-top:5px;
  font-variant-numeric:tabular-nums;color:#FFFFFF;
}
#mobile-dashboard .md-stat-sub{font-size:10.5px;color:#CBD5E1;margin-top:2px}
/* Actions rapides — 4 boutons Bleu-Vert foncé */
#mobile-dashboard .md-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#mobile-dashboard .md-act{
  background:#1F4E4A;color:#FFFFFF;border:1px solid #1F4E4A;
  padding:11px 10px;border-radius:10px;font-size:11.5px;font-weight:700;
  font-family:inherit;cursor:pointer;
}
#mobile-dashboard .md-act:hover{background:#2D5A60}
/* Grille des machines — compacte, 4-5 par ligne */
#mobile-dashboard .md-machines{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
}
#mobile-dashboard .md-machine{
  background:#1A2336;border:1px solid #2B3A5A;border-radius:12px;padding:10px 12px;color:#F1F5F9;
}
/* Barre de navigation basse — sombre, centrée */
#mobile-dashboard .md-navbar{
  position:fixed;bottom:0;left:0;right:0;
  background:#0F1623;border-top:1px solid #2B3A5A;
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:8px 16px;z-index:99999;max-width:1400px;margin:0 auto;
}
/* Responsive : on réduit le nombre de colonnes sur écran étroit */
@media (max-width:1100px){
  #mobile-dashboard .md-stats,#mobile-dashboard .md-actions{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  #mobile-dashboard .md-stats,#mobile-dashboard .md-actions{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════
   13 · Page Contrôle (#s-ctrl) — rangement géométrique
   LAYOUT 100% PRÉSERVÉ. Aucune règle de couleur dans ce bloc.
════════════════════════════════════════════════════════════════ */
#s-ctrl{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-content:start;
}
/* Carte « Contrôle Global » : 1re ligne, espace réservé en haut pour le bouton */
#s-ctrl > div:first-child{
  grid-row:1;grid-column:1;
  padding-top:58px !important;
}
/* Les 4 statistiques globales s'étalent sur toute la largeur de la carte */
#s-ctrl > div:first-child > div[style*="grid-template-columns:1fr 1fr"]{
  grid-template-columns:repeat(4,1fr) !important;
}
/* Bouton « Actualiser » : placé dans la même cellule que la carte Globale,
   ancré en haut à droite — il ne crée plus de conteneur vide dans le flux. */
#s-ctrl > .btn.bgh{
  grid-row:1;grid-column:1;
  justify-self:end;align-self:start;
  margin:16px 16px 0 0 !important;
  width:auto !important;max-width:none !important;
  min-height:0 !important;z-index:4;
}
@media (max-width:720px){
  #s-ctrl > div:first-child > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  #s-ctrl > div:first-child{padding-top:54px !important}
  #s-ctrl > .btn.bgh{margin:12px 12px 0 0 !important}
}

/* ════════════════════════════════════════════════════════════════
   14 · Page Audit (#s-audit) — espacement & colonnes du tableau
   LAYOUT 100% PRÉSERVÉ. Aucune règle de couleur dans ce bloc.
════════════════════════════════════════════════════════════════ */
/* Cartes Watchdog + Log d'audit : marges internes généreuses */
#s-audit .cd{padding:24px 26px !important}
#s-audit .cd-h{margin-bottom:16px}
/* Tableau du log : cellules aérées, texte lisible */
#s-audit .tbl2 th,#s-audit .tbl2 td{padding:13px 16px !important}
#s-audit .tbl2 td{font-size:11px !important;line-height:1.5}
/* Colonnes équilibrées : Date | Action | Par | Détail */
#s-audit .tbl2 th:nth-child(1),#s-audit .tbl2 td:nth-child(1){width:17%}
#s-audit .tbl2 th:nth-child(2),#s-audit .tbl2 td:nth-child(2){width:19%}
#s-audit .tbl2 th:nth-child(3),#s-audit .tbl2 td:nth-child(3){width:16%}
#s-audit .tbl2 th:nth-child(4),#s-audit .tbl2 td:nth-child(4){
  width:48%;white-space:normal;word-break:break-word;line-height:1.55;
}
@media (max-width:720px){
  #s-audit .cd{padding:16px 16px !important}
  #s-audit .tbl2 th,#s-audit .tbl2 td{padding:10px 11px !important}
}

/* ════════════════════════════════════════════════════════════════
   15 · Tableau de bord (#s-acc) — compactage
   S'applique aux DEUX vues de la page Accueil : Manager ET Opérateur
   (même fonction renderAcc). Couleurs traitées plus haut (section 9).
   LAYOUT 100% PRÉSERVÉ — paddings, polices et largeur des colonnes.
════════════════════════════════════════════════════════════════ */
/* Grille : colonnes étroites → 4-5 cartes machines par ligne, gap réduit */
#s-acc{
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
  gap:10px !important;
}
/* Tout bloc large (héro, grille KPI, cartes .cd, bandeaux, en-tête)
   occupe la pleine largeur ; seules les cartes machines .sc se répartissent. */
#s-acc > *{grid-column:1 / -1 !important}
#s-acc > .sc{grid-column:auto !important}

/* — Widgets du haut — */
/* Carte héro : padding et gros montant nettement réduits */
#s-acc > div:first-child{padding:11px 14px !important;margin-bottom:0 !important}
#s-acc > div:first-child > div[data-count]{font-size:21px !important;margin:1px 0 !important}
/* Cartes KPI (CA clôturé, Argent en cours, Machines actives…) compactes */
#s-acc .kc{padding:9px 11px !important}
#s-acc .kl{font-size:9.5px !important;margin-bottom:3px !important}
/* Compteurs KPI : police fortement réduite */
#s-acc .kv{font-size:17px !important}

/* — Cartes machines / sessions actives — */
#s-acc .sc{padding:9px 11px !important}
#s-acc .sc .sn{font-size:12.5px !important}
#s-acc .sc .tgs{margin-top:6px !important;gap:4px !important}
/* Pastilles d'info — dont le compteur « Temps écoulé » (id ld-*) */
#s-acc .sc .tg{font-size:10px !important;padding:3px 7px !important}
/* Montant DH de la carte machine : pastille compacte */
#s-acc .sc .sp{font-size:11.5px !important;padding:4px 9px !important}
/* Boutons d'action (Sortie, Transférer…) compacts */
#s-acc .sc .btn{padding:7px 10px !important;font-size:11px !important;min-height:0 !important}

/* ════════════════════════════════════════════════════════════════
   v252 — DÉBLOCAGE GLOBAL DU SCROLL SOURIS (urgent directeur 2026-05-22)
   PRÉSERVÉ INTÉGRALEMENT — NE PAS TOUCHER.
   Le shell app posait html,body{overflow:hidden;height:100%} → la roulette
   souris était bloquée sur certaines vues. Override radical avec !important
   pour rétablir le scroll natif sur toute l'application.
   Redondance : un bloc identique est aussi injecté en fin de <body>
   dans index.html (ev-scroll-unlock-v252) pour pallier un éventuel
   échec de chargement de ce fichier.
════════════════════════════════════════════════════════════════ */
html, body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}
/* Containers app-shell qui pourraient clipper le scroll body en restant
   en height:100% — on les laisse grandir en hauteur tout en gardant
   l'écran rempli au minimum (fond, padding cohérent). */
#app, #mb-p-app, #mb-app, #mode-membre, #mode-admin {
  height: auto !important;
  min-height: 100dvh !important;
}