/* =========================================================================
   MOBILE.CSS - Centralização de ajustes visuais para dispositivos móveis
   ========================================================================= */

@media (max-width: 768px) {

    /* =========================================================================
       SEÇÃO 1: CLASSES UTILITÁRIAS REUTILIZÁVEIS
       ========================================================================= */

    /* ----- Grid Utilities ----- */
    .mobile-grid-2col {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .mobile-grid-1col {
        grid-template-columns: 1fr !important;
    }

    .mobile-stack {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* ----- Visibility ----- */
    .mobile-hide {
        display: none !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* ----- Forms ----- */
    .mobile-form input,
    .mobile-form select,
    .mobile-form textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .mobile-form .form-row {
        flex-direction: column !important;
        gap: 12px;
    }

    .mobile-form button[type="submit"] {
        width: 100%;
    }

    /* ----- Containers ----- */
    .mobile-container {
        padding: 12px !important;
    }

    .mobile-card {
        padding: 12px !important;
        margin: 0 !important;
    }

    /* ----- Typography ----- */
    .mobile-text-sm {
        font-size: 14px !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    /* Header Fixes for ALL Mobile Devices (up to 768px) */
    .nav-toggle-tools span {
        display: none !important;
    }

    /* CAUSA RAIZ: main-nav tem width:100% no breakpoint 1024px, afetando layout flex.
       Ocultamos completamente no mobile pois seus links são .desktop-only */
    .main-nav {
        display: none !important;
    }

    .header-shell {
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        align-items: center !important;
    }

    /* Permite que os filhos diretos participem do grid flex do pai */
    .header-content {
        display: contents !important;
    }

    /* margin-left: auto para .search-toggle-mobile já existe em style.css linha 6002 */

    /* =========================================================================
       SEÇÃO 2: PÁGINA /materials (Toolbar de Filtros)
       ========================================================================= */

    /* Container quebra linha */
    .search-bar-container {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    /* Input de busca sobe para a primeira linha e ocupa tudo */
    .search-bar-container>div[style*="flex-grow: 1"] {
        order: -1;
        width: 100%;
        flex-basis: 100%;
    }

    /* Filtros (Moeda e Ordenação) ficam lado a lado na linha de baixo */
    .search-bar-container>div[style*="display: flex"],
    #sort-filter {
        flex: 1;
        width: auto !important;
        justify-content: center;
        margin-left: 0 !important;
        min-width: 0 !important;
    }

    /* Ajuste de espaçamento entre os filtros */
    .search-bar-container>div[style*="display: flex"] {
        gap: 8px;
    }

    /* Botão de moeda ocupa 100% do seu container flex */
    #currency-filter {
        max-width: none;
        width: 100%;
    }

    /* Cards de materiais */
    .material-card {
        padding: 12px;
    }

    .material-card .material-image {
        height: 120px;
    }

    .material-card .material-title {
        font-size: 14px;
        line-height: 1.3;
    }

    .material-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* Subtag Pills - Scroll Horizontal no Mobile */
    .subtag-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 12px;
    }

    .subtag-pills::-webkit-scrollbar {
        display: none;
    }

    .subtag-pill {
        flex-shrink: 0;
    }

    /* =========================================================================
       SEÇÃO 3: PÁGINA /video/{id} (Player de Vídeo)
       ========================================================================= */

    .video-page-layout,
    .video-container-layout {
        flex-direction: column !important;
    }

    .video-sidebar,
    .video-ad-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        order: 2;
    }

    .video-main-content {
        width: 100% !important;
    }

    .video-player-wrapper {
        aspect-ratio: 16/9;
        width: 100%;
    }

    .video-actions-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .video-actions-bar .btn {
        flex: 1;
        min-width: 80px;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* =========================================================================
       SEÇÃO 4: PÁGINA /videos e /videos/popular (Grid de Vídeos)
       ========================================================================= */

    .videos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .video-card .video-thumbnail {
        height: 100px;
    }

    .video-card .video-title {
        font-size: 13px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .video-card .video-meta {
        font-size: 11px;
    }

    /* =========================================================================
       SEÇÃO 5: PÁGINA /channels (Lista de Canais)
       ========================================================================= */

    .channels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .channel-card {
        padding: 12px;
    }

    .channel-card .channel-avatar {
        width: 48px;
        height: 48px;
    }

    .channel-card .channel-name {
        font-size: 14px;
    }

    /* =========================================================================
       SEÇÃO 6: PÁGINA /channels/{id} (Detalhes do Canal)
       ========================================================================= */

    .channel-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .channel-tabs::-webkit-scrollbar {
        display: none;
    }

    .channel-tabs .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .channel-videos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .channel-banner-wrapper {
        min-height: 160px;
        max-height: 240px;
    }

    /* =========================================================================
       SEÇÃO 7: PÁGINA /channels/countries (Países)
       ========================================================================= */

    .countries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .country-card {
        padding: 16px;
    }

    .country-card .country-flag {
        font-size: 32px;
    }

    /* =========================================================================
       SEÇÃO 8: PÁGINA /categories/{slug}
       ========================================================================= */

    .category-videos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    /* =========================================================================
       SEÇÃO 9: PÁGINA /inventory (Cards Empilhados)
       ========================================================================= */

    .inventory-table-wrapper {
        display: none;
    }

    .inventory-mobile-cards {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    .inventory-mobile-card {
        background: var(--card, #1a1a2e);
        border: 1px solid var(--border, #333);
        border-radius: 12px;
        padding: 16px;
    }

    .inventory-mobile-card .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .inventory-mobile-card .item-name {
        font-weight: 600;
        font-size: 15px;
    }

    .inventory-mobile-card .item-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        font-size: 13px;
    }

    .inventory-mobile-card .item-actions {
        margin-top: 12px;
        display: flex;
        gap: 8px;
    }

    .inventory-mobile-card .item-actions .btn {
        flex: 1;
    }

    /* =========================================================================
       SEÇÃO 10: PÁGINA /faq e /faq/{slug}
       ========================================================================= */

    .faq-list {
        padding: 0 12px;
    }

    .faq-item {
        padding: 16px;
    }

    .faq-item .faq-question {
        font-size: 15px;
    }

    .faq-item .faq-answer {
        font-size: 14px;
        line-height: 1.6;
    }

    .faq-content {
        padding: 16px;
    }

    /* =========================================================================
       SEÇÃO 11: PÁGINAS DE AUTENTICAÇÃO
       /login, /register, /forgot-password, /reset-password
       ========================================================================= */

    .auth-container {
        padding: 16px;
        max-width: 100%;
    }

    .auth-form {
        padding: 24px 16px;
    }

    .auth-form input {
        width: 100%;
        padding: 14px 16px;
        font-size: 16px;
        /* Previne zoom no iOS */
    }

    .auth-form .btn-submit {
        width: 100%;
        padding: 16px;
        font-size: 16px;
    }

    .auth-form .form-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* =========================================================================
       SEÇÃO 12: PÁGINA /settings
       ========================================================================= */

    .settings-layout {
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border, #333);
    }

    .settings-content {
        padding: 16px;
    }

    .settings-section {
        padding: 16px;
    }

    /* =========================================================================
       SEÇÃO 13: PÁGINAS /contact e /suggest-channel (Formulários)
       ========================================================================= */

    .contact-form,
    .suggest-form {
        padding: 16px;
    }

    .contact-form input,
    .contact-form textarea,
    .suggest-form input,
    .suggest-form textarea {
        width: 100%;
        font-size: 16px;
        /* Previne zoom no iOS */
    }

    .contact-form button,
    .suggest-form button {
        width: 100%;
    }

    /* =========================================================================
       SEÇÃO 14: PÁGINA /terms
       ========================================================================= */

    .terms-content {
        padding: 16px;
        font-size: 15px;
        line-height: 1.7;
    }

    .terms-content h1,
    .terms-content h2 {
        font-size: 1.3rem;
    }

    /* =========================================================================
       SEÇÃO 15: PÁGINA /calculators
       ========================================================================= */

    .calculator-container {
        padding: 16px;
    }

    .calculator-form {
        flex-direction: column;
    }

    .calculator-form .form-group {
        width: 100%;
    }

    .calculator-form input,
    .calculator-form select {
        width: 100%;
        font-size: 16px;
    }

    .calculator-results {
        padding: 16px;
    }

    /* =========================================================================
       SEÇÃO 16: PÁGINA /projects (Grid de Projetos)
       ========================================================================= */

    .projects-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .project-card {
        padding: 16px;
    }

    .project-card .project-progress {
        height: 8px;
    }

    /* =========================================================================
       SEÇÃO 17: PÁGINA /projects/{id} (Detalhes do Projeto)
       ========================================================================= */

    .project-details-layout {
        flex-direction: column;
    }

    .project-details-sidebar {
        width: 100%;
        order: 2;
    }

    .project-details-main {
        width: 100%;
    }

    .project-form input,
    .project-form select,
    .project-form textarea {
        width: 100%;
    }

    .project-timeline {
        padding-left: 24px;
    }

    /* =========================================================================
       SEÇÃO 18: PÁGINA /guides (Grid de Guias)
       ========================================================================= */

    .guides-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .guide-card {
        padding: 16px;
    }

    .guide-card .guide-cover {
        height: 140px;
    }

    /* =========================================================================
       SEÇÃO 19: PÁGINA /guides/{slug} (Conteúdo do Guia + FAB TOC)
       ========================================================================= */

    .guide-layout {
        flex-direction: column;
    }

    .guide-toc-sidebar {
        display: none;
    }

    .guide-content {
        width: 100%;
        padding: 16px;
    }

    /* FAB - Botão Flutuante para TOC */
    .toc-fab {
        position: fixed;
        bottom: 80px;
        right: 16px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--accent, #ff66cc);
        color: white;
        border: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1000;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .toc-fab:active {
        transform: scale(0.95);
    }

    .toc-fab svg {
        width: 24px;
        height: 24px;
    }

    /* Modal TOC */
    .toc-modal {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1001;
        display: none;
        align-items: flex-end;
    }

    .toc-modal.active {
        display: flex;
    }

    .toc-modal-content {
        background: var(--card, #1a1a2e);
        width: 100%;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        padding: 24px 16px;
        overflow-y: auto;
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .toc-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border, #333);
    }

    .toc-modal-title {
        font-size: 18px;
        font-weight: 600;
    }

    .toc-modal-close {
        background: none;
        border: none;
        color: var(--text-secondary, #999);
        cursor: pointer;
        padding: 8px;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .toc-list li {
        padding: 12px 0;
        border-bottom: 1px solid var(--border, #222);
    }

    .toc-list a {
        color: var(--text-primary, #fff);
        text-decoration: none;
        font-size: 15px;
    }

    /* =========================================================================
       SEÇÃO 20: PÁGINA / (Homepage)
       ========================================================================= */

    .homepage-layout {
        flex-direction: column;
    }

    .homepage-sidebar {
        display: none;
    }

    .hero-section {
        padding: 24px 16px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

}

/* =========================================================================
   BREAKPOINT MENOR: 480px (Mobile Pequeno)
   ========================================================================= */

@media (max-width: 480px) {

    /* Grids viram 1 coluna */
    .videos-grid,
    .channels-grid,
    .material-category-grid,
    .countries-grid,
    .category-videos,
    .channel-videos-grid {
        grid-template-columns: 1fr !important;
    }

    /* Cards ainda menores */
    .video-card .video-thumbnail {
        height: 140px;
    }

    .video-card .video-title {
        font-size: 14px;
    }

    /* Botões empilhados */
    .video-actions-bar {
        flex-direction: column;
    }

    .video-actions-bar .btn {
        width: 100%;
    }

    /* Auth forms mais compactos */
    .auth-form {
        padding: 20px 12px;
    }

}

/* =========================================================================
   DESKTOP: Ocultar elementos mobile-only
   ========================================================================= */

@media (min-width: 769px) {

    .mobile-only {
        display: none !important;
    }

    .toc-fab {
        display: none !important;
    }

    .toc-modal {
        display: none !important;
    }

    .inventory-mobile-cards {
        display: none !important;
    }

}