/* ==========================================================
   ANEXO MOBILE RESPONSIVE FRAMEWORK (Gaveta/Off-canvas)
   ========================================================== */

/* -----------------------------------------
   MEDIA QUERY PRINCIPAL (Tablets/Mobiles)
   ----------------------------------------- */
@media (max-width: 900px) {
    /* SIDEBAR (Draw-out Mode) */
    .sidebar {
        position: fixed !important;
        left: -320px !important; /* Hide off-screen by default */
        top: 0;
        bottom: 0;
        width: 280px !important;
        z-index: 9999 !important;
        transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
        background: rgba(30, 41, 59, 0.98) !important; /* Darker blur */
        backdrop-filter: blur(25px) !important;
        box-shadow: 4px 0 25px rgba(0,0,0,0.5) !important;
        padding: 1.5rem 1rem !important;
    }
    
    /* Quando a classe 'expanded' é adicionada via JS */
    .sidebar.expanded {
        left: 0 !important;
    }

    /* Mostrar botões de menu nativos do Topbar */
    .menu-toggle {
        display: inline-flex !important;
        margin-right: 0.75rem !important;
        z-index: 1000 !important;
    }

    /* Ajuste do Título da Aba no celular */
    .topbar .page-title h1 {
        font-size: 1.25rem !important;
    }

    /* Main Content passa a ocupar 100% da tela */
    .main-content {
        margin: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        border-radius: 0 !important;
    }

    /* Desligar colunas laterais da estrutura dashboard principal */
    .dashboard-wrapper {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }
    
    .middle-col, .right-col {
        width: 100% !important;
        height: auto !important;
        overflow-y: visible !important;
        flex: none !important;
    }
}

/* -----------------------------------------
   MEDIA QUERY CELULARES (Mobile)
   ----------------------------------------- */
@media (max-width: 768px) {
    /* Ajuste Tipográfico Geral */
    body {
        font-size: 14px !important;
    }

    /* Transformar todas as Grades (Grids) em 1 Coluna */
    .feature-grid-inner,
    .performance-grid, 
    .performance-bottom-grid, 
    .crono-grid, 
    .q-features-grid,
    .study-hub-grid,
    .suporte-grid,
    .materiais-grid,
    .pratica-layout,
    .filter-grid,
    .simulados-grid,
    .highlight-row,
    .stats-grid,
    .essay-grid,
    .dashboard-wrapper,
    .info-cards-row,
    .redacoes-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        display: grid !important; /* as vezes o desktop usa flex, forçamos o stack */
    }

    /* Topbar adjustments para celular */
    .topbar {
        padding: 0.75rem 1rem !important;
        border-radius: 0 0 15px 15px !important;
        margin: 0 0 1rem 0 !important;
        flex-wrap: nowrap !important;
    }
    
    /* Ocultar nomes muito longos no avatar */
    .user-info .greeting, 
    .user-info p {
        display: none !important;
    }
    .topbar .user-profile {
        padding: 0.25rem !important;
    }
    
    /* Espaçamentos de Cards e Main Container Reduzidos para caber na tela */
    .question-card, 
    .glass-panel,
    .suporte-card {
        padding: 1.25rem !important;
    }

    /* Card Promocional (Cronograma) */
    .promo-card {
        padding: 1.5rem !important;
        flex-direction: column !important;
        text-align: center;
        gap: 1rem !important;
    }
    .promo-illustration img {
        width: 130px !important;
        margin: 0 auto;
        display: block;
    }

    /* Filtros e Controles horizontais passando para vertical */
    .filtros-header form,
    .subject-filters,
    .ranking-top-cards {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: stretch !important; /* Fazer com que inputs ocupem 100% */
    }

    .glass-input, .glass-search, .glass-select {
        width: 100% !important;
    }

    /* Botão Flutuante IA */
    .assistant-btn {
        position: fixed !important;
        bottom: 1.5rem !important;
        right: 1.5rem !important;
        z-index: 100 !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        padding: 0.75rem !important; /* botao mais quadrado */
        border-radius: 50% !important; /* circular no mobile */
    }
    
    .tutor-label {
        display: none !important; /* Apenas mostra o avatar no mobile, salva espaço */
    }
    
    /* Garantir que as tabelas de ranking ou historico não estourem a tela (scroll = true) */
    .ranking-table-container,
    .historico-tabela,
    .review-table-wrapper {
        overflow-x: auto !important;
        display: block !important;
    }

    /* ========== ADJUSTMENTS FOR FILTERS, SETTINGS, AND COMPONENTS ========== */
    .filter-builder { padding: 1.25rem !important; }
    .filter-header {
        flex-direction: column !important;
        text-align: center;
        gap: 1rem;
    }
    .filter-header-illustration img { max-height: 80px; }
    .filter-actions-footer {
        flex-direction: column !important;
        gap: 0.75rem;
    }
    .filter-actions-footer .btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Fixed inline settings grids */
    .settings-form { grid-template-columns: 1fr !important; }
    .settings-layout { padding: 1rem !important; }
    .settings-section { padding: 1.25rem !important; }
    .settings-form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Provas / Pratica header card padding & image overlaps */
    .pratica-header-card {
        padding: 1.5rem !important;
        flex-direction: column;
        text-align: center;
    }
    .pratica-header-card .header-illustration { margin-top: 1rem; }
    .pratica-header-card .header-illustration img { max-width: 180px; }

    /* Date Filter improvements to prevent overlap */
    .date-filter-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        align-items: stretch;
    }
    .date-filter-group i { display: none; }
    .date-filter-group .date-input { width: 100%; }
    .date-filter-group span { text-align: center; font-weight: 500; color: #64748b; }
    .date-filter-group .btn-filter-apply { width: 100%; margin-top: 0.5rem; }

    /* Inputs & Wrapper fixes */
    .chip-group { flex-wrap: wrap !important; }
    .input-wrapper, .input-wrapper .glass-input {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* -----------------------------------------
   AJUSTES FINAIS PARA CELULARES MUITO PEQUENOS
   ----------------------------------------- */
@media (max-width: 480px) {
    .promo-card h2 {
        font-size: 1.5rem !important;
    }
    .feature-header .card-title {
        font-size: 1rem !important;
    }
    .stat-value {
        font-size: 1.25rem !important;
    }
    .topbar .page-title h1 {
        font-size: 1.05rem !important; /* Reduz brutalmente se o título da página for longo */
    }
}