/* ==========================================================================
   Ventrix Pay — Tema Escuro Premium
   Camada de override: reaproveita o HTML claro existente e reveste em dark.
   Paleta: fundo preto-azulado, superfícies em navy, texto claro, acento azul.
   ========================================================================== */

:root {
  --vx-bg:        #080b14;   /* fundo geral (quase preto azulado) */
  --vx-bg-2:      #0c111d;   /* fundo alternativo */
  --vx-surface:   #111827;   /* cards / painéis (era bg-white) */
  --vx-surface-2: #0e1523;   /* superfície sutil (era bg-slate-50) */
  --vx-surface-3: #1a2336;   /* superfície elevada (era bg-slate-100) */
  --vx-border:    #232c42;   /* bordas */
  --vx-border-2:  #2e3a55;   /* bordas de inputs */
  --vx-text:      #e9eefb;   /* texto principal */
  --vx-text-2:    #c3cde0;   /* texto secundário */
  --vx-text-3:    #8b98b4;   /* texto suave / labels */
  --vx-accent:    #3b82f6;   /* azul Ventrix */
  --vx-accent-2:  #60a5fa;   /* azul claro */
}

html, body {
  background-color: var(--vx-bg) !important;
  color: var(--vx-text);
}

/* ---- Superfícies ---- */
.bg-white { background-color: var(--vx-surface) !important; }
.bg-slate-50, .bg-gray-50 { background-color: var(--vx-surface-2) !important; }
.bg-slate-100, .bg-gray-100 { background-color: var(--vx-surface-3) !important; }
.bg-slate-200, .bg-gray-200 { background-color: #202a40 !important; }
.bg-slate-800, .bg-slate-900, .bg-gray-900 { background-color: #0a0f1b !important; }

/* gradientes/fundos claros de seções */
.bg-blue-50, .bg-blue-50\/50, .bg-indigo-50, .bg-sky-50 { background-color: #0f1b30 !important; }

/* ---- Texto ---- */
.text-slate-900, .text-gray-900, .text-black { color: var(--vx-text) !important; }
.text-slate-800, .text-gray-800 { color: var(--vx-text) !important; }
.text-slate-700, .text-gray-700 { color: var(--vx-text-2) !important; }
.text-slate-600, .text-gray-600 { color: var(--vx-text-2) !important; }
.text-slate-500, .text-gray-500 { color: var(--vx-text-3) !important; }
.text-slate-400, .text-gray-400 { color: var(--vx-text-3) !important; }

/* ---- Bordas ---- */
.border-slate-100, .border-gray-100,
.border-slate-200, .border-gray-200,
.border-slate-300, .border-gray-300 { border-color: var(--vx-border) !important; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]),
.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--vx-border) !important; }

/* ---- Inputs / selects / textarea ---- */
input, select, textarea {
  background-color: var(--vx-surface-2) !important;
  color: var(--vx-text) !important;
  border-color: var(--vx-border-2) !important;
}
input::placeholder, textarea::placeholder { color: #697693 !important; }
select option { background-color: #0e1523; color: var(--vx-text); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--vx-accent); }
/* não pintar os toggles custom (peer) nem botões */
.sr-only, button input { background: transparent !important; }

/* ---- Hovers claros -> hovers escuros ---- */
.hover\:bg-slate-50:hover, .hover\:bg-gray-50:hover { background-color: #16203200 !important; background-color: #152034 !important; }
.hover\:bg-slate-100:hover, .hover\:bg-gray-100:hover { background-color: #1b2740 !important; }
.hover\:text-slate-900:hover, .hover\:text-gray-900:hover { color: var(--vx-text) !important; }
.hover\:text-slate-700:hover { color: var(--vx-text-2) !important; }

/* ---- Itens de menu ativos (azul claro -> azul translúcido) ---- */
.bg-blue-50 { background-color: rgba(59,130,246,0.14) !important; }
.text-blue-600, .text-blue-700 { color: var(--vx-accent-2) !important; }

/* ---- Badges semânticos (fundo -100 claro -> translúcido) ---- */
.bg-emerald-100, .bg-green-100 { background-color: rgba(16,185,129,0.16) !important; }
.text-emerald-700, .text-emerald-800, .text-green-700 { color: #4ade80 !important; }
.bg-red-100, .bg-rose-100 { background-color: rgba(239,68,68,0.16) !important; }
.text-red-600, .text-red-700, .text-red-800 { color: #f87171 !important; }
.bg-amber-100, .bg-yellow-100 { background-color: rgba(245,158,11,0.16) !important; }
.text-amber-700, .text-yellow-600, .text-yellow-700 { color: #fbbf24 !important; }
.bg-blue-100, .bg-sky-100 { background-color: rgba(59,130,246,0.16) !important; }
.bg-slate-100.text-slate-500, .bg-slate-100.text-slate-600 { color: var(--vx-text-3) !important; }

/* ---- Caixas de alerta claras ---- */
.bg-red-50 { background-color: rgba(239,68,68,0.10) !important; }
.bg-emerald-50, .bg-green-50 { background-color: rgba(16,185,129,0.10) !important; }
.bg-amber-50, .bg-yellow-50 { background-color: rgba(245,158,11,0.10) !important; }

/* ---- Sombras mais suaves no escuro ---- */
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25) !important;
}

/* ---- Tabelas ---- */
thead.bg-slate-50, thead .bg-slate-50, tr.bg-slate-50 { background-color: #0e1523 !important; }

/* ---- Divisores/scrollbar ---- */
hr { border-color: var(--vx-border) !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0f1b; }
::-webkit-scrollbar-thumb { background: #2a3550; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #374569; }

/* ---- Acento azul em foco ---- */
.focus\:ring-blue-500:focus, .focus\:ring-blue-600:focus { --tw-ring-color: var(--vx-accent) !important; }

/* ===== Refino visual premium (painel estilo referência) ===== */
body {
  background: radial-gradient(130% 80% at 50% -10%, #0e1c38 0%, #0a1020 45%, #080b14 100%) fixed !important;
}
/* Card de saldo em destaque com brilho neon azul */
.vx-neon-card {
  background: linear-gradient(150deg, #0f1c3a 0%, #0b1322 70%) !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.12), 0 14px 40px -12px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ===== Anel de Story NOVO (gradiente igual ao Instagram) ===== */
.story-ring-new {
  background: conic-gradient(from 15deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75) !important;
  box-shadow: 0 0 10px rgba(214,41,118,0.45);
}