/* ==========================================
   Sidebar collapsed — notification bell + badge
   ==========================================
   En mode replie, le chevron est en absolute top:18px (34x34).
   La cloche doit etre placee SOUS le chevron, pas dessus.
   ========================================== */

/* Header collapsed : garder un min-height pour le chevron */
.sidebar.collapsed .sidebar-header {
    min-height: 56px !important;
    padding: 10px 0 4px !important;
    border-bottom: none !important;
}

/* Profile collapsed : pousser sous le header/chevron */
.sidebar.collapsed .sidebar-profile {
    padding: 2px 0 6px !important;
    margin-top: 0 !important;
}

/* Cloche en mode replie — bien centree, pas de conflit avec chevron */
.sidebar.collapsed .sidebar-notif-bell {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 auto !important;
    position: relative !important;
    border-radius: 10px !important;
    background: color-mix(in srgb, var(--accent, #6c47ff) 8%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--accent, #6c47ff) 20%, transparent) !important;
}

.sidebar.collapsed .sidebar-notif-bell:hover {
    background: color-mix(in srgb, var(--accent, #6c47ff) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent, #6c47ff) 40%, transparent) !important;
}

/* Pastille (badge) en mode replie — plus visible, bien positionnee */
.sidebar.collapsed .sidebar-notif-badge {
    top: -5px !important;
    right: -5px !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 9px !important;
    line-height: 17px !important;
    padding: 0 4px !important;
    border-radius: 9px !important;
    border-width: 2px !important;
    box-shadow: 0 0 8px rgba(225, 29, 72, 0.5) !important;
    z-index: 60 !important;
}

/* Fix: supprimer le halo blanc au clic sur la cloche */
.sidebar-notif-bell,
.sidebar-notif-bell:focus,
.sidebar-notif-bell:active,
.sidebar-notif-bell:focus-visible,
#sidebar-notif-bell,
#sidebar-notif-bell:focus,
#sidebar-notif-bell:active,
#sidebar-notif-bell:focus-visible,
#app-sidebar .sidebar-notif-bell,
#app-sidebar .sidebar-notif-bell:focus,
#app-sidebar .sidebar-notif-bell:active,
#app-sidebar .sidebar-notif-bell:focus-visible {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
}

/* ── Sidebar Info Button ─────────────────────────────────────────── */
.sidebar-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    margin-left: 6px;
    transition: color .2s, border-color .2s, background .2s;
}
.sidebar-info-btn:hover {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.06);
}
/* Thème Wood Legendary */
[data-theme="wood-legendary"] .sidebar-info-btn {
    border-color: rgba(212,168,69,0.3);
    color: rgba(212,168,69,0.45);
}
[data-theme="wood-legendary"] .sidebar-info-btn:hover {
    border-color: rgba(212,168,69,0.7);
    color: rgba(212,168,69,0.9);
    background: rgba(212,168,69,0.08);
}
/* Sidebar collapsed : cacher le bouton info */
.sidebar-collapsed .sidebar-info-btn,
body.sidebar-collapsed .sidebar-info-btn {
    display: none !important;
}