/*
 * UBUZIMA+ Quantity / Price Confirmation V3
 *
 * Scope is intentionally limited to the existing POS quantity
 * confirmation dialog.
 *
 * No DOM movement.
 * No JavaScript.
 * No application shell selectors.
 * No navigation/cart/dashboard selectors.
 */

body .pos-quantity-dialog-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10030 !important;

  width: 100vw !important;
  min-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  padding:
    max(14px, env(safe-area-inset-top))
    16px
    max(14px, env(safe-area-inset-bottom))
    16px !important;

  box-sizing: border-box !important;

  background:
    rgba(15, 23, 42, 0.52) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;
}

body .pos-quantity-dialog {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  width:
    min(
      560px,
      calc(100vw - 32px)
    ) !important;

  max-width:
    min(
      560px,
      calc(100vw - 32px)
    ) !important;

  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  max-height:
    calc(100dvh - 32px) !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;

  align-items: stretch !important;
  align-content: start !important;

  gap: 12px !important;

  margin: 0 !important;
  padding: 16px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  box-sizing: border-box !important;

  border:
    1px solid
    rgba(15, 118, 110, 0.16) !important;

  border-radius: 20px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 28px 80px
    rgba(15, 23, 42, 0.30) !important;
}

body .pos-quantity-dialog__header {
  grid-column:
    1 / -1 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: start !important;

  gap: 8px !important;

  margin: 0 !important;

  padding:
    0
    0
    5px !important;

  border: 0 !important;
}

/*
 * QUANTITY
 *
 * Existing quantity input panel remains authoritative.
 * Product Master / Selling Unit descriptive content is hidden.
 */
body .pos-quantity-selling-unit-hero {
  grid-column: 1 !important;

  min-width: 0 !important;
  min-height: 118px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  place-items: center !important;
  align-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 14px !important;

  box-sizing: border-box !important;

  border:
    1px solid
    rgba(15, 118, 110, 0.14) !important;

  border-radius: 16px !important;

  background:
    #f8fbfa !important;

  box-shadow:
    none !important;
}

body
.pos-quantity-selling-unit-hero
> :not(.pos-quantity-input-panel) {
  display: none !important;
}

body .pos-quantity-input-panel {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  justify-items: center !important;
  align-items: center !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  text-align: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  box-sizing: border-box !important;
}

body .pos-quantity-input-panel * {
  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * PRICE
 */
body .pos-quantity-price-override-card {
  grid-column: 2 !important;

  min-width: 0 !important;
  min-height: 118px !important;

  display: grid !important;

  place-items: center !important;
  align-content: center !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 14px !important;

  box-sizing: border-box !important;

  border:
    1px solid
    rgba(15, 118, 110, 0.14) !important;

  border-radius: 16px !important;

  background:
    #f8fbfa !important;

  box-shadow:
    none !important;

  text-align: center !important;
}

body .pos-quantity-input-panel label,
body .pos-quantity-price-override-card label {
  width: 100% !important;

  display: grid !important;

  justify-items: center !important;

  gap: 9px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    #475569 !important;

  font-size:
    0.78rem !important;

  font-weight:
    900 !important;

  line-height:
    1.15 !important;

  text-align:
    center !important;
}

body .pos-quantity-input-panel input,
body .pos-quantity-price-override-card input {
  display: block !important;

  visibility: visible !important;
  opacity: 1 !important;

  width:
    min(
      210px,
      100%
    ) !important;

  max-width:
    210px !important;

  min-width:
    0 !important;

  height:
    46px !important;

  min-height:
    46px !important;

  margin:
    0 auto !important;

  padding:
    8px 11px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(15, 118, 110, 0.22) !important;

  border-radius:
    12px !important;

  background:
    #ffffff !important;

  color:
    #10211b !important;

  font-size:
    1rem !important;

  font-weight:
    900 !important;

  line-height:
    1.1 !important;

  text-align:
    center !important;
}

body .pos-quantity-input-panel input:focus,
body .pos-quantity-price-override-card input:focus {
  outline:
    3px solid
    rgba(15, 118, 110, 0.12) !important;

  border-color:
    #0f766e !important;
}

/*
 * Confirmation is Quantity + Price only.
 */
body .pos-quantity-numeric-keypad,
body .pos-quantity-readonly-grid,
body .pos-quantity-total-strip {
  display: none !important;
}

body .pos-quantity-input-panel small,
body .pos-quantity-price-override-card small {
  display: none !important;
}

body .pos-quantity-dialog footer,
body .pos-quantity-dialog [class*="actions"] {
  grid-column:
    1 / -1 !important;

  display:
    flex !important;

  justify-content:
    flex-end !important;

  align-items:
    center !important;

  gap:
    8px !important;

  margin:
    0 !important;

  padding:
    4px 0 0 !important;
}

body .pos-quantity-dialog button {
  min-height:
    38px !important;

  height:
    38px !important;

  padding:
    0 14px !important;

  border-radius:
    11px !important;

  font-size:
    0.78rem !important;

  font-weight:
    900 !important;
}

/*
 * Tablet/mobile stack.
 */
@media (max-width: 767px) {
  body .pos-quantity-dialog-backdrop {
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom))
      10px !important;
  }

  body .pos-quantity-dialog {
    width:
      min(
        420px,
        calc(100vw - 20px)
      ) !important;

    max-width:
      min(
        420px,
        calc(100vw - 20px)
      ) !important;

    max-height:
      calc(100dvh - 20px) !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      10px !important;

    padding:
      13px !important;

    border-radius:
      18px !important;
  }

  body .pos-quantity-dialog__header,
  body .pos-quantity-selling-unit-hero,
  body .pos-quantity-price-override-card,
  body .pos-quantity-dialog footer,
  body .pos-quantity-dialog [class*="actions"] {
    grid-column:
      1 / -1 !important;
  }

  body .pos-quantity-selling-unit-hero,
  body .pos-quantity-price-override-card {
    min-height:
      100px !important;

    padding:
      12px !important;
  }

  body .pos-quantity-input-panel input,
  body .pos-quantity-price-override-card input {
    width:
      min(
        240px,
        100%
      ) !important;

    max-width:
      240px !important;

    height:
      44px !important;

    min-height:
      44px !important;
  }
}

@media (max-width: 430px) {
  body .pos-quantity-dialog {
    width:
      calc(100vw - 16px) !important;

    max-width:
      calc(100vw - 16px) !important;

    padding:
      11px !important;
  }
}