/*
   ============================================================================
   color-scheme.css — source unique des variables CSS de thème eBrigade
   ============================================================================

   Deux systèmes cohabitent :

   1. Legacy (--txt-color*, --bkg-color*, --bor-color*, --sha-color*, --fil-color*)
      Nomenclature historique indexée (1984 usages dans le projet). Les noms ne
      portent pas de sens sémantique — ils sont juste numérotés. À ne pas
      renommer : theme_custom.css.php (#9686) publie dynamiquement un mapping
      legacy côté clients prod (--txt-color6/13/21/22/28/67/71).

   2. Design System moderne (--eb-*)
      Introduit par #9527. Nomenclature sémantique (--eb-primary, --eb-surface,
      --eb-border…). 894 usages. C'est la cible pour les nouveaux développements.

   Stratégie de migration (issue #9964) :
   - Utiliser uniquement --eb-* dans le code nouveau.
   - Ne pas essayer de fusionner mécaniquement les vars legacy dont la valeur
     est identique : concepts sémantiques différents (texte vs bordure).
   - Migration progressive main.css → --eb-* sur plusieurs sprints, fichier par
     fichier, avec tests visuels.

   Notes d'utilisation :
   - Dans les autres css, VSCode affiche la couleur du DERNIER thème déclaré dans
     ce fichier — c'est pourquoi :root.dark est en haut et :root.light en bas.
   - Les overrides dynamiques par client passent par theme_custom.css.php.
   ============================================================================
*/

:root.dark {

/* text colors */
--txt-color3: #a7a7a7;  /* lateral nav 1st menu, forms */
--txt-color4:  #7486eb; /* .btn.btn-text-dark */
--txt-color13: #5846a7; /* top nav icons */
--txt-color14: #a7a7a7; /* some text */
--txt-color21: #007bff; /* A */
--txt-color22: #3699ff; /* A:hover */
--txt-color27: #c1c1c1; /* card title, modal .close X */
--txt-color28: #2eb7b0;
--txt-color29: #f3b02e; /* revision */
--txt-color46: #c1c1c1; /* swal title */
--txt-color53: #c1c1c1; /* tooltip */
--txt-color67: #3699ff; /* .alert-blue */
--txt-color71: #382958; /* widget_fgblue */
--txt-color88: #f27474; /* card title a */
--txt-color90: #4978a6; /* .dropdown-item */
--txt-color91: #fff;    /* .text-dark */
--txt-color92: #8ca8c5; /* form-control */
--txt-color95: #a7a7a7; /* btn-white:hover */
--txt-color98: #Fa7070;
--txt-color99:#eb4d4b; /* rouge non dispo */
--txt-color100: #a7a7a7; /*  */
--txt-color105:#6ab04c; /* vert dispo */
--txt-color106: #e78e98; /* .alert-red */   

/* background colors */
--bkg-color1: #0f0f0f; /* lateral nav, top nav, path bar */
--bkg-color5: #1c1c1c; /* graycard/widget rounded border effect */
--bkg-color8: #222222; /* category nav buttons */
--bkg-color9: #090909; /* category nav (under path nav) */
--bkg-color12: #222222; /* form input .form-control .grey-button-arrow */
--bkg-color14: #222222; /* sliders */
--bkg-color15: #181818; /* .button-default:hover */
--bkg-color16: #333333; /* badge-inactive */
--bkg-color21: #040404; /* background */
--bkg-color28: #252525; /* .container-fluid, .newTable tr.newTable-tr:hover, .text-en-gris */
--bkg-color30: #222222; /* select, text area */
--bkg-color33: #222222; /* for highlighted label */ 
--bkg-color31: #252525; /* .table-striped */
--bkg-color41: #333333; /* .grey-button-arrow:hover */
--bkg-color42: #252525; /* top searchbar */
--bkg-color45: #181818; /* .bootstrap-select .no-results */
--bkg-color59: #171717; /* card header, card body, .modal-content */
--bkg-color60: #561b1b; /* .alert-red */
--bkg-color61: #252525; /* stats-participations */
--bkg-color66: #2d2d2d; /* dropdown categorie */
--bkg-color71: #303030; /* .label.label-key */
--bkg-color72: #222222; /* table.new-table tbody tr:hover */
--bkg-color77: #252525; /* .stats-activites, .alert-orange */
--bkg-color79: #252525; /* .alert-blue */
--bkg-color80: #252525; /* .alert-green-apple */
--bkg-color81: #252525; /* .stats-members, .alert-violet */
--bkg-color82: #252525; /* .alert-grey */
--bkg-color89: #252525; /* stats-dispos */
--bkg-color95: #1c1c1c; /* non-installed addons background */
--bkg-color107: #171717; /* .infos-principal-title, .dopdow-menu bkg */
--bkg-color108: #171717; /* graycard/widget */
--bkg-color109: #252525; /* profile dropdown-menu item hover*/
--bkg-color110: #222222; /* chart background */
--bkg-color111: #222222; /* .newTable .week, default color */
--bkg-color112: #586d5f; /* .newTable .week_end */
--bkg-color113: #333d3c; /* .newTable .widget_bggreen */
--bkg-color114: #caa7ff; /* .newTable .widget_bgblue */
--bkg-color115: #383632; /* .newTable .widget_bgorange */
--bkg-color116: rgba(255, 255, 255, 0.025); /* .dropdown-item.option-ebrigade.active.selected */
--bkg-color117: rgba(0, 0, 0, 0.2);  /* .dropdown-item.option-ebrigade */
--bkg-color119: #252525; /* name='btGo' */
--bkg-color126: #232323; /* zones de dépôt (widgets, habilitations) — absent du thème sombre : le fond y était transparent */
--bkg-color127: #252525; /* table border */
/* Pastilles de statut rendues en style inline par le PHP :
   `color:var(--txt-color28);background-color:var(--bkg-color103)` (dispo, ~18 usages) et
   `color:var(--txt-color29);background-color:var(--bkg-color138)` (avertissement, ~13 usages),
   dans indispo_display / upd_indispo / dispo_load / qualifications_edit_load…
   Sans override dark, ces fonds restaient cyan/crème CLAIRS sur une ligne sombre
   (ratio fond/ligne mesuré 13:1 et 14:1 = pastille éblouissante) et le texte tombait
   à 2.1:1 et 1.7:1 (illisible). On assombrit le fond en gardant les tokens texte
   existants (--txt-color28 #2eb7b0, --txt-color29 #f3b02e) → 4.9:1 et 5.2:1 (AA),
   pastille lisible et distincte de la ligne (#252525) sans l'éblouir.
   Le mode clair n'est pas touché. NB : `:root.dark .eb-history-table` redéfinit
   --bkg-color138 pour l'audit cybersécurité et reste prioritaire (plus spécifique). */
--bkg-color103: #0a3d3a; /* badge dispo (cyan) — fond sombre, texte --txt-color28 */
--bkg-color138: #5c3d00; /* badge avertissement (ambre) — fond sombre, texte --txt-color29 */
--bkg-color134: #f7dada;
--bkg-color135: #171717; /* conteneurTabSignature */
--bkg-color136: #171717; /* conteneurTabSignature > div */
--bkg-color137: #252525; /* #dessinSignature */
--bkg-color139: #2d2d2d;
--bkg-color142: #a7a7a7; /* calendar */
--bkg-color143: #333; 

/* border colors */
--bor-color1: #c1c1c1;  /* .border */
--bor-color2: #c1c1c1;  /* tooltip */
--bor-color4: #3c3c3c;  /* top nav bottom */
--bor-color6: #3c3c3c;  
--bor-color9: #11131A;
--bor-color14: #1c1c1c; /* form input */
--bor-color17: #3c3c3c; /* lateral nav close button */
--bor-color18: #252525; /* .nav-tabs .nav-link bottom */
--bor-color29: #3c3c3c;
--bor-color30: grey;    /* .dropdown-divider2 */
--bor-color32: #3c3c3c; /* category nav bottom, .modal-header .nav-link */
--bor-color42: #0f0f0f; /* .text-en-gris */
--bor-color44: #171717; /* Consignes op�rationnelles icons background */
--bor-color49: #171717; /* border conteneurBoutonSignature */
--bor-color50: #a7a7a7; /* border signature tab active */ 
/* shadow colors */
--sha-color9: rgba(0, 0, 0, 0.2); /* modal buttons */
--sha-color10: rgba(0, 0, 0, 0.7); /* .btn */

/* images */
--no-result-img: url(./images/aucun_resultat_sombre.png);
--crm-dashboard-img: url(./modules/accesclient/images/crm_dashboard_sombre.jpg);

/* ===== MODERN DESIGN SYSTEM DARK (dashboard-modernize #9527) ===== */
--eb-primary: #3B82F6;
--eb-primary-light: #1E3A5F;
--eb-primary-dim: #1E3A5F;
/* Les accents clairs restent adaptés aux icônes/texte sur fond sombre, mais
   ils ne peuvent pas recevoir du texte blanc (contrastes entre 1.9:1 et
   3.7:1). Les tokens `*-fill` sont réservés aux boutons/badges pleins. */
--eb-primary-fill: #1D4ED8;
--eb-primary-fill-hover: #1E40AF;
--eb-primary-bg: rgba(59, 130, 246, 0.15); /* section tree chip + selected row bg (organisation > liste) */
--eb-success: #34D399;
--eb-success-light: #064E3B;
--eb-success-fill: #047857;
--eb-success-fill-hover: #065F46;
--eb-warning: #FB923C;
--eb-warning-light: #431407;
--eb-warning-fill: #C2410C;
--eb-warning-fill-hover: #9A3412;
--eb-warning-ambre: #f3b02e;
--eb-danger: #F87171;
--eb-danger-light: #450A0A;
--eb-danger-fill: #B91C1C;
--eb-danger-fill-hover: #991B1B;
--eb-purple: #A78BFA;
--eb-purple-light: #2E1065;

/* Cotisation : une teinte par FLUX (edit_cotisation.php, child=30). L'ecran regle
   deux dettes differentes — le membre qui paie son organisation, l'organisation
   de niveau 1 qui paie la tete de reseau — et les deux mots qui les nomment sont
   renommables par le client (vocabulaire metier) : la couleur et la puce de flux
   sont ce qui les distingue. */
--eb-coti-perso: #5EEAD4;
--eb-coti-perso-light: #042F2E;
--eb-coti-orga: #FCD34D;
--eb-coti-orga-light: #451A03;
--eb-surface: #1C1C1C;
--eb-surface-hover: #252525;
--eb-table-row-hover: #252525;
--eb-surface-muted: #252525; /* utilisé par .eb-section-metric (organisation > liste) */
--eb-bg: #0F0F0F;
--eb-text: #E2E8F0;
--eb-text-secondary: #94A3B8;
--eb-text-muted: #7F8DA3;
--eb-border: #333333;
--eb-radius-sm: 8px;
--eb-radius-md: 10px;
--eb-radius: 12px;
--eb-radius-lg: 16px;
--eb-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
--eb-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
--eb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
--eb-shadow-lg: 0 12px 28px rgba(15,23,42,0.15);
--eb-shadow-focus: 0 0 0 3px rgba(59,130,246,0.15);
--eb-shadow-drawer: -4px 0 20px rgba(0,0,0,0.15);
--eb-transition: 0.2s ease;
/* #9575 — Hover states + extra semantic tokens (dark) */
--eb-primary-hover: #60A5FA;
--eb-success-hover: #6EE7B7;
--eb-danger-hover: #FCA5A5;
--eb-warning-hover: #FDBA74;
--eb-danger-bg: #450A0A;
--eb-scrollbar: #6B7280;
--eb-scrollbar-hover: var(--eb-primary);
--eb-sidebar-text: #a7a7a7;
--eb-sidebar-text-hover: #c1c1c1;
--eb-sidebar-text-muted: #777;
--eb-sidebar-text-active: #e0e0e0;
--eb-sidebar-active-bg: rgba(255,255,255,0.08);
--eb-sidebar-toggle-bg: #333;

/* ===== BOOTSTRAP UTILITY VARS (text-muted, text-secondary, etc.) =====
   Bootstrap 5 expose ces vars sous [data-bs-theme=dark], que l'app n'active
   pas (le toggle thème modifie uniquement html.dark). Sans ces overrides,
   `.text-muted` (utilisé partout : KPI cards repo_events.php, descriptions
   de cards, etc.) garde sa valeur light = slate sombre semi-transparent →
   illisible sur fond dark. */
--bs-body-color: #dee2e6;
--bs-body-color-rgb: 222, 226, 230;
--bs-emphasis-color: #fff;
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: rgba(222, 226, 230, 0.75);
--bs-secondary-color-rgb: 222, 226, 230;
--bs-tertiary-color: rgba(222, 226, 230, 0.5);
--bs-tertiary-color-rgb: 222, 226, 230;
/* Plain Bootstrap `.table` (Configuration > Signature, Organisation, etc.).
   Bootstrap-table plugin (.bootstrap-table) override déjà ses propres cells
   plus bas dans dashboard-modern.css, donc ces vars n'affectent pas ce flux. */
--bs-table-bg: var(--bkg-color59);
--bs-table-color: var(--txt-color3);
--bs-table-border-color: rgba(255,255,255,0.08);
--bs-table-striped-bg: rgba(255,255,255,0.03);
--bs-table-striped-color: var(--txt-color3);
--bs-table-hover-bg: rgba(255,255,255,0.06);
--bs-table-hover-color: var(--txt-color3);
}

/* ===== DARK THEME OVERRIDES (hardcoded colors) ===== */
:root.dark .col-lateral {
  background-color: var(--bkg-color1) !important;
}
:root.dark .nav-lateral {
  background-color: var(--bkg-color1) !important;
}
:root.dark .item-lateral .show {
  background-color: var(--bkg-color5) !important;
}
@media (hover: hover){:root.dark .link-lateral:hover{
  background-color: rgba(255,255,255,0.05);
}}
:root.dark .card.hide,
:root.dark .card-default.graycarddefault {
  background: var(--bkg-color59) !important;
  border-color: var(--bor-color4) !important;
}
:root.dark .card.hide .card-header {
  background: var(--bkg-color59) !important;
  border-bottom-color: var(--bor-color4) !important;
}
:root.dark .card.hide .card-body {
  background: var(--bkg-color59) !important;
}
:root.dark .card .card-header.graycard,
:root.dark .card.hide .card-header.graycard {
  background: var(--bkg-color59) !important;
}
:root.dark .card-body.graycard {
  background: var(--bkg-color59) !important;
}
:root.dark .toggle-lateral {
  background-color: var(--bkg-color1) !important;
  border-right-color: var(--bor-color4);
}
:root.dark .collapse-menu {
  background: var(--bkg-color1) !important;
  border-right-color: var(--bor-color4);
  border-top-color: var(--bor-color4);
}
:root.dark .decollapse-menu {
  background: var(--bkg-color1) !important;
  border-right-color: var(--bor-color4);
  border-top-color: var(--bor-color4);
}
:root.dark .navbar-lateral {
  box-shadow: 1px 0 8px rgba(0,0,0,0.3);
  border-right-color: var(--bor-color4);
}
:root.dark .div-scroll {
  background-color: var(--bkg-color1) !important;
}
:root.dark .eb-overlay-label {
  background-color: var(--bkg-color5) !important;
}
:root.dark .progress,
:root.dark .progress-stacked {
  --bs-progress-bg: #333333;
}
:root.dark .progressCustom {
  --bs-progress-bar-bg: #3699ff;
  --bs-progress-bar-color: #fff;
}
:root.dark .lienCardPersonnel {
  color: var(--txt-color53) !important;
}
:root.dark .lienCardPersonnel.lienCardPersonnelActive{
  background-color: var(--bkg-color12) !important;
  color: #fff !important;
}
@media (hover: hover){:root.dark .lienCardPersonnel:hover{
  background-color: var(--bkg-color12) !important;
  color: #fff !important;
}}
/* Meteo widget dark */
:root.dark #table_jour td {
  background-color: var(--bkg-color5);
}
:root.dark #table_jour td a.hourly,
:root.dark #table_jour td div {
  color: var(--txt-color53) !important;
}
:root.dark .apexcharts-canvas,
:root.dark .apexcharts-canvas svg,
:root.dark .apexcharts-canvas rect.apexcharts-plot-area,
:root.dark #chart {
  background: transparent !important;
  background-color: transparent !important;
}
:root.dark .apexcharts-svg {
  background: transparent !important;
}
:root.dark .apexcharts-text,
:root.dark .apexcharts-title-text {
  fill: var(--txt-color3) !important;
}
:root.dark .apexcharts-gridline {
  stroke: var(--bor-color4);
}
:root.dark .apexcharts-tooltip {
  background: var(--bkg-color59) !important;
  color: var(--txt-color3) !important;
  border-color: var(--bor-color4) !important;
}
/* Sidebar dark: handled entirely by --eb-sidebar-* tokens in dashboard-modern.css (#9575 Phase 3) */

/* ============================================================================
   #11719 — Rattrapages theming dark mode Configuration / Paramétrage
   ----------------------------------------------------------------------------
   La revue QA a listé plusieurs composants restés en thème clair sur fond
   sombre (fond blanc/crème, texte pâle sur pâle). On les rattache aux jetons
   sombres ici plutôt que de forker chaque template. Les composants concernés
   ont d'abord été passés à `var(--eb-*)` côté PHP (document_automatique.php,
   cybersecurite_load.php, menu-personalization.css, configuration_tabs.php).
   ============================================================================ */

/* Configuration > Menu (configuration.php?tab=conf12) : items du menu latéral
   restés en carte blanche. `.menu-group-item .d-flex` utilise déjà
   var(--eb-surface,#fff) depuis menu-personalization.css ; on aligne texte
   et bordure sombres. */
:root.dark .menu-group-item .d-flex {
  background-color: var(--eb-surface) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}
:root.dark .menu-group-item .d-flex .border,
:root.dark .menu-group-item .border.rounded {
  border-color: var(--eb-border) !important;
}
:root.dark .menu-group-item i.eb-drag-handle {
  color: var(--eb-text-secondary);
}

/* Audit > Cybersécurité (history.php?lccode=A&dashboard=1) : les 6 cartes
   « Recommandations » avaient un fond rose/crème/bleu pâle hardcodé + texte
   gris #6b7280 → illisible sur noir. Depuis #11719, le background/border
   passent par .cs-reco-<level> (cybersecurite_load.php). */
:root.dark .cs-reco-item.cs-reco-danger  { background: rgba(239,68,68,0.10); border-color: #f87171; }
:root.dark .cs-reco-item.cs-reco-warning { background: rgba(249,115,22,0.10); border-color: #fb923c; }
:root.dark .cs-reco-item.cs-reco-info    { background: rgba(59,130,246,0.10); border-color: #60a5fa; }
:root.dark .cs-reco-item .cs-reco-title  { color: var(--eb-text); }
:root.dark .cs-reco-item .cs-reco-detail { color: var(--eb-text-secondary); }
:root.dark .cs-reco-item a.cs-reco-link  { color: var(--eb-primary-hover); }

/* Meme ecran, carte « Firewall eBrigade » : les pastilles de compteurs et les
   statuts du tableau posent un fond CLAIR en dur (#f3f4f6, #fee2e2, #dcfce7,
   #dbeafe) que le mode sombre ne redefinissait pas, tandis que la couleur du
   texte, elle, suit le theme — chiffres clairs sur pastille claire, illisibles.
   --eb-bg-soft n'est defini nulle part : son repli clair s'appliquait aussi ici. */
:root.dark .cs-fw-pill           { background: rgba(255,255,255,0.07); color: var(--eb-text); }
:root.dark .cs-fw-pill-danger    { background: rgba(239,68,68,0.18);  color: #fca5a5; }
:root.dark .cs-fw-st-blocked     { background: rgba(239,68,68,0.18);  color: #fca5a5; }
:root.dark .cs-fw-st-ok          { background: rgba(34,197,94,0.18);  color: #86efac; }
:root.dark .cs-fw-st-white       { background: rgba(59,130,246,0.18); color: #93c5fd; }

/* Badge « Insuffisant » (bg-danger) et « Non archivable » (badge.alert-red) :
   rouge foncé sur rouge très sombre → contraste insuffisant. On force un
   rouge lisible. */
:root.dark .badge.bg-danger,
:root.dark .badge.badge-danger,
:root.dark span.badge.alert-red {
  background-color: #dc2626 !important;
  color: #fff !important;
}
:root.dark .badge.bg-warning,
:root.dark .badge.badge-warning {
  color: #111 !important;
}

/* Audit Cybersécurité (history.php?lccode=A&dashboard=1) — colonne TYPE.
   Le badge « Modification » est rendu inline avec
   `color:var(--txt-color29);background-color:var(--bkg-color138)` (orange sur
   crème). Ces deux variables n'ont PAS d'override dark → la pastille reste
   crème clair criard sur la ligne sombre (contraste interne ~1.7, illisible).
   On redéfinit ces deux vars UNIQUEMENT dans le conteneur du tableau d'audit
   (.eb-history-table, desktop + carte mobile .eb-hist-card) : amber soutenu +
   texte crème clair → texte/fond 5.4 et pastille bien distincte de la ligne
   (#252525). Sémantique orange = modification/warning conservée. Le mode clair
   n'est pas touché (règle gatée :root.dark) ; les autres badges de la colonne
   (Suppression, Ajout, Export…) n'utilisent pas ces variables. */
:root.dark .eb-history-table {
  --bkg-color138: #8a5a00;
  --txt-color29:  #fff4de;
}
:root.dark .eb-history-complement__preview,
:root.dark .eb-history-complement__full {
  color: var(--eb-text) !important;
}
:root.dark .eb-history-complement__full *,
:root.dark .eb-history-complement__preview * {
  color: var(--eb-text) !important;
}
:root.dark .eb-history-complement__toggle {
  background: var(--eb-surface) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-primary-hover) !important;
}
@media (hover: hover){:root.dark .eb-history-complement__toggle:hover{
  background: var(--eb-surface-hover) !important;
}}

/* Paramétrage > Traduction (parametrage.php?tab=9&child=34) et autres pages
   sans le layout topbar-v2 : les dropdowns bootstrap-select restaient blancs.
   Les règles existantes dans dashboard-modern.css sont gated sur
   `body.eb-has-topbar-v2` ; on ajoute ici une variante NON gatée pour les
   pages legacy (multilang_editor.class.php notamment). */
:root.dark .bootstrap-select > .dropdown-toggle,
:root.dark .bootstrap-select .btn.dropdown-toggle {
  background-color: var(--eb-surface) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text) !important;
}
:root.dark .bootstrap-select > .dropdown-toggle .filter-option,
:root.dark .bootstrap-select > .dropdown-toggle .filter-option-inner,
:root.dark .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
:root.dark .bootstrap-select .btn.dropdown-toggle .filter-option,
:root.dark .bootstrap-select .btn.dropdown-toggle .filter-option-inner,
:root.dark .bootstrap-select .btn.dropdown-toggle .filter-option-inner-inner {
  color: var(--eb-text) !important;
}
:root.dark .bootstrap-select > .dropdown-toggle.bs-placeholder,
:root.dark .bootstrap-select .btn.dropdown-toggle.bs-placeholder,
:root.dark .bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner,
:root.dark .bootstrap-select .btn.dropdown-toggle.bs-placeholder .filter-option-inner-inner {
  color: var(--eb-text-secondary) !important;
}
:root.dark .bootstrap-select .dropdown-menu {
  background-color: var(--eb-surface) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .bootstrap-select .dropdown-item,
:root.dark .bootstrap-select .dropdown-menu li a,
:root.dark .bootstrap-select .dropdown-menu li a span.text {
  color: var(--eb-text) !important;
}
:root.dark .bootstrap-select .dropdown-item:focus{
  background-color: var(--eb-surface-hover) !important;
  color: var(--eb-text) !important;
}
@media (hover: hover){:root.dark .bootstrap-select .dropdown-item:hover,:root.dark .bootstrap-select .dropdown-menu li a:hover{
  background-color: var(--eb-surface-hover) !important;
  color: var(--eb-text) !important;
}}
:root.dark .bootstrap-select .dropdown-item.active,
:root.dark .bootstrap-select .dropdown-menu li a.active,
:root.dark .bootstrap-select .dropdown-menu > .active > a {
  background-color: var(--eb-primary-light) !important;
  color: var(--eb-text) !important;
}
/* Choix impossible = texte atténué, en sombre aussi : les règles ci-dessus
   repeignaient toutes les lignes en couleur de texte normale, y compris celles
   que bootstrap-select a désactivées (ex. droits d'accès d'un autre statut). */
:root.dark .bootstrap-select .dropdown-menu li.disabled a,
:root.dark .bootstrap-select .dropdown-menu li.disabled a span.text,
:root.dark .bootstrap-select .dropdown-menu .dropdown-item.disabled,
:root.dark .bootstrap-select .dropdown-menu li.disabled a:hover,
:root.dark .bootstrap-select .dropdown-menu li.disabled a:focus {
  color: var(--eb-text-muted) !important;
  background-color: transparent !important;
  cursor: not-allowed !important;
}
:root.dark .bootstrap-select .bs-searchbox .form-control {
  background-color: var(--eb-bg) !important;
  color: var(--eb-text) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .bootstrap-select .no-results {
  background-color: var(--bkg-color45) !important;
  color: var(--eb-text-secondary) !important;
}

/* Paramétrage > Documents automatiques > Stockage : les 16 cartes détail,
   le bandeau informatif « limite 5 Go » et le bouton « Voir le détail »
   n'étaient pas thémés. Depuis #11719 leur CSS utilise des var(--eb-*) —
   il reste à s'assurer que les tokens dark sont bien appliqués. Rien de
   spécifique à ajouter ici : la surcharge se fait par les vars dark. */
:root.dark .eb-storage-purge-info {
  /* --eb-warning-light dark = #431407 (très sombre) ; couleur d'accent
     ambrée lisible pour le texte. */
  color: #fbbf24 !important;
  border-color: rgba(251,146,60,0.35) !important;
}
:root.dark .eb-storage-detail-toggle {
  background-color: var(--eb-surface-hover) !important;
  color: var(--eb-primary-hover) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .eb-storage-refresh {
  background-color: var(--eb-surface-hover) !important;
  color: var(--eb-primary-hover) !important;
}
:root.dark .eb-storage-total,
:root.dark .eb-storage-limit-head,
:root.dark .eb-storage-name,
:root.dark .eb-storage-values strong {
  color: var(--eb-text) !important;
}
:root.dark .eb-storage-sub,
:root.dark .eb-storage-values,
:root.dark .eb-storage-meta {
  color: var(--eb-text-secondary) !important;
}
:root.dark .eb-storage-name i {
  color: var(--eb-text-secondary) !important;
}
:root.dark .eb-storage-limit-track,
:root.dark .eb-storage-bar {
  background: var(--eb-surface-hover) !important;
}

/* Boutons : plusieurs libellés courts étaient césurés (« + Nou-/velle »,
   « Imag/e », « Vi-/déo ») à cause d'un `hyphens:auto` hérité. Pour tous
   les boutons on désactive la césure automatique et on autorise le retour
   à la ligne SEULEMENT entre mots — jamais au milieu (#11719). */
.btn,
button.btn,
input[type='button'],
input[type='submit'] {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Colonnes de tableaux (bootstrap-table et .newTableAll) : plusieurs pages
   d'Audit et de Paramétrage tronquaient les noms/valeurs longs sans
   ellipsis exploitable (« Sapeur Po... », « Responsable CFS soutien des
   populati... », « NAHED Jose... », « Convocation c... »). On autorise le
   retour à la ligne pour ne plus couper au milieu d'un mot, et on empêche
   la césure automatique (« ca-ractères », « authentifica-tion ») — #11719. */
.bootstrap-table tbody td,
.bootstrap-table thead th,
.newTableAll td,
.newTableAll th {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}
.bootstrap-table tbody td,
.newTableAll td {
  white-space: normal;
}
/* En-têtes des tables Audit (history.php) : « DÉBUT DE CONNEXION »,
   « SYSTÈME D'EXPLOITATION »… bootstrap-table applique par défaut
   `white-space:nowrap + text-overflow:ellipsis` sur .th-inner, ce qui
   coupait « SYSTÈME D'EXPLOITA... ». On autorise le retour à la ligne
   pour garder les libellés lisibles. */
.bootstrap-table thead th .th-inner {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* #12064 — Rattrapages theme sombre sur composants legacy encore codes pour
   fond clair : lisibilite uniquement, sans changement de comportement. */
:root.dark .text-en-gris,
:root.dark .select-en-gris,
:root.dark .form-control.text-en-gris,
:root.dark .form-control.select-en-gris {
  background-color: var(--eb-surface) !important;
  color: var(--eb-text) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .text-en-gris::placeholder,
:root.dark .select-en-gris::placeholder,
:root.dark .form-control::placeholder,
:root.dark textarea::placeholder {
  color: var(--eb-text-muted) !important;
  opacity: 1;
}
/* Texte clair des pastilles en sombre — mais seulement celles qui n'ont pas
   leur propre couleur. Sélecteur SANS POIDS (:where) : une pastille d'état
   (.label-actif, .label-bloqued, étape de recrutement…) garde la couleur que
   sa classe lui donne, qui suit déjà le thème. Et une pastille qui porte en
   ligne SON fond ET SA couleur de texte (type de ticket, statut pastel,
   couleur choisie par l'organisation) garde ce couple, calculé pour se lire :
   ce texte repeint en blanc rendait illisible un ticket jaune. */
:where(:root.dark) :where(.label.label-inline, .label.label-pill, .label.label-light, .label.label-lg):where(:not([style*="background"][style^="color"], [style*="background"][style*=";color"], [style*="background"][style*=" color:"])) {
  color: var(--eb-text) !important;
}
:root.dark .non-blocking {
  background-color: #8a5a00 !important;
  color: #fff4de !important;
}
:root.dark .semi-blocking,
:root.dark .blocking {
  background-color: var(--eb-danger-light) !important;
  color: var(--eb-danger-hover) !important;
}
:root.dark .dev {
  background-color: var(--eb-primary-light) !important;
  color: var(--eb-text) !important;
}
/* Catégories de tickets support (colonne « Catégorie »). Les couleurs pastel
   claires de module_support.css restent illisibles sur fond sombre : on
   ré-adapte fond et texte pour conserver un contraste suffisant. */
:root.dark .eb-cat-anomalie {
  background-color: var(--eb-danger-light) !important;
  color: var(--eb-danger-hover) !important;
}
:root.dark .eb-cat-coaching {
  background-color: var(--eb-primary-light) !important;
  color: #93c5fd !important;
}
:root.dark .eb-cat-dev {
  background-color: var(--eb-purple-light) !important;
  color: var(--eb-purple) !important;
}
:root.dark .eb-cat-facturation {
  background-color: var(--eb-warning-light) !important;
  color: var(--eb-warning-hover) !important;
}
:root.dark .eb-cat-desab {
  background-color: var(--eb-surface-hover) !important;
  color: var(--eb-text-secondary) !important;
}
:root.dark .badge.alert-orange,
:root.dark .alert-orange {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
}
:root.dark .badge.alert-violet,
:root.dark .alert-violet {
  background-color: rgba(139, 92, 246, 0.18) !important;
  color: #c4b5fd !important;
}
:root.dark .badge.alert-green,
:root.dark .alert-green,
:root.dark .badge.alert-green-apple,
:root.dark .alert-green-apple {
  background-color: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}
:root.dark .badge.alert-blue,
:root.dark .alert-blue {
  background-color: rgba(59, 130, 246, 0.18) !important;
  color: #93c5fd !important;
}
:root.dark .badge.alert-grey,
:root.dark .alert-grey {
  background-color: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
}
:root.dark .bg-note,
:root.dark .descriptionArea,
:root.dark .card-comment {
  background-color: var(--eb-surface) !important;
  color: var(--eb-text) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .bg-note *,
:root.dark .descriptionArea *,
:root.dark .card-comment *,
:root.dark .comment-body {
  color: var(--eb-text) !important;
}
:root.dark .ligne_info_rapide,
:root.dark .header-info-rapide .element-header-rapide,
:root.dark .element_info_rapide {
  background-color: var(--eb-surface) !important;
  color: var(--eb-text) !important;
  border-color: var(--eb-border) !important;
}
:root.dark .ligne_info_rapide .titre_info,
:root.dark .header-info-rapide .titre_info,
:root.dark .element_info_rapide .titre_info,
:root.dark .ligne_info_rapide .container_infos,
:root.dark .header-info-rapide .container_infos,
:root.dark .element_info_rapide .container_infos,
:root.dark .ligne_info_rapide .container_infos *,
:root.dark .header-info-rapide .container_infos *,
:root.dark .element_info_rapide .container_infos * {
  color: var(--eb-text) !important;
}
:root.dark .eb-export-page .eb-export-empty {
  background: var(--eb-surface) !important;
  border-color: var(--eb-border) !important;
  color: var(--eb-text-secondary) !important;
}
:root.dark .eb-export-page .eb-export-empty-title,
:root.dark .eb-export-page .eb-export-empty small,
:root.dark .eb-export-page .eb-export-empty-icon {
  color: var(--eb-text-secondary) !important;
}

:root,
:root.light {

/* text colors */
--txt-color1: #fff;
--txt-color2: transparent;
--txt-color3: #3f4254;
--txt-color4: #181c32;
--txt-color5: #b5b5c3;
--txt-color6: #d20019;
--txt-color7: red;
--txt-color8: #5E6278;
--txt-color9: #7E8299;
--txt-color10: #666666;
--txt-color11: #fa7070;
--txt-color12: #c2c2cd;
--txt-color13: #342c57;
--txt-color14: #303030; /* $mydarkcolor; */
--txt-color15: #808080;
--txt-color16: #b19595;
--txt-color17: green;
--txt-color18: #003399;
--txt-color19: #004d4d;
--txt-color20: #3d3d5c;
--txt-color21: #007bff;
--txt-color22: #777;
--txt-color23: purple;
--txt-color24: #3699ff;
--txt-color25: #7e8299;
--txt-color26: #2196F3;
--txt-color27: black;
--txt-color28: #107873; /* $widget_fggreen */
--txt-color29: #a35200; /* orange foncé : texte des badges « Modification », statut d'absence, « Bientôt expiré »… sur --bkg-color138/77/115 (#fff4de) 5,1:1, sur blanc 5,6:1. Était #f3b02e (1,7:1, illisible). Les fonds pleins orange gardent l'ambre via --eb-warning-ambre. */
--txt-color30: #171717;
--txt-color31: #F1F1F1;
--txt-color32: yellow;
--txt-color33: orange;
--txt-color34: #6c7293;
--txt-color35: #EF6F00;
--txt-color36: #005300;
--txt-color37: #009999;
--txt-color38: #e67300;
--txt-color39: #666699;
--txt-color40: blue;
--txt-color41: #C00000;
--txt-color42: #000080;
--txt-color43: #999;
--txt-color44: #444;
--txt-color45: #B5B5C3;
--txt-color46: #595959;
--txt-color47: #545454;
--txt-color48: #cccccc;
--txt-color49: #f27474;
--txt-color50: #f8bb86;
--txt-color51: #87adbd;
--txt-color52: #a5dc86;
--txt-color53: #555555;
--txt-color54: #127873;
--txt-color55: #8A8A8A;
--txt-color56: #F6A94E;
--txt-color57: #592a6c;
--txt-color58: #6d5e17;
--txt-color59: #116073;
--txt-color60: #AE704B;
--txt-color61: #936CA0;
--txt-color62: #436349;
--txt-color63: #696b42;
--txt-color64: #A9A9A9;
--txt-color65: #717171;
--txt-color66: #e0eaff;
--txt-color67: #113ad9bf;
--txt-color68: #2b7c11;
--txt-color69: #663cbc;
--txt-color70: #ff0066;
--txt-color71: #7556b6;
--txt-color72: #D98880;
--txt-color73: #77a0fd;
--txt-color74: #868686;
--txt-color75: #a0b0c1;
--txt-color76: #46BA48;
--txt-color77: #BA4646;
--txt-color78: #0c5460;
--txt-color79: #d1d3e0;
--txt-color80: #6a6ad9;
--txt-color81: #b1b1b1;
--txt-color82: #a1a5b7;
--txt-color83: #575252;
--txt-color84: #333;
--txt-color85: #A6A6A6;
--txt-color86: #545454;
--txt-color87: #3F4254;
--txt-color88: black;
--txt-color89: #2b224f;
--txt-color90: #212529;
--txt-color91: #343a40;
--txt-color92: #495057;
--txt-color93: #0056b3;
--txt-color94: #6c757d;
--txt-color95: #212529;
--txt-color96: #fd7e14;
--txt-color97: #365be3;
--txt-color98: #FFFFFF;
--txt-color99: red;
--txt-color100: #3996ed; /*  */
--txt-color101: #007bff;
--txt-color103: #f64e60;
--txt-color104: #d9a300; /* remplace txt-color29 sur certaines icones */
--txt-color105:#6ab04c; /* vert dispo */
--txt-color106: #d20b20; /* .alert-red */
--txt-color107: #996400;



/* background colors */
--bkg-color1: #fff;
--bkg-color2: transparent;
--bkg-color3: rgba(0, 0, 0, 0.5);
--bkg-color4: #dddddd;
--bkg-color5: #F1F1F1;
--bkg-color6: #ECECEC;
--bkg-color7: #DADADA;
--bkg-color8: #3699ff;
--bkg-color9: #f8f8f9;
--bkg-color10: rgba(168,209,240,0.2);
--bkg-color11: rgba(209,209,240,0.2);
--bkg-color12: #f3f6f9;
--bkg-color13: #fafafa;
--bkg-color14: #1875d8;
--bkg-color15: #Fa7070;
--bkg-color16: #CCCCCC;
--bkg-color17: #666666;
--bkg-color18: #ff6600;
--bkg-color19: yellow;
--bkg-color20: red;
--bkg-color21: black;
--bkg-color22: blue;
--bkg-color23: green;
--bkg-color24: purple;
--bkg-color25: orange;
--bkg-color26: #303030;
--bkg-color27: rgba(255, 0, 0, 0.85);
--bkg-color28: #eef0f8;
--bkg-color29: #FCF3CF;
--bkg-color30: #F8F8F8;
--bkg-color31: #f8f9fa;/* .table-striped */
--bkg-color32: #181c32;
--bkg-color33: #e1f0ff;
--bkg-color34: rgba(27, 197, 189, 0.671);
--bkg-color35: #1bc5bd;
--bkg-color36: #324bb0;
--bkg-color37: #ffa800;
--bkg-color38: #ee9d01;
--bkg-color39: #C6C6C6;
--bkg-color40: #FAFAFAFA;
--bkg-color41: #e4e6ef;
--bkg-color42: #f8f4fc;
--bkg-color43: grey;
--bkg-color44: #000080;
--bkg-color45: #f5f5f5;
--bkg-color46: rgba(0,0,0,0.3);
--bkg-color47: #d78f00;
--bkg-color48: #0bb7af;
--bkg-color49: #f3283e;
--bkg-color50: rgba(0, 0, 0, 0.4);
--bkg-color51: rgba(0, 0, 0, 0.1);
--bkg-color52: rgba(0, 0, 0, 0.2);
--bkg-color53: #3085d6;
--bkg-color54: #aaa;
--bkg-color55: #f0f0f0;
--bkg-color56: #f27474;
--bkg-color57: #a5dc86;
--bkg-color58: #add8e6;
--bkg-color59: #fffffffa;
--bkg-color60: #ffe2e5;
--bkg-color61: #c9f7f5;
--bkg-color62: #D3D3D3;
--bkg-color63: #FFF2E2;
--bkg-color64: #C19ED0;
--bkg-color65: #ECD8A3;
--bkg-color66: #9AD9E9;
--bkg-color67: #DCCFBF;
--bkg-color68: #DCBFDC;
--bkg-color69: #BFDCCD;
--bkg-color70: #F1EACD;
--bkg-color71: #f2f2f2;
--bkg-color72: #EEEEEE;
--bkg-color73: #cbcbff;
--bkg-color74: #b8b8ff;
--bkg-color75: #2196F3;
--bkg-color76: #f8d7da;
--bkg-color77: #fff4de;
--bkg-color78: #77a0fd;
--bkg-color79: #77a0fda8;
--bkg-color80: #d7f9d3;
--bkg-color81: #eee5ff;
--bkg-color82: #ededed;
--bkg-color83: #ff016114;
--bkg-color84: #ffa500b5;
--bkg-color85: #008000ad;
--bkg-color86: #3699FF;
--bkg-color87: #ebedf3;
--bkg-color88: #FADBD8;
--bkg-color89: #e0eaff;
--bkg-color90: #f9f9f9;
--bkg-color91: #868686;
--bkg-color92: #E4E4E4;
--bkg-color93: #a0b0c1;
--bkg-color94: rgba(255, 255, 255, 0.7);
--bkg-color95: #e7e2e2;
--bkg-color96: #AAE4AB;
--bkg-color97: #E4AAAA;
--bkg-color98: #d1ecf1;
--bkg-color99: #187de4;
--bkg-color100: #a2d0ff;
--bkg-color101: #2ba805;
--bkg-color102: #49e819;
--bkg-color103: #c9f7f5;
--bkg-color104: #93d3a2;
--bkg-color105: #ffb01f;
--bkg-color106: #ed9aa2;
--bkg-color107: #fff;
--bkg-color108: #fff;
--bkg-color109: #e9ecef;
--bkg-color110: #fff;
--bkg-color111: #f5f4f6;
--bkg-color112: #D0FFE0;
--bkg-color113: #c9f7f5;
--bkg-color114: #eee5ff;
--bkg-color115: #fff4de;
--bkg-color116: rgba(255, 192, 192, 0.2);
--bkg-color117: rgba(255, 204, 51, 0.2);
--bkg-color118: #3F4254;
--bkg-color119: #fff;
--bkg-color120: #a377fd;
--bkg-color121: #f64e60; /* $widget_fgred */
--bkg-color122: #0000;
--bkg-color123: #33ce29;
--bkg-color124: #4562f5;
--bkg-color126: #F1F1F1; /* le # manquait : valeur invalide donc fond transparent partout (zones de dépôt, .dgrey…) */
--bkg-color127: #BEBEBE;
--bkg-color129: #Fa7070;
--bkg-color131: #218838;
--bkg-color133: #c82333;
--bkg-color134: #ffe9e9;
--bkg-color135: #f2f5f7; /* #conteneurTabSignature */
--bkg-color136: white;   /* #conteneurTabSignature > div , #conteneurTypeSignature*/
--bkg-color137: #f2f5f7; /* #dessinSignature */
--bkg-color138: #fff4de;
--bkg-color139: #e9ecef;
--bkg-color140: #1875d8;
--bkg-color141: #ffe2e5;
--bkg-color142: #ffe9e9; /* calendar */
--bkg-color143: #dcd1ba; 

/* border colors */
--bor-color1: #eee;
--bor-color2: rgb(255,255,255);
--bor-color3: transparent;
--bor-color4: #ebedf3; /* rgb(235, 237, 243); */
--bor-color5: black;
--bor-color6: #FA7070;
--bor-color7: #666;
--bor-color8: #D8D8D8;
--bor-color9: #E4E6EF;
--bor-color10: #818181;
--bor-color11: #2196f3;
--bor-color12: #303030;
--bor-color13: #181c32;
--bor-color14: #f3f6f9;
--bor-color15: #000080;
--bor-color16: #999;
--bor-color17: #D8D7D8;
--bor-color18: #3699FF;
--bor-color19: #D5D5D5;
--bor-color20: #a5dc86;
--bor-color21: #d9d9d9;
--bor-color22: #f27474;
--bor-color23: #b4dbed;
--bor-color24: #facea8;
--bor-color25: #007bff;
--bor-color26: #c9dae1;
--bor-color27: rgba(165, 220, 134, 0.3);
--bor-color28: rgba(50, 100, 150, 0.4);
--bor-color29: #E6E6E6;
--bor-color30: #dbdbdb;
--bor-color31: #f5c6cb;
--bor-color32: #dee2e6;
--bor-color33: #B5B5C3;
--bor-color34: #5f6368;
--bor-color35: red;
--bor-color36: #187de4;
--bor-color37: #e9ecef;
--bor-color38: #aaa;
--bor-color39: #bce7c6;
--bor-color40: #70c684;
--bor-color41: #ebedf3d1;
--bor-color42: #eef0f8;
--bor-color43: #6868b9;
--bor-color44: #fff;
--bor-color49: #e3e5e7 ; /* border conteneurBoutonSignature */
--bor-color50: #3996ed; /* border signature tab active */ 


/* shadow colors */
--sha-color1: rgba(0, 0, 0, 0.5);
--sha-color2: rgba(24,28,50,.25);
--sha-color3: rgba(0,0,0,.075);
--sha-color4: rgba(82, 63, 105, 0.08);
--sha-color5: rgba(0,0,0,0.3);
--sha-color6: #FA7070;
--sha-color7: rgba(82,63,105,.05);
--sha-color8: #719ECE;
--sha-color9: rgba(0, 0, 0, 0.08);
--sha-color10: rgba(0, 0, 0, .15);
--sha-color11: #d9d9d9;
--sha-color12: #fff;
--sha-color13: rgba(50, 100, 150, 0.4);
--sha-color14: rgba(0, 0, 0, 0.06);
--sha-color15: #f27474;
--sha-color16: #c4e6f5;
--sha-color17: rgba(0, 0, 0, 0.4);
--sha-color18: #342c57;
--sha-color19: #f64e60; 
--sha-color20: rgba(232, 76, 61, 0);
--sha-color21: #2196F3;
--sha-color22: rgba(0,0,0,0.2);
--sha-color23: #ebedf3;
--sha-color24: rgba(82,63,105,.05);
--sha-color25: rgb(0 0 0 / 6%);
--sha-color26: rgb(0 0 0 / 16%);
--sha-color27: #2ba805;
--sha-color28: #49e819;
--sha-color29: #999999;

/* fill colors */
--fil-color1: #fff;

/* images */
--no-result-img: url(./images/aucun_resultat2.png);
--crm-dashboard-img: url(./modules/accesclient/images/crm_dashboard.jpg);

/* ===== MODERN DESIGN SYSTEM (dashboard-modernize #9527) ===== */
--eb-primary: #2563EB;
--eb-primary-light: #EFF6FF;
--eb-primary-dim: #DBEAFE;
--eb-primary-fill: var(--eb-primary);
--eb-primary-fill-hover: #1D4ED8;
--eb-primary-bg: #EFF6FF; /* section tree chip + selected row bg (organisation > liste) */
--eb-success: #10B981;
--eb-success-light: #ECFDF5;
--eb-success-fill: var(--eb-success);
--eb-success-fill-hover: #059669;
--eb-warning: #F97316;
--eb-warning-light: #FFF7ED;
--eb-warning-fill: var(--eb-warning);
--eb-warning-fill-hover: #D97706;
--eb-warning-ambre: #f3b02e; /* fond plein ambre (jour d'absence du calendrier de disponibilité) — l'ancienne valeur claire de --txt-color29 */
--eb-danger: #EF4444;
--eb-danger-light: #FEF2F2;
--eb-danger-fill: var(--eb-danger);
--eb-danger-fill-hover: #DC2626;
--eb-purple: #8B5CF6;
--eb-purple-light: #F5F3FF;

/* Cotisation : une teinte par FLUX (cf. bloc sombre plus haut). */
--eb-coti-perso: #0F766E;
--eb-coti-perso-light: #F0FDFA;
--eb-coti-orga: #B45309;
--eb-coti-orga-light: #FFFBEB;
--eb-surface: #FFFFFF;
--eb-surface-hover: #F8FAFC;
--eb-table-row-hover: #F8FAFC; /* lu par les seules règles :root.dark ; valeur claire pour une palette complète */
--eb-surface-muted: #F8FAFC; /* utilisé par .eb-section-metric (organisation > liste) */
--eb-bg: #F1F5F9;
--eb-text: #1E293B;
--eb-text-secondary: #64748B;
--eb-text-muted: #94A3B8;
--eb-border: #E2E8F0;
--eb-radius-sm: 8px;
--eb-radius-md: 10px;
--eb-radius: 12px;
--eb-radius-lg: 16px;
--eb-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--eb-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
--eb-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
--eb-shadow-lg: 0 12px 28px rgba(15,23,42,0.15);
--eb-shadow-focus: 0 0 0 3px rgba(59,130,246,0.15);
--eb-shadow-drawer: -4px 0 20px rgba(0,0,0,0.15);
--eb-transition: 0.2s ease;
/* #9575 — Hover states + extra semantic tokens */
--eb-primary-hover: #1D4ED8;
--eb-success-hover: #059669;
--eb-danger-hover: #DC2626;
--eb-warning-hover: #D97706;
--eb-danger-bg: #FEE2E2;
--eb-scrollbar: #94A3B8;
--eb-scrollbar-hover: var(--eb-primary);
--eb-sidebar-text: #64748B;
--eb-sidebar-text-hover: #1E293B;
--eb-sidebar-text-muted: #94A3B8;
--eb-sidebar-text-active: #1E293B;
--eb-sidebar-active-bg: rgba(0,0,0,0.05);
--eb-sidebar-toggle-bg: #E2E8F0;
}