/* ========== CUSTOM BREAKPOINT FOR 4K/ULTRA-WIDE SCREENS ========== */
/* Bootstrap 5 xxl starts at 1400px, but we need a larger breakpoint for 4K displays */
/* xxxl breakpoint: 2560px and above (covers 2560x1440 and 3840x2160) */

@media (min-width: 2560px) {
  .col-xxxl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xxxl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xxxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxxl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xxxl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xxxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxxl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xxxl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xxxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxxl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xxxl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xxxl-12 { flex: 0 0 auto; width: 100%; }
  .col-xxxl-auto { flex: 0 0 auto; width: auto; }
}

/* ========== SIDEBAR NAVIGATION ACTIVE STATE FIX ========== */
/* Fix for nav-active class when html doesn't have sidebar-light class */
ul.nav-main > li.nav-active > a {
  color: #0088cc !important; /* Porto Admin blue */
}

ul.nav-main > li.nav-active > a i {
  color: #0088cc !important;
}

/* Invoice icon cursor */
.btn-invoice {
  cursor: pointer;
}

.btn-invoice:hover {
  color: #0d6efd !important;
}
.edit-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.edit-loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.edit-loading-text {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.edit-content-blur {
  filter: blur(2px);
  pointer-events: none;
  opacity: 0.7;
}

/* Packing Module Styles */

/* Barcode Scanner Input */
.barcode-input {
  font-size: 1.5rem !important;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  font-family: 'Courier New', Courier, monospace;
  border: 2px solid #0d6efd;
  background-color: #f8f9fa;
}

.barcode-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  background-color: #fff;
}

/* Barcode Display */
.barcode-display {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Barcode 128', monospace;
}

/* Card Stats */
.card-stat {
  border-left: 4px solid #dee2e6;
  transition: all 0.3s ease;
}

.card-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Capacity Progress Bars */
.progress {
  background-color: #e9ecef;
}

.progress-bar.bg-success {
  background-color: #28a745 !important;
}

.progress-bar.bg-warning {
  background-color: #ffc107 !important;
}

/* Step Indicator Styles */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
}

.step.active span {
  background-color: #0d6efd;
  color: white;
}

.step.completed span {
  background-color: #198754;
  color: white;
}

.step-label {
  margin-top: 8px;
  font-size: 0.875rem;
  color: #6c757d;
  font-weight: 500;
}

.step.active .step-label {
  color: #0d6efd;
  font-weight: 600;
}

.step.completed .step-label {
  color: #198754;
}

.step-connector {
  width: 60px;
  height: 2px;
  background-color: #e9ecef;
  margin: 0 10px;
}

/* Adjustment Reason Dropdown - Invalid State */
.adjustment-reason.is-invalid {
  border-color: #dc3545;
}

/* Summary Section - Compact Styling */
.card-header.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.card-body.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Subtle Quantity Adjustment Display */
.border-start.border-3 {
  border-left-width: 3px !important;
}

.progress-bar.bg-danger {
  background-color: #dc3545 !important;
}

/* Bag Status Badges */
.badge.bg-primary {
  background-color: #0d6efd !important;
}

.badge.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

.badge.bg-success {
  background-color: #198754 !important;
}

.badge.bg-danger {
  background-color: #dc3545 !important;
}

.badge.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

.badge.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* Stock Badge - for stock bags (from previous sessions) */
.badge-stock {
  background-color: #6c757d !important;
  color: #fff !important;
}

/* Box Status Badges - same as bag badges for consistency */

/* Scanner Card */
#scannerCard {
  border: 2px solid #0d6efd;
  transition: all 0.3s ease;
}

#scannerCard:hover {
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

/* Scan Status Icon Animation */
.scan-status-icon {
  transition: all 0.3s ease;
}

.scan-status-icon .fa-check-circle {
  animation: pulse 0.5s ease-in-out;
}

.scan-status-icon .fa-times-circle {
  animation: shake 0.5s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* Stage Buttons */
.stage-btn {
  position: relative;
  overflow: hidden;
}

.stage-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.stage-btn.btn-primary::after {
  background-color: #0d6efd;
}

.stage-btn.btn-warning::after {
  background-color: #ffc107;
}

.stage-btn.btn-success::after {
  background-color: #198754;
}

/* Session Duration Badge */
#sessionDuration {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  font-family: 'Courier New', Courier, monospace;
}

/* Scanned Items Table Animation */
#scannedItemsTable tbody tr {
  animation: fadeIn 0.3s ease-in-out;
}

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

/* Empty State Messages */
#emptyBoxMessage,
#noScannedItems {
  padding: 2rem;
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

/* Label Preview Modal */
#modalLabelPreview .barcode-display {
  background-color: #fff;
  border: 1px solid #dee2e6;
  padding: 1rem;
}

/* Keyboard Shortcuts */
kbd {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1;
  color: #212529;
  background-color: #f8f9fa;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Responsive Tablet Support */
@media (max-width: 768px) {
  .barcode-input {
    font-size: 1.2rem !important;
  }

  .card-stat h3 {
    font-size: 1.5rem;
  }

  #sessionDuration {
    font-size: 0.9rem;
  }
}

/* ========== PACKING SESSION STEP INDICATOR ========== */
.step-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.step-indicator .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-indicator .step span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.step-indicator .step-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
  font-weight: 500;
  margin-top: 0.25rem;
  transition: color 0.3s ease;
}

.step-indicator .step.active span {
  background-color: #0d6efd;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  transform: scale(1.1);
}

.step-indicator .step.active .step-label {
  color: #0d6efd;
  font-weight: 700;
}

.step-indicator .step.completed span {
  background-color: #198754;
  color: #fff;
}

.step-indicator .step.completed .step-label {
  color: #198754;
  font-weight: 600;
}

.step-indicator .step-connector {
  flex: 1;
  height: 2px;
  background-color: #e9ecef;
  min-width: 50px;
}

.step-indicator .step.completed + .step-connector {
  background-color: #198754;
}

/* Spares calculation display */
.spares-info {
  color: #0dcaf0;
  font-size: 0.85rem;
  font-weight: 500;
}

.spares-warning {
  color: #dc3545;
  font-size: 0.85rem;
  font-weight: 500;
}

.spares-summary {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reason field styling */
.reason-container {
  margin-top: 0.5rem;
}

.reason-field {
  background-color: #fff3cd;
  border-left: 3px solid #ffc107;
  padding: 0.75rem;
  border-radius: 0.375rem;
}

.reason-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #856404;
  margin-bottom: 0.5rem;
  display: block;
}

.reason-field .form-control-sm {
  font-size: 0.85rem;
}

/* Box capacity warning */
.box-capacity-warning {
  background-color: #fff3cd;
  border-left: 3px solid #ffc107;
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.85rem;
  color: #856404;
}

.box-capacity-warning i {
  color: #ffc107;
}

/* Responsive adjustments for step indicator */
@media (max-width: 768px) {
  .step-indicator {
    padding: 0 1rem;
  }

  .step-indicator .step span {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .step-indicator .step-label {
    font-size: 0.7rem;
  }

  .step-indicator .step.active span {
    transform: scale(1.05);
  }

  .step-indicator .step-connector {
    min-width: 30px;
  }
}

/* Enhanced table styling for order details */
#cartTable {
  font-size: 0.9rem;
}

#cartTable .quantity-column {
  width: 80px;
  max-width: 80px;
}

#cartTable .price-column {
  width: 120px;
  max-width: 120px;
}

#cartTable .cart-rate {
  width: 100%;
  min-width: 110px;
  font-size: 0.85rem;
  padding: 4px 8px;
}

#cartTable td {
  padding: 8px 4px;
  vertical-align: middle;
}

#cartTable .text-end {
  text-align: right !important;
}

/* Shipping modal specific styles */
.shipping-quantity-input {
  width: 80px;
  text-align: right;
}

/* Commented out to show default spinners
.shipping-quantity-input::-webkit-outer-spin-button,
.shipping-quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shipping-quantity-input[type=number] {
  appearance: textfield;
  -webkit-appearance: textfield;
}
/*

/* Datepicker specific styles */
.datepicker {
  z-index: 1060 !important; /* Ensure it appears above modal */
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: #999999;
  cursor: default;
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-color: #ffeaa7;
  background-image: linear-gradient(to bottom, #ffeaa7, #ffe082);
  color: #000;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: #006be6;
  background-image: linear-gradient(to bottom, #006be6, #0056b3);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Table styling improvements */
#shippingItemsTable .quantity-input {
  text-align: right;
}

#shippingItemsTable .form-control-sm {
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .shipping-quantity-input {
    width: 60px;
  }

  .modal-lg {
    max-width: 95%;
  }
}

/* Spinner for order edit form */
.edit-details-spinner-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.95);
  z-index: 9999 !important;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.375rem;
  min-height: 200px;
}

.edit-details-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #ffc107;
  border-radius: 50%;
  animation: order-spin 1s linear infinite;
}

@keyframes order-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Blur effect for content during update */
.order-update-blur {
  filter: blur(2px);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  transition: all 0.3s ease;
}

/* Ensure card has proper positioning context */
.card {
  position: relative;
}

/* Style for spinner text */
.edit-details-spinner-overlay .text-muted {
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
}

/* ========== NOTES TEXTAREA ENHANCEMENTS ========== */

/* Auto-expand textareas when they have content */
#customer_note.show,
#notes.show {
  min-height: 80px !important;
  transition: all 0.3s ease-in-out;
}

/* Highlight textareas with content - subtle yellow background */
#customer_note:not(:placeholder-shown),
#notes:not(:placeholder-shown) {
  background-color: #fffbf0;
  border-color: #ffc107;
}

/* Visual indicator for expanded sections - yellow caret */
.form-label .fa-caret-up {
  color: #ffc107;
}

/* Ensure textareas are fully visible when expanded */
.collapse.show {
  overflow: visible !important;
}

/* Add smooth animation when expanding/collapsing */
#customer_note,
#notes {
  transition: all 0.3s ease-in-out;
}

/* Note: CSS 'content' property doesn't work on ::placeholder pseudo-element */
/* Placeholder text should be set in HTML with placeholder attribute */
#customer_note::placeholder {
  color: #6c757d;
  font-style: italic;
}

#notes::placeholder {
  color: #6c757d;
  font-style: italic;
}

/* FIX: :has() selector may not be supported in all browsers, use fallback */
/* Make the labels clearer when content exists */
.form-label.has-content .fa-caret-up {
  color: #28a745; /* Green when expanded with content */
}

/* Alternative without :has() for better browser support */
.form-label.expanded .fa-caret-up {
  color: #28a745;
}

/* Optional: Add a badge indicator when notes have content */
.notes-indicator {
  display: inline-block;
  background: #ffc107;
  color: #000;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  margin-left: 5px;
}

/* Additional enhancement: Visual feedback when notes are being edited */
#customer_note:focus,
#notes:focus {
  background-color: #fff;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Make collapsed textareas smaller to save space */
#customer_note:not(.show),
#notes:not(.show) {
  min-height: 38px !important;
}

/* Payment Modal - Right-align amount inputs */
#modalPayment input[type="text"]#payment_amount,
#modalPayment .payment-allocation-input {
  text-align: right;
}

/* Also apply to any other amount inputs in payment contexts */
.amount-input,
input.text-right {
  text-align: right;
}

/* Ensure payment method dropdown is properly enabled/disabled with visual feedback */
#payment_method:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* Tooltip text alignment - for tooltips that need left alignment */
.tooltip .tooltip-inner {
  text-align: left !important;
}

/* Specific class for amount tooltips with left-aligned content */
[data-bs-toggle="tooltip"].amount-tooltip + .tooltip .tooltip-inner {
  text-align: left !important;
  max-width: 300px;
}

/* Dark tooltip styling */
.tooltip-dark .tooltip-inner {
  background-color: #212529;
  color: #fff;
  max-width: 300px;
}

.tooltip-dark .tooltip-arrow::before {
  border-top-color: #212529;
}

/* Support arrows in all directions for dark tooltip */
.tooltip-dark.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: #212529;
}

.tooltip-dark.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: #212529;
}

.tooltip-dark.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #212529;
}

/* Dark popover styling (matches tooltip-dark) */
.popover-dark .popover-body {
  background-color: #212529;
  color: #fff;
  padding: 0.5rem 0.75rem;
}
.popover-dark .popover-arrow::after {
  border-bottom-color: #212529;
}
.popover-dark {
  border-color: #212529;
}

/* ========== USER FORM COMPACT LAYOUT ========== */

/* Reduce overall form vertical spacing */
#userForm .mb-3 {
  margin-bottom: 1rem !important;
}

#userForm .mb-4 {
  margin-bottom: 1.25rem !important;
}

/* Compact phone rows */
.phone-row {
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

.phone-row:hover {
  background-color: #e9ecef;
}

.phone-row .form-control-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
}

/* Compact address rows */
.address-row {
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

.address-row:hover {
  background-color: #e9ecef;
}

.address-row .form-control-sm {
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
}

/* Compact spacing for address details when expanded */
.address-row .address-details {
  padding-top: 0.5rem;
  border-top: 1px solid #dee2e6;
  margin-top: 0.5rem;
}

/* Reduce gap between radio button and title input */
.phone-row .col-auto,
.address-row .col-auto {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* Compact section headers */
#userForm h6 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Ensure form controls in rows are properly aligned */
.phone-row .row,
.address-row .row {
  margin-left: 0;
  margin-right: 0;
}

/* Responsive behavior - stack on mobile */
@media (max-width: 768px) {
  .phone-row .col-md-4,
  .phone-row .col-md {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0.25rem;
  }

  .address-row .col-md-3,
  .address-row .col-md {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0.25rem;
  }

  .address-row .address-details .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0.25rem;
  }
}

/* Button spacing adjustments */
#btnAddPhone,
#btnAddAddress {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Container padding adjustments for phone and address sections */
#phoneRows,
#addressRows {
  margin-top: 0.5rem !important;
}

/* ========== NOTIFICATION PADDING FIX ========== */
/* Increase padding around the notification icon circle */
.ui-pnotify .notification {
  padding: 20px 20px 20px 95px !important;
  min-height: 75px !important;
}

.ui-pnotify .notification .ui-pnotify-icon {
  width: 95px !important;
}

/* ========== PRODUCT SPECIAL PRICES MODAL ========== */
/* Stepped form fieldsets */
#modalSpecialPrice fieldset {
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1rem;
  background-color: #f8f9fa;
}

#modalSpecialPrice fieldset legend {
  margin-bottom: 0.75rem;
  padding: 0 0.5rem;
  width: auto;
  float: none;
  border-bottom: none;
}

/* Conflict warning styling */
#conflictWarning {
  border-left: 4px solid #ffc107;
}

/* Form check labels for better spacing */
#modalSpecialPrice .form-check-label {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
}

/* ========== WIZARD PROGRESS INDICATOR ========== */
.wizard-progress {
  position: relative;
  margin-bottom: 2rem;
}

.wizard-progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding: 0 1rem;
}

/* Connecting line between steps */
.wizard-progress-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: calc(8.33% + 1rem);
  right: calc(8.33% + 1rem);
  height: 2px;
  background-color: #e9ecef;
  z-index: 0;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
  max-width: 120px;
}

.wizard-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.wizard-step-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
  font-weight: 500;
  margin-top: 0.25rem;
  transition: color 0.3s ease;
}

/* Active step styling */
.wizard-step.active .wizard-step-circle {
  background-color: #0d6efd;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
  transform: scale(1.1);
}

.wizard-step.active .wizard-step-label {
  color: #0d6efd;
  font-weight: 700;
}

/* Completed step styling */
.wizard-step.completed .wizard-step-circle {
  background-color: #198754;
  color: #fff;
  border-color: #fff;
}

.wizard-step.completed .wizard-step-label {
  color: #198754;
  font-weight: 600;
}

/* Progress line for completed steps */
.wizard-step.completed::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -50%;
  width: 100%;
  height: 2px;
  background-color: #198754;
  z-index: 0;
}

.wizard-step:first-child.completed::before {
  display: none;
}

/* Last step (Summary) with checkmark icon */
.wizard-step[data-step="6"] .wizard-step-circle {
  font-size: 1rem;
}

/* ========== WIZARD STEP CONTENT ========== */
.wizard-step-content {
  min-height: 250px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== SUMMARY SECTION ========== */
.summary-item {
  padding: 0.75rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  border-left: 3px solid #0d6efd;
  transition: all 0.2s ease;
}

.summary-item:hover {
  background-color: #e9ecef;
  border-left-color: #198754;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

.summary-value {
  font-size: 0.95rem;
  color: #212529;
  font-weight: 500;
  word-wrap: break-word;
}

/* ========== RESPONSIVE WIZARD ========== */
@media (max-width: 992px) {
  .wizard-progress-steps {
    padding: 0 0.5rem;
  }

  .wizard-step-circle {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .wizard-step-label {
    font-size: 0.7rem;
  }

  .wizard-step.active .wizard-step-circle {
    transform: scale(1.05);
  }
}

@media (max-width: 768px) {
  .wizard-progress-steps {
    padding: 0 0.25rem;
  }

  .wizard-step {
    max-width: 80px;
  }

  .wizard-step-circle {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .wizard-step-label {
    font-size: 0.65rem;
  }

  .wizard-progress-steps::before {
    top: 16px;
  }

  .wizard-step.completed::before {
    top: 16px;
  }

  .summary-item {
    padding: 0.5rem;
  }

  .summary-label {
    font-size: 0.7rem;
  }

  .summary-value {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .wizard-step-label {
    display: none; /* Hide labels on very small screens */
  }

  .wizard-step {
    max-width: 50px;
  }
}

/* Fix Select2 dropdown 1px offset in modals */
.modal .select2-container--bootstrap-5 .select2-dropdown {
  left: -1px !important;
}

/* ========== INVOICE UPLOAD & AUTO-FILL ========== */

/* Invoice upload zone styling */
#invoiceUploadZone {
  transition: all 0.3s ease;
  background-color: #f8f9fa;
}

#invoiceUploadZone:hover {
  background-color: #e9ecef;
  border-color: #0d6efd !important;
}

#invoiceUploadZone.border-primary {
  background-color: #e7f3ff !important;
}

/* Invoice preview styling */
#invoicePreviewImage img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Low confidence field highlighting */
.border-warning {
  border-color: #ffc107 !important;
  border-width: 2px !important;
}

/* Confidence warning alert */
#confidenceWarnings .alert-warning {
  border-left: 4px solid #ffc107;
  background-color: #fff3cd;
}

/* Extraction results section */
#invoiceExtractionResults {
  animation: slideIn 0.3s ease;
}

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

/* Extraction line items table */
.extraction-line-description,
.extraction-line-amount,
.extraction-line-account,
.extraction-line-product,
.extraction-line-qty,
.extraction-line-price,
.extraction-line-total {
  font-size: 0.875rem;
}

/* AI attribution badge */
#invoiceExtractionResults small.text-muted {
  font-style: italic;
}

/* Upload button in transaction form */
#btnUploadInvoice {
  white-space: nowrap;
}

/* Responsive adjustments for invoice upload */
@media (max-width: 768px) {
  #btnUploadInvoice {
    font-size: 0.85rem;
    padding: 0.5rem;
  }

  #btnUploadInvoice .fas {
    margin-right: 0.25rem !important;
  }
}

/* ========== SELECT2 VALIDATION ERROR STYLING ========== */
/* Style Select2 dropdown when underlying select has is-invalid class */
.select2-selection.is-invalid {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Also style when parent has is-invalid */
.is-invalid + .select2-container .select2-selection {
  border-color: #dc3545 !important;
}

.is-invalid + .select2-container .select2-selection:focus {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* ========== VENDOR COMPANY INHERITANCE STYLING ========== */

/* Inherited readonly fields styling */
.form-control[readonly].bg-light.text-muted {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  cursor: not-allowed;
  color: #6c757d !important;
}

/* Inheritance indicator */
.inheritance-indicator {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #0dcaf0 !important;
  font-weight: 500;
}

.inheritance-indicator i {
  margin-right: 0.25rem;
}

/* Edit company hint alert */
#editCompanyHint {
  font-size: 0.875rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

#editCompanyHint i {
  margin-right: 0.5rem;
}

/* ========== BOX FILLING WORKFLOW ANIMATIONS ========== */

/* Pulse overlay for full-screen visual feedback */
.pulse-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.pulse-overlay.pulse-success {
  background-color: rgba(40, 167, 69, 0.3); /* green */
  opacity: 1;
}

.pulse-overlay.pulse-error {
  background-color: rgba(220, 53, 69, 0.3); /* red */
  opacity: 1;
}

/* Modal success/error pulse for barcode scanning */
.modal-content.bg-success-pulse {
  animation: modal-pulse-success 0.4s ease-out;
}

.modal-content.bg-danger-pulse {
  animation: modal-pulse-error 0.4s ease-out;
}

@keyframes modal-pulse-success {
  0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  50% { box-shadow: 0 0 20px 10px rgba(40, 167, 69, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

@keyframes modal-pulse-error {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  50% { box-shadow: 0 0 20px 10px rgba(220, 53, 69, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* Counter pop animation */
.counter-update {
  animation: counter-pop 0.2s ease-out;
}

@keyframes counter-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Bag list item fade-in animation */
.bag-list-item {
  animation: bag-fade-in 0.3s ease-in;
}

@keyframes bag-fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== PACK PICKER COMPONENT (FIFO Selection) ========== */

/* Fixed column widths table - ensures consistent widths across all tables */
.table-fixed-columns {
  table-layout: fixed;
  width: 100%;
}

/* Pack picker item card */
.pack-picker-item {
  transition: all 0.2s ease;
}

.pack-picker-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Pack picker card spacing - override theme.css .card + .card margin */
.pack-picker-item.card + .pack-picker-item.card {
  margin-top: 0.5rem;
}

/* Pack picker collapsible header */
.pack-picker-header {
  user-select: none;
}

.pack-picker-header:hover {
  background-color: #e9ecef !important;
}

/* Chevron icon styling */
.pack-picker-chevron {
  font-size: 0.85rem;
  color: #6c757d;
}

/* Unit row styling */
.pack-picker-unit {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pack-picker-unit:hover {
  background-color: rgba(13, 110, 253, 0.05);
}

.pack-picker-unit.selected {
  background-color: rgba(13, 110, 253, 0.1) !important;
  border-left: 3px solid #0d6efd;
}

/* Priority badge (FIFO order) */
.priority-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.35rem;
  font-weight: 600;
}

/* Unit code - monospace for barcode */
.unit-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #212529;
  background-color: #f8f9fa;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
}

/* Expiry badge */
.expiry-badge {
  color: #6c757d;
  font-size: 0.75rem;
}

/* Checkbox styling */
.pack-picker-checkbox {
  cursor: pointer;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
}

/* Spare options section */
.pack-picker-item .form-check {
  padding-left: 1.75rem;
}

.spare-quantity-input {
  width: 70px;
  text-align: center;
  margin: 0 0.25rem;
}

.spare-quantity-input:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
}

/* Selection counter in footer */
.pack-picker-selected-count {
  font-size: 1.1rem;
  font-weight: 700;
}

/* Card footer emphasis */
.pack-picker-item .card-footer {
  font-size: 0.9rem;
  font-weight: 500;
}

/* Deselected/missing pack visual indicator (Ship modal) */
.pack-picker-unit.deselected {
  opacity: 0.6;
  text-decoration: line-through;
  background-color: rgba(220, 53, 69, 0.1);
}

.pack-picker-unit.deselected .unit-code {
  text-decoration: line-through;
  color: var(--bs-danger);
}

.pack-picker-unit.deselected .pack-picker-checkbox {
  opacity: 0.5;
}

/* Badge for missing packs in Ship modal */
.pack-missing-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  margin-left: 0.5rem;
  background-color: var(--bs-danger);
  color: white;
  border-radius: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .pack-picker-item table {
    font-size: 0.85rem;
  }

  .pack-picker-item th,
  .pack-picker-item td {
    padding: 0.5rem 0.25rem;
  }

  .priority-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.3rem;
  }

  .unit-code {
    font-size: 0.75rem;
    padding: 0.1rem 0.25rem;
  }

  .spare-quantity-input {
    width: 60px;
  }
}

/* Hide validation icon in pack qty inputs */
.pack-qty.is-invalid {
  background-image: none !important;
  padding-right: 0.2rem !important;
}

/* ========== PACK TRACKING - TIMELINE STYLES ========== */
/* Timeline component (Porto Admin timeline-simple) */
.timeline.timeline-simple {
  position: relative;
  padding: 0;
}

.timeline.timeline-simple .tm-body {
  position: relative;
}

.timeline.timeline-simple .tm-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline.timeline-simple .tm-items > li {
  position: relative;
  display: flex;
  padding: 1rem 0;
  border-left: 2px solid #e9ecef;
  margin-left: 20px;
}

.timeline.timeline-simple .tm-items > li:last-child {
  border-left-color: transparent;
}

.timeline.timeline-simple .tm-info {
  position: absolute;
  left: -22px;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline.timeline-simple .tm-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #6c757d;
  margin-bottom: 0.5rem;
}

.timeline.timeline-simple .tm-datetime {
  font-size: 0.75rem;
  color: #6c757d;
  white-space: nowrap;
  margin-left: 0.5rem;
}

.timeline.timeline-simple .tm-box {
  margin-left: 3rem;
  background-color: #f8f9fa;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid #dee2e6;
  flex: 1;
}

.timeline.timeline-simple .tm-box p {
  margin-bottom: 0.25rem;
}

.timeline.timeline-simple .tm-box p:last-child {
  margin-bottom: 0;
}

.timeline.timeline-simple .tm-meta {
  font-size: 0.75rem;
  color: #6c757d;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.timeline.timeline-simple .tm-meta span {
  display: inline-flex;
  align-items: center;
}

/* Responsive timeline */
@media (max-width: 768px) {
  .timeline.timeline-simple .tm-items > li {
    margin-left: 15px;
  }

  .timeline.timeline-simple .tm-info {
    left: -17px;
  }

  .timeline.timeline-simple .tm-icon {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .timeline.timeline-simple .tm-box {
    margin-left: 2rem;
    padding: 0.5rem 0.75rem;
  }

  .timeline.timeline-simple .tm-datetime {
    font-size: 0.7rem;
  }
}

/* ============================================
   SCAN FEEDBACK - Universal Pulse Effects
   ============================================ */

/* Full-page pulse overlay for scan feedback */
.scan-pulse-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.scan-pulse-overlay.scan-pulse-success {
  background-color: rgba(40, 167, 69, 0.3);
  opacity: 1;
}

.scan-pulse-overlay.scan-pulse-error {
  background-color: rgba(220, 53, 69, 0.3);
  opacity: 1;
}

.scan-pulse-overlay.scan-pulse-warning {
  background-color: rgba(255, 193, 7, 0.3);
  opacity: 1;
}

/* Modal-scoped pulse - border glow effect */
.modal-content.scan-pulse-modal-success {
  box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.7), 0 0 20px rgba(40, 167, 69, 0.5) !important;
}

.modal-content.scan-pulse-modal-error {
  box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.7), 0 0 20px rgba(220, 53, 69, 0.5) !important;
}

.modal-content.scan-pulse-modal-warning {
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.7), 0 0 20px rgba(255, 193, 7, 0.5) !important;
}

/* FIFO Warning Info Box */
.scan-fifo-warning {
  border: 2px solid #ffc107;
  border-radius: 0.375rem;
  background-color: rgba(255, 193, 7, 0.1);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.scan-fifo-warning .fifo-title {
  font-weight: 600;
  color: #856404;
  margin-bottom: 0.5rem;
}

.scan-fifo-warning .fifo-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #856404;
}

.scan-fifo-warning .fifo-list li {
  margin-bottom: 0.25rem;
}

.scan-fifo-warning .btn-close {
  float: right;
  margin-top: -0.25rem;
}

/* Duplicate Detection Modal - Vendor Form */
.duplicate-item-clickable {
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  border-left: 3px solid transparent !important;
}

.duplicate-item-clickable:hover {
  background-color: #e3f2fd;
  border-color: #0d6efd !important;
  border-left: 3px solid #0d6efd !important;
}

.duplicate-item-clickable:hover .duplicate-select-icon {
  color: #0d6efd !important;
}

.duplicate-item-clickable.border-primary {
  border-left: 3px solid #0d6efd !important;
}

.duplicate-item-disabled {
  opacity: 0.7;
  background-color: #f8f9fa;
}

/* Backwards compatibility for existing hover class */
.duplicate-item-hover:hover {
  background-color: #e3f2fd;
  border-color: #0d6efd !important;
  cursor: pointer;
}

/* ========== MODAL TABS STYLING ========== */
/* Improve visibility of tabs in modals */
.modal .nav-tabs .nav-link {
  color: #495057;
  font-weight: 500;
  background-color: #f8f9fa;
  border-color: #dee2e6 #dee2e6 #fff;
}

.modal .nav-tabs .nav-link:hover {
  color: #0d6efd;
  background-color: #e9ecef;
  border-color: #dee2e6 #dee2e6 #fff;
}

.modal .nav-tabs .nav-link.active {
  color: #0d6efd;
  font-weight: 600;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
  border-top: 3px solid #0d6efd;
}

/* ========== TAB VALIDATION ERROR INDICATORS ========== */
/* Visual indicator for tabs containing validation errors */
.modal .nav-tabs .nav-link.tab-has-error {
  color: #dc3545;
  background-color: #fff5f5;
  border-color: #f8d7da #f8d7da #fff;
}

.modal .nav-tabs .nav-link.tab-has-error:hover {
  color: #b02a37;
  background-color: #fcecec;
}

.modal .nav-tabs .nav-link.tab-has-error.active {
  color: #dc3545;
  background-color: #fff;
  border-top: 3px solid #dc3545;
  border-color: #f8d7da #f8d7da #fff;
}

/* Red dot badge for tabs with errors */
.tab-error-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #dc3545;
  border-radius: 50%;
  vertical-align: middle;
  animation: tab-error-pulse 1.5s ease-in-out infinite;
}

@keyframes tab-error-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Ensure invalid-feedback is visible when shown */
.modal .invalid-feedback {
  display: none;
}

.modal .is-invalid ~ .invalid-feedback,
.modal .is-invalid + .select2-container ~ .invalid-feedback {
  display: block;
}

/* ========== DATATABLE CHILD ROWS (Production Plans) ========== */
/* Hide default DataTables ::before triangle arrow */
td.dt-control::before {
  display: none !important;
}

/* Expand/collapse button column */
td.dt-control {
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
}

/* Only show pointer cursor when there's an expand icon */
td.dt-control:empty {
  cursor: default;
}

td.dt-control i {
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

td.dt-control:hover i {
  transform: scale(1.2);
}

/* Expanded row styling */
tr.shown td.dt-control i {
  color: #dc3545 !important;
}

/* Child row content */
tr.shown + tr > td {
  padding: 0 !important;
  background-color: #f8f9fa;
}

/* Child row cards */
tr.shown + tr .card {
  border: 1px solid #dee2e6;
  box-shadow: none;
}

tr.shown + tr .card-header {
  border-bottom: 1px solid #dee2e6;
}

tr.shown + tr .table {
  margin-bottom: 0;
}

/* Session tables in child rows */
tr.shown + tr .table-sm th,
tr.shown + tr .table-sm td {
  padding: 0.4rem 0.6rem;
}

/* Batch number code styling in child rows */
tr.shown + tr code {
  background-color: #e9ecef;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
}

/* ========== PRODUCTION PLAN EDITOR MODAL ========== */
/* Reduce margin between session cards */
#sessionsContainer .session-card:not(:first-child) {
  margin-top: 0.5rem !important;
}

#sessionsContainer .session-card {
  margin-bottom: 0.5rem !important;
}

/* Hide validation icon in narrow inputs (mobile/small screens) */
@media (max-width: 576px) {
  .form-control.is-invalid,
  .form-select.is-invalid {
    background-image: none !important;
    padding-right: 0.75rem !important;
  }
}

/* Also hide in small quantity inputs (always narrow) */
.batch-quantity-input.is-invalid {
  background-image: none !important;
  padding-right: 0.75rem !important;
}

/* ========== ATTACHMENT/RECEIPT PREVIEW AREA ========== */
/* Styles for the multiple attachment preview in transaction modal */

/* Container for attachment items */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

/* Individual attachment item */
.attachment-item {
  display: inline-flex;
  flex-shrink: 0;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.attachment-item:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Attachment icon (clickable) */
.attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.attachment-icon:hover {
  transform: scale(1.05);
}

/* Remove button on attachment */
.btn-remove-attachment {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.attachment-item:hover .btn-remove-attachment {
  opacity: 1;
}

/* Add attachment button */
.btn-add-attachment {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-add-attachment:hover {
  background-color: #f8f9fa;
  border-color: #6c757d;
}

/* Receipt dropzone area */
#receiptDropZone {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#receiptDropZone.border-primary {
  background-color: #f0f7ff;
}

/* ========== PRODUCTION PLAN SESSIONS HIERARCHY ========== */
/* Two-level expansion: Plan -> Sessions -> Batches */

/* Cursor pointer utility for clickable rows */
.cursor-pointer {
  cursor: pointer;
}

/* Session row hover effect */
.plan-sessions-container .session-row:hover {
  background-color: #f8f9fa;
}

/* Session caret icon rotation */
.plan-sessions-container .session-caret {
  transition: transform 0.2s ease;
}

/* Batches container indent */
.plan-sessions-container .session-batches-row td {
  border-top: none;
}

/* ========== ORDER MODAL - STOCK QUANTITY WARNING ========== */
/* Prevent input group from wrapping - keep (stock) input x# on same line */
.pack-qty-group {
  flex-wrap: nowrap !important;
  min-width: max-content;
}

/* Over limit: Red styling for quantity inputs exceeding available stock */
.pack-qty.stock-exceeded {
  border-color: #dc3545 !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* At limit: Yellow styling for quantity inputs at exactly available stock */
.pack-qty.stock-at-limit {
  border-color: #ffc107 !important;
  background-color: #fffbf0 !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
}

/* Warning text below input */
.stock-warning-text {
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ========== ORDER MODAL PRODUCTS TABLE - HEADER PAGINATION ========== */
/* Pagination controls in DataTable header row */
#orderModalProductsTable_wrapper > .row.align-items-center.mb-2 {
  margin-bottom: 0.5rem !important;
}

/* Compact pagination styling in header */
#orderModalProductsTable_wrapper .dataTables_paginate {
  margin: 0;
  padding: 0;
}

#orderModalProductsTable_wrapper .dataTables_paginate .pagination {
  margin: 0;
  gap: 2px;
}

#orderModalProductsTable_wrapper .dataTables_paginate .pagination .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
}

/* Search box styling in header */
#orderModalProductsTable_wrapper .dataTables_filter {
  margin: 0;
}

#orderModalProductsTable_wrapper .dataTables_filter input {
  width: 180px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

/* =================================================================
   Select2 Multiselect - Fix fixed height from theme.css
   ================================================================= */
.select2-container--bootstrap-5 .select2-selection--multiple,
.select2-container--bootstrap .select2-selection--multiple {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 4px !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  padding: 1px 6px !important;
  margin: 2px 4px 2px 0 !important;
  font-size: 0.8rem;
  line-height: 1.4;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
  width: auto !important;
  flex: 0 1 auto;
  z-index: auto;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search__field {
  height: 24px !important;
  margin: 0 !important;
}

/* =================================================================
   Order Status Filter - Select2 Multiselect Styling
   ================================================================= */

/* Container styling for the status filter */
#orderStatusFilter + .select2-container {
  min-width: 180px;
}

/* Custom "X selected" badge styling */
#orderStatusFilter + .select2-container .select2-selection__choice--custom {
  background-color: var(--bs-primary);
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  margin: 2px;
}

/* Ensure proper alignment with Bootstrap 5 theme */
#orderStatusFilter + .select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.15rem 0.25rem;
}

/* ========== BARCODE CAMERA SCANNER ========== */
#barcodeScannerOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

#barcodeScannerOverlay .scanner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  z-index: 1;
  min-height: 44px;
}

#barcodeScannerOverlay .scanner-title {
  font-size: 1.1rem;
  font-weight: 600;
}

#barcodeScannerOverlay .btn-scanner-close,
#barcodeScannerOverlay .btn-scanner-torch {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1;
}

#barcodeScannerOverlay .btn-scanner-close:hover,
#barcodeScannerOverlay .btn-scanner-torch:hover {
  color: #ccc;
}

#barcodeScannerOverlay .btn-scanner-torch.active {
  color: #ffc107;
}

#barcodeScannerOverlay .scanner-viewfinder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#barcodeScannerReader {
  width: 100%;
  height: 100%;
}

#barcodeScannerReader > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#barcodeScannerOverlay .scanner-guide-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 100px;
  border: 3px solid #fff;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.3);
}

#barcodeScannerOverlay .scanner-footer {
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}

#barcodeScannerOverlay .scanner-footer p {
  margin: 0;
  font-size: 0.95rem;
}

#barcodeScannerOverlay .scanner-error {
  color: #f44336;
  font-weight: 600;
}

.scanner-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(76, 175, 80, 0.4);
  z-index: 2001;
  pointer-events: none;
  animation: scanFlash 0.3s ease-out forwards;
}

@keyframes scanFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.btn-camera-scan {
  cursor: pointer;
  background: #f8f9fa !important;
  border-color: #ced4da !important;
  transition: color 0.15s, background-color 0.15s;
}

.btn-camera-scan:hover {
  background: #e9ecef !important;
  color: #0d6efd;
}

/* =========================================================================
 * Dashboard preferences UI (Task #30)
 * -------------------------------------------------------------------------
 * Per-user customization: "Customize" toggle in the dashboard header enters
 * an edit mode where widgets can be hidden (red X in the top-right of every
 * card) or reordered with HTML5 drag-and-drop.
 *
 * Layout strategy:
 * - Wrappers on full-width positions (main_action_band, right_sidebar) use
 *   plain `display: block` and behave as normal containers both in and out
 *   of edit mode. The widget templates there span the full row already.
 * - Wrappers on grid positions (main_kpi_strip, main_trend_charts,
 *   main_lists) use `display: contents` in normal mode so the child widget's
 *   own `col-*` classes participate directly in the Bootstrap row grid.
 *   This keeps the pre-Task-#30 layout byte-for-byte identical at every
 *   breakpoint. In edit mode the wrapper becomes a full-width block so it
 *   can host the drag outline and the hide button; the grid visually
 *   collapses to a single stacked column, which is the explicit trade-off
 *   for having a bounding box to drag. Users exit edit mode to see their
 *   new layout in the real grid.
 * ========================================================================= */

.dashboard-widget-wrapper {
  position: relative;
}

.dashboard-widget-wrapper--grid {
  /* Transparent to Bootstrap grid in normal mode: the child widget's own
   * col-* classes become direct children of the .row parent, which is what
   * the pre-Task-#30 layout produced. */
  display: contents;
}

body.dashboard-edit-mode .dashboard-widget-wrapper {
  cursor: move;
  outline: 2px dashed #adb5bd;
  outline-offset: 4px;
  margin-bottom: 0.75rem;
  background-color: rgba(13, 110, 253, 0.02);
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}

body.dashboard-edit-mode .dashboard-widget-wrapper--grid {
  /* Exit display:contents so the wrapper becomes a real box we can drag.
   * Becomes full-width (column 12) in edit mode - the user returns to the
   * real grid on "Done". */
  display: block;
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

body.dashboard-edit-mode .dashboard-widget-wrapper:hover {
  outline-color: #0d6efd;
  background-color: rgba(13, 110, 253, 0.05);
}

/* Edit-mode controls overlay (hide button, drag handle hint) */
.widget-edit-controls {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 20;
  gap: 0.25rem;
  align-items: center;
}

body.dashboard-edit-mode .dashboard-widget-wrapper .widget-edit-controls {
  display: flex;
}

.widget-edit-controls .btn-hide-widget {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #b02a37;
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.widget-edit-controls .btn-hide-widget:hover {
  background-color: #b02a37;
}

.widget-edit-controls .widget-drag-handle {
  color: #6c757d;
  font-size: 0.9rem;
  padding: 0 0.25rem;
  pointer-events: none;
}

/* Drag feedback */
.dashboard-widget-wrapper.dragging {
  opacity: 0.4;
}

.dashboard-widget-wrapper.drag-over {
  outline-color: #0d6efd;
  outline-width: 3px;
  background-color: rgba(13, 110, 253, 0.1);
}

/* Fade-out animation when a widget is being hidden */
.dashboard-widget-wrapper.widget-hiding {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}