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

/* Navbar "Report" trigger — deliberately its own class, not .mode (see
partials/feedback-widget-trigger.blade.php for why), sized/colored to match
the other icon buttons (fullscreen, notification bell) beside it. */
.cf-feedback-trigger {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: rgba(64, 64, 64, 0.9);
}
.cf-feedback-trigger:hover {
color: var(--theme-default, #7366ff);
}
body.dark-only .cf-feedback-trigger {
color: rgba(255, 255, 255, 0.8);
}

.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;
}

.form-control {
border-color: #6c757d;
}

.form-control:focus {
border-color: #495057;
box-shadow: 0 0 0 0.2rem rgba(73, 80, 87, 0.25);
}

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

/* Both brand marks share ONE fixed box, so the collapsed rail never reflows when
   the brand changes. dayra's sm-logo is 173x195 (0.89 aspect); the SurgeFlo icon
   is 466x393 (1.19) — left to size itself the wider mark grows .logo-icon-wrapper
   past the hardcoded 80px margin-left this file pins on .page-body further down,
   and it would grow it ONLY for analysis users. 40x45 is exactly what width="40"
   on the 0.89-aspect sm-logo already occupied, so this is a no-op for dayra and a
   centred letterbox for SurgeFlo. Raising the width means raising those four 80px
   values too — one without the other is the overlap bug. */
.logo-icon-wrapper img.sidebar-logo-icon,
.sidebar-links > li.back-btn img.sidebar-logo-icon {
width: 40px;
height: 45px;
object-fit: contain;
object-position: center;
}

/* The logo panel is hardcoded white further down, on BOTH themes — which is fine
   for dayra's dark-green wordmark and fatal for SurgeFlo's light-ink one, which
   would be white on white. Match the dark sidebar (#262932, measured) so the
   panel disappears into it. Scoped to .brand-surgeflo because dayra has no
   light-ink variant: darkening its panel would break the mark that works today. */
body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper.brand-surgeflo,
body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-icon-wrapper.brand-surgeflo {
background: #262932;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
align-items: center;
background: #ffffff;
display: flex;
min-height: 86px;
margin-bottom: 10px;
padding: 13px 35px;
/* The mark sat too far in from the rail. Logical, not padding-left, so the
   Arabic panel moves it in from ITS start edge instead of the wrong one — the
   shorthand above is physical and would pin the RTL logo to the far side. */
padding-inline-start: 22px;
position: sticky;
top: 0;
z-index: 20;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button {
align-items: center;
background: #ffffff;
border: 1px solid rgba(35, 77, 68, 0.14);
border-radius: 12px;
box-shadow: 0 8px 18px rgba(35, 77, 68, 0.12);
cursor: pointer;
display: inline-flex;
height: 36px;
justify-content: center;
padding: 0;
position: absolute;
right: 18px;
top: 22px;
width: 36px;
z-index: 2;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-lines {
display: flex;
flex-direction: column;
gap: 4px;
width: 18px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-lines span {
background: #234d44;
border-radius: 999px;
display: block;
height: 2px;
width: 100%;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-lines span:nth-child(2) {
width: 14px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button:hover,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button:focus {
border-color: rgba(35, 77, 68, 0.32);
box-shadow: 0 10px 22px rgba(35, 77, 68, 0.18);
outline: none;
}

/* The collapse button is a white chip with dark-green bars — built for the white
   logo panel it used to sit on. On the SurgeFlo dark panel it read as a bright
   slab punched out of the sidebar. Same shape, inverted surface. Scoped like the
   panel itself: dayra's panel is still white, so its button must stay white too. */
body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper.brand-surgeflo .sidebar-toggle-button {
background: #323746;
border-color: rgba(255, 255, 255, 0.16);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper.brand-surgeflo .sidebar-toggle-lines span {
background: rgba(255, 255, 255, 0.85);
}

body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper.brand-surgeflo .sidebar-toggle-button:hover,
body.dark-only .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper.brand-surgeflo .sidebar-toggle-button:focus {
border-color: rgba(255, 255, 255, 0.34);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button {
left: 18px;
right: auto;
}

@media (max-width: 575.98px) {
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
min-height: 94px;
margin-bottom: 12px;
padding: 16px 54px 16px 28px;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button {
height: 42px;
right: 14px;
top: 22px;
width: 42px;
}

html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper {
padding: 13px 28px 13px 54px;
}

html[dir="rtl"] .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .logo-wrapper .sidebar-toggle-button {
left: 14px;
right: auto;
}
}

/* ===============================
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, globally ─────────────────────────────────────────────────────
   Every native <select> is enhanced by the auto-enhancer in
   layouts/custom_script.blade.php, so these rules are what make an enhanced
   select sit on the page like the native one it replaced. This set was arrived
   at by fixing each break in turn. */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    /* A native <select> shows its empty first <option> in the normal text
       colour, not a muted one, so an enhanced select does the same. */
    color: #000 !important;
}

/* The box itself, declaration for declaration the same as Bootstrap
   .form-select: same border token, same radius, same metrics. It used to carry
   its own #6c757d border and 0.25rem radius, which read as a heavier, squarer
   control than the .form-control sitting next to it in the same row. */
.select2-container .select2-selection--single {
    /* The vendor leaves this element unpositioned, so the absolutely positioned
       arrow anchors to .select2-container instead -- a box that is a few pixels
       taller (inline-block + vertical-align) -- and the arrow lands below the
       middle of what the user sees. Position it here and the arrow centres. */
    position: relative;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    /* line-height 1.5em + padding .75rem + 2px border: .form-select's height. */
    height: calc(1.5em + 0.75rem + 2px) !important;
    padding: 0.375rem 0.75rem;
    /* Logical, so the arrow's gutter moves to the left in the Arabic panel. */
    padding-inline-end: 2.25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width, 1px) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    transition: border-color 0.15s ease-in-out;
}

/* .form-control:focus / .form-select:focus in style.css: theme colour, no glow.
   select2 marks the wrapper, not the selection, hence the two wrapper classes. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--theme-default);
    box-shadow: none;
    outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--bs-secondary-bg, #e9ecef);
}

/* The vendor pads this child (8px / 20px) and sets line-height 28px, both of
   which fight the padding and centring on the parent. Zero them and let it be
   the flex item that ellipsises -- min-width:0 is what allows it to shrink. */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    line-height: 1.5;
    color: inherit;
}

/* Bootstrap's own chevron rather than select2's CSS triangle, so an enhanced
   select and a native one are indistinguishable. Stretching top-to-bottom and
   centring the image is what keeps it on the mid-line at any height. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0.75rem;
    height: auto;
    width: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 12px;
    pointer-events: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* Multi-selects (tags, product options) share the border and radius so a form
   holding both kinds of select still reads as one set of controls. */
.select2-container--default .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.125rem 0.375rem;
    border: var(--bs-border-width, 1px) solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    background-color: var(--bs-body-bg);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--theme-default) !important;
}

/* The panel hanging off the control, matched to the control's border. */
.select2-dropdown {
    border-color: var(--bs-border-color);
}

/* 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;
}

/* Validation: select2 hides the real <select>, so Bootstrap's .is-invalid on it
   is invisible and the .invalid-feedback sibling no longer follows a visible
   control. These two put the red border back on what the user can actually see. */
.select2-container + .invalid-feedback {
    margin-top: 0.25rem;
}

.select2-selection.is-invalid {
    border: var(--bs-border-width, 1px) solid #dc3545 !important;
}

/* ── Program settings modal: clearer, evenly-spaced underline tabs ─────────── */
.program-settings-tabs {
    border-bottom: 2px solid #eef0f4;
    gap: 2px;
}
.program-settings-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    padding: 0.65rem 0.5rem;
    color: #7b8190;
    font-weight: 600;
    background: transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.program-settings-tabs .nav-link i {
    margin-inline-end: 6px;
    opacity: .85;
}
.program-settings-tabs .nav-link:hover {
    color: var(--theme-default, #7366ff);
    border-bottom-color: rgba(115, 102, 255, .35);
}
.program-settings-tabs .nav-link.active {
    color: var(--theme-default, #7366ff);
    background: rgba(115, 102, 255, .06);
    border-bottom-color: var(--theme-default, #7366ff);
}

/* ── Select2 inside a Bootstrap .input-group ───────────────────────────────
   A native <select> is a flex child of .input-group; Select2 replaces it with
   .select2-container, which defaults to inline-block and drops out of the flex
   row (wrapping below the addon). Restore it as a proper flex item and flatten
   the radius on the side that meets the addon (logical props → works in RTL). */
.input-group > .select2-container {
    flex: 1 1 auto;
    width: 1% !important;
}
.input-group > .select2-container .select2-selection--single {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* Birthday card: read as ONE clean block like the recruit card beside it.
   Bootstrap gives .card-header/.card-footer a grey cap background + divider
   border (var(--bs-card-cap-bg)); strip both so the sections don't look banded. */
[data-testid="birthday-card"] .card-header,
[data-testid="birthday-card"] .card-footer {
    background-color: transparent !important;
    border: 0 !important;
}

/* Birthday card, show-more toggle: a <details> per column, so the label has to
   swap itself on open (no JS on this page) and the native marker has to go. */
.ap-birthday-more > summary {
    list-style: none;
    cursor: pointer;
}
.ap-birthday-more > summary::-webkit-details-marker {
    display: none;
}
.ap-birthday-more > summary .ap-birthday-less {
    display: none;
}
.ap-birthday-more[open] > summary .ap-birthday-less {
    display: inline;
}
.ap-birthday-more[open] > summary .ap-birthday-expand {
    display: none;
}

.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;
}
}

/* Mobile sidebar scrolling fix */
@media (max-width: 1199px) {
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper {
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main {
height: calc(100vh - 95px);
height: calc(100dvh - 95px);
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links {
height: calc(100vh - 115px);
height: calc(100dvh - 115px);
max-height: calc(100vh - 115px);
max-height: calc(100dvh - 115px);
margin-bottom: 0;
padding-bottom: 24px;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-mask,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-offset,
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content-wrapper {
height: 100%;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content-wrapper {
overflow-y: auto !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}

.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-content {
padding-bottom: 24px;
}
}

/* ============================================
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;
}

/* ============================================
Dark Mode Overrides — Detail cards, Status History, Empty States.
These components use hardcoded light gradients/pastels (designed before
dark mode existed on these pages), so body.dark-only alone doesn't touch
them — they need explicit overrides or they stay bright/white on a dark page.
============================================ */
body.dark-only .form-label-detail,
body.dark-only .status-change-label,
body.dark-only .summary-label {
color: rgba(255, 255, 255, 0.55);
}

body.dark-only .detail-field-card,
body.dark-only .profile-info-field {
background: #262932;
border-color: rgba(255, 255, 255, 0.08);
}

body.dark-only .detail-value,
body.dark-only .profile-info-field {
color: rgba(255, 255, 255, 0.85);
}

body.dark-only .status-history-header-title {
color: rgba(255, 255, 255, 0.9);
}

body.dark-only .status-history-content {
background: linear-gradient(135deg, #262932 0%, #201f2b 100%);
border-color: rgba(139, 92, 246, 0.35);
}

body.dark-only .status-history-content:hover {
border-color: rgba(139, 92, 246, 0.55);
}

body.dark-only .status-history-line {
background: linear-gradient(to bottom, rgba(139, 92, 246, 0.4) 0%, rgba(139, 92, 246, 0.1) 100%);
}

body.dark-only .status-history-user {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.6);
}

body.dark-only .status-history-user strong {
color: rgba(255, 255, 255, 0.9);
}

body.dark-only .status-history-note {
background: rgba(255, 255, 255, 0.06);
}

body.dark-only .status-history-note-content {
color: rgba(255, 255, 255, 0.75);
}

body.dark-only .status-badge-old {
background-color: rgba(153, 27, 27, 0.35);
color: #fca5a5;
}

body.dark-only .status-badge-new {
background-color: rgba(6, 95, 70, 0.35);
color: #6ee7b7;
}

body.dark-only .status-badge-sub-old {
background-color: rgba(146, 64, 14, 0.35);
color: #fcd34d;
}

body.dark-only .status-badge-sub-new {
background-color: rgba(30, 64, 175, 0.35);
color: #93c5fd;
}

body.dark-only .status-history-summary {
border-top-color: rgba(139, 92, 246, 0.3);
}

body.dark-only .summary-card {
background: linear-gradient(135deg, #262932 0%, #201f2b 100%);
border-color: rgba(139, 92, 246, 0.3);
}

body.dark-only .summary-value {
color: rgba(255, 255, 255, 0.9);
}

body.dark-only .status-history-empty-icon,
body.dark-only .activity-empty-icon {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
}

body.dark-only .status-history-empty-title,
body.dark-only .activity-empty-title {
color: rgba(255, 255, 255, 0.85);
}

body.dark-only .status-history-empty-text,
body.dark-only .activity-empty-text {
color: rgba(255, 255, 255, 0.5);
}

/* 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.
   Descendant combinator (not direct child) so it also matches selects wrapped in .form-group. */
.row.align-items-end .select2-container,
.row.g-3.align-items-end .select2-container {
    align-self: flex-end;
    flex-shrink: 0;
    height: calc(1.5em + 0.75rem + 2px) !important;
    min-height: calc(1.5em + 0.75rem + 2px) !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: calc(1.5em + 0.75rem + 2px) !important;
    min-height: calc(1.5em + 0.75rem + 2px) !important;
    display: flex !important;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-sizing: border-box;
}
/* line-height 1 clipped descenders: the rendered span is overflow:hidden, so a
   line box the size of the font cut the tail off "Any", "Any flag", "Sort by".
   The selection is a centring flex box, so it never needed the tight line. */
.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.5;
    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;
}

/* ==========================================================================
   ASN shipment product search — multi-select toolbar & checkboxes
   ========================================================================== */
.product-search-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.product-search-toolbar__select-all {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: #2b2b2b;
}

/* Make the product selection checkboxes clearly visible (clear border,
   larger hit area, and a solid brand color when checked). */
.product-search-item .product-select-checkbox,
#product-select-all {
    width: 18px;
    height: 18px;
    border: 2px solid #7366ff;
    cursor: pointer;
    opacity: 1;
    flex-shrink: 0;
}

.product-search-item .product-select-checkbox:checked,
#product-select-all:checked {
    background-color: #7366ff;
    border-color: #7366ff;
}

.product-search-item .product-select-checkbox:focus,
#product-select-all:focus {
    box-shadow: 0 0 0 0.2rem rgba(115, 102, 255, .25);
}

/* =====================================================================
   Portal request badge pill (moved out of portal_requests/_badge.blade.php)
   ===================================================================== */
.pr-badge { display: inline-flex; align-items: center; gap: .42em; padding: .3em .72em; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
.pr-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pr-badge--neutral { color: #475569; background: #f1f5f9; border-color: #e2e8f0; }
.pr-badge--info { color: #0369a1; background: #e0f2fe; border-color: #bae6fd; }
.pr-badge--warning { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.pr-badge--success { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
.pr-badge--danger { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.pr-badge--primary { color: #4338ca; background: #e0e7ff; border-color: #c7d2fe; }
.pr-field-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: #64748b; }

/* =====================================================================
   Affiliate report stat cards (moved out of affiliate/program.blade.php)
   ===================================================================== */
.order-stat-card { border: 1px solid var(--bs-border-color, #eef0f2); border-radius: .5rem; }
.order-stat-icon { width: 42px; height: 42px; font-size: 1rem; background: rgba(115, 102, 255, .10); color: var(--theme-default, #7366ff); }

/* Affiliate table/filter sizing helpers (moved out of inline styles) */
.affiliate-select-lg { max-width: 320px; }
.affiliate-rate-input { width: 90px; }
.affiliate-locale-select { width: 110px; }
.affiliate-action-col { min-width: 300px; }
.affiliate-payout-col { min-width: 260px; }

/* Affiliate payout history rows are clickable (open the detail modal) */
.affiliate-payout-row { cursor: pointer; }

/* Affiliate payout detail modal: receipt preview + confirm details list */
.affiliate-receipt-img { max-width: 100%; height: auto; border: 1px solid var(--bs-border-color, #eef0f2); border-radius: .5rem; }
.affiliate-confirm-list dt { font-weight: 600; color: var(--bs-secondary-color, #8898aa); }
.affiliate-confirm-list dd { margin-bottom: .5rem; word-break: break-word; }

/* =====================================================================
   Portal Request detail page (moved out of portal_requests/show.blade.php)
   ===================================================================== */
.pr-label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--bs-secondary-color, #8898aa); }
.pr-tile { border: 1px solid var(--bs-border-color, #eef0f2); border-radius: .5rem; padding: .85rem 1rem; height: 100%; }
.pr-tile .pr-value { font-weight: 600; word-break: break-word; }
.pr-identity-icon { width: 46px; height: 46px; font-size: 1.1rem; background: rgba(115, 102, 255, .10); color: var(--theme-default, #7366ff); }
.pr-mono { font-family: ui-monospace, SFMono-Regular, monospace; font-size: .78rem; }
.pr-tabnum { font-variant-numeric: tabular-nums; }
.pr-break { word-break: break-all; }
.pr-note { border: 1px solid var(--bs-border-color, #eef0f2); border-left: 3px solid var(--theme-default, #7366ff); border-radius: .5rem; background: rgba(115, 102, 255, .04); }
.pr-table-wrap { border: 1px solid var(--bs-border-color, #eef0f2); border-radius: .5rem; overflow: hidden; }
.pr-badge-accent { background: var(--theme-default, #7366ff); color: #fff; }
/* The bulk-tag bar's picker and type-to-create box: wide enough for a tag name, not the whole bar. */
.pr-bulk-tag-control { max-width: 14rem; }
.pr-photo { width: 120px; height: 120px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color, #dee2e6); }
.pr-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.pr-timeline > li { position: relative; padding: 0 0 1.1rem 1.65rem; }
.pr-timeline > li::before { content: ''; position: absolute; left: 4px; top: 5px; bottom: -5px; width: 2px; background: var(--bs-border-color, #eef0f2); }
.pr-timeline > li:last-child { padding-bottom: 0; }
.pr-timeline > li:last-child::before { display: none; }
.pr-timeline > li::after { content: ''; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--theme-default, #7366ff); box-shadow: 0 0 0 3px rgba(115, 102, 255, .15); }
.pr-timeline > li.pr-timeline--done::after { background: var(--bs-success, #51bb25); box-shadow: 0 0 0 3px rgba(81, 187, 37, .15); }
.pr-timeline > li.pr-timeline--current::after { background: var(--theme-default, #7366ff); box-shadow: 0 0 0 4px rgba(115, 102, 255, .22); }
.pr-timeline > li.pr-timeline--blocked::after { background: var(--bs-danger, #dc3545); box-shadow: 0 0 0 3px rgba(220, 53, 69, .15); }
.pr-timeline > li.pr-timeline--upcoming { opacity: .6; }
body.rtl .pr-timeline > li { padding: 0 1.65rem 1.1rem 0; }
body.rtl .pr-timeline > li::before { left: auto; right: 4px; }
body.rtl .pr-timeline > li::after { left: auto; right: 0; }
.page-body .pr-summary-tile,
.page-body .pr-panel,
.page-body .pr-context-card,
.page-body .pr-note-box,
.page-body .pr-step-card,
.page-body .pr-history-item { border: 1px solid #edf1f7; border-radius: 18px; background: #fff; }
.page-body .pr-summary-tile,
.page-body .pr-context-card,
.page-body .pr-note-box,
.page-body .pr-history-item { padding: 1rem 1.1rem; }
.page-body .pr-panel { padding: 1.25rem; }
.page-body .pr-summary-label { color: #7b879d; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .35rem; }
.page-body .pr-panel-title { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; color: #27364b; }
.page-body .pr-fin-row { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid #f3f5f9; }
.page-body .pr-fin-row:last-child { border-bottom: 0; padding-bottom: 0; }
.page-body .pr-item-image,
.page-body .pr-media-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 16px; border: 1px solid #e8edf5; background: #f8fafc; }
.page-body .pr-media-video-thumb { position: relative; width: 72px; height: 72px; padding: 0; border-radius: 16px; border: 1px solid #e8edf5; overflow: hidden; background: #0b1016; cursor: pointer; display: block; }
.page-body .pr-media-video-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-body .pr-media-play-icon { position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; background: rgba(11, 16, 22, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.page-body #portal-media-video { width: 100%; aspect-ratio: 16 / 9; background: #000; max-height: 82vh; display: block; }
.page-body .pr-item-thumb { width: 72px; height: 72px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #52627a; background: #eef2f8; border: 1px solid #e1e8f0; }
.page-body .pr-item-thumb-empty { text-transform: uppercase; }
.page-body .pr-journey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.page-body .pr-step-card { padding: 1rem; }
.page-body .pr-step-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; margin-bottom: .75rem; }
.page-body .pr-history-list { display: flex; flex-direction: column; gap: .85rem; }
.page-body .pr-media-link { text-decoration: none; }
/* Media lightbox modal — rendered OUTSIDE .page-body, so these stay unscoped. */
.pr-media-modal-content { background-color: #000; }
.pr-media-modal-close { z-index: 1050; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; padding: 0.75rem; }
.pr-media-modal-video { max-height: 85vh; object-fit: contain; }
.page-body .pr-badge { gap: .5rem; padding: .52rem .95rem; border-radius: 999px; font-size: .95rem; font-weight: 700; line-height: 1; box-shadow: none; }
.page-body .pr-badge__dot { width: .55rem; height: .55rem; }
.page-body .pr-badge--danger { color: #c62828; background: #fff1f1; border-color: #f8caca; }
.page-body .pr-badge--success { color: #117a43; background: #edf9f1; border-color: #bfe8cc; }
.page-body .pr-badge--warning { color: #a05a00; background: #fff6dd; border-color: #f5df9a; }
.page-body .pr-badge--primary { color: #4b44c7; background: #f0efff; border-color: #d5d2ff; }
.page-body .pr-badge--info { color: #126b8f; background: #eef9fd; border-color: #c9e8f4; }
.page-body .pr-badge--neutral { color: #52627a; background: #f4f7fb; border-color: #dbe4ee; }

/* Feedback detail page (moved out of feedback/show.blade.php) */
.text-prewrap { white-space: pre-wrap; }
.feedback-ctx-key { width: 35%; }
.feedback-screenshot { max-height: 480px; }
.icon-xs { font-size: .7rem; }
.select-narrow { max-width: 110px; }

/* AJAX pagination initial-hidden state. NOT Bootstrap's .d-none (which is
   display:none !important) — FilterManager reveals the ajax copy via inline
   style.display='block', which can only override a NON-!important rule. */
.pagination-hidden { display: none; }

/* Multi-merchant staff store switcher (#13) — header dropdown. */
.mm-switcher-toggle { display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .35rem .55rem; border-radius: 10px; transition: background .15s ease; }
.mm-switcher-toggle:hover { background: rgba(115, 102, 255, .10); }
.mm-switcher-caret { width: 15px; height: 15px; opacity: .55; }
.mm-switcher-menu { min-width: 250px; max-height: 380px; overflow-y: auto; padding: .4rem; border-radius: 14px; box-shadow: 0 14px 38px rgba(17, 24, 39, .16); }
.mm-switcher-head { padding: .4rem .6rem .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9aa0ac; }
.mm-switcher-item { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: 0; padding: .55rem .55rem; border-radius: 10px; text-align: start; color: inherit; transition: background .15s ease; }
.mm-switcher-item:hover { background: rgba(115, 102, 255, .10); }
.mm-switcher-item.is-active { background: rgba(115, 102, 255, .12); font-weight: 600; }
.mm-switcher-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #7366ff, #a99bff); color: #fff; font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.mm-switcher-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-switcher-check { color: #22c55e; font-size: .82rem; flex-shrink: 0; }

/* The theme owns every header dropdown with stronger selectors, and two of them broke the
   switcher once a staff member reached dozens of stores: `.onhover-dropdown:hover
   .onhover-show-div { overflow: hidden }` cut the list off with no way to reach the rest, and
   `.nav-right .onhover-show-div li { padding: 15px }` + `li + li { margin-top: 15px }` spread
   each store over ~60px. Matched at the theme's own specificity so the menu scrolls, rows sit
   compact, and the heading stays pinned while scrolling. */
.page-wrapper .page-header .header-wrapper .nav-right .mm-switcher-menu,
.page-wrapper .page-header .header-wrapper .nav-right .onhover-dropdown:hover .mm-switcher-menu {
    max-height: min(420px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.page-wrapper .page-header .header-wrapper .nav-right .mm-switcher-menu li {
    padding: 0;
}
.page-wrapper .page-header .header-wrapper .nav-right .mm-switcher-menu li + li {
    margin-top: 2px;
}
.page-wrapper .page-header .header-wrapper .nav-right .mm-switcher-menu li:last-child {
    padding-bottom: 0;
}
.page-wrapper .page-header .header-wrapper .nav-right .mm-switcher-menu li.mm-switcher-head {
    position: sticky;
    top: -.4rem;
    z-index: 1;
    padding: .55rem .6rem;
    background: inherit;
}

/* Affiliate profile side-by-side mini-tables (Coupons + Payouts). Their card-body is
   px-0 (.list-product is avoided — its fixed column min-widths overflow a half-width
   card), which leaves the table flush against the card edge. Indent the edge columns
   to 20px so they line up with the card header (which has 20px padding). */
.recent-table table.affiliate-mini-table tr th:first-child,
.recent-table table.affiliate-mini-table tr td:first-child { padding-inline-start: 20px; }
.recent-table table.affiliate-mini-table tr th:last-child,
.recent-table table.affiliate-mini-table tr td:last-child { padding-inline-end: 20px; }

/* Add/Edit coupon — Shopify "review before confirm" table. */
.coupon-review { border: 1px solid rgba(115, 102, 255, .22); background: rgba(115, 102, 255, .05); border-radius: 12px; padding: .7rem .85rem; }
.coupon-review-title { font-size: .8rem; font-weight: 700; color: #5b53c9; margin-bottom: .5rem; }
.coupon-review-table { width: 100%; margin: 0; border-collapse: collapse; }
.coupon-review-table td { padding: .4rem .15rem; border-top: 1px solid rgba(115, 102, 255, .12); font-size: .85rem; vertical-align: middle; }
.coupon-review-table tr:first-child td { border-top: 0; }
.coupon-review-table .cr-label { color: #6b7280; white-space: nowrap; padding-inline-end: 1rem; }
.coupon-review-table .cr-value { text-align: end; font-weight: 500; }
.coupon-review-table .cr-value .badge { font-size: .85rem; font-weight: 700; padding: .4em .7em; }

/* Affiliate profile date-range filter bar. */
.aff-filter .form-label { font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #9aa0ac; margin-bottom: .3rem; }
.aff-filter-field { min-width: 170px; }
.aff-filter-field .form-control { border-radius: 10px; }
.aff-filter-btn { border-radius: 10px; padding-inline: 1.1rem; }

/* Affiliate profile — "Commission over time" chart (ApexCharts area) */
.aff-commission-chart { width: 100%; min-height: 260px; }
.aff-spark-empty { padding: 24px 0; text-align: center; }

/* Portal-requests list — per-item thumbnail + name (Customer Service dashboard). */
.pr-item-line { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.pr-item-line:last-child { margin-bottom: 0; }
.pr-item-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; border: 1px solid #EEF0F3; flex-shrink: 0; }
.pr-item-thumb-empty { display: inline-flex; align-items: center; justify-content: center; background: #F4F5F7; color: #8898aa; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.pr-item-name { font-size: .82rem; color: #1C2230; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-item-qty { font-size: .72rem; color: #8898aa; font-weight: 600; flex-shrink: 0; }

/* Portal-requests payout target — the refund destination the staff member reads
   off-screen and types into their banking app. Prominent + selectable so a digit
   is never misread. */
.pr-payout-target { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #F4F5F7; border: 1px solid #EEF0F3; border-radius: 10px; padding: .5rem .7rem; margin-bottom: .75rem; }
.pr-payout-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8898aa; }
.pr-payout-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; color: #1C2230; letter-spacing: .04em; user-select: all; }
.pr-payout-summary { display: flex; align-items: center; justify-content: flex-start; gap: .45rem; flex-wrap: wrap; border: 1px solid #edf1f7; border-radius: 14px; background: #f8fafc; padding: .8rem .95rem; }
.pr-payout-summary-main { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pr-payout-summary-label { font-size: .82rem; font-weight: 700; color: #6d7b92; }
.pr-payout-summary-value { display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .7rem; border-radius: 999px; background: #eef2ff; color: var(--theme-default, #7366ff); font-size: .95rem; font-weight: 800; }
.pr-payout-summary-note { color: #52627a; font-size: .87rem; margin-inline-start: .1rem; }

/* ── Affiliate payout detail page (payout-detail.blade.php) — tabbed hero view ── */
.ap-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(120deg, #5b4bff 0%, var(--theme-default, #7366ff) 55%, #9a8cff 100%); border-radius: 16px; padding: 1.6rem 1.8rem; color: #fff; margin-bottom: 1.25rem; box-shadow: 0 10px 30px -12px rgba(115,102,255,.55); }
.ap-hero-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.ap-hero-name { font-size: 1.7rem; font-weight: 800; margin: .25rem 0 .6rem; color: #fff; }
.ap-hero-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.ap-tag { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: .28rem .65rem; border-radius: 20px; background: rgba(255,255,255,.16); color: #fff; }
.ap-tag--ok { background: rgba(46, 204, 113, .28); }
.ap-tag--muted { background: rgba(255,255,255,.10); opacity: .85; }
.ap-hero-amount { text-align: start; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 1.05rem 1.5rem; min-width: 250px; }
.ap-hero-amount-label { display: block; font-size: .7rem; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .45rem; }
.ap-hero-amount-value { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.ap-hero-amount-value small { font-size: 1.05rem; font-weight: 700; opacity: .85; margin-inline-start: .2rem; }

/* Hero CTA → the affiliate's payouts page. White pill on the purple hero, purple
   text, soft lift + arrow nudge on hover. */
.ap-hero-btn { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: var(--theme-default, #7366ff); font-weight: 700; font-size: .85rem; padding: .6rem 1.15rem; border-radius: 12px; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0,0,0,.35); transition: transform .15s ease, box-shadow .15s ease, color .15s ease; }
.ap-hero-btn:hover { color: #5b4bff; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(0,0,0,.45); }
.ap-hero-btn > i { font-size: 1rem; }
.ap-hero-btn-arrow { transition: transform .15s ease; opacity: .7; }
.ap-hero-btn:hover .ap-hero-btn-arrow { transform: translateX(3px); opacity: 1; }
/* Point the trailing arrow the right way in RTL, and nudge it toward the text edge. */
[dir="rtl"] .ap-hero-btn-arrow { transform: scaleX(-1); }
[dir="rtl"] .ap-hero-btn:hover .ap-hero-btn-arrow { transform: scaleX(-1) translateX(3px); }

.ap-tabs { background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.06); padding: .2rem .75rem 0; border-bottom: none; gap: .25rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ap-tabs .nav-link { border: none; background: none; color: var(--bs-secondary-color, #8898aa); font-weight: 600; font-size: .86rem; padding: .7rem 1rem; border-bottom: 2px solid transparent; border-radius: 0; }
.ap-tabs .nav-link:hover { color: var(--theme-default, #7366ff); }
.ap-tabs .nav-link.active { color: var(--theme-default, #7366ff); border-bottom-color: var(--theme-default, #7366ff); background: none; }
.ap-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: .3rem; font-size: .66rem; font-weight: 700; border-radius: 9px; background: rgba(115,102,255,.12); color: var(--theme-default, #7366ff); }
.ap-tab-content { padding-top: 0; }
/* Stock Move Management tabs (Stock Moves / OUT Tasks / IN Tasks): plain Bootstrap
   nav-tabs render with no visible border/background here, so the active tab is only
   distinguishable by font weight — give it a colored underline + accent color instead. */
#stockMoveTabs.nav-tabs { border-bottom: 1px solid var(--bs-border-color, #e5e7eb); gap: .25rem; }
#stockMoveTabs .nav-link { border: none; background: none; color: var(--bs-secondary-color, #8898aa); font-weight: 600; padding: .65rem 1rem; border-bottom: 2px solid transparent; border-radius: 0; }
#stockMoveTabs .nav-link:hover { color: var(--theme-default, #7366ff); }
#stockMoveTabs .nav-link.active { color: var(--theme-default, #7366ff); border-bottom-color: var(--theme-default, #7366ff); background: none; }
body.dark-only #stockMoveTabs.nav-tabs { border-bottom-color: rgba(255,255,255,.08); }
body.dark-only #stockMoveTabs .nav-link { color: rgba(255,255,255,.6); }
body.dark-only #stockMoveTabs .nav-link:hover,
body.dark-only #stockMoveTabs .nav-link.active { color: var(--theme-default, #7366ff); }
/* Stock Move show page tabs (OUT Tasks / IN Tasks / History) — the "nav-tabs-card"
   class in the markup has no matching theme definition, so it renders as plain
   unstyled nav-tabs. Same treatment as #stockMoveTabs above for consistency. */
#showTasksTab.nav-tabs { border-bottom: 1px solid var(--bs-border-color, #e5e7eb); gap: .25rem; }
#showTasksTab .nav-link { border: none; background: none; color: var(--bs-secondary-color, #8898aa); font-weight: 600; padding: .65rem 1rem; border-bottom: 2px solid transparent; border-radius: 0; }
#showTasksTab .nav-link:hover { color: var(--theme-default, #7366ff); }
#showTasksTab .nav-link.active { color: var(--theme-default, #7366ff); border-bottom-color: var(--theme-default, #7366ff); background: none; }
#showTasksTab .nav-link .badge { background: rgba(115,102,255,.12) !important; color: var(--theme-default, #7366ff) !important; }
body.dark-only #showTasksTab.nav-tabs { border-bottom-color: rgba(255,255,255,.08); }
body.dark-only #showTasksTab .nav-link { color: rgba(255,255,255,.6); }
body.dark-only #showTasksTab .nav-link:hover,
body.dark-only #showTasksTab .nav-link.active { color: var(--theme-default, #7366ff); }
/* AJAX pager: dim + block interaction while a page is being fetched. */
.ap-pager { transition: opacity .15s ease; }
.ap-pager--loading { opacity: .5; pointer-events: none; }
/* Match the order show-page cards: soft white elevated card (radius 16, gentle shadow). */
.ap-card { background: #fff; border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06); }

.ap-snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.ap-snapshot-card { position: relative; background: #fff; border: none; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.06); padding: 1rem 1.1rem; overflow: hidden; }
.ap-snapshot-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--theme-default, #7366ff); }
.ap-snapshot-card--success::before { background: #2ecc71; }
.ap-snapshot-card--danger::before  { background: #e24a3b; }
.ap-snapshot-card--info::before    { background: #22b8cf; }
.ap-snapshot-card--neutral::before { background: #8898aa; }
.ap-snapshot-card--muted::before   { background: #cbd2db; }
.ap-snapshot-label { display: block; font-size: .72rem; font-weight: 600; color: var(--bs-secondary-color, #8898aa); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.ap-snapshot-value { font-size: 1.5rem; font-weight: 800; color: #1c2230; font-variant-numeric: tabular-nums; }

.ap-method { display: flex; align-items: center; gap: .85rem; }
.ap-method + .ap-method { border-top: 1px solid var(--bs-border-color, #eef0f2); padding-top: .75rem; margin-top: .75rem; }

/* Preferred-method chip on the "Start payment" card header (top-right). */
.ap-pref-chip { display: inline-flex; align-items: center; gap: .55rem; background: rgba(115,102,255,.07); border: 1px solid rgba(115,102,255,.18); border-radius: 12px; padding: .4rem .7rem; }
.ap-pref-chip > i { color: var(--theme-default, #7366ff); font-size: 1.05rem; }
.ap-pref-chip-body { display: flex; flex-direction: column; line-height: 1.25; }
.ap-pref-chip-name { font-size: .85rem; font-weight: 700; color: #1c2230; }
.ap-pref-chip-tag { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--theme-default, #7366ff); }
.ap-method-icon { width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(115,102,255,.10); color: var(--theme-default, #7366ff); font-size: 1.1rem; flex-shrink: 0; }
.ap-method-name { font-weight: 700; color: #1c2230; }
.ap-method-sub { font-size: .78rem; color: var(--bs-secondary-color, #8898aa); }

.ap-dl { display: grid; grid-template-columns: 40% 60%; row-gap: .55rem; margin: 0; }
.ap-dl dt { font-size: .8rem; font-weight: 600; color: var(--bs-secondary-color, #8898aa); }
.ap-dl dd { font-size: .88rem; color: #1c2230; margin: 0; word-break: break-word; }

.ap-receipts { display: flex; flex-wrap: wrap; gap: .75rem; }
.ap-receipt { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 130px; padding: 1rem .75rem; border: 1px solid var(--bs-border-color, #eef0f2); border-radius: 12px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.ap-receipt:hover { border-color: var(--theme-default, #7366ff); box-shadow: 0 6px 18px -10px rgba(115,102,255,.5); }
.ap-receipt i { font-size: 1.8rem; color: var(--theme-default, #7366ff); }
.ap-receipt-amount { font-weight: 700; font-size: .9rem; color: #1c2230; }
.ap-receipt-date { font-size: .74rem; color: var(--bs-secondary-color, #8898aa); }

/* Balances-Due affiliate name → link to the detail page */
.affiliate-due-link { color: var(--theme-default, #7366ff); font-weight: 600; text-decoration: none; }
.affiliate-due-link:hover { text-decoration: underline; }

/* =====================================================================
   Affiliate Program index page — KPI header, roster tabs, empty states
   (program.blade.php + program-*-table partials). Light-first to match the
   sibling ap-* profile styles above; dark-only overrides mirror the
   stock-move tab precedent. Logical properties only, so RTL follows.
   ===================================================================== */

/* Recruit-creators helper text + snippet field (moved off inline styles). */
.ap-hint { font-size: .75rem; }
.ap-snippet-input { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: .75rem; }

/* Hide the expand hint once the recruit card is open — no longer relevant. */
details[open] .expand-hint { display: none; }

/* Active date-range chip under the performance-report filter. */
.ap-report-range { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color, #8898aa); background: rgba(115, 102, 255, .07); border-radius: 20px; padding: .3rem .8rem; }
.ap-report-range i { color: var(--theme-default, #7366ff); }

/* Tabular, emphasised numeric cells in the roster tables (rate / balance). */
.ap-roster-num { font-variant-numeric: tabular-nums; }

/* Empty state for the Affiliates / Coupons roster tables — replaces the old
   red "none yet" line with a calm, centered icon + title + hint. */
.ap-empty { text-align: center; padding: 2.75rem 1rem; }
.ap-empty-icon { width: 56px; height: 56px; margin: 0 auto .85rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(115, 102, 255, .10); color: var(--theme-default, #7366ff); font-size: 1.45rem; }
.ap-empty-title { font-weight: 700; color: #1c2230; margin: 0 0 .3rem; }
.ap-empty-sub { font-size: .82rem; color: var(--bs-secondary-color, #8898aa); margin: 0 auto; max-width: 340px; }

/* Sync-progress modal bar + live log (moved off inline styles; the log ink is
   set explicitly because the theme's default <pre> colour is too faint here). */
.ap-sync-progress { height: 20px; }
.ap-sync-log { max-height: 180px; overflow: auto; color: #212529; background: #f4f5f7; white-space: pre-wrap; word-break: break-word; }

/* Dark-only: keep the new empty state + sync log legible. */
body.dark-only .ap-empty-title { color: #e6e9f0; }
body.dark-only .ap-sync-log { color: #d7dce5; background: #1b1f27; }

/* ============================================================================
   Affiliate campaign wizard (campaigns.blade.php — the #campaign-wizard form).
   Everything is scoped under .campaign-wizard so nothing leaks to other cards.
   Colours track the theme via --theme-default + Bootstrap tokens, so the panel
   follows both RTL (logical props only) and the body.dark-only theme.
   ============================================================================ */

/* Card shell + header --------------------------------------------------- */
.campaign-wizard { border: none; border-radius: 16px; box-shadow: 0 4px 24px -12px rgba(18, 22, 33, .18); overflow: hidden; }
.campaign-wizard-head { background: linear-gradient(120deg, rgba(115,102,255,.10) 0%, rgba(115,102,255,.02) 60%, transparent 100%); border-bottom: 1px solid var(--bs-border-color, #eef0f2); padding-top: 1.15rem; padding-bottom: 1.15rem !important; }
.campaign-wizard-head h5 { font-weight: 700; }
.campaign-head-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--theme-default, #7366ff); color: #fff; font-size: .95rem; flex-shrink: 0; box-shadow: 0 6px 16px -6px rgba(115,102,255,.7); }
.campaign-wizard .card-body { padding: 1.5rem; }

/* Step rail — filled active chip, muted numbered inactive ---------------- */
.campaign-wizard .campaign-step-chip {
    display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
    border: 1px solid var(--bs-border-color, #e6e8ee); background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #6c757d); font-weight: 600; font-size: .88rem;
    padding: .55rem 1rem; border-radius: 12px;
    transition: color .15s, border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.campaign-wizard .campaign-step-chip:hover { color: var(--theme-default, #7366ff); border-color: rgba(115,102,255,.4); transform: translateY(-1px); }
.campaign-wizard .campaign-step-chip:focus-visible { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 2px; }
.campaign-wizard .campaign-step-num {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 22px; height: 22px; border-radius: 50%; font-size: .78rem; font-weight: 700;
    background: var(--bs-secondary-bg, #eef0f4); color: var(--bs-secondary-color, #6c757d); transition: inherit;
}
.campaign-wizard .campaign-step-chip.active {
    color: #fff; background: var(--theme-default, #7366ff); border-color: var(--theme-default, #7366ff);
    box-shadow: 0 8px 20px -8px rgba(115,102,255,.7);
}
.campaign-wizard .campaign-step-chip.active .campaign-step-num { background: rgba(255,255,255,.25); color: #fff; }

/* Section rhythm — a soft fade as each step swaps in ---------------------- */
.campaign-wizard .campaign-step { animation: campaign-fade .2s ease; }
@keyframes campaign-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.campaign-wizard .form-label { font-weight: 600; font-size: .82rem; color: var(--bs-body-color, #1c2230); margin-bottom: .35rem; }

/* Input groups — coloured leading icon + one focus ring for the whole group */
.campaign-wizard .input-group-text { background: var(--bs-secondary-bg, #f6f7fb); border-color: var(--bs-border-color, #e6e8ee); color: var(--theme-default, #7366ff); }
.campaign-wizard .form-control, .campaign-wizard .form-select { border-color: var(--bs-border-color, #e6e8ee); }
.campaign-wizard .input-group:focus-within { box-shadow: 0 0 0 .2rem rgba(115,102,255,.18); border-radius: var(--bs-border-radius, .375rem); }
/* Every <select> here is select2 (custom_script enhances them all). A
   .select2-container reports a taller box than the .select2-selection--single
   it paints — that one carries a fixed height — so the leading icon, a real
   flex item, stretched to the taller box: the clock beside "Qualifying date"
   towered over its own field. Pin the container to the height the theme gives
   every other control and let the painted box fill it. */
.campaign-wizard .input-group > .select2-container { height: calc(1.5em + 0.75rem + 2px); }
.campaign-wizard .input-group > .select2-container .select2-selection--single { height: 100% !important; }
.campaign-wizard .input-group:focus-within .input-group-text { border-color: var(--theme-default, #7366ff); }
.campaign-wizard .input-group:focus-within .form-control,
.campaign-wizard .input-group:focus-within .form-select { border-color: var(--theme-default, #7366ff); box-shadow: none; }
/* The whole datetime-local field reads as clickable, not just the calendar glyph. */
.campaign-wizard input[type="datetime-local"] { cursor: pointer; }

/* Selectable option cards — targeting mode + per-order cap ---------------- */
.campaign-wizard .campaign-choice {
    display: flex; gap: .7rem; align-items: center; margin-bottom: 0; cursor: pointer;
    border: 1px solid var(--bs-border-color, #e6e8ee); border-radius: 12px; padding: .8rem .9rem;
    background: var(--bs-body-bg, #fff); transition: border-color .15s, background .15s, box-shadow .15s;
}
.campaign-wizard .campaign-choice:hover { border-color: rgba(115,102,255,.5); background: rgba(115,102,255,.03); }
.campaign-wizard .campaign-choice:has(input:checked) { border-color: var(--theme-default, #7366ff); background: rgba(115,102,255,.06); box-shadow: 0 6px 18px -10px rgba(115,102,255,.6); }
.campaign-wizard .campaign-choice:has(input:focus-visible) { outline: 2px solid var(--theme-default, #7366ff); outline-offset: 2px; }
.campaign-wizard .campaign-choice .form-check-input { margin-top: .15rem; flex-shrink: 0; }
.campaign-wizard .campaign-choice-body { line-height: 1.35; }
.campaign-wizard .campaign-choice-title { display: block; font-weight: 600; }

/* Reach summary panel ---------------------------------------------------- */
.campaign-wizard .campaign-summary { border: 1px solid var(--bs-border-color, #e6e8ee); border-radius: 14px; background: linear-gradient(160deg, rgba(115,102,255,.08) 0%, transparent 55%); }
.campaign-wizard .campaign-summary-count { font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--theme-default, #7366ff); font-variant-numeric: tabular-nums; }
.campaign-wizard .campaign-summary-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color, #8898aa); }

/* Sticky creator-table header must stay opaque over scrolling rows -------- */
.campaign-wizard .table thead.position-sticky th { background: var(--bs-tertiary-bg, #f6f7fb); z-index: 2; }

/* Footer nav buttons ----------------------------------------------------- */
.campaign-wizard #campaign-next, .campaign-wizard #campaign-submit { padding-inline: 1.3rem; }

/* Dark mode (theme toggles body.dark-only) ------------------------------- */
body.dark-only .campaign-wizard .campaign-step-chip { background: rgba(255,255,255,.03); }
body.dark-only .campaign-wizard .campaign-choice { background: rgba(255,255,255,.02); }
body.dark-only .campaign-wizard .campaign-choice:hover { background: rgba(115,102,255,.12); }
body.dark-only .campaign-wizard .input-group-text { background: rgba(255,255,255,.04); }

/* Amend modal (campaigns.blade.php — one .campaign-amend-modal per running campaign).
   Scoped so the invite-more checklist never touches the create wizard's own picker. */
.campaign-amend-modal .amend-creator-list { max-height: 13rem; overflow-y: auto; }
.campaign-amend-modal .amend-creator-row {
    display: flex; align-items: center; gap: .55rem; margin: 0; padding: .4rem .7rem;
    cursor: pointer; border-bottom: 1px solid var(--bs-border-color, #eef0f2);
}
.campaign-amend-modal .amend-creator-row:last-child { border-bottom: 0; }
.campaign-amend-modal .amend-creator-row:hover { background: rgba(115,102,255,.06); }
.campaign-amend-modal .amend-creator-row:has(input:checked) { background: rgba(115,102,255,.10); }
.campaign-amend-modal .amend-creator-check { flex-shrink: 0; }
body.dark-only .campaign-amend-modal .amend-creator-row:hover { background: rgba(115,102,255,.14); }

/* ============================================================================
   Affiliate announcement wizard (announcements.blade.php). Reuses the campaign
   wizard chrome above (.campaign-wizard is on the same card); only the
   announcement-specific bits live here, scoped under .announcement-wizard.
   ============================================================================ */
.announcement-wizard .announcement-body { min-height: 7rem; }
.announcement-wizard .announcement-counter { font-variant-numeric: tabular-nums; }
.announcement-wizard .announcement-var { font-family: var(--bs-font-monospace, monospace); font-size: .78rem; }
.announcement-wizard .announcement-var:hover { color: var(--theme-default, #7366ff); border-color: rgba(115, 102, 255, .5); }
.announcement-wizard #announcement-review-summary { background: var(--bs-tertiary-bg, #f8f9fb); }
body.dark-only .announcement-wizard #announcement-review-summary { background: rgba(255, 255, 255, .03); }
/* Send-modal reach panel borrows the campaign summary look outside the wizard card. */
.announcement-send-modal .campaign-summary { border: 1px solid var(--bs-border-color, #e6e8ee); border-radius: 14px; background: linear-gradient(160deg, rgba(115,102,255,.08) 0%, transparent 55%); }
.announcement-send-modal .campaign-summary-count { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--theme-default, #7366ff); font-variant-numeric: tabular-nums; }
.announcement-send-modal .campaign-summary-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color, #8898aa); }

/* ── Checkbox visibility boost ──────────────────────────────────────────────── */
:not(.form-switch) > .form-check-input[type="checkbox"] {
    width: 1em;
    height: 1em;
    border: 2px solid #94a3b8;
    border-radius: 0.25em;
    background-color: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
:not(.form-switch) > .form-check-input[type="checkbox"]:checked {
    background-color: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3 6-6'/%3e%3c/svg%3e");
}
:not(.form-switch) > .form-check-input[type="checkbox"]:focus {
    box-shadow: none;
}
:not(.form-switch) > .form-check-input[type="checkbox"]:hover {
    border-color: var(--theme-default, #7366ff);
}
body.dark-only :not(.form-switch) > .form-check-input[type="checkbox"] {
    border-color: #64748b;
    background-color: #1e293b;
}
body.dark-only :not(.form-switch) > .form-check-input[type="checkbox"]:checked {
    border-color: var(--theme-default, #7366ff);
}

/* ── Radio visibility boost ────────────────────────────────────────────────── */
.form-check-input[type="radio"]:not(:checked) {
    width: 1.15em;
    height: 1.15em;
    border: 2px solid #94a3b8;
    background-color: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
.form-check-input[type="radio"]:focus {
    box-shadow: 0 0 0 .15rem rgba(115, 102, 255, .25);
    border-color: var(--theme-default, #7366ff);
}
.form-check-input[type="radio"]:hover {
    border-color: var(--theme-default, #7366ff);
}
body.dark-only .form-check-input[type="radio"] {
    border-color: #64748b;
    background-color: #1e293b;
}

/* ── Switch (toggle) visibility boost ────────────────────────────────────── */
/* Makes the off-state track and knob bolder so the toggle is always visible,
   matching the checkbox boost above. */
.form-switch .form-check-input {
    background-color: #c9d1d9;
    border-color: #c9d1d9;
    opacity: 1;
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 .15rem rgba(115, 102, 255, .25);
    border-color: var(--theme-default, #7366ff);
}
.form-switch .form-check-input:checked {
    background-color: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
}
body.dark-only .form-switch .form-check-input {
    background-color: #475569;
    border-color: #475569;
}
body.dark-only .form-switch .form-check-input:checked {
    background-color: var(--theme-default, #7366ff);
    border-color: var(--theme-default, #7366ff);
}

/* ── Ticket textarea: resizable vertically, capped at 300px ───────────────── */
.ticket-textarea {
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
}

@media (max-width: 429px) {
        .col-xxs-12 {
            flex: 0 0 auto !important;
            width: 100% !important;
        }
    }

/* ── Mobile sidebar: breathing room above the FIRST menu item ──────────────────
   On mobile the drawer opens right under the logo/hamburger, so the first
   ".sidebar-list" (Dashboard) sits too tight to the top. Give ONLY the first one
   a top margin: the "~ li.sidebar-list" reset zeroes every following item, so the
   rest of the menu keeps its normal spacing. Applies to both the backend and WMS
   sidebars (same theme markup), LTR and RTL. */
@media (max-width: 991.98px) {
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-links li.sidebar-list {
        margin-top: 30px !important;
    }
    .page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-links li.sidebar-list ~ li.sidebar-list {
        margin-top: 0 !important;
    }
}
/* ── Vetting dashboard: creator identity cell (avatar + name + Instagram link) ──
   Markup in Modules/Affiliate/resources/views/admin/fraud-findings.blade.php.
   Kept here, not in the blade, per the no-CSS-in-Blade rule. */
.vetting-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #eef0f4;
}

/* Fallback disc when the creator has no avatar_url — first letter of the name. */
.vetting-avatar--blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
}

/* min-width:0 so the name/handle can actually truncate instead of widening the cell. */
.vetting-creator__meta {
    min-width: 0;
    max-width: 220px;
}

/* A linked name that should still read as plain text (merchant creators directory). */
.vetting-creator--plain-link .vetting-creator__meta a:not(.vetting-ig-link) {
    color: inherit;
    text-decoration: none;
}

.vetting-creator--plain-link .vetting-creator__meta a:not(.vetting-ig-link):hover {
    text-decoration: underline;
}

/* Inline brand icon sized like a font icon. The theme sizes every svg in a table:
   `.recent-table svg` (20px) and `.table-hover tbody tr td svg` (30px + padding +
   margin). The td-scoped selector still outranks the latter. The first now TIES
   `.recent-table svg` and wins on load order — custom.css is linked last. */
svg.brand-icon,
.table-hover tbody tr td svg.brand-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    padding: 0;
    margin-right: 0;
    border-radius: 0;
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.table-hover tbody tr td a {
    white-space: nowrap;
}

/* A creator's social handle, wherever it is shown: the identity cell the fraud
   queues render (.vetting-ig-link) and the profile column's handle row, which is
   the same fact on a different screen and was inheriting the theme's default link
   colour instead. One selector so the two can never drift apart again. */
.vetting-ig-link,
.creator-social-link {
    color: #6f42c1;
    max-width: 100%;
}

a.vetting-ig-link:hover,
a.creator-social-link:hover {
    color: #6f42c1;
    text-decoration: underline !important;
}

/* The handle itself reads smaller than the row it sits under — it is a reference,
   not the creator's name. The ICONS do not shrink with it: a brand mark is how the
   two handles are told apart at a glance (they are often the same username), and
   both are sized in em — the Instagram glyph by its font-size, the TikTok svg by
   width/height: 1em — so they would have followed the text down without a size of
   their own. .875rem is what they measure today, pinned rather than inherited. */
.creator-social-link {
    font-size: .78rem;
}
.creator-social-link .fa-brands,
.creator-social-link svg.brand-icon {
    font-size: .875rem;
    /* Optically centred against the smaller text now beside it. */
    vertical-align: -.1em;
}


/* Audience Builder (Modules/Affiliate _gift-targeting-predicates.blade.php) ------
   Scoped under .aud-builder; the accent is the theme's own, so gifts, announcements
   and (phase 3) campaigns read as one console. Logical properties for RTL. */
.aud-builder { --aud-accent: var(--theme-default, #7366ff); --aud-tint: rgba(115,102,255,.08); --aud-border: var(--bs-border-color, #e6e8ee); --aud-radius: 12px; --aud-ease: cubic-bezier(.22,1,.36,1); font-variant-numeric: tabular-nums; }
.aud-summary { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2rem; margin-block-end: .6rem; }
.aud-summary-empty { font-size: .8rem; align-self: center; }
.aud-chip, .aud-preset { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding-inline: .8rem; border-radius: 999px; border: 1px solid var(--aud-border); background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #2b2b2b); font-weight: 600; font-size: .75rem; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.aud-chip { border-color: var(--aud-accent); background: var(--aud-tint); color: var(--aud-accent); }
.aud-chip:hover, .aud-preset:hover { border-color: var(--aud-accent); }
.aud-chip-x { font-size: 1rem; line-height: 1; opacity: .7; }
.aud-preset small { font-weight: 500; opacity: .7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; }
.aud-preset.is-active { border-color: var(--aud-accent); background: var(--aud-tint); color: var(--aud-accent); }
.aud-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .6rem; }
.aud-rows { display: grid; grid-template-columns: 1fr; gap: .5rem; grid-auto-flow: row dense; }  /* an open row spans both columns; dense fills the hole it leaves */
@media (min-width: 992px) { .aud-rows { grid-template-columns: 1fr 1fr; } .aud-row.is-on { grid-column: 1 / -1; } }
.aud-row { border: 1px solid var(--aud-border); border-radius: var(--aud-radius); padding: .55rem .8rem; background: var(--bs-body-bg, #fff); transition: border-color .15s, background .15s, box-shadow .15s; }
.aud-row:hover { border-color: rgba(115,102,255,.5); }
.aud-row.is-on { border-color: var(--aud-accent); background: var(--aud-tint); box-shadow: 0 6px 18px -12px rgba(115,102,255,.6); }
.aud-row.is-invalid { border-color: #dc2626; }
.aud-row-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; }
/* The whole switch+label line is the hit target (≥36px), not the 19px track. */
/* font-size here is LOAD-BEARING, not cosmetic: the switch is sized in em, and
   without it the box inherited 1rem while the label beside it is .85rem — a
   41x22 track against 13.6px text, which read as an oversized toggle with small,
   raised words. Sizing the box at the label's own .85rem makes the two scale
   together (track ~35x19). The label keeps its rem font-size, so the words are
   untouched; only the control comes down to meet them.

   column-gap is what puts air between switch and words, and it has to be: this
   box is display:flex, so the label is a flex ITEM packed straight after the
   input's margin box. Bootstrap's padding-inline-start + negative margin-inline-
   start idiom (which used to live here, 3em against -3em) only opens a gap in
   BLOCK layout, where the label is inline text flowing past the container's
   padding edge. Under flex it just shifts the pair sideways and leaves the words
   flush against the track — raising both numbers together changes nothing at all.
   Hence padding 0 and margin 0, with the spacing carried by gap, which is
   writing-mode agnostic and so needs no RTL counterpart. The physical
   padding-left / margin resets stay: this install serves the LTR bootstrap.css
   under dir=rtl, so Bootstrap's own padding-left:1.5em and margin-left:-1.5em
   would otherwise survive on the wrong side in Arabic. */
.aud-row-head .form-check { display: flex; align-items: center; min-height: 36px; font-size: .85rem; column-gap: .75em; padding-left: 0; padding-inline-start: 0; cursor: pointer; }
.aud-row-head .form-check-input { cursor: pointer; width: 2.6em; height: 1.4em; margin: 0; flex: none; }

.aud-row-head .form-check-label { cursor: pointer; font-weight: 600; font-size: .85rem; display: flex; align-items: center; min-height: 36px; position: relative; top: 2px; }  /* the label IS the 36px target */
.aud-row-hint { font-size: .7rem; }
.aud-row-body { padding-block-start: .6rem; }
.aud-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
@media (max-width: 419.98px) { .aud-pair { grid-template-columns: minmax(0, 1fr); } }  /* two date inputs do not fit a 320px modal side by side */
.aud-field > input, .aud-field .input-group { min-width: 0; }  /* two date inputs must fit a 320px modal */
.aud-row-error { display: block; margin-block-start: .3rem; font-size: .75rem; }
.aud-range { position: relative; height: 44px; margin-block: .1rem .3rem; }
.aud-range::before { content: ""; position: absolute; inset-inline: 8px; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 999px; background: var(--aud-border); }
/* Two overlapped rails: the TRACK is inert and only the thumbs take the pointer — otherwise a
   track click always lands on the top rail. Clicking the track is deliberately a no-op. */
.aud-range input[type=range] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; accent-color: var(--aud-accent); }
.aud-range input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.aud-range input[type=range]::-moz-range-track { background: transparent; height: 4px; }
/* The THUMB is the only pointer target on a dual rail, so it is the hit area: a 36px
   box (touch floor) painting a 24px disc — the halo is transparent but grabbable. */
.aud-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 36px; height: 36px; margin-top: -16px; border-radius: 50%; border: 0; box-shadow: none; background: radial-gradient(circle, #fff 0 9px, var(--aud-accent) 9px 12px, transparent 12.5px); cursor: grab; }
.aud-range input[type=range]::-moz-range-thumb { pointer-events: auto; width: 36px; height: 36px; border-radius: 50%; border: 0; box-shadow: none; background: radial-gradient(circle, #fff 0 9px, var(--aud-accent) 9px 12px, transparent 12.5px); cursor: grab; }
.aud-range input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--aud-accent); outline-offset: 2px; }
.aud-range input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--aud-accent); outline-offset: 2px; }
.aud-reach { display: flex; align-items: center; gap: .9rem; margin-block-start: .7rem; padding: .7rem .9rem; border: 1px solid var(--aud-border); border-radius: 14px; background: linear-gradient(160deg, var(--aud-tint) 0%, transparent 55%); }
.aud-reach-count { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--aud-accent); min-width: 2.6ch; text-align: center; }
.aud-reach-meta { flex: 1; min-width: 0; }
.aud-reach-caption { display: block; font-size: .8rem; margin-block-end: .35rem; }
.aud-gauge { height: 6px; border-radius: 999px; background: var(--aud-border); overflow: hidden; }
.aud-gauge i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--aud-accent); transition: width .22s var(--aud-ease); }
.aud-gauge.is-narrow i, .aud-gauge.is-broad i { background: #d97706; }
.aud-builder :focus-visible { outline: 2px solid var(--aud-accent); outline-offset: 2px; }
body.dark-only .aud-row, body.dark-only .aud-chip, body.dark-only .aud-preset { background: rgba(255,255,255,.02); }
body.dark-only .aud-row.is-on, body.dark-only .aud-preset.is-active, body.dark-only .aud-chip { background: rgba(115,102,255,.14); }
/* The gift EDIT modal has no .card ancestor, so the theme's dark --bs-body-color never reaches it. */
body.dark-only .aud-preset { color: inherit; }
/* LTR bootstrap.css is served under dir=rtl: the knob would travel the wrong way in Arabic. */
body.rtl .aud-row-head .form-check-input { background-position: right center; }
body.rtl .aud-row-head .form-check-input:checked { background-position: left center; }
@media (prefers-reduced-motion: reduce) { .aud-builder *, .aud-builder *::before { transition: none !important; } }

/* ── Unshippable address flag on the orders list ──────────────────────────────
   Shown in the Area column when the carrier has no delivery zone for the
   address, so the problem is visible on the row instead of surfacing as an
   error dialog at AWB time, after the order is packed.

   Deliberately quieter than the Cancelled badge: that badge states a decided
   fact about the order, this one asks a question about the address. It keeps
   the red vocabulary (a left border and the same danger tint) so it reads as
   "needs attention" at a glance, without shouting over a row that is otherwise
   healthy and still shippable once someone picks a district.                 */
.order-area-flag {
    padding-inline-start: 8px;
    border-inline-start: 3px solid var(--bs-danger, #dc3545);
    line-height: 1.3;
}

.order-area-flag__name {
    display: block;
    color: var(--bs-danger, #dc3545);
    font-weight: 600;
}

/* One short line, and never more. The five-district shortlist used to print here
   and cost four extra lines in a narrow column on EVERY flagged row; it now lives
   in the tooltip and in the modal the cell opens, which is where anyone acting on
   it is going anyway. */
.order-area-flag__reason {
    display: block;
    font-size: 11px;
    color: var(--bs-danger, #dc3545);
    margin-top: 1px;
}

/* The district picker inside #orderDistrictModal. */
.district-picker {
    max-height: 320px;
    overflow-y: auto;
}

.district-picker__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.district-picker__row:hover {
    background: rgba(0, 0, 0, 0.035);
}

.district-picker__name {
    flex: 1 1 auto;
}

/* SETs on the orders list.
   A set is sold as one listing and assembled from several shelf products, so the row
   has to say two things the ordinary SKU badge cannot: that it IS a set, and — when it
   is out of stock — which part is the reason. The badge borrows the brand purple so it
   reads as "different kind of line", not as a warning; the missing-part line borrows
   the danger red because it is the actionable half. */
.order-set-badge {
    display: inline-block;
    margin-top: 4px;
    border: 0;
    cursor: pointer;
    background: rgba(124, 58, 237, 0.10);
    color: #7C3AED;
    font-weight: 600;
}

.order-set-badge:hover,
.order-set-badge:focus-visible {
    background: rgba(124, 58, 237, 0.18);
}

/* The card a SET badge opens: one row per part, the shelf count right-aligned so a
   column of numbers can be scanned, a short part in red. */
.order-set-popover {
    max-width: 360px;
}

.order-set-popover .popover-body {
    padding: 12px 14px;
}

.order-set-card + .order-set-card {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.order-set-card__title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.35;
    color: #1f2937;
}

.order-set-card__status {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.order-set-card__status.is-ok {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.order-set-card__status.is-short {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.order-set-card__parts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-set-card__part {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.order-set-card__part:last-child {
    border-bottom: 0;
}

.order-set-card__name {
    color: #374151;
}

.order-set-card__qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #374151;
    min-width: 2ch;
    text-align: end;
}

.order-set-card__part.is-short .order-set-card__name,
.order-set-card__part.is-short .order-set-card__qty {
    color: #dc3545;
}

.order-set-card__foot {
    margin-top: 6px;
    font-size: 10px;
    color: #9ca3af;
    text-align: end;
}

.order-set-flags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 4px;
}

/* The missing part is a flag like the others, on one line like them: letting it wrap
   let the table squeeze the Flags column down to one letter per line. */
.order-set-flags__missing {
    white-space: nowrap;
}

/* "This product looks like a SET" callout on the product edit page. */
.product-set-callout__title { font-weight: 600; margin-bottom: 4px; }
.product-set-callout__parts { font-size: 13px; }
.product-set-callout__problems { font-size: 13px; color: var(--bs-danger, #dc3545); }
.product-set-callout__extras { font-size: 12px; opacity: .8; margin-top: 2px; }

/* The parts of a SET line on the order page, nested under that line. */
.order-set-parts-row > td {
    border-top: 0;
    padding-top: 0;
}

.order-set-parts {
    background: rgba(124, 58, 237, 0.05);
    border-inline-start: 3px solid #7C3AED;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
}

.order-set-parts__title {
    font-size: 12px;
    font-weight: 600;
    color: #7C3AED;
    margin-bottom: 6px;
}

.order-set-parts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.order-set-parts__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.order-set-parts__item:last-child {
    border-bottom: 0;
}

.order-set-parts__sku {
    font-family: monospace;
    font-size: 12px;
    color: #6b7280;
}

.order-set-parts__need {
    font-variant-numeric: tabular-nums;
    color: #374151;
    font-weight: 600;
}

.order-set-parts__state.is-held { background: rgba(25, 135, 84, 0.12); color: #198754; }
.order-set-parts__state.is-available { background: rgba(13, 110, 253, 0.10); color: #0d6efd; }
.order-set-parts__state.is-short { background: rgba(220, 53, 69, 0.12); color: #dc3545; }

@media (max-width: 575.98px) {
    .order-set-parts__item {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* ── Sidebar stage counts ──────────────────────────────────────────────────────
   The number beside a tab: work that reached that stage and nobody has started.
   Filled by public/backend/assets/js/sidebar-counts.js; hidden at zero.

   Pinned to the row's edge the way the theme pins the submenu arrow (absolute, inside
   the positioned <li>), so it lines up in every row whatever the label's length, and
   flips side with the arrow in RTL. Every text property is set with !important: the
   theme styles any <span> inside a sidebar link, and those rules won the first draft. */
.sidebar-links .sidebar-count {
    position: absolute;
    top: 11px;
    inset-inline-end: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--theme-default, #7366ff);
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* A tab with no submenu has no arrow: the number takes the arrow's place. */
.sidebar-links a.link-nav .sidebar-count {
    inset-inline-end: 20px;
}

/* Submenu rows are positioned blocks of their own: centre the number in the row. */
.sidebar-links .sidebar-submenu li > a .sidebar-count {
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 24px;
    height: 18px;
    min-width: 22px;
    font-size: 10.5px !important;
}

.sidebar-links .sidebar-count[hidden],
.sidebar-wrapper.close_icon .sidebar-links .sidebar-count {
    display: none !important;
}

/* ── Gift-deliverable enforcement (PR #610): admin review + program screens ── */

/* The blocked-creators panel's waive form: reason input + button on one line. */
.deliverables-waive-cell {
    min-width: 320px;
}

/* Request-a-video + set-tier rows: labelled fields, one of them a <select>.

   The global enhancer turns that select into a select2, and a .select2-container
   reports a taller box than it paints — so the ROW was taller than anything
   visible in it and the Create / Set tier buttons, aligned to the bottom of
   their own column, hung below the fields they belong to.

   Pin the enhanced box to the control height and the row is the height it looks.
   Bottom-aligning the columns (align-items-end) fixed the buttons and broke the
   labels instead: columns then take their natural heights, so a 38px select box
   beside a taller field put the two labels on different lines. Columns stay
   stretched here; only the box is pinned. */
.deliverables-request-row .select2-container {
    height: calc(1.5em + 0.75rem + 2px);
}
.deliverables-request-row .select2-container .select2-selection--single {
    height: 100% !important;
}
/* …and this theme's .btn is a few px taller than a .form-control, which would
   leave the button standing proud of the row. Same formula, one control tall. */
.deliverables-request-row > [class*="col-"] > .btn {
    height: calc(1.5em + 0.75rem + 2px);
    padding-block: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.deliverables-tier-row > [class*="col-"] > .btn {
    min-width: 5rem;
}

.influencer-form-row .select2-container {
    height: calc(1.5rem + 0.75rem + 2px);
    min-height: calc(1.5rem + 0.75rem + 2px);
}
.influencer-form-row .select2-container .select2-selection--single {
    height: 100% !important;
}

/* Tag picker rows: the identity block is what gives way when the dialog is narrow.
   A flex item will not shrink below its content without this, so a long handle would
   push the rate off the edge instead of truncating itself. */
.merchant-tag-pick-row > label {
    min-width: 0;
}

/* The rate column. Fixed width and tabular figures so 5% and 12.5% line up down the
   list — right-aligned alone would still stop at different places, which is the whole
   reason this is a column and not just another thing on the row. Logical padding so
   it keeps its distance from the badge in both directions. */
.merchant-tag-pick-rate {
    min-width: 3.5rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
    padding-inline-start: .5rem;
}

/* Tag picker rows: the identity cell's avatar, one size down. The list is a
   scrolling column of 20+ people in a modal, so 32px would turn it into a photo
   album; 24px still tells two Ranas apart. The font-size is for the fallback
   disc's initial, which is sized in its own box. */
.merchant-tag-pick-avatar {
    width: 24px;
    height: 24px;
    font-size: .7rem;
}

/* Tag picker: a creator already in the chosen tag. The row stays readable — you
   need to see WHO is in the tag — but reads as out of play, which is what its
   disabled checkbox already means. Muted, not hidden: hiding them would make a
   tag look like it had fewer members than it has. */
.merchant-tag-pick-row--tagged {
    opacity: .65;
}

/* The review queue's status tab row (Pending / Waiting 7+ days / Processing …):
   a small dark rule on the line AFTER the row, so the strip reads as its own band
   instead of running straight into the narrowing form. Full width: it is the
   closing edge of the tab row, not an accent dash. A translucent version of the
   same near-black instead of a solid grey: at .3 opacity on white it lands a
   soft, clearly subordinate whisper of a line — present as the tab row's closing
   edge, never a hard cut through the card. Dark mode flips it light, as every
   other rule here does. */
.deliverables-tabs-rule {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: rgba(33, 37, 41, .3);
    margin: .35rem 0 .1rem;
}
body.dark-only .deliverables-tabs-rule {
    background: rgba(255, 255, 255, .7);
}

/* The review queue's source / creator narrowing form: two selects and a small
   button under the tab bar.

   select2 replaces those selects and paints its OWN box at the full control
   height — .form-select-sm stays behind on the hidden original and changes
   nothing — so the row was a pair of 38px boxes beside a 31px btn-sm, with the
   button stranded above their baseline. Pin the enhanced boxes to the SMALL
   control height instead, and centre the row so the three agree. */
.deliverables-filter-form {
    max-width: 560px;
    align-items: center;
}
.deliverables-filter-form .select2-container {
    height: calc(1.5em + 0.5rem + 2px);
}
.deliverables-filter-form .select2-container .select2-selection--single {
    height: 100% !important;
    /* Logical, so the arrow's gutter follows the Arabic panel. */
    padding-block: 0.25rem;
    padding-inline: 0.5rem 2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* The verdict column is a door now, not a form: room for the Review button, or a
   status badge and the small Video button a decided row keeps. */
.deliverables-verdict-cell {
    min-width: 120px;
}

/* The note to the creator. Draggable, because a long note in a 3-row box is
   miserable to write — but VERTICALLY only and to a ceiling: the review dialog
   puts this beside the video in a half-width column, so a horizontal drag runs
   the field past the column and a tall enough drag pushes the verdict footer
   off the screen. max-height caps the resize handle itself, so the limit is
   felt at the handle rather than enforced after the fact. */
/* ── The review dialog — split layout (landscape phone only) ──────────────────
   Markup: deliverables.blade.php, .deliverables-review-split (one dialog per row).

   On landscape phone the dialog becomes a side-by-side split: the player's aside
   pane (40%) and the card (60%) holding header, body and footer. On every other
   device the split wrappers are display:contents and the inline col-lg-6 video is
   shown instead. */
/* ── Default (non-landscape-phone): the split wrappers are INVISIBLE ──────────
   The aside pane and the .deliverables-review-main wrapper exist in the markup
   for the landscape-phone split layout, but on every other device the inline
   video (col-lg-6 inside .modal-body) is shown instead. display:contents makes
   the wrappers vanish from the box tree so Bootstrap's normal modal flow
   (modal-xl, centered, video in a grid column) is undisturbed. */
.deliverables-review-video-pane {
    display: none;
}

.deliverables-review-main {
    display: contents;
}

/* PR staff (readOnly): the modal body is a flex container centring the video.
   Overrides the 60vh cap so the player can fill the available height. */
.deliverables-review-video-only {
    display: flex;
    align-items: center;
    justify-content: center;
}
.deliverables-review-video-only .deliverables-review-video {
    max-height: 100%;
    max-width: 100%;
}

/* The review dialog's player.

   Deliverables are phone videos, so most are 9:16. In the inline position
   (col-lg-6, the default), 60vh keeps the portrait from outrunning the modal.
   In the landscape-phone pane, the media query overrides to max-height:100%
   (100% of the pane) and adds object-fit:contain. width:auto is why the markup
   cannot keep .w-100 — that utility is !important and would win. */
.deliverables-review-video {
    display: block;
    max-height: 60vh;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

/* ── Desktop (lg+): the player takes the height the CONTROLS column sets ──────
   From lg up the dialog is two col-lg-6 columns, and Bootstrap already stretches
   both to the same height — the player was simply refusing to use it. Since the
   thread moved into the controls column, that column is usually the taller one,
   and the 60vh cap above left a band of dead white under the video.

   So the COLUMN is the frame and the video fits inside it: the column takes
   whatever height the controls set (up to 72vh — the dialog is
   modal-dialog-scrollable, and past roughly that the body starts scrolling, so a
   taller player would mean scrolling to reach the end of the video you are
   judging), and the video reads that height back as a CAP rather than as a size.

   Which is the whole reason height stays auto. Forcing height:100% makes a 16:9
   clip hit max-width instead, and the box then stays full-column-tall around a
   picture that no longer fills it: grey band above, dead space above the controls
   bar. With height:auto the intrinsic ratio drives the box — a 9:16 grows until
   it meets the height cap, a 16:9 stops at the width cap, and neither is ever
   letterboxed.

   The video is positioned OUT OF FLOW on purpose: in flow with the cap removed,
   a 1080×1920 upload contributes its intrinsic 1920px as the column's
   hypothetical height and the flex line — the whole modal — grows to match. Out
   of flow it contributes nothing, which is also what keeps an empty thread
   honest: the dialog stays at the controls' own height instead of holding 60vh
   open under a video that cannot use it. min-height is only so a decided
   submission, whose controls column is a badge over an empty thread, still gets
   a player rather than a sliver. The top inset is Bootstrap's own gutter var, so
   the player starts level with the first checkbox and not up in the g-4 gutter. */
@media (min-width: 992px) {
    .deliverables-review-inline-video {
        position: relative;
        min-height: 20rem;
        max-height: 72vh;
    }

    .deliverables-review-inline-video .deliverables-review-video {
        position: absolute;
        top: var(--bs-gutter-y, 0px);
        inset-inline: 0;
        height: auto;
        max-height: calc(100% - var(--bs-gutter-y, 0px));
        width: auto;
        max-width: 100%;
        margin-inline: auto;
    }
}

.deliverables-note-input {
    resize: vertical;
    min-height: 4.5rem;
    max-height: 10rem;
    max-width: 100%;
}

/* The review thread, now under the dialog's controls instead of in the queue
   cell: a chat log the reviewer reads after deciding, and writes the next line
   of with the note field above it.

   It is a FIELD, not a stretch of page — same border, radius and inset as the
   note textarea it sits under, so the column reads as two boxes rather than a
   form that trails off into loose text. Which also makes it scroll on its own:
   a ten-round thread must not push the verdict buttons out of reach in a dialog
   whose card is already the scroller. min-height keeps the one-reply and the
   empty case from collapsing into a sliver that no longer reads as a box. */
.deliverables-thread__log {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    min-height: 6rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: .625rem .75rem;
    border: 1px solid var(--trndr-border-subtle);
    border-radius: .375rem;
    background: var(--trndr-bg-light);
}

/* The store's lines sit on the end edge and the creator's on the start edge.
   Logical properties throughout, so the Arabic panel mirrors the whole
   conversation for free — a hardcoded left/right would put both sides on the
   wrong edge there. */
.deliverables-thread__msg {
    display: flex;
    flex-direction: column;
    max-width: 85%;
}

.deliverables-thread__msg--them {
    align-items: flex-start;
    align-self: flex-start;
}

.deliverables-thread__msg--us {
    align-items: flex-end;
    align-self: flex-end;
}

.deliverables-thread__meta {
    font-size: .7rem;
    line-height: 1.4;
    color: var(--trndr-text-tertiary);
    margin-bottom: .15rem;
}

/* Tokens, not Bootstrap bg-* utilities: the theme forces color:#fff on those,
   and these bubbles have to stay readable on both panels. The tokens already
   carry their own body.dark-only values. */
.deliverables-thread__bubble {
    padding: .4rem .65rem;
    border-radius: .75rem;
    border: 1px solid var(--trndr-border-subtle);
    background: var(--trndr-bg-surface);
    color: var(--trndr-deep-ink);
    font-size: .8125rem;
    line-height: 1.45;
}

/* The one square corner points the bubble at its own edge — the only thing
   telling the two sides apart at a glance besides which edge they hug. */
.deliverables-thread__msg--them .deliverables-thread__bubble {
    border-start-start-radius: .25rem;
}

.deliverables-thread__msg--us .deliverables-thread__bubble {
    border-start-end-radius: .25rem;
    border-color: transparent;
    background: var(--trndr-tint-violet);
}

/* A creator pasting a caption is the long line this has to survive. */
.deliverables-thread__body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The state the video moved to on that line. Self-contained, like .pr-chip:
   never composed with a Bootstrap badge, which would overwrite the colour. */
.deliverables-thread__verdict {
    display: inline-block;
    margin-bottom: .2rem;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    color: var(--trndr-deep-ink);
    background: var(--trndr-border-subtle);
}

.deliverables-thread__verdict--approved {
    color: var(--trndr-success);
    background: var(--trndr-tint-success);
}

.deliverables-thread__verdict--changes_requested {
    color: var(--trndr-warning);
    background: var(--trndr-tint-warning);
}

.deliverables-thread__verdict--rejected,
.deliverables-thread__verdict--fraud {
    color: var(--trndr-danger);
    background: var(--trndr-tint-danger);
}

.deliverables-thread__verdict--disabled {
    color: var(--trndr-ink-300);
    background: var(--trndr-border-subtle);
}

/* Centred, because an empty box with one line pinned to a corner reads as a
   rendering accident rather than an empty thread.

   It centres by BECOMING the box rather than by floating inside it: flex:1 grows
   the line to the log's full height and it then centres its own text on both
   axes. The obvious `margin:auto` is what was here before and it did not hold —
   the line rendered hard against the bottom edge of the box, i.e. only the top
   auto margin was absorbing the free space. Do not go back to it. Nothing here
   reaches the populated thread: the selector only exists when the log is empty,
   so real messages still stack from the top. */
.deliverables-thread__empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--trndr-text-tertiary);
}

/* Program settings: the default due-days input and its siblings. */
.deliverables-due-days-row {
    max-width: 460px;
}

/* The fraud verdict, alone at the far end of the review modal's footer.
   It has to read as a button — text alone beside three real buttons reads as a
   label, and "is this clickable?" is a bad question to leave on the one verdict
   that voids money — while staying the quietest thing there. Hence a NEUTRAL
   border with a red label: a red outline would make it a near-twin of Reject
   (.btn-outline-danger) two buttons away, which is the confusion this footer
   exists to prevent. The red arrives on hover, when the pointer is already aimed.
   Bootstrap's own button variables, so hover/focus/active stay consistent; the
   armed state swaps the class for .btn-danger outright (deliverables-script). */
.ap-fraud-btn {
    --bs-btn-color: var(--bs-danger, #dc3545);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-border-color, #e6e8ee);
    --bs-btn-hover-color: var(--bs-danger, #dc3545);
    --bs-btn-hover-bg: rgba(220, 53, 69, .08);
    --bs-btn-hover-border-color: var(--bs-danger, #dc3545);
    --bs-btn-active-color: var(--bs-danger, #dc3545);
    --bs-btn-active-bg: rgba(220, 53, 69, .14);
    --bs-btn-active-border-color: var(--bs-danger, #dc3545);
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
}

/* ── The review dialog on a phone ────────────────────────────────────────────
   Markup in Modules/Affiliate/resources/views/admin/deliverables.blade.php
   (.deliverables-review-modal, .deliverables-review-footer). Kept here, not in
   the blade, per the no-CSS-in-Blade rule.

   PORTRAIT only. The footer is .justify-content-between with Fraud at one end
   and a flex-wrap group of three verdicts at the other, which at phone width
   comes apart into three ragged rows — and Approve, the verdict reached for
   most, lands last and no larger than the rest.

   The fix is VISUAL ONLY, and that is the whole point of it. Those buttons sit
   outside the form and attach through form="verdict-N", so Enter pressed inside
   the note field fires the FIRST SUBMIT IN DOM ORDER, and $verdictButtons keeps
   changes_requested first precisely so the accident is the harmless one: it asks
   for another cut, while approve pays a bonus. So Approve is promoted with
   `order` and the markup is left alone — the DOM sequence, and with it what Enter
   does, is exactly what it was.

   display:contents on the verdict wrapper is what makes a single row possible: it
   lifts all four buttons into the footer's own flex context, so Fraud can share a
   row with the other two instead of facing a wrapper across .justify-content-
   between. It drops the wrapper's .gap-2, so spacing falls to Bootstrap's own
   .modal-footer > * margins — the same gap arrived at from the other side.

   The aside video pane is HIDDEN on portrait phone (display:none in the default
   styles), so the inline col-lg-6 video stacks to full width via Bootstrap's
   responsive grid and no split-layout overrides are needed. */
@media (max-width: 575.98px) {
    /* !important again: .justify-content-between is space-between!important, and
       the rows here are meant to fill edge to edge, not push apart.

       gap and padding are both restated because display:contents below breaks the
       scheme Bootstrap spaces this footer with. Bootstrap gives every child
       `.modal-footer > * { margin: gap/2 }` and then SUBTRACTS that half-gap from
       the footer's own padding. Once the wrapper is display:contents, that
       selector still only matches Fraud and the wrapper — the three verdict
       buttons are flex items but not DOM children, so they collect no margin,
       their own .gap-2 died with the wrapper's box, and the reduced padding
       leaves them flush against the footer's edges while Fraud alone sits inset.
       A real gap plus a real padding, with the margins zeroed, spaces all four
       the same way. */
    .deliverables-review-footer {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: .5rem;
        padding: 1rem;
    }

    .deliverables-review-footer > * {
        margin: 0;
    }

    /* !important because .d-flex IS display:flex!important — the same utility
       trap the blade calls out for .w-100 on the video. Without it the wrapper
       stays a flex item, Fraud stays its sibling rather than joining the row,
       and Fraud stretches across a line of its own: the loudest thing in a
       footer built to keep it the quietest. */
    .deliverables-review-footer > .d-flex {
        display: contents !important;
    }

    /* order moves pixels only. Approve is still third in the DOM and Enter still
       reaches changes_requested; Fraud is type="button", so ordering it last
       cannot put it in Enter's path either. */
    .deliverables-review-footer [data-set-decision="approved"] {
        order: -1;
        flex: 1 0 100%;
    }

    /* Sized to their text, not to an equal share, so there is free space left for
       the auto margin below to absorb. */
    .deliverables-review-footer [data-set-decision="changes_requested"],
    .deliverables-review-footer [data-set-decision="rejected"] {
        flex: 0 1 auto;
    }

    /* Alone at the far end, exactly as on desktop. No `order` is needed to get it
       there — Fraud is already FIRST in the DOM, ahead of the verdict wrapper, so
       display:contents drops it at the head of the row by itself. The auto margin
       eats the remaining space and shoves the other two to the opposite edge,
       which is what .justify-content-between does up at desktop width.

       Two reasons it belongs here rather than beside Reject. It keeps one spatial
       rule across both layouts instead of contradicting itself between them. And
       on a phone the far side from the thumb's rest is the deliberate reach —
       the right corner is where a verdict that voids money and cannot be undone
       is likeliest to be hit by accident.

       margin-inline-end, not -right: the Arabic panel flips the axis and the
       isolation has to survive it, the same reason the desktop rule is
       justify-content-between and not a hardcoded left. */
    .deliverables-review-footer .ap-fraud-btn {
        flex: 0 1 auto;
        margin-inline-end: auto;
    }

    /* Full-bleed here, which is the exact OPPOSITE of the desktop rule above —
       so read that comment first, then this one, before "fixing" either.

       Up there the cap exists because a 9:16 at w-100 in half a modal-xl came out
       around a thousand pixels tall: the dialog outran the viewport and the verdict
       buttons went below the fold. Neither half of that is true on a phone. The
       column IS the screen, so full width is simply the video at its natural size;
       and the dialog is .modal-fullscreen-sm-down, so the footer is PINNED rather
       than pushed down a growing page — the buttons cannot go below a fold that no
       longer exists.

       So height is deliberately let go. The video runs past the bottom, the reviewer
       scrolls, and it leaves the screen to the form and the keyboard, which is the
       one thing a phone actually has less of. */
    .deliverables-review-video {
        width: 100%;
        max-height: none;
    }
}

/* ── Landscape phone: the SPLIT layout activates ──────────────────────────────
   A phone on its side is roughly 900×410. That is under the lg Bootstrap
   breakpoint, so .col-lg-6 never engages and the inline video + controls stay
   stacked in one column — a waist of horizontal space on the one posture a
   reviewer turns to in order to see the video BIGGER.

   So: the split layout turns ON here. The aside pane (video) takes 40 % of the
   screen on the left; the card (header + body + footer) takes 60 % on the
   right. The inline video is hidden; the aside is shown. The .deliverables-
   review-split and .deliverables-review-main wrappers switch from
   display:contents to real flex containers. modal-xl and modal-dialog-centered
   are overridden by higher specificity. */
@media (orientation: landscape) and (max-height: 600px) {
    /* Show the aside video pane; hide the inline col-lg-6 video. */
    .deliverables-review-video-pane {
        display: flex;
    }

    .deliverables-review-inline-video {
        display: none;
    }

    /* The wrappers become real flex containers instead of display:contents. */
    .deliverables-review-split {
        display: flex;
        flex-direction: row;
        height: 100%;
        border: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .deliverables-review-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 60%;
        min-width: 0;
        background-color: var(--bs-modal-bg, #fff);
    }

    /* The video pane: 40 % of the viewport, semi-transparent wash so the
       dimmed queue behind stays visible. */
    .deliverables-review-video-pane {
        flex: 0 0 40%;
        max-width: 40%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 1rem;
        background: rgba(0, 0, 0, .2);
    }

    /* Override modal-xl and modal-dialog-centered (Bootstrap specificity
       is lower than our two-class selector). */
    .deliverables-review-modal .modal-dialog {
        width: 94%;
        max-width: 94%;
        height: 100%;
        max-height: 100%;
        margin: 0;
    }

    /* Compact header/footer to reclaim vertical space. */
    .deliverables-review-modal .modal-header,
    .deliverables-review-footer {
        padding-block: .5rem;
    }

    /* Only the control pane scrolls. min-height:0 is the missing half —
       without it a flex item's automatic minimum keeps it at content height
       and the verdict footer is pushed below the fold. */
    .deliverables-review-main .modal-body {
        min-height: 0;
    }

    /* No playback fallback text in the pane. */
    .deliverables-video-fallback {
        color: rgba(255, 255, 255, .55);
        text-align: center;
    }

    /* The player fills its pane. Height is bounded; width follows the aspect
       ratio; object-fit:contain letterboxes odd ratios. */
    .deliverables-review-video-pane .deliverables-review-video {
        display: block;
        max-height: 100%;
        width: auto;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        margin-inline: auto;
    }
}

/* Header panel switcher (admin <-> merchant) — styled like the Account link beside it. */
.panel-switch-form { display: inline; width: 100%; }
.panel-switch-btn { background: none; border: none; padding: 0; color: inherit; cursor: pointer; width: 100%; text-align: start; display: flex; align-items: center; gap: 10px; font-size: inherit; font-family: inherit; }

/* ── Affiliate commission totals pills (affiliate-commissions card header) ──
   Aggregates for the whole filtered set, rendered as pills beside the card
   title by Modules/Affiliate/.../admin/_commission-totals.blade.php. Same shape
   as the orders list's `.badge-orders-total`; Credits/Debits keep their sign
   colour, since the direction of the number is the point of it. */
.badge-commission-total {
    background: var(--theme-default, #7366ff);
    color: #fff;
    border-radius: 50rem;
    font-size: .8rem;
    font-weight: 600;
    padding: .55rem .9rem;
    letter-spacing: .2px;
}

.badge-commission-total--credit { background: var(--bs-success, #198754); }

.badge-commission-total--debit  { background: var(--bs-danger, #dc3545); }

/* Orders list: what the Total Amount is made of (OrderOutcomeGroups). A full line of small
   tiles under the two totals, in the same card language as the status cards above: a soft
   round icon carrying the order count as a bubble, then the outcome and its amount. One
   accent per outcome, used only on the icon, so the row stays calm. */
/* The totals block takes only the room LEFT by the Export / Add Order buttons and wraps
   inside it, so the buttons stay top-right where they always were; a phone gives it the
   whole line. */
.orders-totals-pills {
    flex: 1 1 0;
    min-width: 0;
}

/* Beside the two totals on one line when there is room (client, 2026-10-01); a narrow
   screen wraps it under them. */
/* The four tiles share ONE line, evenly (client, 2026-10-01: "Cancelled must sit beside
   the others, not under them"): a fixed min-width made the fourth wrap alone whenever the
   room beside the buttons was a little short. A phone still shows two a row (below). */
.orders-outcome-totals {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .75rem;
}

.orders-outcome {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    gap: .85rem;
    padding: .6rem 1rem .6rem .7rem;
    border: 1px solid var(--bs-border-color, #eef0f2);
    border-radius: .5rem;
    background: transparent;
    color: var(--bs-body-color, #374151);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.orders-outcome:hover {
    border-color: var(--orders-outcome-accent, #9ca3af);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    color: var(--bs-body-color, #374151);
}

.orders-outcome__icon {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--orders-outcome-accent, #9ca3af);
    background: var(--orders-outcome-soft, rgba(156, 163, 175, .14));
}

.orders-outcome__count {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 50rem;
    border: 2px solid var(--bs-body-bg, #fff);
    background: var(--orders-outcome-accent, #9ca3af);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.orders-outcome__text { display: flex; flex-direction: column; line-height: 1.25; }
.orders-outcome__label { font-size: .75rem; color: var(--bs-secondary-color, #6b7280); }
.orders-outcome__amount { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.orders-outcome__currency { font-size: .7rem; font-weight: 600; color: var(--bs-secondary-color, #6b7280); }

.orders-outcome--delivered { --orders-outcome-accent: #16a34a; --orders-outcome-soft: rgba(22, 163, 74, .12); }
.orders-outcome--in_progress { --orders-outcome-accent: #2563eb; --orders-outcome-soft: rgba(37, 99, 235, .12); }
.orders-outcome--returned { --orders-outcome-accent: #d97706; --orders-outcome-soft: rgba(217, 119, 6, .12); }
.orders-outcome--cancelled { --orders-outcome-accent: #dc2626; --orders-outcome-soft: rgba(220, 38, 38, .12); }
.orders-outcome--lost { --orders-outcome-accent: #7c3aed; --orders-outcome-soft: rgba(124, 58, 237, .12); }
.orders-outcome--other { --orders-outcome-accent: #6b7280; --orders-outcome-soft: rgba(107, 114, 128, .14); }

/* A tablet is too narrow for four amounts side by side: two a row. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .orders-outcome-totals { flex-wrap: wrap; }
    .orders-outcome { flex: 1 1 calc(50% - .75rem); }
}

@media (max-width: 575.98px) {
    .orders-totals-pills { flex-basis: 100%; }
    .orders-outcome-totals { flex-basis: 100%; flex-wrap: wrap; }
    .orders-outcome { flex: 1 1 calc(50% - .75rem); min-width: 0; }
}

/* ============================================
   Merchant creator directory — apply-tag picker
   (Modules/Affiliate/resources/views/admin/creators/index.blade.php)
   ============================================ */

/* The roster list scrolls INSIDE the modal instead of growing it.

   The picker lists the whole roster, not a page of it, so on a store with a few
   hundred creators an unbounded list pushes the modal footer — and with it the
   Apply button — past the bottom of the viewport. Bootstrap then scrolls the
   whole dialog, which moves the tag dropdown and the search box out of view as
   you hunt down the list. Capping the list keeps the controls and the footer
   fixed while only the names move. */
#merchant-tag-apply-list {
    max-height: 40vh;
    overflow-y: auto;
    /* The rate sits at the row's end, which is exactly where the scrollbar lands —
       the two were printed on top of each other. Clear it, logically, so the gap is
       on the scrolling side in Arabic too. */
    padding-inline-end: .75rem;
    /* And hold that gap whether the list scrolls or not: without it a search that
       filters the list down to three rows drops the scrollbar and every rate jumps
       a few px to the right. */
    scrollbar-gutter: stable;
}

/* ============================================
   Merchant creator directory — actions column
   (Modules/Affiliate/resources/views/admin/creators/table.blade.php)
   ============================================ */

/* Pinned to the scrolled edge.

   #table-container is already the scroll container (.recent-table.table-responsive
   is overflow-x:auto above), which is the one thing position:sticky needs: the cell
   resolves against the nearest scrolling ancestor and pins itself while the other
   eleven columns slide underneath. Nothing here needs JS, and on a screen wide
   enough that the table does not overflow it is a no-op.

   inset-inline-end, NOT right: this page is served under /ar as well, where the
   scrolled edge is the other one.

   The leading edge gets a hairline, but ONLY while the column is actually holding
   its place against the scroll — see .is-pinned below. */
#table-container .creators-action-col {
    position: sticky;
    inset-inline-end: 0;
    z-index: 2;
    /* Shrink to the buttons: `width:1%` on a table cell means "as narrow as the
       content allows", which keeps the pinned column off the columns that carry
       actual text. */
    width: 1%;
    white-space: nowrap;
}

/* OPAQUE, and this is the whole difference between a pinned column and a mess.

   Bootstrap 5.3 paints every cell `background-color: var(--bs-table-bg)`, and
   --bs-table-bg is `transparent` — so a pinned cell that does not set its own
   background lets the columns it is covering print straight through it. Earned here
   and Action came out overprinted on the same pixels, in the header and in the rows.

   !important because the theme's own table rules are the ones being overruled and
   they are spread across style.css; this is the one declaration that must not lose.
   Split th/td so each matches the row it sits in rather than punching a white hole
   through the grey header. background-COLOR, never the shorthand or a box-shadow:
   Bootstrap paints row hover as `box-shadow: inset 0 0 0 9999px …` ON THE CELL, so
   leaving that property alone is what keeps the pinned column highlighting with its
   row instead of staying white while everything beside it lights up. */
#table-container td.creators-action-col {
    background-color: #ffffff !important;
    background-clip: padding-box;
}

#table-container th.creators-action-col {
    background-color: var(--bs-tertiary-bg, #f6f7fb) !important;
    background-clip: padding-box;
}

/* Dark mode, and this is not optional the moment the rule above is opaque.

   The pinned cell has to paint SOMETHING or the columns sliding under it print
   through — so it cannot fall back to transparent here the way an ordinary cell
   does. A literal #ffffff is a white slab down the edge of a dark table, with the
   theme's light body text on it, which is worse than the overprinting the opacity
   was added to fix.

   The values are the theme's own: body.dark-only .card is #262932 (style.css), and
   the header takes the darker #1d1e26 the dark table-hover accent already uses, so
   the pinned column reads as part of its row rather than as a patch laid over it. */
body.dark-only #table-container td.creators-action-col {
    background-color: #262932 !important;
}

body.dark-only #table-container th.creators-action-col {
    background-color: #1d1e26 !important;
}

/* The hairline on the leading edge, drawn only when the column has left its place.

   .is-pinned is set by script.blade.php whenever #table-container still has room to
   scroll toward the column — i.e. the column is covering something. Scroll the table
   all the way over and it comes off, because at that point the column is sitting
   where it belongs and a divider there is just another line in a table full of them.

   A PSEUDO-ELEMENT, not border-inline-start and not a box-shadow, and both refusals
   are load-bearing:

     - the table is border-collapse:collapse, where borders are painted by the TABLE
       rather than by the cell — so a border set here stays behind at the column's
       natural position while the cell travels, which is the opposite of the point;
     - Bootstrap 5.3 paints row hover as `box-shadow: inset 0 0 0 9999px …` on the
       cell, so a box-shadow here would replace it and leave this one column dark
       while the rest of its row lights up. */
#table-container.is-pinned .creators-action-col::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 1px;
    background: var(--bs-border-color, #dfe3ea);
    pointer-events: none;
}

/* A creator carrying none of your tags gets a Tags button that does nothing, so it
   is disabled — and it has to LOOK it.

   Bootstrap's disabled treatment for an outline button is its own colour at 65%
   opacity, which on .btn-outline-danger is still plainly red: the control read as
   live, and the only way to find out otherwise was to click it and have nothing
   happen. Grey says it at a glance instead, and opacity goes back to 1 because the
   colour is now carrying the message and a fade on top of it only makes the icon
   harder to see.

   Not a `title` for the reason: a disabled control shows no tooltip in most
   browsers, and none at all on touch. The dialog says it when it can be reached. */
#table-container .creators-tag-btn:disabled {
    color: var(--bs-secondary-color, #8898aa);
    border-color: var(--bs-border-color, #dfe3ea);
    opacity: 1;
}

/* The bulk dialog's selection list. Capped for the same reason the picker's is: a
   select-all over a full page puts 25 faces in the dialog, and an unbounded list
   pushes the footer — and with it Add tag — past the bottom of the viewport, at
   which point Bootstrap scrolls the whole dialog and the tag dropdown leaves the
   screen while you read the names. */
.merchant-tag-bulk-list {
    max-height: 40vh;
    overflow-y: auto;
    padding-inline-end: .75rem;
    /* Hold the gutter whether it scrolls or not, so a two-row selection does not sit
       a few px off from a twenty-row one. */
    scrollbar-gutter: stable;
}

/* The name takes the slack and the chips sit at the row's end; without this a long
   name pushes them off rather than truncating. */
.merchant-tag-bulk-row > .text-truncate {
    min-width: 0;
}


/* Creator-directory tag filters: make the multi-selects read as dropdowns.

   tag_any / tag_all / tag_none are <select multiple>, and the global select2
   enhancer turns them into a .select2-selection--multiple. That container renders
   EMPTY until something is picked — no text and, unlike select2's single-select,
   no arrow — so all three sat next to Status and Governorate looking like blank
   text inputs. data-placeholder (in filter.blade.php) puts the words back; this
   puts the chevron back, borrowed from Bootstrap's own .form-select so the four
   controls on that row match.

   Scoped to this form on purpose: every multi-select in the back office would
   otherwise inherit an arrow it was not designed around. */
#creators-filter-form .select2-container--default .select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.25rem;
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Arabic puts the chevron on the other side, the way .form-select does. */
[dir="rtl"] #creators-filter-form .select2-container--default .select2-selection--multiple {
    background-position: left 0.75rem center;
    padding-right: 0.75rem;
    padding-left: 2.25rem;
}

/* ── Dark mode: sidebar icons/text invisible in compact sidebar ─────────
   compact-wrapper sets the sidebar background to #262932 in dark mode
   (style.css ~100225), but only overrides li a span color (100246).
   The <a> itself and its <i> FA icons stay dark. When the sidebar is
   collapsed (close_icon), text is hidden and only icons show — making
   the dark icons invisible on the dark background. */
body.dark-only
    .page-wrapper.compact-wrapper
    .page-body-wrapper div.sidebar-wrapper
    .sidebar-main .sidebar-links li a {
    color: hsla(0, 0%, 100%, 0.6);
}
body.dark-only
    .page-wrapper.compact-wrapper
    .page-body-wrapper div.sidebar-wrapper
    .sidebar-main .sidebar-links li a i {
    color: hsla(0, 0%, 100%, 0.6);
}

/* ── Dark mode: ecommerce dashboard ────────────────────────── */
body.dark-only .ecommerce-hero {
    background: linear-gradient(135deg, #1a5d9e 0%, #14508a 100%);
}
body.dark-only .snapshot-card,
body.dark-only .sales-performance-card {
    background-color: #262932;
    border-color: #374558;
}
body.dark-only .snapshot-value,
body.dark-only .sales-perf-value {
    color: #e5e7eb;
}
body.dark-only .snapshot-prev {
    background: #374558;
    border-color: #4b5563;
    color: #a1a1aa;
}
body.dark-only .text-dark {
    color: #e5e7eb !important;
}
body.dark-only .finance-status-card {
    border: 1px solid #374558;
    background-color: #262932;
}
body.dark-only .finance-status-card .fw-bold {
    color: #e5e7eb;
}
body.dark-only .bg-light {
    background-color: #374558 !important;
    color: #e5e7eb !important;
}

/* ── Dark mode: affiliate program tabs ─────────────────────── */
body.dark-only .ap-tabs {
    background: #262932;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
body.dark-only .ap-tabs .nav-link {
    color: #a1a1aa;
}
body.dark-only .ap-tabs .nav-link.active {
    color: var(--theme-default, #7366ff);
}
body.dark-only .ap-count {
    background: rgba(115,102,255,.18);
    color: var(--theme-default, #7366ff);
}

/* ── Dark mode: sticky count bar uses var(--bs-body-bg) which stays white ── */
body.dark-only [style*="background:var(--bs-body-bg)"] {
    background-color: #1d1e26 !important;
}

/* ── Dark mode: disabled tag-remove button ──────────────────── */
body.dark-only #table-container .creators-tag-btn:disabled {
    color: #a1a1aa;
    border-color: #4b5563;
}

/* ── Dark mode: modal text-muted too faint ──────────────────── */
body.dark-only .modal .text-muted {
    color: #e5e7eb !important;
}

/* ── Dark mode: pinned action column hairline ───────────────── */
body.dark-only #table-container.is-pinned .creators-action-col::before {
    background: #4b5563;
}

/* ── Dark mode: outline buttons need brighter borders ──────── */
body.dark-only .btn-outline-primary {
    border-color: #6fa1e8;
    color: #6fa1e8;
}
body.dark-only .btn-outline-danger {
    border-color: #dc6b74;
    color: #f0717a;
}

/* ── PR tab counters ───────────────────────────────────────────
   The count badge beside "Registrations" / "Applications" in the PR queue tabs.
   Bootstrap's .badge is sized for a label inside a row, not for a number sitting
   in a tab strip, so it needs its own step up. Here rather than inline on the
   span: a size used twice is a rule, and the next tab that wants a counter takes
   the class instead of copying the numbers. */
.pr-tab-count {
    font-size: .8rem;
    padding: .3em .6em;
}

/* ── Branding settings: the wordmark preview ───────────────────
   Bounds the mark shown on the branding page — both the uploaded logo and the
   bundled fallback, which are the same preview in two states and must therefore
   be the same size. Height is the dimension that runs away: the files are
   whatever an admin handed us, and max-width alone lets a tall narrow logo push
   the card open. */
.branding-preview-mark {
    max-height: 80px;
    max-width: 100%;
}

/* ── Orders list: the failure / RTO reason cell ────────────────
   The reason a carrier gives is a sentence, and the column only has room for a
   preview — so the whole cell is the control that opens the full text in a popup
   (orders/reason-script.blade.php). Bootstrap's .badge supplies the colour; the rules
   below are the reset a <button> needs to stop looking like a button, the one-line
   clamp that keeps a long reason from wrapping the whole table row, and the underline
   that says it can be clicked. */
.order-failure-reason {
    border: 0;
    cursor: pointer;
    max-width: 220px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-failure-reason:hover,
.order-failure-reason:focus-visible {
    text-decoration: underline;
}

/* The hover list of every failed attempt ("Failure Reasons" / one dated line each), the
   way ShipBlu shows it. Wider than a default tooltip so a carrier sentence stays on one
   or two lines, and start-aligned so the dates line up. */
.failure-reasons-tooltip .tooltip-inner {
    max-width: 380px;
    text-align: start;
    line-height: 1.6;
}

/* ShipBlu's look: solid dark grey, white text. The theme's tooltip is a translucent light
   purple that the table shows through, which the client could not read. */
.failure-reasons-tooltip {
    --bs-tooltip-bg: #636b78;
    --bs-tooltip-color: #fff;
    --bs-tooltip-opacity: 1;
}

.failure-reasons-tooltip.show {
    opacity: 1;
}

.failure-reasons-tooltip .tooltip-inner {
    background-color: #636b78;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 6px;
}

.failure-reasons-tooltip .tooltip-inner strong {
    color: #fff;
    font-size: 14px;
}

.failure-reasons-tooltip.bs-tooltip-top .tooltip-arrow::before,
.failure-reasons-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #636b78;
}

/* Receipt Details: the failed attempts. Sentences, not a value -- so the right side may
   shrink and wrap, and reads from the start of the line like the rest of the text. */
.receipt-failure-reasons {
    align-items: flex-start;
    /* Same shape as the other rows (.receipt-item-highlight), in red. */
    border-left: 3px solid #dc3545;
    padding: 15px 10px;
}

.receipt-failure-reasons .receipt-item-right {
    flex-shrink: 1;
    text-align: start;
}

.receipt-failure-reasons__list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.7;
}

.receipt-failure-reasons__date {
    font-weight: 600;
    margin-inline-end: 6px;
    white-space: nowrap;
}

.js-open-warehouse-history {
    display: inline-block;
    margin-top: 4px;
    text-decoration: underline;
}

/* The same list as a toast at the top corner (click / tap), in ShipBlu's grey. */
.swal2-popup.swal2-toast.failure-reasons-toast {
    background: #636b78;
    color: #fff;
    width: auto;
    max-width: 420px;
    padding: 10px 14px;
}

.swal2-popup.swal2-toast.failure-reasons-toast .swal2-html-container {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
    text-align: start;
}

.swal2-popup.swal2-toast.failure-reasons-toast .swal2-html-container strong {
    color: #fff;
    font-size: 14px;
}

.swal2-popup.swal2-toast.failure-reasons-toast .swal2-close {
    color: #fff;
}

.swal2-popup.swal2-toast.failure-reasons-toast .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, 0.5);
}

.failure-reasons-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.failure-reasons-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #636b78;
}

/* ── Order page: a FAILED delivery attempt on the history timeline ──
   The one event on a twenty-event timeline the reader opened the tab to find. The
   bullet is already red (AwbTracking::getStatusColor), but a red dot next to the
   default lilac card still scrolls past; the card itself carries the colour. */
.status-history-item-failed > .status-history-content {
    background: linear-gradient(135deg, #fff5f5 0%, #fdecec 100%);
    border-color: #f5c2c7;
}

.status-history-item-failed > .status-history-content:hover {
    border-color: #ea868f;
    box-shadow: 0 8px 16px rgba(220, 53, 69, 0.15);
}

body.dark-only .status-history-item-failed > .status-history-content {
    background: linear-gradient(135deg, #32262a 0%, #2b1f23 100%);
    border-color: rgba(220, 107, 116, 0.4);
}

body.dark-only .status-history-item-failed > .status-history-content:hover {
    border-color: rgba(220, 107, 116, 0.6);
}

/* Billing Setup: groups the packaging fee cards under their own heading. */
.billing-conditions-group-title {
    margin: 1.25rem 0 0.5rem;
    font-weight: 600;
    opacity: 0.75;
}

/* ── Public post-delivery rating page (resources/views/public/delivery-rating.blade.php) ──
   Standalone page: the customer is not logged in and no admin layout is loaded, so the
   few rules the page needs live here rather than in the blade (no <style> in blades). */
.delivery-rating-page {
    margin: 0;
    padding: 24px 16px;
    background: #f5f6f8;
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    color: #23262f;
}

.delivery-rating-card {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.delivery-rating-title {
    margin: 0 0 4px;
    font-size: 20px;
}

.delivery-rating-order {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 14px;
}

.delivery-rating-stars {
    display: flex;
    gap: 8px;
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    flex-wrap: wrap;
}

.delivery-rating-legend {
    font-size: 13px;
    color: #6b7280;
    padding: 0;
    margin-bottom: 8px;
}

.delivery-rating-star {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
}

.delivery-rating-star-value {
    font-weight: 600;
}

.delivery-rating-comment-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.delivery-rating-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 16px;
}

.delivery-rating-submit {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.delivery-rating-errors {
    margin: 0 0 16px;
    padding-inline-start: 20px;
    color: #b91c1c;
    font-size: 14px;
}

.delivery-rating-thanks {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #166534;
}

.delivery-rating-score,
.delivery-rating-comment {
    margin: 0 0 4px;
    font-size: 14px;
    color: #374151;
}

/* Packaging materials: keep the inline quantity / low-stock inputs narrow so the
   adjust column does not push the table into a horizontal scroll. */
.packaging-qty-input {
    max-width: 96px;
}

/* ── PR creator profile: Overview tab ──
   Markup in Modules/Affiliate/resources/views/pr/creator-profile.blade.php and the
   row mode of Modules/Affiliate/resources/views/partials/applicant-details.blade.php.
   Everything is scoped to .creator-overview so the partial's other surfaces are
   untouched until phase 2 of creator-overview-tab-cleanup promotes the badge row.
   Flex and grid follow dir=, so the Arabic layout needs no mirrored rules. */
.creator-overview__avatar.vetting-avatar {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

.creator-overview__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.creator-overview .applicant-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-bottom: .875rem;
}

.creator-overview .applicant-badges__incomplete {
    cursor: pointer;
}

/* Labels sized to the longest label, values right beside them, instead of the
   3/9 column split that left every value a third of the page away. Shared with
   the Vetting & Fraud tab rather than duplicated. */
.creator-overview__details,
.creator-vetting__details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2.5rem;
    row-gap: .5rem;
}

.creator-overview__details dt,
.creator-vetting__details dt {
    font-weight: 600;
    margin: 0;
}

.creator-overview__details dd,
.creator-vetting__details dd {
    margin: 0;
}

.creator-overview__copy {
    color: var(--bs-secondary-color);
    line-height: 1;
}

.creator-overview__copy:hover,
.creator-overview__copy:focus-visible {
    color: var(--bs-primary);
}

@media (max-width: 575.98px) {
    .creator-overview__details,
    .creator-vetting__details {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .creator-overview__details dd,
    .creator-vetting__details dd {
        margin-bottom: .5rem;
    }
}

/* Vetting & Fraud checklist: one icon column, so the criterion names line up
   whatever glyph precedes them (tick, cross, flag and dash differ in width). */
.creator-vetting__checks > li > i:first-child {
    flex: 0 0 1em;
    text-align: center;
}

/* The record-as-recorded holds JSON blobs: they wrap, they do not stretch the grid. */
.creator-vetting__details--raw dd {
    overflow-wrap: anywhere;
}

body.dark-only .creator-overview__avatar.vetting-avatar--blank {
    background: rgba(255, 255, 255, .08);
    color: #adb5bd;
}

/* The missing-fields popover (customClass on the badge; Bootstrap mounts it on <body>,
   outside .creator-overview). One dash per field, whatever the theme does to lists. */
.creator-missing-popover ul {
    list-style: none;
    padding-inline-start: 0;
}

.creator-missing-popover li::before {
    content: "– ";
}

/* Its close X. The popover already hides when the badge loses focus, so a click on
   the X (or anywhere else) closes it; this only sizes the X and lights it in dark mode. */
.creator-missing-popover .btn-close {
    font-size: .625rem;
    flex-shrink: 0;
}

body.dark-only .creator-missing-popover .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Page header `avatar` slot. Here rather than pr-tokens.css, which is duplicated
   under Modules/ — and .vetting-avatar, which this sizes, already lives here. */
.pr-page-header__identity {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pr-page-header__avatar.vetting-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

body.dark-only .pr-page-header__avatar.vetting-avatar--blank {
    background: rgba(255, 255, 255, .08);
    color: #adb5bd;
}

/* Find-creator box: its <label> sat shorter than the input and Search button, so its
   bottom edge broke the line. The cause is somewhere in the minified theme, so this
   forces the height instead of removing it. */
.pr-page-header__actions .input-group > .input-group-text {
    align-self: stretch;
    margin-bottom: 0;
}

/* Billing setup, carrier picker: keeps the select from stretching across the whole card. */
.billing-carrier-picker .billing-carrier-select {
    max-width: 480px;
}

/* WMS scan screens: the current product's scan count, big, under the scan field
   (wms/components/scan-progress.blade.php), so a product needed several times shows how
   many are already in. */
.scan-progress {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
    padding: .75rem 1rem;
}

.scan-progress.is-done {
    border-color: var(--bs-success, #198754);
}

.scan-progress__count {
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
}

.scan-progress__bar {
    height: 14px;
}

/* A scan that landed pulses the count once. */
.scan-progress__count.is-bump {
    animation: pick-count-bump .35s ease-out;
}

@keyframes pick-count-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .scan-progress__count.is-bump {
        animation: none;
    }
}