/* ============================================================
   booking.css — Booking feature–specific styles
   Used by BookingFeature.js (was standalone Book Order.html)
   ============================================================ */

/* ============================================================
   SHARED PRIMITIVES
   The booking view renders .seg, .ptable, .strong/.sub/.mono,
   .ell, .hint and .pill.a/.pill.p, but those base styles were
   only ever defined for other views (.cancel-view) or not at
   all — so they fell back to plain unstyled text.
   ============================================================ */

/* Segmented control */
.booking-view .seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--elev); border-radius: var(--r-md); flex-wrap: wrap }
.booking-view .seg button {
  height: 28px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: inherit; font-size: 10.5px; font-weight: 500; color: var(--label); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.booking-view .seg button:hover:not(.on) { background: var(--elev2); color: var(--text) }
.booking-view .seg button.on { background: var(--card); color: var(--primary-dark); font-weight: 600; box-shadow: var(--shadow) }
.booking-view .seg button .i { width: 12px; height: 12px }

/* Tables */
.booking-view .ptable { width: 100%; border-collapse: collapse; table-layout: auto }
.booking-view .ptable thead th {
  text-align: left; font-size: 9px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 8px 9px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.booking-view .ptable tbody td { padding: 9px 8px; font-size: 10.5px; color: var(--label); border-bottom: 1px solid var(--border); vertical-align: top }
.booking-view .ptable tbody tr:last-child td { border-bottom: 0 }
.booking-view .ptable tbody tr:hover td { background: var(--elev2) }
.booking-view .ptable td.empty { text-align: center; color: var(--muted); padding: 28px 10px !important; font-size: 11px }

/* Inline text helpers */
.booking-view .strong { display: block; font-weight: 600; color: var(--text) }
.booking-view .sub { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; line-height: 1.4 }
.booking-view .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .2px }
.booking-view .ell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.booking-view .am { color: var(--warn-text) }
.booking-view .hint { font-size: 10px; color: var(--muted) }
.booking-view b { font-weight: 600; color: var(--text) }

/* Pill variants used by the booking status helpers */
.booking-view .pill.a { background: var(--warn-soft); color: var(--warn-text) }
.booking-view .pill.p { background: var(--purple-soft); color: var(--purple) }
.booking-view .pill { display: inline-flex; align-items: center; gap: 4px }
.booking-view .pill .i { width: 10px; height: 10px }

/* Root-cause guard: sections.css sets `.view button { width:28px; height:26px }`
   for the small square icon buttons. Everything in the booking view lives inside
   a `.view` section, so neutralise that here (booking.css loads later, and this
   selector stays less specific than the explicit rules below). Small square
   buttons keep their shape via .icon-btn. */
.booking-view button { width: auto; height: auto; min-height: 0 }
.booking-view .icon-btn { width: 28px; height: 26px; flex: 0 0 28px }

/* Buttons used by the booking view. sections.css also sets
   `.view button { width:28px; height:26px }`, neutralised by the guard above,
   so labels are not crushed into a 28px box here. */
.booking-view .btn-solid,
.booking-view .btn-ghost {
  flex: none; width: auto; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap; font-family: inherit; font-size: 11px; font-weight: 600;
  border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent;
  transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.booking-view .btn-solid { padding: 0 16px; background: var(--primary); color: #fff }
.booking-view .btn-solid:hover { filter: brightness(.94) }
.booking-view .btn-ghost { padding: 0 14px; background: var(--card); color: var(--label); border-color: var(--border); box-shadow: var(--shadow) }
.booking-view .btn-ghost:hover { background: var(--elev) }
.booking-view .btn-solid .i, .booking-view .btn-ghost .i { width: 13px; height: 13px }
.booking-view .btn-solid:disabled { background: var(--elev); color: var(--muted); cursor: not-allowed; filter: none }
.booking-view .acts .btn-solid, .booking-view .acts .btn-ghost { flex: none }
.booking-view .acts .hint { flex: 1 1 auto; min-width: 0 }

/* Segments and chips must never be squeezed by their flex parent
   (they also inherit `.view button { width:28px }` from sections.css) */
.booking-view .seg { flex: none }
.booking-view .seg button { flex: none; width: auto; height: 28px; color: var(--label); background: transparent; border: 0; border-radius: 6px }
.booking-view .seg button.on { background: var(--card); color: var(--primary-dark) }
.booking-view .qsel .chip { flex: none; width: auto; height: 26px; color: var(--label); background: var(--elev2); border: 1px solid var(--border); border-radius: var(--r-pill) }
.booking-view .otb .hint { flex: 0 1 auto; text-align: right }

/* Courier identity marks — real logos, letter only as fallback */
.booking-view .mk.has-img { background: var(--card); border: 1px solid var(--border); padding: 3px }
.booking-view .mk img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; display: block }
.booking-view .mk.has-img.sm { padding: 2px }

/* Chips need a visible edge on dark surfaces */
.booking-view .chip { border: 1px solid var(--border) }
.booking-view .chip:hover { border-color: var(--primary-soft) }
.booking-view .qsel { margin-top: 12px }

/* ---- Page layout ---- */
/* The generic `.view` rule in sections.css is the grid/list TOGGLE style -
   elevated fill, 8px radius, 3px padding - but the booking route sections
   share the class name, so they inherited all three and sat on the page as a
   grey/dark slab with a 3px inset. #bk-home was patched on its own; cover
   every view here so the shell's own background shows through. */
.booking-view .view { display: none; background: transparent; border-radius: 0; padding: 0 }
.booking-view .view.on { display: block }
/* Three KPIs now, not four - "Couriers Live" was removed as it repeated the
   auto-routing preference that already sits under Booked Today. */
.booking-view .kpis { grid-template-columns: repeat(3, 1fr) }
/* The landing section sits straight on the app background so the shell's own
   gradient shows through. It carried its own fill and cut a hard rectangle out
   of the page. */
.booking-view #bk-home { background: transparent }
.booking-view .content { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 14px; margin-top: 14px; align-items: start }
.booking-view .content.full { grid-template-columns: minmax(0,1fr) }
.booking-view .content.full .rightcol { display: none }
.booking-view .left, .booking-view .rightcol { display: flex; flex-direction: column; gap: 14px; min-width: 0 }

/* ---- Mode tabs (Auto / Manual) ---- */
.booking-view .mtabs {
  display: flex; gap: 4px; margin-top: 14px; padding: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
  background: color-mix(in srgb, var(--card) 48%, transparent);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.booking-view .mtab {
  flex: 1 1 0; min-width: 0; height: auto; min-height: 50px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 0; border-radius: var(--r-md);
  background: transparent; text-align: left; color: var(--label);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.booking-view .mtab:hover { background: var(--elev); color: var(--text) }
.booking-view .mtab.on { background: var(--primary-soft); color: var(--primary-dark); box-shadow: inset 0 0 0 1px var(--primary) }
.booking-view .mtab .ic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--elev); color: var(--icon);
}
.booking-view .mtab .ic .i { width: 15px; height: 15px }
.booking-view .mtab.on .ic { background: var(--card); color: var(--primary-dark) }
.booking-view .mtab .t { min-width: 0; flex: 1 }
.booking-view .mtab .t b { display: block; font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25 }
.booking-view .mtab.on .t b { color: var(--primary-dark) }
.booking-view .mtab .t span { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; line-height: 1.35 }
.booking-view .mtab .cnt {
  flex: 0 0 auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--elev2); color: var(--label); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.booking-view .mtab.on .cnt { background: var(--card); color: var(--primary-dark) }

/* ---- Breadcrumbs ---- */
.booking-view .crumbs { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 10.5px; color: var(--muted) }
.booking-view .crumbs b { color: var(--text); font-weight: 600 }
.booking-view .crumbs a.c:hover { color: var(--text) }
.booking-view .back { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); font-size: 10.5px; font-weight: 500; color: var(--label) }
.booking-view .back .i { width: 12px; height: 12px; color: var(--icon) }
.booking-view .back:hover { background: var(--elev) }

/* ---- Sync pill ---- */
.booking-view .sync { height: 34px; border-radius: 17px; background: var(--card); box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 10.5px; color: var(--label); font-weight: 500; white-space: nowrap }
.booking-view .sync .d { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); flex: 0 0 8px }
.booking-view .sync.busy .d { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); animation: booking-pulse 1s infinite }
@keyframes booking-pulse { 50% { opacity: .35 } }

/* ---- Spinner ---- */
.booking-view .spin { animation: booking-rot .8s linear infinite }
@keyframes booking-rot { to { transform: rotate(360deg) } }

/* ---- Courier identity marks ---- */
.booking-view .mk { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; letter-spacing: .2px; flex: 0 0 28px; line-height: 1 }
.booking-view .mk .i { width: 13px; height: 13px }
.booking-view .mk.sm { width: 20px; height: 20px; font-size: 6.5px; border-radius: 6px; flex-basis: 20px }
.booking-view .mk.sm .i { width: 10px; height: 10px }
.booking-view .mk.lg { width: 40px; height: 40px; font-size: 11px; border-radius: 12px; flex-basis: 40px }
.booking-view .mk.lg .i { width: 18px; height: 18px }
.booking-view .mk.auto { background: var(--primary-soft); color: var(--primary-dark) }
.booking-view .mk.tcs { background: var(--danger-soft); color: var(--danger) }
.booking-view .mk.postex { background: var(--purple-soft); color: var(--purple) }
.booking-view .mk.lcs { background: var(--warn-soft); color: var(--warn-text) }
.booking-view .mk.trax { background: var(--info-soft); color: var(--info) }
.booking-view .mk.mnp { background: var(--teal-soft); color: var(--teal) }

.booking-view .cdot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: 0 0 8px }

.booking-view .cp { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--text); white-space: nowrap }

/* ---- Courier picker (manual form) ---- */
/* height/overflow/background are NOT cosmetic here.booking-view .cinfo { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end }
.booking-view .cpick { position: relative }
/* The pop moves the menu only@media (prefers-reduced-motion: reduce) { }
/* Not connected: not selectable, no hover feedback */
/* Same treatment for the single-courier grid in the auto wizard */
.booking-view .cc.off,
.booking-view .cc.off:hover { cursor: not-allowed; background: var(--elev2); border-color: transparent; box-shadow: none }
.booking-view .cc.off .mk { opacity: .45; filter: grayscale(1) }
.booking-view .cc.off b,
.booking-view .cc.off span { color: var(--muted) }

/* ---- Chips ---- */
.booking-view .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--elev); font-size: 10px; font-weight: 500; color: var(--label); white-space: nowrap }
.booking-view .chip.g { background: var(--primary-soft); color: var(--primary-dark) }
.booking-view .chip.a { background: var(--warn-soft); color: var(--warn-text) }
.booking-view .chip.b { background: var(--info-soft); color: var(--info) }
.booking-view .chip.xs { height: 20px; font-size: 9px; padding: 0 7px; gap: 4px }
.booking-view .chip .i { width: 11px; height: 11px }
.booking-view .chip b { font-weight: 700 }
.booking-view button.chip { cursor: pointer }
.booking-view button.chip:hover { background: var(--primary-soft); color: var(--primary-dark) }

/* ---- Segmented routing preference ---- */
.booking-view .seg.mini button { height: 24px; padding: 0 10px; font-size: 10px }
.booking-view .seg .cnt { background: var(--elev2); border-radius: 8px; padding: 0 6px; font-size: 9px; color: var(--label) }
.booking-view .seg button.on .cnt { background: var(--primary-soft); color: var(--primary-dark) }

/* ---- Wizard card ---- */
.booking-view .tabs-card { padding: 0 }
.booking-view .tabs-card .pad { padding: 16px 18px 18px }
.booking-view .th { display: flex; align-items: center; gap: 10px }
.booking-view .th .sub { font-size: 10.5px; color: var(--muted); margin-top: 2px }
.booking-view .th .right { margin-left: auto; display: flex; gap: 8px; align-items: center }
.booking-view .lbl { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; color: var(--label); margin-bottom: 6px; display: flex; align-items: center; gap: 6px }
.booking-view .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; align-items: center }
.booking-view .acts .hint { margin-right: auto; line-height: 1.5 }
/* ---- Step bar (3 equal panels, matches the Select Orders reference) ---- */
.booking-view .steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid color-mix(in srgb, var(--border) 58%, transparent); border-radius: var(--r-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 48%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
  margin-bottom: 16px;
}
/* ---- Tip bar under the order table ---- */
/* ---- Empty state inside the order table ---- */
.booking-view .bkempty {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 56px 20px; min-height: 320px;
}
.booking-view .bkempty-ic {
  width: 62px; height: 62px; border-radius: var(--r-lg);
  background: var(--info-soft); color: var(--info);
  display: grid; place-items: center; margin-bottom: 14px;
}
.booking-view .bkempty-ic .i { width: 26px; height: 26px }
.booking-view .bkempty strong { font-size: 14px; color: var(--text); font-weight: 650 }
.booking-view .bkempty p { font-size: 11.5px; color: var(--muted); margin: 7px 0 16px; max-width: 44ch; line-height: 1.6 }

/* ---- Sidebar accents + quick actions ---- */
.booking-view .side-ic { vertical-align: -3px; margin-right: 7px; color: var(--icon) }
.booking-view .side-ic .i { width: 15px; height: 15px }
.booking-view .selbig .sub-b { font-size: inherit; color: var(--muted); font-weight: 600 }
/* ---- Row action chip ---- */
.booking-view .bk-view {
  display: inline-flex; align-items: center; gap: 5px;
  height: 25px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--elev2);
  color: var(--label); font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.booking-view .bk-view:hover { border-color: var(--primary); color: var(--primary-dark) }
.booking-view .bk-view .i { width: 12px; height: 12px }
.booking-view .step { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap }
.booking-view .step .n { width: 24px; height: 24px; border-radius: 50%; background: var(--elev); color: var(--label); font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; transition: .2s }
.booking-view .step .n .i { width: 12px; height: 12px; stroke-width: 3 }
.booking-view .step.on { color: var(--text); font-weight: 600 }
.booking-view .step.on .n { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft) }
.booking-view .step.past { color: var(--primary-dark); cursor: pointer }
.booking-view .step.past .n { background: var(--primary-soft); color: var(--primary-dark) }
.booking-view .step.past:hover .n { background: var(--primary); color: #fff }
.booking-view .step .cnt { background: var(--primary-soft); color: var(--primary-dark); border-radius: 8px; padding: 1px 6px; font-size: 9px; font-weight: 700 }
.booking-view .steps .ln { flex: 1; max-width: 110px; height: 2px; background: var(--border); margin: 0 14px; border-radius: 1px }
.booking-view .steps .ln.past { background: var(--primary) }
.booking-view .steps .tail { margin-left: auto; font-size: 10px; color: var(--muted); white-space: nowrap }
.booking-view .stp { display: none }
.booking-view .stp.on { display: block }

/* ---- Step 1: pick orders ---- */
.booking-view .otb { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap }
.booking-view .sbox { height: 34px; border-radius: 17px; background: var(--elev2); display: flex; align-items: center; gap: 8px; padding: 0 12px; width: 250px }
.booking-view .sbox .i { width: 13px; height: 13px; color: var(--icon); flex: 0 0 13px }
.booking-view .sbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 10.5px; color: var(--text) }
.booking-view .sbox input::placeholder { color: var(--muted) }
.booking-view .ptable thead th, .booking-view .ptable tbody td { padding: 9px 8px }
.booking-view .ptable thead th:first-child, .booking-view .ptable tbody td:first-child { padding-left: 12px }
.booking-view td .ell { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.booking-view .cb { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--card); display: inline-flex; align-items: center; justify-content: center; transition: .12s; cursor: pointer; vertical-align: middle }
.booking-view .cb .i { width: 10px; height: 10px; stroke-width: 3.5; color: #fff; opacity: 0 }
.booking-view .cb.on { background: var(--primary); border-color: var(--primary) }
.booking-view .cb.on .i { opacity: 1 }
.booking-view .cb.part { background: var(--primary); border-color: var(--primary) }
.booking-view .cb.part .i { display: none }
.booking-view .cb.part:after { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #fff }

.booking-view tbody tr.pick { cursor: pointer }
.booking-view tr.warn td { background: var(--warn-soft) }
.booking-view tr.chosen td { background: var(--primary-soft) !important }
.booking-view tr.chosen td:first-child { box-shadow: inset 3px 0 0 var(--primary) }
.booking-view td.empty { text-align: center; color: var(--muted); padding: 28px 10px !important; font-size: 11px }

.booking-view .selbig { display: flex; align-items: baseline; gap: 8px; margin-top: 10px }
.booking-view .selbig b { font-size: 36px; font-weight: 700; letter-spacing: -1.2px; color: var(--text); line-height: 1 }
.booking-view .selbig span { font-size: 10.5px; color: var(--muted) }

.booking-view .mini:not(.seg) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px }
.booking-view .mini:not(.seg) div { background: var(--elev2); border-radius: 10px; padding: 9px 10px; min-width: 0 }
.booking-view .mini span { display: block; font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; white-space: nowrap }
.booking-view .mini b { display: block; font-size: 13px; color: var(--text); margin-top: 3px; letter-spacing: -.2px; white-space: nowrap }
.booking-view .mini b.g { color: var(--primary-dark) }
.booking-view .mini b.a { color: var(--warn-text) }
.booking-view .qsel { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }

.booking-view .bars .r { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 10.5px; color: var(--label) }
.booking-view .bars .l { flex: 0 0 auto; min-width: 64px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.booking-view .bars .bar { flex: 1; height: 6px; background: var(--elev); border-radius: 3px; overflow: hidden }
.booking-view .bars .bar i { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s }
.booking-view .bars b { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--text); font-weight: 600; white-space: nowrap }
.booking-view .bars b small { color: var(--muted); font-weight: 400 }

.booking-view .note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--elev2); font-size: 10.5px; color: var(--label); line-height: 1.5 }
.booking-view .note .i { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 1px; color: var(--icon) }
.booking-view .note.a { background: var(--warn-soft); color: var(--warn-text) }
.booking-view .note.a .i { color: var(--warn) }
.booking-view .note a { font-weight: 600; text-decoration: underline }

/* ---- Step 2: routing ---- */
.booking-view .opts { display: grid; gap: 12px; margin-top: 14px }
/* Glass, like .card/.panel. These three - .steps, .mtabs and .opt - were the
   last large surfaces in this view still painting an opaque --card. In dark
   mode that reads as a heavy dark slab next to the translucent cards around it,
   which is what made Booking look like it belonged to a different app. */
.booking-view .opt {
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--border) 62%, transparent);
  padding: 16px 18px; cursor: pointer; transition: .15s, background .15s, border-color .15s;
  background: color-mix(in srgb, var(--card) 48%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.booking-view .opt:hover {
  border-color: var(--primary-soft);
  background: color-mix(in srgb, var(--card) 64%, transparent);
}
/* Selected keeps a solid-ish fill so the chosen route still reads as chosen
   against the now-translucent alternatives. */
.booking-view .opt.on {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--card) 30%);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.booking-view .opt .oh { display: flex; align-items: center; gap: 14px }
.booking-view .opt .ic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 48px }
.booking-view .opt .ic .i { width: 20px; height: 20px }
.booking-view .opt h4 { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -.2px; display: flex; align-items: center; gap: 8px }
.booking-view .opt p { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.5 }
.booking-view .opt .rad { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); position: relative; flex: 0 0 20px; transition: .15s }
.booking-view .opt.on .rad { border-color: var(--primary) }
.booking-view .opt.on .rad:after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--primary) }
.booking-view .opt .ob { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); cursor: default }
.booking-view .opt.on .ob { display: block }
.booking-view .obr { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap }
.booking-view .rp { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0 }
.booking-view .rp .lbl { margin: 0 4px 0 0 }
.booking-view .cgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px }
.booking-view .cc { border-radius: 12px; background: var(--elev2); padding: 14px 10px 12px; text-align: center; cursor: pointer; border: 1.5px solid transparent; transition: .15s }
.booking-view .cc:hover { background: var(--card); border-color: var(--line) }
.booking-view .cc.on { background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) }
.booking-view .cc .mk { margin: 0 auto 8px }
.booking-view .cc b { display: block; font-size: 11.5px; color: var(--text); font-weight: 600 }
.booking-view .cc span { display: block; font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.4 }
.booking-view .cc .cov { margin-top: 8px; font-weight: 600; color: var(--primary-dark) }
.booking-view .cc .cov.bad { color: var(--warn-text) }
.booking-view .cc .est { color: var(--text); font-weight: 600; font-size: 10px }
.booking-view .rtf { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--elev2) }
.booking-view .rtf .input { background: var(--card) }
.booking-view .rtf .tg { background: var(--card) }
.booking-view .rtf:empty { display: none }

/* ---- Step 3: preview ---- */
.booking-view .pstrip { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; margin-top: 14px }
.booking-view .pstrip > div { background: var(--elev2); border-radius: 12px; padding: 14px 16px; min-width: 0 }
.booking-view .pstrip h5 { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; color: var(--label); margin-bottom: 6px }
.booking-view .pstrip .bars .bar { background: var(--card) }
.booking-view .readyrow { display: flex; align-items: center; gap: 14px; margin-top: 6px }
.booking-view .ring { width: 64px; height: 64px; flex: 0 0 64px; font-family: inherit }
.booking-view .big { display: flex; gap: 10px; margin-top: 12px }
.booking-view .big div { flex: 1; background: var(--elev2); border-radius: 10px; padding: 10px 12px; min-width: 0 }
.booking-view .pstrip .big div { background: var(--card) }
.booking-view .big .k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600 }
.booking-view .big .v { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.3px; margin-top: 2px }
.booking-view .big .v.a { color: var(--warn-text) }
.booking-view .big .v.g { color: var(--primary-dark) }
.booking-view .prog { height: 8px; border-radius: 4px; background: var(--elev); overflow: hidden }
.booking-view .prog i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s }

/* ---- Dynamic form grid (manual + edit modal) ---- */
.booking-view .fgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px }
/* .field carries margin-bottom:12px from components.css; inside the grid the
   gap already spaces rows, so the margin only doubled every row gap. */
.booking-view .fgrid .field { margin-bottom: 0 }
.booking-view .field.w1 { grid-column: span 1 }
.booking-view .field.w2 { grid-column: span 2 }
.booking-view .field.w3 { grid-column: span 3 }
.booking-view .field.w4 { grid-column: span 4 }
.booking-view .field.w6 { grid-column: span 6 }
.booking-view .field .hint { margin-top: -1px }
.booking-view .field.err .input { border-color: var(--danger); background: var(--card); box-shadow: 0 0 0 3px var(--danger-soft) }

.booking-view .tg { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--elev2); cursor: pointer; align-self: end }
.booking-view .tg input { display: none }
.booking-view .tg .sw { width: 30px; height: 18px; border-radius: 9px; background: var(--line); position: relative; transition: .15s; flex: 0 0 30px }
.booking-view .tg .sw:after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.15) }
.booking-view .tg input:checked + .sw { background: var(--primary) }
.booking-view .tg input:checked + .sw:after { left: 14px }
.booking-view .tg .t { min-width: 0; line-height: 1.2 }
.booking-view .tg b { display: block; font-size: 10.5px; color: var(--text); font-weight: 500 }
.booking-view .tg small { display: block; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.booking-view .tg.field.err { box-shadow: 0 0 0 3px var(--danger-soft) }
.booking-view .static { height: 36px; border-radius: 8px; background: var(--elev); display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 10.5px; color: var(--label); overflow: hidden }
.booking-view .static b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.booking-view .fsec { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border) }
.booking-view .fsec:first-child { padding-top: 0; margin-top: 0; border-top: 0 }
.booking-view .mb .fsec { margin-top: 0 }
.booking-view .fsec h4 { font-size: 11.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 12px }
.booking-view .fsec h4 .n { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px }
.booking-view .fsec h4 .i { width: 14px; height: 14px; color: var(--icon) }
.booking-view .fsec h4 small { font-weight: 400; color: var(--muted); font-size: 10px }

.booking-view .radio-cards.two { grid-template-columns: 1fr 1fr }
.booking-view .eq { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--label); min-width: 0; flex: 1 }
.booking-view .eq b { color: var(--text) }
.booking-view .eq .i { width: 13px; height: 13px; color: var(--icon) }
.booking-view .eq .am { color: var(--danger); display: inline-flex; align-items: center; gap: 6px }
.booking-view .eq .am .i { color: var(--danger) }

/* ---- Recommendation (manual auto) ---- */
.booking-view .best { display: flex; align-items: center; gap: 12px; background: var(--primary-soft); border-radius: 12px; padding: 12px 14px; margin-top: 12px }
.booking-view .best.off { background: var(--danger-soft) }
.booking-view .best small { display: block; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; font-weight: 700; color: var(--primary-dark) }
.booking-view .best.off small { color: var(--danger) }
.booking-view .best b { display: block; font-size: 14px; color: var(--text); font-weight: 700; letter-spacing: -.2px }
.booking-view .best span { display: block; font-size: 10px; color: var(--label); margin-top: 1px }
.booking-view .best .sc { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-dark); font-size: 13px; line-height: 1; box-shadow: var(--shadow); flex: 0 0 44px }
.booking-view .best .sc small { font-size: 7px; letter-spacing: .3px; color: var(--muted); font-weight: 600; margin-top: 2px }

.booking-view .why { list-style: none; margin-top: 8px }
.booking-view .why li { display: flex; gap: 8px; font-size: 10.5px; color: var(--label); padding: 5px 0; line-height: 1.45 }
.booking-view .why li .i { color: var(--primary); width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px }

.booking-view .cmp { width: 100%; margin-top: 10px; border-collapse: collapse }
.booking-view .cmp th { font-size: 8.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 4px; background: none; border-radius: 0 }
.booking-view .cmp td { padding: 7px 4px; font-size: 10px; border-bottom: 1px solid var(--border); color: var(--label); vertical-align: middle }
.booking-view .cmp tr:last-child td { border-bottom: 0 }
.booking-view .cmp tbody tr { cursor: pointer }
.booking-view .cmp tbody tr:hover td { background: var(--elev2) }
.booking-view .cmp tr.off td { opacity: .5; cursor: default }
.booking-view .cmp tr.pick td:first-child { box-shadow: inset 3px 0 0 var(--primary) }
.booking-view .cmp .nm { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); white-space: nowrap }
.booking-view .cmp .rs { display: block; font-size: 9px; color: var(--muted); font-weight: 400; white-space: normal; line-height: 1.3; margin-top: 2px }
.booking-view .cmp td:last-child, .booking-view .cmp th:last-child { text-align: right; white-space: nowrap }

/* ---- Summary + estimate ---- */
.booking-view .sum .r { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; padding: 7px 0; border-bottom: 1px dashed var(--border) }
.booking-view .sum .r:last-child { border-bottom: 0 }
.booking-view .sum .r span { color: var(--muted); flex: 0 0 auto }
.booking-view .sum .r b { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0 }
.booking-view .sum .r b.miss { color: var(--muted); font-weight: 400; font-style: italic }
/* Editable summary rows. The row keeps the read-only label/value shape it had,
   but the value side is a real control, so the summary can be typed into without
   scrolling back to the form. Border and background only appear on hover/focus,
   otherwise every row would read as a form instead of a summary. */
.booking-view .sum .r.er { align-items: center; min-width: 0 }
/* `min-width: 0` on the control is load-bearing: a flex item's automatic minimum
   size resolves to its content, and for a <select> that is the widest option. The
   Pickup options carry a full street address, so without this the control's
   content-based minimum (~420px) beat its own max-width - min-width wins over
   max-width - and the row stretched out through the card edge. */
.booking-view .sum .r.er > span { flex: 0 0 auto; padding-top: 1px }
.booking-view .sum .r.er .ctl { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end }
/* app/core/form.js upgrades every <select> into a custom trigger: the real select
   is hidden with `.tp-hidden` and a `.tp-trigger` button is inserted into a
   `.tp-wrap` span. That span is `inline-flex` and sizes to its label, so the long
   Pickup option ("Zalmi Warehouse · Plot 14, ...") sized the wrapper to ~420px and
   pushed it out through the card. The hidden select still fires a bubbling
   `change` when an option is picked (form.js), so these rows keep working - the
   wrapper just has to be told how much room it is allowed. */
.booking-view .sum .r.er .ctl .tp-wrap { display: flex; width: 100%; max-width: 190px; min-width: 0 }
.booking-view .sum .r.er .ctl .tp-trigger {
  width: 100%; min-width: 0; min-height: 0; justify-content: flex-end; gap: 6px;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text); padding: 3px 6px;
  overflow: hidden; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.booking-view .sum .r.er .ctl .tp-trigger:hover { border-color: var(--border); background: var(--elev) }
/* `flex: 1 1 auto` + `display: block` is what actually clips the label. The
   shared rule only sets overflow/text-overflow, which needs the box to have a
   width to clip to: left as a shrink-to-fit flex item the label kept its
   min-content width and painted straight over the "Pickup" row label. */
.booking-view .sum .r.er .ctl .tp-label {
  flex: 1 1 auto; display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.booking-view .sum .r.er .in {
  width: 100%; max-width: 190px; min-width: 0;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: inherit; font-size: 11px; font-weight: 600; color: var(--text);
  text-align: right; padding: 3px 6px; margin: -3px -6px -3px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.booking-view .sum .r.er textarea.in {
  text-align: left; resize: none; white-space: normal;
  overflow: hidden; line-height: 1.4; min-height: 20px; max-height: 60px;
}
.booking-view .sum .r.er select.in { cursor: pointer; appearance: none; padding-right: 16px }
.booking-view .sum .r.er .in::placeholder { color: var(--muted); font-weight: 400; font-style: italic; opacity: .8 }
.booking-view .sum .r.er .in:hover { border-color: var(--border); background: var(--elev) }
.booking-view .sum .r.er .in:focus { outline: none; border-color: var(--primary); background: var(--card); box-shadow: 0 0 0 3px var(--primary-soft) }
.booking-view .sum .r.er .in.bad { border-color: var(--danger); background: var(--card); box-shadow: 0 0 0 3px var(--danger-soft) }
/* Price is money, so it gets the PKR prefix inside the box rather than a
   separate label column that would push the value off the right edge. */
.booking-view .sum .r.er .price { position: relative; width: 100%; max-width: 190px }
.booking-view .sum .r.er .price .cur { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); font-size: 9.5px; color: var(--muted); pointer-events: none }
.booking-view .sum .r.er .price .in { padding-left: 22px; text-align: right }
/* A row that is currently empty gets a dotted underline so the seven fields
   read as "not filled in yet" rather than as genuinely blank. */
.booking-view .sum .r.er.empty > span::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--border); margin-left: 6px; vertical-align: middle }
.booking-view .tot { margin-top: 12px; background: var(--primary-soft); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px }
.booking-view .tot span { font-size: 10px; color: var(--primary-dark) }
.booking-view .tot b { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--primary-dark); letter-spacing: -.3px }

.booking-view .qh { display: flex; align-items: center; gap: 10px; margin-top: 2px }
.booking-view .qh b { display: block; font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.booking-view .qh span { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px }
.booking-view .qh .pill { margin-left: auto; flex: 0 0 auto; display: inline-flex }
.booking-view .qh .pill .i { width: 10px; height: 10px }

.booking-view .qs { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 8px; margin-top: 12px }
.booking-view .qs div { background: var(--elev2); border-radius: 10px; padding: 9px 10px; min-width: 0 }
.booking-view .qs span { display: block; font-size: 8.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; white-space: nowrap }
.booking-view .qs b { display: block; font-size: 12.5px; color: var(--text); margin-top: 3px; letter-spacing: -.2px; white-space: nowrap }
.booking-view .qs div.t { background: var(--primary-soft) }
.booking-view .qs div.t span, .booking-view .qs div.t b { color: var(--primary-dark) }

.booking-view .qc { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 10.5px; color: var(--label) }
.booking-view .qc b { font-weight: 600; color: var(--text) }
.booking-view .qc .link { cursor: pointer; white-space: nowrap }

.booking-view .qempty { display: flex; gap: 10px; align-items: flex-start; background: var(--elev2); border-radius: 10px; padding: 12px }
.booking-view .qempty .i { width: 14px; height: 14px; color: var(--icon); flex: 0 0 14px; margin-top: 1px }
.booking-view .qempty b { display: block; font-size: 10.5px; color: var(--text); font-weight: 600 }
.booking-view .qempty span { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px; line-height: 1.45 }
.booking-view .qempty.bad { background: var(--danger-soft) }
.booking-view .qempty.bad .i, .booking-view .qempty.bad b { color: var(--danger) }

/* ---- Review modal ---- */
.booking-view .rvc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--elev2) }
.booking-view .rvc b { display: block; font-size: 12.5px; color: var(--text); font-weight: 600 }
.booking-view .rvc span { display: block; font-size: 10px; color: var(--muted); margin-top: 1px }
.booking-view .rvc .pill { margin-left: auto }
.booking-view .alts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 10px; color: var(--muted) }
.booking-view .rv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.booking-view .rv .w { grid-column: 1 / -1 }
.booking-view .rv .k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600 }
.booking-view .rv .v { font-size: 11.5px; color: var(--text); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere }
.booking-view .rv > div { background: var(--elev2); border-radius: 10px; padding: 10px 12px; min-width: 0 }

.booking-view .charges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.booking-view .charges div { border-radius: 10px; padding: 10px 12px; background: var(--card); box-shadow: var(--shadow); min-width: 0 }
.booking-view .charges span { font-size: 9.5px; color: var(--muted); display: block; white-space: nowrap }
.booking-view .charges b { font-size: 13px; color: var(--text); letter-spacing: -.2px }

.booking-view details.pl summary { cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--label); display: flex; align-items: center; gap: 8px; list-style: none }
.booking-view details.pl summary::-webkit-details-marker { display: none }
.booking-view details.pl summary .i { width: 13px; height: 13px; color: var(--icon) }
.booking-view details.pl summary:after { content: "Show"; margin-left: auto; font-size: 9.5px; color: var(--primary); font-weight: 500 }
.booking-view details.pl[open] summary:after { content: "Hide" }
.booking-view pre.json { margin-top: 10px; background: #1E2130; color: #E6E8F0; border-radius: 10px; padding: 12px 14px; font: 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow: auto; max-height: 190px; white-space: pre }
.booking-view .jk { color: #8BD5FF }
.booking-view .js { color: #B5E8A0 }
.booking-view .jn { color: #FFD28A }

/* ---- Done page ---- */
.booking-view .done { max-width: 780px; margin: 16px auto 0; text-align: center; padding: 34px 30px 28px }
.booking-view .done .ok { width: 72px; height: 72px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: booking-pop .3s ease-out }
.booking-view .done .ok .i { width: 34px; height: 34px; stroke-width: 2.2 }
.booking-view .done h2 { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.3px; display: flex; align-items: center; justify-content: center; gap: 10px }
.booking-view .done p { font-size: 11px; color: var(--muted); margin-top: 4px }
.booking-view .done .trk { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; background: var(--elev2); border-radius: 12px; padding: 12px 14px 12px 18px }
.booking-view .done .trk small { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 600; display: block; text-align: left }
.booking-view .done .trk b { font-size: 20px; letter-spacing: 1.5px; font-weight: 700; color: var(--text); display: block; text-align: left }
.booking-view .done .autonote { display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; font-size: 10.5px; color: var(--label); background: var(--primary-soft); border-radius: 10px; padding: 7px 12px }
.booking-view .done .sum2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; text-align: left }
.booking-view .done .sum2 div { background: var(--elev2); border-radius: 10px; padding: 10px 12px; min-width: 0 }
.booking-view .done .sum2 .k { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600 }
.booking-view .done .sum2 .v { font-size: 11.5px; font-weight: 600; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px }
.booking-view .done .acts { justify-content: center; margin-top: 22px; flex-wrap: wrap }
.booking-view .done.batch { max-width: 1100px; text-align: left; padding: 24px 26px }
.booking-view .done.batch .dh { display: flex; align-items: center; gap: 16px }
.booking-view .done.batch .ok { margin: 0; width: 56px; height: 56px; flex: 0 0 56px }
.booking-view .done.batch .ok .i { width: 26px; height: 26px }
.booking-view .done.batch h2 { justify-content: flex-start; font-size: 17px }
.booking-view .done.batch .acts { justify-content: flex-end; margin-top: 18px }
.booking-view .dk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px }
.booking-view .dk div { background: var(--elev2); border-radius: 12px; padding: 12px 14px }
.booking-view .dk span { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600 }
.booking-view .dk b { display: block; font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.4px; margin-top: 4px }
.booking-view .dk b.cps { display: flex; align-items: center; gap: 4px }

/* ---- Misc ---- */
.booking-view .reloadrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.booking-view .reloadrow .hint { line-height: 1.5 }
.booking-view #cr-m:empty { display: none }
.booking-view .toast { z-index: 200 }

/* ---- Overflow guards (tables / long values) ---- */
/* Compact back affordance that replaced the breadcrumb strip. Sits inline in
   the card header, ghost styling, icon + word - never a full sentence. */
.booking-view .bk-back { flex: none; height: 30px; padding: 0 11px; font-size: 10.5px; font-weight: 600; gap: 6px }
.booking-view .bk-back .i { width: 13px; height: 13px }
.booking-view .th .bk-back { align-self: flex-start; margin-top: 2px }
.booking-view .cbar .bk-back { margin-right: 2px }

/* ---- Orders-style table ----
   The wizard's list now reads like the Orders section's own table: frosted
   column headers with the opaque fallback behind the frost, roomier rows,
   and the same text weights the Orders rows use. Sticky is deliberately
   absent - .twrap has no vertical scroll of its own, and a sticky header
   without a scrolling ancestor drifts. */
.booking-view .twrap .ptable thead th {
  background: color-mix(in srgb, var(--card) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
.booking-view .twrap .ptable thead th::before {
  content: '';
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  z-index: -1;
}
.booking-view .twrap .ptable thead th { position: relative; padding-top: 10px; padding-bottom: 10px }
.booking-view .twrap .ptable tbody td { padding-top: 10px; padding-bottom: 10px; font-size: 11.5px }
.booking-view .twrap .ptable td .strong { font-size: 12.5px }
.booking-view .twrap .ptable td.strong { font-size: 13px; font-weight: 700; color: var(--text) }

.booking-view .twrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px }
.booking-view .twrap .ptable { min-width: 620px }

/* ============================================================
   RESPONSIVE — booking view
   ============================================================ */
@media (max-width: 1180px) {
  .booking-view .content { grid-template-columns: minmax(0,1fr) }
  .booking-view .content .rightcol { display: grid; grid-template-columns: 1fr 1fr; align-items: start }
  .booking-view .content .rightcol > .card.panel:only-child { grid-column: 1 / -1 }
}

@media (max-width: 1100px) {
  .booking-view .kpis { grid-template-columns: repeat(2, 1fr) }
  .booking-view .cgrid { grid-template-columns: repeat(3, 1fr) }
  .booking-view .pstrip { grid-template-columns: 1fr 1fr }
  .booking-view .pstrip > div:first-child { grid-column: 1 / -1 }
  .booking-view .dk { grid-template-columns: repeat(2, 1fr) }
  .booking-view .done.batch { max-width: 100% }
}

@media (max-width: 900px) {
  .booking-view .content .rightcol { grid-template-columns: 1fr }
  .booking-view .mtab .t span { display: none }
  .booking-view .fgrid { grid-template-columns: repeat(2, 1fr) }
  .booking-view .field.w3, .booking-view .field.w4, .booking-view .field.w6 { grid-column: span 2 }
  .booking-view .cgrid { grid-template-columns: repeat(2, 1fr) }
  .booking-view .pstrip { grid-template-columns: 1fr }
  .booking-view .pstrip > div:first-child { grid-column: auto }
  .booking-view .qs { grid-template-columns: 1fr 1fr }
  .booking-view .mini:not(.seg) { grid-template-columns: 1fr }
  .booking-view .rv { grid-template-columns: 1fr }
  .booking-view .charges { grid-template-columns: repeat(2, 1fr) }
  .booking-view .done .sum2 { grid-template-columns: 1fr }
  .booking-view .obr { gap: 14px }
  .booking-view .cbar { flex-wrap: wrap }
  }

@media (max-width: 640px) {
  .booking-view .kpis { grid-template-columns: 1fr }
  .booking-view .mtabs { flex-direction: column }
  .booking-view .fgrid { grid-template-columns: 1fr }
  .booking-view .field.w2, .booking-view .field.w3, .booking-view .field.w4, .booking-view .field.w6 { grid-column: span 1 }
  .booking-view .cgrid, .booking-view .dk, .booking-view .qs, .booking-view .charges { grid-template-columns: 1fr }
  .booking-view .acts { flex-wrap: wrap }
  .booking-view .acts .hint { margin-right: 0; flex: 1 0 100% }
.booking-view .steps .ln { display: none }
.booking-view .steps .tail { display: none }
@media (max-width: 760px) {
  .booking-view .steps { grid-template-columns: 1fr }
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-view *, .booking-view *:before, .booking-view *:after { animation: none !important; transition: none !important }
}

@keyframes booking-pop { from { transform: translateY(8px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---- Order detail popup ----
   Grouped into labelled sections rather than one flat run of label/value pairs.
   Each block is its own plate with a caption, so the dialog reads as four short
   chunks instead of one long ribbon, and an empty value is visibly a gap rather
   than an em dash lost in a uniform column. */
/* Scoped to the modal's ID, NOT to `.booking-view`. The template closes that
   wrapper before the modal markup, so the dialog is a SIBLING of `.booking-view`
   rather than a child - every `.booking-view .od-*` rule silently matched
   nothing, which is why the sections rendered with no border, no gap and no
   column grid at all. An ID selector does not care where it sits in the tree. */
#bk-orderModal .mb { padding: 16px 20px 18px; display: grid; gap: 14px }
#bk-orderModal .od-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--elev) 55%, transparent);
  padding: 12px 14px 4px;
}
#bk-orderModal .od-sec h4 {
  margin: 0 0 8px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted);
}
#bk-orderModal .od-grid {
  margin: 0; display: grid; grid-template-columns: 108px minmax(0, 1fr);
  gap: 0; align-items: baseline;
}
#bk-orderModal .od-row { display: contents }
#bk-orderModal .od-grid dt {
  padding: 6px 10px 6px 0;
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap;
}
#bk-orderModal .od-grid dd {
  margin: 0; padding: 6px 0;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  min-width: 0; overflow-wrap: anywhere;
}
/* A missing value should read as absent, not as a character in the data. */
#bk-orderModal .od-grid dd.is-empty { font-weight: 400; color: var(--muted) }
@media (max-width: 620px) {
  #bk-orderModal .od-grid { grid-template-columns: minmax(0, 1fr) }
  #bk-orderModal .od-grid dt { padding-bottom: 0 }
  #bk-orderModal .od-grid dd { padding-top: 0; padding-bottom: 8px }
}

/* ---- Book Order: Recent Bookings, below the KPI row ---- */
.booking-view .bk-recent-block { margin-top: 16px }
/* The date filter and the mode buttons share the home toolbar row with the
   back button: back pinned left, dates beside it, controls right. Above the
   1180px row that wraps, the date bar drops to its own line rather than
   squeezing the mode buttons into their icons. */
.booking-view .bk-homebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.booking-view .bk-homebar .bk-homeback { flex: none }
.booking-view .bk-datebar { display: flex; align-items: center; gap: 8px; margin-right: auto }
@media (max-width: 1180px) {
  .booking-view .bk-datebar { margin-right: 0; flex: 1 0 100%; order: 3 }
}
/* Solid like every other input. It inherited a translucent fill and read as
   disabled next to the controls it sat among. */
.booking-view .bk-date {
  width: 150px; height: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px; color: var(--text);
}
.booking-view .bk-date:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
/* Icon-only refresh. The .view button rule in sections.css forces a fixed
   width, so the square shape is pinned here rather than left to the label. */
.booking-view .bk-refreshbtn {
  width: 32px; height: 32px; min-width: 32px;
  padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
}
.booking-view .bk-refreshbtn svg.i { width: 15px; height: 15px }
.booking-view .bk-modebtns { display: flex; align-items: center; gap: 6px }
/* The mode buttons need to out-rank the `.booking-view button` guard above,
   which is (0,1,1) and therefore beat `.ot-btn` (0,1,0) on width and height.
   The result was a 34x15 button with a transparent background and inherited
   grey text - the icon had nothing to sit on. Three classes wins both. */
.booking-view .ot-btn.bk-modebtn {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0; border-radius: 17px; overflow: hidden;
  background: var(--ot); color: #fff;
  border: 1px solid color-mix(in srgb, var(--ot) 70%, #000 10%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
              0 4px 12px -6px color-mix(in srgb, var(--ot) 55%, transparent);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: width .45s var(--ease), flex-basis .45s var(--ease),
              background .35s ease, box-shadow .35s ease, border-radius .45s var(--ease);
}
/* 15px read as almost nothing on a 34px circle, and at 1.8 stroke weight the
   zap and pencil marks all but vanished against the fill. */
.booking-view .ot-btn.bk-modebtn .i {
  width: 18px; height: 18px; flex: 0 0 18px; margin: 0 8px;
  fill: none; stroke: #fff; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round;
}
.booking-view .ot-btn.bk-modebtn:hover,
.booking-view .ot-btn.bk-modebtn:focus-visible {
  width: var(--ot-w); flex-basis: var(--ot-w); padding-right: 14px;
  background: color-mix(in srgb, var(--ot) 88%, #fff 12%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent),
              0 8px 20px -6px color-mix(in srgb, var(--ot) 70%, transparent);
}
.booking-view .ot-btn.bk-modebtn:hover .i,
.booking-view .ot-btn.bk-modebtn:focus-visible .i { margin-right: 0 }
.booking-view .ot-btn.bk-modebtn .ot-label {
  opacity: 0; transform: translateX(-4px); flex: 0 0 auto;
  color: #fff; white-space: nowrap;
  transition: opacity .3s ease .06s, transform .35s var(--ease) .06s;
  pointer-events: none;
}
.booking-view .ot-btn.bk-modebtn:hover .ot-label,
.booking-view .ot-btn.bk-modebtn:focus-visible .ot-label { opacity: 1; transform: translateX(0) }
.booking-view .ot-btn.bk-modebtn.on { box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 55%, transparent) }
/* Expanded widths: measured label + 14px right padding, matching the Orders
   tools, so each button opens exactly as far as its own name needs. */
.booking-view .bk-modebtn[data-ot="bk-auto"]   { --ot-w: 116px }
.booking-view .bk-modebtn[data-ot="bk-manual"] { --ot-w: 118px }
/* The date-range trigger is a .tp-trigger, which is a translucent 44% card fill
   by default. On the booking gradient that reads as disabled, and the guard
   above was also zeroing its min-height. Solid here, like the other inputs. */
.booking-view .tp-trigger {
  min-height: 34px;
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow);
}
.booking-view .tp-trigger:hover { background: var(--card); border-color: var(--primary) }
/* The recent list is now the bottom of the landing page rather than a whole
   page, so it does not get to claim 62vh of the viewport. */
.booking-view .bk-rec-scroll { max-height: 420px }

/* Column rules must run the full height of the row, including the header, or
   they stop short and the columns look like they do not line up. */
.booking-view table th,
.booking-view table td { border-right: 1px solid var(--border) }
.booking-view table th:last-child,
.booking-view table td:last-child { border-right: 0 }
.booking-view table thead th { position: sticky; top: 0; z-index: 2; background: var(--elev) }
.booking-view table th + th,
.booking-view table td + td { border-left: 0 }

/* ---- Recent Bookings: styled like the Orders list ----
   The vertical border on every cell above turned the table into a row of
   separate boxes, which is what made COD and Courier read as joined together
   and stopped the row reflowing cleanly. Every order is one straight line now.
   The rule stays for the wizard's own .ptable, which still wants it. */
.booking-view .bk-recent-table th,
.booking-view .bk-recent-table td { border-right: 0 }
.booking-view .bk-recent-table {
  width: 100%; border-collapse: collapse; table-layout: auto;
}
.booking-view .bk-recent-table thead th {
  padding: 10px 10px; text-align: left;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); background: var(--elev);
  border-bottom: 1px solid var(--border); white-space: nowrap;
  /* The recent table scrolls BOTH ways (420px max-height + overflow auto), and
     a sticky header inside a horizontally scrolling container paints offset
     from its own cells - the COD column read as shifted from its header. This
     is the one table where the sticky above is live, so it is switched off
     here; the wizard's .ptable keeps it (its wrapper never scrolls vertically). */
  position: static;
}
.booking-view .bk-recent-table tbody td {
  padding: 9px 10px; font-size: 10.5px; color: var(--label);
  border-bottom: 1px solid var(--border);
  /* Nothing inside a cell may force the row taller than its neighbours, which
     is what the old courier pill + mode line was doing. */
  white-space: nowrap;
}
.booking-view .bk-recent-table tbody tr:last-child td { border-bottom: 0 }
.booking-view .bk-recent-table tbody tr:hover td { background: var(--elev2) }
/* Rows open the order popup, so they need to look clickable. */
.booking-view .bk-recent-table tbody tr.bk-rec-row { cursor: pointer }
/* Courier cell: name and mode on one line. .sub is display:block globally in
   this file, so left alone it wrapped onto its own line inside the cell and
   made the COD column beside it look welded to it. */
.booking-view .bk-recent-table .cp {
  display: inline-flex; vertical-align: middle;
}
.booking-view .bk-recent-table .cp + .sub {
  display: inline; margin: 0 0 0 7px; vertical-align: middle;
}
/* class="strong" lands on <td>s in several booking tables (recent COD, wizard
   COD, bulk order id), and `.booking-view .strong` sets display:block - a
   block <td> leaves the table formatting context and is exactly the kind of
   thing that shifts a column off its header on some Chrome builds. Restore
   the cell display; the weight and colour still come from .strong. */
.booking-view table td.strong { display: table-cell; }
/* Let the wide text columns take the slack instead of squeezing the rest. */
.booking-view .bk-recent-table th:nth-child(3),
.booking-view .bk-recent-table td:nth-child(3) { min-width: 150px }
.booking-view .bk-recent-table tbody tr:hover { background: var(--elev) }

/* Refresh spinner while a refresh is in flight. */
.booking-view #bk-btnRefresh.spinning svg.i,
.booking-view .btn-ghost.spinning svg.i { animation: booking-rot .8s linear infinite }
.booking-view .btn-ghost.spinning { opacity: .7; pointer-events: none }
@keyframes booking-rot { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }

/* ============================================================
   MANUAL FORM — reference-style fields, fully themed
   Icon-box + control wrapper. All colours are theme vars so
   light + dark both read correctly. Structure is emitted by
   _renderField(): .bk-inwrap > .bk-ico + .bk-ctl
   ============================================================ */
.booking-view .bk-inwrap {
  display: flex; align-items: stretch;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  min-height: 42px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.booking-view .bk-inwrap:hover { border-color: var(--line) }
.booking-view .bk-inwrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) }
.booking-view .bk-inwrap.bk-area { align-items: flex-start }
.booking-view .bk-ico {
  display: flex; align-items: center; justify-content: center;
  width: 42px; flex: 0 0 42px; align-self: stretch;
  background: var(--elev); border-right: 1px solid var(--border);
  color: var(--icon); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.booking-view .bk-ico .i { width: 15px; height: 15px }
.booking-view .bk-inwrap:focus-within .bk-ico { background: var(--primary-soft); color: var(--primary-dark); border-right-color: var(--primary-soft) }
.booking-view .bk-inwrap.bk-area .bk-ico { height: 42px; flex-basis: 42px }
.booking-view .bk-ctl.input, .booking-view .bk-inwrap .input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  border: 0; background: transparent; box-shadow: none;
  height: 40px; padding: 0 12px;
  font-size: 12px; color: var(--text);
}
.booking-view .bk-ctl.input:focus, .booking-view .bk-inwrap .input:focus { outline: none; border: 0; box-shadow: none; background: transparent }
.booking-view .bk-ctl.input::placeholder, .booking-view .bk-inwrap .input::placeholder { color: var(--muted); opacity: .85 }
.booking-view textarea.bk-ctl.input, .booking-view .bk-inwrap textarea.input {
  height: auto; min-height: 68px; padding: 10px 12px; resize: vertical; line-height: 1.5;
}
.booking-view .field.err .bk-inwrap { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft) }

/* ---- Dropdowns: themed chevron, popup follows color-scheme ---- */
.booking-view select.bk-ctl.bk-sel, .booking-view .bk-inwrap select.input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C8797' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
html[data-theme="dark"] .booking-view select.bk-ctl.bk-sel, html[data-theme="dark"] .booking-view .bk-inwrap select.input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3abbd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.booking-view select.bk-ctl.bk-sel:hover, .booking-view .bk-inwrap select.input:hover { background-color: transparent }
.booking-view .field label .req { color: var(--danger) }

/* ---- Checkboxes: icon row + real box (replaces old switch) ---- */
.booking-view label.tg.bk-check, .booking-view .bk-check {
  display: block; height: auto; padding: 0; background: none; border: 0; cursor: pointer; align-self: end;
}
.booking-view .bk-checkwrap { cursor: pointer; align-items: center }
.booking-view .bk-checkbody { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; padding: 0 12px; min-height: 40px }
.booking-view .bk-checkbody input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.booking-view .bk-cbox {
  width: 19px; height: 19px; border-radius: 6px; flex: 0 0 19px;
  border: 1.5px solid var(--line); background: var(--card);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.booking-view .bk-cbox .i { width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.booking-view .bk-checkbody input:checked + .bk-cbox { background: var(--primary); border-color: var(--primary) }
.booking-view .bk-checkbody input:checked + .bk-cbox .i { opacity: 1; transform: scale(1) }
.booking-view .bk-checkbody input:focus-visible + .bk-cbox { box-shadow: 0 0 0 3px var(--primary-soft) }
.booking-view .bk-checkbody .t { min-width: 0; line-height: 1.35 }
.booking-view .bk-checkbody .t b { display: block; font-size: 11.5px; color: var(--text); font-weight: 600 }
.booking-view .bk-checkbody .t small { display: block; color: var(--muted); font-size: 9.5px; margin-top: 1px }
/* legacy switch nub no longer rendered — guard only */
.booking-view .bk-check .sw { display: none }

/* ---- Radios: inline pill-group inside the same wrapper ---- */
.booking-view .bk-radiowrap { align-items: center }
.booking-view .bk-radios { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; padding: 0 12px; min-height: 40px; flex-wrap: wrap }
.booking-view .bk-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative; font-size: 12px; color: var(--label) }
.booking-view .bk-radio input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.booking-view .bk-rdot {
  width: 18px; height: 18px; border-radius: 50%; flex: 0 0 18px;
  border: 1.5px solid var(--line); background: var(--card); position: relative;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.booking-view .bk-rdot::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  transform: scale(0); transition: transform var(--dur-fast) var(--ease);
}
.booking-view .bk-radio input:checked + .bk-rdot { border-color: var(--primary) }
.booking-view .bk-radio input:checked + .bk-rdot::after { transform: scale(1) }
.booking-view .bk-radio input:focus-visible + .bk-rdot { box-shadow: 0 0 0 3px var(--primary-soft) }
.booking-view .bk-rtx b { display: block; font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.2 }
.booking-view .bk-rtx small { display: block; font-size: 9.5px; color: var(--muted); margin-top: 1px }
/* polished fallback for any legacy .radio-cards still in booking */
.booking-view .radio-cards label { background: var(--card) }
.booking-view .radio-cards label:hover { border-color: var(--line); background: var(--elev2) }
.booking-view .radio-cards input:checked + label { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--primary-soft) }

/* ============================================================
   BOOKING REDESIGN — reference: clean surfaces + mono figures
   Scoped to .booking-view. Only theme vars. Both themes.
   No selector below touches the glider roots (.seg / .mtabs) or
   the `on` / `active` classes tabs.js and features rely on.
   ============================================================ */

/* ---- 1. Cards & buttons: 12px radius, quieter edges ---- */
.booking-view .card,
.booking-view .tabs-card,
.booking-view .card.panel { border-radius: 12px }
.booking-view .btn-solid,
.booking-view .btn-ghost { border-radius: 10px }
.booking-view .btn-solid { font-weight: 600; transition: background var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.booking-view .btn-solid:hover:not(:disabled) { background: var(--primary-dark) }
.booking-view .btn-ghost { background: color-mix(in srgb, var(--card) 70%, transparent) }
.booking-view .btn-ghost:hover { border-color: var(--line); background: var(--elev) }
.booking-view .btn-sm.ghost { border-radius: 8px }

/* ---- 2/* ---- 3. KPI cards: title+icon, big mono value, footer rule ---- */
.booking-view .card.kpi {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 76%, transparent);
  border-radius: 12px;
  padding: 16px 18px 14px;
  gap: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.booking-view .card.kpi:hover { border-color: var(--line) }
.booking-view .card.kpi .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 }
.booking-view .card.kpi .lbl { font-size: 10px; color: var(--muted) }
.booking-view .card.kpi .ic {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  background: var(--elev); color: var(--icon);
  display: inline-flex; align-items: center; justify-content: center;
}
.booking-view .card.kpi .ic .i { width: 15px; height: 15px }
.booking-view .card.kpi .mid { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px }
.booking-view .card.kpi .num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text); line-height: 1.1;
}
.booking-view .card.kpi .trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.booking-view .card.kpi .trend .i { width: 13px; height: 13px }
.booking-view .card.kpi .trend.g { color: var(--success-dark) }
.booking-view .card.kpi .trend.a { color: var(--warn-text) }
.booking-view .card.kpi .trend.b { color: var(--info) }
.booking-view .card.kpi .foot {
  font-size: 10.5px; color: var(--muted); margin-top: 12px;
  padding-top: 9px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  line-height: 1.45;
}
.booking-view .card.kpi .foot .am { color: var(--warn-text) }

/* ---- 4. Tables: header on elev surface, roomier rows, hover ---- */
.booking-view .ptable thead th,
.booking-view .bk-recent-table thead th {
  background: var(--elev);
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--label);
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.booking-view .ptable tbody td,
.booking-view .bk-recent-table tbody td { padding: 11px 10px; font-size: 11.5px; vertical-align: middle }
.booking-view .ptable tbody tr:hover td,
.booking-view .bk-recent-table tbody tr:hover td { background: var(--elev2) }
/* Two stacked lines per cell read as one item, not as a second row. */
.booking-view .ptable tbody td > .strong,
.booking-view .ptable tbody td > .sub { margin: 0 }
.booking-view .ptable tbody td > .sub { margin-top: 2px; line-height: 1.4 }
/* The glass header in the auto wizard now sits on the same elev base. */
.booking-view .twrap .ptable thead th {
  background: color-mix(in srgb, var(--elev) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.booking-view .twrap .ptable thead th::before { background: color-mix(in srgb, var(--elev) 82%, transparent) }

/* ---- 5. Status chips: soft fill + coloured ink, 6px ---- */
.booking-view .pill { border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px }
.booking-view .pill .i { width: 11px; height: 11px }
.booking-view .pill.g { background: var(--success-soft); color: var(--success-dark) }
.booking-view .pill.a { background: var(--warn-soft); color: var(--warn-text) }
.booking-view .pill.b { background: var(--info-soft); color: var(--info) }
.booking-view .pill.r { background: var(--danger-soft); color: var(--danger) }
.booking-view .pill.p { background: var(--purple-soft); color: var(--purple) }
.booking-view .pill.n { background: var(--elev); color: var(--muted) }
.booking-view .chip { border-radius: 6px }
.booking-view .status-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 600 }

/* ---- 6. Wizard step bar: tighter, cleaner dividers ---- */
.booking-view .steps { border-radius: 12px }
/* Filters + search row on step 1 */
.booking-view .otb { gap: 8px }
.booking-view .sbox { height: 32px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--border) }
.booking-view .sbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft) }

/* ---- 7. Step 2 routing cards + courier grid ---- */
.booking-view .opt { border-radius: 12px; padding: 14px 16px }
.booking-view .opt .ic { width: 44px; height: 44px; border-radius: 12px; flex-basis: 44px }
.booking-view .opt .ic .i { width: 18px; height: 18px }
.booking-view .opt h4 { font-size: 13px; font-weight: 600 }
.booking-view .opt .rad { width: 18px; height: 18px; flex-basis: 18px }
.booking-view .opt.on .rad:after { inset: 3px }
.booking-view .opt.on { border-color: var(--primary) }
.booking-view .opt .ob { margin-top: 14px; padding-top: 14px }
.booking-view .cc { border-radius: 12px; padding: 13px 12px 11px }
.booking-view .cc:hover { border-color: var(--line) }
.booking-view .cc b { font-size: 11.5px }
.booking-view .rtf { border-radius: 12px }
/* Pickup fields on step 2 */
#bk-auto .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

/* ---- 8. Home toolbar ----
   Mode buttons (.bk-modebtn) already have a complete design above:
   a coloured 34px pill that expands to --ot-w and reveals its label,
   matching the Orders header tools. Not redefined here. */
.booking-view .bk-homebar { gap: 10px }
.booking-view .bk-date { height: 32px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--border) }

/* ---- 9. Recent bookings panel ---- */
.booking-view .bk-recent-block { margin-top: 18px }
.booking-view .bk-recent-table { border-collapse: separate; border-spacing: 0 }
.booking-view .bk-rec-scroll { max-height: 420px; overflow: auto }
.booking-view .bk-recent-table .cp { font-size: 11px }
.booking-view .bk-rec-row td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; font-size: 11px; color: var(--text) }

/* ---- 10. Done + review ---- */
.booking-view .done { border-radius: 14px; padding: 30px 28px 24px }
.booking-view .done .ok { background: var(--success-soft); color: var(--success-dark) }
.booking-view .done .trk { border-radius: 12px; background: var(--elev2) }
.booking-view .done .trk b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace }
.booking-view .done .sum2 div { border-radius: 10px }
.booking-view .rv > div { border-radius: 10px; background: var(--elev2) }
.booking-view .charges div { border-radius: 10px; background: var(--elev2) }
.booking-view .charges div:last-child { background: var(--primary-soft) }
.booking-view .rvc { border-radius: 12px }
.booking-view .qs div { border-radius: 10px }
.booking-view .tot { border-radius: 10px }

/* ---- 11. Summary / estimate panels ---- */
.booking-view .kpis { gap: 12px }
.booking-view .content { margin-top: 16px }
.booking-view .left, .booking-view .rightcol { gap: 12px }
.booking-view .fsec h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted) }
.booking-view .fsec h4 .n { width: 18px; height: 18px; flex-basis: 18px; font-size: 9.5px }
.booking-view .mini { gap: 10px }
.booking-view .mini > div { border-radius: 10px; background: var(--elev2) }
.booking-view .mini b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px }
.booking-view .note { border-radius: 10px }

/* ---- 12. Bulk booking table ---- */
.booking-view .prog { border-radius: var(--r-pill) }
.booking-view .prog i { border-radius: var(--r-pill) }
#bk-bulkModal table { border-collapse: collapse; width: 100%; font-size: 11.5px }
#bk-bulkModal table thead th {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--label); background: var(--elev); padding: 9px 10px; text-align: left;
  border-bottom: 1px solid var(--border);
}
#bk-bulkModal table tbody td { padding: 10px; border-bottom: 1px solid var(--border); color: var(--label) }
#bk-bulkModal table tbody tr:last-child td { border-bottom: 0 }
#bk-bulkModal table tbody tr:hover td { background: var(--elev2) }

/* ============================================================
   MANUAL DENSITY — no extra air at top / bottom, equal heights
   ============================================================ */
/* Single-line controls are exactly 42px tall (input 40 + 2 border),
   so text fields and dropdowns always line up. Textareas, check and
   radio rows keep min-height and may grow. */
.booking-view .bk-inwrap:not(.bk-area):not(.bk-checkwrap):not(.bk-radiowrap) { height: 42px; min-height: 0 }
/* Manual card: tight top and bottom, sections sit closer. Scoped to
   #bk-manual so the auto wizard and edit modal keep their rhythm. */
#bk-manual .cbar { padding: 10px 18px }
#bk-manual .tabs-card .pad { padding: 10px 18px 12px }
#bk-manual .fsec { padding-top: 10px; margin-top: 10px }
#bk-manual .fsec h4 { margin-bottom: 8px }
#bk-manual .acts { margin-top: 12px }
/* Summary rows lost their form.js triggers (booking selects are native
   now), so the native arrow needs its own themed chevron. */
.booking-view .sum .r.er select.in {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237C8797' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center;
}
html[data-theme="dark"] .booking-view .sum .r.er select.in {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3abbd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}