/* Conteúdo largo continua acessível no zoom normal. */
html, body { overflow-x: auto !important; }
#app > .wrap, #app .view, #app .view > .card { min-width: 0; }
#app .view { overflow-x: auto !important; scrollbar-width: auto; scrollbar-color: var(--brand, #198754) var(--bg, #eef2f7); }
#app .table-wrap { width: 100%; max-width: 100%; overflow-x: auto !important; scrollbar-width: auto; scrollbar-color: var(--brand, #198754) var(--bg, #eef2f7); }
#app .table-wrap > table { min-width: max-content; width: 100%; }
#app :is(.view, .table-wrap)::-webkit-scrollbar { width: 12px; height: 12px; }
#app :is(.view, .table-wrap)::-webkit-scrollbar-track { background: var(--bg, #eef2f7); border-radius: 8px; }
#app :is(.view, .table-wrap)::-webkit-scrollbar-thumb { background: var(--brand, #198754); border: 2px solid var(--bg, #eef2f7); border-radius: 8px; }
@media print { #app .view, #app .table-wrap { overflow: visible !important; } }

/* Mantém as barras no limite visível da página, inclusive em listas longas. */
#app .view.active {
  max-height: var(--page-scroll-height, calc(100dvh - 44px)) !important;
  overflow: auto !important;
  scrollbar-gutter: stable;
  padding-bottom: 20px !important;
  scroll-padding: 16px;
}
#app .table-wrap {
  max-height: min(62dvh, 640px);
  overflow: auto !important;
  scrollbar-gutter: stable;
}
#app .view:focus-visible, #app .table-wrap:focus-visible { outline: 2px solid var(--brand, #198754); outline-offset: -2px; }
@media print {
  #app .view.active, #app .table-wrap { max-height: none !important; overflow: visible !important; }
}