/* ============================================================
   NAVONA · Tema Identidade Visual sobre o Space — MODO DARK (Figma)
   Aplicado sobre o JS/CSS compilado original. Só aparência.
   Paleta restrita + Cinzel (títulos/logo) + Inter (corpo).
   Tokens espelham theme.ts (dark) do export Figma.
   ============================================================ */

/* ─── Paleta ─── */
:root {
  --navona-black: #050505;
  --navona-panel: #040404;
  --navona-beige: #D8D3C7;
  --navona-offwhite: #F3F0E8;
  --navona-stone: #77736A;
  /* superfícies translúcidas do dark (sobre preto) */
  --navona-card: rgba(216,211,199,0.025);
  --navona-card-hover: rgba(216,211,199,0.048);
  --navona-line: rgba(216,211,199,0.08);
  --navona-line-hover: rgba(216,211,199,0.18);
  --navona-input: rgba(216,211,199,0.04);
  --navona-text-muted: rgba(119,115,106,0.55);

  /* Overrides comuns que o Space usa via custom props */
  --primary: var(--navona-beige) !important;
  --primary-color: var(--navona-beige) !important;
  --accent: var(--navona-stone) !important;
  --bg: var(--navona-black) !important;
  --background: var(--navona-black) !important;
  --surface: var(--navona-card) !important;
  --text: var(--navona-beige) !important;
  --text-muted: var(--navona-stone) !important;
}

/* ─── Tipografia global ─── */
/* NB: NÃO usar [class*="text"] aqui — sobrescreve Cinzel dos títulos (text-white etc). */
html, body,
button, input, textarea, select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 300 !important;
}

button, input, textarea { font-weight: 400 !important; }

/* Títulos em Cinzel — especificidade alta ([class]) pra vencer utilitários text-* do Tailwind */
h1, h2, h3, h4,
h1[class], h2[class], h3[class], h4[class],
[class*="title"], [class*="Title"],
[class*="heading"], [class*="Heading"],
[role="heading"],
.brand, [class*="brand"], [class*="Brand"],
[class*="logo"], [class*="Logo"] {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
}

/* Logo / nome NAVONA — letterSpacing 0.28em padrão da marca */
[class*="logo"]:not(svg):not(img),
[class*="Logo"]:not(svg):not(img),
[class*="brand"]:not(svg):not(img) {
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
}

/* Remoção radical: sem bordas arredondadas e sem sombras */
*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Imagens / avatars circulares mantém formato (UX necessário) */
img[class*="avatar"], img[class*="Avatar"],
[class*="avatar"] img, [class*="Avatar"] img,
[class*="rounded-full"] img,
.rounded-full {
  border-radius: 9999px !important;
}

/* Body / fundo geral — PRETO Navona
   NB: NÃO usar [class*="app"] aqui — casa com "recharts-wrapper" (wr<app>er). */
html, body, #root, [class*="layout"], [class*="Layout"] {
  background: var(--navona-black) !important;
  color: var(--navona-beige) !important;
}
/* Wrappers de gráfico transparentes (sobre o card escuro) */
.recharts-wrapper, .recharts-responsive-container, .recharts-surface {
  background: transparent !important;
}
/* Texto de eixos/legendas dos gráficos legível no dark */
.recharts-text, .recharts-cartesian-axis-tick text, .recharts-legend-item-text {
  fill: var(--navona-stone) !important;
  color: var(--navona-stone) !important;
}
.recharts-cartesian-grid line, .recharts-cartesian-axis line {
  stroke: var(--navona-line) !important;
}

/* Header / Topbar / Sidebar — preto profundo */
[class*="header"]:not(button):not(input),
[class*="Header"]:not(button):not(input),
[class*="topbar"], [class*="TopBar"], [class*="Topbar"],
[class*="sidebar"], [class*="Sidebar"],
nav[class*="nav"], [role="navigation"] {
  background: var(--navona-panel) !important;
  color: var(--navona-beige) !important;
  border-color: var(--navona-line) !important;
}

[class*="header"] *:not(button):not(input):not([class*="badge"]):not([class*="Badge"]),
[class*="Header"] *:not(button):not(input):not([class*="badge"]):not([class*="Badge"]),
[class*="sidebar"] *:not(button):not(input):not([class*="badge"]):not([class*="Badge"]),
[class*="Sidebar"] *:not(button):not(input):not([class*="badge"]):not([class*="Badge"]) {
  color: inherit !important;
}

/* Cards / paineis — superfície translúcida sobre o preto */
[class*="card"]:not(button), [class*="Card"]:not(button),
[class*="panel"], [class*="Panel"],
[class*="modal-content"], [class*="ModalContent"], [class*="dialog"], [class*="Dialog"] {
  background: var(--navona-card) !important;
  border: 1px solid var(--navona-line) !important;
  color: var(--navona-beige) !important;
}
[class*="card"]:not(button):hover, [class*="Card"]:not(button):hover {
  border-color: var(--navona-line-hover) !important;
  background: var(--navona-card-hover) !important;
}

/* Texto geral dentro de cards/painéis: beige; secundário: pedra */
[class*="muted"], [class*="Muted"], [class*="secondary"], [class*="Secondary"],
[class*="subtitle"], [class*="Subtitle"], small {
  color: var(--navona-stone) !important;
}

/* Botão primário — beige sólido / preto (CTA) */
button[class*="primary"], button[class*="Primary"],
[class*="btn-primary"], [class*="btnPrimary"],
button[type="submit"],
[class*="button"][class*="primary"] {
  background: var(--navona-beige) !important;
  color: var(--navona-black) !important;
  border: 1px solid var(--navona-beige) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
button[class*="primary"]:hover, button[class*="Primary"]:hover,
[class*="btn-primary"]:hover, [class*="btnPrimary"]:hover {
  background: transparent !important;
  color: var(--navona-beige) !important;
}

/* Inputs e selects: fundo translúcido, linha fina, texto beige */
input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
  background: var(--navona-input) !important;
  border: 1px solid var(--navona-line) !important;
  color: var(--navona-beige) !important;
}
input::placeholder, textarea::placeholder { color: var(--navona-text-muted) !important; }
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--navona-line-hover) !important;
}
/* Opções de select legíveis (dropdown nativo abre no tema do SO) */
select option { background: var(--navona-black) !important; color: var(--navona-beige) !important; }

/* Links */
a:not([class*="button"]):not([class*="btn"]) {
  color: var(--navona-beige) !important;
  text-decoration: none !important;
}
a:not([class*="button"]):not([class*="btn"]):hover {
  color: var(--navona-stone) !important;
}

/* ============================================================
   TOM GERAL — remapeia as cores INLINE dominantes pro Navona (todas as telas).
   Conservador: só fundos escuros dominantes e texto claro. Status (verde/vermelho) mantém.
   ============================================================ */
/* Fundos escuros dominantes do sistema → preto Navona */
[style*="#0D1117" i], [style*="#0A0A0A" i], [style*="#0E0E0E" i], [style*="#0d0d0d" i] {
  background-color: var(--navona-black) !important;
}
/* Superfícies um pouco mais claras → card translúcido travertino */
[style*="#1A1A1A" i], [style*="#161616" i], [style*="#1A1A2E" i], [style*="#1E1E1E" i] {
  background-color: #0e0e0e !important;
}
/* Texto claro → travertino */
[style*="#EDEDED" i], [style*="#FAFAFA" i], [style*="#F5F5F5" i] {
  color: var(--navona-beige) !important;
}

/* ============================================================
   MONOCROMÁTICO (igual Figma) — neutraliza cores de status inline → travertino.
   O sistema crava cor inline (rgb) em cada elemento; alcançamos pelo valor.
   ============================================================ */
/* Casa rgb() E rgba() (substring do trio numérico). Cobre texto, borda e fundo. */
[style*="239, 68, 68"], [style*="248, 113, 113"], [style*="220, 38, 38"], [style*="185, 28, 28"],
[style*="245, 158, 11"], [style*="251, 146, 60"], [style*="249, 115, 22"], [style*="217, 119, 6"], [style*="234, 88, 12"],
[style*="16, 185, 129"], [style*="34, 197, 94"], [style*="52, 211, 153"], [style*="22, 163, 74"], [style*="74, 222, 128"],
[style*="59, 130, 246"], [style*="96, 165, 250"], [style*="37, 99, 235"], [style*="147, 197, 253"],
[style*="139, 92, 246"], [style*="196, 181, 253"], [style*="124, 58, 237"], [style*="167, 139, 250"],
[style*="236, 72, 153"], [style*="129, 140, 248"], [style*="20, 184, 166"], [style*="6, 182, 212"], [style*="244, 114, 182"],
[style*="37, 211, 102"], [style*="37, 211, 101"], [style*="18, 140, 126"], [style*="5, 150, 105"], [style*="132, 204, 22"],
[style*="212, 175, 55"], [style*="212, 168, 83"], [style*="184, 134, 11"], [style*="161, 98, 7"], [style*="234, 179, 8"], [style*="202, 138, 4"] {
  color: var(--navona-beige) !important;
  border-color: var(--navona-line-hover) !important;
  background-color: var(--navona-card) !important;
}
/* SVG coloridos: stroke/fill → travertino (pega ícones de status/coluna) */
svg[style*="239, 68, 68"], svg[style*="245, 158, 11"], svg[style*="16, 185, 129"], svg[style*="34, 197, 94"],
svg[style*="59, 130, 246"], svg[style*="139, 92, 246"], svg[style*="236, 72, 153"], svg[style*="20, 184, 166"] {
  color: var(--navona-stone) !important;
  background-color: transparent !important;
}

/* Scrollbar Navona (dark) */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--navona-black); }
*::-webkit-scrollbar-thumb { background: var(--navona-stone); }
*::-webkit-scrollbar-thumb:hover { background: var(--navona-beige); }

/* ============================================================
   LAYOUT — densidade e hierarquia no padrão Figma (fase 1, só CSS)
   ============================================================ */

/* Eyebrows / rótulos pequenos: caixa-alta + tracking (assinatura Navona) */
[class*="eyebrow"], [class*="Eyebrow"],
[class*="overline"], [class*="Overline"],
[class*="label"]:not(label):not([class*="value"]),
[class*="kicker"], [class*="Kicker"],
[class*="tag"]:not(button), [class*="Tag"]:not(button),
[class*="badge"], [class*="Badge"],
[class*="chip"], [class*="Chip"] {
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

/* Navegação lateral / abas: itens com respiro e tracking */
[class*="sidebar"] a, [class*="Sidebar"] a,
[class*="sidebar"] button, [class*="Sidebar"] button,
nav[role="navigation"] a, [role="tablist"] [role="tab"],
[class*="nav-item"], [class*="navItem"], [class*="menu-item"], [class*="menuItem"] {
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Números grandes (stats / KPIs) em Cinzel, leves */
[class*="stat"] [class*="value"], [class*="Stat"] [class*="value"],
[class*="metric"] [class*="value"], [class*="Metric"] [class*="value"],
[class*="kpi"] [class*="value"], [class*="KPI"] [class*="value"],
[class*="bignumber"], [class*="BigNumber"], [class*="stat-number"], [class*="statNumber"],
/* Caixas de stat do sistema real (Tailwind): número grande dentro de box centralizado */
[class*="rounded-xl"][class*="text-center"] > span,
[class*="rounded-xl"][class*="p-3"] > span,
[class*="rounded-lg"][class*="text-center"] > span {
  font-family: 'Cinzel', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* Tabelas: linhas hairline, header em caixa-alta, sem zebra pesada */
table { border-collapse: collapse !important; }
th {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  color: var(--navona-stone) !important;
  border-bottom: 1px solid var(--navona-line) !important;
  background: transparent !important;
}
td {
  border-bottom: 1px solid var(--navona-line) !important;
  background: transparent !important;
  font-size: 12px !important;
}
tr:hover td { background: var(--navona-card) !important; }

/* Divisórias: linha fina ao invés de blocos */
hr, [class*="divider"], [class*="Divider"], [class*="separator"], [class*="Separator"] {
  border: none !important;
  border-top: 1px solid var(--navona-line) !important;
  background: transparent !important;
  height: 1px !important;
}

/* Conteúdo principal com mais respiro (densidade Figma) */
main, [class*="content"]:not([class*="card"]):not([class*="modal"]),
[role="main"], [class*="page"]:not([class*="card"]) {
  --navona-pad: clamp(20px, 3vw, 40px);
}

/* ============================================================
   MAPA TAILWIND → TOKENS FIGMA (o sistema real usa Tailwind v4)
   Retingе o cinza-zinc do real pro travertino do Figma. Cirúrgico.
   ============================================================ */
/* Fundos */
.bg-white, .bg-gray-50, .bg-gray-100, .bg-neutral-50, .bg-neutral-100,
.bg-zinc-50, .bg-zinc-100, .bg-slate-50, .bg-slate-100 { background-color: var(--navona-card) !important; }
.bg-black, .bg-zinc-950, .bg-zinc-900, .bg-neutral-950, .bg-neutral-900,
.bg-slate-950, .bg-slate-900, .bg-gray-950, .bg-gray-900 { background-color: var(--navona-black) !important; }
.bg-zinc-800, .bg-zinc-700, .bg-neutral-800, .bg-gray-800, .bg-slate-800 { background-color: var(--navona-card-hover) !important; }
/* Gradientes que partem do preto */
.from-black, .from-zinc-900, .from-neutral-900 { --tw-gradient-from: var(--navona-black) !important; }

/* Texto */
.text-white, .text-zinc-50, .text-zinc-100, .text-neutral-50, .text-gray-50,
.text-slate-50 { color: var(--navona-beige) !important; }
.text-black, .text-zinc-900, .text-zinc-950, .text-neutral-900, .text-gray-900 { color: var(--navona-beige) !important; }
.text-zinc-200, .text-zinc-300, .text-zinc-400, .text-neutral-300, .text-neutral-400,
.text-gray-300, .text-gray-400, .text-slate-400 { color: var(--navona-stone) !important; }
.text-zinc-500, .text-zinc-600, .text-neutral-500, .text-gray-500 { color: var(--navona-text-muted) !important; }

/* Bordas */
.border-white, .border-zinc-700, .border-zinc-800, .border-zinc-200, .border-zinc-300,
.border-neutral-700, .border-neutral-800, .border-gray-200, .border-gray-300, .border-gray-700,
.border-gray-800, .border-slate-700, .border-slate-800 { border-color: var(--navona-line) !important; }

/* Placeholders */
.placeholder-zinc-500::placeholder, .placeholder-gray-500::placeholder,
.placeholder-neutral-500::placeholder { color: var(--navona-text-muted) !important; }

/* Tailwind arredondado → reto (assinatura Navona) já coberto por *,
   mas garante utilitários explícitos de raio/sombra */
[class*="rounded"]:not([class*="rounded-full"]) { border-radius: 0 !important; }
[class*="shadow"] { box-shadow: none !important; }

/* ============================================================
   REFINO FIGMA — dashboard hub (espelha o Figma SO NAVONA SPACE)
   ============================================================ */
/* Hero: esconde o quadrado de ícone acima do título (o Figma é só texto) */
.text-center.mb-8 > div.w-14.h-14:first-child { display: none !important; }