/* ============================================================ Kemsea POD — accessible field-tool UI. Audience: drivers, often older, often in sunlight. Font: Atkinson Hyperlegible (self-hosted; CSP-safe; offline-OK). Themes: light (default) / dark / hc. Sizes: A / lg / xl. ============================================================ */ @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/p/fonts/atkinson-400.woff2') format('woff2'); } @font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/p/fonts/atkinson-700.woff2') format('woff2'); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; } html { -webkit-text-size-adjust: 100%; } :root { --size-mult: 1; --base: calc(20px * var(--size-mult)); --lg: calc(24px * var(--size-mult)); --xl: calc(28px * var(--size-mult)); --xxl: calc(36px * var(--size-mult)); --tap: calc(56px * var(--size-mult)); --tap-lg: calc(72px * var(--size-mult)); --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 24px; --sp-5: 36px; /* Kemsea brand palette — slate blue + sage. Mirrors the warehouse webapp so both Kemsea field apps share visual identity. */ --bg: #F5F7F9; /* very light slate wash */ --surface: #FFFFFF; --surface-2: #EEF3F6; /* brand-tint */ --text: #1A2A32; /* near-black, brand-darker */ --text-mute: #5B6C76; --border: #D4DDE2; --primary: #2E5469; /* brand slate blue */ --primary-ink: #FFFFFF; --primary-dark: #1F3A4A; /* press / hover deepen */ --accent: #6EAA90; /* brand sage green */ --success: #166534; --warn: #B45309; --danger: #B91C1C; --focus-ring: #2E5469; } html[data-size="lg"] { --size-mult: 1.15; } html[data-size="xl"] { --size-mult: 1.35; } html[data-theme="dark"] { --bg: #0F1A22; /* deeper variant of brand-darker */ --surface: #1A2A32; --surface-2: #243440; --text: #EEF3F6; --text-mute: #92A1A9; --border: #3A4C58; --primary: #6EAA90; /* sage as primary on dark — high contrast on slate */ --primary-ink: #0F1A22; --primary-dark: #557D6C; --accent: #6EAA90; --success: #6EAA90; --warn: #F59E0B; --danger: #F87171; --focus-ring: #CFE2D6; } html[data-theme="hc"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0F0F0; --text: #000000; --text-mute: #1A1A1A; --border: #000000; --primary: #000000; --primary-ink: #FFFFFF; --success: #006400; --warn: #8B4500; --danger: #8B0000; --focus-ring: #0000FF; } body { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: var(--base); line-height: 1.5; -webkit-font-smoothing: antialiased; /* `none` blocks iOS Safari pull-to-refresh (which would reload mid-sign and blow away the in-progress form). The queue has its own explicit refresh control. */ overscroll-behavior: none; } /* iOS Safari sometimes reads overscroll up the ancestor chain — block at * too. Without this, a swipe-down on the Map tab triggers a page reload (the * diag log captured the full boot() re-run). */ html { overscroll-behavior: none; } /* The queue body is the scrollable element under the tabs; block its own * pull-to-refresh and Leaflet's map container too. */ #queue-body, #map-container { overscroll-behavior: contain; touch-action: pan-x pan-y; } /* Leaflet wraps the map in .leaflet-container; ensure its overscroll doesn't * bubble up into a Safari reload either. */ .leaflet-container { overscroll-behavior: none !important; } /* Leaflet's default +/- zoom controls are 26x26 — under our 44px tap floor. * Bump them so an older driver can hit them one-handed without zooming the * page. Spec uses important to override the vendor sheet. */ .leaflet-bar a.leaflet-control-zoom-in, .leaflet-bar a.leaflet-control-zoom-out { width: 48px !important; height: 48px !important; line-height: 46px !important; font-size: 24px !important; } #app { width: 100%; max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; background: var(--bg); } /* Screen primitive — each section fills the viewport, flex column. */ .screen { flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .screen.hidden { display: none; } /* ============ HEADER ============ */ .app-header { display: flex; align-items: center; padding: var(--sp-3); gap: var(--sp-2); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); } .app-header .back-btn { width: 56px; height: 56px; /* fixed — don't scale with text size, header has limited width */ border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 28px; font-weight: 700; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit; margin-right: var(--sp-2); /* Subtle shadow makes it read as a tappable button (older users notice * affordance cues — a floating arrow with no chrome can read as decorative). */ box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .app-header .back-btn:active { background: var(--surface-2); } .app-header .back-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .app-header .h-stack { flex: 1; min-width: 0; /* enables ellipsis on overflow */ overflow: hidden; } .app-header .h1 { font-size: var(--lg); font-weight: 700; line-height: 1.15; /* Wrap to 2 lines max instead of single-line ellipsis — keeps "Today's deliveries" readable at all sizes. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: normal; overflow-wrap: anywhere; } .app-header .sub { font-size: calc(var(--base) * 0.85); color: var(--text-mute); font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header .icon-btn { width: 48px; height: 48px; /* fixed — don't scale with text size */ border: 1px solid var(--border); background: var(--surface); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; font-family: inherit; } .app-header .icon-btn svg { width: 22px; height: 22px; } /* When the header has multiple icon-btns, allow them to stack tightly */ .app-header { gap: 6px; } .app-header .icon-btn:active { background: var(--surface-2); } .app-header .icon-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ============ BODY ============ */ .body { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-3) var(--sp-5); -webkit-overflow-scrolling: touch; } /* When the Map tab is the active panel inside queue-body, the body itself * shouldn't scroll — the map handles its own pan/zoom and we want it to * fill the entire space below the tabs. :has() is supported on iOS 16.4+ * which covers our driver's iPhone. */ #queue-body:has(#tab-panel-map:not([hidden])) { overflow: hidden; display: flex; flex-direction: column; padding-bottom: var(--sp-3); /* less bottom padding so map reaches close to edge */ } .body .lead { font-size: var(--base); color: var(--text); margin: 0 0 var(--sp-3); } .body .big { font-size: var(--xl); margin: 0 0 var(--sp-3); } .section-label { font-size: calc(var(--base) * 0.95); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); margin: var(--sp-4) 0 var(--sp-2); } .section-label:first-child { margin-top: var(--sp-1); } /* ============ JOB CARD ============ */ .job-card { background: var(--surface); border: 2px solid var(--border); border-radius: 18px; padding: var(--sp-3); margin-bottom: var(--sp-3); cursor: pointer; display: block; width: 100%; text-align: left; font-family: inherit; color: inherit; min-height: var(--tap-lg); position: relative; transition: border-color 150ms, background 150ms, transform 150ms; } .job-card:active { transform: scale(0.99); background: var(--surface-2); } .job-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .job-card .docket-row { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } /* Date pill sits between docket # and pallet count. mr-auto pushes pallets to the right. */ .job-card .date-chip-inline { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); border-radius: 999px; padding: 3px 10px; font-size: calc(var(--base) * 0.78); font-weight: 700; white-space: nowrap; } .job-card .pallet-pill { margin-left: auto; } .job-card .docket-no { background: var(--primary); color: var(--primary-ink); font-size: var(--base); font-weight: 700; padding: 4px var(--sp-2); border-radius: 8px; } /* Pickup (Incoming) — green pill so drivers see at a glance it's a collection */ .job-card.pickup .docket-no { background: var(--success); color: white; } /* LATE — red border around the whole card */ .job-card.late { border-color: var(--danger); } /* Badges (DG, LATE, PICKUP labels) */ .job-card .badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-2); } .badge { font-size: calc(var(--base) * 0.78); font-weight: 700; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; } .badge.dg { background: var(--warn); color: white; } .badge.late { background: var(--danger); color: white; } .badge.picked { background: var(--surface-2); color: var(--text-mute); border: 1px solid var(--border); } /* Workflow status badges — at-a-glance "where in the lifecycle". Distinct from * DG / LATE / PICKUP markers; this is the warehouse-to-driver handoff state. */ .badge.wf { padding: 4px 9px; } .badge.wf-shipped { background: #1F3A4A; color: #fff; } /* loaded on truck */ .badge.wf-picked { background: #6EAA90; color: #fff; } /* staged, not loaded */ .badge.wf-pending { background: var(--surface-2); color: var(--text-mute); border: 1px solid var(--border); } .badge.wf-delivered { background: var(--warn); color: #fff; } /* admin pre-finalised */ /* Date chip on queue cards — visually distinct from customer/ref chips. */ .settings-checkbox { display: flex; align-items: center; gap: 10px; padding: var(--sp-2) 0; font-size: var(--base); cursor: pointer; } .settings-checkbox input { width: 22px; height: 22px; } .chip.date-chip { background: var(--surface); color: var(--primary); border: 1.5px solid var(--primary); font-weight: 700; } .badge.pickup { background: var(--success); color: white; } .job-card .pallet-pill { font-size: var(--base); font-weight: 700; color: var(--text); white-space: nowrap; flex-shrink: 0; } .job-card .destination { font-size: var(--lg); font-weight: 700; line-height: 1.2; margin-bottom: 4px; padding-right: var(--sp-4); } .job-card .suburb { font-size: calc(var(--base) * 0.95); color: var(--text-mute); font-weight: 400; margin-bottom: var(--sp-2); } .job-card .distance-from-depot { font-size: calc(var(--base) * 0.85); color: var(--text-mute); font-weight: 400; margin-top: calc(-1 * var(--sp-1)); margin-bottom: var(--sp-2); opacity: 0.85; } .job-card .meta { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .job-card .meta .chip { background: var(--surface-2); padding: 4px var(--sp-2); border-radius: 999px; font-weight: 700; border: 1px solid var(--border); font-size: calc(var(--base) * 0.9); } .job-card .arrow { position: absolute; right: var(--sp-3); bottom: var(--sp-3); font-size: var(--xxl); color: var(--primary); line-height: 1; } /* ============ ALT-ENTRY ============ */ .alt-entry { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-2); } .alt-entry .alt-btn { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: var(--sp-3); cursor: pointer; font-family: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: calc(var(--tap-lg) * 1.2); font-size: var(--base); font-weight: 700; } .alt-entry .alt-btn svg { width: 36px; height: 36px; color: var(--primary); } .alt-entry .alt-btn:active { background: var(--surface-2); } .alt-entry .alt-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ============ DETAIL ============ */ .detail-hero { background: var(--surface); border-radius: 20px; padding: var(--sp-4); margin-bottom: var(--sp-3); border: 2px solid var(--border); } .detail-hero .docket { font-size: var(--base); color: var(--text-mute); font-weight: 700; margin-bottom: var(--sp-1); } .detail-hero .dest { font-size: var(--xxl); font-weight: 700; line-height: 1.15; margin-bottom: var(--sp-2); } .detail-hero .addr { font-size: var(--base); color: var(--text-mute); margin-bottom: var(--sp-3); white-space: pre-line; } .detail-row { display: flex; justify-content: space-between; padding: var(--sp-2) 0; border-top: 1px solid var(--border); font-size: var(--base); } .detail-row .label { color: var(--text-mute); font-weight: 700; } .detail-row .val { color: var(--text); font-weight: 700; text-align: right; } .info-card { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: var(--sp-3); font-size: var(--base); color: var(--text); white-space: pre-wrap; } /* ============ LINE ITEMS (detail screen) ============ */ .item-card { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: var(--sp-3); margin-bottom: var(--sp-2); } .item-card .item-top { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 8px; flex-wrap: wrap; } .item-card .qty-pill { background: var(--primary); color: var(--primary-ink); font-size: var(--lg); font-weight: 700; padding: 4px 10px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; } .item-card .product-name { flex: 1; min-width: 0; font-size: var(--base); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .item-card .item-meta { display: flex; gap: 6px; flex-wrap: wrap; } .item-card .chip { background: var(--surface-2); border: 1px solid var(--border); padding: 3px 8px; border-radius: 999px; font-size: calc(var(--base) * 0.85); font-weight: 700; color: var(--text); } .dg-class-pill, .badge.dg-class { background: var(--text-mute); /* unknown-class fallback */ color: white; padding: 3px 8px; border-radius: 6px; font-size: calc(var(--base) * 0.85); font-weight: 700; letter-spacing: 0.04em; border: 0; /* DG badges arrive ~200-400ms after the queue paints (they're fetched in * a follow-up call to /api/queue/dg). Fade them in so the appearance is * gentle, not a jarring layout jump. */ animation: dg-fade-in 250ms ease-out; } @keyframes dg-fade-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* UN/ADG Class colours — solid dominant colour per the diamond label. Built * for at-a-glance recognition in sunlight, not pixel-perfect facsimiles. */ .dg-class-pill[data-class="1"], .badge.dg-class[data-class="1"] { background: #FF8800; color: #000; } /* Explosives — orange */ .dg-class-pill[data-class="2"], .badge.dg-class[data-class="2"], .dg-class-pill[data-class="2.1"], .badge.dg-class[data-class="2.1"] { background: #D32F2F; color: #fff; } /* Flammable gas — red */ .dg-class-pill[data-class="2.2"], .badge.dg-class[data-class="2.2"] { background: #2E7D32; color: #fff; } /* Non-flammable gas — green */ .dg-class-pill[data-class="2.3"], .badge.dg-class[data-class="2.3"] { background: #fff; color: #000; border: 1.5px solid #000; } /* Toxic gas — white */ .dg-class-pill[data-class="3"], .badge.dg-class[data-class="3"] { background: #D32F2F; color: #fff; } /* Flammable liquid — red */ .dg-class-pill[data-class="4"], .badge.dg-class[data-class="4"], .dg-class-pill[data-class="4.1"], .badge.dg-class[data-class="4.1"] { background: #D32F2F; color: #fff; } /* Flammable solid — red */ .dg-class-pill[data-class="4.2"], .badge.dg-class[data-class="4.2"] { background: #D32F2F; color: #fff; } /* Spontaneously combustible — red */ .dg-class-pill[data-class="4.3"], .badge.dg-class[data-class="4.3"] { background: #1565C0; color: #fff; } /* Dangerous when wet — blue */ .dg-class-pill[data-class="5"], .badge.dg-class[data-class="5"], .dg-class-pill[data-class="5.1"], .badge.dg-class[data-class="5.1"] { background: #FBC02D; color: #000; } /* Oxidiser — yellow */ .dg-class-pill[data-class="5.2"], .badge.dg-class[data-class="5.2"] { background: #D32F2F; color: #fff; } /* Organic peroxide — red */ .dg-class-pill[data-class="6"], .badge.dg-class[data-class="6"], .dg-class-pill[data-class="6.1"], .badge.dg-class[data-class="6.1"] { background: #fff; color: #000; border: 1.5px solid #000; } /* Toxic — white */ .dg-class-pill[data-class="6.2"], .badge.dg-class[data-class="6.2"] { background: #fff; color: #000; border: 1.5px solid #000; } /* Infectious — white */ .dg-class-pill[data-class="7"], .badge.dg-class[data-class="7"] { background: #FBC02D; color: #000; } /* Radioactive — yellow */ .dg-class-pill[data-class="8"], .badge.dg-class[data-class="8"] { background: #212121; color: #fff; } /* Corrosive — black */ .dg-class-pill[data-class="9"], .badge.dg-class[data-class="9"] { background: #424242; color: #fff; border: 1.5px solid #000; } /* Misc — dark grey */ .ef-pill { padding: 3px 8px; border-radius: 6px; font-size: calc(var(--base) * 0.85); font-weight: 700; letter-spacing: 0.04em; } .ef-pill.full { background: var(--text); color: var(--surface); } .ef-pill.empty { background: var(--surface-2); color: var(--text); border: 1px dashed var(--text-mute); } /* ============ DAY-GROUP HEADERS (Today / Tomorrow / Upcoming) ============ */ .group-header { display: flex; align-items: baseline; justify-content: space-between; margin: var(--sp-4) 0 var(--sp-2); padding-bottom: 6px; border-bottom: 2px solid var(--border); font-size: var(--lg); font-weight: 700; } .group-header:first-child { margin-top: var(--sp-1); } .group-header.today { color: var(--primary); border-bottom-color: var(--primary); } .group-header.late { color: var(--danger); border-bottom-color: var(--danger); } /* ============ MAP TAB ============ */ /* Map screen uses flex layout: the panel is a column, status + toggles take * their natural height, and the map container fills the rest of the viewport. * This means the map always reaches the bottom edge regardless of how much * chrome lives above it. Avoids fragile calc(100vh - ) calculations. */ #tab-panel-map { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; /* allow children to shrink so the map container can fill */ } #tab-panel-map[hidden] { display: none; } #map-container { width: 100%; flex: 1 1 auto; min-height: 320px; /* sanity floor for tiny viewports */ border-radius: 12px; overflow: hidden; background: var(--surface-2); } .leaflet-popup-content { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: calc(var(--base) * 0.9); line-height: 1.35; } .leaflet-popup-content .popup-muted { color: var(--text-mute); } /* Multi-order stop popup: one row per order. The .docket-link inside * inherits the existing button styling but we override display so it lays * out inline with the customer name rather than as a block button. */ .leaflet-popup-content .popup-orders { margin-top: 8px; } .leaflet-popup-content .popup-order { padding: 4px 0; border-top: 1px solid var(--border, #e2e8f0); } .leaflet-popup-content .popup-order:first-child { border-top: none; } .leaflet-popup-content .popup-order .docket-link { display: inline-block; margin: 0; padding: 2px 6px; font-size: 0.95em; } .leaflet-popup-content .docket-link { display: inline-block; margin-top: 6px; padding: 6px 10px; background: var(--primary); color: white; border-radius: 6px; font-weight: 700; text-decoration: none; } .map-status-line { font-size: calc(var(--base) * 0.95); color: var(--text-mute); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 var(--sp-2); } .map-controls { flex: 0 0 auto; padding: 0 var(--sp-3) var(--sp-2); } .map-toggle-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); } .map-toggle-row .heat-toggle { flex: 0 0 auto; } /* Inline scope-filter hint that appears when a filter has hidden all pins. * Keeps Greg from thinking the app is broken. */ .map-filter-hint { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: #FFF8E1; /* warm amber tint — informational, not error */ border: 1px solid #F0DEB0; border-radius: 10px; font-size: calc(var(--base) * 0.9); color: #6B4F00; display: flex; align-items: center; gap: var(--sp-2); } .map-filter-hint button { appearance: none; border: 0; background: var(--primary); color: white; padding: 8px 14px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: calc(var(--base) * 0.9); cursor: pointer; min-height: 44px; } .heat-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px; } .heat-toggle-btn { appearance: none; background: transparent; border: 0; padding: 10px 14px; min-height: 48px; /* Apple HIG floor 44px + room for older fingers */ border-radius: 999px; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: calc(var(--base) * 0.9); font-weight: 700; color: var(--text-mute); cursor: pointer; } .heat-toggle-btn.active { background: var(--primary); color: white; } .kemsea-pin .kemsea-pin-badge { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 700; font-size: 14px; border: 2.5px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.35); color: white; } /* Pin colour by docket type. */ .pin-delivery .kemsea-pin-badge { background: #2E5469; } /* slate-blue — drop-off */ .pin-pickup .kemsea-pin-badge { background: #DC2626; } /* red — pickup */ .pin-depot .kemsea-pin-badge { background: #6EAA90; } /* sage — Kemsea HQ */ /* "At depot" variant — freight is still at the warehouse (Pending/Picked). * Outlined / hollow style so it's distinct from on-truck stops at a glance. */ .pin-at-depot .kemsea-pin-badge { background: #ffffff; border-width: 3px; } .pin-at-depot.pin-delivery .kemsea-pin-badge { color: #2E5469; border-color: #2E5469; } .pin-at-depot.pin-pickup .kemsea-pin-badge { color: #DC2626; border-color: #DC2626; } /* Truck-load count badge — floats top-right of the K, only shown when "On Truck" * filter is active. Keeps the K logo clean and visible. */ .pin-depot { position: relative; } .pin-depot .depot-load-badge { position: absolute; top: -8px; right: -10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #2E5469; /* slate-blue contrast against sage K */ color: white; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: 12px; font-weight: 700; border: 2px solid white; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.4); pointer-events: none; } /* Cluster icon — sum of pallets. Coloured by docket-type mix. */ .kemsea-cluster .kemsea-cluster-badge { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-weight: 700; font-size: 16px; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } /* MarkerCluster's default CSS sets background on .marker-cluster's children; * bump specificity (!important) so our brand colours win consistently. */ .cluster-delivery .kemsea-cluster-badge { background: #2E5469 !important; } .cluster-pickup .kemsea-cluster-badge { background: #DC2626 !important; } /* Mixed cluster — diagonal stripes blue + red. Verbose color-stop syntax for * widest browser support; background-image so the base background-color stays * as a fallback. */ .cluster-mixed .kemsea-cluster-badge { background-color: #2E5469 !important; background-image: repeating-linear-gradient( 45deg, #2E5469 0px, #2E5469 7px, #DC2626 7px, #DC2626 14px ) !important; } /* Wipe Leaflet's default cluster background bubbles so only ours shows. */ .kemsea-cluster .marker-cluster, .kemsea-cluster .marker-cluster-small, .kemsea-cluster .marker-cluster-medium, .kemsea-cluster .marker-cluster-large { background: transparent !important; } .kemsea-cluster .marker-cluster div { background: transparent !important; } .group-header .group-label { line-height: 1.2; } .group-header .group-count { font-size: calc(var(--base) * 0.85); color: var(--text-mute); font-weight: 400; } /* ============ FORM ============ */ .field { margin-bottom: var(--sp-4); } .field label { display: block; font-size: var(--base); font-weight: 700; margin-bottom: var(--sp-2); color: var(--text); } .field input[type="text"], .field input[type="number"], .field input[type="tel"] { width: 100%; font-family: inherit; font-size: var(--lg); padding: var(--sp-3); border: 2px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); min-height: var(--tap-lg); } .field input:focus { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--primary); } /* ============ SIGNATURE PAD ============ */ .sig-pad { width: 100%; aspect-ratio: 5 / 2; min-height: 200px; /* keep usable signing area even at narrow viewport widths */ background: var(--surface); border: 2px solid var(--border); border-radius: 14px; position: relative; overflow: hidden; touch-action: none; } .sig-pad canvas { width: 100%; height: 100%; display: block; cursor: crosshair; } .sig-pad .sig-line { position: absolute; bottom: 18%; left: 8%; right: 8%; height: 2px; background: var(--border); pointer-events: none; } .sig-pad .sig-hint { position: absolute; bottom: 4%; left: 0; right: 0; text-align: center; /* Fixed (small) so it stays clear of the sign line at any --size-mult. */ font-size: 13px; color: var(--text-mute); pointer-events: none; transition: opacity 200ms; } .sig-pad.has-ink .sig-hint { opacity: 0; } .sig-meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-2); } .sig-meta .sig-tip { font-size: calc(var(--base) * 0.9); color: var(--text-mute); } /* ============ TOGGLE ============ */ .toggle-row { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: var(--sp-3); margin-bottom: var(--sp-4); gap: var(--sp-3); } .toggle-row .toggle-label { font-size: var(--base); font-weight: 700; } .toggle-row .toggle-sub { font-size: calc(var(--base) * 0.85); color: var(--text-mute); font-weight: 400; margin-top: 4px; } .toggle { width: 64px; height: 36px; background: var(--border); border-radius: 999px; position: relative; cursor: pointer; flex-shrink: 0; border: none; padding: 0; font-family: inherit; transition: background 200ms; } .toggle::after { content: ''; position: absolute; width: 28px; height: 28px; background: var(--surface); border-radius: 50%; top: 4px; left: 4px; transition: left 200ms; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .toggle[aria-checked="true"] { background: var(--primary); } .toggle[aria-checked="true"]::after { left: 32px; } .toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ============ BUTTONS ============ */ .submit-bar { padding: var(--sp-3) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); position: sticky; bottom: 0; } .btn-primary { width: 100%; background: var(--primary); color: var(--primary-ink); border: none; border-radius: 14px; font-family: inherit; font-size: var(--lg); font-weight: 700; padding: var(--sp-3); cursor: pointer; min-height: var(--tap-lg); } .btn-primary:active { transform: translateY(1px); } .btn-primary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; } .btn-text { background: transparent; color: var(--primary); border: none; font-family: inherit; font-size: var(--base); font-weight: 700; padding: var(--sp-2) var(--sp-3); cursor: pointer; text-decoration: underline; min-height: var(--tap); } .btn-text:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; } .logout-link { display: block; width: 100%; text-align: center; margin-top: var(--sp-3); color: var(--text-mute); text-decoration: none; } /* ============ ERROR LINE ============ */ .error { color: var(--danger); font-size: var(--base); min-height: 1.5em; margin: var(--sp-2) 0; font-weight: 700; text-align: center; } /* ============ BOOT ============ */ #boot { justify-content: center; align-items: center; } .boot-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .boot-logo { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 24px rgba(46, 84, 105, 0.18); } .boot-brand { font-size: var(--lg); font-weight: 700; letter-spacing: 0.15em; color: var(--primary); text-transform: uppercase; } .boot-spinner { width: 36px; height: 36px; border: 4px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-top: var(--sp-2); } @keyframes spin { to { transform: rotate(360deg); } } /* PIN-screen header logo — small mark to anchor identity */ .header-logo { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } /* ============ PIN ============ */ .pin-body { display: flex; flex-direction: column; justify-content: center; align-items: center; } .pin-dots { display: flex; gap: var(--sp-3); justify-content: center; margin: var(--sp-4) 0 var(--sp-2); } .pin-dots span { width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 3px solid var(--border); } .pin-dots span.filled { background: var(--primary); border-color: var(--primary); } .pin-dots.shake { animation: pin-shake .35s cubic-bezier(.36,.07,.19,.97) both; } @keyframes pin-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 50%{transform:translateX(10px)} 75%{transform:translateX(-6px)} } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); width: 100%; max-width: 380px; } .key { appearance: none; -webkit-appearance: none; background: var(--surface); border: 2px solid var(--border); color: var(--text); border-radius: 16px; padding: var(--sp-4) 0; font-size: var(--xxl); font-weight: 700; font-family: inherit; cursor: pointer; touch-action: manipulation; min-height: var(--tap-lg); } .key:active { background: var(--surface-2); } .key.action { font-size: var(--xl); font-weight: 700; color: var(--text-mute); } .key:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } /* ============ SETUP STEPS ============ */ .steps { padding-left: var(--sp-4); margin: var(--sp-3) 0; } .steps li { margin: var(--sp-3) 0; font-size: var(--base); line-height: 1.5; color: var(--text); } .steps li b { color: var(--text); font-weight: 700; } /* ============ SUCCESS ============ */ .success-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-4); } .tick-circle { width: 140px; height: 140px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); color: white; animation: tick-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes tick-pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .tick-circle svg { width: 80px; height: 80px; } .success-wrap h2 { font-size: var(--xxl); margin: 0 0 var(--sp-2); font-weight: 700; } .success-wrap .docket-line { font-size: var(--lg); color: var(--text-mute); margin-bottom: var(--sp-4); } .success-wrap .recap { background: var(--surface); border: 2px solid var(--border); border-radius: 16px; padding: var(--sp-3) var(--sp-4); width: 100%; max-width: 360px; } .success-wrap .recap .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: var(--base); } .success-wrap .recap .label { color: var(--text-mute); font-weight: 700; } /* ============ TABS (queue Pending / Signed) ============ */ .tab-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); } .tab-btn { flex: 1; background: var(--surface); border: 2px solid var(--border); border-radius: 14px; font-family: inherit; /* Cap tab font-size so size-mult doesn't push them past viewport width. Tabs have limited horizontal real estate (always 3 across); their text must not scale beyond what fits. */ font-size: clamp(14px, calc(var(--base) * 0.85), 18px); font-weight: 700; color: var(--text); padding: var(--sp-2) 4px; min-height: 48px; /* fixed tap area, doesn't scale */ cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tab-btn[aria-selected="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } .tab-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .tab-count { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; /* fixed; never bleeds into the tab label */ text-align: center; font-weight: 700; flex-shrink: 0; } /* Hide tab counts on very narrow viewports — the counts are also shown in the section-label inside each panel ("2 PENDING"), so no info is lost. */ @media (max-width: 380px) { .tab-count { display: none; } } .tab-btn[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, 0.25); color: var(--primary-ink); } /* ============ SIGNED-TODAY card ============ */ .signed-card { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: var(--sp-3); margin-bottom: var(--sp-2); position: relative; } .signed-card .docket-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .signed-card .docket-no { background: var(--success); color: white; font-size: var(--base); font-weight: 700; padding: 4px var(--sp-2); border-radius: 8px; } .signed-card .time-pill { font-size: var(--base); font-weight: 700; color: var(--text-mute); } .signed-card .destination { font-size: var(--lg); font-weight: 700; line-height: 1.2; margin: var(--sp-1) 0 4px; } .signed-card .receiver { font-size: var(--base); color: var(--text-mute); } .signed-card .receiver b { color: var(--text); font-weight: 700; } /* ============ RUNSHEET (forward-looking grouped view) ============ */ .runsheet-day-header { font-size: var(--lg); font-weight: 700; margin: var(--sp-3) 0 var(--sp-2); padding-bottom: 4px; border-bottom: 2px solid var(--border); color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; line-height: 1.2; } .runsheet-day-header.today { color: var(--primary); } .runsheet-day-header .day-sub { font-size: calc(var(--base) * 0.9); font-weight: 400; color: var(--text-mute); white-space: nowrap; } .runsheet-card { background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: var(--sp-3); margin-bottom: 8px; } .runsheet-card .rs-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .runsheet-card .docket-no { background: var(--surface-2); color: var(--text); font-size: var(--base); font-weight: 700; padding: 4px 10px; border-radius: 8px; } .runsheet-card .dest { font-size: var(--base); font-weight: 700; line-height: 1.2; margin-bottom: 4px; word-break: normal; overflow-wrap: anywhere; } .runsheet-card .meta-line { font-size: calc(var(--base) * 0.85); color: var(--text-mute); } .runsheet-card .status-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .runsheet-card .status-dot.picked { background: var(--warn); } .runsheet-card .status-dot.shipped { background: var(--primary); } .runsheet-note { font-size: calc(var(--base) * 0.85); color: var(--text-mute); margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--surface-2); border-radius: 10px; line-height: 1.4; } /* ============ PULL-TO-REFRESH indicator ============ */ .pull-indicator { position: absolute; top: -64px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; height: 56px; pointer-events: none; opacity: 0; transition: opacity 200ms, transform 200ms; } .pull-indicator.ready { opacity: 1; } .pull-indicator.refreshing { opacity: 1; transform: translateY(64px); } .pull-spinner { width: 28px; height: 28px; border-width: 3px; margin: 0; } #queue-body { position: relative; } /* anchor for the pull indicator */ /* ============ EMPTY STATE ============ */ .empty-state, .error-state { text-align: center; padding: var(--sp-5) var(--sp-3); } .empty-state.hidden, .error-state.hidden { display: none; } .empty-tick { width: 88px; height: 88px; border-radius: 50%; background: var(--success); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); } .empty-tick svg { width: 56px; height: 56px; } .empty-state h2, .error-state h2 { font-size: var(--xl); margin: 0 0 var(--sp-2); } .empty-state p, .error-state p { font-size: var(--base); color: var(--text-mute); margin: 0 0 var(--sp-3); } /* ============ SETTINGS SHEET ============ */ .settings-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: flex-end; justify-content: center; z-index: 100; } .settings-sheet[data-open="true"] { display: flex; } .settings-sheet .sheet { background: var(--surface); width: 100%; max-width: 520px; border-top-left-radius: 24px; border-top-right-radius: 24px; padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); max-height: 80%; overflow-y: auto; } .settings-sheet h3 { font-size: var(--xl); margin: 0 0 var(--sp-3); } .settings-label { font-size: calc(var(--base) * 0.95); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); margin: var(--sp-3) 0 var(--sp-2); } .choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-2); } .choice-btn { background: var(--surface); border: 2px solid var(--border); border-radius: 14px; padding: var(--sp-3) var(--sp-1); font-family: inherit; font-weight: 700; cursor: pointer; color: var(--text); min-height: var(--tap-lg); text-align: center; font-size: var(--base); } .choice-btn[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--primary-ink); } .choice-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .choice-btn.size-a { font-size: 18px; } .choice-btn.size-a-p { font-size: 24px; } .choice-btn.size-a-pp{ font-size: 32px; } .settings-done { margin-top: var(--sp-3); } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============ ADMIN MODE ============ */ /* Banner sits above all screens when role=admin. Sticky top, slim, slate. */ .admin-banner { display: flex; align-items: center; gap: 10px; background: #312E81; /* indigo-900 — clearly NOT the driver-blue */ color: #FFFFFF; padding: 8px 14px; font-family: inherit; font-size: 13px; letter-spacing: 0.2px; position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 4px rgba(0,0,0,0.18); } .admin-banner.hidden { display: none !important; } .admin-banner .admin-tag { background: #FBBF24; color: #1F2937; font-weight: 800; letter-spacing: 0.6px; font-size: 11px; padding: 2px 7px; border-radius: 3px; } .admin-banner .admin-msg { flex: 1; } .admin-banner .admin-msg strong { font-weight: 700; } .admin-banner .admin-switch { background: rgba(255,255,255,0.18); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; padding: 5px 11px; font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; min-height: 30px; } .admin-banner .admin-switch:active { background: rgba(255,255,255,0.30); } /* Driver-picker list */ .admin-picker-list { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-2); } .admin-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-bg); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 14px; min-height: var(--tap-lg); cursor: pointer; font: inherit; width: 100%; text-align: left; color: var(--text); } .admin-picker-row:active { background: var(--card-bg-press, #eef2f6); } .admin-picker-row .name { font-weight: 700; font-size: 15px; } .admin-picker-row .meta { color: var(--muted); font-size: 12px; margin-top: 2px; } .admin-picker-row .chev { color: var(--muted); font-size: 18px; } /* Disabled POD submit button in admin mode (when sign screen reached) */ .sign-submit[disabled].admin-view-only { background: #6B7280 !important; color: #F9FAFB !important; cursor: not-allowed; } /* Admin activity sheet — monospace log lines with subtle dividers */ .admin-activity-list { margin: var(--sp-2) 0; max-height: 60vh; overflow-y: auto; background: #0F172A; color: #E2E8F0; border-radius: 6px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; line-height: 1.5; padding: 8px 10px; } .admin-activity-list .log-line { padding: 3px 0; border-bottom: 1px solid #1E293B; word-break: break-word; white-space: pre-wrap; } .admin-activity-list .log-line:last-child { border-bottom: none; } .admin-activity-list .ts { color: #94A3B8; } .admin-activity-list .marker { color: #FBBF24; font-weight: 700; } .admin-activity-list .marker.pod-submitted, .admin-activity-list .marker.fm-submitPOD-patched { color: #34D399; } .admin-activity-list .marker.WARN, .admin-activity-list .marker.pod-wrong-state, .admin-activity-list .marker.pod-non-shipped-sign, .admin-activity-list .marker.pod-already-signed, .admin-activity-list .marker.pod-stale-client, .admin-activity-list .marker.pod-cross-driver { color: #F87171; } .admin-activity-list .empty { color: #94A3B8; font-style: italic; text-align: center; padding: 24px 12px; } /* ============ APPROX PINS ============ */ /* Coarse-fallback geocode (suburb-centroid or postcode-centroid). The pin stays the same docketType colour but is wrapped in a dashed orange ring so the driver instantly knows "we know the locality but not the exact street — confirm before driving". */ .kemsea-pin.pin-approx .kemsea-pin-badge { border: 2.5px dashed #EA580C !important; /* orange-600 */ box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.18); } .kemsea-pin.pin-approx .pin-approx-warn { position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 50%; background: #EA580C; color: #fff; font-size: 11px; line-height: 16px; text-align: center; font-weight: 800; border: 1.5px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } .popup-approx-warn { background: #FFFBEB; border-left: 3px solid #EA580C; color: #7C2D12; padding: 5px 8px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; border-radius: 2px; } /* Off-map counter pill — sits in the map header next to the status line. */ .map-offmap-pill { background: #FFFBEB; border: 1px solid #F59E0B; color: #92400E; padding: 3px 9px; border-radius: 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: 8px; min-height: 26px; white-space: nowrap; } .map-offmap-pill:active { background: #FEF3C7; } .map-offmap-pill.hidden { display: none !important; } .map-offmap-pill::before { content: '⚠ '; } .offmap-list { margin: var(--sp-2) 0; max-height: 55vh; overflow-y: auto; } .offmap-list .offmap-row { border: 1px solid var(--rule); border-radius: 6px; background: var(--card-bg); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: var(--text); } .offmap-list .offmap-row:active { background: var(--card-bg-press, #eef2f6); } .offmap-list .offmap-row .docket { font-weight: 800; color: var(--primary); font-size: 14px; } .offmap-list .offmap-row .dest { margin-top: 2px; font-weight: 600; } .offmap-list .offmap-row .cust { color: var(--muted); font-size: 12px; margin-top: 1px; } .offmap-list .offmap-row .addr { color: var(--muted-2, #64748b); font-size: 11.5px; margin-top: 4px; font-style: italic; white-space: pre-line; } /* Queue card off-map badge — small inline marker on jobs whose address couldn't be geocoded. Lives next to the existing late/DG badges. */ .job-card .badge-offmap { display: inline-block; background: #FFFBEB; border: 1px solid #F59E0B; color: #92400E; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-left: 6px; letter-spacing: 0.3px; } .job-card .badge-offmap::before { content: '⚠ '; } /* ============ SIGNED-DETAIL (read-only POD proof) ============ */ .signed-card-tappable { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; position: relative; } .signed-card-tappable:active { background: var(--card-bg-press, #eef2f6); } .signed-card-tappable .arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 22px; line-height: 1; } .finalised-tag { display: inline-block; margin-left: 6px; background: #E2E8F0; color: #475569; font-size: 10px; font-weight: 700; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 3px; vertical-align: middle; } .pod-proof { background: #ECFDF5; border: 1px solid #6EE7B7; border-radius: 8px; padding: 12px 14px; margin-bottom: var(--sp-3); } .pod-proof.hidden { display: none !important; } .pod-proof-head { font-weight: 800; color: #15803D; font-size: 15px; margin-bottom: 8px; letter-spacing: 0.3px; } .pod-proof .detail-row .label { color: #047857; } .pod-proof .detail-row .val { font-weight: 600; } .readonly-note { text-align: center; color: var(--muted); font-size: 13px; padding: 6px 4px; font-style: italic; } .readonly-note.hidden { display: none !important; } /* The sign button + toggled POD rows use .hidden — which is NOT globally styled in this stylesheet (only .screen.hidden etc). Add the specific rules. */ #detail-go.hidden { display: none !important; } .detail-row.hidden { display: none !important; } .pod-sig-wrap { margin-top: 10px; } .pod-sig-wrap.hidden { display: none !important; } .pod-sig-label { font-size: 12px; font-weight: 700; color: #047857; letter-spacing: 0.3px; margin-bottom: 4px; } .pod-signature { display: block; width: 100%; max-width: 360px; background: #fff; border: 1px solid #6EE7B7; border-radius: 6px; padding: 4px; } .pod-sig-status { font-size: 12px; color: var(--muted); font-style: italic; }