/* ============================================================
   STYLE PATCH v4 — Sidebar collapsed + nettoyage global
   ============================================================ */

/* ── Variables manquantes ── */
:root {
    --sidebar-width:     280px;
    --sidebar-collapsed: 80px;
    --header-height:     70px;
    --transition:        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Layout de base ── */
.app-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    transition: var(--transition);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-content {
    margin-left: var(--sidebar-width);
    transition: var(--transition);
    flex: 1;
    min-height: 100vh;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   SIDEBAR COLLAPSED — règles avec priorité maximale
   ============================================================ */

.sidebar.collapsed {
    width: var(--sidebar-collapsed) !important;
    overflow: hidden !important;
}

/* Le main-content s'adapte */
.sidebar.collapsed ~ .main-content,
body:has(.sidebar.collapsed) .main-content {
    margin-left: var(--sidebar-collapsed) !important;
}

/* ── Masquer TOUT sauf l'icône principale ── */

/* Textes label des liens nav */
.sidebar.collapsed .sidebar-nav .nav-item a span {
    display: none !important;
}

/* Badges : Live, Groq, API, compteurs */
.sidebar.collapsed .sidebar-nav .nav-item a .nav-badge,
.sidebar.collapsed .sidebar-nav .nav-item a .nav-count,
.sidebar.collapsed .sidebar-nav .nav-item a .ai-badge {
    display: none !important;
}

/* Logo texte */
.sidebar.collapsed .logo-text {
    display: none !important;
}

/* Bloc user complet */
.sidebar.collapsed .sidebar-user {
    display: none !important;
}

/* Footer complet */
.sidebar.collapsed .sidebar-footer {
    display: none !important;
}

/* ── Header collapsed : logo centré ── */
.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding: 20px 0 !important;
}

.sidebar.collapsed .logo-area {
    justify-content: center !important;
    gap: 0 !important;
}

/* Bouton toggle du header : caché en collapsed */
.sidebar.collapsed .sidebar-header .sidebar-toggle {
    display: none !important;
}

/* ── Nav : icônes centrées ── */
.sidebar.collapsed .sidebar-nav {
    padding: 8px 6px !important;
    flex: 1;
}

.sidebar.collapsed .sidebar-nav .nav-item a {
    justify-content: center !important;
    padding: 14px 0 !important;
    gap: 0 !important;
    margin: 2px 4px !important;
    width: calc(100% - 8px) !important;
    border-radius: 12px !important;
}

.sidebar.collapsed .sidebar-nav .nav-item a > i:first-child {
    font-size: 18px !important;
    margin: 0 !important;
    width: auto !important;
}

/* ── Bouton réouverture en bas ── */
.sidebar-reopen-btn {
    display: none;
}

.sidebar.collapsed .sidebar-reopen-btn {
    display: flex !important;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(92, 196, 214, 0.35);
    background: rgba(92, 196, 214, 0.12);
    color: #5cc4d6;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    z-index: 20;
    transition: background 0.2s;
}

.sidebar.collapsed .sidebar-reopen-btn:hover {
    background: rgba(92, 196, 214, 0.28);
    color: #fff;
}

/* ── Tooltip sur les icônes en collapsed ── */
.sidebar.collapsed .sidebar-nav .nav-item {
    position: relative;
}

.sidebar.collapsed .sidebar-nav .nav-item a::after {
    content: attr(data-tooltip);
    position: fixed;
    left: calc(var(--sidebar-collapsed) + 10px);
    top: auto;
    background: #0A1628;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 9999;
    border: 1px solid rgba(92, 196, 214, 0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.sidebar.collapsed .sidebar-nav .nav-item a:hover::after {
    opacity: 1;
}

/* ── Chevron du bouton toggle principal ── */
.sidebar:not(.collapsed) .sidebar-toggle i {
    transform: rotate(0deg);
}
.sidebar.collapsed .sidebar-toggle i {
    transform: rotate(180deg);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        z-index: 200;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important;
    }
}