/* Branch operations (API 0130, branch-ops.js): a staff login's Bookings and
   Orders tabs, and the owner's three switches in each location card. Built
   from the portal's own ruled lists, chips, cards and switches; the new part
   is the time rail that leads each booking, read at arm's length at the door. */

/* The staff floor: a tab or panel carrying data-floor shows on it. */
.pt-floor-staff .pt-tabrow { display: block; }
.pt-floor-staff .pt-panel[data-panel="arrivals"]:not(.hidden),
.pt-floor-staff .pt-panel[data-panel="packing"]:not(.hidden) { display: block; }

.bo-host { display: grid; gap: var(--tud-space-6); }
.bo-group { display: grid; gap: var(--tud-space-3); min-width: 0; }
.bo-group-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.bo-none { margin: 0; padding: var(--tud-space-4) 0; border-top: var(--tud-border-hairline) solid var(--tud-color-border-default); color: var(--tud-color-text-muted); font-size: 15px; font-weight: 600; }

/* ---------- bookings: a ruled list led by its time ---------- */

.bo-list { display: grid; margin: 0; padding: 0; list-style: none; }
.bo-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--tud-space-4);
  row-gap: var(--tud-space-2);
  padding: var(--tud-space-4) 0;
  border-top: var(--tud-border-hairline) solid var(--tud-color-border-default);
}
.bo-row:last-child { border-bottom: var(--tud-border-hairline) solid var(--tud-color-border-default); }
.bo-row.is-focus { box-shadow: inset 3px 0 0 var(--tud-color-accent-base); padding-left: var(--tud-space-3); }

.bo-when { display: grid; gap: 2px; margin: 0; font-variant-numeric: tabular-nums; }
.bo-when b { font-family: var(--tud-font-secondary); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; white-space: nowrap; }
.bo-when span { color: var(--tud-color-text-muted); font-size: 13px; font-weight: 600; }

.bo-main { display: grid; gap: 2px; min-width: 0; }
.bo-title { margin: 0; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.bo-sub { margin: 0; color: var(--tud-color-text-secondary); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.bo-code { color: var(--tud-color-text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }

.bo-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--tud-space-2); flex-wrap: wrap; }
.bo-acts .btn { min-width: 7.5em; white-space: nowrap; }
.bo-row-status { grid-column: 2 / -1; }
.bo-row-status:empty { display: none; }

/* ---------- orders: a packing slip per order ---------- */

.bo-orders { display: grid; gap: var(--tud-space-4); }
.bo-order { display: grid; gap: var(--tud-space-4); padding: var(--tud-space-5); min-width: 0; }
.bo-order-head { display: flex; align-items: center; gap: var(--tud-space-2); flex-wrap: wrap; }
.bo-order-code { margin: 0 auto 0 0; font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

.bo-order-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tud-space-4); }
.bo-to { display: grid; gap: 2px; font-style: normal; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.bo-to-name { font-weight: 800; }
.bo-to-phone { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bo-items { display: grid; margin: 0; padding: 0; list-style: none; }
.bo-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--tud-space-3);
  padding: var(--tud-space-3) 0;
  border-top: var(--tud-border-hairline) solid var(--tud-color-border-default);
}
.bo-thumb { width: 56px; height: 56px; border-radius: var(--tud-radius-sm); object-fit: cover; background: var(--tud-color-bg-sunken); }
.bo-item-text { display: grid; gap: 2px; min-width: 0; }
.bo-item-title { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.bo-item-choice { color: var(--tud-color-text-secondary); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.bo-qty { font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bo-order-acts { display: flex; gap: var(--tud-space-2); flex-wrap: wrap; }
.bo-ship { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tud-space-3); align-items: start; }
.bo-ship-foot { grid-column: 1 / -1; display: flex; gap: var(--tud-space-2); flex-wrap: wrap; }
.bo-order > .pt-status:empty { display: none; }

@media (min-width: 900px) {
  .bo-order-body { grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: var(--tud-space-5); }
  .bo-orders { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); align-items: start; }
  .bo-item:first-child { padding-top: 0; border-top: 0; }
}

@media (max-width: 620px) {
  .bo-row { grid-template-columns: 6.25em minmax(0, 1fr); }
  .bo-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .bo-acts .btn { flex: 1 1 auto; min-height: 44px; }
  .bo-row-status { grid-column: 1 / -1; }
  .bo-when b { font-size: 18px; }
  .bo-order { padding: var(--tud-space-4); }
  .bo-ship { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- owner: rows in a location card's Staff grid (portal.css) ---------- */

.bo-own { display: contents; }
.bo-own > .pt-status { grid-column: 1 / -1; }
.bo-own > .pt-status:empty { display: none; }