/* Base do painel, sem dependência de build (as telas de acesso usam só este arquivo; o painel logado
 * recebe o reforço do Tailwind em assets/build/app.css por cima).
 * Linguagem visual: SaaS de segurança moderno — grafite neutro escuro, acento violeta (a cor do laço
 * "purple team": vermelho + azul = violeta, o diferencial do produto), cantos arredondados, hierarquia
 * por espaçamento e peso tipográfico, não por caractere ASCII. Sans-serif do sistema no texto; monoespaçado
 * só no que é dado técnico de verdade (IP, hash, JSON). Um só tema: o produto é um console de analista.
 *
 * TUDO aqui dentro de @layer: por conta própria (telas de acesso, sem o Tailwind) uma camada nomeada
 * funciona igual a uma regra solta — nada muda. Mas quando o painel carrega ESTE arquivo + o
 * assets/build/app.css do Tailwind juntos, uma regra SOLTA (sem @layer) sempre vence qualquer regra
 * em camada, não importa a especificidade — foi isso que fazia todo botão sair violeta (até
 * button.hx-secundario, que é mais específico, perdia pra este button{} solto). Camada nomeada aqui,
 * carregada primeiro no <head>, vira a camada de prioridade MAIS BAIXA do documento — o
 * `@layer theme, base, components, utilities` que o Tailwind gera por baixo dos panos sempre vence,
 * exatamente como devia. */
@layer hx-base {
:root {
    --hx-fundo: #0a0b10;
    --hx-fundo-2: #0e1018;
    --hx-superficie: #131521;
    --hx-superficie-2: #1a1d2c;
    --hx-texto: #e7e9f0;
    --hx-apagado: #8b90a6;
    --hx-borda: #262a3d;
    --hx-acento: #9f8cff;
    --hx-acento-600: #7c6cf5;
    --hx-acento-fundo: #141331;
    --hx-erro: #fb5a5a;
    --hx-ok: #35d08f;
    --hx-raio: .625rem;
    --hx-raio-sm: .4375rem;
    --hx-sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px -8px rgb(0 0 0 / 55%);
    --hx-fonte: -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif;
    --hx-fonte-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--hx-fundo); color: var(--hx-texto); font: 15px/1.55 var(--hx-fonte); -webkit-font-smoothing: antialiased; }
a { color: var(--hx-acento); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hx-acento) 60%, transparent); }
code, pre { font-family: var(--hx-fonte-mono); overflow-wrap: anywhere; }
code { font-size: .85em; }
:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--hx-fundo), 0 0 0 4px var(--hx-acento); border-radius: var(--hx-raio-sm); }

button {
    padding: .5rem 1rem; border: 1px solid var(--hx-acento-600); border-radius: var(--hx-raio-sm);
    background: var(--hx-acento-600); color: #fff; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
button:hover { background: color-mix(in srgb, var(--hx-acento-600) 88%, white); }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--hx-borda); border-radius: var(--hx-raio-sm);
    background: var(--hx-fundo-2); color: inherit; font: inherit; font-size: .9rem;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 25%); transition: border-color .12s;
}
textarea { font-family: var(--hx-fonte-mono); font-size: .82rem; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--hx-apagado) 50%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--hx-acento); }
select {
    appearance: none; padding-right: 2rem; background-repeat: no-repeat; background-position: right .6rem center; background-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b90a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8'/%3E%3C/svg%3E");
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--hx-acento); }
label { display: block; margin-bottom: 1rem; color: var(--hx-apagado); font-size: .83rem; font-weight: 500; }
label input, label select, label textarea { margin-top: .4rem; color: var(--hx-texto); font-size: .9rem; font-weight: 400; }
.hx-erro { color: var(--hx-erro); }
details { margin: 1rem 0; padding: .85rem 1.1rem; border: 1px solid var(--hx-borda); border-radius: var(--hx-raio); background: var(--hx-superficie); }

/* ---- busca com autocomplete (ex.: técnica na varredura de sub-rede) ---- */
.hx-busca { position: relative; }
.hx-busca-lista {
    list-style: none; margin: -.6rem 0 1rem; padding: .3rem; position: absolute; z-index: 20; left: 0; right: 0;
    max-height: 16rem; overflow-y: auto; border: 1px solid var(--hx-borda); border-radius: var(--hx-raio);
    background: var(--hx-superficie); box-shadow: var(--hx-sombra);
}
.hx-busca-lista li { margin: 0; }
.hx-busca-lista button {
    display: block; width: 100%; padding: .5rem .6rem; border: 0; border-radius: var(--hx-raio-sm);
    background: none; color: var(--hx-texto); font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.hx-busca-lista button:hover { background: var(--hx-superficie-2); }
summary { cursor: pointer; font-weight: 600; }
h2 { margin: 1.75rem 0 .75rem; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* ---- tela de acesso (login, TOTP, convite, redefinição de senha, cadastro de MFA) ---- */
.hx-acesso { position: relative; min-height: 100vh; isolation: isolate; }
.hx-acesso::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background:
        radial-gradient(60rem 36rem at 15% -10%, color-mix(in srgb, var(--hx-acento) 16%, transparent), transparent 60%),
        radial-gradient(50rem 30rem at 110% 110%, color-mix(in srgb, var(--hx-acento) 10%, transparent), transparent 60%);
}
.hx-acesso main {
    position: relative; width: min(25rem, 100% - 2rem); margin: 10vh auto 0; padding: 2rem;
    border: 1px solid var(--hx-borda); border-radius: var(--hx-raio); background: var(--hx-superficie); box-shadow: var(--hx-sombra);
}
.hx-acesso h1 {
    margin: 0 0 1.5rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; color: var(--hx-texto);
}
.hx-acesso h1::before {
    content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .55rem; border-radius: 999px;
    background: var(--hx-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-acento) 20%, transparent);
}

/* ---- esqueleto do painel (reforçado pelo Tailwind quando o build existe) ---- */
.hx-painel { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
.hx-menu { padding: 1.25rem .9rem; border-right: 1px solid var(--hx-borda); background: var(--hx-fundo-2); display: flex; flex-direction: column; gap: 1.5rem; }
.hx-menu h2 { margin: 0 0 .3rem; padding-left: .6rem; color: var(--hx-apagado); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hx-menu nav a {
    display: block; margin-bottom: .1rem; padding: .5rem .6rem; border-radius: var(--hx-raio-sm);
    color: color-mix(in srgb, var(--hx-texto) 85%, transparent); text-decoration: none; font-size: .88rem; font-weight: 500;
}
.hx-menu nav a:hover { background: var(--hx-superficie-2); color: var(--hx-texto); }
.hx-marca { font-weight: 700; letter-spacing: -.01em; text-decoration: none; color: var(--hx-texto); font-size: 1.05rem; }
.hx-conteudo { padding: 1.75rem 2rem; max-width: 72rem; }
.hx-conteudo h1 { margin: 0 0 1.5rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
} /* fim de @layer hx-base — o menu mobile abaixo precisa ficar FORA da camada: ele troca o .hx-menu
     (flex, do Tailwind) por display:none sob o breakpoint, e uma regra em camada nunca vence uma
     regra solta do Tailwind, nem com @media batendo. */

/* ---- menu inferior (mobile): escondido no desktop, aparece só sob o breakpoint abaixo ---- */
.hx-nav-mobile, .hx-nav-mais, .hx-nav-mais-fundo { display: none; }
[x-cloak] { display: none !important; } /* esconde até o Alpine assumir — evita o flash do "Mais" aberto */

@media (max-width: 768px) {
    .hx-painel { grid-template-columns: minmax(0, 1fr); }
    .hx-menu { display: none; } /* substituído pelo menu inferior + "Mais" nesta largura */
    .hx-conteudo { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

    .hx-nav-mobile {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
        background: var(--hx-fundo-2); border-top: 1px solid var(--hx-borda);
        box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 50%);
    }
    .hx-nav-mobile a, .hx-nav-mobile button {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .2rem;
        padding: .35rem .2rem; border: 0; background: none; color: var(--hx-apagado);
        font: inherit; font-size: .64rem; font-weight: 600; text-decoration: none; cursor: pointer;
        border-radius: var(--hx-raio-sm);
    }
    .hx-nav-mobile a:hover, .hx-nav-mobile button:hover { color: var(--hx-texto); text-decoration: none; }
    .hx-nav-mobile svg { width: 1.35rem; height: 1.35rem; }

    .hx-nav-mais-fundo {
        display: block; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 55%);
    }
    .hx-nav-mais {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem;
        position: fixed; left: .6rem; right: .6rem; bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); z-index: 46;
        padding: .75rem; border: 1px solid var(--hx-borda); border-radius: var(--hx-raio);
        background: var(--hx-superficie); box-shadow: var(--hx-sombra);
    }
    .hx-nav-mais a {
        display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .3rem;
        border-radius: var(--hx-raio-sm); color: var(--hx-texto); font-size: .72rem; font-weight: 500; text-decoration: none;
    }
    .hx-nav-mais a:hover { background: var(--hx-superficie-2); text-decoration: none; }
    .hx-nav-mais svg { width: 1.3rem; height: 1.3rem; color: var(--hx-acento); }
}

@layer hx-base {
/* ---- severidade (compartilhada com o Tailwind) ---- */
:root {
    --hx-critical: #fb5a5a; --hx-high: #ff9d52; --hx-medium: #f2c14e; --hx-low: #5b9dff; --hx-informational: var(--hx-apagado);
    --hx-teste-fundo: color-mix(in srgb, #f2c14e 14%, transparent);
}
} /* fim de @layer hx-base */