/* ═══════════════════════════════════════════════════════════════════════════════
   O SISTEMA DE CONTROLES DO CONSOLE

   ── Por que este arquivo existe ────────────────────────────────────────────────
   O console herdava `components.css` do site. Lá `.input` tem 44px de altura e
   `--radius: 16px` — formas grandes e macias, certas para uma página onde alguém
   está decidindo se fica. Aqui elas produziram exatamente o que se viu: campos
   enormes em pílula ao lado de um `<select>` nativo pequeno, um botão vermelho em
   pílula, e nada alinhado com nada.

   E o `<select>` era o pior: ele não obedece a padding nem a altura como um input
   comum, então mesmo com a MESMA classe saía com outro tamanho.

   ── A régua ────────────────────────────────────────────────────────────────────
   Um painel de análise é lido em varredura, não em leitura. Isso decide tudo aqui:
   uma ALTURA DE CONTROLE só (34px), um raio só (8px), uma escala tipográfica curta,
   números tabulares em toda coluna que se compara, e nenhuma cor que não signifique
   estado.

   Carregado DEPOIS de components.css, e por isso vence sem precisar de !important.
   O escopo `.console` garante que nada disto vaze para a tela de barreira. */

.console {
    /* A escala do console. Os tokens do site continuam valendo para cor; o que muda
       é forma e ritmo — que é o que separa um painel de trabalho de uma landing. */
    --ctl-h: 34px;
    --ctl-r: 8px;
    --ctl-fs: 0.8125rem;

    --pad-x: var(--space-3);
    --row-h: 34px;

    font-size: var(--ctl-fs);
}

/* ── Controles: um só tamanho, um só desenho ─────────────────────────────────── */

.console .input,
.console .textarea,
.console select,
.console .btn {
    block-size: var(--ctl-h);
    min-block-size: var(--ctl-h);
    padding: 0 var(--pad-x);
    border-radius: var(--ctl-r);
    font-size: var(--ctl-fs);
    font-family: inherit;
    line-height: calc(var(--ctl-h) - 2px);
    transition: border-color 120ms ease-out, background 120ms ease-out, box-shadow 120ms ease-out;
}

.console .input,
.console .textarea,
.console select {
    inline-size: auto;
    background: var(--bg-raised);
    border: 1px solid var(--line-strong);
    color: var(--text);
}

.console .textarea,
.console textarea.input {
    block-size: auto;
    padding: var(--space-2) var(--pad-x);
    line-height: 1.5;
    resize: vertical;
}

.console .input:focus,
.console .textarea:focus,
.console select:focus {
    outline: none;
    border-color: var(--brand-500);
    /* Anel em vez de mudar a espessura da borda: mudar a borda desloca o conteúdo
       um pixel e a linha inteira treme ao focar. */
    /* Valor fixo e não `oklch(from var(--brand-500) …)`: cor relativa é sintaxe
       recente e não é usada em nenhum outro CSS deste projeto. Um anel de foco que
       some num navegador um pouco mais velho é acessibilidade perdida em silêncio. */
    box-shadow: 0 0 0 3px oklch(0.55 0.19 27 / 0.18);
}

/* O <select> é a peça que quebrava o alinhamento: o desenho nativo ignora altura e
   padding. Tirando a aparência nativa e desenhando a seta, ele passa a ser um
   controle como os outros. */
.console select {
    appearance: none;
    padding-inline-end: calc(var(--pad-x) + 14px);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: right 14px center, right 9px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ── Botões ──────────────────────────────────────────────────────────────────── */

.console .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.console .btn-primary {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: oklch(0.99 0 0);
}

.console .btn-primary:hover:not(:disabled) { background: var(--brand-500); border-color: var(--brand-500); }

.console .btn-secondary {
    background: var(--bg-raised);
    border-color: var(--line-strong);
    color: var(--text);
}

.console .btn-secondary:hover:not(:disabled) { background: var(--bg-sunken); border-color: var(--brand-400); }

.console .btn-ghost { background: none; border-color: transparent; color: var(--text-muted); }
.console .btn-ghost:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text); }

.console .btn-danger { background: var(--danger-600); border-color: var(--danger-600); color: oklch(0.99 0 0); }
.console .btn-danger:hover:not(:disabled) { background: var(--danger-500); border-color: var(--danger-500); }

.console .btn-sm { --ctl-h: 26px; padding: 0 10px; font-size: 0.75rem; }

.console .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Tipografia ──────────────────────────────────────────────────────────────── */

/* Uma escala curta e previsível. A do site usa clamp() com vw, o que faz o título
   mudar de tamanho conforme a janela — bom numa página de vitrine, ruim num painel
   que se usa em duas larguras diferentes lado a lado. */
.console h1 { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.console h2 { font-size: 1rem;     font-weight: 650; letter-spacing: -0.005em; }
.console h3 { font-size: 0.875rem; font-weight: 650; }

.console .muted { color: var(--text-muted); }

/* Números em qualquer coluna que se compare. Sem isto, "1.240" e "9.999" têm
   larguras diferentes e a coluna vira uma serra. */
.console .tabular,
.console .table td,
.console .table th { font-variant-numeric: tabular-nums; }

/* ── Tabela ──────────────────────────────────────────────────────────────────── */

.console .table { font-size: var(--ctl-fs); }

.console .table th {
    padding: var(--space-2) var(--pad-x);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle);
    background: var(--bg-sunken);
    border-block-end: 1px solid var(--line-strong);
}

.console .table td {
    padding: 0 var(--pad-x);
    block-size: var(--row-h);
    border-block-end: 1px solid var(--line);
    vertical-align: middle;
}

/* Colunas de número e de data alinham à DIREITA. É o que permite comparar ordens de
   grandeza descendo a coluna com o olho, sem ler dígito por dígito. */
.console .table td.tabular,
.console .table th.tabular { text-align: end; }

/* Primeira coluna é a identidade da linha: ela ancora a leitura e não deve competir
   com o resto por peso. */
.console .table td:first-child { color: var(--text-strong); }

.console .table tbody tr:hover { background: var(--bg-sunken); }

/* ── Endereço IP ─────────────────────────────────────────────────────────────── */

/* Estava vermelho e sublinhado, o que num painel de log se lê como ERRO — em toda
   linha, inclusive nas bem-sucedidas. Agora é uma pastilha neutra que só reage ao
   passar o mouse: continua clicável e para de gritar. */
.console .ip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: var(--bg-sunken);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 120ms ease-out, background 120ms ease-out;
}

.console .ip:hover { border-color: var(--brand-400); background: var(--bg-raised); }

/* O `.link` genérico também não é vermelho sublinhado por padrão: dentro de uma
   tabela isso pinta a tela inteira. */
.console .link { color: var(--brand-700); text-decoration: none; }
.console .link:hover { text-decoration: underline; }

/* ── Barra superior ──────────────────────────────────────────────────────────── */

/* Faltava um caminho de volta ao site que não estivesse perdido no rodapé da
   lateral. Aqui ele fica fixo no topo, ao lado de quem está usando — os dois lugares
   onde a mão procura por eles. */
.console-top {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-6);
    block-size: 52px;
    /* Opaca. Uma barra translúcida sobre uma tabela deixa as duas metade legíveis —
       e aqui o que passa por baixo são linhas de log que se está tentando ler. */
    background: var(--bg-raised);
    border-block-end: 1px solid var(--line);
}

.console-crumb { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--ctl-fs); }
.console-crumb strong { color: var(--text-strong); font-weight: 600; }

.console-top-right { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }

.console-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    block-size: 28px;
    border-radius: var(--ctl-r);
    border: 1px solid var(--line-strong);
    background: var(--bg-raised);
    color: var(--text);
    text-decoration: none;
    font-size: var(--ctl-fs);
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.console-back:hover { background: var(--bg-sunken); border-color: var(--brand-400); }

.console-user { display: flex; align-items: center; gap: var(--space-2); }

.console-avatar {
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 50%;
    background: var(--brand-600);
    color: oklch(0.99 0 0);
    font-size: 0.6875rem;
    font-weight: 700;
}

.console-user-name { font-size: var(--ctl-fs); font-weight: 600; line-height: 1; }
.console-user-role { font-size: 0.6875rem; color: var(--text-muted); line-height: 1.2; }

/* ── Lateral ─────────────────────────────────────────────────────────────────── */

.console { grid-template-columns: 14rem minmax(0, 1fr); }

.console-nav { padding: var(--space-4) var(--space-3); gap: var(--space-3); }

.console-brand { font-size: 0.9375rem; gap: 8px; padding-inline: var(--space-2); }
.console-brand small { display: block; font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }

.console-group {
    padding: var(--space-3) var(--space-2) 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
}

.console-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px var(--space-2) 6px var(--space-3);
    font-size: var(--ctl-fs);
    border-radius: 6px;
}

.console-link-icon { inline-size: 1rem; text-align: center; opacity: 0.8; }

/* O miolo já não precisa do cabeçalho do topo: ele está na barra. */
.console-main { padding: var(--space-5) var(--space-6) var(--space-8); }

.console-head { margin-block-end: var(--space-4); }
.console-head p { font-size: var(--ctl-fs); margin: 2px 0 0; }

/* ── Densidade de bloco ──────────────────────────────────────────────────────── */

.console .card { padding: var(--space-4); border-radius: var(--radius-sm); }
.console .filters { gap: var(--space-2); margin-block-end: var(--space-3); }
.console .filters .input { min-inline-size: 11rem; }
.console .paginator { margin-block-start: var(--space-2); font-size: var(--ctl-fs); }

.console .tag { font-size: 0.6875rem; padding: 1px 6px; }

.console .metric { padding: var(--space-3); border-radius: var(--radius-sm); }
.console .metric-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
.console .metric-value { font-size: 1.375rem; }

.console .hero-card { border-radius: var(--radius-sm); padding: var(--space-4); }
.console .hero-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; }
.console .hero-value { font-size: 2rem; }
.console .hero-foot { font-size: 0.75rem; }

.console .segment { block-size: var(--ctl-h); padding: 0 var(--space-3); }
.console .segmented { border-radius: var(--ctl-r); }

/* A coluna do conteúdo. A barra superior gruda no topo DELA, então a lateral
   mantém a altura da janela e a tabela rola por baixo da barra. */
.console-column { display: flex; flex-direction: column; min-inline-size: 0; }

@media (max-width: 60rem) {
    .console-top { padding-inline: var(--space-4); }
    .console-main { padding-inline: var(--space-4); }
    .console-back span { display: none; }
}