❌ UNSAFE:

...

VERIFICATION COMMAND (run in DevTools - should return 0): document.querySelectorAll('.ui-2026 .ui-2026').length If this returns > 0, you have nested scopes that need to be fixed. Remove .ui-2026 from inner elements, keeping only the outermost wrapper. ============================================================================= */ html { scrollbar-gutter: stable; /* Defensive: clip any sub-element horizontal overflow at the page boundary so transient widget bleeds (Select2 portals, autocomplete dropdowns, etc.) never produce a horizontal page scrollbar. SBOS-ONLINE-604/599/603/625/634: progressive-enhancement pair. `overflow-x: clip` requires Safari 16 / Chrome 90 / Firefox 81 — older iOS Safari (iPhone 7/8/X stuck on iOS 15) and some Android WebViews silently drop the unknown value to `visible`, leaving the app with zero horizontal containment. `overflow-x: hidden` lands first as the fallback (works in every browser); `overflow-x: clip` then wins the cascade where supported. `clip` (not `hidden`) does NOT establish a scroll container, so `position: sticky` descendants (the app header) keep working. The mirrored rule on `body` is belt-and-braces — some legacy WebKit versions respect overflow only on the immediate document root, not the html element. Verified on a real iPhone via the SBOS-ONLINE-604 scoped probe before promotion here. */ overflow-x: hidden; overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; } .ui-2026 { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Base background for UI-2026 pages */ body[class*="ui-2026-scope--"], .ui-2026-main-wrapper { background-color: hsl(var(--background)); } /* Sticky footer layout for UI-2026 screens (footer stays at bottom) */ body[class*="ui-2026-scope--"] { min-height: 100dvh; display: flex; flex-direction: column; } body[class*="ui-2026-scope--"] .main { flex: 1 0 auto; } /* ============================================================================= Form Input Resets ============================================================================= */ /* Hide number input spinners — prevents accidental value changes via click-drag on the stepper arrows. Scoped to .ui-2026 so legacy pages are unaffected. Per-block duplicates (magic-order-entry-shell, invoicing, installation-bucket) are now redundant and can be removed. */ .ui-2026 input[type="number"]::-webkit-outer-spin-button, .ui-2026 input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ui-2026 input[type="number"] { -moz-appearance: textfield; appearance: textfield; } /* Typography - headings within .ui-2026 containers */ .ui-2026 h1, .ui-2026 h2, .ui-2026 h3, .ui-2026 h4, .ui-2026 h5, .ui-2026 h6 { font-family: var(--font-sans); font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: hsl(var(--foreground)); margin-top: 0; } .ui-2026 h1 { font-size: var(--text-3xl); } .ui-2026 h2 { font-size: var(--text-2xl); } .ui-2026 h3 { font-size: var(--text-xl); } .ui-2026 h4 { font-size: var(--text-lg); } .ui-2026 h5 { font-size: var(--text-base); font-weight: 700; } .ui-2026 h6 { font-size: var(--text-sm); font-weight: 700; } /* Monospace elements */ .ui-2026 .font-mono, .ui-2026 code, .ui-2026 pre, .ui-2026 kbd, .ui-2026 samp { font-family: var(--font-mono); } /* ============================================================================= Lucide Icon Fix Legacy style.css sets 'svg path { fill: #242424 !important }' which breaks Lucide stroke-based icons. Counter with higher specificity for .lucide class. ============================================================================= */ .ui-2026 .lucide, .ui-2026 .lucide path { fill: none !important; } /* Text utilities */ .ui-2026 .ui-2026-text-muted { color: hsl(var(--muted-foreground)); } /* ============================================================================= Container Width Override The header.ctp layout wraps content in Bootstrap .container which has max-width: 1684px from ui-v2/master.css. This constrains our .l-page--wide. Override: Remove container constraint when inside UI-2026 scopes. ============================================================================= */ .ui-2026 .container, .ui-2026.container, body[class*="ui-2026-scope--"] .container { max-width: none; width: 100%; padding-inline: 0; /* Let child l-page handle padding */ background-color: transparent; /* Override legacy master.css backgrounds */ } /* Allow l-page variants to control their own width */ .ui-2026 .l-page, .ui-2026 .l-page--wide, .ui-2026 .l-page--extra-wide, .ui-2026 .l-page--fluid { margin-inline: auto; } /* ============================================================================= Legacy #main_content Width Override Multiple legacy CSS files (manufacturing_css/sbos.css, workflow_css/sbos.css, master_file_css/sbos.css, etc.) set #main_content { width: 980px }. This conflicts with UI-2026's responsive l-page system. Override: Allow #main_content to respect its parent's width in UI-2026 contexts. ============================================================================= */ .ui-2026 #main_content, .ui-2026#main_content, body[class*="ui-2026-scope--"] #main_content { width: 100% !important; max-width: none !important; } /* ============================================================================= Legacy Support - Elements outside .ui-2026 that need tokens These use :root variables directly without requiring .ui-2026 ancestor ============================================================================= */ /* Legacy DHTML tooltip styles (shared across views) */ #dhtmltooltip { position: absolute; left: -300px; width: 90px; border-radius: 7px; font-family: Verdana, Geneva, sans-serif; font-size: 11.5px; padding: 2px; background-color: #999; color: #fff; visibility: hidden; z-index: 100; filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } #dhtmlpointer { position: absolute; left: -300px; z-index: 101; visibility: hidden; }