/* ===== Send Message + T&C on one line ===== */
.pos-sms-tc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pos-sms-tc-left {
  flex: 1;
  min-width: 0;
}
.pos-sms-tc-right {
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .pos-sms-tc-row {
    flex-wrap: nowrap;
  }
  .pos-sms-tc-left {
    flex: 1;
    min-width: 0;
  }
  .pos-sms-tc-right {
    flex-shrink: 0;
    padding-left: 8px;
  }
}

/* ===== POS PRODUCT CARDS – balanced layout, long name ellipsis, one line ===== */

/* Product grid: equal columns and spacing */
.search_div .pos-product-col {
  margin-bottom: 10px;
}
.search_div .row {
  margin-left: -5px;
  margin-right: -5px;
}
.search_div .pos-product-col {
  padding-left: 5px;
  padding-right: 5px;
}

/* Card: fixed height, flex column, balanced */
.pos-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  max-height: 180px;
  height: 100%;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pos-product-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pos-product-card:active {
  transform: scale(0.98);
}

/* Badges at top */
.pos-product-card .item_box_top_badges {
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 4px 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.pos-product-card .item_box_qty_badge {
  font-size: 10px;
  padding: 2px 6px;
  font-weight: bold;
}
.pos-product-card .item_box_batch_badge {
  font-size: 11px;
}

/* Body: flex grow, flex column, image + name + price */
.pos-product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 28px 8px 8px 8px;
  text-align: center;
}
.pos-product-card-image {
  flex-shrink: 0;
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.pos-product-card .pos-product-img {
  max-height: 70px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
/* Name: one line, ellipsis when long – larger text (color set by instock/outstock) */
.pos-product-card-name {
  flex-shrink: 0;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 2px;
  margin-bottom: 4px;
  min-height: 1.35em;
}
/* Price: one line, no wrap */
.pos-product-card-price {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Light green in-stock cards: dark text for contrast */
.pos-product-card.pos-product-instock .pos-product-card-name {
  color: #1a1a1a;
}
.pos-product-card.pos-product-instock .pos-product-card-price {
  color: #2e7d32;
}

/* Out-of-stock: grey card, dark text */
.pos-product-card.pos-product-outstock .pos-product-card-name {
  color: #333;
}
.pos-product-card.pos-product-outstock .pos-product-card-price {
  color: #555;
}

/* Product cards: same size on mobile as desktop – force same dimensions on small screens */
@media (max-width: 991px) {
  .pos-products-panel .pos-product-card,
  .search_div .pos-product-card {
    min-height: 160px !important;
    max-height: 180px !important;
  }
  .pos-products-panel .pos-product-card-image,
  .search_div .pos-product-card-image {
    height: 70px !important;
  }
  .pos-products-panel .pos-product-card .pos-product-img,
  .search_div .pos-product-card .pos-product-img {
    max-height: 70px !important;
  }
  .pos-products-panel .pos-product-card-name,
  .search_div .pos-product-card-name {
    font-size: 15px !important;
  }
  .pos-products-panel .pos-product-card-price,
  .search_div .pos-product-card-price {
    font-size: 16px !important;
  }
}

/* ===== MOBILE: Cart Tab | Product Tab (two separate screens) ===== */
/* Tab bar: one line only (Cart | Products); only on mobile (xs/sm) */
.pos-mobile-tab-bar {
  width: 100%;
  margin-bottom: 10px;
  padding: 0 5px;
}
.pos-mobile-tab-bar .nav-tabs {
  border-bottom: 2px solid #3c8dbc;
  display: flex;
  flex-wrap: nowrap;
}
.pos-mobile-tab-bar .nav-tabs > li {
  flex: 1;
  white-space: nowrap;
  min-width: 0;
}
.pos-mobile-tab-bar .nav-tabs > li.pos-tab-sep {
  flex: 0 0 auto;
  padding: 10px 6px 0;
  color: #999;
  font-weight: bold;
  cursor: default;
  pointer-events: none;
  border: none;
  background: transparent;
}
.pos-mobile-tab-bar .nav-tabs > li.pos-tab-sep a {
  display: none;
}
.pos-mobile-tab-bar .nav-tabs > li > a {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  text-align: center;
  padding: 10px 8px;
}
.pos-mobile-tab-bar .nav-tabs > li.active > a,
.pos-mobile-tab-bar .nav-tabs > li.active > a:hover {
  color: #3c8dbc;
  border-color: #3c8dbc #3c8dbc transparent;
  border-width: 2px 2px 0;
}
/* ===== POS: Header #06296E + CART/PRODUCT tabs always visible on scroll ===== */
/* Header color and sticky/fixed behavior (POS page only) */
body:has(.content.pos-page) .main-header,
body:has(.content.pos-page) .main-header .navbar {
  background-color: #06296E !important;
  border-color: #06296E !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-brand,
body:has(.content.pos-page) .main-header .navbar .nav > li > a,
body:has(.content.pos-page) .main-header .navbar .navbar-nav > li > a {
  color: #fff !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-toggle .icon-bar {
  background-color: #fff !important;
}

/* ===== POS: Navbar alignment – icon + text aligned, consistent spacing ===== */
body:has(.content.pos-page) .main-header .navbar .navbar-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 15px 12px !important;
  min-height: 50px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-nav > li > a i {
  flex-shrink: 0 !important;
  width: 1.25em !important;
  text-align: center !important;
  vertical-align: middle !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-nav > li > a span {
  flex-shrink: 0 !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  padding: 15px 15px 15px 0 !important;
  min-height: 50px !important;
  font-size: 1.1em !important;
}
/* Right menu: same alignment, consistent item spacing */
body:has(.content.pos-page) .main-header .navbar .navbar-custom-menu .navbar-nav > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 15px 10px !important;
  min-height: 50px !important;
  white-space: nowrap !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-custom-menu .navbar-nav > li > a img.user-image {
  margin: 0 4px 0 0 !important;
}
body:has(.content.pos-page) .main-header .navbar .navbar-custom-menu .navbar-nav > li > a .label {
  margin-left: 4px !important;
}
/* Left nav (Sales List, Customers, etc.): slight extra padding between items */
body:has(.content.pos-page) .main-header .navbar .collapse.navbar-collapse .navbar-nav > li + li {
  margin-left: 2px !important;
}
@media (max-width: 991px) {
  body:has(.content.pos-page) .main-header .navbar .navbar-nav > li > a,
  body:has(.content.pos-page) .main-header .navbar .navbar-custom-menu .navbar-nav > li > a {
    padding: 12px 10px !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
  }
}

/* On mobile: only one panel visible; Cart ends at action buttons, Products = products only */
/* Mobile: (1) header + CART/PRODUCT tab bar and (2) action bar stay visible on scroll */
@media (max-width: 991px) {
  /* Main app header: FIXED so it stays visible on Cart tab when page scrolls (same as Product tab) */
  body.layout-top-nav .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
  }
  /* Content must start below fixed header – reserve space so nothing is hidden */
  body:has(.content.pos-page) .content-wrapper {
    padding-top: 50px !important;
  }
  /* Ensure position:fixed is relative to viewport – reset transform on ancestors (POS only) */
  .content-wrapper:has(.content.pos-page),
  .pos-page,
  .pos-page .pos-main-row,
  .pos-page .pos-cart-panel,
  .pos-page .pos-cart-panel .box-primary,
  .pos-page .pos-cart-panel .box-primary form {
    transform: none !important;
  }
  /* CART | PRODUCT tab bar: fixed below header – always visible on scroll */
  .pos-mobile-tab-bar {
    position: fixed !important;
    top: 50px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1025 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #06296E !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .pos-mobile-tab-bar .nav-tabs {
    border-bottom-color: rgba(255,255,255,0.3) !important;
  }
  .pos-mobile-tab-bar .nav-tabs > li > a {
    color: rgba(255,255,255,0.85) !important;
  }
  .pos-mobile-tab-bar .nav-tabs > li > a:hover {
    color: #fff !important;
    border-color: transparent transparent rgba(255,255,255,0.4) !important;
  }
  .pos-mobile-tab-bar .nav-tabs > li.active > a,
  .pos-mobile-tab-bar .nav-tabs > li.active > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
    border-color: transparent transparent #fff !important;
    border-width: 2px 2px 0 !important;
  }
  .pos-mobile-tab-bar .nav-tabs > li.pos-tab-sep {
    color: rgba(255,255,255,0.5) !important;
    pointer-events: none;
  }
  /* Content below fixed tab bar */
  .pos-page .pos-main-row {
    padding-top: 52px !important;
  }
  .pos-mobile-tab-pane {
    display: none !important;
    width: 100%;
    max-width: 100%;
  }
  .pos-mobile-tab-pane.pos-mobile-active {
    display: block !important;
  }
  .pos-cart-panel,
  .pos-products-panel {
    width: 100%;
    max-width: 100%;
  }
  /* (2) Action buttons: fixed at bottom – full width, no left/right gap */
  .pos-cart-panel .pos-action-buttons-row {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1025 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    background: #f4f4f4 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  }
  .pos-cart-panel .pos-action-buttons-row.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .pos-cart-panel .pos-action-buttons-row .pos-action-buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  .pos-cart-panel .pos-action-buttons-row .pos-action-btn-wrap {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .pos-cart-panel .pos-action-buttons-row .pos-action-btn-wrap:nth-child(odd) {
    padding-left: 0 !important;
  }
  .pos-cart-panel .pos-action-buttons-row .pos-action-btn-wrap:nth-child(even) {
    padding-right: 0 !important;
  }
  /* Space so content isn't hidden under fixed bars */
  .pos-cart-panel .box-primary {
    padding-bottom: 120px !important;
  }
  .pos-products-panel .box-body {
    padding-bottom: 20px;
  }
  /* Cart tab: keep same field/column sizes as desktop – allow horizontal scroll only */
  .pos-cart-panel .col-sm-12:has(.items_table) {
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .pos-cart-panel .items_table {
    min-width: 900px !important;
    table-layout: fixed;
  }
  .pos-cart-panel .items_table th,
  .pos-cart-panel .items_table td {
    white-space: nowrap;
  }
  .pos-cart-panel .items_table td:nth-child(1) {
    white-space: normal;
    min-width: 120px;
  }

  /* Cart tab: hide product grid in cart panel */
  .pos-cart-panel .search_div,
  .pos-cart-panel .pos-product-col,
  .pos-cart-panel .pos-product-card {
    display: none !important;
  }
}
/* Desktop: both panels visible side by side; hide tab bar (visible-xs visible-sm handles display) */
@media (min-width: 992px) {
  .pos-mobile-tab-pane {
    display: block !important;
  }
  .pos-mobile-tab-bar {
    display: none !important;
  }
}

/* ===== Mobile: totals alignment + action buttons 2 per row ===== */
@media (max-width: 991px) {
  .pos-totals-footer .pos-totals-row {
    margin-left: -5px;
    margin-right: -5px;
  }
  .pos-totals-footer .pos-total-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 10px;
    margin-bottom: 4px;
    background: rgba(0,0,0,0.03);
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .pos-totals-footer .pos-total-item .pos-total-label {
    margin: 0;
    font-weight: 600;
    flex-shrink: 0;
  }
  .pos-totals-footer .pos-total-item .pos-total-value {
    text-align: right;
    margin-left: 8px;
    word-break: break-all;
  }
  .pos-totals-footer .pos-totals-row {
    display: flex;
    flex-wrap: wrap;
  }
  .pos-totals-footer .pos-totals-row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  /* Action buttons: 2 per row on mobile */
  .pos-action-buttons {
    margin-top: 8px;
  }
  .pos-action-buttons .pos-action-btn-wrap {
    margin-bottom: 8px;
  }
  .pos-action-buttons .pos-action-btn-wrap .btn {
    padding: 12px 8px;
  }
}

/* ===== Action buttons: fixed/sticky at bottom, cart side (mobile + desktop) ===== */
.pos-cart-panel .pos-action-buttons-row {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: #f4f4f4;
  padding: 10px 0;
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}
.pos-cart-panel .box-footer {
  padding-bottom: 5px;
}
/* Ensure cart content has space above sticky bar when scrolled */
.pos-cart-panel .box-primary {
  padding-bottom: 0;
}

/* ===== Payment Modal (Multiple/Cash) – readable text & amounts (desktop + mobile) ===== */
/* Desktop: improve visibility of labels and amounts */
#multiple-payments-modal .modal-body label,
#multiple-payments-modal .modal-body .control-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
#multiple-payments-modal .modal-body .form-control {
  font-size: 14px;
}
#multiple-payments-modal .box-solid.bg-blue .box-body .row span:first-child {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
#multiple-payments-modal .box-solid.bg-blue .box-body .row span.custom-font-size {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
#multiple-payments-modal .box-solid.bg-blue .box-body .row.bg-red span.custom-font-size,
#multiple-payments-modal .box-solid.bg-blue .box-body .row.bg-orange span.custom-font-size {
  font-size: 19px;
}
/* Quick amount buttons */
#multiple-payments-modal .pos-payment-quick-actions .btn {
  font-size: 13px;
  padding: 6px 12px;
  margin-right: 6px;
  margin-bottom: 6px;
}

@media (max-width: 991px) {
  #multiple-payments-modal .modal-dialog {
    width: 95%;
    max-width: 100%;
    margin: 10px auto;
  }
  #multiple-payments-modal .modal-body {
    padding: 12px 15px;
  }
  /* Stack left (payments) and right (totals) on mobile */
  #multiple-payments-modal .modal-body > .row > .col-md-8,
  #multiple-payments-modal .modal-body > .row > .col-md-4 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  /* Top section: advance + coupon full width on mobile */
  #multiple-payments-modal .box-solid.bg-default .col-md-4,
  #multiple-payments-modal .box-solid.bg-default .col-md-8 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #multiple-payments-modal .box-solid.bg-default .form-control,
  #multiple-payments-modal .box-solid.bg-default label {
    font-size: 14px;
  }
  /* Payment rows: full width fields so amount/type not squeezed */
  #multiple-payments-modal .payments_div .col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #multiple-payments-modal .payments_div .box-body .row > [class*="col-"] {
    margin-bottom: 10px;
  }
  #multiple-payments-modal .payments_div input.form-control.payment,
  #multiple-payments-modal .payments_div select.form-control,
  #multiple-payments-modal .payments_div textarea.form-control {
    font-size: 16px;
    min-height: 42px;
    padding: 8px 12px;
  }
  /* Totals box: label + amount on one line, amounts readable and not squeezed */
  #multiple-payments-modal .box-solid.bg-blue .box-body .row .col-md-12 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
  }
  #multiple-payments-modal .box-solid.bg-blue .box-body .row.bg-orange .col-md-12 {
    border-bottom: none;
  }
  #multiple-payments-modal .box-solid.bg-blue .box-body .row span:first-child {
    flex: 0 0 auto;
    font-size: 14px;
    text-align: left;
    max-width: 55%;
  }
  #multiple-payments-modal .box-solid.bg-blue .box-body .row span.custom-font-size {
    flex: 1 1 auto;
    min-width: 80px;
    font-size: 17px !important;
    font-weight: bold;
    text-align: right;
    word-break: break-all;
    padding-left: 10px;
  }
  #multiple-payments-modal .modal-footer {
    padding: 12px 15px;
    flex-wrap: wrap;
    gap: 8px;
  }
  #multiple-payments-modal .modal-footer .btn {
    font-size: 15px;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  #multiple-payments-modal .modal-dialog {
    width: 100%;
    margin: 5px auto;
  }
  #multiple-payments-modal .modal-body {
    padding: 10px 12px;
  }
  #multiple-payments-modal .box-solid.bg-blue .box-body .row span:first-child {
    font-size: 13px;
  }
  #multiple-payments-modal .box-solid.bg-blue .box-body .row span.custom-font-size {
    font-size: 16px !important;
  }
}
