/* Plannus Outdoors — painel
   Camada de micro-animação, carregada DEPOIS de styles.css.

   Regras que este arquivo segue:
   - Duração 120–320ms, sempre. Nada de bounce, elastic, spring, loop
     infinito, pulso/respiração, shimmer, arco-íris ou escala acima de 1.02.
   - `prefers-reduced-motion: reduce` desliga toda animação e transição
     daqui (bloco único no final, único lugar com !important).
   - Só `opacity` e `transform` — nunca largura, altura, topo ou margem,
     para não empurrar o layout. As barras/régua/cascata são a exceção
     combinada: usam `scaleX`/`scaleY` com `transform-origin`, então o
     valor final (já definido inline pelo app.js) nunca é recalculado.
   - Escalonamento (stagger) é curto e finito — no máximo ~5-6 itens,
     nunca a lista inteira. `tbody tr` não tem animação de entrada: as
     tabelas re-renderizam a cada filtro e podem ter 500+ linhas.
   - Nada aqui toca `.apexcharts-*` — os gráficos já têm
     `animations: enabled: false` no JS e continuam intocados.
   - Toda regra é aditiva: mesmo seletor de styles.css, sem !important,
     vencendo só por vir depois no cascade. */

:root {
  --pl-ease: cubic-bezier(.2, .6, .35, 1);
  --pl-dur-xs: 130ms;
  --pl-dur-sm: 160ms;
  --pl-dur-md: 200ms;
  --pl-dur-lg: 260ms;
}

/* ---------- Entrada da aba ativa ---------- */
@keyframes pl-fade-rise {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.tab-panel.active {
  animation: pl-fade-rise var(--pl-dur-md) var(--pl-ease) both;
}

/* ---------- KPIs: entrada escalonada (máx. 5 itens com atraso próprio) ---------- */
.kpi-strip .kpi {
  animation: pl-fade-rise var(--pl-dur-sm) var(--pl-ease) both;
}
.kpi-strip .kpi:nth-child(1) { animation-delay: 0ms; }
.kpi-strip .kpi:nth-child(2) { animation-delay: 20ms; }
.kpi-strip .kpi:nth-child(3) { animation-delay: 40ms; }
.kpi-strip .kpi:nth-child(4) { animation-delay: 60ms; }
.kpi-strip .kpi:nth-child(5) { animation-delay: 80ms; }
.kpi-strip .kpi:nth-child(n+6) { animation-delay: 100ms; }

/* ---------- Barras próprias e régua: crescem a partir de zero ----------
   scaleX em vez de width — a largura final já está no inline style,
   a transformação só revela o que já foi calculado, sem reflow. */
@keyframes pl-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.barra-trilho > i {
  transform-origin: left;
  animation: pl-grow-x var(--pl-dur-lg) var(--pl-ease) both;
}
.regua > i {
  transform-origin: left;
  animation: pl-grow-x var(--pl-dur-lg) var(--pl-ease) both;
}
.regua > i:nth-child(1) { animation-delay: 0ms; }
.regua > i:nth-child(2) { animation-delay: 25ms; }
.regua > i:nth-child(3) { animation-delay: 50ms; }
.regua > i:nth-child(4) { animation-delay: 75ms; }
.regua > i:nth-child(n+5) { animation-delay: 100ms; }

/* ---------- Cascata: cresce a partir da base ----------
   scaleY com transform-origin:bottom — a barra é posicionada de forma
   absoluta e só a altura visual anima, o rótulo abaixo não se move. */
@keyframes pl-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.casc-barra {
  transform-origin: bottom;
  animation: pl-grow-y var(--pl-dur-lg) var(--pl-ease) both;
}
.casc-col:nth-child(1) .casc-barra { animation-delay: 0ms; }
.casc-col:nth-child(2) .casc-barra { animation-delay: 30ms; }
.casc-col:nth-child(3) .casc-barra { animation-delay: 60ms; }
.casc-col:nth-child(4) .casc-barra { animation-delay: 90ms; }
.casc-col:nth-child(n+5) .casc-barra { animation-delay: 120ms; }

/* ---------- Hover: cartões e KPIs ---------- */
.card,
.kpi {
  transition: transform var(--pl-dur-sm) var(--pl-ease),
              box-shadow var(--pl-dur-sm) var(--pl-ease);
}
.card:hover,
.kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .10);
}

/* ---------- Hover: linhas de tabela (só a cor, sem animação de entrada) ---------- */
tbody tr {
  transition: background-color var(--pl-dur-xs) ease-out;
}

/* ---------- Hover: abas (refina a transição já existente) ---------- */
.tab {
  transition: color var(--pl-dur-xs) var(--pl-ease),
              border-color var(--pl-dur-xs) var(--pl-ease);
}

/* ---------- Hover: botões e itens de menu ---------- */
.btn {
  transition: background-color var(--pl-dur-xs) var(--pl-ease),
              border-color var(--pl-dur-xs) var(--pl-ease),
              transform var(--pl-dur-xs) var(--pl-ease),
              filter var(--pl-dur-xs) var(--pl-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.menu-item {
  transition: background-color var(--pl-dur-xs) ease-out;
}

/* ---------- Segmentado (Tudo / Data íntegra) ---------- */
.seg button {
  transition: background-color var(--pl-dur-xs) var(--pl-ease),
              color var(--pl-dur-xs) var(--pl-ease);
}

/* ---------- Menu da conta: abertura ---------- */
@keyframes pl-pop {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.menu:not([hidden]) {
  animation: pl-pop var(--pl-dur-sm) var(--pl-ease) both;
}

/* ---------- Modal (Configurações / Sobre): abertura ---------- */
@keyframes pl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-overlay:not([hidden]) {
  animation: pl-fade var(--pl-dur-xs) ease-out both;
}
.modal-overlay:not([hidden]) .modal {
  animation: pl-fade-rise var(--pl-dur-md) var(--pl-ease) both;
}

/* ---------- Tooltip de informação (.info) ---------- */
.info::after {
  transform: translateY(3px);
  transition: opacity var(--pl-dur-xs) ease-out,
              transform var(--pl-dur-xs) var(--pl-ease);
}
.info:hover::after {
  transform: translateY(0);
}

/* ---------- Movimento reduzido: desliga tudo acima ---------- */
@media (prefers-reduced-motion: reduce) {
  .tab-panel.active,
  .kpi-strip .kpi,
  .barra-trilho > i,
  .regua > i,
  .casc-barra,
  .card,
  .kpi,
  tbody tr,
  .tab,
  .btn,
  .menu-item,
  .seg button,
  .menu,
  .modal-overlay,
  .modal-overlay .modal,
  .info::after {
    animation: none !important;
    transition: none !important;
  }
}