/* =====================================================================
   SALAO 1.0 — motion.css
   Camada ADITIVA de micro-interações e movimento de assinatura.
   Cobre painel + vitrine. NÃO substitui painel.css/vitrine.css — apenas
   enriquece o que já existe e adiciona realce a elementos que ainda não
   tinham hover/foco. Tudo discreto, premium, sem reflow (só transform,
   opacity, cor, box-shadow, border-color). Reduced-motion neutraliza ao fim.
   ===================================================================== */

/* Curva de assinatura reutilizada nas transições deste arquivo */
:root {
  --ease-premium: cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
   1. CARTÕES — profundidade e realce no hover
   ---------------------------------------------------------------------
   .stat-card / .svc-tile / .svc-card / .step-card já elevam em painel.css
   e vitrine.css. Aqui só REFORÇAMOS com um realce de borda dourada sutil,
   sem reintroduzir translateY (evita conflito/duplicação). Para cartões
   que ainda NÃO tinham hover (.info-card, .resumo-card, .pdv-stat, etc.)
   adicionamos a elevação suave completa.
   ===================================================================== */

/* Reforço de borda dourada nos cartões que já elevam (não duplica o lift) */
.stat-card,
.svc-tile,
.svc-card,
.step-card {
  transition-property: transform, box-shadow, border-color;
  transition-duration: .28s;
  transition-timing-function: var(--ease-premium);
}
.svc-tile:hover,
.svc-card:hover,
.step-card:hover {
  border-color: var(--gold-300); /* fio dourado quente no realce */
}

/* Cartões sem hover próprio: elevação suave + fio de luz na borda */
.info-card,
.resumo-card,
.pdv-stat,
.svc-stat,
.caixa-card {
  transition: transform .26s var(--ease-premium),
              box-shadow .26s var(--ease-premium),
              border-color .26s var(--ease-premium);
}
.info-card:hover,
.resumo-card:hover,
.pdv-stat:hover,
.svc-stat:hover,
.caixa-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--rose-400);
}

/* Linhas/itens de lista clicáveis: leve deslize + realce de fundo.
   .cmd-item já anima entrada; aqui só refinamos o hover quando é link. */
.cmd-link {
  transition: background .16s ease, transform .18s var(--ease-premium);
}
.cmd-link:hover {
  transform: translateX(2px);
}

/* Itens de timeline (dashboard + agenda) ganham um filete de acento à esquerda
   no hover — depende só de cor/sombra, sem mexer no layout. */
.tl-card,
.atl-card {
  box-shadow: inset 0 0 0 0 var(--rose-400);
}
.tl-row:hover .tl-card {
  box-shadow: var(--shadow-card), inset 3px 0 0 0 var(--rose-400);
}
.atl-card:hover {
  box-shadow: var(--shadow-card), inset 3px 0 0 0 var(--rose-400);
}

/* Histórico e bloqueios: deslize sutil já que o fundo é tratado em painel.css */
.hist-row,
.blk-item,
.cli-row {
  transition: background .16s ease, transform .18s var(--ease-premium);
}
.hist-row:hover,
.cli-row:hover {
  transform: translateX(2px);
}

/* =====================================================================
   2. BOTÕES — micro-press, foco suave e sheen (só onde falta)
   ---------------------------------------------------------------------
   .btn-primary já tem sheen + lift na vitrine e no painel; NÃO duplicar.
   Aqui cobrimos o press universal e o sheen apenas nos botões neutros.
   ===================================================================== */

/* Press universal: afundamento sutil ao clicar (vale p/ todo .btn) */
.btn {
  transition: transform .12s var(--ease-premium), box-shadow .2s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active {
  transform: scale(.98);
}
/* .btn-primary já trata seu próprio :active/lift — só garantimos o micro-press */
.btn-primary:active {
  transform: translateY(0) scale(.98);
}

/* Foco suave por teclado nos botões neutros (anel verde discreto),
   sem competir com o :focus-visible dourado de acessibilidade já definido. */
.btn-outline-secondary:focus-visible,
.btn-gold:focus-visible,
.btn-wa:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(58, 168, 116, .22);
}

/* Sheen sutil para botões secundários do painel (o primário já tem o seu) */
.content .btn-outline-secondary,
.content .btn-gold {
  position: relative;
  overflow: hidden;
}
.content .btn-outline-secondary::after,
.content .btn-gold::after {
  content: "";
  position: absolute; top: 0; left: -120%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.content .btn-outline-secondary:hover::after,
.content .btn-gold:hover::after {
  left: 140%;
}

/* =====================================================================
   3. INPUTS — anel verde suave no foco + transição de borda
   ---------------------------------------------------------------------
   painel.css já dá box-shadow no :focus; aqui garantimos a TRANSIÇÃO
   (animar a entrada do anel) e cobrimos textarea/checkbox.
   ===================================================================== */
.form-control,
.form-select,
textarea.form-control {
  transition: border-color .2s var(--ease-premium),
              box-shadow .2s var(--ease-premium),
              background-color .2s ease;
}
.form-check-input {
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease;
}

/* =====================================================================
   4. NAVEGAÇÃO — indicador/realce sutil na sidebar e sub-abas
   ---------------------------------------------------------------------
   .sidebar .nav-link já desliza no hover; adicionamos um filete dourado
   à esquerda do item ativo (assinatura visual), via box-shadow inset.
   ===================================================================== */
/* position:relative e o realce do ícone no hover agora vivem em painel.css
   (junto do indicador deslizante). Aqui fica só o GLOW + filete dourado do
   item ativo, aplicados na PÍLULA (.active::before) para NÃO duplicar o
   marcador (o fundo da pílula é o ::before de painel.css). */
.sidebar .nav-link.active::before {
  box-shadow: 0 8px 20px rgba(36, 131, 85, .42),
              inset 3px 0 0 0 var(--gold-300),
              inset 0 1px 0 0 rgba(255, 255, 255, .14);
}
/* Brilho dourado que percorre o item ativo uma vez ao entrar.
   Escopado p/ NÃO-recolhido: no modo recolhido o ::after do .nav-link é o
   tooltip (data-tip), então o sheen não pode disputar esse pseudo-elemento. */
body:not(.sidebar-collapsed) .sidebar .nav-link.active::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px;
  background: linear-gradient(100deg, transparent 20%, rgba(236, 213, 150, .18) 50%, transparent 80%);
  background-size: 220% 100%; background-position: 120% 0;
  pointer-events: none;
  animation: navSheen 1.1s var(--ease-premium, ease) .15s 1 both;
}
@keyframes navSheen {
  from { background-position: 120% 0; }
  to   { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.sidebar-collapsed) .sidebar .nav-link.active::after { animation: none; opacity: 0; }
}

/* Sub-abas (nav-pills): leve subida do rótulo ativo */
.content .nav-pills .nav-link {
  transition: background .16s ease, color .16s ease, box-shadow .16s ease,
              transform .16s var(--ease-premium);
}
.content .nav-pills .nav-link:hover {
  transform: translateY(-1px);
}

/* Navbar da vitrine: realce do link no hover com sublinhado que cresce */
.vnav .nav-link {
  position: relative;
  transition: color .18s ease;
}
.vnav .nav-link::after {
  content: "";
  position: absolute; left: .25rem; right: .25rem; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--rose-400), var(--gold-400));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-premium);
  pointer-events: none;
}
.vnav .nav-link:hover::after {
  transform: scaleX(1);
}

/* Chips de categoria (vitrine): micro-press */
.cat-pill {
  transition: all .18s, transform .14s var(--ease-premium);
}
.cat-pill:active {
  transform: scale(.97);
}

/* =====================================================================
   5. LISTAS E TABELAS — hover com fundo sutil e leve deslize
   ---------------------------------------------------------------------
   .table-hover já pinta a linha; adicionamos um respiro de deslize no
   conteúdo da célula para dar vida sem alterar a malha da tabela.
   ===================================================================== */
.table-hover tbody tr {
  transition: background .16s ease;
}
.table-hover tbody tr td {
  transition: transform .18s var(--ease-premium);
}
.table-hover tbody tr:hover td:first-child {
  transform: translateX(2px);
}

/* Pagamentos rápidos e formas de pagamento: pressão (o hover já existe) */
.pay-btn,
.motivo-chip,
.slot-btn,
.qs-btn {
  transition: all .16s ease, transform .12s var(--ease-premium);
}
.motivo-chip:active,
.qs-btn:not([disabled]):active {
  transform: scale(.96);
}

/* =====================================================================
   6. BADGES, CHIPS E ÍCONES DE KPI — micro-entrada e realce
   ---------------------------------------------------------------------
   Entrada discreta dos selos de tendência e dos ícones de KPI; realce
   ao passar o mouse no cartão pai. Sem deslocar o layout.
   ===================================================================== */
.kpi-trend {
  animation: kpiBadgeIn .5s var(--ease-premium) both;
  animation-delay: .35s; /* entra depois do count-up do valor */
}
@keyframes kpiBadgeIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Ícones de KPI/seção: leve "respiro" ao passar o mouse no cartão */
.stat-card .stat-icon,
.next-appt .na-deco {
  transition: transform .4s var(--ease-premium), opacity .4s ease;
}
.stat-card:hover .stat-icon {
  transform: scale(1.06) rotate(-3deg);
  opacity: .18;
}

/* Selos de status/estoque/contagem: realce ao passar o mouse no cartão pai */
.svc-tile .st-stock,
.svc-tile .st-fotos,
.st-inativo {
  transition: transform .26s var(--ease-premium);
}
.svc-tile:hover .st-stock,
.svc-tile:hover .st-fotos {
  transform: scale(1.04);
}

/* Badges genéricos: micro-realce ao passar o mouse (cor já vem do tema) */
.badge-soft,
.hr-chip,
.blk-tag,
.tl-status {
  transition: transform .16s var(--ease-premium), box-shadow .16s ease;
}

/* =====================================================================
   7. TRANSIÇÃO DE TEMA (claro/escuro) — superfícies suaves
   ---------------------------------------------------------------------
   O toggle adiciona .theme-anim em <html> por ~.3s na troca de tema.
   Animamos APENAS background/cor/borda das superfícies (não transform),
   para a comutação ficar suave sem custo de layout. A classe é removida
   depois para não interferir nas demais interações.
   ===================================================================== */
html.theme-anim,
html.theme-anim body,
html.theme-anim .sidebar,
html.theme-anim .content,
html.theme-anim .topbar-date,
html.theme-anim .card,
html.theme-anim .premium-card,
html.theme-anim .stat-card,
html.theme-anim .info-card,
html.theme-anim .resumo-card,
html.theme-anim .pdv-top,
html.theme-anim .pdv-stat,
html.theme-anim .svc-tile,
html.theme-anim .svc-card,
html.theme-anim .step-card,
html.theme-anim .form-control,
html.theme-anim .form-select,
html.theme-anim .vnav,
html.theme-anim .vfooter,
html.theme-anim .caixa-card {
  transition: background-color .3s ease, color .3s ease,
              border-color .3s ease, box-shadow .3s ease !important;
}

/* =====================================================================
   8. REDUCED MOTION — neutraliza todo movimento adicionado aqui
   ---------------------------------------------------------------------
   Mantém os realces de cor/sombra (não causam enjoo), mas zera transforms,
   sheens deslizantes e animações de entrada.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .info-card:hover,
  .resumo-card:hover,
  .pdv-stat:hover,
  .svc-stat:hover,
  .caixa-card:hover,
  .cmd-link:hover,
  .hist-row:hover,
  .cli-row:hover,
  .content .nav-pills .nav-link:hover,
  .stat-card:hover .stat-icon,
  .svc-tile:hover .st-stock,
  .svc-tile:hover .st-fotos,
  .table-hover tbody tr:hover td:first-child {
    transform: none;
  }

  .btn:active,
  .btn-primary:active,
  .cat-pill:active,
  .motivo-chip:active,
  .qs-btn:not([disabled]):active {
    transform: none;
  }

  /* Sheens, sublinhados e entradas: desligados */
  .content .btn-outline-secondary::after,
  .content .btn-gold::after {
    display: none;
  }
  .vnav .nav-link::after {
    transition: none;
  }
  .kpi-trend {
    animation: none;
  }

  /* A transição de tema some (a troca acontece instantânea, sem fade) */
  html.theme-anim,
  html.theme-anim * {
    transition: none !important;
  }
}

/* =====================================================================
   9. TRANSIÇÕES NATIVAS ENTRE PÁGINAS (View Transitions API)
   ---------------------------------------------------------------------
   Progressive enhancement: navegação same-origin (painel↔painel e
   vitrine↔vitrine) ganha um cross-fade suave — sensação de app, sem SPA
   nem framework. Browsers sem suporte ignoram @view-transition e navegam
   normal (nada quebra). No painel, a barra lateral é idêntica em toda
   página: marcamos como elemento persistente para ela ficar ESTÁTICA
   (não pisca) enquanto só o conteúdo faz o cross-fade.
   Reduced-motion → a troca acontece quase instantânea, sem movimento.
   ===================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .26s;
  animation-timing-function: var(--ease-premium, ease);
}

/* Barra lateral do painel: persistente, fora do cross-fade. */
.sidebar {
  view-transition-name: salao-sidebar;
}
/* Recolhida: a largura difere — manter o snapshot persistente poderia "saltar"
   entre páginas. Soltamos o nome no estado recolhido; a sidebar participa do
   cross-fade normal (largura idêntica nas duas pontas, sem pop). */
body.sidebar-collapsed .sidebar {
  view-transition-name: none;
}
::view-transition-group(salao-sidebar),
::view-transition-old(salao-sidebar),
::view-transition-new(salao-sidebar) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }
}