/* ═══════════════════════════════════════════════════════════════
   admin-ui.css
   ─────────────
   Componentes reutilizáveis do admin:
     • Stat cards (KPIs)
     • Pills (filtros rápidos)
     • Botões (primary / secondary / ghost / danger)
     • Campos de formulário (field, field-row, field-msg)
     • Painéis (panel)
     • Badges
     • Estados (loading / empty / error / spinner)
     • Toast

   Depende de admin-base.css (tokens).
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}

.stat-card {
  position: relative;
  padding: 22px 22px 20px;
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all 0.28s var(--ease);
}

/* Faixa dourada no topo */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--admin-gold), transparent);
  opacity: 0.4;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  border-color: var(--admin-gold-soft);
}

.stat-card:hover::before { opacity: 1; }

.stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label::before {
  content: '◇';
  color: var(--admin-gold);
  font-size: 0.55rem;
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--admin-text-strong);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.stat-value.is-accent  { color: var(--admin-gold); }
.stat-value.is-success { color: var(--admin-success); }
.stat-value.is-info    { color: var(--admin-info); }
.stat-value.is-warn    { color: var(--admin-warn); }
.stat-value.is-danger  { color: var(--admin-danger); }

body[data-admin][data-theme="dark"] .stat-value.is-success { color: #5DD074; }
body[data-admin][data-theme="dark"] .stat-value.is-info    { color: #6BB6E8; }
body[data-admin][data-theme="dark"] .stat-value.is-warn    { color: #E89A4D; }
body[data-admin][data-theme="dark"] .stat-value.is-danger  { color: #E87878; }

@media (max-width: 900px) {
  .stat-grid  { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-card  { padding: 16px; }
  .stat-value { font-size: 1.7rem; }
}


/* ═══════════════════════════════════════════════════════════════
   PILLS (filtros rápidos)
   ═══════════════════════════════════════════════════════════════ */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--admin-border);
  border-radius: var(--r-pill);
  color: var(--admin-text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.pill:hover {
  border-color: var(--admin-gold);
  color: var(--admin-gold-strong);
}

/* T2.11 (2026-05-11): contador inline nos filtros pill */
.pill-count {
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0;
}

.pill.is-active .pill-count { opacity: 0.85; }

/* T2.15 (2026-05-11): botões da coluna Ações em admin/pedidos.html */
.pedido-acoes-cell {
  display: inline-flex;
  gap: 6px;
}

.pedido-acao-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: all 0.15s ease;
}

.pedido-acao-btn:hover:not(:disabled) {
  border-color: var(--admin-gold);
  background: var(--admin-gold-soft);
  transform: translateY(-1px);
}

.pedido-acao-btn.is-on {
  background: rgba(245, 165, 30, 0.18);
  border-color: rgba(245, 165, 30, 0.5);
}

.pedido-acao-btn--danger:hover:not(:disabled) {
  border-color: var(--admin-danger, #c54545);
  background: rgba(220, 90, 90, 0.14);
  color: var(--admin-danger, #c54545);
}

.pedido-acao-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

body[data-admin][data-theme="dark"] .pill:hover { color: var(--admin-gold-light); }

.pill.is-active {
  background: var(--admin-gold-soft);
  border-color: var(--admin-gold);
  color: var(--admin-gold-strong);
  font-weight: 700;
  box-shadow: 0 2px 10px var(--admin-gold-glow);
}

body[data-admin][data-theme="dark"] .pill.is-active { color: var(--admin-gold-light); }


/* ═══════════════════════════════════════════════════════════════
   BOTÕES
   ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s var(--ease);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.2;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary — gradient dourado */
.btn-primary {
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-strong));
  color: #1A1308;
  border-color: var(--admin-gold-strong);
  box-shadow: var(--shadow-sm), var(--shadow-glow);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 12px 36px var(--admin-gold-glow);
  filter: brightness(1.05);
}

body[data-admin][data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--admin-gold), var(--admin-gold-light));
  color: #0A0700;
}

/* Secondary — outline dourado */
.btn-secondary {
  background: transparent;
  color: var(--admin-gold-strong);
  border-color: var(--admin-gold);
}

body[data-admin][data-theme="dark"] .btn-secondary { color: var(--admin-gold-light); }

.btn-secondary:hover:not(:disabled) {
  background: var(--admin-gold-soft);
  border-color: var(--admin-gold-strong);
  color: var(--admin-text-strong);
}

/* Ghost — neutro */
.btn-ghost {
  background: transparent;
  color: var(--admin-text-muted);
  border-color: var(--admin-border);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--admin-text);
  border-color: var(--admin-text-faint);
  background: var(--admin-surface-2);
}

/* Danger */
.btn-danger {
  background: var(--admin-danger);
  color: #FFFFFF;
  border-color: var(--admin-danger);
}

.btn-danger:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.32);
}

/* Small */
.btn-sm {
  padding: 7px 16px;
  font-size: 0.74rem;
}


/* ═══════════════════════════════════════════════════════════════
   CAMPOS DE FORMULÁRIO
   ═══════════════════════════════════════════════════════════════ */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.field-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}

.field-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="password"],
.field input[type="date"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  background: var(--admin-surface);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  border-radius: var(--r);
  transition: all 0.18s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--admin-gold);
  box-shadow: 0 0 0 3px var(--admin-gold-soft);
}

.field input::placeholder { color: var(--admin-text-faint); }

.field-msg {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--admin-text-muted);
}

.field-msg.is-error { color: var(--admin-danger); }
.field-msg.is-ok    { color: var(--admin-success); }

body[data-admin][data-theme="dark"] .field-msg.is-error { color: #E87878; }
body[data-admin][data-theme="dark"] .field-msg.is-ok    { color: #5DD074; }


/* ═══════════════════════════════════════════════════════════════
   PAINEL (card com barra lateral dourada)
   ═══════════════════════════════════════════════════════════════ */

.panel {
  background: var(--admin-card);
  border: 1px solid var(--admin-border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Faixa dourada na borda esquerda */
.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--admin-gold), transparent 60%);
  opacity: 0.6;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--admin-border-soft);
}

.panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--admin-text-strong);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.4;
}

.badge.is-success { background: var(--admin-success-soft); border-color: var(--admin-success); color: var(--admin-success); }
.badge.is-warn    { background: var(--admin-warn-soft);    border-color: var(--admin-warn);    color: var(--admin-warn); }
.badge.is-danger  { background: var(--admin-danger-soft);  border-color: var(--admin-danger);  color: var(--admin-danger); }
.badge.is-info    { background: var(--admin-info-soft);    border-color: var(--admin-info);    color: var(--admin-info); }
.badge.is-muted   { background: var(--admin-surface-2);    border-color: var(--admin-border);  color: var(--admin-text-muted); }
.badge.is-accent  {
  background: var(--admin-gold-soft);
  border-color: var(--admin-gold);
  color: var(--admin-gold-strong);
  box-shadow: 0 1px 6px var(--admin-gold-glow);
}

body[data-admin][data-theme="dark"] .badge.is-accent  { color: var(--admin-gold-light); }
body[data-admin][data-theme="dark"] .badge.is-success { color: #5DD074; border-color: #2E7D3B; }
body[data-admin][data-theme="dark"] .badge.is-info    { color: #6BB6E8; border-color: #1E5C8C; }
body[data-admin][data-theme="dark"] .badge.is-warn    { color: #E89A4D; border-color: #B45309; }
body[data-admin][data-theme="dark"] .badge.is-danger  { color: #E87878; border-color: #B91C1C; }


/* ═══════════════════════════════════════════════════════════════
   ESTADOS (loading / empty / error / spinner)
   ═══════════════════════════════════════════════════════════════ */

.state-loading,
.state-empty,
.state-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 28px;
  text-align: center;
  color: var(--admin-text-muted);
  font-size: 0.92rem;
}

.state-icon {
  font-size: 2.4rem;
  color: var(--admin-gold);
  opacity: 0.55;
  font-family: var(--font-display);
}

.state-error .state-icon { color: var(--admin-danger); }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--admin-border);
  border-top-color: var(--admin-gold);
  border-radius: 50%;
  display: inline-block;
  animation: admin-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes admin-spin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   TOAST (fica flutuando no topo direito)
   ═══════════════════════════════════════════════════════════════ */

.toast-host {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  padding: 14px 22px 14px 18px;
  background: var(--admin-card);
  color: var(--admin-text);
  border: 1px solid var(--admin-border);
  border-left: 3px solid var(--admin-gold);
  border-radius: var(--r);
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 380px;
  transform: translateX(440px);
  opacity: 0;
  transition: all 0.32s var(--ease);
  backdrop-filter: blur(8px);
}

.toast-item.is-show {
  transform: translateX(0);
  opacity: 1;
}

.toast-item.is-ok    { border-left-color: var(--admin-success); }
.toast-item.is-error { border-left-color: var(--admin-danger);  }
.toast-item.is-info  { border-left-color: var(--admin-info);    }