html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 0;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ════════════════════════════════════════════════════════════════
   ADMIN PAGES (full-width)
   Same visual language as the driver-app (navy header, soft white
   cards, blue accents) but without the 480px mobile cap. Use on
   any admin / maintenance screen.
   ════════════════════════════════════════════════════════════════ */
.admin-page { padding: 0 0 2rem; }

.admin-header { background: #1a2744; color: #fff; padding: 1rem 1.5rem; border-radius: 12px 12px 0 0; }
.admin-header h1 { font-size: 19px; font-weight: 500; margin: 0; color: #fff; }
.admin-header p { font-size: 12px; color: rgba(255,255,255,.6); margin: 4px 0 0; }

.admin-card { background: #fff; border: 0.5px solid #ddd; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.admin-card-flush-top { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-bottom: 1.25rem; }

.admin-section-hdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.admin-section-title { font-size: 15px; font-weight: 500; margin: 0; }

/* edit-mode banner */
.admin-edit-banner { background: #E6F1FB; border: 0.5px solid #85B7EB; border-radius: 8px; padding: 10px 14px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.admin-edit-banner-text { font-size: 13px; color: #0C447C; }
.admin-edit-banner-text strong { font-weight: 600; }

/* table */
.admin-table { font-size: 13px; margin-bottom: 0; }
.admin-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #888; font-weight: 600; border-bottom: 0.5px solid #ddd; padding: 8px 12px; background: #faf9f5; }
.admin-table tbody td { padding: 10px 12px; border-bottom: 0.5px solid #eee; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr.editing { background: #E6F1FB; }
.admin-table tbody tr.editing td { color: #0C447C; }

/* buttons */
.admin-btn { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; border: 0.5px solid transparent; }
.admin-btn-primary { background: #1a2744; color: #fff; border-color: #1a2744; }
.admin-btn-primary:hover { opacity: .88; }
.admin-btn-primary:disabled { opacity: .5; cursor: default; }
.admin-btn-ghost { background: #fff; color: #333; border-color: #ccc; }
.admin-btn-ghost:hover { background: #f4f3ee; }
.admin-btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }

/* form fields */
.admin-form .form-select, .admin-form .form-control { height: 40px; border: 0.5px solid #ccc; border-radius: 8px; font-size: 14px; }
.admin-form .form-select:focus, .admin-form .form-control:focus { border-color: #378ADD; box-shadow: 0 0 0 2px rgba(55,138,221,.15); }
.admin-form .form-label { font-size: 11px; font-weight: 500; color: #666; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.admin-form .req { color: #e24b4a; }

.admin-empty { text-align: center; padding: 2rem 1rem; color: #aaa; font-size: 13px; font-style: italic; }

/* status pills (same palette as the driver-app pills) */
.admin-pill { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 10px; border-radius: 20px; }
.admin-pill-active { background: #EAF3DE; color: #27500A; }
.admin-pill-inactive { background: #f1f1f1; color: #888; }

/* ════════════════════════════════════════════════════════════════
   DRIVER APP  (My Empties / My Loads mobile views)
   Ported from the driver_app design. Scoped under .driver-app so the
   generic class names (.header, .badge, .pill, .page…) never collide
   with Bootstrap. Reuse the wrapper on any driver-facing page.
   ════════════════════════════════════════════════════════════════ */
/* Fluid up to the original 470px, never wider. Centred on large screens; the
   width does not change as the user navigates between pages.
   This was `width: 470px; min-width: 470px; max-width: 470px`. The min-width is
   what broke mobile: on a 430px phone the card could not shrink, so the nav tabs
   and the progress tiles were simply cut off past the right edge with no way to
   scroll to them. max-width alone keeps the desktop look identical — the card
   still sits at 470px and centres — while letting narrow screens size down. */
.driver-app { width: 100%; max-width: 470px; margin: 0 auto; padding: 1rem 0 3rem; }
.driver-app * { box-sizing: border-box; }

/* NAV */
.driver-app .nav-tabs-da { display: flex; background: #1a2744; border-radius: 12px 12px 0 0; }
.driver-app .nav-btn { flex: 1; padding: 11px 4px; font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,0.45); background: transparent; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 2px solid transparent; transition: all .15s; line-height: 1.2; text-decoration: none; }
.driver-app .nav-btn.active { color: #fff; border-bottom-color: #378ADD; }
.driver-app .nav-btn:hover:not(.active) { color: rgba(255,255,255,0.8); }

/* Back bar — forms the top edge of the driver-app card, visually fused
   with the nav tabs below it (same navy, shared rounded corners). */
.da-back-wrap { width: 100%; max-width: 470px; margin: 0 auto; padding: 0; background: #1a2744; border-radius: 0 0 0 0; border-bottom: 0.5px solid rgba(255,255,255,.14); }
.da-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px 10px; background: transparent; color: rgba(255,255,255,.8); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .15s; }
.da-back-btn:hover { color: #fff; }
/* Attach the card directly beneath the back bar: no gap, square shoulders */
.da-back-wrap + .driver-app { padding-top: 0; }
.da-back-wrap + .driver-app .nav-tabs-da { border-radius: 0; }

/* HEADER */
.driver-app .header { background: #1a2744; padding: .75rem 1.25rem 1rem; }
.driver-app .header h1 { font-size: 17px; font-weight: 500; color: #fff; }
.driver-app .header p { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }

/* LIST PAGE WRAPPER */
.driver-app .list-page { background: #fff; border: 0.5px solid #ddd; border-top: none; border-radius: 0 0 12px 12px; padding: 1rem; }
.driver-app .list-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.driver-app .list-title { font-size: 15px; font-weight: 500; }
.driver-app .badge-da { font-size: 11px; color: #666; background: #f4f3ee; padding: 3px 8px; border-radius: 20px; border: 0.5px solid #ddd; }

/* BOOKING CARD */
.driver-app .bcard { border: 0.5px solid #ddd; border-radius: 10px; margin-bottom: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s; }
.driver-app .bcard:hover { border-color: #999; }
.driver-app .bcard.static { cursor: default; }
.driver-app .bcard.static:hover { border-color: #ddd; }
.driver-app .bcard-hdr { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 0.5px solid #eee; }
.driver-app .bref { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.driver-app .pill { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; }
.driver-app .pill-pending { background: #FAEEDA; color: #633806; }
.driver-app .pill-prog { background: #E6F1FB; color: #0C447C; }
.driver-app .pill-done { background: #EAF3DE; color: #27500A; }

/* PROGRESS */
.driver-app .prog-sec { padding: 10px 12px; border-bottom: 0.5px solid #eee; }
.driver-app .prog-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px; margin-bottom: 5px; }
.driver-app .pstat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 10.5px; color: #666; min-width: 0; }
.driver-app .pstat .ptop { display: flex; align-items: center; gap: 5px; }
.driver-app .pstat .plabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 10px; }
.driver-app .pdot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.driver-app .pdot-blue { background: #378ADD; }
.driver-app .pdot-green { background: #639922; }
.driver-app .pdot-orange { background: #E08A1E; }
.driver-app .pcount { font-weight: 600; color: #111; margin-right: 2px; }
.driver-app .ptotal { font-size: 11px; color: #999; text-align: right; margin-top: 6px; }

/* CONTAINERS-IN-PROCESS — Empties/Returns stage tracks (ported from the desktop pipeline view) */
.driver-app .es-summary { border: 0.5px solid #e2e0d8; border-radius: 10px; background: #fff; padding: 10px 12px; margin-top: 12px; }
.driver-app .es-summary-hdr { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: 8px; }
.driver-app .es-flow { display: flex; flex-direction: column; gap: 8px; }
.driver-app .es-track { display: flex; align-items: stretch; gap: 8px; }
.driver-app .es-track-title { width: 46px; flex-shrink: 0; display: flex; align-items: center; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #888; }
.driver-app .es-cells { display: flex; align-items: stretch; gap: 6px; flex: 1; min-width: 0; }
.driver-app .es-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: #faf9f6; border: 0.5px solid #e2e0d8; border-left-width: 3px; border-radius: 5px; padding: 5px 8px; }
.driver-app .es-cnt { font-size: 16px; font-weight: 700; color: #1a2744; line-height: 1.15; }
.driver-app .es-lbl { font-size: 9px; color: #999; text-transform: uppercase; letter-spacing: .03em; line-height: 1.25; }
.driver-app .es-cell-empty { opacity: .5; }
.driver-app .es-cell-empty .es-cnt { color: #bbb; font-weight: 600; }
.driver-app .es-sc-gray { border-left-color: #9aa0a6; }
.driver-app .es-sc-blue { border-left-color: #378ADD; }
.driver-app .es-sc-amber { border-left-color: #E08A1E; }
.driver-app .es-sc-teal { border-left-color: #2A9D8F; }
.driver-app .es-sc-violet { border-left-color: #8B80E0; }
.driver-app .es-sc-indigo { border-left-color: #5A4FCF; }
.driver-app .es-sc-green { border-left-color: #639922; }

/* ADMIN — "Today" toggle switch */
.driver-app .tgl { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.driver-app .tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.driver-app .tgl-track { position: relative; width: 34px; height: 18px; border-radius: 999px; background: #ccc; transition: background .15s; flex-shrink: 0; }
.driver-app .tgl-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.driver-app .tgl input:checked + .tgl-track { background: #378ADD; }
.driver-app .tgl input:checked + .tgl-track .tgl-thumb { transform: translateX(16px); }
.driver-app .tgl input:focus-visible + .tgl-track { box-shadow: 0 0 0 2px rgba(55,138,221,.35); }
.driver-app .tgl-lbl { font-size: 12px; font-weight: 500; color: #555; }

/* CARD ROWS */
.driver-app .rr { padding: 8px 12px; border-bottom: 0.5px solid #eee; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; }
.driver-app .rr i { color: #aaa; font-size: 13px; }
.driver-app .rlabel { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: #aaa; margin-right: 4px; }
.driver-app .lgrid { padding: 10px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0.5px solid #eee; }
.driver-app .li { display: flex; flex-direction: column; gap: 3px; }
.driver-app .lk { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: #aaa; display: flex; align-items: center; gap: 3px; }
.driver-app .lv { font-size: 12px; color: #555; line-height: 1.35; }
.driver-app .bcard-foot { padding: 7px 12px; background: #f9f9f7; }
.driver-app .fhint { font-size: 11px; color: #aaa; display: flex; align-items: center; gap: 4px; }

/* Active-container location-check prompt (container number blur) */
.driver-app .wbanner { background: #FAEEDA; border: 0.5px solid #F0C078; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.driver-app .wb-txt { font-size: 12px; color: #633806; display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.driver-app .wb-txt strong { font-weight: 600; }
.driver-app .wb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.driver-app .wb-btn { height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: inherit; cursor: pointer; background: #fff; color: #633806; border: 0.5px solid #F0C078; transition: background .15s; }
.driver-app .wb-btn:hover { background: #fdf6ea; }
.driver-app .wb-btn-primary { background: #E08A1E; border-color: #E08A1E; color: #fff; }
.driver-app .wb-btn-primary:hover { background: #c97a15; }

/* EMPTY STATE */
.driver-app .no-res { text-align: center; padding: 2rem 1rem; color: #aaa; font-size: 13px; }
.driver-app .no-res i { display: block; margin-bottom: 8px; opacity: .35; }

/* ── DETAIL / JOB FORM ────────────────────────────────────────── */

/* back-arrow header */
.driver-app .header-back { display: flex; align-items: center; gap: 10px; }
.driver-app .hback-btn { width: 30px; height: 30px; border-radius: 7px; border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; font-family: inherit; }
.driver-app .hback-btn:hover { background: rgba(255,255,255,0.22); }

/* type selector */
.driver-app .tsel { background: #fff; border: 0.5px solid #ddd; border-top: none; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.driver-app .tc { border-radius: 8px; padding: 10px; cursor: pointer; border: 1.5px solid #ddd; background: #f4f3ee; transition: background .15s, border-color .15s; display: flex; flex-direction: column; gap: 5px; }
.driver-app .tc:hover { background: #ebebeb; }
.driver-app .tc-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #ddd; color: #999; }
.driver-app .tc-label { font-size: 12px; font-weight: 500; color: #666; line-height: 1.25; }
.driver-app .tc-sub { font-size: 11px; color: #aaa; }
.driver-app .tc.ab { background: #E6F1FB; border-color: #378ADD; }
.driver-app .tc.ab .tc-label { color: #0C447C; } .driver-app .tc.ab .tc-sub { color: #185FA5; } .driver-app .tc.ab .tc-icon { background: rgba(55,138,221,.2); color: #185FA5; }
.driver-app .tc.ag { background: #EAF3DE; border-color: #639922; }
.driver-app .tc.ag .tc-label { color: #27500A; } .driver-app .tc.ag .tc-sub { color: #3B6D11; } .driver-app .tc.ag .tc-icon { background: rgba(99,153,34,.2); color: #3B6D11; }

/* form body */
.driver-app .fbody { background: #fff; border: 0.5px solid #ddd; border-top: none; border-radius: 0 0 12px 12px; padding: 1.25rem; }
.driver-app .fg { margin-bottom: 1rem; }
.driver-app .fl { font-size: 12px; font-weight: 500; color: #666; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: .04em; }
.driver-app .req { color: #e24b4a; }
.driver-app input[type=text], .driver-app input[type=number] { width: 100%; height: 40px; padding: 0 12px; border: 0.5px solid #ccc; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111; background: #fff; transition: border-color .15s; }
.driver-app input[type=text]:focus, .driver-app input[type=number]:focus { outline: none; border-color: #378ADD; box-shadow: 0 0 0 2px rgba(55,138,221,.15); }
.driver-app input.af, .driver-app input[readonly] { background: #f4f3ee; color: #666; }
.driver-app input[readonly] { cursor: default; }
.driver-app .invalid-da { border-color: #E24B4A !important; box-shadow: 0 0 0 2px rgba(226,75,74,.15) !important; }

.driver-app .crow { display: flex; gap: 8px; }
.driver-app .cna-btn { height: 40px; padding: 0 12px; border: 0.5px solid #ccc; border-radius: 8px; background: #f4f3ee; font-size: 12px; cursor: pointer; color: #666; white-space: nowrap; font-family: inherit; flex-shrink: 0; display: flex; align-items: center; }
.driver-app .cna-btn.on { border-color: #1a2744; color: #0C447C; background: #E6F1FB; }
.driver-app .scan-btn { width: 42px; height: 40px; border: 0.5px solid #ccc; border-radius: 8px; background: #1a2744; color: #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.driver-app .scan-btn:hover { opacity: .88; }
/* The scan control is a <label> wrapping a hidden file input, not a <button>:
   a file picker only opens on a real user gesture against the input itself, so
   it cannot be triggered from code. Visually it stays the same button. */
.driver-app .scan-btn input[type=file] { display: none; }
.driver-app .scan-btn-busy { opacity: .6; cursor: default; }

/* searchable dropdown */
.driver-app .dd { position: relative; }
.driver-app .dd-input { width: 100%; height: 40px; padding: 0 34px 0 12px; border: 0.5px solid #ccc; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111; background: #fff; cursor: pointer; }
.driver-app .dd-input:focus { outline: none; border-color: #378ADD; box-shadow: 0 0 0 2px rgba(55,138,221,.15); }
.driver-app .dd-input.af { background: #f4f3ee; color: #666; }
.driver-app .dd-caret { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: #aaa; pointer-events: none; }
.driver-app .dd-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 0.5px solid #ccc; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); z-index: 50; max-height: 230px; overflow-y: auto; }
.driver-app .dd-opt { padding: 9px 12px; font-size: 13px; color: #333; cursor: pointer; border-bottom: 0.5px solid #f0f0f0; }
.driver-app .dd-opt:last-child { border-bottom: none; }
.driver-app .dd-opt:hover { background: #E6F1FB; color: #0C447C; }
.driver-app .dd-empty { padding: 10px 12px; font-size: 12px; color: #aaa; text-align: center; }
.driver-app .dd-backdrop { position: fixed; inset: 0; z-index: 40; }

/* confirmation + submit */
.driver-app .divline { height: 0.5px; background: #eee; margin: 1.25rem 0; }
.driver-app .stitle { font-size: 13px; font-weight: 500; margin-bottom: .75rem; display: flex; align-items: center; gap: 6px; }
.driver-app .chkrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #f4f3ee; border-radius: 8px; cursor: pointer; }
.driver-app .chkrow:hover { background: #ebebeb; }
.driver-app .cbox { width: 18px; height: 18px; border: 1.5px solid #ccc; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: all .15s; }
.driver-app .cbox.on { background: #1a2744; border-color: #1a2744; }
.driver-app .chtxt { font-size: 13px; color: #111; line-height: 1.4; }
.driver-app .chsub { font-size: 11px; color: #666; margin-top: 2px; }
.driver-app .sbtn { width: 100%; height: 46px; background: #1a2744; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1.25rem; font-family: inherit; }
.driver-app .sbtn:hover { opacity: .88; }
.driver-app .sbtn:disabled { opacity: .55; cursor: default; }
.driver-app .rnote { font-size: 11px; color: #aaa; margin-top: 1rem; }

/* prefill banner */
.driver-app .pbanner { background: #E6F1FB; border: 0.5px solid #85B7EB; border-radius: 8px; padding: 8px 12px; margin-bottom: 1rem; font-size: 12px; color: #0C447C; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.driver-app .pbleft { display: flex; align-items: center; gap: 7px; }

/* success */
.driver-app .succ { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1rem; gap: 10px; }
.driver-app .succ-ico { width: 56px; height: 56px; background: #EAF3DE; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.driver-app .succ h2 { font-size: 17px; font-weight: 500; }
.driver-app .succ p { font-size: 13px; color: #666; line-height: 1.6; }
.driver-app .nbtn { padding: 10px 24px; border: 0.5px solid #ddd; border-radius: 8px; background: transparent; font-size: 14px; cursor: pointer; font-family: inherit; margin-top: 4px; }
.driver-app .nbtn:hover { background: #f4f3ee; }

/* ── My Loads – search bar ────────────────────────────────────────── */
.driver-app .swrap { position: relative; margin-bottom: 12px; }
.driver-app .swrap-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; line-height: 0; }
.driver-app .sinput { width: 100%; height: 38px; padding: 0 12px 0 34px; border: 0.5px solid #ddd; border-radius: 8px; font-size: 13px; font-family: inherit; background: #f4f3ee; color: #111; }
.driver-app .sinput:focus { outline: none; border-color: #378ADD; background: #fff; box-shadow: 0 0 0 2px rgba(55,138,221,.12); }

/* ── My Loads – sort label ────────────────────────────────────────── */
.driver-app .sort-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #aaa; margin-bottom: 8px; }

/* ── My Loads – container card ───────────────────────────────────── */
.driver-app .ccard { border: 0.5px solid #ddd; border-radius: 10px; margin-bottom: 8px; overflow: hidden; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.driver-app .ccard:hover { border-color: #378ADD; box-shadow: 0 2px 8px rgba(55,138,221,.1); }
.driver-app .ccard-inner { padding: 11px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.driver-app .cmain { flex: 1; min-width: 0; }
.driver-app .cnum { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.driver-app .cbkg { font-size: 11px; color: #888; margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.driver-app .clocs { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.driver-app .cloc { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #555; }

/* ── My Loads – priority badge ───────────────────────────────────── */
.driver-app .prio-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 20px; margin-bottom: 5px; }
.driver-app .prio-res  { background: #EEEDFE; color: #3C3489; }
.driver-app .prio-fifo { background: #f4f3ee;  color: #666; }
.driver-app .prio-alert { background: #FDECEC; color: #B42318; border: 0.5px solid #F5C2C0; }

/* ── My Loads – past-due return (missed its dispatch date) ───────── */
.driver-app .ccard-overdue { border-color: #F5C2C0; border-left: 3px solid #B42318; background: #FFFAFA; }
.driver-app .ccard-overdue:hover { border-color: #B42318; box-shadow: 0 2px 8px rgba(180,35,24,.12); }

/* Marks a destination that came from an explicit dispatch rather than the
   booking's default return ramp, so a drop zone does not look like a mistake. */
.driver-app .dispatch-flag { margin-left: 5px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #0C447C; background: #E6F1FB; border-radius: 20px; padding: 1px 6px; }

/* ── My Loads – dispatch date picker ─────────────────────────────── */
.driver-app .dp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.driver-app .dp-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #999; }
.driver-app .dp-input { height: 38px; padding: 0 10px; border: 0.5px solid #ccc; border-radius: 8px; font-size: 14px; font-family: inherit; color: #111; background: #fff; }
.driver-app .dp-input:focus { outline: none; border-color: #378ADD; box-shadow: 0 0 0 2px rgba(55,138,221,.15); }
.driver-app .dp-note { font-size: 11px; color: #888; font-style: italic; }

/* Unified error banner shown via @ErrMsg on every page */
.driver-app .err-banner { display: flex; align-items: flex-start; gap: 8px; background: #FDECEC; color: #B42318; border: 0.5px solid #F5C2C0; border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.35; margin-bottom: 12px; }
.driver-app .err-banner svg { flex-shrink: 0; margin-top: 1px; }

/* My Container — movement history on the held-container card */
.driver-app .mvh { border-top: 0.5px solid #eee; padding: 10px 12px; }
.driver-app .mvh-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #999; display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.driver-app .mvh-empty { font-size: 12px; color: #aaa; font-style: italic; }
.driver-app .mvh-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0.5px solid #f4f3ee; }
.driver-app .mvh-row:last-child { border-bottom: none; }
.driver-app .mvh-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.driver-app .mvh-up { background: #378ADD; }
.driver-app .mvh-down { background: #639922; }
.driver-app .mvh-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.driver-app .mvh-type { font-size: 13px; font-weight: 500; color: #111; }
.driver-app .mvh-loc { font-size: 11px; color: #888; display: flex; align-items: center; gap: 3px; }
.driver-app .mvh-when { font-size: 11px; color: #999; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; }

/* ── My Loads – container status pills ───────────────────────────── */
.driver-app .cpill        { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; }
.driver-app .cpill-ready  { background: #E6F1FB; color: #0C447C; }
.driver-app .cpill-transit{ background: #FAEEDA; color: #633806; }
.driver-app .cpill-done   { background: #EAF3DE; color: #27500A; }

/* ── Type cards: amber (aam = pickup-loaded) / purple (ap = dropoff-loaded) ── */
.driver-app .tc.aam { background: #FAEEDA; border-color: #BA7517; }
.driver-app .tc.aam .tc-label { color: #633806; }
.driver-app .tc.aam .tc-sub   { color: #854F0B; }
.driver-app .tc.aam .tc-icon  { background: rgba(186,117,23,.2); color: #854F0B; }
.driver-app .tc.ap  { background: #EEEDFE; border-color: #7F77DD; }
.driver-app .tc.ap  .tc-label { color: #3C3489; }
.driver-app .tc.ap  .tc-sub   { color: #534AB7; }
.driver-app .tc.ap  .tc-icon  { background: rgba(127,119,221,.2); color: #534AB7; }

/* ── Refresh button ──────────────────────────────────────────────── */
.driver-app .refresh-btn { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 44px; 
    height: 44px; 
    border: 1px solid #ddd; 
    border-radius: 10px; 
    background: #fff; 
    cursor: pointer; 
    transition: background .15s, border-color .15s; 
    color: #378ADD;
}
.driver-app .refresh-btn:hover { background: #f4f3ee; border-color: #378ADD; }
.driver-app .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Spinner animation ───────────────────────────────────────────── */
.driver-app .spinner { 
    display: inline-flex; 
    animation: spin 1s linear infinite; 
}
@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* ── Profile page ────────────────────────────────────────────────── */
.driver-app .prof-top { display: flex; align-items: center; gap: 14px; }
.driver-app .prof-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 0.5px solid #ddd; }
.driver-app .prof-avatar-fallback { display: flex; align-items: center; justify-content: center; background: #E6F1FB; color: #378ADD; border-color: #85B7EB; }
.driver-app .prof-id { min-width: 0; }
.driver-app .prof-name { font-size: 16px; font-weight: 600; color: #111; line-height: 1.3; }
.driver-app .prof-email { font-size: 12px; color: #666; margin-top: 3px; display: flex; align-items: center; gap: 5px; word-break: break-all; }

.driver-app .claim-list { border: 0.5px solid #ddd; border-radius: 10px; overflow: hidden; }
.driver-app .claim-row { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-bottom: 0.5px solid #eee; }
.driver-app .claim-row:last-child { border-bottom: none; }
.driver-app .claim-type { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: #aaa; }
.driver-app .claim-val { font-size: 12px; color: #333; word-break: break-all; line-height: 1.4; }

/* ── Loading overlay ─────────────────────────────────────────────── */
.driver-app .loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.driver-app .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    font-size: 14px;
    color: #333;
}

/* ════════════════════════════════════════════════════════════════
   EMPTIES PAGE WRAPPER (side panel + driver app)
   Positions the container generator panel to the left of the
   centered driver app view.
   ════════════════════════════════════════════════════════════════ */
.empties-page-wrapper {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 0 1rem;
}

/* Override the driver-app's auto-margin when inside the wrapper */
.empties-page-wrapper .driver-app {
    margin: 0;
    padding-top: 1rem;
}

/* The .container-gen-panel / .cg-* rules that used to sit here styled the test
   container-number generator, which this build does not ship. They are still in
   the Blazor Server app's copy of app.css — that is the one intentional
   divergence between the two files, so a future diff of the two is expected to
   show it. */

@media (max-width: 800px) {
    .empties-page-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .empties-page-wrapper .driver-app {
        order: 0;
    }
}
/* ─────────────────────────────────────────────────────────────────────────────
   WebAssembly boot + error bar.

   Everything above this line is app.css copied verbatim from the Blazor Server
   app, so the driver-facing UI is byte-for-byte the same. What follows is the
   only genuinely new styling in the WASM build, and it exists because the two
   hosting models fail differently.

   Blazor Server had no boot state to style — the server rendered the first
   screen — but it could lose its SignalR circuit at any moment, so it shipped a
   ReconnectModal. WebAssembly is the mirror image: there is no circuit to drop,
   but the runtime and assemblies have to download before anything renders. On a
   driver's phone at a plant that is a few seconds on first visit and cached
   afterwards, and an unstyled blank page for those seconds reads as a broken
   app. Hence the POET mark and the progress ring.
   ───────────────────────────────────────────────────────────────────────────── */

.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 14px;
}

.boot-logo {
    height: 34px;
    opacity: .9;
}

.boot-text {
    font-family: sans-serif;
    font-size: 13px;
    color: #888;
    letter-spacing: .02em;
}

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 0;
}

    .loading-progress circle {
        fill: none;
        stroke: #e6e6e6;
        stroke-width: 0.4rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1d5060;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

#blazor-error-ui {
    background: #FAEEDA;
    color: #633806;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1100;
    font-family: sans-serif;
    font-size: 14px;
}

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

    #blazor-error-ui .reload {
        color: #633806;
        text-decoration: underline;
    }

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE — the driver app's actual target device.

   The design was drawn as a 470px card centred on a desktop page, and every
   container was pinned to that width with `min-width: 470px`. On a phone the
   card therefore could not shrink: on a 430px iPhone the nav tabs and the
   progress tiles ran off the right edge, unreachable, because the overflow was
   clipped rather than scrollable. Those min-widths are gone; the card is now
   fluid with a 470px ceiling, so the desktop rendering is unchanged and narrow
   screens size down instead of being cropped.

   Below 480px it goes edge to edge. A centred card with rounded corners and
   side borders is a desktop idiom — on a phone the rounding and the borders buy
   nothing and cost horizontal space the content genuinely needs, so the card
   becomes the screen and the padding tightens.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* No outer gutter, and no gap above the brand bar. */
    .driver-app { padding: 0 0 2rem; }

    /* Square off the shoulders: nothing is floating on a background any more.
       .top-app-bar is NOT squared here — its base rule lives in an inline
       <style> inside TopAppBar.razor, which renders after this file and would
       win the later-wins tiebreak. Its mobile override sits in that component
       alongside it. */
    .driver-app .nav-tabs-da { border-radius: 0; }

    .driver-app .list-page {
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: .75rem;
    }

    .driver-app .header { padding: .75rem 1rem .875rem; }

    /* Five tabs have to share ~430px once "My Container" appears. Trimming the
       type and the gap is enough to fit them without wrapping; min-width lets
       them actually shrink, and the clip is a backstop for a long label rather
       than something that should normally be reached. */
    .driver-app .nav-btn {
        min-width: 0;
        overflow: hidden;
        padding: 11px 2px;
        font-size: 10px;
        gap: 3px;
    }

    /* Tiles: reclaim the horizontal room the labels need. */
    .driver-app .es-summary { padding: 10px; }
    .driver-app .es-track-title { width: 40px; }
    .driver-app .es-track { gap: 6px; }
    .driver-app .es-cells { gap: 4px; }
    .driver-app .es-cell { padding: 5px 6px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTAINER SCAN PREVIEW

   The photo the driver just took, with a viewfinder frame and a sweep line
   while the read is in flight.

   The animation is doing a job, not decorating: a scan is a round trip plus
   model inference, which on plant wifi is a few seconds of nothing. Without
   feedback that reads as a frozen form, and the driver taps again — which
   costs another photo, another call, and a second chance to be confused. The
   sweep says "working" without pretending to know how far along it is, which a
   progress bar would.

   The frame stays after the sweep stops, while a result is waiting to be
   confirmed, so the photo and the number sit together for comparison.
   ───────────────────────────────────────────────────────────────────────────── */

.driver-app .scan-preview {
    position: relative;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #0d1526;
    border: 0.5px solid #2b3b5c;
    line-height: 0;
}

    .driver-app .scan-preview img {
        display: block;
        width: 100%;
        max-height: 220px;
        object-fit: cover;
    }

    /* Dimmed only while reading, so the sweep and the frame stay legible over a
       bright container door. Restored the moment there is a result to look at. */
    .driver-app .scan-preview.is-scanning img {
        filter: brightness(.6) contrast(1.05);
    }

/* Viewfinder corners */
.driver-app .scan-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #378ADD;
    opacity: .9;
}

.driver-app .scan-corner-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.driver-app .scan-corner-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.driver-app .scan-corner-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.driver-app .scan-corner-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }

/* The sweep */
.driver-app .scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #378ADD 20%, #9ecbf5 50%, #378ADD 80%, transparent);
    box-shadow: 0 0 14px 3px rgba(55, 138, 221, .55);
    animation: scan-sweep 1.7s ease-in-out infinite;
    will-change: top;
}

@keyframes scan-sweep {
    0%   { top: 0;    opacity: 0; }
    10%  {            opacity: 1; }
    90%  {            opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.driver-app .scan-status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(13, 21, 38, .92));
    color: #cfe2f7;
    font-size: 11px;
    line-height: 1.3;
}

/* A sweeping light is exactly the kind of motion that triggers discomfort, and
   this app is used by people at work who cannot simply close the tab. Hold the
   line still and let the dimming and the status text carry the "busy" state. */
@media (prefers-reduced-motion: reduce) {
    .driver-app .scan-line {
        animation: none;
        top: 50%;
    }
}