/* =========================================================
   ALFAA ERP - SALE / PURCHASE SERIAL MODAL SCROLL FIX
   File: assets/css/serial-modal-scroll-fix.css

   Scope:
   - New/Edit Sale Invoice serial modal
   - New/Edit Purchase Invoice serial modal

   Purpose:
   - Restore reliable mouse wheel / trackpad / touch scrolling.
   - Keep header and footer stable.
   - Allow long selected/available serial lists to scroll smoothly.
   ========================================================= */

/* =========================================================
   MODAL FRAME
   ========================================================= */
.purchase-page #serialNumberModal .serial-modal,
.sales-page #serialNumberModal .serial-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(660px, calc(100vw - 32px)) !important;
  max-height: min(86dvh, 760px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.purchase-page #serialNumberModal .purchase-modal-header,
.purchase-page #serialNumberModal .purchase-modal-footer,
.sales-page #serialNumberModal .sales-modal-header,
.sales-page #serialNumberModal .sales-modal-footer {
  flex: 0 0 auto !important;
}

/* =========================================================
   SCROLLABLE MODAL CONTENT
   ========================================================= */
.purchase-page #serialNumberModal .purchase-modal-body,
.sales-page #serialNumberModal .sales-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .38) transparent !important;
}

/* =========================================================
   INNER SERIAL LISTS
   ========================================================= */
.purchase-page #serialNumberModal .serial-list,
.sales-page #serialNumberModal .serial-list,
.sales-page #serialNumberModal .serial-available-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  min-height: 76px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(100, 116, 139, .40) transparent !important;
  padding-right: 5px !important;
}

.purchase-page #serialNumberModal .serial-list {
  max-height: min(34vh, 290px) !important;
}

.sales-page #serialNumberModal .serial-list {
  max-height: min(25vh, 190px) !important;
}

.sales-page #serialNumberModal .serial-available-list {
  max-height: min(29vh, 235px) !important;
  min-height: 96px !important;
}

/* =========================================================
   PROFESSIONAL LOW-PROFILE SCROLLBAR
   Visible only inside serial-management modal for usability.
   ========================================================= */
.purchase-page #serialNumberModal .purchase-modal-body::-webkit-scrollbar,
.purchase-page #serialNumberModal .serial-list::-webkit-scrollbar,
.sales-page #serialNumberModal .sales-modal-body::-webkit-scrollbar,
.sales-page #serialNumberModal .serial-list::-webkit-scrollbar,
.sales-page #serialNumberModal .serial-available-list::-webkit-scrollbar {
  display: block !important;
  width: 6px !important;
  height: 6px !important;
}

.purchase-page #serialNumberModal .purchase-modal-body::-webkit-scrollbar-track,
.purchase-page #serialNumberModal .serial-list::-webkit-scrollbar-track,
.sales-page #serialNumberModal .sales-modal-body::-webkit-scrollbar-track,
.sales-page #serialNumberModal .serial-list::-webkit-scrollbar-track,
.sales-page #serialNumberModal .serial-available-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.purchase-page #serialNumberModal .purchase-modal-body::-webkit-scrollbar-thumb,
.purchase-page #serialNumberModal .serial-list::-webkit-scrollbar-thumb,
.sales-page #serialNumberModal .sales-modal-body::-webkit-scrollbar-thumb,
.sales-page #serialNumberModal .serial-list::-webkit-scrollbar-thumb,
.sales-page #serialNumberModal .serial-available-list::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(100, 116, 139, .36) !important;
}

.purchase-page #serialNumberModal .purchase-modal-body::-webkit-scrollbar-thumb:hover,
.purchase-page #serialNumberModal .serial-list::-webkit-scrollbar-thumb:hover,
.sales-page #serialNumberModal .sales-modal-body::-webkit-scrollbar-thumb:hover,
.sales-page #serialNumberModal .serial-list::-webkit-scrollbar-thumb:hover,
.sales-page #serialNumberModal .serial-available-list::-webkit-scrollbar-thumb:hover {
  background: rgba(5, 150, 105, .58) !important;
}

/* =========================================================
   SMALL-SCREEN SAFETY
   ========================================================= */
@media (max-height: 680px) {
  .purchase-page #serialNumberModal .serial-modal,
  .sales-page #serialNumberModal .serial-modal {
    max-height: calc(100dvh - 20px) !important;
  }

  .purchase-page #serialNumberModal .serial-list,
  .sales-page #serialNumberModal .serial-list {
    max-height: 145px !important;
  }

  .sales-page #serialNumberModal .serial-available-list {
    max-height: 160px !important;
  }
}


/* =========================================================
   V2 - HIDE SERIAL MODAL SCROLLBAR VISUALLY ONLY
   Scrolling remains active by mouse wheel, trackpad and touch.
   ========================================================= */
.purchase-page #serialNumberModal .purchase-modal-body,
.purchase-page #serialNumberModal .serial-list,
.sales-page #serialNumberModal .sales-modal-body,
.sales-page #serialNumberModal .serial-list,
.sales-page #serialNumberModal .serial-available-list {
  -ms-overflow-style: none !important;  /* Internet Explorer / legacy Edge */
  scrollbar-width: none !important;     /* Firefox */
}

.purchase-page #serialNumberModal .purchase-modal-body::-webkit-scrollbar,
.purchase-page #serialNumberModal .serial-list::-webkit-scrollbar,
.sales-page #serialNumberModal .sales-modal-body::-webkit-scrollbar,
.sales-page #serialNumberModal .serial-list::-webkit-scrollbar,
.sales-page #serialNumberModal .serial-available-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}