/* ════════════════════════════════════════════════════════════════
   EDUCATED — Grilles XAF universelles (DataGrid DevExpress Blazor)
   Fichier : Educated.Blazor.Server/wwwroot/css/educated-grid.css
   
   S'applique à TOUTES les grilles de l'app (ListView XAF, embedded grids).
   Composant racine : <dxbl-grid>
   
   Stratégie de typo :
   - Geist partout par défaut
   - JetBrains Mono UNIQUEMENT sur cellules numériques (dxbl-align-right)
   ════════════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  TOKENS                                                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

dxbl-grid,
.dxbl-grid {
    /*    --brand: #5351FB;
    --brand-2: #342484;
    --brand-soft: #EFEEFF;
    --danger: #E11D48;
    --danger-soft: #FCDCE5;
    --surface-1: #FFFFFF;
    --surface-2: #F9FAFC;
    --surface-3: #F1F3F7;
    --ink-0: #0F1115;
    --ink-1: #1F2330;
    --ink-2: #4B5160;
    --ink-3: #858B99;
    --ink-4: #B5BBC7;
    --line: #ECEDF1;
    --line-2: #E3E5EA;*/
    --row-h: 44px;
}


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  POLICE — Geist forcée partout dans la grille                 ║
   ║  (bat la spécificité interne de DevExpress)                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

    dxbl-grid,
    dxbl-grid *,
    .dxbl-grid,
    .dxbl-grid * {
        font-family: "Geist", "Public Sans", system-ui, -apple-system, sans-serif !important;
    }

/* Exception : cellules numériques en JetBrains Mono + tabular-nums.
   XAF aligne automatiquement les colonnes numériques à droite
   (decimal, int, money, percent...) → sélecteur fiable. */
.dxbl-grid-table tbody td.dxbl-align-right,
.dxbl-grid-table tbody td.dxbl-align-right * {
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace !important;
    font-variant-numeric: tabular-nums !important;
    font-feature-settings: "tnum" !important;
    font-size: 12.5px !important;
    color: var(--ink-1) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CONTENEUR                                                    ║
   ╚══════════════════════════════════════════════════════════════╝ */

dxbl-grid,
.dxbl-grid {
    background: var(--surface-1) !important;
    border: 1px solid var(--line) !important;
    /*border-radius: 10px !important;*/
    overflow: hidden;
}

    /* Toolbar de la grille (en haut, souvent vide en XAF) */
    .dxbl-grid .dxbl-grid-toolbar-container {
        border-bottom: 1px solid var(--line);
        background: var(--surface-1);
        padding: 0 8px;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  TABLE                                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--surface-1) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  EN-TÊTES DE COLONNES                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-header-row {
    background: var(--surface-2) !important;
}

.dxbl-grid-header,
th.dxbl-grid-header {
    background: var(--surface-2) !important;
    color: var(--ink-2) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--line) !important;
    border-right: 1px solid transparent !important;
    vertical-align: middle !important;
    height: 36px !important;
}

    /* Texte du titre de colonne */
    .dxbl-grid-header .grid-column-header-container span[role="presentation"],
    .dxbl-grid-header span[role="presentation"] {
        color: var(--ink-2) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    /* Container du header : icône engrenage + libellé */
    .dxbl-grid-header .grid-column-header-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* L'icône engrenage ⚙ — discrète */
    .dxbl-grid-header .icon-column-header,
    .dxbl-grid-header .icon-column-gear {
        opacity: 0.4 !important;
        transition: opacity 120ms !important;
    }

    .dxbl-grid-header:hover .icon-column-header,
    .dxbl-grid-header:hover .icon-column-gear {
        opacity: 0.8 !important;
    }

/* L'entonnoir de filtre 🔽 — discret */
.dxbl-grid-filter-menu-funnel-btn {
    opacity: 0.3 !important;
    transition: opacity 120ms !important;
    width: 18px !important;
    height: 18px !important;
}

.dxbl-grid-header:hover .dxbl-grid-filter-menu-funnel-btn {
    opacity: 0.7 !important;
}

.dxbl-grid-filter-menu-funnel-btn:hover {
    opacity: 1 !important;
}

/* Flèche de tri ↑ ↓ — en couleur brand quand actif */
.dxbl-grid-sort-asc,
.dxbl-grid-sort-desc {
    color: var(--brand) !important;
    margin-left: 4px !important;
}

    .dxbl-grid-sort-asc svg,
    .dxbl-grid-sort-desc svg {
        width: 11px !important;
        height: 11px !important;
    }

/* En-tête de la colonne de sélection */
.dxbl-grid-selection-cell.dxbl-grid-header {
    background: var(--surface-2) !important;
    padding: 0 !important;
    text-align: center !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  LIGNE DE FILTRES INLINE                                      ║
   ║  (la 2ème ligne avec ○ ___ ⌃⌄)                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-filter-row {
    height: 36px !important;
    background: var(--surface-1) !important;
}

    .dxbl-grid-filter-row > td {
        padding: 4px 6px !important;
        height: 36px !important;
        border-top: 0 !important;
        border-bottom: 1px solid var(--line) !important;
        background: var(--surface-1) !important;
    }

    /* Wrappers d'éditeurs DevExpress dans la ligne de filtre */
    .dxbl-grid-filter-row .dxbl-text-edit,
    .dxbl-grid-filter-row .dxbl-spinedit,
    .dxbl-grid-filter-row .dxbl-combo-box,
    .dxbl-grid-filter-row dxbl-input-editor,
    .dxbl-grid-filter-row dxbl-spinedit,
    .dxbl-grid-filter-row dxbl-combo-box {
        height: 28px !important;
        min-height: 28px !important;
        font-size: 12px !important;
    }

    /* Les <input> eux-mêmes */
    .dxbl-grid-filter-row input.dxbl-text-edit-input {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        border-radius: 6px !important;
        color: var(--ink-1) !important;
    }

        .dxbl-grid-filter-row input.dxbl-text-edit-input::placeholder {
            color: var(--ink-3) !important;
        }

    /* Conteneur du filtre type (○) à compacter */
    .dxbl-grid-filter-row .filter-type-container {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* Le petit bouton du type de filtre (○) */
    .dxbl-grid-filter-row .filter-type-button {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        padding: 0 !important;
        opacity: 0.4 !important;
    }

        .dxbl-grid-filter-row .filter-type-button:hover {
            opacity: 1 !important;
        }

    /* Chevrons des spinedit et combobox */
    .dxbl-grid-filter-row .dxbl-edit-btn-dropdown {
        height: 26px !important;
        min-height: 26px !important;
        width: 20px !important;
    }

    .dxbl-grid-filter-row .dxbl-spin-btns button {
        height: 13px !important;
        min-height: 13px !important;
        width: 18px !important;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  LIGNES DE DONNÉES                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Ligne entière */
.dxbl-grid-table tbody tr[data-visible-index] {
    background: var(--surface-1) !important;
    transition: background 80ms !important;
    height: var(--row-h) !important;
}

    /* Hover */
    .dxbl-grid-table tbody tr[data-visible-index]:hover {
        background: var(--surface-2) !important;
    }

    /* Ligne sélectionnée */
    .dxbl-grid-table tbody tr[data-visible-index][aria-selected="true"] {
        background: var(--brand-soft) !important;
    }

        .dxbl-grid-table tbody tr[data-visible-index][aria-selected="true"]:hover {
            background: color-mix(in srgb, var(--brand-soft) 85%, var(--brand) 5%) !important;
        }

/* Cellule de données */
.dxbl-grid-table tbody td[role="gridcell"],
.dxbl-grid-table tbody td.xaf-action {
    padding: 0 12px !important;
    color: var(--ink-1) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid var(--line) !important;
    vertical-align: middle !important;
    height: var(--row-h) !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

/* Forcer la hauteur du <tr> ET de tous les <td> pour empêcher qu'un
   éditeur inline (combobox, etc.) ne fasse grossir la ligne */
.dxbl-grid-table tbody tr[data-visible-index] > td {
    height: var(--row-h) !important;
    line-height: 1.4 !important;
}

/* Liens de navigation dans les cellules */
.dxbl-grid-table tbody td a.grid-cell-object-link {
    color: var(--brand) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

    .dxbl-grid-table tbody td a.grid-cell-object-link:hover {
        color: var(--brand-2) !important;
        text-decoration: underline !important;
    }

/* Cellules alignées à droite (nombres) — alignement, le mono est géré
   par la règle de typo en haut du fichier */
.dxbl-grid-table tbody td.dxbl-align-right {
    text-align: right !important;
}

/* Valeurs négatives stylées en rouge — XAF pose color:red inline,
   on le respecte mais avec notre rouge cohérent */
.dxbl-grid-table tbody td button[style*="color:red"],
.dxbl-grid-table tbody td button[style*="color: red"] {
    color: var(--danger) !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 500 !important;
}

/* Cellules avec combobox (Type fournisseur : "Personne Morale") */
.dxbl-grid-table tbody td .xaf-combobox-item {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 0 !important;
}

.dxbl-grid-table tbody td .xaf-wrap-ellipsis {
    font-size: 13px !important;
    color: var(--ink-1) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CASES À COCHER (sélection)                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Cellule de sélection (colonne tout à gauche) */
.dxbl-grid-selection-cell {
    text-align: center !important;
    padding: 0 !important;
    width: 44px !important;
}

    /* Case à cocher — carrée arrondie style v6 (au lieu de ronde) */
    .dxbl-grid-selection-cell .dxbl-checkbox,
    .dxbl-grid-selection-cell .dxbl-checkbox-check-element {
        border-radius: 4px !important;
    }

/* Case à cocher d'affichage (lecture seule, colonne booléenne) */
.dxbl-grid-table .dxbl-checkbox-display-view-unchecked,
.dxbl-grid-table .dxbl-checkbox-display-view-checked {
    border-radius: 4px !important;
    border-color: var(--line-2) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  COLONNES FIXES (sticky)                                      ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-fixed-cell {
    background: inherit !important;
    z-index: 1;
}

.dxbl-grid-last-fixed-left-cell {
    border-right: 1px solid var(--line) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  CELLULE VIDE (combler l'espace en fin de ligne)              ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-empty-cell {
    background: var(--surface-1) !important;
    border-bottom: 1px solid var(--line) !important;
}

.dxbl-grid-header.dxbl-grid-empty-cell {
    background: var(--surface-2) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  SCROLLBARS DEVEXPRESS                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-scroll-viewer-vert-scroll-bar,
.dxbl-scroll-viewer-hor-scroll-bar {
    background: transparent !important;
}

.dxbl-scroll-viewer-scroll-thumb {
    background: var(--line-2) !important;
    border-radius: 4px !important;
}

    .dxbl-scroll-viewer-scroll-thumb:hover {
        background: var(--ink-4) !important;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  PAGER (en bas de la grille)                                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid .dxbl-pager,
.dxbl-grid-pager {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: var(--ink-2) !important;
}

    .dxbl-grid .dxbl-pager .dxbl-pager-page {
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        color: var(--ink-2) !important;
        padding: 4px 8px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        min-width: 28px !important;
        transition: 120ms !important;
    }

        .dxbl-grid .dxbl-pager .dxbl-pager-page:hover {
            background: var(--surface-1) !important;
            border-color: var(--line) !important;
            color: var(--ink-0) !important;
        }

        .dxbl-grid .dxbl-pager .dxbl-pager-page.dxbl-active {
            background: var(--brand) !important;
            border-color: var(--brand) !important;
            color: #FFFFFF !important;
            font-weight: 600 !important;
        }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  GROUPE D'EN-TÊTES (quand on regroupe par colonne)            ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-group-row {
    background: var(--surface-3) !important;
    font-weight: 600 !important;
    color: var(--ink-0) !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  LIGNE VIDE (quand il n'y a pas de données)                  ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dxbl-grid-empty-row td {
    padding: 24px !important;
    text-align: center !important;
    color: var(--ink-3) !important;
    font-size: 13px !important;
    background: var(--surface-1) !important;
}
/* ════════════════════════════════════════════════════════════════
   SUPPRESSION TOTALE DES BORDURES VERTICALES — patch radical
   Couvre toutes les sources possibles : border, outline, box-shadow.
   ════════════════════════════════════════════════════════════════ */

/* Toutes les cellules, sans exception, en TOUS contextes */
.dxbl-grid .dxbl-grid-table td,
.dxbl-grid .dxbl-grid-table th,
dxbl-grid .dxbl-grid-table td,
dxbl-grid .dxbl-grid-table th,
.dxbl-grid-table td,
.dxbl-grid-table th {
    border-right: 0 !important;
    border-left: 0 !important;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
    border-right-style: none !important;
    border-left-style: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Garder UNIQUEMENT le séparateur entre zone sticky et zone scrollable */
.dxbl-grid-last-fixed-left-cell {
    border-right: 1px solid var(--line) !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
}

/* Réaffirmer les border-bottom (séparateurs horizontaux) qui auraient pu
   être annulés par box-shadow:none */
.dxbl-grid-table tbody tr[data-visible-index] > td {
    border-bottom: 1px solid var(--line) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

.dxbl-grid-header,
th.dxbl-grid-header {
    border-bottom: 1px solid var(--line) !important;
}

.dxbl-grid-filter-row > td {
    border-bottom: 1px solid var(--line) !important;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  FILTER PANEL (barre en bas de grille)                        ║
   ║  DOM : .dxbl-grid-filter-panel                                ║
   ║    ├── dxbl-check (checkbox activer/désactiver)               ║
   ║    ├── button.dxbl-grid-filter-panel-filter (expression)      ║
   ║    └── button.dxbl-grid-filter-panel-clear-button (clear ×)   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── Conteneur parent XAF — forcer alignement gauche ────────── */
.dxbl-grid-filter-panel-container,
.dxbl-grid > div:has(.dxbl-grid-filter-panel),
tr:has(.dxbl-grid-filter-panel),
td:has(.dxbl-grid-filter-panel) {
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* le parent prend toute la largeur */
    padding-left: 8px !important;
}

/* ── Conteneur pill ─────────────────────────────────────────── */
.dxbl-grid-filter-panel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    height: 28px !important;
    padding: 0 5px 0 4px !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-family: "Geist", system-ui, sans-serif !important;
    font-size: 12px !important;
    margin: 5px 0 !important;
    align-self: flex-start !important;
    width: auto !important; /* pill = taille du contenu uniquement */
    max-width: calc(100% - 16px) !important;
}

    /* ── Checkbox enable/disable ────────────────────────────────── */
    .dxbl-grid-filter-panel dxbl-check.dxbl-checkbox {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .dxbl-grid-filter-panel dxbl-check .dxbl-checkbox-check-element {
        width: 15px !important;
        height: 15px !important;
        border-radius: 4px !important;
        border: 1.5px solid var(--line-2) !important;
        background: var(--surface-1) !important;
        transition: border-color 120ms, background 120ms !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .dxbl-grid-filter-panel dxbl-check.dxbl-checkbox-checked .dxbl-checkbox-check-element,
    .dxbl-grid-filter-panel dxbl-check[check-state="1"] .dxbl-checkbox-check-element {
        background: var(--brand) !important;
        border-color: var(--brand) !important;
    }

    .dxbl-grid-filter-panel dxbl-check .dxbl-checkbox-check-element svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* ── Séparateur visuel après la checkbox ────────────────────── */
    .dxbl-grid-filter-panel dxbl-check::after {
        content: "" !important;
        display: inline-block !important;
        width: 1px !important;
        height: 13px !important;
        background: var(--line) !important;
        margin: 0 4px !important;
        flex-shrink: 0 !important;
    }

    /* ── Bouton expression (texte du filtre) ────────────────────── */
    .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 fit-content !important; /* ne rétrécit pas, prend la taille du texte */
        width: fit-content !important;
        min-width: 0 !important;
        max-width: 500px !important;
        padding: 2px 6px !important;
        border: none !important;
        border-radius: 5px !important;
        background: transparent !important;
        color: var(--brand) !important;
        font-family: "Geist", system-ui, sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: background 120ms !important;
        box-shadow: none !important;
        text-align: left !important;
        overflow: visible !important;
    }

        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter:hover {
            background: var(--brand-soft) !important;
        }

        /* Caption — white-space nowrap force la largeur intrinsèque */
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-filter .dxbl-btn-caption {
            display: block !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            text-align: left !important;
            max-width: 480px !important;
            width: auto !important;
        }

    /* ── Bouton clear — icône DX masquée, × injecté via ::before ── */
    .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 4px !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: background 120ms !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
        position: relative !important;
        overflow: hidden !important; /* coupe l'icône DX qui déborde */
        color: transparent !important;
        font-size: 0 !important;
    }

        /* Icône SVG native DX — couverture totale */
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button .dxbl-image,
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button svg,
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button svg use,
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button use {
            width: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
            position: absolute !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }

        /* × injecté par-dessus */
        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button::before {
            content: "×" !important;
            position: absolute !important;
            inset: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 15px !important;
            line-height: 1 !important;
            color: var(--ink-3) !important;
            font-family: system-ui, sans-serif !important;
            font-weight: 300 !important;
            transition: color 120ms !important;
        }

        .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button:hover {
            background: rgba(220, 38, 38, 0.09) !important;
        }

            .dxbl-grid-filter-panel .dxbl-grid-filter-panel-clear-button:hover::before {
                color: var(--danger) !important;
            }

    /* ── État désactivé (filtre off) ────────────────────────────── */
    .dxbl-grid-filter-panel:has(dxbl-check[check-state="0"]) .dxbl-grid-filter-panel-filter {
        color: var(--ink-3) !important;
        opacity: 0.55 !important;
        pointer-events: none !important;
    }

/* ════════════════════════════════════════════════════════════════
   FIN educated-grid.css
   ════════════════════════════════════════════════════════════════ */