:root {
    --bs-font-sans-serif: "Inter", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
    --factory-brand-navy: #2b5689;
    --factory-brand-navy-dark: #21456f;
    --factory-brand-aqua: #20bfc1;
    --factory-brand-cyan: #55c5dc;
    --factory-brand-silver: #a8adb2;
    --factory-accent: var(--factory-brand-aqua);
    --factory-heading: #111827;
    --factory-text: #273444;
    --factory-muted: #5c6675;
    --factory-muted-strong: #465365;
    --factory-border: #d7dee8;
    --factory-table-head: #eef3f8;
    --factory-table-head-text: #334155;
    --factory-touch-target: 48px;
    --factory-touch-target-lg: 56px;
    --factory-surface: #ffffff;
    --factory-page: #f2f8fa;
    --factory-radius: .875rem;
    --factory-radius-lg: 1rem;
    --factory-shadow: 0 .4rem 1.4rem rgba(15, 23, 42, .08);
    --factory-status-waiting: #f59e0b;
    --factory-status-progress: #2563eb;
    --factory-status-success: #16a34a;
    --factory-status-idle: #64748b;
    --factory-status-approved: #0891b2;
}

html,
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--factory-text);
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body,
.layout-page,
.content-wrapper {
    background-color: var(--factory-page);
}

body,
.layout-page,
.content-wrapper,
.card,
.modal-content {
    color: var(--factory-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-header h5,
.modal-title,
.fw-bold {
    color: var(--factory-heading);
}

.text-muted,
small.text-muted,
.form-text,
.dataTables_wrapper .dataTables_info {
    color: var(--factory-muted) !important;
}

.factory-quality-threshold-range::-webkit-slider-thumb {
    background-color: var(--factory-brand-navy);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(33, 69, 111, .35);
}

.factory-quality-threshold-range::-moz-range-thumb {
    background-color: var(--factory-brand-navy);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(33, 69, 111, .35);
}

.small,
small {
    color: var(--factory-muted-strong);
}

.form-label,
label {
    color: #2f3b4c;
    font-weight: 600;
}

.form-control,
.form-select {
    color: #1f2937;
    border-color: var(--factory-border);
}

.form-control::placeholder {
    color: #7b8797;
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    color: #111827;
    border-color: var(--factory-brand-aqua);
    box-shadow: 0 0 0 .2rem rgba(32, 191, 193, .14);
}

.btn {
    font-weight: 600;
}

.btn-primary {
    border-color: var(--factory-brand-navy);
    background-color: var(--factory-brand-navy);
    box-shadow: 0 .25rem .65rem rgba(43, 86, 137, .2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    border-color: var(--factory-brand-navy-dark) !important;
    background-color: var(--factory-brand-navy-dark) !important;
}

.btn-outline-primary {
    border-color: var(--factory-brand-navy);
    color: var(--factory-brand-navy);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    border-color: var(--factory-brand-navy);
    background-color: var(--factory-brand-navy);
    color: #fff;
}

.bg-label-primary {
    background-color: rgba(85, 197, 220, .16) !important;
    color: var(--factory-brand-navy) !important;
}

.layout-navbar,
.navbar-nav,
.navbar-nav .nav-link {
    color: var(--factory-text);
}

.menu .menu-link {
    color: #344054;
    font-weight: 600;
}

.menu .menu-header-text {
    color: var(--factory-muted-strong);
    font-weight: 700;
}

.menu .menu-icon {
    color: #536174;
}

.menu-item.active > .menu-link .menu-icon,
.menu-item.active > .menu-link div {
    color: inherit;
}

.factory-logo {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: linear-gradient(135deg, var(--factory-brand-aqua), var(--factory-brand-navy));
    color: #fff;
    font-size: .86rem;
    font-weight: 800;
    box-shadow: 0 .25rem .75rem rgba(43, 86, 137, .24);
}

.factory-brand-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    display: inline-flex;
    width: 182px;
    height: 68px;
    min-width: 0;
    flex: 0 0 182px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(203, 229, 238, .92);
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(250, 254, 255, .98), rgba(222, 241, 247, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 .35rem .9rem rgba(5, 28, 52, .18);
    transition: background .2s ease, transform .2s ease;
}

.factory-brand-link:hover {
    background: linear-gradient(135deg, #ffffff, rgba(229, 246, 251, .98));
    transform: translateY(-1px);
}

.factory-brand-image {
    position: relative;
    display: block;
    width: 122px;
    height: 62px;
    flex: 0 0 122px;
    overflow: hidden;
}

.factory-brand-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 175px;
    max-width: none;
    height: auto;
    transform: translate(-31px, -29px);
}

.factory-auth-inner {
    max-width: 430px;
}

.factory-auth-card {
    border: 0;
    box-shadow: 0 1rem 3rem rgba(67, 89, 113, .18);
}

.factory-auth-illustration {
    width: min(72%, 220px);
    height: auto;
}

.auth-cover-brand {
    position: absolute;
    top: 2rem;
    left: 2.5rem;
    z-index: 2;
}

.factory-cover-panel {
    min-height: 100vh;
    background: #f5f5f9;
}

.factory-cover-art {
    max-width: 620px;
}

.factory-cover-image {
    max-width: 520px;
    width: 82%;
}

.factory-cover-shadow {
    width: 74%;
    height: 26px;
    margin: -8px auto 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(67, 89, 113, .18), transparent 68%);
}

.authentication-wrapper.authentication-cover .authentication-bg {
    min-height: 100vh;
}

@media (max-width: 991.98px) {
    .auth-cover-brand {
        position: static;
        padding: 1.5rem 1.5rem 0;
    }

    .authentication-wrapper.authentication-cover .authentication-inner {
        min-height: 100vh;
        height: auto;
    }
}

/* Production login */
.factory-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1rem, 3vw, 2.5rem);
    background:
        radial-gradient(circle at 8% 12%, rgba(32, 191, 193, .13), transparent 30rem),
        linear-gradient(145deg, #e9f0f5 0%, #f4f7f9 46%, #e7eef3 100%);
}

.factory-login-shell {
    width: min(1180px, 100%);
    min-height: calc(100vh - clamp(2rem, 6vw, 5rem));
    min-height: calc(100dvh - clamp(2rem, 6vw, 5rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(25, 55, 86, .18);
}

.factory-login-hero {
    position: relative;
    min-height: 640px;
    padding: 3rem 3.5rem 2.25rem;
    overflow: hidden;
    flex-direction: column;
    color: #fff;
    background: linear-gradient(145deg, #173d67 0%, #285c8f 56%, #187f91 100%);
}

.factory-login-hero::before,
.factory-login-hero::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    pointer-events: none;
}

.factory-login-hero::before {
    width: 26rem;
    height: 26rem;
    right: -10rem;
    top: -8rem;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 0 0 4rem rgba(255, 255, 255, .035), 0 0 0 9rem rgba(255, 255, 255, .025);
}

.factory-login-hero::after {
    width: 20rem;
    height: 20rem;
    left: -10rem;
    bottom: -11rem;
    background: rgba(35, 200, 197, .13);
}

.factory-login-pattern {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom right, transparent 10%, #000 75%);
}

.factory-login-hero-content,
.factory-login-hero-footer {
    position: relative;
    z-index: 1;
}

.factory-laundry-visual {
    position: absolute;
    z-index: 0;
    top: 2.6rem;
    left: 3.5rem;
    width: 15rem;
    height: 13rem;
    opacity: .72;
    pointer-events: none;
}

.factory-laundry-drum {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10.5rem;
    height: 10.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 .8rem rgba(255, 255, 255, .045),
        0 0 0 .45rem rgba(117, 224, 225, .06),
        0 1.2rem 2.5rem rgba(7, 37, 67, .12);
}

.factory-laundry-drum::before {
    position: absolute;
    inset: 1.45rem;
    content: "";
    border: 1px solid rgba(117, 224, 225, .38);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.14), rgba(24,126,145,.08) 55%, rgba(8,46,83,.18));
}

.factory-laundry-water {
    position: absolute;
    z-index: 1;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.35rem;
    height: 3.7rem;
    border-radius: 0 0 5rem 5rem;
    background: linear-gradient(180deg, rgba(117,224,225,.24), rgba(32,191,193,.08));
}

.factory-laundry-water::before,
.factory-laundry-water::after {
    position: absolute;
    left: -.15rem;
    width: 7.6rem;
    height: 1.1rem;
    content: "";
    border-top: 2px solid rgba(139, 239, 237, .56);
    border-radius: 50%;
    transform: rotate(-4deg);
}

.factory-laundry-water::before {
    top: -.2rem;
}

.factory-laundry-water::after {
    top: .45rem;
    opacity: .5;
    transform: rotate(5deg);
}

.factory-laundry-bubble {
    position: absolute;
    border: 1px solid rgba(169, 240, 239, .55);
    border-radius: 50%;
    box-shadow: inset .15rem .15rem .35rem rgba(255,255,255,.12);
}

.factory-laundry-bubble--one {
    top: .2rem;
    left: 10.3rem;
    width: 2.1rem;
    height: 2.1rem;
}

.factory-laundry-bubble--two {
    top: 2.8rem;
    left: 12.8rem;
    width: 1.15rem;
    height: 1.15rem;
    opacity: .7;
}

.factory-laundry-bubble--three {
    top: 3.65rem;
    left: 10.5rem;
    width: .65rem;
    height: .65rem;
    background: rgba(117,224,225,.12);
}

.factory-login-hero-content {
    margin: auto 0;
    padding: 4rem 0;
}

.factory-login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .8rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.09);
    color: #d9f7f7;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.factory-login-hero h1 {
    margin: 1.25rem 0 .8rem;
    color: #fff;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.factory-login-hero-content p {
    margin: 0;
    color: rgba(239, 250, 255, .78);
    font-size: 1.04rem;
    line-height: 1.8;
}

.factory-login-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255,255,255,.67);
    font-size: .79rem;
}

.factory-login-hero-footer span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.factory-login-form-panel {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 4.5rem);
    background: linear-gradient(155deg, #fff 0%, #f8fafc 100%);
}

.factory-login-form-wrap {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.factory-login-brand {
    width: 190px;
    height: 82px;
    display: block;
    margin: 0 0 1.6rem;
    overflow: hidden;
}

.factory-login-brand img {
    width: 220px;
    max-width: none;
    display: block;
    margin: -33px 0 0 -15px;
}

.factory-login-heading {
    margin-bottom: 2rem;
}

.factory-login-kicker {
    display: block;
    margin-bottom: .65rem;
    color: var(--factory-brand-aqua);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.factory-login-heading h2 {
    margin-bottom: .45rem;
    color: #173d67;
    font-size: 2rem;
    font-weight: 800;
}

.factory-login-heading p {
    margin: 0;
    color: #6b7788;
}

.factory-login-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    border-radius: .65rem;
}

.factory-login-form .form-label {
    margin-bottom: .5rem;
    color: #32465a;
    font-size: .84rem;
}

.factory-login-input {
    position: relative;
}

.factory-login-input > .bx:first-child {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #7a8a9c;
    font-size: 1.15rem;
    pointer-events: none;
}

.factory-login-input .form-control,
.factory-login-input .form-select {
    min-height: 50px;
    padding-left: 2.8rem;
    border-color: #d9e1e9;
    border-radius: .65rem !important;
    background-color: #fff;
    box-shadow: 0 .15rem .45rem rgba(30, 57, 84, .035);
}

.factory-password-input .form-control {
    padding-right: 3rem;
}

.factory-password-toggle {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: .4rem;
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: .45rem;
    background: transparent;
    color: #7a8a9c;
    font-size: 1.15rem;
}

.factory-password-toggle:hover,
.factory-password-toggle:focus {
    background: #eef4f7;
    color: var(--factory-brand-navy);
}

.factory-login-submit {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: .65rem;
    background: linear-gradient(110deg, #214f7e, #257e92);
    box-shadow: 0 .65rem 1.3rem rgba(33, 79, 126, .25);
}

.factory-login-submit:hover,
.factory-login-submit:focus {
    background: linear-gradient(110deg, #183f68, #1c6e81) !important;
}

.factory-login-submit .bx {
    font-size: 1.2rem;
}

.factory-login-support {
    margin: 1.75rem 0 0;
    color: #7a8795;
    font-size: .78rem;
    text-align: center;
}

.factory-login-support .bx {
    margin-right: .25rem;
    vertical-align: -.1rem;
}

@media (max-width: 991.98px) {
    .factory-login-page {
        display: flex;
        align-items: center;
    }

    .factory-login-shell {
        min-height: auto;
        display: block;
        max-width: 540px;
    }

    .factory-login-form-panel {
        min-height: min(720px, calc(100dvh - 2rem));
    }

    .factory-login-brand {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .factory-login-page {
        padding: 0;
        background: #edf3f6;
    }

    .factory-login-shell {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .factory-login-form-panel {
        min-height: 100dvh;
        padding: 2rem 1.35rem;
    }

    .factory-login-heading h2 {
        font-size: 1.75rem;
    }
}

.menu .app-brand.demo {
    position: relative;
    height: 84px;
    padding-left: 0;
    overflow: visible;
    border: 0;
    border-bottom: 1px solid rgba(181, 220, 235, .18);
    border-radius: 0;
    background: linear-gradient(135deg, #123a63 0%, #1d507c 60%, #176f7f 100%);
}

.layout-menu .app-brand #factory-sidebar-toggle {
    position: absolute;
    top: 50%;
    left: auto !important;
    right: -1.125rem;
    display: flex !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    max-width: 2.25rem !important;
    height: 2.25rem !important;
    min-height: 2.25rem !important;
    max-height: 2.25rem !important;
    flex: 0 0 2.25rem !important;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    border: .35rem solid #edf7fb !important;
    border-radius: 50%;
    color: #fff !important;
    background: var(--factory-brand-navy);
    box-shadow: 0 .3rem .9rem rgba(5, 28, 52, .3);
    transform: translateY(-50%);
    z-index: 30;
}

.layout-menu .app-brand #factory-sidebar-toggle i,
.layout-menu .app-brand #factory-sidebar-toggle i::before {
    display: inline-flex;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.15rem;
    line-height: 1;
}

.layout-navbar {
    min-height: 70px;
}

/* Production navigation */
.layout-menu.bg-menu-theme {
    overflow: visible !important;
    background: linear-gradient(180deg, #173d67 0%, #1d507c 62%, #176f7f 100%) !important;
    box-shadow: .5rem 0 1.8rem rgba(17, 48, 78, .16);
}

.layout-menu .app-brand-text,
.layout-menu .layout-menu-toggle,
.layout-menu .menu-link,
.layout-menu .menu-icon {
    color: rgba(239, 248, 255, .82) !important;
}

.layout-menu .app-brand-text {
    color: #fff !important;
}

.layout-menu .factory-logo {
    background: linear-gradient(135deg, #35d2ce, #2f8fb0);
    box-shadow: 0 .3rem .9rem rgba(4, 29, 51, .3);
}

.layout-menu .menu-header-text {
    color: rgba(184, 218, 233, .62) !important;
}

/* Keep navigation labels compact and on a single line. */
.layout-menu .menu-link {
    padding-right: .625rem;
    padding-left: .75rem;
}

.layout-menu .menu-link .menu-icon {
    margin-right: .5rem;
}

.layout-menu .menu-link > div {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    html.layout-menu-fixed .layout-menu {
        transition: width .25s ease, box-shadow .25s ease;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu {
        width: 5.25rem !important;
        transform: none;
        box-shadow: .35rem 0 1rem rgba(17, 48, 78, .12);
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-page {
        padding-left: 0 !important;
        margin-left: 5.25rem;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-page > .layout-navbar.navbar-detached {
        left: calc(5.25rem + 1.625rem) !important;
        right: 1.625rem !important;
        width: auto !important;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-page > .container-xxl,
    html.layout-menu-fixed.layout-menu-collapsed .layout-page .content-wrapper > .container-xxl,
    html.layout-menu-fixed.layout-menu-collapsed .layout-page .content-wrapper > footer .container-xxl {
        max-width: none;
    }

    html.layout-menu-collapsed .layout-menu .app-brand {
        position: relative;
        width: 5.25rem;
        justify-content: center;
        padding-inline: .75rem;
        overflow: visible;
    }

    html.layout-menu-collapsed .layout-menu .app-brand-link {
        justify-content: center;
    }

    html.layout-menu-collapsed .layout-menu .app-brand-text,
    html.layout-menu-collapsed .layout-menu .menu-header-text,
    html.layout-menu-collapsed .layout-menu .menu-link > div,
    html.layout-menu-collapsed .layout-menu .menu-link > .badge {
        display: none !important;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu .app-brand .factory-logo {
        transform: translateX(-.55rem);
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu .factory-brand-image {
        width: 45px;
        height: 34px;
        flex-basis: 45px;
        transform: none;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu .factory-brand-image img {
        width: 155px;
        transform: translate(-35px, -27px);
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu .factory-brand-link {
        top: .7rem;
        left: .7rem;
        width: 3.85rem;
        height: 3.85rem;
        flex-basis: 3.85rem;
        border-radius: .75rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 .25rem .75rem rgba(5, 28, 52, .18);
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu .app-brand #factory-sidebar-toggle {
        position: absolute;
        top: 50%;
        left: auto !important;
        right: -1rem;
        display: flex !important;
        width: 2rem !important;
        min-width: 2rem !important;
        max-width: 2rem !important;
        height: 2rem !important;
        min-height: 2rem !important;
        max-height: 2rem !important;
        flex: 0 0 2rem !important;
        aspect-ratio: 1 / 1;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0;
        border: .3rem solid #edf7fb !important;
        border-radius: 50%;
        background: var(--factory-brand-navy);
        box-shadow: 0 .25rem .7rem rgba(5, 28, 52, .3) !important;
        outline: 0;
        transform: translateY(-50%);
        z-index: 20;
        pointer-events: auto;
    }

    html.layout-menu-fixed.layout-menu-collapsed .layout-menu #factory-sidebar-toggle i {
        transform: rotate(180deg);
    }

    html.layout-menu-collapsed .layout-menu .menu-header {
        min-height: 1px;
        margin: .75rem 1rem;
        padding: 0;
        border-top: 1px solid rgba(184, 218, 233, .25);
    }

    html.layout-menu-collapsed .layout-menu .menu-inner,
    html.layout-menu-collapsed .layout-menu .menu-item {
        width: 5.25rem !important;
        min-width: 5.25rem !important;
        max-width: 5.25rem !important;
    }

    html.layout-menu-collapsed .layout-menu .menu-link {
        width: calc(5.25rem - 1.3rem) !important;
        min-width: 0 !important;
        max-width: calc(5.25rem - 1.3rem) !important;
        justify-content: center;
        margin-inline: .65rem;
        padding-inline: 0;
    }

    html.layout-menu-collapsed .layout-menu .menu-icon {
        display: inline-flex !important;
        width: 2.5rem !important;
        height: 2.5rem;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        color: #c9e8f5 !important;
        font-family: "boxicons" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-size: 1.35rem;
        line-height: 1;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    html.layout-menu-collapsed .layout-menu .menu-icon::before {
        display: block !important;
        color: inherit !important;
        font-family: "boxicons" !important;
        font-size: 1.35rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html.layout-menu-collapsed .layout-menu .menu-item.active > .menu-link .menu-icon {
        color: #fff !important;
    }

    .factory-navbar-menu-toggle {
        display: none !important;
    }

    html.layout-menu-collapsed .factory-navbar-menu-toggle {
        display: flex !important;
    }
}

.layout-menu .menu-header::before {
    background-color: rgba(184, 218, 233, .35) !important;
}

.layout-menu .menu-item .menu-link:hover,
.layout-menu .menu-item .menu-link:focus {
    background: rgba(255, 255, 255, .075);
    color: #fff !important;
}

.layout-menu .menu-item.active > .menu-link {
    background: linear-gradient(90deg, rgba(47, 208, 204, .24), rgba(255, 255, 255, .1)) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #59dfdc;
}

.layout-menu .menu-item.active::before {
    background: #59dfdc !important;
}

.layout-menu .menu-inner-shadow {
    background: linear-gradient(#173d67 5%, rgba(23, 61, 103, .72) 45%, rgba(23, 61, 103, .2) 80%, transparent) !important;
}

.layout-navbar.bg-navbar-theme {
    border: 1px solid rgba(255, 255, 255, .08);
    background: linear-gradient(110deg, #1b456f, #24647f) !important;
    color: #fff;
    box-shadow: 0 .45rem 1.4rem rgba(18, 52, 83, .2) !important;
}

.layout-navbar.bg-navbar-theme .fw-bold,
.layout-navbar.bg-navbar-theme .fw-semibold,
.layout-navbar.bg-navbar-theme .nav-link {
    color: #fff !important;
}

.layout-navbar.bg-navbar-theme .text-muted,
.layout-navbar.bg-navbar-theme small {
    color: rgba(226, 242, 248, .72) !important;
}

.layout-navbar .btn-outline-secondary {
    border-color: rgba(255, 255, 255, .48);
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.layout-navbar .btn-outline-secondary:hover,
.layout-navbar .btn-outline-secondary:focus {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.factory-dashboard-stat {
    --dashboard-stat-accent: var(--factory-brand-navy);
    --dashboard-stat-tint: rgba(43, 86, 137, .055);
    position: relative;
    overflow: hidden;
    border-color: rgba(148, 163, 184, .2);
    background: linear-gradient(135deg, #fff 58%, var(--dashboard-stat-tint) 100%);
    box-shadow: 0 .3rem 1rem rgba(15, 23, 42, .07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.factory-dashboard-stat::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--dashboard-stat-accent);
    content: '';
}

.factory-dashboard-stat:hover {
    border-color: color-mix(in srgb, var(--dashboard-stat-accent) 28%, transparent);
    box-shadow: 0 .6rem 1.4rem rgba(15, 23, 42, .1);
    transform: translateY(-2px);
}

.factory-dashboard-stat-orders {
    --dashboard-stat-accent: #2b5689;
    --dashboard-stat-tint: rgba(43, 86, 137, .06);
}

.factory-dashboard-stat-revenue {
    --dashboard-stat-accent: #20bfc1;
    --dashboard-stat-tint: rgba(32, 191, 193, .07);
}

.factory-dashboard-stat-qc {
    --dashboard-stat-accent: #65c83f;
    --dashboard-stat-tint: rgba(101, 200, 63, .075);
}

.factory-dashboard-stat-qa {
    --dashboard-stat-accent: #f59e0b;
    --dashboard-stat-tint: rgba(245, 158, 11, .075);
}

.dashboard-loading-gif {
    display: block;
    width: min(11rem, 100%);
    height: auto;
    margin-inline: auto;
    border-radius: 1rem;
    box-shadow: 0 .45rem 1.2rem rgba(15, 23, 42, .14);
}

.factory-dashboard-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .55rem;
}

.factory-dashboard-action {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid #e1e8ef;
    border-radius: .65rem;
    color: var(--factory-text);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.factory-dashboard-action:hover,
.factory-dashboard-action:focus {
    border-color: rgba(32, 191, 193, .45);
    background: #f1fafa;
    color: var(--factory-brand-navy);
    transform: translateX(2px);
}

.factory-dashboard-action-icon {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: .55rem;
    background: rgba(32, 191, 193, .12);
    color: var(--factory-brand-navy);
    font-size: 1.2rem;
}

.factory-dashboard-action strong,
.factory-dashboard-action small {
    display: block;
}

.factory-dashboard-action strong {
    color: inherit;
    font-size: .88rem;
}

.factory-dashboard-action small {
    margin-top: .12rem;
    color: var(--factory-muted);
    font-size: .72rem;
}

.card {
    border-radius: .5rem;
}

.card-header h5 {
    font-weight: 700;
}

.table th {
    white-space: nowrap;
}

.table,
.table td,
.table th {
    color: var(--factory-text);
}

.factory-data-card {
    border: 0;
    box-shadow: 0 .35rem 1.25rem rgba(67, 89, 113, .08);
}

.factory-data-card .card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--factory-border);
}

.factory-table {
    margin-bottom: 0;
}

.factory-table thead th {
    padding-top: .85rem;
    padding-bottom: .85rem;
    background: var(--factory-table-head);
    color: var(--factory-table-head-text);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    border-bottom: 1px solid var(--factory-border);
}

.factory-table tbody td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: middle;
    color: var(--factory-text);
}

.factory-table tbody tr {
    transition: background-color .15s ease, box-shadow .15s ease;
}

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

.factory-table .btn-icon {
    width: 2rem;
    height: 2rem;
}

/* Customer list: tablet-first, touch-friendly administration. */
.factory-customer-table tbody td {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.factory-customer-actions {
    min-width: 20rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.factory-customer-actions .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .7rem;
    font-weight: 700;
    white-space: nowrap;
}

.factory-customer-actions form,
.factory-customer-actions form .btn {
    width: 100%;
}

@media (max-width: 1199.98px) {
    .factory-customer-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .factory-customer-table,
    .factory-customer-table tbody,
    .factory-customer-table tbody tr,
    .factory-customer-table tbody td {
        display: block;
        width: 100% !important;
    }

    .factory-customer-table tbody tr {
        padding: .35rem 0;
        border-bottom: 1px solid var(--factory-border);
    }

    .factory-customer-table tbody td {
        min-height: var(--factory-touch-target);
        display: grid;
        grid-template-columns: minmax(8.5rem, 34%) minmax(0, 1fr);
        align-items: center;
        gap: .75rem;
        padding: .65rem 1.25rem;
        border: 0;
        text-align: left !important;
    }

    .factory-customer-table tbody td::before {
        content: attr(data-label);
        color: var(--factory-muted-strong);
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

    .factory-customer-table tbody td[data-label="การจัดการ"] {
        display: block;
        padding-top: .9rem;
    }

    .factory-customer-table tbody td[data-label="การจัดการ"]::before {
        display: block;
        margin-bottom: .6rem;
    }

    .factory-customer-actions {
        min-width: 0;
        width: 100%;
    }

    .factory-customer-page .factory-dt-toolbar,
    .factory-customer-page .factory-dt-footer {
        padding: 1rem 1.25rem;
    }

    .factory-customer-page .factory-dt-toolbar > div {
        margin-bottom: .75rem;
    }

    .factory-customer-page .factory-dt-toolbar > div:last-child {
        margin-bottom: 0;
    }

    .factory-customer-page .factory-dt-search,
    .factory-customer-page .factory-dt-search .dataTables_filter,
    .factory-customer-page .factory-dt-search .form-control {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .factory-customer-table tbody td {
        grid-template-columns: minmax(6.5rem, 37%) minmax(0, 1fr);
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .factory-customer-actions {
        grid-template-columns: 1fr;
    }
}

.factory-action-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.factory-action-strip .btn {
    white-space: nowrap;
}

/* Tablet-first operations UI */
.factory-touch-page .form-control,
.factory-touch-page .form-select,
.factory-touch-page .btn {
    min-height: var(--factory-touch-target);
    border-radius: .65rem;
}

.factory-touch-page .btn-icon {
    width: var(--factory-touch-target);
    min-width: var(--factory-touch-target);
    padding: 0;
}

.factory-touch-summary {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: var(--factory-radius);
    box-shadow: var(--factory-shadow);
}

.factory-touch-summary .card-body {
    padding: 1rem 1.125rem;
}

.factory-touch-summary-value {
    color: var(--factory-heading);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1;
}

.qa-summary-filter {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.qa-summary-filter .factory-touch-summary {
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.qa-summary-filter:hover .factory-touch-summary {
    border-color: rgba(32, 191, 193, .5);
    transform: translateY(-2px);
    box-shadow: 0 .6rem 1.3rem rgba(15, 23, 42, .11);
}

.qa-summary-filter.is-active .factory-touch-summary {
    border: 2px solid var(--factory-brand-aqua);
    box-shadow: 0 0 0 .2rem rgba(32, 191, 193, .12), var(--factory-shadow);
}

.factory-touch-filter {
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: var(--factory-radius-lg);
    box-shadow: var(--factory-shadow);
}

.factory-operation-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
}

.factory-operation-status::before {
    width: .55rem;
    height: .55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: '';
}

.factory-operation-status.is-coming { color: #b45309; }
.factory-operation-status.is-qc-passed { color: #1d4ed8; }
.factory-operation-status.is-waiting { color: #475569; }
.factory-operation-status.is-waiting-qa { color: #0e7490; }
.factory-operation-status.is-qa-passed { color: #15803d; }
.factory-operation-status.is-line-pending { color: #b45309; }

.factory-operation-customer {
    color: var(--factory-heading);
    font-size: 1.075rem;
    font-weight: 800;
}

.factory-operation-quantity {
    color: var(--factory-heading);
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1;
}

.factory-operation-quantity small {
    display: block;
    margin-top: .3rem;
    color: var(--factory-muted);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.factory-empty-state {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: var(--factory-muted);
    text-align: center;
}

.factory-empty-state-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin-bottom: .25rem;
    border-radius: 1rem;
    color: var(--factory-brand-navy);
    background: rgba(32, 191, 193, .14);
}

.factory-empty-state-icon i {
    font-size: 2rem;
}

.factory-empty-state strong {
    color: var(--factory-heading);
    font-size: 1.05rem;
}

.factory-empty-state > span:last-child {
    font-size: .85rem;
}

@media (min-width: 768px) {
    .factory-touch-page .container-p-y {
        padding-top: 1.25rem !important;
    }

    .factory-operation-table-wrap {
        overflow: visible;
        padding: 0 1rem 1rem;
        background: #eef3f8;
    }

    .factory-operation-table {
        display: block;
        padding-top: 1rem;
    }

    .factory-operation-table thead {
        display: none;
    }

    .factory-operation-table tbody,
    .factory-operation-table tr {
        display: block;
    }

    .factory-operation-table tbody tr {
        --bs-table-accent-bg: transparent;
        --bs-table-bg: transparent;
        --bs-table-hover-bg: transparent;
        position: relative;
        display: grid;
        grid-template-columns: 72px minmax(125px, 1fr) minmax(140px, 1.5fr) 90px minmax(220px, auto);
        gap: .5rem;
        align-items: center;
        margin-bottom: .75rem;
        min-height: 94px;
        padding: .75rem;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .factory-operation-table tbody tr.factory-operation-empty-row {
        display: block;
        min-height: 220px;
        padding: 0;
    }

    .factory-operation-table tbody tr.factory-operation-empty-row > td {
        display: block;
        width: 100%;
        padding: 0 !important;
    }

    .factory-operation-table tbody td {
        display: block;
        padding: 0;
        border: 0;
        background-color: transparent !important;
        box-shadow: none !important;
        white-space: normal;
    }

    .factory-operation-table .operation-order { grid-column: 2; }
    .factory-operation-table .operation-customer { grid-column: 3; }
    .factory-operation-table .operation-receipt,
    .factory-operation-table .operation-car { display: none; }
    .factory-operation-table .operation-quantity { grid-column: 4; text-align: center !important; }
    .factory-operation-table .operation-status {
        align-self: stretch;
        grid-column: 1;
        grid-row: 1;
        margin: -.75rem 0 -.75rem -.75rem;
    }

    .factory-operation-table .operation-status .factory-operation-status {
        width: 72px;
        height: 100%;
        min-height: 94px;
        flex-direction: column;
        justify-content: center;
        gap: .45rem;
        padding: .5rem;
        border-radius: var(--factory-radius) 0 0 var(--factory-radius);
        color: #fff;
        line-height: 1.15;
        text-align: center;
    }

    .factory-operation-table .operation-status .factory-operation-status::before {
        display: none;
    }

    .factory-operation-table .operation-status .factory-operation-status i {
        font-size: 1.7rem;
    }

    .factory-operation-table .operation-status .factory-operation-status.is-coming {
        background: var(--factory-status-waiting);
    }

    .factory-operation-table .operation-status .factory-operation-status.is-qc-passed {
        background: var(--factory-status-progress);
    }

    .factory-operation-table .operation-status .factory-operation-status.is-waiting {
        background: var(--factory-status-idle);
    }

    .factory-operation-table .operation-status .factory-operation-status.is-waiting-qa {
        background: var(--factory-status-approved);
    }

    .factory-operation-table .operation-status .factory-operation-status.is-qa-passed {
        background: var(--factory-status-success);
    }

    .factory-operation-table .operation-status .factory-operation-status.is-line-pending {
        background: var(--factory-status-waiting);
    }

    .factory-operation-table .operation-actions {
        grid-column: 5;
        grid-row: 1;
        padding: 0;
        border: 0;
    }

    .factory-operation-table .factory-action-strip {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: .4rem;
    }

    .factory-operation-table .factory-action-strip .btn:not(.btn-icon) {
        min-width: 104px;
    }

    .factory-operation-table .factory-action-strip > a:first-child {
        min-width: 108px;
    }

    .factory-operation-table .factory-table-avatar {
        width: var(--factory-touch-target);
        height: var(--factory-touch-target);
    }
}

@media (min-width: 1200px) {
    .factory-operation-table tbody tr,
    .factory-operation-table thead tr {
        grid-template-columns: 72px minmax(125px, 1fr) minmax(140px, 1.5fr) 90px 270px;
    }

    .factory-operation-table thead {
        display: block;
        margin: 0 0 .6rem;
        padding: 0 1rem;
    }

    .factory-operation-table thead tr {
        display: grid;
        grid-template-columns: 72px minmax(125px, 1fr) minmax(140px, 1.5fr) 90px 270px;
        gap: .5rem;
        align-items: center;
    }

    .factory-operation-table thead th {
        padding: .7rem .75rem;
        border: 0;
        background: transparent;
    }

    .factory-operation-table thead th:nth-child(1) { grid-column: 2; }
    .factory-operation-table thead th:nth-child(2) { grid-column: 3; }
    .factory-operation-table thead th:nth-child(3),
    .factory-operation-table thead th:nth-child(5) { display: none; }
    .factory-operation-table thead th:nth-child(4) {
        position: relative;
        grid-column: 4;
        text-align: center !important;
    }

    .factory-operation-table thead th:nth-child(4) .dt-column-header {
        position: relative;
        width: 100%;
        justify-content: center;
    }

    .factory-operation-table thead th:nth-child(4) .dt-column-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .factory-operation-table thead th:nth-child(4) .dt-column-order {
        position: absolute;
        right: 0;
    }
    .factory-operation-table thead th:nth-child(6) { grid-column: 5; text-align: right !important; }
}

/* QC order list includes separate Hotel Out and QC PCS columns. */
@media (min-width: 768px) {
    .qc-operation-table tbody tr {
        grid-template-columns: 72px minmax(125px, 1fr) minmax(140px, 1.5fr) 90px 90px minmax(220px, auto);
    }

    .qc-operation-table .operation-hotel-out { grid-column: 4; }
    .qc-operation-table .operation-pcs { grid-column: 5; }
    .qc-operation-table .operation-actions { grid-column: 6; }
}

@media (min-width: 1200px) {
    .qc-operation-table tbody tr,
    .qc-operation-table thead tr {
        grid-template-columns: 72px minmax(125px, 1fr) minmax(140px, 1.5fr) 90px 90px 270px;
    }

    .qc-operation-table thead th:nth-child(1) { grid-column: 2; }
    .qc-operation-table thead th:nth-child(2) { grid-column: 3; }
    .qc-operation-table thead th:nth-child(3),
    .qc-operation-table thead th:nth-child(6) { display: none; }
    .qc-operation-table thead th:nth-child(4),
    .qc-operation-table thead th:nth-child(5) {
        position: relative;
        display: block;
        text-align: center !important;
    }
    .qc-operation-table thead th:nth-child(4) { grid-column: 4; }
    .qc-operation-table thead th:nth-child(5) { grid-column: 5; }
    .qc-operation-table thead th:nth-child(4) .dt-column-header,
    .qc-operation-table thead th:nth-child(5) .dt-column-header {
        position: relative;
        width: 100%;
        justify-content: center;
    }
    .qc-operation-table thead th:nth-child(4) .dt-column-title,
    .qc-operation-table thead th:nth-child(5) .dt-column-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .qc-operation-table thead th:nth-child(4) .dt-column-order,
    .qc-operation-table thead th:nth-child(5) .dt-column-order {
        position: absolute;
        right: 0;
    }
    .qc-operation-table thead th:nth-child(7) { grid-column: 6; text-align: right !important; }
}

@media (max-width: 767.98px) {
    .factory-touch-page .btn,
    .factory-touch-page .form-control,
    .factory-touch-page .form-select {
        min-height: var(--factory-touch-target-lg);
    }
}

/* QA defects: touch-first issue and photo workflow */
.qa-defect-filter .form-label {
    color: var(--factory-heading);
    font-size: .75rem;
    font-weight: 800;
}

.qa-defect-summary-attention {
    border-color: rgba(245, 158, 11, .32);
    background: linear-gradient(135deg, #fff 55%, rgba(245, 158, 11, .08));
}

.qa-defect-orders-card,
.qa-defect-items-card,
.qa-defect-order-summary,
.qa-defect-progress-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: var(--factory-radius-lg);
    box-shadow: var(--factory-shadow);
}

.qa-defect-count,
.qa-defect-photo-ready,
.qa-defect-photo-missing {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 30px;
    padding: .3rem .55rem;
    border-radius: .55rem;
    font-size: .75rem;
    font-weight: 800;
}

.qa-defect-count.is-dirty,
.qa-defect-photo-missing {
    color: #b45309;
    background: #fff3d6;
}

.qa-defect-count.is-non-wash {
    color: #0e7490;
    background: #e0f5f7;
}

.qa-defect-photo-ready {
    color: #15803d;
    background: #e7f8ec;
}

.qa-defect-photo-count {
    color: var(--factory-heading);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
}

.qa-defect-photo-count small {
    margin-left: .15rem;
    color: var(--factory-muted);
    font-size: .8rem;
}

.qa-defect-work-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 800;
}

.qa-defect-work-state.is-missing { color: #b45309; }
.qa-defect-work-state.is-complete { color: #15803d; }

.qa-defect-state > small {
    display: block;
    margin-top: .2rem;
    color: var(--factory-muted);
    font-size: .68rem;
}

.qa-defect-order-summary-main {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.qa-defect-order-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    border-radius: .85rem;
    color: var(--factory-brand-navy);
    background: rgba(32, 191, 193, .14);
    font-size: 1.5rem;
}

.qa-defect-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
}

.qa-defect-progress-grid > div {
    padding: .65rem .75rem;
    border-radius: .65rem;
    background: #f4f7fa;
}

.qa-defect-progress-grid span,
.qa-defect-progress-grid strong {
    display: block;
}

.qa-defect-progress-grid span {
    color: var(--factory-muted);
    font-size: .72rem;
    font-weight: 700;
}

.qa-defect-progress-grid strong {
    margin-top: .2rem;
    color: var(--factory-heading);
    font-size: 1.3rem;
}

.qa-defect-progress-grid .is-complete { background: #e7f8ec; }
.qa-defect-progress-grid .is-complete strong { color: #15803d; }
.qa-defect-progress-grid .is-missing { background: #fff3d6; }
.qa-defect-progress-grid .is-missing strong { color: #b45309; }

.qa-defect-thumb {
    width: 128px;
    height: 92px;
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: .7rem;
    box-shadow: 0 .2rem .8rem rgba(15, 23, 42, .14);
}

.qa-defect-type {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem;
    border-radius: .75rem;
    color: #fff;
    background: var(--factory-status-waiting);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
}

.qa-defect-type.is-non-wash { background: var(--factory-status-approved); }
.qa-defect-type i { font-size: 1.35rem; }

.qa-camera-frame {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    border-radius: .9rem;
    background: #101828;
}

.qa-camera-frame video,
.qa-camera-frame img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: contain;
}

.qa-camera-status {
    position: absolute;
    inset: auto 1rem 1rem;
    padding: .65rem .8rem;
    border-radius: .6rem;
    color: #fff;
    background: rgba(16, 24, 40, .78);
    text-align: center;
}

.qa-camera-actions .btn {
    min-width: 112px;
}

@media (min-width: 768px) {
    .qa-defect-order-table-wrap,
    .qa-defect-item-table-wrap {
        overflow: visible;
        padding: 0 1rem 1rem;
        background: #eef3f8;
    }

    .qa-defect-order-table,
    .qa-defect-item-table {
        display: block;
        padding-top: 1rem;
    }

    .qa-defect-order-table thead,
    .qa-defect-item-table thead {
        display: none;
    }

    .qa-defect-order-table tbody,
    .qa-defect-item-table tbody {
        display: block;
    }

    .qa-defect-order-row {
        --bs-table-accent-bg: transparent;
        --bs-table-bg: transparent;
        --bs-table-hover-bg: transparent;
        position: relative;
        display: grid;
        grid-template-columns: 76px minmax(140px, 1fr) minmax(165px, 1.35fr) minmax(145px, .9fr) 90px 150px;
        gap: .55rem;
        align-items: center;
        min-height: 94px;
        margin-bottom: .75rem;
        padding: .75rem;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .qa-defect-order-row > td,
    .qa-defect-item-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        white-space: normal;
    }

    .qa-defect-order { grid-column: 2; }
    .qa-defect-customer { grid-column: 3; }
    .qa-defect-issues { grid-column: 4; }
    .qa-defect-photos { grid-column: 5; text-align: center; }
    .qa-defect-action { grid-column: 6; }
    .qa-defect-action .btn {
        display: inline-flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        padding-right: .7rem;
        padding-left: .7rem;
        white-space: nowrap;
    }

    .qa-defect-state {
        position: absolute;
        inset: 0 auto 0 0;
        display: block !important;
        width: 76px;
        margin: 0;
    }

    .qa-defect-state .qa-defect-work-state {
        position: absolute;
        inset: 0;
        width: 100%;
        height: auto;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        gap: .45rem;
        padding: .5rem;
        border-radius: var(--factory-radius) 0 0 var(--factory-radius);
        color: #fff;
        line-height: 1.1;
        text-align: center;
    }

    .qa-defect-state .qa-defect-work-state.is-missing { background: var(--factory-status-waiting); }
    .qa-defect-state .qa-defect-work-state.is-complete { background: var(--factory-status-success); }
    .qa-defect-state .qa-defect-work-state i { font-size: 1.6rem; }
    .qa-defect-state > small { display: none; }

    .qa-defect-item-row {
        --bs-table-accent-bg: transparent;
        --bs-table-bg: transparent;
        --bs-table-hover-bg: transparent;
        display: grid;
        grid-template-columns: 104px minmax(180px, 1fr) minmax(230px, 1fr) 140px;
        gap: 1rem;
        align-items: center;
        min-height: 118px;
        margin-bottom: .75rem;
        padding: .75rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .qa-defect-item-action .btn { width: 100%; }
}

@media (max-width: 767.98px) {
    .qa-defect-order-table-wrap,
    .qa-defect-item-table-wrap {
        overflow: visible;
        padding: .75rem;
        background: #eef3f8;
    }

    .qa-defect-order-table thead,
    .qa-defect-item-table thead {
        display: none;
    }

    .qa-defect-order-table tbody,
    .qa-defect-item-table tbody {
        display: block;
    }

    .qa-defect-order-row,
    .qa-defect-item-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: .8rem;
        margin-bottom: .75rem;
        padding: 1rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .qa-defect-order-row > td,
    .qa-defect-item-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        white-space: normal;
    }

    .qa-defect-order,
    .qa-defect-customer,
    .qa-defect-issues,
    .qa-defect-state,
    .qa-defect-item-type,
    .qa-defect-item-name,
    .qa-defect-item-photo {
        grid-column: 1 / -1;
    }

    .qa-defect-photos { grid-column: 1; }
    .qa-defect-action { grid-column: 2; align-self: end; }
    .qa-defect-action .btn { min-width: 132px; }

    .qa-defect-state {
        position: static;
        inset: auto;
        display: block !important;
        width: auto;
        grid-row: 1;
        margin: -1rem -1rem 0;
        padding: .65rem 1rem;
        border-radius: var(--factory-radius) var(--factory-radius) 0 0;
        background: #f7fafc !important;
    }

    .qa-defect-state > small {
        display: inline;
        margin-left: .5rem;
    }

    .qa-defect-item-type {
        grid-row: 1;
    }

    .qa-defect-type {
        min-height: 48px;
        flex-direction: row;
    }

    .qa-defect-item-action {
        grid-column: 1 / -1;
    }

    .qa-defect-item-action .btn {
        width: 100%;
    }

    .qa-defect-thumb {
        width: 100%;
        height: min(52vw, 240px);
    }

    .qa-camera-frame,
    .qa-camera-frame video,
    .qa-camera-frame img {
        min-height: 50vh;
    }

    .qa-camera-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .qa-camera-actions .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .qa-defect-order-row {
        grid-template-columns: 76px minmax(135px, 1fr) minmax(165px, 1.25fr) 150px;
        grid-template-rows: repeat(2, auto);
    }

    .qa-defect-order { grid-column: 2; grid-row: 1; }
    .qa-defect-customer { grid-column: 3; grid-row: 1; }
    .qa-defect-issues { grid-column: 2; grid-row: 2; }
    .qa-defect-photos { grid-column: 3; grid-row: 2; text-align: left; }

    .qa-defect-state {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .qa-defect-state .qa-defect-work-state {
        min-height: 0;
    }

    .qa-defect-action {
        align-self: center;
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .qa-defect-item-row {
        grid-template-columns: 96px minmax(200px, 1fr) 140px;
        grid-template-rows: repeat(2, auto);
    }

    .qa-defect-item-type { grid-column: 1; grid-row: 1 / 3; }
    .qa-defect-item-name { grid-column: 2; grid-row: 1; }
    .qa-defect-item-photo { grid-column: 2; grid-row: 2; }
    .qa-defect-item-action { grid-column: 3; grid-row: 1 / 3; }
}

@media (min-width: 992px) {
    .qa-defect-order-row {
        height: 94px;
        min-height: 94px;
    }

    .qa-defect-customer .fw-semibold {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) {
    .qa-defect-order-table thead,
    .qa-defect-item-table thead {
        display: block;
        margin-bottom: .6rem;
        padding: 0 .75rem;
    }

    .qa-defect-order-table thead tr {
        display: grid;
        grid-template-columns: 76px minmax(140px, 1fr) minmax(165px, 1.35fr) minmax(145px, .9fr) 90px 150px;
        gap: .55rem;
        align-items: center;
    }

    .qa-defect-order-table thead th,
    .qa-defect-item-table thead th {
        padding: .65rem 0;
        border: 0;
        background: transparent;
    }

    .qa-defect-order-table thead th:nth-child(1) { grid-column: 2; }
    .qa-defect-order-table thead th:nth-child(2) { grid-column: 3; }
    .qa-defect-order-table thead th:nth-child(3) { grid-column: 4; }
    .qa-defect-order-table thead th:nth-child(4) { grid-column: 5; text-align: center; }
    .qa-defect-order-table thead th:nth-child(5) { display: none; }
    .qa-defect-order-table thead th:nth-child(6) { grid-column: 6; text-align: right; }

    .qa-defect-item-table thead tr {
        display: grid;
        grid-template-columns: 104px minmax(180px, 1fr) minmax(230px, 1fr) 140px;
        gap: 1rem;
        align-items: center;
    }

    .qa-defect-item-table thead th:last-child {
        text-align: right;
    }
}

/* QA order entry: tablet-first quantity workflow */
.qa-entry-card,
.qa-work-defects-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: var(--factory-radius-lg);
    box-shadow: var(--factory-shadow);
}

.qa-entry-card .qa-input {
    min-width: 72px;
    min-height: 52px;
    padding: .55rem .65rem;
    border: 1px solid #ccd8e5;
    border-radius: .65rem;
    color: var(--factory-heading);
    background: #fff;
    font-size: 1.35rem;
    font-weight: 800;
}

.qa-entry-card .qa-input:focus {
    border-color: var(--factory-brand-aqua);
    box-shadow: 0 0 0 .2rem rgba(32, 191, 193, .14);
}

.qa-entry-card .qa-input[readonly] {
    color: #64748b;
    background: #eef3f8;
}

.qa-entry-card .qa-entry-metric.is-entry.is-dirty {
    border-color: #f3d38a !important;
    color: #a16207;
    background: #fff8e6 !important;
}

.qa-entry-card .qa-entry-metric.is-entry.is-dirty::before {
    color: #a16207;
}

.qa-entry-card .qa-entry-metric.is-entry.is-dirty .qa-input {
    border-color: #edc866;
    color: #854d0e;
    background: #fffdf5;
}

.qa-entry-card .qa-entry-metric.is-entry.is-dirty .qa-input:focus {
    border-color: #eab308;
    box-shadow: 0 0 0 .2rem rgba(234, 179, 8, .16);
}

.qa-entry-card .qa-entry-metric.is-entry.is-non-wash {
    border-color: #f3b6bc !important;
    color: #b4232f;
    background: #fff1f2 !important;
}

.qa-entry-card .qa-entry-metric.is-entry.is-non-wash::before {
    color: #b4232f;
}

.qa-entry-card .qa-entry-metric.is-entry.is-non-wash .qa-input {
    border-color: #ee9ca5;
    color: #991b1b;
    background: #fff8f8;
}

.qa-entry-card .qa-entry-metric.is-entry.is-non-wash .qa-input:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .14);
}

.qa-order-action-bar {
    background: #fff;
}

.qa-work-defects-card {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .qa-work-defect-table-wrap {
        overflow: visible;
        padding: 1rem;
        background: #eef3f8;
    }

    .qa-work-defect-table {
        display: block;
        margin: 0;
    }

    .qa-work-defect-table thead {
        display: none;
    }

    .qa-work-defect-table tbody {
        display: block;
    }

    .qa-work-defect-row {
        display: grid;
        grid-template-columns: 96px minmax(180px, 1fr) minmax(130px, .7fr) minmax(280px, 1.2fr);
        gap: 1rem;
        align-items: center;
        margin-bottom: .75rem;
        padding: .8rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .qa-work-defect-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        white-space: normal;
    }

    .qa-work-defect-index { display: none !important; }
    .qa-work-defect-type { grid-column: 1; }
    .qa-work-defect-product { grid-column: 2; }
    .qa-work-defect-remark { grid-column: 3; color: var(--factory-muted); }
    .qa-work-defect-photo { grid-column: 4; }

    .qa-work-defect-photo .btn {
        min-height: var(--factory-touch-target);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .qa-work-defect-row {
        grid-template-columns: 90px minmax(180px, 1fr) minmax(250px, 1.2fr);
    }

    .qa-work-defect-type { grid-column: 1; grid-row: 1 / 3; }
    .qa-work-defect-product { grid-column: 2; grid-row: 1; }
    .qa-work-defect-remark { grid-column: 2; grid-row: 2; }
    .qa-work-defect-photo { grid-column: 3; grid-row: 1 / 3; }
}

@media (min-width: 768px) {
    .qa-entry-table-wrap {
        overflow: visible;
        padding: 1rem;
        background: #eef3f8;
    }

    .qa-entry-table {
        display: block;
        margin: 0;
    }

    .qa-entry-table thead {
        display: none;
    }

    .qa-entry-table tbody,
    .qa-entry-table tfoot {
        display: block;
    }

    .qa-entry-row {
        --bs-table-accent-bg: transparent;
        --bs-table-bg: transparent;
        --bs-table-hover-bg: transparent;
        display: grid;
        grid-template-columns: repeat(4, minmax(110px, 1fr));
        gap: .65rem;
        margin-bottom: .8rem;
        padding: 1rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
        box-shadow: 0 .25rem .9rem rgba(15, 23, 42, .06);
    }

    .qa-entry-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
        white-space: normal;
    }

    .qa-entry-index {
        display: none !important;
    }

    .qa-entry-product {
        grid-column: 1 / -1;
        padding: .15rem .15rem .75rem !important;
        border-bottom: 1px solid var(--factory-border) !important;
    }

    .qa-entry-product .fw-semibold {
        color: var(--factory-heading);
        font-size: 1.4rem;
    }

    .qa-entry-metric {
        position: relative;
        min-height: 78px;
        padding: 1.7rem .65rem .55rem !important;
        border: 1px solid #dce5ee !important;
        border-radius: .7rem;
        background: #f8fafc !important;
        color: var(--factory-heading);
        font-size: 1.35rem;
        text-align: right;
    }

    .qa-entry-metric::before {
        position: absolute;
        top: .45rem;
        left: .65rem;
        color: var(--factory-muted);
        content: attr(data-label);
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .qa-entry-metric.is-source {
        display: flex !important;
        align-items: flex-end;
        justify-content: flex-end;
        border-color: transparent !important;
        color: #52677f;
        background: #edf2f7 !important;
    }

    .qa-entry-metric.is-source strong,
    .qa-entry-metric.is-source.qa-non-wash {
        font-size: 1.45rem;
        font-weight: 800;
    }

    .qa-entry-metric.is-entry {
        border-color: #bdd1e5 !important;
        background: #fff !important;
    }

    .qa-entry-metric.is-good {
        color: #15803d;
        background: #eefbf2 !important;
    }

    .qa-entry-metric.is-total {
        color: var(--factory-brand-navy);
        background: #edf4fc !important;
    }

    .qa-entry-table tfoot tr {
        display: grid;
        grid-template-columns: repeat(4, minmax(110px, 1fr));
        gap: .65rem;
        padding: 1rem;
        border: 1px solid rgba(43, 86, 137, .18);
        border-radius: var(--factory-radius);
        background: #e6eef7;
    }

    .qa-entry-table tfoot th {
        position: relative;
        display: block;
        min-height: 58px;
        padding: 1.55rem .65rem .4rem;
        border: 0;
        border-radius: .6rem;
        color: var(--factory-heading);
        background: rgba(255, 255, 255, .78);
        font-size: 1.35rem;
        text-align: right;
    }

    .qa-entry-table tfoot th::before {
        position: absolute;
        top: .35rem;
        left: .65rem;
        color: var(--factory-muted);
        content: attr(data-label);
        font-size: .64rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .qa-entry-table tfoot th:first-child {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .qa-entry-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .qa-entry-metric.is-source,
    .qa-entry-metric.is-entry {
        grid-column: span 2;
    }

    .qa-entry-metric.is-good,
    .qa-entry-metric.is-total {
        grid-column: span 3;
    }
}

@media (min-width: 1200px) {
    .qa-entry-row {
        grid-template-columns: minmax(190px, 1.35fr) repeat(8, minmax(82px, 1fr));
        gap: .55rem;
        align-items: stretch;
        padding: .75rem;
    }

    .qa-entry-product {
        display: flex !important;
        grid-column: 1;
        flex-direction: column;
        justify-content: center;
        padding: .5rem .7rem !important;
        border-right: 1px solid var(--factory-border) !important;
        border-bottom: 0 !important;
    }

    .qa-entry-metric {
        min-height: 72px;
    }

    .qa-entry-table tfoot tr {
        grid-template-columns: repeat(8, minmax(82px, 1fr));
    }

    .qc-entry-table tfoot tr {
        grid-template-columns: repeat(6, minmax(82px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .qa-entry-table-wrap {
        overflow: visible;
        padding: .75rem;
        background: #eef3f8;
    }

    .qa-entry-table thead {
        display: none;
    }

    .qa-entry-table tbody,
    .qa-entry-table tfoot {
        display: block;
    }

    .qa-entry-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
        margin-bottom: .75rem;
        padding: .85rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: var(--factory-radius);
        background: #fff !important;
    }

    .qa-entry-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        white-space: normal;
    }

    .qa-entry-index { display: none !important; }
    .qa-entry-product { grid-column: 1 / -1; padding-bottom: .65rem !important; border-bottom: 1px solid var(--factory-border) !important; }
    .qa-entry-product .fw-semibold { font-size: 1.4rem; }

    .qa-entry-metric {
        position: relative;
        min-height: 76px;
        padding: 1.65rem .55rem .5rem !important;
        border: 1px solid #dce5ee !important;
        border-radius: .65rem;
        background: #f8fafc !important;
        font-size: 1.35rem;
        text-align: right;
    }

    .qa-entry-metric::before {
        position: absolute;
        top: .4rem;
        left: .55rem;
        color: var(--factory-muted);
        content: attr(data-label);
        font-size: .63rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .qa-entry-metric.is-source {
        display: flex !important;
        align-items: flex-end;
        justify-content: flex-end;
        border-color: transparent !important;
        color: #52677f;
        background: #edf2f7 !important;
    }

    .qa-entry-metric.is-source strong,
    .qa-entry-metric.is-source.qa-non-wash {
        font-size: 1.45rem;
    }

    .qa-entry-metric.is-entry {
        border-color: #bdd1e5 !important;
        background: #fff !important;
    }

    .qa-entry-table tfoot tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .55rem;
        padding: .85rem;
        border-radius: var(--factory-radius);
        background: #e6eef7;
    }

    .qa-entry-table tfoot th {
        position: relative;
        display: block;
        min-height: 56px;
        padding: 1.5rem .55rem .35rem;
        border: 0;
        border-radius: .55rem;
        background: rgba(255, 255, 255, .8);
        font-size: 1.35rem;
        text-align: right;
    }

    .qa-entry-table tfoot th::before {
        position: absolute;
        top: .3rem;
        left: .55rem;
        color: var(--factory-muted);
        content: attr(data-label);
        font-size: .62rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .qa-entry-table tfoot th:first-child { display: none; }

    .qa-order-action-bar .d-flex {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .qa-order-action-bar .btn {
        width: 100%;
    }

    .qa-work-defect-table-wrap {
        overflow: visible;
        padding: .75rem;
        background: #eef3f8;
    }

    .qa-work-defect-table thead { display: none; }
    .qa-work-defect-table tbody { display: block; }

    .qa-work-defect-row {
        display: grid;
        gap: .7rem;
        margin-bottom: .75rem;
        padding: .85rem;
        border-radius: var(--factory-radius);
        background: #fff !important;
    }

    .qa-work-defect-row > td {
        display: block;
        padding: 0;
        border: 0;
        background: transparent !important;
        white-space: normal;
    }

    .qa-work-defect-index { display: none !important; }
    .qa-work-defect-type,
    .qa-work-defect-product,
    .qa-work-defect-remark,
    .qa-work-defect-photo { grid-column: 1; }

    .qa-work-defect-photo .d-flex {
        align-items: stretch !important;
    }

    .qa-work-defect-photo .btn {
        width: 100%;
    }
}

/* Form Order: tablet-first industrial entry */
.factory-touch-form-card,
.factory-product-entry-card,
.factory-terms-card,
.factory-sticky-action-card {
    overflow: visible;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: var(--factory-radius-lg);
    box-shadow: var(--factory-shadow);
}

.factory-touch-input-icon > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 1rem;
    color: var(--factory-brand-aqua);
    font-size: 1.2rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.factory-touch-input-icon .form-control {
    padding-left: 2.8rem;
    font-weight: 700;
}

.factory-touch-segmented {
    width: 100%;
    padding: .25rem;
    border-radius: .75rem;
    background: #edf3f7;
}

.factory-touch-segmented .btn {
    flex: 1 1 0;
    border: 0;
    box-shadow: none;
}

.factory-touch-segmented .btn-outline-primary {
    background: transparent;
    color: #536174;
}

.factory-touch-segmented .btn-primary {
    background: linear-gradient(135deg, var(--factory-brand-aqua), #159da4);
    box-shadow: 0 .3rem .7rem rgba(32, 191, 193, .22);
}

.factory-order-total-bar {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1.1rem;
    border-radius: var(--factory-radius);
    background: linear-gradient(120deg, #159fa5, var(--factory-brand-aqua));
    color: #fff;
    box-shadow: 0 .4rem 1rem rgba(21, 159, 165, .2);
}

.factory-order-total-bar > div {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.factory-order-total-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}

.factory-order-total-copy {
    font-size: .8rem;
    font-weight: 800;
}

.factory-order-total-copy small {
    display: block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
}

.factory-order-item-count {
    display: flex !important;
    align-items: center !important;
    gap: .55rem !important;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .28);
    white-space: nowrap;
}

.factory-order-item-count > i {
    font-size: 2rem;
    opacity: .75;
}

.factory-order-item-count span {
    font-size: .82rem;
    font-weight: 700;
}

.factory-order-item-count strong {
    font-size: 1.2rem;
}

@media (max-width: 1199.98px) {
    .factory-order-entry-page .card-header,
    .factory-order-entry-page .card-body {
        padding: 1rem;
    }

    .factory-product-picker-bar .btn-icon {
        width: var(--factory-touch-target-lg);
        min-width: var(--factory-touch-target-lg);
        min-height: var(--factory-touch-target-lg);
    }

    .factory-product-picker-bar .factory-add-item-button {
        min-width: 126px;
        min-height: var(--factory-touch-target-lg);
        padding-inline: 1rem;
    }

    .factory-product-list-wrap {
        overflow: visible;
        padding: .15rem;
        background: #edf3f7;
        border-radius: var(--factory-radius);
    }

    .factory-product-card-table,
    .factory-product-card-table tbody {
        display: block;
    }

    .factory-product-card-table thead {
        display: none;
    }

    .factory-product-card-table .factory-product-row {
        display: grid;
        grid-template-columns: 34px minmax(170px, 1.5fr) 120px minmax(150px, 1fr) 52px;
        gap: .65rem;
        align-items: center;
        margin: .55rem;
        padding: .7rem;
        border: 1px solid rgba(148, 163, 184, .24);
        border-radius: var(--factory-radius);
        background: #fff;
        box-shadow: 0 .2rem .65rem rgba(15, 23, 42, .06);
    }

    .factory-product-card-table .factory-product-row > td {
        display: block;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .factory-product-card-table .product-row-number {
        color: var(--factory-brand-navy) !important;
        font-weight: 800;
        text-align: center;
    }

    .factory-product-card-table .product-label {
        color: var(--factory-heading);
        font-size: 1rem;
        font-weight: 800 !important;
    }

    .factory-product-card-table .product-row-amount .form-control {
        min-height: var(--factory-touch-target-lg);
        background: #f4f8fb;
        color: var(--factory-brand-navy);
        font-size: 1.35rem;
        font-weight: 800;
        text-align: center;
    }

    .factory-product-card-table .product-row-remark .form-control {
        min-height: var(--factory-touch-target-lg);
    }

    .factory-product-card-table .product-row-action .btn {
        width: var(--factory-touch-target-lg);
        min-width: var(--factory-touch-target-lg);
        min-height: var(--factory-touch-target-lg);
    }

    .factory-sticky-action-card {
        position: sticky;
        z-index: 1020;
        bottom: .75rem;
        margin-top: 1rem;
        box-shadow: 0 .8rem 2rem rgba(15, 23, 42, .18);
    }

    .factory-sticky-action-card .btn-success {
        width: 100%;
        min-height: var(--factory-touch-target-lg);
    }
}

@media (max-width: 767.98px) {
    .factory-product-card-table .factory-product-row {
        grid-template-columns: 28px minmax(0, 1fr) 100px 48px;
    }

    .factory-product-card-table .product-row-remark {
        grid-column: 2 / 4;
    }

    .factory-product-card-table .product-row-action {
        grid-column: 4;
        grid-row: 1 / 3;
    }

    .factory-sticky-action-card .row > div {
        text-align: left !important;
    }

    .factory-sticky-action-card .btn-success {
        width: 100%;
    }
}

.factory-table-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.factory-table-avatar {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: .5rem;
    background: rgba(85, 197, 220, .15);
    color: var(--factory-brand-navy);
    font-weight: 700;
}

.factory-dt-toolbar,
.factory-dt-footer {
    padding: 1rem 1.5rem;
    align-items: center;
}

.factory-dt-toolbar {
    border-bottom: 1px solid var(--factory-border);
}

.factory-dt-footer {
    border-top: 1px solid var(--factory-border);
}

.factory-dt-search {
    display: flex;
    justify-content: flex-md-end;
}

.factory-dt-search .dataTables_filter,
.factory-dt-length .dataTables_length {
    margin: 0;
}

.factory-dt-search .form-control,
.factory-dt-length .form-select {
    border-radius: .5rem;
}

.dataTables_wrapper .pagination {
    gap: .35rem;
    margin-bottom: 0;
    justify-content: flex-end;
}

.dataTables_wrapper .page-link {
    min-width: 2.35rem;
    border: 0;
    border-radius: .45rem;
    color: #344054;
    text-align: center;
    background: #eef2f7;
}

.dataTables_wrapper .page-item.active .page-link {
    background: var(--factory-brand-navy);
    box-shadow: 0 .25rem .75rem rgba(43, 86, 137, .25);
}

.dataTables_wrapper .page-item.disabled .page-link {
    color: #c7cdd4;
    background: #f8f9fb;
}

@media (max-width: 767.98px) {
    .factory-dt-search,
    .dataTables_wrapper .pagination {
        justify-content: flex-start;
    }
}

.factory-search-results {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow: auto;
    padding: .35rem;
    background: #fff;
    border: 1px solid #d9dee3;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(67, 89, 113, .16);
}

.factory-search-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem .75rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: #566a7f;
    text-align: left;
}

.factory-search-item:hover,
.factory-search-item:focus {
    background: #f5f5f9;
    color: var(--factory-brand-navy);
}

.factory-search-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.factory-search-code {
    flex: 0 0 auto;
    color: var(--factory-muted);
    font-size: .8125rem;
}

.factory-search-empty {
    padding: .75rem;
    color: var(--factory-muted);
    text-align: center;
}

.factory-menu-disabled {
    opacity: .58;
    cursor: not-allowed;
}

.factory-menu-disabled:hover {
    color: inherit;
}

.qc-table {
    min-width: 1120px;
}

.qc-table .qc-input {
    min-width: 88px;
}

.qc-product-cell {
    min-width: 220px;
    white-space: normal;
}

.admin-user-search {
    max-width: 320px;
}

.price-template-items {
    max-height: 460px;
}

.product-create-row {
    padding-bottom: 1rem;
    border-bottom: 1px solid #eceef1;
}

.product-create-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.swal2-popup .factory-swal-input {
    width: min(32rem, calc(100% - 2rem));
    max-width: calc(100% - 2rem);
    margin: 1rem auto .25rem;
    box-sizing: border-box;
}

.factory-pin-inputs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.75rem auto .75rem;
}

.swal2-popup .factory-pin-input {
    width: 4rem;
    height: 4.5rem;
    padding: 0;
    border: 1.5px solid var(--bs-primary, #696cff);
    border-radius: .75rem;
    background: #fff;
    color: #566a7f;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.swal2-popup.factory-pin-popup {
    width: min(34rem, calc(100% - 2rem));
    padding: 1.75rem;
    border-radius: 1.25rem;
}

.swal2-popup .factory-pin-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: .875rem;
    margin: 1.5rem 0 0;
}

.swal2-popup .factory-pin-close {
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    touch-action: manipulation;
}

.swal2-popup .factory-pin-button {
    min-width: 0;
    min-height: 3.5rem;
    margin: 0;
    padding: .8rem 1rem;
    border-radius: .8rem;
    font-size: 1.05rem;
    font-weight: 600;
    touch-action: manipulation;
}

.swal2-popup .factory-pin-input:focus {
    border-color: var(--bs-primary, #696cff);
    box-shadow: 0 0 0 .2rem rgba(105, 108, 255, .18);
}

@media (max-width: 420px) {
    .factory-pin-inputs {
        gap: .5rem;
    }

    .swal2-popup .factory-pin-input {
        width: 3rem;
        height: 3.5rem;
    }

    .swal2-popup.factory-pin-popup {
        padding: 1.25rem;
    }

}

.factory-missing-dialog .modal-content {
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
}

.factory-missing-dialog form {
    display: flex;
    min-height: 0;
    max-height: inherit;
    flex: 1 1 auto;
    flex-direction: column;
}

.factory-missing-dialog .modal-header,
.factory-missing-dialog .modal-footer {
    flex: 0 0 auto;
}

.factory-missing-dialog .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.factory-missing-dialog .table-responsive {
    overflow-x: auto;
    overflow-y: visible;
}

.factory-keypad {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.factory-keypad.is-open {
    display: flex;
}

.factory-keypad-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .28);
}

.factory-keypad-panel {
    position: relative;
    width: min(100%, 430px);
    padding: 1rem;
    border-radius: .75rem .75rem 0 0;
    background: #fff;
    box-shadow: 0 -1rem 2rem rgba(15, 23, 42, .18);
}

.factory-keypad-display {
    min-height: 3.25rem;
    margin-bottom: .75rem;
    padding: .65rem .85rem;
    border: 1px solid var(--factory-border);
    border-radius: .5rem;
    background: #f8fafc;
    color: var(--factory-heading);
    font-size: 1.75rem;
    font-weight: 800;
    text-align: right;
}

.factory-keypad-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

.factory-keypad-grid button {
    min-height: 4rem;
    border: 0;
    border-radius: .5rem;
    background: #eef2f7;
    color: #273444;
    font-size: 1.25rem;
    font-weight: 800;
}

.factory-keypad-grid button:active {
    transform: translateY(1px);
}

.factory-keypad-grid button:disabled {
    opacity: .35;
}

.factory-keypad-zero {
    grid-column: span 2;
}

.factory-keypad-ok {
    background: var(--factory-brand-navy) !important;
    color: #fff !important;
}

@media (min-width: 768px) {
    .factory-keypad {
        align-items: center;
    }

    .factory-keypad-panel {
        border-radius: .75rem;
    }
}