/* Cartógrafo — design system MongoDB (getdesign.md/mongodb).
 *
 * Tokens transcritos do DESIGN.md, não aproximados. Duas adaptações conscientes,
 * porque um painel de dados não é uma página de marketing:
 *
 *   1. Euclid Circular A é proprietária. Jost é a geométrica livre mais próxima
 *      (mesma construção circular, mesmas proporções largas) e está servida
 *      localmente — nenhuma requisição sai para CDN de fonte.
 *   2. A escala tipográfica de display (72/56/48px) é dimensionada para hero de
 *      marketing. Aqui a maior é 36px: a tela precisa caber densidade, e um
 *      título de 72px empurraria a tabela para baixo da dobra.
 *
 * A política sem-hover do design system é respeitada: nenhum estado de hover
 * muda cor de fundo ou de texto. O que existe é affordance de cursor e um
 * realce de linha de tabela em cinza de superfície, sem inventar cor nova.
 */

@font-face {
  font-family: 'Jost';
  src: url('./fonts/Jost.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: url('./fonts/SourceCodePro.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-display: swap;
}

:root {
  /* colors — verbatim do DESIGN.md */
  --primary: #00ed64;
  --primary-deep: #00b545;
  --primary-pressed: #008c34;
  --on-primary: #001e2b;
  --brand-green: #00ed64;
  --brand-green-dark: #00684a;
  --brand-green-mid: #00a35c;
  --brand-green-soft: #c3f0d2;
  --brand-teal-deep: #001e2b;
  --brand-teal: #003d4f;
  --brand-teal-mid: #00684a;
  --accent-purple: #7b3ff2;
  --accent-orange: #fa6e39;
  --accent-pink: #f06bb8;
  --accent-blue: #3d4f9f;
  --warning-bg: #fff8e0;
  --warning-text: #946f3f;
  --canvas: #ffffff;
  --canvas-dark: #001e2b;
  --surface: #f9fbfa;
  --surface-soft: #f4f7f6;
  --surface-feature: #e3fcef;
  --hairline: #e1e5e8;
  --hairline-soft: #eceff1;
  --hairline-strong: #c1ccd6;
  --hairline-dark: #1c2d38;
  --ink: #001e2b;
  --charcoal: #1c2d38;
  --slate: #3d4f5b;
  --steel: #5c6c7a;
  --stone: #7c8c9a;
  --muted: #a8b3bc;
  --on-dark: #ffffff;
  --on-dark-muted: #a8b3bc;

  /* ── modo escuro ────────────────────────────────────────────────────────────
   * O DESIGN.md não publica um segundo conjunto de tokens: a identidade da
   * MongoDB é dual-mode por construção — banda teal profunda + verde de marca,
   * contra superfície branca. O escuro sai de remapear os papéis semânticos
   * para o lado escuro da MESMA paleta, sem inventar cor nenhuma:
   *
   *   canvas   -> canvas-dark (#001e2b)     surface -> brand-teal (#003d4f)
   *   ink      -> on-dark                   hairline -> hairline-dark
   *   steel    -> on-dark-muted
   *
   * O verde de marca não muda: é ele que carrega a identidade, e no escuro
   * ganha ainda mais contraste — é para isso que ele existe na paleta.
   */
  --canvas: #001e2b;
  --canvas-dark: #00131c;      /* um degrau abaixo, para código e poços */
  --surface: #062b3a;
  --surface-soft: #04212e;
  --surface-feature: #06342c;  /* mint do design, rebaixado para fundo escuro */
  --hairline: #17323f;
  --hairline-soft: #102734;
  --hairline-strong: #24485a;
  --ink: #ffffff;
  --charcoal: #e6edf0;
  --slate: #c2d1d9;
  --steel: #93a8b4;
  --stone: #7c8c9a;
  --muted: #5c6c7a;
  --warning-bg: #2e2410;
  --warning-text: #e8c07a;
  /* Verde escuro do design é ilegível sobre fundo escuro; o papel dele (link,
     texto de ênfase) passa para o verde médio, que mantém a família e o
     contraste. */
  --brand-green-dark: #57d999;
  --brand-green-soft: #0d3f31;

  /* rounded */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;
  --r-lg: 12px; --r-xl: 16px; --r-xxl: 24px; --r-full: 9999px;

  /* spacing */
  --s-xxs: 4px; --s-xs: 8px;  --s-sm: 12px; --s-md: 16px;
  --s-lg: 20px; --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 40px;
  --s-section-sm: 48px; --s-section: 64px;

  /* Elevação. As sombras do design são calculadas para superfície branca; sobre
     fundo escuro uma sombra quase não aparece, então a profundidade é
     intensificada e apoiada em borda — que é o que de fato separa planos no
     escuro. */
  --e1: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --e2: 0 4px 12px 0 rgba(0, 0, 0, 0.40);
  --e3: 0 12px 24px -4px rgba(0, 0, 0, 0.50);
  --e4: 0 16px 48px -8px rgba(0, 0, 0, 0.60);

  --font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Source Code Pro', 'SF Mono', Menlo, Consolas, monospace;
  --container: 1280px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-xxl); }

/* ── tipografia ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
.h1 { font-size: 36px; line-height: 1.25; letter-spacing: -0.5px; }
.h2 { font-size: 28px; line-height: 1.30; }
.h3 { font-size: 22px; line-height: 1.35; }
.h4 { font-size: 18px; font-weight: 600; line-height: 1.40; }
.subtitle { font-size: 18px; font-weight: 400; line-height: 1.50; }
.body-sm { font-size: 14px; line-height: 1.50; }
.caption { font-size: 13px; line-height: 1.40; color: var(--steel); }
.eyebrow {
  font-size: 11px; font-weight: 600; line-height: 1.40;
  letter-spacing: 1px; text-transform: uppercase; color: var(--steel);
}
.mono { font-family: var(--mono); font-size: 14px; }
.muted { color: var(--steel); }
.stone { color: var(--stone); }

/* ── topo escuro ───────────────────────────────────────────────────────────── */
.topbar {
  background: var(--canvas-dark);
  color: var(--on-dark);
  padding: var(--s-md) 0;
  border-bottom: 1px solid var(--hairline);
}
.topbar .container { display: flex; align-items: center; gap: var(--s-xl); }
.brand { display: flex; align-items: center; gap: var(--s-sm); font-size: 18px; font-weight: 600; }
.brand-dot {
  width: 12px; height: 12px; border-radius: var(--r-full);
  background: var(--brand-green); flex: none;
}
.nav { display: flex; gap: 2px; margin-left: var(--s-sm); flex-wrap: wrap; }
.nav a {
  color: var(--on-dark-muted); font-size: 14px; font-weight: 500;
  padding: var(--s-xs) var(--s-sm); border-radius: var(--r-full);
  border: 1px solid transparent; text-decoration: none; white-space: nowrap;
}
.nav a.active {
  color: var(--on-primary); background: var(--brand-green); border-color: var(--brand-green);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s-md); }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--brand-teal-mid); color: var(--on-dark);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}

/* ── botões ────────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font); font-size: 14px; font-weight: 600; line-height: 1.30;
  border-radius: var(--r-full); padding: 10px 22px; border: 1px solid transparent;
  cursor: pointer; background: var(--brand-green); color: var(--on-primary);
}
.btn:active { background: var(--primary-pressed); }
.btn[disabled] { background: var(--hairline); color: var(--muted); cursor: not-allowed; }
.btn-secondary {
  background: transparent; color: var(--ink); border-color: var(--hairline-strong);
}
.btn-on-dark { background: var(--brand-green); color: var(--on-primary); }
.btn-secondary-on-dark {
  background: transparent; color: var(--on-dark); border-color: var(--hairline-dark);
}
.btn-ghost {
  background: transparent; color: var(--ink); border-radius: var(--r-md); padding: 8px 12px;
}
.btn-sm { padding: 6px 14px; font-size: 13px; }

/* ── superfícies ───────────────────────────────────────────────────────────── */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-xl);
}
.card-feature { padding: var(--s-xxl); }
.card-dark {
  background: var(--brand-teal); color: var(--on-dark);
  border-radius: var(--r-lg); padding: var(--s-xxl);
  border: 1px solid var(--brand-teal-mid);
}
.section { padding: var(--s-xxl) 0; }
.grid { display: grid; gap: var(--s-md); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: var(--s-md); align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-md); }

/* ── stat tiles ────────────────────────────────────────────────────────────── */
.stat { background: var(--surface); border-radius: var(--r-lg); padding: var(--s-xl); }
.stat-value {
  font-size: 32px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.5px; font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; color: var(--steel); margin-top: var(--s-xxs); }

/* ── badges ────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block; font-size: 13px; font-weight: 600; line-height: 1.40;
  border-radius: var(--r-sm); padding: 2px 8px;
}
.badge-green { background: var(--brand-green); color: var(--on-primary); }
.badge-soft {
  background: var(--brand-green-soft); color: var(--brand-green-dark);
  border-radius: var(--r-full); padding: 4px 10px;
}
.badge-dark {
  background: var(--brand-teal-deep); color: var(--brand-green);
  border-radius: var(--r-full); padding: 4px 10px;
}
.badge-purple { background: var(--accent-purple); color: var(--on-dark); }
.badge-orange { background: var(--accent-orange); color: var(--on-dark); }
.badge-blue { background: var(--accent-blue); color: var(--on-dark); }
.badge-outline {
  background: transparent; color: var(--steel);
  border: 1px solid var(--hairline-strong); border-radius: var(--r-full); padding: 3px 10px;
}

/* Confiança do dado — a distinção que o projeto inteiro existe para preservar.
   Observado ganha o verde de marca; estimado usa contorno neutro; sem sinal
   fica cinza. Cor nunca é o único sinal: o rótulo diz a mesma coisa por escrito. */
.conf-observado { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.conf-alta      { background: var(--surface-feature); color: var(--brand-green-dark); }
.conf-media     { background: var(--surface); color: var(--slate); border: 1px solid var(--hairline-strong); }
.conf-baixa     { background: var(--warning-bg); color: var(--warning-text); }
.conf-nenhuma   { background: var(--surface-soft); color: var(--stone); }

/* ── avisos ────────────────────────────────────────────────────────────────── */
.callout {
  background: var(--warning-bg); color: var(--warning-text);
  border-radius: var(--r-md); padding: var(--s-md) var(--s-lg);
  font-size: 14px; line-height: 1.5;
}
.callout-neutral { background: var(--surface); color: var(--slate); }
.callout strong { color: inherit; }

/* ── formulários ───────────────────────────────────────────────────────────── */
.input, .select {
  font-family: var(--font); font-size: 16px; color: var(--ink);
  background: var(--canvas); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md); padding: var(--s-sm) var(--s-md); height: 44px;
}
.input:focus, .select:focus { outline: none; border: 2px solid var(--brand-green-dark); }
.input-search {
  background: var(--surface); color: var(--ink); width: 100%; max-width: 420px;
}
.field { display: flex; flex-direction: column; gap: var(--s-xxs); }
.field label { font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--steel); }

/* ── tabelas ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--canvas); }
thead th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--steel);
  padding: var(--s-sm) var(--s-lg); border-bottom: 1px solid var(--hairline);
  white-space: nowrap; background: var(--surface);
}
tbody td {
  padding: var(--s-sm) var(--s-lg); border-bottom: 1px solid var(--hairline-soft);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr[data-clickable] { cursor: pointer; }
tbody tr[data-clickable]:hover { background: var(--surface); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.rank-cell { font-variant-numeric: tabular-nums; font-weight: 500; width: 56px; }
.app-cell { display: flex; align-items: center; gap: var(--s-sm); min-width: 0; }
.app-icon {
  width: 32px; height: 32px; border-radius: var(--r-md); flex: none;
  background: var(--surface); object-fit: cover;
}
.app-name { font-weight: 500; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 320px; }

/* Delta de posição: subir é verde de marca, cair é laranja de acento. O sinal
   (▲/▼) acompanha, para não depender de cor. */
.delta-up { color: var(--brand-green-dark); font-weight: 600; }
.delta-down { color: var(--accent-orange); font-weight: 600; }
.delta-flat { color: var(--stone); }

/* ── sparkline de posição ──────────────────────────────────────────────────── */
.spark { display: block; }
.spark-line { fill: none; stroke: var(--brand-green-dark); stroke-width: 2; }
.spark-area { fill: var(--brand-green-soft); opacity: 0.5; }

/* ── estados ───────────────────────────────────────────────────────────────── */
.empty {
  padding: var(--s-section-sm) var(--s-xl); text-align: center; color: var(--steel);
  background: var(--surface); border-radius: var(--r-lg);
}
.skeleton {
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--hairline-strong) 50%, var(--surface-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm); height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ── markdown do dossiê ────────────────────────────────────────────────────── */
.md { font-size: 16px; line-height: 1.55; }
.md h1 { font-size: 36px; letter-spacing: -0.5px; margin: 0 0 var(--s-md); }
.md h2 { font-size: 22px; margin: var(--s-xxl) 0 var(--s-sm); }
.md h3 { font-size: 18px; font-weight: 600; margin: var(--s-xl) 0 var(--s-xs); }
.md p { margin: 0 0 var(--s-md); }
.md ul { margin: 0 0 var(--s-md); padding-left: var(--s-lg); }
.md li { margin-bottom: var(--s-xxs); }
.md code {
  font-family: var(--mono); font-size: 13px; background: var(--surface-soft);
  padding: 1px 5px; border-radius: var(--r-xs);
}
.md blockquote {
  margin: 0 0 var(--s-md); padding: var(--s-sm) var(--s-lg);
  border-left: 3px solid var(--brand-green); background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--slate);
}
.md table { margin-bottom: var(--s-md); }
.md em { color: var(--steel); font-style: normal; font-size: 14px; }

/* ── login ─────────────────────────────────────────────────────────────────── */
.login-page {
  min-height: 100vh; background: var(--canvas-dark); color: var(--on-dark);
  display: grid; place-items: center; padding: var(--s-xl);
}
.login-box { width: 100%; max-width: 420px; text-align: center; }
/* O componente do hub traz o próprio cartão branco, dentro de Shadow DOM. Um
   segundo cartão em volta criaria borda dupla, então este container só posiciona
   e deixa o card do SSO ser o card. Brigar com estilo dentro de shadow root é
   frágil e quebraria a cada atualização do hub. */
.login-card {
  margin-top: var(--s-xl); text-align: left; color: var(--ink);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e4);
}

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .container { padding: 0 var(--s-md); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .h1 { font-size: 28px; }
  .topbar .container { flex-wrap: wrap; gap: var(--s-sm); }
}

/* ── filtros e barras do explorador ──────────────────────────────────────────
 * Os filtros são muitos de propósito — é o que torna a ferramenta útil em vez
 * de decorativa. Em grade automática eles se reorganizam sozinhos conforme a
 * largura, sem ficar uma fila só que empurra a tabela para fora da tela. */
.filtros {
  display: grid; gap: var(--s-sm);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-lg);
}
/* Variante compacta: o padding do token (12px vertical) foi desenhado para o
   campo de 44px do design system. Comprimir a altura sem comprimir o padding
   corta a linha de base do texto — então os dois andam juntos. */
.filtros .select, .filtros .input {
  width: 100%; height: 40px; font-size: 14px;
  padding: 0 var(--s-sm); line-height: 38px;
}
.filtros .select { padding-right: var(--s-xl); }

/* Barra de proporção na célula: deixa a ordem de grandeza visível sem exigir
   que alguém compare números longos linha a linha. */
.bar {
  display: block; height: 3px; margin-top: 5px;
  background: var(--hairline); border-radius: var(--r-full); overflow: hidden;
}
.bar-fill { display: block; height: 100%; background: var(--brand-green); }

/* ── conversa com o agente ───────────────────────────────────────────────────
 * Bolhas assimétricas: a pergunta é curta e fica contida à direita; a resposta
 * é longa e ocupa a largura de leitura. */
#conversa { display: flex; flex-direction: column; gap: var(--s-lg); margin-bottom: var(--s-xl); }
/* Coluna, não linha: a legenda ("7 consultas · 28s") é irmã da bolha e numa
   flex-row acabaria AO LADO dela em vez de embaixo. E min-width:0 impede que
   uma tabela larga dentro da resposta estoure o container para fora da tela. */
.msg { display: flex; flex-direction: column; min-width: 0; }
.msg-user { align-items: flex-end; }
.msg-user .msg-body {
  background: var(--brand-green); color: var(--on-primary);
  border-radius: var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);
  padding: var(--s-sm) var(--s-lg); max-width: min(60ch, 100%); font-weight: 500;
}
.msg-agent { align-items: flex-start; }
.msg-agent .msg-body {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  padding: var(--s-lg) var(--s-xl); max-width: min(90ch, 100%); min-width: 0;
}
.msg-agent .md h2 { font-size: 20px; margin-top: var(--s-lg); }
.msg-agent .md h3 { font-size: 16px; }
.msg-agent .callout { max-width: min(90ch, 100%); }
.msg-agent .md table { font-size: 13px; }
.msg-agent .md .table-wrap { max-width: 100%; }

.msg-progress {
  display: flex; align-items: center; gap: var(--s-sm);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-sm) var(--s-lg);
  color: var(--steel); font-size: 14px;
}
.pulse {
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--brand-green); animation: pulsar 1.2s ease-in-out infinite;
}
@keyframes pulsar { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none } }

.sugestoes { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-bottom: var(--s-xl); }
.sugestao {
  font-family: var(--font); font-size: 13px; text-align: left;
  background: transparent; color: var(--slate); cursor: pointer;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-full);
  padding: var(--s-xs) var(--s-md); max-width: 46ch;
}

.chat-form { display: flex; gap: var(--s-sm); align-items: flex-end; }
.chat-input {
  flex: 1; height: auto; min-height: 56px; resize: vertical;
  font-family: var(--font); line-height: 1.5; padding: var(--s-sm) var(--s-md);
}