/* ============================================================================ AU ONE ERP · au-shell.css — the shared application shell ---------------------------------------------------------------------------- Loaded on every active page, right after au-theme-boot.js. Styles ONLY: • the compact AU One top bar (.au-shellbar) injected by au-shell.js • the Skip-to-Content control • the navigation loading indicator • shared safe-area / responsive guardrails that cannot move module layout SELF-CONTAINED: every color it needs is defined here (au-shell vars), so it renders identically on pages that do NOT load au-tokens.css (studio, bom, payslip preview, developer). All selectors are .au-shell* / .au-skip prefixed — zero collision with module CSS. Presentation only. No authorization, no business rules. ============================================================================ */ :root{ --au-sh-bg: #f4f3ec; --au-sh-ink: #1c1e16; --au-sh-muted: #6d735e; --au-sh-line: #e3e1d4; --au-sh-accent: #748040; --au-sh-accent-2:#A3B25E; --au-sh-press: rgba(116,128,64,.14); } html[data-theme="dark"]{ --au-sh-bg: #12130b; --au-sh-ink: #f3f5f0; --au-sh-muted: #9aa08a; --au-sh-line: #262a1c; --au-sh-press: rgba(163,178,94,.16); } /* --------------------------------------------------------------------------- Skip to content — first focusable element on the page. Visually hidden until keyboard-focused, then a clear pill under the bar. --------------------------------------------------------------------------- */ .au-skip{ position:absolute; left:12px; top:-48px; z-index:100000; background:var(--au-sh-accent); color:#fff; font:700 13px/1 'Archivo',system-ui,sans-serif; padding:11px 16px; border-radius:10px; text-decoration:none; transition:top .15s ease; } .au-skip:focus-visible{ top:calc(8px + env(safe-area-inset-top,0px)); outline:2px solid #fff; outline-offset:2px; } /* --------------------------------------------------------------------------- The compact top bar. STATIC (scrolls with the page) by design: 21 pages carry their own sticky headers/drawers/bottom bars, and a fixed global bar would overlap or fight them. Static = can never cover module content. --------------------------------------------------------------------------- */ .au-shellbar{ box-sizing:border-box; display:flex; align-items:center; gap:8px; /* Full-bleed even when the host is itself a flex/grid container (index.html centers its app column with flex): the bar must always span the viewport and never participate as a shrunken flex item. */ width:100%; flex:none; align-self:stretch; /* position:relative + a small explicit z-index: several pages (index.html) paint a decorative position:fixed background at z-index:0 UNDER their own content. A plain static, non-stacked element paints BELOW any positioned sibling regardless of that sibling's z-index value, so without this the bar was fully invisible under that background — found via live browser verification, not assumed. 1 clears any z-index:0 decorative layer while staying far below real overlays/modals (au-tokens.css: --au-z-overlay 900, --au-z-modal 9000). */ position:relative; z-index:1; min-height:42px; padding:calc(5px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 5px calc(10px + env(safe-area-inset-left,0px)); background:var(--au-sh-bg); color:var(--au-sh-ink); border-bottom:1px solid var(--au-sh-line); font-family:'Archivo','Lexend',system-ui,'Segoe UI',Roboto,sans-serif; } .au-shellbar *{ box-sizing:border-box; } .au-shellbar .au-sh-mark{ flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:linear-gradient(150deg,var(--au-sh-accent-2),var(--au-sh-accent)); color:#12130a; font:800 11.5px/1 'Archivo',system-ui,sans-serif; letter-spacing:.02em; user-select:none; } .au-shellbar .au-sh-title{ flex:1; min-width:0; display:flex; align-items:baseline; gap:7px; white-space:nowrap; overflow:hidden; } .au-shellbar .au-sh-app{ flex:none; font-weight:800; font-size:12.5px; letter-spacing:.03em; } .au-shellbar .au-sh-mod{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:600; font-size:12px; color:var(--au-sh-muted); } /* Bar controls — compact visually, ~44px effective touch target via padding. */ .au-shellbar .au-sh-btn{ flex:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; min-height:36px; padding:7px 10px; margin:0; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--au-sh-ink); font:700 12px/1 'Archivo',system-ui,sans-serif; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background .12s ease, transform .1s ease; } .au-shellbar .au-sh-btn:hover{ background:var(--au-sh-press); } .au-shellbar .au-sh-btn:active{ transform:scale(.95); } .au-shellbar .au-sh-btn svg{ width:18px; height:18px; flex:none; } .au-shellbar .au-sh-btn .au-sh-lbl{ display:none; } @media (min-width:560px){ .au-shellbar .au-sh-btn .au-sh-lbl{ display:inline; } } /* Focus visibility — same ring on every page, including those without au-ux-v2.css (studio, bom, payslip preview, developer). */ .au-skip:focus-visible, .au-shellbar .au-sh-btn:focus-visible{ outline:2px solid var(--au-sh-accent-2); outline-offset:2px; } /* --------------------------------------------------------------------------- Navigation loading indicator — 2px accent line at the very top while the next document is being fetched. Fixed + 3px tall: cannot cover content. --------------------------------------------------------------------------- */ .au-navload{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100001; background:linear-gradient(90deg,transparent 0%,var(--au-sh-accent-2) 35%,var(--au-sh-accent) 65%,transparent 100%); background-size:220% 100%; animation:au-navload 1s linear infinite; pointer-events:none; } @keyframes au-navload{ from{ background-position:200% 0; } to{ background-position:-20% 0; } } /* --------------------------------------------------------------------------- Page-entry — opacity only (a transform here would re-parent every module's position:fixed chrome; opacity cannot). Killed for reduced-motion and for the app's own body.reduce preference. --------------------------------------------------------------------------- */ @keyframes au-page-in{ from{ opacity:.4; } to{ opacity:1; } } @media (prefers-reduced-motion:no-preference){ html.au-has-shell body{ animation:au-page-in .16s ease-out; } } body.reduce, html.au-has-shell body.reduce{ animation:none !important; } @media (prefers-reduced-motion:reduce){ .au-skip{ transition:none; } .au-shellbar .au-sh-btn{ transition:none; } .au-navload{ animation-duration:2.2s; } html.au-has-shell body{ animation:none; } } /* --------------------------------------------------------------------------- Retired page-local duplicates. Once the shell is active (html.au-has-shell) the page's own top-chrome Home / theme buttons are hidden so exactly one effective control of each kind remains. In-settings preference controls (e.g. Profile → appearance) are NOT chrome and are left alone. --------------------------------------------------------------------------- */ /* Two families: (1) explicit toolbar Home/theme controls with their own class name (construction/estimator/studio use .homebtn/.themebtn/ #backHomeBtn), (2) the "back to AU One home" link every other page carries under a DIFFERENT class name per page (.gbtn, .atn-back, .pv-home, …) but the SAME aria-label — matched generically by that label + destination rather than enumerating every page's own class name, so a future page using yet another class name is still covered. Deliberately scoped to href="index.html"/"../index.html" so it can never match a DIFFERENT destination that merely mentions "home" in passing (e.g. Procurement's own .back button returns to construction.html — a different, legitimate target, left untouched) — and never matches an in-page navigation tab (e.g. Profile's own Home/Projects/Tasks bottom tab bar, which is real in-app navigation, not chrome). :not(.au-sh-btn) on the generic href+aria-label rules is required, not decorative — au-shell.js's OWN Home link (#auShellHome) is deliberately built with the exact same href="index.html" + aria-label="AU One Home" convention (the semantically correct choice), which means without this exclusion the shell would self-hide its own button on every page and silently fall back to whatever legacy control the page happened to still have — found via live browser inspection on construction.html, where #auShellHome was display:none and only the page's own #auBackLauncher remained. */ html.au-has-shell .homebtn, html.au-has-shell #homeBtn, /* construction/design/estimator: id is consistent even where the class name (.homebtn) isn't */ html.au-has-shell .themebtn, html.au-has-shell #themeBtn, /* construction/design/estimator/studio: same — class varies (.themebtn/.theme-btn), id doesn't */ html.au-has-shell a[href="index.html"][aria-label*="home" i]:not(.au-sh-btn), html.au-has-shell a[href="../index.html"][aria-label*="home" i]:not(.au-sh-btn), html.au-has-shell a[data-au-home-link]{ display:none !important; } /* --------------------------------------------------------------------------- Shared responsive guardrails — deliberately minimal and layout-safe. --------------------------------------------------------------------------- */ /* The shell's own imagery can never stretch. */ .au-shellbar img{ max-width:100%; height:auto; } /* Opt-in helper for module tables: controlled horizontal scrolling instead of shrinking the whole page. Wrap any wide table in .au-scroll-x. */ .au-scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .au-scroll-x > table{ min-width:640px; } /* Inline icon sizing for emoji→Lucide replacements inside existing module buttons/links: follow the local font size so no control changes height. Scoped to .au-inline — module icons that size .auic themselves are untouched. */ .auic.au-inline{ width:1.05em; height:1.05em; vertical-align:-0.18em; } [data-au-icon]{ display:inline-flex; align-items:center; } [data-au-icon] .auic{ width:1.05em; height:1.05em; } /* Print: the global shell is app chrome, never part of a printed document. */ @media print{ .au-shellbar, .au-skip, .au-navload{ display:none !important; } } /* --------------------------------------------------------------------------- 16px input floor (2026-08-15) — prevents iOS Safari's automatic zoom on focus, which is what every active page's own viewport meta used to work around with maximum-scale=1.0;user-scalable=no (removed page-by-page: that also blocks legitimate pinch-zoom, a WCAG 1.4.4 issue). A static per-page audit found ~40 existing form-control rules across 10 pages set below 16px, several inside dense grid/tracker cells (estimator.html, incentive tracker) where editing every individual selector risked breaking tight column widths. ONE centralized, mobile-only override is safer than dozens of scattered edits and can never drift out of sync with a new page's own input CSS. !important is deliberate: this is a platform-behavior fix, not a visual opinion, so it must always win regardless of a module's own selector specificity. Desktop/tablet keep each page's own compact sizing (≥768px) — the zoom problem is iOS/Android-only. */ @media (max-width:767px){ input, select, textarea{ font-size:16px !important; } } /* --------------------------------------------------------------------------- GLOBAL MODULE DRAWER (2026-08-18) — the burger on every page's shell bar opens this slide-in panel of every AU One module, so Finance → Construction → Design is one tap from anywhere. Same self-contained token set as the rest of the shell (renders identically without au-tokens.css); dark mode rides html[data-theme="dark"] like every other shell piece. --------------------------------------------------------------------------- */ .au-sh-burger{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:2px; flex:0 0 auto; border:1px solid var(--au-sh-line); border-radius:10px; background:transparent; color:var(--au-sh-ink); cursor:pointer; transition:background .12s, border-color .12s; } .au-sh-burger:hover{ background:var(--au-sh-press); border-color:var(--au-sh-accent); } .au-sh-burger:focus-visible{ outline:2px solid var(--au-sh-accent); outline-offset:2px; } .au-shnav-bd{ position:fixed; inset:0; z-index:100001; background:rgba(10,12,6,.5); opacity:0; pointer-events:none; transition:opacity .18s ease; } .au-shnav-bd.show{ opacity:1; pointer-events:auto; } .au-shnav{ position:fixed; top:0; left:0; bottom:0; z-index:100002; width:min(300px, 86vw); background:var(--au-sh-bg); color:var(--au-sh-ink); border-right:1px solid var(--au-sh-line); box-shadow:0 0 40px rgba(0,0,0,.25); transform:translateX(-102%); transition:transform .2s ease; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 10px calc(16px + env(safe-area-inset-bottom)); font-family:'Archivo',system-ui,sans-serif; } .au-shnav.show{ transform:none; } .au-shnav-hd{ display:flex; align-items:center; gap:9px; padding:8px 6px 12px; border-bottom:1px solid var(--au-sh-line); margin-bottom:8px; } .au-shnav-hd b{ font-size:14px; letter-spacing:.02em; } .au-shnav-hd .au-sh-mark{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; flex:0 0 auto; background:var(--au-sh-accent); color:#fff; font:800 12px/1 'Archivo',system-ui,sans-serif; } .au-shnav-x{ margin-left:auto; width:32px; height:32px; border-radius:9px; border:1px solid var(--au-sh-line); background:transparent; color:var(--au-sh-muted); font:600 18px/1 'Archivo',system-ui,sans-serif; cursor:pointer; } .au-shnav-x:hover{ color:var(--au-sh-ink); border-color:var(--au-sh-accent); } .au-shnav-g{ font:800 10px/1 'Archivo',system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--au-sh-muted); padding:12px 8px 5px; } .au-shnav-a{ display:flex; align-items:center; gap:10px; padding:9px 10px; margin:1px 0; border-radius:10px; color:var(--au-sh-ink); text-decoration:none; font:600 13.5px/1.25 'Archivo',system-ui,sans-serif; transition:background .12s; } .au-shnav-a:hover{ background:var(--au-sh-press); } .au-shnav-a:focus-visible{ outline:2px solid var(--au-sh-accent); outline-offset:-2px; } .au-shnav-a.on{ background:var(--au-sh-accent); color:#fff; } .au-shnav-ic{ width:22px; text-align:center; flex:0 0 auto; font-size:15px; } html.au-shnav-open, html.au-shnav-open body{ overflow:hidden; } @media (prefers-reduced-motion: reduce){ .au-shnav, .au-shnav-bd{ transition:none; } } @media print{ .au-sh-burger, .au-shnav, .au-shnav-bd{ display:none !important; } }