/* ========================================================================== DriverHub Design System — colour tokens (UI/UX Refinement) -------------------------------------------------------------------------- Single source of truth for every colour in the app. Three layers, in order of increasing priority: 1. :root — light values (the default/fallback) 2. prefers-color-scheme: dark, guarded by :not([data-theme="light"]) — system dark mode, unless the driver explicitly chose Light 3. :root[data-theme="dark"] — explicit driver choice, wins regardless of system preference public/theme.js sets data-theme="light"|"dark" on from the driver's stored Appearance choice, or removes it entirely for "System". Every screen (Login, Home, Schedule, Operations/timer.html, Finance, Dashboard, all panels/modals) shares this one stylesheet and these same tokens — there is no separate dark stylesheet anywhere. ========================================================================== */ :root { --bg: #f5f6f8; --surface: #ffffff; --surface-secondary: #f3f4f6; --surface-secondary-strong: #1f2937; --surface-elevated: #f9fafb; --text-primary: #111827; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --border: #d1d5db; --border-subtle: #e5e7eb; /* Deliberately dark decorative surfaces used for emphasis (header, primary buttons, active nav) — dark even in Light mode today; becomes the accent blue in Dark mode so primary actions still pop against an already-dark page (matches the supplied reference's "blue primary accent"). */ --emphasis-bg: #111827; --emphasis-text: #ffffff; --accent: #2563eb; --accent-strong: #1d4ed8; --accent-bg: #eff6ff; --accent-bg-strong: #e0e7ff; --accent-border: #93c5fd; --success: #16a34a; --success-strong: #065f46; --success-bg: #ecfdf5; --success-border: #a7f3d0; --warning: #d97706; --warning-strong: #92400e; --warning-bg: #fef3c7; --warning-border: #fcd34d; --danger: #b91c1c; --danger-strong: #dc2626; --danger-bg: #fef2f2; --danger-border: #fecaca; /* Job Type category accents — Arrival/Departure reuse accent/warning above; Transfer/Hourly Disposal/Ride-Hailing get their own hue. */ --cat-violet: #7c3aed; --cat-violet-bg: #ede9fe; --cat-violet-text: #5b21b6; --cat-teal: #0d9488; --cat-teal-bg: #ccfbf1; --cat-teal-text: #115e59; --cat-pink: #db2777; --cat-pink-bg: #fce7f3; --cat-pink-text: #9d174d; --radius: 12px; --radius-sm: 10px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0f19; --surface: #131a2b; --surface-secondary: #1c2438; --surface-secondary-strong: #1e40af; --surface-elevated: #1a2236; --text-primary: #f3f4f6; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border: #2a3348; --border-subtle: #232c40; --emphasis-bg: #2563eb; --emphasis-text: #ffffff; --accent: #3b82f6; --accent-strong: #60a5fa; --accent-bg: #16213a; --accent-bg-strong: #1c2c4d; --accent-border: #2f4a7a; --success: #22c55e; --success-strong: #4ade80; --success-bg: #0f2a1c; --success-border: #1f5c3a; --warning: #f59e0b; --warning-strong: #fbbf24; --warning-bg: #2c2008; --warning-border: #5a4413; --danger: #ef4444; --danger-strong: #f87171; --danger-bg: #2c1414; --danger-border: #5c2626; --cat-violet: #a78bfa; --cat-violet-bg: #241b42; --cat-violet-text: #c4b5fd; --cat-teal: #2dd4bf; --cat-teal-bg: #0f2a28; --cat-teal-text: #5eead4; --cat-pink: #f472b6; --cat-pink-bg: #2e1826; --cat-pink-text: #f9a8d4; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --bg: #0b0f19; --surface: #131a2b; --surface-secondary: #1c2438; --surface-secondary-strong: #1e40af; --surface-elevated: #1a2236; --text-primary: #f3f4f6; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-faint: #64748b; --border: #2a3348; --border-subtle: #232c40; --emphasis-bg: #2563eb; --emphasis-text: #ffffff; --accent: #3b82f6; --accent-strong: #60a5fa; --accent-bg: #16213a; --accent-bg-strong: #1c2c4d; --accent-border: #2f4a7a; --success: #22c55e; --success-strong: #4ade80; --success-bg: #0f2a1c; --success-border: #1f5c3a; --warning: #f59e0b; --warning-strong: #fbbf24; --warning-bg: #2c2008; --warning-border: #5a4413; --danger: #ef4444; --danger-strong: #f87171; --danger-bg: #2c1414; --danger-border: #5c2626; --cat-violet: #a78bfa; --cat-violet-bg: #241b42; --cat-violet-text: #c4b5fd; --cat-teal: #2dd4bf; --cat-teal-bg: #0f2a28; --cat-teal-text: #5eead4; --cat-pink: #f472b6; --cat-pink-bg: #2e1826; --cat-pink-text: #f9a8d4; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4); } html { color-scheme: light dark; } /* Mobile-first base styles for Driver App MVP */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; } .app-header { background: var(--emphasis-bg); color: #ffffff; padding: 16px; text-align: center; } /* Home visual refinement — Home hides the shared blue header bar, the Sign out/driver-name row, and the standalone footer text so it reads as its own screen rather than "the previous application"; Home gets its own compact wordmark instead (see .home-brand), and Sign Out remains reachable via More, unchanged. Every other view (Login, Schedule, Finance, Dashboard) keeps these elements exactly as before — this is scoped to body.home-active only, toggled in switchToHome()/the other switchTo*() functions in app.js. */ body.home-active .app-header, body.home-active .schedule-header, body.home-active .app-footer, body.schedule-active .app-header, body.schedule-active .schedule-header, body.payments-active .app-header, body.payments-active .schedule-header, body.payments-active .app-footer, body.dashboard-active .app-header, body.dashboard-active .schedule-header, body.dashboard-active .app-footer, body.login-active .app-header, body.login-active .app-footer { display: none; } /* Schedule visual refinement — plain page heading replacing the blue banner, same treatment as Home's own compact brand block conceptually, but simple text (no wordmark repeat) since "DriverHub" branding already lives on Home. */ .schedule-page-heading { margin: 2px 0 14px; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); } .app-header h1 { margin: 0; font-size: 1.25rem; } .app-main { flex: 1; padding: 16px; max-width: 560px; width: 100%; margin: 0 auto; } .hidden { display: none !important; } .card { background: var(--surface); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .card h2 { margin-top: 0; font-size: 1.1rem; } .hint { color: var(--text-muted); font-size: 0.85rem; margin-top: -8px; } .muted { color: var(--text-muted); } .app-footer { text-align: center; padding: 12px; color: var(--text-faint); font-size: 0.8rem; } /* Sign-in */ #sign-in-form { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .field-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-top: 10px; } .text-input { width: 100%; min-height: 52px; border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 1.05rem; background: var(--surface); color: var(--text-primary); } .text-input:focus { outline: none; border-color: var(--emphasis-bg); } /* Job Type selector — deliberately more prominent than every other job form field, so it's the first thing a driver notices when the form opens. Same #job-type-select element is reused for both Add and Edit Job (see public/app.js), so this automatically applies to both. No other field gets this treatment. */ #job-type-select { background: var(--warning-bg); color: var(--text-primary); font-weight: 700; border: 2px solid var(--warning); } #job-type-select:focus { border-color: var(--warning-strong); } .primary-button { width: 100%; min-height: 56px; border: none; background: var(--emphasis-bg); color: #ffffff; border-radius: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer; margin-top: 16px; } .primary-button:active { background: var(--surface-secondary-strong); } .primary-button:disabled { background: var(--text-faint); cursor: not-allowed; } .form-error { margin-top: 14px; margin-bottom: 0; color: var(--danger); font-size: 0.9rem; } /* Optional Job image attachment field (Phase D-E) — appended after every other Add/Edit field (see renderJobAttachmentField in app.js), never rendered at all for Ride-Hailing. Deliberately not styled as prominently as #job-type-select above — this field is optional and secondary. */ .job-attachment-field { margin-top: 14px; } .job-attachment-field-body { margin-top: 6px; } .job-attachment-file-input { width: 100%; font-size: 0.9rem; color: var(--text-secondary); } .job-attachment-field-error { margin: 6px 0 0; color: var(--danger); font-size: 0.85rem; } /* Local preview only — this image never leaves the browser (object URL, see URL.createObjectURL in renderJobAttachmentField) until the driver saves the form, at which point the actual file is uploaded separately. */ .job-attachment-preview { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-secondary); } .job-attachment-preview-image { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .job-attachment-preview-meta { flex: 1 1 auto; min-width: 0; font-size: 0.85rem; color: var(--text-secondary); overflow-wrap: anywhere; } .job-attachment-existing-status { margin: 0 0 4px; font-size: 0.9rem; color: var(--text-secondary); } .job-attachment-existing-actions { display: flex; flex-wrap: wrap; gap: 4px; } .job-attachment-remove-prompt { margin: 0 0 4px; font-size: 0.9rem; color: var(--text-primary); font-weight: 600; } .job-attachment-remove-pending { margin: 0; font-size: 0.85rem; color: var(--warning-strong); } /* Schedule */ .schedule-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; } .current-driver-name { font-weight: 700; font-size: 1.05rem; } .link-button { background: none; border: none; color: var(--accent); font-size: 0.95rem; padding: 8px 4px; cursor: pointer; min-height: 44px; } /* Destructive text-button variant (Remove Attachment) — same shape as .link-button, just the existing danger color instead of accent. */ .link-button-danger { color: var(--danger); } /* Top-level Schedule/Dashboard switcher (Phase 2.1) — same look as the admin My Schedule/All Drivers toggle below, reusing .view-toggle-button for the buttons themselves. */ .main-nav-tabs { display: flex; gap: 8px; margin-bottom: 12px; } /* Admin only — "My Schedule" / "All Drivers" toggle */ .admin-view-toggle { display: flex; gap: 8px; margin-bottom: 12px; } /* Phase 2.3 UI Refinement: compact single-