/* ════════════════════════════════════════
   LOAD MONITOR — RPA Stats
   ════════════════════════════════════════ */
.rpa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.rpa-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: var(--shadow-sm);
}

.rpa-stat:hover {
  border-color: var(--border-amber);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.rpa-stat .label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

.rpa-stat .value {
  font-size: 1.7rem;
  font-weight: 800;
  margin-top: 6px;
  letter-spacing: -0.5px;
}

.rpa-stat .value.accent {
  color: var(--amber);
}

.rpa-stat .value.green {
  color: var(--success);
}

.rpa-stat .value.warn {
  color: var(--warning);
}

.rpa-stat .value.red {
  color: var(--danger);
}

.rpa-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.rpa-input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 0.88rem;
  width: 320px;
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.rpa-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.btn-rpa {
  background: var(--amber);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 0.85rem;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn-rpa:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 16px var(--amber-glow);
  transform: translateY(-1px);
}

.btn-rpa.secondary {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.btn-rpa.secondary:hover {
  background: var(--surface-3);
  border-color: var(--border-strong);
}

.tag-rpa {
  display: inline-block;
  background: var(--amber-glow);
  color: var(--amber);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 2px;
  border: 1px solid var(--border-amber);
}

.status-chip {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--text-sec);
  border: 1px solid var(--border);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px;
  box-shadow: var(--shadow-sm);
}

.status-chip:hover {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.status-chip.active {
  background: var(--amber);
  color: #ffffff;
  border-color: var(--amber);
  box-shadow: 0 2px 8px var(--amber-glow);
}

/* Expandable row */
.detail-row td {
  background: var(--surface-2) !important;
  padding: 0 !important;
}

.detail-inner {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
}

.rule-chip-rpa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  margin: 4px;
  transition: var(--transition);
}

.rule-chip-rpa:hover {
  border-color: var(--border-amber);
}

.rule-chip-rpa .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}

/* Rate breakdown */
.detail-row.breakdown-tr td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 0.82rem;
}

.detail-row.breakdown-tr .bd-name {
  padding-left: 20px !important;
}

.bd-action,
.bd-charge,
.bd-total {
  font-family: var(--font-mono);
  white-space: nowrap;
}

.bd-action {
  color: var(--text-muted);
  text-align: right;
  padding-right: 10px !important;
}

.bd-charge {
  text-align: right;
  padding-right: 10px !important;
}

.bd-total {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
  padding-right: 10px !important;
}

.bd-tools {
  white-space: nowrap;
  text-align: center;
}

.bd-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 800;
}

.breakdown-base td,
.breakdown-final td {
  background: rgba(0, 0, 0, 0.015);
}

/* ── "Why this rule applied" — granular, human-readable conditions ────────
   Only the conditions that are TRUE for this load are shown, phrased in plain
   English inside a soft green card. No comparators, no actual-value dumps.
*/
.why-applied-head {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 12px 0 8px;
}

.why-applied {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.why-cond {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.why-cond__check {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--accent-border);
  color: var(--success);
  font-size: 0.66rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.why-cond__text {
  color: var(--text-sec);
}

.why-cond__field {
  color: var(--text-primary);
  font-weight: 700;
}

.why-cond__connector {
  color: var(--text-muted);
  margin: 0 3px;
}

.why-cond__value {
  color: var(--text-primary);
  font-weight: 700;
}

.bd-expand-all {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.68rem;
  padding: 3px 12px;
  margin-left: 12px;
  vertical-align: middle;
  transition: var(--transition);
}

.bd-expand-all:hover {
  color: var(--text-primary);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

/* ── Centered Breakdown Modal Dialog ─────────────────── */
#load-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 900;
  backdrop-filter: blur(4px);
}

#load-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

#load-drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -48%) scale(0.96);
  background: var(--surface);
  border: 1px solid var(--border);
  opacity: 0;
  pointer-events: none;
  z-index: 901;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#load-drawer.dialog-mode-center {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -48%) scale(0.96);
  width: min(650px, 92vw);
  max-height: 85vh;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2), 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

#load-drawer.dialog-mode-center.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.ld-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.ld-header h3 {
  margin: 0;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 700;
}

.ld-subtitle {
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.ld-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 8px;
  transition: var(--transition);
}

.ld-close:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

.ld-body {
  padding: 14px 18px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 0.88rem;
}

.ld-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

.ld-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ld-meta-wide {
  grid-column: 1 / -1;
}

.ld-meta-label {
  color: var(--text-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 800;
}

.ld-meta-value {
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
}

.ld-route-value {
  margin-top: 4px;
}

.ld-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
  margin: 4px 0 10px;
}

.ld-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 0.77rem;
  background: var(--surface);
  transition: var(--transition);
}

.ld-line:hover {
  border-color: var(--border-strong);
}

.ld-line-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 800;
}

.ld-line-total {
  font-family: inherit;
  font-weight: 700;
}

.ld-line-base {
  background: var(--amber-glow);
  border-color: var(--border-amber);
}

.ld-rule-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  transition: var(--transition);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.ld-rule-item:hover {
  border-color: var(--border-amber);
  box-shadow: var(--shadow);
}

.ld-rule-item.open {
  border-color: var(--border-amber);
  background: var(--surface-2);
}

.ld-rule-summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}

.ld-rule-chevron {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 1px;
}

.ld-rule-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: normal;
  word-break: break-word;
}

.ld-rule-charge {
  flex: 0 0 auto;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.79rem;
  line-height: 1.5;
  white-space: nowrap;
}

.ld-rule-detail {
  padding: 0 16px 14px 36px;
  border-top: 1px solid var(--border);
  animation: ld-detail-fade 0.15s ease;
}

@keyframes ld-detail-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ld-rule-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Footer row: running total on the left, Edit / Remove on the right */
.ld-rule-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.ld-rule-running {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ld-rule-running strong {
  color: var(--text-primary);
  font-family: inherit;
}

.ld-rule-tools {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ld-rule-tools button {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.72rem;
  padding: 4px 10px;
  margin-left: 6px;
  transition: var(--transition);
}

.ld-rule-tools button:hover {
  color: var(--text-primary);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

.ld-rule-tools button.danger {
  color: var(--danger);
}

.ld-rule-tools button.danger:hover {
  border-color: var(--neg-border);
  background: var(--neg-soft);
}

.ld-no-cond {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0 2px;
}

.ld-summary {
  margin-top: 16px;
  border: 1px solid var(--border-amber);
  border-radius: var(--radius);
  padding: 12px 16px;
  background: var(--amber-glow);
}

.ld-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--text-sec);
  font-family: var(--font-mono);
}

.ld-summary-final {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ld-footer {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

tr.row-drawer-open td {
  background: var(--amber-glow) !important;
}

.ld-view-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 16px;
  transition: var(--transition);
}

.ld-view-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

#panel-monitor .table-container {
  max-height: calc(100vh - 240px);
  min-height: 420px;
}

/* ── Route cell ─── */
/* ── Route block (origin → miles → destination) ──────────────────────────
   Reference design: bold ORIGIN, a centred "N miles" label riding above a
   dashed arrow lane, then bold DESTINATION. Two sizes: sm (table) / lg (drawer).
*/
.route-block {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  width: 100%;
  min-width: 0;
}

.route-block__marker {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.route-block__city {
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

/* Explicit placeholder styling for distinction from real user inputs */
input::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--text-muted, var(--ink-3)) !important;
  opacity: 0.65 !important;
  font-style: normal !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Rate Search — combined location field  ("City, ST" left | "ZIP" right)
   ══════════════════════════════════════════════════════════════════════════
   Replaces the old .sug-zip-* rules, which styled a separate ZIP row that no
   longer exists. Origin and Destination are now one control each.

   The two-alignment requirement is why this is a wrapper and not an <input>.
   A single input cannot left-align one part of its value and right-align
   another — text-align is per-element. So the WRAPPER carries the border,
   background, height and focus ring (it is what reads as "the field"), and
   inside it a transparent input takes the left and flexes, while the ZIP chip
   and caret hold the right edge. Visually one field, structurally three
   boxes.
   ────────────────────────────────────────────────────────────────────────── */
.rs-loc {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Outer green border on focus — matches brand accent, no glow */
.rs-loc:focus-within {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}

.rs-loc.is-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--neg-border);
}

/* Location Pin Icon — floats inline, no bg partition */
.rs-loc-pin {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.6;
  transition: color 0.18s ease, opacity 0.18s ease;
  margin-right: 1px;
}

/* Pin turns brand green on focus — not amber */
.rs-loc:focus-within .rs-loc-pin {
  color: var(--accent);
  opacity: 1;
}

.rs-loc-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  text-overflow: ellipsis;
}

.rs-loc.has-zip .rs-loc-input {
  flex: 0 1 auto;
}

/* Placeholder: noticeably lighter than typed value */
.rs-loc-input::placeholder {
  color: var(--text-muted);
  opacity: 0.45;
  font-weight: 400;
}

.rs-loc-hyphen {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.8rem;
  margin: 0 3px 0 1px;
}

/* The ZIP chip sitting directly next to hyphen */
.rs-loc-zip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--amber-glow);
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.rs-loc-zip:hover {
  background: var(--amber);
  color: var(--white);
}

/* Grouped right actions container: holds Clear button (X) and Chevron caret (v) on the far right edge with clean 8px gap */
.rs-loc-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding-left: 6px;
}

/* Caret chevron — floats inline, no segment border, no bg */
.rs-loc-caret {
  flex: 0 0 auto;
  color: var(--text-muted);
  opacity: 0.5;
  cursor: pointer;
  transition: transform 0.18s ease, color 0.18s ease, opacity 0.18s ease;
  width: 12px;
  height: 12px;
}

.rs-loc.is-open .rs-loc-caret {
  transform: rotate(180deg);
  color: var(--accent);
  opacity: 1;
}

.rs-loc:focus-within .rs-loc-caret {
  color: var(--accent);
  opacity: 0.8;
}

/* Per-field clear (X) button styling */
.rs-field-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-2, rgba(148, 163, 184, 0.18));
  color: var(--text-muted, var(--ink-2));
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.rs-field-clear:hover {
  background: var(--danger, var(--neg));
  color: #ffffff;
}

.rs-loc .rs-field-clear {
  position: static;
  transform: none;
  margin: 0;
}

/* ── Dropdown ─────────────────────────────────────────────────────────────
   Rows mirror the field: place left, ZIP right. A row is a preview of what
   the field will look like once it is picked. */
.rs-loc-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 288px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

/* A count for long lists. Chicago has 86 ZIPs; without a header the menu
   is an unlabelled scroll with no sense of how much is below. */
.rs-loc-head {
  padding: 6px 9px 7px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: sticky;
  top: -4px;
  background: var(--surface);
}

.rs-loc-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.rs-loc-opt:hover,
.rs-loc-opt.is-active {
  background: var(--amber-glow);
}

.rs-loc-opt-place {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rs-loc-opt-zip {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* Notes carry direction, not mood: "add the state", "5 digits". They are
   never selectable, so they must not look like a row you can click. */
.rs-loc-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-sec);
}

.rs-loc-spin {
  width: 11px;
  height: 11px;
  border: 2px solid var(--amber);
  border-right-color: transparent;
  border-radius: 50%;
  animation: rs-loc-spin 0.7s linear infinite;
}

@keyframes rs-loc-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .rs-loc,
  .rs-loc-caret,
  .rs-loc-opt {
    transition: none;
  }

  .rs-loc-spin {
    animation-duration: 2s;
  }
}

.rs-loc-err {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--neg-border);
  border-radius: 5px;
  background: var(--neg-soft);
  color: var(--danger);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.35;
}



/* The lane holds the dashed line; the miles label floats centred above it.
   flex:1 lets it absorb the leftover width so every route row lines up and
   the arrow length is dynamic. */
.route-block__lane {
  position: relative;
  flex: 1 1 auto;
  min-width: 40px;
  max-width: 110px;
  height: 1.4em;
  display: flex;
  align-items: center;
}

.route-block__miles {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  color: var(--success, var(--accent));
  font-weight: 700;
  line-height: 1;
  padding-bottom: 2px;
  white-space: nowrap;
}

/* Dashed line + arrowhead built with pure CSS so it scales cleanly.
   One continuous green dotted arrow. The shaft uses a repeating-linear-gradient
   with a FIXED dash size (not border:dashed) so short lanes render clean, evenly
   spaced dashes instead of the browser compressing them into a solid-looking bar. */
.route-block__arrow {
  position: relative;
  flex: 1 1 auto;
  min-width: 44px;
  height: 1.5px;
  border-top: 0;
  background-image: repeating-linear-gradient(to right,
      var(--success, var(--accent)) 0,
      var(--success, var(--accent)) 4px,
      transparent 4px,
      transparent 8px);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 8px 1.5px;
  margin-right: 5px;
  /* leaves room for the chevron head so it doesn't overlap the destination */
}

.route-block__arrow::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--success, var(--accent));
  border-right: 1.5px solid var(--success, var(--accent));
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

.route-block__dot {
  display: none;
}

.route-block__multistop {
  display: inline-flex;
  align-items: center;
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--border-amber);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-left: 2px;
  flex-shrink: 0;
}

/* ── Zip display (drawer only) ─────────────────────────────────────────── */
.route-block__location {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.route-block__zip {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

/* Size variants */
.route-block--sm {
  font-size: 0.84rem;
}

.route-block--sm .route-block__miles {
  font-size: 0.66rem;
}

.route-block--lg {
  font-size: 0.98rem;
  gap: 12px;
}

.route-block--lg .route-block__lane {
  max-width: 180px;
}

.route-block--lg .route-block__miles {
  font-size: 0.72rem;
}

#loads-table th:nth-child(3),
#loads-table td:nth-child(3),
#loads-table-nobid th:nth-child(3),
#loads-table-nobid td:nth-child(3) {
  min-width: 280px;
}

/* ── Multi-stop timeline (drawer) ─────────────────────────────────────── */
.ld-timeline {
  margin-top: 4px;
}

.ld-timeline-header {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}

.ld-timeline-list {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ld-timeline-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  position: relative;
}

.ld-timeline-line {
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: -6px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}

.ld-timeline-line.last {
  display: none;
}

.ld-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.ld-timeline-node.terminal .ld-timeline-dot {
  border-color: var(--amber);
  background: var(--amber-glow);
}

.ld-timeline-node.intermediate .ld-timeline-dot {
  border-color: var(--text-muted);
  background: var(--surface-2);
}

.ld-timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ld-timeline-city {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.ld-timeline-zip {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  margin-left: 2px;
}

.ld-timeline-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}

.ld-timeline-node.terminal .ld-timeline-label {
  color: var(--amber);
}

.ld-timeline-appt {
  font-size: 0.72rem;
  color: var(--text-sec);
  font-family: var(--font-mono);
}

/* ── Load Monitor filter dropdown ─────────────────────────────────────────
   A full rectangular dropdown sheet (not a small popover). Opens below the
   toolbar with all filters laid out in a responsive two-column grid.
*/
.rpa-filter-wrap {
  position: relative;
}

.rpa-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 10px 16px;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.rpa-filter-btn:hover,
.rpa-filter-btn.active {
  color: var(--text-primary);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

.rpa-filter-caret {
  transition: transform 0.2s var(--ease-out-expo);
  opacity: 0.7;
}

.rpa-filter-btn[aria-expanded='true'] .rpa-filter-caret {
  transform: rotate(180deg);
}

.rpa-filter-count {
  background: var(--amber);
  color: #fff;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* Full-width filter bar — sits in normal flow between the toolbar and the
   table, so opening it PUSHES THE TABLE DOWN rather than overlaying it.
   Collapse/expand is driven by max-height for a smooth slide. */
.rpa-filter-panel {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height 0.28s var(--ease-out-expo), opacity 0.2s ease,
    margin 0.28s var(--ease-out-expo);
}

.rpa-filter-panel.open {
  max-height: 640px;
  /* generous cap; content is far shorter */
  opacity: 1;
  margin: 14px 0 4px;
}

.rpa-filter-panel__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rpa-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}

.rpa-filter-panel__title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* Four-column grid across the full table width; full-width fields span all. */
.rpa-filter-panel__body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 22px;
  padding: 20px;
}

.rpa-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rpa-filter-field--full {
  grid-column: 1 / -1;
}

.rpa-filter-field>label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 800;
}

.rpa-filter-field .rpa-input,
.rpa-filter-field .db-select {
  width: 100%;
  padding: 9px 11px !important;
  font-size: 0.82rem !important;
}

.rpa-mono {
  font-family: var(--font-mono);
}

.rpa-filter-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rpa-filter-range .rpa-input {
  flex: 1;
  min-width: 0;
}

.rpa-filter-sep {
  color: var(--text-muted);
  flex: 0 0 auto;
}

.rpa-filter-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rpa-filter-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.74rem;
  padding: 6px 14px;
  transition: var(--transition);
  font-weight: 600;
}

.rpa-filter-clear:hover {
  color: var(--danger);
  border-color: var(--neg-border);
  background: var(--neg-soft);
}

@media (max-width: 1024px) {
  .rpa-filter-panel__body {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .rpa-filter-panel__body {
    grid-template-columns: 1fr;
  }
}

/* ── Load Monitor pagination ───────────────── */
.rpa-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 6px 8px;
}

.rpa-page-info {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.rpa-page-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rpa-page-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sec);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 16px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.rpa-page-btn:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--border-amber);
  background: var(--amber-glow);
}

.rpa-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rpa-page-num {
  font-size: 0.78rem;
  color: var(--text-sec);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.breakdown-final td {
  border-top: 1px solid var(--border-amber);
}

.rb-action-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--amber-glow);
  border: 1px solid var(--border-amber);
  color: var(--amber);
  font-weight: 700;
  font-size: 0.76rem;
}

.detail-row.detail-row-head td,
.detail-row.detail-row-foot td {
  padding: 0 !important;
}

.live-badge {
  background: var(--success);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  animation: pulse 1.4s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.85);
  }
}

.pulsing-red-badge {
  background: var(--neg-soft);
  color: var(--danger);
  border: 1px solid var(--neg-border);
  animation: pulse-red 2s infinite ease-in-out;
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 var(--neg-border);
  }

  70% {
    box-shadow: 0 0 0 6px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.no-bid-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin-left: 5px;
  vertical-align: middle;
  animation: badgePopIn 0.35s var(--ease-spring);
}

@keyframes badgePopIn {
  from {
    transform: scale(0);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Collapsed sidebar: tiny red dot at top-right of icon */
.app-layout.sidebar-collapsed .no-bid-badge {
  display: block;
  position: absolute;
  top: 7px;
  right: 8px;
  min-width: 7px;
  width: 7px;
  height: 7px;
  padding: 0;
  font-size: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--danger);
  color: transparent;
  border: none;
  animation: none;
  box-shadow: none;
}

/* Active tab: badge must pop against teal background */
.sidebar-nav .tab-btn.active .no-bid-badge {
  background: #fff !important;
  color: var(--danger) !important;
  border-color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  animation: none !important;
}

/* Collapsed active tab: red dot with white ring so it pops */
.app-layout.sidebar-collapsed .sidebar-nav .tab-btn.active .no-bid-badge {
  background: var(--danger) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.decline-box {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.status-nobid {
  display: inline-block;
  background: var(--neg-soft);
  color: var(--danger);
  border: 1px solid var(--neg-border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.7rem;
  font-weight: 700;
}

.status-accepted {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--success);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.7rem;
  font-weight: 700;
}

.status-overridden {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Override modal */
#override-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

#override-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.override-rule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.override-rule-item:hover {
  background: var(--surface-2);
}

.override-rule-item.is-nobid {
  background: var(--neg-soft);
  border: 1px solid var(--neg-soft);
}

.override-rule-item.is-standard {
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft);
}

.override-rule-link {
  flex: 1;
  font-size: 0.85rem;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s;
}

.override-rule-link:hover {
  color: var(--text-primary);
}

.override-warning {
  background: var(--neg-soft);
  border: 1px solid var(--neg-border);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.82rem;
  margin-top: 14px;
  display: none;
}

.edit-btn-nobid {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.edit-btn-nobid:hover {
  background: var(--accent-border);
  border-color: var(--accent-border);
}

/* Fix table border alignment */
.rules-table tr {
  cursor: pointer;
}

/* ════════════════════════════════════════
   ANALYST WORKPLACE
   ════════════════════════════════════════ */
.analyst-workplace {
  margin: 28px 24px 40px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  box-shadow: var(--shadow);
}

.aw-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.aw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--amber-glow);
  color: var(--amber);
  border: 1px solid var(--border-amber);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aw-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.aw-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  outline: none;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.aw-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.aw-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.aw-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.aw-stat:hover {
  border-color: var(--border-amber);
  background: var(--surface-3);
  transform: translateY(-1px);
}

.aw-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-weight: 700;
}

.aw-stat-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--amber);
  letter-spacing: -0.5px;
}

.aw-results .table-wrapper {
  margin: 0;
}

.aw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-muted);
  text-align: center;
}

.aw-empty p {
  margin-top: 12px;
  font-size: 0.85rem;
}

.aw-disclaimer {
  margin: 16px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* ════════════════════════════════════════
   SYNTHETIC LOADS STYLES
   ════════════════════════════════════════ */
.synthetic-branch {
  margin-bottom: 32px;
}

.synthetic-branch-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.synthetic-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.synthetic-column {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.synthetic-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.synthetic-column-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.synthetic-match-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.synthetic-match-badge.match {
  background: var(--accent-soft);
  color: var(--success);
  border: 1px solid var(--accent-border);
}

.synthetic-match-badge.no-match {
  background: var(--neg-soft);
  color: var(--danger);
  border: 1px solid var(--neg-border);
}

@media (max-width: 768px) {
  .synthetic-columns {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════
   DATABASE TEST STYLES
   ════════════════════════════════════════ */
.aw-db-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.aw-db-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.aw-db-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.aw-db-stat:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.aw-db-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 700;
}

.aw-db-stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.aw-db-table-wrapper {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.aw-db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.aw-db-table th {
  background: var(--surface-3);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.aw-db-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-sec);
}

.aw-db-table tr:last-child td {
  border-bottom: none;
}

.aw-db-table tr:hover td {
  background: var(--surface-3);
}

.aw-db-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.aw-db-empty svg {
  stroke: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Rule-level rollup ────────────────────────────────────────────────────
   The DB test used to render one titled section per sub-rule, each with its
   own stats pair and table. .aw-db-branch-title was that section heading and
   is kept only so an older cached app.js doesn't render an unstyled string;
   nothing in the current render emits it. Everything below styles the single
   rule-level block that replaced those sections. */
.aw-db-branch-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Four tiles at most (the fourth only appears on multi-sub-rule rules), so
   a fixed auto-fit floor keeps them even instead of letting "Match Rate"
   collapse next to a wide "Sub-Rules Firing". */
.aw-db-rollup .aw-db-stats {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Chips naming which sub-rules caught this load. Only rendered when the
   rule has more than one — on a single-branch rule the column would just
   repeat the rule name down every row. */
.aw-subrule-cell {
  max-width: 260px;
  white-space: normal;
}

.aw-subrule-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* Marks a rate that is the sum of several sub-rule contributions rather
   than one branch's figure — see fmtAwImpact() in app.js. */
.aw-combined-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--amber-glow);
  border: 1px solid var(--border-amber);
  color: var(--amber);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
}

/* Separates the stacked breakdown panels inside an expanded row when more
   than one sub-rule matched the same load. */
.aw-detail-subrule-head {
  margin: 14px 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.aw-detail-subrule-head:first-child {
  margin-top: 0;
}

/* ════════════════════════════════════════
   CALENDAR STYLES
   ════════════════════════════════════════ */
.calendar-layout {
  max-width: 2000px;
  margin: 16px auto 24px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
  position: relative;
  box-shadow: var(--shadow);
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  min-width: 160px;
  text-align: center;
  letter-spacing: -0.3px;
}

.calendar-legend {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.legend-weekend {
  background: var(--accent-border);
  border: 1px solid var(--accent-border);
}

.legend-holiday {
  background: var(--neg-border);
  border: 1px solid var(--neg-border);
}

.legend-rules {
  background: var(--accent-border);
  border: 1px solid var(--accent-border);
}

.legend-conflict {
  background: var(--warn-border);
  border: 1px solid var(--warn-border);
}

.legend-today {
  background: var(--amber);
  border: 1px solid var(--amber);
}

.calendar-grid-container {
  width: 100%;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 76px;
  padding: 7px;
  transition: var(--transition);
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.cal-cell.cal-day {
  /* Just tall enough for the day number + up to 2 rule-name pills + an
     optional "+N more"/"Conflict" pill — kept compact so a full month
     (up to 6 rows) fits on screen without scrolling, while the width
     constraint on .calendar-layout keeps cells from reading as flat,
     overly wide strips. */
  min-height: 104px;
}

.cal-cell:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
  transform: translateY(-1px);
}

.cal-header {
  background: var(--surface-3);
  min-height: auto;
  padding: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-align: center;
  cursor: default;
  border-radius: 6px;
}

.cal-empty {
  background: transparent;
  border: none;
  cursor: default;
  box-shadow: none;
}

.cal-day-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cal-weekend {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.cal-weekend .cal-day-num {
  color: var(--accent);
}

.cal-header-weekend {
  color: var(--accent) !important;
  background: var(--accent-soft);
}

.cal-holiday {
  background: var(--neg-soft);
  border-color: var(--neg-soft);
}

.cal-has-rules {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.cal-conflict {
  border-color: var(--warn-border);
  box-shadow: inset 0 0 0 1px var(--warn-soft);
}

.cal-today .cal-day-num {
  color: var(--amber);
  font-weight: 800;
}

.cal-today {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), var(--shadow-sm);
}

.cal-holiday-label {
  font-size: 0.65rem;
  color: var(--danger);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}

.cal-pills {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.cal-pill {
  font-size: 0.65rem;
  line-height: 1.3;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-pill-standard {
  background: var(--amber-glow);
  color: var(--amber-dark, var(--amber));
}

.cal-pill-nobid {
  background: var(--neg-soft);
  color: var(--neg);
}

.cal-pill-conflict {
  background: var(--warn-border);
  color: var(--warn);
}

.cal-pill-more {
  background: var(--surface-3);
  color: var(--text-muted);
}

[data-theme="dark"] .cal-pill-nobid {
  color: var(--neg);
}

[data-theme="dark"] .cal-pill-conflict {
  color: var(--warn);
}

/* Day Panel */
.day-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.25);
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.day-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.08);
}

.day-panel.open {
  transform: translateX(0);
}

.day-panel-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-panel-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.day-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: var(--transition);
}

.day-panel-close:hover {
  color: var(--text-primary);
  background: var(--surface-2);
}

.day-panel-rules {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.day-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

.day-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 0;
}

.day-rule-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
  transition: var(--transition);
}

.day-rule-card:hover {
  border-color: var(--border-strong);
}

.day-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.day-rule-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.day-rule-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-standard {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.badge-nobid {
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
}

.day-rule-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.day-rule-action {
  font-size: 0.8rem;
  color: var(--amber);
  margin-bottom: 8px;
  font-weight: 600;
}

.day-rule-actions {
  display: flex;
  gap: 8px;
}

.day-type-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 12px;
  margin-top: 4px;
  display: inline-block;
}

/* Modal */
.calendar-modal {
  position: fixed;
  inset: 0;
  background: rgba(12, 10, 9, 0.35);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(8px);
}

.calendar-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 520px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.cal-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cal-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.cal-modal-header p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.cal-step {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.cal-step-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.cal-scope-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cal-scope-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.88rem;
}

.cal-scope-option:hover {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.cal-scope-option input {
  cursor: pointer;
}

.cal-scope-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.unsupported-tag {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 2px 8px;
  border-radius: 4px;
}

.cal-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
}

.cal-conflict-warning {
  background: var(--warn-soft);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--text-primary);
  font-size: 0.85rem;
}

.btn-sm {
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
}

.btn-edit {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.btn-edit:hover {
  background: var(--accent-border);
}

.btn-delete {
  background: var(--neg-soft);
  color: var(--neg);
  border: 1px solid var(--neg-border);
}

.btn-delete:hover {
  background: var(--neg-border);
}

/* Calendar modal NLP builder */
.calendar-modal-box {
  width: 640px;
}

.nlp-textarea {
  width: 100%;
  padding: 14px;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  font-size: 0.88rem;
  line-height: 1.5;
  transition: var(--transition);
  box-sizing: border-box;
  font-family: inherit;
}

.nlp-textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.cal-nlp-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.cal-status-area {
  margin-top: 12px;
}

.cal-status-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.cal-status-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-sec);
}

.cal-clarify-section {
  margin-top: 10px;
}

.cal-progress-section {
  margin-top: 10px;
}

.cal-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cal-progress-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
}

.cal-progress-pct {
  font-size: 0.72rem;
  color: var(--amber);
  font-weight: 700;
}

.cal-progress-bar-track {
  height: 6px;
  background: var(--surface-3);
  border-radius: 10px;
  overflow: hidden;
}

.cal-progress-bar-fill {
  height: 100%;
  background: var(--amber);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.cal-progress-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cal-preview-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.cal-preview-summary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
}

.cal-preview-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.cal-date-chip {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  font-weight: 600;
}

.cal-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.cal-inline-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-top: 8px;
  padding: 0 24px;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 2px;
  border: 2px solid currentColor;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: currentColor transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Holiday modal */
.holiday-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: var(--transition);
}

.holiday-item:hover {
  border-color: var(--border-strong);
}

.holiday-date {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.holiday-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.holiday-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 24px 0;
}

/* ── Try Rule Button ────────── */
.btn-try-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 12px 14px;
  background: transparent;
  border: 1.5px solid var(--amber);
  color: var(--amber);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.btn-try-rule:hover {
  background: var(--amber);
  color: #ffffff;
  box-shadow: 0 4px 16px var(--amber-glow);
  transform: translateY(-1px);
}

/* ── Ensure Save / Try Rule actions are never clipped ─────────── */
.preview-actions {
  flex-shrink: 0 !important;
  flex-grow: 0;
}

.preview-panel {
  max-height: calc(100vh - 112px);
}

@media (max-width: 1100px) {
  .preview-panel {
    max-height: none;
  }
}

#try-rule-btn:not([style*='display:none']):not([style*='display: none']) {
  display: flex !important;
}

/* ── Preview-actions responsive: Option A ────────────────────────
   1. ≤480px  : shrink button padding and font before stacking
   2. ≤380px  : stack vertically
──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .preview-actions {
    gap: 6px;
  }

  .btn-save,
  .btn-try-rule {
    padding: 9px 8px;
    font-size: 0.78rem;
    gap: 5px;
  }

  .btn-save svg,
  .btn-try-rule svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 380px) {
  .preview-actions {
    flex-direction: column;
    gap: 8px;
  }

  .btn-save,
  .btn-try-rule {
    flex: none;
    width: 100%;
    padding: 12px 14px;
    font-size: 0.9rem;
    gap: 8px;
  }

  .btn-save svg,
  .btn-try-rule svg {
    width: 15px;
    height: 15px;
  }
}

/* ── Enhanced Client Multi-Select ──────────── */
.client-ms-trigger:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.client-ms-trigger.open {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

.client-ms-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 0.84rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  border-radius: 4px;
  margin: 0 4px;
}

.client-ms-opt::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.15s;
  background: var(--surface-3);
}

.client-ms-opt:hover {
  background: var(--surface-3);
}

.client-ms-opt.selected {
  color: var(--amber);
}

.client-ms-opt.selected::before {
  background: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpolyline points='1,5 4.5,9 11,1' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}

.client-ms-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  background: var(--surface-2, #f1f5f9) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--border-strong, #cbd5e1) !important;
  border-radius: 9999px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

[data-theme='dark'] .client-ms-tag {
  background: var(--surface-2, #2c2829) !important;
  color: var(--text-primary, #ffffff) !important;
  border-color: var(--border, #3d393a) !important;
}

.client-ms-tag:hover {
  background: var(--accent-soft, #e6f4f0) !important;
  border-color: var(--accent, #00503a) !important;
  color: var(--accent, #00503a) !important;
}

[data-theme='dark'] .client-ms-tag:hover {
  background: var(--accent-border, #1e3a2f) !important;
  border-color: var(--accent-border, #4d9c7f) !important;
  color: var(--accent-border, #4d9c7f) !important;
}

.client-ms-tag .remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  margin-left: 2px !important;
  opacity: 0.75 !important;
  transition: opacity 0.15s ease !important;
}

.client-ms-tag:hover .remove {
  opacity: 1 !important;
}

/* Scope badge styles */
.scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.scope-badge.global {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.scope-badge.margin {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.scope-badge.client {
  background: var(--accent-soft);
  color: var(--amber);
  border: 1px solid var(--accent-border);
}

.scope-badge.name-match {
  background: var(--neg-soft);
  color: var(--danger);
  border: 1px solid var(--neg-border);
}

.client-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-3);
  color: var(--text-sec);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.client-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.scope-cell-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Builder scope selector styles */
.builder-scope-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.builder-scope-field,
.builder-client-field {
  flex: 1;
  min-width: 160px;
}

.builder-field-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.builder-scope-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: var(--transition);
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.builder-scope-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

/* ═══ Rate breakdown: per-rule contribution + total (independent pricing model) ═══ */
/* Contribution block inside expanded rule footer */
.ld-rule-contrib-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ld-rule-contrib-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.ld-rule-contrib-value {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Secondary running-sum line — explicitly muted and labeled as display-only */
.ld-rule-running-sum {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
  margin-top: 1px;
}

/* "Total of all contributions" block — shown once, below all rule cards */
.ld-total-contributions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.ld-total-contrib-label {
  font-size: 0.78rem;
  color: var(--text-sec);
  letter-spacing: 0.01em;
}

.ld-total-contrib-value {
  font-size: 0.95rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}

/* ═══ Variable tags + variable filter multiselect dropdown ═══ */
.var-badge {
  display: inline-flex;
  align-items: center;
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-right: 4px;
  margin-bottom: 4px;
  vertical-align: middle;
}

/* Custom Multi-select Dropdown for Variables */
.db-multiselect-wrap {
  position: relative;
  display: inline-block;
}

.db-multiselect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 170px;
  justify-content: space-between;
}

.db-multiselect-badge {
  background: var(--amber);
  color: #fff;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.db-multiselect-arrow {
  font-size: 0.65rem;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.db-multiselect-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  margin-top: 6px;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-multiselect-actions {
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.db-multiselect-clear {
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
}

.db-multiselect-clear:hover {
  color: var(--amber);
}

.db-multiselect-options {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-sec);
  cursor: pointer;
  user-select: none;
}

.db-multiselect-option input[type="checkbox"] {
  accent-color: var(--amber);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.db-multiselect-option:hover {
  color: var(--text-primary);
}

/* ── Tabular Monospace Ledger Math Trail ── */
.ld-ledger {
  display: grid;
  grid-template-columns: 1fr auto minmax(100px, max-content);
  gap: 8px 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 10px;
}

.ld-ledger-row-contents {
  display: contents;
}

.ld-ledger-label {
  font-size: 0.78rem;
  color: var(--text-sec);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ld-ledger-badge-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ld-ledger-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}

.ld-ledger-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border);
  opacity: 0.6;
  margin: 6px 0;
}

/* Distinct weights for final sub-rule/rule values */
.ld-ledger-val.ld-ledger-final-val {
  font-size: 0.92rem;
  font-weight: 700;
}

/* Clamp Badge styling */
.ld-clamp-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
}

.ld-clamp-badge.active {
  background: var(--warn-soft);
  color: var(--warning);
  border: 1px solid var(--warn-border);
}

.ld-clamp-badge.inactive {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Beautiful Premium Card Summary design for the Drawer */
#load-drawer .ld-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--accent-soft);
  /* soft teal tint */
  border: 1.5px solid var(--accent-border);
  /* teal border */
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 20px;
  position: static;
  box-shadow: none;
}

[data-theme="dark"] #load-drawer .ld-summary {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

#load-drawer .ld-summary-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border: none;
  margin: 0;
  background: none;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--text-muted);
}

#load-drawer .ld-summary-row span:first-child {
  font-size: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
  font-weight: 500;
}

#load-drawer .ld-summary-row span:last-child {
  font-size: inherit;
  font-weight: 600;
  color: var(--text-primary);
  font-family: inherit;
}

#load-drawer .ld-summary-row.ld-summary-final {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 6px;
  padding-top: 10px;
}

[data-theme="dark"] #load-drawer .ld-summary-row.ld-summary-final {
  border-color: rgba(255, 255, 255, 0.08);
}

#load-drawer .ld-summary-row.ld-summary-final span:first-child {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
}

#load-drawer .ld-summary-row.ld-summary-final span:last-child {
  font-size: 1.25rem;
  font-weight: 700;
}

/* Flattened Metadata spacing/borders */
.ld-meta {
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0 0 20px 0;
  margin-bottom: 24px;
  box-shadow: none;
  gap: 16px 24px;
}

/* Tooltip styles for the new subtotal row */
.ld-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ld-tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 135%;
  left: 0;
  background: var(--surface-2, var(--ink));
  color: var(--text-primary, var(--surface-2));
  border: 1px solid var(--border-strong, var(--ink));
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.4;
  white-space: pre;
  z-index: 150;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(4px);
  pointer-events: none;
  border-left: 3px solid var(--amber, var(--warn));
  text-align: left;
}

.ld-tooltip-wrap:hover .ld-tooltip-content,
.ld-tooltip-wrap:active .ld-tooltip-content,
.ld-tooltip-wrap:focus .ld-tooltip-content,
.ld-tooltip-wrap:focus-within .ld-tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.ld-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-top: 14px;
  margin-bottom: 6px;
}

/* ── Comparator Popover matching Variable Dropdown styling ───────────────── */
.custom-popover-panel {
  border-radius: 10px !important;
  padding: 4px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.custom-popover-panel .rule-target-option {
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
}

.custom-popover-panel .rule-target-option:hover {
  background: var(--surface-2) !important;
}

.custom-popover-panel .rule-target-option[aria-selected='true'] {
  color: var(--amber) !important;
  background: var(--accent-soft) !important;
  font-weight: 500 !important;
}

.custom-popover-panel .rule-target-option-check {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RATE SEARCH MICRO-INTERACTIONS & ANIMATION STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* Results wrapper smooth fade/slide in */
#sug-results-wrapper {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#sug-results-wrapper.sug-entering {
  opacity: 0;
  transform: translateY(12px);
}

/* 1. Price Pulse & Glow on Update */
@keyframes sugPricePulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(30, 120, 70, 0));
  }
  40% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px rgba(30, 120, 70, 0.45));
    color: var(--accent);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(30, 120, 70, 0));
  }
}

.sug-price-pulse-active {
  animation: sugPricePulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Animated Route Line with moving dot in transit */
.sug-route-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.sug-route-dashed-line {
  position: relative;
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--accent-border);
  min-width: 60px;
}

.sug-route-moving-dot {
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: sugTruckTransit 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sugTruckTransit {
  0% {
    left: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* 3. Staggered Entrance for Cost Breakdown Line Items */
@keyframes sugRungSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sug-summary-row {
  opacity: 0;
  animation: sugRungSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sug-summary-row:nth-child(1) { animation-delay: 0ms; }
.sug-summary-row:nth-child(2) { animation-delay: 70ms; }
.sug-summary-row:nth-child(3) { animation-delay: 140ms; }
.sug-summary-row:nth-child(4) { animation-delay: 210ms; }

/* 4. Sliding Pill Segmented Control (iOS Feel) */
.sug-segmented-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  gap: 0;
  user-select: none;
  width: 154px;
  box-sizing: border-box;
}

.sug-seg-backdrop {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: 73px;
  border-radius: 16px;
  background: var(--accent);
  box-shadow: 0 2px 6px var(--accent-border);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.sug-segmented-control[data-mode="all_in"] .sug-seg-backdrop {
  transform: translateX(0);
}

.sug-segmented-control[data-mode="line_haul"] .sug-seg-backdrop {
  transform: translateX(75px);
}

.sug-seg-btn {
  position: relative;
  z-index: 2;
  flex: 1 1 50%;
  width: 50%;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 0;
  text-align: center;
  white-space: nowrap !important;
  word-break: keep-all !important;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6b7280);
  transition: color 0.22s ease;
}

.sug-segmented-control[data-mode="all_in"] .sug-seg-btn[data-val="all_in"],
.sug-segmented-control[data-mode="line_haul"] .sug-seg-btn[data-val="line_haul"] {
  color: #ffffff !important;
}

/* 5. Precision Warning Card */

.sug-precision-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  margin-top: 14px;
  margin-bottom: 6px;
  background: var(--accent-soft, rgba(30, 120, 70, 0.05));
  border: 1.5px dashed var(--accent-border, rgba(30, 120, 70, 0.28));
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.sug-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent-border);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.sug-add-chip:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(30, 120, 70, 0.2);
}

/* 5. Chart Tooltip Container */
.sug-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 100;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  transition: opacity 0.12s ease, transform 0.12s ease;
  display: none;
}


.custom-popover-panel::-webkit-scrollbar {
  width: 6px;
}

.custom-popover-panel::-webkit-scrollbar-track {
  background: transparent;
}

.custom-popover-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.custom-popover-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   RATE BREAKDOWN — MARGIN RULES
   ──────────────────────────────────────────────────────────────────────────
   Margin rules are the last pricing stage: they are computed on the
   PA-adjusted subtotal, not the base rate. They used to render identically
   to the Price Augmentation cards above them, so they read as "one more PA
   rule" instead of "a separate stage on top".

   The fix is deliberately small — same card shape as PA so the panel stays
   consistent, but a different accent, an "applied last" marker, and the
   shared basis stated once in the header. The accent is --cat-4 from the
   brand category ramp, which is defined in both light and dark themes.
   Green stays reserved for money.

   Presentation only. No pricing logic lives here.
   ══════════════════════════════════════════════════════════════════════ */

.ld-mg-head {
  --mg: var(--cat-4);
  --mg-soft: var(--cat-4-soft);
  --mg-border: var(--cat-4-border);
  margin-top: 20px;
  color: var(--mg);
}

.ld-mg-head .ld-mg-last {
  margin-left: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ld-mg-head .ld-mg-last::before { content: '\00b7'; margin-right: 5px; }

/* The basis, said once — every rule below shares it. */
.ld-mg-basis {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  white-space: nowrap;
}

.ld-mg-rule {
  --mg: var(--cat-4);
  --mg-soft: var(--cat-4-soft);
  --mg-border: var(--cat-4-border);
  border-color: var(--mg-border);
}

.ld-mg-rule:hover,
.ld-mg-rule.open {
  border-color: var(--mg);
  background: var(--surface);
}

.ld-mg-rule-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.ld-mg-rule-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* min-width:0 lets a long name wrap instead of pushing the amount out. */
.ld-mg-rule-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

/* How the number was reached: "+30%", "flat", "−7.5%". */
.ld-mg-rate {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--mg-soft);
  color: var(--mg);
  border: 1px solid var(--mg-border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Tabular figures keep amounts aligned when rules stack; nowrap keeps large
   values on one line. */
.ld-mg-charge {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.ld-mg-chevron {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--mg);
}

.ld-mg-rule-detail {
  padding: 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--mg);
}

/* ══ Edit Rule Modal Card Chunking & Zebra Striping ═══════════════ */
.edit-modal-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #dfe5e8);
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

[data-theme='dark'] .edit-modal-card {
  background: var(--surface-1, #1e1b1c);
  border-color: var(--surface-3, #332f30);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.edit-section-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-sec);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.edit-section-scope {
  border-left: 4px solid var(--accent, #00503a) !important;
}

.edit-section-action {
  border-left: 4px solid #6366f1 !important;
}

.edit-section-settings {
  border-left: 4px solid var(--text-muted, #94a3b8) !important;
}

/* CONDITIONS zebra striping & row separation */
#criteria-container > div {
  padding: 10px 12px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border, #dfe5e8) !important;
  transition: background 0.15s ease !important;
}

#criteria-container > div:nth-child(odd) {
  background: var(--surface, #ffffff) !important;
}

#criteria-container > div:nth-child(even) {
  background: var(--surface-1, #f7f9fa) !important;
}

[data-theme='dark'] #criteria-container > div:nth-child(odd) {
  background: var(--surface-1, #1e1b1c) !important;
  border-color: var(--surface-3, #332f30) !important;
}

[data-theme='dark'] #criteria-container > div:nth-child(even) {
  background: var(--surface-2, #252223) !important;
  border-color: var(--surface-3, #332f30) !important;
}

.ld-mg-detail-head {
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The intermediate step that makes Base -> PA -> Margin -> Total readable. */
.ld-summary-row.ld-summary-step {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 640px) {
  .ld-mg-rule-summary { flex-wrap: wrap; }
  .ld-mg-rule-title { flex: 1 1 100%; order: 1; }
  .ld-mg-rule-num { order: 0; }
  .ld-mg-rate { order: 2; }
  .ld-mg-charge { order: 3; margin-left: auto; }
  .ld-mg-chevron { order: 4; }
}