/* ── Grid — Toolbar : icônes seulement ──────────────────────────────────── */

.e-grid .e-toolbar .e-tbar-btn-text {
    display: none !important;
}

/* ── 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;
}

/* ── 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;
}

/* ── 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;
}