/* ============================================================
   BOOKING — ORDERS PAGE (landing screen)
   Liquid-glass surfaces over the app's own background.

   The rule this section follows: every raised surface sits on an
   ELEVATION — something opaque underneath — and the glass layer goes on top of
   that. Glass over a gradient just looks like the gradient; glass over an
   opaque base reads as glass on every shade and in both themes, with no
   per-theme override to keep in sync.
   ============================================================ */

/* ---- No column separators ----
   The shared table styles draw a right border on every `th`/`td`, which turns a
   seven-column list into a spreadsheet. Removed for both booking tables. */
.booking-view .bk-table th,
.booking-view .bk-table td,
.booking-view .bk-review-table th,
.booking-view .bk-review-table td { border-right: 0; }
.booking-view .bk-table th,
.booking-view .bk-review-table th { border-left: 0; }

/* ---- Panel bar: [Book] [Search] ......... [Tabs] ----
   Tabs pushed to the far right so they line up with the right edge of the
   table under them. */
.bk-panelbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.bk-panelbar .bk-tabs { margin-left: auto; padding: 0; }
.bk-search { flex: 0 1 280px; }
.bk-search input { width: 100%; }

/* Manual booking. An icon at rest that reveals its label on hover and focus —
   the same reveal used elsewhere in the app — so it reads as a single action
   rather than a button plus a caption. */
/* Scoped to `.booking-view` deliberately, and not cosmetic.

   Three rules land on this button:
     .view button          { height:26px }   specificity 0,1,1
     .booking-view button  { height:auto }   0,1,1 — loads later, so it wins
     .bk-newbook           { height:34px }   0,1,0 — LOSES to both
   A bare class cannot beat an element-plus-class selector. That is why the
   button rendered unstyled at 16px with a transparent background while the
   rule looked correct in the file. Prefixing with `.booking-view` gives 0,2,0
   and it wins. Every custom button inside `.booking-view` needs this. */
.booking-view .bk-newbook {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: gap .18s ease, padding .18s ease, background .18s ease;
}
.booking-view .bk-newbook .i { width: 15px; height: 15px; flex: 0 0 auto; }
/* The label is always in the layout and revealed by width, not by display, so
   the button does not reflow the row when the pointer passes over it. */
.booking-view .bk-newbook span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .2s ease, opacity .16s ease;
}
.booking-view .bk-newbook:hover,
.booking-view .bk-newbook:focus-visible {
  gap: 7px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--primary) 22%, var(--card));
}
.booking-view .bk-newbook:hover span,
.booking-view .bk-newbook:focus-visible span { max-width: 90px; opacity: 1; }
.booking-view .bk-newbook:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* The page keeps the app's own background and gradient. Only the orders panel is
   lifted, so the gradient still shows around its edges. */
.booking-view #bk-orders .bk-panel,
.booking-view #bk-orders .bk-bulk {
  position: relative;
  isolation: isolate;
  background: var(--elev);
  border: 1px solid var(--line);
}

/* The sheen. A single soft highlight across the top of the surface reads as a
   light source above the card rather than as a flat tint. */
.booking-view #bk-orders .bk-panel::before,
.booking-view #bk-orders .bk-bulk.has-sel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, transparent), transparent 42%),
    color-mix(in srgb, var(--card) 26%, transparent);
  backdrop-filter: blur(10px) saturate(1.15);
}

/* `[hidden]` is a UA-stylesheet `display: none`, so ANY class rule that sets
   `display` beats it on specificity. `.bk-bulk` is `display: flex`, so setting
   `bulk.hidden = true` did nothing and the bar stayed on screen reading "No
   orders selected" — exactly the state it was meant to leave. One rule fixes
   this for the whole section, including anything added later. */
.booking-view [hidden] { display: none !important; }

.reloadrow { margin-bottom: 0; min-height: 0; }
/* Gap between the toolbar, the metrics, the hint line and the panel. */
.reloadrow + .bk-panel,
.reloadrow + .bk-recent-block { margin-top: 18px; }
.reloadrow:empty { display: none; }

/* ---- Panel: search + need-info toggle in the header ---- */
.bk-infobtn.on {
  background: var(--warn-soft);
  color: var(--warn-text);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}
/* Without this the toggle reads as inert while it is actually filtering. */
.bk-infobtn .i { color: var(--warn-text); }

/* ---- Tabs ---- */
.bk-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
}
/* Tabs.
   These were white cards with borders — five of them, in a row, next to a
   search box. At 14px on an opaque --card they read as five separate buttons
   competing with the panel for attention, which is why they looked wrong.

   The fix is to make them quieter than everything around them, not louder:
   transparent at rest, text only, a soft fill on the active one. The fill is
   what tells you where you are; the surface is what made it shout. */
.bk-tabs .seg {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  padding: 0;
}
.bk-tabs .seg button {
  position: relative;
  border: 1px solid transparent;
  background: transparent;
  color: var(--label);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.05px;
  padding: 9px 12px 10px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  /* `none` is load-bearing. `.view button.on` in sections.css carries
     `box-shadow: var(--shadow)` and this element is a `.view button`, so the
     active tab inherited a floating drop shadow it never asked for. Declared
     here so the reset does not depend on which rule wins the cascade. */
  box-shadow: none;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease, background .15s ease;
}
.bk-tabs .seg button:hover { color: var(--text); background: var(--elev); }

/* The active tab.

   Three earlier attempts were measured rather than eyeballed, and a pale fill
   cannot work here at any opacity: the panel behind these tabs is near-white in
   light and near-black in dark, so a faint primary wash measured 1.17:1 in
   light and 1.19:1 in dark against the page — indistinguishable from the
   inactive tabs. The border edge that was supposed to carry it fell to 1.12:1
   in dark, i.e. invisible. Bolder ink on a pale fill also failed contrast for
   the count chip at 3.86:1.

   So the selection signal is an indicator rather than a surface: --text ink at
   600, plus a 2px primary underline. The underline is opaque, so it is the one
   part of this row that is guaranteed visible in either theme, and it costs no
   fill, no border and no shadow. An inset shadow is used instead of a ::after
   bar so it cannot shift the layout or be inherited away by another rule. */
.bk-tabs .seg button.on {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primary);
}
.bk-tabs .seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Counts are chips, not loose text, so the numbers stop floating next to the
   label. --label is the ink rather than the active --primary-dark, which could
   not reach AA on a chip. Tabular numerals stop the row twitching as the counts
   change between filters. */
.bk-tabs .seg .cnt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  color: var(--label);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bk-tabs .seg button.on .cnt {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--label);
}

/* ---- Bulk bar ---- */
/* Sits directly under the tab strip and above the table. Hidden of content
   rather than of the element itself, so its height does not shift the table
   when nothing is selected. */
.bk-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: var(--r-md, 12px);
  background: var(--elev);
  border: 1px solid var(--line);
  transition: background .18s ease, border-color .18s ease;
}
/* Only the "has something selected" state gets emphasis. A permanently tinted
   bar implies there is already a selection when there may not be. */
.bk-bulk.has-sel {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
}

.bk-bulk-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bk-bulk-actions { display: flex; align-items: center; gap: 9px; }

.bk-bulk-text { font-size: 12.5px; font-weight: 650; min-width: 0; }
.bk-bulk-text b { font-weight: 800; }
.bk-bulk-meta { color: var(--muted); font-weight: 500; }
.bk-bulk-text .am { color: var(--warn-text); font-weight: 650; }
/* Close the bar and drop the selection. An X rather than a worded button: the
   bar is only on screen because something is selected, so dismissing it and
   clearing are the same act and one glyph says both. */
.booking-view .bk-bulk-x {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 0;
  transition: background .14s ease, color .14s ease;
}
.booking-view .bk-bulk-x:hover { background: var(--elev); color: var(--text); }
.booking-view .bk-bulk-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Close the bar and drop the selection. It sits at the END of the bar, past
   the Review button, so it reads as "dismiss this" rather than as another
   action competing with the one that commits the batch. */
.booking-view .bk-bulk-x-end {
  margin-left: 2px;
  border-color: var(--line);
  background: var(--card);
}
.booking-view .bk-bulk-x-end:hover { background: var(--elev); color: var(--text); }

/* Routing dropdown.

   This one was fought for a long time: `appearance: none` plus a hand-drawn
   gradient chevron, plus a min-width, and it still rendered as a narrow box with
   nothing in it but the chevron. Every measurement said the value was set —
   value="auto", selectedIndex 0, correct colour, correct width — and it still
   looked empty on screen.

   So the custom painting is gone. Native select, native chevron. The browser
   renders the selected option itself and it cannot end up invisible. The arrow
   in your screenshot was the only part that ever painted reliably, which is
   exactly what a broken appearance override looks like. */
.bk-route-select {
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 260px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--elev);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bk-route-select:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.bk-route-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }

/* ---- Row actions: View + Book side by side ---- */
.bk-rowacts { display: inline-flex; gap: 6px; justify-content: flex-end; }
/* Scoped for the same reason as `.bk-newbook`: a bare class cannot outrank
   `.view button` / `.booking-view button` for size or paint. These also need
   an explicit height because `height:auto` would otherwise win. */
.booking-view .bk-bookbtn {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.booking-view .bk-bookbtn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 26%, transparent);
}
.booking-view .bk-bookbtn:disabled {
  opacity: .4;
  cursor: not-allowed;
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}

/* ---- Select-all: tri-state ---- */
/* `.part` is the partial state. Without a distinct look there is no way to
   tell "some selected" from "none selected" — the reference's third bug. */
.cb.part::after {
  content: '';
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-50%);
}
.cb { position: relative; cursor: pointer; }
.cb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Footer ----
   Removed. It held a row count and a "Clear selection" button, both of which
   now sit in the bulk bar next to the selection they act on. */

.bk-ord-scroll { padding-bottom: 4px; overflow-x: auto; }
.bk-table { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; }
/* The reference's table is min-width 850 inside a page that is also 850 wide
   minus padding, which forces a horizontal scrollbar on a laptop. Tightened so
   it only scrolls when the shell genuinely cannot fit the columns. */

/* The two tables share the panel; only one is displayed at a time. `hidden` on
   the element does the work — do not switch to a class here, because a `display`
   rule on .bk-table would silently defeat the attribute. */
.bk-table[hidden] { display: none !important; }
/* The Recent tab hides selection, so the header's empty spacer column would
   otherwise leave a stray 34px gap above the tracking ids. */
.bk-recent-table { min-width: 900px; }

@media (max-width: 1180px) {
}
@media (max-width: 700px) {
  .bk-bulk { flex-direction: column; align-items: stretch; }
  .bk-bulk-actions { justify-content: space-between; }
  /* Native control, so no min-width override is needed here either. */
  .bk-route-select { flex: 1 1 auto; min-width: 160px; max-width: none; }
}