/*
 * menu.css — UX-NAV e FIN-01 (reunião de 06/10)
 *
 * O menu por CATEGORIAS: uma coluna de ícones à esquerda e, ao lado, o painel
 * da categoria escolhida — com os Fixados no topo e o "Acesso rápido" (telas de
 * outras categorias, em outra cor) no rodapé. Carregada depois da
 * `casca-extras.css`, cujas regras de item, rótulo e recolhido continuam
 * valendo: este arquivo só arruma a GRADE nova.
 *
 *   tela larga   coluna de categorias + painel da categoria aberta
 *   recolhido    só a coluna de categorias (o link de cada uma navega)
 *   celular      sem coluna: o "Menu" mostra as categorias empilhadas
 */

/* `body .casca`, e não `.casca`: o layout declara a largura no `<style>`
   embutido, que vem DEPOIS desta folha e venceria um seletor de mesmo peso.
   A foto pegou: o rail continuava em 15,5rem e os itens saíam cortados. */
body .casca {
    grid-template-columns: 18.5rem 1fr;
}

.rail .rail-painel > nav {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.6rem;
    align-items: start;
}

/* Tudo o que não é a coluna de categorias vai para a segunda coluna, uma linha
   por elemento — Fixados primeiro, depois o painel. */
.rail .rail-painel > nav > * {
    grid-column: 2;
}

.rail .rail-painel > nav > .rail-categorias {
    grid-column: 1;
    grid-row: 1 / span 30;
}

/* ---- a coluna de categorias ----------------------------------------- */
.rail-categorias {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-right: 1px solid var(--zen-chrome-borda);
}

.rail-categoria {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem 0.15rem;
    border-radius: var(--raio-s, 6px);
    color: var(--zen-chrome-soft);
    text-decoration: none;
    font-size: 0.66rem;
    line-height: 1.1;
    text-align: center;
}

.rail-categoria:hover {
    color: var(--zen-chrome-text);
    background: rgba(230, 225, 207, 0.06);
}

.rail-categoria-ativa {
    color: var(--zen-chrome-text);
    background: rgba(230, 225, 207, 0.1);
    box-shadow: inset 2px 0 0 var(--zen-accent, currentColor);
}

.rail-categoria .rail-ico {
    width: 1.15rem;
    height: 1.15rem;
}

/* Só o ÍCONE na coluna (a proposta da reunião: "categorias fixas à esquerda,
   só com ícone"). O nome continua no `title` e para leitor de tela — a foto
   mostrou "Finance iro" e "Comer cial" quebrados no meio da palavra. */
.rail-categoria-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- o "Acesso rápido": outra cor, porque não mora nesta categoria ---- */
.rail .rail-grupo-rapido {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--zen-chrome-borda);
}

.rail .rail-item-rapido {
    color: var(--zen-accent-text-chrome, #c9d8c4);
    font-style: italic;
}

/* ---- recolhido: só a coluna de categorias ------------------------------ */
@media (min-width: 60.0625rem) {
    body .casca[data-rail='recolhido'] {
        grid-template-columns: 4.5rem 1fr;
    }

    .casca[data-rail='recolhido'] .rail .rail-painel > nav {
        grid-template-columns: 1fr;
    }

    .casca[data-rail='recolhido'] .rail .rail-painel > nav > *:not(.rail-categorias) {
        display: none;
    }

    .casca[data-rail='recolhido'] .rail-categorias {
        border-right: 0;
        padding-right: 0;
    }

    .casca[data-rail='recolhido'] .rail-categoria-rotulo {
        display: none;
    }
}

/* ---- celular: sem coluna, todas as categorias empilhadas no "Menu" ------ */
@media (max-width: 60rem) {
    body .casca {
        grid-template-columns: 1fr;
    }

    .rail .rail-painel > nav {
        display: block;
    }

    .rail-categorias {
        display: none;
    }

    .rail-categoria-painel[hidden] {
        display: block;
    }

    /* Com TODAS as categorias empilhadas, o "Acesso rápido" só repetiria o
       que está logo abaixo — e a foto mostrou "Clientes e fornecedores"
       duas vezes na mesma rolagem. */
    .rail .rail-grupo-rapido,
    .rail .rail-rapido {
        display: none;
    }
}

/* ---- FIN-01: o "+ Novo" da barra de cima -------------------------------- */
.menu-novo {
    position: relative;
}

.menu-novo > summary {
    list-style: none;
    cursor: pointer;
}

.menu-novo > summary::-webkit-details-marker {
    display: none;
}

.menu-novo-painel kbd {
    white-space: nowrap;
}

.menu-novo-painel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    min-width: 15.5rem;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--zen-surface);
    border: 1px solid var(--zen-border);
    border-radius: var(--raio-m, 10px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.menu-novo-painel a,
.menu-novo-frase {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--raio-s, 6px);
    color: var(--zen-text-main);
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.menu-novo-painel a:hover,
.menu-novo-frase:hover {
    background: var(--zen-surface-2, rgba(0, 0, 0, 0.04));
}

.menu-novo-grupo {
    margin: 0.6rem 0.6rem 0.2rem;
    font-size: var(--fs-micro, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--zen-text-soft);
}

/* O menu transbordava 32 px para o lado: a lista é uma grade de trilha
   `auto`, que não encolhe abaixo do conteúdo — e o item com atalho ("G X",
   que não quebra) pedia 243 px numa coluna de 195. Aparecia como uma barra de
   rolagem horizontal no pé do menu, e o tutorial ao vivo (SP1-11), ao rolar
   até um item, empurrava o menu inteiro para a esquerda. A trilha agora
   encolhe, e o rótulo longo termina em reticências. */
.rail .rail-itens {
    grid-template-columns: minmax(0, 1fr);
}

.rail .rail-item {
    min-width: 0;
}

.rail .rail-rotulo {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}