/* /Layout/MainLayout.razor.rz.scp.css */
/*
    CSS isolado do layout — este arquivo VENCE o app.css.

    O template do Blazor deixava aqui um degrade azul-roxo na lateral
    (rgb(5,39,103) -> #3a0647) e uma barra superior branca (#f7f7f7). Como CSS
    isolado tem precedencia, o tema do CombatOS no app.css nao aparecia: a
    aplicacao continuava com a cara do template mesmo com a paleta certa
    definida. Quem for mexer em cor aqui, olhe os dois arquivos.

    As cores vem das variaveis do app.css, que por sua vez sao copia literal do
    Theme.kt do app Android.
*/

.page[b-fn34slqr1k] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-fn34slqr1k] {
    flex: 1;
    background-color: var(--combat-black);
}

.sidebar[b-fn34slqr1k] {
    /* Preto com a superficie do app, e nao degrade. */
    background-color: var(--combat-surface);
    border-right: 1px solid var(--combat-outline);
}

/*
    A barra agora carrega o titulo da pagina, e nao so a identidade.

    justify-content saiu: com o titulo a esquerda e um .ms-auto empurrando o
    resto, alinhar tudo a direita jogaria o titulo para o meio da tela.

    A altura passou de 3,5rem para 4rem: o titulo tem duas linhas (nome e
    contexto) e em 3,5rem o contexto encostava na borda de baixo.
*/
.top-row[b-fn34slqr1k] {
    background-color: var(--combat-surface);
    border-bottom: 1px solid var(--combat-outline);
    height: 4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

    /* :not(.combat-sino) e o que impede a margem de 1,5rem de abrir um buraco
       antes do sino agora que ele nao e mais o primeiro elemento da barra. */
    .top-row[b-fn34slqr1k]  a, .top-row[b-fn34slqr1k]  .btn-link {
        white-space: nowrap;
        margin-left: 0;
        text-decoration: none;
        color: var(--combat-gray);
    }

    .top-row[b-fn34slqr1k]  a:hover, .top-row[b-fn34slqr1k]  .btn-link:hover {
        color: var(--combat-white);
        text-decoration: none;
    }


@media (max-width: 640.98px) {
    .top-row[b-fn34slqr1k] {
        justify-content: space-between;
    }

    .top-row[b-fn34slqr1k]  a, .top-row[b-fn34slqr1k]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-fn34slqr1k] {
        flex-direction: row;
    }

    .sidebar[b-fn34slqr1k] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-fn34slqr1k] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-fn34slqr1k], article[b-fn34slqr1k] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/*
    CSS isolado do menu — VENCE o app.css.

    O item ativo usa a marca: faixa vermelha a esquerda e fundo bem diluido. E a
    mesma logica do app, onde vermelho marca "onde voce esta" e "acao principal",
    nada mais.
*/

.navbar-toggler[b-9s3k8iym81] {
    appearance: none;
    cursor: pointer;
    width: 2.75rem;
    height: 2.5rem;
    color: var(--combat-white);
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    border: 1px solid var(--combat-outline);
    border-radius: var(--raio-sm);
    background: var(--combat-surface-variant);
    transition: border-color var(--mov-rapido) var(--mov-padrao);
}

.navbar-toggler:hover[b-9s3k8iym81] {
    border-color: var(--combat-outline-forte);
}

/*
    ALTURA IGUAL A DA BARRA SUPERIOR — 4rem.

    Este bloco e a `.top-row` do MainLayout ficam LADO A LADO, cada um com a sua
    borda de baixo. Aqui estava 3,5rem e la 4rem: as duas linhas nasciam em
    alturas diferentes e se encontravam num degrau de 8px bem no meio do topo da
    tela. A leitura disso e "torto", e nao ha o que a pagina faca embaixo que
    conserte a impressao.

    Se um dia mudar aqui, mude no MainLayout.razor.css junto. As duas medidas sao
    uma medida so.
*/
.top-row[b-9s3k8iym81] {
    height: 4rem;
    background-color: var(--combat-surface);
    border-bottom: 1px solid var(--combat-outline);
    display: flex;
    align-items: center;
}

.navbar-brand[b-9s3k8iym81] {
    font-size: 1.1rem;
    padding: 0;
}

/*
    Logo dimensionado pela LARGURA.

    A lateral tem 250px; descontando o respiro dos dois lados sobram ~210px
    uteis. Altura vem sozinha pela proporcao — fixar as duas medidas so criaria a
    chance de deformar a marca no dia em que o arquivo mudar.
*/
.combat-logo[b-9s3k8iym81] {
    width: 188px;
    height: auto;
    display: block;
}

@media (max-width: 400px) {
    .combat-logo[b-9s3k8iym81] {
        width: 160px;
    }
}

/* ---------- Itens ---------- */

.nav-item[b-9s3k8iym81] {
    padding: 0 0.75rem;
    margin-bottom: 2px;
}

.nav-item:first-of-type[b-9s3k8iym81] {
    margin-top: 0.75rem;
}

/*
    O item e uma pilula, nao uma faixa de ponta a ponta.

    Faixa colada nas duas bordas da lateral e o que o template do Blazor entrega
    e o que faz o menu parecer uma lista de sistema. A pilula recuada da ao bloco
    de navegacao uma silhueta propria.
*/
.nav-item[b-9s3k8iym81]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 2.6rem;
    padding: 0 0.75rem;
    border: none;
    border-radius: var(--raio-sm);
    color: var(--combat-gray);
    background: none;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition:
        color var(--mov-rapido) var(--mov-padrao),
        background-color var(--mov-rapido) var(--mov-padrao);
}

/*
    A faixa vermelha e um ::before que ESCALA, e nao uma borda que aparece.

    Borda surgindo de uma vez empurra o texto 3px para o lado no momento do
    clique. Crescendo de altura zero a partir do centro, ela entra sem mover
    nada em volta.
*/
.nav-item[b-9s3k8iym81]  .nav-link::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 2px 2px 0;
    background-color: var(--combat-red);
    transform: translateY(-50%);
    transition: height var(--mov-medio) var(--mov-saida);
}

.nav-item[b-9s3k8iym81]  .nav-link:hover {
    background-color: var(--combat-surface-variant);
    color: var(--combat-white);
}

.nav-item[b-9s3k8iym81]  a.active {
    background-color: rgba(227, 36, 43, 0.14);
    color: var(--combat-white);
}

.nav-item[b-9s3k8iym81]  a.active::before {
    height: 1.5rem;
}

/* O icone da linha ativa acende junto. Cinza no ativo faria o vermelho da
   faixa parecer solto do resto do item. */
.nav-item[b-9s3k8iym81]  a.active .combat-icone {
    color: var(--combat-red);
}

.nav-item[b-9s3k8iym81]  .nav-link .combat-icone {
    flex-shrink: 0;
    transition: color var(--mov-rapido) var(--mov-padrao);
}

.nav-scrollable[b-9s3k8iym81] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-9s3k8iym81] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-9s3k8iym81] {
        display: none;
    }

    .nav-scrollable[b-9s3k8iym81] {
        display: block;

        /* 4rem, igual a barra. Ver o comentario do .top-row acima. */
        height: calc(100vh - 4rem);
        overflow-y: auto;
    }
}