/* Dolo interface system. Loaded after legacy layout rules in both entrypoints. */
:root {
  --ui-page: oklch(14% 0.006 250);
  --ui-surface: oklch(17% 0.007 250);
  --ui-raised: oklch(21% 0.008 250);
  --ui-hover: oklch(24% 0.009 250);
  --ui-line: oklch(31% 0.009 250);
  --ui-ink: oklch(96% 0.006 250);
  --ui-muted: oklch(76% 0.008 250);
  --ui-soft: oklch(69% 0.009 250);
  --ui-accent: oklch(72% 0.17 25);
  --ui-success: oklch(78% 0.12 160);
  --ui-warning: oklch(80% 0.12 80);
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --bg: var(--ui-page);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --soft: var(--ui-soft);
  --line: var(--ui-line);
  --panel: var(--ui-surface);
  --panel-solid: var(--ui-raised);
  --accent: var(--ui-accent);
  --good: var(--ui-success);
  --warning: var(--ui-warning);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html { scroll-padding-block: 96px 100px; }
body { background: var(--ui-page); }
.portal-view {
  --desktop-page: var(--ui-page);
  --desktop-surface: var(--ui-surface);
  --desktop-surface-raised: var(--ui-raised);
  --desktop-surface-hover: var(--ui-hover);
  --desktop-line: var(--ui-line);
  --desktop-muted: var(--ui-muted);
  --desktop-soft: var(--ui-soft);
  --route-page: var(--ui-page);
  --route-panel: var(--ui-surface);
  --route-surface: var(--ui-surface);
  --route-raised: var(--ui-raised);
  --route-row: var(--ui-surface);
  --route-row-hover: var(--ui-hover);
  --route-ink: var(--ui-ink);
  --route-muted: var(--ui-muted);
  --route-soft: var(--ui-soft);
  --route-line: var(--ui-line);
  --route-accent: var(--ui-accent);
  background: var(--ui-page);
  color: var(--ui-ink);
}
.ui-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
button .ui-icon { color: inherit; }
button:has(> .ui-icon) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.portal-view .tab { display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.portal-view .tab .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }
.portal-view .topbar { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.portal-view .glass-panel { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.portal-view .day-group { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: none; overflow: hidden; }
.portal-view .day-header { background: var(--ui-raised); padding-block: 16px; box-shadow: none; }
.portal-view .day-header h3 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.2; }
.portal-view .day-weekday { color: var(--ui-muted); font-size: .75rem; font-weight: 550; letter-spacing: .07em; margin-bottom: 6px; }
.portal-view .day-stats { background: transparent; border-color: var(--ui-line); }
.portal-view .day-stat { border-color: var(--ui-line); }
.portal-view .day-stat__icon svg { width: 18px; height: 18px; stroke-width: 1.8; }
.portal-view .day-stat strong { font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-view .day-stat em { color: var(--ui-soft); font-size: .75rem; }
.portal-view .route-row { background: var(--ui-surface); border-color: var(--ui-line); transition: background-color 160ms var(--ui-ease); scroll-margin-block: 100px; }
.portal-view .route-row__main { padding-block: 22px; }
.portal-view .route-stop strong { font-size: 1.125rem; font-weight: 650; line-height: 1.3; letter-spacing: -.025em; }
.portal-view .route-stop .route-place-city { color: var(--ui-ink); font-size: inherit; font-weight: inherit; }
.portal-view .route-stop .route-place-address { margin-top: 4px; color: var(--ui-muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; line-height: 1.4; white-space: normal; }
.portal-view .route-stop > span { color: var(--ui-soft); font-size: .75rem; margin-top: 8px; }
.portal-view .route-row__party { gap: 4px; color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; }
.portal-view .route-row__party > span { color: inherit; }
.portal-view .route-row__distance strong { font-size: .875rem; }
.portal-view .route-row__rate { color: var(--ui-soft); font-size: .75rem; }
.portal-view .route-row__amount strong { font-size: 1.125rem; letter-spacing: -.015em; }
.portal-view .route-row__currency { color: var(--ui-ink); }
.portal-view .route-row__currency.is-invoiced { color: var(--ui-accent); }
.invoice-register { margin-block: 24px 32px; }
.invoice-register__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding-block: 12px; border-block: 1px solid var(--ui-line); cursor: pointer; list-style: none; }
.invoice-register__toggle::-webkit-details-marker { display: none; }
.invoice-register__toggle h3 { margin: 0; font-size: 1.125rem; }
.invoice-register[open] > .invoice-register__toggle .ui-icon { transform: rotate(180deg); }
.invoice-register__toggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 4px; }
.invoice-register__header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block: 16px; }
.invoice-register__header p { margin: 0; max-width: 70ch; color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; }
.invoice-register__header > .custom-select { flex: 0 0 190px; }
.invoice-register__scroll { overflow-x: auto; border: 1px solid var(--ui-line); border-radius: 10px; }
.invoice-register__table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.invoice-register__table th { padding: 12px 16px; background: var(--ui-raised); color: var(--ui-muted); font-size: .75rem; font-weight: 550; text-align: left; white-space: nowrap; }
.invoice-register__table td { padding: 12px 16px; border-top: 1px solid var(--ui-line); vertical-align: middle; }
.invoice-register__table td:first-child { white-space: nowrap; }
.invoice-register__table td strong { display: block; font-weight: 550; }
.invoice-register__table small { display: block; margin-top: 4px; color: var(--ui-soft); font-size: .75rem; }
.invoice-register__table .invoice-register__amount { text-align: right; white-space: nowrap; }
.invoice-register__number { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.portal-view #summaryPanel .invoice-register__number input { width: 90px; min-width: 70px; padding: 10px 12px; font-variant-numeric: tabular-nums; }
.invoice-register__number > span { color: var(--ui-soft); font-size: .8125rem; white-space: nowrap; }
.portal-view #summaryPanel .invoice-register__table .is-dirty input { border-color: var(--ui-accent); }
.invoice-register__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.invoice-register__footer p { flex: 1; margin: 0; color: var(--ui-muted); font-size: .8125rem; line-height: 1.5; }
.invoice-register__footer p.is-error { color: var(--ui-accent); }
.portal-view #summaryPanel .invoice-register__footer button { flex-shrink: 0; width: auto; min-width: 170px; min-height: 44px; }
.invoice-register__footer button:disabled { opacity: .5; cursor: default; }
.invoice-register__empty { color: var(--ui-muted); text-align: center; }
.invoice-register__scroll:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
@media (max-width: 640px) {
  .invoice-register__header { align-items: stretch; flex-direction: column; }
  .invoice-register__header > .custom-select { flex-basis: auto; }
  .invoice-register__table th, .invoice-register__table td { padding: 12px; }
  .invoice-register__footer { flex-direction: column; align-items: stretch; }
  .portal-view #summaryPanel .invoice-register__footer button { width: 100%; }
}
.portal-view :is(.route-row__summary, .metric-tile, .quick-stat, .summary-list, .driver-profit-bars, .expense-table, .day-stat) { font-variant-numeric: tabular-nums; }
.portal-view .route-row-details { background: var(--ui-raised); border-top: 1px solid var(--ui-line); }
.portal-view .route-meta { gap: 20px 24px; }
.portal-view .route-meta > span { font-size: .875rem; line-height: 1.5; }
.portal-view .route-meta strong { color: var(--ui-muted); font-size: .75rem; font-weight: 500; }
.portal-view .row-action { min-height: 40px; padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); font-size: .8125rem; }
.portal-view .danger-button { color: var(--ui-accent); }
.portal-view .route-row__chevron, .portal-view .route-row.is-expanded .route-row__chevron { animation: none; transform: none; display: inline-flex; }
.portal-view .route-row__chevron .ui-icon { transition: transform 200ms var(--ui-ease); }
.portal-view .route-row.is-expanded .route-row__chevron .ui-icon { transform: rotate(180deg); }
.portal-view .route-row.is-expanded .route-row-details { animation: ui-reveal 200ms var(--ui-ease) both; }
.portal-view .route-row.is-just-saved { outline: 1px solid var(--ui-success); outline-offset: -1px; animation: ui-saved 1400ms var(--ui-ease); }
.portal-view .route-feedback { border: 1px solid color-mix(in oklch, var(--ui-success) 40%, var(--ui-line)); color: var(--ui-ink); background: color-mix(in oklch, var(--ui-success) 9%, var(--ui-surface)); border-radius: 8px; padding: 12px 16px; animation: ui-reveal 180ms var(--ui-ease); }
.portal-view .route-feedback::before { content: ""; width: 20px; height: 20px; flex: 0 0 20px; background: var(--ui-success); mask: var(--icon-circle-check) center/contain no-repeat; }
/* Filters stay visible while their detailed controls can collapse. */
.route-quickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 0 0 20px; }
.route-quick-presets, .active-route-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.active-route-filters:empty { display: none; }
.route-quickbar button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--ui-line); border-radius: 7px; background: transparent; color: var(--ui-muted); font-size: .8125rem; line-height: 1.4; }
.route-quickbar button[aria-pressed="true"] { color: var(--ui-ink); border-color: color-mix(in oklch, var(--ui-accent) 65%, var(--ui-line)); background: color-mix(in oklch, var(--ui-accent) 12%, var(--ui-surface)); }
.active-route-filters button { max-width: 100%; text-align: left; overflow-wrap: anywhere; background: var(--ui-raised); }
.active-route-filters button::after { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor; mask: var(--icon-x) center/contain no-repeat; }
/* Consistent control states across forms, reports, and floating controls. */
button { -webkit-tap-highlight-color: transparent; transition: background-color 150ms var(--ui-ease), border-color 150ms var(--ui-ease), color 150ms var(--ui-ease), transform 120ms var(--ui-ease); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:not(:disabled):active { transform: scale(.98); }
:where(button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
.portal-view .route-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.portal-view :is(input:not([type="checkbox"]), .custom-date__button, .custom-select__button) { border-color: var(--ui-line); border-radius: 8px; background: var(--ui-surface); color: var(--ui-ink); min-height: 44px; }
.portal-view input::placeholder { color: var(--ui-soft); opacity: 1; }
.portal-view :is(input, .custom-date__button, .custom-select__button):focus-visible { border-color: var(--ui-accent); }
.portal-view :is(.route-editor, .expense-form) label { color: var(--ui-muted); font-size: .8125rem; }
.portal-view .field-note { color: var(--ui-soft); font-size: .75rem; }
.portal-view .route-editor__description { font-size: .8125rem; color: var(--ui-muted); }
.portal-view .route-editor .form-actions { background: var(--ui-raised); border-top: 1px solid var(--ui-line); }
.portal-view .route-form-section { border-color: var(--ui-line); }
.custom-select__list, .custom-date__panel { background: var(--ui-raised); border: 1px solid var(--ui-line); box-shadow: 0 12px 32px oklch(10% .006 250 / .3); border-radius: 10px; color: var(--ui-ink); }
.custom-select__option { min-height: 40px; }
.custom-select__option[aria-selected="true"] { background: color-mix(in oklch, var(--ui-accent) 12%, var(--ui-raised)); }
.custom-select__list.is-open, .custom-date__panel.is-open { animation: ui-reveal 150ms var(--ui-ease); }
.custom-select__icon, .custom-date__icon { display: inline-flex; align-items: center; justify-content: center; border: 0 !important; background: none !important; width: 18px !important; height: 18px !important; transform: none; }
.custom-select__icon::before, .custom-select__icon::after, .custom-date__icon::before, .custom-date__icon::after { content: none !important; }
.custom-select.is-open .custom-select__icon { transform: rotate(180deg); }
.custom-date__header button { display: inline-flex; align-items: center; justify-content: center; }
.portal-view .route-editor-toggle__mark::before, .portal-view .route-editor-toggle__mark::after, .login-submit__arrow::before, .login-submit__arrow::after { content: none !important; }
.portal-view .route-editor-toggle .route-editor-toggle__mark .ui-icon { width: 24px; height: 24px; }
.login-submit__arrow { width: 24px !important; display: inline-flex; align-items: center; }
.login-submit__arrow .ui-icon { width: 24px; height: 24px; }
#saveRouteButton::after { content: ""; background: currentColor; mask: var(--icon-check) center/contain no-repeat; border-radius: 0; }
#saveRouteButton:not(.is-route-saved)::before { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin-right: 8px; background: currentColor; mask: var(--icon-save) center/contain no-repeat; }
#saveRouteButton.is-route-saving::before { mask-image: var(--icon-loader-circle); animation: data-backup-spin 800ms linear infinite; }
.menu-close-icon { display: none; }
#menuButton[aria-expanded="true"] .menu-open-icon { display: none; }
#menuButton[aria-expanded="true"] .menu-close-icon { display: inline-block; }
#menuButton .ui-icon { width: 24px; height: 24px; }
.portal-view :is(.metric-tile, .summary-card, .driver-profit-card, .data-backup-panel) { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: none; }
.portal-view :is(.summary-row, .expense-table tr) { border-color: var(--ui-line); }
.portal-view .driver-profit-bar strong { text-align: right; font-variant-numeric: tabular-nums; }
.portal-view .driver-profit-bar i { transform-origin: left; animation: ui-bar 220ms var(--ui-ease); }
.portal-view .bar-chart__bar { transform-origin: bottom; animation: ui-bar-vertical 220ms var(--ui-ease); }
.portal-view .driver-profit-bar--revenue i { background: var(--ui-muted); }
.portal-view .driver-profit-bar--costs i { background: var(--ui-warning); }
.portal-view .driver-profit-bar--profit i { background: var(--ui-success); }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel, #auditPanel):not(.hidden) { animation: ui-reveal 180ms var(--ui-ease); }
.portal-view .empty-state { padding: 40px 24px; border: 1px dashed var(--ui-line); border-radius: 12px; background: transparent; color: var(--ui-muted); }
.portal-view .empty-state h3 { color: var(--ui-ink); }
.portal-view .tabs-indicator { transition: transform 200ms var(--ui-ease); }
@media (hover: hover) {
  .portal-view .route-row:hover { background: var(--ui-hover); }
  .route-quickbar button:hover, .portal-view .row-action:hover { background: var(--ui-hover); border-color: var(--ui-soft); }
  .portal-view .tab:not(.active):hover { background: var(--ui-hover); }
}
@media (min-width: 981px) {
  .portal-view #routesPanel .route-editor { transition: transform 240ms var(--ui-ease), opacity 180ms var(--ui-ease), visibility 240ms; }
  .portal-view .day-header h3 { font-size: 1.3rem; }
  .portal-view .topbar { gap: 16px; }
  .portal-view .tab { padding-inline: 12px; }
  .portal-view .day-group { margin-bottom: 24px; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .portal-view .tab { font-size: .75rem; padding-inline: 8px; gap: 5px; }
  .portal-view .tab .ui-icon { width: 15px; height: 15px; flex-basis: 15px; }
}
@media (max-width: 980px) {
  .portal-view #routesPanel { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .route-quickbar { padding: 12px 12px 20px; gap: 10px; }
  .route-quickbar button { min-height: 44px; font-size: .8125rem; }
  .route-quick-presets { gap: 6px; }
  .route-quick-presets button { padding-inline: 10px; }
  .portal-view .route-row__main { padding-block: 20px; }
  .portal-view .day-header { padding-block: 14px; }
  .portal-view .day-header h3 { font-size: 1.25rem; }
  .portal-view .route-stop strong { font-size: 1.0625rem; }
  .portal-view .route-stop .route-place-address, .portal-view .route-row__party { font-size: .875rem; }
  .portal-view .route-meta > span { font-size: .875rem; }
  .portal-view :is(.row-action, .route-editor-close, .custom-date__day, .route-suggestion-apply, .secondary-button, .primary-button) { min-height: 44px; }
  .portal-view .route-editor :is(input, .custom-select__button, .custom-date__button), .portal-view .expense-form input { font-size: 1rem; }
  .portal-view .route-editor-toggle { transition: background-color 160ms var(--ui-ease), transform 160ms var(--ui-ease); box-shadow: 0 4px 18px oklch(10% .006 250 / .3); }
  .portal-view .route-feedback { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .portal-view .route-feedback > span { flex: 1; min-width: 180px; }
  .portal-view .tabs .tab { justify-content: flex-start; gap: 12px; min-height: 48px; }
}
@keyframes ui-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-saved { from { background: color-mix(in oklch, var(--ui-success) 18%, var(--ui-surface)); } to { background: var(--ui-surface); } }
@keyframes ui-bar { from { transform: scaleX(.96); opacity: .5; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ui-bar-vertical { from { transform: scaleY(.94); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Resolve legacy navigation and glyph rules without changing their behavior. */
.portal-view { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.portal-view .tab { background: transparent; }
.portal-view .day-header::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; right: 18px; border: 0; background: var(--ui-muted); mask: var(--icon-chevron-down) center/contain no-repeat; transform: translateY(-50%) rotate(180deg); transition: transform 180ms var(--ui-ease); }
.portal-view .day-group.is-collapsed .day-header::after { transform: translateY(-50%); }
.portal-view .native-control { min-height: 0 !important; }
.portal-view .topbar-add-route { transition: background-color 150ms var(--ui-ease), transform 120ms var(--ui-ease); }
@media (min-width: 981px) {
  .portal-view #menuButton, .portal-view #mobileLogoutButton { display: none; }
  .portal-view .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-radius: 14px; padding: 8px 12px 8px 18px; }
  .portal-view .topbar-brand { min-width: 112px; flex: 0 0 auto; }
  .portal-view .tabs { flex: 1 1 auto; min-width: 0; gap: 2px; }
  .portal-view .session-box { flex: 0 0 auto; margin-left: 0; gap: 8px; }
  .portal-view .topbar-add-route, .portal-view .topbar-add-route:hover, .portal-view .topbar-add-route:focus-visible { width: 128px; border-radius: 8px; }
  .portal-view .topbar-add-route .topbar-add-route__text { position: static; opacity: 1; padding-left: 12px; }
  .portal-view .topbar-add-route .topbar-add-route__icon { width: 30px; }
  .portal-view .logout-button { border-radius: 8px; padding-inline: 10px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .portal-view .logout-button > span { display: none; }
  .portal-view .topbar-brand { min-width: 96px; }
  .portal-view .brand-logo--topbar { max-width: 140px; }
}
@media (max-width: 980px) {
  .portal-view .topbar .session-box { display: none; }
}
.portal-view .tabs { position: relative; }
.portal-view .tabs-indicator { border-radius: 8px; background: var(--ui-raised); box-shadow: none; }
.portal-view #routesPanel .route-editor { background: var(--ui-surface); }
.portal-view #routesPanel .route-editor__header { grid-template-columns: minmax(0, 1fr) auto auto; justify-items: start; text-align: left; background: var(--ui-surface); }
.portal-view .route-editor__header > div { width: 100%; text-align: left; }
.portal-view .route-editor__description { max-width: none; }
.portal-view .route-editor label { text-transform: none; letter-spacing: 0; font-weight: 500; }
.portal-view #saveRouteButton:not(.is-route-saved)::before { display: inline-block; position: static; inset: auto; opacity: 1; transform: none; background: currentColor; }
.portal-view #saveRouteButton.is-route-saving::before { animation: data-backup-spin 800ms linear infinite; }
.portal-view :is(.primary-button, .secondary-button, .ghost-button), .portal-view .route-editor .form-actions :is(.primary-button, .secondary-button) { border-radius: 8px; font-weight: 600; }
.portal-view .route-editor-toggle { border-radius: 999px; }
.portal-view .route-register-summary { gap: 0; border-block: 1px solid var(--ui-line); padding-block: 16px; margin-block: 4px 24px; }
.portal-view .route-register-summary .metric-tile { border: 0; border-right: 1px solid var(--ui-line); border-radius: 0; padding: 4px 16px; background: transparent; }
.portal-view .route-register-summary .metric-tile:last-child { border-right: 0; }
.portal-view .route-register-summary .metric-tile > span { font-size: .6875rem; color: var(--ui-soft); font-weight: 550; letter-spacing: .04em; }
.portal-view .route-register-summary .metric-tile strong { font-size: 1.125rem; font-weight: 600; }
.portal-view .route-list .list-toolbar > .toolbar-controls { background: transparent; }
.custom-select__button, .custom-date__button { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.custom-select__option[aria-selected="true"]::after { content: ""; display: block; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; mask: var(--icon-check) center/contain no-repeat; }
.custom-select__list--multiple .custom-select__option[aria-selected="true"]::before { background: var(--ui-accent); mask: var(--icon-check) center/contain no-repeat; border: 0; }
.portal-view .driver-profit-bar--loss i { background: var(--ui-accent); }
@media (min-width: 1280px) {
  .portal-view .toolbar-controls { grid-template-columns: minmax(170px, 1.6fr) minmax(160px, 1.2fr) minmax(260px, 1.8fr) minmax(100px, .8fr) minmax(100px, .8fr) minmax(125px, 1fr) auto; }
  .portal-view .route-date-range__dates .custom-date__button { gap: 6px; padding-inline: 8px; font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-view #saveRouteButton.is-route-saving::before { animation: none; }
}
@media (max-width: 980px) {
  .portal-view .topbar { min-height: 56px; height: 56px; border-radius: 14px; }
  .portal-view .tabs { position: absolute; background: var(--ui-raised); border: 1px solid var(--ui-line); padding: 6px; border-radius: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .portal-view .tabs-indicator { display: none; }
  .portal-view .topbar .menu-button { margin-left: auto; }
  .portal-view .day-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px 16px; gap: 0; }
  .portal-view .day-stat { min-height: 40px; padding: 8px 0; border: 0; gap: 8px; align-items: center; }
  .portal-view .day-stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--ui-line); }
  .portal-view .day-stat strong, .portal-view .day-stat em { white-space: normal; overflow-wrap: normal; }
  .portal-view .route-row__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .portal-view .route-row__party { width: 100%; min-width: 0; grid-column: 1; }
  .portal-view .route-row__party > span { white-space: normal; text-overflow: clip; overflow: visible; }
  .portal-view .route-row__summary { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
  .portal-view .route-row__distance { text-align: left; }
  .portal-view .route-row__amount { margin-left: auto; }
  .portal-view .route-register-summary { display: none; }
}
/* Reports and costs share the same surfaces and hierarchy as the register. */
.portal-view {
  --ledger-surface: var(--ui-surface);
  --ledger-surface-raised: var(--ui-raised);
  --ledger-surface-hover: var(--ui-hover);
  --ledger-line: var(--ui-line);
  --ledger-line-soft: var(--ui-line);
  --ledger-copy: var(--ui-ink);
  --ledger-muted: var(--ui-muted);
  --ledger-soft: var(--ui-soft);
  --ledger-accent: var(--ui-accent);
}
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel, #auditPanel) :is(.summary-header, .section-title) { padding: 16px 0 24px; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; background: transparent; box-shadow: none; }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel, #auditPanel) :is(.summary-header, .section-title) h2 { font-size: 1.65rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 650; }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel) :is(input:not(.native-control), .custom-date__button, .custom-select__button) { min-height: 44px; background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink); }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel) :is(.export-routes-button, .primary-button, .secondary-button) { border-radius: 8px; font-size: .875rem; font-weight: 600; }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel) :is(.export-routes-panel, .expense-form, .expense-list-panel, .summary-chart, .summary-card, .driver-profit-card) { background: var(--ui-surface); border-color: var(--ui-line); box-shadow: none; border-radius: 12px; }
.portal-view :is(#summaryPanel, #expensesPanel, #statsPanel) :is(.metric-tile strong, .summary-row strong, .expense-row strong) { font-variant-numeric: tabular-nums; }
.portal-view #statsPanel .driver-profit-bar--costs i { background: var(--ui-warning); }
.portal-view #statsPanel .driver-profit-bar--revenue i { background: var(--ui-muted); }
.portal-view #statsPanel .driver-profit-bar--profit i { background: var(--ui-success); }
.portal-view #statsPanel .driver-profit-bar--loss i { background: var(--ui-accent); }
.portal-view #statsPanel .driver-profit-card .is-profit { color: var(--ui-success); }
.portal-view #statsPanel .driver-profit-card .is-loss { color: var(--ui-accent); }
.portal-view #statsPanel .driver-profit-bar { grid-template-columns: minmax(90px, .8fr) minmax(0, 1fr) minmax(100px, auto); }
.portal-view .rank-chart__track > span { transform-origin: left; animation: ui-bar 220ms var(--ui-ease); }
.portal-view .empty-state::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 12px; background: var(--ui-muted); mask: var(--icon-route) center/contain no-repeat; }
.portal-view .empty-mini { color: var(--ui-muted); font-size: .875rem; line-height: 1.5; }
.portal-view .route-editor-backdrop { transition: opacity 200ms var(--ui-ease), visibility 200ms; }
@media (max-width: 980px) {
  .portal-view :is(#summaryPanel, #expensesPanel, #statsPanel, #auditPanel) :is(.summary-header, .section-title) { padding: 12px 8px 24px; }
  .portal-view :is(#summaryPanel, #expensesPanel, #statsPanel, #auditPanel) :is(.summary-header, .section-title) h2 { font-size: 1.5rem; }
  .portal-view #routesPanel .route-editor { transition: transform 240ms var(--ui-ease), opacity 180ms var(--ui-ease); }
  .portal-view #routesPanel .route-editor-toggle { left: max(12px, env(safe-area-inset-left)); right: auto; bottom: max(16px, env(safe-area-inset-bottom)); width: calc(100% - 84px); min-width: 0; height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; background: var(--ui-accent); color: var(--ui-page); }
  .portal-view #routesPanel .route-editor-toggle .route-editor-toggle__label { position: static; width: auto; max-width: none; opacity: 1; visibility: visible; transform: none; font-size: .875rem; }
  .portal-view #routesPanel .route-editor-toggle .route-editor-toggle__mark { position: static; width: 20px; height: 20px; flex: 0 0 20px; }
  .portal-view .route-list .list-toolbar { bottom: max(16px, env(safe-area-inset-bottom)); }
  .portal-view #routesPanel.is-route-editor-open .route-editor-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px) {
  .portal-view .route-list .list-toolbar,
  .portal-view .route-list .list-toolbar.is-filter-open,
  .portal-view .route-list .list-toolbar:not(.is-filter-open) {
    width: 50px; height: 50px; min-height: 50px; max-height: 50px; overflow: visible; border: 0; background: transparent !important; box-shadow: none; transition: none; will-change: auto;
  }
  .portal-view .route-list .list-toolbar > .filter-toggle,
  .portal-view .route-list .list-toolbar.is-filter-open > .filter-toggle,
  .portal-view .route-list .list-toolbar:not(.is-filter-open) > .filter-toggle {
    z-index: 3; width: 50px; height: 50px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-raised) !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .portal-view .route-list .list-toolbar > .filter-toggle .filter-toggle__icons,
  .portal-view .route-list .list-toolbar.is-filter-open > .filter-toggle .filter-toggle__icons {
    top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); transition: none;
  }
  .portal-view .route-list .list-toolbar > .toolbar-controls,
  .portal-view .route-list .list-toolbar.is-filter-open > .toolbar-controls {
    position: absolute; inset: auto 0 62px auto; display: grid; width: min(340px, calc(100vw - 28px)); height: auto; max-height: calc(100dvh - 170px); padding: 12px; gap: 10px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-raised); overflow-y: auto; pointer-events: auto; transform: none;
  }
  .portal-view .route-list .list-toolbar:not(.is-filter-open) > .toolbar-controls { visibility: hidden; opacity: 0; pointer-events: none; }
  .portal-view .route-list .list-toolbar.is-filter-open > .toolbar-controls { visibility: visible; opacity: 1; animation: ui-reveal 180ms var(--ui-ease); }
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field > :is(label, .filter-field__label) { position: static; display: block; width: auto; height: auto; margin: 0 0 5px; clip: auto; clip-path: none; overflow: visible; white-space: normal; color: var(--ui-muted); font-size: .75rem; text-transform: none; letter-spacing: 0; }
  .portal-view .route-list .list-toolbar > .toolbar-controls > * { border: 0; }
  .portal-view #routesPanel .route-editor-toggle { background: var(--ui-accent) !important; background-image: none !important; color: var(--ui-page) !important; }
  .portal-view #routesPanel .route-editor-toggle::before { content: none; }
  .portal-view #routesPanel .route-editor-toggle .route-editor-toggle__mark,
  .portal-view #routesPanel .route-editor-toggle.is-compact .route-editor-toggle__mark { display: grid !important; opacity: 1 !important; color: inherit !important; }
  .portal-view #routesPanel .route-editor-toggle .route-editor-toggle__label,
  .portal-view #routesPanel .route-editor-toggle.is-compact .route-editor-toggle__label { display: block; color: inherit !important; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-view .route-list .list-toolbar.is-filter-open > .toolbar-controls { animation: none; }
}

/* Mobile filters: a readable search flow with optional details. */
.mobile-filter-heading, .mobile-filter-more, .mobile-filter-results { display: none; }
@media (max-width: 980px) {
  .portal-view .route-list .list-toolbar,
  .portal-view .route-list .list-toolbar.is-filter-open,
  .portal-view .route-list .list-toolbar:not(.is-filter-open),
  .portal-view .route-list .list-toolbar > .filter-toggle,
  .portal-view .route-list .list-toolbar.is-filter-open > .filter-toggle,
  .portal-view .route-list .list-toolbar:not(.is-filter-open) > .filter-toggle { width: 104px; }
  .portal-view .route-list .list-toolbar > .filter-toggle { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 14px; }
  .portal-view .route-list .list-toolbar > .filter-toggle .filter-toggle__icons,
  .portal-view .route-list .list-toolbar.is-filter-open > .filter-toggle .filter-toggle__icons { position: relative; inset: auto; transform: none; flex: 0 0 20px; width: 20px; height: 20px; }
  .filter-toggle__label { font-size: 14px; font-weight: 650; }
  .filter-toggle.has-active-filters::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-accent); position: absolute; right: 8px; top: 8px; }
  .portal-view .route-list .list-toolbar > .toolbar-controls,
  .portal-view .route-list .list-toolbar.is-filter-open > .toolbar-controls {
    display: flex; flex-direction: column; gap: 20px; width: min(420px, calc(100vw - 28px));
    max-height: calc(100dvh - 150px); padding: 22px 20px 0; border-radius: 18px;
    overscroll-behavior: contain; box-shadow: 0 16px 48px rgb(0 0 0 / .28);
  }
  .portal-view .route-list .list-toolbar > .toolbar-controls > * { flex-shrink: 0; min-width: 0; }
  .mobile-filter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; order: -1; }
  .mobile-filter-heading h3 { margin: 0; font-size: 20px; font-weight: 650; color: var(--ui-ink); letter-spacing: -.025em; }
  .mobile-filter-heading p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ui-muted); }
  .portal-view .mobile-filter-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); font-size: 28px; box-shadow: none; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field { min-height: 0; padding: 0; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field > :is(label, .filter-field__label) { margin-bottom: 8px; color: var(--ui-ink); font-size: 13px; font-weight: 550; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field input,
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field .custom-select__button,
  .portal-view .route-list .list-toolbar > .toolbar-controls .custom-date__button { height: 48px; min-height: 48px; font-size: 16px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); }
  .portal-view .route-list .list-toolbar > .toolbar-controls .route-date-range__dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .custom-date { min-width: 0; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .custom-date__button { padding: 0 10px; font-size: 14px; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .mobile-filter-more { display: flex; order: 1; align-items: center; justify-content: space-between; width: 100%; min-height: 58px; padding: 14px 0 0; border-top: 1px solid var(--ui-line); border-radius: 0; background: transparent; color: var(--ui-ink); text-align: left; box-shadow: none; font-size: 14px; }
  .mobile-filter-more small { display: block; margin-top: 5px; color: var(--ui-muted); font-size: 12px; font-weight: 400; }
  .mobile-filter-more[aria-expanded="true"] svg { transform: rotate(180deg); }
  .portal-view .route-list .list-toolbar > .toolbar-controls .filter-field--secondary,
  .portal-view .route-list .list-toolbar > .toolbar-controls .route-view-action--mobile { display: none; order: 2; }
  .portal-view .route-list .list-toolbar > .toolbar-controls.show-secondary-filters .filter-field--secondary { display: block; }
  .portal-view .route-list .list-toolbar > .toolbar-controls.show-secondary-filters .route-view-action--mobile { display: flex; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .clear-route-filters { order: 3; min-height: 44px; justify-content: center; border-radius: 10px; color: var(--ui-muted); }
  .portal-view .route-list .list-toolbar > .toolbar-controls .clear-route-filters:disabled { display: none; }
  .portal-view .route-list .list-toolbar > .toolbar-controls .mobile-filter-results { display: block; order: 4; position: sticky; bottom: 0; width: 100%; min-height: 48px; margin: 0 0 20px; border-radius: 10px; background: var(--ui-accent); color: var(--ui-page); font-size: 15px; font-weight: 650; box-shadow: 0 0 0 10px var(--ui-raised); }
}
@media (max-width: 980px) {
  .portal-view #routesPanel .route-editor-toggle { width: calc(100% - 138px); }
  .portal-view .route-list .list-toolbar > .filter-toggle,
  .portal-view .route-list .list-toolbar.is-filter-open > .filter-toggle,
  .portal-view .route-list .list-toolbar:not(.is-filter-open) > .filter-toggle { flex-direction: row; text-transform: none; letter-spacing: 0; }
  .portal-view .route-list .list-toolbar > .toolbar-controls #searchInput { padding-right: 12px; }
}
@media (min-width: 981px) {
  .portal-view .route-list .list-toolbar > .toolbar-controls > :is(.mobile-filter-heading, .mobile-filter-more, .mobile-filter-results) { display: none; }
}
@media (max-width: 980px) {
  .portal-view .route-list .list-toolbar > .filter-toggle { display: flex !important; }
  .portal-view .route-list .list-toolbar:not(.is-filter-open) > .filter-toggle .filter-toggle__icons { position: relative; inset: auto; transform: none; }
}

/* The register totals remain readable on a phone, above the day groups. */
.route-summary-mobile-title { display: none; }
@media (max-width: 980px) {
  .portal-view .route-register-summary:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0 12px 24px;
    padding: 18px 0;
    border-block: 1px solid var(--ui-line);
  }
  .portal-view .route-register-summary .route-summary-mobile-title {
    display: block;
    grid-column: 1 / -1;
    margin: 0 0 2px;
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 550;
    letter-spacing: 0;
  }
  .portal-view .route-register-summary .metric-tile {
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .portal-view .route-register-summary .metric-tile > span {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ui-muted);
  }
  .portal-view .route-register-summary .metric-tile strong {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--ui-ink);
  }
}

/* A calendar marks only the selected quick period. */
.route-quick-presets button[aria-pressed="false"] .ui-icon { display: none; }

/* Short, consistent feedback across pointer, keyboard and touch interactions. */
:root { --ui-motion-fast: 120ms; --ui-motion-normal: 180ms; }
:where(button, a, input, textarea, .route-row) { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}
:where(button):not(:disabled) {
  transition: background-color var(--ui-motion-normal) var(--ui-ease),
    border-color var(--ui-motion-normal) var(--ui-ease),
    color var(--ui-motion-normal) var(--ui-ease),
    opacity var(--ui-motion-fast) var(--ui-ease),
    scale var(--ui-motion-fast) var(--ui-ease);
}
:where(button):not(:disabled):active { scale: .98; }
:where(input, textarea) {
  transition: border-color var(--ui-motion-normal) var(--ui-ease),
    background-color var(--ui-motion-normal) var(--ui-ease),
    box-shadow var(--ui-motion-normal) var(--ui-ease);
}
.custom-select__option:disabled { opacity: .45; cursor: not-allowed; }
.custom-select__icon, .custom-date__icon, .route-row__chevron .ui-icon {
  transition: transform var(--ui-motion-normal) var(--ui-ease);
}
.custom-select.is-open .custom-select__icon { transform: rotate(180deg); }
.portal-view #routesPanel:not(.hidden) { animation: ui-reveal 180ms var(--ui-ease); }
.error:not(:empty), .route-suggestion-card:not(.hidden),
.autocomplete-suggestions:not(.hidden) { animation: ui-reveal 180ms var(--ui-ease); }
@media (hover: hover) and (pointer: fine) {
  .portal-view .route-row { transition: background-color 180ms var(--ui-ease), border-color 180ms var(--ui-ease); }
  .custom-select__option, .custom-date__day { transition: background-color 120ms var(--ui-ease), color 120ms var(--ui-ease); }
}
@media (max-width: 980px) {
  .topbar.is-menu-open #topbarMenu { animation: ui-reveal 180ms var(--ui-ease); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :where(button):not(:disabled):active { scale: none; }
}

/* Dolo Drive review queue */
.drive-submissions-banner { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; margin-bottom: 28px; border: 1px solid var(--ui-line); border-radius: 12px; background: transparent; }
.drive-submissions-banner[hidden], .drive-review[hidden] { display: none !important; }
.drive-submissions-copy { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 4px; min-width: 0; }
.drive-submissions-banner h2 { font-size: 14px; line-height: 1.4; font-weight: 550; letter-spacing: -.01em; margin: 0; }
.drive-submissions-banner p { font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0; }
.drive-check-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.drive-check-link:hover { background: transparent; }
.drive-check-link:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.drive-check-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drive-check-link > span:last-child { color: var(--muted); }
/* Review screens reuse the portal typography and flat surfaces. */
.portal-view .route-list.is-reviewing { padding: 0; }
.route-list.is-reviewing > :not(#driveReview) { display: none !important; }
.workspace.is-drive-review > #mobileRouteFormToggle { display: none !important; }
.drive-review { width: 100%; max-width: 1080px; margin-inline: auto; padding-block: 12px 64px; }
.drive-review [hidden], .drive-approval-context[hidden] { display: none !important; }
.drive-review-navigation { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drive-text-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; border-radius: 4px; background: transparent; color: var(--ui-muted); font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.drive-text-action:hover { background: transparent; color: var(--ui-ink); }
.drive-review-heading { margin: 24px 0 28px; }
.drive-review-heading .eyebrow { font-size: 11px; font-weight: 550; margin: 0 0 10px; color: var(--ui-soft); }
.drive-review-title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.drive-review-title-line h2 { margin: 0; font-size: 28px; font-weight: 650; line-height: 1.2; letter-spacing: -.03em; }
#driveReviewCount { color: var(--ui-soft); font-size: 12px; white-space: nowrap; }
.drive-review-description { max-width: 68ch; font-size: 14px; line-height: 1.6; color: var(--ui-muted); margin: 12px 0 0; }
.drive-review-status, .drive-review-error { padding: 12px 14px; margin: 0 0 20px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-surface); color: var(--ui-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.drive-review-error { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 30%, var(--ui-line)); }
.drive-review-error:empty { display: none; }
#driveReviewRows { border-top: 1px solid var(--ui-line); }
.drive-review-row { padding: 22px 0 24px; border-bottom: 1px solid var(--ui-line); scroll-margin-top: 110px; }
.drive-review-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.drive-review-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; min-width: 0; }
.drive-review-identity strong { font-size: 14px; font-weight: 600; color: var(--ui-ink); }
.drive-review-identity > span, .drive-no-documents { font-size: 12px; color: var(--ui-soft); }
.drive-no-documents { white-space: nowrap; }
.drive-documents-link { color: var(--ui-muted); flex: 0 0 auto; }
.drive-documents-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.drive-review-stops { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: start; gap: 24px; margin: 20px 0 24px; }
.drive-review-stop { display: grid; gap: 7px; min-width: 0; }
.drive-stop-label { font-size: 10px; font-weight: 550; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-soft); }
.drive-review-stop > strong { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; overflow-wrap: anywhere; color: var(--ui-ink); }
.drive-review-stop .route-place-line { display: block; }
.drive-review-stop .route-place-address { margin-top: 5px; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ui-muted); }
.drive-review-stop time { font-size: 12px; color: var(--ui-muted); line-height: 1.4; font-variant-numeric: tabular-nums; }
.drive-review-arrow { align-self: center; text-align: center; color: var(--ui-soft); font-size: 20px; }
.drive-review-actions, .drive-merge-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.portal-view .drive-review :is(.primary-button, .secondary-button) { width: auto; flex: 0 0 auto; min-height: 44px; margin: 0; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 550; line-height: 1.4; }
.drive-review-actions .drive-reject { color: var(--ui-muted); margin-left: auto; padding-inline: 8px; }
.drive-review-actions .drive-reject:hover { color: var(--danger); }
.drive-review-row.is-merging > .drive-review-actions { display: none; }
.drive-merge-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ui-line); scroll-margin-top: 110px; }
.drive-merge-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.drive-merge-heading h3 { font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; }
.drive-merge-heading p { color: var(--ui-muted); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.drive-merge-heading .drive-text-action { min-height: 32px; padding-top: 2px; flex-shrink: 0; }
.portal-view .drive-merge-search-field { position: relative; display: block; margin: 0 0 12px; color: var(--ui-soft); }
.drive-merge-search-field svg { position: absolute; top: 15px; left: 14px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; pointer-events: none; }
.portal-view .drive-merge-search { display: block; width: 100%; min-height: 48px; padding: 12px 14px 12px 42px; font-size: 14px; }
.drive-merge-candidates { padding: 0; margin: 0; border: 0; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
.portal-view .drive-merge-option { display: flex; align-items: center; gap: 14px; padding: 16px 12px; margin: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; cursor: pointer; color: var(--ui-ink); font-weight: 400; text-transform: none; letter-spacing: 0; transition: background-color 150ms var(--ui-ease); }
.drive-merge-option:hover { background: var(--ui-surface); }
.drive-merge-option:has(input:checked) { background: var(--ui-raised); }
.portal-view .drive-merge-option input[type="radio"] { appearance: none; width: 16px; height: 16px; min-height: 16px; padding: 0; margin: 0; flex: 0 0 16px; border: 1px solid var(--ui-soft); border-radius: 50%; background: transparent; }
.portal-view .drive-merge-option input[type="radio"]:checked { border-color: var(--ui-accent); background: var(--ui-accent); box-shadow: inset 0 0 0 3px var(--ui-raised); }
.portal-view .drive-merge-option input[type="radio"]:focus-visible { outline: none; }
.drive-merge-option:has(input:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.drive-merge-option-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
.drive-merge-option-title { font-size: 14px; line-height: 1.5; font-weight: 550; overflow-wrap: anywhere; }
.drive-merge-option-title > span { color: var(--ui-soft); padding-inline: 4px; }
.drive-merge-option-meta { color: var(--ui-soft); font-size: 12px; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.drive-merge-option-amount { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ui-muted); align-self: start; margin-top: 2px; }
.drive-merge-no-results { color: var(--ui-muted); margin: 24px 0; font-size: 13px; }
.drive-merge-preview { padding: 18px 0 0; margin-top: 20px; border-top: 1px solid var(--ui-line); }
.drive-merge-preview-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.drive-merge-preview-heading strong { font-size: 13px; font-weight: 600; }
.drive-merge-preview-heading > span { color: var(--ui-soft); font-size: 12px; }
.drive-merge-preview .drive-review-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 18px 0 16px; }
.drive-merge-preview .drive-review-stop > strong { font-size: 17px; }
.drive-merge-retained { font-size: 13px; line-height: 1.5; color: var(--ui-ink); margin: 0 0 6px; overflow-wrap: anywhere; }
.drive-merge-note { font-size: 12px; line-height: 1.6; color: var(--ui-muted); max-width: 68ch; margin: 0; }
.drive-merge-footer { padding-top: 22px; }
.drive-merge-empty { padding: 20px 0 4px; }
.drive-merge-empty > strong { font-size: 15px; font-weight: 600; }
.drive-merge-empty p { color: var(--ui-muted); font-size: 13px; line-height: 1.6; max-width: 60ch; margin: 8px 0 18px; }
.drive-review-empty { padding: 64px 16px; text-align: center; }
.drive-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 16px; color: var(--ui-success); background: var(--ui-surface); border-radius: 8px; font-size: 18px; }
.drive-review-empty h3 { font-size: 20px; letter-spacing: -.025em; font-weight: 600; }
.drive-review-empty p { color: var(--ui-muted); font-size: 14px; line-height: 1.5; margin: 10px 0 24px; }
.drive-approval-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; margin: 0 24px 20px; padding: 16px 0; border-block: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-soft); }
.drive-approval-context > span:first-child { grid-column: 1; }
.drive-approval-context > strong { grid-column: 1; color: var(--ui-ink); font-size: 14px; font-weight: 550; }
.drive-approval-context > span:last-child { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; }
.portal-view .route-editor.is-drive-approval .custom-select.is-disabled .custom-select__button { opacity: .8; }
.drive-submissions-banner > button { width: auto; flex: 0 0 auto; }
@media (max-width: 600px) {
  .drive-submissions-banner { padding: 10px 12px; gap: 12px; }
  .drive-submissions-copy { flex-direction: column; align-items: flex-start; gap: 3px; }
  .drive-review { padding-block: 4px 40px; }
  .drive-review-heading { margin-top: 18px; margin-bottom: 24px; }
  .drive-review-title-line { gap: 8px; }
  .drive-review-title-line h2 { font-size: 24px; }
  .drive-review-meta { align-items: start; gap: 12px; }
  .drive-review-identity { flex-direction: column; align-items: flex-start; gap: 4px; }
  .drive-review-meta .drive-text-action { min-height: 32px; padding-top: 0; }
  .drive-review-stops { gap: 12px; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); margin-block: 20px; }
  .drive-review-stop > strong { font-size: 18px; }
  .drive-review-stop .route-place-address { font-size: 12px; }
  .drive-review-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .portal-view .drive-review-actions > .primary-button { grid-column: 1 / -1; width: 100%; }
  .portal-view .drive-review-actions > .secondary-button { width: 100%; }
  .drive-review-actions .drive-reject { margin-left: 0; justify-self: end; }
  .drive-merge-heading { gap: 12px; }
  .drive-merge-heading .drive-text-action { font-size: 12px; }
  .drive-merge-option-amount { display: none; }
  .portal-view .drive-merge-option { padding-inline: 8px; gap: 12px; }
  .drive-merge-option-title { font-size: 13px; }
  .drive-merge-option-meta { font-size: 11px; }
  .drive-merge-preview .drive-review-stops { gap: 20px; }
  .drive-merge-preview .drive-review-stop > strong { font-size: 16px; }
  .drive-merge-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .portal-view .drive-merge-footer .primary-button { width: 100%; }
  .drive-approval-context { margin-inline: 20px; }
}

/* Align the review form with the editor's field grid. */
.portal-view #routesPanel .route-editor.is-drive-approval .route-editor__header,
.portal-view #routesPanel .route-editor.is-drive-approval .route-editor__description,
.portal-view #routesPanel .route-editor.is-drive-approval .drive-approval-context { align-self: stretch; width: auto; max-width: none; }
.portal-view #routesPanel .route-editor.is-drive-approval .route-editor__description { text-align: left; }
.portal-view #routesPanel .route-editor.is-drive-approval .drive-approval-context { flex: 0 0 auto; margin: 12px 0 20px; }
.portal-view .is-drive-approval #driverSelect + .custom-select,
.portal-view .is-drive-approval #oneTimeDriverField { display: none !important; }
.drive-assigned-driver { display: flex; flex-direction: column; gap: 4px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-raised); }
.drive-assigned-driver strong { color: var(--ui-ink); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.drive-assigned-driver span { color: var(--ui-soft); font-size: 11px; }
.drive-assigned-driver[hidden] { display: none; }
.drive-review-identity strong { overflow-wrap: anywhere; }

.portal-view .is-drive-approval .amount-field .custom-select { min-width: 0; }