/* ============================================================================
   Histograma de mão de obra (HistogramaMaoDeObraSecao.razor)
   ============================================================================ */

.histograma-svg {
    width: 100%;
    height: auto;
    display: block;

    /* O SVG tem viewBox de 1000 unidades e ocupa 100% da largura do container, então TUDO dentro dele é
       escalado — inclusive o texto. Como a escala é (largura do container ÷ 1000), o tamanho em unidades
       precisa ser INVERSAMENTE proporcional à largura, e isso o CSS não expressa numa declaração só (nem
       clamp nem unidades de container query: todas são diretamente proporcionais). Daí os degraus.

       Mesmo problema e mesma solução dos gráficos do Controle, com uma diferença que muda todos os
       números: lá são dois gráficos lado a lado, cada um com metade da largura; aqui é um só, ocupando
       a coluna de conteúdo inteira. O container fica quase o dobro, e o tamanho em unidades cai junto.

       O alvo é ~12px na tela, o mesmo da tabela logo abaixo — foi por não compensar a escala que os
       rótulos saíram a 18px, destoando de tudo em volta.

       Uma variável e não três declarações repetidas: o rótulo dentro da barra acompanha o eixo por
       proporção, então há uma escada só para manter. Ao mexer, conferir nas duas pontas (1920 e 768):
       um valor único só acerta uma delas. */
    --histograma-fonte: 8px;
}

@media (max-width: 1600px) {
    .histograma-svg {
        --histograma-fonte: 10px;
    }
}

@media (max-width: 1440px) {
    .histograma-svg {
        --histograma-fonte: 11px;
    }
}

@media (max-width: 1280px) {
    .histograma-svg {
        --histograma-fonte: 13px;
    }
}

@media (max-width: 1100px) {
    .histograma-svg {
        --histograma-fonte: 15px;
    }
}

/* Abaixo de 960 a coluna lateral da obra empilha e o conteúdo passa a ocupar a largura toda: a escala
   despenca de uma vez, e o tamanho em unidades sobe junto. */
@media (max-width: 960px) {
    .histograma-svg {
        --histograma-fonte: 19px;
    }
}

@media (max-width: 600px) {
    .histograma-svg {
        --histograma-fonte: 28px;
    }
}

.histograma-grade {
    stroke: var(--mud-palette-lines-default, #e0e0e0);
    stroke-width: 1;
}

.histograma-eixo,
.histograma-mes {
    font-size: var(--histograma-fonte);
    fill: var(--mud-palette-text-secondary, #616161);
}

.histograma-barra {
    fill: var(--mud-palette-info, #4285f4);
}

/* O valor vai dentro da barra, em branco: é onde ele sempre cabe, qualquer que seja a altura. Um pouco
   menor que o eixo por ser negrito — no mesmo corpo, negrito pesa mais e pareceria maior. */
.histograma-valor {
    font-size: calc(var(--histograma-fonte) * 0.92);
    font-weight: 700;
    fill: #fff;
}

/* Respiro entre a barra de abas e a faixa dos anos. Aqui e não numa classe utilitária no markup porque
   é a mesma distância que separa o gráfico dos indicadores logo abaixo — a faixa é um bloco à parte, e
   colada nas abas ela se lê como parte delas. */
.histograma-anos {
    margin-top: 12px;
}

.histograma-ano {
    min-width: 88px;
}

/* Largura dos campos de data do filtro. Fica aqui, num container em volta, e NUNCA no Style do próprio
   MudDatePicker: aplicada ao componente, a restrição desce para o popover e o calendário abre cortado —
   dá para ver só as três primeiras colunas da semana. Mesma correção já feita em
   .controle-data-referencia, que existe pelo mesmo motivo. */
.histograma-campo-data {
    max-width: 150px;
    width: 100%;
}

/* Quatro indicadores em linha, quebrando para duas colunas e depois para uma. Larguras iguais: são
   quatro leituras do mesmo peso, e uma maior sugeriria uma hierarquia que não existe. */
.histograma-indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

/* A tabela tem quinze colunas e não cabe em tela estreita. Rolagem própria, para ela deslizar sem
   empurrar a página inteira para o lado. */
.histograma-tabela-rolagem {
    overflow-x: auto;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 4px;
}

.histograma-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

    .histograma-tabela th,
    .histograma-tabela td {
        padding: 4px 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        text-align: right;
    }

    .histograma-tabela thead th {
        background-color: var(--mud-palette-background-gray, #F8FAFC);
        font-weight: 600;
    }

    .histograma-tabela tfoot td {
        background-color: var(--mud-palette-background-gray, #F8FAFC);
        font-weight: 700;
        border-bottom: none;
    }

/* A descrição é a única coluna de texto, então é a única alinhada à esquerda — e a única que pode ser
   cortada, porque é a que cresce sem limite. O nome inteiro fica no title. */
.histograma-col-descricao {
    text-align: left !important;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.histograma-col-ano {
    text-align: center !important;
    font-weight: 600;
}

.histograma-total {
    color: var(--mud-palette-info, #3b82f6);
    font-weight: 700;
}