/*
 * ============================================================
 *  SIDEBAR  (menu de navigation)
 *  DevExpress XAF Blazor v25.x — Fluent mode
 *  Adapté BatiFreeXaf — palette orange + teal
 *
 *  File structure
 *  ──────────────
 *  0.  Base / app shell (chaîne de hauteur, header masqué)
 *  1.  Design tokens (BatiFree palette)
 *  2.  Sidebar — surface + header (logo) + Paramètres
 *  3.  Navigation filter (native XAF search field)
 *  4.  Navigation tree (items, states, separators, bullets)
 *  5.  Collapsed rail (manual click toggle, via sidebar.js + native XAF)
 *  6.  Infobulle des items
 *
 *  Override strategy for DevExpress components
 *  ────────────────────────────────────────────
 *  DevExpress Fluent theme relies on a two-level CSS variable chain:
 *    component variable  →  dxds token  →  value
 *  Adding !important on a property such as background-color has NO
 *  effect when the component reads its color from a CSS variable at
 *  render time.  The only reliable approach is to re-declare the
 *  component-level CSS variable on a scoped selector (.sidebar …)
 *  so the cascade resolves to our value first.
 *
 *  Example (navigation field background):
 *    .dxbl-text-edit reads its background from --dxbl-text-edit-bg
 *    → we re-declare --dxbl-text-edit-bg on .sidebar .dxbl-text-edit
 *
 *  When in doubt, search core.min.css for the component class and
 *  trace back the variable chain before writing overrides.
 * ============================================================
 */


@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');


/* 0. Base / app shell — chaîne de hauteur requise (sinon UnableToRequestItemsException). */
html, body {
    height: 100%;
}

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

/* Header applicatif masqué (pas de bandeau supérieur). */
.app-header,
.header {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: none !important;
    position: absolute !important;
    width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* 1. Design tokens — palette BatiFree */
:root {
    --sidebar-palette-teal-700: #164147;
    --sidebar-palette-teal-600: #1c4b52;
    --sidebar-palette-teal-550: #24616a;
    --sidebar-palette-teal-525: #2d6d76;
    --sidebar-palette-teal-500: #255a62;
    --sidebar-palette-white: #fffefd;
    --sidebar-palette-charcoal-10: #f9f9f9;
    --sidebar-palette-charcoal-20: #f3f3f3;
    --sidebar-palette-charcoal-40: #e1e1e0;
    --sidebar-palette-charcoal-60: #cdcdcb;
    --sidebar-palette-charcoal-70: #b9b9b6;
    --sidebar-palette-orange-10: #fff2eb;
    --sidebar-palette-orange-20: #ffe4d6;
    --sidebar-palette-orange-30: #ffd994;
    --sidebar-palette-orange-40: #ff5a00;
    --sidebar-palette-orange-50: #e05200;
    --sidebar-space-s: 8px;
    --sidebar-space-m: 10px;
    --sidebar-space-2xl: 20px;
    --sidebar-space-3xl: 24px;
    --sidebar-radius-s: 4px;
    --sidebar-font-family: "Manrope", var(--dxbl-text-edit-font-family-m, "Segoe UI", system-ui, sans-serif);
    --sidebar-font-size-xs: 10px;
    --sidebar-font-size-s: 12px;
    --sidebar-font-size-m: 14px;
    --sidebar-font-weight-regular: 400;
    --sidebar-surface: var(--sidebar-palette-teal-700);
    --sidebar-field-surface: var(--sidebar-palette-teal-600);
    --sidebar-field-surface-hover: var(--sidebar-palette-teal-550);
    --sidebar-field-border: var(--sidebar-palette-teal-500);
    --sidebar-field-border-hover: var(--sidebar-palette-teal-525);
    --sidebar-field-border-focus: var(--sidebar-palette-orange-30);
    --sidebar-text-on-dark: var(--sidebar-palette-white);
    --sidebar-text-placeholder: var(--sidebar-palette-charcoal-40);
    --sidebar-text-muted: var(--sidebar-palette-charcoal-70);
    --sidebar-accent: var(--sidebar-palette-orange-40);

    /* Recoloration des icônes <img> au hover (→ teal #164147) et à la sélection (→ blanc). */
    --sidebar-nav-icon-hover-filter:
        brightness(0) saturate(100%) invert(19%) sepia(34%) saturate(1093%) hue-rotate(140deg) brightness(94%) contrast(91%);
    --sidebar-nav-icon-selected-filter: url(#sidebar-selected-icon-filter);

    /* États item : hover orange-10, selected orange-40 blanc. */
    --sidebar-nav-item-text: var(--sidebar-text-on-dark);
    --sidebar-nav-item-hover-surface: var(--sidebar-palette-orange-10);
    --sidebar-nav-item-hover-text: var(--sidebar-palette-teal-700);
    --sidebar-nav-item-pressed-surface: var(--sidebar-palette-orange-20);
    --sidebar-nav-item-selected-surface: var(--sidebar-accent);
    --sidebar-nav-item-selected-text: var(--sidebar-palette-white);
    --sidebar-nav-subitem-text: var(--sidebar-palette-charcoal-60);
    --sidebar-nav-section-text: var(--sidebar-palette-charcoal-70);
    --sidebar-tooltip-surface: var(--sidebar-palette-charcoal-10);
    --sidebar-tooltip-border: var(--sidebar-palette-charcoal-20);
    --sidebar-tooltip-text: var(--sidebar-palette-teal-700);
}


/* 2. Sidebar — surface + en-tête (logo). Cible la classe NATIVE .sidebar (portable XAF). */
.sidebar {
    /* Largeur verrouillée : sinon la sidebar grandit en flex sur une zone vide. */
    width: 210px;
    min-width: 210px;
    max-width: 210px;
    flex: 0 0 auto !important;
    flex-direction: column;
    background: var(--sidebar-surface) !important;
    border: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

    .sidebar a {
        text-decoration: none !important;
    }

/* Menu bas de sidebar (Déconnexion), compact. */
.sidebar__menu {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    padding: var(--sidebar-space-s) var(--sidebar-space-m);
}

    /* Sélecteur de thème natif rendu mais sans emprise visuelle. */
    .sidebar__menu .theme-settings {
        display: contents;
    }

/* SettingsComponent dans la sidebar (Paramètres). */
.sidebar__settings-wrapper {
    width: 100%;
}

    .sidebar__settings-wrapper .theme-button {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        padding: var(--sidebar-space-s) !important;
        border: none !important;
        background: transparent !important;
        border-radius: var(--sidebar-radius-s) !important;
        color: var(--sidebar-nav-item-text) !important;
        font-family: var(--sidebar-font-family) !important;
        font-size: var(--sidebar-font-size-m) !important;
        font-weight: var(--sidebar-font-weight-regular) !important;
        line-height: 1.2 !important;
        justify-content: flex-start !important;
        text-align: left !important;
        cursor: pointer !important;
        box-shadow: none !important;
        outline: none !important;
    }

.sidebar__settings-wrapper .theme-button:hover {
    background: var(--sidebar-nav-item-hover-surface) !important;
    color: var(--sidebar-nav-item-hover-text) !important;
}

.sidebar__settings-wrapper .theme-button .xaf-image {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    mask-size: 16px !important;
    -webkit-mask-size: 16px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.sidebar__settings-wrapper .theme-button::after {
    content: 'Thèmes';
    min-width: 0;
    overflow-wrap: break-word;
    line-height: 1.2;
}

.collapse-toggle .sidebar .sidebar__settings-wrapper .theme-button::after {
    display: none !important;
}

.sidebar__menu-item {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: var(--sidebar-space-s);
    border: none;
    background: transparent;
    border-radius: var(--sidebar-radius-s);
    color: var(--sidebar-nav-item-text);
    font-family: var(--sidebar-font-family);
    font-size: var(--sidebar-font-size-m);
    font-weight: var(--sidebar-font-weight-regular);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

    .sidebar__menu-item:hover {
        background: var(--sidebar-nav-item-hover-surface);
        color: var(--sidebar-nav-item-hover-text);
    }

.sidebar__menu-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sidebar__menu-label {
    min-width: 0;
    overflow-wrap: break-word;
}

/* En-tête (logo BatiFree). */
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sidebar-space-s);
    padding: var(--sidebar-space-2xl) var(--sidebar-space-m) var(--sidebar-space-3xl);
}

.sidebar__logo {
    height: 30px !important;
    width: auto !important;
    object-fit: contain;
    max-width: 100%;
    cursor: pointer;
}
/* Cube seul (rail replié). */
.sidebar__logo--mark {
    display: none !important;
    width: 26px !important;
    height: 30px !important;
}

/* Flèche de bascule pli/dépli. */
.sidebar__collapse-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--sidebar-text-on-dark);
    cursor: pointer;
}

.sidebar__chevron {
    width: 20px;
    height: 20px;
    transition: transform 0.15s ease;
}


/* 3. Filtre de navigation (champ de recherche natif XAF) — masqué. */
.sidebar .dxbl-navigation-filter {
    display: none !important;
}

.sidebar .dxbl-text-edit {
    --dxbl-text-edit-bg: var(--sidebar-field-surface);
    --dxbl-text-edit-color: var(--sidebar-text-on-dark);
    --dxbl-text-edit-placeholder-color: var(--sidebar-text-placeholder);
    --dxbl-text-edit-border-color: var(--sidebar-field-border);
    --dxbl-text-edit-border-hovered-color: var(--sidebar-field-border-hover);
    --dxbl-text-edit-border-active-color: var(--sidebar-field-border-focus);
    --dxbl-text-edit-border-width: 1px;
    --dxbl-text-edit-border-style: solid;
    --dxbl-text-edit-border-radius: var(--sidebar-radius-s);
    --dxbl-text-edit-box-shadow: none;
    --dxbl-text-edit-font-family: var(--sidebar-font-family);
    --dxbl-text-edit-font-size: var(--sidebar-font-size-s);
    --dxbl-text-edit-font-weight: var(--sidebar-font-weight-regular);
    --dxbl-text-edit-btn-bg: transparent;
    --dxbl-text-edit-btn-color: var(--sidebar-text-placeholder);
    --dxbl-text-edit-btn-image-color: var(--sidebar-text-placeholder);
    --dxbl-text-edit-btn-hover-bg: transparent;
    --dxbl-text-edit-btn-hover-color: var(--sidebar-text-on-dark);
    --dxbl-text-edit-btn-hover-image-color: var(--sidebar-text-on-dark);
}

    .sidebar .dxbl-text-edit .dxbl-btn-icon {
        border-color: transparent;
        background: transparent;
        --dxbl-btn-color: var(--sidebar-text-placeholder);
    }

    /* Texte à gauche, loupe à droite. */
    .sidebar .dxbl-text-edit .dxbl-text-edit-input {
        order: 1;
    }

    .sidebar .dxbl-text-edit .dxbl-btn-icon {
        order: 2;
    }

    .sidebar .dxbl-text-edit:hover {
        --dxbl-text-edit-bg: var(--sidebar-field-surface-hover);
    }

/* Garde : ré-impose l'apparence en propriétés directes. */
.sidebar .dxbl-text-edit,
.sidebar .dxbl-input-editor,
.sidebar input[type="text"],
.sidebar input[type="search"] {
    background-color: var(--sidebar-field-surface) !important;
    border-color: var(--sidebar-field-border) !important;
    color: var(--sidebar-text-on-dark) !important;
    border-radius: var(--sidebar-radius-s) !important;
    font-family: var(--sidebar-font-family) !important;
    font-size: var(--sidebar-font-size-s) !important;
}

    .sidebar .dxbl-text-edit:hover {
        background-color: var(--sidebar-field-surface-hover) !important;
        border-color: var(--sidebar-field-border-hover) !important;
    }

    .sidebar .dxbl-text-edit:focus-within,
    .sidebar .dxbl-text-edit.dx-state-focused {
        border-color: var(--sidebar-field-border-focus) !important;
    }

.sidebar .dxbl-text-edit-input {
    background: transparent !important;
    color: var(--sidebar-text-on-dark) !important;
    font-family: var(--sidebar-font-family) !important;
    padding-left: var(--sidebar-space-m) !important;
}

    .sidebar .dxbl-text-edit-input::placeholder {
        color: var(--sidebar-text-on-dark) !important;
    }

.sidebar .dxbl-text-edit .dxbl-text-edit-btn,
.sidebar .dxbl-text-edit .dxbl-btn-icon,
.sidebar .dxbl-text-edit .dxbl-btn {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--sidebar-text-placeholder) !important;
}

    .sidebar .dxbl-text-edit .dxbl-text-edit-btn:hover,
    .sidebar .dxbl-text-edit .dxbl-btn-icon:hover,
    .sidebar .dxbl-text-edit .dxbl-btn:hover {
        background: rgba(255, 255, 255, 0.10) !important;
        color: var(--sidebar-text-on-dark) !important;
    }


/* 4. Arbre de navigation (items, états, séparateurs, puces) */

/* Variables posées sur .dxbl-treeview (la racine du composant).
   Hover/selection mis à transparent — états visuels portés par le <li> (pleine largeur). */
.sidebar .dxbl-treeview {
    background: transparent;
    --dxbl-treeview-item-bg: transparent;
    --dxbl-treeview-item-color: var(--sidebar-nav-item-text);
    --dxbl-treeview-item-border-radius: var(--sidebar-radius-s);
    --dxbl-treeview-font-family: var(--sidebar-font-family);
    --dxbl-treeview-font-size: var(--sidebar-font-size-m);
    --dxbl-treeview-item-spacing-y: var(--sidebar-space-s);
    --dxbl-treeview-image-spacing: 5px;
    --dxbl-treeview-text-padding-y: var(--sidebar-space-s);
    --dxbl-treeview-item-content-indent: var(--sidebar-space-m);
    --dxbl-treeview-item-hover-bg: transparent;
    --dxbl-treeview-item-hover-color: var(--sidebar-nav-item-hover-text);
    --dxbl-treeview-item-selection-bg: transparent;
    --dxbl-treeview-item-selection-color: var(--sidebar-nav-item-selected-text);
    --dxbl-treeview-item-selection-focused-color: var(--sidebar-nav-item-selected-text);
    --dxbl-treeview-item-active-bg: transparent;
    --dxbl-treeview-item-active-color: var(--sidebar-nav-item-selected-text);
    --dxbl-treeview-item-active-focused-bg: transparent;
    --dxbl-treeview-btn-color: var(--sidebar-text-placeholder);
    --dxbl-treeview-btn-hover-color: var(--sidebar-nav-item-selected-text);
    --dxbl-treeview-btn-bg: transparent;
    --dxbl-treeview-btn-hover-bg: transparent;
}

/* Sous-items niveau 3+ : texte atténué. */
.sidebar .dxbl-treeview-item .dxbl-treeview-item .dxbl-treeview-item {
    --dxbl-treeview-item-color: var(--sidebar-nav-subitem-text);
}

/* Sous-items niveau 3+ : puce ronde à la place de l'icône. */
.sidebar .dxbl-treeview-item-container:not([aria-level="1"]):not([aria-level="2"]) > .xaf-nav-menu-item-icon {
    display: none !important;
}

.sidebar .dxbl-treeview-item-container:not([aria-level="1"]):not([aria-level="2"])::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 16px;
    height: 16px;
    margin-right: var(--sidebar-space-s);
    background-color: currentColor;
    -webkit-mask: radial-gradient(circle at center, #000 2px, transparent 2.5px);
    mask: radial-gradient(circle at center, #000 2px, transparent 2.5px);
}

/* Catégories niveau 1 = titres de section non cliquables. */
.sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content {
    background: transparent !important;
    margin-top: 0;
    padding-top: 0;
}

    .sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content .xaf-nav-link span {
        color: var(--sidebar-nav-section-text) !important;
        font-size: var(--sidebar-font-size-xs);
        font-weight: 400;
    }

    .sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container > .xaf-nav-menu-item-icon,
    .sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-btn {
        display: none !important;
    }

    .sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container,
    .sidebar ul[data-is-root] > .dxbl-treeview-item.has-children > .dxbl-treeview-item-content > .dxbl-treeview-item-container:hover {
        background: transparent !important;
        pointer-events: none;
        cursor: default;
    }

/* Pas de soulignement (à neutraliser sur le <a> lui-même). */
.sidebar .dxbl-treeview-item-container,
.sidebar .dxbl-treeview-item-container:hover,
.sidebar .dxbl-treeview-item-container:focus,
.sidebar .xaf-nav-link,
.sidebar .xaf-nav-link span,
.sidebar .xaf-nav-link:hover,
.sidebar .xaf-nav-link:hover span {
    text-decoration: none !important;
}

/* Font sur le <a> — seul élément où le token font-size s'applique réellement. */
.sidebar .dxbl-treeview-item-container {
    font-family: var(--sidebar-font-family) !important;
    font-size: var(--sidebar-font-size-m) !important;
    font-weight: var(--sidebar-font-weight-regular) !important;
}

/* Hover / active sur le <li> — couvre la pleine largeur (178px).
   Le <a> (dxbl-treeview-item-container) ne couvre que la zone texte+icône. */
.sidebar li.xaf-nav-item.clickable-xaf-nav-item {
    cursor: pointer;
    border-radius: var(--sidebar-radius-s);
    transition: background-color .15s ease;
}

    .sidebar li.xaf-nav-item.clickable-xaf-nav-item:hover {
        background-color: var(--sidebar-nav-item-hover-surface) !important;
        color: var(--sidebar-nav-item-hover-text) !important;
    }

    .sidebar li.xaf-nav-item.clickable-xaf-nav-item.dxbl-active {
        background-color: var(--sidebar-nav-item-selected-surface) !important;
        color: var(--sidebar-nav-item-selected-text) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }

    .sidebar li.xaf-nav-item.clickable-xaf-nav-item.dxbl-active .xaf-nav-menu-item-icon {
        filter: var(--sidebar-nav-icon-selected-filter) !important;
    }

/* Chevron d'expansion à droite + bouton nu. */
.sidebar .dxbl-treeview-item-content > .dxbl-btn,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:hover,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:focus,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:focus-visible,
.sidebar .dxbl-treeview-item-content > .dxbl-btn:active,
.sidebar .dxbl-treeview-item-content > .dxbl-btn.dx-state-active {
    order: 10;
    margin-left: auto;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    /* Icône chevron 12×12. */
    .sidebar .dxbl-treeview-item-content > .dxbl-btn .dxbl-image {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
    }

        /* Chevron blanc (visible sur le teal). */
        .sidebar .dxbl-treeview-item-content > .dxbl-btn .dxbl-image,
        .sidebar .dxbl-treeview-item-content > .dxbl-btn .dxbl-image use {
            color: var(--sidebar-text-on-dark) !important;
            fill: var(--sidebar-text-on-dark) !important;
        }

/* Libellés : retour à la ligne autorisé, pas d'ellipsis. */
.sidebar .dxbl-treeview-item-text-container,
.sidebar .dxbl-text {
    min-width: 0;
}

.sidebar .xaf-nav-link {
    flex: 1 1 auto;
    min-width: 0;
}

    .sidebar .xaf-nav-link span {
        display: block;
        white-space: normal;
        overflow-wrap: break-word;
        line-height: 1.2;
        /*        font-size: var(--sidebar-font-size-m) !important;*/
    }

    /* Pas de liseré de focus. */
    .sidebar .dxbl-treeview-item-container:focus,
    .sidebar .dxbl-treeview-item-container:focus-visible,
    .sidebar .xaf-nav-link:focus,
    .sidebar .xaf-nav-link:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

.sidebar .dxbl-treeview-item-container.dxbl-active:focus,
.sidebar .dxbl-treeview-item-container.dxbl-active:focus-visible {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Icônes nav : couleur Fluent native dans tous les états.
   Pas de filtre sur l'état sélectionné — l'icône Fluent s'intègre naturellement
   sur le fond orange (contours semi-transparents + blanc interne). */

/* Chevron de l'item sélectionné : reste blanc. */
.sidebar .dxbl-treeview-item-content:has(> .dxbl-treeview-item-container.dxbl-active) {
    --dxbl-treeview-btn-color: var(--sidebar-text-on-dark);
}

    .sidebar .dxbl-treeview-item-content:has(> .dxbl-treeview-item-container.dxbl-active) > .dxbl-btn,
    .sidebar .dxbl-treeview-item-content:has(> .dxbl-treeview-item-container.dxbl-active) > .dxbl-btn .dxbl-image,
    .sidebar .dxbl-treeview-item-content:has(> .dxbl-treeview-item-container.dxbl-active) > .dxbl-btn .dxbl-image use {
        color: var(--sidebar-text-on-dark) !important;
        fill: var(--sidebar-text-on-dark) !important;
    }

/* Groupe pur (déplie seulement) : libellé en en-tête de section. */
.sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container:not([href]) .xaf-nav-link span,
.sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container[href=""] .xaf-nav-link span,
.sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container[href="#"] .xaf-nav-link span {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9em;
    color: var(--sidebar-palette-charcoal-70) !important;
}

/* Destination (href) avec enfants : effet « lien » au survol. */
.sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container[href]:not([href=""]):not([href="#"]) {
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, text-decoration-color .15s ease;
}

    .sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container[href]:not([href=""]):not([href="#"]):not(.dxbl-active):hover {
        background-color: var(--sidebar-nav-item-hover-surface) !important;
        box-shadow: inset 4px 0 0 0 var(--sidebar-palette-orange-50) !important;
    }

        .sidebar li.has-children > .dxbl-treeview-item-content > a.dxbl-treeview-item-container[href]:not([href=""]):not([href="#"]):not(.dxbl-active):hover .xaf-nav-link span {
            color: var(--sidebar-nav-item-hover-text) !important;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

/* Alignement d'Accueil (seul item niveau 1 sans enfants) sur les items à icône. */
.sidebar ul[data-is-root] > .dxbl-treeview-item:not(.has-children) > .dxbl-treeview-item-content {
    padding-left: var(--sidebar-space-m);
}

/* Espacement 8px entre chaque item de navigation (Figma gap-[8px] sur tous les niveaux). */
.sidebar .dxbl-treeview-item {
    margin-bottom: var(--sidebar-space-s);
}

.sidebar .dxbl-treeview-item:last-child {
    margin-bottom: 0;
}

/* Scrollbar natif masqué dans la sidebar (défilement conservé). */
.sidebar *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

.sidebar *::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.sidebar * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}


/* 5. Rail replié (bascule manuelle au clic — native XAF via sidebar.js). */
.collapse-toggle .sidebar {
    display: flex !important;
    width: 70px !important;
    min-width: 70px !important;
}

    /* Reset margin-bottom sur le <li> — l'espacement est déjà porté par .dxbl-treeview-item-content. */
    .collapse-toggle .sidebar .dxbl-treeview-item {
        margin-bottom: 0 !important;
    }

    /* Icônes seules, libellés masqués. */
    .collapse-toggle .sidebar .dxbl-treeview-item-text-container,
    .collapse-toggle .sidebar .dxbl-treeview-item-text {
        display: none !important;
    }
    /* Chaque item = carré 32×32 centré. */
    .collapse-toggle .sidebar .dxbl-treeview-item-content {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 auto var(--sidebar-space-s) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--sidebar-radius-s);
    }

    .collapse-toggle .sidebar .dxbl-treeview-item-container {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: var(--sidebar-radius-s) !important;
    }

    /* Rail replié — fond carré 32×32 sur dxbl-treeview-item-content, pas sur le <li> pleine largeur. */
    .collapse-toggle .sidebar li.xaf-nav-item.clickable-xaf-nav-item:hover {
        background-color: transparent !important;
    }

    .collapse-toggle .sidebar li.xaf-nav-item.clickable-xaf-nav-item.dxbl-active {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .collapse-toggle .sidebar li.xaf-nav-item.clickable-xaf-nav-item:hover > .dxbl-treeview-item-content {
        background-color: var(--sidebar-nav-item-hover-surface) !important;
    }

    .collapse-toggle .sidebar li.xaf-nav-item.clickable-xaf-nav-item.dxbl-active > .dxbl-treeview-item-content {
        background-color: var(--sidebar-nav-item-selected-surface) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    }

    .collapse-toggle .sidebar .dxbl-treeview-item-indent {
        display: none !important;
    }

    .collapse-toggle .sidebar .dxbl-treeview-item-content > .dxbl-btn {
        display: none !important;
    }

    .collapse-toggle .sidebar .about-info {
        display: none !important;
    }

    /* Menu bas en rail = carrés 32×32 centrés. */
    .collapse-toggle .sidebar .sidebar__menu {
        align-items: center;
    }

    .collapse-toggle .sidebar .sidebar__menu-label {
        display: none !important;
    }

    .collapse-toggle .sidebar .sidebar__menu-item {
        width: 32px !important;
        min-width: 32px;
        padding: 0 !important;
        gap: 0;
        justify-content: center;
    }

    /* Centrage des icônes/puces en rail. */
    .collapse-toggle .sidebar .dxbl-treeview {
        --dxbl-treeview-image-spacing: 0;
    }

    .collapse-toggle .sidebar .xaf-nav-menu-item-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        display: block !important;
    }

    .collapse-toggle .sidebar .dxbl-treeview-item-container::before {
        margin-right: 0 !important;
    }

    /* Filtre en rail = carré recherche 32px. */
    .collapse-toggle .sidebar .dxbl-navigation-filter {
        width: 32px;
        margin: 0 auto var(--sidebar-space-s);
    }

        .collapse-toggle .sidebar .dxbl-navigation-filter .dxbl-text-edit-input {
            display: none !important;
        }

        .collapse-toggle .sidebar .dxbl-navigation-filter .dxbl-text-edit {
            width: 32px !important;
            min-width: 32px !important;
            max-width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .collapse-toggle .sidebar .dxbl-navigation-filter .dxbl-btn,
        .collapse-toggle .sidebar .dxbl-navigation-filter .dxbl-btn-icon,
        .collapse-toggle .sidebar .dxbl-navigation-filter .dxbl-text-edit-btn {
            width: 100% !important;
            height: 100% !important;
            min-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

    /* En-tête en rail : cube seul centré. */
    .collapse-toggle .sidebar .sidebar__logo--full {
        display: none !important;
    }

    .collapse-toggle .sidebar .sidebar__logo--mark {
        display: block !important;
    }

    .collapse-toggle .sidebar .sidebar__brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .collapse-toggle .sidebar .sidebar__collapse-btn {
        display: none !important;
    }


/* 6. Page bar (barre titre + retour, remplace le header natif XAF). */
.main-pagebar {
    display: flex;
    align-items: center;
    gap: var(--sidebar-space-s);
    padding: 8px 16px 4px;
    flex: 0 0 auto;
    min-height: 40px;
}

.main-pagebar__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}


/* 7. Infobulle des items (rendue par sidebar.js, ancrée au <body> hors .sidebar). */
.sidebar-tooltip {
    position: fixed;
    transform: translateY(-50%);
    z-index: 1100;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: var(--sidebar-space-s);
    border-radius: var(--sidebar-radius-s);
    border: 1px solid var(--sidebar-tooltip-border);
    background: var(--sidebar-tooltip-surface);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.03);
    color: var(--sidebar-tooltip-text);
    font-family: var(--sidebar-font-family);
    font-size: var(--sidebar-font-size-m);
    font-weight: var(--sidebar-font-weight-regular);
    white-space: nowrap;
}

.sidebar-tooltip--visible {
    opacity: 1;
    visibility: visible;
}

dxbl-popup-cell {
    z-index: 1150 !important;
}