/* =========================
   Variables thème
   ========================= */
:root {
    color-scheme: light dark;
}

    /* =========================================
   THEME LIGHT AÉRO — tokens
   ========================================= */
    :root[data-theme="light"] {
        /* surfaces & lignes */
        --bg: #f4f7fc; /* fond global – bleu très clair */
        --bg-soft: #ffffff; /* cartes/nav – blanc propre */
        --line: #d6deea; /* séparateurs – gris bleuté */
        /* textes */
        --fg: #0a1020; /* texte principal – bleu très foncé */
        --muted: #5f6b85; /* texte secondaire – gris bleuté */
        /* accents */
        --accent: #2f7aff; /* bleu avion */
        --accent-soft: #e8f0ff; /* hover clair / pill */
        /* variantes utilisées par tes cards (section “Palette mobile”) */
        --card-slate: #eaf0f7; /* gris bleuté clair */
        --card-teal-1: #d9f2ef; /* teal très pâle */
        --card-teal-2: #cfe9f0;
        --card-green: #e3f3e8;
        --card-cyan: #d9eefa;
        /* chips/icônes dans cards */
        --chip-mint: #e9f7f2;
        --chip-ink: #0b2a2f;
        /* tabs */
        --tab-pill: #e9f3ff;
        --tab-ink: #1450c8;
        --tab-underline: #2f7aff;
    }
        /* =========================================
   LIGHT — Sidebar, Topbar, layout
   ========================================= */
        :root[data-theme="light"] .ps-sidebar {
            background: linear-gradient(180deg,#f7f9fd 0%,#eef3fb 100%);
            border-right: 1px solid var(--line);
        }

        :root[data-theme="light"] .ps-brand,
        :root[data-theme="light"] .ps-user {
            background: rgba(0,0,0,.03);
        }

        :root[data-theme="light"] .ps-topbar {
            background: #eaf1fb; /* bandeau clair */
            border-bottom: 1px solid var(--line);
        }

        :root[data-theme="light"] .ps-burger,
        :root[data-theme="light"] .ps-top-actions .ps-link {
            color: var(--fg);
        }

        /* Navigation items & groups */
        :root[data-theme="light"] .ps-nav-item {
            background: var(--bg-soft);
            color: var(--fg);
            border: 1px solid var(--line);
        }

            :root[data-theme="light"] .ps-nav-item:hover {
                background: var(--accent-soft);
                border-color: var(--accent);
            }

        :root[data-theme="light"] .ps-nav-group {
            border-color: var(--line);
        }

            :root[data-theme="light"] .ps-nav-group > summary {
                background: #f3f7fd;
            }

        :root[data-theme="light"] .ps-nav .ps-nav-group[open] > summary {
            background: #e9f1fe;
        }

        /* =========================================
   LIGHT — Cards & sections
   ========================================= */
        :root[data-theme="light"] .ps-section-title {
            color: var(--muted);
        }

        :root[data-theme="light"] .ps-card {
            background: var(--card-slate);
            color: var(--fg);
            border: 1px solid var(--line);
            box-shadow: 0 1px 2px rgba(12, 24, 48, .06);
        }

            :root[data-theme="light"] .ps-card:hover {
                transform: translateY(-1px);
                box-shadow: 0 6px 18px rgba(12, 24, 48, .12);
                border-color: #cfd9e7;
            }

            /* variantes couleurs (gardent le “feeling” aéro mais en clair) */
            :root[data-theme="light"] .ps-card.teal-1 {
                background: var(--card-teal-1);
            }

            :root[data-theme="light"] .ps-card.teal-2 {
                background: var(--card-teal-2);
            }

            :root[data-theme="light"] .ps-card.green {
                background: var(--card-green);
            }

            :root[data-theme="light"] .ps-card.cyan {
                background: var(--card-cyan);
            }

            /* chips/icônes dans les cards */
            :root[data-theme="light"] .ps-card .ps-chip {
                background: var(--chip-mint);
                color: var(--chip-ink);
            }

        /* =========================================
   LIGHT — Tabs (pills + underline actif)
   ========================================= */
        :root[data-theme="light"] .ps-tab {
            background: var(--bg-soft);
            border: 1px solid var(--line);
            color: var(--fg);
        }

            :root[data-theme="light"] .ps-tab.active {
                background: var(--tab-pill);
                color: var(--tab-ink);
            }

                :root[data-theme="light"] .ps-tab.active::after {
                    background: var(--tab-underline);
                }

        /* =========================================
   LIGHT — Formulaires auth / pages blanches
   ========================================= */
        :root[data-theme="light"] .auth {
            background: var(--bg);
        }

        :root[data-theme="light"] .auth-card {
            background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250,253,255,.98) 100%);
            border: 1px solid var(--line);
            color: var(--fg);
        }

        :root[data-theme="light"] .auth-title {
            color: var(--fg);
        }

            :root[data-theme="light"] .auth-title em {
                color: #2f7aff;
            }

        :root[data-theme="light"] .auth-input.form-control {
            background: #ffffff;
            border: 1px solid var(--line);
            color: var(--fg);
        }

            :root[data-theme="light"] .auth-input.form-control:focus {
                border-color: var(--accent);
                box-shadow: 0 0 0 .2rem rgba(47,122,255,.16);
            }

        /* =========================================
   LIGHT — Syncfusion Grid (tu avais des couleurs forcées dark)
   ========================================= */
        :root[data-theme="light"] .e-grid {
            background: var(--bg) !important;
            color: var(--fg) !important;
            border-color: var(--line) !important;
        }

            :root[data-theme="light"] .e-grid .e-gridcontent,
            :root[data-theme="light"] .e-grid .e-content,
            :root[data-theme="light"] .e-grid .e-table,
            :root[data-theme="light"] .e-grid .e-rowcell {
                background: var(--bg) !important;
                color: var(--fg) !important;
                border-color: #dbe3ef !important;
            }

            :root[data-theme="light"] .e-grid .e-row:hover .e-rowcell {
                background: #eef5ff !important;
            }

            :root[data-theme="light"] .e-grid .e-gridheader,
            :root[data-theme="light"] .e-grid .e-headercontent {
                background: #f0f5fd !important;
                border-color: var(--line) !important;
            }

            :root[data-theme="light"] .e-grid .e-toolbar,
            :root[data-theme="light"] .e-grid .e-toolbar .e-toolbar-items {
                background: #eaf1fb !important;
                border-color: var(--line) !important;
            }

                :root[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn,
                :root[data-theme="light"] .e-grid .e-toolbar .e-btn {
                    background: #ffffff !important;
                    color: var(--fg) !important;
                    border: 1px solid var(--line) !important;
                }

                    :root[data-theme="light"] .e-grid .e-toolbar .e-tbar-btn:hover,
                    :root[data-theme="light"] .e-grid .e-toolbar .e-btn:hover {
                        background: var(--accent-soft) !important;
                    }

            :root[data-theme="light"] .e-grid td.e-filterbarcell {
                background: transparent !important;
                border-color: var(--line) !important;
            }

                :root[data-theme="light"] .e-grid td.e-filterbarcell .e-input-group,
                :root[data-theme="light"] .e-grid td.e-filterbarcell input {
                    background: #ffffff !important;
                    color: var(--fg) !important;
                    border: 1px solid var(--line) !important;
                }

            :root[data-theme="light"] .e-grid .e-gridpager {
                background: #eaf1fb !important;
                color: var(--fg) !important;
                border-color: var(--line) !important;
            }


    /* Thème SOMBRE (tes valeurs actuelles) */
    :root[data-theme="dark"] {
        --bg: #0b1220;
        --bg-soft: #0f1a2b;
        --line: #22324d;
        --fg: #e8f1ff;
        --muted: #a9bddb;
        --accent: #59b2ff;
        --accent-soft: #123c63;
    }


/* =========================
   Base
   ========================= */
html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Zodiak-Regular', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* =========================
   Layout + Sidebar custom
   ========================= */
.ps-layout {
    --sbw: 280px; /* largeur sidebar desktop ouverte */
    display: grid;
    grid-template-columns: var(--sbw) 1fr;
    height: 100vh;
    transition: grid-template-columns .25s ease;
}

    .ps-layout[data-mode="mobile"] {
        grid-template-columns: 1fr; /* ignoré car le sidebar sera fixed en mobile */
    }

    /* Fermé sur desktop = colonne à 0 */
    .ps-layout.is-closed {
        --sbw: 0px;
    }

/* Sidebar - Desktop (dans la grille, pas de transform par défaut) */
.ps-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--sbw);
    background: linear-gradient(180deg,#0e1116 0%,#0b0e12 100%);
    border-right: 1px solid var(--line);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1001;
    /* clé: aucun transform en desktop */
    transform: none;
    transition: transform .25s ease, opacity .2s ease;
}

/* Desktop fermé : pas de transform, juste un léger fade (optionnel) */
.ps-layout.is-closed .ps-sidebar {
    opacity: 0;
}

/* État ouvert prioritaire (utile surtout en mobile, inoffensif en desktop) */
.ps-sidebar.is-open {
    transform: translateX(0);
    opacity: 1;
}

/* Mobile : overlay slide-in */
@media (max-width: 991px) {
    .ps-layout {
        display: block; /* le main prend 100% */
    }

    .ps-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(84vw, 340px);
        max-width: 340px;
        transform: translateX(-100%);
        box-shadow: 0 10px 30px rgba(0,0,0,.45);
        z-index: 1001;
    }

        .ps-sidebar.is-open {
            transform: translateX(0);
        }
}

/* Overlay mobile */
.ps-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000; /* sous le sidebar (1001), au-dessus du contenu */
}

    .ps-overlay.is-on {
        opacity: 1;
        pointer-events: auto;
    }

/* Branding */
.ps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    cursor: pointer;
}

.ps-logo {
    width: 28px;
    height: 28px;
    stroke: #8cc7ff;
    fill: none;
}

.ps-brand-text small {
    display: block;
    color: var(--muted);
    font-size: .75rem;
}

/* Navigation */
.ps-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ps-nav-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.ps-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid transparent;
    background: var(--bg-soft);
    color: var(--fg);
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 600;
    transition: .2s ease;
}

    .ps-nav-item img {
        width: 22px;
        height: 22px;
        opacity: .95;
    }

    .ps-nav-item:hover {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

.ps-nav-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

    .ps-nav-group > summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: #0c1626;
        cursor: pointer;
    }

        .ps-nav-group > summary::-webkit-details-marker {
            display: none;
        }

    .ps-nav-group img {
        width: 20px;
        height: 20px;
    }

    .ps-nav-group[open] {
        border-color: var(--accent);
    }

    .ps-nav-group button {
        margin: 6px 8px;
    }

/* Sidebar footer */
.ps-sidebar-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}

    .ps-user img {
        width: 24px;
        height: 24px;
    }

.ps-user-name {
    font-weight: 700;
    line-height: 1;
}

.ps-user-role {
    font-size: .75rem;
    color: var(--muted);
}

.ps-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--fg);
    font-weight: 600;
}

    .ps-btn.ghost {
        background: transparent;
    }

/* Topbar & contenu */
.ps-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ps-topbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    background: #0b1628;
    position: sticky;
    top: 0;
    z-index: 5;
}

.ps-burger {
    background: transparent;
    border: 0;
    color: var(--fg);
    font-size: 24px;
    line-height: 1;
}

/* assure que le burger passe au-dessus de l’overlay */
.ps-burger {
    position: relative;
    z-index: 1002;
    pointer-events: auto;
}

.ps-top-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

    .ps-top-title span {
        font-size: .7rem;
        color: var(--muted);
    }

    .ps-top-title strong {
        font-size: 1rem;
        letter-spacing: .5px;
    }

.ps-top-actions .ps-link {
    color: var(--fg);
    text-decoration: none;
    font-weight: 600;
}

    .ps-top-actions .ps-link:hover {
        color: var(--accent);
    }

.ps-content {
    padding: 16px;
    height: calc(100vh - 56px);
    overflow: auto;
}

/* --- Fix 1 : en desktop, quand fermé, le sidebar ne bloque plus les clics --- */
@media (min-width: 992px) {
    .ps-layout.is-closed .ps-sidebar {
        pointer-events: none; /* laisse passer les clics au header */
        border-right: 0; /* supprime le "rail" d'1px */
        opacity: 0; /* déjà présent, on le confirme */
    }

    .ps-layout.is-open .ps-sidebar {
        pointer-events: auto; /* réactive les clics quand ouvert */
        border-right: 1px solid var(--line);
        opacity: 1;
    }
}

/* --- Fix 2 : le header et le burger au-dessus du sidebar --- */
.ps-topbar {
    z-index: 2000; /* au-dessus du z-index:1001 du sidebar */
    position: sticky; /* déjà présent, re-précisé */
    top: 0;
}

.ps-burger {
    position: relative;
    z-index: 2001; /* burger au-dessus du header lui-même */
    pointer-events: auto;
}

/* Désactive totalement l’overlay en desktop */
@media (min-width: 992px) {
    .ps-overlay {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}


/* =========================
   Écrans de fond (conservés)
   ========================= */
.background-page {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    display: flex;
    max-width: 100%;
    overflow-x: hidden;
    justify-content: center;
}

    .background-page.login {
        background-image: url('/images/ciel2.jpg');
    }

    .background-page.espace {
        background-image: url('/images/ciel5.jpg');
    }

    .background-page.console {
        background-image: url('/images/ciel3.jpg');
    }

/* =========================
   UI Blazor / erreurs (conservé)
   ========================= */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: .75rem;
        top: .5rem;
    }

.blazor-error-boundary {
    /* version sûre sans data-url */
    background-color: #392222;
    border: 1px dashed #ff8a8a;
    color: #ffecec;
    padding: .6rem 1.25rem .7rem;
}


.ps-css-check {
    background: #0f0;
    color: #000;
    padding: 6px 8px;
    border-radius: 8px;
}


/* =========================
   Palette mobile (cards / tabs)
   ========================= */
:root {
    --card-teal-1: #0c3f47; /* bleu canard foncé */
    --card-teal-2: #0c5661; /* teal soutenu */
    --card-green: #1a5a34; /* vert profond */
    --card-cyan: #0c4a5a; /* cyan-bleuté */
    --card-slate: #243041; /* gris bleuté (cards neutres) */
    --chip-mint: #cdeee6; /* fond des icônes carrées */
    --chip-ink: #0e2f34; /* pictos sur fond mint */

    --tab-pill: #133c35; /* fond pill actif */
    --tab-ink: #92e3cc; /* texte actif */
    --tab-underline: #3fd1b4; /* barre sous l’onglet actif */
}

/* =========================
   Cards cliquables
   ========================= */
.ps-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ps-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--card-slate);
    color: var(--fg);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.06);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

    .ps-card:where(:hover,:focus) {
        transform: translateY(-1px);
        box-shadow: 0 12px 30px rgba(0,0,0,.45);
    }

    .ps-card .ps-chip {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: var(--chip-mint);
        color: var(--chip-ink);
        font-size: 20px; /* pour emoji/icône */
    }

    .ps-card .ps-title {
        font-weight: 700;
        line-height: 1.25;
        font-size: 1.05rem;
    }

    /* Variantes couleur (comme screenshot_2) */
    .ps-card.teal-1 {
        background: var(--card-teal-2);
    }

    .ps-card.teal-2 {
        background: var(--card-teal-1);
    }

    .ps-card.green {
        background: var(--card-green);
    }

    .ps-card.cyan {
        background: var(--card-cyan);
    }
/* Variante grise (screenshot_3) déjà par défaut via --card-slate */

/* Option “liste section titre” */
.ps-section-title {
    margin: 18px 2px 10px;
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* =========================
   Tabs (pills + underline actif)
   ========================= */
.ps-tabs {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 4px 0 14px;
}

.ps-tab {
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--bg-soft);
    color: var(--fg);
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    cursor: pointer;
    user-select: none;
}

    .ps-tab.active {
        background: var(--tab-pill);
        color: var(--tab-ink);
    }

        .ps-tab.active::after {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: -8px;
            height: 4px;
            border-radius: 3px;
            background: var(--tab-underline);
        }

/* =========================================================
   Syncfusion SfGrid — Dark pack (clean, scoped, no duplicates)
   Palette via :root  ->  --bg, --bg-soft, --line, --fg, --muted, --accent
   ========================================================= */

/* ---- Conteneur & contenu ---- */
.e-grid {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

    .e-grid .e-gridcontent,
    .e-grid .e-content,
    .e-grid .e-table,
    .e-grid .e-rowcell {
        background: var(--bg) !important;
        color: var(--fg) !important;
        border-color: #1b2740 !important;
    }

    .e-grid .e-row:hover .e-rowcell {
        background: #0f192b !important;
    }

    /* ---- En-têtes ---- */
    .e-grid .e-gridheader,
    .e-grid .e-headercontent {
        background: #0f1a2b !important;
        border-color: var(--line) !important;
    }

    .e-grid .e-headercell,
    .e-grid .e-headercell .e-headercelldiv,
    .e-grid .e-headercell .e-headertext {
        background: transparent !important;
        color: var(--fg) !important;
        border-color: var(--line) !important;
        font-weight: 700;
    }

    /* ---- Toolbar ---- */
    .e-grid .e-toolbar,
    .e-grid .e-toolbar .e-toolbar-items {
        background: #0b1628 !important;
        border-color: var(--line) !important;
    }

        /* Espacement uniforme entre items (sans spacers) */
        .e-grid .e-toolbar .e-toolbar-items,
        .e-grid .e-toolbar .e-hscroll-content {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            column-gap: 12px !important;
            row-gap: 0 !important;
        }

        /* Wrappers transparents */
        .e-grid .e-toolbar .e-toolbar-item,
        .e-grid .e-toolbar .e-toolbar-item.e-template,
        .e-grid .e-toolbar .e-separator {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Boutons */
        .e-grid .e-toolbar .e-tbar-btn,
        .e-grid .e-toolbar .e-btn {
            background: #122036 !important;
            color: var(--fg) !important;
            border: 1px solid var(--line) !important;
            border-radius: 10px !important;
            margin: 0 !important;
        }

            .e-grid .e-toolbar .e-tbar-btn:hover,
            .e-grid .e-toolbar .e-btn:hover {
                background: var(--accent-soft) !important;
            }

            .e-grid .e-toolbar .e-tbar-btn.e-btn:disabled,
            .e-grid .e-toolbar .e-overlay .e-tbar-btn {
                background: #0f1a2b !important;
                color: #8aa0bf !important;
                opacity: 1 !important;
                border-color: var(--line) !important;
            }

            /* Icônes & texte des boutons */
            .e-grid .e-toolbar .e-icons,
            .e-grid .e-toolbar .e-btn .e-btn-icon,
            .e-grid .e-toolbar .e-tbar-btn .e-icons,
            .e-grid .e-toolbar .e-tbar-btn .e-tbar-btn-text {
                color: var(--fg) !important;
                background: transparent !important;
            }

            .e-grid .e-toolbar .e-btn .e-btn-icon,
            .e-grid .e-toolbar .e-tbar-btn .e-icons {
                margin-inline-end: 8px !important;
            }

        /* Champ de recherche dans la toolbar */
        .e-grid .e-toolbar .e-input-group,
        .e-grid .e-toolbar .e-input-group .e-input,
        .e-grid .e-toolbar .e-input-group input {
            background: #0f1a2b !important;
            color: var(--fg) !important;
            border-color: var(--line) !important;
        }

            .e-grid .e-toolbar .e-input-group input::placeholder {
                color: var(--muted) !important;
            }

            .e-grid .e-toolbar .e-input-group .e-clear-icon,
            .e-grid .e-toolbar .e-input-group .e-search-icon {
                color: var(--fg) !important;
            }

    /* ---- FilterBar : cellule sombre, champ clair texte foncé ---- */
    .e-grid td.e-filterbarcell {
        background: transparent !important;
        border-color: var(--line) !important;
        padding: 6px !important;
    }

        .e-grid td.e-filterbarcell .e-input-group,
        .e-grid td.e-filterbarcell .e-input-group .e-input,
        .e-grid td.e-filterbarcell .e-input-group input,
        .e-grid td.e-filterbarcell input[type="text"],
        .e-grid td.e-filterbarcell input[type="search"] {
            background: #eef3fb !important; /* champ clair */
            color: #0b1220 !important; /* texte foncé */
            border: 1px solid var(--line) !important;
            border-radius: 8px !important;
        }

        .e-grid td.e-filterbarcell input::placeholder {
            color: #55657f !important;
        }

        .e-grid td.e-filterbarcell .e-input-group .e-input:focus,
        .e-grid td.e-filterbarcell input:focus {
            outline: none !important;
            border-color: var(--accent) !important;
            box-shadow: 0 0 0 2px rgba(89,178,255,.25) !important;
            background: #f5f9ff !important;
        }
        /* Dropdown/DDL dans la FilterBar */
        .e-grid td.e-filterbarcell .e-dropdownlist,
        .e-grid td.e-filterbarcell .e-ddl,
        .e-grid td.e-filterbarcell .e-control-wrapper {
            background: #eef3fb !important;
            color: #0b1220 !important;
            border: 1px solid var(--line) !important;
            border-radius: 8px !important;
        }

            .e-grid td.e-filterbarcell .e-input-group-icon,
            .e-grid td.e-filterbarcell .e-clear-icon,
            .e-grid td.e-filterbarcell .e-ddl .e-input-group-icon {
                color: #0b1220 !important;
            }

    /* ---- Pager ---- */
    .e-grid .e-gridpager {
        background: #0b1628 !important;
        color: var(--fg) !important;
        border-color: var(--line) !important;
    }

        .e-grid .e-gridpager .e-numericitem.e-active,
        .e-grid .e-gridpager .e-numericitem:hover {
            background: var(--accent-soft) !important;
            color: var(--fg) !important;
        }

    /* ---- Checkbox ---- */
    .e-grid .e-checkbox-wrapper .e-frame {
        border-color: var(--line) !important;
    }

        .e-grid .e-checkbox-wrapper .e-frame.e-check {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
        }

    /* ---- Popups liés au Grid (menus/choosers/filters) ---- */
    .e-grid .e-popup,
    .e-grid .e-dialog,
    .e-grid .e-columnmenu,
    .e-grid .e-filter-popup {
        background: #0f1a2b !important;
        color: var(--fg) !important;
        border-color: var(--line) !important;
    }

        .e-grid .e-popup .e-list-parent,
        .e-grid .e-popup .e-item {
            background: transparent !important;
            color: var(--fg) !important;
        }

            .e-grid .e-popup .e-item.e-active,
            .e-grid .e-popup .e-item:hover {
                background: #0b1628 !important;
            }






/* Topbar: doit rester sous la modale & toast */
.ps-topbar, .e-toolbar.ps-topbar {
    z-index: 100; /* suffisant pour passer au-dessus du contenu, mais sous modale */
}

/* Syncfusion Dialog + backdrop – au-dessus du bandeau */
.e-dlg-overlay {
    position: fixed; /* garantit la couverture écran */
    z-index: 1050 !important; /* backdrop au-dessus du topbar */
}

.e-dialog.e-popup {
    z-index: 1060 !important; /* fenêtre au-dessus du backdrop */
}

/* Toasts – encore au-dessus de la modale si tu veux qu’ils restent visibles */
.e-toast-container {
    position: fixed; /* hors flux & hors conteneurs transformés */
    z-index: 1080 !important;
}

/* (Optionnel) Si tu utilises Bootstrap modals ailleurs, garde la cohérence */
.modal-backdrop {
    z-index: 1050;
}

.modal {
    z-index: 1060;
}
/* Blazored.Toast : container global */
.blazored-toast-container {
    position: fixed; /* garantit la sortie des contextes parents */
    z-index: 1080 !important; /* au-dessus du bandeau et de la modale */
}

/* (optionnel) si tu constates des clics qui « passent à travers » */
.blazored-toast {
    pointer-events: auto;
}

/* =========================
   Cards navigation grid
   ========================= */
.ps-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.ps-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--line);
    background: #0e1116;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    text-align: left;
}

    .ps-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0,0,0,.25);
        border-color: #2b3445;
    }

    .ps-card img {
        width: 28px;
        height: 28px;
        opacity: .9;
    }

.ps-card-title {
    font-weight: 700;
}

.ps-card-sub {
    opacity: .7;
    font-size: .9rem;
}

.ps-card-group {
    background: linear-gradient(180deg,#0f1320 0%, #0b0e16 100%);
}


/* Sidebar details → n'affiche que le summary cliquable */
.ps-nav .ps-nav-group > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 10px;
    list-style: none; /* supprime le marker */
}

.ps-nav .ps-nav-group[open] > summary {
    background: #0f1320;
}

.ps-nav .ps-nav-group > summary img {
    width: 22px;
    height: 22px;
}


/* Masquer le marker standard */
.ps-nav .ps-nav-group > summary::marker {
    content: "";
}


/* Optionnel : ajouter un caret custom */
/*.ps-nav .ps-nav-group > summary::before {
    content: "▶";
    font-size: 0.8rem;
    margin-right: 6px;
    transition: transform .2s ease;
}

.ps-nav .ps-nav-group[open] > summary::before {
    transform: rotate(90deg);
}*/

/* ===== Reservation page: rendre les libellés lisibles ===== */
.reservation .form-label {
    color: var(--fg, #0f172a) !important; /* force la couleur de texte principale */
    opacity: 1; /* annule d’éventuelle atténuation */
}

/* (optionnel) harmonise le header et les champs */
.reservation .card-header {
    color: var(--fg, #0f172a);
}

.reservation .form-control,
.reservation .form-select {
    color: var(--fg, #0f172a);
    background: var(--surface, #fff);
    border-color: var(--line, #d0d5dd);
}

    .reservation .form-control:focus,
    .reservation .form-select:focus {
        border-color: #8cc7ff;
        box-shadow: 0 0 0 .25rem rgba(140,199,255,.25);
    }

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* =========================
   Auth (Identity) - Dark Theme
   ========================= */
.background-page.login { /* neutralise l'ancien fond "nuages" */
    background: none !important;
}

.auth {
    min-height: 100dvh;
    background: var(--bg, #0b0e12);
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(480px, 92vw);
    background: linear-gradient(180deg, rgba(17,22,29,.92) 0%, rgba(12,16,23,.94) 100%);
    border: 1px solid var(--line, #1f2a3a);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    color: var(--fg, #e7eefc);
}

.auth-title {
    margin: 0 0 14px 0;
    line-height: 1.15;
    color: var(--fg, #e7eefc);
}

    .auth-title em {
        color: #9cc7ff;
        font-style: normal;
    }

    .auth-title span {
        font-weight: 700;
    }

.auth-input.form-control {
    background: #0f1624;
    border: 1px solid var(--line, #243247);
    color: var(--fg, #e7eefc);
    caret-color: var(--fg, #e7eefc);
}

    .auth-input.form-control:focus {
        background: #0f1624;
        border-color: #2f87ff;
        box-shadow: 0 0 0 .2rem rgba(47,135,255,.15);
        color: var(--fg, #e7eefc);
    }

/* labels des form-floating visibles en dark */
.form-floating > .auth-input ~ label.auth-label {
    color: #9aa8bd;
}

.form-floating > .auth-input:focus ~ label.auth-label,
.form-floating > .auth-input:not(:placeholder-shown) ~ label.auth-label {
    color: #cfe1ff;
}

/* checkbox */
.auth-check {
    border-color: var(--line, #243247);
    background: #0f1624;
}

    .auth-check:checked {
        background-color: #2f87ff;
        border-color: #2f87ff;
    }

.btn-auth-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(90deg, #2f87ff, #6aa7ff);
    border: 1px solid #2f87ff;
    color: #06101f;
    font-weight: 700;
    letter-spacing: .2px;
}

    .btn-auth-primary:hover {
        filter: brightness(1.05);
    }

.auth-plane {
    width: 28px;
    height: 28px;
    display: block;
}

/* liens sous le bouton */
.auth-links {
    text-align: center;
    margin-top: 14px;
}

.auth-link {
    color: #9cc7ff;
    text-decoration: none;
}

    .auth-link:hover {
        text-decoration: underline;
    }

/* pastille "Visite" */
.btn-visit {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: var(--myorange, #f7ad2f);
    color: #0b0e12;
    text-decoration: none;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

    .btn-visit:hover {
        filter: brightness(1.05);
    }

/* Schedule editor */
.custom-editor .e-float-input,
.custom-editor .e-float-input input,
.custom-editor textarea {
    width: 100%;
}

.custom-editor .e-float-input {
    margin-top: 12px;
}

.custom-editor input[readonly] {
    background: #0f1522;
    opacity: .9;
}


/* Scheduler / Dialog header (mobile) — flèche visible, titre tronqué, bouton Sauver visible */
@media (max-width: 600px) {

    /* Conteneur du header */
    .e-device .e-dlg-header-content {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        /* Réserve de la place à droite pour "Sauver" + un peu de marge à gauche pour la flèche */
        padding: 10px 56px 10px 35px !important; /* haut droite bas gauche */
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important; /* évite les rognages */
    }

        /* Flèche (1er enfant) : ne rétrécit pas + zone de clic confortable */
        .e-device .e-dlg-header-content > :first-child {
            flex: 0 0 auto !important;
            min-width: 45px !important;
            min-height: 40px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

    /* Titre : prend l'espace restant et se tronque proprement */
    .e-device .e-dlg-header,
    .e-device .e-dlg-header .e-headertext {
        flex: 1 1 auto !important;
        min-width: 0 !important; /* nécessaire pour l’ellipsis en flex */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(13px, 3.0vw, 16px) !important;
        line-height: 1.2 !important;
    }

    /* Bouton "Sauver" (dernier enfant) : épinglé à droite, toujours cliquable */
    .e-device .e-dlg-header-content > :last-child {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        flex: 0 0 auto !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Option utile : cache l’icône "fermer" (X) pour libérer de la place sur mobile */
    .e-device .e-dlg-closeicon-btn {
        display: none !important;
    }
}
/* =========================================================
   THEME FIX — Navy Aéro (dark) + Light overrides forts
   (à coller TOUT EN BAS pour battre les couleurs figées)
   ========================================================= */

/* --- DARK "Navy Aéro" : nouveaux tokens (plus doux) --- */
:root[data-theme="dark"] {
    --bg: #0f1726; /* fond page navy doux */
    --bg-soft: #121d31; /* surfaces par défaut */
    --surface: #101a2b; /* cartes */
    --panel: #0e1c2e; /* topbars/headers */
    --line: #23324a;
    --fg: #e6eefc;
    --muted: #9fb0c8;
    --accent: #39a7ff;
    --accent-soft: #143a60;
    --shadow-rgb: 3, 12, 26;
    /* variantes "cards mobiles" */
    --card-slate: #162338;
    --card-teal-1: #113440;
    --card-teal-2: #0f2c39;
    --card-green: #123528;
    --card-cyan: #0f2a3a;
    --chip-mint: #1b3941;
    --chip-ink: #cfe8ee;
    --tab-pill: #152a44;
    --tab-ink: #a9c9ff;
    --tab-underline: #39a7ff;
}

/* -------------------------
   RÉ-OVERRIDES SIDEBAR/TOPBAR
   ------------------------- */
:root[data-theme="light"] .ps-sidebar {
    background: linear-gradient(180deg,#f7f9fd 0%,#eef3fb 100%) !important;
    border-right: 1px solid var(--line) !important;
}

:root[data-theme="dark"] .ps-sidebar {
    background: linear-gradient(180deg,#142039 0%,#0f1a2e 100%) !important;
    border-right: 1px solid var(--line) !important;
}

/* Topbar */
:root[data-theme="light"] .ps-topbar {
    background: #eaf1fb !important;
    border-bottom: 1px solid var(--line) !important;
}

:root[data-theme="dark"] .ps-topbar {
    background: linear-gradient(180deg, var(--panel) 0%, #0f1d33 100%) !important;
    border-bottom: 1px solid var(--line) !important;
}

/* Group summary (écrase #0c1626) */
:root[data-theme="light"] .ps-nav-group > summary {
    background: #f3f7fd !important;
}

:root[data-theme="dark"] .ps-nav-group > summary {
    background: #15253f !important;
}

:root[data-theme="dark"] .ps-nav-group[open] > summary {
    background: #183050 !important;
}

/* -------------------------
   RÉ-OVERRIDES CARDS
   (bat .ps-card { background:#0e1116; ... })
   ------------------------- */
:root[data-theme="light"] .ps-card {
    background: var(--card-slate) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 1px 2px rgba(12, 24, 48, .06) !important;
}


:root[data-theme="dark"] .ps-card:hover {
    background: #15243e !important;
    border-color: #2a3e5e !important;
    box-shadow: 0 12px 30px rgba(var(--shadow-rgb), .45) !important;
}

/* variantes couleurs claires */
:root[data-theme="light"] .ps-card.teal-1 {
    background: var(--card-teal-1) !important;
}

:root[data-theme="light"] .ps-card.teal-2 {
    background: var(--card-teal-2) !important;
}

:root[data-theme="light"] .ps-card.green {
    background: var(--card-green) !important;
}

:root[data-theme="light"] .ps-card.cyan {
    background: var(--card-cyan) !important;
}

/* chips */
:root[data-theme="light"] .ps-card .ps-chip {
    background: var(--chip-mint) !important;
    color: var(--chip-ink) !important;
}

:root[data-theme="dark"] .ps-card .ps-chip {
    background: var(--chip-mint) !important;
    color: var(--chip-ink) !important;
}

/* group gradient (bat #0f1320/#0b0e16) */
:root[data-theme="light"] .ps-card-group {
    background: linear-gradient(180deg,#f6f9ff 0%, #eef3fb 100%) !important;
}

:root[data-theme="dark"] .ps-card-group {
    background: linear-gradient(180deg,#13233b 0%, #0f1a2e 100%) !important;
}

/* -------------------------
   RÉ-OVERRIDES TABS
   ------------------------- */
:root[data-theme="light"] .ps-tab {
    background: var(--bg-soft) !important;
    border: 1px solid var(--line) !important;
    color: var(--fg) !important;
}


    :root[data-theme="light"] .ps-tab.active {
        background: var(--tab-pill) !important;
        color: var(--tab-ink) !important;
    }

:root[data-theme="dark"] .ps-tab.active {
    background: var(--tab-pill) !important;
    color: var(--tab-ink) !important;
}

:root[data-theme="light"] .ps-tab.active::after {
    background: var(--tab-underline) !important;
}

:root[data-theme="dark"] .ps-tab.active::after {
    background: var(--tab-underline) !important;
}

/* -------------------------
   RÉ-OVERRIDES SF GRID (bat #0b1628 & co)
   ------------------------- */
:root[data-theme="light"] .e-grid .e-gridheader,
:root[data-theme="light"] .e-grid .e-headercontent {
    background: #f0f5fd !important;
}

:root[data-theme="dark"] .e-grid .e-gridheader,
:root[data-theme="dark"] .e-grid .e-headercontent {
    background: #13233b !important;
}

:root[data-theme="light"] .e-grid .e-toolbar,
:root[data-theme="light"] .e-grid .e-toolbar .e-toolbar-items {
    background: #eaf1fb !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .e-grid .e-toolbar,
:root[data-theme="dark"] .e-grid .e-toolbar .e-toolbar-items {
    background: #0f2035 !important;
    border-color: var(--line) !important;
}

/* Pager (écrase #0b1628) */
:root[data-theme="light"] .e-grid .e-gridpager {
    background: #eaf1fb !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .e-grid .e-gridpager {
    background: #0f2035 !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

/* Filterbar inputs : clair en light, sombre en dark */
:root[data-theme="light"] .e-grid td.e-filterbarcell .e-input-group,
:root[data-theme="light"] .e-grid td.e-filterbarcell input {
    background: #ffffff !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
}

:root[data-theme="dark"] .e-grid td.e-filterbarcell .e-input-group,
:root[data-theme="dark"] .e-grid td.e-filterbarcell input {
    background: #0f1a2b !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
}

/* -------------------------
   RÉ-OVERRIDES TOP ACTION LINKS / BURGER
   ------------------------- */
:root[data-theme="light"] .ps-burger,
:root[data-theme="light"] .ps-top-actions .ps-link {
    color: var(--fg) !important;
}

:root[data-theme="dark"] .ps-burger,
:root[data-theme="dark"] .ps-top-actions .ps-link {
    color: var(--fg) !important;
}

/* -------------------------
   AUTH
   ------------------------- */
:root[data-theme="dark"] .auth-card {
    background: linear-gradient(180deg, rgba(18,29,49,.96) 0%, rgba(15,24,42,.96) 100%) !important;
    border: 1px solid var(--line) !important;
}

:root[data-theme="light"] .auth-card {
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250,253,255,.98) 100%) !important;
    border: 1px solid var(--line) !important;
}
/* =========================
   FIX LIGHT — SfGrid toolbar inputs (DateRangePicker, search, etc.)
   À coller TOUT EN BAS du fichier
   ========================= */
:root[data-theme="light"] .e-grid .e-toolbar .e-control-wrapper,
:root[data-theme="light"] .e-grid .e-toolbar .e-input-group,
:root[data-theme="light"] .e-grid .e-toolbar .e-date-range-wrapper,
:root[data-theme="light"] .e-grid .e-toolbar .e-control-container,
:root[data-theme="light"] .e-grid .e-toolbar .e-date-range-container {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
}

    :root[data-theme="light"] .e-grid .e-toolbar .e-input-group input,
    :root[data-theme="light"] .e-grid .e-toolbar input[type="text"],
    :root[data-theme="light"] .e-grid .e-toolbar input[type="search"] {
        background: #ffffff !important;
        color: var(--fg) !important; /* #0a1020 */
    }

        :root[data-theme="light"] .e-grid .e-toolbar .e-input-group input::placeholder {
            color: var(--muted) !important; /* gris bleuté */
        }

    :root[data-theme="light"] .e-grid .e-toolbar .e-input-group .e-input-group-icon,
    :root[data-theme="light"] .e-grid .e-toolbar .e-input-group .e-clear-icon,
    :root[data-theme="light"] .e-grid .e-toolbar .e-input-group .e-search-icon {
        color: var(--fg) !important;
    }

    /* focus joli en light */
    :root[data-theme="light"] .e-grid .e-toolbar .e-input-group .e-input:focus,
    :root[data-theme="light"] .e-grid .e-toolbar input:focus {
        outline: none !important;
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 2px rgba(47,122,255,.18) !important;
    }


/* =========================================================
   DARK — Cards plus claires + palette variée
   (à coller TOUT EN BAS)
   ========================================================= */
:root[data-theme="dark"] {
    /* surfaces plus lumineuses */
    --surface: #17243a; /* fond des cards par défaut ( + clair ) */
    --panel: #14263e;
    --line: #2a3b59;
    --shadow-rgb: 4,14,30;
    /* variantes colorées plus lisibles */
    --card-slate: #1b2a45; /* neutre bleu-gris */
    --card-teal-1: #1a3e49; /* teal doux */
    --card-teal-2: #144b57; /* teal un peu plus vif */
    --card-green: #1a4334; /* vert pin */
    --card-cyan: #173e55; /* cyan bleuté */
    --card-blue: #1a2f66; /* bleu */
    --card-indigo: #252b6a; /* indigo */
    --card-violet: #3a2a63; /* violet */
    --card-amber: #47320f; /* ambre chaud (pour “argent/solde” par ex.) */

    --chip-mint: rgba(255,255,255,.085); /* pastille plus claire mais soft */
    --chip-ink: #e7f2ff;
}



    /* Pastille/icône dans la card (plus lisible) */
    :root[data-theme="dark"] .ps-card .ps-chip {
        background: var(--chip-mint) !important;
        color: var(--chip-ink) !important;
    }

    /* =======================
   Variantes colorées
   ======================= */
    /* Neutre (par défaut via --surface), Slate et déclinaisons existantes */
    :root[data-theme="dark"] .ps-card.slate {
        background: var(--card-slate) !important;
    }

    :root[data-theme="dark"] .ps-card.teal-1 {
        background: var(--card-teal-1) !important;
    }

    :root[data-theme="dark"] .ps-card.teal-2 {
        background: var(--card-teal-2) !important;
    }

    :root[data-theme="dark"] .ps-card.green {
        background: var(--card-green) !important;
    }

    :root[data-theme="dark"] .ps-card.cyan {
        background: var(--card-cyan) !important;
    }

    /* Nouvelles variantes (pour varier les sections) */
    :root[data-theme="dark"] .ps-card.blue {
        background: var(--card-blue) !important;
    }

    :root[data-theme="dark"] .ps-card.indigo {
        background: var(--card-indigo) !important;
    }

    :root[data-theme="dark"] .ps-card.violet {
        background: var(--card-violet) !important;
    }

    :root[data-theme="dark"] .ps-card.amber {
        background: var(--card-amber) !important;
    }



    /* Variante “group” plus claire */
    :root[data-theme="dark"] .ps-card-group {
        background: linear-gradient(180deg,#162a45 0%, #0f1f34 100%) !important;
    }
/* =========================================================
   DARK — Cards plus claires + sans color-mix()
   ========================================================= */
:root[data-theme="dark"] {
    /* tokens */
    --surface: #17243a; /* base */
    --surface-raise: #1b2c49; /* card */
    --surface-hover: #213556; /* card:hover */
    --panel: #14263e;
    --line: #2a3b59;
    --border-65: rgba(42, 59, 89, .65);
    --border-80: rgba(42, 59, 89, .80);
    --shadow-rgb: 4,14,30;
    /* variantes colorées (fixes) */
    --card-slate: #1b2a45;
    --card-teal-1: #1a3e49;
    --card-teal-2: #144b57;
    --card-green: #1a4334;
    --card-cyan: #173e55;
    --card-blue: #1a2f66;
    --card-indigo: #252b6a;
    --card-violet: #3a2a63;
    --card-amber: #47320f;
    --chip-mint: rgba(255,255,255,.085);
    --chip-ink: #e7f2ff;
}

    /* Card par défaut : plus lumineuse */
    :root[data-theme="dark"] .ps-card {
        background: linear-gradient(180deg, var(--surface-raise) 0%, var(--surface) 100%) !important;
        border: 1px solid var(--border-65) !important;
        box-shadow: 0 12px 28px rgba(var(--shadow-rgb), .28) !important;
    }

        :root[data-theme="dark"] .ps-card:hover {
            background: var(--surface-hover) !important;
            border-color: var(--border-80) !important;
            box-shadow: 0 16px 36px rgba(var(--shadow-rgb), .40) !important;
        }

        /* Pastille/icône */
        :root[data-theme="dark"] .ps-card .ps-chip {
            background: var(--chip-mint) !important;
            color: var(--chip-ink) !important;
        }

        /* Variantes colorées */
        :root[data-theme="dark"] .ps-card.slate {
            background: var(--card-slate) !important;
        }

        :root[data-theme="dark"] .ps-card.teal-1 {
            background: var(--card-teal-1) !important;
        }

        :root[data-theme="dark"] .ps-card.teal-2 {
            background: var(--card-teal-2) !important;
        }

        :root[data-theme="dark"] .ps-card.green {
            background: var(--card-green) !important;
        }

        :root[data-theme="dark"] .ps-card.cyan {
            background: var(--card-cyan) !important;
        }

        :root[data-theme="dark"] .ps-card.blue {
            background: var(--card-blue) !important;
        }

        :root[data-theme="dark"] .ps-card.indigo {
            background: var(--card-indigo) !important;
        }

        :root[data-theme="dark"] .ps-card.violet {
            background: var(--card-violet) !important;
        }

        :root[data-theme="dark"] .ps-card.amber {
            background: var(--card-amber) !important;
        }

        /* Liseré léger sur les variantes */
        :root[data-theme="dark"] .ps-card.slate,
        :root[data-theme="dark"] .ps-card.teal-1,
        :root[data-theme="dark"] .ps-card.teal-2,
        :root[data-theme="dark"] .ps-card.green,
        :root[data-theme="dark"] .ps-card.cyan,
        :root[data-theme="dark"] .ps-card.blue,
        :root[data-theme="dark"] .ps-card.indigo,
        :root[data-theme="dark"] .ps-card.violet,
        :root[data-theme="dark"] .ps-card.amber {
            border: 1px solid var(--border-65) !important;
        }

    /* Group plus clair */
    :root[data-theme="dark"] .ps-card-group {
        background: linear-gradient(180deg,#162a45 0%, #0f1f34 100%) !important;
    }

/* =========================================================
   LIGHT — plus contrasté (icônes blanches visibles)
   ========================================================= */
:root[data-theme="light"] {
    /* surfaces un peu plus foncées que ta version précédente */
    --bg: #e9eff8; /* fond global */
    --bg-soft: #e1e9f5; /* surfaces/nav */
    --line: #bcc9df; /* séparateurs */
    --fg: #0a1020;
    --muted: #4b5976;
    --accent: #2f7aff;
    --accent-soft: #d4e1ff;
    /* cards plus lisibles */
    --card-slate: #d6e0f1; /* neutre */
    --card-teal-1: #d0e8ec;
    --card-teal-2: #c8e1ea;
    --card-green: #d6eddc;
    --card-cyan: #cfe4f6;
    /* pastille d’icône dans card (fond foncé + icône blanche) */
    --chip-mint: #2b4c7e;
    --chip-ink: #ffffff;
    /* tabs */
    --tab-pill: #d6e3ff;
    --tab-ink: #153a8c;
    --tab-underline: #2f7aff;
}

    /* ---------- Cards (fond + bord + hover) ---------- */
    :root[data-theme="light"] .ps-card {
        background: var(--card-slate) !important;
        border: 1px solid #b7c6dc !important;
        box-shadow: 0 2px 8px rgba(12, 24, 48, .10) !important;
    }

        :root[data-theme="light"] .ps-card:hover {
            background: #cfd9ee !important;
            border-color: #a9bad6 !important;
            box-shadow: 0 6px 16px rgba(12, 24, 48, .16) !important;
        }
        /* pastille d’icône (pour tes pictos blancs) */
        :root[data-theme="light"] .ps-card .ps-chip {
            background: var(--chip-mint) !important;
            color: var(--chip-ink) !important;
        }

        /* variantes (si tu utilises .teal-1/.green/...) */
        :root[data-theme="light"] .ps-card.teal-1 {
            background: var(--card-teal-1) !important;
        }

        :root[data-theme="light"] .ps-card.teal-2 {
            background: var(--card-teal-2) !important;
        }

        :root[data-theme="light"] .ps-card.green {
            background: var(--card-green) !important;
        }

        :root[data-theme="light"] .ps-card.cyan {
            background: var(--card-cyan) !important;
        }

    /* ---------- Sidebar items : bloc sombre derrière les icônes blanches ---------- */
    :root[data-theme="light"] .ps-nav-item {
        background: var(--bg-soft) !important;
        border: 1px solid var(--line) !important;
    }

        :root[data-theme="light"] .ps-nav-item img {
            background: rgba(15, 34, 64, .14); /* petit carré sombre */
            border-radius: 8px;
            padding: 6px;
            width: 24px;
            height: 24px;
        }
        /* hover plus contrasté */
        :root[data-theme="light"] .ps-nav-item:hover {
            background: #d4e1ff !important;
            border-color: #98b5ff !important;
        }

    /* ---------- Tabs (pills) ---------- */
    :root[data-theme="light"] .ps-tab {
        background: #e3eaf6 !important;
        border: 1px solid var(--line) !important;
        color: var(--fg) !important;
    }

        :root[data-theme="light"] .ps-tab.active {
            background: var(--tab-pill) !important;
            color: var(--tab-ink) !important;
        }

            :root[data-theme="light"] .ps-tab.active::after {
                background: var(--tab-underline) !important;
            }

    /* ---------- Topbar & Group ---------- */
    :root[data-theme="light"] .ps-topbar {
        background: #e3eaf6 !important;
        border-bottom: 1px solid var(--line) !important;
    }

    :root[data-theme="light"] .ps-nav-group > summary {
        background: #e0e9f8 !important;
    }

    /* ---------- SfGrid light : lignes/hover un peu plus foncés ---------- */
    :root[data-theme="light"] .e-grid .e-gridcontent,
    :root[data-theme="light"] .e-grid .e-table,
    :root[data-theme="light"] .e-grid .e-rowcell {
        background: #eef3fb !important;
        border-color: #c7d3e8 !important;
    }

    :root[data-theme="light"] .e-grid .e-row:hover .e-rowcell {
        background: #e0e9f9 !important;
    }

    :root[data-theme="light"] .e-grid .e-gridheader,
    :root[data-theme="light"] .e-grid .e-headercontent {
        background: #e3eaf6 !important;
    }

    :root[data-theme="light"] .e-grid .e-toolbar,
    :root[data-theme="light"] .e-grid .e-toolbar .e-toolbar-items {
        background: #e3eaf6 !important;
        border-color: var(--line) !important;
    }

/* Topbar en grille : gauche / centre / droite */
.ps-topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

/* centre parfaitement */
.ps-top-title {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

/* groupe de droite */
.ps-right-actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Topbar > lien Aide : sans soulignement, pointeur au survol */
.ps-topbar .ps-link {
    color: var(--fg);
    text-decoration: none;
}

    .ps-topbar .ps-link:hover {
        cursor: pointer;
        color: var(--accent);
    }

    /* accessibilité : focus visible sans souligné */
    .ps-topbar .ps-link:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }


/* bouton icône Logout */
.ps-icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--fg);
    padding: 0;
}

    .ps-icon-btn:hover {
        background: var(--accent-soft);
    }

    .ps-icon-btn img {
        width: 20px;
        height: 20px;
        filter: none;
    }

/* =========================================================
   LIGHT — Menu plus contrasté (icônes blanches visibles) + hover
   ========================================================= */
:root[data-theme="light"] {
    --nav-item-bg: #d3ddef; /* un cran plus foncé */
    --nav-item-border: #b7c6dc;
    --nav-item-hover-bg: #c6d3eb; /* hover */
    --nav-item-hover-border: #9fb2d3;
    --nav-item-active-bg: #c4d2ea; /* ouvert/sélectionné */
    --nav-item-active-bd: #8ea7cc;
}

    /* Items simples */
    :root[data-theme="light"] .ps-nav-item {
        background: var(--nav-item-bg) !important;
        border: 1px solid var(--nav-item-border) !important;
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    }

        :root[data-theme="light"] .ps-nav-item:hover {
            background: var(--nav-item-hover-bg) !important;
            border-color: var(--nav-item-hover-border) !important;
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(12,24,48,.10);
        }

        :root[data-theme="light"] .ps-nav-item:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

    /* Groupes (summary) */
    :root[data-theme="light"] .ps-nav-group {
        border-color: var(--nav-item-border) !important;
    }

        :root[data-theme="light"] .ps-nav-group > summary {
            background: var(--nav-item-bg) !important;
        }

            :root[data-theme="light"] .ps-nav-group > summary:hover {
                background: var(--nav-item-hover-bg) !important;
            }

        :root[data-theme="light"] .ps-nav-group[open] {
            border-color: var(--nav-item-active-bd) !important;
        }

            :root[data-theme="light"] .ps-nav-group[open] > summary {
                background: var(--nav-item-active-bg) !important;
            }

        /* IMPORTANT : on annule le "chip" des icônes ajouté précédemment */
        :root[data-theme="light"] .ps-nav-item img,
        :root[data-theme="light"] .ps-nav-group > summary img {
            width: 22px;
            height: 22px;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            opacity: .95;
        }

/* =========================================================
   QuickGrid scaffold (page /societes) — respect des thèmes
   ========================================================= */

/* Titre et conteneur */
.scaffold h1 {
    color: var(--fg);
    margin-bottom: .5rem;
}

.scaffold {
    background: transparent;
}

/* Liens “Create/Edit/Details/Delete” */
:root[data-theme="dark"] .scaffold .scaffold-link {
    color: #9ec5ff;
    text-decoration: none;
}

    :root[data-theme="dark"] .scaffold .scaffold-link:hover {
        color: #c7dcff;
        text-decoration: underline;
    }

:root[data-theme="light"] .scaffold .scaffold-link {
    color: #0d6efd;
    text-decoration: none;
}

    :root[data-theme="light"] .scaffold .scaffold-link:hover {
        text-decoration: underline;
    }

/* Table QuickGrid */
.scaffold .qg {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 8px; /* si le markup rend <table>, arrondi visuel */
    overflow: clip; /* garde l’arrondi sur thead */
}

    /* En-tête */
    .scaffold .qg thead th {
        padding: .6rem .75rem;
        text-align: left;
        font-weight: 700;
        border-bottom: 1px solid var(--line);
    }

:root[data-theme="dark"] .scaffold .qg thead th {
    background: #13233b;
}

:root[data-theme="light"] .scaffold .qg thead th {
    background: #e3eaf6;
}

/* Cells */
.scaffold .qg td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--fg);
}

/* Hover ligne */
:root[data-theme="dark"] .scaffold .qg tbody tr:hover td {
    background: #0f2035;
}

:root[data-theme="light"] .scaffold .qg tbody tr:hover td {
    background: #e0e9f9;
}

/* Petits détails d’accessibilité */
.scaffold .qg a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =========================================================
   DARK — Menu : hover + états lisibles
   ========================================================= */
/* ---- DARK: hover + actif pour le menu ---- */
:root[data-theme="dark"] {
    --nav-dk-bg: #0f1a2b;
    --nav-dk-bd: #22324d;
    --nav-dk-bg-hover: #15253f;
    --nav-dk-bd-hover: #2a3b59;
    --nav-dk-bg-active: #13233b;
    --nav-dk-bd-active: #2f4b7d;
}

    :root[data-theme="dark"] .ps-nav-group {
        border: 1px solid var(--nav-dk-bd) !important;
        border-radius: 12px;
        overflow: hidden;
    }

        :root[data-theme="dark"] .ps-nav-group > summary {
            background: var(--nav-dk-bg) !important;
            transition: background .15s ease, border-color .15s ease, box-shadow .12s ease, transform .12s ease;
            cursor: pointer;
        }

            :root[data-theme="dark"] .ps-nav-group > summary:hover {
                background: var(--nav-dk-bg-hover) !important;
                transform: translateY(-1px);
                box-shadow: 0 6px 14px rgba(0,0,0,.35);
            }

        :root[data-theme="dark"] .ps-nav-group.active {
            border-color: var(--nav-dk-bd-active) !important;
        }

            :root[data-theme="dark"] .ps-nav-group.active > summary {
                background: var(--nav-dk-bg-active) !important;
            }

/* ---- LIGHT: état actif (on a déjà un hover côté light) ---- */
:root[data-theme="light"] {
    --nav-item-active-bg: #c4d2ea;
    --nav-item-active-bd: #8ea7cc;
}

    :root[data-theme="light"] .ps-nav-group.active {
        border-color: var(--nav-item-active-bd) !important;
    }

        :root[data-theme="light"] .ps-nav-group.active > summary {
            background: var(--nav-item-active-bg) !important;
        }


/* ===== Fix Syncfusion Dialog au-dessus du sidebar ===== */
/* Le wrapper créé par Syncfusion */
.e-dlg-container {
    z-index: 10050 !important;
}

/* L’overlay juste en dessous de la modale */
.e-dlg-overlay {
    z-index: 10040 !important;
}

/* (optionnel) la boîte interne – pas nécessaire mais inoffensif */
.e-dialog.e-popup {
    z-index: 10055 !important;
}

/* Toasts toujours tout en haut */
.blazored-toast-container,
.blazored-toast,
.blazored-toast-container-top-right,
.blazored-toast-container-top-left,
.blazored-toast-container-top-center,
.blazored-toast-container-bottom-right,
.blazored-toast-container-bottom-left,
.blazored-toast-container-bottom-center {
    z-index: 11000 !important;
}




/* Overlay doux (sans color-mix) */
.e-dlg-overlay {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
}

:root[data-theme="dark"] .e-dlg-overlay {
    background: rgba(0,0,0,0.55);
}

/* Boîte (édition Grid) */
.e-edit-dialog.e-dialog.e-popup {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
    overflow: hidden; /* arrondis header/footer */
}

/* Header compact */
.e-edit-dialog .e-dlg-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
}

    .e-edit-dialog .e-dlg-header-content .e-dlg-header {
        margin: 0;
        font-weight: 700;
        letter-spacing: .2px;
        flex: 1 1 auto;
    }

    .e-edit-dialog .e-dlg-header-content .e-dlg-closeicon-btn.e-btn {
        border-radius: 8px;
    }

/* Contenu respirant + scroll propre */
.e-edit-dialog .e-dlg-content {
    padding: 16px 14px;
    max-height: min(72vh, 760px);
    overflow: auto;
    background: var(--bg-soft);
}

/* Footer collé en bas */
.e-edit-dialog .e-footer-content {
    position: sticky;
    bottom: 0;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    padding: 12px 16px;
}

    /* Boutons */
    .e-edit-dialog .e-footer-content .e-btn {
        border-radius: 10px;
        padding: 8px 14px;
    }

        .e-edit-dialog .e-footer-content .e-btn.e-primary {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
        }

            .e-edit-dialog .e-footer-content .e-btn.e-primary:hover {
                filter: brightness(1.05);
            }

/* Champs (TextBox, DropDown, DatePicker, Numeric…) */
.e-edit-dialog .e-control.e-input,
.e-edit-dialog .e-textbox,
.e-edit-dialog .e-dropdownlist,
.e-edit-dialog .e-combobox,
.e-edit-dialog .e-datepicker,
.e-edit-dialog .e-datetimepicker,
.e-edit-dialog .e-numerictextbox,
.e-edit-dialog .e-multiselect,
.e-edit-dialog .e-checkbox-wrapper {
    background: var(--bg);
    border-radius: 12px;
    border-color: var(--line);
}

.e-edit-dialog .e-input-group.e-input-focus,
.e-edit-dialog .e-input-group:not(.e-success):not(.e-error):focus-within {
    box-shadow: 0 0 0 3px var(--accent-soft) inset;
    border-color: var(--accent);
}
/* Labels + messages */
.e-edit-dialog label {
    color: var(--muted);
    font-weight: 600;
}

.e-edit-dialog .e-error,
.e-edit-dialog .validation-message {
    color: #d64545;
}

/* Responsive mobile */
@media (max-width: 576px) {
    .e-edit-dialog.e-dialog.e-popup {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        left: 12px !important;
        right: 12px !important;
    }

    .e-edit-dialog .e-dlg-content {
        max-height: 70vh;
    }
}

/* ===== Stepper — anti-chevauchement & compact ===== */

/* Conteneur stepper : compact, à droite du header */
.e-edit-dialog .e-dlg-header-content .stepper {
    margin-left: auto !important;
    display: flex;
    align-items: center;
    padding: 0 !important;
}

/* Le composant Stepper */
.e-edit-dialog .stepper .e-stepper {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

    /* Désactive tout “trait” décoratif natif */
    .e-edit-dialog .stepper .e-stepper::before,
    .e-edit-dialog .stepper .e-stepper::after {
        content: none !important;
    }

/* Liste des étapes : essaye gap, sinon fallback via + selector */
.e-edit-dialog .stepper .e-steps {
    display: flex;
    align-items: center;
    gap: 10px !important; /* écart principal */
}

.e-edit-dialog .stepper .e-step + .e-step {
    margin-left: 10px !important; /* fallback si gap non appliqué */
}

/* Chaque étape : pas de marges parasites */
.e-edit-dialog .stepper .e-step {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

    /* Connecteur fin, centré verticalement, DERRIÈRE les bulles */
    .e-edit-dialog .stepper .e-step:not(.e-step-last) .e-connector {
        height: 2px !important;
        background: var(--line) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 0 !important;
    }

    /* Bulles : petites, au-dessus du connecteur */
    .e-edit-dialog .stepper .e-step .e-indicator {
        position: relative;
        z-index: 1 !important;
        width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
        border-radius: 50% !important;
        border: 2px solid var(--accent) !important;
        background: var(--accent-soft) !important;
        color: var(--fg) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* États actif / fait */
    .e-edit-dialog .stepper .e-step.e-step-current .e-indicator,
    .e-edit-dialog .stepper .e-step.e-step-done .e-indicator {
        background: var(--accent) !important;
        color: #fff !important;
    }

/* Mode sombre : bulle inactive neutre (pas blanche) */
:root[data-theme="dark"] .e-edit-dialog .stepper .e-step .e-indicator {
    background: rgba(255,255,255,0.12) !important;
    color: #ddd !important;
}

/* Ceinture+bretelles : neutralise tout pseudo-élément résiduel */
.e-edit-dialog .stepper .e-step *::before,
.e-edit-dialog .stepper .e-step *::after {
    box-shadow: none !important;
    border: none !important;
}

/* Layout Schedule editor */
.custom-editor {
    display: grid;
    gap: 12px;
}


/* ===== Qualifications (scopé q-*) ===== */
.q-card {
    max-width: 1000px;
    margin: 2rem auto;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 1.5rem;
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
}

.q-title {
    margin: 0 0 1rem 0;
    color: var(--fg);
}

.q-muted {
    color: var(--muted);
}

.q-form .form-label {
    color: var(--fg);
    opacity: .95;
}

.q-form .form-control,
.q-form .form-select {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
}

    .q-form .form-control:focus,
    .q-form .form-select:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 .2rem rgba(47,122,255,.18);
    }

/* Table responsive + thème */
.q-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    font-size: .95rem;
}

    .q-table thead th {
        text-align: left;
        font-weight: 700;
        padding: .6rem .75rem;
        border-bottom: 1px solid var(--line);
    }

:root[data-theme="dark"] .q-table thead th {
    background: #13233b;
}

:root[data-theme="light"] .q-table thead th {
    background: #e3eaf6;
}

.q-table tbody td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--line);
}

/* État ligne (sans color-mix) */
.q-table tbody tr.is-valid td {
    background: rgba(34,197,94,.12);
}

.q-table tbody tr.is-invalid td {
    background: rgba(239,68,68,.12);
}


/* survol ligne (ne force pas le blanc) */
:root[data-theme="dark"] .q-table tbody tr:hover td {
    background: #0f2035;
}

:root[data-theme="light"] .q-table tbody tr:hover td {
    background: #e0e9f9;
}

.q-actions {
    white-space: nowrap;
}

/* Badges thème */
.q-badge {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
}

.badge-valid {
    background: rgba(34,197,94,.18);
    color: #16a34a;
    border: 1px solid rgba(34,197,94,.35);
}

.badge-invalid {
    background: rgba(239,68,68,.18);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,.35);
}

/* Bouton Syncfusion “small” pour la colonne actions */
.e-btn.e-small {
    padding: 4px 8px;
    font-size: .85rem;
    border-radius: 8px;
}

/* Libellés lisibles dans le dialog */
.e-edit-dialog .form-label.q-label {
    color: var(--fg) !important;
    font-weight: 600;
    opacity: 1;
}

/* Inputs Syncfusion dans le dialog : fond/bord/texte thème */
.e-edit-dialog .e-input-group,
.e-edit-dialog .e-control-wrapper,
.e-edit-dialog .e-input-group input {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

    .e-edit-dialog .e-input-group.e-input-focus,
    .e-edit-dialog .e-input-group:focus-within {
        box-shadow: 0 0 0 .2rem rgba(47,122,255,.18);
        border-color: var(--accent) !important;
    }

/* Icônes calendrier Syncfusion visibles en dark */
:root[data-theme="dark"] .e-edit-dialog .e-input-group-icon,
:root[data-theme="dark"] .e-edit-dialog .e-date-icon,
:root[data-theme="dark"] .e-edit-dialog .e-input-group .e-icons {
    color: var(--fg) !important;
}

/* Champ disabled (Dernier vol) lisible */
.e-edit-dialog .e-disabled .e-input,
.e-edit-dialog .e-disabled input {
    opacity: .85;
    color: var(--muted) !important;
}
/* ===== SfGrid Edit Dialog — Header lisible (dark & light) ===== */
.e-edit-dialog .e-dlg-header-content {
    background: var(--bg-soft) !important;
    border-bottom: 1px solid var(--line) !important;
}

    /* Texte du titre */
    .e-edit-dialog .e-dlg-header-content .e-dlg-header {
        color: var(--fg) !important;
        font-weight: 700;
        opacity: 1 !important; /* lève toute atténuation résiduelle */
    }

    /* Icône (X) de fermeture */
    .e-edit-dialog .e-dlg-header-content .e-dlg-closeicon-btn.e-btn,
    .e-edit-dialog .e-dlg-header-content .e-dlg-closeicon-btn .e-btn-icon {
        color: var(--fg) !important;
    }

        .e-edit-dialog .e-dlg-header-content .e-dlg-closeicon-btn.e-btn:hover {
            background: var(--bg) !important;
            border-color: var(--line) !important;
        }






/* =========================================================
   DARK — Syncfusion MultiSelect dans les dialogs (SfGrid/SfDialog)
   Version finale compacte
   ========================================================= */

/* Harmonise la variable texte du thème Syncfusion dans le dialog */
:root[data-theme="dark"] .e-edit-dialog,
:root[data-theme="dark"] .e-dialog {
    --color-sf-content-text-color: var(--fg) !important;
}

    /* Conteneur + wrapper interne */
    :root[data-theme="dark"] .e-edit-dialog .e-multiselect.e-control-wrapper.e-input-group,
    :root[data-theme="dark"] .e-dialog .e-multiselect.e-control-wrapper.e-input-group,
    :root[data-theme="dark"] .e-edit-dialog .e-multiselect .e-multi-select-wrapper,
    :root[data-theme="dark"] .e-dialog .e-multiselect .e-multi-select-wrapper,
    :root[data-theme="dark"] .e-edit-dialog .e-multi-select-wrapper.e-down-icon,
    :root[data-theme="dark"] .e-dialog .e-multi-select-wrapper.e-down-icon {
        background: var(--bg) !important;
        color: var(--fg) !important;
        border-color: var(--line) !important;
    }

    /* Zone de saisie + placeholder */
    :root[data-theme="dark"] .e-edit-dialog .e-multi-select-wrapper input.e-input,
    :root[data-theme="dark"] .e-dialog .e-multi-select-wrapper input.e-input {
        background: transparent !important;
        color: var(--fg) !important;
    }

        :root[data-theme="dark"] .e-edit-dialog .e-multi-select-wrapper input.e-input::placeholder,
        :root[data-theme="dark"] .e-dialog .e-multi-select-wrapper input.e-input::placeholder {
            color: var(--muted) !important;
        }

    /* Icônes (flèche / clear) */
    :root[data-theme="dark"] .e-edit-dialog .e-multiselect .e-input-group-icon,
    :root[data-theme="dark"] .e-dialog .e-multiselect .e-input-group-icon,
    :root[data-theme="dark"] .e-edit-dialog .e-multiselect .e-clear-icon,
    :root[data-theme="dark"] .e-dialog .e-multiselect .e-clear-icon {
        color: var(--fg) !important;
        opacity: .95 !important;
    }

    /* Texte concaténé + contenu des puces (Syncfusion force aussi -webkit-text-fill-color) */
    :root[data-theme="dark"] .e-edit-dialog .e-multi-select-wrapper .e-delim-values,
    :root[data-theme="dark"] .e-dialog .e-multi-select-wrapper .e-delim-values,
    :root[data-theme="dark"] .e-edit-dialog .e-multi-select-wrapper .e-chipcontent,
    :root[data-theme="dark"] .e-dialog .e-multi-select-wrapper .e-chipcontent {
        color: var(--fg) !important;
        -webkit-text-fill-color: var(--fg) !important;
    }

    /* Puces sélectionnées (mode Box/Default) */
    :root[data-theme="dark"] .e-edit-dialog .e-multiselect .e-chip,
    :root[data-theme="dark"] .e-dialog .e-multiselect .e-chip {
        background: var(--accent-soft) !important;
        color: var(--fg) !important;
        border: 1px solid var(--line) !important;
        border-radius: 10px !important;
    }

/* Popup de sélection */
:root[data-theme="dark"] .e-ddl.e-popup,
:root[data-theme="dark"] .e-multi-select-list.e-popup {
    background: var(--bg-soft) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
}

    :root[data-theme="dark"] .e-ddl.e-popup .e-item {
        color: var(--fg) !important;
    }

        :root[data-theme="dark"] .e-ddl.e-popup .e-item:hover,
        :root[data-theme="dark"] .e-ddl.e-popup .e-item.e-active {
            background: #0f2035 !important;
        }

    /* Cases à cocher du popup */
    :root[data-theme="dark"] .e-ddl.e-popup .e-checkbox-wrapper .e-frame {
        border-color: var(--line) !important;
    }

        :root[data-theme="dark"] .e-ddl.e-popup .e-checkbox-wrapper .e-frame.e-check {
            background: var(--accent) !important;
            border-color: var(--accent) !important;
        }
/* Taille/alignement optionnels */
.ps-icon-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Icône noire en mode clair */
:root[data-theme="light"] .ps-icon-btn img {
    filter: brightness(0);
}

/* Icône inchangée en mode sombre (reste claire) */
:root[data-theme="dark"] .ps-icon-btn img {
    filter: none;
}

/* =========================
   Schedule – Editor dialog (dark)
   ========================= */
:root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
}

    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-header,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-footer-content {
        background: var(--bg-soft);
        color: var(--fg);
        border-color: var(--line);
    }

    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-content {
        background: var(--bg-soft);
        color: var(--fg);
    }

    /* Labels (classiques + float labels Syncfusion) */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog label,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-float-text {
        color: var(--fg);
    }

    /* Inputs / TextBox / DateTime / DropDown */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-control-wrapper,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-input-group,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-textbox,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-datetime-wrapper,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-multi-select-wrapper,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-ddl.e-input-group {
        background: var(--bg);
        color: var(--fg);
        border-color: var(--line);
    }

    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog input.e-input,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog textarea.e-input {
        background: transparent;
        color: var(--fg);
    }

        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog input.e-input::placeholder,
        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog textarea.e-input::placeholder {
            color: var(--muted);
        }

    /* Icônes dans les groupes d’entrée (calendrier, horloge, clear, dropdown) */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-input-group-icon,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-clear-icon,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-ddl .e-input-group-icon {
        color: var(--fg);
        border-color: var(--line);
    }

/* Popup des listes déroulantes */
:root[data-theme="dark"] .e-popup.e-ddl.e-popup-open,
:root[data-theme="dark"] .e-popup.e-multi-select-list-wrapper {
    background: var(--bg);
    border-color: var(--line);
    color: var(--fg);
}

    :root[data-theme="dark"] .e-popup.e-ddl.e-popup-open .e-list-item,
    :root[data-theme="dark"] .e-popup.e-multi-select-list-wrapper .e-list-item {
        background: transparent;
        color: var(--fg);
    }

        :root[data-theme="dark"] .e-popup.e-ddl.e-popup-open .e-list-item.e-hover,
        :root[data-theme="dark"] .e-popup.e-ddl.e-popup-open .e-list-item.e-item-focus {
            background: var(--accent-soft);
        }

/* Checkbox/Recurrence editor */
:root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-checkbox-wrapper .e-frame {
    background: var(--bg);
    border-color: var(--line);
}

:root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-checkbox-wrapper .e-label {
    color: var(--fg);
}

/* Boutons pied de dialog */
:root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-btn {
    background: var(--bg);
    color: var(--fg);
    border-color: var(--line);
}

    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-btn.e-primary {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-btn.e-primary:hover {
            filter: brightness(1.05);
        }
/* =========================
   Schedule – Entête du dialog (dark)
   ========================= */
:root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
}

    /* Barre de titre (supprime le bandeau blanc, fonce l'entête) */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-header-content,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-header {
        background: var(--bg); /* entête sombre */
        color: var(--fg); /* titre lisible */
        border-bottom: 1px solid var(--line);
    }

    /* Bouton de fermeture (croix) — visible et accessible */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-closeicon-btn {
        background: transparent;
        border: 1px solid transparent;
        box-shadow: none;
    }

        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-closeicon-btn .e-btn-icon,
        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-closeicon-btn .e-icons {
            color: var(--fg); /* la croix devient claire sur fond sombre */
            opacity: 0.9;
        }

        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-closeicon-btn:hover {
            background: var(--accent-soft); /* halo discret au survol */
            border-color: var(--line);
        }

        :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-closeicon-btn:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

    /* Contenu sous entête (harmonise fonds/texte) */
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-dlg-content,
    :root[data-theme="dark"] .e-dialog.e-popup.e-schedule-dialog .e-footer-content {
        background: var(--bg-soft);
        color: var(--fg);
        border-top: none;
    }
/* ========================================
   SfDialog (lecture seule) — dark theme
   ======================================== */
:root[data-theme="dark"] .blazor-user-dialog.e-dialog {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
}

/* Entête + bouton X */
:root[data-theme="dark"] .blazor-user-dialog .e-dlg-header-content,
:root[data-theme="dark"] .blazor-user-dialog .e-dlg-header {
    background: var(--bg);
    color: var(--fg);
    border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .blazor-user-dialog .e-dlg-closeicon-btn .e-icons {
    color: var(--fg);
    opacity: 0.9;
}

:root[data-theme="dark"] .blazor-user-dialog .e-dlg-closeicon-btn:hover {
    background: var(--accent-soft);
    border-color: var(--line);
}

/* Corps + pied de la boîte */
:root[data-theme="dark"] .blazor-user-dialog .e-dlg-content,
:root[data-theme="dark"] .blazor-user-dialog .e-footer-content {
    background: var(--bg-soft);
    color: var(--fg);
}

/* Cartes Bootstrap à l’intérieur de la boîte */
:root[data-theme="dark"] .blazor-user-dialog .card {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 12px;
}

:root[data-theme="dark"] .blazor-user-dialog .card-header {
    background: var(--bg);
    color: var(--fg);
    border-bottom: 1px solid var(--line);
}

:root[data-theme="dark"] .blazor-user-dialog .card-body p,
:root[data-theme="dark"] .blazor-user-dialog .card-body .label,
:root[data-theme="dark"] .blazor-user-dialog .card-body li {
    color: var(--fg);
}

/* Liens (ex. “Accéder au livret…”) */
:root[data-theme="dark"] .blazor-user-dialog a {
    color: var(--accent);
    text-decoration: none;
}

    :root[data-theme="dark"] .blazor-user-dialog a:hover {
        text-decoration: underline;
    }

/* Boutons de pied (Supprimer / Annuler / Éditer) */
:root[data-theme="dark"] .blazor-user-dialog .e-btn {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 10px;
}

    :root[data-theme="dark"] .blazor-user-dialog .e-btn.e-primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

/* Optionnel : meilleure lisibilité des séparateurs */
:root[data-theme="dark"] .blazor-user-dialog hr {
    border-color: var(--line);
}

:root {
    --sidebar-w: 260px;
}

/* ===== Desktop ===== */
.ps-layout[data-mode="desktop"] {
    display: flex;
    min-height: 100vh;
}

    /* Base sidebar (sticky) */
    .ps-layout[data-mode="desktop"] .ps-sidebar {
        position: sticky;
        top: 0;
        height: 100dvh;
        overflow: auto;
        min-width: 0; /* indispensable pour autoriser le collapse */
        transition: width .25s ease, flex-basis .25s ease, padding .25s ease, border-width .25s ease;
    }

    /* Ouverte : occupe l'espace */
    .ps-layout[data-mode="desktop"].is-open .ps-sidebar {
        width: var(--sidebar-w);
        flex: 0 0 var(--sidebar-w);
        border-right: 1px solid var(--line);
    }

    /* Fermée : aucun espace réservé -> plus de colonne fantôme */
    .ps-layout[data-mode="desktop"].is-closed .ps-sidebar {
        width: 0;
        flex: 0 0 0;
        padding: 0;
        border-right-width: 0;
        overflow: hidden;
        pointer-events: none; /* évite les clics fantômes */
    }

    /* Contenu prend toujours tout le reste, sans offset */
    .ps-layout[data-mode="desktop"] .ps-main {
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* L’overlay est inutile en desktop */
    .ps-layout[data-mode="desktop"] .ps-overlay {
        display: none !important;
    }

/* ===== Mobile (inchangé, tiroir) ===== */
.ps-layout[data-mode="mobile"] {
    display: block;
}

    .ps-layout[data-mode="mobile"] .ps-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1000;
    }

        .ps-layout[data-mode="mobile"] .ps-sidebar.is-open {
            transform: translateX(0);
        }


/* ===== Stripe ===== */

/* ====== Paiement (container + panel) ====== */



.payment-page {
    padding: 24px;
}

.panel-paiement {
    max-width: 640px;
    margin: 0 auto;
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px 24px 28px;
}

    .panel-paiement .panel-title {
        margin: 0 0 18px 0;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--fg);
    }

    .panel-paiement .actions {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
    }

/* Hôte du Payment Element (l’iframe Stripe à l’intérieur ne prend pas le CSS,
   mais on garde un cadre cohérent autour) */
.pe-host {
    background: transparent;
    border-radius: 12px;
}

/* Petit ajustement du bouton si besoin : on suppose que .btn-primary existe déjà */
.panel-paiement .btn-primary[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
.pay-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 6px 0 16px 0;
}

@media (min-width: 700px) {
    .pay-choices {
        grid-template-columns: 1fr 1fr 2fr;
    }
}

.amount-area {
    margin: 6px 0 14px 0;
}

.amount-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--fg);
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 700px) {
    .amount-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.amount-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}

    .amount-card:hover {
        border-color: var(--accent);
    }

    .amount-card.active {
        background: var(--accent-soft);
        border-color: var(--accent);
    }

    .amount-card.select {
        padding: 6px 10px;
    }

.amount-select {
    width: 100%;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-soft);
    color: var(--fg);
    padding: 0 10px;
}

/* accessibilité */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
/* Centrer le bloc d'actions */
.panel-paiement .actions {
    margin-top: 16px;
    display: flex;
    justify-content: center; /* centré milieu */
}

/* Bouton "Valider et payer" avec le look des cards en primary */
.amount-card.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}

    .amount-card.primary:hover {
        filter: brightness(1.05);
    }

    /* ⬇️ Remplacement safe de color-mix() par un halo box-shadow basé sur --accent-soft */
    .amount-card.primary:focus,
    .amount-card.primary:focus-visible {
        outline: none; /* on neutralise l’outline natif */
        box-shadow: 0 0 0 3px var(--accent-soft); /* halo compatible partout, respecte tes thèmes */
        border-color: var(--accent); /* on garde le bord accentué */
    }

    .amount-card.primary:disabled {
        opacity: .6;
        cursor: not-allowed;
    }


/* Un peu plus généreux pour le CTA */
.pay-cta {
    min-width: 260px;
    padding: 12px 16px;
}

/* Option: plein écran sur mobile  */
@media (max-width: 480px) {
    .pay-cta {
        width: 100%;
    }
}

/* ======= DialogUtility (alert/confirm) — DARK ======= */
:root[data-theme="dark"] .e-dialog.e-popup:not(.e-schedule-dialog) {
    background: var(--bg-soft);
    color: var(--fg);
    border: 1px solid var(--line);
}

    :root[data-theme="dark"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-dlg-header-content,
    :root[data-theme="dark"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-dlg-content,
    :root[data-theme="dark"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-footer-content {
        background: var(--bg-soft);
        color: var(--fg);
        border-color: var(--line);
    }

/* ======= DialogUtility (alert/confirm) — LIGHT ======= */
:root[data-theme="light"] .e-dialog.e-popup:not(.e-schedule-dialog) {
    background: #fff;
    color: #111827; /* gris très foncé */
    border: 1px solid rgba(0,0,0,.12);
}

    :root[data-theme="light"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-dlg-header-content,
    :root[data-theme="light"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-dlg-content,
    :root[data-theme="light"] .e-dialog.e-popup:not(.e-schedule-dialog) .e-footer-content {
        background: #fff;
        color: #111827;
    }


/* ======= Grille: ligne “Aucun enregistrement à afficher” ======= */
/* Dark */
:root[data-theme="dark"] .e-grid .e-emptyrow td {
    color: var(--fg) !important;
    background: transparent !important;
    border-color: var(--line) !important;
}
/* Light */
:root[data-theme="light"] .e-grid .e-emptyrow td {
    color: #111827 !important;
    background: transparent !important;
    border-color: rgba(0,0,0,.08) !important;
}

/* Badges statut qualifications */
.ps-badge{
    display:inline-flex; align-items:center; gap:.4rem;
    border-radius:999px; padding:.15rem .5rem;
    font-weight:700; font-size:.85rem; line-height:1;
    border:1px solid transparent;
}

.badge-valid{
    background:#e6f6ee; border-color:#bdebd0; color:#0a7c39;
}
.badge-warning{
    background:#fff7e6; border-color:#f3d7a6; color:#8a6100;
}
.badge-expired{
    background:#feecec; border-color:#f2b8b8; color:#a12626;
}
.badge-unknown{
    background:var(--accent-soft); border-color:var(--line); color:var(--fg);
}

/* Option: ajuste pour le thème sombre si besoin */
:root[data-theme="dark"] .badge-valid   { background:rgba(34,197,94,.15);  border-color:rgba(34,197,94,.35);  color:#22c55e; }
:root[data-theme="dark"] .badge-warning { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.35); color:#f59e0b; }
:root[data-theme="dark"] .badge-expired { background:rgba(239,68,68,.15);  border-color:rgba(239,68,68,.35);  color:#ef4444; }

/* SfGrid – Filter Bar en mode DARK */
:root[data-theme="dark"] .e-grid .e-filterbarcell .e-input-group,
:root[data-theme="dark"] .e-grid .e-filterbarcell .e-input,
:root[data-theme="dark"] .e-grid .e-filterbarcell input.e-input {
    background: var(--bg) !important; /* ou transparent si tu préfères */
    color: var(--fg) !important;
    border-color: var(--line) !important;
}

    /* Placeholder + icônes (loupe / clear) */
    :root[data-theme="dark"] .e-grid .e-filterbarcell input.e-input::placeholder {
        color: var(--muted) !important;
    }

:root[data-theme="dark"] .e-grid .e-filterbarcell .e-input-group-icon,
:root[data-theme="dark"] .e-grid .e-filterbarcell .e-clear-icon {
    color: var(--muted) !important;
}

/* Focus ring discret (pas de color-mix) */
:root[data-theme="dark"] .e-grid .e-filterbarcell .e-input-group.e-input-focus {
    box-shadow: 0 0 0 2px var(--accent-soft) !important;
}



/* === SfGrid : bouton menu kebab (3 points) === */
.e-grid .e-rowcell .grid-kebab.e-dropdown-btn.e-btn,
.e-grid .e-rowcell .grid-kebab.e-icon-btn.e-btn,
.e-grid .e-rowcell .grid-kebab.e-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 8px;
    border: none !important;
    background: transparent !important; /* enlève le fond blanc */
    box-shadow: none !important;
    color: var(--fg) !important;
}

    /* Hover doux dans les 2 thèmes */
    .e-grid .e-rowcell .grid-kebab.e-btn:hover {
        background: var(--accent-soft) !important;
    }

/* Cache le chevron ▼ ajouté par défaut */
.e-grid .e-rowcell .grid-kebab .e-caret {
    display: none !important;
}

/* Dessine les 3 points en pur CSS (fiable sans police d’icônes) */
.e-grid .e-rowcell .grid-kebab.e-btn::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor; /* trois points verticaux */
}

/* Popup du menu en dark */
:root[data-theme="dark"] .e-dropdown-popup {
    background: var(--bg-soft) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line) !important;
}

    :root[data-theme="dark"] .e-dropdown-popup .e-item:hover,
    :root[data-theme="light"] .e-dropdown-popup .e-item:hover {
        background: var(--accent-soft) !important;
    }

/* Scope au grid avion */
.aircrafts-grid .e-fltrtemp .e-control-wrapper,
.aircrafts-grid .e-fltrtemp .e-input-group,
.aircrafts-grid .e-fltrtemp .e-multi-select-wrapper {
    width: 100%;
    min-width: 0; /* clé: empêche le DDL de forcer la colonne */
}

/* cellule centrée pour l’icône */
.kebab-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* bouton 3 points compact */
.e-dropdown-btn.grid-kebab, .e-btn.grid-kebab {
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
}