/* ════════════════════════════════════════════════════════════════
   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 10px !important;
    min-height: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !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
   ══════════════════════════════════════════════════════════════ */

.xaf-ribbon .dxbl-ribbon-item,
.xaf-ribbon .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 .dxbl-ribbon-item:hover,
    .xaf-ribbon .dxbl-ribbon-button:hover {
        background: var(--surface-2, #F9FAFC) !important;
        border-color: var(--line, #ECEDF1) !important;
        color: var(--ink-0, #0F1115) !important;
    }

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

    /* Désactivé */
    .xaf-ribbon .dxbl-ribbon-item.dxbl-disabled,
    .xaf-ribbon .dxbl-ribbon-button.dxbl-disabled,
    .xaf-ribbon .dxbl-ribbon-item[disabled],
    .xaf-ribbon .dxbl-ribbon-button[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 6px !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> enfant direct
   · Icon+text : <button><img ...><span>Texte</span></button>
                 → A un <span> avec le libellé

   Stratégie :
   · Si bouton A un <span>  → masquer img, padding horizontal
   · Si bouton SANS <span>  → garder img, padding carré
   ══════════════════════════════════════════════════════════════ */

/* ── Bouton ICON + TEXTE : masquer l'icône, garder le texte ── */
.xaf-ribbon .dxbl-ribbon-button:has(> span):has(> img) img.image,
.xaf-ribbon .dxbl-ribbon-button:has(> span):has(> img) img.xaf-toolbar-item-icon,
.xaf-ribbon .dxbl-ribbon-button:has(> span) .dxbl-image:not(.dxbl-toolbar-dropdown-toggle):not(.dxbl-toolbar-icon-more),
.xaf-ribbon .dxbl-ribbon-button:has(> span) [class*="xaf-image"] {
    display: none !important;
}

.xaf-ribbon .dxbl-ribbon-button:has(> span) {
    padding: 0 10px !important;
    gap: 0 !important;
}

/* ── Bouton ICON ONLY : garder l'icône, padding carré ──────── */
.xaf-ribbon .dxbl-ribbon-button:not(:has(> span)) {
    padding: 0 7px !important;
    gap: 0 !important;
}

    .xaf-ribbon .dxbl-ribbon-button:not(:has(> span)) img.image,
    .xaf-ribbon .dxbl-ribbon-button:not(:has(> span)) 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: 4px 8px 0 !important;
    margin-top: 0 !important;
    min-height: 34px !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;
}

    .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: 5px 8px 5px 12px !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;
    }


/* ══════════════════════════════════════════════════════════════
   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 : cacher l'icône uniquement si un caption existe */
.nested-toolbar .dxbl-btn:has(> span) > .xaf-toolbar-item-icon {
    display: none !important;
}

/* Réaligner le texte */
.nested-toolbar .dxbl-btn:has(> span) {
    gap: 0 !important;
}

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