/* =================================== */
/* ESTILOS GERAIS E LOGIN (ORIGINAIS)  */
/* =================================== */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    color: #333;
}

/* ---------------- */
/* PÁGINA DE LOGIN  */
/* ---------------- */
.login-container {
    width: 350px;
    margin: 100px auto;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.login-container h2 {
    margin-bottom: 25px;
    color: #0056b3;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que padding não afete a largura total */
}

.login-container button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}

.login-container button:hover {
    background-color: #0056b3;
}

.erro {
    color: #d9534f;
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
}

/* =================================== */
/* ESTILOS DO DASHBOARD (HEADER, NAV)  */
/* =================================== */

/* --- Corpo e Layout Principal --- */
body {
    background-color: #eef1f5; /* Um cinza mais claro para o fundo */
}

.main-body {
    padding: 0;
}

.dashboard-container {
    display: flex;
    align-items: flex-start;
    /* Altura da tela menos o header (50px + 72px) e os dois footers (48px + 185px) */
    /* Ajuste min-height conforme a altura real dos seus rodapés */
    min-height: calc(100vh - 122px - 233px); 
}

/* --- Cabeçalho e Barra de Logos --- */
.main-header {
    background-color: #0056b3;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
    position: sticky; /* Fixa o header no topo */
    top: 0;
    z-index: 1000;
}

.header-top {
    padding: 10px 20px;
}

.header-content {
    max-width: 100%; /* Ocupa toda a largura */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-content h1 {
    margin: 0;
    font-size: 1.5em;
}

.header-content nav a {
    color: white;
    text-decoration: none;
    margin-left: 15px;
    font-weight: bold;
}
.header-content nav a:hover {
    text-decoration: underline;
}
.header-content nav span {
    margin-left: 15px;
}


.logo-bar {
    background-color: #fff;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Permite que logos quebrem a linha */
}

.logo-item {
    flex-shrink: 1;
    text-align: center;
}

.logo-item img {
    height: 50px; /* Todos têm a mesma altura */
    width: auto;  /* A largura se ajusta */
    max-width: 100%;
    object-fit: contain;
}


/* --- Menu Lateral (Sidebar) --- */
.sidebar {
    width: 280px;
    background-color: #fff;
    border-right: 1px solid #ddd;
    flex-shrink: 0;
    /* Faz a sidebar acompanhar a rolagem */
    position: sticky;
    top: 122px; /* Altura do .main-header */
    height: calc(100vh - 122px); /* Altura da tela menos o header */
    overflow-y: auto; /* Adiciona scroll SÓ na sidebar */
}

.quadro-menu h3 {
    padding: 15px 20px;
    margin: 0;
    background-color: #f8f9fa;
    color: #333;
    border-bottom: 1px solid #ddd;
    font-size: 1.1em;
}

.quadro-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quadro-menu a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.quadro-menu a:hover {
    background-color: #f4f4f4;
}

.quadro-menu a.active {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

.quadro-menu a.disabled {
    color: #999;
    cursor: not-allowed;
    background-color: #fafafa;
}


/* --- Área de Conteúdo Principal --- */
.main-content-area {
    flex-grow: 1;
    /* Permite rolagem horizontal e vertical na área de conteúdo */
    overflow: auto; 
    padding: 25px;
    min-width: 0; /* Correção essencial do Flexbox para overflow */
}

/* =================================== */
/* ESTILOS DE FILTROS E TABELAS        */
/* =================================== */

.container {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.container-tabela {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.container-wide {
    width: auto;
    min-width: 100%;
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0;
    box-sizing: border-box;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* --- Formulários de Filtro --- */
.filter-form-simple {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-form-graficos {
    display: flex;
    gap: 20px;
    align-items: center;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.filter-form-graficos .form-group {
    margin-bottom: 0;
}


/* --- Abas de Visualização --- */
.view-selector {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.view-selector a {
    text-decoration: none;
    color: #007bff;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
    margin-right: 10px;
}
.view-selector a.active, .view-selector a:hover {
    background-color: #007bff;
    color: #fff;
}

/* --- Tabela Principal (Quadro 05) --- */
.table-wrapper {
    width: 100%;
    overflow-x: visible; /* Deixa o .main-content-area rolar */
    width: auto;
}

.quadro-table-pivoted {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 0.85em;
    min-width: 1200px;
}
.quadro-table-pivoted thead th {
    background-color: #f2f2f2;
    padding: 10px 5px;
    vertical-align: bottom;
    text-align: center;
    border: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 10;
}
.quadro-table-pivoted tbody td, 
.quadro-table-pivoted tbody th {
    border: 1px solid #ddd;
    padding: 6px 4px;
    text-align: center;
}
.quadro-table-pivoted tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.header-especificacao {
    text-align: left;
    background-color: #f9f9f9;
    padding-left: 10px !important;
    font-weight: bold;
}
.header-especificacao.sub-item {
    padding-left: 20px !important;
    font-weight: normal;
}
.total-column {
    font-weight: bold;
    background-color: #f0f0f0;
}
.year-cell {
    font-weight: bold;
    background-color: #f0f0f0;
    width: 60px !important; /* Largura reduzida */
}
/* Linha divisória de Ano */
.quadro-table-pivoted .year-start-row td,
.quadro-table-pivoted .year-start-row th {
    border-top: 3px solid #bbb; 
}
.quadro-table-pivoted tbody tr:first-child.year-start-row td,
.quadro-table-pivoted tbody tr:first-child.year-start-row th {
    border-top: 1px solid #ddd;
}
/* Barra vertical de "bateria" */
.year-cell-vertical-bar {
    vertical-align: top !important; /* Alinha o texto do ano no TOPO */
    padding-top: 8px !important;    /* Adiciona um espaço no topo */
    text-align: center;
    background-repeat: no-repeat;
    background-position: bottom;
}


/* --- Tabela de Análise de Fechamento --- */
.tabela-fechamento {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 0.9em;
}
.tabela-fechamento th, .tabela-fechamento td {
    border: 1px solid #ddd;
    padding: 6px 5px;
    text-align: center;
}
.tabela-fechamento thead th {
    background-color: #f4f4f4;
    position: sticky;
    top: 0;
    vertical-align: middle;
}
.tabela-fechamento .header-territorio {
    text-align: left;
    background-color: #f9f9f9;
    font-weight: bold;
    vertical-align: top;
}
.tabela-fechamento .sub-header th {
    background-color: #fafafa;
    font-size: 0.95em;
    font-weight: normal;
}
.tabela-fechamento .ano-cell {
    font-weight: bold;
    background-color: #fdfdfd;
    width: 60px;
    min-width: 60px;
}
.col-total-atual {
    background-color: #f9f9f9;
}
.tabela-fechamento .territorio-start-row td,
.tabela-fechamento .territorio-start-row th {
    border-top: 3px solid #888;
}
/* Barra de dados horizontal (tabela fechamento) */
.data-bar-cell-fechamento {
    text-align: left !important;
    padding-left: 10px !important;
    white-space: nowrap; 
    background-repeat: no-repeat;
    background-color: #f9f9f9; 
}


/* --- Tabela Genérica (analysis-table) --- */
.analysis-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
}
.analysis-table th,
.analysis-table td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: center;
}
.analysis-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    position: sticky;
    top: 0;
}
.analysis-table td.territorio-nome {
    text-align: left;
    font-weight: bold;
    background-color: #f9f9f9;
}
.analysis-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.analysis-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* Cores de Variação (Vermelho/Verde) */
.coluna-variacao-neg,
.variacao-negativo {
    color: #d9534f;
    font-weight: bold;
}
.coluna-variacao-pos,
.variacao-positivo {
    color: #5cb85c;
    font-weight: bold;
}
.variacao-zero {
    color: #777;
}


/* =================================== */
/* COMPONENTES (Modal, Botões, etc.)   */
/* =================================== */

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    font-family: sans-serif;
}

.export-section {
    margin-left: auto; /* Empurra o botão de exportar para a direita */
}

.btn-export {
    padding: 8px 15px;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.btn-export:hover {
    background-color: #218838;
}

.instrucao, .instrucao-grafico {
    text-align: center;
    color: #666;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
}

/* --- Modal de Gráfico (pop-up) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 900px;
    border-radius: 8px;
    position: relative;
}
.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
    color: black;
}
#chartContainer {
    position: relative;
    height: 450px;
    width: 100%;
    margin-top: 20px;
}
.chart-source {
    font-size: 0.8em;
    color: #6c757d;
    text-align: center;
    margin-top: 20px;
}
.btn-download {
    display: block;
    margin: 20px auto 0 auto;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.btn-download:hover {
    background-color: #0056b3;
}


/* --- Modal Interativo (Tela Cheia) --- */
.interactive-modal-fullscreen {
    display: none; /* Oculto por padrão */
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}
.interactive-modal-content {
    width: 90%;
    height: 90%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.interactive-modal-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 3em;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    z-index: 2001;
}
.interactive-modal-close:hover {
    color: #333;
}
.interactive-modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
}
.interactive-modal-header h2 {
    margin: 0;
    color: #333;
    text-align: center;
}
.interactive-modal-body {
    flex-grow: 1; /* Faz a tabela ocupar o espaço */
    overflow-y: auto; /* Adiciona scroll SÓ NA TABELA */
    padding: 0 30px;
}
.interactive-modal-body .analysis-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Tabela Densa (Modal) */
.interactive-modal-body .analysis-table th,
.interactive-modal-body .analysis-table td {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.85em;
}
.interactive-modal-body .analysis-table td.territorio-nome {
    padding-left: 10px;
    font-size: 0.9em;
}
.interactive-modal-footer {
    flex-shrink: 0;
    padding: 15px 30px;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
}
.slider-header-modal p {
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 0.9em;
    color: #555;
}
.slider-header-modal .base-year {
    font-weight: bold;
    color: #007bff;
}
.slider-header-modal .target-year {
    font-weight: bold;
    color: #d9534f;
    min-width: 40px;
    display: inline-block;
}
.slider-controls-modal {
    display: flex;
    align-items: center;
    gap: 15px;
}
.slider-controls-modal input[type="range"] {
    flex-grow: 1;
    cursor: ew-resize;
}
.slider-controls-modal .year-label {
    font-weight: bold;
    color: #333;
    min-width: 35px;
    text-align: center;
    font-size: 0.9em;
}

/* =================================== */
/* CSS PARA O RODAPÉ PRINCIPAL (NOVO)  */
/* =================================== */

.site-footer {
    background-color: #1f2937; /* Cor escura */
    color: #d1d5db; /* Cor de texto cinza claro */
    padding: 40px 20px;
    font-size: 0.9em;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Espaço entre as colunas */
}

.footer-column {
    padding: 0 10px;
}

.footer-column h4 {
    color: #ffffff; /* Títulos em branco */
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid #6366f1; /* Linha roxa */
    padding-bottom: 8px;
}

.footer-column p {
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 10px;
}

.footer-column a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #6366f1; /* Cor roxa ao passar o mouse */
    text-decoration: underline;
}

/* --- Responsividade para o rodapé principal --- */
@media (max-width: 992px) {
    .footer-container {
        /* 2 colunas em tablets */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-container {
        /* 1 coluna em celulares */
        grid-template-columns: 1fr;
    }
    
    .site-footer {
        padding: 30px 15px;
    }
}

/* =================================== */
/* CSS PARA O MENU RETRÁTIL (NOVO)     */
/* =================================== */

/* --- O botão "Hamburger" --- */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-toggle-btn {
    background: none;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
    width: 38px;
    height: 38px;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}
.sidebar-toggle-btn:hover {
    background-color: #fff;
    color: #0056b3;
}

/* --- Oculta o botão em telas grandes (opcional) --- */
/* @media (min-width: 1025px) {
    .sidebar-toggle-btn {
        display: none; 
    }
} */


/* --- Animação da Sidebar e Conteúdo --- */

.sidebar {
    /* Adiciona transição para o 'margin-left' */
    transition: margin-left 0.3s ease;
    /* Garante que o menu não quebre o layout */
    margin-left: 0;
}

.main-content-area {
    /* Adiciona transição para o 'margin-left' */
    transition: margin-left 0.3s ease;
}

/* --- O Estado "Recolhido" --- */
/* Esta classe será adicionada ao .dashboard-container pelo JS */

.dashboard-container.sidebar-collapsed .sidebar {
    /* Oculta o menu para a esquerda */
    margin-left: -280px; 
}

/* Em telas de celular, o menu já fica oculto, 
   mas o conteúdo principal deve ocupar 100% */
@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        height: auto;
        min-height: 0;
        position: relative;
        top: 0;
        /* Oculta por padrão no celular */
        margin-left: -100%; 
    }
    .dashboard-container.sidebar-collapsed {
        /* Estado padrão no celular */
    }
    .dashboard-container.sidebar-expanded-mobile .sidebar {
        /* Estado expandido no celular */
        margin-left: 0;
    }
}
.export-section {
    margin-left: 0; 
}

/* ================================================ */
/* CSS PARA BARRA DE FILTRO (Visão Simples/Exportar) */
/* ================================================ */

.view-toggle {
    display: flex;
    justify-content: space-between; /* LINKS NA ESQUERDA, BOTÃO NA DIREITA */
    align-items: center;
    flex-wrap: wrap; /* Permite quebrar a linha em telas pequenas */
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

/* Agrupa os links da esquerda */
.view-toggle-links {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre os links */
    flex-wrap: wrap;
}

/* Estilo dos links dentro da barra (Visão Simples, etc) */
.view-toggle a {
    text-decoration: none;
    color: #007bff;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: bold;
}

/* Estilo do link ativo ou ao passar o mouse */
.view-toggle a.active, 
.view-toggle a:hover {
    background-color: #007bff;
    color: #fff;
}

/* O .export-section não precisa de margem especial 
   pois o 'justify-content: space-between' no pai já o alinha */
.export-section {
    /* intencionalmente em branco */
}