/* ════════════════════════════════════════════════════════════════
   EDUCATED — Thème global du DashboardControl DevExpress
   Habille les items natifs (Chart, Grid, Pie, Caption...) avec
   les tokens V6 (couleurs, police Geist, radius, bordures).
   
   ⚠️  Ce fichier vise les classes DevExpress GLOBALEMENT.
       Ne pas confondre avec educated-custom-items.css qui est
       préfixé .educated-cue-host / .educated-welcome-host.
   ════════════════════════════════════════════════════════════════ */


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

.dx-dashboard {
/*    --brand: #5351FB;
    --brand-2: #342484;
    --brand-soft: #EFEEFF;
    --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;
    --line-3: #CDD0D8;*/
}


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  2. POLICE GLOBALE                                            ║
   ╚══════════════════════════════════════════════════════════════╝ */

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


/* ╔══════════════════════════════════════════════════════════════╗
   ║  3. CONTENEUR D'ITEM                                          ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dx-dashboard-item {
    background: var(--surface-1) !important;
    border: 1px solid var(--line) !important;
    /*border-radius: 12px !important;*/
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(15,17,21,0.02);
    transition: box-shadow 120ms;
}

    .dx-dashboard-item:hover {
        box-shadow: 0 6px 16px -10px rgba(15,17,21,0.10), 0 1px 0 rgba(15,17,21,0.04);
    }

    /* Coins arrondis : le contenu interne ne déborde pas du radius */
    .dx-dashboard-item .dx-dashboard-item-content {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        overflow: hidden;
    }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  4. EN-TÊTE D'ITEM (Caption Toolbar)                          ║
   ║     DOM : .dx-dashboard-caption-toolbar                       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* La toolbar complète de l'en-tête */
.dx-dashboard-caption-toolbar {
    background: var(--surface-1) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 6px 12px !important;
    min-height: 40px !important;
}

    /* Le titre (ex. "Chart 1", "Pies 1", "Grid 1") */
    .dx-dashboard-caption-toolbar .dx-dashboard-ellipsis {
        font-family: "Geist", "Public Sans", system-ui, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--ink-0) !important;
        letter-spacing: -.005em !important;
    }


    /* ╔══════════════════════════════════════════════════════════════╗
   ║  5. BOUTONS D'ACTION (Export, Maximize)                       ║
   ║     DOM : .dx-dashboard-export, .dx-dashboard-maximize-item   ║
   ╚══════════════════════════════════════════════════════════════╝ */

    .dx-dashboard-caption-toolbar .dx-button.dx-dashboard-export,
    .dx-dashboard-caption-toolbar .dx-button.dx-dashboard-maximize-item,
    .dx-dashboard-caption-toolbar .dx-button {
        background: transparent !important;
        border: 0 !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        color: var(--ink-3) !important;
        min-width: 28px !important;
        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;
    }

        .dx-dashboard-caption-toolbar .dx-button:hover {
            background: var(--surface-2) !important;
            color: var(--ink-0) !important;
        }

        .dx-dashboard-caption-toolbar .dx-button.dx-state-active,
        .dx-dashboard-caption-toolbar .dx-button.dx-state-focused {
            background: var(--surface-3) !important;
            box-shadow: none !important;
        }

        /* Contenu interne du bouton — centrer le SVG */
        .dx-dashboard-caption-toolbar .dx-button .dx-button-content {
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* SVG des icônes — héritent de la couleur via currentColor */
        .dx-dashboard-caption-toolbar .dx-button .dx-dashboard-current-color-icon {
            fill: currentColor !important;
        }

        .dx-dashboard-caption-toolbar .dx-button svg {
            width: 14px !important;
            height: 14px !important;
        }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  6. GRID NATIVE (dxDataGrid intégré au dashboard)             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* En-têtes de colonnes */
.dx-dashboard-item .dx-datagrid-headers,
.dx-dashboard-item .dx-datagrid .dx-header-row > td {
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line) !important;
}

.dx-dashboard-item .dx-datagrid .dx-header-row > td {
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3) !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
}

/* Cellules */
.dx-dashboard-item .dx-datagrid .dx-data-row > td {
    font-size: 12px !important;
    color: var(--ink-1) !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--line) !important;
}

    /* Cellules numériques (alignées à droite) */
    .dx-dashboard-item .dx-datagrid .dx-data-row > td[style*="text-align: right"],
    .dx-dashboard-item .dx-datagrid .dx-data-row > td[style*="text-align:right"] {
        font-variant-numeric: tabular-nums;
        font-weight: 500 !important;
        color: var(--ink-0) !important;
    }

/* Hover de ligne */
.dx-dashboard-item .dx-datagrid .dx-data-row:hover > td {
    background: var(--brand-soft) !important;
}

/* Désactivation des zébrures (rendu plus net) */
.dx-dashboard-item .dx-datagrid .dx-row-alt > td {
    background: var(--surface-1) !important;
}

/* Pied de grille (totaux) */
.dx-dashboard-item .dx-datagrid-total-footer {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line) !important;
    font-size: 11.5px !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  7. PAGER & SCROLLBARS                                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.dx-dashboard-item .dx-pager {
    background: var(--surface-2) !important;
    border-top: 1px solid var(--line) !important;
    font-size: 11.5px !important;
}

.dx-dashboard-item .dx-scrollbar-vertical .dx-scrollable-scroll-content,
.dx-dashboard-item .dx-scrollbar-horizontal .dx-scrollable-scroll-content {
    background: var(--line-2) !important;
    border-radius: 3px !important;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  8. CHARTS / PIES                                             ║
   ║     ⚠️ Note : le SVG Patcher (dashboard-events-scripts.js)    ║
   ║        modifie aussi les charts après rendu. Pour les charts, ║
   ║        c'est lui qui pilote — ce CSS ne fait qu'un fallback.  ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Titre de chart intégré (au-dessus du tracé) */
.dx-dashboard-item .dxc-title text {
    fill: var(--ink-0) !important;
    font-weight: 600 !important;
}

/* Tooltip de chart */
.dx-dashboard-item .dxc-tooltip {
    filter: drop-shadow(0 6px 14px rgba(15,17,21,.15));
}
.dx-dashboard-viewer {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    /* padding: 10px !important; */
    background-color: var(--dxds-color-surface-neutral-subdued-rest) !important;
}
/* Réduire le padding du wrapper de layout du dashboard */
[data-bind*="scrollView.contentWrapperStyles"] {
    padding: 8px 4px 8px 8px !important;
}
/* ─── FOND DE LA ZONE DASHBOARD ─── */
/* La surface autour des items dashboard prend la teinte des onglets MDI */
.dx-dashboard,
.dx-dashboard-content,
.dx-dashboard-surface,
.dx-dashboard-viewer {
    background: #F9FAFC !important; /* --surface-2 */
}

/* Le wrapper du layout (celui avec le padding qu'on a déjà réduit) */
[data-bind*="scrollView.contentWrapperStyles"] {
    background: #F9FAFC !important;
}
/* ════════════════════════════════════════════════════════════════
   FOND DASHBOARD — gris #F9FAFC sur TOUTES les couches
   ════════════════════════════════════════════════════════════════ */

/* La zone "main" qui englobe tabs MDI + dashboard */
div[role="main"].w-100.overflow-auto {
    background: #F9FAFC !important;
}

/* Les conteneurs XAF intermédiaires */
.main,
.main-content,
.detail-view-content {
    background: #F9FAFC !important;
}

/* Le wrapper XAF du dashboard — retire aussi la bordure parasite ".border" */
.xaf-dashboard-container,
.xaf-dashboard-container.border {
    background: #F9FAFC !important;
    border: 0 !important;
}

/* Le DashboardControl DevExpress + toutes ses couches internes */

    /* Le scrollable interne */
  /*  .dx-dashboard-layout-container .dx-scrollable-wrapper,
    .dx-dashboard-layout-container .dx-scrollable-container,
    .dx-dashboard-layout-container .dx-scrollable-content,
    .dx-dashboard-layout-container .dx-scrollview-content {
        background: #F9FAFC !important;
    }*/

/* Le wrapper de contenu avec padding inline */
[data-bind*="scrollView.contentWrapperStyles"] {
    background: #F9FAFC !important;
}

/* Le panel des onglets MDI */
.dxbl-tabs-content-panel,
.dxbl-tabs-content {
    background: #F9FAFC !important;
}

/* Les conteneurs dxbl form-layout */
dxbl-form-layout.dxbl-fl,
.dxbl-fl .dxbl-row,
.dxbl-fl-group,
.dxbl-fl-item,
.dxbl-fl-ctrl,
.dxbl-fl-ctrl-nc {
    background: transparent !important;
}