/* Professional delivery dispatch and transfer register */
.logistics-workspace { gap: 9px; }
.logistics-toolbar { min-height: 62px !important; }
.logistics-toolbar .workspace-toolbar-title { min-width: 310px; }
.logistics-entity-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid #aac3d7;
  border-radius: 7px;
  background: #f4f8fb;
  padding: 3px;
}
.logistics-entity-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #38556d;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 800;
}
.logistics-entity-toggle button:hover:not(.active) { background: #e4eff8; color: #075aa9; }
.logistics-entity-toggle button.active { background: #0878e8; color: #fff; box-shadow: 0 2px 5px rgba(0, 94, 190, .22); }

.delivery-dispatch-board { overflow: hidden; }
.dispatch-date-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #bcd0df;
  background: #f8fbfd;
  padding: 8px 11px;
}
.dispatch-date-nav,
.dispatch-day-summary { display: flex; align-items: center; gap: 7px; }
.dispatch-date-nav label { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; }
.dispatch-date-nav label span { color: #294a64; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.dispatch-date-nav input { min-height: 34px; border-color: #a8c0d3; font-weight: 750; }
.dispatch-date-nav button { min-height: 34px; }
.dispatch-date-nav button[aria-label] { width: 34px; padding: 0; font-size: 20px; }
.dispatch-day-summary > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #c7d8e5;
  border-radius: 5px;
  background: #fff;
  color: #526e82;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
}
.dispatch-day-summary > span strong { color: #102c43; font-size: 14px; font-weight: 900; }

.dispatch-layout {
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(590px, 2fr) minmax(320px, 1.1fr);
  gap: 9px;
  min-height: 680px;
  background: #eaf0f5;
  padding: 9px;
}
.dispatch-backlog,
.dispatch-map-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #bfd2e1;
  border-radius: 7px;
  background: #f9fbfd;
  box-shadow: 0 2px 6px rgba(10, 39, 62, .06);
}
.dispatch-backlog > header,
.dispatch-map-panel > header {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  border-bottom: 1px solid #cbdbe7;
  background: #fff;
  padding: 9px 11px;
}
.dispatch-backlog header small,
.dispatch-map-panel header small {
  display: block;
  color: #0870d2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.dispatch-backlog header h2,
.dispatch-map-panel header h2 { margin: 2px 0 0; color: #102c43; font-size: 15px; line-height: 1.1; }
.dispatch-backlog > header > span {
  min-width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #0878e8;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.dispatch-backlog-list {
  min-height: 310px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 7px;
}
.dispatch-backlog-list.is-drop-target { outline: 2px dashed #0878e8; outline-offset: -5px; background: #eaf5ff; }

.dispatch-driver-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(270px, 1fr));
  gap: 8px;
  align-content: start;
}
.dispatch-driver-lane {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b9cddd;
  border-top: 4px solid #4d8fc4;
  border-radius: 7px;
  background: #f8fbfd;
  box-shadow: 0 2px 6px rgba(10, 39, 62, .06);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dispatch-driver-lane.is-map-selected { border-top-color: #0878e8; box-shadow: 0 0 0 2px rgba(8, 120, 232, .13), 0 3px 8px rgba(10, 39, 62, .08); }
.dispatch-driver-lane.is-drop-target { border-color: #0878e8; background: #eef7ff; }
.dispatch-driver-lane > header {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #c8d9e6;
  background: #fff;
  padding: 7px 9px;
}
.dispatch-driver-identity {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 1px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.dispatch-driver-identity:hover strong { color: #0870d2; }
.dispatch-driver-identity small { color: #5a7488; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.dispatch-driver-identity strong { overflow: hidden; max-width: 100%; color: #102c43; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-driver-identity span { color: #587286; font-size: 10px; font-weight: 650; }
.dispatch-driver-lane > header > div { display: grid; justify-items: center; }
.dispatch-driver-lane > header b { color: #0878e8; font-size: 17px; font-weight: 900; line-height: 1; }
.dispatch-driver-lane > header div small { color: #60798c; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.dispatch-route-metrics {
  min-height: 52px;
  display: grid;
  grid-template-columns: .72fr 1.05fr 1.45fr;
  align-items: stretch;
  border-bottom: 1px solid #d5e2eb;
  background: #f4f8fb;
  padding: 0;
}
.dispatch-route-kpi { min-width: 0; display: grid; align-content: center; gap: 2px; border-right: 1px solid #d5e2eb; padding: 7px 10px; }
.dispatch-route-kpi:last-child { border-right: 0; }
.dispatch-route-kpi small { color: #637d90; font-size: 8px; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.dispatch-route-kpi strong { overflow: hidden; color: #12354f; font-size: 13px; font-weight: 950; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-route-kpi strong > span,
.dispatch-route-kpi > span { color: #5d7689; font-size: 9px; font-weight: 750; }
.dispatch-route-empty-metric,
.dispatch-route-calculating { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #48667c; }
.dispatch-route-empty-metric { display: grid; gap: 1px; }
.dispatch-route-empty-metric strong { color: #274b65; font-size: 11px; font-weight: 900; }
.dispatch-route-empty-metric span { font-size: 9px; font-weight: 700; }
.dispatch-route-empty-metric.is-error strong { color: #a12a24; }
.dispatch-route-calculating > span { width: 11px; height: 11px; border: 2px solid #b7d3e8; border-top-color: #0878e8; border-radius: 50%; animation: dispatch-spin .8s linear infinite; }
.dispatch-route-calculating strong { color: #48667c; font-size: 10px; font-weight: 850; }
@keyframes dispatch-spin { to { transform: rotate(360deg); } }
.dispatch-lane-stops { min-height: 214px; display: grid; align-content: start; gap: 5px; padding: 6px; }
.dispatch-lane-stops.is-drop-target { background: #e3f2ff; outline: 2px dashed #0878e8; outline-offset: -4px; }
.dispatch-driver-lane > footer { display: flex; justify-content: flex-end; border-top: 1px solid #d5e2eb; background: #fff; padding: 6px; }
.dispatch-driver-lane > footer button { min-height: 29px; padding: 4px 8px; font-size: 9px; }

.dispatch-stop-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: start;
  border: 1px solid #c8d8e5;
  border-left: 4px solid #7da9ca;
  border-radius: 5px;
  background: #fff;
  padding: 7px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(10, 39, 62, .04);
}
.dispatch-stop-card:hover { border-color: #82b5db; box-shadow: 0 3px 8px rgba(10, 39, 62, .08); }
.dispatch-stop-card.is-ready { border-left-color: #16845a; }
.dispatch-stop-card.is-dragging { opacity: .35; cursor: grabbing; }
.dispatch-stop-card.is-compact { margin: 5px; }
.dispatch-stop-order {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #0878e8;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.dispatch-stop-main {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 1px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
.dispatch-stop-main small { color: #0870d2; font-size: 9px; font-weight: 900; }
.dispatch-stop-main strong { overflow: hidden; max-width: 100%; color: #102c43; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-stop-main span { overflow: hidden; max-width: 100%; color: #2e4b61; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-stop-main em { overflow: hidden; max-width: 100%; color: #60798c; font-size: 9px; font-style: normal; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-stop-meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.dispatch-stop-meta span {
  border: 1px solid #c8d8e5;
  border-radius: 10px;
  background: #f2f6f9;
  color: #506c80;
  padding: 2px 5px;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}
.dispatch-stop-meta span.is-ready { border-color: #a7d7bd; background: #eaf8f0; color: #17633f; }
.dispatch-stop-remove {
  grid-column: 3;
  grid-row: 1;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #7a8d9c;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.dispatch-stop-remove:hover { background: #ffebea; color: #b42318; }

.dispatch-map-panel { display: grid; grid-template-rows: auto minmax(430px, 1fr) auto; }
.dispatch-map-panel > header > div { min-width: 0; }
.dispatch-map-panel > header > div > span { display: block; color: #5d778a; font-size: 9px; font-weight: 650; }
.dispatch-map-status {
  flex: 0 0 auto;
  border: 1px solid #e2b675;
  border-radius: 12px;
  background: #fff6e7;
  color: #7c520d;
  padding: 4px 7px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.dispatch-map-status.is-ready { border-color: #9dcdb2; background: #eaf8f0; color: #17633f; }
.dispatch-map-frame { position: relative; min-height: 430px; background: #dfe9ef; }
.dispatch-map-frame iframe { width: 100%; height: 100%; min-height: 430px; display: block; border: 0; }
.dispatch-map-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 30px;
  background:
    linear-gradient(45deg, rgba(93, 132, 158, .07) 25%, transparent 25%) 0 0/28px 28px,
    linear-gradient(-45deg, rgba(93, 132, 158, .07) 25%, transparent 25%) 0 14px/28px 28px,
    #eef4f7;
  text-align: center;
}
.dispatch-map-empty strong { color: #17364f; font-size: 15px; font-weight: 900; }
.dispatch-map-empty span { max-width: 300px; color: #536f83; font-size: 10px; font-weight: 650; line-height: 1.4; }
.dispatch-map-legend { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #cbdbe7; background: #fff; padding: 8px 10px; }
.dispatch-map-legend span { display: flex; align-items: center; gap: 5px; color: #506c80; font-size: 9px; font-weight: 700; }
.map-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.map-dot-start { background: #102c43; }
.map-dot-stop { background: #0878e8; }
.map-dot-route { background: #e89620; }

.dispatch-empty { display: grid; place-content: center; gap: 3px; min-height: 92px; padding: 14px; text-align: center; }
.dispatch-empty strong { color: #24445d; font-size: 11px; font-weight: 850; }
.dispatch-empty span { color: #668093; font-size: 9px; font-weight: 650; line-height: 1.35; }
.dispatch-other-days { margin: 5px 7px 8px; border-top: 1px solid #d2e0e9; padding-top: 6px; }
.dispatch-other-days summary { color: #385870; font-size: 9px; font-weight: 850; cursor: pointer; }

.dispatch-driver-settings .source-card-body { display: grid; gap: 7px; }
.dispatch-settings-help { margin: 0 0 4px; color: #526f83; font-size: 11px; }
.dispatch-driver-setting {
  display: grid;
  grid-template-columns: 78px minmax(180px, 1fr) minmax(150px, .8fr);
  gap: 8px;
  align-items: end;
  border: 1px solid #cbdbe7;
  border-radius: 5px;
  background: #f8fbfd;
  padding: 8px;
}
.dispatch-driver-setting > span { align-self: center; color: #0870d2; font-size: 11px; font-weight: 900; }
.dispatch-driver-setting label { display: grid; gap: 3px; }

.transfer-register { overflow: hidden; }
.transfer-register-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #bdd1e0;
  background: #f8fbfd;
  padding: 11px 13px;
}
.transfer-register-head small { color: #0870d2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.transfer-register-head h2 { margin: 2px 0; color: #102c43; font-size: 17px; }
.transfer-register-head p { margin: 0; color: #526f83; font-size: 10px; font-weight: 650; }
.transfer-register-head > div:last-child { display: flex; gap: 7px; }
.transfer-register-head > div:last-child span {
  min-width: 72px;
  display: grid;
  justify-items: center;
  border: 1px solid #c7d8e5;
  border-radius: 5px;
  background: #fff;
  padding: 6px;
  color: #587387;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}
.transfer-register-head span strong { color: #102c43; font-size: 15px; }
.transfer-register-columns,
.transfer-register-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.45fr) minmax(150px, .8fr) 140px 160px 200px;
  gap: 9px;
  align-items: center;
}
.transfer-register-columns { background: #eaf4fb; padding: 8px 12px; color: #294e69; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.transfer-register-list { display: grid; gap: 6px; padding: 7px; background: #eef3f7; }
.transfer-register-row {
  min-height: 68px;
  border: 1px solid #c9d9e5;
  border-left: 4px solid #0878e8;
  border-radius: 6px;
  background: #fff;
  padding: 7px 9px;
}
.transfer-register-row.is-complete { border-left-color: #57906f; opacity: .75; }
.transfer-register-row > div { min-width: 0; display: grid; gap: 2px; }
.transfer-register-row strong { overflow: hidden; color: #143149; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.transfer-register-row span { color: #5b7588; font-size: 9px; font-weight: 650; }
.transfer-register-row .text-button { width: fit-content; padding: 0; font-size: 12px !important; }
.transfer-row-actions { display: flex !important; grid-auto-flow: column; justify-content: end; gap: 6px !important; }
.transfer-row-actions button { min-height: 31px; padding: 5px 8px; font-size: 10px; }

.delivery-dispatch-board.is-drag-active [data-driver-id],
.delivery-dispatch-board.is-drag-active [data-dispatch-unassigned] { transition: background-color .1s ease, outline-color .1s ease; }

@media (max-width: 1450px) {
  .dispatch-layout { grid-template-columns: minmax(210px, .7fr) minmax(540px, 1.8fr); }
  .dispatch-map-panel { grid-column: 1 / -1; grid-template-rows: auto 400px auto; }
  .dispatch-map-frame,
  .dispatch-map-frame iframe { min-height: 400px; }
}
@media (max-width: 1040px) {
  .dispatch-date-toolbar { align-items: stretch; flex-direction: column; }
  .dispatch-day-summary { flex-wrap: wrap; }
  .dispatch-layout { grid-template-columns: 1fr; }
  .dispatch-driver-board { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
  .transfer-register-columns { display: none; }
  .transfer-register-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .logistics-toolbar { align-items: stretch; flex-direction: column; }
  .logistics-entity-toggle { width: 100%; }
  .logistics-entity-toggle button { flex: 1; }
  .dispatch-date-nav { flex-wrap: wrap; }
  .dispatch-day-summary > span { flex: 1; }
  .dispatch-driver-board { grid-template-columns: 1fr; }
  .dispatch-driver-setting { grid-template-columns: 1fr; }
  .transfer-register-row { grid-template-columns: 1fr; }
  .transfer-row-actions { justify-content: start; }
}

/* Driver operations, publishing, mobile route, and QT fuel stops */
.dispatch-day-summary .dispatch-published { border-color: #98d0b2; background: #eaf8f0; color: #17633f; }
.dispatch-day-summary .dispatch-draft-state { border-color: #e4c387; background: #fff7e9; color: #805710; }
.dispatch-driver-lane > footer { flex-wrap: wrap; gap: 5px; }
.dispatch-stop-times {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.dispatch-stop-times label { display: inline-flex; align-items: center; gap: 3px; color: #587286; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.dispatch-stop-times select { width: auto; min-height: 25px; border-color: #b8ccdc; border-radius: 4px; background: #f8fbfd; padding: 2px 22px 2px 5px; color: #17364f; font-size: 9px; font-weight: 750; }
.dispatch-stop-times > span { margin-left: auto; color: #075fae; font-size: 9px; font-weight: 900; }
.dispatch-fuel-stop { border-left-color: #e89b22; background: #fffaf0; }
.dispatch-fuel-stop .dispatch-stop-order { background: #d77f00; }
.dispatch-fuel-stop .dispatch-stop-main small { color: #a95f00; }
.dispatch-fuel-stop.is-complete { opacity: .65; }

.dispatch-driver-settings [data-driver-settings-list] { display: grid; gap: 7px; }
.dispatch-driver-setting {
  grid-template-columns: 64px minmax(140px, 1fr) minmax(130px, .9fr) minmax(190px, 1.25fr) 104px auto;
}
.dispatch-driver-setting label { color: #526f83; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.dispatch-driver-setting input { min-height: 35px; margin-top: 2px; font-size: 11px; }
.dispatch-remove-driver { min-height: 35px; padding: 6px 9px; }
.dispatch-add-driver { justify-self: start; min-height: 35px; }

.driver-mobile-route { overflow: hidden; max-width: 1120px; margin: 0 auto; background: #eef4f8; }
.driver-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 4px solid #0878e8;
  background: #fff;
  padding: 16px 18px;
}
.driver-mobile-header small { color: #0870d2; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.driver-mobile-header h1 { margin: 2px 0; color: #102c43; font-size: 24px; }
.driver-mobile-header > div > span { color: #587286; font-size: 11px; font-weight: 700; }
.driver-mobile-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.driver-mobile-header-actions button { min-height: 38px; }
.driver-mobile-progress {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border-bottom: 1px solid #c4d6e3;
  background: #eaf4fb;
  padding: 10px 18px;
}
.driver-mobile-progress > div { display: flex; align-items: baseline; gap: 7px; }
.driver-mobile-progress strong { color: #075fae; font-size: 16px; font-weight: 900; }
.driver-mobile-progress span { color: #526f83; font-size: 10px; font-weight: 750; }
.driver-mobile-stops { display: grid; gap: 10px; padding: 12px; }
.driver-mobile-stop {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px 13px;
  border: 1px solid #bdcfdd;
  border-left: 5px solid #0878e8;
  border-radius: 8px;
  background: #fff;
  padding: 13px;
  box-shadow: 0 2px 7px rgba(10, 39, 62, .07);
}
.driver-mobile-stop.is-complete { border-left-color: #27825b; background: #f3faf6; }
.driver-mobile-stop.driver-mobile-fuel { border-left-color: #e89b22; background: #fffaf0; }
.driver-stop-number { grid-row: 1 / span 5; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #0878e8; color: #fff; font-size: 16px; font-weight: 900; }
.driver-mobile-fuel .driver-stop-number { background: #d77f00; }
.driver-mobile-stop > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.driver-mobile-stop > header small { color: #0870d2; font-size: 9px; font-weight: 900; }
.driver-mobile-stop > header h2 { margin: 2px 0; color: #102c43; font-size: 18px; }
.driver-mobile-stop > header div > span { color: #526f83; font-size: 10px; font-weight: 700; }
.driver-stop-status { flex: 0 0 auto; border: 1px solid #b9cee0; border-radius: 13px; background: #eff6fb; padding: 4px 8px; color: #2b5878; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.driver-stop-schedule { display: flex; align-items: center; gap: 9px; }
.driver-stop-schedule strong { color: #075fae; font-size: 13px; font-weight: 900; }
.driver-stop-schedule span { color: #587286; font-size: 10px; font-weight: 750; }
.driver-mobile-stop address { color: #263f53; font-size: 12px; font-style: normal; font-weight: 750; }
.driver-stop-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.driver-stop-actions a,
.driver-stop-actions button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; padding: 7px 12px; font-size: 10px; font-weight: 850; text-decoration: none; }
.driver-stop-actions a.primary { background: #0878e8; color: #fff; }
.driver-proof-form { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(230px, 1.4fr) auto; gap: 8px; align-items: end; border-top: 1px solid #d5e2eb; padding-top: 10px; }
.driver-proof-form label { display: grid; gap: 3px; color: #526f83; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.driver-proof-form input,
.driver-proof-form textarea { min-height: 38px; font-size: 12px; text-transform: none; }
.driver-proof-form textarea { resize: vertical; }
.driver-proof-photo input { max-width: 220px; padding: 6px; }
.driver-proof-form > div { grid-column: 1 / -1; display: flex; gap: 7px; }
.driver-proof-complete { display: grid; gap: 2px; border-top: 1px solid #bee0cc; padding-top: 9px; }
.driver-proof-complete strong { color: #17633f; font-size: 12px; }
.driver-proof-complete span,
.driver-proof-complete p { margin: 0; color: #547164; font-size: 10px; }

@media (max-width: 1200px) {
  .dispatch-driver-setting { grid-template-columns: 58px repeat(2, minmax(150px, 1fr)); }
  .dispatch-driver-setting label:nth-of-type(3) { grid-column: 2; }
}
@media (max-width: 760px) {
  .driver-mobile-route { border: 0; border-radius: 0; }
  .driver-mobile-header { align-items: stretch; flex-direction: column; padding: 13px; }
  .driver-mobile-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driver-mobile-header-actions button { width: 100%; }
  .driver-mobile-progress { grid-template-columns: 1fr; padding: 9px 13px; }
  .driver-mobile-stops { padding: 8px; }
  .driver-mobile-stop { grid-template-columns: 35px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .driver-stop-number { width: 32px; height: 32px; font-size: 13px; }
  .driver-mobile-stop > header { flex-direction: column; }
  .driver-proof-form { grid-template-columns: 1fr; }
  .driver-proof-form > div { grid-column: 1; }
  .driver-stop-actions a,
  .driver-stop-actions button { flex: 1; }
  .dispatch-stop-times { grid-column: 1 / -1; }
}

/* Focused dispatch console */
.dispatch-driver-strip {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  border-bottom: 1px solid #b8ccdb;
  background: #e9f1f7;
  padding: 10px;
}
.dispatch-driver-strip-title {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 0 6px;
}
.dispatch-driver-strip-title span {
  color: #0870d2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dispatch-driver-strip-title strong { color: #17364f; font-size: 13px; font-weight: 900; }
.dispatch-driver-tabs {
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(220px, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-width: thin;
}
.dispatch-driver-tab {
  position: relative;
  min-width: 220px;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid #b8ccdb;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
  color: #17364f;
  text-align: left;
  box-shadow: 0 1px 3px rgba(15, 49, 74, .06);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.dispatch-driver-tab:hover { border-color: #79aeda; box-shadow: 0 3px 9px rgba(15, 49, 74, .10); transform: translateY(-1px); }
.dispatch-driver-tab.is-active {
  border-color: #0878e8;
  background: linear-gradient(135deg, #f8fcff 0%, #e8f4ff 100%);
  box-shadow: inset 0 -3px 0 #0878e8, 0 3px 10px rgba(8, 120, 232, .13);
}
.dispatch-driver-tab.is-drop-target { outline: 2px dashed #0878e8; outline-offset: -4px; background: #deefff; }
.dispatch-driver-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dcebf7;
  color: #28536f;
  font-size: 11px;
  font-weight: 900;
}
.dispatch-driver-tab.is-active .dispatch-driver-avatar { background: #0878e8; color: #fff; }
.dispatch-driver-tab-copy { min-width: 0; display: grid; gap: 3px; }
.dispatch-driver-tab-copy strong { overflow: hidden; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-driver-tab-copy small { overflow: hidden; color: #617b8e; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-driver-load { display: grid; justify-items: center; padding-left: 9px; border-left: 1px solid #d4e0e9; }
.dispatch-driver-load b { color: #0878e8; font-size: 18px; font-weight: 950; line-height: 1; }
.dispatch-driver-load small { color: #60798c; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.dispatch-driver-future {
  position: absolute;
  right: 7px;
  bottom: 4px;
  color: #527187;
  font-size: 8px;
  font-weight: 800;
}

.dispatch-focus-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr) minmax(520px, 1.6fr);
  gap: 10px;
  min-height: 0;
  align-items: start;
  background: #e7eef4;
  padding: 10px;
}
.dispatch-queue-panel {
  min-width: 0;
  display: block;
  height: auto;
}
.dispatch-queue-panel > .dispatch-queue-section:first-child .dispatch-backlog-list { min-height: 0; }
.dispatch-queue-section,
.dispatch-route-focus,
.dispatch-focus-layout > .dispatch-map-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #b8ccdb;
  border-radius: 8px;
  background: #f8fbfd;
  box-shadow: 0 3px 10px rgba(15, 49, 74, .07);
}
.dispatch-queue-section { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.dispatch-upcoming-section { grid-template-rows: auto auto minmax(0, 1fr); }
.dispatch-queue-section > header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #cbdbe7;
  background: #fff;
  padding: 10px 12px;
}
.dispatch-queue-section > header small { display: block; color: #0870d2; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dispatch-queue-section > header h2 { margin: 3px 0 0; color: #102c43; font-size: 16px; line-height: 1.1; }
.dispatch-queue-section > header > span {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0878e8;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.dispatch-backlog-list,
.dispatch-upcoming-list { overflow: visible; }
.dispatch-upcoming-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 5px;
  border-bottom: 1px solid #d2e0e9;
  background: #eef7f2;
  padding: 8px 11px;
}
.dispatch-upcoming-summary strong { color: #17633f; font-size: 16px; font-weight: 950; }
.dispatch-upcoming-summary span { color: #17633f; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.dispatch-upcoming-summary small { justify-self: end; color: #547164; font-size: 9px; font-weight: 700; }
.dispatch-upcoming-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 9px; padding: 10px; }
.dispatch-upcoming-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) auto;
  gap: 7px 9px;
  align-items: center;
  border: 1px solid #c8d8e5;
  border-left: 4px solid #7da9ca;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  cursor: grab;
}
.dispatch-upcoming-card.is-ready-early { border-left-color: #16845a; background: #fbfffc; }
.dispatch-upcoming-date { display: grid; gap: 2px; align-self: stretch; align-content: center; border-right: 1px solid #d7e2ea; }
.dispatch-upcoming-date strong { color: #17364f; font-size: 11px; font-weight: 900; }
.dispatch-upcoming-date span { color: #688194; font-size: 8px; font-weight: 750; }
.dispatch-upcoming-main { min-width: 0; display: grid; justify-items: start; gap: 1px; border: 0; background: transparent; padding: 0; text-align: left; }
.dispatch-upcoming-main small { color: #0870d2; font-size: 9px; font-weight: 900; }
.dispatch-upcoming-main strong,
.dispatch-upcoming-main span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-upcoming-main strong { color: #102c43; font-size: 11px; font-weight: 900; }
.dispatch-upcoming-main span { color: #506c80; font-size: 9px; font-weight: 700; }
.dispatch-upcoming-readiness { grid-column: 2; display: flex; align-items: center; gap: 6px; }
.dispatch-upcoming-readiness > span { border: 1px solid #cad8e2; border-radius: 10px; background: #f2f5f7; color: #5b7283; padding: 2px 6px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.dispatch-upcoming-readiness > span.is-ready { border-color: #9dcdb2; background: #eaf8f0; color: #17633f; }
.dispatch-upcoming-readiness small { overflow: hidden; color: #60798c; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-early-button { grid-column: 3; grid-row: 1 / span 2; min-height: 31px; padding: 5px 8px; font-size: 9px; }

.dispatch-route-focus { display: grid; height: auto; overflow: visible; }
.dispatch-route-focus .dispatch-driver-lane { height: auto; display: grid; grid-template-rows: auto auto auto auto; overflow: visible; border: 0; border-top: 4px solid #0878e8; border-radius: 0; box-shadow: none; }
.dispatch-route-focus .dispatch-driver-lane > header { min-height: 70px; padding: 10px 13px; }
.dispatch-route-focus .dispatch-driver-identity small { font-size: 9px; }
.dispatch-route-focus .dispatch-driver-identity strong { font-size: 18px; }
.dispatch-route-focus .dispatch-driver-identity span { margin-top: 2px; font-size: 11px; }
.dispatch-route-focus .dispatch-driver-lane > header b { font-size: 22px; }
.dispatch-route-focus .dispatch-route-metrics { min-height: 62px; }
.dispatch-route-focus .dispatch-route-kpi { padding: 8px 11px; }
.dispatch-route-focus .dispatch-route-kpi small { font-size: 8px; }
.dispatch-route-focus .dispatch-route-kpi strong { font-size: 14px; }
.dispatch-route-focus .dispatch-route-kpi strong > span,
.dispatch-route-focus .dispatch-route-kpi > span { font-size: 9px; }
.dispatch-route-focus .dispatch-lane-stops { min-height: 0; overflow: visible; gap: 8px; padding: 9px; }
.dispatch-route-focus .dispatch-stop-card { gap: 8px; border-radius: 7px; padding: 10px; }
.dispatch-route-focus .dispatch-stop-order { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; }
.dispatch-route-focus .dispatch-stop-main { gap: 2px; }
.dispatch-route-focus .dispatch-stop-main small { font-size: 10px; }
.dispatch-route-focus .dispatch-stop-main strong { font-size: 13px; }
.dispatch-route-focus .dispatch-stop-main span,
.dispatch-route-focus .dispatch-stop-main em { font-size: 10px; }
.dispatch-route-focus .dispatch-stop-times label { font-size: 9px; }
.dispatch-route-focus .dispatch-stop-times select { min-height: 29px; font-size: 10px; }
.dispatch-route-actions {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 7px;
  border-bottom: 1px solid #d5e2eb;
  background: #fff;
  padding: 9px;
}
.dispatch-route-actions > button { min-height: 44px; display: grid; place-content: center; gap: 1px; padding: 6px 11px; }
.dispatch-route-actions > button strong { font-size: 11px; font-weight: 950; }
.dispatch-route-actions > button small { font-size: 8px; font-weight: 750; opacity: .8; }
.dispatch-optimize-route { box-shadow: 0 3px 9px rgba(8, 120, 232, .22); }
.dispatch-route-utilities { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 1px 2px 0; }
.dispatch-route-utilities button { min-height: 24px; border: 0; background: transparent; color: #42647d; padding: 2px 0; font-size: 9px; font-weight: 850; }
.dispatch-route-utilities button:hover:not(:disabled) { color: #0870d2; text-decoration: underline; text-underline-offset: 3px; }
.dispatch-route-utilities button + button { padding-left: 12px; border-left: 1px solid #d2dee7; }
.dispatch-stop-card.is-backlog { cursor: grab; }
.dispatch-stop-card.is-backlog .dispatch-stop-remove { display: none; }
.dispatch-backlog-list .dispatch-stop-card,
.dispatch-route-focus .dispatch-stop-card { min-height: 148px; }
.dispatch-backlog-list .dispatch-stop-card { gap: 8px; border-radius: 7px; padding: 10px; }
.dispatch-backlog-list .dispatch-stop-order { width: 28px; height: 28px; border-radius: 50%; }
.dispatch-backlog-list .dispatch-stop-main { gap: 2px; }
.dispatch-backlog-list .dispatch-stop-main small { font-size: 10px; }
.dispatch-backlog-list .dispatch-stop-main strong { font-size: 13px; }
.dispatch-backlog-list .dispatch-stop-main span,
.dispatch-backlog-list .dispatch-stop-main em { font-size: 10px; }
.dispatch-backlog-list .dispatch-stop-times label { font-size: 9px; }
.dispatch-backlog-list .dispatch-stop-times select { min-height: 29px; font-size: 10px; }
.dispatch-stop-grip { background: #dcebf7; color: #42647d; font-size: 11px; letter-spacing: -3px; }

.dispatch-upcoming-board { margin: 0 10px 10px; overflow: hidden; border: 1px solid #b8ccdb; border-radius: 8px; background: #f8fbfd; box-shadow: 0 3px 10px rgba(15, 49, 74, .07); }
.dispatch-upcoming-board > header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #cbdbe7; background: #fff; padding: 11px 14px; }
.dispatch-upcoming-board > header small { color: #0870d2; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dispatch-upcoming-board > header h2 { margin: 2px 0; color: #102c43; font-size: 18px; }
.dispatch-upcoming-board > header p { margin: 0; color: #5a7488; font-size: 10px; font-weight: 650; }
.dispatch-upcoming-board > header > span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #0878e8; color: #fff; font-size: 13px; font-weight: 900; }
.dispatch-upcoming-board .dispatch-upcoming-summary { padding: 9px 14px; }
.dispatch-upcoming-board .dispatch-upcoming-card { min-height: 106px; box-shadow: 0 1px 3px rgba(15, 49, 74, .04); }

/* Empire dispatch finish */
.delivery-dispatch-board {
  border-color: #8faec5;
  background: #dfe9f1;
  box-shadow: 0 12px 34px rgba(12, 42, 65, .14);
}
.dispatch-date-toolbar {
  border-bottom-color: #9db9cd;
  background:
    linear-gradient(105deg, rgba(255,255,255,.96), rgba(232,243,251,.96)),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(25,77,115,.035) 12px 13px);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}
.dispatch-driver-strip {
  border-bottom: 0;
  background:
    linear-gradient(120deg, #102f48 0%, #174f78 52%, #0a68bd 100%),
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(255,255,255,.04) 13px 14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px rgba(9,43,69,.18);
}
.dispatch-driver-strip-title span { color: #8fd0ff; }
.dispatch-driver-strip-title strong { color: #fff; }
.dispatch-driver-tab {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.94);
  box-shadow: 0 3px 10px rgba(3,25,42,.18);
}
.dispatch-driver-tab:hover { border-color: #fff; box-shadow: 0 5px 14px rgba(3,25,42,.25); }
.dispatch-driver-tab.is-active {
  border-color: #fff;
  background: linear-gradient(135deg, #0878e8 0%, #0757a6 100%);
  color: #fff;
  box-shadow: inset 0 -3px 0 #70c1ff, 0 5px 16px rgba(2,37,67,.32);
}
.dispatch-driver-tab.is-active .dispatch-driver-tab-copy strong,
.dispatch-driver-tab.is-active .dispatch-driver-load b { color: #fff; }
.dispatch-driver-tab.is-active .dispatch-driver-tab-copy small,
.dispatch-driver-tab.is-active .dispatch-driver-load small,
.dispatch-driver-tab.is-active .dispatch-driver-future { color: #cbe9ff; }
.dispatch-driver-tab.is-active .dispatch-driver-load { border-left-color: rgba(255,255,255,.32); }
.dispatch-driver-tab.is-active .dispatch-driver-avatar { background: #fff; color: #075fae; box-shadow: 0 2px 8px rgba(0,0,0,.18); }

.dispatch-focus-layout {
  background:
    linear-gradient(180deg, #d7e3ec 0%, #edf3f7 100%),
    repeating-linear-gradient(135deg, transparent 0 16px, rgba(28,78,113,.03) 16px 17px);
}
.dispatch-queue-section,
.dispatch-route-focus,
.dispatch-focus-layout > .dispatch-map-panel {
  border-color: #9db8ca;
  box-shadow: 0 8px 20px rgba(14,50,76,.12);
}
.dispatch-queue-section > header,
.dispatch-route-focus .dispatch-driver-lane > header,
.dispatch-focus-layout > .dispatch-map-panel > header {
  border-bottom-color: rgba(255,255,255,.14);
  background:
    linear-gradient(115deg, #143b58 0%, #0d5e99 70%, #0878e8 100%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,.04) 12px 13px);
  color: #fff;
}
.dispatch-queue-section > header small,
.dispatch-route-focus .dispatch-driver-identity small,
.dispatch-focus-layout > .dispatch-map-panel header small { color: #8fd0ff; }
.dispatch-queue-section > header h2,
.dispatch-route-focus .dispatch-driver-identity strong,
.dispatch-focus-layout > .dispatch-map-panel header h2 { color: #fff; }
.dispatch-route-focus .dispatch-driver-identity span,
.dispatch-focus-layout > .dispatch-map-panel header > div > span { color: #d4e9f8; }
.dispatch-route-focus .dispatch-driver-lane > header b { color: #fff; }
.dispatch-route-focus .dispatch-driver-lane > header div small { color: #b9ddf7; }
.dispatch-queue-section > header > span {
  background: #fff;
  color: #075fae;
  box-shadow: 0 2px 8px rgba(2,31,55,.24);
}
.dispatch-map-status { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.92); }
.dispatch-route-focus .dispatch-route-metrics {
  background: linear-gradient(180deg, #f8fbfd, #edf4f8);
  box-shadow: inset 0 -1px 0 rgba(46,91,123,.08);
}
.dispatch-route-kpi strong { color: #0c588f; }
.dispatch-route-actions { background: linear-gradient(180deg, #fff, #f1f6fa); }
.dispatch-optimize-route {
  border-color: #0878e8;
  background: linear-gradient(135deg, #0b84f4 0%, #075caf 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,35,65,.25);
  box-shadow: 0 5px 13px rgba(8,120,232,.28);
}
.dispatch-optimize-route:hover:not(:disabled) { background: linear-gradient(135deg, #1992ff, #064f99); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(8,120,232,.34); }
.dispatch-email-route { border-color: #7caad0; background: #fff; color: #164d75; }
.dispatch-email-route:hover:not(:disabled) { border-color: #0878e8; background: #eaf5ff; color: #075fae; }
.dispatch-stop-card {
  border-color: #b7cad8;
  background: linear-gradient(145deg, #fff 0%, #f8fbfd 100%);
  box-shadow: 0 3px 9px rgba(16,52,78,.08);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.dispatch-stop-card:hover { border-color: #6da9d5; box-shadow: 0 6px 15px rgba(16,52,78,.14); transform: translateY(-1px); }
.dispatch-stop-card.is-ready { border-left-color: #16845a; }
.dispatch-upcoming-board {
  border-color: #9db8ca;
  background: linear-gradient(180deg, #eaf1f6, #f6f9fb);
  box-shadow: 0 9px 24px rgba(14,50,76,.12);
}
.dispatch-upcoming-board > header {
  border-bottom-color: rgba(255,255,255,.15);
  background: linear-gradient(115deg, #143b58 0%, #0d5e99 72%, #0878e8 100%);
}
.dispatch-upcoming-board > header small { color: #8fd0ff; }
.dispatch-upcoming-board > header h2 { color: #fff; }
.dispatch-upcoming-board > header p { color: #d4e9f8; }
.dispatch-upcoming-board > header > span { background: #fff; color: #075fae; box-shadow: 0 2px 8px rgba(2,31,55,.24); }
.dispatch-upcoming-card { box-shadow: 0 3px 9px rgba(16,52,78,.08); }

.dispatch-focus-layout > .dispatch-map-panel { width: 100%; align-self: start; grid-template-rows: auto auto auto; }
.dispatch-focus-layout > .dispatch-map-panel .dispatch-map-frame,
.dispatch-focus-layout > .dispatch-map-panel .dispatch-map-frame iframe { min-height: 0; }
.dispatch-focus-layout > .dispatch-map-panel .dispatch-map-frame { height: 300px; min-height: 300px; aspect-ratio: auto; }
.dispatch-focus-layout > .dispatch-map-panel .dispatch-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.dispatch-focus-layout > .dispatch-map-panel > header { min-height: 54px; padding: 9px 12px; }
.dispatch-focus-layout > .dispatch-map-panel header strong { font-size: 15px; }

.dispatch-driver-setting select { min-height: 35px; margin-top: 2px; border-color: #aec3d4; background: #fff; font-size: 11px; }
.dispatch-map-route-overlay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.dispatch-map-route-halo,
.dispatch-map-route-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dispatch-map-route-halo { stroke: rgba(255, 255, 255, .96); stroke-width: 9; }
.dispatch-map-route-line { stroke: #0878e8; stroke-width: 5; }
.dispatch-map-shop-marker { fill: #102c43; stroke: #fff; stroke-width: 3; }
.dispatch-map-stop-marker circle { fill: #0878e8; stroke: #fff; stroke-width: 3; }
.dispatch-map-stop-marker text { fill: #fff; font: 900 11px Poppins, sans-serif; }

.dispatch-driver-tab { border-left: 4px solid var(--driver-color, #0878e8); }
.dispatch-driver-tab.is-active { border-left-color: var(--driver-color, #0878e8); }
.dispatch-week-planner { margin: 10px; overflow: hidden; border: 1px solid #b8ccdb; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(15, 49, 74, .07); }
.dispatch-week-planner > header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d5e2eb; background: #f8fbfd; padding: 9px 12px; }
.dispatch-week-planner header small { display: block; color: #0870d2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.dispatch-week-planner header h2 { margin: 2px 0 0; color: #102c43; font-size: 16px; }
.dispatch-week-planner header > span { color: #5d778a; font-size: 10px; font-weight: 700; }
.dispatch-week-grid { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; }
.dispatch-week-day { min-width: 0; border-right: 1px solid #dbe6ee; background: #fbfdff; }
.dispatch-week-day:last-child { border-right: 0; }
.dispatch-week-day.is-selected { background: #f1f7fc; box-shadow: inset 0 3px #0878e8; }
.dispatch-week-day > header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dbe6ee; background: transparent; padding: 7px 9px; }
.dispatch-week-day > header div { display: grid; gap: 1px; }
.dispatch-week-day > header strong { color: #17364f; font-size: 11px; }
.dispatch-week-day > header span { color: #60798c; font-size: 9px; font-weight: 700; }
.dispatch-week-day > header b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #e2edf5; color: #31566f; font-size: 10px; }
.dispatch-week-day-list { display: grid; align-content: start; gap: 4px; min-height: 54px; padding: 6px; }
.dispatch-week-job { min-width: 0; display: grid; justify-items: start; gap: 1px; border: 1px solid #c8d8e5; border-left: 4px solid #9aaebb; border-radius: 4px; background: #fff; padding: 5px 6px; text-align: left; }
.dispatch-week-job.is-assigned { border-left-color: var(--driver-color); }
.dispatch-week-job:hover { border-color: #69a7d3; background: #f7fbfe; }
.dispatch-week-job small { color: #0870d2; font-size: 8px; font-weight: 900; }
.dispatch-week-job strong, .dispatch-week-job span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-week-job strong { color: #17364f; font-size: 10px; }
.dispatch-week-job span { color: #60798c; font-size: 8px; font-weight: 650; }
.dispatch-week-job em { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: #748a9a; font-size: 8px; font-style: normal; font-weight: 800; }
.dispatch-week-job em::before { width: 6px; height: 6px; border-radius: 50%; background: #9aaebb; content: ''; }
.dispatch-week-job.is-assigned em { color: var(--driver-color); }
.dispatch-week-job.is-assigned em::before { background: var(--driver-color); }
.dispatch-week-empty { color: #8194a2; font-size: 9px; font-weight: 650; padding: 5px 2px; }
.driver-location-status { margin-right: auto; color: #667f91; font-size: 9px; font-weight: 800; }
.driver-location-status.is-sharing { color: #16845a; }
.dispatch-template-list { display: grid; gap: 8px; }
.dispatch-template-list div { display: grid; gap: 2px; border-left: 3px solid #0878e8; background: #f5f9fc; padding: 7px 9px; }
.dispatch-template-list strong { color: #17364f; font-size: 11px; }
.dispatch-template-list span { color: #60798c; font-size: 10px; }
.driver-location-banner { display: grid; gap: 2px; border-bottom: 1px solid #d5e2eb; background: #f4f7f9; padding: 10px 14px; }
.driver-location-banner.is-sharing { background: #edf9f1; }
.driver-location-banner strong { color: #17364f; font-size: 12px; }
.driver-location-banner.is-sharing strong { color: #17633f; }
.driver-location-banner span { color: #5d778a; font-size: 10px; font-weight: 650; }

/* Daily dispatch keeps the queue, route, and map visible together on a desktop screen. */
.dispatch-focus-layout { grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) minmax(520px, 2.45fr); align-items: start; }
.dispatch-focus-layout > .dispatch-map-panel { grid-column: 3; grid-row: 1; width: 100%; align-self: start; }
.dispatch-map-panel,
.dispatch-week-planner { display: block; }
.dispatch-map-panel > header > span:first-child { display: grid; gap: 2px; }
.dispatch-map-panel > header small,
.dispatch-week-planner header small { color: #0870d2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.dispatch-map-panel > header strong,
.dispatch-week-planner header h2 { color: #102c43; font-size: 14px; }
.dispatch-map-panel > header { border-bottom: 1px solid #d5e2eb; background: #f8fbfd; }
.dispatch-driver-strip { padding: 8px 10px; }
.dispatch-driver-strip-title { display: none; }
.dispatch-driver-tabs { grid-column: 1 / -1; }
.dispatch-date-toolbar { gap: 10px; padding: 9px 11px; }
.dispatch-day-summary { margin-left: auto; }
.dispatch-day-summary .dispatch-draft-state,
.dispatch-day-summary .dispatch-published { display: none; }

/* Route cards are scanning tools, not forms: keep only dispatch-critical information visible. */
.dispatch-route-focus .dispatch-driver-lane > header { min-height: 56px; padding: 8px 11px; }
.dispatch-route-focus .dispatch-driver-identity strong { font-size: 16px; }
.dispatch-route-focus .dispatch-driver-identity span { font-size: 10px; }
.dispatch-route-focus .dispatch-route-metrics { min-height: 52px; }
.dispatch-route-focus .dispatch-route-kpi { padding: 7px 9px; }
.dispatch-route-actions { gap: 6px; padding: 7px; }
.dispatch-route-actions > button { min-height: 38px; padding: 5px 8px; }
.dispatch-route-utilities { gap: 9px; }
.dispatch-route-focus .dispatch-lane-stops { gap: 5px; padding: 6px; }
.dispatch-backlog-list .dispatch-stop-card,
.dispatch-route-focus .dispatch-stop-card { min-height: 92px; gap: 5px; padding: 7px; }
.dispatch-backlog-list .dispatch-stop-order,
.dispatch-route-focus .dispatch-stop-order { width: 24px; height: 24px; font-size: 10px; }
.dispatch-backlog-list .dispatch-stop-main,
.dispatch-route-focus .dispatch-stop-main { gap: 1px; }
.dispatch-backlog-list .dispatch-stop-main small,
.dispatch-route-focus .dispatch-stop-main small { font-size: 9px; }
.dispatch-backlog-list .dispatch-stop-main strong,
.dispatch-route-focus .dispatch-stop-main strong { font-size: 12px; }
.dispatch-backlog-list .dispatch-stop-main span,
.dispatch-route-focus .dispatch-stop-main span { display: none; }
.dispatch-backlog-list .dispatch-stop-main em,
.dispatch-route-focus .dispatch-stop-main em { font-size: 9px; }
.dispatch-backlog-list .dispatch-stop-times label,
.dispatch-route-focus .dispatch-stop-times label { font-size: 8px; }
.dispatch-backlog-list .dispatch-stop-times select,
.dispatch-route-focus .dispatch-stop-times select { min-height: 25px; font-size: 9px; }
.dispatch-focus-layout > .dispatch-map-panel .dispatch-map-frame { height: 540px; min-height: 540px; aspect-ratio: auto; }
.dispatch-focus-layout > .dispatch-map-panel > header > span:first-child strong { color: #fff; }

@media (max-width: 1320px) {
  .dispatch-focus-layout { grid-template-columns: repeat(2, minmax(340px, 1fr)); }
  .dispatch-focus-layout > .dispatch-map-panel { width: min(760px, 100%); grid-column: 1 / -1; grid-row: auto; justify-self: center; }
  .dispatch-upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .dispatch-driver-strip { grid-template-columns: 1fr; }
  .dispatch-focus-layout { grid-template-columns: 1fr; }
  .dispatch-queue-panel,
  .dispatch-route-focus { height: auto; max-height: none; }
  .dispatch-route-focus .dispatch-lane-stops { min-height: 430px; }
  .dispatch-focus-layout > .dispatch-map-panel { grid-column: 1; }
  .dispatch-map-panel > header { align-items: flex-start; }
  .dispatch-week-grid { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; }
}
@media (max-width: 700px) {
  .dispatch-driver-tabs { grid-auto-columns: minmax(200px, 82vw); }
  .dispatch-focus-layout { padding: 7px; }
  .dispatch-upcoming-list { grid-template-columns: 1fr; }
  .dispatch-upcoming-card { grid-template-columns: 58px minmax(0, 1fr); }
  .dispatch-early-button { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .dispatch-route-actions { grid-template-columns: 1fr; }
  .dispatch-route-actions > button { width: 100%; }
  .dispatch-route-utilities { grid-column: 1; justify-content: center; }
  .dispatch-route-metrics { grid-template-columns: .75fr 1fr 1.4fr; }
}

/* Calendar-first delivery operating system */
.delivery-dispatch-workspace { display: grid; gap: 9px; min-width: 0; }
.delivery-workspace-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #173e5d;
  border-radius: 8px;
  background: #173e5d;
  box-shadow: 0 3px 10px rgba(15, 47, 72, .12);
}
.delivery-workspace-nav button {
  min-height: 54px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: linear-gradient(180deg, #f9fcfe, #edf4f8);
  color: #27485f;
  padding: 8px 14px;
  text-align: left;
}
.delivery-workspace-nav button:hover { background: #fff; color: #075cae; }
.delivery-workspace-nav button.active { border-bottom-color: #18a0ff; background: linear-gradient(135deg, #0b426a, #0878e8); color: #fff; }
.delivery-workspace-nav strong { font-size: 13px; font-weight: 900; }
.delivery-workspace-nav span { opacity: .76; font-size: 9px; font-weight: 700; }

.delivery-schedule-workspace,
.delivery-fleet-map-workspace,
.repeat-runs-workspace { min-width: 0; overflow: hidden; border: 1px solid #b9cede; border-radius: 8px; background: #f2f7fa; box-shadow: 0 4px 12px rgba(12, 45, 69, .08); }
.delivery-schedule-toolbar,
.fleet-map-toolbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #bcd0df;
  background: #fff;
  padding: 8px 12px;
}
.delivery-week-nav,
.delivery-schedule-actions,
.fleet-map-toolbar > div { display: flex; align-items: center; gap: 7px; }
.delivery-week-nav > div { min-width: 176px; display: grid; gap: 1px; padding: 0 7px; }
.delivery-week-nav small,
.delivery-schedule-driver-bar small { color: #0870d2; font-size: 9px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.delivery-week-nav strong { color: #102f48; font-size: 15px; font-weight: 900; }
.delivery-week-nav button[aria-label] { width: 34px; min-height: 34px; padding: 0; font-size: 20px; }
.delivery-schedule-actions > span,
.fleet-map-toolbar > div:last-child > span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #ccdce7;
  border-radius: 5px;
  background: #f7fafc;
  color: #587184;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 750;
}
.delivery-schedule-actions span strong,
.fleet-map-toolbar > div:last-child > strong { color: #0b5fac; font-size: 14px; font-weight: 950; }
.delivery-schedule-driver-bar {
  min-height: 60px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid #9fbed5;
  background: linear-gradient(120deg, #102f48, #174f78);
  padding: 8px 12px;
}
.delivery-schedule-driver-bar > div:first-child { display: grid; gap: 1px; }
.delivery-schedule-driver-bar > div:first-child strong { color: #fff; font-size: 14px; }
.delivery-schedule-driver-bar > p { margin: 0; color: #cfe6f5; font-size: 9px; font-weight: 700; }
.delivery-schedule-driver-chips { min-width: 0; display: flex; gap: 5px; overflow-x: auto; }
.delivery-schedule-driver-chips button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  color: #dcecf7;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.delivery-schedule-driver-chips button i,
.fleet-map-driver-filters button i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--driver-color, #0878e8); }
.delivery-schedule-driver-chips button.active { border-color: #fff; background: #fff; color: #102f48; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

.delivery-calendar-layout { display: grid; grid-template-columns: 290px minmax(880px, 1fr); align-items: start; gap: 8px; padding: 8px; }
.delivery-unscheduled-tray { min-width: 0; border: 1px solid #b7ccdc; border-radius: 7px; background: #fff; box-shadow: 0 2px 7px rgba(16, 48, 72, .07); }
.delivery-unscheduled-tray > header { min-height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d0dfea; background: #f8fbfd; padding: 9px 11px; }
.delivery-unscheduled-tray header small,
.fleet-map-unassigned header small,
.fleet-map-panel header small,
.fleet-route-summary header small,
.repeat-runs-hero small { color: #0870d2; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.delivery-unscheduled-tray h2,
.fleet-map-unassigned h2,
.fleet-map-panel h2,
.fleet-route-summary h2 { margin: 2px 0 0; color: #102f48; font-size: 16px; }
.delivery-unscheduled-tray > header > b,
.fleet-map-unassigned > header > b { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #0878e8; color: #fff; font-size: 12px; }
.delivery-unscheduled-list,
.fleet-map-unassigned [data-dispatch-unassigned] { display: grid; align-content: start; gap: 6px; padding: 7px; }
.delivery-unscheduled-list.is-drop-target,
.fleet-map-unassigned [data-dispatch-unassigned].is-drop-target { outline: 2px dashed #0878e8; outline-offset: -5px; background: #eaf5ff; }
.delivery-unscheduled-list .dispatch-stop-card,
.fleet-map-unassigned .dispatch-stop-card { min-height: 104px; }
.delivery-unscheduled-list .dispatch-stop-main span,
.fleet-map-unassigned .dispatch-stop-main span { display: none; }
.delivery-unscheduled-list .dispatch-stop-times,
.fleet-map-unassigned .dispatch-stop-times { grid-template-columns: 1fr auto; }

.delivery-week-calendar { min-width: 0; overflow-x: auto; border: 1px solid #aac4d7; border-radius: 7px; background: #fff; box-shadow: 0 2px 7px rgba(16, 48, 72, .07); }
.delivery-calendar-head,
.delivery-calendar-body { min-width: 920px; display: grid; grid-template-columns: 70px repeat(6, minmax(138px, 1fr)); }
.delivery-calendar-head { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #a9c3d6; background: #eef5f9; }
.delivery-calendar-time-head { display: grid; place-items: center; border-right: 1px solid #bdd0de; color: #668093; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.delivery-calendar-head button { min-height: 52px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 0 6px; border: 0; border-right: 1px solid #bdd0de; border-radius: 0; background: #f7fafc; padding: 7px 9px; text-align: left; }
.delivery-calendar-head button:last-child { border-right: 0; }
.delivery-calendar-head button.is-today { box-shadow: inset 0 4px #0878e8; background: #e9f5ff; }
.delivery-calendar-head button strong { color: #163b57; font-size: 12px; font-weight: 900; }
.delivery-calendar-head button span { color: #637d90; font-size: 9px; font-weight: 750; }
.delivery-calendar-head button b { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: #dce9f2; color: #365b74; font-size: 9px; }
.delivery-calendar-times,
.delivery-calendar-day { position: relative; height: 720px; }
.delivery-calendar-times { border-right: 1px solid #bfd2df; background: #f7fafc; }
.delivery-calendar-times span { height: 30px; display: block; border-bottom: 1px solid #e2ebf1; color: #506d82; padding: 2px 7px 0 0; font-size: 8px; font-weight: 800; text-align: right; }
.delivery-calendar-times span.is-half { border-bottom-style: dashed; }
.delivery-calendar-day { min-width: 0; overflow: hidden; border-right: 1px solid #cbdbe6; background: #fff; }
.delivery-calendar-day:last-child { border-right: 0; }
.delivery-calendar-day.is-drop-target { background: #eaf6ff; box-shadow: inset 0 0 0 3px #0878e8; }
.delivery-calendar-half-hours { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(24, 30px); pointer-events: none; }
.delivery-calendar-half-hours i { border-bottom: 1px solid #e3ebf1; }
.delivery-calendar-half-hours i:nth-child(odd) { border-bottom-style: dashed; }
.delivery-calendar-event {
  position: absolute;
  z-index: 4;
  top: calc(var(--calendar-top) * 30px + 2px);
  left: 4px;
  right: 4px;
  height: max(27px, calc(var(--calendar-span) * 30px - 4px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--driver-color) 72%, #17364f);
  border-left: 6px solid var(--driver-color);
  border-radius: 5px;
  background: color-mix(in srgb, var(--driver-color) 13%, white);
  box-shadow: 0 2px 5px rgba(17, 49, 72, .16);
  cursor: grab;
}
.delivery-calendar-event:hover { z-index: 12; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(17, 49, 72, .22); }
.delivery-calendar-event.is-dragging { opacity: .45; }
.delivery-calendar-event button { width: 100%; height: 100%; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 0 5px; border: 0; background: transparent; padding: 4px 5px; text-align: left; }
.delivery-calendar-event time { color: var(--driver-color); font-size: 8px; font-weight: 950; }
.delivery-calendar-event strong { overflow: hidden; color: #102f48; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.delivery-calendar-event span { grid-column: 1 / -1; overflow: hidden; color: #527084; font-size: 7px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.delivery-calendar-day.is-saturday::after { position: absolute; z-index: 2; top: 360px; right: 0; bottom: 0; left: 0; border-top: 2px solid #bdcad3; background: repeating-linear-gradient(135deg, rgba(94,113,126,.08) 0 8px, rgba(255,255,255,.42) 8px 16px); content: ''; pointer-events: none; }
.delivery-saturday-closed { position: absolute; z-index: 3; top: 370px; right: 9px; left: 9px; color: #6d7f8c; font-size: 8px; font-weight: 850; text-align: center; text-transform: uppercase; }

.fleet-map-toolbar > div:last-child { justify-content: flex-end; }
.fleet-map-driver-filters { display: flex; gap: 5px; border-bottom: 1px solid #aac4d7; background: linear-gradient(120deg, #102f48, #174f78); padding: 8px 10px; overflow-x: auto; }
.fleet-map-driver-filters button { min-width: 138px; min-height: 44px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 0 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: rgba(255,255,255,.08); color: #dcecf7; padding: 6px 9px; text-align: left; }
.fleet-map-driver-filters button i { grid-row: 1 / 3; align-self: center; }
.fleet-map-driver-filters button i.is-all { background: conic-gradient(#0878e8 0 25%, #16845a 0 50%, #d97706 0 75%, #7c3aed 0); }
.fleet-map-driver-filters button strong { font-size: 11px; font-weight: 900; }
.fleet-map-driver-filters button span { opacity: .75; font-size: 8px; font-weight: 700; }
.fleet-map-driver-filters button.active { border-color: #fff; background: #fff; color: #102f48; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.fleet-map-layout { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(640px, 2.4fr) minmax(210px, .7fr); align-items: start; gap: 8px; padding: 8px; }
.fleet-map-unassigned,
.fleet-map-panel,
.fleet-route-summary { min-width: 0; overflow: hidden; border: 1px solid #b8cddd; border-radius: 7px; background: #fff; box-shadow: 0 2px 7px rgba(16,48,72,.08); }
.fleet-map-unassigned > header,
.fleet-map-panel > header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 9px; border-bottom: 1px solid #cbdbe7; background: #f8fbfd; padding: 9px 11px; }
.fleet-map-unassigned header p,
.fleet-map-panel header span { margin: 3px 0 0; color: #5b7487; font-size: 8px; font-weight: 650; line-height: 1.35; }
.fleet-map-panel > header { background: linear-gradient(120deg, #103650, #0b6cb8); }
.fleet-map-panel header small { color: #8fd0ff; }
.fleet-map-panel header h2 { color: #fff; }
.fleet-map-panel header span { color: #d5ebf9; }
.fleet-map-canvas { position: relative; width: 100%; height: 660px; background: #dfe9ef; }
.fleet-map-canvas .leaflet-control-attribution { color: #536d80; font-size: 9px; }
.fleet-map-canvas .leaflet-control-zoom a { color: #0a67bd; font-family: inherit; font-weight: 900; }
.fleet-leaflet-marker-wrap { background: transparent; border: 0; }
.fleet-leaflet-marker { width: 26px; height: 26px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 8px; background: var(--marker-color); box-shadow: 0 3px 9px rgba(6, 36, 59, .35); color: #fff; font: 900 11px/1 inherit; transform: rotate(-45deg); }
.fleet-leaflet-marker b { transform: rotate(45deg); }
.fleet-leaflet-marker.is-live { border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--marker-color) 25%, transparent), 0 3px 9px rgba(6, 36, 59, .35); transform: none; }
.fleet-leaflet-marker.is-live b { transform: none; }
.fleet-map-canvas .leaflet-popup-content-wrapper { border-radius: 7px; box-shadow: 0 8px 22px rgba(6, 36, 59, .2); }
.fleet-map-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #36566c; font-size: 11px; }
.fleet-map-loading span { width: 28px; height: 28px; border: 3px solid #b8cfdf; border-top-color: #0878e8; border-radius: 50%; animation: dispatch-spin .8s linear infinite; }
.fleet-map-panel > footer { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #c8d8e4; background: #fff; padding: 8px 10px; }
.fleet-map-panel > footer span { display: inline-flex; align-items: center; gap: 5px; color: #506c80; font-size: 8px; font-weight: 750; }
.fleet-map-panel > footer i { width: 9px; height: 9px; border-radius: 50%; background: #738493; }
.map-dot-live { background: #13a068 !important; box-shadow: 0 0 0 3px rgba(19,160,104,.18); }
.fleet-route-summary > header { border-bottom: 1px solid #c9d9e4; background: #f8fbfd; padding: 10px; }
.fleet-route-summary > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; border-left: 5px solid var(--driver-color); border-bottom: 1px solid #d5e2eb; padding: 10px; }
.fleet-route-summary > article > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 6px; }
.fleet-route-summary article div i { grid-row: 1 / 3; width: 9px; height: 9px; align-self: center; border-radius: 50%; background: var(--driver-color); }
.fleet-route-summary article div strong { color: #17364f; font-size: 11px; }
.fleet-route-summary article div span { color: #668093; font-size: 8px; }
.fleet-route-summary article > b { color: var(--driver-color); font-size: 18px; text-align: center; }
.fleet-route-summary article > b small { display: block; color: #728898; font-size: 7px; text-transform: uppercase; }
.fleet-route-summary article p { grid-column: 1 / -1; overflow: hidden; margin: 0; color: #506b7d; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.fleet-route-summary article footer { grid-column: 1 / -1; display: flex; justify-content: space-between; color: #6a8293; font-size: 8px; font-weight: 750; }
.fleet-route-summary article footer .is-live { color: #16845a; }
.fleet-route-summary article footer .is-stale { color: #a93822; }
.fleet-map-info { min-width: 210px; display: grid; gap: 3px; color: #17364f; }
.fleet-map-info small { color: #0870d2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fleet-map-info strong { font-size: 13px; }
.fleet-map-info span { color: #526d80; font-size: 10px; }
.fleet-map-info em { color: #748a99; font-size: 9px; font-style: normal; font-weight: 800; }

.repeat-runs-hero { min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #9fbdd2; background: linear-gradient(120deg, #102f48, #174f78); padding: 14px 16px; }
.repeat-runs-hero small { color: #8fd0ff; }
.repeat-runs-hero h2 { margin: 3px 0; color: #fff; font-size: 22px; }
.repeat-runs-hero p { max-width: 680px; margin: 0; color: #d5e8f5; font-size: 10px; font-weight: 650; }
.repeat-runs-hero > div:last-child { display: flex; align-items: center; gap: 7px; }
.repeat-runs-hero > div:last-child > span { min-height: 38px; display: grid; align-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 5px; color: #dcecf7; padding: 5px 9px; font-size: 8px; font-weight: 700; }
.repeat-runs-hero span strong { color: #fff; font-size: 14px; }
.repeat-runs-list { display: grid; gap: 7px; padding: 9px; }
.repeat-run-card { display: grid; grid-template-columns: 110px minmax(0, 1fr) 210px auto; align-items: stretch; overflow: hidden; border: 1px solid #b8cede; border-left: 6px solid var(--driver-color); border-radius: 7px; background: #fff; box-shadow: 0 2px 6px rgba(16,48,72,.06); }
.repeat-run-card > div { padding: 11px 13px; }
.repeat-run-day { display: grid; align-content: center; gap: 3px; border-right: 1px solid #d6e2ea; background: color-mix(in srgb, var(--driver-color) 9%, white); }
.repeat-run-day span { color: var(--driver-color); font-size: 14px; font-weight: 950; }
.repeat-run-day strong { color: #395a70; font-size: 9px; }
.repeat-run-main { min-width: 0; display: grid; align-content: center; gap: 2px; }
.repeat-run-main small { color: var(--driver-color); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.repeat-run-main h3 { margin: 0; color: #102f48; font-size: 15px; }
.repeat-run-main span,
.repeat-run-main p { overflow: hidden; margin: 0; color: #526d80; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.repeat-run-window { display: grid; align-content: center; gap: 2px; border-left: 1px solid #d6e2ea; background: #f8fbfd; }
.repeat-run-window small { color: #6a8293; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.repeat-run-window strong { color: #17364f; font-size: 12px; }
.repeat-run-window span,
.repeat-run-window em { color: #647d8f; font-size: 8px; font-style: normal; font-weight: 700; }
.repeat-run-actions { display: flex; align-items: center; gap: 5px; }
.repeat-day-picker { display: flex; flex-wrap: wrap; gap: 5px; border: 1px solid #bfd1df; border-radius: 5px; padding: 8px; }
.repeat-day-picker legend { color: #39576c; font-size: 9px; font-weight: 850; }
.repeat-day-picker label { position: relative; }
.repeat-day-picker input { position: absolute; opacity: 0; pointer-events: none; }
.repeat-day-picker span { min-width: 44px; min-height: 31px; display: grid; place-items: center; border: 1px solid #b7cbda; border-radius: 4px; background: #f7fafc; color: #4c687c; font-size: 9px; font-weight: 850; cursor: pointer; }
.repeat-day-picker input:checked + span { border-color: #0878e8; background: #0878e8; color: #fff; box-shadow: 0 2px 5px rgba(8,120,232,.22); }

@media (max-width: 1320px) {
  .delivery-calendar-layout { grid-template-columns: 250px minmax(760px, 1fr); }
  .fleet-map-layout { grid-template-columns: 260px minmax(580px, 1fr); }
  .fleet-route-summary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); }
  .fleet-route-summary > header { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .delivery-workspace-nav { grid-template-columns: repeat(2, 1fr); }
  .delivery-schedule-toolbar,
  .fleet-map-toolbar,
  .repeat-runs-hero { align-items: flex-start; flex-direction: column; }
  .delivery-schedule-driver-bar { grid-template-columns: 1fr; }
  .delivery-calendar-layout,
  .fleet-map-layout { grid-template-columns: 1fr; }
  .fleet-map-canvas { height: 560px; }
  .repeat-run-card { grid-template-columns: 100px minmax(0, 1fr); }
  .repeat-run-window { border-top: 1px solid #d6e2ea; border-left: 0; }
}
@media (max-width: 700px) {
  .delivery-workspace-nav strong { font-size: 11px; }
  .delivery-workspace-nav span { display: none; }
  .delivery-schedule-actions { flex-wrap: wrap; }
  .delivery-calendar-head,
  .delivery-calendar-body { min-width: 870px; }
  .fleet-map-canvas { height: 470px; }
  .fleet-route-summary { grid-template-columns: 1fr; }
  .repeat-run-card { grid-template-columns: 1fr; }
  .repeat-run-day,
  .repeat-run-window { border: 0; border-bottom: 1px solid #d6e2ea; }
  .repeat-run-actions { justify-content: flex-end; }
}

/* Calendar-first dispatch: shared Empire styling, dense scheduling, contextual tools. */
.delivery-dispatch-workspace { gap: 0; }
.delivery-schedule-workspace { border-color: #b9ccda; border-radius: 7px; background: #f5f8fb; box-shadow: 0 2px 8px rgba(22, 48, 68, .07); }
.delivery-schedule-toolbar { min-height: 58px; border-bottom-color: #c7d5df; padding: 7px 10px; }
.delivery-schedule-actions > span { min-height: 31px; border-color: #d0dbe3; border-radius: 4px; background: #f8fafc; }
.delivery-schedule-actions span strong { color: #0a69c7; }

.delivery-schedule-driver-bar {
  min-height: 52px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  border-bottom: 1px solid #c5d5e0;
  background: #eef4f8;
  padding: 7px 10px;
}
.delivery-schedule-driver-bar small { color: #5d7485; }
.delivery-schedule-driver-bar > div:first-child strong { color: #17364f; font-size: 13px; }
.delivery-schedule-driver-chips { gap: 4px; }
.delivery-schedule-driver-chips button {
  min-height: 32px;
  border: 1px solid #b9cad7;
  border-radius: 4px;
  background: #fff;
  color: #36536a;
  padding: 4px 9px;
  box-shadow: none;
}
.delivery-schedule-driver-chips button:hover { border-color: #0d77df; color: #075eae; }
.delivery-schedule-driver-chips button.active { border-color: #0b73d4; background: #0878e8; color: #fff; box-shadow: 0 2px 5px rgba(8, 120, 232, .2); }
.delivery-schedule-driver-chips button b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 9px; background: #e8f0f6; color: #557084; font-size: 8px; }
.delivery-schedule-driver-chips button.active b { background: rgba(255,255,255,.2); color: #fff; }
.delivery-schedule-driver-chips button i.is-all { background: conic-gradient(#0878e8 0 25%, #16845a 0 50%, #d97706 0 75%, #7c3aed 0); }
.delivery-calendar-primary-actions { display: flex; align-items: center; gap: 5px; }
.delivery-calendar-primary-actions button { min-height: 32px; border: 1px solid #aebfcb; border-radius: 4px; background: #fff; color: #294a62; padding: 5px 10px; font-size: 9px; font-weight: 850; }
.delivery-calendar-primary-actions button.active { border-color: #0878e8; background: #e8f4ff; color: #075cae; }
.delivery-calendar-primary-actions button.primary { border-color: #0878e8; background: #0878e8; color: #fff; }

.delivery-calendar-utilities { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d0dce5; background: #fff; padding: 5px 10px; }
.delivery-calendar-utilities > span { color: #607789; font-size: 9px; font-weight: 650; }
.delivery-calendar-utilities > div { display: flex; gap: 4px; }
.delivery-calendar-utilities button { min-height: 25px; border: 0; border-radius: 3px; background: transparent; color: #1768ad; padding: 3px 7px; font-size: 9px; font-weight: 800; }
.delivery-calendar-utilities button:hover,
.delivery-calendar-utilities button.active { background: #eaf4fc; color: #075cae; }

.delivery-calendar-layout { grid-template-columns: 255px minmax(900px, 1fr); gap: 7px; padding: 7px; }
.delivery-unscheduled-tray,
.delivery-week-calendar { border-color: #bdceda; border-radius: 5px; box-shadow: none; }
.delivery-unscheduled-tray > header { min-height: 49px; background: #f6f9fb; padding: 7px 9px; }
.delivery-unscheduled-tray h2 { font-size: 14px; }
.delivery-unscheduled-list { gap: 4px; padding: 5px; }
.delivery-unscheduled-list .dispatch-stop-card { min-height: 0; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 5px; border-radius: 4px; padding: 6px; box-shadow: none; }
.delivery-unscheduled-list .dispatch-stop-card:hover { transform: none; box-shadow: 0 2px 6px rgba(20, 53, 76, .12); }
.delivery-unscheduled-list .dispatch-stop-main { gap: 0; padding: 0; }
.delivery-unscheduled-list .dispatch-stop-main small { font-size: 9px; }
.delivery-unscheduled-list .dispatch-stop-main strong { font-size: 10px; }
.delivery-unscheduled-list .dispatch-stop-main em,
.delivery-unscheduled-list .dispatch-stop-main span,
.delivery-unscheduled-list .dispatch-stop-meta,
.delivery-unscheduled-list .dispatch-stop-times > span { display: none; }
.delivery-unscheduled-list .dispatch-stop-times { grid-column: 2; grid-row: 2; min-height: 24px; }
.delivery-unscheduled-list .dispatch-stop-times label { font-size: 8px; }
.delivery-unscheduled-list .dispatch-stop-times select { min-height: 24px; font-size: 9px; }
.delivery-unscheduled-list .dispatch-stop-times { padding: 3px 6px; }
.delivery-unscheduled-list .dispatch-stop-meta { display: none; }

.delivery-calendar-head,
.delivery-calendar-body { min-width: 940px; grid-template-columns: 58px repeat(6, minmax(142px, 1fr)); }
.delivery-calendar-head button { min-height: 45px; background: #f8fafc; padding: 5px 8px; }
.delivery-calendar-head button.is-today { box-shadow: inset 0 3px #0878e8; background: #edf6fe; }
.delivery-calendar-head button.is-selected { box-shadow: inset 0 -3px #0878e8; }
.delivery-calendar-head button.is-today.is-selected { box-shadow: inset 0 3px #0878e8, inset 0 -3px #0878e8; }
.delivery-calendar-times,
.delivery-calendar-day { height: calc(var(--calendar-slots, 24) * var(--calendar-slot-height, 30px)); }
.delivery-calendar-times span { height: var(--calendar-slot-height, 30px); padding-top: 2px; font-size: 7px; }
.delivery-calendar-half-hours { grid-template-rows: repeat(var(--calendar-slots, 24), var(--calendar-slot-height, 30px)); }
.delivery-calendar-event {
  top: calc(var(--calendar-top) * var(--calendar-slot-height, 30px) + 1px);
  left: calc(3px + (100% - 6px) / var(--calendar-cols) * var(--calendar-col));
  right: auto;
  width: calc((100% - 6px) / var(--calendar-cols) - 2px);
  height: max(52px, calc(var(--calendar-span) * var(--calendar-slot-height, 30px) - 2px));
  border-left-width: 4px;
  border-radius: 3px;
  box-shadow: none;
}
.delivery-calendar-event button { gap: 2px 4px; padding: 5px 6px; }
.delivery-calendar-event time { font-size: 9px; }
.delivery-calendar-event strong { font-size: 11px; }
.delivery-calendar-event span { font-size: 8px; }
.delivery-calendar-event em { grid-column: 1 / -1; color: #a93822; font-size: 8px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.delivery-calendar-day.is-saturday::after { top: calc(var(--saturday-close-slot) * var(--calendar-slot-height, 30px)); }
.delivery-saturday-closed { top: calc(var(--saturday-close-slot) * var(--calendar-slot-height, 30px) + 8px); }

.delivery-calendar-context-panel,
.repeat-runs-workspace { margin: 7px 7px 0; border: 1px solid #b8cad7; border-radius: 5px; background: #fff; box-shadow: none; }
.delivery-context-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #c8d6e0; background: #f7fafc; padding: 8px 10px; }
.delivery-context-head small { color: #0870d2; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.delivery-context-head h2 { margin: 1px 0; color: #17364f; font-size: 16px; }
.delivery-context-head p { margin: 0; color: #657d8e; font-size: 8px; font-weight: 650; }
.delivery-context-actions { display: flex; align-items: center; gap: 7px; }
.delivery-calendar-map-layout { display: grid; grid-template-columns: minmax(600px, 2.4fr) minmax(220px, .7fr); gap: 7px; padding: 7px; }
.delivery-calendar-context-panel .fleet-map-panel,
.delivery-calendar-context-panel .fleet-route-summary { border-radius: 4px; box-shadow: none; }
.delivery-calendar-context-panel .fleet-map-canvas { height: 440px; }
.delivery-calendar-context-panel .fleet-route-summary > article { padding: 8px; }

.repeat-runs-hero { min-height: 68px; border-bottom-color: #c5d5e0; background: #f7fafc; padding: 9px 11px; }
.repeat-runs-hero small { color: #0870d2; }
.repeat-runs-hero h2 { color: #17364f; font-size: 17px; }
.repeat-runs-hero p { color: #61798a; }
.repeat-runs-hero > div:last-child > span { border-color: #c4d3de; color: #60798b; }
.repeat-runs-hero span strong { color: #0b67bd; }

.dispatch-driver-setting { grid-template-columns: 70px repeat(6, minmax(125px, 1fr)) auto; }

@media (max-width: 1200px) {
  .delivery-schedule-driver-bar { grid-template-columns: 1fr; }
  .delivery-calendar-primary-actions { justify-content: flex-start; }
  .delivery-calendar-layout { grid-template-columns: 235px minmax(820px, 1fr); }
  .delivery-calendar-map-layout { grid-template-columns: 1fr; }
}