/* Rules both driver hosts need, served once from DriverApp.Shared
   (_content/DriverApp.Shared/css/driver-shared.css) so the Wasm and MAUI copies of
   style.css cannot drift on them. Linked after each host's css/style.css. */

/* Blazor's unhandled-exception banner. The MAUI style.css never had these rules
   (they lived only in an unlinked site.css), so the banner showed on every page. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* viewport-fit=cover lets the page run under the status bar / notch (installed PWA,
   MAUI edge-to-edge); only the bottom inset was handled. */
.layout-header,
.layout > .layout-header {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Touch targets: 44px, the size used for the trip and checklist actions. Replaces
   the inline style="min-height:44px" repeated across the components. */
.btn-touch,
.driver-language .btn {
    min-height: 44px;
}

/* Form fields on a touch screen: at least 44px tall (an unstyled input is about 38px). Sign-in uses
   floating labels that are already taller, and a textarea only grows. */
@media (pointer: coarse) {
    .form-control:not(.form-control-plaintext),
    .form-select {
        min-height: 44px;
    }
}

/* Sign-in: the button and Clear Cache were 37px and 23px tall. */
.login-card-modern .btn,
.login-card-modern .btn-link {
    min-height: 44px;
}

/* Switch rows (Show password, settings): the 16px switch sat apart from a centred
   label in a 21px row. Keep them together and tappable as one 44px row. */
.form-check.form-switch {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-height: 44px;
    padding-left: 0;
    text-align: left;
}

.form-check.form-switch .form-check-input {
    float: none;
    flex: 0 0 auto;
    height: 1.5em;
    margin: 0;
    width: 2.75em;
}

.form-check.form-switch .form-check-label {
    flex: 1 1 auto;
}

/* The highlighted next trip used Bootstrap blue while the app's primary is teal. */
.trip-card-modern.trip-card-next {
    box-shadow: 0 .25rem .75rem rgba(0, 169, 169, .18);
}

/* Full-height scroll roots measured in vh were cut off under mobile browser toolbars;
   dvh is the visible height, with vh kept as the fallback. */
.driver-scroll-root {
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - var(--header-height, 60px));
    max-height: calc(100dvh - var(--header-height, 60px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* The app root (#app.index-loader in both hosts' index.html) is a fixed full-screen box: content taller
   than the screen spilled out of it and could not be scrolled to (My Work's last tiles). It is the
   scroll container now, so the bottom bar's spacer at the end of the page gives every page room. */
#app.index-loader {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* The Me page scrolled inside its own full-height box (host style.css), so the bottom bar's spacer sat
   outside it and the last card (Account: Reset Password / Sign out) stayed under the bar. Let it scroll
   with the page like the other tabs. */
.layout .profile-page-wrapper {
    max-height: none;
    min-height: 0;
    overflow: visible;
}

/* Action rows that must wrap at 360px rather than squeeze or overflow. */
.driver-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.driver-action-row > .btn {
    flex: 1 1 10rem;
}

.mk-pointer {
    cursor: pointer;
}

/* Bottom navigation labels: #6c757d at 12px was borderline contrast on white. */
.driver-bottom-nav-item {
    color: #5c636a;
    font-size: .8125rem;
}

/* ############### Dark mode (driver-theme.js follows the phone setting) ###############
   The host style.css copies set these surfaces to literal light colours. */
:root {
    --driver-page-bg: #f0f2f5;
    --driver-surface: #fff;
    --driver-notice-bg: #fff3cd;
}

[data-bs-theme="dark"] {
    --driver-page-bg: #121418;
    --driver-surface: #1c1f24;
    --driver-notice-bg: #3a3014;
    color-scheme: dark;
}

[data-bs-theme="dark"] .driverapp-body,
[data-bs-theme="dark"] .index-loader {
    background-color: var(--driver-page-bg) !important;
}

[data-bs-theme="dark"] .login-page-wrapper,
[data-bs-theme="dark"] .trip-list-scroll,
[data-bs-theme="dark"] .profile-page-wrapper {
    background-color: var(--driver-page-bg);
}

[data-bs-theme="dark"] .profile-header,
[data-bs-theme="dark"] .driver-bottom-nav,
[data-bs-theme="dark"] .pdc-step-bar,
[data-bs-theme="dark"] .vms-container .vms-header .vms-header-container {
    background: var(--driver-surface);
}

[data-bs-theme="dark"] .driver-bottom-nav {
    border-top-color: rgba(255, 255, 255, .1);
}

[data-bs-theme="dark"] .driver-bottom-nav-item {
    color: #a7b0ba;
}

[data-bs-theme="dark"] .driver-offline-bar {
    background: var(--driver-notice-bg);
    color: #f5d77a;
}

[data-bs-theme="dark"] #blazor-error-ui {
    background: #3a3014;
    color: #f5d77a;
}

/* Up to five bottom-nav items (Trips, Change Bus, Payslips, HR, Profile) at 360px:
   a long label shortens instead of pushing the bar wider. */
.driver-bottom-nav-item {
    min-width: 0;
    padding: 0 2px;
}

.driver-bottom-nav-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ############### Redesign: cards, status tones, skeletons, empty states ###############
   Status colours are tokens: waiting (neutral), running (info), done (good), late (warn), failed (bad).
   Each has a text colour and a soft background; dark mode swaps both. */
:root {
    --driver-tone-neutral: #4b5563;
    --driver-tone-neutral-bg: #eceff3;
    --driver-tone-info: #006d6d;
    --driver-tone-info-bg: #d9f2f2;
    --driver-tone-good: #1b6e3a;
    --driver-tone-good-bg: #dcf3e3;
    --driver-tone-warn: #8a5300;
    --driver-tone-warn-bg: #fdecc8;
    --driver-tone-bad: #a12323;
    --driver-tone-bad-bg: #fbdcdc;
    --driver-tone-none: #5c636a;
    --driver-tone-none-bg: #eceff3;
    --driver-muted: #5c636a;
    --driver-border: rgba(0, 0, 0, .08);
    --driver-skeleton-a: #e6e9ee;
    --driver-skeleton-b: #f3f5f8;
}

[data-bs-theme="dark"] {
    --driver-tone-neutral: #c3cad3;
    --driver-tone-neutral-bg: #2a2f36;
    --driver-tone-info: #5fd6d6;
    --driver-tone-info-bg: #123a3a;
    --driver-tone-good: #6fd58f;
    --driver-tone-good-bg: #12351f;
    --driver-tone-warn: #f1c46a;
    --driver-tone-warn-bg: #3a2c0e;
    --driver-tone-bad: #f19a9a;
    --driver-tone-bad-bg: #3d1717;
    --driver-tone-none: #a7b0ba;
    --driver-tone-none-bg: #2a2f36;
    --driver-muted: #a7b0ba;
    --driver-border: rgba(255, 255, 255, .1);
    --driver-skeleton-a: #262b32;
    --driver-skeleton-b: #323841;
}

.driver-page {
    margin: 0 auto;
    max-width: 40rem;
    padding: 1rem;
}

.driver-page-header { margin-bottom: 1rem; }
.driver-page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }
.driver-page-sub { color: var(--driver-muted); margin: .25rem 0 0; }
.driver-muted { color: var(--driver-muted); }
.driver-section-title { color: var(--driver-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; margin: 1rem .25rem .5rem; text-transform: uppercase; }

/* Accessibility audit 2026-10-18: Bootstrap blue and the brand teal are 4.0:1 / 2.6:1 on the page grey. */
:root:not([data-bs-theme="dark"]) .btn-outline-primary {
    --bs-btn-color: #0a58ca;
    --bs-btn-border-color: #0a58ca;
}
:root:not([data-bs-theme="dark"]) .driver-back,
:root:not([data-bs-theme="dark"]) .breadcrumb a {
    color: #0a58ca;
}
:root:not([data-bs-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #5c636a;
    --bs-btn-border-color: #5c636a;
}
:root:not([data-bs-theme="dark"]) .btn-outline-danger {
    --bs-btn-color: #b02a37;
    --bs-btn-border-color: #b02a37;
}
:root:not([data-bs-theme="dark"]) .btn-link {
    --bs-btn-color: #0a58ca;
    color: #0a58ca;
}
.badge.text-bg-secondary {
    background-color: #5c636a !important;
    color: #fff !important;
}
.btn-primary {
    /* white on the brand teal #00a9a9 is 2.9:1; this teal is 4.8:1 */
    --bs-btn-bg: #008080;
    --bs-btn-border-color: #008080;
    --bs-btn-hover-bg: #006d6d;
    --bs-btn-hover-border-color: #006d6d;
    --bs-btn-active-bg: #006d6d;
    --bs-btn-active-border-color: #006d6d;
    --bs-btn-disabled-bg: #008080;
    --bs-btn-disabled-border-color: #008080;
}
/* Dark theme: the same buttons, lifted to the light tints Bootstrap uses for dark mode. */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-link {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    color: #6ea8fe;
}
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ea868f;
    --bs-btn-border-color: #ea868f;
}
[data-bs-theme="dark"] .text-danger {
    color: #ea868f !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #adb5bd;
    --bs-btn-border-color: #adb5bd;
}
.driver-back {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
    min-height: 44px;
    text-decoration: none;
}

.driver-card {
    background: var(--driver-surface);
    border: 1px solid var(--driver-border);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    margin-bottom: .875rem;
    padding: 1rem;
}

/* sign-in: the same card, centred, without the list-spacing margin */
.driver-card.login-card-modern { margin-bottom: 0; padding: 1.5rem; }
/* the Stack item shrinks to its content, so the card was squeezed to ~270px on wide screens:
   let it fill the phone width and stop at a comfortable size on tablets and desktops */
.login-page-wrapper .bb-stack-item { width: 100%; max-width: 440px; }
.login-page-wrapper .login-card-modern { width: 100%; max-width: none; }
@media (max-width: 400px) {
    .login-page-wrapper { padding: .75rem; }
    .driver-card.login-card-modern { padding: 1.125rem; }
}

.driver-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 .5rem; }
.driver-note { color: var(--driver-muted); font-size: .875rem; margin: .25rem .25rem 1rem; }

/* trip cards: a left status stripe, the current trip larger */
.driver-trip-card { border-left: 5px solid var(--driver-tone-neutral); }
.driver-trip-card.tone-info { border-left-color: var(--driver-tone-info); }
.driver-trip-card.tone-good { border-left-color: var(--driver-tone-good); }
.driver-trip-card.tone-warn { border-left-color: var(--driver-tone-warn); }
.driver-trip-card.tone-bad { border-left-color: var(--driver-tone-bad); }
.driver-trip-title { font-size: 1.125rem; font-weight: 700; }
.driver-trip-prominent { padding: 1.25rem; }
.driver-trip-prominent .driver-trip-title { font-size: 1.375rem; }

/* status pills */
.driver-pill {
    align-items: center;
    background: var(--driver-tone-neutral-bg);
    border-radius: 999px;
    color: var(--driver-tone-neutral);
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    padding: .25rem .65rem;
}
.driver-pill.tone-info { background: var(--driver-tone-info-bg); color: var(--driver-tone-info); }
.driver-pill.tone-good { background: var(--driver-tone-good-bg); color: var(--driver-tone-good); }
.driver-pill.tone-warn { background: var(--driver-tone-warn-bg); color: var(--driver-tone-warn); }
.driver-pill.tone-bad { background: var(--driver-tone-bad-bg); color: var(--driver-tone-bad); }
.driver-pill.tone-none { background: var(--driver-tone-none-bg); color: var(--driver-tone-none); }
/* seat map on the boarding screen: booked seats are buttons (boarded or not), empty seats are plain */
.driver-seat-map { display: flex; flex-direction: column; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; }
.driver-seat-row { display: flex; gap: .35rem; }
.driver-seat, .driver-seat-gap { flex: none; height: 2.75rem; width: 2.75rem; }
.driver-seat {
    align-items: center;
    background: transparent;
    border: 1px dashed var(--driver-border);
    border-radius: .5rem;
    color: var(--driver-muted);
    display: inline-flex;
    font-size: .8125rem;
    font-weight: 600;
    justify-content: center;
    padding: 0;
}
button.driver-seat { border-style: solid; cursor: pointer; }
.driver-seat.tone-info { background: var(--driver-tone-info-bg); border-color: var(--driver-tone-info); color: var(--driver-tone-info); }
.driver-seat.tone-good { background: var(--driver-tone-good-bg); border-color: var(--driver-tone-good); color: var(--driver-tone-good); }
.tone-text-good { color: var(--driver-tone-good); }
.tone-text-warn { color: var(--driver-tone-warn); }
.tone-text-bad { color: var(--driver-tone-bad); }
.tone-text-none { color: var(--driver-tone-none); }

/* My Work tiles */
.driver-tile-grid { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.driver-tile {
    align-items: center;
    background: var(--driver-surface);
    border: 1px solid var(--driver-border);
    border-radius: 1rem;
    color: inherit;
    display: flex;
    gap: .875rem;
    min-height: 44px;
    padding: .875rem 1rem;
    text-decoration: none;
}
.driver-tile:active { transform: scale(.99); }
.driver-tile-icon {
    align-items: center;
    background: var(--driver-tone-info-bg);
    border-radius: .75rem;
    color: var(--driver-tone-info);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.125rem;
    height: 2.75rem;
    justify-content: center;
    width: 2.75rem;
}
.driver-tile-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.driver-tile-title { font-weight: 700; }
.driver-tile-desc { color: var(--driver-muted); font-size: .8125rem; }
.driver-tile-chevron { color: var(--driver-muted); }

/* lists and stats */
.driver-list { list-style: none; margin: 0; padding: 0; }
.driver-list.driver-card { padding: .25rem 1rem; }
.driver-list-row {
    align-items: center;
    border-bottom: 1px solid var(--driver-border);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    min-height: 44px;
    padding: .5rem 0;
}
/* My documents: the name gets its own full line (a long name no longer wraps into a narrow column beside the badge and button); the badge and the action sit under it. */
.driver-doc-row { flex-wrap: wrap; }
.driver-doc-row > span:first-child { flex: 1 1 100%; overflow-wrap: anywhere; }
.driver-doc-row > :last-child { margin-inline-start: auto; }

.driver-list-row:last-child { border-bottom: 0; }
.driver-list-row-stack { align-items: stretch; flex-direction: column; gap: .15rem; }
.driver-stat-row { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); margin: 1rem 0 0; }
.driver-stat-row dt { color: var(--driver-muted); font-size: .75rem; font-weight: 600; }
.driver-stat-row dd { font-size: 1.125rem; font-weight: 700; margin: 0; }
.driver-score-hero.tone-good { border-top: 5px solid var(--driver-tone-good); }
.driver-score-hero.tone-warn { border-top: 5px solid var(--driver-tone-warn); }
.driver-score-hero.tone-bad { border-top: 5px solid var(--driver-tone-bad); }
.driver-score-number { font-size: 3rem; font-weight: 800; line-height: 1.1; }
.driver-score-number small { color: var(--driver-muted); font-size: 1rem; font-weight: 600; }
.driver-score-none { color: var(--driver-muted); font-size: 1.125rem; }
.driver-leave-balance { font-size: 1.75rem; font-weight: 800; }
.driver-meter { background: var(--driver-tone-neutral-bg); border-radius: 999px; height: .5rem; margin: .75rem 0 .35rem; overflow: hidden; }
.driver-meter-fill { background: var(--driver-tone-good); border-radius: 999px; display: block; height: 100%; }
.driver-meter-fill.tone-warn { background: var(--driver-tone-warn); }
.driver-meter-fill.tone-bad { background: var(--driver-tone-bad); }
.driver-meter-fill.tone-none { background: var(--driver-tone-none); }

/* timeline (bus change detail) */
.driver-timeline { border-left: 2px solid var(--driver-border); list-style: none; margin: 0 0 0 .5rem; padding: 0 0 0 1rem; }
.driver-timeline-item { margin-bottom: .75rem; position: relative; }
.driver-timeline-item::before {
    background: var(--driver-tone-info);
    border-radius: 50%;
    content: "";
    height: .6rem;
    left: -1.35rem;
    position: absolute;
    top: .4rem;
    width: .6rem;
}

/* empty states */
.driver-empty { align-items: center; display: flex; flex-direction: column; gap: .5rem; padding: 2.5rem 1rem; text-align: center; }
.driver-empty-icon { color: var(--driver-muted); font-size: 2.5rem; }
.driver-empty-title { font-size: 1.125rem; font-weight: 700; margin: 0; }
.driver-empty-text { color: var(--driver-muted); margin: 0; }

/* loading skeletons */
.driver-skeleton-block { display: flex; flex-direction: column; gap: .75rem; }
.driver-skeleton {
    animation: driver-skeleton-pulse 1.4s ease-in-out infinite;
    background: linear-gradient(90deg, var(--driver-skeleton-a), var(--driver-skeleton-b), var(--driver-skeleton-a));
    background-size: 200% 100%;
    border-radius: 1rem;
}
.driver-skeleton-hero { height: 11rem; }
.driver-skeleton-card { height: 6.5rem; }
.driver-skeleton-line { border-radius: .5rem; height: 1rem; }
.driver-skeleton-line.short { width: 60%; }
@keyframes driver-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .driver-skeleton { animation: none; }
}

/* header: full-width gradient bar; brand + driver name, language pill, avatar to the Me page */
.layout .layout-header {
    background: linear-gradient(135deg, #006d6d, #008080); /* white text needs 4.5:1; the brand teal #00a9a9 gives 2.9:1 */
    border-bottom: 0;
    border-radius: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    gap: .5rem;
    height: auto;
    min-height: calc(3.75rem + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) .875rem 0;
}
.driver-header-inner { align-items: center; display: flex; flex: 1 1 auto; gap: .5rem; min-width: 0; }
.driver-header-brand { align-items: center; display: inline-flex; gap: .625rem; min-width: 0; }
.driver-header-logo {
    align-items: center;
    background: rgba(255, 255, 255, .2);
    border-radius: .75rem;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.125rem;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}
.driver-header-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.layout .layout-header .driver-header-title { color: #fff; font-size: 1.125rem; font-weight: 700; letter-spacing: .01em; margin: 0; }
.driver-header-name { color: #fff; font-size: .8125rem; font-weight: 500; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.layout-header .driver-language { background: rgba(0, 0, 0, .18); border-radius: 999px; margin: 0; padding: 3px; }
.layout-header .driver-language .btn { border: 0; border-radius: 999px !important; color: #fff; font-size: .8125rem; font-weight: 700; min-width: 44px; }
.layout-header .driver-language .btn-light { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); color: #006d6d; }
.layout-header .driver-language .btn-outline-light { background: transparent; }

.driver-header-user { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.driver-header-avatar { background: #fff; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; height: 2.375rem; object-fit: cover; width: 2.375rem; }

[data-bs-theme="dark"] .layout .layout-header { background: linear-gradient(135deg, #0b6f6f, #0a7f7f); }

/* web update banner: sits above the page and never blocks it */
.driver-update-banner { align-items: center; border-radius: .75rem; display: flex; gap: .5rem; margin: .5rem; padding: .5rem .75rem; }
.driver-update-banner.tone-info { background: var(--driver-tone-info-bg); color: var(--driver-tone-info); }
.driver-update-banner.tone-warn { background: var(--driver-tone-warn-bg); color: var(--driver-tone-warn); }

[data-bs-theme="dark"] .driver-page { background-color: var(--driver-page-bg); }

/* step progress (handover, checklist) */
.driver-steps { display: flex; gap: .375rem; list-style: none; margin: 0 0 .75rem; padding: 0; }
.driver-step { background: var(--driver-tone-neutral-bg); border-radius: 999px; color: var(--driver-muted); flex: 1 1 0; font-size: .75rem; font-weight: 600; padding: .3rem .5rem; text-align: center; }
.driver-step.is-done { background: var(--driver-tone-good-bg); color: var(--driver-tone-good); }
.driver-step.is-current { background: var(--driver-tone-info-bg); color: var(--driver-tone-info); box-shadow: inset 0 0 0 2px var(--driver-tone-info); }
.driver-steps-compact { gap: .25rem; }
.driver-steps-compact .driver-step { border-radius: 999px; height: .375rem; padding: 0; }
.driver-card .driver-card { background: var(--driver-page-bg); box-shadow: none; }
.driver-profile-summary { align-items: center; display: flex; gap: 1rem; }
.driver-profile-summary .profile-pic { flex: 0 0 auto; }
.driver-bus-no { align-items: center; background: var(--driver-tone-info-bg); border-radius: .625rem; color: var(--driver-tone-info); display: inline-flex; font-size: 1.125rem; font-weight: 800; padding: .25rem .625rem; }
.driver-countdown { color: var(--driver-tone-info); font-size: 1.0625rem; font-weight: 700; margin: 0 0 .75rem; }
.driver-primary-action { font-size: 1.125rem !important; font-weight: 700; min-height: 56px; }
/* pull-to-refresh */
.driver-ptr { position: relative; }
.driver-ptr-indicator { align-items: center; color: var(--driver-muted); display: flex; font-size: .8125rem; font-weight: 600; gap: .5rem; height: 0; justify-content: center; overflow: hidden; transition: height .15s ease; }
.driver-ptr-indicator[data-state="pull"], .driver-ptr-indicator[data-state="ready"], .driver-ptr-indicator[data-state="loading"] { height: var(--ptr-pull, 0); }
.driver-ptr-indicator .ptr-ready, .driver-ptr-indicator .ptr-busy { display: none; }
.driver-ptr-indicator[data-state="ready"] .ptr-ready, .driver-ptr-indicator[data-state="loading"] .ptr-busy { display: inline; }
.driver-ptr-indicator[data-state="ready"] .ptr-arrow { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .driver-ptr-indicator { display: none; } }

/* Change Bus alerts: the in-app toast and the count on the bottom-nav tab */
.driver-toast {
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    z-index: 1080;
    margin: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.driver-bottom-nav-item {
    position: relative;
}

.driver-nav-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: .6rem;
    background: #dc3545;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

/* trip card: route line and details link */
.driver-trip-details-link { font-size: 1rem; min-height: 44px; padding: .6rem .25rem; text-decoration: none; }

/* the trip list scroller is sized in vh by the host pages; dvh is the visible height under the browser toolbar */
.trip-list-scroll { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }

/* Zoom and focus: the heading that takes focus after navigation needs no ring; the nav label wraps
   to two lines (instead of one clipped line) when text is enlarged. */
h1:focus { outline: none; }
.driver-bottom-nav-spacer { height: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
.driver-bottom-nav-item > span { line-height: 1.1; overflow-wrap: anywhere; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.driver-bottom-nav-item.active { color: var(--driver-tone-info); }

/* Driver alerts: late to pickup (a banner at the top of the page) and over-speed (a full-screen warning) */
.driver-late-alert { margin: .5rem .5rem 0; }

.driver-speed-alert {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem;
    text-align: center;
    background: #b00020;
    color: #fff;
    animation: driver-speed-alert-flash 1s steps(2, jump-none) infinite;
}

.driver-speed-alert-icon { font-size: 4rem; }
.driver-speed-alert-title { font-size: 2.5rem; font-weight: 800; margin: 0; }
.driver-speed-alert-text { font-size: 1.25rem; margin: 0; }
.driver-speed-alert-speed { font-size: 5rem; font-weight: 800; line-height: 1; }
.driver-speed-alert-speed small { font-size: 1.5rem; font-weight: 600; }
.driver-speed-alert-limit { font-size: 1.25rem; margin: 0 0 1rem; }

@keyframes driver-speed-alert-flash {
    0% { background: #b00020; }
    100% { background: #7a0016; }
}

@media (prefers-reduced-motion: reduce) {
    .driver-speed-alert { animation: none; }
}

/* ===== Responsive: small phones -> tablets -> laptops =====
   Content stays one readable column; wider screens get a wider column, and the bottom
   navigation keeps its buttons within that column instead of spreading edge to edge. */
@media (max-width: 360px) {
    .driver-page { padding: .75rem .625rem; }
    .driver-page-title { font-size: 1.25rem; }
    .driver-card { padding: .875rem; }
    .driver-header-name { max-width: 6rem; }
    /* 320px: logo, title, BM|EN and the profile icon do not fit side by side with the default spacing (the title ran under BM) */
    .layout-header { gap: .25rem; padding-left: .5rem; padding-right: .5rem; }
    .layout-header .driver-header-brand { margin-left: 0 !important; gap: .4rem; }
    .driver-header-logo { height: 2rem; width: 2rem; font-size: 1rem; border-radius: .5rem; }
    .layout .layout-header .driver-header-title { font-size: 1rem; }
}
@media (min-width: 768px) {
    .driver-page { max-width: 46rem; padding: 1.5rem; }
    .driver-bottom-nav { padding-left: max(0px, calc((100vw - 46rem) / 2)); padding-right: max(0px, calc((100vw - 46rem) / 2)); }
    .driver-header-name { max-width: 16rem; }
}
@media (min-width: 1200px) {
    .driver-page { max-width: 52rem; }
    .driver-bottom-nav { padding-left: max(0px, calc((100vw - 52rem) / 2)); padding-right: max(0px, calc((100vw - 52rem) / 2)); }
}
/* short landscape phones: the login card should scroll, not be cut off */
@media (max-height: 520px) and (orientation: landscape) {
    .login-page-wrapper { align-items: flex-start; min-height: 100dvh; }
}
img, video, canvas { max-width: 100%; }

/* "Having trouble? Clear cache": a small recovery link under the footer, not a main action.
   The link keeps a 44px-tall tap target although its text is small. */
.login-utility { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; color: var(--driver-muted); font-size: .8125rem; }
.login-card-modern .login-utility-link { min-height: 44px; padding: 0 .25rem; font-size: .8125rem; color: var(--driver-muted); text-decoration: underline; }

/* UX pass 2026-10-18: 44px tap targets for the modal close button and the show-password switch;
   Pass/Fail stack on very narrow phones (320px) so neither is clipped. */
.modal-header .btn-close { min-width: 44px; min-height: 44px; background-origin: content-box; padding: 14px; box-sizing: border-box; }
.form-switch:has(#chkShowPasswords) { min-height: 44px; display: flex; align-items: center; }
.form-switch:has(#chkShowPasswords) .form-check-label { min-height: 44px; display: inline-flex; align-items: center; padding-left: .25rem; }
/* checklist item on a phone: name on top, Pass / Fail below as two equal halves, the same on every item */
@media (max-width: 767.98px) {
    .card-body > .d-flex:has(.checklist-status) { flex-direction: column; align-items: stretch !important; gap: .75rem; }
    .card-body > .d-flex:has(.checklist-status) > .d-flex:has(.checklist-status) { width: 100%; }
    .checklist-status { display: flex; width: 100%; }
    .checklist-status > .btn { flex: 1 1 0; }
}
@media (max-width: 359.98px) {
    .checklist-status { display: flex; flex-direction: column; width: 100%; }
    .checklist-status > .btn { width: 100%; border-radius: .375rem !important; margin-left: 0 !important; }
    .checklist-status > .btn + .btn { margin-top: .5rem; }
}

/* step-by-step walkthrough (driver-help-walk.js): a ring round the button a step names and a card at the bottom or top of the screen */
.driver-walk-ring {
    position: fixed;
    /* above the app root and the install bar (z-index 999999) */
    z-index: 1000000;
    border: 3px solid var(--driver-tone-info);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: top .2s, left .2s, width .2s, height .2s;
}

.driver-walk-ring-none {
    display: none;
}

.driver-walk-pop {
    position: fixed;
    z-index: 1000001;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 14px;
    background: var(--driver-surface);
    color: inherit;
    border: 1px solid var(--driver-border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.driver-walk-pop.driver-walk-top {
    bottom: auto;
    top: calc(var(--header-height, 56px) + 12px);
}

.driver-walk-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.driver-walk-title {
    flex: 1;
    font-weight: 600;
}

.driver-walk-close {
    min-width: 44px;
    min-height: 44px;
    margin: -10px -10px 0 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
}

.driver-walk-number,
.driver-walk-hint {
    color: var(--driver-muted);
    font-size: .875rem;
}

.driver-walk-text {
    margin: 4px 0;
}

.driver-walk-hint:empty {
    display: none;
}

.driver-walk-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}