/* ==============================================
DESIGN TOKENS
==============================================
*/

:root {
    /* Cores */
    --cor-primaria: #2F54D4;
    --cor-primaria-hover: #2544B8;
    --cor-fundo: #FFFFFF;
    --cor-fundo-card: #ffffff;
    --cor-fundo-filtro: #F4F5F7;
    --cor-texto-principal: #333333;
    --cor-texto-secundario: #8A92A6;
    --cor-borda: #CDCDCD;
    --cor-titulo-1: #2C2C2C;
    --cor-titulo-2: #183EFF;

    /* Espaçamento */
    --espaco-2: 8px;
    --espaco-3: 12px;
    --espaco-4: 16px;
    --espaco-5: 24px;
    --espaco-6: 32px;
    --espaco-8: 48px;

    /* Tipografia */
    --fonte-principal: 'Poppins', sans-serif;
    --fonte-titulo: 'Raleway', sans-serif;
    --fonte-kpi: 'Inter', sans-serif;
    --tamanho-fonte-base: 14px;

    /* Outros */
    --raio-borda: 8.45px;
    --raio-borda-card: 15px;
    --transicao-padrao: all 0.2s ease-in-out;
    --altura-topbar: 142px;
}

/* ==============================================
ESTILOS GLOBAIS E RESET
==============================================
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    font-family: var(--fonte-principal);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==============================================
   LOADER
   ==============================================
*/
#app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

#app-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    background-color: var(--cor-fundo);
    padding: 32px 42px;
    border-radius: 15px;
    border: 2px solid var(--cor-primaria);
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.loader-content h3 {
    font-family: var(--fonte-principal);
    color: var(--cor-primaria);
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0;
}

/* ==============================================
BANNER / HEADER
==============================================
*/

.topbar {
    background-color: var(--cor-fundo-card);
    /* Padding ajustado: Top 48px, Bottom 0 (para compensar a margem do link) */
    padding: var(--espaco-8) var(--espaco-8) 0 var(--espaco-8);
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 1100;
}

.brandband {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap;
}

/* Botão Mobile (Oculto no Desktop) */
.btn-mobile-menu {
    display: none;
    background: none;
    border: none;
    color: var(--cor-primaria);
    cursor: pointer;
    margin-right: var(--espaco-3);
    padding: 0;
}

.btn-mobile-menu .feather {
    width: 32px;
    height: 32px;
}

.topbar-title h1 {
    font-family: 'Raleway', sans-serif !important;
    font-size: 45px;
    font-weight: 800;
    white-space: nowrap;
}

.title-part-1 {
    color: var(--cor-titulo-1) !important;
}

.title-part-2 {
    color: var(--cor-titulo-2) !important;
}

.brand-logo img {
    max-height: 45px;
    display: block;
}

/* ==============================================
LAYOUT PRINCIPAL (GRID)
=============================================
*/

.app-container {
    display: grid;
    /* Sidebar fixa 260px, Conteúdo ocupa o resto */
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
    font-family: var(--fonte-principal);
    color: var(--cor-texto-principal);
    font-size: var(--tamanho-fonte-base);
    position: relative;
}

.main-content {
    padding: var(--espaco-5) var(--espaco-6);
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* ==============================================
SIDEBAR (DESKTOP DEFAULT)
==============================================
*/

.sidebar {
    background-color: var(--cor-fundo-card);
    border-right: none;
    display: flex;
    flex-direction: column;
    /* Padding original do Desktop para alinhamento perfeito */
    padding: 81px var(--espaco-5) var(--espaco-5);
    /* Sticky no Desktop */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 1300;
}

/* Overlay Mobile (Oculto no Desktop) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 290;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicao-padrao);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--espaco-6);
}

.sidebar-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espaco-3);
}

.sidebar-icon {
    color: var(--cor-titulo-2);
}

.sidebar-header h2 {
    font-size: 20px;
    font-weight: 600;
}

.filters-list {
    display: flex;
    flex-direction: column;
    gap: var(--espaco-2);
    flex: 0 0 auto;
    overflow: visible;
    margin-right: -8px;
    padding-right: 8px;
}

.filter-item {
    position: relative;
}

.filter-header {
    display: flex;
    align-items: center;
    padding: var(--espaco-3);
    border-radius: var(--raio-borda);
    text-decoration: none;
    color: var(--cor-texto-secundario);
    font-weight: 500;
    transition: var(--transicao-padrao);
    background-color: var(--cor-fundo-filtro);
    cursor: pointer;
    line-height: 1.2;
}

.filter-header:hover {
    background-color: #e9ecef;
    color: var(--cor-primaria);
}

.filter-header span {
    flex-grow: 1;
    margin-left: var(--espaco-3);
}

.filter-header .feather {
    width: 16px;
    height: 16px;
}

.filter-header .feather-chevron-down {
    margin-left: auto;
    transition: transform 0.2s ease-in-out;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Panel de Opções */
.filter-options-panel {
    display: none;
    position: absolute;
    z-index: 20;
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: var(--espaco-3);
    margin-top: var(--espaco-2);
    min-width: 220px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 450px !important;
    min-height: 300px !important;
    overflow-y: auto;
}

.qlik-filter-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    padding: 0 !important;
    overflow: visible !important;
}

.filter-options-panel .qv-object,
.filter-options-panel .qv-object-wrapper,
.filter-options-panel .qv-inner-object,
.filter-options-panel .qv-object-content-container,
.filter-options-panel .qv-object-content {
    height: 100% !important;
    min-height: 250px !important;
}

.filter-options-panel .qv-object-listbox .qv-listbox-inner {
    padding: 0;
}

.filter-options-panel .qv-listbox-header {
    display: none !important;
}

/* ==============================================
HEADER DO CONTEÚDO (Sticky)
==============================================
*/

.main-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--cor-fundo) !important;
    z-index: 1250;
    box-shadow: none;
    padding-top: var(--espaco-5);
    padding-bottom: var(--espaco-5);
    width: 100%;
    margin-bottom: 0;
    pointer-events: none;
    /* FIX: Previne bloqueio de clique na área vazia */
}

/* Reabilita interação nos elementos filhos */
.main-content-header>* {
    pointer-events: auto;
}

.header-filters {
    display: flex;
    gap: var(--espaco-4);
    pointer-events: auto;
}

.filter-dropdown {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-4);
    background-color: var(--cor-fundo-filtro);
    border: none;
    border-radius: var(--raio-borda);
    cursor: pointer;
    font-weight: 500;
    color: var(--cor-texto-secundario);
}

.filter-dropdown .feather {
    transition: transform 0.2s ease-in-out;
}

.header-buttons {
    display: flex;
    gap: var(--espaco-3);
}

/* ==============================================
   BARRA DE SELEÇÕES ATUAIS
   ==============================================
*/
.current-selections-bar {
    display: none;
    position: sticky;
    top: 90px;
    background-color: var(--cor-fundo) !important;
    z-index: 1200;
    padding: var(--espaco-4) 0;
    margin-bottom: var(--espaco-5);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espaco-3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.current-selections-bar.visible {
    display: flex;
    opacity: 1;
}

.selections-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espaco-2);
    flex-grow: 1;
}

.selection-pill {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    background-color: var(--cor-primaria);
    color: white;
    font-size: 12px;
    font-weight: 500;
    padding: var(--espaco-2) var(--espaco-3);
    border-radius: var(--raio-borda);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.selection-pill:hover {
    background-color: var(--cor-primaria-hover);
}

.selection-pill.locked {
    background-color: var(--cor-texto-secundario);
    /* Cinza para indicar desabilitado */
    cursor: not-allowed;
    opacity: 0.8;
}

.selection-pill .feather {
    width: 14px;
    height: 14px;
}

.selection-pill strong {
    margin-left: 4px;
}

.btn-clear-selections {
    background: none;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    padding: var(--espaco-2) var(--espaco-4);
    border-radius: var(--raio-borda);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transicao-padrao);
    margin-left: var(--espaco-4);
    white-space: nowrap;
}

.btn-clear-selections:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

/* ==============================================
BOTÕES
==============================================
*/

.btn {
    display: flex;
    align-items: center;
    gap: var(--espaco-2);
    padding: var(--espaco-2) var(--espaco-4);
    border-radius: var(--raio-borda);
    border: none;
    font-family: var(--fonte-principal);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicao-padrao);
}

.btn-primary {
    background-color: var(--cor-primaria);
    color: white;
}

.btn-primary:hover {
    background-color: var(--cor-primaria-hover);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
}

.btn-secondary:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}

.btn-export {
    width: 100%;
    justify-content: center;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    border: 1px solid var(--cor-borda);
    margin-top: var(--espaco-5);
    padding: var(--espaco-3) var(--espaco-4);
}

.btn-export:hover {
    background-color: #e9ecef;
    color: var(--cor-primaria);
}

.btn-export .spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==============================================
CARDS, KPIs E PLACEHOLDERS
==============================================
*/

.card {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-card);
    padding: var(--espaco-5);
}

.card:has(> .chart-placeholder) {
    padding-left: var(--espaco-3);
    padding-right: var(--espaco-5);
    padding-top: var(--espaco-5);
    padding-bottom: var(--espaco-5);
}

.kpi-row,
.dashboard-grid {
    position: relative;
    z-index: 1 !important;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--espaco-4);
    margin-bottom: var(--espaco-5);
}

.kpi-card {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-card);
    padding: var(--espaco-4);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--espaco-3);
}

.kpi-value-container {
    position: relative !important;
    width: 100% !important;
    height: 70px;
    display: block !important;
    padding: 0 !important;
    overflow: visible !important;
}

.kpi-title {
    font-family: var(--fonte-kpi) !important;
    color: var(--cor-titulo-1) !important;
    font-size: 14px;
    font-weight: 700 !important;
    text-align: center;
    order: 2;
    margin-top: var(--espaco-2);
}

.chart-placeholder {
    position: relative !important;
    width: 100%;
    min-height: 250px;
    height: 100%;
    padding: 0 !important;
}

/* ==============================================
GRID DE GRÁFICOS
==============================================
*/

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--espaco-5);
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--espaco-4);
}

.grid-col-span-1 {
    grid-column: span 1;
}

.grid-col-span-2 {
    grid-column: span 2;
}

/* Card Unificado para Gráficos 3 e 4 */
.unified-charts {
    display: flex;
    gap: 0;
    padding: 0 !important;
    min-height: 300px;
}

.chart-half {
    flex: 1;
    min-height: 300px;
    height: 100%;
    padding: var(--espaco-5) !important;
}


/* ==============================================
RESPONSIVIDADE
==============================================
*/

@media (max-width: 1440px) {
    .topbar-title h1 {
        font-size: 36px;
    }

    .brand-logo img {
        max-height: 40px;
    }
}

@media (max-width: 1200px) {

    .kpi-row,
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content-header {
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .topbar {
        height: auto;
        padding-top: var(--espaco-4);
        padding-bottom: var(--espaco-4);
    }

    .current-selections-bar {
        top: 60px;
    }
}

/* --- MOBILE (MAX 768px) --- */
@media (max-width: 768px) {
    .app-container {
        grid-template-columns: 1fr;
        /* Remove espaço da sidebar no grid */
    }

    /* Exibe o botão do menu */
    .btn-mobile-menu {
        display: block;
    }

    /* Sidebar "Off-Canvas" */
    .sidebar {
        position: fixed;
        /* Sobrescreve sticky */
        top: 0;
        left: -280px;
        /* Escondido à esquerda */
        height: 100%;
        width: 260px;
        background-color: var(--cor-fundo-card);
        z-index: 1000;
        /* Z-index alto para ficar sobre tudo */
        transition: left 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
        padding-top: var(--espaco-5);
        /* Padding menor para mobile */
    }

    .sidebar.mobile-open {
        left: 0;
        /* Desliza para dentro */
    }

    .main-content {
        padding: var(--espaco-4);
    }

    .main-content-header {
        flex-direction: column;
        width: 100%;
        gap: var(--espaco-4);
        position: static;
        /* Desativa sticky em mobile */
        padding-top: 0;
    }

    .current-selections-bar {
        position: static;
        /* Desativa sticky em mobile */
        margin-bottom: var(--espaco-4);
    }

    .kpi-row,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .grid-col-span-2 {
        grid-column: span 1;
    }

    .unified-charts {
        flex-direction: column;
    }


    .topbar-title h1 {
        font-size: 28px;
    }

    .brandband {
        gap: var(--espaco-4);
    }
}

/* ==============================================
ESTILOS DE RESET E INTEGRAÇÃO QLIK
==============================================
*/

.qv-object,
.qv-object-wrapper,
.qv-panel-sheet,
.qv-object-listbox {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.qv-object-wrapper,
.qv-inner-object {
    height: 100% !important;
    width: 100% !important;
}

[id^="kpi-container-"] .qv-object-title,
[id^="kpi-container-"] .qv-object-kpi .title,
[id^="kpi-container-"] .qv-kpi-title,
[id^="kpi-container-"] .qv-kpi-label {
    display: none !important;
}

.qv-object,
.qv-object-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

.kpi-value-container .qv-object-kpi,
.kpi-value-container .qv-object {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
}

/* Estiliza Valor de KPI */
[id^="kpi-container-"] .qv-kpi-value,
[id^="kpi-container-"] .qv-object-kpi-value,
[id^="kpi-container-"] .value,
[id^="kpi-container-"] [class*="value"] {
    font-family: var(--fonte-kpi) !important;
    font-weight: 700 !important;
    color: var(--cor-primaria) !important;
    line-height: 1.2 !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    display: block !important;
}

/* KPI 2 (Valor dos Projetos) */
#kpi-container-2 .qv-kpi-value,
#kpi-container-2 .qv-object-kpi-value,
#kpi-container-2 .value,
#kpi-container-2 [class*="value"] {
    font-size: clamp(22px, 3.5vw, 28px) !important;
    color: var(--cor-titulo-1) !important;
}

/* KPI 3 (Valor Médio) */
#kpi-container-3 .qv-kpi-value,
#kpi-container-3 .qv-object-kpi-value,
#kpi-container-3 .value,
#kpi-container-3 [class*="value"] {
    font-size: clamp(20px, 3vw, 26px) !important;
    color: var(--cor-titulo-1) !important;
}

/* KPI 4 (Prazo Médio) */
#kpi-container-4 .qv-kpi-value,
#kpi-container-4 .qv-object-kpi-value,
#kpi-container-4 .value,
#kpi-container-4 [class*="value"] {
    color: var(--cor-titulo-1) !important;
}

[id^="kpi-container-"] * {
    visibility: visible !important;
}

[id^="chart-container-"] .qv-inner-object,
[id^="chart-container-"] .qv-object-content-container {
    padding: 0 !important;
}

/* Gráficos 6 e 7 - Estilo Seguro (Similar Tabela) */
#chart-container-6,
#chart-container-7 {
    min-height: 300px !important;
    display: block;
    position: relative;
    z-index: 100;
}

#chart-container-6 .qv-object-wrapper,
#chart-container-6 .qv-inner-object,
#chart-container-6 .qv-object-content,
#chart-container-7 .qv-object-wrapper,
#chart-container-7 .qv-inner-object,
#chart-container-7 .qv-object-content {
    overflow: visible !important;
}

/* Ocultar título do Gráfico 3 */
#chart-container-3 .qv-object-title,
#chart-container-3 .qv-object-header {
    display: none !important;
}


/* ==============================================
   CORREÇÃO FINAL V6: TABELA ISOLADA (PEP STYLE)
   ==============================================
*/

/* Classe para o card que está fora do grid */
.full-width-card {
    margin-top: var(--espaco-5);
    width: 100%;
    display: block;
    position: relative;
    /* FIX: Necessário para o z-index funcionar */
    /* Permite que o popup vaze do card */
    overflow: hidden !important;
    z-index: 50;
}

/* O Container do Qlik - Estilo PEP */
#chart-container-5 {
    width: 100%;
    height: 640px;
    /* Altura fixa necessária */
    display: block;
    position: relative;
    z-index: 100;
    overflow: hidden !important;
}

/* Wrappers internos do Qlik - Estilo PEP */
#chart-container-5 .qv-object-wrapper,
#chart-container-5 .qv-inner-object,
#chart-container-5 .qv-object-content {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    padding: 0 !important;
    /* Deixa o Qlik gerenciar o scroll internamente */
    /* overflow: visible !important;  <-- REMOVIDO para corrigir bug do scroll */
    /* FIX: Revertido para hidden para conter a tabela */
    overflow: hidden !important;
}

/* Correção de Z-Index para Toolbars Acopladas */
.qv-selection-toolbar,
.qv-sub-toolbar,
.lui-popover {
    z-index: 20000 !important;
    overflow: visible !important;
}

/* ==============================================
   FIX CIRÚRGICO: BUG ÍCONE DE PESQUISA (Corrigido)
   ==============================================
*/

#chart-container-5 .qv-object-header {
    overflow: visible !important;
    z-index: 500 !important;
    pointer-events: auto !important;
}

#chart-container-5 th {
    overflow: visible !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

#chart-container-5 .lui-icon--search,
#chart-container-5 .qv-search-icon {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
    display: inline-block !important;
}

#chart-container-5 .qv-object-content-container {
    z-index: auto !important;
}

/* Correção Defensiva para o Bug de Posicionamento do Qlik */
.card:hover {
    transform: none !important;
}

/* ==============================================
   ESTILOS DO LINK DE VOLTAR (BREADCRUMB)
   ==============================================
*/
.breadcrumb {
    margin-bottom: 0;
    margin-top: 2.5rem;
    /* Aumentado para 2.5rem (compensado pelo padding-bottom: 0) */
}

/* Ajuste específico para o header */
.topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Garante que o brandband continue ocupando 100% */
.brandband {
    width: 100%;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.90rem;
    font-family: 'Inter', sans-serif;
    /* Fonte igual ao index.html */
    color: #183EFF;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    z-index: 999;
    /* Garante clique */
}

.back-link:hover {
    text-decoration: underline;
}

.back-icon {
    width: 16px;
    height: auto;
}