/* EDL shared motion layer: quiet, fast transitions for operational screens. */ :root{ --edl-motion-ease:cubic-bezier(.2,.8,.2,1); --edl-motion-fast:160ms; --edl-motion-med:260ms; --edl-motion-shadow:0 10px 28px rgba(15,16,20,.08); --edl-motion-ring:0 0 0 3px rgba(47,107,92,.22); --edl-ui-bg:#F7F8FA; --edl-ui-surface:#FFFFFF; --edl-ui-soft:#F4F5F6; --edl-ui-ink:#15161A; --edl-ui-muted:#6B6F76; --edl-ui-faint:#9A9EA5; --edl-ui-line:#E5E6E8; --edl-ui-green:#2F6B5C; --edl-ui-blue:#3B7ED4; --edl-ui-red:#B5402F; --edl-ui-amber:#7A5500; --edl-ui-radius:8px; --edl-ui-shadow:0 1px 2px rgba(15,16,20,.035), 0 12px 30px rgba(15,16,20,.045); --edl-font-stack:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } /* Dark mode (Aug 2026). Toggled via `data-theme="dark"` on , set by edl-motion.js from the shared `edl_theme` cookie. The first pass only handled the shared canvas and obvious `*-card`/`*-panel` components; the later pass below also bridges the older page-local token names (`--bg`, `--panel`, `--ink`, `--line`, semantic tints, etc.) into the shared dark palette so legacy standalone pages, dynamic modals and inline fragments participate without per-page rewrites. A blanket local-token flip was originally avoided because many pages paired `--ink` with hardcoded white surfaces. That risk is now covered by the explicit hardcoded-white, inline-style, generic-surface and active-state rules below. Keep those protections together with the token bridge. */ :root[data-theme="dark"]{ --edl-ui-bg:#16171B; --edl-ui-surface:#1E2024; --edl-ui-soft:#24262C; --edl-ui-ink:#EDEEF0; --edl-ui-muted:#A8ACB4; --edl-ui-faint:#7A7E86; --edl-ui-line:#2E3138; --edl-ui-green:#34D399; --edl-ui-blue:#60A5FA; --edl-ui-red:#F87171; --edl-ui-amber:#FBBF24; --edl-ui-shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.35); /* Bridge older page-local token names into the shared dark palette. These variables are still widely used in page CSS (`var(--bg)`, `var(--panel)`, `var(--ink-soft)`) and leaving them light makes older modals, drawers, schedule cells and search results look half-themed. Solid active states are protected below with fixed dark fills. */ --bg:var(--edl-ui-bg); --bg-soft:var(--edl-ui-soft); --panel:var(--edl-ui-surface); --card:var(--edl-ui-surface); --ink:var(--edl-ui-ink); --ink-soft:var(--edl-ui-muted); --ink-faint:var(--edl-ui-faint); --line:var(--edl-ui-line); --shadow:var(--edl-ui-shadow); --shadow-soft:var(--edl-ui-shadow); --green:var(--edl-ui-green); --green-bg:rgba(52,211,153,.12); --green-line:rgba(52,211,153,.32); --info:var(--edl-ui-blue); --info-bg:rgba(96,165,250,.12); --info-line:rgba(96,165,250,.32); --amber:var(--edl-ui-amber); --amber-bg:rgba(251,191,36,.12); --amber-line:rgba(251,191,36,.32); --red:var(--edl-ui-red); --red-bg:rgba(248,113,113,.12); --red-line:rgba(248,113,113,.32); --purple:#A78BFA; --purple-bg:rgba(167,139,250,.12); --purple-line:rgba(167,139,250,.32); } /* The site's black EDL logo mark (transparent-background SVG, fill #231f20) is otherwise invisible against a dark page. */ :root[data-theme="dark"] img.badge-sq, :root[data-theme="dark"] img[alt="EDL Electrical"]{ filter:invert(1) brightness(1.7); } /* Known per-page "solid dark fill + forced white text" components (found via a direct search across frontend/**/*.html for background:var(--ink) + color:#fff pairs) -- kept at a fixed dark tone in both themes rather than inverted, since inverting --ink for text legibility elsewhere would otherwise turn these into white-on-white. */ :root[data-theme="dark"] .active, :root[data-theme="dark"] .primary, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .route-btn, :root[data-theme="dark"] .creation-score, :root[data-theme="dark"] .toast, :root[data-theme="dark"] .btn-save-jsa, :root[data-theme="dark"] .chip-assignee, :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .clear-btn, :root[data-theme="dark"] .ec-add-save, :root[data-theme="dark"] .ir-btn-print, :root[data-theme="dark"] .notice-post-btn, :root[data-theme="dark"] .id-avatar, :root[data-theme="dark"] .em-urgent-card, :root[data-theme="dark"] .em-top-btn, :root[data-theme="dark"] div.badge-sq{ background:#15161A !important; color:#fff !important; border-color:#15161A !important; } /* Real bug found via screenshot review (Aug 2026): the sticky header ("frosted glass" .subbar/-top strip) and the auto-injected context strip both hardcode a translucent WHITE background (rgba(255,255,255,.9x)) for the light-theme glass effect -- never updated for dark mode, so in dark mode the header stayed a pale, near-white bar with light (now-invisible) text on top of it, on every single page (both rules are in the shared -top/.subbar selector every page uses). Same glass effect, dark version. */ :root[data-theme="dark"] :where(.subbar,[class$="-top"],[class*="-top "]){ background:rgba(22,23,27,.88) !important; } :root[data-theme="dark"] .edl-context-strip{ background:rgba(30,32,36,.92) !important; } /* Second screenshot-review pass (Aug 2026): everything below is authored entirely inside THIS file, pairing a hardcoded `background:#fff` with text colour already driven by the --edl-ui-* namespace (not a page-local --ink/--bg token) -- so unlike the page-local dual-role tension explained above, these are safe to flip: the text side already goes light in dark mode, it was only ever the background that stayed pinned to white. Left unfixed, this was the single biggest source of "too much bright white in dark mode" -- these components render on nearly every page in the site (the shared context pill, the Refresh Live button, every text input/ select/textarea, and every empty/loading/error state box). */ :root[data-theme="dark"] .edl-context-pill.primary{ background:var(--edl-ui-surface) !important; } :root[data-theme="dark"] .edl-refresh-live{ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; } /* NOTE: `:root[data-theme="dark"] html.edl-motion-ready...` (two separate ancestor/descendant selectors both pointing at the same single element) can never match anything -- cannot be its own descendant. Found via direct rule-matching inspection (Aug 2026): this silently made the three blocks below no-ops on every page since they were written, despite passing every other review. The correct way to combine "is the dark-mode root" with the existing light-mode selector's conditions is to put every condition on the one real element: html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"]. */ html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( input:not([type="checkbox"]):not([type="radio"]), select, textarea ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .empty, .loading, .gate-msg, [class$="-empty"], [class*="-empty "], [class$="-loading"], [class*="-loading "] ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .error, [class$="-error"], [class*="-error "] ){ background:rgba(248,113,113,.12) !important; border-color:rgba(248,113,113,.32) !important; color:#FCA5A5 !important; } /* Broad operational dark mode coverage. Most standalone pages use local one-off class names, but they share practical shape names: card, panel, item, row, bar, hero, controls, metric, summary, quick access, and bottom mobile nav. Keep semantic colours soft and avoid touching true solid danger/success/action fills. */ html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .wrap, .edl-body, .jdb-body, .rs-body, .ob-body, .joh-body, .pk-body, .eq-body, .sto-body, .stk-body, .scan-body, .tat-wrap, .ps-wrap, .mv-body, .yv-body, main, [class$="-body"], [class*="-body "] ){ background:var(--edl-ui-bg) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( h1, h2, h3, h4, strong, .title, [class$="-title"], [class*="-title "], [class$="-name"], [class*="-name "], [class$="-value"], [class*="-value "], [class$="-num"], [class*="-num "] ){ color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( p, small, .meta, .muted, .sub, .hint, [class$="-sub"], [class*="-sub "], [class$="-meta"], [class*="-meta "], [class$="-hint"], [class*="-hint "], [class$="-note"], [class*="-note "] ){ color:var(--edl-ui-muted) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-item"], [class*="-item "], [class$="-tile"], [class*="-tile "], [class$="-box"], [class*="-box "], [class$="-hero"], [class*="-hero "], [class$="-control"], [class*="-control "], [class$="-controls"], [class*="-controls "], [class$="-summary"], [class*="-summary "], [class$="-metric"], [class*="-metric "], [class$="-stat"], [class*="-stat "], [class$="-quick"], [class*="-quick "], [class$="-access"], [class*="-access "], [class$="-notice"], [class*="-notice "], [class$="-banner"], [class*="-banner "], .list-view, .list-row, .qa-item, .identity-card, .auth-banner, .live-bar, .context-jump, .local-note ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; box-shadow:var(--edl-ui-shadow) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( [class$="-row"], [class*="-row "], [class$="-line"], [class*="-line "], hr, table, th, td ){ border-color:var(--edl-ui-line) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .top, .foot, .nav, .card, .panel, .stat, .tile, .box, .item, .row, .line, .notice, .banner, .control, .controls, .metric, .summary, .snapshot, .workflow-panel, .quote-lines, .quote-card, .bucket-card, .market-card, .strategy, .invoice-lock, .audit-item, .process-tile, .step-card:not(.active), .product-result, .check, .input, .field, .field input, .field select ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; box-shadow:var(--edl-ui-shadow) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( [style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFF"], [style*="background: #FFF"], [style*="background:#ffffff"], [style*="background: #ffffff"], [style*="background:#FFFFFF"], [style*="background: #FFFFFF"], [style*="background:white"], [style*="background: white"], [style*="background:#f5f5f5"], [style*="background: #f5f5f5"], [style*="background:#F4F5F6"], [style*="background: #F4F5F6"] ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( [style*="color:#111"], [style*="color: #111"], [style*="color:#000"], [style*="color: #000"], [style*="color:#374151"], [style*="color: #374151"] ){ color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( [style*="color:#555"], [style*="color: #555"], [style*="color:#666"], [style*="color: #666"], [style*="color:#888"], [style*="color: #888"], [style*="color:#bbb"], [style*="color: #bbb"], [style*="color:#6B6F76"], [style*="color: #6B6F76"] ){ color:var(--edl-ui-muted) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( button:not(.active):not(.primary):not(.btn-primary), [role="button"]:not(.active):not(.primary):not(.btn-primary), a[class$="-btn"]:not(.active):not(.primary):not(.btn-primary), a[class*="-btn "]:not(.active):not(.primary):not(.btn-primary), .tab:not(.active), .chip:not(.active), .pill:not(.active), [class$="-tab"]:not(.active), [class*="-tab "]:not(.active), [class$="-pill"]:not(.active), [class*="-pill "]:not(.active), [class$="-chip"]:not(.active), [class*="-chip "]:not(.active), .edl-navlink:not(.active) ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search, [class$="-search"], [class*="-search "], [class$="-input"], [class*="-input "] ){ background:#191B20 !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; box-shadow:none !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where(input, textarea)::placeholder{ color:var(--edl-ui-faint) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .bottom-nav, .mobile-nav, [class$="-bottom"], [class*="-bottom "], [class$="-footer"], [class*="-footer "] ){ background:rgba(30,32,36,.96) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-muted) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] nav[style*="position:fixed"][style*="bottom:0"]{ background:rgba(30,32,36,.96) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-muted) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] nav[style*="position:fixed"][style*="bottom:0"] a{ color:var(--edl-ui-muted) !important; background:transparent !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] nav[style*="position:fixed"][style*="bottom:0"] a[style*="color:#111"], html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] nav[style*="position:fixed"][style*="bottom:0"] a[style*="background:#f5f5f5"]{ color:var(--edl-ui-ink) !important; background:var(--edl-ui-soft) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where(a){ color:var(--edl-ui-blue); } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .warn, .warning, [class$="-warn"], [class*="-warn "], [class$="-warning"], [class*="-warning "] ){ background:rgba(251,191,36,.12) !important; border-color:rgba(251,191,36,.32) !important; color:#FCD34D !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .ok, .done, .success, [class$="-ok"], [class*="-ok "], [class$="-done"], [class*="-done "], [class$="-success"], [class*="-success "] ){ background:rgba(52,211,153,.12) !important; border-color:rgba(52,211,153,.32) !important; color:#6EE7B7 !important; } /* Late dark-mode audit fixes (Aug 2026): page-local styles often load after this shared sheet, so edl-motion.js also appends the same selector set as a final runtime override. Keep this source copy for no-JS previews and grep-able coverage. */ html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] body{ background:var(--edl-ui-bg) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready[data-theme="dark"] :where( #edlSyncStatus, .sc-cam-wrap, .safety-header, .ps-live-bar, .ev-header, .scheduling-switcher, .sched-guide, .mv-cell, .yv-compact-row ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; box-shadow:var(--edl-ui-shadow) !important; } html.edl-motion-ready[data-theme="dark"] :where(.tat-sc.due-soon,.tat-sc.current,.tat-sc.overdue){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready[data-theme="dark"] :where(#monthError,#yearError,#plannerError){ background:rgba(248,113,113,.12) !important; border-color:rgba(248,113,113,.32) !important; color:#FCA5A5 !important; } html.edl-motion-ready[data-theme="dark"] #edl-marketing .em-urgent-card{ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; box-shadow:var(--edl-ui-shadow) !important; } html.edl-motion-ready[data-theme="dark"] nav[style*="bottom"]{ background:rgba(30,32,36,.96) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-muted) !important; } html.edl-motion-ready[data-theme="dark"] .topbar{ background:#15161A !important; border-color:var(--edl-ui-line) !important; color:#fff !important; } html.edl-motion-ready[data-theme="dark"] :where(#edl-venues,#edl-planner,#mobile-planner){ background:var(--edl-ui-bg) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready[data-theme="dark"] :where( [style*="background:#fff"], [style*="background:#FFF"], [style*="background:#ffffff"], [style*="background:#FFFFFF"], [style*="background:#F4F5F6"], [style*="background:#f7f8fa"] ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; } /* Checklist pass (Aug 2026): keep the mobile footer split pinned and visually consistent while page content scrolls underneath it. Many pages still carry inline fixed navs; this shared class normalises the ones the runtime can find, and the selector catches inline-only copies too. */ html.edl-motion-ready:not(.edl-public-page) body{ padding-bottom:max(78px, calc(68px + env(safe-area-inset-bottom))) !important; } html.edl-motion-ready:not(.edl-public-page) :where(.edl-bottom-nav-fixed, .edl-foot), html.edl-motion-ready:not(.edl-public-page) nav[style*="bottom"]{ position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; z-index:900 !important; display:flex !important; justify-content:space-around !important; align-items:center !important; gap:4px !important; min-height:64px !important; padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important; background:rgba(255,255,255,.96) !important; border-top:1px solid var(--edl-ui-line) !important; box-shadow:0 -8px 24px rgba(15,16,20,.08) !important; backdrop-filter:saturate(1.2) blur(12px) !important; } html.edl-motion-ready:not(.edl-public-page) :where(.edl-bottom-nav-fixed, .edl-foot) a, html.edl-motion-ready:not(.edl-public-page) nav[style*="bottom"] a{ min-width:54px !important; min-height:44px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; border-radius:10px !important; line-height:1.1 !important; } :root[data-theme="dark"]{ color-scheme:dark; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where(.edl-bottom-nav-fixed, .edl-foot), html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] nav[style*="bottom"]{ background:rgba(30,32,36,.96) !important; border-color:var(--edl-ui-line) !important; box-shadow:0 -8px 24px rgba(0,0,0,.28) !important; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] :where( .edl-theme-toggle, #edlThemeToggle, #edlSyncStatus, [class*="sync"], [class*="Sync"], [class*="widget"], [class*="Widget"] ){ background:var(--edl-ui-surface) !important; border-color:var(--edl-ui-line) !important; color:var(--edl-ui-ink) !important; } html.edl-motion-ready:not(.edl-public-page) .edl-rollout-locked{ position:relative !important; opacity:.66 !important; cursor:not-allowed !important; filter:saturate(.72) !important; } html.edl-motion-ready:not(.edl-public-page) .edl-rollout-locked::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(247,248,250,.42); pointer-events:none; } html.edl-motion-ready:not(.edl-public-page) .edl-rollout-badge{ position:absolute; top:4px; right:4px; z-index:1; display:flex; align-items:center; justify-content:center; width:18px; height:18px; border:1px solid var(--edl-ui-line); background:var(--edl-ui-surface); color:var(--edl-ui-muted); border-radius:50%; white-space:nowrap; pointer-events:none; } html.edl-motion-ready:not(.edl-public-page) .edl-rollout-badge svg{ width:10px; height:10px; flex-shrink:0; } .edl-rollout-page{ min-height:100vh; display:grid; place-items:center; padding:28px; background:var(--edl-ui-bg); color:var(--edl-ui-ink); font-family:var(--edl-font-stack); } .edl-rollout-card, .edl-rollout-notice{ border:1px solid var(--edl-ui-line); background:var(--edl-ui-surface); color:var(--edl-ui-ink); border-radius:10px; box-shadow:var(--edl-ui-shadow); } .edl-rollout-card{ width:min(420px,100%); padding:22px; text-align:center; } .edl-rollout-card h1{ margin:8px 0 6px; font-size:20px; } .edl-rollout-card p, .edl-rollout-notice span{ color:var(--edl-ui-muted); line-height:1.45; } .edl-rollout-card a{ display:inline-flex; margin-top:14px; padding:9px 14px; border-radius:8px; background:#15161A; color:#fff; text-decoration:none; font-weight:800; } .edl-rollout-icon{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:28px; border-radius:999px; background:var(--edl-ui-soft); border:1px solid var(--edl-ui-line); color:var(--edl-ui-muted); font-size:11px; font-weight:800; text-transform:uppercase; } .edl-rollout-notice{ display:flex; flex-direction:column; gap:3px; padding:12px 14px; margin:0 0 12px; } :root[data-theme="dark"] html.edl-motion-ready:not(.edl-public-page) .edl-rollout-locked::after, html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] .edl-rollout-locked::after{ background:rgba(22,23,27,.45); } @media(max-width:560px){ html.edl-motion-ready:not(.edl-public-page) body{ padding-bottom:max(86px, calc(76px + env(safe-area-inset-bottom))) !important; } html.edl-motion-ready:not(.edl-public-page) :where(.edl-bottom-nav-fixed, .edl-foot) a, html.edl-motion-ready:not(.edl-public-page) nav[style*="bottom"] a{ min-width:48px !important; font-size:10px !important; white-space:normal !important; } } html.edl-motion-ready{ scroll-behavior:smooth; } html.edl-motion-ready body{ text-rendering:optimizeLegibility; } html.edl-motion-ready:not(.edl-public-page) body{ background:var(--edl-ui-bg); color:var(--edl-ui-ink); font-family:var(--edl-font-stack); line-height:1.45; } html.edl-motion-ready:not(.edl-public-page) :where( body, body > section[id^="edl-"], button, input, select, textarea ){ font-family:var(--edl-font-stack) !important; } html.edl-motion-ready:not(.edl-public-page) :where( body, body > section[id^="edl-"], #edl-dashboard, #edl-jdb, #edl-planner, #edl-month-view, #edl-year-view ){ background:var(--edl-ui-bg); } html.edl-motion-ready:not(.edl-public-page) :where( .wrap, .edl-body, .jdb-body, .pk-body, .eq-body, .sto-body, .rs-body, .ob-body, .joh-body, .scan-body, .tat-wrap, .ps-wrap, .mv-body, .yv-body ){ max-width:min(var(--edl-page-max, 1080px), calc(100vw - 24px)); } html.edl-motion-ready:not(.edl-public-page) :where(.wrap){ padding-inline:clamp(14px, 3vw, 28px); } html.edl-motion-ready:not(.edl-public-page) :where( h1, h2, h3, .intro h1, [class$="-title"], [class*="-title "] ){ letter-spacing:0; text-wrap:balance; } html.edl-motion-ready:not(.edl-public-page) :where( p, li, td, th, label, input, select, textarea, button, a ){ overflow-wrap:anywhere; } html.edl-motion-ready:not(.edl-public-page) :where(.intro){ padding-block:clamp(20px, 4vw, 34px) 12px; } html.edl-motion-ready:not(.edl-public-page) :where(.intro p,[class$="-sub"],[class*="-sub "]){ line-height:1.45; } html.edl-motion-ready:not(.edl-public-page) :where( .subbar, [class$="-top"], [class*="-top "] ){ background:rgba(255,255,255,.94); border-bottom:1px solid var(--edl-ui-line); box-shadow:0 1px 0 rgba(15,16,20,.035); } /* Shared app-shell consistency pass (Aug 2026): the standalone pages had drifted into several header alignments and font stacks. Keep the content areas page-specific, but give every operational page the same top chrome: centered EDL brand mark/title, right-aligned page actions, same logo size, and the same understated light surface. */ html.edl-motion-ready:not(.edl-public-page) :where( .subbar, .edl-top, .jdb-top, .rs-top, .joh-top, .jh-top, .pk-top, .eq-top, .sto-top, .stk-top, .sc-top, .tat-top, .inv-top, .ob-top, .ev-header, .safety-header, #pageContent > .top, body > .top ){ display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px 14px; min-height:56px; padding:14px 20px; background:rgba(255,255,255,.94); border-bottom:1px solid var(--edl-ui-line); } html.edl-motion-ready:not(.edl-public-page) :where( .workspace, .edl-top-l, .jdb-top-l, .rs-top-l, .joh-top-l, .brand ){ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:0; text-align:center; } html.edl-motion-ready:not(.edl-public-page) :where( .subbar > .workspace:first-child, .edl-top > .edl-top-l:first-child, .jdb-top > .jdb-top-l:first-child, .rs-top > .rs-top-l:first-child, .joh-top > .joh-top-l:first-child, .jh-top > :first-child, .pk-top > :first-child, .eq-top > :first-child, .sto-top > :first-child, .stk-top > :first-child, .sc-top > :first-child, .tat-top > :first-child, .inv-top > :first-child, .ob-top > :first-child, .ev-header > :first-child, .safety-header > :first-child, #pageContent > .top > :first-child, body > .top > .brand:first-child ){ grid-column:2; justify-self:center; } html.edl-motion-ready:not(.edl-public-page) :where( .subbar > :last-child:not(:first-child), .edl-top > :last-child:not(:first-child), .jdb-top > :last-child:not(:first-child), .rs-top > :last-child:not(:first-child), .joh-top > :last-child:not(:first-child), .jh-top > :last-child:not(:first-child), .pk-top > :last-child:not(:first-child), .eq-top > :last-child:not(:first-child), .sto-top > :last-child:not(:first-child), .stk-top > :last-child:not(:first-child), .sc-top > :last-child:not(:first-child), .tat-top > :last-child:not(:first-child), .inv-top > :last-child:not(:first-child), .ob-top > :last-child:not(:first-child), .ev-header > :last-child:not(:first-child), .safety-header > :last-child:not(:first-child), #pageContent > .top > :last-child:not(:first-child), body > .top > :last-child:not(:first-child) ){ grid-column:3; justify-self:end; } html.edl-motion-ready:not(.edl-public-page) :where( img[alt="EDL Electrical"], .badge-sq, .edl-logo, .jdb-logo, .rs-logo, .joh-logo, .pk-logo, .eq-logo, .sto-logo, .stk-logo, .sc-logo, .tat-logo, .tat-logo-img, .inv-logo, .ob-logo, .ev-logo, .logo ){ display:block; width:auto !important; height:24px !important; max-width:92px; object-fit:contain; } html.edl-motion-ready:not(.edl-public-page) :where(.subbar){ position:sticky; top:0; z-index:60; } html.edl-motion-ready:not(.edl-public-page) :where( .admin-switcher, .jobs-switcher, [class$="-switcher"], [class*="-switcher "] ){ scrollbar-width:none; } html.edl-motion-ready:not(.edl-public-page) :where( .admin-switcher, .jobs-switcher, [class$="-switcher"], [class*="-switcher "] )::-webkit-scrollbar{ display:none; } html.edl-motion-ready:not(.edl-public-page) :where( .admin-switcher a, .jobs-switcher a, .edl-navlink, [class$="-tab"], [class*="-tab "], .tab, .chip, .pill ){ min-height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--edl-ui-radius); font-weight:700; } html.edl-motion-ready:not(.edl-public-page) :where( .chip, .pill, .date-pill, .edl-date, [class$="-pill"], [class*="-pill "] ){ border-radius:999px; } html.edl-motion-ready:not(.edl-public-page) :where( [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-notice"], [class*="-notice "], [class$="-banner"], [class*="-banner "], .list-view, .auth-banner, .control-card, .route-card, .weather-corner ){ border-color:var(--edl-ui-line); border-radius:var(--edl-ui-radius); box-shadow:var(--edl-ui-shadow); } html.edl-motion-ready:not(.edl-public-page) :where( [class$="-row"], [class*="-row "], .list-row, .qa-item ){ border-color:var(--edl-ui-line); } html.edl-motion-ready:not(.edl-public-page) :where( input:not([type="checkbox"]):not([type="radio"]), select, textarea ){ min-height:38px; border-radius:var(--edl-ui-radius); border-color:var(--edl-ui-line); background:#fff; color:var(--edl-ui-ink); } html.edl-motion-ready:not(.edl-public-page) :where(textarea){ min-height:88px; line-height:1.45; } html.edl-motion-ready:not(.edl-public-page) :where( button, [role="button"], .edl-navlink, [class$="-btn"], [class*="-btn "], .qa-btn, .tab, .chip ){ min-height:34px; } html.edl-motion-ready:not(.edl-public-page) :where( [class$="-lbl"], [class*="-lbl "], .section-label, .nav-label, .qa-label, .control-title ){ letter-spacing:.04em; color:var(--edl-ui-faint); } html.edl-motion-ready:not(.edl-public-page) :where( .empty, .loading, .gate-msg, .error, [class$="-error"], [class*="-error "], [class$="-empty"], [class*="-empty "], [class$="-loading"], [class*="-loading "] ){ line-height:1.5; } html.edl-motion-ready:not(.edl-public-page) :where( .empty, .loading, .gate-msg, .error, [class$="-empty"], [class*="-empty "], [class$="-loading"], [class*="-loading "], [class$="-error"], [class*="-error "] ){ border:1px solid var(--edl-ui-line); border-radius:var(--edl-ui-radius); background:#fff; color:var(--edl-ui-muted); padding:12px 14px; box-shadow:0 1px 2px rgba(15,16,20,.025); } html.edl-motion-ready:not(.edl-public-page) :where( .error, [class$="-error"], [class*="-error "] ){ border-color:rgba(181,64,47,.28); background:#FDECEA; color:#8F2F23; } html.edl-motion-ready:not(.edl-public-page) :where( .loading, [class$="-loading"], [class*="-loading "] )::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--edl-ui-blue); box-shadow:0 0 0 4px rgba(59,126,212,.12); vertical-align:middle; } html.edl-motion-ready:not(.edl-public-page) :where( .workspace, [class$="-top-l"], [class*="-top-l "] ){ min-width:0; } html.edl-motion-ready:not(.edl-public-page) :where(.badge-sq,[class$="-logo"],[class*="-logo "]){ flex:none; } html.edl-motion-ready:not(.edl-public-page) .edl-context-strip{ max-width:min(var(--edl-page-max, 1080px), calc(100vw - 24px)); margin-inline:auto; } html.edl-motion-ready:not(.edl-public-page) .edl-context-strip{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; margin-bottom:12px; padding:9px 12px; border:1px solid var(--edl-ui-line); border-radius:var(--edl-ui-radius); background:rgba(255,255,255,.92); box-shadow:0 1px 2px rgba(15,16,20,.025); } html.edl-motion-ready:not(.edl-public-page) .edl-context-left, html.edl-motion-ready:not(.edl-public-page) .edl-context-right{ display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; } html.edl-motion-ready:not(.edl-public-page) .edl-context-pill, html.edl-motion-ready:not(.edl-public-page) .edl-freshness{ display:inline-flex; align-items:center; min-height:26px; border-radius:999px; border:1px solid var(--edl-ui-line); background:var(--edl-ui-soft); padding:5px 9px; color:var(--edl-ui-muted); font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; } html.edl-motion-ready:not(.edl-public-page) .edl-context-pill.primary{ color:var(--edl-ui-ink); background:#fff; } html.edl-motion-ready:not(.edl-public-page) .edl-freshness::before{ content:""; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--edl-ui-green); box-shadow:0 0 8px rgba(47,107,92,.35); } html.edl-motion-ready:not(.edl-public-page) .edl-refresh-live{ min-height:28px; border:1px solid var(--edl-ui-line); border-radius:var(--edl-ui-radius); background:#fff; color:var(--edl-ui-ink); padding:5px 10px; font:inherit; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.035em; cursor:pointer; } @media (max-width:680px){ html.edl-motion-ready:not(.edl-public-page) .edl-context-strip{ display:grid; grid-template-columns:1fr; align-items:stretch; } html.edl-motion-ready:not(.edl-public-page) .edl-context-right{ justify-content:space-between; } } html.edl-motion-ready:not(.edl-public-page) :where( .issue-card, .control-card, .route-card, .auth-banner, .live-bar, .context-jump, .local-note ){ text-align:left; } html.edl-motion-ready:not(.edl-public-page) .edl-theme-actions{ display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; } html.edl-motion-ready:not(.edl-public-page) .edl-theme-toggle{ min-height:30px; border:1px solid var(--edl-ui-line); border-radius:999px; background:var(--edl-ui-surface); color:var(--edl-ui-muted); padding:6px 11px; font:inherit; font-size:11px; font-weight:800; line-height:1; white-space:nowrap; cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-theme-toggle:hover{ color:var(--edl-ui-ink); border-color:var(--edl-ui-faint); } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] .edl-theme-toggle{ background:var(--edl-ui-soft) !important; color:var(--edl-ui-ink) !important; border-color:var(--edl-ui-line) !important; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-trigger{ position:fixed; right:16px; bottom:16px; z-index:1800; min-height:36px; border:1px solid var(--edl-ui-line); border-radius:999px; background:#111; color:#fff; padding:8px 13px; font:inherit; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 10px 28px rgba(15,16,20,.18); cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-trigger:hover{ background:#2F6B5C; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-overlay{ position:fixed; inset:0; z-index:1900; display:none; place-items:center; padding:18px; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-overlay.open{ display:grid; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-backdrop{ position:absolute; inset:0; background:rgba(15,16,20,.58); backdrop-filter:blur(4px); } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-panel{ position:relative; z-index:1; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; max-width:calc(100vw - 28px); max-height:calc(100vh - 28px); } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(390px, calc(100vw - 28px)); min-height:44px; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:#111; color:#fff; padding:8px 10px; box-shadow:0 14px 34px rgba(0,0,0,.26); } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-toolbar strong, html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-toolbar span{ display:block; line-height:1.2; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-toolbar strong{ font-size:12px; font-weight:800; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-toolbar span{ margin-top:2px; color:rgba(255,255,255,.66); font-size:10.5px; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-close{ flex:none; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:rgba(255,255,255,.08); color:#fff; padding:7px 10px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-phone{ width:min(390px, calc(100vw - 28px)); height:min(844px, calc(100vh - 92px)); overflow:hidden; border:10px solid #111; border-radius:30px; background:#fff; box-shadow:0 22px 56px rgba(0,0,0,.34); } html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-phone iframe{ display:block; width:100%; height:100%; border:0; background:#fff; } body.edl-mobile-preview-open{ overflow:hidden; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-trigger{ position:fixed; left:16px; bottom:16px; z-index:1800; display:inline-flex; align-items:center; gap:6px; min-height:36px; border:1px solid var(--edl-ui-line); border-radius:999px; background:#111; color:#fff; padding:8px 13px 8px 11px; font:inherit; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 10px 28px rgba(15,16,20,.18); cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-trigger svg{ width:15px; height:15px; flex:none; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-trigger:hover{ background:#2F6B5C; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-overlay{ position:fixed; inset:0; z-index:1900; display:none; place-items:center; padding:18px; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-overlay.open{ display:grid; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-backdrop{ position:absolute; inset:0; background:rgba(15,16,20,.58); backdrop-filter:blur(4px); } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-card{ position:relative; z-index:1; display:grid; gap:12px; width:min(440px, calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; border:1px solid var(--edl-ui-line); border-radius:12px; background:var(--edl-ui-surface); color:var(--edl-ui-ink); padding:16px; box-shadow:0 22px 56px rgba(0,0,0,.34); } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-head strong{ display:block; font-size:14px; font-weight:800; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-head span{ display:block; margin-top:2px; color:var(--edl-ui-muted); font-size:11.5px; line-height:1.4; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-close{ flex:none; border:1px solid var(--edl-ui-line); border-radius:7px; background:var(--edl-ui-soft); color:var(--edl-ui-ink); padding:7px 12px; font:inherit; font-size:11px; font-weight:800; cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-status{ font-size:11.5px; color:var(--edl-ui-muted); line-height:1.4; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-status.error{ color:#B4231F; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-list{ display:grid; gap:8px; max-height:min(46vh, 420px); overflow:auto; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-item{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--edl-ui-line); border-radius:9px; background:var(--edl-ui-bg); padding:9px 11px; cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-item input{ margin-top:3px; flex:none; width:16px; height:16px; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-item span strong{ display:block; font-size:12px; font-weight:700; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-item span span{ display:block; margin-top:2px; color:var(--edl-ui-muted); font-size:11px; line-height:1.4; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-actions{ display:flex; justify-content:flex-end; gap:8px; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-btn{ border:1px solid var(--edl-ui-line); border-radius:8px; background:var(--edl-ui-soft); color:var(--edl-ui-ink); padding:9px 14px; font:inherit; font-size:12px; font-weight:800; cursor:pointer; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-btn.primary{ background:#2F6B5C; border-color:#2F6B5C; color:#fff; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-btn:disabled{ opacity:.6; cursor:default; } body.edl-lockpanel-open{ overflow:hidden; } html.edl-motion-ready:not(.edl-public-page) .edl-logo-center{ display:inline-flex; align-items:center; line-height:0; margin-right:10px; flex:none; /* The shared 3-column header grid (.subbar/[class$="-top"] etc., see the design-tokens !important display:grid rule) reserves its middle "auto" track for exactly this element. grid-column has no effect when the parent isn't a grid (e.g. .sched-top, which isn't part of that grid selector list), so this is a no-op fallback there - the position: absolute/left:50% trick below still does the centering on those pages. On a grid header, explicitly claiming column 2 fixes the logo landing off-centre. MUST be a full "2 / 3" span, not just "2" - confirmed via two rounds of live DOM inspection (2026-08-11): "grid-column:2" alone only sets the start line, leaving the end line auto/indefinite, and per the grid spec an abs-pos item's containing-block edge falls back to the grid container's own padding edge whenever ITS corresponding placement edge is indefinite - so the end edge fell back to the whole container's right edge instead of column 2's own end line, and the logo ended up centred in "column 2 through the right edge" (still visibly right-of-centre) instead of column 2 alone. */ grid-column:2 / 3; } @media (min-width:641px){ html.edl-motion-ready:not(.edl-public-page) .edl-header-has-centered-logo{ position:relative; } html.edl-motion-ready:not(.edl-public-page) .edl-header-has-centered-logo .edl-logo-center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin-right:0; z-index:2; } } @media (max-width:640px){ html.edl-motion-ready:not(.edl-public-page) .edl-mobile-preview-trigger{ display:none; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-trigger span{ display:none; } html.edl-motion-ready:not(.edl-public-page) .edl-lockpanel-trigger{ padding:9px; } } @media (max-width: 640px){ html.edl-motion-ready:not(.edl-public-page) :where(.subbar,[class$="-top"],[class*="-top "]){ padding-inline:14px; } html.edl-motion-ready:not(.edl-public-page) :where( .wrap, .edl-body, .jdb-body, .pk-body, .eq-body, .sto-body, .rs-body, .ob-body, .joh-body, .scan-body, .tat-wrap, .ps-wrap, .mv-body, .yv-body ){ max-width:100%; } html.edl-motion-ready:not(.edl-public-page) :where( .admin-switcher, .jobs-switcher, [class$="-switcher"], [class*="-switcher "] ){ display:flex; overflow-x:auto; gap:6px; padding-inline:14px; } html.edl-motion-ready:not(.edl-public-page) :where( .admin-switcher a, .jobs-switcher a, [class$="-switcher"] a, [class*="-switcher "] a ){ flex:0 0 auto; min-width:72px; } html.edl-motion-ready:not(.edl-public-page) :where( [class$="-grid"], [class*="-grid "] ){ gap:8px; } /* Header overlap fix (Aug 2026), 3rd pass. The first two passes tried to make everything fit on ONE row (nowrap on the actions group, then a width cap on the title) by reasoning about the shared grid's "auto" centre-column sizing - both confirmed still broken live on /job at phone widths ("Sydney Contemporary" running straight into the back-link). Rather than keep fighting that track-sizing arithmetic, this switches the header to two STACKED rows below this breakpoint: title row on top, action buttons on their own row underneath. This doesn't depend on anything about how wide the title happens to be - there is no shared row for it to starve, so there's nothing left to get this wrong. Overrides the shared grid's `display:grid` (defined, unconditional, above) back to a plain flex column; the grid stays exactly as-is above this breakpoint (desktop/tablet centred-logo layout is unaffected). */ html.edl-motion-ready:not(.edl-public-page) :where( .subbar, .edl-top, .jdb-top, .rs-top, .joh-top, .jh-top, .pk-top, .eq-top, .sto-top, .stk-top, .sc-top, .tat-top, .inv-top, .ob-top, .ev-header, .safety-header, #pageContent > .top, body > .top ){ display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:8px !important; } html.edl-motion-ready:not(.edl-public-page) :where( .subbar > :first-child, .edl-top > :first-child, .jdb-top > :first-child, .rs-top > :first-child, .joh-top > :first-child, .jh-top > :first-child, .pk-top > :first-child, .eq-top > :first-child, .sto-top > :first-child, .stk-top > :first-child, .sc-top > :first-child, .tat-top > :first-child, .inv-top > :first-child, .ob-top > :first-child, .ev-header > :first-child, .safety-header > :first-child, #pageContent > .top > :first-child, body > .top > .brand:first-child ){ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; } html.edl-motion-ready:not(.edl-public-page) :where( .subbar > :last-child:not(:first-child), .edl-top > :last-child:not(:first-child), .jdb-top > :last-child:not(:first-child), .rs-top > :last-child:not(:first-child), .joh-top > :last-child:not(:first-child), .jh-top > :last-child:not(:first-child), .pk-top > :last-child:not(:first-child), .eq-top > :last-child:not(:first-child), .sto-top > :last-child:not(:first-child), .stk-top > :last-child:not(:first-child), .sc-top > :last-child:not(:first-child), .tat-top > :last-child:not(:first-child), .inv-top > :last-child:not(:first-child), .ob-top > :last-child:not(:first-child), .ev-header > :last-child:not(:first-child), .safety-header > :last-child:not(:first-child), #pageContent > .top > :last-child:not(:first-child), body > .top > :last-child:not(:first-child) ){ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; align-items:center !important; width:100% !important; gap:6px !important; } /* Title still gets a sane cap so one absurdly long job/venue name can't push the header taller than necessary - generous now since it has a full row to itself rather than sharing one with the action buttons. */ html.edl-motion-ready:not(.edl-public-page) :where( .jh-org, .workspace .title, .brand .title ){ display:inline-block; max-width:80vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; } html.edl-motion-ready:not(.edl-public-page) #edlThemeToggle{ width:32px !important; height:32px !important; padding:0 !important; border-radius:999px !important; font-size:0 !important; overflow:hidden; color:transparent !important; position:relative; flex:0 0 32px; } html.edl-motion-ready:not(.edl-public-page) #edlThemeToggle::before{ content:""; position:absolute; inset:9px; border-radius:999px; border:2px solid currentColor; color:#6B6F76; } html.edl-motion-ready:not(.edl-public-page)[data-theme="dark"] #edlThemeToggle::before{ color:#F4F5F6; box-shadow:0 0 0 3px rgba(244,245,246,.08); } /* Back/nav pill and date pill: shrink rather than let them force the nowrap row above to overflow. */ html.edl-motion-ready:not(.edl-public-page) :where( .edl-navlink, .jh-back ){ padding:6px 10px !important; font-size:11px !important; white-space:nowrap; flex:0 0 auto; } html.edl-motion-ready:not(.edl-public-page) :where( .date-pill, .edl-date, #todayPill ){ font-size:11px !important; padding:5px 9px !important; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto; } } html.edl-motion-ready .edl-motion-reveal{ opacity:0; transform:translateY(10px); } html.edl-motion-ready .edl-motion-reveal.edl-motion-in{ animation:edlMotionReveal var(--edl-motion-med) var(--edl-motion-ease) both; } @keyframes edlMotionReveal{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } html.edl-motion-ready :where( a, button, input, select, textarea, summary, .tab, .chip, .pill, [role="button"], [class$="-btn"], [class*="-btn "], [class$="-row"], [class*="-row "], [class$="-card"], [class*="-card "], [class$="-item"], [class*="-item "] ){ transition-property:background-color,border-color,box-shadow,color,opacity,transform,filter; transition-duration:var(--edl-motion-fast); transition-timing-function:var(--edl-motion-ease); } html.edl-motion-ready :where( a, button, summary, [role="button"], .tab, .chip, .pill, [class$="-btn"], [class*="-btn "], [class$="-row"], [class*="-row "], [class$="-card"], [class*="-card "], [class$="-item"], [class*="-item "] ):where(:hover){ will-change:transform; } html.edl-motion-ready:not(.edl-public-page) :where( [class$="-card"], [class*="-card "], [class$="-row"], [class*="-row "], .list-row, .qa-btn, .edl-navlink, .tab, .chip ):where(:hover){ transform:translateY(-1px); } html.edl-motion-ready :where( a, button, summary, [role="button"], .tab, .chip, .pill, [class$="-btn"], [class*="-btn "] ):where(:active), html.edl-motion-ready .edl-motion-press{ transform:scale(.985); } html.edl-motion-ready :where( input, select, textarea, button, a, summary, [tabindex] ):focus-visible{ outline:0; box-shadow:var(--edl-motion-ring); } html.edl-motion-ready :where( [class$="-top"], [class*="-top "], .subbar, .em-header ){ backdrop-filter:saturate(1.12) blur(10px); } html.edl-motion-ready :where( [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-banner"], [class*="-banner "], [class$="-notice"], [class*="-notice "], [class$="-row"], [class*="-row "] ):where(:hover){ box-shadow:var(--edl-motion-shadow); } html.edl-motion-ready :where( .show, .open, .active, [open], [aria-expanded="true"] ){ animation:edlMotionSettle 220ms var(--edl-motion-ease) both; } @keyframes edlMotionSettle{ from{ opacity:.82; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } } html.edl-motion-ready .edl-motion-page-exit body, html.edl-motion-page-exit body{ opacity:.88; transform:translateY(3px); transition:opacity 140ms var(--edl-motion-ease), transform 140ms var(--edl-motion-ease); } html.edl-motion-ready .edl-motion-nav-pulse{ position:relative; overflow:hidden; } html.edl-motion-ready .edl-motion-nav-pulse::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent); transform:translateX(-120%); animation:edlMotionSweep 520ms var(--edl-motion-ease); pointer-events:none; } @keyframes edlMotionSweep{ to{ transform:translateX(120%); } } /* Native cross-document View Transitions -- browser-native cross-fade between full page navigations on supporting engines (Chromium 126+), silently ignored elsewhere. This is a real upgrade over the old edl-motion-page-exit fade below: that one could only fade the page you're LEAVING (the destination page hadn't loaded yet, so there was nothing to cross-fade into -- it just papered over the blank gap). A view transition captures both the outgoing and incoming page and cross-fades between them, which only reads as smooth (rather than "why did it flash white") once loads are fast enough that the incoming snapshot arrives promptly -- worth adding now that native Odoo.sh routes load quickly, not before. */ @view-transition{ navigation:auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:180ms; animation-timing-function:cubic-bezier(.2,.8,.2,1); } /* Live-data change highlight -- a brief background flash for a value that just changed on an auto-refresh tick (a job status badge, a stat tile, a PM Delivery Control count), so a silent number swap becomes visible instead of easy to miss. Triggered by adding/removing .edl-motion-pulse via window.EDLMotion.pulseChanged(el) -- see edl-motion.js. */ html.edl-motion-ready .edl-motion-pulse{ animation:edlMotionPulse 900ms var(--edl-motion-ease); } @keyframes edlMotionPulse{ 0%{ background-color:rgba(59,126,212,.22); box-shadow:0 0 0 2px rgba(59,126,212,.22); } 100%{ background-color:transparent; box-shadow:0 0 0 0 rgba(59,126,212,0); } } /* Skeleton/shimmer placeholder -- for the gap between a page rendering and its first real data fetch resolving. Add class="edl-skeleton" (plus a fixed width/height via inline style or a size modifier) to a placeholder element; remove it once real content replaces the node. */ html.edl-motion-ready .edl-skeleton{ position:relative; overflow:hidden; background:var(--edl-ui-soft); border-radius:var(--edl-ui-radius); color:transparent !important; pointer-events:none; min-height:14px; } html.edl-motion-ready .edl-skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation:edlMotionShimmer 1.15s ease-in-out infinite; } @keyframes edlMotionShimmer{ to{ transform:translateX(100%); } } @media (prefers-reduced-motion: reduce){ html.edl-motion-ready, html.edl-motion-ready *{ scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } html.edl-motion-ready .edl-motion-reveal{ opacity:1; transform:none; } ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; } }