/* =========================================
   1. Modern UI Overrides (Tailwind Aesthetic)
   ========================================= */
html, body, #app {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    background-color: var(--ui-bg, #f1f5f9) !important;
    color: #0f172a;
    min-height: 100%;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --ui-bg: #f1f5f9;
    --ui-surface: #ffffff;
    --ui-border: #e2e8f0;
    --ui-text: #0f172a;
    --ui-text-soft: #64748b;
    --ui-primary: #2563eb;
    --ui-primary-hover: #1d4ed8;
    --ui-primary-soft: #dbeafe;
    --ui-dark-surface: #111827;
    --ui-dark-surface-2: #1f2937;
    --ui-dark-text: #f8fafc;
    --ui-dark-muted: #94a3b8;
    --ui-accent-rcf: #0284c7;
    --ui-accent-str: #4f46e5;
    --ui-accent-gd: #059669;
    --ui-accent-sti: #d97706;
    --ui-accent-dp: #7c3aed;
    --ui-accent-settings: #475569;
    --ui-accent-sync: #0891b2;
    --ui-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --ui-shadow-md: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    --ui-shadow-lg: 0 20px 40px -24px rgba(15, 23, 42, 0.35);
    --ui-radius-sm: 0.5rem;
    --ui-radius-md: 0.75rem;
    --ui-radius-lg: 1rem;
    --ui-radius-xl: 1.25rem;
}

h1, h2, h3, h4, h5 {
    color: #111827;
    letter-spacing: -0.025em;
    font-weight: 700;
}

h1 {
    font-size: clamp(1.3rem, 1.15rem + 0.9vw, 1.95rem);
}

h2 {
    font-size: clamp(1.15rem, 1.05rem + 0.65vw, 1.45rem);
}

p, .text-muted {
    color: var(--ui-text-soft) !important;
}

/* Keep text readable on dark surfaces/cards.
   Note: .bg-warning / .card-header.bg-warning excluded — yellow needs dark text. */
.bg-primary, .bg-secondary, .bg-dark, .bg-success, .bg-danger, .bg-info,
.card-header.bg-primary, .card-header.bg-secondary, .card-header.bg-dark, .card-header.bg-success, .card-header.bg-danger, .card-header.bg-info,
.card-header[style*="linear-gradient"], .card-header[style*="background: #"], .card-header[style*="background-color"] {
    color: var(--ui-dark-text) !important;
}

.bg-primary *, .bg-secondary *, .bg-dark *, .bg-success *, .bg-danger *, .bg-info *,
.card-header.bg-primary *, .card-header.bg-secondary *, .card-header.bg-dark *, .card-header.bg-success *, .card-header.bg-danger *, .card-header.bg-info *,
.card-header[style*="linear-gradient"] *, .card-header[style*="background: #"] *, .card-header[style*="background-color"] * {
    color: inherit !important;
}

.bg-primary .text-muted, .bg-secondary .text-muted, .bg-dark .text-muted, .bg-success .text-muted, .bg-danger .text-muted, .bg-info .text-muted,
.card-header.bg-primary .text-muted, .card-header.bg-secondary .text-muted, .card-header.bg-dark .text-muted, .card-header.bg-success .text-muted, .card-header.bg-danger .text-muted, .card-header.bg-info .text-muted,
.card-header[style*="linear-gradient"] .text-muted, .card-header[style*="background: #"] .text-muted, .card-header[style*="background-color"] .text-muted {
    color: var(--ui-dark-muted) !important;
}

/* Warning yellow is a light surface — keep body/header text dark for contrast */
.bg-warning,
.bg-warning-subtle,
.text-bg-warning,
.card-header.bg-warning {
    color: var(--ui-text) !important;
}

.bg-warning *,
.bg-warning-subtle *,
.card-header.bg-warning * {
    color: inherit !important;
}

.bg-warning .text-muted,
.bg-warning-subtle .text-muted,
.card-header.bg-warning .text-muted {
    color: var(--ui-text-soft) !important;
}

/* Pending badge on warning headers stays dark-on-yellow (Bootstrap text-dark) */
.card-header.bg-warning .badge.bg-warning {
    color: #212529 !important;
}

.card-header.text-white .badge.bg-light,
.card-header.bg-primary .badge.bg-light,
.card-header[style*="linear-gradient"] .badge.bg-light {
    background: rgba(248, 250, 252, 0.2) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(248, 250, 252, 0.35);
}

.card-header.text-white .btn-outline-light,
.card-header.bg-primary .btn-outline-light,
.card-header[style*="linear-gradient"] .btn-outline-light {
    color: #f8fafc !important;
    border-color: rgba(248, 250, 252, 0.55) !important;
    background-color: transparent !important;
}

.card-header.text-white .btn-outline-light:hover,
.card-header.bg-primary .btn-outline-light:hover,
.card-header[style*="linear-gradient"] .btn-outline-light:hover {
    color: #0f172a !important;
    background-color: #f8fafc !important;
    border-color: #f8fafc !important;
}

/* Placer / list-filter dropdowns on gradient headers: global * { color: inherit } makes select text invisible on white bg */
.card-header.text-white select.rcf-supervisor-placer-select,
.card-header[style*="linear-gradient"] select.rcf-supervisor-placer-select,
.card-header[style*="background: #"] select.rcf-supervisor-placer-select,
.card-header[style*="background-color"] select.rcf-supervisor-placer-select,
.card-header.text-white select.str-supervisor-placer-select,
.card-header[style*="linear-gradient"] select.str-supervisor-placer-select,
.card-header[style*="background: #"] select.str-supervisor-placer-select,
.card-header[style*="background-color"] select.str-supervisor-placer-select {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

.card-header.text-white select.rcf-supervisor-placer-select option,
.card-header[style*="linear-gradient"] select.rcf-supervisor-placer-select option,
.card-header[style*="background: #"] select.rcf-supervisor-placer-select option,
.card-header[style*="background-color"] select.rcf-supervisor-placer-select option,
.card-header.text-white select.str-supervisor-placer-select option,
.card-header[style*="linear-gradient"] select.str-supervisor-placer-select option,
.card-header[style*="background: #"] select.str-supervisor-placer-select option,
.card-header[style*="background-color"] select.str-supervisor-placer-select option {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

/* Inputs in gradient/tint headers: descendant * { inherit } pulls light-on-dark text color onto white fields */
.card-header[style*="linear-gradient"] .form-control,
.card-header[style*="background: #"] .form-control,
.card-header[style*="background-color"] .form-control {
    color: #0f172a !important;
    background-color: #ffffff !important;
}

.card-header[style*="linear-gradient"] .form-control::placeholder,
.card-header[style*="background: #"] .form-control::placeholder,
.card-header[style*="background-color"] .form-control::placeholder {
    color: #64748b !important;
    opacity: 1;
}

/* Scan log / secondary notes: default .text-muted can be too faint on striped rows */
.scan-log-faint-note {
    color: #475569 !important;
    font-style: normal;
}

.card-header[style*="linear-gradient"] .input-group-text,
.card-header[style*="background: #"] .input-group-text,
.card-header[style*="background-color"] .input-group-text {
    color: #64748b !important;
}

.card-header[style*="linear-gradient"] .input-group-text .text-muted,
.card-header[style*="background: #"] .input-group-text .text-muted,
.card-header[style*="background-color"] .input-group-text .text-muted {
    color: #64748b !important;
}

.content > .container-fluid,
.content > .container {
    background: transparent;
    max-width: 100%;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
    border: 1px solid var(--ui-border);
    border-radius: 0.9rem;
    box-shadow: 0 10px 34px -24px rgba(15, 23, 42, 0.32);
}

.card-header,
.modal-header,
.offcanvas-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--ui-border);
}

.card-footer,
.modal-footer,
.offcanvas-footer {
    background: #f8fafc;
    border-top: 1px solid var(--ui-border);
}

/* Upgrade existing card-custom classes */
.card-custom {
    background-color: #ffffff;
    border-radius: 0.95rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, 0.45), 0 5px 16px -12px rgba(15, 23, 42, 0.2);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.card-custom:hover {
    box-shadow: 0 16px 34px -24px rgba(15, 23, 42, 0.55), 0 8px 20px -16px rgba(15, 23, 42, 0.3);
    transform: translateY(-1px);
}

/* Upgrade existing table-custom classes */
.table-custom {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
}

.table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-width: 1px;
}

.table tbody tr:hover {
    background-color: #f8fafc;
}

    .table-custom thead th {
        background-color: #f9fafb;
        color: #6b7280;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .table-custom tbody td {
        padding: 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #e5e7eb;
        color: #374151;
        font-size: 0.875rem;
    }

/* Upgrade Form Controls */
.form-control, .form-select {
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    min-height: 2.65rem;
}

.form-label {
    color: #475569;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.input-group-text {
    border-radius: 0.65rem;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
}

    .form-control:focus, .form-select:focus {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important;
    }

/* Upgrade Buttons */
.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    border-color: #2563eb !important;
    border-radius: 0.65rem;
    box-shadow: 0 8px 20px -12px rgba(37, 99, 235, 0.55);
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    border-color: #1d4ed8 !important;
}

.btn-outline-primary {
    border-radius: 0.65rem;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.btn-outline-primary:hover {
    background-color: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
    border-radius: 0.65rem;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
}

.pagination .page-link {
    border-radius: 0.55rem;
    border-color: #cbd5e1;
    color: #334155;
}

.pagination .page-item.active .page-link {
    background-color: var(--ui-primary);
    border-color: var(--ui-primary);
}

/* =========================================
   2. Your Original Blazor System Styles (Preserved)
   ========================================= */
a, .btn-link {
    color: #2563eb;
}

.btn-primary {
    color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1rem;
}

.section-panel,
.panel {
    border: 1px solid var(--ui-border);
    border-radius: 0.9rem;
    background: var(--ui-surface);
    box-shadow: 0 10px 26px -24px rgba(15, 23, 42, 0.3);
}

/* =========================================
   3. Razor Pages Global UI Polish
   ========================================= */
.content .container-fluid.py-4:not(.layout-designer) {
    background: transparent;
}

.content .container-fluid.py-4:not(.layout-designer):not(.wms-home-dashboard) > .d-flex.justify-content-between.align-items-center.mb-4,
.content .container-fluid.py-4:not(.layout-designer):not(.wms-home-dashboard) > .d-flex.justify-content-between.align-items-center.mb-3 {
    padding: 0.9rem 1.05rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    background: #ffffff;
    box-shadow: var(--ui-shadow-sm);
}

.content .container-fluid.py-4:not(.layout-designer) .card.shadow-sm {
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    box-shadow: 0 16px 32px -26px rgba(15, 23, 42, 0.35);
}

.content .ui-page .card.shadow-sm {
    position: relative;
    overflow: hidden;
}

/* Filter strips must overflow + stack above the results card that follows in the DOM. */
.content .ui-page .card.shadow-sm.ui-filter-card {
    overflow: visible !important;
    z-index: 50;
}

.content .ui-page .card.shadow-sm.ui-filter-card .card-body,
.content .ui-page .card.shadow-sm.ui-filter-card .row,
.content .ui-page .card.shadow-sm.ui-filter-card [class*="col-"] {
    overflow: visible !important;
}

.content .ui-page.ui-filter-dropdown-open .card.shadow-sm.ui-filter-card {
    z-index: 4000 !important;
}

.content .ui-page.ui-filter-dropdown-open > .card.shadow-sm:not(.ui-filter-card) {
    z-index: 1;
}

.content .ui-page.ui-filter-dropdown-open .ui-card:hover {
    transform: none;
}

.content .ui-page .card.shadow-sm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #0284c7, #6366f1);
    opacity: 0.5;
}

.ui-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ui-card {
    border: 1px solid #e2e8f0;
    border-radius: 0.95rem;
    box-shadow: 0 16px 32px -26px rgba(15, 23, 42, 0.35);
}

.ui-filter-card .card-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* STR / RCF — dark summary strip (detail header, placement scan, list tables) */
.ui-txn-summary-header.card-header {
    background-color: #2c343f;
    color: #fff;
    border-bottom: none;
}

.ui-txn-summary-header.card-header h1,
.ui-txn-summary-header.card-header h2,
.ui-txn-summary-header.card-header h3,
.ui-txn-summary-header.card-header h4,
.ui-txn-summary-header.card-header h5,
.ui-txn-summary-header.card-header h6 {
    color: inherit;
}

.content .ui-page .card.shadow-sm.picker-placer-editor-card,
.content .ui-page .card.shadow-sm.picker-placer-editor-card .card-body {
    overflow: visible;
}

.content .ui-page .card.shadow-sm.picker-placer-editor-card {
    z-index: 100;
}

.picker-placer-user-search {
    z-index: 30;
}

.picker-placer-user-results {
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 2000;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
}

.content .ui-page .card.shadow-sm.rcf-planning-card,
.content .ui-page .card.shadow-sm.rcf-planning-card .card-body,
.content .ui-page .card.shadow-sm.str-planning-card,
.content .ui-page .card.shadow-sm.str-planning-card .card-body {
    overflow: visible;
}

.content .ui-page .card.shadow-sm.rcf-planning-card,
.content .ui-page .card.shadow-sm.str-planning-card {
    z-index: 90;
}

/* STI / RCF Return pick-plan: card caps height; desk pane fixed; lower section scrolls */
.content .ui-page .pick-planning-stack {
    z-index: 90;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 10rem);
    min-height: 0;
}

.content .ui-page .pick-planning-stack > .card-header {
    flex-shrink: 0;
}

.content .ui-page .pick-planning-stack > .card-body.pick-planning-card-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Desk + picker above scroll only; no nested-box chrome so it reads as one card body */
.content .ui-page .pick-planning-stack .pick-planning-desk-pane {
    position: relative;
}

/* Picker dropdown above scroll content when desk/pickers sit in the planning column */
.content .ui-page .pick-planning-stack .pick-planning-inline-desk {
    position: relative;
    z-index: 1080;
}

.content .ui-page .pick-planning-stack .pick-planning-scroll-area {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* STI batch plan — top row (STI + carton clusters) + bottom row (pick planning) */
.sti-batch-plan-page .sti-batch-layout-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: calc(100vh - 3.5rem);
    height: auto;
}

.sti-batch-plan-page .sti-batch-top-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    flex: 0 0 auto;
    min-height: max(44vh, 420px);
    min-width: 0;
}

.sti-batch-plan-page .sti-batch-pick-row {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: max(50vh, 560px);
    min-width: 0;
}

.sti-batch-plan-page .sti-batch-sti-pane,
.sti-batch-plan-page .sti-batch-cluster-pane {
    flex: 1 1 50%;
    min-width: 0;
    max-width: none;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.sti-batch-plan-page .sti-batch-sti-pane {
    transition: flex-basis 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.sti-batch-plan-page .sti-batch-pick-pane {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
}

.sti-batch-plan-page .sti-batch-sti-pane .card,
.sti-batch-plan-page .sti-batch-cluster-pane .card,
.sti-batch-plan-page .sti-batch-pick-pane .card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1 1 auto;
}

.sti-batch-plan-page .sti-batch-sti-pane .card-body,
.sti-batch-plan-page .sti-batch-cluster-pane .card-body,
.sti-batch-plan-page .sti-batch-pick-pane .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sti-batch-plan-page.sti-batch-sti-collapsed .sti-batch-sti-pane,
.sti-batch-plan-page .sti-batch-top-row.sti-batch-sti-collapsed .sti-batch-sti-pane {
    display: none;
}

.sti-batch-plan-page .sti-batch-top-row.sti-batch-sti-collapsed .sti-batch-cluster-pane {
    flex: 1 1 100%;
}

.sti-batch-plan-page .sti-batch-pick-row.sti-batch-pick-collapsed .sti-batch-pick-pane {
    display: none;
}

.sti-batch-plan-page .sti-batch-sti-table-wrap,
.sti-batch-plan-page .sti-batch-pick-body,
.sti-batch-plan-page .sti-batch-cluster-body {
    flex: 1 1 auto;
    min-height: 22rem;
    max-height: none;
    overflow-y: auto;
}

.sti-batch-plan-page .sti-batch-carton-cluster {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.sti-batch-plan-page .sti-batch-carton-cluster.is-complete .sti-batch-carton-cluster-header {
    background: rgba(25, 135, 84, 0.06);
}

.sti-batch-plan-page .sti-batch-carton-cluster-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: none;
    background: #f8f9fa;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sti-batch-plan-page .sti-batch-carton-cluster-header:hover {
    background: #eef2f6;
}

.sti-batch-plan-page .sti-batch-shop-search {
    width: 11rem;
    max-width: 100%;
}

.sti-batch-plan-page .sti-batch-sti-search {
    width: 100%;
}

.sti-batch-plan-page .sti-batch-col-header {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
}

.sti-batch-plan-page .sti-batch-col-sort {
    cursor: pointer;
    user-select: none;
}

.sti-batch-plan-page .sti-batch-col-sort:hover {
    color: #0d6efd;
}

.sti-batch-plan-page .sti-batch-col-filter-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 11rem;
    max-width: 16rem;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: 0.15rem;
}

.sti-batch-plan-page thead th {
    vertical-align: middle;
    position: relative;
}

.sti-batch-plan-page .sti-batch-matrix-table th,
.sti-batch-plan-page .sti-batch-matrix-table td {
    font-size: 0.75rem;
    vertical-align: middle;
}

.sti-batch-plan-page .sti-batch-matrix-cell {
    width: 2.5rem;
}

.sti-batch-plan-page .sti-batch-panel-toggle {
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.sti-batch-plan-page .sti-batch-panel-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 2.25rem;
    padding: 0.75rem 0.35rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #fff;
    color: #475569;
    box-shadow: var(--ui-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.06));
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.sti-batch-plan-page .sti-batch-panel-rail:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.sti-batch-plan-page .sti-batch-rail-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sti-batch-plan-page .sti-batch-pick-rail-horizontal {
    width: 100%;
    flex-direction: row;
    padding: 0.5rem 0.75rem;
    justify-content: center;
    gap: 0.5rem;
}

.sti-batch-plan-page .sti-batch-rail-label-horizontal {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .sti-batch-plan-page .sti-batch-layout-shell {
        height: auto;
        min-height: 0;
    }

    .sti-batch-plan-page .sti-batch-top-row {
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .sti-batch-plan-page .sti-batch-pick-row {
        flex: 1 1 auto;
        min-height: 0;
    }

    .sti-batch-plan-page .sti-batch-sti-pane,
    .sti-batch-plan-page .sti-batch-cluster-pane,
    .sti-batch-plan-page .sti-batch-pick-pane {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    .sti-batch-plan-page .sti-batch-sti-table-wrap,
    .sti-batch-plan-page .sti-batch-pick-body,
    .sti-batch-plan-page .sti-batch-cluster-body {
        max-height: none;
        min-height: 12rem;
    }

    .sti-batch-plan-page .sti-batch-panel-rail {
        width: 100%;
        flex-direction: row;
        padding: 0.5rem 0.75rem;
        justify-content: flex-start;
    }

    .sti-batch-plan-page .sti-batch-rail-label {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 0.75rem;
    }
}

/* STI Batch Pick — layout + project token highlights */
.sti-batch-pick-scan .sti-batch-pick-queue {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-active {
    background: var(--ui-primary-soft);
    border-left: 4px solid var(--ui-primary);
}

.sti-batch-pick-scan .sti-batch-pick-bin-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: none;
    background: #f8f9fa;
    text-align: left;
    color: var(--ui-text);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sti-batch-pick-scan .sti-batch-pick-bin-header:hover {
    background: #eef2f6;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-active .sti-batch-pick-bin-header {
    background: rgba(37, 99, 235, 0.1);
    font-weight: 600;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-open > .sti-batch-pick-bin-header {
    background: rgba(37, 99, 235, 0.12);
    border-bottom: 1px solid rgba(37, 99, 235, 0.25);
    box-shadow: inset 3px 0 0 var(--ui-primary, #2563eb);
    font-weight: 600;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-open.is-active > .sti-batch-pick-bin-header {
    background: rgba(37, 99, 235, 0.18);
}

.sti-batch-pick-scan .sti-batch-pick-bin-body {
    padding: 0.65rem 0.85rem 0.85rem 1rem;
    background: #fafbfc;
}

.sti-batch-pick-scan .sti-batch-pick-carton-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    margin-bottom: 0.5rem;
    background: #eef2f6;
    border: 1px solid #dde3ea;
    border-radius: 0.45rem;
}

.sti-batch-pick-scan .sti-batch-pick-carton-strip.is-done {
    opacity: 0.8;
}

.sti-batch-pick-scan .sti-batch-pick-carton-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
}

.sti-batch-pick-scan .sti-batch-pick-carton-barcode {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    word-break: break-all;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-done {
    opacity: 0.72;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-done .sti-batch-pick-bin-header {
    background: #f1f3f5;
}

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-done.is-open > .sti-batch-pick-bin-header {
    background: #e9ecef;
    box-shadow: inset 3px 0 0 #94a3b8;
    border-bottom-color: #ced4da;
}

.sti-batch-pick-scan .sti-batch-pick-shop-done {
    color: var(--ui-text-muted, #6c757d);
    background: #f8f9fa;
}

.sti-batch-pick-scan .sti-batch-pick-shop-done .fw-semibold {
    font-weight: 500 !important;
}

.sti-batch-pick-scan .sti-batch-pick-scan-input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.2);
}

.sti-batch-pick-scan .scan-queue-panel {
    max-height: 12rem;
    overflow-y: auto;
}

.sti-batch-pick-scan .scan-queue-item {
    font-size: 0.85rem;
}

.sti-batch-pick-scan .sti-batch-pick-desk-stat {
    background: #f8f9fa;
    border: 1px solid var(--ui-border, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.35rem 0.5rem;
    text-align: center;
}

.sti-batch-pick-scan .sti-batch-pick-desk-stat-label {
    font-size: 0.7rem;
    color: var(--ui-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sti-batch-pick-scan .sti-batch-pick-desk-stat-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.sti-batch-pick-scan .sti-batch-pick-desk-card .table-responsive {
    max-height: 12rem;
    overflow-y: auto;
}

.rcf-return-pick-scan .rcf-return-pick-desk-stat {
    background: #f8f9fa;
    border: 1px solid var(--ui-border, #dee2e6);
    border-radius: 0.375rem;
    padding: 0.35rem 0.5rem;
    text-align: center;
}

.rcf-return-pick-scan .rcf-return-pick-desk-stat-label {
    font-size: 0.7rem;
    color: var(--ui-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.rcf-return-pick-scan .rcf-return-pick-desk-stat-value {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.rcf-return-pick-scan .rcf-return-pick-desk-card .table-responsive {
    max-height: 12rem;
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .sti-batch-pick-scan {
        overflow-x: hidden;
        max-width: 100%;
    }

    .sti-batch-pick-scan .sti-batch-pick-layout {
        display: flex;
        flex-direction: column;
        gap: var(--bs-gutter-y, 1rem);
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        width: 100%;
    }

    .sti-batch-pick-scan .sti-batch-pick-left,
    .sti-batch-pick-scan .sti-batch-pick-queue-col {
        display: contents;
    }

    .sti-batch-pick-scan .sti-batch-pick-scan-section,
    .sti-batch-pick-scan .sti-batch-pick-queue-section,
    .sti-batch-pick-scan .sti-batch-pick-recent-section,
    .sti-batch-pick-scan .sti-batch-pick-desk-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sti-batch-pick-scan .sti-batch-pick-scan-section {
        order: 1;
    }

    .sti-batch-pick-scan .sti-batch-pick-queue-section {
        order: 2;
    }

    .sti-batch-pick-scan .sti-batch-pick-recent-section {
        order: 3;
    }

    .sti-batch-pick-scan .sti-batch-pick-desk-section {
        order: 4;
    }

    .sti-batch-pick-scan .sti-batch-pick-queue-section .card-header {
        flex-wrap: wrap;
    }

    .sti-batch-pick-scan .sti-batch-pick-bin-header {
        flex-wrap: wrap;
    }

    .sti-batch-pick-scan .sti-batch-pick-bin-body {
        overflow-x: hidden;
    }

    .sti-batch-pick-scan .sti-batch-pick-shop-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .sti-batch-pick-scan .sti-batch-pick-shop-card {
        padding: 0.5rem 0.65rem;
        border: 1px solid var(--ui-border, #dee2e6);
        border-radius: 0.5rem;
        background: #fff;
        min-width: 0;
    }

    .sti-batch-pick-scan .sti-batch-pick-shop-card.is-next {
        background: #fff3cd;
        border-color: #ffecb5;
    }

    .sti-batch-pick-scan .sti-batch-pick-shop-card.is-done {
        opacity: 0.72;
        background: #f8f9fa;
    }

    .sti-batch-pick-scan .sti-batch-pick-shop-qtys {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.35rem;
        color: var(--ui-text, #212529);
    }
}

.sti-desk-scan-page .sti-desk-scan-input:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.2);
}

.sti-desk-scan-page .scan-queue-panel {
    max-height: 12rem;
    overflow-y: auto;
}

.sti-desk-scan-page .scan-queue-item {
    font-size: 0.85rem;
}

.sti-workflow-row-expanded > td {
    border-bottom: 0;
}

.sti-workflow-expand-row > td {
    background: #f8fafc;
}

.sti-workflow-expand-panel {
    border-top: 1px solid var(--ui-border, #dee2e6);
    background: #f8fafc;
}

.sti-workflow-expand-lines thead th {
    font-weight: 600;
    white-space: nowrap;
    padding-top: 0.5rem;
    padding-bottom: 0.35rem;
}

.sti-workflow-expand-lines tbody td {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    vertical-align: middle;
}

.sti-workflow-expand-toggle {
    line-height: 1;
}

.rcf-placer-search,
.str-placer-search {
    z-index: 40;
}

.rcf-placer-results,
.str-placer-results {
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 2100;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

/* Searchable select (Select2-style) */
.searchable-select {
    z-index: 1;
}

.searchable-select:has(.searchable-select-dropdown) {
    z-index: 1050;
}

.warehouse-location-select.searchable-select:has(.searchable-select-dropdown) {
    z-index: 3001;
}

.warehouse-location-select.searchable-select.is-open {
    z-index: 3001;
}

.warehouse-location-select .searchable-select-dropdown {
    z-index: 3002;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.28);
}

.warehouse-location-select .searchable-select-chevron {
    pointer-events: auto;
    cursor: pointer;
}

.content .ui-page .card.shadow-sm.warehouse-location-card {
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.content .ui-page .card.shadow-sm.warehouse-location-card .card-body,
.content .ui-page .card.shadow-sm.warehouse-location-card .row {
    overflow: visible !important;
}

.content .ui-page .warehouse-location-field {
    position: relative;
    z-index: 1;
}

.content .ui-page.warehouse-location-dropdown-open .card.shadow-sm.warehouse-location-card,
.content .ui-page .card.shadow-sm.warehouse-location-card:has(.warehouse-location-select.is-open) {
    z-index: 3000 !important;
}

.content .ui-page.warehouse-location-dropdown-open .warehouse-location-field,
.content .ui-page .card.shadow-sm.warehouse-location-card:has(.warehouse-location-select.is-open) .warehouse-location-field {
    z-index: 3001;
}

.searchable-select-input.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.searchable-select-chevron {
    pointer-events: none;
}

.searchable-select-dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    z-index: 1060;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
}

.searchable-select-option {
    white-space: normal;
    text-align: left;
}

.searchable-select-option.active {
    background-color: #0d6efd;
    color: #fff;
}

.searchable-select-option.active .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ui-tab-strip {
    margin-bottom: 1rem;
}

.ui-grid {
    align-items: stretch;
}

.ui-action-row {
    padding-top: 0.1rem;
}

.ui-table-wrap {
    border-radius: 0.8rem;
}

/* STI Issue View (/sti-issues/view/) — section table scrollbars */
.sti-issue-view .sti-section-toggle {
    line-height: 1.1;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sti-issue-view .sti-section-toggle .bi {
    font-size: 1rem;
}

.sti-issue-view .table-responsive.sti-section-scroll {
    max-height: 22rem;
    overflow-y: auto !important;
    overflow-x: auto;
}

.sti-issue-view .sti-section-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f8f9fa;
}

.ui-list-view-toggle .btn {
    min-width: 5.5rem;
}

.ui-list-record-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
}

.ui-list-record-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    padding: 1rem;
    box-shadow: var(--ui-shadow-sm);
}

.ui-list-record-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ui-list-record-card-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
}

.ui-list-record-card-field--wide {
    grid-column: 1 / -1;
}

.ui-list-record-card-field-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ui-text-soft);
    margin-bottom: 0.15rem;
}

.ui-list-record-card-actions {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--ui-border);
}

@media (min-width: 576px) {
    .ui-list-record-card-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================
   4. Effects & Motion
   ========================================= */
@keyframes uiFadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes uiPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.22); }
    50% { box-shadow: 0 0 0 5px rgba(79, 70, 229, 0.07); }
}

.ui-page {
    animation: uiFadeInUp 260ms ease-out;
}

.ui-card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.ui-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -26px rgba(15, 23, 42, 0.45);
    border-color: #cbd5e1;
}

.content .ui-page .row > [class*="col-"] {
    animation: uiFadeInUp 240ms ease-out both;
}

.content .ui-page .row > [class*="col-"]:nth-child(2) { animation-delay: 35ms; }
.content .ui-page .row > [class*="col-"]:nth-child(3) { animation-delay: 70ms; }
.content .ui-page .row > [class*="col-"]:nth-child(4) { animation-delay: 105ms; }

.content .ui-page .table tbody tr {
    border-left: 2px solid transparent;
}

.content .ui-page .table tbody tr:hover {
    border-left-color: #a5b4fc;
}

.content .ui-page .alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

.content .ui-page .alert-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.content .ui-page .alert-success {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}

.content .ui-page .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Shared component-level polish */
.ui-component .card.shadow-sm {
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.35);
}

.ui-component .table-responsive {
    border-radius: 0.75rem;
}

.ui-component .modal-content {
    border-radius: 0.95rem;
}

.btn,
.nav-link,
.form-control,
.form-select,
.table tbody tr {
    transition: all 160ms ease-in-out;
}

.btn-primary:focus-visible,
.btn-outline-primary:focus-visible {
    animation: uiPulseGlow 1.1s ease-in-out 1;
}

.table tbody tr:hover td {
    background-color: #f8fafc;
}

.nav.nav-tabs .nav-link:hover,
.nav.nav-pills .nav-link:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .ui-page,
    .ui-card,
    .btn,
    .nav-link,
    .form-control,
    .form-select,
    .table tbody tr {
        animation: none !important;
        transition: none !important;
    }

    .content .ui-page .row > [class*="col-"] {
        animation: none !important;
    }
}

.content .container-fluid.py-4:not(.layout-designer) .card-header {
    padding: 0.9rem 1rem;
}

.content .container-fluid.py-4:not(.layout-designer) .card-header.bg-primary,
.content .container-fluid.py-4:not(.layout-designer) .card-header.text-white {
    background: linear-gradient(90deg, #1e293b, #334155) !important;
    color: #f8fafc !important;
}

.content .container-fluid.py-4:not(.layout-designer) .card-header h5,
.content .container-fluid.py-4:not(.layout-designer) .card-header .card-title {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.content .container-fluid.py-4:not(.layout-designer) .card-body {
    padding: 1rem;
}

.content .container-fluid.py-4:not(.layout-designer) .row.g-3.align-items-end,
.content .container-fluid.py-4:not(.layout-designer) .row.g-3,
.content .container-fluid.py-4:not(.layout-designer) .row.g-2 {
    --bs-gutter-y: 0.9rem;
}

.content .container-fluid.py-4:not(.layout-designer) .nav.nav-tabs,
.content .container-fluid.py-4:not(.layout-designer) .nav.nav-pills {
    background: #f1f5f9;
    border-radius: 0.8rem;
    padding: 0.3rem;
    gap: 0.4rem;
}

.content .container-fluid.py-4:not(.layout-designer) .nav.nav-tabs .nav-link,
.content .container-fluid.py-4:not(.layout-designer) .nav.nav-pills .nav-link {
    border-radius: 0.6rem;
    border: 1px solid transparent;
    color: #334155;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
}

.content .container-fluid.py-4:not(.layout-designer) .nav.nav-tabs .nav-link.active,
.content .container-fluid.py-4:not(.layout-designer) .nav.nav-pills .nav-link.active {
    background: #ffffff;
    color: #3730a3;
    border-color: #c7d2fe;
    box-shadow: 0 8px 18px -16px rgba(79, 70, 229, 0.9);
}

.content .container-fluid.py-4:not(.layout-designer) .table-responsive {
    border-radius: 0.8rem;
}

.content .container-fluid.py-4:not(.layout-designer) .table td,
.content .container-fluid.py-4:not(.layout-designer) .table th {
    vertical-align: middle;
}

.content .container-fluid.py-4:not(.layout-designer) .btn-group > .btn {
    border-radius: 0.55rem !important;
}

.content .container-fluid.py-4:not(.layout-designer) .alert {
    border: 1px solid #dbeafe;
    border-radius: 0.75rem;
    box-shadow: 0 10px 20px -20px rgba(30, 64, 175, 0.45);
}

.content .container-fluid.py-4:not(.layout-designer) .modal.show.d-block {
    backdrop-filter: blur(3px);
}

.content .container-fluid.py-4:not(.layout-designer) .modal-content {
    border-radius: 0.95rem;
}

.content .container-fluid.py-4:not(.layout-designer) .badge.bg-info {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.content .container-fluid.py-4:not(.layout-designer) .badge.bg-success-subtle {
    border: 1px solid #bbf7d0;
}

.content .container-fluid.py-4:not(.layout-designer) .badge.bg-warning-subtle {
    border: 1px solid #fde68a;
}

.content .container-fluid.py-4:not(.layout-designer) .badge.bg-danger-subtle {
    border: 1px solid #fecaca;
}

.content .container-fluid.py-4:not(.layout-designer) [style*="max-height: 200px; overflow-y: auto;"] {
    border: 1px solid #dbe3ef !important;
    border-radius: 0.65rem !important;
    background: #f8fafc;
    padding: 0.55rem !important;
}

@media (max-width: 991.98px) {
    .content .container-fluid.py-4:not(.layout-designer) .card-body {
        padding: 0.85rem;
    }

    .content .container-fluid.py-4:not(.layout-designer) > .d-flex.justify-content-between.align-items-center.mb-4,
    .content .container-fluid.py-4:not(.layout-designer) > .d-flex.justify-content-between.align-items-center.mb-3 {
        padding: 0.75rem 0.85rem;
        gap: 0.6rem;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 0 auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #3b82f6;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: static;
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.5rem;
    line-height: 1.4;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Hide boot loader artifacts if they ever leak outside boot screen */
#app:not(:has(> .wms-boot-loader)) .loading-progress,
#app:not(:has(> .wms-boot-loader)) .loading-progress-text {
    display: none !important;
}

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Attribute8 Multi-Select Component Styles */
.attribute8-multiselect .badge {
    font-size: 0.875rem;
    padding: 0.35rem 0.65rem;
}

.attribute8-multiselect .list-group-item {
    transition: background-color 0.15s ease-in-out;
}

    .attribute8-multiselect .list-group-item:hover {
        background-color: #f8f9fa;
    }

    .attribute8-multiselect .list-group-item.active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: white;
    }

        .attribute8-multiselect .list-group-item.active .text-muted {
            color: rgba(255, 255, 255, 0.75) !important;
        }

.attribute8-multiselect .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
}

    .attribute8-multiselect .form-check-input:checked[type=checkbox] {
        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='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    }

.attribute8-multiselect .list-group-item.active .form-check-input:checked {
    background-color: #fff;
    border-color: #fff;
}

/* =========================================
   5. WMS Enterprise Theme (global polish)
   ========================================= */

/* Boot / loading screen — inner wrapper only; never on #app (Blazor keeps #app) */
.wms-boot-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f1f5f9;
}

.wms-boot-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 2rem;
    text-align: center;
}

.wms-boot-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #60a5fa, #38bdf8);
    box-shadow: 0 0 0 6px rgba(96, 165, 250, 0.2);
    margin-bottom: 0.5rem;
}

.wms-boot-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f172a;
}

.wms-boot-sub {
    font-size: 0.8rem;
    color: #64748b;
    letter-spacing: 0.04em;
}

.wms-boot-loader .loading-progress circle:last-child {
    stroke: #3b82f6;
}

.wms-boot-loader .loading-progress-text {
    color: #475569;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

/* Spacing so boot % text never overlaps the ring */
.wms-boot-loader {
    padding: 2rem 1rem;
    box-sizing: border-box;
}

/* App shell */
.app-shell,
.wms-shell {
    background: var(--ui-bg);
}

.app-shell main,
.wms-main {
    background: var(--ui-bg);
}

.wms-content,
.app-shell .content {
    padding-bottom: 2rem;
}

/* Site announcement banner */
.wms-site-banner,
.wms-maintenance-banner {
    padding: 0.65rem 1rem;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.wms-site-banner--maintenance,
.wms-maintenance-banner {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 55%, #fcd34d 100%);
    color: #422006;
    border-bottom: 1px solid #d97706;
}

.wms-site-banner--update {
    background: linear-gradient(90deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
    color: #042f2e;
    border-bottom: 1px solid #1d4ed8;
}

.wms-site-banner--feature {
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 55%, #38bdf8 100%);
    color: #0c4a6e;
    border-bottom: 1px solid #0369a1;
}

.wms-site-banner--info {
    background: linear-gradient(90deg, #64748b 0%, #94a3b8 55%, #cbd5e1 100%);
    color: #0f172a;
    border-bottom: 1px solid #475569;
}

.wms-site-banner-inner,
.wms-maintenance-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.7rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    max-width: 100%;
}

.wms-site-banner-icon,
.wms-maintenance-banner-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.wms-site-banner--maintenance .wms-site-banner-icon,
.wms-maintenance-banner-icon {
    color: #92400e;
}

.wms-site-banner-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.12);
    white-space: nowrap;
}

.wms-site-banner-message,
.wms-maintenance-banner-message {
    text-align: center;
}

.wms-site-banner-when,
.wms-maintenance-banner-when {
    font-weight: 700;
    white-space: nowrap;
}

.wms-site-banner-sep,
.wms-maintenance-banner-sep {
    opacity: 0.45;
    font-weight: 400;
}

.wms-site-banner-countdown,
.wms-maintenance-countdown {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.wms-site-banner-chip,
.wms-maintenance-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.4rem;
    background: rgba(15, 23, 42, 0.12);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.wms-site-banner--maintenance .wms-site-banner-chip,
.wms-maintenance-chip {
    background: rgba(66, 32, 6, 0.14);
    color: #422006;
}

.wms-site-banner-chip--live,
.wms-maintenance-chip--live {
    background: rgba(127, 29, 29, 0.15);
    color: #7f1d1d;
}

.wms-site-banner-link {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.wms-site-banner-link:hover {
    opacity: 0.85;
}

@media (min-width: 641px) {
    .wms-site-banner,
    .wms-maintenance-banner {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

@media (max-width: 640.98px) {
    .wms-site-banner,
    .wms-maintenance-banner {
        padding: 0.55rem 0.85rem;
    }

    .wms-site-banner-sep,
    .wms-maintenance-banner-sep {
        display: none;
    }

    .wms-site-banner-inner,
    .wms-maintenance-banner-inner {
        font-size: 0.82rem;
    }
}

/* Topbar */
.wms-topbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm);
    min-height: 4.25rem;
    z-index: 100;
}

.wms-topbar-actions {
    flex-shrink: 0;
    max-width: min(100%, 520px);
}

.wms-topbar-actions .topbar-user {
    max-width: 220px;
}

.wms-topbar-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-md);
    background: linear-gradient(135deg, #2563eb, #0284c7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.5);
}

.wms-topbar .btn-primary {
    padding-inline: 1.1rem;
}

/* Page headers */
.ui-page-header h1,
.ui-page-header .h4 {
    font-weight: 800;
    color: var(--ui-text);
}

.ui-page-header::after {
    content: none;
}

.content .container-fluid.py-4:not(.layout-designer):not(.wms-home-dashboard) > .d-flex.justify-content-between.align-items-center.mb-4,
.content .container-fluid.py-4:not(.layout-designer):not(.wms-home-dashboard) > .d-flex.justify-content-between.align-items-center.mb-3 {
    border-left: 4px solid var(--ui-primary);
    padding-left: 1rem !important;
}

/* Home dashboard — no duplicate stat row, clean header */
.wms-home-dashboard > .ui-page-header {
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1.25rem !important;
}

/* Filter panels — WMS search strip */
.ui-filter-card {
    border: 1px solid var(--ui-border);
    overflow: hidden;
}

/* Must beat `.content .ui-page .card.shadow-sm { overflow: hidden }` or dropdowns clip. */
.content .ui-page .card.shadow-sm.ui-filter-card:has(.searchable-select.is-open),
.content .ui-page .card.shadow-sm.ui-filter-card:has(.searchable-select:has(.searchable-select-dropdown)),
.ui-filter-card:has(.searchable-select.is-open),
.ui-filter-card:has(.searchable-select:has(.searchable-select-dropdown)) {
    overflow: visible !important;
    position: relative;
    z-index: 3000;
}

.content .ui-page .card.shadow-sm.ui-filter-card:has(.searchable-select.is-open) .card-body,
.content .ui-page .card.shadow-sm.ui-filter-card:has(.searchable-select:has(.searchable-select-dropdown)) .card-body,
.ui-filter-card:has(.searchable-select.is-open) .card-body,
.ui-filter-card:has(.searchable-select:has(.searchable-select-dropdown)) .card-body {
    overflow: visible !important;
}

.ui-filter-card .row {
    overflow: visible;
}

.ui-filter-card [class*="col-"]:has(.searchable-select.is-open),
.ui-filter-card [class*="col-"]:has(.searchable-select:has(.searchable-select-dropdown)) {
    position: relative;
    z-index: 3001;
}

.searchable-select.is-open,
.searchable-select:has(.searchable-select-dropdown) {
    z-index: 3001;
}

.searchable-select.is-open .searchable-select-dropdown,
.searchable-select:has(.searchable-select-dropdown) .searchable-select-dropdown {
    z-index: 3002;
}

/* STR Loose plan — stacked rows (not a table) so shelf dropdown isn't clipped/stacked oddly. */
.content .ui-page .card.shadow-sm.str-loose-plan-card,
.content .ui-page .card.shadow-sm.str-loose-plan-card .str-loose-plan-body,
.content .ui-page .card.shadow-sm.str-loose-plan-card .str-loose-plan-list,
.content .ui-page .card.shadow-sm.str-loose-plan-card .str-loose-plan-item {
    overflow: visible !important;
}

.content .ui-page .card.shadow-sm.str-loose-plan-card {
    position: relative;
    z-index: 90;
}

.content .ui-page .card.shadow-sm.str-loose-plan-card.is-shelf-dropdown-open,
.content .ui-page.str-loose-plan-dropdown-open .card.shadow-sm.str-loose-plan-card {
    z-index: 4000 !important;
}

.str-loose-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.str-loose-plan-item {
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(16rem, 1.4fr) minmax(12rem, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ui-border, #dee2e6);
    border-radius: 0.5rem;
    background: #fff;
    position: relative;
}

.str-loose-plan-item.is-shelf-open {
    z-index: 4001;
}

.str-loose-plan-item-shelf {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.str-loose-plan-item.is-shelf-open .str-loose-plan-item-shelf {
    z-index: 4002;
}

.str-loose-plan-item-shelf .searchable-select,
.str-loose-plan-item-shelf .searchable-select.is-open {
    position: relative;
    z-index: 4002;
}

.str-loose-plan-item-shelf .searchable-select-dropdown {
    z-index: 4003 !important;
    max-height: 280px;
}

.str-loose-plan-item-codes {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

@media (max-width: 991.98px) {
    .str-loose-plan-item {
        grid-template-columns: 1fr;
    }
}

.content .ui-page.str-loose-plan-dropdown-open .str-loose-plan-card {
    margin-bottom: 12rem !important;
}

/* Inventory location filters — explicit column elevation (do not rely on :has alone) */
.inventory-dashboard.inventory-filter-dropdown-open .inventory-main-pane,
.inventory-dashboard.inventory-filter-dropdown-open .inventory-layout-shell {
    overflow: visible !important;
    position: relative;
    z-index: auto;
}

.inventory-dashboard .inventory-loc-filter-row {
    position: relative;
    z-index: 5;
    overflow: visible;
}

.inventory-dashboard.inventory-filter-dropdown-open .inventory-loc-filter-row {
    z-index: 4002;
}

.inventory-dashboard .inventory-loc-filter-col {
    position: relative;
    z-index: 1;
}

.inventory-dashboard .inventory-loc-filter-col.is-dropdown-open {
    z-index: 5000 !important;
}

.inventory-dashboard.inventory-filter-dropdown-open .inventory-filter-card.ui-filter-card {
    overflow: visible !important;
    position: relative;
    z-index: 4000;
}

.inventory-dashboard.inventory-filter-dropdown-open .inventory-filter-fields {
    position: relative;
    z-index: 4001;
    overflow: visible;
}

.inventory-dashboard.inventory-filter-dropdown-open .inventory-filter-fields > .row:not(.inventory-loc-filter-row) {
    position: relative;
    z-index: 1;
}

.inventory-dashboard.inventory-filter-dropdown-open .inventory-filter-footer,
.inventory-dashboard.inventory-filter-dropdown-open .inventory-sku-lookup-row,
.inventory-dashboard.inventory-filter-dropdown-open .inventory-report-card {
    position: relative;
    z-index: 1;
}

/* Allow inner table viewport scrolling + sticky thead (overflow:hidden on cards breaks sticky). */
.content .ui-page .card.shadow-sm.inventory-report-card:has(.inv-recon-table-wrap) {
    overflow: visible !important;
}

.content .ui-page .card.shadow-sm.inventory-report-card:has(.inv-recon-table-wrap) > .card-body {
    overflow: visible !important;
}

.inv-recon-table-wrap {
    max-height: calc(100vh - 14rem);
    min-height: 32rem;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

.inv-recon-table-wrap .inv-recon-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible !important;
}

.inv-recon-table-wrap .inv-recon-table thead th {
    position: sticky;
    z-index: 2;
    background: #f8f9fa;
}

.inv-recon-table-wrap .inv-recon-table thead th.inv-recon-gtech-col {
    background-color: #f3f7ff;
}

.inv-recon-table-wrap .inv-recon-table thead th.inv-recon-wms-col {
    background-color: #f3faf6;
}

.inv-recon-table-wrap .inv-recon-table thead th.inv-recon-variance-col {
    background-color: #fffbf0;
}

.inv-recon-table-wrap .inv-recon-head-group-row th {
    top: 0;
    z-index: 4;
}

.inv-recon-table-wrap .inv-recon-head-col-row th {
    top: 2.5rem;
    z-index: 3;
}

.inv-recon-table-wrap .inv-recon-status-head {
    top: 0;
    z-index: 5;
    background: #f8f9fa !important;
}

.inventory-dashboard .inventory-loc-filter-col.is-dropdown-open .searchable-select,
.inventory-dashboard .inventory-loc-filter-col.is-dropdown-open .searchable-select.is-open {
    z-index: 5001 !important;
}

.inventory-dashboard .inventory-loc-filter-col.is-dropdown-open .searchable-select-dropdown {
    background-color: #ffffff !important;
    box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.28);
    z-index: 5002 !important;
}

.sti-advanced-filters {
    overflow: visible;
    position: relative;
}

.sti-advanced-filters .row {
    overflow: visible;
}

.sti-advanced-filters [class*="col-"]:has(.searchable-select.is-open),
.sti-advanced-filters [class*="col-"]:has(.searchable-select:has(.searchable-select-dropdown)) {
    position: relative;
    z-index: 3002;
}

.sti-advanced-filters:has(.searchable-select.is-open),
.sti-advanced-filters:has(.searchable-select:has(.searchable-select-dropdown)) {
    z-index: 3001;
    overflow: visible;
}

.ui-filter-card .card-body {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.ui-filter-card .card-body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--ui-primary), #0284c7);
    border-radius: 4px 0 0 4px;
}

.ui-filter-card h6,
.ui-filter-card .text-uppercase.small {
    color: var(--ui-text-soft) !important;
    letter-spacing: 0.1em;
    font-size: 0.68rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ui-filter-card h6::before,
.ui-filter-card .text-uppercase.small.fw-bold:first-of-type::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: var(--ui-primary);
    flex-shrink: 0;
}

/* Tables — enterprise data grid */
.table {
    font-size: 0.875rem;
}

.table thead th {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    color: #475569;
    padding: 0.85rem 1rem;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0;
}

.table tbody td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #fafbfc;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #eff6ff;
}

.content .ui-page .table tbody tr:hover {
    border-left-color: #3b82f6;
    box-shadow: inset 4px 0 0 #3b82f6;
}

.table .btn-sm {
    border-radius: var(--ui-radius-sm);
    font-weight: 600;
}

/* Status badges — semantic WMS palette */
.badge {
    letter-spacing: 0.02em;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe;
}

.badge.bg-success,
.badge.text-bg-success {
    background: #dcfce7 !important;
    color: #166534 !important;
    border: 1px solid #86efac;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca;
}

.badge.bg-info,
.badge.text-bg-info {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0;
}

/* Module accent strips on list cards */
.ui-page .card.shadow-sm.mb-4.ui-card:nth-of-type(2)::before {
    background: linear-gradient(90deg, #0284c7, #2563eb);
}

/* GDC workflow stepper */
.gdc-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 0.75rem 0;
}

.gdc-stepper-compact {
    gap: 0;
    padding: 0.35rem 0;
}

.gdc-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.gdc-stepper-compact .gdc-step {
    gap: 0;
}

.gdc-step-circle {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: #f1f5f9;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.gdc-stepper-compact .gdc-step-circle {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.65rem;
}

.gdc-step-label {
    line-height: 1.2;
    min-width: 0;
}

.gdc-step-title {
    font-weight: 700;
    color: #334155;
    font-size: 0.85rem;
}

.gdc-step-sub {
    font-size: 0.7rem;
    color: var(--ui-text-soft);
}

.gdc-connector {
    flex: 1 1 auto;
    height: 3px;
    background: #e2e8f0;
    margin: 0 0.5rem;
    border-radius: 2px;
    min-width: 1.5rem;
}

.gdc-stepper-compact .gdc-connector {
    height: 2px;
    margin: 0 0.3rem;
}

.gdc-step.gdc-step-complete .gdc-step-circle {
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.gdc-step.gdc-step-complete .gdc-step-title {
    color: #047857;
}

.gdc-step.gdc-step-current .gdc-step-circle {
    background: linear-gradient(135deg, #2563eb, #0891b2);
    color: #fff;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25);
    animation: gdcPulse 1.8s ease-in-out infinite;
}

.gdc-step.gdc-step-current .gdc-step-title {
    color: #1d4ed8;
}

.gdc-step.gdc-step-pending .gdc-step-circle {
    background: #f8fafc;
    color: #cbd5e1;
    border-color: #e2e8f0;
}

.gdc-connector.gdc-connector-complete {
    background: linear-gradient(90deg, #059669, #10b981);
}

.gdc-connector.gdc-connector-current {
    background: linear-gradient(90deg, #059669 0%, #2563eb 55%, #e2e8f0 100%);
}

@keyframes gdcPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.08); }
}

/* Login — split enterprise gate */
.login-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 100vh;
    background: #111827;
    padding: 0;
}

.login-hero {
    display: none;
    flex: 1;
    /* Same navy shading as the sidebar */
    background-color: #111827;
    background-image:
        radial-gradient(ellipse 85% 50% at 50% 28%, rgba(255, 255, 255, 0.03) 0%, transparent 58%),
        linear-gradient(0deg, rgba(3, 5, 10, 0.68) 0%, transparent 40%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 16%, transparent 84%, rgba(0, 0, 0, 0.26) 100%),
        linear-gradient(180deg, rgba(31, 41, 55, 0.55) 0%, rgba(17, 24, 39, 0.4) 38%, rgba(10, 15, 26, 0.7) 68%, rgba(5, 8, 15, 0.92) 100%);
    padding: 3rem;
    flex-direction: column;
    justify-content: center;
    color: #f8fafc;
}

.login-hero h1 {
    color: #f8fafc;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.login-hero p {
    color: #94a3b8 !important;
    font-size: 1rem;
    max-width: 28rem;
    line-height: 1.6;
}

.login-hero .brand-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(96, 165, 250, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #93c5fd;
}

.login-hero-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem;
}

.login-hero-feature {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.login-hero-feature i {
    font-size: 1.25rem;
    color: #60a5fa;
}

.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    background: #f8fafc;
}

.login-card {
    background: #fff;
    padding: 2.5rem 2.25rem;
    border-radius: var(--ui-radius-xl);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-lg);
    width: 100%;
    max-width: 420px;
}

.login-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #334155;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.login-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
}

.login-card h2 {
    margin-bottom: 0.25rem;
    color: var(--ui-text);
    font-weight: 800;
}

.login-subtitle {
    margin-bottom: 1.5rem;
    color: var(--ui-text-soft);
    font-size: 0.92rem;
}

.login-submit-btn {
    padding: 0.7rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.login-password-toggle {
    border-color: var(--ui-border);
    color: var(--ui-text-soft);
}

.login-password-toggle:hover,
.login-password-toggle:focus {
    color: #1d4ed8;
    border-color: #2563eb;
    background: #eff6ff;
}

/* Home dashboard */
.wms-home-dashboard .wms-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.wms-stat-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--ui-shadow-md);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wms-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-lg);
}

.wms-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.wms-stat-icon--teal { background: #dbeafe; color: #1d4ed8; }
.wms-stat-icon--blue { background: #e0f2fe; color: #0369a1; }
.wms-stat-icon--indigo { background: #e0e7ff; color: #4338ca; }
.wms-stat-icon--amber { background: #fef3c7; color: #b45309; }

.wms-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ui-text-soft);
    margin-bottom: 0.15rem;
}

.wms-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ui-text);
}

.wms-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.wms-module-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--ui-shadow-md);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.wms-module-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.wms-module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ui-shadow-lg);
    border-color: #cbd5e1;
}

.wms-module-card--rcf::before { background: var(--ui-accent-rcf); }
.wms-module-card--str::before { background: var(--ui-accent-str); }
.wms-module-card--gd::before { background: var(--ui-accent-gd); }
.wms-module-card--sti::before { background: var(--ui-accent-sti); }
.wms-module-card--inv::before { background: var(--ui-primary); }
.wms-module-card--settings::before { background: var(--ui-accent-settings); }

.wms-module-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
}

.wms-module-card--rcf .wms-module-card-icon { background: #e0f2fe; color: var(--ui-accent-rcf); }
.wms-module-card--str .wms-module-card-icon { background: #e0e7ff; color: var(--ui-accent-str); }
.wms-module-card--gd .wms-module-card-icon { background: #d1fae5; color: var(--ui-accent-gd); }
.wms-module-card--sti .wms-module-card-icon { background: #fef3c7; color: var(--ui-accent-sti); }
.wms-module-card--inv .wms-module-card-icon { background: #dbeafe; color: var(--ui-primary); }
.wms-module-card--settings .wms-module-card-icon { background: #f1f5f9; color: var(--ui-accent-settings); }

.wms-module-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--ui-text);
}

.wms-module-card p {
    font-size: 0.82rem;
    color: var(--ui-text-soft) !important;
    margin-bottom: 0;
    line-height: 1.45;
}

.wms-module-card-arrow {
    margin-top: auto;
    padding-top: 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ui-primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Scan / workflow pages — light header with blue top accent */
.card:has(> .ui-txn-summary-header.card-header) {
    border-top: 3px solid #2563eb !important;
}

/* :not(#_) raises priority above the generic dark ".card-header.text-white" rules */
.ui-txn-summary-header.card-header:not(#_) {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.8rem 1rem;
}

.ui-txn-summary-header.card-header h1,
.ui-txn-summary-header.card-header h2,
.ui-txn-summary-header.card-header h3,
.ui-txn-summary-header.card-header h4,
.ui-txn-summary-header.card-header h5,
.ui-txn-summary-header.card-header h6 {
    color: #111827;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

/* Small label above titles (e.g. "Receive Finish") */
.ui-txn-summary-header .text-uppercase.opacity-75 {
    color: #2563eb;
    opacity: 1 !important;
    letter-spacing: 0.06em;
}

.ui-txn-summary-header .opacity-75:not(.text-uppercase),
.ui-txn-summary-header [style*="opacity"] {
    color: #64748b;
    opacity: 1 !important;
}

/* Existing heading icons become blue chips */
.ui-txn-summary-header.card-header :is(h1, h2, h3, h4, h5, h6) > i {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: #dbeafe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-right: 0.65rem !important;
    flex-shrink: 0;
}

/* List headers without an icon get a list icon chip */
.ui-txn-summary-header.card-header > :is(h5, h6):first-child:not(:has(i))::before {
    content: "";
    width: 2rem;
    height: 2rem;
    margin-right: 0.65rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E") center / 1.05rem no-repeat,
        #dbeafe;
}

/* Count pill (e.g. "478 total") */
.ui-txn-summary-header:not(#_) .badge.bg-light {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe;
    font-weight: 600;
}

.ui-txn-summary-header .btn-light {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    font-weight: 600;
}

.ui-txn-summary-header .btn-light:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.ui-txn-summary-header:not(#_) .btn-outline-light {
    color: #1d4ed8 !important;
    border-color: #bfdbfe !important;
    background-color: #ffffff !important;
}

.ui-txn-summary-header:not(#_) .btn-outline-light:hover {
    background-color: #eff6ff !important;
    color: #1e40af !important;
    border-color: #93c5fd !important;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs {
    background: #f1f5f9;
    border-radius: 0.65rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs .nav-link {
    color: #475569;
    border: 1px solid transparent;
    font-weight: 600;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs .nav-link:hover {
    color: #1d4ed8;
    background: #e2e8f0;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs .nav-link.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, 0.45);
}

.card-header.bg-primary,
.card-header.text-white {
    background: linear-gradient(90deg, #111827 0%, #1e3a8a 100%) !important;
}

/* Modals */
.modal-content {
    border: none;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

.modal-header.bg-danger {
    background: linear-gradient(90deg, #b91c1c, #dc2626) !important;
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--ui-primary) !important;
}

/* Pages without ui-page wrapper */
.container-fluid.py-4:not(.layout-designer):not(.ui-page) {
    animation: uiFadeInUp 260ms ease-out;
}

.container-fluid.py-4:not(.layout-designer):not(.ui-page) .card {
    border-radius: var(--ui-radius-lg);
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-md);
}

@media (min-width: 992px) {
    .login-hero {
        display: flex;
    }
}

/* Reporting dashboard */
.wms-reporting-section + .wms-reporting-section {
    margin-top: 0.5rem;
}

.wms-reporting-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.75rem;
}

.wms-reporting-dashboard .wms-reporting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.wms-reporting-card-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ui-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wms-reporting-card-icon--rcf {
    background: #dbeafe;
    color: #1d4ed8;
}

.wms-reporting-card-icon--pallet {
    background: #fef3c7;
    color: #b45309;
}

.wms-reporting-card-icon--bins {
    background: #e0f2fe;
    color: #0369a1;
}

.wms-reporting-card-icon--str {
    background: #e0e7ff;
    color: #4338ca;
}

.wms-reporting-card-icon--str-bins {
    background: #fce7f3;
    color: #be185d;
}

.wms-reporting-card-icon--sti-pick {
    background: #fee2e2;
    color: #b91c1c;
}

.wms-reporting-card-icon--sti {
    background: #dbeafe;
    color: #1d4ed8;
}

.wms-reporting-card-icon--sti-store {
    background: #d1fae5;
    color: #047857;
}

.wms-reporting-card-icon--sti-wholesale {
    background: #ede9fe;
    color: #6d28d9;
}

.wms-reporting-card-icon--sti-dispatch {
    background: #ecfdf5;
    color: #047857;
}

/* GTECH monitoring report */
.wms-monitoring-group-section {
    padding: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--ui-radius-lg, 0.75rem);
    background: rgba(255, 255, 255, 0.42);
}

.wms-monitoring-group-section--inbound {
    border-left: 0.25rem solid #1d4ed8;
}

.wms-monitoring-group-section--sti {
    border-left: 0.25rem solid #6d28d9;
}

.wms-monitoring-split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.wms-sti-total-card {
    border-left: 0.25rem solid #6d28d9;
}

.wms-sti-total-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d28d9;
    margin-bottom: 0.75rem;
}

.wms-sti-total-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
}

@media (max-width: 991.98px) {
    .wms-monitoring-split-grid {
        grid-template-columns: 1fr;
    }

    .wms-sti-total-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wms-monitoring-card .card-title {
    font-size: 1rem;
}

.wms-monitoring-doc-type {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}

.wms-monitoring-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}

.wms-monitoring-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.15rem;
}

.wms-monitoring-stat-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color, #212529);
}

.wms-monitoring-gap {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    line-height: 1.3;
}

.wms-monitoring-gap--ok {
    background: #d1fae5;
    color: #047857;
}

.wms-monitoring-gap--warn {
    background: #fee2e2;
    color: #b91c1c;
}

.wms-monitoring-gap--info {
    background: #dbeafe;
    color: #1d4ed8;
}

.wms-monitoring-gap--neutral {
    background: #e9ecef;
    color: #6c757d;
}

.wms-monitoring-match-bar {
    height: 0.45rem;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.wms-monitoring-match-bar__fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.wms-monitoring-match-bar__fill--ok {
    background: #10b981;
}

.wms-monitoring-match-bar__fill--good {
    background: #3b82f6;
}

.wms-monitoring-match-bar__fill--warn {
    background: #f59e0b;
}

.wms-monitoring-match-bar__fill--neutral {
    background: #adb5bd;
}

.wms-monitoring-details .table th {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}

.wms-monitoring-details .table td {
    font-size: 0.85rem;
}

/* Location Changes — filter card separate from results so dropdowns are never clipped */
.content .ui-page .card.shadow-sm.loc-changes-filter-card.ui-filter-card {
    overflow: visible !important;
    z-index: 50;
}

.content .ui-page.ui-filter-dropdown-open .card.shadow-sm.loc-changes-filter-card.ui-filter-card {
    z-index: 4000 !important;
}

.content .ui-page .card.shadow-sm.loc-changes-list-card {
    z-index: 1;
    overflow: hidden;
}

.loc-changes-filters {
    overflow: visible !important;
}

.loc-changes-filter-actions {
    position: relative;
    z-index: 1;
}

.loc-changes-filter-selects {
    position: relative;
    z-index: 5;
    overflow: visible !important;
}

.loc-changes-filter-selects .row,
.loc-changes-filter-selects [class*="col-"] {
    overflow: visible !important;
}

.loc-changes-filter-selects [class*="col-"].is-dropdown-open,
.loc-changes-filter-selects [class*="col-"]:has(.searchable-select.is-open),
.loc-changes-filter-selects [class*="col-"]:has(.searchable-select:has(.searchable-select-dropdown)) {
    position: relative;
    z-index: 5000;
}

.loc-changes-filter-selects .searchable-select.is-open,
.loc-changes-filter-selects .searchable-select:has(.searchable-select-dropdown) {
    z-index: 5000;
}

.loc-changes-filter-selects .searchable-select-dropdown {
    z-index: 5001;
    max-height: 240px;
    left: 0;
    right: 0;
    width: 100%;
}

.loc-changes-filter-selects .searchable-select-option {
    font-size: 0.8125rem;
    line-height: 1.2;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.loc-changes-filter-selects .searchable-select-option .fw-semibold {
    font-size: 0.8125rem;
}

/* Keep input-group border unified when focused */
.loc-changes-filters .searchable-select .input-group:focus-within .form-control,
.loc-changes-filters .searchable-select .input-group:focus-within .input-group-text,
.loc-changes-filters .searchable-select .input-group:focus-within .btn {
    border-color: #2563eb;
}

/* Big centered "scan bin" zone (Stock Audit / Ecom Stock Audit / Stock Adjustment) */
.ui-scan-zone-card {
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb !important;
    border-radius: 0.9rem;
    background: #ffffff;
}

.ui-scan-zone {
    text-align: center;
    padding: 1.75rem 1rem 1.25rem;
}

.ui-scan-zone-step {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.ui-scan-zone-icon {
    width: 4rem;
    height: 4rem;
    margin: 0.75rem auto;
    border-radius: 1rem;
    background: #dbeafe;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.ui-scan-zone-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.ui-scan-zone-sub {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0.2rem 0 1.1rem;
}

.ui-scan-zone-body {
    max-width: 30rem;
    margin: 0 auto;
}

.ui-scan-zone-input.form-control {
    text-align: center;
    border: 2px dashed #93c5fd;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    font-size: 1.1rem;
    background: #f8fbff;
}

.ui-scan-zone-input.form-control:focus {
    border-style: solid;
    border-color: #2563eb !important;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.ui-scan-zone-or {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.85rem 0;
    font-size: 0.75rem;
    color: #94a3b8;
}

.ui-scan-zone-or::before,
.ui-scan-zone-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.ui-scan-zone-camera.btn {
    width: 100%;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 0.75rem;
    padding: 0.7rem 1rem;
    font-weight: 600;
}

.ui-scan-zone-camera.btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.ui-scan-zone-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.75rem;
}

.ui-scan-zone-extra {
    text-align: left;
    margin-top: 1rem;
}

/* Counting step (Stock Audit / Ecom Stock Audit / Stock Adjustment) */
.ui-bin-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
}

.ui-bin-bar-step {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.ui-bin-bar-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    word-break: break-all;
}

.ui-bin-bar-value .bi {
    color: #2563eb;
    margin-right: 0.35rem;
}

.ui-bin-bar-hint {
    font-size: 0.8rem;
    color: #64748b;
}

.ui-work-panel.card {
    border: 1px solid #e2e8f0;
    border-radius: 0.9rem;
    overflow: hidden;
}

.ui-work-panel--accent.card {
    border-top: 3px solid #2563eb;
}

.ui-work-panel .ui-work-panel-header.card-header {
    background: #ffffff !important;
    color: #111827 !important;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
}

.ui-icon-chip {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    background: #dbeafe;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

.ui-work-panel .form-label {
    color: #111827;
}

.ui-scan-input.form-control {
    border: 2px solid #93c5fd;
    border-radius: 0.65rem;
    background: #f8fbff;
}

.ui-scan-input.form-control:focus {
    border-color: #2563eb !important;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

.ui-scan-input-icon.input-group-text {
    border: 2px solid #93c5fd;
    border-right: 0;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 0.65rem 0 0 0.65rem;
}

.ui-variance-pill {
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    border: 1px solid transparent;
}

.ui-variance--zero {
    background: #dcfce7 !important;
    color: #166534 !important;
    border-color: #bbf7d0;
}

.ui-variance--short {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-color: #fecaca;
}

.ui-variance--extra {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a;
}

/* RCF pallet placement — progress, guided steps, mobile cards */
.ui-progress-block {
    min-width: 12rem;
    flex: 0 1 16rem;
}

.ui-progress-label {
    color: #64748b;
}

.ui-progress {
    height: 0.45rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.ui-progress-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.ui-scan-step {
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ui-scan-step.is-active {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.ui-scan-step.is-done {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.ui-scan-step.is-locked {
    opacity: 0.7;
    background: #f8fafc;
}

.ui-scan-step-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.ui-scan-step.is-locked .ui-scan-step-title {
    color: #64748b;
}

.ui-scan-step-num {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #64748b;
}

.ui-scan-step.is-active .ui-scan-step-num {
    background: #2563eb;
    color: #ffffff;
}

.ui-scan-step.is-done .ui-scan-step-num {
    background: #16a34a;
    color: #ffffff;
}

.ui-scan-step-value {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
}

.ui-scan-step-note {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.ui-scan-step .ui-scan-input.form-control:disabled {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #f8fafc;
}

.ui-scan-step .ui-scan-input-icon.input-group-text {
    border-color: #93c5fd;
}

.ui-scan-step.is-locked .ui-scan-input-icon.input-group-text {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #94a3b8;
}

.ui-status--planned {
    background: #dbeafe !important;
    color: #1e40af !important;
    border-color: #bfdbfe;
}

.ui-pallet-card {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    cursor: pointer;
}

.ui-pallet-card.is-placed {
    background: #f0fdf4;
}

.ui-pallet-card-sub {
    font-size: 0.78rem;
    color: #64748b;
}

.ui-pallet-card-detail {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.78rem;
    color: #475569;
}

/* Mobile list pages — search bar, filter chips, collapsible filters, record cards */
.ui-status--muted {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0;
}

.ui-filter-toggle.btn {
    position: relative;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 0.65rem;
    padding: 0.4rem 0.75rem;
}

.ui-filter-toggle.btn.is-open,
.ui-filter-toggle.btn:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.ui-filter-count {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ui-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.ui-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.15rem 0.45rem 0.15rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.ui-filter-chip:hover {
    background: #dbeafe;
}

@media (max-width: 767.98px) {
    /* Full filter form folds away on phones */
    .ui-filter-body {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
    }

    .ui-filter-body > * {
        min-height: 0;
        overflow: hidden;
    }

    .ui-filter-body.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 0.75rem;
    }

    /* grid needs a single child to animate */
    .ui-filter-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ui-record-card {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.ui-record-card:last-child {
    border-bottom: 0;
}

.ui-record-sub {
    font-size: 0.78rem;
    color: #64748b;
}

.ui-record-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
    text-align: center;
}

.ui-record-stats > div {
    background: #f8fafc;
    border-radius: 0.5rem;
    padding: 0.35rem 0;
}

.ui-record-stats strong {
    display: block;
    font-size: 1rem;
    color: #111827;
}

.ui-record-stats span {
    font-size: 0.7rem;
    color: #64748b;
}

.min-w-0 {
    min-width: 0;
}

/* Open filter panel must not clip location dropdowns */
@media (max-width: 767.98px) {
    .ui-filter-body.is-open > * {
        overflow: visible;
    }
}

/* Mobile ⋯ action menu */
.ui-mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1020;
}

.ui-mobile-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1025;
    min-width: 11rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.35);
    padding: 0.3rem;
    animation: uiMenuIn 0.15s ease-out;
}

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

.ui-mobile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #111827;
    text-align: left;
}

.ui-mobile-menu-item:hover {
    background: #f1f5f9;
}

/* Mobile swipeable status tabs */
.ui-status-tabs {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.1rem;
}

.ui-status-tabs::-webkit-scrollbar {
    display: none;
}

.ui-status-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ui-status-tab strong {
    color: #111827;
}

.ui-status-tab.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.ui-status-tab.is-active strong {
    color: #ffffff;
}

.ui-status-tab.is-done strong {
    color: #166534;
}

.ui-status-tab.is-cancelled {
    border-color: #fecaca;
    color: #991b1b;
}

.ui-status-tab.is-cancelled strong {
    color: #b91c1c;
}

.ui-status-tab.is-done.is-active,
.ui-status-tab.is-done.is-active strong {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.ui-status-tab.is-cancelled.is-active,
.ui-status-tab.is-cancelled.is-active strong {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* Mobile STI issue cards */
.ui-issue-card {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid #2563eb;
}

.ui-issue-card:last-child {
    border-bottom: 0;
}

.ui-issue-card.is-pending { border-left-color: #94a3b8; }
.ui-issue-card.is-done { border-left-color: #16a34a; }
.ui-issue-card.is-cancelled { border-left-color: #dc2626; }

.ui-issue-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.ui-issue-batch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f1f5f9;
    color: #334155;
    border-radius: 0.4rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-family: var(--bs-font-monospace, monospace);
}

.ui-issue-batch.is-empty {
    color: #94a3b8;
    font-family: inherit;
}

.ui-issue-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.5rem;
    text-align: center;
}

.ui-issue-stats > div {
    background: #f8fafc;
    border-radius: 0.45rem;
    padding: 0.3rem 0;
}

.ui-issue-stats strong {
    display: block;
    font-size: 0.9rem;
    color: #111827;
}

.ui-issue-stats span {
    font-size: 0.65rem;
    color: #64748b;
}

.ui-issue-stats > div.is-cancelled {
    background: #fef2f2;
}

.ui-issue-stats > div.is-cancelled strong {
    color: #b91c1c;
}

.ui-issue-card .btn-sm {
    padding: 0.2rem 0.55rem;
}

.ui-issue-expand {
    margin: 0.6rem -0.9rem -0.8rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Mobile card stack — each record is its own floating card with a gap */
.ui-card-stack {
    display: grid;
    /* minmax(0,1fr) keeps cards inside the screen instead of growing to their widest content */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f1f5f9;
}

.ui-card-stack > .ui-issue-card,
.ui-card-stack > .ui-record-card,
.ui-card-stack > .ui-pallet-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.85rem;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.1);
}

.ui-card-stack > * {
    min-width: 0;
}

.ui-card-stack > .ui-issue-card {
    border-left-width: 4px;
    overflow-wrap: anywhere;
}

.ui-card-stack > .ui-issue-card.is-active { border-left-color: #2563eb; }
.ui-card-stack > .ui-issue-card.is-pending { border-left-color: #94a3b8; }
.ui-card-stack > .ui-issue-card.is-sort { border-left-color: #d97706; }
.ui-card-stack > .ui-issue-card.is-desk { border-left-color: #0891b2; }
.ui-card-stack > .ui-issue-card.is-done { border-left-color: #16a34a; }
.ui-card-stack > .ui-issue-card.is-cancelled { border-left-color: #dc2626; }

.ui-card-stack > .ui-pallet-card.is-placed {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.ui-card-stack .ui-issue-expand {
    border-radius: 0 0 0.85rem 0.85rem;
    overflow: hidden;
}

/* STI card: issue number gets its own full line, never cut */
.ui-issue-no {
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* Mobile sticky bottom action bar (e.g. STI Batch Plan / Batch Pick) */
.ui-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, 0.2);
    animation: uiBottomBarIn 0.2s ease-out;
}

.ui-bottom-bar .btn {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    border-radius: 0.65rem;
}

@keyframes uiBottomBarIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Leave room so the last card is not hidden behind the bar */
@media (max-width: 767.98px) {
    .ui-page.ui-has-bottom-bar {
        padding-bottom: 5rem !important;
    }
}

/* Theme-colored row actions (STI workflow table + mobile cards): yellow/cyan/green -> blue */
.ui-themed-actions .btn-warning,
.ui-themed-actions .btn-info,
.ui-themed-actions .btn-success {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}

.ui-themed-actions .btn-warning:hover,
.ui-themed-actions .btn-info:hover,
.ui-themed-actions .btn-success:hover {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

.ui-themed-actions .btn-outline-success,
.ui-themed-actions .btn-outline-warning {
    background: #ffffff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.ui-themed-actions .btn-outline-success:hover,
.ui-themed-actions .btn-outline-warning:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e40af;
}

.ui-bottom-bar .btn-outline-primary {
    background: #ffffff;
    border: 1px solid #2563eb;
    color: #1d4ed8;
}

/* Main (first) workflow action in each STI row/card = solid blue; the rest stay light blue.
   Only real workflow buttons qualify, so Timeline/View never become the solid one. */
.ui-themed-actions > .btn:first-child:is(.btn-warning, .btn-info, .btn-success, .btn-outline-success, .btn-outline-warning, .btn-outline-primary) {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.6);
}

.ui-themed-actions > .btn:first-child:is(.btn-warning, .btn-info, .btn-success, .btn-outline-success, .btn-outline-warning, .btn-outline-primary):hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* ===== STI Batch Pick — mobile tabs (Scan · Queue · Pool), next bin, send confirm ===== */
.sti-bp-progress {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2563eb;
    border-radius: 0.85rem;
    padding: 0.6rem 0.8rem 0.7rem;
}

.sti-bp-how.btn {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.sti-bp-how.btn.is-open {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.sti-bp-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.2rem;
    background: #e2e8f0;
    border-radius: 0.7rem;
    padding: 0.2rem;
}

.sti-bp-tabs > button {
    border: 0;
    background: transparent;
    border-radius: 0.55rem;
    padding: 0.45rem 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    transition: background 0.15s ease, color 0.15s ease;
}

.sti-bp-tabs > button.is-on {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.sti-bp-tab-count {
    display: inline-block;
    min-width: 1.3rem;
    margin-left: 0.2rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 0.72rem;
}

.sti-bp-next {
    width: 100%;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #111827;
    border-radius: 0.65rem;
    padding: 0.45rem 0.75rem;
    text-align: left;
    transition: background 0.2s ease, color 0.2s ease;
}

.sti-bp-next-label {
    font-size: 0.75rem;
    color: #64748b;
    margin-right: 0.3rem;
}

.sti-bp-next-left {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
}

.sti-bp-next.is-go {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.sti-bp-next.is-go .sti-bp-next-label {
    color: rgba(255, 255, 255, 0.85);
}

.sti-bp-next.is-go .sti-bp-next-left {
    background: #ffffff;
    color: #1d4ed8;
}

.sti-bp-paused {
    width: 100%;
    margin-top: 0.5rem;
    border: 1px dashed #fcd34d;
    background: #fffbeb;
    color: #92400e;
    border-radius: 0.65rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.sti-bp-pool-empty {
    display: none;
    text-align: center;
    color: #64748b;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 0.85rem;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
}

.sti-bp-pool-empty .bi {
    font-size: 1.5rem;
    color: #94a3b8;
}

@media (max-width: 991.98px) {
    /* Long help text folds behind the "How" button */
    .sti-batch-pick-scan .sti-bp-help {
        display: none;
    }

    .sti-batch-pick-scan .sti-bp-help.is-open {
        display: block;
    }

    /* One tab at a time */
    .sti-batch-pick-scan.mobile-tab-scan .sti-batch-pick-queue-section,
    .sti-batch-pick-scan.mobile-tab-scan .sti-batch-pick-pool-section,
    .sti-batch-pick-scan.mobile-tab-scan .sti-batch-pick-desk-section,
    .sti-batch-pick-scan.mobile-tab-queue .sti-batch-pick-scan-section,
    .sti-batch-pick-scan.mobile-tab-queue .sti-batch-pick-recent-section,
    .sti-batch-pick-scan.mobile-tab-queue .sti-batch-pick-pool-section,
    .sti-batch-pick-scan.mobile-tab-queue .sti-batch-pick-desk-section,
    .sti-batch-pick-scan.mobile-tab-pool .sti-batch-pick-scan-section,
    .sti-batch-pick-scan.mobile-tab-pool .sti-batch-pick-recent-section,
    .sti-batch-pick-scan.mobile-tab-pool .sti-batch-pick-queue-section {
        display: none !important;
    }

    .sti-batch-pick-scan.mobile-tab-pool .sti-bp-pool-empty {
        display: block;
    }

    /* Room for the pinned Send bar */
    .sti-batch-pick-scan {
        padding-bottom: 5rem !important;
    }
}

/* Send-to-desk confirm: bottom sheet on phones, centered card on desktop */
.sti-bp-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(15, 23, 42, 0.45);
    animation: stiBpFade 0.2s ease-out;
}

.sti-bp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    background: #ffffff;
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 30px -12px rgba(15, 23, 42, 0.35);
    animation: stiBpSheetUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sti-bp-sheet-grip {
    width: 2.5rem;
    height: 0.3rem;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 0 auto 0.75rem;
}

@media (min-width: 992px) {
    .sti-bp-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: 26rem;
        transform: translate(-50%, -50%);
        border-radius: 1rem;
        padding: 1.25rem;
        animation: stiBpFade 0.2s ease-out;
    }
}

@keyframes stiBpFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes stiBpSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Batch Pick: remaining count for the bin being scanned */
.sti-bp-bin-left {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

.sti-bp-bin-left.is-done {
    background: #64748b;
}

@media (max-width: 991.98px) {
    /* Bootstrap .row.g-3 pulls the layout up; keep the next-bin line fully visible */
    .sti-batch-pick-scan .sti-batch-pick-layout {
        margin-top: 0.25rem !important;
    }
}

/* Batch Pick: mobile pool list rows */
.sti-bp-pool-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid #f1f5f9;
}

.sti-bp-pool-row:first-child {
    border-top: 0;
}

.sti-bp-pool-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.1rem;
}

.sti-bp-pool-status {
    display: inline-block;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}

.sti-bp-pool-row .btn-outline-primary {
    border-color: #93c5fd;
    color: #1d4ed8;
    background: #ffffff;
    font-weight: 600;
    white-space: nowrap;
}

.sti-bp-pool-row .btn-outline-primary:hover {
    background: #eff6ff;
}

/* ===== Putaway screens (Pool + Cancelled STI) — mobile ===== */
@media (max-width: 767.98px) {
    /* Open / Put away tabs become a segmented control */
    .nav-tabs.ui-seg-tabs {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.2rem;
        background: #e2e8f0;
        border: 0;
        border-radius: 0.7rem;
        padding: 0.2rem;
    }

    .nav-tabs.ui-seg-tabs .nav-link {
        width: 100%;
        border: 0 !important;
        border-radius: 0.55rem;
        color: #475569;
        font-weight: 600;
        padding: 0.45rem 0.25rem;
        background: transparent;
    }

    .nav-tabs.ui-seg-tabs .nav-link.active {
        background: #ffffff;
        color: #1d4ed8;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }
}

.ui-pallet-card.is-selected {
    background: #eff6ff;
    border-color: #bfdbfe;
}

@media (max-width: 991.98px) {
    /* Plan screens: when a carton is being planned, show only the planning panel */
    .ui-plan-open > .ui-plan-cartons {
        display: none;
    }

    .ui-plan-panel {
        margin-bottom: 4.5rem;
    }

    /* Save Draft / Finalize pinned to the bottom */
    .ui-plan-savebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, 0.2);
    }

    .ui-plan-savebar .btn {
        padding: 0.6rem 0.5rem;
        font-weight: 600;
        border-radius: 0.65rem;
    }

    /* Scan screens: Confirm putaway pinned to the bottom */
    .ui-scan-confirm {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #e2e8f0;
        box-shadow: 0 -6px 16px -8px rgba(15, 23, 42, 0.2);
    }

    .ui-page:has(.ui-scan-confirm),
    .ui-page:has(.ui-plan-savebar) {
        padding-bottom: 5rem !important;
    }
}

/* Pinned bars (Confirm putaway / Save-Finalize) must stick to the screen, not the card.
   A transformed ancestor (card hover lift) makes position:fixed follow the card instead. */
@media (hover: none) {
    .ui-card:hover {
        transform: none;
    }
}

.ui-card:has(.ui-scan-confirm, .ui-plan-savebar),
.ui-card:has(.ui-scan-confirm, .ui-plan-savebar):hover {
    transform: none !important;
}

/* Sidebar logo — bigger and centered on desktop, compact in the mobile top bar */
/* wms-logo2-clear.png is wide (about 3.6 : 1) with a transparent background, made for the dark sidebar */
.wms-sidebar-logo {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 641px) {
    .wms-sidebar-header.top-row {
        min-height: 5.5rem;
        height: 5.5rem;
    }

    .wms-sidebar-header .wms-sidebar-brand {
        margin: 0 auto;
        padding: 0.25rem 0;
    }

    .wms-sidebar-logo {
        width: 240px;
    }
}

/* Scroll box with a sticky header row (e.g. Demand Fulfillment report).
   Only the outer table's header sticks; tables inside expanded rows are unaffected. */
.ui-sticky-head-scroll {
    max-height: calc(100vh - 14rem);
    min-height: 16rem;
    overflow: auto;
}

.ui-sticky-head-scroll > table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f8fafc;
    box-shadow: inset 0 -1px 0 #e2e8f0;
}

/* Stock KPI cards (Inventory): colored stripe, icon chip, value, short note */
.ui-kpi {
    --kpi: #475569;
    --kpi-bg: #f1f5f9;
    position: relative;
    height: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    padding: 0.6rem 0.8rem 0.6rem 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.ui-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--kpi);
}

.ui-kpi-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-kpi-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--kpi-bg);
    color: var(--kpi);
    font-size: 0.85rem;
}

.ui-kpi-icon .bi {
    margin: 0;
    top: 0;
    width: auto;
    height: auto;
}

.ui-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.25rem;
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.ui-kpi-note {
    font-size: 0.7rem;
    color: #94a3b8;
}

.ui-kpi--total { --kpi: #475569; --kpi-bg: #f1f5f9; }
.ui-kpi--held { --kpi: #d97706; --kpi-bg: #fef3c7; }
.ui-kpi--held .ui-kpi-value { color: #b45309; }
.ui-kpi--staged { --kpi: #0891b2; --kpi-bg: #cffafe; }
.ui-kpi--cancelled { --kpi: #dc2626; --kpi-bg: #fee2e2; }
.ui-kpi--pool { --kpi: #7c3aed; --kpi-bg: #ede9fe; }

.ui-kpi--available {
    --kpi: #16a34a;
    --kpi-bg: #dcfce7;
    background: #f7fef9;
    border-color: #86efac;
}

.ui-kpi--available .ui-kpi-value {
    color: #166534;
}

/* KPI card that filters the list on click (STR Loose summary). */
.ui-kpi--clickable {
    display: block;
    width: 100%;
    cursor: pointer;
    user-select: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ui-kpi--clickable:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.ui-kpi--clickable.is-active {
    border-color: var(--kpi);
    box-shadow: 0 0 0 2px var(--kpi-bg);
}

/* ECOM STI scan screens: item name on one line on PC; on a phone it wraps so the qty columns stay on screen. */
.ecom-sti-item-name {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ecom-sti-item-name {
        max-width: none;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* STI pick / trolley screens on a phone: one small card per SKU, done bins folded away. */
.sti-bp-lines { display: flex; flex-direction: column; gap: .4rem; padding: .4rem 0 .6rem; }
.sti-bp-line { border: 1px solid var(--ui-border, #dee2e6); border-radius: .5rem; padding: .45rem .6rem; background: #fff; min-width: 0; }
.sti-bp-line.is-done { background: #f8f9fa; opacity: .75; }
.sti-bp-line.is-wait { color: #6c757d; }
.sti-bp-line-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.sti-bp-line-big { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }
.sti-bp-line-big small { font-size: .7rem; font-weight: 500; }
.sti-bp-line-name { font-size: .78rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sti-bp-line-bottom { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .25rem; font-size: .75rem; color: #6c757d; min-width: 0; }
.sti-bp-done-fold { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: .6rem .85rem; border: 0; border-top: 1px solid var(--ui-border, #dee2e6); background: #f8f9fa; font-size: .85rem; color: #495057; }
@media (max-width: 991.98px) {
    .sti-bp-done-item:not(.is-shown) { display: none; }
}

/* STI pick / trolley scan screens on a phone: small step buttons, thin bar, sticky Back to Scan. */
.sti-bp-line-btn { padding: .3rem .7rem; font-size: .8rem; }
.sti-pk-backscan { position: sticky; bottom: .5rem; z-index: 20; margin-top: .75rem; }
.sti-pk-backscan .btn { padding: .65rem; box-shadow: 0 .35rem 1rem rgba(29, 78, 216, .3); }
@media (max-width: 991.98px) {
    .ecom-bin-pick .ecom-bp-steps { gap: .5rem; margin-bottom: .5rem !important; }
    .ecom-bin-pick .ecom-bp-step { padding: .4rem .6rem !important; gap: .45rem !important; border-radius: .6rem; box-shadow: none !important; }
    .ecom-bin-pick .ecom-bp-step-num { width: 1.5rem !important; height: 1.5rem !important; font-size: .8rem; }
    .ecom-bin-pick .ecom-bp-step-title { font-size: .9rem !important; letter-spacing: .03em; }
    .ecom-bin-pick .ecom-bp-step-count { font-size: 1.1rem !important; display: flex; align-items: baseline; gap: .25rem; }
    .ecom-bin-pick .ecom-bp-step-count small { display: inline !important; font-size: .65rem; }
    .sti-pk-progress { height: 4px; margin-bottom: .6rem !important; }
}

/* STI list on a phone: filters folded behind a button, count cards as chips, table rows as cards. */
@media (max-width: 991.98px) {
    .sti-list:not(.m-filters-open) .ui-filter-card .row.align-items-end > div:not(.sti-m-keep) { display: none; }
    .sti-list .ui-filter-card .card-body { padding: .75rem; }
    .sti-list .ui-filter-card .row.mt-2 { margin-top: .25rem !important; }

    .sti-list .sti-m-kpis { flex-wrap: nowrap; overflow-x: auto; gap: .4rem; margin: 0 0 .75rem; padding-bottom: .2rem; }
    .sti-list .sti-m-kpis > div { flex: 0 0 auto; width: auto; padding: 0; }
    .sti-list .sti-m-kpis .ui-kpi { display: flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; white-space: nowrap; }
    .sti-list .sti-m-kpis .ui-kpi::before { display: none; }
    .sti-list .sti-m-kpis .ui-kpi-icon, .sti-list .sti-m-kpis .ui-kpi-note { display: none; }
    .sti-list .sti-m-kpis .ui-kpi-head { font-size: .78rem; }
    .sti-list .sti-m-kpis .ui-kpi-value { font-size: .95rem; margin: 0; }

    .sti-m-cards, .sti-m-cards > tbody { display: block; width: 100%; }
    .sti-m-cards > thead { display: none; }
    .sti-m-cards > tbody > tr:not(.table-light) {
        display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .75rem;
        margin: .6rem; padding: .65rem .75rem; border: 1px solid #e2e8f0; border-radius: .6rem; background: #fff;
    }
    .sti-m-cards > tbody > tr > td { display: block; border: 0 !important; padding: 0 !important; text-align: left !important; flex: 1 1 28%; min-width: 0; background: transparent !important; box-shadow: none !important; }
    .sti-m-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; color: #94a3b8; font-weight: 600;
    }
    /* Cells wrap inside a card (long names / emails must not run into the next cell). */
    .sti-m-cards > tbody > tr:not(.table-light) > td,
    .sti-m-cards > tbody > tr:not(.table-light) > td .text-nowrap { white-space: normal !important; overflow-wrap: anywhere; }
    /* First line: toggle · batch no · status, alone on their line. */
    .sti-m-cards > tbody > tr > td.sti-m-toggle { flex: 0 0 auto; }
    .sti-m-cards > tbody > tr > td.sti-m-title { flex: 1 1 calc(100% - 9rem); font-size: 1rem; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
    .sti-m-cards > tbody > tr > td.sti-m-status { flex: 0 0 auto; margin-left: auto; text-align: right !important; }
    .sti-m-cards > tbody > tr > td.sti-m-full { flex: 0 0 100%; }
    .sti-m-cards > tbody > tr > td.sti-m-hide { display: none; }
    .sti-m-cards > tbody > tr > td.sti-m-actions { flex: 0 0 100%; display: flex; gap: .4rem; }
    .sti-m-cards > tbody > tr > td.sti-m-actions > .btn,
    .sti-m-cards > tbody > tr > td.sti-m-actions > .btn-group > .btn { flex: 1 1 0; margin: 0 !important; padding-top: .45rem; padding-bottom: .45rem; }
    .sti-m-cards > tbody > tr > td.sti-m-actions > .btn-group { display: flex; width: 100%; }
    /* Expanded lines under a card: their own sideways scroll. */
    .sti-m-cards > tbody > tr.table-light { display: block; margin: -.4rem .6rem .6rem; }
    .sti-m-cards > tbody > tr.table-light > td { display: block; overflow-x: auto; }
    .sti-m-cards > tbody > tr.table-light > td:empty { display: none; }
    /* "No batches found" row. */
    .sti-m-cards > tbody > tr > td[colspan] { flex: 0 0 100%; text-align: center !important; }
}