/* Shared visual system for Coastline's operational and customer workspaces. */
:root {
    --navy: #123247;
    --navy-2: #1b4359;
    --teal: #087f73;
    --teal-soft: #eaf6f2;
    --ink: #203746;
    --muted: #607482;
    --line: #dce5e9;
    --canvas: #f3f6f8;
    --shadow: 0 8px 28px rgb(18 50 71 / 6%);
    --radius: 14px;
}
.delivery-navigation { overflow: hidden; margin-bottom: 20px; }
.delivery-navigation-map { height: clamp(300px, 45vh, 480px); background: #eaf1f3; }
.navigation-controls { padding: 18px 22px; display: flex; gap: 14px; align-items: flex-end; }
.navigation-controls label, .rider-route-picker label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 650; color: #456170; flex: 1; }
.navigation-summary { padding: 18px 22px; border-top: 1px solid var(--line); }
.navigation-summary p { font-size: 12px; color: var(--muted); }
.navigation-summary .notice { margin: 0; }
.navigation-step-list { padding: 0 22px 20px; }
.navigation-guidance { margin: 0 22px 20px; padding: 16px; background: #edf7f3; border-radius: 10px; }
.navigation-guidance>strong { font-size: 11px; color: var(--teal); }
.navigation-guidance p { font-size: 15px; font-weight: 650; color: var(--navy); }
.navigation-guidance>div { display: flex; flex-wrap: wrap; gap: 8px; }
.navigation-step-list summary { font-size: 13px; font-weight: 650; cursor: pointer; }
.navigation-step-list ol { max-height: 240px; overflow: auto; padding-left: 24px; }
.navigation-step-list li { padding: 12px 4px; font-size: 13px; border-bottom: 1px solid var(--line); }
.rider-route-picker { padding: 20px; }
@media(max-width:600px) { .navigation-controls { padding: 16px; flex-direction: column; align-items: stretch; } .navigation-summary { padding: 16px; } }
html { scroll-padding-top: 24px; }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #3ebbad; outline-offset: 3px; }
h1[tabindex="-1"]:focus { outline: none; }
button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
input, select, textarea { min-width: 0; max-width: 100%; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
    border: 1px solid #c6d4dc; border-radius: 9px; background: #fff;
    color: var(--ink); padding: 10px 12px; min-height: 44px; line-height: 1.4;
}
input::placeholder, textarea::placeholder { color: #84939e; opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(8 127 115 / 10%); }
input[type=checkbox], input[type=radio] { accent-color: var(--teal); width: 18px; height: 18px; flex: 0 0 18px; }
input[type=file] { height: auto; padding: 8px; }
input[type=file]::file-selector-button { background: var(--teal-soft); color: var(--teal); border: 0; padding: 8px 12px; border-radius: 6px; margin-right: 12px; font-weight: 650; }
.app-shell { grid-template-columns: 236px minmax(0, 1fr); }
.sidebar { width: 236px; padding: 26px 14px 18px; background: #102e40; }
.brand { padding: 0 12px 26px; gap: 14px; }
.brand-mark { transform: none; border-radius: 11px; width: 40px; height: 40px; color: #5ad7c3; border-color: #5ad7c3; font-family: inherit; font-size: 24px; }
.brand strong { font-family: inherit; font-size: 14px; letter-spacing: 1.6px; }
.brand small { color: #79b7bc; letter-spacing: 3.5px; }
.main-nav { gap: 3px; }
.main-nav a { min-height: 43px; height: auto; padding: 10px 13px; font-size: 13px; font-weight: 550; border-radius: 8px; color: #c0d0da; }
.main-nav a span { font-size: 17px; line-height: 1; color: #91aebd; }
.main-nav a.active { background: #214658; box-shadow: inset 3px 0 #61d7bf; color: #fff; }
.main-nav a.active span { color: #77e2cc; }
.nav-label { margin: 24px 13px 8px; font-size: 10px; color: #8aa7b7; letter-spacing: 1.5px; }
.nav-label:first-child { margin-top: 6px; }
.profile-card { padding: 18px 8px 0; align-items: center; }
.profile-card>div { min-width: 0; flex: 1; }
.profile-card strong { font-size: 12px; overflow-wrap: anywhere; }
.profile-card small { color: #a0b8c6; font-size: 11px; }
.profile-card form { margin-left: auto; }
.avatar { flex-shrink: 0; background: #d8f2e9; color: #126657; font-size: 11px; }
.logout-button { border-radius: 6px; min-width: 32px; min-height: 36px; }
.logout-button:hover { background: #24495c; color: #fff; }
.mobile-navigation { display: none; }
.content-shell { width: 100%; max-width: 1880px; margin-inline: auto; padding: 36px clamp(22px, 3vw, 48px) 64px; }
.topbar { gap: 24px; align-items: flex-start; margin-bottom: 28px; }
.topbar>div:first-child { min-width: 0; }
.eyebrow { color: #48796f; letter-spacing: 1.7px; font-size: 10px; margin-bottom: 7px; }
.topbar h1 { font: 700 clamp(25px, 2.3vw, 32px)/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.9px; }
.topbar p { font-size: 13px; line-height: 1.65; margin-top: 9px; max-width: 700px; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.button, .icon-button, .filter-button { min-height: 40px; height: auto; padding: 10px 15px; border-radius: 8px; font-size: 12px; font-weight: 650; line-height: 1.25; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 6px; white-space: normal; }
.button.primary { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 2px 3px rgb(8 127 115 / 12%); }
.button.primary:hover:not(:disabled) { background: #066a60; border-color: #066a60; }
.button.secondary, .filter-button { color: #315064; background: #fff; }
.button.secondary:hover:not(:disabled), .filter-button:hover { background: #f3f7f9; border-color: #afc3ce; }
.button.compact { min-height: 34px; padding: 7px 11px; font-size: 11px; }
.icon-button { min-width: 40px; }
.panel { border-radius: var(--radius); box-shadow: 0 2px 7px rgb(18 50 71 / 3%); min-width: 0; }
.panel-heading { padding: 21px 23px; gap: 16px; align-items: center; }
.panel-heading>div { min-width: 0; }
.panel-heading h2, .rider-profile-heading h2, .job-card-heading h2, .selected-rider-heading h3, .lane-heading strong { font-family: inherit; letter-spacing: -.3px; }
.panel-heading h2 { font-size: 17px; line-height: 1.35; }
.panel-heading p { font-size: 12px; line-height: 1.6; margin-top: 5px; }
.panel-heading a, .table-actions a { color: var(--teal); font-size: 12px; }
.metric-grid { gap: 16px; margin-bottom: 24px; }
.metric-card { padding: 21px; border-radius: 12px; min-height: 125px; }
.metric-card small { font-size: 10px; letter-spacing: .8px; color: #617786; line-height: 1.5; margin-top: 0; }
.metric-card:has(.metric-icon) small { margin-top: 27px; }
.metric-card>strong { font: 700 29px/1.2 ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-top: 10px; }
.metric-card p { color: #697f8c; font-size: 11px; line-height: 1.5; margin-top: 7px; }
.metric-icon { left: 21px; top: 19px; }
.trend { top: 23px; }
.workspace-grid, .partner-layout, .report-grid { gap: 22px; margin-bottom: 24px; }
.table-wrap { scrollbar-width: thin; scrollbar-color: #b2c6cf #f3f6f8; border-radius: 0 0 var(--radius) var(--radius); }
table { font-size: 12px; line-height: 1.55; }
th { font-size: 10px; font-weight: 700; letter-spacing: .7px; padding: 13px 20px; color: #647c8c; background: #f7f9fb; white-space: nowrap; }
td { padding: 17px 20px; vertical-align: middle; color: #526a79; }
tbody tr:not(.undo-row):not(.audit-detail):hover { background: #f8fbfc; }
td strong { font-weight: 650; }
td small { color: var(--muted); }
.route-cell { min-width: 210px; max-width: 310px; line-height: 1.65; }
.status, .approval { padding: 5px 9px; font-size: 10px; font-weight: 650; letter-spacing: .1px; border-radius: 6px; }
.status.in-transit { background: #e9f6ee; color: #196e47; }
.status.at-pickup { background: #eaf2fc; color: #2c5f93; }
.status.assigned { background: #f0edfa; color: #675298; }
.status.unassigned { background: #fff3de; color: #946011; }
.notice { margin: 0 0 20px; padding: 14px 17px; font-size: 12px; line-height: 1.65; font-weight: 500; border: 1px solid var(--line); background: #f3f7fa; color: #456373; border-radius: 10px; }
.notice strong { font-weight: 700; }
.selected-route-card .notice { margin: 14px 0 0; font-size: 11px; padding: 10px 12px; }
.form-panel form { padding: 24px; }
.form-panel>.form-grid { padding: 24px; }
.form-panel>.form-actions { padding: 0 24px 24px; margin-top: 0; }
.form-grid { gap: 20px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-grid label, .availability-select, .audit-filters label, .rider-action-form label, .order-management label { font-size: 12px; font-weight: 600; color: #415d6e; gap: 8px; }
.form-grid input, .form-grid select, .dispatch-card select { height: 44px; border-radius: 9px; font-size: 13px; }
.form-grid .checkbox-label { height: auto; min-height: 44px; gap: 10px; }
.form-actions { flex-wrap: wrap; padding-top: 4px; gap: 10px; margin-top: 24px; }
.validation-message { font-size: 11px; line-height: 1.5; color: #b93834; }
.invalid { border-color: #cb5d51 !important; }
.address-search-field>span { font-size: 12px; font-weight: 600; color: #415d6e; }
.address-input-row { align-items: stretch; gap: 8px; }
.address-input-row .button { min-width: 86px; flex-shrink: 0; }
.order-map-tools { padding: 16px; flex-wrap: wrap; gap: 10px; }
.order-map-tools strong { font-size: 12px; }
.order-map-tools>span { flex: 1 1 240px; font-size: 12px; line-height: 1.6; }
#order-route-map { border-radius: 10px; }
.live-map-panel #dispatch-live-map { height: clamp(340px, 44vh, 540px); }
.leaflet-container { font-family: inherit; z-index: 1; }
.leaflet-tooltip { font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 6px; border-color: #d1dfe5; box-shadow: 0 2px 8px #12324715; }
.leaflet-popup-content { font-size: 12px; line-height: 1.7; }
.dispatch-rider-selector { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 22px; background: #fff; border-top: 1px solid var(--line); font-size: 12px; font-weight: 650; color: #456170; }
.dispatch-rider-selector select { min-width: 230px; }
.selected-rider-routes { padding: 22px; background: #f6faf9; }
.selected-rider-heading h3 { font-size: 18px; }
.selected-rider-heading p { font-size: 12px; line-height: 1.6; }
.selected-route-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; }
.selected-route-card { padding: 18px; border-radius: 10px; }
.selected-route-card li strong { font-size: 12px; line-height: 1.65; }
.selected-route-card li small { font-size: 9px; letter-spacing: .7px; }
.selected-route-card li { margin: 12px 0; }
.dispatch-board { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.dispatch-lane { min-width: 0; padding: 14px; background: #eaf0f3; border: 1px solid #dce6eb; border-radius: 13px; }
.lane-heading { padding: 4px 5px 17px; }
.lane-heading strong { font-size: 15px; }
.lane-heading small { font-size: 11px; }
.dispatch-card { border-radius: 11px; padding: 17px; box-shadow: 0 2px 4px #12324706; }
.dispatch-card-top { gap: 8px; font-size: 11px; }
.dispatch-card h3 { font-size: 14px; margin: 14px 0 9px; }
.dispatch-card p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.rider-row { font-size: 12px; padding-top: 14px; margin-top: 14px; }
.empty-lane { font-size: 12px; padding: 48px 12px; }
.rider-directory { grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 20px; }
.rider-profile { padding: 22px; }
.rider-profile-heading { flex-wrap: wrap; gap: 12px; }
.rider-profile-heading h2 { font-size: 16px; }
.rider-profile-heading p { font-size: 11px; line-height: 1.6; }
.rider-profile dl div { font-size: 12px; padding: 11px 0; gap: 12px; }
.rider-profile dd { overflow-wrap: anywhere; }
.rider-profile .button { margin-top: 8px; }
.rider-connect { padding: 24px; }
.rider-connect>label { font-size: 12px; }
.rider-connect select { font-size: 14px; }
.rider-shift-row, .tracking-row { margin-top: 22px; padding-top: 22px; }
.tracking-row strong { font-size: 14px; }
.tracking-row small { font-size: 12px; line-height: 1.6; }
.rider-job-card { padding: 24px; }
.rider-job-card h3 { font-size: 16px; }
.job-card-heading h2 { font-size: 19px; line-height: 1.4; }
.route-stop small { font-size: 10px; }
.route-stop strong { font-size: 14px; line-height: 1.6; }
.route-stop span { font-size: 12px; }
.rider-action-form { gap: 16px; padding: 20px; }
.order-detail-panel { padding: 0 0 24px; margin-top: 24px; overflow: hidden; }
.order-detail-grid, .order-management, .order-timeline { margin: 22px 24px 0; }
.order-detail-grid { gap: 16px; }
.order-detail-grid div { padding: 15px; border: 1px solid #e5edf0; border-radius: 9px; }
.order-detail-grid small { font-size: 10px; letter-spacing: .6px; }
.order-detail-grid strong { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.order-timeline li { padding: 0 0 20px 17px; font-size: 12px; }
.order-timeline small { font-size: 11px; margin-bottom: 5px; }
.undo-row label { font-size: 12px; min-width: min(360px,100%); }
.audit-filters { padding: 20px 24px; gap: 20px; border-radius: 12px; }
.audit-filters>div strong { font-family: inherit; font-size: 25px; }
.audit-filters>div span { font-size: 11px; }
.audit-detail pre { font-size: 12px; padding: 18px; line-height: 1.7; }
.settings-section { margin-bottom: 24px; overflow: hidden; }
.settings-section>.form-grid { padding: 24px; }
.settings-section>.form-actions { padding: 0 24px 24px; }
.maps-billing .metric-grid { padding: 0 24px; }
.maps-budget { margin: 24px; padding: 20px; }
.maps-budget span { font-size: 12px; }
.report-grid { grid-template-columns: minmax(0,.85fr) minmax(0,1.25fr); }
.report-bars { padding: 26px 24px; }
.report-bars>div { font-size: 12px; grid-template-columns: 115px minmax(0,1fr) 30px; gap: 12px; margin-bottom: 22px; }
.fee-card dl div { font-size: 12px; padding: 13px 0; }
.split-visual strong { font-family: inherit; }
.split-visual span { font-size: 11px; }
.split-visual { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 20px 20px 12px; }
.split-visual div:first-child, .split-visual div:last-child { border-radius: 9px; height: 88px; }
.split-visual div:last-child { background: #e6f5ee; color: #166b51; }
.fee-split-track { display: flex; height: 8px; overflow: hidden; background: #8ed4ba; border-radius: 6px; margin: 0 20px 24px; }
.fee-split-track span { display: block; height: 100%; background: var(--navy); }
.flat-fee-summary { padding: 24px; }
.flat-fee-summary small { font-size: 10px; color: var(--muted); letter-spacing: .7px; }
.flat-fee-summary strong { display: block; font-size: 30px; color: var(--navy); margin: 8px 0; }
.flat-fee-summary p { font-size: 12px; color: var(--muted); line-height: 1.7; }
.rule-list strong { font-size: 13px; }
.rule-list p { font-size: 12px; line-height: 1.7; }
.quick-order-step h2 { font-family: inherit; font-size: 18px; letter-spacing: -.3px; }
.quick-order-step p { font-size: 13px; line-height: 1.6; }
.quick-order-grid input { font-size: 14px; }
.quick-order-grid .checkbox-label { flex-direction: row; align-items: center; }
.quick-order-grid .checkbox-label input { min-height: 18px; width: 18px; }
.quick-quote { background: #edf8f3; border-color: #b8decf; }
.quick-quote strong { font-variant-numeric: tabular-nums; color: #145743; }
.login-card { padding: 40px; border-radius: 20px; box-shadow: 0 22px 80px #061c2c50; }
.login-card h1 { font-family: inherit; font-size: 28px; letter-spacing: -.8px; }
.login-card label { font-size: 12px; }
.login-card input { height: 46px; font-size: 14px; }
.login-card .button { min-height: 46px; }
.login-brand strong { font-size: 15px; }
.empty-mobile, .loading-panel { padding: 54px 24px; }
.empty-mobile h2 { font-family: inherit; font-size: 20px; }
.empty-mobile p { font-size: 13px; }
.workspace-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 42px 24px 48px; max-width: 580px; margin: auto; }
.empty-state-symbol { width: 50px; height: 50px; border-radius: 14px; background: #eaf5f1; color: #167b64; display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; }
.workspace-empty-state h2 { font: 650 17px/1.5 ui-sans-serif,system-ui,sans-serif; letter-spacing: -.3px; color: var(--navy); margin: 0 0 8px; }
.workspace-empty-state p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 440px; margin: 0; }
.empty-state-action { margin-top: 20px; }
.table-wrap:has(.workspace-empty-state) table { min-width: 0; }
.table-wrap:has(.workspace-empty-state) thead { display: none; }
.order-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.order-form-grid .wide, .order-form-grid .address-search-field { grid-column: 1/-1; }
.form-section-heading { grid-column: 1/-1; display: flex; align-items: flex-start; gap: 13px; padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--line); }
.form-section-heading:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.form-section-heading>span { width: 32px; height: 32px; border-radius: 8px; background: #eaf5f1; color: #19725e; display: grid; place-items: center; font-size: 11px; font-weight: 750; flex-shrink: 0; }
.form-section-heading h3 { font-size: 15px; letter-spacing: -.2px; margin: 0 0 4px; color: var(--navy); }
.form-section-heading p { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
.coordinate-details { grid-column: 1/-1; padding: 15px 18px; background: #f7fafb; border: 1px solid #e0e9ed; border-radius: 10px; }
.coordinate-details summary { font-size: 12px; font-weight: 650; color: #486577; cursor: pointer; }
.coordinate-details>p { font-size: 12px; color: var(--muted); margin-block: 12px 18px; }
.coordinate-details .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.attention-item { padding: 17px 3px; gap: 12px; }
.attention-item strong { font-size: 12px; }
.attention-item p, .attention-item>a { font-size: 11px; line-height: 1.6; }
.fleet-map-note { padding: 12px 18px; font-size: 11px; }
.fleet-list article { padding: 17px 2px; }
.fleet-list article strong { font-size: 13px; }
.fleet-list article small { font-size: 11px; line-height: 1.6; }
.segmented button { min-height: 32px; font-size: 11px; padding-inline: 12px; }
.maps-billing>.notice { margin: 0 24px 24px; }
.settings-section>form>.form-grid { padding: 24px !important; }
.settings-section>form>.form-actions { padding: 0 24px 24px !important; margin-top: 0; }
.live-indicator { color: #087f73; background: #eaf7f1; padding: 5px 9px; border-radius: 6px; white-space: nowrap; }
.pwa-offline-bar, .pwa-update-bar { left: 236px; }
@media (min-width: 1700px) { .content-shell { padding-inline: 50px; } }
@media (max-width: 1200px) {
    .workspace-grid, .partner-layout { grid-template-columns: minmax(0,1fr); }
    .topbar { flex-wrap: wrap; }
    .topbar-actions { justify-content: flex-start; }
    .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .report-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1000px) { .dispatch-board { grid-template-columns: minmax(0,1fr); } .dispatch-lane { min-height: auto; } }
@media (max-width: 760px) {
    .app-shell { display: block; }
    .sidebar { position: relative; width: 100%; padding: 18px 18px 0; overflow: visible; border-bottom: 1px solid #21495d; }
    .brand { padding: 0 0 17px; }
    .sidebar>.main-nav, .sidebar>.sidebar-footer { display: none; }
    .mobile-navigation { display: block; border-top: 1px solid #315064; }
    .mobile-navigation summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; list-style: none; font-size: 13px; font-weight: 650; color: #e4f0f5; cursor: pointer; }
    .mobile-navigation summary::-webkit-details-marker { display: none; }
    .mobile-navigation .main-nav { display: flex; padding-bottom: 18px; max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .mobile-navigation[open] summary { border-bottom: 1px solid #315064; margin-bottom: 14px; }
    .mobile-account { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 0 22px; border-top: 1px solid #315064; }
    .mobile-account strong, .mobile-account small { display: block; font-size: 12px; }
    .mobile-account small { color: #aac0cc; margin-top: 4px; }
    .content-shell { padding: 26px 18px 50px; }
    .topbar { gap: 16px; margin-bottom: 23px; }
    .topbar h1 { font-size: 27px; }
    .topbar-actions { width: 100%; }
    .topbar-actions .secondary, .topbar-actions .icon-button { display: inline-flex; }
    .button { min-height: 44px; }
    .button.compact { min-height: 38px; }
    .metric-card { padding: 17px; min-height: 122px; }
    .metric-card>strong { font-size: 25px; }
    .metric-grid { gap: 12px; }
    .panel-heading { padding: 19px; flex-wrap: wrap; gap: 12px; }
    .panel-heading h2 { font-size: 16px; }
    .panel-heading p { font-size: 12px; }
    .panel-heading>.button { margin-left: 0; }
    .form-panel form, .form-panel>.form-grid, .settings-section>.form-grid { padding: 20px; }
    .form-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
    .order-form-grid, .coordinate-details .form-grid { grid-template-columns: minmax(0,1fr); }
    .form-grid label.wide { grid-column: auto; }
    input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
    .form-grid input, .form-grid select { font-size: 16px; }
    .form-actions { justify-content: stretch; }
    .form-actions .button { flex: 1 1 auto; }
    th { padding: 12px 16px; }
    td { padding: 15px 16px; }
    .table-wrap table { min-width: 580px; }
    .table-wrap { max-width: 100%; }
    .live-map-panel #dispatch-live-map { height: 360px; }
    .dispatch-rider-selector { padding: 16px 18px; align-items: stretch; flex-direction: column; gap: 8px; }
    .dispatch-rider-selector select { width: 100%; min-width: 0; }
    .selected-rider-routes { padding: 18px; }
    .selected-rider-heading { flex-wrap: wrap; }
    .selected-rider-heading>.button { width: 100%; }
    .selected-route-list { grid-template-columns: minmax(0,1fr); }
    .dispatch-board { gap: 18px; }
    .rider-connect, .rider-job-card, .rider-profile { padding: 20px; }
    .rider-directory { grid-template-columns: minmax(0,1fr); }
    .rider-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .rider-shift-row>div:last-child { flex-wrap: wrap; }
    .tracking-row { align-items: stretch; }
    .mobile-actions { grid-template-columns: minmax(0,1fr); }
    .order-detail-grid { grid-template-columns: minmax(0,1fr); }
    .order-detail-grid, .order-management, .order-timeline { margin-inline: 20px; }
    .audit-filters { align-items: stretch; padding: 18px; }
    .audit-filters label { min-width: 0; flex: 1; }
    .audit-filters select { min-width: 0; width: 100%; }
    .audit-filters>div { justify-content: flex-end; }
    .undo-row>td>div { flex-direction: column; align-items: stretch; }
    .undo-row label { min-width: 0; }
    .maps-budget { margin: 18px; grid-template-columns: minmax(0,1fr); }
    .maps-billing .metric-grid { padding-inline: 18px; }
    .quick-order-panel { padding: 20px; }
    .quick-order-grid { grid-template-columns: minmax(0,1fr); }
    .quick-order-grid .wide { grid-column: auto; }
    .quick-order-step { margin-top: 28px; }
    .pwa-offline-bar, .pwa-update-bar { left: 0; }
    .pwa-install-card { bottom: 16px; right: 16px; }
    .login-card { padding: 28px 24px; }
}
@media (max-width: 380px) { .metric-grid, .rider-summary-grid { grid-template-columns: minmax(0,1fr); } .content-shell { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .mobile-navigation { display: none; } .content-shell { padding: 0; } .panel { box-shadow: none; break-inside: avoid; } }
/* Map-first operational workspace: real map remains visible above the action sheet. */
.map-first-workspace { position:relative; height:calc(100dvh - 64px); min-height:580px; isolation:isolate; overflow:hidden; border-radius:24px; background:#dce8e3; }
.map-first-canvas { position:absolute; inset:0; z-index:0; height:100%; width:100%; }
.map-first-heading { position:absolute; top:20px; left:70px; right:20px; z-index:450; display:flex; justify-content:space-between; align-items:center; gap:16px; pointer-events:none; }
.map-first-heading > * { pointer-events:auto; background:rgba(255,255,255,.95); padding:12px 18px; border-radius:18px; box-shadow:0 4px 24px #102e4320; }
.map-first-heading h1 { font-size:22px; margin:3px 0 0; }.map-first-heading small { font-size:10px; letter-spacing:2px; color:#087f73; font-weight:800; }
.map-first-sheet { position:absolute; z-index:450; bottom:18px; left:18px; width:min(450px,calc(100% - 36px)); max-height:58%; display:flex; flex-direction:column; padding:0 20px 16px; border:1px solid #fff; border-radius:26px; background:rgba(255,255,255,.97); box-shadow:0 10px 45px #102e4330; overflow:auto; }
.map-first-sheet.expanded { max-height:82%; }.map-sheet-handle { background:none; border:0; padding:12px; cursor:pointer; }.map-sheet-handle span { display:block; width:42px; height:4px; background:#b9c9ca; border-radius:5px; margin:auto; }
.map-sheet-title { display:flex; justify-content:space-between; gap:10px; align-items:center; }.map-sheet-title h2 { font-size:22px; margin:4px 0; }.map-sheet-title small { color:#087f73; font-size:10px; font-weight:800; letter-spacing:1.5px; }.map-sheet-title p { font-size:12px; color:#64757d; }
.map-sheet-actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }.map-sheet-actions .button { min-height:42px; }.map-sheet-actions select { max-width:100%; }
.map-rider-filter { display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:12px; }.map-rider-filter select { flex:1; min-width:0; }
.map-sheet-scroll { overflow:auto; min-height:35px; max-height:190px; }.expanded .map-sheet-scroll { max-height:380px; }
.map-order-button { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:12px; padding:14px 10px; background:#f5f8f7; border:1px solid #e2eae7; border-radius:14px; margin:7px 0; color:#163c43; cursor:pointer; }.map-order-button.selected { border-color:#087f73; background:#eaf7f3; }.map-order-button small { display:block; margin-top:5px; font-size:11px; line-height:1.5; }.map-order-button > span:last-child { font-size:10px; flex-shrink:0; }
.map-selected-job { border:1px solid #c9e1d9; background:#f0f8f5; padding:12px; border-radius:14px; margin:10px 0; }.map-selected-job > div:first-child { display:flex; justify-content:space-between; align-items:center; }.map-selected-job p { font-size:12px; }.map-first-footnote { color:#6f7d80; font-size:10px; padding-top:10px; line-height:1.5; }.map-empty { font-size:13px; color:#64757d; padding:12px 0; }
@media(max-width:760px) { .content-shell:has(.map-first-workspace) { padding:0!important; }.map-first-workspace { height:calc(100dvh - 122px); border-radius:0; min-height:460px; }.map-first-heading { top:12px; left:55px; right:10px; gap:8px; }.map-first-heading h1 { font-size:17px; }.map-first-heading > * { padding:9px 12px; }.map-first-sheet { left:0; bottom:0; width:100%; border-radius:26px 26px 0 0; max-height:52%; padding:0 16px 14px; box-sizing:border-box; }.map-first-sheet.expanded { max-height:78%; }.map-first-heading .button { font-size:11px; }.map-sheet-title h2 { font-size:20px; } }
.rider-location-gate {position:fixed;inset:0;z-index:100000;background:#102e43f5;display:grid;place-items:center;padding:24px;color:white;backdrop-filter:blur(18px)}
.rider-location-gate section {max-width:460px;text-align:center}.rider-location-gate p {line-height:1.6;color:#d2e4e6}.rider-location-gate .location-gate-icon {font-size:75px;color:#54d2b0}.rider-location-gate details {margin:24px 0}.rider-location-gate form {margin:20px}
.quick-order-panel {max-width:680px;margin:0 auto}.quick-extra-details {margin:18px 0;padding:14px;background:#f4f8f7;border-radius:14px}.quick-extra-details summary {cursor:pointer;font-weight:600}.quick-extra-details .quick-order-grid {padding-top:16px}
.client-tracking-map {height:clamp(350px,60vh,650px);width:100%}.client-rider-pin {background:#087f73;border:3px solid white;border-radius:50%;box-shadow:0 3px 15px #102e4355;color:white;display:grid;place-items:center;font-size:26px;line-height:1}.client-rider-pin span {transform:rotate(180deg)}
.pilot-account-switcher {position:fixed;right:16px;bottom:18px;z-index:100100;max-width:calc(100vw - 32px);font-size:13px;color:#173a43}.pilot-account-switcher>summary {cursor:pointer;list-style:none;background:#102e43;color:white;border:1px solid #7eaca9;border-radius:24px;padding:13px 18px;box-shadow:0 6px 22px #102e4340;font-weight:700}.pilot-switcher-body {position:absolute;right:0;bottom:55px;width:340px;max-width:calc(100vw - 32px);max-height:75dvh;overflow:auto;background:white;padding:20px;border:1px solid #d5e5e1;border-radius:20px;box-shadow:0 12px 48px #102e4340;box-sizing:border-box}.pilot-switcher-body h3 {margin:8px 0}.pilot-switcher-body small {font-size:9px;letter-spacing:1px;color:#087f73;font-weight:800}.pilot-role-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px}.pilot-role-grid button {width:100%;font-size:12px;min-height:42px}.pilot-switcher-note {font-size:11px;line-height:1.5;color:#667a80}