/**
* Ordivity Drivers — the driver app.
*
* LOADED AFTER ordivity-drivers.css, WHICH IT EXTENDS RATHER THAN REPLACES.
* The field, button, card, status and document rules all come from there and
* are not restated here; this file adds the app chrome and overrides the small
* number of things a dark surface needs. Two stylesheets that both define
* `.drv-btn` is how a platform ends up with two button styles.
*
* WHY DARK, WHEN EVERY OTHER SURFACE IS LIGHT. This one is used at night, in a
* car, one-handed, on a phone that has been in a pocket. It is the same palette
* the cashier terminal uses for the same reason. The ACCENT is unchanged —
* #22c55e is the platform's green on every surface — so a driver and a customer
* are still plainly on the same product.
*
* surface #0f172a raised #1e293b line #334155
* text #e2e8f0 muted #94a3b8
* accent #22c55e deep #15803d
* danger #f87171 warn #fbbf24
* radius 12px cards, 10px controls
*
* @version 1.20.0
*/
/* The global [hidden] guard lives in ordivity-drivers.css and covers this file
too. Do not restate it; do not write a `display` rule that outranks it. */
.drv-app {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background: #0f172a;
color: #e2e8f0;
line-height: 1.5;
min-height: 100vh;
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
}
.drv-app * { box-sizing: border-box; }
/* Dark overrides for the shared components ---------------------------------- */
.drv-app .drv-card {
background: #1e293b;
border-color: #334155;
box-shadow: none;
}
.drv-app .drv-card h2 { color: #f1f5f9; }
.drv-app .drv-card > p { color: #94a3b8; }
.drv-app .drv-field label { color: #cbd5e1; }
.drv-app .drv-field .drv-hint { color: #94a3b8; }
.drv-app .drv-note { color: #94a3b8; }
.drv-app .drv-warn { color: #fbbf24; }
.drv-app input[type="text"],
.drv-app input[type="tel"],
.drv-app input[type="date"],
.drv-app input[type="password"],
.drv-app input[type="number"],
.drv-app input[type="file"],
.drv-app select {
width: 100%;
padding: 11px 12px;
font-size: 16px; /* 16px stops iOS zooming the whole page on focus. */
font-family: inherit;
color: #e2e8f0;
background: #0f172a;
border: 1px solid #475569;
border-radius: 10px;
outline: none;
/* v1.13.0 — render native form internals (the date field's own digits and
its calendar icon, the select arrow) for a DARK surface. Without this the
browser assumes a light page and paints the date text near-black, which on
#0f172a was invisible — the whole point of issue 3. */
color-scheme: dark;
}
/* Belt-and-suspenders for WebViews that ignore color-scheme on the field:
colour the date sub-fields explicitly and lighten the picker glyph. */
.drv-app input[type="date"]::-webkit-datetime-edit,
.drv-app input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.drv-app input[type="date"]::-webkit-datetime-edit-text,
.drv-app input[type="date"]::-webkit-datetime-edit-year-field,
.drv-app input[type="date"]::-webkit-datetime-edit-month-field,
.drv-app input[type="date"]::-webkit-datetime-edit-day-field {
color: #e2e8f0;
}
.drv-app input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.85);
opacity: 0.9;
cursor: pointer;
}
.drv-app input:focus,
.drv-app select:focus {
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.drv-app .drv-btn-secondary {
background: #334155;
color: #e2e8f0;
border-color: #475569;
}
.drv-app .drv-btn-secondary:hover { background: #3f4c60; }
.drv-app .drv-btn-danger {
background: transparent;
color: #f87171;
border: 1px solid rgba(248, 113, 113, 0.45);
}
.drv-app .drv-btn-danger:hover { background: rgba(248, 113, 113, 0.1); }
.drv-app .drv-status-error { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
.drv-app .drv-status-ok { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #86efac; }
.drv-app .drv-status-info { background: rgba(96, 165, 250, 0.14); border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; }
/* Sign in -------------------------------------------------------------------- */
.drv-app-signin {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.drv-app-signin-box {
width: 100%;
max-width: 380px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 16px;
padding: 28px 22px;
}
.drv-app-brand {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: #64748b;
}
.drv-app-signin-box h1 { font-size: 1.35rem; color: #f1f5f9; margin: 6px 0 4px; }
.drv-app-signin-box > p { font-size: 0.9rem; color: #94a3b8; margin-bottom: 18px; }
.drv-app-signin-box .drv-note a { color: #4ade80; }
/* Header --------------------------------------------------------------------- */
.drv-app-header {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px calc(12px + env(safe-area-inset-top, 0px));
padding-top: calc(12px + env(safe-area-inset-top, 0px));
background: #1e293b;
border-bottom: 1px solid #334155;
}
.drv-app-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.drv-app-who { min-width: 0; }
.drv-app-name {
font-size: 0.95rem; font-weight: 700; color: #f1f5f9;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drv-app-sub { font-size: 0.75rem; color: #94a3b8; }
.drv-avatar {
flex: 0 0 auto;
width: 40px; height: 40px;
border-radius: 999px;
background: #334155 center/cover no-repeat;
border: 2px solid #475569;
}
.drv-avatar-lg { width: 88px; height: 88px; }
.drv-avatar.is-set { border-color: #22c55e; }
/* The online toggle ----------------------------------------------------------
Deliberately the largest control on the screen: it is pressed with a thumb,
often in a hurry, and pressing the wrong thing here means either missing
work or being dispatched a job you cannot take. */
.drv-toggle {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 16px;
border-radius: 999px;
border: 1px solid #475569;
background: #0f172a;
color: #94a3b8;
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
}
.drv-toggle-dot {
width: 10px; height: 10px; border-radius: 999px;
background: #64748b; flex: 0 0 auto;
}
.drv-toggle.is-online {
background: rgba(34, 197, 94, 0.15);
border-color: #22c55e;
color: #86efac;
}
.drv-toggle.is-online .drv-toggle-dot { background: #22c55e; }
.drv-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.drv-app-blocked { margin: 12px 16px 0; }
/* Tabs ------------------------------------------------------------------------ */
.drv-tabs {
display: flex;
gap: 4px;
padding: 10px 16px 0;
background: #1e293b;
border-bottom: 1px solid #334155;
}
.drv-tab {
flex: 1 1 0;
padding: 11px 6px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: #94a3b8;
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
}
.drv-tab.is-active { color: #4ade80; border-bottom-color: #22c55e; }
.drv-app-main {
max-width: 640px;
margin: 0 auto;
padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px));
}
/* Toast ----------------------------------------------------------------------
position:fixed does NOT escape a display:none ancestor, which is why this
lives at the top of and never inside a hidden screen. That has cost
this platform a release before.
v1.13.0 — anchored to the BOTTOM, not the top. At the top it landed on top of
the header (the driver's name), so an error was unreadable exactly when it
mattered. The bottom is clear of both the header and the tab bar. */
.drv-app-toast {
position: fixed;
left: 16px; right: 16px;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
z-index: 60;
margin: 0;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
}
/* Busy / saving indicator ----------------------------------------------------
v1.13.0 — a centred pill shown by setBusy() during an upload or save. Fixed
and top-level (position:fixed does not escape display:none), clear of both the
header and the bottom toast. */
.drv-app-busy {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 70;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: rgba(15, 23, 42, 0.94);
border: 1px solid #334155;
border-radius: 999px;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
color: #e2e8f0;
font-size: 0.92rem;
font-weight: 600;
}
.drv-spinner {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(148, 163, 184, 0.35);
border-top-color: #22c55e;
animation: drv-spin 0.7s linear infinite;
flex: 0 0 auto;
}
@keyframes drv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.drv-spinner { animation-duration: 1.6s; }
}
.drv-stat {
flex: 1 1 0;
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 14px 10px;
text-align: center;
}
.drv-stat-value { font-size: 1.35rem; font-weight: 700; color: #f1f5f9; }
.drv-stat-label { font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }
.drv-empty { font-size: 0.88rem; color: #64748b; }
/* Zones ------------------------------------------------------------------------ */
.drv-zones { display: flex; flex-direction: column; gap: 10px; }
.drv-zone {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px solid #334155; border-radius: 10px; padding: 12px;
background: #0f172a;
}
/* v1.31.0 — the round-trip price sits beside the standard one and wraps below
it on a narrow phone. */
.drv-zone-roundtrip { flex: 0 0 150px; }
.drv-zone-rt-label { font-size: 0.95rem; }
.drv-zone-badge {
flex: 0 0 auto;
width: 34px; height: 34px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: #334155; color: #e2e8f0; font-weight: 700; font-size: 0.9rem;
}
.drv-zone-body { flex: 1 1 auto; min-width: 0; }
.drv-zone-count { font-size: 0.78rem; color: #94a3b8; }
.drv-zone-price { flex: 0 0 118px; display: flex; align-items: center; gap: 6px; }
.drv-zone-price .drv-currency { color: #94a3b8; font-size: 0.9rem; }
.drv-zone-price input { padding: 8px 10px; }
.drv-zone.is-unpriced { border-color: rgba(251, 191, 36, 0.4); }
/* Suburbs ---------------------------------------------------------------------- */
.drv-suburbs { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }
.drv-suburb {
display: flex; align-items: center; gap: 10px;
border: 1px solid #334155; border-radius: 10px; padding: 10px 12px;
background: #0f172a;
}
.drv-suburb-body { flex: 1 1 auto; min-width: 0; }
.drv-suburb-name { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
.drv-suburb-meta { font-size: 0.75rem; color: #64748b; }
.drv-suburb.is-assigned { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.06); }
.drv-zone-picker { display: flex; gap: 4px; flex: 0 0 auto; }
.drv-zone-pick {
width: 34px; height: 34px;
border-radius: 8px;
border: 1px solid #475569;
background: #1e293b;
color: #94a3b8;
font-family: inherit; font-weight: 700; font-size: 0.85rem;
cursor: pointer;
}
.drv-zone-pick.is-on { background: #22c55e; border-color: #22c55e; color: #06210f; }
/* Map --------------------------------------------------------------------------
The host carries an explicit height. MapLibre stamps `maplibregl-map` onto
whatever element it is handed and its own sheet declares position:relative
and overflow:hidden; a host rule of EQUAL specificity loses that tie because
maplibre-gl.css is injected later. The shared module's geometry guard fixes
this with inline styles after construction — this rule is only the starting
point, not the fix. */
.drv-map-host {
position: relative;
margin: 12px 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid #334155;
}
.drv-map { width: 100%; height: 280px; min-height: 280px; }
.drv-map-pin {
position: absolute;
left: 50%; top: 50%;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border-radius: 999px;
background: #22c55e;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
pointer-events: none;
z-index: 5;
}
.drv-map-note { font-size: 0.8rem; color: #94a3b8; margin-top: 8px; }
.drv-base-state { font-size: 0.85rem; color: #cbd5e1; margin-bottom: 10px; }
/* Photo -------------------------------------------------------------------------- */
.drv-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.drv-photo-actions { flex: 1 1 auto; min-width: 0; }
.drv-photo-actions .drv-btn { margin-bottom: 6px; }
/* Documents (dark variants of the shared .drv-doc rules) ------------------------- */
.drv-app .drv-doc { border-color: #334155; background: #0f172a; }
.drv-app .drv-doc-name { color: #e2e8f0; }
.drv-app .drv-doc-state { color: #94a3b8; }
.drv-app .drv-doc.is-expired { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); }
.drv-app .drv-doc.is-expired .drv-doc-state { color: #fca5a5; }
.drv-app .drv-doc-pick { background: #334155; border-color: #475569; color: #e2e8f0; }
.drv-app .drv-doc-pick:hover { background: #3f4c60; }
.drv-doc-col { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.drv-doc-col input[type="date"] { padding: 8px 10px; }
/* v1.7.1 — F16. The replace sub-form. The date input only exists while a
document is actually being replaced, so it needs to read as part of that
step rather than as a standing field sitting next to the stored value. */
.drv-app .drv-doc-help { color: #94a3b8; font-size: 0.78rem; line-height: 1.35; }
.drv-app .drv-doc-cancel {
background: transparent;
border: 1px solid #475569;
color: #94a3b8;
border-radius: 8px;
padding: 8px 12px;
font: inherit;
cursor: pointer;
margin-left: 8px;
}
.drv-app .drv-doc-cancel:hover { background: #1e293b; color: #cbd5e1; }
@media (min-width: 700px) {
.drv-app-header, .drv-tabs { padding-left: 24px; padding-right: 24px; }
.drv-app-main { padding-left: 24px; padding-right: 24px; }
}
/* ==========================================================================
Offer overlay and the job in hand (v0.8.0)
========================================================================== */
/* The overlay sits at the top of , never inside a screen: position:fixed
does not escape a display:none ancestor. An offer a driver cannot see is a
job lost and a reliability figure damaged for a refusal never made. */
.drv-offer-wrap {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(2, 6, 23, 0.82);
}
.drv-offer {
width: 100%;
max-width: 380px;
background: #1e293b;
border: 2px solid #22c55e;
border-radius: 18px;
padding: 26px 22px 22px;
text-align: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.drv-offer h2 { font-size: 1.05rem; color: #94a3b8; font-weight: 600; margin: 0 0 4px; }
/* The countdown is the loudest thing on the screen because sixty seconds is
the entire decision, and it is read at arm's length in a moving car. */
.drv-offer-timer {
width: 74px; height: 74px;
margin: 0 auto 14px;
border-radius: 999px;
border: 3px solid #22c55e;
display: flex; align-items: center; justify-content: center;
font-size: 1.9rem; font-weight: 700; color: #4ade80;
font-variant-numeric: tabular-nums;
}
.drv-offer.is-urgent { border-color: #f87171; }
.drv-offer.is-urgent .drv-offer-timer { border-color: #f87171; color: #fca5a5; }
.drv-offer-fee {
font-size: 2.3rem; font-weight: 700; color: #f1f5f9;
line-height: 1.1; margin-bottom: 12px;
font-variant-numeric: tabular-nums;
}
.drv-offer-line { font-size: 0.9rem; color: #94a3b8; margin-bottom: 4px; }
.drv-offer-line strong { color: #e2e8f0; }
.drv-offer-actions { display: flex; gap: 10px; margin-top: 20px; }
.drv-offer-actions .drv-btn { flex: 1 1 0; min-height: 52px; }
/* Accept is visually dominant, and Decline is not styled as danger: refusing a
job is a normal, blameless choice and must not read like an alarm. */
.drv-app .drv-btn-accept {
background: #22c55e;
border-color: #22c55e;
color: #06210f;
font-size: 1rem;
font-weight: 700;
}
.drv-app .drv-btn-accept:hover { background: #16a34a; }
/* --- the job in hand ---------------------------------------------------- */
.drv-job {
background: #1e293b;
border: 1px solid #22c55e;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
}
.drv-job-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 6px;
}
.drv-job-step { font-size: 0.9rem; font-weight: 700; color: #4ade80; }
.drv-job-fee {
font-size: 1.15rem; font-weight: 700; color: #f1f5f9;
font-variant-numeric: tabular-nums;
}
.drv-job-outlet { font-size: 0.85rem; color: #94a3b8; margin-bottom: 12px; }
.drv-job-wait {
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.35);
color: #fcd34d;
font-size: 0.85rem;
}
.drv-job-detail {
border-top: 1px solid #334155;
padding-top: 12px;
margin-bottom: 12px;
}
.drv-job-row {
display: flex; gap: 12px; justify-content: space-between;
padding: 5px 0; font-size: 0.88rem;
}
.drv-job-row span { color: #64748b; flex: 0 0 auto; }
.drv-job-row strong { color: #e2e8f0; text-align: right; font-weight: 600; }
.drv-job-links { display: flex; gap: 8px; margin-top: 12px; }
/* display:inline-block, because width and padding are no-ops on an inline . */
.drv-job-links .drv-btn { flex: 1 1 0; display: inline-block; text-align: center; text-decoration: none; }
.drv-job-photo {
border-top: 1px solid #334155;
padding-top: 12px;
margin-bottom: 12px;
}
.drv-job-photo-state { font-size: 0.85rem; color: #94a3b8; margin-bottom: 8px; }
.drv-job-next { width: 100%; min-height: 52px; font-size: 1rem; }
/* ==========================================================================
Install surfaces (v0.8.2)
========================================================================== */
/* Fixed to the bottom, above the safe-area inset — a driver's thumb lives
there, and the header is already carrying the online toggle. */
.drv-install {
position: fixed;
left: 12px; right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 70;
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
background: #1e293b;
border: 1px solid #22c55e;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
/* v1.5.1 — BORDER-BOX, BECAUSE THESE TWO SURFACES ARE OUTSIDE .drv-app.
The global reset at the top of this file is scoped `.drv-app *`, and the
install banner and help panel deliberately sit at TOP LEVEL (position:fixed
does not escape a display:none ancestor). So they were the only things on
the page still running content-box, and every `width: 100%` button inside
them overflowed its container by exactly its horizontal padding — which is
why the Install button rendered wider than the card that contains it. */
.drv-install, .drv-install *,
.drv-install-help, .drv-install-help * { box-sizing: border-box; }
.drv-install-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.drv-install-body strong { font-size: 0.9rem; color: #f1f5f9; }
.drv-install-body span { font-size: 0.78rem; color: #94a3b8; }
/* v1.5.1 — `width: auto` IS THE FIX, AND IT IS NOT REDUNDANT WITH flex.
The base .drv-btn in ordivity-drivers.css sets `width: 100%` because almost
everywhere else it is a full-width block. Here `flex: 0 0 auto` resolves its
basis FROM that width — so the button claimed the whole row and, with
flex-shrink at 0, refused to give any of it back. The text beside it was
squeezed to roughly one word per line and the dismiss × was pushed out of
the banner entirely.
Every other flex-row use of .drv-btn in this file sets `flex: 1 1 0`, whose
explicit zero basis overrides the width outright. This was the only rule
using an `auto` basis, which is why this was the only banner that broke. */
.drv-install .drv-btn {
flex: 0 0 auto;
width: auto;
min-height: 40px;
padding: 9px 16px;
}
.drv-install-x {
flex: 0 0 auto;
width: 30px; height: 30px;
background: none; border: none;
color: #64748b; font-size: 22px; line-height: 1;
cursor: pointer;
}
.drv-install-x:hover { color: #e2e8f0; }
/* On a narrow handset the three items do not fit on one line without the
message becoming unreadable. Let the row wrap: the text takes a full line of
its own and the actions sit beneath it, rather than the text being crushed
to fit beside them. 400px covers the 360px and 375px logical widths most
drivers are on. */
@media (max-width: 400px) {
.drv-install { flex-wrap: wrap; }
.drv-install-body { flex: 1 1 100%; }
.drv-install .drv-btn { flex: 1 1 auto; }
}
/* Guidance panel: iOS "Add to Home Screen", or the route-to-Chrome message
for a stub-APK browser. */
.drv-install-help {
position: fixed; inset: 0; z-index: 75;
display: flex; align-items: center; justify-content: center; padding: 20px;
background: rgba(2, 6, 23, 0.86);
}
.drv-install-help-box {
width: 100%; max-width: 340px;
background: #1e293b; border: 1px solid #334155; border-radius: 14px;
padding: 22px;
text-align: center;
}
.drv-install-help-box p { margin: 0 0 16px; font-size: 0.9rem; color: #cbd5e1; }
/* inline-block, because width and padding are no-ops on an inline . */
.drv-install-help-box .drv-btn { display: inline-block; width: 100%; text-align: center; text-decoration: none; margin-bottom: 8px; }
/* ---------------------------------------------------------------------------
* Pay tab (v0.10.3, Phase 6)
*
* Same dark palette and the same slate/amber scale as the rest of the app, so
* this reads as another tab rather than a bolted-on module. Money is the
* largest thing on each card because it is what the driver opened the tab for.
* ------------------------------------------------------------------------- */
.drv-app .drv-stmt { padding: 14px; }
.drv-app .drv-stmt-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 8px;
}
.drv-app .drv-stmt-week { font-size: 13px; color: #94a3b8; }
.drv-app .drv-stmt-badge {
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
background: #334155; color: #e2e8f0; white-space: nowrap;
}
.drv-app .drv-stmt-due { background: #3f3517; color: #fbbf24; }
.drv-app .drv-stmt-marked_paid { background: #14351f; color: #4ade80; }
.drv-app .drv-stmt-disputed { background: #3d1f1f; color: #f87171; }
.drv-app .drv-stmt-total {
font-size: 28px; font-weight: 700; color: #f1f5f9; margin-bottom: 10px;
}
.drv-app .drv-stmt-row {
display: flex; justify-content: space-between; gap: 12px;
font-size: 14px; color: #cbd5e1; padding: 4px 0;
}
.drv-app .drv-stmt-row strong { color: #f1f5f9; font-weight: 600; }
.drv-app .drv-stmt-lines {
margin-top: 10px; padding-top: 10px; border-top: 1px solid #334155;
}
.drv-app .drv-stmt .drv-btn { margin-top: 10px; width: 100%; }
.drv-app .drv-flag { padding: 10px 0; border-bottom: 1px solid #334155; }
.drv-app .drv-flag:last-child { border-bottom: 0; }
.drv-app .drv-flag-amt { font-size: 20px; font-weight: 700; color: #fbbf24; }
.drv-app .drv-flag .drv-btn { margin-top: 8px; width: 100%; }
/* The dispute sheet. position:fixed does not escape a display:none ancestor,
* so this lives at the tab's top level and is toggled with [hidden]. */
.drv-app .drv-modal {
position: fixed; inset: 0; z-index: 60;
background: rgba(2, 6, 23, .78);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.drv-app .drv-modal[hidden] { display: none; }
.drv-app .drv-modal-box {
width: 100%; max-width: 420px; padding: 18px;
background: #1e293b; border: 1px solid #334155; border-radius: 14px;
}
.drv-app .drv-modal-box h2 { margin: 0 0 8px; font-size: 17px; color: #f1f5f9; }
.drv-app .drv-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.drv-app .drv-modal-actions .drv-btn { flex: 1 1 0; }
/* =========================================================================
v1.1.0 — PHASE 7B. THE RATING BLOCK.
=========================================================================
The component itself is defined ONCE in the ordering plugin's
ordivity-storefront.css and read here through its four custom properties.
Only the theme values and the surrounding card chrome live in this file.
IF THE ORDERING PLUGIN IS DEACTIVATED the component stylesheet is absent
and this block degrades to unstyled text — readable, not broken. That is
the correct failure: the driver app's own screens do not depend on it, and
duplicating the component here to avoid it would guarantee the two copies
drift instead.
========================================================================= */
.drv-rate-block {
--ordv-rate-star-on: #f5a623;
--ordv-rate-star-off: #30363d;
--ordv-rate-fg: #e6edf3;
--ordv-rate-muted: #8b949e;
--ordv-rate-field-bg: #0d1117;
--ordv-rate-field-br: #30363d;
padding: 0;
margin-top: 4px;
}
/* Hub invitations (W-P-b) -------------------------------------------------------
A call-to-action card on Home, shown only when the driver has a pending hub
invitation. Reuses the shared .drv-card and .drv-btn components; adds only the
accent framing and the per-invite row layout. Accent is the platform green,
unchanged (#22c55e). */
.drv-app .drv-card.drv-hub-invites {
border-color: #22c55e;
}
.drv-app .drv-hub-invite {
border-top: 1px solid #334155;
padding-top: 12px;
margin-top: 12px;
}
.drv-app .drv-hub-invite:first-child {
border-top: 0;
padding-top: 0;
margin-top: 4px;
}
.drv-app .drv-hub-invite-name {
color: #f1f5f9;
font-weight: 600;
}
.drv-app .drv-hub-invite-meta {
color: #94a3b8;
font-size: 0.875rem;
margin-top: 2px;
}
.drv-app .drv-hub-invite-actions {
display: flex;
gap: 10px;
margin-top: 12px;
}
.drv-app .drv-hub-invite-actions .drv-btn {
flex: 1 1 0;
}
/* Base nudge (W-P-b residual) --------------------------------------------------
Same call-to-action accent as the hub-invitations card, for consistency. */
.drv-app .drv-card.drv-base-nudge {
border-color: #22c55e;
}