/* ═══════════════════════════════════════════════════════════════
   TOKENS.CSS — sistema visual do X4DBAOps (fonte da verdade)

   Nenhum componente deve trazer cor literal. Quem precisa de cor
   consome uma variável daqui.

   MIGRAÇÃO SEM BIG BANG
   O app tem 2.377 linhas de CSS e 49 arquivos JS escritos contra os
   tokens antigos (--bg-950, --text-1, --brand-primary…). Em vez de
   reescrever tudo, os tokens antigos passam a DERIVAR dos novos, no
   fim deste arquivo. Trocar um valor aqui muda o app inteiro.

   Ao migrar um componente, troque --bg-850 por --surface e assim por
   diante. Enquanto não migrar, ele continua funcionando.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Neutros ────────────────────────────────────────────────
     Escala única, do papel à tinta. Os nomes descrevem o papel na
     interface, não o tom — assim o tema claro reusa os mesmos. */
  --ink:            #0C111B;   /* texto máximo / fundo no escuro   */
  --ink-2:          #2A3342;
  --ink-3:          #5A6474;
  --ink-4:          #8A93A3;
  --hairline:       #E3E7EE;   /* a única divisória que usamos     */
  --paper:          #F7F8FA;
  --paper-2:        #FAFBFC;
  --white:          #FFFFFF;

  /* ── Superfícies (tema escuro, o padrão do app) ───────────── */
  --canvas:         #0C111B;   /* fundo da aplicação               */
  --surface:        #111826;   /* cartões, painéis                 */
  --surface-2:      #151C2A;   /* item ativo, cabeçalho de tabela  */
  --surface-3:      #1A2233;   /* campos, trilhas de gráfico       */
  --line:           #20293A;   /* hairline no escuro               */
  --line-soft:      #182032;

  /* ── Texto ─────────────────────────────────────────────────── */
  --fg:             #DCE2EC;   /* corpo                            */
  --fg-2:           #8994A8;   /* secundário, rótulos              */
  --fg-3:           #808BA0;   /* terciário, metadados — 4,5:1 até a --surface-3 */

  /* ── Acento único ───────────────────────────────────────────
     Uma cor de marca por tela. Se precisar de uma segunda para
     distinguir algo, o problema é de hierarquia, não de paleta. */
  --accent:         #2F5BEA;
  --accent-2:       #6E8FF2;
  --accent-3:       #AFC0F7;
  --accent-dark:    #7FA3FF;   /* sobre fundo escuro               */
  --accent-soft:    rgba(47, 91, 234, .12);
  --accent-line:    rgba(47, 91, 234, .30);

  /* ── Cor de módulo ──────────────────────────────────────────
     Botão primário, aba ativa, item ativo do menu e foco de campo.
     O padrão é o azul da marca; cada engine troca pela sua cor
     oficial via .eng-* (fim deste arquivo). --module-text é a versão
     legível como texto; --module-soft, o fundo do item ativo. */
  --module-accent:  #2F5BEA;
  --module-text:    #6E8FF2;
  --module-soft:    rgba(47, 91, 234, .14);

  /* ── Severidade ─────────────────────────────────────────────
     Nunca decoram. Vermelho na tela significa ação pendente. */
  --critical:       #E86060;   /* #D14343 não passava de 4,5:1 */
  --critical-soft:  rgba(232, 96, 96, .12);
  --critical-line:  rgba(232, 96, 96, .32);
  --warning:        #E08A1E;
  --warning-soft:   rgba(224, 138, 30, .12);
  --warning-line:   rgba(224, 138, 30, .30);
  --healthy:        #0E9F8A;
  --healthy-soft:   rgba(14, 159, 138, .12);
  --healthy-line:   rgba(14, 159, 138, .30);
  --info:           #2F5BEA;
  --info-soft:      rgba(47, 91, 234, .12);

  /* ── Tipografia ─────────────────────────────────────────────
     Duas famílias. Interface numa, tudo que é dado na outra —
     número, SQL, log, identificador. A troca de família é o sinal
     de que aquilo veio da máquina, não da redação. */
  --font-ui:   'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Cinco degraus. Mais que isso vira ruído. */
  --t-module:  32px;   /* título de módulo         600 */
  --t-block:   19px;   /* título de bloco          600 */
  --t-body:    15px;   /* corpo                    400 */
  --t-label:   12px;   /* rótulo de métrica        500 caixa alta */
  --t-meta:    11px;   /* metadado em mono         400 */

  --lh-tight:  1.25;
  --lh-body:   1.6;
  --ls-label:  .14em;  /* rótulo de métrica        */
  --ls-group:  .16em;  /* cabeçalho de grupo       */

  /* Valor grande de KPI e sua unidade */
  --t-value:   30px;
  --t-unit:    .6em;   /* sempre 60% do valor, em cinza */

  /* ── Espaço, raio, traço ────────────────────────────────────
     Múltiplos de 4. Separação por hairline, não por sombra. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --r-sm: 2px;
  --r:    3px;
  --r-md: 4px;

  --stroke: 1.5px;     /* traço dos ícones */

  /* Sombra praticamente inexistente — só onde algo flutua de fato */
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .35);

  /* ═══════════════════════════════════════════════════════════
     COMPATIBILIDADE — tokens antigos derivando dos novos.
     ═══════════════════════════════════════════════════════════ */
  --compat: 1;
}

/* ═══════════════════════════════════════════════════════════════
   TEMA CLARO

   O app é dark-first: o bloco acima define o tema escuro e este
   redefine os mesmos tokens. Como todo componente consome token, um
   bloco resolve o app inteiro — antes, cada componente precisava da
   sua própria regra [data-theme="light"], e quem esquecia deixava
   cartão escuro sobre página clara.

   As cores de severidade não são as mesmas dos dois lados: #E08A1E
   sobre branco dá contraste de 2,5:1, ilegível. Aqui elas escurecem
   o suficiente para passar de 4,5:1.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --canvas:         #F7F8FA;
  --surface:        #FFFFFF;
  --surface-2:      #F7F8FA;
  --surface-3:      #EEF1F6;
  --line:           #E3E7EE;
  --line-soft:      #EDF0F5;

  --fg:             #0C111B;
  --fg-2:           #5A6474;
  --fg-3:           #636C7E;   /* #8A93A3 dava 3:1 sobre branco */

  --accent:         #2449C4;   /* escurece para contrastar com branco */
  --accent-2:       #2F5BEA;
  --accent-3:       #6E8FF2;
  --accent-dark:    #1D3A9E;
  --accent-soft:    rgba(47, 91, 234, .08);
  --accent-line:    rgba(47, 91, 234, .22);

  --module-text:    #2449C4;
  --module-soft:    rgba(47, 91, 234, .08);

  --critical:       #C13333;
  --critical-soft:  rgba(193, 51, 51, .08);
  --critical-line:  rgba(193, 51, 51, .22);
  --warning:        #9C5E0E;   /* laranja claro some no branco; #A8650F dava 4,2:1 no chip */
  --warning-soft:   rgba(156, 94, 14, .08);
  --warning-line:   rgba(156, 94, 14, .22);
  --healthy:        #0B7D6C;
  --healthy-soft:   rgba(11, 125, 108, .08);
  --healthy-line:   rgba(11, 125, 108, .22);
  --info:           #2449C4;
  --info-soft:      rgba(47, 91, 234, .08);

  --shadow-pop:     0 8px 24px rgba(12, 17, 27, .12);
}

:root {
  /* ═══════════════════════════════════════════════════════════
     Continuação da compatibilidade — tokens antigos derivando dos
     novos. Vale para os dois temas, porque aponta para variável.
     Mantém os 49 arquivos JS e as 2.377 linhas de CSS existentes
     funcionando enquanto a migração acontece componente a
     componente. Não adicione nada aqui; migre para os de cima.
     ═══════════════════════════════════════════════════════════ */

  --bg-750: #1E2739;
  --bg-700: #222C40;
  --bg-600: #2A3548;
  --bg-500: #333F55;
  --bg-light: var(--paper);
  --border-m: #2A3548;
  --border-l: #3A4459;

  --brand-navy:    var(--ink);
  --brand-primary: var(--accent);
  --brand-dark:    #2449C4;
  --brand-bright:  var(--accent-2);
  --brand-soft:    var(--accent-soft);
  --secondary:     var(--accent-2);
  --accent-bright: var(--healthy);
  --ps:     rgba(110, 143, 242, .12);

  --mono: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   COR POR ENGINE
   Vai no container do módulo (.panel) e no <html>, que o app.js
   troca a cada navegação — o menu lateral e a barra de abas ficam
   fora do painel e precisam herdar a mesma cor. Módulo genérico
   (biblioteca, projetos, admin…) fica no azul da marca.
   ═══════════════════════════════════════════════════════════════ */
.eng-oracle   { --module-accent:#C74634; --module-text:#E8735F; --module-soft:rgba(199,70,52,.14); }
.eng-postgres { --module-accent:#336791; --module-text:#7FA8D1; --module-soft:rgba(51,103,145,.18); }
.eng-mysql    { --module-accent:#00758F; --module-text:#4FB3C9; --module-soft:rgba(0,117,143,.16); }
.eng-mssql    { --module-accent:#CC2927; --module-text:#F06A62; --module-soft:rgba(204,41,39,.14); }

/* O tema fica no <html>; a classe pode estar nele ou num descendente. */
[data-theme="light"].eng-oracle,   [data-theme="light"] .eng-oracle   { --module-text:#A63A2B; --module-soft:rgba(199,70,52,.08); }
[data-theme="light"].eng-postgres, [data-theme="light"] .eng-postgres { --module-text:#336791; --module-soft:rgba(51,103,145,.08); }
[data-theme="light"].eng-mysql,    [data-theme="light"] .eng-mysql    { --module-text:#00657C; --module-soft:rgba(0,117,143,.08); }
[data-theme="light"].eng-mssql,    [data-theme="light"] .eng-mssql    { --module-text:#B02321; --module-soft:rgba(204,41,39,.08); }

/* ═══════════════════════════════════════════════════════════════
   PRIMITIVAS
   Poucas classes, aplicáveis em qualquer módulo.
   ═══════════════════════════════════════════════════════════════ */

/* ── Foco ──────────────────────────────────────────────────────
   Navegação por teclado precisa enxergar onde está. :focus-visible
   só aparece no Tab, não no clique. Campo de texto não ganha
   contorno: a borda acende e um anel suave aparece em volta. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
[data-theme="light"] :is(button, a, select, summary, [role="tab"], [tabindex],
  input[type="checkbox"], input[type="radio"]):focus-visible {
  outline-color: var(--accent);
}

/* No menu lateral o botão ocupa a largura toda e o container rola:
   contorno por fora seria cortado nas laterais. */
#tools-rail :focus-visible { outline-offset: -2px; }

/* Borda em :where() para não ganhar de quem já define a sua
   (.m-input e textarea usam --module-accent); o anel vale para todos. */
:where(input, textarea, select):focus { border-color: var(--accent); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── Alerta ──────────────────────────────────────────────────────
   Mensagem para a pessoa, não para o desenvolvedor: título curto do
   que aconteceu e, abaixo, o que fazer. O erro técnico vai para o
   console. role="alert" para erro, role="status" para aviso. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r);
  border: 1px solid;
  font-size: 12.5px;
  line-height: 1.45;
}
.alert > .x-ico { width: 16px; height: 16px; margin-top: 1px; }
.alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert-title { font-weight: 600; color: var(--fg); }
.alert-desc  { color: var(--fg-2); }
.alert-crit { background: var(--critical-soft); border-color: var(--critical-line); }
.alert-crit > .x-ico { color: var(--critical); }
.alert-warn { background: var(--warning-soft); border-color: var(--warning-line); }
.alert-warn > .x-ico { color: var(--warning); }

/* ── Números ────────────────────────────────────────────────────
   Todo dado numérico usa tabular-nums: os dígitos ficam na mesma
   coluna e a tabela para de "dançar" ao atualizar. */
.x-num,
.x-value,
td.x-num,
.kpi-v,
.mtr td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.x-value {
  font-size: var(--t-value);
  font-weight: 600;
  line-height: 1.05;
  color: var(--fg);
  letter-spacing: -.01em;
}

/* A unidade nunca compete com o número */
.x-unit {
  font-size: var(--t-unit);
  font-weight: 500;
  color: var(--fg-3);
  margin-left: 2px;
}

/* ── Rótulo de métrica ───────────────────────────────────────── */
.x-label {
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--fg-2);
  font-family: var(--font-mono);
}

/* ── Chip de severidade ──────────────────────────────────────────
   Mono, caixa alta, pequeno. A cor carrega o significado; o texto
   repete para quem não distingue as cores. */
.x-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}

.x-chip::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.x-chip.is-critical { color: var(--critical); background: var(--critical-soft); border-color: var(--critical-line); }
.x-chip.is-warning  { color: var(--warning);  background: var(--warning-soft);  border-color: var(--warning-line);  }
.x-chip.is-healthy  { color: var(--healthy);  background: var(--healthy-soft);  border-color: var(--healthy-line);  }
.x-chip.is-info     { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-line);  }
.x-chip.is-muted    { color: var(--fg-3);     background: var(--surface-3);     border-color: var(--line);          }

/* Sem o ponto, quando o chip já vem acompanhado de ícone */
.x-chip.no-dot::before { display: none; }

/* ── Delta ───────────────────────────────────────────────────────
   Melhora é verde e aponta para baixo quando menor é melhor —
   por isso a direção vem da classe, não do sinal do número. */
.x-delta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.x-delta.is-better { color: var(--healthy); }
.x-delta.is-worse  { color: var(--critical); }
.x-delta.is-flat   { color: var(--fg-3); }
.x-delta small { color: var(--fg-3); font-weight: 400; }

/* ── Ícone ───────────────────────────────────────────────────────
   Herda a cor do texto. Cor própria só quando comunica estado. */
.x-ico {
  width: 16px; height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}
.x-ico.lg { width: 20px; height: 20px; }
.x-ico.sm { width: 14px; height: 14px; }
.x-ico.is-critical { color: var(--critical); }
.x-ico.is-warning  { color: var(--warning);  }
.x-ico.is-healthy  { color: var(--healthy);  }

/* ── Grade de cartões com efeito de tabela ───────────────────────
   O gap de 1px sobre o hairline vira a própria divisória: sem
   bordas duplicadas nem sombra. */
.x-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.x-grid > * { background: var(--surface); }

/* ── Grupos de irmãos ────────────────────────────────────────────
   Botões, chips e abas se agrupam por gap, nunca por margem
   individual — assim não sobra espaço na ponta. */
.x-row  { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.x-row.tight { gap: var(--sp-1); }
.x-row.wide  { gap: var(--sp-4); }
.x-stack { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── Tipografia aplicada ─────────────────────────────────────── */
.x-t-module { font-size: var(--t-module); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--fg); }
.x-t-block  { font-size: var(--t-block);  font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--fg); }
.x-t-body   { font-size: var(--t-body);   font-weight: 400; line-height: var(--lh-body);  color: var(--fg); }
.x-t-meta   { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--fg-3); }

/* ── Hairline ────────────────────────────────────────────────── */
.x-hr { height: 1px; background: var(--line); border: 0; margin: var(--sp-4) 0; }

/* deprecated */
/* Nomes antigos mantidos por uma versão, para código de fora deste
   repositório (ou esquecido) não perder a cor. Não use em código
   novo; a próxima versão remove este bloco. */
:root {
  --bg-950: var(--canvas);
  --bg-900: var(--surface);
  --bg-850: var(--surface-2);
  --bg-800: var(--surface-3);
  --border: var(--line);
  --text-1: var(--fg);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);
  --r6:  var(--r);
  --r8:  var(--r);
  --r10: var(--r-md);
  --r12: var(--r-md);
  --red:    var(--critical);
  --green:  var(--healthy);
  --orange: var(--warning);
  --yellow: var(--warning);
  --blue:   var(--accent);
  --purple: var(--accent-2);
  --rs:  var(--critical-soft);
  --rb:  var(--critical-line);
  --gs:  var(--healthy-soft);
  --gb:  var(--healthy-line);
  --os:  var(--warning-soft);
  --ys:  var(--warning-soft);
  --is:  var(--info-soft);
  --bls: var(--accent-soft);
  --db-c: var(--module-accent);
  --db-s: var(--module-soft);
}