/**
 * ============================================
 * MOBILE & TABLET LANDSCAPE ORIENTATION FIX
 * ============================================
 * Corrige o comportamento do layout em celulares e tablets
 * quando rotacionados para modo horizontal (landscape)
 */

/* ============================================
   CELULARES EM LANDSCAPE - LAYOUT ADAPTADO
   ============================================ */

/* Celulares em landscape (480-767px) - Layout horizontal otimizado */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
    /* Força controles horizontais */
    .mapboxgl-ctrl-top-left {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    /* Dashboard Weather - Sidebar compacta em landscape mobile */
    .weather-dashboard-container {
        flex-direction: row !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }

    .weather-sidebar {
        width: 280px !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 2px solid #e5e7eb !important;
        border-bottom: none !important;
        overflow-y: auto !important;
    }

    .weather-sidebar.collapsed {
        width: 50px !important;
        height: 100% !important;
    }

    /* Mapa usa espaço restante */
    .weather-map-container {
        flex: 1 !important;
        height: 100% !important;
        width: auto !important;
    }

    /* Cards de informação mais compactos */
    .weather-stats-card,
    .weather-info-card {
        padding: 8px !important;
        font-size: 13px !important;
    }

    /* Geocoder menor em celular landscape */
    .mapboxgl-ctrl-geocoder {
        min-width: 180px !important;
        max-width: 280px !important;
        height: 32px !important;
    }

    .mapboxgl-ctrl-geocoder input {
        font-size: 13px !important;
        height: 32px !important;
    }

    /* Botões de controle menores */
    .mapboxgl-ctrl-group button {
        width: 32px !important;
        height: 32px !important;
    }

    /* Toggle sidebar mais visível */
    .sidebar-toggle {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* Textos menores para economizar espaço */
    .weather-location h3,
    .weather-current-temp {
        font-size: 18px !important;
    }

    .weather-description {
        font-size: 12px !important;
    }

    /* Oculta elementos menos importantes */
    .weather-sidebar-footer,
    .weather-extra-info {
        display: none !important;
    }
}

/* Celulares pequenos em landscape (320-479px) */
@media (max-width: 479px) and (orientation: landscape) {
    /* Layout horizontal forçado */
    .mapboxgl-ctrl-top-left {
        flex-direction: row !important;
    }

    /* Dashboard ultra-compacto */
    .weather-dashboard-container {
        flex-direction: row !important;
        height: 100vh !important;
    }

    .weather-sidebar {
        width: 220px !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 1px solid #e5e7eb !important;
        border-bottom: none !important;
        font-size: 12px !important;
    }

    .weather-sidebar.collapsed {
        width: 40px !important;
    }

    .weather-map-container {
        flex: 1 !important;
        height: 100% !important;
    }

    /* Controles muito compactos */
    .mapboxgl-ctrl-geocoder {
        min-width: 150px !important;
        max-width: 200px !important;
        height: 28px !important;
    }

    .mapboxgl-ctrl-group button {
        width: 28px !important;
        height: 28px !important;
    }

    /* Cards minimalistas */
    .weather-stats-card,
    .weather-info-card {
        padding: 6px !important;
        font-size: 11px !important;
    }
}

/* ============================================
   TABLETS EM LANDSCAPE - LAYOUT DESKTOP
   ============================================ */

/* Tablets em landscape (768-1024px) - Layout normal desktop */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Mantém controles do mapa em horizontal */
    .mapboxgl-ctrl-top-left {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    /* Dashboard Weather - Layout horizontal */
    .weather-dashboard-container {
        flex-direction: row !important;
        height: calc(100vh - 80px) !important;
    }

    .weather-sidebar {
        width: 350px !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 2px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    .weather-sidebar.collapsed {
        width: 60px !important;
        height: 100% !important;
    }

    /* Mapa usa espaço restante */
    .weather-map-container {
        flex: 1 !important;
        height: 100% !important;
    }

    /* Geocoder em landscape */
    .mapboxgl-ctrl-geocoder {
        min-width: 240px !important;
        max-width: 400px !important;
    }
}

/* ============================================
   CELULARES E TABLETS EM PORTRAIT - LAYOUT MOBILE
   ============================================ */

/* APENAS em portrait - força layout vertical */
@media (max-width: 767px) and (orientation: portrait) {
    /* Força layout vertical apenas em portrait */
    .mapboxgl-ctrl-top-left {
        flex-direction: column !important;
    }

    .weather-dashboard-container {
        flex-direction: column !important;
    }

    .weather-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 60vh !important;
    }
}

/* Tablets em portrait (768px+) - Layout mobile vertical */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .mapboxgl-ctrl-top-left {
        flex-direction: column !important;
    }

    .weather-dashboard-container {
        flex-direction: column !important;
    }

    .weather-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important;
    }
}

/* ============================================
   IPADS ESPECÍFICOS
   ============================================ */

/* iPad Pro 12.9" landscape (1024x1366) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .weather-dashboard-container {
        height: calc(100vh - 70px) !important;
    }

    .weather-sidebar {
        width: 400px !important;
    }
}

/* iPad Pro 11" landscape (834x1194) */
@media (min-width: 834px) and (max-width: 1194px) and (orientation: landscape) {
    .weather-dashboard-container {
        height: calc(100vh - 70px) !important;
    }

    .weather-sidebar {
        width: 340px !important;
    }
}

/* iPad Mini/Air landscape (768x1024) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .weather-dashboard-container {
        height: calc(100vh - 70px) !important;
    }

    .weather-sidebar {
        width: 320px !important;
    }
}

/* ============================================
   CONTROLES MAPBOX LANDSCAPE
   ============================================ */

/* Em landscape, controles ficam horizontais */
@media (orientation: landscape) and (max-width: 1024px) {
    .mapboxgl-ctrl-group {
        margin: 8px !important;
    }

    .mapboxgl-ctrl-top-left,
    .mapboxgl-ctrl-top-right {
        padding: 8px !important;
    }

    /* Botões maiores para touch em landscape */
    .mapboxgl-ctrl-group button {
        width: 36px !important;
        height: 36px !important;
    }

    /* Geocoder otimizado para landscape */
    .mapboxgl-ctrl-geocoder {
        min-width: 280px !important;
        height: 40px !important;
    }

    .mapboxgl-ctrl-geocoder input {
        font-size: 14px !important;
        height: 40px !important;
    }
}

/* ============================================
   FIRESPOT, LAYERS E OUTROS DASHBOARDS
   ============================================ */

/* CELULARES em landscape - Firespot e outros dashboards */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
    /* Firespot dashboard */
    .firespot-dashboard-container {
        flex-direction: row !important;
        height: 100vh !important;
    }

    .firespot-sidebar {
        width: 280px !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 2px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    .firespot-map-container {
        flex: 1 !important;
        height: 100% !important;
    }

    /* Layers dashboard */
    .layers-dashboard-container {
        height: 100vh !important;
    }

    .satellite-wizard-container {
        max-width: 90% !important;
    }

    .wizard-step-content {
        padding: 16px !important;
    }

    .satellite-grid,
    .layer-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 12px !important;
    }
}

/* Wizard de layers em landscape - TABLETS */
@media (min-width: 768px) and (orientation: landscape) {
    .satellite-wizard-container {
        max-width: none !important;
        width: 90% !important;
    }

    .wizard-step-content {
        padding: 24px !important;
    }

    /* Grid de satélites em landscape */
    .satellite-grid,
    .layer-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Firespot dashboard em landscape - TABLETS */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .firespot-sidebar {
        width: 350px !important;
        height: 100% !important;
    }

    .firespot-map-container {
        flex: 1 !important;
    }

    .firespot-dashboard-container {
        flex-direction: row !important;
        height: calc(100vh - 70px) !important;
    }
}

/* ============================================
   MODAIS E TOOLTIPS
   ============================================ */

/* Modais maiores em landscape */
@media (orientation: landscape) and (max-width: 1024px) {
    .modal-dialog {
        max-width: 80% !important;
        width: 700px !important;
    }

    .modal-content {
        max-height: 80vh !important;
    }
}

/* Tooltips otimizados */
@media (orientation: landscape) {
    .apexcharts-tooltip {
        max-width: 300px !important;
    }

    .weather-popup,
    .alert-popup {
        max-width: 350px !important;
    }
}

/* ============================================
   NAVEGAÇÃO E HEADER
   ============================================ */

/* Header compacto em landscape */
@media (orientation: landscape) and (max-height: 600px) {
    .navbar,
    .header {
        min-height: 50px !important;
        padding: 8px 16px !important;
    }

    .page-header {
        padding: 12px 0 !important;
    }
}

/* ============================================
   PERFORMANCE E SCROLL
   ============================================ */

/* Smooth scroll em tablets */
@media (hover: none) and (pointer: coarse) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Remove overscroll bounce em landscape */
    body {
        overscroll-behavior-y: contain;
    }
}

/* ============================================
   ZOOM E TOUCH
   ============================================ */

/* Previne zoom acidental em inputs */
@media (max-width: 1024px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important; /* Previne auto-zoom no iOS */
    }
}

/* Touch targets maiores em tablets */
@media (hover: none) and (pointer: coarse) {
    button,
    .btn,
    a.btn,
    .clickable {
        min-height: 44px !important; /* iOS touch target */
        min-width: 44px !important;
    }
}

/* ============================================
   DARK MODE EM TABLETS
   ============================================ */

[data-theme="dark"] {
    /* Ajustes específicos para dark mode em landscape */
    @media (orientation: landscape) and (max-width: 1024px) {
        .weather-sidebar,
        .firespot-sidebar {
            background: rgba(30, 41, 59, 0.98) !important;
        }

        .modal-content {
            background: rgba(30, 41, 59, 0.95) !important;
        }
    }
}

/* ============================================
   FULLSCREEN MODE
   ============================================ */

/* Quando em fullscreen, usa 100% do espaço */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen {
    .weather-dashboard-container,
    .firespot-dashboard-container,
    .layers-dashboard-container {
        height: 100vh !important;
    }
}

/* ============================================
   PRINT MODE
   ============================================ */

/* Layout otimizado para impressão em landscape */
@media print and (orientation: landscape) {
    .weather-sidebar,
    .firespot-sidebar,
    .navbar,
    .sidebar {
        display: none !important;
    }

    .weather-map-container,
    .firespot-map-container {
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   SOBRESCREVE MEDIA QUERIES ANTIGAS
   ============================================ */

/* IMPORTANTE: Sobrescreve regras que forçam portrait */
/* Estas regras têm !important para sobrescrever CSS anterior */

/* Para todos os dispositivos touch em LANDSCAPE */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    /* Força layout horizontal em dispositivos touch */
    .weather-dashboard-container,
    .firespot-dashboard-container,
    .layers-dashboard-container {
        flex-direction: row !important;
        height: 100vh !important;
    }

    /* Sidebars laterais, não superiores */
    .weather-sidebar,
    .firespot-sidebar {
        width: auto !important;
        height: 100% !important;
        max-height: none !important;
        border-right: 2px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    /* Mapas ocupam espaço restante */
    .weather-map-container,
    .firespot-map-container,
    .layers-map-container {
        flex: 1 !important;
        height: 100% !important;
        width: auto !important;
    }

    /* Controles horizontais */
    .mapboxgl-ctrl-top-left,
    .mapboxgl-ctrl-top-right {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

/* Força layout horizontal para qualquer dispositivo em landscape < 1024px */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Previne flex-direction: column em landscape */
    .weather-dashboard-container:not(.force-vertical),
    .firespot-dashboard-container:not(.force-vertical) {
        flex-direction: row !important;
    }

    /* Previne width: 100% em sidebars em landscape */
    .weather-sidebar:not(.force-full-width),
    .firespot-sidebar:not(.force-full-width) {
        width: auto !important;
        max-width: 400px !important;
        min-width: 250px !important;
        height: 100% !important;
        max-height: none !important;
    }
}

/* ============================================
   FIX PARA VIEWPORT HEIGHT EM MOBILE LANDSCAPE
   ============================================ */

/* Ajusta altura considerando barra de navegação do navegador */
@media (max-width: 767px) and (orientation: landscape) {
    /* Usa altura real da viewport, não 100vh que inclui barra de URL */
    .weather-dashboard-container,
    .firespot-dashboard-container {
        height: 100dvh !important; /* dvh = dynamic viewport height */
        min-height: -webkit-fill-available !important;
    }

    /* Fallback para navegadores sem dvh */
    @supports not (height: 100dvh) {
        .weather-dashboard-container,
        .firespot-dashboard-container {
            height: calc(100vh - 60px) !important; /* Subtrai altura estimada da barra */
        }
    }

    /* Impede scroll do body em landscape mobile */
    body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Main content ocupa tudo */
    main,
    .dashboard-main {
        height: 100% !important;
        overflow: hidden !important;
    }
}

/* ============================================
   OTIMIZAÇÕES ESPECÍFICAS POR DEVICE
   ============================================ */

/* iPhone em landscape (todos os modelos) */
@media (max-width: 844px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2),
       (max-width: 844px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    
    .weather-sidebar,
    .firespot-sidebar {
        width: 260px !important;
    }

    .sidebar-toggle {
        display: flex !important; /* Sempre mostra toggle em iPhone landscape */
    }

    /* Notch/safe areas */
    .weather-dashboard-container,
    .firespot-dashboard-container {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
}

/* Android em landscape (genérico) */
@media (max-width: 767px) and (orientation: landscape) and (hover: none) {
    /* Botões maiores para touch */
    button,
    .btn,
    .mapboxgl-ctrl-group button {
        min-height: 36px !important;
        min-width: 36px !important;
    }

    /* Texto legível */
    body {
        -webkit-text-size-adjust: 100% !important;
    }
}

/* ============================================
   FALLBACK PARA NAVEGADORES ANTIGOS
   ============================================ */

/* Se orientation não é suportada, usa apenas width */
@supports not (orientation: landscape) {
    /* Assume landscape se width > 600px em dispositivos móveis */
    @media (max-width: 767px) and (min-width: 600px) {
        .weather-dashboard-container,
        .firespot-dashboard-container {
            flex-direction: row !important;
        }

        .mapboxgl-ctrl-top-left {
            flex-direction: row !important;
        }

        .weather-sidebar,
        .firespot-sidebar {
            width: 280px !important;
            height: 100% !important;
        }
    }

    /* Assume landscape para tablets */
    @media (min-width: 768px) and (max-width: 1024px) and (min-aspect-ratio: 13/9) {
        .weather-dashboard-container {
            flex-direction: row !important;
        }
    }
}

/* ============================================
   CLASSES DINÂMICAS DO JAVASCRIPT
   ============================================ */

/* Classes adicionadas pelo landscape-helper.js */

/* Quando body tem classe is-landscape */
body.is-landscape.is-mobile .weather-dashboard-container,
body.is-landscape.is-mobile .firespot-dashboard-container,
body.is-landscape.is-tablet .weather-dashboard-container,
body.is-landscape.is-tablet .firespot-dashboard-container {
    flex-direction: row !important;
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important; /* Usa custom property se disponível */
}

/* Quando body tem classe is-portrait */
body.is-portrait.is-mobile .weather-dashboard-container,
body.is-portrait.is-mobile .firespot-dashboard-container {
    flex-direction: column !important;
    height: auto !important;
}

/* Mobile landscape mode específico */
body.mobile-landscape-mode {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

body.mobile-landscape-mode main,
body.mobile-landscape-mode .dashboard-main {
    height: 100% !important;
    overflow: hidden !important;
}

/* Touch devices em landscape */
body.is-touch.is-landscape .weather-sidebar,
body.is-touch.is-landscape .firespot-sidebar {
    height: 100% !important;
    max-height: none !important;
}

/* ============================================
   SUPORTE PARA --vh CUSTOM PROPERTY
   ============================================ */

/* Usa --vh se disponível (definida pelo JavaScript) */
.weather-dashboard-container,
.firespot-dashboard-container,
.layers-dashboard-container {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}

/* Em landscape mobile, sempre usa --vh */
@media (max-width: 767px) and (orientation: landscape) {
    .weather-dashboard-container,
    .firespot-dashboard-container {
        height: calc(var(--vh, 1vh) * 100) !important;
    }
}

/* ============================================
   WEBVIEW COMPATIBILITY MODE
   ============================================ 
   Para apps nativos (WebToNative, Gonative, etc)
   Usa WIDTH ao invés de ORIENTATION queries
   ============================================ */

/* WebView: Mobile Landscape (width > height, width < 768) */
body.is-webview.is-landscape.is-mobile,
body.is-webview[data-orientation="landscape"][data-device="mobile"],
body.is-webview[data-width^="6"],
body.is-webview[data-width^="7"],
body.is-webview[data-width^="8"],
body.is-webview[data-width^="9"] {
    /* Força layout horizontal */
    .weather-dashboard-container,
    .firespot-dashboard-container,
    .layers-dashboard-container {
        flex-direction: row !important;
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    .weather-sidebar,
    .firespot-sidebar {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 100% !important;
        max-height: none !important;
        position: relative !important;
        border-right: 2px solid #e5e7eb !important;
        border-bottom: none !important;
    }

    .weather-map-container,
    .firespot-map-container {
        flex: 1 !important;
        height: 100% !important;
        width: auto !important;
        position: relative !important;
    }
}

/* WebView: Fallback usando apenas WIDTH (ignora orientation query) */
@media (min-width: 600px) and (max-width: 900px) and (min-aspect-ratio: 4/3) {
    body.is-webview .weather-dashboard-container,
    body.is-webview .firespot-dashboard-container,
    body.is-webview .layers-dashboard-container {
        flex-direction: row !important;
        height: 100vh !important;
    }

    body.is-webview .weather-sidebar,
    body.is-webview .firespot-sidebar {
        width: 280px !important;
        height: 100% !important;
        max-height: none !important;
    }

    body.is-webview .weather-map-container,
    body.is-webview .firespot-map-container {
        flex: 1 !important;
        height: 100% !important;
    }
}

/* WebView: Força inline styles aplicados por JavaScript */
body.is-webview .forced-landscape-layout {
    flex-direction: row !important;
    height: 100vh !important;
}

/* WebView: Override agressivo para sidebars */
body.is-webview.is-landscape .weather-sidebar,
body.is-webview.is-landscape .firespot-sidebar {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100% !important;
    max-height: 100% !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

/* WebView: Controles Mapbox sempre horizontal em landscape */
body.is-webview.is-landscape .mapboxgl-ctrl-top-left,
body.is-webview.is-landscape .mapboxgl-ctrl-top-right {
    flex-direction: row !important;
}

/* ============================================
   DEBUG MODE (descomente para testar)
   ============================================ */

/* Descomente para visualizar orientação atual */
/*
body::before {
    content: "PORTRAIT";
    position: fixed;
    top: 10px;
    right: 10px;
    background: red;
    color: white;
    padding: 10px;
    z-index: 99999;
    font-weight: bold;
    pointer-events: none;
}

body.is-landscape::before {
    content: "LANDSCAPE";
    background: green;
}

body.is-mobile::before {
    content: "MOBILE - " attr(data-orientation);
}

body.is-tablet::before {
    content: "TABLET - " attr(data-orientation);
    background: blue;
}

body.is-desktop::before {
    content: "DESKTOP";
    background: gray;
}
*/