/* /day-optimizer page styling. Mirrors the Fleet / Route AI design
 * tokens so the surface reads as part of the same family. */

.do-page { padding: 24px 28px 64px; }

/* ---- Header ---- */
.do-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 22px;
}
.do-page-head-title h1,
.do-page-head-title h2 {
  margin: 0; font: 700 28px/1.05 var(--font-display);
  letter-spacing: -0.015em; color: var(--fg-1);
}
.do-page-head-title .sub {
  color: var(--fg-3); font-size: 13.5px; margin-top: 6px;
  max-width: 720px;
}

.do-actions {
  display: flex; gap: 10px; align-items: flex-end;
}
.do-field {
  display: flex; flex-direction: column; gap: 4px;
}
.do-field .lab {
  font: 600 9.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-3);
}
.do-input {
  height: 34px; padding: 0 10px;
  background: var(--bg-input); border: 1px solid var(--border-2);
  border-radius: var(--r-md); color: var(--fg-1);
  font: 500 13px/1 var(--font-body);
}
.do-input:focus {
  border-color: var(--accent-500); outline: none;
}

/* Search-effort 3-button toggle. Replaces the legacy free-form
 * "search budget (s)" number input. Each button shows its mode
 * label + the computed seconds (derived from problem size). The
 * active button gets the accent fill so the dispatcher can see
 * at a glance which budget the next Run will use. */
.do-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-card);
}
.do-mode-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 4px 14px; min-width: 76px;
  border: none; background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  border-right: 1px solid var(--border-2);
  font: 600 11.5px/1.2 var(--font-body);
}
.do-mode-btn:last-child { border-right: none; }
.do-mode-btn:hover {
  background: var(--bg-input);
  color: var(--fg-1);
}
.do-mode-btn.active {
  background: var(--accent-500);
  color: var(--accent-on);
}
/* .lab / .sec set their own muted color, which would win over the
   inherited active color and render slate-on-amber (~1.2:1). Reassert
   the dark on-amber color for the active pill's text. */
.do-mode-btn.active .lab,
.do-mode-btn.active .sec { color: var(--accent-on); }
.do-mode-btn .lab { font-weight: 700; }
.do-mode-btn .sec {
  margin-top: 2px;
  font: 500 10px/1 var(--font-mono);
  opacity: 0.85;
}

.do-btn {
  height: 34px; padding: 0 16px; border-radius: var(--r-md);
  border: 1px solid var(--border-2); background: var(--bg-card);
  color: var(--fg-2); font: 600 13px/1 var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.do-btn:hover {
  border-color: var(--border-3); color: var(--fg-1);
}
.do-btn.primary {
  background: var(--accent-500); border-color: var(--accent-500);
  color: var(--accent-on);
}
.do-btn.primary:hover {
  background: var(--accent-400); border-color: var(--accent-400);
}
.do-btn[disabled] {
  opacity: 0.6; cursor: not-allowed;
}

/* ---- Banners ---- */
.do-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-md);
  margin-bottom: 18px; font: 500 13px/1.4 var(--font-body);
}
.do-banner.error {
  background: var(--status-issue-bg); border: 1px solid var(--status-issue-bd);
  color: var(--status-issue-fg);
}

/* ---- Summary strip ---- */
.do-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  align-items: end;
  padding: 18px 22px;
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: 18px;
  position: relative;
}
.do-summary .do-stat {
  display: flex; flex-direction: column; gap: 2px;
}
.do-summary .do-stat .big {
  font: 700 22px/1 var(--font-display);
  color: var(--accent-300);
  letter-spacing: -0.01em;
}
.do-summary .do-stat .big.warn {
  color: var(--status-issue-fg);
}
.do-summary .do-stat .lbl {
  color: var(--fg-3);
  font: 500 11.5px/1.2 var(--font-body);
}
.do-summary .do-meta {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid var(--border-1);
  color: var(--fg-3);
  font: 500 11.5px/1.4 var(--font-mono);
}
.do-summary .do-meta .lab {
  color: var(--fg-4); margin-right: 4px;
}
.do-summary .do-meta .val {
  color: var(--fg-2); margin-right: 6px;
}
.do-summary .do-meta .dot {
  color: var(--fg-4);
}

/* ---- Empty state ---- */
.do-empty {
  background: var(--bg-card); border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  padding: 36px 22px; text-align: center;
}
.do-empty h3 {
  margin: 0 0 6px 0;
  font: 600 16px/1.2 var(--font-display);
  color: var(--fg-1);
}
.do-empty .empty-body {
  color: var(--fg-3); font: 500 13px/1.5 var(--font-body);
  max-width: 600px; margin: 0 auto;
}

/* ---- Result grid ---- */
.do-grid {
  display: flex; flex-direction: column; gap: 14px;
}

.do-card {
  background: var(--bg-card); border: 1px solid var(--border-1);
  border-radius: var(--r-lg); overflow: hidden;
}
.do-card.warn {
  border-color: var(--status-issue-bd);
}
.do-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; border-bottom: 1px solid var(--border-1);
  background: var(--bg-card-2);
}
.do-card-head h3 {
  margin: 0; font: 600 14px/1 var(--font-body);
  color: var(--fg-1);
}
.do-card-head .cap-tag {
  font: 600 10px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-3);
  padding: 3px 7px; border-radius: 999px;
}
.do-card-head .spacer { flex: 1; }
.do-card-head .meta {
  font: 500 11.5px/1 var(--font-mono); color: var(--fg-3);
}
.do-card-head .meta.warn {
  color: var(--status-issue-fg); font-weight: 600;
}
.do-card-head .dot { color: var(--fg-4); margin: 0 2px; }

.do-card-empty {
  padding: 14px 18px; color: var(--fg-3);
  font: 500 12.5px/1.4 var(--font-body); font-style: italic;
}
.do-card-warn {
  padding: 10px 18px; color: var(--fg-3);
  font: 500 12px/1.4 var(--font-body);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-card-2);
}

.do-job-list { display: flex; flex-direction: column; }

.do-job-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-1);
}
.do-job-row:last-child { border-bottom: none; }
.do-job-row:hover { background: var(--bg-input); }
.do-job-row .seq {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent-500); color: var(--accent-on);
  font: 700 11.5px/1 var(--font-mono);
  flex-shrink: 0;
}
.do-job-row .body {
  flex: 1; min-width: 0;
}
.do-job-row .body .row-1 {
  font: 500 13px/1.4 var(--font-body); color: var(--fg-1);
}
.do-job-row .body .row-1 b { font-weight: 700; }
.do-job-row .body .row-1 .eta-pill {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-500); color: var(--accent-on);
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .02em;
  vertical-align: 1px;
}
.do-job-row .body .row-1 .meta {
  color: var(--fg-3); font-weight: 500;
}
.do-job-row .body .row-2 {
  margin-top: 2px;
  font: 500 11.5px/1.3 var(--font-mono); color: var(--fg-4);
}
/* Truck state after this stop. Reads as a small status line under
 * the address: "After: 1/1 full" / "After: 0/2 empty" etc. */
.do-job-row .body .row-3 {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
.do-job-row .body .row-3 .cap-after-lab {
  font: 600 9.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-4);
}
.do-job-row .body .row-3 .cap-after-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-input); color: var(--fg-2);
  border: 1px solid var(--border-2);
  font: 600 10.5px/1 var(--font-mono);
  letter-spacing: .02em;
}

/* Support-stop rows — distinct from customer rows so the dispatcher
 * can immediately see where the truck takes a disposal/yard detour. */
.do-job-row-support {
  background: rgba(96, 165, 250, 0.05);
  border-left: 3px solid rgba(96, 165, 250, 0.55);
  padding-left: 15px !important;
}
.do-job-row-support .seq-support {
  background: rgba(96, 165, 250, 0.85);
  color: white;
}
.do-job-row-support .eta-pill-support {
  background: rgba(96, 165, 250, 0.85);
  color: white;
}
.do-job-row-support .support-kind-tag {
  text-transform: uppercase;
  letter-spacing: .12em;
  font: 700 9.5px/1 var(--font-body);
  color: rgba(96, 165, 250, 1);
  margin-right: 6px;
}
.do-job-row-support .body .row-1 {
  display: flex; align-items: center; gap: 4px;
  font: 500 12.5px/1.4 var(--font-body); color: var(--fg-2);
}
.do-job-row-support .dot { color: var(--fg-4); }

/* Per-route header stats — pulled out of the dim 'meta' style so
 * the dispatcher's eye lands on each route's drive time without
 * having to compute the cumulative across all routes. */
.do-card-head .route-stat {
  font: 600 13px/1 var(--font-mono);
  color: var(--fg-1);
}
.do-card-head .route-stat-time {
  color: var(--accent-500);
}

/* Driver-name tag in the truck card header — same shape as the
 * service-type cap-tag so they read as a pair, but with a person
 * icon to make the role obvious at a glance. */
.do-card-head .driver-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-md);
  background: var(--bg-input); color: var(--fg-2);
  border: 1px solid var(--border-2);
  font: 600 11px/1 var(--font-body);
  margin-left: 8px;
}
.do-card-head .driver-tag svg { color: var(--fg-3); }

/* Shift / On-road pills in the route card header. Compact key/value
 * pairs that read as "Shift 7-4:30" / "On road 9h 32m" — let the
 * dispatcher see at a glance whether the truck is filling its day
 * or finishing early. */
.do-card-head .shift-pill,
.do-card-head .active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-md);
  background: var(--bg-input); color: var(--fg-2);
  border: 1px solid var(--border-2);
  font: 600 11px/1 var(--font-body);
}
.do-card-head .shift-pill .lab,
.do-card-head .active-pill .lab {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-4);
}
.do-card-head .shift-pill .val,
.do-card-head .active-pill .val {
  font-family: var(--font-mono);
  color: var(--fg-1);
}

/* Make the route card header click-toggle the expand state.
 * Subtle hover so the dispatcher knows it's actionable. */
.do-card-head-clickable {
  cursor: pointer; user-select: none;
}
.do-card-head-clickable:hover {
  background: rgba(255,255,255,0.02);
}
.do-card-head .expand-chevron {
  margin-left: 8px; color: var(--fg-3);
}

/* Capacity-label badge inside support-stop rows so the dispatcher
 * can see the truck's state transition through every detour. */
.do-job-row-support .body .row-1 .cap-after-pill {
  margin-left: 6px;
}
.do-job-row-support .body .row-1 .cap-after-lab {
  margin-left: 8px;
  font: 600 9.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-4);
}
.do-job-row .jid {
  font: 600 11px/1 var(--font-mono);
  color: var(--fg-4);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .do-page-head { flex-direction: column; align-items: stretch; }
  .do-actions { flex-wrap: wrap; }
}

/* ---- Input review (pre-flight) ---- */
/* Per-service-type alignment grid. Outer is a vertical stack of
 * sections — one per service type that has either jobs or trucks.
 * Inside each section, a 2-col grid (jobs | trucks) so the Roll-off
 * jobs row visually lines up with the Roll-off trucks row. Cards
 * grow to their natural height — page itself handles overflow.
 * Below the per-type rows the Undated jobs panel + Excluded
 * trucks panel render full-width.*/
.do-input-review {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 18px;
}
.do-section-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.do-col {
  display: flex; flex-direction: column;
  min-width: 0;
}
.do-col-stack {
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}
/* .do-scroll is now a no-op container — inner scroll caps removed
 * so each card's content shows in full. */
.do-scroll { /* intentionally empty */ }
@media (max-width: 980px) {
  .do-section-row {
    grid-template-columns: 1fr;
  }
}
.do-input-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
}
.do-input-table thead th {
  text-align: left; padding: 8px 14px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-1);
  font: 600 9.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--fg-4); white-space: nowrap;
}
.do-input-table thead th.action-col { width: 110px; text-align: right; }
.do-input-table tbody td {
  padding: 10px 14px; vertical-align: middle;
  font: 400 13px/1.4 var(--font-body); color: var(--fg-2);
  border-bottom: 1px solid var(--border-1);
}
.do-input-table tbody tr:last-child td { border-bottom: none; }
.do-input-table tbody tr:hover td { background: var(--bg-input); }
/* Customer cell has two lines: customer/type/action header,
 * address sub-line. Allow the customer line to wrap on narrow
 * columns so long names don't blow up the table. */
.do-input-table .customer-cell { min-width: 0; }
.do-input-table .customer-cell .row-1 {
  font: 500 13px/1.4 var(--font-body); color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.do-input-table .customer-cell .row-1 .meta {
  color: var(--fg-3); font-weight: 500;
}
.do-input-table .customer-cell .addr-line {
  margin-top: 2px;
  font: 500 11px/1.3 var(--font-mono); color: var(--fg-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.do-input-table .action-cell { text-align: right; white-space: nowrap; }
.do-input-row.dim td {
  color: var(--fg-4);
  background: rgba(0, 0, 0, 0.15);
}
.do-input-row.dim .customer-cell b {
  text-decoration: line-through;
  color: var(--fg-4);
}

/* Truck panel — service-type groups */
.do-truck-group {
  border-top: 1px solid var(--border-1);
  background: var(--bg-card);
}
.do-truck-group:first-of-type { border-top: none; }
.do-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-1);
}
.do-group-head .cap-tag {
  font: 700 10.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent-300);
}
.do-group-head .spacer { flex: 1; }
.do-group-head .meta {
  font: 500 11.5px/1 var(--font-mono); color: var(--fg-3);
}
.do-truck-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-1);
}
.do-truck-row:last-child { border-bottom: none; }
.do-truck-row:hover { background: var(--bg-input); }
.do-truck-row .body { flex: 1; min-width: 0; }
.do-truck-row .body b { font-weight: 700; color: var(--fg-1); }
.do-truck-row .body .meta { color: var(--fg-3); font-size: 12.5px; font-weight: 500; }
.do-truck-row .body .meta.accent { color: var(--accent-300); font-weight: 600; }
.do-truck-row .body .meta.dim { color: var(--fg-4); font-style: italic; }
.do-truck-row .body .addr-line {
  margin-top: 2px;
  font: 500 11.5px/1.3 var(--font-mono); color: var(--fg-4);
}
.do-truck-row.dim {
  background: rgba(0, 0, 0, 0.15);
}
.do-truck-row.dim .body b { text-decoration: line-through; color: var(--fg-4); }

/* Inline action buttons (Remove / Restore / Add to run / etc.) */
.do-row-btn {
  height: 26px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--border-2);
  background: var(--bg-card);
  color: var(--fg-2);
  font: 600 11.5px/1 var(--font-body);
  cursor: pointer;
  flex-shrink: 0;
}
.do-row-btn:hover { color: var(--fg-1); border-color: var(--border-3); }
.do-row-btn.primary {
  background: var(--accent-500); border-color: var(--accent-500);
  color: var(--accent-on);
}
.do-row-btn.primary:hover {
  background: var(--accent-400); border-color: var(--accent-400);
}
.do-row-btn.warn {
  background: transparent; border-color: var(--status-issue-bd);
  color: var(--status-issue-fg);
}
.do-row-btn.warn:hover {
  background: var(--status-issue-bg);
}
.do-row-tag {
  font: 600 10.5px/1 var(--font-body);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--bg-input); border: 1px solid var(--border-2);
  color: var(--fg-4);
  padding: 4px 8px; border-radius: 999px;
  flex-shrink: 0;
}

/* meta variants used in summary headers */
.do-card-head .meta.accent { color: var(--accent-300); font-weight: 600; }

/* Run-button busy state — spinner icon + label, both inline. */
.do-btn-busy {
  display: inline-flex; align-items: center; gap: 6px;
}
.do-spinner {
  animation: do-spin 0.9s linear infinite;
  display: inline-block;
}
@keyframes do-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Batch toggle in card header (Assign all / Unassign all). Slightly
 * taller than the per-row buttons so it reads as a header-level
 * action, but uses the same .do-row-btn primary/warn coloring. */
.do-batch-btn {
  height: 28px; padding: 0 14px;
  margin-left: 10px;
}