/*
  Wortic macOS UI Kit — Chart Bar
  wm-chart-bar — comparação de grandezas por categoria em SVG puro +
  foundation/chart-engine.js.

  Regra que rege esta família (documentada em docs/chart-bar.json, não repita
  sem ler): BARRA SEMPRE COMEÇA EM ZERO. Eixo truncado numa barra MENTE sobre
  a proporção — é o OPOSTO da regra de chart-line (que PODE truncar). Não
  existe aqui, de propósito, nenhum modificador de "eixo truncado" — nem
  crie um.

  O motor NUNCA desenha a barra: o SVG já nasce em x/y/width/height FINAIS
  (é o que code/chart-bar.py, .js, .php e .go calculam). Isso é o que garante
  leitura correta com JS desligado — por isso este CSS não tem @keyframes
  animando altura/posição da .wm-chart-bar__barra: animar isso por CSS
  competiria com o motor, que já cresce a altura a partir da base via Web
  Animations API quando presente (foundation/chart-engine.js INFERE a marca
  "bar" pela substring __barra na classe). Diferente de chart-line — que
  PRECISA de @keyframes porque uma linha sem desenho progressivo ainda é
  correta, só menos viva — aqui a régua de zero já entrega a leitura certa
  mesmo totalmente parada.
*/

@layer components {
  .wm-chart-bar {
    --_serie-1: var(--wm-chart-serie-1);
    --_serie-2: var(--wm-chart-serie-2);
    --_serie-3: var(--wm-chart-serie-3);
    --_serie-4: var(--wm-chart-serie-4);
    --_serie-5: var(--wm-chart-serie-5);
    --_serie-6: var(--wm-chart-serie-6);
    --_serie-7: var(--wm-chart-serie-7);
    --_serie-8: var(--wm-chart-serie-8);
    --_positivo: var(--wm-success);
    --_negativo: var(--wm-error);

    position: relative;
    margin: 0;
    padding: var(--wm-space-9);
    background: var(--wm-surface-primary);
    border-radius: var(--wm-radius-list-group);
    box-shadow: var(--wm-shadow-ring), var(--wm-shadow-1);
  }

  .wm-chart-bar__title {
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    letter-spacing: var(--wm-tracking-body);
  }
  .wm-chart-bar__subtitle {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
    margin-top: var(--wm-space-1);
    margin-bottom: var(--wm-space-6);
  }

  .wm-chart-bar__plot {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  /* ------------------------------------------------------------
     Grade e eixo — recessivos, nunca competem com a barra. O eixo
     (zero) vem mais forte que a grade: é o piso que dá a leitura de
     proporção correta, tem que ser sempre visível.
     ------------------------------------------------------------ */
  .wm-chart-bar__grid {
    stroke: var(--wm-separator);
    stroke-width: 1;
  }
  .wm-chart-bar__axis {
    stroke: var(--wm-separator-strong);
    stroke-width: 1.5;
  }
  .wm-chart-bar__tick,
  .wm-chart-bar__categoria,
  .wm-chart-bar__valor {
    fill: var(--wm-label-tertiary);
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-caption);
    font-variant-numeric: tabular-nums;
  }
  .wm-chart-bar__categoria {
    fill: var(--wm-label-secondary);
  }
  .wm-chart-bar__valor {
    fill: var(--wm-label-primary);
    font-weight: var(--wm-font-weight-semibold);
  }

  /* ------------------------------------------------------------
     Barra — geometria FINAL desenhada direto pelo gerador, sem
     nenhuma transição/keyframe de entrada aqui (ver cabeçalho).
     ------------------------------------------------------------ */
  .wm-chart-bar__barra {
    transition:
      filter var(--wm-duration-fast) var(--wm-ease-standard),
      opacity var(--wm-duration-fast) var(--wm-ease-standard),
      stroke-width var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-chart-bar__barra--serie-1 { fill: var(--_serie-1); }
  .wm-chart-bar__barra--serie-2 { fill: var(--_serie-2); }
  .wm-chart-bar__barra--serie-3 { fill: var(--_serie-3); }
  .wm-chart-bar__barra--serie-4 { fill: var(--_serie-4); }
  .wm-chart-bar__barra--serie-5 { fill: var(--_serie-5); }
  .wm-chart-bar__barra--serie-6 { fill: var(--_serie-6); }
  .wm-chart-bar__barra--serie-7 { fill: var(--_serie-7); }
  .wm-chart-bar__barra--serie-8 { fill: var(--_serie-8); }

  /* Divergente — semântica acima/abaixo da baseline, não só cor de série
     (ver docs/chart-bar.json: decisão documentada, não use serie-N aqui). */
  .wm-chart-bar__barra--positivo { fill: var(--_positivo); }
  .wm-chart-bar__barra--negativo { fill: var(--_negativo); }

  /* Divisor sutil entre segmentos empilhados — sem isso, duas séries com
     cor próxima colam visualmente numa coluna só. */
  .wm-chart-bar--empilhada .wm-chart-bar__barra,
  .wm-chart-bar__grupo .wm-chart-bar__barra + .wm-chart-bar__barra {
    stroke: var(--wm-surface-primary);
    stroke-width: 1;
  }

  /* ------------------------------------------------------------
     Régua de meta — cruza as barras, sempre com rótulo textual ao
     lado (nunca só a linha: cor/posição sozinhas falham para quem
     tem daltonismo ou lê em preto e branco).
     ------------------------------------------------------------ */
  .wm-chart-bar__meta-regua {
    stroke: var(--wm-accent);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
  }
  .wm-chart-bar__meta-texto {
    fill: var(--wm-accent-text);
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    /* Halo do texto — defeito real achado olhando o render: a régua cruza
       as barras por cima de propósito, e --wm-accent-text é EXATAMENTE
       --wm-chart-serie-1 (#1d59f0), então o rótulo "Meta: ..." ficava
       invisível sempre que caía em cima de uma barra da série 1 (azul
       sobre azul idêntico). paint-order:stroke desenha um contorno na cor
       do cartão ATRÁS do preenchimento do texto — o mesmo truque de rótulo
       de mapa — garantindo leitura mesmo em cima de qualquer cor de barra. */
    paint-order: stroke;
    stroke: var(--wm-surface-primary);
    stroke-width: 3px;
    stroke-linejoin: round;
  }

  /* ------------------------------------------------------------
     Interação — realce no hover/foco, MESMO sem o motor JS: puro
     CSS via :hover/:focus-visible no grupo da barra/série, atenuando
     os demais quando a variante tem mais de um grupo.
     ------------------------------------------------------------ */
  .wm-chart-bar__grupo {
    cursor: pointer;
  }
  .wm-chart-bar__plot:hover .wm-chart-bar__grupo:not(:hover) .wm-chart-bar__barra {
    opacity: 0.45;
  }
  .wm-chart-bar__grupo:hover .wm-chart-bar__barra,
  .wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
    filter: brightness(1.08);
  }
  [data-theme="dark"] .wm-chart-bar__grupo:hover .wm-chart-bar__barra,
  [data-theme="dark"] .wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
    filter: brightness(1.18);
  }
  .wm-chart-bar__grupo:focus-visible {
    outline: none;
  }
  .wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
    filter: brightness(1.08) drop-shadow(0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill));
  }

  /* Selecionado pelo motor (clique) — persiste sem depender de hover. */
  .wm-chart-bar__grupo[data-selecionado="true"] .wm-chart-bar__barra,
  .wm-chart-bar__grupo[aria-selected="true"] .wm-chart-bar__barra {
    stroke: var(--wm-accent);
    stroke-width: 2;
  }

  /* Legenda */
  .wm-chart-bar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-4) var(--wm-space-8);
    list-style: none;
    margin: var(--wm-space-6) 0 0;
    padding: 0;
  }
  .wm-chart-bar__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-secondary);
    background: none;
    border: none;
    cursor: default;
    padding: var(--wm-space-1) var(--wm-space-2);
    border-radius: var(--wm-radius-sm);
  }
  .wm-chart-bar__swatch {
    width: var(--wm-space-5);
    height: var(--wm-space-5);
    border-radius: var(--wm-radius-xs);
    flex: none;
  }
  .wm-chart-bar__swatch--1 { background: var(--_serie-1); }
  .wm-chart-bar__swatch--2 { background: var(--_serie-2); }
  .wm-chart-bar__swatch--3 { background: var(--_serie-3); }
  .wm-chart-bar__swatch--4 { background: var(--_serie-4); }
  .wm-chart-bar__swatch--5 { background: var(--_serie-5); }
  .wm-chart-bar__swatch--6 { background: var(--_serie-6); }
  .wm-chart-bar__swatch--7 { background: var(--_serie-7); }
  .wm-chart-bar__swatch--8 { background: var(--_serie-8); }
  .wm-chart-bar__swatch--positivo { background: var(--_positivo); }
  .wm-chart-bar__swatch--negativo { background: var(--_negativo); }

  .wm-chart-bar__table caption {
    text-align: start;
  }

  /* ------------------------------------------------------------
     Estado vazio — sem dado, sem barra fantasma.
     ------------------------------------------------------------ */
  .wm-chart-bar--vazio .wm-chart-bar__plot {
    display: none;
  }
  .wm-chart-bar__vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wm-space-3);
    padding: var(--wm-space-12) var(--wm-space-6);
    color: var(--wm-label-tertiary);
    text-align: center;
  }
  .wm-chart-bar__vazio-icone {
    color: var(--wm-label-quaternary);
  }
  .wm-chart-bar__vazio-titulo {
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-chart-bar__vazio-desc {
    font-size: var(--wm-font-size-caption);
    max-width: 32ch;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-chart-bar__barra {
      transition: none;
    }
    .wm-chart-bar__grupo:hover .wm-chart-bar__barra,
    .wm-chart-bar__grupo:focus-visible .wm-chart-bar__barra {
      /* hover ainda muda de estado, só sem animar o degrau — cor/sombra
         trocam instantaneamente. */
      transition: none;
    }
  }
}