/*
 * modern-pos-wireframe.css — POS/checkout "wireframe refresh" layer: topbar
 * ticket group, split order summary, Cancel/Hold + tall Payment footer,
 * simplified menu panel, modern discount dialog, responsive header, serif
 * price summary.
 *
 * Phase 6 split: peeled verbatim off the very end of modern-base.css. It is a
 * GLOBAL stylesheet (not Blazor-scoped) and MUST load LAST — after
 * modern-base.css and modern-floor.css — because these rules deliberately
 * override earlier ones ("pass 2/pass 3 neutralize legacy", "token lock: final
 * overrides"). Do not reorder the <link> tags in index.html.
 */

/* ============================================================================
   POS wireframe refresh (2026-07): topbar ticket group, split summary,
   Cancel/Hold + tall Payment footer, simplified menu panel.
   ============================================================================ */

.scale-modern-pos-brand-name {
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-22);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.scale-modern-pos-ticket-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 420px;
  margin-left: 12px;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}

.scale-modern-pos-ticket-serial {
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-15);
  font-weight: 700;
  white-space: nowrap;
}

.scale-modern-pos-ticket-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.35);
}

.scale-modern-pos-ticket-input {
  flex: 1 1 150px;
  min-width: 80px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-14);
}

.scale-modern-pos-ticket-input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--scale-fs-14);
}

.scale-modern-pos-ticket-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: transparent;
  color: var(--scale-text-on-primary);
}

.scale-modern-pos-ticket-icon:hover {
  background: rgba(255, 255, 255, 0.16);
}

.scale-modern-pos-ticket-icon:disabled {
  opacity: 0.4;
}

.scale-modern-pos-ticket-icon.has-customer {
  background: rgba(255, 255, 255, 0.22);
}

.scale-modern-pos-ticket-icon .material-icons {
  font-size: var(--scale-fs-20);
}

/* Summary: line items on the left, big net total on the right. */
.scale-modern-pos-summary--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 20px;
  align-items: end;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.scale-modern-pos-summary-net {
  text-align: right;
  padding-bottom: 2px;
}

.scale-modern-pos-summary-net span {
  display: block;
  color: var(--scale-text-mute, var(--scale-text-muted));
  font-size: var(--scale-fs-11);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scale-modern-pos-summary-net strong {
  display: block;
  color: var(--scale-text);
  font-size: var(--scale-fs-26);
  font-weight: 800;
  line-height: 1.15;
}

.scale-modern-pos-summary-net strong small {
  font-size: var(--scale-fs-13);
  font-weight: 600;
  color: var(--scale-text-mute, var(--scale-text-muted));
}

/* Footer: Cancel/Hold + icon actions on the left, tall Payment button on the right. */
.scale-modern-pos-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 38%);
  gap: 10px;
  align-items: stretch;
}

.scale-modern-pos-footer-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scale-modern-pos-footer-cta {
  display: flex;
  gap: 8px;
}

.scale-modern-pos-footer-ghost {
  flex: 1 1 0;
  min-height: 46px;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.14) !important;
  color: var(--scale-text-mute, var(--scale-text-muted)) !important;
  /* Match the chip/segmented-tab text size (all resolve to 14px). !important is required
     to beat `.scale-modern-shell button { font: inherit }` (higher specificity), which
     otherwise forces these buttons to inherit the shell's 16px. */
  font-size: var(--scale-type-footnote-size) !important;
  font-weight: 500;
}

.scale-modern-pos-footer-ghost:disabled {
  opacity: 0.45;
  cursor: default;
}

.scale-modern-pos-footer-icons {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.scale-modern-pos-footer-icons::-webkit-scrollbar {
  display: none;
}

.scale-modern-pos-footer-icons button {
  flex: 1 0 auto;
  min-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: transparent !important;
  color: var(--scale-text-mute, var(--scale-text-muted)) !important;
  font-size: var(--scale-fs-12);
  font-weight: 500;
  white-space: nowrap;
}

.scale-modern-pos-footer-icons button:disabled {
  opacity: 0.45;
  cursor: default;
}

.scale-modern-pos-footer-icons button .material-icons {
  font-size: var(--scale-fs-20);
}

.scale-modern-pos-pay-big {
  min-height: 100%;
  border-radius: 12px;
  background: var(--scale-primary) !important;
  color: var(--scale-text-on-primary) !important;
  font-size: var(--scale-fs-17);
  font-weight: 700;
}

.scale-modern-pos-pay-big:disabled {
  opacity: 0.55;
  cursor: default;
}

.scale-modern-pos-pay-big.is-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.scale-modern-pos-pay-big.is-send:not(:disabled) {
  background: var(--scale-success) !important;
}

.scale-modern-pos-pay-big.is-send .material-icons {
  font-size: var(--scale-fs-20);
}

/* Menu panel: big category/subcategory tiles in wrapping rows (no search toolbar). */
.scale-modern-pos-category-row,
.scale-modern-pos-subcategory-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  overflow: visible;
}

.scale-modern-pos-category,
.scale-modern-pos-subcategory {
  min-height: 56px;
  justify-content: center;
  border-radius: 12px;
  font-size: var(--scale-fs-15);
  font-weight: 600;
}

/* ==== Wireframe refresh, pass 2: neutralize legacy layout rules ==== */

/* Topbar: brand hugs its text; ticket pill sits right beside it; nav pushed to center/right. */
.scale-modern-pos-topbar {
  justify-content: flex-start;
  gap: 14px;
  padding-right: 14px;
}

.scale-modern-pos-brand {
  min-width: 0 !important;
  flex: 0 0 auto;
  gap: 0;
}

.scale-modern-pos-brand strong.scale-modern-pos-brand-name {
  color: var(--scale-text-on-primary);
  font-size: var(--scale-fs-22);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
}

.scale-modern-pos-ticket-group {
  margin-left: 4px;
  margin-right: auto;
  background: rgba(255, 255, 255, 0.14);
}

/* Summary: undo the legacy grid that pinned every row into column 1. */
/* ── Totals block: exact port of the design system (scale-pos-option-j OrderTotalsBlock).
   [ line items (1fr) | 0.5px hairline | net total (auto) ], all inside the panel card. ── */
.scale-modern-pos-summary--split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 0.5px auto !important;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: 12px;
}

/* The 0.5px vertical hairline between the breakdown and the net total. */
.scale-modern-pos-summary--split::after {
  content: "" !important;
  display: block !important;
  grid-column: 2;
  grid-row: 1;
  background: var(--scale-separator);
}

.scale-modern-pos-summary--split > div.scale-modern-pos-summary-lines {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 8px 12px 8px 14px;
  min-height: 0;
}

/* TotalLine: label left, value right, baseline aligned. */
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  min-height: 18px;
  padding: 0;
  line-height: 1.35;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div > :first-child,
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div > :first-child strong {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-12);
  font-weight: 500;
}

/* "· not in net" style sub-label next to the Tip label. */
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div > :first-child small {
  margin-left: 5px;
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-10);
  font-weight: 500;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div > :last-child,
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div > :last-child strong {
  color: var(--scale-text);
  font-size: var(--scale-fs-12);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Discount / Refund: red amount. */
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div.is-negative > :last-child,
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div.is-negative > :last-child strong {
  color: var(--scale-danger);
}

/* Tip: muted amount. */
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div.is-muted > :last-child,
.scale-modern-pos-summary--split .scale-modern-pos-summary-lines > div.is-muted > :last-child strong {
  color: var(--scale-text-mute);
}

/* Net total column (no box - just the hairline separates it). */
.scale-modern-pos-summary--split > div.scale-modern-pos-summary-net {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  min-width: 124px;
  padding: 8px 14px;
  background: transparent;
  text-align: right;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-net span {
  color: var(--scale-text-soft);
  font-size: var(--scale-fs-10);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-net strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--scale-text);
  font-size: var(--scale-fs-30);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.scale-modern-pos-summary--split .scale-modern-pos-summary-net strong small {
  color: var(--scale-text-mute);
  font-size: var(--scale-fs-11) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Menu tiles: card look per the wireframe (white, bordered, navy when active). */
.scale-modern-pos-category-row {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding-bottom: 4px;
}

.scale-modern-pos-subcategory-wrap,
.scale-modern-pos-subcategory-row {
  overflow: visible;
}

.scale-modern-pos-subcategory-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  padding: 0 0 4px;
}

.scale-modern-pos-category,
.scale-modern-pos-subcategory {
  min-height: 54px;
  height: auto;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  background: var(--scale-panel) !important;
  color: var(--scale-text) !important;
  border: var(--scale-hairline) solid var(--scale-border) !important;
  box-shadow: var(--scale-shadow-tile);
  font-size: var(--scale-fs-15);
  font-weight: 600;
  white-space: nowrap;
}

.scale-modern-pos-category.is-active,
.scale-modern-pos-subcategory.is-active {
  background: var(--scale-primary) !important;
  color: var(--scale-text-on-primary) !important;
  border-color: var(--scale-primary) !important;
}

/* ==== Wireframe refresh, pass 3: static header layout + taller header ==== */

/* Userbar becomes a normal flex child (was absolutely pinned top-right, which forced the
   old 250px right padding and misaligned the new layout). */
.scale-modern-pos-userbar {
  position: absolute;
  top: auto;
  left: auto;
  margin-left: 12px;
}

/* Header height per the wireframe. */
.scale-modern-pos-topbar {
  
    align-items:center !important;
}

/* Brand: back to the logo, sized for the taller bar. */
/* The logo is the tallest in-flow child, so it sets the header's height now that the bar is
   content-sized. 68x46 is the size the design already uses below 1180px; adopting it as the
   default is what actually shortens the header (everything else in the bar is ~35px). */
.scale-modern-pos-brand .scale-modern-pos-logo {
  width: 68px;
  height: 46px;
  object-fit: contain;
  object-position: left center;
}

/* Chunkier ticket pill to match the taller header. */
.scale-modern-pos-ticket-group {
  border-radius: 10px;
  /* Was `margin: 2% 0`. Percentage margins resolve against the container's WIDTH, so on a wide
     screen this added ~50px above and below the pill; now that the topbar is content-sized,
     that would grow the header with the viewport all over again. */
  margin: 0;
}
    .scale-modern-pos-ticket-group input{
        padding:0 !important;
    }
    .scale-modern-pos-ticket-serial {
        font-size: var(--scale-fs-16);
        letter-spacing: 0.5px;
    }

/* Nav group centered between the ticket pill and the userbar (both sides use auto margins). */
.scale-modern-pos-topbar-actions {
  margin-left: auto;
  margin-right: auto;
}
.scale-modern-header-left {
    display: flex !important;
    gap: 16px;
    margin-left: 1%;
}

/* Header icons render in the outlined (lined) style, not filled. */
.scale-modern-pos-topbar .material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}

/* Reservations calendar lives inside the nav group, right after the menu items. */
.scale-modern-pos-nav .scale-modern-pos-nav-reservations {
  min-width: 44px;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.scale-modern-pos-nav .scale-modern-pos-nav-reservations .material-icons {
  font-size: var(--scale-fs-20);
}

.scale-modern-pos-nav .scale-modern-pos-nav-reservations.is-active {
  color: #113558;
  background: #FFFFFF;
}

/* Reservations calendar: standalone icon button right NEXT TO the nav group container. */
.scale-modern-pos-reservations-btn {
  flex: 0 0 auto;
}

.scale-modern-pos-reservations-btn.is-active {
  color: #113558 !important;
  background: #FFFFFF !important;
}

/* Reservations calendar: hugs the RIGHT edge of the nav group; the remaining space
   pushes the userbar (theme/settings/location/avatar) to the far right. */
.scale-modern-pos-reservations-btn {
  margin-left: -6px;
  margin-right: auto;
}
.scale-modern-pos-nav-cluster {
    display: flex;
    align-items: center;
    gap: 2%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/* Categories + subcategories: single horizontally-scrollable row; each tile is exactly one
   food-product card wide. Both the category rows AND the product grid are forced to the same
   content width (full menu width, no horizontal padding/margin) and the same 8px gap, so the
   identical `(100% - 24px) / 4` formula yields identical tile/card widths that line up.
   Vertical rhythm is owned by the parent .scale-modern-pos-menu's gap - rows carry zero
   bottom padding so all three menu children (category / subcategory / product grid) sit
   exactly one gap apart.

   Scrollbar is visible so users can see there is more to scroll when a floor has many
   categories or a category has many subcategories. */
.scale-modern-pos-category-row,
.scale-modern-pos-subcategory-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  gap: 8px;
  margin: 0 !important;
  padding: 0 0 6px 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--scale-separator) transparent;
}

.scale-modern-pos-category-row::-webkit-scrollbar,
.scale-modern-pos-subcategory-row::-webkit-scrollbar {
  height: 6px;
}

.scale-modern-pos-category-row::-webkit-scrollbar-track,
.scale-modern-pos-subcategory-row::-webkit-scrollbar-track {
  background: transparent;
}

.scale-modern-pos-category-row::-webkit-scrollbar-thumb,
.scale-modern-pos-subcategory-row::-webkit-scrollbar-thumb {
  background: var(--scale-separator);
  border-radius: 999px;
}

/* Separator line between the categories and sub-categories rows REMOVED (user
   request, 2026-07-23), and with it the extra 8px top padding it needed. All three
   menu children (category / sub-category / product grid) now sit an EQUAL 8px gap
   apart — see the .scale-modern-pos-menu note below for how that 8px is composed. */
.scale-modern-pos-subcategory-wrap {
  position: relative;
}

/* Single source of truth for vertical spacing between category / subcategory / product-grid.
   Container is framed on the left, right and bottom (no top border) so it reads as an
   attached surface hanging from the top edge - matches the wireframe. Top corners kept
   square so the container looks continuous with whatever sits above it.

   GAP MATH (why 2px, not 8px): the category & subcategory rows each carry a 6px
   padding-bottom that reserves room for their horizontal scrollbar (so the bar never
   crowds the tiles). That 6px sits BETWEEN a row's tiles and the next section, so the
   effective vertical gap = 6px (row padding) + this 2px = 8px — identical to the
   product grid's own 8px row/column gap and the 8px horizontal gap inside each row.
   Net result: every tile-to-tile gap, horizontal AND vertical, across categories,
   sub-categories and product items reads as a uniform 8px, whether or not a scrollbar
   is showing. Change this 2px and the 6px row padding together, or the gaps drift. */
.scale-modern-pos-menu {
  gap: 2px !important;
  border: 0;
}

.scale-modern-pos-subcategory-wrap {
  overflow: visible;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Product grid: drop its horizontal padding so its content width equals the category rows'. */
.scale-modern-pos-product-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Same 8px gap as the category/subcategory rows' horizontal gap and the 8px
     EFFECTIVE section gap composed by .scale-modern-pos-menu (2px) + each row's 6px
     scrollbar padding-bottom — so every tile gap (horizontal AND vertical) across
     categories, sub-categories and product items matches. Loaded last, so this wins
     over the 12/14px defaults. */
  gap: 8px !important;
}

.scale-modern-pos-category-row .scale-modern-pos-category,
.scale-modern-pos-subcategory-row .scale-modern-pos-subcategory {
  flex: 0 0 calc((100% - 24px) / 4);
  max-width: calc((100% - 24px) / 4);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer action icons render in the outlined (lined) style, not filled. */
.scale-modern-pos-footer-icons .material-icons {
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}

/* Modern discount dialog: Presets / Manual tabbed layout (left), Preview panel (right). */
body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-main,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-tabs,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--scale-radius-seg, 10px);
  background: var(--scale-chip-bg);
}

body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-tabs button,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-tabs button {
  flex: 1 1 0;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--scale-text-mute);
  font-size: var(--scale-type-subheadline-size);
  font-weight: 600;
  cursor: pointer;
}

body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-tabs button.is-active,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-tabs button.is-active {
  color: var(--scale-text);
  background: var(--scale-panel);
  box-shadow: var(--scale-shadow-tile);
}

/* ── Dialog-header SUBMIT / primary actions rendered as filled buttons (not plain text).
   Cancel/back actions stay as text; only the confirming action gets the button fill. ── */
.scale-modern-builder-title-action.is-add,
.scale-modern-dialog-title-action.is-primary,
.scale-modern-feedback-save,
body:has(.scale-modern-pos) .scale-modern-sheet-done,
body:has(.scale-modern-payment) .scale-modern-sheet-done,
body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-apply,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-apply {
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  background: var(--scale-primary) !important;
  color: var(--scale-text-on-primary) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Destructive submit (Void / Refund apply): filled danger button. */
body:has(.scale-modern-pos) #voidDialog .scale-void-title-action-danger,
.scale-refund-title-action.scale-refund-title-action-danger {
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  background: var(--scale-danger) !important;
  color: var(--scale-text-on-primary) !important;
  font-weight: 600 !important;
}

/* Disabled submit: muted fill so the button shape stays visible. */
.scale-modern-builder-title-action.is-add:disabled,
.scale-modern-dialog-title-action.is-primary:disabled,
.scale-modern-feedback-save:disabled,
body:has(.scale-modern-pos) .scale-modern-sheet-done:disabled,
body:has(.scale-modern-payment) .scale-modern-sheet-done:disabled,
body:has(.scale-modern-pos) #orderDiscountModal .scale-modern-discount-apply:disabled,
body:has(.scale-modern-payment) #orderDiscountModal .scale-modern-discount-apply:disabled,
body:has(.scale-modern-pos) #voidDialog .scale-void-title-action-danger:disabled,
.scale-refund-title-action.scale-refund-title-action-danger:disabled {
  background: var(--scale-chip-bg) !important;
  color: var(--scale-text-soft) !important;
}

/* Held/Pending/Closed preview: match the ModernPOSPage layout exactly.
   The cart-list fills the remaining space in the section (basis 0, grow 1) so its bordered
   box extends from below the chip-row header down to the summary. Items sit at the top of
   that box; if the order has more items than fit, the cart-list scrolls internally.
   Summary and footer stay at their natural height at the bottom of the section - the
   flex-shrink:0 lock stops the flex algorithm from squeezing them when the order is long. */
.scale-modern-orders-dummy-cart .scale-modern-pos-cart-list,
.scale-modern-orders-dummy-cart .scale-modern-orders-detail-list {
  flex: 1 1 0 !important;
  min-height: 0;
  overflow-y: auto;
}

.scale-modern-orders-dummy-cart > .scale-modern-pos-order-summary-header,
.scale-modern-orders-dummy-cart > .scale-modern-pos-summary,
.scale-modern-orders-dummy-cart > .scale-modern-pos-footer {
  flex: 0 0 auto !important;
}

/* The empty-state (shell) footer measures ~126px (two rows of buttons + padding). The
   Closed-order loaded footer only renders the icon row (~71px), so clicking an order used
   to shrink the footer and let the cart-list grow into the freed 26px. Pin the loaded
   footer to the empty-state's natural height so the Payment button and cart-list keep the
   same size across both states. The icon row drops to the bottom via justify-content on
   footer-main so the empty space sits above the icons (matching where the Cancel/Hold row
   would have been in the empty state). */
.scale-modern-orders-dummy-cart > .scale-modern-pos-footer {
  min-height: 126px;
}

.scale-modern-orders-dummy-cart > .scale-modern-pos-footer > .scale-modern-pos-footer-main {
  justify-content: flex-end;
}

/* Empty state (no order selected / order with no items): nothing to scroll. Uses !important
   because the general flex-lock rule above sets overflow-y:auto !important on every cart-list
   in .scale-modern-pos-cart; without it the empty-state placeholder (which can be a couple of
   pixels taller than the visible cart-list) would trigger an unwanted scrollbar. */
.scale-modern-pos-cart > .scale-modern-pos-cart-list.is-empty,
.scale-modern-orders-dummy-cart .scale-modern-pos-cart-list.is-empty {
  overflow: hidden !important;
  overflow-y: hidden !important;
}

/* ==== Responsive header: keep every element on one row without horizontal scroll ====
   The nav-cluster and userbar are absolutely positioned at wider widths, which lets the
   left-side ticket group grow into their space at narrow widths. Below ~1180px we return
   them to normal flex flow so the browser can distribute space, and we tighten the pills
   and drop the location's sub-label so the five nav buttons stay visible. */
@media (max-width: 1180px) {
    .scale-modern-pos-topbar {
        gap: 8px !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .scale-modern-pos-nav-cluster {
        position: static;
        left: auto;
        transform: none;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
    }

    .scale-modern-pos-userbar {
        position: static;
        top: auto;
        right: auto;
        margin-left: 0;
        flex: 0 0 auto;
        gap: 6px;
    }

    .scale-modern-header-left {
        margin-left: 0 !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .scale-modern-pos-ticket-group {
        flex: 1 1 180px;
        min-width: 0;
        margin-right: 0;
    }

    .scale-modern-pos-topbar-actions {
        margin-left: 0;
        margin-right: 0;
        padding: 2px;
    }

    .scale-modern-pos-nav {
        gap: 2px;
    }

    .scale-modern-pos-nav button {
        min-width: 0;
        padding: 6px 9px;
        font-size: var(--scale-fs-13);
    }

    .scale-modern-pos-nav button span {
        min-width: 16px;
        margin-left: 3px;
        padding: 0 4px;
        font-size: var(--scale-fs-10);
    }

    .scale-modern-pos-location {
        max-width: 140px;
    }

    .scale-modern-pos-location strong {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Drop the device-name sub-label; the outlet name still identifies the location. */
    .scale-modern-pos-location span {
        display: none;
    }

    .scale-modern-pos-brand .scale-modern-pos-logo {
        width: 68px;
        height: 46px;
    }
}

@media (max-width: 960px) {
    .scale-modern-pos-nav button {
        padding: 6px 7px;
        font-size: var(--scale-fs-12);
    }

    /* Hide the location pill entirely; the outlet is still visible in the profile menu. */
    .scale-modern-pos-userbar > .scale-modern-pos-location {
        display: none !important;
    }

    .scale-modern-pos-ticket-group {
        flex: 1 1 140px;
    }

    /* Second ticket icon (feedback) is a shortcut - it also lives in the More sheet. */
    .scale-modern-pos-ticket-group > .scale-modern-pos-ticket-icon:nth-of-type(2) {
        display: none;
    }

    .scale-modern-pos-brand .scale-modern-pos-logo {
        width: 58px;
        height: 40px;
    }
}

/* ==== Price summary — serif font ==============================================================
   Limited to the price-summary block (Subtotal / Discount / Delivery / Tip / Tax / Net total)
   and the equivalent payment-page totals card. Everywhere else (cart line prices, modifier /
   combo amounts, order-queue amounts, pay-big button label) stays in the sans-serif UI font. */
.scale-modern-pos-summary,
.scale-modern-pos-summary strong,
.scale-modern-pos-summary small,
.scale-modern-pos-summary em,
.scale-modern-pos-summary-lines,
.scale-modern-pos-summary-lines strong,
.scale-modern-pos-summary-lines small,
.scale-modern-pos-summary-lines em,
.scale-modern-pos-summary-net,
.scale-modern-pos-summary-net strong,
.scale-modern-pos-summary-net small,
.scale-modern-payment-total-lines,
.scale-modern-payment-total-lines strong,
.scale-modern-payment-total-lines small {
  font-family: var(--scale-font-price) !important;
}

/* Price summary rows (Subtotal / Discount / Delivery / Tip / Tax / etc.) — labels and values
   render at 14px. Overrides the tight 11.5-12px defaults on both the base and split variants. */
.scale-modern-pos-summary-lines > div > :first-child,
.scale-modern-pos-summary-lines > div > :first-child strong,
.scale-modern-pos-summary-lines > div > :last-child,
.scale-modern-pos-summary-lines > div > :last-child strong {
  font-size: var(--scale-fs-14) !important;
}

/* All other price figures across the Modern UI (cart line item, modifier/combo amounts,
   payment total card, tip/delivery editable rows, order-queue amounts) also at 14px so the
   number rail reads at one consistent size. The hero displays (Net total, Balance due,
   Charge) keep their larger typography and are not targeted here. */
.scale-modern-pos-cart-item__price,
.scale-modern-pos-cart-mod-line__amount,
.scale-modern-pos-cart-combo-part__amount,
.scale-modern-payment-total-lines > div > strong,
.scale-modern-payment-total-editable strong,
.scale-modern-orders-list-row > div > strong {
  font-size: var(--scale-fs-14) !important;
}
.selection-buttons-wrapper button span {

    font-size:var(--scale-fs-13) !important;

}

button.scale-modern-discount-preset.is-selected {
    border: 1.5px solid var(--scale-primary) !important;
}