/* ========================================================= */
/* ===================== GLOBAL ============================ */
/* ========================================================= */

/* --- Mensagem de status do recomendador (geração IA) --- */
#rec-status-msg:not(:empty) {
    color: #9b9bb5;
    font-size: 0.82rem;
    font-style: italic;
    padding: 4px 0 8px 0;
    animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* --- Cursor pointer nas fatias do pie (indica clicabilidade) --- */
#pie-error-dist .slice path {
    cursor: pointer !important;
}

/* --- Scroll suave global --- */
html {
    scroll-behavior: smooth;
}

/* --- Estrutura e Cores Gerais --- */
body {
    background-color: #13131f;
    color: #e0e0e0;
}
hr {
    border-top: 1px solid #444;
}

/* --- Offset das seções (compensa navbar sticky ~56px) --- */
#section-indicadores,
#section-previsoes,
#section-recomendador {
    scroll-margin-top: 70px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}

/* --- Inputs e Selects Gerais --- */
input[type="text"],
select,
textarea {
    background-color: #2c2c3e;
    color: #e0e0e0;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px;
}

/* --- Tabelas Responsivas --- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================= */
/* ===================== NAVBAR ============================ */
/* ========================================================= */

/* --- Navbar Principal --- */
/* DARKLY usa #343a40 para bg-dark; sobrescrevemos com nosso roxo escuro */
.navbar {
    background-color: #2c2c3e !important;
    margin-bottom: 0.5rem;
    width: 100%;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #000;
}
.navbar .navbar-brand {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.navbar .navbar-brand .brand-with-logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
@media (max-width: 576px) {
    .navbar .navbar-brand {
        font-size: 1rem;
    }
    .navbar .nav-item {
        margin-bottom: 8px;
    }
    .navbar .nav-link {
        padding-left: 15px;
        padding-right: 15px;
        display: block;
    }
    .navbar-toggler {
        margin-bottom: 10px;
        margin-right: 10px;
    }
}
/* --- Date Inputs Dark Theme --- */
input[type="date"].input-dark,
input[type="date"].form-control {
    color-scheme: dark;
    background-color: #2c2c3e;
    color: #e0e0e0;
    border: 1px solid #444;
}
input[type="date"].input-dark:focus,
input[type="date"].form-control:focus {
    background-color: #2c2c3e !important;
    color: #e0e0e0 !important;
    box-shadow: 0 0 8px #7e87ff !important;
    border-color: #7e87ff !important;
}

/* --- Navbar Links e Abas --- */
.nav-tabs .nav-link {
    background-color: #2c2c3e;
    color: #ccc;
    border: none;
    margin-right: 2px;
}
.nav-tabs .nav-link.active {
    background-color: #1e1e2f;
    color: #fff;
    font-weight: bold;
    border-bottom: 3px solid #5561ff;
}
.navbar .nav-link.active {
    background-color: #5561ff !important;
    color: white !important;
    border: 2px solid #5561ff !important;
}
.navbar .nav-link {
    background-color: #2c2c3e;
    color: #ccc;
    border: none;
    margin-right: 2px;
}
.navbar .nav-link:hover {
    box-shadow: 0 0 10px 2px #5561ff;
    transition: box-shadow 0.3s ease-in-out;
}
.navbar .nav-link.active:hover {
    box-shadow: 0 0 10px 4px #5561ff;
    transition: box-shadow 0.3s ease-in-out;
}

/* ========================================================= */
/* ============ INDICADORES FUNDAMENTALISTAS =============== */
/* ========================================================= */

/* --- Filtros e Dropdowns --- */
.dropdown-dark select {
  background-color: #2c2c3e !important;
  color: #e0e0e0 !important;
  border: 1px solid #444 !important;
}
.dropdown-dark option {
  background-color: #2c2c3e !important;
  color: #e0e0e0 !important;
}
.dropdown-dark option:checked {
  background-color: #5561ff !important;
  color: #ffffff !important;
}
/* dcc.Dropdown (react-select v1) */
.dropdown-dark .Select-control {
  background-color: #2c2c3e !important;
  border-color: #444 !important;
}
.dropdown-dark .Select-placeholder,
.dropdown-dark .Select-value,
.dropdown-dark .Select-value-label {
  color: #e0e0e0 !important;
}
.dropdown-dark .Select-menu-outer {
  background-color: #1e1e2f !important;
  color: #e0e0e0 !important;
}
.dropdown-dark .Select-option {
  background-color: #1e1e2f !important;
  color: #e0e0e0 !important;
}
.dropdown-dark .Select-option.is-focused {
  background-color: #3a3a50 !important;
  color: #e0e0e0 !important;
}
.dropdown-dark .Select-option.is-selected {
  background-color: #5561ff !important;
  color: #ffffff !important;
}

.filtros-indicadores {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: flex-end; /* alinha bases — útil se labels tiverem alturas diferentes */
}

.filter-col {
  flex: 1 1 0;    /* divide espaço igualmente */
  min-width: 0;   /* impede que react-select empurre a coluna */
  /* overflow: visible (padrão) — necessário para o menu suspenso do dropdown */
}

/* MOBILE: empilha os filtros em 2 por linha */
@media (max-width: 768px) {
  .filtros-indicadores {
    flex-wrap: wrap;
  }
  .filter-col {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .filter-col {
    flex: 1 1 100%;
  }
  #pie-error-dist {
    height: 250px !important;
  }
}



/* --- Gráficos --- */
/* Sutil borda roxa ao passar no gráfico */
#grafico-top-metric:hover {
  box-shadow: 0 0 8px rgba(126,135,255,0.6);
}

#pie-error-dist {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  border-radius: 0.5rem;
}

/* Faz o container do dcc.Graph esticar até a altura total da coluna */
#pie-error-dist {
  height: 70% !important;
  min-height: 300px; /* valor mínimo, ajuste se quiser que seja maior */
}

/* Garante que o elemento interno do Plotly também preencha esse 100% */
#pie-error-dist .js-plotly-plot {
  height: 100% !important;
}

/* --- Cartões de Performance --- */
.performance-cards-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    flex-wrap: nowrap;
    /* Remover overflow-x para não cortar o brilho do hover */
    /* overflow-x: auto; */
    box-sizing: border-box;
    /* Adicione padding vertical para dar espaço ao brilho */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.performance-cards-row .col {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
} 
.performance-cards-row .card {
    flex: 1 1 0;
    margin: 0;
    /* Adicione espaçamento vertical para evitar corte do brilho */
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
    min-width: 0;
}
@media (max-width: 900px) {
    .performance-cards-row {
        flex-wrap: wrap;
    }
    .performance-cards-row .col {
        flex: 1 1 50%;
        min-width: 200px;
        margin-bottom: 1rem;
    }
}
@media (max-width: 600px) {
    .performance-cards-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .performance-cards-row .col {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* --- Cartões de Recomendação (Top 10) --- */
@media (max-width: 576px) {
    .cards-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .card {
        width: 100%;
        margin-bottom: 1rem;
    }
}
@media (max-width: 768px) {
    .cards-top10-recs {
        width: 100%;
        margin-top: 20px;
    }
    .card {
        flex: 1;
        margin-right: 0;
    }
}

/* --- Cartões Gerais (seções principais) --- */
.card {
    background-color: #1e1e2f;
    color: #e0e0e0;
    border: none;
    border-radius: 8px;
    min-height: 40px;
}

/* --- Cartões de Performance do Modelo --- */
.performance-card {
    background-color: #2c2c3e !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.performance-card .card-body {
    padding: 0.75rem 1rem;
}
.performance-card .metric-label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9b9bb5;
    margin-bottom: 0.25rem;
}
.performance-card .metric-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e0e0e0;
    line-height: 1.2;
}

/* --- Cards de Recomendação dentro do painel lateral (top-10) --- */
#cards-top10-recs .card {
    background-color: #2c2c3e !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
}
/* Efeito de iluminação suave ao passar o mouse */
.card:hover {
    box-shadow: 0 0 15px rgba(126, 135, 255, 0.3); /* Ajuste a cor e intensidade conforme necessário */
}
.card-title {
    color: #bbb;
}
.card-text {
    color: #fff;
}

/* CardHeader centralizado nos cards de ranking (ex: cards de recomendação top-10) */
.card-header.text-center {
    background-color: #5561ff;
    color: #e0e0e0;
    border: none;
    font-weight: bold;
}

/* --- Recomendações (Positivo/Negativo) --- */
.recomendacao-positiva {
    color: #00cc96 !important;
}

.recomendacao-negativa {
    color: #ff6b6b !important;
}

/* --- Tabela de Comparação Previsto x Real --- */

/* Fundo base — sem !important em color para não bloquear style_data_conditional */
.dash-table-container .dash-spreadsheet-container {
    background-color: #1e1e2f;
}
.dash-table-container .dash-spreadsheet-container .dash-cell {
    background-color: #1e1e2f !important; /* apenas background precisa de !important */
}

/* Hover de linha inteira */
.dash-spreadsheet-inner tr:hover td.dash-td-cell {
    background-color: rgba(85, 97, 255, 0.09) !important;
    transition: background-color 0.12s ease;
}

/* Remove outline de foco azul padrão do browser nas células clicadas */
.dash-spreadsheet td:focus,
.dash-spreadsheet td:focus-within {
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(85, 97, 255, 0.45) !important;
}

/* Paginação */
.previous-next-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px 4px 4px;
}
.previous-next-container button {
    background-color: #2c2c3e !important;
    color: #9b9bb5 !important;
    border: 1px solid #3a3a50 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-size: 0.8rem !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}
.previous-next-container button:hover {
    background-color: #5561ff !important;
    color: #ffffff !important;
    border-color: #5561ff !important;
}
.previous-next-container button:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}
/* Input do número de página — seletores amplos + webkit-text-fill-color
   para sobrescrever o estilo nativo do browser em campos de formulário */
.dash-table-container input,
.dash-table-container input[type="number"],
.dash-table-container .current-page input,
.dash-table-container .dash-table-paging input,
.previous-next-container input,
input.current-page {
    background-color: #2c2c3e !important;
    color: #e0e0e0 !important;
    -webkit-text-fill-color: #e0e0e0 !important;
    border: 1px solid #3a3a50 !important;
    border-radius: 4px !important;
    text-align: center !important;
    width: 48px !important;
    font-size: 0.82rem !important;
}
.dash-table-container .last-page,
.previous-next-container .last-page {
    color: #7a7a9a !important;
    font-size: 0.82rem !important;
}

.table-responsive {
  padding: 0.5rem;
  border-radius: 0.5rem;
}

/* Tooltip do DataTable (header) */
.dash-table-tooltip {
    background-color: #1e1e2f !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    font-size: 0.78rem !important;
    max-width: 300px !important;
    padding: 6px 10px !important;
}

/* --- Gráficos Responsivos --- */
@media (max-width: 576px) {
    .graph-container {
        width: 100%;
    }
    .dash-graph-container .dcc-graph {
        height: 300px;
    }
}
@media (max-width: 768px) {
    .dash-graph-container {
        height: 350px;
    }
}

/* ========================================================= */
/* ================ PREVISÕES DE PREÇO ===================== */
/* ========================================================= */

.input-dark::placeholder {
  color: #e0e0e0 !important;
}

.input-dark:focus {
  background-color: #2c2c3e !important;
  color: #e0e0e0 !important;
  box-shadow: 0 0 8px #7e87ff !important;
  border-color: #7e87ff !important;
}

/* Altere a regra .input-dark para esta, mais específica */
.form-control.input-dark {
  background-color: #2c2c3e;
  color: #e0e0e0;
  border: 1px solid #444;
  height: 38px;
  border-radius: 0.375rem;
}

/* Opcional: Melhora a cor do placeholder para o tema escuro */
.form-control.input-dark::placeholder {
  color: #8a8a9e !important;
}

/* A regra :focus já está correta, mas podemos torná-la mais específica também */
.form-control.input-dark:focus {
  background-color: #2c2c3e !important;
  color: #e0e0e0 !important;
  box-shadow: 0 0 8px #7e87ff !important;
  border-color: #7e87ff !important;
}

/* Regra para a barra de progresso roxa */
.progress-bar-purple .progress-bar {
    background-color: #5561ff !important;
}

/* ========================================================= */
/* ================ RECOMENDADOR DE AÇÕES ================== */
/* ========================================================= */

/* --- (Adicione regras específicas para a página de Recomendador aqui, se necessário) --- */

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

.btn-botaoacao {
    background-color: #5561ff !important;
    border-color: #5561ff !important;
    color: #ffffff !important;
    /* Adicionado 'box-shadow' à transição para o efeito ser suave */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease-in-out !important;
}

.btn-botaoacao:hover {
  background-color: #7e87ff !important;
  border-color: #7e87ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px 2px #5561ff !important;
}

.btn-botaoacao:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}