/*
  Wortic macOS UI Kit — Chart Engine (CSS)
  Contraparte visual de foundation/chart-engine.js. Fica na fundação (não
  em components/charts/) porque é reusada por TODA família de gráfico —
  mesmo padrão de foundation/wic.css. Cada família importa este arquivo
  junto dos outros de foundation/ que já usa.

  O que mora aqui (genérico, funciona para qualquer família sem que ela
  precise desenhar nada disso de novo):
    - o balão de tooltip que o motor cria e posiciona;
    - o estado vazio padrão (usado só quando a família não desenhou o
      próprio dentro de [data-wm-chart-vazio]);
    - o anel de foco sintético por ponto (data-wm-chart-foco) — o foco
      real do teclado fica na raiz [data-wm-chart] (herda :focus-visible
      de foundation/focus.css); este é o "cursor" visual que anda entre
      os pontos com as setas;
    - o realce/atenuação genéricos de série no hover/clique
      (data-wm-chart-realce / data-wm-chart-atenuado / [data-selecionado]),
      para famílias que não escreveram o próprio cruzamento :hover — quem
      já escreveu (ex.: chart-line) simplesmente ganha as duas camadas
      empilhadas, sem conflito, porque ambas convergem pro mesmo objetivo.
*/

@layer components {
  /* ------------------------------------------------------------
     Tooltip — position:fixed, corpo em document.body. Nunca clipa
     contra overflow:hidden de um ancestral porque não tem ancestral.
     ------------------------------------------------------------ */
  .wm-chart-engine__tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--wm-z-tooltip);
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    max-width: 260px;
    padding: var(--wm-space-3) var(--wm-space-4);
    background: var(--wm-surface-elevated);
    border-radius: var(--wm-radius-md);
    box-shadow: var(--wm-shadow-ring), var(--wm-shadow-2);
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-primary);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition:
      opacity var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
    white-space: nowrap;
  }
  .wm-chart-engine__tooltip[data-wm-chart-visivel="true"] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .wm-chart-engine__tooltip-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
  }
  .wm-chart-engine__tooltip-texto {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-1);
    min-width: 0;
  }
  .wm-chart-engine__tooltip-rotulo {
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wm-chart-engine__tooltip-valor {
    color: var(--wm-label-secondary);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------------
     Estado vazio genérico — só aparece se a família não desenhou
     o próprio bloco [data-wm-chart-vazio].
     ------------------------------------------------------------ */
  .wm-chart-engine__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);
    text-align: center;
    color: var(--wm-label-tertiary);
  }
  .wm-chart-engine__vazio-icone {
    color: var(--wm-label-quaternary);
  }
  .wm-chart-engine__vazio-titulo {
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-chart-engine__vazio-desc {
    font-size: var(--wm-font-size-caption);
    max-width: 32ch;
  }

  /* ------------------------------------------------------------
     Realce / atenuação de série — genérico, atributo posto pelo
     motor no elemento [data-serie] (ou no próprio ponto, se ele for
     ao mesmo tempo série+ponto). Empilha sem conflito sobre um
     cruzamento :hover que a família já tenha escrito.
     ------------------------------------------------------------ */
  [data-wm-chart] [data-wm-chart-atenuado="true"] {
    opacity: 0.35;
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }
  [data-wm-chart] [data-wm-chart-realce="true"] {
    transition: opacity var(--wm-duration-fast) var(--wm-ease-standard);
  }

  /* Selecionado pelo clique/Enter — persiste sem precisar de :hover. */
  [data-wm-chart] [data-selecionado="true"],
  [data-wm-chart] [aria-selected="true"] {
    filter: drop-shadow(0 0 0 1px var(--wm-accent)) brightness(1.04);
  }

  /* ------------------------------------------------------------
     Foco por teclado — cursor sintético (data-wm-chart-foco) sobre
     o ponto ativo, nos mesmos tokens do anel de foco do kit. A raiz
     em si também recebe o :focus-visible padrão de foundation/focus.css
     (ela tem tabindex="0"); isto aqui é o segundo nível, o do ponto.
     ------------------------------------------------------------ */
  [data-wm-chart] [data-wm-chart-foco="true"] {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: 2px;
    filter: drop-shadow(0 0 0 var(--wm-focus-halo-width, 4px) var(--wm-accent-fill));
  }

  /* raiz clicável/focável — cursor de mão sobre pontos interativos */
  [data-wm-chart] [data-valor] {
    cursor: pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-chart-engine__tooltip {
      transition: none;
    }
    [data-wm-chart] [data-wm-chart-atenuado="true"],
    [data-wm-chart] [data-wm-chart-realce="true"] {
      transition: none;
    }
  }
}