/** * System display scale — zooms the entire UI (layout, tables, controls, spacing, icons). * Applied on so sidebar, topbar, modals, and all pages scale together. * Font size (body.font-*) remains a separate text-only control. */ :root { --app-ui-scale: 1; } html.ui-scale-micro { --app-ui-scale: 0.60; } html.ui-scale-xxminimal { --app-ui-scale: 0.65; } html.ui-scale-xminimal { --app-ui-scale: 0.70; } html.ui-scale-minimal { --app-ui-scale: 0.75; } html.ui-scale-tiny { --app-ui-scale: 0.8; } html.ui-scale-small { --app-ui-scale: 0.85; } html.ui-scale-compact { --app-ui-scale: 0.9; } html.ui-scale-normal { --app-ui-scale: 1; } html.ui-scale-comfortable { --app-ui-scale: 1.1; } html.ui-scale-large { --app-ui-scale: 1.2; } html.ui-scale-xlarge { --app-ui-scale: 1.3; } /* Chromium / Safari: zoom scales every pixel including Tailwind px utilities */ html.ui-scale-micro, html.ui-scale-xxminimal, html.ui-scale-xminimal, html.ui-scale-minimal, html.ui-scale-tiny, html.ui-scale-small, html.ui-scale-compact, html.ui-scale-comfortable, html.ui-scale-large, html.ui-scale-xlarge { zoom: var(--app-ui-scale) !important; } html.ui-scale-normal { zoom: 1 !important; } /* Firefox & browsers without layout zoom (set by ui-scale.js) */ html.ui-scale-engine-transform { zoom: unset !important; overflow-x: hidden; height: 100%; } html.ui-scale-engine-transform body { transform: scale(var(--app-ui-scale, 1)); transform-origin: top left; width: calc(100% / var(--app-ui-scale, 1)); min-height: calc(100vh / var(--app-ui-scale, 1)); } html.ui-scale-engine-transform .app-shell-wrap, html.ui-scale-engine-transform .app { min-height: calc(100vh / var(--app-ui-scale, 1)); } html.ui-scale-engine-transform .fr-report-preview-overlay, html.ui-scale-engine-transform .tx-reports-preview-overlay { position: fixed; inset: 0; z-index: 99999; } @media print { html.ui-scale-micro, html.ui-scale-xxminimal, html.ui-scale-xminimal, html.ui-scale-minimal, html.ui-scale-tiny, html.ui-scale-small, html.ui-scale-compact, html.ui-scale-comfortable, html.ui-scale-large, html.ui-scale-xlarge, html.ui-scale-engine-transform { zoom: 1 !important; overflow: visible !important; height: auto !important; } html.ui-scale-engine-transform body { transform: none !important; width: auto !important; min-height: 0 !important; } }