/* ════════════════════════════════════════════════════════════════
   ACURBUSINESS — RIBBON + ONGLETS MDI  (v5 — CSS complet)
   Fichier : wwwroot/css/educated-ribbon.css

   DOM analysé :
   · Bouton icon-only  : <button><img class="image xaf-toolbar-item-icon"></button>
   · Bouton icon+text  : <button><img ...><span>Libellé</span></button>
   · Tab ribbon        : dxbl-tabs-item  SANS  .xaf-tab-header-template
   · Tab MDI           : dxbl-tabs-item  AVEC  .xaf-tab-header-template
   ════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   0. FONT GLOBALE
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon,
.xaf-ribbon *,
.dxbl-tabs-tablist,
.dxbl-tabs-tablist * {
    font-family: "Geist", "Public Sans", system-ui, -apple-system, sans-serif !important;
    box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════════
   1. RIBBON — Conteneur + reset DevExpress
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon {
    background: var(--surface-1, #fff) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--line, #ECEDF1) !important;
    box-shadow: none !important;
}

    /* Reset bordures/ombres parasites sur les conteneurs internes */
    .xaf-ribbon .dxbl-ribbon-toolbar,
    .xaf-ribbon .dxbl-tabs-content-panel,
    .xaf-ribbon .dxbl-tabs-content,
    .xaf-ribbon .dxbl-adaptive-container,
    .xaf-ribbon .dxbl-adaptive-container-content,
    .xaf-ribbon .dxbl-btn-toolbar {
        border: 0 !important;
        box-shadow: none !important;
        background: var(--surface-1, #fff) !important;
    }

    .xaf-ribbon .dxbl-tabs-tablist {
        border-bottom: 0 !important;
    }


    /* ══════════════════════════════════════════════════════════════
   2. RANGÉE ONGLETS RIBBON  (Accueil / Vue / Données…)
   Hauteur : 34px  |  fond blanc  |  soulignement indigo actif
   NB : ces items N'ont PAS .xaf-tab-header-template
   ══════════════════════════════════════════════════════════════ */

    /* Tablist de la rangée ribbon */
    .xaf-ribbon .dxbl-tabs-tablist {
        background: var(--surface-1, #fff) !important;
        border-bottom: 0 !important;
        padding: 0 8px !important;
        min-height: 34px !important;
        display: flex !important;
        align-items: stretch !important;
    }

    /* Onglet ribbon générique */
    .xaf-ribbon .dxbl-tabs-item:not(:has(.xaf-tab-header-template)) {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: var(--ink-2, #4B5160) !important;
        padding: 6px 14px !important;
        border: 0 !important;
        background: transparent !important;
        position: relative !important;
        transition: color 100ms !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

        .xaf-ribbon .dxbl-tabs-item:not(:has(.xaf-tab-header-template)):hover {
            color: var(--ink-0, #0F1115) !important;
        }

    .xaf-ribbon .dxbl-tabs-item.dxbl-active:not(:has(.xaf-tab-header-template)) {
        color: var(--brand) !important;
        font-weight: 600 !important;
    }

        /* Soulignement indigo — onglet ribbon actif */
        .xaf-ribbon .dxbl-tabs-item.dxbl-active:not(:has(.xaf-tab-header-template))::after {
            content: "" !important;
            position: absolute !important;
            left: 10px !important;
            right: 10px !important;
            bottom: 0 !important;
            height: 2px !important;
            background: var(--brand) !important;
            border-radius: 2px 2px 0 0 !important;
        }

    /* Annule tout pseudo-élément hérité sur onglets ribbon */
    .xaf-ribbon .dxbl-tabs-item:not(:has(.xaf-tab-header-template)):not(.dxbl-active)::after,
    .xaf-ribbon .dxbl-tabs-item:not(:has(.xaf-tab-header-template))::before {
        display: none !important;
        content: none !important;
    }

/* Bouton hamburger (≡ masquer nav) — dans la tablist */
.xaf-ribbon-hamburger-tab,
.dxbl-ribbon-application-tab {
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: var(--ink-2, #4B5160) !important;
    padding: 5px 8px !important;
    transition: 100ms !important;
}

    .xaf-ribbon-hamburger-tab:hover {
        background: var(--surface-2, #F9FAFC) !important;
        color: var(--ink-0, #0F1115) !important;
    }


/* ══════════════════════════════════════════════════════════════
   3. RANGÉE ACTIONS RIBBON
   Hauteur : 42px  |  fond blanc
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon .dxbl-ribbon-toolbar {
    background: var(--surface-1, #fff) !important;
    padding: 5px 8px !important;
    min-height: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    border-top: 1px solid var(--line, #ECEDF1) !important;
}

/* Override DevExpress Fluent theme */
.dxbl-theme-fluent .xaf-ribbon .dxbl-tabs-content-panel .dxbl-ribbon-toolbar {
    --dxbl-ribbon-adaptive-toolbar-padding-x: 10px !important;
    height: 42px !important;
    min-height: 42px !important;
}


/* ══════════════════════════════════════════════════════════════
   4. BOUTONS D'ACTION — base commune
   ──────────────────────────────────────────────────────────────
   IMPORTANT : .dxbl-ribbon-item est porté par <dxbl-bar-item>,
   un WEB COMPONENT (shadow DOM). Mettre display/align-items dessus
   casse son layout interne géré par XAF (le bouton "Nouveau"
   disparaît, les autres items se réarrangent mal).
   → On ne stylise QUE les éléments HTML natifs rendus à l'intérieur :
     - <button class="dxbl-ribbon-button">            (bouton simple,
       y compris ceux qui portent AUSSI .dxbl-ribbon-item-split)
     - <div class="dxbl-btn-split dxbl-ribbon-button">  (split button
       avec deux <button> internes distincts : action + toggle)
   ══════════════════════════════════════════════════════════════ */

/* ── Reset cosmétique sur le web component — SANS display/align ── */
.xaf-ribbon .dxbl-ribbon-item {
    background: transparent !important;
    border-radius: 6px !important;
    transition: 100ms !important;
}

/* ── Bouton simple : <button class="dxbl-ribbon-button"> ────────── */
.xaf-ribbon button.dxbl-ribbon-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--ink-1, #1F2330) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    transition: 100ms !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .xaf-ribbon button.dxbl-ribbon-button:hover {
        background: var(--surface-2, #F9FAFC) !important;
        border-color: var(--line, #ECEDF1) !important;
        color: var(--ink-0, #0F1115) !important;
    }

    .xaf-ribbon button.dxbl-ribbon-button span {
        color: inherit !important;
        font-size: 12.5px !important;
        font-weight: inherit !important;
    }

    .xaf-ribbon button.dxbl-ribbon-button.dxbl-disabled,
    .xaf-ribbon button.dxbl-ribbon-button[disabled] {
        opacity: .32 !important;
        pointer-events: none !important;
    }

/* ── Split button : <div class="dxbl-btn-split dxbl-ribbon-button"> ──
   Ex: Imprimer, Exporter, Operations, Date, Afficher
   ═══════════════════════════════════════════════════════════════ */
.xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: 100ms !important;
}

    .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button:hover {
        background: var(--surface-2, #F9FAFC) !important;
        border-color: var(--line, #ECEDF1) !important;
    }

    /* Boutons internes du split (action + toggle) */
    .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button {
        background: transparent !important;
        border: 0 !important;
        color: var(--ink-1, #1F2330) !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

        .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button span {
            color: inherit !important;
            font-size: 12.5px !important;
            font-weight: inherit !important;
        }

        /* Séparateur interne entre bouton action et flèche toggle */
        .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button.dxbl-btn-split-dropdown {
            border-left: 1px solid var(--line, #ECEDF1) !important;
            padding: 0 6px !important;
            width: 22px !important;
            flex-shrink: 0 !important;
        }

        .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button.dxbl-disabled,
        .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button:disabled,
        .xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button.dxbl-disabled {
            opacity: .32 !important;
            pointer-events: none !important;
        }

/* Séparateurs entre groupes */
.xaf-ribbon .dxbl-toolbar-group-separator {
    background: var(--line, #ECEDF1) !important;
    width: 1px !important;
    height: 18px !important;
    margin: 0 4px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    border: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   5. ICÔNES — règle clé : icon-only vs icon+caption
   ══════════════════════════════════════════════════════════════

   DOM XAF :
   · Icon-only : <button><img class="image xaf-toolbar-item-icon"></button>
                 → PAS de <span> de LIBELLÉ enfant direct
   · Icon+text : <button><img ...><span>Texte</span></button>
                 → A un <span> avec le libellé

   ⚠️ FIX CRITIQUE : notre badge coloré injecté par
   educated-ribbon-icons.js EST LUI-MÊME un <span class="educated-ribbon-ico">.
   Sans exclusion, TOUS les boutons (même icon-only comme "Filtrer par
   département") matchent :has(> span) à cause de ce badge, et reçoivent
   à tort le padding "icône+texte" au lieu du padding compact "icône seule"
   → largeur excessive constatée. On exclut donc explicitement
   .educated-ribbon-ico de la détection via :has(> span:not(.educated-ribbon-ico)).

   Stratégie :
   · Si bouton A un <span> DE LIBELLÉ (hors badge) → masquer img, padding horizontal
   · Si bouton SANS <span> de libellé (icon-only, avec ou sans badge) → padding carré
   ══════════════════════════════════════════════════════════════ */

/* ── Bouton ICON + TEXTE : icône ET texte affichés ensemble ──
   (masquage désactivé — l'icône reste visible à côté du libellé) */
.xaf-ribbon .dxbl-ribbon-button:has(> span:not(.educated-ribbon-ico)):has(> img):not(:has(> img.educated-icon-hidden)) img.image,
.xaf-ribbon .dxbl-ribbon-button:has(> span:not(.educated-ribbon-ico)):has(> img):not(:has(> img.educated-icon-hidden)) img.xaf-toolbar-item-icon {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    flex-shrink: 0 !important;
    opacity: 0.75 !important;
}

.xaf-ribbon .dxbl-ribbon-button:has(> span:not(.educated-ribbon-ico)) {
    padding: 0 8px !important;
    gap: 6px !important;
}

/* ── Bouton ICON ONLY (avec ou sans notre badge) : padding carré ──── */
.xaf-ribbon .dxbl-ribbon-button:not(:has(> span:not(.educated-ribbon-ico))) {
    padding: 0 5px !important;
    gap: 0 !important;
}

    .xaf-ribbon .dxbl-ribbon-button:not(:has(> span:not(.educated-ribbon-ico))) img.image,
    .xaf-ribbon .dxbl-ribbon-button:not(:has(> span:not(.educated-ribbon-ico))) img.xaf-toolbar-item-icon {
        width: 16px !important;
        height: 16px !important;
        display: block !important;
        flex-shrink: 0 !important;
        opacity: 0.75 !important;
    }

/* Chevron dropdown (▾) — toujours visible sur les dropdown buttons */
.xaf-ribbon .dxbl-toolbar-dropdown-toggle {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 4px !important;
    opacity: 0.5 !important;
}


/* ══════════════════════════════════════════════════════════════
   6. BOUTON "New" — pill indigo + badge N
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon .dxbl-ribbon-button[data-action-name="New"] {
    background: var(--brand) !important;
    color: #fff !important;
    border: 1px solid var(--brand) !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    gap: 8px !important;
    height: 30px !important;
    box-shadow: 0 1px 3px rgba(62,62,144,.20) !important;
    letter-spacing: -0.005em !important;
}

    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"]:hover {
        background: var(--brand-2) !important;
        border-color: var(--brand-2) !important;
        color: #fff !important;
        box-shadow: 0 2px 6px rgba(62,62,144,.28) !important;
        transform: translateY(-1px) !important;
    }

    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"]:active {
        transform: translateY(0) !important;
    }

    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"] span {
        color: #fff !important;
        font-weight: 600 !important;
    }

    /* Badge "N" */
    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"]::after {
        content: "N" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        font-family: "JetBrains Mono", ui-monospace, monospace !important;
        color: var(--brand) !important;
        background: rgba(255,255,255,.92) !important;
        border-radius: 4px !important;
        width: 16px !important;
        height: 16px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    /* Icône New toujours masquée */
    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"] img,
    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"] .image,
    .xaf-ribbon .dxbl-ribbon-button[data-action-name="New"] [class*="xaf-image"] {
        display: none !important;
    }


/* ══════════════════════════════════════════════════════════════
   7. BOUTON "Delete" — rouge discret
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon .dxbl-ribbon-button[data-action-name="Delete"] {
    color: var(--danger, #E11D48) !important;
}

    .xaf-ribbon .dxbl-ribbon-button[data-action-name="Delete"]:hover {
        background: var(--danger-soft, #FCDCE5) !important;
        border-color: transparent !important;
        color: var(--danger, #E11D48) !important;
    }

    .xaf-ribbon .dxbl-ribbon-button[data-action-name="Delete"] span {
        color: inherit !important;
    }


/* ══════════════════════════════════════════════════════════════
   8. SWITCH DESIGN/VIEW MODE — accent brand
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon .xaf-dashboard-wm-switch-btn {
    color: var(--brand) !important;
}

    .xaf-ribbon .xaf-dashboard-wm-switch-btn:hover {
        background: var(--brand-soft, #EBEBF6) !important;
        border-color: transparent !important;
    }


/* ══════════════════════════════════════════════════════════════
   9. ONGLETS MDI  (.xaf-tab-header-template)
   Tablist : fond surface-2  |  onglet actif : fond blanc + border
   ══════════════════════════════════════════════════════════════ */

/* ── Tablist MDI — fond gris, alignée en bas ────────────────── */
/* .xaf-tabbed-mdi est la classe XAF du conteneur MDI principal */
.xaf-tabbed-mdi .dxbl-tabs-tablist,
.dxbl-tabs-tablist:has(.xaf-tab-header-template) {
    background: var(--surface-2, #F9FAFC) !important;
    /*border-bottom: 1px solid var(--line, #ECEDF1) !important;*/
    border-top: 0 !important;
    padding: 2px 8px 0 !important;
    margin-top: 0 !important;
    min-height: 26px !important;
    align-items: flex-end !important;
    /* Colle à la border-bottom du ribbon sans espace */
    box-shadow: none !important;
}

/* Conteneur parent de la tablist MDI — supprime tout padding/margin parasite */
.xaf-tabbed-mdi {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Item MDI lui-même — neutralise tout padding/hauteur par défaut DX
   non visible dans le DOM statique (le composant peut en ajouter au
   runtime), pour que seule .xaf-tab-header-template pilote la taille */
.dxbl-tabs-item:has(.xaf-tab-header-template) {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end !important;
}

.xaf-tabbed-mdi > dxbl-tab-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Annule pseudo-éléments du ribbon qui pollueraient les items MDI */
.dxbl-tabs-item:has(.xaf-tab-header-template)::after,
.dxbl-tabs-item:has(.xaf-tab-header-template)::before {
    display: none !important;
    content: none !important;
}

/* Clone invisible XAF (space-reservation) */
.dxbl-tabs-space-reservation {
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

    .dxbl-tabs-space-reservation::after,
    .dxbl-tabs-space-reservation::before {
        display: none !important;
    }

/* ── Template onglet MDI — base ─────────────────────────────── */
.xaf-tab-header-template {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ink-3, #858B99) !important;
    padding: 3px 8px 3px 10px !important;
    border-radius: 6px 6px 0 0 !important;
    gap: 0 !important;
    transition: 80ms !important;
    border: 1px solid transparent !important;
    border-bottom: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    /* Largeur max pour tronquer les titres longs */
    max-width: 160px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

    /* Wrapper flex interne — doit aussi être contraint */
    .xaf-tab-header-template > span.d-flex {
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0 !important;
        margin-right: 4px !important; /* espace avant le ✕ */
    }

    .xaf-tab-header-template .dxbl-tabs-text-overflow {
        color: inherit !important;
        font-size: 12.5px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
        min-width: 0 !important;
    }

/* ── Onglet MDI INACTIF ─────────────────────────────────────── */
.dxbl-tabs-item:not(.dxbl-active) .xaf-tab-header-template {
    background: transparent !important;
    color: var(--ink-3, #858B99) !important;
    border-color: transparent !important;
}

.dxbl-tabs-item:not(.dxbl-active):hover .xaf-tab-header-template {
    background: rgba(255,255,255,.7) !important;
    color: var(--ink-1, #1F2330) !important;
    border-color: var(--line, #ECEDF1) !important;
}

/* ── Onglet MDI ACTIF ───────────────────────────────────────── */
.dxbl-tabs-item.dxbl-active .xaf-tab-header-template {
    background: var(--surface-1, #fff) !important;
    color: var(--ink-0, #0F1115) !important;
    font-weight: 600 !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    border-bottom: 1px solid var(--surface-1, #fff) !important;
    /* Descend de 1px pour couvrir la border-bottom de la tablist */
    margin-bottom: -1px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Soulignement indigo brand — sur le .dxbl-text réel uniquement */
.dxbl-tabs-item.dxbl-active
.dxbl-text:not(.dxbl-tabs-space-reservation)
.xaf-tab-header-template::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--brand) !important;
    border-radius: 0 !important;
    z-index: 3 !important;
}


/* ══════════════════════════════════════════════════════════════
   10. BOUTON FERMETURE ✕
   ══════════════════════════════════════════════════════════════ */

.xaf-close-tab-button {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 3px !important;
    color: var(--ink-4, #B5BBC7) !important; /* très discret par défaut */
    opacity: .7 !important;
    cursor: pointer !important;
    transition: 80ms !important;
    flex-shrink: 0 !important;
    margin-left: 2px !important;
}

    .xaf-close-tab-button:hover {
        background: var(--line-2, #E3E5EA) !important;
        color: var(--ink-0, #0F1115) !important;
        opacity: 1 !important;
    }

    .xaf-close-tab-button svg {
        width: 10px !important;
        height: 10px !important;
    }

/* ✕ onglet actif — légèrement brand */
.dxbl-tabs-item.dxbl-active .xaf-close-tab-button {
    color: var(--brand) !important;
    opacity: .65 !important;
}

    .dxbl-tabs-item.dxbl-active .xaf-close-tab-button:hover {
        background: var(--brand-soft, #EBEBF6) !important;
        opacity: 1 !important;
    }

/* ── Mode compact XAF (dxbl-sm) ────────────────────────────────────
   Le mode compact ne pose PAS de classe .dxbl-sm sur un ancêtre du
   tab (contrairement à la sidebar) — seul le bouton fermer interne
   la reçoit (cf. DOM : "dxbl-btn ... dxbl-sm ... xaf-close-tab-button").
   On utilise :has() pour remonter du bouton compact vers tout le
   tab et resserrer le template en cascade. ─────────────────────── */
.xaf-tab-header-template:has(.xaf-close-tab-button.dxbl-sm) {
    padding: 2px 6px 2px 8px !important;
}

.xaf-close-tab-button.dxbl-sm {
    width: 14px !important;
    height: 14px !important;
}

    .xaf-close-tab-button.dxbl-sm svg {
        width: 9px !important;
        height: 9px !important;
    }


/* ══════════════════════════════════════════════════════════════
   11. BOUTONS SCROLL  ‹ ›  des onglets
   ══════════════════════════════════════════════════════════════ */

.dxbl-tabs-scroll-btn-prev,
.dxbl-tabs-scroll-btn-next {
    color: var(--ink-3, #858B99) !important;
    background: transparent !important;
    border: 0 !important;
}

    .dxbl-tabs-scroll-btn-prev:hover,
    .dxbl-tabs-scroll-btn-next:hover {
        color: var(--ink-0, #0F1115) !important;
        background: var(--surface-2, #F9FAFC) !important;
    }

/* Nested Toolbar : icône ET texte affichés ensemble */
.nested-toolbar .dxbl-btn:has(> span) > .xaf-toolbar-item-icon {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Espacement icône/texte */
.nested-toolbar .dxbl-btn:has(> span) {
    gap: 6px !important;
}

/* Boutons */
.nested-toolbar .dxbl-btn {
    min-height: 34px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
}

.ParamActionDate {
    width: 130px;
}


/* ══════════════════════════════════════════════════════════════
   12. PARAMETRIZED ACTION DATE — appearance uniquement
   ──────────────────────────────────────────────────────────────
   Disposition NATIVE XAF conservée (ordre DOM, visibilité du
   bouton caption d-none inchangés). Seule l'APPARENCE est modifiée :
   couleurs, bordures, radius — cohérents avec le design V5.
   ══════════════════════════════════════════════════════════════ */

/* Conteneur bar-item ribbon — largeur auto au lieu du 130px fixe */
.xaf-ribbon .ParamActionDate {
    width: auto !important;
    min-width: 0 !important;
}

/* ── Pill — apparence seule, aucun display/order forcé ──────────── */
.xaf-ribbon dxbl-date-edit.parametrized-action-wrapper, .nested-toolbar dxbl-date-edit.parametrized-action-wrapper {
    border: 1px solid var(--line, #ECEDF1) !important;
    border-radius: 8px !important;
    background: var(--surface-1, #fff) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    height: 30px !important;
    width: 130px !important;
    transition: border-color 120ms, box-shadow 120ms !important;
}

    .xaf-ribbon dxbl-date-edit.parametrized-action-wrapper:focus-within,
    .nested-toolbar dxbl-date-edit.parametrized-action-wrapper:focus-within {
        border-color: var(--brand, #6B35BE) !important;
        box-shadow: 0 0 0 3px var(--brand-soft, #EDE8F8) !important;
    }

    /* ── Champ texte (date) — couleurs/typo seulement ────────────────── */
    .xaf-ribbon dxbl-date-edit.parametrized-action-wrapper input.dxbl-text-edit-input,
    .nested-toolbar dxbl-date-edit.parametrized-action-wrapper input.dxbl-text-edit-input {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        font-family: "Geist", system-ui, sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: var(--ink-1, #1F2330) !important;
    }

    /* ── Bouton icône calendrier — couleurs seulement ────────────────── */
    .xaf-ribbon dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown,
    .nested-toolbar dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown {
        background: transparent !important;
        border: 0 !important;
        border-left: 1px solid var(--line, #ECEDF1) !important;
        box-shadow: none !important;
        color: var(--brand, #6B35BE) !important;
        transition: background 120ms !important;
    }

        .xaf-ribbon dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown:hover,
        .nested-toolbar dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown:hover {
            background: var(--brand-soft, #EDE8F8) !important;
        }

        .xaf-ribbon dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown svg,
        .nested-toolbar dxbl-date-edit.parametrized-action-wrapper .dxbl-edit-btn-dropdown svg {
            color: inherit !important;
        }

/* ── Espacement entre pickers Début/Fin consécutifs (ribbon) ──────── */
.xaf-ribbon dxbl-bar-item.ParamActionDate + dxbl-bar-item.ParamActionDate {
    margin-left: 6px !important;
}


/* ══════════════════════════════════════════════════════════════
   13. RECHERCHE PLEIN TEXTE — xaf-action-fulltextsearch
   ──────────────────────────────────────────────────────────────
   Disposition native XAF conservée (icône loupe déjà à droite par
   défaut). Appearance seule : bordure, radius, focus, couleur icône.
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon dxbl-input-editor.parametrized-action-wrapper.xaf-action-fulltextsearch,
.nested-toolbar dxbl-input-editor.parametrized-action-wrapper.xaf-action-fulltextsearch {
    border: 1px solid var(--line, #ECEDF1) !important;
    border-radius: 8px !important;
    background: var(--surface-1, #fff) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    height: 30px !important;
    transition: border-color 120ms, box-shadow 120ms !important;
}

    .xaf-ribbon dxbl-input-editor.parametrized-action-wrapper.xaf-action-fulltextsearch:focus-within,
    .nested-toolbar dxbl-input-editor.parametrized-action-wrapper.xaf-action-fulltextsearch:focus-within {
        border-color: var(--brand, #6B35BE) !important;
        box-shadow: 0 0 0 3px var(--brand-soft, #EDE8F8) !important;
    }

/* ── Champ texte ──────────────────────────────────────────────────── */
.xaf-ribbon .xaf-action-fulltextsearch input.dxbl-text-edit-input,
.nested-toolbar .xaf-action-fulltextsearch input.dxbl-text-edit-input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: "Geist", system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--ink-1, #1F2330) !important;
}

    .xaf-ribbon .xaf-action-fulltextsearch input.dxbl-text-edit-input::placeholder,
    .nested-toolbar .xaf-action-fulltextsearch input.dxbl-text-edit-input::placeholder {
        color: var(--ink-3, #858B99) !important;
        font-weight: 400 !important;
        opacity: 1 !important;
    }

/* ── Bouton loupe — couleur brand au lieu de l'orange DX par défaut ── */
.xaf-ribbon .xaf-action-fulltextsearch .dxbl-text-edit-btn,
.nested-toolbar .xaf-action-fulltextsearch .dxbl-text-edit-btn {
    background: transparent !important;
    border: 0 !important;
    border-left: 1px solid var(--line, #ECEDF1) !important;
    box-shadow: none !important;
    color: var(--brand, #6B35BE) !important;
    transition: background 120ms !important;
}

    .xaf-ribbon .xaf-action-fulltextsearch .dxbl-text-edit-btn:hover,
    .nested-toolbar .xaf-action-fulltextsearch .dxbl-text-edit-btn:hover {
        background: var(--brand-soft, #EDE8F8) !important;
    }

    /* Icône loupe — image IImageService, filtre couleur brand */
    .xaf-ribbon .xaf-action-fulltextsearch .dxbl-text-edit-btn img.xaf-toolbar-item-icon,
    .nested-toolbar .xaf-action-fulltextsearch .dxbl-text-edit-btn img.xaf-toolbar-item-icon {
        filter: brightness(0) saturate(100%) invert(24%) sepia(54%) saturate(1900%) hue-rotate(240deg) brightness(85%) contrast(95%) !important;
        opacity: .85 !important;
    }

.xaf-ribbon .dxbl-toolbar,
.dxbl-ribbon-toolbar {
    /* ── Espacement entre GROUPES du ribbon ─────────────────────── */
    --dxbl-toolbar-group-spacing: 4px; /* était --dxds-spacing-60, plus large */
    --dxbl-toolbar-group-large-spacing: 8px; /* était spacing-80 * 2 */
    /* ── Espacement entre ITEMS à l'intérieur d'un groupe ───────── */
    --dxbl-toolbar-item-spacing: 4px; /* était --dxds-spacing-80 */
    --dxbl-toolbar-item-large-spacing: 8px; /* était spacing-80 * 2 */
    /* ── Espacement icône ↔ texte à l'intérieur d'un bouton ─────── */
    --dxbl-toolbar-btn-image-spacing-s: 4px;
    --dxbl-toolbar-btn-image-spacing-m: 4px;
    --dxbl-toolbar-btn-image-spacing-l: 2px;
    /* ── Padding horizontal du texte dans les boutons ───────────── */
    --dxbl-toolbar-item-text-padding-horizontal: 6px; /* était spacing-20 */
    /* ── Radius des items (cohérent avec notre design V5) ───────── */
    --dxbl-toolbar-item-border-radius: 6px;
    /* ── Séparateur entre groupes — plus fin ────────────────────── */
    --dxbl-toolbar-separator-width: 1px;
    --dxbl-toolbar-separator-color: var(--line, #ECEDF1);
}