/* ==========================================================================
   admin-page.css — overrides do redesign aplicados ao admin.html
   --------------------------------------------------------------------------
   Princípio: ZERO mudança em HTML/JS do admin (2748 linhas, alta complexidade
   de gestão). Reestiliza via tokens. Carregado APÓS admin.css legacy.

   IMPORTANTE: variáveis do flat.css/brand-system já são sobrescritas em
   spa-shell.css (body.nyvvo-admin-shell). Aqui ficam só overrides ADM
   específicos (Tailwind classes que o admin usa).
   ========================================================================== */

/* Sobrescreve variáveis do flat.css/brand-system pra que TODAS as 1628+
   regras com !important automaticamente herdem a paleta nova. */
:root,
body.nyvvo-admin-shell,
body.nyvvo-app-shell {
  --c-chrome:           oklch(0.16 0.008 250);
  --c-chrome-elevated:  oklch(0.19 0.008 250);
  --c-chrome-hover:     oklch(0.22 0.009 250);
  --c-chrome-border:    oklch(0.28 0.010 250 / 0.5);
  --c-chrome-border-strong: oklch(0.32 0.012 250 / 0.6);
  --c-data-bg:          oklch(0.16 0.008 250);
  --c-data-card:        oklch(0.19 0.008 250);
  --c-data-elevated:    oklch(0.22 0.009 250);
  --c-data-border:      oklch(0.28 0.010 250 / 0.5);
  --c-data-border-strong: oklch(0.32 0.012 250 / 0.6);
  --c-text-on-dark:        oklch(0.97 0.005 250);
  --c-text-on-dark-soft:   oklch(0.78 0.012 250);
  --c-text-on-dark-muted:  oklch(0.62 0.012 250);
  --c-text-on-dark-subtle: oklch(0.48 0.010 250);
  --c-accent:        oklch(0.74 0.16 152);
  --c-accent-hover:  oklch(0.80 0.17 152);
}

body, body.nyvvo-admin-shell {
  font-family: var(--font-sans) !important;
  background: var(--bg-0) !important;
  color: var(--text-1) !important;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar admin */
aside, .admin-sidebar, [class*="admin-side"] {
  background: var(--bg-0) !important;
  border-right: 1px solid var(--border-subtle) !important;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
}

/* Tables admin */
table {
  border-collapse: collapse;
}
table thead th {
  background: oklch(0.17 0.008 250) !important;
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
table tbody td {
  border-bottom: 1px solid var(--border-subtle) !important;
}
table tbody tr:hover {
  background: var(--bg-2) !important;
}

/* Cards admin (várias variações no admin.html) */
.bg-slate-800, .bg-gray-800, .bg-slate-900\/50,
[class*="bg-slate-8"], [class*="bg-gray-8"] {
  background: var(--bg-1) !important;
}
.bg-slate-700, .bg-gray-700,
[class*="bg-slate-7"], [class*="bg-gray-7"] {
  background: var(--bg-2) !important;
}
.bg-slate-900, .bg-gray-900 {
  background: var(--bg-0) !important;
}

/* Borders */
.border-slate-700, .border-gray-700 {
  border-color: var(--border-subtle) !important;
}
.border-slate-600, .border-gray-600 {
  border-color: var(--border-soft) !important;
}

/* Text colors */
.text-slate-400, .text-gray-400 {
  color: var(--text-3) !important;
}
.text-slate-500, .text-gray-500 {
  color: var(--text-4) !important;
}
.text-slate-200, .text-gray-200, .text-white {
  color: var(--text-1) !important;
}

/* Inputs */
input, textarea, select {
  font-family: var(--font-sans) !important;
}
input.input-dark, textarea.input-dark, .input-dark {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  transition: all 120ms ease !important;
}
input.input-dark:focus, textarea.input-dark:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  background: var(--bg-2) !important;
}

/* Buttons (admin tem padrões próprios) */
button.bg-blue-600, button.bg-blue-500,
.btn-primary {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  font-weight: 600 !important;
}
button.bg-blue-600:hover, button.bg-blue-500:hover {
  background: var(--accent-strong) !important;
}

button.bg-red-600, button.bg-red-500 {
  background: var(--danger) !important;
  color: oklch(0.16 0.04 27) !important;
}

/* Tabs admin */
.tab-active, [class*="tab"][class*="active"] {
  border-bottom-color: var(--accent) !important;
  color: var(--text-1) !important;
}

/* Tabela de captions (já adicionadas em fix anterior) */
caption.sr-only { color: var(--text-3); }

/* Stats cards admin */
/* :not([class*="__"]) impede que o frame vaze pros sub-elementos BEM
   (ex: .admin-user-kpi-card__value, __row, __meta) — era a origem das
   "linhas/retângulos" dentro dos cards de métrica. Só o bloco leva moldura. */
[class*="stat"][class*="card"]:not([class*="__"]),
[class*="kpi"][class*="card"]:not([class*="__"]) {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
}

/* Modal/dialog admin */
.modal-backdrop, [class*="modal-bg"] {
  background: oklch(0.08 0 0 / 0.6) !important;
  backdrop-filter: blur(8px);
}
.modal-content, .modal-dialog {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Status pills admin (verde/amarelo/vermelho) */
.text-emerald-300, .text-emerald-400, .text-green-400 {
  color: var(--accent-strong) !important;
}
.bg-emerald-400, .bg-green-400 {
  background: var(--accent) !important;
}
.text-amber-300, .text-yellow-300, .text-yellow-400 {
  color: oklch(0.86 0.14 75) !important;
}
.text-red-400, .text-red-500 {
  color: oklch(0.78 0.16 27) !important;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-soft);
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* Dots de status (verde cru do Tailwind → acento) */
.bg-green-500, .bg-emerald-500 {
  background: var(--accent) !important;
}