/* ===================================================================================================
   BASE STYLES - Blazor Root Elements
   =================================================================================================== */
html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/* POLICE ROBOTO - Chargement avec fallback */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../lib/fonts/roboto-v50-latin-regular.woff2') format('woff2');
    font-display: swap;
    font-display: optional;
}

/* Application de la police avec fallback système */
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ===================================================================================================
   THEME OVERRIDES
   =================================================================================================== */
[data-bs-theme="dark"] {
    --bs-body-bg: #202020;
    --bs-body-bg-rgb: 32, 32, 32;
    --bs-tertiary-bg: #202020 !important;
    --bs-border-color: #3d3d3d !important;
    --bs-body-color: #ffffff !important;
    --bs-body-color-rgb: 255, 255, 255 !important;
    --bs-border-color: #3d3d3d !important;
    --bs-border-color-translucent: rgba(61, 61, 61, 0.5) !important;
    --dx-border-color: #3d3d3d !important;
}

    [data-bs-theme="dark"] .dxbl-adaptive-container.dxbl-btn-toolbar {
        background-color: #2c2c2c !important;
    }

[data-bs-theme="dark"] .xaf-sidebar.sidebar {
    border-right: 1px solid #3d3d3d !important;
    box-shadow: none !important;
}
/* Modification du fond des éditeurs (TextEdit, ComboBox, etc.) en mode sombre */
    [data-bs-theme="dark"] .dxbl-input-editor.dxbl-text-edit,
    [data-bs-theme="dark"] .dxbl-combo-box.dxbl-text-edit {
        background-color: #2c2c2c !important;
    }
/* Correction pour l'élément input interne (pour éviter les flashs blancs ou héritages) */
    [data-bs-theme="dark"] .dxbl-text-edit-input {
        background-color: #2c2c2c !important;
    }
/* Utilisation de :has() sur le conteneur de grille directement */
div:has(> .grid-content .dxbl-grid) {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/* Supprime le padding-top uniquement sur les ListViews */
.xaf-list-view .main-content.xaf-flex-auto {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/* Alternative si la classe n'est pas sur le parent direct : 
   on cherche si une grille (propre aux listes) est présente à l'intérieur */
.main-content.xaf-flex-auto:has(.dxbl-grid) {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
/* Supprime les marges latérales du splitter Master-Detail */
.xaf-masterdetail-splitter {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
        
/* Optionnel : Ajuster la poignée (handle) pour qu'elle occupe tout l'espace si nécessaire */
.xaf-masterdetail-splitter .handle-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
[data-bs-theme="dark"] body {
    background-color: #202020 !important;
    --bs-color-border: #3d3d3d !important;
}

/* ===================================================================================================
   Icône de rafraichissement SVG agnostique pour Blazor 
   ===================================================================================================*/
.icon-custom-hourglass {
    background-image: url('../images/hourglass.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important; /* contain permet à l'image de s'adapter au carré de 16x16 */
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
}

/* ===================================================================================================
   Positionnement du logo à droite du ruban PRINCIPAL (Ciblage par composant)
   =================================================================================================== */
/* 1. On applique le logo au ruban principal de la fenêtre */
.main-ribbon .dxbl-adaptive-container-content {
   display: flex !important;
   align-items: center;
   width: 100%;
}

.main-ribbon .dxbl-adaptive-container-content::after {
   content: "";
   display: block;
   margin-left: auto;
   margin-right: 15px;
   width: 32px;
   height: 32px;
   background-image: url('../images/logo.svg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   flex-shrink: 0;
}
    
/* Sécurité supplémentaire : On s'assure qu'il ne s'affiche PAS dans un RichTextEditor */
.dxbl-rich-edit .dxbl-adaptive-container-content::after {
    display: none !important;
}
/* ===================================================================================================
   LOGO CUSTOMIZATION
   =================================================================================================== */
.header-logo {
    flex-shrink: 0;
    width: auto;
    height: 36px;
    object-fit: contain;
    object-position: left center;
} 
/* Inversion de couleur du logo SVG selon le thème */
[data-bs-theme="dark"] .header-logo {
    filter: invert(1) brightness(1.2);
}

[data-bs-theme="light"] .header-logo {
    filter: none;
}
/* ===================================================================================================
   DIAGNOSTIC STYLES
   =================================================================================================== */
.grp-size {
    overflow-x: auto;
}

.item-num-size {
    min-width: 200px !important;
    width: 300px !important;
    flex: 0 0 300px;
    max-width: 100% !important;
    overflow: hidden !important;
}

.item-txt-size {
    min-width: 600px;
}
/* ===================================================================================================
   DEVEXPRESS GRID - Resizing Listview columns
   =================================================================================================== */
.dxbl-grid {
    table-layout: auto !important;
    width: 100% !important;
    height: 100%;
    max-height: 2000px;
}

.nested-grid {
    min-height: 250px;
}

.dxbl-grid-container {
    overflow-x: auto !important;
}

.dxbl-grid-table td,
.dxbl-grid-table th {
    box-sizing: content-box !important;
    width: auto !important;
    white-space: nowrap !important;
}

.dxbl-grid-table-container {
    display: inline-block !important;
    min-width: 100% !important;
}

.dxbl-grid-table td > div,
.dxbl-grid-table th > div {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px !important;
}
/* Grid clickable rows */
.dxbl-grid-table tr {
    cursor: pointer !important;
}
/* ===================================================================================================
   DEVEXPRESS GROUP HEADER - Light/Dark mode customization
   =================================================================================================== */
dxbl-group-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: var(--dxbl-group-header-font-size);
    line-height: 14px;
    font-weight: var(--dxbl-group-header-font-weight);
    padding: var(--dxbl-group-header-padding-y) var(--dxbl-group-header-padding-x);
    margin-bottom: 0;
    border-bottom: var(--dxbl-group-border-width) solid var(--dxbl-group-border-color);
    border-radius: var(--dxbl-group-header-border-radius) var(--dxbl-group-header-border-radius) 0 0;
    position: relative;
    background-color: var(--dxbl-group-header-bg, unset);
    color: var(--dxbl-group-header-color);
    margin: -1px -1px 0 -1px !important;
    width: calc(100% + 2px) !important;
    background-clip: padding-box !important;
    box-shadow: 0 0 0 0.5px var(--dxbl-group-header-bg) !important;
    border-top-left-radius: var(--dxbl-group-header-border-radius) !important;
    border-top-right-radius: var(--dxbl-group-header-border-radius) !important;
    border-bottom: none !important;
}

.dxbl-group {
    overflow: hidden !important;
}

.dxbl-group-header {
    background-clip: padding-box !important;
}

.dxbl-group.expanded {
    border-bottom-left-radius: var(--dxbl-group-header-border-radius, 4px) !important;
    border-bottom-right-radius: var(--dxbl-group-header-border-radius, 4px) !important;
    overflow: hidden !important;
    border: 1px solid var(--dxbl-group-border-color) !important;
}

.dxbl-group.expanded .dxbl-group-body,
.dxbl-group.expanded .dxbl-group-body-content {
    border-bottom-left-radius: var(--dxbl-group-header-border-radius, 4px) !important;
    border-bottom-right-radius: var(--dxbl-group-header-border-radius, 4px) !important;
}
/* ====================================================================================================
   DASHBOARD
   ==================================================================================================== */
/* --- DÉBUT DU CORRECTIF DASHBOARD XAF --- */
/* 1. Cible le conteneur principal SI il contient un dashboard */
.main-content:has(.xaf-dashboard-container) {
    padding: 0 !important;
    height: 100vh !important; /* Force la hauteur si nécessaire */
    max-width: 100% !important;
}
/* 2. Cible le conteneur de vue de détail SI il contient un dashboard */
.detail-view-content:has(.xaf-dashboard-container) {
    padding: 0 !important;
}
/* 3. Supprime les espacements du Layout DevExpress SI il contient un dashboard */
.dxbl-fl:has(.xaf-dashboard-container) {
    margin: 0 !important;
/* Met à zéro les variables CSS internes de DevExpress */
    --dxbl-fl-spacing: 0px !important;
    --dxbl-fl-padding: 0px !important;
}
/* 4. Supprime le padding de l'item spécifique qui porte le dashboard */
.dxbl-fl-item:has(.xaf-dashboard-container) {
    padding: 0 !important;
}
/* 5. Supprime la bordure du dashboard lui-même */
.xaf-dashboard-container {
    border: none !important;
}
/* --- FIN DU CORRECTIF --- */
/* ===================================================================================================
   BLAZOR ERROR UI
   =================================================================================================== */
#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 50%;
    height: 100%;
    z-index: 100001;
}
/* ===================================================================================================
   ENUM PROPERTY EDITOR - Width customization (30px)
   =================================================================================================== */
.W30 .dxbl-fl-item-content {
    flex: 0 0 auto !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    margin-left: auto !important;
}

.W30 .dxbl-editor,
.W30 .dxbl-text-edit,
.W30 .dxbl-combobox,
.W30 input {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}
/* ===================================================================================================
   LAYOUT UTILITIES - FillV (Vertical Fill)
   =================================================================================================== */
.dxbl-fl-item.FillV,
.dxbl-fl-item.FillV .dxbl-fl-item-content {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.dxbl-fl-item.FillV .dxbl-fl-item-content > * {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

.dxbl-fl-item.FillV .dxbl-grid,
.dxbl-fl-item.FillV .dxbl-grid > .dxbl-grid-content,
.dxbl-fl-item.FillV .dxbl-grid .dxbl-grid-scroll {
    height: 100% !important;
}

.dxbl-fl-group.FillV,
.dxbl-fl-group.FillV .dxbl-fl-group-content {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* ===================================================================================================
   LAYOUT UTILITIES - Top Alignment
   =================================================================================================== */
.dxbl-fl-group.TopAlignGroup .dxbl-fl-group-content {
    align-items: flex-start !important;
}

.dxbl-fl-item.TopAlignItem {
    align-self: flex-start !important;
}

.dxbl-fl-item.TopAlignItem .dxbl-fl-item-content {
    align-self: flex-start !important;
}
 /* ===================================================================================================
   DARK/LIGHT MODE - Images avec préfixe "bw-" (Black & White)
   =================================================================================================== */
/* Convention: seules les icônes monochromes portent le préfixe 'bw-' */
[data-bs-theme="dark"] img[src*="/bw-"] {
    filter: invert(1) grayscale(1);
}

[data-bs-theme="light"] img[src*="/bw-"] {
    filter: none;
}
 /* ===================================================================================================
   XAF ICONS - CSS Mask (div.xaf-image)
   =================================================================================================== */
.xaf-image {
    display: inline-block;
    width: 1em;
    height: 1em;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.dxbl-text-edit-btn .xaf-image {
    width: 1.1em;
    height: 1.1em;
}
/* ===================================================================================================
   FLEXBOX FIXES - FormLayout & Columns
   =================================================================================================== */
.dxbl-row {
    display: flex;
    flex-wrap: wrap;
}

.dxbl-row > .dxbl-col {
    flex: 0 0 auto;
}
/* Fix: empêcher le débordement des editors dans les colonnes flex */
.dxbl-row > .dxbl-col,
.dxbl-fl-item,
.dxbl-fl-ctrl {
    min-width: 0;
}

.dxbl-fl-ctrl > * {
    max-width: 100%;
}

.dxreRoot {
    max-width: 100%;
}
 /* ===================================================================================================
   TOOLBAR BUTTON - Overflow Fix
   =================================================================================================== */
button.xaf-action.dxbl-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    overflow: hidden;
}

button.xaf-action.dxbl-toolbar-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.xaf-action.dxbl-toolbar-btn > img.xaf-toolbar-item-icon {
    flex: 0 0 auto;
}
/* ===================================================================================================
   ALTERNATE ROW COLORS
   =================================================================================================== */
/* Lignes alternées - cibler les TD pour forcer l'application */
[data-bs-theme="light"] .dxbl-grid-table tbody tr.alt-item > td {
     background-color: #f9f9f9 !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.alt-item > td {
     background-color: #373a3c !important;
}
/* Lignes alternées sélectionnées - couleur légèrement différente */
[data-bs-theme="light"] .dxbl-grid-table tbody tr.alt-item.dxbl-grid-selected-row > td,
[data-bs-theme="light"] .dxbl-grid-table tbody tr.alt-item[aria-selected="true"] > td {
     background-color: rgba(114, 169, 218, 0.85) !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.alt-item.dxbl-grid-selected-row > td,
[data-bs-theme="dark"] .dxbl-grid-table tbody tr.alt-item[aria-selected="true"] > td {
     background-color: rgba(125, 179, 238, 0.75) !important;
}
/* ===================================================================================================
   GRID SELECTION STYLES
   =================================================================================================== */
.dxbl-grid-table tbody tr.dxbl-grid-selected-row:not(.alt-item),
.dxbl-grid-table tbody tr[aria-selected="true"]:not(.alt-item) {
    background-color: rgba(114, 169, 218, 1) !important;
}

.dxbl-grid-table tbody tr.alt-item.dxbl-grid-selected-row,
.dxbl-grid-table tbody tr.alt-item[aria-selected="true"] {
    background-color: rgba(114, 169, 218, 1) !important;
}

.dxbl-grid-table tbody tr.dxbl-grid-selected-row td,
.dxbl-grid-table tbody tr[aria-selected="true"] td {
    color: white !important;
}

.dxbl-grid-table tbody tr.dxbl-grid-selected-row td *,
.dxbl-grid-table tbody tr[aria-selected="true"] td * {
    color: white !important;
}

.dxbl-grid-table tbody tr.dxbl-grid-selected-row td span,
.dxbl-grid-table tbody tr[aria-selected="true"] td span {
    color: white !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.dxbl-grid-selected-row:not(.alt-item),
[data-bs-theme="dark"] .dxbl-grid-table tbody tr[aria-selected="true"]:not(.alt-item) {
    background-color: #72a9da !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.alt-item.dxbl-grid-selected-row,
[data-bs-theme="dark"] .dxbl-grid-table tbody tr.alt-item[aria-selected="true"] {
    background-color: #72a9da !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.dxbl-grid-selected-row td,
[data-bs-theme="dark"] .dxbl-grid-table tbody tr[aria-selected="true"] td {
    color: white !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.dxbl-grid-selected-row td *,
[data-bs-theme="dark"] .dxbl-grid-table tbody tr[aria-selected="true"] td * {
    color: white !important;
}

[data-bs-theme="dark"] .dxbl-grid-table tbody tr.dxbl-grid-selected-row td span,
[data-bs-theme="dark"] .dxbl-grid-table tbody tr[aria-selected="true"] td span {
    color: white !important;
}
 /* ===================================================================================================
   COMPONENT-SPECIFIC STYLES
   =================================================================================================== */
.ComplexitySizeCardStyle .dxbl-text-edit.dxbl-disabled,
.FeasibilityCandidateAdviceCardStyle .dxbl-text-edit.dxbl-disabled {
    text-align: center;
    font-weight: 700;
    font-size: 48px;
}

.ComplexitySizeInQuotationStyle .dxbl-text-edit.dxbl-disabled {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
}

.ComplexitySizeCardStyle .dxbl-text-edit > .dxbl-text-edit-input,
.FeasibilityCandidateAdviceCardStyle .dxbl-text-edit > .dxbl-text-edit-input,
.ComplexitySizeInQuotationStyle .dxbl-text-edit > .dxbl-text-edit-input {
    text-align: center;
}

[data-bs-theme="light"] .decide-card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

[data-bs-theme="dark"] .decide-card-header {
    background-color: #000000;
    border-bottom: 1px solid var(--bs-border-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.decide-card-body {
    padding-top: 0.5rem;
}
/* ===================================================================================================
   MAGIC QUADRANT - Layout Styles
   =================================================================================================== */
[data-tab-content*="MagicQuadrant"] .dxbl-fl,
[data-tab-content*="MagicQuadrant"] .dxbl-fl .dxbl-fl-item,
[data-tab-content*="MagicQuadrant"] .dxbl-fl .dxbl-fl-item-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

[data-tab-content*="MagicQuadrant"] .dxbl-fl .dxbl-fl-item-content > *:not(.mq-container-square) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* Force le layout horizontal à rester stable avec dimensions fixes */
[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 1rem !important;
}

[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] > .dxbl-fl-item {
    min-height: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] > .dxbl-fl-item:first-child {
    flex: 0 0 36% !important;
    width: 36% !important;
    max-width: 36% !important;
    min-width: 36% !important;
}

[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] > .dxbl-fl-item:last-child {
    flex: 0 0 calc(64% - 1rem) !important;
    width: calc(64% - 1rem) !important;
    max-width: calc(64% - 1rem) !important;
    min-width: calc(64% - 1rem) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] > .dxbl-fl-item:last-child .dxbl-fl-item-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
}
/* CRITICAL: Empêcher la grille de se réduire au scroll/resize */
[data-tab-content*="MagicQuadrant"] .dxbl-grid,
[data-tab-content*="MagicQuadrant"] .dxbl-grid-container {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
}
/* Force override des styles inline appliqués par JS */
[data-tab-content*="MagicQuadrant"] .dxbl-grid[style*="max-height"] {
    max-height: none !important;
}

[data-tab-content*="MagicQuadrant"] .dxbl-grid[style*="height"] {
    height: 100% !important;
}
/* Forcer le conteneur de la grille à occuper tout l'espace vertical */
[data-tab-content*="MagicQuadrant"] .dxbl-fl-item:first-child .dxbl-fl-item-content {
    height: 100% !important;
}
/* Empêcher le layout item contenant le MQ de changer de taille pendant les transitions */
[data-tab-content*="MagicQuadrant"] .layout-group[data-direction="Horizontal"] > .dxbl-fl-item:last-child[data-resizing] {
    pointer-events: none !important;
    transition: none !important;
}
/* ===================================================================================================
   MAGIC QUADRANT - Square Container (Responsive)
   =================================================================================================== */
.mq-container-square {
    /* Occuper tout l'espace disponible */
    width: 100%;
    height: 100%;
    /* Centrage du chart */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* Padding pour aération - padding-top de 2.44rem (≈39px) pour alignement avec la grille */
    padding: 2.44rem 1rem 1rem 1rem;
    box-sizing: border-box;
}
/* Classe appliquée directement au DxChart via CssClass */
.mq-chart-square {
    /* Ratio carré 1:1 - NON NÉGOCIABLE */
    aspect-ratio: 1 / 1 !important;
    /* Tenter de prendre toute la largeur disponible */
    width: 100% !important;
    height: auto !important;
    /* MAIS ne jamais dépasser les limites du conteneur */
        max-width: 100% !important;
        max-height: 100% !important;
        /* Centrer le carré dans l'espace disponible */
        margin: auto !important;
    }
        /* Appliquer aussi au conteneur SVG généré par DevExtreme */
    .mq-chart-square > svg,
    .mq-chart-square .dxc-chart {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
    }
    /* ===================================================================================================
       LISTVIEWS - Blazor DxGrid - Customization des icônes de filtre pour les cacher si besoin 
       et cache complètement les icones de tri 
       =================================================================================================== */
    th.dxbl-grid-header span.dxbl-grid-sort-asc,
    th.dxbl-grid-header span.dxbl-grid-sort-desc,
    th.dxbl-grid-header span[class*="dxbl-grid-sort-"] {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }
    /* ===================================================================================================
       DESCRIPTION GROUP - RichEdit Styles
       =================================================================================================== */
    .description-group {
        height: 250px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .dxreRoot.xaf-richedit.xaf-richedit-tall {
        height: 250px !important;
        max-height: 250px;
    }

    .dxreRoot.xaf-richedit.xaf-richedit-tall .dxre-container,
    .dxreRoot.xaf-richedit.xaf-richedit-tall .dxre-content {
        height: 100%;
        max-height: 100%;
        overflow: auto;
    }

    .decide-richtext {
        width: 100%;
        height: 250px;
    }
    /* ===================================================================================================
       ✅ RIBBON BUTTON STYLES (FINAL V25.2 - ALIGNEMENT HAUTEUR STRICT)
       =================================================================================================== */
    /* 1. TAILLE DES ICONES (24px) */
    .main-ribbon .dxbl-ribbon-item .dxbl-image.image {
        width: 24px !important;
        height: 24px !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain;
        flex-shrink: 0;
        margin: 0 !important;
    }
    /* 2. EXCEPTION RICHTEXTEDIT (Petit, horizontal) */
    .decide-richtext .dxbl-ribbon-item .dxbl-image.image,
    .xaf-richedit .dxbl-ribbon-item .dxbl-image.image,
    .dxbl-rich-edit .dxbl-ribbon-item .dxbl-image.image {
        width: 16px !important;
        height: 16px !important;
    }
    /* 3. FLÈCHE (Taille réduite) */
    .main-ribbon .dxbl-ribbon-item .dxbl-toolbar-dropdown-toggle {
        width: 10px !important;
        height: 10px !important;
        min-width: auto !important;
        margin: 0 !important;
    }
    /* =======================================================================
       4. STRUCTURE & ALIGNEMENT VERTICAL (LE CŒUR DU PROBLÈME)
       ======================================================================= */
    /* A. RÈGLE COMMUNE (Bouton Simple + Conteneur Split) 
       On force tous les items du ruban à s'étirer sur toute la hauteur de la ligne.
       Cela corrige le décalage "flottant" vers le haut.
    */
    .main-ribbon .dxbl-ribbon-item.dxbl-btn,
    .main-ribbon .dxbl-ribbon-item.dxbl-btn-split {
        height: 100% !important; /* Prend toute la hauteur du ruban */
        min-height: 58px !important; /* Hauteur minimale garantie */
        margin-top: 0 !important; /* Supprime les décalages externes */
        margin-bottom: 0 !important;
        vertical-align: middle !important;
        align-self: stretch !important; /* Instruction Flexbox pour remplir la hauteur */
        border-radius: 0 !important; /* Optionnel : évite les coins ronds inégaux */
    }
    /* B. BOUTONS SIMPLES (Contenu interne)
       On centre le contenu (Icone + Texte) verticalement DANS l'espace de 100%
    */
    .main-ribbon .dxbl-ribbon-item.dxbl-btn:not(.xaf-richedit .dxbl-btn):not(.dxbl-rich-edit .dxbl-btn) {
        display: inline-flex !important;
        flex-direction: column !important; /* Vertical : Image haut, Texte bas */
        justify-content: center !important; /* Centre le tout verticalement */
        align-items: center !important; /* Centre horizontalement */

        padding: 0 8px !important; /* Padding latéral uniquement */
        gap: 4px !important;
    }
    /* C. BOUTONS SPLIT (Conteneur interne) */
    .main-ribbon .dxbl-ribbon-item.dxbl-btn-split {
        display: inline-flex !important;
        align-items: stretch !important; /* Étire les sous-boutons */
        padding: 0 !important; /* Le conteneur ne doit pas avoir de padding */
        gap: 0 !important; /* Pas d'espace entre la partie gauche et la flèche */
    }
    /* D. PARTIE GAUCHE DU SPLIT (Icone + Texte) */
    .main-ribbon .dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown) {
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 8px !important;
        flex-grow: 1 !important; /* Prend tout l'espace sauf la flèche */
        border: none !important; /* Évite les doubles bordures */
    }
    /* E. PARTIE DROITE DU SPLIT (Flèche) */
    .main-ribbon .dxbl-btn-split > .dxbl-btn-split-dropdown {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        width: auto !important;
        border-left: 1px solid rgba(128, 128, 128, 0.2) !important; /* Séparateur subtil */
    }
    /* =======================================================================
       5. CORRECTIF TEXTE
       ======================================================================= */
    .main-ribbon .dxbl-ribbon-item span {
        margin-left: 0 !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    /* ===================================================================================================
       DEVEXPRESS SPLIT DROPDOWN BUTTONS - Reduced Size
       =================================================================================================== */
    /* Réduire la taille des boutons dropdown split */
    .main-ribbon .dxbl-btn-split-dropdown {
        padding: 0.25rem 0.375rem !important;
        min-width: auto !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-ribbon .dxbl-btn-split-dropdown .dxbl-image {
        width: 0.875em !important;
        height: 0.875em !important;
        margin: auto !important;
    }
    /* Optionnel : ajuster aussi le bouton principal du split si nécessaire */
    .main-ribbon .dxbl-btn-split > .dxbl-btn:not(.dxbl-btn-split-dropdown) {
        padding: 0.375rem 0.5rem !important;
    }
    /* Assurer l'alignement vertical pour les boutons ribbon avec split dropdown */
    .main-ribbon .dxbl-btn-split.dxbl-ribbon-item {
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Centrer le contenu des boutons standalone dans les splits */
    .main-ribbon .dxbl-btn-split .dxbl-btn-standalone {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Centrer les icônes SVG dans tous les boutons split */
    .main-ribbon .dxbl-btn-split .dxbl-btn-standalone svg.dxbl-image {
        margin: 0 auto !important;
        display: block !important;
    }
    /* Assurer que les color picker et autres éléments sont centrés */
    .main-ribbon .dxbl-ribbon-color-picker-image-source {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    /* Centrer le bouton premier (first) et dernier (last) dans le split */
    .main-ribbon .dxbl-btn-split .dxbl-btn-first,
    .main-ribbon .dxbl-btn-split .dxbl-btn-last {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* ===================================================================================================
       ⚠️ CRITICAL SECTION - Custom CSS Classes (Must remain at the end)
       =================================================================================================== */
    /* Navigation accordion - Remove border around group container */
    .dxbl-accordion-items-container {
        border: none !important;
    }
    /* Supprimer la bordure des groupes d'accordéon */
    .dxbl-accordion-item {
        --dxbl-group-border-color: transparent !important;
        border: none !important;
        outline: none !important;
    }
    /* Optionnel : garder l'accessibilité au focus */
    .dxbl-accordion-item-content:focus-visible {
        outline: 2px solid var(--bs-primary, #72a9da) !important;
        outline-offset: -2px !important;
    }

    .date-minsize {
        min-width: 220px !important;
    }

    .OpportunitySteps_Grp {
        min-width: 600px !important;
    }

    .OpportunityDetails_Grp {
        min-width: 800px !important;
        max-width: 800px !important;
    }

    .UserDecideDetails {
        min-width: 800px !important;
        max-width: 800px !important;
    }

    .dxbl-fl-item.stack-min-800x500 {
        min-width: 800px !important;
        min-height: 500px !important;
        flex: 0 1 auto !important;
        inline-size: auto !important;
    }

    .dxbl-fl-item.stack-min-800x500 > .dxbl-fl-item-content {
        min-width: 800px !important;
        min-height: 500px !important;
    }

    .h-250 {
        width: 100% !important;
        height: 250px !important;
    }

.icon-ai { background-image: url('../images/ai.svg'); width: 16px; height: 16px; background-size: cover; display: inline-block; }
.icon-fullscreen { background-image: url('../images/fullscreen.svg'); width: 16px; height: 16px; background-size: cover; display: inline-block; }

/* Masquer le petit crayon injecté par la grille DevExpress en mode édition de cellule */
.dxbl-grid-cell svg[class*="dxbl-icon-edit"] {
    display: none !important;
}
/* --- Masquer le crayon bleu de cellule modifiée dans la grille DevExpress --- */
.dxbl-grid-modified-indicator,
.dxbl-grid-cell-modified::before,
.dxbl-grid-cell-modified::after,
.dxbl-grid-cell svg[class*="edit"],
.dxbl-grid-cell svg[class*="modified"] {
    display: none !important;
}