:root {
        --dark:         #0a0a14;
        --sb-bg:        #0d0d1a;
        --sb-w:         268px;
        --sb-mini:      72px;
        --gold:         #d4af37;
        --gold-lt:      #f1d592;
        --gold-grad:    linear-gradient(135deg,#d4af37,#f1d592);
        --nav-h:        68px;
        --radius:       12px;
        --border:       rgba(212,175,55,.12);
        --muted:        rgba(255,255,255,.4);
    }
    *, *::before, *::after { box-sizing:border-box; }
    body { font-family:'Poppins',sans-serif; background:var(--dark); color:#e2e8f0; overflow-x:hidden; margin:0; }

    /* ══ SIDEBAR ══════════════════════════════════════════════ */
    .sidebar {
        width:var(--sb-w); height:100vh; background:var(--sb-bg);
        position:fixed; left:0; top:0; z-index:1200;
        display:flex; flex-direction:column;
        border-right:1px solid var(--border);
        transition:width .35s cubic-bezier(.4,0,.2,1);
        overflow:hidden;
    }

    /* Logo */
    .sb-logo {
        padding:20px 18px; border-bottom:1px solid var(--border);
        display:flex; align-items:center; gap:12px;
        min-height:76px; overflow:hidden;
        transition:padding .35s;
        /* ✅ Enough right padding so toggle button doesn't overlap logo */
        padding-right:52px;
    }
    .sb-logo img {
        width:36px; height:36px; object-fit:contain; flex-shrink:0;
        filter:drop-shadow(0 2px 8px rgba(212,175,55,.3));
    }
    .sb-logo-text { overflow:hidden; min-width:0; }
    .sb-logo-title {
        font-family:'Playfair Display',serif;
        font-size:.92rem; font-weight:700; color:var(--gold);
        display:block; white-space:nowrap;
    }
    .sb-logo-sub {
        font-size:.58rem; text-transform:uppercase;
        letter-spacing:.16em; color:var(--muted);
        display:block; white-space:nowrap; margin-top:2px;
    }

    /* Toggle */
    .sb-toggle {
        position:absolute; right:12px; top:20px;
        background:var(--gold-grad); border:none;
        width:32px; height:32px; border-radius:8px;
        color:#000; cursor:pointer; z-index:10;
        display:flex; align-items:center; justify-content:center;
        font-size:.75rem; transition:.25s; flex-shrink:0;
    }
    .sb-toggle:hover { transform:scale(1.08); }

    /* Sections */
    .sb-section {
        font-size:.58rem; font-weight:700; text-transform:uppercase;
        letter-spacing:.18em; color:rgba(212,175,55,.45);
        padding:16px 20px 5px; white-space:nowrap; overflow:hidden;
    }

    /* Links */
    .sb-link {
        display:flex; align-items:center;
        margin:2px 10px; padding:10px 12px;
        border-radius:var(--radius);
        color:rgba(255,255,255,.45) !important;
        text-decoration:none; font-size:.84rem;
        white-space:nowrap; overflow:hidden;
        transition:background .2s, color .2s;
    }
    .sb-link:hover { background:rgba(255,255,255,.04); color:rgba(255,255,255,.85) !important; }
    .sb-link.active {
        background:var(--gold-grad); color:#000 !important;
        font-weight:600; box-shadow:0 4px 16px rgba(212,175,55,.25);
    }
    .sb-icon {
        width:28px; min-width:28px; text-align:center; font-size:1rem; flex-shrink:0;
        background:var(--gold-grad);
        -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        transition:transform .2s;
    }
    .sb-link.active .sb-icon { -webkit-text-fill-color:#000; }
    .sb-link:hover .sb-icon  { transform:scale(1.1); }
    .sb-text { margin-left:10px; font-size:.84rem; overflow:hidden; white-space:nowrap; }

    /* Scroll */
    .sb-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:16px; }
    .sb-scroll::-webkit-scrollbar { width:3px; }
    .sb-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

    /* Role badge */
    .sb-role-badge {
        margin:12px 12px 0;
        padding:7px 12px;
        background:rgba(212,175,55,.07); border:1px solid var(--border);
        border-radius:10px; font-size:.63rem; text-transform:uppercase;
        letter-spacing:.14em; color:var(--gold);
        display:flex; align-items:center; gap:8px;
        white-space:nowrap; overflow:hidden;
    }

    /* Logout sidebar */
    .sb-footer { padding:12px; border-top:1px solid var(--border); }
    .btn-logout {
        display:inline-flex; align-items:center; gap:6px;
        padding:7px 14px; border-radius:8px;
        background:rgba(231,76,60,.1); border:1px solid rgba(231,76,60,.25);
        color:#e74c3c; font-size:.76rem; font-weight:600;
        text-decoration:none; transition:.2s; white-space:nowrap;
    }
    .btn-logout:hover { background:rgba(231,76,60,.2); color:#e74c3c; }

    /* ══ MINI MODE ════════════════════════════════════════════ */
    body.sb-mini .sidebar  { width:var(--sb-mini); }
    body.sb-mini .sb-logo  { padding:20px 0; padding-right:0; justify-content:center; }
    body.sb-mini .sb-logo img { margin:0 auto; }
    body.sb-mini .sb-logo-text,
    body.sb-mini .sb-text,
    body.sb-mini .sb-section,
    body.sb-mini .sb-role-badge { opacity:0; pointer-events:none; width:0; padding:0; margin:0; }
    body.sb-mini .sb-link { padding:10px 0; justify-content:center; margin:2px 6px; }
    body.sb-mini .sb-icon { width:100%; min-width:unset; }
    /* ✅ Toggle centré en mode mini */
    body.sb-mini .sb-toggle { right:50%; transform:translateX(50%); top:20px; }

    /* ══ TOPBAR ═══════════════════════════════════════════════ */
    .topbar {
        position:fixed; top:0; right:0; z-index:1000;
        height:var(--nav-h); width:calc(100% - var(--sb-w));
        background:rgba(10,10,20,.85); backdrop-filter:blur(18px);
        border-bottom:1px solid var(--border);
        display:flex; align-items:center;
        padding:0 24px; gap:14px;
        transition:width .35s cubic-bezier(.4,0,.2,1);
    }
    body.sb-mini .topbar { width:calc(100% - var(--sb-mini)); }

    .topbar-title { font-size:.95rem; font-weight:700; color:#fff; white-space:nowrap; }
    .topbar-sep   { flex:1; }
    .topbar-avatar {
        width:36px; height:36px; border-radius:10px;
        background:var(--gold-grad);
        display:flex; align-items:center; justify-content:center;
        font-weight:800; font-size:.88rem; color:#000; flex-shrink:0;
    }
    .topbar-name { font-size:.83rem; font-weight:600; color:#fff; line-height:1.1; }
    .topbar-role { font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }

    /* ✅ Hamburger : visible uniquement sur mobile (≤991px) */
    .btn-hamburger {
        display:none; background:none; border:none;
        color:var(--gold); font-size:1.2rem; cursor:pointer; padding:4px 8px;
        flex-shrink:0;
    }

    /* ══ CONTENU ══════════════════════════════════════════════ */
    #content-wrapper {
        margin-left:var(--sb-w); padding-top:var(--nav-h);
        min-height:100vh; background:var(--dark);
        transition:margin-left .35s cubic-bezier(.4,0,.2,1);
    }
    body.sb-mini #content-wrapper { margin-left:var(--sb-mini); }
    .content-inner { padding:28px; }

    /* ══ TOOLTIPS ═════════════════════════════════════════════ */
    .tooltip-inner {
        background:var(--gold-grad) !important; color:#000 !important;
        font-weight:700; font-size:.72rem; padding:5px 11px;
        border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.3);
    }
    .bs-tooltip-end .tooltip-arrow::before { border-right-color:var(--gold) !important; }

    /* ══ OVERLAY MOBILE ════════════════════════════════════════ */
    .sb-overlay {
        display:none; position:fixed; inset:0;
        background:rgba(0,0,0,.6); z-index:1100; backdrop-filter:blur(2px);
    }

    /* ══ RESPONSIVE ════════════════════════════════════════════ */
    @media (max-width:991px) {
        /* ✅ Hamburger visible seulement sur mobile */
        .btn-hamburger { display:flex; }

        /* Sidebar cachée par défaut sur mobile */
        .sidebar { left:calc(var(--sb-w) * -1); width:var(--sb-w) !important; }
        body.sb-open .sidebar { left:0; }
        body.sb-open .sb-overlay { display:block; }

        /* Restaurer le texte quand sidebar ouverte mobile */
        body.sb-open .sb-logo-text,
        body.sb-open .sb-text,
        body.sb-open .sb-section,
        body.sb-open .sb-role-badge { opacity:1; pointer-events:auto; width:auto; }
        body.sb-open .sb-logo { padding:20px 18px; padding-right:52px; justify-content:flex-start; }
        body.sb-open .sb-link { padding:10px 12px; justify-content:flex-start; margin:2px 10px; }

        /* Logo sidebar masqué sur mobile (dans la topbar ça suffit) */
        .sb-logo img.sb-logo-desktop { display:none; }

        #content-wrapper { margin-left:0 !important; }
        .topbar { width:100% !important; }
        .topbar-name, .topbar-role { display:none; }

        /* Toggle desktop masqué sur mobile */
        .sb-toggle { display:none; }
    }