/* ============================================================
   ESTMOV — estilos custom da Loja
   ============================================================
   Complementa o Tailwind Play CDN com utilitários que não dá
   para escrever inline ou que precisam ser globais.
*/

/* ----- Tipografia base ----- */

html, body {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #ffffff;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Números alinhados em colunas (preços, IDs, quantidades). */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ----- Scrollbar (apenas WebKit) ----- */

::-webkit-scrollbar        { width: 10px; height: 10px; }
::-webkit-scrollbar-track  { background: #f3f4f6; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ----- Cards ----- */

.card {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover {
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

/* ----- Badges de status (espelham os enums do backend) ----- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-success   { background: #dcfce7; color: #166534; } /* entregue */
.badge-paid      { background: #fef3c7; color: #92400e; } /* pago */
.badge-shipped   { background: #dbeafe; color: #1e40af; } /* enviado */
.badge-pending   { background: #fef3c7; color: #854d0e; } /* aguardando */
.badge-cancelled { background: #f3f4f6; color: #6b7280; } /* cancelado */
.badge-danger    { background: #fee2e2; color: #991b1b; } /* estornado */

/* ----- Spinner de loading ----- */

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: estmov-spin 0.6s linear infinite;
}
.spinner-lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
@keyframes estmov-spin {
  to { transform: rotate(360deg); }
}

/* ----- Vue v-cloak: esconde marcações enquanto Vue não montou ----- */

[v-cloak] {
  display: none !important;
}

/* ----- Focus visível em inputs (acessibilidade) ----- */

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: none;
}

/* ----- Auto-fill do navegador: manter cores da marca ----- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111827;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: #111827;
}