/* POS reference mockup, desktop sales mode. Existing business actions are preserved. */
@media (min-width: 901px) {
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-content.pos-selling {
    padding: 10px 12px 8px !important;
    height: calc(100dvh - 68px) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout { height: 100%; min-height: 0; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-rail {
    display: flex; flex-direction: column; padding: 0 10px 10px !important;
    background: var(--pos-rail-surface, #fff) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-section-label { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-list { padding-top: 0; gap: 10px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category {
    height: 58px !important; min-height: 58px !important;
    border: 1px solid var(--pos-tile-border, #deebf6) !important;
    border-radius: 12px !important; padding: 10px 13px !important;
    font-size: 14px !important; text-align: left;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-footer {
    margin-top: auto; padding: 8px 0 0; display: flex; flex-direction: column; gap: 8px;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-clear-cart {
    width: 100% !important; min-width: 0 !important; min-height: 69px !important;
    border: 1px solid #e6a4ae !important; border-radius: 12px !important;
    background: #fff5f6 !important; color: #b92137 !important; font-size: 17px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-products { padding: 0 11px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: none !important; grid-auto-rows: auto !important;
    gap: 10px !important; padding: 0 3px 4px !important;
    overflow-y: auto !important; align-content: start !important;
  }
  @container (max-width: 610px) {
    html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid {
      grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }
  }
  @container (max-width: 435px) {
    html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid {
      grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
  }  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card {
    aspect-ratio: 1 !important; height: auto !important; min-height: 0 !important;
    border-radius: 12px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-cover { height: 100% !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info { padding: 28px 10px 8px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info strong {
    display: block !important; min-height: 0 !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info .price { color: #4ce7f0 !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .add-dot { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart {
    display: flex !important; flex-direction: column !important; padding: 8px 10px 10px !important;
    border: 0 !important; border-radius: 0 !important;
    background: var(--pos-invoice-surface,#fff) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading {
    display: grid !important; grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center !important; gap: 8px !important;
    min-height: 66px !important; height: 66px !important;
    padding: 0 0 9px !important; border-bottom: 1px solid var(--pos-tile-border,#e2e9f1) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading {
    position: relative !important; z-index: 30;
    overflow: visible !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading .customer-picker-panel {
    position: absolute; top: calc(100% + 5px); left: 0;
    z-index: 31; width: min(350px,calc(100vw - 32px));
    max-height: min(390px,65dvh); overflow-y: auto;
    border-color: var(--pos-tile-border,#dce7f1);
    background: var(--pos-invoice-surface,#fff);
  }  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading > .customer-picker {
    display: block !important; width: 100%; min-width: 0; margin: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading .customer-picker-trigger {
    width: 100% !important; height: 53px !important; min-height: 53px !important;
    padding: 9px 12px !important; border-radius: 10px !important;
    font-size: 15px !important; background: var(--pos-tile-surface,#f5f9fe) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading > div:not(.customer-picker) {
    display: flex; align-items: center; justify-content: center;
    min-width: 70px; height: 53px; padding: 0 10px;
    border: 1px solid var(--pos-tile-border,#e2e9f1); border-radius: 10px;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading .cart-kicker,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading h3 { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading small {
    margin: 0 !important; font-size: 14px !important; color: var(--pos-invoice-muted,#4f647c) !important;
    white-space: nowrap;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading .pos-save-order,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading [data-action="saveTable"] {
    min-width: 105px !important; width: auto; height: 53px !important; min-height: 53px !important;
    background: #0862de !important; color: white !important; border-radius: 10px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading [data-action="requestCancelTable"] {
    min-width: 90px !important; width: auto; height: 53px !important; min-height: 53px !important;
    background: #fff0f1 !important; color: #d32f2f !important; border: 1px solid #ffcdd2 !important; border-radius: 10px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-body {
    display: flex; flex: 1 1 auto; flex-direction: column; padding: 0 !important;
    gap: 0 !important; overflow: hidden;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items {
    min-height: 0; flex: 1 1 auto; overflow-y: auto !important;
    scrollbar-width: none;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items::-webkit-scrollbar { display: none; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-status { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line {
    display: grid !important; grid-template-columns: 74px minmax(0,1fr) 123px !important;
    grid-template-rows: auto !important; column-gap: 12px !important; align-items: start;
    min-height: 120px; padding: 12px 0 !important;
    border-bottom: 1px solid var(--pos-tile-border,#e3eaf1) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line::before { content: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb {
    grid-column: 1; grid-row: 1; width: 70px !important; height: 76px !important;
    min-width: 0 !important; flex-basis: auto !important; margin: 0 !important;
    border-radius: 9px !important; overflow: hidden;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb img {
    display: block; width: 100% !important; height: 100% !important; object-fit: cover;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content {
    grid-column: 2; grid-row: 1; display: flex !important; flex-direction: column !important;
    align-items: flex-start; gap: 4px; min-width: 0; padding: 1px 0 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > strong {
    display: block; width: 100%; font-size: 15px !important; line-height: 1.3;
    color: var(--pos-invoice-text,#213c58) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > small {
    margin: 0 !important; color: var(--pos-invoice-muted,#8194a6) !important;
    font-size: 13px !important; white-space: nowrap;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content .cart-line-controls:empty { display: none; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle {
    position: static !important; display: inline-flex !important; align-items: center; justify-content: center;
    gap: 4px; max-width: 100%; width: auto !important; height: 32px !important;
    min-height: 32px !important; min-width: 94px !important;
    margin: 2px 0 0 !important; padding: 5px 9px !important;
    border: 1px solid var(--pos-tile-border,#d9e5f2) !important; border-radius: 8px !important;
    background: var(--pos-tile-surface,#f6faff) !important;
    color: var(--pos-invoice-muted,#486982) !important; font-size: 12px !important;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle::before {
    content: '✎' !important; position: static !important; font-size: 14px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-note {
    display: block; grid-column: auto !important; min-width: 0; width: 100%;
    min-height: 32px !important; height: 32px !important;
    margin: 2px 0 0 !important; padding: 5px 7px !important;
    font-size: 12px !important; border-radius: 7px;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-note[hidden] { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-total {
    grid-column: 3; grid-row: 1; position: static !important;
    display: block !important; width: 100%; padding: 0; text-align: right;
    color: #0862d7 !important; font-size: 18px !important; font-weight: 800; white-space: nowrap;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty {
    grid-column: 3; grid-row: 1; display: flex; align-items: flex-end;
    align-self: end; justify-content: flex-end; padding: 0 0 2px;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty {
    display: flex; align-items: center; height: 34px !important; min-height: 34px !important;
    border: 1px solid var(--pos-tile-border,#d5e2f0) !important;
    border-radius: 8px !important; overflow: hidden;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button {
    background: var(--pos-tile-surface,#f3f8ff) !important;
    color: var(--pos-invoice-text,#234e79) !important;
  }  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty span {
    display: inline-grid; place-items: center; width: 34px !important; min-width: 34px !important;
    height: 32px !important; min-height: 32px !important; margin: 0 !important;
    padding: 0 !important; font-size: 16px !important; line-height: 1 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button {
    background: var(--pos-tile-surface,#f3f8ff) !important;
    color: var(--pos-invoice-text,#234e79) !important;
  }  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty span {
    width: 40px !important; background: var(--pos-invoice-surface,#fff) !important; font-size: 14px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-remove { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer {
    display: block !important; flex: 0 0 auto; padding: 10px 0 0 !important;
    border-top: 1px solid var(--pos-tile-border,#dfe8f1) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-item,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    height: 82px !important; min-height: 82px !important;
    background: #058445 !important; border-color: #058445 !important; border-radius: 12px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout strong {
    color: white !important; font-size: clamp(19px,2vw,29px) !important;
  }
}
@media (min-width: 901px) and (max-width: 1200px) {

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line {
    grid-template-columns: 56px minmax(0,1fr) 106px !important; column-gap: 7px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb { width: 53px !important; height: 61px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-total { font-size: 15px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button {
    background: var(--pos-tile-surface,#f3f8ff) !important;
    color: var(--pos-invoice-text,#234e79) !important;
  }  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty span { width: 28px !important; min-width: 28px !important; }
}
html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) {
  --pos-rail-surface: #102c3b; --pos-invoice-surface: #123244;
  --pos-tile-surface: #173a50; --pos-tile-border: #2c5168;
  --pos-invoice-text: #e1f0ff; --pos-invoice-muted: #a6bacb;
}
html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-clear-cart {
  background: #451f32 !important; color: #ffd2da !important; border-color: #9b4863 !important;
}

/* ==========================================================================
   Mobile-Only POS Visual Refresh (<=640px)
   Apple iOS design language: white/soft-gray, #1f63e9 accent, rounded cards/chips,
   compact 56px header with full-width search below, horizontal category pills,
   single-column catalog with decorative circular +, and refined bottom sheet.
   ========================================================================== */

.product-list-meta { display: none; }

@media (max-width: 640px) {
  /* Antialiasing on mobile */
  html, body,
  html .pos-selling-shell:not(.pos-edit-active) {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* 1. Base Container & Surfaces */
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active),
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-content,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-category-rail,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-products {
    background: #f2f5f9 !important;
    color: #17384c !important;
  }

  html .pos-selling-shell:not(.pos-edit-active),
  html .pos-selling-shell:not(.pos-edit-active) .pos-layout {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Keep the mobile status/search header sticky to the viewport instead of
     trapping it inside the shell's legacy overflow container. */
  html .pos-selling-shell:not(.pos-edit-active) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-column-divider {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-content.pos-selling {
    padding: 0 0 calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: calc(100dvh - 110px) !important;
  }

  /* 2. Compact iOS Header (~56px primary row + full-width rounded search bar below) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto auto !important;
    grid-template-rows: 56px auto !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 2px) 12px 10px !important;
    row-gap: 6px !important;
    column-gap: 8px !important;
    background: #ffffff !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e9f2 !important;
    box-shadow: 0 1px 3px rgba(16, 40, 60, 0.04) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand-cluster {
    display: contents !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: #f0f4fa !important;
    border: 1px solid #e0e8f3 !important;
    box-shadow: 0 1px 2px rgba(16, 40, 60, 0.04) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand img {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand span {
    display: inline !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand-cluster h1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar h1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #17384c !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-tools {
    display: contents !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-quick-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-quick-actions .held-orders-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #f0f4fa !important;
    border: 1px solid #dfe6f0 !important;
    color: #27445e !important;
    font-size: 0 !important;
    position: relative !important;
    cursor: pointer !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .held-orders-trigger::before {
    content: 'Đơn';
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #27445e !important;
    line-height: 1 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .held-orders-trigger .held-badge {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    display: inline-grid !important;
    place-items: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #1f63e9 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 1.5px solid #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-user {
    grid-column: 4 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-user-name {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-user > [data-action="logout"] {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-anchor {
    display: inline-flex !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #f0f4fa !important;
    border: 1px solid #dfe6f0 !important;
    color: #27445e !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger span {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger svg {
    width: 18px !important;
    height: 18px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-user .badge {
    display: none !important;
  }

  /* Full-width rounded search bar directly below header row */
  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 6px 0 12px !important;
    border-radius: 999px !important;
    background: #f1f4f9 !important;
    border: 1px solid #dfe5ef !important;
    box-shadow: inset 0 1px 2px rgba(16, 40, 60, 0.04) !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search svg {
    width: 18px !important;
    height: 18px !important;
    color: #7b8e9e !important;
    flex-shrink: 0 !important;
  }

  .pos-header-search svg + svg:not(.scan-action svg),
  .pos-header-search .pos-svg-search ~ svg:not(.scan-action svg),
  .pos-header-tools .pos-svg-search ~ svg:not(.scan-action svg) {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #17384c !important;
    outline: none !important;
    box-shadow: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search input::placeholder {
    color: #8799a8 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #dce4ee !important;
    color: #1f63e9 !important;
    box-shadow: 0 1px 2px rgba(16, 40, 60, 0.06) !important;
    cursor: pointer !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action svg {
    width: 15px !important;
    height: 15px !important;
    color: #1f63e9 !important;
  }

  /* Restaurant Selling Context on Mobile: Ẩn để tinh giản mobile sale screen */
  html .pos-selling-shell:not(.pos-edit-active) .restaurant-pos-context,
  .restaurant-pos-context {
    display: none !important;
  }

  /* 3. Horizontal Pill Categories (~8px gaps, hidden scrollbar) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-category-rail {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 12px 4px !important;
    background: transparent !important;
    border: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-section-label {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 2px 6px !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category-list::-webkit-scrollbar {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid #dce4ef !important;
    background: #ffffff !important;
    color: #38526d !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(16, 40, 60, 0.04) !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category .pos-category-count {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    background: #edf2f8 !important;
    color: #4b6680 !important;
    border: 0 !important;
    margin-left: 2px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category.active {
    background: #1f63e9 !important;
    border-color: #1f63e9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(31, 99, 233, 0.28) !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category.active svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category.active .pos-category-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-category-footer {
    display: none !important;
  }

  /* 4. Product Catalog (Single-column, 72-80px image, ~12px radius, decorative circular +) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-products {
    padding: 0 12px 16px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-card {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 88px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 8px 60px 8px 8px !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
    border: 1px solid #e3e8f0 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(16, 40, 60, 0.04), 0 2px 6px rgba(16, 40, 60, 0.02) !important;
    text-align: left !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform 0.1s ease, background 0.1s ease !important;
    overflow: hidden !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-card:active {
    transform: scale(0.985) !important;
    background: #f8fafc !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-cover {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #eef2f7 !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-placeholder {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #617b94 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .stock-label {
    display: block !important;
    position: absolute !important;
    left: 3px !important;
    bottom: 3px !important;
    right: 3px !important;
    padding: 2px 3px !important;
    border-radius: 4px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    background: rgba(15, 30, 45, 0.72) !important;
    color: #ffffff !important;
    backdrop-filter: blur(2px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-card.is-out-of-stock .stock-label {
    background: rgba(185, 33, 55, 0.88) !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-info {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 0 0 10px !important;
    gap: 3px !important;
    background: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-info strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #17384c !important;
    word-break: break-word !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-list-meta {
    display: block !important;
    font-size: 12px !important;
    color: #7b8e9e !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .product-info .price {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #1f63e9 !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
  }

  /* 44-48px pale-blue circular decorative + on the right. Whole row remains functional add target. */
  html .pos-selling-shell:not(.pos-edit-active) .add-dot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: #ebf3ff !important;
    border: 1px solid #d5e5fc !important;
    color: #1f63e9 !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    box-shadow: 0 1px 3px rgba(31, 99, 233, 0.1) !important;
  }

  /* 5. Persistent mobile bottom summary bar while catalog is visible */
  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    z-index: 65 !important;
    width: 100% !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-top: 1px solid #dfe5ee !important;
    border-radius: 20px 20px 0 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -4px 20px rgba(16, 40, 60, 0.12) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    cursor: pointer !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary > span:first-child {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary b {
    color: #17384c !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary small {
    color: #7b8e9e !important;
    font-size: 11.5px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary > strong {
    margin-left: auto !important;
    color: #1f63e9 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary > span:last-child {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    background: #1f63e9 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(31, 99, 233, 0.28) !important;
  }

  /* 6. Cart Bottom Sheet (24-30px corners, handle, “Đơn hàng (N)” + clear-cart secondary red text) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(8, 20, 32, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  html .pos-selling-shell:not(.pos-edit-active).pos-mobile-cart-open .pos-cart-backdrop {
    display: block !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: 40px !important;
    z-index: 75 !important;
    border-radius: 28px 28px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid #dfe5ee !important;
    background: #ffffff !important;
    box-shadow: 0 -10px 40px rgba(16, 40, 60, 0.22) !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
    transform: translateY(calc(100% + 20px)) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }

  html .pos-selling-shell:not(.pos-edit-active).pos-mobile-cart-open .cart {
    transform: translateY(0) !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-handle {
    width: 40px !important;
    height: 5px !important;
    margin: 6px auto 6px !important;
    border-radius: 999px !important;
    background: #cbd6e2 !important;
    flex-shrink: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 6px 16px 10px !important;
    border-bottom: 1px solid #e8edf4 !important;
    background: #ffffff !important;
    position: relative !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-sheet-handle {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading > div:not(.customer-picker) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .cart-kicker {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading h3 {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #17384c !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading small {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f63e9 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Clear-cart secondary red text in sheet header */
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading [data-pos-action-item-key="clear"] {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #dc2626 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart:active {
    background: #fef2f2 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart svg {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-cart-close {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid #dfe5ee !important;
    border-radius: 50% !important;
    background: #f1f4f9 !important;
    color: #4b6680 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading > .customer-picker {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .customer-picker-trigger {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    background: #f6f9fc !important;
    border: 1px solid #d9e3ee !important;
    box-sizing: border-box !important;
  }

  /* 7. Cart Lines: 52-58px Thumb, Note, Segmented Qty, Visible Line Total */
  html .pos-selling-shell:not(.pos-edit-active) .cart-body {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 16px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-items {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-line {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #edf2f7 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line .cart-thumb,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line .cart-item-content,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line .cart-line-total,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line .cart-line-qty {
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped .cart-thumb,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped .cart-item-content,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped .cart-line-total,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped .cart-line-qty {
    transform: translateX(-76px) !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-swipe-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped .cart-line-swipe-actions {
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-swipe-btn.note-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 68px !important;
    height: calc(100% - 12px) !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #eef2f7 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb b {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 16px !important;
    color: #617b94 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content > strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #17384c !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content > small {
    font-size: 12.5px !important;
    color: #768a9b !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Note toggle button on mobile (hidden by default in static layout) */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line > .note-toggle,
  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content .note-toggle {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line i.note + .cart-line-note-text,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-note-text {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-style: italic !important;
    margin-top: 2px !important;
  }

  /* Styling cho dòng hiển thị tiền giờ trong giỏ hàng */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 12px !important;
    margin: 4px 0 8px 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 10px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-clock {
    width: 15px !important;
    height: 15px !important;
    color: #f59e0b !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-meta {
    font-size: 12px !important;
    color: #64748b !important;
    display: flex !important;
    gap: 4px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box .cart-line-total-price b {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1f63e9 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .hourly-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: #15803d !important;
    background: #dcfce7 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-note {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-top: 4px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    border: 1px solid #d0dbe7 !important;
    font-size: 12.5px !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-note[hidden] {
    display: none !important;
  }

  /* Visible per-line cart totals while quantity changes */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-total {
    grid-column: 3 !important;
    grid-row: 1 !important;
    display: block !important;
    text-align: right !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #1f63e9 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    align-self: center !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* Segmented quantity control with ~44px touch targets */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #dce5ef !important;
    background: #f0f4f9 !important;
    overflow: hidden !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #17384c !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.1s !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty button:active {
    background: #e2eaf3 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 44px !important;
    padding: 0 4px !important;
    background: #ffffff !important;
    color: #17384c !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-remove {
    display: none !important;
  }

  /* 8. Sheet Footer: Sticky safe-area subtotal/total, outlined Save/Hold, dominant blue Checkout */
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #e5eaf2 !important;
    box-shadow: 0 -4px 16px rgba(16, 40, 60, 0.05) !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 2px 8px !important;
    border-bottom: 1px solid #edf2f7 !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary span {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64788b !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1f63e9 !important;
  }

  /* Compact outlined Save/Hold action - hidden on mobile */
  html .pos-selling-shell:not(.pos-edit-active) [data-action="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) .pos-save-order,
  html .pos-selling-shell:not(.pos-edit-active) [data-pos-action-item-key="saveTable"],
  .cart-heading [data-action="saveTable"],
  .cart-heading .pos-save-order,
  .cart-heading [data-pos-action-item-key="saveTable"],
  .pos-topbar [data-action="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-save-order,
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-action="saveTable"],
  .cart-checkout-footer .pos-save-order,
  .cart-checkout-footer [data-action="saveTable"] {
    display: none !important;
  }


  /* Wide blue dominant Checkout CTA */
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-item,
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    background: #1f63e9 !important;
    border: 1px solid #1f63e9 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(31, 99, 233, 0.28) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout:active {
    background: #1952c4 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout .pos-checkout-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-item:only-child,
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout:only-child {
    grid-column: 1 / -1 !important;
  }


  /* 9. Midnight Dark-Mode Equivalents */
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active),
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-content {
    background: #0b1e27 !important;
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-topbar {
    background: #112b36 !important;
    border-bottom-color: #204152 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand {
    background: #173946 !important;
    border-color: #294652 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand-cluster h1,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-topbar h1 {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search {
    background: #173946 !important;
    border-color: #294652 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search input {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search input::placeholder {
    color: #7b99aa !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search svg {
    color: #7b99aa !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action {
    background: #20485a !important;
    border-color: #316279 !important;
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action svg {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-quick-actions .held-orders-trigger,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .held-orders-trigger::before {
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .held-orders-trigger .held-badge {
    border-color: #112b36 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .restaurant-pos-context {
    display: none !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #d6e5ef !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category .pos-category-count {
    background: #0f2732 !important;
    color: #8faec0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category.active {
    background: #1f63e9 !important;
    border-color: #1f63e9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(31, 99, 233, 0.4) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-card {
    background: #112b36 !important;
    border-color: #204152 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-card:active {
    background: #173946 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-cover {
    background: #153a4d !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-placeholder {
    color: #9cb5c5 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-info strong {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-list-meta {
    color: #93a9b7 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-info .price {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .add-dot {
    background: #173e52 !important;
    border-color: #26556e !important;
    color: #4ce7f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary {
    background: #112b36 !important;
    border-color: #204152 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary b {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary small {
    color: #8faec0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary > strong {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-cart-summary > span:last-child {
    background: #1f63e9 !important;
    color: #ffffff !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart {
    background: #112b36 !important;
    border-top-color: #204152 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.55) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-handle {
    background: #35586b !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading {
    background: #112b36 !important;
    border-bottom-color: #204152 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading h3 {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading small {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading [data-pos-action-item-key="clear"],
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart {
    color: #ff8595 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart:active {
    background: #351c27 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-cart-close {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading .customer-picker-trigger {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line {
    border-bottom-color: #1e3f50 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-thumb {
    background: #153a4d !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-item-content > strong {
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-item-content > small {
    color: #8faec0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .note-toggle {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #c4d5df !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-note {
    background: #153a4d !important;
    border-color: #2e566d !important;
    color: #f5f9fc !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-total {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty {
    background: #173946 !important;
    border-color: #294652 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty button {
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty span {
    background: #0c2b3d !important;
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer {
    background: #112b36 !important;
    border-top-color: #204152 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary {
    border-bottom-color: #1e3f50 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary span {
    color: #8faec0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary strong {
    color: #4ce7f0 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-save-order,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-action="saveTable"] {
    display: none !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    background: #1f63e9 !important;
    border-color: #1f63e9 !important;
    box-shadow: 0 4px 16px rgba(31, 99, 233, 0.45) !important;
  }
}

/* Strict phone alignment to the approved iPhone-style mockup. */
@media (max-width: 640px) {
  /* Enable antialiasing on mobile */
  html, body,
  html .pos-selling-shell:not(.pos-edit-active) {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
  }

  /* Remove ALL text-shadow and filter completely on mobile (<= 640px) for light mode */
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info strong,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info .price,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info small,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-card,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-category,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-topbar,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .customer-picker-trigger,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-brand,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .cart,
  html:not([data-ui-style="midnight"]) .product-info,
  html:not([data-ui-style="midnight"]) .product-info strong,
  html:not([data-ui-style="midnight"]) .product-info .price,
  html:not([data-ui-style="midnight"]) .product-info small,
  html:not([data-ui-style="midnight"]) .product-card,
  html:not([data-ui-style="midnight"]) .pos-category,
  html:not([data-ui-style="midnight"]) .pos-topbar,
  html:not([data-ui-style="midnight"]) .customer-picker-trigger,
  html:not([data-ui-style="midnight"]) .pos-brand,
  html:not([data-ui-style="midnight"]) .cart {
    text-shadow: none !important;
    filter: none !important;
  }

  /* 1. Header: 2-row layout with sticky headroom */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar,
  html .pos-selling-shell.has-restaurant-context:not(.pos-edit-active) .pos-topbar,
  html .pos-selling-shell:not(.pos-edit-active):has(.restaurant-pos-context) .pos-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    align-items: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 8px !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
    height: auto !important;
    min-height: auto !important;
    transition: padding 0.22s ease, row-gap 0.22s ease !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-topbar-row-1),
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-topbar-row1) {
    grid-template-columns: 1fr !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand-cluster,
  html .pos-selling-shell:not(.pos-edit-active) .pos-header-tools,
  html .pos-selling-shell.has-restaurant-context:not(.pos-edit-active) .pos-brand-cluster,
  html .pos-selling-shell.has-restaurant-context:not(.pos-edit-active) .pos-header-tools {
    display: contents !important;
  }

  /* Row 1 items transition */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar > :not(.pos-header-search):not(.customer-picker-panel):not(.pos-customer-backdrop) {
    transition: max-height 0.22s ease, opacity 0.2s ease, margin 0.22s ease !important;
  }

  /* When collapsed by headroom scroll */
  html .pos-selling-shell.pos-topbar-collapsed .pos-topbar-row-1,
  html .pos-selling-shell.pos-topbar-collapsed .pos-topbar-row1,
  html .pos-selling-shell.pos-topbar-collapsed:not(.pos-edit-active) .pos-topbar-row-1,
  html .pos-selling-shell.pos-topbar-collapsed:not(.pos-edit-active) .pos-topbar-row1,
  html .pos-selling-shell.pos-topbar-collapsed .pos-topbar > :not(.pos-header-search):not(.customer-picker-panel):not(.pos-customer-backdrop),
  html .pos-selling-shell.pos-topbar-collapsed:not(.pos-edit-active) .pos-topbar > :not(.pos-header-search):not(.customer-picker-panel):not(.pos-customer-backdrop) {
    max-height: 0 !important;
    opacity: 0 !important;
    margin-top: -10px !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  html .pos-selling-shell.pos-topbar-collapsed .pos-topbar,
  html .pos-selling-shell.pos-topbar-collapsed:not(.pos-edit-active) .pos-topbar {
    row-gap: 0 !important;
  }

  /* Hide header title, user name, status badge */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar h1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-brand-cluster h1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-user-name,
  html .pos-selling-shell:not(.pos-edit-active) .pos-user .badge,
  html .pos-selling-shell:not(.pos-edit-active) .pos-user .data-status,
  html .pos-selling-shell:not(.pos-edit-active) .pos-user > [data-action="logout"],
  html .pos-selling-shell:not(.pos-edit-active) .pos-quick-actions,
  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-search-trigger,
  html .pos-selling-shell:not(.pos-edit-active) .restaurant-pos-context {
    display: none !important;
  }

  /* Back Button < Before Customer Name */
  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-back-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: #f2f4f7 !important;
    border: 0 !important;
    color: #374151 !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Row 1 Wrapper (if present) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1,
  .pos-topbar-row-1,
  .pos-topbar-row1 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-mobile-back-btn,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-mobile-back-btn,
  .pos-topbar-row-1 .pos-mobile-back-btn,
  .pos-topbar-row1 .pos-mobile-back-btn {
    flex: 0 0 36px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .customer-picker,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .customer-picker,
  .pos-topbar-row-1 .customer-picker,
  .pos-topbar-row1 .customer-picker {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }
  .pos-topbar-row1 .customer-picker-trigger,
  .pos-topbar-row-1 .customer-picker-trigger,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .customer-picker-trigger,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .customer-picker-trigger {
    width: 100% !important;
    max-width: none !important;
  }
  .pos-topbar-row1 .customer-picker-trigger span,
  .pos-topbar-row-1 .customer-picker-trigger span,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .customer-picker-trigger span,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .customer-picker-trigger span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-brand,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-brand,
  .pos-topbar-row-1 .pos-brand,
  .pos-topbar-row1 .pos-brand {
    margin-left: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    position: relative !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-brand span,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-brand span,
  .pos-topbar-row-1 .pos-brand span,
  .pos-topbar-row1 .pos-brand span {
    display: inline !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-user,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-tools-anchor,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-user,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-tools-anchor,
  .pos-topbar-row-1 .pos-user,
  .pos-topbar-row-1 .pos-tools-anchor,
  .pos-topbar-row1 .pos-user,
  .pos-topbar-row1 .pos-tools-anchor {
    flex: 0 0 auto !important;
    position: relative !important;
  }

  /* Row 1 Direct Children Grid Layout (if no pos-topbar-row-1 wrapper) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-mobile-back-btn):not(:has(.pos-topbar-row-1)) .pos-mobile-back-btn {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-mobile-back-btn):not(:has(.pos-topbar-row-1)) .customer-picker {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-mobile-back-btn):not(:has(.pos-topbar-row-1)) .pos-brand {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-mobile-back-btn):not(:has(.pos-topbar-row-1)) .pos-tools-anchor,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:has(.pos-mobile-back-btn):not(:has(.pos-topbar-row-1)) .pos-user {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:not(:has(.pos-mobile-back-btn)):not(:has(.pos-topbar-row-1)) {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:not(:has(.pos-mobile-back-btn)) .customer-picker {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:not(:has(.pos-mobile-back-btn)) .pos-brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:not(:has(.pos-mobile-back-btn)) .pos-tools-anchor,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar:not(:has(.pos-mobile-back-btn)) .pos-user {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* Customer picker pill */
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar .customer-picker,
  html .pos-selling-shell:not(.pos-edit-active) .customer-picker {
    grid-row: 1 !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .customer-picker-trigger,
  html .pos-selling-shell:not(.pos-edit-active) .customer-picker > button,
  html .pos-selling-shell:not(.pos-edit-active) .customer-picker .customer-picker-btn,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar .customer-picker-trigger {
    background: #f2f4f7 !important;
    border-radius: 12px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    max-width: none !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .customer-picker-trigger span,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar .customer-picker-trigger span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* Row 1 Right: Table picker pill (2-Line Display: Tên bàn + Giờ) */
  html .pos-selling-shell:not(.pos-edit-active) .pos-brand,
  .pos-brand {
    justify-self: end !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    background: #ebf3fe !important;
    border-radius: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1677ff !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand img {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand span,
  .pos-brand span {
    display: inline !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-table-icon,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-brand .pos-mobile-table-icon,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-brand .pos-mobile-table-icon,
  .pos-topbar-row1 .pos-brand .pos-mobile-table-icon,
  .pos-topbar-row-1 .pos-brand .pos-mobile-table-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: #1677ff !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-table-icon svg,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row1 .pos-brand .pos-mobile-table-icon svg,
  html .pos-selling-shell:not(.pos-edit-active) .pos-topbar-row-1 .pos-brand .pos-mobile-table-icon svg,
  .pos-topbar-row1 .pos-brand .pos-mobile-table-icon svg,
  .pos-topbar-row-1 .pos-brand .pos-mobile-table-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
  }

  /* Table Button 2-Line Display */
  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-table-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-table-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-brand-title,
  .pos-brand .pos-mobile-brand-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1677ff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 110px !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-mobile-table-time {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    white-space: nowrap !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-context-label {
    display: inline-block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-svg-chevron,
  html .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-context-chevron {
    display: inline-block !important;
    flex-shrink: 0 !important;
    color: #4b5563 !important;
  }

  /* Row 1 Right: Options trigger */
  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-anchor,
  html .pos-selling-shell:not(.pos-edit-active) .pos-user {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
    background: #f2f4f7 !important;
    color: #374151 !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger svg,
  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger span {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger::before {
    content: '•••' !important;
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #374151 !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger::after {
    display: none !important;
    content: none !important;
  }

  /* Row 2: Search bar full width */
  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: #f2f4f7 !important;
    border: 0 !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search > svg,
  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search .search-icon {
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: #9ca3af !important;
    margin-right: 8px !important;
  }

  .pos-header-search svg + svg:not(.scan-action svg),
  .pos-header-search .pos-svg-search ~ svg:not(.scan-action svg),
  .pos-header-tools .pos-svg-search ~ svg:not(.scan-action svg) {
    display: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search input {
    flex: 1 1 auto !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #111827 !important;
    outline: none !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    box-shadow: none !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search input::placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #9ca3af !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: auto !important;
  }

  html .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action svg {
    width: 20px !important;
    height: 20px !important;
    color: #9ca3af !important;
  }

  /* 4. Category Tabs */
  html .pos-selling-shell:not(.pos-edit-active) .pos-category-rail {
    padding: 6px 12px 6px !important;
    background: #ffffff !important;
    border: 0 !important;
    overflow: visible !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-category-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 2px 0 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-category-list::-webkit-scrollbar {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-category {
    flex: 0 0 auto !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    background: #f2f4f7 !important;
    color: #374151 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-category::before {
    display: none !important;
    content: none !important;
  }
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .pos-category.active,
  html .pos-selling-shell:not(.pos-edit-active) .pos-category.active {
    background: #1677ff !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-category svg,
  html .pos-selling-shell:not(.pos-edit-active) .pos-category .pos-category-count,
  html .pos-selling-shell:not(.pos-edit-active) .pos-category.active .pos-category-count,
  html .pos-selling-shell:not(.pos-edit-active) .pos-category-count {
    display: none !important;
  }

  /* 5. Products List: 3-column Grid */
  html .pos-selling-shell:not(.pos-edit-active) .pos-products {
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 6px 12px 140px !important;
    box-sizing: border-box !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-card,
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #f0f3f6 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-cover {
    width: 100% !important;
    height: auto !important;
    flex: none !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    background: #f3f4f6 !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px 12px 0 0 !important;
    display: block !important;
    padding: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-cart-badge {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #1677ff !important;
    color: #1677ff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 4px rgba(22, 119, 255, 0.2) !important;
    z-index: 5 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-info {
    padding: 8px 8px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    background: #ffffff !important;
    min-height: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-info strong {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #111827 !important;
    letter-spacing: -0.15px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info strong,
  html:not([data-ui-style="midnight"]) .product-info strong {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: #111827 !important;
    letter-spacing: -0.15px !important;
    text-shadow: none !important;
    filter: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .product-info .price {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1677ff !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    display: block !important;
  }
  html:not([data-ui-style="midnight"]) .pos-selling-shell:not(.pos-edit-active) .product-info .price,
  html .pos-selling-shell:not(.pos-edit-active) .product-info .price,
  html:not([data-ui-style="midnight"]) .product-info .price {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1677ff !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    text-shadow: none !important;
    filter: none !important;
    display: block !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .add-dot,
  html .pos-selling-shell:not(.pos-edit-active) .stock-label,
  html .pos-selling-shell:not(.pos-edit-active) .product-list-meta,
  html .pos-selling-shell:not(.pos-edit-active) .product-custom-desc,
  html .pos-selling-shell:not(.pos-edit-active) .product-custom-badge {
    display: none !important;
  }

  /* 6. Docked Cart Bottom Sheet */
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(8, 20, 32, 0.5) !important;
    z-index: 70 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
  }
  html .pos-selling-shell:not(.pos-edit-active).pos-mobile-cart-open .pos-cart-backdrop {
    display: block !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active).pos-mobile-cart-open .pos-mobile-cart-summary {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
    max-height: min(85dvh, 720px) !important;
    padding: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border: 1px solid #e5e7eb !important;
    border-bottom: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12) !important;
    z-index: 75 !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(calc(100% + 20px)) !important;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  }
  html .pos-selling-shell:not(.pos-edit-active).pos-mobile-cart-open .cart {
    transform: translateY(0) !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart::before {
    display: none !important;
  }

  /* Handle */
  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-handle,
  .pos-sheet-handle {
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 38px !important;
    height: 4px !important;
    min-height: 4px !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    background: #d1d5db !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
  }

  /* Cart Heading - No text overlap */
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading small {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading,
  .cart-heading {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 14px 16px 8px !important;
    padding-top: 14px !important;
    min-height: 44px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: #ffffff !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading > div:not(.customer-picker):not(.pos-sheet-handle),
  .cart-heading > div:not(.customer-picker):not(.pos-sheet-handle) {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: auto !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading h3,
  .cart-heading h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
    margin-right: auto !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-count-badge,
  .pos-cart-count-badge {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1677ff !important;
    margin: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .cart-kicker,
  .cart-heading .cart-kicker {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading [data-pos-action-item-key="clear"],
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart,
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .btn-clear-cart,
  .cart-heading [data-pos-action-item-key="clear"],
  .cart-heading .pos-clear-cart,
  .cart-heading .btn-clear-cart {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #ef4444 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: auto !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .pos-clear-cart svg,
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading [data-pos-action-item-key="clear"] svg,
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .btn-clear-cart svg,
  .cart-heading .pos-clear-cart svg,
  .cart-heading [data-pos-action-item-key="clear"] svg,
  .cart-heading .btn-clear-cart svg {
    width: 16px !important;
    height: 16px !important;
    color: #ef4444 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ef4444 !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-action-btn.btn-cancel-table,
  html .pos-selling-shell:not(.pos-edit-active) .cart-heading .btn-cancel-table,
  .cart-heading .pos-cart-action-btn.btn-cancel-table,
  .cart-heading .btn-cancel-table {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
    margin-left: auto !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-cart-close {
    display: none !important;
  }

  /* Ẩn triệt để nút Lưu đơn / Giữ đơn trên mobile (<= 640px) */
  html .pos-selling-shell:not(.pos-edit-active) [data-action="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) .pos-save-order,
  html .pos-selling-shell:not(.pos-edit-active) [data-pos-action-item-key="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) .pos-action-item[data-pos-action-item-key="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) [data-action="saveOrder"],
  html .pos-selling-shell:not(.pos-edit-active) [data-action="holdOrder"],
  .cart-heading [data-action="saveTable"],
  .cart-heading .pos-save-order,
  .cart-heading [data-pos-action-item-key="saveTable"],
  .pos-topbar [data-action="saveTable"],
  .cart-checkout-footer .pos-save-order,
  .cart-checkout-footer [data-action="saveTable"],
  .cart-checkout-footer [data-pos-action-item-key="saveTable"] {
    display: none !important;
  }



  /* Cart Body & Cart Items */
  html .pos-selling-shell:not(.pos-edit-active) .cart-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 16px 20px !important;
    scrollbar-width: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-items::-webkit-scrollbar {
    display: none !important;
  }

  /* Cart Line */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 60px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    position: relative !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    transition: transform 0.2s ease !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.is-swiped {
    transform: translateX(-76px) !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-swipe-actions {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-swipe-btn.note-toggle,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-swipe-actions .note-toggle {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 68px !important;
    height: calc(100% - 8px) !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content > strong {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content > small {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-item-content .cart-line-total-price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
    display: block !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-price-box,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-unit-price,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-total {
    display: none !important;
  }

  /* Cart Line Quantity Stepper */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty button {
    width: 28px !important;
    min-width: 28px !important;
    height: 32px !important;
    min-height: 32px !important;
    color: #111827 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty span {
    min-width: 24px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111827 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide cart-remove, cart-line-total, cart-status */
  html .pos-selling-shell:not(.pos-edit-active) .cart-remove,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-total,
  html .pos-selling-shell:not(.pos-edit-active) .cart-status {
    display: none !important;
  }

  /* Note toggle button on mobile (hidden by default in static layout) */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line .note-toggle:not(.cart-line-swipe-btn) {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line i.note + .cart-line-note-text,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-note-text {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-style: italic !important;
    margin-top: 2px !important;
  }

  /* Styling cho dòng hiển thị tiền giờ trong giỏ hàng */
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly {
    background: #f8fafc !important;
    border-left: 3px solid #f59e0b !important;
    border-radius: 8px !important;
    margin: 4px 0 !important;
    padding: 8px 10px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-line-hourly-icon {
    color: #f59e0b !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-line-hourly-badge,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-hourly-badge {
    background: #fef3c7 !important;
    color: #b45309 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  /* Cart line note input on mobile (Gói C1: respects hidden attribute) */
  html .pos-selling-shell:not(.pos-edit-active) .cart-note:not([hidden]) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: 30px !important;
    margin: 3px 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    padding: 3px 8px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    color: #111827 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-note:not([hidden]) {
    background: #153a4d !important;
    border-color: #2e566d !important;
    color: #f5f9fc !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-note[hidden] {
    display: none !important;
  }

  /* 7. Cart Footer */
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #f3f4f6 !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 2px !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary strong {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-save-order,
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-action="saveTable"],
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-pos-action-item-key="saveTable"],
  .cart-checkout-footer .pos-save-order,
  .cart-checkout-footer [data-action="saveTable"],
  .cart-checkout-footer [data-pos-action-item-key="saveTable"] {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-item[data-pos-action-item-key="clear"],
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-item:has(.pos-clear-cart),
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-pos-action-item-key="clear"],
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-clear-cart {
    display: none !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-item {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    background: #1677ff !important;
    border: 1px solid #1677ff !important;
    border-radius: 12px !important;
    height: 50px !important;
    min-height: 50px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout .pos-checkout-label {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout .pos-checkout-arrow {
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
  }
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout > svg,
  html .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout > strong {
    display: none !important;
  }


  /* 8. Midnight Theme Overrides */
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-topbar,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category-rail,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-products,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-body,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-items,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer {
    background: #112b36 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker-trigger,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker > button,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker .customer-picker-btn,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-topbar .customer-picker-trigger {
    background: #173946 !important;
    color: #eef6fa !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand {
    background: #173946 !important;
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-table-icon {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-context-label,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-context-label,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-context-chevron,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-svg-chevron,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-topbar h1,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger {
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger {
    background: #173946 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-tools-trigger::before {
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search {
    background: #173946 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search input {
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search input::placeholder {
    color: #8faec0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category {
    background: #173746 !important;
    color: #d9e8ef !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-category.active {
    background: #1f63e9 !important;
    color: #ffffff !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-card {
    background: #153442 !important;
    border-color: #244758 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-cover {
    background: #1a3f50 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-info {
    background: #153442 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-info strong {
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-info .price {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .product-cart-badge {
    background: #112b36 !important;
    border-color: #1f63e9 !important;
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart {
    border-top-color: #244758 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-handle {
    background: #2e566d !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading {
    border-bottom-color: #244758 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading h3 {
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-heading small,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-cart-count-badge {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line {
    border-bottom-color: #244758 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-thumb {
    background: #173946 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-item-content > strong {
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-item-content > small {
    display: none !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty {
    background: #173946 !important;
    border-color: #2e566d !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty button {
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-qty .qty span {
    background: #173946 !important;
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer {
    border-top-color: #244758 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    background: #1f63e9 !important;
    border-color: #1f63e9 !important;
    color: #ffffff !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary span {
    color: #8faec0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-sheet-footer-summary strong {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer .pos-save-order,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-checkout-footer [data-action="saveTable"],
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) [data-action="saveTable"],
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-save-order,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) [data-pos-action-item-key="saveTable"] {
    display: none !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-cart-close {
    background: #173946 !important;
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-header-search .scan-action svg {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-back-btn {
    background: #173946 !important;
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker-panel,
  html[data-ui-style="midnight"] .customer-picker-panel {
    background: #112b36 !important;
    border-color: #244758 !important;
    color: #f5f9fc !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  }
  html[data-ui-style="midnight"] .customer-picker-search-row input,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker-search-row input {
    background: #173946 !important;
    color: #f5f9fc !important;
    border-color: #244758 !important;
  }
  html[data-ui-style="midnight"] .customer-picker-option,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .customer-picker-option {
    color: #f5f9fc !important;
    border-bottom-color: #1e3f50 !important;
  }
  html[data-ui-style="midnight"] .customer-picker-option:hover,
  html[data-ui-style="midnight"] .customer-picker-option:active {
    background: #173946 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-table-name {
    color: #f3f8fb !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-brand .pos-mobile-brand-title,
  html[data-ui-style="midnight"] .pos-brand .pos-mobile-brand-title {
    color: #4ce7f0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-mobile-table-time {
    color: #8faec0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-total-price {
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .cart-line-unit-price {
    color: #8faec0 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) .pos-cart-action-btn.btn-cancel-table {
    color: #ff8595 !important;
    background: #351c27 !important;
  }
  html[data-ui-style="midnight"] .pos-quick-tables-modal,
  html[data-ui-style="midnight"] .pos-table-ops-modal {
    background: #112b36 !important;
    border-color: #244758 !important;
    color: #f5f9fc !important;
  }
  html[data-ui-style="midnight"] .pos-table-item,
  html[data-ui-style="midnight"] .pos-quick-table-card,
  html[data-ui-style="midnight"] .pos-table-card {
    background: #153442 !important;
  }

  /* 7. Quick Table Switcher Modal & Table Operations Modal (Bottom Sheet on Mobile) */
  .pos-quick-tables-backdrop,
  .pos-table-ops-backdrop,
  .pos-table-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    z-index: 110 !important;
  }

  .pos-quick-tables-modal,
  .pos-table-ops-modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: min(85dvh, 650px) !important;
    background: #ffffff !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #dce4ee !important;
    border-bottom: 0 !important;
    z-index: 120 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    animation: posModalSlideUp 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  @keyframes posModalSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  /* Table Cards & Status Color Coding */
  .pos-table-item,
  .pos-quick-table-card,
  .pos-table-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 14px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #ffffff !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, border-color 0.15s ease !important;
    position: relative !important;
  }
  .pos-table-item:active,
  .pos-quick-table-card:active,
  .pos-table-card:active {
    transform: scale(0.98) !important;
  }

  /* Empty: border #10b981, badge background #ecfdf5, text #065f46 */
  .pos-table-item[data-status="empty"],
  .pos-table-item.status-empty,
  .pos-quick-table-card[data-status="empty"],
  .pos-quick-table-card.status-empty,
  .pos-table-card[data-status="empty"],
  .pos-table-card.status-empty {
    border-color: #10b981 !important;
  }
  .pos-table-item[data-status="empty"] .pos-table-status-badge,
  .pos-table-item.status-empty .pos-table-status-badge,
  .pos-quick-table-card[data-status="empty"] .pos-table-status-badge,
  .pos-quick-table-card.status-empty .pos-table-status-badge,
  .pos-table-card[data-status="empty"] .pos-table-status-badge,
  .pos-table-card.status-empty .pos-table-status-badge,
  .pos-table-badge-empty,
  .pos-status-badge.status-empty {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
  }

  /* Occupied/timed: border #f59e0b, badge background #fffbeb, text #b45309 */
  .pos-table-item[data-status="occupied"],
  .pos-table-item.status-occupied,
  .pos-table-item[data-status="active"],
  .pos-table-item.status-active,
  .pos-quick-table-card[data-status="occupied"],
  .pos-quick-table-card.status-occupied,
  .pos-quick-table-card[data-status="active"],
  .pos-quick-table-card.status-active,
  .pos-table-card[data-status="occupied"],
  .pos-table-card.status-occupied,
  .pos-table-card[data-status="active"],
  .pos-table-card.status-active {
    border-color: #f59e0b !important;
  }
  .pos-table-item[data-status="occupied"] .pos-table-status-badge,
  .pos-table-item.status-occupied .pos-table-status-badge,
  .pos-table-item[data-status="active"] .pos-table-status-badge,
  .pos-table-item.status-active .pos-table-status-badge,
  .pos-quick-table-card[data-status="occupied"] .pos-table-status-badge,
  .pos-quick-table-card.status-occupied .pos-table-status-badge,
  .pos-quick-table-card[data-status="active"] .pos-table-status-badge,
  .pos-quick-table-card.status-active .pos-table-status-badge,
  .pos-table-card[data-status="occupied"] .pos-table-status-badge,
  .pos-table-card.status-occupied .pos-table-status-badge,
  .pos-table-card[data-status="active"] .pos-table-status-badge,
  .pos-table-card.status-active .pos-table-status-badge,
  .pos-table-badge-occupied,
  .pos-table-badge-active,
  .pos-status-badge.status-occupied,
  .pos-status-badge.status-active {
    background: #fffbeb !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
  }

  /* Reserved: border #8b5cf6, badge background #f5f3ff, text #6d28d9 */
  .pos-table-item[data-status="reserved"],
  .pos-table-item.status-reserved,
  .pos-quick-table-card[data-status="reserved"],
  .pos-quick-table-card.status-reserved,
  .pos-table-card[data-status="reserved"],
  .pos-table-card.status-reserved {
    border-color: #8b5cf6 !important;
  }
  .pos-table-item[data-status="reserved"] .pos-table-status-badge,
  .pos-table-item.status-reserved .pos-table-status-badge,
  .pos-quick-table-card[data-status="reserved"] .pos-table-status-badge,
  .pos-quick-table-card.status-reserved .pos-table-status-badge,
  .pos-table-card[data-status="reserved"] .pos-table-status-badge,
  .pos-table-card.status-reserved .pos-table-status-badge,
  .pos-table-badge-reserved,
  .pos-status-badge.status-reserved {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
  }

  @keyframes posCartBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
  }
  .pos-mobile-cart-summary.pos-cart-bump {
    animation: posCartBump 0.28s ease !important;
  }

}

  /* 8. Dropdown Popover menu (cho nút Bàn và nút Menu ••• khi ấn vào sổ xuống ngay dưới nút) */
  html body .pos-mobile-dropdown-menu,
  body .pos-mobile-dropdown-menu,
  html .pos-mobile-dropdown-menu,
  .pos-mobile-dropdown-menu {
    position: fixed !important;
    z-index: 20060 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14) !important;
    padding: 6px !important;
    min-width: 200px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(300px, 48vh) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
    color: #0f172a !important;
  }

  html[data-ui-style="midnight"] body .pos-mobile-dropdown-menu,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu {
    background: #092638 !important;
    border-color: #1c4860 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
  }

  .pos-mobile-dropdown-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10050 !important;
    background: transparent !important;
  }

  /* Thông báo rỗng khi không có bàn khác (Gói C2) */
  .pos-mobile-dropdown-menu .pos-dropdown-empty {
    color: #475569 !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* Items bên trong .pos-mobile-dropdown-menu */
  .pos-mobile-dropdown-menu .pos-table-op-btn,
  .pos-mobile-dropdown-menu .pos-dropdown-item,
  .pos-mobile-dropdown-menu button,
  .pos-mobile-dropdown-menu a.pos-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background 0.12s ease !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-item-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-item-left span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* SVG icon styling theo hệ visual POS hiện tại */
  .pos-mobile-dropdown-menu .pos-table-op-btn svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item-left svg,
  .pos-mobile-dropdown-menu button svg,
  .pos-mobile-dropdown-menu a svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    stroke: #2563eb !important;
    color: #2563eb !important;
  }

  /* Hover / active cho item thông thường (không phải danger) */
  .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):hover,
  .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):active,
  .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):not([data-action="cancelTable"]):hover,
  .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):not([data-action="cancelTable"]):active,
  .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):hover,
  .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):active,
  .pos-mobile-dropdown-menu a.pos-dropdown-item:hover,
  .pos-mobile-dropdown-menu a.pos-dropdown-item:active {
    background: #eef2f7 !important;
    color: #0f172a !important;
  }

  .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):hover svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):active svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):not([data-action="cancelTable"]):hover svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):not([data-action="cancelTable"]):active svg,
  .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):hover svg,
  .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):active svg {
    stroke: #1677ff !important;
    color: #1677ff !important;
  }

  /* Item đang chọn (.is-current) */
  .pos-mobile-dropdown-menu .pos-table-op-btn.is-current,
  .pos-mobile-dropdown-menu .pos-dropdown-item.is-current,
  .pos-mobile-dropdown-menu button.is-current,
  .pos-mobile-dropdown-menu .is-current {
    background: #e8f1ff !important;
    color: #1677ff !important;
    font-weight: 700 !important;
  }
  .pos-mobile-dropdown-menu .is-current svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.is-current svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item.is-current svg,
  .pos-mobile-dropdown-menu button.is-current svg {
    stroke: #1677ff !important;
    color: #1677ff !important;
  }

  /* Status pills trong Dropdown chọn bàn */
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-playing,
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-occupied,
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-active {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
  }
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-empty {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
  }
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-reserved {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
  }
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill.status-locked {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
  }
  .pos-mobile-dropdown-menu .pos-dropdown-status-pill .status-dot {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* CHỈ HỦY BÀN DÙNG DANGER ĐỎ */
  .pos-mobile-dropdown-menu .pos-dropdown-item.danger,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"],
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"],
  .pos-mobile-dropdown-menu .btn-cancel-table,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table,
  .pos-mobile-dropdown-menu button.danger,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"],
  .pos-mobile-dropdown-menu button.btn-cancel-table {
    color: #ef4444 !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-item.danger svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"] svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"] svg,
  .pos-mobile-dropdown-menu .btn-cancel-table svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table svg,
  .pos-mobile-dropdown-menu button.danger svg,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"] svg,
  .pos-mobile-dropdown-menu button.btn-cancel-table svg {
    stroke: #ef4444 !important;
    color: #ef4444 !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-item.danger:hover,
  .pos-mobile-dropdown-menu .pos-dropdown-item.danger:active,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"]:hover,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"]:active,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"]:hover,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"]:active,
  .pos-mobile-dropdown-menu .btn-cancel-table:hover,
  .pos-mobile-dropdown-menu .btn-cancel-table:active,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger:hover,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger:active,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table:hover,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table:active,
  .pos-mobile-dropdown-menu button.danger:hover,
  .pos-mobile-dropdown-menu button.danger:active,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"]:hover,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"]:active,
  .pos-mobile-dropdown-menu button.btn-cancel-table:hover,
  .pos-mobile-dropdown-menu button.btn-cancel-table:active {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #f87171 !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-item.danger:hover svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item.danger:active svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"]:hover svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="opCancelTable"]:active svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"]:hover svg,
  .pos-mobile-dropdown-menu .pos-dropdown-item[data-action="cancelTable"]:active svg,
  .pos-mobile-dropdown-menu .btn-cancel-table:hover svg,
  .pos-mobile-dropdown-menu .btn-cancel-table:active svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger:hover svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.danger:active svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table:hover svg,
  .pos-mobile-dropdown-menu .pos-table-op-btn.btn-cancel-table:active svg,
  .pos-mobile-dropdown-menu button.danger:hover svg,
  .pos-mobile-dropdown-menu button.danger:active svg,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"]:hover svg,
  .pos-mobile-dropdown-menu button[data-action="opCancelTable"]:active svg,
  .pos-mobile-dropdown-menu button.btn-cancel-table:hover svg,
  .pos-mobile-dropdown-menu button.btn-cancel-table:active svg {
    stroke: #f87171 !important;
    color: #f87171 !important;
  }

  .pos-mobile-dropdown-menu .pos-quick-table-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    border: 1px solid #1c4860 !important;
    background: #0d3148 !important;
    color: #f7fbff !important;
    min-height: 44px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .pos-mobile-dropdown-menu .pos-quick-table-card:hover,
  .pos-mobile-dropdown-menu .pos-quick-table-card:active {
    background: #153a4d !important;
  }

  .pos-mobile-dropdown-menu .pos-dropdown-divider {
    height: 1px !important;
    margin: 4px 0 !important;
    background: #1c4860 !important;
    border: 0 !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button {
    color: #f7fbff !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn:hover,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn:active,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item:hover,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item:active,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button:hover,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button:active {
    background: #153a4d !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger) svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]) svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]) svg {
    stroke: #38bdf8 !important;
    color: #38bdf8 !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):hover svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-table-op-btn:not(.danger):active svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):hover svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item:not(.danger):not([data-action="opCancelTable"]):active svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):hover svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu button:not(.danger):not([data-action="opCancelTable"]):active svg {
    stroke: #4ff1f8 !important;
    color: #4ff1f8 !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item.danger,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="opCancelTable"],
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="cancelTable"],
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .btn-cancel-table {
    color: #f87171 !important;
  }
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item.danger svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="opCancelTable"] svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="cancelTable"] svg,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .btn-cancel-table svg {
    stroke: #f87171 !important;
    color: #f87171 !important;
  }
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item.danger:hover,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-item.danger:active,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="opCancelTable"]:hover,
  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu [data-action="opCancelTable"]:active {
    background: rgba(239, 68, 68, 0.22) !important;
    color: #fca5a5 !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-quick-table-card {
    border-color: #1c4860 !important;
    background: #0d3148 !important;
  }

  html[data-ui-style="midnight"] .pos-mobile-dropdown-menu .pos-dropdown-divider {
    background: #1c4860 !important;
  }


/* Centered modal fallback on desktop/tablet (min-width: 641px) */
@media (min-width: 641px) {
  .pos-quick-tables-modal,
  .pos-table-ops-modal {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-height: min(85dvh, 700px) !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #dce4ee !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
    z-index: 120 !important;
    animation: posModalFadeIn 0.2s ease !important;
  }
  @keyframes posModalFadeIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
}

/* ========================================================
   MOBILE BILLIARDS TABLE SELECTION SCREEN (MOCKUP 2)
   ======================================================== */
@media (min-width: 0px) {
  @media (max-width: 640px) {
  /* Mobile cleanups: hide pos-nav & large desktop context block */
  .pos-nav,
  .restaurant-pos-context {
    display: none !important;
  }

  body.pos-tables-landing-active .pos-nav,
  body.pos-tables-landing-active .pos-shell > .pos-topbar,
  body:has(.pos-enhanced-billiards) .pos-shell > .pos-topbar,
  body:has(.pos-enhanced-billiards) .pos-shell > .pos-nav,
  .pos-shell:has(.pos-tables-landing-view) > .pos-nav,
  .pos-shell:has(.pos-tables-landing-view) > .pos-topbar,
  .pos-shell:has(.pos-enhanced-billiards) > .pos-topbar,
  .pos-shell:has(.pos-enhanced-billiards) > .pos-nav {
    display: none !important;
  }

  /* Clean sale chrome on mobile: prioritize Table -> Products -> Order */
  .pos-selling-shell .page-head,
  .pos-selling-shell > .pos-actions,
  .pos-selling-shell .pos-category-footer,
  .pos-selling-shell .pos-section-label,
  .pos-selling-shell .pos-column-divider,
  .pos-selling-shell .cart-status,
  .pos-selling-shell .restaurant-pos-context,
  .pos-selling-shell .pos-quick-table-menu {
    display: none !important;
  }

  }

  .pos-tables-landing-view {
    padding: 12px 14px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    background: #f8fafc !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  /* 1. Header */
  .pos-tables-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 2px 2px !important;
  }
  .pos-tables-head h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.3px !important;
  }
  .pos-tables-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .pos-tables-head-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    padding: 0 !important;
    cursor: pointer !important;
  }

  /* "Bán tại quầy" action button in header Danh sách bàn */
  .pos-tables-head-btn.pos-tables-counter-btn {
    width: auto !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 11px !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: #1677ff !important;
    color: #ffffff !important;
    border: 1px solid #1677ff !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
  }
  .pos-tables-head-btn.pos-tables-counter-btn:active {
    background: #0958d9 !important;
    transform: scale(0.98);
  }
  .pos-tables-head-btn.pos-tables-counter-btn svg {
    flex-shrink: 0 !important;
    stroke: currentColor !important;
  }

  /* Nút xem giỏ hàng trên thanh tiêu đề Danh sách bàn (.pos-tables-cart-btn) */
  .pos-tables-head-actions .pos-tables-cart-btn,
  .pos-tables-cart-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .pos-tables-head-actions .pos-tables-cart-btn:hover,
  .pos-tables-head-actions .pos-tables-cart-btn:active,
  .pos-tables-cart-btn:hover,
  .pos-tables-cart-btn:active {
    background: #e2e8f0 !important;
  }
  .pos-tables-cart-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 9px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. Search Bar */
  .pos-tables-search {
    position: relative !important;
    width: 100% !important;
  }
  .pos-tables-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
  }
  .pos-tables-search-input {
    width: 100% !important;
    height: 40px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 16px 0 38px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  }
  .pos-tables-search-input::placeholder {
    color: #94a3b8 !important;
  }

  /* 3. Filter Pills */
  .pos-tables-filter-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 2px 0 !important;
  }
  .pos-tables-filter-bar::-webkit-scrollbar {
    display: none !important;
  }
  .pos-tables-filter-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    border: 0 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }
  .pos-tables-filter-pill.active {
    background: #1677ff !important;
    color: #ffffff !important;
    font-weight: 600 !important;
  }
  .pos-tables-filter-pill .pill-count {
    font-weight: inherit !important;
  }

  /* 4. 3-Column Table Grid */
  .pos-billiards-table-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  /* Table Card */
  .pos-billiards-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #eef2f6 !important;
    padding: 8px !important;
    text-align: left !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }
  .pos-billiards-card:active {
    transform: scale(0.97) !important;
  }

  /* Top Billiard Table SVG */
  .pos-billiards-table-visual {
    width: 100% !important;
    aspect-ratio: 16 / 9.5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: block !important;
    margin-bottom: 8px !important;
  }
  .pos-billiards-table-visual svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Table Name */
  .pos-billiards-card-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
  }

  /* Status Pill */
  .pos-billiards-card-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .pos-billiards-card-status.status-playing {
    background: #fee2e2 !important;
    color: #ef4444 !important;
  }
  .pos-billiards-card-status.status-empty {
    background: #dcfce7 !important;
    color: #10b981 !important;
  }
  .pos-billiards-card-status.status-reserved {
    background: #dbeafe !important;
    color: #2563eb !important;
  }
  .pos-billiards-card-status.status-locked {
    background: #f1f5f9 !important;
    color: #64748b !important;
  }
  .pos-billiards-card-status .status-dot {
    font-size: 8px !important;
    line-height: 1 !important;
  }

  /* Meta Row & Clock */
  .pos-billiards-card-meta {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #ef4444 !important;
    margin-top: 2px !important;
    min-height: 18px !important;
  }
  .pos-billiards-clock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #fef2f2 !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    border: 1px solid #fee2e2 !important;
  }
  .pos-billiards-clock svg {
    width: 12px !important;
    height: 12px !important;
    color: #ef4444 !important;
    flex-shrink: 0 !important;
  }
  .pos-billiards-card-meta .meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }
  .pos-billiards-card-meta svg:not(.pos-billiards-clock svg) {
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }

  /* Hide default landing elements when enhanced */
  .restaurant-landing > .restaurant-landing-head,
  .restaurant-landing > .restaurant-takeaway-card,
  .restaurant-tables-section > .restaurant-section-heading,
  .restaurant-landing > .restaurant-tables-section > .restaurant-section-heading,
  .restaurant-landing > .restaurant-tables-section > .restaurant-table-grid,
  .restaurant-landing > .restaurant-operations,
  .restaurant-landing.pos-enhanced-billiards > .restaurant-landing-head,
  .restaurant-landing.pos-enhanced-billiards > .restaurant-takeaway-card,
  .restaurant-landing.pos-enhanced-billiards > .restaurant-tables-section > .restaurant-section-heading,
  .restaurant-landing.pos-enhanced-billiards > .restaurant-tables-section > .restaurant-table-grid,
  .restaurant-landing.pos-enhanced-billiards > .restaurant-operations {
    display: none !important;
  }

  @media (max-width: 640px) {
  /* 3-Column Grid Enforcement on Mobile */
  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }

  }

  /* Light mode sharp typography */
  html:not([data-ui-style="midnight"]) .pos-tables-landing-view {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow: none !important;
    filter: none !important;
  }
  html:not([data-ui-style="midnight"]) .pos-billiards-card-name,
  html:not([data-ui-style="midnight"]) .pos-tables-head h1,
  html:not([data-ui-style="midnight"]) .pos-tables-counter-btn {
    text-shadow: none !important;
    filter: none !important;
  }

  /* Midnight dark mode styles */
  html[data-ui-style="midnight"] .pos-tables-landing-view {
    background: #0b1320 !important;
  }
  html[data-ui-style="midnight"] .pos-tables-head h1 {
    color: #f1f5f9 !important;
  }
  html[data-ui-style="midnight"] .pos-tables-head-btn {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  html[data-ui-style="midnight"] .pos-tables-head-btn.pos-tables-counter-btn {
    background: #1d4ed8 !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
  }
  html[data-ui-style="midnight"] .pos-tables-head-btn.pos-tables-counter-btn:active {
    background: #2563eb !important;
  }
  html[data-ui-style="midnight"] .pos-tables-search-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
  }
  html[data-ui-style="midnight"] .pos-tables-filter-pill {
    background: #1e293b !important;
    color: #94a3b8 !important;
  }
  html[data-ui-style="midnight"] .pos-tables-filter-pill.active {
    background: #2563eb !important;
    color: #ffffff !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card {
    background: #131d2e !important;
    border-color: #243044 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-name {
    color: #f1f5f9 !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-status.status-playing {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-status.status-empty {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-status.status-reserved {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #60a5fa !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-status.status-locked {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
  }
  html[data-ui-style="midnight"] .pos-billiards-card-meta {
    color: #94a3b8 !important;
  }
}

@media (min-width: 641px) {
  .pos-enhanced-billiards > .restaurant-landing-head,
  .pos-enhanced-billiards > .restaurant-operations,
  .pos-enhanced-billiards > .restaurant-tables-section { display: none !important; }
  .pos-desktop-table-landing { width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 28px; }
  .pos-desktop-table-landing .pos-tables-head { padding: 0 !important; gap: 16px; flex-wrap: wrap; }
  .pos-desktop-table-landing .pos-tables-head h1 { font-size: 26px !important; }
  .pos-desktop-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .pos-desktop-table-toolbar .pos-tables-search { flex: 0 1 360px; width: min(100%, 360px) !important; }
  .pos-desktop-table-toolbar .pos-tables-search-input { border-radius: 10px !important; }
  .pos-desktop-table-toolbar .pos-tables-filter-bar { flex-wrap: wrap; overflow: visible !important; }
  .pos-desktop-table-landing .pos-billiards-table-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 16px !important; padding-bottom: 0 !important; }
  .pos-desktop-table-landing .pos-billiards-card { min-height: 190px; padding: 20px 12px 14px !important; }
  .pos-desktop-table-landing .pos-billiards-card-name { font-size: 16px !important; }
  .pos-desktop-table-detail { font-size: 12px; line-height: 1.5; color: var(--muted, #64748b); margin-top: 6px; overflow-wrap: anywhere; }
  .pos-billiards-card-wrap { position: relative; min-width: 0; }
  .pos-billiards-card-wrap .pos-billiards-card { width: 100%; height: 100%; }
  .pos-table-cart-btn { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--surface, #fff); color: var(--brand, #106c64); border: 1px solid var(--line, #e2e8f0); cursor: pointer; }
  .pos-selling-shell .restaurant-pos-context { display: none !important; }
  .pos-selling-shell .cart-heading { padding: 8px 10px !important; min-height: 0 !important; }
  .pos-selling-shell .cart-heading:empty { display: none !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 12px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-hourly-info { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; }
  .pos-selling-shell .cart-hourly-title { display: flex; align-items: center; gap: 6px; }
  .pos-selling-shell .cart-hourly-title strong { white-space: normal !important; overflow: visible !important; font-size: 14px !important; }
  .pos-selling-shell .cart-hourly-clock { flex-shrink: 0; }
  .pos-selling-shell .cart-hourly-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; font-size: 12px; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-hourly-amount-box { display: grid; gap: 6px; justify-items: end; flex: 0 0 auto !important; width: auto !important; max-width: 150px !important; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer { display: flex !important; gap: 8px; align-items: stretch; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-item { flex: 1; display: flex; }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-footer { display: flex !important; margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--line, #e2e8f0); }
  .pos-selling-shell .pos-category-footer .pos-action-item { width: 100%; }
  .pos-selling-shell .pos-category-footer .pos-cancel-table { width: 100%; }
  .pos-selling-shell .pos-cancel-table { flex: 0 0 auto; white-space: nowrap; padding: 10px !important; min-height: 44px; }
  .pos-selling-shell .cart-checkout-footer .pos-action-checkout { min-width: 0; flex: 1; }
}
.pos-tables-search-input:focus-visible, .pos-billiards-card:focus-visible, .pos-dropdown-item:focus-visible, .pos-tables-filter-pill:focus-visible { outline: 2px solid #1677ff !important; outline-offset: 2px; }
.table-management .list-row { flex-wrap: wrap; gap: 8px; }