/* =========================================================
   PREMIUM SAAS ERP SALES PAGE
   Modern Glassmorphism + Card-Based Layout + Sticky Sidebar
   ========================================================= */
.sales-page {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #34d399;
  --primary-soft: #ecfdf5;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);

  /* Header height */
  --header-height: 72px;
  /* Footer height */
  --footer-height: 72px;
}

/* ==================== PAGE ROOT ==================== */
.sales-page * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sales-page {
  width: 100%;
  font-family: var(--font-main);
  color: var(--gray-800);
  min-height: 100vh;
  background: #f8fafc;
  padding-bottom: 0;
}

/* ==================== HEADER ==================== */
.sales-page .sales-header-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  padding: 0 32px;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.sales-page .sales-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sales-page .sales-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gray-100);
  border: none;
  color: var(--gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-page .sales-back-btn:hover {
  background: var(--gray-200);
  transform: translateX(-2px);
}

.sales-page .sales-header-title-wrap h1 {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gray-800) 0%, var(--gray-600) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.sales-page .sales-number-badge {
  background: var(--primary-soft);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ==================== TOP STATS BAR (HIDDEN) ==================== */
.sales-page .sales-top-stats {
  display: none;
  /* Hidden - stats now in sidebar summary */
}

.sales-page .top-stat-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 16px 24px;
  min-width: 140px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.sales-page .top-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sales-page .top-stat-card span {
  display: block;
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 500;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sales-page .top-stat-card strong {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-800);
}

/* ==================== MAIN LAYOUT ==================== */
.sales-page .sales-main-layout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 28px;
  align-items: start;
  padding: 28px 32px;
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

.sales-page .sales-content-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 56px);
  padding-right: 8px;
}

/* ==================== STICKY SIDEBAR ==================== */
.sales-page .sales-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 28px);
  width: 380px;
  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: fit-content;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sales-page .sales-sidebar::-webkit-scrollbar {
  width: 6px;
}

.sales-page .sales-sidebar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.sales-page .sales-sidebar::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.sales-page .sales-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* ==================== CARDS ==================== */
.sales-page .neo-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}

.sales-page .neo-card:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

.sales-page .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px 20px 28px;
  border-bottom: 1px solid var(--gray-200);
  background: rgba(255, 255, 255, 0.5);
}

.sales-page .card-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sales-page .card-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 20px;
  flex-shrink: 0;
}

.sales-page .card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--gray-800);
}

.sales-page .card-header p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--gray-500);
}

.sales-page .card-body {
  padding: 24px 28px;
}

/* ==================== FORM STYLES ==================== */
.sales-page .form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sales-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sales-page .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.sales-page .form-group label .required {
  color: var(--danger);
}

.sales-page .form-group input,
.sales-page .form-group select,
.sales-page .form-group textarea {
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 14px;
  font-size: 14px;
  transition: all 0.2s ease;
  background: white;
  font-family: inherit;
}

.sales-page .form-group input:focus,
.sales-page .form-group select:focus,
.sales-page .form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.sales-page .form-group input.readonly-input {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: not-allowed;
}

/* ==================== ITEMS GRID (MODERN CARD-BASED) ==================== */
.sales-page .sales-items-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sales-page .item-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.sales-page .item-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.sales-page .item-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}

.sales-page .item-number {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.sales-page .delete-item-btn {
  background: rgba(239, 68, 68, 0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: var(--danger);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sales-page .delete-item-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: scale(1.05);
}

.sales-page .item-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.sales-page .item-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sales-page .item-field.span-2 {
  grid-column: span 2;
}

.sales-page .item-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sales-page .item-field input,
.sales-page .item-field select {
  padding: 10px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 12px;
  font-size: 13px;
  transition: all 0.2s ease;
  background: white;
}

.sales-page .item-field input:focus,
.sales-page .item-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.sales-page .item-card-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}

.sales-page .item-total {
  text-align: right;
}

.sales-page .item-total span {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
  text-transform: uppercase;
}

.sales-page .item-total strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

/* ==================== ACTION BUTTONS ==================== */
.sales-page .items-actions-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sales-page .btn {
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
}

.sales-page .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  box-shadow: var(--shadow-sm);
}

.sales-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.sales-page .btn-secondary {
  background: white;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-700);
}

.sales-page .btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.sales-page .btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.sales-page .btn-ghost:hover {
  background: var(--gray-100);
}

/* ==================== SIDEBAR SUMMARY ==================== */
.sales-page .summary-card {
  background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
}

.sales-page .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.sales-page .summary-line span {
  color: var(--gray-600);
  font-size: 14px;
  font-weight: 500;
}

.sales-page .summary-line strong {
  color: var(--gray-800);
  font-weight: 700;
  font-size: 15px;
  word-break: break-word;
  text-align: right;
}

.sales-page .summary-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gray-200), transparent);
  margin: 16px 0;
}

.sales-page .input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sales-page .input-row label {
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 500;
}

.sales-page .input-row input {
  width: 120px;
  padding: 8px 12px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  text-align: right;
  font-size: 13px;
  transition: all 0.2s ease;
}

.sales-page .input-row input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.sales-page .grand-total-card {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 20px;
  padding: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.sales-page .grand-total-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.sales-page .grand-total-card span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
}

.sales-page .grand-total-card strong {
  color: white;
  font-size: 20px;
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}

/* ==================== PAYMENT SECTION ==================== */
.sales-page .payment-card {
  background: linear-gradient(135deg, #fff 0%, var(--gray-50) 100%);
}

.sales-page .payment-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  margin-top: 12px;
}

.sales-page .payment-result.paid {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.sales-page .payment-result.paid strong {
  color: var(--success);
}

.sales-page .payment-result.due {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.sales-page .payment-result.due strong {
  color: var(--danger);
}

.sales-page .payment-result span {
  font-size: 14px;
  font-weight: 600;
}

.sales-page .payment-result strong {
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

/* ==================== BOTTOM ACTION DOCK ==================== */
.sales-page .sales-footer-toolbar {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 28px;
  z-index: 90;
  height: var(--footer-height);
  align-items: center;
}

.sales-page .btn-cancel {
  background: white;
  border: 1.5px solid var(--gray-200);
  padding: 12px 28px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.sales-page .btn-cancel:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.sales-page .btn-save {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
  font-family: inherit;
}

.sales-page .btn-save:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.sales-page .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==================== EMPTY STATE ==================== */
.sales-page .empty-state {
  text-align: center;
  padding: 60px;
  color: var(--gray-500);
}

.sales-page .empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
  .sales-page .sales-main-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

  .sales-page .sales-sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    width: 100% !important;
    padding: 0;
  }

  .sales-page .item-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sales-page .item-field.span-2 {
    grid-column: span 1;
  }

  .sales-page .sales-content-area {
    max-height: none !important;
    overflow-y: visible !important;
  }
}

@media (max-width: 768px) {
  .sales-page {
    --header-height: 64px;
    --footer-height: 80px;
  }

  .sales-page .form-grid {
    grid-template-columns: 1fr;
  }

  .sales-page .item-form-grid {
    grid-template-columns: 1fr;
  }

  .sales-page .sales-header-bar {
    padding: 0 20px;
    min-height: var(--header-height);
  }

  .sales-page .sales-header-title-wrap h1 {
    font-size: 18px;
  }

  .sales-page .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }

  .sales-page .card-body {
    padding: 20px;
  }

  .sales-page .sales-footer-toolbar {
    flex-direction: column-reverse;
    padding: 12px 16px;
    height: auto;
  }

  .sales-page .btn-save,
  .sales-page .btn-cancel {
    width: 100%;
    justify-content: center;
  }

  .sales-page .sales-main-layout {
    padding: 16px;
    gap: 16px;
  }

  .sales-page .sales-content-area {
    gap: 16px;
  }

  .sales-page .sales-sidebar {
    gap: 16px;
  }
}

/* ==================== SCROLLBAR STYLING ==================== */
.sales-page ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sales-page ::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 10px;
}

.sales-page ::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 10px;
}

.sales-page ::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sales-page .neo-card {
  animation: fadeInUp 0.4s ease-out;
}

.sales-page .item-card {
  animation: fadeInUp 0.3s ease-out;
}

/* =========================================================
   SALES ITEM FOOTER + INLINE ADD BUTTON POLISH
   ========================================================= */
.sales-page .items-actions-bar .btn-primary {
  display: none !important;
}

.sales-page .premium-item-footer {
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px;
}

.sales-page .premium-item-footer .btn-primary {
  min-width: 132px;
  justify-content: center;
}

.sales-page .item-total strong {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sales-page .item-total strong small {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
}

.sales-page .item-total {
  min-width: 210px;
}

.sales-page .delete-item-btn.js-clear-item {
  color: var(--primary);
  background: var(--primary-soft);
}

.sales-page .delete-item-btn.js-clear-item:hover {
  background: #d1fae5;
}

/* =========================================================
   SALES SECTION ENHANCEMENTS
   Payment terms, customer quick create, serial modal, clean scrollbars
   ========================================================= */
.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  transform: none !important;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gray-300), var(--gray-400));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb:hover,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
  border: 2px solid transparent;
  background-clip: content-box;
}

.sales-page .field-help {
  display: block;
  margin-top: 6px;
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.4;
}

.sales-page .customer-field-wrap {
  display: flex !important;
  align-items: stretch;
  gap: 10px !important;
}

.sales-page .customer-add-icon-btn,
.sales-page .serial-open-btn,
.sales-page .modal-close-btn {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sales-page .customer-add-icon-btn {
  width: 46px;
  min-width: 46px;
  border-radius: 14px;
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-md);
}

.sales-page .customer-add-icon-btn:hover,
.sales-page .serial-open-btn:hover,
.sales-page .modal-close-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.sales-page .sales-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: modalFadeIn 0.18s ease-out;
}

.sales-page .sales-modal-backdrop[hidden] {
  display: none !important;
}

.sales-page .sales-modal {
  width: min(720px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: modalSlideUp 0.22s ease-out;
}

.sales-page .serial-modal {
  width: min(620px, 100%);
}

.sales-page .sales-modal-header,
.sales-page .sales-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--gray-200);
}

.sales-page .sales-modal-footer {
  border-top: 1px solid var(--gray-200);
  border-bottom: 0;
  justify-content: flex-end;
}

.sales-page .sales-modal-header h3 {
  margin: 0 0 4px;
  color: var(--gray-900);
  font-size: 20px;
  font-weight: 800;
}

.sales-page .sales-modal-header p {
  margin: 0;
  color: var(--gray-500);
  font-size: 13px;
}

.sales-page .sales-modal-body {
  padding: 22px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sales-page .customer-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sales-page .customer-modal-grid .span-2 {
  grid-column: span 2;
}

.sales-page .modal-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gray-100);
  color: var(--gray-600);
}

.sales-page .serial-field-wrap {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  align-items: center;
}

.sales-page .serial-field-wrap input[readonly] {
  cursor: pointer;
  background: white;
}

.sales-page .serial-open-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--primary);
  background: var(--primary-soft);
}

.sales-page .serial-entry-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.sales-page .serial-error {
  min-height: 20px;
  margin-top: 8px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
}

.sales-page .serial-meta {
  margin: 10px 0 14px;
  color: var(--gray-600);
  font-size: 14px;
}

.sales-page .serial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px 2px;
}

.sales-page .serial-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 9px 12px;
  border-radius: 999px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
  font-weight: 600;
  font-size: 13px;
}

.sales-page .serial-pill button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: white;
  color: var(--gray-500);
  cursor: pointer;
}

.sales-page .serial-empty {
  width: 100%;
  padding: 20px;
  text-align: center;
  color: var(--gray-500);
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: 16px;
}

.sales-page .due-notification-card {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: white;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  margin-bottom: 8px;
}

.sales-page .due-notification-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--warning);
  background: #fffbeb;
}

.sales-page .due-notification-card strong {
  display: block;
  color: var(--gray-900);
  font-size: 13px;
  margin-bottom: 3px;
}

.sales-page .due-notification-card p,
.sales-page .due-notification-card small {
  display: block;
  margin: 0;
  color: var(--gray-500);
  font-size: 12px;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {

  .sales-page .customer-modal-grid,
  .sales-page .serial-entry-row {
    grid-template-columns: 1fr;
  }

  .sales-page .customer-modal-grid .span-2 {
    grid-column: span 1;
  }

  .sales-page .sales-modal-header,
  .sales-page .sales-modal-footer,
  .sales-page .sales-modal-body {
    padding: 16px;
  }
}

/* =========================================================
   SALES SECTION UPDATE: CLEAN SCROLL + PRODUCT QUICK CREATE
   ========================================================= */
.sales-page,
.sales-page,
.sales-page .sales-main-layout,
.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .sales-modal-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .sales-modal-body {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 114, 128, 0.55) transparent;
  transform: none !important;
  will-change: scroll-position;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(156, 163, 175, 0.75), rgba(107, 114, 128, 0.75));
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb:hover,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb:hover,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(107, 114, 128, 0.9), rgba(75, 85, 99, 0.9));
  border: 3px solid transparent;
  background-clip: padding-box;
}

.sales-page .neo-card:hover {
  transform: none;
}

.sales-page .items-actions-bar {
  display: none !important;
}

.sales-page .clean-items-grid {
  margin-top: 0;
}

.sales-page .product-field-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: stretch;
}

.sales-page .product-add-icon-btn {
  width: 46px;
  min-width: 46px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.sales-page .product-add-icon-btn:hover,
.sales-page .product-add-icon-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

.sales-page .product-modal {
  width: min(860px, 100%);
}

.sales-page .product-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sales-page .product-modal-grid .span-2 {
  grid-column: span 2;
}

.sales-page .field-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

@media (max-width: 768px) {
  .sales-page .product-modal-grid {
    grid-template-columns: 1fr;
  }

  .sales-page .product-modal-grid .span-2 {
    grid-column: span 1;
  }

  .sales-page .product-field-wrap {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
}

/* =========================================================
   FINAL FIX: ALWAYS VISIBLE FOOTER + NO SCROLL SCALE/Bounce
   Keeps footer buttons visible and removes remaining scaling
   from Sales Summary / Invoice Details scroll areas.
   ========================================================= */
.sales-page {
  --footer-height: 82px;
}

.sales-page {
  min-height: 100vh;
  padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overscroll-behavior: none;
}

.sales-page .sales-main-layout {
  padding-bottom: calc(var(--footer-height) + 28px) !important;
  min-height: calc(100vh - var(--header-height));
  overscroll-behavior: none;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .summary-card,
.sales-page .payment-card,
.sales-page .sales-modal-body {
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
  transform: none !important;
  scale: 1 !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 48px) !important;
  padding-bottom: 14px;
}

.sales-page .sales-footer-toolbar {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  margin: 0 !important;
  padding: 14px clamp(16px, 4vw, 32px) calc(14px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.07);
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

/* Remove remaining hover/scroll scale effects from summary and invoice panels */
.sales-page .neo-card:hover,
.sales-page .summary-card:hover,
.sales-page .payment-card:hover,
.sales-page .grand-total-card:hover,
.sales-page .sales-sidebar .neo-card:hover,
.sales-page .sales-content-area .neo-card:hover {
  transform: none !important;
}

.sales-page .grand-total-card {
  transition: box-shadow 0.2s ease, background 0.2s ease !important;
}

/* Modern clean scrollbar without stretching/bounce look */
.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track {
  background: transparent !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb {
  background: rgba(107, 114, 128, 0.42) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb:hover,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb:hover,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(75, 85, 99, 0.68) !important;
  background-clip: padding-box !important;
}

@media (max-width: 768px) {
  .sales-page {
    --footer-height: 92px;
  }

  .sales-page .sales-footer-toolbar {
    justify-content: stretch;
    gap: 10px;
  }

  .sales-page .sales-footer-toolbar .btn-cancel,
  .sales-page .sales-footer-toolbar .btn-save {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 14px;
  }

  .sales-page .sales-main-layout {
    padding-bottom: calc(var(--footer-height) + 20px) !important;
  }
}

/* =========================================================
   UPLOAD PAYMENT DOCUMENT SECTION
   ========================================================= */
.sales-page .payment-document-card {
  overflow: hidden;
}

.sales-page .payment-document-dropzone {
  width: 100%;
  min-height: 132px;
  border: 1.5px dashed rgba(5, 150, 105, 0.32);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  cursor: pointer;
  padding: 18px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sales-page .payment-document-dropzone:hover,
.sales-page .payment-document-dropzone.is-dragging {
  border-color: rgba(5, 150, 105, 0.72);
  background: rgba(239, 246, 255, 0.82);
  box-shadow: 0 14px 30px rgba(5, 150, 105, 0.10);
}

.sales-page .payment-document-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  font-size: 18px;
}

.sales-page .payment-document-dropzone strong {
  font-size: 14px;
  color: #111827;
}

.sales-page .payment-document-dropzone small {
  color: #6b7280;
  font-size: 12px;
}

.sales-page .payment-document-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-page .payment-document-empty {
  color: #6b7280;
  font-size: 12px;
  text-align: center;
  padding: 6px 0 0;
}

.sales-page .payment-document-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 14px;
  background: #ffffff;
  padding: 10px;
}

.sales-page .payment-document-file-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-page .payment-document-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sales-page .payment-document-info strong {
  color: #111827;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-page .payment-document-info small {
  color: #6b7280;
  font-size: 12px;
}

.sales-page .payment-document-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 11px;
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}

.sales-page .payment-document-remove:hover {
  background: #dc2626;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .sales-page .payment-document-dropzone {
    min-height: 118px;
  }
}

/* =========================================================
   ATTACHMENTS / SUPPORTING DOCUMENTS SECTION
   Polished upload UI matching payment document section
   ========================================================= */
.sales-page .attachments-card,
.sales-page .supporting-documents-card {
  overflow: hidden;
}

.sales-page .supporting-document-dropzone {
  width: 100%;
  min-height: 148px;
  border: 1.5px dashed rgba(5, 150, 105, 0.32);
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgba(5, 150, 105, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  padding: 22px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sales-page .supporting-document-dropzone:hover,
.sales-page .supporting-document-dropzone.is-dragging {
  border-color: rgba(5, 150, 105, 0.72);
  background: rgba(239, 246, 255, 0.88);
  box-shadow: 0 16px 34px rgba(5, 150, 105, 0.12);
}

.sales-page .supporting-document-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 150, 105, 0.10);
  color: var(--primary);
  font-size: 20px;
}

.sales-page .supporting-document-dropzone strong {
  color: var(--gray-900);
  font-size: 15px;
  font-weight: 700;
}

.sales-page .supporting-document-dropzone small {
  color: var(--gray-500);
  font-size: 12px;
  line-height: 1.45;
  max-width: 420px;
}

.sales-page .supporting-document-list {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-page .supporting-document-empty {
  color: var(--gray-500);
  font-size: 12px;
  text-align: center;
  padding: 7px 0 0;
}

.sales-page .supporting-document-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(229, 231, 235, 0.95);
  border-radius: 16px;
  background: #ffffff;
  padding: 11px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.sales-page .supporting-document-file-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.sales-page .supporting-document-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sales-page .supporting-document-info strong {
  color: var(--gray-900);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sales-page .supporting-document-info small {
  color: var(--gray-500);
  font-size: 12px;
}

.sales-page .supporting-document-remove {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.10);
  color: #dc2626;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sales-page .supporting-document-remove:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .sales-page .supporting-document-dropzone {
    min-height: 126px;
    padding: 18px;
  }

  .sales-page .supporting-document-item {
    grid-template-columns: 38px minmax(0, 1fr) 34px;
  }
}

/* =========================================================
   CLEAN ERP FIXED LAYOUT + PREMIUM SCROLL SYSTEM
   Purpose:
   - Body/page does not scroll while Sales Invoice is open
   - Left Invoice area and Right Summary area scroll independently
   - Header, Sidebar and Footer remain stable/fixed
   - Footer aligns with content shell and never overlaps sidebar
   ========================================================= */
.sales-page {
  --erp-sidebar-left: var(--sidebar-width, var(--app-sidebar-width, 260px));
  --erp-header-height: var(--header-height, 72px);
  --erp-footer-height: 82px;
  --erp-shell-padding-x: 32px;
  --erp-shell-padding-y: 24px;
  --erp-shell-gap: 28px;
  --erp-summary-width: minmax(340px, 30%);
  --erp-content-max-width: 1600px;
  --erp-scrollbar-size: 10px;
}



.sales-page.modern-sales-page {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--erp-sidebar-left);
  width: auto !important;
  min-height: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
  background: #f8fafc;
}

/* Header follows the exact same content shell as the footer */
.sales-page .sales-header-bar {
  position: fixed !important;
  top: 0;
  left: var(--erp-sidebar-left);
  right: 0;
  height: var(--erp-header-height);
  min-height: var(--erp-header-height);
  margin: 0 !important;
  padding: 0 var(--erp-shell-padding-x) !important;
  z-index: 1100;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.sales-page .sales-main-layout {
  position: fixed !important;
  top: var(--erp-header-height);
  right: 0;
  bottom: var(--erp-footer-height);
  left: var(--erp-sidebar-left);
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: var(--erp-shell-padding-y) var(--erp-shell-padding-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 70%) var(--erp-summary-width) !important;
  gap: var(--erp-shell-gap) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  -webkit-overflow-scrolling: touch;
  transform: none !important;
  scale: 1 !important;
  will-change: scroll-position;
  contain: layout paint style;
}

.sales-page .sales-content-area {
  padding: 0 8px 24px 0 !important;
  gap: 24px !important;
}

.sales-page .sales-sidebar {
  position: relative !important;
  top: auto !important;
  width: auto !important;
  padding: 0 8px 24px 0 !important;
  gap: 20px !important;
  align-self: stretch !important;
}

/* Item table also gets controlled desktop-app scrolling */
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive {
  max-height: min(52vh, 520px);
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
  -webkit-overflow-scrolling: touch;
}

.sales-page .sales-footer-toolbar {
  position: fixed !important;
  left: var(--erp-sidebar-left) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: var(--erp-footer-height) !important;
  min-height: var(--erp-footer-height) !important;
  margin: 0 !important;
  padding: 14px var(--erp-shell-padding-x) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1100;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.07) !important;
}

/* Remove all scroll/hover bounce, scale, and layout jumping */
.sales-page .sales-content-area *,
.sales-page .sales-sidebar *,
.sales-page .sales-main-layout *,
.sales-page .sales-footer-toolbar *,
.sales-page .sales-header-bar * {
  overscroll-behavior: contain;
}

.sales-page .neo-card:hover,
.sales-page .summary-card:hover,
.sales-page .payment-card:hover,
.sales-page .grand-total-card:hover,
.sales-page .attachments-card:hover,
.sales-page .payment-document-card:hover,
.sales-page .sales-content-area .neo-card:hover,
.sales-page .sales-sidebar .neo-card:hover {
  transform: none !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .summary-card,
.sales-page .payment-card,
.sales-page .grand-total-card,
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .sales-modal-body {
  animation-timing-function: ease-out;
  backface-visibility: hidden;
}

/* Premium modern scrollbar */
.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar {
  width: var(--erp-scrollbar-size) !important;
  height: var(--erp-scrollbar-size) !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track,
.sales-page .item-table-wrap::-webkit-scrollbar-track,
.sales-page .items-table-wrap::-webkit-scrollbar-track,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-track,
.sales-page .table-responsive::-webkit-scrollbar-track {
  background: transparent !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb,
.sales-page .item-table-wrap::-webkit-scrollbar-thumb,
.sales-page .items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .table-responsive::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: rgba(100, 116, 139, 0.36) !important;
  border: 3px solid transparent !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-thumb:hover,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb:hover,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb:hover,
.sales-page .item-table-wrap::-webkit-scrollbar-thumb:hover,
.sales-page .items-table-wrap::-webkit-scrollbar-thumb:hover,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-thumb:hover,
.sales-page .table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.62) !important;
  background-clip: padding-box !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-corner,
.sales-page .sales-sidebar::-webkit-scrollbar-corner,
.sales-page .sales-modal-body::-webkit-scrollbar-corner,
.sales-page .item-table-wrap::-webkit-scrollbar-corner,
.sales-page .items-table-wrap::-webkit-scrollbar-corner,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-corner,
.sales-page .table-responsive::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Responsive ERP behavior */
@media (max-width: 1180px) {
  .sales-page {
    --erp-summary-width: minmax(320px, 34%);
    --erp-shell-padding-x: 22px;
    --erp-shell-gap: 20px;
  }
}

@media (max-width: 900px) {

  .sales-page.modern-sales-page,
  .sales-page .sales-header-bar,
  .sales-page .sales-main-layout,
  .sales-page .sales-footer-toolbar {
    left: 0 !important;
  }

  .sales-page .sales-main-layout {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .sales-page .sales-content-area,
  .sales-page .sales-sidebar {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    contain: none;
  }
}

@media (max-width: 640px) {
  .sales-page {
    --erp-header-height: 76px;
    --erp-footer-height: 92px;
    --erp-shell-padding-x: 14px;
    --erp-shell-padding-y: 14px;
  }

  .sales-page .sales-footer-toolbar {
    justify-content: stretch !important;
  }

  .sales-page .sales-footer-toolbar .btn-cancel,
  .sales-page .sales-footer-toolbar .btn-save {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* =========================================================
   FINAL PREMIUM ERP DYNAMIC SIDEBAR + HIDDEN SCROLL FIX
   Purpose:
   - Uses JS-measured --erp-sidebar-left, so collapsed sidebar frees space
   - Header/content/footer move and resize together
   - Body remains fixed; only invoice + summary sections scroll
   - Wheel/trackpad scrolling works naturally over each section
   - Scrollbar UI is hidden/ultra-clean; no bounce/stretch/scale
   ========================================================= */
.sales-page {
  --erp-sidebar-left: 0px;
  --erp-header-height: var(--header-height, 72px);
  --erp-footer-height: 82px;
  --erp-shell-padding-x: 32px;
  --erp-shell-padding-y: 24px;
  --erp-shell-gap: 28px;
  --erp-summary-column: minmax(340px, 30%);
  --erp-layout-transition: left 240ms cubic-bezier(0.22, 1, 0.36, 1),
    width 240ms cubic-bezier(0.22, 1, 0.36, 1),
    right 240ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 240ms cubic-bezier(0.22, 1, 0.36, 1);
}


.sales-page.modern-sales-page {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--erp-sidebar-left) !important;
  width: auto !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: var(--erp-layout-transition) !important;
}

.sales-page .sales-header-bar,
.sales-page .sales-footer-toolbar,
.sales-page .sales-main-layout {
  left: var(--erp-sidebar-left) !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: var(--erp-layout-transition), box-shadow 180ms ease, background-color 180ms ease !important;
}

.sales-page .sales-header-bar {
  position: fixed !important;
  top: 0 !important;
  height: var(--erp-header-height) !important;
  min-height: var(--erp-header-height) !important;
  padding: 0 var(--erp-shell-padding-x) !important;
  z-index: 1100 !important;
}

.sales-page .sales-main-layout {
  position: fixed !important;
  top: var(--erp-header-height) !important;
  bottom: var(--erp-footer-height) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--erp-shell-padding-y) var(--erp-shell-padding-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--erp-summary-column) !important;
  gap: var(--erp-shell-gap) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.sales-page .sales-footer-toolbar {
  position: fixed !important;
  bottom: 0 !important;
  height: var(--erp-footer-height) !important;
  min-height: var(--erp-footer-height) !important;
  padding: 14px var(--erp-shell-padding-x) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.07) !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch;
  transform: none !important;
  scale: 1 !important;
  contain: layout paint style;
  will-change: scroll-position;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sales-page .sales-content-area {
  padding: 0 2px 26px 0 !important;
}

.sales-page .sales-sidebar {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  width: auto !important;
  padding: 0 2px 26px 0 !important;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .table-responsive,
.sales-page .sales-modal-body {
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sales-page .neo-card:hover,
.sales-page .summary-card:hover,
.sales-page .payment-card:hover,
.sales-page .grand-total-card:hover,
.sales-page .attachments-card:hover,
.sales-page .payment-document-card:hover,
.sales-page .sales-content-area .neo-card:hover,
.sales-page .sales-sidebar .neo-card:hover {
  transform: none !important;
  scale: 1 !important;
}

.sales-page .sales-content-area *,
.sales-page .sales-sidebar *,
.sales-page .sales-main-layout * {
  overscroll-behavior: contain;
}

@media (max-width: 1180px) {
  .sales-page {
    --erp-summary-column: minmax(320px, 34%);
    --erp-shell-padding-x: 22px;
    --erp-shell-gap: 20px;
  }
}

@media (max-width: 900px) {
  .sales-page {
    --erp-sidebar-left: 0px !important;
    --erp-shell-padding-x: 16px;
    --erp-shell-padding-y: 16px;
    --erp-footer-height: 92px;
  }

  .sales-page.modern-sales-page,
  .sales-page .sales-header-bar,
  .sales-page .sales-footer-toolbar,
  .sales-page .sales-main-layout {
    left: 0 !important;
  }

  .sales-page .sales-main-layout {
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .sales-page .sales-content-area,
  .sales-page .sales-sidebar {
    overflow-y: auto !important;
  }
}

@media (max-width: 640px) {
  .sales-page {
    --erp-header-height: 76px;
    --erp-footer-height: 96px;
    --erp-shell-padding-x: 14px;
    --erp-shell-padding-y: 14px;
  }

  .sales-page .sales-footer-toolbar {
    justify-content: stretch !important;
  }

  .sales-page .sales-footer-toolbar .btn-cancel,
  .sales-page .sales-footer-toolbar .btn-save {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* =========================================================
   INVISIBLE PREMIUM SCROLL + NATURAL WHEEL SYSTEM
   Purpose:
   - Mouse wheel / trackpad scrolling remains enabled
   - Scrollbar UI is completely hidden
   - Body stays locked; only ERP panels scroll
   - No bounce, stretch, scale, or overscroll glow
   ========================================================= */

.sales-page.modern-sales-page,
.sales-page .sales-main-layout {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .table-responsive,
.sales-page .sales-modal-body {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  /* Firefox: hide scrollbar */
  -ms-overflow-style: none !important;
  /* Legacy Edge/IE: hide scrollbar */
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .table-responsive {
  overflow-x: auto !important;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .item-table-wrap::-webkit-scrollbar-track,
.sales-page .items-table-wrap::-webkit-scrollbar-track,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-track,
.sales-page .table-responsive::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track,
.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .item-table-wrap::-webkit-scrollbar-thumb,
.sales-page .items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .table-responsive::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  scrollbar-gutter: auto !important;
  touch-action: pan-y;
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .table-responsive {
  touch-action: pan-x pan-y;
}

.sales-page .neo-card:hover,
.sales-page .summary-card:hover,
.sales-page .payment-card:hover,
.sales-page .grand-total-card:hover,
.sales-page .attachments-card:hover,
.sales-page .payment-document-card:hover {
  transform: none !important;
}

/* =========================================================
   FINAL PERFORMANCE SCROLL OVERRIDE
   Purpose:
   - Faster, lighter internal ERP scrolling
   - Hidden scrollbars remain fully functional
   - Removes heavy smooth/will-change/contain/backdrop effects
   - Keeps fixed header, footer, sidebar and body scroll lock
   ========================================================= */

.sales-page.modern-sales-page,
.sales-page .sales-main-layout {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scroll-behavior: auto !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive,
.sales-page .sales-modal-body,
.sales-page .sales-modal-content,
.sales-page .modal-body {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  will-change: auto !important;
  contain: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive {
  overflow-x: auto !important;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .item-section-table::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar,
.sales-page .sales-modal-content::-webkit-scrollbar,
.sales-page .modal-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .item-table-wrap::-webkit-scrollbar-track,
.sales-page .items-table-wrap::-webkit-scrollbar-track,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-track,
.sales-page .item-section-table::-webkit-scrollbar-track,
.sales-page .table-responsive::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track,
.sales-page .sales-modal-content::-webkit-scrollbar-track,
.sales-page .modal-body::-webkit-scrollbar-track,
.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .item-table-wrap::-webkit-scrollbar-thumb,
.sales-page .items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .item-section-table::-webkit-scrollbar-thumb,
.sales-page .table-responsive::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb,
.sales-page .sales-modal-content::-webkit-scrollbar-thumb,
.sales-page .modal-body::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

.sales-page .sales-header-bar,
.sales-page .sales-footer-toolbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sales-page .sales-content-area *,
.sales-page .sales-sidebar *,
.sales-page .item-table-wrap *,
.sales-page .items-table-wrap *,
.sales-page .sales-items-table-wrap *,
.sales-page .table-responsive * {
  will-change: auto !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {

  .sales-page.modern-sales-page,
  .sales-page .sales-header-bar,
  .sales-page .sales-footer-toolbar,
  .sales-page .sales-main-layout {
    transition: none !important;
  }
}

/* =========================================================
   FINAL BALANCED ERP SCROLL SYSTEM
   Purpose:
   - Medium-speed, controlled internal scrolling
   - Enables wheel/trackpad scroll for invoice, summary, tables,
     sidebar navigation, notification dropdowns and all modal bodies
   - Keeps body/page locked and scrollbar UI invisible
   - Removes bounce/stretch while avoiding heavy rendering effects
   ========================================================= */


.sales-page.modern-sales-page,
.sales-page .sales-main-layout {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  scroll-behavior: auto !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive,
.sales-page .sales-modal-body,
.sales-page .sales-modal-content,
.sales-page .modal-body,
.sales-page .modal-content,
.sales-page .popup-body,
.sales-page .notification-dropdown,
.sales-page .notifications-dropdown,
.sales-page .notification-panel,
.sales-page .notification-list,
.sales-page .dropdown-menu,
.sales-page .sidebar-nav,
.sales-page .sidebar-menu,
.sales-page .sidebar-menu-area,
.sales-page .nav-menu,
.sales-page .menu-scroll {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  will-change: auto !important;
  contain: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive {
  overflow-x: auto !important;
}

.sales-page .sales-modal,
.sales-page .product-modal,
.sales-page .serial-modal {
  max-height: calc(100vh - 40px) !important;
  overflow: hidden !important;
}

.sales-page .sales-modal-body,
.sales-page .sales-modal-content,
.sales-page .modal-body,
.sales-page .popup-body {
  max-height: min(72vh, 680px) !important;
}

.sales-page .notification-dropdown,
.sales-page .notifications-dropdown,
.sales-page .notification-panel,
.sales-page .dropdown-menu {
  max-height: min(70vh, 520px);
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .item-section-table::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar,
.sales-page .sales-modal-content::-webkit-scrollbar,
.sales-page .modal-body::-webkit-scrollbar,
.sales-page .modal-content::-webkit-scrollbar,
.sales-page .popup-body::-webkit-scrollbar,
.sales-page .notification-dropdown::-webkit-scrollbar,
.sales-page .notifications-dropdown::-webkit-scrollbar,
.sales-page .notification-panel::-webkit-scrollbar,
.sales-page .notification-list::-webkit-scrollbar,
.sales-page .dropdown-menu::-webkit-scrollbar,
.sales-page .sidebar-nav::-webkit-scrollbar,
.sales-page .sidebar-menu::-webkit-scrollbar,
.sales-page .sidebar-menu-area::-webkit-scrollbar,
.sales-page .nav-menu::-webkit-scrollbar,
.sales-page .menu-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.sales-page .sales-content-area::-webkit-scrollbar-track,
.sales-page .sales-sidebar::-webkit-scrollbar-track,
.sales-page .item-table-wrap::-webkit-scrollbar-track,
.sales-page .items-table-wrap::-webkit-scrollbar-track,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-track,
.sales-page .item-section-table::-webkit-scrollbar-track,
.sales-page .table-responsive::-webkit-scrollbar-track,
.sales-page .sales-modal-body::-webkit-scrollbar-track,
.sales-page .sales-modal-content::-webkit-scrollbar-track,
.sales-page .modal-body::-webkit-scrollbar-track,
.sales-page .modal-content::-webkit-scrollbar-track,
.sales-page .popup-body::-webkit-scrollbar-track,
.sales-page .notification-dropdown::-webkit-scrollbar-track,
.sales-page .notifications-dropdown::-webkit-scrollbar-track,
.sales-page .notification-panel::-webkit-scrollbar-track,
.sales-page .notification-list::-webkit-scrollbar-track,
.sales-page .dropdown-menu::-webkit-scrollbar-track,
.sales-page .sidebar-nav::-webkit-scrollbar-track,
.sales-page .sidebar-menu::-webkit-scrollbar-track,
.sales-page .sidebar-menu-area::-webkit-scrollbar-track,
.sales-page .nav-menu::-webkit-scrollbar-track,
.sales-page .menu-scroll::-webkit-scrollbar-track,
.sales-page .sales-content-area::-webkit-scrollbar-thumb,
.sales-page .sales-sidebar::-webkit-scrollbar-thumb,
.sales-page .item-table-wrap::-webkit-scrollbar-thumb,
.sales-page .items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .sales-items-table-wrap::-webkit-scrollbar-thumb,
.sales-page .item-section-table::-webkit-scrollbar-thumb,
.sales-page .table-responsive::-webkit-scrollbar-thumb,
.sales-page .sales-modal-body::-webkit-scrollbar-thumb,
.sales-page .sales-modal-content::-webkit-scrollbar-thumb,
.sales-page .modal-body::-webkit-scrollbar-thumb,
.sales-page .modal-content::-webkit-scrollbar-thumb,
.sales-page .popup-body::-webkit-scrollbar-thumb,
.sales-page .notification-dropdown::-webkit-scrollbar-thumb,
.sales-page .notifications-dropdown::-webkit-scrollbar-thumb,
.sales-page .notification-panel::-webkit-scrollbar-thumb,
.sales-page .notification-list::-webkit-scrollbar-thumb,
.sales-page .dropdown-menu::-webkit-scrollbar-thumb,
.sales-page .sidebar-nav::-webkit-scrollbar-thumb,
.sales-page .sidebar-menu::-webkit-scrollbar-thumb,
.sales-page .sidebar-menu-area::-webkit-scrollbar-thumb,
.sales-page .nav-menu::-webkit-scrollbar-thumb,
.sales-page .menu-scroll::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: 0 !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .sales-modal-body,
.sales-page .notification-dropdown,
.sales-page .notifications-dropdown,
.sales-page .sidebar-nav,
.sales-page .sidebar-menu,
.sales-page .sidebar-menu-area {
  touch-action: pan-y;
}

.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .item-section-table,
.sales-page .table-responsive {
  touch-action: pan-x pan-y;
}

.sales-page .sales-header-bar,
.sales-page .sales-footer-toolbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sales-page .sales-content-area *,
.sales-page .sales-sidebar *,
.sales-page .item-table-wrap *,
.sales-page .items-table-wrap *,
.sales-page .sales-items-table-wrap *,
.sales-page .table-responsive *,
.sales-page .sales-modal-body * {
  scroll-behavior: auto !important;
  will-change: auto !important;
}

@media (prefers-reduced-motion: reduce) {

  .sales-page.modern-sales-page,
  .sales-page .sales-header-bar,
  .sales-page .sales-footer-toolbar,
  .sales-page .sales-main-layout,
  .sales-page .sales-modal {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   SALES MODULE PREMIUM FINAL EXTENSIONS
   Purpose:
   - Sales-specific customer, online order, payment and stock UI
   - Keeps exact purchase ERP shell but applies green sales theme
   ========================================================= */
.sales-page,
.sales-page {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #34d399;
  --primary-soft: #ecfdf5;
  --success: #059669;
}

.sales-page .customer-field-wrap,
.sales-page .sales-input-with-button {
  display: flex !important;
  align-items: stretch;
  gap: 10px !important;
}

.sales-page .customer-add-icon-btn,
.sales-page .sales-quick-create-btn {
  width: 46px;
  min-width: 46px;
  border: 0;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sales-page .customer-add-icon-btn:hover,
.sales-page .sales-quick-create-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.sales-page .sales-online-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 700;
  cursor: pointer;
}

.sales-page .sales-online-switch input {
  width: 18px;
  height: 18px;
  accent-color: #059669;
}

.sales-page .online-order-card .online-order-fields {
  animation: fadeInUp 0.22s ease-out;
}

.sales-page .online-order-fields .span-2 {
  grid-column: span 2;
}

.sales-page .sales-items-grid.clean-items-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sales-page .item-field input[readonly] {
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: default;
}

.sales-page .item-field .unit-cost-label {
  color: #047857;
}

.sales-page .card-icon,
.sales-page .supporting-document-icon,
.sales-page .payment-document-icon {
  color: #059669;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.10), #ffffff);
}

.sales-page .item-number,
.sales-page .grand-total-card,
.sales-page .btn-primary,
.sales-page .btn-save,
.sales-page .sales-footer-toolbar .btn-save {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

.sales-page .item-total strong,
.sales-page .summary-line.balance strong,
.sales-page #totalLocalDisplay,
.sales-page #paidLocalDisplay {
  color: #059669;
}

.sales-page input:focus,
.sales-page select:focus,
.sales-page textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.10) !important;
}

.sales-page .bank-field,
.sales-page .cash-field {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.sales-page .payment-result.paid {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.05) 100%);
  border-color: rgba(5, 150, 105, 0.20);
}

.sales-page .payment-result.paid strong {
  color: #059669;
}

.sales-page .sales-number-badge,
.sales-page .sales-status-badge,
.sales-page .status-badge {
  color: #059669 !important;
  background: rgba(5, 150, 105, 0.10) !important;
}

.sales-page.modern-sales-page {
  background: #f8fafc !important;
}

.sales-page .sales-modal-backdrop[hidden] {
  display: none !important;
}

.sales-page .sales-modal .field-invalid,
.sales-page .field-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12) !important;
}

@media (max-width: 768px) {
  .sales-page .online-order-fields .span-2 {
    grid-column: span 1;
  }

  .sales-page .customer-field-wrap {
    grid-template-columns: minmax(0, 1fr) 44px;
  }
}

/* sales premium reserved line 1 */
/* sales premium reserved line 2 */
/* =========================================================
   FINAL PURCHASE-LAYOUT PARITY PATCH FOR SALES MODULE
   - Keeps body locked
   - Keeps only internal panels scrollable
   - Hidden modern scrollbars
   - Green sales theme: #059669
   ========================================================= */

.sales-page,
.sales-page {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #34d399;
  --primary-soft: #ecfdf5;
}

.sales-page .sale-content-area,
.sales-page .sales-sidebar,
.sales-page .sales-items-grid,
.sales-page .sales-modal-body,
.sales-page .sidebar-menu,
.sales-page .sidebar-nav,
.sales-page .notification-dropdown,
.sales-page .notifications-dropdown {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sales-page .sale-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .sales-items-grid::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar,
.sales-page .sidebar-menu::-webkit-scrollbar,
.sales-page .sidebar-nav::-webkit-scrollbar,
.sales-page .notification-dropdown::-webkit-scrollbar,
.sales-page .notifications-dropdown::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

.sales-page .sales-header-bar,
.sales-page .sales-footer-toolbar {
  left: var(--erp-sidebar-left, 0px);
  width: calc(100vw - var(--erp-sidebar-left, 0px));
  transition: left 220ms ease, width 220ms ease;
}

.sales-page .sale-main-layout {
  margin-left: var(--erp-sidebar-left, 0px);
  width: calc(100vw - var(--erp-sidebar-left, 0px));
  transition: margin-left 220ms ease, width 220ms ease;
}

.sales-page .btn-primary,
.sales-page .btn-save,
.sales-page .customer-add-icon-btn,
.sales-page .product-add-icon-btn,
.sales-page .grand-total-card {
  background: linear-gradient(135deg, #059669, #047857);
}

.sales-page input:focus,
.sales-page select:focus,
.sales-page textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12) !important;
}

/* =========================================================
   COMPATIBILITY FIX: Sales Layout Class Aliases
   Ensures old singular sale-* markup still receives the exact
   Purchase-style ERP layout and internal scrolling behavior.
   ========================================================= */
.sales-page .sale-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  height: calc(100vh - var(--header-height) - var(--footer-height));
  max-height: calc(100vh - var(--header-height) - var(--footer-height));
  overflow: hidden;
  padding: 28px 32px;
}

.sales-page .sale-content-area {
  min-width: 0;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sales-page .sale-content-area::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

.sales-page .sale-content-area>.neo-card+.neo-card {
  margin-top: 28px;
}

@media (max-width: 1180px) {
  .sales-page .sale-main-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sales-page .sale-main-layout {
    padding: 18px 14px;
    gap: 18px;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .sales-page .sale-content-area {
    height: auto;
    max-height: none;
    overflow: visible;
  }
}


/* =========================================================
   SALES CREATE PAGE — STRICTLY SCOPED THEME + SCROLL FIX
   No html/body/#app/global selector is used below.
   ========================================================= */
.sales-page {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-light: #34d399;
  --primary-soft: #ecfdf5;
  --sale-primary: #059669;
  --erp-sidebar-left: 0px;
  --erp-header-height: var(--header-height, 72px);
  --erp-footer-height: 82px;
  --erp-shell-padding-x: 32px;
  --erp-shell-padding-y: 24px;
  --erp-shell-gap: 28px;
  --erp-summary-column: minmax(340px, 30%);
  --erp-layout-transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1),
    right 220ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--gray-800);
}

.sales-page.modern-sales-page {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--erp-sidebar-left) !important;
  width: auto !important;
  height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f8fafc;
  transition: var(--erp-layout-transition) !important;
  overscroll-behavior: contain !important;
}

.sales-page .sales-header-bar,
.sales-page .sales-main-layout,
.sales-page .sales-footer-toolbar {
  left: var(--erp-sidebar-left) !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: var(--erp-layout-transition), box-shadow 180ms ease, background-color 180ms ease !important;
}

.sales-page .sales-header-bar {
  position: fixed !important;
  top: 0 !important;
  height: var(--erp-header-height) !important;
  min-height: var(--erp-header-height) !important;
  padding: 0 var(--erp-shell-padding-x) !important;
  z-index: 1100 !important;
}

.sales-page .sales-main-layout {
  position: fixed !important;
  top: var(--erp-header-height) !important;
  bottom: var(--erp-footer-height) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--erp-shell-padding-y) var(--erp-shell-padding-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--erp-summary-column) !important;
  gap: var(--erp-shell-gap) !important;
  align-items: stretch !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.sales-page .sales-footer-toolbar {
  position: fixed !important;
  bottom: 0 !important;
  height: var(--erp-footer-height) !important;
  min-height: var(--erp-footer-height) !important;
  padding: 14px var(--erp-shell-padding-x) calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 1100 !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar,
.sales-page .sales-modal-body,
.sales-page .sales-modal-content,
.sales-page .item-table-wrap,
.sales-page .items-table-wrap,
.sales-page .sales-items-table-wrap,
.sales-page .table-responsive,
.sales-page .dropdown-menu,
.sales-page .notification-dropdown,
.sales-page .notifications-dropdown,
.sales-page .notification-panel,
.sales-page .notification-list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.sales-page .sales-content-area,
.sales-page .sales-sidebar {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  scroll-behavior: auto !important;
  transform: none !important;
  scale: 1 !important;
  contain: layout paint style;
}

.sales-page .sales-content-area {
  padding: 0 2px 26px 0 !important;
}

.sales-page .sales-sidebar {
  position: relative !important;
  top: auto !important;
  align-self: stretch !important;
  width: auto !important;
  padding: 0 2px 26px 0 !important;
}

.sales-page .sales-content-area::-webkit-scrollbar,
.sales-page .sales-sidebar::-webkit-scrollbar,
.sales-page .sales-modal-body::-webkit-scrollbar,
.sales-page .sales-modal-content::-webkit-scrollbar,
.sales-page .item-table-wrap::-webkit-scrollbar,
.sales-page .items-table-wrap::-webkit-scrollbar,
.sales-page .sales-items-table-wrap::-webkit-scrollbar,
.sales-page .table-responsive::-webkit-scrollbar,
.sales-page .dropdown-menu::-webkit-scrollbar,
.sales-page .notification-dropdown::-webkit-scrollbar,
.sales-page .notifications-dropdown::-webkit-scrollbar,
.sales-page .notification-panel::-webkit-scrollbar,
.sales-page .notification-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.sales-page .btn-primary,
.sales-page .btn-save,
.sales-page .sales-number-badge,
.sales-page .grand-total-card,
.sales-page .quick-add-btn,
.sales-page .btn-add-row,
.sales-page .btn-add-item {
  --primary: #059669;
}

.sales-page input:focus,
.sales-page select:focus,
.sales-page textarea:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12) !important;
  outline: none !important;
}

@media (max-width: 900px) {

  .sales-page.modern-sales-page,
  .sales-page .sales-header-bar,
  .sales-page .sales-main-layout,
  .sales-page .sales-footer-toolbar {
    left: 0 !important;
  }

  .sales-page .sales-main-layout {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }

  .sales-page .sales-content-area,
  .sales-page .sales-sidebar {
    height: auto !important;
    max-height: none !important;
  }
}


/* =========================================================
   COGS, PROFIT/LOSS, AND FOOTER STYLES
   Add these styles to your existing sales-page CSS
   ========================================================= */

/* Footer Profit/Loss Section */
.sales-page .sales-footer-toolbar {
  justify-content: space-between !important;
}

.sales-page .footer-profit-loss {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 20px;
  border-radius: 40px;
  border: 1px solid var(--gray-200);
}

.sales-page .footer-profit-loss span {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-600);
}

.sales-page .footer-profit-loss strong {
  font-size: 18px;
  font-weight: 800;
}

.sales-page .footer-profit-loss .profit-positive {
  color: var(--success);
}

.sales-page .footer-profit-loss .profit-negative {
  color: var(--danger);
}

.sales-page .footer-actions {
  display: flex;
  gap: 16px;
}

/* Profit display in item rows */
.sales-page .profit-display {
  font-weight: 700 !important;
}

.sales-page .profit-display.profit-positive {
  color: var(--success) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

.sales-page .profit-display.profit-negative {
  color: var(--danger) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Profit badge in item footer */
.sales-page .profit-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 20px;
}

.sales-page .profit-badge.profit-positive {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.sales-page .profit-badge.profit-negative {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Profit summary in sidebar */
.sales-page .profit-summary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--gray-200);
}

.sales-page .profit-summary strong {
  font-size: 16px;
  font-weight: 800;
}

.sales-page .profit-summary strong.profit-positive {
  color: var(--success);
}

.sales-page .profit-summary strong.profit-negative {
  color: var(--danger);
}

/* Remove product quick add button */
.sales-page .product-add-icon-btn {
  display: none !important;
}

.sales-page .product-field-wrap {
  grid-template-columns: 1fr !important;
}

/* COGS field styling */
.sales-page .item-field input.readonly-input {
  background: var(--gray-50);
  color: var(--gray-600);
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sales-page .sales-footer-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .sales-page .footer-profit-loss {
    justify-content: center;
    margin-bottom: 8px;
  }

  .sales-page .footer-actions {
    justify-content: stretch;
  }

  .sales-page .footer-actions .btn-cancel,
  .sales-page .footer-actions .btn-save {
    flex: 1;
    justify-content: center;
  }
}
/* =========================================================
   SALE DETAIL PREMIUM UI
   File: assets/css/sale.css
   Scope: .sales-detail-page only
   ========================================================= */

.sales-detail-page {
  --sale-detail-green: #16a34a;
  --sale-detail-green-dark: #047857;
  --sale-detail-navy: #0f172a;
  --sale-detail-muted: #64748b;
  --sale-detail-border: #e2e8f0;
  --sale-detail-soft: #f8fafc;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(22, 163, 74, 0.08), transparent 34%),
    #f8fafc;
}

.sales-detail-page .sale-detail-header,
.sales-detail-page .sale-invoice-hero,
.sales-detail-page .sale-info-grid,
.sales-detail-page .sale-bottom-grid,
.sales-detail-page .sale-detail-summary-grid {
  display: grid;
  gap: 16px;
}

.sales-detail-page .sale-detail-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 20px;
}

.sales-detail-page .sale-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--sale-detail-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sales-detail-page .sale-detail-header h1 {
  margin: 0;
  color: var(--sale-detail-navy);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.sales-detail-page .sale-detail-header p {
  margin: 6px 0 0;
  color: var(--sale-detail-muted);
  font-size: 14px;
}

.sales-detail-page .sale-detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-detail-page .sale-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 800;
}

.sales-detail-page .sale-detail-actions .btn-primary {
  border: 0;
  background: linear-gradient(135deg, #16a34a, #059669);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.24);
}

.sales-detail-page .sale-invoice-shell {
  display: grid;
  gap: 16px;
}

.sales-detail-page .sale-invoice-hero,
.sales-detail-page .sale-summary-card,
.sales-detail-page .sale-info-panel,
.sales-detail-page .sale-items-panel,
.sales-detail-page .sale-note-panel,
.sales-detail-page .sale-total-panel,
.sales-detail-page .sale-detail-loader {
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.sales-detail-page .sale-invoice-hero {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  align-items: center;
  padding: 26px;
}

.sales-detail-page .sale-brand-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sales-detail-page .sale-brand-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 22px;
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a, #059669);
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 16px 34px rgba(22, 163, 74, 0.22);
}

.sales-detail-page .sale-brand-block h2 {
  margin: 0;
  color: var(--sale-detail-navy);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.sales-detail-page .sale-brand-block p {
  margin: 4px 0 0;
  color: var(--sale-detail-muted);
  font-size: 14px;
}

.sales-detail-page .sale-invoice-meta-card {
  display: grid;
  gap: 10px;
  padding-left: 24px;
  border-left: 1px solid var(--sale-detail-border);
}

.sales-detail-page .sale-invoice-meta-card div,
.sales-detail-page .sale-info-row,
.sales-detail-page .sale-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sales-detail-page .sale-invoice-meta-card span,
.sales-detail-page .sale-info-row span,
.sales-detail-page .sale-total-row span,
.sales-detail-page .sale-summary-card span {
  color: var(--sale-detail-muted);
  font-size: 13px;
  font-weight: 700;
}

.sales-detail-page .sale-invoice-meta-card strong,
.sales-detail-page .sale-info-row strong,
.sales-detail-page .sale-total-row strong {
  color: var(--sale-detail-navy);
  font-size: 14px;
  font-weight: 900;
  text-align: right;
}

.sales-detail-page .sale-detail-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sales-detail-page .sale-summary-card {
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
}

.sales-detail-page .sale-summary-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 18px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--sale-detail-green);
}

.sales-detail-page .sale-summary-card.is-customer::after { background: #2563eb; }
.sales-detail-page .sale-summary-card.is-total::after { background: #16a34a; }
.sales-detail-page .sale-summary-card.is-paid::after { background: #059669; }
.sales-detail-page .sale-summary-card.is-balance::after { background: #dc2626; }

.sales-detail-page .sale-summary-card strong {
  display: block;
  margin-top: 8px;
  color: var(--sale-detail-navy);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.sales-detail-page .sale-summary-card small {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 12px;
}

.sales-detail-page .sale-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-detail-page .sale-info-panel,
.sales-detail-page .sale-items-panel,
.sales-detail-page .sale-note-panel,
.sales-detail-page .sale-total-panel {
  padding: 20px;
}

.sales-detail-page .sale-panel-title,
.sales-detail-page .sale-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sales-detail-page .sale-panel-title {
  justify-content: flex-start;
}

.sales-detail-page .sale-panel-title i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--sale-detail-green-dark);
  background: #dcfce7;
}

.sales-detail-page .sale-panel-title h3,
.sales-detail-page .sale-note-panel h3,
.sales-detail-page .sale-total-title,
.sales-detail-page .sale-section-heading h2 {
  margin: 0;
  color: var(--sale-detail-navy);
  font-size: 15px;
  font-weight: 900;
}

.sales-detail-page .sale-info-row {
  min-height: 36px;
  border-bottom: 1px dashed var(--sale-detail-border);
}

.sales-detail-page .sale-info-row:last-child {
  border-bottom: 0;
}

.sales-detail-page .sale-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px !important;
  font-weight: 900;
  line-height: 1;
}

.sales-detail-page .sale-pill.is-success { color: #047857; background: #d1fae5; }
.sales-detail-page .sale-pill.is-danger { color: #b91c1c; background: #fee2e2; }
.sales-detail-page .sale-pill.is-warning { color: #b45309; background: #fef3c7; }
.sales-detail-page .sale-pill.is-muted { color: #475569; background: #e2e8f0; }
.sales-detail-page .sale-pill.is-cash { color: #047857; background: #d1fae5; }
.sales-detail-page .sale-pill.is-bank { color: #1d4ed8; background: #dbeafe; }
.sales-detail-page .sale-pill.is-partial { color: #b45309; background: #fef3c7; }
.sales-detail-page .sale-pill.is-credit { color: #7c2d12; background: #ffedd5; }
.sales-detail-page .sale-pill.is-neutral { color: #166534; background: #dcfce7; }

.sales-detail-page .sale-section-heading p {
  margin: 5px 0 0;
  color: var(--sale-detail-muted);
  font-size: 13px;
}

.sales-detail-page .sale-section-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #166534;
  background: #dcfce7;
  font-size: 12px;
  font-weight: 900;
}

.sales-detail-page .sale-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sale-detail-border);
  border-radius: 14px;
}

.sales-detail-page .sale-detail-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  background: #ffffff;
}

.sales-detail-page .sale-detail-table th {
  padding: 14px 14px;
  color: #475569;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid var(--sale-detail-border);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-detail-page .sale-detail-table td {
  padding: 15px 14px;
  color: #334155;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  vertical-align: top;
}

.sales-detail-page .sale-detail-table tbody tr:hover {
  background: #f8fafc;
}

.sales-detail-page .sale-detail-table tbody tr:last-child td {
  border-bottom: 0;
}

.sales-detail-page .sale-item-title {
  color: var(--sale-detail-navy);
  font-weight: 900;
}

.sales-detail-page .sale-item-title.is-small {
  font-size: 13px;
}

.sales-detail-page .sale-item-subtitle {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 12px;
}

.sales-detail-page .sale-serial-description {
  max-width: 310px;
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
  word-break: break-word;
}

.sales-detail-page .sale-bottom-grid {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.sales-detail-page .sale-notes-area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sales-detail-page .sale-note-panel,
.sales-detail-page .sale-total-panel {
  min-height: 126px;
}

.sales-detail-page .sale-note-panel p {
  margin: 12px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.7;
}

.sales-detail-page .sale-total-title {
  margin-bottom: 10px;
}

.sales-detail-page .sale-total-row {
  min-height: 38px;
  border-bottom: 1px solid #eef2f7;
}

.sales-detail-page .sale-total-row:last-child {
  border-bottom: 0;
}

.sales-detail-page .sale-total-row.is-highlight {
  margin-top: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #dcfce7, #f0fdf4);
}

.sales-detail-page .sale-total-row.is-highlight strong {
  color: #047857;
  font-size: 16px;
}

.sales-detail-page .sale-detail-loader {
  display: grid;
  min-height: 260px;
  place-items: center;
  gap: 8px;
  color: var(--sale-detail-muted);
  text-align: center;
}

.sales-detail-page .sale-loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #d1fae5;
  border-top-color: var(--sale-detail-green);
  border-radius: 50%;
  animation: saleDetailSpin 0.8s linear infinite;
}

@keyframes saleDetailSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .sales-detail-page .sale-detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-detail-page .sale-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sales-detail-page {
    padding: 16px;
  }

  .sales-detail-page .sale-detail-header,
  .sales-detail-page .sale-invoice-hero,
  .sales-detail-page .sale-info-grid,
  .sales-detail-page .sale-notes-area {
    grid-template-columns: 1fr;
  }

  .sales-detail-page .sale-detail-actions {
    width: 100%;
    flex-direction: column;
  }

  .sales-detail-page .sale-detail-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .sales-detail-page .sale-invoice-meta-card {
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--sale-detail-border);
  }

  .sales-detail-page .sale-detail-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   PREMIUM SALES LIST DASHBOARD
   Scoped: .sales-list-page
   ========================================================= */
.sales-list-page.premium-sales-dashboard {
  background: #f8fafc;
  padding: 24px;
  color: #0f172a;
}
.sales-list-page .sales-dash-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.sales-list-page .sales-dash-header h1 { margin:0; font-size:30px; font-weight:900; letter-spacing:-.03em; }
.sales-list-page .sales-dash-header p { margin:6px 0 0; color:#64748b; font-weight:600; }
.sales-list-page .sales-primary-action { height:54px; padding:0 28px; border:0; border-radius:12px; background:#059669; color:#fff; font-weight:900; display:inline-flex; align-items:center; gap:10px; box-shadow:0 14px 28px rgba(5,150,105,.24); cursor:pointer; }
.sales-list-page .sales-analytics-grid { display:grid; grid-template-columns: repeat(4, minmax(170px,1fr)) 1.9fr; gap:16px; margin-bottom:18px; }
.sales-list-page .sales-kpi-card, .sales-list-page .sales-mode-card, .sales-list-page .sales-dashboard-card { background:#fff; border:1px solid #e7edf5; border-radius:18px; box-shadow:0 10px 30px rgba(15,23,42,.04); }
.sales-list-page .sales-kpi-card { min-height:160px; padding:24px; display:grid; align-content:start; gap:16px; }
.sales-list-page .sales-kpi-icon { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-size:20px; }
.sales-list-page .sales-kpi-card.green { background:linear-gradient(135deg,#fff,#f0fdf4); }
.sales-list-page .sales-kpi-card.blue { background:linear-gradient(135deg,#fff,#eff6ff); }
.sales-list-page .sales-kpi-card.purple { background:linear-gradient(135deg,#fff,#f5f3ff); }
.sales-list-page .sales-kpi-card.orange { background:linear-gradient(135deg,#fff,#fff7ed); }
.sales-list-page .green .sales-kpi-icon { background:#dcfce7; color:#059669; }
.sales-list-page .blue .sales-kpi-icon { background:#dbeafe; color:#2563eb; }
.sales-list-page .purple .sales-kpi-icon { background:#ede9fe; color:#7c3aed; }
.sales-list-page .orange .sales-kpi-icon { background:#ffedd5; color:#ea580c; }
.sales-list-page .sales-kpi-card span { font-weight:900; }
.sales-list-page .sales-kpi-card strong { font-size:25px; letter-spacing:.04em; }
.sales-list-page .sales-kpi-meta { display:flex; gap:16px; font-size:13px; }
.sales-list-page .sales-kpi-meta b { color:#059669; }
.sales-list-page .sales-kpi-meta.negative b { color:#ef4444; }
.sales-list-page .sales-kpi-meta em { color:#64748b; font-style:normal; }
.sales-list-page .sales-mode-card { padding:18px 22px; }
.sales-list-page .sales-mode-head, .sales-list-page .sales-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sales-list-page .sales-mode-head h3, .sales-list-page .sales-card-head h2, .sales-list-page .sales-search-card h2 { margin:0; font-size:18px; font-weight:900; }
.sales-list-page .sales-mode-head select { height:36px; border:1px solid #e5e7eb; border-radius:9px; padding:0 12px; font-weight:700; }
.sales-list-page .sales-mode-body { display:flex; align-items:center; gap:24px; margin-top:18px; }
.sales-list-page .sales-donut { width:138px; height:138px; border-radius:50%; display:grid; place-items:center; align-content:center; background:conic-gradient(#059669 0 52%, #3b82f6 52% 79%, #fb923c 79% 92%, #a78bfa 92% 100%); position:relative; }
.sales-list-page .sales-donut:before { content:""; position:absolute; inset:28px; background:#fff; border-radius:50%; }
.sales-list-page .sales-donut span, .sales-list-page .sales-donut strong { position:relative; z-index:1; }
.sales-list-page .sales-donut span { color:#64748b; font-size:12px; }
.sales-list-page .sales-donut strong { font-size:14px; }
.sales-list-page .sales-mode-legend { flex:1; display:grid; gap:14px; }
.sales-list-page .mode-line { display:flex; justify-content:space-between; gap:16px; font-size:13px; font-weight:800; }
.sales-list-page .mode-line span { display:flex; align-items:center; gap:8px; color:#334155; }
.sales-list-page .mode-line i { width:10px; height:10px; border-radius:50%; display:inline-block; background:#059669; }
.sales-list-page .mode-line.bank i { background:#3b82f6; } .sales-list-page .mode-line.credit i { background:#fb923c; } .sales-list-page .mode-line.partial i { background:#a78bfa; }
.sales-list-page .sales-dashboard-card { padding:22px; margin-bottom:18px; }
.sales-list-page .sales-link-btn { border:0; background:transparent; color:#059669; font-weight:900; cursor:pointer; }
.sales-list-page .top-selling-list { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.sales-list-page .top-selling-item { min-height:92px; border:1px solid #e5e7eb; border-radius:14px; padding:16px; display:grid; grid-template-columns:34px 62px 1fr auto; gap:16px; align-items:center; background:linear-gradient(135deg,#fff,#f8fafc); }
.sales-list-page .top-rank { width:32px; height:32px; border-radius:12px; color:#fff; display:grid; place-items:center; font-weight:900; background:#059669; }
.sales-list-page .top-selling-item.blue .top-rank { background:#0284c7; } .sales-list-page .top-selling-item.orange .top-rank { background:#ea580c; }
.sales-list-page .top-product-img { width:58px; height:42px; border-radius:10px; background:#e2e8f0; display:grid; place-items:center; color:#334155; }
.sales-list-page .top-product-name span, .sales-list-page .top-product-revenue span { display:block; margin-top:7px; color:#059669; font-size:12px; font-weight:800; }
.sales-list-page .top-selling-item.blue .top-product-name span { color:#0284c7; } .sales-list-page .top-selling-item.orange .top-product-name span { color:#ea580c; }
.sales-list-page .top-product-revenue { text-align:right; }
.sales-list-page .sales-search-toolbar { display:grid; grid-template-columns: minmax(260px, 1fr) 220px 150px 150px auto auto auto; gap:14px; align-items:end; margin-top:14px; }
.sales-list-page .sales-search-input-wrap { position:relative; display:block; }
.sales-list-page .sales-search-input-wrap input, .sales-list-page .sales-filter-field input, .sales-list-page .sales-filter-field select { width:100%; height:46px; border:1px solid #e2e8f0; border-radius:10px; padding:0 14px; font-weight:700; color:#0f172a; background:#fff; }
.sales-list-page .sales-search-input-wrap input { padding-right:42px; }
.sales-list-page .sales-search-input-wrap i { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#475569; }
.sales-list-page .sales-filter-field span { display:block; margin-bottom:7px; font-size:12px; font-weight:900; color:#334155; }
.sales-list-page .sales-search-btn, .sales-list-page .sales-reset-btn { height:46px; border-radius:10px; border:1px solid #e2e8f0; padding:0 18px; font-weight:900; cursor:pointer; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.sales-list-page .sales-search-btn { background:#059669; color:#fff; border-color:#059669; }
.sales-list-page .sales-reset-btn { background:#fff; color:#334155; }
.sales-list-page .sales-quick-filters { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.sales-list-page .sales-quick-filters span { font-size:12px; font-weight:900; }
.sales-list-page .sales-quick-filters button { border:0; border-radius:9px; padding:9px 14px; font-weight:800; background:#f1f5f9; color:#0f172a; }
.sales-list-page .sales-quick-filters button.active { background:#dcfce7; color:#059669; box-shadow:inset 0 0 0 1px #86efac; }
.sales-list-page .sales-table-actions { display:flex; gap:10px; }
.sales-list-page .sales-table-actions button { height:42px; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:0 16px; font-weight:900; }
.sales-list-page .sales-modern-table-wrap { margin-top:14px; border:1px solid #e5e7eb; border-radius:14px; overflow:auto; }
.sales-list-page .sales-modern-table th { background:#f8fafc; color:#334155; font-size:12px; letter-spacing:.02em; }
.sales-list-page .sales-modern-table td { border-bottom:1px solid #eef2f7; }
.sales-list-page .sales-modern-table tbody tr:hover { background:#f8fafc; }
@media (max-width: 1400px) { .sales-list-page .sales-analytics-grid { grid-template-columns:repeat(2,1fr); } .sales-list-page .sales-mode-card { grid-column:span 2; } .sales-list-page .sales-search-toolbar { grid-template-columns:1fr 1fr; } }
@media (max-width: 900px) { .sales-list-page .top-selling-list { grid-template-columns:1fr; } .sales-list-page .sales-analytics-grid { grid-template-columns:1fr; } .sales-list-page .sales-mode-card { grid-column:auto; } .sales-list-page .sales-search-toolbar { grid-template-columns:1fr; } .sales-list-page .sales-dash-header { flex-direction:column; align-items:flex-start; } }


/* =========================================================
   SALES LIST FINAL POLISH / FIXES
   ========================================================= */
.sales-list-page.premium-sales-dashboard {
  padding-top: 8px !important;
}

.sales-list-page .sales-dash-header {
  margin-bottom: 16px !important;
}

.sales-list-page .sales-mode-card {
  min-width: 0;
  overflow: hidden;
}

.sales-list-page .sales-mode-head {
  display: grid !important;
  grid-template-columns: minmax(128px, 1fr) minmax(150px, 168px);
  align-items: start !important;
  gap: 14px !important;
}

.sales-list-page .sales-mode-head h3 {
  line-height: 1.15;
  white-space: normal;
}

.sales-list-page .sales-mode-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.sales-list-page .sales-mode-head select {
  width: 100% !important;
  min-width: 150px;
  height: 42px !important;
  padding: 0 38px 0 14px !important;
  color: #0f172a !important;
  background-color: #fff !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 42px;
  appearance: auto;
  -webkit-appearance: menulist;
}

.sales-list-page .sales-mode-body {
  align-items: center !important;
  gap: 18px !important;
}

.sales-list-page .sales-mode-legend {
  min-width: 0;
  gap: 10px !important;
}

.sales-list-page .mode-line {
  display: grid !important;
  grid-template-columns: minmax(72px, .7fr) minmax(122px, 1fr) 48px;
  align-items: center;
  gap: 10px !important;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px !important;
}

.sales-list-page .mode-line:last-child {
  border-bottom: 0;
}

.sales-list-page .mode-label {
  color: #334155;
  font-weight: 900;
}

.sales-list-page .mode-amount {
  color: #0f172a;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.sales-list-page .mode-percent {
  justify-self: end;
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.sales-list-page .row-action-menu button.warning {
  color: #d97706;
}

.alfaa-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .44);
  backdrop-filter: blur(5px);
}

.alfaa-confirm-backdrop.open {
  display: flex;
}

.alfaa-confirm-card {
  position: relative;
  width: min(460px, 100%);
  padding: 26px;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .28);
  text-align: center;
}

.alfaa-confirm-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
}

.alfaa-confirm-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 22px;
}

.alfaa-confirm-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 20px;
  font-weight: 950;
}

.alfaa-confirm-card p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.alfaa-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.alfaa-confirm-actions .btn-danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

@media (max-width: 1500px) {
  .sales-list-page .sales-mode-body {
    flex-direction: column;
    align-items: stretch !important;
  }

  .sales-list-page .sales-donut {
    align-self: center;
  }
}

@media (max-width: 900px) {
  .sales-list-page.premium-sales-dashboard {
    padding-top: 4px !important;
  }

  .sales-list-page .sales-mode-head {
    grid-template-columns: 1fr;
  }
}
/* Transaction create pages open instantly: no fade/slide animation */
.sale-page,.sale-page *{animation:none!important}

/* =========================================================
   SALES SERIAL MODAL AVAILABLE SERIALS FIX V15
   Scope: sales invoice serial modal only
   ========================================================= */
.serial-section-title {
  margin: 14px 0 8px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.serial-available-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.serial-available-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.serial-available-pill:hover {
  background: #dbeafe;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .14);
  transform: translateY(-1px);
}

.serial-available-pill em {
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}

.serial-pill.selected {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}


/* =========================================================
   SALES SERIAL + ONLINE ORDER USABILITY PATCH V25
   Scope: sale create/edit modal and online fields only
   ========================================================= */
.sales-page .serial-modal {
  max-height: min(86vh, 760px);
}
.sales-page .serial-modal .sales-modal-body {
  max-height: calc(min(86vh, 760px) - 148px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sales-page .serial-modal .sales-modal-body::-webkit-scrollbar,
.sales-page .serial-list::-webkit-scrollbar,
.sales-page .serial-available-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.sales-page .serial-list,
.sales-page .serial-available-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.sales-page .serial-list { max-height: 150px; }
.sales-page .serial-available-list { max-height: 200px; }
.sales-page .online-payment-note {
  min-height: 45px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.sales-page .online-payment-note i { color: #059669; font-size: 15px; }


/* =========================================================
   SALES FINAL TOUCH PATCH V26
   Scope: serial modal inner scrolling only
   ========================================================= */
.sales-page .serial-modal .sales-modal-body {
  overflow-y: auto !important;
  touch-action: pan-y !important;
}
.sales-page .serial-list,
.sales-page .serial-available-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.sales-page .serial-list {
  max-height: 185px !important;
  min-height: 54px;
  align-content: flex-start;
}
.sales-page .serial-available-list {
  max-height: 245px !important;
  min-height: 92px;
  align-content: flex-start;
}
.sales-page .serial-list::-webkit-scrollbar,
.sales-page .serial-available-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}