/* ══════════════════════════════════════════════════════════════════════
   GRAFICOS.CSS — base para gráficos do Observatório Agroalimentar dos
   Açores: cartão de fundo branco, eixos a cor sólida, barra de
   alternância (granularidade / modo de visualização).

   Como aplicar numa página:
     <link rel="stylesheet" href="graficos.css">

   Estrutura esperada:
     <div class="chart-card">
       <div class="chart-card-title">Título</div>
       <div class="chart-card-sub">Subtítulo</div>
       <div class="chart-toolbar">
         <div class="chart-tbtn-group">
           <button class="chart-tbtn active">Mensal</button>
           <button class="chart-tbtn">Anual</button>
         </div>
         <div class="chart-tbtn-group">
           <button class="chart-tbtn active">Valor</button>
           <button class="chart-tbtn">Variação %</button>
           <button class="chart-tbtn">% do total do ano</button>
         </div>
       </div>
       <canvas></canvas>
     </div>

   Cores dos eixos/pontos usadas pelo canvas: como o canvas não lê classes
   CSS, estas cores ficam disponíveis como CSS custom properties em :root
   (ver bloco :root mais abaixo) para serem lidas via JS
   (getComputedStyle) e mantidas consistentes em todos os gráficos —
   incluindo os de barras empilhadas com rótulo de valor dentro do
   segmento (ex. "Evolução por tipo de destino"), que se repetem em
   várias páginas.

   Uso no JS (uma vez, no início da função de render):
     const cs = getComputedStyle(document.documentElement);
     const COL_POS          = cs.getPropertyValue('--chart-value-positive').trim();
     const COL_NEG          = cs.getPropertyValue('--chart-value-negative').trim();
     const COL_NEG_ON_FILL  = cs.getPropertyValue('--chart-value-negative-on-fill').trim();
     const COL_NEUTRAL      = cs.getPropertyValue('--chart-value-neutral').trim();
     const COL_LABEL_LIGHT  = cs.getPropertyValue('--chart-label-on-fill-light').trim();
     const COL_LABEL_DARK   = cs.getPropertyValue('--chart-label-on-fill-dark').trim();
     const COL_AXIS         = cs.getPropertyValue('--chart-axis').trim();

   Regra fixa em todos os gráficos: um valor negativo (variação, delta,
   etc.) usa SEMPRE --chart-value-negative (fora de barras/segmentos
   coloridos) ou --chart-value-negative-on-fill (dentro de uma barra ou
   segmento colorido, onde é preciso mais contraste) — nunca a cor
   "neutra" do segmento/série.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --chart-axis: #232F5D;                    /* eixo/grelha — navy sólido */
    --chart-value-positive: #185FA5;          /* variação positiva, sobre fundo claro (eixo, topo de barra, tabela) */
    --chart-value-negative: #e53935;          /* variação negativa — vermelho vivo, igual ao das tabelas (.col-pct.pct-down) */
    --chart-value-negative-on-fill: #e53935;  /* variação negativa, texto DENTRO de uma barra/segmento colorido — mesmo vermelho vivo, sem variante mais clara */
    --chart-value-neutral: #5a6b8c;           /* variação ~0%, sobre fundo claro */
    --chart-label-on-fill-light: #ffffff;     /* rótulo (não-negativo) sobre segmento escuro/azul */
    --chart-label-on-fill-dark: #1a2548;      /* rótulo (não-negativo) sobre segmento claro (dourado) */
}

.chart-card {
    background: #FDFAEF;
    border: 2px solid #6190B5;
    border-radius: 10px;
    padding: 0 0 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    overflow: hidden;
}

.chart-card-header {
    background: #6190B5;
    padding: 10px 20px;
}

.chart-card-title {
    color: #ffffff;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.chart-card-sub {
    color: rgba(255,255,255,0.8);
    font-family: Lato, sans-serif;
    font-size: 11px;
    margin-top: 2px;
}

.chart-card-body { padding: 0 20px; }

/* ── Colunas com efeito 3D (gráfico "Por Ano" — comparação entre anos) ──
   O relevo (face de topo + face lateral de cada coluna) e a sombra por
   baixo são desenhados directamente no canvas, via plugin Chart.js (ver
   Leite_Entregas.html, plugin "bar3dFaces", com ctx.shadowBlur só nas
   barras e desligado antes de escrever os valores). NÃO usar
   filter:drop-shadow() no <canvas> para isto — reprocessa o bitmap
   inteiro e desfoca também o texto/rótulos do gráfico. */

/* ── Barra de alternância (granularidade / modo de visualização) ── */
.chart-toolbar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 10px;
}
.chart-tbtn-group { display: flex; gap: 6px; flex-wrap: wrap; }

.chart-tbtn {
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(35,47,93,0.2);
    background: rgba(35,47,93,0.05);
    color: rgba(35,47,93,0.6);
    transition: all 0.15s;
    white-space: nowrap;
}
.chart-tbtn:hover { color: #232F5D; border-color: rgba(35,47,93,0.4); }
.chart-tbtn.active { background: #232F5D; border-color: #232F5D; color: #E1C233; font-weight: 700; }

.chart-nodata {
    text-align: center;
    padding: 40px;
    color: rgba(35,47,93,0.4);
    font-family: Lato, sans-serif;
    font-size: 12px;
}

/* ── Variante escura — para usar a botoeira .chart-tbtn fora do cartão
   branco/dourado, ex. dentro de um dropdown sobre fundo navy. ── */
.chart-tbtn-dark {
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-family: Lato, sans-serif;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.7);
    transition: all 0.15s;
    white-space: nowrap;
}
.chart-tbtn-dark:hover { color: white; border-color: rgba(255,255,255,0.3); }
.chart-tbtn-dark.active { background: #E1C233; border-color: #E1C233; color: #1a2548; font-weight: 700; }

/* ── Variante invertida — gráficos de barras: onde o gráfico de linhas usa
   azul, este usa amarelo, e vice-versa. Fundo azul claro sólido (mesma
   luminosidade do amarelo claro usado no cartão de linhas), cabeçalho e
   contorno dourados. ── */
.chart-card.inverted { background: #EAF2F8; border-color: #E1C233; }
.chart-card.inverted .chart-card-header { background: #E1C233; }
.chart-card.inverted .chart-card-title,
.chart-card.inverted .chart-card-sub { color: #1a2548; }

/* ══ BARRA DE COMPOSIÇÃO (100% empilhada, HTML) + LEGENDA + DETALHE ══════
   Variante de .chart-card para quando a "barra" é a própria composição de
   um total em 2+ partes (ex. Carne/Leite), em vez de uma série temporal —
   feita em HTML/CSS (divs), não canvas. Vem com uma legenda por segmento
   (valor, %, variação) e, opcionalmente, um painel de detalhe abaixo que
   se preenche ao clicar num item relacionado (ex. uma raça da lista).

   Estrutura esperada, dentro de .chart-card-body:
     <div class="chart-stackbar">
         <div class="chart-stackbar-seg" style="width:62%;background:#E1C233;border-radius:5px 0 0 5px;"></div>
         <div class="chart-stackbar-seg" style="flex:1;background:#6190B5;border-radius:0 5px 5px 0;"></div>
     </div>
     <div class="chart-legend">
         <div class="chart-legend-row">
             <span class="chart-legend-swatch" style="background:#E1C233;"></span>
             <span class="chart-legend-label">Raças de carne</span>
             <span class="chart-legend-val">12 345</span>
             <span class="chart-legend-pct" style="color:#E1C233;">62,0%</span>
             <span class="chart-legend-var var-up">+3,2%</span>
         </div>
     </div>
     <div class="chart-detail-panel"> ...preenchido em JS ao seleccionar um item... </div>
     <div class="chart-detail-empty">Clique num item para ver detalhes</div>

   Variação (.chart-legend-var): usa os tokens de --chart-value-positive /
   --chart-value-negative (fundo claro) definidos no topo deste ficheiro —
   nunca as cores verdes/vermelhas dos KPI cards escuros. ── */
.chart-stackbar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 16px; }
.chart-stackbar-seg { transition: width .4s; min-width: 0; }
.chart-stackbar-seg[style*="width:0%"] { min-width: 0; }

.chart-legend { display: flex; flex-direction: column; gap: 10px; }
.chart-legend-hdr {
    display: grid;
    grid-template-columns: 14px 1fr auto auto auto auto;
    gap: 10px;
    font-family: Lato, sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(35,47,93,.4);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(97,144,181,.2);
}
.chart-legend-hdr span { text-align: right; }
.chart-legend-hdr span:first-child, .chart-legend-hdr span:nth-child(2) { text-align: left; }
.chart-legend-row {
    display: grid;
    grid-template-columns: 14px 1fr auto auto auto auto;
    align-items: center;
    gap: 10px;
    font-family: Lato, sans-serif;
}
.chart-legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.chart-legend-label { font-size: 12px; color: var(--chart-axis); }
.chart-legend-prev { font-size: 12px; color: rgba(35,47,93,.4); text-align: right; font-variant-numeric: tabular-nums; }
.chart-legend-val { font-size: 14px; font-weight: 700; color: var(--chart-axis); text-align: right; font-variant-numeric: tabular-nums; }
.chart-legend-pct { font-size: 12px; font-weight: 700; min-width: 46px; text-align: right; }
.chart-legend-var { font-size: 11px; font-weight: 700; min-width: 52px; text-align: right; }
.chart-legend-var.var-up   { color: var(--chart-value-positive); }
.chart-legend-var.var-down { color: var(--chart-value-negative); }
.chart-legend-var.var-zero { color: var(--chart-value-neutral); }

/* Painel de detalhe — preenchido ao seleccionar um item (ex. clique numa
   linha de uma lista .rank-row, ver listas.css). Acento superior colorido
   por categoria via --detail-accent (definir inline por instância). */
.chart-detail-panel {
    background: rgba(97,144,181,.06);
    border: 1px solid rgba(97,144,181,.25);
    border-radius: 8px;
    padding: 18px 20px;
    margin-top: 12px;
    font-family: Lato, sans-serif;
}
.chart-detail-hdr {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 2px solid var(--detail-accent, #6190B5);
}
.chart-detail-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.chart-detail-name { font-size: 16px; font-weight: 700; color: var(--detail-accent, #6190B5); line-height: 1.2; }
.chart-detail-yrspan { font-size: 10px; color: rgba(35,47,93,.5); flex-shrink: 0; }
.chart-detail-stats { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chart-detail-num { font-size: 26px; font-weight: 700; color: var(--chart-axis); font-variant-numeric: tabular-nums; line-height: 1; }
.chart-detail-pct { font-size: 13px; color: var(--detail-accent, #6190B5); font-weight: 700; }
.chart-detail-prev { font-size: 11px; color: rgba(35,47,93,.5); }

.chart-detail-empty {
    background: rgba(97,144,181,.06);
    border: 1px solid rgba(97,144,181,.25);
    border-radius: 8px;
    margin-top: 12px;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Lato, sans-serif;
    font-size: 12px;
    color: rgba(35,47,93,.4);
    font-style: italic;
}

/* Certificações dentro do painel de detalhe — chips compactos */
.chart-detail-certs { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(97,144,181,.2); display: flex; gap: 10px; flex-wrap: wrap; }
.chart-detail-cert-chip {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(97,144,181,.08); border: 1px solid rgba(97,144,181,.25);
    border-radius: 8px; padding: 7px 12px; min-width: 60px;
}
.chart-detail-cert-lbl { font-size: 10px; font-weight: 700; font-family: Lato, sans-serif; letter-spacing: .5px; }
.chart-detail-cert-val { font-size: 16px; font-weight: 700; color: var(--chart-axis); font-family: Lato, sans-serif; font-variant-numeric: tabular-nums; }
.chart-detail-cert-sub { font-size: 9px; color: rgba(35,47,93,.5); font-family: Lato, sans-serif; }

/* Por ilha, dentro do painel de detalhe */
.chart-detail-ilhas { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(97,144,181,.2); }
.chart-detail-ilhas-lbl { font-size: 9px; font-weight: 700; color: rgba(35,47,93,.45); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; font-family: Lato, sans-serif; }
.chart-detail-ilha-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: Lato, sans-serif; font-size: 12px; }
.chart-detail-ilha-name { min-width: 90px; color: var(--filtro-accent-ilha, #6190B5); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-detail-ilha-track { flex: 1; height: 4px; background: rgba(97,144,181,.15); border-radius: 2px; overflow: hidden; }
.chart-detail-ilha-fill { height: 100%; border-radius: 2px; opacity: .85; }
.chart-detail-ilha-pct { min-width: 32px; text-align: right; color: var(--filtro-accent-ilha, #6190B5); font-weight: 700; font-size: 13px; }
.chart-detail-ilha-val { min-width: 48px; text-align: right; font-weight: 700; font-size: 14px; color: var(--chart-axis); }

/* Nota de rodapé de um chart-card (ex. metodologia da variação homóloga) —
   discreta, itálico, cor suave sobre o fundo claro do cartão. */
.chart-note { margin-top: 10px; font-family: Lato, sans-serif; font-size: 10px; font-style: italic; color: rgba(35,47,93,.45); line-height: 1.4; }
.chart-note--tight { margin-top: 4px; }

/* ══ BARRAS MENSAIS EMPILHADAS (100%) ══════════════════════════════════
   Composição (%) por mês do ano seleccionado — ex. "influencia o mês do
   ano a classificação SEUROP". Uma coluna por mês, cada uma uma barra
   100% empilhada (feita de divs, sem canvas), com rótulo do mês por baixo.

   Estrutura esperada, dentro de .chart-card-body:
     <div class="chart-monthbars">
         <div class="chart-monthbar-col" title="Jan — S 40%, E 35%...">
             <div class="chart-monthbar-seg" style="height:40%;background:#E1C233;"></div>
             <div class="chart-monthbar-seg" style="height:35%;background:#C7B84D;"></div>
             ...
         </div>
         ... (uma coluna por mês)
     </div>
     <div class="chart-monthbars-labels">
         <span class="chart-monthbars-lbl">Jan</span>
         ... (um rótulo por mês, mesma ordem/largura das colunas)
     </div>
   ══════════════════════════════════════════════════════════════════════ */
/* ══ BARRAS MENSAIS/ESTACIONAIS EMPILHADAS (100%) ══════════════════════
   Composição (%) por mês (ou estação) do ano seleccionado — ex. "influencia
   a época do ano a classificação SEUROP". Uma coluna por mês/estação, cada
   uma uma barra 100% empilhada, com rótulo por baixo. O valor (%) de cada
   segmento fica sempre visível: escrito dentro do próprio segmento quando
   há espaço, ou como uma "chaveta" (linha + etiqueta) por cima da barra
   quando o segmento é demasiado curto para o texto caber lá dentro.

   Estrutura esperada, dentro de .chart-card-body (envolvida por um wrapper
   com padding-top para dar espaço às chavetas que saem por cima):
     <div class="chart-monthbars-outer">
       <div class="chart-monthbars">
         <div class="chart-monthbar-col-wrap">
             <div class="chart-monthbar-col" title="Jan — S 40%, E 35%...">
                 <div class="chart-monthbar-seg" style="height:40%;background:#E1C233;">
                     <span class="chart-monthbar-seg-label" style="color:#1a2548;">40.00%</span>
                 </div>
                 ... (segmento demasiado curto → sem label lá dentro; ver chaveta abaixo)
             </div>
             <!-- chaveta: só para segmentos curtos, uma por segmento pequeno -->
             <div class="chart-monthbar-callout-line" style="bottom:6%;height:94%;"></div>
             <span class="chart-monthbar-callout-label" style="bottom:6%;">0.01%</span>
         </div>
         ... (uma coluna por mês/estação)
       </div>
       <div class="chart-monthbars-labels">
           <span class="chart-monthbars-lbl">Jan</span>
           ...
       </div>
     </div>
   ══════════════════════════════════════════════════════════════════════ */
.chart-monthbars-outer { padding-top: 46px; }
.chart-monthbars { display: flex; align-items: flex-end; gap: 5px; height: 200px; padding-top: 4px; }
.chart-monthbar-col-wrap { position: relative; flex: 1; min-width: 0; height: 100%; }
.chart-monthbar-col {
    position: absolute; inset: 0;
    display: flex; flex-direction: column-reverse;
    border-radius: 3px 3px 0 0; overflow: hidden;
    background: rgba(35,47,93,.05);
}
.chart-monthbar-seg { width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.chart-monthbar-seg-label { font-family: Lato, sans-serif; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; }

/* Chaveta — linha + etiqueta para segmentos curtos demais para o valor caber lá dentro */
.chart-monthbar-callout-line {
    position: absolute; left: 50%; width: 1px;
    background: rgba(35,47,93,.5);
}
.chart-monthbar-callout-label {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-family: Lato, sans-serif; font-size: 8px; font-weight: 700; color: var(--chart-axis);
    white-space: nowrap; background: #fff; padding: 1px 3px; border-radius: 3px;
    border: 1px solid rgba(35,47,93,.15);
}

/* Destaque do valor mais alto de cada classificação (pedido: "deve estar
   visível") — pílula escura com contorno dourado, aplica-se tanto ao label
   dentro do segmento como à etiqueta da chaveta. */
.chart-monthbar-seg-label.is-peak,
.chart-monthbar-callout-label.is-peak {
    background: #1a2548; color: #fff !important;
    padding: 1px 4px; border-radius: 3px;
    box-shadow: 0 0 0 2px rgba(225,194,51,.7);
}

.chart-monthbars-labels { display: flex; gap: 5px; margin-top: 6px; }
.chart-monthbars-lbl {
    flex: 1; min-width: 0; text-align: center;
    font-family: Lato, sans-serif; font-size: 9px; color: rgba(35,47,93,.5);
    text-transform: uppercase;
}
.chart-monthbars-lbl.is-cur { color: var(--chart-axis); font-weight: 700; }

/* Legenda de cores do gráfico de barras mensais/estacionais — swatch + rótulo,
   sem valor/%/var (esses já estão nos segmentos via tooltip). */
.chart-monthbars-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(97,144,181,.2); }
.chart-monthbars-legend-item { display: flex; align-items: center; gap: 6px; font-family: Lato, sans-serif; font-size: 11px; color: var(--chart-axis); }
.chart-monthbars-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.chart-monthbars-legend-peak { font-size: 9px; color: rgba(35,47,93,.45); font-style: italic; margin-left: 2px; }

/* ══ GRÁFICO DE LINHAS MULTI-SÉRIE (SVG) ══════════════════════════════
   Uma linha por série (ex. uma linha por classificação SEUROP), eixo Y
   em % de composição, eixo X em categorias (mês/estação). SVG com
   viewBox fixo gerado em JS (ver renderSeurop) — a altura do gráfico é
   a razão altura/largura desse viewBox; ajustar aí para diminuir/aumentar
   a altura visível. Este bloco CSS só define o espaçamento do wrapper e
   como o SVG escala dentro dele (sempre à largura do cartão).

   Estrutura esperada, dentro de .chart-card-body:
     <div class="chart-linechart-wrap">
       <svg class="chart-linechart" viewBox="0 0 800 200">...</svg>
     </div>
   ══════════════════════════════════════════════════════════════════════ */
.chart-linechart-wrap { padding-top: 6px; }
.chart-linechart { width: 100%; height: auto; display: block; overflow: visible; }
/* Rótulo de valor junto a cada ponto (ex. "0,88 €"), sempre visível — não só
   em tooltip. Halo branco (stroke) para se destacar sobre a grelha/linha por
   baixo, sem precisar de um retângulo de fundo à parte. */
.chart-linechart-pointlabel {
    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 700;
    fill: var(--chart-axis, #232F5D);
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 3px;
    stroke-linejoin: round;
}