/* Layout Base do Dashboard */
body, html { margin: 0; padding: 0; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f6f9; }
.app-container { display: flex; height: 100vh; overflow: hidden; }

/* Sidebar Esquerda */
.sidebar { width: 280px; background-color: #003c77; color: #fff; display: flex; flex-direction: column; transition: all 0.3s; }
.sidebar-header { padding: 10px; background-color: #002850; text-align: center; }
.sidebar-header h2 { margin: 0; font-size: 22px; color: #f8f9fa; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; flex-grow: 1; overflow-y: auto; }
.sidebar-menu li a { display: block; padding: 15px 20px; color: #c2c7d0; text-decoration: none; border-left: 4px solid transparent; transition: all 0.2s; }
.sidebar-menu li a:hover, .sidebar-menu li a.active { background-color: #2e6499; color: #fff; border-left-color: #1a73e8; }
.sidebar-menu li a i { margin-right: 10px; width: 20px; text-align: center; }

/* Área Principal Direita */
.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 25px; /* Trava o espaçamento lateral */
    min-height: 70px; /* Trava a altura mínima, impedindo que encolha */
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0; /* Diz para o navegador: NUNCA encolha este elemento! */
    width: 100%;
}
.user-info { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #495057; }
.badge { background-color: #1a73e8; color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; font-weight: bold; }
.btn-logout { background: none; border: none; color: #dc3545; cursor: pointer; font-weight: bold; font-size: 14px; }
.btn-logout:hover { text-decoration: underline; }

/* Conteúdo Dinâmico */
.content-area { padding: 20px; flex-grow: 1; overflow-y: auto; }
.welcome-screen { text-align: center; padding-top: 50px; color: #6c757d; }

/* ========================================= */
/* ESTILOS DO LOADER GLOBAL (Dashboard)      */
/* ========================================= */
#loadingOverlayGlobal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* Transição suave para aparecer e sumir */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Quando o JS adiciona essa classe, o loader some com fade out */
.loading-overlay-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none; /* Impede de clicar no invisível */
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    font-family: sans-serif;
}

/* Spinner */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top: 5px solid #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========================================= */
/* MENU EM ÁRVORE (HIERARQUIA E ANIMAÇÃO)    */
/* ========================================= */

/* 1. Fonte e espaçamento da Pasta Pai */
.sidebar-menu li a { 
    display: block; 
    padding: 12px 20px; /* Diminuímos o padding vertical */
    color: #c2c7d0; 
    text-decoration: none; 
    border-left: 4px solid transparent; 
    transition: all 0.2s; 
    font-size: 14.5px; /* <-- Fonte reduzida para o Pai */
}

/* Mantém o hover da pasta pai intacto */
.sidebar-menu li a:hover, .sidebar-menu li a.active { 
    background-color: #2e6499; 
    color: #fff; 
    border-left-color: #1a73e8; 
}

.sidebar-menu li a i { 
    margin-right: 10px; 
    width: 20px; 
    text-align: center; 
}

/* 2. Esconde o submenu com a Mágica do Slide (Deslizar) */
.sidebar-submenu {
    list-style: none;
    padding: 0 0 0 25px; /* Recuo para dentro */
    margin: 0;
    max-height: 0; /* Começa fechado com altura zero */
    overflow: hidden; /* Esconde o conteúdo que vazar da altura zero */
    transition: max-height 0.4s ease-in-out; /* Transição suave de altura */
}

/* Quando o JS adiciona a classe open, a altura aumenta suavemente */
.sidebar-submenu.open {
    max-height: 400px; /* Altura máxima imaginária para caber os itens */
}

/* 3. Fonte e espaçamento das Telas Filhas (Arquivos) */
.sidebar-submenu li a {
    font-size: 12px; 
    padding: 10px 15px; 
    color: #adb5bd;
}

/* 4. A mágica das linhas conectoras */
.sidebar-submenu li {
    position: relative;
}

/* Linha vertical principal */
.sidebar-submenu li::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    border-left: 1px solid #6c757d;
}

/* Linha horizontal apontando para o item */
.sidebar-submenu li::after {
    content: '';
    position: absolute;
    top: 20px; /* Ajustado para o meio do novo tamanho da fonte */
    left: -12px;
    width: 12px;
    border-top: 1px solid #6c757d;
}

/* O último item da lista corta a linha vertical na metade (Estilo L) */
.sidebar-submenu li:last-child::before {
    bottom: auto;
    height: 20px; 
}

/* 5. Ajustes nos botões de menu para acomodar a setinha */
.menu-parent {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.menu-parent .toggle-icon {
    font-size: 11px;
    transition: transform 0.4s ease; /* A setinha também gira de forma suave */
}

.menu-parent.open .toggle-icon {
    transform: rotate(90deg); /* Gira a setinha para baixo */
}

/* ========================================= */
/* MENU RECOLHÍVEL (MINIFY / COLLAPSE)       */
/* ========================================= */

/* Garante que a barra inteira tenha transição de largura */
.sidebar {
    transition: width 0.4s ease-in-out;
}

/* Transição suave para os textos sumirem */
.menu-text, .menu-text-logo {
    display: inline-block;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out;
}

/* ----------------------------------------- */
/* QUANDO A CLASSE .collapsed É ATIVADA      */
/* ----------------------------------------- */

.sidebar.collapsed {
    width: 75px; /* Deixa o menu fininho */
}

/* Esconde os textos */
.sidebar.collapsed .menu-text, 
.sidebar.collapsed .menu-text-logo {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Esconde a setinha da pasta pai */
.sidebar.collapsed .toggle-icon {
    display: none;
}

/* Centraliza os botões e remove o recuo */
.sidebar.collapsed .sidebar-menu li a {
    padding: 15px 0;
    justify-content: center !important;
    text-align: center;
}

.sidebar.collapsed .sidebar-menu li a i {
    margin-right: 0;
    font-size: 18px; /* Aumenta um pouquinho o ícone */
}

/* Ajusta o submenu para ficar centralizado e sem linhas conectoras */
.sidebar.collapsed .sidebar-submenu {
    padding-left: 0;
}

.sidebar.collapsed .sidebar-submenu li::before,
.sidebar.collapsed .sidebar-submenu li::after {
    display: none; /* Tira a árvore de linhas para não bugar o visual */
}

/* Define a velocidade do giro para acompanhar o encolhimento do menu */
#iconToggleSidebar {
    transition: transform 0.4s ease-in-out;
}

/* Quando o menu ganha a classe .collapsed, a seta gira 180 graus (apontando pra direita) */
.sidebar.collapsed #iconToggleSidebar {
    transform: rotate(180deg);
}

/* Opcional: Centraliza o botão de seta quando o menu está encolhido */
.sidebar.collapsed .sidebar-header {
    justify-content: center !important;
    padding-left: 0;
    padding-right: 0;
}

/* ========================================= */
/* AJUSTE DINÂMICO PARA TABLETS              */
/* ========================================= */

@media (max-width: 1200px) {
    /* Por padrão, forçamos o início como colapsado em tablets */
    .sidebar {
        width: 75px;
    }
    
    /* Escondemos os textos apenas se estiver colapsado */
    .sidebar.collapsed .menu-text, 
    .sidebar.collapsed .menu-text-logo,
    .sidebar.collapsed .toggle-icon {
        display: none;
    }

    /* QUANDO EXPANDIDO NO TABLET: */
    /* Ele ganha a largura total e fica POR CIMA do conteúdo (Overlay) */
    .sidebar:not(.collapsed) {
        width: 280px;
        position: absolute; /* Transforma em overlay */
        z-index: 1050;      /* Fica na frente de tudo */
        height: 100vh;
        box-shadow: 10px 0 15px rgba(0,0,0,0.3);
    }

    .sidebar:not(.collapsed) .menu-text, 
    .sidebar:not(.collapsed) .menu-text-logo {
        display: inline-block;
        opacity: 1;
        width: auto;
    }

    /* Adiciona um "overlay" escuro no fundo quando o menu abrir no tablet (opcional) */
    .sidebar:not(.collapsed) + .main-wrapper::before {
        content: "";
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.4);
        z-index: 1040;
    }
}

/* 3. Ajuste de toque para áreas de plantas (style.css) */
@media (hover: none) {
    .apto-area {
        stroke-width: 2; /* Aumenta a borda para facilitar o toque */
    }
    
    /* No tablet, o tooltip deve aparecer apenas no clique, 
       isso requer ajuste no seu explorar-empreendimento.js */
}