/**
 * POS Custom Styling - Stocky POS
 * Cleaned & Scoped Styles for:
 * 1. POS Update Detail Modal (50/50 side-by-side Product Name & Image Box)
 * 2. Card Products & Containers (Strict layout constraint to prevent footer overflow)
 * 3. POS Features Slide-out Panel ('POS Filter' Button & Dropdown)
 * 4. Search Category & Search Product (Unified Pill Inputs)
 */

/* =========================================================
   1. POS UPDATE DETAIL MODAL (50/50 PRODUCT NAME & PICTURE BOX)
   ========================================================= */
.pos-update-detail-modal .modal-dialog {
  max-width: 680px;
  margin: 1.5rem auto;
}
.pos-update-detail-modal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.pos-update-detail-modal .modal-header {
  border-bottom: 1px solid #f1f5f9;
  padding: 14px 20px;
  background: #f8fafc;
}
.pos-update-detail-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  word-break: break-word;
}
.pos-update-detail-modal .modal-body {
  padding: 18px 20px;
}
.pos-product-image-box {
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  border-radius: 6px;
  padding: 3px 10px;
  min-height: 42px;
  height: 42px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.pos-product-image-box:hover {
  border-color: #8b5cf6 !important;
  background: #faf5ff !important;
}
.btn-upload-photo {
  background: #f5f3ff !important;
  color: #7c3aed !important;
  border: 1px solid #ddd6fe !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease;
}
.btn-upload-photo:hover {
  background: #7c3aed !important;
  color: #ffffff !important;
  border-color: #7c3aed !important;
}

@media (max-width: 576px) {
  .pos-update-detail-modal .modal-dialog {
    margin: 8px auto !important;
    max-width: calc(100% - 16px) !important;
  }
  .pos-update-detail-modal .modal-body {
    padding: 12px 14px !important;
  }
  .pos-product-image-box {
    height: auto !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
  }
  .pos-update-detail-modal input,
  .pos-update-detail-modal select,
  .pos-update-detail-modal .v-select .vs__dropdown-toggle {
    min-height: 40px !important;
    font-size: 15px !important;
  }
}

/* =========================================================
   2. CARD PRODUCTS & CONTAINER CONSTRAINTS
   Strict overflow: hidden on the card so products-container scrolls internally
   and does NOT push pagination or cards down into/under the bottom bar!
   ========================================================= */
.card.card-products,
.card-products {
  overflow: hidden !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.products-container {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding-bottom: 20px !important;
}

.pos-container {
  overflow: hidden !important;
}

/* Toolbar and filter-section must allow dropdown popup to pop out freely while preventing cutoff */
.pos-products-toolbar,
.card-header.pos-products-toolbar,
.card.card-products .card-header {
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Ensure all modals & backdrop are always above toolbar & page elements */
.modal-backdrop {
  z-index: 1040 !important;
}
.modal {
  z-index: 1050 !important;
}

.pos-products-toolbar .filter-section,
.card.card-products .card-header .filter-section,
.filter-section {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  padding-right: 4px !important;
}

/* =========================================================
   3. POS FEATURES DROPDOWN & SLIDE-OUT PANEL ('POS Filter')
   Centered directly beneath POS Filter button with arrow notch
   ========================================================= */
.pos-features-dropdown-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 100 !important;
  flex: 0 0 auto !important;
}

.pos-features-trigger-btn {
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.pos-features-trigger-btn:hover {
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
  background: #faf5ff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
}

.pos-features-trigger-btn.is-open {
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

.pos-features-trigger-btn.has-active-filter {
  border-color: #8b5cf6 !important;
}

.pos-features-trigger-btn .features-btn-icon {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

.pos-features-trigger-btn .features-btn-label {
  line-height: 1 !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

.pos-features-trigger-btn .features-active-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #8b5cf6 !important;
  box-shadow: 0 0 0 2px #f5f3ff, 0 0 6px rgba(139, 92, 246, 0.6) !important;
  flex-shrink: 0 !important;
}

.pos-features-trigger-btn .features-btn-chevron {
  width: 14px !important;
  height: 14px !important;
  color: #64748b !important;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
}

.pos-features-trigger-btn .features-btn-chevron.rotate-180 {
  transform: rotate(180deg) !important;
  color: #7c3aed !important;
}

/* Floating Slide-out Panel Box (Perfect Center Alignment) */
.pos-features-panel-box {
  position: absolute !important;
  top: calc(100% + 11px) !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, 0) !important;
  transform-origin: top center !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.18), 0 8px 16px -4px rgba(15, 23, 42, 0.08) !important;
  padding: 8px 12px !important;
  min-width: max-content !important;
  max-width: 95vw !important;
  white-space: nowrap !important;
  display: block !important;
  animation: featuresBoxSlideIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Elegant Center Arrow Notch pointing to POS Filter trigger button */
.pos-features-panel-box::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  left: 50% !important;
  transform: translateX(-50%) rotate(45deg) !important;
  width: 11px !important;
  height: 11px !important;
  background: #ffffff !important;
  border-left: 1.5px solid #e2e8f0 !important;
  border-top: 1.5px solid #e2e8f0 !important;
  z-index: 10 !important;
}

@keyframes featuresBoxSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.pos-features-panel-box .features-panel-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure controls inside the panel look cohesive & compact */
.pos-features-panel-box .flat-select {
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0 24px 0 10px !important;
  background-color: #f8fafc !important;
  color: #334155 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.pos-features-panel-box select.flat-select {
  min-width: 100px !important;
  max-width: 125px !important;
}

.pos-features-panel-box .flat-select:hover,
.pos-features-panel-box .flat-select:focus {
  border-color: #8b5cf6 !important;
  background: #ffffff !important;
}

.pos-features-panel-box .subcat-icon-trigger {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.pos-features-panel-box .subcat-icon-trigger:hover,
.pos-features-panel-box .subcat-icon-trigger.active {
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
  background: #faf5ff !important;
}

.pos-features-panel-box .reset-filters-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.pos-features-panel-box .reset-filters-btn:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  transform: rotate(180deg) !important;
}

.pos-features-panel-box .code-filter-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
}

.pos-features-panel-box .code-filter-toggle:hover {
  border-color: #8b5cf6 !important;
  background: #faf5ff !important;
  color: #7c3aed !important;
}

.pos-features-panel-box .code-filter-toggle svg {
  width: 15px !important;
  height: 15px !important;
}

.pos-features-panel-box .view-toggle,
.pos-features-panel-box .grid-column-toggle {
  display: flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  padding: 3px !important;
  border-radius: 12px !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

.pos-features-panel-box .view-toggle-btn,
.pos-features-panel-box .grid-column-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.pos-features-panel-box .view-toggle-btn.active,
.pos-features-panel-box .grid-column-btn.active {
  background: #ffffff !important;
  color: #7c3aed !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .pos-features-panel-box {
    position: fixed !important;
    top: auto !important;
    bottom: 80px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    white-space: normal !important;
  }
  .pos-features-panel-box::before {
    display: none !important;
  }
  .pos-features-panel-box .features-panel-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
}

/* =========================================================
   4. SEARCH CATEGORY & SEARCH PRODUCT UNIFIED PILL INPUTS
   Both inputs styled identically with height 38px, pill radius, left icon, clear button
   ========================================================= */
.category-autocomplete-wrapper,
.global-product-search-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.category-search-input-wrapper,
.global-search-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 145px !important;
  min-width: 110px !important;
  max-width: 175px !important;
  flex: 1 1 135px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  left: auto !important;
  margin: 0 !important;
}

.category-search-input,
.global-search-input {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 0 12px 0 32px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  height: 38px !important;
  outline: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.category-search-input::placeholder,
.global-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

.category-search-input:hover,
.global-search-input:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

.category-search-input:focus,
.global-search-input:focus {
  background: #ffffff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
}

.category-search-input-wrapper .search-icon,
.global-search-input-wrapper .search-icon {
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.category-search-input-wrapper .clear-search-btn,
.global-search-input-wrapper .clear-search-btn {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.category-search-input-wrapper .clear-search-btn:hover,
.global-search-input-wrapper .clear-search-btn:hover {
  color: #334155 !important;
  background: #e2e8f0 !important;
}

.category-search-input-wrapper .clear-search-btn svg,
.global-search-input-wrapper .clear-search-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hide the old square toggle button completely */
.global-search-toggle-btn {
  display: none !important;
}

/* Dropdown positions */
.global-search-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 300px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
}

.global-search-item {
  padding: 10px 14px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #334155 !important;
  transition: background 0.15s ease !important;
}

.global-search-item:hover,
.global-search-item.active {
  background: #f1f5f9 !important;
  color: #7c3aed !important;
}

.global-search-empty {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 99999 !important;
  color: #64748b !important;
  font-size: 13px !important;
}

.category-dropdown {
  position: fixed !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

.category-dropdown-item {
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #334155 !important;
  transition: background 0.15s ease !important;
}

.category-dropdown-item:hover,
.category-dropdown-item.active {
  background: #f1f5f9 !important;
  color: #7c3aed !important;
}

.category-dropdown-empty {
  position: fixed !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  color: #64748b !important;
  font-size: 13px !important;
}


/* =========================================================
   SEARCH CATEGORY & SEARCH PRODUCT UNIFIED STYLES
   ========================================================= */
.category-autocomplete-wrapper,
.global-product-search-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.category-search-input-wrapper,
.global-search-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.category-search-input,
.global-search-input {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  padding: 0 12px 0 32px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  width: 100% !important;
  height: 38px !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.category-search-input::placeholder,
.global-search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

.category-search-input:hover,
.global-search-input:hover {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}

.category-search-input:focus,
.global-search-input:focus {
  background: #ffffff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
}

.category-search-input-wrapper .search-icon,
.global-search-input-wrapper .search-icon {
  position: absolute !important;
  left: 12px !important;
  right: auto !important;
  width: 16px !important;
  height: 16px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.category-search-input-wrapper .clear-search-btn,
.global-search-input-wrapper .clear-search-btn {
  position: absolute !important;
  right: 8px !important;
  left: auto !important;
  width: 22px !important;
  height: 22px !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.category-search-input-wrapper .clear-search-btn:hover,
.global-search-input-wrapper .clear-search-btn:hover {
  color: #334155 !important;
  background: #e2e8f0 !important;
}

.category-search-input-wrapper .clear-search-btn svg,
.global-search-input-wrapper .clear-search-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hide the old square toggle button completely */
.global-search-toggle-btn {
  display: none !important;
}

/* Dropdown positions */
.global-search-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: auto !important;
  min-width: 300px !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  z-index: 99999 !important;
}

.global-search-empty {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 99999 !important;
  color: #64748b !important;
  font-size: 13px !important;
}


/* =========================================================
   CATEGORY PRODUCT NOTES (CHEAT SHEET) - TOOLBAR BUTTON & MODAL
   ========================================================= */

/* 1. Trigger Button in POS Toolbar */
.pos-cat-notes-trigger-btn {
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
  user-select: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  white-space: nowrap !important;
}

.pos-cat-notes-trigger-btn:hover {
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
  background: #faf5ff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
  transform: translateY(-1px) !important;
}

.pos-cat-notes-trigger-btn.is-open {
  border-color: #7c3aed !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2) !important;
}

.pos-cat-notes-trigger-btn .cat-notes-btn-icon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

.pos-cat-notes-trigger-btn .cat-notes-btn-label {
  line-height: 1 !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  letter-spacing: 0.2px !important;
}

.pos-cat-notes-trigger-btn .cat-notes-shortcut-badge {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  line-height: 1 !important;
  transition: all 0.2s !important;
}

.pos-cat-notes-trigger-btn:hover .cat-notes-shortcut-badge,
.pos-cat-notes-trigger-btn.is-open .cat-notes-shortcut-badge {
  background: #ede9fe !important;
  color: #7c3aed !important;
  border-color: #ddd6fe !important;
}

/* 2. Modal Overlay with Glassmorphism Backdrop */
.cat-notes-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Modal Card with Pop-in Animation */
.cat-notes-modal-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3), 0 10px 25px -5px rgba(15, 23, 42, 0.15) !important;
  width: 100% !important;
  max-width: 840px !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: catNotesPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes catNotesPopIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Global SVG Safety Guard for Category Notes Modal */
.cat-notes-modal-card svg {
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.cat-notes-modal-card svg:not([width]) {
  max-width: 24px !important;
  max-height: 24px !important;
}

/* 3. Modal Header */
.cat-notes-header {
  padding: 16px 22px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #fafbfc !important;
  flex-shrink: 0 !important;
}

.cat-notes-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.cat-notes-header-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
  overflow: hidden !important;
}

.cat-notes-header-icon svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  stroke: #ffffff !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.cat-notes-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
}

.cat-notes-subtitle {
  display: block !important;
  margin: 3px 0 0 !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

.cat-notes-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.cat-notes-shortcut-hint {
  font-size: 12px !important;
  color: #64748b !important;
  background: #f1f5f9 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
}

.cat-notes-shortcut-hint kbd {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
  color: #334155 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
}

.cat-notes-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.cat-notes-close-btn:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  transform: rotate(90deg) !important;
}

.cat-notes-close-btn svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0 !important;
}

/* 4. Toolbar: Search Bar & Add Button */
.cat-notes-toolbar {
  padding: 12px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

.cat-notes-search-wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.cat-notes-search-wrap svg {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.cat-notes-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 34px 0 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  font-size: 13.5px !important;
  color: #1e293b !important;
  outline: none !important;
  transition: all 0.2s !important;
  box-sizing: border-box !important;
}

.cat-notes-search-input:focus {
  background: #ffffff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
}

.cat-notes-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 2px 6px !important;
}

.cat-notes-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

.cat-notes-count-badge {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  white-space: nowrap !important;
}

.cat-notes-add-btn {
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: none !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.cat-notes-add-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
  transform: translateY(-1px) !important;
}

.cat-notes-add-btn svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  flex-shrink: 0 !important;
}

/* 5. Add / Edit Inline Form Card */
.cat-notes-form-card {
  margin: 12px 22px 0 !important;
  background: #f8fafc !important;
  border: 1.5px solid #ddd6fe !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  animation: catNotesFormSlide 0.2s ease-out forwards !important;
  flex-shrink: 0 !important;
}

@keyframes catNotesFormSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cat-notes-form-header {
  padding: 10px 16px !important;
  background: #ede9fe !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.cat-notes-form-header h4 {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #6d28d9 !important;
}

.cat-notes-form-close {
  background: transparent !important;
  border: none !important;
  font-size: 18px !important;
  color: #7c3aed !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.cat-notes-form-body {
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.cat-notes-form-group label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
}

.cat-notes-form-group .required {
  color: #ef4444 !important;
}

.cat-notes-input {
  width: 100% !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  outline: none !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.cat-notes-input:focus {
  border-color: #8b5cf6 !important;
}

.cat-notes-textarea {
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  outline: none !important;
  resize: vertical !important;
  min-height: 65px !important;
  background: #ffffff !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

.cat-notes-textarea:focus {
  border-color: #8b5cf6 !important;
}

.cat-notes-hint {
  display: block !important;
  font-size: 11.5px !important;
  color: #64748b !important;
  margin-top: 3px !important;
}

.cat-notes-form-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding-top: 4px !important;
}

.cat-notes-btn-cancel {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #475569 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.cat-notes-btn-save {
  height: 34px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border: none !important;
  background: #7c3aed !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.cat-notes-btn-save:hover {
  background: #6d28d9 !important;
}

/* 6. Content Area & Category Note Cards Grid */
.cat-notes-content-area {
  padding: 16px 22px 24px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 220px !important;
  max-height: calc(85vh - 150px) !important;
}

.cat-notes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

.cat-note-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.cat-note-card:hover {
  border-color: #c4b5fd !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1) !important;
  transform: translateY(-2px) !important;
}

.cat-note-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 8px !important;
}

.cat-note-card-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.cat-note-badge-icon {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.cat-note-category-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cat-note-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
  flex-shrink: 0 !important;
}

.cat-note-card:hover .cat-note-card-actions {
  opacity: 1 !important;
}

.cat-note-action-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.cat-note-action-btn svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
}

.cat-note-action-btn.edit:hover {
  background: #ede9fe !important;
  color: #7c3aed !important;
}

.cat-note-action-btn.delete:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}

.cat-note-card-body {
  flex: 1 !important;
}

.cat-note-chips-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.cat-note-chip {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  user-select: none !important;
}

.cat-note-chip:hover {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border-color: #c4b5fd !important;
  transform: translateY(-1px) !important;
}

/* 7. Empty State */
.cat-notes-empty-state {
  text-align: center !important;
  padding: 36px 20px !important;
  color: #64748b !important;
}

.cat-notes-empty-icon {
  font-size: 36px !important;
  margin-bottom: 10px !important;
}

.cat-notes-empty-state h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin: 0 0 6px !important;
}

.cat-notes-empty-state p {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin: 0 0 14px !important;
  max-width: 380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Transitions */
.cat-notes-fade-enter-active,
.cat-notes-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cat-notes-fade-enter,
.cat-notes-fade-leave-to {
  opacity: 0 !important;
}

/* POS Product Card - Edit / Adjust Stock Button */
.product-details .product-footer .edit-stock-btn,
.product-footer .edit-stock-btn,
.edit-stock-btn {
  flex: 1 !important;
  height: 28px !important;
  border: none !important;
  background: rgba(139, 92, 246, 0.12) !important;
  color: #8b5cf6 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.product-details .product-footer .edit-stock-btn:hover,
.product-footer .edit-stock-btn:hover,
.edit-stock-btn:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  color: #7c3aed !important;
  transform: scale(1.1) !important;
}

.product-details .product-footer .edit-stock-btn:active,
.product-footer .edit-stock-btn:active,
.edit-stock-btn:active {
  transform: scale(0.95) !important;
}

.product-details .product-footer .edit-stock-btn svg,
.product-footer .edit-stock-btn svg,
.edit-stock-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Category Notes Pagination */
.cat-notes-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 18px !important;
  padding: 12px 18px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.cat-notes-page-info {
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.cat-notes-page-info strong {
  color: #1e293b !important;
  font-weight: 700 !important;
}

.cat-notes-page-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.cat-notes-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  user-select: none !important;
}

.cat-notes-page-btn svg {
  width: 15px !important;
  height: 15px !important;
}

.cat-notes-page-btn:hover:not(:disabled) {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25) !important;
}

.cat-notes-page-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8 !important;
}

.cat-notes-page-numbers {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.cat-notes-page-num {
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  outline: none !important;
  user-select: none !important;
}

.cat-notes-page-num:hover:not(.active) {
  background: #eef2ff !important;
  color: #6366f1 !important;
  border-color: #c7d2fe !important;
}

.cat-notes-page-num.active {
  background: #6366f1 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3) !important;
}



/* ==================== SUPPLIER COST & CODE QUICK LOOKUP ==================== */
.pos-supplier-cost-trigger-btn {
  height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #059669 !important;
  background: #ffffff !important;
  color: #065f46 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.08) !important;
  outline: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.pos-supplier-cost-trigger-btn:hover {
  background: #ecfdf5 !important;
  border-color: #047857 !important;
  color: #047857 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.18) !important;
}

.pos-supplier-cost-trigger-btn.is-open {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25) !important;
}

.pos-supplier-cost-trigger-btn .supplier-cost-btn-icon {
  width: 15px !important;
  height: 15px !important;
  color: inherit !important;
  flex-shrink: 0 !important;
}

.pos-supplier-cost-trigger-btn .supplier-cost-btn-label {
  white-space: nowrap !important;
  font-size: 12.5px !important;
  line-height: 1 !important;
  display: inline-block !important;
  letter-spacing: 0.1px !important;
  color: inherit !important;
}

.pos-supplier-cost-trigger-btn .supplier-cost-shortcut-badge {
  background: #e2e8f0 !important;
  color: #475569 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
}

.pos-supplier-cost-trigger-btn.is-open .supplier-cost-shortcut-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Full-Screen Modal Overlay */
.supplier-cost-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 1000000 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Full-Screen Modal Card */
.supplier-cost-modal-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: supplierCostPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes supplierCostPop {
  0% { transform: scale(0.98); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Header */
.supplier-cost-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 24px !important;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #0f172a 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.supplier-cost-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.supplier-cost-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a7f3d0 !important;
  flex-shrink: 0 !important;
}

.supplier-cost-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

.supplier-cost-subtitle {
  font-size: 12px !important;
  color: #a7f3d0 !important;
  display: block !important;
  margin-top: 3px !important;
  font-weight: 400 !important;
}

.supplier-cost-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.supplier-cost-count-pill {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ecfdf5 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.supplier-cost-shortcut-hint {
  font-size: 11px !important;
  color: #cbd5e1 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.supplier-cost-shortcut-hint kbd {
  background: #334155 !important;
  color: #ffffff !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  font-size: 10px !important;
}

.supplier-cost-kbd-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ecfdf5 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.supplier-cost-kbd-hint kbd {
  background: #064e3b !important;
  color: #6ee7b7 !important;
  border: 1px solid #059669 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.supplier-cost-close-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}

.supplier-cost-close-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* Toolbar */
.supplier-cost-toolbar {
  padding: 12px 24px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.supplier-cost-search-wrap {
  position: relative !important;
  flex: 1 !important;
  min-width: 280px !important;
}

.supplier-cost-search-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 17px !important;
  height: 17px !important;
  color: #94a3b8 !important;
  pointer-events: none !important;
}

.supplier-cost-search-input {
  width: 100% !important;
  height: 38px !important;
  padding: 0 36px 0 38px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  outline: none !important;
  transition: all 0.15s !important;
  box-sizing: border-box !important;
}

.supplier-cost-search-input:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

.supplier-cost-search-clear {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 4px !important;
}

.supplier-cost-filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.supplier-cost-select {
  height: 38px !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 12.5px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  outline: none !important;
  cursor: pointer !important;
}

.supplier-cost-select:focus {
  border-color: #059669 !important;
}

.supplier-cost-pills {
  display: inline-flex !important;
  background: #e2e8f0 !important;
  padding: 3px !important;
  border-radius: 8px !important;
  gap: 2px !important;
}

.supplier-cost-pill-btn {
  border: none !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.supplier-cost-pill-btn.active {
  background: #ffffff !important;
  color: #065f46 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Table Area */
.supplier-cost-table-wrap {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.supplier-cost-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  text-align: left !important;
}

.supplier-cost-table thead th {
  position: sticky !important;
  top: 0 !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid #cbd5e1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  z-index: 10 !important;
}

.supplier-cost-table tbody td {
  padding: 11px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
  color: #1e293b !important;
}

.supplier-cost-row {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
}

.supplier-cost-row:hover td {
  background: #f0fdf4 !important;
}

/* Selected row via keyboard Up/Down or click */
.supplier-cost-row.is-selected {
  position: relative !important;
  z-index: 6 !important;
  animation: rowSelectGlow 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.supplier-cost-row.is-selected td {
  background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 40%, #e6fffa 100%) !important;
  border-top: 1.5px solid #6ee7b7 !important;
  border-bottom: 1.5px solid #6ee7b7 !important;
}

.supplier-cost-row.is-selected td:first-child {
  position: relative !important;
  border-left: 6px solid #059669 !important;
}

@keyframes rowSelectGlow {
  0% {
    transform: scale(0.995);
    filter: brightness(0.96);
  }
  50% {
    transform: scale(1.008);
    filter: brightness(1.03);
  }
  100% {
    transform: scale(1.003);
    filter: brightness(1);
  }
}

.supplier-cost-row.is-selected .row-idx-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.45) !important;
  animation: pulseIdxBadge 1.2s infinite alternate !important;
}

@keyframes pulseIdxBadge {
  0% { transform: scale(1); box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4); }
  100% { transform: scale(1.08); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.65); }
}

.supplier-cost-row.is-selected .supplier-cost-prod-name {
  color: #064e3b !important;
  font-weight: 700 !important;
  font-size: 17.5px !important;
  text-shadow: 0 1px 2px rgba(5, 150, 105, 0.08) !important;
}

.supplier-cost-row.is-selected .supplier-cost-cart-add-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35), 0 4px 14px rgba(5, 150, 105, 0.45) !important;
  transform: scale(1.08) !important;
  font-weight: 700 !important;
  animation: cartBtnPulse 1.6s infinite alternate !important;
}

@keyframes cartBtnPulse {
  0% { transform: scale(1.04); box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3), 0 2px 8px rgba(5, 150, 105, 0.3); }
  100% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.5), 0 6px 18px rgba(5, 150, 105, 0.6); }
}

/* Code Badge */
.code-badge-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  color: #0284c7 !important;
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.code-badge-btn .code-val {
  font-size: 16px !important;
}

.code-badge-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

.barcode-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 15px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

.supplier-cost-prod-name {
  font-weight: 600 !important;
  color: #0f172a !important;
  font-size: 16.5px !important;
  line-height: 1.35 !important;
}

.supplier-cost-prod-sub {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

/* Cost & VAT Badges */
.cost-price-badge {
  display: inline-block !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
}

.cost-vat-badge {
  display: inline-block !important;
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #7c3aed !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

.stock-pill {
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.stock-pill.stock-in {
  background: #ecfdf5 !important;
  color: #059669 !important;
}

.stock-pill.stock-out {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.supplier-cost-cart-add-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.supplier-cost-cart-add-btn:hover {
  background: #2563eb !important;
  transform: scale(1.04) !important;
}

/* Empty State */
.supplier-cost-empty {
  text-align: center !important;
  padding: 60px 20px !important;
  color: #64748b !important;
}

.supplier-cost-empty-icon {
  font-size: 40px !important;
  margin-bottom: 12px !important;
}

/* Footer / Pagination */
.supplier-cost-footer {
  padding: 12px 24px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.supplier-cost-page-info {
  font-size: 12.5px !important;
  color: #64748b !important;
}

.supplier-cost-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.supplier-cost-pagination .page-nav-btn {
  padding: 5px 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #334155 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.supplier-cost-pagination .page-nav-btn:hover:not(:disabled) {
  border-color: #059669 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
}

.supplier-cost-pagination .page-nav-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.supplier-cost-pagination .page-current-display {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: #059669 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* POS Product Cards & Modal - Product Name, Brand / 5-6 Digit Code & Barcode font +3px */
.product-details .product-name,
.product-name,
.product-name .product-name-text {
  font-size: 18px !important;
}

.product-details .product-brand,
.product-brand {
  font-size: 18px !important;
}



/* ==========================================================================
   ANTIGRAVITY IDE "DARK MODERN" THEME FOR POS & SUPPLIER COST LIST
   Strictly matched with Antigravity / VS Code Dark Modern design language:
   Canvas: #1e1e1e | Surface: #252526 | Header: #181818 | Accent: #007acc / #4fc1ff
   ========================================================================== */

/* Dark Modern Global Scrollbars */
body.dark-theme ::-webkit-scrollbar,
.dark-theme ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar,
body.dark ::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.dark-theme ::-webkit-scrollbar-track,
.dark-theme ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track,
body.dark ::-webkit-scrollbar-track {
  background: #1e1e1e !important;
}

body.dark-theme ::-webkit-scrollbar-thumb,
.dark-theme ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
  background: #333333 !important;
  border-radius: 4px !important;
}

body.dark-theme ::-webkit-scrollbar-thumb:hover,
.dark-theme ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover,
body.dark ::-webkit-scrollbar-thumb:hover {
  background: #444444 !important;
}

/* 1. Main POS Layout & Background */
body.dark-theme .pos-codecanyon,
.dark-theme .pos-codecanyon,
[data-theme="dark"] .pos-codecanyon,
body.dark .pos-codecanyon {
  background-color: #1e1e1e !important;
  color: #cccccc !important;
}

body.dark-theme .pos-container,
.dark-theme .pos-container,
[data-theme="dark"] .pos-container,
body.dark .pos-container {
  background: transparent !important;
}

/* 2. Top Header */
body.dark-theme .pos-header,
.dark-theme .pos-header,
[data-theme="dark"] .pos-header,
body.dark .pos-header {
  background: #181818 !important;
  border-bottom: 1px solid #2b2b2b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .pos-header .brand-icon,
.dark-theme .pos-header .brand-icon {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #4fc1ff !important;
}

body.dark-theme .pos-header .search-wrapper,
.dark-theme .pos-header .search-wrapper {
  background: #252526 !important;
  border: 1.5px solid #3e3e42 !important;
}

body.dark-theme .pos-header .search-wrapper:focus-within,
.dark-theme .pos-header .search-wrapper:focus-within {
  border-color: #007acc !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.25) !important;
}

body.dark-theme .pos-header .search-input,
.dark-theme .pos-header .search-input {
  color: #ffffff !important;
  background: transparent !important;
}

body.dark-theme .pos-header .search-input::placeholder,
.dark-theme .pos-header .search-input::placeholder {
  color: #6e7681 !important;
}

body.dark-theme .pos-header .search-icon,
.dark-theme .pos-header .search-icon {
  color: #858585 !important;
}

body.dark-theme .action-btn-icon,
.dark-theme .action-btn-icon {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #cccccc !important;
  transition: all 0.15s ease !important;
}

body.dark-theme .action-btn-icon:hover,
.dark-theme .action-btn-icon:hover {
  background: #2d2d2d !important;
  border-color: #007acc !important;
  color: #ffffff !important;
}

body.dark-theme .btn-dark-mode,
.dark-theme .btn-dark-mode {
  color: #dcdcaa !important;
}

body.dark-theme .pos-autocomplete-results,
.dark-theme .pos-autocomplete-results {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .pos-autocomplete-item,
.dark-theme .pos-autocomplete-item {
  color: #cccccc !important;
  border-bottom: 1px solid #2d2d2d !important;
}

body.dark-theme .pos-autocomplete-item:hover,
.dark-theme .pos-autocomplete-item:hover {
  background: #2d2d2d !important;
  color: #4fc1ff !important;
}

body.dark-theme .customer-select-header .vs__dropdown-toggle,
.dark-theme .customer-select-header .vs__dropdown-toggle {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .customer-select-header .vs__selected,
.dark-theme .customer-select-header .vs__selected {
  color: #4fc1ff !important;
}

body.dark-theme .customer-select-header .vs__search,
.dark-theme .customer-select-header .vs__search {
  color: #ffffff !important;
}

body.dark-theme .customer-select-header .vs__search::placeholder,
.dark-theme .customer-select-header .vs__search::placeholder {
  color: #6e7681 !important;
}

body.dark-theme .customer-select-header .vs__dropdown-menu,
.dark-theme .customer-select-header .vs__dropdown-menu {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .customer-select-header .vs__dropdown-option,
.dark-theme .customer-select-header .vs__dropdown-option {
  color: #cccccc !important;
}

body.dark-theme .customer-select-header .vs__dropdown-option--highlight,
.dark-theme .customer-select-header .vs__dropdown-option--highlight {
  background: #007acc !important;
  color: #ffffff !important;
}

/* 3. Left Column: Unified Checkout & Cart Section */
body.dark-theme .card-unified-checkout,
.dark-theme .card-unified-checkout {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-theme .checkout-header,
.dark-theme .checkout-header {
  background: #1f1f1f !important;
  border-bottom: 1px solid #2d2d2d !important;
  color: #ffffff !important;
}

body.dark-theme .checkout-header h3,
.dark-theme .checkout-header h3 {
  color: #ffffff !important;
}

body.dark-theme .checkout-header span,
.dark-theme .checkout-header span {
  background: #2d2d2d !important;
  border-color: #3e3e42 !important;
  color: #cccccc !important;
}

body.dark-theme .cart-section,
.dark-theme .cart-section {
  background: #252526 !important;
}

body.dark-theme .empty-checkout-state,
.dark-theme .empty-checkout-state {
  color: #6e7681 !important;
}

body.dark-theme .empty-checkout-state svg,
.dark-theme .empty-checkout-state svg {
  stroke: #475569 !important;
}

body.dark-theme .empty-checkout-state .empty-title,
.dark-theme .empty-checkout-state .empty-title {
  color: #858585 !important;
}

body.dark-theme .empty-checkout-state .empty-hint,
.dark-theme .empty-checkout-state .empty-hint {
  color: #64748b !important;
}

body.dark-theme .cart-item-card,
.dark-theme .cart-item-card {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

body.dark-theme .cart-item-card:hover,
.dark-theme .cart-item-card:hover {
  border-color: #3e3e42 !important;
}

body.dark-theme .cart-item-card .item-name,
.dark-theme .cart-item-card .item-name {
  color: #ffffff !important;
}

body.dark-theme .cart-item-card .item-actions button,
.dark-theme .cart-item-card .item-actions button {
  color: #858585 !important;
}

body.dark-theme .cart-item-card .item-actions button:hover,
.dark-theme .cart-item-card .item-actions button:hover {
  color: #f14c4c !important;
}

/* Qty Controller in Cart Item */
body.dark-theme .cart-item-card [style*="border: 1px solid #e5e7eb"],
.dark-theme .cart-item-card [style*="border: 1px solid #e5e7eb"],
body.dark-theme .cart-item-card [style*="border:1px solid #e5e7eb"],
.dark-theme .cart-item-card [style*="border:1px solid #e5e7eb"] {
  border-color: #3e3e42 !important;
  background: #252526 !important;
}

body.dark-theme .cart-item-card button.btn-link.text-dark,
.dark-theme .cart-item-card button.btn-link.text-dark {
  background: #2d2d2d !important;
  color: #cccccc !important;
  border-color: #3e3e42 !important;
}

body.dark-theme .cart-item-card button.btn-link.text-dark:hover,
.dark-theme .cart-item-card button.btn-link.text-dark:hover {
  background: #37373d !important;
  color: #ffffff !important;
}

body.dark-theme .cart-item-card input[type="text"],
.dark-theme .cart-item-card input[type="text"] {
  background: transparent !important;
  color: #ffffff !important;
}

/* Manual Price Input Box */
body.dark-theme .cart-item-card [style*="background: #f8fafc"],
.dark-theme .cart-item-card [style*="background: #f8fafc"],
body.dark-theme .cart-item-card [style*="background:#f8fafc"],
.dark-theme .cart-item-card [style*="background:#f8fafc"] {
  background: #252526 !important;
  border-color: #007acc !important;
}

body.dark-theme .cart-item-card input[type="number"],
.dark-theme .cart-item-card input[type="number"] {
  color: #4fc1ff !important;
}

body.dark-theme .cart-item-card select.form-control,
.dark-theme .cart-item-card select.form-control {
  background: #252526 !important;
  border-color: #3e3e42 !important;
  color: #cccccc !important;
}

body.dark-theme .cart-item-card select.form-control option,
.dark-theme .cart-item-card select.form-control option {
  background: #252526 !important;
  color: #cccccc !important;
}

/* 4. Charges & Cart Summary */
body.dark-theme .summary-section,
.dark-theme .summary-section {
  background: #1f1f1f !important;
  border-top: 1px solid #2d2d2d !important;
}

body.dark-theme .charges-section,
.dark-theme .charges-section {
  background: transparent !important;
}

body.dark-theme .charge-row,
.dark-theme .charge-row {
  border-bottom: 1px solid #282828 !important;
}

body.dark-theme .charge-row label,
.dark-theme .charge-row label {
  color: #cccccc !important;
}

body.dark-theme .charge-input-group,
.dark-theme .charge-input-group {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
}

body.dark-theme .charge-input-group input.flat-input,
.dark-theme .charge-input-group input.flat-input {
  color: #ffffff !important;
  background: transparent !important;
}

body.dark-theme .charge-input-group .input-suffix,
.dark-theme .charge-input-group .input-suffix {
  color: #858585 !important;
}

body.dark-theme .discount-type-toggle,
.dark-theme .discount-type-toggle {
  background: #2d2d2d !important;
  color: #4fc1ff !important;
  border-left: 1px solid #3e3e42 !important;
}

body.dark-theme .points-convert-row,
.dark-theme .points-convert-row {
  background: #252526 !important;
  border: 1px solid #333333 !important;
}

body.dark-theme .summary-totals,
.dark-theme .summary-totals {
  background: #181818 !important;
  border-top: 1px solid #282828 !important;
}

body.dark-theme .total-row .total-label,
.dark-theme .total-row .total-label {
  color: #9da5b4 !important;
}

body.dark-theme .total-row .total-value,
.dark-theme .total-row .total-value {
  color: #ffffff !important;
}

body.dark-theme .total-row.total-incl-tax .total-value,
.dark-theme .total-row.total-incl-tax .total-value {
  color: #4fc1ff !important;
}

body.dark-theme .discount-row,
.dark-theme .discount-row {
  color: #f14c4c !important;
}

body.dark-theme .discount-value,
.dark-theme .discount-value {
  color: #f14c4c !important;
}

/* 5. Right Column: Products Grid & Toolbar */
body.dark-theme .card-products,
.dark-theme .card-products {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

body.dark-theme .pos-products-toolbar,
.dark-theme .pos-products-toolbar {
  background: #1f1f1f !important;
  border-bottom: 1px solid #2d2d2d !important;
}

body.dark-theme .category-search-input,
.dark-theme .category-search-input {
  background: #252526 !important;
  border: 1.5px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .category-search-input:focus,
.dark-theme .category-search-input:focus {
  border-color: #007acc !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.25) !important;
}

body.dark-theme .category-search-input::placeholder,
.dark-theme .category-search-input::placeholder {
  color: #6e7681 !important;
}

body.dark-theme .category-dropdown-results,
.dark-theme .category-dropdown-results {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
}

body.dark-theme .category-dropdown-item,
.dark-theme .category-dropdown-item {
  color: #cccccc !important;
  border-bottom: 1px solid #2d2d2d !important;
}

body.dark-theme .category-dropdown-item:hover,
.dark-theme .category-dropdown-item:hover {
  background: #2d2d2d !important;
  color: #4fc1ff !important;
}

/* Code Category Filter Pills */
body.dark-theme .code-cat-pills,
.dark-theme .code-cat-pills {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
}

body.dark-theme .code-cat-pill,
.dark-theme .code-cat-pill {
  color: #9da5b4 !important;
  background: transparent !important;
}

body.dark-theme .code-cat-pill.active,
.dark-theme .code-cat-pill.active {
  background: #007acc !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.4) !important;
}

/* Products Grid & Product Card */
body.dark-theme .products-container,
.dark-theme .products-container,
body.dark-theme .products-grid,
.dark-theme .products-grid {
  background: #1e1e1e !important;
}

body.dark-theme .product-card,
.dark-theme .product-card {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.dark-theme .product-card:hover,
.dark-theme .product-card:hover {
  background: #2a2d2e !important;
  border-color: #007acc !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px) !important;
}

body.dark-theme .product-card .product-name,
.dark-theme .product-card .product-name,
body.dark-theme .product-card .product-name-text,
.dark-theme .product-card .product-name-text {
  color: #ffffff !important;
}

body.dark-theme .product-card .product-brand,
.dark-theme .product-card .product-brand {
  color: #4fc1ff !important;
}

body.dark-theme .product-card .product-price,
.dark-theme .product-card .product-price {
  color: #4ec9b0 !important;
}

body.dark-theme .product-card .product-stock,
.dark-theme .product-card .product-stock {
  color: #89d185 !important;
}

body.dark-theme .product-cost-dropdown,
.dark-theme .product-cost-dropdown {
  background: #1e1e1e !important;
  border: 1px solid #3e3e42 !important;
  color: #dcdcaa !important;
}

body.dark-theme .product-cost-dropdown option,
.dark-theme .product-cost-dropdown option {
  background: #1e1e1e !important;
  color: #dcdcaa !important;
}

body.dark-theme .product-image-placeholder,
.dark-theme .product-image-placeholder {
  background: #1e1e1e !important;
  color: #4fc1ff !important;
  border: 1px dashed #3e3e42 !important;
}

/* Card Footer Action Buttons */
body.dark-theme .product-details .product-footer .add-to-cart-btn,
.dark-theme .product-details .product-footer .add-to-cart-btn,
body.dark-theme .product-footer .add-to-cart-btn,
.dark-theme .product-footer .add-to-cart-btn {
  background: #0e639c !important;
  color: #ffffff !important;
}

body.dark-theme .product-details .product-footer .add-to-cart-btn:hover,
.dark-theme .product-details .product-footer .add-to-cart-btn:hover {
  background: #1177bb !important;
}

body.dark-theme .product-details .product-footer .edit-stock-btn,
.dark-theme .product-details .product-footer .edit-stock-btn,
body.dark-theme .product-footer .edit-stock-btn,
.dark-theme .product-footer .edit-stock-btn,
body.dark-theme .edit-stock-btn,
.dark-theme .edit-stock-btn {
  background: rgba(79, 193, 255, 0.15) !important;
  color: #4fc1ff !important;
  border: 1px solid rgba(79, 193, 255, 0.35) !important;
}

body.dark-theme .product-details .product-footer .edit-stock-btn:hover,
.dark-theme .product-details .product-footer .edit-stock-btn:hover {
  background: #007acc !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

body.dark-theme .edit-name-inline-btn,
.dark-theme .edit-name-inline-btn {
  color: #858585 !important;
}

body.dark-theme .edit-name-inline-btn:hover,
.dark-theme .edit-name-inline-btn:hover {
  color: #4fc1ff !important;
  background: rgba(79, 193, 255, 0.15) !important;
}

/* POS Pagination */
body.dark-theme .pos-pagination,
.dark-theme .pos-pagination,
body.dark-theme .pagination-footer,
.dark-theme .pagination-footer {
  background: #1f1f1f !important;
  border-top: 1px solid #2d2d2d !important;
}

body.dark-theme .pos-pagination button,
.dark-theme .pos-pagination button,
body.dark-theme .pagination-footer button,
.dark-theme .pagination-footer button {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  color: #cccccc !important;
}

body.dark-theme .pos-pagination button.active,
.dark-theme .pos-pagination button.active {
  background: #007acc !important;
  color: #ffffff !important;
}

/* 6. POS Bottom Floating Action Bar */
body.dark-theme .floating-actions,
.dark-theme .floating-actions,
body.dark-theme .pos-floating-bar,
.dark-theme .pos-floating-bar {
  background: #181818 !important;
  border-top: 1px solid #2b2b2b !important;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .fa-btn,
.dark-theme .fa-btn {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #cccccc !important;
}

body.dark-theme .fa-btn:hover,
.dark-theme .fa-btn:hover {
  background: #2d2d2d !important;
  border-color: #007acc !important;
  color: #ffffff !important;
}

body.dark-theme .fa-btn--hold,
.dark-theme .fa-btn--hold {
  background: rgba(206, 145, 120, 0.15) !important;
  border: 1px solid rgba(206, 145, 120, 0.35) !important;
  color: #ce9178 !important;
}

body.dark-theme .fa-adjust-input,
.dark-theme .fa-adjust-input {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .footer-totals,
.dark-theme .footer-totals {
  background: transparent !important;
}

body.dark-theme .footer-total-label,
.dark-theme .footer-total-label {
  color: #858585 !important;
}

body.dark-theme .footer-total-value,
.dark-theme .footer-total-value {
  color: #ffffff !important;
}

body.dark-theme .footer-profit-value.is-profit-positive,
.dark-theme .footer-profit-value.is-profit-positive {
  color: #4ec9b0 !important;
}

body.dark-theme .footer-pay-btn,
.dark-theme .footer-pay-btn {
  background: linear-gradient(135deg, #0e639c 0%, #1177bb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(14, 99, 156, 0.45) !important;
}

/* 7. SUPPLIER COST & ORDER MODAL (সাপ্লায়ার মূল্যতালিকা) */
body.dark-theme .supplier-cost-modal-overlay,
.dark-theme .supplier-cost-modal-overlay,
[data-theme="dark"] .supplier-cost-modal-overlay,
body.dark .supplier-cost-modal-overlay {
  background: rgba(15, 15, 15, 0.94) !important;
  backdrop-filter: blur(12px) !important;
}

body.dark-theme .supplier-cost-modal-card,
.dark-theme .supplier-cost-modal-card,
[data-theme="dark"] .supplier-cost-modal-card,
body.dark .supplier-cost-modal-card {
  background: #1e1e1e !important;
  color: #cccccc !important;
}

/* Header */
body.dark-theme .supplier-cost-header,
.dark-theme .supplier-cost-header {
  background: linear-gradient(135deg, #181818 0%, #222223 50%, #1a1a1b 100%) !important;
  border-bottom: 1px solid #333333 !important;
}

body.dark-theme .supplier-cost-header-icon,
.dark-theme .supplier-cost-header-icon {
  background: rgba(0, 122, 204, 0.2) !important;
  border: 1px solid rgba(0, 122, 204, 0.4) !important;
  color: #4fc1ff !important;
}

body.dark-theme .supplier-cost-title,
.dark-theme .supplier-cost-title {
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-subtitle,
.dark-theme .supplier-cost-subtitle {
  color: #9da5b4 !important;
}

body.dark-theme .supplier-cost-count-pill,
.dark-theme .supplier-cost-count-pill {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  color: #cccccc !important;
}

body.dark-theme .supplier-cost-shortcut-hint,
.dark-theme .supplier-cost-shortcut-hint {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #858585 !important;
}

body.dark-theme .supplier-cost-shortcut-hint kbd,
.dark-theme .supplier-cost-shortcut-hint kbd {
  background: #333333 !important;
  color: #e2e8f0 !important;
}

body.dark-theme .supplier-cost-kbd-hint,
.dark-theme .supplier-cost-kbd-hint {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #858585 !important;
}

body.dark-theme .supplier-cost-close-btn,
.dark-theme .supplier-cost-close-btn {
  background: #252526 !important;
  border: 1px solid #333333 !important;
  color: #cccccc !important;
}

body.dark-theme .supplier-cost-close-btn:hover,
.dark-theme .supplier-cost-close-btn:hover {
  background: #f14c4c !important;
  border-color: #f14c4c !important;
  color: #ffffff !important;
}

/* Toolbar */
body.dark-theme .supplier-cost-toolbar,
.dark-theme .supplier-cost-toolbar {
  background: #252526 !important;
  border-bottom: 1px solid #333333 !important;
}

body.dark-theme .supplier-cost-search-input,
.dark-theme .supplier-cost-search-input {
  background: #1e1e1e !important;
  border: 1.5px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-search-input:focus,
.dark-theme .supplier-cost-search-input:focus {
  border-color: #007acc !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.25) !important;
}

body.dark-theme .supplier-cost-search-input::placeholder,
.dark-theme .supplier-cost-search-input::placeholder {
  color: #6e7681 !important;
}

body.dark-theme .supplier-cost-search-icon,
.dark-theme .supplier-cost-search-icon {
  color: #858585 !important;
}

body.dark-theme .supplier-cost-search-clear,
.dark-theme .supplier-cost-search-clear {
  color: #858585 !important;
}

body.dark-theme .supplier-cost-search-clear:hover,
.dark-theme .supplier-cost-search-clear:hover {
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-select,
.dark-theme .supplier-cost-select {
  background: #1e1e1e !important;
  border: 1.5px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-select option,
.dark-theme .supplier-cost-select option {
  background: #1e1e1e !important;
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-pills,
.dark-theme .supplier-cost-pills {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
}

body.dark-theme .supplier-cost-pill-btn,
.dark-theme .supplier-cost-pill-btn {
  color: #9da5b4 !important;
  background: transparent !important;
}

body.dark-theme .supplier-cost-pill-btn.active,
.dark-theme .supplier-cost-pill-btn.active {
  background: #007acc !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 122, 204, 0.4) !important;
}

/* Table Area */
body.dark-theme .supplier-cost-table-wrap,
.dark-theme .supplier-cost-table-wrap {
  background: #1e1e1e !important;
}

body.dark-theme .supplier-cost-table,
.dark-theme .supplier-cost-table {
  background: #1e1e1e !important;
}

body.dark-theme .supplier-cost-table thead th,
.dark-theme .supplier-cost-table thead th {
  background: #252526 !important;
  color: #9da5b4 !important;
  border-bottom: 2px solid #3e3e42 !important;
}

body.dark-theme .supplier-cost-table tbody td,
.dark-theme .supplier-cost-table tbody td {
  border-bottom: 1px solid #282828 !important;
  color: #cccccc !important;
}

body.dark-theme .supplier-cost-row,
.dark-theme .supplier-cost-row {
  background: transparent !important;
}

body.dark-theme .supplier-cost-row:hover,
.dark-theme .supplier-cost-row:hover {
  background: #252526 !important;
}

body.dark-theme .supplier-cost-row.is-selected,
.dark-theme .supplier-cost-row.is-selected {
  background: rgba(9, 71, 113, 0.55) !important;
  box-shadow: inset 4px 0 0 #007acc !important;
}

body.dark-theme .supplier-cost-row.is-selected .supplier-cost-prod-name,
.dark-theme .supplier-cost-row.is-selected .supplier-cost-prod-name {
  color: #ffffff !important;
  text-shadow: none !important;
}

body.dark-theme .code-badge-btn,
.dark-theme .code-badge-btn {
  background: rgba(79, 193, 255, 0.12) !important;
  border: 1px solid rgba(79, 193, 255, 0.28) !important;
  color: #4fc1ff !important;
}

body.dark-theme .code-badge-btn:hover,
.dark-theme .code-badge-btn:hover {
  background: #007acc !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

body.dark-theme .barcode-text,
.dark-theme .barcode-text {
  color: #9da5b4 !important;
}

body.dark-theme .supplier-cost-prod-name,
.dark-theme .supplier-cost-prod-name {
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-prod-sub,
.dark-theme .supplier-cost-prod-sub {
  color: #6e7681 !important;
}

body.dark-theme .cost-price-badge,
.dark-theme .cost-price-badge {
  background: rgba(220, 220, 170, 0.14) !important;
  border: 1px solid rgba(220, 220, 170, 0.32) !important;
  color: #dcdcaa !important;
}

body.dark-theme .cost-vat-badge,
.dark-theme .cost-vat-badge {
  background: rgba(197, 134, 192, 0.15) !important;
  border: 1px solid rgba(197, 134, 192, 0.35) !important;
  color: #c586c0 !important;
}

body.dark-theme .stock-pill.stock-in,
.dark-theme .stock-pill.stock-in {
  background: rgba(78, 201, 176, 0.14) !important;
  border: 1px solid rgba(78, 201, 176, 0.32) !important;
  color: #4ec9b0 !important;
}

body.dark-theme .stock-pill.stock-out,
.dark-theme .stock-pill.stock-out {
  background: rgba(241, 76, 76, 0.14) !important;
  border: 1px solid rgba(241, 76, 76, 0.32) !important;
  color: #f14c4c !important;
}

body.dark-theme .retail-price-val,
.dark-theme .retail-price-val {
  color: #ce9178 !important;
}

body.dark-theme .supplier-cost-cart-add-btn,
.dark-theme .supplier-cost-cart-add-btn {
  background: #0e639c !important;
  color: #ffffff !important;
}

body.dark-theme .supplier-cost-cart-add-btn:hover,
.dark-theme .supplier-cost-cart-add-btn:hover {
  background: #1177bb !important;
}

body.dark-theme .supplier-cost-row.is-selected .supplier-cost-cart-add-btn,
.dark-theme .supplier-cost-row.is-selected .supplier-cost-cart-add-btn {
  background: #007acc !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.4) !important;
}

/* Pagination */
body.dark-theme .supplier-cost-pagination,
.dark-theme .supplier-cost-pagination {
  background: #252526 !important;
  border-top: 1px solid #333333 !important;
}

body.dark-theme .supplier-cost-pagination .page-nav-btn,
.dark-theme .supplier-cost-pagination .page-nav-btn {
  background: #1e1e1e !important;
  border: 1px solid #3e3e42 !important;
  color: #cccccc !important;
}

body.dark-theme .supplier-cost-pagination .page-nav-btn:hover:not(:disabled),
.dark-theme .supplier-cost-pagination .page-nav-btn:hover:not(:disabled) {
  background: #2d2d2d !important;
  border-color: #007acc !important;
  color: #4fc1ff !important;
}

body.dark-theme .supplier-cost-pagination .page-current-display,
.dark-theme .supplier-cost-pagination .page-current-display {
  background: #007acc !important;
  color: #ffffff !important;
}

/* 8. Modals in Dark Modern (Adjust Stock, Edit Name, Category Notes) */
body.dark-theme .modal-content,
.dark-theme .modal-content {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
  color: #cccccc !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
}

body.dark-theme .modal-header,
.dark-theme .modal-header {
  background: #1f1f1f !important;
  border-bottom: 1px solid #2d2d2d !important;
  color: #ffffff !important;
}

body.dark-theme .modal-header .modal-title,
.dark-theme .modal-header .modal-title {
  color: #ffffff !important;
}

body.dark-theme .modal-body,
.dark-theme .modal-body {
  background: #252526 !important;
  color: #cccccc !important;
}

body.dark-theme .modal-footer,
.dark-theme .modal-footer {
  background: #1f1f1f !important;
  border-top: 1px solid #2d2d2d !important;
}

body.dark-theme .modal-body input,
.dark-theme .modal-body input,
body.dark-theme .modal-body select,
.dark-theme .modal-body select,
body.dark-theme .modal-body textarea,
.dark-theme .modal-body textarea {
  background: #1e1e1e !important;
  border: 1px solid #3e3e42 !important;
  color: #ffffff !important;
}

body.dark-theme .modal-body input:focus,
.dark-theme .modal-body input:focus,
body.dark-theme .modal-body select:focus,
.dark-theme .modal-body select:focus {
  border-color: #007acc !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.25) !important;
}

body.dark-theme .modal-body .form-control-plaintext,
.dark-theme .modal-body .form-control-plaintext {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
  color: #4fc1ff !important;
}

body.dark-theme .pos-update-detail-modal .pos-product-image-box,
.dark-theme .pos-update-detail-modal .pos-product-image-box {
  background: #1e1e1e !important;
  border: 1.5px dashed #3e3e42 !important;
}

/* Category Notes Modal */
body.dark-theme .cat-notes-modal-content,
.dark-theme .cat-notes-modal-content {
  background: #252526 !important;
  border: 1px solid #3e3e42 !important;
}

body.dark-theme .cat-notes-card,
.dark-theme .cat-notes-card {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
}

body.dark-theme .cat-notes-textarea,
.dark-theme .cat-notes-textarea {
  background: #181818 !important;
  border: 1px solid #3e3e42 !important;
  color: #ffffff !important;
}

/* POS Slide-out Filter Panel */
body.dark-theme .pos-filter-panel,
.dark-theme .pos-filter-panel {
  background: #252526 !important;
  border-left: 1px solid #333333 !important;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5) !important;
}

body.dark-theme .pos-filter-header,
.dark-theme .pos-filter-header {
  background: #1f1f1f !important;
  border-bottom: 1px solid #2d2d2d !important;
  color: #ffffff !important;
}

body.dark-theme .pos-filter-card,
.dark-theme .pos-filter-card {
  background: #1e1e1e !important;
  border: 1px solid #333333 !important;
}

/* ==================== POS EDIT SALE MODE BANNER ==================== */
.pos-edit-mode-banner {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  border-bottom: 2px solid #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15) !important;
  z-index: 1000 !important;
  position: relative !important;
  padding: 2px 8px !important;
  animation: fadeInDown 0.3s ease-out !important;
}

.pos-edit-mode-banner .badge-warning {
  background: #f59e0b !important;
  color: #ffffff !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

body.dark-theme .pos-edit-mode-banner,
.dark-theme .pos-edit-mode-banner {
  background: linear-gradient(135deg, #2d261e 0%, #3d2f1b 100%) !important;
  border-bottom: 2px solid #d97706 !important;
  color: #fef3c7 !important;
}

body.dark-theme .pos-edit-mode-banner .text-dark,
.dark-theme .pos-edit-mode-banner .text-dark {
  color: #fde68a !important;
}

body.dark-theme .pos-edit-mode-banner .text-muted,
.dark-theme .pos-edit-mode-banner .text-muted {
  color: #d1d5db !important;
}

/* ==================== POS QUICK STOCK ADJUST BUTTON ==================== */
.product-details .product-footer .edit-stock-btn,
.product-footer .edit-stock-btn {
  align-items: center !important;
  background: rgba(14, 165, 233, 0.12) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #0284c7 !important;
  cursor: pointer !important;
  display: flex !important;
  flex: 1 !important;
  height: 28px !important;
  justify-content: center !important;
  outline: none !important;
  padding: 0 !important;
  transition: all 0.2s ease !important;
}

.product-details .product-footer .edit-stock-btn:hover,
.product-footer .edit-stock-btn:hover {
  background: rgba(14, 165, 233, 0.25) !important;
  color: #0369a1 !important;
  transform: scale(1.1) !important;
}

.product-details .product-footer .edit-stock-btn:active,
.product-footer .edit-stock-btn:active {
  transform: scale(0.95) !important;
}

.product-details .product-footer .edit-stock-btn:focus,
.product-details .product-footer .edit-stock-btn:focus-visible,
.product-footer .edit-stock-btn:focus,
.product-footer .edit-stock-btn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

.product-details .product-footer .edit-stock-btn svg,
.product-footer .edit-stock-btn svg {
  width: 14px !important;
  height: 14px !important;
}

body.dark-theme .product-details .product-footer .edit-stock-btn,
body.dark-theme .product-footer .edit-stock-btn,
.dark-theme .product-footer .edit-stock-btn {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
}

body.dark-theme .product-details .product-footer .edit-stock-btn:hover,
body.dark-theme .product-footer .edit-stock-btn:hover,
.dark-theme .product-footer .edit-stock-btn:hover {
  background: rgba(14, 165, 233, 0.35) !important;
  color: #7dd3fc !important;
}

/* =========================================================
   Cloud Sync Badge Positioning in POS Header
   ========================================================= */
body > .cloud-sync-container {
  display: none !important;
}

.pos-header .header-right .cloud-sync-container,
.header-right .cloud-sync-container {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 5 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin: 0 4px 0 0 !important;
}

/* =========================================================
   POS Typography - Figtree (English) & IndoPak (Arabic - Medium 500 & +2px Large)
   ========================================================= */
.pos-codecanyon,
.pos-codecanyon * {
  font-family: 'Figtree', 'IndoPak', 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[dir="rtl"] .pos-codecanyon,
[dir="rtl"] .pos-codecanyon *,
.pos-codecanyon[dir="rtl"],
.pos-codecanyon[dir="rtl"] * {
  font-family: 'IndoPak', 'Figtree', 'Inter', -apple-system, sans-serif !important;
  font-weight: 500 !important;
}

/* Specific prominent scaling (+2px increase) for product names, categories, and totals in POS */
[dir="rtl"] .pos-codecanyon .pos-product-name,
[dir="rtl"] .pos-codecanyon .product-title,
[dir="rtl"] .pos-codecanyon .category-item,
[dir="rtl"] .pos-codecanyon .category-pill,
[dir="rtl"] .pos-codecanyon .brand-pill,
[dir="rtl"] .pos-codecanyon .grand-total,
[dir="rtl"] .pos-codecanyon .btn-checkout,
[dir="rtl"] .pos-codecanyon .customer-select-header,
[dir="rtl"] .pos-codecanyon .register-status,
[dir="rtl"] .pos-codecanyon .search-input,
[dir="rtl"] .pos-codecanyon .cart-item-title,
[dir="rtl"] .pos-codecanyon .cart-table td,
[dir="rtl"] .pos-codecanyon .cart-table th {
  font-weight: 500 !important;
  font-size: calc(100% + 2px) !important;
}

/* =========================================================
   RESPONSIVE TOOLBAR: Prevent button cutoff on laptops & smaller screens
   ========================================================= */
@media (max-width: 1440px) {
  .pos-products-toolbar,
  .card-header.pos-products-toolbar,
  .card.card-products .card-header {
    padding: 6px 10px !important;
  }
  .pos-products-toolbar .filter-section,
  .card.card-products .card-header .filter-section,
  .filter-section {
    gap: 4px !important;
  }
  .category-search-input-wrapper,
  .global-search-input-wrapper {
    width: 125px !important;
    min-width: 95px !important;
    max-width: 145px !important;
    flex: 1 1 115px !important;
  }
  .category-search-input,
  .global-search-input {
    padding: 0 8px 0 28px !important;
    font-size: 11.5px !important;
    height: 36px !important;
  }
  .category-search-input::placeholder,
  .global-search-input::placeholder {
    font-size: 11.5px !important;
  }
  .category-search-input-wrapper .search-icon,
  .global-search-input-wrapper .search-icon {
    left: 8px !important;
    width: 14px !important;
    height: 14px !important;
  }
  .pos-features-trigger-btn,
  .pos-cat-notes-trigger-btn,
  .pos-supplier-cost-trigger-btn {
    padding: 0 8px !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    height: 36px !important;
  }
  .pos-features-trigger-btn .features-btn-label,
  .pos-cat-notes-trigger-btn .cat-notes-btn-label,
  .pos-supplier-cost-trigger-btn .supplier-cost-btn-label {
    font-size: 11.5px !important;
  }
  .pos-features-trigger-btn .features-btn-icon,
  .pos-cat-notes-trigger-btn .cat-notes-btn-icon,
  .pos-supplier-cost-trigger-btn .supplier-cost-btn-icon {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 1200px) {
  .pos-products-toolbar .filter-section,
  .card.card-products .card-header .filter-section,
  .filter-section {
    overflow: visible !important;
    padding-right: 4px !important;
  }
}

/* ========================================================
   SMART CUSTOMER PASTE MODAL (DESKTOP & MOBILE RESPONSIVE)
   ======================================================== */
#modal_customer_bridge .modal-dialog {
    max-width: 720px;
    margin: 1.25rem auto;
}

@media (max-width: 576px) {
    #modal_customer_bridge .modal-dialog {
        max-width: calc(100% - 1rem);
        margin: 0.5rem auto;
    }
}

#modal_customer_bridge .modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18) !important;
    background: #ffffff !important;
}

#modal_customer_bridge .modal-header {
    padding: 0 !important;
    border: none !important;
}

#modal_customer_bridge .modal-body {
    padding: 0 !important;
}

.bridge-header-close-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.bridge-input-group:focus-within {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.bridge-input-group.bridge-vat-group:focus-within {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.bridge-copy-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.bridge-copy-btn-vat:hover {
    background: #059669 !important;
}

.bridge-btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

.bridge-btn-clear:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
}

.bridge-btn-apply:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}

.bridge-btn-apply:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

@media (max-width: 576px) {
    .bridge-modal-footer {
        flex-direction: column-reverse !important;
        padding: 12px 14px !important;
        gap: 10px !important;
    }
    .bridge-modal-footer .bridge-footer-left {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .bridge-modal-footer .bridge-footer-left button {
        flex: 1 !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .bridge-modal-footer .bridge-footer-right {
        width: 100% !important;
    }
    .bridge-modal-footer .bridge-btn-apply {
        width: 100% !important;
        padding: 11px 16px !important;
        font-size: 13.5px !important;
    }
}