/* ============================================================================
   S3 — Order & kitchen operations.
   Served as _content/ClientSharedLibrary/css/orders.css. Depends on tokens.css.

   Covers /kitchen, /holdbills, /online-orders, /customers, /delivery-management
   and the SelfCheckoutOrders strip that renders inside the till.

   SPECIFICITY — same strategy S2 used for the till. Every rule is prefixed with
   .mp-orders, added to each page's root element. Blazor emits a page's <style>
   block into the document *after* the <head> links, so at equal weight the
   component would win; the prefix takes us to (0,2,0) and settles it without a
   blanket !important. Bootstrap's *utilities* are still !important and cannot
   be out-specified — those get removed from the markup instead (see S1).

   WHY THIS SEGMENT NEEDED A BOOTSTRAP LAYER
   S1 and S2 covered surfaces the app styles itself. S3 is the first segment
   where two of the five pages (/customers, /delivery-management) are built
   almost entirely from stock Bootstrap components with no CSS of their own —
   /delivery-management has zero style rules and zero colour literals. Left
   alone they would stay light-mode Bootstrap while everything around them
   follows the theme. So the bottom half of this file restyles the Bootstrap
   classes the segment actually uses.

   That layer is written as real property rules, NOT as --bs-* variable
   overrides, and this is deliberate: the web host loads Bootstrap 5.3.3 from
   the CDN, while POSMauiApp ships a local Bootstrap **5.1.0**. The --bs-*
   runtime theming variables only exist from 5.3, so a variable bridge would
   theme the browser and silently do nothing in the MAUI WebView — the one
   place the doc's "verify in both hosts" rule is hardest to catch by eye.
   Property rules work identically on both.

   DENSITY
     /kitchen, /holdbills, /online-orders   compact  — read at speed, standing
     /customers, /delivery-management       default  — admin desk, data entry
   ========================================================================= */

/* ============================================================================
   1. Page frame
   ========================================================================= */
.mp-orders {
  font-family: var(--mp-font);
  font-size: var(--mp-text-ui);
  color: var(--mp-ink);
}

/* Section heading + toolbar shared by every S3 page. */
.mp-orders .ops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mp-gap);
  margin-bottom: var(--mp-gap);
}

.mp-orders .ops-title {
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
  margin: 0;
  /* No uppercase, no tracking — see the S2 note: both are no-ops in the Indic
     scripts and Japanese this app ships in, and tracking splits conjuncts. */
  text-transform: none;
  letter-spacing: 0;
}

.mp-orders .ops-subtitle {
  color: var(--mp-muted);
  font-size: var(--mp-text-sm);
  margin: 0;
}

.mp-orders .ops-actions {
  display: flex;
  align-items: center;
  gap: var(--mp-gap-tight);
  flex-wrap: wrap;
}

/* ---- Empty and loading states -------------------------------------------- */
.mp-orders .ops-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-7) var(--mp-space-4);
  text-align: center;
  color: var(--mp-muted);
  background: var(--mp-surface);
  border: 1px dashed var(--mp-line-strong);
  border-radius: var(--mp-radius-lg);
  box-shadow: none;
}
.mp-orders .ops-empty svg { opacity: .5; }
.mp-orders .ops-empty-title {
  color: var(--mp-ink-2);
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-medium);
  margin: 0;
}
.mp-orders .ops-empty-hint { font-size: var(--mp-text-sm); margin: 0; }

.mp-orders .ops-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--mp-line);
  border-top-color: var(--mp-accent);
  border-radius: 50%;
  animation: mp-ops-spin 1s linear infinite;
}
@keyframes mp-ops-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   2. Status system

   Six order states, each a --mp-st-* trio from tokens.css. A card declares its
   state by setting --st / --st-soft / --st-line once; every part of the card
   then reads those, so a new state means one rule, not fifteen.
   ========================================================================= */
/* The markup uses TWO prefixes for the same six states, and they are not
   interchangeable:

     class-status-<state>   on the card and the table row  (.class-order-card)
     class-<state>          on the status dot, the indicator and the method tag

   Both are mapped below. Getting this wrong is silent: the dot keeps its size
   and shape and simply renders in the fallback grey, so every order on the
   board looks cancelled.

   The default block comes first and the per-state blocks after it — they carry
   equal specificity, so source order is what decides. */
.mp-orders [data-status],
.mp-orders .class-order-card,
.mp-orders .class-order-row,
.mp-orders .class-status-badge,
.mp-orders .class-status-indicator,
.mp-orders .class-status-zone-title,
.mp-orders .class-payment-method-tag {
  --st:      var(--mp-st-cancelled);
  --st-soft: var(--mp-st-cancelled-soft);
  --st-line: var(--mp-st-cancelled-line);
}

.mp-orders [data-status="pending"],
.mp-orders .class-status-pending,
.mp-orders .class-pending {
  --st: var(--mp-st-pending); --st-soft: var(--mp-st-pending-soft); --st-line: var(--mp-st-pending-line);
}
.mp-orders [data-status="confirmed"],
.mp-orders .class-status-confirmed,
.mp-orders .class-confirmed {
  --st: var(--mp-st-confirmed); --st-soft: var(--mp-st-confirmed-soft); --st-line: var(--mp-st-confirmed-line);
}
.mp-orders [data-status="preparing"],
.mp-orders .class-status-preparing,
.mp-orders .class-preparing {
  --st: var(--mp-st-preparing); --st-soft: var(--mp-st-preparing-soft); --st-line: var(--mp-st-preparing-line);
}
.mp-orders [data-status="ready"],
.mp-orders .class-status-ready,
.mp-orders .class-ready {
  --st: var(--mp-st-ready); --st-soft: var(--mp-st-ready-soft); --st-line: var(--mp-st-ready-line);
}
.mp-orders [data-status="outfordelivery"],
.mp-orders .class-status-outfordelivery,
.mp-orders .class-outfordelivery {
  --st: var(--mp-st-delivery); --st-soft: var(--mp-st-delivery-soft); --st-line: var(--mp-st-delivery-line);
}
/* Delivered is a terminal success state, so it shares the "ready" green rather
   than earning a seventh hue. */
.mp-orders [data-status="delivered"],
.mp-orders .class-status-delivered,
.mp-orders .class-delivered {
  --st: var(--mp-st-ready); --st-soft: var(--mp-st-ready-soft); --st-line: var(--mp-st-ready-line);
}
.mp-orders [data-status="cancelled"],
.mp-orders .class-status-cancelled,
.mp-orders .class-cancelled {
  --st: var(--mp-st-cancelled); --st-soft: var(--mp-st-cancelled-soft); --st-line: var(--mp-st-cancelled-line);
}

/* Status chip — the label an operator reads. Never colour alone: the chip
   always carries text, so the board stays usable for colour-blind staff and
   under the washed-out contrast of a counter under bright light. */
.mp-orders .ops-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-1);
  padding: 2px var(--mp-space-2);
  min-height: 22px;
  border-radius: var(--mp-radius-pill);
  background: var(--st-soft, var(--mp-surface-2));
  color: var(--st, var(--mp-ink-2));
  border: 1px solid var(--st-line, var(--mp-line));
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}

/* Status dot, for the table rows where a chip would cost too much width. */
.mp-orders .ops-dot,
.mp-orders .class-status-badge,
.mp-orders .class-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--st, var(--mp-muted));
  box-shadow: 0 0 0 2px var(--mp-surface);
}

/* ---- Zone headings on the kanban-style board ----------------------------- */
.mp-orders .class-status-zone-header { grid-column: 1 / -1; margin: var(--mp-space-5) 0 var(--mp-space-2); }

.mp-orders .class-status-zone-title {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  font-size: var(--mp-text-base);
  font-weight: var(--mp-weight-bold);
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  /* was a saturated gradient per state with white text — replaced by the tint
     plus a rail, which separates the six states just as fast and survives the
     dark palette */
  background: var(--st-soft);
  color: var(--st);
  border: 1px solid var(--st-line);
  border-left: 4px solid var(--st);
  box-shadow: none;
  transform: none;
  text-transform: none;
  letter-spacing: 0;
}
.mp-orders .class-status-zone-title:hover { transform: none; }

.mp-orders .class-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--mp-space-1);
  background: var(--mp-surface);
  color: var(--st, var(--mp-ink-2));
  border: 1px solid var(--st-line, var(--mp-line));
  border-radius: var(--mp-radius-pill);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
}

/* ============================================================================
   3. Order card

   Shared by the kitchen display, the online-orders board and held bills. The
   state cue is a 3px rail down the leading edge plus the chip; the card body
   itself stays a neutral surface so six cards side by side do not turn the
   screen into a colour chart.
   ========================================================================= */
.mp-orders .ops-card,
.mp-orders .class-order-card,
.mp-orders .kit-card,
.mp-orders .bill-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
  /* was translateY(-5px) with a 12–16px shadow — too much movement on a grid
     that is scanned, not browsed (same call as the till's product tiles) */
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

@media (hover: hover) {
  .mp-orders .ops-card:hover,
  .mp-orders .class-order-card:hover,
  .mp-orders .kit-card:hover,
  .mp-orders .bill-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mp-shadow);
    border-color: var(--mp-line-strong);
  }
}

.mp-orders .ops-card:focus-visible,
.mp-orders .class-order-card:focus-visible,
.mp-orders .kit-card:focus-visible,
.mp-orders .bill-card:focus-visible,
.mp-orders .ops-card:has(:focus-visible),
.mp-orders .class-order-card:has(:focus-visible) {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

/* The rail. Uses an inset shadow rather than a border so it cannot fight the
   card's own border-radius or shift the content box by 3px. */
.mp-orders .class-order-card[class*="class-status-"] .class-order-surface,
.mp-orders .ops-card[data-status] > :first-child {
  box-shadow: inset 3px 0 0 0 var(--st);
}

/* Selected held bill / selected order — a ring, restated at higher weight than
   the idle rule above. S2's lesson: a blanket surface rule can silently erase
   the only indicator of which item is selected. */
.mp-orders .bill-card.selected,
.mp-orders .ops-card.selected,
.mp-orders .class-order-card.selected {
  border-color: var(--mp-accent);
  background: var(--mp-accent-soft);
  box-shadow: 0 0 0 1px var(--mp-accent);
}

/* The online-orders card interior. */
.mp-orders .class-order-surface {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* was a per-status gradient tint; the rail carries the state now */
  background: var(--mp-surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--mp-pad-card);
  padding-left: calc(var(--mp-pad-card) + var(--mp-space-1));
}
.mp-orders .class-has-actions .class-order-surface { border-radius: 0; }

.mp-orders .class-action-buttons {
  padding: var(--mp-gap-tight) var(--mp-pad-card) var(--mp-pad-card);
  padding-left: calc(var(--mp-pad-card) + var(--mp-space-1));
  border: none;
  border-top: 1px solid var(--mp-line);
  border-radius: 0;
  /* was the status tint at full strength; a faint wash keeps the action strip
     legible as its own zone without repainting the whole card */
  background: var(--mp-surface-2);
  display: flex;
  flex-direction: column;
  gap: var(--mp-gap-tight);
}

.mp-orders .class-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mp-space-2);
  margin-bottom: var(--mp-space-2);
  padding-bottom: var(--mp-space-2);
  border-bottom: 1px solid var(--mp-line);
}

/* Order numbers, quantities and money are figures — tabular so they line up
   down a column and never re-flow as digits change. */
.mp-orders .class-order-number,
.mp-orders .class-order-id,
.mp-orders .class-total-amount,
.mp-orders .class-amount,
.mp-orders .class-batch-total,
.mp-orders .kit-order-number,
.mp-orders .bill-number,
.mp-orders .item-qty,
.mp-orders .item-price,
.mp-orders .bill-total strong {
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}

.mp-orders .class-order-number,
.mp-orders .class-order-id {
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink-2);
}

.mp-orders .class-total-amount {
  margin-top: auto;
  padding-top: var(--mp-space-2);
  border-top: 1px solid var(--mp-line);
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-bold);
  /* was #28a745 — green reads as a *state*, and the total is not one */
  color: var(--mp-ink);
  text-align: right;
}
.mp-orders .class-amount { color: var(--mp-ink); font-weight: var(--mp-weight-bold); }

.mp-orders .class-customer-name { color: var(--mp-ink); font-weight: var(--mp-weight-medium); }
.mp-orders .class-customer-phone,
.mp-orders .class-detail-item,
.mp-orders .class-customer-cell,
/* A phone number and a timestamp are single tokens: breaking either across
   lines makes it unreadable and uncopyable. Seen live at 1000px — a customer's
   number rendered as "890387 / 1126" over two lines. They are pinned to one
   line in the tabular face; the table already scrolls horizontally, so the cost
   is a little more scrolling rather than mangled data. */
.mp-orders .class-phone-cell {
  color: var(--mp-ink-2);
  white-space: nowrap;
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}
.mp-orders .class-orders-table td:nth-child(6),
.mp-orders .class-orders-table th:nth-child(6) { white-space: nowrap; }
.mp-orders .class-detail-item { color: var(--mp-muted); font-size: var(--mp-text-xs); }

/* Kitchen notes — the one thing on the card that must never be missed. */
.mp-orders .class-notes,
.mp-orders .class-notes-cell {
  background: var(--mp-st-pending-soft);
  border-left: 3px solid var(--mp-st-pending);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-st-pending);
  font-style: normal;              /* italics are unreadable in Indic scripts */
  font-weight: var(--mp-weight-medium);
}
.mp-orders .class-notes { padding: var(--mp-space-2); font-size: var(--mp-text-xs); }
.mp-orders .class-no-notes { color: var(--mp-muted); }

/* ---- Payment tags -------------------------------------------------------- */
.mp-orders .class-payment-badge,
.mp-orders .class-payment-status-tag,
.mp-orders .class-payment-method-tag,
.mp-orders .class-payment-method-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-1);
  padding: 2px var(--mp-space-2);
  border-radius: var(--mp-radius-pill);
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  white-space: nowrap;
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
  border: 1px solid var(--mp-line);
  box-shadow: none;
}
/* .class-payment-method-tag also carries class-<status> in the table's status
   column, where it is the status label rather than a payment tag. */
.mp-orders .class-payment-method-tag {
  background: var(--st-soft);
  color: var(--st);
  border-color: var(--st-line);
}

.mp-orders .class-payment-badge.class-cod,
.mp-orders .class-payment-status-tag.class-cod {
  background: var(--mp-warn-soft); color: var(--mp-warn); border-color: var(--mp-warn);
}
.mp-orders .class-payment-badge.class-paid,
.mp-orders .class-payment-status-tag.class-paid {
  background: var(--mp-good-soft); color: var(--mp-good); border-color: var(--mp-good);
}
.mp-orders .class-payment-status-tag.class-cod-clickable,
.mp-orders .class-payment-badge.class-cod-clickable { cursor: pointer; }
.mp-orders .class-payment-status-tag.class-cod-clickable:hover,
.mp-orders .class-payment-badge.class-cod-clickable:hover {
  background: var(--mp-warn); color: var(--mp-surface); transform: none;
}
.mp-orders .class-payment-status-tag.class-send-request,
.mp-orders .class-payment-badge.class-send-request {
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  border-color: var(--mp-accent);
  cursor: pointer;
}
.mp-orders .class-payment-status-tag.class-send-request:hover,
.mp-orders .class-payment-badge.class-send-request:hover {
  background: var(--mp-accent-hover); opacity: 1; transform: none;
}

/* ============================================================================
   4. Buttons the segment defines itself
   ========================================================================= */
.mp-orders .class-btn,
.mp-orders .class-action-btn,
.mp-orders .mobile-batch-action-btn,
.mp-orders .btn-select,
.mp-orders .btn-delete,
.mp-orders .btn-complete,
.mp-orders .refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-3);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-family: inherit;
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.mp-orders .class-btn:hover,
.mp-orders .class-action-btn:hover,
.mp-orders .mobile-batch-action-btn:hover,
.mp-orders .btn-select:hover,
.mp-orders .btn-delete:hover,
.mp-orders .btn-complete:hover,
.mp-orders .refresh-button:hover {
  background: var(--mp-surface-2);
  transform: none;               /* the lift-on-hover is gone segment-wide */
  box-shadow: none;
}
.mp-orders .class-btn:focus-visible,
.mp-orders .class-action-btn:focus-visible,
.mp-orders .mobile-batch-action-btn:focus-visible,
.mp-orders .btn-select:focus-visible,
.mp-orders .btn-delete:focus-visible,
.mp-orders .btn-complete:focus-visible,
.mp-orders .refresh-button:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}
.mp-orders .class-btn:disabled,
.mp-orders .class-action-btn:disabled { opacity: .55; cursor: not-allowed; }

/* One filled button per card: the action that advances the order. Everything
   else stays quiet so the next step is obvious at a glance. */
.mp-orders .class-btn-prepare,
.mp-orders .class-btn-deliver,
.mp-orders .class-btn-deliver-action,
.mp-orders .class-btn-ship,
.mp-orders .class-btn-ship-action,
.mp-orders .btn-complete,
.mp-orders .btn-select,
.mp-orders .class-btn-batch-ship {
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  border-color: var(--mp-accent);
}
.mp-orders .class-btn-prepare:hover,
.mp-orders .class-btn-deliver:hover,
.mp-orders .class-btn-deliver-action:hover,
.mp-orders .class-btn-ship:hover,
.mp-orders .class-btn-ship-action:hover,
.mp-orders .btn-complete:hover,
.mp-orders .btn-select:hover,
.mp-orders .class-btn-batch-ship:hover {
  background: var(--mp-accent-hover);
  border-color: var(--mp-accent-hover);
}

/* Destructive actions read as destructive, not merely as another colour. */
.mp-orders .class-btn-cancel,
.mp-orders .class-btn-remove-batch,
.mp-orders .btn-delete {
  background: var(--mp-surface);
  color: var(--mp-danger);
  border-color: var(--mp-danger);
}
.mp-orders .class-btn-cancel:hover,
.mp-orders .class-btn-remove-batch:hover,
.mp-orders .btn-delete:hover {
  background: var(--mp-danger-soft);
}

/* "Assign delivery" is a filled secondary: it is a real commitment, but not the
   step that advances the order, so it takes the delivery hue rather than the
   accent. Was an inline indigo gradient in four places. */
.mp-orders .class-btn-assign {
  background: var(--mp-st-delivery-soft);
  color: var(--mp-st-delivery);
  border-color: var(--mp-st-delivery-line);
}
.mp-orders .class-btn-assign:hover { background: var(--mp-st-delivery); color: var(--mp-surface); }

/* "View cart" opens the order; quiet, like the other read-only actions. */
.mp-orders .class-btn-view { background: var(--mp-surface); color: var(--mp-ink); }

.mp-orders .class-btn svg,
.mp-orders .class-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.mp-orders .class-btn-back {
  background: var(--mp-surface);
  color: var(--mp-ink-2);
  border-color: var(--mp-line-strong);
}
.mp-orders .class-btn-back:hover { background: var(--mp-surface-2); transform: none; }

/* ---- Filter chips (desktop board) ---------------------------------------- */
.mp-orders .class-filter-buttons {
  display: flex;
  gap: var(--mp-gap-tight);
  overflow-x: auto;
  padding-block: var(--mp-space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--mp-line-strong) transparent;
}
.mp-orders .class-filter-buttons::-webkit-scrollbar { height: 6px; }
.mp-orders .class-filter-buttons::-webkit-scrollbar-thumb {
  background-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-pill);
}

.mp-orders .class-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-space-2);
  min-height: var(--mp-control-h);
  padding: 0 var(--mp-space-4);
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-pill);
  background: var(--mp-surface);
  color: var(--mp-ink-2);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.mp-orders .class-filter-btn:hover { background: var(--mp-surface-2); transform: none; box-shadow: none; }
.mp-orders .class-filter-btn.active {
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  border-color: var(--mp-accent);
  font-weight: var(--mp-weight-bold);
}
.mp-orders .class-filter-btn:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }

.mp-orders .class-filter-btn .class-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 var(--mp-space-1);
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
  border-radius: var(--mp-radius-pill);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
}
.mp-orders .class-filter-btn.active .class-count {
  background: rgba(255, 255, 255, .22);
  color: var(--mp-accent-ink);
}

/* ============================================================================
   5. Data tables
   ========================================================================= */
.mp-orders .class-table-container,
.mp-orders .cust-table-wrap {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  overflow-x: auto;                /* wide tables scroll in their own box */
  -webkit-overflow-scrolling: touch;
}

.mp-orders .class-orders-table,
.mp-orders .cust-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mp-text-ui);
}

/* The orders table has ten columns and no min-width, so `table-layout: auto`
   was starving the narrow ones below their min-content width — at which point
   the browser breaks inside a word as a last resort. Seen live: a customer's
   phone number rendered as "8903 87112 6" across three lines in a 61px column,
   which is unreadable and uncopyable at a glance. The container already
   scrolls; the table just needed permission to be wider than it. */
.mp-orders .class-orders-table { min-width: 1180px; }
.mp-orders .cust-table { min-width: 720px; }

.mp-orders .class-orders-table thead,
.mp-orders .cust-table thead {
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
}

.mp-orders .class-orders-table thead th,
.mp-orders .cust-table thead th,
.mp-orders .cust-table th {
  padding: var(--mp-space-3);
  text-align: left;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-muted);
  background: var(--mp-surface-2);
  border-bottom: 1px solid var(--mp-line);
  white-space: nowrap;
  /* was uppercase + 0.5px tracking on the orders table — dropped for the same
     reason as the till's category names */
  text-transform: none;
  letter-spacing: 0;
}

.mp-orders .class-orders-table tbody tr,
.mp-orders .cust-table tbody tr {
  border-bottom: 1px solid var(--mp-line);
  transition: background-color .12s ease;
}
.mp-orders .class-orders-table tbody tr:hover,
.mp-orders .cust-table tbody tr:hover {
  background: var(--mp-surface-2);
  /* was transform: scale(1.005) on every row — it blurred text mid-hover and
     shifted neighbouring rows under the pointer */
  transform: none;
}
.mp-orders .class-orders-table tbody td,
.mp-orders .cust-table td {
  padding: var(--mp-space-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink-2);
}

/* Status tint on a row: a leading rail, not a gradient wash across the row. */
.mp-orders .class-order-row[class*="class-status-"] {
  background: none;
  box-shadow: inset 3px 0 0 0 var(--st);
}

.mp-orders .class-action-cell {
  display: flex;
  gap: var(--mp-space-1);
  align-items: center;
  flex-wrap: wrap;
}

/* ============================================================================
   6. Overlays — modals, toasts, batch dialogs
   ========================================================================= */
.mp-orders .class-pdf-modal-overlay,
.mp-orders .batch-modal-backdrop,
.mp-orders .modal-backdrop-cust {
  background: rgba(9, 12, 17, .62);
}

.mp-orders .class-pdf-modal-content,
.mp-orders .batch-modal-box,
.mp-orders .modal-cust-box {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
}

.mp-orders .class-pdf-modal-header,
.mp-orders .batch-modal-header,
.mp-orders .modal-cust-header {
  /* was a solid slate/blue bar with white text in each of three components */
  background: var(--mp-surface-2);
  color: var(--mp-ink);
  border-bottom: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg) var(--mp-radius-lg) 0 0;
  padding: var(--mp-space-4);
}
.mp-orders .class-pdf-modal-header h3,
.mp-orders .batch-modal-header h5,
.mp-orders .modal-cust-header h5 {
  margin: 0;
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-bold);
  color: var(--mp-ink);
}
/* The close control was .btn-close-white, sized for a dark header. */
.mp-orders .modal-cust-header .btn-close,
.mp-orders .batch-modal-header .btn-close { filter: none; }

.mp-orders .modal-cust-footer,
.mp-orders .batch-modal-footer {
  border-top: 1px solid var(--mp-line);
  padding: var(--mp-space-3) var(--mp-space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--mp-space-2);
}
.mp-orders .modal-cust-body,
.mp-orders .batch-modal-body { padding: var(--mp-space-4); }

/* New-order and payment toasts. Both sit above everything, so they use the
   shell's overlay layer rather than an ad-hoc z-index in the thousands. */
.mp-orders .new-order-toast,
.mp-orders .payment-toast-bar {
  z-index: var(--mp-z-overlay);
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-lg);
  /* keep clear of the home indicator on notched devices in the MAUI shell */
  bottom: max(var(--mp-space-5), env(safe-area-inset-bottom));
}
.mp-orders .new-order-toast { border-left: 4px solid var(--mp-accent); }
.mp-orders .new-order-toast-header {
  background: var(--mp-accent-soft);
  border-bottom: 1px solid var(--mp-line);
}
.mp-orders .new-order-toast-title { color: var(--mp-accent); font-weight: var(--mp-weight-bold); }
.mp-orders .new-order-toast-subtitle {
  color: var(--mp-muted);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}
.mp-orders .new-order-toast-row span { color: var(--mp-muted); }
.mp-orders .new-order-toast-row strong { color: var(--mp-ink); }
.mp-orders .new-order-toast-address,
.mp-orders .new-order-toast-items { border-top: 1px solid var(--mp-line); color: var(--mp-ink-2); }
.mp-orders .new-order-toast-close {
  background: var(--mp-surface-2);
  color: var(--mp-ink-2);
  border: 1px solid var(--mp-line);
}
.mp-orders .new-order-toast-action {
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  border-top: 1px solid var(--mp-accent);
  min-height: var(--mp-control-h);
  font-weight: var(--mp-weight-bold);
}
.mp-orders .new-order-toast-action:hover { background: var(--mp-accent-hover); }

.mp-orders .payment-toast-bar {
  background: var(--mp-good-soft);
  color: var(--mp-good);
  border: 1px solid var(--mp-good);
}
.mp-orders .payment-toast-close {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

/* ============================================================================
   7. Batch delivery (map dispatch)

   Batches are a grouping, not an order state, so they get the delivery hue
   they already implied rather than a seventh colour of their own.
   ========================================================================= */
.mp-orders .class-batch-bar,
.mp-orders .mobile-batch-header-card,
.mp-orders .class-batch-header-row td {
  background: var(--mp-st-delivery-soft);
  border-color: var(--mp-st-delivery-line);
  color: var(--mp-st-delivery);
}
.mp-orders .class-batch-bar { border-bottom: 2px solid var(--mp-st-delivery); }
.mp-orders .class-table-batch-bar {
  border: 1px solid var(--mp-st-delivery-line);
  border-radius: var(--mp-radius-sm);
}
.mp-orders .mobile-batch-header-card {
  border: 1px solid var(--mp-st-delivery-line);
  border-left: 4px solid var(--mp-st-delivery);
  border-radius: var(--mp-radius);
  box-shadow: none;
}
.mp-orders .class-batch-count,
.mp-orders .mobile-batch-name,
.mp-orders .class-batch-tag { color: var(--mp-st-delivery); font-weight: var(--mp-weight-bold); }
.mp-orders .class-batch-total,
.mp-orders .class-batch-meta,
.mp-orders .mobile-batch-summary { color: var(--mp-st-delivery); }
.mp-orders .class-in-batch td { background: var(--mp-st-delivery-soft); }
.mp-orders .mobile-in-batch-card .class-order-surface,
.mp-orders .mobile-in-batch-card .class-action-buttons { background: var(--mp-st-delivery-soft); }
.mp-orders .qr-stop-num { background: var(--mp-st-delivery); color: var(--mp-surface); }

.mp-orders .class-map-hint-bar {
  background: var(--mp-surface-2);
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink-2);
  font-size: var(--mp-text-sm);
}
.mp-orders .class-btn-clear-sel { background: var(--mp-surface); color: var(--mp-ink-2); }
.mp-orders .class-map-toggle-btn.active {
  background: var(--mp-st-delivery);
  /* --mp-surface, not white: the ramp hue inverts between themes, so the ink
     has to invert with it. */
  color: var(--mp-surface);
  border-color: var(--mp-st-delivery);
  box-shadow: none;
}

.mp-orders .class-leaflet-map { border-radius: 0 0 var(--mp-radius) var(--mp-radius); }

/* ---- Date stepper -------------------------------------------------------- */
.mp-orders .date-nav-pos {
  border: 1px solid var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  background: var(--mp-surface);
  overflow: hidden;
}
.mp-orders .pos-btn {
  width: var(--mp-row-h);
  height: var(--mp-row-h);
  background: var(--mp-surface);
  color: var(--mp-ink-2);
  border: none;
  font-size: var(--mp-text-lg);
  cursor: pointer;
}
.mp-orders .pos-btn:hover { background: var(--mp-surface-2); color: var(--mp-ink); }
.mp-orders .pos-btn:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: -2px; }
.mp-orders .pos-date {
  height: var(--mp-row-h);
  padding: 0 var(--mp-space-3);
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: none;
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-ui);
}

/* ============================================================================
   8. Bootstrap layer

   Real property rules, not --bs-* overrides — see the header note on the 5.1 /
   5.3 split between the two hosts. Scoped to .mp-orders so nothing here leaks
   into segments that have not been converted yet.
   ========================================================================= */
.mp-orders .btn {
  --bs-btn-focus-box-shadow: var(--mp-focus);   /* harmless on 5.1, used on 5.3 */
  min-height: var(--mp-control-h);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  line-height: var(--mp-leading-tight);
}
.mp-orders .btn-sm { min-height: calc(var(--mp-control-h) - 6px); font-size: var(--mp-text-sm); }
.mp-orders .btn:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; box-shadow: none; }

.mp-orders .btn-primary {
  background-color: var(--mp-accent);
  border-color: var(--mp-accent);
  color: var(--mp-accent-ink);
}
.mp-orders .btn-primary:hover,
.mp-orders .btn-primary:active {
  background-color: var(--mp-accent-hover);
  border-color: var(--mp-accent-hover);
  color: var(--mp-accent-ink);
}
.mp-orders .btn-secondary {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-line-strong);
  color: var(--mp-ink);
}
.mp-orders .btn-secondary:hover { background-color: var(--mp-line); color: var(--mp-ink); }
.mp-orders .btn-outline-secondary {
  background-color: transparent;
  border-color: var(--mp-line-strong);
  color: var(--mp-ink-2);
}
.mp-orders .btn-outline-secondary:hover { background-color: var(--mp-surface-2); color: var(--mp-ink); }
.mp-orders .btn-outline-primary {
  background-color: transparent;
  border-color: var(--mp-accent);
  color: var(--mp-accent);
}
.mp-orders .btn-outline-primary:hover { background-color: var(--mp-accent-soft); color: var(--mp-accent); }
.mp-orders .btn-outline-danger {
  background-color: transparent;
  border-color: var(--mp-danger);
  color: var(--mp-danger);
}
.mp-orders .btn-outline-danger:hover { background-color: var(--mp-danger-soft); color: var(--mp-danger); }
.mp-orders .btn-link { color: var(--mp-accent); }

/* Form controls */
.mp-orders .form-control,
.mp-orders .form-select,
.mp-orders .input-group-text {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border-color: var(--mp-line-strong);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  min-height: var(--mp-control-h);
}
.mp-orders .form-control-sm,
.mp-orders .form-select-sm { min-height: calc(var(--mp-control-h) - 6px); font-size: var(--mp-text-sm); }
.mp-orders .input-group-text { background-color: var(--mp-surface-2); color: var(--mp-ink-2); }
.mp-orders .form-control::placeholder { color: var(--mp-muted); opacity: 1; }
.mp-orders .form-control:focus,
.mp-orders .form-select:focus {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border-color: var(--mp-accent);
  box-shadow: var(--mp-focus);
}
.mp-orders .form-control:disabled,
.mp-orders .form-control[readonly] { background-color: var(--mp-surface-2); color: var(--mp-muted); }
.mp-orders .form-label { color: var(--mp-ink-2); font-size: var(--mp-text-sm); font-weight: var(--mp-weight-medium); }
.mp-orders .form-check-label { color: var(--mp-ink-2); }
.mp-orders .form-check-input { background-color: var(--mp-surface); border-color: var(--mp-line-strong); }
.mp-orders .form-check-input:checked { background-color: var(--mp-accent); border-color: var(--mp-accent); }

/* Tables, cards, alerts */
.mp-orders .table {
  color: var(--mp-ink-2);
  border-color: var(--mp-line);
}
.mp-orders .table > thead { color: var(--mp-muted); }
.mp-orders .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: var(--mp-line);
  color: inherit;
}
.mp-orders .table-hover > tbody > tr:hover > * { background-color: var(--mp-surface-2); color: var(--mp-ink); }
.mp-orders .table-light,
.mp-orders .table > thead.table-light > tr > * {
  --bs-table-bg: var(--mp-surface-2);
  background-color: var(--mp-surface-2);
  color: var(--mp-muted);
}

.mp-orders .card {
  background-color: var(--mp-surface);
  border-color: var(--mp-line);
  border-radius: var(--mp-radius);
  color: var(--mp-ink);
}
.mp-orders .card-header,
.mp-orders .card-footer { background-color: var(--mp-surface-2); border-color: var(--mp-line); color: var(--mp-ink-2); }

.mp-orders .alert { border-radius: var(--mp-radius-sm); font-size: var(--mp-text-ui); }
.mp-orders .alert-danger  { background-color: var(--mp-danger-soft); color: var(--mp-danger); border-color: var(--mp-danger); }
.mp-orders .alert-success { background-color: var(--mp-good-soft);   color: var(--mp-good);   border-color: var(--mp-good); }
.mp-orders .alert-warning { background-color: var(--mp-warn-soft);   color: var(--mp-warn);   border-color: var(--mp-warn); }
.mp-orders .alert-info    { background-color: var(--mp-info-soft);   color: var(--mp-info);   border-color: var(--mp-info); }

.mp-orders .badge {
  border-radius: var(--mp-radius-pill);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
}
/* .bg-* and .text-* are Bootstrap utilities and !important, so these do not
   try to recolour them — a badge that must follow the theme drops the utility
   in the markup and takes .ops-chip instead. */

/* .btn-xs is used six times in DeliveryManagementPanel but does not exist in
   Bootstrap at any version — those row buttons were silently rendering at full
   .btn size inside table cells. Defined here rather than removed from the
   markup: a smaller-than-sm button is genuinely what a table row wants. */
.mp-orders .btn-xs {
  min-height: calc(var(--mp-control-h) - 12px);
  padding: 0 var(--mp-space-2);
  font-size: var(--mp-text-xs);
  border-radius: var(--mp-radius-sm);
}

/* Real Bootstrap modals — DeliveryManagementPanel uses five of them. */
.mp-orders .modal-content {
  background-color: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
}
.mp-orders .modal-header,
.mp-orders .modal-footer {
  background-color: var(--mp-surface-2);
  border-color: var(--mp-line);
}
.mp-orders .modal-title { color: var(--mp-ink); font-size: var(--mp-text-lg); font-weight: var(--mp-weight-bold); }
.mp-orders .modal-body { color: var(--mp-ink-2); }
.mp-orders .modal-backdrop { background-color: rgba(9, 12, 17, .62); }

.mp-orders .list-group-item {
  background-color: var(--mp-surface);
  color: var(--mp-ink-2);
  border-color: var(--mp-line);
}

.mp-orders .spinner-border { color: var(--mp-accent); }
.mp-orders .btn-close:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; box-shadow: none; }

/* .text-muted is !important-free in Bootstrap 5.1 but variable-driven in 5.3;
   pinning the colour here keeps it legible on the dark surface in both. */
.mp-orders .text-muted { color: var(--mp-muted) !important; }

/* ============================================================================
   9. Page-specific corrections
   ========================================================================= */

/* ---- /kitchen ------------------------------------------------------------
   The header was position: fixed across the full viewport, so on every screen
   from 900px up it drew straight over the S1 sidebar and the top strip. It is
   sticky inside the content column now, which keeps it in view while scrolling
   without leaving the layout.
   ------------------------------------------------------------------------ */
.mp-orders.kitchen-page {
  padding: 0;
  min-height: auto;
  background: transparent;
}
.mp-orders .kitchen-header {
  position: sticky;
  top: 0;
  left: auto;
  right: auto;
  /* Below the shell's nav so a scrolled kitchen board never covers it. */
  z-index: calc(var(--mp-z-nav) - 2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mp-gap-tight);
  padding: var(--mp-space-3);
  margin-bottom: var(--mp-gap);
  border-radius: var(--mp-radius);
  /* The business's own brand colour is applied inline and wins. HomeState's
     backgroundcolor is nullable, though, and a null renders an invalid
     declaration — without this fallback the bar would lose its background and
     leave near-white --mp-on-brand text on the page ground. */
  background: var(--mp-accent);
  color: var(--mp-on-brand);
  box-shadow: var(--mp-shadow-sm);
}
.mp-orders .kitchen-header .header-title,
.mp-orders .kitchen-header .business-name {
  color: var(--mp-on-brand);
  margin: 0;
  font-size: var(--mp-text-lg);
  font-weight: var(--mp-weight-bold);
  line-height: var(--mp-leading-tight);
}
.mp-orders .kitchen-header .business-name {
  font-size: var(--mp-text-base);
  font-weight: var(--mp-weight-medium);
  font-style: normal;
  color: var(--mp-on-brand-dim);
  margin-left: auto;              /* pushes the shop name to the trailing edge */
}
.mp-orders .kitchen-header .refresh-button {
  background: rgba(255, 255, 255, .16);
  color: var(--mp-on-brand);
  border-color: rgba(255, 255, 255, .28);
}
.mp-orders .kitchen-header .refresh-button:hover { background: rgba(255, 255, 255, .26); }
.mp-orders .kitchen-header .refresh-button:focus-visible { outline-color: var(--mp-on-brand); }

/* From 1280px the shell's top strip is itself sticky at top: 0, so the kitchen
   bar has to start below it or the two stack on the same line. */
@media (min-width: 1280px) {
  .mp-orders .kitchen-header { top: var(--mp-topbar-h); }
}

/* ---- /holdbills ---------------------------------------------------------- */
.mp-orders .bills-grid,
.mp-orders .order-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mp-gap);
}
.mp-orders .bill-card { padding: var(--mp-pad-card); cursor: pointer; }
.mp-orders .bill-header,
.mp-orders .bill-footer { border-color: var(--mp-line); }
.mp-orders .bill-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--mp-space-2);
  font-size: var(--mp-text-sm);
}
.mp-orders .bill-item .item-name {
  color: var(--mp-ink);
  min-width: 0;
  overflow-wrap: anywhere;        /* long localised names wrap, never overflow */
}

/* ---- SelfCheckoutOrders (renders inside the till) ------------------------ */
.mp-till .sco-table-box,
.mp-till .sco-card {
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
}
.mp-till .sco-table-box.expanded {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 2px var(--mp-accent-soft);
}
.mp-till .sco-heading,
.mp-till .sco-expanded-heading { color: var(--mp-ink); }
.mp-till .sco-total,
.mp-till .sco-count { font-family: var(--mp-font-num); font-variant-numeric: tabular-nums; }

/* ============================================================================
   10. Responsive

   The board is used on a phone at the pass, a tablet behind the counter and a
   desktop in the office. Cards go single-column on a phone; the fixed
   max-width: calc(100vw - 450px) the grid used to carry is dropped — it was
   sized for the old 1400px sidebar and left a dead strip on every tablet.
   ========================================================================= */
.mp-orders .class-tables-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--mp-gap);
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .mp-orders .class-tables-container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    max-width: 100%;
  }
}
@media (min-width: 1440px) {
  .mp-orders .class-tables-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    max-width: 100%;
  }
}

.mp-orders .class-desktop-layout {
  padding: 0;
  min-height: 0;
  background: transparent;        /* the shell paints the page ground now */
}
.mp-orders .class-desktop-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mp-gap);
  margin-bottom: var(--mp-gap);
  padding: var(--mp-space-3);
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: none;
}
.mp-orders .class-topbar-left,
.mp-orders .class-topbar-right { min-width: 0; }

@media (max-width: 599.98px) {
  .mp-orders .bills-grid,
  .mp-orders .order-cards-container,
  .mp-orders .class-tables-container { grid-template-columns: 1fr; }
  .mp-orders .class-desktop-topbar { flex-direction: column; align-items: stretch; }
}

/* The map fills whatever is left below the toolbar; 100vh minus a guessed
   header height overflowed inside the MAUI WebView, whose viewport excludes
   the safe area. */
.mp-orders .class-map-container,
.mp-orders .class-mobile-map-wrapper {
  height: auto;
  min-height: 60dvh;
  max-height: calc(100dvh - var(--mp-topbar-h) - var(--mp-space-6));
}