/* ===== RESPONSIVIDADE DO SISTEMA ===== */
/* Arquivo: /mapa-erderon/assets/css/responsive.css */

/* ===== 1. BREAKPOINTS PRINCIPAIS ===== */
/* Mobile First - Base styles are for mobile */

/* ===== 2. TABLET (768px+) ===== */
@media (min-width: 768px) {
    .filter-container {
        max-width: 60%;
    }

    .map-controls {
        gap: 8px;
    }

    .control-btn {
        width: 26.5px;
        height: 26.5px;
        font-size: 0;
    }
}

/* ===== 3. DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .filter-container {
        max-width: 70%;
    }
}

/* ===== 4. MOBILE (até 768px) ===== */
@media (max-width: 768px) {
    /* Fundo preto para mobile */
    html, body {
        background: #000000 !important;
    }

    /* Container principal */
    .map-container {
        height: 100vh;
        background: #000000 !important;
    }

    /* CRITICAL FIX: Map-image não deve consumir touch events */
    .map-image {
        touch-action: pan-x pan-y !important;
    }

    /* Controles de zoom - MESMA ALTURA DO BACK BUTTON */
    #mapContainer .map-controls {
        bottom: 20px !important; /* Mesma altura do back button (768px) */
        right: 15px !important; /* Afastado da parede direita (768px) */
        top: unset !important; /* Remove posição top */
        gap: 2px;
    }

    /* ESCONDE zoom+ e zoom- no mobile, mostra APENAS reset */
    #zoomIn,
    #zoomOut {
        display: none !important;
    }

    #resetView {
        display: flex !important;
        width: 36px !important; /* MESMO TAMANHO DO THEME (768px) */
        height: 36px !important; /* MESMO TAMANHO DO THEME (768px) */
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    .control-btn {
        width: 4vw;
        height: 4vw;
        font-size: 0;
        max-width: 26.5px;
        max-height: 26.5px;
        min-width: 30px;
        min-height: 30px;
        max-font-size: 18px;
        min-font-size: 14px;
    }
    
    /* LUPA DO SEARCH - DEIXAR HERDAR TUDO DO DESKTOP, APENAS AJUSTAR WIDTH E FONT */
    .search-input {
        width: 100% !important;
        font-size: 16px !important;
    }

    /* Filtros - ajustado para não sobrepor barra lateral */
    .filter-container {
        top: 60px !important;
        left: 70px !important; /* 55px (barra) + 15px (margem extra para não sobrepor) - FORÇA SOBRESCREVER */
        right: 10px !important;
        max-width: none !important;
        flex-wrap: wrap !important;
    }

    .filter-btn {
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 12px;
    }

    /* Botão TODOS visível */
    .filter-btn.all-btn {
        min-width: 50px;
    }

    /* Menu principal - MESMO TAMANHO dos side filters */
    .main-menu {
        top: 10px;
        left: 10px !important;  /* FORÇADO - posiciona pela esquerda */
        right: auto !important;  /* ANULA qualquer right */
        transform: none;
    }

    .menu-toggle {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        font-size: 14px;
    }

    /* Botão de favoritos - centralizado verticalmente com login */
    .favorites-toggle-container {
        top: 10px !important; /* Mesma altura do login (que está em 20px, ajustado para alinhar visualmente) */
        right: 65px !important; /* Afastado da borda direita (após login ~50px + gap 15px) */
    }
    
    .menu-dropdown {
        right: 0;
        left: auto;
        transform: none;
        min-width: 180px;
    }
    
    /* Status indicators */
    .status-indicators {
        bottom: 10px;
        right: 10px;
        left: 10px;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .status-indicator {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ===== 5. MOBILE PEQUENO (até 480px) ===== */
@media (max-width: 480px) {
    /* COMENTADO - Agora usa mesma config do 768px (desktop padding) */
    /* .search-input {
        padding: 8px 30px 8px 10px;
        font-size: 14px;
    } */
    
    /* Filtros em layout stack */
    .filter-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .filter-btn {
        padding: 5px 10px;
        font-size: 10px;
        min-width: 80px;
    }

    /* Menu mais compacto - MESMO TAMANHO dos side filters */
    .menu-toggle {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        font-size: 13px;
    }
    
    .menu-dropdown {
        min-width: 150px;
        font-size: 12px;
    }
    
    .menu-item {
        padding: 8px 15px;
    }
}

/* ===== 6. ORIENTAÇÃO LANDSCAPE NO MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .search-container {
        top: 5px;
        left: 5px;
    }
    
    .filter-container {
        top: 45px;
        left: 5px;
    }
    
    .map-controls {
        top: 5px;
        right: 5px;
        gap: 8px;
    }

    .main-menu {
        top: 5px;
        /* right: 60px; */  /* REMOVIDO - menu posiciona pela esquerda */
    }
}

/* ===== 7. OTIMIZAÇÕES PARA TOUCH ===== */
@media (pointer: coarse) {
    /* Área de toque para dispositivos touch */
    .control-btn {
        min-width: 26.5px;
        min-height: 26.5px;
    }
    
    .filter-btn {
        min-height: 36px;
        padding: 8px 16px;
    }
    
    .marker {
        min-width: 36px;
        min-height: 36px;
    }
    
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== 8. REDUÇÃO DE MOVIMENTO ===== */
@media (prefers-reduced-motion: reduce) {
    .marker,
    .control-btn,
    .filter-btn,
    .menu-toggle,
    .info-panel-hover {
        transition: none;
    }
    
    .marker.animate-in {
        animation: none;
    }
    
    .marker.highlighted {
        animation: none;
    }
    
    .loading-spinner {
        animation: none;
    }
}

/* ===== 9. MODO ESCURO ===== */
@media (prefers-color-scheme: dark) {
    /* COMENTADO - Estava destruindo background-image com 3 partes (searchl, searchr, searchm) */
    /* .search-input {
        background: rgba(30, 30, 30, 0.95);
        color: white;
        border-color: #555;
    } */
    
    .filter-btn {
        background: rgba(30, 30, 30, 0.9);
        color: white;
        border-color: #555;
    }
    
    .status-indicator {
        background: rgba(0, 0, 0, 0.9);
    }
}

/* ===== 10. IMPRESSÃO EXATA DA ÁREA VISÍVEL ===== */
@media print {
    @page {
        size: landscape;
        margin: 0;
    }
    
    /* Remove TODOS os elementos de interface */
    .map-controls,
    .search-container,
    .filter-container,
    .main-menu,
    .login-container,
    .theme-toggle,
    .status-indicators,
    .side-panel,
    .gallery-modal,
    .notification-container,
    .minimap,
    .print-info {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Configura página para impressão - SEM altura fixa */
    html {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
    }
    
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }
    
    /* Container do mapa - Ajustado para capturar área completa */
    .map-container {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        background: white !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
        cursor: default !important;
    }
    
    /* Mapa mantém ALL propriedades da tela */
    .map-image {
        position: absolute !important;
        /* Mantém TODAS as propriedades de transform, width, height */
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        /* Força impressão da imagem de fundo */
        background-image: url('http://erderon.com/wp-content/uploads/2025/10/mapamundi9008.jpg') !important;
    }
    
    /* Markers mantêm posição exata */
    .marker {
        position: absolute !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    /* Força impressão de cores e imagens */
    * {
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
    }
    
    /* Força altura mínima para capturar tudo */
    @page {
        size: landscape;
        margin: 0;
    }
}

/* Configuração adicional para capturar viewport completo */
@media print and (orientation: landscape) {
    html, body {
        height: 100vh !important;
        overflow: visible !important;
    }

    .map-container {
        height: 100vh !important;
        max-height: none !important;
    }
}

/* ===== 11. RESPONSIVIDADE MOBILE - SIDEBAR PRINCIPAL ===== */
@media (max-width: 768px) {
    /* Sidebar ocupa 95% da largura em mobile */
    .side-panel {
        width: 50vw;
        max-width: 50vw;
        right: -95vw; /* Começa fora da tela */
    }

    .side-panel.active {
        right: 0;
    }

    /* Botão de fechar ajustado para mobile */
    .close-panel {
        left: calc(100vw + 50px); /* Começa fora */
    }

    .side-panel.active .close-panel {
        left: calc(50vw - 45px); /* Posiciona na margem esquerda dos 50% restantes */
    }

    /* Conteúdo do sidebar mais compacto */
    .side-panel-content {
        padding: 15px;
    }

    .panel-title {
        font-size: 24px;
    }

    .panel-subtitle {
        font-size: 14px;
    }

    .panel-main-image {
        height: 150px;
    }

    /* Tópicos em coluna única */
    .topics-grid {
        grid-template-columns: 1fr !important;
    }

    /* Personagens em linha única (5 colunas) */
    .characters-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px !important;
    }
}

/* ===== 12. RESPONSIVIDADE MOBILE - SIDE FILTERS (ESQUERDA) ===== */
@media (max-width: 768px) {
    /* LINHA entre menu e side-filters */
    .sidebar-separator-line {
        top: 55px !important; /* Menu (10+38=48) + gap 3px = 51px */
    }

    /* Side filters wrapper - APÓS a linha */
    .side-filters-wrapper {
        top: 65px !important; /* Linha (51px) + altura linha 2px + gap 3px = 56px */
        left: 8px !important; /* <-- POSIÇÃO LATERAL (768px) */
        gap: 5px !important; /* <-- GAP entre os botões side-filter (768px) */
        pointer-events: none !important; /* MESMO QUE DESKTOP - wrapper não clicável */
        z-index: 1050 !important; /* MESMO QUE DESKTOP */
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Botões side filters MENORES em mobile (EXCETO grid) */
    .side-filter-btn:not(.grid-btn) {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        pointer-events: auto !important; /* FORÇA clicabilidade */
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        overflow: visible !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }

    /* Botão grid FORÇA 35px (mesmo tamanho do desktop) */
    button.side-filter-btn.grid-btn {
        width: 55px !important;
        height: 55px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Container dos side filters */
    .side-filter-container {
        width: 38px !important;
        height: 38px !important;
        pointer-events: auto !important; /* FORÇA clicabilidade */
    }

    /* Ícones ajustados proporcionalmente (EXCETO grid-icon) */
    .side-filter-icon:not(.grid-icon) {
        width: 26px !important;
        height: 26px !important;
    }

    /* Botão mute ajustado */
    .mute-button {
        width: 38px !important;
        height: 38px !important;
    }

    /* Botão grid MANTÉM tamanho desktop (35px) - NÃO ALTERAR */
}

/* ===== 13. RESPONSIVIDADE MOBILE - GRID SIDEBAR ===== */
@media (max-width: 768px) {
    /* Grid sidebar FORÇA configurações idênticas ao desktop */
    .grid-config-panel {
        width: 280px !important;
        max-width: 280px !important;
        right: -280px !important;
    }

    .grid-config-panel.active {
        right: 0 !important;
    }

    .grid-config-panel.active .close-panel {
        left: calc(100vw - 320px) !important; /* 280px sidebar + 40px margem */
    }
}

/* ===== 14. RESPONSIVIDADE MOBILE - MINIMAP E BOTÕES INFERIORES ===== */
@media (max-width: 768px) {
    /* Minimap - adiciona padding para barra de navegação */
    .minimap {
        width: 110px !important;
        height: 78px !important; /* Mantém proporção 1.41:1 do desktop (110 / 1.41 = 78) */
        bottom: 80px !important; /* 20px base + 60px para barra de navegação Android */
        left: 65px !important; /* 55px (barra) + 10px (margem) */
    }

    .minimap-viewport {
        border-width: 1px;
    }

    /* Botão Back - adiciona padding para barra de navegação */
    .back-to-site {
        top: unset !important; /* Remove conflito com propriedade top */
        bottom: 80px !important; /* Ajustado para ficar abaixo do botão mute */
    }

    /* Controles de zoom (direita) - adiciona padding para barra de navegação */
    #mapContainer .map-controls {
        top: unset !important; /* Remove conflito com propriedade top */
        bottom: 80px !important; /* 20px base + 60px para barra de navegação Android */
    }
}

/* ===== 15. RESPONSIVIDADE MOBILE - MODAL/GALLERY ===== */
@media (max-width: 768px) {
    /* Modal ocupa tela inteira */
    .gallery-modal {
        padding: 10px;
    }

    .modal-content {
        width: 95vw;
        max-width: 95vw;
        height: 90vh;
        max-height: 90vh;
        padding: 15px;
    }

    /* Imagem da galeria ajustada */
    .modal-image {
        max-height: 60vh;
    }

    /* Navegação da galeria maior para touch */
    .modal-nav-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    /* Botão fechar maior */
    .modal-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
        top: 10px;
        right: 10px;
    }

    /* Thumbnails em scroll horizontal */
    .modal-thumbnails {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
    }

    .modal-thumbnail {
        min-width: 60px;
        height: 60px;
    }
}

/* ===== 16. MOBILE PEQUENO (até 480px) - AJUSTES EXTRAS ===== */
@media (max-width: 480px) {
    /* Sidebar 100% em telas muito pequenas */
    .side-panel {
        width: 100vw;
        max-width: 100vw;
        right: -100vw;
    }

    .side-panel.active .close-panel {
        left: 10px; /* Canto esquerdo fixo */
    }

    /* Controles de zoom - MESMA ALTURA DO BACK BUTTON */
    #mapContainer .map-controls {
        bottom: 20px !important; /* Mesma altura do back button (480px) */
        right: 15px !important; /* Afastado da parede direita (480px) */
    }

    /* Tamanho do reset igual ao theme */
    #resetView {
        width: 36px !important; /* MESMO TAMANHO DO THEME (480px) */
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* Side filters ainda menores (EXCETO grid) */
    .side-filter-btn:not(.grid-btn) {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }

    .side-filter-icon:not(.grid-icon) {
        width: 24px !important;
        height: 24px !important;
    }

    /* Botão grid FORÇA 35px (mesmo tamanho do desktop) */
    button.side-filter-btn.grid-btn {
        width: 60px !important;
        height: 60px !important;
        min-width: 35px !important;
        min-height: 35px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* LINHA entre menu e side-filters - mobile pequeno */
    .sidebar-separator-line {
        top: 55px !important; /* Menu (10+35=45) + gap 3px = 48px */
    }

    /* Side filters wrapper - APÓS a linha */
    .side-filters-wrapper {
        top: 65px !important; /* Linha (48px) + altura linha 2px + gap 3px = 53px */
        left: 8px !important; /* <-- POSIÇÃO LATERAL (480px) */
        gap: 5px !important; /* <-- GAP entre os botões side-filter (480px) */
    }

    /* Botão mute menor */
    .mute-button {
        width: 35px !important;
        height: 35px !important;
    }

    /* Grid sidebar - FORÇA configurações desktop (280px) */
    .grid-config-panel {
        width: 280px !important;
        max-width: 280px !important;
        right: -280px !important;
    }

    .grid-config-panel.active .close-panel {
        left: calc(100vw - 320px) !important; /* 280px sidebar + 40px margem */
    }

    /* Minimap ainda menor - adiciona padding para barra de navegação */
    .minimap {
        width: 90px !important;
        height: 64px !important; /* Mantém proporção 1.41:1 do desktop (90 / 1.41 = 64) */
        bottom: 80px !important; /* 20px base + 60px para barra de navegação Android */
        left: 65px !important; /* 55px (barra) + 10px (margem) */
    }

    /* Botão Back - adiciona padding para barra de navegação */
    .back-to-site {
        top: unset !important; /* Remove conflito com propriedade top */
        bottom: 80px !important; /* Ajustado para ficar abaixo do botão mute */
    }

    /* Controles de zoom (direita) - adiciona padding para barra de navegação */
    #mapContainer .map-controls {
        top: unset !important; /* Remove conflito com propriedade top */
        bottom: 80px !important; /* 20px base + 60px para barra de navegação Android */
    }

    /* Modal ajustes finais */
    .modal-content {
        width: 100vw;
        padding: 10px;
    }

    .modal-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}