.visual-grid * {
box-sizing: border-box;
font-family: inherit;
}

.station-column {
all: unset;
display: block;

background: #ffffff;
border-radius: 18px;
padding: 22px;
width: 420px;
border: 3px solid #f59e0b;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
}



.cart-title {
text-align: center;
font-weight: 800;
font-size: 20px;
margin-bottom: 18px;
color: #111827;
}

.shelf-box {
background: linear-gradient(180deg,#f9fafb,#f3f4f6);
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 12px;
margin-bottom: 14px;
box-shadow: inset 0 2px 4px rgba(0,0,0,.04);
}

.shelf-label {
font-size: 12px;
font-weight: 700;
color: #6b7280;
margin-bottom: 10px;
display: block;
}

.bin-container {
display: grid;
gap: 8px;
}


.bin-unit {
background: #ffffff;
border: 2px solid #3b82f6;
border-radius: 6px;
height: 34px;
font-size: 11px;
font-weight: 700;
color: #1d4ed8;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(59,130,246,.15);
transition: .2s;
}

.bin-unit:hover {
transform: translateY(-2px);
background: #3b82f6;
color: #fff;
}

#pickupPlanModal .modal-content {
font-size: 15px;
}

#pickupPlanModal .modal-title {
font-size: 18px;
}

#pickupPlanModal label.form-label {
font-size: 14px;
}

#pickupPlanModal .card {
transition: 0.2s ease-in-out;
}

#pickupPlanModal .card:hover {
transform: translateY(-2px);
}

/* ===== Pickup Loader Overlay ===== */
.pickup-loader{
position: fixed;
inset: 0;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(2px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}

.pickup-loader__content{
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 18px 22px;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border: 1px solid rgba(0,0,0,0.06);
}

.pickup-spinner{
width: 54px;
height: 54px;
border-radius: 50%;
border: 5px solid rgba(108,99,255,0.2);
border-top-color: #6C63FF;
animation: pickupSpin 0.9s linear infinite;
}

.pickup-loader__text{
font-size: 13px;
color: #6b7280;
font-weight: 600;
}

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

/* ===============================
BULK TOOLBAR
================================ */
.bulk-toolbar-wrapper {
display: flex;
justify-content: flex-end;
/* 👉 على اليمين */
padding: 10px 16px;
border-bottom: 1px solid #eee;
background: #fff;
}

.bulk-toolbar {
display: flex;
align-items: center;
gap: 12px;
}

.bulk-btn {
background: #ff4d4f;
}

.bulk-btn:hover {
background: #e43d3f;
}


/* ===============================
FINAL FIX – FORCE TRUE VERTICAL CENTER
================================ */

/* خلي الـ td نفسها table-cell طبيعي */
#orders-list-view td.editable {
display: table-cell;
vertical-align: middle;
padding-top: 12px;
padding-bottom: 12px;
}

/* wrapper داخلي يتوسّط فعليًا */
#orders-list-view td.editable .cell-editor {
display: flex;
align-items: center;
/* 🔥 التوسيط الحقيقي */
min-height: 38px;
/* نفس ارتفاع select2 */
width: 100%;
}


/* inputs */
#orders-list-view td.editable .cell-editor input {
height: 32px;
}

/* select2 */
#orders-list-view td.editable .cell-editor .select2-container {
height: 32px;
}

/* select2 selection */
#orders-list-view td.editable .cell-editor .select2-selection--single {
height: 32px;
display: flex;
align-items: center;
}


/*    */

.toggle-sidebar {
cursor: pointer;
position: absolute;
right: -18px;
top: -9px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active i {
color: var(--theme-default);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li.sidebar-list:hover>a i {
color: var(--theme-default);
}

/* Fix: Theme overrides make .offcanvas position: unset and always visible.
Restore proper Bootstrap behavior for our create-offcanvas only. */
#createOffcanvas {
position: fixed !important;
/* override theme */
visibility: hidden;
/* hidden until shown */
z-index: 1045;
/* above content */
background: var(--bs-body-bg, #fff);
transition: 0.3s ease-in-out;
}

#createOffcanvas.show {
visibility: visible;
transition: 0.3s ease-in-out;
}

.error {
margin: 10px 0;
}

.alert-success {
background: #43a53a;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
border-color: #dc3545 !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-logo {
max-height: 60px;
width: 100%;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
padding: 13px 35px;
}

/* ===============================
TABLE FIXES
================================ */
#orders-list-view {
border-collapse: collapse;
}

#orders-list-view td,
#orders-list-view th {
padding: 12px;
vertical-align: middle !important;
}

/* ===============================
EDITABLE CELL
================================ */
#orders-list-view td.editable {
position: relative;
/* مرجع للأزرار */
cursor: pointer;
}

/* ===============================
INPUT / SELECT
================================ */
#orders-list-view td.editable input.form-control,
#orders-list-view td.editable select.form-select {
height: 32px;
font-size: 12px;
}

/* ===============================
SAVE / CANCEL (DEFAULT: HIDDEN)
================================ */
#orders-list-view .cell-actions {
display: none;
/* 🔴 مهم جدًا */
}

/* ===============================
SAVE / CANCEL (WHEN EDITING)
================================ */
#orders-list-view td.editable.editing .cell-actions {
display: flex;
position: absolute;
bottom: -6px;
left: 0;
gap: 4px;
background: #fff;
padding: 2px 4px;
border-radius: 6px;
z-index: 20;
}

/* buttons */
#orders-list-view .cell-actions .btn {
font-size: 11px;
padding: 2px 6px;
line-height: 1;
}

/* ===============================
INVALID CELL
================================ */
#orders-list-view td.invalid {
background: #fff5f5;
color: #dc3545;
font-weight: 600;
}

/* ===============================
SELECT2 FIX
================================ */
#orders-list-view .select2-container {
width: 100% !important;
}

#orders-list-view .select2-selection--single {
height: 32px;
display: flex;
align-items: center;
}

.invalid-data-page #orders-list-view td.editable.editing {
min-width: 210px;
vertical-align: top !important;
}

.invalid-data-page #orders-list-view td[data-field="area_id"].editable.editing {
min-width: 260px;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-editor {
display: block;
min-height: 0;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-editor .form-control,
.invalid-data-page #orders-list-view td.editable.editing .cell-editor .form-select,
.invalid-data-page #orders-list-view td.editable.editing .cell-editor .select2-container {
width: 100% !important;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-actions {
position: static;
display: flex;
justify-content: flex-start;
gap: 6px;
margin-top: 8px;
padding: 0;
background: transparent;
border-radius: 0;
z-index: auto;
flex-wrap: wrap;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn {
min-width: 58px;
padding: 4px 8px;
font-size: 11px;
line-height: 1.2;
text-decoration: none !important;
box-shadow: none;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn *,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .save-cell,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .cancel-cell {
-webkit-text-decoration: none !important;
text-decoration: none !important;
text-decoration-line: none !important;
}

.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:hover,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:focus,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:active,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:hover *,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:focus *,
.invalid-data-page #orders-list-view td.editable.editing .cell-actions .btn:active * {
text-decoration: none !important;
}

.invalid-data-page #orders-list-view td.editable.editing .select2-selection--single {
min-height: 32px;
}


/* Action Icon Buttons - Square with shadow style */
.action-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
padding: 0 !important;
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #666;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}

.action-icon-btn:hover {
background: #f8f9fa;
border-color: #d0d0d0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
color: #333;
transform: translateY(-1px);
}

.action-icon-btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.action-icon-btn i {
font-size: 16px;
line-height: 1;
}

.action-icon-btn.btn-outline-primary,
.action-icon-btn.btn-outline-secondary,
.action-icon-btn.btn-outline-info,
.action-icon-btn.btn-outline-warning,
.action-icon-btn.btn-outline-danger {
background: #ffffff;
border-color: #e0e0e0;
color: #666;
}

.action-icon-btn.btn-outline-primary:hover,
.action-icon-btn.btn-outline-secondary:hover,
.action-icon-btn.btn-outline-info:hover,
.action-icon-btn.btn-outline-warning:hover,
.action-icon-btn.btn-outline-danger:hover {
background: #f8f9fa;
border-color: #d0d0d0;
color: #333;
}

.profile-info-field {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 12px 16px;
display: flex;
align-items: center;
color: #374151;
font-size: 14px;
}

.form-label-detail {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: block;
}

.detail-field-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
min-height: 50px;
display: flex;
align-items: center;
transition: all 0.2s ease;
}

.detail-field-card:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
border-color: #d1d5db;
}

.detail-value {
color: #1f2937;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}

.profile-card,
.details-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Filter Loader Styles */
.filter-loader-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.95);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
border-radius: 8px;
backdrop-filter: blur(2px);
}

.filter-loader-spinner {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.filter-loader-spinner .spinner-border {
border-width: 0.3em;
animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
to {
transform: rotate(360deg);
}
}

.filter-loading {
position: relative;
overflow: hidden;
}

/* ============================================
Show Content Styles - Reusable Components
============================================ */

/* Header Icon Circle with Gradient */
.show-header-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.show-header-icon i {
font-size: 35px;
}

/* Show Header Title */
.show-header-title {
color: #2c3e50;
font-size: 22px;
}

/* Show Code Badge */
.show-code-badge {
font-size: 13px;
font-family: monospace;
background: #f8f9fa;
padding: 4px 10px;
border-radius: 6px;
display: inline-block;
}

/* Show Status Badge */
.show-status-badge {
font-size: 12px;
padding: 6px 14px;
border-radius: 20px;
}

/* Detail Card */
.show-detail-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
transition: all 0.3s ease;
}

.show-detail-card .card-body {
padding: 0.75rem;
}

/* Detail Card Header with Icon */
.show-detail-header {
display: flex;
align-items: center;
margin-bottom: 0.5rem;
}

.show-detail-header i {
font-size: 16px;
margin-right: 0.5rem;
}

.show-detail-label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0;
}

/* Detail Card Value */
.show-detail-value {
color: #2c3e50;
font-size: 14px;
font-weight: 600;
margin: 0;
}

.show-detail-value.mono {
font-family: monospace;
}

/* Additional Information Section */
.show-additional-info {
border-top: 1px solid #e5e7eb;
padding-top: 1rem;
margin-top: 1rem;
}

.show-additional-info-title {
color: #2c3e50;
font-size: 14px;
font-weight: 700;
margin-bottom: 1rem;
}

.show-additional-info-title i {
margin-right: 0.5rem;
}

/* Info Item with Icon Circle */
.show-info-item {
display: flex;
align-items: flex-start;
}

.show-info-icon-circle {
width: 36px;
height: 36px;
background: #f3f4f6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 0.5rem;
}

.show-info-icon-circle i {
font-size: 14px;
}

/* Info Label */
.show-info-label {
font-size: 11px;
color: #6b7280;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 0.25rem;
}

/* Info Value */
.show-info-value {
color: #2c3e50;
font-size: 13px;
font-weight: 600;
margin: 0;
}

/* ============================================
Generic Show/Edit Page Styles - Reusable across all models
============================================ */

/* Card Styles */
.profile-card,
.details-card {
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: none;
}

/* Icon Circle */
.icon-circle {
width: 120px;
height: 120px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-circle i {
font-size: 50px;
}

/* Icon Circle Small */
.icon-circle-sm {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.icon-circle-sm i {
font-size: 2rem;
}

/* Name Title */
.name-title {
color: #2c3e50;
font-size: 24px;
}

/* Code Badge */
.code-badge {
font-size: 14px;
font-family: monospace;
background: #f8f9fa;
padding: 6px 12px;
border-radius: 6px;
display: inline-block;
}

/* Username Badge (smaller than code badge) */
.username-badge {
font-size: 12px;
font-family: monospace;
}

/* Profile Photo with Border */
.profile-photo {
width: 120px;
height: 120px;
object-fit: cover;
border: 4px solid #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Status Indicators */
.status-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
}

.status-indicator.status-active {
color: #10b981;
}

.status-indicator.status-inactive {
color: #6b7280;
}

.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}

.status-dot.status-active {
background: #10b981;
}

.status-dot.status-inactive {
background: #6b7280;
}

/* Divider */
.content-divider {
margin: 24px 0;
opacity: 0.1;
}

/* Icon Colors */
.icon-gray {
color: #6b7280;
}

/* Buttons */
.btn-rounded {
border-radius: 8px;
padding: 10px;
font-weight: 500;
}

.btn-rounded-lg {
border-radius: 8px;
padding: 10px 24px;
font-weight: 500;
}

.btn-outline-secondary-custom {
border-color: #e5e7eb;
background: #fff;
}

/* Card Headers */
.card-header-relative {
position: relative;
}

.card-header-title {
color: #2c3e50;
font-size: 20px;
}

/* Read Only Badge */
.read-only-badge {
position: absolute;
top: 20px;
right: 20px;
font-size: 11px;
padding: 4px 12px;
border-radius: 12px;
background: #f3f4f6;
color: #6b7280;
}

/* Status Values */
.status-value-active {
color: #10b981;
}

.status-value-inactive {
color: #6b7280;
}

/* Avatar */
.avatar-circle {
width: 60px;
height: 60px;
}

.avatar-icon {
font-size: 24px;
}

.avatar-img {
object-fit: cover;
}

/* Image Styles */
.img-cover {
object-fit: cover;
}

.img-cover-150 {
height: 150px;
object-fit: cover;
}

.img-cover-200 {
height: 200px;
object-fit: cover;
}

.video-max-height-200 {
max-height: 200px;
}

.video-max-height-400 {
max-height: 400px;
}

/* Photo Preview */
.photo-preview-container {
display: none;
}

.photo-preview-container.show {
display: block;
}

.photo-preview-img {
max-width: 200px;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #dee2e6;
}

.current-photo-img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 8px;
border: 1px solid #dee2e6;
}

/* Code Text (Monospace) */
.text-code {
font-family: monospace;
}

/* Hidden State */
.hidden-display {
display: none !important;
}

/* Table Styles */
.scrollable-table {
max-height: 500px;
overflow-y: auto;
}

.table-header-sticky {
position: sticky;
top: 0;
z-index: 10;
}

/* Readonly Input */
.input-readonly {
background-color: #f8f9fa;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #000 !important;
}

.select2-container .select2-selection--single {
border-color: #efefef;
border-radius: 0.25rem !important;
height: 39px !important;
padding: 4px 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 7px;
right: 5px;
}

/* Remove gap between Select2 input and dropdown options */
.select2-container--open .select2-dropdown {
margin-top: 0 !important;
}

.select2-container--open.select2-container--below .select2-dropdown {
margin-top: 0 !important;
border-top: none !important;
}

.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--open.select2-container--below .select2-selection--multiple {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}

.select2-container+.invalid-feedback {
/* display: block !important; */
margin-top: 0.25rem;
}

/* Style for invalid Select2 */
.select2-selection.is-invalid {
border: 1px solid #dc3545 !important;
}

.scope-bottom-wrapper .sidebar-left-icons .nav-item .nav-link .nav-rounded .product-icons i {
font-size: 18px;
margin: 0;
padding: 0;
}

/* ============================================
Order Receipt Styles - Responsive Div Boxes
============================================ */

/* Receipt Card */
.receipt-card {
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: none;
}

/* Receipt Header Title */
.receipt-header-title {
color: #2c3e50;
font-size: 20px;
}

/* Receipt Items Container */
.receipt-items-container {
display: flex;
flex-direction: column;
gap: 12px;
}

/* Equal-height highlight cards per row (Bootstrap grid) */
.receipt-items-container .row > [class*="col-"] {
display: flex;
flex-direction: column;
}

.receipt-items-container .row > [class*="col-"] > .receipt-item.receipt-item-highlight {
flex: 1 1 auto;
width: 100%;
}

/* Receipt Item - Base Styles */

/* ============================================
SIDEBAR LAYOUT FIX
============================================ */
@media (min-width: 1200px) {

/* Default open state */
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper:not(.close_icon)~.page-body,
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper:not(.close_icon)~.footer {
margin-left: 280px !important;
width: calc(100% - 280px) !important;
transition: all 0.3s ease;
}

/* Closed/Collapsed state */
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon~.page-body,
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon~.footer {
margin-left: 80px !important;
width: calc(100% - 80px) !important;
transition: all 0.3s ease;
}

/* RTL Support */
body.rtl .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper:not(.close_icon)~.page-body,
body.rtl .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper:not(.close_icon)~.footer {
margin-right: 280px !important;
margin-left: unset !important;
}

body.rtl .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon~.page-body,
body.rtl .page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper.close_icon~.footer {
margin-right: 80px !important;
margin-left: unset !important;
}
}

/* Mobile Sidebar Fix (Overlay) */
@media (max-width: 1199px) {
.page-wrapper.compact-wrapper .page-body-wrapper .sidebar-wrapper~.page-body {
margin-left: 0 !important;
width: 100% !important;
}
}

/* ============================================
FORCE HEADER SIDEBAR TOGGLE VISIBILITY
============================================ */
.page-wrapper .page-header .toggle-sidebar {
display: flex !important;
align-items: center;
cursor: pointer;
margin-left: 20px;
/* Add some spacing if needed */
}

/* Ensure the icon itself is visible */
.page-wrapper .page-header .toggle-sidebar .status_toggle {
display: block !important;
width: auto !important;
height: auto !important;
}





/* Receipt Item - Base */
.receipt-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

/* Receipt Item - Background Variants */
.receipt-item-gray {
background-color: #f8f9fa;
padding: 15px 10px;
}

.receipt-item-danger {
background-color: #fff5f5;
}

.receipt-item-warning {
background-color: #fffbf0;
}

.receipt-item-success {
background-color: #f0fdf4;
}

.receipt-item-highlight {
background-color: #f0f9ff;
border-left: 3px solid #3b82f6;
padding: 15px 10px;
}

/* Receipt Item - Left Side */
.receipt-item-left {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}

/* Receipt Item - Right Side */
.receipt-item-right {
flex-shrink: 0;
display: flex;
align-items: center;
text-align: right;
}

/* Receipt Item Label */
.receipt-item-label {
font-weight: 600;
font-size: 15px;
color: #2c3e50;
display: block;
}

/* Receipt Item Label Large (for Total) */
.receipt-item-label-large {
font-weight: 700;
font-size: 18px;
color: #2c3e50;
display: block;
}

/* Receipt Item Description */
.receipt-item-description {
color: #6c757d;
font-size: 13px;
display: block;
}

/* Receipt Item Value */
.receipt-item-value {
font-weight: 700;
font-size: 16px;
color: #2c3e50;
}

/* Receipt Item Value Large (for Total) */
.receipt-item-value-large {
font-weight: 700;
font-size: 18px;
}

/* Receipt Item Code (monospace for order numbers) */
.receipt-item-code {
font-family: monospace;
background-color: #f1f5f9;
padding: 4px 8px;
border-radius: 4px;
font-size: 15px;
}

/* Receipt Badge */
.receipt-badge {
font-size: 14px;
padding: 8px 16px;
border-radius: 6px;
font-weight: 600;
display: inline-block;
}

.receipt-badge-info {
background-color: #d1ecf1;
color: #0c5460;
}

.receipt-badge-primary {
background-color: #cfe2ff;
color: #084298;
}

/* Receipt Badge Small */
.receipt-badge-small {
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
display: inline-block;
}

.receipt-badge-danger {
background-color: #f8d7da;
color: #842029;
}

.receipt-badge-success {
background-color: #d1e7dd;
color: #0f5132;
}

.receipt-badge-status {
background-color: #e0e7ff;
color: #3730a3;
text-transform: capitalize;
}

/* Receipt Divider */
.receipt-divider {
margin: 8px 0;
border: 0;
opacity: 1;
}

.receipt-divider-dashed {
border-top: 1px dashed #dee2e6;
}

.receipt-divider-solid {
margin: 16px 0;
border-top: 2px solid #dee2e6;
}

/* Receipt Gift Alert */
.receipt-gift-alert {
background-color: #d1ecf1;
color: #0c5460;
padding: 12px 16px;
border-radius: 8px;
margin-top: 12px;
}

/* Responsive Design */
@media (max-width: 576px) {
.receipt-item {
flex-direction: column;
gap: 8px;
}

.receipt-item-right {
width: 100%;
justify-content: flex-start;
}

.receipt-item-label,
.receipt-item-label-large {
font-size: 14px;
}

.receipt-item-value,
.receipt-item-value-large {
font-size: 15px;
}

.receipt-badge {
font-size: 13px;
padding: 6px 12px;
}
}

@media (max-width: 768px) {
.receipt-header-title {
font-size: 18px;
}

.receipt-items-container {
gap: 10px;
}
}

/* ============================================
Activity Log Styles - Timeline View
============================================ */

/* Activity Log Card */
.activity-log-card {
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: none;
}

/* Activity Log Header */
.activity-log-header-title {
color: #2c3e50;
font-size: 20px;
}

/* Activity Timeline Container */
.activity-timeline {
position: relative;
padding: 0;
}

/* Activity Item */
.activity-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
position: relative;
}

.activity-item:last-child {
margin-bottom: 0;
}

/* Activity Icon Wrapper */
.activity-icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}

/* Activity Icon */
.activity-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 2;
position: relative;
}

.activity-icon-created {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.activity-icon-updated {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.activity-icon-deleted {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

/* Activity Line */
.activity-line {
width: 2px;
flex-grow: 1;
background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
margin-top: 8px;
}

/* Activity Content */
.activity-content {
flex: 1;
background: #f9fafb;
border-radius: 12px;
padding: 16px 20px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}

.activity-content:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-color: #d1d5db;
}

/* Activity Header */
.activity-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
gap: 16px;
}

/* Activity Title */
.activity-title {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

/* Activity Event Badge */
.activity-event-badge {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.activity-event-created {
background-color: #d1fae5;
color: #065f46;
}

.activity-event-updated {
background-color: #dbeafe;
color: #1e40af;
}

.activity-event-deleted {
background-color: #fee2e2;
color: #991b1b;
}

/* Activity Description */
.activity-description {
font-size: 14px;
font-weight: 600;
color: #374151;
}

/* Activity Meta */
.activity-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}

.activity-time {
font-size: 13px;
font-weight: 600;
color: #6b7280;
}

.activity-date {
font-size: 11px;
color: #9ca3af;
}

/* Activity Causer */
.activity-causer {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
}

.activity-causer strong {
color: #374151;
}

/* Activity Properties */
.activity-properties {
margin-top: 12px;
}

/* Activity Toggle Button */
.activity-toggle-btn {
font-size: 12px;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.2s ease;
}

.activity-toggle-btn:hover {
background-color: #f3f4f6;
}

/* Activity Changes Content */
.activity-changes-content,
.activity-created-content {
background: #ffffff;
border-radius: 8px;
padding: 16px;
border: 1px solid #e5e7eb;
}

/* Change Item */
.change-item {
padding: 12px;
background: #f9fafb;
border-radius: 6px;
margin-bottom: 10px;
}

.change-item:last-child {
margin-bottom: 0;
}

/* Putaway: old → new in one horizontal row */
.change-item-inline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
}
.change-item-inline .change-old,
.change-item-inline .change-new {
display: inline;
}
.change-item-inline .change-arrow-h {
margin: 0 0.5rem;
}

.change-field {
font-size: 13px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}

.change-values {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

.change-old,
.change-new {
display: flex;
flex-direction: column;
gap: 4px;
}

.change-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
color: #6b7280;
letter-spacing: 0.5px;
}

.change-old .change-value {
background: #fee2e2;
color: #991b1b;
padding: 6px 10px;
border-radius: 4px;
font-size: 13px;
word-break: break-word;
}

.change-new .change-value {
background: #d1fae5;
color: #065f46;
padding: 6px 10px;
border-radius: 4px;
font-size: 13px;
word-break: break-word;
}

/* Created Item */
.created-item {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: #f9fafb;
border-radius: 4px;
margin-bottom: 6px;
}

.created-item:last-child {
margin-bottom: 0;
}

.created-key {
font-size: 13px;
font-weight: 600;
color: #6b7280;
}

.created-value {
font-size: 13px;
color: #374151;
font-weight: 500;
word-break: break-word;
text-align: right;
max-width: 60%;
}

/* Activity Empty State */
.activity-empty-state {
text-align: center;
padding: 60px 20px;
}

.activity-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.activity-empty-icon i {
font-size: 36px;
color: #9ca3af;
}

.activity-empty-title {
font-size: 20px;
font-weight: 700;
color: #374151;
margin-bottom: 8px;
}

.activity-empty-text {
font-size: 14px;
color: #6b7280;
margin: 0;
}

/* Responsive Design for Activity Log */
@media (max-width: 768px) {
.activity-item {
gap: 12px;
}

.activity-header {
flex-direction: column;
gap: 8px;
}

.activity-meta {
align-items: flex-start;
}

.change-values {
grid-template-columns: 1fr;
gap: 8px;
}

.activity-icon {
width: 36px;
height: 36px;
font-size: 14px;
}

.activity-content {
padding: 12px 16px;
}

.created-item {
flex-direction: column;
gap: 4px;
}

.created-value {
text-align: left;
max-width: 100%;
}
}

/* ============================================
Status History Styles - Timeline View
============================================ */

/* Status History Card */
.status-history-card {
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: none;
}

/* Status History Header */
.status-history-header-title {
color: #2c3e50;
font-size: 20px;
}

/* Status History Timeline Container */
.status-history-timeline {
position: relative;
padding: 0;
margin-bottom: 30px;
}

/* Status History Item */
.status-history-item {
display: flex;
gap: 20px;
margin-bottom: 30px;
position: relative;
}

.status-history-item:last-child {
margin-bottom: 0;
}

/* Status History Icon Wrapper */
.status-history-icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}

/* Status History Icon */
.status-history-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
z-index: 2;
position: relative;
}

/* Status History Line */
.status-history-line {
width: 3px;
flex-grow: 1;
background: linear-gradient(to bottom, #e9d5ff 0%, #f3e8ff 100%);
margin-top: 8px;
}

/* Status History Content */
.status-history-content {
flex: 1;
background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
border-radius: 12px;
padding: 20px 24px;
border: 2px solid #e9d5ff;
transition: all 0.3s ease;
}

.status-history-content:hover {
box-shadow: 0 8px 16px rgba(139, 92, 246, 0.15);
border-color: #d8b4fe;
transform: translateY(-2px);
}

/* Status History Header */
.status-history-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 16px;
}

/* Status History Change */
.status-history-change {
flex: 1;
}

.status-change-row {
display: flex;
flex-direction: column;
gap: 8px;
}

.status-change-label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.status-change-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}

/* Status Badge */
.status-badge {
font-size: 13px;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
display: inline-block;
text-transform: capitalize;
}

.status-badge-old {
background-color: #fee2e2;
color: #991b1b;
text-decoration: line-through;
}

.status-badge-new {
background-color: #d1fae5;
color: #065f46;
}

.status-badge-sub-old {
background-color: #fef3c7;
color: #92400e;
text-decoration: line-through;
font-size: 12px;
}

.status-badge-sub-new {
background-color: #dbeafe;
color: #1e40af;
font-size: 12px;
}

/* Status History Meta */
.status-history-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}

.status-history-time {
font-size: 13px;
font-weight: 600;
color: #7c3aed;
}

.status-history-date {
font-size: 11px;
color: #9ca3af;
}

/* Status History User */
.status-history-user {
font-size: 13px;
color: #6b7280;
margin-bottom: 8px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: 6px;
display: inline-block;
}

.status-history-user strong {
color: #374151;
}

/* Status History Note */
.status-history-note {
margin-top: 12px;
padding: 12px 16px;
background: #ffffff;
border-radius: 8px;
border-left: 3px solid #8b5cf6;
}

.status-history-note-label {
font-size: 12px;
font-weight: 700;
color: #7c3aed;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.status-history-note-content {
font-size: 14px;
color: #374151;
line-height: 1.6;
}

/* Status History Summary */
.status-history-summary {
margin-top: 30px;
padding-top: 30px;
border-top: 2px dashed #e9d5ff;
}

.summary-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
border-radius: 12px;
border: 1px solid #e9d5ff;
transition: all 0.3s ease;
}

.summary-card:hover {
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
border-color: #d8b4fe;
transform: translateY(-2px);
}

.summary-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
flex-shrink: 0;
}

.summary-content {
flex: 1;
}

.summary-label {
font-size: 12px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}

.summary-value {
font-size: 18px;
font-weight: 700;
color: #374151;
}

/* Status History Empty State */
.status-history-empty-state {
text-align: center;
padding: 60px 20px;
}

.status-history-empty-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.status-history-empty-icon i {
font-size: 36px;
color: #9ca3af;
}

.status-history-empty-title {
font-size: 20px;
font-weight: 700;
color: #374151;
margin-bottom: 8px;
}

.status-history-empty-text {
font-size: 14px;
color: #6b7280;
margin: 0;
}

/* Responsive Design for Status History */
@media (max-width: 768px) {
.status-history-item {
gap: 12px;
}

.status-history-header {
flex-direction: column;
gap: 12px;
}

.status-history-meta {
align-items: flex-start;
}

.status-history-icon {
width: 40px;
height: 40px;
font-size: 16px;
}

.status-history-content {
padding: 16px 18px;
}

.status-change-badges {
flex-direction: column;
align-items: flex-start;
}

.summary-card {
padding: 16px;
}

.summary-icon {
width: 44px;
height: 44px;
font-size: 20px;
}

.summary-value {
font-size: 16px;
}
}

.dropdown .dropdown-toggle:after {
display: none;
}

.dropdown .dropdown-toggle {
width: auto;
}

.product-page-main .nav.nav-tabs .nav-item .nav-link {
padding: 10px;
font-size: 16px;
}

.nav i {
margin-right: 2px;
}

.dropdown-menu .dropdown-item {
color: #000;
}

/* ============================================
Create Order Modal - Modern Design Styles
============================================ */

/* Modal Content */
#createOrderModal .modal-content {
border-radius: 20px;
overflow: hidden;
border: none;
}

/* Modern Header with Gradient */
#createOrderModal .modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
padding: 2rem 2rem 1.5rem 2rem;
border-bottom: none;
}

#createOrderModal .modal-title {
font-size: 1.5rem;
font-weight: 700;
}

#createOrderModal .btn-close-white {
filter: brightness(0) invert(1);
opacity: 0.8;
}

#createOrderModal .btn-close-white:hover {
opacity: 1;
}

/* Modal Body */
#createOrderModal .modal-body {
background: #ffffff;
}

/* Merchant Selection */
#createOrderModal .merchant-select-wrapper {
margin-bottom: 2rem;
}

#createOrderModal .merchant-select-wrapper .form-label {
color: #1e293b;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}

#createOrderModal .merchant-select-wrapper .form-select {
border-radius: 10px;
border: 2px solid #e0e7ff;
padding: 0.75rem 1rem;
font-size: 0.95rem;
transition: all 0.3s ease;
}

#createOrderModal .merchant-select-wrapper .form-select:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}

/* Divider with Text */
#createOrderModal .divider-with-text {
position: relative;
}

#createOrderModal .divider-with-text hr {
margin: 0;
}

#createOrderModal .divider-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 0 1rem;
}

/* Creation Type Cards */
.creation-type-card {
border-radius: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
overflow: hidden;
}

.creation-type-card.manual-card {
border: 2px solid #e0e7ff;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
}

.creation-type-card.import-card {
border: 2px solid #d1fae5;
background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.creation-type-card .card-body {
padding: 2rem 1.5rem;
}

/* Icon Circle */
.creation-type-card .icon-circle {
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem auto;
transition: transform 0.3s ease;
}

.creation-type-card.manual-card .icon-circle {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.creation-type-card.import-card .icon-circle {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.creation-type-card .icon-circle i {
font-size: 2rem;
}

.creation-type-card .card-title {
color: #1e293b;
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
}

.creation-type-card p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.5;
}

/* Button Styles */
.creation-type-card .btn {
border-radius: 8px;
padding: 0.6rem 1.5rem;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
}

.creation-type-card .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
}

.creation-type-card .btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #5568d3 0%, #6a4190 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.creation-type-card .btn-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: none;
}

.creation-type-card .btn-success:hover:not(:disabled) {
background: linear-gradient(135deg, #0ea472 0%, #047857 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.creation-type-card .btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Hover Effects */
.creation-type-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.creation-type-card.manual-card:hover {
border-color: #667eea !important;
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%) !important;
}

.creation-type-card.import-card:hover {
border-color: #10b981 !important;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
}

.creation-type-card:hover .icon-circle {
transform: scale(1.1) rotate(5deg);
}

/* Selected State */
.creation-type-card.manual-card.border-primary {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%) !important;
}

.creation-type-card.import-card.border-primary {
border-color: #10b981 !important;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%) !important;
}

/* Badge Animation */
@keyframes pulse {

0%,
100% {
opacity: 1;
}

50% {
opacity: 0.8;
}
}

.creation-type-card:hover .badge {
animation: pulse 2s infinite;
}

/* Modal Footer */
#createOrderModal .modal-footer {
border-radius: 0 0 15px 15px;
padding: 1.5rem 2rem;
}

#createOrderModal .modal-footer .btn {
border-radius: 10px;
}

/* Select2 Custom Styling */
#createOrderModal .select2-container--default .select2-selection--single {
border-radius: 10px !important;
border: 2px solid #e0e7ff !important;
height: auto !important;
padding: 0.5rem !important;
}

#createOrderModal .select2-container--default .select2-selection--single:focus {
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Alert Styling */
#createOrderModal .alert-warning {
border-radius: 10px;
border: 1px solid #fbbf24;
background-color: #fef3c7;
color: #92400e;
}

#createOrderModal .alert-warning i {
color: #f59e0b;
}

/* Responsive Design */
@media (max-width: 768px) {
#createOrderModal .modal-dialog {
margin: 0.5rem;
}

#createOrderModal .modal-header {
padding: 1.5rem;
}

#createOrderModal .modal-body {
padding: 1.5rem;
}

#createOrderModal .creation-type-card .icon-circle {
width: 60px;
height: 60px;
}

#createOrderModal .creation-type-card .icon-circle i {
font-size: 1.5rem;
}

#createOrderModal .creation-type-card .card-title {
font-size: 1.1rem;
}
}

/* ============================================
Order Create Page - Locked Merchant Styles
============================================ */

/* Locked Merchant Input */
.input-group .bg-light[readonly] {
background-color: #f8f9fa !important;
border-color: #e0e7ff;
font-weight: 500;
color: #1e293b;
}

.input-group-text.bg-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
border: none;
font-weight: 600;
}

/* Product Search Alert */
.alert-info.py-2 {
border-left: 4px solid #667eea;
background: linear-gradient(135deg, #f5f7ff 0%, #ffffff 100%);
border-color: #e0e7ff;
}

/* ============================================
Order Create - Product & Customer Search Styles
============================================ */

/* Product Search Styles */
.product-search-item {
cursor: pointer;
transition: background-color 0.2s;
}

.product-search-item:hover {
background-color: #f8f9fa !important;
}

.hover-bg-light:hover {
background-color: #f8f9fa;
}

#product-search-results {
max-height: 400px;
overflow-y: auto;
}

/* Customer Search Styles */
.customer-search-item {
cursor: pointer;
transition: background-color 0.2s;
}

.customer-search-item:hover {
background-color: #f8f9fa !important;
}

#customer-search-results {
max-height: 300px;
overflow-y: auto;
}

#selected-customer-display {
animation: fadeIn 0.3s ease-in;
}

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

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

/* Ensure validation messages are visible for Select2 */
.select2-container+.invalid-feedback {
/* display: block !important; */
margin-top: 0.25rem;
}

/* Style for invalid Select2 */
.select2-selection.is-invalid {
border-color: #dc3545 !important;
}

.dropdown .dropdown-menu {
background: #fff;
}

/* ========================================
Modern Dropdown Styles for Orders Table
======================================== */

/* Fix for dropdown overflow - ensure dropdown container can overflow */
.modern-dropdown {
position: static !important;
}

/* Modern Action Button */
.modern-action-btn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
}

.modern-action-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.modern-action-btn:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.modern-action-btn i {
font-size: 16px;
color: #6b7280;
transition: color 0.2s ease;
}

.modern-action-btn:hover i {
color: #374151;
}

/* Modern Dropdown Menu */
.modern-dropdown-menu {
min-width: 200px;
padding: 8px;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
margin-top: 8px;
animation: none;
position: absolute !important;
z-index: 1050;
max-height: none !important;
overflow: visible !important;
}

.modern-dropdown-menu.show {
animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

/* Modern Dropdown Items */
.modern-dropdown-menu .dropdown-item {
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #374151;
transition: all 0.15s ease;
display: flex;
align-items: center;
margin-bottom: 2px;
}

.modern-dropdown-menu .dropdown-item:last-child {
margin-bottom: 0;
}

.modern-dropdown-menu .dropdown-item i {
font-size: 16px;
width: 20px;
transition: transform 0.15s ease;
}

.modern-dropdown-menu .dropdown-item:hover {
background: #f3f4f6;
color: #111827;
transform: translateX(2px);
}

.modern-dropdown-menu .dropdown-item:active {
background: #e5e7eb;
transform: translateX(0);
}

/* Hover effect for icons */
.modern-dropdown-menu .dropdown-item:hover i {
transform: scale(1.1);
}

/* Text Success (Green) */
.modern-dropdown-menu .dropdown-item.text-success {
color: #059669;
}

.modern-dropdown-menu .dropdown-item.text-success:hover {
background: #d1fae5;
color: #047857;
}

.modern-dropdown-menu .dropdown-item.text-success i {
color: #10b981;
}

.modern-dropdown-menu .dropdown-item.text-success:hover i {
color: #047857;
}

/* Text Danger (Red) */
.modern-dropdown-menu .dropdown-item.text-danger {
color: #dc2626;
}

.modern-dropdown-menu .dropdown-item.text-danger:hover {
background: #fee2e2;
color: #b91c1c;
}

.modern-dropdown-menu .dropdown-item.text-danger i {
color: #ef4444;
}

.modern-dropdown-menu .dropdown-item.text-danger:hover i {
color: #b91c1c;
}

/* Dropdown Divider */
.modern-dropdown-menu .dropdown-divider {
margin: 8px 0;
border-top: 1px solid #e5e7eb;
opacity: 1;
}

/* Focus state */
.modern-dropdown-menu .dropdown-item:focus {
background: #f3f4f6;
color: #111827;
outline: none;
}

/* Active/Open state for button */
.modern-action-btn[aria-expanded="true"] {
background: #f3f4f6;
border-color: #d1d5db;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.modern-action-btn[aria-expanded="true"] i {
color: #2563eb;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.modern-dropdown-menu {
min-width: 180px;
}

.modern-dropdown-menu .dropdown-item {
padding: 8px 12px;
font-size: 13px;
}
}

/* Ensure table containers don't clip dropdown - orders table specific */
#table-container.table-responsive {
overflow-x: auto;
overflow-y: visible;
}

.recent-table.table-responsive {
overflow-x: auto;
overflow-y: visible;
}

/* Ensure table cells can show dropdown */
#orders-list-view tbody tr td:last-child {
overflow: visible !important;
}

/* For mobile - maintain horizontal scroll but allow vertical overflow */
@media (max-width: 991px) {

#table-container.table-responsive,
.recent-table.table-responsive {
overflow-x: auto;
overflow-y: visible;
}
}

.invalid-cell {
color: #dc3545 !important;
font-weight: 600;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}

.complete-line-btn:disabled {
background-color: #9f8f8f !important;
}

@media only screen and (max-width: 991.98px) {
.page-wrapper.compact-wrapper .page-header .header-wrapper .toggle-sidebar {
position: unset;
margin-right: 15px;
border-right: 1px solid #ddd;
padding-right: 15px;
display: block;
}
}

/* ============================================
Putaway Task Execute - Progress Bar Styles
============================================ */

/* Progress bar text inside the bar */
.progress-text {
font-size: 0.75rem;
font-weight: 600;
color: #fff;
line-height: 25px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Progress bar container */
.progress {
border-radius: 10px;
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Progress bar animation */
.progress-bar {
display: flex;
align-items: center;
justify-content: center;
transition: width 0.6s ease;
}

.currentBinName {
background-color: #717171;
padding: 0.4em 0.5em;
border-radius: 4px;
color: #fff;
display: inline-block;
}

/* Putaway Tasks Filter Alignment */
#putaway-tasks-filter-form .row {
display: flex;
align-items: center;
}

#putaway-tasks-filter-form .form-group {
margin-bottom: 0;
display: flex;
align-items: center;
height: 100%;
}

#putaway-tasks-filter-form .form-control,
#putaway-tasks-filter-form .form-select,
#putaway-tasks-filter-form .btn {
height: 38px;
}

/* Switch Bin Button Styles */
#switchBinBtn {
color: white !important;
font-weight: bold !important;
font-size: 16px !important;
background-color: #717171 !important;
}

.style-semibold:hover {
color: #f8f8f8 !important;
}
/* ===============================
BULK CREATE PUTAWAY VISUAL LAYOUT
================================ */
.zone-visual-layout-container { --zone-blocks-cols: 1; display: grid; gap: 1.25rem; align-items: flex-start; grid-template-columns: repeat(var(--zone-blocks-cols), 1fr); }
@media (min-width: 768px) { .zone-visual-layout-container { --zone-blocks-cols: var(--zone-blocks-cols-md, 2); } }
@media (min-width: 992px) { .zone-visual-layout-container { --zone-blocks-cols: var(--zone-blocks-cols-lg, 3); } }
.zone-visual-grid-block { min-width: 0; }
.zone-visual-grid-block h6 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; color: #1e293b; padding-bottom: 0.35rem; border-bottom: 2px solid #e2e8f0; }
.visual-grid { --visual-grid-cols: 1; display: grid; gap: 1rem; grid-template-columns: repeat(var(--visual-grid-cols), minmax(0, 1fr)); }
@media (min-width: 768px) { .visual-grid { --visual-grid-cols: 2; } }
@media (min-width: 992px) { .visual-grid { --visual-grid-cols: var(--visual-grid-cols-lg, 3); } }
.rack-column { min-width: 0; width: 100%; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border: 1.5px dashed #94a3b8; padding: 12px; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer; transition: all 0.2s; overflow: hidden; }
.rack-column:hover { border-color: #64748b; background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); }
.rack-column-title { margin-bottom: 8px; text-align: center; }
.rack-column-title small { font-weight: 600; color: #475569; font-size: 0.75rem; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.shelf-row { min-width: 0; background: #fff; border: 1px solid #e2e8f0; padding: 8px 10px; margin-top: 8px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: pointer; transition: all 0.2s; }
.shelf-row:hover { border-color: #94a3b8; box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.shelf-row:first-child { margin-top: 0; }
.shelf-label { font-size: 0.7rem; font-weight: 600; color: #64748b; display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.bin-container { display: grid; gap: 5px; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
.bin-box { width: 100%; height: 36px; min-width: 0; min-height: 36px; max-width: 100%; max-height: 36px; background: #eff6ff; border: 1px solid #93c5fd; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #1d4ed8; font-weight: 600; cursor: pointer; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.bin-box:hover { background: #dbeafe; border-color: #3b82f6; }
.bin-box.bin-box-selected { background: #2563eb; color: #fff; border-color: #1d4ed8; }
@media (max-width: 575.98px) {
    .zone-visual-layout .card-body { padding-left: 1rem; padding-right: 1rem; }
    .zone-visual-layout .d-flex.justify-content-end.gap-2.mb-2 { justify-content: stretch !important; flex-direction: column; }
    .zone-visual-layout .d-flex.justify-content-end.gap-2.mb-2 .btn { width: 100%; }
    .visual-grid { gap: 0.75rem; }
    .rack-column { padding: 10px; }
    .shelf-row { padding: 8px; }
    .bin-container { grid-template-columns: repeat(auto-fit, minmax(46px, 1fr)); }
    .bin-box { height: 34px; font-size: 0.75rem; }
}

/* ===== Filter row: align all filter fields (Search, Status, Reason, Merchant, Warehouse) on same baseline ===== */
.row.align-items-end > [class*="col-"],
.row.g-3.align-items-end > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 72px;
}
/* Keep form-control and form-select on the same baseline */
.row.align-items-end > [class*="col-"] > .form-control,
.row.g-3.align-items-end > [class*="col-"] > .form-control,
.row.align-items-end > [class*="col-"] > .form-select,
.row.g-3.align-items-end > [class*="col-"] > .form-select {
    flex-shrink: 0;
}
/* Select2 container: same line as other selects, same height */
.row.align-items-end > [class*="col-"] > .select2-container,
.row.g-3.align-items-end > [class*="col-"] > .select2-container {
    align-self: flex-end;
    flex-shrink: 0;
    height: 38px !important;
    min-height: 38px !important;
    width: 100%;
    margin-top: 0;
}
.row.align-items-end .select2-container .select2-selection.select2-selection--single,
.row.g-3.align-items-end .select2-container .select2-selection.select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-sizing: border-box;
}
.row.align-items-end .select2-container .select2-selection--single .select2-selection__rendered,
.row.g-3.align-items-end .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
}
.visual-grid .rack-column {
border-color: #736dff!important;
}
.order-slot-title {
font-weight: 600;
font-family: var(--bs-font-sans-serif);
}

.order-slot-pair {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.65rem;
background: var(--bs-light, #f8f9fa);
border: 1px solid var(--bs-border-color, #dee2e6);
border-radius: 0.375rem;
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
font-size: 0.95rem;
font-weight: 700;
white-space: nowrap;
}

.order-slot-order {
color: var(--bs-primary);
font-weight: 700;
}

.order-slot-arrow {
font-size: 1.15rem;
font-weight: 800;
color: var(--bs-primary);
line-height: 1;
}

.order-slot-bin {
font-weight: 700;
color: var(--bs-dark);
}

.order-slot-title {
font-weight: 700;
}

.sorting-task-details-table th,
.sorting-task-details-table td {
font-weight: 700;
}

.scope-option-card {
    transition: all 0.3s ease;
    position: relative;
    background-color: #FFFFFF;
    border: 2px solid #E5E7EB;
    cursor: pointer;
    user-select: none;
}

.scope-option-card:hover {
background-color: #F8F9FA !important;
border-color: #007bff !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.scope-option-card.selected,
.scope-option-card.selected:hover {
background-color: #007bff !important;
border-color: #007bff !important;
border-width: 2px !important;
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3) !important;
color: #FFFFFF !important;
}

.scope-option-card.selected .scope-icon {
background-color: #007bff !important;
}

.scope-option-card.selected .scope-icon i,
.scope-option-card.selected .scope-icon i.text-muted,
.scope-option-card.selected .scope-icon i[style*="color"] {
color: #FFFFFF !important;
}

.scope-option-card.selected h5,
.scope-option-card.selected h5 *,
.scope-option-card.selected h5.fw-bold {
color: #FFFFFF !important;
}

.scope-option-card.selected p,
.scope-option-card.selected p *,
.scope-option-card.selected p.text-muted,
.scope-option-card.selected p.small {
color: #FFFFFF !important;
}

.scope-option-card .scope-check-indicator {
display: none;
}

.scope-option-card.selected .scope-check-indicator,
.scope-option-card.selected .scope-check-indicator i {
display: block !important;
color: #FFFFFF !important;
}

.scope-option-card.selected .text-muted,
.scope-option-card.selected .text-muted *,
.scope-option-card.selected i.text-muted {
color: #FFFFFF !important;
}

.scope-option-card.selected * {
color: inherit;
}

.scope-option-card.selected .scope-icon i,
.scope-option-card.selected h5,
.scope-option-card.selected p {
color: #FFFFFF !important;
}

/* Inventory State Option Cards - Same styles as scope cards */
.inventory-state-option-card {
    transition: all 0.3s ease;
    position: relative;
    background-color: #FFFFFF;
    border: 2px solid #E5E7EB;
    cursor: pointer;
    user-select: none;
transition: all 0.3s ease;
position: relative;
background-color: #FFFFFF;
}

.inventory-state-option-card:hover {
background-color: #F8F9FA !important;
border-color: #007bff !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.inventory-state-option-card.selected,
.inventory-state-option-card.selected:hover {
background-color: #007bff !important;
border-color: #007bff !important;
border-width: 2px !important;
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3) !important;
color: #FFFFFF !important;
}

.inventory-state-option-card .state-check-indicator {
display: none;
}

.inventory-state-option-card.selected .state-check-indicator,
.inventory-state-option-card.selected .state-check-indicator i {
display: block !important;
color: #FFFFFF !important;
}

.inventory-state-option-card.selected .state-icon {
background-color: #007bff !important;
}

.inventory-state-option-card.selected .state-icon i,
.inventory-state-option-card.selected h5,
.inventory-state-option-card.selected p {
color: #FFFFFF !important;
}

.inventory-state-option-card.selected .text-muted,
.inventory-state-option-card.selected .text-muted *,
.inventory-state-option-card.selected i.text-muted {
color: #FFFFFF !important;
}

.cursor-pointer {
cursor: pointer;
}

#btn-next-stage1:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#btn-next-stage1:not(:disabled) {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

/* Cycle Counts Styles */
#stage-badge {
    background-color: #E8E5FF !important;
    color: #6C63FF !important;
    font-weight: 500 !important;
}

#scope-summary {
    background-color: #E3F2FD !important;
    color: #1976D2 !important;
    font-weight: 500 !important;
}

#scope-error,
#inventory-state-error {
    display: none;
}

.scope-check-indicator,
.state-check-indicator {
    top: 12px;
    right: 12px;
    display: none;
}

.scope-check-indicator i,
.state-check-indicator i {
    font-size: 24px;
}

.scope-icon,
.state-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.scope-icon i,
.state-icon i {
    font-size: 32px;
}

.scope-icon {
    background-color: transparent;
}

.scope-icon.bg-light {
    background-color: #F5F5F5;
}

.state-icon.bg-primary {
    background-color: #E3F2FD;
}

.state-icon.bg-success {
    background-color: #E8F5E9;
}

.state-icon.bg-danger {
    background-color: #FFEBEE;
}

/* ============================================
   Cycle Count Creation - Stage Visibility
   ============================================ */

/* Stage Content - Hidden by default (highest specificity) */
.card-body .stage-content,
.stage-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Stage Content - Visible when active (highest specificity) */
.card-body .stage-content.active,
.stage-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: inherit !important;
    margin: inherit !important;
}

/* Specific stage visibility rules with highest specificity */
.card-body #stage-scope.stage-content.active,
.card-body #stage-config.stage-content.active,
.card-body #stage-inventory-state.stage-content.active,
#stage-scope.stage-content.active,
#stage-config.stage-content.active,
#stage-inventory-state.stage-content.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: inherit !important;
    margin: inherit !important;
}

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

#product-search-results,
#merchant-search-results {
    display: none;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

#merchant-search-results {
    max-height: 300px;
    top: 100%;
}

.product-search-item {
    transition: background-color 0.2s ease;
}

.product-search-item:hover {
    background-color: #F3F4F6;
}

.product-search-item.cursor-pointer {
    cursor: pointer;
}

#products-error,
#merchants-error,
#zone-error,
#bins-error,
#scope-error,
#inventory-state-error {
    display: none;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

#products-error.d-block,
#merchants-error.d-block,
#zone-error.d-block,
#bins-error.d-block {
    display: block !important;
}

.form-control.is-invalid,
.form-select.is-invalid,
#zone-select.is-invalid {
    border-color: #DC3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6 .4.4 .4-.4'/%3e%3cpath d='m6 6v2.5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.product-search-item[style*="pointer-events: none"] {
    pointer-events: none;
}

.btn-close-white {
    font-size: 0.7em;
}

/* Step 2 & 3 visibility controlled by .cycle-count-step-hidden / .cycle-count-step-visible (see Cycle Count Step Containers below) */

/* Product selection display styles */
.product-line-row {
    transition: all 0.2s ease;
}

.product-line-row:hover {
    background-color: #F9FAFB;
}

.remove-product-btn {
    transition: all 0.2s ease;
}

.remove-product-btn:hover {
    transform: scale(1.05);
}

/* Scope config sections */
.scope-config {
    transition: opacity 0.3s ease;
}

.scope-config.d-none {
    display: none !important;
}

/* Selected products/merchants display */
#selected-products-container,
#selected-merchants-tags {
    min-height: 50px;
}

.badge.bg-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* Form buttons styling */
#btn-create,
#btn-next-stage1,
#btn-next-stage2,
#btn-create-stage3,
#btn-back,
#btn-back-stage3 {
    min-width: 120px;
    transition: all 0.2s ease;
}

#btn-create:hover:not(:disabled),
#btn-next-stage1:hover:not(:disabled),
#btn-next-stage2:hover:not(:disabled),
#btn-create-stage3:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scope-option-card,
    .inventory-state-option-card {
        margin-bottom: 1rem;
    }
    
    #stage-badge,
    #scope-summary {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    .card-header h5 {
        font-size: 1rem;
    }
}

/* Loading states */
.btn.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

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

/* ============================================
   Cycle Count Styles - Loading States
   ============================================ */
.cycle-count-items-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cycle-count-items-ready {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

/* ============================================
   Cycle Count Styles - Stage Visibility
   ============================================ */
.cycle-count-stage-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.cycle-count-stage-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}


/* ============================================
   Cycle Count Styles - Scope Cards
   ============================================ */
.cycle-count-scope-card {
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease;
}

.cycle-count-scope-card-hover {
    transform: translateY(-2px);
}

.cycle-count-scope-card-normal {
    transform: translateY(0);
}

/* ============================================
   Cycle Count Styles - Button States
   ============================================ */
.cycle-count-button-enabled {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
}

.cycle-count-button-disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Cycle Count Styles - Step Containers
   ============================================ */
.cycle-count-step-hidden {
    display: none;
}

.cycle-count-step-visible {
    display: block;
}

/* Force all execute-step cards to use the same primary color (override theme/wizard styles) */
.cycle-count-execute-step-card {
    border-color: var(--bs-primary, #0d6efd) !important;
}
.cycle-count-execute-step-card .card-header {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}
.cycle-count-execute-step-card .card-header,
.cycle-count-execute-step-card .card-header h6,
.cycle-count-execute-step-card .card-header i,
.cycle-count-execute-step-card .card-header * {
    color: #fff !important;
}
.cycle-count-execute-step-card .btn-primary {
    background-color: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
}

/* ============================================
   Cycle Count Styles - Error Messages
   ============================================ */
.cycle-count-error-visible {
    display: block !important;
}

.cycle-count-error-hidden {
    display: none !important;
}

/* ============================================
   Cycle Count Styles - Scope Summary
   ============================================ */
.cycle-count-scope-summary-visible {
    display: inline;
}

.cycle-count-scope-summary-hidden {
    display: none;
}

/* ============================================
   Cycle Count Styles - Validation Error List
   ============================================ */
.cycle-count-validation-error-list {
    text-align: left;
    margin-top: 10px;
}

.cycle-count-validation-error-item {
    margin-bottom: 8px;
}

/* ============================================
   Cycle Count Styles - Product Search Item
   ============================================ */
.cycle-count-product-search-item-disabled {
    pointer-events: none;
}

/* ============================================
   Cycle Count Styles - Photo Sizes
   ============================================ */
.cycle-count-photo-cover {
    object-fit: cover;
}

.cycle-count-photo-size-40 {
    width: 40px;
    height: 40px;
}

.cycle-count-photo-size-50 {
    width: 50px;
    height: 50px;
}

/* ============================================
   Cycle Count Styles - Close Button
   ============================================ */
.cycle-count-close-btn-small {
    font-size: 0.7em;
opacity: 0.5;
cursor: not-allowed;
}
:root {
    --packing-ink: #132239;
    --packing-accent: #ff7a59;
    --packing-glow: #ffd9cf;
    --packing-bg: #f6f4f0;
    --packing-card: #ffffff;
    --packing-line: #e8e1d8;
}

.packing-shell {
    background: radial-gradient(circle at top left, #fff7f3 0%, #f6f4f0 55%, #f0f2f6 100%);
}

.packing-hero {
    border: 1px solid var(--packing-line);
    background: linear-gradient(120deg, #ffffff 0%, #fef2eb 100%);
    box-shadow: 0 14px 40px rgba(19, 34, 57, 0.08);
}

.packing-code {
    font-family: "Rubik", "Roboto", sans-serif;
    font-weight: 600;
    color: var(--packing-ink);
}

.packing-list-card,
.packing-order-card,
.packing-placeholder {
    border: 1px solid var(--packing-line);
    box-shadow: 0 10px 30px rgba(19, 34, 57, 0.06);
}

.packing-spotlight {
    background: linear-gradient(135deg, #ffffff 0%, #fff1ea 100%);
    border-radius: 18px;
    padding: 32px;
    border: 1px solid #ffe2d8;
}

.packing-scan .input-group-text {
    background: var(--packing-ink);
    color: #fff;
    border: none;
}

.packing-scan .form-control {
    border: 1px solid var(--packing-line);
    border-right: none;
    box-shadow: none;
}

.packing-scan .btn {
    background: var(--packing-accent);
    border: none;
}

.packing-table thead {
    background: var(--packing-ink);
    color: #fff;
}

.packing-table tbody tr {
    border-bottom: 1px solid var(--packing-line);
}

.packing-barcodes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.packing-barcode-pill {
    background: var(--packing-glow);
    color: var(--packing-ink);
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px dashed #ffb8a6;
}

.packing-status {
    font-weight: 600;
    color: var(--packing-ink);
}

@media (max-width: 991px) {
    .packing-spotlight {
        padding: 20px;
    }
}

.packing-table thead th {
    color: #ffffff !important;
    font-weight: 700;
}

.packing-items-scroll {
    max-height: 600px;
    overflow: auto;
}

    .checklist-items .form-check {
        padding: 10px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    .checklist-items .form-check:hover {
        background-color: #f8f9fa;
    }

    .checklist-items .form-check.border-danger {
        border: 2px solid #dc3545 !important;
        background-color: #fff5f5;
    }

    .checklist-items .form-check.border-success {
        border: 2px solid #28a745 !important;
        background-color: #f0fff4;
    }

    .checklist-items .form-check-input:checked {
        background-color: #28a745;
        border-color: #28a745;
    }

    .checklist-items .form-check-input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Billing Setup Wizard */
.billing-setup-page .billing-meta-box {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.billing-setup-page .billing-meta-box span {
  font-size: 12px;
  color: #7f7f7f;
}

.billing-setup-page .billing-meta-box strong {
  font-size: 14px;
  color: #2c2c2c;
  word-break: break-word;
}

.billing-setup-page .billing-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.billing-setup-page .billing-stepper li {
  border: 1px solid #ececec;
  border-radius: 8px;
}

.billing-setup-page .billing-stepper li.is-active {
  border-color: #7366ff;
  background: rgba(115, 102, 255, 0.08);
}

.billing-setup-page .billing-stepper .step-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 10px 12px;
  font-weight: 500;
  color: #2c2c2c;
  display: flex;
  align-items: center;
  gap: 8px;
}

.billing-setup-page .billing-stepper .step-button span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ececec;
  font-size: 12px;
}

.billing-setup-page .billing-stepper li.is-active .step-button span {
  background: #7366ff;
  color: #fff;
}

.billing-setup-page .step-panel {
  display: none;
}

.billing-setup-page .step-panel.is-active {
  display: block;
}

.billing-setup-page .wizard-card-block {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 16px;
}

.billing-setup-page .wizard-card-block:last-child {
  margin-bottom: 0;
}

.billing-setup-page .wizard-subsection + .wizard-subsection {
  margin-top: 20px;
  padding-top: 20px;
    border-top: 1px solid #999999;
}

.billing-setup-page .shipping-tabs-nav {
  display: inline-flex;
  gap: 8px;
}

.billing-setup-page .shipping-tab-panel {
  display: none;
}

.billing-setup-page .shipping-tab-panel.is-active {
  display: block;
}

.billing-setup-page .switch-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.billing-setup-page .switch-control input {
  display: none;
}

.billing-setup-page .switch-slider {
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: #adb5bd;
  position: relative;
  transition: all .2s ease;
}

.billing-setup-page .switch-slider::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all .2s ease;
}

.billing-setup-page .switch-control input:checked + .switch-slider {
  background: #7366ff;
}

.billing-setup-page .switch-control input:checked + .switch-slider::after {
  left: 18px;
}

.billing-setup-page .cod-fee-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.billing-setup-page .cod-fee-option {
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.billing-setup-page .cod-fee-option.is-selected {
  border-color: #7366ff;
  background: rgba(115, 102, 255, 0.08);
}

.billing-setup-page .conditions-table th,
.billing-setup-page .conditions-table td,
.billing-setup-page .addons-table th,
.billing-setup-page .addons-table td {
  vertical-align: middle;
}

.billing-setup-page .conditions-table td input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.billing-setup-page .wizard-card-block .recent-table {
  margin-bottom: 0;
}

.billing-setup-page .is-hidden {
  display: none;
}
/* ========== Finance Analytics ========== */
.finance-hero {
    background: linear-gradient(135deg, #2499ef 0%, #1a7bc9 100%);
    border-radius: 0.5rem;
    color: #fff;
}

.ecommerce-hero {
    background: linear-gradient(135deg, #2499ef 0%, #1a7bc9 100%);
    border-radius: 0.5rem;
    color: #fff;
}

/* Sales Performance Overview */
.sales-performance-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}
.sales-performance-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sales-perf-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}
.sales-perf-icon-green { background: #10b981; }
.sales-perf-icon-orange { background: #f59e0b; }
.sales-perf-icon-purple { background: #8b5cf6; }
.sales-perf-icon-pink { background: #ec4899; }
.sales-perf-icon-teal { background: #14b8a6; }
.sales-perf-icon-yellow { background: #eab308; }
.sales-perf-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}
.sales-perf-trend {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
}
.sales-perf-trend.trend-up {
    color: #16a34a;
}
.sales-perf-trend.trend-down {
    color: #ec4899;
}

/* Overall Sales Performance Snapshot (4 cards with prev pill) */
.snapshot-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}
.snapshot-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.snapshot-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
}
.snapshot-icon-purple {
    border-radius: 0.5rem;
}
.snapshot-icon-green { background: #10b981; }
.snapshot-icon-blue { background: #3b82f6; }
.snapshot-icon-orange { background: #f59e0b; }
.snapshot-icon-purple { background: #8b5cf6; }
.snapshot-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.35rem;
}
.snapshot-prev {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
}
.snapshot-trend {
    font-size: 0.8rem;
    font-weight: 600;
}
.snapshot-trend.trend-up {
    color: #16a34a;
}
.snapshot-trend.trend-down {
    color: #dc2626;
}
.finance-hero .revenue-value {
    font-size: 1.75rem;
    font-weight: 700;
}
.finance-hero .orders-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2499ef;
}
.finance-status-card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: box-shadow .2s;
}
.finance-status-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.finance-status-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.finance-trend-up {
    color: #16a34a;
}
.finance-trend-down {
    color: #dc2626;
}
.oldest-order-date {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #111827;
}
.bg-danger-subtle {
    background-color: rgba(220, 38, 38, 0.12);
}
.bg-danger-subtle.text-danger {
    color: #dc2626 !important;
}
#finance-daily-status-table .daily-status-cell {
    white-space: nowrap;
}
#finance-daily-status-table .daily-status-cell div:first-child {
    font-weight: 500;
}

/* ========== City Analytics ========== */
.city-card .city-card-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
}
.city-card .city-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}
.city-card .city-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.city-card .city-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}
.city-card .city-amount {
    font-size: 1.125rem;
    font-weight: 700;
}
.city-card .city-amount-unit {
    font-size: 0.75rem;
    font-weight: 500;
}
.city-card .city-metrics {
    font-size: 0.875rem;
}
.city-card .city-metrics-label {
    color: #4b5563;
}
.city-card .city-metrics-value {
    font-weight: 500;
}
.city-card .city-metrics-value .city-unit {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
}
.city-card .city-section-title {
    font-size: 0.875rem;
    font-weight: 500;
}
.city-card .city-section-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.city-card .city-section-amount {
    font-size: 1.125rem;
    font-weight: 700;
}
#city-cards-container .city-card {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

/* Billing: clickable rejected status button */
.billing-rejected-history-trigger {
    padding: 0.4rem 0.8rem;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #b42318;
    background: #fff1f0;
    border: 1px solid #fecdd3;
    box-shadow: none;
    transition: all 0.16s ease-in-out;
}

.billing-rejected-history-trigger:hover,
.billing-rejected-history-trigger:focus {
    color: #912018;
    background: #ffe4e6;
    border-color: #fda4af;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(185, 28, 28, 0.12);
}

/* ======================================================
   SALES BREAKDOWN BY PERIOD (E-COMMERCE DASHBOARD)
====================================================== */

.sales-breakdown-by-period .sales-breakdown-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.sales-breakdown-by-period .sales-breakdown-card .card-body {
    padding: 22px 24px;
}

/* Icon: circular, white icon inside */
.sales-breakdown-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.sales-breakdown-icon-yellow {
    background: #f5b042;
}

.sales-breakdown-icon-blue {
    background: #4e73df;
}

.sales-breakdown-icon-green {
    background: #1cc88a;
}

.sales-breakdown-icon-purple {
    background: #6f42c1;
}

/* Title next to icon: dark, medium weight */
.sales-breakdown-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #2d3748;
}

/* Amount: large bold */
.sales-breakdown-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.3;
}

/* EGP: slightly smaller than amount */
.sales-breakdown-currency {
    font-size: 1rem;
    font-weight: 500;
    color: #2d3748;
}

/* Orders: light grey pill badge, darker grey text */
.sales-breakdown-orders {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    color: black !important;
    background: #f1f3f5;
    border: 1px solid #e2e8f0;
    padding: 5px 12px;
    border-radius: 999px;
}

/* WMS inbound receipt line items: give Product / Barcodes room; SKU stays one line */
.inbound-receipt-lines-table .inbound-receipt-line-col-product {
    min-width: 280px;
    width: 26%;
}

.inbound-receipt-lines-table .inbound-receipt-line-col-barcodes {
    min-width: 220px;
    width: 20%;
}

.inbound-receipt-lines-table .inbound-receipt-line-product-name {
    word-break: break-word;
}

.inbound-receipt-lines-table .inbound-receipt-line-sku {
    white-space: nowrap;
}
/* Stock moves: SKU search dropdown sizing */
#create_sku_results {
    max-height: 420px;
    overflow: hidden;
}

#create_sku_results_list {
    /* JS will shrink this further to fit viewport */
    max-height: calc(420px - 54px);
    overflow-y: auto !important;
}

/* Global responsive tables */
.global-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.global-table-responsive > .table {
    min-width: 100%;
    margin-bottom: 0;
}

/* Cart preview responsiveness */
.cart-preview-grid {
    min-width: 0;
}

.cart-preview-grid .cart-preview-station {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 22px;
}

.cart-preview-grid .cart-preview-title {
    text-align: center;
    word-break: break-word;
}

.cart-preview-grid .cart-preview-shelf {
    overflow: hidden;
}

.cart-preview-grid .cart-preview-bin-container {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)) !important;
}

.cart-preview-grid .cart-preview-bin {
    min-width: 0;
    width: 100%;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
    .cart-preview-grid .cart-preview-station {
        padding: 14px;
        border-radius: 14px;
    }

    .cart-preview-grid .cart-preview-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    .cart-preview-grid .cart-preview-shelf {
        padding: 10px;
        margin-bottom: 10px;
    }

    .cart-preview-grid .cart-preview-shelf-label {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .cart-preview-grid .cart-preview-bin-container {
        gap: 6px;
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)) !important;
    }

    .cart-preview-grid .cart-preview-bin {
        height: 32px;
        font-size: 10px;
        border-radius: 5px;
    }
}

@media (max-width: 500px) {
    .visual-grid.cart-preview-grid {
        width: 90%;
        margin: 0 auto;
    }
}

/* -------------------------------------------------------------------------
   Welcome toast (post-login) — theme gradient, light text on blue
   ------------------------------------------------------------------------- */
.welcome-toast-notify.alert-success {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #2499ef 0%, #1a7bc9 100%) !important;
}

.welcome-toast-notify {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 12px !important;
    border-inline-start: 3px solid rgba(255, 255, 255, 0.45) !important;
    padding: 0 !important;
    overflow: hidden;
    max-width: min(420px, calc(100vw - 32px));
    background: linear-gradient(135deg, #2499ef 0%, #1a7bc9 100%) !important;
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.12),
        0 14px 32px -6px rgba(26, 123, 201, 0.55) !important;
    color: #ffffff !important;
    font-family: "Rubik", "Roboto", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.welcome-toast-notify .welcome-toast-notify__body {
    padding-block: 18px 16px;
    padding-inline: 20px 44px;
}

.welcome-toast-notify .welcome-toast-notify__title:empty {
    display: none;
}

.welcome-toast-notify .welcome-toast-notify__message {
    display: block;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.96) !important;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.welcome-toast-notify .welcome-toast-notify__close {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
    text-shadow: none;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1;
    top: 10px !important;
    right: 12px !important;
    z-index: 2;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.welcome-toast-notify .welcome-toast-notify__close:hover,
.welcome-toast-notify .welcome-toast-notify__close:focus {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.22);
    opacity: 1;
}

.welcome-toast-notify .welcome-toast-notify__progress {
    height: 3px;
    margin: 0;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.18) !important;
}

.welcome-toast-notify .welcome-toast-notify__progress-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none;
    transition: width 32ms linear;
    will-change: width;
}

.welcome-toast-notify [data-notify="url"] {
    display: none !important;
}