/* ============================================================
   Base Nails Pay, tema escuro
   ------------------------------------------------------------
   Telas herdadas do sistema comprado usam a paleta CLARA do
   Tailwind (slate/gray/blue) direto nas classes, espalhada por
   centenas de linhas. Em vez de reescrever cada uma, este arquivo
   remapeia essas classes para a paleta escura do produto.

   Paleta (mesma do layout base-cyberpunk, para os dois combinarem):
     fundo      #050505
     superfície #0c0c0c
     elevada    #141414
     borda      #1f1f1f
     texto      #f5f5f5
     apoio      #a3a3a3
     destaque   #FF0AC2  (magenta da marca Base Nails)
   ============================================================ */

:root {
  --bnp-bg: #050505;
  --bnp-surface: #0c0c0c;
  --bnp-raised: #141414;
  --bnp-border: #1f1f1f;
  --bnp-text: #f5f5f5;
  --bnp-text-muted: #a3a3a3;
  --bnp-text-dim: #7a7a7a;
  --bnp-accent: #FF0AC2;
  --bnp-accent-soft: rgba(255, 10, 194, 0.12);
}

/* ---------- Fundos ---------- */
body,
body.bg-slate-50,
body.bg-gray-50,
body.bg-gray-100 {
  background-color: var(--bnp-bg) !important;
  color: var(--bnp-text) !important;
}

.bg-white,
.bg-slate-50,
.bg-gray-50 {
  background-color: var(--bnp-surface) !important;
}

.bg-slate-100,
.bg-gray-100,
.bg-slate-200,
.bg-gray-200 {
  background-color: var(--bnp-raised) !important;
}

/* ---------- Texto ---------- */
.text-slate-900, .text-gray-900,
.text-slate-800, .text-gray-800 {
  color: var(--bnp-text) !important;
}

.text-slate-700, .text-gray-700,
.text-slate-600, .text-gray-600 {
  color: var(--bnp-text-muted) !important;
}

.text-slate-500, .text-gray-500,
.text-slate-400, .text-gray-400 {
  color: var(--bnp-text-dim) !important;
}

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

/* ---------- Azul de destaque vira magenta da marca ---------- */
.text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800,
.text-indigo-600, .text-indigo-700 {
  color: var(--bnp-accent) !important;
}

.bg-blue-600, .bg-blue-700,
.bg-indigo-600, .bg-indigo-700 {
  background-color: var(--bnp-accent) !important;
}

.bg-blue-50, .bg-blue-100,
.bg-indigo-50, .bg-indigo-100 {
  background-color: var(--bnp-accent-soft) !important;
}

.border-blue-200, .border-blue-500, .border-blue-600 {
  border-color: var(--bnp-accent) !important;
}

.hover\:bg-blue-700:hover { background-color: #d1089f !important; }
.hover\:text-blue-700:hover { color: var(--bnp-accent) !important; }
.ring-blue-500 { --tw-ring-color: var(--bnp-accent) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--bnp-accent) !important; }
.focus\:border-blue-500:focus { border-color: var(--bnp-accent) !important; }

/* ---------- Hover neutro ---------- */
.hover\:bg-slate-50:hover,
.hover\:bg-gray-50:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-gray-100:hover {
  background-color: var(--bnp-raised) !important;
}

.hover\:text-slate-900:hover,
.hover\:text-gray-900:hover {
  color: var(--bnp-text) !important;
}

/* ---------- Emerald era a cor da marca antiga ----------
   O sistema comprado usava emerald-500 (#10b981) como cor de destaque,
   em 350+ lugares. Aqui ela vira o magenta do Base Nails.

   O "green-*" NÃO entra: aquele é status de sucesso (aprovado, pago) e
   deve continuar verde, senão perde o significado.                      */
.text-emerald-300, .text-emerald-400, .text-emerald-500,
.text-emerald-600, .text-emerald-700 {
  color: var(--bnp-accent) !important;
}

.bg-emerald-500, .bg-emerald-600, .bg-emerald-700 {
  background-color: var(--bnp-accent) !important;
}

.bg-emerald-50, .bg-emerald-100 {
  background-color: var(--bnp-accent-soft) !important;
}

.border-emerald-200, .border-emerald-300, .border-emerald-400,
.border-emerald-500, .border-emerald-600 {
  border-color: var(--bnp-accent) !important;
}

.ring-emerald-500, .focus\:ring-emerald-500:focus {
  --tw-ring-color: var(--bnp-accent) !important;
}

.hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover {
  background-color: #d1089f !important;
}

.hover\:text-emerald-400:hover, .hover\:text-emerald-500:hover {
  color: var(--bnp-accent) !important;
}

.hover\:border-emerald-500:hover, .focus\:border-emerald-500:focus {
  border-color: var(--bnp-accent) !important;
}

/* Variantes com opacidade (bg-emerald-500/10 e afins). */
[class*="bg-emerald-500\\/"], [class*="bg-emerald-400\\/"] {
  background-color: var(--bnp-accent-soft) !important;
}

/* ---------- Cores de status: fundo translúcido no escuro ----------
   O texto continua colorido; só o fundo claro vira transparente,
   senão fica um bloco branco no meio da tela escura.               */
.bg-green-50,  .bg-emerald-50  { background-color: rgba(16, 185, 129, 0.12) !important; }
.bg-green-100, .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; }
.bg-red-50,    .bg-rose-50     { background-color: rgba(244, 63, 94, 0.12) !important; }
.bg-red-100,   .bg-rose-100    { background-color: rgba(244, 63, 94, 0.18) !important; }
.bg-amber-50,  .bg-yellow-50   { background-color: rgba(245, 158, 11, 0.12) !important; }
.bg-amber-100, .bg-yellow-100  { background-color: rgba(245, 158, 11, 0.18) !important; }
.bg-purple-50, .bg-violet-50   { background-color: rgba(168, 85, 247, 0.12) !important; }
.bg-purple-100,.bg-violet-100  { background-color: rgba(168, 85, 247, 0.18) !important; }

/* ---------- Formulários ---------- */
input, textarea, select {
  background-color: var(--bnp-raised) !important;
  border-color: var(--bnp-border) !important;
  color: var(--bnp-text) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--bnp-text-dim) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--bnp-accent) !important;
  box-shadow: 0 0 0 2px rgba(255, 10, 194, 0.25) !important;
  outline: none !important;
}

/* O select nativo abre com o fundo do sistema; sem isso as opções
   ficam texto claro sobre fundo claro em alguns navegadores. */
select option {
  background-color: var(--bnp-raised);
  color: var(--bnp-text);
}

/* ---------- Tabelas ---------- */
thead, thead tr, thead th {
  background-color: var(--bnp-raised) !important;
  color: var(--bnp-text-muted) !important;
}

tbody tr:hover { background-color: rgba(255, 255, 255, 0.03) !important; }
td, th { border-color: var(--bnp-border) !important; }

/* ---------- Sombras: no escuro, sombra clara vira halo ---------- */
.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bnp-bg); }
::-webkit-scrollbar-thumb {
  background: var(--bnp-border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: #2e2e2e; }