/* ================================================================
   CRIVO Design Theme — Tokens e estilos compartilhados
   Injetado via NGINX em todos os produtos do ecossistema.
   Fonte de verdade: docs/DESIGN-SYSTEM.md
   ================================================================ */

/* ── Design Tokens ── */
:root {
  --crivo-primary: #005b38;
  --crivo-primary-hover: #00492d;
  --crivo-primary-tint: #e1f3e8;
  --crivo-canvas: #f6faf8;
  --crivo-paper: #ffffff;
  --crivo-surface: #eef4f0;
  --crivo-ink: #171c1f;
  --crivo-ink-soft: #3f4944;
  --crivo-muted: #66736c;
  --crivo-line: #cfd9d2;
  --crivo-line-soft: #e3eae5;
  --crivo-success: #16794c;
  --crivo-warning: #b45309;
  --crivo-danger: #a93434;
  --crivo-radius-sm: 6px;
  --crivo-radius: 10px;
  --crivo-radius-lg: 14px;
  --crivo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --crivo-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  --crivo-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.07);
  --crivo-font-display: 'Space Grotesk', system-ui, sans-serif;
  --crivo-font-body: 'Inter', system-ui, sans-serif;
  --crivo-font-mono: 'JetBrains Mono', monospace;
}

/* ── Tipografia base ── */
#crivo-shell-header ~ *,
#crivo-shell-header ~ * *,
body.crivo-shell-active,
body.crivo-shell-active * {
  font-family: var(--crivo-font-body);
}

#crivo-shell-header ~ * h1,
#crivo-shell-header ~ * h2,
#crivo-shell-header ~ * h3,
#crivo-shell-header ~ * h4,
#crivo-shell-header ~ * .h1 {
  font-family: var(--crivo-font-display);
  font-weight: 580;
  letter-spacing: -0.025em;
  color: var(--crivo-ink);
}

#crivo-shell-header ~ * code,
#crivo-shell-header ~ * pre,
#crivo-shell-header ~ * .mono {
  font-family: var(--crivo-font-mono);
}

/* ── Fundo da página (respeita tema do produto, apenas sugere canvas) ── */
/* Não forçamos background — produtos dark (Atlas, Voto, Social Engine, War Room)
   mantêm seu tema. Cards e superfícies é que garantem consistência visual. */

/* ── Cards ── */
#crivo-shell-header ~ * .card,
#crivo-shell-header ~ * [class*="card"],
#crivo-shell-header ~ * [class*="Card"] {
  background: var(--crivo-paper) !important;
  border: 1px solid var(--crivo-line) !important;
  border-radius: var(--crivo-radius) !important;
  box-shadow: var(--crivo-shadow) !important;
}

/* ── Tabelas ── */
#crivo-shell-header ~ * table {
  border-collapse: separate;
  border-spacing: 0;
}

#crivo-shell-header ~ * thead th {
  background: var(--crivo-surface) !important;
  color: var(--crivo-muted) !important;
  font-family: var(--crivo-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 2px solid var(--crivo-line) !important;
  padding: 10px 14px !important;
}

#crivo-shell-header ~ * tbody td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--crivo-line-soft) !important;
  color: var(--crivo-ink-soft) !important;
  font-size: 13px !important;
}

#crivo-shell-header ~ * tbody tr:hover td {
  background: var(--crivo-primary-tint) !important;
}

/* ── Botões ── */
#crivo-shell-header ~ * .btn,
#crivo-shell-header ~ * button[class*="btn"],
#crivo-shell-header ~ * [class*="Button"] {
  font-family: var(--crivo-font-body) !important;
  font-weight: 500 !important;
  border-radius: var(--crivo-radius-sm) !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  transition: background 150ms, box-shadow 150ms, border-color 150ms !important;
}

#crivo-shell-header ~ * .btn.primary,
#crivo-shell-header ~ * button[class*="primary"] {
  background: var(--crivo-primary) !important;
  color: #fff !important;
  border-color: var(--crivo-primary) !important;
}

#crivo-shell-header ~ * .btn.primary:hover,
#crivo-shell-header ~ * button[class*="primary"]:hover {
  background: var(--crivo-primary-hover) !important;
  box-shadow: var(--crivo-shadow) !important;
}

#crivo-shell-header ~ * .btn:not(.primary),
#crivo-shell-header ~ * button[class*="secondary"],
#crivo-shell-header ~ * button[class*="ghost"] {
  background: var(--crivo-paper) !important;
  color: var(--crivo-ink) !important;
  border: 1px solid var(--crivo-line) !important;
}

#crivo-shell-header ~ * .btn:not(.primary):hover,
#crivo-shell-header ~ * button[class*="secondary"]:hover,
#crivo-shell-header ~ * button[class*="ghost"]:hover {
  background: var(--crivo-surface) !important;
  border-color: var(--crivo-primary) !important;
}

/* ── Inputs e selects ── */
#crivo-shell-header ~ * input[type="text"],
#crivo-shell-header ~ * input[type="email"],
#crivo-shell-header ~ * input[type="password"],
#crivo-shell-header ~ * input[type="search"],
#crivo-shell-header ~ * input[type="number"],
#crivo-shell-header ~ * select,
#crivo-shell-header ~ * textarea {
  font-family: var(--crivo-font-body) !important;
  font-size: 13px !important;
  border: 1px solid var(--crivo-line) !important;
  border-radius: var(--crivo-radius-sm) !important;
  padding: 8px 12px !important;
  background: var(--crivo-paper) !important;
  color: var(--crivo-ink) !important;
  transition: border-color 150ms, box-shadow 150ms !important;
}

#crivo-shell-header ~ * input:focus,
#crivo-shell-header ~ * select:focus,
#crivo-shell-header ~ * textarea:focus {
  border-color: var(--crivo-primary) !important;
  box-shadow: 0 0 0 3px var(--crivo-primary-tint) !important;
  outline: none !important;
}

/* ── Badges / Tags / Pills ── */
#crivo-shell-header ~ * [class*="badge"],
#crivo-shell-header ~ * [class*="Badge"],
#crivo-shell-header ~ * [class*="tag"],
#crivo-shell-header ~ * [class*="pill"] {
  font-family: var(--crivo-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: var(--crivo-surface) !important;
  color: var(--crivo-muted) !important;
}

/* ── KPIs / Métricas ── */
#crivo-shell-header ~ * [class*="kpi"] [class*="value"],
#crivo-shell-header ~ * [class*="Kpi"] [class*="Value"],
#crivo-shell-header ~ * [class*="stat"] [class*="value"] {
  font-family: var(--crivo-font-display) !important;
  font-weight: 580 !important;
  color: var(--crivo-ink) !important;
}

#crivo-shell-header ~ * [class*="kpi"] [class*="label"],
#crivo-shell-header ~ * [class*="Kpi"] [class*="Label"],
#crivo-shell-header ~ * [class*="stat"] [class*="label"] {
  font-family: var(--crivo-font-mono) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--crivo-muted) !important;
}

/* ── Links ── */
#crivo-shell-header ~ * a:not([class*="btn"]):not([class*="nav"]) {
  color: var(--crivo-primary) !important;
  text-decoration: none !important;
}

#crivo-shell-header ~ * a:not([class*="btn"]):not([class*="nav"]):hover {
  text-decoration: underline !important;
}

/* ── Divisores / Separadores ── */
#crivo-shell-header ~ * hr,
#crivo-shell-header ~ * [class*="divider"],
#crivo-shell-header ~ * [class*="separator"] {
  border-color: var(--crivo-line) !important;
}

/* ── Tooltips ── */
#crivo-shell-header ~ * [class*="tooltip"],
#crivo-shell-header ~ * [title] {
  /* native tooltips mantidos */
}

/* ── Loading / Skeleton ── */
#crivo-shell-header ~ * [class*="loading"],
#crivo-shell-header ~ * [class*="skeleton"],
#crivo-shell-header ~ * [class*="Skeleton"] {
  background: var(--crivo-surface) !important;
  border-radius: var(--crivo-radius-sm) !important;
}

/* ── Alertas / Notificações ── */
#crivo-shell-header ~ * [class*="alert"][class*="success"],
#crivo-shell-header ~ * [class*="success"] {
  background: var(--crivo-primary-tint) !important;
  border-left: 3px solid var(--crivo-success) !important;
  color: var(--crivo-success) !important;
}

#crivo-shell-header ~ * [class*="alert"][class*="danger"],
#crivo-shell-header ~ * [class*="alert"][class*="error"],
#crivo-shell-header ~ * [class*="danger"] {
  background: #fef2f2 !important;
  border-left: 3px solid var(--crivo-danger) !important;
  color: var(--crivo-danger) !important;
}

/* ── Sidebar / Navegação lateral (padrão para produtos que não têm sidebar própria) ── */
#crivo-shell-header ~ * [class*="sidebar"],
#crivo-shell-header ~ * [class*="Sidebar"],
#crivo-shell-header ~ * aside[class*="nav"] {
  background: var(--crivo-paper) !important;
  border-right: 1px solid var(--crivo-line) !important;
}

#crivo-shell-header ~ * [class*="sidebar"] a,
#crivo-shell-header ~ * [class*="Sidebar"] a {
  color: var(--crivo-ink-soft) !important;
}

#crivo-shell-header ~ * [class*="sidebar"] a:hover,
#crivo-shell-header ~ * [class*="sidebar"] a[class*="active"],
#crivo-shell-header ~ * [class*="Sidebar"] a:hover,
#crivo-shell-header ~ * [class*="Sidebar"] a[class*="active"] {
  background: var(--crivo-primary-tint) !important;
  color: var(--crivo-primary) !important;
}

/* ── Header de página dentro dos produtos ── */
#crivo-shell-header ~ * [class*="page-header"],
#crivo-shell-header ~ * [class*="PageHeader"] {
  border-bottom: 1px solid var(--crivo-line) !important;
  padding-bottom: 20px !important;
  margin-bottom: 24px !important;
}

/* ── Responsividade ── */
@media (max-width: 768px) {
  :root {
    --crivo-radius: 8px;
  }
}