/* =========================================================
   Bandeau de verrou collaboratif (lock-banner Stimulus)
   ========================================================= */
.mb-lock-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(90deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 12px;
    padding: 12px 16px;
    margin: 0 0 18px 0;
    color: #92400E;
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
    animation: mb-lock-slide-in 0.25s ease-out;
}
.mb-lock-banner-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: #F59E0B; color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.85rem;
}
.mb-lock-banner-text { flex: 1; }
.mb-lock-banner-text strong { color: #78350F; font-weight: 700; }

@keyframes mb-lock-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Bento Blue Edition — MB Conseil (Surcharge EasyAdmin)
   ========================================================= */

:root {
    /* 1. Surcharge des variables natives d'EasyAdmin */
    --body-bg: #F1F5F9;           /* Gris clair neutre (Bento background) */
    --sidebar-bg: #0F172A;        /* Bleu nuit profond */
    --sidebar-menu-color: #94A3B8;
    --sidebar-logo-color: #FFFFFF;
    --text-color: #1E293B;
    --primary-color: #3B82F6;     /* Bleu électrique */
    --border-color: #E2E8F0;
    --card-bg: #FFFFFF;

    /* 2. Variables personnalisées */
    --card-radius: 24px;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    --accent-light: #EFF6FF;
    --success: #10B981;

    /* 3. Typo unifiée — même police partout (EA + custom) */
    --mb-font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --mb-font-size-base: 14px;
}

/* Force la police et la taille de base sur toutes les pages admin
   (EasyAdmin charge sa propre stack typo — on l'écrase ici pour cohérence) */
html, body,
.wrapper, .sidebar, .sidebar-wrapper, .main-content, .content-wrapper,
.mb-topbar, .mb-sb-link, .mb-sb-section,
.btn, button, input, textarea, select, label, table, th, td,
h1, h2, h3, h4, h5, h6, p, span, a, li {
    font-family: var(--mb-font-family) !important;
}
html, body {
    font-size: var(--mb-font-size-base) !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Sidebar unifiée (EasyAdmin + custom layout) — largeur fixe
   ========================================================= */
:root {
    --mb-sidebar-width: 220px;
    --sidebar-max-width: 220px;
    --sidebar-padding-left: 0;
    --sidebar-padding-right: 0;
    --sidebar-bg: #0F172A;        /* Corrigé pour éviter le blanc */
}

/* =========================================================
   Notifications toast (flash messages Symfony)
   ========================================================= */
.flash {
    position: fixed !important;
    top: 80px;
    right: 24px;
    z-index: 1500;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 18px 14px 50px !important;
    border-radius: 14px !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
    font-size: 0.93rem !important;
    line-height: 1.4;
    color: #1E293B !important;
    margin: 0 0 12px 0 !important;
    animation: mb-flash-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both,
               mb-flash-out 0.4s ease 5s both;
}
.flash::before {
    content: ''; position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 12px;
}
.flash-success { border-left: 4px solid #10B981 !important; }
.flash-success::before { background: #10B981; content: '\f00c'; padding-top: 6px; padding-left: 7px; }
.flash-danger,
.flash-error   { border-left: 4px solid #EF4444 !important; }
.flash-danger::before,
.flash-error::before { background: #EF4444; content: '\f00d'; padding-top: 6px; padding-left: 8px; }
.flash-warning { border-left: 4px solid #F59E0B !important; }
.flash-warning::before { background: #F59E0B; content: '\f12a'; padding-top: 6px; padding-left: 10px; }
.flash-info    { border-left: 4px solid #3B82F6 !important; }
.flash-info::before { background: #3B82F6; content: '\f129'; padding-top: 6px; padding-left: 10px; }

@keyframes mb-flash-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes mb-flash-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); pointer-events: none; }
}

/* Empile plusieurs flash visuellement */
.flash + .flash { margin-top: 12px !important; top: calc(80px + 70px) !important; }
.flash + .flash + .flash { top: calc(80px + 140px) !important; }

/* Layout principal — flex au lieu de grid, pour qu'il marche aussi sur les
   pages custom qui ne chargent pas le CSS EA. La sidebar a une largeur fixe
   240px, le contenu prend le reste. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
.wrapper {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
}
.sidebar-wrapper, .main-content {
    margin: 0 !important;
    padding: 0 !important;
}
.content-top {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}
.mb-topbar {
    margin: 0 !important;
}
.sidebar-wrapper {
    position: relative;
    flex: 0 0 var(--mb-sidebar-width) !important;
    width: var(--mb-sidebar-width) !important;
    min-width: var(--mb-sidebar-width) !important;
    max-width: var(--mb-sidebar-width) !important;
    background: linear-gradient(180deg, #0F172A 0%, #1E3A8A 50%, #0F172A 100%) !important;
    overflow-y: auto; overflow-x: hidden;
}
.main-content {
    flex: 1 1 auto !important;
    min-width: 0; /* indispensable pour que les enfants flex ne fassent pas déborder */
}

.sidebar {
    /* Gradient appliqué directement ici aussi : sert pour le layout custom (/admin/*)
       où il n'y a pas de .sidebar-wrapper autour. Sur EA (/admin-ea/*), le wrapper
       a déjà le gradient et l'override transparent serait sans effet visible. */
    background: linear-gradient(180deg, #0A0F1D 0%, #1E3A8A 60%, #111827 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    width: var(--mb-sidebar-width) !important;
    min-width: var(--mb-sidebar-width) !important;
    max-width: var(--mb-sidebar-width) !important;
    max-inline-size: var(--mb-sidebar-width) !important;
    inline-size: var(--mb-sidebar-width) !important;
    padding: 0 !important;
}

/* Sur EA, le wrapper a déjà le gradient → on rend la sidebar transparente
   pour éviter le double gradient. */
.sidebar-wrapper > .sidebar {
    background: transparent !important;
}

.mb-sidebar-inner {
    padding: 0 0 24px 0;
    background: transparent !important;
    display: flex; flex-direction: column;
    min-height: 100vh;
}

/* ── Carte profil dans la sidebar ── */
.mb-sb-profile {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 14px 12px;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    backdrop-filter: blur(8px);
}
.mb-sb-profile-avatar {
    position: relative;
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    color: #fff; font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 4px 12px rgba(59,130,246,0.35);
    letter-spacing: 0.02em;
}
.mb-sb-profile-dot {
    position: absolute; bottom: 0; right: 0;
    width: 12px; height: 12px; border-radius: 50%;
    background: #10B981; border: 2px solid #0F172A;
}
.mb-sb-profile-info { flex: 1; min-width: 0; }
.mb-sb-profile-name {
    color: #fff; font-weight: 600; font-size: 0.88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mb-sb-profile-role {
    color: rgba(255,255,255,0.55); font-size: 0.75rem; font-weight: 500;
    text-transform: none; letter-spacing: 0;
}

/* ── Badges items ── */
.mb-sb-link { position: relative; }
.mb-sb-badge {
    margin-left: auto;
    padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
    color: #fff; min-width: 22px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.mb-sb-badge-green { background: #10B981; }
.mb-sb-badge-amber { background: #F59E0B; }
.mb-sb-badge-red   { background: #EF4444; }
.mb-sb-badge-blue  { background: #3B82F6; }

/* ── Footer sidebar ── */
.mb-sb-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.mb-sb-logout {
    color: rgba(248, 113, 113, 0.85) !important;
}
.mb-sb-logout:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #FCA5A5 !important;
}
.mb-sb-version {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.72rem;
    padding: 12px 14px 4px;
    font-weight: 500;
}
/* ── Toggle sidebar : 2 boutons coordonnés ──
   - .mb-sidebar-toggle-in : dans la sidebar (à droite du logo), visible quand sidebar ouverte
   - .mb-sidebar-toggle-fab : flottant en haut-gauche du viewport, visible quand sidebar cachée
   Transition fluide via opacity + width animées. */
.sidebar-wrapper {
    transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.24s ease,
                transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateX(0);
}
body.mb-sidebar-collapsed .sidebar-wrapper {
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    opacity: 0;
    transform: translateX(-20px);
    overflow: hidden;
    display: flex !important; /* on garde flex pour l'animation, c'est width=0 qui cache */
}
.main-content { transition: margin-left 0.32s cubic-bezier(0.4, 0, 0.2, 1); }

/* Hamburger DANS la sidebar (à droite du logo) */
.mb-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 0;
}
.mb-sidebar-header .mb-sidebar-logo {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 4px 0 !important;
    flex: 1; min-width: 0;
    justify-content: flex-start !important;
}
.mb-sidebar-toggle-in {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85); font-size: 14px;
    border-radius: 10px; cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}
.mb-sidebar-toggle-in:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* FAB hamburger — visible UNIQUEMENT quand sidebar cachée */
.mb-sidebar-toggle-fab {
    position: fixed;
    top: 14px; left: 14px;
    z-index: 1200;
    width: 42px; height: 42px;
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    border: 0;
    color: #fff; font-size: 16px;
    border-radius: 12px; cursor: pointer;
    box-shadow: 0 6px 18px rgba(59,130,246,0.4);
    opacity: 0; pointer-events: none; transform: scale(0.85);
    transition: opacity 0.24s ease, transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex; align-items: center; justify-content: center;
}
.mb-sidebar-toggle-fab:hover { box-shadow: 0 8px 22px rgba(59,130,246,0.5); }
body.mb-sidebar-collapsed .mb-sidebar-toggle-fab {
    opacity: 1; pointer-events: auto; transform: scale(1);
}

.mb-topbar { justify-content: flex-end !important; }

/* ── Actions topbar (droite) ── */
.mb-topbar-actions {
    display: flex; align-items: center; gap: 10px;
}
.mb-topbar-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: #F1F5F9; color: #475569;
    text-decoration: none !important;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
}
.mb-topbar-icon:hover { background: #E2E8F0; color: #0F172A; }
.mb-topbar-icon-badge {
    position: absolute; top: -4px; right: -4px;
    background: #EF4444; color: #fff;
    font-size: 10px; font-weight: 700;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    font-variant-numeric: tabular-nums;
}
/* L'attribut HTML `hidden` doit gagner sur display:inline-flex */
.mb-topbar-icon-badge[hidden] { display: none !important; }

/* ── Profil compact topbar ── */
.mb-topbar-profile {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 10px 5px 5px;
    background: #F1F5F9;
    border-radius: 12px;
    transition: background 0.15s;
}
.mb-topbar-profile:hover { background: #E2E8F0; }
.mb-topbar-profile-avatar {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
    color: #fff; font-weight: 700; font-size: 0.78rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mb-topbar-profile-name {
    color: #0F172A; font-weight: 600; font-size: 0.86rem;
    max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sur petit viewport, on cache le nom (l'avatar reste, suffisant) */
@media (max-width: 720px) {
    .mb-topbar-profile-name { display: none; }
}
.mb-topbar-profile-chevron {
    color: #94A3B8;
    text-decoration: none !important;
    padding: 4px 6px; border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.mb-topbar-profile-chevron:hover { color: #EF4444; background: #FEE2E2; }

/* =========================================================
   Logo sidebar (remplace le titre texte)
   ========================================================= */
.mb-sidebar-logo {
    background: transparent !important;
    padding: 20px 20px 12px !important;
    margin: 0 !important;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    box-sizing: border-box;
    border-bottom: 0 !important;
    flex-shrink: 0;
}

.mb-sidebar-logo img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: 50px !important;
    object-fit: contain;
    filter: brightness(0) invert(1); /* logo en blanc sur fond sombre */
}

/* Garde la règle .mb-sidebar-title au cas où elle serait encore utilisée ailleurs */
.mb-sidebar-title {
    font-size: 17px;
    font-weight: 600;
    color: #FFFFFF !important; /* Couleur blanche pour fond sombre */
    padding: 0 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
    letter-spacing: 0.01em;
}

/* =========================================================
   Liens sidebar
   ========================================================= */
.mb-sb-link {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    margin: 4px 14px;
    color: rgba(255, 255, 255, 0.72) !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: 12px;
    transition: all 0.18s ease;
}

.mb-sb-link i {
    width: 18px;
    font-size: 13px;
    text-align: center;
    color: inherit;
}

.mb-sb-link span {
    flex: 1;
}

.mb-sb-link:hover {
    background: rgba(255, 255, 255, 0.1) !important; /* Hover semi-transparent blanc */
    color: #FFFFFF !important;
}

.mb-sb-link.active {
    background: #3B82F6 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35) !important;
}

.mb-sb-link.active i,
.mb-sb-link.active span {
    color: #FFFFFF !important;
}

.mb-sb-section {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38) !important;
    padding: 24px 28px 8px;
    letter-spacing: 0.14em;
}

.mb-sb-link-spaced {
    margin-top: 20px !important;
}

/* Masquer tous les éléments natifs d'EasyAdmin qui pourraient diverger
   du layout custom : header EA dans la sidebar, poignée de resize,
   responsive-header mobile, user-menu/settings natifs dans la topbar. */
.sidebar .main-header,
.sidebar #sidebar-resizer-handler,
.responsive-header,
.navbar-custom-menu,
.user-menu-wrapper,
.settings-dropdown,
.content-search,
.content-top .form-action-search {
    display: none !important;
}

/* =========================================================
   Bouton Hamburger
   ========================================================= */
.mb-hamburger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 1200;
    background: #0F172A;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 10px;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.mb-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animation croix quand sidebar ouverte */
.mb-sidebar--open ~ .mb-hamburger span:nth-child(1),
.mb-hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mb-sidebar--open ~ .mb-hamburger span:nth-child(2),
.mb-hamburger.is-open span:nth-child(2) {
    opacity: 0;
}
.mb-sidebar--open ~ .mb-hamburger span:nth-child(3),
.mb-hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   Overlay sombre derrière la sidebar (mobile)
   ========================================================= */
.mb-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1050;
}

/* =========================================================
   Responsive mobile
   ========================================================= */
@media (max-width: 768px) {
    /* NB : pas d'override d'opacity sur le FAB ici. La regle desktop
       'body.mb-sidebar-collapsed .mb-sidebar-toggle-fab' suffit, car le JS
       force body.mb-sidebar-collapsed au load sur mobile.
       => sidebar cachee  : FAB visible / toggle-in cache (dans la sidebar cachee)
       => sidebar ouverte : FAB cache / toggle-in visible
       Evite le bug "double hamburger". */

    /* Sidebar en overlay fixe sur mobile : visible par defaut,
       slide hors ecran quand body.mb-sidebar-collapsed */
    .sidebar-wrapper,
    .sidebar,
    .mb-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 1100 !important;
        transform: translateX(0);
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        background: linear-gradient(180deg, #0A0F1D 0%, #1E3A8A 60%, #111827 100%) !important;
    }

    /* Quand body.mb-sidebar-collapsed : sidebar slide hors ecran */
    body.mb-sidebar-collapsed .sidebar-wrapper,
    body.mb-sidebar-collapsed .sidebar,
    body.mb-sidebar-collapsed .mb-sidebar {
        transform: translateX(-100%) !important;
        /* Override des regles desktop qui mettent width:0 / opacity:0 */
        width: 280px !important;
        min-width: 280px !important;
        max-width: 85vw !important;
        opacity: 1 !important;
        display: flex !important;
    }

    /* Main content : pas de marge ni decalage sur mobile */
    .main-content { margin-left: 0 !important; }
    .content-wrapper {
        margin-left: 0 !important;
        padding-top: 60px !important; /* espace pour le FAB hamburger */
    }

    /* Overlay sombre derriere la sidebar quand ouverte (visible si pas collapsed) */
    .mb-sidebar-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.55);
        z-index: 1099;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    body.mb-sidebar-collapsed .mb-sidebar-mobile-overlay {
        opacity: 0;
        pointer-events: none;
    }
}

/* Sur desktop, l'overlay mobile n'existe pas */
@media (min-width: 769px) {
    .mb-sidebar-mobile-overlay { display: none !important; }
}

/* =========================================================
   Layout Global
   ========================================================= */
body {
    background-color: var(--body-bg) !important;
}

/* =========================================================
   Topbar partagée — identique sur toutes les pages admin
   ========================================================= */
.mb-topbar {
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    padding: 0 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
/* EasyAdmin: ensure topbar spans full width even when placed in content-top */
.content-top .mb-topbar,
section.main-content > .mb-topbar {
    margin: 0 !important;
    border-radius: 0 !important;
}
.mb-topbar-title {
    font-weight: 600;
    color: #1E293B;
    font-size: 14px;
}
.mb-topbar-user {
    font-size: 13px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 16px;
}
.mb-topbar-userinfo {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mb-topbar-userinfo i {
    font-size: 16px;
    color: #64748B;
}
.mb-topbar-divider {
    width: 1px;
    height: 20px;
    background-color: #E2E8F0;
}
.mb-btn-logout {
    color: #DC2626 !important;
    text-decoration: none !important;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: .2s;
    font-size: 13px;
}
.mb-btn-logout:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #DC2626 !important;
    text-decoration: none !important;
}

/* Sur les pages EasyAdmin : neutraliser le content-top par défaut
   (search bar + user-menu/cog) — notre topbar prend sa place. */
.content-top {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

/* =========================================================
   Largeur de page uniforme (EasyAdmin + custom layout)
   Le layout custom (admin/_layout.html.twig) utilise désormais les
   mêmes classes (.wrapper / .main-content / .content-body / .content-wrapper)
   que le layout EasyAdmin → pixel-perfect identiques.
   ========================================================= */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background: var(--body-bg, #F1F5F9) !important;
    overflow-x: hidden !important; /* empêche le débordement horizontal */
    min-width: 0 !important;
}
.content-body {
    flex: 1 0 auto !important;
    background: var(--body-bg, #F1F5F9) !important;
    padding: 0 !important;
    min-width: 0 !important;
}
.content-wrapper {
    width: 100% !important;
    max-width: 100% !important;          /* plus de max 1400px qui force débordement */
    margin: 0 !important;
    padding: 24px 32px !important;        /* padding cohérent partout */
    box-sizing: border-box !important;
    min-height: calc(100vh - 60px) !important;
    background-color: var(--body-bg, #F1F5F9) !important;
    overflow-x: hidden !important;
}
/* Anciennes classes du layout custom (rétrocompat si encore référencées) */
.mb-main { padding: 0; background: var(--body-bg, #F1F5F9) !important; }
.mb-main-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px 32px;
    box-sizing: border-box;
    min-height: calc(100vh - 60px);
}

.sidebar {
    border-right: none !important;
    box-shadow: none !important;
}

.sidebar-menu-item {
    margin: 4px 12px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
}

.sidebar-menu-item.active {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
}

.sidebar-menu-item:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* =========================================================
   Bento Grid System
   ========================================================= */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 30px;
}

.bento-span-2 { grid-column: span 2; }
.bento-full   { grid-column: 1 / -1; }

/* =========================================================
   Cartes Bento
   ========================================================= */
.bento-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 30px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   KPIs Dashboard
   ========================================================= */
.kpi-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748B;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-color);
}

.card-dark {
    background: linear-gradient(135deg, #1E293B 0%, #334155 100%) !important;
    color: #FFFFFF !important;
}

.card-dark .kpi-label { color: rgba(255, 255, 255, 0.6); }
.card-dark .kpi-value { color: #FFFFFF; }

/* =========================================================
   Tableaux
   ========================================================= */
.table-bento-container {
    background: white;
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: var(--card-shadow);
}

.content-header {
    background: transparent !important;
    border-bottom: none !important;
    margin-bottom: 1.5rem !important;
}

/* =========================================================
   Dashboard Banner
   ========================================================= */
.dashboard-banner {
    width: 100%;
    margin-bottom: 24px;
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
}

.dashboard-banner img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

/* =========================================================
   Responsive tablette / desktop
   ========================================================= */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-span-2 { grid-column: span 1; }
}

/* =========================================================
   Force le thème clair (annule le dark mode EasyAdmin auto)
   Override agressif : EA injecte des variables CSS sur <body>
   selon prefers-color-scheme. On les réécrit toutes en light.
   ========================================================= */
html { color-scheme: light !important; }

body,
body[data-ea-color-scheme="dark"],
body[data-ea-color-scheme="auto"] {
    color-scheme: light !important;

    /* Variables EasyAdmin — palette light forcée */
    --body-bg:          #F1F5F9 !important;
    --body-fg:          #1E293B !important;
    --text-color:       #1E293B !important;
    --card-bg:          #FFFFFF !important;
    --card-fg:          #1E293B !important;
    --border-color:     #E2E8F0 !important;
    --primary-color:    #3B82F6 !important;
    --sidebar-bg:       #0F172A !important;
    --sidebar-fg:       #FFFFFF !important;
    --sidebar-menu-color: #94A3B8 !important;
    --menu-bg:          #FFFFFF !important;
    --menu-fg:          #1E293B !important;
    --header-bg:        #FFFFFF !important;
    --header-fg:        #1E293B !important;
    --form-input-bg:    #FFFFFF !important;
    --form-input-fg:    #1E293B !important;
    --form-input-border: #CBD5E1 !important;
    --dropdown-bg:      #FFFFFF !important;
    --dropdown-fg:      #1E293B !important;
    --table-bg:         #FFFFFF !important;
    --table-fg:         #1E293B !important;
    --table-border:     #E2E8F0 !important;

    background-color: #F1F5F9 !important;
    color: #1E293B !important;
}

/* Annule également la palette dark via media query système */
@media (prefers-color-scheme: dark) {
    body,
    body[data-ea-color-scheme="dark"],
    body[data-ea-color-scheme="auto"] {
        --body-bg:        #F1F5F9 !important;
        --body-fg:        #1E293B !important;
        --text-color:     #1E293B !important;
        --card-bg:        #FFFFFF !important;
        --card-fg:        #1E293B !important;
        --border-color:   #E2E8F0 !important;
        --menu-bg:        #FFFFFF !important;
        --menu-fg:        #1E293B !important;
        --header-bg:      #FFFFFF !important;
        --header-fg:      #1E293B !important;
        --form-input-bg:  #FFFFFF !important;
        --form-input-fg:  #1E293B !important;
        --dropdown-bg:    #FFFFFF !important;
        --dropdown-fg:    #1E293B !important;
        --table-bg:       #FFFFFF !important;
        --table-fg:       #1E293B !important;
        background-color: #F1F5F9 !important;
        color:            #1E293B !important;
    }

    .content-wrapper,
    .main-card,
    .page-content,
    .content-top,
    .ea-search,
    main,
    main.content,
    .form-widget,
    .form-control,
    select.form-select,
    input.form-control,
    textarea.form-control,
    table,
    th, td {
        background-color: #FFFFFF !important;
        color:            #1E293B !important;
        border-color:     #E2E8F0 !important;
    }

    .content-wrapper { background-color: #F1F5F9 !important; }
}