/* route_builder.css — Phase 8.7 design-system port for /route-builder.
 * Manual route builder is structurally complex (picker + dual columns
 * with row interactions + save bar). This re-skin is focused on the
 * outer chrome — header, picker card, column shells, save action — to
 * keep the touch radius small and avoid disturbing the per-row
 * interactions.
 */

.rb-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.rb-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rb-head .icon-tile {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.20);
  display: grid; place-items: center;
  color: var(--accent-300);
  flex-shrink: 0;
}
.rb-head .ttl {
  margin: 0;
  font: var(--fw-bold) 26px/1.05 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.rb-head .sub {
  font: var(--fw-regular) var(--fs-sm)/1.5 var(--font-body);
  color: var(--fg-3);
  max-width: 720px;
}

.rb-picker-card {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* Phase-32: per-row Available / Chain interactions ----------------- */

/* Picker input — same shape as the route_ai _INPUT but token-driven. */
.rb-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 8px 12px;
  color: var(--fg-1);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font-body);
}
.rb-input:focus {
  outline: none;
  border-color: var(--accent-500);
}
.rb-input::placeholder { color: var(--fg-4); }

/* Field label — uppercase eyebrow above each input. */
.rb-field-label {
  font: var(--fw-semi) var(--fs-micro)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-3);
}

/* Column shell — Available Jobs / Route Order outer flex column. */
.rb-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.rb-col-head h2 {
  margin: 0;
  font: var(--fw-semi) var(--fs-sm)/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-1);
}

/* Count pill — neutral on Available, amber on Chain. */
.rb-col-pill {
  font: var(--fw-semi) var(--fs-xs)/1 var(--font-body);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--fg-3);
}
.rb-col-pill.amber {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--brand-cta-fg);
  font-weight: var(--fw-bold);
}

/* Empty-state copy inside a column. */
.rb-col-empty {
  font: var(--fw-regular) var(--fs-sm)/1.5 var(--font-body);
  color: var(--fg-4);
  font-style: italic;
  padding: 16px 4px;
}

/* Single row card — shared by Available + Chain rows. */
.rb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 8px 12px;
  width: 100%;
}
.rb-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rb-row-title {
  font: var(--fw-medium) var(--fs-sm)/1.3 var(--font-body);
  color: var(--fg-1);
}
.rb-row-meta {
  font: var(--fw-regular) var(--fs-xs)/1.4 var(--font-body);
  color: var(--fg-3);
}
.rb-row-meta-muted { color: var(--fg-4); }
.rb-row-meta-undated { color: var(--accent-300); }
.rb-row-meta-error {
  color: var(--status-issue-fg);
  font-style: italic;
}

/* Add button (Available column) — amber primary when ready, neutral
 * disabled when the job is already on the chain or has no coords. */
.rb-add-btn {
  font: var(--fw-semi) var(--fs-xs)/1 var(--font-body);
  padding: 6px 12px;
  border-radius: var(--r-md);
  border: 0;
  cursor: pointer;
}
.rb-add-btn.ready {
  background: var(--accent-500);
  color: var(--brand-cta-fg);
}
.rb-add-btn.ready:hover { background: var(--brand-cta-hover); }
.rb-add-btn.disabled {
  background: var(--bg-input);
  color: var(--fg-4);
  cursor: not-allowed;
}

/* Chain row — position badge (amber circle) + up/down/remove. */
.rb-pos-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-500);
  color: var(--brand-cta-fg);
  display: grid;
  place-items: center;
  font: var(--fw-bold) 13px/1 var(--font-body);
  flex-shrink: 0;
}
.rb-icon-btn {
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--bg-input);
  border: 1px solid var(--border-2);
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rb-icon-btn:hover { background: var(--bg-card-2); color: var(--fg-1); }
.rb-icon-btn:disabled,
.rb-icon-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rb-icon-btn.danger {
  background: var(--status-issue-bg);
  border-color: var(--status-issue-bd);
  color: var(--status-issue-fg);
}
.rb-icon-btn.danger:hover { filter: brightness(1.15); }

/* Save row — primary CTA + inline flashes. */
.rb-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  width: 100%;
}
.rb-flash {
  font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-body);
  padding: 8px 12px;
  border-radius: var(--r-md);
  /* Phase 3 — multi-line enforcement violations land here.
     Preserve newlines so each violation reads as its own block
     instead of melting into a wall of text. */
  white-space: pre-line;
  max-width: 100%;
}

/* Time-window enforcement chip ("in window" / "by 12 PM") shown
   inline next to the service-window label on Available + Chain rows.
   Two tints: blue for "within" (constraint covers both bounds);
   amber for "by_end" (constraint = the close). */
.rb-enf-chip {
  display: inline-block;
  font: 600 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.rb-enf-chip.within {
  color: var(--status-enroute-fg);
  background: var(--status-enroute-bg);
  border-color: var(--status-enroute-bd);
}
.rb-enf-chip.by-end {
  color: var(--accent-300);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.30);
}
.rb-flash.error {
  color: var(--status-issue-fg);
  background: var(--status-issue-bg);
  border: 1px solid var(--status-issue-bd);
}
.rb-flash.notice {
  color: var(--status-complete-fg);
  background: var(--status-complete-bg);
  border: 1px solid var(--status-complete-bd);
}

.rb-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-500);
  color: var(--brand-cta-fg);
  font: var(--fw-bold) var(--fs-sm)/1 var(--font-body);
  letter-spacing: 0.04em;
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-glow-amber);
  transition: background 120ms ease;
}
.rb-save-btn:hover { background: var(--brand-cta-hover); }
.rb-save-btn:disabled {
  background: var(--bg-input);
  color: var(--fg-4);
  box-shadow: none;
  cursor: not-allowed;
}

/* Skipped-notes amber panel — surfaces per-job reasons after save. */
.rb-skipped {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--r-md);
  padding: 8px 12px;
  margin-top: 8px;
}
.rb-skipped-head {
  font: var(--fw-semi) var(--fs-xs)/1.2 var(--font-body);
  color: var(--accent-300);
}
.rb-skipped-line {
  font: var(--fw-regular) var(--fs-xs)/1.4 var(--font-body);
  color: var(--accent-200);
}