/* ================================================================
   Reliam Analytics Chart Theme
   ----------------------------------------------------------------
   Central CSS variables for all Plotly chart styling.
   Python chart generators should mirror these values in
   services/stats/_chart_theme.py so figures and containers stay
   in sync.
   ================================================================ */

:root {
    /* ------------------------------------------------------------------
       Core data palette (bars, markers, histograms, boxes, areas, etc.)
       ------------------------------------------------------------------ */
    --statsix-chart-primary: #081028;      /* Cor principal: 1ª série de dados (barras, marcadores, histogramas) */
    --statsix-chart-secondary: #00B088;    /* Cor secundária: 2ª série de dados */
    --statsix-chart-tertiary: #2DBE9D;     /* Cor terciária: 3ª série de dados */
    --statsix-chart-quaternary: #7fdcc9;   /* Cor quaternária: 4ª série de dados */
    --statsix-chart-quinary: #b9ece0;      /* Cor quinária: 5ª série de dados */

    /* Acentos quentes/categóricos alternativos (usados em gráficos com muitas categorias) */
    --statsix-chart-accent-1: #dc3545;     /* Acento 1: vermelho (destaque/alerta) */
    --statsix-chart-accent-2: #e6a23c;     /* Acento 2: laranja */
    --statsix-chart-accent-3: #f1c40f;     /* Acento 3: amarelo */
    --statsix-chart-accent-4: #198754;     /* Acento 4: verde */
    --statsix-chart-accent-5: #12224f;     /* Acento 5: marinho claro */
    --statsix-chart-accent-6: #007D68;     /* Acento 6: verde-azulado */

    /* ------------------------------------------------------------------
       Semantic line / reference colors
       ------------------------------------------------------------------ */
    --statsix-chart-line-primary: #081028;    /* Linha principal (linha de dados primária) */
    --statsix-chart-line-secondary: #00B088;  /* Linha secundária */
    --statsix-chart-line-reference: #081028;  /* Linha de referência (ex.: alvo, valor esperado) */
    --statsix-chart-line-critical: #dc3545;   /* Linha crítica (ex.: limite crítico, rejeição) */
    --statsix-chart-line-normal: #dc3545;     /* Linha da curva normal (sobreposta em histogramas) */
    --statsix-chart-line-fit: #dc3545;        /* Linha de ajuste/regressão */
    --statsix-chart-line-trend: #081028;      /* Linha de tendência */
    --statsix-chart-line-grid: #eef1f5;       /* Cor das linhas de grade (gridlines) */
    --statsix-chart-line-zeroline: #cfd6dd;   /* Cor da linha do zero (zeroline) */
    --statsix-chart-line-mean: #081028;       /* Linha da média */
    --statsix-chart-line-median: #2DBE9D;     /* Linha da mediana */
    --statsix-chart-line-control: #dc3545;    /* Linhas de controle (UCL/LCL em cartas SPC) */
    --statsix-chart-line-warning: #e6a23c;    /* Linha de aviso/atenção */

    /* ------------------------------------------------------------------
       Fill / area colors (with opacity handled in Python trace definitions)
       ------------------------------------------------------------------ */
    --statsix-chart-fill-primary: #081028;                  /* Preenchimento primário (áreas/barras) */
    --statsix-chart-fill-secondary: #00B088;                /* Preenchimento secundário */
    --statsix-chart-fill-tertiary: #2DBE9D;                 /* Preenchimento terciário */
    --statsix-chart-fill-critical: #dc3545;                 /* Preenchimento crítico (região de rejeição) */
    --statsix-chart-fill-reference: rgba(0, 176, 136, 0.1); /* Preenchimento de referência (transparente) */
    --statsix-chart-fill-confidence: rgba(0, 176, 136, 0.1); /* Preenchimento das bandas de confiança */

    /* ------------------------------------------------------------------
       Background colors
       ------------------------------------------------------------------ */
    --statsix-chart-bg-plot: #ffffff;                     /* Fundo da área de plotagem (dentro dos eixos) */
    --statsix-chart-bg-paper: #ffffff;                    /* Fundo do gráfico inteiro (papel/canvas) */
    --statsix-chart-bg-legend: rgba(255, 255, 255, 0.85); /* Fundo da caixa de legenda (semitransparente) */
    --statsix-chart-bg-tooltip: rgba(255, 255, 255, 0.95);/* Fundo do tooltip (ao passar o mouse) */
    --statsix-chart-bg-annotation: rgba(255, 255, 255, 0.95); /* Fundo das anotações/rótulos */

    /* ------------------------------------------------------------------
       Text / axis / label colors
       ------------------------------------------------------------------ */
    --statsix-chart-title: #081028;                     /* Cor do título do gráfico */
    --statsix-chart-subtitle: #081028;                  /* Cor do subtítulo */
    --statsix-chart-axis-title: #4C5968;                /* Cor do título dos eixos (rótulo X/Y) */
    --statsix-chart-axis-tick: #4C5968;                 /* Cor dos números/marcações dos eixos */
    --statsix-chart-axis-line: #cfd6dd;                 /* Cor da linha dos eixos */
    --statsix-chart-axis-grid: #eef1f5;                 /* Cor da grade de fundo (gridlines) */
    --statsix-chart-legend-text: #4C5968;               /* Cor do texto da legenda */
    --statsix-chart-legend-border: rgba(0, 0, 0, 0.08); /* Cor da borda da legenda */
    --statsix-chart-label: #4C5968;                     /* Cor dos rótulos de dados */
    --statsix-chart-annotation: #4C5968;                /* Cor das anotações padrão */
    --statsix-chart-annotation-critical: #dc3545;       /* Cor das anotações críticas (destaque) */
    --statsix-chart-tooltip-text: #1a1a1a;              /* Cor do texto dentro do tooltip */
    --statsix-chart-tooltip-border: rgba(0, 0, 0, 0.08);/* Cor da borda do tooltip */

    /* ------------------------------------------------------------------
       Typography sizes
       ------------------------------------------------------------------ */
    --statsix-chart-title-size: 12px;        /* Tamanho da fonte do título */
    --statsix-chart-subtitle-size: 10px;     /* Tamanho da fonte do subtítulo */
    --statsix-chart-axis-title-size: 10px;   /* Tamanho da fonte do título dos eixos */
    --statsix-chart-axis-tick-size: 9px;     /* Tamanho da fonte dos números dos eixos */
    --statsix-chart-legend-size: 9px;        /* Tamanho da fonte da legenda */
    --statsix-chart-annotation-size: 9px;    /* Tamanho da fonte das anotações */
    --statsix-chart-tooltip-size: 11px;      /* Tamanho da fonte do tooltip */

    /* ------------------------------------------------------------------
       Geometry / dimensioning
       ------------------------------------------------------------------ */
    --statsix-chart-grid-columns: 1fr 1fr;       /* Colunas da grade de gráficos (2 colunas iguais) */
    --statsix-chart-grid-gap: 12px;              /* Espaçamento entre os gráficos da grade */
    --statsix-chart-grid-margin-top: 10px;       /* Margem superior da grade de gráficos */
    --statsix-chart-cell-aspect-ratio: 1.6;     /* OBSOLETO: não é mais aplicado em .desc-chart-cell.
                                                     A altura dos gráficos agora é controlada por
                                                     CHART_HEIGHT em services/stats/_chart_theme.py
                                                     (>>> AJUSTE A ALTURA LÁ, não aqui <<<) */
    --statsix-chart-cell-min-width: 0;           /* Largura mínima da célula do gráfico */
    --statsix-chart-cell-border-radius: 0;       /* Arredondamento das bordas da célula */
    --statsix-chart-margin-left: 45px;           /* Margem interna esquerda do gráfico (espaço p/ eixo Y) */
    --statsix-chart-margin-right: 15px;          /* Margem interna direita do gráfico */
    --statsix-chart-margin-top: 40px;            /* Margem interna superior (espaço p/ título) */
    --statsix-chart-margin-bottom: 60px;         /* Margem interna inferior (espaço p/ eixo X e legenda) */
    --statsix-chart-margin-compact-bottom: 40px; /* Margem inferior compacta (gráficos sem legenda) */
    --statsix-chart-line-width: 1.5px;           /* Espessura padrão das linhas */
    --statsix-chart-line-width-thin: 1px;        /* Espessura fina de linha */
    --statsix-chart-line-width-bold: 2px;        /* Espessura grossa de linha (destaque) */
    --statsix-chart-marker-size: 5px;            /* Tamanho padrão dos marcadores (pontos) */
    --statsix-chart-marker-size-large: 6px;      /* Tamanho grande de marcador */
    --statsix-chart-marker-size-xl: 8px;         /* Tamanho extra-grande de marcador */
    --statsix-chart-box-line-width: 1.5px;       /* Espessura da linha do boxplot */
    --statsix-chart-bar-opacity: 0.72;           /* Opacidade das barras */
    --statsix-chart-histogram-opacity: 0.72;     /* Opacidade das barras do histograma */
    --statsix-chart-scatter-opacity: 0.85;       /* Opacidade dos pontos de dispersão */

    /* ------------------------------------------------------------------
       Layout helpers
       ------------------------------------------------------------------ */
    --statsix-chart-section-gap: 22px;             /* Espaçamento vertical entre seções */
    --statsix-chart-section-title-size: 0.9rem;    /* Tamanho da fonte do título de seção */
    --statsix-chart-section-title-color: #081028;  /* Cor do título de seção */
    --statsix-chart-section-title-border: #081028; /* Cor da borda inferior do título de seção */
    --statsix-chart-table-header-bg: #f6f8fa;      /* Fundo do cabeçalho das tabelas */
    --statsix-chart-table-header-color: #4C5968;   /* Cor do texto do cabeçalho das tabelas */
    --statsix-chart-table-border: #cfd6dd;         /* Cor das bordas das tabelas */
    --statsix-chart-table-row-hover: #e6f4f0;      /* Cor de fundo da linha ao passar o mouse */
}

/* ================================================================
   Container standard layout
   ================================================================ */
/* Grade que organiza os gráficos em colunas (ex.: 2 por linha) */
.desc-charts-grid {
    display: grid;                                          /* Ativa layout em grade */
    grid-template-columns: var(--statsix-chart-grid-columns); /* Número/tamanho das colunas */
    gap: var(--statsix-chart-grid-gap);                     /* Espaço entre gráficos */
    width: 100%;                                            /* Ocupa toda a largura disponível */
    margin-top: var(--statsix-chart-grid-margin-top);       /* Margem acima da grade */
    box-sizing: border-box;                                 /* Inclui padding/borda no cálculo da largura */
    align-items: start;                                     /* Evita estirar células para a altura da linha
                                                                (sem isso, um gráfico menor ficava com espaço
                                                                vazio abaixo, "puxado" pelo vizinho mais alto) */
}

/* Célula individual que contém um gráfico dentro da grade.
   IMPORTANTE: a altura NÃO é mais forçada por aspect-ratio aqui.
   A altura real vem de CHART_HEIGHT (services/stats/_chart_theme.py),
   aplicada pelo Python em cada figura Plotly (via _plotly_html).
   Isso garante que TODOS os gráficos (grid ou não) tenham a mesma
   altura da tela "Teste Z — Uma Amostra". */
.desc-chart-cell {
    width: 100%;                                     /* Ocupa toda a largura da coluna */
    min-width: var(--statsix-chart-cell-min-width);  /* Largura mínima da célula */
    overflow: hidden;                                /* Esconde o que ultrapassar a célula */
    display: block;                                  /* Fluxo normal (altura definida pelo conteúdo/Plotly) */
    box-sizing: border-box;                          /* Inclui padding/borda no tamanho */
}

/* Garante que o container do gráfico ocupe a largura da célula,
   mas deixa a ALTURA livre (vem do Plotly / CHART_HEIGHT) */
.desc-chart-cell > div {
    width: 100% !important;   /* Largura total da célula */
}

/* Garante que o gráfico Plotly ocupe a largura da célula,
   mas deixa a ALTURA livre (vem do Plotly / CHART_HEIGHT) */
.desc-chart-cell .plotly-graph-div {
    width: 100% !important;   /* Largura total */
}

/* Seção (bloco) que agrupa título + tabela/gráfico */
.desc-sec {
    margin-bottom: var(--statsix-chart-section-gap); /* Espaço abaixo da seção */
    width: 100%;                                     /* Ocupa toda a largura */
}

/* Título exibido acima de tabelas/gráficos */
.desc-sec-title {
    font-size: var(--statsix-chart-section-title-size);   /* Tamanho da fonte do título */
    font-weight: 700;                                     /* Negrito */
    color: var(--statsix-chart-section-title-color);      /* Cor do texto */
    border-bottom: 2px solid var(--statsix-chart-section-title-border); /* Linha inferior de destaque */
    padding-bottom: 4px;                                  /* Espaço entre texto e a linha */
    margin-bottom: 10px;                                  /* Espaço abaixo do título */
    display: flex;                                        /* Alinha ícone + texto lado a lado */
    align-items: center;                                  /* Centraliza verticalmente */
    gap: 8px;                                             /* Espaço entre ícone e texto */
}

/* Auxiliares de tabela (tabelas de estatísticas dos resultados) */
/* Contêiner que envolve a tabela */
.desc-tbl-wrap {
    width: 100%;            /* Largura total */
    overflow-x: visible;    /* Permite conteúdo ultrapassar horizontalmente */
    margin-bottom: 10px;    /* Espaço abaixo da tabela */
}

/* Tabela em si */
.desc-tbl {
    width: 100%;              /* Largura total */
    border-collapse: collapse;/* Junta as bordas das células */
    font-size: 0.81rem;      /* Tamanho da fonte do conteúdo */
    table-layout: auto;      /* Largura das colunas ajustada ao conteúdo */
}

/* Cabeçalho da tabela */
.desc-tbl thead th {
    background: var(--statsix-chart-table-header-bg);    /* Cor de fundo do cabeçalho */
    color: var(--statsix-chart-table-header-color);      /* Cor do texto do cabeçalho */
    padding: 5px 10px;                                   /* Espaçamento interno das células */
    font-weight: 700;                                    /* Negrito */
    text-align: right;                                   /* Alinha à direita (valores numéricos) */
    white-space: nowrap;                                 /* Impede quebra de linha */
    border-bottom: 2px solid var(--statsix-chart-table-border); /* Borda inferior de destaque */
    border-top: 1px solid #dde0ee;                       /* Borda superior sutil */
}

/* Primeira coluna do cabeçalho alinhada à esquerda (rótulo) */
.desc-tbl thead th:first-child {
    text-align: left;   /* Alinha à esquerda */
}

/* Células do corpo da tabela */
.desc-tbl tbody td {
    padding: 4px 10px;                   /* Espaçamento interno */
    text-align: right;                   /* Alinha à direita (valores) */
    border-bottom: 1px solid #eef0f8;    /* Linha divisória entre linhas */
    white-space: nowrap;                 /* Impede quebra de linha */
}

/* Primeira coluna do corpo (nome da estatística) */
.desc-tbl tbody td:first-child {
    text-align: left;                    /* Alinha à esquerda */
    font-weight: 600;                    /* Semi-negrito */
    color: var(--statsix-chart-title);   /* Cor de destaque */
}

/* Realce da linha ao passar o mouse */
.desc-tbl tbody tr:hover td {
    background: var(--statsix-chart-table-row-hover); /* Cor de fundo no hover */
}

/* ================================================================
   Plotly container overrides (applied when JS cannot reach inline
   styles, e.g. during PDF export or before resize script runs)
   ================================================================ */
/* Pinta APENAS a camada SVG de fundo do Plotly (a primeira).
   Importante: não aplicar em todas as camadas, senão as camadas
   superiores (opacas) cobrem os dados e o gráfico fica invisível. */
.plotly-graph-div .plotly .main-svg:first-of-type {
    background-color: var(--statsix-chart-bg-paper) !important; /* Cor de fundo do gráfico */
}

/* Gráficos de testes não-paramétricos — 50% da largura */
.result-chart-wrap .mood-chart,
.result-chart-wrap .friedman-chart {
    width: 50% !important;
}

/* ================================================================
   Chart configuration modal
   ================================================================ */
#chartSettingsModal .modal-content {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: var(--card-border);
}

#chartSettingsModal .modal-header {
    background: var(--bg-header);
    border-bottom: 1px solid #e5e7eb;
}

#chartSettingsModal .modal-title {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 700;
}

#chartSettingsModal .modal-body {
    background: #fff;
    padding: 18px 20px;
}

#chartSettingsModal .modal-footer {
    background: #f7f8fc;
    border-top: 1px solid #e5e7eb;
}

.chart-var-section {
    padding: 14px;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.chart-tab-bar {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #dde0ee;
    margin: 18px 0 12px;
}

.chart-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6c757d;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
}

.chart-tab-btn:hover {
    color: var(--statsix-chart-title);
}

.chart-tab-btn.active {
    color: var(--statsix-chart-title);
    border-bottom-color: var(--statsix-chart-title);
}

.chart-tab-pane {
    display: none;
    animation: chart-fade-in .15s ease-in-out;
}

.chart-tab-pane.active {
    display: block;
}

#chartSettingsModal .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

#chartSettingsModal .form-control-sm,
#chartSettingsModal .form-select-sm {
    font-size: 0.83rem;
}

#chartSettingsModal .form-check-label {
    font-size: 0.82rem;
    color: var(--text-main);
}

.chart-section-divider {
    border-color: var(--statsix-chart-line-grid);
}

/* Dual-listbox for chart columns */
.chart-varsel-wrap { display: grid; grid-template-columns: 170px 50px 1fr; gap: 8px; margin-bottom: 16px; min-height: 184px; }
.chart-varsel-src-col { display: flex; flex-direction: column; gap: 4px; }
.chart-varsel-src-col select { flex: 1; min-height: 140px; }
.chart-varsel-btns-col { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 22px; }
.chart-vsel-grp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.chart-vsel-lbl { font-size: .68rem; color: #6c757d; text-align: center; }
.chart-arr-btn { width: 38px !important; padding: 2px 4px !important; font-size: .85rem !important; }
.chart-varsel-tgt-col { display: flex; flex-direction: column; gap: 8px; }
.chart-varsel-tgt-box { flex: 1; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.chart-varsel-tgt-box select { flex: 1; min-height: 72px; }

@keyframes chart-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}