/* ═══════════════════════════════════════════════════════════════════════════════
   O TEMA DO CONSOLE — claro, denso, e com escala controlável

   ── Claro, como o site ─────────────────────────────────────────────────────────
   Eu tinha trocado por escuro sem ninguém pedir, inferindo de uma referência de
   ESTRUTURA. Foi erro: a referência era de organização — menus, controles, seleção
   de tempo, severidade, densidade — e nada disso depende de fundo escuro.

   Então: mesma família de superfícies do site, e o que muda aqui é DENSIDADE e
   SIGNIFICADO DE COR. Num painel de trabalho, cor é estado; no site, cor é ênfase.

   ── A escala ───────────────────────────────────────────────────────────────────
   `--ui-scale` multiplica o tamanho base do documento. Como TODA medida daqui é
   derivada dele (rem para tipo e espaço, e altura de controle também em rem), mexer
   num número move o console inteiro de forma coerente — e não só a fonte, deixando
   os controles do mesmo tamanho e o texto estourando a caixa.

   Limitada a 0,2×–5×, que é o intervalo pedido. Além disso não é acessibilidade, é
   layout quebrado: a 6× uma tabela de dez colunas não cabe em tela nenhuma. */

:root {
    --ui-scale: 1;
}

html { font-size: calc(16px * var(--ui-scale)); }

.console {
    /* Superfícies claras, com pouca distância entre os níveis: o que separa painéis
       aqui é a LINHA, não o degrau de luminosidade — degraus fortes criam listras que
       competem com o dado. */
    --bg:          oklch(0.982 0.008 240);
    --bg-raised:   oklch(1 0 0);
    --bg-sunken:   oklch(0.962 0.012 240);
    --bg-overlay:  oklch(0.945 0.016 240);
    --bg-inset:    oklch(0.955 0.014 240);

    --line:        oklch(0.895 0.018 240);
    --line-strong: oklch(0.800 0.030 240);

    --text-strong: oklch(0.22 0.035 255);
    --text:        oklch(0.30 0.035 255);
    --text-muted:  oklch(0.50 0.030 255);
    --text-subtle: oklch(0.62 0.028 255);

    /* ── Severidade ──────────────────────────────────────────────────────────
       Uma cor por nível, e SÓ para nível. Assim que uma delas virar enfeite em outro
       lugar, ela deixa de significar severidade em todos os lugares.

       Calibradas para fundo CLARO: luminosidade baixa o bastante para o texto passar
       em contraste, e a distinção entre níveis vem do matiz, não do brilho. */
    --sev-debug:    oklch(0.55 0.02 255);
    --sev-info:     oklch(0.52 0.15 245);
    --sev-notice:   oklch(0.50 0.13 200);
    --sev-ok:       oklch(0.48 0.14 150);
    --sev-warn:     oklch(0.52 0.14 75);
    --sev-error:    oklch(0.52 0.20 27);
    --sev-critical: oklch(0.46 0.22 345);

    background: var(--bg);
    color: var(--text);
}

body:has(.console) { background: oklch(0.982 0.008 240); }

/* ── Altura de controle, proporcional ───────────────────────────────────────────
   Em rem e não em px: 34px fixo com a escala em 2× daria um campo do tamanho de
   antes com fonte do dobro — texto estourando a caixa. */
.console {
    --ctl-h: 2.125rem;
    --ctl-r: 0.375rem;
    --ctl-fs: 0.8125rem;
    --row-h: 2.125rem;
}

/* ── Controle de escala, na barra ──────────────────────────────────────────────*/

.scale-control {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding-inline: 0.5rem;
    border-inline: 1px solid var(--line);
}

.scale-btn {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.25rem;
    background: var(--bg-raised);
    color: var(--text);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.scale-btn:hover:not(:disabled) { background: var(--bg-overlay); border-color: var(--brand-400); }
.scale-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* O valor é clicável e volta para 1×. Um controle de zoom sem "voltar ao normal" é
   um controle do qual não se sai — e ninguém acerta 1,00 arrastando. */
.scale-value {
    min-inline-size: 2.75rem;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
}

.scale-value:hover { color: var(--text); }

/* ── Severidade aplicada ────────────────────────────────────────────────────────
   Barra na borda inicial da linha, não fundo colorido: com trinta linhas, trinta
   fundos coloridos é uma tela que ninguém lê. A barra dá a leitura da COLUNA — dá
   para ver a distribuição de gravidade descendo o olho pela margem. */

.sev { --sev: var(--sev-info); }
.sev-debug    { --sev: var(--sev-debug); }
.sev-info     { --sev: var(--sev-info); }
.sev-notice   { --sev: var(--sev-notice); }
.sev-ok       { --sev: var(--sev-ok); }
.sev-warn     { --sev: var(--sev-warn); }
.sev-error    { --sev: var(--sev-error); }
.sev-critical { --sev: var(--sev-critical); }

.console .table tr.sev td:first-child {
    box-shadow: inset 0.1875rem 0 0 var(--sev);
}

.sev-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0 0.375rem;
    border-radius: 0.1875rem;
    background: color-mix(in oklab, var(--sev) 18%, transparent);
    color: var(--sev);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Ajustes do tema escuro sobre o que já existia ─────────────────────────────*/

.console .table th { background: var(--bg-sunken); color: var(--text-subtle); }
.console .table-wrap { background: var(--bg-raised); border-color: var(--line); }
.console .table tbody tr:hover { background: var(--bg-overlay); }

/* As linhas marcadas eram fundo amarelo/vermelho claro — invisível no escuro e,
   pior, luminoso demais. Aqui a marca é uma tintura tênue do próprio matiz. */
.console .table tr.row-warn td { background: color-mix(in oklab, var(--sev-warn) 10%, transparent); }
.console .table tr.row-fail td { background: color-mix(in oklab, var(--sev-error) 12%, transparent); }

.console .card { background: var(--bg-raised); border: 1px solid var(--line); }
.console-nav { background: var(--bg-sunken); border-inline-end-color: var(--line); }
.console-top { background: var(--bg-sunken); border-block-end-color: var(--line); }

.console-link.active { background: var(--brand-50); color: var(--brand-700); }
.console-link:hover { background: var(--bg-overlay); }

.console .hero-card {
    background: linear-gradient(160deg, var(--bg-raised), var(--bg-inset));
    border-color: var(--line);
}

.console .metric { background: var(--bg-raised); border-color: var(--line); }

.console .attention { background: color-mix(in oklab, var(--sev-warn) 8%, var(--bg-raised)); border-color: color-mix(in oklab, var(--sev-warn) 35%, transparent); }
.console .attention-head { color: var(--sev-warn); border-block-end-color: color-mix(in oklab, var(--sev-warn) 25%, transparent); }
.console .attention-item { border-block-end-color: var(--line); }
.console .attention-item:hover { background: var(--bg-overlay); }
.console .attention-dot { background: var(--sev-warn); }

.console .panel-empty { border-color: var(--line); }
.console .panel-fail { background: color-mix(in oklab, var(--sev-error) 12%, var(--bg-raised)); border-color: color-mix(in oklab, var(--sev-error) 40%, transparent); }

.console .skeleton-row {
    background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--bg-overlay) 37%, var(--bg-sunken) 63%);
    background-size: 400% 100%;
}

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

.console .tag { background: var(--bg-sunken); border-color: var(--line-strong); color: var(--text-muted); }
.console .tag-admin { background: color-mix(in oklab, var(--brand-500) 22%, transparent); border-color: var(--brand-500); color: var(--brand-700); }
.console .tag-moderator { background: color-mix(in oklab, var(--sev-info) 20%, transparent); border-color: var(--sev-info); color: var(--sev-info); }
.console .tag-online { background: color-mix(in oklab, var(--sev-ok) 20%, transparent); border-color: var(--sev-ok); color: var(--sev-ok); }
.console .tag-warn { background: color-mix(in oklab, var(--sev-warn) 20%, transparent); border-color: var(--sev-warn); color: var(--sev-warn); }
.console .tag-staff { background: color-mix(in oklab, var(--sev-critical) 20%, transparent); border-color: var(--sev-critical); color: var(--sev-critical); }
.console .tag-status-active { background: color-mix(in oklab, var(--sev-ok) 18%, transparent); border-color: var(--sev-ok); color: var(--sev-ok); }
.console .tag-status-pending_verification { background: color-mix(in oklab, var(--sev-warn) 18%, transparent); border-color: var(--sev-warn); color: var(--sev-warn); }
.console .tag-status-suspended,
.console .tag-status-banned { background: color-mix(in oklab, var(--sev-error) 18%, transparent); border-color: var(--sev-error); color: var(--sev-error); }

.console .segment { background: var(--bg-raised); color: var(--text-muted); }
.console .segment:hover { background: var(--bg-overlay); }
.console .segment.is-on { background: var(--brand-600); color: oklch(0.99 0 0); }

.console .prompt { background: var(--bg-overlay); }
.console .console-back { background: var(--bg-raised); border-color: var(--line-strong); color: var(--text); }
.console .console-back:hover { background: var(--bg-overlay); }

.console .live-badge { background: var(--bg-raised); border-color: var(--line); }
.console .saved-sql { background: var(--bg-sunken); }

/* ═══════════════════════════════════════════════════════════════════════════════
   O EXPLORADOR DE CONSULTAS

   Três regiões: esquema à esquerda, editor no meio, resultado embaixo. A da esquerda
   tem largura FIXA e as outras dividem o resto — sem isso, uma tabela de resultado
   larga empurraria a árvore de esquema para fora da tela justamente quando ela é
   mais necessária. */

.explorer {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 0;
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-6)) calc(-1 * var(--space-8));
    min-block-size: calc(100vh - 3.25rem);
}

@media (max-width: 70rem) {
    /* A árvore vira uma faixa no topo. Numa largura pequena, dezesseis rem de esquema
       ao lado da grade de resultado deixa as duas ilegíveis. */
    .explorer { grid-template-columns: minmax(0, 1fr); }
    .explorer-side { max-block-size: 14rem; border-inline-end: none; border-block-end: 1px solid var(--line); }
}

.explorer-side {
    background: var(--bg-sunken);
    border-inline-end: 1px solid var(--line);
    overflow: auto;
}

.explorer-side-head {
    position: sticky;
    inset-block-start: 0;
    padding: 0.625rem 0.75rem;
    background: var(--bg-sunken);
    border-block-end: 1px solid var(--line);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

.explorer-main { display: flex; flex-direction: column; min-inline-size: 0; }

/* ── A árvore ────────────────────────────────────────────────────────────────── */

.schema-tree { padding: 0.375rem 0; font-size: 0.75rem; }

.schema-tree summary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    cursor: pointer;
    color: var(--text-muted);
    /* Marcador nativo escondido: ele é um triângulo do sistema, de tamanho e cor que
       não acompanham nem a escala nem o tema. */
    list-style: none;
    white-space: nowrap;
}

.schema-tree summary::-webkit-details-marker { display: none; }
.schema-tree summary:hover { background: var(--bg-overlay); color: var(--text); }

.schema-caret { display: inline-block; inline-size: 0.6rem; transition: transform 140ms ease-out; }
.schema-tree details[open] > summary > .schema-caret { transform: rotate(90deg); }

.schema-icon { opacity: 0.7; }
.schema-db > summary { color: var(--text); font-weight: 600; }
.schema-active { color: var(--sev-ok); margin-inline-start: auto; font-size: 0.5rem; }

.schema-ns { padding-inline-start: 0.75rem; }
.schema-table { padding-inline-start: 0.75rem; }

/* O nome da tabela é o alvo que INSERE; a seta ao lado só abre. Dois alvos porque são
   duas intenções, e juntá-las faria explorar o esquema escrever texto no editor. */
.schema-name { color: var(--text); }
.schema-name:hover { color: var(--brand-700); text-decoration: underline; }

.schema-cols { padding-inline-start: 1.5rem; padding-block-end: 0.25rem; }

.schema-col {
    display: flex;
    inline-size: 100%;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0.5rem;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    cursor: pointer;
    text-align: start;
}

.schema-col:hover { background: var(--bg-overlay); color: var(--text); }
.schema-type { color: var(--text-subtle); opacity: 0.8; }

/* ── Abas do editor ──────────────────────────────────────────────────────────── */

.editor-tabs {
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--bg-sunken);
    border-block-end: 1px solid var(--line);
    overflow-x: auto;
}

.editor-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border: none;
    border-block-end: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}

.editor-tab:hover { background: var(--bg-overlay); color: var(--text); }
.editor-tab.is-on { color: var(--text-strong); border-block-end-color: var(--brand-500); background: var(--bg); }

.editor-tab-x { opacity: 0.5; padding: 0 0.125rem; }
.editor-tab-x:hover { opacity: 1; color: var(--sev-error); }

.editor-tab-add { padding: 0.4375rem 0.625rem; border: none; background: none; color: var(--text-muted); cursor: pointer; }
.editor-tab-add:hover { background: var(--bg-overlay); color: var(--text); }

/* ── Barra do editor ─────────────────────────────────────────────────────────── */

.editor-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--line);
    font-size: 0.75rem;
}

.editor-source { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text); font-weight: 600; }
.editor-hint { font-size: 0.6875rem; }
.editor-bar-right { margin-inline-start: auto; display: flex; gap: 0.5rem; }

.editor-area {
    inline-size: 100%;
    padding: 0.75rem;
    border: none;
    border-block-end: 1px solid var(--line);
    background: var(--bg-sunken);
    color: var(--text-strong);
    font-size: 0.8125rem;
    line-height: 1.6;
    resize: vertical;
    /* Tabulação de 2 e não de 8: SQL indentado com tabulação de oito colunas some da
       tela na terceira subconsulta. */
    tab-size: 2;
}

.editor-area:focus { outline: none; background: var(--bg); }

.editor-examples {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--line);
    font-size: 0.75rem;
}

.chip {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg-raised);
    color: var(--text-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: border-color 120ms ease-out, color 120ms ease-out;
}

.chip:hover { border-color: var(--brand-400); color: var(--text); }

/* ── Erro e resultado ────────────────────────────────────────────────────────── */

.query-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: color-mix(in oklab, var(--sev-error) 12%, transparent);
    border-block-end: 1px solid color-mix(in oklab, var(--sev-error) 35%, transparent);
    font-size: 0.75rem;
}

.result-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.result-stats { display: flex; gap: 1rem; color: var(--text-muted); }
.result-stats strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.result-head .btn { margin-inline-start: auto; }

.result-grid { margin-inline: 0.75rem; max-block-size: 28rem; overflow: auto; }

/* A coluna do número da linha. Estreita e apagada: ela orienta na varredura e não
   compete com o dado. */
.col-n { inline-size: 2.5rem; text-align: end; }

.explorer-foot { margin-block-start: auto; padding: 0.75rem; border-block-start: 1px solid var(--line); }
.explorer-foot .tabs { margin-block-end: 0.5rem; }

/* ── Seletor de tempo ────────────────────────────────────────────────────────── */

.console-top-center { margin-inline: auto; }

.time-picker { position: relative; }

.time-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.625rem;
    block-size: 1.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--ctl-r);
    background: var(--bg-raised);
    color: var(--text);
    font-size: 0.75rem;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.time-trigger::-webkit-details-marker { display: none; }
.time-trigger:hover { background: var(--bg-overlay); border-color: var(--brand-400); }
.time-caret { opacity: 0.6; font-size: 0.625rem; }

.time-panel {
    position: absolute;
    inset-block-start: calc(100% + 0.25rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 40;
    min-inline-size: 11rem;
    padding: 0.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--ctl-r);
    /* Opaco. Um menu translúcido sobre uma tabela de log deixa os dois ilegíveis. */
    background: var(--bg-overlay);
    box-shadow: 0 0.75rem 2rem oklch(0 0 0 / 0.16);
}

.time-option {
    display: flex;
    inline-size: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.3125rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    background: none;
    color: var(--text);
    font-size: 0.75rem;
    text-align: start;
    cursor: pointer;
}

.time-option:hover { background: var(--bg-raised); }
.time-option.is-on { color: var(--brand-700); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════════════
   O EDITOR DE SQL COM COR

   A ilusão inteira depende de UMA coisa: o <pre> atrás e o <textarea> na frente
   precisam ter métrica idêntica. Por isso as duas metades herdam as mesmas
   propriedades de texto do contêiner, em vez de cada uma declarar as suas — dois
   conjuntos "parecidos" divergem no dia em que alguém mexe num só, e o sintoma é a
   cor descolando do texto a partir da primeira linha longa. */

.sql-editor {
    position: relative;
    background: var(--bg-sunken);
    border-block-end: 1px solid var(--line);

    /* A métrica compartilhada. Tudo abaixo herda daqui. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 2;
}

.sql-echo,
.sql-input {
    margin: 0;
    padding: 0.75rem;
    border: none;
    inline-size: 100%;
    font: inherit;
    line-height: inherit;
    tab-size: inherit;
    /* pre-wrap nas DUAS: com quebra diferente, a linha 40 do texto cai num lugar e a
       cor dela noutro. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.sql-echo {
    position: absolute;
    inset: 0;
    overflow: auto;
    pointer-events: none;
    color: var(--text-strong);
}

.sql-input {
    position: relative;
    display: block;
    background: transparent;
    resize: vertical;
    /* Texto invisível, cursor visível. É o truque inteiro. */
    color: transparent;
    caret-color: var(--brand-600);
}

.sql-input::selection {
    /* A seleção precisa de fundo próprio: sem isto, selecionar texto transparente não
       mostra nada e parece que o campo não respondeu. */
    background: color-mix(in oklab, var(--brand-500) 28%, transparent);
}

.sql-input:focus { outline: none; }
.sql-input::placeholder { color: var(--text-subtle); }

.sql-editor:focus-within { background: var(--bg-raised); }

/* Enquanto roda, o campo esmaece de leve — o resultado que está na tela é do texto
   ANTERIOR, e continuar mostrando o novo com o mesmo peso confunde os dois. */
.sql-editor.is-running .sql-echo { opacity: 0.6; }

/* ── As cores dos tokens ─────────────────────────────────────────────────────────
   Quatro, não dez. Um realce com dez cores vira um vitral e para de ajudar: o olho
   deixa de distinguir o que é estrutura do que é literal. Aqui só se separa o que
   muda o SENTIDO da consulta — comando, literal, número e comentário. */

.tk-keyword { color: oklch(0.45 0.19 285); font-weight: 600; }
.tk-string  { color: oklch(0.45 0.15 145); }
.tk-number  { color: oklch(0.50 0.16 55); }
.tk-comment { color: var(--text-subtle); font-style: italic; }
.tk-punct   { color: var(--text-muted); }

/* ── Agrupamento dos controles da barra ────────────────────────────────────────*/

.control-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* O grupo que mexe nos DADOS, separado por linha do que mexe no console. A divisória
   diz sem texto que ali muda de natureza — e é o que evita alguém mexer no tempo
   achando que está mexendo na aparência. */
.control-group-data {
    padding-inline-end: 0.625rem;
    border-inline-end: 1px solid var(--line);
}

/* ── Painéis ─────────────────────────────────────────────────────────────────────
   Grade de 12 colunas, e cada painel declara quantas ocupa. Doze porque divide por
   2, 3, 4 e 6 — meia largura, um terço, um quarto — sem sobra, que é o motivo de
   praticamente todo sistema de grade usar esse número. */

.panel-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
}

.panel { grid-column: span var(--w, 6); display: flex; flex-direction: column;
         border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-raised); }

@media (max-width: 60rem) {
    /* Num celular, um painel de "um terço" não é um terço de nada: vira largura
       inteira, senão o gráfico fica com dois centímetros. */
    .panel { grid-column: span 12; }
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.5rem 0.75rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--ctl-fs);
}

.panel-tools { display: flex; gap: 0.125rem; }

.icon-btn {
    inline-size: 1.5rem; block-size: 1.5rem;
    display: grid; place-items: center;
    border: none; border-radius: 0.25rem; background: none;
    color: var(--text-muted); cursor: pointer; font-size: 0.75rem;
}

.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn.danger:hover { background: color-mix(in oklab, var(--sev-error) 15%, transparent); color: var(--sev-error); }

.panel-body-chart { padding: 0.75rem; min-block-size: 7rem; }
.panel-number { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.panel-table { max-block-size: 16rem; overflow: auto; }
.panel-err { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ctl-fs); }

/* ── Barras ──────────────────────────────────────────────────────────────────── */

.bars { display: flex; flex-direction: column; gap: 0.25rem; }

.bar-row {
    display: grid;
    grid-template-columns: minmax(4rem, 8rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ctl-fs);
}

.bar-label { color: var(--text-muted); }
.bar-track { block-size: 0.875rem; border-radius: 0.1875rem; background: var(--bg-sunken); overflow: hidden; }

.bar-fill {
    display: block;
    block-size: 100%;
    inline-size: var(--w, 0%);
    background: var(--brand-500);
    /* A largura vem de custom property para a transição pegar: quando o painel
       recarrega, a barra ANDA em vez de saltar — e o movimento é o que mostra que o
       número mudou. */
    transition: inline-size 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bar-value { font-weight: 600; }

/* ── Linha ───────────────────────────────────────────────────────────────────── */

.chart-line { inline-size: 100%; block-size: 8rem; }
.chart-stroke { fill: none; stroke: var(--brand-500); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--brand-500); opacity: 0.12; stroke: none; }

.chart-axis { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6875rem; color: var(--text-muted); }

/* ── Lista de painéis ────────────────────────────────────────────────────────── */

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-3); }

.dash-card {
    display: flex; flex-direction: column; gap: 0.125rem;
    padding: var(--space-4);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg-raised); text-decoration: none; color: inherit;
    transition: transform 140ms ease-out, box-shadow 140ms ease-out, border-color 140ms ease-out;
}

.dash-card:hover { transform: translateY(-2px); border-color: var(--brand-400); box-shadow: 0 0.5rem 1.5rem oklch(0 0 0 / 0.08); }

.add-panel { margin-block-end: var(--space-3); }
.add-panel .filters { margin-block-end: 0; }

/* ── Monitores ───────────────────────────────────────────────────────────────────
   O resumo por estado é a primeira coisa da tela e é CLICÁVEL: ver "3 críticos" e
   não conseguir ir direto neles é o que faz alguém rolar a lista inteira. */

.sev-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-3); align-items: center; }

.sev-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    min-inline-size: 6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg-raised); cursor: pointer; text-align: start;
    border-inline-start: 0.1875rem solid var(--sev);
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.sev-tile:hover { background: var(--bg-sunken); }
.sev-tile.is-on { background: color-mix(in oklab, var(--sev) 10%, var(--bg-raised)); border-color: var(--sev); }
.sev-tile-n { font-size: 1.25rem; font-weight: 700; color: var(--sev); }
.sev-tile-l { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* Monitor desligado fica apagado, não escondido: ele continua existindo e é preciso
   ver que existe para lembrar de religá-lo. */
.console .table tr.is-off td { opacity: 0.5; }

.danger-text { color: var(--sev-error) !important; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ── Gráfico do monitor ─────────────────────────────────────────────────────────*/

.mspark svg { inline-size: 100%; block-size: 7rem; }
.mspark-line { fill: none; stroke: var(--brand-500); stroke-width: 0.5; vector-effect: non-scaling-stroke; }

/* Limiar tracejado: linha cheia se confunde com a série, e a distinção entre "o que
   aconteceu" e "o que foi combinado" é a leitura inteira do gráfico. */
.mspark-limit { stroke-width: 0.4; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; }
.mspark-limit.is-warn { stroke: var(--sev-warn); }
.mspark-limit.is-critical { stroke: var(--sev-error); }

.mspark-dot { fill: var(--sev); }
.mspark-legend { display: flex; justify-content: space-between; font-size: 0.6875rem; }

/* ── SLO ─────────────────────────────────────────────────────────────────────── */

.slo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); }

.slo-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: var(--space-4);
    border: 1px solid var(--line); border-inline-start: 0.1875rem solid var(--sev);
    border-radius: var(--radius-sm); background: var(--bg-raised);
}

.slo-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.slo-figure { display: flex; flex-direction: column; }
.slo-ratio { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.slo-foot { font-size: 0.6875rem; }

.budget-track { block-size: 0.5rem; border-radius: 0.25rem; background: var(--bg-sunken); overflow: hidden; }

.budget-fill {
    block-size: 100%; inline-size: var(--w, 0%);
    background: var(--sev-ok);
    transition: inline-size 420ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease-out;
}

/* A cor muda com o CONSUMO, não com o valor absoluto: 40% do orçamento gasto é
   tranquilo no dia 20 e alarmante no dia 2 — mas 100% é sempre a promessa quebrada,
   e é isso que a cor marca. */
.budget-fill.is-high { background: var(--sev-warn); }
.budget-fill.is-over { background: var(--sev-error); }

/* ── Explorador de log ───────────────────────────────────────────────────────────
   Três colunas: facetas fixas à esquerda, lista no meio, gaveta à direita quando há
   linha aberta. A gaveta ENTRA em vez de empurrar a página porque perder a lista de
   trás é perder o lugar na investigação. */

.log-explorer {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-6)) calc(-1 * var(--space-8));
    min-block-size: calc(100vh - 3.25rem);
}

.log-explorer:has(.log-drawer) { grid-template-columns: 14rem minmax(0, 1fr) 22rem; }

@media (max-width: 70rem) {
    .log-explorer, .log-explorer:has(.log-drawer) { grid-template-columns: minmax(0, 1fr); }
    .log-explorer .explorer-side { max-block-size: 12rem; border-inline-end: none; border-block-end: 1px solid var(--line); }
    .log-drawer { border-inline-start: none; border-block-start: 1px solid var(--line); }
}

.log-explorer .explorer-main { padding: var(--space-4); }
.log-table { max-block-size: none; }
.col-sev { inline-size: 4.5rem; }

.tabs-right { margin-inline-start: auto; display: flex; align-items: center; padding-block-end: 0.25rem; }
.filters-count { margin-inline-start: auto; font-size: 0.6875rem; }

/* ── Facetas ─────────────────────────────────────────────────────────────────── */

.facet-list { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

.facet-head {
    display: flex; align-items: center; gap: 0.375rem;
    inline-size: 100%; padding: 0.25rem;
    border: none; background: none; cursor: pointer;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-subtle);
}

.facet-head:hover { color: var(--text); }
.facet-caret { transition: transform 140ms ease-out; }
.facet-caret.is-open { transform: rotate(90deg); }
.facet-n { margin-inline-start: auto; font-weight: 400; }

.facet-values { display: flex; flex-direction: column; gap: 1px; }

.facet-value {
    position: relative;
    display: flex; align-items: center; gap: 0.375rem;
    padding: 0.1875rem 0.375rem;
    border: none; border-radius: 0.25rem; background: none;
    cursor: pointer; font-size: 0.6875rem; color: var(--text);
    text-align: start; overflow: hidden;
}

/* A barra fica ATRÁS do texto, como preenchimento de fundo: uma barra ao lado
   roubaria a largura já escassa da lateral, e o que importa é a proporção relativa
   entre os valores, não o valor exato. */
.facet-bar {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: var(--w, 0%);
    background: color-mix(in oklab, var(--brand-500) 14%, transparent);
    z-index: 0;
}

.facet-label, .facet-count { position: relative; z-index: 1; }
.facet-label { flex: 1; }
.facet-count { color: var(--text-muted); }

.facet-value:hover { background: var(--bg-overlay); }
.facet-value.is-on { outline: 1px solid var(--brand-500); color: var(--brand-700); font-weight: 600; }

.facet-empty, .facet-note { font-size: 0.625rem; padding: 0.25rem; }
.facet-note { border-block-start: 1px solid var(--line); padding-block-start: 0.5rem; }

/* ── Histograma ──────────────────────────────────────────────────────────────── */

.histogram { margin-block-end: var(--space-3); }

.histo-bars {
    display: flex; align-items: flex-end; gap: 1px;
    block-size: 4.5rem;
    padding: 0.25rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg-raised);
}

.histo-col {
    flex: 1;
    display: flex; align-items: flex-end;
    block-size: 100%;
    border: none; background: none; padding: 0; cursor: pointer;
    min-inline-size: 2px;
}

.histo-col:hover .histo-stack { filter: brightness(1.15); }
.histo-col.is-on { outline: 1px solid var(--brand-500); outline-offset: 1px; }

.histo-stack { display: flex; flex-direction: column-reverse; inline-size: 100%; block-size: 100%; justify-content: flex-start; }

/* A fatia cresce de baixo para cima com transição: ao recarregar, as colunas SOBEM em
   vez de saltar, e o movimento mostra onde o volume mudou. */
.histo-slice {
    display: block;
    inline-size: 100%;
    block-size: var(--h, 0%);
    background: var(--sev);
    transition: block-size 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.histo-axis { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--text-muted); padding-block-start: 0.25rem; }

/* ── Gaveta ──────────────────────────────────────────────────────────────────── */

.log-drawer {
    border-inline-start: 1px solid var(--line);
    background: var(--bg-raised);
    overflow: auto;
    animation: slide-in 180ms ease-out;
}

@keyframes slide-in {
    from { opacity: 0; transform: translateX(0.75rem); }
    to   { opacity: 1; transform: none; }
}

.drawer-head {
    position: sticky; inset-block-start: 0;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--bg-raised);
    border-block-end: 1px solid var(--line);
    font-size: var(--ctl-fs);
}

.drawer-head .icon-btn { margin-inline-start: auto; }
.drawer-body { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.drawer-field { display: flex; flex-direction: column; gap: 1px; }

.drawer-json {
    margin: 0; padding: 0.5rem;
    background: var(--bg-sunken); border-radius: 0.25rem;
    font-size: 0.6875rem; max-block-size: 20rem; overflow: auto;
    white-space: pre-wrap; word-break: break-word;
}

/* ── Cascata do rastro ───────────────────────────────────────────────────────────
   Três colunas: rótulo recuado por profundidade, trilha do tempo, duração. A trilha
   é uma faixa de 100% onde cada barra é posicionada por `left` e `width` em
   porcentagem — é o posicionamento no tempo que distingue paralelo de série, e é essa
   distinção que decide se há o que otimizar. */

.waterfall { font-size: 0.75rem; }

.wf-row { display: grid; grid-template-columns: 18rem minmax(0, 1fr) 5rem; align-items: center; gap: 0.5rem; padding-block: 1px; }
.wf-row:hover { background: var(--bg-sunken); }
.wf-row.is-error .wf-name { color: var(--sev-error); }

.wf-label { display: flex; align-items: center; gap: 0.375rem; padding-inline-start: calc(var(--depth) * 0.875rem); overflow: hidden; }
.wf-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wf-track { position: relative; block-size: 0.875rem; background: var(--bg-sunken); border-radius: 0.1875rem; }

.wf-bar {
    position: absolute; inset-block: 0;
    inset-inline-start: var(--left, 0%);
    inline-size: max(var(--width, 0%), 2px);
    background: var(--sev); border-radius: 0.1875rem;
    transition: inline-size 260ms ease-out, inset-inline-start 260ms ease-out;
}

.wf-time { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-muted); }

.wf-error, .wf-attrs { padding-inline-start: calc(var(--depth) * 0.875rem + 0.5rem); font-size: 0.6875rem; }
.wf-error { color: var(--sev-error); padding-block: 2px; }
.wf-attrs { display: flex; flex-wrap: wrap; gap: 0.625rem; color: var(--text-muted); padding-block-end: 3px; }
.wf-attr { white-space: nowrap; }

.wf-scale { display: flex; justify-content: space-between; border-block-start: 1px solid var(--line); margin-block-start: 0.375rem; padding-block-start: 0.25rem; font-size: 0.6875rem; color: var(--text-muted); }

/* A fatia do tempo total, na tabela de operações. */
.bar-track.share { display: inline-block; inline-size: 6rem; block-size: 0.5rem; vertical-align: middle; }

/* ── Séries do profiling ─────────────────────────────────────────────────────── */

.chart-stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--space-3); }

.ts { padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-raised); }
.ts-head { display: flex; align-items: baseline; gap: 0.5rem; margin-block-end: 0.25rem; font-size: 0.75rem; }
.ts-title { font-weight: 600; }
.ts-now { margin-inline-start: auto; font-weight: 700; font-size: 0.875rem; }
.ts-chart { inline-size: 100%; block-size: 4rem; }
.ts-empty { font-size: 0.6875rem; }

.ts-line { fill: none; stroke: var(--sev); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.ts-area { fill: var(--sev); opacity: 0.14; stroke: none; }

/* Diálogo largo, para formulários com dois campos por linha. O estreito serve para
   "digite o motivo"; um formulário de evento nele viraria uma coluna de dez campos
   que exige rolar para ver o botão. */
.prompt-wide { inline-size: min(38rem, 100%); max-block-size: 85vh; overflow: auto; }