/* ===================================================== */
/* --- Estilos para Layout Dash (DENTRO do Iframe) --- */
/* ===================================================== */

/* --- Estrutura Flexbox Principal --- */
#app-container {
    display: flex;
    flex-direction: column;
    /* height: 100vh; */
    /* Não usar VH dentro do iframe */
    height: 100% !important;
    /* <<< CORRIGIDO: Para preencher a altura do iframe */
    overflow: hidden;
    /* Controla overflow DENTRO do app Dash */
    box-sizing: border-box;
    border: 1px solid rgb(27, 31, 36);
    /* DEBUG: Borda do container Dash interno */
}

/* Área Fixa do Cabeçalho/Abas */
#header-tabs-area {
    flex-shrink: 0;
    /* Impede que o cabeçalho encolha */
    padding: 10px 15px 0px 15px;
    z-index: 10;
    box-sizing: border-box;
}

/* Remove margem superior padrão das abas Bootstrap */
#header-tabs-area .nav-tabs {
    margin-top: 0px;
    margin-bottom: 0px !important;
    border-bottom: none !important;
}

/* Área de Conteúdo Rolável */
.scrollable-content-area {
    flex-grow: 1;
    /* Faz esta área crescer */
    overflow-y: auto;
    /* Rolagem vertical */
    overflow-x: hidden;
    padding: 15px;
    /* Adicionado um pouco de padding geral */
    box-sizing: border-box;
}

/* Rodapé */
#app-footer {
    flex-shrink: 0;
    /* Impede que o rodapé encolha */
    color: #adb5bd;
    padding: 10px 0;
    border-top: 1px solid #444;
    box-sizing: border-box;
    text-align: center;
}

/* --- Estilos do Conteúdo Interno --- */

/* Títulos H2 dos gráficos */
.texto-com-borda {
    color: white;
    border: 3px solid #1a5b16;
    padding: 8px 15px;
    /* Ajuste padding */
    font-size: 1.3em;
    border-radius: 6px;
    margin-bottom: 10px;
    /* Aumentar espaço abaixo */
    display: inline-block;
    margin-top: 0px;
    box-sizing: border-box;
}

/* Colunas dbc.Col */
.coluna-centralizada-topo {
    /* background-color: #181818; */
    /* Comentado */
    padding: 15px;
    /* Reduzido padding interno da coluna */
    text-align: center;
    margin: 0;
    /* height: 100%; */
    /* REMOVIDO - Deixar flexbox pai controlar */
    border-radius: 2px;
    /* Limpo - apenas um valor */
    border: 1px solid #444;
    /* Borda de separação */
    box-sizing: border-box;
    /* Opcional: se quiser conteúdo centralizado verticalmente na coluna */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: flex-start; */
    /* Alinha ao topo */
}

/* Container dos RadioItems */
.radio-options-cpi {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
    /* Espaço entre botões */
    width: 100%;
    margin-bottom: 15px;
    /* Aumentado espaço antes do gráfico */
    box-sizing: border-box;
}

/* Labels dos RadioItems */
.radio-options-cpi label {
    background-color: #181818;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.radio-options-cpi label:hover {
    background-color: #181818;
    border-color: #666;
}

.radio-options-cpi input[type="radio"] {
    margin-right: 6px;
    accent-color: #10a137;
    cursor: pointer;
}

/* ============================================================= */
/* --- REGRAS PARA CORRIGIR ALTURA DO IFRAME (EXTERNAS) --- */
/* ============================================================= */

/* Container principal gerado pela tag plotly_app/plotly_class */
/* ---- REGRAS PARA CORRIGIR ALTURA DO IFRAME (EXTERNAS) ---- */
/* Estas regras afetam os containers criados pelo django-plotly-dash no template Django */
/* ADICIONE ESTE BLOCO INTEIRO NO FINAL DO SEU style.css */

.django-plotly-dash-app-content {
    height: 90vh;
    /* Altura desejada para a área do Dash (ajuste conforme necessário) */
    border: 2px solid red;
    /* DEBUG */
    box-sizing: border-box;
    margin: 10px auto;
    /* Adiciona margem e tenta centralizar */
    padding: 0;
    /* Remover padding interno se houver */
    max-width: 98%;
    /* Limitar largura um pouco */
}

/* Seleciona a Div INTERMEDIÁRIA (filha da anterior) */
.django-plotly-dash-app-content>div[style*="padding-bottom"] {
    height: 100% !important;
    /* FORÇA usar 100% da altura do pai (div vermelha) */
    padding-bottom: 100% !important;
    /* REMOVE o padding hack */
    overflow: visible !important;
    border: 2px solid rgb(23, 77, 64);
    /* DEBUG */
    box-sizing: border-box;
}

/* O iframe em si (CORRIGIDO o typo de _ para -) */
.django-plotly-dash-app-content iframe {
    position: relative !important;
    /* Tenta usar fluxo normal */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    /* Preenche a div intermediária (azul) */
    border: 2px solid lime !important;
    /* DEBUG */
    box-sizing: border-box;
}

/* Garanta que o container DENTRO do iframe use 100% da altura do iframe */
/* (Se o seu layout Dash começar com id="app-container") */
#app-container {
    height: 100% !important;
    /* Sobrescreve o 100vh, usa 100% do iframe */
    border: 1px solid rgb(6, 5, 6);
    /* DEBUG */
}