/* ── Grid — Toolbar (WEBBASE-3912) ─────────────────────────────────────────
   Les actions gardent leur libellé à côté de l'icône ; les outils sans texte (filtres, actualiser, plein écran)
   n'ont que leur icône et leur info-bulle. Sur mobile, icônes seules : l'info-bulle et le nom accessible restent. */

@media (max-width: 767.98px) {
    .e-grid .e-toolbar .e-tbar-btn-text {
        display: none !important;
    }
}
/* Barre trop étroite pour ses libellés (posé par WbGrid seulement si elle déborde) : icônes seules, info-bulles conservées. */
.e-grid .e-toolbar.wb-toolbar-compact .e-tbar-btn-text {
    display: none !important;
}

/* Un bouton grisé reçoit le survol (info-bulle « pourquoi ») ; EJ2 ignore lui-même le clic sur un élément .e-overlay. */
.e-grid .e-toolbar .e-toolbar-item.e-overlay {
    pointer-events: auto;
    cursor: not-allowed;
}
.e-grid .e-toolbar .e-toolbar-item.e-overlay .e-tbar-btn {
    pointer-events: none;
}

/* Menu du bouton « Exporter » : liste Bootstrap, au-dessus de la grille en plein écran. */
.wb-grid-export-menu {
    z-index: 1060;
    min-width: 9rem;
}

/* ── Grid — Toolbar : icône Update → disquette ──────────────────────────── */

.e-grid .e-toolbar .e-update.e-icons::before {
    font-family: "bootstrap-icons" !important;
    content: "\f7d8"; /* bi-floppy */
}

/* ── Grid — Fullscreen ───────────────────────────────────────────────────── */

.wb-grid-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1050;
    background: #fff;
    padding: 8px;
    box-sizing: border-box;
    overflow: auto;
}

.wb-grid-fullscreen .e-grid {
    height: calc(100vh - 16px) !important;
}

body.wb-grid-body-locked {
    overflow: hidden;
}

/* ── Grid — mode sombre (WEBBASE-3915) ─────────────────────────────────────
   bootstrap5.css (EJ2) est une feuille claire : en-tête, lignes, pied de pagination, barre d'outils, recherche,
   éditeurs et popups (filtre Excel, choix des colonnes, listes déroulantes) restaient blancs sur une page sombre.
   Tout est recalé sur les jetons du thème (--theme-*, comme le Gantt de project-planning.css) avec repli sur les
   variables Bootstrap du mode sombre : aucune couleur en dur, mode clair inchangé (règles sous data-bs-theme="dark"
   seulement). Le Gantt garde ses propres surfaces (project-planning.css) : sa grille est exclue. */
html[data-bs-theme="dark"] {
    --wb-ej2-surface: var(--theme-surface-card, var(--bs-body-bg));
    --wb-ej2-surface-alt: var(--theme-surface-alt, var(--bs-tertiary-bg));
    --wb-ej2-border: var(--theme-border, var(--bs-border-color));
    --wb-ej2-text: var(--theme-text, var(--bs-body-color));
    --wb-ej2-text-muted: var(--theme-text-muted, var(--bs-secondary-color));
    --wb-ej2-hover: color-mix(in srgb, var(--wb-ej2-text) 8%, var(--wb-ej2-surface));
    --wb-ej2-selected: color-mix(in srgb, var(--wb-primary, var(--bs-primary)) 24%, var(--wb-ej2-surface));
    --wb-ej2-link: var(--bs-link-color);
}

/* Surfaces de la grille : en-tête, contenu, lignes, barre de filtre. :where() garde ces listes au plus bas : les règles
   d'état (survol, sélection, cellule modifiée) qui suivent l'emportent sans surenchère de spécificité. */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid),
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :where(.e-gridheader, .e-headercontent, .e-headercell, .e-detailheadercell,
    .e-gridcontent, .e-content, .e-table, .e-rowcell, .e-emptyrow td, .e-filterbarcell, .e-filterbarcelldisabled,
    .e-rowdragheader, .e-grouptopleftcell, .e-detailrowcollapse, .e-detailrowexpand, .e-rowdragdrop, .e-detailcell,
    .e-gridpopup .e-content) {
    background-color: var(--wb-ej2-surface);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
/* Comme EJ2 : pas de bordure haute sur la première ligne (l'en-tête en porte déjà une). */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-gridcontent tr:first-child td:not(.e-xlsel-top-border) {
    border-top-color: transparent;
}
/* Affichage vertical (mobile) : le séparateur des fiches prend la couleur du texte (currentColor), trait vif sur fond
   sombre ; couleur des bordures à la place. */
html[data-bs-theme="dark"] .e-grid.e-row-responsive:not(.e-gantt .e-grid) :is(.e-gridcontent tr.e-row, .e-gridcontent td.e-rowcell, .e-responsive-header) {
    border-color: var(--wb-ej2-border);
}
/* Colonnes figées : règle à part (ses :not() rendraient la règle ci-dessus plus forte que la sélection et le survol). */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :is(.e-leftfreeze, .e-rightfreeze, .e-fixedfreeze):not(.e-summarycell, .e-indentcell, .e-updatedtd, .e-selectionbackground, .e-columnselection, .e-groupcaption, .e-cellselectionbackground, .e-active) {
    background-color: var(--wb-ej2-surface);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :where(.e-headertext, .e-headercelldiv, .e-rowcell, .e-summarycell,
    th.e-headercell[aria-sort] .e-headertext, .e-emptyrow td) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :is(.e-verticallines tr th, .e-horizontallines .e-headercell,
    tr th.e-firstcell, .e-tableborder, .e-stackedheadercell, .e-frozenrow-border, .e-gridcontent table tbody .e-normaledit .e-rowcell) {
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-frozenrow-border {
    background-color: var(--wb-ej2-border);
}

/* Pied, lignes de regroupement et de synthèse, zone de regroupement : surface secondaire (#f8f9fa en clair). */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :is(.e-gridfooter, .e-summaryrow .e-summarycell, .e-summaryrow .e-templatecell,
    .e-summarycontent .e-indentcell, .e-groupcaption, .e-indentcell, .e-recordplusexpand, .e-recordpluscollapse, .e-groupdroparea,
    .e-groupdroparea.e-grouped, .e-groupdroparea.e-hover) {
    background-color: var(--wb-ej2-surface-alt);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :is(.e-groupheadercell, .e-groupheadercell:hover, .e-sortnumber,
    .e-cloneproperties, .e-griddragarea) {
    background-color: var(--bs-secondary-bg);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}

/* Icônes (filtre, tri, regroupement, glisser) : #6c757d d'EJ2 trop peu contrasté sur fond sombre. */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-icons:not(.e-btn-icon, .e-check, .e-stop),
html[data-bs-theme="dark"] .e-grid-popup .e-icons:not(.e-btn-icon, .e-check, .e-stop),
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop):not(.e-icon-reorderuparrow):not(.e-icon-reorderdownarrow) {
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-filtered::before {
    color: var(--wb-ej2-link);
}

/* Survol : mêmes sélecteurs qu'EJ2 (sinon sa règle, très spécifique, l'emporte). */
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-gantt .e-grid) .e-frozenhover:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-gantt .e-grid) .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-rowdrag):not(.e-gantt .e-grid) .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-gantt .e-grid) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-rowdrag):not(.e-gantt .e-grid) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
html[data-bs-theme="dark"] .e-grid.e-gridhover:not(.e-gantt .e-grid) .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
    background-color: var(--wb-ej2-hover);
    color: var(--wb-ej2-text);
}

/* Sélection (ligne, colonne, cellule) et cellule modifiée en mode lot. */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) :is(td.e-active, .e-columnselection, td.e-selectionbackground, td.e-cellselectionbackground),
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-cloneproperties.e-draganddrop table {
    background: var(--wb-ej2-selected);
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) td.e-updatedtd {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-gridpopup .e-downtail::after { border-top-color: var(--wb-ej2-surface); }
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-gridpopup .e-uptail::after { border-bottom-color: var(--wb-ej2-surface); }

/* Barre d'outils de la grille (actions, recherche, outils) et son menu de débordement. */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar,
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar :is(.e-toolbar-items, .e-toolbar-item, .e-toolbar-item.e-overlay,
    .e-toolbar-item .e-tbar-btn, .e-hor-nav, .e-hor-nav:active) {
    background: var(--wb-ej2-surface-alt);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar .e-toolbar-item .e-tbar-btn :is(.e-tbar-btn-text, .e-icons) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar .e-toolbar-item.e-overlay :is(.e-tbar-btn-text, .e-icons) {
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar :is(.e-toolbar-item .e-tbar-btn:hover, .e-toolbar-item .e-tbar-btn:focus,
    .e-toolbar-item .e-tbar-btn:active, .e-hor-nav:hover, .e-hor-nav:focus) {
    background: var(--wb-ej2-hover);
    border-color: var(--wb-ej2-border);
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar :is(.e-toolbar-item .e-tbar-btn:hover, .e-toolbar-item .e-tbar-btn:focus,
    .e-toolbar-item .e-tbar-btn:active) :is(.e-tbar-btn-text, .e-icons) {
    color: var(--wb-ej2-text);
}
/* Flèches de défilement horizontal de la barre (mobile, barre trop longue) et leurs dégradés de bord. */
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-hscroll :is(.e-scroll-nav, .e-scroll-nav:active,
    .e-scroll-nav.e-scroll-left-nav, .e-scroll-nav.e-scroll-right-nav) {
    background: var(--wb-ej2-surface-alt);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-hscroll:not(.e-scroll-device) :is(.e-scroll-nav:hover, .e-scroll-nav:focus) {
    background: var(--wb-ej2-hover);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-hscroll :is(.e-scroll-nav .e-icons, .e-scroll-nav .e-nav-arrow) {
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-hscroll .e-scroll-overlay.e-scroll-left-overlay {
    background-image: linear-gradient(-270deg, var(--wb-ej2-surface-alt) 0%, transparent 100%);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-hscroll .e-scroll-overlay.e-scroll-right-overlay {
    background-image: linear-gradient(-270deg, transparent 0%, var(--wb-ej2-surface-alt) 100%);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar .e-toolbar-pop {
    background: var(--wb-ej2-surface);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar .e-toolbar-pop .e-toolbar-item:not(.e-separator),
html[data-bs-theme="dark"] .e-grid:not(.e-gantt .e-grid) .e-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn {
    background: transparent;
}

/* Pagination. */
html[data-bs-theme="dark"] .e-pager,
html[data-bs-theme="dark"] .e-pager :is(.e-pagercontainer, .e-numericitem, .e-prevpagedisabled, .e-prevpage, .e-nextpage,
    .e-nextpagedisabled, .e-lastpagedisabled, .e-lastpage, .e-firstpage, .e-firstpagedisabled, .e-pager-default:hover) {
    background-color: var(--wb-ej2-surface);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-pager,
html[data-bs-theme="dark"] .e-pager :is(.e-pagerconstant, .e-parentmsgbar, .e-pagenomsg, .e-pagecountmsg) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-pager :is(.e-numericitem, .e-spacing, .e-numericitem:hover, div.e-icons.e-pager-default, .e-pager-default:hover) {
    color: var(--wb-ej2-link);
}
html[data-bs-theme="dark"] .e-pager div.e-icons.e-disable {
    color: var(--bs-tertiary-color);
}
html[data-bs-theme="dark"] .e-pager :is(.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover, .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover,
    .e-pager-default:hover, .e-numericitem.e-focused, .e-first.e-focused, .e-prev.e-focused, .e-next.e-focused, .e-last.e-focused) {
    background-color: var(--wb-ej2-hover);
}
html[data-bs-theme="dark"] .e-pager :is(.e-currentitem, .e-currentitem:hover, .e-currentitem.e-numericitem.e-focused) {
    background: var(--wb-ej2-selected);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}

/* Champs EJ2 de la grille et de ses popups : recherche, liste « par page », éditeurs en ligne, champs du filtre. */
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) :is(.e-input-group, .e-input-group.e-control-wrapper,
    .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper) {
    background: var(--wb-ej2-surface);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) :is(input.e-input, textarea.e-input, .e-input-group input, .e-float-input input) {
    background: transparent;
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) :is(input.e-input, .e-input-group input)::placeholder {
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) :is(.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon) {
    background: transparent;
    border-color: var(--wb-ej2-border);
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) :is(.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
    .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover) {
    background: var(--wb-ej2-hover);
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-pager, .e-popup, .e-dialog) .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] {
    background: var(--wb-ej2-surface-alt);
}

/* Cases à cocher (sélection des lignes, colonnes booléennes, listes du filtre et du choix des colonnes). */
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) :is(.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame,
    .e-checkbox-wrapper:hover .e-frame, .e-checkbox-wrapper .e-checkbox:focus + .e-frame, .e-checkbox-wrapper .e-checkbox:active + .e-frame):not(.e-check):not(.e-stop) {
    background-color: var(--wb-ej2-surface);
    border-color: var(--bs-secondary-color);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) :is(.e-checkbox-wrapper .e-label, .e-checkbox-wrapper:hover .e-label) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) .e-checkbox-wrapper.e-checkbox-disabled .e-frame:not(.e-check):not(.e-stop) {
    background-color: var(--wb-ej2-surface-alt);
    border-color: var(--wb-ej2-border);
}

/* Boutons radio (ET / OU du filtre personnalisé). */
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) .e-radio + label .e-label {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) .e-radio:not(:checked):not(:disabled) + label::before {
    background-color: var(--wb-ej2-surface);
    border-color: var(--bs-secondary-color);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-popup, .e-dialog) .e-radio:disabled + label .e-label {
    color: var(--bs-tertiary-color);
}

/* Popups attachées au body : listes déroulantes, filtre Excel, choix des colonnes, sous-menus du filtre. */
html[data-bs-theme="dark"] :is(.e-ddl.e-popup, .e-popup.e-multi-select-list-wrapper, .e-ddl.e-popup .e-filter-parent, .e-ddl.e-popup .e-filter-parent .e-input-group),
html[data-bs-theme="dark"] .e-dropdownbase :is(.e-list-item, .e-list-group-item, .e-fixed-head) {
    background-color: var(--wb-ej2-surface);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-popup {
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-dropdownbase .e-list-group-item {
    color: var(--wb-ej2-text-muted);
}
html[data-bs-theme="dark"] .e-dropdownbase :is(.e-list-item.e-hover, .e-list-item.e-item-focus),
html[data-bs-theme="dark"] .e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active.e-hover {
    background-color: var(--wb-ej2-hover);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-popup.e-multi-select-list-wrapper.e-checkbox .e-list-item.e-active,
html[data-bs-theme="dark"] .e-popup.e-ddl .e-dropdownbase.e-nodata {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-dialog,
html[data-bs-theme="dark"] .e-dialog :is(.e-dlg-header-content, .e-dlg-content, .e-footer-content),
html[data-bs-theme="dark"] .e-excelfilter .e-dlg-content {
    background-color: var(--wb-ej2-surface);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] .e-dialog :is(.e-dlg-header, .e-dlg-header *),
html[data-bs-theme="dark"] .e-dialog .e-btn.e-dlg-closeicon-btn :is(span, .e-icons) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-grid-popup) :is(.e-ftrchk.e-chkfocus, .e-menu-item.e-menufocus, li.e-cclist.e-colfocus, .e-ccheck.e-colfocus) {
    background-color: var(--wb-ej2-hover);
}
html[data-bs-theme="dark"] :is(.e-grid:not(.e-gantt .e-grid), .e-grid-popup) :is(.e-checkboxlist.e-checkbox-infinitescroll, .e-ccdlg .e-cc-contentdiv.e-checkbox-infinitescroll,
    .e-ccdlg .e-footer-content, .e-ccdlg .e-cc-searchdiv) {
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container) ul,
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container):not(.e-menu-container) .e-menu-vscroll.e-vscroll {
    background-color: var(--wb-ej2-surface);
    color: var(--wb-ej2-text);
    border-color: var(--wb-ej2-border);
}
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container) ul :is(.e-menu-item .e-menu-url, .e-menu-item, .e-menu-item .e-menu-icon, .e-menu-item .e-caret) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container) ul .e-menu-item.e-focused {
    background-color: var(--wb-ej2-hover);
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container) ul :is(.e-disabled, .e-disabled .e-menu-url, .e-disabled .e-menu-icon, .e-disabled .e-caret) {
    color: var(--bs-tertiary-color);
}
html[data-bs-theme="dark"] :is(.e-contextmenu-wrapper, .e-contextmenu-container) ul :is(.e-separator, .e-menu-item.e-menu-header) {
    border-bottom-color: var(--wb-ej2-border);
}
/* Boutons plats des dialogues (Annuler, Effacer) : #6c757d d'EJ2 illisible sur fond sombre. */
html[data-bs-theme="dark"] .e-dialog .e-btn.e-flat:not(.e-primary):not(.e-dlg-closeicon-btn) {
    color: var(--wb-ej2-text);
}
html[data-bs-theme="dark"] .e-dialog .e-btn.e-flat.e-primary:not(:hover):not(:focus):not(:active) {
    color: var(--wb-ej2-link);
}

/* Plein écran : fond de la page sombre au lieu du blanc figé. */
html[data-bs-theme="dark"] .wb-grid-fullscreen {
    background: var(--bs-body-bg);
}

/* ── Syncfusion Menu — intégration navbar Bootstrap ────────────────────── */

/* Le conteneur racine du menu ne doit pas être block */
#wb-main-menu {
    display: inline-flex;
    align-items: center;
}

/* Forcer l'affichage horizontal de la barre principale */
#wb-main-menu .e-menu-wrapper,
#wb-main-menu .e-menu-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#wb-main-menu .e-menu-wrapper ul.e-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    background: transparent !important;
    border: none !important;
    padding: 0;
    margin: 0;
}

/* Items de premier niveau — style navbar Bootstrap */
#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item {
    background: transparent !important;
    border: none !important;
}

#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item > .e-menu-url,
#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item > span.e-menu-text {
    color: rgba(0, 0, 0, .65) !important;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item:hover > span.e-menu-text,
#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item.e-focused > span.e-menu-text {
    color: rgba(0, 0, 0, .9) !important;
    background: transparent !important;
}

/* Supprimer le fond coloré de sélection sur le niveau racine */
#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item.e-selected,
#wb-main-menu .e-menu-wrapper ul.e-menu > li.e-menu-item.e-focused {
    background: rgba(0, 0, 0, .04) !important;
    border-radius: 4px;
}

/* Sous-menus — style dropdown Bootstrap */
#wb-main-menu .e-menu-wrapper ul.e-ul {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .15) !important;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .175) !important;
    min-width: 10rem;
    padding: 0.25rem 0;
}

#wb-main-menu .e-menu-wrapper ul.e-ul .e-menu-item {
    padding: 0.25rem 1rem;
    color: #212529 !important;
}

#wb-main-menu .e-menu-wrapper ul.e-ul .e-menu-item:hover {
    background: #f8f9fa !important;
}

/* ── Schedule — calendrier / timeline partagé (WbSchedule, WEBBASE-2141) ─── */

/* Événements « fond » (périodes de gel, indisponibilités) : hachurés, couleurs du thème. */
.e-schedule .e-block-appointment.wb-sched-background,
.e-schedule .e-block-indicator.wb-sched-background {
    background: repeating-linear-gradient(45deg,
        var(--bs-danger-bg-subtle), var(--bs-danger-bg-subtle) 8px,
        var(--bs-body-bg) 8px, var(--bs-body-bg) 16px) !important;
    color: var(--bs-danger-text-emphasis) !important;
    border: 1px dashed var(--bs-danger-border-subtle) !important;
    opacity: .9;
}

.e-schedule .e-appointment.wb-sched-event { cursor: pointer; }

/* Mode sombre : la feuille bootstrap5.css de Syncfusion est claire, on la recale sur les
   variables Bootstrap (qui suivent déjà le thème et sa variante sombre). */
html[data-bs-theme="dark"] .e-schedule,
html[data-bs-theme="dark"] .e-schedule .e-schedule-toolbar .e-toolbar-items,
html[data-bs-theme="dark"] .e-schedule .e-schedule-toolbar,
html[data-bs-theme="dark"] .e-schedule .e-table-container,
html[data-bs-theme="dark"] .e-schedule .e-work-cells,
html[data-bs-theme="dark"] .e-schedule .e-header-cells,
html[data-bs-theme="dark"] .e-schedule .e-date-header-wrap,
html[data-bs-theme="dark"] .e-schedule .e-time-cells-wrap,
html[data-bs-theme="dark"] .e-schedule .e-time-slots,
html[data-bs-theme="dark"] .e-schedule .e-resource-cells,
html[data-bs-theme="dark"] .e-schedule .e-resource-left-td,
html[data-bs-theme="dark"] .e-schedule .e-all-day-cells,
html[data-bs-theme="dark"] .e-schedule .e-month-view .e-work-cells {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .e-schedule .e-work-cells.e-work-hours,
html[data-bs-theme="dark"] .e-schedule .e-other-month {
    background-color: var(--bs-tertiary-bg) !important;
}
html[data-bs-theme="dark"] .e-schedule .e-toolbar .e-tbar-btn,
html[data-bs-theme="dark"] .e-schedule .e-toolbar .e-tbar-btn .e-icons,
html[data-bs-theme="dark"] .e-schedule .e-toolbar .e-tbar-btn-text {
    background: transparent !important;
    color: var(--bs-body-color) !important;
}
/* WEBBASE-3915 : bouton de débordement de la barre du calendrier (écran étroit), resté clair. */
html[data-bs-theme="dark"] .e-schedule .e-toolbar .e-hor-nav {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

/* ── Kanban — tableau de statuts partagé (WbKanban, WEBBASE-2140) ─────────── */

/* Pendant le glisser : colonnes autorisées mises en évidence, les autres grisées. */
.e-kanban .e-content-cells.wb-kanban-allowed {
    background-color: var(--bs-success-bg-subtle) !important;
    outline: 2px dashed var(--bs-success-border-subtle);
    outline-offset: -4px;
}
.e-kanban .e-content-cells.wb-kanban-forbidden { opacity: .45; }

.e-kanban .wb-kanban-card-title { line-height: 1.3; }
.e-kanban .e-card .wb-kanban-card { padding: .5rem .6rem; }

/* Défilement horizontal des colonnes seulement, sur mobile comme sur un grand nombre de statuts. */
.e-kanban .e-kanban-content,
.e-kanban .e-kanban-header { overflow-x: auto; }

html[data-bs-theme="dark"] .e-kanban,
html[data-bs-theme="dark"] .e-kanban .e-kanban-header .e-header-cells,
html[data-bs-theme="dark"] .e-kanban .e-kanban-content .e-content-row .e-content-cells {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-card {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-kanban-header .e-header-cells .e-header-text,
html[data-bs-theme="dark"] .e-kanban .e-kanban-header .e-header-cells .e-item-count {
    color: var(--bs-body-color) !important;
}
/* WEBBASE-2305 : bootstrap5.css fixe ses propres couleurs de thème clair sur l'en-tête et le contenu de carte
   (#212529 / #343a40 — titre presque invisible sur fond sombre), sur le texte d'une colonne vide et sur les fantômes
   de glisser-déposer. La couleur héritée de .e-card ne les atteint pas : surcharges explicites. La carte qui suit le
   curseur (.e-card.e-cloned-card, dans .e-kanban) est couverte par les règles de carte ci-dessus. */
html[data-bs-theme="dark"] .e-kanban .e-card .e-card-header,
html[data-bs-theme="dark"] .e-kanban .e-card .e-card-header-title,
html[data-bs-theme="dark"] .e-kanban .e-card .e-card-content {
    color: var(--bs-body-color) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-empty-card {
    color: var(--bs-secondary-color) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-target-dragged-clone {
    background: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-target-dropped-clone {
    background: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}
html[data-bs-theme="dark"] .e-kanban .e-multi-card-text {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

/* Calendrier partagé WbSchedule (WEBBASE-2141/2148/2167) — couleurs par catégorie d'événement, communes aux
   calendriers des changements et des releases (une seule source, variables du thème clair/sombre). */
.e-schedule .e-appointment.wb-sched-cat-submitted,
.e-schedule .e-appointment.wb-sched-cat-inassessment,
.e-schedule .e-appointment.wb-sched-cat-pendingapproval, .wb-legend-dot.wb-sched-cat-pendingapproval { background-color: var(--bs-warning) !important; color: var(--bs-dark) !important; }
.e-schedule .e-appointment.wb-sched-cat-approved,
.e-schedule .e-appointment.wb-sched-cat-scheduled, .wb-legend-dot.wb-sched-cat-scheduled { background-color: var(--bs-primary) !important; }
.e-schedule .e-appointment.wb-sched-cat-inprogress, .wb-legend-dot.wb-sched-cat-inprogress { background-color: var(--bs-info) !important; color: var(--bs-dark) !important; }
.e-schedule .e-appointment.wb-sched-cat-succeeded,
.e-schedule .e-appointment.wb-sched-cat-closed, .wb-legend-dot.wb-sched-cat-succeeded { background-color: var(--bs-success) !important; }
.e-schedule .e-appointment.wb-sched-cat-failed,
.e-schedule .e-appointment.wb-sched-cat-rolledback { background-color: var(--bs-secondary) !important; }
.e-schedule .e-appointment.wb-sched-cat-emergency, .wb-legend-dot.wb-sched-cat-emergency { background-color: var(--bs-danger) !important; }
.e-schedule .e-appointment.wb-sched-cat-release, .wb-legend-dot.wb-sched-cat-release { background-color: var(--bs-dark) !important; color: var(--bs-light) !important; }
.wb-legend-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.wb-legend-dot.wb-legend-freeze { border-radius: 2px; background: repeating-linear-gradient(45deg, var(--bs-danger-bg-subtle), var(--bs-danger-bg-subtle) 3px, var(--bs-body-bg) 3px, var(--bs-body-bg) 6px); border: 1px dashed var(--bs-danger-border-subtle); }

/* ── QueryBuilder — éditeurs de conditions (WEBBASE-3448) ──────────────────────────────────────────────────────
   Feuille commune à TOUS les QueryBuilder EJ2 (grille des tickets, règles d'automatisation…) : plus de bloc
   de styles local par écran. */

/* Bouton bascule ET/OU actif : bootstrap5.css fige #0d6efd ; il suit la couleur du thème de l'instance
   (--wb-primary, câblé sur --theme-brand par compat.css, clair et sombre). */
.e-query-builder .e-btn-group input:checked + label.e-btn,
.e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
    background: var(--wb-primary);
    border-color: var(--wb-primary);
    color: #fff;
}
.e-query-builder .e-btn-group input:checked + label.e-btn:hover,
.e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle:hover {
    background: var(--wb-primary-hover);
    border-color: var(--wb-primary-hover);
}

/* Alignement d'une règle : les cellules champ / opérateur / valeur / suppression sont des inline-block alignés
   sur leur ligne de base ; un modèle de valeur (conteneur inline-flex : ComboBox « valeur ou variable », date
   fixe + calendrier, deux bornes d'un « entre ») n'a pas la même ligne de base que les listes EJ2 et remontait de
   ~12 px. Cellules centrées verticalement, conteneur du modèle sans ligne de base. */
.e-query-builder .e-rule-field > .e-rule-filter,
.e-query-builder .e-rule-field > .e-rule-operator,
.e-query-builder .e-rule-field > .e-rule-value,
.e-query-builder .e-rule-field > .e-rule-value-delete {
    vertical-align: middle;
}
.e-query-builder .e-rule-value.e-template-value > * { vertical-align: top; }

/* Éditeur composite (date fixe + calendrier, « entre » à deux bornes, choix multiple) : la cellule valeur grandit
   avec son contenu au lieu de la largeur fixe d'EJ2, sinon l'éditeur déborde et recouvre le bouton de suppression. */
.e-query-builder .e-rule-value { width: auto !important; max-width: none !important; }
.e-query-builder .e-rule-value .d-inline-flex { flex-wrap: nowrap; }
.e-query-builder .e-rule-value .d-inline-flex > * { align-self: center; }
.e-query-builder .e-rule-value .form-select-sm,
.e-query-builder .e-rule-value .e-control,
.e-query-builder .e-rule-value .e-input-group { vertical-align: middle; margin: 0; }
.e-query-builder .e-rule-delete,
.e-query-builder .e-removerule { margin-left: .5rem; position: relative; z-index: 2; }

/* WEBBASE-3789 — arbres à libellés passés à la ligne (allowTextWrap, #3777) : le thème fixe line-height: 34px sur
   .e-list-text, ce qui espaçait de 34 px les lignes d'un même libellé. Interligne normal + padding vertical : une ligne
   seule garde sa hauteur (~34 px), un libellé sur deux lignes reste compact ; EJ2 recalcule ensuite la hauteur de la
   ligne pleine (.e-fullrow, fond de sélection) d'après celle du texte. */
.e-treeview.e-text-wrap .e-list-text {
    line-height: 1.4;
    padding-top: 7px;
    padding-bottom: 7px;
}