/* _content/WMS.UI/Pages/Inbound/GoodsReceive.razor.rz.scp.css */
.receive-page[b-gvlvh288ne] {
    --blue: #1269d3;
    --ink: #112442;
    --muted: #718096;
    --line: #d8e3f0;
    min-height: 100%;
    padding: 18px;
    color: var(--ink);
    background: #f3f7fc
}

.receive-header[b-gvlvh288ne] {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px
}

.eyebrow[b-gvlvh288ne], .stage-kicker[b-gvlvh288ne], .result-kicker[b-gvlvh288ne] {
    color: var(--blue);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .14em
}

.receive-header h1[b-gvlvh288ne] {
    margin: 3px 0 1px;
    font-size: 25px;
    font-weight: 850
}

.receive-header p[b-gvlvh288ne] {
    margin: 0;
    color: var(--muted);
    font-size: 10px
}

.new-document-button[b-gvlvh288ne] {
    height: 38px;
    padding: 0 13px;
    color: #16436f;
    background: #fff;
    border: 1px solid #cbd9e9;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 750
}

.stepper[b-gvlvh288ne] {
    margin-bottom: 12px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px
}

.step[b-gvlvh288ne] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8b98a9
}

    .step:not(:last-child)[b-gvlvh288ne]::after {
        content: "";
        position: absolute;
        top: 17px;
        right: 12px;
        width: calc(100% - 132px);
        height: 2px;
        background: #e4ebf3
    }

    .step > span[b-gvlvh288ne] {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        display: grid;
        place-items: center;
        background: #eef3f8;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 850
    }

    .step div[b-gvlvh288ne] {
        display: grid
    }

    .step small[b-gvlvh288ne] {
        font-size: 7px;
        font-weight: 850;
        letter-spacing: .08em
    }

    .step strong[b-gvlvh288ne] {
        font-size: 10px
    }

    .step.current[b-gvlvh288ne] {
        color: var(--blue)
    }

        .step.current > span[b-gvlvh288ne] {
            color: #fff;
            background: var(--blue);
            box-shadow: 0 0 0 4px #e3efff
        }

    .step.complete[b-gvlvh288ne] {
        color: #078653
    }

        .step.complete > span[b-gvlvh288ne] {
            color: #fff;
            background: #0ca866
        }

        .step.complete[b-gvlvh288ne]::after {
            background: #8ed9b5
        }

.receive-message[b-gvlvh288ne] {
    margin-bottom: 10px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    font-size: 10px
}

    .receive-message.success[b-gvlvh288ne] {
        color: #087847;
        background: #e8f8ef;
        border: 1px solid #bdebd1
    }

    .receive-message.error[b-gvlvh288ne] {
        color: #a8251b;
        background: #fff0ee;
        border: 1px solid #f5cbc6
    }

    .receive-message button[b-gvlvh288ne] {
        margin-left: auto;
        padding: 0;
        color: inherit;
        background: none;
        border: 0
    }

.receive-workspace[b-gvlvh288ne] {
    display: grid;
    grid-template-columns: minmax(0,1.55fr) minmax(315px,.7fr);
    gap: 12px
}

.scan-panel[b-gvlvh288ne], .document-panel[b-gvlvh288ne] {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(28,70,118,.05)
}

.scan-panel[b-gvlvh288ne] {
    min-height: 530px;
    padding: 22px
}

.scan-stage[b-gvlvh288ne] {
    min-height: 440px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

    .scan-stage.compact[b-gvlvh288ne] {
        min-height: 400px
    }

.stage-icon[b-gvlvh288ne] {
    width: 62px;
    height: 62px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: #e5f0ff;
    border-radius: 17px;
    font-size: 24px
}

.scan-stage h2[b-gvlvh288ne] {
    margin: 4px 0;
    font-size: 20px
}

.scan-stage p[b-gvlvh288ne] {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 10px
}

.scan-input-wrap[b-gvlvh288ne] {
    width: min(640px,100%);
    height: 48px;
    padding: 0 5px 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid #b8d2f1;
    border-radius: 11px;
    box-shadow: 0 7px 20px rgba(20,91,174,.08)
}

    .scan-input-wrap:focus-within[b-gvlvh288ne] {
        border-color: var(--blue);
        box-shadow: 0 0 0 3px #e2efff
    }

    .scan-input-wrap > i[b-gvlvh288ne] {
        color: var(--blue);
        font-size: 16px
    }

    .scan-input-wrap input[b-gvlvh288ne] {
        min-width: 0;
        flex: 1;
        height: 100%;
        border: 0;
        outline: 0;
        font-size: 12px
    }

    .scan-input-wrap > button[b-gvlvh288ne] {
        height: 36px;
        padding: 0 14px;
        color: #fff;
        background: var(--blue);
        border: 0;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 750
    }

.document-panel[b-gvlvh288ne] {
    overflow: hidden
}

    .document-panel > header[b-gvlvh288ne] {
        padding: 15px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid var(--line)
    }

    .document-panel header span:first-child[b-gvlvh288ne] {
        color: var(--muted);
        font-size: 9px
    }

    .document-panel h2[b-gvlvh288ne] {
        margin: 2px 0 0;
        font-size: 17px
    }

.status-pill[b-gvlvh288ne] {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 850
}

    .status-pill.waiting[b-gvlvh288ne] {
        color: #6e7c8f;
        background: #eef2f6
    }

    .status-pill.active[b-gvlvh288ne] {
        color: #087a49;
        background: #e2f7eb
    }

.empty-document[b-gvlvh288ne] {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: #8b98aa;
    text-align: center
}

    .empty-document i[b-gvlvh288ne] {
        font-size: 30px
    }

    .empty-document p[b-gvlvh288ne] {
        width: 220px;
        font-size: 10px
    }

.document-meta[b-gvlvh288ne] {
    padding: 12px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

    .document-meta span[b-gvlvh288ne] {
        padding: 9px;
        display: grid;
        background: #f5f8fc;
        border-radius: 8px
    }

    .document-meta small[b-gvlvh288ne] {
        color: var(--muted);
        font-size: 8px
    }

    .document-meta strong[b-gvlvh288ne] {
        font-size: 11px
    }

.document-progress[b-gvlvh288ne] {
    padding: 0 15px 12px
}

    .document-progress > div:first-child[b-gvlvh288ne] {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        font-size: 9px
    }

.progress-track[b-gvlvh288ne] {
    height: 7px;
    overflow: hidden;
    background: #e8eef5;
    border-radius: 99px
}

    .progress-track span[b-gvlvh288ne] {
        height: 100%;
        display: block;
        background: #12aa68;
        border-radius: inherit
    }

.line-list[b-gvlvh288ne] {
    max-height: 355px;
    padding: 0 10px 10px;
    overflow: auto
}

.line-item[b-gvlvh288ne] {
    width: 100%;
    padding: 9px 7px;
    display: grid;
    grid-template-columns: 31px minmax(0,1fr) 55px;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    background: #fff;
    border: 0;
    border-top: 1px solid #e7edf5;
    text-align: left
}

    .line-item:hover:not(:disabled)[b-gvlvh288ne] {
        background: #f3f8ff
    }

    .line-item > span:nth-child(2)[b-gvlvh288ne] {
        min-width: 0;
        display: grid
    }

    .line-item strong[b-gvlvh288ne], .line-item small[b-gvlvh288ne] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .line-item strong[b-gvlvh288ne] {
        font-size: 10px
    }

    .line-item small[b-gvlvh288ne] {
        color: var(--muted);
        font-size: 8px
    }

    .line-item > span:last-child[b-gvlvh288ne] {
        display: grid;
        text-align: right
    }

.line-status[b-gvlvh288ne] {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: #e7f1ff;
    border-radius: 8px
}

.line-item.done[b-gvlvh288ne] {
    opacity: .62
}

    .line-item.done .line-status[b-gvlvh288ne] {
        color: #078653;
        background: #e1f6eb
    }

.selected-product[b-gvlvh288ne] {
    max-width: 820px;
    margin: auto
}

.product-heading[b-gvlvh288ne] {
    padding-bottom: 15px;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line)
}

.product-icon[b-gvlvh288ne] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: #e7f1ff;
    border-radius: 11px
}

.product-heading small[b-gvlvh288ne] {
    color: var(--muted);
    font-size: 8px
}

.product-heading h2[b-gvlvh288ne] {
    margin: 1px 0;
    font-size: 17px
}

.product-heading p[b-gvlvh288ne] {
    margin: 0;
    color: var(--muted);
    font-size: 9px
}

.product-heading button[b-gvlvh288ne] {
    padding: 7px 10px;
    color: #45617f;
    background: #fff;
    border: 1px solid #d6e0eb;
    border-radius: 8px;
    font-size: 9px
}

.quantity-summary[b-gvlvh288ne] {
    margin: 13px 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

    .quantity-summary > div[b-gvlvh288ne] {
        padding: 10px 12px;
        display: grid;
        background: #f5f8fc;
        border-radius: 9px
    }

    .quantity-summary small[b-gvlvh288ne] {
        color: var(--muted);
        font-size: 8px
    }

    .quantity-summary strong[b-gvlvh288ne] {
        font-size: 16px
    }

    .quantity-summary .available[b-gvlvh288ne] {
        color: #078653
    }

.quantity-section[b-gvlvh288ne], .serial-section[b-gvlvh288ne], .pallet-section[b-gvlvh288ne] {
    margin-top: 13px;
    padding: 13px;
    background: #f8fafd;
    border: 1px solid #e2eaf3;
    border-radius: 10px
}

    .quantity-section label[b-gvlvh288ne], .pallet-section label[b-gvlvh288ne] {
        display: block;
        margin-bottom: 7px;
        font-size: 10px;
        font-weight: 750
    }

.quantity-control[b-gvlvh288ne] {
    display: flex;
    align-items: center
}

    .quantity-control button[b-gvlvh288ne] {
        width: 38px;
        height: 38px;
        color: var(--blue);
        background: #e5f0ff;
        border: 0;
        border-radius: 8px
    }

    .quantity-control input[b-gvlvh288ne] {
        width: 120px;
        height: 38px;
        margin: 0 6px;
        border: 1px solid #cbd9e8;
        border-radius: 8px;
        text-align: center;
        font-size: 16px;
        font-weight: 800
    }

    .quantity-control span[b-gvlvh288ne] {
        margin-left: 7px;
        color: var(--muted);
        font-size: 10px
    }

.section-title[b-gvlvh288ne] {
    margin-bottom: 9px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between
}

    .section-title span[b-gvlvh288ne] {
        color: var(--blue);
        font-size: 7px;
        font-weight: 850;
        letter-spacing: .12em
    }

    .section-title h3[b-gvlvh288ne] {
        margin: 1px 0 0;
        font-size: 12px
    }

    .section-title > strong[b-gvlvh288ne] {
        font-size: 13px
    }

.scan-input-wrap.small[b-gvlvh288ne], .scan-input-wrap.pallet[b-gvlvh288ne] {
    width: 100%;
    height: 42px;
    box-shadow: none;
    border-width: 1px
}

.serial-list[b-gvlvh288ne] {
    max-height: 93px;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow: auto
}

    .serial-list > span[b-gvlvh288ne] {
        padding: 5px 7px;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #164e89;
        background: #e8f2ff;
        border: 1px solid #c8def8;
        border-radius: 7px;
        font-size: 8px;
        font-weight: 700
    }

    .serial-list button[b-gvlvh288ne] {
        padding: 0;
        color: #6886a8;
        background: none;
        border: 0
    }

.empty-serial[b-gvlvh288ne] {
    width: 100%;
    padding: 12px !important;
    justify-content: center;
    color: #8a98a9 !important;
    background: #fff !important;
    border-style: dashed !important
}

.quantity-note[b-gvlvh288ne] {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 8px
}

.valid-mark[b-gvlvh288ne] {
    color: #078653;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap
}

.confirm-receive[b-gvlvh288ne] {
    width: 100%;
    height: 44px;
    margin-top: 14px;
    color: #fff;
    background: #0c9b5d;
    border: 0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800
}

    .confirm-receive:disabled[b-gvlvh288ne] {
        cursor: not-allowed;
        opacity: .45
    }

.dialog-backdrop[b-gvlvh288ne] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(12,27,48,.56);
    backdrop-filter: blur(2px)
}

.receive-dialog[b-gvlvh288ne] {
    width: min(410px,100%);
    padding: 24px;
    text-align: center;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 25px 70px rgba(7,27,55,.25)
}

.dialog-icon[b-gvlvh288ne] {
    width: 54px;
    height: 54px;
    margin: 0 auto 11px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: #e5f0ff;
    border-radius: 14px;
    font-size: 20px
}

    .dialog-icon.success[b-gvlvh288ne] {
        color: #078653;
        background: #e1f6eb
    }

.receive-dialog h2[b-gvlvh288ne] {
    margin: 4px 0;
    font-size: 19px
}

.receive-dialog > p[b-gvlvh288ne] {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 10px
}

.receive-dialog dl[b-gvlvh288ne] {
    margin: 0 0 17px;
    padding: 6px 13px;
    background: #f6f9fc;
    border-radius: 9px
}

    .receive-dialog dl div[b-gvlvh288ne] {
        padding: 7px 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e4ebf3
    }

        .receive-dialog dl div:last-child[b-gvlvh288ne] {
            border-bottom: 0
        }

.receive-dialog dt[b-gvlvh288ne] {
    color: var(--muted);
    font-size: 9px
}

.receive-dialog dd[b-gvlvh288ne] {
    margin: 0;
    font-size: 10px;
    font-weight: 800
}

.dialog-actions[b-gvlvh288ne] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

    .dialog-actions.stacked[b-gvlvh288ne] {
        grid-template-columns: 1fr
    }

    .dialog-actions button[b-gvlvh288ne] {
        height: 39px
    }

@media(max-width:1000px) {
    .receive-workspace[b-gvlvh288ne] {
        grid-template-columns: 1fr
    }

    .scan-panel[b-gvlvh288ne] {
        min-height: 430px
    }

    .scan-stage[b-gvlvh288ne] {
        min-height: 340px
    }

    .document-panel[b-gvlvh288ne] {
        order: -1
    }

    .empty-document[b-gvlvh288ne] {
        min-height: 120px
    }
}

@media(max-width:620px) {
    .receive-page[b-gvlvh288ne] {
        padding: 11px
    }

    .receive-header[b-gvlvh288ne] {
        align-items: flex-start;
        flex-direction: column
    }

    .stepper[b-gvlvh288ne] {
        padding: 8px;
        gap: 3px
    }

    .step[b-gvlvh288ne] {
        justify-content: center
    }

        .step:not(:last-child)[b-gvlvh288ne]::after {
            display: none
        }

        .step div[b-gvlvh288ne] {
            display: none
        }

    .scan-panel[b-gvlvh288ne] {
        padding: 14px
    }

    .scan-input-wrap > button[b-gvlvh288ne] {
        padding: 0 9px
    }

    .quantity-summary[b-gvlvh288ne] {
        grid-template-columns: 1fr
    }

    .product-heading[b-gvlvh288ne] {
        grid-template-columns: 48px minmax(0,1fr)
    }

        .product-heading > button[b-gvlvh288ne] {
            grid-column: 1/-1
        }
}

/* Keep operational text legible on workstation screens without changing the compact layout. */
.eyebrow[b-gvlvh288ne], .stage-kicker[b-gvlvh288ne], .result-kicker[b-gvlvh288ne] { font-size: 11px }
.receive-header p[b-gvlvh288ne], .scan-stage p[b-gvlvh288ne] { font-size: 13px }
.new-document-button[b-gvlvh288ne], .scan-input-wrap > button[b-gvlvh288ne], .product-heading button[b-gvlvh288ne] { font-size: 12px }
.step > span[b-gvlvh288ne], .step strong[b-gvlvh288ne] { font-size: 13px }
.step small[b-gvlvh288ne] { font-size: 10px }
.receive-message[b-gvlvh288ne] { font-size: 13px }
.scan-input-wrap input[b-gvlvh288ne] { font-size: 14px }
.document-panel header span:first-child[b-gvlvh288ne], .status-pill[b-gvlvh288ne] { font-size: 11px }
.empty-document p[b-gvlvh288ne] { font-size: 13px }
.document-meta small[b-gvlvh288ne] { font-size: 11px }
.document-meta strong[b-gvlvh288ne] { font-size: 14px }
.document-progress > div:first-child[b-gvlvh288ne] { font-size: 12px }
.line-item strong[b-gvlvh288ne] { font-size: 13px }
.line-item small[b-gvlvh288ne] { font-size: 11px }
.product-heading small[b-gvlvh288ne] { font-size: 11px }
.product-heading p[b-gvlvh288ne] { font-size: 12px }
.quantity-summary small[b-gvlvh288ne] { font-size: 11px }
.quantity-summary strong[b-gvlvh288ne] { font-size: 18px }
.quantity-section label[b-gvlvh288ne], .pallet-section label[b-gvlvh288ne] { font-size: 13px }
.quantity-control span[b-gvlvh288ne] { font-size: 12px }
.section-title span[b-gvlvh288ne] { font-size: 10px }
.section-title h3[b-gvlvh288ne] { font-size: 15px }
.section-title > strong[b-gvlvh288ne] { font-size: 15px }
.serial-list > span[b-gvlvh288ne], .quantity-note[b-gvlvh288ne] { font-size: 11px }
.valid-mark[b-gvlvh288ne] { font-size: 12px }
.confirm-receive[b-gvlvh288ne] { font-size: 13px }
.receive-dialog > p[b-gvlvh288ne] { font-size: 13px }
.receive-dialog dt[b-gvlvh288ne] { font-size: 12px }
.receive-dialog dd[b-gvlvh288ne] { font-size: 13px }
/* _content/WMS.UI/Pages/Inbound/NewDesign/InboundOrderDocumentEditor.razor.rz.scp.css */
.iod-overlay[b-dqms33a5p0],.iod-picker-overlay[b-dqms33a5p0]{position:fixed;inset:0;z-index:1060;background:rgba(15,23,42,.56);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}.iod-dialog[b-dqms33a5p0]{width:min(1500px,calc(100vw - 36px));height:min(900px,calc(100vh - 36px));background:#f5f7fb;border-radius:16px;box-shadow:0 28px 80px rgba(15,23,42,.3);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;color:#14213d}.iod-header[b-dqms33a5p0]{min-height:82px;padding:16px 22px;background:#fff;border-bottom:1px solid #dce5f1;display:flex;align-items:center;justify-content:space-between}.iod-title-group[b-dqms33a5p0]{display:flex;align-items:center;gap:14px}.iod-title-icon[b-dqms33a5p0]{width:46px;height:46px;border-radius:12px;background:#e8f1ff;color:#1769d2;display:grid;place-items:center;font-size:20px}.iod-eyebrow[b-dqms33a5p0]{display:block;color:#2670da;font-size:10px;font-weight:800;letter-spacing:.13em}.iod-title-group h2[b-dqms33a5p0]{font-size:20px;line-height:1.25;margin:3px 0}.iod-title-group p[b-dqms33a5p0],.iod-section-heading p[b-dqms33a5p0]{margin:0;color:#718096;font-size:12px}.iod-header-status[b-dqms33a5p0]{display:flex;align-items:center;gap:14px}.iod-header-status>span[b-dqms33a5p0]{padding:6px 11px;border-radius:999px;background:#fff7df;color:#976600;font-size:11px;font-weight:700}.iod-header-status>span i[b-dqms33a5p0]{font-size:7px}.iod-icon-button[b-dqms33a5p0],.iod-picker header button[b-dqms33a5p0]{border:0;background:#eef2f7;border-radius:9px;width:36px;height:36px;color:#53647d;font-size:17px}.iod-body[b-dqms33a5p0]{padding:16px 20px;overflow:auto}.iod-alert[b-dqms33a5p0]{display:flex;gap:9px;align-items:center;background:#fff0f0;border:1px solid #ffcaca;color:#bb2d3b;border-radius:9px;padding:9px 13px;margin-bottom:12px;font-size:12px}.iod-section[b-dqms33a5p0]{background:#fff;border:1px solid #dce5f1;border-radius:12px;margin-bottom:14px;box-shadow:0 3px 12px rgba(30,64,175,.04)}.iod-document-section[b-dqms33a5p0]{padding:15px 18px}.iod-section-heading[b-dqms33a5p0]{display:flex;align-items:center;gap:10px;margin-bottom:14px}.iod-section-heading h3[b-dqms33a5p0]{font-size:14px;margin:0 0 2px;font-weight:800}.iod-step[b-dqms33a5p0]{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;background:#1f6fd1;font-size:12px;font-weight:800}.iod-form-grid[b-dqms33a5p0]{display:grid;grid-template-columns:1.05fr .8fr .9fr 1fr;gap:12px}.iod-field[b-dqms33a5p0]{display:flex;flex-direction:column;gap:5px}.iod-field>span[b-dqms33a5p0]{font-size:11px;font-weight:700;color:#465974}.iod-field.required>span[b-dqms33a5p0]:after{content:" *";color:#e33b45}.iod-field-wide[b-dqms33a5p0]{grid-column:span 3}.iod-field input[b-dqms33a5p0],.iod-field select[b-dqms33a5p0],.iod-table input[b-dqms33a5p0],.iod-table textarea[b-dqms33a5p0],.iod-picker-search input[b-dqms33a5p0]{border:1px solid #ccd8e8;border-radius:8px;background:#fff;color:#16233b;min-height:38px;padding:7px 10px;font-size:12px;outline:0;width:100%}.iod-field input:focus[b-dqms33a5p0],.iod-field select:focus[b-dqms33a5p0],.iod-table input:focus[b-dqms33a5p0],.iod-table textarea:focus[b-dqms33a5p0],.iod-picker-search:focus-within[b-dqms33a5p0]{border-color:#2d75d5;box-shadow:0 0 0 3px rgba(45,117,213,.1)}.iod-field input:disabled[b-dqms33a5p0],.iod-field select:disabled[b-dqms33a5p0]{background:#eef2f7;color:#65748a}.iod-lines-section[b-dqms33a5p0]{overflow:hidden}.iod-lines-heading[b-dqms33a5p0]{padding:14px 16px;margin:0;border-bottom:1px solid #e3eaf3}.iod-lines-summary[b-dqms33a5p0]{margin-left:auto;display:flex;align-items:center;gap:14px;color:#65748a;font-size:11px}.iod-lines-summary strong[b-dqms33a5p0]{color:#16233b;font-size:14px}.iod-add-product[b-dqms33a5p0],.iod-save[b-dqms33a5p0]{border:0;border-radius:8px;background:#1769d2;color:#fff;font-weight:700;padding:9px 14px;font-size:12px;box-shadow:0 5px 12px rgba(23,105,210,.2)}.iod-add-product:disabled[b-dqms33a5p0]{opacity:.45}.iod-empty[b-dqms33a5p0]{border:1px dashed #b9c8da;background:#f9fbfd;margin:18px;width:calc(100% - 36px);min-height:150px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#52657f}.iod-empty>span[b-dqms33a5p0]{width:44px;height:44px;border-radius:50%;background:#e8f1ff;color:#1769d2;display:grid;place-items:center;font-size:19px;margin-bottom:8px}.iod-empty small[b-dqms33a5p0]{color:#8795a9;margin-top:3px}.iod-table-wrap[b-dqms33a5p0]{overflow:auto;max-height:430px}.iod-table[b-dqms33a5p0]{width:100%;border-collapse:separate;border-spacing:0;min-width:1150px;font-size:11px}.iod-table th[b-dqms33a5p0]{position:sticky;top:0;z-index:1;background:#1f66b8;color:#fff;text-align:left;padding:10px 9px;font-weight:700}.iod-table td[b-dqms33a5p0]{padding:8px 9px;border-bottom:1px solid #e5ebf3;vertical-align:middle;background:#fff}.iod-table tr:hover td[b-dqms33a5p0]{background:#f8fbff}.iod-table th:first-child[b-dqms33a5p0],.iod-table td:first-child[b-dqms33a5p0]{width:42px;text-align:center}.iod-table th:nth-child(2)[b-dqms33a5p0]{width:265px}.iod-table th:nth-child(3)[b-dqms33a5p0]{width:105px}.iod-table th:nth-child(4)[b-dqms33a5p0]{width:150px}.iod-table th:nth-child(5)[b-dqms33a5p0]{width:145px}.iod-table th:nth-child(6)[b-dqms33a5p0]{width:270px}.iod-line-number[b-dqms33a5p0]{font-weight:800;color:#718096}.iod-product[b-dqms33a5p0]{display:flex;flex-direction:column}.iod-product span[b-dqms33a5p0]{font-weight:800;color:#1769d2}.iod-product strong[b-dqms33a5p0]{font-size:11px;margin:2px 0}.iod-product small[b-dqms33a5p0]{color:#8795a9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.iod-table textarea[b-dqms33a5p0]{resize:vertical;min-height:48px}.iod-serial-field small[b-dqms33a5p0]{display:block;text-align:right;margin-top:3px;font-weight:700}.iod-serial-field small.valid[b-dqms33a5p0]{color:#13965a}.iod-serial-field small.invalid[b-dqms33a5p0]{color:#d24b56}.iod-no-serial[b-dqms33a5p0]{color:#99a6b7}.iod-remove[b-dqms33a5p0]{width:32px;height:32px;border:1px solid #ffc8cc;border-radius:7px;background:#fff5f5;color:#dc3545}.iod-footer[b-dqms33a5p0]{min-height:66px;background:#fff;border-top:1px solid #dce5f1;display:flex;align-items:center;justify-content:flex-end;gap:9px;padding:12px 20px}.iod-footer>div[b-dqms33a5p0]{margin-right:auto;color:#708096;font-size:11px}.iod-footer>div i[b-dqms33a5p0]{color:#1aa267;margin-right:5px}.iod-cancel[b-dqms33a5p0]{border:1px solid #ccd7e5;background:#fff;color:#465974;border-radius:8px;padding:9px 18px;font-weight:700;font-size:12px}.iod-save[b-dqms33a5p0]{min-width:145px}.iod-save:disabled[b-dqms33a5p0]{opacity:.65}.iod-picker-overlay[b-dqms33a5p0]{z-index:1070}.iod-picker[b-dqms33a5p0]{width:min(820px,calc(100vw - 40px));height:min(720px,calc(100vh - 40px));border-radius:14px;background:#f5f7fb;box-shadow:0 25px 70px rgba(15,23,42,.35);display:grid;grid-template-rows:auto auto 1fr auto;overflow:hidden}.iod-picker header[b-dqms33a5p0]{background:#fff;border-bottom:1px solid #dce5f1;padding:16px 18px;display:flex;justify-content:space-between}.iod-picker header span[b-dqms33a5p0]{font-size:9px;color:#2670da;font-weight:800;letter-spacing:.13em}.iod-picker header h3[b-dqms33a5p0]{font-size:18px;margin:2px 0}.iod-picker header p[b-dqms33a5p0]{font-size:11px;color:#718096;margin:0}.iod-picker-search[b-dqms33a5p0]{margin:13px 15px;border:1px solid #ccd8e8;background:#fff;border-radius:9px;display:flex;align-items:center;padding-left:12px;color:#7e8da2}.iod-picker-search input[b-dqms33a5p0]{border:0;box-shadow:none!important}.iod-product-list[b-dqms33a5p0]{overflow:auto;padding:0 15px 12px}.iod-product-option[b-dqms33a5p0]{width:100%;display:grid;grid-template-columns:40px 1fr auto 30px;align-items:center;gap:10px;border:1px solid #dce5f1;border-radius:9px;background:#fff;margin-bottom:7px;padding:9px 11px;text-align:left;color:#1b2a44}.iod-product-option:hover[b-dqms33a5p0]{border-color:#5590df;background:#f7fbff}.iod-product-avatar[b-dqms33a5p0]{width:38px;height:38px;border-radius:9px;background:#e8f1ff;color:#1769d2;display:grid;place-items:center}.iod-product-copy[b-dqms33a5p0]{display:flex;flex-direction:column;min-width:0}.iod-product-copy strong[b-dqms33a5p0]{font-size:12px;color:#1769d2}.iod-product-copy span[b-dqms33a5p0]{font-size:11px;font-weight:700}.iod-product-copy small[b-dqms33a5p0]{font-size:10px;color:#8996a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iod-serial-badge[b-dqms33a5p0]{background:#fff1dd;color:#b46a00;padding:4px 7px;border-radius:5px;font-size:9px;font-weight:800}.iod-product-add-icon[b-dqms33a5p0]{color:#1769d2}.iod-picker-empty[b-dqms33a5p0]{height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8795a9}.iod-picker-empty i[b-dqms33a5p0]{font-size:28px}.iod-picker footer[b-dqms33a5p0]{background:#fff;border-top:1px solid #dce5f1;padding:11px 15px;display:flex;justify-content:space-between;align-items:center;color:#718096;font-size:10px}.iod-picker footer button[b-dqms33a5p0]{border:0;border-radius:7px;background:#1769d2;color:#fff;padding:8px 16px;font-weight:700}

.iod-serial-list[b-dqms33a5p0] {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}
@media(max-width:900px){.iod-overlay[b-dqms33a5p0]{padding:0}.iod-dialog[b-dqms33a5p0]{width:100vw;height:100vh;border-radius:0}.iod-form-grid[b-dqms33a5p0]{grid-template-columns:1fr 1fr}.iod-field-wide[b-dqms33a5p0]{grid-column:span 2}.iod-footer>div[b-dqms33a5p0]{display:none}}@media(max-width:580px){.iod-header[b-dqms33a5p0]{padding:12px}.iod-title-group p[b-dqms33a5p0],.iod-header-status>span[b-dqms33a5p0]{display:none}.iod-title-group h2[b-dqms33a5p0]{font-size:16px}.iod-body[b-dqms33a5p0]{padding:10px}.iod-form-grid[b-dqms33a5p0]{grid-template-columns:1fr}.iod-field-wide[b-dqms33a5p0]{grid-column:auto}.iod-lines-heading[b-dqms33a5p0]{align-items:flex-start;flex-wrap:wrap}.iod-lines-summary[b-dqms33a5p0]{width:100%;margin-left:38px;flex-wrap:wrap}.iod-footer[b-dqms33a5p0]{padding:10px}.iod-cancel[b-dqms33a5p0],.iod-save[b-dqms33a5p0]{flex:1}.iod-picker-overlay[b-dqms33a5p0]{padding:0}.iod-picker[b-dqms33a5p0]{width:100vw;height:100vh;border-radius:0}}
.iod-table select[b-dqms33a5p0] {
    width: 100%;
    min-width: 110px;
    min-height: 38px;
    padding: 0 10px;
    color: #17375e;
    background: #fff;
    border: 1px solid #ccd8e8;
    border-radius: 8px;
}

.iod-table select:focus[b-dqms33a5p0] {
    border-color: #2774c8;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(39, 116, 200, .12);
}
/* _content/WMS.UI/Pages/Inbound/NewDesign/InboundOrders.razor.rz.scp.css */
[b-isnm67ykhb] .inbound-report-transition {
    height: 100%;
    display: block;
}
.inbound-report-page[b-isnm67ykhb] {
    min-height: 100%;
    padding: 18px;
    background: #f4f7fb;
    color: #12213f;
}

.report-hero[b-isnm67ykhb] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.report-eyebrow[b-isnm67ykhb] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.report-heading h1[b-isnm67ykhb] {
    margin: 4px 0 3px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

.report-heading p[b-isnm67ykhb], .panel-heading p[b-isnm67ykhb] {
    margin: 0;
    color: #66758f;
    font-size: 13px;
}

.report-actions[b-isnm67ykhb] {
    display: flex;
    gap: 10px;
}

.report-button[b-isnm67ykhb] {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    background: #fff;
    color: #1c2b49;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 44, 88, .06);
}

    .report-button:hover[b-isnm67ykhb] {
        border-color: #2563eb;
        color: #2563eb;
    }

.report-summary[b-isnm67ykhb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.summary-card[b-isnm67ykhb] {
    min-width: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(30, 64, 120, .05);
}

.summary-icon[b-isnm67ykhb] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 19px;
}

.summary-card > div:last-child[b-isnm67ykhb] {
    min-width: 0;
    display: grid;
}

.summary-card span[b-isnm67ykhb] {
    color: #66758f;
    font-size: 12px;
}

.summary-card strong[b-isnm67ykhb] {
    font-size: 25px;
    line-height: 1.15;
}

.summary-card small[b-isnm67ykhb] {
    color: #8a98ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-card-primary .summary-icon[b-isnm67ykhb] {
    background: #e7efff;
    color: #2563eb;
}

.summary-card-success .summary-icon[b-isnm67ykhb] {
    background: #dcf8e8;
    color: #0f9f55;
}

.summary-card-info .summary-icon[b-isnm67ykhb] {
    background: #dcf7fb;
    color: #0891b2;
}

.summary-card-danger .summary-icon[b-isnm67ykhb] {
    background: #fee8e8;
    color: #dc2626;
}

.report-workspace[b-isnm67ykhb] {
    min-width: 0;
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 57, 105, .06);
}

[b-isnm67ykhb] .report-tabs > .tabs-header {
    padding: 0 16px;
    background: #f8fafc;
    border-bottom: 1px solid #dce4ef;
}

.report-tab[b-isnm67ykhb] {
    height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5d6c83;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 700;
}

    .report-tab.active[b-isnm67ykhb] {
        color: #2563eb;
        border-color: #2563eb;
        background: #fff;
    }

.report-panel[b-isnm67ykhb] {
    min-width: 0;
}

.panel-heading[b-isnm67ykhb] {
    min-height: 74px;
    padding: 15px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
}

    .panel-heading h2[b-isnm67ykhb] {
        margin: 0 0 3px;
        font-size: 17px;
        font-weight: 800;
    }

.live-badge[b-isnm67ykhb] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #d8fae8;
    color: #008a50;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}

    .live-badge i[b-isnm67ykhb] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #13c475;
    }

.report-table-shell[b-isnm67ykhb] {
    min-width: 0;
    height: clamp(440px, calc(100vh - 390px), 650px);
    padding: 10px 12px 12px;
    overflow: hidden;
}

[b-isnm67ykhb] .report-table-shell .table-container {
    max-width: 100%;
}

[b-isnm67ykhb] .report-table-shell .table-wrapper {
    max-width: 100%;
    overflow: auto;
}

[b-isnm67ykhb] .report-table-shell table {
    font-size: 13px;
}

[b-isnm67ykhb] .report-table-shell thead th {
    height: 43px;
    background: #1f65bb !important;
    color: #fff;
    border-color: rgba(255,255,255,.13) !important;
    vertical-align: middle;
}

[b-isnm67ykhb] .report-table-shell tbody td {
    height: 45px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-color: #e5eaf1 !important;
    vertical-align: middle;
}

[b-isnm67ykhb] .report-table-shell tbody tr:hover td {
    background: #f5f9ff;
}

[b-isnm67ykhb] .report-table-shell .table-toolbar {
    min-height: 52px;
    padding: 6px 0;
}

[b-isnm67ykhb] .report-table-shell .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-pill[b-isnm67ykhb] {
    min-height: 26px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-complete[b-isnm67ykhb] {
    background: #dcf8e8;
    color: #078447;
}

.status-receiving[b-isnm67ykhb] {
    background: #dff1ff;
    color: #0878bd;
}

.status-cancel[b-isnm67ykhb] {
    background: #fee6e6;
    color: #cf2727;
}

.status-close[b-isnm67ykhb] {
    background: #fff0cd;
    color: #a66500;
}

.status-new[b-isnm67ykhb] {
    background: #edf1f6;
    color: #526176;
}

.document-detail[b-isnm67ykhb] {
    margin: 10px 12px 16px;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid #cfdced;
    border-radius: 12px;
    box-shadow: inset 4px 0 #2563eb;
}

.detail-header[b-isnm67ykhb] {
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid #dce5f0;
}

.detail-title[b-isnm67ykhb] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-icon[b-isnm67ykhb] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e8f0ff;
    color: #2563eb;
}

.detail-title span[b-isnm67ykhb] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.detail-title h3[b-isnm67ykhb] {
    margin: 1px 0 2px;
    font-size: 16px;
    font-weight: 800;
}

.detail-title p[b-isnm67ykhb] {
    margin: 0;
    color: #6b7890;
    font-size: 12px;
}

.detail-progress-grid[b-isnm67ykhb] {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(100px, .7fr));
    gap: 10px;
}

.progress-overview[b-isnm67ykhb], .detail-metric[b-isnm67ykhb] {
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 9px;
}

.progress-label[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #53627a;
}

    .progress-label strong[b-isnm67ykhb] {
        color: #0f9f55;
        font-size: 18px;
    }

.progress-track[b-isnm67ykhb] {
    height: 8px;
    margin: 9px 0 7px;
    overflow: hidden;
    background: #e9eef5;
    border-radius: 999px;
}

.progress-value[b-isnm67ykhb] {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #13a75a, #39c977);
    border-radius: inherit;
    transition: width .25s ease;
}

.progress-overview small[b-isnm67ykhb] {
    color: #7b889c;
}

.detail-metric[b-isnm67ykhb] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .detail-metric span[b-isnm67ykhb] {
        color: #748198;
        font-size: 11px;
    }

    .detail-metric strong[b-isnm67ykhb] {
        margin-top: 3px;
        font-size: 22px;
        color: #213250;
    }

.metric-success strong[b-isnm67ykhb] {
    color: #0f9f55;
}

.metric-warning strong[b-isnm67ykhb] {
    color: #d48700;
}

.metric-muted strong[b-isnm67ykhb] {
    color: #718096;
}

.detail-table-shell[b-isnm67ykhb] {
    min-width: 0;
    margin: 0 16px 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 9px;
}

[b-isnm67ykhb] .detail-table-shell .table-wrapper {
    max-width: 100%;
    overflow: auto;
}

[b-isnm67ykhb] .detail-table-shell thead th {
    background: #edf3fb !important;
    color: #334562;
    border-color: #dce5f0 !important;
}

[b-isnm67ykhb] .detail-table-shell tbody td {
    background: #fff;
}

@media (max-width: 1100px) {
    .report-summary[b-isnm67ykhb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-table-shell[b-isnm67ykhb] {
        height: calc(100vh - 470px);
        min-height: 420px;
    }
}

@media (max-width: 1350px) {
    .detail-progress-grid[b-isnm67ykhb] {
        grid-template-columns: repeat(4, 1fr);
    }

    .progress-overview[b-isnm67ykhb] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .inbound-report-page[b-isnm67ykhb] {
        padding: 12px;
    }

    .report-hero[b-isnm67ykhb] {
        align-items: stretch;
        flex-direction: column;
    }

    .report-heading h1[b-isnm67ykhb] {
        font-size: 23px;
    }

    .report-actions[b-isnm67ykhb], .report-button[b-isnm67ykhb] {
        width: 100%;
    }

    .report-summary[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-isnm67ykhb] {
        padding: 13px;
    }

    .panel-heading[b-isnm67ykhb] {
        align-items: flex-start;
    }

    .report-tab[b-isnm67ykhb] {
        padding: 0 12px;
        font-size: 13px;
    }

    .report-table-shell[b-isnm67ykhb] {
        height: 520px;
        padding: 8px;
    }

    .detail-header[b-isnm67ykhb] {
        align-items: flex-start;
    }

    .detail-progress-grid[b-isnm67ykhb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-overview[b-isnm67ykhb] {
        grid-column: 1 / -1;
    }

    .document-detail[b-isnm67ykhb] {
        margin: 8px 4px 12px;
    }

    .detail-table-shell[b-isnm67ykhb] {
        margin: 0 10px 10px;
    }
}

/* Expanded master-detail rows must grow with their content. */
.document-table-shell[b-isnm67ykhb] {
    height: auto;
    min-height: 0;
    overflow: visible;
}

[b-isnm67ykhb] .document-table-shell .table-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

[b-isnm67ykhb] .document-table-shell .table-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: visible;
}

[b-isnm67ykhb] .document-table-shell .table-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

[b-isnm67ykhb] .detail-items-table thead th,
[b-isnm67ykhb] .detail-table-shell .table thead th {
    background: #eaf2ff !important;
    color: #244a7c !important;
    border-color: #d4e0ef !important;
}

[b-isnm67ykhb] .detail-items-table tbody td {
    background: #fff !important;
    border-color: #e4eaf2 !important;
}


/* Custom inbound report filters */
.report-filter-bar[b-isnm67ykhb] {
    display: grid;
    grid-template-columns: minmax(280px, 1.55fr) repeat(3, minmax(175px, .85fr)) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
}

.report-filter-control[b-isnm67ykhb] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 13px;
    color: #64748b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .report-filter-control:focus-within[b-isnm67ykhb] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .report-filter-control > i:first-child[b-isnm67ykhb] {
        flex: 0 0 auto;
        margin-right: 9px;
        color: #64748b;
    }

    .report-filter-control input[b-isnm67ykhb],
    .report-filter-control select[b-isnm67ykhb] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        color: #334155;
        font: inherit;
        background: transparent;
        border: 0;
        outline: 0;
    }

    .report-filter-control select[b-isnm67ykhb] {
        padding-right: 20px;
        cursor: pointer;
        appearance: none;
    }

.report-filter-chevron[b-isnm67ykhb] {
    position: absolute;
    right: 13px;
    margin: 0 !important;
    font-size: 10px;
    pointer-events: none;
}

.report-filter-button[b-isnm67ykhb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 118px;
    height: 42px;
    padding: 0 15px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .report-filter-button:hover[b-isnm67ykhb] {
        transform: translateY(-1px);
    }

.report-filter-apply[b-isnm67ykhb] {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .18);
}

    .report-filter-apply:hover[b-isnm67ykhb] {
        background: #1d4ed8;
    }

.report-filter-clear[b-isnm67ykhb] {
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
}

    .report-filter-clear:hover[b-isnm67ykhb] {
        color: #1e293b;
        background: #f8fafc;
    }

@media (max-width: 1350px) {
    .report-filter-bar[b-isnm67ykhb] {
        grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(170px, 1fr));
    }

        .report-filter-bar > :nth-child(4)[b-isnm67ykhb] {
            grid-column: 1 / 2;
        }
}

@media (max-width: 820px) {
    .report-filter-bar[b-isnm67ykhb] {
        grid-template-columns: 1fr 1fr;
    }

        .report-filter-search[b-isnm67ykhb],
        .report-filter-bar > :nth-child(4)[b-isnm67ykhb] {
            grid-column: 1 / -1;
        }

    .report-filter-button[b-isnm67ykhb] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .report-filter-bar[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

        .report-filter-search[b-isnm67ykhb],
        .report-filter-bar > :nth-child(4)[b-isnm67ykhb] {
            grid-column: auto;
        }
}


/* Compact document table and modal document details */
.document-table-shell[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: calc(100vh - 405px);
    padding: 8px 12px 10px;
    overflow: hidden;
}

[b-isnm67ykhb] .document-table-shell .table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

[b-isnm67ykhb] .document-table-shell .table-wrapper,
[b-isnm67ykhb] .document-table-shell .table-body {
    max-width: 100% !important;
    overflow-x: auto !important;
}

[b-isnm67ykhb] .document-table-shell table {
    min-width: 1260px;
    font-size: 11px !important;
}

[b-isnm67ykhb] .document-table-shell thead th {
    height: 35px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 1.15;
}

[b-isnm67ykhb] .document-table-shell tbody td {
    height: 36px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.25;
}

[b-isnm67ykhb] .document-table-shell .table-footer {
    min-height: 43px;
    font-size: 12px;
}

.document-number-link[b-isnm67ykhb] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 2px 0;
    color: #175bb4;
    font: inherit;
    font-weight: 750;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .document-number-link:hover[b-isnm67ykhb] {
        color: #0f468f;
        text-decoration: underline;
    }

    .document-number-link span[b-isnm67ykhb] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.document-popup-backdrop[b-isnm67ykhb] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.document-popup[b-isnm67ykhb] {
    width: min(1420px, calc(100vw - 44px));
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid #cdd9e8;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.document-popup-header[b-isnm67ykhb] {
    flex: 0 0 auto;
    min-height: 76px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
}

    .document-popup-header h2[b-isnm67ykhb] {
        margin: 2px 0;
        color: #12213f;
        font-size: 19px;
        font-weight: 800;
    }

    .document-popup-header p[b-isnm67ykhb] {
        margin: 0;
        color: #708098;
        font-size: 12px;
    }

.document-popup-close[b-isnm67ykhb] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 18px;
    background: #f1f5f9;
    border: 0;
    border-radius: 9px;
}

    .document-popup-close:hover[b-isnm67ykhb] {
        color: #dc2626;
        background: #fee2e2;
    }

.document-popup-body[b-isnm67ykhb] {
    min-height: 0;
    padding: 14px 16px;
    overflow-y: auto;
}

.popup-progress-grid[b-isnm67ykhb] {
    margin-bottom: 12px;
}

.popup-detail-table-shell[b-isnm67ykhb] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    background: #fff;
}

[b-isnm67ykhb] .popup-items-table table {
    min-width: 1120px;
    font-size: 11px !important;
    border-collapse: separate;
    border-spacing: 0;
}

[b-isnm67ykhb] .popup-items-table thead th {
    height: 42px !important;
    padding: 9px !important;
    color: #fff !important;
    background: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .13) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

[b-isnm67ykhb] .popup-items-table tbody td {
    height: auto !important;
    min-height: 58px;
    padding: 8px 9px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
    background: #fff;
    border-color: #e5ebf3 !important;
}

[b-isnm67ykhb] .popup-items-table tbody tr:hover td {
    background: #f8fbff;
}

.popup-detail-table-shell[b-isnm67ykhb]  thead th,
.popup-detail-table-shell[b-isnm67ykhb]  thead th .table-cell,
.popup-detail-table-shell[b-isnm67ykhb]  thead th .table-text,
.popup-detail-table-shell[b-isnm67ykhb]  thead th span {
    color: #fff !important;
    background-color: #1f66b8 !important;
}

.popup-detail-table-shell[b-isnm67ykhb]  tbody td {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    line-height: 1.35;
    vertical-align: middle !important;
    background: #fff !important;
    border-color: #e5ebf3 !important;
}

.popup-detail-table-shell[b-isnm67ykhb]  tbody tr:hover td {
    background: #f8fbff !important;
}

[b-isnm67ykhb] .popup-items-table .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
}

.view-product-cell[b-isnm67ykhb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .view-product-cell > span[b-isnm67ykhb] {
        color: #1769d2;
        font-size: 11px;
        font-weight: 800;
    }

    .view-product-cell > strong[b-isnm67ykhb] {
        margin: 2px 0;
        color: #1b2a44;
        font-size: 11px;
    }

    .view-product-cell > small[b-isnm67ykhb] {
        max-width: 250px;
        overflow: hidden;
        color: #8795a9;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.view-no-serial[b-isnm67ykhb] {
    color: #99a6b7;
    font-size: 10px;
}

.view-serial-button[b-isnm67ykhb] {
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #506680;
    text-align: left;
    background: #f8fbff;
    border: 1px solid #d4dfec;
    border-radius: 8px;
}

    .view-serial-button:hover[b-isnm67ykhb],
    .view-serial-button.is-selected[b-isnm67ykhb] {
        color: #1769d2;
        background: #edf5ff;
        border-color: #3980dc;
    }

    .view-serial-button span[b-isnm67ykhb] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .view-serial-button span i[b-isnm67ykhb] {
            color: #1769d2;
        }

    .view-serial-button strong[b-isnm67ykhb] {
        font-size: 10px;
    }

    .view-serial-button em[b-isnm67ykhb] {
        font-size: 9px;
        font-style: normal;
        font-weight: 800;
        white-space: nowrap;
    }

    .view-serial-button .valid[b-isnm67ykhb],
    .view-serial-result .valid[b-isnm67ykhb] {
        color: #15945a;
    }

    .view-serial-button .invalid[b-isnm67ykhb],
    .view-serial-result .invalid[b-isnm67ykhb] {
        color: #d24b56;
    }

.document-popup[b-isnm67ykhb] {
    position: relative;
}

.view-serial-shade[b-isnm67ykhb] {
    position: absolute;
    inset: 82px 0 66px;
    z-index: 3;
    background: rgba(15, 23, 42, .18);
}

.view-serial-inspector[b-isnm67ykhb] {
    position: absolute;
    z-index: 4;
    top: 82px;
    right: 0;
    bottom: 66px;
    width: min(430px, 100%);
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    color: #14213d;
    background: #f8fafc;
    border-left: 1px solid #d8e2ef;
    box-shadow: -16px 0 40px rgba(15, 23, 42, .15);
}

    .view-serial-inspector header[b-isnm67ykhb] {
        padding: 15px 17px;
        display: flex;
        justify-content: space-between;
        background: #fff;
        border-bottom: 1px solid #dce5f1;
    }

        .view-serial-inspector header > div > span[b-isnm67ykhb] {
            color: #2670da;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .13em;
        }

        .view-serial-inspector header h3[b-isnm67ykhb] {
            margin: 2px 0;
            font-size: 17px;
        }

        .view-serial-inspector header p[b-isnm67ykhb] {
            margin: 0;
            color: #718096;
            font-size: 10px;
        }

        .view-serial-inspector header button[b-isnm67ykhb] {
            width: 32px;
            height: 32px;
            color: #53647d;
            background: #eef2f7;
            border: 0;
            border-radius: 8px;
        }

.view-serial-summary[b-isnm67ykhb] {
    margin: 12px 14px 0;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #d7e3f1;
    border-radius: 10px;
}

    .view-serial-summary > span[b-isnm67ykhb] {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        color: #1769d2;
        background: #e8f2ff;
        border-radius: 9px;
    }

    .view-serial-summary > div[b-isnm67ykhb] {
        display: flex;
        flex-direction: column;
    }

    .view-serial-summary small[b-isnm67ykhb] {
        color: #718096;
        font-size: 9px;
    }

    .view-serial-summary strong[b-isnm67ykhb] {
        font-size: 18px;
    }

    .view-serial-summary em[b-isnm67ykhb] {
        margin-left: auto;
        padding: 4px 7px;
        color: #53647d;
        background: #eef3f8;
        border-radius: 6px;
        font-size: 9px;
        font-style: normal;
    }

.view-serial-result[b-isnm67ykhb] {
    padding: 10px 16px 8px;
    display: flex;
    justify-content: space-between;
    color: #718096;
    font-size: 10px;
}

.view-serial-inspector-list[b-isnm67ykhb] {
    padding: 0 14px 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-content: start;
    gap: 6px;
    overflow-y: auto;
}

.view-serial-item[b-isnm67ykhb] {
    min-height: 36px;
    padding: 4px 8px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    color: #1769d2;
    background: #fff;
    border: 1px solid #d5e1ef;
    border-radius: 8px;
}

    .view-serial-item > i[b-isnm67ykhb] {
        text-align: center;
    }

    .view-serial-item code[b-isnm67ykhb] {
        overflow: hidden;
        color: #154f8c;
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.view-serial-inspector footer[b-isnm67ykhb] {
    padding: 10px 14px;
    text-align: right;
    background: #fff;
    border-top: 1px solid #dce5f1;
}

    .view-serial-inspector footer button[b-isnm67ykhb] {
        padding: 8px 12px;
        color: #fff;
        background: #1769d2;
        border: 0;
        border-radius: 7px;
        font-size: 10px;
        font-weight: 800;
    }

.document-popup-footer[b-isnm67ykhb] {
    flex: 0 0 auto;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    border-top: 1px solid #dbe4ef;
}

.popup-close-button[b-isnm67ykhb] {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

    .popup-close-button:hover[b-isnm67ykhb] {
        background: #f1f5f9;
    }

/* View document uses the same visual system as the create/edit dialog. */
.document-popup-backdrop[b-isnm67ykhb] {
    padding: 18px;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.document-popup[b-isnm67ykhb] {
    width: min(1500px, calc(100vw - 36px));
    height: auto;
    max-height: calc(100vh - 36px);
    color: #14213d;
    background: #f5f7fb;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.document-popup-header[b-isnm67ykhb] {
    min-height: 82px;
    padding: 16px 22px;
    border-color: #dce5f1;
}

.detail-title[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.detail-icon[b-isnm67ykhb] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #1769d2;
    background: #e8f1ff;
    font-size: 20px;
}

.detail-title > div:last-child > span[b-isnm67ykhb] {
    display: block;
    color: #2670da;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.document-popup-header h2[b-isnm67ykhb] {
    margin: 3px 0;
    font-size: 20px;
    line-height: 1.25;
}

.document-popup-header-actions[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.document-status-badge[b-isnm67ykhb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    color: #1769d2;
    background: #e8f1ff;
    font-size: 11px;
    font-weight: 700;
}

    .document-status-badge i[b-isnm67ykhb] {
        font-size: 7px;
    }

.document-popup-close[b-isnm67ykhb] {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.document-popup-body[b-isnm67ykhb] {
    padding: 16px 20px;
}

.document-view-section[b-isnm67ykhb] {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(30, 64, 175, .04);
}

.document-view-heading[b-isnm67ykhb] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e3eaf3;
}

    .document-view-heading h3[b-isnm67ykhb] {
        margin: 0 0 2px;
        font-size: 14px;
        font-weight: 800;
    }

    .document-view-heading p[b-isnm67ykhb] {
        margin: 0;
        color: #718096;
        font-size: 12px;
    }

.document-view-step[b-isnm67ykhb] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #1f6fd1;
    font-size: 12px;
    font-weight: 800;
}

.popup-progress-grid[b-isnm67ykhb] {
    margin: 0;
    padding: 14px 16px;
}

.document-items-section[b-isnm67ykhb] {
    margin-bottom: 0;
}

.popup-detail-table-shell[b-isnm67ykhb] {
    border: 0;
    border-radius: 0;
}

.document-popup-footer[b-isnm67ykhb] {
    min-height: 66px;
    padding: 12px 20px;
    align-items: center;
    gap: 9px;
    border-color: #dce5f1;
}

    .document-popup-footer > div[b-isnm67ykhb] {
        margin-right: auto;
        color: #708096;
        font-size: 11px;
    }

        .document-popup-footer > div i[b-isnm67ykhb] {
            margin-right: 5px;
            color: #1aa267;
        }

/* In-app delete confirmation; deliberately smaller than the document editor. */
.delete-confirm-backdrop[b-isnm67ykhb] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.delete-confirm-dialog[b-isnm67ykhb] {
    width: min(540px, calc(100vw - 36px));
    overflow: hidden;
    color: #14213d;
    background: #f5f7fb;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.delete-confirm-header[b-isnm67ykhb] {
    min-height: 88px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 46px 1fr 36px;
    align-items: center;
    gap: 13px;
    background: #fff;
    border-bottom: 1px solid #dce5f1;
}

.delete-confirm-icon[b-isnm67ykhb] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #dc3545;
    background: #fff0f1;
    font-size: 20px;
}

.delete-confirm-eyebrow[b-isnm67ykhb] {
    color: #dc3545;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.delete-confirm-header h2[b-isnm67ykhb] {
    margin: 2px 0;
    font-size: 18px;
    font-weight: 800;
}

.delete-confirm-header p[b-isnm67ykhb] {
    margin: 0;
    color: #718096;
    font-size: 11px;
}

.delete-confirm-body[b-isnm67ykhb] {
    padding: 16px 18px;
}

.delete-document-summary[b-isnm67ykhb] {
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid #dce5f1;
    border-radius: 10px;
    background: #fff;
}

    .delete-document-summary > span[b-isnm67ykhb] {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: #1769d2;
        background: #e8f1ff;
    }

    .delete-document-summary div[b-isnm67ykhb] {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .delete-document-summary small[b-isnm67ykhb] {
        color: #718096;
        font-size: 9px;
    }

    .delete-document-summary strong[b-isnm67ykhb] {
        overflow: hidden;
        color: #1769d2;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .delete-document-summary p[b-isnm67ykhb] {
        margin: 1px 0 0;
        color: #65748a;
        font-size: 10px;
    }

.delete-warning[b-isnm67ykhb] {
    margin-top: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #a43741;
    background: #fff0f1;
    border: 1px solid #ffcaca;
    border-radius: 9px;
    font-size: 11px;
}

    .delete-warning i[b-isnm67ykhb] {
        margin-top: 2px;
    }

.delete-confirm-footer[b-isnm67ykhb] {
    min-height: 66px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    background: #fff;
    border-top: 1px solid #dce5f1;
}

.iod-cancel-style[b-isnm67ykhb],
.delete-confirm-button[b-isnm67ykhb] {
    min-height: 38px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.iod-cancel-style[b-isnm67ykhb] {
    color: #465974;
    background: #fff;
    border: 1px solid #ccd7e5;
}

.delete-confirm-button[b-isnm67ykhb] {
    min-width: 132px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: #dc3545;
    border: 0;
    box-shadow: 0 5px 12px rgba(220, 53, 69, .2);
}

    .iod-cancel-style:disabled[b-isnm67ykhb],
    .delete-confirm-button:disabled[b-isnm67ykhb],
    .delete-confirm-header button:disabled[b-isnm67ykhb] {
        opacity: .6;
        cursor: not-allowed;
    }

@media (max-width: 900px) {
    .document-table-shell[b-isnm67ykhb] {
        max-height: none;
    }

    .document-popup-backdrop[b-isnm67ykhb] {
        padding: 10px;
    }

    .document-popup[b-isnm67ykhb] {
        width: calc(100vw - 20px);
        height: auto;
        max-height: calc(100vh - 20px);
    }

    .popup-progress-grid[b-isnm67ykhb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .popup-progress-grid .progress-overview[b-isnm67ykhb] {
            grid-column: 1 / -1;
        }

    .document-status-badge[b-isnm67ykhb] {
        display: none;
    }
}


/* 2026-08-24: compact report table, contained scrolling, and underline tabs */
.inbound-report-page[b-isnm67ykhb],
.report-workspace[b-isnm67ykhb],
.report-panel[b-isnm67ykhb],
.report-table-shell[b-isnm67ykhb] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

[b-isnm67ykhb] .report-tabs,
[b-isnm67ykhb] .report-tabs .tabs-body,
[b-isnm67ykhb] .report-tabs .tabs-content,
[b-isnm67ykhb] .report-tabs .tab-content,
[b-isnm67ykhb] .report-tabs .tab-pane {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    [b-isnm67ykhb] .report-tabs > .tabs-header {
        min-height: 49px;
        padding: 0 12px 0 0;
        background: #fff;
    }

    [b-isnm67ykhb] .report-tabs .tabs-nav,
    [b-isnm67ykhb] .report-tabs .tabs-nav-wrap,
    [b-isnm67ykhb] .report-tabs .tabs-nav-scroll {
        flex: 0 1 auto;
        justify-content: flex-start;
        background: #fff;
    }

    [b-isnm67ykhb] .report-tabs .tabs-item,
    [b-isnm67ykhb] .report-tabs .tabs-tab,
    [b-isnm67ykhb] .report-tabs .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        background: #fff !important;
    }

.report-tab[b-isnm67ykhb] {
    height: 48px;
    padding: 0 16px;
    color: #53647d;
    background: #fff;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

    .report-tab:hover[b-isnm67ykhb] {
        color: #1d5fae;
        background: #f8fbff;
    }

    .report-tab.active[b-isnm67ykhb],
    [b-isnm67ykhb] .report-tabs .active .report-tab,
    [b-isnm67ykhb] .report-tabs .tabs-item.active .report-tab,
    [b-isnm67ykhb] .report-tabs .tabs-tab.active .report-tab,
    [b-isnm67ykhb] .report-tabs .nav-link.active .report-tab {
        color: #087f8c !important;
        background: #fff !important;
        border-bottom-color: #2f80ed !important;
        box-shadow: none !important;
    }

[b-isnm67ykhb] .report-tabs .active,
[b-isnm67ykhb] .report-tabs .tabs-item.active,
[b-isnm67ykhb] .report-tabs .tabs-tab.active,
[b-isnm67ykhb] .report-tabs .nav-link.active {
    color: inherit !important;
    background: #fff !important;
    box-shadow: none !important;
}

.document-table-shell[b-isnm67ykhb] {
    height: clamp(330px, calc(100vh - 405px), 570px);
    max-height: none;
    padding: 8px 12px 10px;
    overflow: hidden;
}

[b-isnm67ykhb] .document-table-shell > .table,
[b-isnm67ykhb] .document-table-shell .table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

[b-isnm67ykhb] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

[b-isnm67ykhb] .document-table-shell .table-body {
    min-width: 0;
    overflow: visible !important;
}

[b-isnm67ykhb] .document-table-shell table {
    width: max-content !important;
    min-width: 1120px !important;
    color: #334155;
    font-size: 10.5px !important;
    font-weight: 400 !important;
}

[b-isnm67ykhb] .document-table-shell thead th {
    height: 34px !important;
    padding: 4px 7px !important;
    color: #f8fbff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

[b-isnm67ykhb] .document-table-shell tbody td {
    height: 34px !important;
    padding: 4px 7px !important;
    color: #334155 !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
}

    [b-isnm67ykhb] .document-table-shell tbody td *:not(.status-pill:not(i)) {
        font-size: inherit;
        font-weight: inherit;
    }

.document-number-link[b-isnm67ykhb] {
    color: #175da8;
    font-size: 10.5px;
    font-weight: 600;
}

.status-pill[b-isnm67ykhb] {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 9.5px;
    font-weight: 600;
}

[b-isnm67ykhb] .document-table-shell .table-footer {
    flex: 0 0 auto;
    min-height: 40px;
    color: #475569;
    font-size: 11px;
    font-weight: 400;
}

@media (max-width: 900px) {
    .document-table-shell[b-isnm67ykhb] {
        height: 480px;
        max-height: min(480px, calc(100vh - 250px));
    }

    .report-tab[b-isnm67ykhb] {
        padding: 0 12px;
        font-size: 12px;
    }
}


/* Override the global color5 tab theme for this report only. */
.inbound-report-page[b-isnm67ykhb]  .report-tabs .tabs-nav > .report-tab.tabs-item {
    color: #53647d !important;
    background-color: #fff !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
}

    .inbound-report-page[b-isnm67ykhb]  .report-tabs .tabs-nav > .report-tab.tabs-item:hover {
        color: #1d5fae !important;
        background-color: #f8fbff !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
    }

    .inbound-report-page[b-isnm67ykhb]  .report-tabs .tabs-nav > .report-tab.tabs-item.active,
    .inbound-report-page[b-isnm67ykhb]  .report-tabs .tabs-nav > .report-tab.tabs-item.active:hover {
        color: #087f8c !important;
        background-color: #fff !important;
        border: 0 !important;
        border-bottom: 2px solid #2f80ed !important;
        box-shadow: none !important;
    }


/* Normalize typography inside generated table cells and improve native select spacing. */
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td div,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td span,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td a,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td button,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td label {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.inbound-report-page .document-number-link[b-isnm67ykhb],
.inbound-report-page .document-number-link span[b-isnm67ykhb] {
    font-size: 10px !important;
    font-weight: 600 !important;
}

.inbound-report-page .status-pill[b-isnm67ykhb],
.inbound-report-page .status-pill span[b-isnm67ykhb] {
    font-size: 9px !important;
    font-weight: 600 !important;
}

.report-filter-control select[b-isnm67ykhb] {
    padding-left: 8px !important;
    padding-right: 30px !important;
    text-indent: 0;
}

    .report-filter-control select option[b-isnm67ykhb] {
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 400;
    }


/* Compact filters and the actual ATCRazor pagination markup */
.report-filter-bar[b-isnm67ykhb] {
    gap: 8px;
    padding: 9px 12px;
    padding-bottom: 2px !important;
}

.report-filter-control[b-isnm67ykhb] {
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11px;
}

    .report-filter-control > i:first-child[b-isnm67ykhb] {
        margin-right: 7px;
        font-size: 11px;
    }

    .report-filter-control select[b-isnm67ykhb] {
        padding-left: 4px !important;
        padding-right: 25px !important;
        font-size: 11px;
    }

.report-filter-chevron[b-isnm67ykhb] {
    right: 10px;
    font-size: 9px;
}

.report-filter-button[b-isnm67ykhb] {
    min-width: 104px;
    height: 36px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650;
}

.report-filter-search input[b-isnm67ykhb] {
    font-size: 11px;
}

[b-isnm67ykhb] .document-table-shell .nav-pages {
    min-height: 44px;
    padding: 6px 0 0;
    font-size: 11px !important;
}

[b-isnm67ykhb] .document-table-shell .table-page-info,
[b-isnm67ykhb] .document-table-shell .table-page-info > div {
    font-size: 11px !important;
    line-height: 1 !important;
}

    [b-isnm67ykhb] .document-table-shell .table-page-info .select {
        width: 104px !important;
        height: 32px;
        min-height: 32px;
        overflow: hidden;
        border-radius: 8px !important;
    }

        [b-isnm67ykhb] .document-table-shell .table-page-info .select .form-select {
            height: 32px;
            min-height: 32px;
            padding: 0 28px 0 10px !important;
            border: 1px solid #d5deea !important;
            border-radius: 8px !important;
            background-color: #fff;
            font-size: 11px !important;
            line-height: 30px;
            box-shadow: none !important;
        }

        [b-isnm67ykhb] .document-table-shell .table-page-info .select .dropdown-menu {
            min-width: 104px;
            border-radius: 8px;
            font-size: 11px;
        }

[b-isnm67ykhb] .document-table-shell .pagination {
    font-size: 11px !important;
}

@media (max-width: 820px) {
    .report-filter-bar[b-isnm67ykhb] {
        gap: 7px;
        padding: 8px;
    }
}


/* Keep the document header more prominent than its compact body rows. */
[b-isnm67ykhb] .document-table-shell thead th,
[b-isnm67ykhb] .document-table-shell thead th .table-cell,
[b-isnm67ykhb] .document-table-shell thead th .table-text,
[b-isnm67ykhb] .document-table-shell thead th span {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}


/* 2026-08-24: composed report workspace layout */
.inbound-report-page[b-isnm67ykhb] {
    padding: 22px 20px 20px;
    background: #f4f7fb;
}

.report-hero[b-isnm67ykhb] {
    margin-bottom: 14px;
}

.report-heading h1[b-isnm67ykhb] {
    margin-top: 4px;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.15;
}

.report-summary[b-isnm67ykhb] {
    gap: 12px;
    margin-bottom: 14px;
}

.summary-card[b-isnm67ykhb] {
    min-height: 96px;
    padding: 15px 16px;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(31, 55, 86, .055);
}

.summary-icon[b-isnm67ykhb] {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.summary-card strong[b-isnm67ykhb] {
    font-size: 25px;
    line-height: 1;
}

.report-workspace[b-isnm67ykhb] {
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 55, 86, .055);
}

.report-panel[b-isnm67ykhb] {
    padding: 18px 16px 14px;
    background: #fff;
}

.filter-section[b-isnm67ykhb] {
    margin: 0 0 12px;
    overflow: visible;
    border: 1px solid #dce5ef;
    border-radius: 11px;
    background: #fff;
}

.filter-section-heading[b-isnm67ykhb] {
    min-height: 50px;
    border-bottom: 0;
}

.filter-section-toggle[b-isnm67ykhb] {
    width: 100%;
    min-height: 50px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #172b4d;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

    .filter-section-toggle:hover[b-isnm67ykhb] {
        background: #f8fbff;
    }

.filter-section-label[b-isnm67ykhb],
.filter-section-state[b-isnm67ykhb] {
    display: flex;
    align-items: center;
}

.filter-section-label[b-isnm67ykhb] {
    gap: 10px;
}

    .filter-section-label > span:last-child[b-isnm67ykhb] {
        display: flex;
        flex-direction: column;
    }

    .filter-section-label strong[b-isnm67ykhb] {
        font-size: 13px;
        font-weight: 750;
    }

    .filter-section-label small[b-isnm67ykhb] {
        margin-top: 1px;
        color: #718096;
        font-size: 10.5px;
    }

.filter-section-icon[b-isnm67ykhb] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 9px;
}

.filter-section-state[b-isnm67ykhb] {
    gap: 8px;
    color: #64748b;
    font-size: 10.5px;
}

.filter-section .report-filter-bar[b-isnm67ykhb] {
    padding: 10px 12px 12px;
    border-top: 1px solid #edf1f6;
    border-bottom: 0;
    border-radius: 0 0 11px 11px;
}

.document-table-shell[b-isnm67ykhb] {
    padding: 0;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
}

[b-isnm67ykhb] .document-table-shell thead th {
    height: 36px !important;
    font-size: 11.5px !important;
}

[b-isnm67ykhb] .document-table-shell tbody td {
    height: 34px !important;
    font-size: 10.5px !important;
}

[b-isnm67ykhb] .document-table-shell .nav-pages {
    padding: 7px 10px 8px;
    background: #fff;
    border-top: 1px solid #e4eaf2;
}

@media (max-width: 820px) {
    .inbound-report-page[b-isnm67ykhb] {
        padding: 12px 10px;
    }

    .report-panel[b-isnm67ykhb] {
        padding: 12px 9px;
    }

    .filter-section-state span[b-isnm67ykhb] {
        display: none;
    }
}

/* 2026-08-27: keep the document table inside the viewport.
   Match the fixed-header scroll structure used by Container Management. */
.document-table-shell[b-isnm67ykhb] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-isnm67ykhb] .document-table-shell > .table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 0 !important;
}

[b-isnm67ykhb] .document-table-shell .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

[b-isnm67ykhb] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

[b-isnm67ykhb] .document-table-shell .table-fixed,
[b-isnm67ykhb] .document-table-shell .table-fixed-header,
[b-isnm67ykhb] .document-table-shell .table-fixed-body,
[b-isnm67ykhb] .document-table-shell .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[b-isnm67ykhb] .document-table-shell .table-fixed {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-isnm67ykhb] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-isnm67ykhb] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

    [b-isnm67ykhb] .document-table-shell .table-fixed-header > table,
    [b-isnm67ykhb] .document-table-shell .table-fixed-body > table {
        width: max-content !important;
        min-width: 1120px !important;
        max-width: none !important;
    }

[b-isnm67ykhb] .document-table-shell .table-footer,
[b-isnm67ykhb] .document-table-shell .nav-pages {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
}



/* 2026-08-27: make the report grid fit the card like Container Management.
   The previous max-content/min-width rules kept forcing horizontal overflow. */
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-header > table,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body > table,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell thead th,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell tbody td {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body {
    overflow-x: hidden !important;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-header,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body {
    padding-right: 0 !important;
}


/* 2026-08-27: constrain the report vertically inside the application viewport.
   Account for the hero, summary, tabs and expanded filter before sizing the grid. */
.inbound-report-page[b-isnm67ykhb] {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

    .inbound-report-page .document-table-shell[b-isnm67ykhb] {
        height: clamp(260px, calc(100dvh - 520px), 500px);
        min-height: 260px;
        max-height: none;
    }

    .inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body {
        min-height: 0 !important;
    }

    /* A collapsed filter frees its vertical space back to the table. */
    .inbound-report-page:has(.filter-section-heading + form) .document-table-shell[b-isnm67ykhb] {
        height: clamp(260px, calc(100dvh - 520px), 500px);
    }

    .inbound-report-page:not(:has(.filter-section-heading + form)) .document-table-shell[b-isnm67ykhb] {
        height: clamp(310px, calc(100dvh - 430px), 590px);
    }

    /* Final popup table override: BootstrapBlazor pads the outer th around .table-cell. */
    .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th,
    .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th > .table-cell {
        color: #fff !important;
        background: #1f66b8 !important;
        border-color: rgba(255, 255, 255, .18) !important;
    }

    .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th {
        padding: 9px !important;
    }

    .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr > td {
        height: auto !important;
        min-height: 0 !important;
        padding: 8px 9px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        vertical-align: middle !important;
        overflow: visible !important;
    }

/* Compact the report vertically without clipping Thai combining marks. */
.inbound-report-page[b-isnm67ykhb] {
    gap: 8px;
}

    .inbound-report-page > .report-hero[b-isnm67ykhb],
    .inbound-report-page > .report-summary[b-isnm67ykhb] {
        margin-bottom: 0;
    }

.inbound-card-heading[b-isnm67ykhb] {
    min-height: 58px;
    padding: 10px 14px;
}

.inbound-filterbar[b-isnm67ykhb] {
    padding-top: 7px;
    padding-bottom: 7px;
}

.inbound-table-host[b-isnm67ykhb]  .table-toolbar {
    min-height: 0 !important;
    height: auto !important;
}

.inbound-table-host[b-isnm67ykhb]  .table-shim {
    margin-top: 0px !important;
}

.inbound-table-host[b-isnm67ykhb]  thead th .table-cell,
.inbound-table-host[b-isnm67ykhb]  thead th .table-text {
    min-height: 1.65em;
    line-height: 1.5 !important;
    overflow: visible !important;
}

.inbound-table-host[b-isnm67ykhb]  thead th .table-text {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Final popup table override: BootstrapBlazor pads the outer th around .table-cell. */
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th,
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th > .table-cell {
    color: #fff !important;
    background: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th {
    padding: 9px !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

@media (max-height: 760px) {
    .inbound-report-page[b-isnm67ykhb] {
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .inbound-report-page .document-table-shell[b-isnm67ykhb] {
            height: 260px;
        }
}

/* Keep the read-only document table visually identical to the add/edit table.
   BootstrapBlazor renders a padded th around .table-cell, so both layers must
   own the blue header background to avoid pale gaps between columns. */
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th,
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th > .table-cell {
    color: #fff !important;
    background: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th {
    padding: 9px !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

/* Keep the read-only document table visually identical to the add/edit table.
   BootstrapBlazor renders a padded th around .table-cell, so both layers must
   own the blue header background to avoid pale gaps between columns. */
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th,
.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th > .table-cell {
    color: #fff !important;
    background: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table thead > tr > th {
    padding: 9px !important;
}

.inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 9px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

/* Align the inbound document report with the compact /Reports/Tote layout. */
.inbound-report-page[b-isnm67ykhb] {
    --inbound-primary: #2563eb;
    --inbound-border: #dce5f0;
    padding: 18px;
    gap: 14px;
    background: #f4f7fb;
}

.report-hero[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.report-heading h1[b-isnm67ykhb] {
    margin: 0;
    color: #0f172a;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.report-heading p[b-isnm67ykhb],
.inbound-card-heading p[b-isnm67ykhb] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.report-summary[b-isnm67ykhb] {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.report-table-shell[b-isnm67ykhb] {
    min-width: 0;
    min-height: 440px;
    height: auto;
    max-height: none;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--inbound-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 5%);
}

.inbound-card-heading[b-isnm67ykhb] {
    min-height: 68px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--inbound-border);
}

    .inbound-card-heading h2[b-isnm67ykhb] {
        margin: 0;
        color: #172033;
        font-size: 16px;
        font-weight: 800;
    }

.inbound-live-status[b-isnm67ykhb],
.inbound-last-updated[b-isnm67ykhb],
.inbound-live-indicator[b-isnm67ykhb] {
    display: flex;
    align-items: center;
}

.inbound-live-status[b-isnm67ykhb] {
    gap: 12px;
}

.inbound-last-updated[b-isnm67ykhb] {
    gap: 5px;
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

    .inbound-last-updated i[b-isnm67ykhb] {
        color: #2563eb;
    }

.inbound-live-indicator[b-isnm67ykhb] {
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #059669;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

    .inbound-live-indicator i[b-isnm67ykhb] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #10b981;
    }

.inbound-table-host[b-isnm67ykhb] {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .inbound-table-host[b-isnm67ykhb]  > .table,
    .inbound-table-host[b-isnm67ykhb]  .table-container,
    .inbound-table-host[b-isnm67ykhb]  .table-wrapper {
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
    }

    .inbound-table-host[b-isnm67ykhb]  .table-container {
        width: 100%;
        max-width: 100%;
        padding: 0 12px 10px;
        display: flex;
        flex-direction: column;
    }

    .inbound-table-host[b-isnm67ykhb]  .table-toolbar {
        flex: 0 0 auto;
        padding: 0;
    }

    .inbound-table-host[b-isnm67ykhb]  .table-fixed-body {
        min-height: 0;
        flex: 1 1 auto;
        overflow-y: auto !important;
    }

.inbound-filterbar[b-isnm67ykhb] {
    width: 100%;
    padding: 10px 12px;
}

.inbound-filter-form[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.inbound-filter-search[b-isnm67ykhb] {
    min-width: 240px;
    flex: 1 1 360px;
}

.inbound-filter-select-wrap[b-isnm67ykhb] {
    min-width: 150px;
    flex: 0 1 190px;
}

    .inbound-filter-select-wrap select[b-isnm67ykhb] {
        width: 100%;
        height: 38px;
        padding: 0 30px 0 12px;
        border: 1px solid #cbd8e8;
        border-radius: 9px;
        color: #334155;
        background: #fff;
        font-size: 11px;
    }

.inbound-date-filter[b-isnm67ykhb] {
    flex-basis: 180px;
}

.report-custom-date-range[b-isnm67ykhb] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    gap: 7px;
}

.report-date-input[b-isnm67ykhb] {
    gap: 8px;
}

.report-date-input > span[b-isnm67ykhb] {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.report-date-input input[b-isnm67ykhb] {
    color: #334155;
    cursor: pointer;
}

.report-date-separator[b-isnm67ykhb] {
    color: #94a3b8;
    font-weight: 700;
}

.report-filter-actions[b-isnm67ykhb] {
    display: flex;
    gap: 8px;
}

.inbound-custom-date-range[b-isnm67ykhb] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    align-items: center;
    gap: 7px;
}

.inbound-date-input[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 38px;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    background: #fff;
}

.inbound-date-input:focus-within[b-isnm67ykhb] {
    border-color: #1768c5;
    box-shadow: 0 0 0 3px rgba(23, 104, 197, .12);
}

.inbound-date-input > span[b-isnm67ykhb] {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.inbound-date-input input[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #334155;
    font: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
}

.inbound-date-separator[b-isnm67ykhb] {
    color: #94a3b8;
    font-weight: 700;
}

.inbound-filter-actions[b-isnm67ykhb] {
    display: flex;
    gap: 8px;
}

.inbound-filter-apply[b-isnm67ykhb] {
    height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #1768c5;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .report-summary[b-isnm67ykhb] {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .inbound-filter-form[b-isnm67ykhb] {
        flex-wrap: wrap;
    }

    .inbound-filter-search[b-isnm67ykhb] {
        flex-basis: calc(100% - 90px);
    }
}

@media (max-width: 700px) {
    .inbound-report-page[b-isnm67ykhb] {
        padding: 12px;
    }

    .report-hero[b-isnm67ykhb],
    .inbound-card-heading[b-isnm67ykhb] {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-actions[b-isnm67ykhb] {
        width: 100%;
    }

    .report-summary[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

    .inbound-live-status[b-isnm67ykhb] {
        width: 100%;
        justify-content: space-between;
    }

    .inbound-filter-select-wrap[b-isnm67ykhb] {
        flex: 1 1 100%;
    }
}

.inbound-row-actions[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.inbound-icon-action[b-isnm67ykhb] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
}

    .inbound-icon-action.view-action[b-isnm67ykhb] {
        color: #1768c5;
        border: 1px solid #bcd3ed;
    }

    .inbound-icon-action.edit-action[b-isnm67ykhb] {
        color: #1768c5;
        border: 1px solid #79ade8;
        background: #edf6ff;
    }

    .inbound-icon-action.delete-action[b-isnm67ykhb] {
        color: #dc2626;
        border: 1px solid #fecaca;
        background: #fff7f7;
    }

    .inbound-icon-action:hover[b-isnm67ykhb] {
        filter: brightness(.96);
    }

    .inbound-icon-action:disabled[b-isnm67ykhb] {
        color: #a7b2c0;
        border-color: #dfe5ec;
        background: #f4f6f8;
        opacity: .65;
        cursor: not-allowed;
        filter: none;
    }


/* 2026-08-27: use the same remaining-space flex layout as Container Management.
   These final rules intentionally replace all viewport-height calculations above. */
[b-isnm67ykhb] .inbound-report-transition {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
}

.inbound-report-page[b-isnm67ykhb] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
}

.report-hero[b-isnm67ykhb],
.report-summary[b-isnm67ykhb] {
    flex: 0 0 auto;
}

.report-workspace[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
    min-height: 440px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-isnm67ykhb] .report-workspace > .report-tabs,
[b-isnm67ykhb] .report-workspace > .tabs,
[b-isnm67ykhb] .report-tabs {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    [b-isnm67ykhb] .report-tabs > .tabs-header {
        flex: 0 0 auto;
    }

    [b-isnm67ykhb] .report-tabs > .tabs-body,
    [b-isnm67ykhb] .report-tabs .tabs-content,
    [b-isnm67ykhb] .report-tabs .tab-content,
    [b-isnm67ykhb] .report-tabs .tab-pane,
    [b-isnm67ykhb] .report-tabs .tabs-body-content {
        width: 100%;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

.report-panel[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbound-report-page .document-table-shell[b-isnm67ykhb] {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell > .table,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-container,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-wrapper {
    min-height: 0;
    flex: 1 1 auto;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-toolbar,
.inbound-report-page[b-isnm67ykhb]  .document-table-shell .nav-pages {
    flex: 0 0 auto;
}

.inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto !important;
}

@media (max-height: 760px) {
    .report-workspace[b-isnm67ykhb] {
        min-height: 440px;
    }

    .inbound-report-page .document-table-shell[b-isnm67ykhb] {
        height: auto;
        min-height: 0;
    }
}

/* Final compact spacing and Thai header text safeguards. */
.inbound-report-page[b-isnm67ykhb] {
    gap: 8px !important;
}

    .inbound-report-page > .report-hero[b-isnm67ykhb],
    .inbound-report-page > .report-summary[b-isnm67ykhb] {
        margin-bottom: 0 !important;
    }

    .inbound-report-page .inbound-card-heading[b-isnm67ykhb] {
        min-height: 58px !important;
        padding: 10px 14px !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  .inbound-filterbar {
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  .table-toolbar {
        min-height: 0 !important;
        height: auto !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  .table-shim {
        margin-top: 0 !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  thead th .table-cell,
    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  thead th .table-text {
        min-height: 1.65em !important;
        line-height: 1.5 !important;
        overflow: visible !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  thead th .table-text {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    /* Product descriptions in the view dialog may span multiple lines. */
    .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr {
        height: auto !important;
    }

        .inbound-report-page .document-popup .popup-detail-table-shell.detail-table-shell[b-isnm67ykhb]  table.table tbody > tr > td > .table-cell {
            height: auto !important;
            min-height: 0 !important;
            line-height: 1.35 !important;
            overflow: visible !important;
        }

.document-popup .view-product-cell[b-isnm67ykhb] {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.35;
}

    .document-popup .view-product-cell > strong[b-isnm67ykhb] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

/* Main report filters: one aligned row on desktop, predictable wrapping below. */
.inbound-report-page .inbound-filter-form[b-isnm67ykhb] {
    display: grid;
    grid-template-columns: auto minmax(280px, 1.4fr) minmax(190px, .7fr) minmax(300px, 1fr);
    align-items: center;
    gap: 7px 8px;
}

.inbound-report-page .inbound-filter-search[b-isnm67ykhb],
.inbound-report-page .inbound-filter-select-wrap[b-isnm67ykhb] {
    width: 100%;
    min-width: 0;
}

.inbound-report-page .inbound-filter-apply[b-isnm67ykhb],
.inbound-report-page .wms-filter-reset[b-isnm67ykhb] {
    align-self: center;
    flex: none;
}

.inbound-report-page .inbound-custom-date-range[b-isnm67ykhb] {
    grid-column: 2 / 4;
}

.inbound-report-page .inbound-filter-actions[b-isnm67ykhb] {
    grid-column: 4 / -1;
}

.inbound-document-cell[b-isnm67ykhb] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.inbound-document-icon[b-isnm67ykhb] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    color: #1768c5;
    background: #edf4fc;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.inbound-document-cell > div[b-isnm67ykhb],
.inbound-document-info[b-isnm67ykhb],
.inbound-updated-cell[b-isnm67ykhb] {
    min-width: 0;
}

    .inbound-document-cell small[b-isnm67ykhb],
    .inbound-document-info strong[b-isnm67ykhb],
    .inbound-document-info small[b-isnm67ykhb],
    .inbound-updated-cell strong[b-isnm67ykhb],
    .inbound-updated-cell small[b-isnm67ykhb] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.inbound-document-cell .document-number-link[b-isnm67ykhb] {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    color: #084f98;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbound-document-cell small[b-isnm67ykhb],
.inbound-document-info small[b-isnm67ykhb],
.inbound-updated-cell small[b-isnm67ykhb] {
    margin-top: 2px;
    color: #7b8ca2;
    font-size: 9px;
}

.inbound-document-info strong[b-isnm67ykhb],
.inbound-updated-cell strong[b-isnm67ykhb] {
    color: #183b65;
    font-size: 11px;
    font-weight: 700;
}

.inbound-company-pill[b-isnm67ykhb] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 8px;
    overflow: hidden;
    color: #304f72;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbound-date-cell[b-isnm67ykhb] {
    color: #53677e;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .inbound-report-page .inbound-filter-form[b-isnm67ykhb] {
        grid-template-columns: auto minmax(240px, 1fr) minmax(180px, .7fr);
    }

    .inbound-report-page .inbound-custom-date-range[b-isnm67ykhb] {
        grid-column: 2 / -1;
    }

    .inbound-report-page .inbound-filter-actions[b-isnm67ykhb] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .inbound-report-page .inbound-filter-form[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

        .inbound-report-page .inbound-filter-form .wms-filter-label[b-isnm67ykhb] {
            justify-self: start;
        }

    .inbound-report-page .inbound-filter-search[b-isnm67ykhb],
    .inbound-report-page .inbound-filter-select-wrap[b-isnm67ykhb],
    .inbound-report-page .inbound-custom-date-range[b-isnm67ykhb],
    .inbound-report-page .inbound-filter-actions[b-isnm67ykhb],
    .inbound-report-page .inbound-filter-apply[b-isnm67ykhb],
    .inbound-report-page .wms-filter-reset[b-isnm67ykhb] {
        width: 100%;
        grid-column: auto;
    }

    .inbound-report-page .inbound-custom-date-range[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

    .inbound-report-page .inbound-date-separator[b-isnm67ykhb] {
        display: none;
    }

    .inbound-report-page .inbound-filter-actions[b-isnm67ykhb] {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Keep the Inbound filter identical to Reports/InboundOrdersReport. */
.inbound-report-page .report-filter-bar[b-isnm67ykhb] {
    grid-template-columns: auto minmax(280px, 1.4fr) minmax(190px, .7fr) minmax(300px, 1fr);
    gap: 7px 8px;
    align-items: center;
    padding: 8px;
}

.inbound-report-page .report-custom-date-range[b-isnm67ykhb] {
    grid-column: 2 / 4;
}

.inbound-report-page .report-filter-actions[b-isnm67ykhb] {
    grid-column: 4 / -1;
}

@media (max-width: 1350px) {
    .inbound-report-page .report-filter-bar[b-isnm67ykhb] {
        grid-template-columns: auto minmax(240px, 1fr) minmax(180px, .7fr);
    }

    .inbound-report-page .report-custom-date-range[b-isnm67ykhb] {
        grid-column: 2 / -1;
    }

    .inbound-report-page .report-filter-actions[b-isnm67ykhb] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .inbound-report-page .report-filter-bar[b-isnm67ykhb] {
        grid-template-columns: 1fr 1fr;
    }

    .inbound-report-page .report-filter-search[b-isnm67ykhb],
    .inbound-report-page .report-custom-date-range[b-isnm67ykhb],
    .inbound-report-page .report-filter-actions[b-isnm67ykhb] {
        grid-column: 1 / -1;
    }

    .inbound-report-page .report-filter-bar > :nth-child(3)[b-isnm67ykhb] {
        grid-column: 1 !important;
    }

    .inbound-report-page .report-filter-bar > :nth-child(4)[b-isnm67ykhb] {
        grid-column: 2 !important;
    }
}

@media (max-width: 560px) {
    .inbound-report-page .report-filter-bar[b-isnm67ykhb],
    .inbound-report-page .report-custom-date-range[b-isnm67ykhb],
    .inbound-report-page .report-filter-actions[b-isnm67ykhb] {
        grid-template-columns: 1fr;
    }

    .inbound-report-page .report-custom-date-range[b-isnm67ykhb],
    .inbound-report-page .report-filter-actions[b-isnm67ykhb] {
        grid-column: auto;
    }

    .inbound-report-page .report-filter-bar > :nth-child(3)[b-isnm67ykhb],
    .inbound-report-page .report-filter-bar > :nth-child(4)[b-isnm67ykhb] {
        grid-column: 1 !important;
    }

    .inbound-report-page .report-date-separator[b-isnm67ykhb] {
        display: none;
    }

    /* The filter becomes taller on phones. Reserve table space and let the page scroll
       instead of allowing the flex layout to collapse the table body to zero height. */
    .inbound-report-page[b-isnm67ykhb] {
        height: 100% !important;
        overflow-y: auto !important;
    }

    .inbound-report-page > .report-table-shell[b-isnm67ykhb] {
        height: 680px !important;
        min-height: 680px !important;
        flex: 0 0 680px !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb] {
        min-height: 590px !important;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb]  .table-fixed-body {
        height: auto !important;
        min-height: 220px !important;
        flex: 1 1 220px !important;
    }
}
+

/* Compact continuous desktop layout shared by Inbound Orders and its report. */
@media (min-width: 1000px)[b-isnm67ykhb] {
    .inbound-report-page {
        height: 100%;
        min-height: 0;
        padding: 12px 18px 18px;
        gap: 0;
        overflow: hidden;
    }

    .inbound-report-page > .report-hero[b-isnm67ykhb] {
        min-height: 76px;
        margin: 0;
        padding: 10px 12px 6px;
        align-items: flex-end;
        border: 1px solid #d7e2ef;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        background: #fff;
    }

    .inbound-report-page .report-heading h1[b-isnm67ykhb] {
        margin: 2px 0 1px;
        font-size: 25px;
        line-height: 1.12;
    }

    .inbound-report-page .report-heading p[b-isnm67ykhb] {
        margin: 0;
        font-size: 11px;
    }

    .inbound-report-page .report-actions[b-isnm67ykhb] {
        max-width: 65%;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 8px;
        flex-direction: column;
    }

    .inbound-report-page .report-action-buttons[b-isnm67ykhb] {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .inbound-report-page .report-actions .inbound-live-status[b-isnm67ykhb] {
        width: 100%;
        min-height: 16px;
        justify-content: flex-end;
        gap: 9px;
    }

    .inbound-report-page .report-actions .inbound-live-indicator[b-isnm67ykhb] {
        padding: 3px 8px;
        font-size: 8px;
    }

    .inbound-report-page > .report-summary[b-isnm67ykhb] {
        margin: 0;
        padding: 6px 10px;
        gap: 12px;
        border-right: 1px solid #d7e2ef;
        border-left: 1px solid #d7e2ef;
        background: #fff;
    }

    .inbound-report-page > .report-summary .wms-summary-card[b-isnm67ykhb] {
        min-height: 72px;
        padding: 10px 14px;
    }

    .inbound-report-page > .report-table-shell[b-isnm67ykhb] {
        min-height: 0;
        margin: 0;
        padding: 0 10px 10px;
        flex: 1 1 auto;
        border: 1px solid #d7e2ef;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        background: #fff;
        overflow: hidden;
    }

    .inbound-report-page .inbound-table-host[b-isnm67ykhb],
    .inbound-report-page .document-table-shell[b-isnm67ykhb] {
        min-height: 0;
        height: 100%;
        flex: 1 1 auto;
    }

    .inbound-report-page .document-table-shell .report-filter-bar[b-isnm67ykhb],
    .inbound-report-page .report-filter-bar[b-isnm67ykhb] {
        width: 100%;
        min-width: 0;
        padding: 6px 0;
        display: grid;
        grid-template-columns: auto minmax(250px, 1.5fr) minmax(135px, .62fr) minmax(145px, .68fr) minmax(350px, 1.35fr) auto;
        gap: 7px;
        align-items: center;
    }

    .inbound-report-page[b-isnm67ykhb]  .report-filter-bar {
        grid-template-columns: auto minmax(250px, 1.5fr) minmax(135px, .62fr) minmax(145px, .68fr) minmax(350px, 1.35fr) auto !important;
    }

    .inbound-report-page[b-isnm67ykhb]  .report-filter-bar > *,
    .inbound-report-page[b-isnm67ykhb]  .report-custom-date-range,
    .inbound-report-page[b-isnm67ykhb]  .report-filter-actions {
        min-width: 0;
        grid-column: auto !important;
    }

    .inbound-report-page .report-table-shell .report-filter-bar > *[b-isnm67ykhb],
    .inbound-report-page .report-table-shell .report-custom-date-range[b-isnm67ykhb],
    .inbound-report-page .report-table-shell .report-filter-actions[b-isnm67ykhb] {
        min-width: 0;
        grid-column: auto !important;
    }

    .inbound-report-page .report-table-shell .report-custom-date-range[b-isnm67ykhb] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 7px;
    }

    .inbound-report-page .report-table-shell .report-filter-actions[b-isnm67ykhb] {
        display: flex;
        gap: 7px;
        white-space: nowrap;
    }

    .inbound-report-page .report-filter-control[b-isnm67ykhb],
    .inbound-report-page .report-filter-button[b-isnm67ykhb] {
        min-height: 38px;
    }

    .inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-container {
        padding: 0;
    }

    .inbound-report-page[b-isnm67ykhb]  .document-table-shell .table-fixed-body {
        min-height: 250px;
        flex: 1 1 auto;
    }
}
/* _content/WMS.UI/Pages/Index.razor.rz.scp.css */
.cache-dashboard[b-vtkzonuzs1] {
    --dash-blue: #1768c7;
    --dash-ink: #12213f;
    --dash-muted: #718198;
    --dash-line: #d9e3ef;
    min-height: 100%;
    padding: 20px;
    color: var(--dash-ink);
    background: #f3f7fc;
}

.dashboard-header[b-vtkzonuzs1] { margin-bottom: 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.dashboard-eyebrow[b-vtkzonuzs1], .panel-kicker[b-vtkzonuzs1] { color: #1768c7; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.dashboard-header h1[b-vtkzonuzs1] { margin: 3px 0 2px; font-size: 25px; font-weight: 850; }
.dashboard-header p[b-vtkzonuzs1] { margin: 0; color: var(--dash-muted); font-size: 11px; }
.header-actions[b-vtkzonuzs1] { display: flex; align-items: center; gap: 9px; }
.cache-status[b-vtkzonuzs1] { padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; color: #087949; background: #e5f8ee; border: 1px solid #bcebd2; border-radius: 999px; font-size: 9px; font-weight: 800; }
.cache-status i[b-vtkzonuzs1] { width: 6px; height: 6px; background: #0aa35d; border-radius: 50%; }
.refresh-button[b-vtkzonuzs1] { min-height: 38px; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; color: #173150; background: #fff; border: 1px solid #cddbeb; border-radius: 9px; box-shadow: 0 3px 8px rgba(37,75,121,.08); font-size: 11px; font-weight: 750; }
.refresh-button:hover[b-vtkzonuzs1] { color: var(--dash-blue); border-color: #94bcea; }

.primary-metrics[b-vtkzonuzs1] { margin-bottom: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric-card[b-vtkzonuzs1] { min-width: 0; min-height: 91px; padding: 14px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--dash-line); border-radius: 12px; box-shadow: 0 5px 18px rgba(31,74,125,.05); }
.metric-icon[b-vtkzonuzs1] { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.metric-card > div[b-vtkzonuzs1] { min-width: 0; display: grid; }
.metric-card small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 10px; }
.metric-card strong[b-vtkzonuzs1] { margin: 1px 0; font-size: 23px; line-height: 1; }
.metric-card > div > span[b-vtkzonuzs1] { overflow: hidden; color: #8a98aa; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.metric-card.stock .metric-icon[b-vtkzonuzs1] { color: #1768c7; background: #e8f2ff; }
.metric-card.available .metric-icon[b-vtkzonuzs1] { color: #079455; background: #e5f7ed; }
.metric-card.allocated .metric-icon[b-vtkzonuzs1] { color: #c37200; background: #fff1d9; }
.metric-card.orders .metric-icon[b-vtkzonuzs1] { color: #7651c5; background: #f0eaff; }

.operations-strip[b-vtkzonuzs1] { margin-bottom: 12px; padding: 10px 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: #fff; border: 1px solid var(--dash-line); border-radius: 12px; }
.operations-strip > div[b-vtkzonuzs1] { min-width: 0; padding: 4px 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; border-right: 1px solid #e8eef5; }
.operations-strip > div:last-child[b-vtkzonuzs1] { border-right: 0; }.operations-strip small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }.operations-strip strong[b-vtkzonuzs1] { font-size: 16px; }.operation-icon[b-vtkzonuzs1] { width: 29px; height: 29px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 8px; }
.operation-icon.inbound[b-vtkzonuzs1] { color: #078252; background: #e1f6eb; }.operation-icon.picking[b-vtkzonuzs1] { color: #1768c7; background: #e5f1ff; }.operation-icon.packing[b-vtkzonuzs1] { color: #7651c5; background: #f0eaff; }.operation-icon.shipping[b-vtkzonuzs1] { color: #087a8f; background: #e1f7fa; }.operation-icon.error[b-vtkzonuzs1] { color: #b42318; background: #feeceb; }.operations-strip .attention strong[b-vtkzonuzs1] { color: #b42318; }

.dashboard-grid[b-vtkzonuzs1] { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 12px; }
.panel[b-vtkzonuzs1] { min-width: 0; padding: 15px; background: #fff; border: 1px solid var(--dash-line); border-radius: 12px; box-shadow: 0 5px 18px rgba(31,74,125,.045); }
.panel-header[b-vtkzonuzs1] { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-header h2[b-vtkzonuzs1] { margin: 2px 0 0; font-size: 15px; font-weight: 850; }
.panel-header > span[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }
.stock-progress[b-vtkzonuzs1] { height: 12px; overflow: hidden; background: #eef2f7; border-radius: 999px; }
.stock-progress span[b-vtkzonuzs1] { height: 100%; display: block; background: linear-gradient(90deg, #0caf65, #27c99a); border-radius: inherit; }
.stock-breakdown[b-vtkzonuzs1] { margin-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stock-breakdown > div[b-vtkzonuzs1] { padding: 10px; display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 3px 7px; background: #f7f9fc; border-radius: 9px; }
.stock-breakdown small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }
.stock-breakdown strong[b-vtkzonuzs1] { grid-column: 2; font-size: 16px; }
.dot[b-vtkzonuzs1] { width: 7px; height: 7px; border-radius: 50%; }
.available-dot[b-vtkzonuzs1] { background: #10ae68; }.allocated-dot[b-vtkzonuzs1] { background: #e39719; }.total-dot[b-vtkzonuzs1] { background: #2774cf; }

.order-columns[b-vtkzonuzs1] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.order-column[b-vtkzonuzs1] { padding: 12px; border: 1px solid #e1e9f2; border-radius: 10px; }
.order-title[b-vtkzonuzs1] { display: flex; align-items: center; gap: 9px; }
.order-title > span[b-vtkzonuzs1] { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; }
.order-title div[b-vtkzonuzs1] { display: grid; }.order-title small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 8px; font-weight: 800; }.order-title strong[b-vtkzonuzs1] { font-size: 12px; }
.inbound .order-title > span[b-vtkzonuzs1] { color: #087b57; background: #def5ec; }.outbound .order-title > span[b-vtkzonuzs1] { color: #2269bf; background: #e5f1ff; }
.order-column dl[b-vtkzonuzs1] { margin: 12px 0 0; }.order-column dl div[b-vtkzonuzs1] { padding: 6px 0; display: flex; justify-content: space-between; border-top: 1px solid #eef2f7; }
.order-column dt[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }.order-column dd[b-vtkzonuzs1] { margin: 0; font-size: 11px; font-weight: 800; }

.resource-list[b-vtkzonuzs1] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.resource-list > div[b-vtkzonuzs1] { padding: 10px; display: flex; align-items: center; gap: 9px; background: #f7f9fc; border-radius: 9px; }
.resource-icon[b-vtkzonuzs1] { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; }.resource-icon.blue[b-vtkzonuzs1] { color: #1768c7; background: #e5f1ff; }.resource-icon.green[b-vtkzonuzs1] { color: #098a52; background: #e1f5ea; }.resource-icon.purple[b-vtkzonuzs1] { color: #744ebd; background: #eee7fc; }.resource-icon.orange[b-vtkzonuzs1] { color: #c16c00; background: #ffeed4; }
.resource-list > div > span:last-child[b-vtkzonuzs1] { display: grid; }.resource-list small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }.resource-list strong[b-vtkzonuzs1] { font-size: 16px; }
.capacity-row[b-vtkzonuzs1] { margin-top: 13px; display: flex; justify-content: space-between; color: var(--dash-muted); font-size: 9px; }.capacity-row strong[b-vtkzonuzs1] { color: var(--dash-ink); }.capacity-track[b-vtkzonuzs1] { height: 7px; margin-top: 5px; overflow: hidden; background: #edf2f7; border-radius: 999px; }.capacity-track span[b-vtkzonuzs1] { height: 100%; display: block; background: #2774cf; border-radius: inherit; }

.stock-table[b-vtkzonuzs1] { overflow: hidden; border: 1px solid #e3eaf3; border-radius: 10px; }.stock-table-head[b-vtkzonuzs1], .stock-table-row[b-vtkzonuzs1] { padding: 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr) 80px 70px 70px; align-items: center; gap: 8px; }.stock-table-head[b-vtkzonuzs1] { color: #6f7f93; background: #f5f8fc; font-size: 8px; font-weight: 800; }.stock-table-head span:not(:first-child)[b-vtkzonuzs1], .stock-table-row > strong[b-vtkzonuzs1] { text-align: right; }.stock-table-row[b-vtkzonuzs1] { min-height: 47px; border-top: 1px solid #e9eef5; font-size: 10px; }.stock-product[b-vtkzonuzs1] { min-width: 0; display: grid; }.stock-product strong[b-vtkzonuzs1], .stock-product small[b-vtkzonuzs1] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.stock-product small[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 8px; }.allocated-value[b-vtkzonuzs1] { color: #b86c00; }.available-value[b-vtkzonuzs1] { color: #078252; }

.activity-panel[b-vtkzonuzs1] { grid-column: 1 / -1; padding-bottom: 8px; }
.activity-list[b-vtkzonuzs1] { overflow: hidden; border: 1px solid #e3eaf3; border-radius: 10px; }
.activity-row[b-vtkzonuzs1] { min-height: 52px; padding: 7px 11px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 135px; align-items: center; gap: 9px; border-bottom: 1px solid #e9eef5; }
.activity-row:last-child[b-vtkzonuzs1] { border-bottom: 0; }.activity-row:hover[b-vtkzonuzs1] { background: #f6faff; }
.activity-icon[b-vtkzonuzs1] { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; }.activity-icon.inbound[b-vtkzonuzs1] { color: #078252; background: #e1f6eb; }.activity-icon.outbound[b-vtkzonuzs1] { color: #1768c7; background: #e5f1ff; }
.activity-copy[b-vtkzonuzs1] { min-width: 0; display: grid; }.activity-copy strong[b-vtkzonuzs1], .activity-copy small[b-vtkzonuzs1] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.activity-copy strong[b-vtkzonuzs1] { font-size: 11px; }.activity-copy small[b-vtkzonuzs1], .activity-row time[b-vtkzonuzs1] { color: var(--dash-muted); font-size: 9px; }.activity-row time[b-vtkzonuzs1] { text-align: right; }
.empty-activity[b-vtkzonuzs1] { min-height: 115px; display: grid; place-items: center; align-content: center; gap: 8px; color: #8795a8; font-size: 10px; }.empty-activity i[b-vtkzonuzs1] { font-size: 22px; }

@media (max-width: 1050px) { .primary-metrics[b-vtkzonuzs1] { grid-template-columns: repeat(2, 1fr); }.operations-strip[b-vtkzonuzs1] { grid-template-columns: repeat(3, 1fr); }.operations-strip > div[b-vtkzonuzs1] { border-right: 0; }.dashboard-grid[b-vtkzonuzs1] { grid-template-columns: 1fr; }.activity-panel[b-vtkzonuzs1] { grid-column: auto; } }
@media (max-width: 620px) { .cache-dashboard[b-vtkzonuzs1] { padding: 12px; }.dashboard-header[b-vtkzonuzs1] { align-items: flex-start; flex-direction: column; }.header-actions[b-vtkzonuzs1] { width: 100%; justify-content: space-between; }.primary-metrics[b-vtkzonuzs1], .operations-strip[b-vtkzonuzs1] { grid-template-columns: 1fr; }.order-columns[b-vtkzonuzs1], .resource-list[b-vtkzonuzs1] { grid-template-columns: 1fr; }.stock-table-head[b-vtkzonuzs1], .stock-table-row[b-vtkzonuzs1] { grid-template-columns: minmax(0, 1fr) 62px 62px; }.stock-table-head span:nth-child(3)[b-vtkzonuzs1], .stock-table-row > strong:nth-child(3)[b-vtkzonuzs1] { display: none; }.activity-row[b-vtkzonuzs1] { grid-template-columns: 32px minmax(0, 1fr); }.activity-row time[b-vtkzonuzs1] { grid-column: 2; text-align: left; } }
/* _content/WMS.UI/Pages/Login.razor.rz.scp.css */
.wms-login[b-w5ht6obsi1] {
    --login-blue: #0f5eb8;
    --login-blue-dark: #073d82;
    --login-accent: #27c4c9;
    display: grid;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: minmax(440px, 1.08fr) minmax(430px, .92fr);
    overflow: hidden;
    color: #102a47;
    background: #f4f7fb;
}

.wms-login__brand[b-w5ht6obsi1] {
    position: relative;
    display: flex;
    min-height: 100%;
    padding: clamp(36px, 5vw, 76px);
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(6, 47, 105, .98), rgba(18, 104, 191, .94)),
        #0b58ad;
}

.wms-login__brand[b-w5ht6obsi1]::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    content: "";
    mask-image: linear-gradient(to bottom right, #000, transparent 78%);
}

.wms-login__brand-content[b-w5ht6obsi1] {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(650px, 100%);
    flex-direction: column;
}

.wms-login__brand-mark[b-w5ht6obsi1] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.wms-login__brand-mark > span[b-w5ht6obsi1] {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 13px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(1, 30, 68, .18);
    font-size: 21px;
}

.wms-login__brand-mark > div[b-w5ht6obsi1] {
    display: flex;
    flex-direction: column;
}

.wms-login__brand-mark strong[b-w5ht6obsi1] {
    letter-spacing: .12em;
    font-size: 19px;
    line-height: 1.1;
}

.wms-login__brand-mark small[b-w5ht6obsi1] {
    margin-top: 4px;
    color: rgba(255,255,255,.68);
    letter-spacing: .16em;
    font-size: 8px;
    font-weight: 700;
}

.wms-login__brand-message[b-w5ht6obsi1] {
    margin: auto 0;
}

.wms-login__eyebrow[b-w5ht6obsi1] {
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(132, 236, 238, .32);
    border-radius: 999px;
    color: #9ff5f2;
    background: rgba(14, 194, 196, .1);
    letter-spacing: .13em;
    font-size: 9px;
    font-weight: 800;
}

.wms-login__brand-message h1[b-w5ht6obsi1] {
    max-width: 590px;
    margin: 20px 0 16px;
    color: #fff;
    letter-spacing: -.035em;
    font-size: clamp(36px, 4.1vw, 64px);
    font-weight: 750;
    line-height: 1.12;
}

.wms-login__brand-message p[b-w5ht6obsi1] {
    max-width: 510px;
    margin: 0;
    color: rgba(228, 241, 255, .76);
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.75;
}

.wms-login__capabilities[b-w5ht6obsi1] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.wms-login__capabilities span[b-w5ht6obsi1] {
    display: inline-flex;
    padding: 8px 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.07);
    font-size: 10px;
    font-weight: 650;
}

.wms-login__capabilities i[b-w5ht6obsi1] { color: #73e5e5; }

.wms-login__decoration[b-w5ht6obsi1] {
    position: absolute;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
}

.wms-login__decoration--one[b-w5ht6obsi1] {
    right: -180px;
    bottom: -190px;
    width: 520px;
    height: 520px;
    box-shadow: inset 0 0 0 70px rgba(255,255,255,.025);
}

.wms-login__decoration--two[b-w5ht6obsi1] {
    top: 15%;
    right: 9%;
    width: 110px;
    height: 110px;
    background: rgba(39, 196, 201, .07);
}

.wms-login__access[b-w5ht6obsi1] {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 100%;
    padding: 36px;
    place-items: center;
    background:
        radial-gradient(circle at 90% 8%, rgba(34, 115, 204, .08), transparent 28%),
        #f6f8fb;
}

.wms-login__access[b-w5ht6obsi1]  form {
    width: min(430px, 100%);
}

.wms-login-card[b-w5ht6obsi1] {
    width: 100%;
    padding: clamp(27px, 3vw, 40px);
    border: 1px solid #dbe5ef;
    border-radius: 20px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 70px rgba(23, 56, 91, .12);
}

.wms-login-card__header[b-w5ht6obsi1] { margin-bottom: 27px; }

.wms-login-card__header > span[b-w5ht6obsi1] {
    color: var(--login-blue);
    letter-spacing: .14em;
    font-size: 9px;
    font-weight: 850;
}

.wms-login-card__header h2[b-w5ht6obsi1] {
    margin: 7px 0 5px;
    color: #102a47;
    letter-spacing: -.025em;
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 760;
}

.wms-login-card__header p[b-w5ht6obsi1] {
    margin: 0;
    color: #7a8ca0;
    font-size: 11px;
}

.wms-login-card__mobile-mark[b-w5ht6obsi1] { display: none; }

.wms-login-card__form[b-w5ht6obsi1] {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.wms-login-field > label[b-w5ht6obsi1] {
    display: block;
    margin: 0 0 7px 2px;
    color: #425d78;
    font-size: 10px;
    font-weight: 750;
}

.wms-login-field > div[b-w5ht6obsi1] {
    position: relative;
    display: flex;
    align-items: center;
}

.wms-login-field > div > i[b-w5ht6obsi1] {
    position: absolute;
    z-index: 2;
    left: 15px;
    color: #7390ad;
    font-size: 13px;
    pointer-events: none;
}

.wms-login-field[b-w5ht6obsi1]  .form-control {
    width: 100%;
    height: 48px;
    padding: 0 44px;
    border: 1px solid #d5e1ed;
    border-radius: 11px;
    color: #163553;
    background: #f8fafc;
    box-shadow: none;
    text-align: left !important;
    font-size: 11px;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.wms-login-field[b-w5ht6obsi1]  .form-control:hover { border-color: #b8cce0; }

.wms-login-field[b-w5ht6obsi1]  .form-control:focus {
    border-color: #4c91d7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(38, 116, 200, .1);
}

.wms-login-field[b-w5ht6obsi1]  .form-control::placeholder { color: #a0afbe; }

.wms-login-field[b-w5ht6obsi1]  .input-group,
.wms-login-field[b-w5ht6obsi1]  .input-group > div {
    width: 100%;
}

.wms-login-field[b-w5ht6obsi1]  .btn {
    border: 0;
    color: #7189a2;
    background: transparent;
}

.wms-login-card__submit[b-w5ht6obsi1] {
    display: flex !important;
    width: 100%;
    min-height: 48px;
    margin-top: 5px;
    padding: 0 18px !important;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0 !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #146bc7, #0753a9) !important;
    box-shadow: 0 11px 24px rgba(16, 93, 180, .23);
    font-size: 11px !important;
    font-weight: 750 !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}

.wms-login-card__submit:hover[b-w5ht6obsi1] {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(16, 93, 180, .3);
}

.wms-login-card__submit:active[b-w5ht6obsi1] { transform: translateY(0); }

.wms-login-card footer[b-w5ht6obsi1] {
    display: flex;
    margin-top: 25px;
    padding-top: 17px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-top: 1px solid #edf1f5;
    color: #96a5b4;
    font-size: 8px;
}

.wms-login-card footer i[b-w5ht6obsi1] { color: #32a68b; }

.wms-login__copyright[b-w5ht6obsi1] {
    position: absolute;
    bottom: 19px;
    margin: 0;
    color: #9aa8b7;
    font-size: 8px;
}

.wms-login-loading[b-w5ht6obsi1] {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #70849a;
}

.wms-login-loading > span[b-w5ht6obsi1] {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #1975d1, #0753a9);
    box-shadow: 0 14px 35px rgba(16, 93, 180, .22);
    font-size: 22px;
}

.wms-login-loading > div[b-w5ht6obsi1] {
    width: 130px;
    height: 3px;
    margin: 20px 0 11px;
    overflow: hidden;
    border-radius: 999px;
    background: #dce6ef;
}

.wms-login-loading > div[b-w5ht6obsi1]::after {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: var(--login-blue);
    content: "";
    animation: wms-login-progress-b-w5ht6obsi1 1.1s ease-in-out infinite alternate;
}

.wms-login-loading p[b-w5ht6obsi1] {
    margin: 0;
    font-size: 10px;
}

@keyframes wms-login-progress-b-w5ht6obsi1 {
    from { transform: translateX(-10%); }
    to { transform: translateX(145%); }
}

@media (max-width: 900px) {
    .wms-login[b-w5ht6obsi1] { grid-template-columns: 1fr; }
    .wms-login__brand[b-w5ht6obsi1] { display: none; }
    .wms-login__access[b-w5ht6obsi1] { padding: 24px; }
    .wms-login-card__mobile-mark[b-w5ht6obsi1] {
        display: grid;
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
        place-items: center;
        border-radius: 13px;
        color: #fff;
        background: linear-gradient(135deg, #1975d1, #0753a9);
        box-shadow: 0 10px 25px rgba(16, 93, 180, .2);
        font-size: 18px;
    }
}

@media (max-width: 520px) {
    .wms-login__access[b-w5ht6obsi1] {
        padding: 14px;
        align-items: center;
    }

    .wms-login-card[b-w5ht6obsi1] {
        padding: 25px 19px;
        border-radius: 16px;
    }

    .wms-login__copyright[b-w5ht6obsi1] { bottom: 10px; }
}

@media (max-height: 620px) {
    .wms-login__access[b-w5ht6obsi1] { padding-top: 16px; padding-bottom: 32px; }
    .wms-login-card[b-w5ht6obsi1] { padding-top: 22px; padding-bottom: 22px; }
    .wms-login-card__header[b-w5ht6obsi1] { margin-bottom: 18px; }
    .wms-login-card footer[b-w5ht6obsi1] { margin-top: 17px; padding-top: 12px; }
}
/* _content/WMS.UI/Pages/Outbound/SalesOrder/NewDesign/SalesOrder.razor.rz.scp.css */
.other-order-report-page[b-fqzv1glw6p] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    background: #f4f7fb;
    box-sizing: border-box;
}

.report-hero[b-fqzv1glw6p] {
    flex: 0 0 auto;
    margin-bottom: 14px;
}

.report-heading h1[b-fqzv1glw6p] {
    margin: 4px 0 5px;
    color: #12213f;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.15;
}

.report-heading p[b-fqzv1glw6p] {
    margin: 0;
    color: #708098;
    font-size: 12px;
}

.report-eyebrow[b-fqzv1glw6p] {
    color: #087f8c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.report-button[b-fqzv1glw6p] {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.report-button:hover[b-fqzv1glw6p] {
    color: #1769c2;
    background: #f8fbff;
    border-color: #8eb8e8;
}

.report-button-primary[b-fqzv1glw6p] {
    color: #fff;
    background: #1769c2;
    border-color: #1769c2;
}

.report-button-primary:hover[b-fqzv1glw6p] {
    color: #fff;
    background: #1259a6;
    border-color: #1259a6;
}

.create-order-backdrop[b-fqzv1glw6p] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, .58);
}

.create-order-dialog[b-fqzv1glw6p] {
    position: relative;
    width: min(1180px, 96vw);
    height: min(880px, calc(100dvh - 32px));
    max-height: calc(100dvh - 32px);
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.create-order-dialog[b-fqzv1glw6p]  .create-order-form { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex: 1 1 auto; flex-direction: column; }
.create-order-header[b-fqzv1glw6p], .create-order-footer[b-fqzv1glw6p] { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; }
.create-order-header[b-fqzv1glw6p] { padding: 18px 20px; border-bottom: 1px solid #dbe4ef; }
.create-order-header h2[b-fqzv1glw6p] { margin: 3px 0; color: #12213f; font-size: 21px; font-weight: 800; }
.create-order-header p[b-fqzv1glw6p] { margin: 0; color: #718096; font-size: 12px; }
.create-order-close[b-fqzv1glw6p], .create-order-remove[b-fqzv1glw6p] { border: 0; background: transparent; }
.create-order-close[b-fqzv1glw6p] { width: 36px; height: 36px; color: #64748b; background: #f1f5f9; border-radius: 8px; }
.create-order-body[b-fqzv1glw6p] { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; padding: 18px 20px; scrollbar-gutter: stable; }
.create-order-body h3[b-fqzv1glw6p] { margin: 18px 0 10px; color: #233653; font-size: 14px; font-weight: 800; }
.create-order-body h3:first-of-type[b-fqzv1glw6p] { margin-top: 20px; }
.create-order-body h3 small[b-fqzv1glw6p] { color: #8290a4; font-weight: 500; }
.create-order-grid[b-fqzv1glw6p] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.create-order-grid label[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.create-order-grid label > span[b-fqzv1glw6p] { color: #475569; font-size: 11px; font-weight: 700; }
.create-order-grid input[b-fqzv1glw6p], .create-order-grid select[b-fqzv1glw6p], .create-order-grid textarea[b-fqzv1glw6p],
.create-order-detail-table input[b-fqzv1glw6p], .create-order-detail-table select[b-fqzv1glw6p] { width: 100%; min-height: 36px; padding: 7px 9px; color: #26364d; background: #fff; border: 1px solid #cbd8e7; border-radius: 7px; outline: none; }
.create-order-grid input:focus[b-fqzv1glw6p], .create-order-grid select:focus[b-fqzv1glw6p], .create-order-grid textarea:focus[b-fqzv1glw6p],
.create-order-detail-table input:focus[b-fqzv1glw6p], .create-order-detail-table select:focus[b-fqzv1glw6p] { border-color: #3887d7; box-shadow: 0 0 0 3px rgba(56, 135, 215, .12); }
.create-order-span-2[b-fqzv1glw6p] { grid-column: span 2; }
.create-order-delivery-note[b-fqzv1glw6p] { justify-content: flex-end; }
.create-order-delivery-note input[type="file"][b-fqzv1glw6p] { padding: 5px 7px; font-size: 11px; }
.create-order-delivery-note small[b-fqzv1glw6p] { overflow: hidden; color: #15803d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-detail-heading[b-fqzv1glw6p] { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.create-order-detail-heading h3[b-fqzv1glw6p] { margin: 0; }
.create-order-detail-heading small[b-fqzv1glw6p] { display: block; margin-top: 3px; color: #8290a4; font-size: 10px; }
.create-order-pack-list[b-fqzv1glw6p] { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.create-order-pack-row[b-fqzv1glw6p] { display: grid; grid-template-columns: 34px minmax(160px, 1fr) minmax(160px, 1fr) minmax(260px, 1.4fr) 36px; gap: 9px; align-items: end; padding: 10px; background: #f8fafc; border: 1px solid #dbe4ef; border-radius: 9px; }
.create-order-pack-row label[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.create-order-pack-row label > span[b-fqzv1glw6p] { color: #475569; font-size: 11px; font-weight: 700; }
.create-order-pack-row input[b-fqzv1glw6p] { width: 100%; min-height: 36px; padding: 7px 9px; color: #26364d; background: #fff; border: 1px solid #cbd8e7; border-radius: 7px; outline: none; }
.create-order-pack-sequence[b-fqzv1glw6p] { width: 28px; height: 28px; align-self: center; display: grid; place-items: center; color: #1769c2; background: #eaf3ff; border-radius: 50%; font-size: 11px; font-weight: 800; }
.create-order-pack-file input[type="file"][b-fqzv1glw6p] { padding: 5px 7px; font-size: 11px; }
.create-order-pack-file small[b-fqzv1glw6p] { overflow: hidden; color: #15803d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-detail-table[b-fqzv1glw6p] { overflow-x: auto; margin-top: 10px; border: 1px solid #dbe4ef; border-radius: 9px; }
.create-order-detail-table table[b-fqzv1glw6p] { width: 100%; min-width: 820px; border-collapse: collapse; }
.create-order-detail-table th[b-fqzv1glw6p] { padding: 9px; color: #fff; font-size: 11px; text-align: left; background: #1769c2; }
.create-order-detail-table td[b-fqzv1glw6p] { padding: 7px 9px; vertical-align: middle; border-top: 1px solid #e6edf5; }
.create-order-detail-table th:first-child[b-fqzv1glw6p], .create-order-detail-table td:first-child[b-fqzv1glw6p] { width: 54px; text-align: center; }
.create-order-detail-table th:last-child[b-fqzv1glw6p], .create-order-detail-table td:last-child[b-fqzv1glw6p] { width: 82px; text-align: center; }
.create-order-product[b-fqzv1glw6p] { min-width: 150px; display: flex; flex-direction: column; }
.create-order-product strong[b-fqzv1glw6p] { color: #1769c2; font-size: 12px; }
.create-order-product span[b-fqzv1glw6p] { color: #334155; font-size: 11px; font-weight: 700; }
.create-order-product small[b-fqzv1glw6p] { max-width: 230px; overflow: hidden; color: #8491a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-unit[b-fqzv1glw6p] { color: #475569; font-size: 11px; font-weight: 700; }
.create-order-available[b-fqzv1glw6p] { color: #15945a; font-size: 12px; white-space: nowrap; }
.create-order-detail-qty[b-fqzv1glw6p] { display: block; color: #1e3a5f; font-size: 13px; }
.create-order-detail-table .create-order-unit[b-fqzv1glw6p] { display: block; margin-top: 1px; color: #8491a3; font-size: 9px; font-weight: 500; }
.create-order-pack-pill[b-fqzv1glw6p] { display: inline-flex; min-height: 23px; padding: 4px 8px; align-items: center; color: #175da8; background: #eaf3ff; border-radius: 999px; font-size: 10px; font-weight: 800; }
.create-order-stock-summary[b-fqzv1glw6p] { min-width: 145px; display: flex; flex-direction: column; gap: 3px; }
.create-order-stock-summary span[b-fqzv1glw6p] { overflow: hidden; color: #52657d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-stock-summary i[b-fqzv1glw6p] { width: 12px; color: #7893b2; text-align: center; }
.create-order-detail-actions[b-fqzv1glw6p] { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.create-order-edit[b-fqzv1glw6p], .create-order-detail-actions .create-order-remove[b-fqzv1glw6p] { width: 29px; height: 29px; padding: 0; display: inline-grid; place-items: center; background: #fff; border-radius: 7px; }
.create-order-edit[b-fqzv1glw6p] { color: #1769c2; border: 1px solid #bcd3ee; }
.create-order-edit:hover[b-fqzv1glw6p] { color: #fff; background: #1769c2; border-color: #1769c2; }
.create-order-detail-actions .create-order-remove[b-fqzv1glw6p] { color: #dc2626; border: 1px solid #fecaca; }
.create-order-detail-actions .create-order-remove:disabled[b-fqzv1glw6p] { cursor: not-allowed; opacity: .38; }
.create-order-product-empty[b-fqzv1glw6p] { width: 100%; min-height: 118px; margin-top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #718096; background: #f8fafc; border: 1px dashed #b9c9dc; border-radius: 9px; }
.create-order-product-empty i[b-fqzv1glw6p] { color: #7ba7d8; font-size: 25px; }
.create-order-product-empty strong[b-fqzv1glw6p] { color: #40536d; font-size: 12px; }
.create-order-product-empty span[b-fqzv1glw6p] { font-size: 10px; }
.create-order-product-empty:not(:disabled):hover[b-fqzv1glw6p] { color: #1769c2; background: #f0f7ff; border-color: #6ca3de; }
.create-order-product-empty:disabled[b-fqzv1glw6p] { cursor: not-allowed; opacity: .62; }
.create-order-picker-overlay[b-fqzv1glw6p] { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 22px; background: rgba(15, 23, 42, .48); }
.create-order-picker[b-fqzv1glw6p] { width: min(620px, 100%); max-height: min(680px, calc(100% - 20px)); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: #fff; border-radius: 13px; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); }
.create-order-picker header[b-fqzv1glw6p] { padding: 16px 17px; display: flex; justify-content: space-between; border-bottom: 1px solid #dce5ef; }
.create-order-picker header span[b-fqzv1glw6p] { color: #1769c2; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.create-order-picker header h3[b-fqzv1glw6p] { margin: 2px 0; color: #172944; font-size: 18px; }
.create-order-picker header p[b-fqzv1glw6p] { margin: 0; color: #718096; font-size: 10px; }
.create-order-picker header button[b-fqzv1glw6p] { width: 32px; height: 32px; color: #53647d; background: #eef2f7; border: 0; border-radius: 8px; }
.create-order-picker-search[b-fqzv1glw6p] { margin: 12px 14px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: #718096; border: 1px solid #cbd8e7; border-radius: 8px; }
.create-order-picker-search input[b-fqzv1glw6p] { width: 100%; height: 38px; border: 0; outline: 0; }
.create-order-picker-list[b-fqzv1glw6p] { min-height: 0; overflow: auto; padding: 0 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.create-order-picker-item[b-fqzv1glw6p] { width: 100%; min-height: 62px; padding: 8px 10px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto 24px; align-items: center; gap: 9px; text-align: left; background: #fff; border: 1px solid #d9e3ef; border-radius: 9px; }
.create-order-picker-item:hover[b-fqzv1glw6p] { background: #f2f7ff; border-color: #78a8dd; }
.create-order-picker-item:disabled[b-fqzv1glw6p] { cursor: not-allowed; opacity: .55; background: #f8fafc; }
.create-order-picker-icon[b-fqzv1glw6p] { width: 38px; height: 38px; display: grid; place-items: center; color: #1769c2; background: #eaf3ff; border-radius: 9px; }
.create-order-picker-copy[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; }
.create-order-picker-copy strong[b-fqzv1glw6p] { color: #1769c2; font-size: 12px; }
.create-order-picker-copy span[b-fqzv1glw6p] { overflow: hidden; color: #334155; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.create-order-picker-copy small[b-fqzv1glw6p] { overflow: hidden; color: #8491a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-picker-available[b-fqzv1glw6p] { min-width: 65px; display: flex; flex-direction: column; align-items: flex-end; }
.create-order-picker-available small[b-fqzv1glw6p] { color: #718096; font-size: 8px; }
.create-order-picker-available strong[b-fqzv1glw6p] { color: #15945a; font-size: 13px; }
.create-order-picker-item em[b-fqzv1glw6p] { padding: 3px 6px; color: #8a5b00; background: #fff5d6; border-radius: 5px; font-size: 8px; font-style: normal; font-weight: 800; }
.create-order-picker-item > i[b-fqzv1glw6p] { color: #1769c2; }
.create-order-picker-empty[b-fqzv1glw6p] { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #8491a3; font-size: 11px; }
.create-order-picker-empty i[b-fqzv1glw6p] { font-size: 28px; }
.create-order-picker footer[b-fqzv1glw6p] { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; color: #718096; background: #f8fafc; border-top: 1px solid #dce5ef; font-size: 9px; }
.create-order-picker footer button[b-fqzv1glw6p] { padding: 7px 12px; color: #fff; background: #1769c2; border: 0; border-radius: 7px; font-size: 10px; font-weight: 800; }
.create-order-product-config[b-fqzv1glw6p] { width: min(650px, 100%); overflow: hidden; background: #fff; border-radius: 13px; box-shadow: 0 20px 60px rgba(15, 23, 42, .3); }
.create-order-product-config header[b-fqzv1glw6p] { padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid #dce5ef; }
.create-order-product-config header span[b-fqzv1glw6p] { color: #1769c2; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.create-order-product-config header h3[b-fqzv1glw6p] { margin: 2px 0; color: #172944; font-size: 18px; }
.create-order-product-config header p[b-fqzv1glw6p] { margin: 0; color: #718096; font-size: 10px; }
.create-order-product-config header button[b-fqzv1glw6p] { width: 32px; height: 32px; color: #53647d; background: #eef2f7; border: 0; border-radius: 8px; }
.create-order-product-config-body[b-fqzv1glw6p] { padding: 16px 18px; }
.create-order-product-config-summary[b-fqzv1glw6p] { padding: 11px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #f5f9fe; border: 1px solid #d9e5f2; border-radius: 10px; }
.create-order-product-config-summary > div:not(.create-order-product-config-total)[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; }
.create-order-product-config-summary strong[b-fqzv1glw6p] { color: #1769c2; font-size: 13px; }
.create-order-product-config-summary span[b-fqzv1glw6p] { overflow: hidden; color: #334155; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.create-order-product-config-summary small[b-fqzv1glw6p] { overflow: hidden; color: #8491a3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.create-order-product-config-total[b-fqzv1glw6p] { min-width: 90px; display: flex; flex-direction: column; align-items: flex-end; }
.create-order-product-config-total strong[b-fqzv1glw6p] { color: #15945a; font-size: 17px; }
.create-order-product-config-grid[b-fqzv1glw6p] { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.create-order-product-config-grid label[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.create-order-product-config-grid label > span[b-fqzv1glw6p] { color: #475569; font-size: 11px; font-weight: 700; }
.create-order-product-config-grid label > span small[b-fqzv1glw6p] { color: #8491a3; font-size: 9px; font-weight: 500; }
.create-order-product-config-grid input[b-fqzv1glw6p], .create-order-product-config-grid select[b-fqzv1glw6p] { width: 100%; min-height: 39px; padding: 7px 9px; color: #26364d; background: #fff; border: 1px solid #cbd8e7; border-radius: 7px; outline: none; }
.create-order-product-config-grid input:focus[b-fqzv1glw6p], .create-order-product-config-grid select:focus[b-fqzv1glw6p] { border-color: #3887d7; box-shadow: 0 0 0 3px rgba(56, 135, 215, .12); }
.create-order-product-config-available[b-fqzv1glw6p] { margin-top: 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; color: #176b49; background: #ecfdf5; border: 1px solid #a7e5d0; border-radius: 8px; }
.create-order-product-config-available span[b-fqzv1glw6p] { font-size: 10px; font-weight: 700; }
.create-order-product-config-available strong[b-fqzv1glw6p] { font-size: 17px; }
.create-order-product-config-available.is-empty[b-fqzv1glw6p] { color: #8a5b00; background: #fff8e6; border-color: #f2d28a; }
.create-order-product-config footer[b-fqzv1glw6p] { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; background: #f8fafc; border-top: 1px solid #dce5ef; }
.create-order-product-config footer button[b-fqzv1glw6p] { min-height: 36px; padding: 0 13px; border-radius: 7px; font-size: 10px; font-weight: 800; }
.product-config-cancel[b-fqzv1glw6p] { color: #53647d; background: #fff; border: 1px solid #cbd8e7; }
.product-config-confirm[b-fqzv1glw6p] { color: #fff; background: #1769c2; border: 1px solid #1769c2; }
.create-order-remove[b-fqzv1glw6p] { color: #dc2626; }
.create-order-error[b-fqzv1glw6p] { margin-top: 12px; padding: 10px 12px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; font-size: 12px; }
.create-order-footer[b-fqzv1glw6p] { position: relative; z-index: 1; gap: 9px; justify-content: flex-end; padding: 13px 20px; background: #fff; border-top: 1px solid #dbe4ef; }

@media (max-width: 800px) {
    .create-order-backdrop[b-fqzv1glw6p] { padding: 8px; }
    .create-order-dialog[b-fqzv1glw6p] { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
    .create-order-grid[b-fqzv1glw6p] { grid-template-columns: 1fr; }
    .create-order-span-2[b-fqzv1glw6p] { grid-column: auto; }
    .create-order-pack-row[b-fqzv1glw6p] { grid-template-columns: 30px 1fr 36px; }
    .create-order-pack-row label[b-fqzv1glw6p] { grid-column: 2; }
    .create-order-pack-row .create-order-remove[b-fqzv1glw6p] { grid-column: 3; grid-row: 1; }
    .create-order-picker-overlay[b-fqzv1glw6p] { padding: 8px; }
    .create-order-picker[b-fqzv1glw6p] { max-height: calc(100% - 8px); }
    .create-order-product-config-grid[b-fqzv1glw6p] { grid-template-columns: 1fr; }
}

.report-summary[b-fqzv1glw6p] {
    flex: 0 0 auto;
    gap: 12px;
    margin-bottom: 14px;
}

.summary-card[b-fqzv1glw6p] {
    min-height: 96px;
    padding: 15px 16px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 55, 86, .055);
}

.summary-icon[b-fqzv1glw6p] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 13px;
    font-size: 18px;
}

.summary-card-success .summary-icon[b-fqzv1glw6p] { color: #15803d; background: #eaf8ef; }
.summary-card-info .summary-icon[b-fqzv1glw6p] { color: #087f8c; background: #e8f7f8; }
.summary-card-warning .summary-icon[b-fqzv1glw6p] { color: #b45309; background: #fff4df; }

.summary-card strong[b-fqzv1glw6p] {
    color: #12213f;
    font-size: 25px;
    line-height: 1;
}

.summary-card span[b-fqzv1glw6p],
.summary-card small[b-fqzv1glw6p] {
    color: #718096;
}

.report-workspace[b-fqzv1glw6p] {
    width: 100%;
    min-width: 0;
    min-height: 440px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 55, 86, .055);
}

[b-fqzv1glw6p] .report-tabs {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .report-tabs > .tabs-header {
    min-height: 49px;
    flex: 0 0 auto;
    background: #fff;
}

.report-tab[b-fqzv1glw6p] {
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #53647d;
    background: #fff;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

.report-tab:hover[b-fqzv1glw6p] {
    color: #1d5fae;
    background: #f8fbff;
}

[b-fqzv1glw6p] .report-tabs > .tabs-body,
[b-fqzv1glw6p] .report-tabs .tabs-content,
[b-fqzv1glw6p] .report-tabs .tab-content,
[b-fqzv1glw6p] .report-tabs .tab-pane {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-panel[b-fqzv1glw6p] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 18px 16px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.document-table-shell[b-fqzv1glw6p] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
}

[b-fqzv1glw6p] .document-table-shell > .table,
[b-fqzv1glw6p] .document-table-shell .table-container,
[b-fqzv1glw6p] .document-table-shell .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    flex: 1 1 auto;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto !important;
    scrollbar-gutter: stable;
}

[b-fqzv1glw6p] .document-table-shell .nav-pages {
    min-height: 44px;
    padding: 7px 10px 8px;
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #e4eaf2;
    font-size: 11px;
}

@media (max-width: 820px) {
    .other-order-report-page[b-fqzv1glw6p] { padding: 12px 10px; }
    .report-panel[b-fqzv1glw6p] { padding: 12px 9px; }
    .report-workspace[b-fqzv1glw6p] { min-height: 440px; }
    .report-tab[b-fqzv1glw6p] { padding: 0 12px; font-size: 12px; }
}


.document-number-link[b-fqzv1glw6p] {
    max-width: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #175da8;
    font-size: 10.5px;
    font-weight: 650;
    text-align: left;
    background: transparent;
    border: 0;
}

.document-number-link span[b-fqzv1glw6p] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-number-link:hover[b-fqzv1glw6p] {
    color: #087f8c;
    text-decoration: underline;
}


/* ESS-style table layout: contained controls, readable columns and horizontal scrolling. */
[b-fqzv1glw6p] .document-table-shell > .table {
    min-height: 0;
    flex: 1 1 auto;
    border: 0 !important;
}

[b-fqzv1glw6p] .document-table-shell .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 12px 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar {
    min-height: 58px;
    padding: 9px 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar::after {
    display: none;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar .table-toolbar-button {
    float: none !important;
    margin: 0 !important;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar .table-column-right {
    margin-left: 0 !important;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar .btn-group {
    gap: 6px;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar .btn {
    min-height: 36px;
    padding: 0 11px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e0eb !important;
    border-radius: 8px !important;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 5%);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar .btn:hover {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

[b-fqzv1glw6p] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border-color: #dce5f0;
    border-radius: 9px;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed,
[b-fqzv1glw6p] .document-table-shell .table-fixed-header,
[b-fqzv1glw6p] .document-table-shell .table-fixed-body,
[b-fqzv1glw6p] .document-table-shell .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-header > table,
[b-fqzv1glw6p] .document-table-shell .table-fixed-body > table {
    width: max-content !important;
    min-width: 1720px !important;
    max-width: none !important;
    table-layout: fixed;
}

[b-fqzv1glw6p] .document-table-shell .pagination,
[b-fqzv1glw6p] .document-table-shell .nav-pages {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 8px 0 0;
    flex: 0 0 auto;
    overflow-x: auto;
    background: #fff;
    border-top: 1px solid #e8edf3;
}

[b-fqzv1glw6p] .document-table-shell .table-page-info {
    flex: 0 0 auto;
    white-space: nowrap;
}

[b-fqzv1glw6p] .document-table-shell .table-page-info .select {
    width: 112px;
}

@media (max-width: 640px) {
    [b-fqzv1glw6p] .document-table-shell .table-container {
        padding-right: 8px;
        padding-left: 8px;
    }

    [b-fqzv1glw6p] .document-table-shell .table-toolbar {
        justify-content: flex-start;
    }
}


/* Final remaining-space layout: keep pagination visible and scroll only the grid body. */
[b-fqzv1glw6p] .other-order-report-transition {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
}

.other-order-report-page[b-fqzv1glw6p] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.report-hero[b-fqzv1glw6p],
.report-summary[b-fqzv1glw6p] {
    flex: 0 0 auto;
}

.report-workspace[b-fqzv1glw6p] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .report-workspace > .report-tabs,
[b-fqzv1glw6p] .report-workspace > .tabs,
[b-fqzv1glw6p] .report-tabs {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .report-tabs > .tabs-header {
    flex: 0 0 auto;
}

[b-fqzv1glw6p] .report-tabs > .tabs-body,
[b-fqzv1glw6p] .report-tabs .tabs-content,
[b-fqzv1glw6p] .report-tabs .tab-content,
[b-fqzv1glw6p] .report-tabs .tab-pane,
[b-fqzv1glw6p] .report-tabs .tabs-body-content {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-panel[b-fqzv1glw6p] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.document-table-shell[b-fqzv1glw6p] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell > .table {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell .table-container,
[b-fqzv1glw6p] .document-table-shell .table-wrapper {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar,
[b-fqzv1glw6p] .document-table-shell .table-footer,
[b-fqzv1glw6p] .document-table-shell .nav-pages,
[b-fqzv1glw6p] .document-table-shell .pagination {
    flex: 0 0 auto;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-fqzv1glw6p] .document-table-shell .table-fixed-body {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

/* ATCRazor may render the navigator as either nav-pages or table-footer. */
[b-fqzv1glw6p] .document-table-shell .table-footer,
[b-fqzv1glw6p] .document-table-shell .nav-pages {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    max-height: 52px;
    padding: 7px 10px !important;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    border-top: 1px solid #e8edf3;
}

@media (max-height: 760px) {
    .other-order-report-page[b-fqzv1glw6p] {
        overflow-y: auto;
    }

    .report-workspace[b-fqzv1glw6p] {
        min-height: 430px;
    }
}


/* Filter panel follows the InboundOrdersReport pattern. */
.filter-section[b-fqzv1glw6p] {
    width: 100%;
    margin: 0 0 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
}

.filter-section-heading[b-fqzv1glw6p] {
    min-height: 50px;
}

.filter-section-toggle[b-fqzv1glw6p] {
    width: 100%;
    min-height: 50px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #334155;
    text-align: left;
    background: transparent;
    border: 0;
}

.filter-section-label[b-fqzv1glw6p],
.filter-section-state[b-fqzv1glw6p] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.filter-section-label strong[b-fqzv1glw6p],
.filter-section-label small[b-fqzv1glw6p] {
    display: block;
}

.filter-section-label strong[b-fqzv1glw6p] {
    color: #1e293b;
    font-size: 12px;
}

.filter-section-label small[b-fqzv1glw6p] {
    margin-top: 2px;
    color: #7c8ba1;
    font-size: 10px;
    font-weight: 400;
}

.filter-section-icon[b-fqzv1glw6p] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 9px;
}

.filter-section-state[b-fqzv1glw6p] {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

.report-filter-bar[b-fqzv1glw6p] {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
}

.report-filter-control[b-fqzv1glw6p] {
    position: relative;
    min-width: 190px;
    height: 36px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 190px;
    color: #64748b;
    background: #fff;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
}

.report-filter-search[b-fqzv1glw6p] {
    min-width: 280px;
    flex: 2 1 320px;
}

.report-filter-route[b-fqzv1glw6p] {
    min-width: 210px;
}

.report-filter-control input[b-fqzv1glw6p],
.report-filter-control select[b-fqzv1glw6p] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #334155;
    font-size: 11px;
    background: transparent;
    border: 0;
    outline: 0;
}

.report-filter-control select[b-fqzv1glw6p] {
    padding-right: 18px;
    appearance: none;
}

.report-filter-chevron[b-fqzv1glw6p] {
    position: absolute;
    right: 11px;
    pointer-events: none;
    font-size: 9px;
}

.report-filter-button[b-fqzv1glw6p] {
    height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.report-filter-apply[b-fqzv1glw6p] {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 4px 10px rgb(37 99 235 / 18%);
}

.report-filter-clear[b-fqzv1glw6p] {
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
}

[b-fqzv1glw6p] .document-table-shell .table-toolbar {
    align-items: stretch;
}

/* Status is intentionally page-specific; table header and rows remain global. */
.status-pill[b-fqzv1glw6p] {
    min-height: 23px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.status-new[b-fqzv1glw6p] {
    color: #334155;
    background: #eef2f7;
    border-color: #d7dee8;
}

.status-release[b-fqzv1glw6p] {
    color: #174ea6;
    background: #e7f0ff;
    border-color: #b9d2ff;
}

.status-picking[b-fqzv1glw6p] {
    color: #0e7490;
    background: #e0f7fb;
    border-color: #9ddfe9;
}

.status-packing[b-fqzv1glw6p] {
    color: #9a4d00;
    background: #fff1d6;
    border-color: #f5ce88;
}

.status-complete[b-fqzv1glw6p] {
    color: #166534;
    background: #dcfce7;
    border-color: #9de7b7;
}

.status-closed[b-fqzv1glw6p] {
    color: #475569;
    background: #e9eef5;
    border-color: #cbd5e1;
}

.status-cancel[b-fqzv1glw6p] {
    color: #b42318;
    background: #fee4e2;
    border-color: #f5aaa4;
}

@media (max-width: 820px) {
    .report-filter-control[b-fqzv1glw6p],
    .report-filter-search[b-fqzv1glw6p],
    .report-filter-route[b-fqzv1glw6p] {
        min-width: 100%;
        flex-basis: 100%;
    }

    .report-filter-button[b-fqzv1glw6p] {
        flex: 1 1 140px;
    }
}


/* Five operational status cards. */
.other-order-report-page .report-status-summary[b-fqzv1glw6p] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.summary-card-total .summary-icon[b-fqzv1glw6p] {
    color: #1769c2;
    background: #eaf3ff;
}

.summary-card-complete .summary-icon[b-fqzv1glw6p] {
    color: #15803d;
    background: #dcfce7;
}

.summary-card-pick-complete .summary-icon[b-fqzv1glw6p] {
    color: #0e7490;
    background: #cffafe;
}

.summary-card-pack-complete .summary-icon[b-fqzv1glw6p] {
    color: #9a4d00;
    background: #fff1d6;
}

.summary-card-ready-ship .summary-icon[b-fqzv1glw6p] {
    color: #1d4ed8;
    background: #dbeafe;
}

.summary-card-cancel .summary-icon[b-fqzv1glw6p] {
    color: #b42318;
    background: #fee4e2;
}

@media (max-width: 1280px) {
    .other-order-report-page .report-status-summary[b-fqzv1glw6p] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    .other-order-report-page .report-status-summary[b-fqzv1glw6p] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    .other-order-report-page .report-status-summary[b-fqzv1glw6p] {
        grid-template-columns: 1fr !important;
    }
}

/* จัดรูปแบบตารางเอกสารให้สอดคล้องกับหน้า /Reports/SalesOrder */
.other-order-report-page .report-document-cell[b-fqzv1glw6p] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.other-order-report-page .report-document-icon[b-fqzv1glw6p] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    color: #1768c5;
    background: #edf4fc;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.other-order-report-page .report-document-cell > div[b-fqzv1glw6p],
.other-order-report-page .report-document-info[b-fqzv1glw6p],
.other-order-report-page .report-updated-cell[b-fqzv1glw6p] {
    min-width: 0;
}

.other-order-report-page .report-document-cell small[b-fqzv1glw6p],
.other-order-report-page .report-document-info strong[b-fqzv1glw6p],
.other-order-report-page .report-document-info small[b-fqzv1glw6p],
.other-order-report-page .report-updated-cell strong[b-fqzv1glw6p],
.other-order-report-page .report-updated-cell small[b-fqzv1glw6p] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-document-cell small[b-fqzv1glw6p],
.other-order-report-page .report-document-info small[b-fqzv1glw6p],
.other-order-report-page .report-updated-cell small[b-fqzv1glw6p] {
    margin-top: 2px;
    color: #7b8ca2;
    font-size: 9px;
}

.other-order-report-page .report-document-info strong[b-fqzv1glw6p],
.other-order-report-page .report-updated-cell strong[b-fqzv1glw6p] {
    color: #183b65;
    font-size: 11px;
    font-weight: 700;
}

.other-order-report-page .report-company-pill[b-fqzv1glw6p] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 8px;
    overflow: hidden;
    color: #304f72;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-date-cell[b-fqzv1glw6p] {
    color: #53677e;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.other-order-report-page .report-process-times[b-fqzv1glw6p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.other-order-report-page .report-process-time[b-fqzv1glw6p] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.other-order-report-page .report-process-label[b-fqzv1glw6p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
}

.other-order-report-page .report-process-label-pick i[b-fqzv1glw6p] { color: #0891b2; }
.other-order-report-page .report-process-label-pack i[b-fqzv1glw6p] { color: #b45309; }

.other-order-report-page .report-process-value[b-fqzv1glw6p] {
    overflow: hidden;
    color: #31435f;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-process-value i[b-fqzv1glw6p] {
    margin: 0 3px;
    color: #94a3b8;
    font-size: 7px;
}

.other-order-report-page .report-row-actions[b-fqzv1glw6p] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.other-order-report-page .report-row-action[b-fqzv1glw6p] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid #c7dbf5;
    border-radius: 8px;
    color: #1768c5;
    background: #fff;
    font-size: 12px;
    line-height: 1;
}

.other-order-report-page .report-row-action:hover[b-fqzv1glw6p] {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.other-order-report-page .report-row-action-print[b-fqzv1glw6p] {
    border-color: #a7e5d0;
    color: #059669;
}

.other-order-report-page .report-row-action-print:hover[b-fqzv1glw6p] {
    border-color: #10b981;
    color: #047857;
    background: #ecfdf5;
}

.other-order-report-page .report-row-action-edit[b-fqzv1glw6p] {
    border-color: #f3d28b;
    color: #a16207;
}

.other-order-report-page .report-row-action-edit:hover[b-fqzv1glw6p] {
    border-color: #d97706;
    color: #92400e;
    background: #fffbeb;
}

.other-order-report-page .report-row-action-cancel[b-fqzv1glw6p] {
    border-color: #fecaca;
    color: #dc2626;
}

.other-order-report-page .report-row-action-cancel:hover[b-fqzv1glw6p] {
    border-color: #ef4444;
    color: #b91c1c;
    background: #fef2f2;
}

.other-order-report-page .report-priority-pill[b-fqzv1glw6p] {
    min-width: 28px;
    min-height: 24px;
    padding: 4px 8px;
    display: inline-grid;
    place-items: center;
    color: #7c3aed;
    background: #f3e8ff;
    border: 1px solid #e9d5ff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.order-management-backdrop[b-fqzv1glw6p] {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .58);
}

.order-management-dialog[b-fqzv1glw6p] {
    width: min(720px, 96vw);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.order-management-dialog > header[b-fqzv1glw6p] {
    padding: 17px 19px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #dce5ef;
}

.order-management-dialog > header span[b-fqzv1glw6p] { color: #1769c2; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.order-management-dialog > header h2[b-fqzv1glw6p] { margin: 2px 0; color: #172944; font-size: 19px; }
.order-management-dialog > header p[b-fqzv1glw6p] { margin: 0; color: #718096; font-size: 10px; }
.order-management-dialog > header button[b-fqzv1glw6p] { width: 34px; height: 34px; color: #53647d; background: #eef2f7; border: 0; border-radius: 8px; }
.order-management-body[b-fqzv1glw6p] { min-height: 0; padding: 16px 18px; overflow: auto; }
.order-management-priority[b-fqzv1glw6p] { display: flex; flex-direction: column; gap: 5px; }
.order-management-priority span[b-fqzv1glw6p] { color: #475569; font-size: 11px; font-weight: 700; }
.order-management-priority input[b-fqzv1glw6p] { width: 180px; min-height: 38px; padding: 7px 9px; color: #26364d; border: 1px solid #cbd8e7; border-radius: 7px; outline: none; }
.order-management-priority input:focus[b-fqzv1glw6p] { border-color: #3887d7; box-shadow: 0 0 0 3px rgba(56, 135, 215, .12); }
.order-management-section-heading[b-fqzv1glw6p] { margin: 17px 0 8px; display: flex; flex-direction: column; }
.order-management-section-heading strong[b-fqzv1glw6p] { color: #233653; font-size: 13px; }
.order-management-section-heading small[b-fqzv1glw6p] { color: #8290a4; font-size: 9px; }
.order-management-pack-list[b-fqzv1glw6p] { display: flex; flex-direction: column; gap: 8px; }
.order-management-document[b-fqzv1glw6p] { margin-top: 12px; padding: 11px 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; background: #f8fafc; border: 1px solid #dce5ef; border-radius: 9px; }
.order-management-pack-list .order-management-document[b-fqzv1glw6p] { margin-top: 0; }
.order-management-document-info[b-fqzv1glw6p] { min-width: 0; display: flex; align-items: center; gap: 10px; }
.order-management-document-info > i[b-fqzv1glw6p] { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #1769c2; background: #eaf3ff; border-radius: 8px; }
.order-management-document-info > div[b-fqzv1glw6p] { min-width: 0; display: flex; flex-direction: column; }
.order-management-document-info strong[b-fqzv1glw6p] { color: #243b59; font-size: 11px; }
.order-management-document-info small[b-fqzv1glw6p] { overflow: hidden; color: #7b8ca2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-management-document > label[b-fqzv1glw6p] { cursor: pointer; }
.order-management-document > label span[b-fqzv1glw6p] { min-height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; color: #1769c2; background: #fff; border: 1px solid #bcd3ee; border-radius: 7px; font-size: 9px; font-weight: 800; }
.order-management-document[b-fqzv1glw6p]  .order-management-file-input { display: none; }
.order-management-selected-file[b-fqzv1glw6p] { grid-column: 1 / -1; overflow: hidden; color: #15803d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.order-management-empty[b-fqzv1glw6p] { padding: 22px; color: #8491a3; text-align: center; background: #f8fafc; border: 1px dashed #cbd8e7; border-radius: 9px; font-size: 10px; }
.order-management-dialog > footer[b-fqzv1glw6p] { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 8px; background: #f8fafc; border-top: 1px solid #dce5ef; }
.order-management-dialog > footer button[b-fqzv1glw6p] { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; font-size: 11px; font-weight: 800; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.order-management-cancel[b-fqzv1glw6p] { color: #53647d; background: #fff; border: 1px solid #cbd8e7; }
.order-management-cancel:hover:not(:disabled)[b-fqzv1glw6p] { color: #334155; background: #f1f5f9; border-color: #94a3b8; }
.order-management-save[b-fqzv1glw6p] { color: #fff; background: #1769c2; border: 1px solid #1769c2; box-shadow: 0 3px 8px rgba(23, 105, 194, .18); }
.order-management-save:hover:not(:disabled)[b-fqzv1glw6p] { color: #fff; background: #1259a6; border-color: #1259a6; }
.order-management-dialog > footer button:disabled[b-fqzv1glw6p] { cursor: not-allowed; opacity: .62; }

@media (max-width: 620px) {
    .order-management-backdrop[b-fqzv1glw6p] { padding: 8px; }
    .order-management-dialog[b-fqzv1glw6p] { max-height: calc(100dvh - 16px); }
    .order-management-document[b-fqzv1glw6p] { grid-template-columns: 1fr; }
    .order-management-document > label[b-fqzv1glw6p] { grid-column: 1; }
}

.cancel-order-backdrop[b-fqzv1glw6p] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .62);
}

.cancel-order-dialog[b-fqzv1glw6p] {
    width: min(440px, 96vw);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #475569;
    text-align: center;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}

.cancel-order-icon[b-fqzv1glw6p] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    color: #b42318;
    background: #fee4e2;
    border-radius: 50%;
    font-size: 21px;
}

.cancel-order-dialog h2[b-fqzv1glw6p] { margin: 13px 0 5px; color: #172944; font-size: 20px; }
.cancel-order-dialog p[b-fqzv1glw6p] { margin: 0; font-size: 12px; }
.cancel-order-dialog p strong[b-fqzv1glw6p] { color: #b42318; }
.cancel-order-dialog > small[b-fqzv1glw6p] { margin-top: 12px; color: #7b8ca2; font-size: 9px; line-height: 1.5; }
.cancel-order-status[b-fqzv1glw6p] { width: 100%; margin-top: 14px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 10px; }
.cancel-order-status strong[b-fqzv1glw6p] { color: #334155; }
.cancel-order-dialog .create-order-error[b-fqzv1glw6p] { width: 100%; text-align: left; }
.cancel-order-dialog footer[b-fqzv1glw6p] { width: 100%; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cancel-order-dialog footer button[b-fqzv1glw6p] { min-height: 38px; border-radius: 8px; font-size: 11px; font-weight: 800; }
.cancel-order-dismiss[b-fqzv1glw6p] { color: #53647d; background: #fff; border: 1px solid #cbd8e7; }
.cancel-order-confirm[b-fqzv1glw6p] { color: #fff; background: #dc2626; border: 1px solid #dc2626; }
.cancel-order-confirm:hover[b-fqzv1glw6p] { background: #b91c1c; border-color: #b91c1c; }
.cancel-order-dialog footer button:disabled[b-fqzv1glw6p] { cursor: not-allowed; opacity: .62; }
/* _content/WMS.UI/Pages/Outbound/SalesOrder/NewDesign/SalesOrderDetailPopup.razor.rz.scp.css */
.order-detail-backdrop[b-her5b7qplq] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    padding: 24px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(2px);
}

.order-detail-dialog[b-her5b7qplq] {
    width: min(1380px, calc(100vw - 48px));
    height: min(820px, calc(100vh - 48px));
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #d8e2ee;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.order-detail-header[b-her5b7qplq] {
    min-height: 82px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
}

.detail-eyebrow[b-her5b7qplq] {
    color: #087f8c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.order-detail-header h2[b-her5b7qplq] {
    margin: 2px 0;
    color: #12213f;
    font-size: 20px;
    font-weight: 800;
}

.order-detail-header p[b-her5b7qplq] {
    margin: 0;
    color: #708098;
    font-size: 11px;
}

.detail-close[b-her5b7qplq] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #64748b;
    background: #f1f5f9;
    border: 0;
    border-radius: 9px;
}

.detail-close:hover[b-her5b7qplq] { color: #dc2626; background: #fee2e2; }

.order-detail-body[b-her5b7qplq] {
    min-width: 0;
    min-height: 0;
    padding: 14px 16px;
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
}

.detail-tabs[b-her5b7qplq] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 12px;
}

.detail-tab-nav[b-her5b7qplq] {
    min-height: 48px;
    padding: 0 10px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #e4eaf2;
}

.detail-tab[b-her5b7qplq] {
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #53647d;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.detail-tab:hover[b-her5b7qplq] {
    color: #1d5fae;
    background: #f8fbff;
}

.detail-tab.active[b-her5b7qplq] {
    color: #087f8c;
    border-bottom-color: #2f80ed;
}

.detail-tab-content[b-her5b7qplq] {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-table-shell[b-her5b7qplq] {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-her5b7qplq] .detail-table-shell > .table,
[b-her5b7qplq] .detail-table-shell .table-container,
[b-her5b7qplq] .detail-table-shell .table-wrapper {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

[b-her5b7qplq] .detail-table-shell .table-fixed-body {
    min-height: 0;
    overflow: auto !important;
}

[b-her5b7qplq] .detail-table-shell table { font-size: 10.5px !important; }
[b-her5b7qplq] .detail-table-shell thead th {
    height: 36px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
[b-her5b7qplq] .detail-table-shell tbody td {
    height: 35px !important;
    padding: 5px 7px !important;
    color: #334155 !important;
    font-size: 10.5px !important;
}

.detail-status[b-her5b7qplq] {
    min-height: 22px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    color: #1769c2;
    font-size: 9.5px;
    font-weight: 650;
    background: #eaf3ff;
    border-radius: 999px;
}

.order-detail-footer[b-her5b7qplq] {
    min-height: 58px;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #dbe4ef;
}

.detail-footer-close[b-her5b7qplq] {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.detail-footer-close:hover[b-her5b7qplq] { background: #f1f5f9; }

@media (max-width: 820px) {
    .order-detail-backdrop[b-her5b7qplq] { padding: 8px; }
    .order-detail-dialog[b-her5b7qplq] {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        min-height: 0;
    }
    .order-detail-body[b-her5b7qplq] { padding: 8px; }
    .detail-tab[b-her5b7qplq] { padding: 0 10px; font-size: 11px; }
}


.tracking-print-button[b-her5b7qplq] {
    min-width: 72px;
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 7px;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .16);
}

.tracking-print-button:hover[b-her5b7qplq] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.tracking-print-empty[b-her5b7qplq] {
    color: #94a3b8;
}


.tab-progress-panel[b-her5b7qplq] {
    margin: 10px 10px 0;
    padding: 11px 13px;
    flex: 0 0 auto;
    background: #f8fbff;
    border: 1px solid #d8e5f3;
    border-radius: 10px;
}

.tab-progress-heading[b-her5b7qplq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.tab-progress-heading span[b-her5b7qplq] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tab-progress-heading i[b-her5b7qplq] {
    color: #2563eb;
}

.tab-progress-heading strong[b-her5b7qplq] {
    color: #173b70;
    font-size: 15px;
}

.tab-progress-track[b-her5b7qplq] {
    height: 7px;
    margin: 8px 0 7px;
    overflow: hidden;
    background: #dfe7f1;
    border-radius: 999px;
}

.tab-progress-value[b-her5b7qplq] {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    transition: width .25s ease;
}

.progress-order[b-her5b7qplq] {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.progress-picking[b-her5b7qplq] {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.progress-packing[b-her5b7qplq] {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.tab-progress-metrics[b-her5b7qplq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #64748b;
    font-size: 10px;
}

.tab-progress-metrics strong[b-her5b7qplq] {
    margin-left: 4px;
    color: #1e293b;
    font-size: 11px;
}

.packing-summary[b-her5b7qplq] {
    margin: 10px 10px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 7px;
    flex: 0 0 auto;
}

.packing-summary-card[b-her5b7qplq] {
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
}

.packing-summary-card span[b-her5b7qplq] {
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.packing-summary-card strong[b-her5b7qplq] {
    font-size: 17px;
    line-height: 1;
}

.packing-summary-total[b-her5b7qplq] { color: #174ea6; background: #eaf3ff; border-color: #bdd5f6; }
.packing-summary-new[b-her5b7qplq] { color: #475569; background: #f1f5f9; }
.packing-summary-working[b-her5b7qplq] { color: #9a4d00; background: #fff4df; border-color: #f5d79d; }
.packing-summary-packed[b-her5b7qplq] { color: #0e7490; background: #e0f7fb; border-color: #a9e2eb; }
.packing-summary-ready[b-her5b7qplq] { color: #1d4ed8; background: #e8efff; border-color: #b9ccff; }
.packing-summary-complete[b-her5b7qplq] { color: #166534; background: #dcfce7; border-color: #a7e7bb; }

@media (max-width: 820px) {
    .packing-summary[b-her5b7qplq] {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
}
/* _content/WMS.UI/Pages/ProductManagements/CheckStock.razor.rz.scp.css */
.checkstock-page[b-bwk3o4a1zm] {
    --cs-primary: #2563eb;
    --cs-border: #dce5f0;
    height: 100%;
    min-height: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    background: #f4f7fb;
}

.checkstock-page-header[b-bwk3o4a1zm] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.checkstock-eyebrow[b-bwk3o4a1zm] {
    display: block;
    margin-bottom: 3px;
    color: var(--cs-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.checkstock-page-header h1[b-bwk3o4a1zm] {
    margin: 0;
    color: #0f172a;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
}

.checkstock-page-header p[b-bwk3o4a1zm],
.checkstock-card-heading p[b-bwk3o4a1zm] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.checkstock-live-status[b-bwk3o4a1zm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.checkstock-updated[b-bwk3o4a1zm] {
    color: #64748b;
    font-size: 10px;
}

.checkstock-updated i[b-bwk3o4a1zm] {
    color: #2563eb;
}

.checkstock-filterbar[b-bwk3o4a1zm] {
    flex: 1 1 430px;
    width: auto;
    flex-wrap: wrap;
    margin: 0;
}

.checkstock-filterbar .wms-filter-search[b-bwk3o4a1zm] {
    flex: 1;
    min-width: 180px;
}

.checkstock-search-button[b-bwk3o4a1zm] {
    min-height: 38px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #1766ca;
    border-radius: 8px;
    background: #1766ca;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.checkstock-search-button:hover[b-bwk3o4a1zm] {
    background: #1356ad;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar {
    flex-wrap: wrap;
}

.cs-container[b-bwk3o4a1zm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #174b85;
}

.cs-container i[b-bwk3o4a1zm] { color: #1766ca; }

.cs-location[b-bwk3o4a1zm] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #edf3fa;
    color: #475569;
    white-space: nowrap;
}

.cs-product[b-bwk3o4a1zm] {
    width: 100%;
    max-width: 240px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.5;
    padding: 4px 0;
}

.cs-product strong[b-bwk3o4a1zm] { color: #174b85; font-weight: 700; }
.cs-product small[b-bwk3o4a1zm] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #64748b;
    font-size: 10px;
}

.cs-quantity[b-bwk3o4a1zm] {
    font-weight: 700;
    color: #174b85;
    font-variant-numeric: tabular-nums;
}

.cs-capacity[b-bwk3o4a1zm] { display: flex; align-items: center; gap: 12px; }
.cs-capacity-track[b-bwk3o4a1zm] {
    width: 90px;
    height: 12px;
    flex: 0 0 90px;
    border-radius: 999px;
    overflow: hidden;
    background: #e4ebf4;
}
.cs-capacity-track span[b-bwk3o4a1zm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
}
.cs-capacity strong[b-bwk3o4a1zm] { font-size: 10px; color: #059669; font-variant-numeric: tabular-nums; }

.checkstock-table-card[b-bwk3o4a1zm] {
    min-width: 0;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--cs-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 5%);
}

.checkstock-card-heading[b-bwk3o4a1zm] {
    min-height: 58px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e6edf5;
    background: #fff;
}

.checkstock-card-heading h2[b-bwk3o4a1zm] {
    margin: 0;
    color: #172033;
    font-size: 15px;
    font-weight: 800;
}

.checkstock-live-indicator[b-bwk3o4a1zm] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    white-space: nowrap;
}

.checkstock-live-indicator i[b-bwk3o4a1zm] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.checkstock-command-bar[b-bwk3o4a1zm] {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
}

.checkstock-station-control[b-bwk3o4a1zm] {
    min-width: 270px;
    height: 42px;
    padding: 4px 6px 4px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #d7e0eb;
    border-radius: 9px;
    background: #fff;
}

.checkstock-control-icon[b-bwk3o4a1zm] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 13px;
}

.checkstock-control-content[b-bwk3o4a1zm] {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.checkstock-control-content label[b-bwk3o4a1zm] {
    margin: 0;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.checkstock-control-content[b-bwk3o4a1zm]  .select {
    min-width: 155px;
    flex: 1;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table {
    min-width: 0;
    min-height: 0;
    flex: 1;
    border: 0 !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar {
    min-height: 62px;
    flex: 0 0 auto;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e8edf3;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar .table-toolbar-button {
    float: none !important;
    margin: 0 !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar .table-column-right {
    margin-left: auto !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar .btn {
    min-height: 38px;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1 !important;
}

.checkstock-command-bar[b-bwk3o4a1zm]  .btn-primary {
    min-height: 42px !important;
    border-color: #2563eb !important;
    color: #fff !important;
    background: #2563eb !important;
    box-shadow: 0 4px 10px rgb(37 99 235 / 20%);
}

.checkstock-command-bar[b-bwk3o4a1zm]  .btn-primary:hover {
    border-color: #1d4ed8 !important;
    background: #1d4ed8 !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 9px;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-header,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body,
.checkstock-table-card[b-bwk3o4a1zm]  .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body {
    min-height: 0;
    flex: 1;
    overflow: auto !important;
    overscroll-behavior: contain;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-header > table,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body > table {
    min-width: 1100px;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-header {
    color: #fff;
    background: #2063b6 !important;
    line-height: 1.5;
    font-size: 11px;
    font-weight: 750;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-row:hover {
    background: #f8fbff !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-cell {
    border-color: #e8edf3 !important;
    vertical-align: middle !important;
    font-size: 11px;
}

.checkstock-table-card[b-bwk3o4a1zm]  .progress {
    height: 18px !important;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.checkstock-table-card[b-bwk3o4a1zm]  .progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.checkstock-table-card[b-bwk3o4a1zm]  .pagination {
    max-width: 100%;
    flex: 0 0 auto;
    margin: 8px 0 0 !important;
    padding-top: 8px;
    overflow-x: auto;
    border-top: 1px solid #e8edf3;
}

@media (max-width: 760px) {
    .checkstock-page[b-bwk3o4a1zm] {
        padding: 12px;
        overflow-y: auto;
    }

    .checkstock-page-header h1[b-bwk3o4a1zm] { font-size: 22px; }
    .checkstock-page-icon[b-bwk3o4a1zm] { display: none; }

    .checkstock-card-heading[b-bwk3o4a1zm] {
        align-items: flex-start;
    }

    .checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .checkstock-command-bar[b-bwk3o4a1zm] {
        width: 100%;
        flex-direction: column;
    }

    .checkstock-station-control[b-bwk3o4a1zm] {
        width: 100%;
        min-width: 0;
    }

    .checkstock-command-bar[b-bwk3o4a1zm]  .table-toolbar-button,
    .checkstock-command-bar[b-bwk3o4a1zm]  .btn {
        width: 100%;
    }

    .checkstock-table-card[b-bwk3o4a1zm]  .table-toolbar .table-column-right {
        width: 100%;
        margin-left: 0 !important;
    }
}


/* Use subtle row separators instead of the component's dark default borders */
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body tbody tr,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body tbody tr > td,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body tbody tr > th,
.checkstock-table-card[b-bwk3o4a1zm]  .table-row,
.checkstock-table-card[b-bwk3o4a1zm]  .table-cell {
    border-color: #e9eef5 !important;
}

.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body tbody tr > td,
.checkstock-table-card[b-bwk3o4a1zm]  .table-fixed-body tbody tr > th {
    border-top-color: transparent !important;
    border-bottom: 1px solid #e9eef5 !important;
}
/* _content/WMS.UI/Pages/ProductManagements/PreWork.razor.rz.scp.css */
.prework-page[b-ttfp6rxm9v]{height:100%;padding:18px;background:#f4f7fb;overflow:auto;color:#102a43}.prework-hero[b-ttfp6rxm9v]{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.prework-hero h1[b-ttfp6rxm9v]{font-size:26px;margin:3px 0}.prework-hero p[b-ttfp6rxm9v]{margin:0;color:#63758b}.btn-refresh[b-ttfp6rxm9v],.btn-primary[b-ttfp6rxm9v],.pager button[b-ttfp6rxm9v]{border:1px solid #d6e1ef;border-radius:9px;background:#fff;padding:10px 15px}.btn-primary[b-ttfp6rxm9v]{background:#1469c9;color:#fff;border-color:#1469c9;font-weight:600}.btn-primary:disabled[b-ttfp6rxm9v]{opacity:.5}.prework-summary[b-ttfp6rxm9v]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:8px}.prework-summary article[b-ttfp6rxm9v]{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #d9e4f1;border-radius:12px;padding:15px}.prework-summary article>i[b-ttfp6rxm9v]{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#eaf3ff;color:#1469c9}.prework-summary small[b-ttfp6rxm9v]{display:block;color:#71849a}.prework-summary strong[b-ttfp6rxm9v]{font-size:23px}.prework-summary .selected[b-ttfp6rxm9v]{border-color:#8bc0ff;background:#f4f9ff}.prework-card[b-ttfp6rxm9v]{background:#fff;border:1px solid #d8e3f0;border-radius:14px;overflow:hidden}.prework-toolbar[b-ttfp6rxm9v]{display:grid;grid-template-columns:auto minmax(200px,1fr) 240px auto;gap:10px;padding:14px;border-bottom:1px solid #e1e9f2}.search-box[b-ttfp6rxm9v]{position:relative}.search-box i[b-ttfp6rxm9v]{position:absolute;left:14px;top:14px;color:#789}.search-box input[b-ttfp6rxm9v],.prework-toolbar select[b-ttfp6rxm9v]{width:100%;height:38px;border:1px solid #ccd9e8;border-radius:9px;padding:0 13px}.search-box input[b-ttfp6rxm9v]{padding-left:40px}.selection-bar[b-ttfp6rxm9v]{display:flex;justify-content:space-between;padding:10px 15px;background:#f7faff;color:#52677d}.selection-bar label[b-ttfp6rxm9v]{display:flex;gap:8px}.pallet-grid[b-ttfp6rxm9v]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px}.pallet-card[b-ttfp6rxm9v]{border:1px solid #d8e3ef;border-radius:12px;padding:14px;cursor:pointer;transition:.15s}.pallet-card:hover[b-ttfp6rxm9v]{border-color:#70adf4;box-shadow:0 5px 15px #13395d12}.pallet-card.is-selected[b-ttfp6rxm9v]{border:2px solid #1873d3;background:#f3f8ff;padding:13px}.pallet-head[b-ttfp6rxm9v]{display:flex;align-items:start;gap:9px}.pallet-head small[b-ttfp6rxm9v]{font-size:10px;color:#678;letter-spacing:1px}.pallet-head h3[b-ttfp6rxm9v]{margin:0;font-size:16px}.ready[b-ttfp6rxm9v]{margin-left:auto;font-size:11px;color:#088754;background:#e7f8ef;border-radius:20px;padding:4px 7px}.ready i[b-ttfp6rxm9v]{font-size:7px}.pallet-card dl[b-ttfp6rxm9v]{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.pallet-card dl div[b-ttfp6rxm9v]{background:#f7f9fc;border-radius:8px;padding:8px}.pallet-card dt[b-ttfp6rxm9v]{font-size:10px;color:#728399}.pallet-card dd[b-ttfp6rxm9v]{margin:2px 0 0;font-weight:600}.prework-products[b-ttfp6rxm9v]{display:flex;gap:5px;flex-wrap:wrap}.prework-products span[b-ttfp6rxm9v]{max-width:100%;font-size:11px;background:#eaf3ff;color:#185ca6;border-radius:20px;padding:4px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state[b-ttfp6rxm9v]{text-align:center;padding:65px 20px;color:#71849a}.empty-state i[b-ttfp6rxm9v]{font-size:40px;color:#a9bfd5}.empty-state h3[b-ttfp6rxm9v]{color:#29445e}.pager[b-ttfp6rxm9v]{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-top:1px solid #e1e9f2}.pager div[b-ttfp6rxm9v]{display:flex;gap:7px}.pager button[b-ttfp6rxm9v]{padding:7px 12px}.pager button:disabled[b-ttfp6rxm9v]{opacity:.4}@media(max-width:1200px){.pallet-grid[b-ttfp6rxm9v]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.prework-summary[b-ttfp6rxm9v]{grid-template-columns:repeat(2,minmax(0,1fr))}.pallet-grid[b-ttfp6rxm9v]{grid-template-columns:repeat(2,minmax(0,1fr))}.prework-toolbar[b-ttfp6rxm9v]{grid-template-columns:1fr 1fr}.search-box[b-ttfp6rxm9v]{grid-column:1/-1}}@media(max-width:600px){.prework-page[b-ttfp6rxm9v]{padding:12px}.prework-hero[b-ttfp6rxm9v]{align-items:flex-start}.prework-hero .btn-refresh[b-ttfp6rxm9v]{font-size:0;padding:10px}.prework-hero .btn-refresh i[b-ttfp6rxm9v]{font-size:14px}.prework-summary[b-ttfp6rxm9v]{grid-template-columns:1fr 1fr;gap:8px}.prework-summary article[b-ttfp6rxm9v]{padding:10px}.prework-summary article>i[b-ttfp6rxm9v]{display:none}.prework-toolbar[b-ttfp6rxm9v]{grid-template-columns:1fr}.search-box[b-ttfp6rxm9v]{grid-column:auto}.pallet-grid[b-ttfp6rxm9v]{grid-template-columns:1fr}.selection-bar[b-ttfp6rxm9v]{font-size:12px}.prework-hero h1[b-ttfp6rxm9v]{font-size:22px}}
.prework-card-heading[b-ttfp6rxm9v]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #e1e9f2}
.prework-card-heading h2[b-ttfp6rxm9v]{margin:0;font-size:15px;font-weight:800;line-height:1.5}
.prework-card-heading p[b-ttfp6rxm9v]{margin:2px 0 0;font-size:11px;color:#64748b}
.prework-live[b-ttfp6rxm9v]{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.prework-summary .wms-summary-card[b-ttfp6rxm9v]{padding:12px 15px;min-height:72px;gap:12px}
.prework-summary .wms-summary-value[b-ttfp6rxm9v]{font-size:20px}
.prework-summary .wms-summary-label[b-ttfp6rxm9v]{font-size:10px}
.prework-summary .wms-summary-icon[b-ttfp6rxm9v]{background:#eaf3ff;color:#1469c9}
.prework-summary article:nth-child(2) .wms-summary-icon[b-ttfp6rxm9v]{background:#e0f7fa;color:#0891b2}
.prework-summary article:nth-child(3) .wms-summary-icon[b-ttfp6rxm9v]{background:#e8f8ef;color:#059669}
.prework-summary article:nth-child(4) .wms-summary-icon[b-ttfp6rxm9v]{background:#eee8ff;color:#7c3aed}
.prework-toolbar[b-ttfp6rxm9v]{align-items:center;padding:10px 14px}
.search-box.wms-filter-search[b-ttfp6rxm9v]{display:flex;align-items:center;width:100%;max-width:none;min-width:0}
.search-box.wms-filter-search i[b-ttfp6rxm9v]{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.search-box.wms-filter-search input[b-ttfp6rxm9v]{padding:0 12px 0 35px;border:1px solid #cbd8e8;border-radius:8px;height:38px;min-width:0;background:#fff;outline:none}
.search-box.wms-filter-search input:focus[b-ttfp6rxm9v]{border-color:#5d91e8;box-shadow:0 0 0 3px rgb(36 104 232 / 11%)}
.prework-products[b-ttfp6rxm9v]{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;max-height:none;overflow:visible}
.prework-product[b-ttfp6rxm9v]{padding:9px 10px;border:1px solid #e1e9f2;border-radius:8px;background:#fff;min-width:0}
.prework-product-heading[b-ttfp6rxm9v]{display:flex;justify-content:space-between;gap:10px;color:#174b85;font-size:12px}
.prework-product-heading b[b-ttfp6rxm9v]{color:#059669;white-space:nowrap;font-variant-numeric:tabular-nums}
.prework-product-heading small[b-ttfp6rxm9v]{font-size:10px;font-weight:400}
.prework-product p[b-ttfp6rxm9v]{margin:3px 0 7px;color:#64748b;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.prework-product-meta[b-ttfp6rxm9v]{display:flex;flex-wrap:wrap;gap:5px 12px}
.prework-product-meta span[b-ttfp6rxm9v]{padding:0;background:transparent;color:#64748b;font-size:10px;white-space:normal;overflow-wrap:anywhere}
.prework-page[b-ttfp6rxm9v]{display:flex;flex-direction:column;min-height:0;overflow:hidden;box-sizing:border-box}
.prework-hero[b-ttfp6rxm9v],.prework-summary[b-ttfp6rxm9v]{flex-shrink:0}
.prework-card[b-ttfp6rxm9v]{display:flex;flex-direction:column;flex:1;min-height:0}
.prework-card-heading[b-ttfp6rxm9v],.prework-toolbar[b-ttfp6rxm9v],.selection-bar[b-ttfp6rxm9v],.pager[b-ttfp6rxm9v]{flex-shrink:0}
.pallet-grid[b-ttfp6rxm9v]{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:10px;padding:12px;flex:1;min-height:0;overflow-y:auto;align-content:start;align-items:start;overscroll-behavior:contain}
.empty-state[b-ttfp6rxm9v]{flex:1;min-height:0;overflow:auto}
.pallet-card[b-ttfp6rxm9v]{padding:12px}
.pallet-card.is-selected[b-ttfp6rxm9v]{padding:11px}
.pallet-card dl[b-ttfp6rxm9v]{margin:10px 0}
.pallet-card[b-ttfp6rxm9v]{min-width:0;overflow:hidden}
.pallet-head>div[b-ttfp6rxm9v]{min-width:0}
.pallet-head h3[b-ttfp6rxm9v]{overflow-wrap:anywhere}
.prework-items-caption[b-ttfp6rxm9v]{font-size:11px;color:#64748b;margin:0 0 8px}
.prework-product-heading strong[b-ttfp6rxm9v]{min-width:0;overflow-wrap:anywhere}
.prework-request[b-ttfp6rxm9v]{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;width:100%;font-size:11px;color:#174b85;margin-bottom:8px}
.prework-request input[b-ttfp6rxm9v]{width:120px;max-width:100%;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.pallet-head h3[b-ttfp6rxm9v]{font-weight:700;color:#174b85}
.prework-products span[b-ttfp6rxm9v]{border-radius:6px}
.btn-primary[b-ttfp6rxm9v]{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:12px}
@media(max-width:900px){.prework-toolbar[b-ttfp6rxm9v]{grid-template-columns:auto 1fr}.prework-toolbar .search-box[b-ttfp6rxm9v]{grid-column:auto}.prework-card-heading[b-ttfp6rxm9v]{align-items:flex-start}.prework-live[b-ttfp6rxm9v]{max-width:45%}}
@media(max-width:600px){.prework-card-heading[b-ttfp6rxm9v]{flex-direction:column}.prework-live[b-ttfp6rxm9v]{max-width:100%}.prework-toolbar[b-ttfp6rxm9v]{grid-template-columns:1fr}.prework-toolbar .wms-filter-label[b-ttfp6rxm9v]{display:none}.pallet-grid[b-ttfp6rxm9v]{grid-template-columns:1fr}}
@media(max-height:650px){.prework-page[b-ttfp6rxm9v]{overflow:auto}.prework-card[b-ttfp6rxm9v]{flex:none}.pallet-grid[b-ttfp6rxm9v]{max-height:55vh;flex:auto}}

/* On small screens the document scrolls instead of squeezing the pallet list. */
@media (max-width: 760px) {
    .prework-page[b-ttfp6rxm9v] { overflow-y: auto; overflow-x: hidden; min-width: 0; }
    .prework-hero[b-ttfp6rxm9v] { flex-wrap: wrap; gap: 8px; }
    .prework-hero .wms-page-header-content[b-ttfp6rxm9v] { min-width: 0; flex: 1 1 240px; }
    .prework-hero h1[b-ttfp6rxm9v] { overflow-wrap: anywhere; }
    .prework-summary.wms-summary-grid[b-ttfp6rxm9v] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    .prework-summary .wms-summary-card[b-ttfp6rxm9v] { min-width: 0; padding: 10px !important; gap: 8px; }
    .prework-summary .wms-summary-content[b-ttfp6rxm9v] { min-width: 0; }
    .prework-summary .wms-summary-label[b-ttfp6rxm9v] { white-space: normal; overflow-wrap: anywhere; line-height: 1.5; }
    .prework-summary .wms-summary-icon[b-ttfp6rxm9v] { width: 32px; height: 32px; flex: 0 0 32px; }
    .prework-card[b-ttfp6rxm9v] { flex: 0 0 auto; min-width: 0; }
    .prework-card-heading[b-ttfp6rxm9v] { flex-direction: column; align-items: stretch; }
    .prework-live[b-ttfp6rxm9v] { max-width: none; justify-content: flex-start; }
    .prework-toolbar[b-ttfp6rxm9v] { grid-template-columns: minmax(0, 1fr); }
    .prework-toolbar .wms-filter-label[b-ttfp6rxm9v] { display: none; }
    .prework-toolbar select[b-ttfp6rxm9v] { min-width: 0; }
    .pallet-grid[b-ttfp6rxm9v] { flex: none; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr); }
    .pallet-card[b-ttfp6rxm9v] { min-width: 0; }
    .prework-products[b-ttfp6rxm9v] { max-height: none; overflow: visible; }
    .prework-product-heading[b-ttfp6rxm9v] { flex-wrap: wrap; }
    .selection-bar[b-ttfp6rxm9v] { flex-wrap: wrap; gap: 8px; }
    .pager[b-ttfp6rxm9v] { gap: 8px; }
}
/* _content/WMS.UI/Pages/ProductManagements/ProductMasterDesigner.razor.rz.scp.css */
.product-master-designer-scope[b-u8irpbywt5] {
    --im-bg: #f3f7fb;
    --im-card: #fff;
    --im-line: #d7e2ee;
    --im-ink: #102b4c;
    --im-muted: #72849a;
    --im-blue: #1768c5;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

/* CSS for ProductMasterDesigner component — all rules are scoped to this page. */
.product-master-designer-scope .item-master[b-u8irpbywt5] {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 18px 20px;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
    color: var(--im-ink);
    background: var(--im-bg)
}

    .product-master-designer-scope .item-master *[b-u8irpbywt5], .product-master-designer-scope .item-master *[b-u8irpbywt5]::before, .product-master-designer-scope .item-master *[b-u8irpbywt5]::after, .product-master-designer-scope .item-editor-backdrop *[b-u8irpbywt5], .product-master-designer-scope .item-editor-backdrop *[b-u8irpbywt5]::before, .product-master-designer-scope .item-editor-backdrop *[b-u8irpbywt5]::after{
        box-sizing: border-box
    }

    .product-master-designer-scope .item-master button[b-u8irpbywt5], .product-master-designer-scope .item-master input[b-u8irpbywt5], .product-master-designer-scope .item-master select[b-u8irpbywt5], .product-master-designer-scope .item-editor-backdrop button[b-u8irpbywt5], .product-master-designer-scope .item-editor-backdrop input[b-u8irpbywt5], .product-master-designer-scope .item-editor-backdrop select[b-u8irpbywt5], .product-master-designer-scope .item-editor-backdrop textarea[b-u8irpbywt5]{
        font: inherit
    }

.product-master-designer-scope .item-master__hero[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.product-master-designer-scope .item-master__eyebrow[b-u8irpbywt5]{
    color: #1263bd;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .15em
}

.product-master-designer-scope .item-master__hero h1[b-u8irpbywt5]{
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 830;
    line-height: 1.1
}

.product-master-designer-scope .item-master__hero p[b-u8irpbywt5]{
    margin: 4px 0 0;
    color: var(--im-muted);
    font-size: 11px
}

.product-master-designer-scope .item-master__hero-actions[b-u8irpbywt5]{
    display: flex;
    align-items: center;
    gap: 8px
}

.product-master-designer-scope .item-master__button[b-u8irpbywt5]{
    display: inline-flex;
    height: 38px;
    padding: 0 13px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    transition: .16s ease
}

    .product-master-designer-scope .item-master__button:disabled[b-u8irpbywt5]{
        cursor: not-allowed;
        opacity: .45
    }

    .product-master-designer-scope .item-master__button:not(:disabled):hover[b-u8irpbywt5]{
        transform: translateY(-1px)
    }

.product-master-designer-scope .item-master__button--primary[b-u8irpbywt5], .product-master-designer-scope .item-master__button--search[b-u8irpbywt5]{
    border: 1px solid var(--im-blue, #1768c5);
    color: #fff;
    background: var(--im-blue, #1768c5);
    box-shadow: 0 4px 10px rgba(23,104,197,.16)
}

.product-master-designer-scope .item-master__button--soft[b-u8irpbywt5]{
    border: 1px solid #cfdae7;
    color: #526b86;
    background: #fff
}

.product-master-designer-scope .item-master__button--danger[b-u8irpbywt5]{
    border: 1px solid #f0c9ce;
    color: #bc3947;
    background: #fff4f5
}

.product-master-designer-scope .item-master__metrics[b-u8irpbywt5]{
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    flex: 0 0 auto;
    gap: 10px
}

    .product-master-designer-scope .item-master__metrics article[b-u8irpbywt5]{
        display: flex;
        min-width: 0;
        padding: 11px 13px;
        align-items: center;
        gap: 10px;
        border: 1px solid var(--im-line);
        border-radius: 12px;
        background: var(--im-card);
        box-shadow: 0 3px 14px rgba(28,54,87,.04)
    }

.product-master-designer-scope .metric-icon[b-u8irpbywt5]{
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #1768c5;
    background: #e8f3ff
}

.product-master-designer-scope .metric-icon--green[b-u8irpbywt5]{
    color: #087b49;
    background: #e5f8ee
}

.product-master-designer-scope .metric-icon--violet[b-u8irpbywt5]{
    color: #6847ba;
    background: #f0ebff
}

.product-master-designer-scope .metric-icon--amber[b-u8irpbywt5]{
    color: #a96704;
    background: #fff1d7
}

.product-master-designer-scope .item-master__metrics article div[b-u8irpbywt5]{
    display: flex;
    min-width: 0;
    flex-direction: column
}

.product-master-designer-scope .item-master__metrics small[b-u8irpbywt5]{
    overflow: hidden;
    color: var(--im-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px
}

.product-master-designer-scope .item-master__metrics strong[b-u8irpbywt5]{
    font-size: 19px;
    line-height: 1.1
}

.product-master-designer-scope .item-master__toolbar[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    padding: 9px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--im-line);
    border-radius: 13px;
    background: var(--im-card)
}

.product-master-designer-scope .item-master__toolbar > .wms-filter-label[b-u8irpbywt5]{
    flex: 0 0 auto
}

.product-master-designer-scope .item-master__search[b-u8irpbywt5]{
    display: flex;
    min-width: 260px;
    flex: 1 1 400px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #cdd9e7;
    border-radius: 9px;
    background: #fbfdff
}

    .product-master-designer-scope .item-master__search:focus-within[b-u8irpbywt5]{
        border-color: #73a7e2;
        box-shadow: 0 0 0 3px rgba(23,104,197,.1)
    }

    .product-master-designer-scope .item-master__search i[b-u8irpbywt5]{
        color: #7690ac;
        font-size: 12px
    }

    .product-master-designer-scope .item-master__search input[b-u8irpbywt5]{
        width: 100%;
        height: 36px;
        min-width: 0;
        border: 0;
        outline: 0;
        color: var(--im-ink);
        background: transparent;
        font-size: 11px
    }

.product-master-designer-scope .item-master__toolbar > select[b-u8irpbywt5]{
    height: 38px;
    min-width: 135px;
    padding: 0 30px 0 10px;
    border: 1px solid #cdd9e7;
    border-radius: 9px;
    outline: 0;
    color: #455f7c;
    background: #fff;
    font-size: 10px
}

.product-master-designer-scope .item-master__segments[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid #d4dfeb;
    border-radius: 9px;
    background: #f4f7fa
}

    .product-master-designer-scope .item-master__segments button[b-u8irpbywt5]{
        height: 30px;
        padding: 0 10px;
        border: 0;
        border-radius: 6px;
        color: #697c92;
        background: transparent;
        white-space: nowrap;
        font-size: 9px;
        font-weight: 750
    }

        .product-master-designer-scope .item-master__segments button.active[b-u8irpbywt5]{
            color: #155b9f;
            background: #fff;
            box-shadow: 0 2px 6px rgba(37,68,104,.1)
        }

.product-master-designer-scope .item-master__workspace[b-u8irpbywt5]{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    gap: 12px
}

.product-master-designer-scope .item-master__list-card[b-u8irpbywt5], .product-master-designer-scope .item-master__inspector[b-u8irpbywt5]{
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--im-line);
    border-radius: 13px;
    background: var(--im-card);
    box-shadow: 0 5px 18px rgba(31,57,88,.05)
}

.product-master-designer-scope .item-master__list-card[b-u8irpbywt5]{
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.product-master-designer-scope .item-master__section-header[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 14px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--im-line)
}

    .product-master-designer-scope .item-master__section-header h2[b-u8irpbywt5]{
        margin: 0;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 820
    }

    .product-master-designer-scope .item-master__section-header p[b-u8irpbywt5]{
        margin: 1px 0 0;
        color: var(--im-muted);
        font-size: 12px;
        line-height: 1.5
    }

    .product-master-designer-scope .item-master__section-header > span[b-u8irpbywt5]{
        padding: 5px 9px;
        border-radius: 999px;
        color: #315d8c;
        background: #edf5fd;
        white-space: nowrap;
        font-size: 9px;
        font-weight: 760
    }

.product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden
}

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  .table-container{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border: 0;
        border-radius: 0
    }

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  table{
        font-size: 11px !important
    }

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  thead th{
        height: 43px !important;
        padding: 8px !important;
        font-size: 12px !important;
        line-height: 1.25
    }

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  thead th .table-cell,
    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  thead th .table-text,
    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  thead th span{
        font-size: 12px !important
    }

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  tbody td{
        height: 43px !important;
        padding: 4px 8px !important;
        vertical-align: middle;
        font-size: 11px !important;
        line-height: 1.25
    }

    .product-master-designer-scope .item-master__table-wrap[b-u8irpbywt5]  .table-footer{
        min-height: 42px;
        font-size: 11px
    }

    .product-master-designer-scope .item-master__table-wrap .table-container[b-u8irpbywt5]{
        border: 0;
        border-radius: 0
    }

    .product-master-designer-scope .item-master__table-wrap .table-wrapper tbody tr[b-u8irpbywt5]{
        cursor: pointer
    }

        .product-master-designer-scope .item-master__table-wrap .table-wrapper tbody tr:hover[b-u8irpbywt5]{
            background: #edf6ff
        }

.product-master-designer-scope .product-thumb[b-u8irpbywt5]{
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dce6ef;
    border-radius: 7px;
    color: #6795c7;
    background: #eef5fc
}

    .product-master-designer-scope .product-thumb img[b-u8irpbywt5]{
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.product-master-designer-scope .product-code[b-u8irpbywt5]{
    color: #205f9f;
    font-weight: 800
}

.product-master-designer-scope .item-master__list-card[b-u8irpbywt5]{
    height: 100%
}

.product-master-designer-scope .item-master__list-card > .item-master__toolbar[b-u8irpbywt5]{
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 9px 12px
}

.product-master-designer-scope .item-master__toolbar :is(select, button):focus-visible[b-u8irpbywt5],
.product-master-designer-scope .item-master__segments:focus-within[b-u8irpbywt5]{
    outline: 0;
    border-color: #4f8ddd;
    box-shadow: 0 0 0 3px rgba(37,99,235,.13)
}

.product-master-designer-scope .item-master__segments button:focus-visible[b-u8irpbywt5]{
    outline: 2px solid #4f8ddd;
    outline-offset: -2px
}

.product-master-designer-scope .product-cell[b-u8irpbywt5]{
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px
}

.product-master-designer-scope .product-cell > div[b-u8irpbywt5],
.product-master-designer-scope .product-description[b-u8irpbywt5]{
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px
}

.product-master-designer-scope .product-cell small[b-u8irpbywt5],
.product-master-designer-scope .product-description small[b-u8irpbywt5]{
    overflow: hidden;
    color: var(--im-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.3
}

.product-master-designer-scope .product-description > span[b-u8irpbywt5]{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.product-master-designer-scope .product-meta-chip[b-u8irpbywt5]{
    display: inline-flex;
    max-width: 100%;
    min-height: 24px;
    padding: 3px 8px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border-radius: 999px;
    color: #334e6f;
    background: #eef4fa;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700
}

.product-master-designer-scope .product-meta-chip--barcode[b-u8irpbywt5]{
    color: #1768c5;
    background: #edf5ff
}

.product-master-designer-scope .item-master__section-status > em[b-u8irpbywt5]{
    padding: 5px 9px;
    border-radius: 999px;
    color: #315d8c;
    background: #edf5fd;
    white-space: nowrap;
    font-size: 9px;
    font-style: normal;
    font-weight: 760
}

.product-master-designer-scope .product-status[b-u8irpbywt5]{
    display: inline-flex;
    padding: 4px 7px;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 8px;
    font-weight: 820
}

    .product-master-designer-scope .product-status i[b-u8irpbywt5]{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor
    }

    .product-master-designer-scope .product-status.enabled[b-u8irpbywt5]{
        color: #087b49;
        background: #e3f7ec
    }

    .product-master-designer-scope .product-status.disabled[b-u8irpbywt5]{
        color: #8a5a63;
        background: #f4e9eb
    }

.product-master-designer-scope .item-master__inspector[b-u8irpbywt5]{
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden
}

.product-master-designer-scope .inspector-close[b-u8irpbywt5]{
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-head[b-u8irpbywt5]{
    padding-right: 58px
}

.product-master-designer-scope .item-master__inspector--sidebar[b-u8irpbywt5]{
    color: #172a45
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-head small[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-title small[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-grid small[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-footer small[b-u8irpbywt5]{
    font-size: 9px;
    line-height: 1.45
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-head h2[b-u8irpbywt5]{
    font-size: 20px;
    line-height: 1.35
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-head p[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-title p[b-u8irpbywt5]{
    font-size: 11px;
    line-height: 1.55
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-title h3[b-u8irpbywt5]{
    font-size: 15px;
    line-height: 1.5
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-grid strong[b-u8irpbywt5]{
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-units h3[b-u8irpbywt5]{
    font-size: 14px
}

.product-master-designer-scope .item-master__inspector--sidebar .inspector-units header p[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-units header > span[b-u8irpbywt5]{
    font-size: 10px
}

.product-master-designer-scope .item-master__inspector--sidebar .unit-list strong[b-u8irpbywt5]{
    font-size: 12px
}

.product-master-designer-scope .item-master__inspector--sidebar .unit-list small[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .unit-list em[b-u8irpbywt5],
.product-master-designer-scope .item-master__inspector--sidebar .inspector-footer :is(strong, span)[b-u8irpbywt5]{
    font-size: 10px;
    line-height: 1.45
}

.product-master-designer-scope .item-master__view[b-u8irpbywt5]{ margin: auto }

.product-master-designer-scope .inspector-empty[b-u8irpbywt5]{
    display: grid;
    height: 100%;
    padding: 32px;
    place-content: center;
    justify-items: center;
    text-align: center
}

    .product-master-designer-scope .inspector-empty > span[b-u8irpbywt5]{
        display: grid;
        width: 58px;
        height: 58px;
        margin-bottom: 13px;
        place-items: center;
        border-radius: 17px;
        color: #3977b9;
        background: #e9f3fd;
        font-size: 21px
    }

    .product-master-designer-scope .inspector-empty h2[b-u8irpbywt5]{
        margin: 0;
        font-size: 16px
    }

    .product-master-designer-scope .inspector-empty p[b-u8irpbywt5]{
        max-width: 260px;
        margin: 5px 0 0;
        color: var(--im-muted);
        font-size: 10px
    }

.product-master-designer-scope .inspector-head[b-u8irpbywt5]{
    display: grid;
    padding: 14px;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: start;
    gap: 11px;
    border-bottom: 1px solid var(--im-line)
}

.product-master-designer-scope .inspector-image[b-u8irpbywt5]{
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d9e4ef;
    border-radius: 12px;
    color: #5d8fc5;
    background: #edf5fc;
    font-size: 18px
}

    .product-master-designer-scope .inspector-image img[b-u8irpbywt5]{
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.product-master-designer-scope .inspector-head > div[b-u8irpbywt5]{
    min-width: 0
}

.product-master-designer-scope .inspector-head small[b-u8irpbywt5], .product-master-designer-scope .inspector-title small[b-u8irpbywt5], .product-master-designer-scope .inspector-grid small[b-u8irpbywt5], .product-master-designer-scope .inspector-footer small[b-u8irpbywt5]{
    color: #4e77a0;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .1em
}

.product-master-designer-scope .inspector-head h2[b-u8irpbywt5]{
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 830
}

.product-master-designer-scope .inspector-head p[b-u8irpbywt5]{
    margin: 2px 0 0;
    color: var(--im-muted);
    font-size: 9px
}

.product-master-designer-scope .inspector-title[b-u8irpbywt5]{
    padding: 13px 15px;
    border-bottom: 1px solid var(--im-line)
}

    .product-master-designer-scope .inspector-title h3[b-u8irpbywt5]{
        margin: 2px 0 0;
        font-size: 14px
    }

    .product-master-designer-scope .inspector-title p[b-u8irpbywt5]{
        margin: 3px 0 0;
        color: var(--im-muted);
        font-size: 9px
    }

.product-master-designer-scope .inspector-grid[b-u8irpbywt5]{
    display: grid;
    padding: 12px 15px;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    border-bottom: 1px solid var(--im-line)
}

    .product-master-designer-scope .inspector-grid > div[b-u8irpbywt5]{
        display: flex;
        min-width: 0;
        padding: 9px;
        flex-direction: column;
        border: 1px solid #dce6ef;
        border-radius: 9px;
        background: #f9fbfd
    }

    .product-master-designer-scope .inspector-grid strong[b-u8irpbywt5]{
        margin-top: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px
    }

.product-master-designer-scope .inspector-units[b-u8irpbywt5]{
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 15px;
    flex-direction: column
}

    .product-master-designer-scope .inspector-units > header[b-u8irpbywt5]{
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between
    }

    .product-master-designer-scope .inspector-units h3[b-u8irpbywt5]{
        margin: 0;
        font-size: 12px
    }

    .product-master-designer-scope .inspector-units header p[b-u8irpbywt5]{
        margin: 1px 0 0;
        color: var(--im-muted);
        font-size: 8px
    }

    .product-master-designer-scope .inspector-units header > span[b-u8irpbywt5]{
        padding: 4px 7px;
        border-radius: 999px;
        color: #426d99;
        background: #edf5fc;
        font-size: 8px
    }

.product-master-designer-scope .unit-list[b-u8irpbywt5]{
    display: flex;
    min-height: 0;
    margin-top: 9px;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto
}

    .product-master-designer-scope .unit-list article[b-u8irpbywt5]{
        display: grid;
        padding: 8px;
        grid-template-columns: 28px minmax(0,1fr) auto;
        align-items: center;
        gap: 8px;
        border: 1px solid #dfe8f1;
        border-radius: 9px
    }

        .product-master-designer-scope .unit-list article > span[b-u8irpbywt5]{
            display: grid;
            width: 26px;
            height: 26px;
            place-items: center;
            border-radius: 7px;
            color: #2266aa;
            background: #e8f2fd;
            font-size: 8px;
            font-weight: 850
        }

        .product-master-designer-scope .unit-list article > div[b-u8irpbywt5]{
            display: flex;
            min-width: 0;
            flex-direction: column
        }

    .product-master-designer-scope .unit-list strong[b-u8irpbywt5]{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px
    }

    .product-master-designer-scope .unit-list small[b-u8irpbywt5]{
        color: var(--im-muted);
        font-size: 7px
    }

    .product-master-designer-scope .unit-list em[b-u8irpbywt5]{
        color: #536d87;
        font-size: 8px;
        font-style: normal
    }

.product-master-designer-scope .unit-empty[b-u8irpbywt5]{
    margin: auto;
    color: var(--im-muted);
    font-size: 9px
}

.product-master-designer-scope .inspector-footer[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    padding: 11px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--im-line);
    background: #fbfdff
}

    .product-master-designer-scope .inspector-footer > div:first-child[b-u8irpbywt5]{
        display: flex;
        min-width: 0;
        flex-direction: column
    }

    .product-master-designer-scope .inspector-footer strong[b-u8irpbywt5]{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px
    }

    .product-master-designer-scope .inspector-footer span[b-u8irpbywt5]{
        color: var(--im-muted);
        font-size: 8px
    }

.product-master-designer-scope .inspector-actions[b-u8irpbywt5]{
    display: flex;
    gap: 7px
}

.product-master-designer-scope .item-editor[b-u8irpbywt5]{
    width: min(1180px,calc(100vw - 44px));
    max-height: calc(100vh - 44px);
    color: var(--im-ink,#102b4c)
}

.product-master-designer-scope .item-editor__header[b-u8irpbywt5]{
    padding: 16px 18px;
    align-items: flex-start;
    border-bottom: 1px solid #d8e3ed
}

    .product-master-designer-scope .item-editor__header span[b-u8irpbywt5]{
        color: #1768c5;
        font-size: 9px;
        font-weight: 850;
        letter-spacing: .14em
    }

    .product-master-designer-scope .item-editor__header h2[b-u8irpbywt5]{
        margin: 2px 0 0;
        font-size: 21px;
        line-height: 1.4
    }

    .product-master-designer-scope .item-editor__header p[b-u8irpbywt5]{
        margin: 3px 0 0;
        color: #73849a;
        font-size: 11px
    }

    .product-master-designer-scope .item-editor__header > button[b-u8irpbywt5]{
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 0;
        border-radius: 9px;
        color: #60758d;
        background: #eef3f7
    }

.product-master-designer-scope .item-editor__body[b-u8irpbywt5]{
    padding: 14px
}

.product-master-designer-scope .item-editor__identity[b-u8irpbywt5]{
    display: grid;
    padding: 14px;
    grid-template-columns: 190px minmax(0,1fr);
    gap: 15px
}

.product-master-designer-scope .editor-section-heading[b-u8irpbywt5]{
    grid-column: 1 / -1;
    margin: -14px -14px 0;
    padding: 11px 14px;
    border-bottom: 1px solid #d8e3ed
}

.product-master-designer-scope .editor-upload[b-u8irpbywt5]{
    display: grid;
    min-height: 180px;
    place-items: center;
    border: 1px dashed #c9d8e7;
    border-radius: 10px;
    background: #f8fbfe
}

.product-master-designer-scope .editor-fields[b-u8irpbywt5]{
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

    .product-master-designer-scope .editor-fields label[b-u8irpbywt5]{
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 4px
    }

        .product-master-designer-scope .editor-fields label.wide[b-u8irpbywt5]{
            grid-column: 1/-1
        }

        .product-master-designer-scope .editor-fields label > span:first-child[b-u8irpbywt5]{
            color: #627891;
            font-size: 10px;
            font-weight: 800
        }

    .product-master-designer-scope .editor-fields input[b-u8irpbywt5], .product-master-designer-scope .editor-fields select[b-u8irpbywt5], .product-master-designer-scope .editor-fields textarea[b-u8irpbywt5]{
        width: 100%;
        min-width: 0;
        border: 1px solid #ccd9e6;
        border-radius: 8px;
        outline: 0;
        color: #17324f;
        background: #fff;
        font-size: 11px
    }

    .product-master-designer-scope .editor-fields input[b-u8irpbywt5], .product-master-designer-scope .editor-fields select[b-u8irpbywt5]{
        height: 35px;
        padding: 0 10px
    }

    .product-master-designer-scope .editor-fields textarea[b-u8irpbywt5]{
        padding: 8px 10px;
        resize: vertical
    }

        .product-master-designer-scope .editor-fields input:focus[b-u8irpbywt5], .product-master-designer-scope .editor-fields select:focus[b-u8irpbywt5], .product-master-designer-scope .editor-fields textarea:focus[b-u8irpbywt5]{
            border-color: #6ba2df;
            box-shadow: 0 0 0 3px rgba(23,104,197,.09)
        }

    .product-master-designer-scope .editor-fields :disabled[b-u8irpbywt5]{
        color: #8090a2;
        background: #f1f4f7
    }

.product-master-designer-scope .editor-switch[b-u8irpbywt5]{
    display: flex;
    height: 35px;
    align-items: center;
    gap: 8px
}

    .product-master-designer-scope .editor-switch input[b-u8irpbywt5]{
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0
    }

    .product-master-designer-scope .editor-switch i[b-u8irpbywt5]{
        position: relative;
        width: 38px;
        height: 21px;
        border-radius: 999px;
        background: #cbd5df;
        transition: .15s
    }

        .product-master-designer-scope .editor-switch i[b-u8irpbywt5]::after{
            position: absolute;
            top: 3px;
            left: 3px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.18);
            content: "";
            transition: .15s
        }

    .product-master-designer-scope .editor-switch input:checked + i[b-u8irpbywt5]{
        background: #2eb66d
    }

        .product-master-designer-scope .editor-switch input:checked + i[b-u8irpbywt5]::after{
            transform: translateX(17px)
        }

    .product-master-designer-scope .editor-switch em[b-u8irpbywt5]{
        color: #61768d;
        font-size: 9px;
        font-style: normal
    }

.product-master-designer-scope .item-editor__units[b-u8irpbywt5]{
    margin-top: 12px;
    padding: 12px
}

    .product-master-designer-scope .item-editor__units > header[b-u8irpbywt5]{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
    }

    .product-master-designer-scope .item-editor__units h3[b-u8irpbywt5]{
        margin: 0;
        font-size: 13px
    }

    .product-master-designer-scope .item-editor__units header p[b-u8irpbywt5]{
        margin: 2px 0 0;
        color: #73849a;
        font-size: 8px
    }

    .product-master-designer-scope .item-editor__units header button[b-u8irpbywt5]{
        display: inline-flex;
        height: 32px;
        padding: 0 10px;
        align-items: center;
        gap: 6px;
        border: 1px solid #b9d3ed;
        border-radius: 8px;
        color: #1768c5;
        background: #edf6ff;
        font-size: 11px;
        font-weight: 800
    }

.product-master-designer-scope .editor-unit-table[b-u8irpbywt5]{
    min-width: 900px;
    margin-top: 10px
}

.product-master-designer-scope .item-editor__units[b-u8irpbywt5]{
    overflow-x: auto
}

.product-master-designer-scope .editor-unit-row[b-u8irpbywt5]{
    display: grid;
    padding: 7px 8px;
    grid-template-columns: 42px 1fr 1.25fr .7fr .55fr .55fr .55fr .7fr 32px;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #e2e9f0
}

    .product-master-designer-scope .editor-unit-row:last-child[b-u8irpbywt5]{
        border-bottom: 0
    }

.product-master-designer-scope .editor-unit-row--head[b-u8irpbywt5]{
    min-height: 40px;
    color: #fff;
    background: #2063b6;
    font-size: 9px;
    font-weight: 850
}

.product-master-designer-scope .editor-unit-row:not(.editor-unit-row--head)[b-u8irpbywt5]{
    min-height: 48px;
    background: #fff
}

.product-master-designer-scope .editor-unit-row strong[b-u8irpbywt5]{
    font-size: 11px
}

.product-master-designer-scope .editor-unit-row input[b-u8irpbywt5]{
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 7px;
    border: 1px solid #cedae6;
    border-radius: 7px;
    outline: 0;
    font-size: 11px
}

    .product-master-designer-scope .editor-unit-row input:focus[b-u8irpbywt5]{
        border-color: #6ba2df
    }

    .product-master-designer-scope .editor-unit-row input:disabled[b-u8irpbywt5]{
        background: #f1f4f7
    }

.product-master-designer-scope .editor-unit-row button[b-u8irpbywt5]{
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #edcdd1;
    border-radius: 7px;
    color: #bd3c49;
    background: #fff4f5;
    font-size: 9px
}

    .product-master-designer-scope .editor-unit-row button:disabled[b-u8irpbywt5]{
        opacity: .35
    }

.product-master-designer-scope .item-editor__footer[b-u8irpbywt5]{
    display: flex;
    flex: 0 0 auto;
    padding: 12px 17px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid #d8e3ed;
    background: #fff
}

    .product-master-designer-scope .item-editor__footer > span[b-u8irpbywt5]{
        display: flex;
        align-items: center;
        gap: 7px;
        color: #708298;
        font-size: 10px
    }

    .product-master-designer-scope .item-editor__footer > div[b-u8irpbywt5]{
        display: flex;
        align-items: center;
        gap: 8px
    }

.product-master-designer-scope .item-editor__save[b-u8irpbywt5]{
    min-width: 108px
}

@media(max-width:1280px) {
    .product-master-designer-scope .item-master__toolbar[b-u8irpbywt5]{
        flex-wrap: wrap
    }

    .product-master-designer-scope .item-master__search[b-u8irpbywt5]{
        flex-basis: calc(100% - 160px)
    }

    .product-master-designer-scope .item-master__workspace[b-u8irpbywt5]{
        grid-template-columns: minmax(590px,1.25fr) minmax(340px,.75fr)
    }
}

@media(max-width:1024px) {
    .product-master-designer-scope .item-master[b-u8irpbywt5]{
        height: auto;
        min-height: 100%;
        overflow: visible
    }

    .product-master-designer-scope .item-master__workspace[b-u8irpbywt5]{
        display: flex;
        flex-direction: column
    }

    .product-master-designer-scope .item-master__list-card[b-u8irpbywt5]{
        min-height: 590px
    }

    .product-master-designer-scope .item-master__inspector[b-u8irpbywt5]{
        min-height: 540px
    }

    .product-master-designer-scope .item-editor__identity[b-u8irpbywt5]{
        grid-template-columns: 1fr
    }

    .product-master-designer-scope .editor-upload[b-u8irpbywt5]{
        min-height: 130px
    }
}

@media(max-width:700px) {
    .product-master-designer-scope .item-master[b-u8irpbywt5]{
        padding: 12px;
        gap: 9px
    }

    .product-master-designer-scope .item-master__hero p[b-u8irpbywt5]{
        display: none
    }

    .product-master-designer-scope .item-master__hero-actions .item-master__button span[b-u8irpbywt5]{
        display: none
    }

    .product-master-designer-scope .item-master__metrics[b-u8irpbywt5]{
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

    .product-master-designer-scope .item-master__search[b-u8irpbywt5]{
        min-width: 100%;
        flex-basis: 100%
    }

    .product-master-designer-scope .item-master__toolbar > select[b-u8irpbywt5]{
        flex: 1 1 auto
    }

    .product-master-designer-scope .item-master__segments[b-u8irpbywt5]{
        width: 100%;
        overflow-x: auto
    }

        .product-master-designer-scope .item-master__segments button[b-u8irpbywt5]{
            flex: 1 0 auto
        }

    .product-master-designer-scope .item-master__button--search[b-u8irpbywt5], .product-master-designer-scope .item-master__toolbar > .item-master__button--soft[b-u8irpbywt5]{
        flex: 1 1 auto
    }

    .product-master-designer-scope .item-master__section-header p[b-u8irpbywt5]{
        display: none
    }

    .product-master-designer-scope .item-master__section-header[b-u8irpbywt5]{
        align-items: flex-start
    }

    .product-master-designer-scope .item-master__section-status[b-u8irpbywt5]{
        max-width: 58%;
        gap: 5px
    }

    .product-master-designer-scope .item-master__section-status > span[b-u8irpbywt5]{
        width: 100%;
        text-align: right
    }

    .product-master-designer-scope .inspector-head[b-u8irpbywt5]{
        grid-template-columns: auto minmax(0,1fr)
    }

        .product-master-designer-scope .inspector-head > .product-status[b-u8irpbywt5]{
            grid-column: 2
        }

    .product-master-designer-scope .editor-fields[b-u8irpbywt5]{
        grid-template-columns: 1fr
    }

        .product-master-designer-scope .editor-fields label.wide[b-u8irpbywt5]{
            grid-column: auto
        }

    .product-master-designer-scope .item-editor-backdrop[b-u8irpbywt5]{
        padding: 8px
    }

    .product-master-designer-scope .item-editor[b-u8irpbywt5]{
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px)
    }

    .product-master-designer-scope .item-editor__footer[b-u8irpbywt5]{
        align-items: stretch;
        flex-direction: column
    }

        .product-master-designer-scope .item-editor__footer > div .item-master__button[b-u8irpbywt5]{
            flex: 1
        }

    .product-master-designer-scope .item-editor__actions[b-u8irpbywt5]{
        flex-wrap: wrap
    }
}

/* _content/WMS.UI/Pages/ProductManagements/Replenishment/ProductSummaryDetails.razor.rz.scp.css */
.sku-detail[b-v7aphe7x6r] { background:#f8fafc; border:1px solid #b8cbea; border-radius:8px; padding:14px; white-space:normal; }
.sku-detail-panels[b-v7aphe7x6r] { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); gap:12px; align-items:start; }
.sku-stock-panel[b-v7aphe7x6r] { min-width:0; border:1px solid #b8cbea; border-radius:8px; padding:12px; background:white; }
.sku-stock-scroll[b-v7aphe7x6r] { max-height:400px; overflow:auto; }
.sku-stock-card[b-v7aphe7x6r] { display:flex; gap:12px; border:1px solid #b8cbea; border-radius:7px; padding:12px; margin-bottom:10px; }
.sku-stock-eligible[b-v7aphe7x6r] { border:1px solid #75b798; border-left:5px solid #198754; background:#f0faf4; }
.sku-stock-blocked[b-v7aphe7x6r] { border-left:5px solid #adb5bd; background:#f3f4f6; }
.sku-pallet-status[b-v7aphe7x6r] { display:inline-block; font-weight:600; font-size:.85rem; padding:4px 9px; border-radius:5px; margin-top:6px; }
.sku-pallet-ready[b-v7aphe7x6r] { color:#0f5132; background:#d1e7dd; }.sku-pallet-blocked[b-v7aphe7x6r] { color:#495057; background:#e2e3e5; }
.sku-pallet-action[b-v7aphe7x6r] { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:10px; }
.sku-pallet-quantity[b-v7aphe7x6r] { color:#0f5132; font-size:1rem; }.sku-stock-blocked .sku-pallet-quantity[b-v7aphe7x6r] { color:#495057; }
.sku-stock-body .sku-pallet-reason[b-v7aphe7x6r] { color:#9a5700; font-weight:600; }
.sku-stock-eligible .sku-card-meter span[b-v7aphe7x6r] { background:#198754; }
.sku-stock-icon[b-v7aphe7x6r] { color:var(--bs-primary,#195cb7); font-size:2rem; }
.sku-stock-body[b-v7aphe7x6r] { min-width:0; flex:1; }
.sku-card-heading[b-v7aphe7x6r] { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; overflow-wrap:anywhere; }
.sku-stock-body small[b-v7aphe7x6r] { display:block; color:#6c757d; margin-top:4px; overflow-wrap:anywhere; }
.sku-card-meter[b-v7aphe7x6r] { height:8px; border-radius:6px; overflow:hidden; background:#e8edf5; margin-top:8px; }
.sku-card-meter span[b-v7aphe7x6r] { display:block; height:100%; background:var(--bs-primary,#195cb7); }
.sku-flow-arrow[b-v7aphe7x6r] { display:flex; flex-direction:column; align-items:center; align-self:center; color:var(--bs-primary,#195cb7); text-align:center; }
.sku-flow-arrow > span[b-v7aphe7x6r] { font-size:2rem; }
.sku-rule-strip[b-v7aphe7x6r] { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; padding:12px; background:#fff8de; border:1px solid #e6d9aa; border-radius:7px; }
.sku-rule-strip button[b-v7aphe7x6r] { margin-left:auto; }
@media(max-width:1100px) { .sku-detail-panels[b-v7aphe7x6r] { grid-template-columns:minmax(0,1fr); }.sku-flow-arrow > span[b-v7aphe7x6r] { transform:rotate(90deg); } }
/* _content/WMS.UI/Pages/ProductManagements/Replenishment/ReplenLoad.razor.rz.scp.css */
/* Layout follows the other WMS pages: wms-page-header + wms-summary-grid
   (site.css), then the cards of this page. */
.replen-load-page[b-86g4e6o48d] {
    min-height: 100%;
    padding: 16px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f4f7fb;
}

.replen-load-header-actions[b-86g4e6o48d] {
    flex-direction: column;
    align-items: flex-end !important;
    gap: 6px;
}

.replen-load-updated[b-86g4e6o48d] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

/* three summary cards instead of the theme's four */
.replen-load-page .replen-load-summary.wms-summary-grid[b-86g4e6o48d] {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.replen-load-summary .wms-summary-card[b-86g4e6o48d] {
    height: auto !important;
    min-height: 86px !important;
}

.replen-load-unit[b-86g4e6o48d] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.replen-load-state[b-86g4e6o48d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: #172033;
    font-size: 14px;
    font-weight: 800;
}

.replen-load-state i[b-86g4e6o48d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
}

.replen-load-state.is-error i[b-86g4e6o48d] {
    background: #dc2626;
}

.replen-load-grid[b-86g4e6o48d] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
    gap: 14px;
    align-items: stretch;
}

.replen-load-side[b-86g4e6o48d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.replen-load-card[b-86g4e6o48d] {
    min-width: 0;
    padding: 18px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.replen-load-card-heading[b-86g4e6o48d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.replen-load-card-heading h2[b-86g4e6o48d] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.replen-load-card-heading h2 i[b-86g4e6o48d] {
    color: #2563eb;
}

/* pending items table */
.replen-load-table-wrap[b-86g4e6o48d] {
    flex: 1;
    overflow-x: auto;
}

.replen-load-table[b-86g4e6o48d] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.replen-load-table thead th[b-86g4e6o48d] {
    padding: 11px 12px;
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.replen-load-table tbody td[b-86g4e6o48d] {
    padding: 12px;
    border-bottom: 1px solid #eef2f7;
    color: #263751;
    vertical-align: middle;
}

.replen-load-table tbody tr.is-selected td[b-86g4e6o48d] {
    background: #eff6ff;
}

.replen-load-empty-row[b-86g4e6o48d] {
    padding: 36px 12px !important;
    color: #94a3b8 !important;
    text-align: center;
}

.replen-load-product[b-86g4e6o48d] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.replen-load-product strong[b-86g4e6o48d] {
    display: block;
    color: #172033;
    font-weight: 800;
}

.replen-load-product small[b-86g4e6o48d] {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.replen-load-product-icon[b-86g4e6o48d] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    color: #475569;
    background: #fff;
}

.replen-load-pill[b-86g4e6o48d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #e0edff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.replen-load-pill i[b-86g4e6o48d] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.replen-load-pill.is-loading[b-86g4e6o48d] {
    color: #047857;
    background: #d1fae5;
}

.replen-load-pager[b-86g4e6o48d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    color: #64748b;
    font-size: 12px;
}

.replen-load-pager > div[b-86g4e6o48d] {
    display: flex;
    gap: 6px;
}

.replen-load-pager button[b-86g4e6o48d] {
    min-width: 34px;
    height: 34px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-weight: 700;
}

.replen-load-pager button.is-current[b-86g4e6o48d] {
    border-color: #1d5fd1;
    background: #1d5fd1;
    color: #fff;
}

.replen-load-pager button:disabled[b-86g4e6o48d] {
    opacity: .45;
}

/* scan tote */
.replen-load-help-button[b-86g4e6o48d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #1c2b49;
    font-size: 12px;
    font-weight: 700;
}

.replen-load-help[b-86g4e6o48d] {
    margin: 0;
    padding: 10px 14px 10px 30px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
}

.replen-load-scan[b-86g4e6o48d] {
    display: flex;
    gap: 10px;
}

.replen-load-scan-input[b-86g4e6o48d] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.replen-load-scan-input > i[b-86g4e6o48d] {
    position: absolute;
    left: 14px;
    color: #475569;
    pointer-events: none;
}

.replen-load-scan-input input[b-86g4e6o48d] {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    outline: 0;
    color: #172033;
    background: #fff;
    font-size: 14px;
}

.replen-load-scan-input input:focus[b-86g4e6o48d] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.replen-load-muted[b-86g4e6o48d] {
    color: #64748b;
    font-size: 12px;
}

.replen-load-primary[b-86g4e6o48d],
.replen-load-secondary[b-86g4e6o48d],
.replen-load-cancel[b-86g4e6o48d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.replen-load-primary[b-86g4e6o48d] {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    background: #1d5fd1;
    color: #fff;
    box-shadow: 0 6px 14px rgba(29, 95, 209, .25);
}

.replen-load-secondary[b-86g4e6o48d] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #cbd8e8;
    background: #fff;
    color: #1d4ed8;
    font-size: 12px;
}

.replen-load-cancel[b-86g4e6o48d] {
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid #cbd8e8;
    background: #fff;
    color: #1c2b49;
}

.replen-load-primary:disabled[b-86g4e6o48d],
.replen-load-secondary:disabled[b-86g4e6o48d],
.replen-load-cancel:disabled[b-86g4e6o48d] {
    opacity: .5;
    box-shadow: none;
    cursor: not-allowed;
}

.replen-load-error[b-86g4e6o48d] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #b91c1c;
    background: #fee2e2;
    font-size: 13px;
    font-weight: 600;
}

/* current tote */
.replen-load-current[b-86g4e6o48d] {
    flex: 1;
}

.replen-load-empty[b-86g4e6o48d] {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

.replen-load-empty-icon[b-86g4e6o48d] {
    font-size: 44px;
    color: #94a3b8;
}

.replen-load-empty strong[b-86g4e6o48d] {
    color: #172033;
    font-size: 17px;
}

.replen-load-empty small[b-86g4e6o48d] {
    color: #64748b;
}

.replen-load-tote-head[b-86g4e6o48d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #f8fbff;
}

.replen-load-tote-head small[b-86g4e6o48d] {
    display: block;
    color: #64748b;
    font-size: 11px;
}

.replen-load-tote-head strong[b-86g4e6o48d] {
    font-size: 20px;
    color: #172033;
}

.replen-load-type-chip[b-86g4e6o48d] {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #e0edff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}

.replen-load-tote-actions[b-86g4e6o48d] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.replen-load-tote-visual[b-86g4e6o48d] {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.replen-load-bin[b-86g4e6o48d] {
    position: relative;
    border: 4px solid #2563eb;
    border-radius: 12px;
    background: #f8fafc;
    overflow: hidden;
}

.replen-load-bin.small[b-86g4e6o48d] {
    border-width: 2px;
    border-radius: 6px;
}

.replen-load-partition[b-86g4e6o48d] {
    position: absolute;
    padding: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #0f172a;
    text-align: center;
}

.replen-load-partition.whole[b-86g4e6o48d] {
    inset: 0;
}

.replen-load-partition strong[b-86g4e6o48d] {
    font-size: 18px;
}

.replen-load-partition small[b-86g4e6o48d] {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .85);
    color: #0f172a;
    font-size: 11px;
}

.replen-load-partition.has-stock[b-86g4e6o48d] {
    background: #cbd5e1;
}

.replen-load-partition.is-selected[b-86g4e6o48d] {
    background: #1d5fd1;
    color: #fff;
}

.replen-load-partition.is-blocked[b-86g4e6o48d] {
    opacity: .45;
    cursor: not-allowed;
}

.replen-load-status[b-86g4e6o48d] {
    text-align: center;
    color: #172033;
    font-weight: 800;
}

.replen-load-note[b-86g4e6o48d] {
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

.replen-load-step-title[b-86g4e6o48d] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: #172033;
    font-weight: 800;
}

.replen-load-step-title span[b-86g4e6o48d] {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #1d5fd1;
    color: #fff;
    font-size: 12px;
}

.replen-load-choices[b-86g4e6o48d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 12px;
}

.replen-load-item[b-86g4e6o48d] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #f8fbff;
}

.replen-load-qty[b-86g4e6o48d] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.replen-load-qty span[b-86g4e6o48d] {
    color: #475569;
    font-weight: 700;
}

.replen-load-qty button[b-86g4e6o48d] {
    width: 38px;
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
}

.replen-load-qty input[b-86g4e6o48d] {
    width: 90px;
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

.replen-load-serial-list[b-86g4e6o48d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.replen-load-serial-list button[b-86g4e6o48d] {
    padding: 3px 10px;
    border: 1px solid #cbd8e8;
    border-radius: 999px;
    background: #fff;
    color: #1c2b49;
    font-size: 12px;
}

/* bottom action bar */
.replen-load-footer[b-86g4e6o48d] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #dce5f0;
    background: #fff;
}

.replen-load-footer .replen-load-primary[b-86g4e6o48d] {
    min-width: 200px;
}

/* change type dialog: same look as the Replen Station page (Station_Component.razor.css) */
.tote-type-dialog[b-86g4e6o48d] { display: flex; flex-direction: column; gap: 16px; color: #172033; }
.tote-type-dialog__header[b-86g4e6o48d] { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px; background: #eff6ff; }
.tote-type-dialog__header span[b-86g4e6o48d], .tote-partition-selection > span[b-86g4e6o48d] { display: block; color: #64748b; font-size: 10px; font-weight: 700; }
.tote-type-dialog__header strong[b-86g4e6o48d] { display: block; color: #0f172a; font-size: 16px; }
.tote-type-dialog__header small[b-86g4e6o48d] { color: #2563eb; font-size: 11px; }
.tote-type-options[b-86g4e6o48d] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tote-type-option[b-86g4e6o48d] { min-width: 0; padding: 11px; display: flex; flex-direction: column; align-items: stretch; gap: 9px; border: 2px solid #e2e8f0; border-radius: 10px; color: #334155; background: #fff; cursor: pointer; }
.tote-type-option:hover[b-86g4e6o48d] { border-color: #93c5fd; }
.tote-type-option.is-selected[b-86g4e6o48d] { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgb(37 99 235 / 10%); }
.tote-type-option > strong[b-86g4e6o48d] { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tote-type-preview[b-86g4e6o48d], .tote-partition-selection__preview[b-86g4e6o48d] { position: relative; width: 100%; max-width: 280px; min-height: 70px; align-self: center; overflow: hidden; border: 2px solid #4f78a6; border-radius: 5px; background: #f8fbff; }
.tote-type-partition[b-86g4e6o48d] { position: absolute; display: grid; place-items: center; overflow: hidden; border: 1px solid #2f6faf; color: #174c8d; background: #dbeafe; font-size: 9px; }
.tote-partition-selection[b-86g4e6o48d] { padding: 12px; border: 1px solid #dbe5f1; border-radius: 10px; background: #f8fafc; }
.tote-partition-selection > span[b-86g4e6o48d] { margin-bottom: 8px; }
.tote-partition-selection > small[b-86g4e6o48d] { color: #94a3b8; font-size: 11px; }
.tote-partition-selection__preview[b-86g4e6o48d] { min-height: 150px; }
.tote-partition-selection__preview .is-selectable[b-86g4e6o48d] { position: absolute; padding: 0; cursor: pointer; }
.tote-partition-selection__preview .is-selectable:hover[b-86g4e6o48d] { z-index: 2; background: #bfdbfe; }
.tote-partition-selection__preview .is-selectable.is-selected[b-86g4e6o48d] { z-index: 3; color: #fff; background: #2563eb; box-shadow: inset 0 0 0 2px #1d4ed8; }
.tote-type-dialog__actions[b-86g4e6o48d] { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

@media (max-width: 1100px) {
    .replen-load-grid[b-86g4e6o48d] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .replen-load-page .replen-load-summary.wms-summary-grid[b-86g4e6o48d] {
        grid-template-columns: 1fr;
    }

    .replen-load-scan[b-86g4e6o48d] {
        flex-direction: column;
    }
}
/* _content/WMS.UI/Pages/ProductManagements/Replenishment/SKUsReplen.razor.rz.scp.css */
.sku-replen-page[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; overflow:hidden; padding:12px; background:#f4f7fb; }
.sku-replen-content[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:12px; flex:1 1 0; min-height:0; overflow:auto; }
.sku-replen-content > *[b-tbik8jwpnk] { flex-shrink:0; }
.sku-metrics[b-tbik8jwpnk] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,2fr); gap:10px; }
.sku-metrics > button[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:4px; background:#fff; color:inherit; text-align:left; font:inherit; border:1px solid #dee2e6; border-radius:8px; padding:12px 16px; cursor:pointer; }
.sku-metrics > button:hover[b-tbik8jwpnk] { border-color:var(--bs-primary,#195cb7); }
.sku-metrics > button.sku-metric-active[b-tbik8jwpnk] { border:3px solid var(--bs-primary,#195cb7); padding:10px 14px; background:var(--bs-primary-bg-subtle,#edf4ff); }
.sku-metrics > button:focus-visible[b-tbik8jwpnk] { outline:2px solid var(--bs-primary,#195cb7); outline-offset:2px; }
.sku-metrics strong[b-tbik8jwpnk] { font-size:1.5rem; }
.sku-metrics span[b-tbik8jwpnk] { color:#6c757d; font-size:.8rem; }
.sku-filters[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sku-filters > input[b-tbik8jwpnk] { flex:1 1 220px; }
.sku-filters > select[b-tbik8jwpnk] { flex:0 1 180px; }
.sku-master[b-tbik8jwpnk] { flex:0 0 auto; overflow:auto; border:1px solid #dee2e6; border-radius:8px; background:#fff; }
.sku-grid[b-tbik8jwpnk] { width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem; }
.sku-grid th[b-tbik8jwpnk] { position:sticky; top:0; z-index:1; background:var(--bs-primary,#195cb7); color:#fff; text-align:left; white-space:nowrap; }
.sku-grid th[b-tbik8jwpnk],.sku-grid td[b-tbik8jwpnk] { padding:10px 12px; border-bottom:1px solid #e5e7eb; vertical-align:middle; }
.sku-grid td[b-tbik8jwpnk] { height:auto; }
.sku-grid small[b-tbik8jwpnk] { display:block; color:#6c757d; margin-top:3px; }
.sku-active td[b-tbik8jwpnk] { background:#fff4cc; }
.sku-detail-row > td[b-tbik8jwpnk] { padding:12px; background:#f4f7fb; }
.sku-grid[b-tbik8jwpnk] { min-width:1000px; }
.sku-grid th:first-child[b-tbik8jwpnk] { width:36px; }
.sku-grid th:nth-child(2)[b-tbik8jwpnk] { width:20%; }
.sku-grid th:nth-child(4)[b-tbik8jwpnk] { width:22%; }
.sku-quantity[b-tbik8jwpnk] { display:block; margin-top:5px; font-size:1.1rem; }
.sku-container-icons[b-tbik8jwpnk] { color:var(--bs-primary,#195cb7); }
.sku-stock-meter[b-tbik8jwpnk] { position:relative; height:10px; border-radius:6px; background:#e8edf5; border:1px solid #b8cbea; margin-top:8px; }
.sku-meter-track[b-tbik8jwpnk] { display:flex; height:100%; border-radius:5px; overflow:hidden; }
.sku-meter-fill[b-tbik8jwpnk] { display:block; height:100%; flex-shrink:0; background:var(--bs-primary,#195cb7); }
.sku-meter-pending[b-tbik8jwpnk] { display:block; height:100%; flex-shrink:0; background:repeating-linear-gradient(135deg,#86b7fe 0,#86b7fe 4px,#cfe2ff 4px,#cfe2ff 8px); }
.sku-meter-legend[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; gap:4px 12px; }
.sku-meter-legend small[b-tbik8jwpnk] { display:flex; align-items:center; gap:4px; }
.sku-legend-dot[b-tbik8jwpnk] { display:inline-block; width:9px; height:9px; border-radius:2px; flex-shrink:0; background-color:var(--bs-primary,#195cb7); }
.sku-fill-Below[b-tbik8jwpnk] { background:#f45c37; }.sku-fill-Near[b-tbik8jwpnk] { background:#e5ad18; }
.sku-rop-marker[b-tbik8jwpnk] { position:absolute; top:-5px; bottom:-5px; border-left:2px dashed #c78e00; transform:translateX(-1px); }
.sku-meter-labels[b-tbik8jwpnk] { display:flex; justify-content:space-between; color:#6c757d; font-size:.75rem; margin-top:4px; }
.sku-link[b-tbik8jwpnk],.sku-sort[b-tbik8jwpnk] { border:0; background:none; padding:0; text-align:left; color:var(--bs-primary,#195cb7); font-weight:600; }
.sku-sort[b-tbik8jwpnk] { color:inherit; }
.sku-status[b-tbik8jwpnk] { display:inline-block; border-radius:12px; padding:3px 8px; white-space:nowrap; background:#edf0f4; }
.sku-status-Below[b-tbik8jwpnk] { color:#b42318; background:#fee4e2; }.sku-status-Near[b-tbik8jwpnk] { color:#935d00; background:#fff2c6; }.sku-status-Ok[b-tbik8jwpnk] { color:#067647; background:#dcfae6; }
.sku-editor[b-tbik8jwpnk] { flex-shrink:0; background:#fff; border:1px solid #b8cbea; border-radius:8px; padding:16px; }
.sku-editor-fields[b-tbik8jwpnk] { display:flex; align-items:end; flex-wrap:wrap; gap:16px; }
.sku-editor label[b-tbik8jwpnk] { max-width:260px; }.sku-editor-fields label[b-tbik8jwpnk] { flex:1 1 150px; }
.sku-bulk-footer[b-tbik8jwpnk] { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px; background:white; border:1px solid #dee2e6; border-radius:8px; }
.sku-plan-line[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #e5e7eb; }
.alert[b-tbik8jwpnk] { white-space:pre-line; }
.sku-job-review[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:16px; }
.sku-job-product[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }.sku-job-product > strong[b-tbik8jwpnk] { font-size:1.25rem; }.sku-job-product > span[b-tbik8jwpnk] { color:#6c757d; }.sku-job-product p[b-tbik8jwpnk] { width:100%; margin:0; }
.sku-job-route[b-tbik8jwpnk] { display:flex; align-items:center; justify-content:center; gap:20px; color:var(--bs-primary,#195cb7); background:#edf4ff; border-radius:7px; padding:10px; font-weight:600; }
.sku-job-source[b-tbik8jwpnk] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:14px; border:1px solid #dee2e6; border-radius:7px; }.sku-job-source dt[b-tbik8jwpnk] { font-size:.8rem; font-weight:400; color:#6c757d; }.sku-job-source dd[b-tbik8jwpnk] { margin:3px 0 0; font-weight:600; overflow-wrap:anywhere; }
.sku-job-totals[b-tbik8jwpnk] { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.sku-job-totals > div[b-tbik8jwpnk] { padding:12px; border:1px solid #dee2e6; border-radius:7px; background:white; }.sku-job-totals span[b-tbik8jwpnk] { display:block; color:#6c757d; font-size:.8rem; }.sku-job-totals strong[b-tbik8jwpnk] { display:block; font-size:1.4rem; margin-top:5px; }.sku-job-totals .sku-job-limit[b-tbik8jwpnk] { background:#edf4ff; border-color:#b8cbea; color:var(--bs-primary,#195cb7); }
.sku-job-input[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:6px; }.sku-job-input label[b-tbik8jwpnk] { font-weight:600; }.sku-job-input input[b-tbik8jwpnk] { width:100%; max-width:280px; font-size:1.25rem; padding:10px 12px; }.sku-job-input small[b-tbik8jwpnk] { color:#6c757d; }
.sku-job-note[b-tbik8jwpnk] { margin:0; color:#6c757d; font-size:.85rem; }.sku-job-actions[b-tbik8jwpnk] { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding-top:14px; border-top:1px solid #dee2e6; }
.sku-batch-totals[b-tbik8jwpnk] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sku-batch-card[b-tbik8jwpnk] { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid #b8cbea; border-radius:8px; background:white; }
.sku-batch-summary[b-tbik8jwpnk],.sku-batch-heading[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }.sku-batch-summary[b-tbik8jwpnk] { padding:10px 12px; background:#edf4ff; border-radius:7px; }.sku-batch-heading > strong:last-child[b-tbik8jwpnk] { margin-left:auto; }.sku-batch-heading > span[b-tbik8jwpnk] { font-size:.8rem; color:#6c757d; }
.sku-batch-card .sku-job-source[b-tbik8jwpnk] { grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; border:0; gap:8px; }.sku-batch-card .sku-job-source dt[b-tbik8jwpnk] { font-size:.75rem; }.sku-batch-card .sku-job-source dd[b-tbik8jwpnk] { font-size:.8rem; }
@media(max-width:600px) { .sku-batch-card .sku-job-source[b-tbik8jwpnk] { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sku-batch-quantity[b-tbik8jwpnk] { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }.sku-batch-quantity span[b-tbik8jwpnk] { font-size:.85rem; color:#6c757d; }.sku-batch-quantity strong[b-tbik8jwpnk] { color:var(--bs-primary,#195cb7); font-size:1.1rem; }
@media(max-width:600px) { .sku-job-totals[b-tbik8jwpnk],.sku-job-source[b-tbik8jwpnk] { grid-template-columns:minmax(0,1fr); }.sku-job-input input[b-tbik8jwpnk] { max-width:none; } }
@media(max-width:1000px) { .sku-metrics[b-tbik8jwpnk] { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .sku-metrics[b-tbik8jwpnk] { grid-template-columns:repeat(2,minmax(0,1fr)); }.sku-replen-page[b-tbik8jwpnk] { padding:8px; } }
/* _content/WMS.UI/Pages/ProductManagements/StockAdjust/StockAdjustDesigner.razor.rz.scp.css */
.stock-adjust-page[b-2ridnszdet] {
    --sa-blue: #1463c6;
    --sa-blue-dark: #0c3f80;
    --sa-ink: #10233f;
    --sa-muted: #6e7f98;
    --sa-line: #d7e1ee;
    --sa-canvas: #f3f7fc;
    /* กินความสูงเท่าที่ layout ให้มาพอดี ไม่ดันหน้าให้ยาวจน footer ของ layout หลุดจอ */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 18px;
    color: var(--sa-ink);
    background: var(--sa-canvas);
    font-size: 14px;
}

/*
 * dialog ตรวจทานถูก render นอก .stock-adjust-page จึงไม่ได้รับมรดกตัวแปรสี
 * ถ้าไม่ประกาศซ้ำตรงนี้ var(--sa-blue) จะไม่มีค่า ปุ่มยืนยันจะกลายเป็นตัวหนังสือขาวบนพื้นขาว
 */
.stock-review-backdrop[b-2ridnszdet] {
    --sa-blue: #1463c6;
    --sa-blue-dark: #0c3f80;
    --sa-ink: #10233f;
    --sa-muted: #6e7f98;
    --sa-line: #d7e1ee;
    --sa-canvas: #f3f7fc;
}

.stock-adjust-hero[b-2ridnszdet],
.stock-adjust-stats[b-2ridnszdet],
.stock-adjust-alert[b-2ridnszdet],
.stock-filter-card[b-2ridnszdet],
.permission-note[b-2ridnszdet] {
    flex: 0 0 auto;
}

.stock-adjust-stats strong em[b-2ridnszdet] {
    color: var(--sa-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* ---- แผงตัวกรอง ---- */

.stock-filter-card[b-2ridnszdet] {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(35, 67, 105, .04);
}

.stock-filter-head[b-2ridnszdet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stock-filter-head > div:first-child[b-2ridnszdet] { min-width: 0; }
.stock-filter-head strong[b-2ridnszdet] { display: block; font-size: 13px; }
.stock-filter-head small[b-2ridnszdet] { display: block; margin-top: 2px; color: var(--sa-muted); font-size: 10px; }

.stock-filter-head-actions[b-2ridnszdet],
.stock-live-indicator[b-2ridnszdet],
.stock-last-updated[b-2ridnszdet] {
    display: flex;
    align-items: center;
}

.stock-filter-head-actions[b-2ridnszdet] { gap: 10px; }

.stock-last-updated[b-2ridnszdet] {
    gap: 5px;
    color: var(--sa-muted);
    font-size: 10px;
    white-space: nowrap;
}

.stock-last-updated i[b-2ridnszdet] { color: var(--sa-blue); }

.stock-live-indicator[b-2ridnszdet] {
    gap: 7px;
    min-height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    color: #07834e;
    background: #dff8e9;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.stock-live-indicator i[b-2ridnszdet] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #13a864;
}

.stock-filter-toggle[b-2ridnszdet] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sa-blue);
    font-size: 11px;
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 7px;
}

.stock-filter-toggle:hover[b-2ridnszdet] { background: #edf5ff; }

.stock-filter-grid[b-2ridnszdet] {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: 10px 12px;
}

/* จัดตัวกรองประเภทภาชนะให้อยู่ในสองแถวเดิมโดยไม่ขยายตาราง */
.stock-filter-grid > label:nth-child(1)[b-2ridnszdet],
.stock-filter-grid > label:nth-child(2)[b-2ridnszdet] { grid-column: span 3; }
.stock-filter-grid > label:nth-child(3)[b-2ridnszdet],
.stock-filter-grid > label:nth-child(4)[b-2ridnszdet],
.stock-filter-grid > label:nth-child(5)[b-2ridnszdet] { grid-column: span 2; }
.stock-filter-grid > label:nth-child(6)[b-2ridnszdet] { grid-column: span 3; }
.stock-filter-grid > .filter-range[b-2ridnszdet] { grid-column: span 4; }
.stock-filter-grid > label:nth-child(8)[b-2ridnszdet] { grid-column: span 2; }
.stock-filter-grid > .filter-actions[b-2ridnszdet] { grid-column: span 3; }

.stock-filter-grid label[b-2ridnszdet] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 4px;
}

.stock-filter-grid label > span[b-2ridnszdet] {
    color: var(--sa-ink);
    font-size: 11px;
    font-weight: 700;
}

.stock-filter-grid label > i[b-2ridnszdet] {
    position: absolute;
    left: 10px;
    bottom: 11px;
    color: #9db2cc;
    font-size: 11px;
    pointer-events: none;
}

.stock-filter-grid input[b-2ridnszdet],
.stock-filter-grid select[b-2ridnszdet] {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px 0 30px;
    color: var(--sa-ink);
    font: inherit;
    font-size: 12px;
    background: #fff;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
}

.stock-filter-grid select[b-2ridnszdet],
.stock-filter-grid input[type="date"][b-2ridnszdet] { padding-left: 10px; }

.stock-filter-grid input:focus[b-2ridnszdet],
.stock-filter-grid select:focus[b-2ridnszdet] {
    outline: none;
    border-color: var(--sa-blue);
    box-shadow: 0 0 0 3px rgba(20, 99, 198, .12);
}

.filter-range[b-2ridnszdet] {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
}

.filter-range > span[b-2ridnszdet] { grid-column: 1 / -1; }
.filter-range b[b-2ridnszdet] { color: var(--sa-muted); }

.filter-actions[b-2ridnszdet] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.filter-actions .btn-filter[b-2ridnszdet] {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 750;
}

.filter-actions .btn-filter.is-primary[b-2ridnszdet] { background: #1768c5; border-color: #1768c5; }

.stock-adjust-page *[b-2ridnszdet],
.stock-adjust-page *[b-2ridnszdet]::before,
.stock-adjust-page *[b-2ridnszdet]::after,
.stock-review-backdrop *[b-2ridnszdet],
.stock-review-backdrop *[b-2ridnszdet]::before,
.stock-review-backdrop *[b-2ridnszdet]::after {
    box-sizing: border-box;
}

.stock-adjust-hero[b-2ridnszdet] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 8px;
}

.stock-adjust-hero h1[b-2ridnszdet] {
    margin: 0;
    color: #0a1d38;
    font-size: clamp(22px, 1.75vw, 30px);
    font-weight: 800;
    line-height: 1.15;
}

.stock-adjust-hero p[b-2ridnszdet] {
    margin: 3px 0 0;
    color: var(--sa-muted);
}

.stock-adjust-hero-actions[b-2ridnszdet],
.stock-adjust-hero-actions button[b-2ridnszdet] {
    display: flex;
    align-items: center;
}

.stock-adjust-hero-actions[b-2ridnszdet] {
    gap: 10px;
}

.stock-refresh-button[b-2ridnszdet] {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    color: #1c2b49;
    background: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 44, 88, .06);
    cursor: pointer;
}

.stock-refresh-button:hover:not(:disabled)[b-2ridnszdet] {
    color: var(--sa-blue);
    border-color: var(--sa-blue);
}

.live-pill[b-2ridnszdet] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #bde9d2;
    border-radius: 999px;
    color: #087746;
    background: #ecfbf3;
    font-size: 11px;
    font-weight: 800;
}

.live-pill span[b-2ridnszdet] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #12a663;
    box-shadow: 0 0 0 4px rgba(18, 166, 99, .12);
}

.btn-secondary[b-2ridnszdet],
.btn-filter[b-2ridnszdet],
.clear-button[b-2ridnszdet],
.review-button[b-2ridnszdet],
.save-button[b-2ridnszdet],
.remove-draft-button[b-2ridnszdet] {
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-secondary[b-2ridnszdet] {
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    color: #36516f;
    background: #fff;
}

.btn-secondary:hover:not(:disabled)[b-2ridnszdet] {
    border-color: #91abd0;
    color: var(--sa-blue);
    background: #f7faff;
}

.stock-adjust-stats[b-2ridnszdet] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.stock-adjust-stats article[b-2ridnszdet] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 66px;
    padding: 10px 14px;
    border: 1px solid var(--sa-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(35, 67, 105, .04);
}

.stock-adjust-stats article > div[b-2ridnszdet] {
    min-width: 0;
}

.stat-icon[b-2ridnszdet] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
}

.stat-icon.blue[b-2ridnszdet] { color: #1a64ce; background: #e8f1ff; }
.stat-icon.cyan[b-2ridnszdet] { color: #0089a9; background: #e3f8fc; }
.stat-icon.violet[b-2ridnszdet] { color: #6c4fd4; background: #f0ebff; }
.stat-icon.neutral[b-2ridnszdet] { color: #61748e; background: #eef2f7; }
.stat-icon.green[b-2ridnszdet] { color: #07834e; background: #e5f8ee; }
.stat-icon.red[b-2ridnszdet] { color: #d53c4c; background: #fff0f1; }

.stock-adjust-stats small[b-2ridnszdet],
.review-summary small[b-2ridnszdet] {
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    color: var(--sa-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-adjust-stats strong[b-2ridnszdet] {
    display: block;
    font-size: 19px;
    line-height: 1.1;
}

.positive[b-2ridnszdet] { color: #07834e !important; }
.negative[b-2ridnszdet] { color: #d53c4c !important; }

.stock-adjust-alert[b-2ridnszdet] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
    border: 1px solid #f3bbc1;
    border-radius: 10px;
    color: #a92233;
    background: #fff5f6;
}

.stock-adjust-alert span[b-2ridnszdet] { flex: 1; }
.stock-adjust-alert button[b-2ridnszdet],
.adjustment-card-top button[b-2ridnszdet],
.stock-review-dialog > header button[b-2ridnszdet] {
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.stock-adjust-workspace[b-2ridnszdet] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.stock-adjust-workspace > .stock-panel[b-2ridnszdet] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.stock-table-card[b-2ridnszdet] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--sa-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(35, 67, 105, .05);
}

/* ตัว Table ของ BootstrapBlazor ต้องได้ความสูงเต็มการ์ด แล้วให้ body ของมันเลื่อนเอง */
.stock-table-card[b-2ridnszdet]  .table-container {
    flex: 1 1 auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
}

.stock-table-card[b-2ridnszdet]  .table-wrapper tbody tr:hover { background: #eff6ff; }

.stock-table-card[b-2ridnszdet]  thead th {
    height: 55px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.25;
}

.stock-table-card[b-2ridnszdet]  thead th .table-cell,
.stock-table-card[b-2ridnszdet]  thead th .table-text {
    min-height: 1.65em;
    line-height: 1.5;
    overflow: visible;
}

.stock-table-card[b-2ridnszdet]  tbody td {
    height: 45px;
    padding: 4px 8px;
    vertical-align: middle;
}

.stock-row-actions[b-2ridnszdet] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.stock-icon-action[b-2ridnszdet]  button {
    width: 31px;
    height: 31px;
    min-height: 31px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bcd3ed;
    border-radius: 8px;
    color: #1768c5;
    background: #fff;
    box-shadow: none;
}

.stock-icon-action[b-2ridnszdet]  button i { margin: 0; }
.stock-icon-action.add-action[b-2ridnszdet]  button { border-color: #79ade8; background: #edf6ff; }
.stock-icon-action.delete-action[b-2ridnszdet]  button { color: #dc2626; border-color: #fecaca; background: #fff7f7; }
.stock-icon-action[b-2ridnszdet]  button:hover:not(:disabled) { filter: brightness(.96); }

/* แถวที่เข้าคิวปรับยอดแล้ว — ต้องเห็นได้แม้เลื่อนตารางไปทางขวาจนคอลัมน์แรกหลุดจอ */
.stock-table-card[b-2ridnszdet]  tr.row-queued > td {
    background: #eaf3ff;
}

.stock-table-card[b-2ridnszdet]  tr.row-queued > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--sa-blue);
}

.stock-table-card[b-2ridnszdet]  tr.row-queued:hover > td { background: #ddebfd; }

.stock-table-card[b-2ridnszdet]  tr.row-adjusted > td { background: #fff4df; }
.stock-table-card[b-2ridnszdet]  tr.row-adjusted:hover > td { background: #ffebc2; }
.stock-table-card[b-2ridnszdet]  tr.row-adjusted > td:first-child { box-shadow: inset 3px 0 #d97706; }
.stock-icon-action.is-adjusted[b-2ridnszdet]  button { color: #a65b00; background: #fff4df; border-color: #efbc6b; }

.cell-stack[b-2ridnszdet] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    line-height: 1.35;
}

.stock-product-cell[b-2ridnszdet] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.stock-product-icon[b-2ridnszdet] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    color: #315a88;
    background: #edf4fc;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.stock-product-icon i[b-2ridnszdet] { font-size: 11px; }

/* ข้อความยาวต้องตัดด้วย … ไม่งั้นทะลุไปทับคอลัมน์ถัดไป */
.cell-stack strong[b-2ridnszdet],
.cell-stack small[b-2ridnszdet],
.cell-location[b-2ridnszdet],
.cell-identity[b-2ridnszdet],
.cell-lot[b-2ridnszdet] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell-stack strong[b-2ridnszdet] { color: #084f98; font-size: 12px; font-weight: 800; }

.cell-stack small[b-2ridnszdet],
.cell-location[b-2ridnszdet] {
    color: var(--sa-muted);
    font-size: 10px;
}

.cell-location i[b-2ridnszdet] { margin-right: 3px; color: #7391b4; }

.cell-location[b-2ridnszdet],
.cell-identity[b-2ridnszdet] {
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    color: #304f72;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
}

.cell-location i[b-2ridnszdet],
.cell-identity i[b-2ridnszdet] { color: #1768c5; }

.cell-muted[b-2ridnszdet] { color: #7b8ca2; }
.cell-lot[b-2ridnszdet] { color: #183b65; font-weight: 700; }

.storage-badge[b-2ridnszdet],
.unit-badge[b-2ridnszdet] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    color: #31506f;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.dock-chips button.is-active[b-2ridnszdet] {
    color: #fff;
    background: var(--sa-blue);
    border-color: var(--sa-blue);
}

.dock-chips button.is-active b[b-2ridnszdet] { color: #fff; }

/* ---- drawer ขวามือ ---- */

.stock-drawer-backdrop[b-2ridnszdet] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
    background: rgba(16, 35, 63, .38);
    backdrop-filter: blur(2px);
}

.stock-drawer[b-2ridnszdet] {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--sa-canvas);
    border-left: 1px solid var(--sa-line);
    box-shadow: -12px 0 34px rgba(16, 35, 63, .22);
}

.stock-drawer-header[b-2ridnszdet] {
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid var(--sa-line);
}

.stock-drawer-title[b-2ridnszdet] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.stock-drawer-title > span[b-2ridnszdet] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--sa-blue);
    background: #e8f1ff;
    border-radius: 10px;
}

.stock-drawer-title small[b-2ridnszdet] {
    color: var(--sa-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
}

.stock-drawer-title h2[b-2ridnszdet] {
    margin: 1px 0 0;
    color: var(--sa-ink);
    font-size: 17px;
    font-weight: 800;
}

.stock-drawer-title p[b-2ridnszdet] {
    margin: 2px 0 0;
    color: var(--sa-muted);
    font-size: 11px;
}

.stock-drawer-header > button[b-2ridnszdet] {
    width: 30px;
    height: 30px;
    color: var(--sa-muted);
    background: #eef2f7;
    border: none;
    border-radius: 9px;
    cursor: pointer;
}

.stock-drawer-header > button:hover[b-2ridnszdet],
.stock-review-dialog > header button:hover:not(:disabled)[b-2ridnszdet] {
    color: var(--sa-blue);
    background: #e8f1ff;
}

.stock-drawer-body[b-2ridnszdet] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 14px 16px;
    gap: 10px;
    overflow: hidden;
}

/* ข้อมูลอ้างอิงกับตัวแก้ยอดตรึงอยู่กับที่ — เหลือแค่รายการ S/N ที่เลื่อนได้ */
.stock-drawer-body > .stock-context[b-2ridnszdet],
.stock-drawer-body > .quantity-editor[b-2ridnszdet],
.stock-drawer-body > .field-error[b-2ridnszdet],
.stock-drawer-body > .stock-serial-block[b-2ridnszdet] {
    flex: 0 0 auto;
}

.stock-drawer-body > .stock-serials[b-2ridnszdet] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.stock-drawer-body > .stock-serials > .stock-serial-list[b-2ridnszdet] {
    flex: 1 1 auto;
    min-height: 90px;
    max-height: none;
}

.stock-drawer-body > .quantity-editor[b-2ridnszdet] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--sa-line);
}

.stock-drawer-footer[b-2ridnszdet] {
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border-top: 1px solid var(--sa-line);
}

.remove-draft-button[b-2ridnszdet] {
    color: #d53c4c;
    font-weight: 700;
    background: #fff0f1;
    border: 1px solid #f3c2c8;
}

.remove-draft-button:hover:not(:disabled)[b-2ridnszdet],
.clear-button:hover:not(:disabled)[b-2ridnszdet] {
    color: #b42334;
    background: #ffe7ea;
    border-color: #eaa4ad;
}

/* drawer กว้างกว่าเดิมมาก — serial chips เรียงได้สบายขึ้น */


.stock-drawer .stock-context[b-2ridnszdet] {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ---- โซน S/N ใน drawer อ่านง่ายขึ้น ---- */

.stock-drawer .stock-context span[b-2ridnszdet] { font-size: 12px; }
.stock-drawer .stock-context b[b-2ridnszdet] { font-size: 9px; }

.stock-drawer .stock-serials-heading[b-2ridnszdet],
.stock-drawer .stock-serials-heading strong[b-2ridnszdet] { font-size: 11px; }

.stock-drawer .serial-mode-switch button[b-2ridnszdet] {
    padding: 8px 10px;
    font-size: 12px;
}

.stock-drawer .serial-search[b-2ridnszdet] {
    height: 38px;
    padding: 0 12px;
    font-size: 13px;
}

.stock-drawer .stock-serial-list[b-2ridnszdet] {
    gap: 7px;
}

.stock-drawer .stock-serial-list button[b-2ridnszdet],
.stock-drawer .stock-serial-list span[b-2ridnszdet] {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 8px;
}

.stock-drawer .serial-foot[b-2ridnszdet],
.stock-drawer .serial-foot button[b-2ridnszdet] { font-size: 11px; }
.stock-drawer .serial-scan-error[b-2ridnszdet] { font-size: 11px; }

.stock-drawer .quantity-editor small[b-2ridnszdet] { font-size: 11px; }
.stock-drawer .quantity-editor strong[b-2ridnszdet] { font-size: 20px; }
.stock-drawer .quantity-editor input[b-2ridnszdet] { height: 42px; font-size: 16px; }

.panel-heading > div[b-2ridnszdet],
.stock-review-dialog > header > div[b-2ridnszdet] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.panel-heading h2[b-2ridnszdet],
.stock-review-dialog h2[b-2ridnszdet] {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
}

.btn-filter.is-primary[b-2ridnszdet] {
    color: #fff;
    background: var(--sa-blue);
    border-color: var(--sa-blue);
}

.search-field input[b-2ridnszdet],
.stock-search-bar select[b-2ridnszdet],
.quantity-editor input[b-2ridnszdet],
.remark-field textarea[b-2ridnszdet] {
    width: 100%;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    color: var(--sa-ink);
    background: #fff;
    outline: 0;
}

.search-field input:focus[b-2ridnszdet],
.stock-search-bar select:focus[b-2ridnszdet],
.quantity-editor input:focus[b-2ridnszdet],
.remark-field textarea:focus[b-2ridnszdet] {
    border-color: #5693df;
    box-shadow: 0 0 0 3px rgba(20, 99, 198, .1);
}

.btn-filter[b-2ridnszdet] {
    display: inline-flex;
    min-height: 36px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    color: #506985;
    background: #fff;
}

.btn-filter:hover:not(:disabled)[b-2ridnszdet] {
    color: var(--sa-blue);
    background: #f3f8ff;
    border-color: #8eb6e8;
}

.btn-filter.is-primary:hover:not(:disabled)[b-2ridnszdet] {
    color: #fff;
    background: var(--sa-blue-dark);
    border-color: var(--sa-blue-dark);
}

button:disabled[b-2ridnszdet] {
    cursor: not-allowed !important;
    opacity: .48;
}

.stock-table[b-2ridnszdet],
.review-table[b-2ridnszdet] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.stock-table td strong[b-2ridnszdet],
.stock-table td small[b-2ridnszdet],
.review-table td strong[b-2ridnszdet],
.review-table td small[b-2ridnszdet] {
    display: block;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-table td small[b-2ridnszdet],
.review-table td small[b-2ridnszdet] { margin-top: 3px; color: var(--sa-muted); font-size: 10px; }
.qty-chip[b-2ridnszdet] {
    display: inline-block;
    min-width: 50px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #047857;
    background: #dff7eb;
    font-weight: 800;
    text-align: center;
}

.add-row-button[b-2ridnszdet] {
    display: inline-grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--sa-blue);
    cursor: pointer;
}

.add-row-button:hover:not(:disabled)[b-2ridnszdet] { background: var(--sa-blue-dark); transform: translateY(-1px); }

.clear-button[b-2ridnszdet] {
    border: 1px solid #f0c5ca;
    color: #ba2a3c;
    background: #fff6f7;
}

.stock-context[b-2ridnszdet] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px 0;
    padding: 8px 0;
    gap: 6px;
    border-top: 1px dashed #dfe7f1;
    border-bottom: 1px dashed #dfe7f1;
    color: #59718c;
    font-size: 10px;
}
.stock-context span[b-2ridnszdet] {
    min-width: 0;
    padding: 6px 7px;
    overflow: hidden;
    border-radius: 7px;
    background: #f3f7fc;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stock-context b[b-2ridnszdet] {
    display: block;
    margin-bottom: 1px;
    color: #7890ab;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.stock-context .stock-remark[b-2ridnszdet] {
    grid-column: 1 / -1;
    white-space: normal;
}

.stock-serials[b-2ridnszdet] {
    margin-top: 7px;
    padding: 7px 9px;
    border: 1px solid var(--sa-line);
    border-radius: 8px;
    background: #fbfdff;
}

.stock-serials-heading[b-2ridnszdet] {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #7890ab;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .03em;
}

.stock-serials-heading i[b-2ridnszdet] {
    margin-right: 4px;
    color: var(--sa-blue);
}

.stock-serials-heading strong[b-2ridnszdet] {
    color: var(--sa-blue);
    font-size: 9px;
    white-space: nowrap;
}

.stock-serial-list[b-2ridnszdet] {
    max-height: 60px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.serial-mode-switch[b-2ridnszdet] {
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.serial-mode-switch button[b-2ridnszdet] {
    padding: 5px 8px;
    color: var(--sa-muted);
    font-size: 10px;
    font-weight: 700;
    background: #eef3fa;
    border: 1px solid var(--sa-line);
    border-radius: 7px;
}

.serial-mode-switch button.is-active[b-2ridnszdet] {
    color: #fff;
    background: var(--sa-blue);
    border-color: var(--sa-blue);
}

.serial-search[b-2ridnszdet] {
    width: 100%;
    margin-bottom: 6px;
    padding: 5px 8px;
    font-size: 10px;
    border: 1px solid var(--sa-line);
    border-radius: 7px;
}

.stock-serial-list button[b-2ridnszdet] {
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    color: #24496f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #e8f2ff;
    border: 1px solid #cfe2fa;
    border-radius: 6px;
}

.stock-serial-list button.is-selected[b-2ridnszdet] {
    color: #fff;
    background: var(--sa-blue);
    border-color: var(--sa-blue);
}

.review-serials[b-2ridnszdet] {
    color: var(--sa-blue) !important;
    font-weight: 700;
    white-space: normal !important;
}

.serial-scan-error[b-2ridnszdet] {
    margin-bottom: 6px;
    color: #d53c4c;
    font-size: 9px;
    font-weight: 700;
}

.serial-foot[b-2ridnszdet] {
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--sa-muted);
    font-size: 9px;
}

.serial-foot button[b-2ridnszdet] {
    color: var(--sa-blue);
    font-size: 9px;
    font-weight: 700;
    background: none;
    border: none;
}

.stock-serial-block[b-2ridnszdet] {
    margin-top: 7px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: #8a3a44;
    font-size: 10px;
    line-height: 1.45;
    background: #fff1f2;
    border: 1px solid #f3c2c8;
    border-radius: 8px;
}

.stock-serial-block b[b-2ridnszdet] {
    color: #d53c4c;
    font-size: 10px;
}

.stock-serial-block strong[b-2ridnszdet] {
    color: #d53c4c;
}

.stock-serial-causes[b-2ridnszdet] {
    margin: 2px 0 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-serial-causes li[b-2ridnszdet] {
    list-style: disc;
}

.stock-serial-causes b[b-2ridnszdet] {
    font-size: inherit;
}

.stock-serial-list span[b-2ridnszdet] {
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    color: #24496f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #e8f2ff;
    border: 1px solid #cfe2fa;
    border-radius: 6px;
}

.quantity-editor[b-2ridnszdet] {
    display: grid;
    grid-template-columns: minmax(52px, .7fr) auto minmax(80px, 1fr) minmax(65px, .8fr);
    align-items: end;
    gap: 9px;
}
.quantity-editor > i[b-2ridnszdet] { padding-bottom: 11px; color: #9aabc0; }
.quantity-editor small[b-2ridnszdet] { display: block; margin-bottom: 4px; color: var(--sa-muted); font-size: 9px; }
.quantity-editor strong[b-2ridnszdet] { font-size: 17px; }
.quantity-editor input[b-2ridnszdet] { height: 38px; padding: 0 9px; font-size: 15px; font-weight: 800; }
.difference[b-2ridnszdet] { padding: 7px 8px; border-radius: 8px; color: #546b85; background: #eef2f7; text-align: right; }
.difference.up[b-2ridnszdet] { color: #087746; background: #e8f8ef; }
.difference.down[b-2ridnszdet] { color: #c83243; background: #fff0f1; }
.difference small[b-2ridnszdet] { margin: 0; }
.difference strong[b-2ridnszdet] { font-size: 14px; }

.field-error[b-2ridnszdet] { margin-top: 8px; color: #c83243; font-size: 10px; }

.review-button[b-2ridnszdet],
.save-button[b-2ridnszdet] {
    min-height: 38px;
    padding: 0 16px;
    color: #fff;
    background: var(--sa-blue);
    box-shadow: 0 3px 8px rgba(20, 99, 198, .16);
}
.review-button:hover:not(:disabled)[b-2ridnszdet],
.save-button:hover:not(:disabled)[b-2ridnszdet] { background: var(--sa-blue-dark); }

.permission-note[b-2ridnszdet] {
    margin-top: 12px;
    padding: 10px 13px;
    border: 1px solid #ead9a6;
    border-radius: 10px;
    color: #7c6220;
    background: #fffbea;
    font-size: 11px;
}
.permission-note i[b-2ridnszdet] { margin-right: 5px; }

.stock-review-backdrop[b-2ridnszdet] {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: grid;
    padding: 24px;
    place-items: center;
    overflow: auto;
    background: rgba(10, 27, 51, .55);
    backdrop-filter: blur(3px);
}

.stock-review-dialog[b-2ridnszdet] {
    width: min(900px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid rgba(215, 225, 238, .9);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 20, 50, .28);
}

.stock-review-dialog > header[b-2ridnszdet],
.stock-review-dialog > footer[b-2ridnszdet] {
    display: flex;
    padding: 14px 18px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.stock-review-dialog > header[b-2ridnszdet] { border-bottom: 1px solid var(--sa-line); }
.stock-review-dialog > header small[b-2ridnszdet] { display: block; color: var(--sa-blue); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.stock-review-dialog > header button[b-2ridnszdet] { color: #6b7c91; font-size: 18px; }
.stock-review-dialog > footer[b-2ridnszdet] { border-top: 1px solid var(--sa-line); }

.review-body[b-2ridnszdet] {
    max-height: calc(100dvh - 190px);
    padding: 16px 18px;
    overflow: auto;
    background: var(--sa-canvas);
}

.review-summary[b-2ridnszdet] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.review-summary > div[b-2ridnszdet] {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--sa-line);
    border-radius: 9px;
    background: #fff;
}
.review-summary strong[b-2ridnszdet] { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.review-table-shell[b-2ridnszdet] {
    margin-bottom: 12px;
    overflow: auto;
    border: 1px solid var(--sa-line);
    border-radius: 9px;
    background: #fff;
}
.review-table[b-2ridnszdet] { min-width: 650px; table-layout: fixed; }
.review-table th:first-child[b-2ridnszdet] { width: 32%; }
.review-table th:nth-child(2)[b-2ridnszdet] { width: 41%; }
.review-table th:nth-last-child(-n+3)[b-2ridnszdet] { width: 9%; }
.review-extra[b-2ridnszdet] { margin-top: 4px; }
.review-extra summary[b-2ridnszdet] { color: #1768c5; font-size: 10px; cursor: pointer; }
.review-table td strong[b-2ridnszdet],
.review-table td small[b-2ridnszdet] { max-width: none; white-space: normal; overflow-wrap: anywhere; }
.review-edit-hint[b-2ridnszdet] { margin: 0; padding: 8px 11px; font-size: 11px; color: var(--sa-muted); }
.review-edit-row[b-2ridnszdet] { cursor: pointer; }
.review-edit-row:hover[b-2ridnszdet] { background: #edf5ff; }
.review-edit-row.is-adjusted[b-2ridnszdet] { background: #fff8eb; }
.review-edit-row.is-adjusted:hover[b-2ridnszdet] { background: #ffefd2; }
.review-edit-link[b-2ridnszdet] { padding: 0; border: 0; background: transparent; color: #1768c5; font: inherit; font-weight: 700; text-align: left; }
.review-edit-link i[b-2ridnszdet] { margin-right: 4px; }
.review-table td[b-2ridnszdet] { vertical-align: top; line-height: 1.4; }
.review-table td small[b-2ridnszdet] { line-height: 1.4; }
.review-table th[b-2ridnszdet] { padding: 10px 11px; color: #fff; background: var(--sa-blue); font-size: 10px; line-height: 1.5; text-align: left; white-space: nowrap; }
.review-table td[b-2ridnszdet] { padding: 8px 11px; border-top: 1px solid #e6edf5; font-size: 11px; }
.review-table td:nth-last-child(-n+3)[b-2ridnszdet],
.review-table th:nth-last-child(-n+3)[b-2ridnszdet] { text-align: right; }

.upper-system-toggle[b-2ridnszdet] {
    display: flex;
    margin-bottom: 12px;
    padding: 11px 12px;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--sa-line);
    border-radius: 10px;
    background: #fff;
}
.upper-system-toggle input[b-2ridnszdet] { margin-top: 4px; accent-color: var(--sa-blue); }
.upper-system-toggle strong[b-2ridnszdet],
.upper-system-toggle small[b-2ridnszdet] { display: block; }
.upper-system-toggle strong[b-2ridnszdet] { font-size: 12px; }
.upper-system-toggle small[b-2ridnszdet] { color: var(--sa-muted); font-size: 10px; }

/* label เป็น inline โดยธรรมชาติ ทำให้ width:100% ของ textarea ยุบตามเนื้อหา ต้องบังคับเป็น block */
.remark-field[b-2ridnszdet] { display: block; width: 100%; }
.remark-field > span[b-2ridnszdet] { display: block; margin-bottom: 5px; color: #4f6680; font-size: 11px; font-weight: 700; }
.remark-field textarea[b-2ridnszdet] { min-height: 96px; padding: 10px 11px; font-size: 13px; resize: vertical; }


@media (max-width: 1199.98px) {
    .stock-adjust-page[b-2ridnszdet] { padding: 16px; }
    .stock-context[b-2ridnszdet] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .stock-adjust-stats[b-2ridnszdet] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-filter-head[b-2ridnszdet] { align-items: flex-start; }
    .stock-filter-head-actions[b-2ridnszdet] { flex-wrap: wrap; justify-content: flex-end; }
    .stock-filter-grid[b-2ridnszdet] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stock-filter-grid > label:nth-child(n)[b-2ridnszdet],
    .stock-filter-grid > .filter-range[b-2ridnszdet],
    .stock-filter-grid > .filter-actions[b-2ridnszdet] { grid-column: auto; }
}

@media (max-width: 575.98px) {
    .stock-adjust-page[b-2ridnszdet] { padding: 12px; }
    .stock-adjust-hero[b-2ridnszdet] { align-items: stretch; flex-direction: column; }
    .stock-adjust-hero-actions[b-2ridnszdet] { justify-content: space-between; }
    .stock-refresh-button[b-2ridnszdet] { width: 100%; }
    .stock-filter-head[b-2ridnszdet] { align-items: stretch; flex-direction: column; }
    .stock-filter-head-actions[b-2ridnszdet] { justify-content: space-between; }
    .stock-last-updated[b-2ridnszdet] { order: 2; width: 100%; }
    .stock-adjust-stats[b-2ridnszdet] { grid-template-columns: 1fr; gap: 8px; }
    .stock-filter-grid[b-2ridnszdet] { grid-template-columns: 1fr; }
    .stock-adjust-stats article[b-2ridnszdet] { min-height: 70px; padding: 10px; }
    .stat-icon[b-2ridnszdet] { flex-basis: 34px; width: 34px; height: 34px; }
    .stock-adjust-stats strong[b-2ridnszdet] { font-size: 17px; }
    .quantity-editor[b-2ridnszdet] { grid-template-columns: 1fr auto 1.2fr; }
    .quantity-editor .difference[b-2ridnszdet] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    .stock-context[b-2ridnszdet] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-button[b-2ridnszdet] { width: 100%; }
    .stock-review-backdrop[b-2ridnszdet] { padding: 0; place-items: stretch; }
    .stock-review-dialog[b-2ridnszdet] { width: 100%; min-height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .review-body[b-2ridnszdet] { max-height: calc(100dvh - 146px); }
    .review-summary[b-2ridnszdet] { grid-template-columns: 1fr 1fr; }
    .stock-review-dialog > footer[b-2ridnszdet] { align-items: stretch; flex-direction: column-reverse; }
    .stock-review-dialog > footer button[b-2ridnszdet] { width: 100%; }
}

.stock-result-head[b-2ridnszdet] {
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--sa-line);
}

.stock-result-head > div:first-child[b-2ridnszdet] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-head-actions[b-2ridnszdet] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.queue-pill[b-2ridnszdet] {
    padding: 5px 11px;
    color: #36516f;
    font-size: 11px;
    background: #eef3fa;
    border: 1px solid var(--sa-line);
    border-radius: 999px;
}

.queue-pill b[b-2ridnszdet] { color: var(--sa-ink); }

/* badge จำนวนรายการแบบหน้าเก่า — เทาตอนว่าง แดงเมื่อมีรายการรออยู่ */
.queue-badge[b-2ridnszdet] {
    min-width: 20px;
    height: 20px;
    margin: 0 2px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6e7f98 !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    background: #e3e9f1;
    border-radius: 999px;
}

.queue-badge.is-active[b-2ridnszdet] {
    color: #fff !important;
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .14);
}

.stock-result-head strong[b-2ridnszdet] {
    color: var(--sa-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.stock-result-head .result-count[b-2ridnszdet] {
    padding: 3px 9px;
    color: #36516f;
    font-size: 10px;
    font-weight: 700;
    background: #edf3fa;
    border-radius: 999px;
}

@media (max-width: 575.98px) {
    .stock-result-head[b-2ridnszdet] {
        align-items: stretch;
        flex-direction: column;
    }

    .result-head-actions[b-2ridnszdet] {
        width: 100%;
        flex-wrap: wrap;
    }

    .queue-pill[b-2ridnszdet] { flex: 1 1 100%; }
    .result-head-actions .clear-button[b-2ridnszdet],
    .result-head-actions .review-button[b-2ridnszdet] { flex: 1 1 auto; width: auto; }
}

/* _content/WMS.UI/Pages/Reports/CallUpperSystemException.razor.rz.scp.css */
[b-gn59l2li1t] .api-exception-transition { display: block; height: 100%; }

.api-exception-page[b-gn59l2li1t] {
    --container-primary: #2563eb;
    --container-border: #dce5f0;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    overflow-x: hidden;
    background: #f4f7fb;
}

.exception-hero[b-gn59l2li1t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0px;
}

.exception-eyebrow[b-gn59l2li1t] {
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.exception-hero h1[b-gn59l2li1t] {
    margin: 4px 0 3px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 800;
}

.exception-hero p[b-gn59l2li1t] {
    margin: 0;
    color: #66758f;
    font-size: 13px;
}

.exception-button[b-gn59l2li1t] {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.button-primary[b-gn59l2li1t] {
    color: #fff;
    background: #1768c5;
    border: 1px solid #1768c5;
    box-shadow: 0 5px 12px rgba(23, 104, 197, .17);
}

.button-primary:hover[b-gn59l2li1t] { background: #1258a9; }
.button-secondary[b-gn59l2li1t], .button-ghost[b-gn59l2li1t] {
    color: #334155;
    background: #fff;
    border: 1px solid #cfd9e6;
}
.button-secondary:hover[b-gn59l2li1t], .button-ghost:hover[b-gn59l2li1t] { color: #1768c5; border-color: #72a8e4; background: #f8fbff; }

.exception-summary[b-gn59l2li1t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-bottom: 0px;
}

.summary-card[b-gn59l2li1t] {
    min-width: 0;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgba(30, 64, 120, .045);
}

.summary-icon[b-gn59l2li1t] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 17px;
}

.summary-content[b-gn59l2li1t] { min-width: 0; display: grid; }
.summary-content small[b-gn59l2li1t] { color: #66758f; font-size: 11px; font-style: normal; }
.summary-content strong[b-gn59l2li1t] { color: #12213f; font-size: 23px; line-height: 1.15; }
.summary-content em[b-gn59l2li1t] { overflow: hidden; color: #8996aa; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.summary-total .summary-icon[b-gn59l2li1t] { color: #1768c5; background: #e5f0ff; }
.summary-error .summary-icon[b-gn59l2li1t] { color: #dc2626; background: #fee8e8; }
.summary-pending .summary-icon[b-gn59l2li1t] { color: #c47a08; background: #fff1d6; }
.summary-success .summary-icon[b-gn59l2li1t] { color: #078447; background: #dcf8e8; }

.exception-workspace[b-gn59l2li1t] {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 12px;
    box-shadow: 0 7px 22px rgba(25, 57, 105, .055);
}

.exception-list-heading[b-gn59l2li1t] {
    display: flex;
    min-height: 58px;
    padding: 10px 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #dce5f0;
    background: #fff;
}

.exception-list-heading h2[b-gn59l2li1t] {
    margin: 0;
    color: #12213f;
    font-size: 16px;
    font-weight: 800;
}

.exception-list-heading p[b-gn59l2li1t] {
    margin: 2px 0 0;
    color: #718096;
    font-size: 10px;
}

.exception-list-heading > span[b-gn59l2li1t] {
    display: inline-flex;
    padding: 5px 9px;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #087949;
    background: #e4f9ef;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.exception-list-heading > span i[b-gn59l2li1t] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10a562;
}

.exception-toolbar[b-gn59l2li1t] {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px) auto auto;
    gap: 9px;
    flex: 0 0 auto;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

.search-control[b-gn59l2li1t], .select-control[b-gn59l2li1t] {
    position: relative;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #728198;
    background: #fff;
    border: 1px solid #cfd9e6;
    border-radius: 8px;
}

.search-control:focus-within[b-gn59l2li1t], .select-control:focus-within[b-gn59l2li1t] {
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .11);
}

.search-control input[b-gn59l2li1t], .select-control select[b-gn59l2li1t] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #334155;
    font: inherit;
    font-size: 12px;
    background: transparent;
    border: 0;
    outline: 0;
}

.select-control select[b-gn59l2li1t] { padding-right: 18px; appearance: none; cursor: pointer; }
.select-chevron[b-gn59l2li1t] { position: absolute; right: 12px; font-size: 9px; pointer-events: none; }

.exception-table-shell[b-gn59l2li1t] {
    min-width: 0;
    min-height: 440px;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    padding: 8px 8px 5px 8px;
}

[b-gn59l2li1t] .exception-table-shell .table-container,
[b-gn59l2li1t] .exception-table-shell .table-wrapper { max-width: 100%; }
[b-gn59l2li1t] .exception-table-shell .table-wrapper { overflow: auto; }
[b-gn59l2li1t] .exception-table-shell table { min-width: 1160px; font-size: 11px; }
[b-gn59l2li1t] .exception-table-shell thead th {
    height: 38px;
    padding: 6px 8px;
    color: #fff !important;
    font-size: 10px;
    background: #1f65bb !important;
    border-color: rgba(255,255,255,.12) !important;
    vertical-align: middle;
}
[b-gn59l2li1t] .exception-table-shell tbody td {
    height: 44px;
    padding: 6px 8px;
    color: #35445e;
    border-color: #e4eaf2 !important;
    vertical-align: middle;
}
[b-gn59l2li1t] .exception-table-shell tbody tr:hover td { background: #f5f9ff; }
[b-gn59l2li1t] .exception-table-shell .table-footer { min-height: 43px; font-size: 11px; }

.method-cell[b-gn59l2li1t] { min-width: 0; display: flex; align-items: center; gap: 9px; }
.method-icon[b-gn59l2li1t] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: #1768c5;
    background: #e8f1ff;
    border-radius: 8px;
}
.method-cell > span:last-child[b-gn59l2li1t], .datetime-cell[b-gn59l2li1t] { min-width: 0; display: grid; }
.method-cell strong[b-gn59l2li1t] { overflow: hidden; color: #172b4d; text-overflow: ellipsis; white-space: nowrap; }
.method-cell small[b-gn59l2li1t], .datetime-cell small[b-gn59l2li1t] { color: #8290a5; font-size: 9px; }
.method-cell small i[b-gn59l2li1t] { margin-right: 3px; color: #1768c5; }
.datetime-cell strong[b-gn59l2li1t] { color: #334155; font-size: 11px; }

.status-pill[b-gn59l2li1t] {
    min-height: 25px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.status-error[b-gn59l2li1t] { color: #c92525; background: #fee7e7; }
.status-complete[b-gn59l2li1t] { color: #078447; background: #dcf8e8; }
.status-resend[b-gn59l2li1t] { color: #1768c5; background: #e3efff; }
.status-send[b-gn59l2li1t] { color: #a96700; background: #fff0d0; }

.payload-cell[b-gn59l2li1t], .response-cell[b-gn59l2li1t] {
    width: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #52627a;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.payload-cell span[b-gn59l2li1t], .response-cell span[b-gn59l2li1t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payload-cell i[b-gn59l2li1t] { margin-left: auto; color: #2f80ed; font-size: 9px; }
.response-cell > i[b-gn59l2li1t] { color: #ef4444; }
.payload-cell:hover span[b-gn59l2li1t], .response-cell:hover span[b-gn59l2li1t] { color: #1768c5; text-decoration: underline; }

.row-actions[b-gn59l2li1t] { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.icon-action[b-gn59l2li1t] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
}
.detail-action[b-gn59l2li1t] { color: #1768c5; border: 1px solid #bcd3ed; }
.resend-action[b-gn59l2li1t] { color: #1768c5; border: 1px solid #79ade8; background: #edf6ff; }
.delete-action[b-gn59l2li1t] { color: #dc2626; border: 1px solid #fecaca; background: #fff7f7; }
.icon-action:hover[b-gn59l2li1t] { filter: brightness(.96); }

.exception-modal-backdrop[b-gn59l2li1t] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.exception-modal[b-gn59l2li1t] {
    width: min(1280px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f5f8fc;
    border: 1px solid #cbd7e6;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
}

.exception-modal-header[b-gn59l2li1t] {
    min-height: 74px;
    padding: 14px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
}
.exception-modal-header h2[b-gn59l2li1t] { margin: 2px 0; color: #12213f; font-size: 19px; font-weight: 800; }
.exception-modal-header p[b-gn59l2li1t] { margin: 0; color: #78879c; font-size: 11px; }
.modal-close[b-gn59l2li1t] {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    color: #64748b;
    background: #eef2f7;
    border: 0;
    border-radius: 9px;
}
.modal-close:hover[b-gn59l2li1t] { color: #dc2626; background: #fee7e7; }

.exception-modal-body[b-gn59l2li1t] {
    min-height: 0;
    padding: 13px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    overflow: auto;
}

.payload-panel[b-gn59l2li1t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e1ed;
    border-radius: 10px;
}
.payload-heading[b-gn59l2li1t] {
    padding: 10px 12px;
    color: #315271;
    font-size: 11px;
    font-weight: 800;
    background: #edf5ff;
    border-bottom: 1px solid #d7e1ed;
}
.response-panel .payload-heading[b-gn59l2li1t] { color: #8f3f3f; background: #fff1f1; }
.payload-panel pre[b-gn59l2li1t] {
    min-height: 360px;
    max-height: 58vh;
    margin: 0;
    padding: 13px;
    overflow: auto;
    color: #d8e6f3;
    font: 11px/1.55 Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    word-break: break-word;
    background: #172235;
}

.exception-modal-footer[b-gn59l2li1t] {
    padding: 10px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #dbe4ef;
}

.delete-confirm-modal[b-gn59l2li1t] {
    width: min(480px, calc(100vw - 40px));
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e1ed;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
}

.delete-confirm-header[b-gn59l2li1t] {
    padding: 18px;
    display: grid;
    grid-template-columns: 44px 1fr 37px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e4eaf2;
}
.delete-confirm-header h2[b-gn59l2li1t] { margin: 2px 0 0; color: #12213f; font-size: 18px; font-weight: 800; }
.delete-confirm-icon[b-gn59l2li1t] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #dc2626;
    background: #fee7e7;
    border-radius: 11px;
    font-size: 17px;
}

.delete-confirm-body[b-gn59l2li1t] { padding: 18px; max-height: 55vh; overflow-y: auto; }
.delete-confirm-body > p[b-gn59l2li1t] { margin: 0 0 14px; color: #52627a; font-size: 12px; line-height: 1.55; }
.delete-record-preview[b-gn59l2li1t] {
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: #f6f9fd;
    border: 1px solid #dbe5f0;
    border-radius: 9px;
}
.delete-record-preview span[b-gn59l2li1t] { min-width: 0; display: grid; gap: 3px; }
.delete-record-preview small[b-gn59l2li1t] { color: #8290a5; font-size: 9px; }
.delete-record-preview strong[b-gn59l2li1t] { overflow: hidden; color: #233a5e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.delete-confirm-footer[b-gn59l2li1t] { border-top-color: #e4eaf2; }
.button-danger[b-gn59l2li1t] { color: #fff; background: #dc2626; border-color: #dc2626; }
.button-danger:hover[b-gn59l2li1t] { background: #b91c1c; border-color: #b91c1c; }
.exception-button:disabled[b-gn59l2li1t], .modal-close:disabled[b-gn59l2li1t] { cursor: not-allowed; opacity: .6; }

@media (max-width: 1100px) {
    .exception-summary[b-gn59l2li1t] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exception-toolbar[b-gn59l2li1t] { grid-template-columns: 1fr 1fr; }
    .exception-button[b-gn59l2li1t] { width: 100%; }
    .exception-table-shell[b-gn59l2li1t] { height: calc(100vh - 465px); min-height: 390px; }
}

@media (max-width: 700px) {
    .api-exception-page[b-gn59l2li1t] { padding: 12px; }
    .exception-hero[b-gn59l2li1t] { align-items: stretch; flex-direction: column; }
    .exception-hero h1[b-gn59l2li1t] { font-size: 23px; }
    .exception-summary[b-gn59l2li1t] { grid-template-columns: 1fr; }
    .exception-toolbar[b-gn59l2li1t] { grid-template-columns: 1fr; }
    .exception-table-shell[b-gn59l2li1t] {
        height: calc(100vh);
        min-height: calc(100vh);
        padding: 7px;
    }
    .exception-modal-backdrop[b-gn59l2li1t] { padding: 8px; }
    .exception-modal[b-gn59l2li1t] { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .exception-modal-body[b-gn59l2li1t] { grid-template-columns: 1fr; }
    .payload-panel pre[b-gn59l2li1t] { min-height: 240px; max-height: 35vh; }
    .exception-modal-footer[b-gn59l2li1t] { flex-direction: column; }
    .delete-confirm-modal[b-gn59l2li1t] { width: calc(100vw - 16px); }
    .delete-record-preview[b-gn59l2li1t] { grid-template-columns: 1fr; }
}
/* _content/WMS.UI/Pages/Reports/ContainerReport.razor.rz.scp.css */
.container-page[b-t1yn74q7fh] {
    --container-primary: #2563eb;
    --container-border: #dce5f0;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    overflow-x: hidden;
    background: #f4f7fb;
}

.container-page-header[b-t1yn74q7fh] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.container-eyebrow[b-t1yn74q7fh] {
    display: block;
    margin-bottom: 3px;
    color: var(--container-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.container-page-header h1[b-t1yn74q7fh] {
    margin: 0;
    color: #0f172a;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.container-page-header p[b-t1yn74q7fh],
.container-card-heading p[b-t1yn74q7fh] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.container-page-icon[b-t1yn74q7fh] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 21px;
}

.container-overview[b-t1yn74q7fh] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.container-overview-item[b-t1yn74q7fh] {
    min-width: 0;
    min-height: 72px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--container-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 5%);
}

.container-overview-item > span:last-child[b-t1yn74q7fh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.container-overview-item b[b-t1yn74q7fh] {
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-overview-item small[b-t1yn74q7fh] {
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-overview-icon[b-t1yn74q7fh] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 15px;
}

.container-overview-icon.is-blue[b-t1yn74q7fh] { color: #2563eb; background: #dbeafe; }
.container-overview-icon.is-emerald[b-t1yn74q7fh] { color: #059669; background: #d1fae5; }
.container-overview-icon.is-amber[b-t1yn74q7fh] { color: #d97706; background: #fef3c7; }
.container-overview-icon.is-violet[b-t1yn74q7fh] { color: #7c3aed; background: #ede9fe; }
.container-overview-icon.is-red[b-t1yn74q7fh] { color: #dc2626; background: #fee2e2; }

.container-overview-item small[b-t1yn74q7fh] {
    order: 0;
    margin: 0;
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
}

.container-overview-item .container-overview-value[b-t1yn74q7fh] {
    order: 1;
    margin-top: 1px;
    overflow: visible;
    color: #172033;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.05;
}

.container-table-card[b-t1yn74q7fh] {
    min-width: 0;
    min-height: 440px;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--container-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 5%);
}

.container-card-heading[b-t1yn74q7fh] {
    min-height: 66px;
    padding: 13px 16px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e6edf5;
    background: linear-gradient(180deg, #fff, #fafcff);
}

.container-card-heading h2[b-t1yn74q7fh] {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.container-live-status[b-t1yn74q7fh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.container-last-updated[b-t1yn74q7fh] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.container-last-updated i[b-t1yn74q7fh] {
    color: #2563eb;
}

.container-live-indicator[b-t1yn74q7fh] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    white-space: nowrap;
}

.container-live-indicator i[b-t1yn74q7fh] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

[b-t1yn74q7fh] .container-table-card > .table {
    min-width: 0;
    min-height: 0;
    flex: 1;
    border: 0 !important;
}

.container-table-card[b-t1yn74q7fh]  .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar {
    min-height: 58px;
    flex: 0 0 auto;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #e8edf3;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar::after {
    display: none;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar .table-toolbar-button {
    float: none !important;
    margin: 0 !important;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar > .table-toolbar-button:not(.table-column-right) {
    min-width: 0;
    flex: 1 1 auto;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar .table-column-right {
    flex: 0 0 auto;
    margin-left: 16px !important;
}

.container-table-card[b-t1yn74q7fh]  .wms-filterbar-filters {
    justify-content: flex-start;
}

.container-table-card[b-t1yn74q7fh]  .wms-filter-search {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar .btn {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1 !important;
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar .btn-primary {
    border-color: #2563eb !important;
    background: #2563eb !important;
    box-shadow: 0 4px 10px rgb(37 99 235 / 18%);
}

.container-table-card[b-t1yn74q7fh]  .table-toolbar .btn-secondary {
    border-color: #d6dee9 !important;
    color: #475569 !important;
    background: #fff !important;
}

.container-table-card[b-t1yn74q7fh]  .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--container-border);
    border-radius: 9px;
}

.container-table-card[b-t1yn74q7fh]  .table-fixed,
.container-table-card[b-t1yn74q7fh]  .table-fixed-header,
.container-table-card[b-t1yn74q7fh]  .table-fixed-body,
.container-table-card[b-t1yn74q7fh]  .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.container-table-card[b-t1yn74q7fh]  .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden;
}

.container-table-card[b-t1yn74q7fh]  .table-fixed-body {
    min-height: 0;
    flex: 1;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.container-table-card[b-t1yn74q7fh]  .table-fixed-header > table,
.container-table-card[b-t1yn74q7fh]  .table-fixed-body > table {
    min-width: 920px;
}

.container-table-card[b-t1yn74q7fh]  .table-header {
    color: #475569;
    background: #f6f8fb !important;
    font-size: 11px;
    font-weight: 750;
}

.container-table-card[b-t1yn74q7fh]  .table-row:hover {
    background: #f8fbff !important;
}

.container-table-card[b-t1yn74q7fh]  .table-cell {
    border-color: #e9eef5 !important;
    vertical-align: middle !important;
    font-size: 11px;
}

.container-table-card[b-t1yn74q7fh]  .table-fixed-body tbody tr > td,
.container-table-card[b-t1yn74q7fh]  .table-fixed-body tbody tr > th {
    border-top-color: transparent !important;
    border-bottom: 1px solid #e9eef5 !important;
}

.container-table-card[b-t1yn74q7fh]  .pagination {
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0;
    overflow-x: auto;
    border-top: 0 !important;
}

.container-table-card[b-t1yn74q7fh]  .table-page-info {
    flex: 0 0 auto;
    white-space: nowrap;
}

.container-table-card[b-t1yn74q7fh]  .btn-outline-primary,
.container-table-card[b-t1yn74q7fh]  .btn-outline-danger {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 750;
}

[b-t1yn74q7fh] .modal-dialog .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgb(15 23 42 / 18%);
}

[b-t1yn74q7fh] .modal-dialog .modal-header {
    border-bottom-color: #e8edf3;
    background: #f8fafc;
}

@media (max-width: 900px) {
    .container-overview[b-t1yn74q7fh] {
        grid-template-columns: 1fr;
    }

    .container-overview-item:nth-child(n+2)[b-t1yn74q7fh] {
        display: none;
    }
}

@media (max-width: 640px) {
    .container-page[b-t1yn74q7fh] { padding: 12px; }
    .container-page-header[b-t1yn74q7fh] { align-items: flex-start; }
    .container-page-header h1[b-t1yn74q7fh] { font-size: 22px; }
    .container-page-icon[b-t1yn74q7fh] { display: none; }
    .container-table-card[b-t1yn74q7fh]  .table-container {
        padding-right: 8px;
        padding-left: 8px;
    }
    .container-table-card[b-t1yn74q7fh]  .table-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .container-table-card[b-t1yn74q7fh]  .table-toolbar .table-column-right {
        width: 100%;
        margin-left: 0 !important;
    }
}


/* Match Location pagination: page info stays left, page links and Goto stay right. */
.container-table-card[b-t1yn74q7fh]  .nav-pages {
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 4px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0 !important;
}

.container-table-card[b-t1yn74q7fh]  .nav-pages > .pagination {
    margin: 0 0 0 auto !important;
    flex: 1 1 auto;
    justify-content: flex-end !important;
}

.container-table-card[b-t1yn74q7fh]  .nav-pages > .page-goto {
    flex: 0 0 auto;
    margin-left: 8px;
}


/* Location-style container filter bar */
.container-filterbar[b-t1yn74q7fh] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}

.container-filterbar-actions[b-t1yn74q7fh],
.container-filterbar-filters[b-t1yn74q7fh] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.container-filterbar-actions[b-t1yn74q7fh] {
    flex: 0 0 auto;
}

.container-filterbar-filters[b-t1yn74q7fh] {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.container-filterbar-divider[b-t1yn74q7fh] {
    width: 1px;
    height: 30px;
    flex: 0 0 1px;
    margin: 0 4px;
    background: #d5deea;
}

.container-filter-label[b-t1yn74q7fh] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: #718198;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.container-filter-label i[b-t1yn74q7fh] {
    color: #2468e8;
}

.container-toolbar-search[b-t1yn74q7fh] {
    position: relative;
    width: 285px;
    min-width: 190px;
    height: 38px;
    flex: 0 1 285px;
    display: flex;
    align-items: center;
}

.container-toolbar-search > i[b-t1yn74q7fh] {
    position: absolute;
    left: 12px;
    z-index: 1;
    color: #65758e;
    font-size: 13px;
    pointer-events: none;
}

.container-toolbar-search input[b-t1yn74q7fh] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 35px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #263751;
    background: #fff;
    font-size: 12px;
}

.container-toolbar-search input[b-t1yn74q7fh]::placeholder {
    color: #8b99ad;
}

.container-toolbar-search input:focus[b-t1yn74q7fh],
.container-filter-select:focus[b-t1yn74q7fh] {
    border-color: #5d91e8;
    box-shadow: 0 0 0 3px rgb(36 104 232 / 11%);
}

.container-toolbar-search button[b-t1yn74q7fh] {
    position: absolute;
    right: 7px;
    width: 25px;
    height: 25px;
    display: grid;
    border: 0;
    border-radius: 6px;
    place-items: center;
    color: #52647c;
    background: #eef2f7;
    font-size: 11px;
}

.container-filter-select[b-t1yn74q7fh] {
    width: 165px;
    height: 38px;
    flex: 0 0 165px;
    padding: 0 32px 0 11px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #34445d;
    background-color: #fff;
    font-size: 11px;
}

.container-location-filter[b-t1yn74q7fh] {
    width: 145px;
    flex-basis: 145px;
}

.container-enable-segment[b-t1yn74q7fh] {
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
}

.container-enable-segment button[b-t1yn74q7fh] {
    min-width: 76px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #d7e0eb;
    color: #526176;
    background: #fff;
    font-size: 10px;
    font-weight: 650;
}

.container-enable-segment button:last-child[b-t1yn74q7fh] {
    border-right: 0;
}

.container-enable-segment button:hover[b-t1yn74q7fh] {
    color: #1d5fd3;
    background: #f1f6ff;
}

.container-enable-segment button.active[b-t1yn74q7fh] {
    color: #1d5fd3;
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px #1d5fd3;
}

.container-filter-reset[b-t1yn74q7fh] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    place-items: center;
    color: #34445d;
    background: #fff;
}

.container-filter-reset:hover[b-t1yn74q7fh] {
    border-color: #9eb2cc;
    color: #1d5fd3;
    background: #f1f6ff;
}

.container-table-card[b-t1yn74q7fh]  thead .table-filter {
    display: none !important;
}

@media (max-width: 1450px) {
    .container-filterbar[b-t1yn74q7fh] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .container-filterbar-divider[b-t1yn74q7fh] {
        display: none;
    }

    .container-filterbar-filters[b-t1yn74q7fh] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid #e1e7ef;
    }

    .container-table-card[b-t1yn74q7fh]  .table-toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 850px) {
    .container-filterbar-actions[b-t1yn74q7fh] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filterbar-filters[b-t1yn74q7fh] {
        flex-wrap: wrap;
    }

    .container-filter-label[b-t1yn74q7fh] {
        flex-basis: 100%;
    }

    .container-toolbar-search[b-t1yn74q7fh],
    .container-filter-select[b-t1yn74q7fh] {
        width: auto;
        max-width: none;
        flex: 1 1 220px;
    }

    .container-enable-segment[b-t1yn74q7fh] {
        flex: 1 1 auto;
    }

    .container-enable-segment button[b-t1yn74q7fh] {
        min-width: 0;
        flex: 1 1 0;
    }
}


/* Match Location: keep pagination compact and anchored to the card bottom. */
.container-table-card[b-t1yn74q7fh]  .table-container {
    padding-bottom: 0;
}

.container-table-card[b-t1yn74q7fh]  .nav-pages {
    min-height: 44px !important;
    height: 44px;
    max-height: 44px;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    flex: 0 0 44px;
    align-items: center;
}

.container-table-card[b-t1yn74q7fh]  .nav-pages > .table-page-info,
.container-table-card[b-t1yn74q7fh]  .nav-pages > .pagination,
.container-table-card[b-t1yn74q7fh]  .nav-pages > .page-goto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center;
}

/* Location-equivalent filter sizing and responsive behavior. */
.container-filterbar[b-t1yn74q7fh] {
    width: 100%;
    flex: 1 1 auto;
}

.container-filterbar-filters .container-toolbar-search[b-t1yn74q7fh] {
    width: 285px;
    min-width: 190px;
    max-width: 340px;
    flex: 0 1 285px;
}

.container-filterbar-filters .container-filter-select[b-t1yn74q7fh] {
    width: 145px;
    flex: 0 1 145px;
}

.container-filterbar-filters .container-location-filter[b-t1yn74q7fh] {
    width: 130px;
    flex-basis: 130px;
}

.container-filterbar-filters .container-enable-segment button[b-t1yn74q7fh] {
    min-width: 68px;
    padding-inline: 9px;
}

@media (max-width: 1450px) {
    .container-filterbar[b-t1yn74q7fh] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .container-filterbar-divider[b-t1yn74q7fh] {
        display: none;
    }

    .container-filterbar-filters[b-t1yn74q7fh] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid #e1e7ef;
    }
}

@media (max-width: 850px) {
    .container-filterbar-actions[b-t1yn74q7fh] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filterbar-filters[b-t1yn74q7fh] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filter-label[b-t1yn74q7fh] {
        flex-basis: 100%;
    }

    .container-filterbar-filters .container-toolbar-search[b-t1yn74q7fh],
    .container-filterbar-filters .container-filter-select[b-t1yn74q7fh],
    .container-filterbar-filters .container-location-filter[b-t1yn74q7fh] {
        width: auto;
        max-width: none;
        flex: 1 1 240px;
    }

    .container-enable-segment[b-t1yn74q7fh] {
        flex: 1 1 auto;
    }

    .container-enable-segment button[b-t1yn74q7fh] {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (max-width: 560px) {
    .container-filterbar-filters .container-toolbar-search[b-t1yn74q7fh],
    .container-filterbar-filters .container-filter-select[b-t1yn74q7fh],
    .container-filterbar-filters .container-location-filter[b-t1yn74q7fh],
    .container-enable-segment[b-t1yn74q7fh] {
        width: 100%;
        flex: 1 1 100%;
    }

    .container-filter-reset[b-t1yn74q7fh] {
        margin-left: auto;
    }
}



/* Add and delete modals — aligned with the Location page dialog language. */
.container-form-popup[b-t1yn74q7fh] {
    margin: -1rem;
    background: #f7f9fc;
}

.container-form-hero[b-t1yn74q7fh] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    color: #102a56;
    background: linear-gradient(135deg, #edf4ff 0%, #f7faff 100%);
    border-bottom: 1px solid #dbe6f4;
}

.container-form-hero__icon[b-t1yn74q7fh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    color: #1769e8;
    background: #dceaff;
    font-size: 20px;
}

.container-form-hero h3[b-t1yn74q7fh] {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 800;
}

.container-form-hero p[b-t1yn74q7fh] {
    margin: 0;
    color: #657690;
    font-size: 12px;
}

.container-form-hero--danger[b-t1yn74q7fh] {
    color: #7f1d1d;
    background: linear-gradient(135deg, #fff1f2 0%, #fff8f8 100%);
    border-bottom-color: #fecdd3;
}

.container-form-hero--danger .container-form-hero__icon[b-t1yn74q7fh] {
    color: #dc2626;
    background: #fee2e2;
}

.container-form-content[b-t1yn74q7fh],
.container-delete-content[b-t1yn74q7fh] {
    padding: 22px 24px 24px;
}

.container-form-content[b-t1yn74q7fh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.container-form-field[b-t1yn74q7fh] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.container-form-field > span[b-t1yn74q7fh] {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.container-form-field > span b[b-t1yn74q7fh] {
    color: #dc2626;
}

.container-form-field > input[b-t1yn74q7fh] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    color: #17233c;
    background: #fff;
    border: 1px solid #cdd9e8;
    border-radius: 8px;
    outline: none;
}

.container-form-field > input:focus[b-t1yn74q7fh] {
    border-color: #2471eb;
    box-shadow: 0 0 0 3px rgba(36, 113, 235, .12);
}

.container-form-status[b-t1yn74q7fh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 10px 13px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
}

.container-form-status strong[b-t1yn74q7fh],
.container-form-status small[b-t1yn74q7fh] {
    display: block;
}

.container-form-status strong[b-t1yn74q7fh] {
    color: #233552;
    font-size: 12px;
}

.container-form-status small[b-t1yn74q7fh] {
    margin-top: 3px;
    color: #7b8aa2;
    font-size: 10px;
}

.container-delete-content[b-t1yn74q7fh] {
    display: grid;
    gap: 14px;
}

.container-delete-count[b-t1yn74q7fh] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.container-delete-count strong[b-t1yn74q7fh] {
    color: #dc2626;
    font-size: 30px;
    line-height: 1;
}

.container-delete-count span[b-t1yn74q7fh] {
    color: #52627a;
    font-weight: 700;
}

.container-delete-list[b-t1yn74q7fh] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.container-delete-list span[b-t1yn74q7fh] {
    padding: 6px 9px;
    color: #3e4f68;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 7px;
    font-size: 11px;
}

.container-delete-list span i[b-t1yn74q7fh] {
    margin-right: 5px;
    color: #70819a;
}

.container-delete-list small[b-t1yn74q7fh] {
    align-self: center;
    color: #70819a;
}

.container-delete-warning[b-t1yn74q7fh] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    color: #9f1239;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.container-modal-actions[b-t1yn74q7fh] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    width: 100%;
}

.container-modal-button[b-t1yn74q7fh] {
    min-width: 96px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease;
}

.container-modal-button:not(:disabled):hover[b-t1yn74q7fh] {
    transform: translateY(-1px);
}

.container-modal-button:disabled[b-t1yn74q7fh] {
    cursor: not-allowed;
    opacity: .65;
}

.container-modal-button--cancel[b-t1yn74q7fh] {
    color: #40516b;
    background: #fff;
    border-color: #cfd9e6;
}

.container-modal-button--save[b-t1yn74q7fh] {
    color: #fff;
    background: #1769e8;
    box-shadow: 0 4px 10px rgba(23, 105, 232, .22);
}

.container-modal-button--delete[b-t1yn74q7fh] {
    color: #fff;
    background: #dc2626;
    box-shadow: 0 4px 10px rgba(220, 38, 38, .22);
}

.container-modal-button i[b-t1yn74q7fh] {
    margin-right: 6px;
}

@media (max-width: 560px) {
    .container-form-hero[b-t1yn74q7fh] {
        align-items: flex-start;
        padding: 18px;
    }

    .container-form-content[b-t1yn74q7fh],
    .container-delete-content[b-t1yn74q7fh] {
        padding: 18px;
    }

    .container-form-content[b-t1yn74q7fh] {
        grid-template-columns: 1fr;
    }

    .container-modal-actions[b-t1yn74q7fh] {
        flex-direction: column-reverse;
    }

    .container-modal-button[b-t1yn74q7fh] {
        width: 100%;
    }
}


.container-form-status--wide[b-t1yn74q7fh] {
    grid-column: 1 / -1;
}

.container-table-card[b-t1yn74q7fh]  .container-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
}

.container-table-card[b-t1yn74q7fh]  .container-row-action + .container-row-action {
    margin-left: 6px;
}

.container-table-card[b-t1yn74q7fh]  .container-row-action--edit {
    color: #fff;
    background: #2563eb;
}

.container-table-card[b-t1yn74q7fh]  .container-row-action--delete {
    color: #fff;
    background: #ef4444;
}

.container-table-card[b-t1yn74q7fh]  .container-row-action:hover {
    color: #fff;
    filter: brightness(.94);
}

@media (max-width: 560px) {
    .container-form-status--wide[b-t1yn74q7fh] {
        grid-column: auto;
    }
}


.container-form-location[b-t1yn74q7fh]  .search {
    width: 100%;
    min-width: 0;
}

.container-form-location[b-t1yn74q7fh]  .search .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.container-form-location[b-t1yn74q7fh]  .search .form-control {
    width: 1%;
    min-width: 0;
    min-height: 38px;
    flex: 1 1 auto;
    border-color: #cdd9e8;
    border-radius: 8px 0 0 8px;
}

.container-form-location[b-t1yn74q7fh]  .search .input-group > .btn {
    position: static;
    width: 38px;
    min-width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin: 0;
    border-color: #cdd9e8;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
}


/* Let the location suggestion list overlay the edit footer instead of being clipped. */
[b-t1yn74q7fh] .container-edit-dialog > .modal-content,
[b-t1yn74q7fh] .container-edit-dialog .modal-body {
    overflow: visible;
}

[b-t1yn74q7fh] .container-edit-dialog .modal-footer {
    position: relative;
    z-index: 0;
    border-radius: 0 0 14px 14px;
}

.container-form-location[b-t1yn74q7fh]  .search {
    position: relative;
    z-index: 2;
}

.container-form-location[b-t1yn74q7fh]  .search .dropdown-menu {
    z-index: 1085;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(15, 35, 64, .18);
}


@media (max-width: 1050px) {
    .container-overview[b-t1yn74q7fh] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 560px) {
    .container-overview[b-t1yn74q7fh] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 560px) {
    .container-card-heading[b-t1yn74q7fh] {
        align-items: flex-start;
    }

    .container-live-status[b-t1yn74q7fh] {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 5px;
    }

    .container-last-updated[b-t1yn74q7fh] {
        font-size: 9px;
    }
}


.container-code-link[b-t1yn74q7fh] {
    max-width: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #1769c2;
    font: inherit;
    font-weight: 700;
    text-align: left;
    background: transparent;
    border: 0;
}

.container-code-link span[b-t1yn74q7fh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-code-link:hover[b-t1yn74q7fh] {
    color: #0f4f98;
    text-decoration: underline;
}

.container-main-cell[b-t1yn74q7fh] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.container-main-cell__icon[b-t1yn74q7fh] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #cfe1f6;
    border-radius: 8px;
    color: #1769d2;
    background: #edf5ff;
}

.container-main-cell > span:last-child[b-t1yn74q7fh] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.container-main-cell strong[b-t1yn74q7fh],
.container-main-cell small[b-t1yn74q7fh] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-main-cell strong[b-t1yn74q7fh] { color: #154f91; font-size: 11px; }
.container-main-cell small[b-t1yn74q7fh] { color: #7b8ba0; font-size: 8.5px; }

.container-status-cell[b-t1yn74q7fh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.container-enable-state[b-t1yn74q7fh] {
    display: inline-flex;
    min-height: 23px;
    padding: 3px 8px;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.container-enable-state.is-enabled[b-t1yn74q7fh] {
    border: 1px solid #a9e5cd;
    color: #087f5b;
    background: #dcf8eb;
}

.container-enable-state.is-disabled[b-t1yn74q7fh] {
    border: 1px solid #f4c7c3;
    color: #b42318;
    background: #fff0ee;
}

.container-movement-cell[b-t1yn74q7fh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #405b78;
    font-size: 10px;
    white-space: nowrap;
}

.container-movement-cell i[b-t1yn74q7fh] { color: #1769d2; }

.container-view-action[b-t1yn74q7fh] {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #9fc5f5;
    border-radius: 8px;
    color: #1769d2;
    background: #fff;
    font-size: 10px;
}

.container-view-action:hover[b-t1yn74q7fh] {
    border-color: #1769d2;
    color: #fff;
    background: #1769d2;
}

.container-detail-backdrop[b-t1yn74q7fh] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.container-detail-dialog[b-t1yn74q7fh] {
    width: min(1500px, calc(100vw - 40px));
    height: min(850px, calc(100vh - 40px));
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ced9e7;
    border-radius: 15px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .3);
}

@media (max-width: 720px) {
    .container-detail-backdrop[b-t1yn74q7fh] {
        padding: 8px;
    }

    .container-detail-dialog[b-t1yn74q7fh] {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        min-height: 0;
        border-radius: 11px;
    }
}


.container-product-state[b-t1yn74q7fh],
.container-process-state[b-t1yn74q7fh],
.container-location-badge[b-t1yn74q7fh],
.container-location-empty[b-t1yn74q7fh] {
    min-height: 23px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 999px;
}

.container-product-state.has-product[b-t1yn74q7fh] {
    color: #087f5b;
    background: #dcf8eb;
    border: 1px solid #a9e5cd;
}

.container-product-state.is-empty[b-t1yn74q7fh] {
    color: #718096;
    background: #edf1f6;
    border: 1px solid #d7dee8;
}

.container-process-state[b-t1yn74q7fh] {
    color: #465970;
    background: #eef3f8;
}

.container-location-badge[b-t1yn74q7fh] {
    color: #234f7c;
    background: #edf4fb;
}

.container-location-empty[b-t1yn74q7fh] {
    color: #7a899d;
    font-weight: 500;
    background: transparent;
}

.container-used-space[b-t1yn74q7fh] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.container-used-space > div[b-t1yn74q7fh] {
    height: 13px;
    min-width: 90px;
    flex: 1 1 auto;
    overflow: hidden;
    background: #e4ebf3;
    border-radius: 999px;
}

.container-used-space > div i[b-t1yn74q7fh] {
    display: block;
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
    border-radius: inherit;
}

.container-used-space strong[b-t1yn74q7fh] {
    width: 43px;
    flex: 0 0 43px;
    color: #087f5b;
    font-size: 9.5px;
    text-align: right;
}

.container-detail-dialog[b-t1yn74q7fh] {
    width: min(1120px, calc(100vw - 40px));
    height: min(820px, calc(100dvh - 32px));
    min-height: 0;
    max-height: calc(100dvh - 32px);
}
@media (max-width: 600px) {
    .container-detail-dialog[b-t1yn74q7fh], .container-detail-dialog:has([data-card-count])[b-t1yn74q7fh] {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }
}
/* _content/WMS.UI/Pages/Reports/ContainerReportDetail.razor.rz.scp.css */
.container-detail[b-zhy7ritjxa] {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: #14243e;
    background: #fff;
}

.container-detail__header[b-zhy7ritjxa] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px;
    border-bottom: 1px solid #dbe5f1;
}

.container-detail__title[b-zhy7ritjxa] { display: flex; min-width: 0; align-items: center; gap: 12px; }
.container-detail__icon[b-zhy7ritjxa] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: #1769d2;
    background: #eaf3ff;
}

.container-detail__title > span:last-child[b-zhy7ritjxa] { display: flex; min-width: 0; flex-direction: column; }
.container-detail__title small[b-zhy7ritjxa] { color: #1769d2; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.container-detail__title strong[b-zhy7ritjxa] {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-detail__title em[b-zhy7ritjxa] {
    overflow: hidden;
    color: #708097;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-detail__close[b-zhy7ritjxa] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    place-items: center;
    color: #52657d;
    background: #eef3f8;
}

.container-detail__close:hover[b-zhy7ritjxa] { color: #c43b4c; background: #fff0f2; }
.container-detail__facts[b-zhy7ritjxa] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 1px;
    padding: 1px 0;
    background: #e1e9f3;
}

.container-detail__facts > div[b-zhy7ritjxa] {
    display: flex;
    min-width: 0;
    min-height: 60px;
    padding: 10px 13px;
    flex-direction: column;
    justify-content: center;
    background: #f8fafd;
}

.container-detail__facts small[b-zhy7ritjxa] { color: #75849a; font-size: 10px; }
.container-detail__facts strong[b-zhy7ritjxa] { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.container-detail__capacity[b-zhy7ritjxa] {
    display: grid;
    grid-template-columns: 1fr auto;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #e1e8f1;
}

.container-detail__capacity > span[b-zhy7ritjxa] { font-size: 11px; font-weight: 700; }
.container-detail__capacity > span i[b-zhy7ritjxa] { margin-right: 5px; color: #1769d2; }
.container-detail__capacity > strong[b-zhy7ritjxa] { color: #1769d2; font-size: 12px; }
.container-detail__capacity > div[b-zhy7ritjxa] {
    grid-column: 1 / -1;
    height: 6px;
    overflow: hidden;
    border-radius: 99px;
    background: #e7edf5;
}

.container-detail__capacity > div i[b-zhy7ritjxa] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1b75dc, #20b8c8);
}

.container-detail__items[b-zhy7ritjxa] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 14px 14px;
    flex-direction: column;
}

.container-detail__items-heading[b-zhy7ritjxa] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.container-detail__items-heading span[b-zhy7ritjxa] { font-size: 13px; font-weight: 750; }
.container-detail__items-heading span i[b-zhy7ritjxa] { margin-right: 6px; color: #1769d2; }
.container-detail__items-heading small[b-zhy7ritjxa] { color: #7a899d; font-size: 10px; }
.container-detail__items-table[b-zhy7ritjxa] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
}

.container-detail__items-table[b-zhy7ritjxa]  .table-container { border: 0; border-radius: 0; }

@media (max-width: 600px) {
    .container-detail__facts[b-zhy7ritjxa] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .container-detail__header[b-zhy7ritjxa] { padding: 13px; }
    .container-detail__items[b-zhy7ritjxa] { padding: 10px; }
}

.container-detail--popup[b-zhy7ritjxa] { height: 100%; max-height: none; }
.container-detail--popup .container-detail__header[b-zhy7ritjxa] { padding: 12px 16px; }
.container-detail--popup .container-detail__facts > div[b-zhy7ritjxa] { min-height: 48px; padding: 7px 12px; }
.container-detail__items-table[b-zhy7ritjxa] { display: flex; flex-direction: column; }
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser { flex: 1 1 auto; min-height: 0; }
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser .product-card-grid {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .product-card-viewport { overflow: hidden; }
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .product-card { min-height: 0; }
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .product-card__serials {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .serial-grid-panel {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .serial-grid {
    height: 0 !important;
    min-height: 0;
    max-height: none !important;
    flex: 1 1 0;
    overflow-y: auto;
}
.container-detail__items-table[b-zhy7ritjxa]  .product-card-browser[data-page-size="3"] .serial-grid-panel__empty {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    flex: 1 1 0;
}
.container-detail--popup .container-detail__items-table[b-zhy7ritjxa] { height: auto; max-height: none; flex: 1 1 auto; }
@media (max-width: 600px) {
    .container-detail--popup[b-zhy7ritjxa] { height: 100%; max-height: none; }
    .container-detail--popup .container-detail__items-table[b-zhy7ritjxa] { height: auto; max-height: none; }
}
@media (max-height: 520px) {
    .container-detail--popup[b-zhy7ritjxa] { overflow-y: auto; }
    .container-detail--popup .container-detail__items-table[b-zhy7ritjxa] { min-height: 220px; max-height: 300px; }
}
/* _content/WMS.UI/Pages/Reports/HistoryDesigner.razor.rz.scp.css */
:root[b-m98xh8e5r8] {
    --history-blue: #1767c8;
}

.history-designer[b-m98xh8e5r8] {
    --history-ink: #17243b;
    --history-muted: #6f7e95;
    --history-line: #d9e3ef;
    --history-surface: #ffffff;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: clamp(12px, 1.4vw, 22px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    color: var(--history-ink);
    background: #f3f6fa;
    font-family: "Sarabun", sans-serif;
}

.history-hero[b-m98xh8e5r8],
.ledger-header[b-m98xh8e5r8],
.evidence-header[b-m98xh8e5r8] {
    flex: 0 0 auto;
    min-width: 0;
}

.history-hero[b-m98xh8e5r8],
.ledger-header[b-m98xh8e5r8] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.history-eyebrow[b-m98xh8e5r8] {
    display: block;
    margin-bottom: 4px;
    color: #1767c8;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .15em;
}

.history-hero h1[b-m98xh8e5r8],
.ledger-header h1[b-m98xh8e5r8],
.evidence-header h1[b-m98xh8e5r8] {
    margin: 0;
    color: var(--history-ink);
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 850;
    line-height: 1.12;
}

.history-hero p[b-m98xh8e5r8],
.evidence-header p[b-m98xh8e5r8] {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--history-muted);
    font-size: 13px;
}

.history-actions[b-m98xh8e5r8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.history-btn[b-m98xh8e5r8] {
    min-height: 40px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.history-btn:hover:not(:disabled)[b-m98xh8e5r8] {
    transform: translateY(-1px);
}

.history-btn:disabled[b-m98xh8e5r8] {
    cursor: wait;
    opacity: .62;
}

.history-btn-primary[b-m98xh8e5r8] {
    color: #fff;
    background: #1767c8;
    box-shadow: 0 7px 18px rgba(23, 103, 200, .2);
}

.history-btn-secondary[b-m98xh8e5r8] {
    color: #43546d;
    background: #fff;
    border-color: #cfdae8;
}

.history-metrics[b-m98xh8e5r8] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.history-metrics article[b-m98xh8e5r8] {
    min-width: 0;
    padding: 13px 15px;
    display: grid;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--history-line);
    border-radius: 11px;
    box-shadow: 0 6px 20px rgba(40, 64, 100, .045);
}

.history-metrics span[b-m98xh8e5r8],
.history-metrics small[b-m98xh8e5r8] {
    color: var(--history-muted);
    font-size: 11px;
}

.history-metrics strong[b-m98xh8e5r8] {
    overflow: hidden;
    color: #182947;
    font-size: 24px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-metrics .metric-text[b-m98xh8e5r8] {
    font-size: 16px;
}

.history-content[b-m98xh8e5r8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.history-table-shell[b-m98xh8e5r8] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--history-surface);
    border: 1px solid var(--history-line);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(35, 58, 91, .06);
}

.history-table-heading[b-m98xh8e5r8] {
    flex: 0 0 auto;
    min-height: 60px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--history-line);
}

.history-table-heading span[b-m98xh8e5r8] {
    color: #1767c8;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.history-table-heading h2[b-m98xh8e5r8] {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 850;
}

.table-state[b-m98xh8e5r8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #63738a;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.live-dot[b-m98xh8e5r8] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a765;
    box-shadow: 0 0 0 4px rgba(22, 167, 101, .12);
}

.history-table-region[b-m98xh8e5r8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.history-search-bar[b-m98xh8e5r8] {
    display: grid;
    grid-template-columns: auto minmax(160px, .45fr) minmax(260px, 1fr) minmax(170px, .45fr) minmax(155px, .4fr) auto minmax(155px, .4fr) auto auto;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.history-filter-field[b-m98xh8e5r8] {
    min-width: 0;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #d4dfed;
    border-radius: 8px;
    background: #fff;
    color: #61758f;
}

.history-filter-field > span[b-m98xh8e5r8] {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
}

.history-filter-field select[b-m98xh8e5r8],
.history-filter-field input[b-m98xh8e5r8] {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #102a4c;
}

.history-date-separator[b-m98xh8e5r8] {
    align-self: center;
    color: #8496ad;
    font-weight: 700;
}

.history-date-required[b-m98xh8e5r8] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #c2410c;
    font-size: 11px;
    font-weight: 700;
}

.history-search-input[b-m98xh8e5r8] {
    min-width: 0;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #d4dfed;
    border-radius: 8px;
    background: #fff;
    color: #61758f;
}

.history-search-input:focus-within[b-m98xh8e5r8] {
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.12);
}

.history-search-input input[b-m98xh8e5r8] {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #102a4c;
}

.history-search-button[b-m98xh8e5r8],
.history-search-reset[b-m98xh8e5r8] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 1px solid #cbd9e9;
    border-radius: 8px;
    font-weight: 700;
}

.history-search-button[b-m98xh8e5r8] {
    border-color: #1769d2;
    background: #1769d2;
    color: #fff;
}

.history-search-reset[b-m98xh8e5r8] {
    background: #fff;
    color: #304965;
}

.history-search-button:disabled[b-m98xh8e5r8],
.history-search-reset:disabled[b-m98xh8e5r8] {
    opacity: .55;
}

.history-table-region[b-m98xh8e5r8]  .table-container {
    height: 100% !important;
}

.history-table-region[b-m98xh8e5r8]  .table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.history-table-region[b-m98xh8e5r8]  .table-toolbar > .table-toolbar-button {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

.history-table-region[b-m98xh8e5r8]  .table-toolbar > .table-column-right {
    margin-left: 0;
}

@media (max-width: 760px) {
    .history-table-region[b-m98xh8e5r8]  .table-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .history-search-bar[b-m98xh8e5r8] {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .history-search-input[b-m98xh8e5r8] {
        grid-column: 1 / -1;
    }

    .history-search-by[b-m98xh8e5r8],
    .history-process-filter[b-m98xh8e5r8] { grid-column: span 1; }

    .history-date-separator[b-m98xh8e5r8] { display: none; }

}

.counted-quantity[b-m98xh8e5r8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #243753;
}

.counted-quantity i[b-m98xh8e5r8] {
    color: #1767c8;
    font-size: 10px;
}

.history-cell[b-m98xh8e5r8] {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-cell strong[b-m98xh8e5r8],
.history-route-point strong[b-m98xh8e5r8] {
    overflow: hidden;
    color: #172a48;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-cell > span[b-m98xh8e5r8],
.history-cell > small[b-m98xh8e5r8] {
    overflow: hidden;
    color: #687b96;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-transaction-cell > span[b-m98xh8e5r8],
.history-transaction-cell > small[b-m98xh8e5r8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-transaction-cell i[b-m98xh8e5r8] {
    width: 11px;
    color: #1767c8;
    text-align: center;
}

.history-process-cell > small[b-m98xh8e5r8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.history-status[b-m98xh8e5r8] {
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-status-success[b-m98xh8e5r8] {
    color: #087847;
    background: #e3f7ed;
}

.history-status-danger[b-m98xh8e5r8] {
    color: #b42318;
    background: #feeceb;
}

.history-status-pending[b-m98xh8e5r8] {
    color: #765b00;
    background: #fff5cf;
}

.history-status-active[b-m98xh8e5r8] {
    color: #115eac;
    background: #e7f2ff;
}

.history-route[b-m98xh8e5r8] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
}

.history-route > i[b-m98xh8e5r8] {
    color: #8da0ba;
    font-size: 11px;
}

.history-route-point[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.history-route-point > span[b-m98xh8e5r8],
.history-stock-cell span[b-m98xh8e5r8],
.history-stock-cell dt[b-m98xh8e5r8],
.history-activity-label[b-m98xh8e5r8] {
    color: #8492a7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.history-stock-cell dd[b-m98xh8e5r8]
{
    margin-left:15px !important;
}

.history-route-point small[b-m98xh8e5r8] {
    overflow: hidden;
    color: #687b96;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-route-point .history-partition[b-m98xh8e5r8] {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.history-product-cell > span[b-m98xh8e5r8] {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.history-tags[b-m98xh8e5r8] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.history-tags small[b-m98xh8e5r8] {
    max-width: 92px;
    padding: 2px 6px;
    overflow: hidden;
    color: #45617f;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-stock-cell[b-m98xh8e5r8] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.history-stock-cell > div[b-m98xh8e5r8] {
    min-width: 0;
    padding: 6px 8px;
    display: grid;
    gap: 1px;
    background: #f3f7fb;
    border-radius: 7px;
}

.history-stock-cell strong[b-m98xh8e5r8] {
    font-size: 13px;
    font-weight: 900;
}

.history-stock-cell small[b-m98xh8e5r8] {
    color: #75869d;
    font-size: 8px;
}

.history-stock-cell dl[b-m98xh8e5r8] {
    grid-column: 1 / -1;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 10px;
}

.history-stock-cell dl div[b-m98xh8e5r8] {
    min-width: 0;
}

.history-stock-cell dd[b-m98xh8e5r8] {
    margin: 1px 0 0;
    overflow: hidden;
    color: #344a68;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-qty-primary[b-m98xh8e5r8] {
    color: #1767c8;
}

.history-qty-positive[b-m98xh8e5r8] {
    color: #078454;
}

.history-qty-negative[b-m98xh8e5r8] {
    color: #c2342a;
}

.history-empty-value[b-m98xh8e5r8] {
    color: #91a0b4;
}

.history-activity-cell[b-m98xh8e5r8] {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.history-activity-step[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
}

.history-activity-icon[b-m98xh8e5r8] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 8px;
}

.history-activity-created[b-m98xh8e5r8] {
    color: #1767c8;
    background: #e8f2ff;
}

.history-activity-action[b-m98xh8e5r8] {
    color: #9a6700;
    background: #fff3d6;
}

.history-activity-finished[b-m98xh8e5r8] {
    color: #087847;
    background: #e3f7ed;
}

.history-activity-details[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.history-activity-details > div[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px;
    align-items: baseline;
}

.history-activity-details strong[b-m98xh8e5r8],
.history-activity-details time[b-m98xh8e5r8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-activity-details strong[b-m98xh8e5r8] {
    color: #203958;
    font-size: 10px;
    font-weight: 800;
}

.history-activity-details time[b-m98xh8e5r8] {
    color: #657892;
    font-size: 9px;
    font-weight: 600;
}

.history-remark[b-m98xh8e5r8] {
    width: 100%;
    overflow: hidden;
    color: #4f6077;
    font-size: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

[b-m98xh8e5r8] .table tbody td {
    vertical-align: top;
}

[b-m98xh8e5r8] .table-fixed-body tbody .table-cell {
    min-height: 82px;
    height: auto;
    padding: 7px 0;
    align-items: flex-start;
    white-space: normal;
}

/* Concept 2: ledger with a persistent query summary rail. */
.history-v2[b-m98xh8e5r8] {
    gap: 12px;
    background:
        linear-gradient(90deg, rgba(25, 85, 151, .035) 1px, transparent 1px),
        linear-gradient(rgba(25, 85, 151, .035) 1px, transparent 1px),
        #f5f7fa;
    background-size: 22px 22px;
}

.ledger-header[b-m98xh8e5r8] {
    min-height: 58px;
    padding: 2px 2px 10px;
    align-items: center;
    border-bottom: 1px solid #d4deea;
}

.ledger-title[b-m98xh8e5r8] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-icon[b-m98xh8e5r8] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #1767c8;
    background: #e8f2ff;
    border: 1px solid #cfe2f8;
    border-radius: 10px;
}

.ledger-header h1[b-m98xh8e5r8] {
    font-size: clamp(20px, 1.55vw, 27px);
}

.history-v2 .history-content[b-m98xh8e5r8] {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 12px;
}

.ledger-sidebar[b-m98xh8e5r8] {
    min-width: 0;
    min-height: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
    background: #172841;
    border: 1px solid #243a59;
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(19, 36, 59, .16);
}

.ledger-total[b-m98xh8e5r8] {
    padding-bottom: 14px;
    display: grid;
    gap: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
}

.ledger-total span[b-m98xh8e5r8],
.ledger-total small[b-m98xh8e5r8] {
    color: #aebdd1;
    font-size: 11px;
}

.ledger-total strong[b-m98xh8e5r8] {
    color: #fff;
    font-size: 35px;
    font-weight: 900;
}

.ledger-facts[b-m98xh8e5r8] {
    margin: 0;
    display: grid;
    gap: 0;
}

.ledger-facts div[b-m98xh8e5r8] {
    min-height: 39px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ledger-facts dt[b-m98xh8e5r8] {
    color: #aebdd1;
    font-size: 11px;
    font-weight: 600;
}

.ledger-facts dd[b-m98xh8e5r8] {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger-note[b-m98xh8e5r8] {
    margin-top: auto;
    padding: 11px;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 8px;
    color: #b9c7d9;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 9px;
}

.ledger-note i[b-m98xh8e5r8] {
    margin-top: 2px;
    color: #6cb3ff;
}

.ledger-note p[b-m98xh8e5r8] {
    margin: 0;
    font-size: 10px;
    line-height: 1.5;
}

/* Concept 3: evidence console with high-contrast status signals. */
.history-v3[b-m98xh8e5r8] {
    background:
        radial-gradient(circle at 85% -10%, rgba(48, 117, 207, .16), transparent 35%),
        #edf2f8;
}

.evidence-header[b-m98xh8e5r8] {
    margin: calc(clamp(12px, 1.4vw, 22px) * -1) calc(clamp(12px, 1.4vw, 22px) * -1) 0;
    padding: 20px clamp(16px, 2vw, 28px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: #fff;
    background:
        linear-gradient(125deg, rgba(22, 80, 151, .98), rgba(11, 31, 59, .98)),
        #132a48;
}

.evidence-header .history-eyebrow[b-m98xh8e5r8] {
    color: #83c1ff;
}

.evidence-header h1[b-m98xh8e5r8] {
    color: #fff;
}

.evidence-header p[b-m98xh8e5r8] {
    color: #bdcadb;
}

.history-btn-dark[b-m98xh8e5r8] {
    color: #d9e7f7;
    background: rgba(4, 18, 36, .38);
    border-color: rgba(255, 255, 255, .18);
}

.history-btn-light[b-m98xh8e5r8] {
    color: #123056;
    background: #fff;
    box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}

.evidence-signals[b-m98xh8e5r8] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.evidence-signals div[b-m98xh8e5r8] {
    min-width: 0;
    min-height: 49px;
    padding: 8px 11px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 7px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #d5e0ed;
    border-radius: 10px;
    backdrop-filter: blur(7px);
}

.evidence-signals i[b-m98xh8e5r8] {
    grid-row: 1 / span 2;
    color: #1767c8;
}

.evidence-signals span[b-m98xh8e5r8] {
    color: #77869b;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.evidence-signals strong[b-m98xh8e5r8] {
    overflow: hidden;
    color: #263a57;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-v3 .history-table-shell[b-m98xh8e5r8] {
    border-color: #cbd9e8;
    box-shadow: 0 16px 38px rgba(20, 46, 79, .1);
}

.history-v3 .history-table-heading[b-m98xh8e5r8] {
    background: linear-gradient(90deg, #f7fafe, #fff);
}

[b-m98xh8e5r8] .table {
    min-width: 0;
}

[b-m98xh8e5r8] .table-toolbar {
    border-bottom-color: #e1e8f1;
}

@media (max-width: 1100px) {
    .history-metrics[b-m98xh8e5r8],
    .evidence-signals[b-m98xh8e5r8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-v2 .history-content[b-m98xh8e5r8] {
        grid-template-columns: 205px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .history-designer[b-m98xh8e5r8] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .history-hero[b-m98xh8e5r8],
    .ledger-header[b-m98xh8e5r8],
    .evidence-header[b-m98xh8e5r8] {
        align-items: stretch;
        flex-direction: column;
    }

    .history-actions[b-m98xh8e5r8] {
        width: 100%;
    }

    .history-actions .history-btn[b-m98xh8e5r8] {
        flex: 1 1 0;
    }

    .history-metrics[b-m98xh8e5r8],
    .evidence-signals[b-m98xh8e5r8] {
        grid-template-columns: 1fr 1fr;
    }

    .history-content[b-m98xh8e5r8],
    .history-v2 .history-content[b-m98xh8e5r8] {
        overflow: visible;
    }

    .history-v2 .history-content[b-m98xh8e5r8] {
        display: flex;
        flex-direction: column;
    }

    .ledger-sidebar[b-m98xh8e5r8] {
        overflow: visible;
    }

    .ledger-facts[b-m98xh8e5r8] {
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }

    .ledger-note[b-m98xh8e5r8] {
        margin-top: 0;
    }

    .history-table-shell[b-m98xh8e5r8] {
        height: clamp(34rem, 72dvh, 48rem);
    }

    .evidence-header[b-m98xh8e5r8] {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .history-designer[b-m98xh8e5r8] {
        padding: 10px;
    }

    .history-metrics[b-m98xh8e5r8],
    .evidence-signals[b-m98xh8e5r8],
    .ledger-facts[b-m98xh8e5r8] {
        grid-template-columns: 1fr;
    }

    .history-actions[b-m98xh8e5r8] {
        flex-direction: column;
    }

    .history-actions .history-btn[b-m98xh8e5r8] {
        width: 100%;
    }

    .history-table-heading[b-m98xh8e5r8] {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .evidence-header[b-m98xh8e5r8] {
        margin: -10px -10px 0;
        padding: 17px 12px;
    }
}


/* Serial inspector: one scalable review surface instead of a scrollbar in every table cell. */
.history-table-workspace[b-m98xh8e5r8] {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.history-table-workspace.serial-inspector-open[b-m98xh8e5r8] {
    grid-template-columns: minmax(0, 1fr) clamp(330px, 27vw, 420px);
}

.history-serial-empty[b-m98xh8e5r8] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #8a99ad;
    font-size: 10px;
    font-weight: 700;
}

.history-serial-empty i[b-m98xh8e5r8] {
    color: #a9b6c7;
}

.history-serial-summary[b-m98xh8e5r8] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #183758;
    background: #f7faff;
    border: 1px solid #d5e2f1;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.history-serial-summary:hover[b-m98xh8e5r8],
.history-serial-summary:focus-visible[b-m98xh8e5r8] {
    border-color: #6ca7e8;
    background: #eff7ff;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(23, 103, 200, .11);
}

.history-serial-summary.is-selected[b-m98xh8e5r8] {
    border-color: #1767c8;
    background: #eaf4ff;
    box-shadow: inset 3px 0 0 #1767c8;
}

.history-serial-summary-icon[b-m98xh8e5r8] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #1767c8;
    background: #e3f0ff;
    border-radius: 7px;
}

.history-serial-summary-copy[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.history-serial-summary-copy strong[b-m98xh8e5r8],
.history-serial-summary-copy small[b-m98xh8e5r8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-serial-summary-copy strong[b-m98xh8e5r8] {
    color: #173452;
    font-size: 11px;
    font-weight: 850;
}

.history-serial-summary-copy small[b-m98xh8e5r8] {
    color: #667a93;
    font-family: Consolas, "Courier New", monospace;
    font-size: 9px;
}

.history-serial-summary-action[b-m98xh8e5r8] {
    grid-column: 2;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1767c8;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.history-serial-summary-action i[b-m98xh8e5r8] {
    font-size: 8px;
}

.history-serial-inspector[b-m98xh8e5r8] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #17243b;
    background: #fff;
    border: 1px solid #cfdceb;
    border-radius: 14px;
    box-shadow: -10px 12px 32px rgba(26, 51, 82, .12);
}

.serial-inspector-header[b-m98xh8e5r8] {
    flex: 0 0 auto;
    padding: 15px 16px 13px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #dce5ef;
}

.serial-inspector-header h2[b-m98xh8e5r8] {
    margin: 0;
    color: #152b48;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.2;
}

.serial-inspector-header p[b-m98xh8e5r8] {
    margin: 4px 0 0;
    overflow: hidden;
    color: #667b96;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-close[b-m98xh8e5r8] {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #526781;
    background: #f2f6fa;
    border: 1px solid #d8e2ed;
    border-radius: 8px;
    cursor: pointer;
}

.serial-inspector-close:hover[b-m98xh8e5r8],
.serial-inspector-close:focus-visible[b-m98xh8e5r8] {
    color: #b42318;
    background: #fff1f0;
    border-color: #f2bbb7;
    outline: 0;
}

.serial-inspector-context[b-m98xh8e5r8] {
    flex: 0 0 auto;
    padding: 12px 16px;
    display: grid;
    gap: 9px;
    background: #f7f9fc;
    border-bottom: 1px solid #dce5ef;
}

.serial-inspector-context > div[b-m98xh8e5r8] {
    min-width: 0;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: baseline;
}

.serial-inspector-context span[b-m98xh8e5r8] {
    grid-row: 1 / 3;
    color: #8190a4;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.serial-inspector-context strong[b-m98xh8e5r8],
.serial-inspector-context small[b-m98xh8e5r8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-context strong[b-m98xh8e5r8] {
    color: #203b5b;
    font-size: 11px;
    font-weight: 850;
}

.serial-inspector-context small[b-m98xh8e5r8] {
    color: #6f8096;
    font-size: 9px;
}

.serial-inspector-search[b-m98xh8e5r8] {
    flex: 0 0 auto;
    height: 38px;
    margin: 12px 16px 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6e8097;
    background: #fff;
    border: 1px solid #cfdceb;
    border-radius: 8px;
}

.serial-inspector-search:focus-within[b-m98xh8e5r8] {
    border-color: #2f80ed;
    box-shadow: 0 0 0 3px rgba(47, 128, 237, .11);
}

.serial-inspector-search input[b-m98xh8e5r8] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #183454;
    background: transparent;
    font-size: 11px;
}

.serial-inspector-search button[b-m98xh8e5r8] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: #6b7e95;
    background: #edf2f7;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.serial-inspector-result[b-m98xh8e5r8] {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 9px 16px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #60738c;
    font-size: 10px;
}

.serial-inspector-result strong[b-m98xh8e5r8] {
    color: #1767c8;
}

.serial-inspector-result small[b-m98xh8e5r8] {
    max-width: 48%;
    overflow: hidden;
    color: #7a899d;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-list[b-m98xh8e5r8] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    grid-auto-rows: 38px;
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #a8bad0 transparent;
}

.serial-inspector-item[b-m98xh8e5r8] {
    min-width: 0;
    height: 38px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    background: #f7faff;
    border: 1px solid #d8e5f3;
    border-radius: 7px;
}

.serial-inspector-item > span[b-m98xh8e5r8] {
    height: 100%;
    display: grid;
    place-items: center;
    color: #7789a0;
    background: #edf3fa;
    border-right: 1px solid #d8e5f3;
    font-size: 8px;
    font-weight: 800;
}

.serial-inspector-item code[b-m98xh8e5r8] {
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
    color: #174b82;
    background: transparent;
    font-family: Consolas, "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-empty[b-m98xh8e5r8] {
    grid-column: 1 / -1;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: #74859a;
    text-align: center;
}

.serial-inspector-empty i[b-m98xh8e5r8] {
    margin-bottom: 5px;
    color: #9aacbf;
    font-size: 22px;
}

.serial-inspector-empty strong[b-m98xh8e5r8] {
    color: #324b68;
    font-size: 12px;
}

.serial-inspector-empty span[b-m98xh8e5r8] {
    font-size: 10px;
}

.serial-inspector-footer[b-m98xh8e5r8] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #6f8095;
    background: #f7f9fc;
    border-top: 1px solid #dce5ef;
    font-size: 9px;
}

.serial-inspector-footer i[b-m98xh8e5r8] {
    color: #1767c8;
}

@media (max-width: 1180px) {
    .history-table-workspace.serial-inspector-open[b-m98xh8e5r8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-serial-inspector[b-m98xh8e5r8] {
        position: absolute;
        z-index: 3;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 94%);
    }
}

@media (max-width: 640px) {
    .history-serial-inspector[b-m98xh8e5r8] {
        width: 100%;
        border-radius: 12px;
    }

    .history-serial-summary-action[b-m98xh8e5r8] {
        font-size: 0;
    }

    .history-serial-summary-action i[b-m98xh8e5r8] {
        font-size: 9px;
    }

    .serial-inspector-context > div[b-m98xh8e5r8] {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .serial-inspector-list[b-m98xh8e5r8] {
        grid-template-columns: 1fr;
    }
}

/* Compact audit table aligned with the shared inbound table rhythm. */
.history-v1 .history-table-heading[b-m98xh8e5r8] {
    min-height: 58px;
    padding: 10px 14px;
}

.history-v1 .history-table-heading h2[b-m98xh8e5r8] { color: #172033; font-size: 16px; }

.history-v1 .table-state[b-m98xh8e5r8] {
    gap: 6px;
    padding: 6px 10px;
    color: #059669;
    background: #d1fae5;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.history-v1 .live-dot[b-m98xh8e5r8] { width: 6px; height: 6px; box-shadow: none; }

.history-v1 .history-search-bar[b-m98xh8e5r8] {
    align-items: center;
}

.history-v1 .history-search-bar .wms-filter-label[b-m98xh8e5r8] { white-space: nowrap; }

.history-v1 .history-table-region[b-m98xh8e5r8]  .table-container { padding: 0 12px 10px; }

.history-v1 .history-table-region[b-m98xh8e5r8]  thead th {
    height: 55px;
    padding: 8px;
    font-size: 12px;
    line-height: 1.25;
}

.history-v1 .history-table-region[b-m98xh8e5r8]  thead th .table-cell,
.history-v1 .history-table-region[b-m98xh8e5r8]  thead th .table-text {
    min-height: 1.65em;
    line-height: 1.5;
    overflow: visible;
}

.history-v1 .history-table-region[b-m98xh8e5r8]  .table-fixed-body tbody .table-cell {
    min-height: 70px;
    padding: 6px 0;
}

.history-v1 .history-cell[b-m98xh8e5r8] { gap: 3px; }
.history-v1 .history-stock-cell[b-m98xh8e5r8] { gap: 4px; }
.history-v1 .history-stock-cell > div[b-m98xh8e5r8] { padding: 5px 7px; }
.history-v1 .history-activity-cell[b-m98xh8e5r8] { min-width: 190px; gap: 6px; }
.history-v1 .history-activity-step[b-m98xh8e5r8] { grid-template-columns: 20px minmax(0, 1fr); gap: 6px; }
.history-v1 .history-activity-icon[b-m98xh8e5r8] { width: 18px; height: 18px; border-radius: 6px; }
.history-v1 .history-activity-details > div[b-m98xh8e5r8] { grid-template-columns: max-content minmax(0, 1fr); gap: 8px; }
.history-v1 .history-activity-label[b-m98xh8e5r8] { white-space: nowrap; letter-spacing: normal; font-size: 10px; }
.history-v1 .history-activity-details[b-m98xh8e5r8] { gap: 3px; line-height: 1.4; }

@media (max-width: 760px) {
    .history-v1 .history-search-bar[b-m98xh8e5r8] { grid-template-columns: 1fr 1fr; }
    .history-v1 .history-search-bar .wms-filter-label[b-m98xh8e5r8] { grid-column: 1 / -1; }
}

/* Compact semantic icons used by the history ledger cells. */
.history-cell strong > i[b-m98xh8e5r8],
.history-cell > span > i[b-m98xh8e5r8],
.history-route-point strong > i[b-m98xh8e5r8],
.history-route-point small > i[b-m98xh8e5r8],
.history-stock-cell span > i[b-m98xh8e5r8],
.history-stock-cell dt > i[b-m98xh8e5r8],
.history-remark > i[b-m98xh8e5r8] {
    display: inline-block;
    width: 15px;
    color: #287fc9;
    text-align: center;
}

.history-process-cell > small span[b-m98xh8e5r8],
.history-tags small[b-m98xh8e5r8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.history-process-cell > small i[b-m98xh8e5r8],
.history-tags small i[b-m98xh8e5r8] {
    color: #6f9bc5;
    font-size: 8px;
}

.history-status i[b-m98xh8e5r8] {
    margin-right: 4px;
    font-size: 8px;
}

.history-remark[b-m98xh8e5r8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Cycle-count stock and the compact multi-column serial inspector. */
.history-stock-cell.is-quantity-only > div:first-child[b-m98xh8e5r8] {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
}

.history-table-workspace.serial-inspector-open[b-m98xh8e5r8] {
    grid-template-columns: minmax(0, 1fr) clamp(390px, 31vw, 500px);
}

.serial-inspector-title[b-m98xh8e5r8] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.serial-inspector-title-icon[b-m98xh8e5r8] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: #1767c8;
    background: #e6f1ff;
    border-radius: 10px;
}

.serial-inspector-header h2 b[b-m98xh8e5r8] {
    margin-left: 5px;
    padding: 2px 7px;
    color: #1767c8;
    background: #e7f2ff;
    border-radius: 999px;
    font-size: 11px;
}

.serial-inspector-header p i[b-m98xh8e5r8] { margin-right: 5px; color: #5f91c4; }

.serial-inspector-context[b-m98xh8e5r8] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.serial-inspector-context > div[b-m98xh8e5r8] {
    padding: 8px 9px;
    grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 8px;
}

.serial-inspector-context > div:last-child[b-m98xh8e5r8] { grid-column: 1 / -1; }

.serial-inspector-context span[b-m98xh8e5r8] {
    grid-row: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.serial-inspector-context span i[b-m98xh8e5r8] { color: #3984c9; }

.serial-inspector-list[b-m98xh8e5r8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.serial-inspector-item[b-m98xh8e5r8] { grid-template-columns: 26px 20px minmax(0, 1fr); }

.serial-inspector-item > i[b-m98xh8e5r8] {
    color: #2f80cc;
    text-align: center;
    font-size: 9px;
}

@media (max-width: 1180px) {
    .history-table-workspace.serial-inspector-open[b-m98xh8e5r8] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .serial-inspector-context[b-m98xh8e5r8],
    .serial-inspector-list[b-m98xh8e5r8] { grid-template-columns: 1fr; }
    .serial-inspector-context > div:last-child[b-m98xh8e5r8] { grid-column: auto; }
}

.history-product-cell > span[b-m98xh8e5r8] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: unset;
}
/* _content/WMS.UI/Pages/Reports/InboundOrdersReport.razor.rz.scp.css */
[b-e2qv1qdtk9] .inbound-report-transition {
    height: 100%;
    display: block;
}

.inbound-report-page[b-e2qv1qdtk9] {
    min-height: 100%;
    padding: 18px;
    background: #f4f7fb;
    color: #12213f;
}

.report-hero[b-e2qv1qdtk9] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.report-eyebrow[b-e2qv1qdtk9] {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.report-heading h1[b-e2qv1qdtk9] {
    margin: 4px 0 3px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}

.report-heading p[b-e2qv1qdtk9], .panel-heading p[b-e2qv1qdtk9] {
    margin: 0;
    color: #66758f;
    font-size: 13px;
}

.report-actions[b-e2qv1qdtk9] {
    display: flex;
    gap: 10px;
}

.report-button[b-e2qv1qdtk9] {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d5deea;
    border-radius: 9px;
    background: #fff;
    color: #1c2b49;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(15, 44, 88, .06);
}

    .report-button:hover[b-e2qv1qdtk9] {
        border-color: #2563eb;
        color: #2563eb;
    }

.report-summary[b-e2qv1qdtk9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.summary-card[b-e2qv1qdtk9] {
    min-width: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(30, 64, 120, .05);
}

.summary-icon[b-e2qv1qdtk9] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 19px;
}

.summary-card > div:last-child[b-e2qv1qdtk9] {
    min-width: 0;
    display: grid;
}

.summary-card span[b-e2qv1qdtk9] {
    color: #66758f;
    font-size: 12px;
}

.summary-card strong[b-e2qv1qdtk9] {
    font-size: 25px;
    line-height: 1.15;
}

.summary-card small[b-e2qv1qdtk9] {
    color: #8a98ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-card-primary .summary-icon[b-e2qv1qdtk9] {
    background: #e7efff;
    color: #2563eb;
}

.summary-card-success .summary-icon[b-e2qv1qdtk9] {
    background: #dcf8e8;
    color: #0f9f55;
}

.summary-card-info .summary-icon[b-e2qv1qdtk9] {
    background: #dcf7fb;
    color: #0891b2;
}

.summary-card-danger .summary-icon[b-e2qv1qdtk9] {
    background: #fee8e8;
    color: #dc2626;
}

.report-workspace[b-e2qv1qdtk9] {
    min-width: 0;
    background: #fff;
    border: 1px solid #d8e2ef;
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(25, 57, 105, .06);
}

[b-e2qv1qdtk9] .report-tabs > .tabs-header {
    padding: 0 16px;
    background: #f8fafc;
    border-bottom: 1px solid #dce4ef;
}

.report-tab[b-e2qv1qdtk9] {
    height: 52px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5d6c83;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 700;
}

    .report-tab.active[b-e2qv1qdtk9] {
        color: #2563eb;
        border-color: #2563eb;
        background: #fff;
    }

.report-panel[b-e2qv1qdtk9] {
    min-width: 0;
}

.panel-heading[b-e2qv1qdtk9] {
    min-height: 74px;
    padding: 15px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e2e8f0;
}

    .panel-heading h2[b-e2qv1qdtk9] {
        margin: 0 0 3px;
        font-size: 17px;
        font-weight: 800;
    }

.report-live-meta[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #708096;
    font-size: 10px;
    white-space: nowrap;
}

    .report-live-meta > span:first-child[b-e2qv1qdtk9] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .report-live-meta > span:first-child i[b-e2qv1qdtk9] {
            color: #1769d2;
        }

.live-badge[b-e2qv1qdtk9] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: #d8fae8;
    color: #008a50;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    white-space: nowrap;
}

    .live-badge i[b-e2qv1qdtk9] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #13c475;
    }

.inbound-table-host[b-e2qv1qdtk9]  .table-shim {
    margin-top: 0px !important;
}

.report-table-shell[b-e2qv1qdtk9] {
    min-width: 0;
    height: clamp(440px, calc(100vh - 390px), 650px);
    padding: 10px 12px 12px;
    overflow: hidden;
}

[b-e2qv1qdtk9] .report-table-shell .table-container {
    max-width: 100%;
}

[b-e2qv1qdtk9] .report-table-shell .table-wrapper {
    max-width: 100%;
    overflow: auto;
}

[b-e2qv1qdtk9] .report-table-shell table {
    font-size: 13px;
}

[b-e2qv1qdtk9] .report-table-shell thead th {
    height: 43px;
    background: #1f65bb !important;
    color: #fff;
    border-color: rgba(255,255,255,.13) !important;
    vertical-align: middle;
}

[b-e2qv1qdtk9] .report-table-shell tbody td {
    height: 45px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-color: #e5eaf1 !important;
    vertical-align: middle;
}

[b-e2qv1qdtk9] .report-table-shell tbody tr:hover td {
    background: #f5f9ff;
}

[b-e2qv1qdtk9] .report-table-shell .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-pill[b-e2qv1qdtk9] {
    min-height: 26px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.status-complete[b-e2qv1qdtk9] {
    background: #dcf8e8;
    color: #078447;
}

.status-receiving[b-e2qv1qdtk9] {
    background: #dff1ff;
    color: #0878bd;
}

.status-cancel[b-e2qv1qdtk9] {
    background: #fee6e6;
    color: #cf2727;
}

.status-close[b-e2qv1qdtk9] {
    background: #fff0cd;
    color: #a66500;
}

.status-new[b-e2qv1qdtk9] {
    background: #edf1f6;
    color: #526176;
}

.document-detail[b-e2qv1qdtk9] {
    margin: 10px 12px 16px;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid #cfdced;
    border-radius: 12px;
    box-shadow: inset 4px 0 #2563eb;
}

.detail-header[b-e2qv1qdtk9] {
    padding: 15px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid #dce5f0;
}

.detail-title[b-e2qv1qdtk9] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.detail-icon[b-e2qv1qdtk9] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e8f0ff;
    color: #2563eb;
}

.detail-title span[b-e2qv1qdtk9] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.detail-title h3[b-e2qv1qdtk9] {
    margin: 1px 0 2px;
    font-size: 16px;
    font-weight: 800;
}

.detail-title p[b-e2qv1qdtk9] {
    margin: 0;
    color: #6b7890;
    font-size: 12px;
}

.detail-progress-grid[b-e2qv1qdtk9] {
    padding: 14px 16px;
    display: grid;
    grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(100px, .7fr));
    gap: 10px;
}

.progress-overview[b-e2qv1qdtk9], .detail-metric[b-e2qv1qdtk9] {
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 9px;
}

.progress-label[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #53627a;
}

    .progress-label strong[b-e2qv1qdtk9] {
        color: #0f9f55;
        font-size: 18px;
    }

.progress-track[b-e2qv1qdtk9] {
    height: 8px;
    margin: 9px 0 7px;
    overflow: hidden;
    background: #e9eef5;
    border-radius: 999px;
}

.progress-value[b-e2qv1qdtk9] {
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg, #13a75a, #39c977);
    border-radius: inherit;
    transition: width .25s ease;
}

.progress-overview small[b-e2qv1qdtk9] {
    color: #7b889c;
}

.detail-metric[b-e2qv1qdtk9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .detail-metric span[b-e2qv1qdtk9] {
        color: #748198;
        font-size: 11px;
    }

    .detail-metric strong[b-e2qv1qdtk9] {
        margin-top: 3px;
        font-size: 22px;
        color: #213250;
    }

.metric-success strong[b-e2qv1qdtk9] {
    color: #0f9f55;
}

.metric-warning strong[b-e2qv1qdtk9] {
    color: #d48700;
}

.metric-muted strong[b-e2qv1qdtk9] {
    color: #718096;
}

.detail-table-shell[b-e2qv1qdtk9] {
    min-width: 0;
    margin: 0 16px 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 9px;
}

[b-e2qv1qdtk9] .detail-table-shell .table-wrapper {
    max-width: 100%;
    overflow: auto;
}

[b-e2qv1qdtk9] .detail-table-shell thead th {
    background: #edf3fb !important;
    color: #334562;
    border-color: #dce5f0 !important;
}

[b-e2qv1qdtk9] .detail-table-shell tbody td {
    background: #fff;
}

@media (max-width: 1100px) {
    .report-summary[b-e2qv1qdtk9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-table-shell[b-e2qv1qdtk9] {
        height: calc(100vh - 470px);
        min-height: 420px;
    }
}

@media (max-width: 1350px) {
    .detail-progress-grid[b-e2qv1qdtk9] {
        grid-template-columns: repeat(4, 1fr);
    }

    .progress-overview[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .inbound-report-page[b-e2qv1qdtk9] {
        padding: 12px;
    }

    .report-hero[b-e2qv1qdtk9] {
        align-items: stretch;
        flex-direction: column;
    }

    .report-heading h1[b-e2qv1qdtk9] {
        font-size: 23px;
    }

    .report-actions[b-e2qv1qdtk9], .report-button[b-e2qv1qdtk9] {
        width: 100%;
    }

    .report-summary[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-e2qv1qdtk9] {
        padding: 13px;
    }

    .panel-heading[b-e2qv1qdtk9] {
        align-items: flex-start;
    }

    .report-tab[b-e2qv1qdtk9] {
        padding: 0 12px;
        font-size: 13px;
    }

    .report-table-shell[b-e2qv1qdtk9] {
        height: 520px;
        padding: 8px;
    }

    .detail-header[b-e2qv1qdtk9] {
        align-items: flex-start;
    }

    .detail-progress-grid[b-e2qv1qdtk9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .progress-overview[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }

    .document-detail[b-e2qv1qdtk9] {
        margin: 8px 4px 12px;
    }

    .detail-table-shell[b-e2qv1qdtk9] {
        margin: 0 10px 10px;
    }
}

/* Expanded master-detail rows must grow with their content. */
.document-table-shell[b-e2qv1qdtk9] {
    height: auto;
    min-height: 0;
    overflow: visible;
}

[b-e2qv1qdtk9] .document-table-shell .table-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-wrapper {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto;
    overflow-y: visible;
}

[b-e2qv1qdtk9] .document-table-shell .table-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

[b-e2qv1qdtk9] .detail-items-table thead th,
[b-e2qv1qdtk9] .detail-table-shell .table thead th {
    background: #eaf2ff !important;
    color: #244a7c !important;
    border-color: #d4e0ef !important;
}

[b-e2qv1qdtk9] .detail-items-table tbody td {
    background: #fff !important;
    border-color: #e4eaf2 !important;
}


/* Custom inbound report filters */
.report-filter-bar[b-e2qv1qdtk9] {
    display: grid;
    grid-template-columns: minmax(280px, 1.55fr) repeat(3, minmax(175px, .85fr)) auto auto;
    gap: 10px;
    align-items: center;
    padding: 0px 0px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
}

.report-filter-control[b-e2qv1qdtk9] {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 13px;
    color: #64748b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .report-filter-control:focus-within[b-e2qv1qdtk9] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .report-filter-control > i:first-child[b-e2qv1qdtk9] {
        flex: 0 0 auto;
        margin-right: 9px;
        color: #64748b;
    }

    .report-filter-control input[b-e2qv1qdtk9],
    .report-filter-control select[b-e2qv1qdtk9] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        color: #334155;
        font: inherit;
        background: transparent;
        border: 0;
        outline: 0;
    }

    .report-filter-control select[b-e2qv1qdtk9] {
        padding-right: 20px;
        cursor: pointer;
        appearance: none;
    }

.report-filter-chevron[b-e2qv1qdtk9] {
    position: absolute;
    right: 13px;
    margin: 0 !important;
    font-size: 10px;
    pointer-events: none;
}

.report-custom-date-range[b-e2qv1qdtk9] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    gap: 7px;
    align-items: center;
    grid-column: 2 / -1;
}

.report-date-input[b-e2qv1qdtk9] {
    gap: 8px;
}

    .report-date-input > span[b-e2qv1qdtk9] {
        flex: 0 0 auto;
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }

    .report-date-input input[b-e2qv1qdtk9] {
        color: #334155;
        cursor: pointer;
    }

.report-date-separator[b-e2qv1qdtk9] {
    color: #94a3b8;
    font-weight: 700;
}

.report-filter-actions[b-e2qv1qdtk9] {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
}

.report-filter-button[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 118px;
    height: 42px;
    padding: 0 15px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 8px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    .report-filter-button:hover[b-e2qv1qdtk9] {
        transform: translateY(-1px);
    }

.report-filter-apply[b-e2qv1qdtk9] {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 5px 12px rgba(37, 99, 235, .18);
}

    .report-filter-apply:hover[b-e2qv1qdtk9] {
        background: #1d4ed8;
    }

.report-filter-clear[b-e2qv1qdtk9] {
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
}

    .report-filter-clear:hover[b-e2qv1qdtk9] {
        color: #1e293b;
        background: #f8fafc;
    }

@media (max-width: 1350px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(170px, 1fr));
    }

        .report-filter-bar > :nth-child(4)[b-e2qv1qdtk9] {
            grid-column: 1 / 2;
        }
}

@media (max-width: 820px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr 1fr;
    }

        .report-filter-search[b-e2qv1qdtk9],
        .report-filter-bar > :nth-child(4)[b-e2qv1qdtk9] {
            grid-column: 1 / -1;
        }

    .report-filter-button[b-e2qv1qdtk9] {
        width: 100%;
    }

    .report-custom-date-range[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }

    .report-filter-actions[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
    }

        .report-filter-search[b-e2qv1qdtk9],
        .report-filter-bar > :nth-child(4)[b-e2qv1qdtk9] {
            grid-column: auto;
        }

    .report-custom-date-range[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
        grid-column: auto;
    }

    .report-date-separator[b-e2qv1qdtk9] {
        display: none;
    }

    .report-filter-actions[b-e2qv1qdtk9] {
        display: grid;
        grid-template-columns: 1fr;
        grid-column: auto;
    }
}


/* Compact document table and modal document details */
.document-table-shell[b-e2qv1qdtk9] {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: calc(100vh - 405px);
    padding: 8px 12px 10px;
    overflow: hidden;
}

[b-e2qv1qdtk9] .document-table-shell .table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-wrapper,
[b-e2qv1qdtk9] .document-table-shell .table-body {
    max-width: 100% !important;
    overflow-x: auto !important;
}

[b-e2qv1qdtk9] .document-table-shell table {
    min-width: 1260px;
    font-size: 11px !important;
}

[b-e2qv1qdtk9] .document-table-shell thead th {
    height: 35px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
    line-height: 1.15;
}

[b-e2qv1qdtk9] .document-table-shell tbody td {
    height: 36px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.25;
}

[b-e2qv1qdtk9] .document-table-shell .table-footer {
    min-height: 43px;
    font-size: 12px;
}

.document-number-link[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 2px 0;
    color: #175bb4;
    font: inherit;
    font-weight: 750;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

    .document-number-link:hover[b-e2qv1qdtk9] {
        color: #0f468f;
        text-decoration: underline;
    }

    .document-number-link span[b-e2qv1qdtk9] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.document-popup-backdrop[b-e2qv1qdtk9] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}

.document-popup[b-e2qv1qdtk9] {
    width: min(1420px, calc(100vw - 44px));
    max-height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fbff;
    border: 1px solid #cdd9e8;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}

.document-popup-header[b-e2qv1qdtk9] {
    flex: 0 0 auto;
    min-height: 76px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
}

    .document-popup-header h2[b-e2qv1qdtk9] {
        margin: 2px 0;
        color: #12213f;
        font-size: 19px;
        font-weight: 800;
    }

    .document-popup-header p[b-e2qv1qdtk9] {
        margin: 0;
        color: #708098;
        font-size: 12px;
    }

.document-popup-close[b-e2qv1qdtk9] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 18px;
    background: #f1f5f9;
    border: 0;
    border-radius: 9px;
}

    .document-popup-close:hover[b-e2qv1qdtk9] {
        color: #dc2626;
        background: #fee2e2;
    }

/* Report filters and table rows use the same compact hierarchy as Inbound. */
.report-filter-bar[b-e2qv1qdtk9] {
    grid-template-columns: auto minmax(280px, 1fr) repeat(3, minmax(175px, .85fr)) auto auto;
    align-items: center;
}

    .report-filter-bar .wms-filter-label[b-e2qv1qdtk9] {
        white-space: nowrap;
    }

[b-e2qv1qdtk9] .document-table-shell thead th {
    height: 55px !important;
    padding: 8px !important;
    font-size: 12px !important;
    line-height: 1.25;
}

    [b-e2qv1qdtk9] .document-table-shell thead th .table-cell,
    [b-e2qv1qdtk9] .document-table-shell thead th .table-text {
        min-height: 1.65em;
        line-height: 1.5;
        overflow: visible;
    }

[b-e2qv1qdtk9] .document-table-shell tbody td {
    height: 45px !important;
    padding: 4px 8px !important;
    vertical-align: middle !important;
}

.report-document-cell[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.report-document-icon[b-e2qv1qdtk9] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    color: #1768c5;
    background: #edf4fc;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.report-document-cell > div[b-e2qv1qdtk9],
.report-document-info[b-e2qv1qdtk9],
.report-updated-cell[b-e2qv1qdtk9] {
    min-width: 0;
}

    .report-document-cell small[b-e2qv1qdtk9],
    .report-document-info strong[b-e2qv1qdtk9],
    .report-document-info small[b-e2qv1qdtk9],
    .report-updated-cell strong[b-e2qv1qdtk9],
    .report-updated-cell small[b-e2qv1qdtk9] {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.report-document-cell .document-number-link[b-e2qv1qdtk9] {
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    color: #084f98;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-document-cell small[b-e2qv1qdtk9],
.report-document-info small[b-e2qv1qdtk9],
.report-updated-cell small[b-e2qv1qdtk9] {
    margin-top: 2px;
    color: #7b8ca2;
    font-size: 9px;
}

.report-document-info strong[b-e2qv1qdtk9],
.report-updated-cell strong[b-e2qv1qdtk9] {
    color: #183b65;
    font-size: 11px;
    font-weight: 700;
}

.report-company-pill[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 8px;
    overflow: hidden;
    color: #304f72;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-date-cell[b-e2qv1qdtk9] {
    color: #53677e;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 1350px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: auto minmax(240px, 1.4fr) repeat(2, minmax(170px, 1fr)) auto auto;
    }

        .report-filter-bar > :nth-child(5)[b-e2qv1qdtk9] {
            grid-column: 2 / 3;
        }
}

@media (max-width: 820px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr 1fr;
    }

        .report-filter-bar .wms-filter-label[b-e2qv1qdtk9],
        .report-filter-search[b-e2qv1qdtk9],
        .report-filter-bar > :nth-child(5)[b-e2qv1qdtk9] {
            grid-column: 1 / -1;
        }
}

@media (max-width: 560px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
    }

        .report-filter-bar .wms-filter-label[b-e2qv1qdtk9],
        .report-filter-search[b-e2qv1qdtk9],
        .report-filter-bar > :nth-child(5)[b-e2qv1qdtk9] {
            grid-column: auto;
        }

    .report-filter-button[b-e2qv1qdtk9] {
        width: 100%;
    }
}

.document-popup-body[b-e2qv1qdtk9] {
    min-height: 0;
    padding: 14px 16px;
    overflow-y: auto;
}

.popup-progress-grid[b-e2qv1qdtk9] {
    margin-bottom: 12px;
}

.popup-detail-table-shell[b-e2qv1qdtk9] {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 10px;
    background: #fff;
}

[b-e2qv1qdtk9] .popup-items-table table {
    min-width: 1170px;
    font-size: 11px !important;
}

[b-e2qv1qdtk9] .popup-items-table thead th {
    height: 35px !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
}

[b-e2qv1qdtk9] .popup-items-table tbody td {
    height: 36px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
}

[b-e2qv1qdtk9] .popup-items-table .table-wrapper {
    max-width: 100%;
    overflow-x: auto !important;
}

.document-popup-footer[b-e2qv1qdtk9] {
    flex: 0 0 auto;
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    background: #fff;
    border-top: 1px solid #dbe4ef;
}

.popup-close-button[b-e2qv1qdtk9] {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

    .popup-close-button:hover[b-e2qv1qdtk9] {
        background: #f1f5f9;
    }

@media (max-width: 900px) {
    .document-table-shell[b-e2qv1qdtk9] {
        max-height: none;
    }

    .document-popup-backdrop[b-e2qv1qdtk9] {
        padding: 10px;
    }

    .document-popup[b-e2qv1qdtk9] {
        width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .popup-progress-grid[b-e2qv1qdtk9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .popup-progress-grid .progress-overview[b-e2qv1qdtk9] {
            grid-column: 1 / -1;
        }
}


/* 2026-08-24: compact report table, contained scrolling, and underline tabs */
.inbound-report-page[b-e2qv1qdtk9],
.report-workspace[b-e2qv1qdtk9],
.report-panel[b-e2qv1qdtk9],
.report-table-shell[b-e2qv1qdtk9] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

[b-e2qv1qdtk9] .report-tabs,
[b-e2qv1qdtk9] .report-tabs .tabs-body,
[b-e2qv1qdtk9] .report-tabs .tabs-content,
[b-e2qv1qdtk9] .report-tabs .tab-content,
[b-e2qv1qdtk9] .report-tabs .tab-pane {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    [b-e2qv1qdtk9] .report-tabs > .tabs-header {
        min-height: 49px;
        padding: 0 12px 0 0;
        background: #fff;
    }

    [b-e2qv1qdtk9] .report-tabs .tabs-nav,
    [b-e2qv1qdtk9] .report-tabs .tabs-nav-wrap,
    [b-e2qv1qdtk9] .report-tabs .tabs-nav-scroll {
        flex: 0 1 auto;
        justify-content: flex-start;
        background: #fff;
    }

    [b-e2qv1qdtk9] .report-tabs .tabs-item,
    [b-e2qv1qdtk9] .report-tabs .tabs-tab,
    [b-e2qv1qdtk9] .report-tabs .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
        background: #fff !important;
    }

.report-tab[b-e2qv1qdtk9] {
    height: 48px;
    padding: 0 16px;
    color: #53647d;
    background: #fff;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

    .report-tab:hover[b-e2qv1qdtk9] {
        color: #1d5fae;
        background: #f8fbff;
    }

    .report-tab.active[b-e2qv1qdtk9],
    [b-e2qv1qdtk9] .report-tabs .active .report-tab,
    [b-e2qv1qdtk9] .report-tabs .tabs-item.active .report-tab,
    [b-e2qv1qdtk9] .report-tabs .tabs-tab.active .report-tab,
    [b-e2qv1qdtk9] .report-tabs .nav-link.active .report-tab {
        color: #087f8c !important;
        background: #fff !important;
        border-bottom-color: #2f80ed !important;
        box-shadow: none !important;
    }

[b-e2qv1qdtk9] .report-tabs .active,
[b-e2qv1qdtk9] .report-tabs .tabs-item.active,
[b-e2qv1qdtk9] .report-tabs .tabs-tab.active,
[b-e2qv1qdtk9] .report-tabs .nav-link.active {
    color: inherit !important;
    background: #fff !important;
    box-shadow: none !important;
}

.document-table-shell[b-e2qv1qdtk9] {
    height: clamp(330px, calc(100vh - 405px), 570px);
    max-height: none;
    padding: 8px 12px 10px;
    overflow: hidden;
}

[b-e2qv1qdtk9] .document-table-shell > .table,
[b-e2qv1qdtk9] .document-table-shell .table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

[b-e2qv1qdtk9] .document-table-shell .table-body {
    min-width: 0;
    overflow: visible !important;
}

[b-e2qv1qdtk9] .document-table-shell table {
    width: max-content !important;
    min-width: 1120px !important;
    color: #334155;
    font-size: 10.5px !important;
    font-weight: 400 !important;
}

[b-e2qv1qdtk9] .document-table-shell thead th {
    height: 34px !important;
    padding: 4px 7px !important;
    color: #f8fbff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

[b-e2qv1qdtk9] .document-table-shell tbody td {
    height: 34px !important;
    padding: 4px 7px !important;
    color: #334155 !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.2;
    white-space: nowrap;
}

    [b-e2qv1qdtk9] .document-table-shell tbody td *:not(.status-pill:not(i)) {
        font-size: inherit;
        font-weight: inherit;
    }

.document-number-link[b-e2qv1qdtk9] {
    color: #175da8;
    font-size: 10.5px;
    font-weight: 600;
}

.status-pill[b-e2qv1qdtk9] {
    min-height: 22px;
    padding: 3px 7px;
    font-size: 9.5px;
    font-weight: 600;
}

[b-e2qv1qdtk9] .document-table-shell .table-footer {
    flex: 0 0 auto;
    min-height: 40px;
    color: #475569;
    font-size: 11px;
    font-weight: 400;
}

@media (max-width: 900px) {
    .document-table-shell[b-e2qv1qdtk9] {
        height: 480px;
        max-height: min(480px, calc(100vh - 250px));
    }

    .report-tab[b-e2qv1qdtk9] {
        padding: 0 12px;
        font-size: 12px;
    }
}


/* Override the global color5 tab theme for this report only. */
.inbound-report-page[b-e2qv1qdtk9]  .report-tabs .tabs-nav > .report-tab.tabs-item {
    color: #53647d !important;
    background-color: #fff !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
}

    .inbound-report-page[b-e2qv1qdtk9]  .report-tabs .tabs-nav > .report-tab.tabs-item:hover {
        color: #1d5fae !important;
        background-color: #f8fbff !important;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .report-tabs .tabs-nav > .report-tab.tabs-item.active,
    .inbound-report-page[b-e2qv1qdtk9]  .report-tabs .tabs-nav > .report-tab.tabs-item.active:hover {
        color: #087f8c !important;
        background-color: #fff !important;
        border: 0 !important;
        border-bottom: 2px solid #2f80ed !important;
        box-shadow: none !important;
    }


/* Normalize typography inside generated table cells and improve native select spacing. */
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td div,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td span,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td a,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td button,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td label {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.inbound-report-page .document-number-link[b-e2qv1qdtk9],
.inbound-report-page .document-number-link span[b-e2qv1qdtk9] {
    font-size: 10px !important;
    font-weight: 600 !important;
}

.inbound-report-page .status-pill[b-e2qv1qdtk9],
.inbound-report-page .status-pill span[b-e2qv1qdtk9] {
    font-size: 9px !important;
    font-weight: 600 !important;
}

.report-filter-control select[b-e2qv1qdtk9] {
    padding-left: 8px !important;
    padding-right: 30px !important;
    text-indent: 0;
}

    .report-filter-control select option[b-e2qv1qdtk9] {
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 400;
    }


/* Compact filters and the actual ATCRazor pagination markup */
.report-filter-bar[b-e2qv1qdtk9] {
    gap: 8px;
    padding: 9px 12px;
    padding-bottom:0px !important;
}

.report-filter-control[b-e2qv1qdtk9] {
    height: 36px;
    padding: 0 10px;
    border-radius: 7px;
    font-size: 11px;
}

    .report-filter-control > i:first-child[b-e2qv1qdtk9] {
        margin-right: 7px;
        font-size: 11px;
    }

    .report-filter-control select[b-e2qv1qdtk9] {
        padding-left: 4px !important;
        padding-right: 25px !important;
        font-size: 11px;
    }

.report-filter-chevron[b-e2qv1qdtk9] {
    right: 10px;
    font-size: 9px;
}

.report-filter-button[b-e2qv1qdtk9] {
    min-width: 104px;
    height: 36px;
    padding: 0 12px;
    gap: 6px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 650;
}

.report-filter-search input[b-e2qv1qdtk9] {
    font-size: 11px;
}

[b-e2qv1qdtk9] .document-table-shell .nav-pages {
    min-height: 44px;
    padding: 6px 0 0;
    font-size: 11px !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-page-info,
[b-e2qv1qdtk9] .document-table-shell .table-page-info > div {
    font-size: 11px !important;
    line-height: 1 !important;
}

    [b-e2qv1qdtk9] .document-table-shell .table-page-info .select {
        width: 104px !important;
        height: 32px;
        min-height: 32px;
        overflow: hidden;
        border-radius: 8px !important;
    }

        [b-e2qv1qdtk9] .document-table-shell .table-page-info .select .form-select {
            height: 32px;
            min-height: 32px;
            padding: 0 28px 0 10px !important;
            border: 1px solid #d5deea !important;
            border-radius: 8px !important;
            background-color: #fff;
            font-size: 11px !important;
            line-height: 30px;
            box-shadow: none !important;
        }

        [b-e2qv1qdtk9] .document-table-shell .table-page-info .select .dropdown-menu {
            min-width: 104px;
            border-radius: 8px;
            font-size: 11px;
        }

[b-e2qv1qdtk9] .document-table-shell .pagination {
    font-size: 11px !important;
}

@media (max-width: 820px) {
    .report-filter-bar[b-e2qv1qdtk9] {
        gap: 7px;
        padding: 8px;
    }
}


/* Keep the document header more prominent than its compact body rows. */
[b-e2qv1qdtk9] .document-table-shell thead th,
[b-e2qv1qdtk9] .document-table-shell thead th .table-cell,
[b-e2qv1qdtk9] .document-table-shell thead th .table-text,
[b-e2qv1qdtk9] .document-table-shell thead th span {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}


/* 2026-08-24: composed report workspace layout */
.inbound-report-page[b-e2qv1qdtk9] {
    padding: 22px 20px 20px;
    background: #f4f7fb;
}

.report-hero[b-e2qv1qdtk9] {
    margin-bottom: 14px;
}

.report-heading h1[b-e2qv1qdtk9] {
    margin-top: 4px;
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1.15;
}

.report-summary[b-e2qv1qdtk9] {
    gap: 12px;
    margin-bottom: 14px;
}

.summary-card[b-e2qv1qdtk9] {
    min-height: 96px;
    padding: 15px 16px;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(31, 55, 86, .055);
}

.summary-icon[b-e2qv1qdtk9] {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.summary-card strong[b-e2qv1qdtk9] {
    font-size: 25px;
    line-height: 1;
}

.report-workspace[b-e2qv1qdtk9] {
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 55, 86, .055);
}

.report-panel[b-e2qv1qdtk9] {
    padding: 18px 16px 14px;
    background: #fff;
}

.filter-section[b-e2qv1qdtk9] {
    margin: 0 0 12px;
    overflow: visible;
    border: 1px solid #dce5ef;
    border-radius: 11px;
    background: #fff;
}

.filter-section-heading[b-e2qv1qdtk9] {
    min-height: 50px;
    border-bottom: 0;
}

.filter-section-toggle[b-e2qv1qdtk9] {
    width: 100%;
    min-height: 50px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #172b4d;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 10px;
}

    .filter-section-toggle:hover[b-e2qv1qdtk9] {
        background: #f8fbff;
    }

.filter-section-label[b-e2qv1qdtk9],
.filter-section-state[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
}

.filter-section-label[b-e2qv1qdtk9] {
    gap: 10px;
}

    .filter-section-label > span:last-child[b-e2qv1qdtk9] {
        display: flex;
        flex-direction: column;
    }

    .filter-section-label strong[b-e2qv1qdtk9] {
        font-size: 13px;
        font-weight: 750;
    }

    .filter-section-label small[b-e2qv1qdtk9] {
        margin-top: 1px;
        color: #718096;
        font-size: 10.5px;
    }

.filter-section-icon[b-e2qv1qdtk9] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 9px;
}

.filter-section-state[b-e2qv1qdtk9] {
    gap: 8px;
    color: #64748b;
    font-size: 10.5px;
}

.filter-section .report-filter-bar[b-e2qv1qdtk9] {
    padding: 10px 12px 12px;
    border-top: 1px solid #edf1f6;
    border-bottom: 0;
    border-radius: 0 0 11px 11px;
}

.document-table-shell[b-e2qv1qdtk9] {
    padding: 0;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
}

[b-e2qv1qdtk9] .document-table-shell thead th {
    height: 36px !important;
    font-size: 11.5px !important;
}

[b-e2qv1qdtk9] .document-table-shell tbody td {
    height: 34px !important;
    font-size: 10.5px !important;
}

[b-e2qv1qdtk9] .document-table-shell .nav-pages {
    padding: 7px 10px 8px;
    background: #fff;
    border-top: 1px solid #e4eaf2;
}

@media (max-width: 820px) {
    .inbound-report-page[b-e2qv1qdtk9] {
        padding: 12px 10px;
    }

    .report-panel[b-e2qv1qdtk9] {
        padding: 12px 9px;
    }

    .filter-section-state span[b-e2qv1qdtk9] {
        display: none;
    }
}

/* 2026-08-27: keep the document table inside the viewport.
   Match the fixed-header scroll structure used by Container Management. */
.document-table-shell[b-e2qv1qdtk9] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-e2qv1qdtk9] .document-table-shell > .table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 0 !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-fixed,
[b-e2qv1qdtk9] .document-table-shell .table-fixed-header,
[b-e2qv1qdtk9] .document-table-shell .table-fixed-body,
[b-e2qv1qdtk9] .document-table-shell .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[b-e2qv1qdtk9] .document-table-shell .table-fixed {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-e2qv1qdtk9] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-e2qv1qdtk9] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

    [b-e2qv1qdtk9] .document-table-shell .table-fixed-header > table,
    [b-e2qv1qdtk9] .document-table-shell .table-fixed-body > table {
        width: max-content !important;
        min-width: 1120px !important;
        max-width: none !important;
    }

[b-e2qv1qdtk9] .document-table-shell .table-footer,
[b-e2qv1qdtk9] .document-table-shell .nav-pages {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    overflow: hidden;
}



/* 2026-08-27: make the report grid fit the card like Container Management.
   The previous max-content/min-width rules kept forcing horizontal overflow. */
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-header > table,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body > table,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell thead th,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
    overflow-x: hidden !important;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-header,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
    padding-right: 0 !important;
}


/* 2026-08-27: constrain the report vertically inside the application viewport.
   Account for the hero, summary, tabs and expanded filter before sizing the grid. */
.inbound-report-page[b-e2qv1qdtk9] {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

    .inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
        height: clamp(260px, calc(100dvh - 520px), 500px);
        min-height: 260px;
        max-height: none;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
        min-height: 0 !important;
    }

    /* A collapsed filter frees its vertical space back to the table. */
    .inbound-report-page:has(.filter-section-heading + form) .document-table-shell[b-e2qv1qdtk9] {
        height: clamp(260px, calc(100dvh - 520px), 500px);
    }

    .inbound-report-page:not(:has(.filter-section-heading + form)) .document-table-shell[b-e2qv1qdtk9] {
        height: clamp(310px, calc(100dvh - 430px), 590px);
    }

@media (max-height: 760px) {
    .inbound-report-page[b-e2qv1qdtk9] {
        padding-top: 12px;
        padding-bottom: 12px;
    }

        .inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
            height: 260px;
        }
}

/* Keep the document dialog inside the report workspace so the application
   sidebar cannot cover the dialog title or controls. */
.document-popup-backdrop[b-e2qv1qdtk9] {
    box-sizing: border-box;
}

.document-popup[b-e2qv1qdtk9] {
    width: min(1420px, 100%);
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .document-popup-backdrop[b-e2qv1qdtk9] {
        left: var(--bb-layout-sidebar-width, 244px);
    }
}

@media (max-width: 767.98px) {
    .document-popup-backdrop[b-e2qv1qdtk9] {
        left: 0;
        padding: 10px;
    }

    .document-popup[b-e2qv1qdtk9] {
        width: 100%;
        max-height: calc(100dvh - 20px);
    }
}

/* Keep filters and the document grid inside one continuous frame. */
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-toolbar {
    min-height: 0;
    /*padding: 0 !important;*/
    border: 0 !important;
    box-shadow: none !important;
}

.inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
    width: 100%;
    margin: 0;
    padding: 0px 0px;
    border: 0;
    border-radius: 0;
    background: #f8fbff;
}

/* Serial numbers stay readable without making a detail row indefinitely tall. */
.inbound-serial-cell[b-e2qv1qdtk9] {
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 2px 0;
}

.inbound-serial-cell__summary[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #56708e;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

    .inbound-serial-cell__summary i[b-e2qv1qdtk9] {
        color: #1769c2;
    }

    .inbound-serial-cell__summary strong[b-e2qv1qdtk9] {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: inline-grid;
        place-items: center;
        color: #1769c2;
        background: #e8f2ff;
        border-radius: 999px;
        font-size: 9px;
    }

.inbound-serial-cell__list[b-e2qv1qdtk9] {
    max-height: 50px;
    padding-right: 4px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9db6d0 transparent;
}

.inbound-serial-chip[b-e2qv1qdtk9] {
    min-width: 0;
    height: 22px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #154f8c;
    background: #e8f2ff;
    border: 1px solid #c6dcf5;
    border-radius: 6px;
    font-family: Consolas, monospace;
    font-size: 9px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbound-serial-cell__empty[b-e2qv1qdtk9] {
    color: #94a3b8;
    font-size: 9.5px;
}

.inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody td {
    height: auto !important;
    min-height: 66px;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .inbound-serial-cell__list[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
    }
}


/* 2026-08-27: use the same remaining-space flex layout as Container Management.
   These final rules intentionally replace all viewport-height calculations above. */
[b-e2qv1qdtk9] .inbound-report-transition {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
}

.inbound-report-page[b-e2qv1qdtk9] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
}

.report-hero[b-e2qv1qdtk9],
.report-summary[b-e2qv1qdtk9] {
    flex: 0 0 auto;
}

.report-workspace[b-e2qv1qdtk9] {
    width: 100%;
    min-width: 0;
    min-height: 440px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-e2qv1qdtk9] .report-workspace > .report-tabs,
[b-e2qv1qdtk9] .report-workspace > .tabs,
[b-e2qv1qdtk9] .report-tabs {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    [b-e2qv1qdtk9] .report-tabs > .tabs-header {
        flex: 0 0 auto;
    }

    [b-e2qv1qdtk9] .report-tabs > .tabs-body,
    [b-e2qv1qdtk9] .report-tabs .tabs-content,
    [b-e2qv1qdtk9] .report-tabs .tab-content,
    [b-e2qv1qdtk9] .report-tabs .tab-pane,
    [b-e2qv1qdtk9] .report-tabs .tabs-body-content {
        width: 100%;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

.report-panel[b-e2qv1qdtk9] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell > .table,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-container,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-wrapper {
    min-height: 0;
    flex: 1 1 auto;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-toolbar,
.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .nav-pages {
    flex: 0 0 auto;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto !important;
}

@media (max-height: 760px) {
    .report-workspace[b-e2qv1qdtk9] {
        min-height: 440px;
    }

    .inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
        height: auto;
        min-height: 0;
    }
}

/* 2026-09-08: serial inspector popup */
.document-popup[b-e2qv1qdtk9] {
    width: min(1540px, 100%);
    max-width: 100%;
    min-width: 0;
    max-height: calc(100dvh - 32px);
}

.document-popup-body[b-e2qv1qdtk9] {
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px;
    overflow: hidden;
}

.document-popup-workspace[b-e2qv1qdtk9] {
    height: min(620px, calc(100dvh - 180px));
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 12px;
}

.document-popup-main[b-e2qv1qdtk9] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    .document-popup-main .popup-progress-grid[b-e2qv1qdtk9] {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

.popup-table-heading[b-e2qv1qdtk9] {
    min-height: 48px;
    flex: 0 0 auto;
    padding: 0 2px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .popup-table-heading h3[b-e2qv1qdtk9] {
        margin: 0;
        color: #172b4d;
        font-size: 13px;
        font-weight: 800;
    }

    .popup-table-heading p[b-e2qv1qdtk9] {
        margin: 2px 0 0;
        color: #718096;
        font-size: 10px;
    }

    .popup-table-heading > span[b-e2qv1qdtk9] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 8px;
        color: #175da8;
        border-radius: 999px;
        background: #eaf3ff;
        font-size: 9px;
        font-weight: 800;
        white-space: nowrap;
    }

.popup-detail-table-shell[b-e2qv1qdtk9] {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

[b-e2qv1qdtk9] .popup-items-table,
[b-e2qv1qdtk9] .popup-items-table > .table,
[b-e2qv1qdtk9] .popup-items-table .table-container {
    min-height: 0 !important;
    height: 100% !important;
}

    [b-e2qv1qdtk9] .popup-items-table table {
        width: 100% !important;
        min-width: 900px !important;
        table-layout: fixed;
    }

.layout.is-page.color5 .inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody tr {
    height: 74px !important;
}

.layout.is-page.color5 .inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody td {
    height: 74px !important;
    min-height: 74px !important;
    padding: 8px !important;
    vertical-align: middle;
}

.popup-product-cell[b-e2qv1qdtk9],
.popup-lot-cell[b-e2qv1qdtk9],
.popup-quantity-cell[b-e2qv1qdtk9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .popup-product-cell strong[b-e2qv1qdtk9],
    .popup-product-cell span[b-e2qv1qdtk9],
    .popup-product-cell small[b-e2qv1qdtk9],
    .popup-lot-cell strong[b-e2qv1qdtk9],
    .popup-lot-cell span[b-e2qv1qdtk9] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .popup-product-cell strong[b-e2qv1qdtk9] {
        color: #174f91;
        font-size: 11px;
        font-weight: 800;
    }

    .popup-product-cell span[b-e2qv1qdtk9] {
        margin-top: 2px;
        color: #263f5d;
        font-size: 10px;
        font-weight: 650;
    }

    .popup-product-cell small[b-e2qv1qdtk9],
    .popup-lot-cell span[b-e2qv1qdtk9],
    .popup-quantity-cell small[b-e2qv1qdtk9] {
        margin-top: 2px;
        color: #7b8da3;
        font-size: 9px;
    }

    .popup-lot-cell strong[b-e2qv1qdtk9] {
        color: #294766;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 10px;
    }

    .popup-quantity-cell strong[b-e2qv1qdtk9] {
        color: #087f50;
        font-size: 12px;
        font-weight: 800;
    }

        .popup-quantity-cell strong span[b-e2qv1qdtk9] {
            color: #52677f;
            font-size: 10px;
            font-weight: 650;
        }

.serial-line-button[b-e2qv1qdtk9] {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 7px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    color: #295276;
    text-align: left;
    border: 1px solid #cfe0f2;
    border-radius: 8px;
    background: #f5f9fe;
}

    .serial-line-button > span[b-e2qv1qdtk9] {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .serial-line-button > span i[b-e2qv1qdtk9] {
            color: #3b82c4;
            font-size: 9px;
        }

        .serial-line-button > span strong[b-e2qv1qdtk9] {
            font-size: 10px;
            white-space: nowrap;
        }

    .serial-line-button > em[b-e2qv1qdtk9] {
        grid-column: 2;
        align-self: center;
        color: #1769c2;
        font-size: 9px;
        font-style: normal;
        font-weight: 800;
        white-space: nowrap;
    }

    .serial-line-button:hover:not(:disabled)[b-e2qv1qdtk9],
    .serial-line-button.is-selected[b-e2qv1qdtk9] {
        color: #124d8c;
        border-color: #4f91da;
        background: #e8f2ff;
        box-shadow: 0 0 0 2px rgba(47, 128, 237, .1);
    }

    .serial-line-button:disabled[b-e2qv1qdtk9] {
        color: #8a99a9;
        border-style: dashed;
        background: #f8fafc;
        cursor: default;
    }

        .serial-line-button:disabled > span i[b-e2qv1qdtk9] {
            color: #9aa8b7;
        }

.serial-inspector[b-e2qv1qdtk9] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #cfdeed;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(31, 55, 86, .06);
}

.serial-inspector-header[b-e2qv1qdtk9] {
    flex: 0 0 auto;
    min-height: 75px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e2e9f1;
    background: linear-gradient(135deg, #f4f9ff, #fff);
}

    .serial-inspector-header > div[b-e2qv1qdtk9] {
        min-width: 0;
    }

    .serial-inspector-header span[b-e2qv1qdtk9] {
        display: block;
        color: #1769c2;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .1em;
    }

    .serial-inspector-header h3[b-e2qv1qdtk9] {
        margin: 3px 0 0;
        overflow: hidden;
        color: #142e4d;
        font-size: 15px;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .serial-inspector-header p[b-e2qv1qdtk9] {
        margin: 2px 0 0;
        overflow: hidden;
        color: #718096;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .serial-inspector-header button[b-e2qv1qdtk9] {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: grid;
        place-items: center;
        color: #66798e;
        border: 0;
        border-radius: 7px;
        background: #eaf0f7;
    }

        .serial-inspector-header button:hover[b-e2qv1qdtk9] {
            color: #b42318;
            background: #fee4e2;
        }

.serial-inspector-summary[b-e2qv1qdtk9] {
    flex: 0 0 auto;
    margin: 10px 10px 0;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #d6e5f5;
    border-radius: 9px;
    background: #f1f7ff;
}

    .serial-inspector-summary > span[b-e2qv1qdtk9] {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        color: #1769c2;
        border-radius: 8px;
        background: #dcecff;
    }

    .serial-inspector-summary div[b-e2qv1qdtk9] {
        display: flex;
        flex-direction: column;
    }

    .serial-inspector-summary small[b-e2qv1qdtk9] {
        color: #6f8298;
        font-size: 8px;
    }

    .serial-inspector-summary strong[b-e2qv1qdtk9] {
        color: #173b66;
        font-size: 17px;
        line-height: 1.05;
    }

    .serial-inspector-summary .serial-received-count[b-e2qv1qdtk9] {
        margin-top: 2px;
        color: #078451;
        font-size: 8px;
        font-weight: 800;
    }

        .serial-inspector-summary .serial-received-count i[b-e2qv1qdtk9] {
            margin-right: 2px;
        }

    .serial-inspector-summary em[b-e2qv1qdtk9] {
        max-width: 105px;
        overflow: hidden;
        color: #536b84;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 8px;
        font-style: normal;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.serial-inspector-search[b-e2qv1qdtk9] {
    position: relative;
    height: 38px;
    flex: 0 0 38px;
    margin: 9px 10px 0;
    display: flex;
    align-items: center;
}

    .serial-inspector-search > i[b-e2qv1qdtk9] {
        position: absolute;
        left: 11px;
        color: #7a8da2;
        font-size: 10px;
    }

    .serial-inspector-search input[b-e2qv1qdtk9] {
        width: 100%;
        height: 100%;
        padding: 0 34px 0 31px;
        color: #213d5c;
        border: 1px solid #cfdae7;
        border-radius: 8px;
        background: #fff;
        font-size: 10px;
    }

        .serial-inspector-search input[b-e2qv1qdtk9]::-webkit-search-cancel-button,
        .serial-inspector-search input[b-e2qv1qdtk9]::-webkit-search-decoration {
            -webkit-appearance: none;
            appearance: none;
        }

        .serial-inspector-search input[b-e2qv1qdtk9]::-ms-clear {
            display: none;
        }

        .serial-inspector-search input:focus[b-e2qv1qdtk9] {
            outline: 3px solid rgba(47, 128, 237, .12);
            border-color: #4e91dc;
        }

    .serial-inspector-search button[b-e2qv1qdtk9] {
        position: absolute;
        right: 5px;
        width: 27px;
        height: 27px;
        display: grid;
        place-items: center;
        color: #66798e;
        border: 0;
        border-radius: 6px;
        background: transparent;
    }

.serial-inspector-result[b-e2qv1qdtk9] {
    flex: 0 0 auto;
    padding: 7px 11px 5px;
    color: #718096;
    font-size: 8.5px;
    font-weight: 700;
}

.serial-inspector-list[b-e2qv1qdtk9] {
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 7px 8px 10px;
    padding-right: 3px;
    display: grid;
    grid-auto-rows: 34px;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.serial-inspector-item[b-e2qv1qdtk9] {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #254968;
    border: 1px solid #d8e6f4;
    border-radius: 8px;
    background: #f7fbff;
}

    .serial-inspector-item i[b-e2qv1qdtk9] {
        flex: 0 0 auto;
        color: #4c8dca;
        font-size: 9px;
    }

    .serial-inspector-item strong[b-e2qv1qdtk9] {
        min-width: 0;
        overflow: hidden;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 9.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .serial-inspector-item.is-received[b-e2qv1qdtk9] {
        color: #086b45;
        border-color: #9edfc2;
        background: #eafaf2;
    }

        .serial-inspector-item.is-received > i[b-e2qv1qdtk9] {
            color: #0aa367;
        }

        .serial-inspector-item.is-received > strong[b-e2qv1qdtk9] {
            color: #075f3e;
        }

        .serial-inspector-item.is-received > span[b-e2qv1qdtk9] {
            margin-left: auto;
            padding: 3px 6px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            flex: 0 0 auto;
            color: #067647;
            border-radius: 999px;
            background: #cef3df;
            font-size: 8px;
            font-weight: 850;
            white-space: nowrap;
        }

            .serial-inspector-item.is-received > span i[b-e2qv1qdtk9] {
                font-size: 7px;
            }

.serial-inspector-empty[b-e2qv1qdtk9],
.serial-inspector-no-result[b-e2qv1qdtk9] {
    min-height: 0;
    padding: 24px;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #718096;
    text-align: center;
}

    .serial-inspector-empty > span[b-e2qv1qdtk9] {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        margin-bottom: 12px;
        color: #2f80ed;
        border-radius: 16px;
        background: #e9f3ff;
        font-size: 23px;
    }

    .serial-inspector-empty h3[b-e2qv1qdtk9],
    .serial-inspector-no-result strong[b-e2qv1qdtk9] {
        margin: 0;
        color: #29445f;
        font-size: 13px;
    }

    .serial-inspector-empty p[b-e2qv1qdtk9] {
        max-width: 220px;
        margin: 5px 0 0;
        font-size: 9px;
        line-height: 1.5;
    }

.serial-inspector-no-result[b-e2qv1qdtk9] {
    gap: 4px;
    font-size: 9px;
}

    .serial-inspector-no-result > i[b-e2qv1qdtk9] {
        margin-bottom: 4px;
        color: #8ca0b4;
        font-size: 18px;
    }

@media (max-width: 1100px) {
    .document-popup-body[b-e2qv1qdtk9] {
        overflow-y: auto;
    }

    .document-popup-workspace[b-e2qv1qdtk9] {
        height: auto;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .popup-detail-table-shell[b-e2qv1qdtk9] {
        min-height: 380px;
        height: 430px;
        flex: 0 0 auto;
    }

    .serial-inspector[b-e2qv1qdtk9] {
        min-height: 280px;
        max-height: 360px;
    }
}

@media (max-width: 700px) {
    .document-popup[b-e2qv1qdtk9] {
        width: 100%;
        max-height: calc(100dvh - 16px);
    }

    .document-popup-backdrop[b-e2qv1qdtk9] {
        padding: 8px;
    }

    .document-popup-header[b-e2qv1qdtk9] {
        padding: 11px 12px;
    }

        .document-popup-header h2[b-e2qv1qdtk9] {
            font-size: 15px;
        }

        .document-popup-header p[b-e2qv1qdtk9] {
            font-size: 9px;
        }

    .popup-table-heading[b-e2qv1qdtk9] {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .popup-detail-table-shell[b-e2qv1qdtk9] {
        height: 390px;
        min-height: 340px;
    }

    .serial-inspector[b-e2qv1qdtk9] {
        min-height: 300px;
    }
}

/* Final report-list sizing overrides after legacy popup styles. */
.inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
    grid-template-columns: auto minmax(280px, 1fr) repeat(3, minmax(175px, .85fr)) auto auto;
    align-items: center;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell thead th {
    height: 55px !important;
    padding: 8px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

.inbound-report-page[b-e2qv1qdtk9]  .document-table-shell tbody td {
    height: 45px !important;
    padding: 4px 8px !important;
    vertical-align: middle !important;
}

@media (max-width: 1350px) {
    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: auto minmax(240px, 1.4fr) repeat(2, minmax(170px, 1fr)) auto auto;
    }
}

@media (max-width: 820px) {
    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: 1fr;
    }
}

.report-view-action[b-e2qv1qdtk9] {
    width: 31px;
    height: 31px;
    display: inline-grid;
    place-items: center;
    color: #1768c5;
    background: #fff;
    border: 1px solid #bcd3ed;
    border-radius: 8px;
    cursor: pointer;
}

    .report-view-action:hover[b-e2qv1qdtk9] {
        color: #fff;
        background: #1768c5;
        border-color: #1768c5;
    }

/* Required date range layout. Keep dates and actions on dedicated rows. */
.inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
    grid-template-columns: auto minmax(280px, 1.4fr) minmax(190px, .7fr) minmax(300px, 1fr);
    gap: 7px 8px;
}

.inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9] {
    grid-column: 2 / 4;
}

.inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
    grid-column: 4 / -1;
}

@media (max-width: 1350px) {
    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        grid-template-columns: auto minmax(240px, 1fr) minmax(180px, .7fr);
    }

    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9] {
        grid-column: 2 / -1;
    }

    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        grid-column: auto;
    }
}

.document-popup-header-actions[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-popup-status[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

    .document-popup-status i[b-e2qv1qdtk9] {
        font-size: 7px;
    }

    .document-popup-status.is-complete[b-e2qv1qdtk9] {
        color: #078447;
        background: #dcf8e8;
    }

    .document-popup-status.is-receiving[b-e2qv1qdtk9] {
        color: #0878bd;
        background: #dff1ff;
    }

    .document-popup-status.is-cancel[b-e2qv1qdtk9] {
        color: #cf2727;
        background: #fee6e6;
    }

    .document-popup-status.is-close[b-e2qv1qdtk9] {
        color: #a66500;
        background: #fff0cd;
    }

    .document-popup-status.is-new[b-e2qv1qdtk9] {
        color: #526176;
        background: #edf1f6;
    }

.document-popup-live-meta[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #708096;
    font-size: 10px;
    white-space: nowrap;
}

    .document-popup-live-meta > span:first-child[b-e2qv1qdtk9] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

        .document-popup-live-meta > span:first-child i[b-e2qv1qdtk9] {
            color: #2563eb;
        }

.document-popup-live[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #059669;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 800;
}

    .document-popup-live i[b-e2qv1qdtk9] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #10b981;
    }

.document-popup-refresh[b-e2qv1qdtk9] {
    min-height: 32px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #1d5fae;
    background: #fff;
    border: 1px solid #c9daf0;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
}

    .document-popup-refresh:hover[b-e2qv1qdtk9] {
        color: #fff;
        background: #1769d2;
        border-color: #1769d2;
    }

@media (max-width: 700px) {
    .document-popup-header-actions[b-e2qv1qdtk9] {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .document-popup-live-meta[b-e2qv1qdtk9] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Keep the report popup aligned with the Inbound document detail layout. */
.document-popup-body[b-e2qv1qdtk9] {
    padding: 16px 20px;
    overflow-y: auto;
}

.document-popup-workspace[b-e2qv1qdtk9] {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
}

.document-popup-main[b-e2qv1qdtk9] {
    display: block;
}

.document-view-section[b-e2qv1qdtk9] {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(30, 64, 175, .04);
}

.document-view-heading[b-e2qv1qdtk9] {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e3eaf3;
}

    .document-view-heading h3[b-e2qv1qdtk9] {
        margin: 0 0 2px;
        color: #172b4d;
        font-size: 14px;
        font-weight: 800;
    }

    .document-view-heading p[b-e2qv1qdtk9] {
        margin: 0;
        color: #718096;
        font-size: 11px;
    }

.document-view-step[b-e2qv1qdtk9] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #1f6fd1;
    font-size: 12px;
    font-weight: 800;
}

.popup-progress-grid[b-e2qv1qdtk9] {
    margin: 0;
    padding: 14px 16px;
}

.document-items-section[b-e2qv1qdtk9] {
    margin-bottom: 0;
}

    .document-items-section .popup-detail-table-shell[b-e2qv1qdtk9] {
        height: 360px;
        min-height: 360px;
        border: 0;
        border-radius: 0;
    }

.serial-inspector.is-empty[b-e2qv1qdtk9] {
    display: none;
}

.serial-inspector-shade[b-e2qv1qdtk9] {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(31, 47, 70, .16);
    backdrop-filter: blur(1px);
}

.serial-inspector:not(.is-empty)[b-e2qv1qdtk9] {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92%);
    min-height: 0;
    max-height: none;
    box-shadow: -12px 0 28px rgba(15, 23, 42, .16);
}

@media (max-width: 700px) {
    .document-popup-body[b-e2qv1qdtk9] {
        padding: 12px;
    }

    .document-items-section .popup-detail-table-shell[b-e2qv1qdtk9] {
        height: 340px;
        min-height: 340px;
    }

    .document-view-heading[b-e2qv1qdtk9] {
        padding: 12px;
    }
}

/* Inbound document rows: compact values with a high-contrast table header. */
.inbound-report-page[b-e2qv1qdtk9]  .popup-items-table thead th {
    height: 44px !important;
    padding: 7px 10px !important;
    color: #fff !important;
    background: #2167bd !important;
    border-color: #2167bd !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

.inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody tr,
.inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody td {
    height: 54px !important;
    min-height: 54px !important;
}

.inbound-report-page[b-e2qv1qdtk9]  .popup-items-table tbody td {
    padding: 6px 10px !important;
    color: #27425f;
    font-size: 10px !important;
    vertical-align: middle !important;
}

.popup-product-cell[b-e2qv1qdtk9] {
    gap: 2px;
}

    .popup-product-cell strong[b-e2qv1qdtk9] {
        color: #1055a0;
        font-size: 11px;
    }

    .popup-product-cell small[b-e2qv1qdtk9] {
        max-width: 100%;
        margin: 0;
        color: #58708a;
        font-size: 9px;
    }

.popup-lot-value[b-e2qv1qdtk9],
.popup-expiry-value[b-e2qv1qdtk9] {
    display: inline-block;
    color: #294766;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    white-space: nowrap;
}

.popup-expiry-value[b-e2qv1qdtk9] {
    color: #53677e;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.popup-no-serial[b-e2qv1qdtk9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8795a7;
    font-size: 10px;
    white-space: nowrap;
}

    .popup-no-serial i[b-e2qv1qdtk9] {
        font-size: 8px;
    }

.serial-line-button[b-e2qv1qdtk9] {
    height: 36px;
    min-height: 36px;
    padding: 5px 8px;
}

.popup-qty-value[b-e2qv1qdtk9] {
    display: inline-block;
    min-width: 30px;
    color: #294766;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

    .popup-qty-value.is-received[b-e2qv1qdtk9] {
        color: #069455;
    }

    .popup-qty-value.is-remaining[b-e2qv1qdtk9] {
        color: #b35b00;
    }

/* Match the Inbound document dialog size and centred viewport placement. */
.document-popup-backdrop[b-e2qv1qdtk9] {
    padding: 18px;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.document-popup[b-e2qv1qdtk9] {
    width: min(1500px, calc(100vw - 36px));
    height: auto;
    max-height: calc(100vh - 36px);
    color: #14213d;
    background: #f5f7fb;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.document-popup-body[b-e2qv1qdtk9] {
    flex: 0 1 auto;
    padding: 16px 20px;
    overflow: hidden;
}

.document-popup-header[b-e2qv1qdtk9] {
    min-height: 82px;
    padding: 16px 22px;
    border-color: #dce5f1;
}

.document-popup-footer[b-e2qv1qdtk9] {
    min-height: 66px;
    padding: 12px 20px;
    align-items: center;
    gap: 9px;
    border-color: #dce5f1;
}

    .document-popup-footer > div[b-e2qv1qdtk9] {
        margin-right: auto;
        color: #708096;
        font-size: 11px;
    }

        .document-popup-footer > div i[b-e2qv1qdtk9] {
            margin-right: 5px;
            color: #1aa267;
        }

[b-e2qv1qdtk9] .popup-items-table thead th {
    height: 44px !important;
    padding: 7px 10px !important;
    color: #fff !important;
    background: #2167bd !important;
    border-color: #2167bd !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

[b-e2qv1qdtk9] .popup-items-table tbody tr,
[b-e2qv1qdtk9] .popup-items-table tbody td {
    height: 74px !important;
    min-height: 74px !important;
}

[b-e2qv1qdtk9] .popup-items-table tbody td {
    padding: 8px !important;
    color: #27425f;
    font-size: 10px !important;
    vertical-align: middle !important;
}

/* BootstrapBlazor renders header labels in nested cells; style both layers like Inbound. */
[b-e2qv1qdtk9] .popup-items-table thead th,
.popup-detail-table-shell[b-e2qv1qdtk9]  thead th,
.popup-detail-table-shell[b-e2qv1qdtk9]  thead th .table-cell,
.popup-detail-table-shell[b-e2qv1qdtk9]  thead th .table-text,
.popup-detail-table-shell[b-e2qv1qdtk9]  thead th span {
    height: 42px !important;
    padding: 9px !important;
    color: #fff !important;
    background: #1f66b8 !important;
    background-color: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .13) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

[b-e2qv1qdtk9] .popup-items-table tbody td,
.popup-detail-table-shell[b-e2qv1qdtk9]  tbody td {
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 9px !important;
    line-height: 1.35;
    vertical-align: middle !important;
    background: #fff !important;
    border-color: #e5ebf3 !important;
}

.popup-detail-table-shell[b-e2qv1qdtk9]  tbody tr:hover td {
    background: #f8fbff !important;
}

/* Override BootstrapBlazor's higher-specificity detail-table header rule. */
.popup-detail-table-shell[b-e2qv1qdtk9]  .table thead th,
.popup-detail-table-shell[b-e2qv1qdtk9]  .table thead th .table-cell,
.popup-detail-table-shell[b-e2qv1qdtk9]  .table thead th .table-text,
.popup-detail-table-shell[b-e2qv1qdtk9]  .table thead th span {
    color: #fff !important;
    background: #1f66b8 !important;
    background-color: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .13) !important;
}

/* Let the detail table size to its rows, matching the Inbound document popup. */
.document-popup-body[b-e2qv1qdtk9] {
    overflow-y: auto;
}

.document-items-section .popup-detail-table-shell[b-e2qv1qdtk9] {
    height: auto;
    min-height: 0;
    display: block;
    padding-bottom: 8px;
}

/* Match the Inbound row density after the global color5 table rules are applied. */
.layout.is-page.color5 .popup-detail-table-shell[b-e2qv1qdtk9]  .table tbody td {
    min-height: 74px !important;
    padding: 8px 9px !important;
    line-height: 1.35 !important;
    vertical-align: middle !important;
}

.popup-product-cell > span[b-e2qv1qdtk9] {
    color: #1769d2;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.popup-product-cell > strong[b-e2qv1qdtk9] {
    margin: 2px 0;
    color: #1b2a44;
    font-size: 11px;
    line-height: 1.25;
    white-space: normal;
}

.popup-product-cell > small[b-e2qv1qdtk9] {
    max-width: 250px;
    overflow: hidden;
    color: #8795a9;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the document-line scan height consistent with the Inbound detail view. */
.popup-product-cell[b-e2qv1qdtk9] {
    min-height: 70px;
    justify-content: center;
}

.layout.is-page.color5 .popup-detail-table-shell[b-e2qv1qdtk9]  .table tbody tr {
    height: 76px !important;
}

/* The dialog must be centred in the viewport, not only within layout-main. */
.document-popup-backdrop[b-e2qv1qdtk9] {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
}

/* Match the compact page hierarchy and live-status header used by Inbound. */
.inbound-report-page[b-e2qv1qdtk9] {
    padding: 18px;
    gap: 8px;
}

    .inbound-report-page > .report-hero[b-e2qv1qdtk9],
    .inbound-report-page > .report-summary[b-e2qv1qdtk9] {
        margin-bottom: 0;
    }

    .inbound-report-page > .report-table-shell[b-e2qv1qdtk9] {
        min-height: 440px;
        height: auto;
        padding: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        overflow: hidden;
    }

.inbound-card-heading[b-e2qv1qdtk9] {
    min-height: 58px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #d8e2ee;
}

    .inbound-card-heading h2[b-e2qv1qdtk9] {
        margin: 0;
        color: #172033;
        font-size: 16px;
        font-weight: 800;
    }

    .inbound-card-heading p[b-e2qv1qdtk9] {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 12px;
    }

.inbound-live-status[b-e2qv1qdtk9],
.inbound-last-updated[b-e2qv1qdtk9],
.inbound-live-indicator[b-e2qv1qdtk9] {
    display: flex;
    align-items: center;
}

.inbound-live-status[b-e2qv1qdtk9] {
    gap: 12px;
}

.inbound-last-updated[b-e2qv1qdtk9] {
    gap: 5px;
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

    .inbound-last-updated i[b-e2qv1qdtk9] {
        color: #2563eb;
    }

.inbound-live-indicator[b-e2qv1qdtk9] {
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #059669;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

    .inbound-live-indicator i[b-e2qv1qdtk9] {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #10b981;
    }

.inbound-table-host[b-e2qv1qdtk9] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

    .inbound-table-host[b-e2qv1qdtk9]  .table-container {
        padding: 0 12px 10px;
    }

@media (max-width: 700px) {
    .inbound-card-heading[b-e2qv1qdtk9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .inbound-live-status[b-e2qv1qdtk9] {
        width: 100%;
        justify-content: space-between;
    }
}

/* Final phone layout: prevent legacy grid rules from shrinking and clipping filters/table. */
@media (max-width: 560px) {
    .inbound-report-page[b-e2qv1qdtk9] {
        height: 100% !important;
        overflow-y: auto !important;
        padding: 10px !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > *[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > .wms-filter-label[b-e2qv1qdtk9] {
        width: auto !important;
        justify-self: start;
    }

    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .inbound-report-page .document-table-shell .report-date-separator[b-e2qv1qdtk9] {
        display: none !important;
    }

    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .inbound-report-page .document-table-shell .report-filter-button[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .inbound-report-page > .report-table-shell[b-e2qv1qdtk9] {
        height: 700px !important;
        min-height: 700px !important;
        flex: 0 0 700px !important;
    }

    .inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
        height: 700px !important;
        min-height: 700px !important;
        flex: 0 0 700px !important;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
        height: auto !important;
        min-height: 220px !important;
        flex: 1 1 220px !important;
    }
}

/* Final tablet override. This must remain after the desktop grid declarations. */
@media (min-width: 561px) and (max-width: 820px) {
    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 8px !important;
        padding: 0px !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > *[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > .wms-filter-label[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell .report-filter-search[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        grid-column: 1 / -1 !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > .wms-filter-label[b-e2qv1qdtk9] {
        width: auto !important;
        justify-self: start;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > :nth-child(3)[b-e2qv1qdtk9] {
        grid-column: 1 !important;
    }

    .inbound-report-page .document-table-shell .report-filter-bar > :nth-child(4)[b-e2qv1qdtk9] {
        grid-column: 2 !important;
    }

    .inbound-report-page .document-table-shell .report-custom-date-range[b-e2qv1qdtk9] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    }

    .inbound-report-page .document-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .inbound-report-page .document-table-shell .report-filter-button[b-e2qv1qdtk9] {
        width: 100% !important;
        min-width: 0 !important;
    }
}
+

/* Compact continuous desktop layout shared by Inbound Orders and its report. */
@media (min-width: 1000px)[b-e2qv1qdtk9] {
    .inbound-report-page {
        height: 100%;
        min-height: 0;
        padding: 12px 18px 18px;
        gap: 0;
        overflow: hidden;
    }

    .inbound-report-page > .report-hero[b-e2qv1qdtk9] {
        min-height: 76px;
        margin: 0;
        padding: 10px 12px 6px;
        align-items: flex-end;
        border: 1px solid #d7e2ef;
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        background: #fff;
    }

    .inbound-report-page .report-heading h1[b-e2qv1qdtk9] {
        margin: 2px 0 1px;
        font-size: 25px;
        line-height: 1.12;
    }

    .inbound-report-page .report-heading p[b-e2qv1qdtk9] {
        margin: 0;
        font-size: 11px;
    }

    .inbound-report-page .report-actions[b-e2qv1qdtk9] {
        max-width: 65%;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 8px;
        flex-direction: column;
    }

    .inbound-report-page .report-action-buttons[b-e2qv1qdtk9] {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .inbound-report-page .report-actions .inbound-live-status[b-e2qv1qdtk9] {
        width: 100%;
        min-height: 16px;
        justify-content: flex-end;
        gap: 9px;
    }

    .inbound-report-page .report-actions .inbound-live-indicator[b-e2qv1qdtk9] {
        padding: 3px 8px;
        font-size: 8px;
    }

    .inbound-report-page > .report-summary[b-e2qv1qdtk9] {
        margin: 0;
        padding: 6px 10px;
        gap: 12px;
        border-right: 1px solid #d7e2ef;
        border-left: 1px solid #d7e2ef;
        background: #fff;
    }

    .inbound-report-page > .report-summary .wms-summary-card[b-e2qv1qdtk9] {
        min-height: 72px;
        padding: 10px 14px;
    }

    .inbound-report-page > .report-table-shell[b-e2qv1qdtk9] {
        min-height: 0;
        margin: 0;
        padding: 0 10px 10px;
        flex: 1 1 auto;
        border: 1px solid #d7e2ef;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        background: #fff;
        overflow: hidden;
    }

    .inbound-report-page .inbound-table-host[b-e2qv1qdtk9],
    .inbound-report-page .document-table-shell[b-e2qv1qdtk9] {
        min-height: 0;
        height: 100%;
        flex: 1 1 auto;
    }

    .inbound-report-page .document-table-shell .report-filter-bar[b-e2qv1qdtk9],
    .inbound-report-page .report-filter-bar[b-e2qv1qdtk9] {
        width: 100%;
        min-width: 0;
        padding: 6px 0;
        display: grid;
        grid-template-columns: auto minmax(250px, 1.5fr) minmax(135px, .62fr) minmax(145px, .68fr) minmax(350px, 1.35fr) auto;
        gap: 7px;
        align-items: center;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .report-filter-bar {
        grid-template-columns: auto minmax(250px, 1.5fr) minmax(135px, .62fr) minmax(145px, .68fr) minmax(350px, 1.35fr) auto !important;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .report-filter-bar > *,
    .inbound-report-page[b-e2qv1qdtk9]  .report-custom-date-range,
    .inbound-report-page[b-e2qv1qdtk9]  .report-filter-actions {
        min-width: 0;
        grid-column: auto !important;
    }

    .inbound-report-page .report-table-shell .report-filter-bar > *[b-e2qv1qdtk9],
    .inbound-report-page .report-table-shell .report-custom-date-range[b-e2qv1qdtk9],
    .inbound-report-page .report-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        min-width: 0;
        grid-column: auto !important;
    }

    .inbound-report-page .report-table-shell .report-custom-date-range[b-e2qv1qdtk9] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 7px;
    }

    .inbound-report-page .report-table-shell .report-filter-actions[b-e2qv1qdtk9] {
        display: flex;
        gap: 7px;
        white-space: nowrap;
    }

    .inbound-report-page .report-filter-control[b-e2qv1qdtk9],
    .inbound-report-page .report-filter-button[b-e2qv1qdtk9] {
        min-height: 38px;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-container {
        padding: 0;
    }

    .inbound-report-page[b-e2qv1qdtk9]  .document-table-shell .table-fixed-body {
        min-height: 250px;
        flex: 1 1 auto;
    }
}
/* _content/WMS.UI/Pages/Reports/ItemLocationReportDesigner.razor.rz.scp.css */
.item-location[b-we6tq3iqr8] {
    --il-blue: #1769d2;
    --il-blue-dark: #124f9d;
    --il-ink: #12233d;
    --il-muted: #6f7f95;
    --il-line: #d9e4f0;
    --il-surface: #ffffff;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 20px;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    color: var(--il-ink);
    background: #f3f7fb;
}

.item-location__header[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.item-location__eyebrow[b-we6tq3iqr8] {
    display: block;
    margin-bottom: 4px;
    color: var(--il-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
}

.item-location__header h1[b-we6tq3iqr8] {
    margin: 0;
    color: var(--il-ink);
    font-size: clamp(23px, 2vw, 31px);
    font-weight: 780;
    letter-spacing: -.02em;
}

.item-location__header p[b-we6tq3iqr8] {
    max-width: 820px;
    margin: 3px 0 0;
    color: var(--il-muted);
    font-size: 13px;
}

.item-location__source[b-we6tq3iqr8] {
    display: inline-flex;
    margin-top: 6px;
    padding: 7px 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid #c5ead7;
    border-radius: 999px;
    color: #0d8550;
    background: #effbf5;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
}

.item-location__source i[b-we6tq3iqr8] { font-size: 7px; }

.item-location__filters[b-we6tq3iqr8] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0px;
    align-items: center;
    gap: 8px;
    background: var(--il-surface);
    box-shadow: 0 3px 14px rgba(28, 54, 87, .04);
}

.item-location__search[b-we6tq3iqr8] {
    display: flex;
    min-width: 260px;
    flex: 1 1 390px;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 1px solid #cfdceb;
    border-radius: 9px;
    background: #fbfdff;
}

.item-location__search:focus-within[b-we6tq3iqr8] {
    border-color: #79ace7;
    box-shadow: 0 0 0 3px rgba(23, 105, 210, .1);
}

.item-location__search i[b-we6tq3iqr8] {
    color: #7890ad;
    font-size: 12px;
}

.item-location__search input[b-we6tq3iqr8] {
    width: 100%;
    height: 36px;
    min-width: 0;
    border: 0;
    outline: 0;
    color: var(--il-ink);
    background: transparent;
    font-size: 12px;
}

.item-location__search input[b-we6tq3iqr8]::placeholder { color: #95a4b7; }

.item-location__search-button[b-we6tq3iqr8],
.item-location__ghost-button[b-we6tq3iqr8],
.item-location__export-button[b-we6tq3iqr8] {
    display: inline-flex;
    height: 38px;
    padding: 0 13px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
}

.item-location__search-button[b-we6tq3iqr8] {
    border: 1px solid var(--il-blue);
    color: #fff;
    background: var(--il-blue);
}

.item-location__search-button:hover[b-we6tq3iqr8] { background: var(--il-blue-dark); }

.item-location__ghost-button[b-we6tq3iqr8] {
    border: 1px solid #d2deeb;
    color: #566b85;
    background: #f8fafc;
}

.item-location__ghost-button:hover[b-we6tq3iqr8] { background: #eef3f8; }

.item-location__export-button[b-we6tq3iqr8] {
    border: 1px solid #b7d2ef;
    color: #15599f;
    background: #eaf4ff;
}

.item-location__export-button:hover[b-we6tq3iqr8] { background: #dcecff; }

.item-location__segments[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    padding: 3px;
    border: 1px solid #d4dfeb;
    border-radius: 9px;
    background: #f4f7fa;
}

.item-location__segments button[b-we6tq3iqr8] {
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: #697b91;
    background: transparent;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 750;
}

.item-location__segments button:hover[b-we6tq3iqr8] { color: #275f9f; }
.item-location__segments button.active[b-we6tq3iqr8] {
    color: #15599f;
    background: #fff;
    box-shadow: 0 2px 6px rgba(37, 68, 104, .1);
}

.item-location__metrics[b-we6tq3iqr8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 11px;
}

.item-location-metric[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    padding: 12px 14px;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--il-line);
    border-radius: 12px;
    background: var(--il-surface);
    box-shadow: 0 3px 12px rgba(30, 55, 86, .04);
}

.item-location-metric > span[b-we6tq3iqr8] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #1769d2;
    background: #e9f3ff;
}

.item-location-metric--indigo > span[b-we6tq3iqr8] { color: #6657c9; background: #efedff; }
.item-location-metric--amber > span[b-we6tq3iqr8] { color: #af6b00; background: #fff3d9; }
.item-location-metric--green > span[b-we6tq3iqr8] { color: #0b8c52; background: #e7f8ef; }

.item-location-metric > div[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.item-location-metric small[b-we6tq3iqr8] {
    overflow: hidden;
    color: var(--il-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.item-location-metric strong[b-we6tq3iqr8] {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.item-location__workspace[b-we6tq3iqr8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.item-location__workspace--split[b-we6tq3iqr8] {
    display: grid;
    grid-template-columns: minmax(630px, 1.45fr) minmax(350px, .55fr);
    gap: 14px;
}

.item-location-table-card[b-we6tq3iqr8],
.item-location-inspector[b-we6tq3iqr8] {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--il-line);
    border-radius: 13px;
    background: var(--il-surface);
    box-shadow: 0 5px 18px rgba(31, 57, 88, .05);
}

.item-location-table-card[b-we6tq3iqr8] {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.item-location-table-card__heading[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    padding: 12px 15px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--il-line);
}

.item-location-table-card__heading h2[b-we6tq3iqr8] {
    margin: 0;
    font-size: 15px;
    font-weight: 780;
}

.item-location-table-card__heading p[b-we6tq3iqr8] {
    margin: 2px 0 0;
    color: var(--il-muted);
    font-size: 11px;
}

.item-location-table-card__heading > span[b-we6tq3iqr8] {
    padding: 5px 9px;
    border-radius: 999px;
    color: #315d8c;
    background: #edf5fd;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 750;
}

.item-location-table-card__heading .wms-live-status em[b-we6tq3iqr8] {
    padding: 5px 9px;
    color: #315d8c;
    background: #edf5fd;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
    white-space: nowrap;
}

.item-location-table-card__body[b-we6tq3iqr8] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-container {
    border: 0;
    border-radius: 0;
    padding: 0 12px;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-toolbar {
    min-height: 52px;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-toolbar > .table-toolbar-button {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-toolbar > .item-location__filters {
    flex: 1 1 auto;
    min-width: 0;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-toolbar > .table-column-right {
    margin-left: 16px !important;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-container.wms-table-standard .nav-pages {
    position: relative;
    bottom: 8px;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-container.wms-table-standard .nav-pages > .table-page-info {
    flex: 0 0 auto;
    white-space: nowrap;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-container.wms-table-standard .nav-pages > .pagination {
    margin-left: auto !important;
    justify-content: flex-end !important;
}

.item-location-table-card__body[b-we6tq3iqr8]  .table-wrapper tbody tr:hover { background: #eff6ff; }
.item-location--v2 .item-location-table-card__body[b-we6tq3iqr8]  .table-wrapper tbody tr { cursor: pointer; }
.item-location--v2 .item-location-table-card__body[b-we6tq3iqr8]  .table-wrapper tbody tr.active { background: #e5f1ff; }

.item-location__part[b-we6tq3iqr8],
.item-location__location[b-we6tq3iqr8] {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 750;
}

.item-location__part[b-we6tq3iqr8] { color: #245a96; }
.item-location__part i[b-we6tq3iqr8] { color: #78a6d8; }
.item-location__location[b-we6tq3iqr8] { color: #3d5f83; }
.item-location__location i[b-we6tq3iqr8] { color: #2a8bd5; }
.item-location__qty[b-we6tq3iqr8] { color: #294f79; font-variant-numeric: tabular-nums; }
.item-location__qty--allocated[b-we6tq3iqr8] { color: #ad6900; }
.item-location__qty--available[b-we6tq3iqr8] { color: #07844a; }

.item-location-product-cell[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.item-location-product-cell > span[b-we6tq3iqr8] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #d5e4f4;
    border-radius: 8px;
    color: #1769d2;
    background: #edf5ff;
}

.item-location-product-cell > div[b-we6tq3iqr8],
.item-location-storage-cell[b-we6tq3iqr8],
.item-location-reference-cell[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.item-location-product-cell strong[b-we6tq3iqr8],
.item-location-product-cell small[b-we6tq3iqr8],
.item-location-storage-cell strong[b-we6tq3iqr8],
.item-location-storage-cell small[b-we6tq3iqr8],
.item-location-reference-cell strong[b-we6tq3iqr8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-location-product-cell strong[b-we6tq3iqr8] { color: #075cae; font-size: 11px; }
.item-location-product-cell small[b-we6tq3iqr8] { color: #71849a; font-size: 9px; }
.item-location-company[b-we6tq3iqr8] {
    display: inline-flex;
    max-width: 100%;
    padding: 4px 8px;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    border-radius: 999px;
    color: #315d8c;
    background: #edf3f8;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}
.item-location-company i[b-we6tq3iqr8] { color: #1769d2; font-size: 9px; }

.item-location-storage-cell[b-we6tq3iqr8] { gap: 2px; }
.item-location-storage-cell strong[b-we6tq3iqr8] { color: #173a5e; font-size: 10px; }
.item-location-storage-cell small[b-we6tq3iqr8] { color: #71849a; font-size: 9px; }
.item-location-storage-cell i[b-we6tq3iqr8] { width: 15px; color: #2387d8; }

.item-location-reference-cell[b-we6tq3iqr8] {
    gap: 2px;
}

.item-location-reference-cell small[b-we6tq3iqr8],
.item-location-quantity-cell small[b-we6tq3iqr8] {
    color: #8796a8;
    font-size: 8px;
}
.item-location-reference-cell small[b-we6tq3iqr8],
.item-location-quantity-cell small[b-we6tq3iqr8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.item-location-reference-cell small i[b-we6tq3iqr8],
.item-location-quantity-cell small i[b-we6tq3iqr8] { color: #4c91d2; font-size: 8px; }

.item-location-reference-cell strong[b-we6tq3iqr8] {
    overflow: hidden;
    color: #284966;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}
.item-location-reference-cell strong i[b-we6tq3iqr8] { width: 15px; color: #1769d2; }
.item-location-reference-cell--lot small[b-we6tq3iqr8] { color: #71849a; }
.item-location-serial-count[b-we6tq3iqr8] {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0f2;
    border-radius: 7px;
    color: #315979;
    background: #f4f8fc;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
}
.item-location-serial-count i[b-we6tq3iqr8] { color: #1769d2; }

.item-location-quantity-cell[b-we6tq3iqr8] {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.item-location-quantity-cell span[b-we6tq3iqr8] { display: flex; min-width: 0; flex-direction: column; }
.item-location-quantity-cell strong[b-we6tq3iqr8] { color: #284966; font-size: 11px; }
.item-location-quantity-cell strong.allocated[b-we6tq3iqr8] { color: #b46b00; }
.item-location-quantity-cell strong.available[b-we6tq3iqr8] { color: #07864c; }

.item-location-view-action[b-we6tq3iqr8] {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #9fc5f5;
    border-radius: 8px;
    color: #1769d2;
    background: #fff;
    font-size: 11px;
}

.item-location-view-action:hover[b-we6tq3iqr8] { color: #fff; background: #1769d2; }
.item-location-quantity-cell span[b-we6tq3iqr8] { display: flex; min-width: 0; flex-direction: column; align-items: flex-end; }
.item-location-quantity-cell strong[b-we6tq3iqr8] { color: #264f77; font-size: 14px; font-variant-numeric: tabular-nums; }
.item-location-quantity-cell strong.allocated[b-we6tq3iqr8] { color: #b16c00; }
.item-location-quantity-cell strong.available[b-we6tq3iqr8] { color: #07864c; }

.item-location-view-action[b-we6tq3iqr8] {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #9fc5f5;
    border-radius: 8px;
    color: #1769d2;
    background: #fff;
    font-size: 10px;
}
.item-location-view-action:hover[b-we6tq3iqr8] { color: #fff; background: #1769d2; }

.item-location__summary-strip[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    min-height: 55px;
    padding: 7px 11px;
    align-items: stretch;
    border: 1px solid var(--il-line);
    border-radius: 12px;
    background: var(--il-surface);
}

.item-location__summary-strip > span[b-we6tq3iqr8] {
    display: flex;
    min-width: 135px;
    padding: 4px 15px;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #e5ebf2;
}

.item-location__summary-strip small[b-we6tq3iqr8] { color: var(--il-muted); font-size: 10px; }
.item-location__summary-strip strong[b-we6tq3iqr8] { font-size: 18px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.item-location__summary-strip em[b-we6tq3iqr8] {
    margin-left: auto;
    align-self: center;
    padding: 0 9px;
    color: var(--il-muted);
    font-size: 10px;
    font-style: normal;
}

.item-location-inspector[b-we6tq3iqr8] {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.item-location-inspector__empty[b-we6tq3iqr8] {
    display: grid;
    height: 100%;
    padding: 34px;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.item-location-inspector__empty > span[b-we6tq3iqr8] {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 13px;
    place-items: center;
    border-radius: 17px;
    color: #3977b9;
    background: #e9f3fd;
    font-size: 21px;
}

.item-location-inspector__empty h2[b-we6tq3iqr8] { margin: 0; font-size: 16px; }
.item-location-inspector__empty p[b-we6tq3iqr8] {
    max-width: 270px;
    margin: 5px 0 0;
    color: var(--il-muted);
    font-size: 11px;
}

.item-location-inspector__header[b-we6tq3iqr8] {
    display: flex;
    padding: 16px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--il-line);
}

.item-location-inspector__header small[b-we6tq3iqr8] {
    color: var(--il-blue);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.item-location-inspector__header h2[b-we6tq3iqr8] {
    margin: 1px 0 0;
    font-size: 19px;
    font-weight: 800;
}

.item-location-inspector__header p[b-we6tq3iqr8] {
    margin: 3px 0 0;
    color: var(--il-muted);
    font-size: 11px;
}

.item-location-inspector__header > span[b-we6tq3iqr8] {
    padding: 5px 8px;
    border-radius: 7px;
    color: #315f90;
    background: #edf5fd;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 750;
}

.item-location-inspector__tags[b-we6tq3iqr8] {
    display: flex;
    padding: 10px 13px;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--il-line);
    background: #f8fafc;
}

.item-location-inspector__tags span[b-we6tq3iqr8] {
    display: inline-flex;
    padding: 5px 8px;
    align-items: center;
    gap: 6px;
    border: 1px solid #dce5ef;
    border-radius: 999px;
    color: #52677f;
    background: #fff;
    font-size: 10px;
}

.item-location-inspector__tags i[b-we6tq3iqr8] { color: #7196bf; }

.item-location-inspector__identity[b-we6tq3iqr8] {
    display: grid;
    padding: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.item-location-inspector__identity article[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    padding: 9px 10px;
    flex-direction: column;
    border: 1px solid #dfe7f0;
    border-radius: 9px;
    background: #fbfdff;
}

.item-location-inspector__identity article.wide[b-we6tq3iqr8] { grid-column: 1 / -1; }
.item-location-inspector__identity small[b-we6tq3iqr8] { color: var(--il-muted); font-size: 9px; }
.item-location-inspector__identity strong[b-we6tq3iqr8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.item-location-inspector__stock[b-we6tq3iqr8] {
    display: flex;
    padding: 4px 15px 15px;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.item-location-stock-row > span[b-we6tq3iqr8] {
    display: flex;
    margin-bottom: 5px;
    align-items: baseline;
    justify-content: space-between;
}

.item-location-stock-row small[b-we6tq3iqr8] { color: var(--il-muted); font-size: 9px; }
.item-location-stock-row strong[b-we6tq3iqr8] { font-size: 16px; font-variant-numeric: tabular-nums; }
.item-location-stock-row > div[b-we6tq3iqr8] {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf4;
}

.item-location-stock-row i[b-we6tq3iqr8] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #397fca;
}

.item-location-stock-row--allocated i[b-we6tq3iqr8] { background: #e7a22e; }
.item-location-stock-row--available i[b-we6tq3iqr8] { background: #22a968; }

.item-location__card-summary[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    padding: 10px 13px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--il-line);
    border-radius: 12px;
    background: var(--il-surface);
}

.item-location__card-summary > div[b-we6tq3iqr8] { display: flex; gap: 8px; }
.item-location__card-summary span[b-we6tq3iqr8] {
    display: flex;
    min-width: 130px;
    padding: 4px 12px;
    flex-direction: column;
    border-right: 1px solid #e3eaf2;
}

.item-location__card-summary small[b-we6tq3iqr8] { color: var(--il-muted); font-size: 9px; }
.item-location__card-summary strong[b-we6tq3iqr8] { font-size: 17px; font-variant-numeric: tabular-nums; }
.item-location__card-summary p[b-we6tq3iqr8] { margin: 0; color: var(--il-muted); font-size: 10px; }

.item-location-card-workspace[b-we6tq3iqr8] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 12px;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--il-line);
    border-radius: 13px;
    background: #eef3f8;
}

.item-location-card-grid[b-we6tq3iqr8] {
    display: grid;
    min-width: 0;
    min-height: 0;
    padding-right: 3px;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 10px;
    overflow-y: auto;
}

.item-location-card[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    min-height: 245px;
    padding: 13px;
    flex-direction: column;
    border: 1px solid #d7e2ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(29, 54, 84, .04);
}

.item-location-card:hover[b-we6tq3iqr8] {
    border-color: #a9c9ea;
    box-shadow: 0 7px 18px rgba(29, 72, 117, .09);
}

.item-location-card > header[b-we6tq3iqr8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.item-location-card > header span[b-we6tq3iqr8] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #195b9f;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 800;
}

.item-location-card > header i[b-we6tq3iqr8] { color: #2e91df; }
.item-location-card > header em[b-we6tq3iqr8] {
    padding: 4px 7px;
    border-radius: 999px;
    color: #65788e;
    background: #eef2f6;
    white-space: nowrap;
    font-size: 9px;
    font-style: normal;
}

.item-location-card__product[b-we6tq3iqr8] { padding: 12px 0 10px; }
.item-location-card__product small[b-we6tq3iqr8] { color: #77899f; font-size: 9px; }
.item-location-card__product h2[b-we6tq3iqr8] {
    margin: 2px 0 1px;
    color: #172e4d;
    font-size: 16px;
    font-weight: 800;
}

.item-location-card__product p[b-we6tq3iqr8] {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.item-location-card__product p.muted[b-we6tq3iqr8] { color: var(--il-muted); }

.item-location-card dl[b-we6tq3iqr8] {
    display: grid;
    margin: 0 0 11px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.item-location-card dl > div[b-we6tq3iqr8] {
    min-width: 0;
    padding: 6px 7px;
    border-radius: 7px;
    background: #f6f8fb;
}

.item-location-card dt[b-we6tq3iqr8] { color: #8190a3; font-size: 8px; font-weight: 750; }
.item-location-card dd[b-we6tq3iqr8] {
    margin: 1px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
}

.item-location-card > footer[b-we6tq3iqr8] {
    display: grid;
    margin-top: auto;
    padding-top: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #e3eaf1;
}

.item-location-card > footer span[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    padding: 0 8px;
    flex-direction: column;
    border-right: 1px solid #e3eaf1;
}

.item-location-card > footer span:first-child[b-we6tq3iqr8] { padding-left: 0; }
.item-location-card > footer span:last-child[b-we6tq3iqr8] { padding-right: 0; border-right: 0; }
.item-location-card > footer small[b-we6tq3iqr8] { color: var(--il-muted); font-size: 8px; }
.item-location-card > footer strong[b-we6tq3iqr8] { font-size: 14px; font-variant-numeric: tabular-nums; }
.item-location-card > footer .allocated strong[b-we6tq3iqr8] { color: #b16c00; }
.item-location-card > footer .available strong[b-we6tq3iqr8] { color: #07864c; }

.item-location-card-pager[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.item-location-card-pager button[b-we6tq3iqr8] {
    display: inline-flex;
    height: 32px;
    padding: 0 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid #cbd8e5;
    border-radius: 8px;
    color: #315d8a;
    background: #fff;
    font-size: 10px;
    font-weight: 750;
}

.item-location-card-pager button:hover:not(:disabled)[b-we6tq3iqr8] { border-color: #8eb6df; background: #eaf4ff; }
.item-location-card-pager button:disabled[b-we6tq3iqr8] { cursor: not-allowed; opacity: .45; }
.item-location-card-pager span[b-we6tq3iqr8] { color: #64768c; font-size: 10px; }

.item-location-cards-empty[b-we6tq3iqr8] {
    display: grid;
    flex: 1 1 auto;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.item-location-cards-empty > span[b-we6tq3iqr8] {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 17px;
    color: #3d7ebd;
    background: #deebf8;
    font-size: 21px;
}

.item-location-cards-empty h2[b-we6tq3iqr8] { margin: 0; font-size: 15px; }
.item-location-cards-empty p[b-we6tq3iqr8] { margin: 5px 0 0; color: var(--il-muted); font-size: 10px; }

@media (max-width: 1250px) {
    .item-location__filters[b-we6tq3iqr8] { flex-wrap: wrap; }
    .item-location__search[b-we6tq3iqr8] { flex-basis: calc(100% - 100px); }
    .item-location__workspace--split[b-we6tq3iqr8] { grid-template-columns: minmax(560px, 1.35fr) minmax(330px, .65fr); }
    .item-location-card-grid[b-we6tq3iqr8] { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}

@media (max-width: 960px) {
    .item-location[b-we6tq3iqr8] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .item-location__metrics[b-we6tq3iqr8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .item-location__summary-strip[b-we6tq3iqr8] { overflow-x: auto; }
    .item-location__summary-strip em[b-we6tq3iqr8] { display: none; }
    .item-location__workspace--split[b-we6tq3iqr8] { display: flex; flex-direction: column; }
    .item-location-table-card[b-we6tq3iqr8] { height: 560px; }
    .item-location-inspector[b-we6tq3iqr8] { min-height: 520px; }
    .item-location-card-workspace[b-we6tq3iqr8] { min-height: 650px; }
}

@media (max-width: 640px) {
    .item-location[b-we6tq3iqr8] { padding: 12px; gap: 10px; }
    .item-location__header[b-we6tq3iqr8] { align-items: center; }
    .item-location__header p[b-we6tq3iqr8] { display: none; }
    .item-location__filters[b-we6tq3iqr8] { align-items: stretch; }
    .item-location__search[b-we6tq3iqr8] { min-width: 100%; flex-basis: 100%; }
    .item-location__search-button[b-we6tq3iqr8],
    .item-location__ghost-button[b-we6tq3iqr8],
    .item-location__export-button[b-we6tq3iqr8] { flex: 1 1 auto; }
    .item-location__segments[b-we6tq3iqr8] { width: 100%; }
    .item-location__segments button[b-we6tq3iqr8] { flex: 1 1 0; }
    .item-location__metrics[b-we6tq3iqr8] { gap: 8px; }
    .item-location-metric[b-we6tq3iqr8] { padding: 10px; }
    .item-location-metric > span[b-we6tq3iqr8] { flex-basis: 34px; width: 34px; height: 34px; }
    .item-location-table-card[b-we6tq3iqr8] { height: 520px; }
    .item-location-table-card__heading p[b-we6tq3iqr8] { display: none; }
    .item-location__card-summary[b-we6tq3iqr8] { align-items: flex-start; flex-direction: column; }
    .item-location__card-summary > div[b-we6tq3iqr8] { width: 100%; overflow-x: auto; }
    .item-location__card-summary span[b-we6tq3iqr8] { min-width: 115px; }
    .item-location-card-grid[b-we6tq3iqr8] { grid-template-columns: 1fr; }
}


.item-location__serial[b-we6tq3iqr8] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #345979;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
}


/* Item location row detail drawer */
.item-location-drawer-backdrop[b-we6tq3iqr8] {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 35, 58, .38);
    backdrop-filter: blur(1px);
    animation: item-location-fade-in-b-we6tq3iqr8 .16s ease-out;
}

.item-location-drawer[b-we6tq3iqr8] {
    display: flex;
    width: min(440px, calc(100vw - 24px));
    height: 100%;
    min-width: 360px;
    max-width: min(900px, calc(100vw - 24px));
    position: relative;
    flex: 0 0 auto;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid #d5e1ed;
    color: #17324f;
    background: #f4f7fb;
    box-shadow: -18px 0 45px rgba(13, 35, 62, .2);
    animation: item-location-slide-in-b-we6tq3iqr8 .2s ease-out;
}

.item-location-drawer__resize-handle[b-we6tq3iqr8] {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    cursor: ew-resize;
    touch-action: none;
    transform: translateX(-50%);
}

.item-location-drawer__resize-handle[b-we6tq3iqr8]::after {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 3px;
    height: 48px;
    border-radius: 999px;
    background: #9db8d3;
    content: "";
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .15s ease, background .15s ease;
}

.item-location-drawer__resize-handle:hover[b-we6tq3iqr8]::after,
.item-location-drawer__resize-handle.is-resizing[b-we6tq3iqr8]::after {
    background: #2674c8;
    opacity: 1;
}

body.item-location-drawer-resizing[b-we6tq3iqr8],
body.item-location-drawer-resizing *[b-we6tq3iqr8] {
    cursor: ew-resize !important;
    user-select: none !important;
}

.item-location-drawer__header[b-we6tq3iqr8] {
    display: flex;
    flex: 0 0 auto;
    min-height: 88px;
    padding: 17px 18px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #d8e3ed;
    background: #fff;
}

.item-location-drawer__title[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.item-location-drawer__title > span[b-we6tq3iqr8] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #1768c5;
    background: #e8f3ff;
}

.item-location-drawer__title > div[b-we6tq3iqr8] { min-width: 0; }
.item-location-drawer__title small[b-we6tq3iqr8] {
    color: #1768c5;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .13em;
}

.item-location-drawer__title h2[b-we6tq3iqr8] {
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 850;
}

.item-location-drawer__title p[b-we6tq3iqr8] {
    margin: 2px 0 0;
    overflow: hidden;
    color: #71849a;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.item-location-drawer__header > button[b-we6tq3iqr8] {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: #5f748b;
    background: #eef3f7;
    transition: .15s ease;
}

.item-location-drawer__header > button:hover[b-we6tq3iqr8] {
    color: #17324f;
    background: #e1eaf2;
}

.item-location-drawer__body[b-we6tq3iqr8] {
    display: flex;
    min-height: 0;
    padding: 13px;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 11px;
    overflow: hidden;
}

.item-location-drawer__content-scroll[b-we6tq3iqr8] {
    display: flex;
    min-height: 0;
    padding-right: 3px;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 11px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: auto;
}

.item-location-drawer__stock[b-we6tq3iqr8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 8px;
}

.item-location-drawer__stock article[b-we6tq3iqr8] {
    display: flex;
    min-width: 0;
    padding: 11px;
    flex-direction: column;
    border: 1px solid #d9e5f0;
    border-radius: 11px;
    background: #fff;
}

.item-location-drawer__stock small[b-we6tq3iqr8] {
    color: #77899d;
    font-size: 8px;
    font-weight: 750;
}

.item-location-drawer__stock strong[b-we6tq3iqr8] {
    margin-top: 2px;
    color: #17324f;
    font-size: 18px;
}

.item-location-drawer__stock .allocated strong[b-we6tq3iqr8] { color: #b36b00; }
.item-location-drawer__stock .available strong[b-we6tq3iqr8] { color: #07804c; }

.item-location-drawer__section[b-we6tq3iqr8] {
    padding: 13px;
    border: 1px solid #d9e4ef;
    border-radius: 12px;
    background: #fff;
}

.item-location-drawer__section > header[b-we6tq3iqr8] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.item-location-drawer__section > header > i[b-we6tq3iqr8] {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 9px;
    color: #1768c5;
    background: #eaf4ff;
}

.item-location-drawer__section h3[b-we6tq3iqr8] {
    margin: 0;
    font-size: 12px;
    font-weight: 830;
}

.item-location-drawer__section header p[b-we6tq3iqr8] {
    margin: 1px 0 0;
    color: #8291a4;
    font-size: 8px;
}

.item-location-drawer__details[b-we6tq3iqr8] {
    display: grid;
    margin: 11px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.item-location-drawer__details > div[b-we6tq3iqr8] {
    min-width: 0;
    padding: 8px 9px;
    border-radius: 8px;
    background: #f4f7fa;
}

.item-location-drawer__details > div.wide[b-we6tq3iqr8] { grid-column: 1 / -1; }
.item-location-drawer__details dt[b-we6tq3iqr8] {
    color: #8190a2;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
}

.item-location-drawer__details dd[b-we6tq3iqr8] {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    color: #223d5c;
    font-size: 10px;
    font-weight: 750;
}

.item-location-drawer__serials[b-we6tq3iqr8] {
    display: flex;
    min-height: 140px;
    flex: 1 0 auto;
    flex-direction: column;
}

.item-location-drawer__serial-list[b-we6tq3iqr8] {
    display: grid;
    margin-top: 11px;
    grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
    gap: 5px;
}

.item-location-drawer__serial-list span[b-we6tq3iqr8] {
    display: flex;
    padding: 7px 9px;
    align-items: center;
    gap: 8px;
    border: 1px solid #dce7f1;
    border-radius: 8px;
    color: #315675;
    background: #f7fafd;
    overflow-wrap: anywhere;
    font-size: 9px;
    font-weight: 700;
}

.item-location-drawer__serial-list strong[b-we6tq3iqr8] {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
    font-size: inherit;
}

.item-location-drawer__serial-list em[b-we6tq3iqr8] {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    color: #9a4e00;
    background: #ffe4bd;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.item-location-drawer__serial-list span.is-allocated[b-we6tq3iqr8] {
    border-color: #f5b65d;
    color: #9a4e00;
    background: #fff4e5;
}

.item-location-drawer__serial-list i[b-we6tq3iqr8] { color: #4687c9; }

.item-location-drawer__serial-list span.is-allocated i[b-we6tq3iqr8] { color: #e98300; }

.item-location-drawer__empty[b-we6tq3iqr8] {
    display: flex;
    min-height: 72px;
    margin-top: 10px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed #d7e2ec;
    border-radius: 9px;
    color: #8292a4;
    background: #f8fafc;
    font-size: 9px;
}

.item-location--v1 .table-wrapper tbody tr[b-we6tq3iqr8] { cursor: pointer; }

@keyframes item-location-fade-in-b-we6tq3iqr8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes item-location-slide-in-b-we6tq3iqr8 {
    from { transform: translateX(28px); opacity: .7; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 560px) {
    .item-location-drawer[b-we6tq3iqr8] {
        width: calc(100vw - 8px);
        min-width: 0;
        max-width: calc(100vw - 8px);
        border-left-width: 1px;
    }

    .item-location-drawer__resize-handle[b-we6tq3iqr8] {
        display: none;
    }

    .item-location-drawer__body[b-we6tq3iqr8] {
        padding: 9px;
    }

    .item-location-drawer__details[b-we6tq3iqr8] {
        grid-template-columns: 1fr;
    }

    .item-location-drawer__details > div.wide[b-we6tq3iqr8] {
        grid-column: auto;
    }
}
/* _content/WMS.UI/Pages/Reports/LocationReportDesigner.razor.rz.scp.css */
.location-report[b-53e5ue8yiy] {
    --lr-blue: #1769d2;
    --lr-ink: #14243e;
    --lr-muted: #6f7f96;
    --lr-line: #dbe5f1;
    --lr-surface: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    padding: 14px;
    overflow: hidden;
    color: var(--lr-ink);
    background: #f4f7fb;
}

.location-report__header[b-53e5ue8yiy] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.location-report__eyebrow[b-53e5ue8yiy] {
    display: block;
    margin-bottom: 4px;
    color: var(--lr-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.location-report__header h1[b-53e5ue8yiy],
.location-table-card__heading h2[b-53e5ue8yiy] {
    margin: 0;
    font-weight: 750;
    color: var(--lr-ink);
}

.location-report__header h1[b-53e5ue8yiy] { font-size: clamp(22px, 2vw, 30px); }

.location-report__header p[b-53e5ue8yiy],
.location-table-card__heading p[b-53e5ue8yiy] {
    margin: 3px 0 0;
    color: var(--lr-muted);
    font-size: 13px;
}

.location-report__live[b-53e5ue8yiy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 11px;
    border: 1px solid #c9ead9;
    border-radius: 999px;
    color: #13814d;
    background: #f0fbf5;
    font-size: 11px;
    font-weight: 800;
}

.location-report__live i[b-53e5ue8yiy] { font-size: 7px; }

.location-report__summary[b-53e5ue8yiy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 10px;
}

.location-metric[b-53e5ue8yiy] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 62px;
    padding: 10px 13px;
    border: 1px solid var(--lr-line);
    border-radius: 12px;
    background: var(--lr-surface);
    box-shadow: 0 3px 12px rgba(33, 55, 86, .04);
}

.location-metric__icon[b-53e5ue8yiy] {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #1769d2;
    background: #eaf3ff;
}

.location-metric--green .location-metric__icon[b-53e5ue8yiy] { color: #0d9957; background: #eaf9f1; }
.location-metric--indigo .location-metric__icon[b-53e5ue8yiy] { color: #5756c9; background: #efefff; }
.location-metric--cyan .location-metric__icon[b-53e5ue8yiy] { color: #07859d; background: #e8f8fb; }
.location-metric--gray .location-metric__icon[b-53e5ue8yiy] { color: #687990; background: #eef2f6; }

.location-metric > span:last-child[b-53e5ue8yiy] { display: flex; min-width: 0; flex-direction: column; }
.location-metric small[b-53e5ue8yiy] { color: var(--lr-muted); font-size: 11px; }
.location-metric strong[b-53e5ue8yiy] { font-size: 19px; line-height: 1.1; }

.location-area-strip[b-53e5ue8yiy] {
    display: grid;
    grid-template-columns: minmax(190px, 1.15fr) repeat(3, minmax(130px, 1fr)) minmax(90px, .65fr) minmax(175px, 1.15fr);
    flex: 0 0 auto;
    min-width: 0;
    margin-bottom: var(--wms-page-gap, 8px);
    overflow: hidden;
    border: 1px solid var(--lr-line);
    border-left: 4px solid #1769d2;
    border-radius: 12px;
    background: var(--lr-surface);
}

.location-area-strip > div[b-53e5ue8yiy],
.location-area-strip__selector[b-53e5ue8yiy] {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 7px 12px;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--lr-line);
}

.location-area-strip > :last-child[b-53e5ue8yiy] { border-right: 0; }

.location-area-strip small[b-53e5ue8yiy] {
    color: #718197;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
}

.location-area-strip strong[b-53e5ue8yiy] {
    overflow: hidden;
    margin-top: 3px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-area-strip__selector > span[b-53e5ue8yiy] {
    position: relative;
    display: flex;
    align-items: center;
}

.location-area-strip__selector select[b-53e5ue8yiy] {
    width: 100%;
    min-height: 32px;
    padding: 3px 30px 3px 0;
    overflow: hidden;
    border: 0;
    outline: none;
    appearance: none;
    color: var(--lr-ink);
    background: transparent;
    font-size: 13px;
    font-weight: 750;
    text-overflow: ellipsis;
}

.location-area-strip__selector i[b-53e5ue8yiy] {
    position: absolute;
    right: 2px;
    color: #49627d;
    font-size: 10px;
    pointer-events: none;
}

.location-filter[b-53e5ue8yiy] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(150px, 190px) auto;
    flex: 0 0 auto;
    align-items: end;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--lr-line);
    border-radius: 12px;
    background: var(--lr-surface);
}

.location-filter__search[b-53e5ue8yiy] {
    position: relative;
    display: flex;
    align-items: center;
}

.location-filter__search i[b-53e5ue8yiy] {
    position: absolute;
    left: 14px;
    color: #8492a6;
}

.location-filter input[b-53e5ue8yiy],
.location-filter select[b-53e5ue8yiy] {
    width: 100%;
    min-height: 39px;
    border: 1px solid #cfdaE8;
    border-radius: 8px;
    outline: none;
    color: var(--lr-ink);
    background: #fbfcfe;
    font-size: 13px;
}

.location-filter input[b-53e5ue8yiy] { padding: 8px 12px 8px 39px; }
.location-filter select[b-53e5ue8yiy] { padding: 7px 10px; }
.location-filter input:focus[b-53e5ue8yiy],
.location-filter select:focus[b-53e5ue8yiy] { border-color: #76a9e9; box-shadow: 0 0 0 3px rgba(23, 105, 210, .1); }

.location-filter__field[b-53e5ue8yiy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.location-filter__field > span[b-53e5ue8yiy] {
    color: #586a82;
    font-size: 11px;
    font-weight: 700;
}

.location-filter__hint[b-53e5ue8yiy] {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 7px;
    white-space: nowrap;
    color: var(--lr-muted);
    font-size: 12px;
}

.location-workspace[b-53e5ue8yiy] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.location-workspace--split[b-53e5ue8yiy] {
    display: grid;
    grid-template-columns: minmax(540px, 1.35fr) minmax(360px, .85fr);
    gap: 14px;
}

.location-table-card[b-53e5ue8yiy],
.location-detail-panel[b-53e5ue8yiy] {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--lr-line);
    border-radius: 13px;
    background: var(--lr-surface);
    box-shadow: 0 5px 18px rgba(37, 60, 92, .05);
}

.location-table-card[b-53e5ue8yiy] {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.location-table-card__heading[b-53e5ue8yiy] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--lr-line);
}

.location-table-card__heading h2[b-53e5ue8yiy] { font-size: 16px; }

.location-table-card__heading > span[b-53e5ue8yiy] {
    padding: 5px 9px;
    border-radius: 999px;
    color: #31577f;
    background: #edf4fc;
    font-size: 11px;
    font-weight: 700;
}

.location-table-card__body[b-53e5ue8yiy] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.location-table-card__body[b-53e5ue8yiy]  .table-container { border: 0; border-radius: 0; }
.location-table-card__body[b-53e5ue8yiy]  .table-wrapper tbody tr { cursor: pointer; }
.location-table-card__body[b-53e5ue8yiy]  .table-wrapper tbody tr:hover { background: #f0f6ff; }
.location-table-card__body[b-53e5ue8yiy]  .table-wrapper tbody tr.active { background: #e8f2ff; }

.location-containers[b-53e5ue8yiy] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.location-containers span[b-53e5ue8yiy] {
    padding: 2px 6px;
    border-radius: 5px;
    color: #245d91;
    background: #ebf4fc;
    font-size: 11px;
}

.location-table-empty[b-53e5ue8yiy] { color: #9aa7b8; }

.location-detail-panel[b-53e5ue8yiy] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.location-detail-empty[b-53e5ue8yiy] {
    display: grid;
    width: 100%;
    place-content: center;
    justify-items: center;
    padding: 36px;
    text-align: center;
}

.location-detail-empty > span[b-53e5ue8yiy] {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 17px;
    color: #4f85c5;
    background: #eaf3fd;
    font-size: 22px;
}

.location-detail-empty h2[b-53e5ue8yiy] { margin: 0; font-size: 16px; }
.location-detail-empty p[b-53e5ue8yiy] { max-width: 260px; margin: 6px 0 0; color: var(--lr-muted); font-size: 12px; }

.location-modal-backdrop[b-53e5ue8yiy] {
    position: fixed;
    z-index: 1055;
    inset: 0;
    display: grid;
    padding: clamp(16px, 4vw, 56px);
    place-items: center;
    overflow: auto;
    background: rgba(17, 30, 49, .56);
    backdrop-filter: blur(2px);
}

.location-modal[b-53e5ue8yiy] {
    width: min(1180px, 100%);
    height: min(720px, 100%);
    min-height: 430px;
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(5, 20, 42, .28);
}

@media (max-width: 1180px) {
    .location-area-strip[b-53e5ue8yiy] { grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(120px, .85fr)); }
    .location-area-strip > div:nth-last-child(-n + 2)[b-53e5ue8yiy] { display: none; }
    .location-filter[b-53e5ue8yiy] { grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(145px, 180px)); }
    .location-filter__hint[b-53e5ue8yiy] { display: none; }
    .location-workspace--split[b-53e5ue8yiy] { grid-template-columns: minmax(460px, 1.2fr) minmax(330px, .8fr); }
}

@media (max-width: 900px) {
    .location-report[b-53e5ue8yiy] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .location-report__summary[b-53e5ue8yiy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .location-area-strip[b-53e5ue8yiy] { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    .location-area-strip > div[b-53e5ue8yiy],
    .location-area-strip__selector[b-53e5ue8yiy] { border-bottom: 1px solid var(--lr-line); }
    .location-area-strip > div:nth-last-child(-n + 2)[b-53e5ue8yiy] { display: flex; }
    .location-filter[b-53e5ue8yiy] { grid-template-columns: 1fr 1fr; }
    .location-filter__search[b-53e5ue8yiy] { grid-column: 1 / -1; }
    .location-workspace--split[b-53e5ue8yiy] { display: flex; flex-direction: column; }
    .location-table-card[b-53e5ue8yiy] { height: 560px; }
    .location-detail-panel[b-53e5ue8yiy] { min-height: 520px; }
}

@media (max-width: 600px) {
    .location-report[b-53e5ue8yiy] { gap: 10px; padding: 12px; }
    .location-report__header[b-53e5ue8yiy] { align-items: center; }
    .location-report__header p[b-53e5ue8yiy] { display: none; }
    .location-report__summary[b-53e5ue8yiy] { grid-template-columns: 1fr 1fr; gap: 8px; }
    .location-area-strip[b-53e5ue8yiy] { grid-template-columns: 1fr; }
    .location-metric[b-53e5ue8yiy] { padding: 10px; }
    .location-metric__icon[b-53e5ue8yiy] { flex-basis: 34px; width: 34px; height: 34px; }
    .location-metric strong[b-53e5ue8yiy] { font-size: 18px; }
    .location-filter[b-53e5ue8yiy] { grid-template-columns: 1fr; }
    .location-filter__search[b-53e5ue8yiy] { grid-column: auto; }
    .location-table-card[b-53e5ue8yiy] { height: 510px; }
    .location-modal-backdrop[b-53e5ue8yiy] { padding: 0; place-items: stretch; }
    .location-modal[b-53e5ue8yiy] { width: 100%; height: 100%; min-height: 100%; border: 0; border-radius: 0; }
}

.location-modal[b-53e5ue8yiy] {
    width: min(1120px, calc(100vw - 40px));
    height: min(820px, calc(100dvh - 32px));
    min-height: 0;
    max-height: calc(100dvh - 32px);
}
@media (max-width: 600px) {
    .location-modal[b-53e5ue8yiy], .location-modal:has([data-card-count])[b-53e5ue8yiy] {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }
}
@media (max-width: 600px) {
    .location-modal-backdrop[b-53e5ue8yiy] { padding: 8px; place-items: center; }
    .location-modal[b-53e5ue8yiy] { border: 1px solid #d8e2ee; border-radius: 12px; }
}

.location-area-strip__selector[b-53e5ue8yiy] {
    background: #f8fbff;
}

.location-area-strip__selector small[b-53e5ue8yiy] {
    color: #1769d2;
    font-weight: 850;
}

.location-summary-bar[b-53e5ue8yiy] {
    min-width: 0;
    min-height: 58px;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: minmax(190px, .9fr) minmax(560px, 2fr) minmax(230px, auto);
    flex: 0 0 auto;
    align-items: center;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--lr-line);
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.location-summary-bar__area[b-53e5ue8yiy] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.location-summary-bar__area strong[b-53e5ue8yiy] {
    overflow: hidden;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-summary-bar__area span[b-53e5ue8yiy] {
    margin-top: 2px;
    color: #718198;
    font-size: 10px;
}

.location-summary-bar__metrics[b-53e5ue8yiy] {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 12px;
}

.location-summary-metric[b-53e5ue8yiy] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.location-summary-metric > span[b-53e5ue8yiy] {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 12px;
}

.location-summary-metric.is-blue > span[b-53e5ue8yiy] { color: #2563eb; background: #dbeafe; }
.location-summary-metric.is-green > span[b-53e5ue8yiy] { color: #059669; background: #d1fae5; }
.location-summary-metric.is-cyan > span[b-53e5ue8yiy] { color: #0891b2; background: #cffafe; }
.location-summary-metric.is-gray > span[b-53e5ue8yiy] { color: #64748b; background: #e9eef5; }

.location-summary-metric div[b-53e5ue8yiy] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.location-summary-metric small[b-53e5ue8yiy] {
    overflow: hidden;
    color: #718198;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-summary-metric strong[b-53e5ue8yiy] {
    color: #172033;
    font-size: 17px;
    font-weight: 850;
    line-height: 1.1;
}

.location-summary-bar__live[b-53e5ue8yiy] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.location-last-updated[b-53e5ue8yiy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 9px;
    font-weight: 650;
    white-space: nowrap;
}

.location-last-updated i[b-53e5ue8yiy] {
    color: #2563eb;
}

.location-live-indicator[b-53e5ue8yiy] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    white-space: nowrap;
}

.location-live-indicator i[b-53e5ue8yiy] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

@media (max-width: 1250px) {
    .location-summary-bar[b-53e5ue8yiy] {
        grid-template-columns: minmax(180px, .8fr) minmax(520px, 2fr);
    }

    .location-summary-bar__live[b-53e5ue8yiy] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 850px) {
    .location-summary-bar[b-53e5ue8yiy] {
        grid-template-columns: 1fr;
    }

    .location-summary-bar__metrics[b-53e5ue8yiy] {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .location-summary-bar__live[b-53e5ue8yiy] {
        grid-column: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .location-summary-bar__metrics[b-53e5ue8yiy] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .location-summary-bar__live[b-53e5ue8yiy] {
        align-items: flex-start;
        flex-direction: column-reverse;
    }
}

/* Keep the report table and its filter toolbar consistent with Reports/Tote. */
.location-table-card__body[b-53e5ue8yiy]  .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.location-table-card__body[b-53e5ue8yiy]  .table-toolbar {
    min-height: 52px;
    padding: 6px 0;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    border-bottom: 1px solid #e8edf3;
}

.location-table-card__body[b-53e5ue8yiy]  .table-toolbar::after {
    display: none;
}

.location-table-card__body[b-53e5ue8yiy]  .table-toolbar > .table-toolbar-button:not(.table-column-right) {
    min-width: 0;
    flex: 1 1 auto;
}

.location-table-card__body[b-53e5ue8yiy]  .table-toolbar .table-column-right {
    flex: 0 0 auto;
    margin-left: 16px !important;
}

.location-table-card__body[b-53e5ue8yiy]  .wms-filterbar,
.location-table-card__body[b-53e5ue8yiy]  .wms-filterbar-filters {
    width: 100%;
}

.location-table-card__body[b-53e5ue8yiy]  .wms-filterbar-filters {
    justify-content: flex-start;
}

.location-table-card__body[b-53e5ue8yiy]  .wms-filter-search {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
}

.location-table-card__body[b-53e5ue8yiy]  .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border: 1px solid var(--lr-line);
    border-radius: 9px;
}

.location-table-card__body[b-53e5ue8yiy]  .table-fixed,
.location-table-card__body[b-53e5ue8yiy]  .table-fixed-header,
.location-table-card__body[b-53e5ue8yiy]  .table-fixed-body,
.location-table-card__body[b-53e5ue8yiy]  .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.location-table-card__body[b-53e5ue8yiy]  .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.location-table-card__body[b-53e5ue8yiy]  .table-fixed-header > table,
.location-table-card__body[b-53e5ue8yiy]  .table-fixed-body > table {
    min-width: 890px;
}

.location-table-card__body[b-53e5ue8yiy]  .table-header {
    color: #475569;
    background: #f6f8fb !important;
    font-size: 11px;
    font-weight: 750;
}

.location-table-card__body[b-53e5ue8yiy]  .table-cell {
    border-color: #e9eef5 !important;
    vertical-align: middle !important;
    font-size: 11px;
}

.location-table-card__body[b-53e5ue8yiy]  .table-fixed-body tbody tr > td,
.location-table-card__body[b-53e5ue8yiy]  .table-fixed-body tbody tr > th {
    border-top-color: transparent !important;
    border-bottom: 1px solid #e9eef5 !important;
}

.location-table-card__body[b-53e5ue8yiy]  .nav-pages {
    min-height: 44px !important;
    height: 44px;
    max-height: 44px;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: space-between;
    border-top: 0 !important;
}

.location-table-card__body[b-53e5ue8yiy]  .nav-pages > .pagination {
    margin: 0 0 0 auto !important;
    flex: 1 1 auto;
    justify-content: flex-end !important;
}

.location-table-card__body[b-53e5ue8yiy]  .nav-pages > .page-goto {
    flex: 0 0 auto;
    margin-left: 8px;
}

.location-code[b-53e5ue8yiy],
.location-state[b-53e5ue8yiy],
.location-enable[b-53e5ue8yiy],
.location-process[b-53e5ue8yiy] {
    min-height: 23px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.location-code[b-53e5ue8yiy] {
    padding-inline: 0;
    color: #1769c2;
    background: transparent;
    font-size: 11px;
}

.location-state.has-product[b-53e5ue8yiy],
.location-enable.is-enabled[b-53e5ue8yiy] {
    color: #087f5b;
    background: #dcf8eb;
    border: 1px solid #a9e5cd;
}

.location-state.is-empty[b-53e5ue8yiy],
.location-process[b-53e5ue8yiy] {
    color: #718096;
    background: #edf1f6;
    border: 1px solid #d7dee8;
}

.location-enable.is-disabled[b-53e5ue8yiy] {
    color: #b42318;
    background: #fff0ee;
    border: 1px solid #f4c7c3;
}

.location-containers span[b-53e5ue8yiy] {
    min-height: 23px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfe0f0;
    border-radius: 999px;
    color: #234f7c;
    background: #edf4fb;
    font-size: 9.5px;
    font-weight: 700;
}

.location-main-cell[b-53e5ue8yiy] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.location-main-cell__icon[b-53e5ue8yiy] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #cfe1f6;
    border-radius: 8px;
    color: #1769d2;
    background: #edf5ff;
}

.location-main-cell > span:last-child[b-53e5ue8yiy],
.location-operation-cell[b-53e5ue8yiy] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.location-main-cell strong[b-53e5ue8yiy] {
    overflow: hidden;
    color: #154f91;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-main-cell small[b-53e5ue8yiy] {
    overflow: hidden;
    color: #7b8ba0;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-status-cell[b-53e5ue8yiy] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-operation-cell .location-process[b-53e5ue8yiy] {
    align-self: flex-start;
}

.location-operation-cell .location-containers[b-53e5ue8yiy] {
    flex-wrap: nowrap;
    overflow: hidden;
}

.location-operation-cell .location-containers span[b-53e5ue8yiy] {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-movement-cell[b-53e5ue8yiy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #405b78;
    font-size: 10px;
    white-space: nowrap;
}

.location-movement-cell i[b-53e5ue8yiy] { color: #1769d2; }

.location-view-action[b-53e5ue8yiy] {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 1px solid #9fc5f5;
    border-radius: 8px;
    color: #1769d2;
    background: #fff;
    font-size: 10px;
}

.location-view-action:hover[b-53e5ue8yiy] {
    border-color: #1769d2;
    color: #fff;
    background: #1769d2;
}

@media (max-width: 850px) {
    .location-table-card__body[b-53e5ue8yiy]  .table-toolbar {
        flex-wrap: wrap;
    }

    .location-table-card__body[b-53e5ue8yiy]  .wms-filterbar-filters {
        flex-wrap: wrap;
    }

    .location-table-card__body[b-53e5ue8yiy]  .wms-filter-label {
        flex-basis: 100%;
    }

    .location-table-card__body[b-53e5ue8yiy]  .wms-filter-search,
    .location-table-card__body[b-53e5ue8yiy]  .wms-filter-select {
        width: auto;
        max-width: none;
        flex: 1 1 220px;
    }
}
/* _content/WMS.UI/Pages/Reports/LocationReportDetail.razor.rz.scp.css */
.location-detail[b-wa5hybk6co] {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: #14243e;
    background: #fff;
}

.location-detail__header[b-wa5hybk6co] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 18px;
    border-bottom: 1px solid #dbe5f1;
}

.location-detail__title[b-wa5hybk6co] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.location-detail__icon[b-wa5hybk6co] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: #1769d2;
    background: #eaf3ff;
}

.location-detail__title > span:last-child[b-wa5hybk6co] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.location-detail__title small[b-wa5hybk6co] {
    color: #1769d2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.location-detail__title strong[b-wa5hybk6co] {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-detail__title em[b-wa5hybk6co] {
    overflow: hidden;
    color: #708097;
    font-size: 11px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-detail__header-actions[b-wa5hybk6co] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.location-detail__status[b-wa5hybk6co] {
    display: inline-flex;
    min-height: 28px;
    padding: 5px 10px;
    align-items: center;
    gap: 6px;
    border: 1px solid #cfe0f6;
    border-radius: 999px;
    color: #1769d2;
    background: #edf5ff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.location-detail__status.is-occupied[b-wa5hybk6co] {
    border-color: #bce9d3;
    color: #087949;
    background: #e9f9f1;
}

.location-detail__close[b-wa5hybk6co] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    place-items: center;
    color: #52657d;
    background: #eef3f8;
}

.location-detail__close:hover[b-wa5hybk6co] { color: #c43b4c; background: #fff0f2; }

.location-detail__facts[b-wa5hybk6co] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid #dbe5f1;
    background: #f4f7fb;
}

.location-detail__facts > div[b-wa5hybk6co] {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 9px 12px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dbe5f1;
    border-radius: 9px;
    background: #fff;
}

.location-detail__facts small[b-wa5hybk6co] { color: #75849a; font-size: 10px; }
.location-detail__facts strong[b-wa5hybk6co] { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.location-detail__items[b-wa5hybk6co] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    padding: 14px;
}

.location-detail__items-heading[b-wa5hybk6co] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.location-detail__items-heading span[b-wa5hybk6co] { font-size: 13px; font-weight: 750; }
.location-detail__items-heading span i[b-wa5hybk6co] { margin-right: 6px; color: #1769d2; }
.location-detail__items-heading small[b-wa5hybk6co] { color: #7a899d; font-size: 10px; }

.location-detail__items-table[b-wa5hybk6co] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 10px;
}

.location-detail__items-table[b-wa5hybk6co]  .table-container { border: 0; border-radius: 0; }

.location-detail__footer[b-wa5hybk6co] {
    display: flex;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid #dbe5f1;
    background: #fff;
}

.location-detail__footer > span[b-wa5hybk6co] {
    color: #718096;
    font-size: 10px;
}

.location-detail__footer > span i[b-wa5hybk6co] {
    margin-right: 6px;
    color: #12a363;
}

.location-detail__footer button[b-wa5hybk6co] {
    min-width: 92px;
    padding: 8px 14px;
    border: 1px solid #cbd9ea;
    border-radius: 8px;
    color: #21334d;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
}

.location-detail__footer button:hover[b-wa5hybk6co] { border-color: #1769d2; color: #1769d2; }

@media (max-width: 600px) {
    .location-detail__facts[b-wa5hybk6co] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .location-detail__header[b-wa5hybk6co] { padding: 13px; }
    .location-detail__items[b-wa5hybk6co] { padding: 10px; }
}

.location-detail--popup[b-wa5hybk6co] { height: 100%; max-height: none; }
.location-detail--popup .location-detail__header[b-wa5hybk6co] { padding: 12px 16px; }
.location-detail--popup .location-detail__facts[b-wa5hybk6co] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.location-detail--popup .location-detail__facts > div[b-wa5hybk6co] { min-height: 48px; padding: 7px 12px; }
.location-detail__items-table[b-wa5hybk6co] { display: flex; flex-direction: column; }
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser { flex: 1 1 auto; min-height: 0; }
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser .product-card-grid {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .product-card-viewport { overflow: hidden; }
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .product-card { min-height: 0; }
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .product-card__serials {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
}
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .serial-grid-panel {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .serial-grid {
    height: 0 !important;
    min-height: 0;
    max-height: none !important;
    flex: 1 1 0;
    overflow-y: auto;
}
.location-detail__items-table[b-wa5hybk6co]  .product-card-browser[data-page-size="3"] .serial-grid-panel__empty {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
    flex: 1 1 0;
}
.location-detail--popup .location-detail__items-table[b-wa5hybk6co] { height: auto; max-height: none; flex: 1 1 auto; }
@media (max-width: 600px) {
    .location-detail--popup .location-detail__facts[b-wa5hybk6co] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .location-detail--popup[b-wa5hybk6co] { height: 100%; max-height: none; }
    .location-detail--popup .location-detail__items-table[b-wa5hybk6co] { height: auto; max-height: none; }
    .location-detail__status[b-wa5hybk6co] { display: none; }
    .location-detail__footer > span[b-wa5hybk6co] { display: none; }
    .location-detail__footer[b-wa5hybk6co] { justify-content: flex-end; }
}
@media (max-height: 520px) {
    .location-detail--popup[b-wa5hybk6co] { overflow-y: auto; }
    .location-detail--popup .location-detail__items-table[b-wa5hybk6co] { min-height: 220px; max-height: 300px; }
}
/* _content/WMS.UI/Pages/Reports/OtherOrderDetailPopup.razor.rz.scp.css */
.order-detail-backdrop[b-n4d1dxuxde] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.order-detail-dialog[b-n4d1dxuxde] {
    position: relative;
    width: min(1500px, calc(100vw - 36px));
    height: min(720px, calc(100vh - 36px));
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #14213d;
    background: #f5f7fb;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

.order-detail-header[b-n4d1dxuxde] {
    min-height: 82px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #dbe4ef;
}

.order-detail-title[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.order-detail-icon[b-n4d1dxuxde] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    color: #1769d2;
    background: #e8f1ff;
    border-radius: 12px;
    font-size: 20px;
}

.order-detail-header-actions[b-n4d1dxuxde] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.order-detail-status[b-n4d1dxuxde] {
    padding: 6px 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1769d2;
    background: #e8f1ff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.order-detail-status i[b-n4d1dxuxde] { font-size: 7px; }

.detail-eyebrow[b-n4d1dxuxde] {
    display: block;
    color: #2670da;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.order-detail-header h2[b-n4d1dxuxde] {
    margin: 3px 0;
    color: #12213f;
    font-size: 20px;
    font-weight: 800;
}

.order-detail-header p[b-n4d1dxuxde] {
    margin: 0;
    color: #708098;
    font-size: 11px;
}

.detail-close[b-n4d1dxuxde] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #64748b;
    background: #f1f5f9;
    border: 0;
    border-radius: 9px;
}

.detail-close:hover[b-n4d1dxuxde] { color: #dc2626; background: #fee2e2; }

.order-detail-body[b-n4d1dxuxde] {
    min-width: 0;
    min-height: 0;
    padding: 16px 20px;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
}

.order-detail-body.no-inspector[b-n4d1dxuxde] {
    grid-template-columns: minmax(0, 1fr);
}

.detail-tabs[b-n4d1dxuxde] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e2ee;
    border-radius: 12px;
}

.detail-tab-nav[b-n4d1dxuxde] {
    min-height: 48px;
    padding: 0 10px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #e4eaf2;
}

.detail-tab[b-n4d1dxuxde] {
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #53647d;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
}

.detail-tab:hover[b-n4d1dxuxde] {
    color: #1d5fae;
    background: #f8fbff;
}

.detail-tab.active[b-n4d1dxuxde] {
    color: #087f8c;
    border-bottom-color: #2f80ed;
}

.detail-tab-content[b-n4d1dxuxde] {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-table-shell[b-n4d1dxuxde] {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-n4d1dxuxde] .detail-table-shell > .table,
[b-n4d1dxuxde] .detail-table-shell .table-container,
[b-n4d1dxuxde] .detail-table-shell .table-wrapper {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

[b-n4d1dxuxde] .detail-table-shell .table-fixed-body {
    min-height: 0;
    overflow: auto !important;
}

[b-n4d1dxuxde] .detail-table-shell table { font-size: 10.5px !important; }
[b-n4d1dxuxde] .detail-table-shell thead th {
    height: 36px !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* Fixed-header tables render header and body as separate tables. Keep both on
   the same width algorithm so every declared column lands on the same pixel. */
[b-n4d1dxuxde] .detail-table-shell .table-fixed-header > table,
[b-n4d1dxuxde] .detail-table-shell .table-fixed-body > table {
    width: 100% !important;
    min-width: 1030px !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

[b-n4d1dxuxde] .detail-table-shell thead th,
[b-n4d1dxuxde] .detail-table-shell thead th > .table-cell {
    box-sizing: border-box;
    color: #fff !important;
    background: #1f66b8 !important;
    border-color: rgba(255, 255, 255, .18) !important;
}
[b-n4d1dxuxde] .detail-table-shell tbody td {
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 7px !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 10.5px !important;
}

.compact-primary-cell[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #234463;
    white-space: nowrap;
}

.compact-primary-cell i[b-n4d1dxuxde],
.compact-stack-cell strong i[b-n4d1dxuxde] {
    color: #1769d2;
    font-size: 10px;
}

.compact-primary-cell strong[b-n4d1dxuxde],
.compact-stack-cell strong[b-n4d1dxuxde] {
    overflow: hidden;
    color: #183b62;
    font-size: 10.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-stack-cell[b-n4d1dxuxde],
.compact-quantity-cell[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    line-height: 1.15;
}

.compact-stack-cell small[b-n4d1dxuxde],
.compact-quantity-cell small[b-n4d1dxuxde] {
    overflow: hidden;
    color: #7a8ba2;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compact-quantity-cell[b-n4d1dxuxde] { align-items: flex-end; }

.compact-quantity-cell strong[b-n4d1dxuxde] {
    color: #173b66;
    font-size: 11px;
}

.order-company[b-n4d1dxuxde] {
    color: #425b78;
    font-weight: 700;
}

.compact-code-cell[b-n4d1dxuxde] {
    color: #294d70;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    white-space: nowrap;
}

.order-product-cell[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.order-product-cell strong[b-n4d1dxuxde] {
    overflow: hidden;
    color: #145da8;
    font-size: 10.5px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-product-cell strong i[b-n4d1dxuxde] { margin-right: 5px; color: #1769d2; font-size: 9px; }
.order-product-cell span[b-n4d1dxuxde] { color: #233e5f; font-size: 10px; }
.order-product-cell small[b-n4d1dxuxde] {
    overflow: hidden;
    color: #8190a4;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-quantity-grid[b-n4d1dxuxde] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.order-quantity-grid > span[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.order-quantity-grid small[b-n4d1dxuxde] { color: #8795a8; font-size: 8px; white-space: nowrap; }
.order-quantity-grid strong[b-n4d1dxuxde] { color: #173b66; font-size: 10.5px; }

.detail-status[b-n4d1dxuxde] {
    min-height: 22px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    color: #1769c2;
    font-size: 9.5px;
    font-weight: 650;
    background: #eaf3ff;
    border-radius: 999px;
}

.serial-line-button[b-n4d1dxuxde] {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    box-sizing: border-box;
    padding: 5px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    color: #295276;
    text-align: left;
    border: 1px solid #cfe0f2;
    border-radius: 8px;
    background: #f5f9fe;
}

.serial-line-button > span[b-n4d1dxuxde] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.serial-line-button > span i[b-n4d1dxuxde] {
    color: #3b82c4;
    font-size: 9px;
}

.serial-line-button > span strong[b-n4d1dxuxde] {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}

.serial-line-button > em[b-n4d1dxuxde] {
    grid-column: 2;
    align-self: center;
    color: #1769c2;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.serial-line-button:hover:not(:disabled)[b-n4d1dxuxde],
.serial-line-button.is-selected[b-n4d1dxuxde] {
    color: #124d8c;
    border-color: #4f91da;
    background: #e8f2ff;
    box-shadow: 0 0 0 2px rgba(47, 128, 237, .1);
}

.serial-line-button:disabled[b-n4d1dxuxde] {
    color: #8a99a9;
    border-style: dashed;
    background: #f8fafc;
    cursor: default;
}

.serial-line-button:disabled > span i[b-n4d1dxuxde] { color: #9aa8b7; }

.serial-inspector[b-n4d1dxuxde] {
    position: absolute;
    z-index: 5;
    top: 82px;
    right: 0;
    bottom: 66px;
    width: min(430px, 100%);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-left: 1px solid #cfdeed;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: -16px 0 40px rgba(15, 23, 42, .15);
}

.serial-inspector.is-empty[b-n4d1dxuxde] { display: none; }

.serial-inspector-shade[b-n4d1dxuxde] {
    position: absolute;
    inset: 82px 0 66px;
    z-index: 4;
    background: rgba(15, 23, 42, .18);
}

.serial-inspector-header[b-n4d1dxuxde] {
    flex: 0 0 auto;
    min-height: 75px;
    padding: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #e2e9f1;
    background: linear-gradient(135deg, #f4f9ff, #fff);
}

.serial-inspector-header > div[b-n4d1dxuxde] { min-width: 0; }

.serial-inspector-header span[b-n4d1dxuxde] {
    display: block;
    color: #1769c2;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.serial-inspector-header h3[b-n4d1dxuxde] {
    margin: 3px 0 0;
    overflow: hidden;
    color: #142e4d;
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-header p[b-n4d1dxuxde] {
    margin: 2px 0 0;
    overflow: hidden;
    color: #718096;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-header button[b-n4d1dxuxde] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: #66798e;
    border: 0;
    border-radius: 7px;
    background: #eaf0f7;
}

.serial-inspector-header button:hover[b-n4d1dxuxde] {
    color: #b42318;
    background: #fee4e2;
}

.serial-inspector-summary[b-n4d1dxuxde] {
    flex: 0 0 auto;
    margin: 10px 10px 0;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #d6e5f5;
    border-radius: 9px;
    background: #f1f7ff;
}

.serial-inspector-summary > span[b-n4d1dxuxde] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #1769c2;
    border-radius: 8px;
    background: #dcecff;
}

.serial-inspector-summary div[b-n4d1dxuxde] {
    display: flex;
    flex-direction: column;
}

.serial-inspector-summary small[b-n4d1dxuxde] {
    color: #6f8298;
    font-size: 8px;
}

.serial-inspector-summary strong[b-n4d1dxuxde] {
    color: #173b66;
    font-size: 17px;
    line-height: 1.05;
}

.serial-inspector-summary em[b-n4d1dxuxde] {
    max-width: 105px;
    overflow: hidden;
    color: #536b84;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-search[b-n4d1dxuxde] {
    position: relative;
    height: 38px;
    flex: 0 0 38px;
    margin: 9px 10px 0;
    display: flex;
    align-items: center;
}

.serial-inspector-search > i[b-n4d1dxuxde] {
    position: absolute;
    left: 11px;
    color: #7a8da2;
    font-size: 10px;
}

.serial-inspector-search input[b-n4d1dxuxde] {
    width: 100%;
    height: 100%;
    padding: 0 34px 0 31px;
    color: #213d5c;
    border: 1px solid #cfdae7;
    border-radius: 8px;
    background: #fff;
    font-size: 10px;
}

.serial-inspector-search input[b-n4d1dxuxde]::-webkit-search-cancel-button,
.serial-inspector-search input[b-n4d1dxuxde]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.serial-inspector-search input[b-n4d1dxuxde]::-ms-clear {
    display: none;
}

.serial-inspector-search input:focus[b-n4d1dxuxde] {
    outline: 3px solid rgba(47, 128, 237, .12);
    border-color: #4e91dc;
}

.serial-inspector-search button[b-n4d1dxuxde] {
    position: absolute;
    right: 5px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color: #66798e;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

.serial-inspector-result[b-n4d1dxuxde] {
    flex: 0 0 auto;
    padding: 7px 11px 5px;
    color: #718096;
    font-size: 8.5px;
    font-weight: 700;
}

.serial-inspector-list[b-n4d1dxuxde] {
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 7px 8px 10px;
    padding-right: 3px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 36px;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.serial-inspector-item[b-n4d1dxuxde] {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #254968;
    border: 1px solid #d8e6f4;
    border-radius: 8px;
    background: #f7fbff;
}

.serial-inspector-item i[b-n4d1dxuxde] {
    flex: 0 0 auto;
    color: #4c8dca;
    font-size: 9px;
}

.serial-inspector-item strong[b-n4d1dxuxde] {
    min-width: 0;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-inspector-footer[b-n4d1dxuxde] {
    flex: 0 0 auto;
    padding: 10px 14px;
    text-align: right;
    background: #fff;
    border-top: 1px solid #dce5f1;
}

.serial-inspector-footer button[b-n4d1dxuxde] {
    min-width: 72px;
    padding: 8px 12px;
    color: #fff;
    background: #1769d2;
    border: 0;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800;
}

.serial-inspector-empty[b-n4d1dxuxde],
.serial-inspector-no-result[b-n4d1dxuxde] {
    min-height: 0;
    padding: 24px;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #718096;
    text-align: center;
}

.serial-inspector-empty > span[b-n4d1dxuxde] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: #2f80ed;
    border-radius: 16px;
    background: #e9f3ff;
    font-size: 23px;
}

.serial-inspector-empty h3[b-n4d1dxuxde],
.serial-inspector-no-result strong[b-n4d1dxuxde] {
    margin: 0;
    color: #29445f;
    font-size: 13px;
}

.serial-inspector-empty p[b-n4d1dxuxde] {
    max-width: 220px;
    margin: 5px 0 0;
    font-size: 9px;
    line-height: 1.5;
}

.serial-inspector-no-result[b-n4d1dxuxde] {
    gap: 4px;
    font-size: 9px;
}

.serial-inspector-no-result > i[b-n4d1dxuxde] {
    margin-bottom: 4px;
    color: #8ca0b4;
    font-size: 18px;
}

.order-detail-footer[b-n4d1dxuxde] {
    min-height: 66px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #dbe4ef;
}

.order-detail-note[b-n4d1dxuxde] {
    margin-right: auto;
    color: #708096;
    font-size: 11px;
}

.order-detail-note i[b-n4d1dxuxde] {
    margin-right: 5px;
    color: #1aa267;
}

.detail-footer-close[b-n4d1dxuxde] {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.detail-footer-close:hover[b-n4d1dxuxde] { background: #f1f5f9; }

@media (max-width: 1100px) {
    .order-detail-backdrop[b-n4d1dxuxde] { padding: 8px; }
    .order-detail-dialog[b-n4d1dxuxde] {
        width: calc(100vw - 16px);
        height: calc(100vh - 16px);
        min-height: 0;
    }
    .order-detail-body[b-n4d1dxuxde] {
        padding: 8px;
        grid-template-columns: minmax(0, 1fr);
        overflow-y: auto;
    }
    .detail-tabs[b-n4d1dxuxde] { min-height: 430px; }
    .serial-inspector[b-n4d1dxuxde] { min-height: 280px; max-height: 360px; }
    .detail-tab[b-n4d1dxuxde] { padding: 0 10px; font-size: 11px; }
}


.tracking-print-button[b-n4d1dxuxde] {
    min-width: 72px;
    height: 28px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 7px;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .16);
}

.tracking-print-button:hover[b-n4d1dxuxde] {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.tracking-print-empty[b-n4d1dxuxde] {
    color: #94a3b8;
}


.tab-progress-panel[b-n4d1dxuxde] {
    margin: 10px 10px 0;
    padding: 11px 13px;
    flex: 0 0 auto;
    background: #f8fbff;
    border: 1px solid #d8e5f3;
    border-radius: 10px;
}

.tab-progress-heading[b-n4d1dxuxde] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.tab-progress-heading span[b-n4d1dxuxde] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tab-progress-heading i[b-n4d1dxuxde] {
    color: #2563eb;
}

.tab-progress-heading strong[b-n4d1dxuxde] {
    color: #173b70;
    font-size: 15px;
}

.tab-progress-track[b-n4d1dxuxde] {
    height: 7px;
    margin: 8px 0 7px;
    overflow: hidden;
    background: #dfe7f1;
    border-radius: 999px;
}

.tab-progress-value[b-n4d1dxuxde] {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    transition: width .25s ease;
}

.progress-order[b-n4d1dxuxde] {
    background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.progress-picking[b-n4d1dxuxde] {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.progress-packing[b-n4d1dxuxde] {
    background: linear-gradient(90deg, #d97706, #fbbf24);
}

.tab-progress-metrics[b-n4d1dxuxde] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #64748b;
    font-size: 10px;
}

.tab-progress-metrics strong[b-n4d1dxuxde] {
    margin-left: 4px;
    color: #1e293b;
    font-size: 11px;
}

.packing-summary[b-n4d1dxuxde] {
    margin: 10px 10px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 7px;
    flex: 0 0 auto;
}

.packing-summary-card[b-n4d1dxuxde] {
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
}

.packing-summary-card span[b-n4d1dxuxde] {
    overflow: hidden;
    font-size: 9.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.packing-summary-card strong[b-n4d1dxuxde] {
    font-size: 17px;
    line-height: 1;
}

.packing-summary-total[b-n4d1dxuxde] { color: #174ea6; background: #eaf3ff; border-color: #bdd5f6; }
.packing-summary-new[b-n4d1dxuxde] { color: #475569; background: #f1f5f9; }
.packing-summary-working[b-n4d1dxuxde] { color: #9a4d00; background: #fff4df; border-color: #f5d79d; }
.packing-summary-packed[b-n4d1dxuxde] { color: #0e7490; background: #e0f7fb; border-color: #a9e2eb; }
.packing-summary-ready[b-n4d1dxuxde] { color: #1d4ed8; background: #e8efff; border-color: #b9ccff; }
.packing-summary-complete[b-n4d1dxuxde] { color: #166534; background: #dcfce7; border-color: #a7e7bb; }

@media (max-width: 820px) {
    .packing-summary[b-n4d1dxuxde] {
        grid-template-columns: repeat(2, minmax(100px, 1fr));
    }
}
/* _content/WMS.UI/Pages/Reports/OutboundReport.razor.rz.scp.css */
.other-order-report-page[b-r18sl6hj7g] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    background: #f4f7fb;
    box-sizing: border-box;
}

.report-hero[b-r18sl6hj7g] {
    flex: 0 0 auto;
    margin-bottom: 14px;
}

.report-heading h1[b-r18sl6hj7g] {
    margin: 4px 0 5px;
    color: #12213f;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.15;
}

.report-heading p[b-r18sl6hj7g] {
    margin: 0;
    color: #708098;
    font-size: 12px;
}

.report-eyebrow[b-r18sl6hj7g] {
    color: #087f8c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.report-button[b-r18sl6hj7g] {
    height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
}

.report-button:hover[b-r18sl6hj7g] {
    color: #1769c2;
    background: #f8fbff;
    border-color: #8eb8e8;
}

.report-summary[b-r18sl6hj7g] {
    flex: 0 0 auto;
    gap: 12px;
    margin-bottom: 14px;
}

.summary-card[b-r18sl6hj7g] {
    min-height: 96px;
    padding: 15px 16px;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(31, 55, 86, .055);
}

.summary-icon[b-r18sl6hj7g] {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 13px;
    font-size: 18px;
}

.summary-card-success .summary-icon[b-r18sl6hj7g] { color: #15803d; background: #eaf8ef; }
.summary-card-info .summary-icon[b-r18sl6hj7g] { color: #087f8c; background: #e8f7f8; }
.summary-card-warning .summary-icon[b-r18sl6hj7g] { color: #b45309; background: #fff4df; }

.summary-card strong[b-r18sl6hj7g] {
    color: #12213f;
    font-size: 25px;
    line-height: 1;
}

.summary-card span[b-r18sl6hj7g],
.summary-card small[b-r18sl6hj7g] {
    color: #718096;
}

.report-workspace[b-r18sl6hj7g] {
    width: 100%;
    min-width: 0;
    min-height: 440px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d8e2ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 55, 86, .055);
}

[b-r18sl6hj7g] .report-tabs {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .report-tabs > .tabs-header {
    min-height: 49px;
    flex: 0 0 auto;
    background: #fff;
}

.report-tab[b-r18sl6hj7g] {
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #53647d;
    background: #fff;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 600;
}

.report-tab:hover[b-r18sl6hj7g] {
    color: #1d5fae;
    background: #f8fbff;
}

[b-r18sl6hj7g] .report-tabs > .tabs-body,
[b-r18sl6hj7g] .report-tabs .tabs-content,
[b-r18sl6hj7g] .report-tabs .tab-content,
[b-r18sl6hj7g] .report-tabs .tab-pane {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-panel[b-r18sl6hj7g] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 18px 16px 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.document-table-shell[b-r18sl6hj7g] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce5ef;
    border-radius: 10px;
    background: #fff;
}

[b-r18sl6hj7g] .document-table-shell > .table,
[b-r18sl6hj7g] .document-table-shell .table-container,
[b-r18sl6hj7g] .document-table-shell .table-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
    flex: 1 1 auto;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto !important;
    scrollbar-gutter: stable;
}

@media (max-width: 820px) {
    .other-order-report-page[b-r18sl6hj7g] { padding: 12px 10px; }
    .report-panel[b-r18sl6hj7g] { padding: 12px 9px; }
    .report-workspace[b-r18sl6hj7g] { min-height: 440px; }
    .report-tab[b-r18sl6hj7g] { padding: 0 12px; font-size: 12px; }
}


.document-number-link[b-r18sl6hj7g] {
    max-width: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #175da8;
    font-size: 10.5px;
    font-weight: 650;
    text-align: left;
    background: transparent;
    border: 0;
}

.document-number-link span[b-r18sl6hj7g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-number-link:hover[b-r18sl6hj7g] {
    color: #087f8c;
    text-decoration: underline;
}


/* ESS-style table layout: contained controls, readable columns and horizontal scrolling. */
[b-r18sl6hj7g] .document-table-shell > .table {
    min-height: 0;
    flex: 1 1 auto;
    border: 0 !important;
}

[b-r18sl6hj7g] .document-table-shell .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 12px 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar {
    min-height: 58px;
    padding: 9px 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar::after {
    display: none;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar .table-toolbar-button {
    float: none !important;
    margin: 0 !important;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar .table-column-right {
    margin-left: 0 !important;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar .btn-group {
    gap: 6px;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar .btn {
    min-height: 36px;
    padding: 0 11px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e0eb !important;
    border-radius: 8px !important;
    color: #334155 !important;
    background: #fff !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 5%);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar .btn:hover {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

[b-r18sl6hj7g] .document-table-shell .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    border-color: #dce5f0;
    border-radius: 9px;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed,
[b-r18sl6hj7g] .document-table-shell .table-fixed-header,
[b-r18sl6hj7g] .document-table-shell .table-fixed-body,
[b-r18sl6hj7g] .document-table-shell .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-header > table,
[b-r18sl6hj7g] .document-table-shell .table-fixed-body > table {
    width: 100% !important;
    min-width: 1380px !important;
    max-width: none !important;
    table-layout: fixed !important;
}

@media (max-width: 640px) {
    [b-r18sl6hj7g] .document-table-shell .table-container {
        padding-right: 8px;
        padding-left: 8px;
    }

    [b-r18sl6hj7g] .document-table-shell .table-toolbar {
        justify-content: flex-start;
    }
}


/* Final remaining-space layout: keep pagination visible and scroll only the grid body. */
[b-r18sl6hj7g] .other-order-report-transition {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
}

.other-order-report-page[b-r18sl6hj7g] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.report-hero[b-r18sl6hj7g],
.report-summary[b-r18sl6hj7g] {
    flex: 0 0 auto;
}

.report-workspace[b-r18sl6hj7g] {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .report-workspace > .report-tabs,
[b-r18sl6hj7g] .report-workspace > .tabs,
[b-r18sl6hj7g] .report-tabs {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .report-tabs > .tabs-header {
    flex: 0 0 auto;
}

[b-r18sl6hj7g] .report-tabs > .tabs-body,
[b-r18sl6hj7g] .report-tabs .tabs-content,
[b-r18sl6hj7g] .report-tabs .tab-content,
[b-r18sl6hj7g] .report-tabs .tab-pane,
[b-r18sl6hj7g] .report-tabs .tabs-body-content {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.report-panel[b-r18sl6hj7g] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.document-table-shell[b-r18sl6hj7g] {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell > .table {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell .table-container,
[b-r18sl6hj7g] .document-table-shell .table-wrapper {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar,
[b-r18sl6hj7g] .document-table-shell .table-footer,
[b-r18sl6hj7g] .document-table-shell .nav-pages,
[b-r18sl6hj7g] .document-table-shell .pagination {
    flex: 0 0 auto;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden !important;
}

[b-r18sl6hj7g] .document-table-shell .table-fixed-body {
    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow-x: auto !important;
    overflow-y: auto !important;
}

@media (max-height: 760px) {
    .other-order-report-page[b-r18sl6hj7g] {
        overflow-y: auto;
    }

    .report-workspace[b-r18sl6hj7g] {
        min-height: 430px;
    }
}


/* Filter panel follows the InboundOrdersReport pattern. */
.filter-section[b-r18sl6hj7g] {
    width: 100%;
    margin: 0 0 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 10px;
}

.filter-section-heading[b-r18sl6hj7g] {
    min-height: 50px;
}

.filter-section-toggle[b-r18sl6hj7g] {
    width: 100%;
    min-height: 50px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #334155;
    text-align: left;
    background: transparent;
    border: 0;
}

.filter-section-label[b-r18sl6hj7g],
.filter-section-state[b-r18sl6hj7g] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.filter-section-label strong[b-r18sl6hj7g],
.filter-section-label small[b-r18sl6hj7g] {
    display: block;
}

.filter-section-label strong[b-r18sl6hj7g] {
    color: #1e293b;
    font-size: 12px;
}

.filter-section-label small[b-r18sl6hj7g] {
    margin-top: 2px;
    color: #7c8ba1;
    font-size: 10px;
    font-weight: 400;
}

.filter-section-icon[b-r18sl6hj7g] {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 9px;
}

.filter-section-state[b-r18sl6hj7g] {
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}

.report-filter-bar[b-r18sl6hj7g] {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border-radius: 10px;
}

.report-filter-control[b-r18sl6hj7g] {
    position: relative;
    min-width: 190px;
    height: 36px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 190px;
    color: #64748b;
    background: #fff;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
}

.report-filter-search[b-r18sl6hj7g] {
    min-width: 280px;
    flex: 2 1 320px;
}

.report-filter-route[b-r18sl6hj7g] {
    min-width: 210px;
}

.report-filter-control input[b-r18sl6hj7g],
.report-filter-control select[b-r18sl6hj7g] {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #334155;
    font-size: 11px;
    background: transparent;
    border: 0;
    outline: 0;
}

.report-filter-control select[b-r18sl6hj7g] {
    padding-right: 18px;
    appearance: none;
}

.report-filter-chevron[b-r18sl6hj7g] {
    position: absolute;
    right: 11px;
    pointer-events: none;
    font-size: 9px;
}

.report-filter-button[b-r18sl6hj7g] {
    height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.report-filter-apply[b-r18sl6hj7g] {
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    box-shadow: 0 4px 10px rgb(37 99 235 / 18%);
}

.report-filter-clear[b-r18sl6hj7g] {
    color: #475569;
    background: #fff;
    border: 1px solid #cbd5e1;
}

.report-filter-hint[b-r18sl6hj7g] {
    flex: 1 0 100%;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
}

[b-r18sl6hj7g] .document-table-shell .table-toolbar {
    align-items: stretch;
}

/* Status is intentionally page-specific; table header and rows remain global. */
.status-pill[b-r18sl6hj7g] {
    min-height: 23px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.status-new[b-r18sl6hj7g] {
    color: #334155;
    background: #eef2f7;
    border-color: #d7dee8;
}

.status-release[b-r18sl6hj7g] {
    color: #174ea6;
    background: #e7f0ff;
    border-color: #b9d2ff;
}

.status-picking[b-r18sl6hj7g] {
    color: #0e7490;
    background: #e0f7fb;
    border-color: #9ddfe9;
}

.status-packing[b-r18sl6hj7g] {
    color: #9a4d00;
    background: #fff1d6;
    border-color: #f5ce88;
}

.status-complete[b-r18sl6hj7g] {
    color: #166534;
    background: #dcfce7;
    border-color: #9de7b7;
}

.status-closed[b-r18sl6hj7g] {
    color: #475569;
    background: #e9eef5;
    border-color: #cbd5e1;
}

.status-cancel[b-r18sl6hj7g] {
    color: #b42318;
    background: #fee4e2;
    border-color: #f5aaa4;
}

@media (max-width: 820px) {
    .report-filter-control[b-r18sl6hj7g],
    .report-filter-search[b-r18sl6hj7g],
    .report-filter-route[b-r18sl6hj7g] {
        min-width: 100%;
        flex-basis: 100%;
    }

    .report-filter-button[b-r18sl6hj7g] {
        flex: 1 1 140px;
    }
}


/* The cards and their responsive columns use the shared WMS summary styles. */
.other-order-report-page[b-r18sl6hj7g] {
    padding: 18px;
    gap: 8px;
}

.other-order-report-page > .report-hero[b-r18sl6hj7g],
.other-order-report-page > .report-summary[b-r18sl6hj7g] {
    margin-bottom: 0;
}

.other-order-report-page .report-panel[b-r18sl6hj7g] {
    padding: 0;
}

.other-order-report-page .document-table-shell[b-r18sl6hj7g] {
    border: 0;
    border-radius: 0;
}

/* Keep the controls and grid data aligned with the shared inbound report pattern. */
.other-order-report-page .report-filter-bar[b-r18sl6hj7g] {
    display: grid;
    grid-template-columns: auto minmax(280px, 1fr) repeat(3, minmax(150px, 190px)) auto auto;
    align-items: center;
    gap: 8px;
    padding: 0px 0px;
    border-color: #d8e2ee;
    border-radius: 0;
}

.other-order-report-page .wms-filter-label[b-r18sl6hj7g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.other-order-report-page .wms-filter-label i[b-r18sl6hj7g] { color: #2563eb; }

.other-order-report-page .report-filter-control[b-r18sl6hj7g],
.other-order-report-page .report-filter-button[b-r18sl6hj7g] {
    height: 38px;
}

.other-order-report-page .report-filter-control[b-r18sl6hj7g] {
    min-width: 0;
    padding: 0 12px;
    border-color: #cbd9ea;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.other-order-report-page .report-filter-control:focus-within[b-r18sl6hj7g] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

.other-order-report-page .report-filter-search[b-r18sl6hj7g],
.other-order-report-page .report-filter-route[b-r18sl6hj7g] {
    min-width: 0;
}

.other-order-report-page .report-filter-hint[b-r18sl6hj7g] {
    grid-column: 1 / -1;
    padding-left: 2px;
}

.other-order-report-page .document-number-link[b-r18sl6hj7g] {
    color: #0b579f;
    font-size: 11px;
    font-weight: 750;
}

.other-order-report-page .report-document-cell[b-r18sl6hj7g] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.other-order-report-page .report-document-icon[b-r18sl6hj7g] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-grid;
    place-items: center;
    color: #1768c5;
    background: #edf4fc;
    border: 1px solid #d7e4f2;
    border-radius: 8px;
}

.other-order-report-page .report-document-cell > div[b-r18sl6hj7g],
.other-order-report-page .report-document-info[b-r18sl6hj7g],
.other-order-report-page .report-updated-cell[b-r18sl6hj7g] { min-width: 0; }

.other-order-report-page .report-document-cell small[b-r18sl6hj7g],
.other-order-report-page .report-document-info strong[b-r18sl6hj7g],
.other-order-report-page .report-document-info small[b-r18sl6hj7g],
.other-order-report-page .report-updated-cell strong[b-r18sl6hj7g],
.other-order-report-page .report-updated-cell small[b-r18sl6hj7g] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-document-cell small[b-r18sl6hj7g],
.other-order-report-page .report-document-info small[b-r18sl6hj7g],
.other-order-report-page .report-updated-cell small[b-r18sl6hj7g] {
    margin-top: 2px;
    color: #7b8ca2;
    font-size: 9px;
}

.other-order-report-page .report-document-info strong[b-r18sl6hj7g],
.other-order-report-page .report-updated-cell strong[b-r18sl6hj7g] {
    color: #183b65;
    font-size: 11px;
    font-weight: 700;
}

.other-order-report-page .report-company-pill[b-r18sl6hj7g] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22px;
    padding: 4px 8px;
    overflow: hidden;
    color: #304f72;
    background: #edf3fa;
    border-radius: 999px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-date-cell[b-r18sl6hj7g] {
    color: #53677e;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.other-order-report-page .report-process-times[b-r18sl6hj7g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.other-order-report-page .report-process-time[b-r18sl6hj7g] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.other-order-report-page .report-process-label[b-r18sl6hj7g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1;
}

.other-order-report-page .report-process-label-pick i[b-r18sl6hj7g] { color: #0891b2; }
.other-order-report-page .report-process-label-pack i[b-r18sl6hj7g] { color: #b45309; }

.other-order-report-page .report-process-value[b-r18sl6hj7g] {
    overflow: hidden;
    color: #31435f;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.other-order-report-page .report-process-value i[b-r18sl6hj7g] {
    margin: 0 3px;
    color: #94a3b8;
    font-size: 7px;
}

.other-order-report-page .report-row-actions[b-r18sl6hj7g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.other-order-report-page .report-row-action[b-r18sl6hj7g] {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 1px solid #c7dbf5;
    border-radius: 8px;
    color: #1768c5;
    background: #fff;
    font-size: 12px;
    line-height: 1;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.other-order-report-page .report-row-action:hover[b-r18sl6hj7g] {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.other-order-report-page .report-row-action-print[b-r18sl6hj7g] {
    border-color: #a7e5d0;
    color: #059669;
}

.other-order-report-page .report-row-action-print:hover[b-r18sl6hj7g] {
    border-color: #10b981;
    color: #047857;
    background: #ecfdf5;
}

@media (max-width: 1200px) {
    .other-order-report-page .report-filter-bar[b-r18sl6hj7g] {
        grid-template-columns: auto minmax(240px, 1fr) repeat(2, minmax(150px, 1fr)) auto auto;
    }

    .other-order-report-page .report-filter-route[b-r18sl6hj7g] { grid-column: 2 / 3; }
}

@media (max-width: 820px) {
    .other-order-report-page[b-r18sl6hj7g] {
        padding: 12px 10px;
    }

    .other-order-report-page .report-filter-bar[b-r18sl6hj7g] { grid-template-columns: 1fr 1fr; }
    .other-order-report-page .wms-filter-label[b-r18sl6hj7g],
    .other-order-report-page .report-filter-search[b-r18sl6hj7g],
    .other-order-report-page .report-filter-route[b-r18sl6hj7g],
    .other-order-report-page .report-filter-hint[b-r18sl6hj7g] { grid-column: 1 / -1; }
    .other-order-report-page .report-filter-button[b-r18sl6hj7g] { width: 100%; }
}

@media (max-width: 560px) {
    .other-order-report-page .report-filter-bar[b-r18sl6hj7g] { grid-template-columns: 1fr; }
    .other-order-report-page .wms-filter-label[b-r18sl6hj7g],
    .other-order-report-page .report-filter-search[b-r18sl6hj7g],
    .other-order-report-page .report-filter-route[b-r18sl6hj7g],
    .other-order-report-page .report-filter-hint[b-r18sl6hj7g] { grid-column: auto; }
}
/* _content/WMS.UI/Pages/Reports/ProductCard.razor.rz.scp.css */
.product-card[b-g3fkqe5r3z] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* กันไม่ให้ถูกบีบต่ำกว่าเนื้อหาจริง ไม่ว่ากล่องแม่จะสูงเท่าไร */
    min-height: min-content;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d9e4f0;
    border-radius: 11px;
    box-shadow: 0 4px 13px rgba(30, 64, 120, .055);
}

.product-card__header[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    border-bottom: 1px solid #e2eaf3;
}

.product-card__group-header[b-g3fkqe5r3z] {
    min-height: 48px;
    padding: 8px 12px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #15375f;
    background: linear-gradient(180deg, #fafdff, #f3f8ff);
    border-bottom: 1px solid #dce8f5;
}

.product-card__group-header > span[b-g3fkqe5r3z] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-card__group-header strong[b-g3fkqe5r3z] {
    overflow: hidden;
    color: #155caa;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__group-expiry[b-g3fkqe5r3z] { flex: 0 0 auto; align-items: flex-end; }
.product-card__group-expiry strong[b-g3fkqe5r3z] { color: #465970; font-size: 10px; }

.product-card__group-storage[b-g3fkqe5r3z] {
    padding: 3px 8px;
    color: #52657d;
    background: #eef3f8;
    border-radius: 999px;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.product-card__group-storage.product-card__storage--fg[b-g3fkqe5r3z] { color: #155caa; background: #e6f1ff; }
.product-card__group-storage.product-card__storage--pw[b-g3fkqe5r3z] { color: #6742b8; background: #f0eaff; }
.product-card__group-storage.product-card__storage--holding[b-g3fkqe5r3z] { color: #9a6500; background: #fff2d8; }
.product-card__group-storage.product-card__storage--damage[b-g3fkqe5r3z] { color: #b23b49; background: #fde8eb; }

.product-card__icon[b-g3fkqe5r3z] {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    color: #1769c2;
    background: #eaf3ff;
    border-radius: 9px;
}

.product-card__title[b-g3fkqe5r3z] {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.product-card small[b-g3fkqe5r3z] {
    color: #7a899d;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .04em;
}

.product-card__title strong[b-g3fkqe5r3z],
.product-card__title em[b-g3fkqe5r3z] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__title strong[b-g3fkqe5r3z] {
    color: #15375f;
    font-size: 12px;
}

.product-card__title em[b-g3fkqe5r3z] {
    color: #697a91;
    font-size: 10px;
    font-style: normal;
}

.product-card__qty[b-g3fkqe5r3z] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
}

.product-card__qty strong[b-g3fkqe5r3z] {
    color: #087f8c;
    font-size: 18px;
    line-height: 1.1;
}

.product-card__qty em[b-g3fkqe5r3z] {
    color: #7a899d;
    font-size: 9px;
    font-style: normal;
}

.product-card__description[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    /* สูงคงที่เสมอ ไม่ว่าจะมีข้อความหรือไม่ */
    height: 34px;
    margin: 0;
    padding: 7px 12px;
    overflow: hidden;
    color: #52647c;
    font-size: 10px;
    line-height: 1.45;
    background: #fbfcfe;
    border-bottom: 1px solid #edf1f6;
}

.product-card__tags[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    height: 31px;
    padding: 8px 12px 4px;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 5px;
}

.product-card__tags span[b-g3fkqe5r3z] {
    max-width: 100%;
    padding: 3px 7px;
    overflow: hidden;
    color: #52657d;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #eef3f8;
    border-radius: 999px;
}

.product-card__tags i[b-g3fkqe5r3z] {
    margin-right: 3px;
    color: #1769c2;
}

.product-card__tags .product-card__storage[b-g3fkqe5r3z] { font-weight: 800; }
.product-card__tags .product-card__storage--fg[b-g3fkqe5r3z] { color: #155caa; background: #e6f1ff; }
.product-card__tags .product-card__storage--pw[b-g3fkqe5r3z] { color: #6742b8; background: #f0eaff; }
.product-card__tags .product-card__storage--holding[b-g3fkqe5r3z] { color: #9a6500; background: #fff2d8; }
.product-card__tags .product-card__storage--damage[b-g3fkqe5r3z] { color: #b23b49; background: #fde8eb; }
.product-card__tags .product-card__storage i[b-g3fkqe5r3z] { color: currentColor; }

.product-card__metrics[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    padding: 8px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.product-card__metrics > div[b-g3fkqe5r3z] {
    min-width: 0;
    padding: 7px;
    display: flex;
    flex-direction: column;
    background: #f6f8fb;
    border-radius: 7px;
}

.product-card__metrics strong[b-g3fkqe5r3z] {
    color: #243b5a;
    font-size: 13px;
}

.product-card__metrics .is-allocated[b-g3fkqe5r3z] {
    background: #fff4e5;
}

.product-card__metrics .is-allocated strong[b-g3fkqe5r3z] {
    color: #b36b00;
}

.product-card__metrics .is-available[b-g3fkqe5r3z] {
    background: #eaf8f2;
}

.product-card__metrics .is-available strong[b-g3fkqe5r3z] {
    color: #087f5b;
}

.product-card__serials[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    padding: 4px 12px 10px;
}

.product-card__footer[b-g3fkqe5r3z] {
    flex: 0 0 auto;
    padding: 8px 12px 10px;
    display: grid;
    /* 3 ช่องคงที่ — จำนวนแถวจึงแน่นอนในแต่ละหน้า ไม่ยุบ/ขยายตามความกว้าง */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    border-top: 1px solid #edf1f6;
}

.product-card__footer span[b-g3fkqe5r3z] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-card__footer strong[b-g3fkqe5r3z] {
    overflow: hidden;
    color: #465970;
    font-size: 9.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/WMS.UI/Pages/Reports/ProductCardGrid.razor.rz.scp.css */
.product-card-grid[b-wmh11ic5z9] {
    /* ตัวนี้คือตัวเดียวในโมดอลที่ scroll — หัวเรื่องกับแถบตัวเลขด้านบนอยู่นิ่ง */
    height: 100%;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    align-content: start;
    /* max-content = แถวสูงตามเนื้อหาเสมอ ห้ามถูกหารเฉลี่ยตามความสูงของกล่อง
       (ถ้าไม่ใส่ พอมีหลายแถวจะโดนบีบจนการ์ดถูกตัด) */
    grid-auto-rows: max-content;
    align-items: start;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: #f6f9fc;
}

.product-card-empty[b-wmh11ic5z9] {
    height: 100%;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: #7a899d;
    background: #f6f9fc;
}

.product-card-empty i[b-wmh11ic5z9] {
    margin-bottom: 4px;
    color: #b7c6d8;
    font-size: 26px;
}

.product-card-empty strong[b-wmh11ic5z9] {
    color: #46586f;
    font-size: 12px;
}

.product-card-empty span[b-wmh11ic5z9] {
    font-size: 10px;
}

/* Paged report cards: only the card viewport scrolls; search and page buttons stay visible. */
.product-card-browser[b-wmh11ic5z9] { display: flex; flex-direction: column; min-height: 0; min-width: 0; max-height: inherit; background: #f6f9fc; }
.product-card-toolbar[b-wmh11ic5z9] { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; padding: 10px; background: #fff; }
.product-card-search[b-wmh11ic5z9] { display: flex; flex: 1; min-width: 0; gap: 8px; align-items: center; padding: 0 11px; border: 1px solid #cbdced; border-radius: 9px; color: #788ba2; }
.product-card-search:focus-within[b-wmh11ic5z9] { border-color: #1769d2; box-shadow: 0 0 0 2px #1769d21a; }
.product-card-search input[b-wmh11ic5z9] { width: 100%; min-width: 0; height: 38px; border: 0; outline: 0; background: transparent; color: #183451; font-size: 12px; }
.product-card-page-size[b-wmh11ic5z9] { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; color: #64748b; font-size: 11px; }
.product-card-page-size select[b-wmh11ic5z9] { min-height: 38px; padding: 0 8px; border: 1px solid #cbdced; border-radius: 8px; background: #fff; color: #183451; }
.product-card-results[b-wmh11ic5z9] { flex: 0 0 auto; padding: 0 12px 8px; color: #6b7e97; background: #fff; border-bottom: 1px solid #dbe5f1; font-size: 11px; }
.product-card-viewport[b-wmh11ic5z9] { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.product-card-browser .product-card-grid[b-wmh11ic5z9] { height: auto; overflow: visible; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.product-card-browser .product-card-empty[b-wmh11ic5z9] { height: auto; min-height: 160px; padding: 20px; text-align: center; }
.product-card-browser .product-card-empty button[b-wmh11ic5z9] { padding: 6px 12px; margin-top: 8px; color: #1769d2; background: #fff; border: 1px solid #cbdced; border-radius: 8px; }
.product-card-pager[b-wmh11ic5z9] { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-top: 1px solid #dbe5f1; background: #fff; font-size: 11px; color: #52657d; }
.product-card-pager nav[b-wmh11ic5z9] { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.product-card-pager button[b-wmh11ic5z9] { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #dbe5f1; border-radius: 8px; color: #245889; background: #fff; }
.product-card-pager button.is-current[b-wmh11ic5z9] { color: #fff; background: #1769d2; border-color: #1769d2; }
.product-card-pager button:disabled[b-wmh11ic5z9] { opacity: .4; cursor: default; }
.product-card-pager button:not(:disabled):hover[b-wmh11ic5z9] { border-color: #1769d2; }
.product-card-browser button:focus-visible[b-wmh11ic5z9], .product-card-page-size select:focus-visible[b-wmh11ic5z9] { outline: 2px solid #1769d2; outline-offset: 2px; }
/* Remove reserved blank sections in popup cards without changing other card consumers. */
.product-card-browser[b-wmh11ic5z9]  .product-card__description:empty { display: none; }
.product-card-browser[b-wmh11ic5z9]  .serial-grid { height: auto; max-height: 90px; min-height: 0; }
.product-card-browser[b-wmh11ic5z9]  .serial-grid-panel__empty { height: 32px; }
@media (max-width: 480px) {
    .product-card-toolbar[b-wmh11ic5z9] { flex-wrap: wrap; }
    .product-card-search[b-wmh11ic5z9] { flex-basis: 100%; }
    .product-card-pager[b-wmh11ic5z9] { padding: 8px; }
}

/* _content/WMS.UI/Pages/Reports/ProductSummaryReportDesigner.razor.rz.scp.css */
.product-summary[b-yj373scocy] {
    --ps-blue: #1769d2;
    --ps-ink: #14243e;
    --ps-muted: #6d7e95;
    --ps-line: #dbe5f1;
    --ps-surface: #fff;
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 20px;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    color: var(--ps-ink);
    background: #f4f7fb;
}

.product-summary__header[b-yj373scocy] {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.product-summary__eyebrow[b-yj373scocy] {
    display: block;
    margin-bottom: 4px;
    color: var(--ps-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.product-summary__header h1[b-yj373scocy],
.product-table-card__heading h2[b-yj373scocy] {
    margin: 0;
    color: var(--ps-ink);
    font-weight: 750;
}

.product-summary__header h1[b-yj373scocy] { font-size: clamp(22px, 2vw, 30px); }
.product-summary__header p[b-yj373scocy],
.product-table-card__heading p[b-yj373scocy] { margin: 3px 0 0; color: var(--ps-muted); font-size: 13px; }

.product-summary__live[b-yj373scocy] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 11px;
    border: 1px solid #c9ead9;
    border-radius: 999px;
    color: #13814d;
    background: #f0fbf5;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
}

.product-summary__live i[b-yj373scocy] { font-size: 7px; }

.product-summary__metrics[b-yj373scocy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex: 0 0 auto;
    gap: 12px;
}

.product-metric[b-yj373scocy] {
    display: flex;
    min-width: 0;
    padding: 13px 15px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    background: var(--ps-surface);
    box-shadow: 0 3px 12px rgba(33, 55, 86, .04);
}

.product-metric__icon[b-yj373scocy] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #1769d2;
    background: #eaf3ff;
}

.product-metric--indigo .product-metric__icon[b-yj373scocy] { color: #5d56c9; background: #efefff; }
.product-metric--amber .product-metric__icon[b-yj373scocy] { color: #b87400; background: #fff5dd; }
.product-metric--green .product-metric__icon[b-yj373scocy] { color: #0d9957; background: #eaf9f1; }
.product-metric > span:last-child[b-yj373scocy] { display: flex; min-width: 0; flex-direction: column; }
.product-metric small[b-yj373scocy] { overflow: hidden; color: var(--ps-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.product-metric strong[b-yj373scocy] { font-size: 21px; line-height: 1.15; }

.product-summary__ribbon[b-yj373scocy] {
    display: flex;
    flex: 0 0 auto;
    min-height: 58px;
    padding: 8px 12px;
    align-items: stretch;
    gap: 4px;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    background: var(--ps-surface);
}

.product-summary__ribbon > span[b-yj373scocy] {
    display: grid;
    min-width: 125px;
    padding: 4px 14px;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-content: center;
    border-right: 1px solid #e5ebf3;
}

.product-summary__ribbon > span i[b-yj373scocy] {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--ps-blue);
    font-size: 18px;
}

.product-summary__ribbon small[b-yj373scocy] { color: var(--ps-muted); font-size: 10px; }
.product-summary__ribbon strong[b-yj373scocy] { font-size: 18px; line-height: 1; }
.product-summary__ribbon em[b-yj373scocy] {
    margin-left: auto;
    align-self: center;
    color: var(--ps-muted);
    font-size: 11px;
    font-style: normal;
}

.product-summary__workspace[b-yj373scocy] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.product-summary__workspace--split[b-yj373scocy] {
    display: grid;
    grid-template-columns: minmax(560px, 1.15fr) minmax(420px, .85fr);
    gap: 14px;
}

.product-table-card[b-yj373scocy],
.product-detail-panel[b-yj373scocy] {
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--ps-line);
    border-radius: 13px;
    background: var(--ps-surface);
    box-shadow: 0 5px 18px rgba(37, 60, 92, .05);
}

.product-table-card[b-yj373scocy] {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.product-table-card__heading[b-yj373scocy] {
    display: flex;
    flex: 0 0 auto;
    padding: 13px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--ps-line);
}

.product-table-card__heading h2[b-yj373scocy] { font-size: 16px; }
.product-table-card__heading > span[b-yj373scocy] {
    padding: 5px 9px;
    border-radius: 999px;
    color: #31577f;
    background: #edf4fc;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
}

.product-table-card__heading .wms-live-status em[b-yj373scocy] {
    padding: 5px 9px;
    color: #31577f;
    background: #edf4fc;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.product-table-card__body[b-yj373scocy] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.product-table-card__filters[b-yj373scocy] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    padding: 0;
    align-items: center;
    border: 0;
    background: #fff;
}

.product-filter-row[b-yj373scocy] { justify-content: flex-start; }

.product-summary-search[b-yj373scocy] {
    display: flex;
    flex: 1 1 auto;
    min-width: 220px;
    height: 36px;
    padding: 0 10px;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbdced;
    border-radius: 9px;
    color: #788ba2;
    background: #fff;
}

.product-summary-search:focus-within[b-yj373scocy] {
    border-color: var(--ps-blue);
    box-shadow: 0 0 0 2px rgba(23, 105, 210, .1);
}

.product-summary-search input[b-yj373scocy] {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 0;
    outline: 0;
    color: #183451;
    background: transparent;
    font-size: 12px;
}

.product-summary-search button[b-yj373scocy] {
    display: grid;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #667991;
    background: #eef3f8;
}

.product-owner-filter[b-yj373scocy] {
    display: flex;
    flex: 0 0 230px;
    min-width: 0;
    height: 36px;
    padding-left: 11px;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: #61758d;
    background: #fff;
    border: 1px solid #cbdced;
    border-radius: 9px;
}

.product-owner-filter:focus-within[b-yj373scocy] {
    border-color: var(--ps-blue);
    box-shadow: 0 0 0 2px rgba(23, 105, 210, .1);
}

.product-owner-filter i[b-yj373scocy] { flex: 0 0 auto; color: #1769d2; }
.product-owner-filter select[b-yj373scocy] {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 28px 0 0;
    overflow: hidden;
    color: #29445f;
    background: transparent;
    border: 0;
    outline: 0;
    text-overflow: ellipsis;
    font-size: 11px;
}

.product-storage-filter[b-yj373scocy] {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    gap: 3px;
    border: 1px solid #d6e1ed;
    border-radius: 10px;
    background: #f4f7fb;
}

.product-storage-filter button[b-yj373scocy] {
    min-width: 58px;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    color: #52677f;
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.product-storage-filter button:hover[b-yj373scocy] { color: var(--ps-blue); background: #e8f2ff; }
.product-storage-filter button.is-active[b-yj373scocy] { color: #fff; background: var(--ps-blue); box-shadow: 0 2px 6px rgba(23, 105, 210, .22); }
.product-storage-filter button:focus-visible[b-yj373scocy],
.product-summary-search button:focus-visible[b-yj373scocy],
.product-owner-filter select:focus-visible[b-yj373scocy] { outline: 2px solid var(--ps-blue); outline-offset: -2px; }

.product-summary .product-table-card__body[b-yj373scocy]  .table-container.wms-table-standard {
    border: 0;
    border-radius: 0;
    padding: 0 12px;
}
.product-summary .product-table-card__body[b-yj373scocy]  .table-container.wms-table-standard .nav-pages {
    position: relative;
    bottom: 8px;
}
.product-table-card__body[b-yj373scocy]  .table-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;

}
.product-table-card__body[b-yj373scocy]  .table-toolbar > .product-table-card__filters { margin-right: 10px; }
.product-table-card__body[b-yj373scocy]  .table-toolbar > .table-toolbar-button {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
}
.product-table-card__body[b-yj373scocy]  .table-toolbar > .table-column-right { margin-left: 16px !important; }
.product-table-card__body[b-yj373scocy]  > .table { flex: 1 1 auto; min-height: 0; }
.product-table-card__body[b-yj373scocy]  .table-wrapper tbody tr { cursor: pointer; }
.product-table-card__body[b-yj373scocy]  .table-wrapper tbody tr:hover { background: #f0f6ff; }
.product-table-card__body[b-yj373scocy]  .table-wrapper tbody tr.active { background: #e8f2ff; }

.product-main-cell[b-yj373scocy] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-main-icon[b-yj373scocy] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: #1769d2;
    background: #eaf3ff;
    border: 1px solid #d6e5f5;
    border-radius: 8px;
    font-size: 10px;
}

.product-main-cell > div[b-yj373scocy],
.product-detail-cell[b-yj373scocy] { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.product-main-cell strong[b-yj373scocy],
.product-detail-cell strong[b-yj373scocy] { overflow: hidden; color: #145da8; font-size: 10.5px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.product-main-cell small[b-yj373scocy],
.product-detail-cell small[b-yj373scocy] { overflow: hidden; color: #7d8da3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-detail-cell strong[b-yj373scocy] { color: #253f60; }
.product-detail-cell strong i[b-yj373scocy],
.product-detail-cell small i[b-yj373scocy] {
    display: inline-block;
    width: 15px;
    color: #2d83ce;
    text-align: center;
}
.product-detail-cell small i[b-yj373scocy] { color: #7da5ca; }

.product-company-pill[b-yj373scocy] {
    max-width: 100%;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    color: #31577f;
    background: #eef4fb;
    border-radius: 999px;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-company-pill i[b-yj373scocy] { color: #1769d2; font-size: 9px; }

.product-unit-cell[b-yj373scocy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #405b78;
    font-size: 10px;
    white-space: nowrap;
}
.product-unit-cell i[b-yj373scocy] { color: #3987cc; font-size: 9px; }

.product-quantity-cell[b-yj373scocy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
}

.product-quantity-cell > span[b-yj373scocy] { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.product-quantity-cell small[b-yj373scocy] { color: #8392a6; font-size: 8px; white-space: nowrap; }
.product-quantity-cell small[b-yj373scocy] { display: inline-flex; align-items: center; gap: 4px; }
.product-quantity-cell small i[b-yj373scocy] { color: #438bcb; font-size: 8px; }
.product-quantity-cell strong[b-yj373scocy] { font-size: 14px; }

.product-movement-cell[b-yj373scocy] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #405b78;
    font-size: 10px;
    white-space: nowrap;
}

.product-movement-cell i[b-yj373scocy] { flex: 0 0 auto; color: #1769d2; }
.product-movement-cell span[b-yj373scocy] { overflow: hidden; text-overflow: ellipsis; }

.product-row-actions[b-yj373scocy] { display: flex; align-items: center; justify-content: center; }
.product-view-action[b-yj373scocy] {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #1769d2;
    background: #fff;
    border: 1px solid #9fc5f5;
    border-radius: 8px;
    font-size: 10px;
}
.product-view-action:hover[b-yj373scocy] { color: #fff; background: #1769d2; }
.product-storage-type[b-yj373scocy] {
    display: inline-flex;
    min-width: 72px;
    min-height: 25px;
    padding: 4px 9px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #1769c2;
    border: 1px solid #cfe2f7;
    border-radius: 999px;
    background: #eaf4ff;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.product-storage-type i[b-yj373scocy] { font-size: 9px; }
.product-storage-type--pw[b-yj373scocy] { color: #6d42bc; border-color: #dfd3f6; background: #f2ecff; }
.product-storage-type--holding[b-yj373scocy] { color: #9a6500; border-color: #f1ddb0; background: #fff6df; }
.product-storage-type--damage[b-yj373scocy] { color: #bd3c3c; border-color: #f3cccc; background: #fff0f0; }
.product-storage-type--unknown[b-yj373scocy] { color: #60758b; border-color: #d9e2eb; background: #f2f5f8; }
.product-qty[b-yj373scocy] { font-variant-numeric: tabular-nums; }
.product-qty--total[b-yj373scocy] { color: #24558e; }
.product-qty--allocated[b-yj373scocy] { color: #bb7300; }
.product-qty--available[b-yj373scocy] { color: #0b8b51; }

.product-detail-panel[b-yj373scocy] {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.product-detail-empty[b-yj373scocy] {
    display: grid;
    width: 100%;
    padding: 36px;
    place-content: center;
    justify-items: center;
    text-align: center;
}

.product-detail-empty > span[b-yj373scocy] {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 17px;
    color: #4f85c5;
    background: #eaf3fd;
    font-size: 22px;
}

.product-detail-empty h2[b-yj373scocy] { margin: 0; font-size: 16px; }
.product-detail-empty p[b-yj373scocy] { max-width: 285px; margin: 6px 0 0; color: var(--ps-muted); font-size: 12px; }

.product-modal-backdrop[b-yj373scocy] {
    position: fixed;
    z-index: 1090;
    inset: 0;
    display: grid;
    padding: 18px;
    place-items: center;
    overflow: auto;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(3px);
}

.product-modal[b-yj373scocy] {
    width: min(1500px, calc(100vw - 36px));
    height: min(640px, calc(100dvh - 36px));
    max-height: calc(100dvh - 36px);
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #f5f7fb;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
}

@media (max-width: 1240px) {
    .product-summary__workspace--split[b-yj373scocy] {
        grid-template-columns: minmax(500px, 1.1fr) minmax(360px, .9fr);
    }

    .product-summary__ribbon em[b-yj373scocy] { display: none; }
}

@media (max-width: 900px) {
    .product-summary[b-yj373scocy] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .product-summary__metrics[b-yj373scocy] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-summary__ribbon[b-yj373scocy] { overflow-x: auto; }
    .product-summary__workspace--split[b-yj373scocy] { display: flex; flex-direction: column; }
    .product-table-card[b-yj373scocy] { height: 560px; }
    .product-detail-panel[b-yj373scocy] { min-height: 560px; }
}

@media (max-width: 600px) {
    .product-summary[b-yj373scocy] { gap: 10px; padding: 12px; }
    .product-summary__header[b-yj373scocy] { align-items: center; }
    .product-summary__header p[b-yj373scocy] { display: none; }
    .product-summary__metrics[b-yj373scocy] { gap: 8px; }
    .product-metric[b-yj373scocy] { padding: 10px; }
    .product-metric__icon[b-yj373scocy] { flex-basis: 34px; width: 34px; height: 34px; }
    .product-metric strong[b-yj373scocy] { font-size: 18px; }
    .product-table-card__heading p[b-yj373scocy] { display: none; }
    .product-table-card[b-yj373scocy] { height: 520px; }
    .product-table-card__body[b-yj373scocy]  .table-toolbar { align-items: stretch; flex-wrap: wrap; }
    .product-table-card__filters[b-yj373scocy] { width: 100%; flex-wrap: wrap; margin-right: 0; }
    .product-summary-search[b-yj373scocy] { flex-basis: 100%; }
    .product-owner-filter[b-yj373scocy] { flex: 1 1 100%; width: 100%; }
    .product-storage-filter[b-yj373scocy] { width: 100%; }
    .product-storage-filter button[b-yj373scocy] { flex: 1 1 25%; min-width: 0; padding: 0 6px; }
    .product-modal-backdrop[b-yj373scocy] { padding: 8px; place-items: center; }
    .product-modal[b-yj373scocy], .product-modal:has([data-card-count])[b-yj373scocy] {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }
}
/* _content/WMS.UI/Pages/Reports/ProductSummaryReportDetail.razor.rz.scp.css */
.product-report-detail[b-7lwjeu8rdz] {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    color: #152641;
    background: #fff;
}

.product-report-detail__header[b-7lwjeu8rdz] {
    display: flex;
    flex: 0 0 auto;
    padding: 13px 18px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #dfe7f1;
}

.product-report-detail__identity[b-7lwjeu8rdz] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.product-report-detail__identity > span[b-7lwjeu8rdz] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #1769d2;
    background: #eaf3ff;
}

.product-report-detail__identity div[b-7lwjeu8rdz] { min-width: 0; }
.product-report-detail__identity small[b-7lwjeu8rdz] { color: #1769d2; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.product-report-detail__identity h2[b-7lwjeu8rdz] { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.product-report-detail__identity p[b-7lwjeu8rdz] { margin: 2px 0 0; overflow: hidden; color: #6f7f94; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

.product-report-detail__attributes[b-7lwjeu8rdz] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.product-report-detail__attributes > span[b-7lwjeu8rdz] {
    padding: 3px 7px;
    overflow: hidden;
    color: #52657d;
    background: #eef3f8;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-report-detail__attributes i[b-7lwjeu8rdz] { margin-right: 3px; color: #1769c2; }

.product-report-detail__header-summary[b-7lwjeu8rdz] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(86px, 1fr)) minmax(130px, 1.35fr);
    gap: 6px;
}

.product-report-detail__header-summary > span[b-7lwjeu8rdz] {
    min-width: 86px;
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    background: #f6f8fb;
    border-radius: 8px;
}

.product-report-detail__header-summary small[b-7lwjeu8rdz] { color: #73839a; font-size: 9px; }
.product-report-detail__header-summary strong[b-7lwjeu8rdz] { color: #243b5a; font-size: 14px; }
.product-report-detail__header-summary .is-allocated[b-7lwjeu8rdz] { background: #fff4e5; }
.product-report-detail__header-summary .is-allocated strong[b-7lwjeu8rdz] { color: #b36b00; }
.product-report-detail__header-summary .is-available[b-7lwjeu8rdz] { background: #eaf8f2; }
.product-report-detail__header-summary .is-available strong[b-7lwjeu8rdz] { color: #087f5b; }
.product-report-detail__header-summary .is-movement[b-7lwjeu8rdz] { background: #eef5ff; }
.product-report-detail__header-summary .is-movement strong[b-7lwjeu8rdz] { color: #24558e; font-size: 11px; white-space: nowrap; }

.product-report-detail__close[b-7lwjeu8rdz] {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: 9px;
    color: #5f7188;
    background: #eef3f8;
}

.product-report-detail__section-heading[b-7lwjeu8rdz] {
    display: flex;
    flex: 0 0 auto;
    padding: 9px 14px 7px;
    align-items: center;
    justify-content: space-between;
}

.product-report-detail__section-heading h3[b-7lwjeu8rdz] { margin: 0; font-size: 14px; }
.product-report-detail__section-heading p[b-7lwjeu8rdz] { margin: 2px 0 0; color: #74849a; font-size: 11px; }

.product-report-detail__table[b-7lwjeu8rdz] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 0 12px 8px;
    overflow: hidden;
}

.product-report-detail__table[b-7lwjeu8rdz]  .table-container { border-color: #dbe5f0; }
.product-report-detail__table[b-7lwjeu8rdz]  .product-card-browser { flex: 1 1 auto; min-height: 0; }
.product-report-detail__table[b-7lwjeu8rdz]  .product-card-viewport {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
.product-report-detail__table[b-7lwjeu8rdz]  .product-card-browser .product-card-grid {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-items: stretch;
    overflow: visible;
}
.product-report-detail__table[b-7lwjeu8rdz]  .product-card { height: auto; }
.product-report-detail__table[b-7lwjeu8rdz]  .product-card__header,
.product-report-detail__table[b-7lwjeu8rdz]  .product-card__description { display: none; }
.product-report-detail__table[b-7lwjeu8rdz]  .product-card__tags { display: none; }
.product-report-detail__table[b-7lwjeu8rdz]  .product-card__metrics { padding-top: 6px; }
.product-report-detail__table[b-7lwjeu8rdz]  .serial-grid {
    height: 58px !important;
    max-height: 58px !important;
}
.product-report-detail__table[b-7lwjeu8rdz]  .product-card__footer { display: none; }
.product-report-detail--popup[b-7lwjeu8rdz] { height: 100%; max-height: none; }
.product-report-detail--popup .product-report-detail__header[b-7lwjeu8rdz] { padding: 12px 16px; }
.product-report-detail--popup .product-report-detail__table[b-7lwjeu8rdz] { height: auto; flex: 1 1 auto; }

.product-report-detail__footer[b-7lwjeu8rdz] {
    min-height: 66px;
    padding: 12px 20px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #708096;
    background: #fff;
    border-top: 1px solid #dce5f1;
    font-size: 11px;
}

.product-report-detail__table[b-7lwjeu8rdz]  .product-card-browser[data-card-count="1"] .product-card-page-size {
    display: none;
}

.product-report-detail__table[b-7lwjeu8rdz]  .product-card-browser[data-card-count="1"] .product-card-grid {
    grid-template-columns: minmax(0, 720px);
}

.product-report-detail__footer > div[b-7lwjeu8rdz] { margin-right: auto; }
.product-report-detail__footer > div i[b-7lwjeu8rdz] { margin-right: 5px; color: #1aa267; }
.product-report-detail__footer button[b-7lwjeu8rdz] {
    min-width: 100px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #334155;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}
.product-report-detail__footer button:hover[b-7lwjeu8rdz] { background: #f1f5f9; }

@media (max-width: 720px) {
    .product-report-detail__header[b-7lwjeu8rdz] { flex-wrap: wrap; }
    .product-report-detail__identity[b-7lwjeu8rdz] { flex-basis: calc(100% - 50px); }
    .product-report-detail__header-summary[b-7lwjeu8rdz] { width: 100%; order: 3; }
    .product-report-detail__section-heading p[b-7lwjeu8rdz] { display: none; }
    .product-report-detail__section-heading[b-7lwjeu8rdz] { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
    .product-report-detail__header[b-7lwjeu8rdz] { padding: 12px; }
    .product-report-detail__header-summary[b-7lwjeu8rdz] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-report-detail__header-summary > span[b-7lwjeu8rdz] { min-width: 0; }
    .product-report-detail__table[b-7lwjeu8rdz] { padding: 0 8px 8px; }
    .product-report-detail--popup[b-7lwjeu8rdz] { height: 100%; max-height: none; }
    .product-report-detail--popup .product-report-detail__table[b-7lwjeu8rdz] { height: auto; }
}
/* _content/WMS.UI/Pages/Reports/SerialGrid.razor.rz.scp.css */
.serial-grid-panel[b-s4q3lmsmwt] {
    padding: 10px 12px;
    border: 1px solid #d9e4ef;
    border-radius: 10px;
    background: #fbfdff;
}

.serial-grid-panel > header[b-s4q3lmsmwt] {
    display: flex;
    height: 18px;
    margin-bottom: 8px;
    align-items: center;
    gap: 8px;
}

.serial-grid-panel > header > i[b-s4q3lmsmwt] {
    color: #1769c2;
    font-size: 11px;
}

.serial-grid-panel h4[b-s4q3lmsmwt] {
    margin: 0;
    color: #17324f;
    font-size: 11px;
    font-weight: 800;
}

.serial-grid-panel > header > span[b-s4q3lmsmwt] {
    color: #6e7f98;
    font-size: 9px;
    font-weight: 700;
}

.serial-grid-panel > header > em[b-s4q3lmsmwt] {
    padding: 1px 7px;
    border-radius: 999px;
    color: #9a4e00;
    background: #ffe4bd;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
}

.serial-grid[b-s4q3lmsmwt] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(108px, 100%), 1fr));
    gap: 6px;
    /* สูงเท่ากับ chip 3 แถวพอดีเสมอ (26*3 + 6*2) ไม่ว่าจะมี S/N กี่ตัว
       มี 1 แถวก็จองที่ไว้เท่ากัน การ์ดทุกใบจึงสูงเท่ากัน เกิน 3 แถวค่อย scroll */
    height: 90px;
    grid-auto-rows: 26px;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.serial-grid > span[b-s4q3lmsmwt] {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    height: 26px;
    padding: 0 8px;
    align-items: center;
    gap: 7px;
    border: 1px solid #cfe2fa;
    border-radius: 8px;
    color: #24496f;
    background: #e8f2ff;
    font-size: 9.5px;
    font-weight: 700;
}

.serial-grid > span > i[b-s4q3lmsmwt] {
    flex: 0 0 auto;
    color: #4687c9;
}

.serial-grid > span > strong[b-s4q3lmsmwt] {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serial-grid > span > em[b-s4q3lmsmwt] {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    color: #9a4e00;
    background: #ffe4bd;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
}

.serial-grid > span.is-allocated[b-s4q3lmsmwt] {
    border-color: #f5b65d;
    color: #9a4e00;
    background: #fff4e5;
}

.serial-grid > span.is-allocated > i[b-s4q3lmsmwt] { color: #e98300; }

.serial-grid-panel__empty[b-s4q3lmsmwt] {
    display: flex;
    height: 90px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed #d7e2ec;
    border-radius: 9px;
    color: #8292a4;
    background: #f8fafc;
    font-size: 10px;
}
/* _content/WMS.UI/Pages/ResourceManagements/Container/Container.razor.rz.scp.css */
.container-page[b-1zzn6x7mm7] {
    --container-primary: #2563eb;
    --container-border: #dce5f0;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
    overflow-x: hidden;
    background: #f4f7fb;
}

.container-page-header[b-1zzn6x7mm7] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.container-eyebrow[b-1zzn6x7mm7] {
    display: block;
    margin-bottom: 3px;
    color: var(--container-primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .13em;
}

.container-page-header h1[b-1zzn6x7mm7] {
    margin: 0;
    color: #0f172a;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
}

.container-page-header p[b-1zzn6x7mm7],
.container-card-heading p[b-1zzn6x7mm7] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.container-page-icon[b-1zzn6x7mm7] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 21px;
}

.container-overview[b-1zzn6x7mm7] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.container-overview-item[b-1zzn6x7mm7] {
    min-width: 0;
    min-height: 72px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--container-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 5%);
}

.container-overview-item > span:last-child[b-1zzn6x7mm7] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.container-overview-item b[b-1zzn6x7mm7] {
    overflow: hidden;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-overview-item small[b-1zzn6x7mm7] {
    margin-top: 2px;
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-overview-icon[b-1zzn6x7mm7] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 15px;
}

.container-overview-icon.is-blue[b-1zzn6x7mm7] { color: #2563eb; background: #dbeafe; }
.container-overview-icon.is-emerald[b-1zzn6x7mm7] { color: #059669; background: #d1fae5; }
.container-overview-icon.is-amber[b-1zzn6x7mm7] { color: #d97706; background: #fef3c7; }
.container-overview-icon.is-violet[b-1zzn6x7mm7] { color: #7c3aed; background: #ede9fe; }
.container-overview-icon.is-red[b-1zzn6x7mm7] { color: #dc2626; background: #fee2e2; }

.container-overview-item small[b-1zzn6x7mm7] {
    order: 0;
    margin: 0;
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
}

.container-overview-item .container-overview-value[b-1zzn6x7mm7] {
    order: 1;
    margin-top: 1px;
    overflow: visible;
    color: #172033;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.05;
}

.container-table-card[b-1zzn6x7mm7] {
    min-width: 0;
    min-height: 440px;
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--container-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 5%);
}

.container-card-heading[b-1zzn6x7mm7] {
    min-height: 66px;
    padding: 13px 16px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e6edf5;
    background: linear-gradient(180deg, #fff, #fafcff);
}

.container-card-heading h2[b-1zzn6x7mm7] {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.container-live-status[b-1zzn6x7mm7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.container-last-updated[b-1zzn6x7mm7] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
    white-space: nowrap;
}

.container-last-updated i[b-1zzn6x7mm7] {
    color: #2563eb;
}

.container-live-indicator[b-1zzn6x7mm7] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    white-space: nowrap;
}

.container-live-indicator i[b-1zzn6x7mm7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

[b-1zzn6x7mm7] .container-table-card > .table {
    min-width: 0;
    min-height: 0;
    flex: 1;
    border: 0 !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    padding: 0 12px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar {
    min-height: 58px;
    flex: 0 0 auto;
    padding: 9px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e8edf3;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar::after {
    display: none;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar .table-toolbar-button {
    float: none !important;
    margin: 0 !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar .table-column-right {
    margin-left: auto !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar .btn {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 11px;
    font-weight: 750;
    line-height: 1 !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar .btn-primary {
    border-color: #2563eb !important;
    background: #2563eb !important;
    box-shadow: 0 4px 10px rgb(37 99 235 / 18%);
}

.container-table-card[b-1zzn6x7mm7]  .table-toolbar .btn-secondary {
    border-color: #d6dee9 !important;
    color: #475569 !important;
    background: #fff !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--container-border);
    border-radius: 9px;
}

.container-table-card[b-1zzn6x7mm7]  .table-fixed,
.container-table-card[b-1zzn6x7mm7]  .table-fixed-header,
.container-table-card[b-1zzn6x7mm7]  .table-fixed-body,
.container-table-card[b-1zzn6x7mm7]  .table-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.container-table-card[b-1zzn6x7mm7]  .table-fixed-header {
    flex: 0 0 auto;
    overflow: hidden;
}

.container-table-card[b-1zzn6x7mm7]  .table-fixed-body {
    min-height: 0;
    flex: 1;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.container-table-card[b-1zzn6x7mm7]  .table-fixed-header > table,
.container-table-card[b-1zzn6x7mm7]  .table-fixed-body > table {
    min-width: 920px;
}

.container-table-card[b-1zzn6x7mm7]  .table-header {
    color: #475569;
    background: #f6f8fb !important;
    font-size: 11px;
    font-weight: 750;
}

.container-table-card[b-1zzn6x7mm7]  .table-row:hover {
    background: #f8fbff !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-cell {
    border-color: #e9eef5 !important;
    vertical-align: middle !important;
    font-size: 11px;
}

.container-table-card[b-1zzn6x7mm7]  .table-fixed-body tbody tr > td,
.container-table-card[b-1zzn6x7mm7]  .table-fixed-body tbody tr > th {
    border-top-color: transparent !important;
    border-bottom: 1px solid #e9eef5 !important;
}

.container-table-card[b-1zzn6x7mm7]  .pagination {
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0;
    overflow-x: auto;
    border-top: 0 !important;
}

.container-table-card[b-1zzn6x7mm7]  .table-page-info {
    flex: 0 0 auto;
    white-space: nowrap;
}

.container-table-card[b-1zzn6x7mm7]  .btn-outline-primary,
.container-table-card[b-1zzn6x7mm7]  .btn-outline-danger {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 750;
}

[b-1zzn6x7mm7] .modal-dialog .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgb(15 23 42 / 18%);
}

[b-1zzn6x7mm7] .modal-dialog .modal-header {
    border-bottom-color: #e8edf3;
    background: #f8fafc;
}

@media (max-width: 900px) {
    .container-overview[b-1zzn6x7mm7] {
        grid-template-columns: 1fr;
    }

    .container-overview-item:nth-child(n+2)[b-1zzn6x7mm7] {
        display: none;
    }
}

@media (max-width: 640px) {
    .container-page[b-1zzn6x7mm7] { padding: 12px; }
    .container-page-header[b-1zzn6x7mm7] { align-items: flex-start; }
    .container-page-header h1[b-1zzn6x7mm7] { font-size: 22px; }
    .container-page-icon[b-1zzn6x7mm7] { display: none; }
    .container-table-card[b-1zzn6x7mm7]  .table-container {
        padding-right: 8px;
        padding-left: 8px;
    }
    .container-table-card[b-1zzn6x7mm7]  .table-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }
    .container-table-card[b-1zzn6x7mm7]  .table-toolbar .table-column-right {
        width: 100%;
        margin-left: 0 !important;
    }
}



.container-table-card[b-1zzn6x7mm7]  .nav-pages {
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 4px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0 !important;
}

.container-table-card[b-1zzn6x7mm7]  .nav-pages > .pagination {
    margin: 0 0 0 auto !important;
    flex: 1 1 auto;
    justify-content: flex-end !important;
}

.container-table-card[b-1zzn6x7mm7]  .nav-pages > .page-goto {
    flex: 0 0 auto;
    margin-left: 8px;
}



.container-filterbar[b-1zzn6x7mm7] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
}

.container-filterbar-actions[b-1zzn6x7mm7],
.container-filterbar-filters[b-1zzn6x7mm7] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.container-filterbar-actions[b-1zzn6x7mm7] {
    flex: 0 0 auto;
}

.container-filterbar-filters[b-1zzn6x7mm7] {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.container-filterbar-divider[b-1zzn6x7mm7] {
    width: 1px;
    height: 30px;
    flex: 0 0 1px;
    margin: 0 4px;
    background: #d5deea;
}

.container-filter-label[b-1zzn6x7mm7] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: #718198;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.container-filter-label i[b-1zzn6x7mm7] {
    color: #2468e8;
}

.container-toolbar-search[b-1zzn6x7mm7] {
    position: relative;
    width: 285px;
    min-width: 190px;
    height: 38px;
    flex: 0 1 285px;
    display: flex;
    align-items: center;
}

.container-toolbar-search > i[b-1zzn6x7mm7] {
    position: absolute;
    left: 12px;
    z-index: 1;
    color: #65758e;
    font-size: 13px;
    pointer-events: none;
}

.container-toolbar-search input[b-1zzn6x7mm7] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 35px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #263751;
    background: #fff;
    font-size: 12px;
}

.container-toolbar-search input[b-1zzn6x7mm7]::placeholder {
    color: #8b99ad;
}

.container-toolbar-search input:focus[b-1zzn6x7mm7],
.container-filter-select:focus[b-1zzn6x7mm7] {
    border-color: #5d91e8;
    box-shadow: 0 0 0 3px rgb(36 104 232 / 11%);
}

.container-toolbar-search button[b-1zzn6x7mm7] {
    position: absolute;
    right: 7px;
    width: 25px;
    height: 25px;
    display: grid;
    border: 0;
    border-radius: 6px;
    place-items: center;
    color: #52647c;
    background: #eef2f7;
    font-size: 11px;
}

.container-filter-select[b-1zzn6x7mm7] {
    width: 165px;
    height: 38px;
    flex: 0 0 165px;
    padding: 0 32px 0 11px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #34445d;
    background-color: #fff;
    font-size: 11px;
}

.container-location-filter[b-1zzn6x7mm7] {
    width: 145px;
    flex-basis: 145px;
}

.container-enable-segment[b-1zzn6x7mm7] {
    height: 38px;
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
}

.container-enable-segment button[b-1zzn6x7mm7] {
    min-width: 76px;
    padding: 0 10px;
    border: 0;
    border-right: 1px solid #d7e0eb;
    color: #526176;
    background: #fff;
    font-size: 10px;
    font-weight: 650;
}

.container-enable-segment button:last-child[b-1zzn6x7mm7] {
    border-right: 0;
}

.container-enable-segment button:hover[b-1zzn6x7mm7] {
    color: #1d5fd3;
    background: #f1f6ff;
}

.container-enable-segment button.active[b-1zzn6x7mm7] {
    color: #1d5fd3;
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px #1d5fd3;
}

.container-filter-reset[b-1zzn6x7mm7] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    place-items: center;
    color: #34445d;
    background: #fff;
}

.container-filter-reset:hover[b-1zzn6x7mm7] {
    border-color: #9eb2cc;
    color: #1d5fd3;
    background: #f1f6ff;
}

.container-table-card[b-1zzn6x7mm7]  thead .table-filter {
    display: none !important;
}

@media (max-width: 1450px) {
    .container-filterbar[b-1zzn6x7mm7] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .container-filterbar-divider[b-1zzn6x7mm7] {
        display: none;
    }

    .container-filterbar-filters[b-1zzn6x7mm7] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid #e1e7ef;
    }

    .container-table-card[b-1zzn6x7mm7]  .table-toolbar {
        flex-wrap: wrap;
    }
}

@media (max-width: 850px) {
    .container-filterbar-actions[b-1zzn6x7mm7] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filterbar-filters[b-1zzn6x7mm7] {
        flex-wrap: wrap;
    }

    .container-filter-label[b-1zzn6x7mm7] {
        flex-basis: 100%;
    }

    .container-toolbar-search[b-1zzn6x7mm7],
    .container-filter-select[b-1zzn6x7mm7] {
        width: auto;
        max-width: none;
        flex: 1 1 220px;
    }

    .container-enable-segment[b-1zzn6x7mm7] {
        flex: 1 1 auto;
    }

    .container-enable-segment button[b-1zzn6x7mm7] {
        min-width: 0;
        flex: 1 1 0;
    }
}



.container-table-card[b-1zzn6x7mm7]  .table-container {
    padding-bottom: 0;
}

.container-table-card[b-1zzn6x7mm7]  .nav-pages {
    min-height: 44px !important;
    height: 44px;
    max-height: 44px;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    flex: 0 0 44px;
    align-items: center;
}

.container-table-card[b-1zzn6x7mm7]  .nav-pages > .table-page-info,
.container-table-card[b-1zzn6x7mm7]  .nav-pages > .pagination,
.container-table-card[b-1zzn6x7mm7]  .nav-pages > .page-goto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center;
}


.container-filterbar[b-1zzn6x7mm7] {
    width: 100%;
    flex: 1 1 auto;
}

.container-filterbar-filters .container-toolbar-search[b-1zzn6x7mm7] {
    width: 285px;
    min-width: 190px;
    max-width: 340px;
    flex: 0 1 285px;
}

.container-filterbar-filters .container-filter-select[b-1zzn6x7mm7] {
    width: 145px;
    flex: 0 1 145px;
}

.container-filterbar-filters .container-location-filter[b-1zzn6x7mm7] {
    width: 130px;
    flex-basis: 130px;
}

.container-filterbar-filters .container-enable-segment button[b-1zzn6x7mm7] {
    min-width: 68px;
    padding-inline: 9px;
}

@media (max-width: 1450px) {
    .container-filterbar[b-1zzn6x7mm7] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .container-filterbar-divider[b-1zzn6x7mm7] {
        display: none;
    }

    .container-filterbar-filters[b-1zzn6x7mm7] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid #e1e7ef;
    }
}

@media (max-width: 850px) {
    .container-filterbar-actions[b-1zzn6x7mm7] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filterbar-filters[b-1zzn6x7mm7] {
        width: 100%;
        flex-wrap: wrap;
    }

    .container-filter-label[b-1zzn6x7mm7] {
        flex-basis: 100%;
    }

    .container-filterbar-filters .container-toolbar-search[b-1zzn6x7mm7],
    .container-filterbar-filters .container-filter-select[b-1zzn6x7mm7],
    .container-filterbar-filters .container-location-filter[b-1zzn6x7mm7] {
        width: auto;
        max-width: none;
        flex: 1 1 240px;
    }

    .container-enable-segment[b-1zzn6x7mm7] {
        flex: 1 1 auto;
    }

    .container-enable-segment button[b-1zzn6x7mm7] {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (max-width: 560px) {
    .container-filterbar-filters .container-toolbar-search[b-1zzn6x7mm7],
    .container-filterbar-filters .container-filter-select[b-1zzn6x7mm7],
    .container-filterbar-filters .container-location-filter[b-1zzn6x7mm7],
    .container-enable-segment[b-1zzn6x7mm7] {
        width: 100%;
        flex: 1 1 100%;
    }

    .container-filter-reset[b-1zzn6x7mm7] {
        margin-left: auto;
    }
}




.container-form-popup[b-1zzn6x7mm7] {
    margin: -1rem;
    background: #f7f9fc;
}

.container-form-hero[b-1zzn6x7mm7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    color: #102a56;
    background: linear-gradient(135deg, #edf4ff 0%, #f7faff 100%);
    border-bottom: 1px solid #dbe6f4;
}

.container-form-hero__icon[b-1zzn6x7mm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    color: #1769e8;
    background: #dceaff;
    font-size: 20px;
}

.container-form-hero h3[b-1zzn6x7mm7] {
    margin: 0 0 3px;
    font-size: 18px;
    font-weight: 800;
}

.container-form-hero p[b-1zzn6x7mm7] {
    margin: 0;
    color: #657690;
    font-size: 12px;
}

.container-form-hero--danger[b-1zzn6x7mm7] {
    color: #7f1d1d;
    background: linear-gradient(135deg, #fff1f2 0%, #fff8f8 100%);
    border-bottom-color: #fecdd3;
}

.container-form-hero--danger .container-form-hero__icon[b-1zzn6x7mm7] {
    color: #dc2626;
    background: #fee2e2;
}

.container-form-content[b-1zzn6x7mm7],
.container-delete-content[b-1zzn6x7mm7] {
    padding: 22px 24px 24px;
}

.container-form-content[b-1zzn6x7mm7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.container-form-field[b-1zzn6x7mm7] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.container-form-field > span[b-1zzn6x7mm7] {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.container-form-field > span b[b-1zzn6x7mm7] {
    color: #dc2626;
}

.container-form-field > input[b-1zzn6x7mm7] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    color: #17233c;
    background: #fff;
    border: 1px solid #cdd9e8;
    border-radius: 8px;
    outline: none;
}

.container-form-field > input:focus[b-1zzn6x7mm7] {
    border-color: #2471eb;
    box-shadow: 0 0 0 3px rgba(36, 113, 235, .12);
}

.container-form-status[b-1zzn6x7mm7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 10px 13px;
    background: #fff;
    border: 1px solid #dbe4ef;
    border-radius: 9px;
}

.container-form-status strong[b-1zzn6x7mm7],
.container-form-status small[b-1zzn6x7mm7] {
    display: block;
}

.container-form-status strong[b-1zzn6x7mm7] {
    color: #233552;
    font-size: 12px;
}

.container-form-status small[b-1zzn6x7mm7] {
    margin-top: 3px;
    color: #7b8aa2;
    font-size: 10px;
}

.container-delete-content[b-1zzn6x7mm7] {
    display: grid;
    gap: 14px;
}

.container-delete-count[b-1zzn6x7mm7] {
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.container-delete-count strong[b-1zzn6x7mm7] {
    color: #dc2626;
    font-size: 30px;
    line-height: 1;
}

.container-delete-count span[b-1zzn6x7mm7] {
    color: #52627a;
    font-weight: 700;
}

.container-delete-list[b-1zzn6x7mm7] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.container-delete-list span[b-1zzn6x7mm7] {
    padding: 6px 9px;
    color: #3e4f68;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: 7px;
    font-size: 11px;
}

.container-delete-list span i[b-1zzn6x7mm7] {
    margin-right: 5px;
    color: #70819a;
}

.container-delete-list small[b-1zzn6x7mm7] {
    align-self: center;
    color: #70819a;
}

.container-delete-warning[b-1zzn6x7mm7] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    color: #9f1239;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.container-modal-actions[b-1zzn6x7mm7] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    width: 100%;
}

.container-modal-button[b-1zzn6x7mm7] {
    min-width: 96px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .15s ease, box-shadow .15s ease;
}

.container-modal-button:not(:disabled):hover[b-1zzn6x7mm7] {
    transform: translateY(-1px);
}

.container-modal-button:disabled[b-1zzn6x7mm7] {
    cursor: not-allowed;
    opacity: .65;
}

.container-modal-button--cancel[b-1zzn6x7mm7] {
    color: #40516b;
    background: #fff;
    border-color: #cfd9e6;
}

.container-modal-button--save[b-1zzn6x7mm7] {
    color: #fff;
    background: #1769e8;
    box-shadow: 0 4px 10px rgba(23, 105, 232, .22);
}

.container-modal-button--delete[b-1zzn6x7mm7] {
    color: #fff;
    background: #dc2626;
    box-shadow: 0 4px 10px rgba(220, 38, 38, .22);
}

.container-modal-button i[b-1zzn6x7mm7] {
    margin-right: 6px;
}

@media (max-width: 560px) {
    .container-form-hero[b-1zzn6x7mm7] {
        align-items: flex-start;
        padding: 18px;
    }

    .container-form-content[b-1zzn6x7mm7],
    .container-delete-content[b-1zzn6x7mm7] {
        padding: 18px;
    }

    .container-form-content[b-1zzn6x7mm7] {
        grid-template-columns: 1fr;
    }

    .container-modal-actions[b-1zzn6x7mm7] {
        flex-direction: column-reverse;
    }

    .container-modal-button[b-1zzn6x7mm7] {
        width: 100%;
    }
}


.container-form-status--wide[b-1zzn6x7mm7] {
    grid-column: 1 / -1;
}

.container-table-card[b-1zzn6x7mm7]  .container-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
}

.container-table-card[b-1zzn6x7mm7]  .container-row-action + .container-row-action {
    margin-left: 6px;
}

.container-table-card[b-1zzn6x7mm7]  .container-row-action--edit {
    color: #fff;
    background: #2563eb;
}

.container-table-card[b-1zzn6x7mm7]  .container-row-action--delete {
    color: #fff;
    background: #ef4444;
}

.container-table-card[b-1zzn6x7mm7]  .container-row-action:hover {
    color: #fff;
    filter: brightness(.94);
}

@media (max-width: 560px) {
    .container-form-status--wide[b-1zzn6x7mm7] {
        grid-column: auto;
    }
}


.container-form-location[b-1zzn6x7mm7]  .search {
    width: 100%;
    min-width: 0;
}

.container-form-location[b-1zzn6x7mm7]  .search .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.container-form-location[b-1zzn6x7mm7]  .search .form-control {
    width: 1%;
    min-width: 0;
    min-height: 38px;
    flex: 1 1 auto;
    border-color: #cdd9e8;
    border-radius: 8px 0 0 8px;
}

.container-form-location[b-1zzn6x7mm7]  .search .input-group > .btn {
    position: static;
    width: 38px;
    min-width: 38px;
    height: 38px;
    flex: 0 0 38px;
    margin: 0;
    border-color: #cdd9e8;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
}



[b-1zzn6x7mm7] .container-edit-dialog > .modal-content,
[b-1zzn6x7mm7] .container-edit-dialog .modal-body {
    overflow: visible;
}

[b-1zzn6x7mm7] .container-edit-dialog .modal-footer {
    position: relative;
    z-index: 0;
    border-radius: 0 0 14px 14px;
}

.container-form-location[b-1zzn6x7mm7]  .search {
    position: relative;
    z-index: 2;
}

.container-form-location[b-1zzn6x7mm7]  .search .dropdown-menu {
    z-index: 1085;
    max-height: 210px;
    overflow-y: auto;
    box-shadow: 0 10px 24px rgba(15, 35, 64, .18);
}


@media (max-width: 1050px) {
    .container-overview[b-1zzn6x7mm7] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 560px) {
    .container-overview[b-1zzn6x7mm7] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 560px) {
    .container-card-heading[b-1zzn6x7mm7] {
        align-items: flex-start;
    }

    .container-live-status[b-1zzn6x7mm7] {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 5px;
    }

    .container-last-updated[b-1zzn6x7mm7] {
        font-size: 9px;
    }
}

.container-main-cell[b-1zzn6x7mm7] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.container-main-cell__icon[b-1zzn6x7mm7] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #cfe1f6;
    border-radius: 8px;
    color: #1769d2;
    background: #edf5ff;
}

.container-main-cell > span:last-child[b-1zzn6x7mm7] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.container-main-cell strong[b-1zzn6x7mm7],
.container-main-cell small[b-1zzn6x7mm7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.container-main-cell strong[b-1zzn6x7mm7] { color: #154f91; font-size: 11px; }
.container-main-cell small[b-1zzn6x7mm7] { color: #7b8ba0; font-size: 8.5px; }

.container-enable-state[b-1zzn6x7mm7],
.container-location-badge[b-1zzn6x7mm7],
.container-location-empty[b-1zzn6x7mm7],
.container-weight[b-1zzn6x7mm7] {
    display: inline-flex;
    min-height: 24px;
    padding: 3px 8px;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.container-enable-state.is-enabled[b-1zzn6x7mm7] {
    border: 1px solid #a9e5cd;
    color: #087f5b;
    background: #dcf8eb;
}

.container-enable-state.is-disabled[b-1zzn6x7mm7] {
    border: 1px solid #f4c7c3;
    color: #b42318;
    background: #fff0ee;
}

.container-location-badge[b-1zzn6x7mm7] {
    border: 1px solid #cfe0f0;
    color: #234f7c;
    background: #edf4fb;
}

.container-location-empty[b-1zzn6x7mm7] {
    color: #7b8ba0;
    background: #f1f4f8;
}

.container-weight[b-1zzn6x7mm7] {
    color: #53657d;
    background: #f1f4f8;
}

.container-partition-layout[b-1zzn6x7mm7] { position: relative; overflow: hidden; border: 2px solid #4f78a6; border-radius: 4px; background: #f7fbff; }
.container-partition-layout--table[b-1zzn6x7mm7] { max-width: 96px; max-height: 38px; height: auto; }
.container-partition-layout--preview[b-1zzn6x7mm7] { max-width: 100%; max-height: 210px; height: auto; }
.container-partition-cell[b-1zzn6x7mm7] { position: absolute; display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px; overflow: hidden; border: 1px solid #2775c7; color: #154f91; background: #dceeff; font-size: 6px; font-weight: 800; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.container-partition-cell:nth-of-type(even)[b-1zzn6x7mm7] { background: #e4f8ef; border-color: #20a36a; color: #087f5b; }
.container-partition-layout--table .container-partition-cell[b-1zzn6x7mm7],
.container-partition-layout--table .container-partition-cell:nth-of-type(even)[b-1zzn6x7mm7] {
    border-color: #cbd5e1;
    color: #94a3b8;
    background: transparent;
    font-size: 4px;
    font-weight: 600;
}
.container-partition-preview-wrap[b-1zzn6x7mm7] { display: grid; gap: 6px; justify-items: center; padding: 12px; border: 1px solid #d9e4f0; border-radius: 10px; background: #f8fafc; }
.container-partition-preview-wrap > span[b-1zzn6x7mm7] { color: #53657d; font-size: 10px; font-weight: 800; }
.container-partition-manager[b-1zzn6x7mm7] { display: grid; gap: 14px; }
.container-partition-heading[b-1zzn6x7mm7] { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-radius: 10px; background: #edf5ff; }
.container-partition-heading div[b-1zzn6x7mm7] { display: flex; flex-direction: column; }
.container-partition-heading small[b-1zzn6x7mm7] { color: #71839a; }
.container-partition-heading strong[b-1zzn6x7mm7] { color: #174f91; }
.container-partition-list[b-1zzn6x7mm7] { display: grid; gap: 7px; max-height: 230px; overflow: auto; }
.container-partition-row[b-1zzn6x7mm7] { display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px; gap: 6px; align-items: center; padding: 9px 10px; border: 1px solid #d9e4f0; border-radius: 9px; }
.container-partition-row div[b-1zzn6x7mm7] { display: flex; min-width: 0; flex-direction: column; }
.container-partition-row small[b-1zzn6x7mm7] { color: #71839a; }
.container-partition-row button[b-1zzn6x7mm7] { width: 32px; height: 32px; border: 0; border-radius: 8px; }
.container-partition-edit[b-1zzn6x7mm7] { color: #1769d2; background: #e9f3ff; }
.container-partition-delete[b-1zzn6x7mm7] { color: #d92d20; background: #fff0ee; }
.container-partition-form[b-1zzn6x7mm7] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px solid #d9e4f0; border-radius: 10px; background: #f8fafc; }
.container-partition-form label[b-1zzn6x7mm7] { display: grid; gap: 5px; color: #53657d; font-size: 10px; font-weight: 700; }
.container-partition-form input[b-1zzn6x7mm7] { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid #cbd8e7; border-radius: 7px; background: #fff; }

@media (max-width: 720px) {
    .container-partition-form[b-1zzn6x7mm7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.container-type-field[b-1zzn6x7mm7] { grid-column: 1 / -1; }
.container-type-options[b-1zzn6x7mm7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding: 3px; }
.container-type-option[b-1zzn6x7mm7] { display: flex; min-width: 0; min-height: 92px; padding: 12px 8px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid #cdd9e8; border-radius: 8px; color: #40516b; background: #fff; }
.container-type-option:hover[b-1zzn6x7mm7],
.container-type-option.is-selected[b-1zzn6x7mm7] { border-color: #2563eb; background: #edf4ff; }
.container-type-option.is-selected[b-1zzn6x7mm7] { box-shadow: inset 0 0 0 1px #2563eb; }
.container-type-option:focus-visible[b-1zzn6x7mm7] { outline: 2px solid #2563eb; outline-offset: 1px; }
.container-type-option:disabled[b-1zzn6x7mm7] { cursor: not-allowed; opacity: .65; }
.container-partition-layout--choice[b-1zzn6x7mm7] { display: block; flex: 0 0 auto; max-width: 100%; }
.container-partition-layout--choice .container-partition-cell[b-1zzn6x7mm7] { font-size: 8px; }
.container-type-option-name[b-1zzn6x7mm7] { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; text-align: center; }
/* _content/WMS.UI/Pages/ResourceManagements/Docking/DockingConfiguration.razor.rz.scp.css */
.dock-page[b-3hfy89dr8e]{height:100%;min-height:0;padding:18px 20px;display:flex;flex-direction:column;overflow:hidden;color:#172b4d;background:#f3f6fa}.dock-header[b-3hfy89dr8e]{flex:0 0 auto;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.dock-header h1[b-3hfy89dr8e]{margin:2px 0;font-size:24px}.dock-header p[b-3hfy89dr8e],.dock-toolbar p[b-3hfy89dr8e]{margin:0;color:#74849a;font-size:11px}.dock-btn[b-3hfy89dr8e]{min-height:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:700;border-radius:8px;cursor:pointer}.dock-btn.primary[b-3hfy89dr8e]{color:#fff;background:#1769d2;border:1px solid #1769d2;box-shadow:0 5px 13px rgba(23,105,210,.18)}.dock-btn.secondary[b-3hfy89dr8e]{color:#284564;background:#fff;border:1px solid #d3deeb}.dock-btn.danger[b-3hfy89dr8e]{color:#b34242;background:#fff6f5;border:1px solid #f2c9c5}.dock-btn.enable[b-3hfy89dr8e]{color:#087a55;background:#edfbf5;border:1px solid #bce8d5}.dock-btn:disabled[b-3hfy89dr8e]{opacity:.45;cursor:not-allowed}.dock-summary[b-3hfy89dr8e]{flex:0 0 auto;margin-bottom:14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.dock-summary article[b-3hfy89dr8e]{min-width:0;padding:11px 12px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #dbe5f0;border-radius:10px}.dock-summary article>span[b-3hfy89dr8e]{width:36px;height:36px;display:grid;flex:0 0 36px;place-items:center;border-radius:9px}.dock-summary .blue[b-3hfy89dr8e]{color:#1769d2;background:#eaf3ff}.dock-summary .green[b-3hfy89dr8e]{color:#0b8d63;background:#e5f8ef}.dock-summary .orange[b-3hfy89dr8e]{color:#c56a0a;background:#fff1df}.dock-summary .red[b-3hfy89dr8e]{color:#c44940;background:#ffedeb}.dock-summary .violet[b-3hfy89dr8e]{color:#7454c9;background:#f0ebff}.dock-summary article div[b-3hfy89dr8e]{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:end;flex:1}.dock-summary small[b-3hfy89dr8e]{color:#708197;font-size:9px}.dock-summary strong[b-3hfy89dr8e]{color:#142d50;font-size:19px;line-height:1}.dock-summary em[b-3hfy89dr8e]{grid-column:1/-1;margin-top:3px;overflow:hidden;color:#8996a8;font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.dock-workspace[b-3hfy89dr8e]{min-height:0;padding:12px;display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #d8e3ef;border-radius:12px}.dock-toolbar[b-3hfy89dr8e]{flex:0 0 auto;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.dock-toolbar h2[b-3hfy89dr8e]{margin:0 0 2px;font-size:14px}.dock-toolbar>div:last-child[b-3hfy89dr8e]{display:flex;gap:7px}.dock-toolbar label[b-3hfy89dr8e]{min-width:280px;height:36px;padding:0 11px;display:flex;align-items:center;gap:8px;color:#74869b;border:1px solid #d2deeb;border-radius:8px}.dock-toolbar input[b-3hfy89dr8e],.dock-toolbar select[b-3hfy89dr8e]{height:100%;color:#263e5c;font-size:10px;background:transparent;border:0;outline:none}.dock-toolbar input[b-3hfy89dr8e]{min-width:0;flex:1}.dock-toolbar select[b-3hfy89dr8e]{min-width:130px;padding:0 10px;border:1px solid #d2deeb;border-radius:8px}.dock-grid[b-3hfy89dr8e]{min-height:0;padding-right:4px;padding-bottom:4px;display:grid;grid-template-columns:repeat(3,minmax(290px,1fr));grid-auto-rows:max-content;align-content:start;align-items:start;flex:1 1 auto;gap:10px;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}.dock-card[b-3hfy89dr8e]{min-width:0;align-self:start;overflow:hidden;background:#fff;border:1px solid #d8e3ef;border-radius:11px;box-shadow:0 4px 14px rgba(30,59,91,.05)}.dock-card.issue[b-3hfy89dr8e]{border-color:#f0b9b3}.dock-card.disabled[b-3hfy89dr8e]{opacity:.72}.dock-card>header[b-3hfy89dr8e]{padding:11px 12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;background:linear-gradient(180deg,#fff,#f8fbff);border-bottom:1px solid #e3ebf4}.dock-name[b-3hfy89dr8e]{min-width:0;display:flex;align-items:center;gap:9px}.dock-name>span[b-3hfy89dr8e]{width:35px;height:35px;display:grid;flex:0 0 35px;place-items:center;color:#1769d2;background:#eaf3ff;border-radius:9px}.dock-name div[b-3hfy89dr8e]{min-width:0;display:flex;flex-direction:column}.dock-name small[b-3hfy89dr8e]{color:#2b75cc;font-size:7.5px;font-weight:800;letter-spacing:.1em}.dock-name strong[b-3hfy89dr8e]{color:#15375f;font-size:14px}.dock-name em[b-3hfy89dr8e]{overflow:hidden;color:#718198;font-size:9px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.dock-state[b-3hfy89dr8e]{padding:4px 7px;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font-size:8px;font-weight:750;border-radius:999px}.dock-state.active[b-3hfy89dr8e]{color:#087a55;background:#e6f8ef;border:1px solid #bee9d5}.dock-state.issue[b-3hfy89dr8e]{color:#b33e36;background:#fff0ee;border:1px solid #f2c1bd}.dock-state.disabled[b-3hfy89dr8e]{color:#68778a;background:#eef1f5;border:1px solid #dce2e9}.dock-capacity[b-3hfy89dr8e]{padding:11px 12px 8px}.dock-capacity>div:first-child[b-3hfy89dr8e]{display:flex;justify-content:space-between;gap:8px;color:#657891;font-size:9px}.dock-capacity strong[b-3hfy89dr8e]{color:#183a62;font-size:11px}.dock-capacity>small[b-3hfy89dr8e]{display:block;margin-top:4px;color:#8997a8;font-size:8px;text-align:right}.dock-progress[b-3hfy89dr8e]{height:7px;margin-top:6px;overflow:hidden;background:#e9eef5;border-radius:999px}.dock-progress i[b-3hfy89dr8e]{height:100%;display:block;background:linear-gradient(90deg,#1674db,#19b5bb);border-radius:inherit}.dock-schedule[b-3hfy89dr8e]{padding:0 12px 9px;display:grid;grid-template-columns:1fr auto;gap:7px}.dock-schedule>div[b-3hfy89dr8e]{padding:7px;display:flex;align-items:center;gap:7px;background:#f6f9fc;border-radius:7px}.dock-schedule i[b-3hfy89dr8e]{color:#1769d2}.dock-schedule span[b-3hfy89dr8e]{min-width:0;display:flex;flex-direction:column}.dock-schedule small[b-3hfy89dr8e]{color:#8291a4;font-size:7.5px}.dock-schedule strong[b-3hfy89dr8e]{overflow:hidden;color:#3c5572;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dock-schedule .cutoff.near[b-3hfy89dr8e]{color:#a65d09;background:#fff2df}.dock-section[b-3hfy89dr8e]{padding:0 12px 8px}.dock-section label[b-3hfy89dr8e]{margin-bottom:4px;display:block;color:#5e7189;font-size:8.5px;font-weight:700}.dock-section label i[b-3hfy89dr8e]{width:14px;color:#1769d2}.dock-chips[b-3hfy89dr8e]{min-height:22px;display:flex;flex-wrap:wrap;gap:4px}.dock-chips span[b-3hfy89dr8e]{padding:3px 6px;color:#325678;font-size:8px;font-weight:650;background:#edf4fb;border:1px solid #d7e7f6;border-radius:999px}.dock-chips.lanes span[b-3hfy89dr8e]{color:#08746f;background:#e8f8f7;border-color:#c4e9e6}.dock-chips em[b-3hfy89dr8e]{color:#9aa5b3;font-size:8px;font-style:normal}.dock-meta[b-3hfy89dr8e]{padding:8px 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;background:#f7f9fc;border-top:1px solid #e8eef5;border-bottom:1px solid #e8eef5}.dock-meta span[b-3hfy89dr8e]{min-width:0;display:flex;flex-direction:column}.dock-meta small[b-3hfy89dr8e]{color:#8795a7;font-size:7px}.dock-meta strong[b-3hfy89dr8e]{overflow:hidden;color:#344e6c;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}.dock-card>footer[b-3hfy89dr8e]{padding:9px 12px;display:flex;justify-content:flex-end;gap:6px}.dock-card>footer .dock-btn[b-3hfy89dr8e]{min-height:30px;padding:0 9px;font-size:9px}.dock-empty[b-3hfy89dr8e]{min-height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#8a98aa}.dock-empty i[b-3hfy89dr8e]{margin-bottom:8px;font-size:28px}.dock-empty strong[b-3hfy89dr8e]{color:#51657d;font-size:12px}.dock-empty span[b-3hfy89dr8e]{font-size:9px}.dock-backdrop[b-3hfy89dr8e]{position:fixed;inset:0;z-index:1060;display:flex;align-items:stretch;justify-content:flex-end;background:rgba(17,35,60,.53);backdrop-filter:blur(2px)}.dock-backdrop.center[b-3hfy89dr8e]{align-items:center;justify-content:center}.dock-panel[b-3hfy89dr8e]{width:min(500px,94vw);display:grid;grid-template-rows:auto 1fr auto;background:#fff;box-shadow:-14px 0 40px rgba(10,29,55,.18)}.dock-panel>header[b-3hfy89dr8e],.dock-switch>header[b-3hfy89dr8e]{padding:16px 18px;display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid #dce5ef}.dock-panel>header>div[b-3hfy89dr8e],.dock-switch>header>div[b-3hfy89dr8e]{flex:1}.dock-panel header small[b-3hfy89dr8e],.dock-switch header small[b-3hfy89dr8e]{color:#1769d2;font-size:8px;font-weight:800;letter-spacing:.1em}.dock-panel h2[b-3hfy89dr8e],.dock-switch h2[b-3hfy89dr8e]{margin:2px 0;color:#183554;font-size:17px}.dock-panel header p[b-3hfy89dr8e],.dock-switch header p[b-3hfy89dr8e]{margin:0;color:#78889c;font-size:9px}.dock-panel header button[b-3hfy89dr8e],.dock-switch header button[b-3hfy89dr8e]{width:32px;height:32px;color:#60748d;background:#f1f5f9;border:0;border-radius:8px}.dock-form[b-3hfy89dr8e]{padding:13px 17px;display:flex;flex-direction:column;gap:10px;overflow:auto;background:#f7f9fc}.dock-form-section[b-3hfy89dr8e]{padding:11px;background:#fff;border:1px solid #dce6f0;border-radius:10px}.dock-form-title[b-3hfy89dr8e]{margin-bottom:9px;display:flex;align-items:center;gap:8px}.dock-form-title>i[b-3hfy89dr8e]{width:29px;height:29px;display:grid;place-items:center;color:#1769d2;background:#eaf3ff;border-radius:8px}.dock-form-title span[b-3hfy89dr8e]{display:flex;flex-direction:column}.dock-form-title strong[b-3hfy89dr8e]{color:#284766;font-size:10.5px}.dock-form-title small[b-3hfy89dr8e]{color:#8492a4;font-size:8px}.dock-form-grid[b-3hfy89dr8e]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dock-form-grid label[b-3hfy89dr8e]{min-width:0;display:flex;flex-direction:column;gap:4px}.dock-form-grid label.wide[b-3hfy89dr8e]{grid-column:1/-1}.dock-form-grid label>span[b-3hfy89dr8e],.dock-flow label>span[b-3hfy89dr8e]{color:#405874;font-size:9.5px;font-weight:700}.dock-form-grid b[b-3hfy89dr8e],.dock-flow b[b-3hfy89dr8e]{color:#d5443d}.dock-form-grid input[type=text][b-3hfy89dr8e],.dock-form-grid input[type=number][b-3hfy89dr8e],.dock-form-grid input[type=time][b-3hfy89dr8e],.dock-form-grid select[b-3hfy89dr8e],.dock-flow select[b-3hfy89dr8e]{height:37px;padding:0 9px;color:#213d5d;font-size:9.5px;background:#fff;border:1px solid #ccd9e7;border-radius:8px}.dock-form-grid label>small[b-3hfy89dr8e]{color:#8b98a9;font-size:8px}.dock-form-grid .toggle[b-3hfy89dr8e]{padding:9px;flex-direction:row;align-items:center;justify-content:space-between;background:#f6f9fc;border:1px solid #e0e8f1;border-radius:8px}.dock-form-grid .toggle>span[b-3hfy89dr8e]{display:flex;flex-direction:column}.dock-form-grid .toggle input[b-3hfy89dr8e]{width:16px;height:16px}.dock-panel>footer[b-3hfy89dr8e],.dock-switch>footer[b-3hfy89dr8e]{padding:12px 18px;display:flex;justify-content:flex-end;gap:7px;border-top:1px solid #dce5ef}.dock-switch[b-3hfy89dr8e]{width:min(700px,94vw);overflow:hidden;background:#fff;border-radius:13px;box-shadow:0 20px 60px rgba(10,29,55,.24)}.dock-switch>header>span[b-3hfy89dr8e]{width:38px;height:38px;display:grid;place-items:center;color:#c54840;background:#ffedeb;border-radius:10px}.dock-impact[b-3hfy89dr8e]{margin:14px 18px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.dock-impact div[b-3hfy89dr8e]{padding:10px;display:grid;grid-template-columns:1fr auto;background:#f5f8fb;border:1px solid #e0e8f1;border-radius:8px}.dock-impact small[b-3hfy89dr8e]{grid-column:1/-1;color:#7a899c;font-size:8px}.dock-impact strong[b-3hfy89dr8e]{color:#1d4169;font-size:17px}.dock-impact span[b-3hfy89dr8e]{align-self:end;color:#7b899a;font-size:8px}.dock-flow[b-3hfy89dr8e]{margin:12px 18px;padding:12px;display:grid;grid-template-columns:140px 28px 1fr;align-items:center;gap:9px;background:#f8fafc;border:1px solid #dce6f0;border-radius:9px}.dock-flow>div[b-3hfy89dr8e]{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.dock-flow>div small[b-3hfy89dr8e]{color:#8492a4;font-size:8px}.dock-flow>div strong[b-3hfy89dr8e]{color:#203f62;font-size:14px}.dock-flow>i[b-3hfy89dr8e]{color:#7590ac;text-align:center}.dock-flow label[b-3hfy89dr8e]{display:flex;flex-direction:column;gap:5px}.dock-move[b-3hfy89dr8e]{margin:0 18px 12px;padding:10px 12px;display:flex;align-items:center;gap:9px;background:#f6f9fc;border-radius:8px}.dock-move span[b-3hfy89dr8e]{display:flex;flex-direction:column}.dock-move strong[b-3hfy89dr8e]{color:#405874;font-size:10px}.dock-move small[b-3hfy89dr8e]{color:#8391a3;font-size:8px}.dock-warning[b-3hfy89dr8e]{margin:0 18px 14px;padding:9px 11px;color:#8c5d10;font-size:9px;background:#fff7e8;border:1px solid #f0dfb9;border-radius:8px}.dock-btn.danger-confirm[b-3hfy89dr8e]{color:#fff;background:#c7463f;border:1px solid #c7463f}@media(max-width:1250px){.dock-grid[b-3hfy89dr8e]{grid-template-columns:repeat(2,minmax(280px,1fr))}.dock-summary[b-3hfy89dr8e]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.dock-page[b-3hfy89dr8e]{padding:12px}.dock-summary[b-3hfy89dr8e]{grid-template-columns:repeat(2,minmax(0,1fr))}.dock-toolbar[b-3hfy89dr8e]{align-items:stretch;flex-direction:column}.dock-toolbar>div:last-child[b-3hfy89dr8e]{flex-wrap:wrap}.dock-toolbar label[b-3hfy89dr8e]{min-width:220px;flex:1}}@media(max-width:620px){.dock-header[b-3hfy89dr8e]{align-items:stretch;flex-direction:column}.dock-grid[b-3hfy89dr8e],.dock-summary[b-3hfy89dr8e],.dock-form-grid[b-3hfy89dr8e]{grid-template-columns:1fr}.dock-form-grid label.wide[b-3hfy89dr8e]{grid-column:auto}.dock-flow[b-3hfy89dr8e]{grid-template-columns:1fr}.dock-flow>i[b-3hfy89dr8e]{transform:rotate(90deg)}.dock-impact[b-3hfy89dr8e]{grid-template-columns:1fr}.dock-meta[b-3hfy89dr8e]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* _content/WMS.UI/Pages/ResourceManagements/Docking/FormSection.razor.rz.scp.css */
.dock-form-section[b-6ujxb7zjeb] {
    padding: 11px;
    background: #fff;
    border: 1px solid #dce6f0;
    border-radius: 10px;
}

.dock-form-title[b-6ujxb7zjeb] {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dock-form-title > i[b-6ujxb7zjeb] {
    width: 29px;
    height: 29px;
    display: grid;
    flex: 0 0 29px;
    place-items: center;
    color: #1769d2;
    background: #eaf3ff;
    border-radius: 8px;
}

.dock-form-title span[b-6ujxb7zjeb] {
    display: flex;
    flex-direction: column;
}

.dock-form-title strong[b-6ujxb7zjeb] {
    color: #284766;
    font-size: 10.5px;
}

.dock-form-title small[b-6ujxb7zjeb] {
    color: #8492a4;
    font-size: 8px;
}

.dock-form-grid[b-6ujxb7zjeb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.dock-form-grid[b-6ujxb7zjeb]  label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dock-form-grid[b-6ujxb7zjeb]  label.wide {
    grid-column: 1 / -1;
}

.dock-form-grid[b-6ujxb7zjeb]  label > span {
    color: #405874;
    font-size: 9.5px;
    font-weight: 700;
}

.dock-form-grid[b-6ujxb7zjeb]  b {
    color: #d5443d;
}

.dock-form-grid[b-6ujxb7zjeb]  input[type="text"],
.dock-form-grid[b-6ujxb7zjeb]  input[type="number"],
.dock-form-grid[b-6ujxb7zjeb]  input[type="time"],
.dock-form-grid[b-6ujxb7zjeb]  select {
    height: 37px;
    padding: 0 9px;
    color: #213d5d;
    font-size: 9.5px;
    background: #fff;
    border: 1px solid #ccd9e7;
    border-radius: 8px;
    outline: none;
}

.dock-form-grid[b-6ujxb7zjeb]  input:focus,
.dock-form-grid[b-6ujxb7zjeb]  select:focus {
    border-color: #5795dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 210, .09);
}

.dock-form-grid[b-6ujxb7zjeb]  label > small {
    color: #8b98a9;
    font-size: 8px;
}

.dock-form-grid[b-6ujxb7zjeb]  .toggle {
    padding: 9px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #f6f9fc;
    border: 1px solid #e0e8f1;
    border-radius: 8px;
}

.dock-form-grid[b-6ujxb7zjeb]  .toggle > span {
    display: flex;
    flex-direction: column;
}

.dock-form-grid[b-6ujxb7zjeb]  .toggle input {
    width: 16px;
    height: 16px;
}

@media (max-width: 620px) {
    .dock-form-grid[b-6ujxb7zjeb] {
        grid-template-columns: 1fr;
    }

    .dock-form-grid[b-6ujxb7zjeb]  label.wide {
        grid-column: auto;
    }
}
/* _content/WMS.UI/Pages/ResourceManagements/Location/Location.razor.rz.scp.css */
.location-page[b-fkiluamzpo] {
    height: 100%;
    min-height: 0;
    padding: 18px;
    overflow: auto;
    background: #f4f7fb;
    color: #0f1f3d;
}

.location-header[b-fkiluamzpo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.location-eyebrow[b-fkiluamzpo] {
    display: block;
    margin-bottom: 5px;
    color: #2468e8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .11em;
}

.location-header h1[b-fkiluamzpo] {
    margin: 0;
    color: #101b34;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.location-header p[b-fkiluamzpo],
.workspace-heading p[b-fkiluamzpo] {
    margin: 5px 0 0;
    color: #65758e;
    font-size: 13px;
}

.location-summary[b-fkiluamzpo] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 10px;
}

.summary-card[b-fkiluamzpo] {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 13px 16px;
    border: 1px solid #d7e1ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 54, 91, .05);
}

.summary-icon[b-fkiluamzpo] {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    place-items: center;
    border-radius: 13px;
    font-size: 18px;
}

.summary-card div[b-fkiluamzpo] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.summary-card small[b-fkiluamzpo] {
    color: #65758e;
    font-size: 12px;
}

.summary-card strong[b-fkiluamzpo] {
    margin: 1px 0;
    color: #10213f;
    font-size: 23px;
    line-height: 1.05;
}

.summary-card div span[b-fkiluamzpo] {
    color: #8795aa;
    font-size: 11px;
}

.summary-card--blue .summary-icon[b-fkiluamzpo] { color: #2468e8; background: #e4edff; }
.summary-card--indigo .summary-icon[b-fkiluamzpo] { color: #3f55d9; background: #e9eaff; }
.summary-card--green .summary-icon[b-fkiluamzpo] { color: #11a654; background: #e0f6e8; }
.summary-card--cyan .summary-icon[b-fkiluamzpo] { color: #0795b1; background: #def5f8; }

.location-workspace[b-fkiluamzpo] {
    min-height: 530px;
    border: 1px solid #d7e1ef;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(31, 54, 91, .05);
}

.workspace-heading[b-fkiluamzpo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 16px;
    border-bottom: 1px solid #e1e8f2;
}

.workspace-heading h2[b-fkiluamzpo] {
    margin: 0;
    color: #11203b;
    font-size: 17px;
    font-weight: 700;
}

.live-badge[b-fkiluamzpo] {
    padding: 6px 10px;
    border-radius: 999px;
    color: #07954d;
    background: #d9f8e7;
    font-size: 10px;
    font-weight: 700;
}

.live-badge i[b-fkiluamzpo] {
    margin-right: 5px;
    font-size: 6px;
    vertical-align: middle;
}

.area-table-shell[b-fkiluamzpo] {
    height: calc(100vh - 330px);
    min-height: 420px;
    padding: 10px 12px 12px;
}

.location-detail[b-fkiluamzpo] {
    width: 100%;
    padding: 12px;
    background: #f7f9fc;
}

.area-overview[b-fkiluamzpo] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.1fr .65fr .85fr 1.35fr;
    margin-bottom: 10px;
    border: 1px solid #d5e0ee;
    border-left: 4px solid #11a9c3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.area-overview > div[b-fkiluamzpo] {
    min-width: 0;
    padding: 9px 13px;
    border-right: 1px solid #dbe3ee;
}

.area-overview > div:last-child[b-fkiluamzpo] { border-right: 0; }

.area-overview small[b-fkiluamzpo] {
    display: block;
    margin-bottom: 3px;
    color: #718198;
    font-size: 10px;
    text-transform: uppercase;
}

.area-overview strong[b-fkiluamzpo] {
    display: block;
    overflow: hidden;
    color: #1c2b44;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-tabs[b-fkiluamzpo] {
    height: calc(100vh - 510px);
    min-height: 300px;
    border: 1px solid #d7e1ef;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.detail-table[b-fkiluamzpo] {
    height: calc(100vh - 565px);
    min-height: 250px;
    width: 100%;
}

.location-edit-form[b-fkiluamzpo] {
    padding: 4px;
}

[b-fkiluamzpo] .area-table-shell .table-container {
    border-radius: 9px;
}

[b-fkiluamzpo] .area-table-shell .table-toolbar {
    gap: 8px;
    padding: 2px 0 10px;
}

[b-fkiluamzpo] .area-table-shell .table-toolbar .btn {
    min-height: 36px;
    border-radius: 8px;
}

[b-fkiluamzpo] .area-table-shell table {
    font-size: 12px;
}

[b-fkiluamzpo] .area-table-shell table thead th {
    height: 42px;
    padding: 8px 10px;
    color: #fff;
    background: #2368bd;
    font-size: 11px;
    font-weight: 600;
}

[b-fkiluamzpo] .area-table-shell table tbody td {
    height: 40px;
    padding: 7px 10px;
    color: #263751;
    vertical-align: middle !important;
}

[b-fkiluamzpo] .detail-tabs .tabs-header {
    border-bottom: 1px solid #dce5f0;
    background: #fff;
}

[b-fkiluamzpo] .detail-tabs .tabs-item {
    min-height: 44px;
    padding: 11px 22px;
    color: #65758e;
    font-size: 12px;
    font-weight: 600;
}

[b-fkiluamzpo] .detail-tabs .tabs-item.active {
    color: #2468e8;
    box-shadow: inset 0 -2px #2468e8;
}

[b-fkiluamzpo] .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

[b-fkiluamzpo] .location-edit-form .form-control,
[b-fkiluamzpo] .location-edit-form .select {
    min-height: 38px;
    border-radius: 8px;
}

@media (max-width: 1200px) {
    .location-summary[b-fkiluamzpo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .area-overview[b-fkiluamzpo] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .location-page[b-fkiluamzpo] { padding: 12px; }
    .location-header h1[b-fkiluamzpo] { font-size: 23px; }
    .location-summary[b-fkiluamzpo] { grid-template-columns: 1fr; }
    .summary-card[b-fkiluamzpo] { min-height: 88px; }
    .area-table-shell[b-fkiluamzpo] { height: calc(100vh - 270px); padding: 8px; }
    .area-overview[b-fkiluamzpo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workspace-heading[b-fkiluamzpo] { align-items: flex-start; }
    .live-badge[b-fkiluamzpo] { margin-left: 8px; }
}


.area-selector-card[b-fkiluamzpo] {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr .9fr 1fr 1.1fr .65fr .9fr 1.3fr auto;
    align-items: stretch;
    min-height: 92px;
    margin-bottom: 14px;
    border: 1px solid #cfdae9;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 12px rgba(31, 54, 91, .04);
}

.area-selector-accent[b-fkiluamzpo] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #0ab0c9;
}

.area-field[b-fkiluamzpo] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
    border-right: 1px solid #d9e2ee;
}

.area-field small[b-fkiluamzpo] {
    margin-bottom: 7px;
    color: #718198;
    font-size: 10px;
    text-transform: uppercase;
}

.area-field strong[b-fkiluamzpo] {
    overflow: hidden;
    color: #17243c;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-select-wrap[b-fkiluamzpo] {
    position: relative;
}

.area-select-wrap select[b-fkiluamzpo] {
    width: 100%;
    min-height: 34px;
    padding: 4px 32px 4px 10px;
    border: 0;
    border-radius: 7px;
    outline: 0;
    color: #17243c;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    appearance: none;
    cursor: pointer;
}

.area-select-wrap select:hover[b-fkiluamzpo],
.area-select-wrap select:focus[b-fkiluamzpo] {
    background: #f1f6fd;
    box-shadow: 0 0 0 1px #bcd0ea;
}

.area-select-wrap i[b-fkiluamzpo] {
    position: absolute;
    top: 50%;
    right: 10px;
    color: #27374e;
    font-size: 10px;
    pointer-events: none;
    transform: translateY(-50%);
}

.area-actions[b-fkiluamzpo] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.icon-action[b-fkiluamzpo],
.panel-close[b-fkiluamzpo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border: 1px solid #d4dfed;
    border-radius: 8px;
    color: #2468e8;
    background: #fff;
}

.icon-action:hover[b-fkiluamzpo],
.panel-close:hover[b-fkiluamzpo] {
    border-color: #a9c3e7;
    background: #eef5ff;
}

.icon-action--danger[b-fkiluamzpo] {
    border-color: #fecaca;
    color: #dc2626;
}

.icon-action--danger:hover[b-fkiluamzpo] {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fef2f2;
}

.area-empty[b-fkiluamzpo] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 90px;
    color: #73839a;
}

.area-manager-panel[b-fkiluamzpo] {
    margin-bottom: 14px;
    border: 1px solid #d7e1ef;
    border-radius: 11px;
    overflow: hidden;
    background: #fff;
}

.area-manager-table[b-fkiluamzpo] {
    height: 340px;
    padding: 10px 12px 12px;
}

.panel-close[b-fkiluamzpo] {
    gap: 6px;
    width: auto;
    padding: 0 12px;
    color: #46566e;
    font-size: 11px;
    font-weight: 600;
}

.area-source-table[b-fkiluamzpo] {
    position: fixed;
    left: -10000px;
    top: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.selected-area-tabs[b-fkiluamzpo] {
    height: calc(100vh - 420px);
    min-height: 390px;
}

.selected-area-table[b-fkiluamzpo] {
    height: calc(100vh - 475px);
    min-height: 335px;
    width: 100%;
}

[b-fkiluamzpo] .selected-area-tabs .tabs-header {
    padding: 0 14px;
    border-bottom: 1px solid #dce5f0;
    background: #fff;
}

[b-fkiluamzpo] .selected-area-tabs .tabs-item {
    min-height: 46px;
    padding: 12px 24px;
    color: #65758e;
    font-size: 12px;
    font-weight: 600;
}

[b-fkiluamzpo] .selected-area-tabs .tabs-item.active {
    color: #2468e8;
    box-shadow: inset 0 -2px #2468e8;
}

@media (max-width: 1300px) {
    .area-selector-card[b-fkiluamzpo] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .area-actions[b-fkiluamzpo] {
        min-height: 60px;
    }
}

@media (max-width: 760px) {
    .area-selector-card[b-fkiluamzpo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .area-field[b-fkiluamzpo] {
        padding: 12px;
    }

    .selected-area-tabs[b-fkiluamzpo] {
        height: calc(100vh - 360px);
    }
}


.workspace-heading--location[b-fkiluamzpo] {
    min-height: 78px;
    gap: 24px;
}

.workspace-title[b-fkiluamzpo] {
    flex: 0 0 auto;
    min-width: 220px;
}

.area-location-summary[b-fkiluamzpo] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.area-location-summary > div[b-fkiluamzpo] {
    display: flex;
    min-width: 128px;
    align-items: center;
    gap: 10px;
}

.area-location-summary > div > span:last-child[b-fkiluamzpo] {
    display: flex;
    flex-direction: column;
}

.area-location-summary small[b-fkiluamzpo] {
    color: #718198;
    font-size: 10px;
    white-space: nowrap;
}

.area-location-summary strong[b-fkiluamzpo] {
    color: #17243c;
    font-size: 20px;
    line-height: 1.15;
}

.area-location-summary__icon[b-fkiluamzpo] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    font-size: 15px;
}

.area-location-summary__icon--blue[b-fkiluamzpo] {
    color: #2468e8;
    background: #e4edff;
}

.area-location-summary__icon--green[b-fkiluamzpo] {
    color: #10a650;
    background: #e0f6e8;
}

.area-location-summary__icon--cyan[b-fkiluamzpo] {
    color: #0795b1;
    background: #def5f8;
}

.area-location-summary__icon--gray[b-fkiluamzpo] {
    color: #64748b;
    background: #e8edf3;
}

.location-only-table[b-fkiluamzpo] {
    height: calc(100vh - 500px);
    min-height: 360px;
    padding: 10px 12px 12px;
}

[b-fkiluamzpo] .location-only-table > div,
[b-fkiluamzpo] .location-only-table .table-container {
    height: 100%;
}

@media (max-width: 1100px) {
    .workspace-heading--location[b-fkiluamzpo] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .area-location-summary[b-fkiluamzpo] {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 24px;
    }

    .location-only-table[b-fkiluamzpo] {
        height: calc(100vh - 550px);
    }
}

@media (max-width: 680px) {
    .area-location-summary[b-fkiluamzpo] {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .area-location-summary > div[b-fkiluamzpo] {
        min-width: 0;
    }

    .area-location-summary__icon[b-fkiluamzpo] {
        display: none;
    }
}


.add-area-button[b-fkiluamzpo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #2468e8;
    border-radius: 8px;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 4px 10px rgba(36, 104, 232, .18);
    font-size: 12px;
    font-weight: 600;
}

.add-area-button:hover[b-fkiluamzpo] {
    border-color: #1858c7;
    background: #1858c7;
}

.area-modal-form[b-fkiluamzpo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 4px;
}

.area-modal-field[b-fkiluamzpo] {
    min-width: 0;
}

.area-modal-field--wide[b-fkiluamzpo] {
    grid-column: 1 / -1;
}

.area-modal-field label[b-fkiluamzpo] {
    display: block;
    margin-bottom: 6px;
    color: #34435a;
    font-size: 12px;
    font-weight: 600;
}

.area-modal-field label span[b-fkiluamzpo] {
    color: #e3343f;
}

[b-fkiluamzpo] .area-modal-field .form-control,
[b-fkiluamzpo] .area-modal-field .select {
    min-height: 39px;
    border-radius: 8px;
}

.area-modal-footer[b-fkiluamzpo] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.area-modal-cancel[b-fkiluamzpo],
.area-modal-save[b-fkiluamzpo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

.area-modal-cancel[b-fkiluamzpo] {
    border: 1px solid #d5deea;
    color: #36465e;
    background: #fff;
    box-shadow: 0 2px 0 #d6d6d6;
}

.area-modal-cancel:hover[b-fkiluamzpo] {
    background: #f4f6f9;
}

.area-modal-save[b-fkiluamzpo] {
    border: 1px solid #2468e8;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 2px 0 #174fae;
}

.area-modal-save:hover[b-fkiluamzpo] {
    background: #1858c7;
}

.area-modal-save:disabled[b-fkiluamzpo] {
    cursor: wait;
    opacity: .65;
}

@media (max-width: 620px) {
    .location-header[b-fkiluamzpo] {
        gap: 12px;
    }

    .add-area-button[b-fkiluamzpo] {
        flex: 0 0 auto;
        padding: 0 12px;
    }

    .area-modal-form[b-fkiluamzpo] {
        grid-template-columns: 1fr;
    }

    .area-modal-field--wide[b-fkiluamzpo] {
        grid-column: auto;
    }
}


[b-fkiluamzpo] .modal-dialog.modal-sm {
    width: calc(100% - 28px);
    max-width: 560px;
}

.area-popup[b-fkiluamzpo] {
    margin: -1rem;
    color: #14213a;
    background: #f7f9fc;
}

.area-popup-hero[b-fkiluamzpo] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    border-bottom: 1px solid #d9e4f1;
    background: linear-gradient(135deg, #f4f8ff 0%, #eef5ff 100%);
}

.area-popup-hero__icon[b-fkiluamzpo] {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 6px 14px rgba(36, 104, 232, .22);
    font-size: 20px;
}

.area-popup-hero > div:last-child[b-fkiluamzpo] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.area-popup-hero span[b-fkiluamzpo] {
    color: #2468e8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.area-popup-hero strong[b-fkiluamzpo] {
    overflow: hidden;
    margin: 2px 0;
    color: #10203c;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-popup-hero small[b-fkiluamzpo] {
    color: #687a94;
    font-size: 10px;
}

.area-popup-content[b-fkiluamzpo] {
    padding: 17px 18px 18px;
}

.area-popup-grid[b-fkiluamzpo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 13px;
}

.area-popup-field[b-fkiluamzpo] {
    min-width: 0;
}

.area-popup-field label[b-fkiluamzpo] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: #34445d;
    font-size: 11px;
    font-weight: 600;
}

.area-popup-field label i[b-fkiluamzpo] {
    width: 13px;
    color: #2468e8;
    text-align: center;
}

.area-popup-field label span[b-fkiluamzpo] {
    color: #e3343f;
}

[b-fkiluamzpo] .area-popup-field .form-control,
[b-fkiluamzpo] .area-popup-field .select,
[b-fkiluamzpo] .area-popup-field .dropdown-toggle {
    min-height: 38px;
    border-color: #cfdaea;
    border-radius: 8px;
    font-size: 12px;
}

[b-fkiluamzpo] .area-popup-field .form-control:focus,
[b-fkiluamzpo] .area-popup-field .select:focus-within {
    border-color: #6e9ff0;
    box-shadow: 0 0 0 3px rgba(36, 104, 232, .1);
}

.area-popup-note[b-fkiluamzpo] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 11px;
    border-radius: 8px;
    color: #52657f;
    background: #edf3fa;
    font-size: 10px;
    line-height: 1.45;
}

.area-popup-note i[b-fkiluamzpo] {
    margin-top: 2px;
    color: #2468e8;
}

.area-popup-actions[b-fkiluamzpo] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

[b-fkiluamzpo] .area-popup-actions .btn {
    min-height: 36px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

[b-fkiluamzpo] .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 22px 55px rgba(9, 21, 42, .24);
}

[b-fkiluamzpo] .modal-header {
    min-height: 55px;
    padding: 0 16px;
    border-bottom: 1px solid #d9e2ee;
}

[b-fkiluamzpo] .modal-title {
    color: #10203c;
    font-size: 16px;
    font-weight: 700;
}

[b-fkiluamzpo] .modal-footer {
    min-height: 58px;
    padding: 10px 16px;
    border-top: 1px solid #d9e2ee;
    background: #fff;
}

@media (max-width: 560px) {
    .area-popup-grid[b-fkiluamzpo] {
        grid-template-columns: 1fr;
    }
}



[b-fkiluamzpo] .area-popup-actions .btn-secondary,
[b-fkiluamzpo] .area-popup-actions .btn-outline-secondary {
    border: 1px solid #b8c1cd !important;
    color: #1f2937 !important;
    background: #e9edf2 !important;
    box-shadow: 0 2px 0 #c3c9d1 !important;
    opacity: 1 !important;
}

[b-fkiluamzpo] .area-popup-actions .btn-secondary i,
[b-fkiluamzpo] .area-popup-actions .btn-outline-secondary i {
    color: #1f2937 !important;
}

[b-fkiluamzpo] .area-popup-actions .btn-secondary:hover,
[b-fkiluamzpo] .area-popup-actions .btn-outline-secondary:hover {
    border-color: #8e99a8 !important;
    color: #111827 !important;
    background: #d9dfe7 !important;
}

[b-fkiluamzpo] .area-popup-actions .btn-primary {
    border-color: #1457cf !important;
    color: #fff !important;
    background: #1f63e9 !important;
    box-shadow: 0 2px 0 #12459f !important;
    opacity: 1 !important;
}

[b-fkiluamzpo] .area-popup-actions .btn-primary:hover {
    border-color: #0f47b2 !important;
    background: #1555cf !important;
}


.area-popup-button[b-fkiluamzpo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    opacity: 1;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.area-popup-button--cancel[b-fkiluamzpo] {
    border-color: #465266;
    color: #fff;
    background-color: #5b687c;
    box-shadow: 0 2px 0 #384354;
}

.area-popup-button--cancel i[b-fkiluamzpo],
.area-popup-button--cancel span[b-fkiluamzpo] {
    color: #fff;
}

.area-popup-button--cancel:hover[b-fkiluamzpo] {
    border-color: #354052;
    color: #fff;
    background-color: #465266;
    box-shadow: 0 2px 0 #28313f;
}

.area-popup-button--save[b-fkiluamzpo] {
    border-color: #124bb1;
    color: #fff;
    background-color: #1d5fd3;
    box-shadow: 0 2px 0 #0d3b8f;
}

.area-popup-button--save i[b-fkiluamzpo],
.area-popup-button--save span[b-fkiluamzpo] {
    color: #fff;
}

.area-popup-button--save:hover[b-fkiluamzpo] {
    border-color: #0d3f99;
    color: #fff;
    background-color: #154daf;
}

.area-popup-button:focus-visible[b-fkiluamzpo] {
    outline: 3px solid rgba(36, 104, 232, .28);
    outline-offset: 2px;
}

.area-popup-button:disabled[b-fkiluamzpo] {
    cursor: wait;
    opacity: .7;
}



.location-workspace[b-fkiluamzpo] {
    display: flex;
    height: calc(100vh - 425px);
    min-height: 430px;
    flex-direction: column;
    overflow: hidden;
}

.workspace-heading--location[b-fkiluamzpo] {
    flex: 0 0 auto;
}

.location-only-table[b-fkiluamzpo] {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    overflow: hidden;
    padding: 8px 10px 8px;
}

[b-fkiluamzpo] .location-only-table > div,
[b-fkiluamzpo] .location-only-table .table,
[b-fkiluamzpo] .location-only-table .table-container,
[b-fkiluamzpo] .location-only-table .table-wrapper {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

[b-fkiluamzpo] .location-only-table .table-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

[b-fkiluamzpo] .location-only-table .table-wrapper {
    flex: 1 1 auto;
    overflow: hidden;
}

[b-fkiluamzpo] .location-only-table .nav-pages {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 4px !important;
}

@media (max-height: 760px) {
    .location-workspace[b-fkiluamzpo] {
        height: 430px;
    }
}


.area-popup-hero--danger .area-popup-hero__icon[b-fkiluamzpo] {
    color: #dc2626;
    background: #fee2e2;
}

.area-popup-note--danger[b-fkiluamzpo] {
    border-color: #fecaca;
    color: #991b1b;
    background: #fef2f2;
}

.area-popup-button--delete[b-fkiluamzpo] {
    border-color: #dc2626;
    color: #fff;
    background: #dc2626;
    box-shadow: 0 3px 0 #991b1b;
}

.area-popup-button--delete:hover:not(:disabled)[b-fkiluamzpo] {
    border-color: #b91c1c;
    background: #b91c1c;
}

.area-popup-button--delete:disabled[b-fkiluamzpo] {
    cursor: not-allowed;
    opacity: .65;
}



.location-page[b-fkiluamzpo] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.location-header[b-fkiluamzpo],
.location-summary[b-fkiluamzpo],
.area-overview[b-fkiluamzpo] {
    flex: 0 0 auto;
}

.location-workspace[b-fkiluamzpo] {
    display: flex;
    height: auto;
    min-height: 0;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
}

.workspace-heading--location[b-fkiluamzpo] {
    flex: 0 0 auto;
}

.location-only-table[b-fkiluamzpo] {
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
    padding: 8px 10px;
}

[b-fkiluamzpo] .location-only-table > div,
[b-fkiluamzpo] .location-only-table .table,
[b-fkiluamzpo] .location-only-table .table-container,
[b-fkiluamzpo] .location-only-table .table-wrapper {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
}

[b-fkiluamzpo] .location-only-table > .table {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
}


[b-fkiluamzpo] .location-only-table table.table {
    display: table;
    width: 100%;
    max-width: none;
}

[b-fkiluamzpo] .location-only-table .table-container {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    overflow: hidden;
}

[b-fkiluamzpo] .location-only-table .table-wrapper {
    flex: 1 1 0;
    overflow: hidden;
}

[b-fkiluamzpo] .location-only-table .nav-pages {
    flex: 0 0 auto;
    margin-top: 0 !important;
    padding-top: 4px !important;
}

@media (max-height: 760px) {
    .location-page[b-fkiluamzpo] {
        overflow-y: auto;
    }

    .location-workspace[b-fkiluamzpo] {
        min-height: 430px;
        flex: 0 0 auto;
    }
}



@media (max-width: 1100px) {
    .location-page[b-fkiluamzpo] {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .location-workspace[b-fkiluamzpo] {
        min-height: 540px;
        flex: 0 0 auto;
    }

    .location-only-table[b-fkiluamzpo] {
        height: auto;
        min-height: 390px;
        flex: 1 1 auto;
    }
}

@media (max-width: 680px) {
    .location-workspace[b-fkiluamzpo] {
        min-height: 580px;
    }

    .location-only-table[b-fkiluamzpo] {
        min-height: 420px;
    }
}



.location-only-table[b-fkiluamzpo] {
    padding-bottom: 0;
}

[b-fkiluamzpo] .location-only-table .nav-pages {
    min-height: 44px !important;
    height: 44px;
    max-height: 44px;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    flex: 0 0 44px;
    align-items: center;
}

[b-fkiluamzpo] .location-only-table .nav-pages > .table-page-info,
[b-fkiluamzpo] .location-only-table .nav-pages > .pagination,
[b-fkiluamzpo] .location-only-table .nav-pages > .page-goto {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center;
}
/* _content/WMS.UI/Pages/ResourceManagements/Location/LocationTable.razor.rz.scp.css */
.location-zone-popup[b-20blpu984a] {
    margin: -1rem;
    color: #14213a;
    background: #f7f9fc;
}

.location-zone-hero[b-20blpu984a] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    border-bottom: 1px solid #d9e4f1;
    background: linear-gradient(135deg, #f4f8ff 0%, #eef5ff 100%);
}

.location-zone-hero__icon[b-20blpu984a] {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 6px 14px rgba(36, 104, 232, .22);
    font-size: 20px;
}

.location-zone-hero > div:last-child[b-20blpu984a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.location-zone-hero span[b-20blpu984a] {
    color: #2468e8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.location-zone-hero strong[b-20blpu984a] {
    margin: 2px 0;
    color: #10203c;
    font-size: 17px;
}

.location-zone-hero small[b-20blpu984a] {
    color: #687a94;
    font-size: 10px;
}

.location-zone-form[b-20blpu984a] {
    padding: 17px 18px 18px;
}

.location-zone-field label[b-20blpu984a] {
    display: block;
    margin-bottom: 6px;
    color: #34445d;
    font-size: 11px;
    font-weight: 600;
}

.location-zone-field label span[b-20blpu984a] {
    color: #e3343f;
}

.location-zone-section[b-20blpu984a] {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid #d8e2ef;
    border-radius: 9px;
    background: #fff;
}

.location-zone-section__title[b-20blpu984a] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    color: #20324e;
    font-size: 11px;
    font-weight: 700;
}

.location-zone-section__title i[b-20blpu984a] {
    color: #2468e8;
}

.location-zone-grid[b-20blpu984a] {
    display: grid;
    gap: 11px;
}

.location-zone-grid--three[b-20blpu984a] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

[b-20blpu984a] .location-zone-field .form-control,
[b-20blpu984a] .location-zone-field .select {
    min-height: 38px;
    border-color: #cfdaea;
    border-radius: 8px;
    font-size: 12px;
}

.location-zone-note[b-20blpu984a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 11px;
    border-radius: 8px;
    color: #52657f;
    background: #edf3fa;
    font-size: 10px;
}

.location-zone-note i[b-20blpu984a] {
    color: #2468e8;
}

.location-zone-note strong[b-20blpu984a] {
    color: #164fbd;
    font-size: 12px;
}

.location-zone-actions[b-20blpu984a] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}

.location-zone-button[b-20blpu984a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.location-zone-button--cancel[b-20blpu984a] {
    border-color: #465266;
    background: #5b687c;
    box-shadow: 0 2px 0 #384354;
}

.location-zone-button--cancel:hover[b-20blpu984a] {
    color: #fff;
    background: #465266;
}

.location-zone-button--save[b-20blpu984a] {
    border-color: #124bb1;
    background: #1d5fd3;
    box-shadow: 0 2px 0 #0d3b8f;
}

.location-zone-button--save:hover[b-20blpu984a] {
    color: #fff;
    background: #154daf;
}

.location-zone-button:disabled[b-20blpu984a] {
    cursor: wait;
    opacity: .7;
}

[b-20blpu984a] .table-toolbar .btn-success:first-child {
    border-color: #118743;
    color: #fff;
    background: #16a34a;
    box-shadow: 0 2px 0 #0d7133;
}

[b-20blpu984a] .table-toolbar .btn-success:first-child:hover {
    background: #118743;
}

@media (max-width: 640px) {
    .location-zone-grid--three[b-20blpu984a] {
        grid-template-columns: 1fr;
    }
}


.location-toolbar-search[b-20blpu984a] {
    position: relative;
    display: flex;
    flex: 1 1 360px;
    max-width: 620px;
    min-width: 240px;
    height: 38px;
    align-items: center;
    margin-left: 6px;
}

.location-toolbar-search > i[b-20blpu984a] {
    position: absolute;
    left: 12px;
    z-index: 1;
    color: #65758e;
    font-size: 13px;
    pointer-events: none;
}

.location-toolbar-search input[b-20blpu984a] {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 35px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #263751;
    background: #fff;
    font-size: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.location-toolbar-search input[b-20blpu984a]::placeholder {
    color: #8b99ad;
}

.location-toolbar-search input:focus[b-20blpu984a] {
    border-color: #5d91e8;
    box-shadow: 0 0 0 3px rgba(36, 104, 232, .11);
}

.location-toolbar-search button[b-20blpu984a] {
    position: absolute;
    right: 7px;
    display: grid;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 6px;
    place-items: center;
    color: #52647c;
    background: #eef2f7;
    font-size: 11px;
}

.location-toolbar-search button:hover[b-20blpu984a] {
    color: #1e2b40;
    background: #dfe6ef;
}

[b-20blpu984a] .table-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
}

[b-20blpu984a] thead .table-filter {
    display: none !important;
}

@media (max-width: 800px) {
    .location-toolbar-search[b-20blpu984a] {
        order: 5;
        flex-basis: 100%;
        max-width: none;
        margin: 4px 0 0;
    }
}


.location-filterbar[b-20blpu984a] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.location-filterbar .location-toolbar-search[b-20blpu984a] {
    flex: 0 1 320px;
    width: 320px;
    min-width: 220px;
    max-width: 360px;
    margin-left: 0;
}

.location-status-select[b-20blpu984a] {
    flex: 0 0 205px;
    width: 205px;
    height: 38px;
    padding: 0 34px 0 12px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    outline: 0;
    color: #34445d;
    background-color: #fff;
    font-size: 12px;
}

.location-status-select:focus[b-20blpu984a] {
    border-color: #5d91e8;
    box-shadow: 0 0 0 3px rgba(36, 104, 232, .11);
}

.location-enable-segment[b-20blpu984a] {
    display: inline-flex;
    height: 38px;
    overflow: hidden;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
}

.location-enable-segment button[b-20blpu984a] {
    min-width: 102px;
    padding: 0 14px;
    border: 0;
    border-right: 1px solid #d7e0eb;
    color: #526176;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
}

.location-enable-segment button:last-child[b-20blpu984a] {
    border-right: 0;
}

.location-enable-segment button:hover[b-20blpu984a] {
    color: #1d5fd3;
    background: #f1f6ff;
}

.location-enable-segment button.active[b-20blpu984a] {
    color: #1d5fd3;
    background: #eaf1ff;
    box-shadow: inset 0 0 0 1px #1d5fd3;
}

.location-filter-reset[b-20blpu984a] {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    place-items: center;
    color: #34445d;
    background: #fff;
}

.location-filter-reset:hover[b-20blpu984a] {
    border-color: #9eb2cc;
    color: #1d5fd3;
    background: #f1f6ff;
}

[b-20blpu984a] .location-filterbar > .btn {
    flex: 0 0 auto;
    min-height: 38px;
    border-radius: 8px;
}

@media (max-width: 1350px) {
    .location-filterbar[b-20blpu984a] {
        flex-wrap: wrap;
    }

    .location-filterbar .location-toolbar-search[b-20blpu984a] {
        flex: 1 1 280px;
        max-width: none;
    }
}

@media (max-width: 760px) {
    .location-filterbar[b-20blpu984a] {
        width: 100%;
    }

    .location-filterbar .location-toolbar-search[b-20blpu984a],
    .location-status-select[b-20blpu984a] {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }

    .location-enable-segment[b-20blpu984a] {
        flex: 1 1 auto;
    }

    .location-enable-segment button[b-20blpu984a] {
        flex: 1 1 0;
        min-width: 0;
    }
}


.location-filterbar-actions[b-20blpu984a],
.location-filterbar-filters[b-20blpu984a] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.location-filterbar-actions[b-20blpu984a] {
    flex: 0 0 auto;
}

.location-filterbar-filters[b-20blpu984a] {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.location-filterbar-divider[b-20blpu984a] {
    flex: 0 0 1px;
    width: 1px;
    height: 30px;
    margin: 0 4px;
    background: #d5deea;
}

.location-filter-label[b-20blpu984a] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: #718198;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.location-filter-label i[b-20blpu984a] {
    color: #2468e8;
}

[b-20blpu984a] .location-filterbar-actions > .btn {
    min-height: 38px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

[b-20blpu984a] .location-filterbar-actions > .btn-success {
    border-color: #118743;
    color: #fff;
    background: #16a34a;
    box-shadow: 0 2px 0 #0d7133;
}

[b-20blpu984a] .location-filterbar-actions > .btn-primary {
    border-color: #1457cf;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 2px 0 #12459f;
}

[b-20blpu984a] .location-filterbar-actions > .btn-secondary {
    border-color: #aeb8c5;
    color: #263346;
    background: #e3e7ec;
    box-shadow: 0 2px 0 #c1c7cf;
}

.location-filterbar-filters .location-toolbar-search[b-20blpu984a] {
    flex: 0 1 285px;
    width: 285px;
    min-width: 190px;
}

.location-filterbar-filters .location-status-select[b-20blpu984a] {
    flex-basis: 180px;
    width: 180px;
}

.location-filterbar-filters .location-enable-segment button[b-20blpu984a] {
    min-width: 88px;
    padding-inline: 11px;
}

@media (max-width: 1450px) {
    .location-filterbar[b-20blpu984a] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .location-filterbar-divider[b-20blpu984a] {
        display: none;
    }

    .location-filterbar-filters[b-20blpu984a] {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid #e1e7ef;
    }
}

@media (max-width: 850px) {
    .location-filterbar-actions[b-20blpu984a] {
        width: 100%;
        flex-wrap: wrap;
    }

    .location-filterbar-filters[b-20blpu984a] {
        flex-wrap: wrap;
    }

    .location-filter-label[b-20blpu984a] {
        flex-basis: 100%;
    }

    .location-filterbar-filters .location-toolbar-search[b-20blpu984a],
    .location-filterbar-filters .location-status-select[b-20blpu984a] {
        flex: 1 1 240px;
        width: auto;
        max-width: none;
    }
}



[b-20blpu984a] thead th:last-child {
    text-align: center;
    color: #20324e;
    background: #fff;
}

[b-20blpu984a] tbody td:last-child {
    background: #fff;
    box-shadow: -5px 0 10px rgba(18, 39, 70, .06);
}

[b-20blpu984a] tbody td:last-child .btn-group,
[b-20blpu984a] tbody td:last-child > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

[b-20blpu984a] tbody td:last-child .btn {
    display: inline-grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    border: 1px solid #cbd9ea;
    border-radius: 7px;
    place-items: center;
    color: #2468e8;
    background: #fff;
    box-shadow: none;
    font-size: 12px;
}

[b-20blpu984a] tbody td:last-child .btn:hover {
    border-color: #8db1ec;
    color: #164fbd;
    background: #f4f8ff;
}

[b-20blpu984a] tbody td:last-child .btn-danger {
    border-color: #efc9ce;
    color: #e44852;
    background: #fff;
}

[b-20blpu984a] tbody td:last-child .btn-danger:hover {
    border-color: #e99aa3;
    color: #c92f3b;
    background: #fff5f6;
}

[b-20blpu984a] tbody td:last-child .btn > span:not(.fa):not(.fas):not(.far):not(.fa-solid):not(.fa-regular) {
    display: none;
}



.location-edit-popup[b-20blpu984a] {
    margin: -1rem;
    color: #14213a;
    background: #f7f9fc;
}

.location-edit-hero[b-20blpu984a] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 17px;
    border-bottom: 1px solid #d9e4f1;
    background: linear-gradient(135deg, #f4f8ff 0%, #edf4ff 100%);
}

.location-edit-hero__icon[b-20blpu984a] {
    display: grid;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #2468e8;
    box-shadow: 0 6px 14px rgba(36, 104, 232, .22);
    font-size: 19px;
}

.location-edit-hero > div[b-20blpu984a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.location-edit-hero small[b-20blpu984a] {
    color: #2468e8;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.location-edit-hero strong[b-20blpu984a] {
    margin: 1px 0;
    color: #10203c;
    font-size: 17px;
}

.location-edit-hero p[b-20blpu984a] {
    margin: 0;
    color: #687a94;
    font-size: 10px;
}

.location-edit-content[b-20blpu984a] {
    padding: 16px 17px 18px;
}

.location-edit-grid[b-20blpu984a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.location-edit-field--wide[b-20blpu984a],
.location-edit-status[b-20blpu984a] {
    grid-column: 1 / -1;
}

.location-edit-field label[b-20blpu984a],
.location-edit-status label[b-20blpu984a] {
    display: block;
    margin-bottom: 6px;
    color: #34445d;
    font-size: 10px;
    font-weight: 700;
}

.location-edit-field label i[b-20blpu984a] {
    width: 15px;
    color: #2468e8;
    text-align: center;
}

[b-20blpu984a] .location-edit-field .form-control,
[b-20blpu984a] .location-edit-field .select {
    min-height: 38px;
    border-color: #cfdaea;
    border-radius: 8px;
    font-size: 11px;
}

[b-20blpu984a] .location-edit-field .form-control:disabled {
    color: #526176;
    background: #edf1f6;
}

.location-edit-status[b-20blpu984a] {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 13px;
    border: 1px solid #d8e2ef;
    border-radius: 9px;
    background: #fff;
}

.location-edit-status label[b-20blpu984a] {
    margin: 0 0 2px;
}

.location-edit-status small[b-20blpu984a] {
    display: block;
    color: #718198;
    font-size: 9px;
}

[b-20blpu984a] .location-edit-status .switch {
    flex: 0 0 auto;
    width: auto;
}

.location-edit-note[b-20blpu984a] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 13px;
    padding: 10px 11px;
    border-radius: 8px;
    color: #52657f;
    background: #edf3fa;
    font-size: 9px;
    line-height: 1.45;
}

.location-edit-note i[b-20blpu984a] {
    margin-top: 2px;
    color: #2468e8;
}

@media (max-width: 540px) {
    .location-edit-grid[b-20blpu984a] {
        grid-template-columns: 1fr;
    }

    .location-edit-field--wide[b-20blpu984a],
    .location-edit-status[b-20blpu984a] {
        grid-column: auto;
    }
}



.location-edit-hero p[b-20blpu984a] {
    color: #53657e;
}

.location-edit-field label[b-20blpu984a],
.location-edit-status label[b-20blpu984a] {
    color: #26364f;
}

.location-edit-status small[b-20blpu984a],
.location-edit-note[b-20blpu984a] {
    color: #526176;
}

[b-20blpu984a] .location-edit-field .form-control,
[b-20blpu984a] .location-edit-field .select,
[b-20blpu984a] .location-edit-field .select .dropdown-toggle,
[b-20blpu984a] .location-edit-field .select input {
    color: #26364f !important;
    background-color: #fff;
    opacity: 1 !important;
}

[b-20blpu984a] .location-edit-field .form-control::placeholder,
[b-20blpu984a] .location-edit-field .select input::placeholder {
    color: #718198 !important;
    opacity: 1;
}

[b-20blpu984a] .location-edit-field .form-control:disabled,
[b-20blpu984a] .location-edit-field .form-control[readonly] {
    color: #42526a !important;
    background-color: #e7edf5 !important;
    border-color: #c5d1e0 !important;
    -webkit-text-fill-color: #42526a;
    opacity: 1 !important;
}

[b-20blpu984a] .location-edit-popup .dropdown-menu {
    border: 1px solid #b9c7d9;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 35, 64, .16);
}

[b-20blpu984a] .location-edit-popup .dropdown-menu .dropdown-item,
[b-20blpu984a] .location-edit-popup .select .dropdown-item {
    min-height: 34px;
    color: #34445d !important;
    background: #fff;
    font-size: 11px;
    font-weight: 500;
    opacity: 1 !important;
}

[b-20blpu984a] .location-edit-popup .dropdown-menu .dropdown-item:hover,
[b-20blpu984a] .location-edit-popup .select .dropdown-item:hover {
    color: #164fbd !important;
    background: #eaf2ff !important;
}

[b-20blpu984a] .location-edit-popup .dropdown-menu .dropdown-item.active,
[b-20blpu984a] .location-edit-popup .dropdown-menu .dropdown-item:active,
[b-20blpu984a] .location-edit-popup .select .dropdown-item.active {
    color: #fff !important;
    background: #2468e8 !important;
    font-weight: 700;
}

[b-20blpu984a] .location-edit-popup .dropdown-menu .dropdown-item.active *,
[b-20blpu984a] .location-edit-popup .select .dropdown-item.active * {
    color: #fff !important;
}



[b-20blpu984a] .location-edit-field .select {
    --bb-select-append-width: 32px;
}

[b-20blpu984a] .location-edit-field .select .form-select {
    padding-right: 58px !important;
}

[b-20blpu984a] .location-edit-field .select .form-select.is-valid:not([multiple]):not([size]),
[b-20blpu984a] .location-edit-field .select .was-validated .form-select:valid:not([multiple]):not([size]) {
    padding-right: 58px !important;
    background-position: right 34px center !important;
    background-size: 14px 14px !important;
}

[b-20blpu984a] .location-edit-field .select .form-select-append {
    right: 0;
    width: 30px;
    color: #34445d;
    background: transparent;
}

[b-20blpu984a] .location-edit-field .select .form-select-append i {
    font-size: 10px;
}



[b-20blpu984a] .location-edit-field .select .form-select.is-valid,
[b-20blpu984a] .location-edit-field .select .form-select.is-invalid,
[b-20blpu984a] .location-edit-field .select .was-validated .form-select:valid,
[b-20blpu984a] .location-edit-field .select .was-validated .form-select:invalid {
    padding-right: 36px !important;
    background-image: none !important;
    background-position: initial !important;
    background-size: initial !important;
}



.location-zone-validation[b-20blpu984a] {
    display: block;
    margin-top: 5px;
    color: #dc3545;
    font-size: 10px;
    font-weight: 600;
}

.location-main-cell[b-20blpu984a] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.location-main-cell__icon[b-20blpu984a] {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid #cfe1f6;
    border-radius: 8px;
    color: #1769d2;
    background: #edf5ff;
}

.location-main-cell > span:last-child[b-20blpu984a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.location-main-cell strong[b-20blpu984a],
.location-main-cell small[b-20blpu984a] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-main-cell strong[b-20blpu984a] { color: #154f91; font-size: 11px; }
.location-main-cell small[b-20blpu984a] { color: #7b8ba0; font-size: 8.5px; }

.location-status-cell[b-20blpu984a] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.location-state[b-20blpu984a],
.location-enable-state[b-20blpu984a],
.location-process[b-20blpu984a],
.location-container[b-20blpu984a] {
    display: inline-flex;
    min-height: 23px;
    padding: 3px 8px;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.location-state.has-product[b-20blpu984a],
.location-enable-state.is-enabled[b-20blpu984a] {
    border: 1px solid #a9e5cd;
    color: #087f5b;
    background: #dcf8eb;
}

.location-state.is-empty[b-20blpu984a],
.location-process[b-20blpu984a] {
    border: 1px solid #d7dee8;
    color: #65758c;
    background: #edf1f6;
}

.location-enable-state.is-disabled[b-20blpu984a] {
    border: 1px solid #f4c7c3;
    color: #b42318;
    background: #fff0ee;
}

.location-operation-cell[b-20blpu984a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.location-operation-cell > small[b-20blpu984a] {
    color: #8a98aa;
    font-size: 8.5px;
}

.location-container[b-20blpu984a] {
    max-width: 100%;
    overflow: hidden;
    border: 1px solid #cfe0f0;
    color: #234f7c;
    background: #edf4fb;
    text-overflow: ellipsis;
}

.location-movement-cell[b-20blpu984a] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.location-movement-cell > span[b-20blpu984a] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: #405b78;
    font-size: 9.5px;
    white-space: nowrap;
}

.location-movement-cell small[b-20blpu984a] {
    color: #8a98aa;
    font-size: 8px;
}

.location-zone-field--invalid > label[b-20blpu984a] {
    color: #b42318;
}

[b-20blpu984a] .location-zone-field--invalid .form-control,
[b-20blpu984a] .location-zone-field--invalid .form-select {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08);
}

[b-20blpu984a] .location-zone-field--invalid .form-control:focus,
[b-20blpu984a] .location-zone-field--invalid .form-select:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .14);
}
/* _content/WMS.UI/Pages/ResourceManagements/Sorting/SortingConfiguration.razor.rz.scp.css */
.sorting-config-page[b-o7f0doytdh] {
    height: 100%;
    min-height: 0;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #172b4d;
    background: #f3f6fa;
}

.sorting-config-header[b-o7f0doytdh] {
    flex: 0 0 auto;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sorting-config-header h1[b-o7f0doytdh] {
    margin: 2px 0;
    font-size: 24px;
}

.sorting-config-header p[b-o7f0doytdh],
.sorting-toolbar p[b-o7f0doytdh] {
    margin: 0;
    color: #73839a;
    font-size: 11px;
}

.sorting-primary-button[b-o7f0doytdh],
.sorting-secondary-button[b-o7f0doytdh],
.sorting-danger-button[b-o7f0doytdh],
.sorting-enable-button[b-o7f0doytdh],
.sorting-danger-confirm[b-o7f0doytdh] {
    min-height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
}

.sorting-primary-button[b-o7f0doytdh] {
    color: #fff;
    background: #1769d2;
    border: 1px solid #1769d2;
    box-shadow: 0 5px 13px rgba(23, 105, 210, .2);
}

.sorting-primary-button:disabled[b-o7f0doytdh],
.sorting-danger-confirm:disabled[b-o7f0doytdh] {
    opacity: .45;
    cursor: not-allowed;
}

.sorting-secondary-button[b-o7f0doytdh] {
    color: #284564;
    background: #fff;
    border: 1px solid #d3deeb;
}

.sorting-danger-button[b-o7f0doytdh] {
    color: #b34242;
    background: #fff6f5;
    border: 1px solid #f2c9c5;
}

.sorting-enable-button[b-o7f0doytdh] {
    color: #087a55;
    background: #edfbf5;
    border: 1px solid #bce8d5;
}

.sorting-summary-grid[b-o7f0doytdh] {
    flex: 0 0 auto;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.sorting-summary-card[b-o7f0doytdh] {
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #dbe5f0;
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(41, 63, 91, .04);
}

.sorting-summary-card > span[b-o7f0doytdh] {
    width: 39px;
    height: 39px;
    display: grid;
    flex: 0 0 39px;
    place-items: center;
    border-radius: 10px;
}

.sorting-summary-card div[b-o7f0doytdh] {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    flex: 1;
}

.sorting-summary-card small[b-o7f0doytdh] {
    color: #708197;
    font-size: 10px;
}

.sorting-summary-card strong[b-o7f0doytdh] {
    color: #142d50;
    font-size: 21px;
    line-height: 1;
}

.sorting-summary-card em[b-o7f0doytdh] {
    grid-column: 1 / -1;
    margin-top: 3px;
    overflow: hidden;
    color: #8996a8;
    font-size: 9px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sorting-summary-card.is-blue > span[b-o7f0doytdh] { color: #1769d2; background: #eaf3ff; }
.sorting-summary-card.is-green > span[b-o7f0doytdh] { color: #0b8d63; background: #e5f8ef; }
.sorting-summary-card.is-orange > span[b-o7f0doytdh] { color: #c56a0a; background: #fff1df; }
.sorting-summary-card.is-violet > span[b-o7f0doytdh] { color: #7454c9; background: #f0ebff; }

.sorting-workspace[b-o7f0doytdh] {
    min-height: 0;
    padding: 12px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e3ef;
    border-radius: 12px;
}

.sorting-toolbar[b-o7f0doytdh] {
    flex: 0 0 auto;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sorting-toolbar h2[b-o7f0doytdh] {
    margin: 0 0 2px;
    font-size: 14px;
}

.sorting-toolbar-controls[b-o7f0doytdh] {
    display: flex;
    gap: 7px;
}

.sorting-search[b-o7f0doytdh] {
    min-width: 280px;
    height: 36px;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #74869b;
    border: 1px solid #d2deeb;
    border-radius: 8px;
}

.sorting-search input[b-o7f0doytdh],
.sorting-toolbar select[b-o7f0doytdh] {
    height: 100%;
    color: #263e5c;
    font-size: 10px;
    background: transparent;
    border: 0;
    outline: none;
}

.sorting-search input[b-o7f0doytdh] { min-width: 0; flex: 1; }
.sorting-toolbar select[b-o7f0doytdh] { min-width: 130px; padding: 0 10px; border: 1px solid #d2deeb; border-radius: 8px; }

.sorting-lane-grid[b-o7f0doytdh] {
    min-height: 0;
    padding-right: 4px;
    padding-bottom: 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    flex: 1 1 auto;
    gap: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.sorting-lane-card[b-o7f0doytdh] {
    min-width: 0;
    align-self: start;
    overflow: hidden;
    background: #fff;
    border: 1px solid #d8e3ef;
    border-radius: 11px;
    box-shadow: 0 4px 14px rgba(30, 59, 91, .05);
}

.sorting-lane-card.has-issue[b-o7f0doytdh] { border-color: #f0b9b3; box-shadow: 0 4px 14px rgba(187, 62, 51, .08); }
.sorting-lane-card.is-disabled[b-o7f0doytdh] { opacity: .73; }

.sorting-lane-card > header[b-o7f0doytdh] {
    padding: 11px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    background: linear-gradient(180deg, #fff, #f8fbff);
    border-bottom: 1px solid #e3ebf4;
}

.sorting-lane-name[b-o7f0doytdh] { min-width: 0; display: flex; align-items: center; gap: 9px; }
.sorting-lane-name > span[b-o7f0doytdh] { width: 34px; height: 34px; display: grid; flex: 0 0 34px; place-items: center; color: #1769d2; background: #eaf3ff; border-radius: 9px; }
.sorting-lane-name div[b-o7f0doytdh] { min-width: 0; display: flex; flex-direction: column; }
.sorting-lane-name small[b-o7f0doytdh] { color: #2b75cc; font-size: 7.5px; font-weight: 800; letter-spacing: .1em; }
.sorting-lane-name strong[b-o7f0doytdh] { color: #15375f; font-size: 14px; }
.sorting-lane-name em[b-o7f0doytdh] { overflow: hidden; color: #718198; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.sorting-state[b-o7f0doytdh] {
    padding: 4px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 8.5px;
    font-weight: 750;
    border-radius: 999px;
}
.sorting-state.is-active[b-o7f0doytdh] { color: #087a55; background: #e6f8ef; border: 1px solid #bee9d5; }
.sorting-state.has-issue[b-o7f0doytdh] { color: #b33e36; background: #fff0ee; border: 1px solid #f2c1bd; }
.sorting-state.is-disabled[b-o7f0doytdh] { color: #68778a; background: #eef1f5; border: 1px solid #dce2e9; }

.sorting-capacity[b-o7f0doytdh] { padding: 11px 12px 9px; }
.sorting-capacity > div:first-child[b-o7f0doytdh] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; }
.sorting-capacity > div:first-child span[b-o7f0doytdh] { color: #657891; }
.sorting-capacity > div:first-child strong[b-o7f0doytdh] { color: #183a62; font-size: 11px; }
.sorting-capacity > small[b-o7f0doytdh] { display: block; margin-top: 4px; color: #8997a8; font-size: 8px; text-align: right; }
.sorting-progress[b-o7f0doytdh] { height: 7px; margin-top: 6px; overflow: hidden; background: #e9eef5; border-radius: 999px; }
.sorting-progress i[b-o7f0doytdh] { height: 100%; display: block; background: linear-gradient(90deg, #1674db, #19b5bb); border-radius: inherit; }

.sorting-assignment[b-o7f0doytdh] { padding: 0 12px 10px; display: grid; gap: 8px; }
.sorting-assignment section[b-o7f0doytdh] { min-width: 0; }
.sorting-assignment label[b-o7f0doytdh] { margin-bottom: 4px; display: block; color: #5e7189; font-size: 8.5px; font-weight: 700; }
.sorting-assignment label i[b-o7f0doytdh] { width: 14px; color: #1769d2; }
.sorting-chip-list[b-o7f0doytdh] { min-height: 23px; display: flex; flex-wrap: wrap; gap: 4px; }
.sorting-chip-list span[b-o7f0doytdh] { padding: 3px 6px; color: #325678; font-size: 8px; font-weight: 650; background: #edf4fb; border: 1px solid #d7e7f6; border-radius: 999px; }
.sorting-chip-list span.is-carrier[b-o7f0doytdh] { color: #7b4c0b; background: #fff4e3; border-color: #f3dfbd; }
.sorting-chip-list span.is-dock[b-o7f0doytdh] { color: #08746f; background: #e8f8f7; border-color: #c4e9e6; }
.sorting-chip-list span.is-backup[b-o7f0doytdh] { color: #6750a4; background: #f2edff; border-color: #ded3fb; }
.sorting-chip-list em[b-o7f0doytdh] { color: #9aa5b3; font-size: 8px; font-style: normal; }

.sorting-lane-meta[b-o7f0doytdh] {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    background: #f7f9fc;
    border-top: 1px solid #e8eef5;
    border-bottom: 1px solid #e8eef5;
}
.sorting-lane-meta span[b-o7f0doytdh] { min-width: 0; display: flex; flex-direction: column; }
.sorting-lane-meta small[b-o7f0doytdh] { color: #8795a7; font-size: 7.5px; }
.sorting-lane-meta strong[b-o7f0doytdh] { overflow: hidden; color: #344e6c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.sorting-lane-card > footer[b-o7f0doytdh] { padding: 9px 12px; display: flex; justify-content: flex-end; gap: 6px; }
.sorting-lane-card > footer button[b-o7f0doytdh] { min-height: 30px; padding: 0 9px; font-size: 9px; }

.sorting-empty[b-o7f0doytdh] { min-height: 260px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #8a98aa; }
.sorting-empty i[b-o7f0doytdh] { margin-bottom: 8px; font-size: 28px; }
.sorting-empty strong[b-o7f0doytdh] { color: #51657d; font-size: 12px; }
.sorting-empty span[b-o7f0doytdh] { margin-top: 3px; font-size: 9px; }

.sorting-modal-backdrop[b-o7f0doytdh] {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(17, 35, 60, .53);
    backdrop-filter: blur(2px);
}

.sorting-side-panel[b-o7f0doytdh] {
    width: min(470px, 94vw);
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: #fff;
    box-shadow: -14px 0 40px rgba(10, 29, 55, .18);
}

.sorting-side-panel > header[b-o7f0doytdh],
.sorting-switch-dialog > header[b-o7f0doytdh] {
    padding: 17px 18px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border-bottom: 1px solid #dce5ef;
}

.sorting-side-panel > header > div[b-o7f0doytdh] { flex: 1; }
.sorting-side-panel > header small[b-o7f0doytdh],
.sorting-switch-dialog > header small[b-o7f0doytdh] { color: #1769d2; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.sorting-side-panel h2[b-o7f0doytdh],
.sorting-switch-dialog h2[b-o7f0doytdh] { margin: 2px 0; color: #183554; font-size: 17px; }
.sorting-side-panel header p[b-o7f0doytdh],
.sorting-switch-dialog header p[b-o7f0doytdh] { margin: 0; color: #78889c; font-size: 9px; }
.sorting-side-panel header button[b-o7f0doytdh],
.sorting-switch-dialog header button[b-o7f0doytdh] { width: 32px; height: 32px; color: #60748d; background: #f1f5f9; border: 0; border-radius: 8px; cursor: pointer; }

.sorting-form[b-o7f0doytdh] {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background: #f7f9fc;
}

.sorting-form-section[b-o7f0doytdh] {
    padding: 12px;
    background: #fff;
    border: 1px solid #dce6f0;
    border-radius: 10px;
}

.sorting-form-section__title[b-o7f0doytdh] {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sorting-form-section__title > i[b-o7f0doytdh] {
    width: 29px;
    height: 29px;
    display: grid;
    flex: 0 0 29px;
    place-items: center;
    color: #1769d2;
    background: #eaf3ff;
    border-radius: 8px;
}

.sorting-form-section__title > span[b-o7f0doytdh] {
    display: flex;
    flex-direction: column;
}

.sorting-form-section__title strong[b-o7f0doytdh] {
    color: #284766;
    font-size: 10.5px;
}

.sorting-form-section__title small[b-o7f0doytdh] {
    color: #8492a4;
    font-size: 8px;
}

.sorting-form-grid[b-o7f0doytdh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sorting-form-grid > label[b-o7f0doytdh] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sorting-form-grid > label.is-wide[b-o7f0doytdh] {
    grid-column: 1 / -1;
}

.sorting-form label > span[b-o7f0doytdh],
.sorting-switch-flow label > span[b-o7f0doytdh] { color: #405874; font-size: 10px; font-weight: 700; }
.sorting-form label b[b-o7f0doytdh],
.sorting-switch-flow label b[b-o7f0doytdh] { color: #d5443d; }
.sorting-form input[type="text"][b-o7f0doytdh],
.sorting-form input[type="number"][b-o7f0doytdh],
.sorting-form select[b-o7f0doytdh],
.sorting-switch-flow select[b-o7f0doytdh] {
    height: 39px;
    padding: 0 10px;
    color: #213d5d;
    font-size: 10px;
    background: #fff;
    border: 1px solid #ccd9e7;
    border-radius: 8px;
    outline: none;
}
.sorting-form label > small[b-o7f0doytdh] { color: #8b98a9; font-size: 8.5px; }
.sorting-form input:focus[b-o7f0doytdh],
.sorting-form select:focus[b-o7f0doytdh] { border-color: #5795dc; box-shadow: 0 0 0 3px rgba(23, 105, 210, .09); }
.sorting-toggle-field[b-o7f0doytdh] { padding: 11px; flex-direction: row !important; align-items: center; justify-content: space-between; background: #f6f9fc; border: 1px solid #e0e8f1; border-radius: 9px; }
.sorting-toggle-field > span[b-o7f0doytdh] { display: flex; flex-direction: column; }
.sorting-toggle-field input[b-o7f0doytdh] { width: 17px; height: 17px; }

.sorting-side-panel > footer[b-o7f0doytdh],
.sorting-switch-dialog > footer[b-o7f0doytdh] { padding: 12px 18px; display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid #dce5ef; }

.sorting-switch-dialog[b-o7f0doytdh] {
    width: min(700px, 94vw);
    margin: auto;
    overflow: hidden;
    background: #fff;
    border-radius: 13px;
    box-shadow: 0 20px 60px rgba(10, 29, 55, .24);
}
.sorting-switch-dialog > header > span[b-o7f0doytdh] { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; color: #c54840; background: #ffedeb; border-radius: 10px; }
.sorting-switch-dialog > header > div[b-o7f0doytdh] { flex: 1; }

.sorting-impact[b-o7f0doytdh] { margin: 14px 18px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sorting-impact div[b-o7f0doytdh] { padding: 10px; display: grid; grid-template-columns: 1fr auto; background: #f5f8fb; border: 1px solid #e0e8f1; border-radius: 8px; }
.sorting-impact small[b-o7f0doytdh] { grid-column: 1 / -1; color: #7a899c; font-size: 8px; }
.sorting-impact strong[b-o7f0doytdh] { color: #1d4169; font-size: 17px; }
.sorting-impact span[b-o7f0doytdh] { align-self: end; color: #7b899a; font-size: 8px; }

.sorting-switch-flow[b-o7f0doytdh] { margin: 12px 18px; padding: 12px; display: grid; grid-template-columns: 140px 28px 1fr; align-items: center; gap: 9px; background: #f8fafc; border: 1px solid #dce6f0; border-radius: 9px; }
.sorting-switch-flow > div[b-o7f0doytdh] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sorting-switch-flow > div small[b-o7f0doytdh] { color: #8492a4; font-size: 8px; }
.sorting-switch-flow > div strong[b-o7f0doytdh] { color: #203f62; font-size: 14px; }
.sorting-switch-flow > i[b-o7f0doytdh] { color: #7590ac; text-align: center; }
.sorting-switch-flow label[b-o7f0doytdh] { min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.sorting-switch-option[b-o7f0doytdh] { margin: 0 18px 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: #f6f9fc; border-radius: 8px; }
.sorting-switch-option input[b-o7f0doytdh] { width: 16px; height: 16px; }
.sorting-switch-option span[b-o7f0doytdh] { display: flex; flex-direction: column; }
.sorting-switch-option strong[b-o7f0doytdh] { color: #405874; font-size: 10px; }
.sorting-switch-option small[b-o7f0doytdh] { color: #8391a3; font-size: 8px; }

.sorting-warning[b-o7f0doytdh] { margin: 0 18px 14px; padding: 9px 11px; color: #8c5d10; font-size: 9px; background: #fff7e8; border: 1px solid #f0dfb9; border-radius: 8px; }
.sorting-warning i[b-o7f0doytdh] { margin-right: 5px; }

.sorting-danger-confirm[b-o7f0doytdh] { color: #fff; background: #c7463f; border: 1px solid #c7463f; }

@media (max-width: 1200px) {
    .sorting-lane-grid[b-o7f0doytdh] { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}

@media (max-width: 850px) {
    .sorting-config-page[b-o7f0doytdh] { padding: 12px; }
    .sorting-summary-grid[b-o7f0doytdh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sorting-toolbar[b-o7f0doytdh] { align-items: stretch; flex-direction: column; }
    .sorting-toolbar-controls[b-o7f0doytdh] { flex-wrap: wrap; }
    .sorting-search[b-o7f0doytdh] { min-width: 220px; flex: 1; }
}

@media (max-width: 620px) {
    .sorting-config-header[b-o7f0doytdh] { align-items: stretch; flex-direction: column; }
    .sorting-lane-grid[b-o7f0doytdh],
    .sorting-summary-grid[b-o7f0doytdh] { grid-template-columns: 1fr; }
    .sorting-switch-flow[b-o7f0doytdh] { grid-template-columns: 1fr; }
    .sorting-switch-flow > i[b-o7f0doytdh] { transform: rotate(90deg); }
    .sorting-impact[b-o7f0doytdh] { grid-template-columns: 1fr; }
    .sorting-form-grid[b-o7f0doytdh] { grid-template-columns: 1fr; }
    .sorting-form-grid > label.is-wide[b-o7f0doytdh] { grid-column: auto; }
    .sorting-lane-meta[b-o7f0doytdh] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* _content/WMS.UI/Pages/ResourceManagements/Workstation/ClearPallet.razor.rz.scp.css */
.clear-pallet-page[b-cqaqbihro0] { min-height: 100%; padding: 16px; color: #172033; background: #f4f7fb; }
.clear-pallet-header[b-cqaqbihro0] { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.clear-pallet-summary[b-cqaqbihro0] { margin: 14px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.clear-pallet-summary article[b-cqaqbihro0] { min-height: 76px; padding: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #dce5f0; border-radius: 12px; background: #fff; }
.clear-pallet-summary article > span[b-cqaqbihro0] { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.clear-pallet-summary .blue[b-cqaqbihro0] { color: #2563eb; background: #dbeafe; }
.clear-pallet-summary .green[b-cqaqbihro0] { color: #059669; background: #d1fae5; }
.clear-pallet-summary .orange[b-cqaqbihro0] { color: #ea580c; background: #ffedd5; }
.clear-pallet-summary .violet[b-cqaqbihro0] { color: #7c3aed; background: #ede9fe; }
.clear-pallet-summary small[b-cqaqbihro0], .clear-pallet-summary strong[b-cqaqbihro0] { display: block; }
.clear-pallet-summary small[b-cqaqbihro0] { color: #64748b; font-size: 10px; }
.clear-pallet-summary strong[b-cqaqbihro0] { color: #0f172a; font-size: 22px; line-height: 1.1; }
.clear-pallet-workspace[b-cqaqbihro0] { border: 1px solid #dce5f0; border-radius: 13px; background: #fff; overflow: hidden; }
.clear-pallet-toolbar[b-cqaqbihro0] { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e2e8f0; }
.clear-pallet-toolbar h2[b-cqaqbihro0], .clear-pallet-toolbar p[b-cqaqbihro0] { margin: 0; }
.clear-pallet-toolbar h2[b-cqaqbihro0] { font-size: 17px; }
.clear-pallet-toolbar p[b-cqaqbihro0] { color: #64748b; font-size: 10px; }
.clear-pallet-toolbar label[b-cqaqbihro0] { width: min(320px, 100%); height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #cbd5e1; border-radius: 9px; color: #64748b; }
.clear-pallet-toolbar input[b-cqaqbihro0] { width: 100%; border: 0; outline: 0; color: #0f172a; background: transparent; font-size: 11px; }
.clear-pallet-message[b-cqaqbihro0] { margin: 12px 16px 0; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: 9px; font-size: 11px; font-weight: 700; }
.clear-pallet-message.success[b-cqaqbihro0] { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.clear-pallet-message.error[b-cqaqbihro0] { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.clear-pallet-group[b-cqaqbihro0] { padding: 16px; }
.clear-pallet-group + .clear-pallet-group[b-cqaqbihro0] { border-top: 1px solid #e2e8f0; }
.clear-pallet-group > header[b-cqaqbihro0] { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.clear-pallet-group > header > span[b-cqaqbihro0] { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #2563eb; background: #dbeafe; }
.clear-pallet-group > header div[b-cqaqbihro0] { flex: 1; }
.clear-pallet-group > header small[b-cqaqbihro0], .clear-pallet-group > header h3[b-cqaqbihro0] { display: block; margin: 0; }
.clear-pallet-group > header small[b-cqaqbihro0] { color: #64748b; font-size: 9px; }
.clear-pallet-group > header h3[b-cqaqbihro0] { font-size: 15px; }
.clear-pallet-group > header em[b-cqaqbihro0] { color: #64748b; font-size: 10px; font-style: normal; }
.clear-pallet-grid[b-cqaqbihro0] { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 12px; }
.clear-pallet-card[b-cqaqbihro0] { display: grid; border: 1px solid #bfdbfe; border-radius: 11px; background: #fff; overflow: hidden; }
.clear-pallet-card.blocked[b-cqaqbihro0] { border-color: #e2e8f0; background: #fafafa; }
.clear-pallet-card > header[b-cqaqbihro0] { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e2e8f0; }
.clear-pallet-card > header > div[b-cqaqbihro0] { display: flex; align-items: center; gap: 9px; }
.clear-pallet-card > header > div > span[b-cqaqbihro0] { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #2563eb; background: #eff6ff; }
.clear-pallet-card > header small[b-cqaqbihro0], .clear-pallet-card > header strong[b-cqaqbihro0] { display: block; }
.clear-pallet-card > header small[b-cqaqbihro0] { color: #64748b; font-size: 8px; }
.clear-pallet-card > header strong[b-cqaqbihro0] { font-size: 14px; }
.clear-pallet-card > header em[b-cqaqbihro0] { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 750; }
.clear-pallet-card > header em.standby[b-cqaqbihro0] { color: #047857; background: #d1fae5; }
.clear-pallet-card > header em.working[b-cqaqbihro0] { color: #b45309; background: #fef3c7; }
.clear-pallet-code[b-cqaqbihro0] { padding: 16px 12px; }
.clear-pallet-code small[b-cqaqbihro0], .clear-pallet-code strong[b-cqaqbihro0] { display: block; }
.clear-pallet-code small[b-cqaqbihro0] { margin-bottom: 4px; color: #64748b; font-size: 9px; }
.clear-pallet-code strong[b-cqaqbihro0] { color: #0f4c91; font-size: 17px; }
.clear-pallet-code strong i[b-cqaqbihro0] { margin-right: 6px; color: #2563eb; }
.clear-pallet-blocker[b-cqaqbihro0] { margin: 0 12px 12px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #fed7aa; border-radius: 8px; color: #9a3412; background: #fff7ed; }
.clear-pallet-blocker small[b-cqaqbihro0], .clear-pallet-blocker strong[b-cqaqbihro0], .clear-pallet-blocker span[b-cqaqbihro0] { display: block; font-size: 9px; }
.clear-pallet-blocker span[b-cqaqbihro0] { color: #c2410c; }
.clear-pallet-card > footer[b-cqaqbihro0] { margin-top: auto; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e2e8f0; }
.clear-pallet-card > footer > span[b-cqaqbihro0] { color: #64748b; font-size: 9px; }
.clear-pallet-btn[b-cqaqbihro0] { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 750; cursor: pointer; }
.clear-pallet-btn.secondary[b-cqaqbihro0] { color: #334155; border-color: #cbd5e1; background: #fff; }
.clear-pallet-btn.danger[b-cqaqbihro0] { color: #fff; background: #ef4444; }
.clear-pallet-btn:disabled[b-cqaqbihro0] { opacity: .45; cursor: not-allowed; }
.clear-pallet-overlay[b-cqaqbihro0] { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; background: rgb(15 23 42 / 58%); }
.clear-pallet-dialog[b-cqaqbihro0] { width: min(420px, 100%); padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 20px 55px rgb(15 23 42 / 30%); text-align: center; }
.dialog-icon[b-cqaqbihro0] { width: 54px; height: 54px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: #dc2626; background: #fee2e2; font-size: 20px; }
.clear-pallet-dialog h2[b-cqaqbihro0] { margin: 0 0 8px; font-size: 19px; }
.clear-pallet-dialog p[b-cqaqbihro0] { margin: 0 0 20px; color: #64748b; font-size: 11px; }
.clear-pallet-dialog > div[b-cqaqbihro0] { display: flex; justify-content: center; gap: 8px; }
@media (max-width: 1100px) { .clear-pallet-summary[b-cqaqbihro0], .clear-pallet-grid[b-cqaqbihro0] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .clear-pallet-page[b-cqaqbihro0] { padding: 10px; } .clear-pallet-header[b-cqaqbihro0], .clear-pallet-toolbar[b-cqaqbihro0] { align-items: stretch; flex-direction: column; } .clear-pallet-summary[b-cqaqbihro0], .clear-pallet-grid[b-cqaqbihro0] { grid-template-columns: 1fr; } }
/* _content/WMS.UI/Pages/ResourceManagements/Workstation/WorkstationConfiguration.razor.rz.scp.css */
.ws-page[b-rjjo5u5h2j] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    background: #f4f7fb;
    color: #10213e;
    overflow: hidden
}

.ws-header[b-rjjo5u5h2j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex: 0 0 auto
}

    .ws-header h1[b-rjjo5u5h2j] {
        margin: 0 0 2px;
        font-size: 28px
    }

    .ws-header p[b-rjjo5u5h2j] {
        margin: 0;
        color: #708099
    }

.wms-page-eyebrow[b-rjjo5u5h2j] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #0967d8
}

[b-rjjo5u5h2j] .ws-btn {
    border: 1px solid #d3deec;
    border-radius: 9px;
    padding: 10px 14px;
    font-weight: 700;
    background: #fff;
    color: #193456;
    cursor: pointer;
    box-shadow: 0 2px 4px #0e2d5414
}

    [b-rjjo5u5h2j] .ws-btn.primary {
        background: #1769db;
        color: #fff;
        border-color: #1769db
    }

    [b-rjjo5u5h2j] .ws-btn:disabled {
        opacity: .65;
        cursor: wait
    }

.ws-summary[b-rjjo5u5h2j] {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    flex: 0 0 auto
}

    .ws-summary article[b-rjjo5u5h2j] {
        min-width: 0;
        height: 74px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border: 1px solid #d7e2ef;
        border-radius: 12px
    }

        .ws-summary article > span[b-rjjo5u5h2j] {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            font-size: 17px
        }

    .ws-summary .blue[b-rjjo5u5h2j] {
        color: #1264cf;
        background: #e8f2ff
    }

    .ws-summary .green[b-rjjo5u5h2j] {
        color: #008c61;
        background: #e1f7ed
    }

    .ws-summary .red[b-rjjo5u5h2j] {
        color: #cf3030;
        background: #feeaea
    }

    .ws-summary .violet[b-rjjo5u5h2j] {
        color: #6e4fd1;
        background: #f0ebff
    }

    .ws-summary article div[b-rjjo5u5h2j] {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: 8px
    }

    .ws-summary small[b-rjjo5u5h2j], .ws-summary em[b-rjjo5u5h2j] {
        font-size: 11px;
        color: #718099;
        font-style: normal
    }

    .ws-summary strong[b-rjjo5u5h2j] {
        grid-row: 1/3;
        grid-column: 2;
        font-size: 22px
    }

    .ws-summary em[b-rjjo5u5h2j] {
        grid-column: 1
    }

.ws-workspace[b-rjjo5u5h2j] {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d5e1ef;
    border-radius: 13px;
    padding: 12px;
    overflow: hidden
}

.ws-toolbar[b-rjjo5u5h2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 0 0 12px
}

    .ws-toolbar h2[b-rjjo5u5h2j] {
        font-size: 17px;
        margin: 0
    }

    .ws-toolbar p[b-rjjo5u5h2j] {
        font-size: 11px;
        color: #718099;
        margin: 2px 0 0
    }

.ws-filters[b-rjjo5u5h2j] {
    display: flex;
    gap: 8px
}

    .ws-filters label[b-rjjo5u5h2j] {
        width: 310px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 11px;
        border: 1px solid #cfdaea;
        border-radius: 9px;
        color: #6a7890
    }

    .ws-filters input[b-rjjo5u5h2j], .ws-filters select[b-rjjo5u5h2j] {
        font: inherit
    }

    .ws-filters input[b-rjjo5u5h2j] {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 9px 0
    }

    .ws-filters select[b-rjjo5u5h2j], .ws-toolbar select[b-rjjo5u5h2j] {
        min-width: 155px;
        border: 1px solid #cfdaea;
        border-radius: 9px;
        padding: 9px;
        background: #fff;
        color: #203858
    }

.ws-message[b-rjjo5u5h2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    padding: 8px 11px;
    margin-bottom: 10px;
    font-size: 12px
}

    .ws-message.success[b-rjjo5u5h2j] {
        color: #087c59;
        background: #e7f8f0
    }

    .ws-message.error[b-rjjo5u5h2j], .ws-validation[b-rjjo5u5h2j] {
        color: #b92b2b;
        background: #fff0f0
    }

.ws-groups[b-rjjo5u5h2j] {
    min-height: 0;
    overflow: auto;
    padding-right: 4px
}

[b-rjjo5u5h2j] .ws-group {
    margin-bottom: 16px;
    border: 1px solid #c9d9eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px #183a6510
}

    [b-rjjo5u5h2j] .ws-group > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 58px;
        padding: 11px 14px 11px 16px;
        background: linear-gradient(90deg,#eaf3ff 0%,#f5f9ff 58%,#eef5fd 100%);
        border-bottom: 1px solid #bdd2e9;
        box-shadow: inset 4px 0 0 #1769db
    }

        [b-rjjo5u5h2j] .ws-group > header > div {
            display: flex;
            align-items: center;
            gap: 9px
        }

[b-rjjo5u5h2j] .ws-group-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid #c2d9f5;
    border-radius: 10px;
    background: #fff;
    color: #1169d7;
    box-shadow: 0 2px 5px #174d8612
}

[b-rjjo5u5h2j] .ws-group small, [b-rjjo5u5h2j] .ws-name small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 800;
    color: #1670d8
}

[b-rjjo5u5h2j] .ws-group > header small {
    font-size: 9.5px;
    letter-spacing: 1.2px;
    color: #1766bd
}

[b-rjjo5u5h2j] .ws-group h3 {
    font-size: 16px;
    line-height: 1.3;
    margin: 2px 0 0;
    font-weight: 800;
    color: #102f55
}

[b-rjjo5u5h2j] .ws-group > header > span {
    font-size: 11px;
    font-weight: 700;
    color: #155ba5;
    background: #fff;
    border: 1px solid #bfd5ee;
    border-radius: 16px;
    padding: 5px 11px;
    box-shadow: 0 1px 3px #153b6710
}

[b-rjjo5u5h2j] .ws-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    padding: 10px;
    background: #fbfcfe
}

[b-rjjo5u5h2j] .ws-card {
    min-width: 0;
    border: 1px solid #d4e0ee;
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 3px 9px #17375d0b
}

    [b-rjjo5u5h2j] .ws-card.disabled {
        opacity: .74
    }

    [b-rjjo5u5h2j] .ws-card > header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 11px;
        border-bottom: 1px solid #e1e8f1
    }

[b-rjjo5u5h2j] .ws-name {
    display: flex;
    align-items: center;
    gap: 9px
}

    [b-rjjo5u5h2j] .ws-name > span {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: #eaf3ff;
        color: #146ad5
    }

    [b-rjjo5u5h2j] .ws-name strong {
        display: block;
        font-size: 15px;
        margin-top: 2px
    }

[b-rjjo5u5h2j] .ws-state {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 14px;
    padding: 4px 7px;
    white-space: nowrap
}

    [b-rjjo5u5h2j] .ws-state.active {
        color: #087b57;
        background: #e4f7ee;
        border: 1px solid #b5e8d1
    }

    [b-rjjo5u5h2j] .ws-state.inactive {
        color: #a13d3d;
        background: #fff0f0;
        border: 1px solid #f1c5c5
    }

[b-rjjo5u5h2j] .ws-type {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 11px
}

    [b-rjjo5u5h2j] .ws-type small {
        color: #718099
    }

    [b-rjjo5u5h2j] .ws-type strong {
        font-size: 12px;
        padding: 4px 8px;
        color: #075aaa;
        background: #e9f3ff;
        border-radius: 12px
    }

    [b-rjjo5u5h2j] .ws-type em {
        margin-left: auto;
        font-size: 9px;
        color: #b16b00;
        font-style: normal
    }

[b-rjjo5u5h2j] .ws-runtime {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px;
    margin: 0 11px 9px
}

    [b-rjjo5u5h2j] .ws-runtime > div {
        min-width: 0;
        padding: 8px 9px;
        border: 1px solid #e0e8f2;
        border-radius: 8px;
        background: #f8fafd
    }

    [b-rjjo5u5h2j] .ws-runtime small {
        display: block;
        margin-bottom: 5px;
        font-size: 9px;
        color: #78879a
    }

    [b-rjjo5u5h2j] .ws-runtime strong {
        display: block;
        overflow: hidden;
        color: #173657;
        font-size: 10px;
        white-space: nowrap;
        text-overflow: ellipsis
    }

        [b-rjjo5u5h2j] .ws-runtime strong i {
            margin-right: 4px;
            color: #176bd2
        }

        [b-rjjo5u5h2j] .ws-runtime strong.muted {
            color: #8795a7;
            font-weight: 600
        }

    [b-rjjo5u5h2j] .ws-runtime em {
        display: block;
        margin-top: 3px;
        overflow: hidden;
        color: #75849a;
        font-size: 9px;
        font-style: normal;
        white-space: nowrap;
        text-overflow: ellipsis
    }

[b-rjjo5u5h2j] .ws-step {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap
}

    [b-rjjo5u5h2j] .ws-step.working {
        color: #075eb6;
        background: #e8f3ff;
        border-color: #bbdaf9
    }

    [b-rjjo5u5h2j] .ws-step.waiting {
        color: #946000;
        background: #fff5db;
        border-color: #f3d897
    }

    [b-rjjo5u5h2j] .ws-step.complete {
        color: #087a58;
        background: #e4f7ee;
        border-color: #b9e5d1
    }

    [b-rjjo5u5h2j] .ws-step.danger {
        color: #b52f2f;
        background: #ffeded;
        border-color: #f2bcbc
    }

[b-rjjo5u5h2j] .ws-client {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 11px 10px;
    padding: 9px;
    border-radius: 8px;
    background: #f1f5fa;
    color: #1768cd;
    min-width: 0
}

    [b-rjjo5u5h2j] .ws-client.empty {
        color: #8190a5
    }

    [b-rjjo5u5h2j] .ws-client div {
        min-width: 0
    }

    [b-rjjo5u5h2j] .ws-client small {
        display: block;
        font-size: 9px;
        color: #7b899b
    }

    [b-rjjo5u5h2j] .ws-client strong {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

[b-rjjo5u5h2j] .ws-card > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 11px;
    background: #fafcff;
    border-top: 1px solid #e1e8f1
}

    [b-rjjo5u5h2j] .ws-card > footer > span {
        font-size: 9px;
        color: #76869b
    }

    [b-rjjo5u5h2j] .ws-card > footer .ws-btn {
        padding: 7px 9px;
        font-size: 10px
    }

[b-rjjo5u5h2j] .ws-empty {
    height: 180px;
    display: grid;
    place-content: center;
    text-align: center;
    color: #8b98aa
}

    [b-rjjo5u5h2j] .ws-empty i {
        font-size: 28px;
        margin-bottom: 7px
    }

    [b-rjjo5u5h2j] .ws-empty span {
        font-size: 11px;
        margin-top: 3px
    }

.ws-overlay[b-rjjo5u5h2j] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: #0d1c3370;
    display: flex;
    justify-content: flex-end
}

.ws-editor[b-rjjo5u5h2j] {
    width: min(500px,94vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f7f9fc;
    box-shadow: -12px 0 36px #07172e30
}

    .ws-editor > header[b-rjjo5u5h2j] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px;
        background: #fff;
        border-bottom: 1px solid #d8e2ee
    }

        .ws-editor > header small[b-rjjo5u5h2j] {
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 1.4px;
            color: #1470db
        }

        .ws-editor > header h2[b-rjjo5u5h2j] {
            margin: 2px 0;
            font-size: 23px
        }

        .ws-editor > header p[b-rjjo5u5h2j] {
            margin: 0;
            font-size: 11px;
            color: #78869a
        }

        .ws-editor > header button[b-rjjo5u5h2j] {
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 9px;
            background: #f0f4f8;
            color: #45617e;
            cursor: pointer
        }

.ws-editor-body[b-rjjo5u5h2j] {
    flex: 1;
    overflow: auto;
    padding: 14px
}

    .ws-editor-body section[b-rjjo5u5h2j] {
        background: #fff;
        border: 1px solid #d8e2ee;
        border-radius: 11px;
        padding: 14px;
        margin-bottom: 12px
    }

    .ws-editor-body h3[b-rjjo5u5h2j] {
        font-size: 14px;
        margin: 0 0 12px
    }

        .ws-editor-body h3 i[b-rjjo5u5h2j] {
            color: #1670d8;
            margin-right: 6px
        }

    .ws-editor-body label[b-rjjo5u5h2j] {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #435672
    }

    .ws-editor-body select[b-rjjo5u5h2j], .ws-guid-input[b-rjjo5u5h2j] {
        width: 100%;
        margin-top: 6px;
        border: 1px solid #cbd8e8;
        border-radius: 9px;
        background: #fff
    }

    .ws-editor-body select[b-rjjo5u5h2j] {
        padding: 10px;
        color: #162e4e
    }

.ws-guid-input[b-rjjo5u5h2j] {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    color: #6e7e94
}

    .ws-guid-input input[b-rjjo5u5h2j] {
        width: 100%;
        border: 0;
        outline: 0;
        padding: 10px 8px;
        font-family: monospace
    }

.ws-switch-row[b-rjjo5u5h2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
    padding: 11px;
    background: #f5f8fc;
    border-radius: 9px
}

    .ws-switch-row strong[b-rjjo5u5h2j], .ws-switch-row small[b-rjjo5u5h2j] {
        display: block
    }

    .ws-switch-row strong[b-rjjo5u5h2j] {
        font-size: 12px
    }

    .ws-switch-row small[b-rjjo5u5h2j], .ws-help[b-rjjo5u5h2j] {
        font-size: 10px;
        color: #78879b;
        margin: 3px 0 0
    }

.ws-switch[b-rjjo5u5h2j] {
    position: relative
}

    .ws-switch input[b-rjjo5u5h2j] {
        position: absolute;
        opacity: 0
    }

    .ws-switch span[b-rjjo5u5h2j] {
        display: block;
        width: 42px;
        height: 23px;
        border-radius: 20px;
        background: #bcc7d4;
        cursor: pointer;
        transition: .2s
    }

        .ws-switch span[b-rjjo5u5h2j]:after {
            content: "";
            display: block;
            width: 17px;
            height: 17px;
            margin: 3px;
            border-radius: 50%;
            background: #fff;
            transition: .2s
        }

    .ws-switch input:checked + span[b-rjjo5u5h2j] {
        background: #15956e
    }

        .ws-switch input:checked + span[b-rjjo5u5h2j]:after {
            transform: translateX(19px)
        }

.ws-validation[b-rjjo5u5h2j] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px;
    padding: 8px;
    border-radius: 7px;
    font-size: 10px
}

.ws-link-danger[b-rjjo5u5h2j] {
    margin-top: 11px;
    border: 0;
    background: none;
    color: #c13e3e;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer
}

.ws-editor > footer[b-rjjo5u5h2j] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px;
    background: #fff;
    border-top: 1px solid #d8e2ee
}

@media(max-width:1500px) {
    [b-rjjo5u5h2j] .ws-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}

@media(max-width:1150px) {
    [b-rjjo5u5h2j] .ws-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media(max-width:900px) {
    .ws-page[b-rjjo5u5h2j] {
        height: auto;
        min-height: 100%;
        overflow: auto
    }

    .ws-summary[b-rjjo5u5h2j] {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .ws-toolbar[b-rjjo5u5h2j] {
        align-items: stretch;
        flex-direction: column
    }

    .ws-filters label[b-rjjo5u5h2j] {
        width: auto
    }

    [b-rjjo5u5h2j] .ws-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:620px) {
    .ws-summary[b-rjjo5u5h2j] {
        grid-template-columns: 1fr
    }

    .ws-filters[b-rjjo5u5h2j] {
        flex-direction: column
    }

    .ws-header[b-rjjo5u5h2j] {
        flex-direction: column
    }

        .ws-header[b-rjjo5u5h2j]  .ws-btn {
            align-self: flex-end
        }
}

.ws-overlay[hidden][b-rjjo5u5h2j], .ws-validation[hidden][b-rjjo5u5h2j] { display: none; }
/* _content/WMS.UI/Pages/Settings/APIConfig.razor.rz.scp.css */
.api-config-page[b-jsxnqw8shx] {
    height: 100%;/* calc(100vh - 7.2rem);*/
    min-height: 520px;
    padding: 24px;
    background: #f4f7fb;
    color: #102344;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    gap: 18px
}

.page-header[b-jsxnqw8shx] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px
}

.eyebrow[b-jsxnqw8shx] {
    display: block;
    color: #0866d9;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 5px
}

.page-header h1[b-jsxnqw8shx] {
    font-size: 1.7rem;
    line-height: 1.15;
    margin: 0 0 5px;
    font-weight: 800
}

.page-header p[b-jsxnqw8shx], .panel-header p[b-jsxnqw8shx] {
    color: #6a7d99;
    margin: 0
}

.secondary-button[b-jsxnqw8shx], .primary-button[b-jsxnqw8shx] {
    border: 1px solid #d4e0ef;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 700;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #355273;
    white-space: nowrap
}

.primary-button[b-jsxnqw8shx] {
    background: #1268cb;
    border-color: #1268cb;
    color: #fff;
    box-shadow: 0 6px 14px rgba(18,104,203,.18)
}

.system-tabs[b-jsxnqw8shx] {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px
}

.system-tab[b-jsxnqw8shx] {
    border: 1px solid #d7e2f0;
    border-radius: 14px;
    background: #fff;
    padding: 13px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 11px;
    text-align: left;
    color: #294562;
    transition: .18s
}

    .system-tab:hover[b-jsxnqw8shx] {
        border-color: #83b7ee;
        transform: translateY(-1px)
    }

    .system-tab.active[b-jsxnqw8shx] {
        border-color: #1472d8;
        background: #eef6ff;
        box-shadow: 0 0 0 2px rgba(20,114,216,.08)
    }

.tab-icon[b-jsxnqw8shx], .panel-icon[b-jsxnqw8shx] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf3ff;
    color: #0872de;
    display: grid;
    place-items: center
}

.system-tab strong[b-jsxnqw8shx], .system-tab small[b-jsxnqw8shx] {
    display: block
}

.system-tab strong[b-jsxnqw8shx] {
    font-size: .93rem
}

.system-tab small[b-jsxnqw8shx] {
    font-size: .73rem;
    color: #7487a1;
    margin-top: 2px
}

.tab-arrow[b-jsxnqw8shx] {
    color: #9babc0
}

.config-panel[b-jsxnqw8shx] {
    min-height: 0;
    border: 1px solid #d5e1ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30,69,110,.07);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden
}

.panel-header[b-jsxnqw8shx] {
    padding: 16px 18px;
    border-bottom: 1px solid #e2e9f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.panel-title[b-jsxnqw8shx] {
    display: flex;
    align-items: center;
    gap: 12px
}

    .panel-title h2[b-jsxnqw8shx] {
        font-size: 1.15rem;
        margin: 0 0 3px
    }

.status-pill[b-jsxnqw8shx] {
    border: 1px solid #b9e9d4;
    background: #edf9f4;
    color: #07814f;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .75rem;
    font-weight: 700
}

.panel-scroll[b-jsxnqw8shx] {
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px
}

.field-group[b-jsxnqw8shx] {
    border: 1px solid #dce6f2;
    border-radius: 13px;
    margin-bottom: 14px;
    overflow: hidden
}

.group-heading[b-jsxnqw8shx] {
    padding: 11px 14px;
    background: #f3f7fc;
    border-bottom: 1px solid #dce6f2;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .group-heading h3[b-jsxnqw8shx] {
        font-size: .88rem;
        margin: 0;
        color: #193d67
    }

    .group-heading span[b-jsxnqw8shx] {
        font-size: .72rem;
        color: #71849e
    }

.fields-grid[b-jsxnqw8shx] {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    padding: 14px
}

.ungrouped-field[b-jsxnqw8shx] {
    width: calc(50% - 7px);
    display: inline-block;
    padding: 0 7px 14px 0;
    vertical-align: top
}

.config-field[b-jsxnqw8shx] {
    display: block;
    min-width: 0
}

.field-label[b-jsxnqw8shx] {
    display: block;
    color: #526984;
    font-weight: 700;
    font-size: .74rem;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.input-shell[b-jsxnqw8shx] {
    height: 40px;
    border: 1px solid #cfdbeb;
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 11px;
    gap: 9px
}

    .input-shell:focus-within[b-jsxnqw8shx] {
        border-color: #247bd4;
        box-shadow: 0 0 0 3px rgba(36,123,212,.1)
    }

    .input-shell > i[b-jsxnqw8shx] {
        width: 15px;
        color: #8ca0b9;
        text-align: center
    }

    .input-shell input[type=text][b-jsxnqw8shx], .input-shell input[type=password][b-jsxnqw8shx] {
        min-width: 0;
        flex: 1;
        border: 0;
        outline: 0;
        background: transparent;
        color: #253d5b;
        font-size: .8rem
    }

.reveal-button[b-jsxnqw8shx] {
    border: 0;
    background: transparent;
    color: #67809d;
    padding: 5px
}

.switch[b-jsxnqw8shx] {
    margin-left: auto
}

    .switch input[b-jsxnqw8shx] {
        display: none
    }

    .switch span[b-jsxnqw8shx] {
        display: block;
        width: 40px;
        height: 22px;
        background: #c8d3e1;
        border-radius: 99px;
        position: relative
    }

        .switch span[b-jsxnqw8shx]:after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 3px;
            top: 3px;
            border-radius: 50%;
            background: #fff;
            transition: .2s
        }

    .switch input:checked + span[b-jsxnqw8shx] {
        background: #1672d5
    }

        .switch input:checked + span[b-jsxnqw8shx]:after {
            transform: translateX(18px)
        }

.panel-footer[b-jsxnqw8shx] {
    padding: 12px 18px;
    border-top: 1px solid #e2e9f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fafcff;
    color: #6d809a;
    font-size: .75rem
}

.empty-state[b-jsxnqw8shx], .loading-state[b-jsxnqw8shx] {
    border: 1px dashed #c8d7e8;
    border-radius: 14px;
    background: #fff;
    display: grid;
    place-items: center;
    color: #71849d;
    min-height: 200px
}

.panel-scroll[b-jsxnqw8shx] {
    scrollbar-width: thin;
    scrollbar-color: #aabbd0 transparent
}

@media(max-width:900px) {
    .api-config-page[b-jsxnqw8shx] {
        height: auto;
        min-height: calc(100vh - 5rem);
        overflow: visible;
        padding: 16px;
        grid-template-rows: auto auto auto
    }

    .system-tabs[b-jsxnqw8shx] {
        grid-template-columns: 1fr
    }

    .system-tab[b-jsxnqw8shx] {
        padding: 10px
    }

    .config-panel[b-jsxnqw8shx] {
        max-height: none;
        overflow: visible
    }

    .panel-scroll[b-jsxnqw8shx] {
        overflow: visible
    }

    .fields-grid[b-jsxnqw8shx] {
        grid-template-columns: 1fr
    }

    .ungrouped-field[b-jsxnqw8shx] {
        width: 100%;
        padding-right: 0
    }

    .panel-footer[b-jsxnqw8shx] {
        position: sticky;
        bottom: 0
    }

    .status-pill[b-jsxnqw8shx] {
        display: none
    }
}

@media(max-width:576px) {
    .api-config-page[b-jsxnqw8shx] {
        padding: 14px 10px;
        gap: 14px
    }

    .page-header[b-jsxnqw8shx] {
        align-items: stretch;
        flex-direction: column
    }

        .page-header h1[b-jsxnqw8shx] {
            font-size: 1.4rem
        }

    .secondary-button[b-jsxnqw8shx] {
        width: 100%
    }

    .system-tabs[b-jsxnqw8shx] {
        display: flex;
        overflow-x: auto;
        padding-bottom: 3px
    }

    .system-tab[b-jsxnqw8shx] {
        min-width: 210px
    }

    .panel-header[b-jsxnqw8shx] {
        align-items: flex-start
    }

    .panel-title p[b-jsxnqw8shx] {
        font-size: .75rem
    }

    .panel-footer[b-jsxnqw8shx] {
        flex-direction: column;
        align-items: stretch
    }

        .panel-footer > span[b-jsxnqw8shx] {
            display: none
        }

    .primary-button[b-jsxnqw8shx] {
        width: 100%
    }

    .fields-grid[b-jsxnqw8shx], .panel-scroll[b-jsxnqw8shx] {
        padding: 12px
    }

    .group-heading[b-jsxnqw8shx] {
        padding: 10px 12px
    }
}
/* _content/WMS.UI/Pages/Settings/WcsSimulator.razor.rz.scp.css */
.wcs-simulator[b-jdh08nh3p0]{padding:18px;min-height:calc(100vh - 125px);background:#f4f7fb;color:#10213d}.sim-header[b-jdh08nh3p0]{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.eyebrow[b-jdh08nh3p0],.card-title small[b-jdh08nh3p0]{font-size:10px;font-weight:800;letter-spacing:.14em;color:#1768d3}.sim-header h1[b-jdh08nh3p0]{font-size:25px;margin:3px 0}.sim-header p[b-jdh08nh3p0]{margin:0;color:#64748b}.dev-badge[b-jdh08nh3p0]{padding:8px 12px;border-radius:10px;background:#e8f1ff;color:#1768d3;font-weight:700}.warning[b-jdh08nh3p0]{display:flex;gap:9px;align-items:center;padding:10px 13px;border:1px solid #f6d78b;border-radius:10px;background:#fff9e8;color:#805b05;margin-bottom:12px}.operation-tabs[b-jdh08nh3p0]{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.operation-tabs button[b-jdh08nh3p0]{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border:1px solid #d7e1ef;border-radius:10px;background:#fff;color:#50627b;font-weight:700}.operation-tabs button.active[b-jdh08nh3p0]{background:#1768d3;color:#fff;border-color:#1768d3;box-shadow:0 5px 14px #1768d333}.sim-grid[b-jdh08nh3p0]{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(420px,1.1fr);gap:12px}.request-card[b-jdh08nh3p0],.response-card[b-jdh08nh3p0]{background:#fff;border:1px solid #d8e2ef;border-radius:14px;padding:16px;box-shadow:0 5px 18px #31547a12}.card-title[b-jdh08nh3p0]{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5ebf3;padding-bottom:11px;margin-bottom:13px}.card-title h2[b-jdh08nh3p0]{font-size:16px;margin:2px 0 0}.card-title>span[b-jdh08nh3p0]{font-size:11px;padding:5px 8px;border-radius:7px;background:#e7f7ef;color:#07894f;font-weight:800}.card-title .time[b-jdh08nh3p0]{background:#edf3fc;color:#4f6582}.request-card label[b-jdh08nh3p0]{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;color:#40536e;font-size:12px;font-weight:700}.request-card input[b-jdh08nh3p0],.request-card textarea[b-jdh08nh3p0]{width:100%;border:1px solid #cfdaea;border-radius:9px;padding:9px 11px;color:#10213d;background:#fbfdff;outline:none}.request-card input:focus[b-jdh08nh3p0],.request-card textarea:focus[b-jdh08nh3p0]{border-color:#1768d3;box-shadow:0 0 0 3px #1768d31a}.field-row[b-jdh08nh3p0]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actions[b-jdh08nh3p0]{display:flex;justify-content:flex-end;gap:8px;margin-top:5px}.actions button[b-jdh08nh3p0]{height:38px;border-radius:9px;padding:0 15px;font-weight:700;border:1px solid #d7e1ef}.actions .secondary[b-jdh08nh3p0]{background:#fff;color:#50627b}.actions .primary[b-jdh08nh3p0]{background:#1768d3;color:#fff;border-color:#1768d3}.json-block[b-jdh08nh3p0]{border:1px solid #d8e2ef;border-radius:10px;overflow:hidden;margin-bottom:10px}.json-block>div[b-jdh08nh3p0]{display:flex;justify-content:space-between;padding:8px 11px;background:#edf3fb;color:#536883;font-size:10px;font-weight:800;letter-spacing:.08em}.json-block button[b-jdh08nh3p0]{border:0;background:transparent}.json-block pre[b-jdh08nh3p0]{height:170px;margin:0;padding:12px;overflow:auto;background:#0f1c2e;color:#c9dcf4;font-size:11px;white-space:pre-wrap}.json-block.response pre[b-jdh08nh3p0]{height:220px;color:#a8efc5}@media(max-width:900px){.sim-grid[b-jdh08nh3p0]{grid-template-columns:1fr}.operation-tabs[b-jdh08nh3p0]{grid-template-columns:1fr 1fr}.json-block pre[b-jdh08nh3p0]{height:150px}}@media(max-width:560px){.wcs-simulator[b-jdh08nh3p0]{padding:10px}.sim-header[b-jdh08nh3p0]{align-items:flex-start}.dev-badge[b-jdh08nh3p0]{font-size:10px}.operation-tabs[b-jdh08nh3p0]{grid-template-columns:1fr}.field-row[b-jdh08nh3p0]{grid-template-columns:1fr}.sim-header h1[b-jdh08nh3p0]{font-size:21px}}
/* _content/WMS.UI/Pages/TaskManage/ASRS.razor.rz.scp.css */
.ess-page[b-x2aayhwdlb]{--ess-primary:#6554c0;--ess-border:#d8e3f0;height:100%;min-height:500px;padding:18px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;overflow:hidden;background:#f4f7fb;color:#10233f}.ess-page[b-x2aayhwdlb],.ess-page>*[b-x2aayhwdlb]{min-width:0;max-width:100%}.ess-page-header[b-x2aayhwdlb]{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.ess-eyebrow[b-x2aayhwdlb]{display:block;margin-bottom:2px;color:var(--ess-primary);font-size:9px;font-weight:850;letter-spacing:.14em}.ess-page-header h1[b-x2aayhwdlb]{margin:0;color:#101f38;font-size:24px;font-weight:800;line-height:1.12}.ess-page-header p[b-x2aayhwdlb]{margin:3px 0 0;color:#71839b;font-size:11px}.ess-refresh-button[b-x2aayhwdlb]{height:38px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cfdaea;border-radius:9px;background:#fff;color:#36516e;box-shadow:0 2px 8px rgba(25,55,88,.05);font-size:11px;font-weight:750}.ess-refresh-button:hover[b-x2aayhwdlb]{border-color:#84b7ee;color:#1268c5;background:#f5faff}.ess-summary-grid[b-x2aayhwdlb]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ess-summary-card[b-x2aayhwdlb]{height:68px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--ess-border);border-radius:11px;background:#fff;box-shadow:0 3px 12px rgba(20,50,84,.04)}.ess-summary-icon[b-x2aayhwdlb]{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:10px;font-size:15px}.ess-summary-card span[b-x2aayhwdlb]{display:block;color:#74859b;font-size:9px}.ess-summary-card strong[b-x2aayhwdlb]{display:block;color:#172a45;font-size:21px;font-weight:800;line-height:1}.ess-summary-card.total .ess-summary-icon[b-x2aayhwdlb]{color:#176dcb;background:#e8f2ff}.ess-summary-card.pending .ess-summary-icon[b-x2aayhwdlb]{color:#c17600;background:#fff3d8}.ess-summary-card.processing .ess-summary-icon[b-x2aayhwdlb]{color:#087c96;background:#ddf7fb}.ess-summary-card.error .ess-summary-icon[b-x2aayhwdlb]{color:#d13232;background:#ffe8e8}.ess-summary-card.pending strong[b-x2aayhwdlb]{color:#b26b00}.ess-summary-card.processing strong[b-x2aayhwdlb]{color:#087c96}.ess-summary-card.error strong[b-x2aayhwdlb]{color:#d13232}.ess-table-card[b-x2aayhwdlb]{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ess-border);border-radius:13px;background:#fff;box-shadow:0 7px 22px rgba(20,50,84,.05)}.task-status[b-x2aayhwdlb]{width:fit-content;min-height:22px;padding:3px 7px;display:inline-flex;align-items:center;gap:4px;border-radius:99px;font-size:9px;font-weight:750;white-space:nowrap}.task-status.is-pending[b-x2aayhwdlb]{color:#945c00;background:#fff2ce}.task-status.is-processing[b-x2aayhwdlb]{color:#08758c;background:#daf5fa}.task-status.is-error[b-x2aayhwdlb]{color:#b92525;background:#ffe2e2}.task-status.is-complete[b-x2aayhwdlb]{color:#057650;background:#dcf7ea}.task-status.is-cancelled[b-x2aayhwdlb]{color:#526277;background:#e8edf3}.task-status.is-info[b-x2aayhwdlb]{color:#175fb4;background:#e4f0ff}.ess-table-card[b-x2aayhwdlb] >.table{min-height:0;flex:1;border:0!important}.ess-table-card[b-x2aayhwdlb]  .table-container{height:100%;min-height:0;padding:0 10px 8px;display:flex;flex-direction:column;overflow:hidden}.ess-table-card[b-x2aayhwdlb]  .table-toolbar{min-height:50px;padding:7px 0!important;display:flex;align-items:center;gap:6px;border-bottom:1px solid #e8eef5;background:#fff}.ess-table-card[b-x2aayhwdlb]  .table-toolbar .form-control{height:34px!important;border-radius:8px!important;font-size:10px!important}.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn{height:32px!important;min-height:32px!important;padding:0 9px!important;border-radius:7px!important;font-size:9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.ess-table-card[b-x2aayhwdlb]  .table-wrapper{min-height:0;flex:1;overflow:hidden;border-radius:8px}.ess-table-card[b-x2aayhwdlb]  .table-fixed-body{min-height:0;overflow:auto!important;overscroll-behavior:contain}.ess-table-card[b-x2aayhwdlb]  .table-fixed-header>table,.ess-table-card[b-x2aayhwdlb]  .table-fixed-body>table{min-width:1050px}.ess-table-card[b-x2aayhwdlb]  .table-header{height:34px;color:#fff!important;background:#276cba!important;font-size:9px!important;font-weight:800}.ess-table-card[b-x2aayhwdlb]  .table-cell{height:34px!important;padding:4px 7px!important;border-color:#e7edf4!important;vertical-align:middle!important;font-size:9.5px!important}.ess-table-card[b-x2aayhwdlb]  .table-row:hover{background:#f4f8fd!important}.ess-table-card[b-x2aayhwdlb]  .pagination{min-height:42px;margin:0!important;padding:6px 0 0;border-top:1px solid #e8eef5;overflow-x:auto}.ess-table-card[b-x2aayhwdlb]  .page-link{min-width:29px;height:29px;padding:0 7px;font-size:9px;display:grid;place-items:center}.ess-table-card[b-x2aayhwdlb]  .ess-row-action.btn{width:auto;height:27px!important;min-height:27px!important;padding:0 7px!important;border:0!important;border-radius:7px!important;font-size:9px!important}.ess-table-card[b-x2aayhwdlb]  .ess-row-action.resend{color:#09628d!important;background:#e0f3ff!important}.ess-table-card[b-x2aayhwdlb]  .ess-row-action.cancel{color:#b32626!important;background:#ffe5e5!important}.ess-table-card[b-x2aayhwdlb]  .table-sub{padding:8px;background:#f5f8fc}.ess-table-card[b-x2aayhwdlb]  .table-sub>.table{border:1px solid #dbe5f0!important;border-radius:8px;background:#fff}@media(max-width:900px){.ess-page[b-x2aayhwdlb]{height:auto;min-height:calc(100vh - 5rem);overflow:visible;grid-template-rows:auto auto auto}.ess-summary-grid[b-x2aayhwdlb]{grid-template-columns:repeat(2,minmax(0,1fr))}.ess-table-card[b-x2aayhwdlb]{height:620px}}@media(max-width:576px){.ess-page[b-x2aayhwdlb]{padding:12px;gap:9px}.ess-page-header[b-x2aayhwdlb]{align-items:flex-start}.ess-page-header h1[b-x2aayhwdlb]{font-size:20px}.ess-page-header p[b-x2aayhwdlb]{display:none}.ess-refresh-button[b-x2aayhwdlb]{width:38px;padding:0}.ess-refresh-button span[b-x2aayhwdlb]{display:none}.ess-summary-grid[b-x2aayhwdlb]{gap:7px}.ess-summary-card[b-x2aayhwdlb]{height:60px;padding:8px}.ess-summary-icon[b-x2aayhwdlb]{width:32px;height:32px;flex-basis:32px}.ess-summary-card strong[b-x2aayhwdlb]{font-size:18px}.ess-table-card[b-x2aayhwdlb]{height:570px}.ess-table-card[b-x2aayhwdlb]  .table-container{padding:0 7px 7px}}
/* จัดความหนาแน่นตารางและปุ่มให้ตรงกับหน้า API Exception */
.ess-table-card[b-x2aayhwdlb]  table {
    table-layout: fixed;
    font-size: 10px;
}
.ess-table-card[b-x2aayhwdlb]  thead th {
    height: 38px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    letter-spacing: .01em;
}
.ess-table-card[b-x2aayhwdlb]  tbody td {
    height: 38px !important;
    max-width: 190px;
    padding: 4px 7px !important;
    overflow: hidden;
    color: #35445e;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x2aayhwdlb]  tbody td > *,
.ess-table-card[b-x2aayhwdlb]  tbody td .cell-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar {
    min-height: 58px;
    padding: 9px 10px !important;
    gap: 8px;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .form-control,
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .search,
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .select {
    height: 40px !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 11px !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .form-control:focus {
    border-color: #2f80ed !important;
    box-shadow: 0 0 0 3px rgba(47,128,237,.11) !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    gap: 7px;
    color: #334155 !important;
    background: #fff !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn:hover {
    color: #1768c5 !important;
    border-color: #72a8e4 !important;
    background: #f8fbff !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar > .table-toolbar-button:first-child {
    margin-right: auto !important;
}
    .ess-table-card[b-x2aayhwdlb]  .table-toolbar > .table-toolbar-button:first-child .btn-danger {
        /* color: #dc2626 !important;
    background: #fff7f7 !important;
    border-color: #fecaca !important;*/
        color: #dc2626 !important;
        background: #dc2626 !important;
        border-color: #dc2626 !important;
    }
.ess-table-card[b-x2aayhwdlb]  .table-toolbar > .table-toolbar-button:first-child .btn-danger:not(:disabled):hover {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 8px !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.cancel {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.complete {
    color: #078447 !important;
    background: #effbf5 !important;
    border: 1px solid #9de0bf !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.resend {
    color: #1768c5 !important;
    background: #edf6ff !important;
    border: 1px solid #79ade8 !important;
}
.ess-table-card[b-x2aayhwdlb]  thead .filter-icon,
.ess-table-card[b-x2aayhwdlb]  thead .fa-filter,
.ess-table-card[b-x2aayhwdlb]  thead [data-bs-toggle="dropdown"] {
    color: #fff !important;
    opacity: .92;
}
.ess-table-card[b-x2aayhwdlb]  thead .filter-icon:hover,
.ess-table-card[b-x2aayhwdlb]  thead .fa-filter:hover {
    opacity: 1;
}
.ess-table-card[b-x2aayhwdlb]  .filter-row,
.ess-table-card[b-x2aayhwdlb]  .filter-panel,
.ess-table-card[b-x2aayhwdlb]  .dropdown-menu {
    padding: 9px !important;
    border: 1px solid #d8e2ef !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(25,57,105,.14) !important;
    font-size: 10px !important;
}
.ess-table-card[b-x2aayhwdlb]  .filter-row .btn-primary,
.ess-table-card[b-x2aayhwdlb]  .filter-panel .btn-primary {
    color: #fff !important;
    background: #1768c5 !important;
    border-color: #1768c5 !important;
}
.ess-table-card[b-x2aayhwdlb]  .filter-row .btn-secondary,
.ess-table-card[b-x2aayhwdlb]  .filter-panel .btn-secondary {
    color: #334155 !important;
    background: #fff !important;
    border-color: #cfd9e6 !important;
}
@media(max-width:700px){
    .ess-table-card[b-x2aayhwdlb]  .table-toolbar{align-items:stretch;flex-wrap:wrap}
    .ess-table-card[b-x2aayhwdlb]  .table-toolbar .search{min-width:100%}
    .ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn{height:36px!important;min-height:36px!important}
}


/* จัดกลุ่มคอลัมน์งานให้กระชับ */
.ess-table-card[b-x2aayhwdlb]  .task-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    line-height: 1.15;
}
.ess-table-card[b-x2aayhwdlb]  .task-cell strong,
.ess-table-card[b-x2aayhwdlb]  .task-cell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x2aayhwdlb]  .task-cell strong {
    color: #18314f;
    font-size: 10px;
    font-weight: 750;
}
.ess-table-card[b-x2aayhwdlb]  .task-cell span {
    color: #7b8ca5;
    font-size: 9px;
}
.ess-table-card[b-x2aayhwdlb]  .task-cell i {
    display: inline-block;
    width: 15px;
    color: #2782d4;
    text-align: center;
}
.ess-table-card[b-x2aayhwdlb]  .task-cell span i { color: #7ba9d3; }
.ess-table-card[b-x2aayhwdlb]  tbody tr:hover .task-cell strong {
    color: #1768c5;
}


/* จัดปุ่มและพื้นที่ล้นตารางให้ตรงกับหน้า API Exception */
.ess-table-card[b-x2aayhwdlb]  .table-wrapper {
    min-width: 0;
    overflow: hidden !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-fixed-header,
.ess-table-card[b-x2aayhwdlb]  .table-fixed-body {
    min-width: 0;
}
.ess-table-card[b-x2aayhwdlb]  .table-fixed-header > table,
.ess-table-card[b-x2aayhwdlb]  .table-fixed-body > table {
    width: 100%;
    min-width: 1180px;
}
.ess-table-card[b-x2aayhwdlb]  .table-fixed-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn-danger,
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn-danger:disabled {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
    opacity: 1 !important;
}
.ess-table-card[b-x2aayhwdlb]  .table-toolbar .btn-danger:disabled {
    color: #e58a8a !important;
    background: #fffafa !important;
    cursor: not-allowed;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.btn,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action .btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 10px !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.cancel,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.cancel .btn,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.cancel.btn {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.complete,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.complete .btn,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.complete.btn {
    color: #078447 !important;
    background: #effbf5 !important;
    border: 1px solid #9de0bf !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.resend,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.resend .btn,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action.resend.btn {
    color: #1768c5 !important;
    background: #edf6ff !important;
    border: 1px solid #79ade8 !important;
}
.ess-table-card[b-x2aayhwdlb]  .ess-row-action:hover,
.ess-table-card[b-x2aayhwdlb]  .ess-row-action .btn:hover {
    filter: brightness(.96);
}
@media (max-width: 1180px) {
    .ess-table-card[b-x2aayhwdlb]  .table-fixed-body {
        padding-bottom: 8px;
    }
}

.ess-list-heading[b-x2aayhwdlb]{min-height:58px;padding:10px 13px;display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #dce5f0;background:#fff}.ess-list-heading h2[b-x2aayhwdlb]{margin:0;color:#12213f;font-size:16px;font-weight:800}.ess-list-heading p[b-x2aayhwdlb]{margin:2px 0 0;color:#718096;font-size:10px}.ess-live-badge[b-x2aayhwdlb]{padding:5px 9px;display:inline-flex;align-items:center;gap:6px;color:#087949;background:#e4f9ef;border-radius:999px;font-size:9px;font-weight:800;white-space:nowrap}.ess-live-badge i[b-x2aayhwdlb]{width:6px;height:6px;background:#10a562;border-radius:50%}
.ess-bulk-cancel[b-x2aayhwdlb]{min-height:36px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#dc2626;background:#fff7f7;border:1px solid #fecaca;border-radius:8px;font-size:10px;font-weight:750}.ess-bulk-cancel b[b-x2aayhwdlb]{min-width:20px;padding:2px 6px;color:#fff;background:#dc2626;border-radius:999px;font-size:9px}.ess-bulk-cancel:hover:not(:disabled)[b-x2aayhwdlb]{background:#feecec}.ess-bulk-cancel:disabled[b-x2aayhwdlb]{cursor:not-allowed;opacity:.5}
.ess-table-card[b-x2aayhwdlb]  button.ess-row-action{width:31px;height:31px;min-width:31px;min-height:31px;padding:0;display:inline-grid;place-items:center;border-radius:8px;box-shadow:none;font-size:10px}.ess-table-card[b-x2aayhwdlb]  button.ess-row-action.cancel{color:#dc2626;background:#fff7f7;border:1px solid #fecaca}.ess-table-card[b-x2aayhwdlb]  button.ess-row-action.resend{color:#1768c5;background:#edf6ff;border:1px solid #79ade8}.ess-table-card[b-x2aayhwdlb]  button.ess-row-action.complete{color:#078447;background:#effbf5;border:1px solid #9de0bf}.ess-table-card[b-x2aayhwdlb]  button.ess-row-action:hover{filter:brightness(.96)}
.task-error-cell[b-x2aayhwdlb]{min-width:0;display:flex;align-items:center;gap:6px;color:#b42318}.task-error-cell i[b-x2aayhwdlb]{flex:0 0 auto;font-size:10px}.task-error-cell span[b-x2aayhwdlb]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.task-error-cell.is-empty[b-x2aayhwdlb]{color:#94a3b8}
.ess-confirm-backdrop[b-x2aayhwdlb]{position:fixed;inset:0;z-index:1090;padding:20px;display:grid;place-items:center;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}.ess-confirm-modal[b-x2aayhwdlb]{width:min(520px,calc(100vw - 40px));overflow:hidden;background:#fff;border:1px solid #d7e1ed;border-radius:14px;box-shadow:0 25px 70px rgba(15,23,42,.28)}.ess-confirm-header[b-x2aayhwdlb]{padding:17px 18px;display:grid;grid-template-columns:44px 1fr 37px;align-items:center;gap:12px;border-bottom:1px solid #e4eaf2}.ess-confirm-header h2[b-x2aayhwdlb]{margin:2px 0 0;color:#12213f;font-size:18px;font-weight:800}.ess-confirm-icon[b-x2aayhwdlb]{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;font-size:17px}.ess-confirm-icon.cancel[b-x2aayhwdlb]{color:#dc2626;background:#fee7e7}.ess-confirm-icon.resend[b-x2aayhwdlb]{color:#1768c5;background:#e5f0ff}.ess-confirm-icon.complete[b-x2aayhwdlb]{color:#078447;background:#dcf8e8}.ess-modal-close[b-x2aayhwdlb]{width:37px;height:37px;display:grid;place-items:center;color:#64748b;background:#eef2f7;border:0;border-radius:9px}.ess-modal-close:hover:not(:disabled)[b-x2aayhwdlb]{color:#dc2626;background:#fee7e7}.ess-confirm-body[b-x2aayhwdlb]{padding:18px}.ess-confirm-body>p[b-x2aayhwdlb]{margin:0 0 14px;color:#52627a;font-size:12px;line-height:1.55}.ess-task-preview[b-x2aayhwdlb]{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#f6f9fd;border:1px solid #dbe5f0;border-radius:9px}.ess-task-preview span[b-x2aayhwdlb]{min-width:0;display:grid;gap:3px}.ess-task-preview small[b-x2aayhwdlb]{color:#8290a5;font-size:9px}.ess-task-preview strong[b-x2aayhwdlb]{overflow:hidden;color:#233a5e;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.ess-confirm-footer[b-x2aayhwdlb]{padding:10px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #e4eaf2}.ess-dialog-button[b-x2aayhwdlb]{min-height:38px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:9px;font-size:11px;font-weight:750}.ess-dialog-button.secondary[b-x2aayhwdlb]{color:#334155;background:#fff;border:1px solid #cfd9e6}.ess-dialog-button.cancel[b-x2aayhwdlb]{color:#fff;background:#dc2626;border:1px solid #dc2626}.ess-dialog-button.resend[b-x2aayhwdlb]{color:#fff;background:#1768c5;border:1px solid #1768c5}.ess-dialog-button.complete[b-x2aayhwdlb]{color:#fff;background:#078447;border:1px solid #078447}.ess-dialog-button:disabled[b-x2aayhwdlb],.ess-modal-close:disabled[b-x2aayhwdlb]{cursor:not-allowed;opacity:.6}
@media(max-width:576px){.ess-list-heading[b-x2aayhwdlb]{align-items:flex-start}.ess-list-heading p[b-x2aayhwdlb]{display:none}.ess-confirm-backdrop[b-x2aayhwdlb]{padding:8px}.ess-confirm-modal[b-x2aayhwdlb]{width:calc(100vw - 16px)}.ess-task-preview[b-x2aayhwdlb]{grid-template-columns:1fr}.ess-confirm-footer[b-x2aayhwdlb]{flex-direction:column}}

.ess-filter-bar[b-x2aayhwdlb]{min-height:52px;padding:8px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e5edf5;background:#fff}.ess-filter-search[b-x2aayhwdlb]{height:36px;min-width:220px;flex:1;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #cfd9e6;border-radius:8px}.ess-filter-search i[b-x2aayhwdlb]{color:#71839b;font-size:11px}.ess-filter-search input[b-x2aayhwdlb]{width:100%;height:100%;border:0;outline:0;font-size:10px}.ess-filter-bar select[b-x2aayhwdlb]{height:36px;min-width:145px;padding:0 9px;border:1px solid #cfd9e6;border-radius:8px;color:#334155;background:#fff;font-size:10px}.ess-filter-apply[b-x2aayhwdlb],.ess-filter-reset[b-x2aayhwdlb]{height:36px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;border-radius:8px;font-size:10px;font-weight:750}.ess-filter-apply[b-x2aayhwdlb]{color:#fff;background:#1768c5;border:1px solid #1768c5}.ess-filter-reset[b-x2aayhwdlb]{color:#475569;background:#fff;border:1px solid #cfd9e6}.ess-table-card[b-x2aayhwdlb]  thead :is(.filter-icon,.fa-filter,[data-bs-toggle="dropdown"]){display:none!important}@media(max-width:700px){.ess-filter-bar[b-x2aayhwdlb]{align-items:stretch;flex-wrap:wrap}.ess-filter-search[b-x2aayhwdlb]{min-width:100%}.ess-filter-bar select[b-x2aayhwdlb]{flex:1}}
/* _content/WMS.UI/Pages/TaskManage/ESS.razor.rz.scp.css */
.ess-page[b-x5hssq6xzw]{--ess-primary:#176dcc;--ess-border:#d8e3f0;height:100%;min-height:500px;padding:18px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;overflow:hidden;background:#f4f7fb;color:#10233f}.ess-page[b-x5hssq6xzw],.ess-page>*[b-x5hssq6xzw]{min-width:0;max-width:100%}.ess-page-header[b-x5hssq6xzw]{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.ess-eyebrow[b-x5hssq6xzw]{display:block;margin-bottom:2px;color:var(--ess-primary);font-size:9px;font-weight:850;letter-spacing:.14em}.ess-page-header h1[b-x5hssq6xzw]{margin:0;color:#101f38;font-size:24px;font-weight:800;line-height:1.12}.ess-page-header p[b-x5hssq6xzw]{margin:3px 0 0;color:#71839b;font-size:11px}.ess-refresh-button[b-x5hssq6xzw]{height:38px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #cfdaea;border-radius:9px;background:#fff;color:#36516e;box-shadow:0 2px 8px rgba(25,55,88,.05);font-size:11px;font-weight:750}.ess-refresh-button:hover[b-x5hssq6xzw]{border-color:#84b7ee;color:#1268c5;background:#f5faff}.ess-summary-grid[b-x5hssq6xzw]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.ess-summary-card[b-x5hssq6xzw]{height:68px;padding:10px 12px;display:flex;align-items:center;gap:10px;border:1px solid var(--ess-border);border-radius:11px;background:#fff;box-shadow:0 3px 12px rgba(20,50,84,.04)}.ess-summary-icon[b-x5hssq6xzw]{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:10px;font-size:15px}.ess-summary-card span[b-x5hssq6xzw]{display:block;color:#74859b;font-size:9px}.ess-summary-card strong[b-x5hssq6xzw]{display:block;color:#172a45;font-size:21px;font-weight:800;line-height:1}.ess-summary-card.total .ess-summary-icon[b-x5hssq6xzw]{color:#176dcb;background:#e8f2ff}.ess-summary-card.pending .ess-summary-icon[b-x5hssq6xzw]{color:#c17600;background:#fff3d8}.ess-summary-card.processing .ess-summary-icon[b-x5hssq6xzw]{color:#087c96;background:#ddf7fb}.ess-summary-card.error .ess-summary-icon[b-x5hssq6xzw]{color:#d13232;background:#ffe8e8}.ess-summary-card.pending strong[b-x5hssq6xzw]{color:#b26b00}.ess-summary-card.processing strong[b-x5hssq6xzw]{color:#087c96}.ess-summary-card.error strong[b-x5hssq6xzw]{color:#d13232}.ess-table-card[b-x5hssq6xzw]{min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ess-border);border-radius:13px;background:#fff;box-shadow:0 7px 22px rgba(20,50,84,.05)}.task-status[b-x5hssq6xzw]{width:fit-content;min-height:22px;padding:3px 7px;display:inline-flex;align-items:center;gap:4px;border-radius:99px;font-size:9px;font-weight:750;white-space:nowrap}.task-status.is-pending[b-x5hssq6xzw]{color:#945c00;background:#fff2ce}.task-status.is-processing[b-x5hssq6xzw]{color:#08758c;background:#daf5fa}.task-status.is-error[b-x5hssq6xzw]{color:#b92525;background:#ffe2e2}.task-status.is-complete[b-x5hssq6xzw]{color:#057650;background:#dcf7ea}.task-status.is-cancelled[b-x5hssq6xzw]{color:#526277;background:#e8edf3}.task-status.is-info[b-x5hssq6xzw]{color:#175fb4;background:#e4f0ff}.ess-table-card[b-x5hssq6xzw] >.table{min-height:0;flex:1;border:0!important}.ess-table-card[b-x5hssq6xzw]  .table-container{height:100%;min-height:0;padding:0 10px 8px;display:flex;flex-direction:column;overflow:hidden}.ess-table-card[b-x5hssq6xzw]  .table-toolbar{min-height:50px;padding:7px 0!important;display:flex;align-items:center;gap:6px;border-bottom:1px solid #e8eef5;background:#fff}.ess-table-card[b-x5hssq6xzw]  .table-toolbar .form-control{height:34px!important;border-radius:8px!important;font-size:10px!important}.ess-table-card[b-x5hssq6xzw]  .table-toolbar .btn{height:32px!important;min-height:32px!important;padding:0 9px!important;border-radius:7px!important;font-size:9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}.ess-table-card[b-x5hssq6xzw]  .table-wrapper{min-height:0;flex:1;overflow:hidden;border-radius:8px}.ess-table-card[b-x5hssq6xzw]  .table-fixed-body{min-height:0;overflow:auto!important;overscroll-behavior:contain}.ess-table-card[b-x5hssq6xzw]  .table-fixed-header>table,.ess-table-card[b-x5hssq6xzw]  .table-fixed-body>table{min-width:1050px}.ess-table-card[b-x5hssq6xzw]  .table-header{height:34px;color:#fff!important;background:#276cba!important;font-size:9px!important;font-weight:800}.ess-table-card[b-x5hssq6xzw]  .table-cell{height:34px!important;padding:4px 7px!important;border-color:#e7edf4!important;vertical-align:middle!important;font-size:9.5px!important}.ess-table-card[b-x5hssq6xzw]  .table-row:hover{background:#f4f8fd!important}.ess-table-card[b-x5hssq6xzw]  .pagination{min-height:42px;margin:0!important;padding:6px 0 0;border-top:1px solid #e8eef5;overflow-x:auto}.ess-table-card[b-x5hssq6xzw]  .page-link{min-width:29px;height:29px;padding:0 7px;font-size:9px;display:grid;place-items:center}.ess-table-card[b-x5hssq6xzw]  .ess-row-action.btn{width:auto;height:27px!important;min-height:27px!important;padding:0 7px!important;border:0!important;border-radius:7px!important;font-size:9px!important}.ess-table-card[b-x5hssq6xzw]  .ess-row-action.resend{color:#09628d!important;background:#e0f3ff!important}.ess-table-card[b-x5hssq6xzw]  .ess-row-action.cancel{color:#b32626!important;background:#ffe5e5!important}.ess-table-card[b-x5hssq6xzw]  .table-sub{padding:8px;background:#f5f8fc}.ess-table-card[b-x5hssq6xzw]  .table-sub>.table{border:1px solid #dbe5f0!important;border-radius:8px;background:#fff}@media(max-width:900px){.ess-page[b-x5hssq6xzw]{height:auto;min-height:calc(100vh - 5rem);overflow:visible;grid-template-rows:auto auto auto}.ess-summary-grid[b-x5hssq6xzw]{grid-template-columns:repeat(2,minmax(0,1fr))}.ess-table-card[b-x5hssq6xzw]{height:620px}}@media(max-width:576px){.ess-page[b-x5hssq6xzw]{padding:12px;gap:9px}.ess-page-header[b-x5hssq6xzw]{align-items:flex-start}.ess-page-header h1[b-x5hssq6xzw]{font-size:20px}.ess-page-header p[b-x5hssq6xzw]{display:none}.ess-refresh-button[b-x5hssq6xzw]{width:38px;padding:0}.ess-refresh-button span[b-x5hssq6xzw]{display:none}.ess-summary-grid[b-x5hssq6xzw]{gap:7px}.ess-summary-card[b-x5hssq6xzw]{height:60px;padding:8px}.ess-summary-icon[b-x5hssq6xzw]{width:32px;height:32px;flex-basis:32px}.ess-summary-card strong[b-x5hssq6xzw]{font-size:18px}.ess-table-card[b-x5hssq6xzw]{height:570px}.ess-table-card[b-x5hssq6xzw]  .table-container{padding:0 7px 7px}}
/* จัดความหนาแน่นตารางและปุ่มให้ตรงกับหน้า API Exception */
.ess-table-card[b-x5hssq6xzw]  table {
    table-layout: fixed;
    font-size: 10px;
}
.ess-table-card[b-x5hssq6xzw]  thead th {
    height: 38px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    letter-spacing: .01em;
}
.ess-table-card[b-x5hssq6xzw]  tbody td {
    height: 38px !important;
    max-width: 190px;
    padding: 4px 7px !important;
    overflow: hidden;
    color: #35445e;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x5hssq6xzw]  tbody td > *,
.ess-table-card[b-x5hssq6xzw]  tbody td .cell-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar {
    min-height: 58px;
    padding: 9px 10px !important;
    gap: 8px;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .form-control,
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .search,
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .select {
    height: 40px !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-size: 11px !important;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .form-control:focus {
    border-color: #2f80ed !important;
    box-shadow: 0 0 0 3px rgba(47,128,237,.11) !important;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 13px !important;
    gap: 7px;
    color: #334155 !important;
    background: #fff !important;
    border: 1px solid #cfd9e6 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar .btn:hover {
    color: #1768c5 !important;
    border-color: #72a8e4 !important;
    background: #f8fbff !important;
}
.ess-table-card[b-x5hssq6xzw]  .table-toolbar > .table-toolbar-button:first-child {
    margin-right: auto !important;
}
    .ess-table-card[b-x5hssq6xzw]  .table-toolbar > .table-toolbar-button:first-child .btn-danger {
        /*color: #dc2626 !important;
    background: #fff7f7 !important;
    border-color: #fecaca !important;*/
        color: #dc2626 !important;
        background: #dc2626 !important;
        border-color: #dc2626 !important;
    }
.ess-table-card[b-x5hssq6xzw]  .table-toolbar > .table-toolbar-button:first-child .btn-danger:not(:disabled):hover {
    color: #dc2626 !important;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 8px !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.cancel {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.complete {
    color: #078447 !important;
    background: #effbf5 !important;
    border: 1px solid #9de0bf !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.resend {
    color: #1768c5 !important;
    background: #edf6ff !important;
    border: 1px solid #79ade8 !important;
}
.ess-table-card[b-x5hssq6xzw]  thead .filter-icon,
.ess-table-card[b-x5hssq6xzw]  thead .fa-filter,
.ess-table-card[b-x5hssq6xzw]  thead [data-bs-toggle="dropdown"] {
    color: #fff !important;
    opacity: .92;
}
.ess-table-card[b-x5hssq6xzw]  thead .filter-icon:hover,
.ess-table-card[b-x5hssq6xzw]  thead .fa-filter:hover {
    opacity: 1;
}
.ess-table-card[b-x5hssq6xzw]  .filter-row,
.ess-table-card[b-x5hssq6xzw]  .filter-panel,
.ess-table-card[b-x5hssq6xzw]  .dropdown-menu {
    padding: 9px !important;
    border: 1px solid #d8e2ef !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 28px rgba(25,57,105,.14) !important;
    font-size: 10px !important;
}
.ess-table-card[b-x5hssq6xzw]  .filter-row .btn-primary,
.ess-table-card[b-x5hssq6xzw]  .filter-panel .btn-primary {
    color: #fff !important;
    background: #1768c5 !important;
    border-color: #1768c5 !important;
}
.ess-table-card[b-x5hssq6xzw]  .filter-row .btn-secondary,
.ess-table-card[b-x5hssq6xzw]  .filter-panel .btn-secondary {
    color: #334155 !important;
    background: #fff !important;
    border-color: #cfd9e6 !important;
}
@media(max-width:700px){
    .ess-table-card[b-x5hssq6xzw]  .table-toolbar{align-items:stretch;flex-wrap:wrap}
    .ess-table-card[b-x5hssq6xzw]  .table-toolbar .search{min-width:100%}
    .ess-table-card[b-x5hssq6xzw]  .table-toolbar .btn{height:36px!important;min-height:36px!important}
}


/* จัดกลุ่มคอลัมน์งานให้กระชับ */
.ess-table-card[b-x5hssq6xzw]  .task-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    overflow: hidden;
    line-height: 1.15;
}
.ess-table-card[b-x5hssq6xzw]  .task-cell strong,
.ess-table-card[b-x5hssq6xzw]  .task-cell span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ess-table-card[b-x5hssq6xzw]  .task-cell strong {
    color: #18314f;
    font-size: 10px;
    font-weight: 750;
}
.ess-table-card[b-x5hssq6xzw]  .task-cell span {
    color: #7b8ca5;
    font-size: 9px;
}
.ess-table-card[b-x5hssq6xzw]  .task-cell i {
    display: inline-block;
    width: 15px;
    color: #2782d4;
    text-align: center;
}
.ess-table-card[b-x5hssq6xzw]  .task-cell span i { color: #7ba9d3; }
.ess-table-card[b-x5hssq6xzw]  tbody tr:hover .task-cell strong {
    color: #1768c5;
}


/* จัดปุ่มและพื้นที่ล้นตารางให้ตรงกับหน้า API Exception */
.ess-table-card[b-x5hssq6xzw]  .table-wrapper {
    min-width: 0;
    overflow: hidden !important;
}
.ess-table-card[b-x5hssq6xzw]  .table-fixed-header,
.ess-table-card[b-x5hssq6xzw]  .table-fixed-body {
    min-width: 0;
}
.ess-table-card[b-x5hssq6xzw]  .table-fixed-header > table,
.ess-table-card[b-x5hssq6xzw]  .table-fixed-body > table {
    width: 100%;
    min-width: 1180px;
}
.ess-table-card[b-x5hssq6xzw]  .table-fixed-body {
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
}
/*.ess-table-card ::deep .table-toolbar .btn-danger,
.ess-table-card ::deep .table-toolbar .btn-danger:disabled {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
    opacity: 1 !important;
}*/
/*.ess-table-card ::deep .table-toolbar .btn-danger:disabled {
    color: #e58a8a !important;
    background: #fffafa !important;
    cursor: not-allowed;
}*/
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.btn,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action .btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 10px !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.cancel,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.cancel .btn,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.cancel.btn {
    color: #dc2626 !important;
    background: #fff7f7 !important;
    border: 1px solid #fecaca !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.complete,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.complete .btn,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.complete.btn {
    color: #078447 !important;
    background: #effbf5 !important;
    border: 1px solid #9de0bf !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.resend,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.resend .btn,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action.resend.btn {
    color: #1768c5 !important;
    background: #edf6ff !important;
    border: 1px solid #79ade8 !important;
}
.ess-table-card[b-x5hssq6xzw]  .ess-row-action:hover,
.ess-table-card[b-x5hssq6xzw]  .ess-row-action .btn:hover {
    filter: brightness(.96);
}
@media (max-width: 1180px) {
    .ess-table-card[b-x5hssq6xzw]  .table-fixed-body {
        padding-bottom: 8px;
    }
}

/* จัดหัวข้อให้กระชับตามรูปแบบรายงาน */
.ess-list-heading[b-x5hssq6xzw] {
    min-height: 58px;
    padding: 10px 13px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #dce5f0;
    background: #fff;
}
.ess-list-heading h2[b-x5hssq6xzw] { margin: 0; color: #12213f; font-size: 16px; font-weight: 800; }
.ess-list-heading p[b-x5hssq6xzw] { margin: 2px 0 0; color: #718096; font-size: 10px; }
.ess-live-badge[b-x5hssq6xzw] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #087949;
    background: #e4f9ef;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.ess-live-badge i[b-x5hssq6xzw] { width: 6px; height: 6px; background: #10a562; border-radius: 50%; }
.ess-list-actions[b-x5hssq6xzw] { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ess-bulk-cancel[b-x5hssq6xzw] {
    min-height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #dc2626;
    background: #fff7f7;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
}
.ess-bulk-cancel b[b-x5hssq6xzw] { min-width: 20px; padding: 2px 6px; color: #fff; background: #dc2626; border-radius: 999px; font-size: 9px; }
.ess-bulk-cancel:hover:not(:disabled)[b-x5hssq6xzw] { background: #feecec; border-color: #fca5a5; }
.ess-bulk-cancel:disabled[b-x5hssq6xzw] { cursor: not-allowed; opacity: .5; }

.ess-table-card[b-x5hssq6xzw]  button.ess-row-action {
    width: 31px;
    height: 31px;
    min-width: 31px;
    min-height: 31px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    box-shadow: none;
    font-size: 10px;
}
.ess-table-card[b-x5hssq6xzw]  button.ess-row-action.cancel { color: #dc2626; background: #fff7f7; border: 1px solid #fecaca; }
.ess-table-card[b-x5hssq6xzw]  button.ess-row-action.resend { color: #1768c5; background: #edf6ff; border: 1px solid #79ade8; }
.ess-table-card[b-x5hssq6xzw]  button.ess-row-action.complete { color: #078447; background: #effbf5; border: 1px solid #9de0bf; }
.ess-table-card[b-x5hssq6xzw]  button.ess-row-action:hover { filter: brightness(.96); }

.task-error-cell[b-x5hssq6xzw] { min-width: 0; display: flex; align-items: center; gap: 6px; color: #b42318; }
.task-error-cell i[b-x5hssq6xzw] { flex: 0 0 auto; font-size: 10px; }
.task-error-cell span[b-x5hssq6xzw] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-error-cell.is-empty[b-x5hssq6xzw] { color: #94a3b8; }

.ess-confirm-backdrop[b-x5hssq6xzw] {
    position: fixed;
    inset: 0;
    z-index: 1090;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}
.ess-confirm-modal[b-x5hssq6xzw] {
    width: min(520px, calc(100vw - 40px));
    overflow: hidden;
    background: #fff;
    border: 1px solid #d7e1ed;
    border-radius: 14px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .28);
}
.ess-confirm-header[b-x5hssq6xzw] {
    padding: 17px 18px;
    display: grid;
    grid-template-columns: 44px 1fr 37px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e4eaf2;
}
.ess-confirm-header h2[b-x5hssq6xzw] { margin: 2px 0 0; color: #12213f; font-size: 18px; font-weight: 800; }
.ess-confirm-icon[b-x5hssq6xzw] { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; }
.ess-confirm-icon.cancel[b-x5hssq6xzw] { color: #dc2626; background: #fee7e7; }
.ess-confirm-icon.resend[b-x5hssq6xzw] { color: #1768c5; background: #e5f0ff; }
.ess-confirm-icon.complete[b-x5hssq6xzw] { color: #078447; background: #dcf8e8; }
.ess-modal-close[b-x5hssq6xzw] { width: 37px; height: 37px; display: grid; place-items: center; color: #64748b; background: #eef2f7; border: 0; border-radius: 9px; }
.ess-modal-close:hover:not(:disabled)[b-x5hssq6xzw] { color: #dc2626; background: #fee7e7; }
.ess-confirm-body[b-x5hssq6xzw] { padding: 18px; }
.ess-confirm-body > p[b-x5hssq6xzw] { margin: 0 0 14px; color: #52627a; font-size: 12px; line-height: 1.55; }
.ess-task-preview[b-x5hssq6xzw] { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: #f6f9fd; border: 1px solid #dbe5f0; border-radius: 9px; }
.ess-task-preview span[b-x5hssq6xzw] { min-width: 0; display: grid; gap: 3px; }
.ess-task-preview small[b-x5hssq6xzw] { color: #8290a5; font-size: 9px; }
.ess-task-preview strong[b-x5hssq6xzw] { overflow: hidden; color: #233a5e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ess-bulk-summary[b-x5hssq6xzw] { padding: 12px; display: flex; align-items: center; gap: 11px; background: #fff7f7; border: 1px solid #fecaca; border-radius: 9px; }
.ess-bulk-summary > span[b-x5hssq6xzw] { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #dc2626; background: #fee2e2; border-radius: 9px; }
.ess-bulk-summary div[b-x5hssq6xzw] { display: grid; gap: 2px; }
.ess-bulk-summary small[b-x5hssq6xzw] { color: #8290a5; font-size: 9px; }
.ess-bulk-summary strong[b-x5hssq6xzw] { color: #991b1b; font-size: 14px; }
.ess-confirm-footer[b-x5hssq6xzw] { padding: 10px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e4eaf2; }
.ess-dialog-button[b-x5hssq6xzw] { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; font-size: 11px; font-weight: 750; }
.ess-dialog-button.secondary[b-x5hssq6xzw] { color: #334155; background: #fff; border: 1px solid #cfd9e6; }
.ess-dialog-button.cancel[b-x5hssq6xzw] { color: #fff; background: #dc2626; border: 1px solid #dc2626; }
.ess-dialog-button.resend[b-x5hssq6xzw] { color: #fff; background: #1768c5; border: 1px solid #1768c5; }
.ess-dialog-button.complete[b-x5hssq6xzw] { color: #fff; background: #078447; border: 1px solid #078447; }
.ess-dialog-button:disabled[b-x5hssq6xzw], .ess-modal-close:disabled[b-x5hssq6xzw] { cursor: not-allowed; opacity: .6; }

@media (max-width: 576px) {
    .ess-list-heading[b-x5hssq6xzw] { align-items: flex-start; }
    .ess-list-heading p[b-x5hssq6xzw] { display: none; }
    .ess-list-actions[b-x5hssq6xzw] { align-items: flex-end; flex-direction: column-reverse; }
    .ess-confirm-backdrop[b-x5hssq6xzw] { padding: 8px; }
    .ess-confirm-modal[b-x5hssq6xzw] { width: calc(100vw - 16px); }
    .ess-task-preview[b-x5hssq6xzw] { grid-template-columns: 1fr; }
    .ess-confirm-footer[b-x5hssq6xzw] { flex-direction: column; }
}

.ess-filter-bar[b-x5hssq6xzw]{min-height:52px;padding:8px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #e5edf5;background:#fff}.ess-filter-search[b-x5hssq6xzw]{height:36px;min-width:220px;flex:1;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #cfd9e6;border-radius:8px}.ess-filter-search i[b-x5hssq6xzw]{color:#71839b;font-size:11px}.ess-filter-search input[b-x5hssq6xzw]{width:100%;height:100%;border:0;outline:0;font-size:10px}.ess-filter-bar select[b-x5hssq6xzw]{height:36px;min-width:145px;padding:0 9px;border:1px solid #cfd9e6;border-radius:8px;color:#334155;background:#fff;font-size:10px}.ess-filter-apply[b-x5hssq6xzw],.ess-filter-reset[b-x5hssq6xzw]{height:36px;padding:0 11px;display:inline-flex;align-items:center;gap:6px;border-radius:8px;font-size:10px;font-weight:750}.ess-filter-apply[b-x5hssq6xzw]{color:#fff;background:#1768c5;border:1px solid #1768c5}.ess-filter-reset[b-x5hssq6xzw]{color:#475569;background:#fff;border:1px solid #cfd9e6}.ess-table-card[b-x5hssq6xzw]  thead :is(.filter-icon,.fa-filter,[data-bs-toggle="dropdown"]){display:none!important}@media(max-width:700px){.ess-filter-bar[b-x5hssq6xzw]{align-items:stretch;flex-wrap:wrap}.ess-filter-search[b-x5hssq6xzw]{min-width:100%}.ess-filter-bar select[b-x5hssq6xzw]{flex:1}}
/* _content/WMS.UI/Pages/UsersManagement/RolesDesigner.razor.rz.scp.css */
:root[b-wm2huobvhc] {
    --roles-blue: #1767c8;
}

.roles-designer[b-wm2huobvhc] {
    --ink: #17233b;
    --muted: #6e7d96;
    --line: #dce5f1;
    --surface: #ffffff;
    --surface-soft: #f6f9fd;
    --primary: #1767c8;
    --primary-soft: #eaf3ff;
    --success: #0a9b5a;
    --warning: #cf7a00;
    
    height: 100%;
    min-height: 0;
    padding: 18px;
    overflow: auto;
    background: #f4f7fb;
    color: #0f1f3d;
}

/* ใช้ความสูงของแท็บใน MainLayout แล้วให้เลื่อนเฉพาะรายการด้านใน */
.roles-v1[b-wm2huobvhc],
.roles-v2[b-wm2huobvhc] {
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.roles-v1 .roles-hero[b-wm2huobvhc],
.roles-v2 .roles-hero[b-wm2huobvhc] {
    flex: 0 0 auto;
}

.roles-hero[b-wm2huobvhc] {
    min-width: 0;
    margin-bottom: 14px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.roles-eyebrow[b-wm2huobvhc],
.section-label[b-wm2huobvhc],
.wizard-heading > span[b-wm2huobvhc] {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.roles-hero h1[b-wm2huobvhc] {
    margin: 0 0 2px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: -.015em;
}

.roles-hero p[b-wm2huobvhc],
.permission-header p[b-wm2huobvhc],
.wizard-heading p[b-wm2huobvhc] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.hero-actions[b-wm2huobvhc],
.permission-actions[b-wm2huobvhc],
.dialog-actions[b-wm2huobvhc],
.wizard-nav[b-wm2huobvhc] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.design-switcher[b-wm2huobvhc] {
    min-height: 38px;
    padding: 3px 4px 3px 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #687a93;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: 0 2px 4px rgba(14, 45, 84, .05);
}

.design-switcher > span[b-wm2huobvhc] {
    margin-right: 4px;
    font-size: 10px;
    font-weight: 750;
}

.design-switcher button[b-wm2huobvhc] {
    width: 34px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #61738d;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}

.design-switcher button b[b-wm2huobvhc] {
    font-size: 10px;
}

.design-switcher button:hover[b-wm2huobvhc] {
    color: #1767c8;
    background: #edf5ff;
}

.design-switcher button.active[b-wm2huobvhc] {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 3px 8px rgba(23, 103, 200, .2);
}

.roles-v3[b-wm2huobvhc] {
    overflow-y: auto;
}

.roles-designer button[b-wm2huobvhc],
.roles-designer input[b-wm2huobvhc],
.roles-designer select[b-wm2huobvhc],
.role-dialog button[b-wm2huobvhc],
.role-dialog input[b-wm2huobvhc] {
    font: inherit;
}

.btn-soft[b-wm2huobvhc],
.btn-primary-new[b-wm2huobvhc],
.btn-danger-soft[b-wm2huobvhc] {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    border: 1px solid var(--line);
    font-weight: 750;
    transition: .16s ease;
}

.btn-soft[b-wm2huobvhc] {
    color: #40516d;
    background: #fff;
}

.btn-primary-new[b-wm2huobvhc] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 7px 16px rgba(23, 103, 200, .18);
}

.btn-danger-soft[b-wm2huobvhc] {
    color: #c73b45;
    background: #fff5f5;
    border-color: #ffd4d8;
}

.btn-soft:hover:not(:disabled)[b-wm2huobvhc],
.btn-primary-new:hover:not(:disabled)[b-wm2huobvhc],
.btn-danger-soft:hover:not(:disabled)[b-wm2huobvhc] {
    transform: translateY(-1px);
    filter: brightness(.98);
}

button:disabled[b-wm2huobvhc] {
    opacity: .46;
    cursor: not-allowed;
}

/* แบบที่ 1: ส่วนจัดการสิทธิ์ */
.command-layout[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    height: calc(100% - 80px);
    max-height: calc(100% - 80px);
    flex: 0 0 calc(100% - 80px);
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(28, 61, 102, .05);
}

.role-rail[b-wm2huobvhc] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fafd;
    border-right: 1px solid var(--line);
}

.rail-search[b-wm2huobvhc],
.permission-search[b-wm2huobvhc] {
    height: 42px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8190a5;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.rail-search[b-wm2huobvhc] {
    margin: 14px;
}

.rail-search input[b-wm2huobvhc],
.permission-search input[b-wm2huobvhc] {
    width: 100%;
    min-width: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.role-list[b-wm2huobvhc] {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    padding: 0 9px 12px;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.role-card[b-wm2huobvhc] {
    width: 100%;
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    color: #465570;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
}

.role-card:hover[b-wm2huobvhc] {
    background: #fff;
    border-color: #dce6f3;
}

.role-card.active[b-wm2huobvhc] {
    color: #134f99;
    background: #eaf3ff;
    border-color: #bcd7f8;
    box-shadow: inset 3px 0 var(--primary);
}

.role-avatar[b-wm2huobvhc] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 850;
    background: linear-gradient(135deg, #2675d4, #184a9c);
    border-radius: 10px;
}

.role-copy[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.role-copy strong[b-wm2huobvhc],
.permission-name strong[b-wm2huobvhc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-copy small[b-wm2huobvhc],
.permission-name small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 11px;
}

.rail-footer[b-wm2huobvhc] {
    min-height: 52px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    border-top: 1px solid var(--line);
}

.rail-footer button[b-wm2huobvhc] {
    width: 34px;
    height: 34px;
    color: #bd3f49;
    background: #fff;
    border: 1px solid #f0cdd1;
    border-radius: 8px;
}

.permission-workspace[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.permission-header[b-wm2huobvhc] {
    min-height: 84px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--line);
}

.permission-header h2[b-wm2huobvhc] {
    margin: 2px 0;
    font-size: 21px;
    font-weight: 850;
}

.workspace-tools[b-wm2huobvhc],
.matrix-toolbar[b-wm2huobvhc] {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f9fbfe;
    border-bottom: 1px solid var(--line);
}

.group-chips[b-wm2huobvhc] {
    min-width: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.group-chips button[b-wm2huobvhc] {
    height: 34px;
    padding: 0 11px;
    flex: 0 0 auto;
    color: #62718a;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.group-chips button span[b-wm2huobvhc] {
    margin-left: 5px;
    color: #8a98ab;
}

.group-chips button.active[b-wm2huobvhc] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.group-chips button.active span[b-wm2huobvhc] {
    color: #dbeeff;
}

.permission-search[b-wm2huobvhc] {
    width: min(250px, 35%);
    flex: 0 0 auto;
}

.permission-list[b-wm2huobvhc],
.wizard-permissions[b-wm2huobvhc] {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    padding: 10px 14px 18px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.permission-row[b-wm2huobvhc] {
    min-width: 0;
    min-height: 68px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e0e8f2;
    border-radius: 10px;
    transition: .14s ease;
}

.permission-row:hover[b-wm2huobvhc] {
    border-color: #bed3ee;
    box-shadow: 0 5px 14px rgba(26, 77, 136, .06);
}

.permission-row.dirty[b-wm2huobvhc] {
    border-color: #e6b96e;
    box-shadow: inset 3px 0 #e49a22;
}

.permission-name[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.permission-name > span:last-child[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.route-icon[b-wm2huobvhc] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 9px;
}

.permission-switches[b-wm2huobvhc] {
    display: grid;
    grid-template-columns: repeat(3, 116px);
    gap: 7px;
}

.perm-toggle[b-wm2huobvhc] {
    position: relative;
    display: block;
    min-width: 0;
    height: 36px;
    cursor: pointer;
}

.perm-toggle input[b-wm2huobvhc] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.perm-toggle input:focus-visible + span[b-wm2huobvhc] {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.perm-toggle span[b-wm2huobvhc] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #75839a;
    background: #f5f7fa;
    border: 1px solid #e1e7ef;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
}

.perm-toggle.active.view span[b-wm2huobvhc] {
    color: #405a79;
    background: #edf2f7;
    border-color: #bcc9d8;
}

.perm-toggle.active.operate span[b-wm2huobvhc] {
    color: #095bb8;
    background: #e8f3ff;
    border-color: #9bc7f6;
}

.perm-toggle.active.full span[b-wm2huobvhc] {
    color: #087d49;
    background: #e8f8f0;
    border-color: #98d8b9;
}

/* แบบที่ 2: ตารางสิทธิ์ */
.matrix-layout[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 12px 32px rgba(37, 63, 101, .07);
}

.matrix-topbar[b-wm2huobvhc] {
    min-height: 82px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(230px, 360px) 1fr auto;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--line);
}

.role-select-wrap[b-wm2huobvhc] {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
}

.role-select-wrap label[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.role-select-wrap select[b-wm2huobvhc] {
    height: 42px;
    padding: 0 12px;
    color: var(--ink);
    font-weight: 750;
    background: #f8fafd;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.matrix-stats[b-wm2huobvhc] {
    display: flex;
    justify-content: center;
    gap: 34px;
}

.matrix-stats div[b-wm2huobvhc] {
    display: grid;
    text-align: center;
}

.matrix-stats span[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.matrix-stats strong[b-wm2huobvhc] {
    font-size: 22px;
}

.matrix-stats .changed[b-wm2huobvhc] {
    color: var(--warning);
}

.matrix-toolbar[b-wm2huobvhc] {
    position: sticky;
    top: 0;
    z-index: 2;
}

.matrix-table[b-wm2huobvhc] {
    min-height: 0;
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
}

.matrix-head[b-wm2huobvhc] {
    height: 42px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) repeat(3, 116px);
    align-items: center;
    gap: 7px;
    color: #6a7890;
    background: #edf3fa;
    border-bottom: 1px solid #d8e2ee;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.matrix-head span:not(:first-child)[b-wm2huobvhc] {
    text-align: center;
}

.matrix-group[b-wm2huobvhc] {
    min-height: 42px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9fbfd;
    border-bottom: 1px solid #e4eaf2;
}

.matrix-group strong[b-wm2huobvhc] {
    color: #244d82;
}

.matrix-group span[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 11px;
}

.matrix-group em[b-wm2huobvhc] {
    margin-left: auto;
    padding: 3px 8px;
    color: #a76500;
    background: #fff4dc;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    font-weight: 750;
}

.matrix-row[b-wm2huobvhc] {
    min-height: 56px;
    margin: 0;
    padding: 7px 18px;
    grid-template-columns: minmax(300px, 1fr) auto;
    border-width: 0 0 1px;
    border-radius: 0;
}

.matrix-row .route-icon[b-wm2huobvhc] {
    width: 30px;
    height: 30px;
}

/* แบบที่ 3: ขั้นตอนกำหนดสิทธิ์ */
.wizard-shell[b-wm2huobvhc] {
    min-width: 0;
    min-height: 620px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(37, 63, 101, .07);
}

.wizard-steps[b-wm2huobvhc] {
    min-height: 76px;
    padding: 14px clamp(16px, 5vw, 70px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    background: #f8fafd;
    border-bottom: 1px solid var(--line);
}

.wizard-steps button[b-wm2huobvhc] {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    color: #8794a8;
    background: transparent;
    border: 0;
}

.wizard-steps button[b-wm2huobvhc]::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: #dce4ee;
}

.wizard-steps button:last-child[b-wm2huobvhc]::after {
    display: none;
}

.wizard-steps button > span[b-wm2huobvhc] {
    position: relative;
    z-index: 1;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    background: #e7ecf3;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.wizard-steps button.active[b-wm2huobvhc],
.wizard-steps button.done[b-wm2huobvhc] {
    color: var(--primary);
}

.wizard-steps button.active > span[b-wm2huobvhc],
.wizard-steps button.done > span[b-wm2huobvhc] {
    color: #fff;
    background: var(--primary);
}

.wizard-steps button.done[b-wm2huobvhc]::after {
    background: #74a9e7;
}

.wizard-steps button strong[b-wm2huobvhc] {
    font-size: 11px;
}

.wizard-content[b-wm2huobvhc] {
    padding: clamp(18px, 3vw, 34px);
}

.wizard-heading[b-wm2huobvhc] {
    margin: 0 auto 22px;
    max-width: 820px;
    text-align: center;
}

.wizard-heading h2[b-wm2huobvhc] {
    margin: 4px 0;
    font-size: 24px;
    font-weight: 850;
}

.wizard-heading.row-heading[b-wm2huobvhc] {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}

.wizard-heading .permission-search[b-wm2huobvhc] {
    width: 260px;
}

.wizard-role-grid[b-wm2huobvhc],
.category-grid[b-wm2huobvhc] {
    max-width: 1020px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.wizard-role-card[b-wm2huobvhc] {
    min-height: 155px;
    padding: 16px;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 7px;
    color: var(--ink);
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.wizard-role-card:hover[b-wm2huobvhc],
.wizard-role-card.selected[b-wm2huobvhc] {
    border-color: #8dbcee;
    box-shadow: 0 8px 20px rgba(23, 103, 200, .10);
}

.wizard-role-card.selected[b-wm2huobvhc] {
    background: #f2f8ff;
}

.wizard-role-card div[b-wm2huobvhc] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.wizard-role-card div span[b-wm2huobvhc] {
    padding: 3px 7px;
    color: #61718a;
    background: #f0f3f7;
    border-radius: 999px;
    font-size: 9px;
}

.wizard-role-card.create[b-wm2huobvhc] {
    place-items: center;
    align-content: center;
    color: var(--primary);
    text-align: center;
    background: #f4f9ff;
    border-style: dashed;
}

.wizard-role-card.create > i[b-wm2huobvhc] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #e2f0ff;
    border-radius: 50%;
}

.category-grid[b-wm2huobvhc] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.category-card[b-wm2huobvhc] {
    min-height: 84px;
    padding: 14px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 11px;
    color: var(--ink);
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.category-card:hover[b-wm2huobvhc] {
    border-color: #8dbcee;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(34, 81, 138, .08);
}

.category-icon[b-wm2huobvhc] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 10px;
}

.category-card > span:nth-child(2)[b-wm2huobvhc] {
    display: grid;
}

.category-card small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 10px;
}

.category-card > b[b-wm2huobvhc] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #087d49;
    background: #e7f7ef;
    border-radius: 50%;
    font-size: 11px;
}

.wizard-permissions[b-wm2huobvhc] {
    max-height: calc(100vh - 390px);
    min-height: 300px;
    padding: 0;
}

.wizard-nav[b-wm2huobvhc] {
    max-width: 1020px;
    margin: 18px auto 0;
    justify-content: space-between;
}

.review-list[b-wm2huobvhc] {
    max-width: 900px;
    max-height: 380px;
    margin: 0 auto;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.review-list > div[b-wm2huobvhc] {
    min-height: 58px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e8edf4;
}

.review-list > div:last-child[b-wm2huobvhc] {
    border-bottom: 0;
}

.review-list > div > span:first-child[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.review-list small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 10px;
}

.review-badges[b-wm2huobvhc] {
    display: flex;
    gap: 5px;
}

.review-badges b[b-wm2huobvhc] {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
}

.review-badges .view[b-wm2huobvhc] { color: #53657b; background: #edf1f5; }
.review-badges .operate[b-wm2huobvhc] { color: #095bb8; background: #e8f3ff; }
.review-badges .full[b-wm2huobvhc] { color: #087d49; background: #e8f8f0; }
.review-badges .none[b-wm2huobvhc] { color: #b43d47; background: #fff0f1; }

.empty-review[b-wm2huobvhc] {
    max-width: 540px;
    margin: 30px auto;
    padding: 34px;
    color: var(--muted);
    text-align: center;
    background: #f8fafd;
    border: 1px dashed #cbd7e5;
    border-radius: 14px;
}

.empty-review i[b-wm2huobvhc] {
    color: var(--success);
    font-size: 35px;
}

.empty-review h3[b-wm2huobvhc] {
    margin: 9px 0 3px;
    color: var(--ink);
}

/* หน้าต่างเพิ่มกลุ่มสิทธิ์ */
.role-dialog-backdrop[b-wm2huobvhc] {
    position: fixed;
    inset: 0;
    z-index: 2050;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(14, 25, 45, .58);
    backdrop-filter: blur(2px);
}

.role-dialog[b-wm2huobvhc] {
    width: min(440px, 100%);
    padding: 24px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 25px 70px rgba(11, 25, 47, .28);
}

.dialog-icon[b-wm2huobvhc] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #2d7bd5, #164e9d);
    border-radius: 12px;
}

.role-dialog h2[b-wm2huobvhc] {
    margin: 14px 0 2px;
    color: #17233b;
}

.role-dialog p[b-wm2huobvhc] {
    margin: 0 0 17px;
    color: #6e7d96;
    font-size: 12px;
}

.role-dialog label[b-wm2huobvhc] {
    color: #45556e;
    font-size: 12px;
    font-weight: 750;
}

.dialog-input[b-wm2huobvhc] {
    width: 100%;
    height: 44px;
    margin: 6px 0 18px;
    padding: 0 12px;
    border: 1px solid #cfd9e7;
    border-radius: 9px;
    outline: 0;
}

.dialog-input:focus[b-wm2huobvhc] {
    border-color: #5797df;
    box-shadow: 0 0 0 3px rgba(39, 117, 205, .12);
}

.dialog-actions[b-wm2huobvhc] {
    justify-content: flex-end;
}

.role-delete-dialog[b-wm2huobvhc] { position: relative; width: min(480px, 100%); }
.role-dialog-close[b-wm2huobvhc] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #64748b;
    background: #eef2f7;
    border: 0;
    border-radius: 9px;
}
.role-dialog-close:hover:not(:disabled)[b-wm2huobvhc] { color: #dc2626; background: #fee7e7; }
.dialog-icon.danger[b-wm2huobvhc] { color: #dc2626; background: #fee7e7; }
.role-delete-dialog .section-label[b-wm2huobvhc] { display: block; margin-top: 13px; color: #dc2626; }
.role-delete-dialog h2[b-wm2huobvhc] { margin-top: 2px; }
.delete-role-preview[b-wm2huobvhc] {
    margin-bottom: 18px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #f6f9fd;
    border: 1px solid #dbe5f0;
    border-radius: 10px;
}
.delete-role-preview > span:last-child[b-wm2huobvhc] { min-width: 0; display: grid; gap: 2px; }
.delete-role-preview small[b-wm2huobvhc] { color: #8290a5; font-size: 9px; }
.delete-role-preview strong[b-wm2huobvhc] { overflow: hidden; color: #17233b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.delete-role-preview em[b-wm2huobvhc] { color: #6e7d96; font-size: 10px; font-style: normal; }
.btn-confirm-delete[b-wm2huobvhc] {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 9px;
    font-weight: 750;
}
.btn-confirm-delete:hover:not(:disabled)[b-wm2huobvhc] { background: #b91c1c; border-color: #b91c1c; }
.btn-confirm-delete:disabled[b-wm2huobvhc], .role-dialog-close:disabled[b-wm2huobvhc] { cursor: not-allowed; opacity: .6; }

@media (max-width: 1100px) {
    .roles-designer[b-wm2huobvhc] { padding: 14px; }
    .command-layout[b-wm2huobvhc] { grid-template-columns: 240px minmax(0, 1fr); }
    .permission-switches[b-wm2huobvhc] { grid-template-columns: repeat(3, 96px); }
    .perm-toggle span[b-wm2huobvhc] { font-size: 10px; }
    .matrix-topbar[b-wm2huobvhc] { grid-template-columns: minmax(200px, 1fr) auto; }
    .matrix-stats[b-wm2huobvhc] { display: none; }
    .wizard-role-grid[b-wm2huobvhc],
    .category-grid[b-wm2huobvhc] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .design-switcher > span[b-wm2huobvhc] { display: none; }
}

@media (max-width: 760px) {
    .roles-v1[b-wm2huobvhc] {
        height: calc(100dvh - 89px - var(--bb-footer-height, 40px));
        min-height: 520px;
        overflow: hidden;
    }

    .roles-v1 .command-layout[b-wm2huobvhc] {
        height: 0;
        max-height: none;
        min-height: 0;
        flex: 1 1 0;
        overflow: hidden;
    }

    .roles-v2[b-wm2huobvhc] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .roles-v2 .matrix-layout[b-wm2huobvhc] {
        flex: none;
        overflow: visible;
    }

    .roles-v2 .matrix-table[b-wm2huobvhc] {
        max-height: none;
        flex: none;
        overflow-x: auto;
    }

    .roles-hero[b-wm2huobvhc] { align-items: stretch; flex-direction: column; }
    .hero-actions[b-wm2huobvhc] { width: 100%; }
    .hero-actions > button[b-wm2huobvhc] { flex: 1; }
    .command-layout[b-wm2huobvhc] { height: auto; grid-template-columns: 1fr; }
    .role-rail[b-wm2huobvhc] { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
    .permission-header[b-wm2huobvhc],
    .workspace-tools[b-wm2huobvhc],
    .matrix-topbar[b-wm2huobvhc],
    .matrix-toolbar[b-wm2huobvhc],
    .wizard-heading.row-heading[b-wm2huobvhc] { align-items: stretch; flex-direction: column; }
    .permission-header[b-wm2huobvhc] { display: flex; }
    .permission-actions[b-wm2huobvhc] { width: 100%; }
    .permission-actions > button[b-wm2huobvhc] { flex: 1; }
    .workspace-tools[b-wm2huobvhc],
    .matrix-toolbar[b-wm2huobvhc] { display: flex; }
    .permission-search[b-wm2huobvhc],
    .wizard-heading .permission-search[b-wm2huobvhc] { width: 100%; }
    .permission-row[b-wm2huobvhc] { grid-template-columns: 1fr; }
    .permission-switches[b-wm2huobvhc] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .matrix-topbar[b-wm2huobvhc] { display: flex; }
    .role-select-wrap[b-wm2huobvhc] { width: 100%; }
    .matrix-head[b-wm2huobvhc] { display: none; }
    .matrix-row[b-wm2huobvhc] { grid-template-columns: 1fr; }
    .wizard-steps[b-wm2huobvhc] { padding: 12px; }
    .wizard-steps button strong[b-wm2huobvhc] { display: none; }
    .wizard-role-grid[b-wm2huobvhc],
    .category-grid[b-wm2huobvhc] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .roles-designer[b-wm2huobvhc] { padding: 10px; }
    .roles-hero h1[b-wm2huobvhc] { font-size: 23px; }
    .permission-actions .btn-danger-soft span[b-wm2huobvhc],
    .btn-soft span[b-wm2huobvhc] { display: none; }
    .permission-switches[b-wm2huobvhc] { gap: 4px; }
    .perm-toggle span[b-wm2huobvhc] { padding: 0 4px; }
    .wizard-content[b-wm2huobvhc] { padding: 15px; }
}

/* ตรึงส่วนหัวและให้เลื่อนเฉพาะรายการกลุ่มสิทธิ์และหน้าจอ */
.role-list[b-wm2huobvhc],
.permission-list[b-wm2huobvhc],
.matrix-table[b-wm2huobvhc] {
    scrollbar-width: thin;
    scrollbar-color: #9aa9bb transparent;
}

.role-list[b-wm2huobvhc]::-webkit-scrollbar,
.permission-list[b-wm2huobvhc]::-webkit-scrollbar,
.matrix-table[b-wm2huobvhc]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.role-list[b-wm2huobvhc]::-webkit-scrollbar-thumb,
.permission-list[b-wm2huobvhc]::-webkit-scrollbar-thumb,
.matrix-table[b-wm2huobvhc]::-webkit-scrollbar-thumb {
    background: #9aa9bb;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.role-list[b-wm2huobvhc]::-webkit-scrollbar-track,
.permission-list[b-wm2huobvhc]::-webkit-scrollbar-track,
.matrix-table[b-wm2huobvhc]::-webkit-scrollbar-track {
    background: transparent;
}

/* รูปแบบจัดการกลุ่มสิทธิ์เพิ่มเติม A-C */
.roles-v4[b-wm2huobvhc],
.roles-v5[b-wm2huobvhc],
.roles-v6[b-wm2huobvhc] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fresh-shell[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    height: calc(100% - 96px);
    flex: 0 0 calc(100% - 96px);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(28, 61, 102, .05);
}

/* A: ภาพรวมสิทธิ์ */
.access-dashboard[b-wm2huobvhc] {
    display: flex;
    flex-direction: column;
}

.fresh-role-strip[b-wm2huobvhc] {
    min-height: 82px;
    padding: 10px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    background: linear-gradient(90deg, #f4f8fd, #eef5fd);
    border-bottom: 1px solid var(--line);
}

.fresh-role-strip > button[b-wm2huobvhc] {
    min-width: 190px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    color: #3c506e;
    text-align: left;
    background: #fff;
    border: 1px solid #d7e2ef;
    border-radius: 10px;
}

.fresh-role-strip > button.active[b-wm2huobvhc] {
    color: #104f98;
    background: #eef6ff;
    border-color: #87b8ed;
    box-shadow: inset 0 -3px #1767c8;
}

.fresh-role-strip > button > span:nth-child(2)[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.fresh-role-strip > button small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 9px;
}

.fresh-role-strip > button > i[b-wm2huobvhc] {
    color: #0a9658;
}

.fresh-role-strip .create-role-tile[b-wm2huobvhc] {
    min-width: 110px;
    display: flex;
    justify-content: center;
    color: #1767c8;
    background: #f4f9ff;
    border-style: dashed;
}

.fresh-dashboard-body[b-wm2huobvhc] {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
}

.fresh-category-rail[b-wm2huobvhc] {
    min-height: 0;
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    background: #f8fafd;
    border-right: 1px solid var(--line);
}

.fresh-section-title[b-wm2huobvhc] {
    padding: 2px 9px 7px;
    color: #71829a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
}

.fresh-category-rail button[b-wm2huobvhc] {
    min-height: 40px;
    padding: 0 9px;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    color: #53657f;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
}

.fresh-category-rail button b[b-wm2huobvhc] {
    font-size: 9px;
}

.fresh-category-rail button.active[b-wm2huobvhc] {
    color: #0e5eb9;
    background: #e9f3ff;
    border-color: #bfd8f5;
}

.fresh-permission-stage[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fresh-permission-stage .permission-header[b-wm2huobvhc] {
    min-height: 70px;
}

.fresh-stage-tools[b-wm2huobvhc] {
    min-height: 54px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--line);
}

.fresh-stage-tools > div:first-child[b-wm2huobvhc] {
    display: grid;
}

.fresh-stage-tools small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 9px;
}

.fresh-permission-scroll[b-wm2huobvhc],
.focus-list[b-wm2huobvhc] {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    padding: 10px 14px 18px;
    display: grid;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* B: รายการสิทธิ์แบบการ์ด */
.permission-board[b-wm2huobvhc] {
    display: flex;
    flex-direction: column;
}

.board-commandbar[b-wm2huobvhc] {
    min-height: 76px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    background: #f8fbff;
    border-bottom: 1px solid var(--line);
}

.board-role-select[b-wm2huobvhc] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.board-role-select label[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
    color: #71829a;
    font-size: 9px;
    font-weight: 750;
}

.board-role-select select[b-wm2huobvhc] {
    min-width: 180px;
    padding: 3px 20px 3px 0;
    color: #173b67;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 16px;
    font-weight: 800;
}

.board-stats[b-wm2huobvhc] {
    display: flex;
    gap: 8px;
}

.board-stats > span[b-wm2huobvhc] {
    min-width: 70px;
    padding: 6px 10px;
    display: grid;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.board-stats small[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 8px;
}

.board-stats strong[b-wm2huobvhc] {
    color: #173b67;
    font-size: 17px;
}

.board-stats .changed strong[b-wm2huobvhc] {
    color: #c47700;
}

.board-filterbar[b-wm2huobvhc] {
    min-height: 58px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--line);
}

.board-filterbar .group-chips[b-wm2huobvhc] {
    flex: 1;
}

.permission-card-grid[b-wm2huobvhc] {
    min-height: 0;
    flex: 1;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.permission-card-grid .permission-row[b-wm2huobvhc] {
    grid-template-columns: minmax(160px, 1fr);
    align-content: start;
    gap: 9px;
}

.permission-card-grid .permission-switches[b-wm2huobvhc] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* C: ส่วนทำงานเฉพาะหมวด */
.focus-workspace[b-wm2huobvhc] {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
}

.focus-sidebar[b-wm2huobvhc] {
    min-height: 0;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #dfeeff;
    background: linear-gradient(180deg, #174f91, #103966);
}

.focus-role-heading[b-wm2huobvhc] {
    padding: 4px 5px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.focus-role-heading > div[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.focus-role-heading small[b-wm2huobvhc] {
    color: #9fc7f3;
    font-size: 8px;
    letter-spacing: .12em;
}

.focus-role-heading strong[b-wm2huobvhc] {
    color: #fff;
    font-size: 17px;
}

.focus-role-picker[b-wm2huobvhc] {
    margin: 12px 4px 8px;
    display: grid;
    gap: 5px;
    color: #a9c8e9;
    font-size: 9px;
}

.focus-role-picker select[b-wm2huobvhc] {
    height: 38px;
    padding: 0 9px;
    color: #173b67;
    background: #fff;
    border: 0;
    border-radius: 8px;
}

.focus-sidebar nav[b-wm2huobvhc] {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 4px;
    overflow-y: auto;
}

.focus-sidebar nav button[b-wm2huobvhc] {
    min-height: 38px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #c1d8ee;
    background: transparent;
    border: 0;
    border-radius: 8px;
    text-align: left;
}

.focus-sidebar nav button.active[b-wm2huobvhc] {
    color: #174f91;
    background: #fff;
}

.focus-sidebar nav b[b-wm2huobvhc] {
    font-size: 9px;
}

.focus-main[b-wm2huobvhc] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.focus-main > header[b-wm2huobvhc] {
    min-height: 88px;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.focus-main h2[b-wm2huobvhc] {
    margin: 2px 0;
    font-size: 20px;
}

.focus-main p[b-wm2huobvhc] {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.focus-search[b-wm2huobvhc] {
    min-height: 58px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafd;
    border-bottom: 1px solid var(--line);
}

.focus-search .permission-search[b-wm2huobvhc] {
    width: min(420px, 70%);
}

.focus-search > span[b-wm2huobvhc] {
    color: var(--muted);
    font-size: 10px;
}

.fresh-permission-scroll[b-wm2huobvhc],
.permission-card-grid[b-wm2huobvhc],
.focus-list[b-wm2huobvhc],
.fresh-category-rail[b-wm2huobvhc],
.focus-sidebar nav[b-wm2huobvhc] {
    scrollbar-width: thin;
    scrollbar-color: #9aa9bb transparent;
}

@media (max-width: 1200px) {
    .permission-card-grid[b-wm2huobvhc] { grid-template-columns: 1fr; }
    .board-commandbar[b-wm2huobvhc] { grid-template-columns: minmax(220px, 1fr) auto; }
    .board-stats[b-wm2huobvhc] { display: none; }
}

@media (max-width: 850px) {
    .fresh-shell[b-wm2huobvhc] { height: auto; flex-basis: auto; min-height: 620px; overflow: auto; }
    .fresh-dashboard-body[b-wm2huobvhc],
    .focus-workspace[b-wm2huobvhc] { grid-template-columns: 1fr; }
    .fresh-category-rail[b-wm2huobvhc],
    .focus-sidebar[b-wm2huobvhc] { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
    .board-commandbar[b-wm2huobvhc] { grid-template-columns: 1fr; }
    .board-filterbar[b-wm2huobvhc] { align-items: stretch; flex-direction: column; }
}

/* จัดสิทธิ์ตามกลุ่มหน้าจอ */
.permission-list.grouped[b-wm2huobvhc] {
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
}

.permission-group-section[b-wm2huobvhc] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #cfddec;
    border-radius: 11px;
    box-shadow: 0 3px 10px rgba(25, 61, 104, .05);
}

.permission-group-section > header[b-wm2huobvhc] {
    min-height: 52px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(90deg, #eaf3ff, #f7faff);
    border-bottom: 1px solid #c9daec;
    box-shadow: inset 4px 0 #1767c8;
}

.permission-group-icon[b-wm2huobvhc] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: #1767c8;
    background: #fff;
    border: 1px solid #c7dbf1;
    border-radius: 9px;
}

.permission-group-section > header > div[b-wm2huobvhc] {
    min-width: 0;
    display: grid;
}

.permission-group-section > header small[b-wm2huobvhc] {
    color: #3977bd;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.permission-group-section > header strong[b-wm2huobvhc] {
    color: #15375e;
    font-size: 13px;
}

.permission-group-summary[b-wm2huobvhc] {
    margin-left: auto;
    padding: 4px 9px;
    color: #56708f;
    background: #fff;
    border: 1px solid #cbdced;
    border-radius: 999px;
    font-size: 9px;
    white-space: nowrap;
}

.permission-group-summary b[b-wm2huobvhc] {
    color: #1263bd;
    font-size: 11px;
}

.permission-group-rows[b-wm2huobvhc] {
    padding: 7px;
    display: grid;
    gap: 6px;
    background: #fbfcfe;
}

.permission-group-rows .permission-row[b-wm2huobvhc] {
    min-height: 58px;
    border-color: #dce6f1;
    box-shadow: none;
}

.permission-group-rows .permission-row:last-child[b-wm2huobvhc] {
    margin-bottom: 0;
}



/* ตัวกรองสถานะการกำหนดสิทธิ์ */
.permission-status-filter[b-wm2huobvhc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--roles-border, #d7e2f0);
    border-radius: 10px;
    background: #f4f7fb;
    flex: 0 0 auto;
}

.permission-status-filter button[b-wm2huobvhc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #63758d;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.permission-status-filter button:hover[b-wm2huobvhc] {
    background: #e7eef8;
    color: #155db4;
}

.permission-status-filter button.active[b-wm2huobvhc] {
    background: #1769c7;
    color: #fff;
    box-shadow: 0 2px 7px rgba(23, 105, 199, .22);
}

@media (max-width: 900px) {
    .permission-status-filter[b-wm2huobvhc] {
        width: 100%;
    }

    .permission-status-filter button[b-wm2huobvhc] {
        flex: 1 1 0;
        padding-inline: 8px;
    }
}


.permission-header > div:first-child[b-wm2huobvhc] {
    min-width: 160px;
    flex: 1 1 auto;
}

.permission-header-controls[b-wm2huobvhc] {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 1 auto;
    gap: 12px;
}

.permission-header-controls .permission-status-filter[b-wm2huobvhc] {
    width: auto;
    max-width: 100%;
    margin-left: auto;
}

.permission-header-controls .permission-actions[b-wm2huobvhc] {
    width: auto;
    flex: 0 0 auto;
}

@media (max-width: 1280px) {
    .permission-header[b-wm2huobvhc] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .permission-header-controls[b-wm2huobvhc] {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .permission-header-controls .permission-status-filter[b-wm2huobvhc] {
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .permission-header[b-wm2huobvhc] {
        min-height: 0;
        padding: 12px;
        gap: 12px;
    }

    .permission-header-controls[b-wm2huobvhc] {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .permission-header-controls .permission-status-filter[b-wm2huobvhc],
    .permission-header-controls .permission-actions[b-wm2huobvhc] {
        width: 100%;
    }

    .permission-header-controls .permission-status-filter button[b-wm2huobvhc],
    .permission-header-controls .permission-actions > button[b-wm2huobvhc] {
        min-width: 0;
        flex: 1 1 0;
    }

    .workspace-tools[b-wm2huobvhc] {
        padding-inline: 10px;
    }

    .workspace-tools .group-chips[b-wm2huobvhc] {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .permission-status-filter[b-wm2huobvhc] {
        gap: 2px;
        padding: 3px;
    }

    .permission-status-filter button[b-wm2huobvhc] {
        min-height: 32px;
        padding-inline: 5px;
        font-size: 10px;
    }

    .permission-status-filter button i[b-wm2huobvhc] {
        display: none;
    }

    .permission-header-controls .permission-actions[b-wm2huobvhc] {
        gap: 5px;
    }
}

/* ปรับรูปแบบหน้ากลุ่มสิทธิ์ที่ 1 ตามขนาดจอ */
@media (max-width: 1180px) {
    .roles-v1 .command-layout[b-wm2huobvhc] {
        height: 0;
        max-height: none;
        min-height: 0;
        flex: 1 1 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 132px minmax(0, 1fr);
        overflow: hidden;
    }

    .roles-v1 .role-rail[b-wm2huobvhc] {
        min-height: 0;
        max-height: 132px;
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr) auto;
        align-items: stretch;
        overflow: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .roles-v1 .rail-search[b-wm2huobvhc] {
        height: 42px;
        margin: auto 10px;
    }

    .roles-v1 .role-list[b-wm2huobvhc] {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 8px 4px;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .roles-v1 .role-card[b-wm2huobvhc] {
        min-width: 180px;
        max-width: 210px;
        flex: 0 0 180px;
    }

    .roles-v1 .rail-footer[b-wm2huobvhc] {
        width: auto;
        height: 100%;
        padding: 8px 10px;
        flex-direction: column;
        justify-content: center;
        border-top: 0;
        border-left: 1px solid var(--line);
    }
}

@media (max-width: 900px) {
    .roles-designer.roles-v1[b-wm2huobvhc] {
        height: calc(100dvh - 89px - var(--bb-footer-height, 40px));
        min-height: 520px;
        overflow: hidden;
    }

    .roles-v1 .command-layout[b-wm2huobvhc] {
        grid-template-rows: 122px minmax(0, 1fr);
    }

    .roles-v1 .role-rail[b-wm2huobvhc] {
        max-height: 122px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 52px minmax(0, 1fr);
        grid-template-areas:
            "search search"
            "roles footer";
    }

    .roles-v1 .rail-search[b-wm2huobvhc] {
        grid-area: search;
        height: 40px;
        margin: 6px 10px;
    }

    .roles-v1 .role-list[b-wm2huobvhc] {
        grid-area: roles;
        padding: 4px 8px 7px;
    }

    .roles-v1 .rail-footer[b-wm2huobvhc] {
        grid-area: footer;
    }

    .roles-v1 .permission-header[b-wm2huobvhc] {
        min-height: 0;
        padding: 9px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .roles-v1 .permission-header > div:first-child[b-wm2huobvhc] {
        width: 100%;
    }

    .roles-v1 .permission-header h2[b-wm2huobvhc] {
        font-size: 18px;
    }

    .roles-v1 .permission-header p[b-wm2huobvhc] {
        margin: 0;
    }

    .roles-v1 .permission-header-controls[b-wm2huobvhc] {
        width: 100%;
        margin-left: 0;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
    }

    .roles-v1 .permission-header-controls .permission-status-filter[b-wm2huobvhc],
    .roles-v1 .permission-header-controls .permission-actions[b-wm2huobvhc] {
        width: auto;
    }

    .roles-v1 .permission-workspace[b-wm2huobvhc] {
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .roles-v1 .permission-list[b-wm2huobvhc],
    .roles-v1 .permission-list.grouped[b-wm2huobvhc] {
        height: 0;
        min-height: 0;
        max-height: none;
        flex: 1 1 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 620px) {
    .roles-v1 .permission-header-controls[b-wm2huobvhc] {
        align-items: stretch;
        flex-direction: column;
    }

    .roles-v1 .permission-header-controls .permission-status-filter[b-wm2huobvhc],
    .roles-v1 .permission-header-controls .permission-actions[b-wm2huobvhc] {
        width: 100%;
    }

    .roles-v1 .permission-header-controls button[b-wm2huobvhc] {
        min-width: 0;
        flex: 1 1 0;
    }

    .roles-v1 .workspace-tools[b-wm2huobvhc] {
        padding: 7px 9px;
    }

    .roles-v1 .permission-list[b-wm2huobvhc] {
        padding: 8px 9px 12px;
    }
}
/* _content/WMS.UI/Pages/UsersManagement/UsersDesigner.razor.rz.scp.css */
.users-designer[b-ko23kyopbw] {
    --ink: #17233c;
    --muted: #6d7c94;
    --line: #dce5f0;
    --surface: #fff;
    --soft: #f7f9fc;
    --primary: #1768c7;
    --primary-soft: #eaf3ff;
    --success: #0b9858;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 22px 20px;
    color: var(--ink);
    background: #f4f7fb;
    overflow: auto;
    font-family: "Sarabun", sans-serif;
}

.users-designer button[b-ko23kyopbw],
.users-designer input[b-ko23kyopbw],
.users-designer select[b-ko23kyopbw] {
    font: inherit;
}

.users-hero[b-ko23kyopbw] {
    margin-bottom: 14px;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.users-eyebrow[b-ko23kyopbw],
.section-label[b-ko23kyopbw],
.flow-heading > span[b-ko23kyopbw] {
    color: var(--primary);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .14em;
}

.users-hero h1[b-ko23kyopbw] {
    margin: 0 0 2px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: -.015em;
}

.users-hero p[b-ko23kyopbw],
.editor-header p[b-ko23kyopbw],
.flow-heading p[b-ko23kyopbw] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.hero-actions[b-ko23kyopbw],
.editor-footer[b-ko23kyopbw],
.flow-nav[b-ko23kyopbw] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.button-primary[b-ko23kyopbw],
.button-secondary[b-ko23kyopbw],
.button-danger[b-ko23kyopbw] {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    border: 1px solid var(--line);
    font-weight: 750;
    transition: .16s ease;
}

.button-primary[b-ko23kyopbw] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 7px 16px rgba(23, 104, 199, .18);
}

.button-secondary[b-ko23kyopbw] {
    color: #40516d;
    background: #fff;
}

.button-danger[b-ko23kyopbw] {
    color: #bd3542;
    background: #fff1f2;
    border-color: #f4c5ca;
}

.button-primary:hover:not(:disabled)[b-ko23kyopbw],
.button-secondary:hover:not(:disabled)[b-ko23kyopbw],
.button-danger:hover:not(:disabled)[b-ko23kyopbw] {
    transform: translateY(-1px);
    filter: brightness(.98);
}

button:disabled[b-ko23kyopbw],
input:disabled[b-ko23kyopbw] {
    opacity: .5;
    cursor: not-allowed;
}

.directory-search[b-ko23kyopbw] {
    height: 42px;
    min-width: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #7b8ba3;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
}

.directory-search input[b-ko23kyopbw] {
    width: 100%;
    min-width: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
}

.role-filter select[b-ko23kyopbw] {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    color: #42536d;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
}

.user-avatar[b-ko23kyopbw] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 850;
    background: linear-gradient(135deg, #2c7bd5, #174d9d);
    border-radius: 12px;
    box-shadow: 0 5px 12px rgba(28, 87, 157, .18);
}

.user-avatar.large[b-ko23kyopbw],
.large-avatar[b-ko23kyopbw] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 850;
    background: linear-gradient(135deg, #2c7bd5, #174d9d);
    border-radius: 14px;
}

.role-badges[b-ko23kyopbw] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.role-badges > span[b-ko23kyopbw] {
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 750;
}
.role-badges > span i[b-ko23kyopbw] { font-size: 8px; }

    .role-badges .tone-1[b-ko23kyopbw] {
        color: #0b5aae !important;
        background: #e7f2ff;
        border: 1px solid #bddafc;
    }
    .role-badges .tone-2[b-ko23kyopbw] {
        color: #08794a !important;
        background: #e6f7ef;
        border: 1px solid #a9e5cd;
        font-weight:bold !important;
    }
    .role-badges .tone-3[b-ko23kyopbw] {
        color: #7a4bc0 !important;
        background: #f1eaff;
        border: 1px solid #ddccff;
    }
    .role-badges .tone-4[b-ko23kyopbw] {
        color: #a15d00 !important;
        background: #fff2dd;
        border: 1px solid #fcdfae;
    }
    .role-badges .more[b-ko23kyopbw] {
        color: #64748b !important;
        background: #edf1f5;
        border: 1px solid #b8bbbf;
    }
.role-badges .no-role[b-ko23kyopbw] { color: #a13d47; background: #fff0f1; }

/* แบบที่ 1: รายชื่อผู้ใช้และข้อมูลบัญชี */
.directory-layout[b-ko23kyopbw] {
    min-width: 0;
    height: calc(100vh - 166px);
    min-height: 590px;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 12px 34px rgba(28, 61, 102, .07);
}

.user-directory[b-ko23kyopbw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f8fafd;
    border-right: 1px solid var(--line);
}

.directory-tools[b-ko23kyopbw] {
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
}

.directory-summary[b-ko23kyopbw] {
    padding: 0 16px 10px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px;
}

.directory-summary strong[b-ko23kyopbw] {
    color: var(--ink);
}

.status-dot[b-ko23kyopbw] {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    display: inline-block;
    background: var(--success);
    border-radius: 50%;
}

.directory-list[b-ko23kyopbw] {
    min-height: 0;
    padding: 0 9px 12px;
    display: grid;
    align-content: start;
    gap: 5px;
    overflow-y: auto;
}

.directory-card[b-ko23kyopbw] {
    width: 100%;
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 10px;
    color: #43536d;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 11px;
}

.directory-card:hover[b-ko23kyopbw] {
    background: #fff;
    border-color: #dce6f2;
}

.directory-card.active[b-ko23kyopbw] {
    color: #134f96;
    background: #eaf3ff;
    border-color: #b9d4f3;
    box-shadow: inset 3px 0 var(--primary);
}

.directory-copy[b-ko23kyopbw] {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.directory-copy > span:first-child[b-ko23kyopbw] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.directory-copy strong[b-ko23kyopbw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-copy small[b-ko23kyopbw] {
    padding: 2px 6px;
    color: #087a49;
    background: #e6f7ef;
    border-radius: 999px;
    font-size: 8px;
}

.directory-copy small.locked[b-ko23kyopbw] {
    color: #b33d47;
    background: #fff0f1;
}

/* ส่วนแก้ไขบัญชีที่ใช้ร่วมกัน */
.user-editor[b-ko23kyopbw] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.editor-header[b-ko23kyopbw] {
    min-height: 86px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
}

.editor-user[b-ko23kyopbw] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.editor-user h2[b-ko23kyopbw] {
    margin: 2px 0;
    font-size: 21px;
    font-weight: 850;
}

.icon-danger[b-ko23kyopbw] {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #bd3542;
    background: #fff1f2;
    border: 1px solid #f1c9cd;
    border-radius: 9px;
}

.editor-body[b-ko23kyopbw] {
    min-height: 0;
    padding: 16px 18px;
    display: grid;
    align-content: start;
    gap: 13px;
    overflow-y: auto;
    background: #fbfcfe;
}

.form-section[b-ko23kyopbw] {
    padding: 15px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.section-heading[b-ko23kyopbw] {
    margin-bottom: 13px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.section-heading > span[b-ko23kyopbw] {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--primary);
    background: var(--primary-soft);
    border-radius: 9px;
}

.section-heading > div[b-ko23kyopbw] {
    display: grid;
}

.section-heading small[b-ko23kyopbw] {
    color: var(--muted);
    font-size: 10px;
}

.section-heading > b[b-ko23kyopbw] {
    padding: 4px 8px;
    color: #0c65bd;
    background: #e9f4ff;
    border-radius: 999px;
    font-size: 10px;
}

.form-grid[b-ko23kyopbw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.form-grid label[b-ko23kyopbw],
.account-form-card label[b-ko23kyopbw] {
    display: grid;
    gap: 6px;
}

.form-grid label > span[b-ko23kyopbw],
.account-form-card label > span[b-ko23kyopbw] {
    color: #4d5d75;
    font-size: 11px;
    font-weight: 750;
}

.form-grid input[b-ko23kyopbw],
.account-form-card input[b-ko23kyopbw] {
    width: 100%;
    height: 43px;
    padding: 0 12px;
    color: var(--ink);
    background: #fbfcfe;
    border: 1px solid #d4deea;
    border-radius: 9px;
    outline: 0;
}

.form-grid input:focus[b-ko23kyopbw],
.account-form-card input:focus[b-ko23kyopbw] {
    border-color: #68a2e3;
    box-shadow: 0 0 0 3px rgba(31, 112, 205, .10);
}

.role-options[b-ko23kyopbw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.role-option[b-ko23kyopbw],
.flow-role-card[b-ko23kyopbw] {
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    background: #fbfcfe;
    border: 1px solid #dfe7f0;
    border-radius: 10px;
}

.role-option input[b-ko23kyopbw],
.flow-role-card input[b-ko23kyopbw] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-option.selected[b-ko23kyopbw],
.flow-role-card.selected[b-ko23kyopbw] {
    background: #eef7ff;
    border-color: #9bc7f3;
}

.role-option-icon[b-ko23kyopbw] {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #54708f;
    background: #edf2f7;
    border-radius: 9px;
}

.role-option.selected .role-option-icon[b-ko23kyopbw],
.flow-role-card.selected .role-option-icon[b-ko23kyopbw] {
    color: #08794a;
    background: #ddf4e9;
}

.role-option > span:nth-child(3)[b-ko23kyopbw],
.flow-role-card > span:nth-child(3)[b-ko23kyopbw] {
    min-width: 0;
    display: grid;
}

.role-option small[b-ko23kyopbw],
.flow-role-card small[b-ko23kyopbw] {
    color: var(--muted);
    font-size: 9px;
}

.role-option > i[b-ko23kyopbw],
.flow-role-card > i[b-ko23kyopbw] {
    color: transparent;
}

.role-option.selected > i[b-ko23kyopbw],
.flow-role-card.selected > i[b-ko23kyopbw] {
    color: var(--success);
}

.editor-footer[b-ko23kyopbw] {
    min-height: 62px;
    padding: 10px 18px;
    justify-content: flex-end;
    background: #fff;
    border-top: 1px solid var(--line);
}

.empty-editor[b-ko23kyopbw] {
    margin: auto;
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

.empty-editor > i[b-ko23kyopbw] {
    color: #8ea8c5;
    font-size: 42px;
}

.empty-editor h3[b-ko23kyopbw] {
    margin: 10px 0 3px;
    color: var(--ink);
}

/* แบบที่ 2: ตารางจัดการผู้ใช้งาน */
.operations-layout[b-ko23kyopbw] {
    min-width: 0;
}

.operations-summary[b-ko23kyopbw] {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.operations-summary article[b-ko23kyopbw] {
    min-width: 0;
    height: 74px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
}

.metric-icon[b-ko23kyopbw] {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
}

.metric-icon.blue[b-ko23kyopbw] { color: #1768c7; background: #e8f3ff; }
.metric-icon.green[b-ko23kyopbw] { color: #0a9155; background: #e5f7ed; }
.metric-icon.orange[b-ko23kyopbw] { color: #c47700; background: #fff1d9; }
.metric-icon.purple[b-ko23kyopbw] { color: #7545b7; background: #f0e8ff; }

.operations-summary article > span:last-child[b-ko23kyopbw] {
    display: grid;
}

.operations-summary small[b-ko23kyopbw] {
    color: var(--muted);
    font-size: 10px;
}

.operations-summary strong[b-ko23kyopbw] {
    font-size: 22px;
}

.table-card[b-ko23kyopbw] {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(28, 61, 102, .05);
}

.table-toolbar[b-ko23kyopbw] {
    min-height: 66px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.toolbar-left[b-ko23kyopbw] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(220px, 340px) 150px;
    gap: 8px;
}

.toolbar-right[b-ko23kyopbw] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted);
    font-size: 11px;
}

.users-table[b-ko23kyopbw] {
    min-width: 850px;
    max-height: calc(100vh - 350px);
    min-height: 420px;
    overflow-y: auto;
}

.table-card[b-ko23kyopbw] {
    overflow-x: auto;
}

.users-table-head[b-ko23kyopbw],
.users-table-row[b-ko23kyopbw] {
    min-height: 54px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 34px minmax(190px, .8fr) minmax(260px, 1.25fr) 100px 96px;
    align-items: center;
    gap: 10px;
}

.users-table-head[b-ko23kyopbw] {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 42px;
    color: #fff;
    background: #2168bb;
    border-bottom: 1px solid #185aa8;
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.users-table-row[b-ko23kyopbw] {
    border-bottom: 1px solid #e8edf4;
}

.users-table-row:hover[b-ko23kyopbw],
.users-table-row.selected[b-ko23kyopbw] {
    background: #f4f9ff;
}

.table-user[b-ko23kyopbw] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-align: left;
    background: transparent;
    border: 0;
}

.table-user > span:last-child[b-ko23kyopbw] {
    min-width: 0;
    display: grid;
}

.table-user strong[b-ko23kyopbw],
.table-user small[b-ko23kyopbw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-user small[b-ko23kyopbw] {
    max-width: 180px;
    color: var(--muted);
    font-size: 8px;
}
.table-user strong i[b-ko23kyopbw],
.table-user small i[b-ko23kyopbw] {
    display: inline-block;
    width: 14px;
    color: #2a82d2;
    text-align: center;
}
.table-user small i[b-ko23kyopbw] { color: #7fa4c8; }

.status-pill[b-ko23kyopbw] {
    width: fit-content;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 750;
}

.status-pill i[b-ko23kyopbw] {
    width: 11px;
    height: auto;
    text-align: center;
    font-size: 9px;
}

    .status-pill.active[b-ko23kyopbw] {
        color: #08794a;
        background: #e6f7ef;
        border: 1px solid #a9e5cd;
    }

.status-pill.active i[b-ko23kyopbw] {
    color: #0b9b5b;
}

.status-pill.locked[b-ko23kyopbw] {
    color: #b13d47;
    background: #fff0f1;
}

.status-pill.locked i[b-ko23kyopbw] {
    color: #d94b55;
}

.row-actions[b-ko23kyopbw] {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.row-actions button[b-ko23kyopbw] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #50647f;
    background: #fff;
    border: 1px solid #d7e0eb;
    border-radius: 8px;
}

.row-actions button:last-child[b-ko23kyopbw] {
    color: #bd3542;
}

.drawer-backdrop[b-ko23kyopbw] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(20, 31, 50, .34);
}

.drawer-editor[b-ko23kyopbw] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: min(620px, calc(100vw - 20px));
    box-shadow: -18px 0 55px rgba(14, 28, 51, .22);
}

.drawer-editor .editor-body[b-ko23kyopbw] {
    flex: 1;
}

/* แบบที่ 3: ขั้นตอนเพิ่มผู้ใช้งาน */
.onboarding-layout[b-ko23kyopbw] {
    min-width: 0;
    min-height: 630px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(28, 61, 102, .07);
}

.flow-steps[b-ko23kyopbw] {
    min-height: 76px;
    padding: 14px clamp(18px, 7vw, 100px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafd;
    border-bottom: 1px solid var(--line);
}

.flow-steps button[b-ko23kyopbw] {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 4px;
    color: #8794a8;
    background: transparent;
    border: 0;
}

.flow-steps button[b-ko23kyopbw]::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(50% + 22px);
    width: calc(100% - 44px);
    height: 2px;
    background: #dce4ee;
}

.flow-steps button:last-child[b-ko23kyopbw]::after {
    display: none;
}

.flow-steps button > span[b-ko23kyopbw] {
    position: relative;
    z-index: 1;
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    background: #e6ebf2;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 850;
}

.flow-steps button strong[b-ko23kyopbw] {
    font-size: 10px;
}

.flow-steps button.active[b-ko23kyopbw],
.flow-steps button.done[b-ko23kyopbw] {
    color: var(--primary);
}

.flow-steps button.active > span[b-ko23kyopbw],
.flow-steps button.done > span[b-ko23kyopbw] {
    color: #fff;
    background: var(--primary);
}

.flow-steps button.done[b-ko23kyopbw]::after {
    background: #73a9e6;
}

.flow-content[b-ko23kyopbw] {
    padding: clamp(18px, 3vw, 34px);
}

.flow-heading[b-ko23kyopbw] {
    max-width: 760px;
    margin: 0 auto 20px;
    text-align: center;
}

.flow-heading h2[b-ko23kyopbw] {
    margin: 4px 0;
    font-size: 24px;
    font-weight: 850;
}

.flow-tools[b-ko23kyopbw] {
    max-width: 740px;
    margin: 0 auto 14px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 160px;
    gap: 8px;
}

.flow-user-grid[b-ko23kyopbw],
.flow-role-grid[b-ko23kyopbw] {
    max-width: 1020px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.flow-user-card[b-ko23kyopbw] {
    min-height: 160px;
    padding: 16px;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 8px;
    color: var(--ink);
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    transition: .16s ease;
}

.flow-user-card:hover[b-ko23kyopbw] {
    border-color: #8ebcef;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(28, 87, 157, .10);
}

.flow-user-card > small.active[b-ko23kyopbw] {
    color: #08794a;
}

.flow-user-card > small.locked[b-ko23kyopbw] {
    color: #b13d47;
}

.flow-user-card.create[b-ko23kyopbw] {
    place-items: center;
    align-content: center;
    color: var(--primary);
    text-align: center;
    background: #f2f8ff;
    border-style: dashed;
}

.flow-user-card.create > i[b-ko23kyopbw] {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: #e0efff;
    border-radius: 50%;
}

.account-form-card[b-ko23kyopbw] {
    max-width: 680px;
    margin: 0 auto;
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 8px 22px rgba(28, 61, 102, .06);
}

.form-note[b-ko23kyopbw] {
    grid-column: 1 / -1;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #53677f;
    background: #f0f6fc;
    border-radius: 9px;
    font-size: 11px;
}

.flow-role-grid[b-ko23kyopbw] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flow-role-card[b-ko23kyopbw] {
    min-height: 82px;
    padding: 13px;
}

.flow-nav[b-ko23kyopbw] {
    max-width: 1020px;
    margin: 22px auto 0;
    justify-content: space-between;
}

.review-account[b-ko23kyopbw] {
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.review-profile[b-ko23kyopbw] {
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: #f4f9ff;
    border-bottom: 1px solid var(--line);
}

.review-profile > span:last-child[b-ko23kyopbw] {
    display: grid;
}

.review-profile small[b-ko23kyopbw],
.review-section > span[b-ko23kyopbw] {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.review-profile strong[b-ko23kyopbw] {
    font-size: 20px;
}

.review-profile em[b-ko23kyopbw] {
    color: #1768c7;
    font-size: 10px;
    font-style: normal;
}

.review-section[b-ko23kyopbw] {
    min-height: 58px;
    padding: 12px 18px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #e7edf4;
}

.review-section:last-child[b-ko23kyopbw] {
    border-bottom: 0;
}

.role-badges.review[b-ko23kyopbw] {
    justify-content: flex-start;
}

@media (max-width: 1050px) {
    .users-designer[b-ko23kyopbw] { padding: 14px; }
    .directory-layout[b-ko23kyopbw] { grid-template-columns: 310px minmax(0, 1fr); }
    .role-options[b-ko23kyopbw] { grid-template-columns: 1fr; }
    .operations-summary[b-ko23kyopbw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-user-grid[b-ko23kyopbw],
    .flow-role-grid[b-ko23kyopbw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .users-hero[b-ko23kyopbw] { align-items: stretch; flex-direction: column; }
    .hero-actions[b-ko23kyopbw] { width: 100%; }
    .hero-actions > button[b-ko23kyopbw] { flex: 1; }
    .directory-layout[b-ko23kyopbw] { height: auto; grid-template-columns: 1fr; }
    .user-directory[b-ko23kyopbw] { max-height: 310px; border-right: 0; border-bottom: 1px solid var(--line); }
    .split-editor[b-ko23kyopbw] { min-height: 560px; }
    .form-grid[b-ko23kyopbw] { grid-template-columns: 1fr; }
    .operations-summary[b-ko23kyopbw] { grid-template-columns: repeat(2, 1fr); }
    .table-toolbar[b-ko23kyopbw] { align-items: stretch; flex-direction: column; }
    .toolbar-left[b-ko23kyopbw] { grid-template-columns: minmax(0, 1fr) 130px; }
    .toolbar-right[b-ko23kyopbw] { justify-content: flex-end; }
    .flow-steps[b-ko23kyopbw] { padding: 12px; }
    .flow-steps button strong[b-ko23kyopbw] { display: none; }
    .flow-user-grid[b-ko23kyopbw],
    .flow-role-grid[b-ko23kyopbw] { grid-template-columns: 1fr; }
    .account-form-card[b-ko23kyopbw] { grid-template-columns: 1fr; }
    .form-note[b-ko23kyopbw] { grid-column: auto; }
}

@media (max-width: 480px) {
    .users-designer[b-ko23kyopbw] { padding: 10px; }
    .users-hero h1[b-ko23kyopbw] { font-size: 23px; }
    .directory-tools[b-ko23kyopbw],
    .toolbar-left[b-ko23kyopbw],
    .flow-tools[b-ko23kyopbw] { grid-template-columns: 1fr; }
    .operations-summary[b-ko23kyopbw] { grid-template-columns: 1fr 1fr; }
    .operations-summary article[b-ko23kyopbw] { padding: 10px; }
    .editor-header[b-ko23kyopbw] { align-items: flex-start; }
    .editor-user[b-ko23kyopbw] { align-items: flex-start; }
    .editor-footer > button[b-ko23kyopbw] { flex: 1; }
    .flow-content[b-ko23kyopbw] { padding: 15px; }
    .review-section[b-ko23kyopbw] { grid-template-columns: 1fr; }
}


/* ตรึงส่วนหัวของหน้าผู้ใช้แบบที่ 2 และให้เลื่อนเฉพาะตาราง */
.users-v2[b-ko23kyopbw] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.users-v2 .users-hero[b-ko23kyopbw] {
    flex: 0 0 auto;
}

.users-v2 .operations-layout[b-ko23kyopbw] {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.users-v2 .operations-summary[b-ko23kyopbw] {
    flex: 0 0 auto;
}

.users-v2 .table-card[b-ko23kyopbw] {
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.users-v2 .table-toolbar[b-ko23kyopbw] {
    flex: 0 0 auto;
}

.users-v2 .users-component-host[b-ko23kyopbw] {
    width: 100%;
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
}

.users-v2[b-ko23kyopbw]  .users-component-table {
    height: 100%;
}

.users-v2[b-ko23kyopbw]  .users-component-table .table-container {
    height: 100%;
    min-height: 0;
}

.users-v2[b-ko23kyopbw]  .users-component-table .table-header {
    color: #fff;
    background: #1f65bb;
}

.users-v2[b-ko23kyopbw]  .users-component-table .table-footer {
    min-height: 44px;
    padding: 5px 10px 8px;
    background: #fff;
    border-top: 1px solid var(--line);
}

.users-v2[b-ko23kyopbw]  .users-component-table .table-row {
    min-height: 46px;
}

.users-v2[b-ko23kyopbw]  .users-component-table .table-cell {
    vertical-align: middle;
}

.users-v2 .users-table[b-ko23kyopbw] {
    width: 100%;
    height: 0;
    min-height: 0;
    max-height: none;
    flex: 1 1 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #9aa9bb transparent;
}

.users-v2 .users-table[b-ko23kyopbw]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.users-v2 .users-table[b-ko23kyopbw]::-webkit-scrollbar-thumb {
    background: #9aa9bb;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

@media (max-width: 760px) {
    .users-v2[b-ko23kyopbw] {
        height: calc(100dvh - 89px - var(--bb-footer-height, 40px));
        min-height: 520px;
        padding: 12px 10px;
        overflow: hidden;
    }

    .users-v2 .operations-summary[b-ko23kyopbw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-v2 .operations-summary article[b-ko23kyopbw] {
        height: 66px;
    }

    .users-v2 .table-toolbar[b-ko23kyopbw] {
        padding: 9px 10px;
    }

    .users-v2 .users-table[b-ko23kyopbw] {
        min-width: 760px;
    }
}

@media (max-width: 480px) {
    .users-v2 .operations-summary[b-ko23kyopbw] {
        gap: 6px;
    }

    .users-v2 .operations-summary article[b-ko23kyopbw] {
        height: 60px;
        padding: 7px 9px;
    }

    .users-v2 .metric-icon[b-ko23kyopbw] {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}


.users-pagination[b-ko23kyopbw] {
    min-height: 48px;
    padding: 7px 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    background: #fff;
    border-top: 1px solid var(--line);
    font-size: 11px;
}

.pagination-range[b-ko23kyopbw] {
    white-space: nowrap;
}

.page-size[b-ko23kyopbw] {
    margin-right: auto;
}

.page-size select[b-ko23kyopbw] {
    min-height: 34px;
    padding: 0 28px 0 10px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: 0;
}

.page-navigation[b-ko23kyopbw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.page-navigation span[b-ko23kyopbw] {
    min-width: 52px;
    color: var(--ink);
    text-align: center;
    font-weight: 700;
}

.page-navigation button[b-ko23kyopbw] {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    color: #41617f;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.page-navigation button:hover:not(:disabled)[b-ko23kyopbw] {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

.page-navigation button:disabled[b-ko23kyopbw] {
    opacity: .4;
    cursor: not-allowed;
}

/* จัดหัวรายการให้กระชับตามรูปแบบรายงานสินค้าขาเข้า */
.users-list-heading[b-ko23kyopbw] {
    min-height: 58px;
    padding: 10px 14px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #fff;
    border-bottom: 1px solid var(--line);
}
.users-list-heading h2[b-ko23kyopbw] { margin: 0; color: var(--ink); font-size: 16px; font-weight: 850; }
.users-list-heading p[b-ko23kyopbw] { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.users-live-badge[b-ko23kyopbw] {
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #087949;
    background: #e4f9ef;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}
.users-live-badge i[b-ko23kyopbw] { width: 6px; height: 6px; background: #10a562; border-radius: 50%; }

/* ใช้ความหนาแน่นและการจัดแนวตารางตามหน้าสินค้าขาเข้า */
.users-v2 .users-table-head[b-ko23kyopbw],
.users-v2 .users-table-row[b-ko23kyopbw] {
    min-height: 44px;
    grid-template-columns: 34px minmax(220px, .9fr) minmax(300px, 1.35fr) 100px 96px;
}
.users-v2 .users-table-head[b-ko23kyopbw] { min-height: 42px; background: #1f65bb; }
.users-v2 .users-table-row[b-ko23kyopbw] { padding-block: 4px; }
.users-v2 .table-user .user-avatar[b-ko23kyopbw] { width: 34px; height: 34px; flex-basis: 34px; color: #fff !important; border-radius: 9px; }
.users-v2 .table-user strong[b-ko23kyopbw] { color: #18314f; font-size: 11px; }
.users-v2 .table-user small[b-ko23kyopbw] { font-size: 8px; }
.users-v2 .table-toolbar[b-ko23kyopbw] { min-height: 52px; padding: 7px 12px; }
.users-v2 .directory-search[b-ko23kyopbw],
.users-v2 .role-filter select[b-ko23kyopbw] { height: 38px; }
.users-v2 .users-pagination[b-ko23kyopbw] { min-height: 44px; padding-block: 5px; }

.user-confirm-backdrop[b-ko23kyopbw] {
    position: fixed;
    inset: 0;
    z-index: 2050;
    padding: 20px;
    display: grid;
    place-items: center;
    background: rgba(15, 23, 42, .58);
    backdrop-filter: blur(2px);
}
.user-confirm-dialog[b-ko23kyopbw] { width: min(480px, calc(100vw - 40px)); overflow: hidden; background: #fff; border: 1px solid #d7e1ed; border-radius: 14px; box-shadow: 0 25px 70px rgba(15,23,42,.28); }
.user-confirm-header[b-ko23kyopbw] { padding: 17px 18px; display: grid; grid-template-columns: 44px 1fr 37px; align-items: center; gap: 12px; border-bottom: 1px solid #e4eaf2; }
.user-confirm-header h2[b-ko23kyopbw] { margin: 2px 0 0; color: #12213f; font-size: 18px; font-weight: 850; }
.user-confirm-icon[b-ko23kyopbw] { width: 44px; height: 44px; display: grid; place-items: center; color: #dc2626; background: #fee7e7; border-radius: 11px; font-size: 17px; }
.user-confirm-close[b-ko23kyopbw] { width: 37px; height: 37px; display: grid; place-items: center; color: #64748b; background: #eef2f7; border: 0; border-radius: 9px; }
.user-confirm-close:hover:not(:disabled)[b-ko23kyopbw] { color: #dc2626; background: #fee7e7; }
.user-confirm-body[b-ko23kyopbw] { padding: 18px; }
.user-confirm-body > p[b-ko23kyopbw] { margin: 0 0 14px; color: #52627a; font-size: 12px; line-height: 1.55; }
.delete-user-summary[b-ko23kyopbw] { padding: 12px; display: flex; align-items: center; gap: 11px; background: #f6f9fd; border: 1px solid #dbe5f0; border-radius: 10px; }
.delete-user-summary > span:last-child[b-ko23kyopbw] { min-width: 0; display: grid; gap: 2px; }
.delete-user-summary small[b-ko23kyopbw] { color: #8290a5; font-size: 9px; }
.delete-user-summary strong[b-ko23kyopbw] { overflow: hidden; color: #17233c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.delete-user-summary em[b-ko23kyopbw] { color: #6d7c94; font-size: 10px; font-style: normal; }
.user-confirm-footer[b-ko23kyopbw] { padding: 10px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #e4eaf2; }
.confirm-delete-user[b-ko23kyopbw] { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #dc2626; border: 1px solid #dc2626; border-radius: 9px; font-weight: 750; }
.confirm-delete-user:hover:not(:disabled)[b-ko23kyopbw] { background: #b91c1c; border-color: #b91c1c; }
.confirm-delete-user:disabled[b-ko23kyopbw], .user-confirm-close:disabled[b-ko23kyopbw] { cursor: not-allowed; opacity: .6; }

@media (max-width: 480px) {
    .users-pagination[b-ko23kyopbw] {
        padding-inline: 8px;
        gap: 6px;
    }

    .page-size select[b-ko23kyopbw] {
        padding-inline: 7px 22px;
        font-size: 10px;
    }

    .page-navigation button[b-ko23kyopbw] {
        width: 31px;
        height: 31px;
    }

    .users-list-heading[b-ko23kyopbw] { align-items: flex-start; }
    .users-list-heading p[b-ko23kyopbw] { display: none; }
    .user-confirm-backdrop[b-ko23kyopbw] { padding: 8px; }
    .user-confirm-dialog[b-ko23kyopbw] { width: calc(100vw - 16px); }
    .user-confirm-footer[b-ko23kyopbw] { flex-direction: column; }
}
/* _content/WMS.UI/Pages/Workstation/Packing/Packing.razor.rz.scp.css */
.packing-page[b-i42d2gz4v4]{--blue:#1269d3;--ink:#10233f;--muted:#708095;--line:#d8e3f0;min-height:100%;padding:18px;display:flex;flex-direction:column;background:#f3f7fc;color:var(--ink)}
.packing-header[b-i42d2gz4v4]{margin-bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.packing-header h1[b-i42d2gz4v4]{margin:3px 0 1px;font-size:25px;font-weight:850}.packing-header p[b-i42d2gz4v4]{margin:0;color:var(--muted);font-size:10px}
.packing-layout[b-i42d2gz4v4]{flex:1;display:flex;min-height:520px}.packing-workspace[b-i42d2gz4v4]{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 7px 20px rgba(25,65,110,.04)}.packing-workspace[b-i42d2gz4v4]{flex:1;min-width:0;padding:14px;overflow:auto;display:flex;flex-direction:column}.packing-scan-stage[b-i42d2gz4v4]{flex:1;min-height:460px;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;text-align:center}.packing-stage-intro[b-i42d2gz4v4]{align-self:end;display:flex;flex-direction:column;align-items:center}.packing-stage-icon[b-i42d2gz4v4]{width:54px;height:54px;display:grid;place-items:center;border-radius:14px;background:#e9f2ff;color:var(--blue);font-size:21px}.packing-scan-stage small[b-i42d2gz4v4]{margin-top:10px;color:var(--blue);font-size:8px;font-weight:850;text-transform:uppercase}.packing-scan-stage h2[b-i42d2gz4v4]{margin:3px 0;font-size:20px}.packing-scan-stage p[b-i42d2gz4v4]{margin:0 0 18px;color:var(--muted);font-size:10px}
.packing-scan-box[b-i42d2gz4v4]{width:min(620px,90%);height:43px;display:flex;align-items:center;padding:3px 3px 3px 12px;border:1px solid #9fc4f3;border-radius:10px;box-shadow:0 8px 22px rgba(18,105,211,.08)}.packing-scan-box:focus-within[b-i42d2gz4v4]{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,105,211,.1)}.packing-scan-box>i[b-i42d2gz4v4]{color:var(--blue)}.packing-scan-box input[b-i42d2gz4v4]{min-width:0;flex:1;height:100%;padding:0 10px;border:0;outline:0;font-size:11px}.packing-scan-box button[b-i42d2gz4v4]{height:35px;padding:0 16px;border:0;border-radius:8px;background:var(--blue);color:#fff;font-size:9px;font-weight:800}.packing-scan-box.small[b-i42d2gz4v4]{width:100%;box-shadow:none}
.packing-section-heading[b-i42d2gz4v4]{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;border-bottom:1px solid var(--line)}.packing-section-heading>span[b-i42d2gz4v4]{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#eaf3ff;color:var(--blue);font-size:17px}.packing-section-heading>div[b-i42d2gz4v4]{flex:1}.packing-section-heading small[b-i42d2gz4v4]{color:var(--blue);font-size:8px;font-weight:850;letter-spacing:.08em}.packing-section-heading h2[b-i42d2gz4v4]{margin:1px 0;font-size:17px}.packing-section-heading p[b-i42d2gz4v4]{margin:0;color:var(--muted);font-size:9px}.packing-section-heading>button[b-i42d2gz4v4],.packing-selected-item>header>button[b-i42d2gz4v4]{padding:7px 10px;border:1px solid #cbd9e9;border-radius:8px;background:#fff;color:#315577;font-size:9px;font-weight:750}.packing-section-heading.compact[b-i42d2gz4v4]{margin-bottom:8px}
.packing-pack-grid[b-i42d2gz4v4]{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:10px}.packing-pack-card[b-i42d2gz4v4]{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid #d5e1ee;border-radius:11px;background:#fff;text-align:left;color:var(--ink);box-shadow:inset 4px 0 #94a3b8}.packing-pack-card:hover:not(:disabled)[b-i42d2gz4v4]{border-color:#86b9f4;background:#f7fbff}.packing-pack-card>span[b-i42d2gz4v4]{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#eef2f7;color:#64748b}.packing-pack-card>div[b-i42d2gz4v4]{min-width:0;flex:1;display:grid}.packing-pack-card small[b-i42d2gz4v4]{color:var(--muted);font-size:8px}.packing-pack-card strong[b-i42d2gz4v4]{font-size:12px}.packing-pack-card p[b-i42d2gz4v4]{margin:2px 0 0;color:var(--muted);font-size:9px}.packing-pack-card em[b-i42d2gz4v4]{padding:4px 7px;border-radius:999px;background:#eef2f7;color:#526174;font-size:8px;font-style:normal;font-weight:800}.packing-pack-card.open[b-i42d2gz4v4]{border-color:#cbd5e1;background:#f8fafc}.packing-pack-card.packing[b-i42d2gz4v4]{border-color:#f2c66d;background:#fffaf0;box-shadow:inset 4px 0 #e69a13}.packing-pack-card.packing>span[b-i42d2gz4v4]{background:#fff0c7;color:#b86f00}.packing-pack-card.packing em[b-i42d2gz4v4]{background:#ffedbd;color:#9a5b00}.packing-pack-card.packing:hover[b-i42d2gz4v4]{border-color:#dfa33a;background:#fff7e3}.packing-pack-card.complete[b-i42d2gz4v4]{border-color:#77cfaa;background:#eefaf4;box-shadow:inset 4px 0 #0a9b68}.packing-pack-card.complete>span[b-i42d2gz4v4]{background:#d6f4e5;color:#07885f}.packing-pack-card.complete em[b-i42d2gz4v4]{background:#ccefdc;color:#06764f}.packing-pack-card.complete:hover[b-i42d2gz4v4]{border-color:#43b887;background:#e5f7ee}
.packing-complete-review[b-i42d2gz4v4]{padding:10px 4px 14px}.packing-complete-banner[b-i42d2gz4v4]{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #b9e5d4;border-radius:10px;background:#f2fbf7}.packing-complete-banner>span[b-i42d2gz4v4]{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#daf5e8;color:#07885f;font-size:17px}.packing-complete-banner>div[b-i42d2gz4v4]{min-width:0}.packing-complete-banner small[b-i42d2gz4v4]{color:#07885f;font-size:8px;font-weight:850;letter-spacing:.08em}.packing-complete-banner h3[b-i42d2gz4v4]{margin:1px 0;font-size:14px}.packing-complete-banner p[b-i42d2gz4v4]{margin:0;color:var(--muted);font-size:9px}.packing-document-actions[b-i42d2gz4v4]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}.packing-document-actions>button[b-i42d2gz4v4]{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #cbdcec;border-radius:10px;background:#fff;text-align:left;color:#174b7d}.packing-document-actions>button:not(:disabled):hover[b-i42d2gz4v4]{border-color:#77adea;background:#f5f9ff}.packing-document-actions>button:disabled[b-i42d2gz4v4]{opacity:.48}.packing-document-actions>button>i[b-i42d2gz4v4]{width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:#eaf3ff;color:var(--blue)}.packing-document-actions>button>span[b-i42d2gz4v4]{min-width:0;display:grid}.packing-document-actions strong[b-i42d2gz4v4]{font-size:10px}.packing-document-actions small[b-i42d2gz4v4]{color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.packing-item-scan[b-i42d2gz4v4]{padding:8px 4px 14px}.packing-item-scan label[b-i42d2gz4v4],.packing-serial-section label[b-i42d2gz4v4],.packing-quantity-section label[b-i42d2gz4v4]{display:block;margin-bottom:6px;font-size:10px;font-weight:800}.packing-selected-item[b-i42d2gz4v4]{padding:8px;border:1px solid #d8e5f2;border-radius:11px;background:#fbfdff}.packing-selected-item>header[b-i42d2gz4v4]{display:flex;align-items:center;gap:10px;padding:5px}.packing-selected-item>header>span[b-i42d2gz4v4]{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#eaf3ff;color:var(--blue)}.packing-selected-item>header>div[b-i42d2gz4v4]{min-width:0;flex:1}.packing-selected-item>header small[b-i42d2gz4v4]{color:var(--blue);font-size:8px;font-weight:800}.packing-selected-item h3[b-i42d2gz4v4]{margin:0;font-size:14px}.packing-selected-item>header p[b-i42d2gz4v4]{margin:1px 0;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.packing-item-meta[b-i42d2gz4v4]{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0}.packing-item-meta>span[b-i42d2gz4v4]{display:grid;padding:8px;background:#f0f5fb;border-radius:8px}.packing-item-meta small[b-i42d2gz4v4]{color:var(--muted);font-size:8px}.packing-item-meta strong[b-i42d2gz4v4]{font-size:12px}.packing-item-meta .available[b-i42d2gz4v4]{color:#079968}.packing-serial-overview[b-i42d2gz4v4]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}.packing-serial-overview>section[b-i42d2gz4v4]{padding:9px;border:1px solid #d8e5f2;border-radius:9px;background:#f7faff}.packing-serial-overview>section.packed[b-i42d2gz4v4]{border-color:#bce8d7;background:#f4fcf8}.packing-serial-overview header[b-i42d2gz4v4]{display:flex;justify-content:space-between;padding:0 0 6px}.packing-serial-overview header span[b-i42d2gz4v4],.packing-serial-overview header strong[b-i42d2gz4v4]{font-size:9px}.packing-serial-overview>section>div[b-i42d2gz4v4]{display:flex;flex-wrap:wrap;gap:4px;max-height:78px;overflow:auto}.packing-serial-overview small[b-i42d2gz4v4]{color:var(--muted);font-size:8px}.packing-serial-overview em[b-i42d2gz4v4]{padding:4px 6px;border-radius:6px;background:#e5f0ff;color:#17528b;font-size:8px;font-style:normal}.packing-serial-overview .packed em[b-i42d2gz4v4]{background:#ddf6eb;color:#087b57}.packing-serial-overview em i[b-i42d2gz4v4]{margin-right:4px}.packing-serial-section[b-i42d2gz4v4],.packing-quantity-section[b-i42d2gz4v4]{padding:10px;border:1px solid #dce6f0;border-radius:9px;background:#fff}.packing-serial-section>div:first-child[b-i42d2gz4v4]{display:flex;justify-content:space-between}.packing-serial-list[b-i42d2gz4v4]{display:flex!important;flex-wrap:wrap;gap:5px;margin-top:8px;color:var(--muted);font-size:9px}.packing-serial-list em[b-i42d2gz4v4]{display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:7px;background:#eaf3ff;color:#164d82;font-style:normal}.packing-serial-list em button[b-i42d2gz4v4]{border:0;background:transparent;color:#e24646}.packing-quantity-section>.packing-scan-box[b-i42d2gz4v4]{width:100%;margin-bottom:10px}.packing-quantity-section>.packing-scan-box input[b-i42d2gz4v4]{width:auto;height:100%;margin:0;text-align:left;border:0}.packing-quantity-input[b-i42d2gz4v4]{display:flex;align-items:center;width:220px}.packing-quantity-input button[b-i42d2gz4v4]{width:38px;height:38px;border:0;border-radius:8px;background:#eaf3ff;color:var(--blue)}.packing-quantity-input input[b-i42d2gz4v4]{width:105px;height:38px;margin:0 5px;text-align:center;border:1px solid #cbd9e9;border-radius:8px}.packing-confirm-button[b-i42d2gz4v4]{width:100%;height:39px;margin-top:9px;border:0;border-radius:8px;background:#08a36f;color:#fff;font-size:10px;font-weight:850}.packing-confirm-button:disabled[b-i42d2gz4v4]{opacity:.45}
.packing-item-list[b-i42d2gz4v4]{margin-top:10px;border-top:1px solid var(--line)}.packing-item-list>button[b-i42d2gz4v4]{width:100%;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:8px;border:0;border-bottom:1px solid #e5edf5;background:#fff;text-align:left}.packing-item-list>button>span:first-child[b-i42d2gz4v4]{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:#eaf3ff;color:var(--blue)}.packing-item-list>button>span:nth-child(2)[b-i42d2gz4v4]{min-width:0;display:grid}.packing-item-list strong[b-i42d2gz4v4]{font-size:10px}.packing-item-list small[b-i42d2gz4v4]{color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.packing-item-list>button>em[b-i42d2gz4v4]{font-size:9px;font-style:normal;font-weight:800}.packing-item-list .done[b-i42d2gz4v4]{opacity:.72}.packing-item-list .done>span:first-child[b-i42d2gz4v4]{background:#ddf6eb;color:#07885f}.packing-row-serials[b-i42d2gz4v4]{display:flex!important;gap:5px;margin-top:3px}.packing-row-serials em[b-i42d2gz4v4]{padding:2px 5px;border-radius:999px;background:#edf3fa;color:#526b87;font-size:7px;font-style:normal}.packing-row-serials em.packed[b-i42d2gz4v4]{background:#ddf6eb;color:#087b57}.packing-row-serials i[b-i42d2gz4v4]{margin-right:3px}
.packing-backdrop[b-i42d2gz4v4]{position:fixed;z-index:2000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(13,31,54,.54);backdrop-filter:blur(2px)}.packing-dialog[b-i42d2gz4v4]{width:min(420px,100%);padding:20px;background:#fff;border-radius:14px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.22)}.packing-dialog-icon[b-i42d2gz4v4]{width:48px;height:48px;margin:auto;display:grid;place-items:center;border-radius:13px;background:#eaf3ff;color:var(--blue);font-size:18px}.packing-dialog-icon.success[b-i42d2gz4v4]{background:#def7eb;color:#079968}.packing-dialog h2[b-i42d2gz4v4]{margin:10px 0 3px;font-size:18px}.packing-dialog>p[b-i42d2gz4v4]{color:var(--muted);font-size:9px}.packing-dialog dl[b-i42d2gz4v4]{padding:8px 10px;background:#f4f7fb;border-radius:9px}.packing-dialog dl div[b-i42d2gz4v4]{display:flex;justify-content:space-between;padding:5px;font-size:9px}.packing-dialog dd[b-i42d2gz4v4]{margin:0;font-weight:800}.packing-dialog-actions[b-i42d2gz4v4]{display:flex;gap:8px;margin-top:12px}.packing-dialog-actions>*[b-i42d2gz4v4]{flex:1}.packing-dialog.result>small[b-i42d2gz4v4]{display:block;margin-top:8px;color:#079968;font-size:8px;font-weight:850}.packing-print-summary[b-i42d2gz4v4]{display:grid;gap:6px;padding:9px;background:#f4f7fb;border-radius:8px;text-align:left}.packing-print-summary span[b-i42d2gz4v4]{font-size:9px}.packing-print-summary i[b-i42d2gz4v4]{width:22px;color:var(--blue)}
.packing-header p[b-i42d2gz4v4],.packing-scan-stage p[b-i42d2gz4v4]{font-size:13px}.packing-scan-stage small[b-i42d2gz4v4],.packing-section-heading small[b-i42d2gz4v4],.packing-selected-item>header small[b-i42d2gz4v4]{font-size:11px}.packing-scan-box input[b-i42d2gz4v4]{font-size:14px}.packing-scan-box button[b-i42d2gz4v4],.packing-section-heading>button[b-i42d2gz4v4],.packing-selected-item>header>button[b-i42d2gz4v4]{font-size:12px}.packing-section-heading p[b-i42d2gz4v4],.packing-pack-card p[b-i42d2gz4v4],.packing-complete-banner p[b-i42d2gz4v4]{font-size:12px}.packing-pack-card small[b-i42d2gz4v4],.packing-pack-card em[b-i42d2gz4v4],.packing-complete-banner small[b-i42d2gz4v4],.packing-document-actions small[b-i42d2gz4v4]{font-size:11px}.packing-pack-card strong[b-i42d2gz4v4],.packing-document-actions strong[b-i42d2gz4v4]{font-size:14px}.packing-item-scan label[b-i42d2gz4v4],.packing-serial-section label[b-i42d2gz4v4],.packing-quantity-section label[b-i42d2gz4v4]{font-size:13px}.packing-selected-item h3[b-i42d2gz4v4]{font-size:17px}.packing-selected-item>header p[b-i42d2gz4v4]{font-size:12px}.packing-item-meta small[b-i42d2gz4v4]{font-size:11px}.packing-item-meta strong[b-i42d2gz4v4]{font-size:15px}.packing-serial-overview header span[b-i42d2gz4v4],.packing-serial-overview header strong[b-i42d2gz4v4],.packing-serial-list[b-i42d2gz4v4],.packing-serial-overview em[b-i42d2gz4v4]{font-size:12px}.packing-serial-overview small[b-i42d2gz4v4]{font-size:11px}.packing-quantity-input input[b-i42d2gz4v4]{font-size:15px}.packing-confirm-button[b-i42d2gz4v4]{font-size:13px}.packing-item-list strong[b-i42d2gz4v4]{font-size:13px}.packing-item-list small[b-i42d2gz4v4]{font-size:11px}.packing-item-list>button>em[b-i42d2gz4v4]{font-size:12px}.packing-row-serials em[b-i42d2gz4v4]{font-size:10px}.packing-dialog>p[b-i42d2gz4v4],.packing-dialog dl div[b-i42d2gz4v4],.packing-print-summary span[b-i42d2gz4v4]{font-size:12px}.packing-dialog.result>small[b-i42d2gz4v4]{font-size:11px}
@media(max-width:900px){.packing-layout[b-i42d2gz4v4]{grid-template-columns:1fr}.packing-item-meta[b-i42d2gz4v4],.packing-serial-overview[b-i42d2gz4v4]{grid-template-columns:repeat(2,1fr)}}

.packing-pack-card[b-i42d2gz4v4]{position:relative;padding-top:26px}.packing-pack-sequence[b-i42d2gz4v4]{position:absolute;top:4px;left:12px;color:var(--blue);font-size:12px;font-weight:800}

/* สถานะของงาน (แบบหน้า Putaway): station, ป้ายสถานะ, แล้ว Container › Pack › ใบสั่ง › ความคืบหน้า */
.packing-banner[b-i42d2gz4v4]{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;gap:18px;padding:18px 22px;margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.packing-banner .banner-icon[b-i42d2gz4v4]{width:74px;height:74px;display:grid;place-items:center;border-radius:16px;color:var(--blue);background:#e7f1ff;font-size:32px}
.packing-banner .banner-station[b-i42d2gz4v4]{display:flex;flex-direction:column}
.packing-banner .banner-station small[b-i42d2gz4v4]{color:var(--blue);font-size:12px;font-weight:800}
.packing-banner .banner-station strong[b-i42d2gz4v4]{color:var(--blue);font-size:44px;font-weight:900;line-height:1.05}
.packing-banner .banner-station.waiting strong[b-i42d2gz4v4]{color:#9aabbf}
.packing-banner .banner-state[b-i42d2gz4v4]{display:flex;flex-direction:column;gap:4px;padding-right:22px;border-right:1px solid #e1e9f1}
.packing-banner .banner-state em[b-i42d2gz4v4]{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;color:#fff;background:#0a9c66;font-size:15px;font-style:normal;font-weight:800}
.packing-banner .banner-state em.idle[b-i42d2gz4v4]{background:#7c8da1}
.packing-banner .banner-state em.working[b-i42d2gz4v4]{background:var(--blue)}
.packing-banner .banner-state strong[b-i42d2gz4v4]{font-size:13px}
.packing-banner .banner-state small[b-i42d2gz4v4]{color:var(--muted);font-size:11px}
.packing-banner .banner-flow[b-i42d2gz4v4]{display:flex;align-items:center;gap:10px}
.packing-banner .banner-flow>div[b-i42d2gz4v4]{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e1e9f1;border-radius:12px;background:#f8fafd}
.packing-banner .banner-flow>div.waiting[b-i42d2gz4v4]{opacity:.55}
.packing-banner .banner-flow>div>span[b-i42d2gz4v4]{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--blue);background:#e7f1ff;font-size:17px}
.packing-banner .banner-flow>div>div[b-i42d2gz4v4]{min-width:0;flex:1;display:flex;flex-direction:column}
.packing-banner .banner-flow small[b-i42d2gz4v4]{color:var(--muted);font-size:10px}
.packing-banner .banner-flow strong[b-i42d2gz4v4]{overflow:hidden;font-size:17px;text-overflow:ellipsis;white-space:nowrap}
.packing-banner .banner-flow>i[b-i42d2gz4v4]{color:#7aa7dc}
.packing-banner .banner-progress[b-i42d2gz4v4]{display:block;height:5px;margin-top:4px;border-radius:99px;background:#e5edf5;overflow:hidden}
.packing-banner .banner-progress i[b-i42d2gz4v4]{display:block;height:100%;background:#08a36f}
@media(max-width:1200px){.packing-banner[b-i42d2gz4v4]{grid-template-columns:auto minmax(0,1fr)}.packing-banner .banner-state[b-i42d2gz4v4]{padding-right:0;border-right:0}.packing-banner .banner-flow[b-i42d2gz4v4]{grid-column:1/-1}}
@media(max-width:700px){.packing-banner .banner-flow[b-i42d2gz4v4]{flex-wrap:wrap}.packing-banner .banner-flow>i[b-i42d2gz4v4]{display:none}.packing-banner .banner-flow>div[b-i42d2gz4v4]{flex-basis:calc(50% - 5px)}}

/* ส่งไป Outbound: ปุ่มใหญ่ล่างสุดของขั้นเลือก Pack เมื่อแพ็คครบทุก Pack */
.packing-send-button[b-i42d2gz4v4]{width:100%;height:56px;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:9px;color:#fff;background:#087f5b;font-size:18px;font-weight:850}
.packing-pack-grid[b-i42d2gz4v4]{margin-bottom:14px}
.packing-send-button:disabled[b-i42d2gz4v4]{opacity:.45}
/* _content/WMS.UI/Pages/Workstation/Packing/PackingStationSelector.razor.rz.scp.css */
.pick-select-page[b-e91w66au5u]{height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:#f4f7fb;color:#10213e;overflow:hidden}.pick-select-loading[b-e91w66au5u]{height:100%;display:grid;place-content:center;justify-items:center;text-align:center}.pick-select-loading>span[b-e91w66au5u]{width:54px;height:54px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:#e5f1ff;color:#1268d3;font-size:22px}.pick-select-loading strong[b-e91w66au5u]{font-size:16px}.pick-select-loading small[b-e91w66au5u]{margin-top:4px;color:#74849a}.pick-select-header[b-e91w66au5u]{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:0 0 auto}.pick-select-eyebrow[b-e91w66au5u]{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#0967d8}.pick-select-header h1[b-e91w66au5u]{margin:2px 0;font-size:28px}.pick-select-header p[b-e91w66au5u]{margin:0;color:#718198;font-size:11px}.pick-select-refresh[b-e91w66au5u]{padding:10px 14px;border:1px solid #d0dcea;border-radius:9px;background:#fff;color:#1c3a5e;font-weight:700;cursor:pointer}.pick-select-summary[b-e91w66au5u]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:0 0 auto}.pick-select-summary article[b-e91w66au5u]{height:74px;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #d7e2ef;border-radius:12px;background:#fff}.pick-select-summary article>span[b-e91w66au5u]{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;font-size:17px}.pick-select-summary .blue[b-e91w66au5u]{color:#1264cf;background:#e8f2ff}.pick-select-summary .green[b-e91w66au5u]{color:#008c61;background:#e1f7ed}.pick-select-summary .orange[b-e91w66au5u]{color:#bd7200;background:#fff1d8}.pick-select-summary article div[b-e91w66au5u]{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}.pick-select-summary small[b-e91w66au5u],.pick-select-summary em[b-e91w66au5u]{font-size:10px;color:#718099;font-style:normal}.pick-select-summary strong[b-e91w66au5u]{grid-row:1/3;grid-column:2;font-size:22px}.pick-select-summary em[b-e91w66au5u]{grid-column:1}.pick-select-workspace[b-e91w66au5u]{min-height:0;flex:1;display:flex;flex-direction:column;padding:12px;border:1px solid #d5e1ef;border-radius:13px;background:#fff;overflow:hidden}.pick-select-toolbar[b-e91w66au5u]{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px}.pick-select-toolbar h2[b-e91w66au5u]{margin:0;font-size:17px}.pick-select-toolbar p[b-e91w66au5u]{margin:2px 0 0;color:#718099;font-size:10px}.pick-select-toolbar label[b-e91w66au5u]{width:300px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #cfdaea;border-radius:9px;color:#6a7890}.pick-select-toolbar input[b-e91w66au5u]{width:100%;padding:9px 0;border:0;outline:0}.pick-select-message[b-e91w66au5u]{display:flex;align-items:center;gap:7px;margin-bottom:10px;padding:9px 11px;border-radius:8px;background:#fff4da;color:#8b5a00;font-size:10px}.pick-select-grid[b-e91w66au5u]{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:10px;overflow-x:hidden;overflow-y:auto;padding:2px 5px 12px 2px}.pick-station-card[b-e91w66au5u]{min-height:max-content;align-self:start;overflow:hidden;border:1px solid #d4e0ee;border-radius:11px;background:#fff;box-shadow:0 3px 9px #17375d0b}.pick-station-card.disabled[b-e91w66au5u]{opacity:.68}.pick-station-card>header[b-e91w66au5u]{display:flex;align-items:center;gap:9px;padding:11px;border-bottom:1px solid #e1e8f1}.pick-station-card>header>span[b-e91w66au5u]{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eaf3ff;color:#146ad5}.pick-station-card>header div[b-e91w66au5u]{min-width:0}.pick-station-card>header small[b-e91w66au5u]{display:block;color:#1670d8;font-size:8px;font-weight:800;letter-spacing:1px}.pick-station-card h3[b-e91w66au5u]{margin:1px 0 0;font-size:15px}.pick-station-card>header em[b-e91w66au5u]{display:flex;align-items:center;gap:4px;margin-left:auto;padding:4px 7px;border:1px solid;border-radius:14px;font-size:9px;font-style:normal;font-weight:700;white-space:nowrap}.pick-station-card>header em.ready[b-e91w66au5u]{color:#087b57;background:#e4f7ee;border-color:#b5e8d1}.pick-station-card>header em.offline[b-e91w66au5u]{color:#a13d3d;background:#fff0f0;border-color:#f1c5c5}.pick-station-runtime[b-e91w66au5u]{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 11px}.pick-station-runtime>div[b-e91w66au5u]{min-width:0;padding:8px;border-radius:8px;background:#f5f8fc}.pick-station-runtime small[b-e91w66au5u],.pick-station-client small[b-e91w66au5u]{display:block;color:#78879a;font-size:8px}.pick-station-runtime strong[b-e91w66au5u],.pick-station-client strong[b-e91w66au5u]{display:block;margin-top:3px;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.pick-station-client[b-e91w66au5u]{display:flex;align-items:center;gap:8px;margin:0 11px 10px;padding:8px;border-radius:8px;background:#f1f5fa;color:#1768cd}.pick-station-client div[b-e91w66au5u]{min-width:0}.pick-station-card>footer[b-e91w66au5u]{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-top:1px solid #e1e8f1;background:#fafcff}.pick-station-card>footer>span[b-e91w66au5u]{color:#75869b;font-size:8px}.pick-station-card>footer button[b-e91w66au5u]{padding:7px 9px;border:1px solid #1769d8;border-radius:8px;background:#1769d8;color:#fff;font-size:9px;font-weight:800;cursor:pointer}.pick-station-card>footer button:disabled[b-e91w66au5u]{border-color:#bcc8d6;background:#d4dce6;cursor:not-allowed}.pick-select-empty[b-e91w66au5u]{height:190px;display:grid;place-content:center;justify-items:center;color:#8290a3}.pick-select-empty>span[b-e91w66au5u]{width:48px;height:48px;display:grid;place-items:center;margin-bottom:8px;border-radius:13px;background:#edf2f8;font-size:18px}.pick-select-empty small[b-e91w66au5u]{margin-top:3px}@media(max-width:1550px){.pick-select-grid[b-e91w66au5u]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){.pick-select-grid[b-e91w66au5u]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:780px){.pick-select-page[b-e91w66au5u]{height:auto;min-height:100%;overflow:auto}.pick-select-summary[b-e91w66au5u]{grid-template-columns:1fr}.pick-select-toolbar[b-e91w66au5u]{align-items:stretch;flex-direction:column}.pick-select-toolbar label[b-e91w66au5u]{width:auto}.pick-select-grid[b-e91w66au5u]{grid-template-columns:1fr;overflow:visible}}
/* _content/WMS.UI/Pages/Workstation/PickingAsrs/PickingAsrs.razor.rz.scp.css */
/* หน้าตาแบบจอ Replen Station: แถบหัวสีน้ำเงินติดกับคอลัมน์ของ station */
/* สูงพอดีจอแบบจอ Replen: คอลัมน์ยืดถึงล่างสุด เนื้อหาที่ยาวเลื่อนในคอลัมน์ */
.pka-page[b-p4gv4pp2rd] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background: #f4f7fb;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar {
    min-height: 58px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #2368b8;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1459a6, #2872c8);
    color: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar > div:first-child {
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar small {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar strong {
    font-size: 19px;
    line-height: 1.15;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar-actions {
    display: flex;
    gap: 8px;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar button {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 8px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 11px;
    font-weight: 750;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar button:hover {
    background: rgb(255 255 255 / 24%);
}

@media (max-width: 600px) {
    .pka-page[b-p4gv4pp2rd]  .pka-toolbar button {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .pka-page[b-p4gv4pp2rd]  .pka-toolbar button span {
        display: none;
    }
}

/* ซ้าย = station เลขคี่, ขวา = station คู่ (รายการ Order อยู่ใน drawer) */
.pka-page[b-p4gv4pp2rd]  .pka-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

/* รายการ Order: drawer เลื่อนออกจากด้านขวา เปิดจากปุ่มบนแถบหัว */
.pka-page[b-p4gv4pp2rd]  .pka-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(13, 31, 54, .35);
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1401;
    width: min(380px, 92vw);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    background: #fff;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    animation: pka-drawer-in-b-p4gv4pp2rd .18s ease-out;
}

@keyframes pka-drawer-in-b-p4gv4pp2rd {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ที่จับขอบซ้ายของ drawer (ลากปรับความกว้าง) */
.pka-page[b-p4gv4pp2rd]  .pka-drawer-resize {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10px;
    cursor: ew-resize;
    touch-action: none;
    transform: translateX(-50%);
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer-resize::after {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 3px;
    height: 48px;
    border-radius: 999px;
    background: #9db8d3;
    content: "";
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity .15s ease, background .15s ease;
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer-resize:hover::after,
.pka-page[b-p4gv4pp2rd]  .pka-drawer-resize.is-resizing::after {
    background: #2674c8;
    opacity: 1;
}

@media (max-width: 560px) {
    .pka-page[b-p4gv4pp2rd]  .pka-drawer-resize {
        display: none;
    }
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer-head h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-drawer-head button {
    width: 34px;
    height: 34px;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    color: #475569;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-toolbar button b {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    color: #1459a6;
    background: #fff;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .pka-page[b-p4gv4pp2rd] {
        height: auto;
        min-height: 100%;
        overflow: visible;
    }

    .pka-page[b-p4gv4pp2rd]  .pka-layout {
        grid-template-columns: 1fr;
    }
}

.pka-page[b-p4gv4pp2rd]  .pka-card {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

/* คอลัมน์ติดแถบหัว: มุมบนไม่โค้ง */
.pka-page[b-p4gv4pp2rd]  .pka-toolbar + .pka-layout > .pka-station,
.pka-page[b-p4gv4pp2rd]  .pka-toolbar + .pka-layout > .pka-card,
.pka-page[b-p4gv4pp2rd]  .pka-toolbar + .pka-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.pka-page[b-p4gv4pp2rd]  .pka-station {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 6%);
}

.pka-page[b-p4gv4pp2rd]  .pka-station-header {
    min-height: 67px;
    padding: 12px 14px 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #174c8d, #246bc0);
}

.pka-page[b-p4gv4pp2rd]  .pka-station-header.is-disabled { background: #64748b; }

.pka-page[b-p4gv4pp2rd]  .pka-station-header small {
    display: block;
    margin-bottom: 2px;
    color: rgb(255 255 255 / 70%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
}

.pka-page[b-p4gv4pp2rd]  .pka-station-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 750;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-station-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pka-page[b-p4gv4pp2rd]  .pka-mode {
    min-height: 28px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-mode.pick { color: #064e3b; background: #d1fae5; }
.pka-page[b-p4gv4pp2rd]  .pka-mode.pack { color: #7c2d12; background: #ffedd5; }

/* ปุ่มหลักข้างล่างของ station แบบจอ Replen */
.pka-page[b-p4gv4pp2rd]  .pka-station-foot {
    padding: 12px 16px;
    border-top: 1px solid #e3eaf2;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-foot-button {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #2563eb;
    box-shadow: 0 4px 10px rgb(37 99 235 / 22%);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
}

.pka-page[b-p4gv4pp2rd]  .pka-foot-button:disabled {
    background: #aab6c5;
    box-shadow: none;
}

/* ปุ่มตั้งค่า (ฟันเฟือง) บนหัว station แบบจอ Replen */
.pka-page[b-p4gv4pp2rd]  .pka-setting {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 8px;
    color: #fff;
    background: rgb(255 255 255 / 13%);
    font-size: 13px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting:hover {
    background: rgb(255 255 255 / 24%);
}

/* popup ตั้งค่า Station */
.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog {
    width: min(460px, 100%);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header .pka-scan-icon {
    margin: 0;
    flex: 0 0 52px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header > div {
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header small {
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header strong {
    font-size: 19px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog > header p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-row {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e3eaf2;
    border-radius: 11px;
    cursor: pointer;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-row > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #047857;
    background: #d1fae5;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-row small,
.pka-page[b-p4gv4pp2rd]  .pka-setting-field small {
    color: #64748b;
    font-size: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-switch {
    width: 42px;
    height: 24px;
    appearance: none;
    position: relative;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .15s;
}

.pka-page[b-p4gv4pp2rd]  .pka-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.pka-page[b-p4gv4pp2rd]  .pka-switch:checked {
    background: #10b981;
}

.pka-page[b-p4gv4pp2rd]  .pka-switch:checked::after {
    transform: translateX(18px);
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-field > label {
    font-size: 13px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-type-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pka-page[b-p4gv4pp2rd]  .pka-type-options > * {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 2px solid #dbe5f1;
    border-radius: 10px;
    color: #475569;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-type-options > .on {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eef5ff;
}

.pka-page[b-p4gv4pp2rd]  .pka-type-options > .fixed {
    grid-column: 1 / -1;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-note {
    margin: 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-setting-dialog .pka-actions {
    justify-content: flex-end;
}

/* popup สแกน Pallet */
.pka-page[b-p4gv4pp2rd]  .pka-scan-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1450;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(13, 31, 54, .5);
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-dialog {
    width: min(480px, 100%);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-dialog h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-dialog p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-dialog .pka-actions {
    justify-content: center;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #2563eb;
    background: #e7f1ff;
    font-size: 20px;
}

.pka-page[b-p4gv4pp2rd]  .pka-station-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pka-page[b-p4gv4pp2rd]  .pka-pill {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-pill.ready { color: #047857; background: #d1fae5; }
.pka-page[b-p4gv4pp2rd]  .pka-pill.moving { color: #b45309; background: #fff4df; }
.pka-page[b-p4gv4pp2rd]  .pka-pill.closed { color: #64748b; background: #e2e8f0; }
.pka-page[b-p4gv4pp2rd]  .pka-pill.empty { color: #1d4ed8; background: #e0edff; }

/* การ์ด Pallet แบบการ์ด Tote ของจอ Replen */
.pka-page[b-p4gv4pp2rd]  .pka-pallet {
    min-height: 168px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    gap: 16px;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%);
}

.pka-page[b-p4gv4pp2rd]  .pka-pallet-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pka-page[b-p4gv4pp2rd]  .pka-pallet-label {
    margin-bottom: 3px;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pka-page[b-p4gv4pp2rd]  .pka-pallet-meta strong {
    max-width: 100%;
    overflow: hidden;
    color: #0f172a;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-pallet-state {
    margin-top: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 10px;
    font-weight: 750;
}

.pka-page[b-p4gv4pp2rd]  .pka-pallet-state.moving { color: #b45309; background: #fff4df; }
.pka-page[b-p4gv4pp2rd]  .pka-pallet-state.closed { color: #64748b; background: #e2e8f0; }

/* กรอบ Pallet มองจากด้านบน แบบ .tote-bin ของจอ Replen (ขนาดมาจากประเภท Container) */
.pka-page[b-p4gv4pp2rd]  .pka-bin {
    justify-self: center;
    width: 118px;
    height: 98px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 8px;
    border-radius: 8px 8px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.pka-page[b-p4gv4pp2rd]  .pka-bin img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pka-page[b-p4gv4pp2rd]  .pka-facts {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

/* สินค้าบน Pallet: แถบหยิบขาย (น้ำเงิน) / หยิบเติม (ส้ม) / คงเหลือ (เทา) */
.pka-page[b-p4gv4pp2rd]  .pka-stock {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    background: #f8fbff;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock > header em {
    padding: 3px 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #e0edff;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-line {
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #e3eaf2;
    border-radius: 10px;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-image {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    color: #94a3b8;
    background: #eef2f7;
    font-size: 18px;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-info > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-info strong {
    font-size: 15px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-info b {
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-info small {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-bar {
    height: 8px;
    display: flex;
    overflow: hidden;
    border-radius: 99px;
    background: #e2e8f0;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-bar i {
    display: block;
    height: 100%;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-bar .sale,
.pka-page[b-p4gv4pp2rd]  .pka-stock-legend .sale::before { background: #2563eb; }
.pka-page[b-p4gv4pp2rd]  .pka-stock-bar .unload,
.pka-page[b-p4gv4pp2rd]  .pka-stock-legend .unload::before { background: #f59e0b; }

.pka-page[b-p4gv4pp2rd]  .pka-stock-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-stock-legend span::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 2px;
    background: #cbd5e1;
}

.pka-page[b-p4gv4pp2rd]  .pka-empty {
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    text-align: center;
}

.pka-page[b-p4gv4pp2rd]  .pka-empty i {
    font-size: 34px;
}

.pka-page[b-p4gv4pp2rd]  .pka-empty strong {
    color: #475569;
}

.pka-page[b-p4gv4pp2rd]  .pka-empty.small {
    min-height: 80px;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-box {
    position: relative;
    display: flex;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-box > i {
    position: absolute;
    top: 15px;
    left: 14px;
    color: #475569;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-box input {
    flex: 1;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    outline: 0;
    font-size: 15px;
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

.pka-page[b-p4gv4pp2rd]  .pka-scan-box button,
.pka-page[b-p4gv4pp2rd]  .pka-primary {
    min-height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: #1d5fd1;
    color: #fff;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-secondary {
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    background: #fff;
    color: #1c2b49;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-primary:disabled,
.pka-page[b-p4gv4pp2rd]  .pka-secondary:disabled,
.pka-page[b-p4gv4pp2rd]  .pka-scan-box button:disabled {
    opacity: .5;
}

.pka-page[b-p4gv4pp2rd]  .pka-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #f8fafc;
}

.pka-page[b-p4gv4pp2rd]  .pka-panel h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-panel p {
    margin: 0;
    color: #475569;
}

.pka-page[b-p4gv4pp2rd]  .pka-warn {
    color: #b45309 !important;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes button {
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 2px solid #bfdbfe;
    border-radius: 12px;
    background: #fff;
    color: #1d4ed8;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes button i {
    font-size: 24px;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes button strong {
    color: #172033;
    font-size: 16px;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes button small {
    color: #64748b;
}

.pka-page[b-p4gv4pp2rd]  .pka-modes button:disabled {
    opacity: .45;
}

.pka-page[b-p4gv4pp2rd]  .pka-orders-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-orders-choice button {
    padding: 6px 12px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-message {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    color: #065f46;
    background: #d1fae5;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-tabs {
    padding: 4px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    border: 1px solid #dce5f0;
    border-radius: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-tabs button {
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-tabs button.on {
    background: #1d5fd1;
    color: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-order {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
}

.pka-page[b-p4gv4pp2rd]  .pka-order strong {
    color: #172033;
}

.pka-page[b-p4gv4pp2rd]  .pka-wait {
    color: #b45309 !important;
    font-weight: 700;
}

/* หยิบเติม */
.pka-page[b-p4gv4pp2rd]  .pka-done {
    color: #047857 !important;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-line {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid #bfdbfe;
    border-radius: 12px;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-head strong {
    display: block;
    color: #172033;
    font-size: 16px;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-head small,
.pka-page[b-p4gv4pp2rd]  .pka-line > small {
    color: #64748b;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-head em {
    padding: 3px 10px;
    border-radius: 999px;
    color: #1d4ed8;
    background: #e0edff;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-lots,
.pka-page[b-p4gv4pp2rd]  .pka-serials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #475569;
}

/* ผลหลังยืนยันหยิบ: ครบ (เขียว) / ยังเหลือ (ส้ม) */
.pka-page[b-p4gv4pp2rd]  .pka-result {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 11px;
}

.pka-page[b-p4gv4pp2rd]  .pka-result.done { border: 1px solid #a7f3d0; background: #ecfdf5; }
.pka-page[b-p4gv4pp2rd]  .pka-result.left { border: 1px solid #fde4b8; background: #fff8eb; }

.pka-page[b-p4gv4pp2rd]  .pka-result > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 20px;
}

.pka-page[b-p4gv4pp2rd]  .pka-result.done > span { color: #047857; background: #d1fae5; }
.pka-page[b-p4gv4pp2rd]  .pka-result.left > span { color: #b45309; background: #ffedd5; }

.pka-page[b-p4gv4pp2rd]  .pka-result > div {
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-result strong {
    font-size: 17px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-result.done strong { color: #065f46; }
.pka-page[b-p4gv4pp2rd]  .pka-result.left strong { color: #9a3412; }

.pka-page[b-p4gv4pp2rd]  .pka-result small {
    color: #475569;
    font-size: 13px;
}

.pka-page[b-p4gv4pp2rd]  .pka-result-note {
    margin: 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
}

/* S/N ของสินค้าบน Pallet: สแกนแล้ว = เขียว */
.pka-page[b-p4gv4pp2rd]  .pka-serial-list {
    padding: 9px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #e3eaf2;
    border-radius: 9px;
    background: #f8fbff;
}

.pka-page[b-p4gv4pp2rd]  .pka-serial-list small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-serial-list > div {
    max-height: 120px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow-y: auto;
}

.pka-page[b-p4gv4pp2rd]  .pka-serial-list em {
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 7px;
    color: #17528b;
    background: #e5f0ff;
    font-size: 12px;
    font-style: normal;
}

.pka-page[b-p4gv4pp2rd]  .pka-serial-list em.on {
    color: #087b57;
    background: #ddf6eb;
}

.pka-page[b-p4gv4pp2rd]  .pka-lots button,
.pka-page[b-p4gv4pp2rd]  .pka-serials button {
    padding: 4px 10px;
    border: 1px solid #cbd8e8;
    border-radius: 999px;
    background: #fff;
    color: #1c2b49;
    font-size: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-lots button.on {
    border-color: #1d5fd1;
    background: #1d5fd1;
    color: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-line label {
    color: #334155;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pka-page[b-p4gv4pp2rd]  .pka-qty label {
    margin-right: 6px;
}

.pka-page[b-p4gv4pp2rd]  .pka-qty button {
    width: 38px;
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    background: #fff;
    color: #1d4ed8;
}

.pka-page[b-p4gv4pp2rd]  .pka-qty input {
    width: 100px;
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-row {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-row.on {
    border-color: #1d5fd1;
    background: #eff6ff;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-row strong {
    display: block;
    color: #172033;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-row small {
    color: #64748b;
}

.pka-page[b-p4gv4pp2rd]  .pka-line-row em {
    color: #1d4ed8;
    font-style: normal;
    font-weight: 800;
}

/* หยิบขาย */
.pka-page[b-p4gv4pp2rd]  .pka-dest-label {
    color: #334155;
    font-weight: 800;
}

/* Pack: หน้า Packing เปิดเป็น popup เต็มจอ (ใต้ dialog ของหน้า Packing ที่ z-index 2000) */
.pka-page[b-p4gv4pp2rd]  .pka-pack-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(13, 31, 54, .54);
}

.pka-page[b-p4gv4pp2rd]  .pka-pack-window {
    width: min(1400px, 100%);
    max-height: 100%;
    overflow: auto;
    border-radius: 14px;
    background: #f3f7fc;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

/* drawer รายการ Order: เฉพาะจอนี้ / ทุกจอ, การ์ดกดกางดูรายการ */
.pka-page[b-p4gv4pp2rd]  .pka-scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 9px;
    background: #eef2f7;
}

.pka-page[b-p4gv4pp2rd]  .pka-scope button {
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    color: #475569;
    background: transparent;
    font-size: 12px;
    font-weight: 750;
}

.pka-page[b-p4gv4pp2rd]  .pka-scope button.on {
    color: #1459a6;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1);
}

.pka-page[b-p4gv4pp2rd]  .pka-order:hover,
.pka-page[b-p4gv4pp2rd]  .pka-order.open {
    border-color: #9cc4f2;
}

.pka-page[b-p4gv4pp2rd]  .pka-order small {
    color: #64748b;
    font-size: 11px;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-head > div,
.pka-page[b-p4gv4pp2rd]  .pka-order-so {
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-head strong {
    font-size: 19px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-head em {
    padding: 6px 11px;
    border-radius: 9px;
    color: #1459a6;
    background: #e7f1ff;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-so strong {
    color: #1459a6;
    font-size: 16px;
    font-weight: 850;
    word-break: break-all;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-chips span {
    padding: 5px 9px;
    border-radius: 8px;
    color: #334155;
    background: #f1f5f9;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-chips span.dest {
    color: #9a3412;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-chips span.dest b {
    color: #c2410c;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid #eef2f7;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress strong {
    font-size: 15px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress > b {
    display: block;
    height: 7px;
    border-radius: 99px;
    background: #e5edf5;
    overflow: hidden;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-progress > b > i {
    display: block;
    height: 100%;
    background: #08a36f;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-wait {
    padding: 6px 9px;
    border-radius: 8px;
    color: #9a5b00;
    background: #fff4df;
    font-size: 12px;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e5edf5;
    border-radius: 10px;
    background: #f8fafd;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-image {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 9px;
    color: #94a3b8;
    background: #eef2f7;
    font-size: 22px;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line strong {
    font-size: 15px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line p {
    margin: 0;
    overflow: hidden;
    color: #475569;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line aside {
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-left: 1px solid #e2e8f0;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line aside b {
    color: #c2410c;
    font-size: 22px;
    font-weight: 900;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-order-line aside.done b {
    color: #047857;
}

/* PACKING ASRS: งานที่รอ Pack บน Pallet นี้ (Order, ความคืบหน้า, ของแต่ละรายการมาจากไหน) */
.pka-page[b-p4gv4pp2rd]  .pka-incoming {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid #dce5f0;
    border-radius: 14px;
    background: #f5f8fc;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming > h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #172033;
    font-size: 17px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming > h3 > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: #1769d4;
    font-size: 15px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids,
.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress,
.pka-page[b-p4gv4pp2rd]  .pka-incoming-table {
    border: 1px solid #e1e9f1;
    border-radius: 12px;
    background: #fff;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids > div + div {
    border-left: 1px solid #e1e9f1;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids > div > span {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #1769d4;
    background: #e8f1ff;
    font-size: 16px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids > div > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids small {
    color: #64748b;
    font-size: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-ids strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress {
    padding: 12px 14px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress strong {
    font-size: 17px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress span {
    color: #475569;
    font-weight: 700;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress > b {
    display: block;
    height: 8px;
    margin-top: 8px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-progress > b > i {
    display: block;
    height: 100%;
    background: #1769d4;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-table {
    padding: 4px 8px 8px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-head,
.pka-page[b-p4gv4pp2rd]  .pka-incoming-line {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 12px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-head {
    padding: 8px 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-head > span:last-child {
    text-align: right;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line {
    margin-top: 6px;
    padding: 10px;
    border: 1px solid #e8eef5;
    border-radius: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line.done {
    opacity: .6;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .item,
.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .source {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .item > i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #1769d4;
    background: #e8f1ff;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .item strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .source {
    color: #475569;
    font-size: 13px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .source > i {
    color: #64748b;
    font-size: 16px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-line .qty em {
    display: inline-block;
    min-width: 64px;
    padding: 4px 12px;
    border-radius: 99px;
    color: #172033;
    background: #edf2f7;
    font-style: normal;
    font-weight: 850;
    text-align: center;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-warn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #f6cf9f;
    border-radius: 12px;
    background: #fff4e6;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-warn > span {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #d97706;
    font-size: 15px;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-warn > div {
    display: flex;
    flex-direction: column;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-warn strong {
    color: #b45309;
    font-size: 15px;
    font-weight: 850;
}

.pka-page[b-p4gv4pp2rd]  .pka-incoming-warn small {
    color: #92400e;
    font-size: 13px;
}
/* _content/WMS.UI/Pages/Workstation/PickingAsrs/PickingAsrsSelector.razor.rz.scp.css */
.pka-select-page[b-m2t1yn2eqj]{height:100%;min-height:0;padding:20px;background:#f4f7fb;overflow:auto;color:#10213d}.pka-select-header[b-m2t1yn2eqj]{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.pka-select-header span[b-m2t1yn2eqj]{color:#1263c6;font-size:10px;font-weight:850;letter-spacing:.13em}.pka-select-header h1[b-m2t1yn2eqj]{margin:2px 0 1px;font-size:27px;font-weight:800}.pka-select-header p[b-m2t1yn2eqj],.pka-select-toolbar p[b-m2t1yn2eqj]{margin:0;color:#718096;font-size:12px}.pka-select-header button[b-m2t1yn2eqj]{min-height:40px;padding:0 15px;border:1px solid #cfdbea;border-radius:9px;background:#fff;color:#17304f;font-weight:700}.pka-select-summary[b-m2t1yn2eqj]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.pka-select-summary article[b-m2t1yn2eqj]{min-height:72px;display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid #d7e2ef;border-radius:12px;background:#fff}.pka-select-summary article>i[b-m2t1yn2eqj]{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:17px}.pka-select-summary .blue[b-m2t1yn2eqj]{color:#1667d9;background:#e7f1ff}.pka-select-summary .green[b-m2t1yn2eqj]{color:#059669;background:#ddf8ec}.pka-select-summary .orange[b-m2t1yn2eqj]{color:#c26b00;background:#fff0d8}.pka-select-summary small[b-m2t1yn2eqj]{display:block;color:#718096;font-size:10px}.pka-select-summary strong[b-m2t1yn2eqj]{display:block;font-size:22px}.pka-select-workspace[b-m2t1yn2eqj]{padding:12px;border:1px solid #d7e2ef;border-radius:14px;background:#fff}.pka-select-toolbar[b-m2t1yn2eqj]{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.pka-select-toolbar h2[b-m2t1yn2eqj]{margin:0;font-size:17px}.station-icon[b-m2t1yn2eqj]{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:#1769d4;background:#e9f2ff}.pka-select-message[b-m2t1yn2eqj]{margin-bottom:10px;padding:9px 11px;border-radius:8px;color:#805300;background:#fff4d8;font-size:11px}.pka-select-loading[b-m2t1yn2eqj]{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.pka-select-loading i[b-m2t1yn2eqj]{color:#1769d4;font-size:26px}@media(max-width:720px){.pka-select-page[b-m2t1yn2eqj]{padding:12px}.pka-select-header[b-m2t1yn2eqj],.pka-select-toolbar[b-m2t1yn2eqj]{align-items:stretch;flex-direction:column}.pka-select-summary[b-m2t1yn2eqj]{grid-template-columns:1fr}}
.pka-group-grid[b-m2t1yn2eqj]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pka-group-card[b-m2t1yn2eqj]{min-width:0;border:1px solid #d4e0ed;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgb(15 23 42 / 5%)}.pka-group-card.disabled[b-m2t1yn2eqj]{opacity:.62}.pka-group-card>header[b-m2t1yn2eqj]{display:flex;align-items:center;gap:11px;padding:14px;border-bottom:1px solid #e3eaf2}.pka-group-card h3[b-m2t1yn2eqj]{margin:1px 0 0;font-size:19px}.pka-group-card header p[b-m2t1yn2eqj]{margin:2px 0 0;color:#718096;font-size:11px}.pka-group-card header>em[b-m2t1yn2eqj]{margin-left:auto;padding:5px 8px;border-radius:999px;font-size:9px;font-style:normal;font-weight:750;white-space:nowrap}.pka-group-card header>em.ready[b-m2t1yn2eqj]{color:#087b55;background:#dcf7eb}.pka-group-card header>em.offline[b-m2t1yn2eqj]{color:#b42318;background:#fee4e2}.pka-group-stations[b-m2t1yn2eqj]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}.pka-group-stations>div[b-m2t1yn2eqj]{min-width:0;display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #deE7f1;border-radius:9px;background:#f5f8fc}.pka-group-stations>div.offline[b-m2t1yn2eqj]{opacity:.5}.pka-group-stations>div>span[b-m2t1yn2eqj]{color:#1769d4}.pka-group-stations strong[b-m2t1yn2eqj]{display:block;font-size:11px}.pka-group-stations em[b-m2t1yn2eqj]{margin-left:auto;max-width:76px;overflow:hidden;color:#60758e;font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.pka-group-metrics[b-m2t1yn2eqj]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 12px 12px}.pka-group-metrics>div[b-m2t1yn2eqj]{padding:10px;border-radius:9px;background:#f1f5f9}.pka-group-metrics small[b-m2t1yn2eqj]{display:block;color:#718096;font-size:9px}.pka-group-metrics strong[b-m2t1yn2eqj]{font-size:17px}.pka-group-card>footer[b-m2t1yn2eqj]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-top:1px solid #e3eaf2}.pka-group-card>footer span[b-m2t1yn2eqj]{color:#78899d;font-size:9px}.pka-group-card>footer button[b-m2t1yn2eqj]{min-height:34px;padding:0 12px;border:0;border-radius:8px;color:#fff;background:#1769d4;font-size:10px;font-weight:750}.pka-group-card>footer button:disabled[b-m2t1yn2eqj]{background:#aab6c5}@media(max-width:1200px){.pka-group-grid[b-m2t1yn2eqj]{grid-template-columns:1fr}}@media(max-width:700px){.pka-group-stations[b-m2t1yn2eqj]{grid-template-columns:repeat(2,minmax(0,1fr))}.pka-group-card>footer[b-m2t1yn2eqj]{align-items:stretch;flex-direction:column}.pka-group-card>footer button[b-m2t1yn2eqj]{width:100%}}
/* งานของจอ: ป้ายมีงาน, สถานะของแต่ละ station, ตัวเลขรอหยิบ / พร้อมแพ็ค */
.pka-group-card header>em.busy[b-m2t1yn2eqj]{color:#9a5b00;background:#ffedbd}
.pka-group-stations>div>div[b-m2t1yn2eqj]{min-width:0;display:flex;flex-direction:column}
.pka-station-work[b-m2t1yn2eqj]{margin-top:2px;overflow:hidden;color:#64748b;font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.pka-station-work.waiting[b-m2t1yn2eqj]{color:#b45309}
.pka-station-work.pack[b-m2t1yn2eqj]{color:#047857}
.pka-station-work.pallet[b-m2t1yn2eqj]{color:#1769d4}
.pka-station-work.coming[b-m2t1yn2eqj]{color:#7c3aed}
.pka-group-metrics>div.waiting[b-m2t1yn2eqj]{background:#fff4dc}
.pka-group-metrics>div.waiting strong[b-m2t1yn2eqj]{color:#b45309}
.pka-group-metrics>div.pack[b-m2t1yn2eqj]{background:#e3f8ee}
.pka-group-metrics>div.pack strong[b-m2t1yn2eqj]{color:#047857}
/* _content/WMS.UI/Pages/Workstation/Picking/HaipickCycleCountBody.razor.rz.scp.css */
.haipick-page[b-kesvui1sit] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: #f4f7fb;
}

.haipick-workstation[b-kesvui1sit] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgb(15 23 42 / 6%);
}

.haipick-header[b-kesvui1sit] {
    min-height: 66px;
    padding: 10px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #1459a6, #2872c8);
}

.haipick-header.is-disabled[b-kesvui1sit] {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.haipick-title[b-kesvui1sit] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.haipick-title span[b-kesvui1sit] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.haipick-title h2[b-kesvui1sit] {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.haipick-header-actions[b-kesvui1sit] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.haipick-switch-button[b-kesvui1sit] {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-switch-button:hover[b-kesvui1sit] {
    color: #fff;
    background: rgb(255 255 255 / 24%);
    transform: translateY(-1px);
}

.haipick-setting-button[b-kesvui1sit] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-setting-button:hover[b-kesvui1sit] {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.haipick-body[b-kesvui1sit] {
    min-width: 0;
    min-height: 0;
    padding: 12px !important;
    overflow: auto;
    background: #f7f9fc;
}

.haipick-body > .d-flex.flex-column[b-kesvui1sit] {
    min-height: 100%;
    gap: 12px;
}

.haipick-work-area[b-kesvui1sit] {
    min-width: 0;
    min-height: 260px;
    gap: 12px;
}

.haipick-work-panel[b-kesvui1sit] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.haipick-work-panel > .w-100.h-100[b-kesvui1sit] {
    padding: 14px;
}

.haipick-work-panel .card.rounded-0[b-kesvui1sit] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-work-panel img[b-kesvui1sit] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.haipick-body[b-kesvui1sit]  .badge {
    border-radius: 999px;
}

.haipick-body[b-kesvui1sit]  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .haipick-page[b-kesvui1sit] {
        padding: 10px;
        overflow-y: auto;
    }

    .haipick-work-area[b-kesvui1sit] {
        height: auto !important;
        flex-direction: column !important;
    }

    .haipick-work-panel[b-kesvui1sit] {
        min-height: 260px;
    }
}


/* Populated picking state: tote at left, item details at right, PTL fixed below */
.haipick-header[b-kesvui1sit] {
    width: 100%;
    display: flex !important;
}

.haipick-setting-button[b-kesvui1sit] {
    flex: 0 0 38px;
}

.haipick-body > .d-flex.flex-column.h-100[b-kesvui1sit] {
    display: grid !important;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    align-items: stretch;
}

.haipick-work-area[b-kesvui1sit] {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.haipick-work-area > .haipick-work-panel:first-child[b-kesvui1sit] {
    width: 26% !important;
    flex: 0 0 26%;
}

.haipick-work-area > .haipick-work-panel:nth-child(2)[b-kesvui1sit] {
    width: auto !important;
    flex: 1 1 74%;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.d-flex[b-kesvui1sit] {
    min-height: 0;
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid #e8edf3;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table[b-kesvui1sit] {
    margin: 0;
    font-size: 12px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td[b-kesvui1sit] {
    padding: 7px 9px;
    border-color: #edf1f6;
    vertical-align: middle;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td.text-end[b-kesvui1sit] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3[b-kesvui1sit] {
    height: auto !important;
    min-height: 84px;
    margin-top: auto;
    padding: 10px 12px 12px !important;
    gap: 10px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 > .card[b-kesvui1sit] {
    min-height: 68px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 .h1[b-kesvui1sit] {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

.haipick-body > .d-flex.flex-column.h-100 > .w-100:last-child[b-kesvui1sit] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-kesvui1sit] {
        display: flex !important;
    }

    .haipick-work-area > .haipick-work-panel:first-child[b-kesvui1sit],
    .haipick-work-area > .haipick-work-panel:nth-child(2)[b-kesvui1sit] {
        width: 100% !important;
        flex-basis: auto;
    }
}


/* Keep the work area visible while the station is in STANDBY */
.haipick-body[b-kesvui1sit] {
    display: block !important;
}

.haipick-body > .d-flex.flex-column.h-100[b-kesvui1sit] {
    height: auto !important;
    min-height: 700px;
    display: flex !important;
    flex-direction: column !important;
}

.haipick-body .haipick-work-area[b-kesvui1sit] {
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    flex: 0 0 360px !important;
    display: flex !important;
}

.haipick-empty-state[b-kesvui1sit] {
    max-width: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

.haipick-empty-icon[b-kesvui1sit] {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
}

.haipick-empty-state strong[b-kesvui1sit] {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.haipick-empty-state small[b-kesvui1sit] {
    color: #94a3b8;
    font-size: 11px;
}

button.haipick-setting-button[b-kesvui1sit] {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgb(255 255 255 / 30%) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-kesvui1sit] {
        min-height: 0;
    }

    .haipick-body .haipick-work-area[b-kesvui1sit] {
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
    }
}


/* Replen-style active task banner */
.haipick-task-banner[b-kesvui1sit] {
    width: calc(100% - 20px);
    min-height: 70px;
    margin: 10px 10px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a5f;
    background: #eff6ff;
}

.haipick-task-icon[b-kesvui1sit] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 17px;
}

.haipick-task-copy[b-kesvui1sit] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.haipick-task-copy small[b-kesvui1sit] {
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.haipick-task-copy strong[b-kesvui1sit] {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.haipick-task-copy span[b-kesvui1sit] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-task-count[b-kesvui1sit] {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haipick-task-count strong[b-kesvui1sit] {
    color: #2563eb;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.haipick-task-count span[b-kesvui1sit] {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.haipick-waiting-badge[b-kesvui1sit] {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.haipick-waiting-badge i[b-kesvui1sit] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

.haipick-modal[b-kesvui1sit]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 24%);
}

.haipick-modal[b-kesvui1sit]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-kesvui1sit]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.haipick-modal[b-kesvui1sit]  .modal-body {
    padding: 18px;
    background: #f8fafc;
}

.haipick-modal[b-kesvui1sit]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-kesvui1sit]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 8px !important;
}

.haipick-modal[b-kesvui1sit]  .form-control,
.haipick-modal[b-kesvui1sit]  .select {
    min-height: 40px;
    border-color: #cfd9e7;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .haipick-task-banner[b-kesvui1sit] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .haipick-waiting-badge[b-kesvui1sit] {
        margin-left: 52px;
    }
}


/* PICK_CONFIRM_RETURN — aligned with the Replen workstation visual language */
.haipick-return-body[b-kesvui1sit] {
    padding: 14px !important;
    background: #f5f8fc;
}

.haipick-return-shell[b-kesvui1sit] {
    min-height: 0;
}

.haipick-return-layout[b-kesvui1sit] {
    gap: 14px;
    min-height: 0;
    padding-top: 12px;
}

.haipick-return-tote-panel[b-kesvui1sit],
.haipick-return-products[b-kesvui1sit] {
    min-width: 0;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 44, 83, .05);
}

.haipick-return-tote-panel[b-kesvui1sit] {
    flex: 0 0 31%;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-return-products[b-kesvui1sit] {
    flex: 1 1 69%;
}

.haipick-return-tote-content[b-kesvui1sit] {
    justify-content: flex-start !important;
    gap: 18px;
    padding-top: 6px;
}

.haipick-return-tote-heading[b-kesvui1sit] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-return-tote-heading > div[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-return-eyebrow[b-kesvui1sit],
.haipick-return-products-header span[b-kesvui1sit],
.haipick-setting-summary span[b-kesvui1sit] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-tote-heading strong[b-kesvui1sit] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-return-ready[b-kesvui1sit] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-return-tote-stage[b-kesvui1sit] {
    width: 100%;
    min-height: 245px;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-return-tote-visual[b-kesvui1sit] {
    position: relative;
    width: min(240px, 78%);
    height: 160px;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgba(40, 101, 238, .15);
}

.haipick-return-tote-visual[b-kesvui1sit]::before,
.haipick-return-tote-visual[b-kesvui1sit]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
}

.haipick-return-tote-visual[b-kesvui1sit]::before { left: 12px; }
.haipick-return-tote-visual[b-kesvui1sit]::after { right: 12px; }

.haipick-return-products-header[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid #dde6f1;
    background: #fff;
}

.haipick-return-products-icon[b-kesvui1sit],
.haipick-setting-summary-icon[b-kesvui1sit] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #1765ed;
    background: #e4eeff;
    font-size: 18px;
}

.haipick-return-products-header > div:last-child[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
}

.haipick-return-products-header strong[b-kesvui1sit] {
    color: #12243d;
    font-size: 17px;
}

.haipick-return-products-body[b-kesvui1sit] {
    min-height: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    background: #fbfdff;
    overflow: auto;
}

.haipick-return-products-body .card[b-kesvui1sit] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.haipick-return-products-body .card-header[b-kesvui1sit] {
    border-radius: 10px 10px 0 0 !important;
}

.haipick-return-products-body table td[b-kesvui1sit],
.haipick-return-products-body table th[b-kesvui1sit] {
    border-color: #e7edf5 !important;
}

.haipick-return-footer[b-kesvui1sit] {
    padding: 12px 16px !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

.haipick-store-in-button[b-kesvui1sit] {
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 12px rgba(18, 163, 74, .18);
}

/* Station settings modal */
[b-kesvui1sit] .haipick-setting-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(8, 31, 61, .24);
}

[b-kesvui1sit] .haipick-setting-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

[b-kesvui1sit] .haipick-setting-modal .modal-title {
    color: #132a49;
    font-size: 18px;
    font-weight: 800;
}

[b-kesvui1sit] .haipick-setting-modal .modal-body {
    padding: 18px;
    background: #f5f8fc;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e0e7f0;
    background: #fff;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
}

.haipick-setting-summary[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #eef5ff;
}

.haipick-setting-summary > div:last-child[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-summary strong[b-kesvui1sit] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-setting-summary small[b-kesvui1sit],
.haipick-setting-section-title small[b-kesvui1sit] {
    color: #6c7d92;
    font-size: 11px;
}

.haipick-setting-section[b-kesvui1sit] {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.haipick-setting-section-title[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #1b5fd5;
}

.haipick-setting-section-title > div[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-section-title strong[b-kesvui1sit] {
    color: #1c2e47;
    font-size: 13px;
}

[b-kesvui1sit] .haipick-setting-section .form-group,
[b-kesvui1sit] .haipick-setting-section .row {
    margin-bottom: 0 !important;
}

[b-kesvui1sit] .haipick-setting-section label {
    color: #334861;
    font-weight: 700;
}

.haipick-zone-list[b-kesvui1sit] {
    max-height: 210px;
    overflow: auto;
    padding: 4px 6px;
}

[b-kesvui1sit] .haipick-zone-list .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 32px;
    margin: 4px 0;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-kesvui1sit] {
        flex-direction: column !important;
        overflow: auto;
    }

    .haipick-return-tote-panel[b-kesvui1sit],
    .haipick-return-products[b-kesvui1sit] {
        flex: 0 0 auto;
        width: 100%;
    }

    .haipick-return-tote-stage[b-kesvui1sit] {
        min-height: 210px;
    }
}


/* Return product list and primary action refinement */
.haipick-return-layout[b-kesvui1sit] {
    height: auto !important;
    min-height: 365px;
    align-items: stretch;
}

.haipick-return-products[b-kesvui1sit] {
    height: auto !important;
    min-height: 365px;
}

.haipick-return-products-body[b-kesvui1sit] {
    overflow: visible !important;
    align-items: stretch !important;
    padding: 14px !important;
}

.haipick-return-products-body > div[b-kesvui1sit],
.haipick-return-products-body > .card[b-kesvui1sit] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body .card-body[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
}

.haipick-return-products-body table[b-kesvui1sit] {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.haipick-return-products-body table tr[b-kesvui1sit] {
    min-height: 38px;
}

.haipick-return-products-body table th[b-kesvui1sit],
.haipick-return-products-body table td[b-kesvui1sit] {
    padding: 9px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e8eef6 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-return-products-body table th[b-kesvui1sit] {
    width: 110px;
    color: #60728a;
    font-size: 12px;
    font-weight: 700;
}

.haipick-return-products-body table td[b-kesvui1sit] {
    color: #172b46;
    font-size: 13px;
    font-weight: 600;
}

.haipick-product-qty[b-kesvui1sit] {
    min-height: 72px;
    margin-top: 12px !important;
    padding: 10px 16px;
    flex-direction: row !important;
    justify-content: space-between !important;
    border: 1px solid #bdeacb;
    border-radius: 9px;
    background: #effbf3;
}

.haipick-product-qty b[b-kesvui1sit] {
    color: #4b6255;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.haipick-product-qty .h1[b-kesvui1sit] {
    margin: 0 !important;
    color: #0ba64b !important;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.haipick-return-footer[b-kesvui1sit] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 16px !important;
}

.haipick-return-footer-copy[b-kesvui1sit] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-return-footer-copy span[b-kesvui1sit] {
    color: #62748c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-footer-copy strong[b-kesvui1sit] {
    color: #1a2f4c;
    font-size: 12px;
    font-weight: 700;
}

.haipick-store-in-button[b-kesvui1sit] {
    width: 220px !important;
    min-width: 220px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(18, 163, 74, .22);
}

.haipick-store-in-button:hover:not(:disabled)[b-kesvui1sit] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 163, 74, .27);
}

@media (max-width: 680px) {
    .haipick-return-footer[b-kesvui1sit] {
        align-items: stretch;
        flex-direction: column;
    }

    .haipick-store-in-button[b-kesvui1sit] {
        width: 100% !important;
        min-width: 0;
    }
}


/* Let PICK_CONFIRM_RETURN cards size to content; scrolling belongs to the page only. */
.haipick-return-body[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-shell[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.haipick-return-layout[b-kesvui1sit] {
    height: auto !important;
    min-height: 365px !important;
    overflow: visible !important;
}

.haipick-return-tote-panel[b-kesvui1sit],
.haipick-return-products[b-kesvui1sit] {
    height: auto !important;
    min-height: 365px;
    max-height: none !important;
}

.haipick-return-tote-content[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body > .w-100[b-kesvui1sit],
.haipick-return-products-body > div[b-kesvui1sit] {
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body .haipick-product-qty[b-kesvui1sit] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-kesvui1sit],
    .haipick-return-tote-panel[b-kesvui1sit],
    .haipick-return-products[b-kesvui1sit] {
        min-height: 0 !important;
    }
}


/* Type1 product card must include the quantity summary in its intrinsic height. */
.haipick-return-product-card[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    overflow: visible !important;
}

.haipick-return-product-detail[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-return-product-detail > .w-100[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
}

.haipick-return-product-detail .haipick-product-qty[b-kesvui1sit] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}

.haipick-return-products[b-kesvui1sit] {
    overflow: visible !important;
}


/* Final containment for the Qty summary: the previous 365px row was too short. */
@media (min-width: 901px) {
    .haipick-return-layout[b-kesvui1sit] {
        min-height: 410px !important;
    }

    .haipick-return-tote-panel[b-kesvui1sit],
    .haipick-return-products[b-kesvui1sit] {
        min-height: 410px !important;
    }
}

.haipick-return-products[b-kesvui1sit] {
    box-sizing: border-box;
    overflow: hidden !important;
}

.haipick-return-products-body[b-kesvui1sit] {
    box-sizing: border-box;
    padding-bottom: 16px !important;
}

.haipick-return-product-card[b-kesvui1sit],
.haipick-return-product-detail[b-kesvui1sit] {
    width: 100%;
    box-sizing: border-box;
}

.haipick-return-product-detail[b-kesvui1sit] {
    display: block !important;
}

.haipick-return-product-detail > .w-100[b-kesvui1sit] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.haipick-product-qty[b-kesvui1sit] {
    position: static !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px;
    box-sizing: border-box;
}


/* Responsive return view: keep the primary action visible above the application footer. */
@media (max-width: 900px) {
    .haipick-return-body[b-kesvui1sit] {
        flex: 1 1 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .haipick-return-shell[b-kesvui1sit] {
        min-height: max-content !important;
        padding-bottom: 4px;
    }

    .haipick-return-layout[b-kesvui1sit] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        height: auto !important;
        min-height: max-content !important;
    }

    .haipick-return-tote-panel[b-kesvui1sit],
    .haipick-return-products[b-kesvui1sit] {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .haipick-return-products-body[b-kesvui1sit],
    .haipick-return-product-card[b-kesvui1sit],
    .haipick-return-product-detail[b-kesvui1sit] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .haipick-return-footer[b-kesvui1sit] {
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        border-top: 1px solid #d9e3ef !important;
        box-shadow: 0 -8px 20px rgba(15, 44, 83, .10);
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 680px) {
    .haipick-return-body[b-kesvui1sit] {
        padding: 10px !important;
        padding-bottom: 16px !important;
    }

    .haipick-return-tote-panel[b-kesvui1sit] {
        padding: 12px;
    }

    .haipick-return-tote-stage[b-kesvui1sit] {
        min-height: 190px;
    }

    .haipick-return-tote-visual[b-kesvui1sit] {
        width: min(220px, 76%);
        height: 140px;
    }

    .haipick-return-footer-copy[b-kesvui1sit] {
        display: none;
    }

    .haipick-return-footer[b-kesvui1sit] {
        padding: 10px 12px !important;
    }
}


/* Station number and picking type share the same header line. */
.haipick-title-line[b-kesvui1sit] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.haipick-title-line h2[b-kesvui1sit] {
    flex: 0 0 auto;
}

[b-kesvui1sit] .haipick-title-line > div {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
}

[b-kesvui1sit] .haipick-title-line .h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1;
}

[b-kesvui1sit] .haipick-title-line .badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin: 0 4px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: #ff443d !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(115, 17, 12, .18);
}

@media (max-width: 680px) {
    .haipick-title-line[b-kesvui1sit] {
        gap: 6px;
    }

    .haipick-title h2[b-kesvui1sit] {
        font-size: 19px;
    }

    [b-kesvui1sit] .haipick-title-line .badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* Replen-style workstation actions */
.haipick-store-in-button[b-kesvui1sit] {
    width: 190px !important;
    min-width: 190px;
    min-height: 42px;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 1px solid #0b9b49 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #12a84f !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1 !important;
    text-transform: uppercase;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-store-in-button:hover:not(:disabled)[b-kesvui1sit] {
    border-color: #087f3b !important;
    background: #0c9344 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18, 168, 79, .26);
}

.haipick-store-in-button:disabled[b-kesvui1sit] {
    border-color: #a8d9bc !important;
    background: #b9ddc7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 13px 16px !important;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn {
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1 !important;
    box-shadow: none;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-secondary,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-light {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-secondary:hover,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-light:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-primary,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-info,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-success {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20);
}

[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-primary:hover,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-info:hover,
[b-kesvui1sit] .haipick-setting-modal .modal-footer .btn-success:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    .haipick-store-in-button[b-kesvui1sit] {
        width: 100% !important;
        min-width: 0;
    }

    [b-kesvui1sit] .haipick-setting-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* BootstrapBlazor Button renders inside a child component: use ::deep from scoped wrappers. */
[b-kesvui1sit] .haipick-return-footer .haipick-store-in-button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #0b9847 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background-color: #12a84f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20) !important;
}

[b-kesvui1sit] .haipick-return-footer .haipick-store-in-button:hover:not(:disabled) {
    border-color: #087f3b !important;
    background-color: #0c9344 !important;
    transform: translateY(-1px);
}

.haipick-setting-actions[b-kesvui1sit] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

[b-kesvui1sit] .haipick-setting-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

[b-kesvui1sit] .haipick-setting-actions .btn-secondary {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
    box-shadow: none !important;
}

[b-kesvui1sit] .haipick-setting-actions .btn-secondary:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-kesvui1sit] .haipick-setting-actions .btn-primary {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20) !important;
}

[b-kesvui1sit] .haipick-setting-actions .btn-primary:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    [b-kesvui1sit] .haipick-return-footer .haipick-store-in-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .haipick-setting-actions[b-kesvui1sit] {
        gap: 8px;
    }

    [b-kesvui1sit] .haipick-setting-actions .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* Native setting actions — not affected by BootstrapBlazor Button internals. */
.haipick-setting-action[b-kesvui1sit] {
    min-width: 108px;
    height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-setting-action i[b-kesvui1sit] {
    font-size: 13px;
}

.haipick-setting-action-close[b-kesvui1sit] {
    border: 1px solid #cbd6e3;
    color: #344860;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 44, 83, .06);
}

.haipick-setting-action-close:hover[b-kesvui1sit] {
    border-color: #aebdce;
    color: #1f334c;
    background: #f4f7fa;
}

.haipick-setting-action-save[b-kesvui1sit] {
    border: 1px solid #1765ed;
    color: #fff;
    background: #2567e8;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .23);
}

.haipick-setting-action-save:hover[b-kesvui1sit] {
    border-color: #1555c8;
    background: #155bd5;
    box-shadow: 0 7px 16px rgba(37, 103, 232, .28);
    transform: translateY(-1px);
}

.haipick-setting-action:focus-visible[b-kesvui1sit] {
    outline: 3px solid rgba(37, 103, 232, .22);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .haipick-setting-action[b-kesvui1sit] {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* Account for the shared task banner in populated return states. */
@media (min-width: 901px) {
    .haipick-return-layout:has(.haipick-task-banner)[b-kesvui1sit] {
        min-height: 490px !important;
    }

    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-tote-panel[b-kesvui1sit],
    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-products[b-kesvui1sit] {
        min-height: 490px !important;
    }
}

.haipick-return-tote-panel > .haipick-task-banner[b-kesvui1sit] {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-content[b-kesvui1sit] {
    flex: 1 1 auto;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-stage[b-kesvui1sit] {
    min-height: 220px;
}


/* Replen-inspired product detail panel */
.haipick-return-products-header[b-kesvui1sit] {
    position: relative;
}

.haipick-return-product-ready[b-kesvui1sit] {
    margin-left: auto;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #08783e !important;
    background: #d9f8e8;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.haipick-replen-product[b-kesvui1sit] {
    width: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fff;
}

.haipick-replen-product-main[b-kesvui1sit] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.haipick-replen-product-image[b-kesvui1sit] {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5e1ee;
    border-radius: 10px;
    color: #c7d3e1;
    background: #f7faff;
    font-size: 36px;
}

.haipick-replen-product-image img[b-kesvui1sit] {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.haipick-replen-product-details[b-kesvui1sit] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-replen-detail-row[b-kesvui1sit] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 82px minmax(0, .55fr);
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #e6edf5;
}

.haipick-replen-detail-row.single[b-kesvui1sit] {
    grid-template-columns: 92px minmax(0, 1fr);
}

.haipick-replen-detail-row span[b-kesvui1sit] {
    color: #65768c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.haipick-replen-detail-row strong[b-kesvui1sit] {
    min-width: 0;
    overflow: hidden;
    color: #25364d;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-replen-detail-row .haipick-company-value[b-kesvui1sit] {
    color: #ff3f36;
    font-size: 20px;
    font-weight: 800;
}

.haipick-replen-metrics[b-kesvui1sit] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0 132px;
}

.haipick-replen-metric[b-kesvui1sit] {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dae4ef;
    border-radius: 10px;
    background: #f7f9fc;
}

.haipick-replen-metric span[b-kesvui1sit] {
    color: #65768c;
    font-size: 10px;
    font-weight: 650;
}

.haipick-replen-metric strong[b-kesvui1sit] {
    margin-top: 3px;
    color: #344860;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.haipick-replen-metric.is-primary[b-kesvui1sit] {
    border-color: #b9eccb;
    background: #effbf3;
}

.haipick-replen-metric.is-primary strong[b-kesvui1sit] {
    color: #0ba64b;
}

.haipick-replen-product-empty[b-kesvui1sit] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #75869a;
}

.haipick-replen-product-empty i[b-kesvui1sit] {
    color: #c7d3e1;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .haipick-replen-product-main[b-kesvui1sit] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .haipick-replen-product-image[b-kesvui1sit] {
        width: 88px;
        height: 96px;
    }

    .haipick-replen-metrics[b-kesvui1sit] {
        margin-left: 104px;
    }
}

@media (max-width: 680px) {
    .haipick-return-product-ready[b-kesvui1sit] {
        padding: 4px 7px;
    }

    .haipick-replen-product[b-kesvui1sit] {
        padding: 10px;
    }

    .haipick-replen-product-main[b-kesvui1sit] {
        grid-template-columns: 1fr;
    }

    .haipick-replen-product-image[b-kesvui1sit] {
        width: 100%;
        height: 120px;
    }

    .haipick-replen-detail-row[b-kesvui1sit],
    .haipick-replen-detail-row.single[b-kesvui1sit] {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .haipick-replen-detail-row:not(.single) span:nth-of-type(2)[b-kesvui1sit],
    .haipick-replen-detail-row:not(.single) strong:nth-of-type(2)[b-kesvui1sit] {
        margin-top: 6px;
    }

    .haipick-replen-metrics[b-kesvui1sit] {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}


/* PICK state — isolated responsive layout */
.haipick-pick-body[b-kesvui1sit] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc;
}

.haipick-pick-shell[b-kesvui1sit] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-layout[b-kesvui1sit] {
    width: 100%;
    height: auto !important;
    min-height: 360px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-tote[b-kesvui1sit],
.haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 360px;
    flex: none !important;
    overflow: hidden;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 44 83 / 5%);
}

.haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-kesvui1sit],
.haipick-pick-body .haipick-pick-product > .w-100.h-100[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-kesvui1sit] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    padding: 16px !important;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf4;
}

.haipick-pick-body .haipick-pick-product table[b-kesvui1sit] {
    width: 100%;
    min-width: 520px;
    margin: 0;
    table-layout: fixed;
}

.haipick-pick-body .haipick-pick-product table td[b-kesvui1sit] {
    padding: 9px 10px !important;
    vertical-align: middle;
    border-color: #e7edf5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product table td.text-end[b-kesvui1sit] {
    width: 105px !important;
    color: #5d718b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-kesvui1sit] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    padding: 12px 16px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-kesvui1sit] {
    min-width: 0;
    min-height: 76px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
    text-align: center;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-kesvui1sit] {
    margin: 4px 0 0 !important;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.haipick-pick-body .input-group[b-kesvui1sit],
.haipick-pick-body[b-kesvui1sit]  .input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

.haipick-pick-body .form-control[b-kesvui1sit],
.haipick-pick-body[b-kesvui1sit]  .form-control {
    min-width: 0;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-pick-body[b-kesvui1sit] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-layout[b-kesvui1sit] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .haipick-pick-body .haipick-pick-tote[b-kesvui1sit],
    .haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-kesvui1sit] {
        padding: 12px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-kesvui1sit] {
        min-height: 220px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-kesvui1sit] {
        flex-direction: column;
        padding: 12px !important;
        overflow: visible;
    }

    .haipick-pick-body .haipick-pick-product table[b-kesvui1sit] {
        min-width: 0;
        table-layout: auto;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-task-banner[b-kesvui1sit] {
        margin-bottom: 10px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-kesvui1sit] {
        min-height: 190px !important;
    }

    .haipick-pick-body .haipick-pick-product table[b-kesvui1sit],
    .haipick-pick-body .haipick-pick-product tbody[b-kesvui1sit],
    .haipick-pick-body .haipick-pick-product tr[b-kesvui1sit] {
        width: 100%;
    }

    .haipick-pick-body .haipick-pick-product table td[b-kesvui1sit] {
        padding: 7px 6px !important;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product table td.text-end[b-kesvui1sit] {
        width: 88px !important;
        font-size: 9px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-kesvui1sit] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        padding: 10px !important;
        gap: 7px;
        overflow-x: auto;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-kesvui1sit] {
        min-height: 70px;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-kesvui1sit] {
        font-size: 22px;
    }

    .haipick-pick-body[b-kesvui1sit]  .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* PICK Tote — Replen visual style and width correction */
.haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-kesvui1sit] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-tote > .w-100.h-100[b-kesvui1sit] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 18px;
    padding: 0 !important;
}

.haipick-pick-tote-heading[b-kesvui1sit] {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-pick-tote-heading > div[b-kesvui1sit] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-pick-tote-eyebrow[b-kesvui1sit] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-pick-tote-heading strong[b-kesvui1sit] {
    overflow: hidden;
    color: #102a4c;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-pick-tote-ready[b-kesvui1sit] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-pick-tote-stage[b-kesvui1sit] {
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-pick-tote-visual[b-kesvui1sit] {
    position: relative;
    width: min(240px, 78%) !important;
    height: 160px !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgb(40 101 238 / 15%);
}

.haipick-pick-tote-visual[b-kesvui1sit]::before,
.haipick-pick-tote-visual[b-kesvui1sit]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
    pointer-events: none;
}

.haipick-pick-tote-visual[b-kesvui1sit]::before {
    left: 12px;
}

.haipick-pick-tote-visual[b-kesvui1sit]::after {
    right: 12px;
}

.haipick-pick-tote-visual > *[b-kesvui1sit] {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-kesvui1sit] {
        width: 100% !important;
        padding: 12px;
    }

    .haipick-pick-tote-stage[b-kesvui1sit] {
        min-height: 210px;
    }

    .haipick-pick-tote-visual[b-kesvui1sit] {
        width: min(230px, 76%) !important;
        height: 145px !important;
    }
}

@media (max-width: 480px) {
    .haipick-pick-tote-heading[b-kesvui1sit] {
        min-height: 64px;
        padding: 11px 12px;
    }

    .haipick-pick-tote-heading strong[b-kesvui1sit] {
        font-size: 16px;
    }

    .haipick-pick-tote-stage[b-kesvui1sit] {
        min-height: 185px;
    }

    .haipick-pick-tote-visual[b-kesvui1sit] {
        width: min(210px, 78%) !important;
        height: 132px !important;
    }
}


/* PICK layout refinement — compact Tote and structured picking workspace */
.haipick-pick-body .haipick-pick-layout[b-kesvui1sit] {
    grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
    align-items: start !important;
}

.haipick-pick-body .haipick-pick-tote[b-kesvui1sit] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
}

.haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-kesvui1sit] {
    min-height: 238px !important;
    padding: 14px 18px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2:empty[b-kesvui1sit] {
    display: none;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2[b-kesvui1sit] {
    flex: 0 0 auto;
    padding: 8px 14px 8px 0 !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .w-100[b-kesvui1sit] {
    padding: 0 !important;
}

.haipick-pick-body .haipick-pick-product table td[b-kesvui1sit] {
    height: 36px;
    padding: 7px 10px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-kesvui1sit] {
    padding: 0 8px 12px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-kesvui1sit] {
    padding: 12px !important;
    border: 1px solid #cfe0f6 !important;
    border-radius: 10px !important;
    background: #f8fbff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .mb-2[b-kesvui1sit] {
    margin-bottom: 8px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 [style*="max-height:160px"][b-kesvui1sit] {
    max-height: 116px !important;
    padding: 7px 10px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control[b-kesvui1sit] {
    height: 40px;
    border-radius: 7px 0 0 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control.me-2[b-kesvui1sit] {
    margin-right: 8px !important;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-kesvui1sit]  .btn {
    min-width: 72px;
    height: 40px;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-kesvui1sit] {
    margin-top: 0;
    padding: 0 12px 14px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-kesvui1sit] {
    min-height: 68px;
    background: #f7f9fc;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card:first-child[b-kesvui1sit] {
    border-color: #ffd6d6 !important;
    background: #fff8f8;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit] {
    margin-top: 0;
}

@media (min-width: 901px) {
    .haipick-pick-tote-stage[b-kesvui1sit] {
        min-height: 245px;
    }

    .haipick-pick-body .haipick-pick-tote[b-kesvui1sit] {
        min-height: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .haipick-pick-body .haipick-pick-layout[b-kesvui1sit] {
        grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    }

    .haipick-pick-body .haipick-pick-product table td[b-kesvui1sit] {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout[b-kesvui1sit] {
        align-items: stretch !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-kesvui1sit],
    .haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
        align-self: stretch;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-kesvui1sit] {
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-kesvui1sit] {
        padding: 0 0 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-kesvui1sit] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-kesvui1sit] {
        padding: 0 0 10px !important;
    }
}


/* PICK Put-to-Light containment */
.haipick-pick-shell > .w-100:last-child[b-kesvui1sit] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-layout > .w-100,
.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-module-column {
    min-width: 0 !important;
    max-width: 100%;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-section-title {
    min-height: 32px;
    padding: 5px 9px;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-row {
    width: 100%;
    min-width: 0;
    height: 76px !important;
    min-height: 76px;
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-row > .w-100 {
    min-width: 0;
    max-width: calc(100% - 46px);
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-row-number {
    width: 42px;
    min-width: 42px;
    height: 76px !important;
    flex: 0 0 42px;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-slot {
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-slot h2 {
    margin: 0;
    font-size: 21px;
}

.haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-slot .mt-2 {
    margin-top: 1px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-kesvui1sit] {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px;
    flex: 0 0 86px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-kesvui1sit] {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px;
    flex: 1 1 0 !important;
}

@media (max-width: 900px) {
    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-dashboard {
        min-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-dashboard {
        min-width: 0 !important;
    }

    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-row {
        height: auto !important;
        min-height: 0;
    }

    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-row > .w-100 {
        max-width: none;
    }

    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit]  .ptl-slot {
        height: 76px !important;
    }
}


/* PICK product workspace — side-by-side information and operations */
@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        gap: 0;
    }

    .haipick-pick-product-info[b-kesvui1sit] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px 18px !important;
        border-right: 1px solid #e4ebf4;
        border-bottom: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .haipick-pick-scan[b-kesvui1sit] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding: 12px 12px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-kesvui1sit] {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        margin: 0;
        padding: 0 12px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-kesvui1sit] {
        width: 100% !important;
        min-width: 0;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px;
        margin: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box;
        font-size: 11px;
        text-align: center;
    }

    .haipick-pick-quantities > .card .h1[b-kesvui1sit] {
        margin: 3px 0 0 !important;
        font-size: 23px;
        line-height: 1;
    }

    .haipick-pick-shell > .w-100:last-child[b-kesvui1sit] {
        margin-top: -2px;
    }
}

.haipick-pick-product-info table[b-kesvui1sit] {
    width: 100%;
    margin: 0;
}

/* จำกัดความสูงรายการเพื่อให้ช่องสแกนยังอยู่ในมุมมองเมื่อมีหลาย serial */
.haipick-pick-scan .haipick-serial-list[b-kesvui1sit] {
    max-height: 160px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 4px 6px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-serial-row[b-kesvui1sit] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    line-height: 20px;
    border-bottom: 1px solid #edf1f7;
}

.haipick-serial-row:last-child[b-kesvui1sit] {
    border-bottom: 0;
}

.haipick-serial-row > span:last-child[b-kesvui1sit] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table[b-kesvui1sit] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-kesvui1sit] {
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-kesvui1sit] {
    font-size: 13px;
}

.haipick-pick-body .haipick-pick-scan[b-kesvui1sit] {
    font-size: 15px;
    line-height: 1.5;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-kesvui1sit],
.haipick-pick-body .haipick-pick-scan[b-kesvui1sit]  .btn {
    font-size: 15px;
}

.haipick-pick-body .haipick-pick-quantities > .card[b-kesvui1sit] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-pick-body .haipick-pick-quantities > .card .h1[b-kesvui1sit] {
    font-size: 28px;
}

.haipick-pick-product-info table td[b-kesvui1sit] {
    height: 35px;
    padding: 6px 9px !important;
}

.haipick-pick-scan > .card[b-kesvui1sit] {
    margin: 0;
}

@media (max-width: 1100px) {
    .haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
        display: flex !important;
        flex-direction: column !important;
    }

    .haipick-pick-product-info[b-kesvui1sit] {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        border-bottom: 1px solid #e4ebf4;
        box-sizing: border-box;
    }

    .haipick-pick-scan[b-kesvui1sit] {
        width: 100%;
        padding: 10px 10px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-kesvui1sit] {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-kesvui1sit] {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-quantities[b-kesvui1sit] {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .haipick-pick-quantities > .card[b-kesvui1sit] {
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .haipick-switch-button[b-kesvui1sit] {
        width: 38px;
        padding: 0;
    }

    .haipick-switch-button span[b-kesvui1sit] {
        display: none;
    }
}

/* ใช้สีและกรอบมาตรฐานของระบบในส่วนข้อมูลและการสแกน */
.haipick-pick-body .haipick-pick-product-info[b-kesvui1sit] {
    padding: 12px !important;
}

.haipick-pick-product-info > .w-100[b-kesvui1sit] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-kesvui1sit] {
    padding: 8px !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-kesvui1sit] {
    width: 95px !important;
    text-transform: none;
    color: var(--bs-secondary);
    font-weight: 600;
}

.haipick-pick-body .haipick-pick-product-info table tr:last-child td[b-kesvui1sit] {
    border-bottom: 0;
}

.haipick-pick-body .haipick-pick-scan > .card[b-kesvui1sit],
.haipick-pick-body .haipick-pick-quantities > .card[b-kesvui1sit] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background: var(--bs-body-bg);
    box-shadow: none;
}

.haipick-pick-body .haipick-pick-scan > .card[b-kesvui1sit] {
    padding: 12px !important;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-kesvui1sit],
.haipick-pick-body .haipick-pick-scan[b-kesvui1sit]  .btn {
    border-radius: var(--bs-border-radius) !important;
}

.haipick-pick-scan .haipick-serial-list[b-kesvui1sit] {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

@media (max-width: 560px) {
    .haipick-pick-product-info[b-kesvui1sit] {
        flex-direction: column;
    }
}

/* ใช้หัวการ์ดและกรอบรูปแบบเดียวกับ Product List ในขั้นตอนส่งคืน */
.haipick-pick-products-header[b-kesvui1sit] {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product-info[b-kesvui1sit] {
    gap: 12px;
    align-items: flex-start;
    background: #fff;
}

.haipick-pick-product-info > .haipick-replen-product-image[b-kesvui1sit] {
    flex: 0 0 90px;
    width: 90px;
    height: 100px;
    margin-top: 8px;
}

.haipick-pick-product-info > .w-100[b-kesvui1sit] {
    flex: 1 1 0;
    padding: 0 !important;
    margin: 0;
}

.haipick-return-shell[b-kesvui1sit] {
    gap: 14px;
}

.haipick-return-ptl[b-kesvui1sit] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-kesvui1sit] {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-rows: auto auto auto;
    }

    .haipick-pick-products-header[b-kesvui1sit] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .haipick-pick-product-info[b-kesvui1sit] {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .haipick-pick-scan[b-kesvui1sit] {
        grid-column: 2;
        grid-row: 2;
    }

    .haipick-pick-quantities[b-kesvui1sit] {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .haipick-pick-product-info > .haipick-replen-product-image[b-kesvui1sit] {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }
}

/* โครงสร้าง PICK แยกจากรูปแบบเดิม ให้การ์ดสูงตามเนื้อหาและสแกนต่อจากข้อมูล */
.haipick-workstation:has(.haipick-compact) > .haipick-header[b-kesvui1sit] {
    min-height: 76px;
    padding: 14px 20px !important;
    background: linear-gradient(115deg, #1559ae, #2878cf);
}

.haipick-workstation:has(.haipick-compact) .haipick-title h2[b-kesvui1sit] { font-size: 28px; }
.haipick-workstation:has(.haipick-compact) .haipick-title > span[b-kesvui1sit] { font-size: 10px; }
.haipick-workstation:has(.haipick-compact) .haipick-title[b-kesvui1sit]  .badge {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
}

.haipick-body.haipick-compact[b-kesvui1sit] {
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    overflow: auto;
    background: #f2f7fc;
    color: #142d55;
}

.haipick-workspace[b-kesvui1sit] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.haipick-columns[b-kesvui1sit] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.haipick-sidebar[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.haipick-tote-card[b-kesvui1sit],
.haipick-item-card[b-kesvui1sit] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-tote-card[b-kesvui1sit] {
    padding: 12px;
}

.haipick-section-heading[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.haipick-section-icon[b-kesvui1sit] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2165ed;
    font-size: 19px;
}

.haipick-compact .haipick-task-banner[b-kesvui1sit] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-compact .haipick-task-icon[b-kesvui1sit] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

.haipick-compact .haipick-task-copy[b-kesvui1sit] {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 5px;
}

.haipick-compact .haipick-task-copy small[b-kesvui1sit] {
    color: #142d55;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
}

.haipick-compact .haipick-task-copy strong[b-kesvui1sit] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-compact .haipick-task-copy > span[b-kesvui1sit] {
    font-size: 11px;
}

.haipick-compact .haipick-waiting-badge[b-kesvui1sit] {
    grid-column: 3;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0;
}

.haipick-compact .haipick-task-count[b-kesvui1sit] {
    grid-column: 3;
    grid-row: 2;
    gap: 3px;
    border-left: 1px solid #e5edf8;
}

.haipick-compact .haipick-task-count strong[b-kesvui1sit] { font-size: 24px; }
.haipick-compact .haipick-task-count span[b-kesvui1sit] { font-size: 9px; }

.haipick-compact .haipick-pick-tote-heading[b-kesvui1sit] {
    min-height: 0;
    padding: 0 2px 12px 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.haipick-compact .haipick-pick-tote-eyebrow[b-kesvui1sit] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.haipick-compact .haipick-pick-tote-heading strong[b-kesvui1sit] { font-size: 22px; }
.haipick-compact .haipick-pick-tote-ready[b-kesvui1sit] { font-size: 12px; }
.haipick-compact .haipick-pick-tote-heading > div[b-kesvui1sit] { line-height: 1.3; }

/* ลดเฉพาะพื้นรอบภาพ โดยคงขนาด ภาพ และการแบ่งช่อง Tote เดิม */
.haipick-compact .haipick-pick-tote-stage[b-kesvui1sit] {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    border: 1px solid #e4edf8;
    background: #f5f9ff;
}

/* วาด Type และตำแหน่ง Partition จาก master data เช่นเดียวกับ Replenishment */
.haipick-source-tote[b-kesvui1sit] {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 7px;
    border-radius: 9px 9px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.haipick-source-tote-layout[b-kesvui1sit] {
    position: relative;
    width: 100%;
    height: 100%;
}

.haipick-source-partition[b-kesvui1sit] {
    position: absolute;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c6daf8;
    color: #17386d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.haipick-source-partition-name[b-kesvui1sit] {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.haipick-source-parts[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.haipick-source-whole[b-kesvui1sit] { gap: 6px; padding: 6px; }
.haipick-source-whole img[b-kesvui1sit] { max-height: 55px; }

.haipick-source-tote img[b-kesvui1sit] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-source-partition.bg-primary[b-kesvui1sit] { background-color: #2563eb !important; }

.haipick-compact .haipick-pick-products-header[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5edf6;
    background: #fff;
}

.haipick-compact .haipick-pick-products-header strong[b-kesvui1sit] {
    color: #142d55;
    font-size: 17px;
    line-height: 1.4;
}

.haipick-compact .haipick-return-products-icon[b-kesvui1sit] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.haipick-item-content[b-kesvui1sit] {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    min-width: 0;
}

.haipick-item-info[b-kesvui1sit] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
}

.haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] {
    flex: 0 0 82px;
    width: 82px;
    height: 130px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #f3f7fc;
}

.haipick-item-info > .haipick-replen-product-image img[b-kesvui1sit] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-item-info > .w-100[b-kesvui1sit] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

.haipick-item-info table[b-kesvui1sit] {
    width: 100%;
    height: auto;
    margin: 0;
    table-layout: auto;
}

.haipick-item-info table td[b-kesvui1sit] {
    height: auto;
    padding: 9px 5px;
    border-bottom: 1px solid #e7edf6;
    color: #4d5d76;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.haipick-item-info table td.text-end[b-kesvui1sit] {
    width: 1% !important;
    white-space: nowrap;
    text-align: left !important;
    color: #566e92;
    font-size: 11px;
    font-weight: 700;
}

.haipick-item-info table tr:last-child td[b-kesvui1sit] { border-bottom: 0; }

.haipick-operations[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #e5edf6;
}

.haipick-scan-panel[b-kesvui1sit] { min-width: 0; }

.haipick-scan-panel > .card[b-kesvui1sit] {
    min-height: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f1f7ff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
}

.haipick-scan-panel > .card > .mb-2[b-kesvui1sit] { margin-bottom: 10px !important; }
.haipick-scan-panel > .card > .d-flex[b-kesvui1sit] { min-width: 0; }

.haipick-scan-heading[b-kesvui1sit] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #132f65;
    font-size: 13px;
}

.haipick-scan-heading[b-kesvui1sit]::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 5px;
    border-radius: 7px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e63f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m8 0h5v-5M6 12h12M9 7h6M9 17h6'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.haipick-scan-title[b-kesvui1sit] { color: #132f65; font-weight: 700; }
.haipick-scan-heading > .text-muted[b-kesvui1sit] { color: #536a94 !important; }
.haipick-scan-heading.justify-content-between[b-kesvui1sit] { justify-content: flex-start !important; }
.haipick-scan-heading > .badge[b-kesvui1sit] { margin-left: auto; }
.haipick-scan-entry[b-kesvui1sit] { position: relative; }

/* ไอคอนเป็นของตกแต่ง ไม่รับคลิกและไม่รบกวนการสแกน */
.haipick-scan-entry[b-kesvui1sit]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 21px;
    width: 19px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #8e9bb0 0 1px, transparent 1px 3px, #8e9bb0 3px 5px, transparent 5px 6px);
}

.haipick-scan-panel .form-control[b-kesvui1sit] {
    min-width: 0;
    height: 42px;
    padding-left: 39px;
    border-radius: 8px !important;
    background: #fff;
    font-size: 14px;
    border-color: #709aff !important;
}

.haipick-scan-panel[b-kesvui1sit]  .haipick-scan-button {
    flex: 0 0 auto;
    min-width: 70px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #1958ed !important;
    background: #1958f5 !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

.haipick-scan-panel[b-kesvui1sit]  .haipick-scan-button:not(:disabled):hover {
    border-color: #1048cd !important;
    background: #1048db !important;
}

.haipick-scan-panel[b-kesvui1sit]  .haipick-scan-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.haipick-scan-panel .text-danger:empty[b-kesvui1sit] { display: none; }

.haipick-quantity-grid[b-kesvui1sit] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.haipick-quantity-grid:has(> :nth-child(3))[b-kesvui1sit] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haipick-quantity-grid > .card[b-kesvui1sit] {
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 8px;
    border: 1px solid #e3edf9;
    border-radius: 11px !important;
    background: #f9fbff;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none !important;
}

.haipick-quantity-grid .h1[b-kesvui1sit] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.haipick-quantity-label[b-kesvui1sit] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    gap: 8px;
}

.haipick-quantity-label i[b-kesvui1sit] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: #2165ed;
    background: #e8f1ff;
    font-size: 15px;
}

.haipick-quantity-grid .h1.text-primary[b-kesvui1sit] { color: #0961dc !important; }

.haipick-lights[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
}

.haipick-lights-header[b-kesvui1sit] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5edf6;
}

.haipick-lights-header h3[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #1458e6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}

.haipick-lights-icon[b-kesvui1sit] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c60ed' d='M12 2a7 7 0 0 0-4.7 12.2c.9.8 1.2 1.5 1.2 2.8h7c0-1.3.3-2 1.2-2.8A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 19h6m-5 2h4' fill='none' stroke='%231c60ed' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 8c.4-1.7 1.5-2.5 3-2.6' fill='none' stroke='%237eabff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
}

.haipick-lights-legend[b-kesvui1sit] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #657da3;
    font-size: 10px;
    line-height: 1.4;
}

.haipick-lights-legend li[b-kesvui1sit] { display: flex; align-items: center; gap: 8px; }
.haipick-legend-swatch[b-kesvui1sit] { width: 25px; height: 20px; border-radius: 6px; }
.haipick-legend-swatch.is-active[b-kesvui1sit] { border: 1px solid #77d4ff; background: linear-gradient(135deg, #c7edff, #b5e4fa); }
.haipick-legend-swatch.is-occupied[b-kesvui1sit] { border: 1px solid #e3ebf5; background: #eaf0f7; }
.haipick-legend-swatch.is-empty[b-kesvui1sit] { border: 1px solid #e2eaf5; background: #fff; }

.haipick-lights[b-kesvui1sit]  .ptl-dashboard,
.haipick-lights[b-kesvui1sit]  .ptl-layout {
    flex: 1 0 auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
}

.haipick-lights[b-kesvui1sit]  .ptl-dashboard {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.haipick-lights[b-kesvui1sit]  .ptl-layout { margin: 0; }
.haipick-lights[b-kesvui1sit]  .ptl-layout > .w-100 { gap: 7px; }

/* กระจายพื้นที่ว่างให้แถว P2L เท่ากัน โดยไม่ยืดส่วนข้อมูลด้านบน */
.haipick-lights[b-kesvui1sit]  .ptl-layout > .w-100,
.haipick-lights[b-kesvui1sit]  .ptl-module-column {
    flex: 1 0 auto;
    align-self: stretch;
}

.haipick-lights[b-kesvui1sit]  .ptl-section-title {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 3px;
    padding: 0 0 10px;
    gap: 10px;
    border-bottom: 1px solid #e5edf6;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.haipick-lights[b-kesvui1sit]  .ptl-section-title::before,
.haipick-lights[b-kesvui1sit]  .ptl-section-title::after { display: none; }

/* ใช้หัวข้อพร้อม Legend ของหน้า PICK โดยคงหัวข้อ Pallet เมื่อสถานีมีช่องแบบนั้น */
.haipick-lights[b-kesvui1sit]  .ptl-section-title:has(.fa-lightbulb) { display: none; }

.haipick-lights[b-kesvui1sit]  .ptl-row {
    flex: 1 0 76px;
    height: 76px;
    min-height: 0;
    gap: 8px;
}

.haipick-lights[b-kesvui1sit]  .ptl-row > .w-100 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.haipick-lights[b-kesvui1sit]  .ptl-row-number {
    width: 48px;
    flex-basis: 48px;
}

.haipick-lights[b-kesvui1sit]  .ptl-row-number h2 {
    transform: none;
    font-size: 24px;
}

.haipick-lights[b-kesvui1sit]  .ptl-slot {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgb(32 68 112 / 4%);
}

.haipick-lights[b-kesvui1sit]  .ptl-slot > .d-flex:first-child {
    min-height: 17px;
    font-size: 11px;
    font-weight: 750;
    color: #142d55;
}

.haipick-lights[b-kesvui1sit]  .ptl-slot > .d-flex:first-child > .justify-content-end {
    position: absolute;
    top: 7px;
    right: 8px;
}

.haipick-lights[b-kesvui1sit]  .ptl-slot h2,
.haipick-lights[b-kesvui1sit]  .ptl-slot h2.text-danger { font-size: 25px; line-height: 1; }
.haipick-lights[b-kesvui1sit]  .ptl-slot .mt-2 { margin-top: 2px !important; font-size: 12px; font-weight: 500; line-height: 1.2; }
.haipick-lights[b-kesvui1sit]  .ptl-slot .text-center > span { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* เปลี่ยนเฉพาะสีแสดงผลของสถานะเดิม ไม่เพิ่มหรือเปลี่ยนเงื่อนไขสถานะ */
.haipick-compact .haipick-lights[b-kesvui1sit]  .ptl-slot.bg-primary {
    background: linear-gradient(135deg, #c7edff, #b5e4fa) !important;
    border-color: #63ceff !important;
}

.haipick-lights[b-kesvui1sit]  .ptl-slot.bg-secondary,
.haipick-lights[b-kesvui1sit]  .ptl-slot.bg-dark {
    background: #eaf0f7 !important;
    border-color: #dde7f2 !important;
    color: #142d55 !important;
}

.haipick-lights[b-kesvui1sit]  .ptl-slot .btn.text-danger {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0 !important;
    border: 1px solid #c6e4f4 !important;
    border-radius: 6px !important;
    background: #e5f5ff !important;
    box-shadow: 0 3px 7px rgb(32 68 112 / 13%);
    font-size: 13px;
}

@media (max-width: 1199px) and (min-width: 901px) {
    .haipick-item-content[b-kesvui1sit] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-kesvui1sit] { border-left: 0; border-top: 1px solid #e5edf6; }
}

@media (max-width: 900px) {
    .haipick-columns[b-kesvui1sit] { grid-template-columns: minmax(0, 1fr); }
    .haipick-sidebar[b-kesvui1sit] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .haipick-compact[b-kesvui1sit] { padding: 10px !important; }
    .haipick-sidebar[b-kesvui1sit],
    .haipick-item-content[b-kesvui1sit] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-kesvui1sit] { border-left: 0; border-top: 1px solid #e5edf6; }
    .haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] { flex-basis: 60px; width: 60px; height: 90px; }
    .haipick-lights[b-kesvui1sit] { overflow-x: auto; }
    .haipick-lights[b-kesvui1sit]  .ptl-dashboard { min-width: 540px; }
}

/* ทุก step ใช้กรอบจอเดียวกัน แบ่งพื้นที่บน/ล่างแทนความสูงคงที่ของแต่ละสถานะ */
.haipick-page.haipick-fit[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: clamp(8px, 1.1vh, 14px);
}

.haipick-fit .haipick-workstation[b-kesvui1sit] {
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0;
}

.haipick-fit .haipick-header[b-kesvui1sit],
.haipick-fit .card-footer[b-kesvui1sit] {
    flex: 0 0 auto;
}

.haipick-fit .haipick-workstation > .haipick-header[b-kesvui1sit] {
    min-height: 58px;
    padding: 10px 16px !important;
}

.haipick-fit .haipick-step-body[b-kesvui1sit] {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(8px, 1vh, 12px) !important;
}

.haipick-fit .haipick-step-body > .haipick-step-frame[b-kesvui1sit] {
    display: grid !important;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.haipick-fit .haipick-step-body.is-cycle-count > .haipick-step-frame[b-kesvui1sit] {
    grid-template-rows: minmax(0, 1fr);
}

.haipick-fit .haipick-step-body .haipick-step-frame > .haipick-step-top[b-kesvui1sit] {
    display: grid !important;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    flex: none !important;
    gap: 12px;
    overflow: hidden;
}

.haipick-fit .haipick-step-body .haipick-step-top > *[b-kesvui1sit],
.haipick-fit .haipick-sidebar > *[b-kesvui1sit],
.haipick-fit .haipick-item-content > *[b-kesvui1sit] {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
}

.haipick-fit .haipick-step-top > .haipick-work-panel[b-kesvui1sit],
.haipick-fit .haipick-return-tote-panel[b-kesvui1sit],
.haipick-fit .haipick-return-products[b-kesvui1sit] {
    height: 100% !important;
    overflow: auto;
}

.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:first-child[b-kesvui1sit],
.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:nth-child(2)[b-kesvui1sit] {
    width: 100% !important;
    flex: none !important;
}

.haipick-fit .is-standby .haipick-step-top > .haipick-work-panel[b-kesvui1sit] {
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

.haipick-fit .haipick-empty-state[b-kesvui1sit] {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: clamp(10px, 2vh, 24px);
    align-self: center;
}

.haipick-fit .haipick-sidebar[b-kesvui1sit] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-sidebar > .haipick-task-banner[b-kesvui1sit] { flex: 0 0 auto; }
.haipick-fit .haipick-tote-card[b-kesvui1sit] { display: flex; flex-direction: column; flex: 1 1 0; }
.haipick-fit .haipick-tote-card > .haipick-section-heading[b-kesvui1sit],
.haipick-fit .haipick-tote-card > .haipick-pick-tote-heading[b-kesvui1sit] { flex: 0 0 auto; }
.haipick-fit .haipick-pick-tote-stage[b-kesvui1sit] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-source-tote[b-kesvui1sit] { max-height: 100%; }
.haipick-fit .haipick-item-card[b-kesvui1sit] { display: flex; flex-direction: column; }
.haipick-fit .haipick-pick-products-header[b-kesvui1sit] { flex: 0 0 auto; }
.haipick-fit .haipick-item-content[b-kesvui1sit] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-item-info[b-kesvui1sit] { height: 100%; overflow: auto; }
.haipick-fit .haipick-operations[b-kesvui1sit] { height: 100%; overflow: auto; }
.haipick-fit .haipick-serial-list[b-kesvui1sit] { min-height: 0; max-height: 100px; overflow: auto; }
.haipick-fit .haipick-return-tote-stage[b-kesvui1sit] { min-height: 0 !important; height: auto !important; overflow: hidden; }

.haipick-fit .haipick-step-frame > .haipick-step-lights[b-kesvui1sit] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-dashboard,
.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-layout > .w-100,
.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-module-column {
    min-height: 0 !important;
    flex: 1 1 0;
    align-self: stretch;
}

.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-row {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
}

.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
}

.haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot > .h-100 {
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    justify-content: center !important;
}

/* จอเตี้ยลดเฉพาะระยะและองค์ประกอบตกแต่ง เพื่อคงปุ่มและข้อมูลที่ใช้ทำงาน */
@media (max-height: 820px) {
    .haipick-fit .haipick-workstation > .haipick-header[b-kesvui1sit] { min-height: 52px; padding: 7px 12px !important; }
    .haipick-fit .haipick-title h2[b-kesvui1sit] { font-size: 23px; }
    .haipick-fit .haipick-task-banner[b-kesvui1sit] { padding: 8px; gap: 3px 8px; }
    .haipick-fit .haipick-task-copy > span[b-kesvui1sit] { display: none; }
    .haipick-fit .haipick-section-heading[b-kesvui1sit] { margin-bottom: 3px; }
    .haipick-fit .haipick-pick-tote-heading[b-kesvui1sit] { padding-bottom: 6px; }
    .haipick-fit .haipick-tote-card[b-kesvui1sit] { padding: 8px; }
    .haipick-fit .haipick-source-partition[b-kesvui1sit] { padding: 3px; gap: 2px; }
    .haipick-fit .haipick-source-partition-name[b-kesvui1sit] { font-size: 11px; line-height: 1.1; }
    .haipick-fit .haipick-source-parts[b-kesvui1sit] { font-size: 10px; gap: 2px; line-height: 1.2; }
    .haipick-fit .haipick-item-info[b-kesvui1sit] { padding: 8px; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] { width: 54px; flex-basis: 54px; height: 70px; }
    .haipick-fit .haipick-item-info table td[b-kesvui1sit] { padding: 5px; }
    .haipick-fit .haipick-operations[b-kesvui1sit] { padding: 8px; gap: 8px; }
    .haipick-fit .haipick-scan-panel > .card[b-kesvui1sit] { padding: 8px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-kesvui1sit] { padding: 6px 8px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-kesvui1sit] { font-size: 28px; }
    .haipick-fit .haipick-lights-header[b-kesvui1sit] { padding: 6px 10px; }
    .haipick-fit .haipick-lights-icon[b-kesvui1sit] { width: 26px; height: 26px; flex-basis: 26px; background-size: 22px; }
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-dashboard { padding: 6px 8px; }
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot { padding: 4px 7px; }
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot > .d-flex:first-child { min-height: 12px; font-size: 10px; }
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot h2,
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot h2.text-danger { font-size: 18px; line-height: 1; }
    .haipick-fit .haipick-step-lights[b-kesvui1sit]  .ptl-slot .mt-2 { font-size: 10px; margin-top: 1px !important; }
}

@media (max-width: 1199px) {
    .haipick-fit .haipick-item-content[b-kesvui1sit] { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .haipick-fit .haipick-step-top[b-kesvui1sit] { gap: 8px !important; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] { display: none; }
    .haipick-fit .haipick-lights-legend[b-kesvui1sit] { gap: 6px 10px; font-size: 9px; }
}

/* แยก Serial ไว้เต็มความกว้างใต้ข้อมูลสินค้า โดยไม่ดันช่องสแกนและ P2L ออกนอกจอ */
.haipick-fit .is-pick > .haipick-step-frame:has(.haipick-serial-section)[b-kesvui1sit] {
    grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section)[b-kesvui1sit] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    container: haipick-serial-card / size;
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-kesvui1sit] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-kesvui1sit] { padding: 6px 4px; font-size: 12px; line-height: 1.35; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] { width: 64px; flex-basis: 64px; height: 90px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-kesvui1sit] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-kesvui1sit] { gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-kesvui1sit] { min-width: 0; overflow-wrap: anywhere; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading > .badge[b-kesvui1sit] { flex: 0 0 auto; }

.haipick-serial-section[b-kesvui1sit] {
    --serial-row-height: 30px;
    --serial-gap: 6px;
    --serial-visible-rows: 3;
    min-width: 0;
    min-height: 0;
    margin: 0 12px 10px;
    padding: 8px;
    border: 1px solid #b8d0ff;
    border-radius: 10px;
    background: #f8fbff;
}

.haipick-serial-heading[b-kesvui1sit] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
    color: #1659dc;
    font-size: 13px;
}

.haipick-serial-heading > i[b-kesvui1sit] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #e8f0ff;
}

.haipick-serial-progress[b-kesvui1sit] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edf7;
    color: #314568;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.haipick-fit .haipick-serial-list.haipick-serial-grid[b-kesvui1sit] {
    /* ให้ความยาวข้อความจริงกำหนดจำนวนต่อแถว แล้วกระจายพื้นที่ที่เหลือให้เต็ม */
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--serial-gap);
    height: calc(var(--serial-visible-rows) * var(--serial-row-height) + (var(--serial-visible-rows) - 1) * var(--serial-gap));
    max-height: none;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #86adff #edf3fc;
    overscroll-behavior: contain;
}

.haipick-serial-grid:focus-visible[b-kesvui1sit] { outline: 2px solid #2b6af4; outline-offset: 2px; }

.haipick-serial-chip[b-kesvui1sit] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: min(100%, 9rem);
    max-width: 100%;
    height: var(--serial-row-height);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #244575;
    background: #eaf0ff;
    font-size: 12px;
    line-height: 1.2;
}

.haipick-serial-chip > span:last-child[b-kesvui1sit] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haipick-serial-marker[b-kesvui1sit] { flex: 0 0 auto; font-size: 11px; }
.haipick-serial-chip.is-scanned[b-kesvui1sit] { color: #087447; border-color: #b8e6d0; background: #e4f7ed; font-weight: 650; }

/* อิงความสูงการ์ดจริง: แสดงสามแถวเมื่อพอ และสองแถวเมื่อจอ/กรอบงานเตี้ย */
@container haipick-serial-card (max-height: 410px) {
    .haipick-serial-section[b-kesvui1sit] { --serial-visible-rows: 2; --serial-row-height: 26px; --serial-gap: 4px; margin: 0 8px 8px; padding: 6px; }
    .haipick-serial-heading[b-kesvui1sit] { min-height: 20px; margin-bottom: 4px; font-size: 12px; }
    .haipick-serial-heading > i[b-kesvui1sit] { width: 20px; height: 20px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-kesvui1sit] { padding: 6px 8px; gap: 8px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-kesvui1sit] { padding: 3px 4px; font-size: 11px; line-height: 1.3; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-kesvui1sit] { display: none; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-kesvui1sit] { padding: 6px 8px; gap: 6px; }
    .haipick-scan-panel > .card[b-kesvui1sit] { padding: 8px !important; }
    .haipick-scan-panel > .card > .mb-2[b-kesvui1sit] { margin-bottom: 6px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-kesvui1sit] { padding: 5px 6px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-kesvui1sit] { font-size: 26px; }
    .haipick-quantity-label[b-kesvui1sit] { gap: 4px; font-size: 10px; }
    .haipick-quantity-label i[b-kesvui1sit] { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
    .haipick-serial-chip[b-kesvui1sit] { padding: 2px 5px; font-size: 11px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-kesvui1sit] { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-kesvui1sit] { overflow: hidden; text-overflow: ellipsis; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card[b-kesvui1sit] { padding: 6px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card > .mb-2[b-kesvui1sit] { margin-bottom: 4px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-kesvui1sit]  .form-control,
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-kesvui1sit]  .haipick-scan-button { height: 34px; min-height: 34px; font-size: 12px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid > .card[b-kesvui1sit] { padding: 3px 5px !important; gap: 2px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid .h1[b-kesvui1sit] { font-size: 22px; line-height: 1; }
}

@media (max-height: 820px) {
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-kesvui1sit]  .ptl-slot { padding: 2px 6px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-kesvui1sit]  .ptl-slot > .d-flex:first-child { min-height: 10px; font-size: 9px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-kesvui1sit]  .ptl-slot h2,
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-kesvui1sit]  .ptl-slot h2.text-danger { font-size: 14px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-kesvui1sit]  .ptl-slot .mt-2 { font-size: 9px; line-height: 1; }
}
/* _content/WMS.UI/Pages/Workstation/Picking/HaipickPickBody.razor.rz.scp.css */
.haipick-page[b-vcgkenfles] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: #f4f7fb;
}

.haipick-workstation[b-vcgkenfles] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgb(15 23 42 / 6%);
}

.haipick-header[b-vcgkenfles] {
    min-height: 66px;
    padding: 10px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #1459a6, #2872c8);
}

.haipick-header.is-disabled[b-vcgkenfles] {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.haipick-title[b-vcgkenfles] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.haipick-title span[b-vcgkenfles] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.haipick-title h2[b-vcgkenfles] {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.haipick-header-actions[b-vcgkenfles] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.haipick-switch-button[b-vcgkenfles] {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-switch-button:hover[b-vcgkenfles] {
    color: #fff;
    background: rgb(255 255 255 / 24%);
    transform: translateY(-1px);
}

.haipick-setting-button[b-vcgkenfles] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-setting-button:hover[b-vcgkenfles] {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.haipick-body[b-vcgkenfles] {
    min-width: 0;
    min-height: 0;
    padding: 12px !important;
    overflow: auto;
    background: #f7f9fc;
}

.haipick-body > .d-flex.flex-column[b-vcgkenfles] {
    min-height: 100%;
    gap: 12px;
}

.haipick-work-area[b-vcgkenfles] {
    min-width: 0;
    min-height: 260px;
    gap: 12px;
}

.haipick-work-panel[b-vcgkenfles] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.haipick-work-panel > .w-100.h-100[b-vcgkenfles] {
    padding: 14px;
}

.haipick-work-panel .card.rounded-0[b-vcgkenfles] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-work-panel img[b-vcgkenfles] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.haipick-body[b-vcgkenfles]  .badge {
    border-radius: 999px;
}

.haipick-body[b-vcgkenfles]  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .haipick-page[b-vcgkenfles] {
        padding: 10px;
        overflow-y: auto;
    }

    .haipick-work-area[b-vcgkenfles] {
        height: auto !important;
        flex-direction: column !important;
    }

    .haipick-work-panel[b-vcgkenfles] {
        min-height: 260px;
    }
}


/* Populated picking state: tote at left, item details at right, PTL fixed below */
.haipick-header[b-vcgkenfles] {
    width: 100%;
    display: flex !important;
}

.haipick-setting-button[b-vcgkenfles] {
    flex: 0 0 38px;
}

.haipick-body > .d-flex.flex-column.h-100[b-vcgkenfles] {
    display: grid !important;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    align-items: stretch;
}

.haipick-work-area[b-vcgkenfles] {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.haipick-work-area > .haipick-work-panel:first-child[b-vcgkenfles] {
    width: 26% !important;
    flex: 0 0 26%;
}

.haipick-work-area > .haipick-work-panel:nth-child(2)[b-vcgkenfles] {
    width: auto !important;
    flex: 1 1 74%;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.d-flex[b-vcgkenfles] {
    min-height: 0;
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid #e8edf3;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table[b-vcgkenfles] {
    margin: 0;
    font-size: 12px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td[b-vcgkenfles] {
    padding: 7px 9px;
    border-color: #edf1f6;
    vertical-align: middle;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td.text-end[b-vcgkenfles] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3[b-vcgkenfles] {
    height: auto !important;
    min-height: 84px;
    margin-top: auto;
    padding: 10px 12px 12px !important;
    gap: 10px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 > .card[b-vcgkenfles] {
    min-height: 68px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 .h1[b-vcgkenfles] {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

.haipick-body > .d-flex.flex-column.h-100 > .w-100:last-child[b-vcgkenfles] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-vcgkenfles] {
        display: flex !important;
    }

    .haipick-work-area > .haipick-work-panel:first-child[b-vcgkenfles],
    .haipick-work-area > .haipick-work-panel:nth-child(2)[b-vcgkenfles] {
        width: 100% !important;
        flex-basis: auto;
    }
}


/* Keep the work area visible while the station is in STANDBY */
.haipick-body[b-vcgkenfles] {
    display: block !important;
}

.haipick-body > .d-flex.flex-column.h-100[b-vcgkenfles] {
    height: auto !important;
    min-height: 700px;
    display: flex !important;
    flex-direction: column !important;
}

.haipick-body .haipick-work-area[b-vcgkenfles] {
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    flex: 0 0 360px !important;
    display: flex !important;
}

.haipick-empty-state[b-vcgkenfles] {
    max-width: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

.haipick-empty-icon[b-vcgkenfles] {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
}

.haipick-empty-state strong[b-vcgkenfles] {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.haipick-empty-state small[b-vcgkenfles] {
    color: #94a3b8;
    font-size: 11px;
}

button.haipick-setting-button[b-vcgkenfles] {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgb(255 255 255 / 30%) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-vcgkenfles] {
        min-height: 0;
    }

    .haipick-body .haipick-work-area[b-vcgkenfles] {
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
    }
}


/* Replen-style active task banner */
.haipick-task-banner[b-vcgkenfles] {
    width: calc(100% - 20px);
    min-height: 70px;
    margin: 10px 10px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a5f;
    background: #eff6ff;
}

.haipick-task-icon[b-vcgkenfles] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 17px;
}

.haipick-task-copy[b-vcgkenfles] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.haipick-task-copy small[b-vcgkenfles] {
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.haipick-task-copy strong[b-vcgkenfles] {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.haipick-task-copy span[b-vcgkenfles] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-task-count[b-vcgkenfles] {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haipick-task-count strong[b-vcgkenfles] {
    color: #2563eb;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.haipick-task-count span[b-vcgkenfles] {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.haipick-waiting-badge[b-vcgkenfles] {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.haipick-waiting-badge i[b-vcgkenfles] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

.haipick-modal[b-vcgkenfles]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 24%);
}

.haipick-modal[b-vcgkenfles]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-vcgkenfles]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.haipick-modal[b-vcgkenfles]  .modal-body {
    padding: 18px;
    background: #f8fafc;
}

.haipick-modal[b-vcgkenfles]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-vcgkenfles]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 8px !important;
}

.haipick-modal[b-vcgkenfles]  .form-control,
.haipick-modal[b-vcgkenfles]  .select {
    min-height: 40px;
    border-color: #cfd9e7;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .haipick-task-banner[b-vcgkenfles] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .haipick-waiting-badge[b-vcgkenfles] {
        margin-left: 52px;
    }
}


/* PICK_CONFIRM_RETURN — aligned with the Replen workstation visual language */
.haipick-return-body[b-vcgkenfles] {
    padding: 14px !important;
    background: #f5f8fc;
}

.haipick-return-shell[b-vcgkenfles] {
    min-height: 0;
}

.haipick-return-layout[b-vcgkenfles] {
    gap: 14px;
    min-height: 0;
    padding-top: 12px;
}

.haipick-return-tote-panel[b-vcgkenfles],
.haipick-return-products[b-vcgkenfles] {
    min-width: 0;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 44, 83, .05);
}

.haipick-return-tote-panel[b-vcgkenfles] {
    flex: 0 0 31%;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-return-products[b-vcgkenfles] {
    flex: 1 1 69%;
}

.haipick-return-tote-content[b-vcgkenfles] {
    justify-content: flex-start !important;
    gap: 18px;
    padding-top: 6px;
}

.haipick-return-tote-heading[b-vcgkenfles] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-return-tote-heading > div[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-return-eyebrow[b-vcgkenfles],
.haipick-return-products-header span[b-vcgkenfles],
.haipick-setting-summary span[b-vcgkenfles] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-tote-heading strong[b-vcgkenfles] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-return-ready[b-vcgkenfles] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-return-tote-stage[b-vcgkenfles] {
    width: 100%;
    min-height: 245px;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-return-tote-visual[b-vcgkenfles] {
    position: relative;
    width: min(240px, 78%);
    height: 160px;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgba(40, 101, 238, .15);
}

.haipick-return-tote-visual[b-vcgkenfles]::before,
.haipick-return-tote-visual[b-vcgkenfles]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
}

.haipick-return-tote-visual[b-vcgkenfles]::before { left: 12px; }
.haipick-return-tote-visual[b-vcgkenfles]::after { right: 12px; }

.haipick-return-products-header[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid #dde6f1;
    background: #fff;
}

.haipick-return-products-icon[b-vcgkenfles],
.haipick-setting-summary-icon[b-vcgkenfles] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #1765ed;
    background: #e4eeff;
    font-size: 18px;
}

.haipick-return-products-header > div:last-child[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
}

.haipick-return-products-header strong[b-vcgkenfles] {
    color: #12243d;
    font-size: 17px;
}

.haipick-return-products-body[b-vcgkenfles] {
    min-height: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    background: #fbfdff;
    overflow: auto;
}

.haipick-return-products-body .card[b-vcgkenfles] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.haipick-return-products-body .card-header[b-vcgkenfles] {
    border-radius: 10px 10px 0 0 !important;
}

.haipick-return-products-body table td[b-vcgkenfles],
.haipick-return-products-body table th[b-vcgkenfles] {
    border-color: #e7edf5 !important;
}

.haipick-return-footer[b-vcgkenfles] {
    padding: 12px 16px !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

.haipick-store-in-button[b-vcgkenfles] {
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 12px rgba(18, 163, 74, .18);
}

/* Station settings modal */
[b-vcgkenfles] .haipick-setting-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(8, 31, 61, .24);
}

[b-vcgkenfles] .haipick-setting-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

[b-vcgkenfles] .haipick-setting-modal .modal-title {
    color: #132a49;
    font-size: 18px;
    font-weight: 800;
}

[b-vcgkenfles] .haipick-setting-modal .modal-body {
    padding: 18px;
    background: #f5f8fc;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e0e7f0;
    background: #fff;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
}

.haipick-setting-summary[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #eef5ff;
}

.haipick-setting-summary > div:last-child[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-summary strong[b-vcgkenfles] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-setting-summary small[b-vcgkenfles],
.haipick-setting-section-title small[b-vcgkenfles] {
    color: #6c7d92;
    font-size: 11px;
}

.haipick-setting-section[b-vcgkenfles] {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.haipick-setting-section-title[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #1b5fd5;
}

.haipick-setting-section-title > div[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-section-title strong[b-vcgkenfles] {
    color: #1c2e47;
    font-size: 13px;
}

[b-vcgkenfles] .haipick-setting-section .form-group,
[b-vcgkenfles] .haipick-setting-section .row {
    margin-bottom: 0 !important;
}

[b-vcgkenfles] .haipick-setting-section label {
    color: #334861;
    font-weight: 700;
}

.haipick-zone-list[b-vcgkenfles] {
    max-height: 210px;
    overflow: auto;
    padding: 4px 6px;
}

[b-vcgkenfles] .haipick-zone-list .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 32px;
    margin: 4px 0;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-vcgkenfles] {
        flex-direction: column !important;
        overflow: auto;
    }

    .haipick-return-tote-panel[b-vcgkenfles],
    .haipick-return-products[b-vcgkenfles] {
        flex: 0 0 auto;
        width: 100%;
    }

    .haipick-return-tote-stage[b-vcgkenfles] {
        min-height: 210px;
    }
}


/* Return product list and primary action refinement */
.haipick-return-layout[b-vcgkenfles] {
    height: auto !important;
    min-height: 365px;
    align-items: stretch;
}

.haipick-return-products[b-vcgkenfles] {
    height: auto !important;
    min-height: 365px;
}

.haipick-return-products-body[b-vcgkenfles] {
    overflow: visible !important;
    align-items: stretch !important;
    padding: 14px !important;
}

.haipick-return-products-body > div[b-vcgkenfles],
.haipick-return-products-body > .card[b-vcgkenfles] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body .card-body[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
}

.haipick-return-products-body table[b-vcgkenfles] {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.haipick-return-products-body table tr[b-vcgkenfles] {
    min-height: 38px;
}

.haipick-return-products-body table th[b-vcgkenfles],
.haipick-return-products-body table td[b-vcgkenfles] {
    padding: 9px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e8eef6 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-return-products-body table th[b-vcgkenfles] {
    width: 110px;
    color: #60728a;
    font-size: 12px;
    font-weight: 700;
}

.haipick-return-products-body table td[b-vcgkenfles] {
    color: #172b46;
    font-size: 13px;
    font-weight: 600;
}

.haipick-product-qty[b-vcgkenfles] {
    min-height: 72px;
    margin-top: 12px !important;
    padding: 10px 16px;
    flex-direction: row !important;
    justify-content: space-between !important;
    border: 1px solid #bdeacb;
    border-radius: 9px;
    background: #effbf3;
}

.haipick-product-qty b[b-vcgkenfles] {
    color: #4b6255;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.haipick-product-qty .h1[b-vcgkenfles] {
    margin: 0 !important;
    color: #0ba64b !important;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.haipick-return-footer[b-vcgkenfles] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 16px !important;
}

.haipick-return-footer-copy[b-vcgkenfles] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-return-footer-copy span[b-vcgkenfles] {
    color: #62748c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-footer-copy strong[b-vcgkenfles] {
    color: #1a2f4c;
    font-size: 12px;
    font-weight: 700;
}

.haipick-store-in-button[b-vcgkenfles] {
    width: 220px !important;
    min-width: 220px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(18, 163, 74, .22);
}

.haipick-store-in-button:hover:not(:disabled)[b-vcgkenfles] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 163, 74, .27);
}

@media (max-width: 680px) {
    .haipick-return-footer[b-vcgkenfles] {
        align-items: stretch;
        flex-direction: column;
    }

    .haipick-store-in-button[b-vcgkenfles] {
        width: 100% !important;
        min-width: 0;
    }
}


/* Let PICK_CONFIRM_RETURN cards size to content; scrolling belongs to the page only. */
.haipick-return-body[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-shell[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.haipick-return-layout[b-vcgkenfles] {
    height: auto !important;
    min-height: 365px !important;
    overflow: visible !important;
}

.haipick-return-tote-panel[b-vcgkenfles],
.haipick-return-products[b-vcgkenfles] {
    height: auto !important;
    min-height: 365px;
    max-height: none !important;
}

.haipick-return-tote-content[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body > .w-100[b-vcgkenfles],
.haipick-return-products-body > div[b-vcgkenfles] {
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body .haipick-product-qty[b-vcgkenfles] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-vcgkenfles],
    .haipick-return-tote-panel[b-vcgkenfles],
    .haipick-return-products[b-vcgkenfles] {
        min-height: 0 !important;
    }
}


/* Type1 product card must include the quantity summary in its intrinsic height. */
.haipick-return-product-card[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    overflow: visible !important;
}

.haipick-return-product-detail[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-return-product-detail > .w-100[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
}

.haipick-return-product-detail .haipick-product-qty[b-vcgkenfles] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}

.haipick-return-products[b-vcgkenfles] {
    overflow: visible !important;
}


/* Final containment for the Qty summary: the previous 365px row was too short. */
@media (min-width: 901px) {
    .haipick-return-layout[b-vcgkenfles] {
        min-height: 410px !important;
    }

    .haipick-return-tote-panel[b-vcgkenfles],
    .haipick-return-products[b-vcgkenfles] {
        min-height: 410px !important;
    }
}

.haipick-return-products[b-vcgkenfles] {
    box-sizing: border-box;
    overflow: hidden !important;
}

.haipick-return-products-body[b-vcgkenfles] {
    box-sizing: border-box;
    padding-bottom: 16px !important;
}

.haipick-return-product-card[b-vcgkenfles],
.haipick-return-product-detail[b-vcgkenfles] {
    width: 100%;
    box-sizing: border-box;
}

.haipick-return-product-detail[b-vcgkenfles] {
    display: block !important;
}

.haipick-return-product-detail > .w-100[b-vcgkenfles] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.haipick-product-qty[b-vcgkenfles] {
    position: static !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px;
    box-sizing: border-box;
}


/* Responsive return view: keep the primary action visible above the application footer. */
@media (max-width: 900px) {
    .haipick-return-body[b-vcgkenfles] {
        flex: 1 1 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .haipick-return-shell[b-vcgkenfles] {
        min-height: max-content !important;
        padding-bottom: 4px;
    }

    .haipick-return-layout[b-vcgkenfles] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        height: auto !important;
        min-height: max-content !important;
    }

    .haipick-return-tote-panel[b-vcgkenfles],
    .haipick-return-products[b-vcgkenfles] {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .haipick-return-products-body[b-vcgkenfles],
    .haipick-return-product-card[b-vcgkenfles],
    .haipick-return-product-detail[b-vcgkenfles] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .haipick-return-footer[b-vcgkenfles] {
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        border-top: 1px solid #d9e3ef !important;
        box-shadow: 0 -8px 20px rgba(15, 44, 83, .10);
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 680px) {
    .haipick-return-body[b-vcgkenfles] {
        padding: 10px !important;
        padding-bottom: 16px !important;
    }

    .haipick-return-tote-panel[b-vcgkenfles] {
        padding: 12px;
    }

    .haipick-return-tote-stage[b-vcgkenfles] {
        min-height: 190px;
    }

    .haipick-return-tote-visual[b-vcgkenfles] {
        width: min(220px, 76%);
        height: 140px;
    }

    .haipick-return-footer-copy[b-vcgkenfles] {
        display: none;
    }

    .haipick-return-footer[b-vcgkenfles] {
        padding: 10px 12px !important;
    }
}


/* Station number and picking type share the same header line. */
.haipick-title-line[b-vcgkenfles] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.haipick-title-line h2[b-vcgkenfles] {
    flex: 0 0 auto;
}

[b-vcgkenfles] .haipick-title-line > div {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
}

[b-vcgkenfles] .haipick-title-line .h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1;
}

[b-vcgkenfles] .haipick-title-line .badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin: 0 4px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: #ff443d !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(115, 17, 12, .18);
}

@media (max-width: 680px) {
    .haipick-title-line[b-vcgkenfles] {
        gap: 6px;
    }

    .haipick-title h2[b-vcgkenfles] {
        font-size: 19px;
    }

    [b-vcgkenfles] .haipick-title-line .badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* Replen-style workstation actions */
.haipick-store-in-button[b-vcgkenfles] {
    width: 190px !important;
    min-width: 190px;
    min-height: 42px;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 1px solid #0b9b49 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #12a84f !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1 !important;
    text-transform: uppercase;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-store-in-button:hover:not(:disabled)[b-vcgkenfles] {
    border-color: #087f3b !important;
    background: #0c9344 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18, 168, 79, .26);
}

.haipick-store-in-button:disabled[b-vcgkenfles] {
    border-color: #a8d9bc !important;
    background: #b9ddc7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 13px 16px !important;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn {
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1 !important;
    box-shadow: none;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-secondary,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-light {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-secondary:hover,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-light:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-primary,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-info,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-success {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20);
}

[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-primary:hover,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-info:hover,
[b-vcgkenfles] .haipick-setting-modal .modal-footer .btn-success:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    .haipick-store-in-button[b-vcgkenfles] {
        width: 100% !important;
        min-width: 0;
    }

    [b-vcgkenfles] .haipick-setting-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* BootstrapBlazor Button renders inside a child component: use ::deep from scoped wrappers. */
[b-vcgkenfles] .haipick-return-footer .haipick-store-in-button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #0b9847 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background-color: #12a84f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20) !important;
}

[b-vcgkenfles] .haipick-return-footer .haipick-store-in-button:hover:not(:disabled) {
    border-color: #087f3b !important;
    background-color: #0c9344 !important;
    transform: translateY(-1px);
}

.haipick-setting-actions[b-vcgkenfles] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

[b-vcgkenfles] .haipick-setting-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

[b-vcgkenfles] .haipick-setting-actions .btn-secondary {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
    box-shadow: none !important;
}

[b-vcgkenfles] .haipick-setting-actions .btn-secondary:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-vcgkenfles] .haipick-setting-actions .btn-primary {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20) !important;
}

[b-vcgkenfles] .haipick-setting-actions .btn-primary:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    [b-vcgkenfles] .haipick-return-footer .haipick-store-in-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .haipick-setting-actions[b-vcgkenfles] {
        gap: 8px;
    }

    [b-vcgkenfles] .haipick-setting-actions .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* Native setting actions — not affected by BootstrapBlazor Button internals. */
.haipick-setting-action[b-vcgkenfles] {
    min-width: 108px;
    height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-setting-action i[b-vcgkenfles] {
    font-size: 13px;
}

.haipick-setting-action-close[b-vcgkenfles] {
    border: 1px solid #cbd6e3;
    color: #344860;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 44, 83, .06);
}

.haipick-setting-action-close:hover[b-vcgkenfles] {
    border-color: #aebdce;
    color: #1f334c;
    background: #f4f7fa;
}

.haipick-setting-action-save[b-vcgkenfles] {
    border: 1px solid #1765ed;
    color: #fff;
    background: #2567e8;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .23);
}

.haipick-setting-action-save:hover[b-vcgkenfles] {
    border-color: #1555c8;
    background: #155bd5;
    box-shadow: 0 7px 16px rgba(37, 103, 232, .28);
    transform: translateY(-1px);
}

.haipick-setting-action:focus-visible[b-vcgkenfles] {
    outline: 3px solid rgba(37, 103, 232, .22);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .haipick-setting-action[b-vcgkenfles] {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* Account for the shared task banner in populated return states. */
@media (min-width: 901px) {
    .haipick-return-layout:has(.haipick-task-banner)[b-vcgkenfles] {
        min-height: 490px !important;
    }

    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-tote-panel[b-vcgkenfles],
    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-products[b-vcgkenfles] {
        min-height: 490px !important;
    }
}

.haipick-return-tote-panel > .haipick-task-banner[b-vcgkenfles] {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-content[b-vcgkenfles] {
    flex: 1 1 auto;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-stage[b-vcgkenfles] {
    min-height: 220px;
}


/* Replen-inspired product detail panel */
.haipick-return-products-header[b-vcgkenfles] {
    position: relative;
}

.haipick-return-product-ready[b-vcgkenfles] {
    margin-left: auto;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #08783e !important;
    background: #d9f8e8;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.haipick-replen-product[b-vcgkenfles] {
    width: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fff;
}

.haipick-replen-product-main[b-vcgkenfles] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.haipick-replen-product-image[b-vcgkenfles] {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5e1ee;
    border-radius: 10px;
    color: #c7d3e1;
    background: #f7faff;
    font-size: 36px;
}

.haipick-replen-product-image img[b-vcgkenfles] {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.haipick-replen-product-details[b-vcgkenfles] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-replen-detail-row[b-vcgkenfles] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 82px minmax(0, .55fr);
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #e6edf5;
}

.haipick-replen-detail-row.single[b-vcgkenfles] {
    grid-template-columns: 92px minmax(0, 1fr);
}

.haipick-replen-detail-row span[b-vcgkenfles] {
    color: #65768c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.haipick-replen-detail-row strong[b-vcgkenfles] {
    min-width: 0;
    overflow: hidden;
    color: #25364d;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-replen-detail-row .haipick-company-value[b-vcgkenfles] {
    color: #ff3f36;
    font-size: 20px;
    font-weight: 800;
}

.haipick-replen-metrics[b-vcgkenfles] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0 132px;
}

.haipick-replen-metric[b-vcgkenfles] {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dae4ef;
    border-radius: 10px;
    background: #f7f9fc;
}

.haipick-replen-metric span[b-vcgkenfles] {
    color: #65768c;
    font-size: 10px;
    font-weight: 650;
}

.haipick-replen-metric strong[b-vcgkenfles] {
    margin-top: 3px;
    color: #344860;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.haipick-replen-metric.is-primary[b-vcgkenfles] {
    border-color: #b9eccb;
    background: #effbf3;
}

.haipick-replen-metric.is-primary strong[b-vcgkenfles] {
    color: #0ba64b;
}

.haipick-replen-product-empty[b-vcgkenfles] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #75869a;
}

.haipick-replen-product-empty i[b-vcgkenfles] {
    color: #c7d3e1;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .haipick-replen-product-main[b-vcgkenfles] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .haipick-replen-product-image[b-vcgkenfles] {
        width: 88px;
        height: 96px;
    }

    .haipick-replen-metrics[b-vcgkenfles] {
        margin-left: 104px;
    }
}

@media (max-width: 680px) {
    .haipick-return-product-ready[b-vcgkenfles] {
        padding: 4px 7px;
    }

    .haipick-replen-product[b-vcgkenfles] {
        padding: 10px;
    }

    .haipick-replen-product-main[b-vcgkenfles] {
        grid-template-columns: 1fr;
    }

    .haipick-replen-product-image[b-vcgkenfles] {
        width: 100%;
        height: 120px;
    }

    .haipick-replen-detail-row[b-vcgkenfles],
    .haipick-replen-detail-row.single[b-vcgkenfles] {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .haipick-replen-detail-row:not(.single) span:nth-of-type(2)[b-vcgkenfles],
    .haipick-replen-detail-row:not(.single) strong:nth-of-type(2)[b-vcgkenfles] {
        margin-top: 6px;
    }

    .haipick-replen-metrics[b-vcgkenfles] {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}


/* PICK state — isolated responsive layout */
.haipick-pick-body[b-vcgkenfles] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc;
}

.haipick-pick-shell[b-vcgkenfles] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-layout[b-vcgkenfles] {
    width: 100%;
    height: auto !important;
    min-height: 360px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-tote[b-vcgkenfles],
.haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 360px;
    flex: none !important;
    overflow: hidden;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 44 83 / 5%);
}

.haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-vcgkenfles],
.haipick-pick-body .haipick-pick-product > .w-100.h-100[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-vcgkenfles] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    padding: 16px !important;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf4;
}

.haipick-pick-body .haipick-pick-product table[b-vcgkenfles] {
    width: 100%;
    min-width: 520px;
    margin: 0;
    table-layout: fixed;
}

.haipick-pick-body .haipick-pick-product table td[b-vcgkenfles] {
    padding: 9px 10px !important;
    vertical-align: middle;
    border-color: #e7edf5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product table td.text-end[b-vcgkenfles] {
    width: 105px !important;
    color: #5d718b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-vcgkenfles] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    padding: 12px 16px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-vcgkenfles] {
    min-width: 0;
    min-height: 76px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
    text-align: center;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-vcgkenfles] {
    margin: 4px 0 0 !important;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.haipick-pick-body .input-group[b-vcgkenfles],
.haipick-pick-body[b-vcgkenfles]  .input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

.haipick-pick-body .form-control[b-vcgkenfles],
.haipick-pick-body[b-vcgkenfles]  .form-control {
    min-width: 0;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-pick-body[b-vcgkenfles] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-layout[b-vcgkenfles] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .haipick-pick-body .haipick-pick-tote[b-vcgkenfles],
    .haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-vcgkenfles] {
        padding: 12px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-vcgkenfles] {
        min-height: 220px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-vcgkenfles] {
        flex-direction: column;
        padding: 12px !important;
        overflow: visible;
    }

    .haipick-pick-body .haipick-pick-product table[b-vcgkenfles] {
        min-width: 0;
        table-layout: auto;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-task-banner[b-vcgkenfles] {
        margin-bottom: 10px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-vcgkenfles] {
        min-height: 190px !important;
    }

    .haipick-pick-body .haipick-pick-product table[b-vcgkenfles],
    .haipick-pick-body .haipick-pick-product tbody[b-vcgkenfles],
    .haipick-pick-body .haipick-pick-product tr[b-vcgkenfles] {
        width: 100%;
    }

    .haipick-pick-body .haipick-pick-product table td[b-vcgkenfles] {
        padding: 7px 6px !important;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product table td.text-end[b-vcgkenfles] {
        width: 88px !important;
        font-size: 9px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-vcgkenfles] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        padding: 10px !important;
        gap: 7px;
        overflow-x: auto;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-vcgkenfles] {
        min-height: 70px;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-vcgkenfles] {
        font-size: 22px;
    }

    .haipick-pick-body[b-vcgkenfles]  .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* PICK Tote — Replen visual style and width correction */
.haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-vcgkenfles] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-tote > .w-100.h-100[b-vcgkenfles] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 18px;
    padding: 0 !important;
}

.haipick-pick-tote-heading[b-vcgkenfles] {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-pick-tote-heading > div[b-vcgkenfles] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-pick-tote-eyebrow[b-vcgkenfles] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-pick-tote-heading strong[b-vcgkenfles] {
    overflow: hidden;
    color: #102a4c;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-pick-tote-ready[b-vcgkenfles] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-pick-tote-stage[b-vcgkenfles] {
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-pick-tote-visual[b-vcgkenfles] {
    position: relative;
    width: min(240px, 78%) !important;
    height: 160px !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgb(40 101 238 / 15%);
}

.haipick-pick-tote-visual[b-vcgkenfles]::before,
.haipick-pick-tote-visual[b-vcgkenfles]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
    pointer-events: none;
}

.haipick-pick-tote-visual[b-vcgkenfles]::before {
    left: 12px;
}

.haipick-pick-tote-visual[b-vcgkenfles]::after {
    right: 12px;
}

.haipick-pick-tote-visual > *[b-vcgkenfles] {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-vcgkenfles] {
        width: 100% !important;
        padding: 12px;
    }

    .haipick-pick-tote-stage[b-vcgkenfles] {
        min-height: 210px;
    }

    .haipick-pick-tote-visual[b-vcgkenfles] {
        width: min(230px, 76%) !important;
        height: 145px !important;
    }
}

@media (max-width: 480px) {
    .haipick-pick-tote-heading[b-vcgkenfles] {
        min-height: 64px;
        padding: 11px 12px;
    }

    .haipick-pick-tote-heading strong[b-vcgkenfles] {
        font-size: 16px;
    }

    .haipick-pick-tote-stage[b-vcgkenfles] {
        min-height: 185px;
    }

    .haipick-pick-tote-visual[b-vcgkenfles] {
        width: min(210px, 78%) !important;
        height: 132px !important;
    }
}


/* PICK layout refinement — compact Tote and structured picking workspace */
.haipick-pick-body .haipick-pick-layout[b-vcgkenfles] {
    grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
    align-items: start !important;
}

.haipick-pick-body .haipick-pick-tote[b-vcgkenfles] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
}

.haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-vcgkenfles] {
    min-height: 238px !important;
    padding: 14px 18px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2:empty[b-vcgkenfles] {
    display: none;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2[b-vcgkenfles] {
    flex: 0 0 auto;
    padding: 8px 14px 8px 0 !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .w-100[b-vcgkenfles] {
    padding: 0 !important;
}

.haipick-pick-body .haipick-pick-product table td[b-vcgkenfles] {
    height: 36px;
    padding: 7px 10px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-vcgkenfles] {
    padding: 0 8px 12px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-vcgkenfles] {
    padding: 12px !important;
    border: 1px solid #cfe0f6 !important;
    border-radius: 10px !important;
    background: #f8fbff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .mb-2[b-vcgkenfles] {
    margin-bottom: 8px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 [style*="max-height:160px"][b-vcgkenfles] {
    max-height: 116px !important;
    padding: 7px 10px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control[b-vcgkenfles] {
    height: 40px;
    border-radius: 7px 0 0 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control.me-2[b-vcgkenfles] {
    margin-right: 8px !important;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-vcgkenfles]  .btn {
    min-width: 72px;
    height: 40px;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-vcgkenfles] {
    margin-top: 0;
    padding: 0 12px 14px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-vcgkenfles] {
    min-height: 68px;
    background: #f7f9fc;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card:first-child[b-vcgkenfles] {
    border-color: #ffd6d6 !important;
    background: #fff8f8;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles] {
    margin-top: 0;
}

@media (min-width: 901px) {
    .haipick-pick-tote-stage[b-vcgkenfles] {
        min-height: 245px;
    }

    .haipick-pick-body .haipick-pick-tote[b-vcgkenfles] {
        min-height: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .haipick-pick-body .haipick-pick-layout[b-vcgkenfles] {
        grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    }

    .haipick-pick-body .haipick-pick-product table td[b-vcgkenfles] {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout[b-vcgkenfles] {
        align-items: stretch !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-vcgkenfles],
    .haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
        align-self: stretch;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-vcgkenfles] {
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-vcgkenfles] {
        padding: 0 0 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-vcgkenfles] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-vcgkenfles] {
        padding: 0 0 10px !important;
    }
}


/* PICK Put-to-Light containment */
.haipick-pick-shell > .w-100:last-child[b-vcgkenfles] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-layout > .w-100,
.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-module-column {
    min-width: 0 !important;
    max-width: 100%;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-section-title {
    min-height: 32px;
    padding: 5px 9px;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-row {
    width: 100%;
    min-width: 0;
    height: 76px !important;
    min-height: 76px;
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-row > .w-100 {
    min-width: 0;
    max-width: calc(100% - 46px);
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-row-number {
    width: 42px;
    min-width: 42px;
    height: 76px !important;
    flex: 0 0 42px;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-slot {
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-slot h2 {
    margin: 0;
    font-size: 21px;
}

.haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-slot .mt-2 {
    margin-top: 1px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-vcgkenfles] {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px;
    flex: 0 0 86px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-vcgkenfles] {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px;
    flex: 1 1 0 !important;
}

@media (max-width: 900px) {
    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-dashboard {
        min-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-dashboard {
        min-width: 0 !important;
    }

    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-row {
        height: auto !important;
        min-height: 0;
    }

    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-row > .w-100 {
        max-width: none;
    }

    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles]  .ptl-slot {
        height: 76px !important;
    }
}


/* PICK product workspace — side-by-side information and operations */
@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        gap: 0;
    }

    .haipick-pick-product-info[b-vcgkenfles] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px 18px !important;
        border-right: 1px solid #e4ebf4;
        border-bottom: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .haipick-pick-scan[b-vcgkenfles] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding: 12px 12px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-vcgkenfles] {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        margin: 0;
        padding: 0 12px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-vcgkenfles] {
        width: 100% !important;
        min-width: 0;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px;
        margin: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box;
        font-size: 11px;
        text-align: center;
    }

    .haipick-pick-quantities > .card .h1[b-vcgkenfles] {
        margin: 3px 0 0 !important;
        font-size: 23px;
        line-height: 1;
    }

    .haipick-pick-shell > .w-100:last-child[b-vcgkenfles] {
        margin-top: -2px;
    }
}

.haipick-pick-product-info table[b-vcgkenfles] {
    width: 100%;
    margin: 0;
}

/* จำกัดความสูงรายการเพื่อให้ช่องสแกนยังอยู่ในมุมมองเมื่อมีหลาย serial */
.haipick-pick-scan .haipick-serial-list[b-vcgkenfles] {
    max-height: 160px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 4px 6px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-serial-row[b-vcgkenfles] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    line-height: 20px;
    border-bottom: 1px solid #edf1f7;
}

.haipick-serial-row:last-child[b-vcgkenfles] {
    border-bottom: 0;
}

.haipick-serial-row > span:last-child[b-vcgkenfles] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table[b-vcgkenfles] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-vcgkenfles] {
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-vcgkenfles] {
    font-size: 13px;
}

.haipick-pick-body .haipick-pick-scan[b-vcgkenfles] {
    font-size: 15px;
    line-height: 1.5;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-vcgkenfles],
.haipick-pick-body .haipick-pick-scan[b-vcgkenfles]  .btn {
    font-size: 15px;
}

.haipick-pick-body .haipick-pick-quantities > .card[b-vcgkenfles] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-pick-body .haipick-pick-quantities > .card .h1[b-vcgkenfles] {
    font-size: 28px;
}

.haipick-pick-product-info table td[b-vcgkenfles] {
    height: 35px;
    padding: 6px 9px !important;
}

.haipick-pick-scan > .card[b-vcgkenfles] {
    margin: 0;
}

@media (max-width: 1100px) {
    .haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
        display: flex !important;
        flex-direction: column !important;
    }

    .haipick-pick-product-info[b-vcgkenfles] {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        border-bottom: 1px solid #e4ebf4;
        box-sizing: border-box;
    }

    .haipick-pick-scan[b-vcgkenfles] {
        width: 100%;
        padding: 10px 10px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-vcgkenfles] {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-vcgkenfles] {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-quantities[b-vcgkenfles] {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .haipick-pick-quantities > .card[b-vcgkenfles] {
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .haipick-switch-button[b-vcgkenfles] {
        width: 38px;
        padding: 0;
    }

    .haipick-switch-button span[b-vcgkenfles] {
        display: none;
    }
}

/* ใช้สีและกรอบมาตรฐานของระบบในส่วนข้อมูลและการสแกน */
.haipick-pick-body .haipick-pick-product-info[b-vcgkenfles] {
    padding: 12px !important;
}

.haipick-pick-product-info > .w-100[b-vcgkenfles] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-vcgkenfles] {
    padding: 8px !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-vcgkenfles] {
    width: 95px !important;
    text-transform: none;
    color: var(--bs-secondary);
    font-weight: 600;
}

.haipick-pick-body .haipick-pick-product-info table tr:last-child td[b-vcgkenfles] {
    border-bottom: 0;
}

.haipick-pick-body .haipick-pick-scan > .card[b-vcgkenfles],
.haipick-pick-body .haipick-pick-quantities > .card[b-vcgkenfles] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background: var(--bs-body-bg);
    box-shadow: none;
}

.haipick-pick-body .haipick-pick-scan > .card[b-vcgkenfles] {
    padding: 12px !important;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-vcgkenfles],
.haipick-pick-body .haipick-pick-scan[b-vcgkenfles]  .btn {
    border-radius: var(--bs-border-radius) !important;
}

.haipick-pick-scan .haipick-serial-list[b-vcgkenfles] {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

@media (max-width: 560px) {
    .haipick-pick-product-info[b-vcgkenfles] {
        flex-direction: column;
    }
}

/* ใช้หัวการ์ดและกรอบรูปแบบเดียวกับ Product List ในขั้นตอนส่งคืน */
.haipick-pick-products-header[b-vcgkenfles] {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product-info[b-vcgkenfles] {
    gap: 12px;
    align-items: flex-start;
    background: #fff;
}

.haipick-pick-product-info > .haipick-replen-product-image[b-vcgkenfles] {
    flex: 0 0 90px;
    width: 90px;
    height: 100px;
    margin-top: 8px;
}

.haipick-pick-product-info > .w-100[b-vcgkenfles] {
    flex: 1 1 0;
    padding: 0 !important;
    margin: 0;
}

.haipick-return-shell[b-vcgkenfles] {
    gap: 14px;
}

.haipick-return-ptl[b-vcgkenfles] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-vcgkenfles] {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-rows: auto auto auto;
    }

    .haipick-pick-products-header[b-vcgkenfles] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .haipick-pick-product-info[b-vcgkenfles] {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .haipick-pick-scan[b-vcgkenfles] {
        grid-column: 2;
        grid-row: 2;
    }

    .haipick-pick-quantities[b-vcgkenfles] {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .haipick-pick-product-info > .haipick-replen-product-image[b-vcgkenfles] {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }
}

/* โครงสร้าง PICK แยกจากรูปแบบเดิม ให้การ์ดสูงตามเนื้อหาและสแกนต่อจากข้อมูล */
.haipick-workstation:has(.haipick-compact) > .haipick-header[b-vcgkenfles] {
    min-height: 76px;
    padding: 14px 20px !important;
    background: linear-gradient(115deg, #1559ae, #2878cf);
}

.haipick-workstation:has(.haipick-compact) .haipick-title h2[b-vcgkenfles] { font-size: 28px; }
.haipick-workstation:has(.haipick-compact) .haipick-title > span[b-vcgkenfles] { font-size: 10px; }
.haipick-workstation:has(.haipick-compact) .haipick-title[b-vcgkenfles]  .badge {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
}

.haipick-body.haipick-compact[b-vcgkenfles] {
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    overflow: auto;
    background: #f2f7fc;
    color: #142d55;
}

.haipick-workspace[b-vcgkenfles] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.haipick-columns[b-vcgkenfles] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.haipick-sidebar[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.haipick-tote-card[b-vcgkenfles],
.haipick-item-card[b-vcgkenfles] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-tote-card[b-vcgkenfles] {
    padding: 12px;
}

.haipick-section-heading[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.haipick-section-icon[b-vcgkenfles] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2165ed;
    font-size: 19px;
}

.haipick-compact .haipick-task-banner[b-vcgkenfles] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-compact .haipick-task-icon[b-vcgkenfles] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

.haipick-compact .haipick-task-copy[b-vcgkenfles] {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 5px;
}

.haipick-compact .haipick-task-copy small[b-vcgkenfles] {
    color: #142d55;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
}

.haipick-compact .haipick-task-copy strong[b-vcgkenfles] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-compact .haipick-task-copy > span[b-vcgkenfles] {
    font-size: 11px;
}

.haipick-compact .haipick-waiting-badge[b-vcgkenfles] {
    grid-column: 3;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0;
}

.haipick-compact .haipick-task-count[b-vcgkenfles] {
    grid-column: 3;
    grid-row: 2;
    gap: 3px;
    border-left: 1px solid #e5edf8;
}

.haipick-compact .haipick-task-count strong[b-vcgkenfles] { font-size: 24px; }
.haipick-compact .haipick-task-count span[b-vcgkenfles] { font-size: 9px; }

.haipick-compact .haipick-pick-tote-heading[b-vcgkenfles] {
    min-height: 0;
    padding: 0 2px 12px 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.haipick-compact .haipick-pick-tote-eyebrow[b-vcgkenfles] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.haipick-compact .haipick-pick-tote-heading strong[b-vcgkenfles] { font-size: 22px; }
.haipick-compact .haipick-pick-tote-ready[b-vcgkenfles] { font-size: 12px; }
.haipick-compact .haipick-pick-tote-heading > div[b-vcgkenfles] { line-height: 1.3; }

/* ลดเฉพาะพื้นรอบภาพ โดยคงขนาด ภาพ และการแบ่งช่อง Tote เดิม */
.haipick-compact .haipick-pick-tote-stage[b-vcgkenfles] {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    border: 1px solid #e4edf8;
    background: #f5f9ff;
}

/* วาด Type และตำแหน่ง Partition จาก master data เช่นเดียวกับ Replenishment */
.haipick-source-tote[b-vcgkenfles] {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 7px;
    border-radius: 9px 9px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.haipick-source-tote-layout[b-vcgkenfles] {
    position: relative;
    width: 100%;
    height: 100%;
}

.haipick-source-partition[b-vcgkenfles] {
    position: absolute;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c6daf8;
    color: #17386d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.haipick-source-partition-name[b-vcgkenfles] {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.haipick-source-parts[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.haipick-source-whole[b-vcgkenfles] { gap: 6px; padding: 6px; }
.haipick-source-whole img[b-vcgkenfles] { max-height: 55px; }

.haipick-source-tote img[b-vcgkenfles] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-source-partition.bg-primary[b-vcgkenfles] { background-color: #2563eb !important; }

.haipick-compact .haipick-pick-products-header[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5edf6;
    background: #fff;
}

.haipick-compact .haipick-pick-products-header strong[b-vcgkenfles] {
    color: #142d55;
    font-size: 17px;
    line-height: 1.4;
}

.haipick-compact .haipick-return-products-icon[b-vcgkenfles] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.haipick-item-content[b-vcgkenfles] {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    min-width: 0;
}

.haipick-item-info[b-vcgkenfles] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
}

.haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] {
    flex: 0 0 82px;
    width: 82px;
    height: 130px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #f3f7fc;
}

.haipick-item-info > .haipick-replen-product-image img[b-vcgkenfles] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-item-info > .w-100[b-vcgkenfles] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

.haipick-item-info table[b-vcgkenfles] {
    width: 100%;
    height: auto;
    margin: 0;
    table-layout: auto;
}

.haipick-item-info table td[b-vcgkenfles] {
    height: auto;
    padding: 9px 5px;
    border-bottom: 1px solid #e7edf6;
    color: #4d5d76;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.haipick-item-info table td.text-end[b-vcgkenfles] {
    width: 1% !important;
    white-space: nowrap;
    text-align: left !important;
    color: #566e92;
    font-size: 11px;
    font-weight: 700;
}

.haipick-item-info table tr:last-child td[b-vcgkenfles] { border-bottom: 0; }

.haipick-operations[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #e5edf6;
}

.haipick-scan-panel[b-vcgkenfles] { min-width: 0; }

.haipick-scan-panel > .card[b-vcgkenfles] {
    min-height: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f1f7ff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
}

.haipick-scan-panel > .card > .mb-2[b-vcgkenfles] { margin-bottom: 10px !important; }
.haipick-scan-panel > .card > .d-flex[b-vcgkenfles] { min-width: 0; }

.haipick-scan-heading[b-vcgkenfles] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #132f65;
    font-size: 13px;
}

.haipick-scan-heading[b-vcgkenfles]::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 5px;
    border-radius: 7px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e63f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m8 0h5v-5M6 12h12M9 7h6M9 17h6'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.haipick-scan-title[b-vcgkenfles] { color: #132f65; font-weight: 700; }
.haipick-scan-heading > .text-muted[b-vcgkenfles] { color: #536a94 !important; }
.haipick-scan-heading.justify-content-between[b-vcgkenfles] { justify-content: flex-start !important; }
.haipick-scan-heading > .badge[b-vcgkenfles] { margin-left: auto; }
.haipick-scan-entry[b-vcgkenfles] { position: relative; }

/* ไอคอนเป็นของตกแต่ง ไม่รับคลิกและไม่รบกวนการสแกน */
.haipick-scan-entry[b-vcgkenfles]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 21px;
    width: 19px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #8e9bb0 0 1px, transparent 1px 3px, #8e9bb0 3px 5px, transparent 5px 6px);
}

.haipick-scan-panel .form-control[b-vcgkenfles] {
    min-width: 0;
    height: 42px;
    padding-left: 39px;
    border-radius: 8px !important;
    background: #fff;
    font-size: 14px;
    border-color: #709aff !important;
}

.haipick-scan-panel[b-vcgkenfles]  .haipick-scan-button {
    flex: 0 0 auto;
    min-width: 70px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #1958ed !important;
    background: #1958f5 !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

.haipick-scan-panel[b-vcgkenfles]  .haipick-scan-button:not(:disabled):hover {
    border-color: #1048cd !important;
    background: #1048db !important;
}

.haipick-scan-panel[b-vcgkenfles]  .haipick-scan-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.haipick-scan-panel .text-danger:empty[b-vcgkenfles] { display: none; }

.haipick-quantity-grid[b-vcgkenfles] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.haipick-quantity-grid:has(> :nth-child(3))[b-vcgkenfles] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haipick-quantity-grid > .card[b-vcgkenfles] {
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 8px;
    border: 1px solid #e3edf9;
    border-radius: 11px !important;
    background: #f9fbff;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none !important;
}

.haipick-quantity-grid .h1[b-vcgkenfles] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.haipick-quantity-label[b-vcgkenfles] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    gap: 8px;
}

.haipick-quantity-label i[b-vcgkenfles] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: #2165ed;
    background: #e8f1ff;
    font-size: 15px;
}

.haipick-quantity-grid .h1.text-primary[b-vcgkenfles] { color: #0961dc !important; }

.haipick-lights[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
}

.haipick-lights-header[b-vcgkenfles] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5edf6;
}

.haipick-lights-header h3[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #1458e6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}

.haipick-lights-icon[b-vcgkenfles] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c60ed' d='M12 2a7 7 0 0 0-4.7 12.2c.9.8 1.2 1.5 1.2 2.8h7c0-1.3.3-2 1.2-2.8A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 19h6m-5 2h4' fill='none' stroke='%231c60ed' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 8c.4-1.7 1.5-2.5 3-2.6' fill='none' stroke='%237eabff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
}

.haipick-lights-legend[b-vcgkenfles] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #657da3;
    font-size: 10px;
    line-height: 1.4;
}

.haipick-lights-legend li[b-vcgkenfles] { display: flex; align-items: center; gap: 8px; }
.haipick-legend-swatch[b-vcgkenfles] { width: 25px; height: 20px; border-radius: 6px; }
.haipick-legend-swatch.is-active[b-vcgkenfles] { border: 1px solid #77d4ff; background: linear-gradient(135deg, #c7edff, #b5e4fa); }
.haipick-legend-swatch.is-occupied[b-vcgkenfles] { border: 1px solid #e3ebf5; background: #eaf0f7; }
.haipick-legend-swatch.is-empty[b-vcgkenfles] { border: 1px solid #e2eaf5; background: #fff; }

.haipick-lights[b-vcgkenfles]  .ptl-dashboard,
.haipick-lights[b-vcgkenfles]  .ptl-layout {
    flex: 1 0 auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
}

.haipick-lights[b-vcgkenfles]  .ptl-dashboard {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.haipick-lights[b-vcgkenfles]  .ptl-layout { margin: 0; }
.haipick-lights[b-vcgkenfles]  .ptl-layout > .w-100 { gap: 7px; }

/* กระจายพื้นที่ว่างให้แถว P2L เท่ากัน โดยไม่ยืดส่วนข้อมูลด้านบน */
.haipick-lights[b-vcgkenfles]  .ptl-layout > .w-100,
.haipick-lights[b-vcgkenfles]  .ptl-module-column {
    flex: 1 0 auto;
    align-self: stretch;
}

.haipick-lights[b-vcgkenfles]  .ptl-section-title {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 3px;
    padding: 0 0 10px;
    gap: 10px;
    border-bottom: 1px solid #e5edf6;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.haipick-lights[b-vcgkenfles]  .ptl-section-title::before,
.haipick-lights[b-vcgkenfles]  .ptl-section-title::after { display: none; }

/* ใช้หัวข้อพร้อม Legend ของหน้า PICK โดยคงหัวข้อ Pallet เมื่อสถานีมีช่องแบบนั้น */
.haipick-lights[b-vcgkenfles]  .ptl-section-title:has(.fa-lightbulb) { display: none; }

.haipick-lights[b-vcgkenfles]  .ptl-row {
    flex: 1 0 76px;
    height: 76px;
    min-height: 0;
    gap: 8px;
}

.haipick-lights[b-vcgkenfles]  .ptl-row > .w-100 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.haipick-lights[b-vcgkenfles]  .ptl-row-number {
    width: 48px;
    flex-basis: 48px;
}

.haipick-lights[b-vcgkenfles]  .ptl-row-number h2 {
    transform: none;
    font-size: 24px;
}

.haipick-lights[b-vcgkenfles]  .ptl-slot {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgb(32 68 112 / 4%);
}

.haipick-lights[b-vcgkenfles]  .ptl-slot > .d-flex:first-child {
    min-height: 17px;
    font-size: 11px;
    font-weight: 750;
    color: #142d55;
}

.haipick-lights[b-vcgkenfles]  .ptl-slot > .d-flex:first-child > .justify-content-end {
    position: absolute;
    top: 7px;
    right: 8px;
}

.haipick-lights[b-vcgkenfles]  .ptl-slot h2,
.haipick-lights[b-vcgkenfles]  .ptl-slot h2.text-danger { font-size: 25px; line-height: 1; }
.haipick-lights[b-vcgkenfles]  .ptl-slot .mt-2 { margin-top: 2px !important; font-size: 12px; font-weight: 500; line-height: 1.2; }
.haipick-lights[b-vcgkenfles]  .ptl-slot .text-center > span { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* เปลี่ยนเฉพาะสีแสดงผลของสถานะเดิม ไม่เพิ่มหรือเปลี่ยนเงื่อนไขสถานะ */
.haipick-compact .haipick-lights[b-vcgkenfles]  .ptl-slot.bg-primary {
    background: linear-gradient(135deg, #c7edff, #b5e4fa) !important;
    border-color: #63ceff !important;
}

.haipick-lights[b-vcgkenfles]  .ptl-slot.bg-secondary,
.haipick-lights[b-vcgkenfles]  .ptl-slot.bg-dark {
    background: #eaf0f7 !important;
    border-color: #dde7f2 !important;
    color: #142d55 !important;
}

.haipick-lights[b-vcgkenfles]  .ptl-slot .btn.text-danger {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0 !important;
    border: 1px solid #c6e4f4 !important;
    border-radius: 6px !important;
    background: #e5f5ff !important;
    box-shadow: 0 3px 7px rgb(32 68 112 / 13%);
    font-size: 13px;
}

@media (max-width: 1199px) and (min-width: 901px) {
    .haipick-item-content[b-vcgkenfles] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-vcgkenfles] { border-left: 0; border-top: 1px solid #e5edf6; }
}

@media (max-width: 900px) {
    .haipick-columns[b-vcgkenfles] { grid-template-columns: minmax(0, 1fr); }
    .haipick-sidebar[b-vcgkenfles] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .haipick-compact[b-vcgkenfles] { padding: 10px !important; }
    .haipick-sidebar[b-vcgkenfles],
    .haipick-item-content[b-vcgkenfles] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-vcgkenfles] { border-left: 0; border-top: 1px solid #e5edf6; }
    .haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] { flex-basis: 60px; width: 60px; height: 90px; }
    .haipick-lights[b-vcgkenfles] { overflow-x: auto; }
    .haipick-lights[b-vcgkenfles]  .ptl-dashboard { min-width: 540px; }
}

/* ทุก step ใช้กรอบจอเดียวกัน แบ่งพื้นที่บน/ล่างแทนความสูงคงที่ของแต่ละสถานะ */
.haipick-page.haipick-fit[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: clamp(8px, 1.1vh, 14px);
}

.haipick-fit .haipick-workstation[b-vcgkenfles] {
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0;
}

.haipick-fit .haipick-header[b-vcgkenfles],
.haipick-fit .card-footer[b-vcgkenfles] {
    flex: 0 0 auto;
}

.haipick-fit .haipick-workstation > .haipick-header[b-vcgkenfles] {
    min-height: 58px;
    padding: 10px 16px !important;
}

.haipick-fit .haipick-step-body[b-vcgkenfles] {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(8px, 1vh, 12px) !important;
}

.haipick-fit .haipick-step-body > .haipick-step-frame[b-vcgkenfles] {
    display: grid !important;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.haipick-fit .haipick-step-body.is-cycle-count > .haipick-step-frame[b-vcgkenfles] {
    grid-template-rows: minmax(0, 1fr);
}

.haipick-fit .haipick-step-body .haipick-step-frame > .haipick-step-top[b-vcgkenfles] {
    display: grid !important;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    flex: none !important;
    gap: 12px;
    overflow: hidden;
}

.haipick-fit .haipick-step-body .haipick-step-top > *[b-vcgkenfles],
.haipick-fit .haipick-sidebar > *[b-vcgkenfles],
.haipick-fit .haipick-item-content > *[b-vcgkenfles] {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
}

.haipick-fit .haipick-step-top > .haipick-work-panel[b-vcgkenfles],
.haipick-fit .haipick-return-tote-panel[b-vcgkenfles],
.haipick-fit .haipick-return-products[b-vcgkenfles] {
    height: 100% !important;
    overflow: auto;
}

.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:first-child[b-vcgkenfles],
.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:nth-child(2)[b-vcgkenfles] {
    width: 100% !important;
    flex: none !important;
}

.haipick-fit .is-standby .haipick-step-top > .haipick-work-panel[b-vcgkenfles] {
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

.haipick-fit .haipick-empty-state[b-vcgkenfles] {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: clamp(10px, 2vh, 24px);
    align-self: center;
}

.haipick-fit .haipick-sidebar[b-vcgkenfles] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-sidebar > .haipick-task-banner[b-vcgkenfles] { flex: 0 0 auto; }
.haipick-fit .haipick-tote-card[b-vcgkenfles] { display: flex; flex-direction: column; flex: 1 1 0; }
.haipick-fit .haipick-tote-card > .haipick-section-heading[b-vcgkenfles],
.haipick-fit .haipick-tote-card > .haipick-pick-tote-heading[b-vcgkenfles] { flex: 0 0 auto; }
.haipick-fit .haipick-pick-tote-stage[b-vcgkenfles] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-source-tote[b-vcgkenfles] { max-height: 100%; }
.haipick-fit .haipick-item-card[b-vcgkenfles] { display: flex; flex-direction: column; }
.haipick-fit .haipick-pick-products-header[b-vcgkenfles] { flex: 0 0 auto; }
.haipick-fit .haipick-item-content[b-vcgkenfles] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-item-info[b-vcgkenfles] { height: 100%; overflow: auto; }
.haipick-fit .haipick-operations[b-vcgkenfles] { height: 100%; overflow: auto; }
.haipick-fit .haipick-serial-list[b-vcgkenfles] { min-height: 0; max-height: 100px; overflow: auto; }
.haipick-fit .haipick-return-tote-stage[b-vcgkenfles] { min-height: 0 !important; height: auto !important; overflow: hidden; }

.haipick-fit .haipick-step-frame > .haipick-step-lights[b-vcgkenfles] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-dashboard,
.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-layout > .w-100,
.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-module-column {
    min-height: 0 !important;
    flex: 1 1 0;
    align-self: stretch;
}

.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-row {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
}

.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
}

.haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot > .h-100 {
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    justify-content: center !important;
}

/* จอเตี้ยลดเฉพาะระยะและองค์ประกอบตกแต่ง เพื่อคงปุ่มและข้อมูลที่ใช้ทำงาน */
@media (max-height: 820px) {
    .haipick-fit .haipick-workstation > .haipick-header[b-vcgkenfles] { min-height: 52px; padding: 7px 12px !important; }
    .haipick-fit .haipick-title h2[b-vcgkenfles] { font-size: 23px; }
    .haipick-fit .haipick-task-banner[b-vcgkenfles] { padding: 8px; gap: 3px 8px; }
    .haipick-fit .haipick-task-copy > span[b-vcgkenfles] { display: none; }
    .haipick-fit .haipick-section-heading[b-vcgkenfles] { margin-bottom: 3px; }
    .haipick-fit .haipick-pick-tote-heading[b-vcgkenfles] { padding-bottom: 6px; }
    .haipick-fit .haipick-tote-card[b-vcgkenfles] { padding: 8px; }
    .haipick-fit .haipick-source-partition[b-vcgkenfles] { padding: 3px; gap: 2px; }
    .haipick-fit .haipick-source-partition-name[b-vcgkenfles] { font-size: 11px; line-height: 1.1; }
    .haipick-fit .haipick-source-parts[b-vcgkenfles] { font-size: 10px; gap: 2px; line-height: 1.2; }
    .haipick-fit .haipick-item-info[b-vcgkenfles] { padding: 8px; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] { width: 54px; flex-basis: 54px; height: 70px; }
    .haipick-fit .haipick-item-info table td[b-vcgkenfles] { padding: 5px; }
    .haipick-fit .haipick-operations[b-vcgkenfles] { padding: 8px; gap: 8px; }
    .haipick-fit .haipick-scan-panel > .card[b-vcgkenfles] { padding: 8px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-vcgkenfles] { padding: 6px 8px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-vcgkenfles] { font-size: 28px; }
    .haipick-fit .haipick-lights-header[b-vcgkenfles] { padding: 6px 10px; }
    .haipick-fit .haipick-lights-icon[b-vcgkenfles] { width: 26px; height: 26px; flex-basis: 26px; background-size: 22px; }
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-dashboard { padding: 6px 8px; }
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot { padding: 4px 7px; }
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot > .d-flex:first-child { min-height: 12px; font-size: 10px; }
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot h2,
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot h2.text-danger { font-size: 18px; line-height: 1; }
    .haipick-fit .haipick-step-lights[b-vcgkenfles]  .ptl-slot .mt-2 { font-size: 10px; margin-top: 1px !important; }
}

@media (max-width: 1199px) {
    .haipick-fit .haipick-item-content[b-vcgkenfles] { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .haipick-fit .haipick-step-top[b-vcgkenfles] { gap: 8px !important; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] { display: none; }
    .haipick-fit .haipick-lights-legend[b-vcgkenfles] { gap: 6px 10px; font-size: 9px; }
}

/* แยก Serial ไว้เต็มความกว้างใต้ข้อมูลสินค้า โดยไม่ดันช่องสแกนและ P2L ออกนอกจอ */
.haipick-fit .is-pick > .haipick-step-frame:has(.haipick-serial-section)[b-vcgkenfles] {
    grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section)[b-vcgkenfles] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    container: haipick-serial-card / size;
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-vcgkenfles] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-vcgkenfles] { padding: 6px 4px; font-size: 12px; line-height: 1.35; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] { width: 64px; flex-basis: 64px; height: 90px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-vcgkenfles] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-vcgkenfles] { gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-vcgkenfles] { min-width: 0; overflow-wrap: anywhere; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading > .badge[b-vcgkenfles] { flex: 0 0 auto; }

.haipick-serial-section[b-vcgkenfles] {
    --serial-row-height: 30px;
    --serial-gap: 6px;
    --serial-visible-rows: 3;
    min-width: 0;
    min-height: 0;
    margin: 0 12px 10px;
    padding: 8px;
    border: 1px solid #b8d0ff;
    border-radius: 10px;
    background: #f8fbff;
}

.haipick-serial-heading[b-vcgkenfles] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
    color: #1659dc;
    font-size: 13px;
}

.haipick-serial-heading > i[b-vcgkenfles] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #e8f0ff;
}

.haipick-serial-progress[b-vcgkenfles] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edf7;
    color: #314568;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.haipick-fit .haipick-serial-list.haipick-serial-grid[b-vcgkenfles] {
    /* ให้ความยาวข้อความจริงกำหนดจำนวนต่อแถว แล้วกระจายพื้นที่ที่เหลือให้เต็ม */
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--serial-gap);
    height: calc(var(--serial-visible-rows) * var(--serial-row-height) + (var(--serial-visible-rows) - 1) * var(--serial-gap));
    max-height: none;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #86adff #edf3fc;
    overscroll-behavior: contain;
}

.haipick-serial-grid:focus-visible[b-vcgkenfles] { outline: 2px solid #2b6af4; outline-offset: 2px; }

.haipick-serial-chip[b-vcgkenfles] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: min(100%, 9rem);
    max-width: 100%;
    height: var(--serial-row-height);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #244575;
    background: #eaf0ff;
    font-size: 12px;
    line-height: 1.2;
}

.haipick-serial-chip > span:last-child[b-vcgkenfles] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haipick-serial-marker[b-vcgkenfles] { flex: 0 0 auto; font-size: 11px; }
.haipick-serial-chip.is-scanned[b-vcgkenfles] { color: #087447; border-color: #b8e6d0; background: #e4f7ed; font-weight: 650; }

/* อิงความสูงการ์ดจริง: แสดงสามแถวเมื่อพอ และสองแถวเมื่อจอ/กรอบงานเตี้ย */
@container haipick-serial-card (max-height: 410px) {
    .haipick-serial-section[b-vcgkenfles] { --serial-visible-rows: 2; --serial-row-height: 26px; --serial-gap: 4px; margin: 0 8px 8px; padding: 6px; }
    .haipick-serial-heading[b-vcgkenfles] { min-height: 20px; margin-bottom: 4px; font-size: 12px; }
    .haipick-serial-heading > i[b-vcgkenfles] { width: 20px; height: 20px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-vcgkenfles] { padding: 6px 8px; gap: 8px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-vcgkenfles] { padding: 3px 4px; font-size: 11px; line-height: 1.3; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-vcgkenfles] { display: none; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-vcgkenfles] { padding: 6px 8px; gap: 6px; }
    .haipick-scan-panel > .card[b-vcgkenfles] { padding: 8px !important; }
    .haipick-scan-panel > .card > .mb-2[b-vcgkenfles] { margin-bottom: 6px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-vcgkenfles] { padding: 5px 6px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-vcgkenfles] { font-size: 26px; }
    .haipick-quantity-label[b-vcgkenfles] { gap: 4px; font-size: 10px; }
    .haipick-quantity-label i[b-vcgkenfles] { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
    .haipick-serial-chip[b-vcgkenfles] { padding: 2px 5px; font-size: 11px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-vcgkenfles] { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-vcgkenfles] { overflow: hidden; text-overflow: ellipsis; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card[b-vcgkenfles] { padding: 6px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card > .mb-2[b-vcgkenfles] { margin-bottom: 4px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-vcgkenfles]  .form-control,
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-vcgkenfles]  .haipick-scan-button { height: 34px; min-height: 34px; font-size: 12px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid > .card[b-vcgkenfles] { padding: 3px 5px !important; gap: 2px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid .h1[b-vcgkenfles] { font-size: 22px; line-height: 1; }
}

@media (max-height: 820px) {
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-vcgkenfles]  .ptl-slot { padding: 2px 6px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-vcgkenfles]  .ptl-slot > .d-flex:first-child { min-height: 10px; font-size: 9px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-vcgkenfles]  .ptl-slot h2,
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-vcgkenfles]  .ptl-slot h2.text-danger { font-size: 14px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-vcgkenfles]  .ptl-slot .mt-2 { font-size: 9px; line-height: 1; }
}
/* _content/WMS.UI/Pages/Workstation/Picking/HaipickReturnBody.razor.rz.scp.css */
.haipick-page[b-nb59bj1vlt] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: #f4f7fb;
}

.haipick-workstation[b-nb59bj1vlt] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgb(15 23 42 / 6%);
}

.haipick-header[b-nb59bj1vlt] {
    min-height: 66px;
    padding: 10px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #1459a6, #2872c8);
}

.haipick-header.is-disabled[b-nb59bj1vlt] {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.haipick-title[b-nb59bj1vlt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.haipick-title span[b-nb59bj1vlt] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.haipick-title h2[b-nb59bj1vlt] {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.haipick-header-actions[b-nb59bj1vlt] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.haipick-switch-button[b-nb59bj1vlt] {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-switch-button:hover[b-nb59bj1vlt] {
    color: #fff;
    background: rgb(255 255 255 / 24%);
    transform: translateY(-1px);
}

.haipick-setting-button[b-nb59bj1vlt] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-setting-button:hover[b-nb59bj1vlt] {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.haipick-body[b-nb59bj1vlt] {
    min-width: 0;
    min-height: 0;
    padding: 12px !important;
    overflow: auto;
    background: #f7f9fc;
}

.haipick-body > .d-flex.flex-column[b-nb59bj1vlt] {
    min-height: 100%;
    gap: 12px;
}

.haipick-work-area[b-nb59bj1vlt] {
    min-width: 0;
    min-height: 260px;
    gap: 12px;
}

.haipick-work-panel[b-nb59bj1vlt] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.haipick-work-panel > .w-100.h-100[b-nb59bj1vlt] {
    padding: 14px;
}

.haipick-work-panel .card.rounded-0[b-nb59bj1vlt] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-work-panel img[b-nb59bj1vlt] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.haipick-body[b-nb59bj1vlt]  .badge {
    border-radius: 999px;
}

.haipick-body[b-nb59bj1vlt]  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .haipick-page[b-nb59bj1vlt] {
        padding: 10px;
        overflow-y: auto;
    }

    .haipick-work-area[b-nb59bj1vlt] {
        height: auto !important;
        flex-direction: column !important;
    }

    .haipick-work-panel[b-nb59bj1vlt] {
        min-height: 260px;
    }
}


/* Populated picking state: tote at left, item details at right, PTL fixed below */
.haipick-header[b-nb59bj1vlt] {
    width: 100%;
    display: flex !important;
}

.haipick-setting-button[b-nb59bj1vlt] {
    flex: 0 0 38px;
}

.haipick-body > .d-flex.flex-column.h-100[b-nb59bj1vlt] {
    display: grid !important;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    align-items: stretch;
}

.haipick-work-area[b-nb59bj1vlt] {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.haipick-work-area > .haipick-work-panel:first-child[b-nb59bj1vlt] {
    width: 26% !important;
    flex: 0 0 26%;
}

.haipick-work-area > .haipick-work-panel:nth-child(2)[b-nb59bj1vlt] {
    width: auto !important;
    flex: 1 1 74%;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.d-flex[b-nb59bj1vlt] {
    min-height: 0;
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid #e8edf3;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table[b-nb59bj1vlt] {
    margin: 0;
    font-size: 12px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td[b-nb59bj1vlt] {
    padding: 7px 9px;
    border-color: #edf1f6;
    vertical-align: middle;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td.text-end[b-nb59bj1vlt] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 84px;
    margin-top: auto;
    padding: 10px 12px 12px !important;
    gap: 10px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 > .card[b-nb59bj1vlt] {
    min-height: 68px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 .h1[b-nb59bj1vlt] {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

.haipick-body > .d-flex.flex-column.h-100 > .w-100:last-child[b-nb59bj1vlt] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-nb59bj1vlt] {
        display: flex !important;
    }

    .haipick-work-area > .haipick-work-panel:first-child[b-nb59bj1vlt],
    .haipick-work-area > .haipick-work-panel:nth-child(2)[b-nb59bj1vlt] {
        width: 100% !important;
        flex-basis: auto;
    }
}


/* Keep the work area visible while the station is in STANDBY */
.haipick-body[b-nb59bj1vlt] {
    display: block !important;
}

.haipick-body > .d-flex.flex-column.h-100[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 700px;
    display: flex !important;
    flex-direction: column !important;
}

.haipick-body .haipick-work-area[b-nb59bj1vlt] {
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    flex: 0 0 360px !important;
    display: flex !important;
}

.haipick-empty-state[b-nb59bj1vlt] {
    max-width: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

.haipick-empty-icon[b-nb59bj1vlt] {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
}

.haipick-empty-state strong[b-nb59bj1vlt] {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.haipick-empty-state small[b-nb59bj1vlt] {
    color: #94a3b8;
    font-size: 11px;
}

button.haipick-setting-button[b-nb59bj1vlt] {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgb(255 255 255 / 30%) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-nb59bj1vlt] {
        min-height: 0;
    }

    .haipick-body .haipick-work-area[b-nb59bj1vlt] {
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
    }
}


/* Replen-style active task banner */
.haipick-task-banner[b-nb59bj1vlt] {
    width: calc(100% - 20px);
    min-height: 70px;
    margin: 10px 10px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a5f;
    background: #eff6ff;
}

.haipick-task-icon[b-nb59bj1vlt] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 17px;
}

.haipick-task-copy[b-nb59bj1vlt] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.haipick-task-copy small[b-nb59bj1vlt] {
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.haipick-task-copy strong[b-nb59bj1vlt] {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.haipick-task-copy span[b-nb59bj1vlt] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-task-count[b-nb59bj1vlt] {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haipick-task-count strong[b-nb59bj1vlt] {
    color: #2563eb;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.haipick-task-count span[b-nb59bj1vlt] {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.haipick-waiting-badge[b-nb59bj1vlt] {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.haipick-waiting-badge i[b-nb59bj1vlt] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

.haipick-modal[b-nb59bj1vlt]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 24%);
}

.haipick-modal[b-nb59bj1vlt]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-nb59bj1vlt]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.haipick-modal[b-nb59bj1vlt]  .modal-body {
    padding: 18px;
    background: #f8fafc;
}

.haipick-modal[b-nb59bj1vlt]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-nb59bj1vlt]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 8px !important;
}

.haipick-modal[b-nb59bj1vlt]  .form-control,
.haipick-modal[b-nb59bj1vlt]  .select {
    min-height: 40px;
    border-color: #cfd9e7;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .haipick-task-banner[b-nb59bj1vlt] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .haipick-waiting-badge[b-nb59bj1vlt] {
        margin-left: 52px;
    }
}


/* PICK_CONFIRM_RETURN — aligned with the Replen workstation visual language */
.haipick-return-body[b-nb59bj1vlt] {
    padding: 14px !important;
    background: #f5f8fc;
}

.haipick-return-shell[b-nb59bj1vlt] {
    min-height: 0;
}

.haipick-return-layout[b-nb59bj1vlt] {
    gap: 14px;
    min-height: 0;
    padding-top: 12px;
}

.haipick-return-tote-panel[b-nb59bj1vlt],
.haipick-return-products[b-nb59bj1vlt] {
    min-width: 0;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 44, 83, .05);
}

.haipick-return-tote-panel[b-nb59bj1vlt] {
    flex: 0 0 31%;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-return-products[b-nb59bj1vlt] {
    flex: 1 1 69%;
}

.haipick-return-tote-content[b-nb59bj1vlt] {
    justify-content: flex-start !important;
    gap: 18px;
    padding-top: 6px;
}

.haipick-return-tote-heading[b-nb59bj1vlt] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-return-tote-heading > div[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-return-eyebrow[b-nb59bj1vlt],
.haipick-return-products-header span[b-nb59bj1vlt],
.haipick-setting-summary span[b-nb59bj1vlt] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-tote-heading strong[b-nb59bj1vlt] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-return-ready[b-nb59bj1vlt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-return-tote-stage[b-nb59bj1vlt] {
    width: 100%;
    min-height: 245px;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-return-tote-visual[b-nb59bj1vlt] {
    position: relative;
    width: min(240px, 78%);
    height: 160px;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgba(40, 101, 238, .15);
}

.haipick-return-tote-visual[b-nb59bj1vlt]::before,
.haipick-return-tote-visual[b-nb59bj1vlt]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
}

.haipick-return-tote-visual[b-nb59bj1vlt]::before { left: 12px; }
.haipick-return-tote-visual[b-nb59bj1vlt]::after { right: 12px; }

.haipick-return-products-header[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid #dde6f1;
    background: #fff;
}

.haipick-return-products-icon[b-nb59bj1vlt],
.haipick-setting-summary-icon[b-nb59bj1vlt] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #1765ed;
    background: #e4eeff;
    font-size: 18px;
}

.haipick-return-products-header > div:last-child[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
}

.haipick-return-products-header strong[b-nb59bj1vlt] {
    color: #12243d;
    font-size: 17px;
}

.haipick-return-products-body[b-nb59bj1vlt] {
    min-height: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    background: #fbfdff;
    overflow: auto;
}

.haipick-return-products-body .card[b-nb59bj1vlt] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.haipick-return-products-body .card-header[b-nb59bj1vlt] {
    border-radius: 10px 10px 0 0 !important;
}

.haipick-return-products-body table td[b-nb59bj1vlt],
.haipick-return-products-body table th[b-nb59bj1vlt] {
    border-color: #e7edf5 !important;
}

.haipick-return-footer[b-nb59bj1vlt] {
    padding: 12px 16px !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

.haipick-store-in-button[b-nb59bj1vlt] {
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 12px rgba(18, 163, 74, .18);
}

/* Station settings modal */
[b-nb59bj1vlt] .haipick-setting-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(8, 31, 61, .24);
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-title {
    color: #132a49;
    font-size: 18px;
    font-weight: 800;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-body {
    padding: 18px;
    background: #f5f8fc;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e0e7f0;
    background: #fff;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
}

.haipick-setting-summary[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #eef5ff;
}

.haipick-setting-summary > div:last-child[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-summary strong[b-nb59bj1vlt] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-setting-summary small[b-nb59bj1vlt],
.haipick-setting-section-title small[b-nb59bj1vlt] {
    color: #6c7d92;
    font-size: 11px;
}

.haipick-setting-section[b-nb59bj1vlt] {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.haipick-setting-section-title[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #1b5fd5;
}

.haipick-setting-section-title > div[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-section-title strong[b-nb59bj1vlt] {
    color: #1c2e47;
    font-size: 13px;
}

[b-nb59bj1vlt] .haipick-setting-section .form-group,
[b-nb59bj1vlt] .haipick-setting-section .row {
    margin-bottom: 0 !important;
}

[b-nb59bj1vlt] .haipick-setting-section label {
    color: #334861;
    font-weight: 700;
}

.haipick-zone-list[b-nb59bj1vlt] {
    max-height: 210px;
    overflow: auto;
    padding: 4px 6px;
}

[b-nb59bj1vlt] .haipick-zone-list .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 32px;
    margin: 4px 0;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-nb59bj1vlt] {
        flex-direction: column !important;
        overflow: auto;
    }

    .haipick-return-tote-panel[b-nb59bj1vlt],
    .haipick-return-products[b-nb59bj1vlt] {
        flex: 0 0 auto;
        width: 100%;
    }

    .haipick-return-tote-stage[b-nb59bj1vlt] {
        min-height: 210px;
    }
}


/* Return product list and primary action refinement */
.haipick-return-layout[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 365px;
    align-items: stretch;
}

.haipick-return-products[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 365px;
}

.haipick-return-products-body[b-nb59bj1vlt] {
    overflow: visible !important;
    align-items: stretch !important;
    padding: 14px !important;
}

.haipick-return-products-body > div[b-nb59bj1vlt],
.haipick-return-products-body > .card[b-nb59bj1vlt] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body .card-body[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
}

.haipick-return-products-body table[b-nb59bj1vlt] {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.haipick-return-products-body table tr[b-nb59bj1vlt] {
    min-height: 38px;
}

.haipick-return-products-body table th[b-nb59bj1vlt],
.haipick-return-products-body table td[b-nb59bj1vlt] {
    padding: 9px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e8eef6 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-return-products-body table th[b-nb59bj1vlt] {
    width: 110px;
    color: #60728a;
    font-size: 12px;
    font-weight: 700;
}

.haipick-return-products-body table td[b-nb59bj1vlt] {
    color: #172b46;
    font-size: 13px;
    font-weight: 600;
}

.haipick-product-qty[b-nb59bj1vlt] {
    min-height: 72px;
    margin-top: 12px !important;
    padding: 10px 16px;
    flex-direction: row !important;
    justify-content: space-between !important;
    border: 1px solid #bdeacb;
    border-radius: 9px;
    background: #effbf3;
}

.haipick-product-qty b[b-nb59bj1vlt] {
    color: #4b6255;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.haipick-product-qty .h1[b-nb59bj1vlt] {
    margin: 0 !important;
    color: #0ba64b !important;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.haipick-return-footer[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 16px !important;
}

.haipick-return-footer-copy[b-nb59bj1vlt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-return-footer-copy span[b-nb59bj1vlt] {
    color: #62748c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-footer-copy strong[b-nb59bj1vlt] {
    color: #1a2f4c;
    font-size: 12px;
    font-weight: 700;
}

.haipick-store-in-button[b-nb59bj1vlt] {
    width: 220px !important;
    min-width: 220px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(18, 163, 74, .22);
}

.haipick-store-in-button:hover:not(:disabled)[b-nb59bj1vlt] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 163, 74, .27);
}

@media (max-width: 680px) {
    .haipick-return-footer[b-nb59bj1vlt] {
        align-items: stretch;
        flex-direction: column;
    }

    .haipick-store-in-button[b-nb59bj1vlt] {
        width: 100% !important;
        min-width: 0;
    }
}


/* Let PICK_CONFIRM_RETURN cards size to content; scrolling belongs to the page only. */
.haipick-return-body[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-shell[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.haipick-return-layout[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 365px !important;
    overflow: visible !important;
}

.haipick-return-tote-panel[b-nb59bj1vlt],
.haipick-return-products[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 365px;
    max-height: none !important;
}

.haipick-return-tote-content[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body > .w-100[b-nb59bj1vlt],
.haipick-return-products-body > div[b-nb59bj1vlt] {
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body .haipick-product-qty[b-nb59bj1vlt] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-nb59bj1vlt],
    .haipick-return-tote-panel[b-nb59bj1vlt],
    .haipick-return-products[b-nb59bj1vlt] {
        min-height: 0 !important;
    }
}


/* Type1 product card must include the quantity summary in its intrinsic height. */
.haipick-return-product-card[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    overflow: visible !important;
}

.haipick-return-product-detail[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-return-product-detail > .w-100[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
}

.haipick-return-product-detail .haipick-product-qty[b-nb59bj1vlt] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}

.haipick-return-products[b-nb59bj1vlt] {
    overflow: visible !important;
}


/* Final containment for the Qty summary: the previous 365px row was too short. */
@media (min-width: 901px) {
    .haipick-return-layout[b-nb59bj1vlt] {
        min-height: 410px !important;
    }

    .haipick-return-tote-panel[b-nb59bj1vlt],
    .haipick-return-products[b-nb59bj1vlt] {
        min-height: 410px !important;
    }
}

.haipick-return-products[b-nb59bj1vlt] {
    box-sizing: border-box;
    overflow: hidden !important;
}

.haipick-return-products-body[b-nb59bj1vlt] {
    box-sizing: border-box;
    padding-bottom: 16px !important;
}

.haipick-return-product-card[b-nb59bj1vlt],
.haipick-return-product-detail[b-nb59bj1vlt] {
    width: 100%;
    box-sizing: border-box;
}

.haipick-return-product-detail[b-nb59bj1vlt] {
    display: block !important;
}

.haipick-return-product-detail > .w-100[b-nb59bj1vlt] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.haipick-product-qty[b-nb59bj1vlt] {
    position: static !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px;
    box-sizing: border-box;
}


/* Responsive return view: keep the primary action visible above the application footer. */
@media (max-width: 900px) {
    .haipick-return-body[b-nb59bj1vlt] {
        flex: 1 1 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .haipick-return-shell[b-nb59bj1vlt] {
        min-height: max-content !important;
        padding-bottom: 4px;
    }

    .haipick-return-layout[b-nb59bj1vlt] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        height: auto !important;
        min-height: max-content !important;
    }

    .haipick-return-tote-panel[b-nb59bj1vlt],
    .haipick-return-products[b-nb59bj1vlt] {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .haipick-return-products-body[b-nb59bj1vlt],
    .haipick-return-product-card[b-nb59bj1vlt],
    .haipick-return-product-detail[b-nb59bj1vlt] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .haipick-return-footer[b-nb59bj1vlt] {
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        border-top: 1px solid #d9e3ef !important;
        box-shadow: 0 -8px 20px rgba(15, 44, 83, .10);
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 680px) {
    .haipick-return-body[b-nb59bj1vlt] {
        padding: 10px !important;
        padding-bottom: 16px !important;
    }

    .haipick-return-tote-panel[b-nb59bj1vlt] {
        padding: 12px;
    }

    .haipick-return-tote-stage[b-nb59bj1vlt] {
        min-height: 190px;
    }

    .haipick-return-tote-visual[b-nb59bj1vlt] {
        width: min(220px, 76%);
        height: 140px;
    }

    .haipick-return-footer-copy[b-nb59bj1vlt] {
        display: none;
    }

    .haipick-return-footer[b-nb59bj1vlt] {
        padding: 10px 12px !important;
    }
}


/* Station number and picking type share the same header line. */
.haipick-title-line[b-nb59bj1vlt] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.haipick-title-line h2[b-nb59bj1vlt] {
    flex: 0 0 auto;
}

[b-nb59bj1vlt] .haipick-title-line > div {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
}

[b-nb59bj1vlt] .haipick-title-line .h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1;
}

[b-nb59bj1vlt] .haipick-title-line .badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin: 0 4px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: #ff443d !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(115, 17, 12, .18);
}

@media (max-width: 680px) {
    .haipick-title-line[b-nb59bj1vlt] {
        gap: 6px;
    }

    .haipick-title h2[b-nb59bj1vlt] {
        font-size: 19px;
    }

    [b-nb59bj1vlt] .haipick-title-line .badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* Replen-style workstation actions */
.haipick-store-in-button[b-nb59bj1vlt] {
    width: 190px !important;
    min-width: 190px;
    min-height: 42px;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 1px solid #0b9b49 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #12a84f !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1 !important;
    text-transform: uppercase;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-store-in-button:hover:not(:disabled)[b-nb59bj1vlt] {
    border-color: #087f3b !important;
    background: #0c9344 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18, 168, 79, .26);
}

.haipick-store-in-button:disabled[b-nb59bj1vlt] {
    border-color: #a8d9bc !important;
    background: #b9ddc7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 13px 16px !important;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn {
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1 !important;
    box-shadow: none;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-secondary,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-light {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-secondary:hover,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-light:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-primary,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-info,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-success {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20);
}

[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-primary:hover,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-info:hover,
[b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn-success:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    .haipick-store-in-button[b-nb59bj1vlt] {
        width: 100% !important;
        min-width: 0;
    }

    [b-nb59bj1vlt] .haipick-setting-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* BootstrapBlazor Button renders inside a child component: use ::deep from scoped wrappers. */
[b-nb59bj1vlt] .haipick-return-footer .haipick-store-in-button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #0b9847 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background-color: #12a84f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20) !important;
}

[b-nb59bj1vlt] .haipick-return-footer .haipick-store-in-button:hover:not(:disabled) {
    border-color: #087f3b !important;
    background-color: #0c9344 !important;
    transform: translateY(-1px);
}

.haipick-setting-actions[b-nb59bj1vlt] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

[b-nb59bj1vlt] .haipick-setting-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

[b-nb59bj1vlt] .haipick-setting-actions .btn-secondary {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
    box-shadow: none !important;
}

[b-nb59bj1vlt] .haipick-setting-actions .btn-secondary:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-nb59bj1vlt] .haipick-setting-actions .btn-primary {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20) !important;
}

[b-nb59bj1vlt] .haipick-setting-actions .btn-primary:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    [b-nb59bj1vlt] .haipick-return-footer .haipick-store-in-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .haipick-setting-actions[b-nb59bj1vlt] {
        gap: 8px;
    }

    [b-nb59bj1vlt] .haipick-setting-actions .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* Native setting actions — not affected by BootstrapBlazor Button internals. */
.haipick-setting-action[b-nb59bj1vlt] {
    min-width: 108px;
    height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-setting-action i[b-nb59bj1vlt] {
    font-size: 13px;
}

.haipick-setting-action-close[b-nb59bj1vlt] {
    border: 1px solid #cbd6e3;
    color: #344860;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 44, 83, .06);
}

.haipick-setting-action-close:hover[b-nb59bj1vlt] {
    border-color: #aebdce;
    color: #1f334c;
    background: #f4f7fa;
}

.haipick-setting-action-save[b-nb59bj1vlt] {
    border: 1px solid #1765ed;
    color: #fff;
    background: #2567e8;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .23);
}

.haipick-setting-action-save:hover[b-nb59bj1vlt] {
    border-color: #1555c8;
    background: #155bd5;
    box-shadow: 0 7px 16px rgba(37, 103, 232, .28);
    transform: translateY(-1px);
}

.haipick-setting-action:focus-visible[b-nb59bj1vlt] {
    outline: 3px solid rgba(37, 103, 232, .22);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .haipick-setting-action[b-nb59bj1vlt] {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* Account for the shared task banner in populated return states. */
@media (min-width: 901px) {
    .haipick-return-layout:has(.haipick-task-banner)[b-nb59bj1vlt] {
        min-height: 490px !important;
    }

    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-tote-panel[b-nb59bj1vlt],
    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-products[b-nb59bj1vlt] {
        min-height: 490px !important;
    }
}

.haipick-return-tote-panel > .haipick-task-banner[b-nb59bj1vlt] {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-content[b-nb59bj1vlt] {
    flex: 1 1 auto;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-stage[b-nb59bj1vlt] {
    min-height: 220px;
}


/* Replen-inspired product detail panel */
.haipick-return-products-header[b-nb59bj1vlt] {
    position: relative;
}

.haipick-return-product-ready[b-nb59bj1vlt] {
    margin-left: auto;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #08783e !important;
    background: #d9f8e8;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.haipick-replen-product[b-nb59bj1vlt] {
    width: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fff;
}

.haipick-replen-product-main[b-nb59bj1vlt] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.haipick-replen-product-image[b-nb59bj1vlt] {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5e1ee;
    border-radius: 10px;
    color: #c7d3e1;
    background: #f7faff;
    font-size: 36px;
}

.haipick-replen-product-image img[b-nb59bj1vlt] {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.haipick-replen-product-details[b-nb59bj1vlt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-replen-detail-row[b-nb59bj1vlt] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 82px minmax(0, .55fr);
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #e6edf5;
}

.haipick-replen-detail-row.single[b-nb59bj1vlt] {
    grid-template-columns: 92px minmax(0, 1fr);
}

.haipick-replen-detail-row span[b-nb59bj1vlt] {
    color: #65768c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.haipick-replen-detail-row strong[b-nb59bj1vlt] {
    min-width: 0;
    overflow: hidden;
    color: #25364d;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-replen-detail-row .haipick-company-value[b-nb59bj1vlt] {
    color: #ff3f36;
    font-size: 20px;
    font-weight: 800;
}

.haipick-replen-metrics[b-nb59bj1vlt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0 132px;
}

.haipick-replen-metric[b-nb59bj1vlt] {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dae4ef;
    border-radius: 10px;
    background: #f7f9fc;
}

.haipick-replen-metric span[b-nb59bj1vlt] {
    color: #65768c;
    font-size: 10px;
    font-weight: 650;
}

.haipick-replen-metric strong[b-nb59bj1vlt] {
    margin-top: 3px;
    color: #344860;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.haipick-replen-metric.is-primary[b-nb59bj1vlt] {
    border-color: #b9eccb;
    background: #effbf3;
}

.haipick-replen-metric.is-primary strong[b-nb59bj1vlt] {
    color: #0ba64b;
}

.haipick-replen-product-empty[b-nb59bj1vlt] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #75869a;
}

.haipick-replen-product-empty i[b-nb59bj1vlt] {
    color: #c7d3e1;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .haipick-replen-product-main[b-nb59bj1vlt] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .haipick-replen-product-image[b-nb59bj1vlt] {
        width: 88px;
        height: 96px;
    }

    .haipick-replen-metrics[b-nb59bj1vlt] {
        margin-left: 104px;
    }
}

@media (max-width: 680px) {
    .haipick-return-product-ready[b-nb59bj1vlt] {
        padding: 4px 7px;
    }

    .haipick-replen-product[b-nb59bj1vlt] {
        padding: 10px;
    }

    .haipick-replen-product-main[b-nb59bj1vlt] {
        grid-template-columns: 1fr;
    }

    .haipick-replen-product-image[b-nb59bj1vlt] {
        width: 100%;
        height: 120px;
    }

    .haipick-replen-detail-row[b-nb59bj1vlt],
    .haipick-replen-detail-row.single[b-nb59bj1vlt] {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .haipick-replen-detail-row:not(.single) span:nth-of-type(2)[b-nb59bj1vlt],
    .haipick-replen-detail-row:not(.single) strong:nth-of-type(2)[b-nb59bj1vlt] {
        margin-top: 6px;
    }

    .haipick-replen-metrics[b-nb59bj1vlt] {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}


/* PICK state — isolated responsive layout */
.haipick-pick-body[b-nb59bj1vlt] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc;
}

.haipick-pick-shell[b-nb59bj1vlt] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-layout[b-nb59bj1vlt] {
    width: 100%;
    height: auto !important;
    min-height: 360px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt],
.haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 360px;
    flex: none !important;
    overflow: hidden;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 44 83 / 5%);
}

.haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nb59bj1vlt],
.haipick-pick-body .haipick-pick-product > .w-100.h-100[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nb59bj1vlt] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    padding: 16px !important;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf4;
}

.haipick-pick-body .haipick-pick-product table[b-nb59bj1vlt] {
    width: 100%;
    min-width: 520px;
    margin: 0;
    table-layout: fixed;
}

.haipick-pick-body .haipick-pick-product table td[b-nb59bj1vlt] {
    padding: 9px 10px !important;
    vertical-align: middle;
    border-color: #e7edf5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product table td.text-end[b-nb59bj1vlt] {
    width: 105px !important;
    color: #5d718b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nb59bj1vlt] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    padding: 12px 16px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nb59bj1vlt] {
    min-width: 0;
    min-height: 76px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
    text-align: center;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-nb59bj1vlt] {
    margin: 4px 0 0 !important;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.haipick-pick-body .input-group[b-nb59bj1vlt],
.haipick-pick-body[b-nb59bj1vlt]  .input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

.haipick-pick-body .form-control[b-nb59bj1vlt],
.haipick-pick-body[b-nb59bj1vlt]  .form-control {
    min-width: 0;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-pick-body[b-nb59bj1vlt] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-layout[b-nb59bj1vlt] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt],
    .haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt] {
        padding: 12px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nb59bj1vlt] {
        min-height: 220px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nb59bj1vlt] {
        flex-direction: column;
        padding: 12px !important;
        overflow: visible;
    }

    .haipick-pick-body .haipick-pick-product table[b-nb59bj1vlt] {
        min-width: 0;
        table-layout: auto;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-task-banner[b-nb59bj1vlt] {
        margin-bottom: 10px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nb59bj1vlt] {
        min-height: 190px !important;
    }

    .haipick-pick-body .haipick-pick-product table[b-nb59bj1vlt],
    .haipick-pick-body .haipick-pick-product tbody[b-nb59bj1vlt],
    .haipick-pick-body .haipick-pick-product tr[b-nb59bj1vlt] {
        width: 100%;
    }

    .haipick-pick-body .haipick-pick-product table td[b-nb59bj1vlt] {
        padding: 7px 6px !important;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product table td.text-end[b-nb59bj1vlt] {
        width: 88px !important;
        font-size: 9px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nb59bj1vlt] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        padding: 10px !important;
        gap: 7px;
        overflow-x: auto;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nb59bj1vlt] {
        min-height: 70px;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-nb59bj1vlt] {
        font-size: 22px;
    }

    .haipick-pick-body[b-nb59bj1vlt]  .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* PICK Tote — Replen visual style and width correction */
.haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-nb59bj1vlt] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-tote > .w-100.h-100[b-nb59bj1vlt] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 18px;
    padding: 0 !important;
}

.haipick-pick-tote-heading[b-nb59bj1vlt] {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-pick-tote-heading > div[b-nb59bj1vlt] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-pick-tote-eyebrow[b-nb59bj1vlt] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-pick-tote-heading strong[b-nb59bj1vlt] {
    overflow: hidden;
    color: #102a4c;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-pick-tote-ready[b-nb59bj1vlt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-pick-tote-stage[b-nb59bj1vlt] {
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-pick-tote-visual[b-nb59bj1vlt] {
    position: relative;
    width: min(240px, 78%) !important;
    height: 160px !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgb(40 101 238 / 15%);
}

.haipick-pick-tote-visual[b-nb59bj1vlt]::before,
.haipick-pick-tote-visual[b-nb59bj1vlt]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
    pointer-events: none;
}

.haipick-pick-tote-visual[b-nb59bj1vlt]::before {
    left: 12px;
}

.haipick-pick-tote-visual[b-nb59bj1vlt]::after {
    right: 12px;
}

.haipick-pick-tote-visual > *[b-nb59bj1vlt] {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-nb59bj1vlt] {
        width: 100% !important;
        padding: 12px;
    }

    .haipick-pick-tote-stage[b-nb59bj1vlt] {
        min-height: 210px;
    }

    .haipick-pick-tote-visual[b-nb59bj1vlt] {
        width: min(230px, 76%) !important;
        height: 145px !important;
    }
}

@media (max-width: 480px) {
    .haipick-pick-tote-heading[b-nb59bj1vlt] {
        min-height: 64px;
        padding: 11px 12px;
    }

    .haipick-pick-tote-heading strong[b-nb59bj1vlt] {
        font-size: 16px;
    }

    .haipick-pick-tote-stage[b-nb59bj1vlt] {
        min-height: 185px;
    }

    .haipick-pick-tote-visual[b-nb59bj1vlt] {
        width: min(210px, 78%) !important;
        height: 132px !important;
    }
}


/* PICK layout refinement — compact Tote and structured picking workspace */
.haipick-pick-body .haipick-pick-layout[b-nb59bj1vlt] {
    grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
    align-items: start !important;
}

.haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
}

.haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nb59bj1vlt] {
    min-height: 238px !important;
    padding: 14px 18px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2:empty[b-nb59bj1vlt] {
    display: none;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2[b-nb59bj1vlt] {
    flex: 0 0 auto;
    padding: 8px 14px 8px 0 !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .w-100[b-nb59bj1vlt] {
    padding: 0 !important;
}

.haipick-pick-body .haipick-pick-product table td[b-nb59bj1vlt] {
    height: 36px;
    padding: 7px 10px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nb59bj1vlt] {
    padding: 0 8px 12px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-nb59bj1vlt] {
    padding: 12px !important;
    border: 1px solid #cfe0f6 !important;
    border-radius: 10px !important;
    background: #f8fbff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .mb-2[b-nb59bj1vlt] {
    margin-bottom: 8px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 [style*="max-height:160px"][b-nb59bj1vlt] {
    max-height: 116px !important;
    padding: 7px 10px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control[b-nb59bj1vlt] {
    height: 40px;
    border-radius: 7px 0 0 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control.me-2[b-nb59bj1vlt] {
    margin-right: 8px !important;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nb59bj1vlt]  .btn {
    min-width: 72px;
    height: 40px;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nb59bj1vlt] {
    margin-top: 0;
    padding: 0 12px 14px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nb59bj1vlt] {
    min-height: 68px;
    background: #f7f9fc;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card:first-child[b-nb59bj1vlt] {
    border-color: #ffd6d6 !important;
    background: #fff8f8;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt] {
    margin-top: 0;
}

@media (min-width: 901px) {
    .haipick-pick-tote-stage[b-nb59bj1vlt] {
        min-height: 245px;
    }

    .haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt] {
        min-height: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .haipick-pick-body .haipick-pick-layout[b-nb59bj1vlt] {
        grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    }

    .haipick-pick-body .haipick-pick-product table td[b-nb59bj1vlt] {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout[b-nb59bj1vlt] {
        align-items: stretch !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-nb59bj1vlt],
    .haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
        align-self: stretch;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nb59bj1vlt] {
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nb59bj1vlt] {
        padding: 0 0 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-nb59bj1vlt] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nb59bj1vlt] {
        padding: 0 0 10px !important;
    }
}


/* PICK Put-to-Light containment */
.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-layout > .w-100,
.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-module-column {
    min-width: 0 !important;
    max-width: 100%;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-section-title {
    min-height: 32px;
    padding: 5px 9px;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-row {
    width: 100%;
    min-width: 0;
    height: 76px !important;
    min-height: 76px;
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-row > .w-100 {
    min-width: 0;
    max-width: calc(100% - 46px);
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-row-number {
    width: 42px;
    min-width: 42px;
    height: 76px !important;
    flex: 0 0 42px;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-slot {
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-slot h2 {
    margin: 0;
    font-size: 21px;
}

.haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-slot .mt-2 {
    margin-top: 1px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nb59bj1vlt] {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px;
    flex: 0 0 86px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nb59bj1vlt] {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px;
    flex: 1 1 0 !important;
}

@media (max-width: 900px) {
    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-dashboard {
        min-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-dashboard {
        min-width: 0 !important;
    }

    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-row {
        height: auto !important;
        min-height: 0;
    }

    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-row > .w-100 {
        max-width: none;
    }

    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt]  .ptl-slot {
        height: 76px !important;
    }
}


/* PICK product workspace — side-by-side information and operations */
@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        gap: 0;
    }

    .haipick-pick-product-info[b-nb59bj1vlt] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px 18px !important;
        border-right: 1px solid #e4ebf4;
        border-bottom: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .haipick-pick-scan[b-nb59bj1vlt] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding: 12px 12px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-nb59bj1vlt] {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        margin: 0;
        padding: 0 12px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-nb59bj1vlt] {
        width: 100% !important;
        min-width: 0;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px;
        margin: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box;
        font-size: 11px;
        text-align: center;
    }

    .haipick-pick-quantities > .card .h1[b-nb59bj1vlt] {
        margin: 3px 0 0 !important;
        font-size: 23px;
        line-height: 1;
    }

    .haipick-pick-shell > .w-100:last-child[b-nb59bj1vlt] {
        margin-top: -2px;
    }
}

.haipick-pick-product-info table[b-nb59bj1vlt] {
    width: 100%;
    margin: 0;
}

/* จำกัดความสูงรายการเพื่อให้ช่องสแกนยังอยู่ในมุมมองเมื่อมีหลาย serial */
.haipick-pick-scan .haipick-serial-list[b-nb59bj1vlt] {
    max-height: 160px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 4px 6px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-serial-row[b-nb59bj1vlt] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    line-height: 20px;
    border-bottom: 1px solid #edf1f7;
}

.haipick-serial-row:last-child[b-nb59bj1vlt] {
    border-bottom: 0;
}

.haipick-serial-row > span:last-child[b-nb59bj1vlt] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table[b-nb59bj1vlt] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-nb59bj1vlt] {
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-nb59bj1vlt] {
    font-size: 13px;
}

.haipick-pick-body .haipick-pick-scan[b-nb59bj1vlt] {
    font-size: 15px;
    line-height: 1.5;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-nb59bj1vlt],
.haipick-pick-body .haipick-pick-scan[b-nb59bj1vlt]  .btn {
    font-size: 15px;
}

.haipick-pick-body .haipick-pick-quantities > .card[b-nb59bj1vlt] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-pick-body .haipick-pick-quantities > .card .h1[b-nb59bj1vlt] {
    font-size: 28px;
}

.haipick-pick-product-info table td[b-nb59bj1vlt] {
    height: 35px;
    padding: 6px 9px !important;
}

.haipick-pick-scan > .card[b-nb59bj1vlt] {
    margin: 0;
}

@media (max-width: 1100px) {
    .haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
        display: flex !important;
        flex-direction: column !important;
    }

    .haipick-pick-product-info[b-nb59bj1vlt] {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        border-bottom: 1px solid #e4ebf4;
        box-sizing: border-box;
    }

    .haipick-pick-scan[b-nb59bj1vlt] {
        width: 100%;
        padding: 10px 10px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-nb59bj1vlt] {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-nb59bj1vlt] {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-quantities[b-nb59bj1vlt] {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .haipick-pick-quantities > .card[b-nb59bj1vlt] {
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .haipick-switch-button[b-nb59bj1vlt] {
        width: 38px;
        padding: 0;
    }

    .haipick-switch-button span[b-nb59bj1vlt] {
        display: none;
    }
}

/* ใช้สีและกรอบมาตรฐานของระบบในส่วนข้อมูลและการสแกน */
.haipick-pick-body .haipick-pick-product-info[b-nb59bj1vlt] {
    padding: 12px !important;
}

.haipick-pick-product-info > .w-100[b-nb59bj1vlt] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-nb59bj1vlt] {
    padding: 8px !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-nb59bj1vlt] {
    width: 95px !important;
    text-transform: none;
    color: var(--bs-secondary);
    font-weight: 600;
}

.haipick-pick-body .haipick-pick-product-info table tr:last-child td[b-nb59bj1vlt] {
    border-bottom: 0;
}

.haipick-pick-body .haipick-pick-scan > .card[b-nb59bj1vlt],
.haipick-pick-body .haipick-pick-quantities > .card[b-nb59bj1vlt] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background: var(--bs-body-bg);
    box-shadow: none;
}

.haipick-pick-body .haipick-pick-scan > .card[b-nb59bj1vlt] {
    padding: 12px !important;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-nb59bj1vlt],
.haipick-pick-body .haipick-pick-scan[b-nb59bj1vlt]  .btn {
    border-radius: var(--bs-border-radius) !important;
}

.haipick-pick-scan .haipick-serial-list[b-nb59bj1vlt] {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

@media (max-width: 560px) {
    .haipick-pick-product-info[b-nb59bj1vlt] {
        flex-direction: column;
    }
}

/* ใช้หัวการ์ดและกรอบรูปแบบเดียวกับ Product List ในขั้นตอนส่งคืน */
.haipick-pick-products-header[b-nb59bj1vlt] {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product-info[b-nb59bj1vlt] {
    gap: 12px;
    align-items: flex-start;
    background: #fff;
}

.haipick-pick-product-info > .haipick-replen-product-image[b-nb59bj1vlt] {
    flex: 0 0 90px;
    width: 90px;
    height: 100px;
    margin-top: 8px;
}

.haipick-pick-product-info > .w-100[b-nb59bj1vlt] {
    flex: 1 1 0;
    padding: 0 !important;
    margin: 0;
}

.haipick-return-shell[b-nb59bj1vlt] {
    gap: 14px;
}

.haipick-return-ptl[b-nb59bj1vlt] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-nb59bj1vlt] {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-rows: auto auto auto;
    }

    .haipick-pick-products-header[b-nb59bj1vlt] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .haipick-pick-product-info[b-nb59bj1vlt] {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .haipick-pick-scan[b-nb59bj1vlt] {
        grid-column: 2;
        grid-row: 2;
    }

    .haipick-pick-quantities[b-nb59bj1vlt] {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .haipick-pick-product-info > .haipick-replen-product-image[b-nb59bj1vlt] {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }
}

/* โครงสร้าง PICK แยกจากรูปแบบเดิม ให้การ์ดสูงตามเนื้อหาและสแกนต่อจากข้อมูล */
.haipick-workstation:has(.haipick-compact) > .haipick-header[b-nb59bj1vlt] {
    min-height: 76px;
    padding: 14px 20px !important;
    background: linear-gradient(115deg, #1559ae, #2878cf);
}

.haipick-workstation:has(.haipick-compact) .haipick-title h2[b-nb59bj1vlt] { font-size: 28px; }
.haipick-workstation:has(.haipick-compact) .haipick-title > span[b-nb59bj1vlt] { font-size: 10px; }
.haipick-workstation:has(.haipick-compact) .haipick-title[b-nb59bj1vlt]  .badge {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
}

.haipick-body.haipick-compact[b-nb59bj1vlt] {
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    overflow: auto;
    background: #f2f7fc;
    color: #142d55;
}

.haipick-workspace[b-nb59bj1vlt] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.haipick-columns[b-nb59bj1vlt] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.haipick-sidebar[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.haipick-tote-card[b-nb59bj1vlt],
.haipick-item-card[b-nb59bj1vlt] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-tote-card[b-nb59bj1vlt] {
    padding: 12px;
}

.haipick-section-heading[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.haipick-section-icon[b-nb59bj1vlt] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2165ed;
    font-size: 19px;
}

.haipick-compact .haipick-task-banner[b-nb59bj1vlt] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-compact .haipick-task-icon[b-nb59bj1vlt] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

.haipick-compact .haipick-task-copy[b-nb59bj1vlt] {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 5px;
}

.haipick-compact .haipick-task-copy small[b-nb59bj1vlt] {
    color: #142d55;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
}

.haipick-compact .haipick-task-copy strong[b-nb59bj1vlt] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-compact .haipick-task-copy > span[b-nb59bj1vlt] {
    font-size: 11px;
}

.haipick-compact .haipick-waiting-badge[b-nb59bj1vlt] {
    grid-column: 3;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0;
}

.haipick-compact .haipick-task-count[b-nb59bj1vlt] {
    grid-column: 3;
    grid-row: 2;
    gap: 3px;
    border-left: 1px solid #e5edf8;
}

.haipick-compact .haipick-task-count strong[b-nb59bj1vlt] { font-size: 24px; }
.haipick-compact .haipick-task-count span[b-nb59bj1vlt] { font-size: 9px; }

.haipick-compact .haipick-pick-tote-heading[b-nb59bj1vlt] {
    min-height: 0;
    padding: 0 2px 12px 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.haipick-compact .haipick-pick-tote-eyebrow[b-nb59bj1vlt] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.haipick-compact .haipick-pick-tote-heading strong[b-nb59bj1vlt] { font-size: 22px; }
.haipick-compact .haipick-pick-tote-ready[b-nb59bj1vlt] { font-size: 12px; }
.haipick-compact .haipick-pick-tote-heading > div[b-nb59bj1vlt] { line-height: 1.3; }

/* ลดเฉพาะพื้นรอบภาพ โดยคงขนาด ภาพ และการแบ่งช่อง Tote เดิม */
.haipick-compact .haipick-pick-tote-stage[b-nb59bj1vlt] {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    border: 1px solid #e4edf8;
    background: #f5f9ff;
}

/* วาด Type และตำแหน่ง Partition จาก master data เช่นเดียวกับ Replenishment */
.haipick-source-tote[b-nb59bj1vlt] {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 7px;
    border-radius: 9px 9px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.haipick-source-tote-layout[b-nb59bj1vlt] {
    position: relative;
    width: 100%;
    height: 100%;
}

.haipick-source-partition[b-nb59bj1vlt] {
    position: absolute;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c6daf8;
    color: #17386d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.haipick-source-partition-name[b-nb59bj1vlt] {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.haipick-source-parts[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.haipick-source-whole[b-nb59bj1vlt] { gap: 6px; padding: 6px; }
.haipick-source-whole img[b-nb59bj1vlt] { max-height: 55px; }

.haipick-source-tote img[b-nb59bj1vlt] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-source-partition.bg-primary[b-nb59bj1vlt] { background-color: #2563eb !important; }

.haipick-compact .haipick-pick-products-header[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5edf6;
    background: #fff;
}

.haipick-compact .haipick-pick-products-header strong[b-nb59bj1vlt] {
    color: #142d55;
    font-size: 17px;
    line-height: 1.4;
}

.haipick-compact .haipick-return-products-icon[b-nb59bj1vlt] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.haipick-item-content[b-nb59bj1vlt] {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    min-width: 0;
}

.haipick-item-info[b-nb59bj1vlt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
}

.haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] {
    flex: 0 0 82px;
    width: 82px;
    height: 130px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #f3f7fc;
}

.haipick-item-info > .haipick-replen-product-image img[b-nb59bj1vlt] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-item-info > .w-100[b-nb59bj1vlt] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

.haipick-item-info table[b-nb59bj1vlt] {
    width: 100%;
    height: auto;
    margin: 0;
    table-layout: auto;
}

.haipick-item-info table td[b-nb59bj1vlt] {
    height: auto;
    padding: 9px 5px;
    border-bottom: 1px solid #e7edf6;
    color: #4d5d76;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.haipick-item-info table td.text-end[b-nb59bj1vlt] {
    width: 1% !important;
    white-space: nowrap;
    text-align: left !important;
    color: #566e92;
    font-size: 11px;
    font-weight: 700;
}

.haipick-item-info table tr:last-child td[b-nb59bj1vlt] { border-bottom: 0; }

.haipick-operations[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #e5edf6;
}

.haipick-scan-panel[b-nb59bj1vlt] { min-width: 0; }

.haipick-scan-panel > .card[b-nb59bj1vlt] {
    min-height: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f1f7ff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
}

.haipick-scan-panel > .card > .mb-2[b-nb59bj1vlt] { margin-bottom: 10px !important; }
.haipick-scan-panel > .card > .d-flex[b-nb59bj1vlt] { min-width: 0; }

.haipick-scan-heading[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #132f65;
    font-size: 13px;
}

.haipick-scan-heading[b-nb59bj1vlt]::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 5px;
    border-radius: 7px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e63f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m8 0h5v-5M6 12h12M9 7h6M9 17h6'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.haipick-scan-title[b-nb59bj1vlt] { color: #132f65; font-weight: 700; }
.haipick-scan-heading > .text-muted[b-nb59bj1vlt] { color: #536a94 !important; }
.haipick-scan-heading.justify-content-between[b-nb59bj1vlt] { justify-content: flex-start !important; }
.haipick-scan-heading > .badge[b-nb59bj1vlt] { margin-left: auto; }
.haipick-scan-entry[b-nb59bj1vlt] { position: relative; }

/* ไอคอนเป็นของตกแต่ง ไม่รับคลิกและไม่รบกวนการสแกน */
.haipick-scan-entry[b-nb59bj1vlt]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 21px;
    width: 19px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #8e9bb0 0 1px, transparent 1px 3px, #8e9bb0 3px 5px, transparent 5px 6px);
}

.haipick-scan-panel .form-control[b-nb59bj1vlt] {
    min-width: 0;
    height: 42px;
    padding-left: 39px;
    border-radius: 8px !important;
    background: #fff;
    font-size: 14px;
    border-color: #709aff !important;
}

.haipick-scan-panel[b-nb59bj1vlt]  .haipick-scan-button {
    flex: 0 0 auto;
    min-width: 70px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #1958ed !important;
    background: #1958f5 !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

.haipick-scan-panel[b-nb59bj1vlt]  .haipick-scan-button:not(:disabled):hover {
    border-color: #1048cd !important;
    background: #1048db !important;
}

.haipick-scan-panel[b-nb59bj1vlt]  .haipick-scan-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.haipick-scan-panel .text-danger:empty[b-nb59bj1vlt] { display: none; }

.haipick-quantity-grid[b-nb59bj1vlt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.haipick-quantity-grid:has(> :nth-child(3))[b-nb59bj1vlt] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haipick-quantity-grid > .card[b-nb59bj1vlt] {
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 8px;
    border: 1px solid #e3edf9;
    border-radius: 11px !important;
    background: #f9fbff;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none !important;
}

.haipick-quantity-grid .h1[b-nb59bj1vlt] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.haipick-quantity-label[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    gap: 8px;
}

.haipick-quantity-label i[b-nb59bj1vlt] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: #2165ed;
    background: #e8f1ff;
    font-size: 15px;
}

.haipick-quantity-grid .h1.text-primary[b-nb59bj1vlt] { color: #0961dc !important; }

.haipick-lights[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
}

.haipick-lights-header[b-nb59bj1vlt] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5edf6;
}

.haipick-lights-header h3[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #1458e6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}

.haipick-lights-icon[b-nb59bj1vlt] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c60ed' d='M12 2a7 7 0 0 0-4.7 12.2c.9.8 1.2 1.5 1.2 2.8h7c0-1.3.3-2 1.2-2.8A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 19h6m-5 2h4' fill='none' stroke='%231c60ed' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 8c.4-1.7 1.5-2.5 3-2.6' fill='none' stroke='%237eabff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
}

.haipick-lights-legend[b-nb59bj1vlt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #657da3;
    font-size: 10px;
    line-height: 1.4;
}

.haipick-lights-legend li[b-nb59bj1vlt] { display: flex; align-items: center; gap: 8px; }
.haipick-legend-swatch[b-nb59bj1vlt] { width: 25px; height: 20px; border-radius: 6px; }
.haipick-legend-swatch.is-active[b-nb59bj1vlt] { border: 1px solid #77d4ff; background: linear-gradient(135deg, #c7edff, #b5e4fa); }
.haipick-legend-swatch.is-occupied[b-nb59bj1vlt] { border: 1px solid #e3ebf5; background: #eaf0f7; }
.haipick-legend-swatch.is-empty[b-nb59bj1vlt] { border: 1px solid #e2eaf5; background: #fff; }

.haipick-lights[b-nb59bj1vlt]  .ptl-dashboard,
.haipick-lights[b-nb59bj1vlt]  .ptl-layout {
    flex: 1 0 auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-dashboard {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-layout { margin: 0; }
.haipick-lights[b-nb59bj1vlt]  .ptl-layout > .w-100 { gap: 7px; }

/* กระจายพื้นที่ว่างให้แถว P2L เท่ากัน โดยไม่ยืดส่วนข้อมูลด้านบน */
.haipick-lights[b-nb59bj1vlt]  .ptl-layout > .w-100,
.haipick-lights[b-nb59bj1vlt]  .ptl-module-column {
    flex: 1 0 auto;
    align-self: stretch;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-section-title {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 3px;
    padding: 0 0 10px;
    gap: 10px;
    border-bottom: 1px solid #e5edf6;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-section-title::before,
.haipick-lights[b-nb59bj1vlt]  .ptl-section-title::after { display: none; }

/* ใช้หัวข้อพร้อม Legend ของหน้า PICK โดยคงหัวข้อ Pallet เมื่อสถานีมีช่องแบบนั้น */
.haipick-lights[b-nb59bj1vlt]  .ptl-section-title:has(.fa-lightbulb) { display: none; }

.haipick-lights[b-nb59bj1vlt]  .ptl-row {
    flex: 1 0 76px;
    height: 76px;
    min-height: 0;
    gap: 8px;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-row > .w-100 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-row-number {
    width: 48px;
    flex-basis: 48px;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-row-number h2 {
    transform: none;
    font-size: 24px;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgb(32 68 112 / 4%);
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot > .d-flex:first-child {
    min-height: 17px;
    font-size: 11px;
    font-weight: 750;
    color: #142d55;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot > .d-flex:first-child > .justify-content-end {
    position: absolute;
    top: 7px;
    right: 8px;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot h2,
.haipick-lights[b-nb59bj1vlt]  .ptl-slot h2.text-danger { font-size: 25px; line-height: 1; }
.haipick-lights[b-nb59bj1vlt]  .ptl-slot .mt-2 { margin-top: 2px !important; font-size: 12px; font-weight: 500; line-height: 1.2; }
.haipick-lights[b-nb59bj1vlt]  .ptl-slot .text-center > span { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* เปลี่ยนเฉพาะสีแสดงผลของสถานะเดิม ไม่เพิ่มหรือเปลี่ยนเงื่อนไขสถานะ */
.haipick-compact .haipick-lights[b-nb59bj1vlt]  .ptl-slot.bg-primary {
    background: linear-gradient(135deg, #c7edff, #b5e4fa) !important;
    border-color: #63ceff !important;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot.bg-secondary,
.haipick-lights[b-nb59bj1vlt]  .ptl-slot.bg-dark {
    background: #eaf0f7 !important;
    border-color: #dde7f2 !important;
    color: #142d55 !important;
}

.haipick-lights[b-nb59bj1vlt]  .ptl-slot .btn.text-danger {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0 !important;
    border: 1px solid #c6e4f4 !important;
    border-radius: 6px !important;
    background: #e5f5ff !important;
    box-shadow: 0 3px 7px rgb(32 68 112 / 13%);
    font-size: 13px;
}

@media (max-width: 1199px) and (min-width: 901px) {
    .haipick-item-content[b-nb59bj1vlt] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-nb59bj1vlt] { border-left: 0; border-top: 1px solid #e5edf6; }
}

@media (max-width: 900px) {
    .haipick-columns[b-nb59bj1vlt] { grid-template-columns: minmax(0, 1fr); }
    .haipick-sidebar[b-nb59bj1vlt] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .haipick-compact[b-nb59bj1vlt] { padding: 10px !important; }
    .haipick-sidebar[b-nb59bj1vlt],
    .haipick-item-content[b-nb59bj1vlt] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-nb59bj1vlt] { border-left: 0; border-top: 1px solid #e5edf6; }
    .haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] { flex-basis: 60px; width: 60px; height: 90px; }
    .haipick-lights[b-nb59bj1vlt] { overflow-x: auto; }
    .haipick-lights[b-nb59bj1vlt]  .ptl-dashboard { min-width: 540px; }
}

/* ทุก step ใช้กรอบจอเดียวกัน แบ่งพื้นที่บน/ล่างแทนความสูงคงที่ของแต่ละสถานะ */
.haipick-page.haipick-fit[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: clamp(8px, 1.1vh, 14px);
}

.haipick-fit .haipick-workstation[b-nb59bj1vlt] {
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0;
}

.haipick-fit .haipick-header[b-nb59bj1vlt],
.haipick-fit .card-footer[b-nb59bj1vlt] {
    flex: 0 0 auto;
}

.haipick-fit .haipick-workstation > .haipick-header[b-nb59bj1vlt] {
    min-height: 58px;
    padding: 10px 16px !important;
}

.haipick-fit .haipick-step-body[b-nb59bj1vlt] {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(8px, 1vh, 12px) !important;
}

.haipick-fit .haipick-step-body > .haipick-step-frame[b-nb59bj1vlt] {
    display: grid !important;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.haipick-fit .haipick-step-body.is-cycle-count > .haipick-step-frame[b-nb59bj1vlt] {
    grid-template-rows: minmax(0, 1fr);
}

.haipick-fit .haipick-step-body .haipick-step-frame > .haipick-step-top[b-nb59bj1vlt] {
    display: grid !important;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    flex: none !important;
    gap: 12px;
    overflow: hidden;
}

.haipick-fit .haipick-step-body .haipick-step-top > *[b-nb59bj1vlt],
.haipick-fit .haipick-sidebar > *[b-nb59bj1vlt],
.haipick-fit .haipick-item-content > *[b-nb59bj1vlt] {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
}

.haipick-fit .haipick-step-top > .haipick-work-panel[b-nb59bj1vlt],
.haipick-fit .haipick-return-tote-panel[b-nb59bj1vlt],
.haipick-fit .haipick-return-products[b-nb59bj1vlt] {
    height: 100% !important;
    overflow: auto;
}

.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:first-child[b-nb59bj1vlt],
.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:nth-child(2)[b-nb59bj1vlt] {
    width: 100% !important;
    flex: none !important;
}

.haipick-fit .is-standby .haipick-step-top > .haipick-work-panel[b-nb59bj1vlt] {
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

.haipick-fit .haipick-empty-state[b-nb59bj1vlt] {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: clamp(10px, 2vh, 24px);
    align-self: center;
}

.haipick-fit .haipick-sidebar[b-nb59bj1vlt] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-sidebar > .haipick-task-banner[b-nb59bj1vlt] { flex: 0 0 auto; }
.haipick-fit .haipick-tote-card[b-nb59bj1vlt] { display: flex; flex-direction: column; flex: 1 1 0; }
.haipick-fit .haipick-tote-card > .haipick-section-heading[b-nb59bj1vlt],
.haipick-fit .haipick-tote-card > .haipick-pick-tote-heading[b-nb59bj1vlt] { flex: 0 0 auto; }
.haipick-fit .haipick-pick-tote-stage[b-nb59bj1vlt] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-source-tote[b-nb59bj1vlt] { max-height: 100%; }
.haipick-fit .haipick-item-card[b-nb59bj1vlt] { display: flex; flex-direction: column; }
.haipick-fit .haipick-pick-products-header[b-nb59bj1vlt] { flex: 0 0 auto; }
.haipick-fit .haipick-item-content[b-nb59bj1vlt] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-item-info[b-nb59bj1vlt] { height: 100%; overflow: auto; }
.haipick-fit .haipick-operations[b-nb59bj1vlt] { height: 100%; overflow: auto; }
.haipick-fit .haipick-serial-list[b-nb59bj1vlt] { min-height: 0; max-height: 100px; overflow: auto; }
.haipick-fit .haipick-return-tote-stage[b-nb59bj1vlt] { min-height: 0 !important; height: auto !important; overflow: hidden; }

.haipick-fit .haipick-step-frame > .haipick-step-lights[b-nb59bj1vlt] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-dashboard,
.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-layout > .w-100,
.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-module-column {
    min-height: 0 !important;
    flex: 1 1 0;
    align-self: stretch;
}

.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-row {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
}

.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
}

.haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot > .h-100 {
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    justify-content: center !important;
}

/* จอเตี้ยลดเฉพาะระยะและองค์ประกอบตกแต่ง เพื่อคงปุ่มและข้อมูลที่ใช้ทำงาน */
@media (max-height: 820px) {
    .haipick-fit .haipick-workstation > .haipick-header[b-nb59bj1vlt] { min-height: 52px; padding: 7px 12px !important; }
    .haipick-fit .haipick-title h2[b-nb59bj1vlt] { font-size: 23px; }
    .haipick-fit .haipick-task-banner[b-nb59bj1vlt] { padding: 8px; gap: 3px 8px; }
    .haipick-fit .haipick-task-copy > span[b-nb59bj1vlt] { display: none; }
    .haipick-fit .haipick-section-heading[b-nb59bj1vlt] { margin-bottom: 3px; }
    .haipick-fit .haipick-pick-tote-heading[b-nb59bj1vlt] { padding-bottom: 6px; }
    .haipick-fit .haipick-tote-card[b-nb59bj1vlt] { padding: 8px; }
    .haipick-fit .haipick-source-partition[b-nb59bj1vlt] { padding: 3px; gap: 2px; }
    .haipick-fit .haipick-source-partition-name[b-nb59bj1vlt] { font-size: 11px; line-height: 1.1; }
    .haipick-fit .haipick-source-parts[b-nb59bj1vlt] { font-size: 10px; gap: 2px; line-height: 1.2; }
    .haipick-fit .haipick-item-info[b-nb59bj1vlt] { padding: 8px; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] { width: 54px; flex-basis: 54px; height: 70px; }
    .haipick-fit .haipick-item-info table td[b-nb59bj1vlt] { padding: 5px; }
    .haipick-fit .haipick-operations[b-nb59bj1vlt] { padding: 8px; gap: 8px; }
    .haipick-fit .haipick-scan-panel > .card[b-nb59bj1vlt] { padding: 8px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-nb59bj1vlt] { padding: 6px 8px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-nb59bj1vlt] { font-size: 28px; }
    .haipick-fit .haipick-lights-header[b-nb59bj1vlt] { padding: 6px 10px; }
    .haipick-fit .haipick-lights-icon[b-nb59bj1vlt] { width: 26px; height: 26px; flex-basis: 26px; background-size: 22px; }
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-dashboard { padding: 6px 8px; }
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot { padding: 4px 7px; }
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot > .d-flex:first-child { min-height: 12px; font-size: 10px; }
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot h2,
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot h2.text-danger { font-size: 18px; line-height: 1; }
    .haipick-fit .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot .mt-2 { font-size: 10px; margin-top: 1px !important; }
}

@media (max-width: 1199px) {
    .haipick-fit .haipick-item-content[b-nb59bj1vlt] { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .haipick-fit .haipick-step-top[b-nb59bj1vlt] { gap: 8px !important; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] { display: none; }
    .haipick-fit .haipick-lights-legend[b-nb59bj1vlt] { gap: 6px 10px; font-size: 9px; }
}

/* แยก Serial ไว้เต็มความกว้างใต้ข้อมูลสินค้า โดยไม่ดันช่องสแกนและ P2L ออกนอกจอ */
.haipick-fit .is-pick > .haipick-step-frame:has(.haipick-serial-section)[b-nb59bj1vlt] {
    grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section)[b-nb59bj1vlt] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    container: haipick-serial-card / size;
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-nb59bj1vlt] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-nb59bj1vlt] { padding: 6px 4px; font-size: 12px; line-height: 1.35; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] { width: 64px; flex-basis: 64px; height: 90px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-nb59bj1vlt] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-nb59bj1vlt] { gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-nb59bj1vlt] { min-width: 0; overflow-wrap: anywhere; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading > .badge[b-nb59bj1vlt] { flex: 0 0 auto; }

.haipick-serial-section[b-nb59bj1vlt] {
    --serial-row-height: 30px;
    --serial-gap: 6px;
    --serial-visible-rows: 3;
    min-width: 0;
    min-height: 0;
    margin: 0 12px 10px;
    padding: 8px;
    border: 1px solid #b8d0ff;
    border-radius: 10px;
    background: #f8fbff;
}

.haipick-serial-heading[b-nb59bj1vlt] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
    color: #1659dc;
    font-size: 13px;
}

.haipick-serial-heading > i[b-nb59bj1vlt] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #e8f0ff;
}

.haipick-serial-progress[b-nb59bj1vlt] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edf7;
    color: #314568;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.haipick-fit .haipick-serial-list.haipick-serial-grid[b-nb59bj1vlt] {
    /* ให้ความยาวข้อความจริงกำหนดจำนวนต่อแถว แล้วกระจายพื้นที่ที่เหลือให้เต็ม */
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--serial-gap);
    height: calc(var(--serial-visible-rows) * var(--serial-row-height) + (var(--serial-visible-rows) - 1) * var(--serial-gap));
    max-height: none;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #86adff #edf3fc;
    overscroll-behavior: contain;
}

.haipick-serial-grid:focus-visible[b-nb59bj1vlt] { outline: 2px solid #2b6af4; outline-offset: 2px; }

.haipick-serial-chip[b-nb59bj1vlt] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: min(100%, 9rem);
    max-width: 100%;
    height: var(--serial-row-height);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #244575;
    background: #eaf0ff;
    font-size: 12px;
    line-height: 1.2;
}

.haipick-serial-chip > span:last-child[b-nb59bj1vlt] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haipick-serial-marker[b-nb59bj1vlt] { flex: 0 0 auto; font-size: 11px; }
.haipick-serial-chip.is-scanned[b-nb59bj1vlt] { color: #087447; border-color: #b8e6d0; background: #e4f7ed; font-weight: 650; }

/* อิงความสูงการ์ดจริง: แสดงสามแถวเมื่อพอ และสองแถวเมื่อจอ/กรอบงานเตี้ย */
@container haipick-serial-card (max-height: 410px) {
    .haipick-serial-section[b-nb59bj1vlt] { --serial-visible-rows: 2; --serial-row-height: 26px; --serial-gap: 4px; margin: 0 8px 8px; padding: 6px; }
    .haipick-serial-heading[b-nb59bj1vlt] { min-height: 20px; margin-bottom: 4px; font-size: 12px; }
    .haipick-serial-heading > i[b-nb59bj1vlt] { width: 20px; height: 20px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-nb59bj1vlt] { padding: 6px 8px; gap: 8px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-nb59bj1vlt] { padding: 3px 4px; font-size: 11px; line-height: 1.3; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-nb59bj1vlt] { display: none; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-nb59bj1vlt] { padding: 6px 8px; gap: 6px; }
    .haipick-scan-panel > .card[b-nb59bj1vlt] { padding: 8px !important; }
    .haipick-scan-panel > .card > .mb-2[b-nb59bj1vlt] { margin-bottom: 6px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-nb59bj1vlt] { padding: 5px 6px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-nb59bj1vlt] { font-size: 26px; }
    .haipick-quantity-label[b-nb59bj1vlt] { gap: 4px; font-size: 10px; }
    .haipick-quantity-label i[b-nb59bj1vlt] { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
    .haipick-serial-chip[b-nb59bj1vlt] { padding: 2px 5px; font-size: 11px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-nb59bj1vlt] { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-nb59bj1vlt] { overflow: hidden; text-overflow: ellipsis; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card[b-nb59bj1vlt] { padding: 6px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card > .mb-2[b-nb59bj1vlt] { margin-bottom: 4px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-nb59bj1vlt]  .form-control,
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-nb59bj1vlt]  .haipick-scan-button { height: 34px; min-height: 34px; font-size: 12px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid > .card[b-nb59bj1vlt] { padding: 3px 5px !important; gap: 2px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid .h1[b-nb59bj1vlt] { font-size: 22px; line-height: 1; }
}

@media (max-height: 820px) {
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot { padding: 2px 6px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot > .d-flex:first-child { min-height: 10px; font-size: 9px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot h2,
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot h2.text-danger { font-size: 14px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nb59bj1vlt]  .ptl-slot .mt-2 { font-size: 9px; line-height: 1; }
}
/* _content/WMS.UI/Pages/Workstation/Picking/HaipickStandbyBody.razor.rz.scp.css */
.haipick-page[b-nci1zvxdi2] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: #f4f7fb;
}

.haipick-workstation[b-nci1zvxdi2] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgb(15 23 42 / 6%);
}

.haipick-header[b-nci1zvxdi2] {
    min-height: 66px;
    padding: 10px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #1459a6, #2872c8);
}

.haipick-header.is-disabled[b-nci1zvxdi2] {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.haipick-title[b-nci1zvxdi2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.haipick-title span[b-nci1zvxdi2] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.haipick-title h2[b-nci1zvxdi2] {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.haipick-header-actions[b-nci1zvxdi2] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.haipick-switch-button[b-nci1zvxdi2] {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-switch-button:hover[b-nci1zvxdi2] {
    color: #fff;
    background: rgb(255 255 255 / 24%);
    transform: translateY(-1px);
}

.haipick-setting-button[b-nci1zvxdi2] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-setting-button:hover[b-nci1zvxdi2] {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.haipick-body[b-nci1zvxdi2] {
    min-width: 0;
    min-height: 0;
    padding: 12px !important;
    overflow: auto;
    background: #f7f9fc;
}

.haipick-body > .d-flex.flex-column[b-nci1zvxdi2] {
    min-height: 100%;
    gap: 12px;
}

.haipick-work-area[b-nci1zvxdi2] {
    min-width: 0;
    min-height: 260px;
    gap: 12px;
}

.haipick-work-panel[b-nci1zvxdi2] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.haipick-work-panel > .w-100.h-100[b-nci1zvxdi2] {
    padding: 14px;
}

.haipick-work-panel .card.rounded-0[b-nci1zvxdi2] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-work-panel img[b-nci1zvxdi2] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.haipick-body[b-nci1zvxdi2]  .badge {
    border-radius: 999px;
}

.haipick-body[b-nci1zvxdi2]  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .haipick-page[b-nci1zvxdi2] {
        padding: 10px;
        overflow-y: auto;
    }

    .haipick-work-area[b-nci1zvxdi2] {
        height: auto !important;
        flex-direction: column !important;
    }

    .haipick-work-panel[b-nci1zvxdi2] {
        min-height: 260px;
    }
}


/* Populated picking state: tote at left, item details at right, PTL fixed below */
.haipick-header[b-nci1zvxdi2] {
    width: 100%;
    display: flex !important;
}

.haipick-setting-button[b-nci1zvxdi2] {
    flex: 0 0 38px;
}

.haipick-body > .d-flex.flex-column.h-100[b-nci1zvxdi2] {
    display: grid !important;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    align-items: stretch;
}

.haipick-work-area[b-nci1zvxdi2] {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.haipick-work-area > .haipick-work-panel:first-child[b-nci1zvxdi2] {
    width: 26% !important;
    flex: 0 0 26%;
}

.haipick-work-area > .haipick-work-panel:nth-child(2)[b-nci1zvxdi2] {
    width: auto !important;
    flex: 1 1 74%;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.d-flex[b-nci1zvxdi2] {
    min-height: 0;
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid #e8edf3;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table[b-nci1zvxdi2] {
    margin: 0;
    font-size: 12px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td[b-nci1zvxdi2] {
    padding: 7px 9px;
    border-color: #edf1f6;
    vertical-align: middle;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td.text-end[b-nci1zvxdi2] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 84px;
    margin-top: auto;
    padding: 10px 12px 12px !important;
    gap: 10px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 > .card[b-nci1zvxdi2] {
    min-height: 68px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 .h1[b-nci1zvxdi2] {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

.haipick-body > .d-flex.flex-column.h-100 > .w-100:last-child[b-nci1zvxdi2] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-nci1zvxdi2] {
        display: flex !important;
    }

    .haipick-work-area > .haipick-work-panel:first-child[b-nci1zvxdi2],
    .haipick-work-area > .haipick-work-panel:nth-child(2)[b-nci1zvxdi2] {
        width: 100% !important;
        flex-basis: auto;
    }
}


/* Keep the work area visible while the station is in STANDBY */
.haipick-body[b-nci1zvxdi2] {
    display: block !important;
}

.haipick-body > .d-flex.flex-column.h-100[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 700px;
    display: flex !important;
    flex-direction: column !important;
}

.haipick-body .haipick-work-area[b-nci1zvxdi2] {
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    flex: 0 0 360px !important;
    display: flex !important;
}

.haipick-empty-state[b-nci1zvxdi2] {
    max-width: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

.haipick-empty-icon[b-nci1zvxdi2] {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
}

.haipick-empty-state strong[b-nci1zvxdi2] {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.haipick-empty-state small[b-nci1zvxdi2] {
    color: #94a3b8;
    font-size: 11px;
}

button.haipick-setting-button[b-nci1zvxdi2] {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgb(255 255 255 / 30%) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-nci1zvxdi2] {
        min-height: 0;
    }

    .haipick-body .haipick-work-area[b-nci1zvxdi2] {
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
    }
}


/* Replen-style active task banner */
.haipick-task-banner[b-nci1zvxdi2] {
    width: calc(100% - 20px);
    min-height: 70px;
    margin: 10px 10px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a5f;
    background: #eff6ff;
}

.haipick-task-icon[b-nci1zvxdi2] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 17px;
}

.haipick-task-copy[b-nci1zvxdi2] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.haipick-task-copy small[b-nci1zvxdi2] {
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.haipick-task-copy strong[b-nci1zvxdi2] {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.haipick-task-copy span[b-nci1zvxdi2] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-task-count[b-nci1zvxdi2] {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haipick-task-count strong[b-nci1zvxdi2] {
    color: #2563eb;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.haipick-task-count span[b-nci1zvxdi2] {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.haipick-waiting-badge[b-nci1zvxdi2] {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.haipick-waiting-badge i[b-nci1zvxdi2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

.haipick-modal[b-nci1zvxdi2]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 24%);
}

.haipick-modal[b-nci1zvxdi2]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-nci1zvxdi2]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.haipick-modal[b-nci1zvxdi2]  .modal-body {
    padding: 18px;
    background: #f8fafc;
}

.haipick-modal[b-nci1zvxdi2]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-nci1zvxdi2]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 8px !important;
}

.haipick-modal[b-nci1zvxdi2]  .form-control,
.haipick-modal[b-nci1zvxdi2]  .select {
    min-height: 40px;
    border-color: #cfd9e7;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .haipick-task-banner[b-nci1zvxdi2] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .haipick-waiting-badge[b-nci1zvxdi2] {
        margin-left: 52px;
    }
}


/* PICK_CONFIRM_RETURN — aligned with the Replen workstation visual language */
.haipick-return-body[b-nci1zvxdi2] {
    padding: 14px !important;
    background: #f5f8fc;
}

.haipick-return-shell[b-nci1zvxdi2] {
    min-height: 0;
}

.haipick-return-layout[b-nci1zvxdi2] {
    gap: 14px;
    min-height: 0;
    padding-top: 12px;
}

.haipick-return-tote-panel[b-nci1zvxdi2],
.haipick-return-products[b-nci1zvxdi2] {
    min-width: 0;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 44, 83, .05);
}

.haipick-return-tote-panel[b-nci1zvxdi2] {
    flex: 0 0 31%;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-return-products[b-nci1zvxdi2] {
    flex: 1 1 69%;
}

.haipick-return-tote-content[b-nci1zvxdi2] {
    justify-content: flex-start !important;
    gap: 18px;
    padding-top: 6px;
}

.haipick-return-tote-heading[b-nci1zvxdi2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-return-tote-heading > div[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-return-eyebrow[b-nci1zvxdi2],
.haipick-return-products-header span[b-nci1zvxdi2],
.haipick-setting-summary span[b-nci1zvxdi2] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-tote-heading strong[b-nci1zvxdi2] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-return-ready[b-nci1zvxdi2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-return-tote-stage[b-nci1zvxdi2] {
    width: 100%;
    min-height: 245px;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-return-tote-visual[b-nci1zvxdi2] {
    position: relative;
    width: min(240px, 78%);
    height: 160px;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgba(40, 101, 238, .15);
}

.haipick-return-tote-visual[b-nci1zvxdi2]::before,
.haipick-return-tote-visual[b-nci1zvxdi2]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
}

.haipick-return-tote-visual[b-nci1zvxdi2]::before { left: 12px; }
.haipick-return-tote-visual[b-nci1zvxdi2]::after { right: 12px; }

.haipick-return-products-header[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid #dde6f1;
    background: #fff;
}

.haipick-return-products-icon[b-nci1zvxdi2],
.haipick-setting-summary-icon[b-nci1zvxdi2] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #1765ed;
    background: #e4eeff;
    font-size: 18px;
}

.haipick-return-products-header > div:last-child[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
}

.haipick-return-products-header strong[b-nci1zvxdi2] {
    color: #12243d;
    font-size: 17px;
}

.haipick-return-products-body[b-nci1zvxdi2] {
    min-height: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    background: #fbfdff;
    overflow: auto;
}

.haipick-return-products-body .card[b-nci1zvxdi2] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.haipick-return-products-body .card-header[b-nci1zvxdi2] {
    border-radius: 10px 10px 0 0 !important;
}

.haipick-return-products-body table td[b-nci1zvxdi2],
.haipick-return-products-body table th[b-nci1zvxdi2] {
    border-color: #e7edf5 !important;
}

.haipick-return-footer[b-nci1zvxdi2] {
    padding: 12px 16px !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

.haipick-store-in-button[b-nci1zvxdi2] {
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 12px rgba(18, 163, 74, .18);
}

/* Station settings modal */
[b-nci1zvxdi2] .haipick-setting-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(8, 31, 61, .24);
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-title {
    color: #132a49;
    font-size: 18px;
    font-weight: 800;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-body {
    padding: 18px;
    background: #f5f8fc;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e0e7f0;
    background: #fff;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
}

.haipick-setting-summary[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #eef5ff;
}

.haipick-setting-summary > div:last-child[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-summary strong[b-nci1zvxdi2] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-setting-summary small[b-nci1zvxdi2],
.haipick-setting-section-title small[b-nci1zvxdi2] {
    color: #6c7d92;
    font-size: 11px;
}

.haipick-setting-section[b-nci1zvxdi2] {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.haipick-setting-section-title[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #1b5fd5;
}

.haipick-setting-section-title > div[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-section-title strong[b-nci1zvxdi2] {
    color: #1c2e47;
    font-size: 13px;
}

[b-nci1zvxdi2] .haipick-setting-section .form-group,
[b-nci1zvxdi2] .haipick-setting-section .row {
    margin-bottom: 0 !important;
}

[b-nci1zvxdi2] .haipick-setting-section label {
    color: #334861;
    font-weight: 700;
}

.haipick-zone-list[b-nci1zvxdi2] {
    max-height: 210px;
    overflow: auto;
    padding: 4px 6px;
}

[b-nci1zvxdi2] .haipick-zone-list .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 32px;
    margin: 4px 0;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-nci1zvxdi2] {
        flex-direction: column !important;
        overflow: auto;
    }

    .haipick-return-tote-panel[b-nci1zvxdi2],
    .haipick-return-products[b-nci1zvxdi2] {
        flex: 0 0 auto;
        width: 100%;
    }

    .haipick-return-tote-stage[b-nci1zvxdi2] {
        min-height: 210px;
    }
}


/* Return product list and primary action refinement */
.haipick-return-layout[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 365px;
    align-items: stretch;
}

.haipick-return-products[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 365px;
}

.haipick-return-products-body[b-nci1zvxdi2] {
    overflow: visible !important;
    align-items: stretch !important;
    padding: 14px !important;
}

.haipick-return-products-body > div[b-nci1zvxdi2],
.haipick-return-products-body > .card[b-nci1zvxdi2] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body .card-body[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
}

.haipick-return-products-body table[b-nci1zvxdi2] {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.haipick-return-products-body table tr[b-nci1zvxdi2] {
    min-height: 38px;
}

.haipick-return-products-body table th[b-nci1zvxdi2],
.haipick-return-products-body table td[b-nci1zvxdi2] {
    padding: 9px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e8eef6 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-return-products-body table th[b-nci1zvxdi2] {
    width: 110px;
    color: #60728a;
    font-size: 12px;
    font-weight: 700;
}

.haipick-return-products-body table td[b-nci1zvxdi2] {
    color: #172b46;
    font-size: 13px;
    font-weight: 600;
}

.haipick-product-qty[b-nci1zvxdi2] {
    min-height: 72px;
    margin-top: 12px !important;
    padding: 10px 16px;
    flex-direction: row !important;
    justify-content: space-between !important;
    border: 1px solid #bdeacb;
    border-radius: 9px;
    background: #effbf3;
}

.haipick-product-qty b[b-nci1zvxdi2] {
    color: #4b6255;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.haipick-product-qty .h1[b-nci1zvxdi2] {
    margin: 0 !important;
    color: #0ba64b !important;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.haipick-return-footer[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 16px !important;
}

.haipick-return-footer-copy[b-nci1zvxdi2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-return-footer-copy span[b-nci1zvxdi2] {
    color: #62748c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-footer-copy strong[b-nci1zvxdi2] {
    color: #1a2f4c;
    font-size: 12px;
    font-weight: 700;
}

.haipick-store-in-button[b-nci1zvxdi2] {
    width: 220px !important;
    min-width: 220px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(18, 163, 74, .22);
}

.haipick-store-in-button:hover:not(:disabled)[b-nci1zvxdi2] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 163, 74, .27);
}

@media (max-width: 680px) {
    .haipick-return-footer[b-nci1zvxdi2] {
        align-items: stretch;
        flex-direction: column;
    }

    .haipick-store-in-button[b-nci1zvxdi2] {
        width: 100% !important;
        min-width: 0;
    }
}


/* Let PICK_CONFIRM_RETURN cards size to content; scrolling belongs to the page only. */
.haipick-return-body[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-shell[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.haipick-return-layout[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 365px !important;
    overflow: visible !important;
}

.haipick-return-tote-panel[b-nci1zvxdi2],
.haipick-return-products[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 365px;
    max-height: none !important;
}

.haipick-return-tote-content[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body > .w-100[b-nci1zvxdi2],
.haipick-return-products-body > div[b-nci1zvxdi2] {
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body .haipick-product-qty[b-nci1zvxdi2] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-nci1zvxdi2],
    .haipick-return-tote-panel[b-nci1zvxdi2],
    .haipick-return-products[b-nci1zvxdi2] {
        min-height: 0 !important;
    }
}


/* Type1 product card must include the quantity summary in its intrinsic height. */
.haipick-return-product-card[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    overflow: visible !important;
}

.haipick-return-product-detail[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-return-product-detail > .w-100[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
}

.haipick-return-product-detail .haipick-product-qty[b-nci1zvxdi2] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}

.haipick-return-products[b-nci1zvxdi2] {
    overflow: visible !important;
}


/* Final containment for the Qty summary: the previous 365px row was too short. */
@media (min-width: 901px) {
    .haipick-return-layout[b-nci1zvxdi2] {
        min-height: 410px !important;
    }

    .haipick-return-tote-panel[b-nci1zvxdi2],
    .haipick-return-products[b-nci1zvxdi2] {
        min-height: 410px !important;
    }
}

.haipick-return-products[b-nci1zvxdi2] {
    box-sizing: border-box;
    overflow: hidden !important;
}

.haipick-return-products-body[b-nci1zvxdi2] {
    box-sizing: border-box;
    padding-bottom: 16px !important;
}

.haipick-return-product-card[b-nci1zvxdi2],
.haipick-return-product-detail[b-nci1zvxdi2] {
    width: 100%;
    box-sizing: border-box;
}

.haipick-return-product-detail[b-nci1zvxdi2] {
    display: block !important;
}

.haipick-return-product-detail > .w-100[b-nci1zvxdi2] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.haipick-product-qty[b-nci1zvxdi2] {
    position: static !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px;
    box-sizing: border-box;
}


/* Responsive return view: keep the primary action visible above the application footer. */
@media (max-width: 900px) {
    .haipick-return-body[b-nci1zvxdi2] {
        flex: 1 1 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .haipick-return-shell[b-nci1zvxdi2] {
        min-height: max-content !important;
        padding-bottom: 4px;
    }

    .haipick-return-layout[b-nci1zvxdi2] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        height: auto !important;
        min-height: max-content !important;
    }

    .haipick-return-tote-panel[b-nci1zvxdi2],
    .haipick-return-products[b-nci1zvxdi2] {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .haipick-return-products-body[b-nci1zvxdi2],
    .haipick-return-product-card[b-nci1zvxdi2],
    .haipick-return-product-detail[b-nci1zvxdi2] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .haipick-return-footer[b-nci1zvxdi2] {
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        border-top: 1px solid #d9e3ef !important;
        box-shadow: 0 -8px 20px rgba(15, 44, 83, .10);
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 680px) {
    .haipick-return-body[b-nci1zvxdi2] {
        padding: 10px !important;
        padding-bottom: 16px !important;
    }

    .haipick-return-tote-panel[b-nci1zvxdi2] {
        padding: 12px;
    }

    .haipick-return-tote-stage[b-nci1zvxdi2] {
        min-height: 190px;
    }

    .haipick-return-tote-visual[b-nci1zvxdi2] {
        width: min(220px, 76%);
        height: 140px;
    }

    .haipick-return-footer-copy[b-nci1zvxdi2] {
        display: none;
    }

    .haipick-return-footer[b-nci1zvxdi2] {
        padding: 10px 12px !important;
    }
}


/* Station number and picking type share the same header line. */
.haipick-title-line[b-nci1zvxdi2] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.haipick-title-line h2[b-nci1zvxdi2] {
    flex: 0 0 auto;
}

[b-nci1zvxdi2] .haipick-title-line > div {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
}

[b-nci1zvxdi2] .haipick-title-line .h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1;
}

[b-nci1zvxdi2] .haipick-title-line .badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin: 0 4px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: #ff443d !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(115, 17, 12, .18);
}

@media (max-width: 680px) {
    .haipick-title-line[b-nci1zvxdi2] {
        gap: 6px;
    }

    .haipick-title h2[b-nci1zvxdi2] {
        font-size: 19px;
    }

    [b-nci1zvxdi2] .haipick-title-line .badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* Replen-style workstation actions */
.haipick-store-in-button[b-nci1zvxdi2] {
    width: 190px !important;
    min-width: 190px;
    min-height: 42px;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 1px solid #0b9b49 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #12a84f !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1 !important;
    text-transform: uppercase;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-store-in-button:hover:not(:disabled)[b-nci1zvxdi2] {
    border-color: #087f3b !important;
    background: #0c9344 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18, 168, 79, .26);
}

.haipick-store-in-button:disabled[b-nci1zvxdi2] {
    border-color: #a8d9bc !important;
    background: #b9ddc7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 13px 16px !important;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn {
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1 !important;
    box-shadow: none;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-secondary,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-light {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-secondary:hover,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-light:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-primary,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-info,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-success {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20);
}

[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-primary:hover,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-info:hover,
[b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn-success:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    .haipick-store-in-button[b-nci1zvxdi2] {
        width: 100% !important;
        min-width: 0;
    }

    [b-nci1zvxdi2] .haipick-setting-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* BootstrapBlazor Button renders inside a child component: use ::deep from scoped wrappers. */
[b-nci1zvxdi2] .haipick-return-footer .haipick-store-in-button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #0b9847 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background-color: #12a84f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20) !important;
}

[b-nci1zvxdi2] .haipick-return-footer .haipick-store-in-button:hover:not(:disabled) {
    border-color: #087f3b !important;
    background-color: #0c9344 !important;
    transform: translateY(-1px);
}

.haipick-setting-actions[b-nci1zvxdi2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

[b-nci1zvxdi2] .haipick-setting-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

[b-nci1zvxdi2] .haipick-setting-actions .btn-secondary {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
    box-shadow: none !important;
}

[b-nci1zvxdi2] .haipick-setting-actions .btn-secondary:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-nci1zvxdi2] .haipick-setting-actions .btn-primary {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20) !important;
}

[b-nci1zvxdi2] .haipick-setting-actions .btn-primary:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    [b-nci1zvxdi2] .haipick-return-footer .haipick-store-in-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .haipick-setting-actions[b-nci1zvxdi2] {
        gap: 8px;
    }

    [b-nci1zvxdi2] .haipick-setting-actions .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* Native setting actions — not affected by BootstrapBlazor Button internals. */
.haipick-setting-action[b-nci1zvxdi2] {
    min-width: 108px;
    height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-setting-action i[b-nci1zvxdi2] {
    font-size: 13px;
}

.haipick-setting-action-close[b-nci1zvxdi2] {
    border: 1px solid #cbd6e3;
    color: #344860;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 44, 83, .06);
}

.haipick-setting-action-close:hover[b-nci1zvxdi2] {
    border-color: #aebdce;
    color: #1f334c;
    background: #f4f7fa;
}

.haipick-setting-action-save[b-nci1zvxdi2] {
    border: 1px solid #1765ed;
    color: #fff;
    background: #2567e8;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .23);
}

.haipick-setting-action-save:hover[b-nci1zvxdi2] {
    border-color: #1555c8;
    background: #155bd5;
    box-shadow: 0 7px 16px rgba(37, 103, 232, .28);
    transform: translateY(-1px);
}

.haipick-setting-action:focus-visible[b-nci1zvxdi2] {
    outline: 3px solid rgba(37, 103, 232, .22);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .haipick-setting-action[b-nci1zvxdi2] {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* Account for the shared task banner in populated return states. */
@media (min-width: 901px) {
    .haipick-return-layout:has(.haipick-task-banner)[b-nci1zvxdi2] {
        min-height: 490px !important;
    }

    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-tote-panel[b-nci1zvxdi2],
    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-products[b-nci1zvxdi2] {
        min-height: 490px !important;
    }
}

.haipick-return-tote-panel > .haipick-task-banner[b-nci1zvxdi2] {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-content[b-nci1zvxdi2] {
    flex: 1 1 auto;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-stage[b-nci1zvxdi2] {
    min-height: 220px;
}


/* Replen-inspired product detail panel */
.haipick-return-products-header[b-nci1zvxdi2] {
    position: relative;
}

.haipick-return-product-ready[b-nci1zvxdi2] {
    margin-left: auto;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #08783e !important;
    background: #d9f8e8;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.haipick-replen-product[b-nci1zvxdi2] {
    width: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fff;
}

.haipick-replen-product-main[b-nci1zvxdi2] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.haipick-replen-product-image[b-nci1zvxdi2] {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5e1ee;
    border-radius: 10px;
    color: #c7d3e1;
    background: #f7faff;
    font-size: 36px;
}

.haipick-replen-product-image img[b-nci1zvxdi2] {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.haipick-replen-product-details[b-nci1zvxdi2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-replen-detail-row[b-nci1zvxdi2] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 82px minmax(0, .55fr);
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #e6edf5;
}

.haipick-replen-detail-row.single[b-nci1zvxdi2] {
    grid-template-columns: 92px minmax(0, 1fr);
}

.haipick-replen-detail-row span[b-nci1zvxdi2] {
    color: #65768c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.haipick-replen-detail-row strong[b-nci1zvxdi2] {
    min-width: 0;
    overflow: hidden;
    color: #25364d;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-replen-detail-row .haipick-company-value[b-nci1zvxdi2] {
    color: #ff3f36;
    font-size: 20px;
    font-weight: 800;
}

.haipick-replen-metrics[b-nci1zvxdi2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0 132px;
}

.haipick-replen-metric[b-nci1zvxdi2] {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dae4ef;
    border-radius: 10px;
    background: #f7f9fc;
}

.haipick-replen-metric span[b-nci1zvxdi2] {
    color: #65768c;
    font-size: 10px;
    font-weight: 650;
}

.haipick-replen-metric strong[b-nci1zvxdi2] {
    margin-top: 3px;
    color: #344860;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.haipick-replen-metric.is-primary[b-nci1zvxdi2] {
    border-color: #b9eccb;
    background: #effbf3;
}

.haipick-replen-metric.is-primary strong[b-nci1zvxdi2] {
    color: #0ba64b;
}

.haipick-replen-product-empty[b-nci1zvxdi2] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #75869a;
}

.haipick-replen-product-empty i[b-nci1zvxdi2] {
    color: #c7d3e1;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .haipick-replen-product-main[b-nci1zvxdi2] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .haipick-replen-product-image[b-nci1zvxdi2] {
        width: 88px;
        height: 96px;
    }

    .haipick-replen-metrics[b-nci1zvxdi2] {
        margin-left: 104px;
    }
}

@media (max-width: 680px) {
    .haipick-return-product-ready[b-nci1zvxdi2] {
        padding: 4px 7px;
    }

    .haipick-replen-product[b-nci1zvxdi2] {
        padding: 10px;
    }

    .haipick-replen-product-main[b-nci1zvxdi2] {
        grid-template-columns: 1fr;
    }

    .haipick-replen-product-image[b-nci1zvxdi2] {
        width: 100%;
        height: 120px;
    }

    .haipick-replen-detail-row[b-nci1zvxdi2],
    .haipick-replen-detail-row.single[b-nci1zvxdi2] {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .haipick-replen-detail-row:not(.single) span:nth-of-type(2)[b-nci1zvxdi2],
    .haipick-replen-detail-row:not(.single) strong:nth-of-type(2)[b-nci1zvxdi2] {
        margin-top: 6px;
    }

    .haipick-replen-metrics[b-nci1zvxdi2] {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}


/* PICK state — isolated responsive layout */
.haipick-pick-body[b-nci1zvxdi2] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc;
}

.haipick-pick-shell[b-nci1zvxdi2] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-layout[b-nci1zvxdi2] {
    width: 100%;
    height: auto !important;
    min-height: 360px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2],
.haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 360px;
    flex: none !important;
    overflow: hidden;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 44 83 / 5%);
}

.haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nci1zvxdi2],
.haipick-pick-body .haipick-pick-product > .w-100.h-100[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nci1zvxdi2] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    padding: 16px !important;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf4;
}

.haipick-pick-body .haipick-pick-product table[b-nci1zvxdi2] {
    width: 100%;
    min-width: 520px;
    margin: 0;
    table-layout: fixed;
}

.haipick-pick-body .haipick-pick-product table td[b-nci1zvxdi2] {
    padding: 9px 10px !important;
    vertical-align: middle;
    border-color: #e7edf5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product table td.text-end[b-nci1zvxdi2] {
    width: 105px !important;
    color: #5d718b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nci1zvxdi2] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    padding: 12px 16px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nci1zvxdi2] {
    min-width: 0;
    min-height: 76px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
    text-align: center;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-nci1zvxdi2] {
    margin: 4px 0 0 !important;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.haipick-pick-body .input-group[b-nci1zvxdi2],
.haipick-pick-body[b-nci1zvxdi2]  .input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

.haipick-pick-body .form-control[b-nci1zvxdi2],
.haipick-pick-body[b-nci1zvxdi2]  .form-control {
    min-width: 0;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-pick-body[b-nci1zvxdi2] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-layout[b-nci1zvxdi2] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2],
    .haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2] {
        padding: 12px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nci1zvxdi2] {
        min-height: 220px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nci1zvxdi2] {
        flex-direction: column;
        padding: 12px !important;
        overflow: visible;
    }

    .haipick-pick-body .haipick-pick-product table[b-nci1zvxdi2] {
        min-width: 0;
        table-layout: auto;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-task-banner[b-nci1zvxdi2] {
        margin-bottom: 10px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-nci1zvxdi2] {
        min-height: 190px !important;
    }

    .haipick-pick-body .haipick-pick-product table[b-nci1zvxdi2],
    .haipick-pick-body .haipick-pick-product tbody[b-nci1zvxdi2],
    .haipick-pick-body .haipick-pick-product tr[b-nci1zvxdi2] {
        width: 100%;
    }

    .haipick-pick-body .haipick-pick-product table td[b-nci1zvxdi2] {
        padding: 7px 6px !important;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product table td.text-end[b-nci1zvxdi2] {
        width: 88px !important;
        font-size: 9px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nci1zvxdi2] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        padding: 10px !important;
        gap: 7px;
        overflow-x: auto;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nci1zvxdi2] {
        min-height: 70px;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-nci1zvxdi2] {
        font-size: 22px;
    }

    .haipick-pick-body[b-nci1zvxdi2]  .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* PICK Tote — Replen visual style and width correction */
.haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-nci1zvxdi2] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-tote > .w-100.h-100[b-nci1zvxdi2] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 18px;
    padding: 0 !important;
}

.haipick-pick-tote-heading[b-nci1zvxdi2] {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-pick-tote-heading > div[b-nci1zvxdi2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-pick-tote-eyebrow[b-nci1zvxdi2] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-pick-tote-heading strong[b-nci1zvxdi2] {
    overflow: hidden;
    color: #102a4c;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-pick-tote-ready[b-nci1zvxdi2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-pick-tote-stage[b-nci1zvxdi2] {
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-pick-tote-visual[b-nci1zvxdi2] {
    position: relative;
    width: min(240px, 78%) !important;
    height: 160px !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgb(40 101 238 / 15%);
}

.haipick-pick-tote-visual[b-nci1zvxdi2]::before,
.haipick-pick-tote-visual[b-nci1zvxdi2]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
    pointer-events: none;
}

.haipick-pick-tote-visual[b-nci1zvxdi2]::before {
    left: 12px;
}

.haipick-pick-tote-visual[b-nci1zvxdi2]::after {
    right: 12px;
}

.haipick-pick-tote-visual > *[b-nci1zvxdi2] {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-nci1zvxdi2] {
        width: 100% !important;
        padding: 12px;
    }

    .haipick-pick-tote-stage[b-nci1zvxdi2] {
        min-height: 210px;
    }

    .haipick-pick-tote-visual[b-nci1zvxdi2] {
        width: min(230px, 76%) !important;
        height: 145px !important;
    }
}

@media (max-width: 480px) {
    .haipick-pick-tote-heading[b-nci1zvxdi2] {
        min-height: 64px;
        padding: 11px 12px;
    }

    .haipick-pick-tote-heading strong[b-nci1zvxdi2] {
        font-size: 16px;
    }

    .haipick-pick-tote-stage[b-nci1zvxdi2] {
        min-height: 185px;
    }

    .haipick-pick-tote-visual[b-nci1zvxdi2] {
        width: min(210px, 78%) !important;
        height: 132px !important;
    }
}


/* PICK layout refinement — compact Tote and structured picking workspace */
.haipick-pick-body .haipick-pick-layout[b-nci1zvxdi2] {
    grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
    align-items: start !important;
}

.haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
}

.haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nci1zvxdi2] {
    min-height: 238px !important;
    padding: 14px 18px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2:empty[b-nci1zvxdi2] {
    display: none;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2[b-nci1zvxdi2] {
    flex: 0 0 auto;
    padding: 8px 14px 8px 0 !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .w-100[b-nci1zvxdi2] {
    padding: 0 !important;
}

.haipick-pick-body .haipick-pick-product table td[b-nci1zvxdi2] {
    height: 36px;
    padding: 7px 10px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nci1zvxdi2] {
    padding: 0 8px 12px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-nci1zvxdi2] {
    padding: 12px !important;
    border: 1px solid #cfe0f6 !important;
    border-radius: 10px !important;
    background: #f8fbff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .mb-2[b-nci1zvxdi2] {
    margin-bottom: 8px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 [style*="max-height:160px"][b-nci1zvxdi2] {
    max-height: 116px !important;
    padding: 7px 10px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control[b-nci1zvxdi2] {
    height: 40px;
    border-radius: 7px 0 0 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control.me-2[b-nci1zvxdi2] {
    margin-right: 8px !important;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nci1zvxdi2]  .btn {
    min-width: 72px;
    height: 40px;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nci1zvxdi2] {
    margin-top: 0;
    padding: 0 12px 14px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nci1zvxdi2] {
    min-height: 68px;
    background: #f7f9fc;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card:first-child[b-nci1zvxdi2] {
    border-color: #ffd6d6 !important;
    background: #fff8f8;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2] {
    margin-top: 0;
}

@media (min-width: 901px) {
    .haipick-pick-tote-stage[b-nci1zvxdi2] {
        min-height: 245px;
    }

    .haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2] {
        min-height: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .haipick-pick-body .haipick-pick-layout[b-nci1zvxdi2] {
        grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    }

    .haipick-pick-body .haipick-pick-product table td[b-nci1zvxdi2] {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout[b-nci1zvxdi2] {
        align-items: stretch !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-nci1zvxdi2],
    .haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
        align-self: stretch;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-nci1zvxdi2] {
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-nci1zvxdi2] {
        padding: 0 0 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-nci1zvxdi2] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nci1zvxdi2] {
        padding: 0 0 10px !important;
    }
}


/* PICK Put-to-Light containment */
.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-layout > .w-100,
.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-module-column {
    min-width: 0 !important;
    max-width: 100%;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-section-title {
    min-height: 32px;
    padding: 5px 9px;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-row {
    width: 100%;
    min-width: 0;
    height: 76px !important;
    min-height: 76px;
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-row > .w-100 {
    min-width: 0;
    max-width: calc(100% - 46px);
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-row-number {
    width: 42px;
    min-width: 42px;
    height: 76px !important;
    flex: 0 0 42px;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-slot {
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-slot h2 {
    margin: 0;
    font-size: 21px;
}

.haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-slot .mt-2 {
    margin-top: 1px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-nci1zvxdi2] {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px;
    flex: 0 0 86px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-nci1zvxdi2] {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px;
    flex: 1 1 0 !important;
}

@media (max-width: 900px) {
    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-dashboard {
        min-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-dashboard {
        min-width: 0 !important;
    }

    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-row {
        height: auto !important;
        min-height: 0;
    }

    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-row > .w-100 {
        max-width: none;
    }

    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2]  .ptl-slot {
        height: 76px !important;
    }
}


/* PICK product workspace — side-by-side information and operations */
@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        gap: 0;
    }

    .haipick-pick-product-info[b-nci1zvxdi2] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px 18px !important;
        border-right: 1px solid #e4ebf4;
        border-bottom: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .haipick-pick-scan[b-nci1zvxdi2] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding: 12px 12px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-nci1zvxdi2] {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        margin: 0;
        padding: 0 12px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-nci1zvxdi2] {
        width: 100% !important;
        min-width: 0;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px;
        margin: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box;
        font-size: 11px;
        text-align: center;
    }

    .haipick-pick-quantities > .card .h1[b-nci1zvxdi2] {
        margin: 3px 0 0 !important;
        font-size: 23px;
        line-height: 1;
    }

    .haipick-pick-shell > .w-100:last-child[b-nci1zvxdi2] {
        margin-top: -2px;
    }
}

.haipick-pick-product-info table[b-nci1zvxdi2] {
    width: 100%;
    margin: 0;
}

/* จำกัดความสูงรายการเพื่อให้ช่องสแกนยังอยู่ในมุมมองเมื่อมีหลาย serial */
.haipick-pick-scan .haipick-serial-list[b-nci1zvxdi2] {
    max-height: 160px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 4px 6px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-serial-row[b-nci1zvxdi2] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    line-height: 20px;
    border-bottom: 1px solid #edf1f7;
}

.haipick-serial-row:last-child[b-nci1zvxdi2] {
    border-bottom: 0;
}

.haipick-serial-row > span:last-child[b-nci1zvxdi2] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table[b-nci1zvxdi2] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-nci1zvxdi2] {
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-nci1zvxdi2] {
    font-size: 13px;
}

.haipick-pick-body .haipick-pick-scan[b-nci1zvxdi2] {
    font-size: 15px;
    line-height: 1.5;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-nci1zvxdi2],
.haipick-pick-body .haipick-pick-scan[b-nci1zvxdi2]  .btn {
    font-size: 15px;
}

.haipick-pick-body .haipick-pick-quantities > .card[b-nci1zvxdi2] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-pick-body .haipick-pick-quantities > .card .h1[b-nci1zvxdi2] {
    font-size: 28px;
}

.haipick-pick-product-info table td[b-nci1zvxdi2] {
    height: 35px;
    padding: 6px 9px !important;
}

.haipick-pick-scan > .card[b-nci1zvxdi2] {
    margin: 0;
}

@media (max-width: 1100px) {
    .haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
        display: flex !important;
        flex-direction: column !important;
    }

    .haipick-pick-product-info[b-nci1zvxdi2] {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        border-bottom: 1px solid #e4ebf4;
        box-sizing: border-box;
    }

    .haipick-pick-scan[b-nci1zvxdi2] {
        width: 100%;
        padding: 10px 10px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-nci1zvxdi2] {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-nci1zvxdi2] {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-quantities[b-nci1zvxdi2] {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .haipick-pick-quantities > .card[b-nci1zvxdi2] {
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .haipick-switch-button[b-nci1zvxdi2] {
        width: 38px;
        padding: 0;
    }

    .haipick-switch-button span[b-nci1zvxdi2] {
        display: none;
    }
}

/* ใช้สีและกรอบมาตรฐานของระบบในส่วนข้อมูลและการสแกน */
.haipick-pick-body .haipick-pick-product-info[b-nci1zvxdi2] {
    padding: 12px !important;
}

.haipick-pick-product-info > .w-100[b-nci1zvxdi2] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-nci1zvxdi2] {
    padding: 8px !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-nci1zvxdi2] {
    width: 95px !important;
    text-transform: none;
    color: var(--bs-secondary);
    font-weight: 600;
}

.haipick-pick-body .haipick-pick-product-info table tr:last-child td[b-nci1zvxdi2] {
    border-bottom: 0;
}

.haipick-pick-body .haipick-pick-scan > .card[b-nci1zvxdi2],
.haipick-pick-body .haipick-pick-quantities > .card[b-nci1zvxdi2] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background: var(--bs-body-bg);
    box-shadow: none;
}

.haipick-pick-body .haipick-pick-scan > .card[b-nci1zvxdi2] {
    padding: 12px !important;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-nci1zvxdi2],
.haipick-pick-body .haipick-pick-scan[b-nci1zvxdi2]  .btn {
    border-radius: var(--bs-border-radius) !important;
}

.haipick-pick-scan .haipick-serial-list[b-nci1zvxdi2] {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

@media (max-width: 560px) {
    .haipick-pick-product-info[b-nci1zvxdi2] {
        flex-direction: column;
    }
}

/* ใช้หัวการ์ดและกรอบรูปแบบเดียวกับ Product List ในขั้นตอนส่งคืน */
.haipick-pick-products-header[b-nci1zvxdi2] {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product-info[b-nci1zvxdi2] {
    gap: 12px;
    align-items: flex-start;
    background: #fff;
}

.haipick-pick-product-info > .haipick-replen-product-image[b-nci1zvxdi2] {
    flex: 0 0 90px;
    width: 90px;
    height: 100px;
    margin-top: 8px;
}

.haipick-pick-product-info > .w-100[b-nci1zvxdi2] {
    flex: 1 1 0;
    padding: 0 !important;
    margin: 0;
}

.haipick-return-shell[b-nci1zvxdi2] {
    gap: 14px;
}

.haipick-return-ptl[b-nci1zvxdi2] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-nci1zvxdi2] {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-rows: auto auto auto;
    }

    .haipick-pick-products-header[b-nci1zvxdi2] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .haipick-pick-product-info[b-nci1zvxdi2] {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .haipick-pick-scan[b-nci1zvxdi2] {
        grid-column: 2;
        grid-row: 2;
    }

    .haipick-pick-quantities[b-nci1zvxdi2] {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .haipick-pick-product-info > .haipick-replen-product-image[b-nci1zvxdi2] {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }
}

/* โครงสร้าง PICK แยกจากรูปแบบเดิม ให้การ์ดสูงตามเนื้อหาและสแกนต่อจากข้อมูล */
.haipick-workstation:has(.haipick-compact) > .haipick-header[b-nci1zvxdi2] {
    min-height: 76px;
    padding: 14px 20px !important;
    background: linear-gradient(115deg, #1559ae, #2878cf);
}

.haipick-workstation:has(.haipick-compact) .haipick-title h2[b-nci1zvxdi2] { font-size: 28px; }
.haipick-workstation:has(.haipick-compact) .haipick-title > span[b-nci1zvxdi2] { font-size: 10px; }
.haipick-workstation:has(.haipick-compact) .haipick-title[b-nci1zvxdi2]  .badge {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
}

.haipick-body.haipick-compact[b-nci1zvxdi2] {
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    overflow: auto;
    background: #f2f7fc;
    color: #142d55;
}

.haipick-workspace[b-nci1zvxdi2] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.haipick-columns[b-nci1zvxdi2] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.haipick-sidebar[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.haipick-tote-card[b-nci1zvxdi2],
.haipick-item-card[b-nci1zvxdi2] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-tote-card[b-nci1zvxdi2] {
    padding: 12px;
}

.haipick-section-heading[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.haipick-section-icon[b-nci1zvxdi2] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2165ed;
    font-size: 19px;
}

.haipick-compact .haipick-task-banner[b-nci1zvxdi2] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-compact .haipick-task-icon[b-nci1zvxdi2] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

.haipick-compact .haipick-task-copy[b-nci1zvxdi2] {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 5px;
}

.haipick-compact .haipick-task-copy small[b-nci1zvxdi2] {
    color: #142d55;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
}

.haipick-compact .haipick-task-copy strong[b-nci1zvxdi2] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-compact .haipick-task-copy > span[b-nci1zvxdi2] {
    font-size: 11px;
}

.haipick-compact .haipick-waiting-badge[b-nci1zvxdi2] {
    grid-column: 3;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0;
}

.haipick-compact .haipick-task-count[b-nci1zvxdi2] {
    grid-column: 3;
    grid-row: 2;
    gap: 3px;
    border-left: 1px solid #e5edf8;
}

.haipick-compact .haipick-task-count strong[b-nci1zvxdi2] { font-size: 24px; }
.haipick-compact .haipick-task-count span[b-nci1zvxdi2] { font-size: 9px; }

.haipick-compact .haipick-pick-tote-heading[b-nci1zvxdi2] {
    min-height: 0;
    padding: 0 2px 12px 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.haipick-compact .haipick-pick-tote-eyebrow[b-nci1zvxdi2] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.haipick-compact .haipick-pick-tote-heading strong[b-nci1zvxdi2] { font-size: 22px; }
.haipick-compact .haipick-pick-tote-ready[b-nci1zvxdi2] { font-size: 12px; }
.haipick-compact .haipick-pick-tote-heading > div[b-nci1zvxdi2] { line-height: 1.3; }

/* ลดเฉพาะพื้นรอบภาพ โดยคงขนาด ภาพ และการแบ่งช่อง Tote เดิม */
.haipick-compact .haipick-pick-tote-stage[b-nci1zvxdi2] {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    border: 1px solid #e4edf8;
    background: #f5f9ff;
}

/* วาด Type และตำแหน่ง Partition จาก master data เช่นเดียวกับ Replenishment */
.haipick-source-tote[b-nci1zvxdi2] {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 7px;
    border-radius: 9px 9px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.haipick-source-tote-layout[b-nci1zvxdi2] {
    position: relative;
    width: 100%;
    height: 100%;
}

.haipick-source-partition[b-nci1zvxdi2] {
    position: absolute;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c6daf8;
    color: #17386d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.haipick-source-partition-name[b-nci1zvxdi2] {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.haipick-source-parts[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.haipick-source-whole[b-nci1zvxdi2] { gap: 6px; padding: 6px; }
.haipick-source-whole img[b-nci1zvxdi2] { max-height: 55px; }

.haipick-source-tote img[b-nci1zvxdi2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-source-partition.bg-primary[b-nci1zvxdi2] { background-color: #2563eb !important; }

.haipick-compact .haipick-pick-products-header[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5edf6;
    background: #fff;
}

.haipick-compact .haipick-pick-products-header strong[b-nci1zvxdi2] {
    color: #142d55;
    font-size: 17px;
    line-height: 1.4;
}

.haipick-compact .haipick-return-products-icon[b-nci1zvxdi2] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.haipick-item-content[b-nci1zvxdi2] {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    min-width: 0;
}

.haipick-item-info[b-nci1zvxdi2] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
}

.haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] {
    flex: 0 0 82px;
    width: 82px;
    height: 130px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #f3f7fc;
}

.haipick-item-info > .haipick-replen-product-image img[b-nci1zvxdi2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-item-info > .w-100[b-nci1zvxdi2] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

.haipick-item-info table[b-nci1zvxdi2] {
    width: 100%;
    height: auto;
    margin: 0;
    table-layout: auto;
}

.haipick-item-info table td[b-nci1zvxdi2] {
    height: auto;
    padding: 9px 5px;
    border-bottom: 1px solid #e7edf6;
    color: #4d5d76;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.haipick-item-info table td.text-end[b-nci1zvxdi2] {
    width: 1% !important;
    white-space: nowrap;
    text-align: left !important;
    color: #566e92;
    font-size: 11px;
    font-weight: 700;
}

.haipick-item-info table tr:last-child td[b-nci1zvxdi2] { border-bottom: 0; }

.haipick-operations[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #e5edf6;
}

.haipick-scan-panel[b-nci1zvxdi2] { min-width: 0; }

.haipick-scan-panel > .card[b-nci1zvxdi2] {
    min-height: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f1f7ff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
}

.haipick-scan-panel > .card > .mb-2[b-nci1zvxdi2] { margin-bottom: 10px !important; }
.haipick-scan-panel > .card > .d-flex[b-nci1zvxdi2] { min-width: 0; }

.haipick-scan-heading[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #132f65;
    font-size: 13px;
}

.haipick-scan-heading[b-nci1zvxdi2]::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 5px;
    border-radius: 7px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e63f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m8 0h5v-5M6 12h12M9 7h6M9 17h6'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.haipick-scan-title[b-nci1zvxdi2] { color: #132f65; font-weight: 700; }
.haipick-scan-heading > .text-muted[b-nci1zvxdi2] { color: #536a94 !important; }
.haipick-scan-heading.justify-content-between[b-nci1zvxdi2] { justify-content: flex-start !important; }
.haipick-scan-heading > .badge[b-nci1zvxdi2] { margin-left: auto; }
.haipick-scan-entry[b-nci1zvxdi2] { position: relative; }

/* ไอคอนเป็นของตกแต่ง ไม่รับคลิกและไม่รบกวนการสแกน */
.haipick-scan-entry[b-nci1zvxdi2]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 21px;
    width: 19px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #8e9bb0 0 1px, transparent 1px 3px, #8e9bb0 3px 5px, transparent 5px 6px);
}

.haipick-scan-panel .form-control[b-nci1zvxdi2] {
    min-width: 0;
    height: 42px;
    padding-left: 39px;
    border-radius: 8px !important;
    background: #fff;
    font-size: 14px;
    border-color: #709aff !important;
}

.haipick-scan-panel[b-nci1zvxdi2]  .haipick-scan-button {
    flex: 0 0 auto;
    min-width: 70px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #1958ed !important;
    background: #1958f5 !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

.haipick-scan-panel[b-nci1zvxdi2]  .haipick-scan-button:not(:disabled):hover {
    border-color: #1048cd !important;
    background: #1048db !important;
}

.haipick-scan-panel[b-nci1zvxdi2]  .haipick-scan-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.haipick-scan-panel .text-danger:empty[b-nci1zvxdi2] { display: none; }

.haipick-quantity-grid[b-nci1zvxdi2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.haipick-quantity-grid:has(> :nth-child(3))[b-nci1zvxdi2] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haipick-quantity-grid > .card[b-nci1zvxdi2] {
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 8px;
    border: 1px solid #e3edf9;
    border-radius: 11px !important;
    background: #f9fbff;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none !important;
}

.haipick-quantity-grid .h1[b-nci1zvxdi2] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.haipick-quantity-label[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    gap: 8px;
}

.haipick-quantity-label i[b-nci1zvxdi2] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: #2165ed;
    background: #e8f1ff;
    font-size: 15px;
}

.haipick-quantity-grid .h1.text-primary[b-nci1zvxdi2] { color: #0961dc !important; }

.haipick-lights[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
}

.haipick-lights-header[b-nci1zvxdi2] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5edf6;
}

.haipick-lights-header h3[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #1458e6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}

.haipick-lights-icon[b-nci1zvxdi2] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c60ed' d='M12 2a7 7 0 0 0-4.7 12.2c.9.8 1.2 1.5 1.2 2.8h7c0-1.3.3-2 1.2-2.8A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 19h6m-5 2h4' fill='none' stroke='%231c60ed' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 8c.4-1.7 1.5-2.5 3-2.6' fill='none' stroke='%237eabff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
}

.haipick-lights-legend[b-nci1zvxdi2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #657da3;
    font-size: 10px;
    line-height: 1.4;
}

.haipick-lights-legend li[b-nci1zvxdi2] { display: flex; align-items: center; gap: 8px; }
.haipick-legend-swatch[b-nci1zvxdi2] { width: 25px; height: 20px; border-radius: 6px; }
.haipick-legend-swatch.is-active[b-nci1zvxdi2] { border: 1px solid #77d4ff; background: linear-gradient(135deg, #c7edff, #b5e4fa); }
.haipick-legend-swatch.is-occupied[b-nci1zvxdi2] { border: 1px solid #e3ebf5; background: #eaf0f7; }
.haipick-legend-swatch.is-empty[b-nci1zvxdi2] { border: 1px solid #e2eaf5; background: #fff; }

.haipick-lights[b-nci1zvxdi2]  .ptl-dashboard,
.haipick-lights[b-nci1zvxdi2]  .ptl-layout {
    flex: 1 0 auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-dashboard {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-layout { margin: 0; }
.haipick-lights[b-nci1zvxdi2]  .ptl-layout > .w-100 { gap: 7px; }

/* กระจายพื้นที่ว่างให้แถว P2L เท่ากัน โดยไม่ยืดส่วนข้อมูลด้านบน */
.haipick-lights[b-nci1zvxdi2]  .ptl-layout > .w-100,
.haipick-lights[b-nci1zvxdi2]  .ptl-module-column {
    flex: 1 0 auto;
    align-self: stretch;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-section-title {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 3px;
    padding: 0 0 10px;
    gap: 10px;
    border-bottom: 1px solid #e5edf6;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-section-title::before,
.haipick-lights[b-nci1zvxdi2]  .ptl-section-title::after { display: none; }

/* ใช้หัวข้อพร้อม Legend ของหน้า PICK โดยคงหัวข้อ Pallet เมื่อสถานีมีช่องแบบนั้น */
.haipick-lights[b-nci1zvxdi2]  .ptl-section-title:has(.fa-lightbulb) { display: none; }

.haipick-lights[b-nci1zvxdi2]  .ptl-row {
    flex: 1 0 76px;
    height: 76px;
    min-height: 0;
    gap: 8px;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-row > .w-100 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-row-number {
    width: 48px;
    flex-basis: 48px;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-row-number h2 {
    transform: none;
    font-size: 24px;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgb(32 68 112 / 4%);
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot > .d-flex:first-child {
    min-height: 17px;
    font-size: 11px;
    font-weight: 750;
    color: #142d55;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot > .d-flex:first-child > .justify-content-end {
    position: absolute;
    top: 7px;
    right: 8px;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot h2,
.haipick-lights[b-nci1zvxdi2]  .ptl-slot h2.text-danger { font-size: 25px; line-height: 1; }
.haipick-lights[b-nci1zvxdi2]  .ptl-slot .mt-2 { margin-top: 2px !important; font-size: 12px; font-weight: 500; line-height: 1.2; }
.haipick-lights[b-nci1zvxdi2]  .ptl-slot .text-center > span { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* เปลี่ยนเฉพาะสีแสดงผลของสถานะเดิม ไม่เพิ่มหรือเปลี่ยนเงื่อนไขสถานะ */
.haipick-compact .haipick-lights[b-nci1zvxdi2]  .ptl-slot.bg-primary {
    background: linear-gradient(135deg, #c7edff, #b5e4fa) !important;
    border-color: #63ceff !important;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot.bg-secondary,
.haipick-lights[b-nci1zvxdi2]  .ptl-slot.bg-dark {
    background: #eaf0f7 !important;
    border-color: #dde7f2 !important;
    color: #142d55 !important;
}

.haipick-lights[b-nci1zvxdi2]  .ptl-slot .btn.text-danger {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0 !important;
    border: 1px solid #c6e4f4 !important;
    border-radius: 6px !important;
    background: #e5f5ff !important;
    box-shadow: 0 3px 7px rgb(32 68 112 / 13%);
    font-size: 13px;
}

@media (max-width: 1199px) and (min-width: 901px) {
    .haipick-item-content[b-nci1zvxdi2] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-nci1zvxdi2] { border-left: 0; border-top: 1px solid #e5edf6; }
}

@media (max-width: 900px) {
    .haipick-columns[b-nci1zvxdi2] { grid-template-columns: minmax(0, 1fr); }
    .haipick-sidebar[b-nci1zvxdi2] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .haipick-compact[b-nci1zvxdi2] { padding: 10px !important; }
    .haipick-sidebar[b-nci1zvxdi2],
    .haipick-item-content[b-nci1zvxdi2] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-nci1zvxdi2] { border-left: 0; border-top: 1px solid #e5edf6; }
    .haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] { flex-basis: 60px; width: 60px; height: 90px; }
    .haipick-lights[b-nci1zvxdi2] { overflow-x: auto; }
    .haipick-lights[b-nci1zvxdi2]  .ptl-dashboard { min-width: 540px; }
}

/* ทุก step ใช้กรอบจอเดียวกัน แบ่งพื้นที่บน/ล่างแทนความสูงคงที่ของแต่ละสถานะ */
.haipick-page.haipick-fit[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: clamp(8px, 1.1vh, 14px);
}

.haipick-fit .haipick-workstation[b-nci1zvxdi2] {
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0;
}

.haipick-fit .haipick-header[b-nci1zvxdi2],
.haipick-fit .card-footer[b-nci1zvxdi2] {
    flex: 0 0 auto;
}

.haipick-fit .haipick-workstation > .haipick-header[b-nci1zvxdi2] {
    min-height: 58px;
    padding: 10px 16px !important;
}

.haipick-fit .haipick-step-body[b-nci1zvxdi2] {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(8px, 1vh, 12px) !important;
}

.haipick-fit .haipick-step-body > .haipick-step-frame[b-nci1zvxdi2] {
    display: grid !important;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.haipick-fit .haipick-step-body.is-cycle-count > .haipick-step-frame[b-nci1zvxdi2] {
    grid-template-rows: minmax(0, 1fr);
}

.haipick-fit .haipick-step-body .haipick-step-frame > .haipick-step-top[b-nci1zvxdi2] {
    display: grid !important;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    flex: none !important;
    gap: 12px;
    overflow: hidden;
}

.haipick-fit .haipick-step-body .haipick-step-top > *[b-nci1zvxdi2],
.haipick-fit .haipick-sidebar > *[b-nci1zvxdi2],
.haipick-fit .haipick-item-content > *[b-nci1zvxdi2] {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
}

.haipick-fit .haipick-step-top > .haipick-work-panel[b-nci1zvxdi2],
.haipick-fit .haipick-return-tote-panel[b-nci1zvxdi2],
.haipick-fit .haipick-return-products[b-nci1zvxdi2] {
    height: 100% !important;
    overflow: auto;
}

.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:first-child[b-nci1zvxdi2],
.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:nth-child(2)[b-nci1zvxdi2] {
    width: 100% !important;
    flex: none !important;
}

.haipick-fit .is-standby .haipick-step-top > .haipick-work-panel[b-nci1zvxdi2] {
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

.haipick-fit .haipick-empty-state[b-nci1zvxdi2] {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: clamp(10px, 2vh, 24px);
    align-self: center;
}

.haipick-fit .haipick-sidebar[b-nci1zvxdi2] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-sidebar > .haipick-task-banner[b-nci1zvxdi2] { flex: 0 0 auto; }
.haipick-fit .haipick-tote-card[b-nci1zvxdi2] { display: flex; flex-direction: column; flex: 1 1 0; }
.haipick-fit .haipick-tote-card > .haipick-section-heading[b-nci1zvxdi2],
.haipick-fit .haipick-tote-card > .haipick-pick-tote-heading[b-nci1zvxdi2] { flex: 0 0 auto; }
.haipick-fit .haipick-pick-tote-stage[b-nci1zvxdi2] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-source-tote[b-nci1zvxdi2] { max-height: 100%; }
.haipick-fit .haipick-item-card[b-nci1zvxdi2] { display: flex; flex-direction: column; }
.haipick-fit .haipick-pick-products-header[b-nci1zvxdi2] { flex: 0 0 auto; }
.haipick-fit .haipick-item-content[b-nci1zvxdi2] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-item-info[b-nci1zvxdi2] { height: 100%; overflow: auto; }
.haipick-fit .haipick-operations[b-nci1zvxdi2] { height: 100%; overflow: auto; }
.haipick-fit .haipick-serial-list[b-nci1zvxdi2] { min-height: 0; max-height: 100px; overflow: auto; }
.haipick-fit .haipick-return-tote-stage[b-nci1zvxdi2] { min-height: 0 !important; height: auto !important; overflow: hidden; }

.haipick-fit .haipick-step-frame > .haipick-step-lights[b-nci1zvxdi2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-dashboard,
.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-layout > .w-100,
.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-module-column {
    min-height: 0 !important;
    flex: 1 1 0;
    align-self: stretch;
}

.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-row {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
}

.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
}

.haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot > .h-100 {
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    justify-content: center !important;
}

/* จอเตี้ยลดเฉพาะระยะและองค์ประกอบตกแต่ง เพื่อคงปุ่มและข้อมูลที่ใช้ทำงาน */
@media (max-height: 820px) {
    .haipick-fit .haipick-workstation > .haipick-header[b-nci1zvxdi2] { min-height: 52px; padding: 7px 12px !important; }
    .haipick-fit .haipick-title h2[b-nci1zvxdi2] { font-size: 23px; }
    .haipick-fit .haipick-task-banner[b-nci1zvxdi2] { padding: 8px; gap: 3px 8px; }
    .haipick-fit .haipick-task-copy > span[b-nci1zvxdi2] { display: none; }
    .haipick-fit .haipick-section-heading[b-nci1zvxdi2] { margin-bottom: 3px; }
    .haipick-fit .haipick-pick-tote-heading[b-nci1zvxdi2] { padding-bottom: 6px; }
    .haipick-fit .haipick-tote-card[b-nci1zvxdi2] { padding: 8px; }
    .haipick-fit .haipick-source-partition[b-nci1zvxdi2] { padding: 3px; gap: 2px; }
    .haipick-fit .haipick-source-partition-name[b-nci1zvxdi2] { font-size: 11px; line-height: 1.1; }
    .haipick-fit .haipick-source-parts[b-nci1zvxdi2] { font-size: 10px; gap: 2px; line-height: 1.2; }
    .haipick-fit .haipick-item-info[b-nci1zvxdi2] { padding: 8px; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] { width: 54px; flex-basis: 54px; height: 70px; }
    .haipick-fit .haipick-item-info table td[b-nci1zvxdi2] { padding: 5px; }
    .haipick-fit .haipick-operations[b-nci1zvxdi2] { padding: 8px; gap: 8px; }
    .haipick-fit .haipick-scan-panel > .card[b-nci1zvxdi2] { padding: 8px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-nci1zvxdi2] { padding: 6px 8px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-nci1zvxdi2] { font-size: 28px; }
    .haipick-fit .haipick-lights-header[b-nci1zvxdi2] { padding: 6px 10px; }
    .haipick-fit .haipick-lights-icon[b-nci1zvxdi2] { width: 26px; height: 26px; flex-basis: 26px; background-size: 22px; }
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-dashboard { padding: 6px 8px; }
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot { padding: 4px 7px; }
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot > .d-flex:first-child { min-height: 12px; font-size: 10px; }
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot h2,
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot h2.text-danger { font-size: 18px; line-height: 1; }
    .haipick-fit .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot .mt-2 { font-size: 10px; margin-top: 1px !important; }
}

@media (max-width: 1199px) {
    .haipick-fit .haipick-item-content[b-nci1zvxdi2] { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .haipick-fit .haipick-step-top[b-nci1zvxdi2] { gap: 8px !important; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] { display: none; }
    .haipick-fit .haipick-lights-legend[b-nci1zvxdi2] { gap: 6px 10px; font-size: 9px; }
}

/* แยก Serial ไว้เต็มความกว้างใต้ข้อมูลสินค้า โดยไม่ดันช่องสแกนและ P2L ออกนอกจอ */
.haipick-fit .is-pick > .haipick-step-frame:has(.haipick-serial-section)[b-nci1zvxdi2] {
    grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section)[b-nci1zvxdi2] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    container: haipick-serial-card / size;
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-nci1zvxdi2] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-nci1zvxdi2] { padding: 6px 4px; font-size: 12px; line-height: 1.35; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] { width: 64px; flex-basis: 64px; height: 90px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-nci1zvxdi2] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-nci1zvxdi2] { gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-nci1zvxdi2] { min-width: 0; overflow-wrap: anywhere; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading > .badge[b-nci1zvxdi2] { flex: 0 0 auto; }

.haipick-serial-section[b-nci1zvxdi2] {
    --serial-row-height: 30px;
    --serial-gap: 6px;
    --serial-visible-rows: 3;
    min-width: 0;
    min-height: 0;
    margin: 0 12px 10px;
    padding: 8px;
    border: 1px solid #b8d0ff;
    border-radius: 10px;
    background: #f8fbff;
}

.haipick-serial-heading[b-nci1zvxdi2] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
    color: #1659dc;
    font-size: 13px;
}

.haipick-serial-heading > i[b-nci1zvxdi2] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #e8f0ff;
}

.haipick-serial-progress[b-nci1zvxdi2] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edf7;
    color: #314568;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.haipick-fit .haipick-serial-list.haipick-serial-grid[b-nci1zvxdi2] {
    /* ให้ความยาวข้อความจริงกำหนดจำนวนต่อแถว แล้วกระจายพื้นที่ที่เหลือให้เต็ม */
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--serial-gap);
    height: calc(var(--serial-visible-rows) * var(--serial-row-height) + (var(--serial-visible-rows) - 1) * var(--serial-gap));
    max-height: none;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #86adff #edf3fc;
    overscroll-behavior: contain;
}

.haipick-serial-grid:focus-visible[b-nci1zvxdi2] { outline: 2px solid #2b6af4; outline-offset: 2px; }

.haipick-serial-chip[b-nci1zvxdi2] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: min(100%, 9rem);
    max-width: 100%;
    height: var(--serial-row-height);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #244575;
    background: #eaf0ff;
    font-size: 12px;
    line-height: 1.2;
}

.haipick-serial-chip > span:last-child[b-nci1zvxdi2] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haipick-serial-marker[b-nci1zvxdi2] { flex: 0 0 auto; font-size: 11px; }
.haipick-serial-chip.is-scanned[b-nci1zvxdi2] { color: #087447; border-color: #b8e6d0; background: #e4f7ed; font-weight: 650; }

/* อิงความสูงการ์ดจริง: แสดงสามแถวเมื่อพอ และสองแถวเมื่อจอ/กรอบงานเตี้ย */
@container haipick-serial-card (max-height: 410px) {
    .haipick-serial-section[b-nci1zvxdi2] { --serial-visible-rows: 2; --serial-row-height: 26px; --serial-gap: 4px; margin: 0 8px 8px; padding: 6px; }
    .haipick-serial-heading[b-nci1zvxdi2] { min-height: 20px; margin-bottom: 4px; font-size: 12px; }
    .haipick-serial-heading > i[b-nci1zvxdi2] { width: 20px; height: 20px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-nci1zvxdi2] { padding: 6px 8px; gap: 8px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-nci1zvxdi2] { padding: 3px 4px; font-size: 11px; line-height: 1.3; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-nci1zvxdi2] { display: none; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-nci1zvxdi2] { padding: 6px 8px; gap: 6px; }
    .haipick-scan-panel > .card[b-nci1zvxdi2] { padding: 8px !important; }
    .haipick-scan-panel > .card > .mb-2[b-nci1zvxdi2] { margin-bottom: 6px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-nci1zvxdi2] { padding: 5px 6px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-nci1zvxdi2] { font-size: 26px; }
    .haipick-quantity-label[b-nci1zvxdi2] { gap: 4px; font-size: 10px; }
    .haipick-quantity-label i[b-nci1zvxdi2] { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
    .haipick-serial-chip[b-nci1zvxdi2] { padding: 2px 5px; font-size: 11px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-nci1zvxdi2] { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-nci1zvxdi2] { overflow: hidden; text-overflow: ellipsis; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card[b-nci1zvxdi2] { padding: 6px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card > .mb-2[b-nci1zvxdi2] { margin-bottom: 4px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-nci1zvxdi2]  .form-control,
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-nci1zvxdi2]  .haipick-scan-button { height: 34px; min-height: 34px; font-size: 12px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid > .card[b-nci1zvxdi2] { padding: 3px 5px !important; gap: 2px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid .h1[b-nci1zvxdi2] { font-size: 22px; line-height: 1; }
}

@media (max-height: 820px) {
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot { padding: 2px 6px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot > .d-flex:first-child { min-height: 10px; font-size: 9px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot h2,
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot h2.text-danger { font-size: 14px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-nci1zvxdi2]  .ptl-slot .mt-2 { font-size: 9px; line-height: 1; }
}
/* _content/WMS.UI/Pages/Workstation/Picking/PickingStationSelector.razor.rz.scp.css */
.pick-select-page[b-d8nm4kege2]{height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;padding:22px 20px;background:#f4f7fb;color:#10213e;overflow:hidden}.pick-select-loading[b-d8nm4kege2]{height:100%;display:grid;place-content:center;justify-items:center;text-align:center}.pick-select-loading>span[b-d8nm4kege2]{width:54px;height:54px;display:grid;place-items:center;margin-bottom:12px;border-radius:15px;background:#e5f1ff;color:#1268d3;font-size:22px}.pick-select-loading strong[b-d8nm4kege2]{font-size:16px}.pick-select-loading small[b-d8nm4kege2]{margin-top:4px;color:#74849a}.pick-select-header[b-d8nm4kege2]{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex:0 0 auto}.pick-select-eyebrow[b-d8nm4kege2]{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#0967d8}.pick-select-header h1[b-d8nm4kege2]{margin:2px 0;font-size:28px}.pick-select-header p[b-d8nm4kege2]{margin:0;color:#718198;font-size:11px}.pick-select-refresh[b-d8nm4kege2]{padding:10px 14px;border:1px solid #d0dcea;border-radius:9px;background:#fff;color:#1c3a5e;font-weight:700;cursor:pointer}.pick-select-summary[b-d8nm4kege2]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:0 0 auto}.pick-select-summary article[b-d8nm4kege2]{height:74px;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #d7e2ef;border-radius:12px;background:#fff}.pick-select-summary article>span[b-d8nm4kege2]{width:44px;height:44px;display:grid;place-items:center;border-radius:11px;font-size:17px}.pick-select-summary .blue[b-d8nm4kege2]{color:#1264cf;background:#e8f2ff}.pick-select-summary .green[b-d8nm4kege2]{color:#008c61;background:#e1f7ed}.pick-select-summary .orange[b-d8nm4kege2]{color:#bd7200;background:#fff1d8}.pick-select-summary article div[b-d8nm4kege2]{min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px}.pick-select-summary small[b-d8nm4kege2],.pick-select-summary em[b-d8nm4kege2]{font-size:10px;color:#718099;font-style:normal}.pick-select-summary strong[b-d8nm4kege2]{grid-row:1/3;grid-column:2;font-size:22px}.pick-select-summary em[b-d8nm4kege2]{grid-column:1}.pick-select-workspace[b-d8nm4kege2]{min-height:0;flex:1;display:flex;flex-direction:column;padding:12px;border:1px solid #d5e1ef;border-radius:13px;background:#fff;overflow:hidden}.pick-select-toolbar[b-d8nm4kege2]{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:12px}.pick-select-toolbar h2[b-d8nm4kege2]{margin:0;font-size:17px}.pick-select-toolbar p[b-d8nm4kege2]{margin:2px 0 0;color:#718099;font-size:10px}.pick-select-toolbar label[b-d8nm4kege2]{width:300px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #cfdaea;border-radius:9px;color:#6a7890}.pick-select-toolbar input[b-d8nm4kege2]{width:100%;padding:9px 0;border:0;outline:0}.pick-select-message[b-d8nm4kege2]{display:flex;align-items:center;gap:7px;margin-bottom:10px;padding:9px 11px;border-radius:8px;background:#fff4da;color:#8b5a00;font-size:10px}.pick-select-grid[b-d8nm4kege2]{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:10px;overflow-x:hidden;overflow-y:auto;padding:2px 5px 12px 2px}.pick-station-card[b-d8nm4kege2]{min-height:max-content;align-self:start;overflow:hidden;border:1px solid #d4e0ee;border-radius:11px;background:#fff;box-shadow:0 3px 9px #17375d0b}.pick-station-card.disabled[b-d8nm4kege2]{opacity:.68}.pick-station-card>header[b-d8nm4kege2]{display:flex;align-items:center;gap:9px;padding:11px;border-bottom:1px solid #e1e8f1}.pick-station-card>header>span[b-d8nm4kege2]{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eaf3ff;color:#146ad5}.pick-station-card>header div[b-d8nm4kege2]{min-width:0}.pick-station-card>header small[b-d8nm4kege2]{display:block;color:#1670d8;font-size:8px;font-weight:800;letter-spacing:1px}.pick-station-card h3[b-d8nm4kege2]{margin:1px 0 0;font-size:15px}.pick-station-card>header em[b-d8nm4kege2]{display:flex;align-items:center;gap:4px;margin-left:auto;padding:4px 7px;border:1px solid;border-radius:14px;font-size:9px;font-style:normal;font-weight:700;white-space:nowrap}.pick-station-card>header em.ready[b-d8nm4kege2]{color:#087b57;background:#e4f7ee;border-color:#b5e8d1}.pick-station-card>header em.offline[b-d8nm4kege2]{color:#a13d3d;background:#fff0f0;border-color:#f1c5c5}.pick-station-runtime[b-d8nm4kege2]{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 11px}.pick-station-runtime>div[b-d8nm4kege2]{min-width:0;padding:8px;border-radius:8px;background:#f5f8fc}.pick-station-runtime small[b-d8nm4kege2],.pick-station-client small[b-d8nm4kege2]{display:block;color:#78879a;font-size:8px}.pick-station-runtime strong[b-d8nm4kege2],.pick-station-client strong[b-d8nm4kege2]{display:block;margin-top:3px;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.pick-station-client[b-d8nm4kege2]{display:flex;align-items:center;gap:8px;margin:0 11px 10px;padding:8px;border-radius:8px;background:#f1f5fa;color:#1768cd}.pick-station-client div[b-d8nm4kege2]{min-width:0}.pick-station-card>footer[b-d8nm4kege2]{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-top:1px solid #e1e8f1;background:#fafcff}.pick-station-card>footer>span[b-d8nm4kege2]{color:#75869b;font-size:8px}.pick-station-card>footer button[b-d8nm4kege2]{padding:7px 9px;border:1px solid #1769d8;border-radius:8px;background:#1769d8;color:#fff;font-size:9px;font-weight:800;cursor:pointer}.pick-station-card>footer button:disabled[b-d8nm4kege2]{border-color:#bcc8d6;background:#d4dce6;cursor:not-allowed}.pick-select-empty[b-d8nm4kege2]{height:190px;display:grid;place-content:center;justify-items:center;color:#8290a3}.pick-select-empty>span[b-d8nm4kege2]{width:48px;height:48px;display:grid;place-items:center;margin-bottom:8px;border-radius:13px;background:#edf2f8;font-size:18px}.pick-select-empty small[b-d8nm4kege2]{margin-top:3px}@media(max-width:1550px){.pick-select-grid[b-d8nm4kege2]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1100px){.pick-select-grid[b-d8nm4kege2]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:780px){.pick-select-page[b-d8nm4kege2]{height:auto;min-height:100%;overflow:auto}.pick-select-summary[b-d8nm4kege2]{grid-template-columns:1fr}.pick-select-toolbar[b-d8nm4kege2]{align-items:stretch;flex-direction:column}.pick-select-toolbar label[b-d8nm4kege2]{width:auto}.pick-select-grid[b-d8nm4kege2]{grid-template-columns:1fr;overflow:visible}}
/* _content/WMS.UI/Pages/Workstation/Picking/PtlDetailDialog.razor.rz.scp.css */
.ptl-dashboard[b-9hd881zwpk] {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.ptl-layout[b-9hd881zwpk] {
    min-width: 0;
    gap: 12px;
    align-items: stretch !important;
}

.ptl-pallet-column[b-9hd881zwpk] {
    width: 24%;
    min-width: 210px;
    gap: 8px;
}

.ptl-module-column[b-9hd881zwpk] {
    width: 76%;
    min-width: 0;
    gap: 8px;
    margin-left: 0 !important;
}

.ptl-section-title[b-9hd881zwpk] {
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
}

.ptl-section-title i[b-9hd881zwpk] {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
}

.ptl-row[b-9hd881zwpk] {
    height: 92px;
    min-width: 0;
    gap: 7px;
}

.ptl-row-number[b-9hd881zwpk] {
    width: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    color: #fff;
    background: #334155;
}

.ptl-row-number h2[b-9hd881zwpk] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.ptl-row > .w-100[b-9hd881zwpk] {
    min-width: 0;
    gap: 7px;
}

.ptl-slot[b-9hd881zwpk] {
    min-width: 0;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 4%);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ptl-slot:hover[b-9hd881zwpk] {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgb(37 99 235 / 12%);
    transform: translateY(-1px);
}

.ptl-slot > .d-flex:first-child[b-9hd881zwpk] {
    min-height: 20px;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}

.ptl-slot h2[b-9hd881zwpk] {
    font-size: 23px;
    font-weight: 850;
    line-height: 1;
}

.ptl-slot .mt-2[b-9hd881zwpk] {
    margin-top: 3px !important;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptl-slot .icon-pick-p2l[b-9hd881zwpk] {
    font-size: 25px !important;
}

.ptl-slot .icon-barcode[b-9hd881zwpk] {
    font-size: 20px !important;
}

.ptl-pallet-slot[b-9hd881zwpk] {
    min-height: 92px;
}

.ptl-slot.bg-secondary[b-9hd881zwpk],
.ptl-slot.bg-dark[b-9hd881zwpk] {
    color: #475569 !important;
    background-color: #f1f5f9 !important;
}

.ptl-slot.bg-primary[b-9hd881zwpk] {
    border-color: #3b82f6 !important;
    color: #fff !important;
    background-color: #2563eb !important;
}

.ptl-slot.bg-success[b-9hd881zwpk] {
    border-color: #22c55e !important;
    color: #fff !important;
    background-color: #16a34a !important;
}

.ptl-slot.bg-info[b-9hd881zwpk] {
    border-color: #06b6d4 !important;
}

.ptl-dashboard[b-9hd881zwpk]  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    line-height: 1;
}

@media (max-width: 1000px) {
    .ptl-layout[b-9hd881zwpk] {
        flex-direction: column !important;
    }

    .ptl-pallet-column[b-9hd881zwpk],
    .ptl-module-column[b-9hd881zwpk] {
        width: 100%;
        min-width: 0;
    }

    .ptl-pallet-column[b-9hd881zwpk] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .ptl-pallet-column .ptl-section-title[b-9hd881zwpk] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .ptl-dashboard[b-9hd881zwpk] { padding: 8px; }
    .ptl-pallet-column[b-9hd881zwpk] { grid-template-columns: 1fr; }

    .ptl-row[b-9hd881zwpk] {
        height: auto;
        align-items: stretch;
    }

    .ptl-row > .w-100[b-9hd881zwpk] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(125px, 1fr));
    }

    .ptl-slot[b-9hd881zwpk] {
        min-height: 88px;
    }
}


/* Populated PTL state */
.ptl-section-title[b-9hd881zwpk] {
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    color: #2563eb !important;
    background: transparent !important;
    letter-spacing: .12em;
}

.ptl-section-title[b-9hd881zwpk]::before,
.ptl-section-title[b-9hd881zwpk]::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e4eaf2;
}

.ptl-section-title i[b-9hd881zwpk] {
    color: #2563eb;
    background: #eaf2ff;
}

.ptl-row-number[b-9hd881zwpk] {
    color: #fff !important;
    background: #2563eb !important;
    box-shadow: 0 3px 8px rgb(37 99 235 / 18%);
}

.ptl-slot[b-9hd881zwpk] {
    background-clip: padding-box;
}

.ptl-slot.bg-primary[b-9hd881zwpk],
.ptl-slot.bg-primary.bg-opacity-50[b-9hd881zwpk] {
    border-color: #38bdf8 !important;
    color: #0c4a6e !important;
    background-color: #bae6fd !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-success.bg-opacity-50[b-9hd881zwpk] {
    border-color: #86efac !important;
    color: #14532d !important;
    background-color: #dcfce7 !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-info[b-9hd881zwpk],
.ptl-slot.bg-info.bg-opacity-100[b-9hd881zwpk] {
    border-color: #22d3ee !important;
    color: #164e63 !important;
    background-color: #cffafe !important;
    --bs-bg-opacity: 1;
}

.ptl-slot .text-danger[b-9hd881zwpk] {
    color: #ef4444 !important;
}

.ptl-slot h2.text-danger[b-9hd881zwpk] {
    font-size: 25px;
    text-shadow: none;
}

.ptl-slot > .h-100[b-9hd881zwpk] {
    min-height: 0;
}

@media (min-width: 1001px) {
    .ptl-pallet-column[b-9hd881zwpk] {
        flex: 0 0 24%;
    }

    .ptl-module-column[b-9hd881zwpk] {
        flex: 1 1 76%;
    }
}


/* PTL dialogs */
.ptl-modal[b-9hd881zwpk]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 25%);
}

.ptl-modal[b-9hd881zwpk]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.ptl-modal[b-9hd881zwpk]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.ptl-modal[b-9hd881zwpk]  .modal-body {
    padding: 0;
    background: #fff;
}

.ptl-modal[b-9hd881zwpk]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #f8fafc;
}

.ptl-modal[b-9hd881zwpk]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

.ptl-popup-body[b-9hd881zwpk] {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ptl-popup-icon[b-9hd881zwpk] {
    width: 58px;
    height: 58px;
    margin-bottom: 11px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 22px;
}

.ptl-popup-icon.is-warning[b-9hd881zwpk] {
    color: #d97706;
    background: #fef3c7;
}

.ptl-popup-eyebrow[b-9hd881zwpk] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.ptl-popup-body h3[b-9hd881zwpk] {
    margin: 3px 0 4px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.ptl-popup-body p[b-9hd881zwpk] {
    margin: 0;
    color: #64748b;
    font-size: 11px;
}

.ptl-popup-code[b-9hd881zwpk] {
    min-width: 170px;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    color: #1d4ed8;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 800;
}

.ptl-scan-field[b-9hd881zwpk] {
    width: 100%;
    margin-top: 15px;
}

.ptl-scan-field[b-9hd881zwpk]  .form-control {
    min-height: 44px;
    border: 1px solid #93c5fd;
    border-radius: 9px !important;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 8%);
}

.ptl-detail-modal[b-9hd881zwpk]  .modal-dialog {
    max-width: min(1200px, calc(100vw - 32px));
}

.ptl-detail-modal[b-9hd881zwpk]  .tableInModal {
    max-height: 70vh;
    padding: 12px;
    overflow: auto;
    background: #f8fafc;
}

.ptl-detail-modal[b-9hd881zwpk]  .table-container {
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
}

/* รวมรายละเอียดที่เกี่ยวข้องในแถวเดียวเพื่ออ่านงานหยิบโดยไม่ต้องเลื่อนหลายคอลัมน์ */
.ptl-detail-modal[b-9hd881zwpk]  .tableInModal {
    padding: 10px;
    background: var(--bs-body-bg);
}

.ptl-detail-modal[b-9hd881zwpk]  table {
    table-layout: fixed;
}

.ptl-detail-modal[b-9hd881zwpk]  thead th {
    padding: 10px 8px;
    font-size: 12px !important;
    line-height: 1.4;
    text-transform: none;
}

.ptl-detail-modal[b-9hd881zwpk]  tbody td {
    padding: 10px 8px;
    font-size: 14px !important;
    line-height: 1.4;
    vertical-align: middle;
}

.ptl-detail-product[b-9hd881zwpk] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ptl-detail-product > strong[b-9hd881zwpk] {
    color: var(--bs-primary);
    font-size: 14px;
}

.ptl-detail-product small[b-9hd881zwpk],
.ptl-detail-quantity small[b-9hd881zwpk] {
    color: var(--bs-secondary);
    font-size: 12px;
}

.ptl-detail-quantity[b-9hd881zwpk] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.ptl-detail-quantity > strong[b-9hd881zwpk] {
    font-size: 17px;
    font-weight: 600;
}

.ptl-detail-modal[b-9hd881zwpk]  tbody .badge {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 500;
}

/* ยกเลิกความสูงแถวและตำแหน่ง absolute จากตารางส่วนกลางเฉพาะ popup ที่มีข้อมูลหลายบรรทัด */
.ptl-detail-modal.ptl-modal[b-9hd881zwpk]  .table.table tbody > tr {
    height: auto !important;
}

.ptl-detail-modal.ptl-modal[b-9hd881zwpk]  .table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
    line-height: 1.4 !important;
    vertical-align: middle;
}

.ptl-detail-modal.ptl-modal[b-9hd881zwpk]  .table.table tbody > tr > td > .table-cell {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.ptl-detail-product > small[b-9hd881zwpk],
.ptl-detail-quantity > small[b-9hd881zwpk] {
    display: block;
    line-height: 1.4;
    color: #64748b;
}

/* ใช้ element ของ component เป็นจุดอ้างอิง เพื่อให้ scoped CSS เข้าถึง Modal/Table ลูกได้ */
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) {
    width: calc(100vw - 96px);
    max-width: 1200px;
    margin: 24px auto;
    min-height: calc(100% - 48px);
}

.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-content {
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid #b8d6f8;
    border-radius: 16px;
    background: #f8fbff;
    box-shadow: 0 24px 70px rgb(8 30 63 / 32%);
}

.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header {
    min-height: 64px;
    padding: 14px 22px;
    border: 0;
    background: linear-gradient(115deg, #1258ac, #1769c6);
}

.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-title { color: #fff; font-size: clamp(18px, 1.6vw, 24px); font-weight: 750; line-height: 1.3; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header-buttons { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header-buttons .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #ffffff70 !important;
    border-radius: 10px !important;
    color: #fff !important;
    background-color: #ffffff12 !important;
    box-shadow: none !important;
    opacity: 1;
    font-size: 19px;
}
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header .btn-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header-buttons .btn:hover { background-color: #ffffff28 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-body { padding: 0; overflow: auto; background: #f8fbff; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-footer { flex: 0 0 auto; padding: 10px 18px 14px; border: 0; background: #f8fbff; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #ccd6e3 !important;
    border-radius: 9px !important;
    color: #20334f !important;
    background: #f7f9fc !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 3px 3px rgb(23 45 78 / 12%);
}

.ptl-picking-detail[b-9hd881zwpk] { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 0; }
.ptl-detail-summary[b-9hd881zwpk] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ptl-summary-card[b-9hd881zwpk] { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #d8e7fa; border-radius: 12px; background: #fff; }
.ptl-summary-card > div[b-9hd881zwpk] { min-width: 0; }
.ptl-summary-icon[b-9hd881zwpk] { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 16px; color: #0870cb; background: #e7f3ff; font-size: 26px; }
.ptl-summary-icon.is-picked[b-9hd881zwpk] { color: #06a577; background: #e0f7ef; }
.ptl-summary-label[b-9hd881zwpk] { display: block; margin-bottom: 4px; color: #596e8f; font-size: 15px; line-height: 1.4; }
.ptl-summary-value[b-9hd881zwpk] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: #142c51; font-size: 30px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ptl-summary-value small[b-9hd881zwpk] { color: #647894; font-size: 14px; font-weight: 400; }
.ptl-summary-status[b-9hd881zwpk] { display: inline-flex; justify-content: center; min-width: 86px; padding: 4px 12px; border-radius: 999px; color: #008dce; background: #bdefff; font-size: 13px; font-weight: 700; }
.ptl-summary-status.is-complete[b-9hd881zwpk] { color: #06865d; background: #dcf6e9; }
.ptl-summary-status.is-picking[b-9hd881zwpk] { color: #1757c8; background: #e1ecff; }
.ptl-summary-status.is-empty[b-9hd881zwpk] { color: #64748b; background: #edf1f6; }
.ptl-detail-table[b-9hd881zwpk] { min-width: 0; }

.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-container {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 12px;
    background: #fff;
}
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-toolbar { min-height: 48px; padding: 8px; background: #fff; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-toolbar .btn { min-height: 34px; padding: 6px 12px; border: 1px solid #cbd5e2; border-radius: 8px !important; color: #223650; background: #f5f7fa; font-size: 13px; font-weight: 700; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-fixed { height: auto !important; min-height: 0; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-fixed-body { height: auto !important; max-height: min(46dvh, 480px); overflow-y: auto !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table table { width: 100%; margin: 0; table-layout: fixed; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table thead th { height: auto !important; padding: 12px 10px !important; border-color: #ffffff20; color: #fff; background: linear-gradient(115deg, #125bb0, #1a67bf); font-size: 13px !important; line-height: 1.4 !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table thead th .table-cell { height: auto !important; min-height: 0 !important; color: #fff; font-size: 13px !important; font-weight: 700; line-height: 1.4 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody tr { height: auto !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td { height: auto !important; padding: 12px 10px !important; border-right: 1px solid #e7edf6; border-bottom: 1px solid #e7edf6; color: #415779; background: #fff; font-size: 14px !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td > .table-cell { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
.ptl-detail-table .ptl-detail-product[b-9hd881zwpk] { gap: 4px; font-size: 14px; line-height: 1.5; }
.ptl-detail-table .ptl-detail-product > strong[b-9hd881zwpk] { color: #007bbd; font-size: 18px; font-weight: 700; }
.ptl-detail-table .ptl-detail-product small[b-9hd881zwpk] { color: #8b9bb5; font-size: 13px; }
.ptl-detail-table .ptl-detail-quantity[b-9hd881zwpk] { align-items: center; }
.ptl-detail-table .ptl-detail-quantity strong[b-9hd881zwpk] { color: #3c5273; font-size: 24px; font-weight: 750; }
.ptl-detail-table .ptl-detail-quantity.text-primary strong[b-9hd881zwpk] { color: #0084ce; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody .badge { display: inline-flex; justify-content: center; min-width: 72px; padding: 6px 12px; border-radius: 999px; font-size: 13px !important; font-weight: 650; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .badge.bg-info { color: #008ac4 !important; background: #b7edfc !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-pagination { min-height: 46px; padding: 8px 10px; color: #526682; font-size: 13px; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-pagination .form-select { height: 36px; border-color: #d4e2f4; border-radius: 8px; font-size: 13px; }

/* คงขนาดตัวอักษรของ popup แม้ theme ส่วนกลางบังคับตัวอักษรในตารางเป็น 11px */
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .ptl-detail-product,
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .ptl-detail-product > span { font-size: 14px !important; line-height: 1.5 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .ptl-detail-product > strong { font-size: 17px !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .ptl-detail-product > small { font-size: 14px !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .ptl-detail-quantity > strong { font-size: 22px !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td > .table-cell { font-size: 14px !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table tbody td .badge { font-size: 13px !important; font-weight: 650 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-toolbar .btn,
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-footer .btn { font-size: 13px !important; font-weight: 700 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table thead th,
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table thead th .table-cell { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 14px !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table thead th .table-cell { padding: 0 !important; }
.ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-dialog.modal-fullscreen .modal-content { max-height: 100dvh; border-radius: 0; }

@media (max-width: 1100px) {
    .ptl-summary-card[b-9hd881zwpk] { gap: 10px; padding: 16px 12px; }
    .ptl-summary-icon[b-9hd881zwpk] { width: 36px; height: 36px; flex-basis: 36px; border-radius: 14px; font-size: 23px; }
    .ptl-summary-label[b-9hd881zwpk] { font-size: 13px; }
    .ptl-summary-value[b-9hd881zwpk] { font-size: 28px; gap: 8px; }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-fixed-body,
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-fixed-header { overflow-x: auto !important; }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table table { min-width: 1000px; }
}

@media (max-width: 720px) {
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) { width: calc(100vw - 20px); margin: 10px auto; min-height: calc(100% - 20px); }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-content { max-height: calc(100dvh - 20px); }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header { min-height: 60px; padding: 12px 16px; }
    .ptl-picking-detail[b-9hd881zwpk] { padding: 12px 12px 0; gap: 12px; }
    .ptl-detail-summary[b-9hd881zwpk] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ptl-summary-value[b-9hd881zwpk] { font-size: 24px; }
    .ptl-summary-status[b-9hd881zwpk] { min-width: 0; font-size: 13px; }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-footer { padding: 12px; }
}

@media (max-height: 740px) {
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-modal .modal-header { min-height: 58px; padding: 12px 20px; }
    .ptl-picking-detail[b-9hd881zwpk] { padding-top: 14px; gap: 12px; }
    .ptl-summary-card[b-9hd881zwpk] { padding-top: 14px; padding-bottom: 14px; }
    .ptl-picking-detail-scope[b-9hd881zwpk]  .ptl-detail-table .table-fixed-body { max-height: 34dvh; }
}
/* _content/WMS.UI/Pages/Workstation/Putaway/Putaway.razor.rz.scp.css */
.putaway-page[b-acomw6ds8m] {
    --blue: #1269d3;
    --navy: #0c294d;
    --muted: #71839a;
    min-height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    background: #f5f8fc;
    color: var(--navy)
}

.putaway-header[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .putaway-header span[b-acomw6ds8m], .stage-intro > small[b-acomw6ds8m] {
        color: #176bd2;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 1.3px
    }

    .putaway-header h1[b-acomw6ds8m] {
        margin: 3px 0 1px;
        font-size: 25px
    }

    .putaway-header p[b-acomw6ds8m] {
        margin: 0;
        color: var(--muted);
        font-size: 11px
    }

    .putaway-header button[b-acomw6ds8m], .pallet-heading button[b-acomw6ds8m] {
        min-height: 36px;
        padding: 0 13px;
        border: 1px solid #c9d9ea;
        border-radius: 8px;
        color: #244567;
        background: #fff;
        font-size: 10px;
        font-weight: 800
    }

/* ส่วนทำงานยืดเต็มจอที่เหลือ */
.putaway-workspace[b-acomw6ds8m] {
    flex: 1;
    display: flex
}

.putaway-main[b-acomw6ds8m] {
    border: 1px solid #d8e4f0;
    border-radius: 12px;
    background: #fff
}

.putaway-main[b-acomw6ds8m] {
    flex: 1;
    min-width: 0;
    min-height: 475px;
    padding: 20px;
    display: flex;
    flex-direction: column
}

/* ขั้นสแกน (Station / Pallet): ช่องสแกนอยู่กลางกรอบขาวพอดี ไอคอนและหัวข้ออยู่เหนือช่อง */
.scan-stage[b-acomw6ds8m] {
    flex: 1;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    text-align: center
}

.stage-intro[b-acomw6ds8m] {
    align-self: end
}

.stage-icon[b-acomw6ds8m] {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    place-items: center;
    border-radius: 15px;
    color: var(--blue);
    background: #e7f1ff;
    font-size: 22px
}

.scan-stage h2[b-acomw6ds8m] {
    margin: 5px 0;
    font-size: 21px
}

.scan-stage p[b-acomw6ds8m] {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 11px
}

.scan-box[b-acomw6ds8m] {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    border: 2px solid #a9caee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18,105,211,.08)
}

    .scan-box > i[b-acomw6ds8m] {
        color: var(--blue)
    }

    .scan-box input[b-acomw6ds8m] {
        height: 46px;
        border: 0;
        outline: 0;
        font-size: 12px
    }

    .scan-box button[b-acomw6ds8m] {
        height: 38px;
        margin-right: 4px;
        padding: 0 18px;
        border: 0;
        border-radius: 7px;
        color: #fff;
        background: var(--blue);
        font-size: 10px;
        font-weight: 800
    }

.pallet-heading[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4ebf3
}

    .pallet-heading > span[b-acomw6ds8m] {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 12px;
        color: var(--blue);
        background: #e7f1ff
    }

    .pallet-heading div[b-acomw6ds8m] {
        flex: 1
    }

    .pallet-heading small[b-acomw6ds8m] {
        color: var(--muted);
        font-size: 8px
    }

    .pallet-heading h2[b-acomw6ds8m] {
        margin: 2px 0;
        font-size: 19px
    }

    .pallet-heading p[b-acomw6ds8m] {
        margin: 0;
        color: var(--muted);
        font-size: 10px
    }

.destination-section[b-acomw6ds8m] {
    padding: 16px 0
}

.section-heading[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px
}

    .section-heading > span[b-acomw6ds8m] {
        display: grid;
        width: 27px;
        height: 27px;
        place-items: center;
        border-radius: 7px;
        color: #fff;
        background: var(--blue);
        font-size: 10px;
        font-weight: 800
    }

    .section-heading h3[b-acomw6ds8m], .wrap-section h3[b-acomw6ds8m] {
        margin: 0;
        font-size: 13px
    }

    .section-heading p[b-acomw6ds8m], .wrap-section p[b-acomw6ds8m] {
        margin: 1px 0 0;
        color: var(--muted);
        font-size: 9px
    }

.destination-grid[b-acomw6ds8m] {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 9px
}

    .destination-grid button[b-acomw6ds8m] {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 68px;
        padding: 11px;
        border: 1px solid #d5e1ed;
        border-radius: 10px;
        text-align: left;
        color: var(--navy);
        background: #fff
    }

        .destination-grid button > i:first-child[b-acomw6ds8m] {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border-radius: 9px;
            color: var(--blue);
            background: #e7f1ff
        }

        .destination-grid button span[b-acomw6ds8m] {
            display: flex;
            flex: 1;
            flex-direction: column
        }

        .destination-grid button strong[b-acomw6ds8m] {
            font-size: 12px
        }

        .destination-grid button small[b-acomw6ds8m] {
            color: var(--muted);
            font-size: 9px
        }

    .destination-grid .check[b-acomw6ds8m] {
        display: none;
        color: #0a9c66
    }

    .destination-grid button.selected[b-acomw6ds8m] {
        border-color: #69aaf1;
        background: #f0f7ff;
        box-shadow: 0 0 0 2px rgba(18,105,211,.1)
    }

        .destination-grid button.selected .check[b-acomw6ds8m] {
            display: block
        }

.wrap-section[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 14px;
    border: 1px solid #d7e5f2;
    border-radius: 10px;
    background: #f7faff
}

    .wrap-section > div[b-acomw6ds8m] {
        display: flex;
        align-items: center;
        gap: 9px
    }

        .wrap-section > div > span[b-acomw6ds8m] {
            display: grid;
            width: 35px;
            height: 35px;
            place-items: center;
            border-radius: 8px;
            color: #8b5b05;
            background: #fff0cf
        }

.switch-row[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px
}

    .switch-row input[b-acomw6ds8m] {
        position: absolute;
        opacity: 0
    }

    .switch-row span[b-acomw6ds8m] {
        width: 36px;
        height: 20px;
        padding: 2px;
        border-radius: 20px;
        background: #aab7c5
    }

        .switch-row span[b-acomw6ds8m]::after {
            content: "";
            display: block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #fff;
            transition: .15s
        }

    .switch-row input:checked + span[b-acomw6ds8m] {
        background: #0ba66c
    }

        .switch-row input:checked + span[b-acomw6ds8m]::after {
            transform: translateX(16px)
        }

/* รายการสินค้ายืดเติมที่ว่าง ปุ่มยืนยันจึงอยู่ล่างสุดของกรอบ */
.item-list[b-acomw6ds8m] {
    flex: 1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    border: 1px solid #dbe5ee;
    border-radius: 10px;
    overflow: hidden
}

    .item-list header[b-acomw6ds8m] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: #f5f8fb
    }

    .item-list h3[b-acomw6ds8m] {
        margin: 0;
        font-size: 11px
    }

    .item-list header span[b-acomw6ds8m] {
        font-size: 9px
    }

.item-row[b-acomw6ds8m] {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid #e7edf3
}

    .item-row > span[b-acomw6ds8m] {
        display: grid;
        width: 30px;
        height: 30px;
        place-items: center;
        border-radius: 7px;
        color: var(--blue);
        background: #edf5ff
    }

    .item-row div[b-acomw6ds8m] {
        display: flex;
        flex-direction: column
    }

    .item-row strong[b-acomw6ds8m], .item-row b[b-acomw6ds8m] {
        font-size: 10px
    }

    .item-row small[b-acomw6ds8m] {
        color: var(--muted);
        font-size: 8px
    }

.empty-pallet[b-acomw6ds8m] {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    color: var(--muted);
    font-size: 10px
}

    .empty-pallet i[b-acomw6ds8m] {
        margin-bottom: 6px;
        color: #b8c7d8;
        font-size: 54px
    }

    .empty-pallet strong[b-acomw6ds8m] {
        color: var(--navy);
        font-size: 18px
    }

.submit-putaway[b-acomw6ds8m] {
    width: 100%;
    height: 56px;
    margin-top: 14px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: #087f5b;
    font-size: 11px;
    font-weight: 900
}

    .submit-putaway:disabled[b-acomw6ds8m] {
        opacity: .5
    }

.putaway-message[b-acomw6ds8m] {
    display: flex;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    color: #1e5f9c;
    background: #e9f4ff;
    font-size: 10px
}

    .putaway-message.error[b-acomw6ds8m] {
        color: #a82626;
        background: #fff0f0
    }

.putaway-backdrop[b-acomw6ds8m] {
    position: fixed;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(12,27,48,.58);
    backdrop-filter: blur(2px)
}

.putaway-dialog[b-acomw6ds8m] {
    width: min(420px,100%);
    padding: 24px;
    text-align: center;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(7,27,55,.28)
}

.dialog-icon[b-acomw6ds8m] {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    place-items: center;
    border-radius: 14px;
    color: var(--blue);
    background: #e5f0ff;
    font-size: 20px
}

    .dialog-icon.success[b-acomw6ds8m] {
        color: #078653;
        background: #e1f6eb
    }

.putaway-dialog > small[b-acomw6ds8m] {
    color: #078653;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px
}

.putaway-dialog h2[b-acomw6ds8m] {
    margin: 4px 0;
    font-size: 19px
}

.putaway-dialog > p[b-acomw6ds8m] {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 10px
}

.putaway-dialog dl[b-acomw6ds8m] {
    margin: 0 0 16px;
    padding: 5px 13px;
    border-radius: 9px;
    background: #f6f9fc
}

    .putaway-dialog dl div[b-acomw6ds8m] {
        display: flex;
        justify-content: space-between;
        padding: 7px 0;
        border-bottom: 1px solid #e4ebf3
    }

        .putaway-dialog dl div:last-child[b-acomw6ds8m] {
            border: 0
        }

.putaway-dialog dt[b-acomw6ds8m] {
    color: var(--muted);
    font-size: 9px
}

.putaway-dialog dd[b-acomw6ds8m] {
    margin: 0;
    font-size: 10px;
    font-weight: 800
}

.dialog-actions[b-acomw6ds8m] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

    .dialog-actions.single[b-acomw6ds8m] {
        grid-template-columns: 1fr
    }

.success-pallet[b-acomw6ds8m] {
    display: flex;
    justify-content: space-between;
    padding: 11px;
    margin-bottom: 14px;
    border-radius: 8px;
    background: #eff8f4;
    font-size: 10px
}

    .success-pallet strong[b-acomw6ds8m] {
        color: #078653
    }

@media(max-width:900px) {
    .putaway-page[b-acomw6ds8m] {
        padding: 14px
    }
}

@media(max-width:600px) {
    .putaway-header[b-acomw6ds8m] {
        align-items: flex-start
    }

        .putaway-header h1[b-acomw6ds8m] {
            font-size: 21px
        }

    .destination-grid[b-acomw6ds8m] {
        grid-template-columns: 1fr
    }

    .wrap-section[b-acomw6ds8m] {
        align-items: flex-start;
        gap: 10px;
        flex-direction: column
    }

    .dialog-actions[b-acomw6ds8m] {
        grid-template-columns: 1fr
    }
}

/* Keep operational text legible on workstation screens without changing the compact layout. */
.putaway-header span[b-acomw6ds8m], .stage-intro > small[b-acomw6ds8m] { font-size: 11px }
.putaway-header p[b-acomw6ds8m], .scan-stage p[b-acomw6ds8m] { font-size: 13px }
.putaway-header button[b-acomw6ds8m], .scan-box button[b-acomw6ds8m] { font-size: 12px }
.pallet-heading button[b-acomw6ds8m] { font-size: 14px }
.scan-box input[b-acomw6ds8m] { font-size: 14px }
.pallet-heading small[b-acomw6ds8m] { font-size: 13px; font-weight: 700 }
.pallet-heading h2[b-acomw6ds8m] { font-size: 26px; font-weight: 800 }
.pallet-heading p[b-acomw6ds8m] { font-size: 14px }
.section-heading > span[b-acomw6ds8m] { font-size: 12px }
.section-heading h3[b-acomw6ds8m], .wrap-section h3[b-acomw6ds8m] { font-size: 18px }
.section-heading p[b-acomw6ds8m], .wrap-section p[b-acomw6ds8m] { font-size: 13px }
.destination-grid button strong[b-acomw6ds8m] { font-size: 17px }
.destination-grid button small[b-acomw6ds8m] { font-size: 13px }
.switch-row[b-acomw6ds8m] { font-size: 13px }
.item-list h3[b-acomw6ds8m] { font-size: 17px }
.item-list header span[b-acomw6ds8m] { font-size: 14px; font-weight: 700 }
.item-row strong[b-acomw6ds8m], .item-row b[b-acomw6ds8m] { font-size: 15px }
.item-row small[b-acomw6ds8m] { font-size: 12px }
.empty-pallet[b-acomw6ds8m], .putaway-message[b-acomw6ds8m] { font-size: 13px }
.submit-putaway[b-acomw6ds8m] { font-size: 18px }
.putaway-dialog > small[b-acomw6ds8m] { font-size: 11px }
.putaway-dialog > p[b-acomw6ds8m] { font-size: 13px }
.putaway-dialog dt[b-acomw6ds8m] { font-size: 12px }
.putaway-dialog dd[b-acomw6ds8m], .success-pallet[b-acomw6ds8m] { font-size: 13px }

/* station ที่ใช้งาน: ชื่อ station, สถานะ, แล้ว Station › Pallet › ปลายทาง */
.station-banner[b-acomw6ds8m] {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin-bottom: 12px;
    border: 1px solid #d8e4f0;
    border-radius: 12px;
    background: #fff
}

    .station-banner .banner-icon[b-acomw6ds8m] {
        display: grid;
        width: 74px;
        height: 74px;
        place-items: center;
        border-radius: 16px;
        color: var(--blue);
        background: #e7f1ff;
        font-size: 32px
    }

    .station-banner .banner-station[b-acomw6ds8m] {
        display: flex;
        flex-direction: column
    }

        .station-banner .banner-station small[b-acomw6ds8m] {
            color: var(--blue);
            font-size: 12px;
            font-weight: 800
        }

        .station-banner .banner-station strong[b-acomw6ds8m] {
            color: var(--blue);
            font-size: 44px;
            font-weight: 900;
            line-height: 1.05
        }

    .station-banner .banner-state[b-acomw6ds8m] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-right: 22px;
        border-right: 1px solid #e1e9f1
    }

        .station-banner .banner-state em[b-acomw6ds8m] {
            align-self: flex-start;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px;
            border-radius: 999px;
            color: #fff;
            background: #0a9c66;
            font-size: 15px;
            font-style: normal;
            font-weight: 800
        }

        .station-banner .banner-state strong[b-acomw6ds8m] {
            font-size: 13px
        }

        .station-banner .banner-state small[b-acomw6ds8m] {
            color: var(--muted);
            font-size: 11px
        }

.banner-flow[b-acomw6ds8m] {
    display: flex;
    align-items: center;
    gap: 10px
}

    .banner-flow > div[b-acomw6ds8m] {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid #e1e9f1;
        border-radius: 12px;
        background: #f8fafd
    }

        .banner-flow > div.waiting[b-acomw6ds8m] {
            opacity: .55
        }

        .banner-flow > div > span[b-acomw6ds8m] {
            display: grid;
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            place-items: center;
            border-radius: 50%;
            color: var(--blue);
            background: #e7f1ff;
            font-size: 17px
        }

        .banner-flow > div > div[b-acomw6ds8m] {
            display: flex;
            flex-direction: column;
            min-width: 0
        }

        .banner-flow small[b-acomw6ds8m] {
            color: var(--muted);
            font-size: 10px
        }

        .banner-flow strong[b-acomw6ds8m] {
            overflow: hidden;
            font-size: 17px;
            text-overflow: ellipsis;
            white-space: nowrap
        }

    /* ป้ายสถานะตามขั้น: รอ Station (เทา), รอ Pallet (น้ำเงิน), พร้อมยืนยัน (เขียว) */
    .station-banner .banner-state em.step-1[b-acomw6ds8m] {
        background: #7c8da1
    }

    .station-banner .banner-state em.step-2[b-acomw6ds8m] {
        background: var(--blue)
    }

    .station-banner .banner-station.waiting strong[b-acomw6ds8m] {
        color: #9aabbf
    }

    .banner-flow > i[b-acomw6ds8m] {
        color: #7aa7dc
    }

@media (max-width: 1200px) {
    .station-banner[b-acomw6ds8m] {
        grid-template-columns: auto minmax(0, 1fr)
    }

        .station-banner .banner-state[b-acomw6ds8m] {
            padding-right: 0;
            border-right: 0
        }

    .banner-flow[b-acomw6ds8m] {
        grid-column: 1 / -1
    }
}
/* _content/WMS.UI/Pages/Workstation/Replenishment/ReplenPickDialog.razor.rz.scp.css */
/* popup หยิบขายจาก Tote ที่ station RPL: หน้าตาเดียวกับแผงหยิบขายของหน้า หยิบ-แพ็คสินค้า */
.rpl-pick-backdrop[b-c5dos6liq9] {
    position: fixed;
    inset: 0;
    z-index: 1990;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(13, 31, 54, .54);
    backdrop-filter: blur(2px);
}

.rpl-pick-error[b-c5dos6liq9] {
    z-index: 2100;
}

.rpl-pick-dialog[b-c5dos6liq9] {
    width: min(620px, 100%);
    max-height: calc(100vh - 36px);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.rpl-pick-dialog > header[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e1e9f1;
}

.rpl-pick-dialog > header > div[b-c5dos6liq9] {
    flex: 1;
    min-width: 0;
}

.rpl-pick-dialog > header small[b-c5dos6liq9] {
    color: #1269d3;
    font-size: 12px;
    font-weight: 800;
}

.rpl-pick-dialog > header h3[b-c5dos6liq9] {
    margin: 0;
    font-size: 18px;
    font-weight: 850;
}

.rpl-pick-dialog > header p[b-c5dos6liq9] {
    margin: 0;
    color: #475569;
    font-size: 13px;
}

.rpl-pick-icon[b-c5dos6liq9] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #1269d3;
    background: #e7f1ff;
    font-size: 18px;
}

.rpl-pick-close[b-c5dos6liq9] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 9px;
    color: #475569;
    background: #f1f5f9;
}

.rpl-pick-body[b-c5dos6liq9] {
    flex: 1;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
}

.rpl-pick-body > p[b-c5dos6liq9] {
    margin: 0;
    color: #475569;
    font-size: 14px;
}

.rpl-pick-orders[b-c5dos6liq9] {
    display: grid;
    gap: 8px;
}

.rpl-pick-orders > button[b-c5dos6liq9] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1px solid #cbd9e9;
    border-radius: 10px;
    background: #f8fbff;
    text-align: left;
}

.rpl-pick-orders > button:hover:not(:disabled)[b-c5dos6liq9] {
    border-color: #1269d3;
    background: #eef5ff;
}

.rpl-pick-orders strong[b-c5dos6liq9] {
    font-size: 16px;
}

.rpl-pick-orders small[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-scan[b-c5dos6liq9] {
    height: 44px;
    display: flex;
    align-items: center;
    padding: 3px 3px 3px 12px;
    border: 1px solid #9fc4f3;
    border-radius: 10px;
}

.rpl-pick-scan:focus-within[b-c5dos6liq9] {
    border-color: #1269d3;
    box-shadow: 0 0 0 3px rgba(18, 105, 211, .1);
}

.rpl-pick-scan > i[b-c5dos6liq9] {
    color: #1269d3;
}

.rpl-pick-scan input[b-c5dos6liq9] {
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0 10px;
    border: 0;
    outline: 0;
    font-size: 15px;
}

.rpl-pick-scan button[b-c5dos6liq9] {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: #1269d3;
    font-size: 13px;
    font-weight: 800;
}

/* Pallet ปลายทางที่ระบบเลือก */
.rpl-pick-dest[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f1f5f9;
}

.rpl-pick-dest > i[b-c5dos6liq9] {
    color: #475569;
    font-size: 18px;
}

.rpl-pick-dest > div[b-c5dos6liq9] {
    display: flex;
    flex-direction: column;
}

.rpl-pick-dest strong[b-c5dos6liq9] {
    font-size: 14px;
}

.rpl-pick-dest small[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-label[b-c5dos6liq9] {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 800;
}

/* สินค้าที่สแกน */
.rpl-pick-item[b-c5dos6liq9] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #d8e5f2;
    border-radius: 12px;
    background: #f8fbff;
}

.rpl-pick-item-head[b-c5dos6liq9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rpl-pick-image[b-c5dos6liq9] {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e1e9f1;
    border-radius: 10px;
    color: #94a3b8;
    background: #fff;
    font-size: 24px;
}

.rpl-pick-image img[b-c5dos6liq9] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rpl-pick-item-head > div[b-c5dos6liq9] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rpl-pick-item-head strong[b-c5dos6liq9] {
    font-size: 16px;
}

.rpl-pick-item-head small[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-item-head > em[b-c5dos6liq9] {
    padding: 4px 10px;
    border-radius: 8px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.rpl-pick-qty[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rpl-pick-qty label[b-c5dos6liq9] {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.rpl-pick-qty button[b-c5dos6liq9] {
    width: 40px;
    height: 40px;
    border: 1px solid #bfd3ea;
    border-radius: 8px;
    color: #1269d3;
    background: #fff;
}

.rpl-pick-qty input[b-c5dos6liq9] {
    width: 100px;
    height: 40px;
    text-align: center;
    border: 1px solid #cbd9e9;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
}

.rpl-pick-serial[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #bbe8d3;
    border-radius: 8px;
    background: #ecfdf5;
}

.rpl-pick-serial > i[b-c5dos6liq9] {
    color: #059669;
}

.rpl-pick-serial > span[b-c5dos6liq9] {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
}

.rpl-pick-serial.waiting[b-c5dos6liq9] {
    border-color: #e2e8f0;
    background: #fff;
}

.rpl-pick-serial.waiting > i[b-c5dos6liq9] {
    color: #cbd5e1;
}

.rpl-pick-serial.waiting > span[b-c5dos6liq9] {
    color: #475569;
    font-weight: 600;
}

.rpl-pick-serial > em[b-c5dos6liq9] {
    padding: 2px 8px;
    border-radius: 99px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}

.rpl-pick-serial-hint[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-serial > button[b-c5dos6liq9] {
    border: 0;
    color: #475569;
    background: transparent;
}

.rpl-pick-item-actions[b-c5dos6liq9] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rpl-pick-link[b-c5dos6liq9] {
    padding: 4px 6px;
    border: 0;
    color: #1269d3;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.rpl-pick-link.danger[b-c5dos6liq9] {
    color: #b91c1c;
}

/* รายการสินค้าในงานนี้ */
.rpl-pick-list-head[b-c5dos6liq9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid #e1e9f1;
}

.rpl-pick-list-head strong[b-c5dos6liq9] {
    font-size: 14px;
}

.rpl-pick-list-head span[b-c5dos6liq9] {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.rpl-pick-list[b-c5dos6liq9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rpl-pick-row[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e1e9f1;
    border-radius: 10px;
    background: #fff;
}

.rpl-pick-row.on[b-c5dos6liq9] {
    border-color: #93c5fd;
    background: #eff6ff;
}

.rpl-pick-row-no[b-c5dos6liq9] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #334155;
    background: #f1f5f9;
    font-size: 13px;
    font-weight: 800;
}

.rpl-pick-row.done .rpl-pick-row-no[b-c5dos6liq9] {
    color: #fff;
    background: #1269d3;
}

.rpl-pick-row > div[b-c5dos6liq9] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rpl-pick-row-top[b-c5dos6liq9] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rpl-pick-row-top strong[b-c5dos6liq9] {
    font-size: 15px;
}

.rpl-pick-row-top em[b-c5dos6liq9] {
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.rpl-pick-row small[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-bar[b-c5dos6liq9] {
    display: block;
    height: 5px;
    margin-top: 4px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
}

.rpl-pick-bar i[b-c5dos6liq9] {
    display: block;
    height: 100%;
    background: #1269d3;
}

.rpl-pick-row-clear[b-c5dos6liq9] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    background: #f1f5f9;
}

/* หลังยืนยันหยิบ: รายการที่ยังเหลือ */
.rpl-pick-lines[b-c5dos6liq9] {
    border-top: 1px solid #e1e9f1;
}

.rpl-pick-line-row[b-c5dos6liq9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid #edf2f7;
}

.rpl-pick-line-row > span[b-c5dos6liq9] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.rpl-pick-line-row small[b-c5dos6liq9] {
    color: #64748b;
    font-size: 12px;
}

.rpl-pick-line-row em[b-c5dos6liq9] {
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.rpl-pick-result[b-c5dos6liq9] {
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 11px;
}

.rpl-pick-result.done[b-c5dos6liq9] { border: 1px solid #a7f3d0; background: #ecfdf5; }
.rpl-pick-result.left[b-c5dos6liq9] { border: 1px solid #fde4b8; background: #fff8eb; }

.rpl-pick-result > span[b-c5dos6liq9] {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 20px;
}

.rpl-pick-result.done > span[b-c5dos6liq9] { color: #047857; background: #d1fae5; }
.rpl-pick-result.left > span[b-c5dos6liq9] { color: #b45309; background: #ffedd5; }

.rpl-pick-result > div[b-c5dos6liq9] {
    display: flex;
    flex-direction: column;
}

.rpl-pick-result strong[b-c5dos6liq9] {
    font-size: 17px;
    font-weight: 850;
}

.rpl-pick-result small[b-c5dos6liq9] {
    color: #475569;
    font-size: 13px;
}

.rpl-pick-note[b-c5dos6liq9] {
    margin: 0;
    padding: 9px 11px;
    border-radius: 9px;
    color: #475569;
    background: #f1f5f9;
    font-size: 12px;
}

.rpl-pick-dialog > footer[b-c5dos6liq9] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e1e9f1;
}

.rpl-pick-dialog > footer > button[b-c5dos6liq9] {
    flex: 1;
    height: 46px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 800;
}

.rpl-pick-primary[b-c5dos6liq9] {
    border: 0;
    color: #fff;
    background: #087f5b;
}

.rpl-pick-secondary[b-c5dos6liq9] {
    border: 1px solid #cbd9e9;
    color: #315577;
    background: #fff;
}

.rpl-pick-dialog > footer > button:disabled[b-c5dos6liq9] {
    opacity: .45;
}
/* _content/WMS.UI/Pages/Workstation/Replenishment/ReplenProductDialog.razor.rz.scp.css */
.station-shell[b-4isuyljvhn] {
    --station-primary: #2563eb;
    --station-border: #dce4ef;
    --station-muted: #64748b;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.station-panel[b-4isuyljvhn] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--station-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 6%);
}

.station-shell.is-disabled .station-panel[b-4isuyljvhn] { opacity: .72; filter: grayscale(.35); }

.station-header[b-4isuyljvhn] {
    min-height: 67px;
    padding: 12px 14px 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #174c8d, #246bc0);
}

.station-header.is-disabled[b-4isuyljvhn] { background: #64748b; }
.station-heading[b-4isuyljvhn] { min-width: 0; }
.station-kicker[b-4isuyljvhn] { display: block; margin-bottom: 2px; color: rgb(255 255 255 / 70%); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.station-heading h5[b-4isuyljvhn] { margin: 0; overflow: hidden; font-size: 18px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.station-header-actions[b-4isuyljvhn] { display: flex; align-items: center; gap: 7px; }

.station-direction[b-4isuyljvhn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.station-direction.in[b-4isuyljvhn] { color: #064e3b; background: #d1fae5; }
.station-direction.out[b-4isuyljvhn] { color: #7c2d12; background: #ffedd5; }

.station-setting[b-4isuyljvhn] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 7px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    cursor: pointer;
}
.station-setting:hover[b-4isuyljvhn] { background: rgb(255 255 255 / 22%); }

.station-body[b-4isuyljvhn] {
    flex: 1;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.station-progress[b-4isuyljvhn] {
    width: 100%;
    margin-bottom: 12px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    background: #eff6ff;
    font-size: 12px;
}
.station-progress strong[b-4isuyljvhn] { font-size: 18px; }

.station-tote-area[b-4isuyljvhn] {
    width: 100%;
    min-height: 168px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%);
}

.station-change-type[b-4isuyljvhn] { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 8px; color: #fff; background: #0891b2; font-size: 13px; cursor: pointer; box-shadow: 0 3px 8px rgb(8 145 178 / 22%); }
.station-change-type:hover[b-4isuyljvhn] { background: #0e7490; }
.station-change-type:focus-visible[b-4isuyljvhn] { outline: 2px solid #38bdf8; outline-offset: 2px; }
.tote-type-dialog[b-4isuyljvhn] { display: flex; flex-direction: column; gap: 16px; color: #172033; }
.tote-type-dialog__header[b-4isuyljvhn] { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px; background: #eff6ff; }
.tote-type-dialog__header span[b-4isuyljvhn], .tote-partition-selection > span[b-4isuyljvhn] { display: block; color: #64748b; font-size: 10px; font-weight: 700; }
.tote-type-dialog__header strong[b-4isuyljvhn] { display: block; color: #0f172a; font-size: 16px; }
.tote-type-dialog__header small[b-4isuyljvhn] { color: #2563eb; font-size: 11px; }
.tote-type-options[b-4isuyljvhn] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tote-type-option[b-4isuyljvhn] { min-width: 0; padding: 11px; display: flex; flex-direction: column; align-items: stretch; gap: 9px; border: 2px solid #e2e8f0; border-radius: 10px; color: #334155; background: #fff; cursor: pointer; }
.tote-type-option:hover[b-4isuyljvhn] { border-color: #93c5fd; }
.tote-type-option.is-selected[b-4isuyljvhn] { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgb(37 99 235 / 10%); }
.tote-type-option > strong[b-4isuyljvhn] { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tote-type-preview[b-4isuyljvhn], .tote-partition-selection__preview[b-4isuyljvhn] { position: relative; width: 100%; max-width: 280px; min-height: 70px; align-self: center; overflow: hidden; border: 2px solid #4f78a6; border-radius: 5px; background: #f8fbff; }
.tote-type-partition[b-4isuyljvhn] { position: absolute; display: grid; place-items: center; overflow: hidden; border: 1px solid #2f6faf; color: #174c8d; background: #dbeafe; font-size: 9px; }
.tote-partition-selection[b-4isuyljvhn] { padding: 12px; border: 1px solid #dbe5f1; border-radius: 10px; background: #f8fafc; }
.tote-partition-selection > span[b-4isuyljvhn] { margin-bottom: 8px; }
.tote-partition-selection > small[b-4isuyljvhn] { color: #94a3b8; font-size: 11px; }
.tote-partition-selection__preview[b-4isuyljvhn] { min-height: 150px; }
.tote-partition-selection__preview .is-selectable[b-4isuyljvhn] { position: absolute; padding: 0; cursor: pointer; }
.tote-partition-selection__preview .is-selectable:hover[b-4isuyljvhn] { z-index: 2; background: #bfdbfe; }
.tote-partition-selection__preview .is-selectable.is-selected[b-4isuyljvhn] { z-index: 3; color: #fff; background: #2563eb; box-shadow: inset 0 0 0 2px #1d4ed8; }
.tote-type-dialog__actions[b-4isuyljvhn] { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

.agv-waiting-state[b-4isuyljvhn] {
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #fed7aa;
    border-left: 4px solid #f97316;
    border-radius: 11px;
    color: #7c2d12;
    background: linear-gradient(100deg, #fff7ed, #fff);
    box-shadow: 0 4px 14px rgb(249 115 22 / 10%);
}

.agv-status-visual[b-4isuyljvhn] {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #f97316;
}

.agv-arrow[b-4isuyljvhn] { position: relative; z-index: 2; font-size: 21px; }
.agv-pulse[b-4isuyljvhn] {
    position: absolute;
    inset: 0;
    border: 2px solid #fb923c;
    border-radius: inherit;
    animation: agv-pulse-b-4isuyljvhn 1.8s ease-out infinite;
}

.agv-status-copy[b-4isuyljvhn] { min-width: 0; display: flex; flex-direction: column; }
.agv-status-label[b-4isuyljvhn] { color: #ea580c; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.agv-status-copy strong[b-4isuyljvhn] { color: #9a3412; font-size: 15px; line-height: 1.3; }
.agv-status-copy small[b-4isuyljvhn] { overflow: hidden; color: #78716c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agv-status-copy small b[b-4isuyljvhn] { color: #44403c; }
.agv-live-dot[b-4isuyljvhn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #9a3412;
    background: #ffedd5;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}
.agv-live-dot i[b-4isuyljvhn] { width: 6px; height: 6px; border-radius: 50%; background: #f97316; animation: agv-blink-b-4isuyljvhn 1.1s ease-in-out infinite; }

@keyframes agv-pulse-b-4isuyljvhn { 0% { opacity: .65; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes agv-blink-b-4isuyljvhn { 50% { opacity: .25; } }

.station-detail-table[b-4isuyljvhn] { margin: 0 !important; font-size: 12px !important; }
.station-detail-table td[b-4isuyljvhn] { padding: 7px 5px !important; border-color: #e8edf3 !important; vertical-align: middle; }
.station-detail-table td:nth-child(odd)[b-4isuyljvhn] { color: #64748b; font-size: 11px; white-space: nowrap; }
.station-detail-table td:nth-child(even)[b-4isuyljvhn] { color: #172033; font-weight: 600; }
.station-detail-table h2[b-4isuyljvhn] { margin: 0 !important; font-size: 27px !important; }

.station-empty-state[b-4isuyljvhn] {
    width: 100%;
    min-height: 390px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.station-empty-icon[b-4isuyljvhn] {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 20px;
    color: #2563eb;
    background: #e8f0ff;
    font-size: 30px;
}
.station-empty-title[b-4isuyljvhn] { color: #1e293b; font-size: 16px; font-weight: 750; }
.station-empty-hint[b-4isuyljvhn] { margin: 5px 0 22px; color: var(--station-muted); font-size: 12px; }
.station-primary-action[b-4isuyljvhn] { width: 100%; margin-top: auto; padding-top: 12px; }

.station-primary-action[b-4isuyljvhn]  .btn {
    min-height: 43px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: var(--station-primary) !important;
    box-shadow: 0 4px 10px rgb(37 99 235 / 20%);
    font-size: 13px !important;
    font-weight: 700 !important;
}

.station-footer[b-4isuyljvhn] {
    min-height: 62px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 1px solid var(--station-border);
    background: #f8fafc;
}
.station-footer[b-4isuyljvhn]  .btn {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}
.station-footer[b-4isuyljvhn]  .btn-success { background: #16a34a !important; }
.station-footer[b-4isuyljvhn]  .btn-danger { background: #ef4444 !important; }

@media (max-width: 1500px) {
    .station-shell[b-4isuyljvhn] {
        height: auto;
        min-height: 620px;
    }
}

@media (max-width: 760px) {
    .station-shell[b-4isuyljvhn] { min-height: 590px; }
    .agv-waiting-state[b-4isuyljvhn] { grid-template-columns: 48px minmax(0, 1fr); }
    .agv-live-dot[b-4isuyljvhn] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .agv-pulse[b-4isuyljvhn], .agv-live-dot i[b-4isuyljvhn] { animation: none; }
}

/* Station popups */
.station-popup[b-4isuyljvhn] { color: #172033; }
.popup-hero[b-4isuyljvhn] {
    margin: -16px -16px 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}
.popup-hero-icon[b-4isuyljvhn] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 16px rgb(37 99 235 / 23%);
    font-size: 19px;
}
.popup-hero span[b-4isuyljvhn] { display: block; color: #2563eb; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.popup-hero strong[b-4isuyljvhn] { display: block; margin: 1px 0; color: #0f172a; font-size: 18px; }
.popup-hero small[b-4isuyljvhn] { display: block; color: #64748b; font-size: 11px; }

.popup-setting-row[b-4isuyljvhn] {
    margin-bottom: 17px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
}
.popup-setting-copy[b-4isuyljvhn] { min-width: 0; display: flex; align-items: center; gap: 10px; }
.popup-setting-icon[b-4isuyljvhn] { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; }
.popup-setting-icon.is-green[b-4isuyljvhn] { color: #059669; background: #d1fae5; }
.popup-setting-copy strong[b-4isuyljvhn] { display: block; color: #1e293b; font-size: 13px; }
.popup-setting-copy small[b-4isuyljvhn] { display: block; color: #64748b; font-size: 10px; line-height: 1.35; }

.popup-field[b-4isuyljvhn] { margin-bottom: 15px; }
.popup-field > label[b-4isuyljvhn] { display: block; margin-bottom: 7px; color: #334155; font-size: 11px; font-weight: 750; }
.popup-field > label i[b-4isuyljvhn] { margin-right: 4px; color: #2563eb; }
.popup-field > small[b-4isuyljvhn] { display: block; margin-top: 6px; color: #94a3b8; font-size: 10px; }
.popup-field[b-4isuyljvhn]  .select, .popup-field[b-4isuyljvhn]  .form-control { min-height: 43px !important; border-color: #cbd5e1 !important; border-radius: 8px !important; }
.popup-field[b-4isuyljvhn]  .form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%) !important; }

.popup-input-with-icon[b-4isuyljvhn] { position: relative; }
.popup-input-with-icon > i[b-4isuyljvhn] { position: absolute; z-index: 3; top: 50%; left: 13px; color: #2563eb; transform: translateY(-50%); }
.popup-input-with-icon[b-4isuyljvhn]  input { padding-left: 38px !important; font-weight: 650; letter-spacing: .03em; }

.popup-note[b-4isuyljvhn] {
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    color: #475569;
    background: #f1f5f9;
    font-size: 10px;
}
.popup-note i[b-4isuyljvhn] { margin-top: 1px; color: #2563eb; }
.popup-note b[b-4isuyljvhn] { color: #1e293b; }

.station-popup-actions[b-4isuyljvhn] { width: 100%; display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; }
.station-popup-actions[b-4isuyljvhn]  .btn { min-height: 40px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 750 !important; }
.station-popup-actions[b-4isuyljvhn]  .btn-primary { border-color: #2563eb !important; background: #2563eb !important; box-shadow: 0 4px 10px rgb(37 99 235 / 18%); }

/* Add product / replenishment popup */
.replen-product-popup[b-4isuyljvhn] {
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 14px;
    background: #f5f8fc;
}
.replen-popup-panel[b-4isuyljvhn] {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 5%);
}
.replen-panel-heading[b-4isuyljvhn] {
    min-height: 66px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e5ebf3;
    background: linear-gradient(180deg, #fff, #f8fafc);
}
.replen-panel-icon[b-4isuyljvhn] { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; font-size: 16px; }
.replen-panel-icon.tote[b-4isuyljvhn] { color: #2563eb; background: #dbeafe; }
.replen-panel-icon.target[b-4isuyljvhn] { color: #059669; background: #d1fae5; }
.replen-panel-heading > div:nth-child(2)[b-4isuyljvhn] { min-width: 0; }
.replen-panel-heading span:not(.replen-panel-station):not(.replen-ready-badge)[b-4isuyljvhn] { display: block; color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.replen-panel-heading strong[b-4isuyljvhn] { display: block; overflow: hidden; color: #172033; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.replen-panel-station[b-4isuyljvhn], .replen-ready-badge[b-4isuyljvhn] { margin-left: auto; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.replen-panel-station[b-4isuyljvhn] { color: #1d4ed8; background: #eff6ff; }
.replen-ready-badge[b-4isuyljvhn] { color: #047857; background: #d1fae5; }
.replen-ready-badge i[b-4isuyljvhn] { margin-right: 3px; }

.replen-tote-visual[b-4isuyljvhn] { padding: 18px 15px 14px; border-bottom: 1px solid #e8edf4; background: linear-gradient(180deg, #f8fbff, #fff); }
.replen-tote-content[b-4isuyljvhn] { flex: 1; overflow: auto; }
.replen-detail-body[b-4isuyljvhn], .replen-target-body[b-4isuyljvhn] { padding: 14px !important; }
.replen-target-body[b-4isuyljvhn] { flex: 1; }
.replen-section-label[b-4isuyljvhn] { color: #334155; font-size: 11px; font-weight: 800; }
.replen-section-label i[b-4isuyljvhn] { margin-right: 5px; color: #2563eb; }

.replen-info-table[b-4isuyljvhn] { margin: 0 !important; font-size: 11px !important; }
.replen-info-table td[b-4isuyljvhn] { padding: 8px 7px !important; border-color: #e6edf5 !important; vertical-align: middle; }
.replen-info-table td:nth-child(odd)[b-4isuyljvhn] { color: #64748b; white-space: nowrap; }
.replen-info-table td:nth-child(even)[b-4isuyljvhn] { color: #172033; font-weight: 650; }
.replen-info-table h2[b-4isuyljvhn] { margin: 0 !important; font-size: 27px !important; }

.replen-product-detail[b-4isuyljvhn] { align-items: flex-start; gap: 8px; }
.replen-product-image[b-4isuyljvhn] {
    width: 116px;
    min-width: 116px;
    min-height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 11px;
    background: #f8fafc;
}
.replen-product-image:empty[b-4isuyljvhn]::after { content: "\f1b2"; color: #cbd5e1; font: 34px/1 "Font Awesome 6 Free"; font-weight: 900; }
.replen-product-image img[b-4isuyljvhn] { max-width: 100% !important; max-height: 110px; object-fit: contain; }
.replen-product-info[b-4isuyljvhn] { min-width: 0; }

.replen-qty-summary[b-4isuyljvhn] { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.replen-qty-card[b-4isuyljvhn] { padding: 14px 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; }
.replen-qty-card span[b-4isuyljvhn] { grid-column: 1 / -1; margin-bottom: 5px; color: #64748b; font-size: 10px; }
.replen-qty-card strong[b-4isuyljvhn] { color: #475569; font-size: 29px; line-height: 1; }
.replen-qty-card small[b-4isuyljvhn] { color: #94a3b8; font-size: 9px; }
.replen-qty-card.recommend[b-4isuyljvhn] { border-color: #bbf7d0; background: #f0fdf4; }
.replen-qty-card.recommend strong[b-4isuyljvhn] { color: #16a34a; }

.replen-scan-empty[b-4isuyljvhn] { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.replen-scan-icon[b-4isuyljvhn] { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 19px; color: #2563eb; background: #dbeafe; font-size: 27px; }
.replen-scan-empty h5[b-4isuyljvhn] { margin: 0; color: #172033; font-size: 16px; font-weight: 800; }
.replen-scan-empty p[b-4isuyljvhn] { margin: 5px 0 16px; color: #64748b; font-size: 11px; }
.replen-scan-input[b-4isuyljvhn] { width: min(100%, 330px); }
.replen-scan-input[b-4isuyljvhn]  .form-control { min-height: 44px !important; border-color: #bfdbfe !important; border-radius: 9px !important; }

.replen-popup-actions[b-4isuyljvhn] { width: 100%; display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; }
.replen-popup-actions[b-4isuyljvhn]  .btn { min-height: 45px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 800 !important; }
.replen-popup-actions[b-4isuyljvhn]  .btn-success { border-color: #16a34a !important; background: #16a34a !important; box-shadow: 0 4px 12px rgb(22 163 74 / 18%); }

@media (max-width: 1050px) {
    .replen-product-popup[b-4isuyljvhn] { grid-template-columns: 1fr; }
    .replen-product-detail[b-4isuyljvhn] { flex-direction: column; }
    .replen-product-image[b-4isuyljvhn] { width: 100%; }
}

@media (max-width: 600px) {
    .replen-qty-summary[b-4isuyljvhn] { grid-template-columns: 1fr; }
    .replen-popup-actions[b-4isuyljvhn] { grid-template-columns: 1fr; }
}

/* งานหยิบขายของ Tote บน station: ปุ่ม Pick กลางการ์ด / Order รอ Pallet ปลายทาง */
.station-pick-action[b-4isuyljvhn] {
    margin: 4px auto 12px;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #f2c66d;
    border-radius: 12px;
    background: #fffaf0;
}

.station-pick-action > span[b-4isuyljvhn] {
    color: #9a5b00;
    font-size: 14px;
    font-weight: 800;
}

.station-pick-waiting[b-4isuyljvhn] {
    margin: 4px auto 12px;
    width: min(420px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #475569;
    background: #f8fafc;
}

.station-pick-waiting > i[b-4isuyljvhn] {
    font-size: 18px;
}

.station-pick-waiting > div[b-4isuyljvhn] {
    display: flex;
    flex-direction: column;
}

.station-pick-waiting strong[b-4isuyljvhn] {
    font-size: 13px;
}

.station-pick-waiting small[b-4isuyljvhn] {
    font-size: 12px;
}


    .edit-qty-dialog[b-4isuyljvhn] { color: #172033; text-align: left; }
    .edit-qty-heading[b-4isuyljvhn] { padding: 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #dbeafe; background: linear-gradient(135deg, #eff6ff, #f8fbff); }
    .edit-qty-icon[b-4isuyljvhn] { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 6px 16px rgba(37, 99, 235, .2); font-size: 18px; }
    .edit-qty-heading span[b-4isuyljvhn] { display: block; color: #2563eb; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
    .edit-qty-heading strong[b-4isuyljvhn] { display: block; color: #0f172a; font-size: 18px; }
    .edit-qty-heading small[b-4isuyljvhn] { display: block; color: #64748b; font-size: 10px; }
    .edit-qty-summary[b-4isuyljvhn] { padding: 16px 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .edit-qty-stat[b-4isuyljvhn] { padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
    .edit-qty-stat span[b-4isuyljvhn] { grid-column: 1 / -1; color: #64748b; font-size: 10px; }
    .edit-qty-stat strong[b-4isuyljvhn] { color: #334155; font-size: 25px; line-height: 1.1; }
    .edit-qty-stat small[b-4isuyljvhn] { color: #94a3b8; font-size: 9px; }
    .edit-qty-stat.maximum[b-4isuyljvhn] { border-color: #bbf7d0; background: #f0fdf4; }
    .edit-qty-stat.maximum strong[b-4isuyljvhn] { color: #16a34a; }
    .edit-qty-field[b-4isuyljvhn] { padding: 16px; }
    .edit-qty-field > label[b-4isuyljvhn] { display: block; margin-bottom: 7px; color: #334155; font-size: 11px; font-weight: 750; }
    .edit-qty-control[b-4isuyljvhn] { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px auto; align-items: stretch; }
    .edit-qty-control > button[b-4isuyljvhn] { border: 1px solid #cbd5e1; color: #2563eb; background: #f8fafc; cursor: pointer; }
    .edit-qty-control > button:first-child[b-4isuyljvhn] { border-radius: 8px 0 0 8px; }
    .edit-qty-control[b-4isuyljvhn]  .form-control { min-height: 44px !important; border-right: 0 !important; border-left: 0 !important; border-radius: 0 !important; color: #0f172a !important; font-size: 18px !important; font-weight: 800 !important; }
    .edit-qty-unit[b-4isuyljvhn] { min-width: 50px; display: grid; place-items: center; padding: 0 10px; border: 1px solid #cbd5e1; border-left: 0; border-radius: 0 8px 8px 0; color: #64748b; background: #f1f5f9; font-size: 10px; font-weight: 700; }
    .edit-qty-field > small[b-4isuyljvhn] { display: block; margin-top: 7px; color: #94a3b8; font-size: 9px; }
    .edit-qty-field > small i[b-4isuyljvhn] { margin-right: 3px; color: #2563eb; }
    .edit-qty-error[b-4isuyljvhn] { margin-top: 10px; padding: 9px 10px; border: 1px solid #fecaca; border-radius: 8px; color: #b91c1c; background: #fef2f2; font-size: 10px; font-weight: 650; }
    .edit-qty-error i[b-4isuyljvhn] { margin-right: 5px; }
/* _content/WMS.UI/Pages/Workstation/Replenishment/ReplenStationSelector.razor.rz.scp.css */
.replen-select-page[b-eqn1yw8uln]{height:100%;min-height:0;padding:20px;background:#f4f7fb;overflow:auto;color:#10213d}.replen-select-header[b-eqn1yw8uln]{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.replen-select-header span[b-eqn1yw8uln]{color:#1263c6;font-size:10px;font-weight:850;letter-spacing:.13em}.replen-select-header h1[b-eqn1yw8uln]{margin:2px 0 1px;font-size:27px;font-weight:800}.replen-select-header p[b-eqn1yw8uln],.replen-select-toolbar p[b-eqn1yw8uln]{margin:0;color:#718096;font-size:12px}.replen-select-header button[b-eqn1yw8uln]{min-height:40px;padding:0 15px;border:1px solid #cfdbea;border-radius:9px;background:#fff;color:#17304f;font-weight:700}.replen-select-summary[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.replen-select-summary article[b-eqn1yw8uln]{min-height:72px;display:flex;align-items:center;gap:12px;padding:12px 15px;border:1px solid #d7e2ef;border-radius:12px;background:#fff}.replen-select-summary article>i[b-eqn1yw8uln]{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;font-size:17px}.replen-select-summary .blue[b-eqn1yw8uln]{color:#1667d9;background:#e7f1ff}.replen-select-summary .green[b-eqn1yw8uln]{color:#059669;background:#ddf8ec}.replen-select-summary .orange[b-eqn1yw8uln]{color:#c26b00;background:#fff0d8}.replen-select-summary small[b-eqn1yw8uln],.replen-station-card small[b-eqn1yw8uln]{display:block;color:#718096;font-size:10px}.replen-select-summary strong[b-eqn1yw8uln]{display:block;font-size:22px}.replen-select-workspace[b-eqn1yw8uln]{padding:12px;border:1px solid #d7e2ef;border-radius:14px;background:#fff}.replen-select-toolbar[b-eqn1yw8uln]{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.replen-select-toolbar h2[b-eqn1yw8uln]{margin:0;font-size:17px}.replen-select-toolbar label[b-eqn1yw8uln]{width:300px;min-height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfdae8;border-radius:9px;color:#60758e}.replen-select-toolbar input[b-eqn1yw8uln]{width:100%;border:0;outline:0;background:transparent;font-size:12px}.replen-select-grid[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.replen-station-card[b-eqn1yw8uln]{min-width:0;border:1px solid #d4e0ed;border-radius:12px;overflow:hidden;background:#fff}.replen-station-card.disabled[b-eqn1yw8uln]{opacity:.62}.replen-station-card>header[b-eqn1yw8uln]{display:flex;align-items:center;gap:9px;padding:11px;border-bottom:1px solid #e3eaf2}.station-icon[b-eqn1yw8uln]{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;color:#1769d4;background:#e9f2ff}.replen-station-card h3[b-eqn1yw8uln]{margin:1px 0 0;font-size:16px}.replen-station-card em[b-eqn1yw8uln]{margin-left:auto;padding:4px 7px;border-radius:999px;font-size:9px;font-style:normal;font-weight:750;white-space:nowrap}.replen-station-card em.ready[b-eqn1yw8uln]{color:#087b55;background:#dcf7eb}.replen-station-card em.offline[b-eqn1yw8uln]{color:#b42318;background:#fee4e2}.replen-station-runtime[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px}.replen-station-runtime>div[b-eqn1yw8uln],.replen-station-client[b-eqn1yw8uln]{padding:9px;border-radius:8px;background:#f3f6fa}.replen-station-runtime strong[b-eqn1yw8uln],.replen-station-client strong[b-eqn1yw8uln]{display:block;overflow:hidden;text-overflow:ellipsis;font-size:11px;white-space:nowrap}.replen-station-client[b-eqn1yw8uln]{display:flex;align-items:center;gap:8px;margin:0 10px 10px;color:#1769d4}.replen-station-card footer[b-eqn1yw8uln]{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-top:1px solid #e3eaf2}.replen-station-card footer span[b-eqn1yw8uln]{color:#78899d;font-size:9px}.replen-station-card footer button[b-eqn1yw8uln]{min-height:32px;padding:0 10px;border:0;border-radius:8px;color:#fff;background:#1769d4;font-size:10px;font-weight:750}.replen-station-card footer button:disabled[b-eqn1yw8uln]{background:#aab6c5}.replen-select-message[b-eqn1yw8uln]{margin-bottom:10px;padding:9px 11px;border-radius:8px;color:#805300;background:#fff4d8;font-size:11px}.replen-select-loading[b-eqn1yw8uln]{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}.replen-select-loading i[b-eqn1yw8uln]{color:#1769d4;font-size:26px}@media(max-width:1450px){.replen-select-grid[b-eqn1yw8uln]{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1000px){.replen-select-grid[b-eqn1yw8uln]{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.replen-select-page[b-eqn1yw8uln]{padding:12px}.replen-select-header[b-eqn1yw8uln],.replen-select-toolbar[b-eqn1yw8uln]{align-items:stretch;flex-direction:column}.replen-select-toolbar label[b-eqn1yw8uln]{width:100%}.replen-select-summary[b-eqn1yw8uln],.replen-select-grid[b-eqn1yw8uln]{grid-template-columns:1fr}.replen-station-runtime[b-eqn1yw8uln]{grid-template-columns:1fr 1fr}.replen-station-runtime>div:last-child[b-eqn1yw8uln]{grid-column:1/-1}}
.replen-group-grid[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.replen-group-card[b-eqn1yw8uln]{min-width:0;border:1px solid #d4e0ed;border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 4px 14px rgb(15 23 42 / 5%)}.replen-group-card.disabled[b-eqn1yw8uln]{opacity:.62}.replen-group-card>header[b-eqn1yw8uln]{display:flex;align-items:center;gap:11px;padding:14px;border-bottom:1px solid #e3eaf2}.replen-group-card h3[b-eqn1yw8uln]{margin:1px 0 0;font-size:19px}.replen-group-card header p[b-eqn1yw8uln]{margin:2px 0 0;color:#718096;font-size:11px}.replen-group-card header>em[b-eqn1yw8uln]{margin-left:auto;padding:5px 8px;border-radius:999px;font-size:9px;font-style:normal;font-weight:750;white-space:nowrap}.replen-group-card header>em.ready[b-eqn1yw8uln]{color:#087b55;background:#dcf7eb}.replen-group-card header>em.offline[b-eqn1yw8uln]{color:#b42318;background:#fee4e2}.replen-group-stations[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px}.replen-group-stations>div[b-eqn1yw8uln]{min-width:0;display:flex;align-items:center;gap:7px;padding:10px;border:1px solid #deE7f1;border-radius:9px;background:#f5f8fc}.replen-group-stations>div.offline[b-eqn1yw8uln]{opacity:.5}.replen-group-stations>div>span[b-eqn1yw8uln]{color:#1769d4}.replen-group-stations strong[b-eqn1yw8uln]{display:block;font-size:11px}.replen-group-stations em[b-eqn1yw8uln]{margin-left:auto;max-width:76px;overflow:hidden;color:#60758e;font-size:8px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.replen-group-metrics[b-eqn1yw8uln]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 12px 12px}.replen-group-metrics>div[b-eqn1yw8uln]{padding:10px;border-radius:9px;background:#f1f5f9}.replen-group-metrics small[b-eqn1yw8uln]{display:block;color:#718096;font-size:9px}.replen-group-metrics strong[b-eqn1yw8uln]{font-size:17px}.replen-group-card>footer[b-eqn1yw8uln]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-top:1px solid #e3eaf2}.replen-group-card>footer span[b-eqn1yw8uln]{color:#78899d;font-size:9px}.replen-group-card>footer button[b-eqn1yw8uln]{min-height:34px;padding:0 12px;border:0;border-radius:8px;color:#fff;background:#1769d4;font-size:10px;font-weight:750}.replen-group-card>footer button:disabled[b-eqn1yw8uln]{background:#aab6c5}@media(max-width:1200px){.replen-group-grid[b-eqn1yw8uln]{grid-template-columns:1fr}}@media(max-width:700px){.replen-group-stations[b-eqn1yw8uln]{grid-template-columns:repeat(2,minmax(0,1fr))}.replen-group-card>footer[b-eqn1yw8uln]{align-items:stretch;flex-direction:column}.replen-group-card>footer button[b-eqn1yw8uln]{width:100%}}
/* _content/WMS.UI/Pages/Workstation/StationPanel.razor.rz.scp.css */
.station-shell[b-1cjw1slzlx] {
    --station-primary: #2563eb;
    --station-border: #dce4ef;
    --station-muted: #64748b;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

.station-panel[b-1cjw1slzlx] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--station-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(15 23 42 / 6%);
}

.station-shell.is-disabled .station-panel[b-1cjw1slzlx] { opacity: .72; filter: grayscale(.35); }

.station-header[b-1cjw1slzlx] {
    min-height: 67px;
    padding: 12px 14px 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
    background: linear-gradient(135deg, #174c8d, #246bc0);
}

.station-header.is-disabled[b-1cjw1slzlx] { background: #64748b; }
.station-heading[b-1cjw1slzlx] { min-width: 0; }
.station-kicker[b-1cjw1slzlx] { display: block; margin-bottom: 2px; color: rgb(255 255 255 / 70%); font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.station-heading h5[b-1cjw1slzlx] { margin: 0; overflow: hidden; font-size: 18px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.station-header-actions[b-1cjw1slzlx] { display: flex; align-items: center; gap: 7px; }

.station-direction[b-1cjw1slzlx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}
.station-direction.in[b-1cjw1slzlx] { color: #064e3b; background: #d1fae5; }
.station-direction.out[b-1cjw1slzlx] { color: #7c2d12; background: #ffedd5; }

.station-setting[b-1cjw1slzlx] {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 7px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    cursor: pointer;
}
.station-setting:hover[b-1cjw1slzlx] { background: rgb(255 255 255 / 22%); }

.station-body[b-1cjw1slzlx] {
    flex: 1;
    min-height: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.station-progress[b-1cjw1slzlx] {
    width: 100%;
    margin-bottom: 12px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e3a8a;
    background: #eff6ff;
    font-size: 12px;
}
.station-progress strong[b-1cjw1slzlx] { font-size: 18px; }

.station-tote-area[b-1cjw1slzlx] {
    width: 100%;
    min-height: 168px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f6fc 100%);
}

.station-change-type[b-1cjw1slzlx] { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 8px; color: #fff; background: #0891b2; font-size: 13px; cursor: pointer; box-shadow: 0 3px 8px rgb(8 145 178 / 22%); }
.station-change-type:hover[b-1cjw1slzlx] { background: #0e7490; }
.station-change-type:focus-visible[b-1cjw1slzlx] { outline: 2px solid #38bdf8; outline-offset: 2px; }
.tote-type-dialog[b-1cjw1slzlx] { display: flex; flex-direction: column; gap: 16px; color: #172033; }
.tote-type-dialog__header[b-1cjw1slzlx] { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px; background: #eff6ff; }
.tote-type-dialog__header span[b-1cjw1slzlx], .tote-partition-selection > span[b-1cjw1slzlx] { display: block; color: #64748b; font-size: 10px; font-weight: 700; }
.tote-type-dialog__header strong[b-1cjw1slzlx] { display: block; color: #0f172a; font-size: 16px; }
.tote-type-dialog__header small[b-1cjw1slzlx] { color: #2563eb; font-size: 11px; }
.tote-type-options[b-1cjw1slzlx] { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tote-type-option[b-1cjw1slzlx] { min-width: 0; padding: 11px; display: flex; flex-direction: column; align-items: stretch; gap: 9px; border: 2px solid #e2e8f0; border-radius: 10px; color: #334155; background: #fff; cursor: pointer; }
.tote-type-option:hover[b-1cjw1slzlx] { border-color: #93c5fd; }
.tote-type-option.is-selected[b-1cjw1slzlx] { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgb(37 99 235 / 10%); }
.tote-type-option > strong[b-1cjw1slzlx] { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.tote-type-preview[b-1cjw1slzlx], .tote-partition-selection__preview[b-1cjw1slzlx] { position: relative; width: 100%; max-width: 280px; min-height: 70px; align-self: center; overflow: hidden; border: 2px solid #4f78a6; border-radius: 5px; background: #f8fbff; }
.tote-type-partition[b-1cjw1slzlx] { position: absolute; display: grid; place-items: center; overflow: hidden; border: 1px solid #2f6faf; color: #174c8d; background: #dbeafe; font-size: 9px; }
.tote-partition-selection[b-1cjw1slzlx] { padding: 12px; border: 1px solid #dbe5f1; border-radius: 10px; background: #f8fafc; }
.tote-partition-selection > span[b-1cjw1slzlx] { margin-bottom: 8px; }
.tote-partition-selection > small[b-1cjw1slzlx] { color: #94a3b8; font-size: 11px; }
.tote-partition-selection__preview[b-1cjw1slzlx] { min-height: 150px; }
.tote-partition-selection__preview .is-selectable[b-1cjw1slzlx] { position: absolute; padding: 0; cursor: pointer; }
.tote-partition-selection__preview .is-selectable:hover[b-1cjw1slzlx] { z-index: 2; background: #bfdbfe; }
.tote-partition-selection__preview .is-selectable.is-selected[b-1cjw1slzlx] { z-index: 3; color: #fff; background: #2563eb; box-shadow: inset 0 0 0 2px #1d4ed8; }
.tote-type-dialog__actions[b-1cjw1slzlx] { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

.agv-waiting-state[b-1cjw1slzlx] {
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #fed7aa;
    border-left: 4px solid #f97316;
    border-radius: 11px;
    color: #7c2d12;
    background: linear-gradient(100deg, #fff7ed, #fff);
    box-shadow: 0 4px 14px rgb(249 115 22 / 10%);
}

.agv-status-visual[b-1cjw1slzlx] {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #f97316;
}

.agv-arrow[b-1cjw1slzlx] { position: relative; z-index: 2; font-size: 21px; }
.agv-pulse[b-1cjw1slzlx] {
    position: absolute;
    inset: 0;
    border: 2px solid #fb923c;
    border-radius: inherit;
    animation: agv-pulse-b-1cjw1slzlx 1.8s ease-out infinite;
}

.agv-status-copy[b-1cjw1slzlx] { min-width: 0; display: flex; flex-direction: column; }
.agv-status-label[b-1cjw1slzlx] { color: #ea580c; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.agv-status-copy strong[b-1cjw1slzlx] { color: #9a3412; font-size: 15px; line-height: 1.3; }
.agv-status-copy small[b-1cjw1slzlx] { overflow: hidden; color: #78716c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agv-status-copy small b[b-1cjw1slzlx] { color: #44403c; }
.agv-live-dot[b-1cjw1slzlx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #9a3412;
    background: #ffedd5;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}
.agv-live-dot i[b-1cjw1slzlx] { width: 6px; height: 6px; border-radius: 50%; background: #f97316; animation: agv-blink-b-1cjw1slzlx 1.1s ease-in-out infinite; }

@keyframes agv-pulse-b-1cjw1slzlx { 0% { opacity: .65; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes agv-blink-b-1cjw1slzlx { 50% { opacity: .25; } }

.station-detail-table[b-1cjw1slzlx] { margin: 0 !important; font-size: 12px !important; }
.station-detail-table td[b-1cjw1slzlx] { padding: 7px 5px !important; border-color: #e8edf3 !important; vertical-align: middle; }
.station-detail-table td:nth-child(odd)[b-1cjw1slzlx] { color: #64748b; font-size: 11px; white-space: nowrap; }
.station-detail-table td:nth-child(even)[b-1cjw1slzlx] { color: #172033; font-weight: 600; }
.station-detail-table h2[b-1cjw1slzlx] { margin: 0 !important; font-size: 27px !important; }

.station-empty-state[b-1cjw1slzlx] {
    width: 100%;
    min-height: 390px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.station-empty-icon[b-1cjw1slzlx] {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 20px;
    color: #2563eb;
    background: #e8f0ff;
    font-size: 30px;
}
.station-empty-title[b-1cjw1slzlx] { color: #1e293b; font-size: 16px; font-weight: 750; }
.station-empty-hint[b-1cjw1slzlx] { margin: 5px 0 22px; color: var(--station-muted); font-size: 12px; }
.station-primary-action[b-1cjw1slzlx] { width: 100%; margin-top: auto; padding-top: 12px; }

.station-primary-action[b-1cjw1slzlx]  .btn {
    min-height: 43px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: var(--station-primary) !important;
    box-shadow: 0 4px 10px rgb(37 99 235 / 20%);
    font-size: 13px !important;
    font-weight: 700 !important;
}

.station-footer[b-1cjw1slzlx] {
    min-height: 62px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 1px solid var(--station-border);
    background: #f8fafc;
}
.station-footer[b-1cjw1slzlx]  .btn {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}
.station-footer[b-1cjw1slzlx]  .btn-success { background: #16a34a !important; }
.station-footer[b-1cjw1slzlx]  .btn-danger { background: #ef4444 !important; }

@media (max-width: 1500px) {
    .station-shell[b-1cjw1slzlx] {
        height: auto;
        min-height: 620px;
    }
}

@media (max-width: 760px) {
    .station-shell[b-1cjw1slzlx] { min-height: 590px; }
    .agv-waiting-state[b-1cjw1slzlx] { grid-template-columns: 48px minmax(0, 1fr); }
    .agv-live-dot[b-1cjw1slzlx] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .agv-pulse[b-1cjw1slzlx], .agv-live-dot i[b-1cjw1slzlx] { animation: none; }
}

/* Station popups */
.station-popup[b-1cjw1slzlx] { color: #172033; }
.popup-hero[b-1cjw1slzlx] {
    margin: -16px -16px 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid #dbeafe;
    background: linear-gradient(135deg, #eff6ff, #f8fbff);
}
.popup-hero-icon[b-1cjw1slzlx] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 16px rgb(37 99 235 / 23%);
    font-size: 19px;
}
.popup-hero span[b-1cjw1slzlx] { display: block; color: #2563eb; font-size: 9px; font-weight: 850; letter-spacing: .13em; }
.popup-hero strong[b-1cjw1slzlx] { display: block; margin: 1px 0; color: #0f172a; font-size: 18px; }
.popup-hero small[b-1cjw1slzlx] { display: block; color: #64748b; font-size: 11px; }

.popup-setting-row[b-1cjw1slzlx] {
    margin-bottom: 17px;
    padding: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #fff;
}
.popup-setting-copy[b-1cjw1slzlx] { min-width: 0; display: flex; align-items: center; gap: 10px; }
.popup-setting-icon[b-1cjw1slzlx] { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; }
.popup-setting-icon.is-green[b-1cjw1slzlx] { color: #059669; background: #d1fae5; }
.popup-setting-copy strong[b-1cjw1slzlx] { display: block; color: #1e293b; font-size: 13px; }
.popup-setting-copy small[b-1cjw1slzlx] { display: block; color: #64748b; font-size: 10px; line-height: 1.35; }

.popup-field[b-1cjw1slzlx] { margin-bottom: 15px; }
.popup-field > label[b-1cjw1slzlx] { display: block; margin-bottom: 7px; color: #334155; font-size: 11px; font-weight: 750; }
.popup-field > label i[b-1cjw1slzlx] { margin-right: 4px; color: #2563eb; }
.popup-field > small[b-1cjw1slzlx] { display: block; margin-top: 6px; color: #94a3b8; font-size: 10px; }
.popup-field[b-1cjw1slzlx]  .select, .popup-field[b-1cjw1slzlx]  .form-control { min-height: 43px !important; border-color: #cbd5e1 !important; border-radius: 8px !important; }
.popup-field[b-1cjw1slzlx]  .form-control:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%) !important; }

.popup-input-with-icon[b-1cjw1slzlx] { position: relative; }
.popup-input-with-icon > i[b-1cjw1slzlx] { position: absolute; z-index: 3; top: 50%; left: 13px; color: #2563eb; transform: translateY(-50%); }
.popup-input-with-icon[b-1cjw1slzlx]  input { padding-left: 38px !important; font-weight: 650; letter-spacing: .03em; }

.popup-note[b-1cjw1slzlx] {
    padding: 10px 11px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-radius: 8px;
    color: #475569;
    background: #f1f5f9;
    font-size: 10px;
}
.popup-note i[b-1cjw1slzlx] { margin-top: 1px; color: #2563eb; }
.popup-note b[b-1cjw1slzlx] { color: #1e293b; }

.station-popup-actions[b-1cjw1slzlx] { width: 100%; display: grid; grid-template-columns: 1fr 1.25fr; gap: 9px; }
.station-popup-actions[b-1cjw1slzlx]  .btn { min-height: 40px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 750 !important; }
.station-popup-actions[b-1cjw1slzlx]  .btn-primary { border-color: #2563eb !important; background: #2563eb !important; box-shadow: 0 4px 10px rgb(37 99 235 / 18%); }

/* Add product / replenishment popup */
.replen-product-popup[b-1cjw1slzlx] {
    min-height: 560px;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 14px;
    background: #f5f8fc;
}
.replen-popup-panel[b-1cjw1slzlx] {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce5f0;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 23 42 / 5%);
}
.replen-panel-heading[b-1cjw1slzlx] {
    min-height: 66px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #e5ebf3;
    background: linear-gradient(180deg, #fff, #f8fafc);
}
.replen-panel-icon[b-1cjw1slzlx] { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; font-size: 16px; }
.replen-panel-icon.tote[b-1cjw1slzlx] { color: #2563eb; background: #dbeafe; }
.replen-panel-icon.target[b-1cjw1slzlx] { color: #059669; background: #d1fae5; }
.replen-panel-heading > div:nth-child(2)[b-1cjw1slzlx] { min-width: 0; }
.replen-panel-heading span:not(.replen-panel-station):not(.replen-ready-badge)[b-1cjw1slzlx] { display: block; color: #64748b; font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.replen-panel-heading strong[b-1cjw1slzlx] { display: block; overflow: hidden; color: #172033; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.replen-panel-station[b-1cjw1slzlx], .replen-ready-badge[b-1cjw1slzlx] { margin-left: auto; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.replen-panel-station[b-1cjw1slzlx] { color: #1d4ed8; background: #eff6ff; }
.replen-ready-badge[b-1cjw1slzlx] { color: #047857; background: #d1fae5; }
.replen-ready-badge i[b-1cjw1slzlx] { margin-right: 3px; }

.replen-tote-visual[b-1cjw1slzlx] { padding: 18px 15px 14px; border-bottom: 1px solid #e8edf4; background: linear-gradient(180deg, #f8fbff, #fff); }
.replen-tote-content[b-1cjw1slzlx] { flex: 1; overflow: auto; }
.replen-detail-body[b-1cjw1slzlx], .replen-target-body[b-1cjw1slzlx] { padding: 14px !important; }
.replen-target-body[b-1cjw1slzlx] { flex: 1; }
.replen-section-label[b-1cjw1slzlx] { color: #334155; font-size: 11px; font-weight: 800; }
.replen-section-label i[b-1cjw1slzlx] { margin-right: 5px; color: #2563eb; }

.replen-info-table[b-1cjw1slzlx] { margin: 0 !important; font-size: 11px !important; }
.replen-info-table td[b-1cjw1slzlx] { padding: 8px 7px !important; border-color: #e6edf5 !important; vertical-align: middle; }
.replen-info-table td:nth-child(odd)[b-1cjw1slzlx] { color: #64748b; white-space: nowrap; }
.replen-info-table td:nth-child(even)[b-1cjw1slzlx] { color: #172033; font-weight: 650; }
.replen-info-table h2[b-1cjw1slzlx] { margin: 0 !important; font-size: 27px !important; }

.replen-product-detail[b-1cjw1slzlx] { align-items: flex-start; gap: 8px; }
.replen-product-image[b-1cjw1slzlx] {
    width: 116px;
    min-width: 116px;
    min-height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 11px;
    background: #f8fafc;
}
.replen-product-image:empty[b-1cjw1slzlx]::after { content: "\f1b2"; color: #cbd5e1; font: 34px/1 "Font Awesome 6 Free"; font-weight: 900; }
.replen-product-image img[b-1cjw1slzlx] { max-width: 100% !important; max-height: 110px; object-fit: contain; }
.replen-product-info[b-1cjw1slzlx] { min-width: 0; }

.replen-qty-summary[b-1cjw1slzlx] { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.replen-qty-card[b-1cjw1slzlx] { padding: 14px 10px; display: grid; grid-template-columns: 1fr auto; align-items: end; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; }
.replen-qty-card span[b-1cjw1slzlx] { grid-column: 1 / -1; margin-bottom: 5px; color: #64748b; font-size: 10px; }
.replen-qty-card strong[b-1cjw1slzlx] { color: #475569; font-size: 29px; line-height: 1; }
.replen-qty-card small[b-1cjw1slzlx] { color: #94a3b8; font-size: 9px; }
.replen-qty-card.recommend[b-1cjw1slzlx] { border-color: #bbf7d0; background: #f0fdf4; }
.replen-qty-card.recommend strong[b-1cjw1slzlx] { color: #16a34a; }

.replen-scan-empty[b-1cjw1slzlx] { min-height: 450px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.replen-scan-icon[b-1cjw1slzlx] { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 19px; color: #2563eb; background: #dbeafe; font-size: 27px; }
.replen-scan-empty h5[b-1cjw1slzlx] { margin: 0; color: #172033; font-size: 16px; font-weight: 800; }
.replen-scan-empty p[b-1cjw1slzlx] { margin: 5px 0 16px; color: #64748b; font-size: 11px; }
.replen-scan-input[b-1cjw1slzlx] { width: min(100%, 330px); }
.replen-scan-input[b-1cjw1slzlx]  .form-control { min-height: 44px !important; border-color: #bfdbfe !important; border-radius: 9px !important; }

.replen-popup-actions[b-1cjw1slzlx] { width: 100%; display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; }
.replen-popup-actions[b-1cjw1slzlx]  .btn { min-height: 45px !important; border-radius: 9px !important; font-size: 12px !important; font-weight: 800 !important; }
.replen-popup-actions[b-1cjw1slzlx]  .btn-success { border-color: #16a34a !important; background: #16a34a !important; box-shadow: 0 4px 12px rgb(22 163 74 / 18%); }

@media (max-width: 1050px) {
    .replen-product-popup[b-1cjw1slzlx] { grid-template-columns: 1fr; }
    .replen-product-detail[b-1cjw1slzlx] { flex-direction: column; }
    .replen-product-image[b-1cjw1slzlx] { width: 100%; }
}

@media (max-width: 600px) {
    .replen-qty-summary[b-1cjw1slzlx] { grid-template-columns: 1fr; }
    .replen-popup-actions[b-1cjw1slzlx] { grid-template-columns: 1fr; }
}

/* งานหยิบขายของ Tote บน station: ปุ่ม Pick กลางการ์ด / Order รอ Pallet ปลายทาง */
.station-pick-action[b-1cjw1slzlx] {
    margin: 4px auto 12px;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #f2c66d;
    border-radius: 12px;
    background: #fffaf0;
}

.station-pick-action > span[b-1cjw1slzlx] {
    color: #9a5b00;
    font-size: 14px;
    font-weight: 800;
}

.station-pick-waiting[b-1cjw1slzlx] {
    margin: 4px auto 12px;
    width: min(420px, 100%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #475569;
    background: #f8fafc;
}

.station-pick-waiting > i[b-1cjw1slzlx] {
    font-size: 18px;
}

.station-pick-waiting > div[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
}

.station-pick-waiting strong[b-1cjw1slzlx] {
    font-size: 13px;
}

.station-pick-waiting small[b-1cjw1slzlx] {
    font-size: 12px;
}

.haipick-page[b-1cjw1slzlx] {
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow: hidden;
    background: #f4f7fb;
}

.haipick-workstation[b-1cjw1slzlx] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 6px 20px rgb(15 23 42 / 6%);
}

.haipick-header[b-1cjw1slzlx] {
    min-height: 66px;
    padding: 10px 16px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid #dce5f0 !important;
    border-radius: 0 !important;
    color: #fff;
    background: linear-gradient(135deg, #1459a6, #2872c8);
}

.haipick-header.is-disabled[b-1cjw1slzlx] {
    color: #fff;
    background: linear-gradient(135deg, #64748b, #475569);
}

.haipick-title[b-1cjw1slzlx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.haipick-title span[b-1cjw1slzlx] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.haipick-title h2[b-1cjw1slzlx] {
    margin: 0;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

.haipick-header-actions[b-1cjw1slzlx] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.haipick-switch-button[b-1cjw1slzlx] {
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-switch-button:hover[b-1cjw1slzlx] {
    color: #fff;
    background: rgb(255 255 255 / 24%);
    transform: translateY(-1px);
}

.haipick-setting-button[b-1cjw1slzlx] {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 30%);
    border-radius: 9px;
    color: #fff;
    background: rgb(255 255 255 / 12%);
    font-size: 15px;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.haipick-setting-button:hover[b-1cjw1slzlx] {
    background: rgb(255 255 255 / 22%);
    transform: translateY(-1px);
}

.haipick-body[b-1cjw1slzlx] {
    min-width: 0;
    min-height: 0;
    padding: 12px !important;
    overflow: auto;
    background: #f7f9fc;
}

.haipick-body > .d-flex.flex-column[b-1cjw1slzlx] {
    min-height: 100%;
    gap: 12px;
}

.haipick-work-area[b-1cjw1slzlx] {
    min-width: 0;
    min-height: 260px;
    gap: 12px;
}

.haipick-work-panel[b-1cjw1slzlx] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.haipick-work-panel > .w-100.h-100[b-1cjw1slzlx] {
    padding: 14px;
}

.haipick-work-panel .card.rounded-0[b-1cjw1slzlx] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-work-panel img[b-1cjw1slzlx] {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.haipick-body[b-1cjw1slzlx]  .badge {
    border-radius: 999px;
}

.haipick-body[b-1cjw1slzlx]  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

@media (max-width: 900px) {
    .haipick-page[b-1cjw1slzlx] {
        padding: 10px;
        overflow-y: auto;
    }

    .haipick-work-area[b-1cjw1slzlx] {
        height: auto !important;
        flex-direction: column !important;
    }

    .haipick-work-panel[b-1cjw1slzlx] {
        min-height: 260px;
    }
}


/* Populated picking state: tote at left, item details at right, PTL fixed below */
.haipick-header[b-1cjw1slzlx] {
    width: 100%;
    display: flex !important;
}

.haipick-setting-button[b-1cjw1slzlx] {
    flex: 0 0 38px;
}

.haipick-body > .d-flex.flex-column.h-100[b-1cjw1slzlx] {
    display: grid !important;
    grid-template-rows: auto minmax(250px, 1fr) auto;
    align-items: stretch;
}

.haipick-work-area[b-1cjw1slzlx] {
    min-height: 0;
    flex: 1 1 auto;
    align-items: stretch;
}

.haipick-work-area > .haipick-work-panel:first-child[b-1cjw1slzlx] {
    width: 26% !important;
    flex: 0 0 26%;
}

.haipick-work-area > .haipick-work-panel:nth-child(2)[b-1cjw1slzlx] {
    width: auto !important;
    flex: 1 1 74%;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.d-flex[b-1cjw1slzlx] {
    min-height: 0;
    flex: 0 0 auto;
    padding: 14px;
    border-bottom: 1px solid #e8edf3;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table[b-1cjw1slzlx] {
    margin: 0;
    font-size: 12px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td[b-1cjw1slzlx] {
    padding: 7px 9px;
    border-color: #edf1f6;
    vertical-align: middle;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) table td.text-end[b-1cjw1slzlx] {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 84px;
    margin-top: auto;
    padding: 10px 12px 12px !important;
    gap: 10px;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 > .card[b-1cjw1slzlx] {
    min-height: 68px;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
}

.haipick-work-area > .haipick-work-panel:nth-child(2) > .w-100.h-100.pb-3 .h1[b-1cjw1slzlx] {
    margin: 2px 0 0;
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

.haipick-body > .d-flex.flex-column.h-100 > .w-100:last-child[b-1cjw1slzlx] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-1cjw1slzlx] {
        display: flex !important;
    }

    .haipick-work-area > .haipick-work-panel:first-child[b-1cjw1slzlx],
    .haipick-work-area > .haipick-work-panel:nth-child(2)[b-1cjw1slzlx] {
        width: 100% !important;
        flex-basis: auto;
    }
}


/* Keep the work area visible while the station is in STANDBY */
.haipick-body[b-1cjw1slzlx] {
    display: block !important;
}

.haipick-body > .d-flex.flex-column.h-100[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 700px;
    display: flex !important;
    flex-direction: column !important;
}

.haipick-body .haipick-work-area[b-1cjw1slzlx] {
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    flex: 0 0 360px !important;
    display: flex !important;
}

.haipick-empty-state[b-1cjw1slzlx] {
    max-width: 320px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #64748b;
    text-align: center;
}

.haipick-empty-icon[b-1cjw1slzlx] {
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 22px;
}

.haipick-empty-state strong[b-1cjw1slzlx] {
    color: #172033;
    font-size: 16px;
    font-weight: 800;
}

.haipick-empty-state small[b-1cjw1slzlx] {
    color: #94a3b8;
    font-size: 11px;
}

button.haipick-setting-button[b-1cjw1slzlx] {
    position: static !important;
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgb(255 255 255 / 30%) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgb(255 255 255 / 12%) !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .haipick-body > .d-flex.flex-column.h-100[b-1cjw1slzlx] {
        min-height: 0;
    }

    .haipick-body .haipick-work-area[b-1cjw1slzlx] {
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
    }
}


/* Replen-style active task banner */
.haipick-task-banner[b-1cjw1slzlx] {
    width: calc(100% - 20px);
    min-height: 70px;
    margin: 10px 10px 0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e3a5f;
    background: #eff6ff;
}

.haipick-task-icon[b-1cjw1slzlx] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 17px;
}

.haipick-task-copy[b-1cjw1slzlx] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.haipick-task-copy small[b-1cjw1slzlx] {
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .12em;
}

.haipick-task-copy strong[b-1cjw1slzlx] {
    color: #172033;
    font-size: 13px;
    font-weight: 800;
}

.haipick-task-copy span[b-1cjw1slzlx] {
    overflow: hidden;
    color: #64748b;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-task-count[b-1cjw1slzlx] {
    min-width: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.haipick-task-count strong[b-1cjw1slzlx] {
    color: #2563eb;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
}

.haipick-task-count span[b-1cjw1slzlx] {
    color: #64748b;
    font-size: 8px;
    text-transform: uppercase;
}

.haipick-waiting-badge[b-1cjw1slzlx] {
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #92400e;
    background: #fef3c7;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .06em;
}

.haipick-waiting-badge i[b-1cjw1slzlx] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
}

.haipick-modal[b-1cjw1slzlx]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 24%);
}

.haipick-modal[b-1cjw1slzlx]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-1cjw1slzlx]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.haipick-modal[b-1cjw1slzlx]  .modal-body {
    padding: 18px;
    background: #f8fafc;
}

.haipick-modal[b-1cjw1slzlx]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #fff;
}

.haipick-modal[b-1cjw1slzlx]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    border-radius: 8px !important;
}

.haipick-modal[b-1cjw1slzlx]  .form-control,
.haipick-modal[b-1cjw1slzlx]  .select {
    min-height: 40px;
    border-color: #cfd9e7;
    border-radius: 8px !important;
}

@media (max-width: 640px) {
    .haipick-task-banner[b-1cjw1slzlx] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .haipick-waiting-badge[b-1cjw1slzlx] {
        margin-left: 52px;
    }
}


/* PICK_CONFIRM_RETURN — aligned with the Replen workstation visual language */
.haipick-return-body[b-1cjw1slzlx] {
    padding: 14px !important;
    background: #f5f8fc;
}

.haipick-return-shell[b-1cjw1slzlx] {
    min-height: 0;
}

.haipick-return-layout[b-1cjw1slzlx] {
    gap: 14px;
    min-height: 0;
    padding-top: 12px;
}

.haipick-return-tote-panel[b-1cjw1slzlx],
.haipick-return-products[b-1cjw1slzlx] {
    min-width: 0;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 44, 83, .05);
}

.haipick-return-tote-panel[b-1cjw1slzlx] {
    flex: 0 0 31%;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-return-products[b-1cjw1slzlx] {
    flex: 1 1 69%;
}

.haipick-return-tote-content[b-1cjw1slzlx] {
    justify-content: flex-start !important;
    gap: 18px;
    padding-top: 6px;
}

.haipick-return-tote-heading[b-1cjw1slzlx] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-return-tote-heading > div[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-return-eyebrow[b-1cjw1slzlx],
.haipick-return-products-header span[b-1cjw1slzlx],
.haipick-setting-summary span[b-1cjw1slzlx] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-tote-heading strong[b-1cjw1slzlx] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-return-ready[b-1cjw1slzlx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-return-tote-stage[b-1cjw1slzlx] {
    width: 100%;
    min-height: 245px;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-return-tote-visual[b-1cjw1slzlx] {
    position: relative;
    width: min(240px, 78%);
    height: 160px;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgba(40, 101, 238, .15);
}

.haipick-return-tote-visual[b-1cjw1slzlx]::before,
.haipick-return-tote-visual[b-1cjw1slzlx]::after {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
}

.haipick-return-tote-visual[b-1cjw1slzlx]::before { left: 12px; }
.haipick-return-tote-visual[b-1cjw1slzlx]::after { right: 12px; }

.haipick-return-products-header[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 14px 18px;
    border-bottom: 1px solid #dde6f1;
    background: #fff;
}

.haipick-return-products-icon[b-1cjw1slzlx],
.haipick-setting-summary-icon[b-1cjw1slzlx] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #1765ed;
    background: #e4eeff;
    font-size: 18px;
}

.haipick-return-products-header > div:last-child[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
}

.haipick-return-products-header strong[b-1cjw1slzlx] {
    color: #12243d;
    font-size: 17px;
}

.haipick-return-products-body[b-1cjw1slzlx] {
    min-height: 0;
    padding: 16px !important;
    align-items: flex-start !important;
    background: #fbfdff;
    overflow: auto;
}

.haipick-return-products-body .card[b-1cjw1slzlx] {
    border-color: #dce5f0 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.haipick-return-products-body .card-header[b-1cjw1slzlx] {
    border-radius: 10px 10px 0 0 !important;
}

.haipick-return-products-body table td[b-1cjw1slzlx],
.haipick-return-products-body table th[b-1cjw1slzlx] {
    border-color: #e7edf5 !important;
}

.haipick-return-footer[b-1cjw1slzlx] {
    padding: 12px 16px !important;
    border-top: 1px solid #dce5f0 !important;
    background: #fff !important;
}

.haipick-store-in-button[b-1cjw1slzlx] {
    max-width: none !important;
    min-height: 44px;
    border-radius: 8px !important;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 5px 12px rgba(18, 163, 74, .18);
}

/* Station settings modal */
[b-1cjw1slzlx] .haipick-setting-modal .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 65px rgba(8, 31, 61, .24);
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e7f0;
    background: #fff;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-title {
    color: #132a49;
    font-size: 18px;
    font-weight: 800;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-body {
    padding: 18px;
    background: #f5f8fc;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer {
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e0e7f0;
    background: #fff;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 700;
}

.haipick-setting-summary[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #eef5ff;
}

.haipick-setting-summary > div:last-child[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-summary strong[b-1cjw1slzlx] {
    color: #102a4c;
    font-size: 18px;
}

.haipick-setting-summary small[b-1cjw1slzlx],
.haipick-setting-section-title small[b-1cjw1slzlx] {
    color: #6c7d92;
    font-size: 11px;
}

.haipick-setting-section[b-1cjw1slzlx] {
    padding: 14px;
    margin-top: 10px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
}

.haipick-setting-section-title[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
    color: #1b5fd5;
}

.haipick-setting-section-title > div[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
}

.haipick-setting-section-title strong[b-1cjw1slzlx] {
    color: #1c2e47;
    font-size: 13px;
}

[b-1cjw1slzlx] .haipick-setting-section .form-group,
[b-1cjw1slzlx] .haipick-setting-section .row {
    margin-bottom: 0 !important;
}

[b-1cjw1slzlx] .haipick-setting-section label {
    color: #334861;
    font-weight: 700;
}

.haipick-zone-list[b-1cjw1slzlx] {
    max-height: 210px;
    overflow: auto;
    padding: 4px 6px;
}

[b-1cjw1slzlx] .haipick-zone-list .form-check {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px 8px 32px;
    margin: 4px 0;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fbfcfe;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-1cjw1slzlx] {
        flex-direction: column !important;
        overflow: auto;
    }

    .haipick-return-tote-panel[b-1cjw1slzlx],
    .haipick-return-products[b-1cjw1slzlx] {
        flex: 0 0 auto;
        width: 100%;
    }

    .haipick-return-tote-stage[b-1cjw1slzlx] {
        min-height: 210px;
    }
}


/* Return product list and primary action refinement */
.haipick-return-layout[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 365px;
    align-items: stretch;
}

.haipick-return-products[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 365px;
}

.haipick-return-products-body[b-1cjw1slzlx] {
    overflow: visible !important;
    align-items: stretch !important;
    padding: 14px !important;
}

.haipick-return-products-body > div[b-1cjw1slzlx],
.haipick-return-products-body > .card[b-1cjw1slzlx] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body .card-body[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 18px !important;
}

.haipick-return-products-body table[b-1cjw1slzlx] {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}

.haipick-return-products-body table tr[b-1cjw1slzlx] {
    min-height: 38px;
}

.haipick-return-products-body table th[b-1cjw1slzlx],
.haipick-return-products-body table td[b-1cjw1slzlx] {
    padding: 9px 12px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e8eef6 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-return-products-body table th[b-1cjw1slzlx] {
    width: 110px;
    color: #60728a;
    font-size: 12px;
    font-weight: 700;
}

.haipick-return-products-body table td[b-1cjw1slzlx] {
    color: #172b46;
    font-size: 13px;
    font-weight: 600;
}

.haipick-product-qty[b-1cjw1slzlx] {
    min-height: 72px;
    margin-top: 12px !important;
    padding: 10px 16px;
    flex-direction: row !important;
    justify-content: space-between !important;
    border: 1px solid #bdeacb;
    border-radius: 9px;
    background: #effbf3;
}

.haipick-product-qty b[b-1cjw1slzlx] {
    color: #4b6255;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.haipick-product-qty .h1[b-1cjw1slzlx] {
    margin: 0 !important;
    color: #0ba64b !important;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
}

.haipick-return-footer[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 11px 16px !important;
}

.haipick-return-footer-copy[b-1cjw1slzlx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-return-footer-copy span[b-1cjw1slzlx] {
    color: #62748c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-return-footer-copy strong[b-1cjw1slzlx] {
    color: #1a2f4c;
    font-size: 12px;
    font-weight: 700;
}

.haipick-store-in-button[b-1cjw1slzlx] {
    width: 220px !important;
    min-width: 220px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(18, 163, 74, .22);
}

.haipick-store-in-button:hover:not(:disabled)[b-1cjw1slzlx] {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 163, 74, .27);
}

@media (max-width: 680px) {
    .haipick-return-footer[b-1cjw1slzlx] {
        align-items: stretch;
        flex-direction: column;
    }

    .haipick-store-in-button[b-1cjw1slzlx] {
        width: 100% !important;
        min-width: 0;
    }
}


/* Let PICK_CONFIRM_RETURN cards size to content; scrolling belongs to the page only. */
.haipick-return-body[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-shell[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.haipick-return-layout[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 365px !important;
    overflow: visible !important;
}

.haipick-return-tote-panel[b-1cjw1slzlx],
.haipick-return-products[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 365px;
    max-height: none !important;
}

.haipick-return-tote-content[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
}

.haipick-return-products-body[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body > .w-100[b-1cjw1slzlx],
.haipick-return-products-body > div[b-1cjw1slzlx] {
    max-height: none !important;
    overflow: visible !important;
}

.haipick-return-products-body .haipick-product-qty[b-1cjw1slzlx] {
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .haipick-return-layout[b-1cjw1slzlx],
    .haipick-return-tote-panel[b-1cjw1slzlx],
    .haipick-return-products[b-1cjw1slzlx] {
        min-height: 0 !important;
    }
}


/* Type1 product card must include the quantity summary in its intrinsic height. */
.haipick-return-product-card[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch;
    overflow: visible !important;
}

.haipick-return-product-detail[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: visible !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
}

.haipick-return-product-detail > .w-100[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px !important;
}

.haipick-return-product-detail .haipick-product-qty[b-1cjw1slzlx] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}

.haipick-return-products[b-1cjw1slzlx] {
    overflow: visible !important;
}


/* Final containment for the Qty summary: the previous 365px row was too short. */
@media (min-width: 901px) {
    .haipick-return-layout[b-1cjw1slzlx] {
        min-height: 410px !important;
    }

    .haipick-return-tote-panel[b-1cjw1slzlx],
    .haipick-return-products[b-1cjw1slzlx] {
        min-height: 410px !important;
    }
}

.haipick-return-products[b-1cjw1slzlx] {
    box-sizing: border-box;
    overflow: hidden !important;
}

.haipick-return-products-body[b-1cjw1slzlx] {
    box-sizing: border-box;
    padding-bottom: 16px !important;
}

.haipick-return-product-card[b-1cjw1slzlx],
.haipick-return-product-detail[b-1cjw1slzlx] {
    width: 100%;
    box-sizing: border-box;
}

.haipick-return-product-detail[b-1cjw1slzlx] {
    display: block !important;
}

.haipick-return-product-detail > .w-100[b-1cjw1slzlx] {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box;
}

.haipick-product-qty[b-1cjw1slzlx] {
    position: static !important;
    flex: 0 0 64px !important;
    min-height: 64px !important;
    max-height: 64px;
    box-sizing: border-box;
}


/* Responsive return view: keep the primary action visible above the application footer. */
@media (max-width: 900px) {
    .haipick-return-body[b-1cjw1slzlx] {
        flex: 1 1 auto !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 18px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .haipick-return-shell[b-1cjw1slzlx] {
        min-height: max-content !important;
        padding-bottom: 4px;
    }

    .haipick-return-layout[b-1cjw1slzlx] {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px;
        height: auto !important;
        min-height: max-content !important;
    }

    .haipick-return-tote-panel[b-1cjw1slzlx],
    .haipick-return-products[b-1cjw1slzlx] {
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .haipick-return-products-body[b-1cjw1slzlx],
    .haipick-return-product-card[b-1cjw1slzlx],
    .haipick-return-product-detail[b-1cjw1slzlx] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .haipick-return-footer[b-1cjw1slzlx] {
        position: sticky;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        flex: 0 0 auto;
        border-top: 1px solid #d9e3ef !important;
        box-shadow: 0 -8px 20px rgba(15, 44, 83, .10);
        background: rgba(255, 255, 255, .98) !important;
    }
}

@media (max-width: 680px) {
    .haipick-return-body[b-1cjw1slzlx] {
        padding: 10px !important;
        padding-bottom: 16px !important;
    }

    .haipick-return-tote-panel[b-1cjw1slzlx] {
        padding: 12px;
    }

    .haipick-return-tote-stage[b-1cjw1slzlx] {
        min-height: 190px;
    }

    .haipick-return-tote-visual[b-1cjw1slzlx] {
        width: min(220px, 76%);
        height: 140px;
    }

    .haipick-return-footer-copy[b-1cjw1slzlx] {
        display: none;
    }

    .haipick-return-footer[b-1cjw1slzlx] {
        padding: 10px 12px !important;
    }
}


/* Station number and picking type share the same header line. */
.haipick-title-line[b-1cjw1slzlx] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.haipick-title-line h2[b-1cjw1slzlx] {
    flex: 0 0 auto;
}

[b-1cjw1slzlx] .haipick-title-line > div {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0;
    margin: 0 !important;
}

[b-1cjw1slzlx] .haipick-title-line .h5 {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    font-size: inherit;
    line-height: 1;
}

[b-1cjw1slzlx] .haipick-title-line .badge {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 9px;
    margin: 0 4px 0 0 !important;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    color: #fff;
    background: #ff443d !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(115, 17, 12, .18);
}

@media (max-width: 680px) {
    .haipick-title-line[b-1cjw1slzlx] {
        gap: 6px;
    }

    .haipick-title h2[b-1cjw1slzlx] {
        font-size: 19px;
    }

    [b-1cjw1slzlx] .haipick-title-line .badge {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* Replen-style workstation actions */
.haipick-store-in-button[b-1cjw1slzlx] {
    width: 190px !important;
    min-width: 190px;
    min-height: 42px;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border: 1px solid #0b9b49 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background: #12a84f !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1 !important;
    text-transform: uppercase;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-store-in-button:hover:not(:disabled)[b-1cjw1slzlx] {
    border-color: #087f3b !important;
    background: #0c9344 !important;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(18, 168, 79, .26);
}

.haipick-store-in-button:disabled[b-1cjw1slzlx] {
    border-color: #a8d9bc !important;
    background: #b9ddc7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 13px 16px !important;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn {
    min-width: 96px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    border-radius: 8px !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1 !important;
    box-shadow: none;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-secondary,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-light {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-secondary:hover,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-light:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-primary,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-info,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-success {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20);
}

[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-primary:hover,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-info:hover,
[b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn-success:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    .haipick-store-in-button[b-1cjw1slzlx] {
        width: 100% !important;
        min-width: 0;
    }

    [b-1cjw1slzlx] .haipick-setting-modal .modal-footer .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* BootstrapBlazor Button renders inside a child component: use ::deep from scoped wrappers. */
[b-1cjw1slzlx] .haipick-return-footer .haipick-store-in-button {
    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #0b9847 !important;
    border-radius: 8px !important;
    color: #fff !important;
    background-color: #12a84f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(18, 168, 79, .20) !important;
}

[b-1cjw1slzlx] .haipick-return-footer .haipick-store-in-button:hover:not(:disabled) {
    border-color: #087f3b !important;
    background-color: #0c9344 !important;
    transform: translateY(-1px);
}

.haipick-setting-actions[b-1cjw1slzlx] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

[b-1cjw1slzlx] .haipick-setting-actions .btn {
    min-width: 104px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
}

[b-1cjw1slzlx] .haipick-setting-actions .btn-secondary {
    border: 1px solid #cfd9e5 !important;
    color: #344860 !important;
    background: #fff !important;
    box-shadow: none !important;
}

[b-1cjw1slzlx] .haipick-setting-actions .btn-secondary:hover {
    border-color: #aebdce !important;
    background: #f4f7fa !important;
}

[b-1cjw1slzlx] .haipick-setting-actions .btn-primary {
    border: 1px solid #1765ed !important;
    color: #fff !important;
    background: #2567e8 !important;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .20) !important;
}

[b-1cjw1slzlx] .haipick-setting-actions .btn-primary:hover {
    border-color: #1555c8 !important;
    background: #155bd5 !important;
}

@media (max-width: 680px) {
    [b-1cjw1slzlx] .haipick-return-footer .haipick-store-in-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .haipick-setting-actions[b-1cjw1slzlx] {
        gap: 8px;
    }

    [b-1cjw1slzlx] .haipick-setting-actions .btn {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}


/* Native setting actions — not affected by BootstrapBlazor Button internals. */
.haipick-setting-action[b-1cjw1slzlx] {
    min-width: 108px;
    height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.haipick-setting-action i[b-1cjw1slzlx] {
    font-size: 13px;
}

.haipick-setting-action-close[b-1cjw1slzlx] {
    border: 1px solid #cbd6e3;
    color: #344860;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 44, 83, .06);
}

.haipick-setting-action-close:hover[b-1cjw1slzlx] {
    border-color: #aebdce;
    color: #1f334c;
    background: #f4f7fa;
}

.haipick-setting-action-save[b-1cjw1slzlx] {
    border: 1px solid #1765ed;
    color: #fff;
    background: #2567e8;
    box-shadow: 0 5px 12px rgba(37, 103, 232, .23);
}

.haipick-setting-action-save:hover[b-1cjw1slzlx] {
    border-color: #1555c8;
    background: #155bd5;
    box-shadow: 0 7px 16px rgba(37, 103, 232, .28);
    transform: translateY(-1px);
}

.haipick-setting-action:focus-visible[b-1cjw1slzlx] {
    outline: 3px solid rgba(37, 103, 232, .22);
    outline-offset: 2px;
}

@media (max-width: 680px) {
    .haipick-setting-action[b-1cjw1slzlx] {
        flex: 1 1 0;
        min-width: 0;
    }
}


/* Account for the shared task banner in populated return states. */
@media (min-width: 901px) {
    .haipick-return-layout:has(.haipick-task-banner)[b-1cjw1slzlx] {
        min-height: 490px !important;
    }

    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-tote-panel[b-1cjw1slzlx],
    .haipick-return-layout:has(.haipick-task-banner) .haipick-return-products[b-1cjw1slzlx] {
        min-height: 490px !important;
    }
}

.haipick-return-tote-panel > .haipick-task-banner[b-1cjw1slzlx] {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 0 12px;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-content[b-1cjw1slzlx] {
    flex: 1 1 auto;
}

.haipick-return-tote-panel:has(> .haipick-task-banner) .haipick-return-tote-stage[b-1cjw1slzlx] {
    min-height: 220px;
}


/* Replen-inspired product detail panel */
.haipick-return-products-header[b-1cjw1slzlx] {
    position: relative;
}

.haipick-return-product-ready[b-1cjw1slzlx] {
    margin-left: auto;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    color: #08783e !important;
    background: #d9f8e8;
    font-size: 10px !important;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.haipick-replen-product[b-1cjw1slzlx] {
    width: 100%;
    min-height: 0;
    padding: 14px;
    border: 1px solid #dce5f0;
    border-radius: 11px;
    background: #fff;
}

.haipick-replen-product-main[b-1cjw1slzlx] {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.haipick-replen-product-image[b-1cjw1slzlx] {
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #d5e1ee;
    border-radius: 10px;
    color: #c7d3e1;
    background: #f7faff;
    font-size: 36px;
}

.haipick-replen-product-image img[b-1cjw1slzlx] {
    width: 100%;
    height: 100%;
    padding: 10px;
    object-fit: contain;
}

.haipick-replen-product-details[b-1cjw1slzlx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.haipick-replen-detail-row[b-1cjw1slzlx] {
    min-height: 38px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 82px minmax(0, .55fr);
    align-items: center;
    column-gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid #e6edf5;
}

.haipick-replen-detail-row.single[b-1cjw1slzlx] {
    grid-template-columns: 92px minmax(0, 1fr);
}

.haipick-replen-detail-row span[b-1cjw1slzlx] {
    color: #65768c;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.haipick-replen-detail-row strong[b-1cjw1slzlx] {
    min-width: 0;
    overflow: hidden;
    color: #25364d;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-replen-detail-row .haipick-company-value[b-1cjw1slzlx] {
    color: #ff3f36;
    font-size: 20px;
    font-weight: 800;
}

.haipick-replen-metrics[b-1cjw1slzlx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0 132px;
}

.haipick-replen-metric[b-1cjw1slzlx] {
    min-height: 76px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #dae4ef;
    border-radius: 10px;
    background: #f7f9fc;
}

.haipick-replen-metric span[b-1cjw1slzlx] {
    color: #65768c;
    font-size: 10px;
    font-weight: 650;
}

.haipick-replen-metric strong[b-1cjw1slzlx] {
    margin-top: 3px;
    color: #344860;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
}

.haipick-replen-metric.is-primary[b-1cjw1slzlx] {
    border-color: #b9eccb;
    background: #effbf3;
}

.haipick-replen-metric.is-primary strong[b-1cjw1slzlx] {
    color: #0ba64b;
}

.haipick-replen-product-empty[b-1cjw1slzlx] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #75869a;
}

.haipick-replen-product-empty i[b-1cjw1slzlx] {
    color: #c7d3e1;
    font-size: 42px;
}

@media (max-width: 1100px) {
    .haipick-replen-product-main[b-1cjw1slzlx] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .haipick-replen-product-image[b-1cjw1slzlx] {
        width: 88px;
        height: 96px;
    }

    .haipick-replen-metrics[b-1cjw1slzlx] {
        margin-left: 104px;
    }
}

@media (max-width: 680px) {
    .haipick-return-product-ready[b-1cjw1slzlx] {
        padding: 4px 7px;
    }

    .haipick-replen-product[b-1cjw1slzlx] {
        padding: 10px;
    }

    .haipick-replen-product-main[b-1cjw1slzlx] {
        grid-template-columns: 1fr;
    }

    .haipick-replen-product-image[b-1cjw1slzlx] {
        width: 100%;
        height: 120px;
    }

    .haipick-replen-detail-row[b-1cjw1slzlx],
    .haipick-replen-detail-row.single[b-1cjw1slzlx] {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .haipick-replen-detail-row:not(.single) span:nth-of-type(2)[b-1cjw1slzlx],
    .haipick-replen-detail-row:not(.single) strong:nth-of-type(2)[b-1cjw1slzlx] {
        margin-top: 6px;
    }

    .haipick-replen-metrics[b-1cjw1slzlx] {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
}


/* PICK state — isolated responsive layout */
.haipick-pick-body[b-1cjw1slzlx] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #f5f8fc;
}

.haipick-pick-shell[b-1cjw1slzlx] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-layout[b-1cjw1slzlx] {
    width: 100%;
    height: auto !important;
    min-height: 360px !important;
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 31%) minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
}

.haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx],
.haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 360px;
    flex: none !important;
    overflow: hidden;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #fff;
    box-shadow: 0 4px 14px rgb(15 44 83 / 5%);
}

.haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-1cjw1slzlx],
.haipick-pick-body .haipick-pick-product > .w-100.h-100[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-1cjw1slzlx] {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto;
    padding: 16px !important;
    overflow-x: auto;
    border-bottom: 1px solid #e4ebf4;
}

.haipick-pick-body .haipick-pick-product table[b-1cjw1slzlx] {
    width: 100%;
    min-width: 520px;
    margin: 0;
    table-layout: fixed;
}

.haipick-pick-body .haipick-pick-product table td[b-1cjw1slzlx] {
    padding: 9px 10px !important;
    vertical-align: middle;
    border-color: #e7edf5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product table td.text-end[b-1cjw1slzlx] {
    width: 105px !important;
    color: #5d718b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-1cjw1slzlx] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: auto;
    padding: 12px 16px 16px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-1cjw1slzlx] {
    min-width: 0;
    min-height: 76px;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border: 1px solid #dce5f0 !important;
    border-radius: 10px !important;
    background: #f8fafc;
    text-align: center;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-1cjw1slzlx] {
    margin: 4px 0 0 !important;
    font-size: 25px;
    line-height: 1;
    font-weight: 850;
}

.haipick-pick-body .input-group[b-1cjw1slzlx],
.haipick-pick-body[b-1cjw1slzlx]  .input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

.haipick-pick-body .form-control[b-1cjw1slzlx],
.haipick-pick-body[b-1cjw1slzlx]  .form-control {
    min-width: 0;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx] {
    min-width: 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .haipick-pick-body[b-1cjw1slzlx] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-layout[b-1cjw1slzlx] {
        height: auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
    }

    .haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx],
    .haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx] {
        padding: 12px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-1cjw1slzlx] {
        min-height: 220px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-1cjw1slzlx] {
        flex-direction: column;
        padding: 12px !important;
        overflow: visible;
    }

    .haipick-pick-body .haipick-pick-product table[b-1cjw1slzlx] {
        min-width: 0;
        table-layout: auto;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-task-banner[b-1cjw1slzlx] {
        margin-bottom: 10px;
    }

    .haipick-pick-body .haipick-pick-tote > .w-100.h-100[b-1cjw1slzlx] {
        min-height: 190px !important;
    }

    .haipick-pick-body .haipick-pick-product table[b-1cjw1slzlx],
    .haipick-pick-body .haipick-pick-product tbody[b-1cjw1slzlx],
    .haipick-pick-body .haipick-pick-product tr[b-1cjw1slzlx] {
        width: 100%;
    }

    .haipick-pick-body .haipick-pick-product table td[b-1cjw1slzlx] {
        padding: 7px 6px !important;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product table td.text-end[b-1cjw1slzlx] {
        width: 88px !important;
        font-size: 9px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-1cjw1slzlx] {
        grid-template-columns: repeat(3, minmax(78px, 1fr));
        padding: 10px !important;
        gap: 7px;
        overflow-x: auto;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-1cjw1slzlx] {
        min-height: 70px;
        font-size: 12px;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 .h1[b-1cjw1slzlx] {
        font-size: 22px;
    }

    .haipick-pick-body[b-1cjw1slzlx]  .btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}


/* PICK Tote — Replen visual style and width correction */
.haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-1cjw1slzlx] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 16px;
    justify-content: flex-start !important;
    align-items: stretch !important;
}

.haipick-pick-tote > .w-100.h-100[b-1cjw1slzlx] {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    gap: 18px;
    padding: 0 !important;
}

.haipick-pick-tote-heading[b-1cjw1slzlx] {
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #cfe0f6;
    border-radius: 10px;
    background: #f3f8ff;
}

.haipick-pick-tote-heading > div[b-1cjw1slzlx] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.haipick-pick-tote-eyebrow[b-1cjw1slzlx] {
    color: #57708f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.haipick-pick-tote-heading strong[b-1cjw1slzlx] {
    overflow: hidden;
    color: #102a4c;
    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.haipick-pick-tote-ready[b-1cjw1slzlx] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: #08783e;
    background: #d9f8e8;
    font-size: 11px;
    font-weight: 700;
}

.haipick-pick-tote-stage[b-1cjw1slzlx] {
    width: 100%;
    min-height: 245px;
    box-sizing: border-box;
    border: 1px dashed #bed2ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #f7faff 0%, #eef5ff 100%);
}

.haipick-pick-tote-visual[b-1cjw1slzlx] {
    position: relative;
    width: min(240px, 78%) !important;
    height: 160px !important;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 4px solid #2865ee !important;
    border-radius: 12px 12px 18px 18px !important;
    background: #fff;
    box-shadow: inset 0 -14px 0 #dcebff, 0 12px 25px rgb(40 101 238 / 15%);
}

.haipick-pick-tote-visual[b-1cjw1slzlx]::before,
.haipick-pick-tote-visual[b-1cjw1slzlx]::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 16px;
    bottom: 18px;
    width: 6px;
    border-radius: 999px;
    background: #bcd8ff;
    pointer-events: none;
}

.haipick-pick-tote-visual[b-1cjw1slzlx]::before {
    left: 12px;
}

.haipick-pick-tote-visual[b-1cjw1slzlx]::after {
    right: 12px;
}

.haipick-pick-tote-visual > *[b-1cjw1slzlx] {
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout > .haipick-pick-tote:first-child[b-1cjw1slzlx] {
        width: 100% !important;
        padding: 12px;
    }

    .haipick-pick-tote-stage[b-1cjw1slzlx] {
        min-height: 210px;
    }

    .haipick-pick-tote-visual[b-1cjw1slzlx] {
        width: min(230px, 76%) !important;
        height: 145px !important;
    }
}

@media (max-width: 480px) {
    .haipick-pick-tote-heading[b-1cjw1slzlx] {
        min-height: 64px;
        padding: 11px 12px;
    }

    .haipick-pick-tote-heading strong[b-1cjw1slzlx] {
        font-size: 16px;
    }

    .haipick-pick-tote-stage[b-1cjw1slzlx] {
        min-height: 185px;
    }

    .haipick-pick-tote-visual[b-1cjw1slzlx] {
        width: min(210px, 78%) !important;
        height: 132px !important;
    }
}


/* PICK layout refinement — compact Tote and structured picking workspace */
.haipick-pick-body .haipick-pick-layout[b-1cjw1slzlx] {
    grid-template-columns: minmax(300px, 31%) minmax(0, 1fr);
    align-items: start !important;
}

.haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
}

.haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
    align-self: start;
    min-height: 0 !important;
    height: auto !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-1cjw1slzlx] {
    min-height: 238px !important;
    padding: 14px 18px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2:empty[b-1cjw1slzlx] {
    display: none;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .p-2[b-1cjw1slzlx] {
    flex: 0 0 auto;
    padding: 8px 14px 8px 0 !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex > .w-100[b-1cjw1slzlx] {
    padding: 0 !important;
}

.haipick-pick-body .haipick-pick-product table td[b-1cjw1slzlx] {
    height: 36px;
    padding: 7px 10px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-1cjw1slzlx] {
    padding: 0 8px 12px !important;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-1cjw1slzlx] {
    padding: 12px !important;
    border: 1px solid #cfe0f6 !important;
    border-radius: 10px !important;
    background: #f8fbff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .mb-2[b-1cjw1slzlx] {
    margin-bottom: 8px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 [style*="max-height:160px"][b-1cjw1slzlx] {
    max-height: 116px !important;
    padding: 7px 10px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control[b-1cjw1slzlx] {
    height: 40px;
    border-radius: 7px 0 0 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 .form-control.me-2[b-1cjw1slzlx] {
    margin-right: 8px !important;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-1cjw1slzlx]  .btn {
    min-width: 72px;
    height: 40px;
    border-radius: 7px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-1cjw1slzlx] {
    margin-top: 0;
    padding: 0 12px 14px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-1cjw1slzlx] {
    min-height: 68px;
    background: #f7f9fc;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card:first-child[b-1cjw1slzlx] {
    border-color: #ffd6d6 !important;
    background: #fff8f8;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx] {
    margin-top: 0;
}

@media (min-width: 901px) {
    .haipick-pick-tote-stage[b-1cjw1slzlx] {
        min-height: 245px;
    }

    .haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx] {
        min-height: 0 !important;
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .haipick-pick-body .haipick-pick-layout[b-1cjw1slzlx] {
        grid-template-columns: minmax(270px, 34%) minmax(0, 1fr);
    }

    .haipick-pick-body .haipick-pick-product table td[b-1cjw1slzlx] {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }
}

@media (max-width: 900px) {
    .haipick-pick-body .haipick-pick-layout[b-1cjw1slzlx] {
        align-items: stretch !important;
    }

    .haipick-pick-body .haipick-pick-tote[b-1cjw1slzlx],
    .haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
        align-self: stretch;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.d-flex[b-1cjw1slzlx] {
        min-height: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3[b-1cjw1slzlx] {
        padding: 0 0 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.px-2.pb-3 > .card[b-1cjw1slzlx] {
        padding: 10px !important;
    }

    .haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-1cjw1slzlx] {
        padding: 0 0 10px !important;
    }
}


/* PICK Put-to-Light containment */
.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-dashboard {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-layout > .w-100,
.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-module-column {
    min-width: 0 !important;
    max-width: 100%;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-section-title {
    min-height: 32px;
    padding: 5px 9px;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-row {
    width: 100%;
    min-width: 0;
    height: 76px !important;
    min-height: 76px;
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-row > .w-100 {
    min-width: 0;
    max-width: calc(100% - 46px);
    gap: 6px;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-row-number {
    width: 42px;
    min-width: 42px;
    height: 76px !important;
    flex: 0 0 42px;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-slot {
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-slot h2 {
    margin: 0;
    font-size: 21px;
}

.haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-slot .mt-2 {
    margin-top: 1px !important;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3[b-1cjw1slzlx] {
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px;
    flex: 0 0 86px;
}

.haipick-pick-body .haipick-pick-product > .w-100.h-100.pb-3 > .card[b-1cjw1slzlx] {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px;
    flex: 1 1 0 !important;
}

@media (max-width: 900px) {
    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx] {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-dashboard {
        min-width: 620px !important;
    }
}

@media (max-width: 640px) {
    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-dashboard {
        min-width: 0 !important;
    }

    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-row {
        height: auto !important;
        min-height: 0;
    }

    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-row > .w-100 {
        max-width: none;
    }

    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx]  .ptl-slot {
        height: 76px !important;
    }
}


/* PICK product workspace — side-by-side information and operations */
@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
        grid-template-rows: auto auto;
        align-items: stretch !important;
        gap: 0;
    }

    .haipick-pick-product-info[b-1cjw1slzlx] {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: stretch;
        min-width: 0;
        min-height: 0 !important;
        height: 100% !important;
        padding: 14px 18px !important;
        border-right: 1px solid #e4ebf4;
        border-bottom: 0 !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    .haipick-pick-scan[b-1cjw1slzlx] {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        min-width: 0;
        padding: 12px 12px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-1cjw1slzlx] {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        margin: 0;
        padding: 0 12px 12px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-1cjw1slzlx] {
        width: 100% !important;
        min-width: 0;
        height: 74px !important;
        min-height: 74px !important;
        max-height: 74px;
        margin: 0 !important;
        padding: 8px 5px !important;
        box-sizing: border-box;
        font-size: 11px;
        text-align: center;
    }

    .haipick-pick-quantities > .card .h1[b-1cjw1slzlx] {
        margin: 3px 0 0 !important;
        font-size: 23px;
        line-height: 1;
    }

    .haipick-pick-shell > .w-100:last-child[b-1cjw1slzlx] {
        margin-top: -2px;
    }
}

.haipick-pick-product-info table[b-1cjw1slzlx] {
    width: 100%;
    margin: 0;
}

/* จำกัดความสูงรายการเพื่อให้ช่องสแกนยังอยู่ในมุมมองเมื่อมีหลาย serial */
.haipick-pick-scan .haipick-serial-list[b-1cjw1slzlx] {
    max-height: 160px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 4px 6px;
    border: 1px solid #e1e8f1;
    border-radius: 7px;
    background: #fff;
}

.haipick-serial-row[b-1cjw1slzlx] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 4px;
    line-height: 20px;
    border-bottom: 1px solid #edf1f7;
}

.haipick-serial-row:last-child[b-1cjw1slzlx] {
    border-bottom: 0;
}

.haipick-serial-row > span:last-child[b-1cjw1slzlx] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table[b-1cjw1slzlx] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-1cjw1slzlx] {
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-1cjw1slzlx] {
    font-size: 13px;
}

.haipick-pick-body .haipick-pick-scan[b-1cjw1slzlx] {
    font-size: 15px;
    line-height: 1.5;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-1cjw1slzlx],
.haipick-pick-body .haipick-pick-scan[b-1cjw1slzlx]  .btn {
    font-size: 15px;
}

.haipick-pick-body .haipick-pick-quantities > .card[b-1cjw1slzlx] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-pick-body .haipick-pick-quantities > .card .h1[b-1cjw1slzlx] {
    font-size: 28px;
}

.haipick-pick-product-info table td[b-1cjw1slzlx] {
    height: 35px;
    padding: 6px 9px !important;
}

.haipick-pick-scan > .card[b-1cjw1slzlx] {
    margin: 0;
}

@media (max-width: 1100px) {
    .haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
        display: flex !important;
        flex-direction: column !important;
    }

    .haipick-pick-product-info[b-1cjw1slzlx] {
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px !important;
        border-bottom: 1px solid #e4ebf4;
        box-sizing: border-box;
    }

    .haipick-pick-scan[b-1cjw1slzlx] {
        width: 100%;
        padding: 10px 10px 8px !important;
        box-sizing: border-box;
    }

    .haipick-pick-quantities[b-1cjw1slzlx] {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none;
        padding: 0 10px 10px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        box-sizing: border-box;
    }

    .haipick-pick-quantities > .card[b-1cjw1slzlx] {
        width: 100% !important;
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px;
        margin: 0 !important;
    }
}

@media (max-width: 560px) {
    .haipick-pick-quantities[b-1cjw1slzlx] {
        grid-template-columns: repeat(3, minmax(82px, 1fr));
        overflow-x: auto;
    }

    .haipick-pick-quantities > .card[b-1cjw1slzlx] {
        font-size: 11px;
    }
}

@media (max-width: 620px) {
    .haipick-switch-button[b-1cjw1slzlx] {
        width: 38px;
        padding: 0;
    }

    .haipick-switch-button span[b-1cjw1slzlx] {
        display: none;
    }
}

/* ใช้สีและกรอบมาตรฐานของระบบในส่วนข้อมูลและการสแกน */
.haipick-pick-body .haipick-pick-product-info[b-1cjw1slzlx] {
    padding: 12px !important;
}

.haipick-pick-product-info > .w-100[b-1cjw1slzlx] {
    min-width: 0;
}

.haipick-pick-body .haipick-pick-product-info table td[b-1cjw1slzlx] {
    padding: 8px !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.haipick-pick-body .haipick-pick-product-info table td.text-end[b-1cjw1slzlx] {
    width: 95px !important;
    text-transform: none;
    color: var(--bs-secondary);
    font-weight: 600;
}

.haipick-pick-body .haipick-pick-product-info table tr:last-child td[b-1cjw1slzlx] {
    border-bottom: 0;
}

.haipick-pick-body .haipick-pick-scan > .card[b-1cjw1slzlx],
.haipick-pick-body .haipick-pick-quantities > .card[b-1cjw1slzlx] {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--bs-border-radius) !important;
    background: var(--bs-body-bg);
    box-shadow: none;
}

.haipick-pick-body .haipick-pick-scan > .card[b-1cjw1slzlx] {
    padding: 12px !important;
}

.haipick-pick-body .haipick-pick-scan .form-control[b-1cjw1slzlx],
.haipick-pick-body .haipick-pick-scan[b-1cjw1slzlx]  .btn {
    border-radius: var(--bs-border-radius) !important;
}

.haipick-pick-scan .haipick-serial-list[b-1cjw1slzlx] {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}

@media (max-width: 560px) {
    .haipick-pick-product-info[b-1cjw1slzlx] {
        flex-direction: column;
    }
}

/* ใช้หัวการ์ดและกรอบรูปแบบเดียวกับ Product List ในขั้นตอนส่งคืน */
.haipick-pick-products-header[b-1cjw1slzlx] {
    width: 100%;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.haipick-pick-body .haipick-pick-product-info[b-1cjw1slzlx] {
    gap: 12px;
    align-items: flex-start;
    background: #fff;
}

.haipick-pick-product-info > .haipick-replen-product-image[b-1cjw1slzlx] {
    flex: 0 0 90px;
    width: 90px;
    height: 100px;
    margin-top: 8px;
}

.haipick-pick-product-info > .w-100[b-1cjw1slzlx] {
    flex: 1 1 0;
    padding: 0 !important;
    margin: 0;
}

.haipick-return-shell[b-1cjw1slzlx] {
    gap: 14px;
}

.haipick-return-ptl[b-1cjw1slzlx] {
    flex: 0 0 auto;
    min-width: 0;
}

@media (min-width: 1101px) {
    .haipick-pick-body .haipick-pick-product[b-1cjw1slzlx] {
        grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
        grid-template-rows: auto auto auto;
    }

    .haipick-pick-products-header[b-1cjw1slzlx] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .haipick-pick-product-info[b-1cjw1slzlx] {
        grid-column: 1;
        grid-row: 2 / 4;
    }

    .haipick-pick-scan[b-1cjw1slzlx] {
        grid-column: 2;
        grid-row: 2;
    }

    .haipick-pick-quantities[b-1cjw1slzlx] {
        grid-column: 2;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .haipick-pick-product-info > .haipick-replen-product-image[b-1cjw1slzlx] {
        flex-basis: auto;
        width: 80px;
        height: 80px;
    }
}

/* โครงสร้าง PICK แยกจากรูปแบบเดิม ให้การ์ดสูงตามเนื้อหาและสแกนต่อจากข้อมูล */
.haipick-workstation:has(.haipick-compact) > .haipick-header[b-1cjw1slzlx] {
    min-height: 76px;
    padding: 14px 20px !important;
    background: linear-gradient(115deg, #1559ae, #2878cf);
}

.haipick-workstation:has(.haipick-compact) .haipick-title h2[b-1cjw1slzlx] { font-size: 28px; }
.haipick-workstation:has(.haipick-compact) .haipick-title > span[b-1cjw1slzlx] { font-size: 10px; }
.haipick-workstation:has(.haipick-compact) .haipick-title[b-1cjw1slzlx]  .badge {
    padding: 7px 12px;
    font-size: 13px;
    border-radius: 999px;
}

.haipick-body.haipick-compact[b-1cjw1slzlx] {
    display: flex !important;
    flex-direction: column;
    padding: 14px !important;
    overflow: auto;
    background: #f2f7fc;
    color: #142d55;
}

.haipick-workspace[b-1cjw1slzlx] {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.haipick-columns[b-1cjw1slzlx] {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    align-items: stretch;
    gap: 14px;
    min-width: 0;
}

.haipick-sidebar[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.haipick-tote-card[b-1cjw1slzlx],
.haipick-item-card[b-1cjw1slzlx] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-tote-card[b-1cjw1slzlx] {
    padding: 12px;
}

.haipick-section-heading[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 15px;
}

.haipick-section-icon[b-1cjw1slzlx] {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #e8f1ff;
    color: #2165ed;
    font-size: 19px;
}

.haipick-compact .haipick-task-banner[b-1cjw1slzlx] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 10px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(32 68 112 / 4%);
}

.haipick-compact .haipick-task-icon[b-1cjw1slzlx] {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

.haipick-compact .haipick-task-copy[b-1cjw1slzlx] {
    grid-column: 2;
    grid-row: 1 / 3;
    gap: 5px;
}

.haipick-compact .haipick-task-copy small[b-1cjw1slzlx] {
    color: #142d55;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 700;
}

.haipick-compact .haipick-task-copy strong[b-1cjw1slzlx] {
    font-size: 13px;
    line-height: 1.4;
}

.haipick-compact .haipick-task-copy > span[b-1cjw1slzlx] {
    font-size: 11px;
}

.haipick-compact .haipick-waiting-badge[b-1cjw1slzlx] {
    grid-column: 3;
    grid-row: 1;
    font-size: 9px;
    letter-spacing: 0;
}

.haipick-compact .haipick-task-count[b-1cjw1slzlx] {
    grid-column: 3;
    grid-row: 2;
    gap: 3px;
    border-left: 1px solid #e5edf8;
}

.haipick-compact .haipick-task-count strong[b-1cjw1slzlx] { font-size: 24px; }
.haipick-compact .haipick-task-count span[b-1cjw1slzlx] { font-size: 9px; }

.haipick-compact .haipick-pick-tote-heading[b-1cjw1slzlx] {
    min-height: 0;
    padding: 0 2px 12px 50px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.haipick-compact .haipick-pick-tote-eyebrow[b-1cjw1slzlx] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

.haipick-compact .haipick-pick-tote-heading strong[b-1cjw1slzlx] { font-size: 22px; }
.haipick-compact .haipick-pick-tote-ready[b-1cjw1slzlx] { font-size: 12px; }
.haipick-compact .haipick-pick-tote-heading > div[b-1cjw1slzlx] { line-height: 1.3; }

/* ลดเฉพาะพื้นรอบภาพ โดยคงขนาด ภาพ และการแบ่งช่อง Tote เดิม */
.haipick-compact .haipick-pick-tote-stage[b-1cjw1slzlx] {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    border: 1px solid #e4edf8;
    background: #f5f9ff;
}

/* วาด Type และตำแหน่ง Partition จาก master data เช่นเดียวกับ Replenishment */
.haipick-source-tote[b-1cjw1slzlx] {
    position: relative;
    flex: 0 1 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 7px;
    border-radius: 9px 9px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}

.haipick-source-tote-layout[b-1cjw1slzlx] {
    position: relative;
    width: 100%;
    height: 100%;
}

.haipick-source-partition[b-1cjw1slzlx] {
    position: absolute;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 6px;
    padding: 8px 6px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #c6daf8;
    color: #17386d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.haipick-source-partition-name[b-1cjw1slzlx] {
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.haipick-source-parts[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.haipick-source-whole[b-1cjw1slzlx] { gap: 6px; padding: 6px; }
.haipick-source-whole img[b-1cjw1slzlx] { max-height: 55px; }

.haipick-source-tote img[b-1cjw1slzlx] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-source-partition.bg-primary[b-1cjw1slzlx] { background-color: #2563eb !important; }

.haipick-compact .haipick-pick-products-header[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #e5edf6;
    background: #fff;
}

.haipick-compact .haipick-pick-products-header strong[b-1cjw1slzlx] {
    color: #142d55;
    font-size: 17px;
    line-height: 1.4;
}

.haipick-compact .haipick-return-products-icon[b-1cjw1slzlx] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: 18px;
}

.haipick-item-content[b-1cjw1slzlx] {
    display: grid;
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    align-items: start;
    min-width: 0;
}

.haipick-item-info[b-1cjw1slzlx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 16px 14px;
}

.haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] {
    flex: 0 0 82px;
    width: 82px;
    height: 130px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    background: #f3f7fc;
}

.haipick-item-info > .haipick-replen-product-image img[b-1cjw1slzlx] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.haipick-item-info > .w-100[b-1cjw1slzlx] {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
}

.haipick-item-info table[b-1cjw1slzlx] {
    width: 100%;
    height: auto;
    margin: 0;
    table-layout: auto;
}

.haipick-item-info table td[b-1cjw1slzlx] {
    height: auto;
    padding: 9px 5px;
    border-bottom: 1px solid #e7edf6;
    color: #4d5d76;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.haipick-item-info table td.text-end[b-1cjw1slzlx] {
    width: 1% !important;
    white-space: nowrap;
    text-align: left !important;
    color: #566e92;
    font-size: 11px;
    font-weight: 700;
}

.haipick-item-info table tr:last-child td[b-1cjw1slzlx] { border-bottom: 0; }

.haipick-operations[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border-left: 1px solid #e5edf6;
}

.haipick-scan-panel[b-1cjw1slzlx] { min-width: 0; }

.haipick-scan-panel > .card[b-1cjw1slzlx] {
    min-height: 0;
    margin: 0 !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #f1f7ff;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none !important;
}

.haipick-scan-panel > .card > .mb-2[b-1cjw1slzlx] { margin-bottom: 10px !important; }
.haipick-scan-panel > .card > .d-flex[b-1cjw1slzlx] { min-width: 0; }

.haipick-scan-heading[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #132f65;
    font-size: 13px;
}

.haipick-scan-heading[b-1cjw1slzlx]::before {
    content: "";
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    margin-right: 5px;
    border-radius: 7px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e63f5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5m13-5h5v5M3 16v5h5m8 0h5v-5M6 12h12M9 7h6M9 17h6'/%3E%3C/svg%3E") center / 21px 21px no-repeat;
}

.haipick-scan-title[b-1cjw1slzlx] { color: #132f65; font-weight: 700; }
.haipick-scan-heading > .text-muted[b-1cjw1slzlx] { color: #536a94 !important; }
.haipick-scan-heading.justify-content-between[b-1cjw1slzlx] { justify-content: flex-start !important; }
.haipick-scan-heading > .badge[b-1cjw1slzlx] { margin-left: auto; }
.haipick-scan-entry[b-1cjw1slzlx] { position: relative; }

/* ไอคอนเป็นของตกแต่ง ไม่รับคลิกและไม่รบกวนการสแกน */
.haipick-scan-entry[b-1cjw1slzlx]::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    top: 21px;
    width: 19px;
    height: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    background: repeating-linear-gradient(90deg, #8e9bb0 0 1px, transparent 1px 3px, #8e9bb0 3px 5px, transparent 5px 6px);
}

.haipick-scan-panel .form-control[b-1cjw1slzlx] {
    min-width: 0;
    height: 42px;
    padding-left: 39px;
    border-radius: 8px !important;
    background: #fff;
    font-size: 14px;
    border-color: #709aff !important;
}

.haipick-scan-panel[b-1cjw1slzlx]  .haipick-scan-button {
    flex: 0 0 auto;
    min-width: 70px;
    height: 42px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
    border: 1px solid #1958ed !important;
    background: #1958f5 !important;
    box-shadow: none !important;
    text-transform: uppercase;
}

.haipick-scan-panel[b-1cjw1slzlx]  .haipick-scan-button:not(:disabled):hover {
    border-color: #1048cd !important;
    background: #1048db !important;
}

.haipick-scan-panel[b-1cjw1slzlx]  .haipick-scan-button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.haipick-scan-panel .text-danger:empty[b-1cjw1slzlx] { display: none; }

.haipick-quantity-grid[b-1cjw1slzlx] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.haipick-quantity-grid:has(> :nth-child(3))[b-1cjw1slzlx] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.haipick-quantity-grid > .card[b-1cjw1slzlx] {
    height: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 10px 12px !important;
    gap: 8px;
    border: 1px solid #e3edf9;
    border-radius: 11px !important;
    background: #f9fbff;
    font-size: 12px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none !important;
}

.haipick-quantity-grid .h1[b-1cjw1slzlx] {
    margin: 0;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
}

.haipick-quantity-label[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    gap: 8px;
}

.haipick-quantity-label i[b-1cjw1slzlx] {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    color: #2165ed;
    background: #e8f1ff;
    font-size: 15px;
}

.haipick-quantity-grid .h1.text-primary[b-1cjw1slzlx] { color: #0961dc !important; }

.haipick-lights[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2eaf5;
    border-radius: 13px;
    background: #fff;
}

.haipick-lights-header[b-1cjw1slzlx] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5edf6;
}

.haipick-lights-header h3[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #1458e6;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .04em;
}

.haipick-lights-icon[b-1cjw1slzlx] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: #e4efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c60ed' d='M12 2a7 7 0 0 0-4.7 12.2c.9.8 1.2 1.5 1.2 2.8h7c0-1.3.3-2 1.2-2.8A7 7 0 0 0 12 2Z'/%3E%3Cpath d='M9 19h6m-5 2h4' fill='none' stroke='%231c60ed' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 8c.4-1.7 1.5-2.5 3-2.6' fill='none' stroke='%237eabff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 27px 27px no-repeat;
}

.haipick-lights-legend[b-1cjw1slzlx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #657da3;
    font-size: 10px;
    line-height: 1.4;
}

.haipick-lights-legend li[b-1cjw1slzlx] { display: flex; align-items: center; gap: 8px; }
.haipick-legend-swatch[b-1cjw1slzlx] { width: 25px; height: 20px; border-radius: 6px; }
.haipick-legend-swatch.is-active[b-1cjw1slzlx] { border: 1px solid #77d4ff; background: linear-gradient(135deg, #c7edff, #b5e4fa); }
.haipick-legend-swatch.is-occupied[b-1cjw1slzlx] { border: 1px solid #e3ebf5; background: #eaf0f7; }
.haipick-legend-swatch.is-empty[b-1cjw1slzlx] { border: 1px solid #e2eaf5; background: #fff; }

.haipick-lights[b-1cjw1slzlx]  .ptl-dashboard,
.haipick-lights[b-1cjw1slzlx]  .ptl-layout {
    flex: 1 0 auto;
    height: auto !important;
    min-width: 0;
    min-height: 0;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-dashboard {
    padding: 8px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-layout { margin: 0; }
.haipick-lights[b-1cjw1slzlx]  .ptl-layout > .w-100 { gap: 7px; }

/* กระจายพื้นที่ว่างให้แถว P2L เท่ากัน โดยไม่ยืดส่วนข้อมูลด้านบน */
.haipick-lights[b-1cjw1slzlx]  .ptl-layout > .w-100,
.haipick-lights[b-1cjw1slzlx]  .ptl-module-column {
    flex: 1 0 auto;
    align-self: stretch;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-section-title {
    justify-content: flex-start;
    min-height: 0;
    margin-bottom: 3px;
    padding: 0 0 10px;
    gap: 10px;
    border-bottom: 1px solid #e5edf6;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .06em;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-section-title::before,
.haipick-lights[b-1cjw1slzlx]  .ptl-section-title::after { display: none; }

/* ใช้หัวข้อพร้อม Legend ของหน้า PICK โดยคงหัวข้อ Pallet เมื่อสถานีมีช่องแบบนั้น */
.haipick-lights[b-1cjw1slzlx]  .ptl-section-title:has(.fa-lightbulb) { display: none; }

.haipick-lights[b-1cjw1slzlx]  .ptl-row {
    flex: 1 0 76px;
    height: 76px;
    min-height: 0;
    gap: 8px;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-row > .w-100 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-row-number {
    width: 48px;
    flex-basis: 48px;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-row-number h2 {
    transform: none;
    font-size: 24px;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot {
    min-height: 0;
    padding: 7px 10px;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgb(32 68 112 / 4%);
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot > .d-flex:first-child {
    min-height: 17px;
    font-size: 11px;
    font-weight: 750;
    color: #142d55;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot > .d-flex:first-child > .justify-content-end {
    position: absolute;
    top: 7px;
    right: 8px;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot h2,
.haipick-lights[b-1cjw1slzlx]  .ptl-slot h2.text-danger { font-size: 25px; line-height: 1; }
.haipick-lights[b-1cjw1slzlx]  .ptl-slot .mt-2 { margin-top: 2px !important; font-size: 12px; font-weight: 500; line-height: 1.2; }
.haipick-lights[b-1cjw1slzlx]  .ptl-slot .text-center > span { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* เปลี่ยนเฉพาะสีแสดงผลของสถานะเดิม ไม่เพิ่มหรือเปลี่ยนเงื่อนไขสถานะ */
.haipick-compact .haipick-lights[b-1cjw1slzlx]  .ptl-slot.bg-primary {
    background: linear-gradient(135deg, #c7edff, #b5e4fa) !important;
    border-color: #63ceff !important;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot.bg-secondary,
.haipick-lights[b-1cjw1slzlx]  .ptl-slot.bg-dark {
    background: #eaf0f7 !important;
    border-color: #dde7f2 !important;
    color: #142d55 !important;
}

.haipick-lights[b-1cjw1slzlx]  .ptl-slot .btn.text-danger {
    width: 28px;
    height: 28px;
    min-height: 0;
    padding: 0 !important;
    border: 1px solid #c6e4f4 !important;
    border-radius: 6px !important;
    background: #e5f5ff !important;
    box-shadow: 0 3px 7px rgb(32 68 112 / 13%);
    font-size: 13px;
}

@media (max-width: 1199px) and (min-width: 901px) {
    .haipick-item-content[b-1cjw1slzlx] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-1cjw1slzlx] { border-left: 0; border-top: 1px solid #e5edf6; }
}

@media (max-width: 900px) {
    .haipick-columns[b-1cjw1slzlx] { grid-template-columns: minmax(0, 1fr); }
    .haipick-sidebar[b-1cjw1slzlx] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .haipick-compact[b-1cjw1slzlx] { padding: 10px !important; }
    .haipick-sidebar[b-1cjw1slzlx],
    .haipick-item-content[b-1cjw1slzlx] { grid-template-columns: minmax(0, 1fr); }
    .haipick-operations[b-1cjw1slzlx] { border-left: 0; border-top: 1px solid #e5edf6; }
    .haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] { flex-basis: 60px; width: 60px; height: 90px; }
    .haipick-lights[b-1cjw1slzlx] { overflow-x: auto; }
    .haipick-lights[b-1cjw1slzlx]  .ptl-dashboard { min-width: 540px; }
}

/* ทุก step ใช้กรอบจอเดียวกัน แบ่งพื้นที่บน/ล่างแทนความสูงคงที่ของแต่ละสถานะ */
.haipick-page.haipick-fit[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
    padding: clamp(8px, 1.1vh, 14px);
}

.haipick-fit .haipick-workstation[b-1cjw1slzlx] {
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0;
}

.haipick-fit .haipick-header[b-1cjw1slzlx],
.haipick-fit .card-footer[b-1cjw1slzlx] {
    flex: 0 0 auto;
}

.haipick-fit .haipick-workstation > .haipick-header[b-1cjw1slzlx] {
    min-height: 58px;
    padding: 10px 16px !important;
}

.haipick-fit .haipick-step-body[b-1cjw1slzlx] {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: clamp(8px, 1vh, 12px) !important;
}

.haipick-fit .haipick-step-body > .haipick-step-frame[b-1cjw1slzlx] {
    display: grid !important;
    grid-template-rows: minmax(0, 1.12fr) minmax(0, 1fr);
    flex: 1 1 0;
    height: 100% !important;
    min-height: 0 !important;
    gap: clamp(8px, 1.2vh, 14px);
    overflow: hidden;
}

.haipick-fit .haipick-step-body.is-cycle-count > .haipick-step-frame[b-1cjw1slzlx] {
    grid-template-rows: minmax(0, 1fr);
}

.haipick-fit .haipick-step-body .haipick-step-frame > .haipick-step-top[b-1cjw1slzlx] {
    display: grid !important;
    grid-template-columns: minmax(0, 29fr) minmax(0, 71fr);
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
    flex: none !important;
    gap: 12px;
    overflow: hidden;
}

.haipick-fit .haipick-step-body .haipick-step-top > *[b-1cjw1slzlx],
.haipick-fit .haipick-sidebar > *[b-1cjw1slzlx],
.haipick-fit .haipick-item-content > *[b-1cjw1slzlx] {
    width: 100% !important;
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
}

.haipick-fit .haipick-step-top > .haipick-work-panel[b-1cjw1slzlx],
.haipick-fit .haipick-return-tote-panel[b-1cjw1slzlx],
.haipick-fit .haipick-return-products[b-1cjw1slzlx] {
    height: 100% !important;
    overflow: auto;
}

.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:first-child[b-1cjw1slzlx],
.haipick-fit .haipick-step-body .haipick-step-top > .haipick-work-panel:nth-child(2)[b-1cjw1slzlx] {
    width: 100% !important;
    flex: none !important;
}

.haipick-fit .is-standby .haipick-step-top > .haipick-work-panel[b-1cjw1slzlx] {
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden;
}

.haipick-fit .haipick-empty-state[b-1cjw1slzlx] {
    max-width: 100%;
    width: 100%;
    margin: auto;
    padding: clamp(10px, 2vh, 24px);
    align-self: center;
}

.haipick-fit .haipick-sidebar[b-1cjw1slzlx] {
    display: flex;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-sidebar > .haipick-task-banner[b-1cjw1slzlx] { flex: 0 0 auto; }
.haipick-fit .haipick-tote-card[b-1cjw1slzlx] { display: flex; flex-direction: column; flex: 1 1 0; }
.haipick-fit .haipick-tote-card > .haipick-section-heading[b-1cjw1slzlx],
.haipick-fit .haipick-tote-card > .haipick-pick-tote-heading[b-1cjw1slzlx] { flex: 0 0 auto; }
.haipick-fit .haipick-pick-tote-stage[b-1cjw1slzlx] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-source-tote[b-1cjw1slzlx] { max-height: 100%; }
.haipick-fit .haipick-item-card[b-1cjw1slzlx] { display: flex; flex-direction: column; }
.haipick-fit .haipick-pick-products-header[b-1cjw1slzlx] { flex: 0 0 auto; }
.haipick-fit .haipick-item-content[b-1cjw1slzlx] { flex: 1 1 0; min-height: 0; overflow: hidden; }
.haipick-fit .haipick-item-info[b-1cjw1slzlx] { height: 100%; overflow: auto; }
.haipick-fit .haipick-operations[b-1cjw1slzlx] { height: 100%; overflow: auto; }
.haipick-fit .haipick-serial-list[b-1cjw1slzlx] { min-height: 0; max-height: 100px; overflow: auto; }
.haipick-fit .haipick-return-tote-stage[b-1cjw1slzlx] { min-height: 0 !important; height: auto !important; overflow: hidden; }

.haipick-fit .haipick-step-frame > .haipick-step-lights[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-dashboard,
.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-layout {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
    overflow: hidden;
}

.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-layout > .w-100,
.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-module-column {
    min-height: 0 !important;
    flex: 1 1 0;
    align-self: stretch;
}

.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-row {
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0;
}

.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none;
}

.haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot > .h-100 {
    height: auto !important;
    min-height: 0;
    flex: 1 1 0;
    justify-content: center !important;
}

/* จอเตี้ยลดเฉพาะระยะและองค์ประกอบตกแต่ง เพื่อคงปุ่มและข้อมูลที่ใช้ทำงาน */
@media (max-height: 820px) {
    .haipick-fit .haipick-workstation > .haipick-header[b-1cjw1slzlx] { min-height: 52px; padding: 7px 12px !important; }
    .haipick-fit .haipick-title h2[b-1cjw1slzlx] { font-size: 23px; }
    .haipick-fit .haipick-task-banner[b-1cjw1slzlx] { padding: 8px; gap: 3px 8px; }
    .haipick-fit .haipick-task-copy > span[b-1cjw1slzlx] { display: none; }
    .haipick-fit .haipick-section-heading[b-1cjw1slzlx] { margin-bottom: 3px; }
    .haipick-fit .haipick-pick-tote-heading[b-1cjw1slzlx] { padding-bottom: 6px; }
    .haipick-fit .haipick-tote-card[b-1cjw1slzlx] { padding: 8px; }
    .haipick-fit .haipick-source-partition[b-1cjw1slzlx] { padding: 3px; gap: 2px; }
    .haipick-fit .haipick-source-partition-name[b-1cjw1slzlx] { font-size: 11px; line-height: 1.1; }
    .haipick-fit .haipick-source-parts[b-1cjw1slzlx] { font-size: 10px; gap: 2px; line-height: 1.2; }
    .haipick-fit .haipick-item-info[b-1cjw1slzlx] { padding: 8px; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] { width: 54px; flex-basis: 54px; height: 70px; }
    .haipick-fit .haipick-item-info table td[b-1cjw1slzlx] { padding: 5px; }
    .haipick-fit .haipick-operations[b-1cjw1slzlx] { padding: 8px; gap: 8px; }
    .haipick-fit .haipick-scan-panel > .card[b-1cjw1slzlx] { padding: 8px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-1cjw1slzlx] { padding: 6px 8px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-1cjw1slzlx] { font-size: 28px; }
    .haipick-fit .haipick-lights-header[b-1cjw1slzlx] { padding: 6px 10px; }
    .haipick-fit .haipick-lights-icon[b-1cjw1slzlx] { width: 26px; height: 26px; flex-basis: 26px; background-size: 22px; }
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-dashboard { padding: 6px 8px; }
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot { padding: 4px 7px; }
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot > .d-flex:first-child { min-height: 12px; font-size: 10px; }
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot h2,
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot h2.text-danger { font-size: 18px; line-height: 1; }
    .haipick-fit .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot .mt-2 { font-size: 10px; margin-top: 1px !important; }
}

@media (max-width: 1199px) {
    .haipick-fit .haipick-item-content[b-1cjw1slzlx] { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
    .haipick-fit .haipick-step-top[b-1cjw1slzlx] { gap: 8px !important; }
    .haipick-fit .haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] { display: none; }
    .haipick-fit .haipick-lights-legend[b-1cjw1slzlx] { gap: 6px 10px; font-size: 9px; }
}

/* แยก Serial ไว้เต็มความกว้างใต้ข้อมูลสินค้า โดยไม่ดันช่องสแกนและ P2L ออกนอกจอ */
.haipick-fit .is-pick > .haipick-step-frame:has(.haipick-serial-section)[b-1cjw1slzlx] {
    grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr);
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section)[b-1cjw1slzlx] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    container: haipick-serial-card / size;
}

.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-1cjw1slzlx] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-1cjw1slzlx] { padding: 6px 4px; font-size: 12px; line-height: 1.35; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] { width: 64px; flex-basis: 64px; height: 90px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-1cjw1slzlx] { padding: 10px; gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-1cjw1slzlx] { gap: 8px; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-1cjw1slzlx] { min-width: 0; overflow-wrap: anywhere; }
.haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading > .badge[b-1cjw1slzlx] { flex: 0 0 auto; }

.haipick-serial-section[b-1cjw1slzlx] {
    --serial-row-height: 30px;
    --serial-gap: 6px;
    --serial-visible-rows: 3;
    min-width: 0;
    min-height: 0;
    margin: 0 12px 10px;
    padding: 8px;
    border: 1px solid #b8d0ff;
    border-radius: 10px;
    background: #f8fbff;
}

.haipick-serial-heading[b-1cjw1slzlx] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 6px;
    color: #1659dc;
    font-size: 13px;
}

.haipick-serial-heading > i[b-1cjw1slzlx] {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #e8f0ff;
}

.haipick-serial-progress[b-1cjw1slzlx] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #e7edf7;
    color: #314568;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.haipick-fit .haipick-serial-list.haipick-serial-grid[b-1cjw1slzlx] {
    /* ให้ความยาวข้อความจริงกำหนดจำนวนต่อแถว แล้วกระจายพื้นที่ที่เหลือให้เต็ม */
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--serial-gap);
    height: calc(var(--serial-visible-rows) * var(--serial-row-height) + (var(--serial-visible-rows) - 1) * var(--serial-gap));
    max-height: none;
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #86adff #edf3fc;
    overscroll-behavior: contain;
}

.haipick-serial-grid:focus-visible[b-1cjw1slzlx] { outline: 2px solid #2b6af4; outline-offset: 2px; }

.haipick-serial-chip[b-1cjw1slzlx] {
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: min(100%, 9rem);
    max-width: 100%;
    height: var(--serial-row-height);
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #244575;
    background: #eaf0ff;
    font-size: 12px;
    line-height: 1.2;
}

.haipick-serial-chip > span:last-child[b-1cjw1slzlx] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.haipick-serial-marker[b-1cjw1slzlx] { flex: 0 0 auto; font-size: 11px; }
.haipick-serial-chip.is-scanned[b-1cjw1slzlx] { color: #087447; border-color: #b8e6d0; background: #e4f7ed; font-weight: 650; }

/* อิงความสูงการ์ดจริง: แสดงสามแถวเมื่อพอ และสองแถวเมื่อจอ/กรอบงานเตี้ย */
@container haipick-serial-card (max-height: 410px) {
    .haipick-serial-section[b-1cjw1slzlx] { --serial-visible-rows: 2; --serial-row-height: 26px; --serial-gap: 4px; margin: 0 8px 8px; padding: 6px; }
    .haipick-serial-heading[b-1cjw1slzlx] { min-height: 20px; margin-bottom: 4px; font-size: 12px; }
    .haipick-serial-heading > i[b-1cjw1slzlx] { width: 20px; height: 20px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info[b-1cjw1slzlx] { padding: 6px 8px; gap: 8px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info table td[b-1cjw1slzlx] { padding: 3px 4px; font-size: 11px; line-height: 1.3; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-item-info > .haipick-replen-product-image[b-1cjw1slzlx] { display: none; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-operations[b-1cjw1slzlx] { padding: 6px 8px; gap: 6px; }
    .haipick-scan-panel > .card[b-1cjw1slzlx] { padding: 8px !important; }
    .haipick-scan-panel > .card > .mb-2[b-1cjw1slzlx] { margin-bottom: 6px !important; }
    .haipick-fit .haipick-quantity-grid > .card[b-1cjw1slzlx] { padding: 5px 6px !important; gap: 4px; }
    .haipick-fit .haipick-quantity-grid .h1[b-1cjw1slzlx] { font-size: 26px; }
    .haipick-quantity-label[b-1cjw1slzlx] { gap: 4px; font-size: 10px; }
    .haipick-quantity-label i[b-1cjw1slzlx] { width: 20px; height: 20px; flex-basis: 20px; font-size: 12px; }
    .haipick-serial-chip[b-1cjw1slzlx] { padding: 2px 5px; font-size: 11px; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading[b-1cjw1slzlx] { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
    .haipick-fit .haipick-item-card:has(.haipick-serial-section) .haipick-scan-heading b[b-1cjw1slzlx] { overflow: hidden; text-overflow: ellipsis; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card[b-1cjw1slzlx] { padding: 6px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel > .card > .mb-2[b-1cjw1slzlx] { margin-bottom: 4px !important; }
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-1cjw1slzlx]  .form-control,
    .haipick-fit .haipick-item-card .haipick-scan-panel[b-1cjw1slzlx]  .haipick-scan-button { height: 34px; min-height: 34px; font-size: 12px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid > .card[b-1cjw1slzlx] { padding: 3px 5px !important; gap: 2px; }
    .haipick-fit .haipick-item-card .haipick-quantity-grid .h1[b-1cjw1slzlx] { font-size: 22px; line-height: 1; }
}

@media (max-height: 820px) {
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot { padding: 2px 6px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot > .d-flex:first-child { min-height: 10px; font-size: 9px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot h2,
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot h2.text-danger { font-size: 14px; }
    .haipick-fit .is-pick:has(.haipick-serial-section) .haipick-step-lights[b-1cjw1slzlx]  .ptl-slot .mt-2 { font-size: 9px; line-height: 1; }
}

/* โครงครอบ component ของ RPL ให้ยืดเหมือนต้นฉบับ */
.station-main-layout[b-1cjw1slzlx] { width:100%;flex:1;min-height:0;display:flex;flex-direction:column; }
.station-main-content[b-1cjw1slzlx] { width:100%;flex:1;min-height:0; }

.ptl-dashboard[b-1cjw1slzlx] {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.ptl-layout[b-1cjw1slzlx] {
    min-width: 0;
    gap: 12px;
    align-items: stretch !important;
}

.ptl-pallet-column[b-1cjw1slzlx] {
    width: 24%;
    min-width: 210px;
    gap: 8px;
}

.ptl-module-column[b-1cjw1slzlx] {
    width: 76%;
    min-width: 0;
    gap: 8px;
    margin-left: 0 !important;
}

.ptl-section-title[b-1cjw1slzlx] {
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
}

.ptl-section-title i[b-1cjw1slzlx] {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
}

.ptl-row[b-1cjw1slzlx] {
    height: 92px;
    min-width: 0;
    gap: 7px;
}

.ptl-row-number[b-1cjw1slzlx] {
    width: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    color: #fff;
    background: #334155;
}

.ptl-row-number h2[b-1cjw1slzlx] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.ptl-row > .w-100[b-1cjw1slzlx] {
    min-width: 0;
    gap: 7px;
}

.ptl-slot[b-1cjw1slzlx] {
    min-width: 0;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 4%);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ptl-slot:hover[b-1cjw1slzlx] {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgb(37 99 235 / 12%);
    transform: translateY(-1px);
}

.ptl-slot > .d-flex:first-child[b-1cjw1slzlx] {
    min-height: 20px;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}

.ptl-slot h2[b-1cjw1slzlx] {
    font-size: 23px;
    font-weight: 850;
    line-height: 1;
}

.ptl-slot .mt-2[b-1cjw1slzlx] {
    margin-top: 3px !important;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptl-slot .icon-pick-p2l[b-1cjw1slzlx] {
    font-size: 25px !important;
}

.ptl-slot .icon-barcode[b-1cjw1slzlx] {
    font-size: 20px !important;
}

.ptl-pallet-slot[b-1cjw1slzlx] {
    min-height: 92px;
}

.ptl-slot.bg-secondary[b-1cjw1slzlx],
.ptl-slot.bg-dark[b-1cjw1slzlx] {
    color: #475569 !important;
    background-color: #f1f5f9 !important;
}

.ptl-slot.bg-primary[b-1cjw1slzlx] {
    border-color: #3b82f6 !important;
    color: #fff !important;
    background-color: #2563eb !important;
}

.ptl-slot.bg-success[b-1cjw1slzlx] {
    border-color: #22c55e !important;
    color: #fff !important;
    background-color: #16a34a !important;
}

.ptl-slot.bg-info[b-1cjw1slzlx] {
    border-color: #06b6d4 !important;
}

.ptl-dashboard[b-1cjw1slzlx]  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    line-height: 1;
}

@media (max-width: 1000px) {
    .ptl-layout[b-1cjw1slzlx] {
        flex-direction: column !important;
    }

    .ptl-pallet-column[b-1cjw1slzlx],
    .ptl-module-column[b-1cjw1slzlx] {
        width: 100%;
        min-width: 0;
    }

    .ptl-pallet-column[b-1cjw1slzlx] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .ptl-pallet-column .ptl-section-title[b-1cjw1slzlx] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .ptl-dashboard[b-1cjw1slzlx] { padding: 8px; }
    .ptl-pallet-column[b-1cjw1slzlx] { grid-template-columns: 1fr; }

    .ptl-row[b-1cjw1slzlx] {
        height: auto;
        align-items: stretch;
    }

    .ptl-row > .w-100[b-1cjw1slzlx] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(125px, 1fr));
    }

    .ptl-slot[b-1cjw1slzlx] {
        min-height: 88px;
    }
}


/* Populated PTL state */
.ptl-section-title[b-1cjw1slzlx] {
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    color: #2563eb !important;
    background: transparent !important;
    letter-spacing: .12em;
}

.ptl-section-title[b-1cjw1slzlx]::before,
.ptl-section-title[b-1cjw1slzlx]::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e4eaf2;
}

.ptl-section-title i[b-1cjw1slzlx] {
    color: #2563eb;
    background: #eaf2ff;
}

.ptl-row-number[b-1cjw1slzlx] {
    color: #fff !important;
    background: #2563eb !important;
    box-shadow: 0 3px 8px rgb(37 99 235 / 18%);
}

.ptl-slot[b-1cjw1slzlx] {
    background-clip: padding-box;
}

.ptl-slot.bg-primary[b-1cjw1slzlx],
.ptl-slot.bg-primary.bg-opacity-50[b-1cjw1slzlx] {
    border-color: #38bdf8 !important;
    color: #0c4a6e !important;
    background-color: #bae6fd !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-success.bg-opacity-50[b-1cjw1slzlx] {
    border-color: #86efac !important;
    color: #14532d !important;
    background-color: #dcfce7 !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-info[b-1cjw1slzlx],
.ptl-slot.bg-info.bg-opacity-100[b-1cjw1slzlx] {
    border-color: #22d3ee !important;
    color: #164e63 !important;
    background-color: #cffafe !important;
    --bs-bg-opacity: 1;
}

.ptl-slot .text-danger[b-1cjw1slzlx] {
    color: #ef4444 !important;
}

.ptl-slot h2.text-danger[b-1cjw1slzlx] {
    font-size: 25px;
    text-shadow: none;
}

.ptl-slot > .h-100[b-1cjw1slzlx] {
    min-height: 0;
}

@media (min-width: 1001px) {
    .ptl-pallet-column[b-1cjw1slzlx] {
        flex: 0 0 24%;
    }

    .ptl-module-column[b-1cjw1slzlx] {
        flex: 1 1 76%;
    }
}


/* PTL dialogs */
.ptl-modal[b-1cjw1slzlx]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 25%);
}

.ptl-modal[b-1cjw1slzlx]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.ptl-modal[b-1cjw1slzlx]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.ptl-modal[b-1cjw1slzlx]  .modal-body {
    padding: 0;
    background: #fff;
}

.ptl-modal[b-1cjw1slzlx]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #f8fafc;
}

.ptl-modal[b-1cjw1slzlx]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

.ptl-popup-body[b-1cjw1slzlx] {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ptl-popup-icon[b-1cjw1slzlx] {
    width: 58px;
    height: 58px;
    margin-bottom: 11px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 22px;
}

.ptl-popup-icon.is-warning[b-1cjw1slzlx] {
    color: #d97706;
    background: #fef3c7;
}

.ptl-popup-eyebrow[b-1cjw1slzlx] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.ptl-popup-body h3[b-1cjw1slzlx] {
    margin: 3px 0 4px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.ptl-popup-body p[b-1cjw1slzlx] {
    margin: 0;
    color: #64748b;
    font-size: 11px;
}

.ptl-popup-code[b-1cjw1slzlx] {
    min-width: 170px;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    color: #1d4ed8;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 800;
}

.ptl-scan-field[b-1cjw1slzlx] {
    width: 100%;
    margin-top: 15px;
}

.ptl-scan-field[b-1cjw1slzlx]  .form-control {
    min-height: 44px;
    border: 1px solid #93c5fd;
    border-radius: 9px !important;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 8%);
}

.ptl-detail-modal[b-1cjw1slzlx]  .modal-dialog {
    max-width: min(1200px, calc(100vw - 32px));
}

.ptl-detail-modal[b-1cjw1slzlx]  .tableInModal {
    max-height: 70vh;
    padding: 12px;
    overflow: auto;
    background: #f8fafc;
}

.ptl-detail-modal[b-1cjw1slzlx]  .table-container {
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
}

/* รวมรายละเอียดที่เกี่ยวข้องในแถวเดียวเพื่ออ่านงานหยิบโดยไม่ต้องเลื่อนหลายคอลัมน์ */
.ptl-detail-modal[b-1cjw1slzlx]  .tableInModal {
    padding: 10px;
    background: var(--bs-body-bg);
}

.ptl-detail-modal[b-1cjw1slzlx]  table {
    table-layout: fixed;
}

.ptl-detail-modal[b-1cjw1slzlx]  thead th {
    padding: 10px 8px;
    font-size: 12px !important;
    line-height: 1.4;
    text-transform: none;
}

.ptl-detail-modal[b-1cjw1slzlx]  tbody td {
    padding: 10px 8px;
    font-size: 14px !important;
    line-height: 1.4;
    vertical-align: middle;
}

.ptl-detail-product[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ptl-detail-product > strong[b-1cjw1slzlx] {
    color: var(--bs-primary);
    font-size: 14px;
}

.ptl-detail-product small[b-1cjw1slzlx],
.ptl-detail-quantity small[b-1cjw1slzlx] {
    color: var(--bs-secondary);
    font-size: 12px;
}

.ptl-detail-quantity[b-1cjw1slzlx] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.ptl-detail-quantity > strong[b-1cjw1slzlx] {
    font-size: 17px;
    font-weight: 600;
}

.ptl-detail-modal[b-1cjw1slzlx]  tbody .badge {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 500;
}

/* ยกเลิกความสูงแถวและตำแหน่ง absolute จากตารางส่วนกลางเฉพาะ popup ที่มีข้อมูลหลายบรรทัด */
.ptl-detail-modal.ptl-modal[b-1cjw1slzlx]  .table.table tbody > tr {
    height: auto !important;
}

.ptl-detail-modal.ptl-modal[b-1cjw1slzlx]  .table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
    line-height: 1.4 !important;
    vertical-align: middle;
}

.ptl-detail-modal.ptl-modal[b-1cjw1slzlx]  .table.table tbody > tr > td > .table-cell {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.ptl-detail-product > small[b-1cjw1slzlx],
.ptl-detail-quantity > small[b-1cjw1slzlx] {
    display: block;
    line-height: 1.4;
    color: #64748b;
}

/* ใช้ element ของ component เป็นจุดอ้างอิง เพื่อให้ scoped CSS เข้าถึง Modal/Table ลูกได้ */
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) {
    width: calc(100vw - 96px);
    max-width: 1200px;
    margin: 24px auto;
    min-height: calc(100% - 48px);
}

.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-content {
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid #b8d6f8;
    border-radius: 16px;
    background: #f8fbff;
    box-shadow: 0 24px 70px rgb(8 30 63 / 32%);
}

.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header {
    min-height: 64px;
    padding: 14px 22px;
    border: 0;
    background: linear-gradient(115deg, #1258ac, #1769c6);
}

.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-title { color: #fff; font-size: clamp(18px, 1.6vw, 24px); font-weight: 750; line-height: 1.3; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header-buttons { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header-buttons .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #ffffff70 !important;
    border-radius: 10px !important;
    color: #fff !important;
    background-color: #ffffff12 !important;
    box-shadow: none !important;
    opacity: 1;
    font-size: 19px;
}
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header .btn-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header-buttons .btn:hover { background-color: #ffffff28 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-body { padding: 0; overflow: auto; background: #f8fbff; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-footer { flex: 0 0 auto; padding: 10px 18px 14px; border: 0; background: #f8fbff; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #ccd6e3 !important;
    border-radius: 9px !important;
    color: #20334f !important;
    background: #f7f9fc !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 3px 3px rgb(23 45 78 / 12%);
}

.ptl-picking-detail[b-1cjw1slzlx] { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 0; }
.ptl-detail-summary[b-1cjw1slzlx] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ptl-summary-card[b-1cjw1slzlx] { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #d8e7fa; border-radius: 12px; background: #fff; }
.ptl-summary-card > div[b-1cjw1slzlx] { min-width: 0; }
.ptl-summary-icon[b-1cjw1slzlx] { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 16px; color: #0870cb; background: #e7f3ff; font-size: 26px; }
.ptl-summary-icon.is-picked[b-1cjw1slzlx] { color: #06a577; background: #e0f7ef; }
.ptl-summary-label[b-1cjw1slzlx] { display: block; margin-bottom: 4px; color: #596e8f; font-size: 15px; line-height: 1.4; }
.ptl-summary-value[b-1cjw1slzlx] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: #142c51; font-size: 30px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ptl-summary-value small[b-1cjw1slzlx] { color: #647894; font-size: 14px; font-weight: 400; }
.ptl-summary-status[b-1cjw1slzlx] { display: inline-flex; justify-content: center; min-width: 86px; padding: 4px 12px; border-radius: 999px; color: #008dce; background: #bdefff; font-size: 13px; font-weight: 700; }
.ptl-summary-status.is-complete[b-1cjw1slzlx] { color: #06865d; background: #dcf6e9; }
.ptl-summary-status.is-picking[b-1cjw1slzlx] { color: #1757c8; background: #e1ecff; }
.ptl-summary-status.is-empty[b-1cjw1slzlx] { color: #64748b; background: #edf1f6; }
.ptl-detail-table[b-1cjw1slzlx] { min-width: 0; }

.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-container {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 12px;
    background: #fff;
}
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-toolbar { min-height: 48px; padding: 8px; background: #fff; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-toolbar .btn { min-height: 34px; padding: 6px 12px; border: 1px solid #cbd5e2; border-radius: 8px !important; color: #223650; background: #f5f7fa; font-size: 13px; font-weight: 700; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-fixed { height: auto !important; min-height: 0; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-fixed-body { height: auto !important; max-height: min(46dvh, 480px); overflow-y: auto !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table table { width: 100%; margin: 0; table-layout: fixed; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table thead th { height: auto !important; padding: 12px 10px !important; border-color: #ffffff20; color: #fff; background: linear-gradient(115deg, #125bb0, #1a67bf); font-size: 13px !important; line-height: 1.4 !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table thead th .table-cell { height: auto !important; min-height: 0 !important; color: #fff; font-size: 13px !important; font-weight: 700; line-height: 1.4 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody tr { height: auto !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td { height: auto !important; padding: 12px 10px !important; border-right: 1px solid #e7edf6; border-bottom: 1px solid #e7edf6; color: #415779; background: #fff; font-size: 14px !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td > .table-cell { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
.ptl-detail-table .ptl-detail-product[b-1cjw1slzlx] { gap: 4px; font-size: 14px; line-height: 1.5; }
.ptl-detail-table .ptl-detail-product > strong[b-1cjw1slzlx] { color: #007bbd; font-size: 18px; font-weight: 700; }
.ptl-detail-table .ptl-detail-product small[b-1cjw1slzlx] { color: #8b9bb5; font-size: 13px; }
.ptl-detail-table .ptl-detail-quantity[b-1cjw1slzlx] { align-items: center; }
.ptl-detail-table .ptl-detail-quantity strong[b-1cjw1slzlx] { color: #3c5273; font-size: 24px; font-weight: 750; }
.ptl-detail-table .ptl-detail-quantity.text-primary strong[b-1cjw1slzlx] { color: #0084ce; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody .badge { display: inline-flex; justify-content: center; min-width: 72px; padding: 6px 12px; border-radius: 999px; font-size: 13px !important; font-weight: 650; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .badge.bg-info { color: #008ac4 !important; background: #b7edfc !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-pagination { min-height: 46px; padding: 8px 10px; color: #526682; font-size: 13px; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-pagination .form-select { height: 36px; border-color: #d4e2f4; border-radius: 8px; font-size: 13px; }

/* คงขนาดตัวอักษรของ popup แม้ theme ส่วนกลางบังคับตัวอักษรในตารางเป็น 11px */
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .ptl-detail-product,
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .ptl-detail-product > span { font-size: 14px !important; line-height: 1.5 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .ptl-detail-product > strong { font-size: 17px !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .ptl-detail-product > small { font-size: 14px !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .ptl-detail-quantity > strong { font-size: 22px !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td > .table-cell { font-size: 14px !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table tbody td .badge { font-size: 13px !important; font-weight: 650 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-toolbar .btn,
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-footer .btn { font-size: 13px !important; font-weight: 700 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table thead th,
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table thead th .table-cell { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 14px !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table thead th .table-cell { padding: 0 !important; }
.ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-dialog.modal-fullscreen .modal-content { max-height: 100dvh; border-radius: 0; }

@media (max-width: 1100px) {
    .ptl-summary-card[b-1cjw1slzlx] { gap: 10px; padding: 16px 12px; }
    .ptl-summary-icon[b-1cjw1slzlx] { width: 36px; height: 36px; flex-basis: 36px; border-radius: 14px; font-size: 23px; }
    .ptl-summary-label[b-1cjw1slzlx] { font-size: 13px; }
    .ptl-summary-value[b-1cjw1slzlx] { font-size: 28px; gap: 8px; }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-fixed-body,
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-fixed-header { overflow-x: auto !important; }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table table { min-width: 1000px; }
}

@media (max-width: 720px) {
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) { width: calc(100vw - 20px); margin: 10px auto; min-height: calc(100% - 20px); }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-content { max-height: calc(100dvh - 20px); }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header { min-height: 60px; padding: 12px 16px; }
    .ptl-picking-detail[b-1cjw1slzlx] { padding: 12px 12px 0; gap: 12px; }
    .ptl-detail-summary[b-1cjw1slzlx] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ptl-summary-value[b-1cjw1slzlx] { font-size: 24px; }
    .ptl-summary-status[b-1cjw1slzlx] { min-width: 0; font-size: 13px; }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-footer { padding: 12px; }
}

@media (max-height: 740px) {
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-modal .modal-header { min-height: 58px; padding: 12px 20px; }
    .ptl-picking-detail[b-1cjw1slzlx] { padding-top: 14px; gap: 12px; }
    .ptl-summary-card[b-1cjw1slzlx] { padding-top: 14px; padding-bottom: 14px; }
    .ptl-picking-detail-scope[b-1cjw1slzlx]  .ptl-detail-table .table-fixed-body { max-height: 34dvh; }
}

[b-1cjw1slzlx] .replen-scan-input>input { width:100%;min-height:44px;border:1px solid #bfdbfe;border-radius:9px; }
[b-1cjw1slzlx] .popup-field>.form-select { width:100%;max-width:none;min-height:43px;border-color:#cbd5e1;border-radius:8px; }
[b-1cjw1slzlx] .replen-current-stock-title { display:flex;align-items:center;gap:7px;margin:8px 0 22px;font-size:11px;font-weight:700;color:#334155; }
/* _content/WMS.UI/Pages/Workstation/StationPtl.razor.rz.scp.css */
.ptl-dashboard[b-qcplxixv9g] {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(15 23 42 / 4%);
}

.ptl-layout[b-qcplxixv9g] {
    min-width: 0;
    gap: 12px;
    align-items: stretch !important;
}

.ptl-pallet-column[b-qcplxixv9g] {
    width: 24%;
    min-width: 210px;
    gap: 8px;
}

.ptl-module-column[b-qcplxixv9g] {
    width: 76%;
    min-width: 0;
    gap: 8px;
    margin-left: 0 !important;
}

.ptl-section-title[b-qcplxixv9g] {
    min-height: 38px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .04em;
}

.ptl-section-title i[b-qcplxixv9g] {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #2563eb;
    font-size: 11px;
}

.ptl-row[b-qcplxixv9g] {
    height: 92px;
    min-width: 0;
    gap: 7px;
}

.ptl-row-number[b-qcplxixv9g] {
    width: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    color: #fff;
    background: #334155;
}

.ptl-row-number h2[b-qcplxixv9g] {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.ptl-row > .w-100[b-qcplxixv9g] {
    min-width: 0;
    gap: 7px;
}

.ptl-slot[b-qcplxixv9g] {
    min-width: 0;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid #dce5f0 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgb(15 23 42 / 4%);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ptl-slot:hover[b-qcplxixv9g] {
    border-color: #93c5fd !important;
    box-shadow: 0 4px 12px rgb(37 99 235 / 12%);
    transform: translateY(-1px);
}

.ptl-slot > .d-flex:first-child[b-qcplxixv9g] {
    min-height: 20px;
    color: inherit;
    font-size: 10px;
    font-weight: 800;
}

.ptl-slot h2[b-qcplxixv9g] {
    font-size: 23px;
    font-weight: 850;
    line-height: 1;
}

.ptl-slot .mt-2[b-qcplxixv9g] {
    margin-top: 3px !important;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptl-slot .icon-pick-p2l[b-qcplxixv9g] {
    font-size: 25px !important;
}

.ptl-slot .icon-barcode[b-qcplxixv9g] {
    font-size: 20px !important;
}

.ptl-pallet-slot[b-qcplxixv9g] {
    min-height: 92px;
}

.ptl-slot.bg-secondary[b-qcplxixv9g],
.ptl-slot.bg-dark[b-qcplxixv9g] {
    color: #475569 !important;
    background-color: #f1f5f9 !important;
}

.ptl-slot.bg-primary[b-qcplxixv9g] {
    border-color: #3b82f6 !important;
    color: #fff !important;
    background-color: #2563eb !important;
}

.ptl-slot.bg-success[b-qcplxixv9g] {
    border-color: #22c55e !important;
    color: #fff !important;
    background-color: #16a34a !important;
}

.ptl-slot.bg-info[b-qcplxixv9g] {
    border-color: #06b6d4 !important;
}

.ptl-dashboard[b-qcplxixv9g]  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    line-height: 1;
}

@media (max-width: 1000px) {
    .ptl-layout[b-qcplxixv9g] {
        flex-direction: column !important;
    }

    .ptl-pallet-column[b-qcplxixv9g],
    .ptl-module-column[b-qcplxixv9g] {
        width: 100%;
        min-width: 0;
    }

    .ptl-pallet-column[b-qcplxixv9g] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .ptl-pallet-column .ptl-section-title[b-qcplxixv9g] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .ptl-dashboard[b-qcplxixv9g] { padding: 8px; }
    .ptl-pallet-column[b-qcplxixv9g] { grid-template-columns: 1fr; }

    .ptl-row[b-qcplxixv9g] {
        height: auto;
        align-items: stretch;
    }

    .ptl-row > .w-100[b-qcplxixv9g] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(125px, 1fr));
    }

    .ptl-slot[b-qcplxixv9g] {
        min-height: 88px;
    }
}


/* Populated PTL state */
.ptl-section-title[b-qcplxixv9g] {
    width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    color: #2563eb !important;
    background: transparent !important;
    letter-spacing: .12em;
}

.ptl-section-title[b-qcplxixv9g]::before,
.ptl-section-title[b-qcplxixv9g]::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e4eaf2;
}

.ptl-section-title i[b-qcplxixv9g] {
    color: #2563eb;
    background: #eaf2ff;
}

.ptl-row-number[b-qcplxixv9g] {
    color: #fff !important;
    background: #2563eb !important;
    box-shadow: 0 3px 8px rgb(37 99 235 / 18%);
}

.ptl-slot[b-qcplxixv9g] {
    background-clip: padding-box;
}

.ptl-slot.bg-primary[b-qcplxixv9g],
.ptl-slot.bg-primary.bg-opacity-50[b-qcplxixv9g] {
    border-color: #38bdf8 !important;
    color: #0c4a6e !important;
    background-color: #bae6fd !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-success.bg-opacity-50[b-qcplxixv9g] {
    border-color: #86efac !important;
    color: #14532d !important;
    background-color: #dcfce7 !important;
    --bs-bg-opacity: 1;
}

.ptl-slot.bg-info[b-qcplxixv9g],
.ptl-slot.bg-info.bg-opacity-100[b-qcplxixv9g] {
    border-color: #22d3ee !important;
    color: #164e63 !important;
    background-color: #cffafe !important;
    --bs-bg-opacity: 1;
}

.ptl-slot .text-danger[b-qcplxixv9g] {
    color: #ef4444 !important;
}

.ptl-slot h2.text-danger[b-qcplxixv9g] {
    font-size: 25px;
    text-shadow: none;
}

.ptl-slot > .h-100[b-qcplxixv9g] {
    min-height: 0;
}

@media (min-width: 1001px) {
    .ptl-pallet-column[b-qcplxixv9g] {
        flex: 0 0 24%;
    }

    .ptl-module-column[b-qcplxixv9g] {
        flex: 1 1 76%;
    }
}


/* PTL dialogs */
.ptl-modal[b-qcplxixv9g]  .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 22px 55px rgb(15 23 42 / 25%);
}

.ptl-modal[b-qcplxixv9g]  .modal-header {
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5eaf1;
    background: #fff;
}

.ptl-modal[b-qcplxixv9g]  .modal-title {
    color: #172033;
    font-size: 17px;
    font-weight: 800;
}

.ptl-modal[b-qcplxixv9g]  .modal-body {
    padding: 0;
    background: #fff;
}

.ptl-modal[b-qcplxixv9g]  .modal-footer {
    padding: 11px 16px;
    gap: 8px;
    border-top: 1px solid #e5eaf1;
    background: #f8fafc;
}

.ptl-modal[b-qcplxixv9g]  .modal-footer .btn {
    min-width: 92px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    line-height: 1;
}

.ptl-popup-body[b-qcplxixv9g] {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ptl-popup-icon[b-qcplxixv9g] {
    width: 58px;
    height: 58px;
    margin-bottom: 11px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #2563eb;
    background: #dbeafe;
    font-size: 22px;
}

.ptl-popup-icon.is-warning[b-qcplxixv9g] {
    color: #d97706;
    background: #fef3c7;
}

.ptl-popup-eyebrow[b-qcplxixv9g] {
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .13em;
}

.ptl-popup-body h3[b-qcplxixv9g] {
    margin: 3px 0 4px;
    color: #172033;
    font-size: 18px;
    font-weight: 800;
}

.ptl-popup-body p[b-qcplxixv9g] {
    margin: 0;
    color: #64748b;
    font-size: 11px;
}

.ptl-popup-code[b-qcplxixv9g] {
    min-width: 170px;
    margin-top: 14px;
    padding: 9px 14px;
    border: 1px solid #dce5f0;
    border-radius: 9px;
    color: #1d4ed8;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 800;
}

.ptl-scan-field[b-qcplxixv9g] {
    width: 100%;
    margin-top: 15px;
}

.ptl-scan-field[b-qcplxixv9g]  .form-control {
    min-height: 44px;
    border: 1px solid #93c5fd;
    border-radius: 9px !important;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 8%);
}

.ptl-detail-modal[b-qcplxixv9g]  .modal-dialog {
    max-width: min(1200px, calc(100vw - 32px));
}

.ptl-detail-modal[b-qcplxixv9g]  .tableInModal {
    max-height: 70vh;
    padding: 12px;
    overflow: auto;
    background: #f8fafc;
}

.ptl-detail-modal[b-qcplxixv9g]  .table-container {
    overflow: hidden;
    border: 1px solid #dce5f0;
    border-radius: 10px;
    background: #fff;
}

/* รวมรายละเอียดที่เกี่ยวข้องในแถวเดียวเพื่ออ่านงานหยิบโดยไม่ต้องเลื่อนหลายคอลัมน์ */
.ptl-detail-modal[b-qcplxixv9g]  .tableInModal {
    padding: 10px;
    background: var(--bs-body-bg);
}

.ptl-detail-modal[b-qcplxixv9g]  table {
    table-layout: fixed;
}

.ptl-detail-modal[b-qcplxixv9g]  thead th {
    padding: 10px 8px;
    font-size: 12px !important;
    line-height: 1.4;
    text-transform: none;
}

.ptl-detail-modal[b-qcplxixv9g]  tbody td {
    padding: 10px 8px;
    font-size: 14px !important;
    line-height: 1.4;
    vertical-align: middle;
}

.ptl-detail-product[b-qcplxixv9g] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ptl-detail-product > strong[b-qcplxixv9g] {
    color: var(--bs-primary);
    font-size: 14px;
}

.ptl-detail-product small[b-qcplxixv9g],
.ptl-detail-quantity small[b-qcplxixv9g] {
    color: var(--bs-secondary);
    font-size: 12px;
}

.ptl-detail-quantity[b-qcplxixv9g] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.ptl-detail-quantity > strong[b-qcplxixv9g] {
    font-size: 17px;
    font-weight: 600;
}

.ptl-detail-modal[b-qcplxixv9g]  tbody .badge {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 500;
}

/* ยกเลิกความสูงแถวและตำแหน่ง absolute จากตารางส่วนกลางเฉพาะ popup ที่มีข้อมูลหลายบรรทัด */
.ptl-detail-modal.ptl-modal[b-qcplxixv9g]  .table.table tbody > tr {
    height: auto !important;
}

.ptl-detail-modal.ptl-modal[b-qcplxixv9g]  .table.table tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
    line-height: 1.4 !important;
    vertical-align: middle;
}

.ptl-detail-modal.ptl-modal[b-qcplxixv9g]  .table.table tbody > tr > td > .table-cell {
    position: static !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

.ptl-detail-product > small[b-qcplxixv9g],
.ptl-detail-quantity > small[b-qcplxixv9g] {
    display: block;
    line-height: 1.4;
    color: #64748b;
}

/* ใช้ element ของ component เป็นจุดอ้างอิง เพื่อให้ scoped CSS เข้าถึง Modal/Table ลูกได้ */
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) {
    width: calc(100vw - 96px);
    max-width: 1200px;
    margin: 24px auto;
    min-height: calc(100% - 48px);
}

.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-content {
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border: 1px solid #b8d6f8;
    border-radius: 16px;
    background: #f8fbff;
    box-shadow: 0 24px 70px rgb(8 30 63 / 32%);
}

.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header {
    min-height: 64px;
    padding: 14px 22px;
    border: 0;
    background: linear-gradient(115deg, #1258ac, #1769c6);
}

.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-title { color: #fff; font-size: clamp(18px, 1.6vw, 24px); font-weight: 750; line-height: 1.3; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header-buttons { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header-buttons .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #ffffff70 !important;
    border-radius: 10px !important;
    color: #fff !important;
    background-color: #ffffff12 !important;
    box-shadow: none !important;
    opacity: 1;
    font-size: 19px;
}
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header .btn-close {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header-buttons .btn:hover { background-color: #ffffff28 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-body { padding: 0; overflow: auto; background: #f8fbff; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-footer { flex: 0 0 auto; padding: 10px 18px 14px; border: 0; background: #f8fbff; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-footer .btn {
    min-width: 100px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #ccd6e3 !important;
    border-radius: 9px !important;
    color: #20334f !important;
    background: #f7f9fc !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 3px 3px rgb(23 45 78 / 12%);
}

.ptl-picking-detail[b-qcplxixv9g] { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px 0; }
.ptl-detail-summary[b-qcplxixv9g] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ptl-summary-card[b-qcplxixv9g] { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px; border: 1px solid #d8e7fa; border-radius: 12px; background: #fff; }
.ptl-summary-card > div[b-qcplxixv9g] { min-width: 0; }
.ptl-summary-icon[b-qcplxixv9g] { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border-radius: 16px; color: #0870cb; background: #e7f3ff; font-size: 26px; }
.ptl-summary-icon.is-picked[b-qcplxixv9g] { color: #06a577; background: #e0f7ef; }
.ptl-summary-label[b-qcplxixv9g] { display: block; margin-bottom: 4px; color: #596e8f; font-size: 15px; line-height: 1.4; }
.ptl-summary-value[b-qcplxixv9g] { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: #142c51; font-size: 30px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ptl-summary-value small[b-qcplxixv9g] { color: #647894; font-size: 14px; font-weight: 400; }
.ptl-summary-status[b-qcplxixv9g] { display: inline-flex; justify-content: center; min-width: 86px; padding: 4px 12px; border-radius: 999px; color: #008dce; background: #bdefff; font-size: 13px; font-weight: 700; }
.ptl-summary-status.is-complete[b-qcplxixv9g] { color: #06865d; background: #dcf6e9; }
.ptl-summary-status.is-picking[b-qcplxixv9g] { color: #1757c8; background: #e1ecff; }
.ptl-summary-status.is-empty[b-qcplxixv9g] { color: #64748b; background: #edf1f6; }
.ptl-detail-table[b-qcplxixv9g] { min-width: 0; }

.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-container {
    height: auto !important;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe7f6;
    border-radius: 12px;
    background: #fff;
}
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-toolbar { min-height: 48px; padding: 8px; background: #fff; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-toolbar .btn { min-height: 34px; padding: 6px 12px; border: 1px solid #cbd5e2; border-radius: 8px !important; color: #223650; background: #f5f7fa; font-size: 13px; font-weight: 700; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-fixed { height: auto !important; min-height: 0; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-fixed-body { height: auto !important; max-height: min(46dvh, 480px); overflow-y: auto !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table table { width: 100%; margin: 0; table-layout: fixed; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table thead th { height: auto !important; padding: 12px 10px !important; border-color: #ffffff20; color: #fff; background: linear-gradient(115deg, #125bb0, #1a67bf); font-size: 13px !important; line-height: 1.4 !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table thead th .table-cell { height: auto !important; min-height: 0 !important; color: #fff; font-size: 13px !important; font-weight: 700; line-height: 1.4 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody tr { height: auto !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td { height: auto !important; padding: 12px 10px !important; border-right: 1px solid #e7edf6; border-bottom: 1px solid #e7edf6; color: #415779; background: #fff; font-size: 14px !important; vertical-align: middle; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td > .table-cell { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; overflow: visible !important; white-space: normal !important; font-size: 14px !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
.ptl-detail-table .ptl-detail-product[b-qcplxixv9g] { gap: 4px; font-size: 14px; line-height: 1.5; }
.ptl-detail-table .ptl-detail-product > strong[b-qcplxixv9g] { color: #007bbd; font-size: 18px; font-weight: 700; }
.ptl-detail-table .ptl-detail-product small[b-qcplxixv9g] { color: #8b9bb5; font-size: 13px; }
.ptl-detail-table .ptl-detail-quantity[b-qcplxixv9g] { align-items: center; }
.ptl-detail-table .ptl-detail-quantity strong[b-qcplxixv9g] { color: #3c5273; font-size: 24px; font-weight: 750; }
.ptl-detail-table .ptl-detail-quantity.text-primary strong[b-qcplxixv9g] { color: #0084ce; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody .badge { display: inline-flex; justify-content: center; min-width: 72px; padding: 6px 12px; border-radius: 999px; font-size: 13px !important; font-weight: 650; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .badge.bg-info { color: #008ac4 !important; background: #b7edfc !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-pagination { min-height: 46px; padding: 8px 10px; color: #526682; font-size: 13px; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-pagination .form-select { height: 36px; border-color: #d4e2f4; border-radius: 8px; font-size: 13px; }

/* คงขนาดตัวอักษรของ popup แม้ theme ส่วนกลางบังคับตัวอักษรในตารางเป็น 11px */
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .ptl-detail-product,
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .ptl-detail-product > span { font-size: 14px !important; line-height: 1.5 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .ptl-detail-product > strong { font-size: 17px !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .ptl-detail-product > small { font-size: 14px !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .ptl-detail-quantity > strong { font-size: 22px !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td > .table-cell { font-size: 14px !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table tbody td .badge { font-size: 13px !important; font-weight: 650 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-toolbar .btn,
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-footer .btn { font-size: 13px !important; font-weight: 700 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table thead th,
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table thead th .table-cell { padding-top: 12px !important; padding-bottom: 12px !important; font-size: 14px !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table thead th .table-cell { padding: 0 !important; }
.ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-dialog.modal-fullscreen .modal-content { max-height: 100dvh; border-radius: 0; }

@media (max-width: 1100px) {
    .ptl-summary-card[b-qcplxixv9g] { gap: 10px; padding: 16px 12px; }
    .ptl-summary-icon[b-qcplxixv9g] { width: 36px; height: 36px; flex-basis: 36px; border-radius: 14px; font-size: 23px; }
    .ptl-summary-label[b-qcplxixv9g] { font-size: 13px; }
    .ptl-summary-value[b-qcplxixv9g] { font-size: 28px; gap: 8px; }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-fixed-body,
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-fixed-header { overflow-x: auto !important; }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table table { min-width: 1000px; }
}

@media (max-width: 720px) {
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-dialog:not(.modal-fullscreen) { width: calc(100vw - 20px); margin: 10px auto; min-height: calc(100% - 20px); }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-content { max-height: calc(100dvh - 20px); }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header { min-height: 60px; padding: 12px 16px; }
    .ptl-picking-detail[b-qcplxixv9g] { padding: 12px 12px 0; gap: 12px; }
    .ptl-detail-summary[b-qcplxixv9g] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ptl-summary-value[b-qcplxixv9g] { font-size: 24px; }
    .ptl-summary-status[b-qcplxixv9g] { min-width: 0; font-size: 13px; }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-footer { padding: 12px; }
}

@media (max-height: 740px) {
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-modal .modal-header { min-height: 58px; padding: 12px 20px; }
    .ptl-picking-detail[b-qcplxixv9g] { padding-top: 14px; gap: 12px; }
    .ptl-summary-card[b-qcplxixv9g] { padding-top: 14px; padding-bottom: 14px; }
    .ptl-picking-detail-scope[b-qcplxixv9g]  .ptl-detail-table .table-fixed-body { max-height: 34dvh; }
}
/* _content/WMS.UI/Pages/Workstation/StationTote.razor.rz.scp.css */
.tote-display[b-zl1l0aji9y] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    gap: 16px;
}

.tote-meta[b-zl1l0aji9y] { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.tote-label[b-zl1l0aji9y] { margin-bottom: 3px; color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.tote-meta strong[b-zl1l0aji9y] { max-width: 100%; overflow: hidden; color: #0f172a; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.tote-ready[b-zl1l0aji9y] {
    margin-top: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #047857;
    background: #d1fae5;
    font-size: 10px;
    font-weight: 750;
}
.tote-ready i[b-zl1l0aji9y] { margin-right: 3px; }

.tote-visual[b-zl1l0aji9y] { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tote-bin[b-zl1l0aji9y] {
    position: relative;
    width: 118px;
    height: 98px;
    overflow: hidden;
    border: 3px solid #2563eb;
    border-top-width: 8px;
    border-radius: 8px 8px 14px 14px;
    background: #fff;
    box-shadow: inset 0 -10px 0 #dbeafe, 0 7px 14px rgb(37 99 235 / 13%);
}
.tote-bin[b-zl1l0aji9y]::before, .tote-bin[b-zl1l0aji9y]::after {
    /*content: "";
    position: absolute;
    top: 8px;
    bottom: 13px;
    width: 5px;
    border-radius: 4px;
    background: #bfdbfe;
    pointer-events: none;
    z-index: 4;*/
}
.tote-bin[b-zl1l0aji9y]::before { left: 8px; }
.tote-bin[b-zl1l0aji9y]::after { right: 8px; }
.tote-side[b-zl1l0aji9y] { color: #64748b; font-size: 9px; font-weight: 750; letter-spacing: .08em; }

[b-zl1l0aji9y] .tote-bin > .bg-secondary { background-color: #93a4b8 !important; }
[b-zl1l0aji9y] .tote-bin > .bg-primary { background-color: #2563eb !important; }
[b-zl1l0aji9y] .tote-bin .card { border-radius: 0 !important; font-size: 10px; }
[b-zl1l0aji9y] .tote-bin .tote-partition { position: absolute; padding: 0; color: inherit; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
[b-zl1l0aji9y] .tote-bin .tote-partition:not(:disabled):hover { z-index: 2; filter: brightness(.94); box-shadow: inset 0 0 0 2px #1d4ed8; }
[b-zl1l0aji9y] .tote-bin .tote-partition:disabled { opacity: 1; cursor: default; }

@media (max-width: 380px) {
    .tote-display[b-zl1l0aji9y] { grid-template-columns: 1fr; }
    .tote-meta[b-zl1l0aji9y] { align-items: center; }
}
/* _content/WMS.UI/Pages/Workstation/StationToteDetail.razor.rz.scp.css */
.tote2-id[b-nhv4wkdheh] { margin-bottom: 10px; text-align: center; }
.tote2-id span[b-nhv4wkdheh] { display: block; color: #64748b; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.tote2-id strong[b-nhv4wkdheh] { display: block; color: #0f172a; font-size: 17px; }
.tote2-visual[b-nhv4wkdheh] { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tote2-bin[b-nhv4wkdheh] {
    position: relative;
    width: 210px;
    height: 125px;
    overflow: hidden;
    border: 4px solid #2563eb;
    border-top-width: 10px;
    border-radius: 10px 10px 18px 18px;
    background: #fff;
    box-shadow: inset 0 -12px 0 #dbeafe, 0 9px 22px rgb(37 99 235 / 15%);
}
.tote2-bin[b-nhv4wkdheh]::before, .tote2-bin[b-nhv4wkdheh]::after {
    /*content: "";
    position: absolute;
    z-index: 4;
    top: 10px;
    bottom: 17px;
    width: 7px;
    border-radius: 5px;
    background: #bfdbfe;
    pointer-events: none;*/
}
.tote2-bin[b-nhv4wkdheh]::before { left: 11px; }
.tote2-bin[b-nhv4wkdheh]::after { right: 11px; }
.tote2-side[b-nhv4wkdheh] { color: #64748b; font-size: 9px; font-weight: 750; letter-spacing: .1em; }
[b-nhv4wkdheh] .tote2-bin .card { border-radius: 0 !important; font-size: 11px; }
[b-nhv4wkdheh] .tote2-bin .tote-partition { position: absolute; padding: 0; color: inherit; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease; }
[b-nhv4wkdheh] .tote2-bin .tote-partition:not(:disabled):hover { z-index: 2; filter: brightness(.94); box-shadow: inset 0 0 0 2px #1d4ed8; }
[b-nhv4wkdheh] .tote2-bin .tote-partition:disabled { opacity: 1; cursor: default; }
[b-nhv4wkdheh] .tote2-bin .bg-primary { background-color: #2563eb !important; }
[b-nhv4wkdheh] .tote2-bin .bg-secondary { background-color: #94a3b8 !important; }
/* _content/WMS.UI/Pages/Workstation/StationWorkspace.razor.rz.scp.css */
.replen-page-shell[b-75y89cnimj] {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 14px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    box-sizing: border-box;
    background: #f4f7fb;
}

.replen-page-body[b-75y89cnimj] {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.replen-station-grid[b-75y89cnimj] {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 14px;
    align-items: stretch;
}

@media (max-width: 1500px) {
    .replen-page-shell[b-75y89cnimj] {
        overflow-y: auto;
    }

    .replen-page-body[b-75y89cnimj],
    .replen-station-grid[b-75y89cnimj] {
        height: auto;
    }

    .replen-station-grid[b-75y89cnimj] {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }
}

@media (max-width: 760px) {
    .replen-page-shell[b-75y89cnimj] {
        padding: 10px;
    }

    .replen-station-grid[b-75y89cnimj] {
        grid-template-columns: 1fr;
    }
}

.replen-station-toolbar[b-75y89cnimj] {
    min-height: 58px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #2368b8;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1459a6, #2872c8);
    color: #fff;
}

.replen-station-toolbar div[b-75y89cnimj] {
    display: flex;
    flex-direction: column;
}

.replen-station-toolbar small[b-75y89cnimj] {
    color: rgb(255 255 255 / 72%);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .12em;
}

.replen-station-toolbar strong[b-75y89cnimj] {
    font-size: 19px;
    line-height: 1.15;
}

.replen-station-toolbar button[b-75y89cnimj] {
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 8px;
    color: #fff;
    background: rgb(255 255 255 / 14%);
    font-size: 11px;
    font-weight: 750;
}

.replen-station-toolbar button:hover[b-75y89cnimj] {
    background: rgb(255 255 255 / 24%);
}

@media (max-width: 600px) {
    .replen-station-toolbar button[b-75y89cnimj] {
        width: 36px;
        padding: 0;
        justify-content: center;
    }

    .replen-station-toolbar button span[b-75y89cnimj] {
        display: none;
    }
}

.replen-station-grid.single-station[b-75y89cnimj] {
    grid-template-columns: minmax(0, 1fr);
}

.replen-page-body[b-75y89cnimj] {
    padding-top: 0;
}

.replen-page-body .replen-station-grid[b-75y89cnimj] {
    padding-top: 0;
}

.replen-station-toolbar + .replen-page-body .replen-station-grid[b-75y89cnimj] >  .station-panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.haipick-page[b-75y89cnimj] { height:100%;min-height:0;padding:14px;overflow:hidden;background:#f4f7fb; }
.haipick-page.haipick-fit[b-75y89cnimj] { display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden!important;padding:clamp(8px,1.1vh,14px); }
.haipick-page-body[b-75y89cnimj],.haipick-station-grid[b-75y89cnimj] { height:100%;min-height:0; }
.haipick-station-grid[b-75y89cnimj] { display:flex;flex-direction:column; }
.haipick-station-grid[b-75y89cnimj] >  .haipick-workstation { flex:1;min-height:0; }
/* _content/WMS.UI/Shared/MainLayout.razor.rz.scp.css */
.page[b-ihobe5zis8] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ihobe5zis8] {
    flex: 1;
}

.sidebar[b-ihobe5zis8] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ihobe5zis8] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ihobe5zis8]  a, .top-row .btn-link[b-ihobe5zis8] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-ihobe5zis8] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-ihobe5zis8] {
        display: none;
    }

    .top-row.auth[b-ihobe5zis8] {
        justify-content: space-between;
    }

    .top-row a[b-ihobe5zis8], .top-row .btn-link[b-ihobe5zis8] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ihobe5zis8] {
        flex-direction: row;
    }

    .sidebar[b-ihobe5zis8] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ihobe5zis8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-ihobe5zis8], article[b-ihobe5zis8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}


/* Account popup */
.account-trigger-wrap[b-ihobe5zis8]{display:flex;align-items:center}.account-trigger[b-ihobe5zis8]{height:42px;display:flex;align-items:center;gap:7px;padding:3px 8px 3px 4px;border:1px solid transparent;border-radius:22px;background:transparent;color:#fff;cursor:pointer;transition:background .18s,border-color .18s}.account-trigger:hover[b-ihobe5zis8]{border-color:#ffffff38;background:#ffffff18}.account-trigger-avatar[b-ihobe5zis8]{width:34px;height:34px;display:grid;place-items:center;border:2px solid #d9e9ff;border-radius:50%;background:#fff;color:#1768c9}.account-trigger-name[b-ihobe5zis8]{max-width:110px;overflow:hidden;font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.account-trigger-chevron[b-ihobe5zis8]{font-size:9px;opacity:.8}.account-popup-backdrop[b-ihobe5zis8]{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:20px;background:#07172e8c;backdrop-filter:blur(2px)}.account-popup[b-ihobe5zis8]{width:min(430px,calc(100vw - 28px));overflow:hidden;border:1px solid #d5e1ee;border-radius:18px;background:#f7f9fc;box-shadow:0 24px 70px #06152f50;animation:account-popup-in-b-ihobe5zis8 .18s ease-out}.account-popup-header[b-ihobe5zis8]{display:flex;align-items:flex-start;justify-content:space-between;padding:20px;background:linear-gradient(135deg,#1268d3,#0752af);color:#fff}.account-popup-profile[b-ihobe5zis8]{display:flex;align-items:center;gap:13px}.account-popup-avatar[b-ihobe5zis8]{width:50px;height:50px;display:grid;place-items:center;border:2px solid #ffffff80;border-radius:14px;background:#ffffff20;font-size:20px}.account-popup-profile small[b-ihobe5zis8]{display:block;font-size:9px;font-weight:800;letter-spacing:1.1px;opacity:.72}.account-popup-profile h2[b-ihobe5zis8]{margin:2px 0 4px;font-size:20px}.account-popup-profile div>span[b-ihobe5zis8]{display:flex;align-items:center;gap:4px;font-size:10px;color:#dff9ed}.account-popup-profile div>span i[b-ihobe5zis8]{font-size:8px;color:#61e8ad}.account-popup-close[b-ihobe5zis8]{width:34px;height:34px;border:0;border-radius:9px;background:#ffffff18;color:#fff;cursor:pointer}.account-popup-close:hover[b-ihobe5zis8]{background:#ffffff2c}.account-popup-body[b-ihobe5zis8]{padding:14px}.account-setting-row[b-ihobe5zis8],.account-client-card[b-ihobe5zis8]{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;box-sizing:border-box;border:1px solid #dbe4ef;border-radius:11px;background:#fff;padding:11px;text-align:left}.account-setting-icon[b-ihobe5zis8]{width:38px;height:38px;display:grid;place-items:center;border-radius:9px}.account-setting-icon.blue[b-ihobe5zis8]{color:#1268d3;background:#e9f3ff}.account-setting-icon.violet[b-ihobe5zis8]{color:#6745d5;background:#f0ecff}.account-setting-row strong[b-ihobe5zis8],.account-setting-row small[b-ihobe5zis8],.account-client-card small[b-ihobe5zis8],.account-client-card strong[b-ihobe5zis8],.account-client-card em[b-ihobe5zis8]{display:block}.account-setting-row strong[b-ihobe5zis8]{font-size:12px;color:#183555}.account-setting-row small[b-ihobe5zis8]{margin-top:2px;font-size:9px;color:#76869b}.account-switch[b-ihobe5zis8]{position:relative}.account-switch input[b-ihobe5zis8]{position:absolute;opacity:0}.account-switch span[b-ihobe5zis8]{display:block;width:42px;height:23px;border-radius:20px;background:#bdc8d6;cursor:pointer;transition:.2s}.account-switch span[b-ihobe5zis8]:after{content:"";display:block;width:17px;height:17px;margin:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #10213e40;transition:.2s}.account-switch input:checked+span[b-ihobe5zis8]{background:#10a36f}.account-switch input:checked+span[b-ihobe5zis8]:after{transform:translateX(19px)}.account-client-card[b-ihobe5zis8]{margin-top:9px;color:#183555;cursor:pointer}.account-client-card:hover[b-ihobe5zis8]{border-color:#a9c8ec;background:#fafdff}.account-client-card>div[b-ihobe5zis8]{min-width:0}.account-client-card small[b-ihobe5zis8]{font-size:9px;font-weight:800;color:#77879b}.account-client-card strong[b-ihobe5zis8]{margin-top:2px;overflow:hidden;font-family:monospace;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.account-client-card em[b-ihobe5zis8]{margin-top:3px;color:#1670d8;font-size:9px;font-style:normal}.account-client-card>i[b-ihobe5zis8]{color:#67809c}.account-popup-actions[b-ihobe5zis8]{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #dde5ef}.account-action[b-ihobe5zis8]{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px;border:1px solid transparent;border-radius:10px;background:transparent;color:#193553;text-align:left;cursor:pointer}.account-action:hover[b-ihobe5zis8]{border-color:#dbe5f0;background:#fff}.account-action>span[b-ihobe5zis8]{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#e9f3ff;color:#176bd3}.account-action div strong[b-ihobe5zis8],.account-action div small[b-ihobe5zis8]{display:block}.account-action div strong[b-ihobe5zis8]{font-size:11px}.account-action div small[b-ihobe5zis8]{margin-top:2px;color:#7a899c;font-size:9px}.account-action>i[b-ihobe5zis8]{color:#91a0b2;font-size:9px}.account-action.danger[b-ihobe5zis8]{color:#b53232}.account-action.danger>span[b-ihobe5zis8]{background:#ffeded;color:#c63b3b}@keyframes account-popup-in-b-ihobe5zis8{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* Change password popup */
[b-ihobe5zis8] .account-password-dialog .modal-content{overflow:hidden;border:0;border-radius:18px;box-shadow:0 25px 75px #06142e55}[b-ihobe5zis8] .account-password-dialog .modal-body{padding:0}.password-popup[b-ihobe5zis8]{background:#fff}.password-popup>header[b-ihobe5zis8]{display:grid;grid-template-columns:48px minmax(0,1fr) 34px;align-items:start;gap:12px;padding:20px;border-bottom:1px solid #dce5ef;background:linear-gradient(135deg,#f7faff,#eef5ff)}.password-popup>header>span[b-ihobe5zis8]{width:46px;height:46px;display:grid;place-items:center;border-radius:12px;background:#dfeeff;color:#1267cf;font-size:18px}.password-popup>header small[b-ihobe5zis8]{display:block;color:#176bd3;font-size:9px;font-weight:800;letter-spacing:1.2px}.password-popup>header h2[b-ihobe5zis8]{margin:2px 0;font-size:21px;color:#142e4e}.password-popup>header p[b-ihobe5zis8]{margin:0;color:#72839a;font-size:10px}.password-popup>header button[b-ihobe5zis8]{width:34px;height:34px;border:0;border-radius:9px;background:#e6edf5;color:#536b86;cursor:pointer}.password-popup-body[b-ihobe5zis8]{display:grid;gap:12px;padding:18px 20px}.password-popup-body label>span[b-ihobe5zis8]{display:block;margin-bottom:5px;color:#405873;font-size:10px;font-weight:800}.password-field[b-ihobe5zis8]{position:relative;display:flex;align-items:center}.password-field>i[b-ihobe5zis8]{position:absolute;z-index:2;left:12px;color:#7f90a6;font-size:11px}.password-field[b-ihobe5zis8]  .form-control{height:42px;padding-left:34px!important;border:1px solid #ccd9e8!important;border-radius:9px!important;background:#fbfcfe;text-align:left!important;font-size:12px}.password-field[b-ihobe5zis8]  .form-control:focus{border-color:#4a91e8!important;box-shadow:0 0 0 3px #1e78df1a!important}.password-divider[b-ihobe5zis8]{display:flex;align-items:center;gap:8px;color:#8a98aa;font-size:9px;font-weight:800}.password-divider[b-ihobe5zis8]:before,.password-divider[b-ihobe5zis8]:after{content:"";height:1px;flex:1;background:#e0e7ef}.password-hint[b-ihobe5zis8]{display:flex;align-items:flex-start;gap:7px;padding:9px 10px;border-radius:8px;background:#edf5ff;color:#4f6885;font-size:9px;line-height:1.45}.password-hint i[b-ihobe5zis8]{margin-top:2px;color:#1670da}.password-popup>footer[b-ihobe5zis8]{display:flex;justify-content:flex-end;gap:8px;padding:13px 20px;border-top:1px solid #dce5ef;background:#f9fbfd}.password-popup>footer[b-ihobe5zis8]  .btn{min-width:115px;height:38px;border-radius:8px;font-size:11px;font-weight:800}.password-popup>footer[b-ihobe5zis8]  .password-confirm{border-color:#1769d8;background:#1769d8;color:#fff}.password-popup>footer[b-ihobe5zis8]  .password-confirm:hover{background:#0d5cc3}

@media(max-width:640px){.account-trigger-name[b-ihobe5zis8],.account-trigger-chevron[b-ihobe5zis8]{display:none}.account-trigger[b-ihobe5zis8]{padding:3px}.account-popup-backdrop[b-ihobe5zis8]{padding:12px}.account-popup[b-ihobe5zis8]{border-radius:14px}.password-popup>header[b-ihobe5zis8]{grid-template-columns:42px minmax(0,1fr) 32px;padding:16px}.password-popup>header>span[b-ihobe5zis8]{width:40px;height:40px}.password-popup-body[b-ihobe5zis8]{padding:15px}.password-popup>footer[b-ihobe5zis8]{padding:12px 15px}.password-popup>footer[b-ihobe5zis8]  .btn{min-width:0;flex:1}}