/* Kasir mobile — satu sumber kebenaran tinggi keranjang & grid produk (v9) */

@media (max-width: 768px) {
  :root {
    --kasir-mobile-nav-h: 52px;
    --kasir-mobile-cart-collapsed-h: 72px;
    --kasir-mobile-cart-expanded-max: calc(100dvh - var(--kasir-mobile-nav-h) - env(safe-area-inset-bottom, 0px));
    --kasir-mobile-cart-offset: var(--kasir-mobile-cart-collapsed-h);
  }

  body.kasir-mobile-cart-hidden {
    --kasir-mobile-cart-offset: 0px;
  }

  /* Produk tidak menembus bottom nav / strip keranjang */
  main.pos-layout > .product-panel {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  main.pos-layout > .product-panel > .product-grid:not(.product-grid--detail),
  #productGrid.product-grid:not(.product-grid--detail) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    padding-bottom: calc(
      12px + var(--kasir-mobile-nav-h) + var(--kasir-mobile-cart-offset) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    scroll-padding-bottom: calc(
      8px + var(--kasir-mobile-nav-h) + var(--kasir-mobile-cart-offset) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
    overflow-x: hidden !important;
    contain: paint !important;
  }

  #productGrid .product-img {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    max-height: clamp(72px, 24vw, 100px) !important;
    background: var(--bg-elevated) !important;
  }

  #productGrid .product-img img.product-photo {
    object-fit: cover !important;
    object-position: center !important;
  }

  #productGrid .product-info {
    flex: 0 0 auto !important;
    display: flex !important;
    overflow: hidden !important;
  }

  #productGrid.product-grid.product-grid--detail {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #productGrid.product-grid--detail .product-card.product-row {
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #productGrid.product-grid--detail .product-row-thumb {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-height: 52px !important;
  }

  #productGrid.product-grid--detail .product-row-body {
    min-width: 0 !important;
    padding: 6px 8px !important;
  }

  #productGrid.product-grid--detail .product-row .product-name {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  #productGrid.product-grid--detail .product-row-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #productGrid.product-grid--detail .product-row .product-price,
  #productGrid.product-grid--detail .product-row .product-stock {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  #productGrid.product-grid--detail .product-row .product-price {
    font-size: 12px !important;
    flex: 1 1 auto !important;
  }

  #productGrid.product-grid--detail .product-row .product-stock {
    font-size: 9px !important;
    flex: 0 1 auto !important;
    max-width: 42% !important;
    text-align: right !important;
  }

  main.pos-layout > .product-panel > .product-grid:not(.product-grid--detail) .product-card,
  #productGrid.product-grid:not(.product-grid--detail) .product-card {
    padding: 6px !important;
    gap: 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  main.pos-layout > .product-panel > .product-grid:not(.product-grid--detail) .product-name,
  #productGrid.product-grid:not(.product-grid--detail) .product-name {
    font-size: 11px !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 2 !important;
  }

  main.pos-layout > .product-panel > .product-grid:not(.product-grid--detail) .product-price,
  #productGrid.product-grid:not(.product-grid--detail) .product-price {
    font-size: 12px !important;
    margin-top: 2px !important;
  }

  /* Bottom nav di atas konten scroll */
  .sidebar {
    background: var(--bg-panel) !important;
    isolation: isolate !important;
    z-index: 450 !important;
    overflow: hidden !important;
  }

  /* Keranjang: collapsed vs expanded */
  body:not(.cart-expanded) main.pos-layout > .cart-panel {
    max-height: var(--kasir-mobile-cart-collapsed-h) !important;
  }

  body:not(.cart-expanded) main.pos-layout > .cart-panel.cart-panel--empty {
    max-height: 58px !important;
  }

  body:not(.cart-expanded) main.pos-layout > .cart-panel.cart-panel--empty .cart-mobile-strip {
    padding: 2px 10px 4px !important;
  }

  body:not(.cart-expanded) main.pos-layout > .cart-panel.cart-panel--empty .cart-handle-wrap {
    padding: 2px 0 0 !important;
  }

  body:not(.cart-expanded) main.pos-layout > .cart-panel.cart-panel--empty .cart-preview-bar {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }

  .cart-mobile-strip {
    padding: 4px 10px 6px !important;
  }

  .cart-handle-wrap {
    padding: 4px 0 2px !important;
  }

  .cart-preview-bar {
    min-height: 40px !important;
    padding: 8px 10px !important;
  }

  body.cart-expanded main.pos-layout > .cart-panel {
    max-height: var(--kasir-mobile-cart-expanded-max) !important;
  }

  body.kasir-mobile-cart-hidden:not(.cart-expanded) main.pos-layout > .cart-panel {
    visibility: hidden !important;
    pointer-events: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  body.kasir-mobile-cart-hidden.cart-expanded main.pos-layout > .cart-panel {
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    max-height: var(--kasir-mobile-cart-expanded-max) !important;
  }

  body.cart-expanded main.pos-layout > .cart-panel {
    overflow: hidden !important;
    contain: layout style paint !important;
  }

  body.cart-expanded main.pos-layout > .cart-panel .cart-panel-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.cart-expanded .cart-items {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  body.cart-expanded .cart-totals {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding: 6px 16px 0 !important;
    border-top: 1px solid var(--border) !important;
  }

  body.cart-expanded .cart-totals::after {
    display: none !important;
    content: none !important;
  }

  body.cart-expanded .totals-grid {
    gap: 2px !important;
    padding: 4px 0 6px !important;
  }

  body.cart-expanded .quick-cash {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  body.cart-expanded .quick-cash-btn {
    min-width: 0 !important;
    font-size: clamp(8px, 2.4vw, 10px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.cart-expanded .process-row {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
    margin: 0 -16px 0 !important;
    width: calc(100% + 32px) !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--bg-panel) !important;
    border-top: 1px solid var(--border-light) !important;
    z-index: 5 !important;
  }

  body.cart-expanded .cart-header,
  body.cart-expanded .customer-row,
  body.cart-expanded .order-meta-panel {
    flex-shrink: 0 !important;
  }

  body.cart-expanded .trx-number {
    font-size: clamp(13px, 3.8vw, 16px) !important;
    word-break: break-all !important;
  }

  /* Bottom nav: 7 item — icon-only di layar sempit */
  .sidebar {
    height: var(--kasir-mobile-nav-h) !important;
  }

  main.pos-layout > .cart-panel {
    bottom: calc(var(--kasir-mobile-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .nav-item span:not(.nav-badge) {
    font-size: 8px !important;
    line-height: 1 !important;
    max-width: 11vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nav-item i {
    font-size: 17px !important;
  }

  .nav-item,
  .nav-tutup {
    min-height: var(--kasir-mobile-nav-h) !important;
    padding: 2px 0 !important;
    gap: 1px !important;
  }

  /* A11y: sentuh minimal 44px untuk elemen aksi utama di layar sentuh. */
  .cat-tab,
  .category-tab,
  .quick-cash-btn,
  .process-row button,
  .cart-preview-bar {
    min-height: 44px !important;
  }

  .process-row button {
    min-width: 44px !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .modal-overlay,
  #successModal,
  #numpadModal,
  #choosePaymentModal,
  #customerModal,
  #receiptModal {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .modal-overlay .modal,
  .success-modal,
  .numpad-modal,
  .choose-payment-modal {
    max-width: min(100vw - 24px, 420px) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 420px) {
  .nav-item span:not(.nav-badge) {
    display: block !important;
    opacity: 1 !important;
  }

  .nav-item {
    gap: 0 !important;
    padding: 4px 0 !important;
  }

  .nav-item i {
    font-size: 20px !important;
  }

  body.cart-expanded .quick-cash-btn {
    font-size: 8px !important;
    padding: 6px 1px !important;
  }
}

/* Landscape HP / tablet kecil — grid lebih lebar, sheet lebih pendek */
@media (max-width: 896px) and (orientation: landscape) {
  :root {
    --kasir-mobile-nav-h: 48px;
    --kasir-mobile-cart-collapsed-h: 54px;
    --topbar-mobile-stack-h: 88px;
    --topbar-mobile-single-h: 48px;
    --kasir-mobile-cart-expanded-max: calc(100dvh - var(--kasir-mobile-nav-h) - env(safe-area-inset-bottom, 0px));
  }

  main.pos-layout > .product-panel > .product-grid,
  #productGrid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding-bottom: calc(
      8px + var(--kasir-mobile-nav-h) + var(--kasir-mobile-cart-offset) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  #productGrid .product-img {
    max-height: clamp(56px, 18vh, 88px) !important;
  }

  body:not(.cart-expanded) main.pos-layout > .cart-panel.cart-panel--empty {
    max-height: 48px !important;
  }

  .topbar.is-stacked,
  .topbar:has(.topbar-center:not(:empty)) {
    height: var(--topbar-mobile-stack-h) !important;
    min-height: var(--topbar-mobile-stack-h) !important;
  }

  .topbar.is-stacked + .pos-layout,
  .topbar:has(.topbar-center:not(:empty)) + .pos-layout {
    margin-top: var(--topbar-mobile-stack-h) !important;
    height: calc(100dvh - var(--topbar-mobile-stack-h)) !important;
    max-height: calc(100dvh - var(--topbar-mobile-stack-h)) !important;
  }
}