/* assets/css/style.css */

:root {
    /* O segredo para mobile: altura dinâmica real */
    --app-height: 100dvh;
}

html, body {
    width: 100%;
    height: var(--app-height);
    margin: 0;
    padding: 0;
    overflow: hidden !important; /* Impede qualquer scroll "fantasma" */
    position: fixed; /* Evita que o navegador tente rolar ao arrastar no 3D */
    background-color: #0f172a;
}

#app-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--app-height);
    touch-action: none; /* CRÍTICO: Impede que o zoom do navegador interfira no Smart Zoom */
}

.view-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

    .view-layer.active {
        display: block;
    }

/* UI Layer: Permite clicar no botão, mas não bloqueia o toque no mapa atrás */
#ui-layer {
    pointer-events: none;
    z-index: 1050;
}

.pointer-events-auto {
    pointer-events: auto;
}

#app-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* As classes do Offcanvas e Legenda entrarão no UI Layer depois */

/* A MÁGICA DO CROSSFADE */
.view-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s ease-in-out;
    opacity: 0;
    pointer-events: none; /* Desliga interações quando invisível */
}

    .view-layer.active {
        opacity: 1;
        pointer-events: auto; /* Liga interações quando visível */
    }

/* Estilo do Botão */
#btn-toggle-3d {
    /*position: absolute;*/
    top: 20px;
    right: 20px;
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-toggle-3d:hover {
        background-color: #2563EB;
    }

/*#btn-toggle-2d {*/
    /*position: absolute;*/
    /*top: 20px;
    right: 20px;
    pointer-events: auto;*/ /* Para ser clicável dentro da UI Layer */
    /*padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;*/
    /*background-color: #3B82F6;*/
    /*border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-toggle-2d:hover {
        background-color: #2563EB;
    }*/

#btn-reset-view {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-reset-view:hover {
        background-color: #2563EB;
    }

#btn-auto-rotate {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-auto-rotate:hover {
        background-color: #2563EB;
    }

#btn-show-legend {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-show-legend:hover {
        background-color: #2563EB;
    }

/**/
#btn-toggle-light {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-toggle-light:hover {
        background-color: #2563EB;
    }

#btn-qrcode {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}

    #btn-qrcode:hover {
        background-color: #2563EB;
    }
#btn-whereami {
    /*position: relative;*/
    top: 20px;
    /*right: 20px;*/
    pointer-events: auto; /* Para ser clicável dentro da UI Layer */
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    /*background-color: #3B82F6;*/
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: background 0.2s;
}
    #btn-togglegov:hover {
        background-color: #2563EB;
    }

/* ==========================================
   HUD GÊMEO DIGITAL (Caixa de Informações)
   ========================================== */
#info-panel {
    position: absolute;
    bottom: 25px;
    left: 20px;
    width: 340px;
    background: rgba(10, 14, 26, 0.85); /* Azul marinho escuro do Claude */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 12px;
    padding: 20px;
    color: #e0e8f0;
    font-family: 'Courier New', Courier, monospace; /* Toque técnico */
    transform: translateX(-150%); /* Esconde fora da tela à esquerda */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1060;
}

    #info-panel.visible {
        transform: translateX(0); /* Desliza para dentro da tela */
    }

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

#info-category {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4fc3f7;
    border: 1px solid #4fc3f7;
    padding: 3px 10px;
    border-radius: 12px;
}

#info-title {
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 700;
    color: #ffffff;
}

#info-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #94a3b8;
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
}


/* ==========================================
   ROTEAMENTO VISUAL (Yazo vs PWA vs Desktop)
   ========================================== */

/* Por defeito (Mobile PWA): Oculta Header, Mostra Bottom Nav */
#app-header {
    display: none !important;
}

#bottom-nav {
    display: flex !important;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1050;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
}

/* Se for Yazo ou Desktop (Media Query): Inverte a lógica */
html.platform-yazo #app-header,
@media (min-width: 992px) {
    #app-header {
        display: flex !important;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1050;
    }

    #bottom-nav {
        display: none !important;
    }
}

html.platform-desktop #app-header {
    display: flex !important;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1050;
}

html.platform-desktop #bottom-nav {
    display: none !important;
}

/* ==========================================
   O HUD TRANSLÚCIDO (Info Panel)
   ========================================== */
#info-panel {
    position: absolute;
    /* Adapta a posição vertical dependendo se a Bottom Nav existe */
    bottom: var(--nav-mode, 'bottom') === 'bottom' ? 80px : 25px;
    left: 20px;
    width: 340px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 195, 247, 0.3);
    border-radius: 12px;
    transform: translateX(-150%); /* Escondido à esquerda */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1060;
}

    #info-panel.visible {
        transform: translateX(0); /* Desliza para o ecrã */
    }

/* Ajustes para ecrãs pequenos (Mobile) */
@media (max-width: 576px) {
    #info-panel {
        left: 10px;
        right: 10px;
        width: auto; /* Ocupa quase a largura total */
        bottom: 75px; /* Acima da Bottom Nav */
    }
    /* Se for Yazo no telemóvel, cola no fundo pois não há bottom nav */
    html.platform-yazo #info-panel {
        bottom: 20px;
    }
}

/* ==========================================
   RESPONSIVIDADE DAS GAVETAS (Offcanvas e Modal)
   ========================================== */
@media (min-width: 992px) {
    #legendOffcanvas {
        width: 380px !important;
    }

    /* Faz o modal abrir como uma gaveta lateral ao lado da legenda no Desktop */
    #dynamicModal .modal-dialog {
        position: absolute;
        left: 390px; /* Logo a seguir ao Offcanvas */
        top: 20px;
        bottom: 20px;
        margin: 0;
        width: 400px;
        max-width: 400px;
        height: calc(100% - 40px);
    }

    #dynamicModal .modal-content {
        height: 100%;
        border-radius: 12px;
    }
}

/* ==========================================
   SCROLLBAR INVISÍVEL (Legenda e Offcanvas)
   ========================================== */
#legend-tree-container,
.offcanvas-body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

    #legend-tree-container::-webkit-scrollbar,
    .offcanvas-body::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* ==========================================
   ARQUITETURA BIMODAL DA LEGENDA
   ========================================== */

/* 1. MODO DESKTOP (Master-Detail Lateral) */
@media (min-width: 992px) {
    #esx-legend-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 420px;
        height: 100vh;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(79, 195, 247, 0.3);
        z-index: 1040;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    #esx-legend-container.active { transform: translateX(0); }
}

/* 2. MODO MOBILE (Bottom Sheet Telescópico tipo Google Maps) */
@media (max-width: 991px) {
    #esx-legend-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(15px);
        border-top: 1px solid rgba(79, 195, 247, 0.4);
        border-radius: 20px 20px 0 0;
        z-index: 1040;
        
        /* A MÁGICA DOS DEGRAUS */
        height: 85vh; /* Altura máxima quando totalmente aberta */
        transform: translateY(calc(100% - 70px)); /* Degrau 1: Mostra só 70px (Cabeçalho/Busca) */
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* Efeito elástico */
        overflow-y: hidden; /* Trava o scroll no degrau 1 */
    }

    /* Degrau 2: Meia Tela (quando clicado/arrastado) */
    #esx-legend-container.half-open {
        transform: translateY(50%);
        overflow-y: auto;
    }

    /* Degrau 3: Tela Cheia */
    #esx-legend-container.full-open {
        transform: translateY(0);
        overflow-y: auto;
    }

    /* Puxador visual (Handle) no topo da aba mobile */
    #esx-legend-container::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 5px;
        background: rgba(255,255,255,0.3);
        border-radius: 5px;
    }
}