/* ===================================================================
   Yumii Store — Painel Admin · Design System + Animações
   =================================================================== */

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #272736; border-radius: 8px; transition: background .2s; }
::-webkit-scrollbar-thumb:hover { background: #a855f755; }

/* ── Keyframes ──────────────────────────────────────────────────── */
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.93) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.93); }
}
@keyframes popIn {
  0%   { transform: scale(.7); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes barGrow {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(168,85,247,0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(.75); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes navSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes badgePop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes progressFill {
  from { width: 0%; }
}
@keyframes borderPulse {
  0%, 100% { border-color: rgba(168,85,247,.4); }
  50%       { border-color: rgba(168,85,247,1); }
}
@keyframes headShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@keyframes sidebarIn {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes logoSpin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ── Clases de animação utilitárias ─────────────────────────────── */
.animate-spin       { animation: spin .7s linear infinite; }
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-pulse-dot  { animation: pulse-dot 2s ease-in-out infinite; }
.animate-fade-in    { animation: fadeIn .35s ease both; }
.animate-slide-up   { animation: slideInUp .35s ease both; }
.animate-slide-down { animation: slideInDown .3s ease both; }
.animate-scale-in   { animation: scaleIn .3s cubic-bezier(.34,1.56,.64,1) both; }
.animate-pop-in     { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }

/* ── Login view ─────────────────────────────────────────────────── */
#login-view .aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(168,85,247,.25), transparent 70%),
    radial-gradient(35% 35% at 75% 65%, rgba(236,72,153,.22), transparent 70%),
    radial-gradient(30% 30% at 60% 20%, rgba(34,211,238,.15), transparent 70%);
  filter: blur(20px);
  animation: drift 14s ease-in-out infinite alternate;
}

/* Card de login anima quando aparece */
#login-view .w-full.max-w-md { animation: slideInUp .5s cubic-bezier(.34,1.4,.64,1) both; }
#login-view .inline-grid      { animation: float 4s ease-in-out infinite; }

/* Input foco com brilho pulsante */
#login-password:focus {
  border-color: #a855f7;
  animation: borderPulse 2s ease infinite;
}

/* Botão de submit: shimmer no hover */
#login-form button[type="submit"] {
  position: relative; overflow: hidden;
  transition: transform .15s, opacity .15s, box-shadow .2s;
}
#login-form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(168,85,247,.4);
}
#login-form button[type="submit"]:active { transform: translateY(0) scale(.98); }
#login-form button[type="submit"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .5s;
}
#login-form button[type="submit"]:hover::after { transform: translateX(100%); }

/* Shake no erro de login */
.login-shake { animation: headShake .4s ease; }

/* ── Sidebar ────────────────────────────────────────────────────── */
aside {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

/* Logo da sidebar gira no hover */
aside .grid.place-items-center:hover { animation: logoSpin .6s ease; }

.nav-btn {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; padding: .6rem .75rem; border-radius: .7rem;
  color: #94a3b8; transition: background .18s, color .18s, transform .15s, box-shadow .18s;
  text-align: left; position: relative; overflow: hidden;
}
.nav-btn:hover {
  background: #1b1b27; color: #e2e8f0;
  transform: translateX(3px);
}
.nav-btn.active {
  background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(236,72,153,.10));
  color: #fff;
  box-shadow: inset 2px 0 0 #a855f7;
}
/* Ripple nos botões de nav */
.nav-btn .ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(168,85,247,.25); width: 20px; height: 20px;
  margin-top: -10px; margin-left: -10px; pointer-events: none;
  animation: ripple .5s ease-out forwards;
}
/* Nav stagger na entrada do app */
.nav-btn:nth-child(1) { animation: navSlide .35s .05s ease both; }
.nav-btn:nth-child(2) { animation: navSlide .35s .10s ease both; }
.nav-btn:nth-child(3) { animation: navSlide .35s .15s ease both; }
.nav-btn:nth-child(4) { animation: navSlide .35s .20s ease both; }
.nav-btn:nth-child(5) { animation: navSlide .35s .25s ease both; }
.nav-btn:nth-child(6) { animation: navSlide .35s .30s ease both; }

/* Ponto de status online */
#conn-dot { animation: pulse-dot 2.5s ease-in-out infinite; }

/* ── Header / refresh btn ───────────────────────────────────────── */
header { animation: slideInDown .3s ease both; }
#refresh-btn { transition: transform .2s, color .15s, background .15s; }
#refresh-btn:hover { transform: rotate(90deg); }
#refresh-btn:active { transform: rotate(180deg) scale(.95); }

/* Page-title transição entre abas */
#page-title { transition: opacity .2s, transform .2s; }
#page-title.switching { opacity: 0; transform: translateX(8px); }

/* ── Page content ───────────────────────────────────────────────── */
#page-content { animation: fadeIn .2s ease both; }
#page-content.page-exit  { animation: none; opacity: 0; transform: translateY(8px); }
#page-content.page-enter { animation: slideInUp .32s cubic-bezier(.4,0,.2,1) both; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  background: #13131c; border: 1px solid #272736; border-radius: 1rem; padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover {
  border-color: rgba(168,85,247,.25);
  box-shadow: 0 4px 24px rgba(168,85,247,.07);
}

/* Stat cards */
.stat-card { position: relative; overflow: hidden; cursor: default; }
.stat-card::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,.18), transparent 70%);
  transition: transform .3s;
}
.stat-card:hover::after { transform: scale(1.4); }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(168,85,247,.12); }

/* Entrada stagger dos stat cards */
.stat-card:nth-child(1) { animation: slideInUp .4s .00s cubic-bezier(.34,1.4,.64,1) both; }
.stat-card:nth-child(2) { animation: slideInUp .4s .07s cubic-bezier(.34,1.4,.64,1) both; }
.stat-card:nth-child(3) { animation: slideInUp .4s .14s cubic-bezier(.34,1.4,.64,1) both; }
.stat-card:nth-child(4) { animation: slideInUp .4s .21s cubic-bezier(.34,1.4,.64,1) both; }

/* Número do stat card */
.stat-value {
  animation: counterUp .5s .3s ease both;
  display: inline-block;
}

/* Emoji do stat card flutua no hover */
.stat-icon { display: inline-flex; align-items: center; justify-content: center; background: rgba(99,102,241,.12); transition: transform .25s; }
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-6deg); }

/* Fade-slide-in para linhas de pagamentos / top-produtos */
@keyframes rowFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.row-in { animation: rowFadeIn .35s ease both; }

/* ── Gráfico de barras ──────────────────────────────────────────── */
.chart-bar {
  animation: barGrow .6s cubic-bezier(.34,1.2,.64,1) both;
  transform-origin: bottom;
}
.chart-bar:nth-child(1)  { animation-delay: .00s; }
.chart-bar:nth-child(2)  { animation-delay: .04s; }
.chart-bar:nth-child(3)  { animation-delay: .08s; }
.chart-bar:nth-child(4)  { animation-delay: .12s; }
.chart-bar:nth-child(5)  { animation-delay: .16s; }
.chart-bar:nth-child(6)  { animation-delay: .20s; }
.chart-bar:nth-child(7)  { animation-delay: .24s; }
.chart-bar:nth-child(8)  { animation-delay: .28s; }
.chart-bar:nth-child(9)  { animation-delay: .32s; }
.chart-bar:nth-child(10) { animation-delay: .36s; }
.chart-bar:nth-child(11) { animation-delay: .40s; }
.chart-bar:nth-child(12) { animation-delay: .44s; }
.chart-bar:nth-child(13) { animation-delay: .48s; }
.chart-bar:nth-child(14) { animation-delay: .52s; }

.chart-bar-inner {
  width: 100%;
  background: linear-gradient(to top, #a855f7, #ec4899);
  border-radius: 3px 3px 0 0;
  transition: opacity .2s, filter .2s;
}
.chart-bar:hover .chart-bar-inner {
  opacity: 1; filter: brightness(1.2);
  box-shadow: 0 0 12px rgba(168,85,247,.5);
}

/* ── Tabelas ────────────────────────────────────────────────────── */
table.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.tbl th {
  text-align: left; font-weight: 600; color: #64748b;
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .65rem .8rem; border-bottom: 1px solid #272736;
}
table.tbl td {
  padding: .7rem .8rem; border-bottom: 1px solid #1b1b27;
  transition: background .15s;
}
table.tbl tr:hover td { background: #16161f; }

/* Rows entram com stagger */
table.tbl tbody tr {
  animation: rowIn .3s ease both;
}
table.tbl tbody tr:nth-child(1)  { animation-delay: .00s; }
table.tbl tbody tr:nth-child(2)  { animation-delay: .03s; }
table.tbl tbody tr:nth-child(3)  { animation-delay: .06s; }
table.tbl tbody tr:nth-child(4)  { animation-delay: .09s; }
table.tbl tbody tr:nth-child(5)  { animation-delay: .12s; }
table.tbl tbody tr:nth-child(6)  { animation-delay: .15s; }
table.tbl tbody tr:nth-child(7)  { animation-delay: .18s; }
table.tbl tbody tr:nth-child(8)  { animation-delay: .21s; }
table.tbl tbody tr:nth-child(9)  { animation-delay: .24s; }
table.tbl tbody tr:nth-child(10) { animation-delay: .27s; }
table.tbl tbody tr:nth-child(n+11) { animation-delay: .30s; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  animation: badgePop .35s cubic-bezier(.34,1.56,.64,1) both;
  transition: transform .15s, filter .15s;
}
.badge:hover { transform: scale(1.08); filter: brightness(1.15); }
.badge-green { background: rgba(34,197,94,.15); color: #4ade80; }
.badge-red   { background: rgba(244,63,94,.15);  color: #fb7185; }
.badge-amber { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-blue  { background: rgba(34,211,238,.15); color: #67e8f9; }
.badge-gray  { background: rgba(148,163,184,.12);color: #94a3b8; }

/* Pulso de alerta em badge-red (estoque 0) */
.badge-red { animation: badgePop .35s cubic-bezier(.34,1.56,.64,1) both, pulse-glow 2.5s 1s ease-in-out infinite; }

/* ── Botões ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: .6rem; font-size: .8rem; font-weight: 600;
  transition: transform .15s, opacity .15s, box-shadow .2s, background .15s, border-color .15s;
  cursor: pointer; position: relative; overflow: hidden;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: linear-gradient(90deg,#a855f7,#ec4899); color: #fff;
}
.btn-primary:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(168,85,247,.35);
}
/* shimmer no hover */
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .45s;
}
.btn-primary:hover::after { transform: translateX(100%); }

.btn-ghost {
  border: 1px solid #272736; color: #cbd5e1;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn-ghost:hover {
  background: #1b1b27; border-color: #3a3a4d;
  transform: translateY(-1px);
}

.btn-danger { background: rgba(244,63,94,.15); color: #fb7185; }
.btn-danger:hover {
  background: rgba(244,63,94,.3);
  box-shadow: 0 4px 14px rgba(244,63,94,.25);
  transform: translateY(-1px);
}

/* Ripple genérico nos botões */
.btn .ripple-wave {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.2); width: 20px; height: 20px;
  margin-top: -10px; margin-left: -10px; pointer-events: none;
  animation: ripple .55s ease-out forwards;
}

/* ── Inputs ─────────────────────────────────────────────────────── */
.input {
  width: 100%; background: #1b1b27; border: 1px solid #272736;
  border-radius: .6rem; padding: .6rem .8rem; font-size: .85rem; color: #e2e8f0;
  outline: none; transition: border-color .2s, box-shadow .2s, background .15s;
}
.input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,.12);
  background: #1e1e2a;
}
.input:hover:not(:focus) { border-color: #3a3a4d; }

/* ── Skeleton ───────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,#1b1b27,#222232,#1b1b27);
  background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: .5rem;
}

/* ── Toasts ─────────────────────────────────────────────────────── */
.toast-item {
  background: #1b1b27; border: 1px solid #272736; border-left-width: 3px;
  border-radius: .6rem; padding: .8rem 1rem; font-size: .85rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); min-width: 240px;
  animation: slideInRight .28s cubic-bezier(.34,1.4,.64,1);
  transition: opacity .25s, transform .25s;
}
.toast-item.leaving {
  opacity: 0; transform: translateX(40px);
}
.toast-ok   { border-left-color: #4ade80; }
.toast-err  { border-left-color: #fb7185; }
.toast-info { border-left-color: #67e8f9; }

/* Ícone do toast pulsa uma vez */
.toast-item::before {
  display: inline-block; margin-right: .4rem;
  animation: popIn .3s ease both;
}

/* ── Modal ──────────────────────────────────────────────────────── */
#modal { transition: opacity .2s; }
#modal.modal-visible { opacity: 1; }
#modal-box {
  max-width: 38rem;
  animation: scaleIn .28s cubic-bezier(.34,1.4,.64,1) both;
}
#modal.modal-closing #modal-box { animation: scaleOut .2s ease forwards; }

/* ── Formulário de produto — radio de tipo de estoque ───────────── */
.stock-type-opt { transition: border-color .2s, background .2s; }
.stock-type-opt input[type="radio"] { accent-color: #a855f7; }

/* ── Modal de logins ────────────────────────────────────────────── */
.login-row {
  animation: loginRowIn .28s ease both;
  transition: background .15s;
}
.login-row:nth-child(1)  { animation-delay: .00s; }
.login-row:nth-child(2)  { animation-delay: .03s; }
.login-row:nth-child(3)  { animation-delay: .06s; }
.login-row:nth-child(4)  { animation-delay: .09s; }
.login-row:nth-child(5)  { animation-delay: .12s; }
.login-row:nth-child(6)  { animation-delay: .15s; }
.login-row:nth-child(7)  { animation-delay: .18s; }
.login-row:nth-child(8)  { animation-delay: .21s; }
.login-row:nth-child(9)  { animation-delay: .24s; }
.login-row:nth-child(10) { animation-delay: .27s; }
.login-row:nth-child(n+11) { animation-delay: .30s; }
.login-row:hover { background: #16161f; }

/* ── Broadcast progress ─────────────────────────────────────────── */
.bc-bar-fill {
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* ── Tabs (dentro do modal de logins e aba logs) ─────────────────── */
.tab-btn { transition: background .2s, color .2s, transform .15s; }
.tab-btn:hover { transform: translateY(-1px); }

/* ── App view — entrada ─────────────────────────────────────────── */
#app-view { animation: fadeIn .35s ease both; }
aside      { animation: sidebarIn .35s cubic-bezier(.4,0,.2,1) both; }

/* ── Linha de status (conn-dot) ─────────────────────────────────── */
#conn-dot.online  { background: #4ade80; animation: pulse-dot 2.5s ease-in-out infinite; }
#conn-dot.offline { background: #fb7185; animation: pulse-dot 1s ease-in-out infinite; }