/* ------------------------------------------------------------------------------
 *  # Top-bar 2026 — navegação por domínio + command bar + perfil
 *
 *  Namespace próprio (.xn-*) para não herdar o cromo Limitless (.navbar), que não
 *  era branded. Usa os tokens --occ-* (tokens.css) → dark mode automático via
 *  [data-color-theme="dark"]. Estética "calm/crystal": translucidez sutil, teal
 *  como assinatura, motion discreto.
 * ---------------------------------------------------------------------------- */

.xn-navbar {
    position: sticky;
    top: 0;
    z-index: 1045;
    height: 58px;
    background: var(--occ-glass-bg);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--occ-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.xn-navbar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .375rem;
    height: 100%;
    padding: 0 1rem;
}

/* ── Marca ─────────────────────────────────────────────────────────────── */
.xn-brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-right: .5rem;
    flex-shrink: 0;
}

.xn-brand img.xn-brand__icon {
    height: 32px;
}

/* Uma arte por tema. O sufixo do arquivo é o tema onde ele entra, não a cor da
   tinta — logo_icon_dark.svg tem tinta clara, para o fundo escuro. Sem tema
   definido o navbar.js considera claro, então a arte clara é o padrão.

   Sem o ancestral `.xn-brand` de propósito: login.html e e-mail.html mostram a
   mesma marca fora da topbar (não têm navbar nenhuma) e precisam da mesma troca
   por tema. A regra de altura logo acima CONTINUA escopada, porque lá o logo é
   maior — essas duas telas dimensionam pela utilitária `.h-48px`. */
.xn-brand__icon--dark {
    display: none;
}

[data-color-theme="dark"] .xn-brand__icon--light {
    display: none;
}

[data-color-theme="dark"] .xn-brand__icon--dark {
    display: block;
}

/* ── Navegação por domínio ─────────────────────────────────────────────── */
/* O menu não encolhe: os botões são nowrap e, encolhido, ele transbordava por BAIXO da
   busca (1360px mostrava a busca em cima de "Cadastros", XWM-92). Quem cede espaço é a
   busca — ver .xn-actions. Abaixo de 768px ele volta a encolher e rola (fim do arquivo). */
.xn-nav {
    display: flex;
    align-items: center;
    gap: .125rem;
    min-width: 0;
    flex-shrink: 0;
}

.xn-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 .7rem;
    border: 0;
    background: transparent;
    color: var(--occ-ink-soft);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    border-radius: 9px;
    cursor: pointer;
    transition: color var(--occ-dur) var(--occ-ease),
        background-color var(--occ-dur) var(--occ-ease);
}

.xn-nav__trigger>.xn-nav__icon {
    font-size: 1.05rem;
    color: var(--occ-ink-faint);
    transition: color var(--occ-dur) var(--occ-ease);
}

.xn-nav__caret {
    font-size: .7rem;
    color: var(--occ-ink-faint);
    transition: transform var(--occ-dur) var(--occ-ease);
}

.xn-nav__trigger:hover,
.xn-nav__trigger:focus-visible {
    color: var(--occ-ink);
    background: var(--occ-accent-soft);
    outline: none;
}

.xn-nav__trigger:hover>.xn-nav__icon,
.xn-nav__trigger.show>.xn-nav__icon {
    color: var(--occ-accent);
}

.xn-nav__trigger.show>.xn-nav__caret {
    transform: rotate(180deg);
}

/* item de domínio cuja tela está aberta (marcado por navbar.js) */
.xn-nav__trigger.is-active {
    color: var(--occ-accent);
    background: var(--occ-accent-soft);
    font-weight: 600;
}

.xn-nav__trigger.is-active>.xn-nav__icon {
    color: var(--occ-accent);
}

/* ── Dropdown (skin próprio sobre .dropdown-menu do Bootstrap) ──────────── */
/* max-height + rolagem própria: html, body e .page-content são overflow:hidden (só o
   .content-inner rola), então o que passasse do fim da janela ficava inalcançável — o
   Cadastros tem 13 itens e em 1360x768 perdia os últimos (XWM-93). 90px = navbar (58) +
   margem do menu (9) + offset do Popper (4) + folga no rodapé. */
.xn-menu.dropdown-menu {
    --bs-dropdown-min-width: 248px;
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    margin-top: 9px;
    background: var(--occ-surface);
    border: 1px solid var(--occ-line);
    border-radius: 13px;
    box-shadow: var(--occ-shadow);
}

.xn-menu.dropdown-menu.show {
    animation: xn-menu-in .16s var(--occ-ease);
}

/* Anima a propriedade `translate` (individual), não `transform` — assim compõe com
   o transform que o Popper aplica para posicionar o menu, em vez de sobrescrevê-lo
   (o que causava o menu "saltar" da origem para a posição final). */
@keyframes xn-menu-in {
    from {
        opacity: 0;
        translate: 0 -6px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

.xn-menu__label {
    padding: .35rem .65rem .25rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--occ-ink-faint);
}

.xn-menu__item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    color: var(--occ-ink);
    font-size: .875rem;
    font-weight: 450;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--occ-dur) var(--occ-ease),
        background-color var(--occ-dur) var(--occ-ease);
}

/* "Sair" é <button> (POST /logout): zera o que o navegador põe em botão para ficar igual aos links */
.xn-menu__item--botao {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.xn-menu__item>.xn-menu__icon {
    flex-shrink: 0;
    width: 1.2rem;
    font-size: 1.1rem;
    color: var(--occ-ink-faint);
    transition: color var(--occ-dur) var(--occ-ease);
}

.xn-menu__item:hover,
.xn-menu__item:focus-visible {
    background: var(--occ-accent-soft);
    color: var(--occ-ink);
    outline: none;
}

.xn-menu__item:hover>.xn-menu__icon {
    color: var(--occ-accent);
}

/* tela atual, destacada dentro do dropdown */
.xn-menu__item.is-active {
    background: var(--occ-accent-soft);
    color: var(--occ-accent);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--occ-accent);
}

.xn-menu__item.is-active>.xn-menu__icon {
    color: var(--occ-accent);
}

/* item previsto, ainda não disponível (Relatórios "Em breve") */
.xn-menu__item.is-soon {
    color: var(--occ-ink-faint);
    cursor: default;
    pointer-events: none;
}

.xn-menu__item.is-soon>.xn-menu__icon {
    color: var(--occ-ink-faint);
    opacity: .6;
}

.xn-soon {
    margin-left: auto;
    padding: .1rem .4rem;
    font-size: .625rem;
    font-weight: 600;
    color: var(--occ-ink-faint);
    background: var(--occ-line-strong);
    border-radius: 5px;
}

.xn-menu__divider {
    height: 1px;
    margin: 5px 4px;
    background: var(--occ-line);
}

/* Seção do dropdown: divisor + rótulo + itens, agrupados para que o rótulo não fique
   órfão quando o sec:authorize apaga todos os itens — o Thymeleaf remove a seção
   inteira, não só os <a>. Cada seção traz o próprio divisor de topo, e este é o único
   estilo que a seção precisa: esconder o divisor da primeira.

   `:first-child` e não `:not(:first-of-type)` de propósito: quem sobra no HTML depende
   da permissão do usuário, e como a seção sem permissão é REMOVIDA (não escondida), a
   primeira que resta é a primeira filha de verdade. O comentário parser-level que a
   antecede no template também some no parse, então não conta como irmão. */
.xn-menu__section:first-child > .xn-menu__divider {
    display: none;
}

/* ── Command bar (protagonista) ────────────────────────────────────────── */
/* A busca é a única peça da barra que encolhe (até virar só a lupa), e o que ela mostra
   depende da PRÓPRIA largura, não da janela: a largura que sobra muda com o nome do usuário
   e com quantos menus a permissão dele deixa aparecer. */
.xn-cmd {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 1 360px;
    width: 360px;
    max-width: 360px;
    min-width: 38px;
    container-type: inline-size;
    overflow: hidden;
    height: 38px;
    margin: 0 .35rem 0 0;
    padding: 0 .5rem 0 .8rem;
    background: var(--occ-surface-2);
    border: 1px solid var(--occ-line);
    border-radius: 10px;
    color: var(--occ-ink-faint);
    cursor: text;
    transition: border-color var(--occ-dur) var(--occ-ease),
        background-color var(--occ-dur) var(--occ-ease),
        box-shadow var(--occ-dur) var(--occ-ease);
}

.xn-cmd:hover,
.xn-cmd:focus-visible {
    background: var(--occ-surface);
    border-color: var(--occ-accent);
    box-shadow: 0 0 0 3px var(--occ-accent-soft);
    outline: none;
}

.xn-cmd__icon {
    font-size: 1.05rem;
    color: var(--occ-ink-faint);
}

.xn-cmd:hover .xn-cmd__icon {
    color: var(--occ-accent);
}

.xn-cmd__placeholder {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    text-align: left;
}

.xn-cmd__kbd {
    flex-shrink: 0;
    padding: .1rem .4rem;
    font-size: .7rem;
    font-weight: 500;
    color: var(--occ-ink-soft);
    background: var(--occ-surface);
    border: 1px solid var(--occ-line);
    border-radius: 5px;
}

@container (max-width: 220px) {
    .xn-cmd__kbd {
        display: none;
    }
}

@container (max-width: 110px) {
    .xn-cmd__placeholder {
        display: none;
    }
}

/* ── Ações + perfil ────────────────────────────────────────────────────── */
.xn-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    min-width: 0;
}

.xn-actions > :not(.xn-cmd) {
    flex-shrink: 0;
}

.xn-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--occ-ink-soft);
    font-size: 1.15rem;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--occ-dur) var(--occ-ease),
        background-color var(--occ-dur) var(--occ-ease);
}

.xn-icon-btn:hover,
.xn-icon-btn:focus-visible {
    color: var(--occ-accent);
    background: var(--occ-accent-soft);
    outline: none;
}

.xn-profile {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 42px;
    padding: .25rem .5rem .25rem .3rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--occ-dur) var(--occ-ease);
}

.xn-profile:hover,
.xn-profile:focus-visible {
    background: var(--occ-line);
    outline: none;
}

.xn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--occ-accent-soft);
    color: var(--occ-accent);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.xn-profile__name {
    color: var(--occ-ink);
    font-size: .875rem;
    font-weight: 500;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .xn-nav__label {
        display: none;
    }

    .xn-nav__caret {
        display: none;
    }

    .xn-nav__trigger {
        padding: 0 .55rem;
    }
}

@media (max-width: 991.98px) {

    .xn-cmd__placeholder,
    .xn-cmd__kbd {
        display: none;
    }

    .xn-cmd {
        flex: 0 0 auto;
        width: 38px;
        max-width: 38px;
        padding: 0;
        justify-content: center;
        margin: 0 .25rem;
        cursor: pointer;
    }

    /* A busca já é só a lupa: nada mais aqui dentro cede espaço, quem rola é o menu (<768px). */
    .xn-actions {
        flex-shrink: 0;
    }

    .xn-profile__name,
    .xn-profile__caret {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .xn-navbar__inner {
        padding: 0 .5rem;
        gap: .125rem;
    }

    .xn-nav {
        flex-shrink: 1;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .xn-nav::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .xn-nav__trigger,
    .xn-nav__icon,
    .xn-nav__caret,
    .xn-menu__item,
    .xn-menu__icon,
    .xn-cmd,
    .xn-icon-btn,
    .xn-profile {
        transition: none !important;
    }

    .xn-menu.dropdown-menu.show {
        animation: none !important;
    }
}