/* Mặc định ẩn phím tắt desktop trên các thiết bị và màn hình nhỏ */
/* Desktop: hourly elapsed is secondary metadata; money matches product line totals. */
@media (min-width: 1024px) {
  html body .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-meta span.cart-hourly-time {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: #64748b !important;
  }
  html body .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box .cart-line-total-price b {
    color: #0b68ce !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    font-variant-numeric: tabular-nums !important;
  }
  html[data-ui-style="midnight"] body .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-meta span.cart-hourly-time {
    color: #a4bacb !important;
  }
  html[data-ui-style="midnight"] body .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box .cart-line-total-price b {
    color: #70b7ff !important;
  }
}

/* Desktop POS: compact 4-column table switcher, anchored below the + tab. */
@media (min-width: 1024px) {
  html body .pos-mobile-dropdown-menu.pos-mobile-table-dropdown.pos-table-grid-dropdown {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 6px !important;
    width: 512px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: min(440px, 65vh) !important;
    padding: 9px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid #dbe4ec !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14) !important;
  }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-option {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 65px !important;
    padding: 6px 4px !important;
    border: 1px solid #dfe7ef !important;
    border-radius: 8px !important;
    background: #fff !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-name,
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-time {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
  }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-name {
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-time {
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-open { background: #f0fbf5 !important; border-color: #cfeadb !important; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-open .pos-grid-table-time { color: #07834d !important; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-empty .pos-grid-table-time { color: #64748b !important; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-reserved { background: #fff9f3 !important; border-color: #f6e5d3 !important; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-reserved .pos-grid-table-time { color: #c45a0c !important; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-option:hover,
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-option:focus-visible { border-color: #80afe8 !important; background: #edf5ff !important; outline-offset: 1px; }
  html body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-option.is-current { border-color: #60a5fa !important; background: #eaf3ff !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown { background: #092638 !important; border-color: #1c4860 !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-option { background: #103044 !important; border-color: #2a5266 !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown .pos-grid-table-name { color: #eff8ff !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-open .pos-grid-table-time { color: #73e6a8 !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-empty .pos-grid-table-time { color: #a4bacb !important; }
  html[data-ui-style="midnight"] body .pos-mobile-table-dropdown.pos-table-grid-dropdown .state-reserved .pos-grid-table-time { color: #ffbc72 !important; }
}

.cart-shortcuts-hint {
  display: none;
}

@media (min-width: 901px) {
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) {
    --operator-border: #d6e1ea;
    --operator-surface: #ffffff;
    --operator-soft: #f4f7fa;
    --operator-soft-strong: #eaf1f7;
    --operator-text: #1f3a4b;
    --operator-muted: #6b8393;
    --operator-accent: #1769d2;
    --operator-accent-soft: #e8f2ff;
    --operator-danger: #b12d42;
    --operator-danger-soft: #fff3f5;
    --operator-success: #087e48;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 12px !important;
    border-bottom: 1px solid var(--operator-border) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand-cluster {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 16px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding-right: 14px !important;
    border-right: 1px solid var(--operator-border) !important;
    text-decoration: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand small {
    display: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand strong {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--operator-text) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-brand-cluster h1 {
    display: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-switch-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--operator-border) !important;
    border-radius: 8px !important;
    background: var(--operator-soft) !important;
    color: var(--operator-text) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-switch-btn:hover {
    background: var(--operator-accent-soft) !important;
    border-color: #9fc4ee !important;
    color: var(--operator-accent) !important;
    box-shadow: 0 2px 6px rgba(23, 105, 210, 0.08) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-switch-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  /* Cụm giữa: Status Center */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-header-status-center {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 0 8px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-header-tools:has(.pos-header-status-center) {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Live Clock */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: var(--operator-soft) !important;
    border: 1px solid var(--operator-border) !important;
    color: var(--operator-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock svg {
    width: 15px !important;
    height: 15px !important;
    color: var(--operator-accent) !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock .clock-time,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock strong {
    font-weight: 700 !important;
    color: var(--operator-accent) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock .clock-date,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock small,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock span:not(.clock-time) {
    color: var(--operator-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  /* Widget bàn: Bàn có khách / Tổng bàn */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: rgba(8, 126, 72, 0.08) !important;
    border: 1px solid rgba(8, 126, 72, 0.22) !important;
    color: #087e48 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi svg {
    width: 15px !important;
    height: 15px !important;
    color: #087e48 !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi .kpi-badge,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: #087e48 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi .kpi-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #087e48 !important;
    box-shadow: 0 0 0 2px rgba(8, 126, 72, 0.25) !important;
    flex-shrink: 0 !important;
  }

  /* Badge trạng thái mạng */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: 1px solid var(--operator-border) !important;
    background: var(--operator-soft) !important;
    color: var(--operator-muted) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status].online,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status="online"] {
    background: rgba(8, 126, 72, 0.08) !important;
    border-color: rgba(8, 126, 72, 0.22) !important;
    color: #087e48 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status].offline,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status="offline"] {
    background: rgba(177, 45, 66, 0.08) !important;
    border-color: rgba(177, 45, 66, 0.22) !important;
    color: #b12d42 !important;
  }

  /* Ẩn search cũ trên header và quick actions cũ */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-header-tools,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-quick-actions,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-search-shortcut,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-selling-header .pos-header-search {
    display: none !important;
  }

  /* Cụm phải: pos-user */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user-name {
    max-width: 100px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--operator-text) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-shift-info,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user .badge {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-recent-invoices-btn,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-action="recentInvoices"],
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user a[href*="hoa-don"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--operator-border) !important;
    border-radius: 8px !important;
    background: var(--operator-soft) !important;
    color: var(--operator-text) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-recent-invoices-btn:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-action="recentInvoices"]:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user a[href*="hoa-don"]:hover {
    background: var(--operator-accent-soft) !important;
    border-color: #9fc4ee !important;
    color: var(--operator-accent) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-recent-invoices-btn svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-action="recentInvoices"] svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user a[href*="hoa-don"] svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .header-icon,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tools-trigger {
    min-width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
  }

  /* Thanh Search mới bên dưới: Kéo dài từ cột danh mục tới hết lưới sản phẩm */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 10px 4px 12px !important;
    background: #ffffff !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    position: relative !important;
    gap: 8px !important;
    z-index: 5 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar:focus-within {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout > .pos-catalog-searchbar {
    grid-column: 1 / 4 !important;
    margin: 8px 0 8px 8px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) > .pos-category-rail {
    grid-row: 2 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) > .pos-column-divider:first-of-type {
    grid-row: 2 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) > .pos-products {
    grid-row: 2 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) > .pos-column-divider:last-of-type {
    grid-row: 1 / 3 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout:has(.pos-catalog-searchbar) > .cart {
    grid-column: 5 !important;
    grid-row: 1 / 3 !important;
  }

  /* Icon kính lúp bên trái trong searchbar mới */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar > svg:first-child,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-search-icon {
    width: 18px !important;
    height: 18px !important;
    color: var(--operator-muted, #6b8393) !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
  }

  /* Input trong searchbar mới */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar input,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-catalog-search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--operator-text, #1f3a4b) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    outline: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar input::placeholder {
    color: var(--operator-muted, #6b8393) !important;
    font-size: 14px !important;
  }

  /* Nút quét barcode bên phải trong searchbar mới */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"],
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 4px !important;
    border: 1px solid rgba(2, 132, 199, 0.18) !important;
    border-radius: 6px !important;
    background: rgba(2, 132, 199, 0.08) !important;
    color: #0284c7 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"]:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn:hover {
    background: rgba(2, 132, 199, 0.16) !important;
    border-color: rgba(2, 132, 199, 0.32) !important;
    color: #0369a1 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"] svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn svg {
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-content.pos-selling {
    height: calc(100dvh - var(--pwa-banner-height, 0px) - 58px) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, var(--split-category, 180px)) 8px minmax(0, 1fr) 8px minmax(0, var(--split-cart, 440px)) !important;
    background: #eef3f7 !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-rail {
    padding: 9px 7px !important;
    border-right: 0 !important;
    background: var(--operator-surface) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-list {
    gap: 5px !important;
    padding: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category {
    display: grid !important;
    grid-template-columns: 21px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 6px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--operator-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category:hover {
    background: var(--operator-soft) !important;
    border-color: var(--operator-border) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category.active {
    background: var(--operator-accent-soft) !important;
    border-color: #9fc4ee !important;
    color: #145aa9 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category svg {
    width: 17px !important;
    height: 17px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--operator-soft-strong) !important;
    color: var(--operator-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center;
    box-sizing: border-box !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-count:empty {
    display: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category.active .pos-category-count {
    background: rgba(23, 105, 210, 0.15) !important;
    color: #145aa9 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-footer {
    margin-top: auto !important;
    padding: 7px 0 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-list-action {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider {
    width: 8px !important;
    min-width: 8px !important;
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider::after {
    width: 2px !important;
    height: 38px !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:focus-visible {
    opacity: 1 !important;
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:hover::after,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:focus-visible::after {
    opacity: 1 !important;
    background: #38bdf8 !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-products {
    min-width: 0 !important;
    padding: 9px !important;
    background: #eef3f7 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: calc((100% - 16px) / 3) !important;
    align-content: stretch !important;
    gap: 8px !important;
    padding: 0 4px 0 2px !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
    scroll-snap-type: y mandatory;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid::-webkit-scrollbar {
    display: block !important;
    width: 6px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #cbd5e1 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 1px solid #c9d6df !important;
    border-radius: 10px !important;
    background: #dfe8ee !important;
    box-shadow: none !important;
    transform: none !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
    transition: border-color .12s ease, box-shadow .12s ease, filter .12s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:hover {
    border-color: #739bc2 !important;
    box-shadow: 0 2px 9px rgba(32, 67, 93, .12) !important;
    filter: brightness(1.015);
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:focus-visible,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active).pos-keyboard-mode .product-card.is-keyboard-active {
    outline: 3px solid #2c7bd8 !important;
    outline-offset: -3px !important;
    border-color: #2c7bd8 !important;
    box-shadow: 0 0 0 2px rgba(44, 123, 216, .2) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-cover {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border-radius: inherit !important;
    background: #e2eaf0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info {
    position: absolute !important;
    z-index: 2 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 62px !important;
    padding: 18px 9px 8px !important;
    background: linear-gradient(to top, rgba(8, 23, 34, .88) 0%, rgba(8, 23, 34, .68) 58%, rgba(8, 23, 34, 0) 100%) !important;
    color: #ffffff !important;
    pointer-events: none;
    transition: padding 0.16s ease, background 0.16s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:hover .product-info,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:focus-visible .product-info {
    padding: 24px 9px 8px !important;
    background: linear-gradient(to top, rgba(8, 23, 34, 0.95) 0%, rgba(8, 23, 34, 0.8) 65%, rgba(8, 23, 34, 0) 100%) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info strong {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:hover .product-info strong,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:focus-visible .product-info strong {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:hover {
    z-index: 10 !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-name-wrap {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Ẩn tooltip popover cũ vì đã bung hiển thị 2 dòng trực tiếp trên card */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-name-popover,
  .product-name-popover {
    display: none !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-info .price {
    margin-top: 4px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .stock-label {
    z-index: 3 !important;
    top: 7px !important;
    right: 7px !important;
    bottom: auto !important;
    padding: 3px 6px !important;
    border: 1px solid rgba(255,255,255,.45) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.9) !important;
    color: #385568 !important;
    font-size: 10px !important;
    backdrop-filter: blur(5px);
  }

  /* Món hết hàng */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card.is-out-of-stock,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card[data-stock="0"] {
    opacity: 0.6 !important;
    filter: grayscale(0.4) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card.is-out-of-stock:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card[data-stock="0"]:hover {
    filter: grayscale(0.3) brightness(1.02) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card.is-out-of-stock .stock-label,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card[data-stock="0"] .stock-label {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.35) !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart {
    min-width: 0 !important;
    padding: 0 9px 9px !important;
    border: 0 !important;
    border-left: 1px solid var(--operator-border) !important;
    border-radius: 0 !important;
    background: var(--operator-surface) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    height: 53px !important;
    min-height: 53px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--operator-border) !important;
    background: var(--operator-surface) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading .customer-picker-trigger {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 9px !important;
    border-radius: 8px !important;
    background: var(--operator-soft) !important;
    font-size: 13px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading > div:not(.customer-picker) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 55px !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 8px !important;
    border: 1px solid var(--operator-border) !important;
    border-radius: 8px !important;
    background: var(--operator-soft) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading small {
    font-size: 12px !important;
  }
  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"] {
    position: relative;
    width: auto !important;
    min-width: 94px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 31px 6px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-shortcut]::after {
    content: attr(data-shortcut);
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 19px;
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    opacity: .72;
    pointer-events: none;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-body {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-right: 3px !important;
    scrollbar-width: thin !important;
    scrollbar-gutter: stable;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items::-webkit-scrollbar {
    display: block !important;
    width: 7px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #c6d1da;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 96px !important;
    grid-template-rows: minmax(68px, auto) !important;
    align-items: start !important;
    column-gap: 8px !important;
    min-height: 84px !important;
    padding: 8px 3px !important;
    border-bottom: 1px solid #e3eaf0 !important;
    border-radius: 7px !important;
    outline: 0 !important;
    background: transparent !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active).pos-keyboard-mode .cart-line.is-keyboard-active,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:focus-visible {
    background: var(--operator-accent-soft) !important;
    box-shadow: inset 3px 0 0 var(--operator-accent) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 50px !important;
    height: 54px !important;
    margin: 0 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > strong {
    width: 100%;
    overflow: hidden;
    color: var(--operator-text) !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > small {
    margin: 0 !important;
    color: var(--operator-muted) !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 74px !important;
    max-width: 100% !important;
    height: 25px !important;
    min-height: 25px !important;
    margin: 3px 0 0 !important;
    padding: 3px 7px !important;
    border: 1px solid var(--operator-border) !important;
    border-radius: 6px !important;
    background: var(--operator-soft) !important;
    color: var(--operator-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-note {
    width: 100% !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 3px 0 0 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-total {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    padding: 0 !important;
    color: var(--operator-accent) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty {
    height: 32px !important;
    min-height: 32px !important;
    border: 1px solid var(--operator-border) !important;
    border-radius: 7px !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 span {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 30px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty button {
    background: var(--operator-soft) !important;
    color: var(--operator-text) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty span {
    background: var(--operator-surface) !important;
    color: var(--operator-text) !important;
  }

  /* Khối tiện ích giỏ hàng: Quick Toolbar & Shortcuts Hint */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-toolbar,
  .cart-quick-toolbar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 6px !important;
    flex: 0 0 auto !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn,
  .cart-quick-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 6px !important;
    background: var(--operator-soft, #f4f7fa) !important;
    color: #405c78 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn i,
  .cart-quick-btn svg,
  .cart-quick-btn i {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn:hover,
  .cart-quick-btn:hover {
    background: var(--operator-accent-soft, #e8f2ff) !important;
    border-color: #9fc4ee !important;
    color: var(--operator-accent, #1769d2) !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint,
  .cart-shortcuts-hint {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px dashed #e2e8f0 !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint b,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint kbd,
  .cart-shortcuts-hint b,
  .cart-shortcuts-hint kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: inherit !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--operator-border) !important;
    background: var(--operator-surface) !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-item {
    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-clear-cart,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    position: relative !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 9px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-clear-cart {
    padding: 7px !important;
    border: 1px solid #efc9cf !important;
    background: var(--operator-danger-soft) !important;
    color: var(--operator-danger) !important;
    font-size: 12px !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout {
    padding: 7px 36px 7px 12px !important;
    border-color: var(--operator-success) !important;
    background: var(--operator-success) !important;
    color: #ffffff !important;
  }
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-checkout-footer .pos-action-checkout strong {
    color: #ffffff !important;
    font-size: 19px !important;
  }
  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) button:focus-visible,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) input:focus-visible {
    outline: 2px solid #2c7bd8 !important;
    outline-offset: 1px !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) {
    --operator-border: #2c4d60;
    --operator-surface: #102c3b;
    --operator-soft: #153747;
    --operator-soft-strong: #1d4254;
    --operator-text: #e8f3f8;
    --operator-muted: #a5bac7;
    --operator-accent: #65d8ee;
    --operator-accent-soft: #173f52;
    --operator-danger: #ffb6c3;
    --operator-danger-soft: #3a2030;
    --operator-success: #087b50;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-products {
    background: #0d2633 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider {
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider::after {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:focus-visible {
    opacity: 1 !important;
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:hover::after,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-column-divider:focus-visible::after {
    opacity: 1 !important;
    background: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-switch-btn {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #e8f3f8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-table-switch-btn:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #e8f3f8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock .clock-time,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock strong {
    color: #65d8ee !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock .clock-date,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock small,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-live-clock span:not(.clock-time) {
    color: #a5bac7 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi {
    background: rgba(8, 123, 80, 0.22) !important;
    border-color: rgba(8, 123, 80, 0.45) !important;
    color: #4ade80 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi svg {
    color: #4ade80 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi .kpi-badge,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-tables-kpi .badge {
    background: #087b50 !important;
    color: #ffffff !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status] {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #a5bac7 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status].online,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status="online"] {
    background: rgba(8, 123, 80, 0.22) !important;
    border-color: rgba(8, 123, 80, 0.45) !important;
    color: #4ade80 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status].offline,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-pos-data-status="offline"] {
    background: rgba(177, 45, 66, 0.22) !important;
    border-color: rgba(177, 45, 66, 0.45) !important;
    color: #ffb6c3 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-recent-invoices-btn,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-action="recentInvoices"],
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user a[href*="hoa-don"] {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #e8f3f8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-recent-invoices-btn:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) [data-action="recentInvoices"]:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-user a[href*="hoa-don"]:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar {
    background: #102c3b !important;
    border-color: #2c4d60 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar:focus-within {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar input {
    color: #e8f3f8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar input::placeholder {
    color: #7a94a4 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"],
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn {
    padding: 0 4px !important;
    border: 1px solid rgba(56, 189, 248, 0.28) !important;
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"]:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn:hover {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    color: #7dd3fc !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn,
  html[data-ui-style="midnight"] .cart-quick-btn {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #c2d7e5 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-quick-btn:hover,
  html[data-ui-style="midnight"] .cart-quick-btn:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint,
  html[data-ui-style="midnight"] .cart-shortcuts-hint {
    background: #102735 !important;
    border-color: #244354 !important;
    color: #8da6b7 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint b,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint kbd,
  html[data-ui-style="midnight"] .cart-shortcuts-hint b,
  html[data-ui-style="midnight"] .cart-shortcuts-hint kbd {
    background: #183748 !important;
    border-color: #2e556b !important;
    color: #d2e4ee !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-name-popover {
    display: none !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card {
    border-color: #315466 !important;
    background: #173a4b !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-cover {
    background: #173a4b !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .stock-label {
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(14,43,57,.88) !important;
    color: #d8eaf2 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card.is-out-of-stock .stock-label,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card[data-stock="0"] .stock-label {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #f87171 !important;
    font-weight: 700 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid::-webkit-scrollbar-thumb,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-items::-webkit-scrollbar-thumb {
    background: #385767;
  }
}

@media(min-width:901px){
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout {grid-template-columns:minmax(0,var(--split-category,140px)) 8px minmax(0,1fr) 8px minmax(0,var(--split-cart,32vw))!important}
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .products-grid {grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:calc((100% - 16px)/3)!important;height:100%!important;max-height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin!important;scroll-snap-type:y mandatory}
  @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;grid-auto-rows:calc((100% - 16px)/3)!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;grid-auto-rows:calc((100% - 16px)/3)!important}}
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card {aspect-ratio:auto!important;height:100%!important;min-height:0!important;overflow:hidden!important;scroll-snap-align:start;box-sizing:border-box!important}
}

@media(min-width:901px){
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-content.pos-selling {height:calc(100dvh - var(--pwa-banner-height, 0px) - 58px)!important;min-height:0!important;padding:8px 0 0!important;box-sizing:border-box}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-layout {height:100%!important;min-height:0!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading {display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;padding:10px!important;height:auto!important;flex:0 0 auto!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading>.customer-picker {flex:0 0 100%!important;order:2!important;min-width:0!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading>.pos-table-controls {display:flex!important;flex:1!important;align-items:center!important;justify-content:space-between!important;min-height:38px!important;height:38px!important;padding:0!important;border:1px solid var(--operator-border, #c9d6df)!important;border-radius:8px!important;background:var(--operator-surface, #ffffff)!important;min-width:0!important;box-sizing:border-box!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-active-table {display:flex!important;width:100%!important;height:100%!important;align-items:center!important;justify-content:space-between!important;padding:0 12px!important;border:0!important;background:transparent!important;font-size:15px!important;font-weight:700!important;color:#1e293b!important;cursor:pointer!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-active-table:hover {background:rgba(0,0,0,0.03)!important;border-radius:7px!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-active-table .pos-down-chevron {font-size:14px!important;color:#64748b!important;margin-left:8px!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-heading>.pos-action-item {flex:0 0 auto!important;width:auto!important;border:0!important;padding:0!important}
 html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-category-footer {display:none!important}
}

@media(min-width:901px){
 html[data-store-palette="moc"] .pos-selling-shell.pos-retail:not(.pos-edit-active) {--operator-accent:#176c54;--operator-accent-soft:#e8f2e9;--operator-success:#176c54}
 html[data-store-palette="purple"] .pos-selling-shell.pos-retail:not(.pos-edit-active) {--operator-accent:#7951a6;--operator-accent-soft:#f0ebf7;--operator-success:#7951a6}
}

/* ==========================================================================
   MỤC 1: HEADER & NAVIGATION THU GỌN 1 HÀNG NGANG DUY NHẤT (DESKTOP PC)
   Bàn, Gọi món, Hóa đơn, Ca làm & thu chi bên trái;
   Trạng thái, User avatar, Tên, Tùy chọn, Đăng xuất bên phải.
   ========================================================================== */
@media (min-width: 901px) {
  html .pos-shell:not(.pos-selling-shell),
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) {
    display: grid !important;
    grid-template-rows: 52px 1fr !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "nav user"
      "content content" !important;
    height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    min-height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    max-height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-topbar {
    grid-area: user !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 16px 0 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  html:not([data-ui-style="midnight"]) .pos-shell:not(.pos-selling-shell) .pos-topbar,
  html:not([data-ui-style="midnight"]) .pos-shell:not(.pos-selling-shell) .pos-nav,
  html:not([data-ui-style="midnight"]) .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-topbar,
  html:not([data-ui-style="midnight"]) .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav {
    background: #ffffff !important;
    border-bottom: 1px solid var(--operator-border, #d6e1ea) !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-brand,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-brand {
    display: none !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user > span:not(.badge):not(.pos-tools-anchor),
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user > span:not(.badge):not(.pos-tools-anchor) {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--operator-text, #18333b) !important;
    max-width: 140px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .badge,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .badge {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 11.5px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .operator-user-avatar,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .operator-user-avatar {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--brand, #106c64) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .btn:not(.pos-tools-menu-row),
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .btn:not(.pos-tools-menu-row) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .header-icon,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .header-icon {
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    background: #ffffff !important;
    color: var(--operator-text, #18333b) !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .header-icon:hover,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .header-icon:hover {
    background: #f0f4f7 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user [data-action="logout"],
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user [data-action="logout"] {
    display: inline-flex !important;
    min-height: 34px !important;
    height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
    justify-content: center !important;
    color: var(--operator-muted, #58717a) !important;
    border-radius: 6px !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user [data-action="logout"]:hover,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user [data-action="logout"]:hover {
    background: #fde8e8 !important;
    color: #b12d42 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav {
    grid-area: nav !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 12px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: static !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav::before,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    flex-shrink: 0;
    background: url('/icon.svg') no-repeat center center / contain;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav a,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    min-width: auto !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: var(--operator-muted, #546a73) !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    flex: 0 0 auto !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav a svg,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a svg {
    width: 15px !important;
    height: 15px !important;
    opacity: 0.85 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav a:hover,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a:hover {
    background: #f0f4f7 !important;
    color: var(--operator-text, #18333b) !important;
    box-shadow: none !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav a.active,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a.active {
    background: var(--operator-accent-soft, #e7f3f2) !important;
    color: var(--operator-accent, #106c64) !important;
    border: 1px solid var(--operator-accent, #106c64) !important;
    font-weight: 700 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav a.active svg,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a.active svg {
    color: var(--operator-accent, #106c64) !important;
    opacity: 1 !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-nav .operator-mobile-manage,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav .operator-mobile-manage {
    display: none !important;
  }

  html .pos-shell:not(.pos-selling-shell) .pos-content,
  html .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-content {
    grid-area: content !important;
    height: calc(100dvh - var(--pwa-banner-height, 0px) - 52px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--pwa-banner-height, 0px) - 52px) !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Midnight / Dark Theme adjustments */
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-topbar,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-nav,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-topbar,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav {
    background: #112b36 !important;
    border-bottom: 1px solid #294652 !important;
  }

  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-nav a,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a {
    color: #c4d5df !important;
  }

  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-nav a:hover,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a:hover {
    background: #173946 !important;
    color: #ffffff !important;
  }

  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-nav a.active,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) > .pos-nav a.active {
    background: #1f7775 !important;
    color: #ffffff !important;
    border-color: #1f7775 !important;
  }

  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user > span:not(.badge):not(.pos-tools-anchor),
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user > span:not(.badge):not(.pos-tools-anchor) {
    color: #e7f1f3 !important;
  }

  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell) .pos-topbar .pos-user .header-icon,
  html[data-ui-style="midnight"] .pos-shell:not(.pos-selling-shell):has(.operator-landing) .pos-topbar .pos-user .header-icon {
    background: #173946 !important;
    border-color: #294652 !important;
    color: #e7f1f3 !important;
  }
}

/* Triệt tiêu vĩnh viễn popover cũ trên mọi theme và mọi trạng thái */
.product-name-popover,
.product-card:hover .product-name-popover,
.product-card:focus-visible .product-name-popover,
html .product-name-popover {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Bảo đảm card không bao giờ nở to hoặc nhảy đè lên card xung quanh */
html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card,
html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:hover,
html .pos-selling-shell.pos-retail:not(.pos-edit-active) .product-card:focus-visible {
  transform: none !important;
  max-width: 100% !important;
}

/* BIDA89 DESKTOP TABLE LIST REFRESH
 * Desktop-only presentation; existing data, DOM, actions and clocks are unchanged.
 * !important is limited to conflicts with the shared reference card/filter rules
 * and the later bida-commercial-ui.css command bar. No global theme tokens.
 */
@media (min-width: 1024px) {
  .restaurant-landing.operator-landing {
    --bida-table-ink: #172b4d;
    --bida-table-muted: #53657e;
    --bida-table-line: #dce5ef;
    --bida-table-surface: #ffffff;
    --bida-table-soft: #f4f7fb;
    --bida-table-blue: #136dec;
    --bida-table-blue-soft: #eaf2ff;
    --bida-table-green: #12643c;
    --bida-table-green-soft: #effaf4;
    --bida-table-amber: #d97706;
    --bida-table-amber-soft: #fef3c7;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 0 !important;
    color: var(--bida-table-ink);
    background: #f0f4f9 !important;
    color-scheme: light;
    height: 100% !important;
    overflow: hidden !important;
  }

  .restaurant-landing.operator-landing .operator-detail-divider {
    display: none !important;
  }

  /* Right Sidebar giỏ hàng / chi tiết bàn */
  .restaurant-landing.operator-landing .operator-table-detail {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 25 !important;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.02) !important;
    padding-bottom: 12px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-head {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .restaurant-landing.operator-landing .operator-detail-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.02em !important;
  }

  .restaurant-landing.operator-landing .operator-status-pill {
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
  }

  .restaurant-landing.operator-landing .operator-status-pill.status-playing {
    background: #effaf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
  }

  .restaurant-landing.operator-landing .operator-status-pill.status-empty {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
  }

  .restaurant-landing.operator-landing .operator-customer-pill {
    margin-left: auto !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
  }

  .restaurant-landing.operator-landing .operator-area-tag {
    width: 100% !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .restaurant-landing.operator-landing .operator-session-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .restaurant-landing.operator-landing .operator-session-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .restaurant-landing.operator-landing .operator-session-header strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  .restaurant-landing.operator-landing .operator-session-header .session-badge {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #16a34a !important;
  }

  .restaurant-landing.operator-landing .operator-session-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .restaurant-landing.operator-landing .operator-session-grid .session-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 12px !important;
  }

  .restaurant-landing.operator-landing .operator-session-grid .session-stat small {
    font-size: 11px !important;
    color: #64748b !important;
  }

  .restaurant-landing.operator-landing .operator-session-grid .session-stat span,
  .restaurant-landing.operator-landing .operator-session-grid .session-stat strong {
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .restaurant-landing.operator-landing .operator-session-grid .session-stat.highlight strong {
    color: #136dec !important;
  }

  .restaurant-landing.operator-landing .operator-session-warning {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    background: var(--bida-table-amber-soft, #fef3c7) !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
  }

  .restaurant-landing.operator-landing .operator-session-note {
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
  }

  .restaurant-landing.operator-landing .operator-package-note {
    font-size: 11.5px !important;
    color: #475569 !important;
    line-height: 1.4 !important;
  }

  .restaurant-landing.operator-landing .operator-billed-time {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }

  .restaurant-landing.operator-landing .operator-items-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-items .list-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    font-size: 12.5px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-items .list-row .item-qty {
    font-weight: 700 !important;
    color: #136dec !important;
    background: #e9f2ff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  .restaurant-landing.operator-landing .operator-detail-footer {
    padding: 16px 20px 8px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: auto !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary .bill-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    font-size: 12.5px !important;
    color: #64748b !important;
    box-sizing: border-box !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary .bill-line small,
  .restaurant-landing.operator-landing .operator-bill-summary .bill-line > span:first-child {
    flex: 0 1 auto !important;
    min-width: max-content !important;
    color: #64748b !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary .bill-line span,
  .restaurant-landing.operator-landing .operator-bill-summary .bill-line strong {
    font-weight: 600 !important;
    color: #1e293b !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary .bill-line.total {
    margin-top: 4px !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .restaurant-landing.operator-landing .operator-bill-summary .bill-line.total strong {
    font-size: 18px !important;
    color: #0f172a !important;
    font-weight: 800 !important;
  }

  .restaurant-landing.operator-landing .operator-footer-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .restaurant-landing.operator-landing .operator-secondary-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .restaurant-landing.operator-landing .operator-secondary-actions .btn {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #334155 !important;
    cursor: pointer !important;
    text-align: center !important;
  }

  .restaurant-landing.operator-landing .operator-pay-btn {
    width: 100% !important;
    border-radius: 10px !important;
    padding: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: #10b981 !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.15s ease !important;
  }

  .restaurant-landing.operator-landing .operator-pay-btn:hover {
    background: #059669 !important;
  }

  .restaurant-landing.operator-landing .operator-tables-pane {
    background: transparent;
    overflow-y: auto !important;
    height: 100% !important;
    min-width: 0 !important;
  }

  .restaurant-landing.operator-landing .operator-table-actions {
    display: none !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-landing {
    padding: 10px 16px 80px;
    gap: 12px;
    scroll-padding-block: 12px;
    scrollbar-gutter: stable;
    background: transparent;
  }

  /* Header Topbar thu gọn: Filter bar bên trái, ô search thu hẹp và đẩy sang phải */
  .restaurant-landing.operator-landing .pos-desktop-table-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0;
    margin-bottom: 8px !important;
    flex-wrap: nowrap !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar::before {
    display: none !important;
    content: none !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-filter-bar {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-search {
    order: 2 !important;
    width: 240px !important;
    max-width: 240px !important;
    min-width: 140px !important;
    flex: 0 1 240px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-shrink: 1 !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-search-input {
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    height: 34px !important;
    font-size: 12.5px !important;
    padding: 0 12px 0 32px !important;
  }

  .restaurant-landing.operator-landing .pos-tables-filter-pill {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 32px !important;
    white-space: nowrap !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-search-input {
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    height: 38px !important;
  }

  .restaurant-landing.operator-landing .pos-tables-filter-bar {
    flex-wrap: wrap;
    gap: 6px !important;
    overflow: visible !important;
    padding: 3px !important;
  }

  .restaurant-landing.operator-landing .pos-tables-filter-pill {
    min-height: 36px;
    padding: 7px 12px !important;
    border: 1px solid var(--bida-table-line) !important;
    border-radius: 9px !important;
    background: var(--bida-table-surface) !important;
    color: var(--bida-table-muted) !important;
    font-weight: 600 !important;
    transition: background-color .15s ease, border-color .15s ease !important;
  }

  .restaurant-landing.operator-landing .pos-tables-filter-pill:hover {
    border-color: #91b4e1 !important;
    background: var(--bida-table-blue-soft) !important;
  }

  .restaurant-landing.operator-landing .pos-tables-filter-pill.active {
    color: #ffffff !important;
    background: #136dec !important;
    border-color: #136dec !important;
  }

  .restaurant-landing.operator-landing .operator-area-group + .operator-area-group {
    margin-top: 16px;
  }

  .restaurant-landing.operator-landing .operator-area-group > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #eef2f7;
    color: var(--bida-table-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .restaurant-landing.operator-landing .operator-area-group .area-count {
    flex: 0 0 auto;
    margin-left: 0 !important;
    color: var(--bida-table-muted) !important;
    white-space: nowrap;
  }

  /* Columns follow the actual pane width, including the existing resize divider. */
  .restaurant-landing.operator-landing .operator-area-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)) !important;
    gap: 12px !important;
    align-items: stretch;
  }

  .restaurant-landing.operator-landing .operator-area-empty {
    margin: 0;
    border-color: var(--bida-table-line);
    border-radius: 10px;
    color: var(--bida-table-muted);
    background: var(--bida-table-surface);
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap {
    display: grid;
    grid-template-rows: 196px 34px;
    gap: 0;
    padding: 0 10px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 3px #172b4d08;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-playing) {
    background: var(--bida-table-green-soft);
    border-color: #c5e6d4;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-reserved) {
    background: var(--bida-table-amber-soft);
    border-color: #ecd7b2;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-locked) {
    background: #f4f5f7;
    border-color: #cbd3de;
  }

  /* Shared reference CSS fixes padding/height and shrinks the SVG to 32 x 24. */
  .restaurant-landing.operator-landing .operator-area-grid .pos-billiards-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* 162px content + 18px gaps + 16px padding = 196px selectable card.
     * Keep 38px for long prices/timer metadata, rather than shrinking the text. */
    grid-template-rows: 28px 76px minmax(38px, auto) 20px;
    gap: 6px 8px;
    align-items: center !important;
    align-content: start;
    min-width: 0;
    min-height: 0 !important;
    height: 196px !important;
    padding: 10px 0 6px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bida-table-ink);
    transform: none !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-header {
    display: contents;
  }

  /* Extra desktop-container specificity beats midnight's state-specific name
   * colors (including its html type selector), without a global theme override. */
  .restaurant-landing.operator-landing .pos-desktop-table-landing .operator-area-grid .pos-billiards-card-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0 !important;
    color: var(--bida-table-ink) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
    margin: 0 !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    white-space: nowrap;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-status.status-playing {
    background: #d4f3e1 !important;
    color: var(--bida-table-green) !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-status.status-empty,
  .restaurant-landing.operator-landing .pos-billiards-card-status.status-locked {
    background: #e8edf3 !important;
    color: #46556a !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-status.status-reserved {
    background: #fef3c7 !important;
    color: #d97706 !important;
  }

  .restaurant-landing.operator-landing .operator-area-grid .pos-billiards-table-visual {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 150px) !important;
    height: 76px !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Only the outer table SVG is scaled; nested lock artwork keeps its own size. */
  .restaurant-landing.operator-landing .pos-billiards-table-visual > svg {
    width: 100% !important;
    height: 100% !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-empty) .pos-billiards-table-visual {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-empty) .pos-billiards-table-visual svg {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:has(.status-empty) .pos-billiards-table-visual::after {
    content: "+" !important;
    position: absolute !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #94a3b8 !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-meta {
    grid-column: 1;
    grid-row: 3;
    flex-wrap: wrap;
    gap: 4px !important;
    margin: 0 !important;
    color: var(--bida-table-green) !important;
    font-size: 13px !important;
    font-variant-numeric: tabular-nums;
  }

  .restaurant-landing.operator-landing .pos-billiards-clock {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    /* Midnight sets an explicit important clock color, so inherit must also
     * win that declaration; the scoped meta row supplies the actual state color. */
    color: inherit !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-meta svg {
    width: 14px !important;
    height: 14px !important;
    color: currentColor !important;
  }

  .restaurant-landing.operator-landing .status-reserved .pos-billiards-card-meta {
    color: #d97706 !important;
  }

  .restaurant-landing.operator-landing :is(.status-empty, .status-locked) .pos-billiards-card-meta {
    color: var(--bida-table-ink) !important;
  }

  /* Preserve the readable light locked state instead of midnight's .75 opacity. */
  .restaurant-landing.operator-landing .operator-area-grid .pos-billiards-card.status-locked {
    opacity: 1 !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-detail {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .restaurant-landing.operator-landing .operator-card-customer {
    grid-column: 1 / -1;
    grid-row: 4;
    min-width: 0;
    color: var(--bida-table-muted);
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
  }

  /* CTA remains a separate native button, not an overlay on the select target. */
  .restaurant-landing.operator-landing .operator-open-table {
    position: static;
    width: 100%;
    min-height: 34px;
    padding: 5px 10px;
    border: 1px solid #136dec;
    border-radius: 8px;
    background: #136dec;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .restaurant-landing.operator-landing .operator-open-table.is-playing {
    background: #ffffff;
    color: #136dec;
    border: 1px solid #e2e8f0;
  }

  .restaurant-landing.operator-landing .operator-open-table.is-playing:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #136dec;
  }

  .restaurant-landing.operator-landing .operator-open-table:hover {
    background: #084fae;
    border-color: #084fae;
    color: #ffffff;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:hover {
    border-color: #91b4e1;
    box-shadow: 0 2px 8px #172b4d12;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap.is-selected {
    border-color: #136dec;
    box-shadow: 0 0 0 2px #136dec;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap .pos-billiards-card.is-selected {
    outline: 0;
  }

  .restaurant-landing.operator-landing :is(.pos-billiards-card, .operator-open-table, .pos-tables-filter-pill, .operator-table-actions .btn):focus-visible {
    outline: 2px solid #136dec !important;
    outline-offset: 2px;
    transform: none !important;
  }

  /* Higher specificity beats the later commercial command bar without touching
   * any header on sales/orders pages or viewports below the desktop boundary. */
  .pos-shell:has(.restaurant-landing.operator-landing) > .pos-table-command-shell.pos-topbar {
    --bida-command-ink: #172b4d;
    --bida-command-line: #dce5ef;
    --bida-command-blue: #136dec;
    /* Existing operator chrome places this header in an auto-sized user column.
     * Span its existing first row so search uses the full available desktop width. */
    grid-area: 1 / 1 / 2 / -1 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    background: #ffffff !important;
    border-bottom-color: var(--bida-command-line) !important;
    gap: 12px !important;
    padding-block: 6px !important;
    padding-inline: 16px !important;
    color-scheme: light;
  }

  .pos-shell:has(.restaurant-landing.operator-landing) .pos-table-command-slot .pos-tables-search-input {
    border-radius: 10px !important;
    border-color: #b8c7db !important;
    background: #ffffff !important;
    color: #172b4d !important;
    box-shadow: none !important;
  }

  .pos-shell:has(.restaurant-landing.operator-landing) .pos-table-command-slot .pos-tables-search-input::placeholder {
    color: #53657e !important;
  }

  .pos-shell:has(.restaurant-landing.operator-landing) .pos-table-command-slot .pos-tables-add-btn {
    border-radius: 10px !important;
    border-color: var(--bida-command-blue) !important;
    background: var(--bida-command-blue) !important;
    color: #ffffff !important;
  }

  .pos-shell:has(.restaurant-landing.operator-landing) .pos-table-command-shell :is(.pos-tables-search-input, .pos-tables-add-btn, .pos-table-manage-btn, .pos-tools-trigger):focus-visible {
    outline: 2px solid var(--bida-command-blue) !important;
    outline-offset: 2px;
  }

  /* Desktop Sidebar Layout: Full-height, ẩn topbar thừa theo mockup Stitch */
  html body div#app .pos-shell.has-desktop-sidebar:not(.pos-selling-shell):has(.operator-landing),
  html body div#app .pos-shell:has(.pos-desktop-sidebar):not(.pos-selling-shell):has(.operator-landing) {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas:
      "sidebar content" !important;
    height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    min-height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    max-height: calc(100dvh - var(--pwa-banner-height, 0px)) !important;
    overflow: hidden !important;
  }

  html body div#app .pos-shell.has-desktop-sidebar:has(.restaurant-landing.operator-landing) > .pos-topbar,
  html body div#app .pos-shell:has(.pos-desktop-sidebar):has(.restaurant-landing.operator-landing) > .pos-topbar,
  html body div#app .pos-shell.has-desktop-sidebar:has(.restaurant-landing.operator-landing) > .pos-table-command-shell.pos-topbar,
  html body div#app .pos-shell:has(.pos-desktop-sidebar):has(.restaurant-landing.operator-landing) > .pos-table-command-shell.pos-topbar {
    display: none !important;
  }

  html body div#app .pos-shell.has-desktop-sidebar > .pos-content,
  html body div#app .pos-shell:has(.pos-desktop-sidebar) > .pos-content {
    grid-area: content !important;
    overflow-y: auto !important;
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  .pos-desktop-sidebar {
    grid-area: sidebar !important;
    width: 240px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
  }

  .pos-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
  }

  .pos-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pos-brand-billiard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pos-brand-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
  }

  .pos-brand-badge {
    background: #136dec;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
  }

  .pos-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px;
    flex: 1;
  }

  .pos-sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .pos-sidebar-link:hover {
    background: #f8fafc;
    color: #0f172a;
  }

  .pos-sidebar-link.active {
    background: #e9f2ff !important;
    color: #136dec !important;
    font-weight: 600 !important;
    box-shadow: none !important;
  }

  .pos-sidebar-link:focus,
  .pos-sidebar-link:active {
    outline: none !important;
    box-shadow: none !important;
  }

  .pos-sidebar-link svg {
    flex-shrink: 0;
    color: #94a3b8;
  }

  .pos-sidebar-link.active svg {
    color: #136dec !important;
  }

  .pos-sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
  }

  .pos-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pos-sidebar-user .operator-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .pos-sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .pos-sidebar-user-info .user-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pos-sidebar-user-info .user-role {
    font-size: 11px;
    color: #64748b;
  }

  .btn-logout-icon {
    background: transparent;
    border: 0;
    color: #64748b;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-logout-icon:hover {
    color: #ef4444;
    background: #fee2e2;
  }

  /* Shortcuts Bar: Thu gọn các nút cho vừa vặn, mép phải dừng trước thẻ thanh toán của Right Sidebar */
  .pos-shortcuts-bar {
    position: fixed;
    bottom: 0;
    left: 240px;
    right: 340px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
    z-index: 40;
    box-sizing: border-box;
  }

  .pos-shortcuts-bar .shortcut-btn {
    flex: 1;
    height: 36px;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: filter 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
  }

  .pos-shortcuts-bar .shortcut-btn[data-shortcut="F1"] {
    background: #22c55e !important;
    color: #ffffff !important;
  }

  .pos-shortcuts-bar .shortcut-btn[data-shortcut="F2"] {
    background: #e8f2ff !important;
    color: #136dec !important;
  }

  .pos-shortcuts-bar .shortcut-btn[data-shortcut="F3"] {
    background: #fef3c7 !important;
    color: #78350f !important;
  }

  .pos-shortcuts-bar .shortcut-btn[data-shortcut="F4"] {
    background: #e2e8f0 !important;
    color: #334155 !important;
  }

  .pos-shortcuts-bar .shortcut-btn[data-shortcut="F5"] {
    background: #fee2e2 !important;
    color: #be123c !important;
  }

  /* Top Header chuẩn Stitch */
  .pos-table-command-shell.pos-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    height: 52px !important;
    padding: 0 24px !important;
  }

  .pos-table-command-shell .pos-table-command-meta {
    gap: 8px !important;
  }

  .pos-table-command-shell .pos-table-command-meta .header-icon,
  .pos-table-command-shell .pos-table-command-meta .pos-tools-trigger {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .pos-table-command-shell .pos-table-command-meta .operator-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pos-shortcuts-bar .shortcut-btn:hover {
    filter: brightness(0.95);
  }

  .pos-shortcuts-bar .shortcut-btn:active {
    transform: scale(0.98);
  }

  .pos-shortcuts-bar .shortcut-btn kbd {
    font-family: inherit;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 800;
  }

  /* P0: constrain every shortcut, including its intrinsic text width, to the
     actual table pane (fixed 240px desktop sidebar + 340px detail pane). */
  .restaurant-landing.operator-landing .pos-shortcuts-bar {
    left: 240px;
    right: 340px;
    width: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding-inline: 12px;
    overflow: hidden;
  }

  .restaurant-landing.operator-landing .pos-shortcuts-bar .shortcut-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-inline: 4px;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* P0: prevent the status chips and search from occupying the same row when
   the available desktop table pane cannot fit both without overlapping. */
@media (min-width: 1024px) and (max-width: 1519px) {
  .restaurant-landing.operator-landing .pos-desktop-table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-search {
    order: 1 !important;
    flex: 0 0 38px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-search-input {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-filter-bar {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .restaurant-landing.operator-landing .pos-shortcuts-bar .shortcut-btn {
    font-size: 11px;
    padding-inline: 2px;
    gap: 2px;
  }

  .restaurant-landing.operator-landing .pos-shortcuts-bar .shortcut-btn kbd {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .pos-desktop-sidebar,
  .pos-shortcuts-bar,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-shortcuts-hint,
  .cart-shortcuts-hint {
    display: none !important;
  }
}

/* P1 desktop-only: make table identity, elapsed time and charges readable. */
@media (min-width: 1024px) {
  .restaurant-landing.operator-landing .pos-billiards-card-wrap {
    grid-template-rows: minmax(206px, auto) 36px;
    padding: 0 10px 10px;
    min-width: 0;
  }

  .restaurant-landing.operator-landing .operator-area-grid .pos-billiards-card {
    height: 206px !important;
    min-height: 206px !important;
    grid-template-rows: minmax(28px, auto) 76px minmax(18px, auto) minmax(18px, auto) minmax(18px, auto) !important;
    gap: 4px 8px !important;
    align-content: start;
    overflow: visible !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-landing .operator-area-grid .pos-billiards-card-name {
    overflow-wrap: anywhere;
    white-space: normal !important;
    text-overflow: clip !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-status {
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: center;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-meta {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-width: 0;
    font-size: 13px !important;
    line-height: 1.35;
    align-self: start;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-detail {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.35;
    text-align: right !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    align-self: start;
    justify-self: stretch;
  }

  .restaurant-landing.operator-landing .operator-card-customer {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .restaurant-landing.operator-landing .pos-billiards-card-wrap:focus-within {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
  }

  .restaurant-landing.operator-landing .operator-open-table {
    min-height: 36px;
    font-size: 13px;
  }
}

/* Desktop action toolbar: compact search + accessible SVG settings button. */
@media (min-width: 1024px) {
  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-desktop-search-actions {
    display: flex !important;
    order: 2 !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-desktop-search-actions .pos-tables-search {
    order: 0 !important;
    width: 240px !important;
    max-width: 240px !important;
    min-width: 0 !important;
    flex: 0 1 240px !important;
    margin: 0 !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-desktop-search-actions .pos-tables-search-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .restaurant-landing.operator-landing .pos-table-settings-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #334155;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .restaurant-landing.operator-landing .pos-table-settings-btn:hover {
    background: #eaf2ff;
    border-color: #91b4e1;
    color: #136dec;
  }

  .restaurant-landing.operator-landing .pos-table-settings-btn:focus-visible {
    outline: 2px solid #136dec;
    outline-offset: 2px;
  }

  /* Match the right-side real checkout CTA to the five shortcuts in the bottom bar. */
  .restaurant-landing.operator-landing .operator-detail-footer {
    padding-bottom: 62px !important;
  }

  .restaurant-landing.operator-landing .operator-pay-btn {
    position: fixed !important;
    bottom: 8px !important;
    right: 16px !important;
    width: 308px !important;
    max-width: calc(100vw - 32px) !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    z-index: 45 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1519px) {
  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-desktop-search-actions {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-desktop-search-actions .pos-tables-search {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
  }

  .restaurant-landing.operator-landing .pos-desktop-table-toolbar .pos-tables-filter-bar {
    order: 2 !important;
  }
}

/* END BIDA89 DESKTOP TABLE LIST REFRESH */

/* Desktop entry keeps a meaningful title when resized below the landing breakpoint. */
@media (max-width: 640px) {
  .restaurant-landing.operator-landing .pos-tables-landing-view .pos-tables-head h1.pos-brand-title {
    display: block !important;
  }
}
/* --- BIDA Inline Table & Area Management (.table-inline-edit) --- */
.table-inline-edit {
  --bida-teal: #0f766e;
  --bida-teal-hover: #115e59;
  --bida-teal-soft: #f0fdfa;
  --bida-teal-border: #99f6e4;
  --bida-teal-ink: #134e4a;
}
.table-inline-edit .table-inline-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 10px 16px; margin-bottom: 12px; background: var(--bida-teal-soft);
  border: 1px solid var(--bida-teal-border); border-left: 4px solid var(--bida-teal);
  border-radius: 10px; box-sizing: border-box;
}
.table-inline-edit .table-inline-toolbar button,
.table-inline-edit .table-inline-toolbar .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid #cbd5e1;
  background: #ffffff; color: #0f172a; box-sizing: border-box; transition: all 0.15s ease;
}
.table-inline-edit .table-inline-toolbar button:hover,
.table-inline-edit .table-inline-toolbar .btn:hover { background: #f8fafc; border-color: #94a3b8; }
.table-inline-edit .table-inline-toolbar .btn-done,
.table-inline-edit .table-inline-toolbar [data-action="done"] {
  background: var(--bida-teal) !important; border-color: var(--bida-teal) !important; color: #ffffff !important;
}
.table-inline-edit .table-inline-toolbar .btn-done:hover,
.table-inline-edit .table-inline-toolbar [data-action="done"]:hover { background: var(--bida-teal-hover) !important; }
.table-inline-edit .table-inline-toolbar .btn-save-positions,
.table-inline-edit .table-inline-toolbar [data-action="savePositions"] {
  border-color: var(--bida-teal) !important; color: var(--bida-teal) !important;
}
.table-inline-edit .operator-table-detail {
  display: flex !important; flex-direction: column !important; padding: 0 !important; overflow-y: auto !important;
}
.table-inline-edit .operator-table-detail > :not(.table-inline-panel) { display: none !important; }
.table-inline-edit .table-inline-panel {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%;
  padding: 16px 20px; gap: 16px; background: #ffffff; box-sizing: border-box; overflow-y: auto;
}
.table-inline-edit .table-inline-panel h2,
.table-inline-edit .table-inline-panel h3 { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.table-inline-edit .table-inline-field { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; }
.table-inline-edit .table-inline-field label { font-size: 13px; font-weight: 600; color: #334155; }
.table-inline-edit .table-inline-field input:not([type="checkbox"]):not([type="radio"]),
.table-inline-edit .table-inline-field select,
.table-inline-edit .table-inline-field textarea {
  width: 100%; max-width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 8px 12px;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; color: #0f172a;
  font-size: 13.5px; box-sizing: border-box;
}
.table-inline-edit .table-inline-field textarea { min-height: 72px; height: auto; resize: vertical; }
.table-inline-edit .table-inline-field select { appearance: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-inline-edit .table-inline-field.checkbox,
.table-inline-edit .table-inline-field:has(input[type="checkbox"]) {
  display: flex; flex-direction: row; align-items: center; min-height: 44px;
}
.table-inline-edit .table-inline-field.checkbox label,
.table-inline-edit .table-inline-field label:has(input[type="checkbox"]) {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px;
  font-weight: 500; color: #1e293b; user-select: none;
}
.table-inline-edit .table-inline-field input[type="checkbox"] {
  width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important;
  margin: 0 !important; padding: 0 !important; cursor: pointer; accent-color: var(--bida-teal); flex-shrink: 0;
}
.table-inline-edit .table-inline-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid #f1f5f9;
}
.table-inline-edit .table-inline-actions button,
.table-inline-edit .table-inline-actions .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; box-sizing: border-box;
}
.table-inline-edit .table-inline-actions .btn-primary,
.table-inline-edit .table-inline-actions [type="submit"],
.table-inline-edit .table-inline-actions [data-action="save"] {
  background: var(--bida-teal); color: #ffffff; border: 1px solid var(--bida-teal);
}
.table-inline-edit .table-inline-actions .btn-secondary,
.table-inline-edit .table-inline-actions [data-action="cancel"] {
  background: #ffffff; color: #334155; border: 1px solid #cbd5e1;
}
.table-inline-edit .table-inline-notice {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; background: var(--bida-teal-soft);
  border: 1px solid var(--bida-teal-border); color: var(--bida-teal-ink); box-sizing: border-box;
}
.table-inline-edit .table-inline-move { display: inline-flex; align-items: center; gap: 4px; }
.table-inline-edit .table-inline-move button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; width: 44px; height: 44px;
  border-radius: 8px; border: 1px solid #cbd5e1; background: #ffffff; color: #334155; cursor: pointer;
}
.table-inline-edit .table-inline-card-item { position: relative !important; cursor: grab; }
.table-inline-edit .table-inline-card-item:active,
.table-inline-edit .table-inline-card-item.table-inline-dragging { cursor: grabbing !important; }
.table-inline-edit .table-inline-card-item .table-inline-drag {
  position: absolute !important; top: 6px !important; right: 6px !important;
  width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 6px !important; cursor: grab !important; color: #64748b !important;
  background: rgba(255, 255, 255, 0.9) !important; border: 1px solid #cbd5e1 !important;
  z-index: 10 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  touch-action: none; user-select: none; box-sizing: border-box;
}
.table-inline-edit .table-inline-card-item .table-inline-drag:active {
  cursor: grabbing !important; color: var(--bida-teal) !important;
}
.table-inline-edit .pos-billiards-card-name,
.table-inline-edit .restaurant-table-card strong {
  display: block !important; white-space: nowrap !important; overflow: hidden !important;
  text-overflow: ellipsis !important; min-width: 0 !important; width: calc(100% - 75px) !important;
  max-width: calc(100% - 75px) !important; line-height: 1.4 !important;
}
.table-inline-edit .operator-open-table,
.table-inline-edit .pos-table-cart-btn,
.table-inline-edit .pos-billiards-card-wrap > .operator-open-table {
  display: none !important;
}
.table-inline-edit .pos-billiards-table-visual,
.table-inline-edit .restaurant-table-card .pos-billiards-table-visual {
  width: 100% !important; max-width: 150px !important; height: 76px !important;
  max-height: 76px !important; aspect-ratio: auto !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.table-inline-edit .pos-billiards-table-visual svg,
.table-inline-edit .restaurant-table-card .pos-billiards-table-visual svg {
  width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important;
}
.table-inline-edit .pos-billiards-card-wrap.table-inline-selected,
.table-inline-edit .pos-billiards-card-wrap.is-selected,
.table-inline-edit .restaurant-table-card-wrap.table-inline-selected,
.table-inline-edit .table-inline-card-item.table-inline-selected,
.table-inline-edit .pos-billiards-card.table-inline-selected,
.table-inline-edit .table-inline-selected {
  outline: 2px solid var(--bida-teal) !important; outline-offset: 1px !important;
  border-color: var(--bida-teal) !important; box-shadow: 0 0 0 2px var(--bida-teal) !important;
}
.table-inline-edit .table-inline-area-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 80px; padding: 16px; border: 2px dashed var(--bida-teal-border);
  border-radius: 12px; background: rgba(240, 253, 250, 0.5); color: var(--bida-teal);
  font-size: 13px; font-weight: 600; text-align: center; box-sizing: border-box; cursor: pointer; margin: 8px 0;
}
.table-inline-edit .table-inline-area-drop:hover,
.table-inline-edit .table-inline-area-drop.is-dragover { background: #ccfbf1; border-color: var(--bida-teal); }
.table-inline-edit button:focus-visible,
.table-inline-edit input:focus-visible,
.table-inline-edit select:focus-visible,
.table-inline-edit textarea:focus-visible,
.table-inline-edit .table-inline-drag:focus-visible,
.table-inline-edit .table-inline-area-drop:focus-visible {
  outline: 2px solid var(--bida-teal) !important; outline-offset: 2px !important;
}
.table-inline-edit button:disabled,
.table-inline-edit [aria-disabled="true"],
.table-inline-edit input:disabled,
.table-inline-edit select:disabled {
  opacity: 0.55 !important; cursor: not-allowed !important; pointer-events: none !important;
}
.table-inline-edit [data-ready="false"] { opacity: 0.65; cursor: wait !important; }
:has(.table-inline-edit) .pos-shortcuts-bar,
:has(.table-inline-edit) .operator-pay-btn,
:has(.table-inline-edit) .operator-detail-footer {
  display: none !important;
}
@media (min-width: 1024px) {
  /* The header is display: contents; the name already has its own grid column. */
  .restaurant-landing.operator-landing.table-inline-edit .pos-desktop-table-landing .operator-area-grid .pos-billiards-card .pos-billiards-card-header .pos-billiards-card-name {
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    line-height: 1.4 !important;
  }
  .restaurant-landing.operator-landing.table-inline-edit .operator-table-detail,
  .table-inline-edit .restaurant-landing.operator-landing .operator-table-detail {
    display: flex !important; width: 340px !important; max-width: 340px !important; height: 100% !important; overflow-y: auto !important;
  }
}
@media (max-width: 1023px) {
  .restaurant-landing.operator-landing.table-inline-edit,
  .table-inline-edit .restaurant-landing.operator-landing,
  .table-inline-edit.restaurant-landing {
    display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100% !important; overflow-y: auto !important;
  }
  .table-inline-edit .operator-tables-pane { height: auto !important; overflow-y: visible !important; }
  .table-inline-edit .operator-tables-pane > .table-inline-toolbar { order: -2; }
  .table-inline-edit .operator-table-detail {
    display: flex !important; width: 100% !important; max-width: 100% !important; height: auto !important;
    margin-top: 16px !important; border: 1px solid #cbd5e1 !important; border-radius: 12px !important;
  }
  .table-inline-edit .table-inline-panel { height: auto !important; overflow-y: visible !important; }
}

/* ==========================================================================
   BIDA DESKTOP OPERATOR FIXES (SOL APPROVED)
   Scope: @media (min-width: 901px)
   Target: .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace)
   ========================================================================== */
@media (min-width: 901px) {
  /* Fix 1: Searchbar - resolve icon/input overlap, proper sizing and reserved icon space */
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search > svg,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search > svg {
    position: absolute !important;
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    color: var(--operator-muted, #6b8393) !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
    z-index: 2 !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search input,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search input {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 32px 0 36px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--operator-text, #1f3a4b) !important;
    font-size: 14px !important;
    line-height: 36px !important;
    outline: none !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search input::placeholder,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-catalog-searchbar .search input::placeholder {
    color: var(--operator-muted, #6b8393) !important;
    font-size: 14px !important;
  }

  /* Fix 2: Hide empty cart heading only, preserve populated controls */
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-heading:empty,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-heading:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  /* Fix 3: Hide quick toolbar and shortcuts hint on desktop */
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-quick-toolbar,
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-shortcuts-hint,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-quick-toolbar,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .cart-shortcuts-hint {
    display: none !important;
  }

  /* Fix 4: Show category rail footer at bottom & style cancel table action button */
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-rail,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-rail {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-list,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid var(--operator-border, #d6e1ea) !important;
    flex-shrink: 0 !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer [data-pos-action-item-key="cancelTable"],
  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) [data-pos-action-item-key="cancelTable"],
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer [data-pos-action-item-key="cancelTable"],
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) [data-pos-action-item-key="cancelTable"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid #efc9cf !important;
    background: var(--operator-danger-soft, #fff3f5) !important;
    color: var(--operator-danger, #b12d42) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table:hover,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table:hover {
    background: #fde8e8 !important;
    border-color: #f87171 !important;
    color: #991b1b !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table svg,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-cancel-table svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer .pos-table-list-action,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer .pos-table-list-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    background: var(--operator-soft, #f4f7fa) !important;
    color: var(--operator-text, #1f3a4b) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer .pos-table-list-action:hover,
  html .pos-selling-shell.pos-bida-cart-layout:not(.pos-edit-active):not(.table-cart-workspace) .pos-category-footer .pos-table-list-action:hover {
    background: var(--operator-accent-soft, #e8f2ff) !important;
    border-color: #9fc4ee !important;
    color: var(--operator-accent, #1769d2) !important;
  }
}

/* ==========================================================================
   BIDA DESKTOP OPERATOR HEADER (SOL APPROVED)
   ========================================================================== */
header.bida-selling-header,
html .pos-shell.pos-selling-shell.pos-retail > header.bida-selling-header,
html .pos-selling-shell.pos-retail > header.bida-selling-header,
html .pos-selling-shell > header.bida-selling-header {
  display: none !important;
}

@media (min-width: 901px) {
  /* Ẩn legacy header trên desktop */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header-legacy,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header-legacy,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header-legacy {
    display: none !important;
  }

  /* Header mới trên desktop */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 12px !important;
    gap: 12px !important;
    overflow: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: var(--operator-surface, #ffffff) !important;
    border-bottom: 1px solid var(--operator-border, #d6e1ea) !important;
    position: relative;
    z-index: 25;
  }

  /* 1. Brand Logo + Label */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-right: 12px !important;
    border-right: 1px solid var(--operator-border, #d6e1ea) !important;
    text-decoration: none !important;
    color: var(--operator-text, #1f3a4b) !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand img,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand svg {
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand span,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand strong {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 2. Table selector button - highlighted subtle blue */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-header-table,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-table {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid #bfdbfe !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    max-width: 220px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table .table-name,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table span:not(.chevron) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table svg,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-table .chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* 3. Status slot [data-bida-save-status] beside table */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-status:empty,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status]:empty {
    display: none !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header span.bida-header-status,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-status,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-status {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone]:not(:has([data-tone])) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 9999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone="saved"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone="saved"]:not(:has([data-tone])) {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone="saving"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone="saving"]:not(:has([data-tone])) {
    background: #eff6ff !important;
    color: #1e40af !important;
    border-color: #bfdbfe !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone="warning"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone="warning"]:not(:has([data-tone])) {
    background: #fffbeb !important;
    color: #92400e !important;
    border-color: #fde68a !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone="error"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status] [data-tone="offline"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone="error"]:not(:has([data-tone])),
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header [data-bida-save-status][data-tone="offline"]:not(:has([data-tone])) {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-color: #fecaca !important;
  }

  /* 4. Actions container right (margin-left: auto) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header div.bida-header-actions,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-actions,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-actions {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  /* Consistent 36-38px action buttons with 18px icons */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-receipts,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-options {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    width: auto !important;
    min-width: max-content !important;
    flex-shrink: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 8px !important;
    background: var(--operator-soft, #f4f7fa) !important;
    color: var(--operator-text, #1f3a4b) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-receipts:hover,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-options:hover {
    background: var(--operator-accent-soft, #e8f2ff) !important;
    border-color: #9fc4ee !important;
    color: var(--operator-accent, #1769d2) !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-receipts svg,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-options svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* 5. Account Details / Avatar dropdown */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header details.bida-header-account {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px 0 2px !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 9999px !important;
    background: var(--operator-soft, #f4f7fa) !important;
    color: var(--operator-text, #1f3a4b) !important;
    cursor: pointer !important;
    list-style: none !important;
    box-sizing: border-box !important;
    user-select: none !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar::-webkit-details-marker {
    display: none !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar:hover {
    border-color: #9fc4ee !important;
    background: var(--operator-accent-soft, #e8f2ff) !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar .avatar-circle,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar .initial {
    display: grid !important;
    place-items: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #0f766e !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar svg,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar .chevron {
    width: 14px !important;
    height: 14px !important;
    color: var(--operator-muted, #6b8393) !important;
    flex-shrink: 0 !important;
  }

  /* Account panel flyout */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 0 !important;
    width: 230px !important;
    background: #ffffff !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header details:not([open]) .bida-header-account-panel {
    display: none !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-name {
    padding: 2px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--operator-text, #1f3a4b) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-role {
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--operator-muted, #6b8393) !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-version {
    padding: 0 8px 6px !important;
    border-bottom: 1px solid var(--operator-border, #d6e1ea) !important;
    font-size: 10px !important;
    color: var(--operator-muted, #6b8393) !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel a,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel button {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--operator-text, #1f3a4b) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.12s ease !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel a:hover,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel button:hover {
    background: var(--operator-soft, #f4f7fa) !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-logout,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel [data-action="logout"] {
    color: #dc2626 !important;
    margin-top: 4px !important;
    border-top: 1px solid var(--operator-border, #d6e1ea) !important;
    padding-top: 8px !important;
    border-radius: 0 0 6px 6px !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-logout:hover,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel [data-action="logout"]:hover {
    background: #fee2e2 !important;
  }

  /* Focus rings */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button:focus-visible,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header a:focus-visible,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header summary:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 1px !important;
  }

  /* 6. Midnight Theme overrides */
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header {
    background: #102c3b !important;
    border-bottom-color: #2c4d60 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand {
    border-right-color: #2c4d60 !important;
    color: #e8f3f8 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-table {
    background: #173f52 !important;
    border-color: #2c5870 !important;
    color: #65d8ee !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-table:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-receipts,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-options,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar {
    background: #153747 !important;
    border-color: #2c4d60 !important;
    color: #e8f3f8 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-receipts:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-options:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header summary.bida-header-avatar:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel {
    background: #102c3b !important;
    border-color: #2c4d60 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-version {
    border-bottom-color: #2c4d60 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-name,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel a,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel button {
    color: #e8f3f8 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-role,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-version {
    color: #a5bac7 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel a:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel button:hover {
    background: #153747 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-logout,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel [data-action="logout"] {
    border-top-color: #2c4d60 !important;
    color: #ff8095 !important;
  }

  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel .bida-account-logout:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-account-panel [data-action="logout"]:hover {
    background: #3a2030 !important;
  }
}


/* ==========================================================================
   BIDA DESKTOP OPERATOR TABLE TABS (SOL APPROVED)
   Scope: @media (min-width: 901px)
   ========================================================================== */
@media (min-width: 901px) {
  /* 1. Brand Logo Only (28px image, remove text & border, keep margin 8px) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand {
    border-right: none !important;
    padding-right: 0 !important;
    margin-right: 8px !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand img,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand svg {
    width: 28px !important;
    height: 28px !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand span,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-brand strong {
    display: none !important;
  }

  /* 2. Table Tabs Viewport Navigation */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs::-webkit-scrollbar {
    height: 4px !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs::-webkit-scrollbar-thumb {
    background: var(--operator-border, #d6e1ea) !important;
    border-radius: 4px !important;
  }

  /* 3. Tab Container [data-table-id] (132px nominal, min 120px, max 140px, height 44px) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header div.bida-table-tab,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab {
    position: relative !important;
    flex: 0 0 132px !important;
    width: 132px !important;
    min-width: 120px !important;
    max-width: 140px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--operator-border, #d6e1ea) !important;
    border-radius: 8px !important;
    background: var(--operator-surface, #ffffff) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:hover {
    background: var(--operator-soft, #f4f7fa) !important;
    border-color: #cbd5e1 !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"],
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button.is-active),
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button[aria-current="page"]) {
    background: var(--operator-accent-soft, #eff6ff) !important;
    border-color: #bfdbfe !important;
    border-bottom: 2px solid var(--operator-accent, #1d4ed8) !important;
    box-shadow: inset 0 -2px 0 var(--operator-accent, #1d4ed8) !important;
  }

  /* 4. Tab Select Button (overrides legacy .bida-header-table styles with 100% width) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-header-table {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 4px 26px 4px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--operator-text, #1f3a4b) !important;
    box-sizing: border-box !important;
    text-align: left !important;
    cursor: pointer !important;
    flex-shrink: 1 !important;
    box-shadow: none !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-table-select,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-header-table,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"] button.bida-table-select,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select.is-active,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table.is-active,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button[aria-current="page"] {
    color: var(--operator-accent, #1d4ed8) !important;
    background: none !important;
    border: 0 !important;
  }

  /* 5. Tab Name & Live Clock Subline */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab span.table-name,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .table-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab small.bida-tab-time,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-time {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--operator-muted, #6b8393) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 6. Close Tab Button (sibling of select button, absolute right/top) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-tab-close,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close {
    position: absolute !important;
    right: 3px !important;
    top: 4px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: var(--operator-muted, #6b8393) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    transition: background-color 0.12s ease, color 0.12s ease !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--operator-danger, #b12d42) !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close svg {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 2 !important;
    flex-shrink: 0 !important;
  }

  /* 7. Tab Conflict Marker */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-conflict {
    position: absolute !important;
    right: 4px !important;
    bottom: 4px !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    border-radius: 50% !important;
    background: #d97706 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 14px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* 8. Add Tab Button (32-36px square) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: 1px dashed var(--operator-border, #d6e1ea) !important;
    border-radius: 8px !important;
    background: var(--operator-soft, #f4f7fa) !important;
    color: var(--operator-muted, #6b8393) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:hover,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add:hover {
    background: var(--operator-accent-soft, #eff6ff) !important;
    border-color: var(--operator-accent, #1769d2) !important;
    color: var(--operator-accent, #1769d2) !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }

  /* 9. Keyboard Accessibility: Focus-visible rings */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:focus-visible,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
  }
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select:focus-visible {
    outline: 2px solid #2563eb !important;
    outline-offset: -3px !important;
  }

  /* 10. Midnight Theme Scoped Overrides */
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header div.bida-table-tab,
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header div.bida-table-tab,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab {
    background: #132b3a !important;
    border-color: #2c4d60 !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active,
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"],
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button.is-active),
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button[aria-current="page"]),
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"],
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button.is-active),
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab:has(button[aria-current="page"]) {
    background: #153b56 !important;
    border-color: #2c5870 !important;
    border-bottom: 2px solid #7dd3fc !important;
    box-shadow: inset 0 -2px 0 #7dd3fc !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select {
    color: #e2edf5 !important;
  }
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-header-table,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"] button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select.is-active,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table.is-active,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab.is-active button.bida-header-table,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab[aria-current="page"] button.bida-table-select,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select.is-active,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-header-table.is-active {
    color: #7dd3fc !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab small.bida-tab-time,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-time,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab small.bida-tab-time,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-time {
    color: #a8bdcc !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close {
    color: #a8bdcc !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ff8095 !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add {
    background: #153b45 !important;
    border-color: #2c4d60 !important;
    color: #a8bdcc !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:hover,
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:hover,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:hover,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-tab-add:hover {
    background: #1d4b5c !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs::-webkit-scrollbar-thumb,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs::-webkit-scrollbar-thumb {
    background: #2c4d60 !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-tab-close:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 2px !important;
  }
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html[data-ui-style="midnight"] .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab button.bida-table-select:focus-visible,
  html[data-ui-style="midnight"] .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-table-tab .bida-table-select:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: -3px !important;
  }
}

/* Compact content-driven desktop table cards: customer, elapsed time, total and POS link. */
@media (min-width: 1024px) {
  .operator-landing .operator-area-grid {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 12px;
  }
  .operator-landing .pos-billiards-card-wrap {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0;
    position: relative !important;
  }
  .operator-landing .operator-area-grid .pos-billiards-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 10px 12px !important;
    text-align: left !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  .operator-landing .pos-desktop-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 22px;
    min-width: 0;
  }
  .operator-landing .pos-desktop-card-head .pos-billiards-card-name {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .operator-landing .pos-desktop-card-dot {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
  }
  .operator-landing .pos-desktop-card-dot.status-playing { background: #22a06b; }
  .operator-landing .pos-desktop-card-dot.status-reserved { background: #e7ab3a; }
  .operator-landing .pos-desktop-card-divider {
    display: block;
    height: 1px;
    margin: 6px 0 8px !important;
    background: var(--line, #dce4eb);
  }
  .operator-landing .pos-desktop-card-info { display: grid; gap: 4px !important; min-width: 0; }
  .operator-landing .pos-desktop-card-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--text, #334155);
  }
  .operator-landing .pos-desktop-card-line svg {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    color: var(--muted, #87929d);
  }
  .operator-landing .pos-desktop-card-customer {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .operator-landing .pos-desktop-card-line .pos-billiards-clock {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
  }
  /* Running-table time is stronger than customer, but softer than the total. */
  .operator-landing .pos-desktop-card-line .pos-billiards-clock[data-table-clock-id] .clock-time {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #176b61 !important;
    font-variant-numeric: tabular-nums !important;
  }
  .operator-landing .pos-desktop-card-line:has(.pos-billiards-clock[data-table-clock-id]) > svg { color: #457971 !important; }
  html[data-ui-style="midnight"] .operator-landing .pos-desktop-card-line .pos-billiards-clock[data-table-clock-id] .clock-time { color: #82e3b1 !important; }
  .operator-landing .pos-desktop-card-footer {
    display: flex;
    align-items: center;
    margin-top: auto !important;
    min-height: 28px !important;
    padding-right: 80px !important;
  }
  .operator-landing .pos-desktop-card-price {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    color: inherit !important;
  }
  .operator-landing:not(.table-inline-edit) .pos-billiards-card-wrap > .operator-open-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 10px;
    bottom: 10px;
    height: 28px;
    min-height: 28px;
    min-width: 70px;
    padding: 0 8px;
    border-radius: 6px;
    background: rgba(34, 160, 107, 0.12);
    color: #13835a;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
  }
  .operator-landing:not(.table-inline-edit) .pos-billiards-card-wrap > .operator-open-table:hover {
    background: rgba(34, 160, 107, 0.22);
  }
  .operator-landing:not(.table-inline-edit) .pos-billiards-card-wrap > .operator-open-table:focus-visible {
    outline: 2px solid #13835a;
    outline-offset: 2px;
  }
  html[data-ui-style="midnight"] .operator-landing .pos-desktop-card-line { color: #d1dbe6; }
  html[data-ui-style="midnight"] .operator-landing .pos-desktop-card-price { color: #f1f5f9 !important; }
  html[data-ui-style="midnight"] .operator-landing .pos-desktop-card-divider { background: #334155; }
  html[data-ui-style="midnight"] .operator-landing .operator-open-table { color: #67d6a4; }
}


/* Desktop operator's compact content-driven table cards with legacy specificity overrides. */
@media (min-width: 1024px) {
  .restaurant-landing.operator-landing .operator-area-grid {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)) !important;
    gap: 12px !important;
  }
  .restaurant-landing.operator-landing .pos-billiards-card-wrap {
    display: block !important;
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: none !important;
    padding: 0 !important;
    position: relative !important;
  }
  .restaurant-landing.operator-landing .operator-area-grid .pos-billiards-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .restaurant-landing.operator-landing:not(.table-inline-edit) .pos-billiards-card-wrap > .operator-open-table {
    display: inline-flex !important;
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    min-width: 70px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    border: 0 !important;
    background: rgba(34, 160, 107, .12) !important;
    color: #13835a !important;
  }
  .restaurant-landing.operator-landing:not(.table-inline-edit) .pos-billiards-card-wrap > .operator-open-table:hover {
    background: rgba(34, 160, 107, .22) !important;
  }
  .restaurant-landing.operator-landing .pos-desktop-card-footer {
    display: flex !important;
    align-items: center !important;
    margin-top: auto !important;
    min-height: 28px !important;
    padding-right: 80px !important;
  }
  .restaurant-landing.operator-landing .pos-desktop-table-landing .operator-area-grid .pos-desktop-card-head .pos-billiards-card-name {
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* Desktop POS Operator Refinements (>=1024px) */
@media (min-width: 1024px) {
  /* 1. Content-sized checkout dialog; preserve a sticky footer and internal viewport scrolling. */
  dialog[open]:has(#checkout-form),
  dialog[open]:has(.checkout-dialog),
  #modal[open]:has(#checkout-form),
  #modal[open]:has(.checkout-dialog) {
    /* Let the checkout fit its content instead of reserving 850px of empty space. */
    height: fit-content !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 48px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #checkout-form,
  .checkout-dialog {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #checkout-form .checkout-scroll-body,
  .checkout-dialog .checkout-scroll-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  #checkout-form .checkout-footer,
  .checkout-dialog .checkout-footer,
  #checkout-form .checkout-fixed-top,
  .checkout-dialog .checkout-fixed-top {
    flex-shrink: 0 !important;
  }

  #checkout-form .checkout-items-scroll,
  .checkout-dialog .checkout-items-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(430px, 47dvh) !important;
    overflow-y: auto;
  }

  /* Two equal-height desktop columns: products fill the QR area;
     totals and order note share the last row and align at their bottoms.
     Preserve the form and payment method event handlers. */
  html #checkout-form .checkout-scroll-body {
    grid-template-rows: max-content auto max-content !important;
    align-content: start !important;
    align-items: stretch !important;
    gap: 12px 16px !important;
  }

  #checkout-form .checkout-payment-column {
    display: contents !important;
  }

  #checkout-form .checkout-items-section {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }

  #checkout-form .checkout-payment-column > .checkout-methods {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #checkout-form .checkout-payment-column > :is(#checkout-cash-section, #checkout-transfer-section, #checkout-debt-section):not([hidden]) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: stretch !important;
    min-width: 0 !important;
  }

  /* Enlarge the transfer image without distorting the bank QR code. */
  #checkout-form .checkout-transfer-qr-box {
    min-height: min(355px, 42dvh);
    margin: 0;
    padding: 12px;
  }
  #checkout-form .checkout-transfer-qr-img {
    width: min(100%, 340px);
    height: auto;
    max-height: min(340px, 38dvh);
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
  #checkout-form:has(#checkout-transfer-section:not([hidden])) .checkout-items-scroll {
    min-height: min(280px, 31dvh);
  }

  #checkout-form .checkout-payment-column > .checkout-order-note {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #checkout-form .checkout-payment-column > .note {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  #checkout-form .checkout-summary,
  .checkout-dialog .checkout-summary {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: end !important;
    margin-top: 0 !important;
    min-width: 0 !important;
  }

  /* 2. Add Tab button immediately follows the last tab while actions stay right */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs,
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header nav.bida-table-tabs,
  header.bida-selling-header nav.bida-table-tabs {
    flex: 0 1 auto !important;
    max-width: fit-content !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add,
  html .pos-shell.pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header button.bida-tab-add,
  header.bida-selling-header button.bida-tab-add {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) > header.bida-selling-header .bida-header-status:not(:empty),
  html .pos-selling-shell:not(.pos-edit-active) > header.bida-selling-header .bida-header-status:not(:empty),
  header.bida-selling-header .bida-header-status:not(:empty) {
    margin-left: auto !important;
  }

  /* 3. Scanner SVG and button has no border and no background */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"],
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-scan-btn,
  .pos-catalog-searchbar button[data-action="scan"],
  .pos-catalog-searchbar .pos-scan-btn,
  .pos-header-search .scan-action {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"]:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn:hover,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-scan-btn:hover,
  .pos-catalog-searchbar button[data-action="scan"]:hover,
  .pos-catalog-searchbar .pos-scan-btn:hover {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0.8;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .scan-action svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar button[data-action="scan"] svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-barcode-scan-btn svg,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .pos-catalog-searchbar .pos-scan-btn svg,
  .pos-catalog-searchbar button[data-action="scan"] svg,
  .pos-catalog-searchbar .pos-scan-btn svg,
  .pos-header-search .scan-action svg {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* 4. Compact hourly cart row to text height, cart quantity +/- approx 28px, note toggle/input ~24-28px */
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly,
  .cart-line.cart-line-hourly {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 8px !important;
    margin: 2px 0 4px 0 !important;
    gap: 8px !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-info,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-info {
    gap: 2px !important;
    line-height: 1.25 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-title,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-title {
    gap: 2px !important;
    line-height: 1.25 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-meta,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-meta {
    gap: 2px !important;
    line-height: 1.25 !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box {
    gap: 1px !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box .cart-line-total-price b,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line.cart-line-hourly .cart-hourly-amount-box .cart-line-total-price b {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
  }

  /* Compact non-hourly (product) cart row to text/action height <=100px */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly),
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly),
  html .pos-selling-shell:not(.pos-edit-active) .cart-line:not(.cart-line-hourly),
  .cart-line:not(.cart-line-hourly) {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr) 96px !important;
    grid-template-rows: auto !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    align-items: start !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 3px !important;
    border-bottom: 1px solid #e3eaf0 !important;
    box-sizing: border-box !important;
  }

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

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-item-content > strong,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > strong {
    width: 100% !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-item-content > small,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-item-content > small {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-note-text,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-note-text,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line-note-text,
  .cart-line-note-text {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    color: #64748b !important;
    font-style: italic !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-total,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-total,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-total,
  .cart-line:not(.cart-line-hourly) .cart-line-total {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-qty,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-qty,
  html .pos-selling-shell:not(.pos-edit-active) .cart-line:not(.cart-line-hourly) .cart-line-qty,
  .cart-line:not(.cart-line-hourly) .cart-line-qty {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: end !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line-qty .qty,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line .qty,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line-qty .qty,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .qty {
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    overflow: hidden !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 span,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line .qty button,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-line .qty span,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line-qty .qty button,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line-qty .qty span,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .qty button,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .qty span {
    width: 21px !important;
    min-width: 21px !important;
    max-width: 21px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 20px !important;
    flex: 0 0 21px !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .note-toggle {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 1px 3px !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    gap: 2px !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle svg,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .note-toggle svg {
    width: 10px !important;
    max-width: 10px !important;
    height: 10px !important;
    max-height: 10px !important;
    flex-shrink: 0 !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle span,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .note-toggle span {
    font-size: 10.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .note-toggle::before,
  html .pos-selling-shell:not(.pos-edit-active) .cart .cart-line .note-toggle::before {
    display: none !important;
    content: none !important;
  }

  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-note,
  .cart-line .cart-note {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  /* 5. Cart thumbnail aligns and spans name, price, note (three lines) */
  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb,
  html .pos-selling-shell:not(.pos-edit-active) .cart-thumb,
  .cart-line:not(.cart-line-hourly) .cart-thumb {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 50px !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

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

  html .pos-shell.pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb b,
  html .pos-selling-shell.pos-retail:not(.pos-edit-active) .cart-thumb b,
  .cart-line:not(.cart-line-hourly) .cart-thumb b {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* 6. Embedded Shared Cart inside Desktop Operator Table Detail Sidebar (>=1024px) */
@media (min-width: 1024px) {
  .restaurant-landing.operator-landing .operator-table-detail.operator-cart-detail {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .restaurant-landing.operator-landing .operator-cart-header.operator-detail-head {
    flex: 0 0 auto !important;
    padding: 12px 14px !important;
  }

  .restaurant-landing.operator-landing .operator-cart-header .operator-cart-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px !important;
    font-weight: 750 !important;
    color: var(--text, #1e293b) !important;
  }

  /* Full-height flex container for embedded shared cart */
  .restaurant-landing.operator-landing:not(.table-inline-edit) .operator-shared-cart.pos-selling-shell {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* The table header and shared customer picker already provide this context. */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell :is(.restaurant-pos-context, .cart-heading, .pos-category-rail, .pos-column-divider, .pos-products, .pos-catalog-searchbar, .pos-mobile-cart-summary) {
    display: none !important;
  }

  /* Beat the sales grid (including coupled-layout inline cart placement). */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell > .pos-layout {
    display: grid !important;
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* Cart card fills height cleanly */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell > .pos-layout > aside.card.cart {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  /* Cart body contains customer picker and scrollable items */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 14px 6px !important;
    overflow: hidden !important;
  }

  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .customer-picker {
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Internal cart items scrolling */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-items {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding-right: 4px !important;
  }

  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell :is(.cart-quick-toolbar, .cart-shortcuts-hint, .cart-status) {
    flex-shrink: 0 !important;
  }

  /* Visible checkout footer pinned at bottom */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-checkout-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border-top: 1px solid var(--line, #e2e8f0) !important;
    background: #ffffff !important;
  }

  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-checkout-footer .pos-action-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Keep the real POS action in flow, not the legacy fixed operator-pay overlay. */
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-checkout-footer .pos-action-checkout {
    position: static !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 6px !important;
    font-size: 13px !important;
  }

  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .pos-action-checkout strong {
    font-size: 16px !important;
    white-space: nowrap;
  }

  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .pos-action-checkout .pos-checkout-label,
  .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .pos-action-checkout .pos-checkout-label span {
    font-size: 13px !important;
  }

  /* Midnight theme support */
  html[data-ui-style="midnight"] .restaurant-landing.operator-landing .operator-table-detail.operator-cart-detail {
    background: #0f172a !important;
    border-left-color: #1e293b !important;
  }

  html[data-ui-style="midnight"] .restaurant-landing.operator-landing .operator-cart-header .operator-cart-title {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-bottom-color: #1e293b !important;
  }

  html[data-ui-style="midnight"] .restaurant-landing.operator-landing .operator-shared-cart.pos-selling-shell .cart-checkout-footer {
    background: #0f172a !important;
    border-top-color: #1e293b !important;
  }
}