/* ===========================================================================
   SIDEBAR DO AUREASYSTEMS — folha própria, soberana.

   Por que este arquivo existe
   ---------------------------
   A sidebar usava as classes do tema (`nxl-*`), então TODA regra nossa
   disputava com uma regra do `theme.min.css` no mesmo seletor. Disputa se
   ganha com `!important` e seletor longo — e foi assim que a sidebar chegou a
   7 camadas empilhadas, ~989 linhas e 266 `!important`, com 40% de CSS morto
   e bugs onde uma camada antiga vencia a nova por especificidade.

   O markup agora usa nosso namespace `as-side*`, que o tema não conhece.
   Sem disputa, não precisa de `!important`: este arquivo não tem NENHUM.

   Regras de convivência
   ---------------------
   * CSS de sidebar mora AQUI, nunca no <style> do base.html. Um bloco novo lá
     é sinal de que a dívida está voltando a crescer.
   * A largura sai de --as-side-w, num lugar só. Quem precisa reagir (o
     container do conteúdo, o header) lê a variável — não repete o número.
   * O estado recolhido é html[data-side="rail"], NOSSO. Antes era
     `html.minimenu`, do tema, e o JS do vendor mexia nela sozinho: qualquer
     resize entre 1024 e 1600px recolhia a barra à força, ignorando a escolha
     do usuário.
   =========================================================================== */

:root {
    --as-side-w: 266px;          /* largura aberta */
    --as-side-rail: 100px;       /* largura do trilho (recolhida) */

    --as-side-bg: #001a3f;       /* azul escuro da marca */
    --as-side-gold: #fdc400;     /* dourado da marca */
    --as-side-txt: #cbddee;
    --as-side-txt-dim: #a6c2db;
    --as-side-txt-strong: #ffffff;
    --as-side-line: rgba(255, 255, 255, 0.1);
    --as-side-hover: rgba(255, 255, 255, 0.08);
    --as-side-active: rgba(253, 196, 0, 0.2);
}

html[data-side="rail"] {
    --as-side-w: var(--as-side-rail);
}

/* --------------------------------------------------------------------------
   Casca
   -------------------------------------------------------------------------- */
.as-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1026;
    display: flex;
    flex-direction: column;
    width: var(--as-side-w);
    background: var(--as-side-bg);
    border-right: 1px solid var(--as-side-line);
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* O conteúdo e o cabeçalho seguem a largura pela variável — um lugar só.
   Estes seletores ainda são do tema porque só a SIDEBAR virou soberana; o
   resto da casca continua sendo do Nxl. */
.nxl-container {
    margin-left: var(--as-side-w);
    transition: margin-left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* header e page-header são `position: fixed` no tema (com left: 280px fixo).
   Pra eles a medida certa é `left`, não margem — usar margem SOMA ao left do
   tema e joga a barra superior pra direita. */
.nxl-header,
.page-header {
    left: var(--as-side-w);
    margin-left: 0;
    transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Camada intermediária entre a barra e o conteúdo. Sem participar da cadeia
   flex ela assume a altura do próprio conteúdo, e a área rolável para no meio
   da barra — a lista ficava cortada com espaço vazio embaixo. */
.as-side__wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.as-side__scroll {
    flex: 1;
    min-height: 0;
    padding: 4px 6px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.as-side__scroll::-webkit-scrollbar { width: 8px; }
.as-side__scroll::-webkit-scrollbar-track { background: transparent; }
.as-side__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Marca
   -------------------------------------------------------------------------- */
.as-side__brand {
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: 14px 13px 12px;
    border-bottom: 1px solid var(--as-side-line);
}
.as-side__brandlink {
    display: inline-flex;
    align-items: flex-end;
    gap: 6px;
    text-decoration: none;
}
.as-side__brandlink .logo { height: 22px; width: auto; display: block; }
/* fundo escuro nos dois temas → sempre o wordmark branco */
.as-side__brandlink .sidebar-logo-light-mode { display: none; }
.as-side__brandlink .sidebar-logo-dark-mode { display: inline-block; }
.as-side__brandlink .brand-sys {
    align-self: flex-end;
    margin-bottom: 2px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--as-side-gold);
}
/* marca compacta (só o ícone) — aparece no trilho */
.as-side__brandlink .brand-abbr { display: none; height: 34px; width: auto; }

/* --------------------------------------------------------------------------
   Itens
   -------------------------------------------------------------------------- */
.as-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.as-side__row { margin: 0; }
.as-side__row.section-hidden { display: none; }

.as-side__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--as-side-txt);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.as-side__link:hover { background: var(--as-side-hover); color: var(--as-side-txt-strong); }
.as-side__link:hover .as-side__icon { color: var(--as-side-txt-strong); }
.as-side__link:focus-visible { outline: 2px solid var(--as-side-gold); outline-offset: -2px; }

.as-side__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--as-side-txt-dim);
    transition: color 0.14s ease;
}
.as-side__icon i { font-size: 15px; }
.as-side__text { min-width: 0; overflow-wrap: break-word; }

/* item da tela atual: dourado chapado, texto branco, ícone dourado.
   Mesmo padding do item normal — o texto não desloca ao ativar. */
.as-side__row.active > .as-side__link,
.as-side__link.active,
.as-side__link[aria-current="page"] {
    background: var(--as-side-active);
    color: var(--as-side-txt-strong);
    font-weight: 600;
}
.as-side__row.active > .as-side__link .as-side__icon,
.as-side__link.active .as-side__icon,
.as-side__link[aria-current="page"] .as-side__icon { color: var(--as-side-gold); }

.as-side__link .badge { margin-left: auto; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Módulos (o primeiro nível)
   -------------------------------------------------------------------------- */
.as-side__module { margin: 1px 0; }
.as-side__module > label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 32px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--as-side-txt);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}
.as-side__module > label:hover { background: var(--as-side-hover); color: var(--as-side-txt-strong); }
.as-side__module .caption-icon {
    flex: 0 0 18px;
    width: 18px;
    text-align: center;
    font-size: 15px;
    color: var(--as-side-txt-dim);
    transition: color 0.14s ease;
}
.as-side__module > label:hover .caption-icon { color: var(--as-side-txt-strong); }
.as-side__module .caption-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.as-side__module .caption-chevron { font-size: 13px; color: var(--as-side-txt-dim); transform: rotate(-90deg); }
.as-side__module.caption-active > label .caption-icon { color: var(--as-side-gold); }

/* pílula de pendências do módulo (injetada por JS quando > 0) */
.as-side__module .caption-pending {
    display: none;
    background: #dc3545;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    min-width: 18px;
    text-align: center;
}
.as-side__module.has-pending .caption-pending { display: inline-block; }

.as-side__divider {
    padding: 14px 10px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #9bb8d4;
    list-style: none;
}

/* --------------------------------------------------------------------------
   Drill-down: dentro de um módulo, os outros somem
   -------------------------------------------------------------------------- */
.as-side.is-drilled .as-side__list > .as-side__module:not(.drill-open),
.as-side.is-drilled .as-side__divider { display: none; }

.as-side.is-drilled .as-side__module.drill-open {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--as-side-line);
}
.as-side.is-drilled .drill-open > label { color: var(--as-side-txt-strong); font-size: 13px; font-weight: 700; }
.as-side.is-drilled .drill-open > label .caption-icon { color: var(--as-side-gold); }
.as-side.is-drilled .drill-open > label::before {
    content: "\2039";                   /* ‹ — volta pros módulos */
    font-size: 19px;
    line-height: 1;
    color: var(--as-side-txt);
}
.as-side.is-drilled .drill-open > label::after {
    content: "Voltar";
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--as-side-txt-dim);
}
.as-side.is-drilled .drill-open > label:hover::before,
.as-side.is-drilled .drill-open > label:hover::after { color: var(--as-side-txt-strong); }
.as-side.is-drilled .drill-open .caption-chevron { display: none; }

/* --------------------------------------------------------------------------
   Busca — acha em TODOS os módulos, não só no aberto
   -------------------------------------------------------------------------- */
.as-side__filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.09);
}
.as-side__filter i { color: var(--as-side-txt); font-size: 14px; }
.as-side__filter input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--as-side-txt);
    font-size: 12.5px;
    outline: none;
}
.as-side__filter input::placeholder { color: var(--as-side-txt-dim); }
/* O input do filtro tem `outline:none` porque a moldura é do container. Sem
   isto, quem chega nele pelo Tab não vê onde está. */
.as-side__filter:has(input:focus-visible) {
    outline: 2px solid var(--as-side-gold);
    outline-offset: 1px;
}

.as-side.is-searching .as-side__list > .as-side__module { display: none; }
.as-side.is-searching .as-side__row.search-hit { display: block; }

/* --------------------------------------------------------------------------
   Trilho (recolhida): um ícone por módulo
   -------------------------------------------------------------------------- */
html[data-side="rail"] .as-side__scroll { padding-left: 0; padding-right: 0; }
html[data-side="rail"] .as-side__list > .as-side__row,
html[data-side="rail"] .as-side__filter,
html[data-side="rail"] .as-side__divider { display: none; }
/* no trilho não existe "dentro do módulo": mostra todos */
html[data-side="rail"] .as-side.is-drilled .as-side__list > .as-side__module { display: block; }
/* Nem "dentro da busca": o campo de busca não existe no trilho, então um
   `is-searching` esquecido escondia TODOS os módulos e deixava o trilho vazio.
   O sidebar-collapse.js já limpa a busca ao recolher; esta regra é o cinto —
   nenhum estado da barra aberta pode apagar os ícones do trilho. */
html[data-side="rail"] .as-side.is-searching .as-side__list > .as-side__module { display: block; }

html[data-side="rail"] .as-side__module { margin: 2px 0; }
html[data-side="rail"] .as-side__module > label {
    justify-content: center;
    width: 44px;
    height: 40px;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    border-radius: 8px;
    font-size: 0;                       /* some o texto, fica o ícone */
    gap: 0;
}
html[data-side="rail"] .as-side__module > label::before,
html[data-side="rail"] .as-side__module > label::after { content: none; }

/* No trilho não existe "dentro do módulo": se a barra for recolhida ENQUANTO
   um módulo está aberto, o cabeçalho dele mantinha o texto e o "‹ … Voltar",
   que transbordavam pra fora dos 100px. As regras do drill-down (0,3,1) vencem
   as do trilho (0,2,2), então aqui elas são repetidas com o mesmo alcance. */
html[data-side="rail"] .as-side.is-drilled .drill-open > label {
    width: 44px;
    font-size: 0;
    font-weight: 600;
    justify-content: center;
}
html[data-side="rail"] .as-side.is-drilled .drill-open > label::before,
html[data-side="rail"] .as-side.is-drilled .drill-open > label::after { content: none; }
html[data-side="rail"] .as-side.is-drilled .as-side__module.drill-open {
    margin: 2px 0;
    padding-bottom: 0;
    border-bottom: 0;
}
html[data-side="rail"] .as-side__module .caption-icon { font-size: 18px; }
html[data-side="rail"] .as-side__module .caption-meta { display: none; }
html[data-side="rail"] .as-side__module:hover > label,
html[data-side="rail"] .as-side__module.rail-open > label { background: rgba(255, 255, 255, 0.13); }
html[data-side="rail"] .as-side__module.caption-active > label { background: rgba(253, 196, 0, 0.22); }
/* No trilho o ícone É o botão que abre o módulo — o cursor precisa dizer isso,
   senão o clique parece decorativo e o usuário só descobre por acidente. */
html[data-side="rail"] .as-side__module > label { cursor: pointer; }

html[data-side="rail"] .as-side__brand { justify-content: center; padding: 14px 0 12px; }
html[data-side="rail"] .as-side__brandlink .logo,
html[data-side="rail"] .as-side__brandlink .brand-sys { display: none; }
html[data-side="rail"] .as-side__brandlink .brand-abbr { display: inline-block; }

/* --------------------------------------------------------------------------
   Painel flutuante do módulo (trilho) — montado por sidebar-rail.js
   -------------------------------------------------------------------------- */
.rail-flyout {
    position: fixed;
    z-index: 1045;
    min-width: 210px;
    max-width: 280px;
    max-height: 74vh;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
    background: #04264c;
    box-shadow: 0 18px 44px rgba(0, 8, 20, 0.55);
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
    transition: opacity 0.13s ease, transform 0.13s ease;
}
.rail-flyout.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; }
.rail-flyout__title {
    display: block;
    padding: 5px 9px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--as-side-txt-dim);
}
.rail-flyout a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 6px;
    color: var(--as-side-txt);
    font-size: 13px;
    line-height: 1.25;
    text-decoration: none;
}
.rail-flyout a:hover { background: rgba(255, 255, 255, 0.1); color: var(--as-side-txt-strong); }
.rail-flyout a.is-current { background: var(--as-side-active); color: var(--as-side-txt-strong); font-weight: 600; }
.rail-flyout a.is-current i { color: var(--as-side-gold); }
.rail-flyout a i { flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; color: var(--as-side-txt-dim); }
.rail-flyout a .badge { margin-left: auto; flex-shrink: 0; }
.rail-flyout::-webkit-scrollbar { width: 8px; }
.rail-flyout::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 8px; }

/* --------------------------------------------------------------------------
   Mobile: a barra vira gaveta
   -------------------------------------------------------------------------- */
.as-side__overlay {
    position: fixed;
    inset: 0;
    z-index: 999;                  /* abaixo dos modais (1050+) */
    display: none;
    background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 1024px) {
    /* a barra vira gaveta: sai da tela e entra por cima do conteúdo */
    .as-side {
        width: var(--as-side-open-w, 266px);
        transform: translateX(-100%);
        transition: transform 0.24s ease;
    }
    html.as-side-open .as-side { transform: translateX(0); }
    html.as-side-open .as-side__overlay { display: block; }

    /* no mobile o conteúdo ocupa tudo — a gaveta flutua por cima */
    .nxl-container { margin-left: 0; }
    .nxl-header,
    .page-header { left: 0; }
}

/* --------------------------------------------------------------------------
   Impressão: a barra não vai pro papel
   -------------------------------------------------------------------------- */
@media print {
    .as-side { display: none; }
    .nxl-container,
    .nxl-header { margin-left: 0; }
}