/*
 * ============================================================
 *  MT PAY — Tema de marca central
 * ============================================================
 * Este arquivo centraliza as variáveis de cor da marca (verde)
 * e dos estados semânticos (âmbar para avisos/erros, verde para
 * sucesso), pra não precisar repetir esse bloco em cada página.
 *
 * COMO USAR:
 * Adicione esta linha no <head>, ANTES do <style> de cada
 * página, depois dos outros CSS (bootstrap, icons, etc):
 *
 *   <link rel="stylesheet" href="assets/css/theme-brand.css">
 *
 * Nas páginas, o <style> interno pode continuar existindo pra
 * layout específico daquela tela — só REMOVA o bloco de
 * `--primary-red`, `--secondary-red` etc de dentro do :root
 * local, porque ele já vem definido aqui.
 * ============================================================
 */

:root {
  /* Marca — verde (CTAs, botões, destaques, links de ação) */
  --brand-green:        #00A651;
  --brand-green-light:  #00C853;
  --brand-green-dark:   #00703A;
  --brand-green-darker: #004623;
  --brand-green-pale:   #86EFAC;
  --brand-green-pale2:  #4ADE80;

  /* Compatibilidade com nomenclatura antiga usada em várias páginas
     (--primary-red / --secondary-red / --dark-red / --light-red / --pale-red)
     Mantido para não quebrar CSS já escrito nas páginas — todos
     apontam pro verde da marca, nunca mais pro vermelho antigo. */
  --primary-red:   var(--brand-green-light);
  --secondary-red: var(--brand-green);
  --dark-red:      var(--brand-green-dark);
  --light-red:     var(--brand-green-pale2);
  --pale-red:      var(--brand-green-pale);

  /* Estados semânticos — âmbar para atenção/erro, nunca vermelho */
  --danger-color:  #F59E0B;
  --danger-hover:  #B45309;
  --danger-dark:   #92400E;
  --danger-light:  #FDE68A;
  --warning-color: #F59E0B;
  --success-color: #059669;
  --info-color:    #0EA5E9;

  /* Neutros do tema escuro (área do usuário) */
  --pure-black:    #000000;
  --dark-black:    #1A1A1A;
  --darker-black:  #2A2A2A;
  --border-gray:   #3A3A3A;
  --pure-white:    #FFFFFF;
  --text-gray:     #B0B0B0;

  /* Neutros do tema claro (área do admin) */
  --primary-black: #000;
  --secondary-black: #1A1A1A;
  --off-white:     #F8F8F8;
  --light-gray:    #E5E5E5;
  --medium-gray:   #999;
  --dark-gray:     #333;
  --mg: var(--medium-gray); /* alias — var(--mg) já existia quebrado no admin/Webhooks.php antes desta atualização */

  /* Tipografia */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* Micro-interação padrão usada nos botões primários do sistema —
   compartilhada aqui pra não reescrever em cada página. */
@keyframes brandFadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-shine:hover::before {
  left: 125%;
}

/* ============================================================
 *  COMPONENTES PADRÃO — badges, tabelas, modais, dropdowns
 *  Use estas classes em vez de reinventar estilo em cada página.
 * ============================================================ */

/* ---------- Badges / status pills ---------- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-pill.badge-success { background: rgba(5,150,105,0.12);  color: #10B981; border-color: rgba(5,150,105,0.3); }
.badge-pill.badge-warning { background: rgba(245,158,11,0.12); color: #F59E0B; border-color: rgba(245,158,11,0.3); }
.badge-pill.badge-danger  { background: rgba(180,83,9,0.14);   color: #F59E0B; border-color: rgba(180,83,9,0.35); }
.badge-pill.badge-info    { background: rgba(14,165,233,0.12); color: #38BDF8; border-color: rgba(14,165,233,0.3); }
.badge-pill.badge-brand   { background: rgba(0,166,81,0.12);   color: #00C853; border-color: rgba(0,166,81,0.3); }
.badge-pill.badge-neutral { background: rgba(107,114,128,0.14); color: #9CA3AF; border-color: rgba(107,114,128,0.3); }

/* ---------- Tabelas ---------- */
.table-premium {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-premium thead th {
  background: rgba(255,255,255,0.03);
  color: var(--text-gray, #b0b0b0);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-gray, #3A3A3A);
  white-space: nowrap;
}
.table-premium tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  vertical-align: middle;
}
.table-premium tbody tr {
  transition: background 0.15s ease;
}
.table-premium tbody tr:hover {
  background: rgba(0,166,81,0.04);
}
.table-premium tbody tr:last-child td {
  border-bottom: none;
}

/* Variante clara — para o tema branco do admin */
.table-premium-light {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-premium-light thead th {
  background: rgba(0,166,81,0.04);
  color: var(--dark-gray, #333);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
  border-bottom: 2px solid rgba(0,166,81,0.15);
  white-space: nowrap;
}
.table-premium-light tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--light-gray, #E5E5E5);
  font-size: 13px;
  vertical-align: middle;
}
.table-premium-light tbody tr {
  transition: background 0.15s ease;
}
.table-premium-light tbody tr:hover {
  background: rgba(0,166,81,0.05);
}
.table-premium-light tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Modais (aplicar em .modal-content ou wrapper equivalente) ---------- */
.modal-premium {
  background: linear-gradient(135deg, var(--dark-black, #1A1A1A) 0%, var(--darker-black, #2A2A2A) 100%);
  border: 1px solid var(--border-gray, #3A3A3A);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,166,81,0.06);
  overflow: hidden;
  animation: brandFadeSlideUp 0.3s ease both;
}
.modal-premium .modal-header {
  border-bottom: 1px solid var(--border-gray, #3A3A3A);
  position: relative;
}
.modal-premium .modal-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00A651 50%, transparent 100%);
  opacity: 0.7;
}
.modal-premium .modal-footer {
  border-top: 1px solid var(--border-gray, #3A3A3A);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu-premium {
  background: var(--darker-black, #2A2A2A);
  border: 1px solid var(--border-gray, #3A3A3A);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding: 6px;
  animation: brandFadeSlideUp 0.2s ease both;
}
.dropdown-menu-premium .dropdown-item {
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease;
}
.dropdown-menu-premium .dropdown-item:hover {
  background: rgba(0,166,81,0.1);
  color: #00C853;
}

