/* ============================================================================
   O DASHBOARD DO CAMPO — o desenho da tela, num lugar só.

   Este arquivo existe porque a tela NÃO TINHA UM. Todo o desenho morava em atributos
   style= no meio do markup — cor, sombra, raio de borda, tamanho de fonte repetidos
   cartão a cartão. Mudar o respiro de um KPI era achar seis lugares e acertar os seis.

   As classes seguem o Painel do Confinamento (PainelConfinamento.razor.css), de propósito:
   as duas telas são a mesma ideia — a fotografia de um assunto em cartões e gráficos — e
   quem abre uma reconhece a outra. Onde a medida é a mesma, o número é o mesmo.

   POR QUE AQUI, E NÃO NUM Dashboard.razor.css ISOLADO:

   São DOIS componentes desenhando o MESMO layout — o Dashboard e o DashboardSkeleton, que
   imita a tela enquanto os dados não chegam. CSS isolado é isolado por componente: as
   regras do Dashboard não alcançariam o esqueleto, e ele precisaria de uma cópia das
   medidas. Copiadas, as duas envelhecem separadas — muda a grade de um lado e o esqueleto
   passa a prometer um layout que não vem mais.

   É o mesmo motivo do campos-caviuna.css e do botoes-caviuna.css: quando a regra tem de
   alcançar markup de mais de um componente, ela sai do .razor.css e vem para cá.

   CARREGAR DEPOIS do MudBlazor.min.css (ver index.html).
   ============================================================================ */

/* A TELA NÃO ROLA POR DENTRO — quem rola é a .mud-main-content do layout.

   Isto é a correção do travamento de rolagem. Antes a raiz tinha overflow-x: hidden, e
   overflow-x definido faz o navegador calcular overflow-y como auto: nascia um SEGUNDO
   contêiner de rolagem dentro do primeiro. Com o ponteiro sobre um gráfico — que já
   engole o gesto por conta própria — a roda não achava quem devia rolar e a página
   simplesmente parava.

   O overflow-x existia por causa da margem negativa do MudGrid, que sumiu junto com ele.
   Ver .dash-blocos para o outro lado da correção. */
.dash-tela {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    min-width: 0;
}

/* ─────────────────────────────────────────── A BARRA DE FILTROS ──── */

/* Período à esquerda, ações à direita. Uma linha só enquanto couber; numa janela
   estreita as ações descem inteiras, em vez de espremer os campos de data. */
.dash-barra {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.dash-filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* ─────────────────────────────────────────────── OS INDICADORES ──── */

/* auto-fit + minmax, e não os xs/sm/md do MudGrid: o número de cartões por linha passa a
   ser função da LARGURA DISPONÍVEL, e não da largura do NAVEGADOR. É a diferença que
   aparece com o menu lateral aberto — o breakpoint md continuava dizendo "cabem seis"
   enquanto a área útil já tinha encolhido. Mesma regra do Painel do Confinamento. */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
    gap: 10px;
}

.dash-kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 96px;
    padding: 14px 16px;
    border-radius: 12px;
    border-top: 3px solid var(--dash-kpi-cor, var(--mud-palette-primary));
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* O CARTÃO QUE LEVA A ALGUM LUGAR SE COMPORTA COMO BOTÃO.

   button, e não div com @onclick: quem navega pelo teclado alcança com Tab e aciona com
   Enter, e o leitor de tela anuncia que ali há uma ação. O visual continua o do cartão —
   o reset abaixo desfaz a aparência de botão que o navegador aplica sozinho. */
button.dash-kpi {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

button.dash-kpi:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
    transform: translateY(-1px);
}

button.dash-kpi:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dash-kpi-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dash-kpi-titulo {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dash-kpi-valor {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--dash-kpi-cor, var(--mud-palette-primary));
}

.dash-kpi-sub {
    margin-top: 3px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* A seta que promete o clique. Só nos cartões que navegam — nos outros ela mentiria. */
.dash-kpi-seta {
    margin-left: 4px;
    vertical-align: -2px;
    opacity: .55;
}

/* ───────────────────────────────────────────── PASTOS DA FAZENDA ──── */

/* A grade dos pastos não tem Altura: cresce com as linhas e para. Uma fazenda tem dezenas
   de talhões, não milhares, e a rolagem da página dá conta. O teto existe para o caso
   extremo não empurrar os gráficos para fora do alcance. */
.dash-pastos {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow: auto;
    min-width: 0;
}

/* O GMD em destaque: é o número que a pessoa veio ver nesta grade. */
.dash-gmd {
    font-weight: 700;
}

/* GMD negativo é perda de peso — o mesmo vermelho que a Leitura de Cocho usa na nota alta
   e o Trato Diário na linha com erro. Vale a cor: é a linha que exige uma providência. */
.dash-gmd-ruim {
    color: var(--mud-palette-error);
}

/* Os totais do rodapé da grade, em linha. */
.dash-totais {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.dash-total-rotulo {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
}

.dash-total-valor {
    font-size: .82rem;
    font-weight: 600;
}

/* ───────────────────────────────────────────────── OS GRÁFICOS ──── */

/* OS GRÁFICOS SAEM EM DUAS LINHAS DE PAPÉIS DIFERENTES.

   Em cima, as três CONTAGENS DO PERÍODO — nascimento contra morte, compra contra venda, e
   a repartição das causas de morte. São três leituras do mesmo assunto (o que entrou e o
   que saiu do rebanho), e lado a lado o olho compara as três sem descer.

   Embaixo, o DESEMPENHO: a evolução do peso ao longo do tempo e o medidor de GMD. Os dois
   respondem "o rebanho está ganhando peso?" — um pela série histórica, outro pelo número
   de hoje —, e ficam juntos por isso.

   320px de piso: abaixo disso o Apex esconde os rótulos do eixo, e gráfico sem eixo não
   informa nada — melhor uma coluna a menos. */
.dash-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

/* A segunda linha não é auto-fit: as duas caixas têm pesos diferentes de propósito.

   A série temporal precisa de largura — são doze ou mais pontos no eixo, e espremida ela
   começa a omitir rótulos. O medidor é um número só e não ganha nada em ser largo; os
   280px de piso são o diâmetro mínimo para o valor no meio do arco continuar legível. */
.dash-blocos-desempenho {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .dash-blocos-desempenho {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dash-bloco {
    position: relative;
    padding: 16px 18px 6px;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    /* O Apex mede o pai no momento em que monta. Sem o min-width: 0 ele herdaria a largura
       do CONTEÚDO em vez da largura da coluna, e o gráfico vazaria o cartão. */
    min-width: 0;
    overflow: hidden;
}

/* O aviso embaixo do medidor de GMD, explicando o vermelho.

   Centralizado e logo abaixo do arco, sem margem grande: ele é a legenda daquele arco, não
   um recado da tela. Vermelho porque só aparece quando o medidor está vermelho — se algum
   dia houver um aviso neutro aqui, a cor sai daqui e vai para uma classe própria. */
.dash-medidor-aviso {
    margin: -6px 0 10px;
    padding: 0 8px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--mud-palette-error);
}

.dash-bloco-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.dash-bloco-titulo {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--mud-palette-text-primary);
}

.dash-bloco-sub {
    margin-top: 2px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.dash-bloco-icone {
    font-size: 18px;
    color: var(--mud-palette-text-secondary);
    opacity: .4;
}

/* A ROLAGEM SOBRE O GRÁFICO — a outra metade da correção.

   O ApexCharts liga um reconhecedor de gestos no SVG e marca touch-action: none nele. Num
   tablet isso é literal: o dedo apoiado sobre o gráfico não rolava a página, ficava preso
   ali. pan-y devolve a rolagem vertical ao navegador e deixa o resto do gesto com o Apex.

   O lado do mouse é resolvido no C#, desligando zoom e seleção — ver DesligarGestos, em
   Dashboard.razor.cs. Os dois são necessários: este cuida do toque, aquele da roda.

   SEM ::deep, e é por isso que funciona daqui: folha global não tem fronteira de
   componente para atravessar, e o SVG do Apex é alcançado direto. Num .razor.css este
   seletor precisaria de ::deep — foi assim que ele nasceu, antes de o arquivo sair de
   lá. */
.dash-bloco .apexcharts-canvas,
.dash-bloco .apexcharts-canvas svg {
    touch-action: pan-y;
}

/* O aviso de "não há o que mostrar", centralizado sobre a área do gráfico. pointer-events:
   none para ele não roubar o clique da legenda que estiver embaixo. */
.dash-bloco-vazio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

/* ───────────────────────────────────────── A BARRA DE PROGRESSO ──── */

/* Altura fixa mesmo vazia: sem ela o conteúdo saltava 4px cada vez que a barra aparecia e
   sumia. sticky para acompanhar a rolagem — a atualização pode terminar com a pessoa no
   pé da página. */
.dash-progresso {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 4px;
    flex: 0 0 auto;
}

/* ─────────────────────────────────────────────── A ENTRADA ──── */

/* A animação de entrada, escalonada por bloco. Curta de propósito: passando de meio
   segundo ela deixa de parecer o conteúdo chegando e passa a parecer a tela devagar. */
.dash-entra {
    animation: dash-entrada .4s ease both;
}

@keyframes dash-entrada {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quem pediu menos movimento ao sistema operacional não recebe a animação. */
@media (prefers-reduced-motion: reduce) {
    .dash-entra {
        animation: none;
    }

    button.dash-kpi:hover {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════ NO CELULAR ═══

   O DASHBOARD E O MAPA SÃO AS DUAS ÚNICAS TELAS QUE PRECISAM FUNCIONAR NO CELULAR. As
   demais são de escritório, com teclado e mouse, e não se tenta encolhê-las.

   ABAIXO DE 600px A TELA VIRA SÓ GRÁFICOS. Saem os cartões de indicador e sai a grade de
   pastos; ficam as cinco visualizações, uma embaixo da outra, ocupando a largura toda.

   POR QUE A GRADE SAI, e não apenas encolhe: as colunas dela têm largura declarada e não
   devem encolher — "1.234" cortado no meio não informa nada. Numa tela de 360px isso
   significa uma tabela de 780px rolando de lado dentro de uma página que rola para baixo,
   e o dedo nunca acerta qual das duas quer mover. Tentei essa rolagem lateral antes; o
   resultado foi a tabela espremida a uma letra por linha. Gráfico ocupa a largura que
   houver e continua se lendo — grade, não.

   POR QUE OS CARTÕES SAEM: sete deles somam quatro linhas antes de qualquer outra coisa.
   Num monitor são uma faixa fina no topo; num celular eles VIRAM a tela.

   Tablet (601px em diante) mantém tudo: lá a largura comporta os cartões numa faixa e a
   grade sem rolagem lateral. */
@media (max-width: 600px) {
    .dash-tela {
        padding: 12px;
        gap: 12px;
    }

    .dash-kpis,
    .dash-pastos-caixa {
        display: none;
    }

    /* UM GRÁFICO POR LINHA, OCUPANDO A LARGURA TODA.

       minmax(0, 1fr) e não auto-fit: o piso de 320px que serve ao monitor é maior que a
       área útil de um celular, e piso maior que a tela não encolhe a coluna — estoura a
       faixa e joga rolagem lateral na PÁGINA inteira. Era essa a quebra do print.

       As duas faixas viram a mesma coisa aqui, então o gap entre elas também: sem isso a
       segunda linha começava com um respiro diferente da primeira, e empilhados um sob o
       outro os cinco blocos precisam de cadência igual. */
    .dash-blocos,
    .dash-blocos-desempenho {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* As duas faixas coladas: empilhadas, elas são uma sequência só de cinco blocos, e o
       vão de 12px da .dash-tela entre uma e outra abriria um buraco no meio da sequência. */
    .dash-blocos + .dash-blocos-desempenho {
        margin-top: -12px;
    }

    .dash-bloco {
        padding: 12px 14px 4px;
    }

    /* O cabeçalho do bloco encolhe junto: 1,02rem num título e o subtítulo embaixo comem
       um quinto da altura do cartão numa tela pequena, e o que interessa é o desenho. */
    .dash-bloco-titulo {
        font-size: .92rem;
    }

    .dash-bloco-sub {
        font-size: .68rem;
    }

    /* Os botões medem o próprio texto e quebram inteiros. Esticados para dividir a linha,
       "Consultar animais" não cabia na metade e o rótulo partia em duas linhas DENTRO do
       botão — um botão de duas alturas ao lado de um de uma só. */
    .dash-acoes > * {
        flex: 0 1 auto;
    }

    /* Sem ::deep: este arquivo é folha global, não CSS isolado. O ::deep só é traduzido
       pelo compilador em .razor.css — aqui ele iria cru para o navegador, que não conhece
       o seletor e descartaria a regra inteira, calado. */
    .dash-acoes .mud-button-root {
        white-space: nowrap;
    }

    /* Os campos de data NÃO são espremidos de propósito: o CavCampoData traz a própria
       largura (134px) num style inline com "flex: 0 0 auto", e está certo — um campo mais
       estreito que "01/01/2024" não serve para nada. O flex-wrap da .dash-barra é quem
       resolve: o que não couber desce inteiro. */
    .dash-filtros,
    .dash-acoes {
        width: 100%;
    }
}