/* ═══════════════════════════════════════════════════════════════ APP SHELL — Sidebar + Content layout for internal app pages Fiscalização / Sistema Interno ═══════════════════════════════════════════════════════════════ */ /* ── Reset body for shell layout ────────────────────────────── */ .app-shell-body { padding-top: 0 !important; background: var(--bg); overflow: hidden; /* iOS: impede rubber-band horizontal (sobra à direita) e trava a largura */ overflow-x: hidden; max-width: 100%; width: 100%; overscroll-behavior: none; } /* iOS Safari: o próprio das telas de app não deve rolar/estourar */ html:has(> .app-shell-body) { overflow: hidden; max-width: 100%; height: 100dvh; } /* ── Shell wrapper ────────────────────────────────────────────── */ .app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; } /* Sombra da placa da marca. Piso literal + `color-mix` no `@supports`, como o restante da tinta de marca (ver design.css §7.4). */ :root { --sombra-marca: rgba(15,52,36,.25); } @supports (color: color-mix(in srgb, red 50%, transparent)) { :root { --sombra-marca: color-mix(in srgb, var(--brand-700) 30%, transparent); } } /* ── Sidebar ──────────────────────────────────────────────────── */ .app-sidebar { width: 280px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100vh; height: 100dvh; /* `overflow: visible`, e isso é a raiz de três defeitos. Era `hidden`, e recortava tudo o que precisava sair da caixa: o botão de recolher (que ficava metade fora), e o menu do usuário no rodapé — um dropdown de 190px que no trilho de 52px era cortado pela metade. A contenção não se perde: `.sidebar-nav` tem o próprio `overflow-y: auto; overflow-x: hidden`, e é ele que rola. Os outros filhos (marca, linha do botão, rodapé) têm altura fixa e `flex-shrink: 0`, então nada mais tem como transbordar. O `hidden` aqui era cinto e suspensório que custava dois controles. */ overflow: visible; position: relative; z-index: 50; transition: width var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } /* ── Estado recolhido (trilho de 52px) ──────────────────────────────────── O trilho mostra os ícones dos itens da área (core/nav_gov.py), sem rótulo; o nome aparece na fita ao passar o mouse ou o foco (`[data-label]::after`, mais abaixo). O seletor de área some: expande-se a barra para trocar. */ .app-sidebar.collapsed { width: 52px; } /* `display: none` e não `opacity: 0; width: 0`. Era essa a causa do desalinhamento dos ícones: `.sidebar-label` tem `flex: 1`, e `flex-basis: 0 + flex-grow: 1` continua **absorvendo o espaço livre** mesmo com `width: 0`. O rótulo invisível empurrava o ícone para fora do centro. Fora do fluxo, ele não empurra nada. De quebra, deixa de animar `width`, que causa layout thrash a cada recolhimento. A transição de largura fica só na `