é um filho directo do flex ROW acima. Sem estas regras, o

cresceria para a largura intrínseca (tabela com nowrap = 1975 px+), impossibilitando o scroll horizontal do .ptbl-tbl-wrap e o scroll vertical do .content. flex: 1 1 0 + min-width: 0 → o

fica limitado ao espaço disponível do ROW. display: flex; flex-direction: column → o .content filho torna-se flex item e as suas regras flex (flex: 1 1 auto; min-height: 0; overflow-y: auto) funcionam. */ .app-content > #main-container > main { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } /* Área scrollável — ocupa todo o espaço horizontal excepto os 6px da scrollbar. padding-top/bottom posicionam o primeiro/último conteúdo abaixo do header e acima do footer; ao fazer scroll o conteúdo sobe para a zona do header e é visto através do backdrop-filter:blur (efeito glass). */ .app .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; /* REGRA ABSOLUTA (todas as páginas): o conteúdo entre header e footer é centrado e nunca ultrapassa --content-max-width. O padding lateral max(0, (100% - cap)/2) empurra o conteúdo para o centro — e como o padding NÃO afeta a barra de scroll, a scrollbar personalizada mantém-se na borda direita do ECRÃ (não acompanha o bloco de conteúdo). O padding em cima/baixo (= header/footer) deixa o conteúdo passar POR TRÁS do header e do footer (efeito glass) ao fazer scroll. Esta é a única regra que impõe a largura; é imune a max-width dos filhos (ex. painéis .default-full-panel) porque vive no próprio container de scroll. */ padding-top: var(--header-height); padding-bottom: var(--footer-height); /* --content-gutter é publicado pela layout.js a partir da largura REAL deste elemento. A fórmula em percentagem fica só como fallback (antes do JS correr): `100%` resolve contra o PAI, que não desconta os 8px da barra de scroll — dava 1432px de bloco em vez de 1440 nas páginas com scroll. */ padding-inline: var(--content-gutter, max(0px, (100% - var(--content-max-width)) / 2)); box-sizing: border-box; /* A barra nativa do .content está ESCONDIDA (base.css, bloco sb-hidden). A barra da página é a .scrollbar-wrap DOM (overlay confinado à faixa entre header e footer). O padding em cima/baixo deixa o CONTEÚDO passar por trás do header/footer; a barra nunca passa. */ } /* Escape ao limite de largura: quando o container tem um filho direto marcado .is-fullbleed — apps full-screen (chat, suporte, configurador) e quadros Kanban (funil de oportunidades, quadro de leads) — remove-se o padding lateral e o conteúdo usa a largura toda. (:has() é Baseline 2023; em navegadores muito antigos degrada para o limite de largura, sem partir.) */ .app .content:has(> .is-fullbleed) { padding-inline: 0; } /* Só o .content de TOPO (filho do

) é o scroll da página. Os .content ANINHADOS dentro de outro .content (painéis de tabs, cards, secções) NÃO podem ser scroll-containers: um elemento com overflow != visible mas sem espaço para scrollar (scrollHeight == clientHeight) "PRENDE" a roda do rato ao próprio (scroll-latching do Chrome) e impede que o scroll chegue ao container real (ex. .ml-scroll-body, ou o próprio .content de topo). Era a causa de "a roda não faz scroll" em vários painéis do CRM. */ .app .content .content { overflow: visible; overscroll-behavior: auto; }