/* ============================================================
   MENU UTILISATEUR (avatar header -> dropdown / fullscreen mobile)
   ============================================================ */

.jb-user-menu {
    position: relative;
    flex-shrink: 0;
}

/* Le bouton avatar (deja stylise par .jb-avatar-header dans app.css)
   recoit un curseur pointer + outline reset */
.jb-user-menu .jb-avatar-header {
    border: 2px solid transparent;
    background: linear-gradient(135deg, #ff3b6b, #c026d3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    flex-shrink: 0;
    padding: 0;
}
.jb-user-menu .jb-avatar-header:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
.jb-user-menu .jb-avatar-header[aria-expanded="true"] {
    border-color: var(--jb-accent);
    transform: scale(0.95);
}

/* === Panel dropdown === */
.jb-user-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: rgba(13, 19, 45, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--jb-border);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    padding: 8px;
    z-index: 1000;
    animation: jbUserMenuIn .18s ease-out;
}
@keyframes jbUserMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.jb-user-menu__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--jb-border);
}
.jb-user-menu__header .jb-avatar {
    flex-shrink: 0;
}
.jb-user-menu__identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.jb-user-menu__identity strong {
    color: var(--jb-text);
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jb-user-menu__identity span {
    color: var(--jb-text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jb-user-menu__close {
    display: none;
    background: transparent;
    color: var(--jb-text-muted);
    border: 0;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
.jb-user-menu__close:hover { background: rgba(255,255,255,0.06); color: var(--jb-text); }

.jb-user-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--jb-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: background .12s, color .12s;
}
.jb-user-menu__item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--jb-text);
}
.jb-user-menu__item svg {
    flex-shrink: 0;
}
.jb-user-menu__badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--jb-accent);
    background: rgba(255, 59, 107, 0.12);
    padding: 2px 8px;
    border-radius: 999px;
}
.jb-user-menu__item--admin {
    color: rgb(165, 196, 252);
}
.jb-user-menu__item--admin:hover {
    background: rgba(91, 140, 255, 0.12);
}
.jb-user-menu__item--danger {
    color: rgb(252, 165, 165);
}
.jb-user-menu__item--danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: rgb(254, 202, 202);
}
.jb-user-menu__divider {
    margin: 6px 6px;
    border: 0;
    border-top: 1px solid var(--jb-border);
}

.jb-user-menu__backdrop {
    display: none;
}

/* === Mobile : fullscreen panel + backdrop === */
@media (max-width: 640px) {
    .jb-user-menu__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        animation: jbBackdropIn .2s ease-out;
    }
    @keyframes jbBackdropIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .jb-user-menu__panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(85vw, 320px);
        border-radius: 0;
        animation: jbUserMenuInMobile .22s ease-out;
    }
    @keyframes jbUserMenuInMobile {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }

    .jb-user-menu__close {
        display: grid;
        place-items: center;
    }
}

/* Bloque le scroll body quand le menu mobile est ouvert */
body.jb-no-scroll {
    overflow: hidden;
}

/* ============================================================
   FIXES RESPONSIVE GLOBAUX (sidebar, avatar, header)
   ============================================================ */

/* Sidebar : vraiment cachee sur mobile (priorite max au cas ou un autre CSS l'override) */
@media (max-width: 1024px) {
    .jb-sidebar { display: none !important; }
}

/* Avatar XL (page /account) : plus petit sur mobile */
@media (max-width: 640px) {
    .jb-avatar--xl { width: 80px !important; height: 80px !important; font-size: 28px !important; }
}

/* Header : sur tres petit ecran, on cache le texte des boutons (icones suffisent) */
@media (max-width: 480px) {
    .jb-header .jb-btn--primary span,
    .jb-header .jb-btn--primary { font-size: 0; gap: 0; padding: 9px 12px; }
    .jb-header .jb-btn--primary svg { width: 18px; height: 18px; }
    .jb-credit-chip span:not(.jb-credit-plus) { font-size: 12px; }
    .jb-lang-pill { display: none; } /* langue dans le menu user */
}