/* ═══════════════════════════════════════════════════════════════════════════ MOBULA DISPLAY MODES — theme.css --------------------------------------------------------------------------- Two user-selectable modes, persisted in localStorage['mobula-display-mode'] and applied as or by the inline bootstrap in each page (see theme.js). DARK — the existing production appearance. Nothing in this file changes it except the shared display-mode control and the notification unread-state improvement (both additive). OUTDOOR — high-contrast light palette for phone use in direct sunlight. Strategy: every Outdoor rule is scoped to html[data-theme="outdoor"] so it always out-ranks the page's own equal selector regardless of load order. Section 1 remaps the three CSS-variable families the pages use; sections 2+ are targeted overrides for hard-coded colours that variables can't reach. Page-specific CSS is intentionally left untouched. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────── 0. SHARED CONTROL (both modes) ───────────────── */ .display-mode { margin-bottom: 18px; } .display-mode-label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--grey, #888); margin-bottom: 8px; } .display-mode-seg { display: flex; gap: 0; border: 1px solid var(--border, #2a2a2a); border-radius: 10px; overflow: hidden; background: var(--card, #1c1c1c); } .display-mode-btn { flex: 1; min-height: 46px; border: 0; background: transparent; color: var(--white, #f0f0f0); font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; } .display-mode-btn + .display-mode-btn { border-left: 1px solid var(--border, #2a2a2a); } .display-mode-btn.is-active { background: var(--yellow, #f5c400); color: #111; } .display-mode-btn:focus-visible { outline: 2px solid var(--yellow, #f5c400); outline-offset: -2px; } /* Notification unread state — visible in BOTH modes without relying on the background tint alone (left rail thickens, status text stays full-weight). */ .n.unread .rail::before { width: 8px; } .n.unread .n-status { text-decoration: underline; text-decoration-color: var(--yellow, #f5c400); text-underline-offset: 3px; text-decoration-thickness: 2px; } /* ═══════════════════════════ 1. OUTDOOR TOKENS ═══════════════════════════ */ html[data-theme="outdoor"] { color-scheme: light; /* Family A (index, forms, registers, notifications, most admin) */ --black: #ececec; /* page background (near-white, lets white cards separate) */ --dark: #ffffff; /* header / nav / sheet / input surfaces */ --card: #ffffff; --border: #7a7a7a; /* 3.9:1 on white — clearly visible boundaries */ --yellow: #7a5c00; /* brand gold as TEXT/BORDER: 6.1:1 on white */ --yellow-dim: #5e4700; --white: #111111; /* primary text 17.9:1 */ --grey: #3d3d3d; /* secondary text 10.4:1 (was low-contrast #888) */ --light-grey: #5c5c5c; --danger: #b71c1c; /* 7.3:1 */ --success: #1b6e3a; /* 5.7:1 */ --warning: #8a4b00; /* 6.3:1 amber-brown */ --blue: #0f4c9a; /* 7.9:1 */ --danger-bg: rgba(183,28,28,.10); --success-bg: rgba(27,110,58,.12); --warning-bg: rgba(138,75,0,.12); /* Family B / C (asset, admin-safety/compliance/dropdowns, maintenance, prelift-register/review, admin-prelift-approvals, admin-push) */ --bg: #ececec; --surface: #ffffff; --gold: #7a5c00; --grey-lt: #4a4a4a; } /* Family C pages hard-code body text instead of using --white */ html[data-theme="outdoor"] body { color: #111; } /* ═══════════════ 2. BRAND-YELLOW FILLS (keep bright, dark text) ═════════════ Selectors whose background is var(--yellow)/var(--gold). With the token now dark gold these would be muddy, and several use var(--black) as text which is now near-white. Restore the bright brand fill with near-black text. */ html[data-theme="outdoor"] :is( .btn-primary, .submit-btn, .btn-search, .add-btn, .btn-edit, .btn-save, .btn-gold, .modal-close, .modal-btn-edit, .form-submit-btn, .success-close-btn, .submit-modal-ok, .act-yellow, .pending-open, .person-avatar, .modal-avatar, .user-avatar, .header-logo, .crane-icon, .nm-close, .nm-btn-primary, .btn#test-btn ) { background: #f5c400; color: #111; border-color: #f5c400; } /* compound (two-class) selectors kept separate so the rule above stays at a low specificity and the :disabled rules below can out-rank it */ html[data-theme="outdoor"] :is(.filter-btn.active, .sub-tab.active, .tab-btn.active, .tf-chip.active, .fleet-filter-chip.active, .f-pill.on, .action-btn.primary, .lc-btn.primary, .svc-btn.primary, .bulk button.gold, .display-mode-btn.is-active ) { background: #f5c400; color: #111; border-color: #f5c400; } html[data-theme="outdoor"] .role-tag { background: #f5c400; color: #111; } html[data-theme="outdoor"] .section-badge { background: #e3e3e3; color: #111; border: 1px solid #7a7a7a; } html[data-theme="outdoor"] .chip.on { background: rgba(27,110,58,.10); border-color: #1b6e3a; color: #1b6e3a; } html[data-theme="outdoor"] .chip.off { background: rgba(183,28,28,.08); border-color: #b71c1c; color: #b71c1c; } html[data-theme="outdoor"] #filter-chips .chip.on { background: #fff8d6; border: 2px solid #7a5c00; color: #5e4700; } html[data-theme="outdoor"] .mark-all-btn { color: #5e4700; } html[data-theme="outdoor"] .nm-actions .nm-close { background: #fff; color: #111; border: 1px solid #7a7a7a; } html[data-theme="outdoor"] :is(.btn-primary, .submit-btn, .add-btn, .btn-search, .form-submit-btn, .modal-btn-edit):hover { background: #e0b300; } html[data-theme="outdoor"] body :is(.btn-primary, .submit-btn, .btn-gold, .add-btn, .btn-save, .form-submit-btn, .svc-btn.primary, .action-btn.primary):disabled { background: #d9d9d9; color: #5c5c5c; border-color: #b5b5b5; opacity: 1; } /* rail / dots / progress meters keep the bright brand colour */ html[data-theme="outdoor"] :is(.notif-unread-dot, .r-yellow .rail::before, .r-yellow .plate, .prog-fill, .tl-item::before, .grace-dot.yellow, .tag-swatch.yellow) { background: #f5c400; } html[data-theme="outdoor"] .r-yellow .plate svg { stroke: #111; } html[data-theme="outdoor"] #riggers option:checked { background: #f5c400; color: #111; } /* ═══════════════════════ 3. NATIVE FORM CONTROLS ══════════════════════════ */ html[data-theme="outdoor"] body :is( input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea ) { background: #fff; color: #111; border-color: #4a4a4a; } html[data-theme="outdoor"] body :is(input, select, textarea):focus { border-color: #7a5c00; outline: 2px solid #f5c400; outline-offset: 0; } html[data-theme="outdoor"] ::placeholder { color: #5c5c5c; opacity: 1; } html[data-theme="outdoor"] input[type="date"], html[data-theme="outdoor"] input[type="time"], html[data-theme="outdoor"] input[type="datetime-local"] { color-scheme: light; } html[data-theme="outdoor"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: 1; } html[data-theme="outdoor"] :is(select option, .field select option) { background: #fff; color: #111; } html[data-theme="outdoor"] body :is(input, select, textarea, button):disabled, html[data-theme="outdoor"] body :is(input, select, textarea)[readonly] { background: #e3e3e3; color: #4a4a4a; border-color: #9e9e9e; opacity: 1; } html[data-theme="outdoor"] :is(.field select:disabled, .page-btn:disabled) { opacity: 1; background: #e3e3e3; color: #4a4a4a; } html[data-theme="outdoor"] input[type="checkbox"], html[data-theme="outdoor"] input[type="radio"] { accent-color: #7a5c00; } html[data-theme="outdoor"] .review-field textarea, html[data-theme="outdoor"] #pin-input { background: #fff; color: #111; } html[data-theme="outdoor"] :is(.search, .status-sel, .date-in, .filter-input, .filter-select, .search-input, .fleet-search) { background: #fff; color: #111; border-color: #4a4a4a; } html[data-theme="outdoor"] .system-field { background: #e3e3e3; color: #222; border-color: #9e9e9e; } html[data-theme="outdoor"] :is(.toggle::after, .toggle-switch::after, .matrix-radio::after) { background: #fff; } html[data-theme="outdoor"] .opt-btn.sel-na { background: #4a4a4a; border-color: #4a4a4a; color: #fff; } html[data-theme="outdoor"] .check-box { border-color: #4a4a4a; background: #fff; } html[data-theme="outdoor"] .check-item.checked .check-box, html[data-theme="outdoor"] .check-box.checked { background: #1b6e3a; border-color: #1b6e3a; color: #fff; } /* ══════════════ 4. HARD-CODED GHOST BUTTONS / CHROME (white text) ════════ */ /* :where() keeps this at (0,1,2): it restyles these buttons' BASE state but lets every page-defined state rule (.tag-btn.selected, .lc-btn.danger, … at (0,2,0)) win again and translate through the Outdoor tokens. */ html[data-theme="outdoor"] body :where( .back-btn, .refresh-btn, .retry-btn, .row-actions button, .bulk button, .btn-ghost, .page-btn, .pager button, .lc-btn, .op-action-btn, .sap-change-btn, .pdf-btn, .tag-btn ) { color: #111; border-color: #4a4a4a; background: #fff; } html[data-theme="outdoor"] .back-btn { background: transparent; } html[data-theme="outdoor"] .tag-btn.selected { background: #fff8d6; border-color: #7a5c00; color: #5e4700; box-shadow: inset 0 0 0 1px #7a5c00; } html[data-theme="outdoor"] :is(.top-bar .back-btn, .app-header .back-btn) { color: #7a5c00; border-color: #4a4a4a; } html[data-theme="outdoor"] :is(.btn-danger, .btn-reject, .act-red, .review-alert, .pending-alert, .photo-del, .photo-preview-remove) { color: #fff; } html[data-theme="outdoor"] .review-alert.none { color: #fff; } /* ═══════════════════ 5. HARD-CODED DARK SURFACES → LIGHT ═════════════════ */ html[data-theme="outdoor"] :is( .json-block, .prog-bar, .prog .bar, .insp-hist-thumb, .nm-btn ) { background: #e3e3e3; } html[data-theme="outdoor"] .sup-row .btn, html[data-theme="outdoor"] .settings-row .btn { background: #fff; color: #111; border-color: #4a4a4a; } html[data-theme="outdoor"] :is(.nm-btn, .nm-actions .nm-close) { color: #111; border-color: #7a7a7a; } html[data-theme="outdoor"] .json-block { color: #111; border: 1px solid #7a7a7a; } html[data-theme="outdoor"] :is( tr.data-row:hover, .list-item:hover, .activity-card:hover, .form-card:hover, .form-card:active, .menu-card:hover, .menu-card:active, .person-card:hover ) { background: #e3e3e3; border-color: #4a4a4a; } html[data-theme="outdoor"] .welcome-banner { background: #fff; } html[data-theme="outdoor"] #login-screen::before { background: radial-gradient(circle, rgba(122,92,0,.10) 0%, transparent 70%); } html[data-theme="outdoor"] .g-rule { background: linear-gradient(90deg, #7a7a7a, transparent); } /* subtle rgba(255,255,255,…) separators → visible dark hairlines */ html[data-theme="outdoor"] :is(.act, .nm-row) { border-top-color: rgba(0,0,0,.18); } html[data-theme="outdoor"] :is(.sup-row, .insp-hist-row, .change-row) { border-bottom-color: rgba(0,0,0,.18); } html[data-theme="outdoor"] .insp-hist-tag-dot { border-color: rgba(0,0,0,.35); } /* ══════════════════ 6. HARD-CODED LIGHT / MID-GREY TEXT ═══════════════════ */ /* notifications.html header push-bell + popover use inline style="" colours, which only !important can reach without editing the page markup. */ html[data-theme="outdoor"] #push-bell { color: #111 !important; border-color: #4a4a4a !important; } html[data-theme="outdoor"] #push-pop { background: #fff !important; border-color: #7a7a7a !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; } html[data-theme="outdoor"] #push-pop-status { color: #3d3d3d !important; } html[data-theme="outdoor"] #push-pop > div[style*="border-top"] { border-top-color: #7a7a7a !important; } html[data-theme="outdoor"] :is( .n-msg, .n-sub, .nm-msg, .n.compact .c-line b, .answer-q, .answer-comment strong, .pl-sub, .chip.cc, td, .s-grey, .s-retired ) { color: #111; } html[data-theme="outdoor"] :is(.n-time, .n.compact .c-time, .person-card.inactive .person-avatar) { color: #3d3d3d; } html[data-theme="outdoor"] .nm-test { background: rgba(15,76,154,.08); border-color: #0f4c9a; color: #0f4c9a; } html[data-theme="outdoor"] .s-destroyed { color: #b71c1c; } html[data-theme="outdoor"] .n.read { opacity: 1; } html[data-theme="outdoor"] .n.read .rail::before { opacity: .55; } html[data-theme="outdoor"] .n.unread { background: #fff8d6; border-color: #7a5c00; } html[data-theme="outdoor"] .r-grey .rail::before, html[data-theme="outdoor"] .r-grey .plate { background: #4a4a4a; } html[data-theme="outdoor"] .plate svg { stroke: #111; } html[data-theme="outdoor"] .r-grey .plate svg, html[data-theme="outdoor"] :is(.r-red, .r-blue, .r-green) .plate svg { stroke: #fff; } /* Semantic status text that was hard-coded bright (orange / amber / green) */ html[data-theme="outdoor"] :is(.level-2, .sev-l2, .safe-banner.warn-l2, .submit-modal.warn .submit-modal-title) { color: #a04a00; } html[data-theme="outdoor"] :is(.level-2, .sev-l2) { border-color: #a04a00; background: rgba(160,74,0,.10); } html[data-theme="outdoor"] .submit-modal.l2 .submit-modal-title { color: #b3360e; } html[data-theme="outdoor"] .submit-modal.l3 .submit-modal-title { color: #7a5c00; } html[data-theme="outdoor"] .submit-modal.pass .submit-modal-title { color: #1b6e3a; } html[data-theme="outdoor"] :is(.limited-note, .warning-banner .banner-text) { color: #8a4b00; } html[data-theme="outdoor"] .stop-banner .banner-text { color: #b71c1c; } /* ═════════════════════════ 7. REVIEW SURFACES ═════════════════════════════ */ html[data-theme="outdoor"] .state-pill { background: #fff; border-color: #7a7a7a; color: #111; } html[data-theme="outdoor"] .override-flag { background: rgba(122,92,0,.12); } html[data-theme="outdoor"] .review-alert { background: #b71c1c; } html[data-theme="outdoor"] .review-alert.none { background: #1b6e3a; } html[data-theme="outdoor"] .meta-pill.pill-approved { color: #fff; } /* ═════════════════════════ 8. DOC VIEWER (doc-viewer.js) ══════════════════ The document viewer is a full-screen focus surface (dark scrim + toolbar over a white PDF iframe). Like the photo lightbox it deliberately stays dark in both modes; its own injected stylesheet is left untouched. */ /* ════════════════ 9. OVERLAYS / LIGHTBOX (deliberately still dark) ════════ Modal scrims and the photo lightbox stay dark in Outdoor: they are full-screen focus surfaces and the dark scrim is what separates the modal from the page. Only the modal PANEL follows the light palette (via tokens). */ html[data-theme="outdoor"] :is(.photo-viewer-overlay, #insp-hist-lightbox) { background: rgba(0,0,0,.94); } html[data-theme="outdoor"] :is(.photo-viewer-close, .photo-viewer-nav, .photo-viewer-top, #insp-hist-lightbox-close, .rh-photo-thumb .rh-more-overlay) { color: #fff; } /* ═══════════════════════ 10. NAVIGATION / HEADERS ═════════════════════════ */ html[data-theme="outdoor"] :is(.app-header, .top-bar) { background: #fff; border-bottom: 1px solid #7a7a7a; } html[data-theme="outdoor"] :is(.app-nav, .bottom-nav) { background: #fff; border-top: 2px solid #7a7a7a; } html[data-theme="outdoor"] :is(.nav-item, .bottom-nav a, .bottom-nav button, .app-nav-item) { color: #3d3d3d; } html[data-theme="outdoor"] :is(.nav-item.active, .bottom-nav .active, .app-nav-item.active) { color: #7a5c00; } html[data-theme="outdoor"] .notif-bell-btn { color: #111; border-color: #4a4a4a; } html[data-theme="outdoor"] .notif-bell-badge { color: #fff; } html[data-theme="outdoor"] .signout-sheet { background: #fff; border-top: 2px solid #7a7a7a; box-shadow: 0 -8px 30px rgba(0,0,0,.25); } /* Strong card boundary against the page */ html[data-theme="outdoor"] :is( .form-card, .card, .activity-card, .list-item, .menu-card, .person-card, .n, .summary-card, .section ) { box-shadow: 0 1px 3px rgba(0,0,0,.12); } /* Yes / No / N/A and safe/risk choice buttons — unselected state */ html[data-theme="outdoor"] body :where(.opt-btn, .tab-btn, .f-pill, .filter-btn, .fleet-filter-chip, .tf-chip, .chip) { color: #111; border-color: #4a4a4a; background: #fff; } /* .q-btn deliberately sits at zero extra specificity (:where) so each page's own .q-btn.sel-* selected rules win again and keep their semantic colours (crane N/A = green, prime mover N/A = blue) resolved through the Outdoor tokens. sel-safe / sel-risk still get the solid overrides below. */ html[data-theme="outdoor"] :where(.q-btn) { color: #111; border-color: #4a4a4a; background: #fff; } /* N/A selected: solid fill in the page's own semantic colour. The page rule sets color (crane: var(--success), prime mover: var(--blue)), so background:currentColor fills with that colour on any engine, and -webkit-text-fill-color paints the label white without touching the color property currentColor derives from. Matches the Yes/No solid-fill weight. */ html[data-theme="outdoor"] .q-btn.sel-na { background: currentColor; -webkit-text-fill-color: #fff; } html[data-theme="outdoor"] .q-btn.sel-safe, html[data-theme="outdoor"] .opt-btn.sel-yes { background: #1b6e3a; border-color: #1b6e3a; color: #fff; } html[data-theme="outdoor"] .q-btn.sel-risk, html[data-theme="outdoor"] .opt-btn.sel-no { background: #b71c1c; border-color: #b71c1c; color: #fff; } /* Pre-Lift rigging-tag selection (.tag-btn.selected re-applies via the demotion above); deepen tint/text so the selected pill is unmistakable. */ html[data-theme="outdoor"] .tag-btn.selected { background: rgba(245,196,0,.28); color: #5e4700; border-color: #7a5c00; box-shadow: inset 0 0 0 1px #7a5c00; } /* Rigger sign-off check cards: dark uses a 6% green tint — invisible on white — keep the green-border pattern but lift the tint. */ html[data-theme="outdoor"] .check-card.active { background: rgba(27,110,58,.12); border-color: #1b6e3a; } /* Personnel-modal validation border: the generic input rule (section 3) carries :not() chains at (0,5,3), so only !important restores the page's .form-input.error state here (same precedent as the push-bell inline fix). */ html[data-theme="outdoor"] .form-input.error { border-color: #b71c1c !important; } html[data-theme="outdoor"] :is(.safe-banner, .safe-banner.not-safe) { border-width: 2px; } /* Modal overlays: page-defined rgba(0,0,0,.7–.75) scrims already work on a light page; nothing to do. Modal panels use --card/--dark → white. */ /* ═══════════════ 11. iOS INSTALLED-PWA STATUS BAR (Outdoor only) ═══════════ index.html declares apple-mobile-web-app-status-bar-style="black-translucent", which iOS captures at install time: the status bar is transparent with WHITE clock/battery text drawn over the page. That is fine on the dark UI but invisible on Outdoor's white header. The meta cannot change per mode, so Outdoor paints a dark band exactly the height of the status-bar safe area. env() is 0 in ordinary browsers and non-notch devices, so this has no effect there. Fixed above every overlay (max app z-index is 10000). */ html[data-theme="outdoor"] body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #0a0a0a; z-index: 2147483000; pointer-events: none; }