/* 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;
}

/* 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; }

.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; }

.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); }
.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;
}
.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-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: .9rem; text-decoration: none; }

/* 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); }