/* Shared styles for the Sammuki Enterprises fleet app. Design tokens: Apple/iOS/macOS HIG palette (system grays + accent blue), light/dark via prefers-color-scheme. Token NAMES are unchanged from the pre-redesign "spec sheet" palette (--amber/--line/--panel-2 etc still exist and mean the same structural role) even though several values now point at very different colours (e.g. --amber is the app's primary accent and is now Apple system blue, not literal amber) - every page's own inline style="color:var(--amber)" etc still works unmodified this way. Don't rename tokens without grepping every page first. */ /* ---- Cross-page navigation transitions ---- This app has no SPA router - every sidebar click is a real full-page navigation to a separate .html file (see each page's own requireAuth()/renderHeader() boot block), so a same-page content-swap fade (like the Dashboard's stage-pill transition) isn't possible between pages the way it is within one. The native View Transitions API is the right tool for this instead: `navigation: auto` opts every same-origin navigation into an automatic cross-fade of the outgoing/incoming page, entirely browser-driven, with zero per-page JS. Unsupported browsers (older Firefox, older Safari) just navigate instantly as they already do today - this is additive, never a regression. Duration shortened from the ~0.25s browser default to roughly match the Dashboard pill transition's own feel. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { /* Confirmed working at 3s (visible in Sam's own browser, cranked up deliberately to make that unambiguous - see git history/session notes), dialed back from there rather than from the original 0.18s guess. Same duration as the Dashboard's stage-pill thumb slide (.stage-segmented .thumb in this file) so the two motion cues feel consistent. */ animation-duration: 0.28s; animation-timing-function: ease; } :root { --bg: #F2F2F7; --panel: #FFFFFF; --panel-2: #F2F2F7; --line: #D8D8DE; --line-hair: rgba(60,60,67,0.16); --text: #1C1C1E; --text-dim: #6E6E73; --amber: #007AFF; /* primary accent (Apple system blue) */ --amber-dim: #B9DBFF; --amber-wash: rgba(0,122,255,0.12); /* A more visibly-tinted faint ring than --amber-wash's own 12% - used where a ring specifically needs to read as "this is the same blue as the solid accent fill nearby", not just a generic soft shadow (e.g. the stage-track's current-stage dot and its previewed-stage counterpart - Sam flagged that at --amber-wash's opacity the ring around a previewed dot looked plain grey, not recognisably blue). color-mix() against var(--amber) directly (not a hardcoded rgba pair) means this auto-follows whichever --amber value is active - no separate dark-mode override needed, unlike most tokens here. */ --amber-ring: color-mix(in srgb, var(--amber) 35%, transparent); --green: #248A3D; --red: #D70015; --blue: #5856D6; /* secondary/informational accent (system indigo) - distinct from --amber so the two meanings never look identical */ --orange: #C56A00; /* caution tier (e.g. the EV/fuel reconciliation window) - distinct from --amber now that --amber IS the primary accent, or this tier would visually read as "the same thing as the accent colour" instead of "a warning" */ --orange-wash: rgba(255,149,0,0.14); --purple: #AF52DE; /* Personal Vehicle Usage cost-recovery tier (worker-profile.html, payroll-worker.html) - its own hue rather than reusing --red's generic "deduction" meaning, so it reads at a glance as "vehicle personal use" specifically on a worker's pay card. Apple systemPurple, same "distinct so it doesn't read as the same thing" reasoning as --blue/--orange above. */ --purple-wash: rgba(175,82,222,0.12); --bg-chrome: #F5F5F9; /* sidebar + toolbar background. The mockup's own token (rgba(246,246,249,0.78) over its #F2F2F7 page bg) actually composites to something slightly LIGHTER than the page, not darker - confirmed by sampling the live mockup directly. Two earlier attempts (#E8E8ED, #ECECF1) overcorrected into a visibly darker grey chasing "not pure white", when the real fix was just squashing the inline-style bug (see git history/session notes) that was forcing actual #FFFFFF - the intended tint was always this subtle. */ --pill-track: #E5E5EA; /* .stage-segmented/.mini-segmented's resting track - deliberately its OWN token, not --panel-2, after Sam flagged the pill bars barely showing up against the page. Root cause: --panel-2 (#F2F2F7) is byte-identical to --bg (#F2F2F7) in light mode, so the track had genuinely zero contrast - only the white active thumb's shadow gave the control any definition at all. #E5E5EA is Apple's systemGray5 (one step down from --bg's systemGray6), a real HIG token rather than an arbitrary guess. Reusing --panel-2 itself for the fix was deliberately avoided - it's used broadly for hover states/badges/disabled backgrounds elsewhere, and darkening it globally would have changed all of those too. */ --fy-selector-bg: var(--pill-track); /* Sam's direct ask: the FY selector pill read visibly lighter than the Admin/Sign-out .icon-btn circles next to it in the header. First diagnosis was wrong - a getComputedStyle check on #fy-selector itself came back identical to --pill-track and was misread as "so it's just an optical illusion, darken it further" (#D1D1D6, one notch past --pill-track), but that check was reading the WRONG element - enhancePrettySelect() (app.js) makes the real app-wide, not just ones inside a .field wrapper - mirrors the same reasoning already established for the bare `select {}` rule below: several pages build a compact inline input outside the .field/form-grid pattern (e.g. Trip Workflow's expense-entry row - Total ($), Litres, Location - previously rendered with zero styling at all, plain browser-default borders, next to an already-styled select in the same row). No width:100% here for the same inline-compactness reason .field opts into it separately below; checkbox/radio/file/date keep their own native appearance (a styled checkbox/radio needs a different treatment entirely, and file/date pickers have their own OS-native chrome no background/border override touches anyway). */ input:not([type=checkbox]):not([type=radio]):not([type=file]) { background: var(--panel-2); border: none; color: var(--text); padding: 10px 11px; border-radius: 9px; font-size: 13px; font-family: inherit; box-sizing: border-box; } .field input { width: 100%; } /* Every outside that pattern, and a native select keeps its OS dropdown chrome (arrow box, extra padding/height baked into the widget) even when given the same background/padding/radius as a sibling - appearance:none strips that, with a custom chevron standing in for the native arrow (same approach already used for #fy-selector). */ select { /* No width:100% here - unlike .field's stacked layout where full-width makes sense, plenty of selects app-wide are meant to stay compact and inline (e.g. a worker picker sitting next to a row of text), and forcing them to stretch would be a new bug, not a fix. .field select opts into full width separately, below. */ background: var(--panel-2); border: none; color: var(--text); padding: 10px 11px; border-radius: 9px; font-size: 13px; font-family: inherit; box-sizing: border-box; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px; padding-right: 32px; } .field select { width: 100%; } select:focus { outline: 2px solid var(--amber); outline-offset: 1px; } /* App-wide custom dropdown (Sam's explicit ask, see enhancePrettySelect() in app.js) - the in a .pretty-select-wrap and keeps it in the DOM (invisible, absolutely positioned, pointer-events:none) purely as the value/name source of truth - .pretty-select-trigger is the visible control, styled to look identical to a plain select above (same background/padding/radius/ chevron), and .pretty-select-menu is the custom-styled replacement for the native option popup. */ .pretty-select-wrap { position: relative; } .pretty-select-wrap select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .pretty-select-trigger { width: 100%; /* A