/* ==============================================
   SIDEBAR TOGGLE SYSTEM - v3.0 FINAL
   ============================================== */

/* --------------------
   1. VARIÁVEIS GLOBAIS
   -------------------- */
:root {
    --tutor-sidebar-width: 280px;
    --tutor-sidebar-width-collapsed: 80px;
    --tutor-sidebar-bg: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    --tutor-sidebar-text: #ffffff;
    --tutor-sidebar-accent: #AF0000;
    --tutor-sidebar-border: rgba(255, 255, 255, 0.1);
    --tutor-sidebar-hover: rgba(255, 255, 255, 0.08);
    --tutor-sidebar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------
   2. AJUSTE DE CONTEÚDO PRINCIPAL
   -------------------- */
body:not(.elementor-editor-active) {
    transition: margin-left var(--tutor-sidebar-transition);
}

/* Empurra o conteúdo principal para dar espaço para o sidebar */
.tutor-dashboard-page #primary,
.home #primary {
    margin-left: var(--tutor-sidebar-width);
    width: calc(100% - var(--tutor-sidebar-width));
    transition: var(--tutor-sidebar-transition);
}

/* Ajusta o conteúdo quando o sidebar está recolhido */
.sidebar-collapsed .tutor-dashboard-page #primary,
.sidebar-collapsed .home #primary {
    margin-left: var(--tutor-sidebar-width-collapsed);
    width: calc(100% - var(--tutor-sidebar-width-collapsed));
}

/* --------------------
   3. CONTAINER DO SIDEBAR
   -------------------- */
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--tutor-sidebar-width);
    background: var(--tutor-sidebar-bg);
    z-index: 1000;
    padding: 20px;
    transition: width var(--tutor-sidebar-transition);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
    width: var(--tutor-sidebar-width-collapsed);
    padding: 20px 10px;
}

/* Scrollbar customizada */
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper)::-webkit-scrollbar { width: 6px; }
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper)::-webkit-scrollbar-track { background: transparent; }
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper)::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 3px; }
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }


/* --------------------
   4. BOTÃO DE TOGGLE (Desktop)
   -------------------- */
.sidebar-toggle {
    display: flex; /* Visível por padrão em desktop */
    position: absolute;
    top: 20px;
    right: -18px; /* Metade para fora */
    width: 36px;
    height: 36px;
    background: #2c2c2c;
    border: 1px solid var(--tutor-sidebar-border);
    border-radius: 50%;
    color: var(--tutor-sidebar-text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: var(--tutor-sidebar-transition);
    z-index: 10;
}

/* Esconde o botão na página de aula, que tem sua própria navegação */
body.tutor-course-single .sidebar-toggle {
    display: none !important;
}

.sidebar-toggle:hover {
    background: var(--tutor-sidebar-accent);
    transform: scale(1.1);
}

body.sidebar-collapsed .sidebar-toggle {
    transform: rotate(180deg);
}

/* --------------------
   5. ÁREA DO USUÁRIO
   -------------------- */
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-area {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tutor-sidebar-border);
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-photo {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    margin: 0 auto 15px !important;
    transition: var(--tutor-sidebar-transition);
    /*border: 3px solid var(--tutor-sidebar-border);*/
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-photo img {
    border-radius: 50%;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-photo {
    width: 50px !important;
    height: 50px !important;
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-name .elementor-heading-title {
    color: var(--tutor-sidebar-text) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap;
    opacity: 1;
    transition: var(--tutor-sidebar-transition);
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-name .elementor-heading-title {
    opacity: 0;
    transform: scale(0.8);
    height: 0;
    margin: 0;
}

/* --------------------
   6. MENU DE NAVEGAÇÃO
   -------------------- */
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-widget-icon-list .elementor-icon-list-item {
    margin-bottom: 5px;
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-widget-icon-list .elementor-icon-list-item a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--tutor-sidebar-text);
    text-decoration: none;
    transition: background-color 0.2s ease, padding-left 0.3s ease;
    white-space: nowrap;
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-widget-icon-list .elementor-icon-list-item a:hover {
    background-color: var(--tutor-sidebar-hover);
    padding-left: 20px;
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-icon-list-icon {
    font-size: 18px;
    width: 24px;
    margin-right: 15px;
    text-align: center;
    transition: var(--tutor-sidebar-transition);
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-icon-list-text {
    opacity: 1;
    transition: var(--tutor-sidebar-transition);
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-icon-list-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-icon-list-icon {
    margin-right: 0;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-widget-icon-list .elementor-icon-list-item a {
    justify-content: center;
    padding: 12px;
}

/* --------------------
   7. ÁREA DO ALUNO (Rodapé)
   -------------------- */
.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    transition: var(--tutor-sidebar-transition);
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area {
    left: 10px;
    right: 10px;
}

.tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area .elementor-button {
    width: 100%;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area .elementor-button-text {
    display: none;
}

body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area .elementor-button-icon {
    margin: 0;
}


/* --------------------
   8. RESPONSIVIDADE (Mobile)
   -------------------- */
@media (max-width: 991px) {
    /* Ajusta o conteúdo para ocupar 100% da tela */
    .tutor-dashboard-page #primary,
    .home #primary {
        margin-left: 0;
        width: 100%;
    }

    /* Esconde o sidebar fora da tela */
    .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
        transform: translateX(-100%);
        transition: transform var(--tutor-sidebar-transition);
    }
    
    /* Quando o body tem a classe, mostra o sidebar */
    body.sidebar-mobile-open .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
        transform: translateX(0);
    }

    /* Ignora o estado 'collapsed' no mobile, mantendo o sidebar completo */
    body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
        width: var(--tutor-sidebar-width);
        padding: 20px;
        transform: translateX(-100%);
    }

    body.sidebar-collapsed.sidebar-mobile-open .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) {
        transform: translateX(0);
    }

    body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .elementor-icon-list-text,
    body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-name .elementor-heading-title,
    body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .student-area .elementor-button-text {
        opacity: 1;
        width: auto;
        height: auto;
        transform: none;
        overflow: visible;
        display: inline-block;
    }

    body.sidebar-collapsed .tutor-sidebar-wrapper:not(.tutor-course-single-sidebar-wrapper) .user-photo {
        width: 80px !important;
        height: 80px !important;
    }

    /* Esconde o botão de toggle do desktop */
    .sidebar-toggle {
        display: none;
    }

    /* Botão de toggle mobile (a ser criado no Elementor/JS) */
    .mobile-menu-toggle {
        display: block; /* Garante que o botão mobile seja visível */
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1001;
        /* Estilos adicionais para o botão (cor, tamanho, etc.) devem ser aplicados aqui ou via JS */
    }

    /* Overlay para escurecer o fundo */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    body.sidebar-mobile-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
}