/* ===================================
   SIDEBAR COLLAPSED MODE (DESKTOP)
   Modo colapsado com apenas ícones
   =================================== */

/* Estado colapsado - apenas em desktop */
@media (min-width: 1025px) {
    .sidebar.collapsed {
        width: 80px;
    }

    /* Header - ocultar texto, mostrar apenas ícone */
    .sidebar.collapsed .sidebar-header h2 {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .sidebar.collapsed .sidebar-header h2 i {
        font-size: 28px;
        margin: 0;
    }

    /* Ocultar TODOS os textos do header */
    .sidebar.collapsed .sidebar-header h2 * {
        font-size: 0 !important;
        width: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    /* Restaurar ícone */
    .sidebar.collapsed .sidebar-header h2 i {
        font-size: 28px !important;
        width: auto !important;
    }

    /* Menu items - ocultar textos completamente */
    .sidebar.collapsed .sidebar-menu .menu-item > a {
        padding: 16px 0;
        justify-content: center;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
    }

    .sidebar.collapsed .sidebar-menu .menu-item > a i {
        margin: 0;
        font-size: 20px;
        min-width: auto;
    }

    /* Ocultar todos os nós de texto nos links */
    .sidebar.collapsed .sidebar-menu .menu-item > a {
        font-size: 0;
        line-height: 0;
    }

    /* Restaurar tamanho do ícone */
    .sidebar.collapsed .sidebar-menu .menu-item > a i {
        font-size: 20px;
        line-height: normal;
        display: inline-block;
    }

    /* Garantir que submenu arrows estão ocultos */
    .sidebar.collapsed .sidebar-menu .menu-item > a .submenu-arrow {
        display: none !important;
        visibility: hidden !important;
    }

    /* Método adicional: ocultar texto com text-indent */
    .sidebar.collapsed .sidebar-menu .menu-item > a {
        text-indent: -9999px;
    }

    /* Garantir que ícone fica visível apesar do text-indent */
    .sidebar.collapsed .sidebar-menu .menu-item > a i {
        text-indent: 0;
        position: relative;
        left: 0;
        float: none;
    }

    /* Método alternativo: usar visibility para texto */
    .sidebar.collapsed .sidebar-menu .menu-item > a > *:not(i) {
        visibility: hidden;
        width: 0;
        height: 0;
        position: absolute;
    }

    /* Tooltip ao hover - mostrar nome do item */
    .sidebar.collapsed .sidebar-menu .menu-item > a::after {
        content: attr(data-title);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background: #1a202c;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        white-space: nowrap;
        margin-left: 12px;
        font-size: 14px;
        font-weight: 500;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1001;
    }

    .sidebar.collapsed .sidebar-menu .menu-item > a::before {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 6px solid transparent;
        border-right-color: #1a202c;
        margin-left: 6px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 1001;
    }

    .sidebar.collapsed .sidebar-menu .menu-item > a:hover::after,
    .sidebar.collapsed .sidebar-menu .menu-item > a:hover::before {
        opacity: 1;
    }

    .sidebar.collapsed .sidebar-menu .menu-item > a:hover::after {
        transform: translateY(-50%) translateX(4px);
    }

    /* Submenu - ocultar completamente quando colapsado */
    .sidebar.collapsed .sidebar-menu .submenu {
        display: none !important;
    }

    /* Footer - modo compacto */
    .sidebar.collapsed .sidebar-footer {
        flex-direction: column;
        gap: 8px;
        padding: 16px 8px;
        align-items: center;
    }

    /* User info - mostrar apenas avatar */
    .sidebar.collapsed .user-info {
        width: auto;
        padding: 0;
        background: none;
        overflow: hidden;
    }

    .sidebar.collapsed .user-info img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.2);
        transition: all 0.2s ease;
    }

    .sidebar.collapsed .user-info img:hover {
        border-color: #667eea;
        transform: scale(1.05);
    }

    .sidebar.collapsed .user-details {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Logout button - apenas ícone */
    .sidebar.collapsed .logout-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.2);
        position: relative;
        font-size: 0;
        overflow: hidden;
    }

    .sidebar.collapsed .logout-btn span {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    .sidebar.collapsed .logout-btn i {
        margin: 0;
        font-size: 18px !important;
        line-height: normal;
    }

    .sidebar.collapsed .logout-btn:hover {
        background: rgba(239, 68, 68, 0.2);
        transform: scale(1.05);
    }

    /* Tooltip para logout */
    .sidebar.collapsed .logout-btn::after {
        content: 'Sair';
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        background: #1a202c;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        white-space: nowrap;
        margin-left: 12px;
        font-size: 13px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .sidebar.collapsed .logout-btn:hover::after {
        opacity: 1;
    }

    /* Ajustar main-content quando colapsado */
    .sidebar.collapsed ~ .main-content {
        margin-left: 80px;
        transition: margin-left 0.3s ease;
    }

    /* Menu item ativo - destaque visual */
    .sidebar.collapsed .sidebar-menu .menu-item.active > a {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
    }

    .sidebar.collapsed .sidebar-menu .menu-item.active > a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: white;
        border-radius: 0 4px 4px 0;
    }

    /* Animação suave do scroll */
    .sidebar.collapsed .sidebar-menu {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Scrollbar mais fina quando colapsado */
    .sidebar.collapsed .sidebar-menu::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar.collapsed .sidebar-menu::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    /* Hover no menu item - destaque */
    .sidebar.collapsed .sidebar-menu .menu-item > a:hover {
        background: rgba(102, 126, 234, 0.1);
    }

    /* Badge/notificação (se houver) */
    .sidebar.collapsed .badge {
        position: absolute;
        top: 8px;
        right: 8px;
        min-width: 18px;
        height: 18px;
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Separadores visuais */
    .sidebar.collapsed .sidebar-menu .menu-item {
        margin: 4px 8px;
        border-radius: 8px;
    }

    /* Header padding ajustado */
    .sidebar.collapsed .sidebar-header {
        padding: 20px 0;
        display: flex;
        justify-content: center;
    }

    /* Footer border ajustado */
    .sidebar.collapsed .sidebar-footer {
        border-top: 1px solid #2d3748;
    }
}

/* Transições suaves */
.sidebar,
.main-content,
.sidebar-header h2,
.sidebar-menu .menu-item > a,
.user-info,
.logout-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevenir quebra de layout durante transição */
.sidebar * {
    transition-property: opacity, transform, background, color, width, height, padding, margin;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Estado de foco visível */
.sidebar.collapsed .sidebar-menu .menu-item > a:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: -2px;
    border-radius: 8px;
}

/* Melhorar contraste no estado ativo */
.sidebar.collapsed .sidebar-menu .menu-item.active > a i {
    color: white;
}

/* Tooltip delay para evitar flickering */
.sidebar.collapsed .sidebar-menu .menu-item > a::after,
.sidebar.collapsed .sidebar-menu .menu-item > a::before {
    transition-delay: 0.3s;
}

.sidebar.collapsed .sidebar-menu .menu-item > a:hover::after,
.sidebar.collapsed .sidebar-menu .menu-item > a:hover::before {
    transition-delay: 0s;
}