/* ════════════════════════════════════════════════════════════════
   ACURBUSINESS — TOPBAR (header)
   Fichier : wwwroot/css/educated-topbar.css — v14
   Fix     : grid-column explicite sur chaque enfant de header-right-side
             caption → col 1 (suite), search → col 2, droite → col 3
   ════════════════════════════════════════════════════════════════ */


/* ── RESET SÉLECTIF ──────────────────────────────────────────── */

.header.navbar-dark,
.header {
    all: unset !important;
    box-sizing: border-box !important;
}

    .header *,
    .header *::before,
    .header *::after {
        box-sizing: border-box !important;
        font-family: "Geist", "Public Sans", system-ui, -apple-system, sans-serif !important;
    }


    /* ══════════════════════════════════════════════════════════════
   TOPBAR — grille 3 colonnes
   ┌─────────────────┬──────────────────────┬─────────────────┐
   │ logo + caption  │   barre de recherche  │   droite        │
   └─────────────────┴──────────────────────┴─────────────────┘
   ══════════════════════════════════════════════════════════════ */

    .header.navbar-dark,
    .header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 520px) minmax(0, 1fr) !important;
        grid-template-rows: 52px !important;
        align-items: center !important;
        /*gap: 16px !important;*/
        padding: 0 16px !important;
        height: 52px !important;
        min-height: 52px !important;
        background: var(--surface-1, #fff) !important;
        border-bottom: 1px solid var(--line, #ECEDF1) !important;
        box-shadow: none !important;
        position: relative !important;
        z-index: 6 !important;
    }

/* ── display:contents → les enfants de header-right-side
       participent directement au grid parent ──────────────── */
.header-right-side {
    display: contents !important;
}


/* ═══════════════════════════════════════════════════════════════
   COL 1 — GAUCHE : logo + séparateur + caption
   ═══════════════════════════════════════════════════════════════ */

/* header-left-side : prend grid-column 1 naturellement */
.header-left-side {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important; /* séparateur géré via ::after + margin */
    min-width: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
}

    /* Logo */
    .header-left-side a {
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        outline: none !important;
        /*margin-right: 14px !important;*/
    }

.header-logo {
    width: 145px !important;
    height: 34px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    transition: opacity 120ms !important;
}

.header-left-side a:hover .header-logo {
    opacity: 0.85 !important;
}

/* Séparateur vertical logo | caption */
.header-left-side a::after {
    content: "" !important;
    display: block !important;
    width: 1px !important;
    height: 22px !important;
    background: var(--line-2, #E3E5EA) !important;
    flex-shrink: 0 !important;
    margin-left: 14px !important;
}

/* ── Caption XAF — dans header-right-side mais forcé en col 1 ── */
/* XAF structure : header-right-side > div[role="heading"] > .view-caption-root */

.header-right-side > [role="heading"] {
    grid-column: 1 !important; /* ← collé à la fin de la col 1 */
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    /* Problème : header-left-side occupe déjà col 1.
       On utilise un sous-grid ou on le place dans le même flux
       via position absolute sur col 1. Solution propre :
       on assigne caption à col 1 et header-left-side aussi,
       le grid les empile — on évite ça avec un wrapper flex.
       → Meilleure approche : caption reste DANS header-left-side
         via JS ou on accepte l'ordre DOM et on gère l'overlap.
       → Solution CSS pure : grid-column:1 + auto-placement
         ne crée PAS de chevauchement, il place le 2e item col1
         sur la même ligne dans la colonne — OK si on accepte
         que col1 devient un mini-flex-row implicite via subgrid.
       En pratique avec grid auto-placement :
         2 items grid-column:1 → ils s'empilent verticalement
         dans la même colonne, ce qui casse la hauteur 52px.
       → VRAIE solution : envelopper logo + caption dans
         un seul conteneur flex = header-left-side.
         Comme XAF les sépare en deux éléments frères,
         on fait : header-left-side { grid-column:1; display:flex }
         et on déplace visuellement le caption DANS ce flex
         via order ou via un workaround position.
    ─────────────────────────────────────────────────────────────
       WORKAROUND RETENU :
       - header-left-side couvre grid-column: 1 / 3 (col 1 + 2)
         avec justify-content:flex-start pour garder logo à gauche
       - gs-trigger (search) est sorti du flux normal via
         position:absolute centré dans la topbar
       - d-flex.ms-auto reste en col 3
    ─────────────────────────────────────────────────────────────
    */
}


/* ═══════════════════════════════════════════════════════════════
   APPROCHE FINALE : position absolute pour le search
   Évite tout conflit d'ordre DOM entre caption et search
   ═══════════════════════════════════════════════════════════════ */

/* Réinitialiser le grid : on n'utilise plus 3 cols symétriques
   mais un flex avec le search en position absolute centré */

.header.navbar-dark,
.header {
    display: flex !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    position: relative !important;
}

/* header-right-side redevient un flex normal */
.header-right-side {
    display: contents !important;
}

/* ── COL GAUCHE : logo + caption ────────────────────────────── */

.header-left-side {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: unset;
    overflow: hidden !important;
}

    /* Logo */
    .header-left-side a {
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        outline: none !important;
    }

.header-logo {
    width: 145px !important;
    height: 34px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Séparateur logo | caption */
.header-left-side a::after {
    content: "" !important;
    display: inline-block !important;
    width: 1px !important;
    height: 18px !important; /* légèrement moins haut, plus élégant */
    background: var(--line-2, #E3E5EA) !important;
    flex-shrink: 0 !important;
    margin: 0 12px !important; /* 12px de chaque côté — plus serré */
}

/* Caption de vue */
[role="heading"] {
    display: flex !important;
    align-items: center !important;
    width: unset !important;
    min-width: 0 !important;
    max-width: unset !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
}

.view-caption-root {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

    .view-caption-root .xaf-caption-icon-container {
        width: 20px !important;
        height: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        opacity: 0.5 !important;
    }

    .view-caption-root .xaf-caption-icon {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }

    .view-caption-root .xaf-caption-container {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .view-caption-root .xaf-view-caption-sm {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: var(--ink-3, #858B99) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .view-caption-root .xaf-object-caption {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: var(--ink-0, #0F1115) !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -0.005em !important;
    }


/* ── SEARCH : centré en position absolute ───────────────────── */

.gs-trigger {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(520px, 38%) !important;
    /* reset bouton */
    appearance: none !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    background: var(--surface-2, #F9FAFC) !important;
    border-radius: 10px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px 0 12px !important;
    cursor: pointer !important;
    transition: 80ms !important;
    color: var(--ink-3, #858B99) !important;
    z-index: 1 !important;
}

    .gs-trigger:hover,
    .gs-trigger:focus-within {
        background: var(--surface-1, #fff) !important;
        border-color: var(--brand) !important;
        box-shadow: 0 0 0 3px var(--brand-soft, #EBEBF6) !important;
        outline: none !important;
    }

.gs-trigger-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: var(--ink-3, #858B99) !important;
}

.gs-trigger-label {
    flex: 1 !important;
    text-align: left !important;
    font-size: 13px !important;
    color: var(--ink-3, #858B99) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.gs-trigger-kbd {
    font-family: "JetBrains Mono", ui-monospace, monospace !important;
    font-size: 10px !important;
    color: var(--ink-3, #858B99) !important;
    background: var(--surface-1, #fff) !important;
    border: 1px solid var(--line-2, #E3E5EA) !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}


/* ── DROITE : ms-auto pousse tout à droite ──────────────────── */

.header-right-side .d-flex.ms-auto {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}


/* ── PILL ÉTABLISSEMENT ─────────────────────────────────────── */

.school-info {
    display: inline-flex !important;
    align-items: stretch !important;
    height: 36px !important;
    background: var(--surface-2, #F9FAFC) !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    border-radius: 999px !important;
    padding: 0 !important;
    margin-right: 4px !important;
    overflow: hidden !important;
    transition: 120ms !important;
    max-width: 260px !important;
    cursor: pointer !important;
}

    .school-info:hover {
        background: var(--surface-3, #F1F3F7) !important;
    }

    .school-info .school_image {
        width: 30px !important;
        height: 30px !important;
        margin: 3px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: var(--surface-1, #fff) !important;
        border: 1px solid var(--line, #ECEDF1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 2px !important;
    }

        .school-info .school_image img {
            width: 100% !important;
            height: 100% !important;
            object-fit: contain !important;
            display: block !important;
        }

    .school-info > div:not(.school_image) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 0 12px 0 6px !important;
        min-width: 0 !important;
        gap: 1px !important;
    }

    .school-info .SchoolName {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: var(--ink-0, #0F1115) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
        letter-spacing: -0.005em !important;
    }

    .school-info .SchoolAdress {
        font-size: 10.5px !important;
        font-weight: 400 !important;
        color: var(--ink-3, #858B99) !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 160px !important;
    }


/* ── BOUTONS ICÔNE ──────────────────────────────────────────── */

.theme-button,
.btn-header {
    all: unset !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ink-2, #4B5160) !important;
    cursor: pointer !important;
    transition: 80ms !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

    .theme-button:hover,
    .btn-header:hover {
        background: var(--surface-3, #F1F3F7) !important;
        color: var(--ink-0, #0F1115) !important;
    }

    .theme-button .xaf-image,
    .btn-header .xaf-image {
        width: 20px !important;
        height: 20px !important;
        mask-size: 20px !important;
        -webkit-mask-size: 20px !important;
    }


/* ── AVATAR / ACCOUNT ───────────────────────────────────────── */

.account-container .account-button {
    all: unset !important;
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand-warm), var(--brand)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 2px var(--surface-1, #fff), 0 0 0 3.5px var(--brand-soft, #EBEBF6) !important;
    transition: 120ms !important;
    margin-left: 6px !important;
}

    .account-container .account-button:hover {
        box-shadow: 0 0 0 2px var(--surface-1, #fff), 0 0 0 4px var(--brand-soft, #EBEBF6) !important;
        transform: translateY(-1px) !important;
    }

    .account-container .account-button .xaf-image {
        background-color: #fff !important;
        width: 16px !important;
        height: 16px !important;
        mask-size: 16px !important;
        -webkit-mask-size: 16px !important;
    }


/* ── DROPDOWN ACCOUNT ───────────────────────────────────────── */

.account-main.dropdown-menu {
    background: var(--surface-1, #fff) !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px -4px rgba(15,17,21,0.15), 0 2px 4px rgba(15,17,21,0.06) !important;
    padding: 8px !important;
    min-width: 260px !important;
}

.account-main .user-info-container {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
    border-radius: 8px !important;
}

.account-main .logo-container {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand-warm), var(--brand)) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .account-main .logo-container .xaf-image {
        background-color: #fff !important;
        width: 22px !important;
        height: 22px !important;
        mask-size: 22px !important;
        -webkit-mask-size: 22px !important;
    }

.account-main .user-info-inner-container {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.account-main .user-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F1115) !important;
    margin-bottom: 4px !important;
}

.account-separator {
    height: 1px !important;
    background: var(--line, #ECEDF1) !important;
    margin: 8px 0 !important;
    border: 0 !important;
}

.account-main .dxbl-btn.xaf-btn {
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    width: 100% !important;
    justify-content: flex-start !important;
    border: 0 !important;
    background: transparent !important;
    transition: 120ms !important;
    display: flex !important;
}

    .account-main .dxbl-btn.xaf-btn:hover {
        background: var(--surface-2, #F9FAFC) !important;
    }

.account-main .my-details {
    color: var(--brand) !important;
}

    .account-main .my-details:hover {
        background: var(--brand-soft, #EBEBF6) !important;
    }

.account-main .log-off {
    color: var(--tint-rose-fg, #E11D48) !important;
}

    .account-main .log-off:hover {
        background: var(--tint-rose-bg, #FCDCE5) !important;
    }


/* ── THEME SETTINGS ─────────────────────────────────────────── */

.theme-settings .settings-bar.card {
    background: var(--surface-1, #fff) !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px -6px rgba(15,17,21,0.10) !important;
    padding: 8px !important;
}

.themes-menu .nav.nav-pills {
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
}

.themes-menu .theme-group {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--ink-3, #858B99) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 8px 8px 4px !important;
    display: block !important;
}

.theme-settings .size-mode-switcher {
    border-radius: 7px !important;
    border: 1px solid var(--line, #ECEDF1) !important;
    background: var(--surface-1, #fff) !important;
}

    .theme-settings .size-mode-switcher .dxbl-text-edit-input {
        font-size: 13px !important;
        color: var(--ink-1, #1F2330) !important;
    }


/* ── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .gs-trigger {
        width: min(420px, 36%) !important;
    }

    .school-info > div:not(.school_image) {
        display: none !important;
    }

    .school-info {
        padding: 3px !important;
        border-radius: 50% !important;
        max-width: 44px !important;
    }
}

@media (max-width: 900px) {
    .gs-trigger {
        width: min(320px, 40%) !important;
    }

    .header-left-side {
        max-width: none !important;
    }
}

@media (max-width: 768px) {
    .header.navbar-dark,
    .header {
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .gs-trigger {
        position: static !important;
        transform: none !important;
        width: auto !important;
        flex: 1 !important;
    }

    .view-caption-root .xaf-view-caption-sm {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════
   CAPTION — raffinement V5
   · Icône masquée
   · Style breadcrumb horizontal : parent › vue
   · Typographie alignée sur le mockup V5
   ════════════════════════════════════════════════════════════════ */

/* 1 ── Masquer l'icône de vue ──────────────────────────────── */

.view-caption-root .xaf-caption-icon-container {
    display: none !important;
}


/* 2 ── Conteneur caption : disposition horizontale ──────────── */

.view-caption-root .xaf-caption-container {
    flex-direction: row !important; /* horizontal au lieu de colonne */
    align-items: center !important;
    gap: 0 !important;
}


/* 3 ── Parent (breadcrumb) ex: "Médiacom" ───────────────────── */

.view-caption-root .xaf-view-caption-sm {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #858B99) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
}

    /* Séparateur › entre parent et titre — affiché seulement
   quand xaf-view-caption-sm n'est PAS vide               */
    .view-caption-root .xaf-view-caption-sm:not(:empty)::after {
        content: "›" !important;
        display: inline-block !important;
        margin: 0 6px !important;
        color: var(--ink-4, #B5BBC7) !important;
        font-weight: 400 !important;
        font-size: 13px !important;
    }


/* 4 ── Titre de vue ex: "Tableau de bord" ──────────────────── */

.view-caption-root .xaf-object-caption {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F1115) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   CAPTION — breadcrumb unifié (v4)
   Couvre les deux structures DOM de XAF :
   · ListView  : .xaf-view-caption-lg  (pas de xaf-view-caption-sm)
   · Dashboard : .xaf-view-caption-sm + .xaf-object-caption
   ════════════════════════════════════════════════════════════════ */

/* Masquer l'icône dans tous les cas */
.view-caption-root .xaf-caption-icon-container {
    display: none !important;
}

/* Conteneur caption : toujours horizontal */
.view-caption-root .xaf-caption-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    max-width: unset !important;
}

/* ── Span groupe injecté par JS ──────────────────────────────── */

.xaf-caption-container [data-acur-breadcrumb] {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--ink-3, #858B99) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

    /* Séparateur › après le groupe (seulement si non vide) */
    .xaf-caption-container [data-acur-breadcrumb]:not(:empty)::after {
        content: "›" !important;
        margin: 0 5px 0 6px !important; /* légèrement asymétrique : plus près du titre */
        color: var(--ink-4, #B5BBC7) !important;
        font-weight: 300 !important;
        font-size: 13px !important;
    }

/* ── Cas 1 : ListView — xaf-view-caption-lg ─────────────────── */

.view-caption-root .xaf-view-caption-lg {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F1115) !important;
    letter-spacing: -0.012em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
}

/* ── Cas 2 : Dashboard — xaf-view-caption-sm masqué,
              xaf-object-caption = titre principal ────────────── */

/* xaf-view-caption-sm = titre dupliqué en cas Dashboard → masquer */
.view-caption-root .xaf-view-caption-sm {
    display: none !important;
}

.view-caption-root .xaf-object-caption {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--ink-0, #0F1115) !important;
    letter-spacing: -0.012em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
}