/* ============================================================
   BOOKING — REVIEW PAGE
   Structure from the reference, colours from EcomOS tokens.
   ============================================================ */

/* ---- Back bar ----
   Sits above the panel rather than inside it. Inside the card it read as part
   of the review's own furniture and was easy to miss while scanning a wide
   table. */
.bk-backbar { margin-bottom: 14px; }
/* `.booking-view ` prefix is load-bearing, not cosmetic: `.view button` and
   `.booking-view button` outrank a bare class, which crushed this to a 16px
   unstyled button. See `.bk-newbook` in booking-orders.css. */
.booking-view .bk-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px 0 10px;
  border-radius: var(--r-sm, 9px);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--label);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.booking-view .bk-backlink:hover { border-color: var(--primary); color: var(--primary-dark); }
.booking-view .bk-backlink:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.booking-view .bk-backlink .i { flex: 0 0 auto; }

.bk-review-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}
.bk-review-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.6px;
  margin: 2px 0 4px;
}
.bk-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
}
.bk-review-sub { margin: 0; font-size: 12px; color: var(--muted); }

/* ---- Steps: two chips, done + current ---- */
.bk-steps { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.bk-step {
  font-size: 11px;
  font-weight: 750;
  padding: 8px 11px;
  border-radius: 9px;
  white-space: nowrap;
}
.bk-step.is-done {
  background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent);
  color: var(--success-dark);
}
.bk-step.is-current {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-dark);
}

/* ---- Stats ---- */
.bk-review-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.bk-review-stat {
  background: var(--elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 13px 15px;
}
.bk-review-stat span { display: block; font-size: 10.5px; color: var(--muted); }
.bk-review-stat strong { display: block; font-size: 19px; margin-top: 6px; letter-spacing: -.4px; }
/* "Auto-route · Balanced" is longer than a number and would otherwise wrap
   into a second line, making this card taller than its three neighbours. */
.bk-review-route { font-size: 14px !important; line-height: 1.3; }

.bk-review-tablewrap { overflow-x: auto; padding-bottom: 4px; }
.bk-review-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; }
.bk-rev-id { font-weight: 750; }

/* ---- Inline editing: the centrepiece ----
   Borderless at rest so the table still reads as a table; the affordance only
   appears on hover/focus, which keeps the grid calm while making every cell
   obviously editable. */
.bk-inline {
  width: 100%;
  min-width: 70px;
  padding: 6px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
}
.bk-inline:hover { border-color: var(--line); background: var(--elev); }
.bk-inline:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--elev);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent);
}
.bk-in-addr { min-width: 170px; }
.bk-in-items { min-width: 120px; }
.bk-in-cod { min-width: 84px; }
.bk-in-courier { min-width: 110px; cursor: pointer; }

/* ---- Blocked banner ---- */
.bk-review-blocked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: var(--r-md, 11px);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  color: var(--warn-text);
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Bottom bar ---- */
.bk-review-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.bk-pickup {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--elev);
  border-radius: 10px;
  padding: 11px 13px;
}
.bk-pickup b { color: var(--text); }
.bk-final-actions { display: flex; align-items: center; gap: 14px; }
.bk-final-actions > span { max-width: 190px; font-size: 10.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 1180px) {
  .bk-review-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-review-head { grid-template-columns: 1fr; align-items: start; }
  .bk-steps { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .bk-review-stats { grid-template-columns: 1fr; }
  .bk-review-bottom { flex-direction: column; align-items: stretch; }
  .bk-final-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .bk-final-actions > span { max-width: none; }
}
/* ---- Pickup as a select ----
   Was a static block of text. It is a routing input: it decides which courier
   codes get sent, so it has to be operable, not just readable. */
.bk-pickup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
}
.bk-pickup > span {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
.bk-pickup-sel {
  appearance: none;
  min-width: 260px;
  padding: 9px 30px 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--elev);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.bk-pickup-sel:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent); }

/* ---- Booking progress on each row ----
   The confirm popup used to close and then sit silent until every courier call
   finished, which is indistinguishable from the click having missed. Each row
   now carries its own spinner, then settles on a single green sweep. */
.bk-rowspin {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  animation: bk-spin .7s linear infinite;
}
@keyframes bk-spin { to { transform: rotate(360deg); } }

.bk-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--success-dark); }
.bk-ok .i { width: 14px; height: 14px; }

/* There is no `--danger-dark` in tokens.css, and inventing one is what left
   text invisible in dark mode before. The glyph carries the red; the word
   stays in a token that is legible on both themes. */
.bk-fail { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.bk-fail .i { width: 14px; height: 14px; color: var(--danger); }

tr.is-booking { background: color-mix(in srgb, var(--primary) 7%, transparent); }
tr.is-booked td { color: var(--label); }

/* One sweep, left to right, per row. `is-wave` is toggled off and back on
   around a reflow read so the animation restarts - setting it once in the same
   tick as the class add would not play. */
tr.is-wave { animation: bk-wave .95s ease-out; }
@keyframes bk-wave {
  0%   { background: color-mix(in srgb, var(--success, #22c55e) 34%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-rowspin { animation: none; }
  tr.is-wave { animation: none; }
}

/* Per-row pickup column */
.bk-in-pickup { min-width: 150px; }
.bk-cstats { grid-template-columns: 1fr 1fr; }