/* =========================================
   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: #0d9488;
    --ui-primary-hover: #0f766e;
    --ui-primary-soft: #ccfbf1;
    --ui-dark-surface: #0c1929;
    --ui-dark-surface-2: #1e3a5f;
    --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 */
.bg-primary, .bg-secondary, .bg-dark, .bg-success, .bg-danger, .bg-info, .bg-warning,
.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.bg-warning,
.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 *, .bg-warning *,
.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.bg-warning *,
.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, .bg-warning .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.bg-warning .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;
}

.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: #14b8a6 !important;
        box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22) !important;
    }

/* Upgrade Buttons */
.btn-primary {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%) !important;
    border-color: #0d9488 !important;
    border-radius: 0.65rem;
    box-shadow: 0 8px 20px -12px rgba(13, 148, 136, 0.55);
    font-weight: 600;
}

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

.btn-outline-primary {
    border-radius: 0.65rem;
    border-color: #99f6e4;
    color: #0f766e;
}

.btn-outline-primary:hover {
    background-color: #f0fdfa;
    border-color: #5eead4;
    color: #115e59;
}

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

.content .ui-page .card.shadow-sm::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0d9488, #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: #f0fdfa;
    border-color: #99f6e4;
    color: #0f766e;
}

.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(13, 148, 136, 0.1);
    font-weight: 600;
}

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

.sti-batch-pick-scan .sti-batch-pick-bin-block.is-open.is-active > .sti-batch-pick-bin-header {
    background: rgba(13, 148, 136, 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(13, 148, 136, 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;
}

@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: #14b8a6;
            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, #2dd4bf, #38bdf8);
    box-shadow: 0 0 0 6px rgba(45, 212, 191, 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: #14b8a6;
}

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

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

.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, #0d9488, #0284c7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px -4px rgba(13, 148, 136, 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;
}

.ui-filter-card:has(.searchable-select.is-open),
.ui-filter-card:has(.searchable-select:has(.searchable-select-dropdown)) {
    overflow: visible;
    position: relative;
    z-index: 3000;
}

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

.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: #f0fdfa;
}

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

.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: #ccfbf1 !important;
    color: #115e59 !important;
    border: 1px solid #99f6e4;
}

.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, #0d9488);
}

/* 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, #0d9488, #0891b2);
    color: #fff;
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.25);
    animation: gdcPulse 1.8s ease-in-out infinite;
}

.gdc-step.gdc-step-current .gdc-step-title {
    color: #0f766e;
}

.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%, #0d9488 55%, #e2e8f0 100%);
}

@keyframes gdcPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(13, 148, 136, 0.08); }
}

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

.login-hero {
    display: none;
    flex: 1;
    background:
        linear-gradient(135deg, rgba(13, 148, 136, 0.15) 0%, transparent 50%),
        linear-gradient(160deg, #0c1929 0%, #134e4a 50%, #0f766e 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(45, 212, 191, 0.25), rgba(56, 189, 248, 0.2));
    border: 1px solid rgba(45, 212, 191, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #5eead4;
}

.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: #2dd4bf;
}

.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, #0d9488, #38bdf8);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 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: #0f766e;
    border-color: #0d9488;
    background: #f0fdfa;
}

/* 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: #ccfbf1; color: #0f766e; }
.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: #ccfbf1; 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 */
.ui-txn-summary-header.card-header {
    background: linear-gradient(90deg, #0c1929, #1e3a5f) !important;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0.65rem;
    padding: 0.25rem;
    gap: 0.25rem;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs .nav-link {
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid transparent;
    font-weight: 600;
}

.ui-txn-summary-header .nav.nav-pills.cross-pick-list-tabs .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

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

.card-header.bg-primary,
.card-header.text-white {
    background: linear-gradient(90deg, #0c1929 0%, #134e4a 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: #ccfbf1;
    color: #0f766e;
}

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