/* Tokens de console administrativo — medidos na UI do Authentik (PatternFly v4)
 * em 28/08/2026, não estimados. Ver SKILL.md para a origem de cada grupo.
 *
 * COMO USAR: cole no topo do seu CSS. Depois use SEMPRE var(--c-*), nunca hex solto:
 * é o que faz tema claro/escuro funcionar sem reescrever componente nenhum. */

:root {
  /* ACENTO — troque este pela SUA cor. É o único valor saturado do sistema, e é
     o que impede a interface de virar cópia da de outra empresa.
     REGRA, não sugestão: o par acento/acento-texto precisa de ≥4,5:1, porque
     `.k-btn` põe texto de 14px sobre ele. O laranja do Authentik (#fd4b2d) dá
     3,38:1 com branco — bonito e reprovado; por isso NÃO é o padrão aqui.
     Confira o seu antes de usar: webaim.org/resources/contrastchecker */
  --c-acento: #1f3a5f;        /* ink blue do projeto -- ~11:1 com branco, sobra folgado */
  --c-acento-texto: #ffffff;

  /* SUPERFÍCIES — claro. Quatro níveis, do fundo da página ao elemento elevado.
     A hierarquia é dada por luminosidade, não por sombra: sombra pesada é o que
     faz uma UI densa parecer "inflada". */
  --c-fundo:        #f0f0f0;
  --c-superficie:   #ffffff;
  --c-superficie-2: #fafafa;
  --c-borda:        #d2d2d2;

  /* TEXTO — três pesos. Mais que isso vira ruído e ninguém acerta qual usar. */
  --c-texto:        #151515;
  --c-texto-2:      #4f5255;
  --c-texto-3:      #6a6e73;
  --c-link:         #06c;

  /* STATUS — DUAS CAMADAS, e essa distinção não é preciosismo.
     `--c-X` é para PREENCHER (ponto, barra, ícone, fundo de alerta).
     `--c-X-texto` é para ESCREVER. São valores diferentes porque a cor que fica
     boa preenchendo uma área não tem contraste como texto: #f0ab00 sobre branco
     dá 1,99:1 — reprova o mínimo de 4,5 por mais de duas vezes. O PatternFly faz
     essa separação (camadas --100 e --200) e ignorá-la é o erro mais comum ao
     copiar a paleta dele.
     Nunca use o acento para status: se o acento for vermelho e "erro" também,
     ninguém distingue marca de alarme. */
  --c-erro:          #c9190b;
  --c-alerta:        #f0ab00;
  --c-ok:            #3e8635;
  --c-info:          #2b9af3;
  --c-erro-texto:    #a30000;   /* 8,21:1 no branco */
  --c-alerta-texto:  #795600;   /* 6,68:1 */
  --c-ok-texto:      #1e4f18;   /* 9,60:1 */
  --c-info-texto:    #002952;   /* 14,59:1 */
  /* Fundos lavados das etiquetas — o que permite texto escuro sobre cor. */
  --c-erro-fundo:    #faeae8;
  --c-alerta-fundo:  #fdf5e3;
  --c-ok-fundo:      #eaf3e8;
  --c-info-fundo:    #e7f1fa;

  /* ESPAÇO — escala de 6 degraus. Use só estes; espaçamento arbitrário é o que
     faz uma tela parecer montada às pressas. */
  --e-xs: 0.25rem; --e-sm: 0.5rem; --e-md: 1rem;
  --e-lg: 1.5rem;  --e-xl: 2rem;   --e-2xl: 3rem;

  /* TIPOGRAFIA */
  --f-xs: 0.75rem; --f-sm: 0.875rem; --f-md: 1rem;
  --f-lg: 1.125rem; --f-xl: 1.25rem; --f-2xl: 1.5rem; --f-3xl: 1.75rem;
  --f-corpo: "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, helvetica, arial, sans-serif;
  --f-titulo: "Red Hat Display", var(--f-corpo);

  /* RAIO — 3px, e isso É a assinatura do estilo. A maioria das UIs modernas usa
     8–12px, que lê como "app de consumidor". 3px lê como ferramenta de trabalho.
     Se você mudar UMA coisa deste arquivo e a tela deixar de parecer um console,
     provavelmente foi esta. */
  --r: 3px;

  /* SOMBRA — discreta de propósito. Elevação aqui é sutileza, não drama. */
  --s-sm: 0 0.0625rem 0.125rem 0 rgba(3,3,3,.12), 0 0 0.125rem 0 rgba(3,3,3,.06);
  --s-md: 0 0.25rem 0.5rem 0 rgba(3,3,3,.12), 0 0 0.25rem 0 rgba(3,3,3,.06);

  /* LAYOUT */
  --l-sidebar: 15rem;
}

/* ESCURO — as superfícies, o texto E as cores de status de TEXTO mudam.
   O PatternFly também troca as de status no escuro, e é obrigatório: #c9190b
   (o vermelho de erro) sobre o card escuro dá 2,89:1 — a etiqueta "desativado",
   justamente a que precisa ser vista, seria a menos legível da tela.
   Os hex de superfície são os do Authentik, medidos. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --c-fundo:        #18191a;
    --c-superficie:   #1c1e21;
    --c-superficie-2: #212427;
    --c-borda:        #2b2e33;
    --c-texto:        #fafafa;
    --c-texto-2:      #bebebe;
    --c-texto-3:      #8a8d90;
    --c-link:         #73bcf7;
    --c-erro-texto:   #fe5142;   /* 5,15:1 no card escuro */
    --c-alerta-texto: #f0ab00;   /* 8,38:1 — no escuro a cor cheia já serve */
    --c-ok-texto:     #5ba352;   /* 5,41:1 */
    --c-info-texto:   #73bcf7;   /* 8,17:1 */
    --c-erro-fundo:   #2d1512;
    --c-alerta-fundo: #2b2411;
    --c-ok-fundo:     #16241a;
    --c-info-fundo:   #12232f;
  }
}
:root[data-tema="escuro"] {
  --c-fundo:        #18191a;
  --c-superficie:   #1c1e21;
  --c-superficie-2: #212427;
  --c-borda:        #2b2e33;
  --c-texto:        #fafafa;
  --c-texto-2:      #bebebe;
  --c-texto-3:      #8a8d90;
  --c-link:         #73bcf7;
  --c-erro-texto:   #fe5142;
  --c-alerta-texto: #f0ab00;
  --c-ok-texto:     #5ba352;
  --c-info-texto:   #73bcf7;
  --c-erro-fundo:   #2d1512;
  --c-alerta-fundo: #2b2411;
  --c-ok-fundo:     #16241a;
  --c-info-fundo:   #12232f;
}
/* Componentes de console administrativo. Depende de `tokens.css` — cole os dois.
 * Classes com prefixo `k-` para não colidir com Tailwind/Bootstrap/PatternFly. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-corpo);
  font-size: var(--f-md);
  color: var(--c-texto);
  background: var(--c-fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 500; margin: 0; }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- ESQUELETO: sidebar fixa + topo + conteúdo rolável ----------
   O conteúdo é a ÚNICA região que rola. Sidebar e topo ficam ancorados — num
   console você navega o tempo todo, e perder o menu ao rolar uma tabela de 500
   linhas é a diferença entre ferramenta e formulário. */
.k-app { display: grid; grid-template-columns: var(--l-sidebar) 1fr; min-height: 100vh; }

.k-sidebar {
  background: var(--c-superficie);
  border-right: 1px solid var(--c-borda);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.k-marca {
  display: flex; align-items: center; gap: var(--e-sm);
  padding: var(--e-md) var(--e-lg);
  font-family: var(--f-titulo); font-size: var(--f-lg); font-weight: 500;
  border-bottom: 1px solid var(--c-borda);
}
.k-marca__ponto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-acento); flex: none; }

.k-nav { padding: var(--e-sm) 0; }
.k-nav__grupo { padding: var(--e-md) var(--e-lg) var(--e-xs); font-size: var(--f-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-texto-3); }
.k-nav__item {
  display: flex; align-items: center; gap: var(--e-sm);
  padding: var(--e-sm) var(--e-lg);
  color: var(--c-texto-2); font-size: var(--f-sm);
  border-left: 3px solid transparent; cursor: pointer;
}
.k-nav__item:hover { background: var(--c-superficie-2); color: var(--c-texto); text-decoration: none; }
/* A barra à esquerda no item ativo é o padrão do console: marca posição sem
   pintar um bloco inteiro de cor, que competiria com o conteúdo. */
.k-nav__item[aria-current="page"] { color: var(--c-texto); background: var(--c-superficie-2); border-left-color: var(--c-acento); }

.k-principal { display: flex; flex-direction: column; min-width: 0; }
.k-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-md); padding: var(--e-md) var(--e-xl);
  background: var(--c-superficie); border-bottom: 1px solid var(--c-borda);
  /* Ancorado, como a sidebar. Sem isto o título e as ações somem ao rolar uma
     tabela longa -- e "só o conteúdo rola" deixa de ser verdade. */
  position: sticky; top: 0; z-index: 10;
}
.k-topo__titulo { font-size: var(--f-2xl); }
.k-topo__sub { font-size: var(--f-sm); color: var(--c-texto-3); margin-top: var(--e-xs); }
.k-conteudo { padding: var(--e-xl); flex: 1; }

/* ---------- GRADE DE CARDS ----------
   `auto-fit` + `minmax`: a grade se reorganiza sozinha, sem media query. */
.k-grade { display: grid; gap: var(--e-lg); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.k-grade--larga { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); }

.k-card {
  background: var(--c-superficie); border: 1px solid var(--c-borda);
  border-radius: var(--r); box-shadow: var(--s-sm);
  display: flex; flex-direction: column;
}
.k-card__cabeca {
  padding: var(--e-md) var(--e-lg); border-bottom: 1px solid var(--c-borda);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sm);
}
.k-card__titulo { font-size: var(--f-lg); display: flex; align-items: center; gap: var(--e-sm); }
.k-card__corpo { padding: var(--e-lg); flex: 1; }
.k-card__pe { padding: var(--e-sm) var(--e-lg); border-top: 1px solid var(--c-borda);
  font-size: var(--f-sm); color: var(--c-texto-3); }

/* ---------- NÚMERO GRANDE ----------
   Um número por card. Dois números do mesmo tamanho no mesmo card fazem o olho
   não saber qual é a resposta. */
.k-numero { font-family: var(--f-titulo); font-size: var(--f-3xl); line-height: 1.1; }
.k-numero--ok { color: var(--c-ok-texto); } .k-numero--erro { color: var(--c-erro-texto); }
.k-numero--alerta { color: var(--c-alerta-texto); }
.k-rotulo { font-size: var(--f-sm); color: var(--c-texto-3); margin-top: var(--e-xs); }

/* ---------- TABELA ----------
   Sem zebra: a linha separadora já basta e zebra briga com o realce de hover,
   que é o que a pessoa usa para não perder a linha ao ler para o lado. */
.k-tabela { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
.k-tabela th {
  text-align: left; font-weight: 600; font-size: var(--f-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-texto-3);
  padding: var(--e-sm) var(--e-md); border-bottom: 1px solid var(--c-borda); white-space: nowrap;
}
.k-tabela td { padding: var(--e-sm) var(--e-md); border-bottom: 1px solid var(--c-borda); }
.k-tabela tbody tr:hover { background: var(--c-superficie-2); }
/* Identificador técnico (uuid, hash, chave). Monoespaçada porque ninguém LÊ um
   uuid -- se compara, e coluna monoespaçada alinha os caracteres para isso.
   `--c-texto-2`, nao `--c-texto-3`: e' dado que a pessoa confere, nao legenda. */
.k-tabela .k-uuid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--f-xs); color: var(--c-texto-2); white-space: nowrap;
}
/* Número alinhado à direita e tabular: é o que faz coluna de valor ficar
   comparável de relance, em vez de exigir leitura dígito a dígito. */
.k-tabela .k-num { text-align: right; font-variant-numeric: tabular-nums; }
.k-rolagem { overflow-x: auto; }

/* ---------- ETIQUETA DE STATUS ----------
   Fundo lavado + texto na cor ESCURA (camada `-texto`), com o ponto na cor cheia.
   Pastilha sólida colorida em tabela densa vira um vitral e cansa; e a cor cheia
   como TEXTO não tem contraste (#f0ab00 no branco = 1,99:1). O fundo próprio
   também protege do hover da linha, que troca a superfície debaixo. */
.k-etiqueta {
  display: inline-flex; align-items: center; gap: var(--e-xs);
  padding: .1rem var(--e-sm); border-radius: var(--r);
  font-size: var(--f-xs); font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
/* O ponto usa a cor CHEIA (preenchimento), o texto usa a escura. Não depender só
   de cor importa: ~8% dos homens não distinguem verde de vermelho, e o ponto
   ajuda a varredura rápida mesmo para quem distingue. */
.k-etiqueta::before {
  content: ""; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--ponto, currentColor); flex: none;
}
.k-etiqueta--ok     { color: var(--c-ok-texto);     background: var(--c-ok-fundo);     --ponto: var(--c-ok); }
.k-etiqueta--erro   { color: var(--c-erro-texto);   background: var(--c-erro-fundo);   --ponto: var(--c-erro); }
.k-etiqueta--alerta { color: var(--c-alerta-texto); background: var(--c-alerta-fundo); --ponto: var(--c-alerta); }
.k-etiqueta--info   { color: var(--c-info-texto);   background: var(--c-info-fundo);   --ponto: var(--c-info); }
.k-etiqueta--neutra { color: var(--c-texto-2);      background: var(--c-fundo);        --ponto: var(--c-texto-3); }

/* ---------- BOTÕES ---------- */
.k-btn {
  font: inherit; font-size: var(--f-sm); cursor: pointer;
  padding: var(--e-sm) var(--e-md); border-radius: var(--r);
  border: 1px solid transparent; background: var(--c-acento); color: var(--c-acento-texto);
}
.k-btn:hover { filter: brightness(1.08); }
.k-btn--secundario { background: transparent; color: var(--c-link); border-color: currentColor; }
.k-btn--perigo { background: var(--c-erro); color: #fff; }
.k-btn:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }

/* ---------- FORMULÁRIO ---------- */
.k-campo { display: flex; flex-direction: column; gap: var(--e-xs); margin-bottom: var(--e-md); }
.k-campo label { font-size: var(--f-sm); color: var(--c-texto-2); }
.k-campo input, .k-campo select, .k-campo textarea {
  font: inherit; font-size: var(--f-sm); padding: var(--e-sm);
  background: var(--c-fundo); color: var(--c-texto);
  border: 1px solid var(--c-borda); border-bottom-width: 2px; border-radius: var(--r);
}
.k-campo input:focus, .k-campo select:focus, .k-campo textarea:focus {
  outline: none; border-bottom-color: var(--c-link);
}
.k-ajuda { font-size: var(--f-xs); color: var(--c-texto-3); }

/* ---------- VAZIO ---------- */
.k-vazio { text-align: center; padding: var(--e-2xl) var(--e-lg); color: var(--c-texto-3); }
.k-vazio h3 { color: var(--c-texto); margin-bottom: var(--e-sm); }

@media (max-width: 60rem) {
  .k-app { grid-template-columns: 1fr; }
  .k-sidebar { position: static; height: auto; }
  .k-conteudo { padding: var(--e-md); }
}