:root {
    color-scheme: light;
    --font-sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
    --canvas: #f3f6fb;
    --surface: #ffffff;
    --surface-subtle: #f6f8fc;
    --surface-raised: #ffffff;
    --border: #dce3ed;
    --border-strong: #bcc8d8;
    --text: #142238;
    --text-muted: #56667d;
    --text-subtle: #7f8da2;
    --brand: #3159d9;
    --brand-hover: #2346b8;
    --brand-soft: #eaf0ff;
    --nav: #ffffff;
    --nav-raised: #f7f9fc;
    --nav-border: #e1e7ef;
    --nav-text: #394960;
    --nav-muted: #66768d;
    --success: #087a55;
    --success-soft: #e9f8f1;
    --warning: #a15c07;
    --warning-soft: #fff7e6;
    --danger: #b42332;
    --danger-soft: #fff0f1;
    --info: #1d6fa5;
    --info-soft: #eaf6fc;
    --accent-violet: #7544b7;
    --accent-violet-soft: #f5efff;
    --accent-teal: #087c72;
    --accent-teal-soft: #e9f8f5;
    --accent-amber: #9a6514;
    --accent-amber-soft: #fff7e8;
    --accent-rose: #b74768;
    --accent-rose-soft: #fff0f4;
    --accent-cyan: #177f9f;
    --accent-cyan-soft: #eaf8fc;
    --radius-xs: .375rem;
    --radius-sm: .5rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --shadow-xs: 0 1px 2px rgb(25 45 78 / .07), 0 1px 4px rgb(25 45 78 / .03);
    --shadow-sm: 0 8px 24px -16px rgb(25 45 78 / .28), 0 2px 7px rgb(25 45 78 / .05);
    --shadow-md: 0 22px 50px -20px rgb(15 31 58 / .3);
    font-family: var(--font-sans);
    /* Keep text comfortably readable at the browser's standard 100% zoom level. */
    font-size: 16px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-family: var(--font-sans); }
button, input, select, textarea { font-size: .875rem; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { color: var(--brand-hover); background: var(--brand-soft); }
:focus-visible { outline: 3px solid rgb(49 87 213 / .28); outline-offset: 2px; }
.site-tooltip {
    --tooltip-arrow-left: 50%;
    position: fixed; z-index: 2000; max-width: min(18rem, calc(100vw - 1rem));
    padding: .25rem 0; opacity: 0; pointer-events: none;
    transform: translateY(2px); transition: opacity .14s ease, transform .14s ease;
}
.site-tooltip.show { opacity: 1; transform: translateY(0); }
.site-tooltip-inner {
    padding: .42rem .62rem; color: #fff; background: #172033; border-radius: .38rem;
    box-shadow: 0 5px 16px rgb(15 23 42 / 22%); font-size: .68rem; font-weight: 500;
    line-height: 1.35; text-align: center;
}
.site-tooltip-arrow {
    position: absolute; left: var(--tooltip-arrow-left); width: .55rem; height: .55rem;
    background: #172033; transform: translateX(-50%) rotate(45deg);
}
.site-tooltip[data-placement="top"] .site-tooltip-arrow { bottom: 0; }
.site-tooltip[data-placement="bottom"] .site-tooltip-arrow { top: 0; }
@media (prefers-reduced-motion: reduce) {
    .site-tooltip { transition: none; }
}
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: .2rem 0; font-size: clamp(1.65rem, 2.4vw, 2.15rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -.015em; }
h3 { margin: 0 0 .5rem; font-size: .95rem; }
small { font-size: .78em; }

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 241px minmax(0, 1fr); transition: grid-template-columns .2s ease; }
.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: 241px;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1rem .75rem .8rem;
    color: var(--nav-text);
    background:
        radial-gradient(circle at -15% 5%, rgb(65 105 225 / .2), transparent 16rem),
        radial-gradient(circle at 110% 58%, rgb(103 143 238 / .13), transparent 17rem),
        linear-gradient(165deg, #e8f0ff 0%, #fbfdff 44%, #edf4ff 100%);
    border-right: 1px solid var(--nav-border);
    box-shadow: 8px 0 28px -24px rgb(15 23 42 / .28);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-border) transparent;
    transition: width .2s ease, padding .2s ease;
}
/* The sidebar is position:fixed (out of flow), so the workspace column is the only element that
   can reliably establish a scroll container for tall pages - relying on the outer document/body
   to scroll is unreliable in some embedded/webview hosts. height:100vh + overflow-y:auto makes
   the workspace scroll independently, matching the fixed sidebar staying in place. */
.app-workspace { grid-column: 2; display: flex; flex-direction: column; min-width: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.navigation-scrim { display: none; }
.navigation-toggle { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sidebar-collapse-toggle { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; min-height: 2.7rem; padding: 0 .25rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: #1d2a40; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem;
    color: white; background: linear-gradient(145deg, #5377ea, #2f50cb);
    border: 1px solid rgb(255 255 255 / .14); border-radius: .7rem;
    box-shadow: 0 7px 18px rgb(0 0 0 / .22); font-size: .76rem; font-weight: 800;
}
.brand-name { display: block; color: #172238; font-size: 1rem; font-weight: 780; letter-spacing: -.015em; }
.brand small { display: block; margin-top: .08rem; color: var(--nav-muted); font-size: .64rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.sidebar-close { display: none !important; }
.collapse-button { color: #64748b; cursor: pointer; }
.collapse-button:hover { color: var(--brand); background: rgb(255 255 255 / .72); border-color: #d6e0ef; }
.nav-section-label { color: #8692a5; font-size: .63rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: .18rem; flex: 1; }
.nav-section-label { margin: .75rem .55rem .25rem; }
.sidebar-nav details { border-radius: var(--radius-sm); }
.sidebar-nav-group > .nav-flyout { display: none; }
.sidebar-nav-group:has(> details[open]) > .nav-flyout { display: grid; }
.nav-flyout > strong { display: none; }
.sidebar-nav summary {
    display: flex; align-items: center; gap: .65rem; min-height: 2.45rem; padding: .58rem .65rem;
    color: #46536a; border-radius: var(--radius-sm); cursor: pointer; list-style: none;
    font-size: .8rem; font-weight: 650; user-select: none;
}
.sidebar-nav summary::-webkit-details-marker { display: none; }
.sidebar-nav summary::after {
    content: ""; width: .4rem; height: .4rem; margin-left: auto;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform .16s ease;
}
.sidebar-nav details[open] > summary::after { transform: rotate(-135deg); }
.sidebar-nav summary:hover { color: #1e2b41; background: #f3f6fa; }
.nav-icon { width: 1.05rem; height: 1.05rem; flex: none; }
.nav-link {
    display: flex; align-items: center; gap: .6rem; min-height: 2.2rem; margin: .05rem 0;
    padding: .48rem .65rem .48rem 2.35rem; color: #66758c; border-radius: var(--radius-sm);
    font-size: .79rem; border-left: 2px solid transparent;
}
.nav-link-top { padding-left: .65rem; font-weight: 650; }
.nav-link:hover { color: #213049; background: #f3f6fa; text-decoration: none; }
.nav-link.active { color: #2448bc; background: #eef2ff; border-left-color: #4f70e5; font-weight: 720; }
.sidebar-account {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .35rem;
    padding: .7rem; background: #f8fafd; border: 1px solid #e0e6ef; border-radius: var(--radius-md);
}
.avatar {
    display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
    color: var(--brand-hover); background: #e7ecff; border-radius: 50%; font-size: .7rem; font-weight: 800;
}
.user-card-info { display: grid; min-width: 0; }
.user-card-info strong, .user-card-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card-info strong { color: #2e3b51; font-size: .75rem; }
.user-card-info span { color: var(--nav-muted); font-size: .66rem; }
.icon-button {
    display: inline-grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem; padding: 0;
    color: var(--text-muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
}
.icon-button:hover { color: var(--text); background: var(--surface-subtle); border-color: var(--border); text-decoration: none; }
.icon-button.dark { color: var(--nav-muted); }
.icon-button.dark:hover { color: var(--brand); background: #eef2ff; border-color: #d9e1fb; }
.sign-in-link { display: block; padding: .7rem; text-align: center; border-radius: var(--radius-sm); }
.shell-menu-button,
.shell-collapse-button {
    position: fixed; z-index: 45; width: 2rem; height: 2rem; color: #52627a;
    background: rgb(255 255 255 / .94); border-color: #d7e0ed; box-shadow: 0 5px 14px rgb(31 48 78 / 14%);
    cursor: pointer;
}
.shell-menu-button { display: none; }
.shell-collapse-button { top: 2.9rem; left: 224px; transition: left .2s ease; }
.shell-collapse-button .nav-icon { transform: rotate(180deg); transition: transform .2s ease; }
.shell-menu-button:hover,
.shell-collapse-button:hover { color: var(--brand); background: #fff; border-color: #bdccef; }
.topbar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .8rem; height: 58px;
    padding: 0 clamp(1rem, 3vw, 2rem); background: rgb(255 255 255 / .97); border-bottom: 1px solid #e5eaf1;
    backdrop-filter: blur(12px);
}
.menu-button { display: none; }
.topbar-title { display: flex; align-items: center; gap: .55rem; color: #3d4b61; font-size: .78rem; font-weight: 650; letter-spacing: .02em; }
.system-indicator { width: .5rem; height: .5rem; background: #21a179; border: 2px solid #d6f4e8; border-radius: 50%; box-sizing: content-box; }
.topbar-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; }
.environment-badge { padding: .3rem .55rem; color: var(--success); background: var(--success-soft); border: 1px solid #ccebdd; border-radius: 99px; font-size: .65rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.topbar-user { display: flex; align-items: center; gap: .5rem; margin-left: .2rem; padding: .3rem .4rem; color: var(--text); border-radius: var(--radius-sm); }
.topbar-user:hover { background: var(--surface-subtle); text-decoration: none; }
.topbar-user-copy { display: grid; min-width: 4rem; line-height: 1.2; }
.topbar-user-copy strong { font-size: .75rem; }
.topbar-user-copy small { color: var(--text-muted); font-size: .63rem; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu-chevron {
    width: .38rem; height: .38rem; margin: 0 .15rem 0 .2rem;
    border-right: 1.5px solid #77849a; border-bottom: 1.5px solid #77849a;
    transform: rotate(45deg) translateY(-.1rem); transition: transform .15s ease;
}
.account-menu[open] .account-menu-chevron { transform: rotate(225deg) translate(-.05rem, -.05rem); }
.account-menu-popover {
    position: absolute; top: calc(100% + .65rem); right: 0; z-index: 60;
    width: 18rem; padding: .45rem; background: #fff; border: 1px solid #dce3ed;
    border-radius: .8rem; box-shadow: 0 18px 45px rgb(22 34 54 / 18%);
    animation: account-menu-in .14s ease-out both;
}
.account-menu-identity {
    display: flex; align-items: center; gap: .65rem; margin-bottom: .35rem; padding: .7rem;
    background: #f6f8fc; border-radius: .6rem;
}
.account-menu-identity > span:last-child { display: grid; min-width: 0; gap: .12rem; }
.account-menu-identity strong, .account-menu-identity small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-identity strong { font-size: .75rem; font-weight: 600; }
.account-menu-identity small { color: #7b8799; font-size: .64rem; }
.account-menu-popover > a, .account-menu-popover > button {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem;
    width: 100%; min-height: 0; padding: .65rem .7rem; color: #344057; background: transparent;
    border: 0; border-radius: .55rem; box-shadow: none; text-align: left;
}
.account-menu-popover > a:hover, .account-menu-popover > button:hover {
    background: #f4f7fb; text-decoration: none;
}
.account-menu-popover .nav-icon { width: .9rem; height: .9rem; color: #6b7890; }
.account-menu-popover > a span, .account-menu-popover > button span { display: grid; gap: .1rem; }
.account-menu-popover > a strong, .account-menu-popover > button strong { font-size: .7rem; font-weight: 600; }
.account-menu-popover > a small, .account-menu-popover > button small { color: #8290a4; font-size: .6rem; font-weight: 400; }
.account-menu-popover .account-menu-signout { color: #a92938; }
.account-menu-popover .account-menu-signout .nav-icon { color: #b42332; }
@keyframes account-menu-in {
    from { opacity: 0; transform: translateY(-.35rem) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
main { flex: 1 0 auto; width: min(100%, 1440px); margin: 0 auto; padding: 1rem clamp(1rem, 3.5vw, 3rem) 4rem; background: var(--canvas); }
.site-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: min(100%, 1440px); margin: auto auto 0; padding: .9rem clamp(1rem, 3.5vw, 3rem);
    color: #6f7d91; background: rgb(255 255 255 / .96); border-top: 1px solid #dce3ed;
    box-shadow: 0 -6px 18px rgb(26 43 70 / .05); backdrop-filter: blur(10px);
    font-size: .68rem;
}
.site-footer span:last-child { color: #9aa5b5; }

/* Page structure */
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0 0 .85rem; color: var(--text-muted); font-size: .75rem; }
.breadcrumbs a { color: var(--text-muted); }
.breadcrumbs strong { color: #435069; font-weight: 650; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-header p:not(.eyebrow) { max-width: 52rem; margin: .55rem 0 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; }
.eyebrow { margin: 0 0 .35rem; color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.subtitle { margin: .35rem 0 1.2rem; color: var(--text-muted); line-height: 1.5; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.75rem 0 .8rem; }
.section-heading h2 { margin: 0; }
.section-heading p { margin: 0; color: var(--text-muted); font-size: .8rem; }
.portal-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    margin-bottom: .85rem; padding: .2rem 0 .9rem;
    background: transparent; border: 0; border-bottom: 1px solid #dde4ed; border-radius: 0; box-shadow: none;
}
.portal-page-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.portal-page-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; color: var(--brand); background: #ebf0ff; border: 1px solid #dce5ff; border-radius: .65rem; }
.portal-page-icon .nav-icon { width: .95rem; height: .95rem; }
.portal-page-title > div { display: grid; min-width: 0; gap: .12rem; }
.portal-page-title p { margin: 0; color: var(--brand); font-size: .59rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.portal-page-title h1 { margin: 0; color: #1f2d44; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -.03em; }
.portal-page-title > div > span { color: #758297; font-size: .7rem; line-height: 1.45; }
.portal-page-header.tone-teal .portal-page-icon { color: var(--accent-teal); background: var(--accent-teal-soft); border-color: #c8e8e2; }
.portal-page-header.tone-violet .portal-page-icon { color: var(--accent-violet); background: var(--accent-violet-soft); border-color: #e1d4f3; }
.portal-page-header.tone-amber .portal-page-icon { color: var(--accent-amber); background: var(--accent-amber-soft); border-color: #eed8ad; }
.portal-page-header.tone-rose .portal-page-icon { color: var(--accent-rose); background: var(--accent-rose-soft); border-color: #f0ced9; }
.portal-page-header.tone-cyan .portal-page-icon { color: var(--accent-cyan); background: var(--accent-cyan-soft); border-color: #cae8f1; }
.portal-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex: none; }
.portal-page-actions > :is(button, a, label) {
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
    min-height: 2.4rem; padding: .55rem .85rem; color: #315f95; background: #f5faff;
    border: 1px solid #cbdff1; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
    font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.portal-page-actions > :is(button, a, label):nth-child(4n + 1):not(.primary) { color: #6844a1; background: #fbf8ff; border-color: #ddd2ef; }
.portal-page-actions > :is(button, a, label):nth-child(4n + 2):not(.primary) { color: #2466a3; background: #f5faff; border-color: #cbdff1; }
.portal-page-actions > :is(button, a, label):nth-child(4n + 3):not(.primary) { color: #087b72; background: #f3fbfa; border-color: #c5e7e2; }
.portal-page-actions > :is(button, a, label):nth-child(4n):not(.primary) { color: #9a6514; background: #fffbf3; border-color: #eedbb8; }
.portal-page-actions > :is(button, a, label):hover:not(:disabled) { filter: saturate(1.08); box-shadow: 0 8px 18px -14px currentColor; text-decoration: none; }
.portal-page-actions > .primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.portal-page-actions .nav-icon { width: .82rem; height: .82rem; }
.file-upload-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
    min-height: 2.4rem; padding: .55rem .85rem; margin: 0; color: #344057; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
    cursor: pointer; font-weight: 650; line-height: 1.2;
}
.portal-page-actions .file-upload-button { margin: 0; }
.file-upload-button:hover { color: var(--text); background: var(--surface-subtle); border-color: #aeb8c7; }
.file-upload-button input[type="file"] { display: none; }

/* Buttons and controls */
button {
    min-height: 2.4rem; padding: .55rem .85rem; color: #344057; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
    cursor: pointer; font-weight: 650; line-height: 1.2;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .05s ease;
}
button:hover:not(:disabled) { color: var(--text); background: var(--surface-subtle); border-color: #aeb8c7; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.primary { color: white !important; background: var(--brand) !important; border-color: var(--brand) !important; }
.primary:hover:not(:disabled) { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }
.danger { color: white !important; background: var(--danger) !important; border-color: var(--danger) !important; }
.link-button { min-height: auto; padding: 0; color: var(--brand); background: none; border: 0; box-shadow: none; }
.link-button:hover { color: var(--brand-hover); background: none !important; text-decoration: underline; }
input, select, textarea {
    width: auto; min-width: 0; min-height: 2.4rem; padding: .58rem .7rem; color: var(--text);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    transition: border-color .14s ease, box-shadow .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgb(49 87 213 / .12); }
label { font-weight: 600; }

/* Searchable dropdown (entity-reference picker) */
.searchable-select { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.searchable-select-input { width: 100%; padding-right: 2rem; text-align: left; }
.searchable-select-clear {
    position: absolute; right: .35rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
    min-height: 0; padding: 0; color: var(--text-subtle); font-size: 1rem; line-height: 1;
    background: none; border: none; box-shadow: none;
}
.searchable-select-clear:hover { color: var(--danger); background: none; }
.searchable-select-dropdown {
    position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 30; max-height: 16rem;
    overflow: auto; margin: 0; padding: .3rem; list-style: none; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.searchable-select-status { padding: .5rem .6rem; color: var(--text-muted); font-size: .8rem; text-align: left; }
.searchable-select .searchable-select-option {
    display: block; width: 100%; min-height: 0; padding: .5rem .6rem; color: var(--text); text-align: left;
    justify-content: flex-start;
    background: none; border: none; box-shadow: none; border-radius: var(--radius-xs);
}
.searchable-select .searchable-select-option:hover, .searchable-select .searchable-select-option.highlighted { background: var(--brand-soft); color: var(--brand-hover); }

/* Topbar global search */
.global-search { position: relative; flex: 1 1 auto; max-width: 30rem; margin: 0 auto; min-width: 0; }
.global-search-field {
    display: flex; align-items: center; gap: .5rem; height: 2.15rem; padding: 0 .75rem;
    background: #f3f5f8; border: 1px solid var(--border); border-radius: 99px;
}
.global-search-field:focus-within { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.global-search-field > .nav-icon { width: .85rem; height: .85rem; color: var(--text-subtle); flex: 0 0 auto; }
.global-search-field input {
    flex: 1; min-width: 0; padding: 0; color: var(--text); background: none; border: 0; box-shadow: none; font-size: .78rem;
}
.global-search-field input::placeholder { color: var(--text-subtle); }
.global-search-clear {
    flex: 0 0 auto; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0;
    color: var(--text-subtle); font-size: 1rem; line-height: 1; background: none; border: none; box-shadow: none;
}
.global-search-clear:hover { color: var(--danger); background: none; }
.global-search-panel {
    position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 30; max-height: 26rem;
    overflow-y: auto; padding: .5rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.global-search-section { margin-bottom: .35rem; }
.global-search-section:last-child { margin-bottom: 0; }
.global-search-section-label {
    display: block; padding: .35rem .55rem .2rem; color: var(--text-subtle); font-size: .6rem;
    font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.global-search-result {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .55rem; color: var(--text);
    text-align: left; background: none; border: none; border-radius: var(--radius-xs); box-shadow: none;
}
.global-search-result:hover { background: var(--brand-soft); color: var(--brand-hover); }
.global-search-result-icon {
    display: grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
    color: var(--brand); background: var(--brand-soft); border-radius: .5rem;
}
.global-search-result-icon .nav-icon { width: .85rem; height: .85rem; }
.global-search-result-copy { display: grid; min-width: 0; line-height: 1.3; }
.global-search-result-copy strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.global-search-result-copy small { overflow: hidden; color: var(--text-muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.global-search-empty { padding: .75rem .55rem; color: var(--text-muted); font-size: .78rem; }

/* Cards, filters, and forms */
.toolbar, .form-card, .state-card, .tree-card {
    margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.toolbar {
    position: relative; display: flex; align-items: center; gap: .65rem; padding: .8rem;
    background: linear-gradient(120deg, #f8faff, #f7fbfd 56%, #fbf9ff);
    border-color: #d9e3f1; box-shadow: 0 8px 22px -20px rgb(33 55 90 / .4);
}
.toolbar input, .toolbar .searchable-select { flex: 1 1 15rem; }
.toolbar input, .toolbar select, .toolbar textarea, .toolbar .searchable-select-input { background-color: rgb(255 255 255 / .94); }
.toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.toolbar button .nav-icon { width: .8rem; height: .8rem; }
.toolbar button:last-child { color: #496079; background: white; border-color: #c9d6e5; }
.toolbar button:last-child:hover:not(:disabled) { color: var(--brand); background: #f4f7ff; border-color: #9fb1d7; }
.form-card, .state-card { display: block; padding: clamp(1rem, 2vw, 1.5rem); }
.form-card {
    background: linear-gradient(145deg, #fff, #fbfcff); border-color: #d9e3ef;
    box-shadow: 0 10px 26px -22px rgb(27 47 80 / .42);
}
.form-card h2, .state-card h2 { padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.form-card h2 { color: #26364e; }
.state-card.state-card {
    --state-accent: var(--info);
    --state-bg: var(--info-soft);
    --state-border: #c9e4f2;
    position: relative;
    min-height: 4.25rem;
    padding: .9rem 1rem .9rem 3.75rem;
    color: #466077;
    background: var(--state-bg);
    border-color: var(--state-border);
    border-left: 3px solid var(--state-accent);
    line-height: 1.45;
}
.state-card::before {
    content: "i";
    position: absolute;
    top: .9rem;
    left: 1rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--state-accent);
    background: rgb(255 255 255 / .76);
    border: 1px solid color-mix(in srgb, var(--state-accent) 24%, transparent);
    border-radius: .55rem;
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}
.state-card > strong { display: block; color: var(--text); font-size: .86rem; line-height: 1.35; }
.state-card p { margin: .2rem 0 0; color: inherit; font-size: .78rem; }
.state-card > button,
.state-card > a { margin-top: .65rem; }
.state-card a { color: var(--state-accent); font-weight: 650; }
.state-card.error {
    --state-accent: var(--danger);
    --state-bg: var(--danger-soft);
    --state-border: #f3c9cf;
    color: #8f2834;
}
.state-card.error::before { content: "!"; }
.state-card.warning {
    --state-accent: var(--warning);
    --state-bg: var(--warning-soft);
    --state-border: #f0d8ae;
    color: #7d531d;
}
.state-card.warning::before { content: "!"; }
.state-card.success {
    --state-accent: var(--success);
    --state-bg: var(--success-soft);
    --state-border: #bfe6d4;
    color: #22674f;
}
.state-card.success::before { content: "\2713"; }
.state-card.loading::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    margin: .32rem;
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--state-accent) 22%, transparent);
    border-top-color: var(--state-accent);
    border-radius: 50%;
    animation: state-card-spin .75s linear infinite;
}
@keyframes state-card-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .state-card.loading::before { animation: none; border-right-color: var(--state-accent); }
}
.validation { color: var(--danger); font-size: .82rem; }

/* Toast notifications */
.toast-host {
    position: fixed; top: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column;
    gap: .6rem; width: min(22rem, calc(100vw - 2rem)); pointer-events: none;
}
.toast {
    display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; background: var(--surface);
    border: 1px solid var(--border); border-left: 4px solid var(--text-muted); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in .18s ease-out;
}
.toast-text { flex: 1; color: var(--text); font-size: .85rem; line-height: 1.4; white-space: pre-line; }
.toast-close {
    display: inline-grid; place-items: center; width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; padding: 0;
    color: var(--text-subtle); font-size: 1rem; line-height: 1;
    background: none; border: none; box-shadow: none;
}
.toast-close:hover { color: var(--text); background: none; }
.toast.error { border-left-color: var(--danger); }
.toast.error .toast-text { color: var(--danger); }
.toast.success { border-left-color: var(--success); }
.toast.warning { border-left-color: var(--warning); }
.toast.info { border-left-color: var(--brand); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to { opacity: 1; transform: translateY(0); }
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.modal label, .form-card label { display: grid; gap: .35rem; margin-bottom: .75rem; color: #526078; font-size: .78rem; }
.modal label input, .modal label select, .modal label .searchable-select,
.form-card label input, .form-card label select, .form-card label .searchable-select { width: 100%; }
.modal label.checkbox-row, .form-card label.checkbox-row,
.modal label:has(> input[type="checkbox"]), .form-card label:has(> input[type="checkbox"]),
.modal label:has(> input[type="radio"]), .form-card label:has(> input[type="radio"]) {
    display: flex; flex-direction: row; align-items: center; gap: .65rem; min-height: 2.65rem;
    margin-bottom: .5rem; padding: .55rem .7rem; color: #3d4b61; background: #f8faff;
    border: 1px solid #e1e7f0; border-radius: .65rem; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.modal label.checkbox-row input, .form-card label.checkbox-row input,
.modal label:has(> input[type="checkbox"]) input, .form-card label:has(> input[type="checkbox"]) input,
.modal label:has(> input[type="radio"]) input, .form-card label:has(> input[type="radio"]) input { width: auto; }
.modal label.checkbox-row:hover, .form-card label.checkbox-row:hover,
.modal label:has(> input[type="checkbox"]):hover, .form-card label:has(> input[type="checkbox"]):hover,
.modal label:has(> input[type="radio"]):hover, .form-card label:has(> input[type="radio"]):hover {
    background: #f2f6ff; border-color: #c8d5eb;
}
input[type="checkbox"], input[type="radio"] {
    appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center;
    flex: 0 0 auto; width: 1.15rem !important; min-width: 1.15rem; height: 1.15rem;
    min-height: 1.15rem; margin: 0; padding: 0;
    color: var(--brand); background-color: #fff; border: 1.5px solid #aab7ca;
    box-shadow: inset 0 0 0 2px #fff; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
input[type="checkbox"] { border-radius: .32rem; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: #5272d9; }
input[type="checkbox"]:checked {
    background-color: var(--brand); border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m3.2 8.2 3 3 6.6-6.7'/%3E%3C/svg%3E");
    background-position: center; background-repeat: no-repeat; background-size: .85rem;
}
input[type="radio"]:checked {
    background: radial-gradient(circle at center, var(--brand) 0 37%, #fff 40%);
    border-color: var(--brand);
}
input[type="checkbox"]:checked, input[type="radio"]:checked { transform: scale(1.03); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px rgb(53 91 220 / .18), inset 0 0 0 2px #fff;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    opacity: .5; cursor: not-allowed;
}
.modal footer, .form-card footer { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Data tables */
.table-wrap {
    overflow: auto;
    max-width: 100%;
    scrollbar-gutter: stable;
    /* Tables own horizontal overflow, but vertical wheel/trackpad gestures must continue up to
       the page. Containing both axes made the page feel frozen whenever the pointer was over a
       table that had no remaining vertical scroll range. */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    background: var(--surface);
    border: 1px solid #d7e1ed;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px -24px rgb(32 55 91 / .42);
}
/* A table that edits rows inline with a searchable-select (e.g. a SKU picker per line) can't use
   the default overflow:auto - CSS clips an absolutely-positioned dropdown to its nearest
   overflow:auto/hidden ancestor, and mixing overflow-x:auto with overflow-y:visible on the same
   box is not possible (the spec forces the visible axis to auto too), so the only way to let the
   dropdown escape downward is to drop clipping on this wrapper entirely. These editor tables are
   narrow and modal-confined, so horizontal scroll protection isn't needed here. */
.table-wrap.line-editor-table { overflow: visible; }
.table-sticky-header-clone {
    position: fixed;
    z-index: 18;
    display: none;
    overflow: hidden;
    background: #f5f8fc;
    border: 1px solid #d8e1ec;
    border-top: 0;
    box-shadow: 0 10px 22px -16px rgb(25 45 78 / .38);
}
.table-sticky-header-clone.is-visible { display: block; }
.table-sticky-header-clone table {
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.table-sticky-header-clone thead,
.table-sticky-header-clone tr { height: 100%; }
.table-sticky-header-clone th {
    position: static;
    height: 100%;
    background: #f5f8fc;
    box-shadow: none;
}
.table-sticky-header-clone button,
.table-sticky-header-clone a { cursor: pointer; }
/* Dynamic Primary-Picking-Strategy fields rendered per ASN line (AsnLineAttributeFields.razor) -
   a compact row of labeled chips instead of stacked full-width <label> blocks, so 1-3 short fields
   (Batch, PKM, Expiry) don't blow out the line-editor table's row height or wrap mid-field. */
.asn-attr-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; min-width: 12rem; }
.asn-attr-field { display: flex; flex-direction: column; gap: .2rem; }
.asn-attr-field-label {
    color: #68758b; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.asn-attr-field input {
    padding: .35rem .5rem; border: 1px solid #d7dfec; border-radius: .5rem; font-size: .78rem; background: #fff;
}
.asn-attr-input-text { width: 7rem; }
/* PKD/Expiry (dd/mm/yy) and PKM (mm/yy) are plain auto-formatting text inputs, not native
   <input type="date"> - the native control renders per browser/OS locale (often mm/dd/yyyy),
   which can't be forced to the spec's fixed dd/mm/yy display, so free text with "/" auto-inserted
   as digits are typed (matching InwardDocumentDetail.razor's PKD/PKM entry) is used instead. */
.asn-attr-input-date { width: 6rem; text-align: center; }
.asn-attr-input-pkm { width: 4.5rem; text-align: center; }
.asn-attr-serial-button {
    display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .65rem;
    border: 1px solid #d7dfec; border-radius: .5rem; background: #fff; font-size: .75rem; white-space: nowrap;
}
.asn-attr-serial-button:hover { background: #f2f6ff; border-color: #c8d5eb; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.table-wrap:not(.line-editor-table) > table { table-layout: auto; }
.table-wrap > table th, .table-wrap > table td { overflow: visible; text-overflow: clip; white-space: nowrap; }
.table-wrap:not(.line-editor-table) > table > thead > tr > th:not(:last-child),
.table-wrap:not(.line-editor-table) > table > tbody > tr > td:not(:last-child) { width: 1%; }
th, td { padding: .78rem .9rem; text-align: left; border-bottom: 1px solid #e8ecf2; vertical-align: middle; }
.path-cell { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
th {
    position: sticky; top: 0; z-index: 1; color: #596b83; background: linear-gradient(180deg, #f4f7fc, #eef3f9);
    font-size: .65rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; white-space: nowrap;
}
tbody tr { transition: background-color .12s ease, box-shadow .12s ease; }
.table-wrap > table > tbody > tr:nth-child(even) { background: #fcfdff; }
.table-wrap > table > tbody > tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
tbody tr:last-child td { border-bottom: 0; }
td { color: #3d4a60; }
td:first-child { color: var(--text); font-weight: 550; }
.table-wrap > table > tbody > tr > td > code {
    display: inline-block; padding: .18rem .36rem; color: #274aaf; background: #eef3ff;
    border: 1px solid #d7e1fb; border-radius: .4rem; font-weight: 760;
}
.scan-counter { margin-bottom: .5rem; color: var(--text); font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.qty-mode-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; min-height: 2.1rem; }
.qty-mode-row input[type="number"] { width: 9rem; }
.qty-mode-prompt { display: block; margin-top: .3rem; color: var(--text-muted); font-size: .72rem; font-style: italic; }
.actions { display: flex; justify-content: flex-end; gap: .35rem; white-space: nowrap; }
/* .actions is also used as a plain <td> class in most list tables (Cycle Counts, Masters, etc.).
   display:flex on a table cell drops it out of normal table row-sizing/vertical-align, which is
   why action-column rows could end up misaligned with the rest of the row - td.actions (higher
   specificity than .actions alone) restores normal table-cell behavior for every table that
   doesn't already have a table-specific override (pick-task-table, outward-orders-table, etc.
   already set this per-table; this is the fallback for every other bare <table>). */
td.actions { display: table-cell; vertical-align: middle; }
td.actions:last-child { text-align: right; }
/* flex's `gap` no longer applies once display is table-cell - restore spacing between adjacent
   action buttons (e.g. Cycle Counts' approve/reject pair) with margin instead. */
td.actions .row-icon-button + .row-icon-button { margin-left: .35rem; }
/* Keep the final action column visible while the table content scrolls horizontally. */
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child.actions) > thead > tr > th:last-child,
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .actions) > thead > tr > th:last-child,
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .row-icon-button) > thead > tr > th:last-child,
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > button) > thead > tr > th:last-child {
    position: sticky; right: 0; z-index: 4; width: 1%; background: #eef3f9;
    box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%);
}
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child.actions) > thead > tr > th:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .actions) > thead > tr > th:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .row-icon-button) > thead > tr > th:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > button) > thead > tr > th:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child.actions) > tbody > tr > td:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .actions) > tbody > tr > td:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > .row-icon-button) > tbody > tr > td:nth-last-child(2),
.table-wrap:not(.line-editor-table) > table:has(> tbody > tr > td:last-child > button) > tbody > tr > td:nth-last-child(2) { width: auto; }
.table-wrap:not(.line-editor-table) > table > tbody > tr > td:last-child.actions,
.table-wrap:not(.line-editor-table) > table > tbody > tr > td:last-child:has(> .actions),
.table-wrap:not(.line-editor-table) > table > tbody > tr > td:last-child:has(> .row-icon-button),
.table-wrap:not(.line-editor-table) > table > tbody > tr > td:last-child:has(> button) {
    position: sticky; right: 0; z-index: 3; width: 1%; background: var(--surface);
    box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%);
}
.table-wrap:not(.line-editor-table) > table > tbody > tr:hover > td:last-child.actions,
.table-wrap:not(.line-editor-table) > table > tbody > tr:hover > td:last-child:has(> .actions),
.table-wrap:not(.line-editor-table) > table > tbody > tr:hover > td:last-child:has(> .row-icon-button),
.table-wrap:not(.line-editor-table) > table > tbody > tr:hover > td:last-child:has(> button) { background: #f4f8ff; }
.table-wrap:not(.line-editor-table) > table > tbody > tr.selected-row > td:last-child.actions,
.table-wrap:not(.line-editor-table) > table > tbody > tr.selected-row > td:last-child:has(> .actions),
.table-wrap:not(.line-editor-table) > table > tbody > tr.selected-row > td:last-child:has(> .row-icon-button),
.table-wrap:not(.line-editor-table) > table > tbody > tr.selected-row > td:last-child:has(> button) { background: #eef2ff; }
.actions button { min-height: 2rem; padding: .38rem .6rem; font-size: .72rem; box-shadow: none; }
.actions .row-icon-button {
    display: inline-grid; place-items: center; width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem;
    padding: 0; color: #66758b; background: #f8fafc; border-color: #d8e0ea; border-radius: .5rem;
}
.actions .row-icon-button .nav-icon { width: .82rem; height: .82rem; }
.actions .row-icon-button:first-child { color: #3159c9; background: #f3f6ff; border-color: #d4def7; }
.actions .row-icon-button:nth-child(2) { color: #7952ad; background: #f7f2fd; border-color: #e3d8f2; }
.actions .row-icon-button:nth-child(3):not(.activate):not(.deactivate) { color: #087b72; background: #f0faf8; border-color: #cce8e3; }
.actions .row-icon-button:hover:not(:disabled) { color: var(--brand); background: #eef2ff; border-color: #c9d5fa; }
.actions .row-icon-button.deactivate:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); border-color: #efcbd0; }
.selected-row td { background: #eef2ff; }
.breadcrumb-path { margin: .3rem 0 0; color: var(--text-muted); font-size: .78rem; }
.actions .row-icon-button.activate:hover:not(:disabled) { color: var(--success); background: var(--success-soft); border-color: #cae9dc; }
.actions a { display: inline-flex; align-items: center; min-height: 2rem; padding: .38rem .62rem; color: var(--brand); background: #f1f4ff; border-radius: .45rem; font-size: .7rem; font-weight: 700; }
.actions a:hover { background: #e7edff; text-decoration: none; }
.inward-document-action-cell { width: 1%; min-width: 5rem; vertical-align: middle; }
.inward-document-action-cell .actions { align-items: center; min-height: 2rem; }
.inward-line-action-cell { width: 1%; min-width: 3.75rem; vertical-align: middle; }
.inward-line-action-cell .actions { align-items: center; min-height: 2rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .85rem; color: var(--text-muted); font-size: .78rem; }
.pager button { color: #3e5680; background: #f7f9ff; border-color: #ccd8ef; }
.pager button:hover:not(:disabled) { color: var(--brand); background: #eef3ff; border-color: #aebfe7; }
.status { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; color: #526078; background: #edf1f5; border: 1px solid #dfe5ec; border-radius: 99px; font-size: .66rem; font-weight: 750; line-height: 1.3; }
.status::before { content: ""; width: .35rem; height: .35rem; background: currentColor; border-radius: 50%; opacity: .75; }
.status.active { color: var(--success); background: var(--success-soft); border-color: #ccebdd; }
.status.inactive { color: var(--danger); background: var(--danger-soft); border-color: #f3c9cf; }
.status.status-success { color: #087a55; background: #e9f8f2; border-color: #bfe9d8; }
.status.status-info { color: #2456c7; background: #edf3ff; border-color: #cbdafa; }
.status.status-warning { color: #9a5b00; background: #fff6e5; border-color: #f4d7a2; }
.status.status-danger { color: #b42335; background: #fff0f2; border-color: #f3c7ce; }
.status.status-purple { color: #7544b7; background: #f5efff; border-color: #dfd0f5; }
.status.status-neutral { color: #526078; background: #edf1f5; border-color: #dfe5ec; }

.entity-link {
    appearance: none; display: inline-flex; align-items: center; gap: .32rem;
    border: 0; background: transparent; color: inherit; padding: 0;
    font: inherit; font-weight: 500; text-align: left; cursor: pointer; border-radius: .25rem;
}
.entity-link .nav-icon { width: .7rem; height: .7rem; color: #8a96a8; stroke-width: 1.7; }
.entity-link:hover { color: inherit; text-decoration: underline; text-underline-offset: .18rem; }
.entity-link:hover .nav-icon { color: #536176; }
.entity-link:focus-visible { outline: 3px solid rgba(53, 91, 219, .2); outline-offset: .2rem; }
.entity-drawer-backdrop {
    align-items: flex-start;
    padding: 1rem 0 1rem 1rem;
}
.modal.entity-details-drawer {
    width: clamp(44rem, 60vw, 76rem);
    height: calc(100dvh - 2rem); min-height: 0; max-height: calc(100dvh - 2rem);
    overflow: hidden;
    padding: 0; border: 1px solid #dce3ed; border-right: 0;
    border-radius: 1rem 0 0 1rem;
}
.entity-details-drawer > header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    flex: 0 0 auto; padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #fbfcff 0%, #f3f7ff 100%);
}
.entity-details-drawer > header h2 {
    position: static; margin: .18rem 0 0; padding: 0; color: #17243a;
    background: transparent; border: 0; font-size: 1.05rem; font-weight: 600;
    line-height: 1.3; backdrop-filter: none;
}
.entity-details-drawer > header .eyebrow { font-size: .65rem; font-weight: 600; letter-spacing: .08em; }
.entity-details-drawer > header p {
    margin: .3rem 0 0; color: #728096; font-size: .72rem; font-weight: 400;
}
.entity-drawer-content {
    flex: 1 1 auto; width: 100%; min-height: 0; padding: 1rem 1.4rem 1.25rem;
    display: grid; align-content: start; gap: .9rem; overflow-y: auto;
    overscroll-behavior: contain;
}
.entity-identity {
    display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.4fr) auto;
    align-items: center; gap: 1rem; padding: .8rem .95rem; background: #f7f9fd;
    border: 1px solid #dfe6f0; border-radius: .75rem;
}
.entity-identity div, .entity-meta div, .entity-detail-grid div { display: grid; gap: .25rem; }
.entity-identity span, .entity-meta span, .entity-detail-grid span {
    color: var(--muted); font-size: .68rem; font-weight: 500; text-transform: capitalize;
}
.entity-identity strong { font-size: .88rem; font-weight: 600; line-height: 1.35; }
.entity-drawer-content h3 { margin: 0 0 .45rem; font-size: .84rem; font-weight: 600; }
.entity-detail-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem;
}
.entity-detail-grid div, .entity-meta div {
    min-width: 0; padding: .7rem .8rem; background: #fff;
    border: 1px solid var(--border); border-radius: .6rem;
}
.entity-detail-grid strong, .entity-meta strong {
    overflow-wrap: anywhere; color: #26344a; font-size: .8rem; font-weight: 500; line-height: 1.4;
}
.entity-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
    padding-top: .75rem; border-top: 1px solid #edf0f4;
}
.entity-detail-skeleton { display: grid; gap: .8rem; }
.entity-detail-skeleton span {
    height: 4.5rem; border-radius: .7rem;
    background: linear-gradient(90deg, #eef2f8 25%, #f8faff 45%, #eef2f8 65%);
    background-size: 200% 100%; animation: entity-skeleton 1.2s infinite linear;
}
@keyframes entity-skeleton { to { background-position: -200% 0; } }
@media (max-width: 720px) {
    .entity-identity, .entity-detail-grid, .entity-meta { grid-template-columns: 1fr; }
    .entity-drawer-backdrop { padding: 0; }
    .modal.entity-details-drawer {
        width: 100vw; height: 100dvh; max-height: 100dvh;
        border: 0; border-radius: 0;
    }
}

/* Dashboard */
.dashboard-header {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
    margin-bottom: 1.75rem; padding: clamp(1.4rem, 3vw, 2.2rem); overflow: hidden;
    background: linear-gradient(125deg, #ffffff 0%, #f7f9ff 68%, #edf3ff 100%);
    border: 1px solid #dce4f0; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.dashboard-header::after {
    content: ""; position: absolute; right: -6rem; bottom: -11rem; width: 23rem; height: 23rem;
    border: 1px solid rgb(49 87 213 / .07); border-radius: 50%;
    box-shadow: 0 0 0 3.5rem rgb(49 87 213 / .018), 0 0 0 7rem rgb(49 87 213 / .012);
}
.dashboard-welcome { position: relative; z-index: 1; }
.dashboard-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .65rem; color: var(--brand); font-size: .66rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-kicker i { width: .42rem; height: .42rem; background: #1ba779; border: 2px solid #d6f3e9; border-radius: 50%; box-sizing: content-box; }
.dashboard-welcome h1 { color: #172238; font-size: clamp(1.75rem, 3vw, 2.55rem); }
.dashboard-welcome p { max-width: 42rem; margin: .65rem 0 0; color: #66748b; font-size: .88rem; line-height: 1.55; }
.dashboard-actions { position: relative; z-index: 1; display: flex; gap: .6rem; flex: none; }
.dashboard-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.65rem; padding: .65rem .9rem; border-radius: .6rem; font-size: .75rem; font-weight: 750; }
.dashboard-action:hover { text-decoration: none; }
.dashboard-action.primary { color: white; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 8px 20px -10px rgb(49 87 213 / .7); }
.dashboard-action.primary:hover { background: var(--brand-hover); }
.dashboard-action.secondary { color: #42516a; background: white; border: 1px solid #cfd8e5; }
.dashboard-action.secondary:hover { color: var(--text); border-color: #aeb9ca; }
.dashboard-action .nav-icon { width: .95rem; height: .95rem; }
.dashboard-section { margin-top: 1.75rem; }
.section-heading { align-items: flex-end; margin-bottom: .8rem; }
.section-heading > div { display: grid; gap: .15rem; }
.section-eyebrow { margin: 0; color: var(--brand); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.section-note { color: var(--text-muted); font-size: .72rem; }
.scope-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; color: #607087; background: white; border: 1px solid var(--border); border-radius: 99px; font-size: .66rem; font-weight: 650; }
.scope-chip i { width: .4rem; height: .4rem; background: #1ba779; border-radius: 50%; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.kpi-card {
    --kpi-accent: #3159d9;
    --kpi-soft: #eef3ff;
    --kpi-soft-end: #fafbff;
    --kpi-border: #d8e2ff;
    position: relative; display: grid; gap: .35rem; min-height: 11.5rem; padding: 1rem;
    color: var(--text); background: linear-gradient(145deg, var(--kpi-soft), var(--kpi-soft-end));
    border: 1px solid var(--kpi-border); border-radius: var(--radius-md);
    box-shadow: 0 7px 20px -18px color-mix(in srgb, var(--kpi-accent) 50%, transparent);
}
.kpi-card:nth-child(5n + 2) { --kpi-accent: #178666; --kpi-soft: #eaf8f2; --kpi-soft-end: #f9fdfb; --kpi-border: #caeadc; }
.kpi-card:nth-child(5n + 3) { --kpi-accent: #c54d6c; --kpi-soft: #fff0f4; --kpi-soft-end: #fffafb; --kpi-border: #f2d2dc; }
.kpi-card:nth-child(5n + 4) { --kpi-accent: #a36a12; --kpi-soft: #fff6e7; --kpi-soft-end: #fffcf7; --kpi-border: #f0ddba; }
.kpi-card:nth-child(5n) { --kpi-accent: #8053bb; --kpi-soft: #f5effd; --kpi-soft-end: #fcfaff; --kpi-border: #e4d6f4; }
.kpi-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kpi-accent); border-radius: var(--radius-md) var(--radius-md) 0 0; opacity: .65; }
.kpi-card.attention, .kpi-card.accuracy { --kpi-accent: #a36a12; --kpi-soft: #fff6e7; --kpi-soft-end: #fffcf7; --kpi-border: #f0ddba; }
.kpi-card:hover { border-color: color-mix(in srgb, var(--kpi-accent) 34%, white); box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--kpi-accent) 58%, transparent); text-decoration: none; transform: translateY(-1px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.kpi-icon { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; color: var(--kpi-accent); background: rgb(255 255 255 / .82); border: 1px solid color-mix(in srgb, var(--kpi-accent) 18%, transparent); border-radius: .62rem; }
.kpi-icon .nav-icon { width: 1rem; height: 1rem; }
.kpi-card.attention .kpi-icon, .kpi-card.accuracy .kpi-icon { color: var(--kpi-accent); background: rgb(255 255 255 / .82); }
.kpi-trend { padding: .22rem .42rem; border-radius: 99px; font-size: .55rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.kpi-trend.neutral { color: #617088; background: #f2f5f8; }
.kpi-trend.warning { color: #9a5a08; background: #fff5e4; }
.kpi-value { margin-top: auto; color: #172238; font-size: 2rem; font-weight: 780; line-height: 1; letter-spacing: -.05em; }
.kpi-label { color: #546279; font-size: .7rem; font-weight: 700; line-height: 1.35; }
.kpi-link { display: flex; justify-content: space-between; align-items: center; margin-top: .45rem; padding-top: .65rem; color: #8290a4; border-top: 1px solid #edf0f4; font-size: .61rem; }
.kpi-link .nav-icon { width: .78rem; height: .78rem; color: var(--brand); }
.workspace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.workspace-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; min-height: 7.4rem; padding: 1rem;
    color: var(--text); background: white; border: 1px solid #dfe5ed; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.workspace-card:hover { border-color: #b9c5d5; box-shadow: 0 10px 26px -17px rgb(15 23 42 / .32); text-decoration: none; transform: translateY(-1px); }
.workspace-icon { display: grid !important; place-items: center; width: 2.8rem; height: 2.8rem; color: var(--brand) !important; background: #eef2ff; border-radius: .75rem; }
.workspace-icon .nav-icon { width: 1.15rem; height: 1.15rem; }
.workspace-icon.dispatch { color: #236d8f !important; background: #eaf7fb; }
.workspace-icon.inventory { color: #7a55b5 !important; background: #f3edfc; }
.workspace-icon.visual { color: #187e68 !important; background: #e9f8f3; }
.workspace-icon.accuracy { color: #a36008 !important; background: #fff6e6; }
.workspace-icon.reports { color: #aa4c6d !important; background: #fceef3; }
.workspace-copy { display: grid !important; min-width: 0; gap: .18rem; }
.workspace-copy strong { color: #26344b; font-size: .8rem; }
.workspace-copy > span { color: #718096; font-size: .68rem; line-height: 1.4; }
.workspace-copy small { color: #9aa5b5; font-size: .58rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.workspace-arrow { display: grid !important; place-items: center; width: 1.8rem; height: 1.8rem; color: #9aa7b9 !important; background: #f6f8fa; border-radius: 50%; }
.workspace-arrow .nav-icon { width: .75rem; height: .75rem; }
.workspace-card:hover .workspace-arrow { color: white !important; background: var(--brand); }
.administration-section { padding: 1.15rem; background: #f8fafc; border: 1px solid #e3e8ef; border-radius: var(--radius-lg); }
.administration-section .section-heading { margin-top: 0; }
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.admin-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .85rem; color: var(--text); background: white; border: 1px solid #e0e6ee; border-radius: .65rem; }
.admin-card:hover { border-color: #bdc8d7; box-shadow: var(--shadow-sm); text-decoration: none; }
.admin-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #65748c; background: #f0f3f7; border-radius: .6rem; }
.admin-icon .nav-icon { width: .95rem; height: .95rem; }
.admin-card > span:nth-child(2) { display: grid; gap: .18rem; min-width: 0; }
.admin-card strong { color: #344159; font-size: .72rem; }
.admin-card small { overflow: hidden; color: #8591a3; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-card > .nav-icon { width: .75rem; height: .75rem; color: #9aa6b7; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.dashboard-card {
    display: grid; gap: .35rem; padding: 1.1rem; color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.dashboard-card:hover { border-color: #b7c3d4; box-shadow: var(--shadow-sm); text-decoration: none; }
.dashboard-card strong { font-size: 1rem; }
.dashboard-card span { color: var(--text-muted); font-size: .78rem; }

/* Reports */
.report-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: .8rem; padding: .65rem .8rem; color: #526078; background: #f8fafc;
    border: 1px solid #e0e6ee; border-radius: .65rem; font-size: .72rem;
}
.report-toolbar > div, .report-toolbar a { display: inline-flex; align-items: center; gap: .45rem; }
.report-toolbar a { color: var(--brand); font-weight: 750; }
.report-toolbar .nav-icon { width: .8rem; height: .8rem; }
.report-selector, .report-snapshot, .report-panel {
    padding: 1rem; background: #fff; border: 1px solid #dce3ec; border-radius: .8rem; box-shadow: 0 1px 2px rgb(27 39 59 / 4%);
}
.report-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.report-section-heading span { display: block; margin-bottom: .12rem; color: #8793a5; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.report-section-heading h2 { margin: 0; color: #1e2c43; font-size: .95rem; }
.report-section-heading p { margin: 0; color: #7b8799; font-size: .68rem; }
.report-section-heading a { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand); font-size: .67rem; font-weight: 750; }
.report-section-heading a .nav-icon { width: .68rem; height: .68rem; }
.report-warehouse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.report-warehouse-card {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    min-height: 4.5rem; padding: .75rem; color: var(--text); background: #fbfcfe;
    border: 1px solid #e1e7ef; border-radius: .7rem;
}
.report-warehouse-card:hover { background: #f7f9ff; border-color: #c7d3f5; text-decoration: none; }
.report-warehouse-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--brand); background: #edf2ff; border-radius: .65rem; }
.report-warehouse-icon .nav-icon { width: .95rem; height: .95rem; }
.report-warehouse-card > span:nth-child(2) { display: grid; gap: .12rem; min-width: 0; }
.report-warehouse-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.report-warehouse-card small { color: #8490a2; font-size: .62rem; }
.report-warehouse-card > .nav-icon { width: .7rem; color: #9aa6b7; }
.report-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid #e1e7ef; border-radius: .7rem; overflow: hidden; }
.report-kpi { display: flex; align-items: center; gap: .65rem; min-height: 5rem; padding: .75rem; background: #fbfcfe; border-right: 1px solid #e1e7ef; }
.report-kpi:last-child { border-right: 0; }
.report-kpi > span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; border-radius: .6rem; }
.report-kpi > span .nav-icon { width: .9rem; height: .9rem; }
.report-kpi .blue { color: var(--brand); background: #edf2ff; }
.report-kpi .cyan { color: #147c9c; background: #e9f8fb; }
.report-kpi .violet { color: #7753b3; background: #f2ebfb; }
.report-kpi .amber { color: #ad6700; background: #fff4df; }
.report-kpi .green { color: #13815d; background: #e9f8f2; }
.report-kpi div { display: grid; gap: .15rem; min-width: 0; }
.report-kpi strong { color: #17243a; font-size: 1.2rem; line-height: 1; }
.report-kpi small { color: #748196; font-size: .6rem; line-height: 1.35; }
.report-insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .8rem; }
.report-status-list { display: grid; gap: .7rem; }
.report-status-row { display: grid; gap: .38rem; }
.report-status-row > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.report-status-row .status { font-size: .6rem; }
.report-status-row strong { color: #26344a; font-size: .75rem; }
.report-progress { display: block; height: .3rem; overflow: hidden; background: #edf1f5; border-radius: 99px; }
.report-progress i { display: block; height: 100%; background: linear-gradient(90deg, #5a78e8, #7792f2); border-radius: inherit; }
.report-inventory { margin-top: .8rem; }
.report-inventory .table-wrap { box-shadow: none; }

/* Outward dashboard */
.outward-dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #e1e7ef; border-radius: .7rem; overflow: hidden; }
.outward-dash-kpis .report-kpi:last-child { border-right: 0; }
.outward-dash-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1rem; }
.outward-dash-stat-row strong { display: block; color: #17243a; font-size: 1.35rem; line-height: 1.1; }
.outward-dash-stat-row small { color: #748196; font-size: .62rem; }
.outward-dash-health-list { display: grid; gap: .55rem; }
.outward-dash-health-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.outward-dash-health-row strong { color: #26344a; font-size: .85rem; }
.outward-dash-sparkbars { display: flex; align-items: flex-end; gap: .45rem; height: 4.5rem; margin-top: 1rem; padding-top: .5rem; border-top: 1px solid #edf1f5; }
.outward-dash-sparkbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; flex: 1 1 0; height: 100%; }
.outward-dash-sparkbar span { display: block; width: 100%; min-height: 4px; background: linear-gradient(180deg, #7792f2, #5a78e8); border-radius: .25rem .25rem 0 0; }
.outward-dash-sparkbar small { color: #9aa5b5; font-size: .58rem; }
@media (max-width: 720px) {
    .outward-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Inward document workspace */
.inward-summary {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .8rem;
    background: #fff; border: 1px solid #dce3ec; border-radius: .72rem; overflow: hidden;
}
.inward-summary > div { display: grid; gap: .18rem; padding: .65rem .8rem; border-right: 1px solid #e4e9f0; }
.inward-summary > div:last-child { border-right: 0; }
.inward-summary span { color: #7d899b; font-size: .59rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.inward-summary strong { color: #1e2c43; font-size: 1rem; }
.inward-summary .attention { background: #fffbf2; }
.inward-summary .attention strong { color: #a46100; }
.inward-line-editor { margin-top: .8rem; padding: 1rem; }
.inward-line-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding-bottom: .7rem; border-bottom: 1px solid #e3e8ef; }
.inward-line-editor > header span, .inward-workspace-heading span, .inward-panel-heading span, .placement-summary span {
    display: block; color: #7f8b9e; font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.inward-line-editor > header h2 { margin: .1rem 0 0; font-size: .95rem; }
.inward-line-editor fieldset { display: grid; grid-template-columns: auto auto minmax(12rem, 1fr); align-items: end; gap: .65rem; margin-top: .75rem; padding: .75rem; background: #f8fafc; border: 1px solid #e0e6ee; border-radius: .65rem; }
.inward-line-editor fieldset legend { padding: 0 .3rem; color: #6e7a8e; font-size: .65rem; font-weight: 750; }
.inward-putaway { margin-top: .8rem; padding: 1rem; background: #fff; border: 1px solid #d7e0eb; border-radius: .8rem; box-shadow: 0 2px 8px rgb(32 48 75 / 5%); }
.putaway-workspace-backdrop {
    inset: 0 0 0 241px; width: auto; height: 100dvh;
    align-items: stretch; justify-content: flex-end; padding: 0;
    /* Matches the standard .modal-backdrop's dimming/blur (was a much lighter 22%, no blur,
       which read as an attached page section rather than a floating modal). */
    background: rgb(12 20 35 / .48); backdrop-filter: blur(3px);
    animation: modal-backdrop-in .18s ease-out both;
}
.putaway-workspace-drawer {
    width: 100%; height: 100%; min-height: 100%; max-height: none; margin: 0; padding: 1rem 1.1rem;
    display: flex; flex-direction: column; overflow: hidden; background: #f8fafc;
    border: 0; border-left: 1px solid #d7e0eb; border-radius: 1rem 0 0 1rem;
    box-shadow: -14px 0 38px rgb(10 20 38 / 16%); contain: layout paint;
    animation: modal-drawer-in .2s cubic-bezier(.22, .8, .3, 1) both;
}
.app-shell:has(.sidebar-collapse-toggle:checked) .putaway-workspace-backdrop { left: 76px; }
.inward-workspace-heading {
    display: grid;
    grid-template-columns: minmax(27rem, 18rem) minmax(32rem, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #e3e8ef;
}
.inward-workspace-title { min-width: 0; }
.inward-workspace-heading h2 { margin: .12rem 0 .2rem; color: #1d2a40; font-size: 1rem; }
.inward-workspace-heading p { margin: 0; color: #748196; font-size: .67rem; }
.inward-putaway-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(25rem, .72fr); gap: .85rem; align-items: start; }
.putaway-workspace-drawer .inward-workspace-heading { flex: 0 0 auto; }
.putaway-workspace-drawer .inward-putaway-grid {
    flex: 1 1 auto; min-height: 0; align-items: stretch; overflow: hidden;
}
.putaway-workspace-drawer .inward-visual-panel {
    display: flex; flex-direction: column; min-height: 0;
}
.putaway-workspace-drawer .warehouse-3d-host,
.putaway-workspace-drawer .warehouse-3d-canvas,
.putaway-workspace-drawer .inward-visual-state { width: 100%; height: 100%; min-height: 0; }
.putaway-workspace-drawer .warehouse-3d-host,
.putaway-workspace-drawer .inward-visual-state { flex: 1 1 auto; }
.putaway-workspace-drawer .inward-placement-panel { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.inward-visual-panel, .inward-placement-panel { min-width: 0; border: 1px solid #e0e6ee; border-radius: .7rem; overflow: hidden; }
.inward-visual-panel { position: relative; padding: .7rem; background: #f8fafc; }
.inward-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.6rem; margin-bottom: .6rem; }
.inward-panel-heading strong { display: block; margin-top: .12rem; color: #26344a; font-size: .75rem; }
.inward-panel-heading a { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand); font-size: .62rem; font-weight: 750; }
.inward-panel-heading a .nav-icon { width: .65rem; height: .65rem; }
.visual-hierarchy-navigator {
    position: relative; z-index: 12; display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr));
    flex: 1 1 auto; gap: .45rem; max-width: 64rem; padding: 0;
}
.visual-hierarchy-navigator label { display: grid; gap: .25rem; min-width: 0; }
.visual-hierarchy-navigator label > span { color: #66758c; font-size: .6rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.visual-hierarchy-navigator .searchable-select { width: 100%; }
.visual-hierarchy-navigator .searchable-select-input { min-height: 2.15rem; padding: .45rem 1.8rem .45rem .6rem; font-size: .72rem; }
.visual-hierarchy-navigator .searchable-select-dropdown { max-height: 14rem; }
.embedded-visual-controls { top: .75rem; left: .75rem; }
.operation-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid #f0d49b;
    border-radius: .75rem;
    background: #fffaf0;
    color: #754b00;
}
.operation-notice .nav-icon { flex: 0 0 auto; margin-top: .1rem; }
.operation-notice div { display: grid; gap: .2rem; }
.operation-notice span { color: #806332; font-size: .82rem; line-height: 1.45; }
.cycle-count-variance-notice, .cycle-count-match-notice { margin: .15rem 0 .75rem; padding: .7rem .8rem; border-radius: var(--radius-sm); font-size: .7rem; line-height: 1.45; }
.cycle-count-variance-notice { display: grid; gap: .15rem; color: #754b00; background: #fff8e8; border: 1px solid #efd08b; }
.cycle-count-variance-notice span { color: #806332; }
.cycle-count-match-notice { color: #146348; background: var(--success-soft); border: 1px solid #bfe6d5; }
.cycle-count-submit-modal { width: clamp(48rem, 64vw, 78rem); }
.cycle-count-submit-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.cycle-count-submit-summary > div { display: grid; gap: .12rem; }
.cycle-count-submit-summary span, .cycle-count-submit-help { color: var(--text-muted); font-size: .68rem; }
.cycle-count-submit-summary strong { color: var(--text); font-size: .86rem; }
.cycle-count-sku-count { padding: .32rem .55rem; color: #2f55cf !important; background: #edf2ff; border-radius: 99px; font-weight: 700; }
.cycle-count-submit-help { margin: 0 0 .85rem; }
.cycle-count-line-list { display: grid; gap: .65rem; margin-bottom: .8rem; }
.cycle-count-line { padding: .8rem; background: #f8faff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.cycle-count-line > header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.cycle-count-line > header > div { display: flex; align-items: baseline; gap: .45rem; }
.cycle-count-line > header strong { color: var(--text); font-size: .78rem; }
.cycle-count-line > header span { color: var(--text-muted); font-size: .62rem; }
.cycle-count-line > header > .is-match, .cycle-count-line > header > .has-variance { padding: .25rem .45rem; border-radius: 99px; font-weight: 700; }
.cycle-count-line > header > .is-match { color: #147253; background: #e6f7f0; }
.cycle-count-line > header > .has-variance { color: #8b5700; background: #fff1cf; }
.cycle-count-line-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.cycle-count-line-fields label { margin: 0; }
.cycle-count-line-error, .cycle-count-line-warning { display: block; margin-top: .45rem; font-size: .62rem; }
.cycle-count-line-error { color: var(--danger); }
.cycle-count-line-warning { color: #875800; }
.cycle-count-entry-modal {
    width: clamp(58rem, 70vw, 104rem) !important;
}
.cycle-count-modal-close { position: fixed; top: .8rem; right: .85rem; z-index: 84; background: #fff; border-color: var(--border); box-shadow: var(--shadow-xs); }
.cycle-count-entry-intro {
    display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; margin: -.25rem 0 .85rem; padding: .7rem .8rem;
    background: #f3f6ff; border: 1px solid #dce4fa; border-radius: var(--radius-md);
}
.cycle-count-entry-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.2rem; height: 2.2rem; color: var(--brand); background: #e5ebff; border-radius: .6rem; }
.cycle-count-entry-icon .nav-icon { width: .9rem; height: .9rem; }
.cycle-count-entry-intro > div { display: grid; gap: .08rem; }
.cycle-count-entry-intro strong { color: #26344a; font-size: .78rem; }
.cycle-count-entry-intro small { color: var(--text-muted); font-size: .64rem; }
.cycle-count-entry-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; gap: .85rem; padding-bottom: 1rem; }
.cycle-count-entry-section { display: flex; flex-direction: column; min-width: 0; padding: .85rem; background: #fbfcfe; border: 1px solid #dfe5ee; border-radius: var(--radius-md); }
.cycle-count-entry-section > header { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; padding-bottom: .65rem; border-bottom: 1px solid #e5eaf1; }
.cycle-count-entry-section > header > span { display: grid; place-items: center; flex: 0 0 auto; width: 1.7rem; height: 1.7rem; color: var(--brand); background: #e9eeff; border-radius: 50%; font-size: .65rem; font-weight: 800; }
.cycle-count-entry-section > header > div { display: grid; gap: .05rem; }
.cycle-count-entry-section > header strong { color: #25344a; font-size: .76rem; }
.cycle-count-entry-section > header small { color: var(--text-muted); font-size: .6rem; }
.cycle-count-entry-section label { margin-bottom: .65rem; }
.cycle-count-location-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #65758c; }
.cycle-count-stock-list { display: grid; align-content: start; gap: .45rem; flex: 1; min-height: 10rem; max-height: 15rem; overflow-y: auto; padding-right: .15rem; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }
.cycle-count-stock-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(13rem, 1.4fr) auto; align-items: center; gap: .7rem; padding: .65rem; background: #fff; border: 1px solid #dfe5ee; border-radius: .6rem; }
.cycle-count-stock-row.is-selected { background: #f0f4ff; border-color: #8fa8f4; box-shadow: inset 3px 0 0 var(--brand); }
.cycle-count-stock-identity { display: grid; gap: .12rem; min-width: 0; }
.cycle-count-stock-identity strong { overflow: hidden; color: #1f2e44; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cycle-count-stock-identity span { overflow: hidden; color: var(--text-muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.cycle-count-stock-identity span.cycle-count-stock-packing { color: #9a5b12; font-weight: 650; }
.cycle-count-stock-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.cycle-count-stock-row dl div { display: grid; gap: .05rem; }
.cycle-count-stock-row dt { color: #8090a7; font-size: .5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cycle-count-stock-row dd { margin: 0; color: #27364d; font-size: .7rem; font-weight: 750; }
.cycle-count-stock-select, .cycle-count-stock-selected { min-width: 6.7rem; font-size: .6rem; white-space: nowrap; }
.cycle-count-stock-select { min-height: 2rem; padding: .4rem .55rem; color: var(--brand); background: #f7f9ff; border-color: #cbd7f6; box-shadow: none; }
.cycle-count-stock-selected { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; color: #147253; font-weight: 750; }
.cycle-count-stock-selected .nav-icon { width: .65rem; height: .65rem; }
.cycle-count-empty-location { display: flex; flex: 1; align-items: center; justify-content: center; padding: .75rem; color: var(--text-muted); background: #f7f9fc; border: 1px dashed #d7dee9; border-radius: .55rem; font-size: .66rem; text-align: center; }
.cycle-count-other-stock { display: grid; gap: .4rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #dfe5ee; }
.cycle-count-other-stock-label { color: #8090a7; font-size: .56rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cycle-count-other-stock-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; background: #f7f9fc; border: 1px solid #e5eaf1; border-radius: .55rem; }
.cycle-count-other-stock-row .cycle-count-stock-identity { flex: 1; }
.cycle-count-other-stock-qty { flex: 0 0 auto; color: #4a5b74; font-size: .65rem; font-weight: 700; }
.cycle-count-other-stock-discard { flex: 0 0 auto; min-height: 1.8rem; padding: .3rem .6rem; color: var(--danger); font-size: .6rem; font-weight: 700; background: #fff; border: 1px solid #f0c3c3; border-radius: .5rem; box-shadow: none; }
.cycle-count-other-stock-discard:hover { color: #fff; background: var(--danger); border-color: var(--danger); }
.cycle-count-stock-fields, .cycle-count-quantity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.cycle-count-quantity-section textarea { width: 100%; min-height: 5rem; resize: vertical; }
.cycle-count-entry-modal .cycle-count-match-notice { display: grid; gap: .12rem; }
.cycle-count-entry-modal .cycle-count-match-notice span { color: #39745f; }
@media (max-width: 1050px) {
    .cycle-count-entry-grid { grid-template-columns: minmax(0, 1fr); }
    .cycle-count-stock-list { max-height: 18rem; }
}
@media (max-width: 640px) {
    .cycle-count-entry-modal { width: 100vw; }
    .cycle-count-stock-fields, .cycle-count-quantity-fields { grid-template-columns: minmax(0, 1fr); }
    .cycle-count-stock-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cycle-count-stock-row dl { grid-column: 1 / -1; grid-row: 2; }
}
.inward-visual-panel .warehouse-3d-canvas { height: 27rem; border-radius: .55rem; }
.inward-visual-state { display: grid; place-items: center; height: 27rem; color: #738095; background: #f3f6fa; border-radius: .55rem; font-size: .7rem; }
.putaway-workspace-drawer .inward-visual-panel .warehouse-3d-host,
.putaway-workspace-drawer .inward-visual-panel .warehouse-3d-canvas,
.putaway-workspace-drawer .inward-visual-panel .inward-visual-state {
    width: 100%; height: 100%; min-height: 0;
}
.inward-visual-state.error { color: var(--danger); }
.inward-visual-help { padding-top: .5rem; color: #8793a5; font-size: .58rem; text-align: center; }
.placement-success {
    position: absolute; top: 3.6rem; left: 50%; z-index: 4; display: flex; align-items: center; gap: .6rem;
    min-width: 15rem; padding: .65rem .8rem; color: #145f46; background: rgb(237 250 244 / 96%);
    border: 1px solid #bfe8d6; border-radius: .65rem; box-shadow: 0 10px 30px rgb(24 72 55 / 18%);
    transform: translateX(-50%); animation: placement-confirm 1.8s ease both;
}
.placement-success > .nav-icon { width: 1rem; height: 1rem; }
.placement-success div { display: grid; gap: .08rem; }
.placement-success strong { font-size: .7rem; }
.placement-success span { font-size: .6rem; }
.placement-success--confirm { min-width: 19rem; align-items: flex-start; animation: none; }
.placement-success-actions { display: flex; gap: .5rem; margin-top: .45rem; }
.placement-success-actions button {
    padding: .32rem .75rem; font-size: .62rem; font-weight: 700; border-radius: .4rem;
    border: 1px solid #bfe8d6; background: #fff; color: #145f46; cursor: pointer;
}
.placement-success-actions button.primary { background: #15916c; border-color: #15916c; color: #fff; }
.visual-location-detail {
    position: absolute; right: 1.25rem; bottom: 2.2rem; z-index: 3; width: min(20rem, calc(100% - 2.5rem));
    padding: .7rem; color: #dce8f8; background: rgb(20 31 48 / 94%); border: 1px solid rgb(159 181 210 / 25%);
    border-radius: .7rem; box-shadow: 0 12px 30px rgb(5 15 30 / 28%); backdrop-filter: blur(10px);
}
.visual-location-detail > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.visual-location-detail > header span { display: block; color: #90a5c1; font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visual-location-detail > header strong { display: block; margin-top: .1rem; color: #fff; font-size: .75rem; }
.visual-location-detail .icon-button { color: #c8d7ea; border-color: rgb(181 199 222 / 24%); }
.visual-hierarchy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.visual-hierarchy > div { display: grid; gap: .06rem; min-width: 0; padding: .45rem .5rem; background: rgb(255 255 255 / 7%); border-radius: .45rem; }
.visual-hierarchy span { color: #8fa4bf; font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.visual-hierarchy strong { overflow: hidden; color: inherit; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.visual-hierarchy small { overflow: hidden; color: #9fb0c5; font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.visual-bin-stock { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgb(181 199 222 / 18%); }
.visual-bin-stock > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.visual-bin-stock > header span { color: #90a5c1; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.visual-bin-stock > header strong { color: #cbd9ea; font-size: .55rem; font-weight: 600; }
.visual-bin-stock-list { display: grid; gap: .35rem; max-height: 10rem; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.visual-bin-stock-list article { display: grid; gap: .38rem; padding: .48rem .52rem; background: rgb(255 255 255 / 7%); border-radius: .45rem; }
.visual-bin-stock-list article > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; min-width: 0; }
.visual-bin-stock-list article > div strong { overflow: hidden; color: #fff; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.visual-bin-stock-list article > div small { overflow: hidden; max-width: 62%; color: #a9b9cd; font-size: .51rem; text-overflow: ellipsis; white-space: nowrap; }
.visual-bin-stock-list dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: 0; }
.visual-bin-stock-list dl div { display: grid; gap: .05rem; min-width: 0; }
.visual-bin-stock-list dt { color: #8fa4bf; font-size: .46rem; font-weight: 700; text-transform: uppercase; }
.visual-bin-stock-list dd { margin: 0; color: #e4edf8; font-size: .58rem; font-weight: 600; }
.cycle-count-damage-figure dt { color: #e8a34f; }
.cycle-count-damage-figure dd { color: #f4c36b; }
.visual-bin-empty { padding: .55rem; color: #a9b9cd; background: rgb(255 255 255 / 5%); border-radius: .4rem; font-size: .56rem; text-align: center; }
.visual-relocate-action { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; width: 100%; min-height: 1.9rem; margin-top: .45rem; color: #dbe8ff; background: rgb(91 127 214 / 18%); border: 1px solid rgb(143 174 239 / 35%); border-radius: .4rem; font-size: .58rem; font-weight: 700; }
.visual-relocate-action .nav-icon { width: .72rem; height: .72rem; }
.readonly-simulation-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; }
.readonly-simulation-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.visual-relocation-form { display: grid; gap: .5rem; margin: .7rem 0 0; padding: .65rem; color: #dbe5f2; background: #172337; border-top: 1px solid #3a485d; }
.visual-relocation-form > header { display: flex; align-items: center; justify-content: space-between; }
.visual-relocation-form > header button { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; color: #aebbd0; background: transparent; border: 0; }
.visual-relocation-form > header .nav-icon { width: .7rem; height: .7rem; }
.visual-relocation-form > small { color: #9fadc0; font-size: .55rem; }
.visual-relocation-form label { display: grid; gap: .22rem; color: #cbd6e5; font-size: .56rem; font-weight: 650; }
.visual-relocation-form input, .visual-relocation-form textarea, .visual-relocation-form .searchable-select-input { width: 100%; min-height: 2rem; color: #1f2e44; background: #fff; font-size: .62rem; }
.visual-relocation-form > .primary { justify-content: center; width: 100%; min-height: 2.1rem; }
.bin-detail-card > .visual-hierarchy { margin: 0 1rem .85rem; color: #344258; }
.bin-detail-card > .visual-hierarchy > div { background: #f3f6fa; border: 1px solid #e2e8f0; }
.bin-detail-card > .visual-hierarchy span { color: #7c899c; }
.bin-detail-card > .visual-hierarchy small { color: #8b97a8; }
.line-row-updated td { animation: line-updated 1.8s ease both; }
@keyframes line-updated {
    0% { background: #dcf7eb; box-shadow: inset 0 0 0 1px #74d5ad; }
    35% { background: #ecfaf4; }
    100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
}
@keyframes placement-confirm {
    0% { opacity: 0; transform: translate(-50%, -10px) scale(.96); }
    18%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -5px) scale(.98); }
}
.inward-placement-panel { padding: .8rem; background: #fff; }
.placement-panel-header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin: -.8rem -.8rem .75rem; padding: .75rem .8rem; background: #fbfcfe;
    border-bottom: 1px solid #e3e8ef;
}
.placement-panel-header > div { display: grid; gap: .1rem; }
.placement-panel-header > div > span {
    color: #7f8b9e; font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.placement-panel-header > div > strong { color: #26344a; font-size: .8rem; font-weight: 600; }
.placement-summary {
    display: flex; align-items: center; gap: .7rem; margin-bottom: .65rem; padding: .65rem .7rem;
    background: linear-gradient(135deg, #f7f9fd 0%, #eef3fc 100%); border: 1px solid #e0e7f1; border-radius: .7rem;
}
.placement-summary > div { display: grid; gap: .1rem; }
.placement-summary-icon, .recommendation-icon {
    display: grid !important; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem;
    color: #4164d8 !important; background: #e8eeff; border-radius: .55rem;
}
.placement-summary-icon .nav-icon { width: .85rem; height: .85rem; }
.placement-summary strong { color: #1e2c43; font-size: 1rem; font-weight: 650; }
.placement-summary small { color: #7c899c; font-size: .62rem; }
.smart-placement-plan { margin: 0 0 .65rem; padding: .7rem; border: 1px solid #d9e2f0; border-radius: .7rem; background: #fff; box-shadow: 0 .2rem .65rem rgb(32 52 84 / 5%); }
.smart-placement-plan > header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.smart-placement-plan > header div { display: grid; gap: .08rem; }
.smart-placement-plan > header span { color: #718096; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.smart-placement-plan > header strong { color: #26344a; font-size: .82rem; }
.smart-placement-plan > header small { color: #62718a; font-size: .6rem; }
.smart-place-all { width: 100%; min-height: 2.55rem; justify-content: center; margin-top: .65rem; box-shadow: 0 .3rem .8rem rgb(53 89 220 / 18%); }
.smart-placement-plan details { margin-top: .5rem; }
.smart-placement-plan summary { display: flex; align-items: center; justify-content: space-between; color: #41506a; cursor: pointer; font-size: .65rem; font-weight: 600; }
.smart-placement-plan summary span { padding: .12rem .4rem; color: #3154c8; background: #eaf0ff; border-radius: 99px; font-size: .55rem; }
.smart-placement-list { max-height: 24rem; margin-top: .45rem; overflow-y: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: .55rem; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }
.smart-placement-list-header,
.smart-placement-row { display: grid; grid-template-columns: minmax(11rem, 1fr) 6.7rem 4.7rem; align-items: center; gap: .65rem; }
.smart-placement-list-header {
    position: sticky; top: 0; z-index: 2; padding: .5rem .7rem;
    color: #77859a; background: rgb(248 250 252 / 96%); border-bottom: 1px solid #e2e8f0; backdrop-filter: blur(8px);
    font-size: .52rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.smart-placement-list-header span:nth-child(2) { text-align: center; }
.smart-placement-list-header span:last-child { text-align: right; }
.smart-placement-row { min-height: 3.65rem; padding: .55rem .7rem; background: #fff; border-bottom: 1px solid #e8edf3; transition: background-color .16s ease, box-shadow .16s ease; }
.smart-placement-row:last-child { border-bottom: 0; }
.smart-placement-row:hover { background: #f8faff; }
.smart-placement-row.is-staged { background: #effaf5; box-shadow: inset 3px 0 #21a67a; }
.smart-placement-row > div { display: grid; gap: .08rem; min-width: 0; }
.smart-placement-destination strong { display: flex; align-items: center; gap: .4rem; overflow: hidden; color: #26364d; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.smart-placement-dot { flex: 0 0 auto; width: .38rem; height: .38rem; background: #5f7ee6; border: 2px solid #e8eeff; border-radius: 50%; box-sizing: content-box; }
.smart-placement-destination small { color: #7f8da1; font-size: .54rem; }
.smart-placement-quantity { display: block; min-width: 0; }
.smart-placement-input-shell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; background: #fff; border: 1px solid #cbd6e6; border-radius: .5rem; transition: border-color .15s ease, box-shadow .15s ease; }
.smart-placement-input-shell:focus-within { border-color: #5578ea; box-shadow: 0 0 0 3px rgb(69 101 223 / 12%); }
.smart-placement-quantity input { width: 100%; min-width: 0; min-height: 2.15rem; padding: .3rem .15rem .3rem .4rem; border: 0; border-radius: 0; outline: 0; color: #27364d; background: transparent; font-size: .65rem; font-weight: 650; text-align: left; }
.smart-placement-quantity input:disabled { color: #24664f; background: #f7fcfa; opacity: 1; }
.smart-placement-quantity small { padding: 0 .4rem 0 .25rem; color: #8793a5; font-size: .5rem; white-space: nowrap; }
.smart-placement-actions { display: flex !important; justify-content: flex-end; grid-auto-flow: column; gap: .35rem !important; }
.smart-placement-actions .row-icon-button { display: inline-grid !important; place-items: center !important; width: 2.1rem; min-width: 2.1rem; height: 2.1rem; min-height: 2.1rem; padding: 0 !important; line-height: 1; background: #fff; }
.smart-placement-actions .row-icon-button .nav-icon { display: block; width: .82rem; height: .82rem; margin: 0; }
.smart-placement-actions .row-icon-button:first-child { color: #2452c7; border-color: #bfcdea; background: #f7f9ff; }
.smart-placement-actions .row-icon-button:first-child:hover { color: #fff; border-color: #3159cf; background: #3159cf; }
.smart-placement-actions .staged-action { color: #197456; border-color: #9bd9c3; background: #e4f7ef; }
.smart-placement-actions .discard-action { color: #68768a; }
.smart-placement-actions .discard-action:hover { color: #b42318; border-color: #f1b5b1; background: #fff2f1; }
.smart-placement-committed { display: inline-flex; align-items: center; gap: .25rem; color: #197456; font-size: .58rem; font-weight: 700; }
.smart-placement-committed .nav-icon { width: .8rem; height: .8rem; }
.smart-placement-undo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .45rem; padding: .38rem .5rem; color: #526176; background: #f4f7fb; border: 1px solid #e0e7f0; border-radius: .45rem; font-size: .58rem; }
.smart-placement-undo button { display: inline-flex; align-items: center; gap: .25rem; min-height: 1.75rem; padding: .2rem .45rem; color: #3154c8; background: #fff; border: 1px solid #cfd9e8; border-radius: .38rem; font-size: .58rem; font-weight: 700; }
.smart-placement-undo .nav-icon { width: .75rem; height: .75rem; }
.smart-placement-shortfall { margin: .55rem 0 0; padding: .45rem .55rem; color: #8a5310; background: #fff4df; border-radius: .45rem; font-size: .6rem; }
@media (max-width: 600px) {
  .smart-placement-list-header { display: none; }
  .smart-placement-row { grid-template-columns: minmax(0, 1fr) auto; }
  .smart-placement-quantity { grid-column: 1; }
  .smart-placement-actions { grid-column: 2; grid-row: 1 / span 2; }
  .smart-placement-list { max-height: 18rem; }
}
.inward-placement-panel > button { width: 100%; min-height: 2.45rem; justify-content: center; margin: .45rem 0; }
.inward-placement-panel .breadcrumb-path {
    margin: .25rem 0 .55rem; padding: 0 .15rem; color: #66758c; font-size: .62rem; line-height: 1.4;
}
.location-options-toggle { color: #41506a; background: #f9fbfd; border-color: #d6deea; box-shadow: none; }
.location-options-toggle .nav-icon { width: .75rem; height: .75rem; }
.ineligible-locations { margin: .35rem 0 .65rem; padding: 0 .55rem; border: 1px solid #e6eaf0; border-radius: .55rem; background: #fbfcfe; }
.ineligible-locations summary {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .15rem; color: #59677d; cursor: pointer; font-size: .68rem; font-weight: 500;
}
.ineligible-locations summary span {
    display: inline-grid; place-items: center; min-width: 1.7rem; padding: .15rem .4rem;
    color: #8a5310; background: #fff4df; border-radius: 99px; font-size: .58rem;
}
.ineligible-locations ul { max-height: 8rem; margin: 0 0 .6rem; padding-left: 1.25rem; overflow: auto; color: #69778c; font-size: .62rem; }
.inward-placement-panel .table-wrap { max-height: 14rem; margin: .5rem 0; overflow: auto; box-shadow: none; }
.inward-placement-panel .table-wrap tbody tr { height: 3.5rem; }
.inward-placement-panel .table-wrap .location-code {
    display: block; max-width: 11.5rem; overflow: hidden; color: #34445c;
    font: inherit; font-size: .62rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap;
}
.inward-placement-panel .field-grid { grid-template-columns: 1fr; margin-top: .65rem; }
.placement-controls {
    margin-top: .7rem; padding: .75rem; border: 1px solid #dfe6ef; border-radius: .7rem; background: #fbfcfe;
}
.placement-controls > header { display: grid; gap: .12rem; }
.placement-controls > header span { color: #2f3d53; font-size: .75rem; font-weight: 600; }
.placement-controls > header small { color: #8490a2; font-size: .6rem; }
.placement-fields { gap: .6rem; }
.placement-fields label { display: grid !important; grid-template-columns: 1fr !important; gap: .35rem !important; margin: 0 !important; font-size: .67rem; font-weight: 550; }
.placement-fields input, .placement-fields .searchable-select { width: 100%; min-width: 0; }
.inward-placement-panel footer { display: flex; margin-top: .7rem; padding-top: .65rem; border-top: 1px solid #e5eaf0; }
.placement-confirm-button { width: 100%; justify-content: center; }
.placement-confirm-button .nav-icon { width: .8rem; height: .8rem; }

/* Workflow-oriented dashboard */
.control-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: .2rem 0 1.2rem; }
.control-overline { margin: 0 0 .4rem; color: var(--brand); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.control-header h1 { font-size: clamp(1.7rem, 3vw, 2.45rem); }
.control-header > div:first-child > p:last-child { margin: .55rem 0 0; color: var(--text-muted); font-size: .85rem; }
.control-header-actions { display: flex; gap: .55rem; flex: none; }
.control-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.55rem; padding: .6rem .85rem; border-radius: .6rem; font-size: .72rem; font-weight: 750; }
.control-button:hover { text-decoration: none; }
.control-button .nav-icon { width: .9rem; height: .9rem; }
.control-button.primary { color: white; background: var(--brand); border: 1px solid var(--brand); box-shadow: 0 8px 18px -10px rgb(49 87 213 / .8); }
.control-button.secondary { color: #435169; background: white; border: 1px solid #ccd6e3; }
.command-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr); gap: .9rem; }
.workflow-launcher, .attention-centre, .metric-section, .tool-panel, .management-panel {
    background: white; border: 1px solid #dfe5ee; border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.workflow-launcher { padding: clamp(1rem, 2vw, 1.4rem); }
.command-section-heading { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.heading-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .7rem; }
.heading-icon.blue { color: var(--brand); background: #edf2ff; }
.heading-icon .nav-icon { width: 1rem; height: 1rem; }
.command-section-heading p, .attention-heading p, .metric-section-heading p, .tool-panel-heading p { margin: 0 0 .15rem; color: #8a96a8; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.command-section-heading h2, .attention-heading h2, .metric-section-heading h2, .tool-panel-heading h2 { margin: 0; color: #26344a; font-size: .95rem; }
.workflow-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.workflow-action { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .75rem; min-height: 10rem; padding: 1rem; color: var(--text); border: 1px solid transparent; border-radius: .8rem; }
.workflow-action:hover { text-decoration: none; transform: translateY(-1px); }
.workflow-action.receive { background: linear-gradient(145deg, #eef3ff, #f8faff); border-color: #dce5ff; }
.workflow-action.dispatch { background: linear-gradient(145deg, #eaf8fc, #f7fcfd); border-color: #d5edf4; }
.workflow-action.inventory { background: linear-gradient(145deg, #f4effc, #fbf9fe); border-color: #e8ddf7; }
.workflow-action-icon { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; color: #3157d5; background: rgb(255 255 255 / .8); border: 1px solid rgb(255 255 255 / .9); border-radius: .7rem; box-shadow: var(--shadow-xs); }
.workflow-action.dispatch .workflow-action-icon { color: #177899; }
.workflow-action.inventory .workflow-action-icon { color: #7952b3; }
.workflow-action-icon .nav-icon { width: 1.05rem; height: 1.05rem; }
.workflow-action-copy { display: grid; align-content: start; gap: .3rem; min-width: 0; }
.workflow-action-copy strong { color: #26344a; font-size: .77rem; }
.workflow-action-copy small { color: #718096; font-size: .64rem; line-height: 1.45; }
.round-arrow { grid-column: 1 / -1; display: grid; place-items: center; align-self: end; width: 1.75rem; height: 1.75rem; margin-left: auto; color: #64748b; background: rgb(255 255 255 / .78); border-radius: 50%; }
.round-arrow .nav-icon { width: .7rem; height: .7rem; }
.attention-centre { display: flex; flex-direction: column; padding: 1.1rem; }
.attention-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 1px solid #e8ecf2; }
.attention-total { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .45rem; color: #a15e08; background: #fff4df; border-radius: .65rem; font-size: .78rem; font-weight: 800; }
.attention-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem 0; color: var(--text); border-bottom: 1px solid #edf0f4; }
.attention-item:hover { text-decoration: none; }
.attention-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .58rem; }
.attention-icon.amber { color: #a86408; background: #fff4df; }
.attention-icon.violet { color: #7652b2; background: #f2ebfb; }
.attention-icon .nav-icon { width: .85rem; height: .85rem; }
.attention-item > span:nth-child(2) { display: grid; gap: .15rem; }
.attention-item strong { color: #39465b; font-size: .7rem; }
.attention-item small { color: #8994a5; font-size: .59rem; }
.attention-item b { color: #25334a; font-size: .9rem; }
.attention-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .8rem; color: var(--brand); font-size: .65rem; font-weight: 700; }
.attention-footer:hover { text-decoration: none; }
.attention-footer .nav-icon { width: .7rem; height: .7rem; }
.attention-empty { display: flex; align-items: center; gap: .65rem; padding: 1rem 0; color: #8994a5; }
.attention-empty > .nav-icon { width: 1.2rem; height: 1.2rem; }
.attention-empty span { display: grid; gap: .15rem; }
.attention-empty strong { color: #566378; font-size: .68rem; }
.attention-empty small { font-size: .59rem; }
.metric-section { margin-top: .9rem; padding: 1.1rem; }
.metric-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.metric-section-heading > span { display: inline-flex; align-items: center; gap: .4rem; color: #7e8a9c; font-size: .62rem; }
.metric-section-heading i { width: .38rem; height: .38rem; background: #1ca578; border-radius: 50%; }
.metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #e3e8ef; border-radius: .75rem; overflow: hidden; }
.metric-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 6.5rem; padding: .9rem 1rem; color: var(--text); background: #fbfcfe; border-right: 1px solid #e3e8ef; }
.metric-item:last-child { border-right: 0; }
.metric-item:hover { background: white; text-decoration: none; }
.metric-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; }
.metric-icon.blue { color: var(--brand); background: #edf2ff; }
.metric-icon.cyan { color: #16799b; background: #e9f8fb; }
.metric-icon.violet { color: #7753b3; background: #f2ebfb; }
.metric-icon .nav-icon { width: 1rem; height: 1rem; }
.metric-copy { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .05rem .55rem; min-width: 0; }
.metric-copy small { grid-column: 1 / -1; color: #7d899c; font-size: .59rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.metric-copy strong { color: #1e2c43; font-size: 1.45rem; line-height: 1; }
.metric-copy em { color: #8591a3; font-size: .61rem; font-style: normal; }
.metric-item > .nav-icon { width: .7rem; height: .7rem; color: #9ca8b9; }
.dashboard-tools-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, .7fr); gap: .9rem; margin-top: .9rem; }
.tool-panel, .management-panel { padding: 1.1rem; }
.tool-panel-heading { margin-bottom: .8rem; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.tool-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; min-height: 7rem; padding: .8rem; color: var(--text); background: #fafbfd; border: 1px solid #e4e9f0; border-radius: .7rem; }
.tool-link:hover { background: white; border-color: #c8d2df; text-decoration: none; }
.tool-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .62rem; }
.tool-icon.green { color: #147b63; background: #e9f7f2; }
.tool-icon.amber { color: #a46208; background: #fff4df; }
.tool-icon.rose { color: #a6496b; background: #fcecf2; }
.tool-icon .nav-icon { width: .9rem; height: .9rem; }
.tool-link > span:nth-child(2) { display: grid; align-content: start; gap: .2rem; }
.tool-link strong { color: #354259; font-size: .68rem; }
.tool-link small { color: #8692a3; font-size: .59rem; line-height: 1.4; }
.tool-link > .nav-icon { grid-column: 1 / -1; align-self: end; width: .7rem; height: .7rem; margin-left: auto; color: #9ba7b7; }
.management-list { display: grid; }
.management-list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .7rem 0; color: var(--text); border-bottom: 1px solid #edf0f4; }
.management-list a:last-child { border-bottom: 0; }
.management-list a:hover { text-decoration: none; }
.management-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: #64748b; background: #f1f4f8; border-radius: .55rem; }
.management-icon .nav-icon { width: .82rem; height: .82rem; }
.management-list a > span:nth-child(2) { display: grid; gap: .15rem; }
.management-list strong { color: #3b485e; font-size: .68rem; }
.management-list small { color: #8995a6; font-size: .58rem; }
.management-list a > .nav-icon { width: .68rem; height: .68rem; color: #9ba7b7; }

/* 2026 light theme refresh: crisp contrast, legible 100% zoom sizing, and semantic colour. */
body {
    background:
        radial-gradient(circle at 78% -8%, rgb(62 104 225 / .075), transparent 29rem),
        var(--canvas);
}

.app-sidebar {
    background:
        radial-gradient(circle at -8% 3%, rgb(74 108 224 / .22), transparent 13rem),
        radial-gradient(circle at 112% 62%, rgb(36 174 166 / .1), transparent 15rem),
        linear-gradient(170deg, #edf3ff 0%, #fbfdff 42%, #f1f7ff 100%);
    border-right-color: #d5dfed;
    box-shadow: 10px 0 34px -28px rgb(25 45 78 / .42);
}

.brand-mark {
    background: linear-gradient(145deg, #587cf0 0%, #3159d9 58%, #2748b7 100%);
    box-shadow: 0 10px 22px -10px rgb(39 72 183 / .8);
}

.brand-name { color: #13213a; font-size: 1.06rem; }
.brand small { color: #687990; font-size: .69rem; }
.nav-section-label { color: #6f7f95; font-size: .68rem; }

.sidebar-nav summary {
    min-height: 2.7rem;
    color: #34445c;
    font-size: .86rem;
}

.sidebar-nav summary > .nav-icon,
.nav-link-top > .nav-icon {
    width: 1.78rem;
    height: 1.78rem;
    padding: .4rem;
    color: #3159d9;
    background: #e5edff;
    border: 1px solid #d5e0ff;
    border-radius: .55rem;
    stroke-width: 2;
}

.sidebar-nav-group:nth-of-type(2) summary > .nav-icon { color: #087d72; background: #e0f6f2; border-color: #c6ebe4; }
.sidebar-nav-group:nth-of-type(3) summary > .nav-icon { color: #7750b8; background: #f0e9fb; border-color: #e4d7f7; }
.sidebar-nav-group:nth-of-type(4) summary > .nav-icon { color: #b05d10; background: #fff0dc; border-color: #f4ddbd; }
.sidebar-nav-group:nth-of-type(5) summary > .nav-icon { color: #0f7794; background: #e2f5fa; border-color: #cbeaf2; }
.sidebar-nav-group:nth-of-type(6) summary > .nav-icon { color: #3159d9; background: #e5edff; border-color: #d5e0ff; }
.sidebar-nav-group:nth-of-type(7) summary > .nav-icon { color: #a03f68; background: #fae8ef; border-color: #f1d3df; }
.sidebar-nav-group:nth-of-type(8) summary > .nav-icon { color: #7750b8; background: #f0e9fb; border-color: #e4d7f7; }
.sidebar-nav-group:nth-of-type(9) summary > .nav-icon { color: #147457; background: #e4f5ee; border-color: #cde9dd; }

.sidebar-nav summary:hover {
    color: #172840;
    background: rgb(255 255 255 / .72);
}

.nav-link {
    min-height: 2.35rem;
    color: #55667e;
    font-size: .84rem;
}

.nav-link-top { min-height: 2.75rem; padding-left: .45rem; }
.nav-link:hover { color: #172840; background: rgb(255 255 255 / .76); }
.nav-link.active {
    color: #2449bd;
    background: rgb(255 255 255 / .88);
    border-left-color: #4e72e8;
    box-shadow: 0 4px 14px -10px rgb(35 70 184 / .55);
}

.topbar {
    height: auto;
    min-height: 4.5rem;
    padding: .65rem clamp(1.25rem, 3vw, 2.25rem);
    background: rgb(255 255 255 / .9);
    border-bottom-color: #dce4ef;
    box-shadow: 0 6px 22px -20px rgb(30 48 78 / .5);
}

.topbar-title { color: #34445b; font-size: .86rem; }
.system-indicator { background: #0ca678; border-color: #ccf2e4; box-shadow: 0 0 0 3px rgb(12 166 120 / .08); }
.environment-badge { padding: .36rem .65rem; font-size: .69rem; }
.topbar-user-copy strong { font-size: .82rem; }
.topbar-user-copy small { font-size: .69rem; }
.avatar { color: #274bbd; background: #e7edff; border: 1px solid #d7e1ff; }

.global-search-field {
    min-height: 2.75rem;
    padding-inline: .9rem;
    background: #f3f6fa;
    border-color: #e0e6ef;
}
.global-search-field input { font-size: .86rem; }

/* Submenu links use meaningful destination icons in their parent section colour. */
.sidebar-nav-group { --submenu-accent: #3159d9; }
.sidebar-nav-group:nth-of-type(2) { --submenu-accent: #087d72; }
.sidebar-nav-group:nth-of-type(3) { --submenu-accent: #7750b8; }
.sidebar-nav-group:nth-of-type(4) { --submenu-accent: #b05d10; }
.sidebar-nav-group:nth-of-type(5) { --submenu-accent: #0f7794; }
.sidebar-nav-group:nth-of-type(6) { --submenu-accent: #3159d9; }
.sidebar-nav-group:nth-of-type(7) { --submenu-accent: #a03f68; }
.sidebar-nav-group:nth-of-type(8) { --submenu-accent: #7750b8; }
.sidebar-nav-group:nth-of-type(9) { --submenu-accent: #147457; }
.nav-flyout .nav-link > .nav-icon {
    flex: 0 0 auto; width: .9rem; height: .9rem; color: var(--submenu-accent); opacity: .78;
}
.nav-flyout .nav-link:hover > .nav-icon,
.nav-flyout .nav-link.active > .nav-icon { opacity: 1; }

main {
    max-width: 1540px;
    background:
        radial-gradient(circle at 72% -6%, rgb(70 111 229 / .065), transparent 31rem),
        var(--canvas);
}

.site-footer { max-width: 1540px; font-size: .74rem; }
.page-header p:not(.eyebrow), .subtitle { font-size: .94rem; }
.eyebrow, .control-overline { font-size: .7rem; }
.portal-page-title p { font-size: .66rem; }
.portal-page-title h1 { font-size: clamp(1.35rem, 2vw, 1.72rem); }
.portal-page-title > div > span { color: #5f6f86; font-size: .8rem; }

button, input, select, textarea { font-size: .9rem; }
label, .modal label, .form-card label { color: #43536a; font-size: .84rem; }
table { font-size: .86rem; }
th { color: #586980; font-size: .7rem; }
.pager, .path-cell, .breadcrumb-path { font-size: .82rem; }
.status { font-size: .72rem; }
.actions button, .actions a { font-size: .78rem; }

.form-card, .state-card, .table-wrap {
    border-color: #d8e1ec;
    box-shadow: var(--shadow-xs);
}
.table-wrap thead th { background: #f5f8fc; }
tbody tr:hover { background: #f1f6ff; }

.control-header { margin-top: .4rem; margin-bottom: 1.5rem; }
.control-header h1 { color: #13213a; font-size: clamp(2rem, 3vw, 2.75rem); }
.control-header > div:first-child > p:last-child { color: #5b6c84; font-size: .96rem; }
.control-button { min-height: 2.9rem; padding: .72rem 1rem; font-size: .82rem; }
.control-button.primary { box-shadow: 0 12px 24px -12px rgb(49 89 217 / .72); }

.workflow-launcher, .attention-centre, .metric-section, .tool-panel, .management-panel {
    border-color: #d9e2ed;
    box-shadow: var(--shadow-sm);
}

.workflow-launcher { border-top: 3px solid #5578e5; }
.attention-centre { border-top: 3px solid #e2a437; }
.tool-panel { border-top: 3px solid #c15a82; }
.management-panel { border-top: 3px solid #5f7bd8; }
.metric-section { border-top: 3px solid #17a57c; }

.heading-icon { width: 2.65rem; height: 2.65rem; }
.heading-icon.blue { color: #3159d9; background: #e7eeff; border: 1px solid #d6e1ff; }
.heading-icon .nav-icon { width: 1.15rem; height: 1.15rem; stroke-width: 2; }

.command-section-heading p, .attention-heading p, .metric-section-heading p, .tool-panel-heading p {
    color: #718096;
    font-size: .66rem;
}
.command-section-heading h2, .attention-heading h2, .metric-section-heading h2, .tool-panel-heading h2 {
    color: #1d2d45;
    font-size: 1.08rem;
}

.workflow-actions { gap: .85rem; }
.workflow-action {
    min-height: 11rem;
    padding: 1.1rem;
    border-width: 1px;
    box-shadow: 0 8px 22px -20px rgb(24 42 70 / .48);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.workflow-action:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -19px rgb(24 42 70 / .45); }
.workflow-action.receive { background: linear-gradient(145deg, #e9f0ff, #f8faff); border-color: #cfdbff; }
.workflow-action.dispatch { background: linear-gradient(145deg, #e2f6f8, #f7fcfd); border-color: #c6e8ed; }
.workflow-action.inventory { background: linear-gradient(145deg, #f0e9fa, #fbf8fe); border-color: #dfd0f3; }
.workflow-action-icon { width: 2.75rem; height: 2.75rem; border-color: rgb(255 255 255 / .95); }
.workflow-action-icon .nav-icon { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.workflow-action-copy strong { color: #22334b; font-size: .91rem; }
.workflow-action-copy small { color: #5f7088; font-size: .76rem; line-height: 1.5; }
.round-arrow { width: 2rem; height: 2rem; color: #4f6078; box-shadow: var(--shadow-xs); }

.attention-total { min-width: 2.25rem; height: 2.25rem; font-size: .88rem; }
.attention-item strong, .attention-empty strong { font-size: .81rem; }
.attention-item small, .attention-empty small { color: #708097; font-size: .71rem; }
.attention-footer { font-size: .76rem; }

.metric-section-heading > span { color: #62738a; font-size: .72rem; }
.metric-item { background: #f8fafd; }
.metric-copy small { color: #687990; font-size: .68rem; }
.metric-copy em { color: #6e7e93; font-size: .71rem; }

.tool-link { min-height: 7.5rem; background: #f8fafd; border-color: #dce4ee; }
.tool-link strong, .management-list strong { color: #2c3c54; font-size: .8rem; }
.tool-link small, .management-list small { color: #6e7e93; font-size: .7rem; }
.tool-icon, .management-icon { border: 1px solid rgb(41 58 86 / .06); }
.management-list a { padding: .82rem 0; }
.management-list a:nth-child(1) .management-icon { color: #3159d9; background: #e7eeff; }
.management-list a:nth-child(2) .management-icon { color: #087d72; background: #e0f6f2; }
.management-list a:nth-child(3) .management-icon { color: #7750b8; background: #f0e9fb; }

@media (max-width: 1180px) {
    .workflow-action-copy strong { font-size: .86rem; }
}

@media (max-width: 600px) {
    .control-header h1 { font-size: 2rem; }
    .workflow-action { min-height: 8rem; }
}

/* Dialogs and authentication */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end;
    padding: 0; overflow: hidden; background: rgb(12 20 35 / .48); backdrop-filter: blur(3px);
    animation: modal-backdrop-in .18s ease-out both;
}
.modal-backdrop:has(> .barcode-scan-modal) { z-index: 100; }
.modal-backdrop.is-hidden { display: none !important; }
html:has(.modal-backdrop), body:has(.modal-backdrop) {
    overflow: hidden;
    overscroll-behavior: none;
}
.modal {
    width: clamp(44rem, 60vw, 76rem); max-width: 100vw; height: 100dvh; max-height: 100dvh;
    display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; touch-action: pan-y;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--surface); border: 0; border-left: 1px solid var(--border);
    border-radius: 1.15rem 0 0 1.15rem; box-shadow: -22px 0 70px rgb(10 20 38 / .24);
    animation: modal-drawer-in .24s cubic-bezier(.22, .8, .3, 1) both;
    scrollbar-gutter: stable;
}
.modal h2 {
    position: sticky; top: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)); z-index: 3;
    margin: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) 1.25rem;
    padding: 1.35rem clamp(1.25rem, 2.5vw, 2rem) 1rem;
    color: #17243a; background: linear-gradient(120deg, rgb(255 255 255 / .98), rgb(244 247 255 / .97)); border-bottom: 1px solid #d9e3f0;
    backdrop-filter: blur(10px);
}
.modal > footer {
    position: sticky; bottom: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)); z-index: 3;
    flex: 0 0 auto;
    margin: auto calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem));
    padding: 1rem clamp(1.25rem, 2.5vw, 2rem);
    background: linear-gradient(120deg, rgb(255 255 255 / .98), rgb(247 249 255 / .97)); box-shadow: 0 -8px 22px rgb(25 43 72 / .07);
    backdrop-filter: blur(10px);
}

/* Role permission editor: searchable, compact access matrix. */
.modal.role-permissions-modal {
    width: clamp(50rem, 72vw, 72rem); padding: 0; overflow: hidden;
    background: #f7f9fc;
}
.role-permissions-header {
    z-index: 4; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    padding: 1rem 1.15rem; background: linear-gradient(115deg, #fff, #f3f6ff);
    border-bottom: 1px solid #dbe3ef;
}
.role-permissions-header > span {
    display: inline-grid; place-items: center; width: 2.45rem; height: 2.45rem;
    color: #3159d9; background: #edf2ff; border: 1px solid #d5e0fb; border-radius: .68rem;
}
.role-permissions-header > span .nav-icon { width: .95rem; height: .95rem; }
.role-permissions-header > div { display: grid; gap: .04rem; min-width: 0; }
.role-permissions-header small { color: #5f78bd; font-size: .52rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.role-permissions-header h2 {
    position: static; margin: 0; padding: 0; color: #1f2e45; background: none; border: 0;
    font-size: 1rem; line-height: 1.25; backdrop-filter: none;
}
.role-permissions-header p { margin: .08rem 0 0; color: #728096; font-size: .64rem; }
.role-permissions-close {
    display: inline-grid; place-items: center; width: 2.15rem; min-width: 2.15rem; height: 2.15rem; min-height: 2.15rem;
    padding: 0; color: #68768b; background: #fff; border-color: #d5deea; border-radius: .58rem; box-shadow: none;
}
.role-permissions-close .nav-icon { width: .78rem; height: .78rem; }
.role-permissions-toolbar {
    z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem;
    padding: .7rem 1.15rem; background: rgb(247 249 252 / .96); border-bottom: 1px solid #e0e6ef;
    backdrop-filter: blur(8px);
}
.modal.role-permissions-modal .role-permissions-toolbar > label {
    position: relative; display: flex; align-items: center; gap: 0; min-width: 0; margin: 0;
}
.role-permissions-toolbar label > .nav-icon {
    position: absolute; left: .7rem; z-index: 1; width: .78rem; height: .78rem; color: #718097; pointer-events: none;
}
.modal.role-permissions-modal .role-permissions-toolbar input {
    width: 100%; min-height: 2.45rem; padding-left: 2rem; background: #fff;
}
.role-permissions-toolbar > span {
    padding: .38rem .62rem; color: #64738a; background: #fff; border: 1px solid #dce3ed;
    border-radius: 99px; font-size: .61rem; font-weight: 680; white-space: nowrap;
}
.role-permissions-toolbar > span strong { color: #3159d9; }
.role-permission-groups {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .8rem 1.15rem 1rem;
    scrollbar-gutter: stable; overscroll-behavior: contain;
}
.role-permission-group {
    overflow: hidden; margin-bottom: .7rem; background: #fff; border: 1px solid #dce4ee;
    border-radius: .72rem; box-shadow: 0 7px 18px -18px rgb(29 48 80 / .48);
}
.role-permission-group:last-child { margin-bottom: 0; }
.role-permission-group > header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .52rem .65rem; background: linear-gradient(110deg, #f8faff, #fbfcfe); border-bottom: 1px solid #e2e8f0;
}
.role-permission-group > header > div { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.role-permission-group > header strong { color: #30405a; font-size: .68rem; letter-spacing: .04em; text-transform: capitalize; }
.role-permission-group > header span { color: #8490a1; font-size: .56rem; }
.role-permission-group > header em {
    color: #3159c9; font-size: .56rem; font-style: normal; font-weight: 750; white-space: nowrap;
}
.role-permission-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; padding: .55rem; }
.modal.role-permissions-modal label.role-permission-option {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem;
    min-height: 0; margin: 0; padding: .52rem .58rem; color: #3d4b61; background: #f9fbfe;
    border: 1px solid #e1e7f0; border-radius: .58rem; cursor: pointer;
}
.modal.role-permissions-modal label.role-permission-option:hover { background: #f2f6ff; border-color: #c8d5eb; }
.modal.role-permissions-modal label.role-permission-option:has(input:checked) { background: #f1f5ff; border-color: #c9d6f5; }
.role-permission-option > input { margin-top: .12rem; }
.role-permission-option > span { display: grid; gap: .08rem; min-width: 0; }
.role-permission-option strong { overflow: hidden; color: #35445c; font-size: .66rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-option code { overflow: hidden; color: #4662ae; font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-option small {
    display: -webkit-box; overflow: hidden; color: #7b8799; font-size: .56rem; line-height: 1.35;
    -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.role-permissions-empty {
    display: grid; justify-items: center; gap: .18rem; padding: 3rem 1rem; color: #78869a; text-align: center;
}
.role-permissions-empty .nav-icon { width: 1.25rem; height: 1.25rem; margin-bottom: .35rem; }
.role-permissions-empty strong { color: #405069; font-size: .75rem; }
.role-permissions-empty span { font-size: .62rem; }
.modal.role-permissions-modal > footer {
    position: static; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: .75rem;
    margin: 0; padding: .75rem 1.15rem max(.75rem, env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #dce4ee; box-shadow: 0 -8px 20px rgb(27 45 75 / .06);
}
.role-permissions-modal > footer > span { color: #748197; font-size: .61rem; font-weight: 680; }
.role-permissions-modal > footer > div { display: flex; gap: .45rem; }
.role-permissions-modal > footer button { min-height: 2.3rem; padding-inline: .85rem; }

@media (max-width: 760px) {
    .modal.role-permissions-modal { width: 100vw; }
    .role-permissions-header { padding: .85rem; }
    .role-permissions-toolbar { grid-template-columns: 1fr; gap: .45rem; padding: .65rem .85rem; }
    .role-permissions-toolbar > span { justify-self: start; }
    .role-permission-groups { padding: .65rem .85rem .85rem; }
    .role-permission-options { grid-template-columns: 1fr; }
    .modal.role-permissions-modal > footer { align-items: stretch; flex-direction: column; padding-inline: .85rem; }
    .role-permissions-modal > footer > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-permissions-modal > footer button { width: 100%; }
}

/* Warehouse location editor: compact, task-focused fields and binary choices. */
.modal.warehouse-location-modal {
    width: clamp(40rem, 48vw, 48rem);
}
.warehouse-location-modal h2 {
    margin-bottom: 1rem;
    font-size: 1.08rem;
}
.warehouse-location-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1rem;
}
.warehouse-location-modal .warehouse-location-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
    margin: 0;
    color: #43516a;
    font-size: .72rem;
    font-weight: 720;
    letter-spacing: .01em;
}
.warehouse-location-modal .warehouse-location-field-wide {
    grid-column: 1 / -1;
}
.warehouse-location-modal .warehouse-location-field > input,
.warehouse-location-modal .warehouse-location-field .searchable-select-input {
    min-height: 2.45rem;
    padding: .55rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
}
.warehouse-location-modal .warehouse-location-field > input::placeholder,
.warehouse-location-modal .warehouse-location-field .searchable-select-input::placeholder {
    color: #94a1b4;
}
.warehouse-location-settings {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .1rem;
    padding-top: .85rem;
    border-top: 1px solid #e4e9f0;
}
.warehouse-location-setting {
    min-width: 0;
    margin: 0;
    padding: .75rem;
    background: #fbfcff;
    border: 1px solid #e1e7f0;
    border-radius: .7rem;
}
.warehouse-location-setting legend {
    padding: 0;
    color: #344159;
    font-size: .72rem;
    font-weight: 750;
}
.warehouse-location-setting p {
    min-height: 2.2em;
    margin: .2rem 0 .65rem;
    color: #7a879a;
    font-size: .62rem;
    line-height: 1.4;
}
.warehouse-location-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
    padding: .2rem;
    background: #eef2f7;
    border: 1px solid #dfe5ed;
    border-radius: .55rem;
}
.warehouse-location-modal .warehouse-location-choice label:has(> input[type="radio"]) {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: .4rem;
    box-shadow: none;
}
.warehouse-location-choice input[type="radio"] {
    position: absolute;
    width: 1px !important;
    min-width: 1px;
    height: 1px;
    min-height: 1px;
    opacity: 0;
    pointer-events: none;
}
.warehouse-location-choice label > span {
    display: grid;
    place-items: center;
    min-height: 2rem;
    padding: .35rem .55rem;
    color: #68768b;
    border-radius: .4rem;
    font-size: .68rem;
    font-weight: 720;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.warehouse-location-choice input:checked + span {
    color: var(--brand);
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.warehouse-location-choice input:focus-visible + span {
    box-shadow: 0 0 0 3px rgb(49 87 213 / .16);
}
.warehouse-location-modal .warehouse-location-check,
.warehouse-location-modal .warehouse-location-check:has(> input[type="checkbox"]) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 0;
    margin: 0;
    padding: .7rem .75rem;
    color: #43516a;
    background: #f8faff;
    border: 1px solid #dfe6f1;
    border-radius: .65rem;
}
.warehouse-location-check > span {
    display: grid;
    gap: .08rem;
}
.warehouse-location-check strong {
    color: #344159;
    font-size: .7rem;
    font-weight: 740;
}
.warehouse-location-check small {
    color: #7a879a;
    font-size: .6rem;
    font-weight: 500;
    line-height: 1.4;
}
@media (max-width: 680px) {
    .warehouse-location-form,
    .warehouse-location-settings {
        grid-template-columns: 1fr;
    }
    .warehouse-location-modal .warehouse-location-field-wide,
    .warehouse-location-modal .warehouse-location-check {
        grid-column: auto;
    }
    .warehouse-location-setting p {
        min-height: 0;
    }
}
@keyframes modal-drawer-in {
    from { opacity: .7; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
/* Wide data-entry forms (many-column line-item grids) need more than the standard drawer's
   60vw/76rem cap - this variant takes almost the full window width while still sliding in from
   the right edge like every other drawer. */
.modal.full-window-drawer { width: 96vw; max-width: 96vw; }

/* SKU editor: guided sections, compact controls, and a quiet live policy summary. */
.modal.full-window-drawer.sku-editor-modal { width: min(92vw, 90rem); }
.sku-editor-intro {
    margin: -.5rem 0 1rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.45;
}
.sku-editor-workspace {
    display: grid;
    grid-template-columns: 12.75rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}
.sku-tabs {
    counter-reset: sku-step;
    position: sticky;
    top: 4.25rem;
    display: grid;
    gap: .28rem;
    padding: .45rem;
    background: #f7f9fc;
    border: 1px solid #e1e7ef;
    border-radius: .75rem;
}
.sku-tabs button {
    counter-increment: sku-step;
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 2.5rem;
    padding: .42rem .5rem;
    color: #627087;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .55rem;
    box-shadow: none;
    font-size: .67rem;
    font-weight: 680;
    text-align: left;
}
.sku-tabs button::before {
    content: counter(sku-step);
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    color: #7a8799;
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 50%;
    font-size: .6rem;
    font-weight: 800;
}
.sku-tabs button:hover:not(:disabled) { color: var(--brand); background: #f0f4ff; border-color: #dbe3fa; }
.sku-tabs button.active { color: #2448bc; background: #fff; border-color: #cbd7f5; box-shadow: var(--shadow-xs); }
.sku-tabs button.active::before { color: #fff; background: var(--brand); border-color: var(--brand); }
.sku-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    align-items: start;
    gap: 1rem;
    min-width: 0;
}
.sku-form-main { min-width: 0; }
.sku-form-heading {
    display: grid;
    gap: .12rem;
    margin-bottom: .75rem;
    padding: .1rem .15rem .65rem;
    border-bottom: 1px solid #e4e9f0;
}
.sku-form-heading > span {
    color: var(--brand);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.sku-form-heading h3 { margin: 0; color: #26344a; font-size: .92rem; }
.sku-form-heading p { margin: 0; color: #788598; font-size: .66rem; line-height: 1.45; }
.sku-basic-sections { display: grid; gap: .75rem; }
.sku-form-section,
.sku-form-main > .field-grid,
.sku-form-main > div:not(.sku-basic-sections) {
    padding: .85rem;
    background: #fbfcfe;
    border: 1px solid #e1e7ef;
    border-radius: .72rem;
}
.sku-form-section > header { margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid #e7ebf1; }
.sku-form-section > header h4 { margin: 0; color: #344159; font-size: .76rem; }
.sku-form-section > header p { margin: .12rem 0 0; color: #7b889a; font-size: .62rem; line-height: 1.4; }
.sku-editor-modal .field-grid { gap: .7rem .8rem; }
.sku-editor-modal .field-grid > label:not(.checkbox-row),
.sku-editor-modal .sku-packaging-form > label:not(.checkbox-row) {
    gap: .3rem;
    margin: 0;
    color: #4a5870;
    font-size: .68rem;
    font-weight: 700;
}
.sku-editor-modal .field-grid input:not([type="checkbox"]):not([type="radio"]),
.sku-editor-modal .field-grid select,
.sku-editor-modal .field-grid textarea,
.sku-editor-modal .field-grid .searchable-select-input,
.sku-editor-modal .sku-packaging-form input:not([type="checkbox"]):not([type="radio"]),
.sku-editor-modal .sku-packaging-form select,
.sku-editor-modal .sku-packaging-form .searchable-select-input {
    width: 100%;
    min-height: 2.35rem;
    padding: .5rem .65rem;
    font-size: .75rem;
    font-weight: 500;
}
.sku-editor-modal .field-grid textarea { min-height: 4.25rem; resize: vertical; }
.sku-editor-modal .field-grid input::placeholder,
.sku-editor-modal .field-grid textarea::placeholder { color: #99a5b6; }
.sku-editor-modal .sku-field-wide { grid-column: 1 / -1; }
.sku-editor-modal .field-grid > .checkbox-row { margin: 0; font-size: .68rem; }
.policy-preview {
    position: sticky;
    top: 4.25rem;
    display: grid;
    gap: .75rem;
    padding: .8rem;
    background: linear-gradient(145deg, #f4f7ff, #fbfcff);
    border: 1px solid #dce4f5;
    border-radius: .72rem;
}
.policy-preview > header { display: flex; align-items: center; gap: .55rem; padding-bottom: .65rem; border-bottom: 1px solid #dfe6f2; }
.policy-preview-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    color: var(--brand);
    background: #fff;
    border: 1px solid #d7e0f5;
    border-radius: .55rem;
}
.policy-preview-icon .nav-icon { width: .78rem; height: .78rem; }
.policy-preview h3 { margin: 0; color: #26344a; font-size: .72rem; }
.policy-preview header p { margin: .08rem 0 0; color: #7b889a; font-size: .57rem; }
.policy-preview section { display: grid; gap: .22rem; padding-top: .65rem; border-top: 1px solid #e1e7f0; }
.policy-preview section:first-of-type { padding-top: 0; border-top: 0; }
.policy-preview section > strong { color: #41506a; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.policy-preview section > span { color: #68768a; font-size: .64rem; line-height: 1.45; }
@media (max-width: 1180px) {
    .sku-form-layout { grid-template-columns: 1fr; }
    .policy-preview { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .policy-preview > header { grid-column: 1 / -1; }
    .policy-preview section:nth-of-type(-n + 2) { padding-top: 0; border-top: 0; }
}
@media (max-width: 900px) {
    .modal.full-window-drawer.sku-editor-modal { width: 100vw; }
    .sku-editor-workspace { grid-template-columns: 1fr; }
    .sku-tabs {
        position: static;
        display: flex;
        overflow-x: auto;
        padding: .35rem;
        scrollbar-width: thin;
    }
    .sku-tabs button { flex: 0 0 auto; width: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
    .policy-preview { grid-template-columns: 1fr; }
    .policy-preview section:nth-of-type(2) { padding-top: .65rem; border-top: 1px solid #e1e7f0; }
    .sku-editor-modal .sku-field-wide { grid-column: auto; }
}
.sku-uom-section { display: grid; gap: 1rem; }
.sku-uom-basics { align-items: end; }
.sku-uom-section .sku-uom-basics > label { margin-bottom: 0; }
.sku-subsection-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: .1rem; padding-top: .9rem; border-top: 1px solid #e3e9f1;
}
.sku-subsection-heading h3 { margin: 0; color: #2c3a51; font-size: .82rem; }
.sku-subsection-heading p { margin: .12rem 0 0; color: #7a8799; font-size: .62rem; line-height: 1.4; }
.sku-add-level-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem; flex: none;
    min-height: 2.35rem; padding: .5rem .75rem; color: #344159; background: #fff;
    border-color: #cbd5e3; box-shadow: var(--shadow-xs); font-size: .68rem;
}
.sku-add-level-button .nav-icon { width: .78rem; height: .78rem; }
.sku-add-level-button:hover:not(:disabled) { color: var(--brand); border-color: #9fb2e2; background: #f8faff; }
.sku-packaging-form {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1rem; margin-bottom: 1rem;
    padding: .9rem; background: #fbfcfe; border: 1px solid #e0e6ee; border-radius: .65rem;
}
.sku-packaging-form .checkbox-row { margin: 0; }
.sku-packaging-actions { display: flex; align-items: end; justify-content: flex-end; gap: .5rem; grid-column: 1 / -1; }
.sku-packaging-actions button { min-height: 2.3rem; }
.sku-packaging-table { margin: 0; }
.sku-packaging-table th, .sku-packaging-table td { padding-block: .65rem; }

/* SKU policy steps use task-specific layouts instead of stretching the generic form grid. */
.sku-tracking-layout { display: grid; gap: .85rem; }
.sku-tracking-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.sku-editor-modal label.sku-choice-card {
    align-items: flex-start; min-height: 4rem; margin: 0; padding: .75rem .8rem;
    background: #fff; border-color: #dce4ef;
}
.sku-editor-modal label.sku-choice-card:has(input:checked) {
    background: linear-gradient(145deg, #eef3ff, #f8faff); border-color: #aabdef;
    box-shadow: inset 3px 0 0 var(--brand), var(--shadow-xs);
}
.sku-choice-card input { margin-top: .1rem; }
.sku-choice-card > span { display: grid; gap: .14rem; min-width: 0; }
.sku-choice-card strong { color: #35435a; font-size: .7rem; line-height: 1.35; }
.sku-choice-card small { color: #7a8799; font-size: .6rem; font-weight: 500; line-height: 1.4; }
.sku-guidance-card.state-card,
.sku-save-guidance.state-card,
.sku-qc-guidance.state-card { margin: 0; }
.sku-guidance-card > span,
.sku-save-guidance > span,
.sku-qc-guidance > span { display: block; margin-top: .15rem; font-size: .66rem; line-height: 1.45; }

.sku-qc-layout { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(22rem, 1.2fr); gap: .85rem; align-items: start; }
.sku-qc-card { min-width: 0; padding: .85rem; background: #fff; border: 1px solid #dfe6ef; border-radius: .65rem; }
.sku-qc-card > header { display: flex; align-items: center; gap: .65rem; margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px solid #e5eaf1; }
.sku-qc-card header > div { display: grid; gap: .1rem; min-width: 0; }
.sku-qc-card header h4 { margin: 0; color: #344159; font-size: .76rem; }
.sku-qc-card header p { margin: 0; color: #7a8799; font-size: .61rem; line-height: 1.4; }
.sku-qc-icon { display: grid; place-items: center; flex: none; width: 2.15rem; height: 2.15rem; border-radius: .58rem; }
.sku-qc-icon .nav-icon { width: .88rem; height: .88rem; }
.sku-qc-icon.inspection { color: #3159cf; background: #edf2ff; border: 1px solid #d7e1fb; }
.sku-qc-icon.shelf-life { color: #a36a12; background: #fff5e4; border: 1px solid #f0ddba; }
.sku-editor-modal label.sku-qc-toggle {
    align-items: flex-start; min-height: 4rem; margin: 0; padding: .75rem .8rem; background: #f8faff; border-color: #dce4ef;
}
.sku-editor-modal label.sku-qc-toggle:has(input:checked) {
    background: linear-gradient(145deg, #eaf8f2, #f9fdfb); border-color: #b9e1d1;
    box-shadow: inset 3px 0 0 #178666, var(--shadow-xs);
}
.sku-qc-toggle input { margin-top: .1rem; }
.sku-qc-toggle > span { display: grid; gap: .14rem; }
.sku-qc-toggle strong { color: #35435a; font-size: .7rem; line-height: 1.35; }
.sku-qc-toggle small { color: #7a8799; font-size: .6rem; font-weight: 500; line-height: 1.4; }
.sku-shelf-life-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.sku-editor-modal .sku-shelf-life-fields > label { display: grid; gap: .3rem; margin: 0; color: #4a5870; font-size: .68rem; font-weight: 700; }
.sku-shelf-life-fields > label > small { color: #8591a2; font-size: .57rem; font-weight: 500; line-height: 1.35; }
.sku-number-with-unit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; background: #fff; border: 1px solid #bdc9d9; border-radius: .55rem; }
.sku-number-with-unit:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(49 89 217 / .12); }
.sku-number-with-unit input { width: 100%; min-height: 2.35rem; padding: .5rem .65rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: .75rem; }
.sku-number-with-unit input:focus { border: 0; box-shadow: none; }
.sku-number-with-unit > span { align-self: stretch; display: grid; place-items: center; padding: 0 .65rem; color: #748197; background: #f5f7fa; border-left: 1px solid #dce3ec; font-size: .6rem; font-weight: 700; }
.sku-qc-guidance { grid-column: 1 / -1; }

.sku-picking-layout { display: grid; grid-template-columns: minmax(15rem, .82fr) minmax(19rem, 1.18fr); gap: .85rem; align-items: start; }
.sku-picking-controls,
.picking-field-preview,
.sku-review-summary { min-width: 0; padding: .85rem; background: #fff; border: 1px solid #dfe6ef; border-radius: .65rem; }
.sku-picking-controls > header,
.picking-field-preview > header,
.sku-review-summary > header { margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px solid #e5eaf1; }
.sku-picking-controls header h4,
.picking-field-preview header h4,
.sku-review-summary header h4 { margin: 0; color: #344159; font-size: .76rem; }
.sku-picking-controls header p,
.picking-field-preview header p,
.sku-review-summary header p { margin: .14rem 0 0; color: #7a8799; font-size: .61rem; line-height: 1.45; }
.sku-picking-controls > label { display: grid; gap: .3rem; margin: 0 0 .65rem; color: #4a5870; font-size: .68rem; font-weight: 700; }
.sku-picking-controls > label:last-child { margin-bottom: 0; }
.sku-picking-controls select,
.sku-picking-controls input { width: 100%; min-height: 2.35rem; padding: .5rem .65rem; font-size: .75rem; }
.picking-field-preview table { width: 100%; margin: 0; border: 0; box-shadow: none; }
.picking-field-preview th { padding: .55rem .65rem; font-size: .57rem; }
.picking-field-preview td { padding: .6rem .65rem; font-size: .68rem; }
.sku-empty-preview { padding: .9rem; color: #708096; background: #f7f9fc; border: 1px dashed #ccd6e4; border-radius: .55rem; font-size: .66rem; text-align: center; }
.requirement-badge,
.review-value-badge { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .18rem .48rem; border-radius: 999px; font-size: .58rem; font-weight: 750; }
.requirement-badge.required,
.review-value-badge.enabled { color: #08775b; background: #e7f7f1; border: 1px solid #c7eadc; }
.requirement-badge.optional,
.review-value-badge.disabled { color: #68778c; background: #f1f4f8; border: 1px solid #dce3ec; }

.sku-review-layout { display: grid; gap: .85rem; }
.sku-review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.sku-review-grid > div { min-width: 0; padding: .7rem .75rem; border-right: 1px solid #e8edf3; border-bottom: 1px solid #e8edf3; }
.sku-review-grid > div:nth-child(3n) { border-right: 0; }
.sku-review-grid > div:nth-last-child(-n + 3) { border-bottom: 0; }
.sku-review-grid dt { color: #718096; font-size: .58rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.sku-review-grid dd { overflow-wrap: anywhere; margin: .28rem 0 0; color: #26344a; font-size: .72rem; font-weight: 620; line-height: 1.4; }

@media (max-width: 980px) {
    .sku-picking-layout, .sku-qc-layout { grid-template-columns: 1fr; }
    .sku-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sku-review-grid > div:nth-child(3n) { border-right: 1px solid #e8edf3; }
    .sku-review-grid > div:nth-child(2n) { border-right: 0; }
    .sku-review-grid > div:nth-last-child(-n + 3) { border-bottom: 1px solid #e8edf3; }
    .sku-review-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 680px) {
    .sku-subsection-heading { align-items: stretch; flex-direction: column; }
    .sku-add-level-button { align-self: flex-start; }
    .sku-tracking-options, .sku-review-grid, .sku-shelf-life-fields { grid-template-columns: 1fr; }
    .sku-review-grid > div { border-right: 0 !important; border-bottom: 1px solid #e8edf3 !important; }
    .sku-review-grid > div:last-child { border-bottom: 0 !important; }
}

/* SKU Master overview: keep the summary and filters compact so the data remains the focus. */
.sku-master-page .portal-page-header { align-items: flex-start; }
.sku-master-page .portal-page-actions { flex-wrap: wrap; max-width: 48rem; }
.sku-master-page .portal-page-actions > a,
.sku-master-page .portal-page-actions > button {
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
    min-height: 2.4rem; padding: .55rem .85rem; color: #344057; background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
    font-family: var(--font-sans); font-size: .875rem; font-weight: 650; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .05s ease;
}
.sku-master-page .portal-page-actions > a:hover,
.sku-master-page .portal-page-actions > button:hover:not(:disabled) {
    color: var(--text); background: var(--surface-subtle); border-color: #aeb8c7; text-decoration: none;
}
.sku-master-page .portal-page-actions > a:active,
.sku-master-page .portal-page-actions > button:active:not(:disabled) { transform: translateY(1px); }
.sku-master-page .portal-page-actions > button.primary {
    color: white; background: var(--brand); border-color: var(--brand);
}
.sku-master-page .portal-page-actions > button.primary:hover:not(:disabled) {
    color: white; background: var(--brand-hover); border-color: var(--brand-hover);
}
.sku-master-page .portal-page-actions > button:nth-child(1) { color: #6844a1; background: #fbf8ff; border-color: #ddd2ef; }
.sku-master-page .portal-page-actions > button:nth-child(2) { color: #2466a3; background: #f5faff; border-color: #cbdff1; }
.sku-master-page .portal-page-actions > button:nth-child(3) { color: #087b72; background: #f3fbfa; border-color: #c5e7e2; }
.sku-master-page .portal-page-actions > button:nth-child(4) { color: #9a6514; background: #fffbf3; border-color: #eedbb8; }
.sku-master-page .portal-page-actions > button.primary { color: white; background: var(--brand); border-color: var(--brand); }
.sku-master-page .sku-master-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; margin-bottom: 1rem;
}
.sku-master-page .sku-master-kpis .kpi-card {
    --sku-kpi-accent: #3159d9;
    --sku-kpi-bg: #eef3ff;
    --sku-kpi-bg-end: #fafbff;
    --sku-kpi-border: #d8e2ff;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center;
    min-height: 0; padding: .85rem .9rem; column-gap: .7rem; row-gap: .12rem;
    background: linear-gradient(145deg, var(--sku-kpi-bg), var(--sku-kpi-bg-end));
    border-color: var(--sku-kpi-border); box-shadow: 0 7px 20px -18px color-mix(in srgb, var(--sku-kpi-accent) 50%, transparent);
}
.sku-master-page .sku-master-kpis .kpi-card::before { display: none; }
.sku-master-page .sku-master-kpis .tone-green { --sku-kpi-accent: #178666; --sku-kpi-bg: #eaf8f2; --sku-kpi-bg-end: #f9fdfb; --sku-kpi-border: #caeadc; }
.sku-master-page .sku-master-kpis .tone-rose { --sku-kpi-accent: #c54d6c; --sku-kpi-bg: #fff0f4; --sku-kpi-bg-end: #fffafb; --sku-kpi-border: #f2d2dc; }
.sku-master-page .sku-master-kpis .tone-indigo { --sku-kpi-accent: #4865d7; --sku-kpi-bg: #eef2ff; --sku-kpi-bg-end: #fafbff; --sku-kpi-border: #d8e0fb; }
.sku-master-page .sku-master-kpis .tone-amber { --sku-kpi-accent: #b77714; --sku-kpi-bg: #fff6e7; --sku-kpi-bg-end: #fffcf7; --sku-kpi-border: #f0ddba; }
.sku-master-page .sku-master-kpis .tone-violet { --sku-kpi-accent: #8053bb; --sku-kpi-bg: #f5effd; --sku-kpi-bg-end: #fcfaff; --sku-kpi-border: #e4d6f4; }
.sku-master-page .sku-master-kpis .tone-cyan { --sku-kpi-accent: #1780a3; --sku-kpi-bg: #eaf8fc; --sku-kpi-bg-end: #f9fdfe; --sku-kpi-border: #ceeaf2; }
.sku-master-page .sku-master-kpis .tone-teal { --sku-kpi-accent: #087c78; --sku-kpi-bg: #e9f8f6; --sku-kpi-bg-end: #f8fdfc; --sku-kpi-border: #c9e9e4; }
.sku-master-page .sku-master-kpis .kpi-icon { color: var(--sku-kpi-accent); background: rgb(255 255 255 / .82); border-color: color-mix(in srgb, var(--sku-kpi-accent) 18%, transparent); }
.sku-master-page .sku-master-kpis .kpi-card:hover {
    border-color: color-mix(in srgb, var(--sku-kpi-accent) 34%, white);
    box-shadow: 0 12px 26px -20px color-mix(in srgb, var(--sku-kpi-accent) 58%, transparent); transform: translateY(-1px);
}
.sku-master-page .sku-master-kpis .kpi-top { grid-row: 1 / 3; margin: 0; }
.sku-master-page .sku-master-kpis .kpi-icon { width: 2.1rem; height: 2.1rem; }
.sku-master-page .sku-master-kpis .kpi-value { align-self: end; margin: 0; font-size: 1.45rem; }
.sku-master-page .sku-master-kpis .kpi-label { align-self: start; font-size: .72rem; }
.sku-master-page .sku-master-toolbar {
    display: grid; grid-template-columns: minmax(14rem, 1.45fr) minmax(11rem, 1.15fr) minmax(10rem, 1fr)
        minmax(7.5rem, .7fr) minmax(8.5rem, .8fr) minmax(7.5rem, .7fr) auto;
    align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .8rem;
    background: linear-gradient(120deg, #f8faff, #f7fbfd 56%, #fbf9ff); border-color: #d9e3f1;
}
.sku-master-page .sku-master-toolbar > input,
.sku-master-page .sku-master-toolbar > select,
.sku-master-page .sku-master-toolbar > button { width: 100%; min-width: 0; }
.sku-master-page .sku-master-toolbar > input,
.sku-master-page .sku-master-toolbar > select { background-color: rgb(255 255 255 / .92); }
.sku-master-page .sku-master-toolbar > input:focus,
.sku-master-page .sku-master-toolbar > select:focus { background-color: #fff; }
.sku-master-page .sku-master-toolbar > button { color: #496079; background: #fff; border-color: #cbd7e6; }
.sku-master-page .sku-master-toolbar > button:hover:not(:disabled) { color: var(--brand); background: #f4f7ff; border-color: #aebfe6; }

.sku-master-table-wrap { border-color: #d7e1ed; box-shadow: 0 10px 28px -24px rgb(32 55 91 / .42); }
.sku-master-page .sku-master-table thead th { background: linear-gradient(180deg, #f4f7fc, #eef3f9); border-bottom-color: #d9e3ef; }
.sku-master-page .sku-master-table tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }
.sku-master-page .sku-master-table tbody tr:nth-child(even) { background: #fcfdff; }
.sku-master-page .sku-master-table tbody tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
.sku-master-page .sku-master-table tbody td:first-child code {
    color: #274aaf; background: #eef3ff; border: 1px solid #d7e1fb; border-radius: .4rem;
    padding: .2rem .38rem; font-weight: 780;
}
.sku-master-page .sku-master-table tbody td:nth-child(2) { color: #2d3d56; font-weight: 650; }
.sku-master-page .sku-master-table tbody td:nth-child(7) { color: #167b72; font-weight: 720; }
.sku-master-page .sku-master-table .actions .row-icon-button:first-child { color: #3159c9; background: #f3f6ff; border-color: #d4def7; }
.sku-master-page .sku-master-table .actions .row-icon-button:nth-child(2) { color: #7952ad; background: #f7f2fd; border-color: #e3d8f2; }

/* Picking Strategy Fields: a focused, page-scoped configuration workspace. */
.picking-strategy-fields-page {
    min-width: 0;
    height: auto;
    overflow: visible;
    padding-bottom: 1rem;
}
.picking-strategy-fields-page .portal-page-header { align-items: flex-start; }
.strategy-fields-overview {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .85rem;
    margin-bottom: 1rem; padding: .85rem 1rem; background: linear-gradient(135deg, #f8faff, #f5f8ff);
    border: 1px solid #dce5fa; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.strategy-fields-overview-icon,
.strategy-field-group-icon {
    display: grid; place-items: center; flex: none; color: var(--brand); background: var(--brand-soft);
    border: 1px solid #dce5ff; border-radius: .6rem;
}
.strategy-fields-overview-icon { width: 2.35rem; height: 2.35rem; }
.strategy-fields-overview-icon .nav-icon { width: 1rem; height: 1rem; }
.strategy-fields-overview-copy { display: grid; gap: .12rem; min-width: 0; }
.strategy-fields-overview-copy strong { color: #26344b; font-size: .8rem; }
.strategy-fields-overview-copy span { color: var(--text-muted); font-size: .7rem; line-height: 1.4; }
.strategy-fields-stat {
    display: grid; min-width: 5.25rem; padding-left: .9rem; border-left: 1px solid #dce5f3; text-align: right;
}
.strategy-fields-stat strong { color: #23314a; font-size: 1rem; line-height: 1.15; }
.strategy-fields-stat span { color: var(--text-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.strategy-field-groups {
    display: grid;
    align-items: start;
    gap: 1rem;
    min-width: 0;
    overflow: visible;
}
.strategy-field-group {
    min-width: 0; overflow: visible; background: var(--surface); border: 1px solid #dce3ec;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.strategy-field-group-header {
    display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem;
    background: #fbfcff; border-bottom: 1px solid #e4e9f1;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.strategy-field-group-icon { width: 2rem; height: 2rem; }
.strategy-field-group-icon .nav-icon { width: .85rem; height: .85rem; }
.strategy-field-group-header > div { display: grid; gap: .08rem; }
.strategy-field-group-header h2 { margin: 0; color: #26344b; font-size: .84rem; font-weight: 780; letter-spacing: .015em; }
.strategy-field-group-header span:not(.strategy-field-group-icon) { color: var(--text-muted); font-size: .64rem; }
.strategy-fields-table-wrap {
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
    border: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: none;
}
.picking-strategy-fields-page .strategy-fields-table { width: 100%; min-width: 62rem; table-layout: fixed !important; }
.picking-strategy-fields-page .strategy-fields-table th { top: auto; padding-block: .62rem; background: #f8fafc; }
.picking-strategy-fields-page .strategy-fields-table td { height: 3.75rem; padding-block: .55rem; }
/* The shared compact-table rule gives non-action columns width:1%. These page-scoped widths
   intentionally take precedence so the inline controls cannot collapse and overlap. */
.picking-strategy-fields-page .strategy-fields-table th:nth-child(1),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(1) { width: 12% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(2),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(2) { width: 11% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(3),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(3) { width: 14% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(4),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(4) { width: 25% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(5),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(5) { width: 11% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(6),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(6) { width: 14% !important; }
.picking-strategy-fields-page .strategy-fields-table th:nth-child(7),
.picking-strategy-fields-page .strategy-fields-table td:nth-child(7) { width: 13% !important; }
.strategy-field-name { display: grid; gap: .16rem; }
.strategy-field-name code { color: #253550; font-size: .76rem; font-weight: 760; }
.strategy-field-name span { color: var(--text-subtle); font-size: .6rem; font-weight: 650; }
.strategy-basis-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: .24rem .48rem;
    color: #627086; background: #f1f4f7; border: 1px solid #e0e6ed; border-radius: 99px;
    font-size: .65rem; font-weight: 720;
}
.strategy-basis-badge.is-dependent { color: #7252a4; background: #f4effc; border-color: #e5d9f5; }
.strategy-field-toggle { display: inline-flex; align-items: center; gap: .5rem; color: #48566d; font-size: .7rem; font-weight: 650; cursor: pointer; }
.strategy-field-toggle > input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.strategy-field-toggle-track {
    position: relative; flex: none; width: 2rem; height: 1.1rem; background: #cbd4e0;
    border: 1px solid #bcc7d6; border-radius: 99px; transition: background-color .15s ease, border-color .15s ease;
}
.strategy-field-toggle-track::after {
    content: ""; position: absolute; top: 50%; left: .16rem; width: .72rem; height: .72rem;
    background: white; border-radius: 50%; box-shadow: 0 1px 3px rgb(15 23 42 / .22);
    transform: translateY(-50%); transition: left .15s ease;
}
.strategy-field-toggle > input:checked + .strategy-field-toggle-track { background: var(--brand); border-color: var(--brand); }
.strategy-field-toggle > input:checked + .strategy-field-toggle-track::after { left: 1rem; }
.strategy-field-toggle > input:focus-visible + .strategy-field-toggle-track { box-shadow: 0 0 0 3px rgb(49 87 213 / .16); }
.strategy-validation-input { width: 100%; min-height: 2.15rem; padding-block: .42rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .72rem; }
.strategy-order-input { width: 4.5rem; min-height: 2.15rem; padding-block: .42rem; }
.strategy-field-save { min-width: 6.4rem; }
.strategy-field-save button { min-width: 5.3rem; }
.strategy-field-save .nav-icon { width: .78rem; height: .78rem; }

/* Inventory Balances: page-scoped search, column controls, and results workspace. */
.inventory-balances-page .portal-page-header { align-items: flex-start; }
.inventory-filter-card,
.inventory-columns-panel,
.inventory-results-section {
    margin-bottom: 1rem; background: var(--surface); border: 1px solid #dce3ec;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.inventory-filter-card { overflow: hidden; }
.inventory-filter-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; background: linear-gradient(100deg, #fbfcff 0%, #f7f9ff 100%);
}
.inventory-filter-summary-copy,
.inventory-filter-summary-actions { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.inventory-filter-summary-copy > div { display: grid; gap: .08rem; min-width: 0; }
.inventory-filter-summary h2 { margin: 0; color: #26344b; font-size: .84rem; }
.inventory-filter-summary p { margin: 0; color: var(--text-muted); font-size: .66rem; line-height: 1.4; }
.inventory-filter-summary-actions { justify-content: flex-end; flex: none; }
.inventory-filter-summary-actions button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.25rem;
}
.inventory-filter-summary-actions .nav-icon { width: .8rem; height: .8rem; }
.inventory-filter-toggle { color: var(--brand); background: var(--brand-soft); border-color: #cfdafa; }
.inventory-filter-toggle:hover:not(:disabled) { color: #244bc4; background: #e8eeff; border-color: #b9c9f7; }
.inventory-accordion-chevron {
    display: inline-grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem;
    color: #718099; transition: transform .15s ease;
}
.inventory-accordion-chevron .nav-icon { width: .78rem; height: .78rem; stroke-width: 2; }
.inventory-filter-chevron { margin-left: .08rem; }
.inventory-filter-card.is-open .inventory-filter-chevron { transform: rotate(180deg); }
.inventory-active-filter-count {
    padding: .28rem .55rem; color: #2854c7; background: #edf2ff; border: 1px solid #d6e0ff;
    border-radius: 99px; font-size: .62rem; font-weight: 750; white-space: nowrap;
}
.inventory-filter-panel { border-top: 1px solid #e5eaf1; animation: inventory-filter-reveal .16s ease-out; }
@keyframes inventory-filter-reveal {
    from { opacity: 0; transform: translateY(-.3rem); }
    to { opacity: 1; transform: translateY(0); }
}
.inventory-section-header {
    display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem;
    background: #fbfcff; border-bottom: 1px solid #e5eaf1;
}
.inventory-section-icon {
    display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem;
    color: var(--brand); background: var(--brand-soft); border: 1px solid #dce5ff; border-radius: .6rem;
}
.inventory-section-icon .nav-icon { width: .88rem; height: .88rem; }
.inventory-section-header > div { display: grid; gap: .08rem; }
.inventory-section-header h2,
.inventory-results-header h2 { margin: 0; color: #26344b; font-size: .84rem; }
.inventory-section-header p,
.inventory-results-header p { margin: 0; color: var(--text-muted); font-size: .66rem; line-height: 1.4; }
.inventory-entity-filters {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem;
    padding: .9rem 1rem;
}
.inventory-filter-field { display: grid; gap: .35rem; min-width: 0; }
.inventory-filter-field > span,
.inventory-date-group > strong,
.inventory-stock-scope legend {
    color: #536178; font-size: .65rem; font-weight: 750; letter-spacing: .025em;
}
.inventory-filter-field .searchable-select { width: 100%; }
.inventory-filter-field .searchable-select-input { min-height: 2.35rem; }
.inventory-date-filters {
    display: grid; grid-template-columns: repeat(2, minmax(17rem, 1fr)) minmax(15rem, .8fr);
    align-items: end; gap: 1rem; padding: .9rem 1rem; background: #fbfcfe; border-top: 1px solid #e9edf3;
}
.inventory-date-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem .6rem; }
.inventory-date-group > strong { grid-column: 1 / -1; }
.inventory-date-group label { display: grid; gap: .25rem; }
.inventory-date-group label > span { color: var(--text-muted); font-size: .61rem; font-weight: 650; }
.inventory-date-group input { width: 100%; min-height: 2.35rem; }
.inventory-stock-scope { min-width: 0; margin: 0; padding: 0; border: 0; }
.inventory-stock-scope legend { margin-bottom: .35rem; padding: 0; }
.inventory-stock-scope > div {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .2rem;
    background: #eef2f7; border: 1px solid #dce3ec; border-radius: .6rem;
}
.inventory-stock-scope label { position: relative; cursor: pointer; }
.inventory-stock-scope input { position: absolute; width: 1px !important; height: 1px; opacity: 0; pointer-events: none; }
.inventory-stock-scope label > span {
    display: grid; place-items: center; min-height: 2rem; padding: .35rem .65rem;
    color: #69768a; border-radius: .45rem; font-size: .68rem; font-weight: 720; white-space: nowrap;
}
.inventory-stock-scope input:checked + span { color: var(--brand); background: white; box-shadow: var(--shadow-xs); }
.inventory-stock-scope input:focus-visible + span { box-shadow: 0 0 0 3px rgb(49 87 213 / .16); }
.inventory-filter-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; border-top: 1px solid #e5eaf1;
}
.inventory-filter-actions > span { color: var(--text-muted); font-size: .65rem; }
.inventory-filter-actions > div { display: flex; gap: .55rem; }
.inventory-filter-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.inventory-filter-actions .nav-icon { width: .8rem; height: .8rem; }
.inventory-columns-panel { overflow: hidden; }
.inventory-columns-panel > summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem;
    padding: .75rem 1rem; cursor: pointer; list-style: none;
}
.inventory-columns-panel > summary::-webkit-details-marker { display: none; }
.inventory-columns-panel[open] .inventory-columns-chevron { transform: rotate(180deg); }
.inventory-columns-summary { display: grid; gap: .08rem; }
.inventory-columns-summary strong { color: #344159; font-size: .76rem; }
.inventory-columns-summary small { color: var(--text-muted); font-size: .63rem; }
.inventory-column-count {
    padding: .28rem .55rem; color: #607087; background: #f2f5f8; border-radius: 99px;
    font-size: .62rem; font-weight: 700; white-space: nowrap;
}
.inventory-columns-content {
    display: grid; gap: 1rem; max-height: min(22rem, 48vh); overflow-y: auto; padding: 1rem;
    background: #fbfcfe; border-top: 1px solid #e5eaf1; scrollbar-gutter: stable;
    overscroll-behavior: contain;
}
.inventory-column-group { display: grid; gap: .65rem; }
.inventory-column-group > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.inventory-column-group > header > div:first-child,
.inventory-column-group > header:not(:has(> div:first-child)) { display: grid; gap: .08rem; }
.inventory-column-group header strong { color: #344159; font-size: .72rem; }
.inventory-column-group header span { color: var(--text-muted); font-size: .62rem; }
.inventory-column-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.inventory-column-options label {
    display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .45rem .55rem;
    color: #526078; background: white; border: 1px solid #e1e7ef; border-radius: .5rem;
    font-size: .66rem; font-weight: 620; cursor: pointer;
}
.inventory-column-options label:has(input:checked) { color: #304caa; background: #f2f5ff; border-color: #d2dcfa; }
.inventory-column-actions { display: flex; gap: .7rem; }
.inventory-column-actions .link-button { color: var(--brand); font-size: .64rem; }
.inventory-results-section { overflow: hidden; }
.inventory-results-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1rem; background: #fbfcff; border-bottom: 1px solid #e5eaf1;
}
.inventory-results-header > div { display: grid; gap: .08rem; }
.inventory-results-tools { display: flex !important; align-items: center; justify-content: flex-end; gap: .65rem !important; }
.inventory-table-filter {
    display: flex; align-items: center; gap: .45rem; width: min(16rem, 34vw); min-height: 2.15rem;
    padding: 0 .65rem; background: white; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.inventory-table-filter:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(49 87 213 / .12); }
.inventory-table-filter .nav-icon { flex: none; width: .78rem; height: .78rem; color: var(--text-subtle); }
.inventory-table-filter input {
    width: 100%; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none;
    font-size: .7rem;
}
.inventory-table-filter input:focus { border: 0; box-shadow: none; }
.inventory-balances-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.inventory-balances-table thead th {
    background: linear-gradient(180deg, #f4f7fc, #eef3f9); border-bottom-color: #d9e3ef;
}
.inventory-balances-table tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }
.inventory-balances-table tbody tr:nth-child(even) { background: #fcfdff; }
.inventory-balances-table tbody tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
.inventory-balances-table th { padding-block: .65rem; cursor: grab; }
.inventory-balances-table th:active { cursor: grabbing; }
.inventory-balances-table td { height: 3.25rem; padding-block: .6rem; }
.inventory-sort-button {
    display: inline-flex; align-items: center; justify-content: flex-start; gap: .28rem;
    width: 100%; min-height: 0; padding: 0; color: inherit; background: transparent;
    border: 0; border-radius: 0; box-shadow: none; font-size: inherit; font-weight: inherit;
    letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: inherit;
}
.inventory-sort-button:hover:not(:disabled) { color: var(--brand); background: transparent; border: 0; }
.inventory-sort-button:active:not(:disabled) { transform: none; }
.inventory-column-grip { color: #b0bac8; font-size: .72rem; letter-spacing: -.2em; }
.inventory-sort-indicator { margin-left: auto; color: #9aa7b9; font-size: .68rem; }
.inventory-balances-table th[aria-sort="ascending"] .inventory-sort-indicator,
.inventory-balances-table th[aria-sort="descending"] .inventory-sort-indicator { color: var(--brand); }
.inventory-balances-table th.inventory-quantity .inventory-sort-button { justify-content: flex-end; }
.inventory-code {
    display: inline-flex; align-items: center; padding: .2rem .38rem; color: #274aaf;
    background: #eef3ff; border: 1px solid #d7e1fb; border-radius: .4rem;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-weight: 780;
}
.inventory-label {
    display: inline-flex; align-items: center; width: max-content; min-height: 1.45rem; padding: .18rem .48rem;
    border: 1px solid transparent; border-radius: 999px; font-size: .66rem; font-weight: 720; line-height: 1.3;
    white-space: nowrap;
}
.inventory-label-violet { color: #7544b7; background: #f5efff; border-color: #dfd0f5; }
.inventory-label-cyan { color: #147896; background: #ebf8fc; border-color: #cce9f2; }
.inventory-label-neutral { color: #526078; background: #f1f4f8; border-color: #dce3ec; }
.inventory-balances-table td.inventory-cell-location .entity-link,
.inventory-balances-table td.inventory-cell-sku .entity-link,
.inventory-balances-table td.inventory-cell-batch .entity-link {
    min-height: 1.55rem; padding: .2rem .45rem; border: 1px solid; border-radius: .42rem;
    box-shadow: none; font-weight: 720; text-decoration: none;
}
.inventory-balances-table td.inventory-cell-location .entity-link {
    color: #087b72; background: #effaf8; border-color: #c9e8e2;
}
.inventory-balances-table td.inventory-cell-sku .entity-link {
    color: #3159c9; background: #f1f5ff; border-color: #d4def7;
}
.inventory-balances-table td.inventory-cell-batch .entity-link {
    color: #9a6514; background: #fff8ec; border-color: #eedbb8;
}
.inventory-balances-table td .entity-link:hover {
    filter: saturate(1.08); box-shadow: 0 3px 8px -6px rgb(35 55 90 / .55); text-decoration: none;
}
.inventory-balances-table td .entity-link .nav-icon { color: currentColor; opacity: .56; }
.inventory-barcode { color: #526078; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .74rem; }
.inventory-quantity { text-align: right; font-variant-numeric: tabular-nums; }
td.inventory-quantity { color: #344159; font-weight: 720; }
td.inventory-available { color: var(--success); }

@media (max-width: 1250px) {
    .inventory-entity-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-date-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inventory-stock-scope { grid-column: 1 / -1; }
    .inventory-column-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sku-master-page .sku-master-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sku-master-page .sku-master-toolbar > input { grid-column: span 2; }
}
@media (max-width: 1100px) {
    .sku-master-page .sku-master-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sku-form-layout { flex-direction: column; }
    .policy-preview { position: static; width: 100%; }
}
@media (max-width: 860px) {
    .inventory-filter-summary { align-items: flex-start; }
    .inventory-filter-summary-actions { flex-wrap: wrap; }
    .inventory-date-filters { grid-template-columns: 1fr; }
    .inventory-stock-scope { grid-column: auto; }
    .inventory-column-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strategy-fields-overview { grid-template-columns: auto minmax(0, 1fr); }
    .strategy-fields-stat { grid-row: 2; padding: .65rem 0 0; border-top: 1px solid #dce5f3; border-left: 0; text-align: left; }
    .sku-master-page .portal-page-header { flex-direction: column; }
    .sku-master-page .portal-page-actions { justify-content: flex-start; width: 100%; max-width: none; }
    .sku-master-page .sku-master-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sku-master-page .sku-master-toolbar > input { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .sku-packaging-form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .inventory-filter-summary,
    .inventory-filter-summary-actions { align-items: stretch; flex-direction: column; }
    .inventory-filter-summary-actions { width: 100%; }
    .inventory-filter-summary-actions button { width: 100%; }
    .inventory-active-filter-count { align-self: flex-start; }
    .inventory-entity-filters,
    .inventory-column-options { grid-template-columns: 1fr; }
    .inventory-date-group { grid-template-columns: 1fr; }
    .inventory-date-group > strong { grid-column: auto; }
    .inventory-filter-actions,
    .inventory-results-header,
    .inventory-column-group > header { align-items: stretch; flex-direction: column; }
    .inventory-results-tools { align-items: stretch; flex-direction: column; }
    .inventory-table-filter { width: 100%; }
    .inventory-filter-actions > div { display: grid; grid-template-columns: 1fr; }
    .inventory-filter-actions button { width: 100%; }
    .inventory-columns-panel > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .inventory-column-count { grid-column: 2; justify-self: start; }
    .inventory-columns-chevron { grid-column: 3; grid-row: 1 / 3; }
    .strategy-fields-overview { grid-template-columns: auto minmax(0, 1fr); padding: .75rem; }
    .strategy-field-group-header { padding: .7rem .75rem; }
    .sku-master-page .sku-master-kpis { grid-template-columns: 1fr; }
    .sku-master-page .sku-master-toolbar { grid-template-columns: 1fr; }
    .sku-master-page .sku-master-toolbar > input { grid-column: auto; }
    .sku-master-page .portal-page-actions > a,
    .sku-master-page .portal-page-actions > button { width: 100%; }
}
@keyframes modal-backdrop-in {
    from { background-color: rgb(12 20 35 / 0); backdrop-filter: blur(0); }
}
.login-card {
    width: min(430px, 100%); margin: clamp(2rem, 9vh, 7rem) auto; padding: clamp(1.4rem, 4vw, 2.2rem);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.login-card::before { content: "LV"; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: 1.5rem; color: white; background: linear-gradient(145deg, #5377ea, #2f50cb); border-radius: .8rem; font-size: .8rem; font-weight: 800; }
.login-card label { display: grid; gap: .4rem; margin: 1rem 0; color: #526078; font-size: .78rem; }
.login-card input { width: 100%; }
.login-card .primary { width: 100%; margin-top: .4rem; min-height: 2.7rem; }

/* Standalone light authentication */
.auth-main { width: 100%; min-height: 100vh; margin: 0; padding: 0; overflow: hidden; background: #f7f9fc; }
.auth-redirect {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: .85rem;
    color: var(--text); background: #f7f9fc;
}
.auth-redirect-mark {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: white;
    background: linear-gradient(145deg, #5275e8, #3157d5); border-radius: .8rem; font-size: .76rem; font-weight: 800;
}
.auth-redirect div { display: grid; gap: .15rem; }
.auth-redirect strong { font-size: .88rem; }
.auth-redirect span:not(.auth-redirect-mark) { color: var(--text-muted); font-size: .75rem; }
.signin-page {
    width: 90vw; height: 90dvh; min-height: 0;
    display: grid; grid-template-columns: minmax(22rem, 46%) minmax(26rem, 54%);
    background: white;
    /* The authenticated portal uses a 90%-density root. Restore the sign-in screen's
       original 16px/100% composition without affecting the rest of the application. */
    zoom: 1.111111;
}
.signin-intro {
    position: relative; display: flex; flex-direction: column; min-height: 90dvh; padding: clamp(2rem, 4vw, 4.5rem);
    overflow: hidden; background: linear-gradient(145deg, #f4f7ff 0%, #edf3ff 55%, #f9fbff 100%);
    border-right: 1px solid #dfe6f1;
}
.signin-intro::before, .signin-intro::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.signin-intro::before { top: 10%; right: -14rem; width: 30rem; height: 30rem; border: 1px solid rgb(49 87 213 / .09); box-shadow: 0 0 0 4rem rgb(49 87 213 / .025), 0 0 0 8rem rgb(49 87 213 / .018); }
.signin-intro::after { left: -8rem; bottom: -10rem; width: 21rem; height: 21rem; background: radial-gradient(circle at center, rgb(49 87 213 / .07), transparent 67%); }
.signin-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; width: fit-content; color: var(--text); }
.signin-brand:hover { text-decoration: none; }
.signin-brand-mark {
    display: grid; place-items: center; flex: none; width: 2.65rem; height: 2.65rem; color: white;
    background: linear-gradient(145deg, #5275e8, #3157d5); border: 1px solid rgb(255 255 255 / .5);
    border-radius: .8rem; box-shadow: 0 9px 22px rgb(49 87 213 / .2); font-size: .76rem; font-weight: 850;
}
.signin-brand > span:last-child { display: grid; line-height: 1.2; }
.signin-brand strong { font-size: 1.05rem; letter-spacing: -.02em; }
.signin-brand small { margin-top: .12rem; color: #687892; font-size: .63rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; }
.signin-intro-copy { position: relative; z-index: 1; width: min(100%, 38rem); margin: auto 0; padding: 3rem 0; }
.signin-intro-copy .eyebrow { margin-bottom: .8rem; }
.signin-intro-copy h1 { max-width: 36rem; color: #17233b; font-size: clamp(2.35rem, 4.1vw, 4.2rem); line-height: 1.02; letter-spacing: -.055em; }
.signin-intro-copy h1 span { display: block; white-space: nowrap; }
.signin-intro-copy > p:not(.eyebrow) { max-width: 31rem; margin: 1.25rem 0 0; color: #5e6e87; font-size: clamp(.95rem, 1.3vw, 1.1rem); line-height: 1.7; }
.signin-benefits { display: grid; gap: .95rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.signin-benefits li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .85rem; }
.signin-benefits li > span {
    display: grid; place-items: center; width: 2.15rem; height: 2.15rem; color: var(--brand);
    background: rgb(255 255 255 / .75); border: 1px solid #d7e0f1; border-radius: .65rem; font-size: .62rem; font-weight: 800;
}
.signin-benefits div { display: grid; gap: .18rem; }
.signin-benefits strong { color: #263650; font-size: .8rem; }
.signin-benefits small { color: #738198; font-size: .72rem; line-height: 1.4; }
.signin-intro-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1rem; color: #7b889d; font-size: .65rem; }
.signin-secure { display: inline-flex; align-items: center; gap: .4rem; }
.signin-secure i { width: .45rem; height: .45rem; background: #19a374; border: 2px solid #ccefe3; border-radius: 50%; box-sizing: content-box; }
.signin-panel { display: grid; place-items: center; min-height: 90dvh; padding: clamp(2rem, 6vw, 6rem); background: #ffffff; }
.signin-form-wrap { width: min(100%, 26.5rem); }
.signin-mobile-brand { display: none; align-items: center; gap: .65rem; margin-bottom: 2.5rem; }
.signin-heading { margin-bottom: 2rem; }
.signin-heading h2 { margin: 0; color: #172033; font-size: clamp(1.65rem, 2.5vw, 2.15rem); line-height: 1.2; letter-spacing: -.035em; }
.signin-heading > p:not(.eyebrow) { margin: .65rem 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.55; }
.signin-form { display: grid; }
.signin-form > label, .signin-label-row label { margin-bottom: .45rem; color: #364258; font-size: .75rem; font-weight: 700; }
.signin-label-row { display: flex; justify-content: space-between; margin-top: 1rem; }
.signin-input { position: relative; display: flex; align-items: center; }
.signin-input + label { margin-top: 1rem; }
.signin-input > svg {
    position: absolute; left: .85rem; z-index: 1; width: 1.05rem; height: 1.05rem; fill: none;
    stroke: #8793a7; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.signin-input input {
    width: 100%; min-height: 3rem; padding: .72rem 2.8rem .72rem 2.65rem; color: #1c273a;
    background: #fbfcfe; border: 1px solid #cfd7e4; border-radius: .65rem; font-size: .84rem;
}
.signin-input input:hover { border-color: #adb8c8; }
.signin-input input:focus { background: white; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(49 87 213 / .1); }
.password-toggle {
    position: absolute; right: .45rem; display: grid; place-items: center; width: 2.1rem; min-height: 2.1rem;
    padding: 0; color: #7c899d; background: transparent; border: 0; box-shadow: none;
}
.password-toggle:hover:not(:disabled) { color: var(--text); background: #f0f3f8; border: 0; }
.password-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.signin-error { margin: .85rem 0 0; padding: .7rem .8rem; color: #a51f30; background: #fff2f3; border: 1px solid #f2ccd1; border-radius: .55rem; font-size: .75rem; line-height: 1.45; }
.signin-submit {
    display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 3rem;
    margin-top: 1.25rem; color: white; background: var(--brand); border-color: var(--brand); border-radius: .65rem;
    box-shadow: 0 8px 20px -8px rgb(49 87 213 / .55);
}
.signin-submit:hover:not(:disabled) { color: white; background: var(--brand-hover); border-color: var(--brand-hover); }
.button-spinner { width: .9rem; height: .9rem; border: 2px solid rgb(255 255 255 / .4); border-top-color: white; border-radius: 50%; animation: signin-spin .7s linear infinite; }
@keyframes signin-spin { to { transform: rotate(360deg); } }
.signin-help { display: grid; gap: .2rem; margin-top: 1.6rem; padding: 1rem; text-align: center; background: #f8fafc; border: 1px solid #e5eaf1; border-radius: .65rem; }
.signin-help span:first-child { color: #425069; font-size: .75rem; font-weight: 700; }
.signin-help span:last-child { color: #7b8799; font-size: .68rem; }
.signin-privacy { margin: 1.25rem auto 0; max-width: 22rem; color: #929caf; font-size: .65rem; line-height: 1.5; text-align: center; }

/* Account security */
.account-security-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); gap: .85rem; max-width: 68rem; }
.account-security-card, .account-password-guidance, .account-danger-zone, .account-security-result {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.account-security-card { overflow: hidden; }
.account-security-card > header { padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--border); }
.account-security-card > header > span, .account-password-guidance header > span, .account-danger-zone > div > span, .account-security-result > div > span {
    color: #7f8ca0; font-size: .55rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.account-security-card h2 { margin: .12rem 0; color: #24334a; font-size: .92rem; }
.account-security-card header p, .account-password-guidance header p, .account-danger-zone p, .account-security-result p { margin: 0; color: #718097; font-size: .65rem; }
.account-security-fields { display: grid; gap: .8rem; padding: 1rem 1.1rem; }
.account-security-fields label { display: grid; gap: .35rem; margin: 0; color: #43516a; font-size: .67rem; font-weight: 700; }
.account-password-input { position: relative; display: flex; align-items: center; }
.account-password-input input { width: 100%; min-height: 2.75rem; padding-right: 2.8rem; }
.account-password-input button { position: absolute; right: .35rem; display: grid; place-items: center; width: 2rem; min-height: 2rem; padding: 0; color: #7c899c; background: transparent; border: 0; box-shadow: none; }
.account-password-input button:hover:not(:disabled) { color: var(--brand); background: #eef2ff; }
.account-password-input .nav-icon { width: .8rem; height: .8rem; }
.account-security-fields label > small { font-size: .58rem; font-weight: 650; }
.account-security-fields label > small.is-valid { color: var(--success); }
.account-security-fields label > small.is-invalid { color: var(--danger); }
.account-security-card > footer { display: flex; justify-content: flex-end; padding: .8rem 1.1rem; background: #fafbfd; border-top: 1px solid var(--border); }
.account-password-guidance { align-self: start; padding: 1rem; }
.account-password-guidance header { display: grid; gap: .12rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.account-password-guidance header strong { color: #29384f; font-size: .76rem; }
.account-password-guidance ul { display: grid; gap: .45rem; margin: .8rem 0; padding: 0; list-style: none; }
.account-password-guidance li { display: flex; align-items: center; gap: .45rem; color: #7a8799; font-size: .63rem; }
.account-password-guidance li .nav-icon { width: .8rem; height: .8rem; padding: .12rem; color: #9aa5b4; background: #eef1f5; border-radius: 50%; }
.account-password-guidance li.is-met { color: #176f53; font-weight: 700; }
.account-password-guidance li.is-met .nav-icon { color: #fff; background: #1a9c73; }
.account-security-note { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem; color: #3157d5; background: #f2f5ff; border-radius: var(--radius-sm); }
.account-security-note > .nav-icon { flex: none; width: .85rem; height: .85rem; margin-top: .05rem; }
.account-security-note > span { display: grid; gap: .08rem; }
.account-security-note strong { color: #34466c; font-size: .62rem; }
.account-security-note small { color: #71809b; font-size: .56rem; }
.account-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 68rem; margin-top: .85rem; padding: .85rem 1rem; border-color: #efcbd0; }
.account-danger-zone > div { display: grid; gap: .1rem; }
.account-danger-zone > div > span { color: #a73845; }
.account-danger-zone strong { color: #6f2630; font-size: .76rem; }
.account-signout-modal { width: min(28rem, 92vw); }
.account-security-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; max-width: 48rem; padding: 1rem; }
.account-security-result-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: #fff; background: var(--success); border-radius: .7rem; }
.account-security-result-icon .nav-icon { width: 1rem; height: 1rem; }
.account-security-result > div { display: grid; gap: .08rem; }
.account-security-result > div > strong { color: #26354c; font-size: .82rem; }
.account-security-result > button { display: inline-flex; align-items: center; gap: .4rem; }
.account-security-result > button .nav-icon { width: .72rem; height: .72rem; }
@media (max-width: 900px) {
    .account-security-layout { grid-template-columns: minmax(0, 1fr); }
    .account-password-guidance { width: 100%; }
}
@media (max-width: 620px) {
    .account-danger-zone, .account-security-result { align-items: stretch; grid-template-columns: 1fr; flex-direction: column; }
    .account-danger-zone button, .account-security-result button { width: 100%; justify-content: center; }
}

/* Trees, audit, and visualisation */
.tree-card { overflow: auto; }
.tree { list-style: none; padding-left: 1.25rem; }
.tree.root { margin: 0; padding: 1.2rem; }
.tree summary { padding: .4rem; cursor: pointer; border-radius: var(--radius-xs); }
.tree summary:hover { background: var(--surface-subtle); }
.tree-type { color: var(--text-muted); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.audit-list { padding-left: 1.2rem; }
.audit-list li { display: grid; grid-template-columns: 1fr auto; gap: .4rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.warehouse-3d-host { position: relative; width: 100%; min-height: 12rem; overflow: hidden; border-radius: var(--radius-md); }
.warehouse-3d-canvas { display: block; width: 100%; height: 68vh; background: #fbfcfe; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: grab; touch-action: none; }
.warehouse-3d-occupancy-legend {
    position: absolute; right: .75rem; top: .75rem; z-index: 4; display: flex; align-items: center; gap: .75rem;
    padding: .42rem .65rem; color: #53637a; background: rgb(255 255 255 / 92%); border: 1px solid rgb(207 217 230 / 85%);
    border-radius: 99px; box-shadow: 0 5px 16px rgb(27 42 67 / 10%); backdrop-filter: blur(8px); font-size: .58rem;
    pointer-events: none;
}
.warehouse-3d-occupancy-legend span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.warehouse-3d-occupancy-legend i { width: .58rem; height: .58rem; border: 1px solid; border-radius: .18rem; }
.warehouse-3d-occupancy-legend .is-empty { background: #e9eef5; border-color: #8795a8; }
.warehouse-3d-occupancy-legend .is-partial { background: #93c5fd; border-color: #2563a8; }
.warehouse-3d-occupancy-legend .is-full { background: #36b88a; border-color: #06664e; }
.warehouse-3d-occupancy-legend .is-multi-sku { background: #f6b94a; border-color: #a85b08; }
.warehouse-3d-occupancy-legend .is-counted { background: #ede9fe; border-color: #7c3aed; }
@media (max-width: 720px) {
    .warehouse-3d-occupancy-legend { top: auto; right: .55rem; bottom: .55rem; gap: .5rem; }
}
.warehouse-3d-loading {
    position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center;
    gap: .35rem; color: #334158; text-align: center;
    background: linear-gradient(145deg, rgb(248 250 254 / 98%), rgb(238 243 252 / 98%));
    backdrop-filter: blur(4px); transition: opacity .2s ease;
}
.warehouse-3d-loading::before {
    content: ""; position: absolute; inset: 12% 8%; opacity: .45; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 8%, #dbe4f2 8.2% 8.5%);
    mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 70%, transparent);
}
.warehouse-3d-loading > * { position: relative; z-index: 1; }
.warehouse-3d-spinner {
    width: 2.2rem; height: 2.2rem; margin-bottom: .35rem; border: 3px solid #dce5f5;
    border-top-color: var(--brand); border-radius: 50%; animation: warehouse-loading-spin .8s linear infinite;
}
.warehouse-3d-loading strong { font-size: .78rem; font-weight: 600; }
.warehouse-3d-loading small { color: #7b889b; font-size: .62rem; }
@keyframes warehouse-loading-spin { to { transform: rotate(360deg); } }
.warehouse-3d-canvas:active { cursor: grabbing; }
.warehouse-3d-canvas[data-interaction-mode="pan"] { cursor: move; }
.readonly-simulation-drawer { grid-template-rows: auto minmax(0, 1fr); }
.cycle-count-workspace-drawer { gap: .75rem; background: #f5f7fb; }
.cycle-count-workspace-drawer .inward-workspace-heading {
    grid-template-columns: minmax(18rem, .72fr) minmax(38rem, 1.55fr) auto; gap: 1rem;
    margin: 0; padding: 0 0 .75rem; background: transparent;
}
.cycle-count-workspace-drawer .inward-workspace-title h2 { font-size: 1.08rem; }
.cycle-count-navigator { grid-template-columns: repeat(4, minmax(8rem, 1fr)); max-width: none; }
.cycle-count-navigator .searchable-select-input { background: #fff; }
.cycle-count-progress-panel {
    display: grid; grid-template-columns: auto minmax(10rem, 1fr) auto auto; align-items: center; gap: .8rem;
    flex: 0 0 auto; padding: .65rem .75rem; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.cycle-count-progress-copy { display: flex; align-items: center; gap: .6rem; min-width: 17rem; }
.cycle-count-progress-copy > div { display: grid; gap: .04rem; }
.cycle-count-progress-copy > div > span { color: var(--text-muted); font-size: .5rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cycle-count-progress-copy strong { color: #26344a; font-size: .68rem; }
.cycle-count-progress-copy small { color: var(--text-muted); font-size: .54rem; }
.cycle-count-progress-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--brand); background: var(--brand-soft); border-radius: .55rem; }
.cycle-count-progress-icon .nav-icon { width: .85rem; height: .85rem; }
.cycle-count-progress-track { height: .42rem; overflow: hidden; background: #e8edf5; border-radius: 99px; }
.cycle-count-progress-track span { display: block; height: 100%; min-width: 0; background: linear-gradient(90deg, var(--brand), #6986ed); border-radius: inherit; transition: width .25s ease; }
.cycle-count-progress-percent { min-width: 2.7rem; color: #344258; font-size: .7rem; text-align: right; }
.cycle-count-next-button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-width: 11.5rem; color: var(--brand); background: #f7f9ff; border-color: #cbd6f2; box-shadow: none; font-size: .62rem; }
.cycle-count-next-button:hover:not(:disabled) { color: #fff; background: var(--brand); border-color: var(--brand); }
.cycle-count-next-button .nav-icon { width: .72rem; height: .72rem; }
.cycle-count-scene-panel { flex: 1 1 auto; min-height: 0; padding: .65rem; background: #eef2f7; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.cycle-count-scene-panel .warehouse-3d-host,
.cycle-count-scene-panel .warehouse-3d-canvas { width: 100%; height: 100%; min-height: 0; }
.cycle-count-scene-locator {
    position: absolute; top: .75rem; left: 50%; z-index: 16; display: flex; align-items: center; gap: .35rem;
    width: min(31rem, calc(100% - 31rem)); transform: translateX(-50%);
}
.cycle-count-scene-locator .searchable-select { flex: 1 1 auto; min-width: 0; }
.cycle-count-scene-locator .searchable-select-input {
    min-height: 2.35rem; background: rgb(255 255 255 / 96%); border-color: #d5deeb;
    box-shadow: 0 7px 20px rgb(35 53 83 / 12%); backdrop-filter: blur(8px);
}
.cycle-count-scene-locator > .icon-button {
    width: 2.35rem; height: 2.35rem; color: var(--brand); background: rgb(255 255 255 / 96%);
    border-color: #d5deeb; box-shadow: 0 7px 20px rgb(35 53 83 / 12%); backdrop-filter: blur(8px);
}
@media (max-width: 900px) {
    .cycle-count-scene-locator { top: 3.65rem; width: min(30rem, calc(100% - 1.5rem)); }
}
.cycle-count-location-detail { right: .85rem; bottom: .85rem; width: min(21rem, calc(100% - 1.7rem)); }
.cycle-count-location-detail > header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
.cycle-count-location-state { align-self: center; padding: .18rem .42rem; border: 1px solid; border-radius: 99px; font-size: .5rem; font-weight: 750; }
.cycle-count-location-state.is-counted { color: #74ddb8; background: rgb(29 145 105 / 16%); border-color: rgb(104 211 173 / 30%); }
.cycle-count-location-state.is-pending { color: #f4c36b; background: rgb(197 132 27 / 14%); border-color: rgb(232 178 84 / 28%); }
.cycle-count-action { min-height: 2.05rem; color: #fff; background: rgb(76 111 202 / 42%); border-color: rgb(145 170 233 / 45%); }
.cycle-count-action:hover:not(:disabled) { background: #4165cf; border-color: #6f8de0; }
.readonly-simulation-drawer > .inward-workspace-heading > .icon-button {
    grid-column: 3; justify-self: end; margin-left: auto;
}
.readonly-simulation-zone { min-width: min(24rem, 34vw); }
.readonly-simulation-zone label { display: grid; gap: .25rem; margin: 0; }
.readonly-simulation-zone label > span { color: #718097; font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.readonly-simulation-summary {
    display: grid; grid-template-columns: auto auto minmax(14rem, 1fr); align-items: center; flex: 0 0 auto;
    gap: .55rem; padding: .65rem 0; color: #66758c; font-size: .68rem;
}
.readonly-summary-item {
    display: flex; align-items: center; gap: .55rem; min-width: 10rem; padding: .5rem .65rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
}
.readonly-summary-item > div { display: grid; gap: .04rem; }
.readonly-summary-item > div > span { color: var(--text-muted); font-size: .54rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.readonly-summary-item strong { color: #26344a; font-size: .82rem; }
.readonly-summary-icon {
    display: grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
    color: var(--brand); background: var(--brand-soft); border-radius: .5rem;
}
.readonly-summary-icon .nav-icon { width: .8rem; height: .8rem; }
.readonly-summary-context { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; min-width: 0; padding-right: .75rem; }
.readonly-summary-context strong { color: #344258; font-weight: 700; }
.readonly-summary-status { flex: 0 0 auto; width: .45rem; height: .45rem; background: var(--success); border: 2px solid #d9f4e9; border-radius: 50%; box-sizing: content-box; }
.readonly-simulation-scene { flex: 1 1 auto; min-height: 0; margin: .75rem; }
.readonly-simulation-scene .warehouse-3d-host,
.readonly-simulation-scene .warehouse-3d-canvas { height: 100%; min-height: 0; }
.readonly-simulation-view-only { grid-template-columns: minmax(0, 1fr); }
.readonly-location-detail { width: min(21rem, calc(100% - 1.8rem)); padding: .65rem; }
.readonly-location-detail .visual-hierarchy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readonly-inventory-panel { display: flex; flex-direction: column; padding: 0; background: #f7f9fc; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }
.readonly-inventory-header {
    position: sticky; top: 0; z-index: 5; flex: 0 0 auto; margin: 0; padding: .8rem;
    background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px);
}
.readonly-inventory-count {
    display: inline-grid; place-items: center; min-width: 1.65rem; height: 1.65rem; padding: 0 .4rem;
    color: var(--brand); background: var(--brand-soft); border-radius: 99px; font-size: .62rem; font-weight: 750;
}
.readonly-inventory-search {
    position: sticky; top: 3.55rem; z-index: 4; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
    padding: .6rem .7rem; background: rgb(247 249 252 / 96%); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px);
}
.readonly-inventory-search input { width: 100%; min-height: 2.25rem; background: #fff; font-size: .65rem; }
.readonly-inventory-search > span { flex: 0 0 auto; color: var(--text-muted); font-size: .54rem; white-space: nowrap; }
.readonly-relocation-notice { display: flex; align-items: flex-start; gap: .65rem; margin: .8rem; padding: .8rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.readonly-relocation-notice > div { display: grid; gap: .18rem; }
.readonly-relocation-notice strong, .readonly-inventory-empty strong { color: #334158; font-size: .72rem; }
.readonly-relocation-notice div span, .readonly-inventory-empty span { color: var(--text-muted); font-size: .62rem; line-height: 1.45; }
.readonly-inventory-empty { display: grid; place-items: center; gap: .2rem; margin: .8rem; min-height: 7rem; padding: 1rem; text-align: center; background: #fff; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.readonly-inventory-list { order: 2; display: grid; gap: .5rem; padding: .7rem; }
.readonly-inventory-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: .35rem .7rem;
    padding: .7rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.readonly-inventory-item:hover { border-color: #c5d0df; box-shadow: 0 5px 14px rgb(28 43 67 / 8%); }
.readonly-inventory-item.is-selected { background: #f4f7ff; border-color: #9bb0ee; box-shadow: inset 3px 0 var(--brand), var(--shadow-xs); }
.readonly-inventory-copy { display: grid; gap: .2rem; min-width: 0; }
.readonly-inventory-copy > div { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.readonly-inventory-copy strong { overflow: hidden; color: #243249; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.readonly-inventory-copy span { flex: 0 0 auto; color: #7b889a; font-size: .56rem; }
.readonly-inventory-copy small { overflow: hidden; color: #52627a; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.readonly-inventory-quantity { display: flex; align-items: baseline; gap: .25rem; min-width: 0; }
.readonly-inventory-quantity strong { color: #26344a; font-size: .68rem; }
.readonly-inventory-quantity span { color: #8490a2; font-size: .54rem; }
.readonly-relocate-button {
    grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 5.3rem; min-height: 2.15rem; padding: .4rem .55rem; color: var(--brand); background: #f8faff;
    border-color: #cbd6f2; box-shadow: none; font-size: .6rem;
}
.readonly-relocate-button:hover:not(:disabled) { color: #fff; background: var(--brand); border-color: var(--brand); }
.readonly-relocate-button .nav-icon { width: .72rem; height: .72rem; }
.readonly-inventory-item.is-selected .readonly-relocate-button { color: #fff; background: var(--brand); border-color: var(--brand); }
.readonly-inventory-panel .visual-relocation-form {
    position: sticky; top: 3.75rem; z-index: 4; order: 1; display: grid; gap: .7rem; margin: .7rem .7rem 0; padding: .8rem;
    color: var(--text); background: #fff; border: 1px solid #b9c8ed; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgb(38 63 124 / 10%);
}
.readonly-inventory-panel:has(.relocation-modal-backdrop) { overflow: visible; }
.relocation-modal-backdrop {
    position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1rem;
    background: rgb(17 27 44 / 42%); backdrop-filter: blur(3px);
}
.readonly-inventory-panel .visual-relocation-form.relocation-modal {
    position: relative; top: auto; z-index: 1; order: initial; width: min(42rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem); margin: 0; padding: 1rem; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.relocation-modal > header { position: sticky; top: -1rem; z-index: 3; margin: -1rem -1rem 0; padding: 1rem; background: rgb(255 255 255 / 96%); backdrop-filter: blur(8px); }
.readonly-inventory-panel .visual-relocation-form > header { padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.readonly-inventory-panel .visual-relocation-form > header > div { display: grid; gap: .08rem; }
.readonly-inventory-panel .visual-relocation-form > header span { color: var(--text-muted); font-size: .52rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.readonly-inventory-panel .visual-relocation-form > header strong { color: #25334a; font-size: .78rem; }
.readonly-inventory-panel .visual-relocation-form > header button { color: var(--text-muted); border-radius: var(--radius-xs); }
.readonly-inventory-panel .visual-relocation-form > header button:hover { color: var(--danger); background: #fff2f1; }
.relocation-source-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: .6rem; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-xs); }
.relocation-source-summary > div { display: grid; gap: .12rem; min-width: 0; }
.relocation-source-summary span { color: var(--text-muted); font-size: .5rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.relocation-source-summary strong { overflow: hidden; color: #344258; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.relocation-destination-picker { display: grid; gap: .55rem; }
.relocation-destination-picker > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.relocation-destination-picker > header > div { display: grid; gap: .08rem; }
.relocation-destination-picker > header strong { color: #344258; font-size: .65rem; }
.relocation-destination-picker > header span { color: var(--text-muted); font-size: .54rem; }
.relocation-destination-picker > header button { display: grid; place-items: center; width: 1.9rem; min-height: 1.9rem; padding: 0; color: var(--text-muted); background: var(--surface-subtle); box-shadow: none; }
.relocation-destination-picker > header .nav-icon { width: .72rem; height: .72rem; }
.relocation-destination-state { padding: .75rem; color: var(--text-muted); text-align: center; background: var(--surface-subtle); border: 1px dashed var(--border-strong); border-radius: var(--radius-xs); font-size: .6rem; }
.relocation-destination-group { display: grid; gap: .3rem; }
.relocation-destination-group h4 { display: flex; align-items: center; gap: .3rem; margin: 0; color: #46566d; font-size: .58rem; }
.relocation-destination-group h4 small { margin-left: auto; color: var(--text-muted); font-size: .5rem; font-weight: 550; }
.destination-state-dot { width: .45rem; height: .45rem; border-radius: 50%; }
.destination-state-dot.partial { background: #60a5fa; box-shadow: 0 0 0 2px #dbeafe; }
.destination-state-dot.empty { background: #cbd5e1; box-shadow: 0 0 0 2px #f1f5f9; }
.relocation-destination-option {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; min-height: 0;
    padding: .5rem .6rem; text-align: left; background: #fff; border-color: var(--border); box-shadow: none;
}
.relocation-destination-option > span { display: grid; gap: .08rem; min-width: 0; }
.relocation-destination-option > span:last-child { justify-items: end; }
.relocation-destination-option strong { overflow: hidden; color: #344258; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.relocation-destination-option small { overflow: hidden; color: var(--text-muted); font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.relocation-destination-option:hover:not(:disabled) { color: inherit; background: #f7f9ff; border-color: #aebeea; }
.relocation-destination-option.is-selected { background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 3px 0 var(--brand); }
.readonly-inventory-panel .visual-relocation-form label { gap: .3rem; margin: 0; color: #4b5a70; font-size: .62rem; }
.readonly-inventory-panel .visual-relocation-form input,
.readonly-inventory-panel .visual-relocation-form textarea,
.readonly-inventory-panel .visual-relocation-form .searchable-select-input { min-height: 2.35rem; color: var(--text); background: #fff; border-color: var(--border-strong); font-size: .68rem; }
.relocation-form-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; padding-top: .1rem; }
.relocation-form-actions button { justify-content: center; min-height: 2.35rem; }
@media (max-width: 1200px) {
    .cycle-count-workspace-drawer .inward-workspace-heading { grid-template-columns: minmax(0, 1fr) auto; }
    .cycle-count-navigator { grid-column: 1 / -1; grid-row: 2; width: 100%; }
    .cycle-count-progress-panel { grid-template-columns: auto minmax(8rem, 1fr) auto; }
    .cycle-count-next-button { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 900px) {
    .outward-picking-modal { display: flex; height: 100dvh; overflow-y: auto; }
    .outward-picking-modal > h2 { flex: 0 0 auto; }
    .outward-picking-modal .outward-modal-intro { flex: 0 0 auto; }
    .outward-pick-queue { flex: 0 0 auto; max-height: 12rem; }
    .outward-picking-modal .pick-active-grid { display: grid; grid-template-columns: 1fr; }
    .outward-picking-modal .inward-visual-panel { height: 30rem; }
    .outward-picking-modal .pick-confirm-panel { overflow: visible; }
    .outward-order-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-order-summary article { border-bottom: 1px solid var(--border); }
    .outward-order-summary article:nth-child(2n) { border-right: 0; }
    .outward-order-summary article:last-child { grid-column: 1 / -1; border-bottom: 0; }
    .outward-queue-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-queue-summary article:nth-child(2n) { border-right: 0; }
    .outward-queue-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .outward-related-links { grid-template-columns: 1fr; }
    .outward-allocation-result, .outward-modal-intro { align-items: flex-start; flex-direction: column; }
    .readonly-simulation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .readonly-summary-item { min-width: 0; }
    .readonly-summary-context { grid-column: 1 / -1; justify-content: flex-start; padding: .25rem .2rem 0; }
    .readonly-simulation-zone { min-width: 12rem; }
    .readonly-simulation-drawer .inward-workspace-heading { grid-template-columns: minmax(0, 1fr) auto; }
    .readonly-simulation-drawer > .inward-workspace-heading > .icon-button { grid-column: 2; grid-row: 1; }
    .readonly-simulation-zone { grid-column: 1 / -1; width: 100%; }
    .cycle-count-navigator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cycle-count-progress-panel { grid-template-columns: minmax(0, 1fr) auto; }
    .cycle-count-progress-copy { min-width: 0; }
    .cycle-count-progress-track { grid-column: 1 / -1; grid-row: 2; }
    .cycle-count-next-button { grid-row: 3; }
}
.visual-scene-shell { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.visual-scene-toolbar {
    position: absolute; top: .75rem; left: .75rem; z-index: 5; display: flex; align-items: center; gap: .45rem;
    padding: .35rem; background: rgb(255 255 255 / 92%); border: 1px solid rgb(207 217 230 / 85%);
    border-radius: .65rem; box-shadow: 0 6px 18px rgb(27 42 67 / 12%); backdrop-filter: blur(8px);
}
.visual-mode-switch, .visual-zoom-controls { display: flex; align-items: center; gap: .2rem; }
.visual-mode-switch { padding-right: .35rem; border-right: 1px solid #e0e6ee; }
.visual-scene-toolbar button {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2rem; padding: .35rem .55rem;
    color: #617087; background: transparent; border-color: transparent; box-shadow: none; font-size: .62rem;
}
.visual-scene-toolbar button:hover, .visual-scene-toolbar button.active {
    color: var(--brand); background: #edf2ff; border-color: #d3dcf8;
}
.visual-scene-toolbar .nav-icon { width: .78rem; height: .78rem; }
.visual-zoom-controls button { width: 2rem; padding: 0; }
.visual-control-hint {
    position: absolute; left: 50%; bottom: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .65rem; color: #53637a; background: rgb(255 255 255 / 88%); border: 1px solid rgb(211 220 231 / 80%);
    border-radius: 99px; box-shadow: 0 4px 14px rgb(26 42 67 / 10%); font-size: .57rem; transform: translateX(-50%);
    backdrop-filter: blur(7px); pointer-events: none;
}
.visual-control-hint .nav-icon { width: .7rem; height: .7rem; }
.visual-location-detail-page { right: .9rem; bottom: 3.3rem; width: min(24rem, calc(100% - 1.8rem)); }
.visual-bin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgb(174 193 217 / 18%); }
.visual-bin-summary > div { display: grid; gap: .08rem; }
.visual-bin-summary span { color: #8fa4bf; font-size: .49rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.visual-bin-summary strong { color: #f4f8fd; font-size: .67rem; }
.visual-locator .searchable-select { flex: 1 1 30rem; }
.visual-locator .searchable-select-input { min-height: 2.7rem; }
.visual-locator .searchable-select-dropdown { max-height: 20rem; }
.pick-playback-controls { display: flex; gap: .5rem; margin: .85rem 0; }
.visualisation-workspace {
    display: flex; flex-direction: column; height: calc(100dvh - 13rem); min-height: 38rem; padding: .75rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.visualisation-workspace-header {
    position: relative; z-index: 10; display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(14rem, .65fr) minmax(22rem, 1.15fr);
    align-items: end; gap: .8rem; flex: 0 0 auto; padding-bottom: .7rem; border-bottom: 1px solid var(--border);
}
.visualisation-workspace-copy { display: grid; gap: .08rem; align-self: center; }
.visualisation-workspace-copy > span { color: #8491a5; font-size: .54rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visualisation-workspace-copy > strong { color: #24334a; font-size: .82rem; }
.visualisation-workspace-copy > small { color: #738197; font-size: .59rem; }
.visualisation-workspace-filter label { display: grid; gap: .25rem; margin: 0; }
.visualisation-workspace-filter label > span { color: #718097; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.visualisation-workspace-filter .searchable-select, .visualisation-workspace-filter .searchable-select-input { width: 100%; }
.visualisation-workspace-filter .searchable-select-input { min-height: 2.45rem; background: #fff; }
.visualisation-locator-filter .searchable-select-dropdown { max-height: 19rem; }
.visualisation-summary { grid-template-columns: repeat(5, auto) minmax(12rem, 1fr); padding: .65rem 0; }
.visualisation-summary .readonly-summary-item { min-width: 8.75rem; }
.visualisation-summary .readonly-summary-icon.is-partial { color: #2876be; background: #e6f2ff; }
.visualisation-summary .readonly-summary-icon.is-multi-sku { color: #a86600; background: #fff1d5; }
.visualisation-hierarchy-navigator {
    grid-template-columns: repeat(4, minmax(9rem, 1fr));
    flex: 0 0 auto; max-width: none; margin: 0 0 .65rem; padding: .55rem;
    background: #f8faff; border: 1px solid var(--border); border-radius: .65rem;
}
.visualisation-hierarchy-navigator .searchable-select-input { background: #fff; }
.readonly-summary-status.is-offline { background: #93a0b2; border-color: #e5e9ef; }
.visualisation-scene { flex: 1 1 auto; min-height: 0; border: 1px solid #dce3ec; background: #edf1f7; }
.visualisation-scene .warehouse-3d-host, .visualisation-scene .warehouse-3d-canvas { width: 100%; height: 100%; min-height: 0; }
.visual-route-controls { display: flex; align-items: center; gap: .2rem; padding-left: .35rem; border-left: 1px solid #e0e6ee; }
.visualisation-location-detail { right: .85rem; bottom: .85rem; width: min(22rem, calc(100% - 1.7rem)); }
.visualisation-location-detail .visual-bin-stock-list { max-height: 12rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }
@media (max-width: 1100px) {
    .visualisation-workspace { height: auto; min-height: calc(100dvh - 10rem); }
    .visualisation-workspace-header { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visualisation-workspace-copy { grid-column: 1 / -1; }
    .visualisation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .visualisation-summary .readonly-summary-item { min-width: 0; }
    .visualisation-summary .readonly-summary-context { grid-column: 1 / -1; justify-content: flex-start; }
    .visualisation-hierarchy-navigator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visualisation-scene { min-height: 36rem; }
}
@media (max-width: 720px) {
    .visualisation-workspace { min-height: 0; padding: .55rem; }
    .visualisation-workspace-header { grid-template-columns: minmax(0, 1fr); }
    .visualisation-workspace-copy { grid-column: auto; }
    .visualisation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visualisation-summary .readonly-summary-item { min-width: 0; }
    .visualisation-summary .readonly-summary-context { grid-column: 1 / -1; justify-content: flex-start; }
    .visualisation-hierarchy-navigator { grid-template-columns: minmax(0, 1fr); }
    .visualisation-scene { min-height: 31rem; }
    .visual-route-controls { width: 100%; padding: .25rem 0 0; border-top: 1px solid #e0e6ee; border-left: 0; }
}

/* Outward execution — shared portal cards and the standard right-drawer workflow. */
.outward-toolbar { position: sticky; top: 0; z-index: 12; align-items: end; margin-bottom: .85rem; background: rgb(248 250 253 / 94%); backdrop-filter: blur(9px); }
.outward-filter-field { display: grid; flex: 1 1 24rem; gap: .35rem; min-width: 0; }
.outward-filter-field > label { color: #69778d; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-filter-field .searchable-select { width: 100%; }
.outward-filter-clear { color: #65738a !important; background: transparent !important; border-color: transparent !important; box-shadow: none; }
.outward-filter-clear:hover:not(:disabled) { color: var(--brand) !important; background: #eef2ff !important; }
.outward-list-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .85rem; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-list-summary article { display: grid; gap: .12rem; min-width: 0; padding: .72rem .9rem; border-right: 1px solid var(--border); }
.outward-list-summary article:last-child { border-right: 0; }
.outward-list-summary span { color: #8491a5; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-list-summary strong { color: #21314a; font-size: 1rem; line-height: 1.2; }
.outward-list-summary small { overflow: hidden; color: #758399; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; padding: .65rem .8rem; color: #294373; background: #eef3ff; border: 1px solid #cbd8fb; border-radius: var(--radius-md); }
.outward-selection-bar > div { display: flex; align-items: center; gap: .65rem; }
.outward-selection-bar > div:first-child { display: grid; gap: .08rem; }
.outward-selection-bar strong { font-size: .7rem; }
.outward-selection-bar span { color: #667897; font-size: .6rem; }
.outward-selection-bar button { min-height: 2.1rem; }
.outward-selection-bar .nav-icon { width: .7rem; height: .7rem; }
.outward-content-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.outward-section-heading > div { display: grid; gap: .1rem; }
.outward-section-heading span { color: #8995a8; font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.outward-section-heading h2 { margin: 0; color: #26344a; font-size: .86rem; }
.outward-section-heading small { color: #728096; font-size: .64rem; }
.outward-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.outward-table-wrap tbody tr:last-child td { border-bottom: 0; }
.outward-order-lines-table { min-width: 52rem; table-layout: fixed; }
.outward-order-lines-table th, .outward-order-lines-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.outward-order-lines-table th:first-child { width: 18%; }
/* The Pick tasks & picker assignment table shares .outward-order-lines-table's base styling but
   has roughly twice as many columns (picking-strategy fields added alongside the original set) -
   table-layout:fixed's even per-column split at the base class's 52rem min-width squeezed every
   column too narrow, and since nowrap text isn't clipped (no overflow:hidden), the overflow
   painted across neighboring cells instead of wrapping/scrolling. A wider min-width plus explicit
   allocation for the widest columns (checkbox reclaimed from the base class's 18%-for-SKU rule,
   which doesn't apply to this table's checkbox first column; Location/Batch/SKU name need more
   room than the short strategy-field columns) fixes that within the table-wrap's existing
   horizontal scroll, rather than fighting table-layout's math with a still-too-small width. */
.pick-assign-tasks-table { min-width: 110rem; }
.pick-assign-tasks-table th:first-child { width: 2.75rem; }
.pick-assign-tasks-table th:nth-child(4), .pick-assign-tasks-table td:nth-child(4) { width: 11%; }
.pick-assign-tasks-table th:nth-child(5), .pick-assign-tasks-table td:nth-child(5) { width: 10%; }
.pick-assign-tasks-table th:nth-child(6), .pick-assign-tasks-table td:nth-child(6) { width: 13%; }
.pick-assign-tasks-table thead th { background: linear-gradient(180deg, #f4f7fb, #eef3f8); border-bottom-color: #dce5f0; }
.pick-assign-tasks-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.pick-assign-tasks-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.pick-assign-tasks-table tbody tr:hover { box-shadow: inset 3px 0 0 #6d8bea; }
.pick-assign-tasks-table tbody tr:hover td { background: #f3f7ff; }
.pick-assignment-sequence,
.pick-assignment-location,
.pick-assignment-batch,
.pick-assignment-strategy,
.pick-assignment-quantity,
.pick-assignment-picker { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .16rem .42rem; border: 1px solid; border-radius: 99px; font-size: .62rem; font-weight: 740; white-space: nowrap; }
.pick-assignment-sequence { color: #526078; background: #f1f4f8; border-color: #dce3ec; }
.pick-assignment-location { color: #087b72; background: #effaf8; border-color: #c9e8e2; }
.pick-assignment-batch { color: #9a6514; background: #fff8ec; border-color: #eedbb8; }
.pick-assignment-strategy { color: #7550b4; background: #f5efff; border-color: #dfd0f5; }
.pick-assignment-quantity { justify-content: center; min-width: 2.2rem; color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.pick-assignment-picker.is-unassigned { color: #9a5b00; background: #fff6e5; border-color: #f4d7a2; }
.pick-assignment-picker.is-assigned { color: #087a55; background: #e9f8f2; border-color: #bfe9d8; }

.pick-assignment-filter-card { display: grid; grid-template-columns: minmax(15rem, 1.25fr) minmax(15rem, 1.25fr) minmax(10rem, .8fr) minmax(9rem, .7fr) auto; gap: .65rem; padding: .72rem; background: linear-gradient(110deg, rgb(248 251 255 / 96%), rgb(252 250 255 / 96%)); border-color: #d8e1ee; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.pick-assignment-filter-card .outward-filter-field { display: grid; gap: .3rem; }
.pick-assignment-filter-card select,
.pick-assignment-filter-card input { width: 100%; min-height: 2.7rem; }
.pick-assignment-code-filter { display: grid; gap: .3rem; min-width: 0; color: #69778d; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.pick-assignment-filter-card > button { align-self: end; min-height: 2.7rem; padding-inline: .8rem; white-space: nowrap; }
.pick-assignment-quick-filter { display: inline-flex; width: fit-content; max-width: 100%; margin-top: -.2rem; padding: .28rem; background: #f1f4f9; border-color: #d9e2ef; border-radius: 999px; }
.pick-assignment-quick-filter > .pick-assignment-tabs { display: flex !important; grid-template-columns: none; align-items: center; gap: .2rem; width: auto; min-width: 0; }
.pick-assignment-tabs button { flex: 0 0 auto; width: auto; min-width: 0; min-height: 1.9rem; padding: .32rem .72rem; color: #596981; background: transparent; border-color: transparent; border-radius: 999px; box-shadow: none; font-size: .62rem; white-space: nowrap; }
.pick-assignment-tabs button:hover:not(:disabled) { color: #3159d9; background: #fff; border-color: #d7e0ee; box-shadow: none; transform: none; }
.pick-assignment-tabs button.primary { color: #fff; background: #3159d9; border-color: #3159d9; box-shadow: 0 4px 10px -7px rgb(30 65 170 / 70%); }
.pick-assignment-summary article { position: relative; padding-block: .62rem; }
.pick-assignment-summary article::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6481dc; }
.pick-assignment-summary article.is-open::before { background: #d49b31; }
.pick-assignment-summary article.is-assigned::before { background: #20a27e; }
.pick-assignment-summary article.is-total::before { background: #8059bd; }
.pick-assignment-summary article.is-open strong { color: #986100; }
.pick-assignment-summary article.is-assigned strong { color: #087c64; }
.pick-assignment-summary article.is-total strong { color: #6d4ca9; }
.pick-assignment-review-card .outward-section-heading { padding: .68rem .85rem; background: linear-gradient(110deg, #fafcff, #f6f9ff); }
.pick-assignment-review-table { min-width: 78rem; }
.pick-assignment-review-table thead th { padding-block: .62rem; background: linear-gradient(180deg, #f4f7fb, #eef3f8); border-bottom-color: #dce5f0; }
.pick-assignment-review-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.pick-assignment-review-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.pick-assignment-review-table tbody tr:hover { box-shadow: inset 3px 0 0 #6d8bea; }
.pick-assignment-review-table tbody tr:hover td { background: #f3f7ff; }
.review-order-code { display: inline-flex; padding: .18rem .4rem; color: #2852ba; background: #edf3ff; border: 1px solid #d6e1fb; border-radius: .38rem; }
.review-warehouse-tag,
.review-priority,
.review-progress-tag,
.review-quantity-tag { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .16rem .42rem; border: 1px solid; border-radius: 99px; font-size: .62rem; font-weight: 740; white-space: nowrap; }
.review-warehouse-tag { color: #147896; background: #ebf8fc; border-color: #cce9f2; }
.review-priority { color: #526078; background: #f1f4f8; border-color: #dce3ec; }
.review-priority.is-high,
.review-priority.is-urgent { color: #a14961; background: #fff0f4; border-color: #f0ced9; }
.review-priority.is-low { color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.review-progress-tag { gap: .18rem; color: #3157b8; background: #edf3ff; border-color: #d2defb; }
.review-progress-tag span,
.review-quantity-tag span { color: #718098; font-weight: 650; }
.review-progress-tag em { margin-left: .18rem; padding: .08rem .3rem; color: #986100; background: #fff6e5; border-radius: 99px; font-size: .52rem; font-style: normal; }
.review-quantity-tag { gap: .18rem; color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.pick-assignment-review-table td.actions .row-icon-button { color: #315ed4; background: #f1f5ff; border-color: #d5e0fb; }
.pick-assignment-pager { margin-top: .65rem; }

/* Sales-order bulk import — compact upload and validation workspace. */
.outward-import-upload-card { overflow: hidden; background: #fff; border: 1px solid #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-import-upload-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .68rem .8rem; background: linear-gradient(110deg, #fafcff, #f6f9ff); border-bottom: 1px solid #dfe7f1; }
.outward-import-upload-heading > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: #315bd7; background: #edf2ff; border: 1px solid #d5e0fb; border-radius: .55rem; }
.outward-import-upload-heading .nav-icon { width: .82rem; height: .82rem; }
.outward-import-upload-heading > div { display: grid; gap: .02rem; }
.outward-import-upload-heading small { color: #3159d9; font-size: .53rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-import-upload-heading h2 { margin: 0; color: #263750; font-size: .84rem; }
.outward-import-upload-heading em { padding: .2rem .48rem; color: #6f7d92; background: #eef2f7; border-radius: 99px; font-size: .56rem; font-style: normal; font-weight: 720; }
.outward-import-upload-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(22rem, 7fr); gap: .75rem; padding: .8rem; }
.outward-import-guidance { display: grid; align-content: center; gap: .28rem; min-width: 0; padding: .7rem .75rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .6rem; }
.outward-import-guidance > strong { color: #304057; font-size: .72rem; }
.outward-import-guidance > p { margin: 0; color: #6d7b90; font-size: .62rem; line-height: 1.45; }
.outward-import-policy { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; margin-top: .35rem; padding: .5rem .58rem; background: #fff; border: 1px solid #dce4ee; border-radius: .5rem; }
.outward-import-policy > span { display: grid; gap: .02rem; }
.outward-import-policy strong { color: #425169; font-size: .65rem; }
.outward-import-policy small { color: #7b889b; font-size: .56rem; font-weight: 500; }
.outward-import-dropzone { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; justify-content: start; gap: .06rem .65rem; min-height: 7.5rem; margin: 0; padding: .85rem 1rem; color: #3159d9; background: linear-gradient(120deg, #f5f8ff, #fafbff); border: 1px dashed #aebfeb; border-radius: .65rem; box-shadow: none; cursor: pointer; }
.outward-import-dropzone > span { grid-row: 1 / 3; display: inline-grid; place-items: center; width: 2.45rem; height: 2.45rem; background: #e9efff; border: 1px solid #cedafa; border-radius: .65rem; }
.outward-import-dropzone .nav-icon { width: 1rem; height: 1rem; }
.outward-import-dropzone strong { align-self: end; color: #2f55be; font-size: .76rem; }
.outward-import-dropzone small { align-self: start; color: #75839a; font-size: .59rem; }
.outward-import-dropzone:hover { color: #2347ba; background: #eef3ff; border-color: #7f9be6; }
.outward-import-dropzone.is-uploading { opacity: .7; cursor: wait; }
.outward-import-error { margin: 0 .8rem .8rem; }
.outward-import-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: .7rem; overflow: hidden; background: #fff; border: 1px solid #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-import-summary article { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; min-width: 0; padding: .62rem .7rem; border-right: 1px solid #e1e7ef; }
.outward-import-summary article:last-child { border-right: 0; }
.outward-import-summary article::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6381db; }
.outward-import-summary article > span { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem; color: #315bd4; background: #edf2ff; border-radius: .5rem; }
.outward-import-summary .nav-icon { width: .72rem; height: .72rem; }
.outward-import-summary article > div { display: grid; gap: 0; min-width: 0; }
.outward-import-summary small { color: #7d8a9e; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outward-import-summary strong { color: #24354d; font-size: .92rem; line-height: 1.2; }
.outward-import-summary .is-valid::before { background: #20a27e; }
.outward-import-summary .is-valid > span { color: #087a68; background: #eaf8f4; }
.outward-import-summary .is-invalid::before { background: #d54b65; }
.outward-import-summary .is-invalid > span { color: #b4233e; background: #fff0f3; }
.outward-import-summary .is-orders::before { background: #d49b31; }
.outward-import-summary .is-orders > span { color: #956000; background: #fff7e8; }
.outward-import-summary .is-imported::before { background: #8059bd; }
.outward-import-summary .is-imported > span { color: #7550b4; background: #f5effd; }
.outward-import-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .7rem; padding: .58rem .65rem; background: linear-gradient(110deg, #fafcff, #f7f9fd); border: 1px solid #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-import-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; min-width: 0; }
.outward-import-file > span:first-child { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #315bd4; background: #edf2ff; border-radius: .5rem; }
.outward-import-file > span:first-child .nav-icon { width: .72rem; height: .72rem; }
.outward-import-file > div { display: grid; gap: .02rem; min-width: 0; }
.outward-import-file small { color: #7d8a9e; font-size: .51rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outward-import-file strong { overflow: hidden; color: #334159; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-import-tools { display: flex; align-items: end; gap: .4rem; flex: none; }
.outward-import-tools label { display: grid; gap: .16rem; color: #7d8a9e; font-size: .51rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outward-import-tools select { min-width: 7.5rem; min-height: 2.2rem; }
.outward-import-tools button { min-height: 2.2rem; white-space: nowrap; }
.outward-import-table-wrap { max-height: min(27rem, 48vh); margin: 0; overflow: auto; border-color: #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-import-table { min-width: 66rem; }
.outward-import-table thead th { top: 0; padding-block: .62rem; background: linear-gradient(180deg, #f4f7fb, #eef3f8); border-bottom-color: #dce5f0; }
.outward-import-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.outward-import-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.outward-import-table tbody tr:hover { box-shadow: inset 3px 0 0 #6d8bea; }
.outward-import-table tbody tr:hover td { background: #f3f7ff; }
.outward-import-row-number { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; color: #526078; background: #f1f4f8; border: 1px solid #dce3ec; border-radius: 99px; font-size: .61rem; font-weight: 760; }
.outward-import-order-code,
.outward-import-sku { display: inline-flex; padding: .18rem .4rem; color: #2852ba; background: #edf3ff; border: 1px solid #d6e1fb; border-radius: .38rem; font-size: .66rem; font-weight: 750; }
.outward-import-sku { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.outward-import-detail { min-width: 26rem; color: #65748a; font-size: .64rem; line-height: 1.4; white-space: normal; }
.outward-import-actions { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .7rem; padding: .58rem .65rem; background: #fff; border: 1px solid #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-import-actions > div { display: flex; align-items: center; gap: .4rem; }
.outward-import-actions button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; }
.outward-import-actions .nav-icon { width: .72rem; height: .72rem; }
.outward-import-actions a { padding: .35rem .45rem; font-size: .65rem; font-weight: 700; }
@media (max-width: 1100px) {
    .pick-assignment-filter-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pick-assignment-filter-card > button { grid-column: 1 / -1; justify-content: center; }
    .outward-import-upload-body { grid-template-columns: 1fr; }
    .outward-import-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .outward-import-summary article:nth-child(3) { border-right: 0; }
    .outward-import-summary article:nth-child(-n+3) { border-bottom: 1px solid #e1e7ef; }
}
@media (max-width: 650px) {
    .pick-assignment-filter-card { grid-template-columns: 1fr; }
    .pick-assignment-filter-card > button { grid-column: auto; }
    .pick-assignment-quick-filter { display: flex; width: 100%; overflow-x: auto; border-radius: var(--radius-md); scrollbar-width: thin; }
    .pick-assignment-tabs { overflow-x: visible; }
    .outward-import-upload-heading { grid-template-columns: auto minmax(0, 1fr); }
    .outward-import-upload-heading em { grid-column: 1 / -1; justify-self: start; }
    .outward-import-upload-body { padding: .6rem; }
    .outward-import-summary { grid-template-columns: 1fr 1fr; }
    .outward-import-summary article { border-right: 1px solid #e1e7ef; border-bottom: 1px solid #e1e7ef; }
    .outward-import-summary article:nth-child(2n) { border-right: 0; }
    .outward-import-summary article:last-child { grid-column: 1 / -1; border-bottom: 0; }
    .outward-import-toolbar,
    .outward-import-actions { align-items: stretch; flex-direction: column; }
    .outward-import-tools,
    .outward-import-actions > div { width: 100%; }
    .outward-import-tools { display: grid; grid-template-columns: 1fr; }
    .outward-import-tools button,
    .outward-import-actions button { justify-content: center; width: 100%; }
    .outward-import-actions > div { align-items: stretch; flex-direction: column; }
}

/* Shipping's list/grid tables hit the same too-narrow-then-overlapping symptom as the pick/assign
   table above, plus a second cause specific to table-layout:fixed: an UNSET column's width comes
   from its header cell's own content ratio, not its body content - so "Status"/"Order"/"Packing/QC"
   (short headers, long badge/code body values) starved themselves even after the min-width bump.
   Fix: give every column an explicit width (not just the widest ones) so none fall back to
   header-based sizing, and keep the ellipsis/overflow safety net above for any value that still
   runs long - never overlap into the next cell again regardless of actual data length. */
.shipping-loads-table { min-width: 99rem; }
.shipping-loads-table th:nth-child(1), .shipping-loads-table td:nth-child(1) { width: 8rem; }
.shipping-loads-table th:nth-child(2), .shipping-loads-table td:nth-child(2) { width: 9rem; }
.shipping-loads-table th:nth-child(3), .shipping-loads-table td:nth-child(3) { width: 6rem; }
.shipping-loads-table th:nth-child(4), .shipping-loads-table td:nth-child(4) { width: 5rem; }
.shipping-loads-table th:nth-child(5), .shipping-loads-table td:nth-child(5) { width: 5rem; }
.shipping-loads-table th:nth-child(6), .shipping-loads-table td:nth-child(6) { width: 5rem; }
.shipping-loads-table th:nth-child(7), .shipping-loads-table td:nth-child(7) { width: 9rem; }
.shipping-loads-table th:nth-child(8), .shipping-loads-table td:nth-child(8) { width: 7rem; }
.shipping-loads-table th:nth-child(9), .shipping-loads-table td:nth-child(9) { width: 8rem; }
.shipping-loads-table th:nth-child(10), .shipping-loads-table td:nth-child(10) { width: 8rem; }
.shipping-loads-table th:nth-child(11), .shipping-loads-table td:nth-child(11) { width: 9rem; }
.shipping-loads-table th:nth-child(12), .shipping-loads-table td:nth-child(12) { width: 11rem; }
.shipping-loads-table th:nth-child(13), .shipping-loads-table td:nth-child(13) { width: 6rem; }
.shipping-loads-table th:nth-child(14), .shipping-loads-table td:nth-child(14) { width: 3rem; }

.shipping-ready-table { min-width: 71.5rem; }
.shipping-ready-table th:nth-child(1), .shipping-ready-table td:nth-child(1) { width: 2.5rem; }
.shipping-ready-table th:nth-child(2), .shipping-ready-table td:nth-child(2) { width: 9rem; }
.shipping-ready-table th:nth-child(3), .shipping-ready-table td:nth-child(3) { width: 7rem; }
.shipping-ready-table th:nth-child(4), .shipping-ready-table td:nth-child(4) { width: 12rem; }
.shipping-ready-table th:nth-child(5), .shipping-ready-table td:nth-child(5) { width: 10rem; }
.shipping-ready-table th:nth-child(6), .shipping-ready-table td:nth-child(6) { width: 6rem; }
.shipping-ready-table th:nth-child(7), .shipping-ready-table td:nth-child(7) { width: 6rem; }
.shipping-ready-table th:nth-child(8), .shipping-ready-table td:nth-child(8) { width: 5rem; }
.shipping-ready-table th:nth-child(9), .shipping-ready-table td:nth-child(9) { width: 6rem; }
.shipping-ready-table th:nth-child(10), .shipping-ready-table td:nth-child(10) { width: 8rem; }

.shipping-orders-table { min-width: 73rem; }
.shipping-orders-table th:nth-child(1), .shipping-orders-table td:nth-child(1) { width: 9rem; }
.shipping-orders-table th:nth-child(2), .shipping-orders-table td:nth-child(2) { width: 7rem; }
.shipping-orders-table th:nth-child(3), .shipping-orders-table td:nth-child(3) { width: 12rem; }
.shipping-orders-table th:nth-child(4), .shipping-orders-table td:nth-child(4) { width: 10rem; }
.shipping-orders-table th:nth-child(5), .shipping-orders-table td:nth-child(5) { width: 6rem; }
.shipping-orders-table th:nth-child(6), .shipping-orders-table td:nth-child(6) { width: 6rem; }
.shipping-orders-table th:nth-child(7), .shipping-orders-table td:nth-child(7) { width: 6rem; }
.shipping-orders-table th:nth-child(8), .shipping-orders-table td:nth-child(8) { width: 5rem; }
.shipping-orders-table th:nth-child(9), .shipping-orders-table td:nth-child(9) { width: 9rem; }
.shipping-orders-table th:nth-child(10), .shipping-orders-table td:nth-child(10) { width: 3rem; }

.shipping-boxes-table { min-width: 83rem; }
.shipping-boxes-table th:nth-child(1), .shipping-boxes-table td:nth-child(1) { width: 8rem; }
.shipping-boxes-table th:nth-child(2), .shipping-boxes-table td:nth-child(2) { width: 10rem; }
.shipping-boxes-table th:nth-child(3), .shipping-boxes-table td:nth-child(3) { width: 12rem; }
.shipping-boxes-table th:nth-child(4), .shipping-boxes-table td:nth-child(4) { width: 9rem; }
.shipping-boxes-table th:nth-child(5), .shipping-boxes-table td:nth-child(5) { width: 6rem; }
.shipping-boxes-table th:nth-child(6), .shipping-boxes-table td:nth-child(6) { width: 6rem; }
.shipping-boxes-table th:nth-child(7), .shipping-boxes-table td:nth-child(7) { width: 9rem; }
.shipping-boxes-table th:nth-child(8), .shipping-boxes-table td:nth-child(8) { width: 11rem; }
.shipping-boxes-table th:nth-child(9), .shipping-boxes-table td:nth-child(9) { width: 9rem; }
.shipping-boxes-table th:nth-child(10), .shipping-boxes-table td:nth-child(10) { width: 3rem; }
.outward-order-lines-table .outward-order-line-action {
    /* Wide enough for two 2rem row-icon-buttons (Edit + Allocate) side by side on a Pending line -
       narrower than this clips/hides the second button even though it's rendered and enabled. */
    position: sticky; right: 0; z-index: 2; display: table-cell; width: 6.5rem; min-width: 6.5rem;
    padding-inline: .65rem; text-align: center; vertical-align: middle; background: #fff;
    box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%);
}
.outward-order-lines-table thead .outward-order-line-action { z-index: 3; background: #f5f7fa; }
.outward-order-lines-table tbody tr:hover .outward-order-line-action { background: #f8faff; }
.outward-order-lines-table .outward-order-line-action .row-icon-button { margin-inline: auto; }
.outward-allocation-lines-table { min-width: 42rem; }
.outward-allocation-lines-table thead th { background: linear-gradient(180deg, #f4f7fb, #eef3f8); }
.outward-allocation-lines-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.outward-allocation-lines-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.outward-allocation-lines-table tbody tr:hover td { background: #f3f7ff; }
.outward-allocation-lines-table tbody tr:hover { box-shadow: inset 3px 0 0 #6d8bea; }
.outward-allocation-lines-table .outward-sku-code { display: inline-flex; padding: .18rem .4rem; color: #2852ba; background: #edf3ff; border: 1px solid #d6e1fb; border-radius: .38rem; font-size: .69rem; line-height: 1.25; }
.outward-quantity-badge { display: inline-flex; justify-content: center; min-width: 2.65rem; padding: .17rem .4rem; border: 1px solid; border-radius: 99px; font-size: .65rem; font-weight: 760; }
.outward-quantity-badge.is-requested { color: #3157b8; background: #edf3ff; border-color: #d2defb; }
.outward-quantity-badge.is-allocated { color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.outward-quantity-badge.is-picked { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.outward-allocation-lines-table .outward-order-line-action { width: 5.8rem; min-width: 5.8rem; }
.outward-allocation-lines-table .outward-order-line-action .row-icon-button { display: inline-grid; margin: 0 .12rem; }
.outward-allocation-lines-table .outward-order-line-action .row-icon-button.is-edit { color: #315ed4; background: #f1f5ff; border-color: #d5e0fb; }
.outward-allocation-lines-table .outward-order-line-action .row-icon-button.is-allocate { color: #7550b4; background: #f7f2fd; border-color: #e4d9f4; }
.outward-orders-table { min-width: 58rem; }
.outward-orders-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.outward-orders-table tbody tr:hover td { background: #f8faff; }
.outward-orders-table tbody tr.selected-row td { background: #eef3ff; }
.outward-orders-table td.actions { display: table-cell; vertical-align: middle; }
.outward-orders-table th:first-child, .outward-orders-table td:first-child { width: 3.25rem; text-align: center; }
.outward-orders-table td:first-child input { display: block; margin: 0 auto; }
.outward-orders-table .outward-order-action { position: sticky; right: 0; z-index: 2; width: 3.75rem; background: white; box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%); }
.outward-orders-table .outward-order-action .row-icon-button { margin-inline: auto; }
.outward-orders-table thead th:last-child { position: sticky; right: 0; z-index: 3; background: #f5f7fa; }
.outward-orders-table tr:hover .outward-order-action { background: #f8faff; }
.outward-orders-table tr.selected-row .outward-order-action { background: #eef3ff; }
.outward-wave-section { margin-top: .85rem; }
.outward-wave-progress { display: grid; grid-template-columns: auto minmax(10rem, 1fr) auto; align-items: center; gap: .7rem; margin-bottom: .85rem; padding: .65rem .8rem; background: #f8faff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.outward-wave-progress > div:first-child { display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; }
.outward-wave-progress span { color: #7e8b9f; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-wave-progress strong { color: #2448b8; font-size: .78rem; }
.outward-wave-progress small { color: #718097; font-size: .6rem; white-space: nowrap; }
.outward-wave-progress-track { height: .42rem; overflow: hidden; background: #e3e9f3; border-radius: 99px; }
.outward-wave-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #3157d5, #1ca477); border-radius: inherit; transition: width .25s ease; }
.outward-wave-orders-table { min-width: 52rem; }
.outward-wave-orders-table th, .outward-wave-orders-table td { white-space: nowrap; }
.outward-wave-orders-table td.actions { display: table-cell; vertical-align: middle; }
.outward-wave-orders-table .outward-order-action { position: sticky; right: 0; z-index: 2; width: 3.75rem; background: white; box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%); }
.outward-wave-orders-table thead th:last-child { position: sticky; right: 0; z-index: 3; background: #f5f7fa; }
.outward-wave-orders-table tbody tr:hover td { background: #f8faff; }
.outward-wave-orders-table tbody tr:hover .outward-order-action { background: #f8faff; }
.outward-wave-orders-table .outward-order-action .row-icon-button { margin-inline: auto; }
.outward-wave-workspace > .outward-section-heading { position: relative; z-index: 3; }
.outward-wave-launch { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem; background: linear-gradient(100deg, #f5f8ff, #fff); border: 1px solid #d6e0f4; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-wave-launch-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; color: var(--brand); background: #e9efff; border-radius: .65rem; }
.outward-wave-launch-icon .nav-icon { width: 1rem; height: 1rem; }
.outward-wave-launch > div:nth-child(2) { display: grid; gap: .1rem; min-width: 0; }
.outward-wave-launch span { color: #7d8a9e; font-size: .54rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-wave-launch strong { color: #25344c; font-size: .76rem; }
.outward-wave-launch small { color: #6f7d92; font-size: .61rem; }
.outward-wave-launch > button { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.outward-wave-launch > button .nav-icon { width: .72rem; height: .72rem; }
.pick-task-status-filter { flex: 0 1 12rem; }
.pick-task-status-filter select { width: 100%; min-height: 2.7rem; }
.pick-task-filter-card { gap: .65rem; padding: .72rem; background: linear-gradient(110deg, rgb(248 251 255 / 96%), rgb(252 250 255 / 96%)); border-color: #d8e1ee; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.pick-task-filter-card > button { min-height: 2.7rem; padding-inline: .85rem; white-space: nowrap; }
.pick-task-filter-card > button .nav-icon { width: .72rem; height: .72rem; }
.pick-task-summary { border-color: #dbe4ef; box-shadow: var(--shadow-xs); }
.pick-task-summary article { position: relative; padding: .66rem .85rem .62rem; background: linear-gradient(180deg, #fff, #fbfcff); }
.pick-task-summary article::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6381db; }
.pick-task-summary article.is-reserved::before { background: #d49b31; }
.pick-task-summary article.is-picked::before { background: #20a27e; }
.pick-task-summary article.is-units::before { background: #8b68c7; }
.pick-task-summary article.is-reserved strong { color: #986100; }
.pick-task-summary article.is-picked strong { color: #087c64; }
.pick-task-summary article.is-units strong { color: #6d4ca9; }
.pick-task-queue-card .outward-section-heading { padding: .68rem .85rem; background: linear-gradient(110deg, #fafcff, #f6f9ff); }
.pick-task-queue-card .outward-section-heading h2 { font-size: .82rem; }
.pick-task-table { min-width: 64rem; table-layout: auto; }
.pick-task-table th, .pick-task-table td { white-space: nowrap; }
.pick-task-table thead th { padding-block: .62rem; color: #5c6d86; background: linear-gradient(180deg, #f6f9fd, #eef3f9); border-bottom-color: #dce5f0; font-size: .59rem; letter-spacing: .075em; }
.pick-task-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.pick-task-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.pick-task-table tbody tr:hover { box-shadow: inset 3px 0 #5a78df; }
.pick-task-table tbody tr:hover td { background: #f3f7ff; }
.pick-task-table td { height: 3.65rem; color: #43536b; font-size: .68rem; }
.pick-task-table td.actions { display: table-cell; vertical-align: middle; }
.pick-task-table th:last-child, .pick-task-table td:last-child { position: sticky; right: 0; width: 5.5rem; min-width: 5.5rem; }
.pick-task-table th:last-child { z-index: 3; background: linear-gradient(180deg, #f6f9fd, #eef3f9); }
.pick-task-table td:last-child { z-index: 2; background: white; box-shadow: -10px 0 14px -15px rgb(31 47 73 / 75%); }
.pick-task-table tbody tr:nth-child(even) td:last-child { background: #fbfcfe; }
.pick-task-table tbody tr:hover td:last-child { background: #f8faff; }
.pick-task-table td.actions > button { display: inline-grid; margin: 0 .12rem; }
.pick-task-sequence { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .32rem; color: #526078; background: #f1f4f8; border: 1px solid #dce3ec; border-radius: 99px; font-size: .62rem; font-weight: 780; }
.pick-task-code { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .2rem .45rem; border: 1px solid; border-radius: .42rem; box-shadow: none; }
.pick-task-code :is(a, button) {
    width: auto; min-width: 0; min-height: 0; padding: 0; color: inherit; background: transparent;
    border: 0; border-radius: 0; box-shadow: none; font-size: .66rem; font-weight: 720;
    line-height: 1.25; text-decoration: none;
}
.pick-task-code :is(a, button):hover:not(:disabled) { color: inherit; background: transparent; border-color: transparent; box-shadow: none; text-decoration: none; transform: none; }
.pick-task-code :is(a, button):focus-visible { outline: 2px solid rgb(49 89 217 / 22%); outline-offset: .16rem; box-shadow: none; }
.pick-task-code .nav-icon { color: currentColor; opacity: .56; }
.pick-task-code.is-location { color: #087b72; background: #effaf8; border-color: #c9e8e2; }
.pick-task-code.is-sku { color: #3159c9; background: #f1f5ff; border-color: #d4def7; }
.pick-task-code.is-batch { color: #9a6514; background: #fff8ec; border-color: #eedbb8; }
.pick-task-empty { color: #95a1b2; }
.pick-task-quantity { display: inline-grid; place-items: center; min-width: 2rem; height: 1.45rem; padding: 0 .38rem; border-radius: 99px; font-size: .61rem; font-weight: 800; }
.pick-task-quantity.is-reserved { color: #087a68; background: #eaf8f4; border: 1px solid #c7e9df; }
.pick-task-quantity.is-picked { color: #7550b4; background: #f5effd; border: 1px solid #e3d7f3; }
.pick-task-confirm { color: #176e62; background: #eaf8f4; border-color: #c4e6dc; }
.pick-task-override { color: #7550b4; background: #f5effd; border-color: #e2d5f2; }
.pick-task-pager { margin-top: .65rem; }
.pick-task-pager button { min-height: 2.15rem; }
@media (max-width: 780px) {
    .pick-task-filter-card { position: relative; top: auto; }
    .pick-task-status-filter { flex: 1 1 100%; }
    .pick-task-filter-card > button { width: 100%; justify-content: center; }
    .pick-task-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pick-task-summary article:nth-child(2) { border-right: 0; }
    .pick-task-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.outward-record-link, .outward-sku-code { color: #17366f; font-size: .72rem; font-weight: 750; }
.outward-row-action { color: var(--brand); background: #f4f7ff; border-color: #ced9fa; }
.outward-order-detail-page { display: grid; gap: .85rem; min-width: 0; }
.outward-order-detail-page .portal-page-header { align-items: flex-start; margin-bottom: 0; }
.outward-order-detail-page .portal-page-actions { gap: .45rem; }
.outward-order-detail-page .portal-page-actions :is(button, .button) { min-height: 2.35rem; padding: .48rem .72rem; }
.outward-order-context-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(19rem, 5fr); gap: .85rem; min-width: 0; }
.outward-order-overview,
.outward-delivery-card { min-width: 0; overflow: hidden; background: white; border: 1px solid #dce4ee; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-compact-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; padding: .58rem .7rem; background: linear-gradient(110deg, #fafcff, #f6f9ff); border-bottom: 1px solid #e0e7ef; }
.outward-compact-heading > span { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #315ed4; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .52rem; }
.outward-compact-heading.tone-teal > span { color: #087f75; background: #e9f8f5; border-color: #c8e9e2; }
.outward-compact-heading .nav-icon { width: .78rem; height: .78rem; }
.outward-compact-heading > div { display: grid; gap: .02rem; min-width: 0; }
.outward-compact-heading small { color: #7d8a9d; font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-compact-heading h2 { overflow: hidden; margin: 0; color: #283850; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-order-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outward-order-facts article { display: grid; gap: .1rem; min-width: 0; padding: .62rem .7rem; border-right: 1px solid #e2e8f0; }
.outward-order-facts article:last-child { border-right: 0; }
.outward-order-facts span,
.outward-address-list span { color: #8995a8; font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-order-facts strong,
.outward-address-list strong { overflow: hidden; color: #25364e; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-order-facts small,
.outward-address-list small { overflow: hidden; color: #738197; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-order-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #e2e8f0; }
.outward-order-progress article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .26rem .6rem; padding: .55rem .7rem; }
.outward-order-progress article:first-child { border-right: 1px solid #e2e8f0; }
.outward-order-progress article > div { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; min-width: 0; }
.outward-order-progress span { color: #617087; font-size: .62rem; font-weight: 750; }
.outward-order-progress strong { color: #23354e; font-size: .77rem; }
.outward-order-progress strong small { color: #8491a3; font-size: .58rem; font-weight: 650; }
.outward-order-progress progress { grid-column: 1; width: 100%; height: .32rem; overflow: hidden; border: 0; border-radius: 99px; background: #e8edf4; }
.outward-order-progress progress::-webkit-progress-bar { background: #e8edf4; border-radius: 99px; }
.outward-order-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #315bd7, #4a7ae8); border-radius: 99px; }
.outward-order-progress article:last-child progress::-webkit-progress-value { background: linear-gradient(90deg, #0d8a78, #28a88e); }
.outward-order-progress em { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: .16rem .38rem; color: #69778c; background: #f0f3f7; border-radius: 99px; font-size: .57rem; font-style: normal; font-weight: 730; white-space: nowrap; }
.outward-address-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: calc(100% - 3.06rem); }
.outward-address-list article { display: flex; flex-direction: column; justify-content: center; gap: .12rem; min-width: 0; padding: .65rem .7rem; border-right: 1px solid #e2e8f0; }
.outward-address-list article:last-child { border-right: 0; }
.outward-address-list strong,
.outward-address-list small { overflow: visible; text-overflow: clip; white-space: normal; }
.outward-address-list strong { line-height: 1.35; overflow-wrap: anywhere; }
.outward-address-list small { line-height: 1.4; }
.outward-empty-order { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .68rem .75rem; background: linear-gradient(110deg, #f4f9ff, #f7fbff); border: 1px solid #cfe1f2; border-left: 3px solid #2583b8; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-empty-order > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: #315ed4; background: white; border: 1px solid #d7e3f3; border-radius: .55rem; }
.outward-empty-order > span .nav-icon { width: .8rem; height: .8rem; }
.outward-empty-order > div { display: grid; gap: .04rem; }
.outward-empty-order small { color: #4c72c9; font-size: .5rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-empty-order strong { color: #293a52; font-size: .75rem; }
.outward-empty-order p { margin: 0; color: #718096; font-size: .6rem; }
.outward-empty-order button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; white-space: nowrap; }
.outward-empty-order button .nav-icon { width: .7rem; height: .7rem; }
.outward-fulfilment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .85rem; min-width: 0; }
.outward-fulfilment-grid > :only-child { grid-column: 1 / -1; }
.outward-adaptive-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .85rem; min-width: 0; }
.outward-adaptive-columns.single-column { grid-template-columns: minmax(0, 1fr); }
.outward-dynamic-column { display: grid; align-content: start; gap: .85rem; min-width: 0; }
.outward-stage-card { min-width: 0; }
.outward-stage-card .outward-section-heading { padding: .58rem .7rem; background: linear-gradient(110deg, #fafcff, #f7f9fd); }
.outward-stage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; border-bottom: 1px solid #e1e8f1; }
.outward-stage-metrics .packing-card { position: relative; display: grid; gap: .16rem; min-width: 0; padding: .68rem .75rem; background: #fff; border-right: 1px solid #e1e8f1; }
.outward-stage-metrics .packing-card:last-child { border-right: 0; }
.outward-stage-metrics .packing-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6481dc; }
.outward-stage-metrics .packing-card.is-progress::before { background: #0c9a82; }
.outward-stage-metrics .packing-card.is-complete::before { background: #8059bd; }
.outward-stage-metrics h3 { margin: 0; color: #7d8a9e; font-size: .55rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.outward-stage-metrics p { margin: 0; color: #25364e; font-size: .9rem; font-weight: 780; line-height: 1.25; font-variant-numeric: tabular-nums; }
.outward-stage-metrics p span { color: #8491a4; font-size: .67rem; font-weight: 650; }
.outward-stage-card > .outward-table-wrap { max-height: 14rem; overflow: auto; }
.outward-stage-card > .outward-table-wrap thead th { top: 0; background: linear-gradient(180deg, #f4f7fb, #eef3f8); }
.outward-stage-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; padding: .65rem .7rem; }
.outward-stage-empty > span { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; color: #167b9b; background: #eaf8fc; border: 1px solid #cde9f1; border-radius: .52rem; }
.outward-stage-empty.tone-violet > span { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.outward-stage-empty.tone-amber > span { color: #9a6500; background: #fff6e5; border-color: #f0d8aa; }
.outward-stage-empty .nav-icon { width: .76rem; height: .76rem; }
.outward-stage-empty > div { display: grid; gap: .05rem; }
.outward-stage-empty strong { color: #334158; font-size: .72rem; }
.outward-stage-empty small { color: #748298; font-size: .62rem; }
.outward-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: .85rem; min-width: 0; }
.outward-secondary-card { min-width: 0; }
.outward-secondary-card.has-content { grid-column: 1 / -1; }
.outward-secondary-card .outward-section-heading { min-height: 3rem; padding: .55rem .7rem; background: linear-gradient(110deg, #fafcff, #f7f9fd); }
.outward-secondary-card.is-compact-empty .outward-section-heading { border-bottom-color: #e4eaf2; }
.outward-secondary-card.is-compact-empty .outward-stage-empty { min-height: 3.65rem; }
.outward-section-heading > .outward-section-actions { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; min-width: 0; }
.outward-section-actions > button { min-height: 2rem; padding: .35rem .55rem; font-size: .61rem; white-space: nowrap; }
.outward-section-actions > .row-icon-button { width: 2rem; min-width: 2rem; padding: 0; }
.outward-order-detail-page > .outward-related-links { margin-top: 0; }
.outward-order-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: .85rem; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.outward-order-summary article { display: grid; gap: .15rem; min-width: 0; padding: .8rem 1rem; border-right: 1px solid var(--border); }
.outward-order-summary article:last-child { border-right: 0; }
.outward-order-summary span, .outward-queue-summary span { color: #8995a8; font-size: .56rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-order-summary strong { overflow: hidden; color: #1f2d44; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-order-summary small { color: #738197; font-size: .6rem; }
.outward-queue-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: .75rem; overflow: hidden; background: #fbfcfe; border: 1px solid var(--border); border-radius: var(--radius-md); }
.outward-queue-summary article { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .65rem .85rem; border-right: 1px solid var(--border); }
.outward-queue-summary article:last-child { border-right: 0; }
.outward-queue-summary strong { color: #20304a; font-size: 1rem; }
.outward-action-count { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .25rem; color: var(--brand); background: white; border-radius: 99px; font-size: .56rem; }
.outward-allocation-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem 0; padding: .75rem .9rem; border: 1px solid; border-radius: var(--radius-md); }
.outward-allocation-result.is-complete { background: #edf9f4; border-color: #bce6d4; }
.outward-allocation-result.has-shortfall { background: #fff8e8; border-color: #efd08b; }
.outward-allocation-result > div { display: grid; gap: .1rem; }
.outward-allocation-result span { color: #7d899b; font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-allocation-result strong { color: #26344a; font-size: .75rem; }
.outward-allocation-result small { color: #6f7c8f; font-size: .62rem; }
.outward-allocation-result button { display: inline-flex; align-items: center; gap: .35rem; flex: none; }
.outward-allocation-result .nav-icon { width: .7rem; height: .7rem; }
.outward-related-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: .85rem; }
.outward-related-links a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .75rem .85rem; color: #334158; background: #fbfcfe; border: 1px solid var(--border); border-radius: var(--radius-md); }
.outward-related-links a:hover { background: white; border-color: #c8d4e8; text-decoration: none; }
.outward-related-links a > .nav-icon:first-child { width: .9rem; height: .9rem; color: var(--brand); }
.outward-related-links a > .nav-icon:last-child { width: .7rem; height: .7rem; color: #95a2b4; }
.outward-related-links span { display: grid; gap: .08rem; }
.outward-related-links strong { font-size: .7rem; }
.outward-related-links small { color: #7f8c9f; font-size: .59rem; }
.outward-modal-intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; padding: .7rem .8rem; background: #f4f7fd; border: 1px solid #dfe6f2; border-radius: var(--radius-md); }
.outward-modal-intro > div { display: grid; gap: .1rem; }
.outward-modal-intro span { color: #7e8ba0; font-size: .55rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-modal-intro strong { color: #26344a; font-size: .76rem; }
.outward-modal-intro small { max-width: 28rem; color: #6f7d91; font-size: .62rem; line-height: 1.45; }
.outward-modal-intro.is-warning { background: #fff8e8; border-color: #efd08b; }
.outward-modal-intro.is-danger { background: #fff1f2; border-color: #efc2c7; }
.outward-form-modal { width: clamp(32rem, 42vw, 46rem); }
.outward-picking-modal {
    width: min(96vw, 108rem); height: 100dvh; padding: 1rem; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(25rem, .46fr);
    grid-template-rows: auto auto minmax(9rem, .34fr) minmax(16rem, .66fr); gap: .7rem;
}
.outward-picking-modal > h2 { grid-column: 1 / -1; grid-row: 1; position: relative; top: auto; margin: -1rem -1rem 0; }
.outward-picking-modal > .outward-modal-intro { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.outward-modal-close { position: fixed; top: .85rem; right: .85rem; z-index: 85; }
.outward-pick-queue {
    grid-column: 2; grid-row: 3; min-width: 0; min-height: 0; max-height: none; margin: 0; overflow: auto;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent;
}
.outward-pick-queue table { min-width: 45rem; table-layout: auto; }
.outward-pick-queue th, .outward-pick-queue td { white-space: nowrap; }
.outward-pick-queue th:nth-child(2), .outward-pick-queue td:nth-child(2) { min-width: 15rem; }
.outward-pick-queue th:nth-child(3), .outward-pick-queue td:nth-child(3) { min-width: 7rem; }
.outward-pick-queue th:nth-child(4), .outward-pick-queue td:nth-child(4) { min-width: 10rem; }
.outward-pick-queue th:last-child, .outward-pick-queue td:last-child {
    position: sticky; right: 0; z-index: 2; width: 3.5rem; min-width: 3.5rem;
    background: #fff; box-shadow: -8px 0 12px -12px rgb(28 43 68 / 55%);
}
.outward-pick-queue thead th:last-child { z-index: 4; background: #f5f7fa; }
.outward-pick-queue tr.selected-row td:last-child { background: var(--success-soft); }
.outward-pick-queue td:last-child .row-icon-button { margin-inline: auto; }
.outward-picking-modal .pick-active-grid { display: contents; }
.outward-picking-modal .inward-visual-panel { grid-column: 1; grid-row: 3 / 5; min-height: 0; height: 100%; }
.outward-picking-modal .warehouse-3d-host, .outward-picking-modal .warehouse-3d-canvas { height: 100%; min-height: 0; }
.outward-picking-modal .pick-confirm-panel {
    grid-column: 2; grid-row: 4; min-height: 0; align-self: stretch; overflow: auto;
    overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent;
}
.outward-picking-modal .placement-controls { min-height: 100%; }
.outward-pick-sequence { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; color: var(--brand); background: #edf2ff; border-radius: 99px; font-size: .57rem; font-weight: 800; }
.outward-pick-guidance-hud {
    position: absolute; top: .72rem; left: 50%; z-index: 6; display: grid;
    grid-template-columns: auto auto; align-items: center; gap: .05rem .48rem; max-width: min(22rem, calc(100% - 20rem));
    padding: .38rem .62rem; color: #26344a; background: rgb(255 252 235 / 94%); border: 1px solid #e3b23f;
    border-radius: .65rem; box-shadow: 0 7px 18px rgb(55 42 8 / 14%); transform: translateX(-50%);
    backdrop-filter: blur(8px); pointer-events: none;
}
.outward-guidance-bulb { grid-row: 1 / 3; font-size: 1.05rem; line-height: 1; }
.outward-pick-guidance-hud > div { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.outward-pick-guidance-hud > div span { flex: none; color: #9a6500; font-size: .51rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.outward-pick-guidance-hud > div strong { overflow: hidden; color: #28364b; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-pick-guidance-hud > small { grid-column: 2; overflow: hidden; color: #7b8798; font-size: .49rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-pick-location-card {
    width: min(23rem, calc(100% - 2rem)); padding: .75rem; color: #334158;
    background: rgb(255 255 255 / 96%); border-color: #d7e0ec; box-shadow: 0 14px 34px rgb(15 28 48 / 24%);
}
.outward-pick-location-card > header { margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid #e2e7ef; }
.outward-pick-location-card > header span { color: #7f8da1; }
.outward-pick-location-card > header strong { color: #20304a; font-size: .7rem; }
.outward-pick-location-card > header em { flex: none; padding: .25rem .45rem; color: #3157d5; background: #edf2ff; border-radius: 99px; font-size: .55rem; font-style: normal; font-weight: 750; }
.outward-pick-packing-badge { display: inline-block; margin: -.35rem 0 .55rem; padding: .22rem .5rem; color: #9a5b12; background: #fdf1de; border-radius: 99px; font-size: .55rem; font-weight: 750; letter-spacing: .02em; }
.outward-pick-stock-identity small.stock-packing { display: block; margin-top: .1rem; color: #9a5b12; font-weight: 600; }
.outward-pick-stock-section > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.outward-pick-stock-section > header span { color: #7d899c; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outward-pick-stock-section > header strong { color: #607089; font-size: .55rem; }
.outward-pick-stock-list { display: grid; gap: .4rem; max-height: 11rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }
.outward-pick-stock-list article { display: grid; gap: .5rem; padding: .55rem; background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: .5rem; }
.outward-pick-stock-list article.is-assigned-row { background: #edf9f4; border-color: #9edbbf; box-shadow: inset 3px 0 #15916c; }
.outward-pick-stock-identity { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.outward-pick-stock-identity > div { display: grid; gap: .08rem; min-width: 0; }
.outward-pick-stock-identity strong { overflow: hidden; color: #1f2f48; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-pick-stock-identity small { color: #7a879a; font-size: .53rem; }
.outward-pick-stock-identity > span { flex: none; padding: .2rem .4rem; color: #147253; background: #dff4ea; border-radius: 99px; font-size: .51rem; font-weight: 750; }
.outward-pick-stock-list dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.outward-pick-stock-list dl div { display: grid; gap: .05rem; min-width: 0; }
.outward-pick-stock-list dt { color: #8a96a8; font-size: .45rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.outward-pick-stock-list dd { margin: 0; color: #26354c; font-size: .6rem; font-weight: 700; }
@media (max-width: 900px) {
    .outward-toolbar { position: relative; align-items: stretch; }
    .outward-filter-field { flex-basis: auto; }
    .outward-list-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-list-summary article:nth-child(2n) { border-right: 0; }
    .outward-list-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
    .outward-selection-bar, .outward-selection-bar > div { align-items: stretch; flex-direction: column; }
    .outward-selection-bar > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
    .outward-wave-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-wave-summary article:last-child { grid-column: 1 / -1; }
    .outward-wave-progress { grid-template-columns: auto 1fr; }
    .outward-wave-progress small { grid-column: 1 / -1; white-space: normal; }
    .outward-wave-launch { grid-template-columns: auto minmax(0, 1fr); }
    .outward-wave-launch > button { grid-column: 1 / -1; justify-content: center; width: 100%; }
    .outward-picking-modal { display: flex; height: 100dvh; overflow-y: auto; }
    .outward-picking-modal > h2, .outward-picking-modal > .outward-modal-intro, .outward-pick-queue { flex: 0 0 auto; }
    .outward-pick-queue { max-height: 12rem; }
    .outward-picking-modal .pick-active-grid { display: grid; grid-template-columns: 1fr; }
    .outward-picking-modal .inward-visual-panel { height: 30rem; }
    .outward-picking-modal .pick-confirm-panel { overflow: visible; }
    .outward-pick-guidance-hud { top: 3.7rem; max-width: calc(100% - 1rem); }
    .outward-order-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-order-context-grid,
    .outward-fulfilment-grid,
    .outward-adaptive-columns,
    .outward-secondary-grid { grid-template-columns: 1fr; }
    .outward-secondary-card.has-content { grid-column: auto; }
    .outward-order-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-order-facts article:nth-child(2) { border-right: 0; }
    .outward-order-facts article:nth-child(-n+2) { border-bottom: 1px solid #e2e8f0; }
    .outward-queue-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-related-links { grid-template-columns: 1fr; }
    .outward-allocation-result, .outward-modal-intro { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
    .outward-order-detail-page .portal-page-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .outward-order-detail-page .portal-page-actions :is(button, .button) { justify-content: center; width: 100%; }
    .outward-order-progress,
    .outward-address-list { grid-template-columns: 1fr; height: auto; }
    .outward-order-progress article:first-child,
    .outward-address-list article { border-right: 0; border-bottom: 1px solid #e2e8f0; }
    .outward-address-list article:last-child { border-bottom: 0; }
    .outward-empty-order { grid-template-columns: auto minmax(0, 1fr); }
    .outward-empty-order button { grid-column: 1 / -1; justify-content: center; width: 100%; }
    .outward-secondary-card .outward-section-heading { align-items: flex-start; }
    .outward-secondary-card .outward-section-actions { flex-wrap: wrap; }
    .outward-stage-metrics { grid-template-columns: 1fr; }
    .outward-stage-metrics .packing-card { border-right: 0; border-bottom: 1px solid #e1e8f1; }
    .outward-stage-metrics .packing-card:last-child { border-bottom: 0; }
}
.search-result-active { background: var(--brand-soft); }
.bin-detail-card {
    margin-top: 1rem; padding: clamp(1rem, 2vw, 1.5rem); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.bin-detail-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.bin-detail-card h3 { margin: .15rem 0 0; }
.legend { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.legend-item { display: flex; align-items: center; gap: .4rem; color: #526078; font-size: .72rem; }
.legend-item::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: .18rem; }
.legend-item.empty::before { background: #f3f5f8; border: 1px solid #cdd5df; }
.legend-item.reserved::before { background: #fff1cc; border: 1px solid #d88a18; }
.legend-item.occupied::before { background: #dff5ec; border: 1px solid #15916c; }
.legend-item.highlighted::before { background: #e9edf2; border: 2px solid var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .65rem .85rem; color: white; background: var(--brand-hover); border-radius: var(--radius-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

@media (min-width: 861px) {
    .app-shell:has(.sidebar-collapse-toggle:checked) { grid-template-columns: 76px minmax(0, 1fr); }
    .app-shell:has(.sidebar-collapse-toggle:checked) .app-sidebar {
        width: 76px; padding: 1rem .6rem .8rem; overflow: visible; scrollbar-width: none;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .shell-collapse-button { left: 65px; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .shell-collapse-button .nav-icon { transform: rotate(0deg); }
    .app-shell:has(.sidebar-collapse-toggle:checked) .app-sidebar::-webkit-scrollbar { display: none; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-header,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav details {
        width: 100%;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-header { justify-content: center; padding-inline: 0; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .brand > span:last-child,
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-section-label,
    .app-shell:has(.sidebar-collapse-toggle:checked) .user-card-info,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-account > .icon-button {
        display: none;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .brand { width: 100%; justify-content: center; margin: 0; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .brand-mark { width: 2.8rem; height: 2.8rem; border-radius: .8rem; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .collapse-button { width: 2.2rem; height: 2.2rem; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav { gap: .35rem; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group { position: relative; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav .nav-flyout { display: none; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group::before {
        content: ""; position: absolute; top: 0; left: 100%; width: 1rem; height: 100%;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:not(.flyout-dismissed):hover > .nav-flyout,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:not(.flyout-dismissed):focus-within > .nav-flyout {
        position: absolute; top: -.35rem; left: calc(100% + .75rem); z-index: 70; display: grid;
        width: max-content; min-width: 13.5rem; max-width: 18rem; max-height: min(28rem, calc(100vh - 2rem));
        gap: .12rem; padding: .55rem; overflow-y: auto; color: #526078; background: rgb(255 255 255 / 98%);
        border: 1px solid #d8e0eb; border-radius: .7rem; box-shadow: 0 16px 38px rgb(20 35 60 / 20%);
        scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; animation: sidebar-flyout-in .14s ease-out both;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:nth-last-child(-n+3):not(.flyout-dismissed):hover > .nav-flyout,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:nth-last-child(-n+3):not(.flyout-dismissed):focus-within > .nav-flyout {
        top: auto; bottom: -.35rem;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:not(.flyout-dismissed):hover::after,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:not(.flyout-dismissed):focus-within::after {
        content: ""; position: absolute; top: 1rem; left: calc(100% + .4rem); z-index: 72;
        width: .7rem; height: .7rem; background: #fff; border-bottom: 1px solid #d8e0eb;
        border-left: 1px solid #d8e0eb; transform: rotate(45deg);
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-flyout > strong {
        display: block; margin: 0 .2rem .3rem; padding: .2rem .35rem .45rem; color: #26344a;
        border-bottom: 1px solid #e6ebf2; font-size: .69rem; letter-spacing: -.01em;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-flyout .nav-link {
        min-height: 2.15rem; margin: 0; padding: .45rem .55rem; border-left: 0; font-size: .72rem; white-space: nowrap;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav-group:has(.nav-link.active) summary {
        color: #2448bc; background: #eef2ff;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav summary,
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-link-top {
        display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; min-height: 3.25rem;
        margin: 0; padding: .5rem 0; gap: 0; font-size: 0; border: 1px solid transparent; border-left: 0;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav summary::after { display: none; }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav summary > .nav-icon,
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav > .nav-link-top > .nav-icon {
        width: 2.15rem; height: 2.15rem; margin: 0; padding: .48rem; border-radius: .65rem;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-nav summary:hover,
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-link-top:hover {
        background: rgb(255 255 255 / .72); border-color: rgb(205 218 238 / .72);
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .nav-link-top.active {
        background: rgb(255 255 255 / .9); border-color: #d4dff2; border-left: 0;
        box-shadow: 0 8px 20px -14px rgb(38 67 137 / .55);
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-account {
        display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; padding: .35rem 0;
        background: transparent; border: 0; border-radius: 0; box-shadow: none;
    }
    .app-shell:has(.sidebar-collapse-toggle:checked) .sidebar-account > .avatar {
        grid-column: 1; width: 2.4rem; height: 2.4rem; margin: 0 auto; font-size: .8rem;
    }
}
@keyframes sidebar-flyout-in {
    from { opacity: 0; transform: translateX(-.35rem); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1180px) {
    .inward-workspace-heading { grid-template-columns: minmax(18rem, 22rem) minmax(28rem, 1fr) auto; }
    .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-grid { grid-template-columns: 1fr; }
    .dashboard-tools-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .inward-workspace-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
    .inward-workspace-heading .visual-hierarchy-navigator { grid-column: 1 / -1; grid-row: 2; max-width: none; }
    .app-shell { display: block; }
    .app-workspace { min-height: 100vh; }
    .app-sidebar { width: min(290px, 88vw); transform: translateX(-105%); box-shadow: var(--shadow-md); transition: transform .2s ease; }
    .app-shell:has(.navigation-toggle:checked) .app-sidebar { transform: translateX(0); }
    .navigation-scrim { position: fixed; inset: 0; z-index: 35; display: block; visibility: hidden; background: rgb(15 23 42 / .5); opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
    .app-shell:has(.navigation-toggle:checked) .navigation-scrim { visibility: visible; opacity: 1; }
    .sidebar-close { display: inline-grid !important; }
    .shell-menu-button { display: inline-grid; top: .75rem; left: .75rem; }
    .shell-collapse-button { display: none; }
    .collapse-button { display: none !important; }
    .topbar { height: 58px; padding: 0 1rem; }
    .topbar-title { display: none; }
    .global-search { display: none; }
    .topbar-actions { margin-left: auto; }
    main { padding-top: 1rem; }
    .dashboard-header { align-items: flex-start; flex-direction: column; }
    .dashboard-actions { justify-content: flex-start; width: 100%; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-header { align-items: flex-start; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .toolbar input, .toolbar select, .toolbar button, .toolbar .searchable-select { width: 100%; }
    .portal-page-header { align-items: flex-start; }
    .control-header { align-items: flex-start; flex-direction: column; }
    .command-layout { grid-template-columns: 1fr; }
    .attention-centre { min-height: 15rem; }
    .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-kpi { border-right: 1px solid #e1e7ef; border-bottom: 1px solid #e1e7ef; }
    .report-kpi:last-child { border-bottom: 0; }
    .report-warehouse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inward-putaway-grid { grid-template-columns: 1fr; }
    .putaway-workspace-backdrop { left: 0; }
    .putaway-workspace-drawer { border-left: 0; border-radius: 0; }
    .putaway-workspace-drawer .inward-putaway-grid { overflow-y: auto; }
    .putaway-workspace-drawer .inward-visual-panel { min-height: 28rem; }
    .putaway-workspace-drawer .inward-placement-panel { height: auto; overflow: visible; }
    .inward-visual-panel .warehouse-3d-canvas, .inward-visual-state { height: 23rem; }
    .signin-page { grid-template-columns: minmax(0, 1fr); }
    .signin-intro { display: none; }
    .signin-panel { min-height: 90dvh; padding: 2rem 1.25rem; }
    .signin-mobile-brand { display: flex; }
}

@media (max-width: 600px) {
    .visual-hierarchy-navigator { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .environment-badge, .topbar-user-copy, .topbar-actions > .icon-button { display: none; }
    .topbar-user { padding: 0; }
    main { padding-inline: .8rem; padding-bottom: 2rem; }
    .site-footer { align-items: flex-start; flex-direction: column; padding-inline: .8rem; }
    .page-header { flex-direction: column; }
    .page-header > button, .page-header > a { width: 100%; text-align: center; }
    .dashboard-header { border-radius: var(--radius-md); }
    .dashboard-actions { align-items: stretch; flex-direction: column; }
    .dashboard-action { width: 100%; }
    .section-heading { align-items: flex-start; flex-direction: column; }
    .kpi-grid, .workspace-grid, .dashboard-grid, .field-grid { grid-template-columns: 1fr; }
    .kpi-card { min-height: 6.5rem; }
    .form-card, .state-card { padding: 1rem; }
    .actions { flex-wrap: wrap; }
    .pager { align-items: stretch; flex-wrap: wrap; }
    .pager button { flex: 1; }
    .modal {
        width: 100vw; padding: 1rem; border-left: 0; border-radius: 0;
    }
    .modal h2 {
        top: -1rem; margin: -1rem -1rem 1rem; padding: 1.15rem 1rem .9rem;
    }
    .modal > footer {
        bottom: -1rem; margin: auto -1rem -1rem; padding: .9rem 1rem max(.9rem, env(safe-area-inset-bottom));
    }
    .modal footer, .form-card footer { align-items: stretch; flex-direction: column-reverse; }
    .modal footer button, .form-card footer button { width: 100%; }
    .cycle-count-submit-summary, .cycle-count-line > header { align-items: flex-start; flex-direction: column; }
    .cycle-count-line-fields { grid-template-columns: 1fr; }
    .portal-page-header { flex-direction: column; padding: .15rem 0 .8rem; }
    .portal-page-title { align-items: flex-start; }
    .portal-page-icon { width: 2.25rem; height: 2.25rem; }
    .portal-page-actions { align-items: stretch; width: 100%; }
    .portal-page-actions button, .portal-page-actions a { flex: 1; }
    .control-header-actions { align-items: stretch; flex-direction: column; width: 100%; }
    .control-button { width: 100%; }
    .workflow-actions, .tool-grid { grid-template-columns: 1fr; }
    .workflow-action { min-height: 7.5rem; }
    .metric-section-heading { align-items: flex-start; flex-direction: column; }
    .metric-strip { grid-template-columns: 1fr; }
    .metric-item { border-right: 0; border-bottom: 1px solid #e3e8ef; }
    .metric-item:last-child { border-bottom: 0; }
    .report-toolbar, .report-section-heading { align-items: flex-start; flex-direction: column; }
    .report-warehouse-grid, .report-kpi-grid, .report-insight-grid { grid-template-columns: 1fr; }
    .report-kpi { border-right: 0; }
    .inward-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inward-summary > div:nth-child(2) { border-right: 0; }
    .inward-summary > div:nth-child(-n+2) { border-bottom: 1px solid #e4e9f0; }
    .inward-line-editor fieldset { grid-template-columns: 1fr; }
    .inward-visual-panel .warehouse-3d-canvas, .inward-visual-state { height: 19rem; }
    .visual-hierarchy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visual-location-detail { right: 1rem; bottom: 2rem; width: calc(100% - 2rem); }
    .visual-scene-toolbar { right: .55rem; left: .55rem; justify-content: space-between; }
    .visual-mode-switch button { font-size: 0; }
    .visual-mode-switch button .nav-icon { margin: 0; }
    .visual-control-hint { bottom: .55rem; max-width: calc(100% - 1rem); white-space: nowrap; }
    .visual-location-detail-page { right: .55rem; bottom: 3.1rem; width: calc(100% - 1.1rem); }
    .visual-bin-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signin-panel { place-items: start center; padding-top: 1.5rem; }
    .signin-form-wrap { width: 100%; }
    .signin-heading { margin-bottom: 1.5rem; }
}

@media (max-width: 420px) {
    .visual-hierarchy-navigator { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (pointer: coarse) {
    .icon-button, .actions .row-icon-button, .toast-close, .searchable-select-clear,
    .visual-scene-toolbar button { min-width: 2.75rem; min-height: 2.75rem; }
}

@media print {
    .app-sidebar, .topbar, .site-footer, .breadcrumbs, button { display: none !important; }
    .app-shell, .app-workspace { display: block; }
    main { width: 100%; max-width: none; padding: 0; }
    body { background: white; }
    .table-wrap, .form-card, .state-card { box-shadow: none; }
}

/* QR/barcode scanning + label printing (bin/pallet identification, see BarcodeScannerModal,
   BinPalletQrLabel, BulkLabels.razor). */
.bin-pallet-picker-row { display: flex; align-items: center; gap: .4rem; }
.bin-pallet-picker-row .searchable-select { flex: 1; min-width: 0; }
.location-stock-table { margin-top: .3rem; box-shadow: none; }
.location-stock-table table { font-size: .78rem; }
.barcode-scan-modal { width: min(28rem, 92vw); }
.barcode-scan-close { position: fixed; top: .85rem; right: .85rem; z-index: 105; }
.barcode-scan-viewport {
    position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .8rem;
    background: #111; border-radius: .6rem;
}
.barcode-scan-viewport video { width: 100%; height: 100%; object-fit: cover; }
.qr-label-card {
    display: grid; justify-items: center; gap: .3rem; padding: .8rem;
    border: 1px solid #e1e7f0; border-radius: .5rem; text-align: center; break-inside: avoid;
}
.qr-label-barcode { width: 100%; max-width: 11rem; }
.qr-label-barcode svg { display: block; width: 100%; height: 2.6rem; }
.qr-label-code { width: 100%; max-width: 7rem; }
.qr-label-code svg { display: block; width: 100%; height: auto; }
.qr-label-location { font-size: .95rem; letter-spacing: .02em; }
.qr-label-breadcrumb { color: #718097; font-size: .62rem; }
.qr-label-modal { width: min(20rem, 92vw); text-align: center; }
.label-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 1rem; }
.asn-label-preview-backdrop { z-index: 95; }
.asn-label-preview-modal {
    width: min(86rem, 92vw); padding: 0; overflow: hidden; background: #f7f9fd;
}
.asn-label-preview-header {
    position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex: 0 0 auto; padding: .9rem 1.1rem; background: linear-gradient(110deg, #ffffff, #f3f6ff);
    border-bottom: 1px solid #d9e3f0; box-shadow: 0 8px 22px rgb(25 43 72 / .06);
}
.asn-label-preview-header > div { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.asn-label-preview-modal .asn-label-preview-header h2 {
    position: static; margin: 0; padding: 0; color: #1e2d45; background: none;
    border: 0; font-size: .92rem; line-height: 1.2; backdrop-filter: none;
}
.asn-label-preview-header p { margin: .12rem 0 0; color: #718097; font-size: .66rem; }
.asn-label-preview-header .row-icon-button { flex: 0 0 auto; color: #526078; background: #f7f9fc; border-color: #d8e1ec; }
.asn-label-preview-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 1rem; overscroll-behavior: contain; }
.asn-label-preview-body .label-sheet { margin: 0; }
.asn-label-preview-body .qr-label-card { background: white; border-color: #dce4ef; box-shadow: 0 8px 22px -20px rgb(32 55 91 / .5); }
.asn-label-preview-modal > footer {
    position: relative; bottom: auto; z-index: 3; margin: 0; padding: .8rem 1.1rem;
    background: linear-gradient(110deg, #ffffff, #f7f9ff); border-top: 1px solid #d9e3f0;
}
.asn-label-preview-modal > footer button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }

@media (max-width: 800px) {
    .asn-label-preview-modal { width: 100vw; }
    .asn-label-preview-body .label-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .asn-label-preview-body .label-sheet { grid-template-columns: 1fr; }
}

/* GRN completion screen - shown once Post Receipt succeeds. */
.grn-completion-card {
    max-width: 58rem; margin: 1rem auto; overflow: hidden; background: #fff;
    border: 1px solid #d7e3df; border-radius: var(--radius-md); box-shadow: 0 18px 44px -34px rgb(24 70 61 / .45);
}
.grn-completion-header {
    display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem;
    background: linear-gradient(110deg, #effaf6, #f8fcfb); border-bottom: 1px solid #d4e9e2;
}
.grn-completion-icon {
    display: inline-grid; place-items: center; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem;
    color: #087b5d; background: #fff; border: 1px solid #bfe3d7; border-radius: .7rem;
    box-shadow: 0 8px 18px -14px rgb(8 123 93 / .7);
}
.grn-completion-icon .nav-icon { width: 1rem; height: 1rem; }
.grn-completion-header > div { display: grid; gap: .08rem; min-width: 0; }
.grn-completion-header > div > span { color: #087b5d; font-size: .58rem; font-weight: 820; letter-spacing: .09em; text-transform: uppercase; }
.grn-completion-header h2 { margin: 0; color: #20364a; font-size: 1rem; }
.grn-completion-header p { margin: 0; color: #718195; font-size: .66rem; }
.grn-completion-document {
    display: grid; grid-template-columns: 1.55fr .75fr 1.55fr .55fr; margin: 0; padding: .9rem 1.15rem;
    border-bottom: 1px solid #e2e8ef;
}
.grn-completion-document > div { min-width: 0; padding: .15rem .8rem; border-right: 1px solid #e2e8ef; }
.grn-completion-document > div:first-child { padding-left: 0; }
.grn-completion-document > div:last-child { padding-right: 0; border-right: 0; }
.grn-completion-document dt,
.grn-completion-quantity dt { color: #758298; font-size: .59rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.grn-completion-document dd { overflow: hidden; margin: .12rem 0 0; color: #25354c; font-size: .82rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.grn-completion-quantity { padding: .8rem 1.15rem 1rem; background: #fbfcfe; }
.grn-completion-quantity > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
.grn-completion-quantity h3 { margin: 0; color: #36465d; font-size: .7rem; }
.grn-completion-quantity > header span { color: #7c899c; font-size: .61rem; }
.grn-completion-quantity dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.grn-completion-quantity dl > div { padding: .55rem .65rem; background: #fff; border: 1px solid #dfe6ef; border-radius: .55rem; }
.grn-completion-quantity dd { margin: .12rem 0 0; color: #29394f; font-size: 1rem; font-weight: 780; }
.grn-completion-quantity .is-warning { background: #fffaf1; border-color: #eddbb8; }
.grn-completion-quantity .is-warning dd { color: #a56412; }
.grn-completion-quantity .is-success { background: #effaf6; border-color: #c9e7dd; }
.grn-completion-quantity .is-success dd { color: #087b5d; }
.grn-completion-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: .75rem 1.15rem;
    background: #fff; border-top: 1px solid #e1e7ef;
}
.grn-completion-actions > :is(button, a) {
    display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-height: 2.35rem;
    padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs); font-size: .72rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
.grn-completion-actions > a { color: #43526a; background: #fff; text-decoration: none; }
.grn-completion-actions > a:hover { color: var(--brand); background: #f4f7ff; border-color: #aebfe6; }

@media (max-width: 760px) {
    .grn-completion-document { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .grn-completion-document > div { padding: 0; border-right: 0; }
    .grn-completion-quantity dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grn-completion-quantity .is-success { grid-column: 1 / -1; }
    .grn-completion-actions { align-items: stretch; flex-direction: column; }
    .grn-completion-actions > :is(button, a) { width: 100%; }
}

/* GRN preparation: dense, scan-led reconciliation without changing posting behavior. */
.grn-prep-summary {
    display: grid; grid-template-columns: 1.15fr repeat(3, 1fr) 1.2fr; overflow: hidden;
    margin-bottom: .9rem; background: white; border: 1px solid #d9e3ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.grn-prep-summary article { display: grid; gap: .08rem; min-width: 0; padding: .7rem .85rem; border-right: 1px solid #e1e7f0; }
.grn-prep-summary article:last-child { border-right: 0; }
.grn-prep-summary article > span { color: #758299; font-size: .61rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.grn-prep-summary article strong { overflow: hidden; color: #26364e; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.grn-prep-summary article small { overflow: hidden; color: #8490a3; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.grn-prep-summary article:first-child { box-shadow: inset 3px 0 0 #5d7fe7; }
.grn-prep-summary article.tone-teal { background: #f2faf8; box-shadow: inset 3px 0 0 #1aa38f; }
.grn-prep-summary article.tone-teal strong { color: #087b72; }
.grn-prep-workspace { display: grid; gap: .9rem; }
.grn-prep-card { overflow: hidden; background: white; border: 1px solid #d9e3ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.grn-prep-card > header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    padding: .75rem .9rem; background: linear-gradient(110deg, #fff, #f8faff); border-bottom: 1px solid #dfe7f1;
}
.grn-prep-card-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid; border-radius: .62rem; }
.grn-prep-card-icon .nav-icon { width: .88rem; height: .88rem; }
.grn-prep-card-icon.blue { color: #3159c9; background: #eef3ff; border-color: #d4def8; }
.grn-prep-card-icon.amber { color: #98620a; background: #fff8e9; border-color: #efd9aa; }
.grn-prep-card > header > div { display: grid; gap: .05rem; min-width: 0; }
.grn-prep-card .eyebrow { color: #3159c9; font-size: .57rem; font-weight: 820; letter-spacing: .09em; }
.grn-exception-card .eyebrow { color: #a46a08; }
.grn-prep-card h2 { margin: 0; color: #26354d; font-size: .9rem; }
.grn-prep-card header p { margin: 0; color: #748198; font-size: .66rem; }
.grn-prep-card header em { padding: .22rem .52rem; color: #53627a; background: #edf2f7; border-radius: 99px; font-size: .62rem; font-style: normal; font-weight: 750; white-space: nowrap; }
.grn-guidance { display: flex; align-items: center; gap: .5rem; padding: .48rem .9rem; color: #53627a; background: #f4f7ff; border-bottom: 1px solid #e0e7f1; font-size: .65rem; }
.grn-guidance strong { color: #3159c9; }
.grn-guidance.amber { background: #fffbf2; }
.grn-guidance.amber strong { color: #99630a; }
.grn-prep-table-wrap { max-height: 24rem; overflow: auto; border: 0; border-radius: 0; box-shadow: none; overscroll-behavior: contain; }
.grn-prep-table-wrap table { margin: 0; }
.grn-prep-table-wrap thead th { top: 0; z-index: 2; background: linear-gradient(180deg, #f4f7fc, #eef3f9); }
.grn-prep-table-wrap tbody tr:nth-child(even) { background: #fcfdff; }
.grn-prep-table-wrap tbody tr:hover { background: #f5f8ff; }
.grn-scan-table { min-width: 56rem; }
.grn-exception-table { min-width: 88rem; }
.grn-scan-table th, .grn-scan-table td, .grn-exception-table th, .grn-exception-table td { padding: .55rem .75rem; }
.grn-scan-table tbody tr.is-corrected { background: #fffaf0; box-shadow: inset 3px 0 0 #dfa322; }
.grn-sku-identity { display: grid; gap: .08rem; min-width: 12rem; }
.grn-sku-identity strong { color: #293a54; font-size: .72rem; }
.grn-sku-identity span { overflow: hidden; max-width: 24rem; color: #56657b; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.grn-sku-identity code, .grn-sku-identity small { color: #8390a3; font-size: .6rem; }
.grn-quantity-input { width: 8rem; min-height: 2.25rem; padding: .42rem .58rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.grn-quantity-input.compact { width: 5.7rem; }
.grn-variance { display: inline-grid; place-items: center; min-width: 2.4rem; padding: .16rem .42rem; border: 1px solid; border-radius: 99px; font-size: .65rem; font-weight: 780; }
.grn-variance.zero { color: #718096; background: #f2f5f8; border-color: #dce3eb; }
.grn-variance.positive { color: #087b72; background: #effaf8; border-color: #c9e8e2; }
.grn-variance.negative { color: #b32d3d; background: #fff2f3; border-color: #f1c8ce; }
.grn-reason-cell { min-width: 14rem; }
.grn-reason-cell .searchable-select { width: 100%; min-width: 12rem; }
.grn-reason-cell .searchable-select-control { min-height: 2.25rem; }
.grn-not-required { color: #8a96a7; font-size: .64rem; font-style: italic; }
.grn-submit-bar {
    display: grid; grid-template-columns: minmax(20rem, 1fr) auto auto; align-items: end; gap: .85rem;
    margin-top: .9rem; padding: .8rem .9rem; background: linear-gradient(110deg, #fff, #f7f9ff);
    border: 1px solid #d9e3ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.grn-submit-bar > label { display: grid; gap: .3rem; min-width: 0; color: #536178; font-size: .68rem; }
.grn-submit-bar > label > span { font-weight: 720; }
.grn-submit-bar > label small { margin-left: .25rem; color: #8a96a8; font-weight: 500; }
.grn-submit-bar > label input { width: 100%; min-height: 2.55rem; }
.grn-submit-totals { display: flex; align-items: stretch; overflow: hidden; border: 1px solid #dce4ef; border-radius: .58rem; }
.grn-submit-totals > span { display: grid; min-width: 4.4rem; padding: .35rem .55rem; background: white; border-right: 1px solid #e1e7ef; text-align: center; }
.grn-submit-totals > span:last-child { border-right: 0; }
.grn-submit-totals small { color: #7a879a; font-size: .57rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.grn-submit-totals strong { color: #34435b; font-size: .75rem; }
.grn-submit-totals .good { background: #effaf8; }
.grn-submit-totals .good strong { color: #087b72; }
.grn-submit-bar > button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.55rem; white-space: nowrap; }

@media (max-width: 1000px) {
    .grn-prep-summary { grid-template-columns: repeat(3, 1fr); }
    .grn-prep-summary article:nth-child(3) { border-right: 0; }
    .grn-prep-summary article:nth-child(n+4) { border-top: 1px solid #e1e7f0; }
    .grn-submit-bar { grid-template-columns: 1fr auto; }
    .grn-submit-bar > label { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .grn-prep-summary { grid-template-columns: 1fr 1fr; }
    .grn-prep-summary article { border-right: 1px solid #e1e7f0 !important; border-top: 1px solid #e1e7f0; }
    .grn-prep-summary article:nth-child(odd) { border-right: 0 !important; }
    .grn-prep-summary article:first-child, .grn-prep-summary article:nth-child(2) { border-top: 0; }
    .grn-prep-card header p, .grn-guidance span { display: none; }
    .grn-submit-bar { grid-template-columns: 1fr; }
    .grn-submit-totals, .grn-submit-bar > button { width: 100%; }
    .grn-submit-totals > span { flex: 1; }
}

/* GRN landing: quick filtering with a compact master/detail reconciliation queue. */
.grn-filter-panel {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.1fr)
        minmax(7.75rem, .65fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(8.75rem, max-content);
    width: 100%; min-width: 0; box-sizing: border-box;
    align-items: end; gap: .55rem; margin-bottom: 1rem; padding: .65rem .7rem;
    background: linear-gradient(110deg, #f8fbff, #fbf9ff); border: 1px solid #dbe4f1;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.grn-filter-panel > * { min-width: 0; max-width: 100%; }
.grn-filter-panel > label { display: grid; gap: .3rem; min-width: 0; color: #5c6a80; font-size: .61rem; font-weight: 780; letter-spacing: .055em; text-transform: uppercase; }
.grn-filter-panel .inward-filter-field { margin: 0; }
.grn-filter-panel .inward-filter-field > span { line-height: 1; white-space: nowrap; }
.grn-filter-panel .inward-filter-field > :is(input, select) { width: 100%; }
.grn-filter-panel .searchable-select { width: 100%; min-width: 0; }
.grn-filter-panel .searchable-select-control { min-height: 2.55rem; background: white; }
.grn-filter-panel > button { min-width: 7.5rem; white-space: nowrap; }
.grn-queue-card { overflow: hidden; background: white; border: 1px solid #d9e3ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.grn-queue-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .78rem 1rem; background: linear-gradient(110deg, #fff, #f8faff); border-bottom: 1px solid #dfe7f1; }
.grn-queue-header > div { display: grid; gap: .08rem; }
.grn-queue-header .eyebrow, .grn-detail-heading .eyebrow { color: #3159c9; font-size: .56rem; font-weight: 820; letter-spacing: .09em; }
.grn-queue-header h2 { margin: 0; color: #26354d; font-size: .88rem; }
.grn-queue-header p { margin: 0; color: #748198; font-size: .64rem; }
.grn-ready-count { padding: .25rem .55rem; color: #526178; background: #edf2f7; border-radius: 99px; font-size: .62rem; font-weight: 750; white-space: nowrap; }
.grn-queue-table-wrap { overflow-x: auto; border: 0; border-radius: 0; box-shadow: none; }
.grn-queue-table { min-width: 66rem; }
.grn-queue-table thead th { background: linear-gradient(180deg, #f4f7fc, #eff3f8); }
.grn-queue-table .grn-expand-column, .grn-queue-table .grn-expand-cell { width: 3.3rem; min-width: 3.3rem; text-align: center; }
.grn-queue-table .grn-expand-cell { padding-inline: .65rem; }
.grn-summary-row { transition: background-color .14s ease, box-shadow .14s ease; }
.grn-summary-row:hover { background: #f6f9ff; box-shadow: inset 3px 0 0 #6d8deb; }
.grn-summary-row.is-expanded { background: #f2f6ff; box-shadow: inset 3px 0 0 var(--brand); }
.grn-code-badge { display: inline-flex; padding: .2rem .42rem; color: #5c3e91; background: #f5effd; border: 1px solid #e3d7f2; border-radius: .4rem; font-weight: 780; white-space: nowrap; }
.grn-pending-label { color: #8a651d; font-size: .65rem; font-weight: 720; white-space: nowrap; }
.grn-po-text { color: #40506a; font-weight: 650; white-space: nowrap; }
.grn-customer { display: grid; gap: .08rem; min-width: 8rem; }
.grn-customer strong { color: #30405a; font-size: .72rem; }
.grn-customer span { overflow: hidden; max-width: 13rem; color: #758298; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.grn-open-cell { width: 3.8rem; }
.grn-open-cell .row-icon-button { color: #3159c9; background: #f1f5ff; border-color: #d4def7; }
.grn-detail-row > td { padding: 0; background: #f6f8fc; border-bottom: 1px solid #dce5f0; }
.grn-detail-workspace { display: grid; gap: .7rem; padding: .8rem 1rem 1rem 3.9rem; }
.grn-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grn-detail-heading > div { display: grid; gap: .08rem; }
.grn-detail-heading strong { color: #2d3d56; font-size: .75rem; }
.grn-detail-heading > a { display: inline-flex; align-items: center; gap: .35rem; color: #3159c9; font-size: .65rem; font-weight: 750; white-space: nowrap; }
.grn-detail-heading > a .nav-icon { width: .7rem; height: .7rem; }
.grn-detail-section { overflow: hidden; background: white; border: 1px solid #dce4ef; border-radius: .65rem; box-shadow: 0 8px 20px -20px rgb(32 55 91 / .5); }
.grn-detail-section > header { padding: .52rem .7rem; background: #fbfcff; border-bottom: 1px solid #e2e8f0; }
.grn-detail-section > header > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grn-detail-section > header strong { color: #35445c; font-size: .69rem; }
.grn-detail-section > header span { color: #7a879a; font-size: .6rem; font-weight: 680; }
.grn-detail-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.grn-detail-section .asn-line-detail-table { min-width: 54rem; }
.grn-detail-section:first-of-type .asn-line-detail-table { min-width: 42rem; }
.quantity-badge { display: inline-grid; place-items: center; min-width: 2.25rem; padding: .14rem .42rem; border: 1px solid; border-radius: 99px; font-size: .66rem; font-weight: 780; }
.quantity-badge.neutral { color: #526078; background: #f1f4f8; border-color: #dce3ec; }
.quantity-badge.success { color: #087b72; background: #effaf8; border-color: #c9e8e2; }

@media (max-width: 1180px) {
    .grn-filter-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .grn-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grn-detail-workspace { padding-left: .75rem; }
}
@media (max-width: 580px) {
    .grn-filter-panel { grid-template-columns: 1fr; }
    .grn-filter-panel > button { width: 100%; }
    .grn-queue-header p { display: none; }
    .grn-detail-heading { align-items: flex-start; flex-direction: column; }
}

/* ASN list: compact master rows with a clearly nested shipment-line workspace. */
.inward-list-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(8.5rem, .65fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(7.5rem, max-content);
    width: 100%; min-width: 0; box-sizing: border-box;
    align-items: end; gap: .55rem; padding: .65rem .7rem;
}
.inward-list-toolbar > * { min-width: 0; max-width: 100%; }
.inward-list-toolbar .searchable-select { width: 100%; min-width: 0; }
.inward-list-toolbar .inward-filter-field {
    display: grid; gap: .28rem; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.inward-list-toolbar .inward-filter-field > span { line-height: 1; white-space: nowrap; }
.inward-list-toolbar .inward-filter-field > :is(input, select) { width: 100%; }
.inward-list-toolbar > button { width: 100%; min-width: 0; white-space: nowrap; }
.sku-receipt-list-toolbar {
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(7.75rem, .58fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(9.25rem, max-content);
    gap: .4rem;
}
.sku-receipt-list-toolbar .searchable-select { flex: none; }
.sku-receipt-filter-field {
    display: grid; gap: .28rem; width: 100%; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.sku-receipt-filter-field > span { line-height: 1; white-space: nowrap; }
.sku-receipt-filter-field .searchable-select-input { width: 100%; }
.sku-receipt-list-toolbar > button {
    align-self: end; justify-self: stretch; flex-wrap: nowrap;
    min-height: 2.55rem; height: 2.55rem; padding-inline: .8rem;
    line-height: 1; text-wrap: nowrap; white-space: nowrap;
}
.sku-receipt-list-toolbar > button > span { white-space: nowrap; }
.quality-check-list-toolbar {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 1.05fr)
        minmax(7.5rem, .62fr)
        minmax(0, 1.05fr)
        minmax(0, 1.05fr)
        minmax(9.25rem, max-content);
    gap: .4rem;
}
.quality-check-filter-field {
    display: grid; gap: .28rem; width: 100%; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.quality-check-filter-field > span { line-height: 1; white-space: nowrap; }
.quality-check-filter-field .searchable-select,
.quality-check-filter-field .searchable-select-input { width: 100%; min-width: 0; }
.quality-check-filter-actions {
    display: flex; align-self: end; gap: .35rem; min-width: 0;
}
.quality-check-filter-actions > button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-width: 0; min-height: 2.55rem; height: 2.55rem; padding-inline: .8rem; white-space: nowrap;
}
.quality-check-filter-actions > button:first-child { flex: 1 1 auto; }
.quality-check-filter-actions .quality-check-clear-filter {
    flex: 0 0 auto; color: #496079; background: white; border-color: #c9d6e5;
}

.purchase-order-list-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(7.75rem, .58fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(9.25rem, max-content);
    width: 100%; min-width: 0; box-sizing: border-box;
    align-items: end; gap: .4rem; padding: .65rem .7rem;
}
.purchase-order-list-toolbar > * { min-width: 0; max-width: 100%; }
.purchase-order-list-toolbar .searchable-select { flex: none; width: 100%; min-width: 0; }
.purchase-order-filter-field,
.purchase-order-list-toolbar .inward-filter-field {
    display: grid; gap: .28rem; width: 100%; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.purchase-order-filter-field > span,
.purchase-order-list-toolbar .inward-filter-field > span { line-height: 1; white-space: nowrap; }
.purchase-order-filter-field .searchable-select-input,
.purchase-order-list-toolbar .inward-filter-field > :is(input, select) { width: 100%; }
.purchase-order-list-toolbar > button {
    align-self: end; justify-self: stretch; flex-wrap: nowrap;
    width: 100%; min-width: 0; min-height: 2.55rem; height: 2.55rem; padding-inline: .8rem;
    line-height: 1; text-wrap: nowrap; white-space: nowrap;
}
.purchase-order-list-toolbar > button > span { white-space: nowrap; }

.asn-list-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(7.75rem, .58fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(9.25rem, max-content);
    width: 100%; min-width: 0; box-sizing: border-box;
    align-items: end; gap: .4rem; padding: .65rem .7rem;
    background: linear-gradient(105deg, #f8faff, #fbf9ff); border-color: #dce4f4;
}
.asn-list-toolbar > * { min-width: 0; max-width: 100%; }
.asn-list-toolbar .searchable-select { flex: none; width: 100%; min-width: 0; }
.asn-filter-field,
.asn-list-toolbar .inward-filter-field {
    display: grid; gap: .28rem; width: 100%; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.asn-filter-field > span,
.asn-list-toolbar .inward-filter-field > span { line-height: 1; white-space: nowrap; }
.asn-filter-field .searchable-select-input,
.asn-list-toolbar .inward-filter-field > :is(input, select) { width: 100%; }
.asn-list-toolbar > button {
    align-self: end; justify-self: stretch; flex-wrap: nowrap;
    width: 100%; min-width: 0; min-height: 2.55rem; height: 2.55rem; padding-inline: .8rem;
    line-height: 1; text-wrap: nowrap; white-space: nowrap;
}
.asn-list-toolbar > button > span { white-space: nowrap; }

.gate-entry-list-toolbar {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(0, 1.15fr)
        minmax(7.75rem, .58fr)
        minmax(0, .95fr)
        minmax(0, 1fr)
        minmax(9.25rem, max-content);
    width: 100%; min-width: 0; box-sizing: border-box;
    align-items: end; gap: .4rem; padding: .65rem .7rem;
}
.gate-entry-list-toolbar > * { min-width: 0; max-width: 100%; }
.gate-entry-list-toolbar .searchable-select { flex: none; width: 100%; min-width: 0; }
.gate-entry-filter-field,
.gate-entry-list-toolbar .inward-filter-field {
    display: grid; gap: .28rem; width: 100%; min-width: 0; margin: 0;
    color: #526178; font-size: .68rem; font-weight: 700;
}
.gate-entry-filter-field > span,
.gate-entry-list-toolbar .inward-filter-field > span { line-height: 1; white-space: nowrap; }
.gate-entry-filter-field .searchable-select-input,
.gate-entry-list-toolbar .inward-filter-field > :is(input, select) { width: 100%; }
.gate-entry-list-toolbar > button {
    align-self: end; justify-self: stretch; flex-wrap: nowrap;
    width: 100%; min-width: 0; min-height: 2.55rem; height: 2.55rem; padding-inline: .8rem;
    line-height: 1; text-wrap: nowrap; white-space: nowrap;
}
.gate-entry-list-toolbar > button > span { white-space: nowrap; }
.asn-list-table-wrap { border-color: #d7e1ed; box-shadow: 0 10px 28px -24px rgb(32 55 91 / .42); }
.asn-list-table thead th { background: linear-gradient(180deg, #f4f7fc, #eef3f9); border-bottom-color: #d9e3ef; }
.asn-list-table tbody .asn-summary-row { transition: background-color .14s ease, box-shadow .14s ease; }
.asn-list-table tbody .asn-summary-row:nth-of-type(even) { background: #fcfdff; }
.asn-list-table tbody .asn-summary-row:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
.asn-list-table tbody .asn-summary-row.is-expanded { background: #f5f8ff; box-shadow: inset 3px 0 0 var(--brand); }
.asn-list-table .asn-expand-column,
.asn-list-table .asn-expand-cell { width: 3.25rem; min-width: 3.25rem; text-align: center; }
.asn-list-table .asn-expand-cell { padding-inline: .65rem; }
.asn-expand-button {
    display: inline-grid; place-items: center; width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem;
    padding: 0; color: #3159c9; background: #f1f5ff; border: 1px solid #d4def7;
    border-radius: .5rem; box-shadow: none;
}
.asn-expand-button:hover:not(:disabled) { color: #244ab6; background: #e8efff; border-color: #bdcbf1; }
.asn-expand-button .nav-icon { width: .8rem; height: .8rem; }
.asn-code-badge {
    display: inline-flex; padding: .2rem .4rem; color: #274aaf; background: #eef3ff;
    border: 1px solid #d7e1fb; border-radius: .4rem; font-weight: 780;
}
.asn-po-label { color: #40516d; font-weight: 650; white-space: nowrap; }
.asn-warehouse-label {
    display: inline-flex; padding: .18rem .45rem; color: #087b72; background: #effaf8;
    border: 1px solid #c9e8e2; border-radius: 999px; font-weight: 750;
}
.asn-count-label {
    display: inline-grid; place-items: center; min-width: 1.65rem; min-height: 1.45rem; padding: .1rem .38rem;
    color: #526078; background: #f1f4f8; border: 1px solid #dce3ec; border-radius: 999px;
    font-size: .68rem; font-weight: 750;
}
.asn-list-table .asn-actions-cell { width: 1%; min-width: 3.8rem; }
.asn-list-table .asn-actions-cell .actions { justify-content: flex-end; flex-wrap: nowrap; }
.asn-list-table .asn-actions-cell .row-icon-button:first-child { color: #3159c9; background: #f3f6ff; border-color: #d4def7; }
.asn-line-detail-row > td {
    padding: .75rem 1rem 1rem; background: linear-gradient(180deg, #f5f8ff, #fbfcff);
    border-bottom: 1px solid #dfe6f0;
}
.asn-line-detail-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .1rem .55rem;
}
.asn-line-detail-heading strong { color: #30405a; font-size: .72rem; }
.asn-line-detail-heading span { color: #6b7990; font-size: .63rem; font-weight: 700; }
.asn-line-detail-scroll {
    overflow-x: auto; background: white; border: 1px solid #dce4ef; border-radius: .65rem;
    box-shadow: 0 8px 20px -20px rgb(32 55 91 / .5); overscroll-behavior-x: contain;
}
.asn-line-detail-table { width: 100%; min-width: 58rem; margin: 0; background: var(--surface); border: 0; }
.asn-line-detail-table th, .asn-line-detail-table td { height: auto; padding: .55rem .7rem; font-size: .7rem; }
.asn-line-detail-table th {
    position: static; color: #5d6b81; background: #f1f5fa; border-bottom: 1px solid #dde5ef;
    font-size: .61rem; letter-spacing: .065em;
}
.asn-line-detail-table tbody tr:nth-child(even) { background: #fcfdff; }
.asn-line-detail-table tbody tr:hover { background: #f7faff; }
.asn-line-detail-table code { color: #29436f; font-weight: 750; }
.asn-line-attr-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.asn-line-attr-chip {
    display: inline-flex; padding: .15rem .5rem; color: #65439a; background: #f5effd; border: 1px solid #e3d6f3;
    border-radius: 99px; font-size: .64rem; white-space: nowrap;
}
.asn-line-attr-chip strong { font-weight: 650; }
.asn-list-pager {
    margin-top: .8rem; padding: .7rem .8rem; background: rgb(255 255 255 / .58);
    border: 1px solid #e1e7f0; border-radius: var(--radius-md);
}
@media (max-width: 1450px) {
    .inward-list-toolbar,
    .purchase-order-list-toolbar,
    .gate-entry-list-toolbar,
    .asn-list-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .quality-check-filter-actions { width: 100%; }
}
@media (max-width: 900px) {
    .inward-list-toolbar,
    .purchase-order-list-toolbar,
    .gate-entry-list-toolbar,
    .asn-list-toolbar { grid-template-columns: 1fr; }
    .inward-list-toolbar > button,
    .purchase-order-list-toolbar > button,
    .gate-entry-list-toolbar > button,
    .asn-list-toolbar > button { width: 100%; }
    .quality-check-filter-actions { align-items: stretch; flex-direction: column; }
    .quality-check-filter-actions > button { width: 100%; }
}
@media (max-width: 600px) {
    .asn-line-detail-row > td { padding: .65rem; }
    .asn-list-pager { align-items: stretch; flex-direction: column; text-align: center; }
    .asn-list-pager button { width: 100%; }
}

/* ASN detail: structured shipment context, compact line summaries, and a selectable box list. */
.asn-detail-page .portal-page-header { align-items: flex-start; }
.asn-detail-page .portal-page-actions { flex-wrap: wrap; }
.asn-detail-page .portal-page-actions > button {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem;
}
.asn-detail-page .portal-page-actions > button:first-child {
    color: #6844a1; background: #fbf8ff; border-color: #ddd2ef;
}
.asn-detail-page .portal-page-actions > button:nth-child(2) {
    color: #2466a3; background: #f5faff; border-color: #cbdff1;
}
.asn-detail-page .portal-page-actions .status { min-height: 2.25rem; padding-inline: .75rem; }
.asn-detail-overview-grid {
    display: grid; grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr); gap: .9rem;
    align-items: start; margin-bottom: .9rem;
}
.asn-detail-overview-grid.lines-only { grid-template-columns: 1fr; }
.asn-gate-column,
.asn-lines-column { min-width: 0; }
.asn-detail-overview-grid .asn-gate-card,
.asn-detail-overview-grid .asn-line-card { margin-bottom: 0; }
.asn-lines-scroll {
    display: grid; gap: .75rem; max-height: 27rem; overflow-y: auto; padding: 0 .3rem .1rem 0;
    overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #b9c6da transparent;
}
.asn-lines-scroll::-webkit-scrollbar { width: .42rem; }
.asn-lines-scroll::-webkit-scrollbar-thumb { background: #b9c6da; border-radius: 99px; }
.asn-lines-scroll::-webkit-scrollbar-track { background: transparent; }
.asn-detail-overview-grid .asn-gate-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asn-gate-card,
.asn-line-card,
.asn-boxes-card {
    margin: 0 0 .9rem; overflow: hidden; background: var(--surface);
    border: 1px solid #d9e3ef; border-radius: var(--radius-md);
    box-shadow: 0 10px 28px -24px rgb(32 55 91 / .42);
}
.asn-gate-header,
.asn-boxes-card > header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem; background: linear-gradient(105deg, #f5f8ff, #fbf9ff);
    border-bottom: 1px solid #dfe6f0;
}
.asn-gate-header > div,
.asn-boxes-card > header > div { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.asn-card-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .65rem;
}
.asn-card-icon .nav-icon { width: 1rem; height: 1rem; }
.asn-gate-header small {
    display: block; margin-bottom: .08rem; color: #738199; font-size: .58rem; font-weight: 750;
    letter-spacing: .08em; line-height: 1; text-transform: uppercase;
}
.asn-gate-header h2,
.asn-boxes-card h2 { margin: 0; color: #1e2d45; font-size: .86rem; line-height: 1.25; }
.asn-gate-facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem;
    margin: 0; padding: .85rem 1rem;
}
.asn-gate-facts > div,
.asn-line-facts > div {
    min-width: 0; padding: .62rem .7rem; background: #fbfcff;
    border: 1px solid #e3e9f2; border-radius: .55rem;
}
.asn-gate-facts dt,
.asn-line-facts dt {
    margin-bottom: .22rem; color: #718097; font-size: .6rem; font-weight: 750;
    letter-spacing: .055em; text-transform: uppercase;
}
.asn-gate-facts dd,
.asn-line-facts dd { margin: 0; color: #26364f; font-size: .75rem; font-weight: 650; overflow-wrap: anywhere; }
.asn-gate-facts dd span { margin-left: .25rem; color: #718097; font-weight: 550; }
.asn-gate-subsection { padding: 0 1rem .9rem; }
.asn-gate-subsection h3 { margin: 0 0 .45rem; color: #40516d; font-size: .7rem; }
.asn-gate-reference-table { margin: 0; border-color: #e0e7f0; border-radius: .6rem; box-shadow: none; }
.asn-gate-reference-table th,
.asn-gate-reference-table td { height: auto; padding: .55rem .7rem; font-size: .7rem; }
.asn-gate-reference-table th { position: static; background: #f3f6fb; }
.asn-documents-row {
    margin: 0 0 .9rem; overflow: hidden; background: var(--surface); border: 1px solid #d9e3ef;
    border-radius: var(--radius-md); box-shadow: 0 10px 28px -24px rgb(32 55 91 / .42);
}
.asn-documents-row > header {
    display: flex; align-items: center; min-height: 2.6rem; padding: .38rem .7rem;
    background: linear-gradient(105deg, #f5f8ff, #fbf9ff);
    border-bottom: 1px solid #dfe6f0;
}
.asn-documents-row .asn-boxes-heading { display: flex; align-items: center; gap: .5rem; flex: none; }
.asn-documents-row .asn-boxes-heading > div { display: flex; align-items: baseline; gap: .45rem; }
.asn-documents-row .asn-card-icon { width: 1.75rem; height: 1.75rem; border-radius: .48rem; }
.asn-documents-row .asn-card-icon .nav-icon { width: .78rem; height: .78rem; }
.asn-documents-row h2 { margin: 0; color: #1e2d45; font-size: .76rem; }
.asn-documents-row header p {
    margin: 0; padding: .13rem .4rem; color: #687892; background: #edf2f8; border-radius: 99px;
    font-size: .56rem; line-height: 1.2; white-space: nowrap;
}
.asn-document-list {
    display: flex; gap: .45rem; margin: 0; padding: .45rem .65rem .55rem; overflow-x: auto; list-style: none;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #b9c6da transparent;
}
.asn-document-list::-webkit-scrollbar { height: .42rem; }
.asn-document-list::-webkit-scrollbar-thumb { background: #b9c6da; border-radius: 99px; }
.asn-document-list li {
    display: flex; align-items: center; gap: .55rem; flex: 0 0 clamp(14rem, 22vw, 19rem); min-width: 0;
    padding: .42rem .55rem; color: #6b7990; background: #fbfcff; border: 1px solid #e3e9f2;
    border-radius: .55rem; scroll-snap-align: start;
}
.asn-document-list li > span:last-child { display: grid; min-width: 0; gap: .08rem; }
.asn-document-list .link-button {
    overflow: hidden; padding: 0; color: #3159c9; font-size: .7rem; font-weight: 750; text-align: left;
    text-overflow: ellipsis; white-space: nowrap;
}
.asn-document-list small { color: #718097; font-size: .59rem; white-space: nowrap; }
.asn-document-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
    color: #3159c9; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .48rem;
}
.asn-document-icon .nav-icon { width: .68rem; height: .68rem; }
.asn-label-actions { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; }
.asn-label-actions button { display: inline-flex; align-items: center; gap: .35rem; }
.asn-line-card > header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .67rem .85rem; background: linear-gradient(105deg, #f4f7ff, #fcfbff);
    border-bottom: 1px solid #e0e7f0;
}
.asn-line-identity { display: flex; align-items: center; gap: .45rem; min-width: 0; flex-wrap: wrap; }
.asn-line-identity > span {
    padding: .16rem .43rem; color: #6844a1; background: #f5effd; border: 1px solid #e3d6f3;
    border-radius: 999px; font-size: .61rem; font-weight: 750; white-space: nowrap;
}
.asn-line-identity code,
.asn-box-table code {
    display: inline-flex; padding: .18rem .42rem; color: #274aaf; background: #eef3ff;
    border: 1px solid #d7e1fb; border-radius: .4rem; font-weight: 780; white-space: nowrap;
}
.asn-line-identity strong { min-width: 12rem; color: #30405a; font-size: .73rem; }
.asn-line-quantity {
    flex: 0 0 auto; padding: .2rem .55rem; color: #087b72; background: #effaf8;
    border: 1px solid #c9e8e2; border-radius: 999px; font-size: .65rem; font-weight: 750;
}
.asn-line-facts {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem;
    margin: 0; padding: .7rem .85rem;
}
.asn-line-facts code { color: #29436f; font-weight: 750; }
.asn-boxes-header { flex-wrap: wrap; }
.asn-boxes-heading { flex: 1 1 12rem; }
.asn-boxes-header .asn-label-actions { flex: 0 1 auto; }
.asn-boxes-header .asn-label-actions button { min-height: 2.15rem; padding-block: .42rem; }
.asn-boxes-card > header p { margin: .08rem 0 0; color: #718097; font-size: .64rem; }
.asn-boxes-card > .section-note {
    margin: 0; padding: .65rem 1rem; color: #65748b; background: #fbfcff;
    border-bottom: 1px solid #e3e9f2; font-size: .68rem; line-height: 1.45;
}
.asn-box-table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.asn-box-table thead th { background: linear-gradient(180deg, #f4f7fc, #eef3f9); border-bottom-color: #d9e3ef; }
.asn-box-table th:first-child,
.asn-box-table td:first-child { width: 3rem; min-width: 3rem; text-align: center; }
.asn-box-table th:nth-child(2),
.asn-box-table td:nth-child(2) { width: 5rem; }
.asn-box-table tbody tr:nth-child(even) { background: #fcfdff; }
.asn-box-table tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }
.asn-box-table tbody tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
.asn-box-table tbody tr.is-selected { background: #f1f5ff; box-shadow: inset 3px 0 0 var(--brand); }
.asn-box-table tbody tr:last-child td { border-bottom: 0; }

/* Gate Entry detail drawer: compact operational summary with themed document management. */
.modal.gate-entry-detail-modal { width: clamp(42rem, 52vw, 62rem); }
.gate-entry-detail-header {
    position: sticky; top: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)); z-index: 4;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) calc(-1 * clamp(1.25rem, 2.5vw, 2rem)) 1rem;
    padding: 1rem clamp(1.25rem, 2.5vw, 2rem); background: linear-gradient(110deg, #ffffff, #f3f6ff);
    border-bottom: 1px solid #d9e3f0; box-shadow: 0 8px 22px rgb(25 43 72 / .06); backdrop-filter: blur(10px);
}
.gate-entry-detail-header > div { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.gate-entry-detail-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.45rem; height: 2.45rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .7rem;
}
.gate-entry-detail-icon .nav-icon { width: 1.05rem; height: 1.05rem; }
.gate-entry-detail-header small {
    display: block; margin-bottom: .12rem; color: #718097; font-size: .58rem; font-weight: 750;
    letter-spacing: .08em; line-height: 1; text-transform: uppercase;
}
.modal .gate-entry-detail-header h2 {
    position: static; margin: 0; padding: 0; color: #1e2d45; background: none; border: 0;
    font-size: 1rem; line-height: 1.2; backdrop-filter: none;
}
.gate-entry-detail-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
    margin: 0 0 .9rem;
}
.gate-entry-detail-facts > div {
    min-width: 0; padding: .7rem .75rem; background: #fbfcff;
    border: 1px solid #e0e7f0; border-radius: .58rem;
}
.gate-entry-detail-facts dt {
    margin-bottom: .22rem; color: #718097; font-size: .6rem; font-weight: 750;
    letter-spacing: .06em; text-transform: uppercase;
}
.gate-entry-detail-facts dd { margin: 0; color: #26364f; font-size: .75rem; font-weight: 650; overflow-wrap: anywhere; }
.gate-entry-detail-facts dd span { margin-left: .25rem; color: #718097; font-weight: 550; }
.gate-entry-detail-facts code {
    display: inline-flex; padding: .16rem .4rem; color: #274aaf; background: #eef3ff;
    border: 1px solid #d7e1fb; border-radius: .4rem; font-weight: 780;
}
.gate-entry-detail-section {
    margin-bottom: .8rem; padding: .8rem; background: white;
    border: 1px solid #dfe6f0; border-radius: .7rem;
}
.gate-entry-section-heading { display: flex; align-items: center; gap: .55rem; margin-bottom: .65rem; }
.gate-entry-section-heading > span,
.gate-entry-document-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.9rem; height: 1.9rem;
    color: #6844a1; background: #f5effd; border: 1px solid #e3d6f3; border-radius: .5rem;
}
.gate-entry-section-heading > span .nav-icon,
.gate-entry-document-icon .nav-icon { width: .82rem; height: .82rem; }
.gate-entry-section-heading h3 { margin: 0; color: #30405a; font-size: .75rem; }
.gate-entry-section-heading p { margin: .08rem 0 0; color: #718097; font-size: .63rem; }
.gate-entry-reference-table { margin: 0; border-color: #e0e7f0; border-radius: .6rem; box-shadow: none; }
.gate-entry-reference-table th,
.gate-entry-reference-table td { height: auto; padding: .55rem .65rem; font-size: .68rem; }
.gate-entry-reference-table th { position: static; background: linear-gradient(180deg, #f4f7fc, #eef3f9); }
.gate-entry-link-section { background: linear-gradient(110deg, #f8faff, #fbf9ff); border-color: #dce4f4; }
.gate-entry-link-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .55rem; }
.gate-entry-link-controls label { margin: 0; }
.gate-entry-link-controls button { min-width: 5rem; }
.gate-entry-document-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem;
    margin: 0 0 .65rem; padding: 0; list-style: none;
}
.gate-entry-document-list li {
    display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .55rem .6rem;
    background: #fbfcff; border: 1px solid #e3e9f2; border-radius: .55rem;
}
.gate-entry-document-list li > div { display: grid; min-width: 0; gap: .06rem; }
.gate-entry-document-list a,
.gate-entry-document-list .link-button { overflow: hidden; color: #3159c9; font-size: .7rem; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.gate-entry-document-list small { color: #718097; font-size: .6rem; }
.gate-entry-empty-state { margin: 0 0 .65rem; padding: .7rem; color: #718097; background: #fbfcff; border: 1px dashed #d9e2ee; border-radius: .55rem; font-size: .68rem; }
.gate-entry-upload-control { display: grid; gap: .3rem; margin: 0; color: #53627a; font-size: .65rem; font-weight: 700; }
.gate-entry-upload-control input[type="file"] {
    width: 100%; padding: .35rem; color: #53627a; background: #f8faff;
    border: 1px dashed #c9d5e5; border-radius: .58rem; font-size: .67rem;
}
.gate-entry-upload-control input[type="file"]::file-selector-button {
    margin-right: .6rem; padding: .45rem .7rem; color: #3159c9; background: #edf2ff;
    border: 1px solid #d3def8; border-radius: .45rem; font: inherit; font-weight: 750; cursor: pointer;
}
.gate-entry-upload-control input[type="file"]::file-selector-button:hover { background: #e4ecff; }

@media (max-width: 700px) {
    .modal.gate-entry-detail-modal { width: 100vw; }
    .gate-entry-detail-facts,
    .gate-entry-document-list,
    .gate-entry-link-controls { grid-template-columns: 1fr; }
    .gate-entry-detail-facts dd span { display: block; margin: .14rem 0 0; }
    .gate-entry-link-controls button { width: 100%; }
}

@media (max-width: 900px) {
    .asn-detail-overview-grid { grid-template-columns: 1fr; }
    .asn-lines-scroll { max-height: none; overflow-y: visible; padding-right: 0; }
    .asn-gate-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asn-line-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asn-boxes-header { align-items: stretch; flex-direction: column; }
    .asn-boxes-header .asn-label-actions { justify-content: flex-start; width: 100%; }
}
@media (max-width: 600px) {
    .asn-detail-page .portal-page-actions { width: 100%; }
    .asn-detail-page .portal-page-actions > button { flex: 1; justify-content: center; }
    .asn-gate-header { align-items: flex-start; }
    .asn-gate-facts,
    .asn-line-facts { grid-template-columns: 1fr; }
    .asn-gate-facts dd span { display: block; margin: .15rem 0 0; }
    .asn-line-card > header { align-items: stretch; flex-direction: column; }
    .asn-label-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .asn-label-actions button { justify-content: center; width: 100%; }
    .asn-line-identity strong { min-width: 0; flex-basis: 100%; }
    .asn-line-quantity { align-self: flex-start; }
}

/* Outward scan-to-pick workspace (OutwardOrderDetail.razor). */
.scan-confirmed { display: block; margin-top: .25rem; color: var(--success); font-size: .68rem; font-weight: 650; }
.scan-mismatch { display: block; margin-top: .25rem; color: var(--danger); font-size: .68rem; font-weight: 650; }
.visual-bin-stock-list article.is-assigned-row { border: 1px solid var(--success); background: var(--success-soft); }
.is-assigned-badge {
    display: inline-block; margin-top: .3rem; padding: .1rem .5rem; color: var(--success);
    background: var(--success-soft); border-radius: 99px; font-size: .58rem; font-weight: 700;
}
.pick-workspace .selected-row { background: var(--success-soft); }

/* SKU receipt screen: scan-first workspace with compact progress and readable data cards. */
.asn-receipt-page { display: grid; gap: .9rem; }
.asn-receipt-page .portal-page-header { margin-bottom: 0; }
.asn-receipt-page .live-indicator {
    display: inline-flex; align-items: center; gap: .38rem; padding: .28rem .58rem;
    color: #66758a; background: #edf1f5; border: 1px solid #dce3eb; border-radius: 99px;
    font-size: .64rem; font-weight: 750;
}
.asn-receipt-page .live-indicator::before { content: ""; width: .42rem; height: .42rem; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 3px rgb(102 117 138 / .12); }
.asn-receipt-page .live-indicator.live { color: #087a55; background: #eaf8f2; border-color: #c9eada; }
.asn-receipt-page .live-indicator.live::before { box-shadow: 0 0 0 3px rgb(8 122 85 / .12); }
.asn-receipt-page .live-indicator.offline { color: #9a5b00; background: #fff6e5; border-color: #f0d8aa; }
.asn-receipt-command-card {
    display: grid; grid-template-columns: auto minmax(22rem, 1fr); align-items: center; gap: 1rem;
    padding: .8rem .9rem; background: linear-gradient(115deg, #f8faff, #f5fbfb 58%, #fbf8ff);
    border: 1px solid #d9e4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.asn-receipt-progress { display: flex; align-items: center; gap: .65rem; min-width: 0; padding-right: 1rem; border-right: 1px solid #dfe6ef; }
.asn-receipt-progress-icon {
    display: inline-grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .65rem;
}
.asn-receipt-progress-icon .nav-icon { width: .95rem; height: .95rem; }
.asn-receipt-stat { display: grid; gap: .06rem; min-width: 10rem; white-space: nowrap; }
.asn-receipt-stat small { color: #748298; font-size: .52rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.asn-receipt-stat strong { color: #21314a; font-size: .82rem; }
.asn-receipt-stat span { color: #738197; font-size: .62rem; }
.asn-receipt-controls { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; align-items: end; gap: .65rem; min-width: 0; }
.asn-receipt-location { display: grid; gap: .24rem; min-width: 0; }
.asn-receipt-location > span { color: #53627a; font-size: .6rem; font-weight: 750; }
.asn-receipt-location .searchable-select { width: 100%; }
.asn-receipt-location .searchable-select-input { width: 100%; }
.asn-receipt-mode-toggle { display: flex; align-items: center; gap: .35rem; padding: .25rem; background: #eaf0f7; border: 1px solid #d8e1ec; border-radius: .65rem; white-space: nowrap; }
.asn-receipt-mode-toggle button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.1rem; padding: .42rem .65rem; color: #5b6b82; background: transparent; border-color: transparent; box-shadow: none; }
.asn-receipt-mode-toggle button.is-active { color: white; background: var(--brand); border-color: var(--brand); box-shadow: 0 5px 14px -9px #203f9d; }
.asn-receipt-mode-toggle .nav-icon { width: .75rem; height: .75rem; }
.asn-receipt-page > p {
    margin: 0; padding: .7rem .85rem; color: #52627a; background: #f6f9ff;
    border: 1px solid #dce5f2; border-left: 3px solid #6f8ce2; border-radius: .65rem;
    font-size: .7rem; line-height: 1.5;
}
.asn-receipt-page > .toolbar {
    display: flex; align-items: center; gap: .55rem; margin: 0; padding: .75rem;
    background: white; border: 1px solid #dce4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.asn-receipt-page > .toolbar input:not([type="number"]) { flex: 1 1 auto; width: 100%; min-height: 2.75rem; font-size: .8rem; }
.asn-receipt-page > .toolbar input[type="number"] { min-height: 2.75rem; }
.asn-receipt-page > .toolbar button { min-height: 2.75rem; }
.asn-receipt-active-scan {
    overflow: hidden; background: white; border: 1px solid #d9e3ef;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.asn-receipt-active-scan > header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
    padding: .65rem .75rem; background: linear-gradient(110deg, #f7faff, #f5fbfa); border-bottom: 1px solid #e1e7ef;
}
.asn-receipt-active-scan > header > span {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: #315ed4;
    background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .55rem;
}
.asn-receipt-active-scan > header > span .nav-icon { width: .82rem; height: .82rem; }
.asn-receipt-active-scan > header > div { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.asn-receipt-active-scan > header small { color: #77859a; font-size: .52rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.asn-receipt-active-scan > header strong { color: #274aaf; font-size: .76rem; }
.asn-receipt-active-scan > header p { margin: 0; color: #748298; font-size: .61rem; }
.asn-receipt-active-scan > header button { min-height: 2rem; padding: .38rem .62rem; font-size: .65rem; }
.asn-receipt-scan-input { position: relative; display: flex; align-items: center; margin: .75rem .75rem .45rem; }
.asn-receipt-scan-input > .nav-icon { position: absolute; left: .75rem; z-index: 1; width: .85rem; height: .85rem; color: #718198; pointer-events: none; }
.asn-receipt-scan-input input { width: 100%; min-height: 2.85rem; padding-left: 2.2rem; font-size: .8rem; }
.asn-receipt-active-scan > footer { min-height: 1.55rem; padding: 0 .8rem .65rem; color: #748298; font-size: .61rem; }
.asn-receipt-active-scan > footer .scan-confirmed,
.asn-receipt-active-scan > footer .scan-mismatch { margin-top: 0; }
.asn-receipt-dual-scan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .9rem; }
.asn-receipt-dual-scan-grid .asn-receipt-active-scan { min-width: 0; height: 100%; }
.asn-receipt-scan-step { transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; }
.asn-receipt-scan-step.is-active { border-color: #cbd8f5; box-shadow: 0 9px 24px -20px rgb(43 78 170 / .55); }
.asn-receipt-scan-step.is-complete { border-color: #bfe4d9; box-shadow: inset 3px 0 0 #1aa38f, var(--shadow-xs); }
.asn-receipt-scan-step.is-complete > header > span { color: #087b72; background: #effaf8; border-color: #c9e8e2; }
.asn-receipt-scan-step.is-locked { background: #fafbfd; border-color: #e0e6ee; }
.asn-receipt-scan-step.is-locked > header, .asn-receipt-scan-step.is-locked > footer { background: #f7f9fc; }
.asn-receipt-scan-step.is-locked .asn-receipt-scan-input { opacity: .72; }
.asn-receipt-dual-scan-grid + .state-card { margin-top: 0; }
.asn-receipt-complete {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
    padding: .7rem .75rem; background: linear-gradient(110deg, #eefaf6, #f5fbf9);
    border: 1px solid #bfe4d5; border-left: 3px solid #14916c; border-radius: var(--radius-md);
    box-shadow: 0 9px 22px -20px rgb(13 113 81 / .55);
}
.asn-receipt-complete-icon {
    display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem;
    color: #087b5d; background: rgb(255 255 255 / .82); border: 1px solid #c7e6da; border-radius: .65rem;
}
.asn-receipt-complete-icon .nav-icon { width: .95rem; height: .95rem; }
.asn-receipt-complete-copy { display: grid; gap: .04rem; min-width: 0; }
.asn-receipt-complete-copy small {
    color: #168065; font-size: .52rem; font-weight: 820; letter-spacing: .08em; text-transform: uppercase;
}
.asn-receipt-complete-copy strong { color: #20394a; font-size: .8rem; line-height: 1.35; }
.asn-receipt-complete-copy p { margin: 0; color: #557469; font-size: .64rem; line-height: 1.4; }
.asn-receipt-complete-action {
    display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
    min-height: 2.45rem; padding: .55rem .8rem; border: 1px solid var(--brand); border-radius: var(--radius-sm);
    box-shadow: 0 7px 16px -11px rgb(32 63 157 / .7); font-size: .68rem; font-weight: 750;
    text-decoration: none; white-space: nowrap;
}
.asn-receipt-complete-action .nav-icon { width: .75rem; height: .75rem; }
.asn-receipt-bulk-workspace {
    display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(24rem, auto); align-items: center; gap: .8rem;
    padding: .7rem .8rem; background: linear-gradient(110deg, #f8fbff, #f5fbfa 58%, #fbf8ff);
    border: 1px solid #d9e3ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.asn-receipt-bulk-context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-width: 0; }
.asn-receipt-bulk-context > span {
    display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #167b9b;
    background: #eaf8fc; border: 1px solid #cde9f1; border-radius: .62rem;
}
.asn-receipt-bulk-context > span .nav-icon { width: .88rem; height: .88rem; }
.asn-receipt-bulk-context > div { display: flex; align-items: baseline; gap: .42rem; min-width: 0; }
.asn-receipt-bulk-context small { color: #748298; font-size: .52rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.asn-receipt-bulk-context strong { color: #263750; font-size: .78rem; }
.asn-receipt-bulk-context code { padding: .16rem .38rem; color: #2852ba; background: #edf3ff; border: 1px solid #d6e1fb; border-radius: .4rem; font-size: .65rem; font-weight: 760; }
.asn-receipt-bulk-context em { padding: .22rem .52rem; color: #087a68; background: #eaf8f4; border: 1px solid #c7e9df; border-radius: 99px; font-size: .6rem; font-style: normal; font-weight: 760; white-space: nowrap; }
.asn-receipt-bulk-actions { display: grid; grid-template-columns: 8rem auto auto auto; align-items: end; gap: .45rem; }
.asn-receipt-bulk-actions button { min-height: 2.5rem; padding-inline: .7rem; white-space: nowrap; }
.asn-receipt-quantity-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; min-height: 2.5rem; overflow: hidden; background: white; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.asn-receipt-quantity-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(49 87 213 / .12); }
.asn-receipt-quantity-field > span { display: flex; align-items: center; padding: 0 .55rem; color: #64738a; background: #f2f5f9; border-right: 1px solid #dce3ed; font-size: .58rem; font-weight: 750; }
.asn-receipt-quantity-field input { width: 100%; min-width: 0; min-height: 2.4rem; padding-inline: .55rem; border: 0; border-radius: 0; box-shadow: none; }
.asn-receipt-quantity-field input:focus { box-shadow: none; }
.asn-receipt-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .9rem; min-width: 0; }
.asn-receipt-data-grid > :only-child { grid-column: 1 / -1; }
.asn-receipt-data-card { min-width: 0; overflow: hidden; background: white; border: 1px solid #dce4ee; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.asn-receipt-data-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .58rem; padding: .58rem .7rem; background: linear-gradient(110deg, #fafcff, #f6f9ff); border-bottom: 1px solid #e0e7ef; }
.asn-receipt-data-header > span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: #167b9b; background: #eaf8fc; border: 1px solid #cde9f1; border-radius: .55rem; }
.asn-receipt-data-header > span.tone-violet { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.asn-receipt-data-header > span .nav-icon { width: .82rem; height: .82rem; }
.asn-receipt-data-header > div { display: grid; gap: .06rem; min-width: 0; }
.asn-receipt-data-header h2 { margin: 0; color: #2b3a53; font-size: .76rem; }
.asn-receipt-data-header p { margin: 0; color: #748298; font-size: .6rem; line-height: 1.4; }
.asn-receipt-data-header em { padding: .18rem .48rem; color: #5d6c82; background: #edf1f6; border-radius: 99px; font-size: .58rem; font-style: normal; font-weight: 750; }
.asn-receipt-data-card .table-wrap { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.asn-receipt-data-card table { min-width: 100%; }
.asn-receipt-data-card thead th { top: 0; padding-block: .58rem; background: linear-gradient(180deg, #f4f7fb, #eef3f8); }
.asn-receipt-data-card tbody tr:nth-child(even) { background: #fbfcfe; }
.asn-receipt-data-card tbody tr:hover { background: #f3f7ff; box-shadow: inset 3px 0 0 #6d8bea; }
.asn-receipt-data-card td { height: 3.15rem; padding-block: .42rem; }
.asn-receipt-rollup-table td:first-child { min-width: 14rem; }
.asn-receipt-history-table td:nth-child(2) { min-width: 13rem; }
.asn-receipt-sku-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .12rem .38rem; min-width: 0; }
.asn-receipt-sku-cell strong { color: #283951; font-size: .68rem; white-space: nowrap; }
.asn-receipt-sku-cell span { overflow: hidden; color: #65748a; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.asn-receipt-sku-cell code { grid-column: 1 / -1; width: max-content; max-width: 100%; overflow: hidden; padding: .12rem .32rem; color: #2d57bf; background: #edf3ff; border: 1px solid #d6e1fb; border-radius: .35rem; font-size: .58rem; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
.asn-receipt-quantity { display: inline-flex; justify-content: center; min-width: 3.5rem; padding: .16rem .4rem; border: 1px solid; border-radius: 99px; font-size: .6rem; font-weight: 750; white-space: nowrap; }
.asn-receipt-quantity.neutral { color: #5c6b80; background: #f0f3f7; border-color: #dde4ec; }
.asn-receipt-quantity.received { color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.asn-receipt-quantity.remaining { color: #9a6200; background: #fff7e8; border-color: #f0d7a8; }
.asn-receipt-scroll-table { max-height: 14rem; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; }

@media (max-width: 960px) {
    .asn-receipt-command-card { grid-template-columns: 1fr; }
    .asn-receipt-progress { padding: 0 0 .75rem; border-right: 0; border-bottom: 1px solid #dfe6ef; }
    .asn-receipt-dual-scan-grid { grid-template-columns: 1fr; }
    .asn-receipt-bulk-workspace { grid-template-columns: 1fr; }
    .asn-receipt-data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .asn-receipt-controls { grid-template-columns: 1fr; }
    .asn-receipt-complete { grid-template-columns: auto minmax(0, 1fr); }
    .asn-receipt-complete-action { grid-column: 1 / -1; width: 100%; }
    .asn-receipt-mode-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asn-receipt-mode-toggle button { justify-content: center; }
    .asn-receipt-page > .toolbar { align-items: stretch; flex-direction: column; }
    .asn-receipt-page > .toolbar :is(input, button) { width: 100% !important; }
    .asn-receipt-data-header { align-items: start; }
    .asn-receipt-active-scan > header { grid-template-columns: auto minmax(0, 1fr); }
    .asn-receipt-active-scan > header > div { align-items: flex-start; flex-direction: column; gap: .05rem; }
    .asn-receipt-active-scan > header button { grid-column: 1 / -1; width: 100%; }
    .asn-receipt-bulk-context { grid-template-columns: auto minmax(0, 1fr); }
    .asn-receipt-bulk-context > div { align-items: flex-start; flex-direction: column; gap: .05rem; }
    .asn-receipt-bulk-context em { grid-column: 1 / -1; justify-self: start; }
    .asn-receipt-bulk-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asn-receipt-bulk-actions > * { width: 100%; }
}

/* Box barcode generator: compact creation controls and print-friendly label grid. */
.box-generator-page { display: grid; gap: .9rem; }
.box-generator-page .portal-page-header { margin-bottom: 0; }
.box-generator-control-card {
    display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(14rem, 18rem) 9rem auto; align-items: end; gap: .75rem;
    padding: .8rem .9rem; background: linear-gradient(115deg, #f8faff, #f4fbfa 62%, #fbf8ff);
    border: 1px solid #dae4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.box-generator-control-copy { display: flex; align-items: center; align-self: center; gap: .65rem; min-width: 0; }
.box-generator-control-copy > span {
    display: inline-grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d6e1fb; border-radius: .62rem;
}
.box-generator-control-copy > span .nav-icon { width: .88rem; height: .88rem; }
.box-generator-control-copy > div { display: grid; gap: .06rem; min-width: 0; }
.box-generator-control-copy h2 { margin: 0; color: #293950; font-size: .8rem; }
.box-generator-control-copy p { margin: 0; color: #748298; font-size: .62rem; line-height: 1.4; }
.box-generator-control-card > label { display: grid; gap: .25rem; color: #526179; font-size: .6rem; font-weight: 750; }
.box-generator-control-card > label input { width: 100%; }
.box-generator-input-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; min-height: 2.4rem; overflow: hidden; background: white; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.box-generator-input-group:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(49 87 213 / .12); }
.box-generator-input-group > strong { display: flex; align-items: center; padding: 0 .65rem; color: #64738a; background: #f3f6fa; border-right: 1px solid #dce3ed; font-size: .62rem; font-weight: 750; }
.box-generator-input-group > input { min-height: 2.35rem; padding-inline: .65rem; border: 0; border-radius: 0; box-shadow: none; }
.box-generator-input-group > input:focus { box-shadow: none; }
.box-generator-control-card > button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.4rem; padding-inline: 1rem; white-space: nowrap; }
.box-generator-control-card > button .nav-icon { width: .78rem; height: .78rem; }
.box-generator-results { overflow: hidden; background: white; border: 1px solid #dce4ee; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.box-generator-results > header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem;
    padding: .75rem .85rem; background: linear-gradient(110deg, #fafcff, #f7f8ff); border-bottom: 1px solid #e1e7ef;
}
.box-generator-results > header > span {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: #7550b4;
    background: #f5effd; border: 1px solid #e3d7f3; border-radius: .55rem;
}
.box-generator-results > header > span .nav-icon { width: .82rem; height: .82rem; }
.box-generator-results > header > div { display: grid; gap: .05rem; min-width: 0; }
.box-generator-results > header h2 { margin: 0; color: #2a3952; font-size: .78rem; }
.box-generator-results > header p { margin: 0; color: #748298; font-size: .6rem; }
.box-generator-results > header em { padding: .18rem .48rem; color: #5c6b81; background: #edf1f6; border-radius: 99px; font-size: .58rem; font-style: normal; font-weight: 750; }
.box-generator-label-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: .8rem; background: #f8faff; }
.box-generator-label-card { min-width: 0; overflow: hidden; background: white; border: 1px solid #dce4ee; border-radius: .7rem; box-shadow: 0 7px 18px -16px rgb(27 47 80 / .5); }
.box-generator-label-card > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .65rem; background: #fbfcff; border-bottom: 1px solid #e4eaf2; }
.box-generator-label-card > header code { overflow: hidden; padding: .18rem .38rem; color: #274aaf; background: #eef3ff; border: 1px solid #d7e1fb; border-radius: .4rem; font-size: .67rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.box-generator-label-card > header > span { min-width: 0; overflow: hidden; color: #52627a; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.box-generator-label-card > header > .box-label-delete {
    display: inline-grid; place-items: center; flex: 0 0 1.85rem;
    width: 1.85rem; min-width: 1.85rem; height: 1.85rem; min-height: 1.85rem;
    margin: 0; padding: 0; border-radius: .5rem; line-height: 1; box-shadow: none;
}
.box-generator-label-card > header > .box-label-delete .nav-icon {
    display: block; width: .82rem; height: .82rem; margin: 0;
}
.box-generator-label-card > .qr-label-card { padding: .7rem; border: 0; border-radius: 0; }
.box-generator-label-card .qr-label-barcode { max-width: 9rem; }
.box-generator-label-card .qr-label-code { max-width: 5.5rem; }
.box-generator-label-card .qr-label-location { font-size: .78rem; }
.outward-label-control-card { grid-template-columns: minmax(15rem, .9fr) minmax(18rem, 1.25fr) 8rem auto; }
.outward-label-control-card > label > span:first-child:not(.box-generator-input-group) { color: #69778d; font-size: .55rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.outward-label-control-card .searchable-select { width: 100%; }
.outward-label-control-card .searchable-select-control { min-height: 2.4rem; }
.outward-label-results .box-generator-label-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.outward-label-card > header > span { overflow: hidden; padding: .18rem .4rem; color: #087b72; background: #effaf8; border: 1px solid #c9e8e2; border-radius: 99px; font-size: .58rem; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.outward-label-card .qr-label-card { min-height: 13rem; align-content: center; }
.outward-label-card .qr-label-barcode { max-width: 11rem; }
.outward-label-card .qr-label-code { max-width: 6.5rem; }
.outward-label-card .qr-label-location { color: #2a3a52; font-size: .82rem; }

@media (max-width: 1000px) {
    .box-generator-control-card { grid-template-columns: minmax(0, 1fr) 9rem auto; }
    .box-generator-control-card .box-generator-control-copy { grid-column: 1 / -1; }
    .box-generator-label-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-label-control-card { grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr); }
    .outward-label-control-card .box-generator-control-copy { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .box-generator-control-card { grid-template-columns: 1fr; align-items: stretch; }
    .box-generator-control-card > button { width: 100%; }
    .box-generator-label-grid { grid-template-columns: 1fr; }
    .outward-label-control-card { grid-template-columns: 1fr; }
    .outward-label-control-card .box-generator-control-copy { grid-column: auto; }
}
@media print {
    .box-generator-page > :not(.box-generator-results),
    .box-generator-results > header { display: none !important; }
    .box-generator-results { overflow: visible; border: 0; box-shadow: none; }
    .box-generator-label-grid { grid-template-columns: repeat(3, 1fr); padding: 0; background: white; }
    .box-generator-label-card { break-inside: avoid; box-shadow: none; }
}

/* Put-away: guided source-to-destination movement workspace. */
.putaway-page { display: grid; gap: .65rem; }
.putaway-page .portal-page-header { margin-bottom: 0; }
.putaway-page .portal-page-actions { align-self: center; }
.putaway-warehouse-pill {
    display: flex; align-items: center; gap: .48rem; max-width: 22rem; padding: .38rem .58rem;
    color: #087b72; background: #edf9f6; border: 1px solid #cde9e2; border-radius: .55rem;
}
.putaway-warehouse-pill > .nav-icon { flex: none; width: .78rem; height: .78rem; }
.putaway-warehouse-pill > span { display: flex; align-items: baseline; gap: .35rem; min-width: 0; }
.putaway-warehouse-pill small { color: #6f807f; font-size: .5rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.putaway-warehouse-pill strong { overflow: hidden; color: #28514d; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.putaway-warehouse-context {
    display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem;
    background: linear-gradient(110deg, #f7faff, #f3fbfa); border: 1px solid #dbe5ef;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.putaway-warehouse-context > span {
    display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; color: #087b72;
    background: #e8f8f4; border: 1px solid #cbe9e2; border-radius: .58rem;
}
.putaway-warehouse-context > span .nav-icon { width: .86rem; height: .86rem; }
.putaway-warehouse-context > div { display: grid; gap: .05rem; }
.putaway-warehouse-context small { color: #748298; font-size: .52rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.putaway-warehouse-context strong { color: #25354e; font-size: .76rem; }
.putaway-mode-card,
.putaway-flow-card,
.putaway-stock-card { min-width: 0; overflow: hidden; background: white; border: 1px solid #dbe4ef; border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.putaway-mode-card { display: grid; grid-template-columns: minmax(11rem, .2fr) minmax(0, 1fr); }
.putaway-mode-card > header,
.putaway-stock-header,
.putaway-flow-header { display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem; background: linear-gradient(110deg, #fafcff, #f7f9ff); border-bottom: 1px solid #e1e7ef; }
.putaway-mode-card > header > span,
.putaway-stock-header > span {
    display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d7e1fb; border-radius: .55rem;
}
.putaway-mode-card > header > span .nav-icon,
.putaway-stock-header > span .nav-icon { width: .82rem; height: .82rem; }
.putaway-mode-card > header > div,
.putaway-stock-header > div,
.putaway-flow-header > div { display: grid; gap: .04rem; min-width: 0; }
.putaway-mode-card header small,
.putaway-stock-header small { color: #3159c9; font-size: .51rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.putaway-mode-card h2,
.putaway-stock-header h2,
.putaway-flow-header h2 { margin: 0; color: #2a3952; font-size: .78rem; }
.putaway-mode-card > header { border-right: 1px solid #e1e7ef; border-bottom: 0; }
.putaway-mode-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; padding: .55rem .65rem; }
.putaway-mode-grid label {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .48rem;
    min-height: 2.35rem; padding: .42rem .48rem; color: #55657c; background: #fbfcff;
    border: 1px solid #e0e7f0; border-radius: .52rem; cursor: pointer; font-size: .58rem; font-weight: 700;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.putaway-mode-grid label:hover { color: #304466; background: #f5f8ff; border-color: #c9d6ec; }
.putaway-mode-grid label.is-selected { color: #284eaf; background: #edf3ff; border-color: #bfcffa; box-shadow: inset 3px 0 0 #4168dc; }
.putaway-mode-grid input { width: .9rem; height: .9rem; min-height: 0; margin: 0; accent-color: var(--brand); }
.putaway-mode-grid .nav-icon { width: .72rem; height: .72rem; color: #3159c9; opacity: 0; }
.putaway-mode-grid .is-selected .nav-icon { opacity: 1; }
.putaway-flow-header > span {
    display: inline-grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem;
    color: white; background: #3159d9; border-radius: 50%; font-size: .65rem; font-weight: 800;
}
.putaway-flow-body { display: grid; gap: .65rem; padding: .75rem; }
.putaway-route-grid {
    position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; gap: .65rem;
}
.putaway-source-card {
    position: relative; z-index: 5; overflow: visible;
}
.putaway-source-card > .putaway-flow-header { background: linear-gradient(110deg, #f8faff, #f4f7ff); }
.putaway-source-card > .putaway-flow-body { align-content: center; min-width: 0; }
.putaway-source-card .putaway-field-grid > label { width: 100%; }
.putaway-source-card .searchable-select { z-index: 6; }
.putaway-source-card .searchable-select-dropdown { z-index: 40; }
.putaway-field-grid { margin: 0; }
.putaway-field-grid > label { display: grid; gap: .3rem; width: min(100%, 44rem); color: #4e5e76; font-size: .65rem; }
.putaway-page .bin-pallet-picker-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; width: 100%; }
.putaway-page .bin-pallet-picker-row .searchable-select,
.putaway-page .bin-pallet-picker-row input { width: 100%; }
.putaway-page .bin-pallet-picker-row .icon-button { display: inline-grid; place-items: center; width: 2.4rem; min-width: 2.4rem; padding: 0; color: #3159c9; background: #f1f5ff; border-color: #d3def7; }
.putaway-route-grid .putaway-flow-header { padding: .62rem .75rem; }
.putaway-route-grid .field-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0; }
.putaway-route-grid .field-grid > label { width: 100%; }
.putaway-route-grid .putaway-flow-body input,
.putaway-route-grid .putaway-flow-body .searchable-select-input { min-height: 2.5rem; }
.putaway-flow-body > p { margin: 0; color: #64738a; font-size: .64rem; }
.putaway-flow-body > label { display: grid; gap: .3rem; color: #4e5e76; font-size: .65rem; }
.putaway-flow-body > label > span { display: flex; align-items: baseline; gap: .35rem; }
.putaway-flow-body > label > span small { color: #8994a5; font-size: .52rem; font-weight: 650; }
.putaway-flow-body > label > input { width: 100%; }
.putaway-selection-note { display: inline-flex; align-items: center; gap: .3rem; width: max-content; padding: .22rem .48rem; color: #087b72 !important; background: #ecf8f5; border: 1px solid #cbe8e1; border-radius: 99px; }
.putaway-selection-note .nav-icon { width: .65rem; height: .65rem; }
.putaway-flow-body > .toolbar { justify-content: flex-end; margin: 0; padding: .55rem 0 0; background: transparent; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
.putaway-flow-body > .toolbar button { display: inline-flex; align-items: center; gap: .4rem; }
.putaway-flow-body > .toolbar .nav-icon { width: .76rem; height: .76rem; }
.putaway-stock-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.putaway-stock-header > span { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.putaway-stock-header em { padding: .24rem .55rem; color: #6842a7; background: #f3edfc; border: 1px solid #dfd1f3; border-radius: 99px; font-size: .58rem; font-style: normal; font-weight: 750; }
.putaway-stock-header em strong { font-size: .72rem; }
.putaway-stock-card > p { margin: .7rem .85rem 0; padding: .6rem .7rem; color: #5f6f86; background: #fff9ed; border: 1px solid #f0deb7; border-radius: .5rem; font-size: .63rem; }
.putaway-stock-card > .state-card { margin: .75rem .85rem; }
.putaway-stock-card > .table-wrap {
    max-height: min(15rem, 36vh); margin: 0; overflow: auto; border-width: 0;
    border-radius: 0; box-shadow: none; overscroll-behavior: contain;
}
.putaway-review-table thead th { top: 0; padding-block: .62rem; background: linear-gradient(180deg, #f4f7fc, #eef3f9); border-bottom-color: #d9e3ef; }
.putaway-review-table tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }
.putaway-review-table tbody tr:nth-child(even) { background: #fcfdff; }
.putaway-review-table tbody tr:hover { background: #f4f8ff; box-shadow: inset 3px 0 0 #6d8deb; }
.putaway-review-table td { height: 3rem; padding-block: .58rem; }
.putaway-review-table .putaway-sku-column,
.putaway-review-table .putaway-sku-cell { width: 100% !important; min-width: 18rem; }
.putaway-sku-cell > div { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.putaway-sku-cell code { display: inline-flex; flex: none; padding: .18rem .38rem; color: #274aaf; background: #eef3ff; border: 1px solid #d7e1fb; border-radius: .4rem; font-weight: 780; }
.putaway-sku-cell strong { overflow: hidden; color: #34445d; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.putaway-sku-cell small { display: block; margin-top: .18rem; color: #78879d; font-size: .58rem; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.putaway-location-label,
.putaway-batch-label,
.putaway-qty-label { display: inline-flex; align-items: center; min-height: 1.45rem; padding: .18rem .48rem; border: 1px solid transparent; border-radius: 999px; font-size: .66rem; font-weight: 720; white-space: nowrap; }
.putaway-location-label { color: #147896; background: #ebf8fc; border-color: #cce9f2; }
.putaway-batch-label { color: #7544b7; background: #f5efff; border-color: #dfd0f5; }
.putaway-qty-label { color: #087b62; background: #ebf8f3; border-color: #cae9dd; }
.putaway-empty-value { color: #9aa5b5; }
.putaway-qty-column,
.putaway-qty-cell { text-align: right; }
.putaway-destination-card {
    position: relative; z-index: 4; overflow: visible;
}
.putaway-destination-card .putaway-flow-header {
    background: linear-gradient(110deg, #f8fbff, #f1faf7);
}
.putaway-destination-card .putaway-flow-header > span { background: #087b72; }
.putaway-destination-card > .putaway-flow-body { align-content: center; min-width: 0; }
.putaway-destination-card .putaway-field-grid > label { width: 100%; }
.putaway-destination-card .searchable-select { z-index: 6; }
.putaway-destination-card .searchable-select-dropdown { z-index: 40; }
.putaway-destination-card.is-pending { z-index: 1; background: #fafbfd; border-style: dashed; box-shadow: none; }
.putaway-destination-card.is-pending .putaway-flow-header { background: #f8fafc; }
.putaway-destination-card.is-pending .putaway-flow-header > span { background: #98a5b6; }
.putaway-destination-card.is-pending input:disabled { color: #8a96a8; background: #f4f6f9; cursor: not-allowed; }

@media (max-width: 1200px) {
    .putaway-mode-card { grid-template-columns: 1fr; }
    .putaway-mode-card > header { border-right: 0; border-bottom: 1px solid #e1e7ef; }
    .putaway-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .putaway-mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .putaway-route-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .putaway-mode-grid { grid-template-columns: 1fr; }
    .putaway-warehouse-pill > span { display: grid; gap: .02rem; }
    .putaway-stock-header { align-items: start; }
    .putaway-flow-body > .toolbar button { justify-content: center; width: 100%; }
}

/* Unloading: compact operational progress with consistent evidence/document cards. */
.unloading-page { display: grid; gap: .9rem; }
.unloading-page .portal-page-header { margin-bottom: 0; }
.unloading-summary-card {
    display: grid; grid-template-columns: auto minmax(13rem, 1fr) auto auto; align-items: center; gap: 1rem;
    padding: .9rem 1rem; background: linear-gradient(110deg, #f6f9ff, #f2fbfa);
    border: 1px solid #d8e5ef; border-left: 3px solid #2b78c2; border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.unloading-summary-icon,
.unloading-card-header > span {
    display: inline-grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem;
    color: #315ed4; background: #edf2ff; border: 1px solid #d6e1fb; border-radius: .65rem;
}
.unloading-summary-icon .nav-icon,
.unloading-card-header > span .nav-icon { width: .95rem; height: .95rem; }
.unloading-summary-copy { display: grid; gap: .1rem; min-width: 0; }
.unloading-summary-copy small { color: #697991; font-size: .57rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.unloading-summary-copy strong { color: #20304a; font-size: .9rem; }
.unloading-summary-copy > span { color: #75849a; font-size: .65rem; }
.unloading-counts { display: grid; grid-template-columns: repeat(3, minmax(4.4rem, 1fr)); margin: 0; overflow: hidden; background: rgb(255 255 255 / .75); border: 1px solid #dae4ef; border-radius: .65rem; }
.unloading-counts > div { min-width: 0; padding: .5rem .7rem; border-right: 1px solid #e1e8f0; text-align: center; }
.unloading-counts > div:last-child { border-right: 0; }
.unloading-counts dt { color: #75849a; font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.unloading-counts dd { margin: .08rem 0 0; color: #263650; font-size: .82rem; font-weight: 750; }
.unloading-card {
    min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid #dce4ee;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.unloading-card-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .8rem .9rem; background: linear-gradient(110deg, #fafcff, #f7f8ff); border-bottom: 1px solid #e1e7ef; }
.unloading-card-header > span.tone-violet { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.unloading-card-header > span.tone-teal { color: #087b72; background: #eaf8f5; border-color: #cce9e3; }
.unloading-card-header > div { display: grid; gap: .08rem; min-width: 0; }
.unloading-card-header h2 { margin: 0; color: #2b3a53; font-size: .78rem; }
.unloading-card-header p { margin: 0; color: #748298; font-size: .62rem; line-height: 1.4; }
.unloading-card-header em { padding: .18rem .48rem; color: #5c6c83; background: #edf1f6; border-radius: 99px; font-size: .6rem; font-style: normal; font-weight: 750; }
.unloading-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: start; }
.unloading-file-list { display: grid; gap: .45rem; margin: 0; padding: .75rem .85rem; list-style: none; }
.unloading-file-list li { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .55rem .6rem; background: #fbfcff; border: 1px solid #e2e8f1; border-radius: .55rem; }
.unloading-file-list li > span { display: inline-grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; color: #526fd1; background: #edf2ff; border-radius: .45rem; }
.unloading-file-list li > span .nav-icon { width: .75rem; height: .75rem; }
.unloading-file-list li > div { display: grid; gap: .04rem; min-width: 0; }
.unloading-file-list .link-button { overflow: hidden; color: #3159c9; font-size: .7rem; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.unloading-file-list small { color: #7a8799; font-size: .58rem; }
.unloading-empty { margin: .75rem .85rem; padding: .75rem; color: #748298; background: #fbfcff; border: 1px dashed #d6e0ec; border-radius: .55rem; font-size: .66rem; text-align: center; }
.unloading-upload { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 0 .85rem .85rem; padding: .55rem .75rem; color: #3159c9; background: #f3f6ff; border: 1px dashed #bacaf1; border-radius: .55rem; cursor: pointer; font-size: .68rem; font-weight: 750; }
.unloading-upload:hover { background: #ebf0ff; border-color: #91a9e5; }
.unloading-upload .nav-icon { width: .78rem; height: .78rem; }
.unloading-upload input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.unloading-complete-card { padding-bottom: .85rem; }
.unloading-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; padding: .8rem .9rem; }
.unloading-fields label { display: grid; gap: .28rem; color: #4f5f77; font-size: .66rem; }
.unloading-fields input { width: 100%; }
.unloading-complete-card footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .9rem; }
.unloading-complete-card footer small { color: #748298; font-size: .61rem; }
.unloading-complete-card footer button { display: inline-flex; align-items: center; gap: .4rem; }
.unloading-complete-card footer .nav-icon { width: .78rem; height: .78rem; }

@media (max-width: 900px) {
    .unloading-summary-card { grid-template-columns: auto minmax(0, 1fr) auto; }
    .unloading-counts { grid-column: 1 / -1; grid-row: 2; }
    .unloading-evidence-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .unloading-summary-card { grid-template-columns: auto minmax(0, 1fr); }
    .unloading-summary-card > .status { grid-column: 1 / -1; justify-self: start; }
    .unloading-counts { grid-column: 1 / -1; }
    .unloading-fields { grid-template-columns: 1fr; }
    .unloading-complete-card footer { align-items: stretch; flex-direction: column; }
    .unloading-complete-card footer button { justify-content: center; width: 100%; }
}

@media print {
    .no-print { display: none !important; }
    .asn-detail-page:has(.asn-label-preview-backdrop) > *:not(.asn-label-preview-backdrop) { display: none !important; }
    .asn-label-preview-backdrop { position: static; display: block; overflow: visible; padding: 0; background: none; backdrop-filter: none; }
    .asn-label-preview-modal { width: 100%; height: auto; max-height: none; overflow: visible; padding: 0; background: white; border: 0; border-radius: 0; box-shadow: none; }
    .asn-label-preview-header, .asn-label-preview-modal > footer { display: none !important; }
    .asn-label-preview-body { overflow: visible; padding: 0; }
    .asn-label-preview-body .label-sheet { margin: 0; }
    .asn-label-preview-body .qr-label-card { box-shadow: none; }
    .label-sheet { grid-template-columns: repeat(3, 1fr); }
    .qr-label-card { break-inside: avoid; }
}

/* Outbound picking (§46: large touch targets, high-visibility counters, minimal typing). */
.sku-image-placeholder, .sku-image-preview {
    display: flex; align-items: center; justify-content: center;
    width: 8rem; height: 8rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    background: var(--surface-subtle); color: var(--text-subtle); font-size: .78rem; overflow: hidden;
}
.sku-image-placeholder img, .sku-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.sku-image-upload { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sku-image-upload > div { display: flex; flex-direction: column; gap: .35rem; }
.sku-image-upload small { color: var(--text-muted); font-size: .72rem; }
.picking-order-select { max-width: 32rem; margin-bottom: 1rem; }
.picking-task-modal { max-width: 40rem; }
.picking-counter { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: .75rem 0; }
.picking-counter > div { display: flex; flex-direction: column; gap: .15rem; min-width: 6rem; }
.picking-counter span { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.picking-counter strong { font-size: 1.6rem; font-weight: 800; }
.picking-scan-steps { display: flex; flex-direction: column; gap: .75rem; margin: 1rem 0; }
.picking-scan-step { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .65rem .8rem; }
.picking-scan-step.step-valid { border-color: #2f9e44; background: #f1fbf3; }
.picking-scan-step.step-invalid { border-color: #e03131; background: #fff2f2; }
.picking-scan-step.step-skipped { opacity: .55; }
.picking-scan-step-label { display: block; font-weight: 700; margin-bottom: .35rem; }
.picking-scan-step-label small { font-weight: 400; color: var(--text-muted); }
.picking-scan-step-row { display: flex; gap: .5rem; }
.picking-scan-step-row input { flex: 1; min-height: 3rem; font-size: 1.05rem; }
.picking-scan-step-row button { min-width: 3rem; min-height: 3rem; }
.picking-mode-toggle { display: flex; gap: .5rem; margin: .75rem 0; }
.picking-mode-toggle button { flex: 1; min-height: 2.75rem; }

/* Outbound execution workspaces: compact scan-first layout without changing workflows. */
.outward-picking-summary {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: .75rem;
}
.outward-picking-summary article,
.outward-picking-order-context article { position: relative; padding: .7rem .85rem .68rem 1rem; }
.outward-picking-summary article::before,
.outward-picking-order-context article::before {
    position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6684df;
}
.outward-picking-summary .is-complete::before,
.outward-picking-summary .is-picked::before { background: #18a088; }
.outward-picking-summary .is-quantity::before { background: #8059bd; }
.outward-picking-summary .is-exception::before { background: #d69a32; }
.outward-picking-summary strong { font-size: 1rem; }
.outward-picking-summary .is-picker strong { font-size: .82rem; }

.picking-order-select {
    display: grid; grid-template-columns: minmax(13rem, .72fr) minmax(18rem, 1.35fr) auto;
    align-items: center; gap: .85rem; max-width: none; margin-bottom: .85rem; padding: .72rem .8rem;
    background: linear-gradient(100deg, #f5f8ff 0%, #fff 62%); border: 1px solid #d8e2f0;
    border-radius: var(--radius-md); box-shadow: var(--shadow-xs);
}
.picking-order-select-copy { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.picking-order-select-icon,
.outward-packing-start-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.4rem; height: 2.4rem; color: #315fdb; background: #edf3ff;
    border: 1px solid #d2defb; border-radius: .72rem;
}
.picking-order-select-icon .nav-icon,
.outward-packing-start-icon .nav-icon { width: 1rem; height: 1rem; }
.picking-order-select-copy div { display: grid; gap: .06rem; min-width: 0; }
.picking-order-select-copy div > span,
.outward-packing-start-copy div > span {
    color: #60718b; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.picking-order-select-copy strong { overflow: hidden; color: #24334d; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.picking-order-select > label { min-width: 0; margin: 0; }
.picking-order-select > label > * { width: 100%; }
.picking-order-select > small { color: #7a879b; font-size: .61rem; white-space: nowrap; }

.outward-picking-order-context { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.outward-picking-order-context article:nth-child(3n + 2)::before { background: #13a18a; }
.outward-picking-order-context article:nth-child(3n)::before { background: #8059bd; }
.outward-picking-progress-card { margin-bottom: .75rem; }
.outward-picking-progress-card .outward-section-heading { padding-bottom: .55rem; }
.outward-picking-progress-card .picking-counter {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0;
    border-top: 1px solid #e3e9f2;
}
.outward-picking-progress-card .picking-counter > div { min-width: 0; padding: .62rem .85rem; border-right: 1px solid #e3e9f2; }
.outward-picking-progress-card .picking-counter > div:last-child { border-right: 0; }
.outward-picking-progress-card .picking-counter strong { font-size: 1rem; }
.outward-picking-progress-card progress { display: block; width: calc(100% - 1.7rem); height: .34rem; margin: 0 .85rem .72rem; }
.outward-picking-lines-table tbody tr:nth-child(even),
.outward-picking-box-table tbody tr:nth-child(even),
.outward-packing-queue-table tbody tr:nth-child(even) { background: #fbfcfe; }
.outward-picking-lines-table tbody tr:hover,
.outward-picking-box-table tbody tr:hover,
.outward-packing-queue-table tbody tr:hover { background: #f5f8ff; }
.outward-quantity-badge.requested,
.outward-quantity-badge.is-requested { color: #3157b8; background: #edf3ff; border-color: #d2defb; }
.outward-quantity-badge.allocated,
.outward-quantity-badge.is-allocated { color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.outward-quantity-badge.picked,
.outward-quantity-badge.is-picked { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.outward-quantity-badge.remaining { color: #a16008; background: #fff7e7; border-color: #f0d293; }

.outward-packing-start-card {
    display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(23rem, 1.28fr);
    align-items: center; gap: 1rem; margin-bottom: .8rem; padding: .8rem;
    background: linear-gradient(105deg, #f3f8ff, #fff 66%);
}
.outward-packing-start-copy { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.outward-packing-start-copy div { display: grid; gap: .03rem; }
.outward-packing-start-copy h2 { margin: 0; color: #22314a; font-size: .92rem; }
.outward-packing-start-copy small { color: #748298; font-size: .63rem; }
.packing-start-row { display: flex; align-items: stretch; gap: .5rem; min-width: 0; }
.packing-start-row input { flex: 1; min-width: 0; }
.packing-start-row button,
.outward-packing-queue-filters button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; white-space: nowrap; }
.packing-start-row button .nav-icon,
.outward-packing-queue-filters button .nav-icon { width: .82rem; height: .82rem; }
.outward-packing-queue-card > .outward-section-heading > small { color: #7b899e; font-size: .62rem; }
.outward-packing-queue-filters {
    display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(14rem, 1.25fr) auto;
    align-items: end; gap: .55rem; padding: .62rem .72rem; background: #f8faff;
    border-top: 1px solid #e1e8f1; border-bottom: 1px solid #e1e8f1;
}
.outward-packing-queue-filters > * { min-width: 0; margin: 0; }
.outward-packing-queue-card .outward-table-wrap { max-height: min(27rem, calc(100vh - 23rem)); }
.outward-packing-queue-table .outward-sku-code { white-space: nowrap; }
.outward-priority-tag,
.outward-count-tag,
.outward-exception-tag {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2rem;
    padding: .16rem .42rem; color: #4d607c; background: #f1f4f8; border: 1px solid #dce3ec;
    border-radius: 99px; font-size: .63rem; font-weight: 750; white-space: nowrap;
}
.outward-priority-tag { min-width: 3.65rem; color: #3157b8; background: #edf3ff; border-color: #d2defb; }
.outward-exception-tag.has-exceptions { color: #b53548; background: #fff0f2; border-color: #f3c9d0; }

.outward-packing-workspace-summary .outward-section-heading { align-items: center; }
.outward-packing-metrics {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin: 0;
    border-top: 1px solid #e1e8f1;
}
.outward-packing-metrics > div { min-width: 0; padding: .64rem .72rem; border-right: 1px solid #e1e8f1; }
.outward-packing-metrics > div:last-child { border-right: 0; }
.outward-packing-metrics strong { overflow: hidden; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.outward-packing-workspace-summary progress { display: block; width: calc(100% - 1.4rem); height: .34rem; margin: .1rem .7rem .65rem; }
.outward-packing-workspace-summary .section-note { margin: 0; padding: .55rem .72rem; border-top: 1px solid #e1e8f1; }
.outward-packing-box-selector { margin-bottom: .75rem; }
.packing-box-tabs { display: flex; flex-wrap: wrap; gap: .45rem; padding: .62rem .72rem; border-top: 1px solid #e1e8f1; }
.packing-box-tabs .tab { display: inline-flex; align-items: center; gap: .42rem; min-height: 2.1rem; padding: .38rem .68rem; border-radius: 99px; }
.packing-box-tabs .tab.active { color: #fff; background: #315fdb; border-color: #315fdb; }
.packing-box-tabs .tab-status { font-size: .58rem; opacity: .78; }
.outward-packing-active-box > .outward-section-heading { position: sticky; top: 0; z-index: 3; background: #fff; }
.packing-verify-panel { padding: .8rem; background: linear-gradient(100deg, #f3f7ff, #fff); border-top: 1px solid #dce5f1; }
.packing-verify-panel h3,
.packing-card h3 { margin: 0 0 .5rem; color: #263650; font-size: .78rem; }
.packing-scan-row { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.packing-scan-row .scan-input { flex: 1; min-width: 9rem; }
.qty-stepper { display: inline-flex; align-items: stretch; }
.qty-stepper > * { border-radius: 0; }
.qty-stepper > :first-child { border-radius: .5rem 0 0 .5rem; }
.qty-stepper > :last-child { border-radius: 0 .5rem .5rem 0; }
.qty-stepper input { width: 4.2rem; text-align: center; }
.packing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .7rem; border-top: 1px solid #e1e8f1; }
.packing-card { padding: .75rem; background: #fff; border: 1px solid #dce4ee; border-radius: .72rem; }
.outward-packing-active-box > .packing-card { margin: .7rem; }
.packing-card-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.packing-card-head > span { color: #6d7b91; font-size: .62rem; font-weight: 750; }
.qc-checklist { display: flex; flex-wrap: wrap; gap: .4rem; margin: .55rem 0; padding: 0; list-style: none; }
.qc-checklist li label { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .5rem; background: #f7f9fc; border: 1px solid #dfe6ef; border-radius: .55rem; font-size: .66rem; }
.packing-seal-row { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; padding: .7rem; border-top: 1px solid #e1e8f1; }
.seal-blockers { flex: 1; margin: 0; color: #b53548; font-size: .65rem; }

@media (max-width: 1100px) {
    .outward-picking-summary,
    .outward-picking-order-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .outward-picking-summary article:nth-child(3n),
    .outward-picking-order-context article:nth-child(3n) { border-right: 0; }
    .outward-packing-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .outward-packing-metrics > div:nth-child(4) { border-right: 0; }
}
@media (max-width: 760px) {
    .picking-order-select,
    .outward-packing-start-card { grid-template-columns: 1fr; }
    .picking-order-select > small { display: none; }
    .outward-packing-queue-filters { grid-template-columns: 1fr; }
    .outward-packing-queue-filters button { width: 100%; }
    .outward-picking-progress-card .picking-counter,
    .outward-packing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-picking-progress-card .picking-counter > div:nth-child(2n),
    .outward-packing-metrics > div:nth-child(2n) { border-right: 0; }
    .packing-grid { grid-template-columns: 1fr; }
    .packing-scan-row { align-items: stretch; flex-wrap: wrap; }
}
@media (max-width: 520px) {
    .outward-picking-summary,
    .outward-picking-order-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-picking-summary article:nth-child(3n),
    .outward-picking-order-context article:nth-child(3n) { border-right: 1px solid var(--border); }
    .outward-picking-summary article:nth-child(2n),
    .outward-picking-order-context article:nth-child(2n) { border-right: 0; }
    .packing-start-row { flex-direction: column; }
    .packing-start-row button { width: 100%; }
}

/* Populated Packing & QC and Shipping — dense operational presentation. */
.outward-packing-workspace-summary {
    margin-bottom: .7rem;
    padding-bottom: .62rem; background: #fff;
}
.outward-packing-workspace-summary .outward-section-heading {
    min-height: 3.3rem; padding: .58rem .7rem; background: linear-gradient(110deg, #fafcff, #f7f9fd);
}
.outward-packing-workspace-summary .outward-section-heading h2 {
    display: flex; align-items: center; gap: .45rem; font-size: .82rem;
}
.outward-packing-back,
.outward-packing-box-actions button {
    display: inline-flex; align-items: center; justify-content: center; gap: .34rem;
    min-height: 2.1rem; padding: .34rem .58rem; white-space: nowrap;
}
.outward-packing-back .nav-icon,
.outward-packing-box-actions .nav-icon { width: .72rem; height: .72rem; }
.outward-packing-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.outward-packing-workspace-summary .outward-packing-metrics {
    gap: .4rem; margin: .55rem .65rem .42rem; border-top: 0;
}
.outward-packing-metrics > div {
    position: relative; gap: .06rem; min-height: 3.15rem; padding: .62rem .68rem .5rem;
    overflow: hidden; background: #f7f9fd; border: 1px solid #e0e7f1; border-radius: .58rem;
}
.outward-packing-metrics > div::before {
    position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: #6684df;
}
.outward-packing-metrics > div:nth-child(2)::before,
.outward-packing-metrics > div:nth-child(3)::before { background: #10a087; }
.outward-packing-metrics > div:nth-child(4)::before { background: #d49a31; }
.outward-packing-metrics > div:nth-child(5)::before,
.outward-packing-metrics > div:nth-child(6)::before { background: #8059bd; }
.outward-packing-metrics > div:nth-child(2),
.outward-packing-metrics > div:nth-child(3) { background: #f2fbf8; border-color: #d4eee7; }
.outward-packing-metrics > div:nth-child(4) { background: #fff9ee; border-color: #f1dfba; }
.outward-packing-metrics > div:nth-child(5),
.outward-packing-metrics > div:nth-child(6) { background: #faf6ff; border-color: #e7dcf5; }
.outward-packing-metrics span { color: #748298; font-size: .55rem; font-weight: 800; letter-spacing: .065em; }
.outward-packing-metrics strong { color: #213149; font-size: .92rem; line-height: 1.15; }
.outward-packing-workspace-summary progress {
    display: block; width: calc(100% - 1.3rem); height: .28rem; margin: 0 .65rem;
    overflow: hidden; appearance: none; -webkit-appearance: none; border: 0; border-radius: 99px;
    background: #e8edf5;
}
.outward-packing-workspace-summary progress::-webkit-progress-bar { background: #e8edf5; border-radius: 99px; }
.outward-packing-workspace-summary progress::-webkit-progress-value { background: linear-gradient(90deg, #315fdb, #18a088); border-radius: 99px; }
.outward-packing-workspace-summary progress::-moz-progress-bar { background: linear-gradient(90deg, #315fdb, #18a088); border-radius: 99px; }
.outward-packing-box-selector {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch;
    min-height: 3.75rem; margin-bottom: .7rem;
}
.outward-packing-box-selector .outward-section-heading {
    min-width: 12.5rem; padding: .5rem .72rem; background: linear-gradient(110deg, #fafcff, #f7f9fd);
    border-right: 1px solid #e1e8f1; border-bottom: 0;
}
.outward-packing-box-selector .outward-section-heading > small { display: none; }
.outward-packing-box-selector .packing-box-tabs { align-content: center; padding: .46rem .62rem; border-top: 0; }
.outward-packing-active-box > .outward-section-heading {
    min-height: 3.25rem; padding: .55rem .72rem; background: linear-gradient(110deg, #fafcff, #fff);
}
.outward-section-heading > .outward-packing-box-actions {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: .35rem;
}
.outward-packing-box-actions button:last-child { color: #7550b4; background: #f8f3ff; border-color: #e3d7f3; }
.outward-packing-active-box > .outward-table-wrap { max-height: min(23rem, 42vh); }
.outward-packing-active-box .outward-order-lines-table { min-width: 58rem; table-layout: auto; }
.outward-packing-active-box .outward-order-lines-table th:nth-child(1) { width: 11rem; }
.outward-packing-active-box .outward-order-lines-table th:nth-child(2) { width: 24%; }
.outward-packing-active-box .outward-order-lines-table th:nth-child(3) { width: 38%; }
.outward-packing-active-box .outward-order-lines-table th:nth-child(4) { width: 5rem; }
.outward-packing-active-box .outward-order-lines-table th:nth-child(n+5) { width: 5.25rem; text-align: center; }
.outward-packing-active-box .outward-order-lines-table td:nth-child(n+5) { text-align: center; }
.outward-packing-active-box .outward-order-lines-table tbody tr:nth-child(even) { background: #fbfcfe; }
.outward-packing-active-box .outward-order-lines-table tbody tr:hover { background: #f4f8ff; }
.packing-sku-cell { display: grid; gap: .16rem; }
.packing-sku-cell > small { overflow: hidden; color: #75839a; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.packing-tracking-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; min-width: 13rem; }
.packing-tracking-tags > span {
    display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .4rem;
    color: #526078; background: #f3f5f8; border: 1px solid #dfe5ed; border-radius: .4rem;
    font-size: .59rem; font-weight: 700; white-space: nowrap;
}
.packing-tracking-tags > span > small {
    color: #8793a5; font-size: .48rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.packing-tracking-tags > .is-batch { color: #986100; background: #fff7e8; border-color: #efd49d; }
.packing-tracking-tags > .is-expiry { color: #a14961; background: #fff0f4; border-color: #f0ced9; }
.packing-tracking-tags > .is-empty { color: #7b8798; font-weight: 650; }
.outward-batch-tag {
    display: inline-flex; padding: .18rem .42rem; color: #986100; background: #fff7e8;
    border: 1px solid #efd49d; border-radius: .4rem; font-size: .65rem; font-weight: 740; white-space: nowrap;
}

/* Packing execution — guided verification, measurement and mandatory QC gate. */
.packing-workflow-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem;
    padding: .62rem .7rem; background: #f7f9fd; border-top: 1px solid #e1e8f1;
}
.packing-workflow-strip > div {
    position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0;
    padding: .48rem .55rem; background: #fff; border: 1px solid #dfe6ef; border-radius: .58rem;
}
.packing-workflow-strip > div:not(:last-child)::after {
    position: absolute; top: 50%; right: -.47rem; z-index: 1; width: .47rem; height: 1px;
    content: ""; background: #cbd5e2;
}
.packing-workflow-strip > div > span {
    display: grid; flex: 0 0 auto; place-items: center; width: 1.55rem; height: 1.55rem;
    color: #6f7e94; background: #f3f6fa; border: 1px solid #d7e0eb; border-radius: 50%;
    font-size: .62rem; font-weight: 800;
}
.packing-workflow-strip p { display: grid; gap: .04rem; min-width: 0; margin: 0; }
.packing-workflow-strip strong { color: #3a4960; font-size: .68rem; }
.packing-workflow-strip small { overflow: hidden; color: #8290a4; font-size: .57rem; text-overflow: ellipsis; white-space: nowrap; }
.packing-workflow-strip > .is-current { background: #f4f7ff; border-color: #bfcffa; box-shadow: inset 3px 0 #3763dd; }
.packing-workflow-strip > .is-current > span { color: #fff; background: #3763dd; border-color: #3763dd; }
.packing-workflow-strip > .is-complete { background: #f1faf7; border-color: #c8e9df; }
.packing-workflow-strip > .is-complete > span { color: #fff; background: #12967f; border-color: #12967f; }

.packing-operation-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .52rem; }
.packing-operation-heading > div { display: grid; gap: .04rem; }
.packing-operation-heading > div > span,
.packing-qc-header > div:first-child > span {
    color: #3561d7; font-size: .55rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase;
}
.packing-operation-heading h3,
.packing-qc-header h3 { margin: 0; color: #263650; font-size: .8rem; }
.packing-operation-heading small,
.packing-qc-header small { color: #77869b; font-size: .62rem; }
.packing-operation-heading > strong {
    padding: .24rem .5rem; color: #9a6509; background: #fff7e8; border: 1px solid #efd59f;
    border-radius: 99px; font-size: .62rem; white-space: nowrap;
}
.packing-measure-card { position: relative; overflow: hidden; border-top: 3px solid #d89c2e; }
.packing-measure-card:nth-child(2) { border-top-color: #8059bd; }
.packing-measure-card.is-complete { background: linear-gradient(110deg, #f4fbf9, #fff 45%); border-color: #bfe4d9; border-top-color: #15967f; }
.packing-measure-card .packing-operation-heading b {
    display: inline-flex; align-items: center; gap: .25rem; color: #087a68; font-size: .61rem;
}
.packing-measure-card .packing-operation-heading b .nav-icon { width: .68rem; height: .68rem; }
.packing-measure-card .captured {
    margin: 0 0 .45rem; padding: .38rem .52rem; color: #087a68; background: #ecf8f4;
    border: 1px solid #c8e8df; border-radius: .48rem; font-size: .67rem; font-weight: 750;
}

.outward-packing-active-box > .packing-qc-card { margin-top: .15rem; padding: 0; overflow: hidden; border-top: 3px solid #8059bd; }
.packing-qc-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .72rem .82rem;
    background: linear-gradient(110deg, #faf7ff, #fff 58%); border-bottom: 1px solid #e5dff0;
}
.packing-qc-header > div:first-child { display: grid; gap: .06rem; }
.packing-qc-header > div:first-child > span { color: #7750b4; }
.packing-qc-completion { display: grid; justify-items: end; gap: .02rem; }
.packing-qc-completion strong { color: #6842a5; font-size: 1rem; }
.packing-qc-completion span { color: #8490a2; font-size: .55rem; font-weight: 750; text-transform: uppercase; }
.packing-qc-progress { height: .22rem; overflow: hidden; background: #ece7f4; }
.packing-qc-progress i { display: block; height: 100%; background: linear-gradient(90deg, #8059bd, #2ba58e); transition: width .2s ease; }
.packing-qc-groups { display: grid; grid-template-columns: 1.4fr .8fr .95fr; align-items: start; gap: .6rem; padding: .7rem .8rem; }
.packing-qc-groups > section { min-width: 0; overflow: hidden; border: 1px solid #e0e6ef; border-radius: .58rem; }
.packing-qc-groups > section > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .42rem .55rem; background: #f6f8fb; border-bottom: 1px solid #e2e7ee; }
.packing-qc-groups > section > header strong { color: #42516a; font-size: .65rem; }
.packing-qc-groups > section > header span { color: #748196; font-size: .58rem; font-weight: 800; }
.packing-qc-card .qc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.packing-qc-groups > section:not(:first-child) .qc-checklist { grid-template-columns: 1fr; }
.packing-qc-card .qc-checklist li { min-width: 0; border-right: 1px solid #edf0f4; border-bottom: 1px solid #edf0f4; }
.packing-qc-card .qc-checklist li:nth-child(2n) { border-right: 0; }
.packing-qc-card .qc-checklist li:nth-last-child(-n + 2) { border-bottom: 0; }
.packing-qc-groups > section:not(:first-child) .qc-checklist li { border-right: 0; }
.packing-qc-groups > section:not(:first-child) .qc-checklist li:last-child { border-bottom: 0; }
.packing-qc-card .qc-checklist li label {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .08rem .42rem;
    min-height: 2.65rem; padding: .38rem .5rem; background: #fff; border: 0; border-radius: 0; cursor: pointer;
}
.packing-qc-card .qc-checklist li label:hover { background: #f7f9ff; }
.packing-qc-card .qc-checklist input { grid-row: 1 / span 2; width: 1rem; height: 1rem; margin: 0; accent-color: #315fdb; }
.packing-qc-card .qc-checklist label > span { overflow: hidden; color: #45546b; font-size: .63rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.packing-qc-card .qc-checklist label > b { color: #a5505f; font-size: .48rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.packing-qc-card .qc-checklist li.is-checked label { background: #f0faf7; }
.packing-qc-card .qc-checklist li.is-checked label > span { color: #087866; }
.packing-qc-card .qc-checklist li.is-checked label > b { color: #278674; }
.packing-qc-submit-row { display: grid; grid-template-columns: 12rem minmax(15rem, 1fr) auto; align-items: stretch; gap: .48rem; padding: .6rem .8rem; background: #f8f9fc; border-top: 1px solid #e1e6ee; }
.packing-qc-submit-row > * { min-width: 0; margin: 0; }
.packing-qc-submit-row button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; }
.packing-qc-submit-row button .nav-icon { width: .72rem; height: .72rem; }
.packing-qc-required-note { margin: 0; padding: 0 .8rem .62rem; color: #a0600c; background: #f8f9fc; font-size: .61rem; }
.outward-packing-active-box > .packing-exception-card { margin-top: 0; background: #fbfcfe; }
.packing-seal-row { position: sticky; bottom: 0; z-index: 2; background: rgb(255 255 255 / 96%); box-shadow: 0 -5px 14px rgb(31 48 74 / 7%); backdrop-filter: blur(8px); }

@media (max-width: 1100px) {
    .packing-qc-groups { grid-template-columns: 1fr 1fr; }
    .packing-qc-groups > section:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .packing-workflow-strip { display: flex; overflow-x: auto; }
    .packing-workflow-strip > div { flex: 0 0 10.5rem; }
    .packing-qc-groups { grid-template-columns: 1fr; }
    .packing-qc-groups > section:first-child { grid-column: auto; }
    .packing-qc-submit-row { grid-template-columns: 1fr; }
    .packing-qc-submit-row button { width: 100%; }
}
@media (max-width: 520px) {
    .packing-qc-card .qc-checklist { grid-template-columns: 1fr; }
    .packing-qc-card .qc-checklist li { border-right: 0; }
    .packing-qc-card .qc-checklist li:nth-last-child(2) { border-bottom: 1px solid #edf0f4; }
    .packing-operation-heading,
    .packing-qc-header { align-items: flex-start; flex-direction: column; }
    .packing-qc-completion { justify-items: start; }
}

.shipping-queue-card { margin-top: .75rem; }
.shipping-queue-tabs {
    display: flex; align-items: center; gap: .38rem; padding: .58rem .65rem;
    background: linear-gradient(110deg, #fafcff, #f6f9ff); border-bottom: 1px solid #dfe7f1;
}
.shipping-queue-tabs button {
    display: inline-flex; align-items: center; justify-content: center; gap: .38rem;
    min-height: 2.15rem; padding: .36rem .65rem; border-radius: 99px; box-shadow: none;
}
.shipping-queue-tabs button .nav-icon { width: .72rem; height: .72rem; }
.shipping-queue-tabs button > span {
    display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .22rem;
    color: #617089; background: #edf1f6; border-radius: 99px; font-size: .52rem; font-weight: 800;
}
.shipping-queue-tabs button.primary > span { color: #3159d9; background: #fff; }
.shipping-queue-filters {
    display: grid; grid-template-columns: minmax(13rem, .38fr) minmax(22rem, 1fr) auto;
    align-items: stretch; gap: .5rem; padding: .62rem .65rem; background: #fff;
    border-bottom: 1px solid #dfe6ef;
}
.shipping-queue-filters > * { min-width: 0; margin: 0; }
.shipping-queue-filters button,
.shipping-selection-actions button {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap;
}
.shipping-queue-filters button .nav-icon,
.shipping-selection-actions button .nav-icon { width: .72rem; height: .72rem; }
.shipping-selection-actions { display: flex; justify-content: flex-end; padding: .52rem .65rem; background: #f8faff; border-bottom: 1px solid #dfe6ef; }
.shipping-queue-card > .outward-table-wrap { max-height: min(31rem, calc(100vh - 18rem)); margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.shipping-loads-table thead th,
.shipping-ready-table thead th,
.shipping-orders-table thead th,
.shipping-boxes-table thead th { background: linear-gradient(180deg, #f4f7fb, #eef3f8); border-bottom-color: #dce5f0; }
.shipping-loads-table tbody tr,
.shipping-ready-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.shipping-loads-table tbody tr:nth-child(even),
.shipping-ready-table tbody tr:nth-child(even) { background: #fbfcfe; }
.shipping-loads-table tbody tr:hover,
.shipping-ready-table tbody tr:hover { background: #f3f7ff; box-shadow: inset 3px 0 0 #6584df; }
.shipping-loads-table td.muted,
.shipping-ready-table td.muted {
    height: 7rem; color: #77869b; text-align: center; vertical-align: middle;
    background: linear-gradient(110deg, #fbfcfe, #f7faff);
}
.shipping-warehouse-tag {
    display: inline-flex; padding: .18rem .42rem; color: #087a68; background: #eaf8f4;
    border: 1px solid #c7e9df; border-radius: .4rem; font-size: .64rem; font-weight: 750; white-space: nowrap;
}
.shipping-workspace-card > .outward-section-heading { background: linear-gradient(110deg, #fafcff, #f7f9fd); }
.shipping-workspace-card > .outward-section-heading > .header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .35rem; }
.shipping-details-grid { align-items: start; padding: .7rem; border-bottom: 1px solid #e1e8f1; }

/* Cycle counts: shared operational-table language with count-specific meaning. */
.cycle-count-table-wrap {
    max-height: min(31rem, calc(100vh - 18rem));
    border-color: #d7e1ed;
}
.cycle-count-table { min-width: 70rem; table-layout: auto; }
.cycle-count-table thead th {
    padding-block: .62rem;
    background: linear-gradient(180deg, #f4f7fb, #eef3f8);
    border-bottom-color: #dce5f0;
}
.cycle-count-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.cycle-count-table tbody tr:nth-child(even) { background: #fbfcfe; }
.cycle-count-table tbody tr:hover { background: #f3f7ff; box-shadow: inset 3px 0 0 #6584df; }
.cycle-count-table td { vertical-align: middle; }
.cycle-count-table th:nth-child(n+4):nth-child(-n+7),
.cycle-count-table td:nth-child(n+4):nth-child(-n+7) { text-align: center; }
.cycle-count-table th:last-child,
.cycle-count-table td:last-child { width: 5.8rem; }
.cycle-count-empty-value { color: #9aa5b4; }
.cycle-count-quantity-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.65rem; padding: .17rem .42rem; border: 1px solid; border-radius: 99px;
    font-size: .65rem; font-weight: 760; line-height: 1.2; white-space: nowrap;
}
.cycle-count-quantity-tag.is-balanced {
    color: #087a68; background: #eaf8f4; border-color: #c7e9df;
}
.cycle-count-quantity-tag.has-variance {
    color: #a16008; background: #fff7e7; border-color: #f0d293;
}
.cycle-count-quantity-tag.is-clear {
    color: #66758b; background: #f1f4f8; border-color: #dbe3ec;
}
.cycle-count-quantity-tag.has-damage {
    color: #b83b51; background: #fff0f3; border-color: #f1cbd4;
}
.cycle-count-date { color: #526178; font-size: .69rem; font-weight: 620; white-space: nowrap; }
.cycle-count-row-actions { text-align: center; }
.cycle-count-row-actions .row-icon-button { margin-inline: .12rem; }
.cycle-count-row-actions .row-icon-button.activate {
    color: #087a68; background: #eef9f6; border-color: #c8e8df;
}
.cycle-count-row-actions .row-icon-button.deactivate {
    color: #b83b51; background: #fff2f4; border-color: #efcbd3;
}

/* Outward order audit trail: available on demand without extending the page. */
.outward-audit-button { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.outward-audit-button > span {
    display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
    color: #7550b4; background: #f0e9fa; border-radius: 99px; font-size: .52rem; font-weight: 800;
}
.modal.outward-audit-modal {
    align-self: center; width: clamp(62rem, 76vw, 82rem); height: min(50rem, calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem); padding: 0; overflow: hidden;
    border: 1px solid #d8e1ed; border-right: 0; border-radius: 1rem 0 0 1rem;
}
.outward-audit-modal-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .72rem;
    flex: 0 0 auto; padding: .85rem 1rem; background: linear-gradient(120deg, #fbfcff, #f6f2fd);
    border-bottom: 1px solid #dedfec;
}
.outward-audit-modal-icon {
    display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem;
    color: #7550b4; background: #f5effd; border: 1px solid #e3d7f3; border-radius: .65rem;
}
.outward-audit-modal-icon .nav-icon { width: .95rem; height: .95rem; }
.outward-audit-modal-header > div:nth-child(2) { min-width: 0; }
.outward-audit-modal-header > div:nth-child(2) > span {
    display: block; margin-bottom: .1rem; color: #7550b4; font-size: .55rem;
    font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.outward-audit-modal-header h2 {
    position: static; margin: 0; padding: 0; color: #1d2c43; background: transparent;
    border: 0; font-size: 1rem; line-height: 1.25; backdrop-filter: none;
}
.outward-audit-modal-header p { margin: .13rem 0 0; color: #748298; font-size: .64rem; }
.outward-audit-modal-actions { display: flex; align-items: center; gap: .35rem; }
.outward-audit-modal-actions .icon-button { width: 2.1rem; min-width: 2.1rem; height: 2.1rem; padding: 0; }
.outward-audit-modal-actions .nav-icon { width: .78rem; height: .78rem; }
.outward-audit-summary {
    display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .48rem 1rem;
    background: #fff; border-bottom: 1px solid #e2e8f1;
}
.outward-audit-summary > span {
    display: inline-flex; align-items: center; gap: .28rem; padding: .22rem .48rem;
    color: #65738a; background: #f4f1f9; border: 1px solid #e3dcef; border-radius: 99px;
    font-size: .59rem; font-weight: 650;
}
.outward-audit-summary strong { color: #7550b4; font-size: .67rem; }
.outward-audit-modal-content {
    display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .7rem;
    flex: 1 1 auto; min-height: 0; padding: .75rem; overflow: hidden; background: #f5f7fb;
}
.outward-audit-panel {
    display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden;
    background: #fff; border: 1px solid #dbe3ed; border-radius: .72rem;
}
.outward-audit-panel > header {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .55rem .7rem; background: linear-gradient(110deg, #fafcff, #f7f9fd);
    border-bottom: 1px solid #e0e7f0;
}
.outward-audit-panel > header div { display: grid; gap: .08rem; }
.outward-audit-panel > header span { color: #7c899b; font-size: .52rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.outward-audit-panel h3 { margin: 0; color: #26364e; font-size: .74rem; }
.outward-audit-panel > header small {
    flex: none; padding: .17rem .4rem; color: #66758b; background: #edf1f6;
    border-radius: 99px; font-size: .54rem; font-weight: 750;
}
.outward-audit-table-wrap { min-height: 0; max-height: none; overflow: auto; }
.outward-audit-table { min-width: 58rem; table-layout: auto; }
.outward-audit-table thead th {
    top: 0; padding: .5rem .62rem; background: linear-gradient(180deg, #f4f7fb, #eef3f8);
    border-bottom-color: #dde5ef; font-size: .55rem;
}
.outward-audit-table td { padding: .5rem .62rem; vertical-align: middle; font-size: .67rem; }
.outward-audit-table tbody tr:nth-child(even) { background: #fbfcfe; }
.outward-audit-table tbody tr:hover { background: #f3f7ff; }
.outward-audit-from,
.outward-audit-entity,
.outward-audit-action {
    display: inline-flex; padding: .17rem .4rem; border: 1px solid; border-radius: .38rem;
    font-size: .61rem; font-weight: 720; white-space: nowrap;
}
.outward-audit-from { color: #56657a; background: #f2f4f7; border-color: #dde3ea; }
.outward-audit-entity { color: #3159c9; background: #f1f5ff; border-color: #d4def7; }
.outward-audit-action { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.outward-audit-time { color: #526178; white-space: nowrap; }
.outward-audit-empty {
    display: flex; align-items: center; justify-content: center; gap: .58rem; min-height: 7rem; padding: 1rem;
    color: #8a96a8;
}
.outward-audit-empty > .nav-icon { width: 1rem; height: 1rem; color: #8765ba; }
.outward-audit-empty > span { display: grid; gap: .1rem; }
.outward-audit-empty strong { color: #56657a; font-size: .68rem; }
.outward-audit-empty small { font-size: .58rem; }

/* Courier serviceability and AWB supply workspace. */
.modal.courier-supply-modal {
    align-self: center; width: clamp(64rem, 82vw, 88rem); height: min(47rem, calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem); padding: 0; overflow: hidden;
    border: 1px solid #d8e1ed; border-right: 0; border-radius: 1rem 0 0 1rem;
}
.courier-supply-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem;
    flex: 0 0 auto; padding: .85rem 1rem; background: linear-gradient(120deg, #fbfcff, #f3f7ff);
    border-bottom: 1px solid #dce4ef;
}
.courier-supply-header .courier-supply-icon,
.courier-panel-icon {
    display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem;
    color: #315ed4; background: #edf3ff; border: 1px solid #d2defb; border-radius: .65rem;
}
.courier-supply-header .courier-supply-icon .nav-icon,
.courier-panel-icon .nav-icon { width: .95rem; height: .95rem; }
.courier-supply-header > div { min-width: 0; }
.courier-supply-eyebrow {
    display: block; margin-bottom: .12rem; color: #718096; font-size: .55rem;
    font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.courier-supply-header h2 {
    position: static; margin: 0; padding: 0; color: #1d2c43; background: transparent;
    border: 0; font-size: 1rem; line-height: 1.25; backdrop-filter: none;
}
.courier-supply-header p { margin: .14rem 0 0; color: #748298; font-size: .65rem; }
.courier-supply-close { width: 2.1rem; min-width: 2.1rem; height: 2.1rem; padding: 0; }
.courier-supply-close .nav-icon { width: .78rem; height: .78rem; }
.courier-supply-summary {
    display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .48rem 1rem;
    background: #fff; border-bottom: 1px solid #e2e8f1;
}
.courier-supply-summary > span {
    display: inline-flex; align-items: center; gap: .28rem; padding: .22rem .48rem;
    color: #65738a; background: #f4f6f9; border: 1px solid #e0e6ee; border-radius: 99px;
    font-size: .59rem; font-weight: 650;
}
.courier-supply-summary strong { color: #2d4fba; font-size: .67rem; }
.courier-supply-grid {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .75rem;
    flex: 1 1 auto; min-height: 0; padding: .8rem; overflow: hidden; background: #f5f7fb;
}
.courier-supply-panel {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0;
    overflow: hidden; background: #fff; border: 1px solid #dbe3ed; border-radius: .75rem;
    box-shadow: 0 8px 24px -22px rgb(27 43 67 / .6);
}
.courier-supply-panel > header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
    padding: .65rem .7rem; background: linear-gradient(110deg, #fafcff, #f7f9fd);
    border-bottom: 1px solid #e0e7f0;
}
.courier-panel-icon { width: 2rem; height: 2rem; border-radius: .55rem; }
.courier-panel-icon.is-teal { color: #087b72; background: #eaf8f5; border-color: #c9e8e2; }
.courier-panel-icon.is-violet { color: #7550b4; background: #f5effd; border-color: #e3d7f3; }
.courier-supply-panel h3 { margin: 0; color: #24344c; font-size: .76rem; }
.courier-supply-panel header p { margin: .1rem 0 0; color: #7b889b; font-size: .58rem; }
.courier-panel-count {
    display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.35rem; padding: 0 .35rem;
    color: #5d6b80; background: #edf1f6; border-radius: 99px; font-size: .58rem; font-weight: 800;
}
.courier-supply-table-wrap {
    min-height: 0; max-height: none; margin: 0; overflow: auto; border: 0; border-radius: 0; box-shadow: none;
}
.courier-supply-table { min-width: 100%; table-layout: auto; }
.courier-supply-table thead th {
    top: 0; padding: .52rem .65rem; background: linear-gradient(180deg, #f4f7fb, #eef3f8);
    border-bottom-color: #dde5ef; font-size: .56rem;
}
.courier-supply-table td { padding: .52rem .65rem; vertical-align: middle; }
.courier-supply-table tbody tr:nth-child(even) { background: #fbfcfe; }
.courier-supply-table tbody tr:hover { background: #f3f7ff; }
.courier-pincode-tag,
.courier-awb-tag {
    display: inline-flex; padding: .18rem .42rem; border: 1px solid; border-radius: .4rem;
    font-size: .65rem; font-weight: 750; white-space: nowrap;
}
.courier-pincode-tag { color: #087b72; background: #effaf8; border-color: #c9e8e2; }
.courier-awb-tag { color: #3159c9; background: #f1f5ff; border-color: #d4def7; }
.courier-eligibility-tag {
    display: inline-flex; align-items: center; gap: .28rem; padding: .17rem .42rem;
    border: 1px solid; border-radius: 99px; font-size: .59rem; font-weight: 750;
}
.courier-eligibility-tag::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: currentColor; }
.courier-eligibility-tag.is-eligible { color: #087a68; background: #eaf8f4; border-color: #c7e9df; }
.courier-eligibility-tag.is-unavailable { color: #7a8799; background: #f2f4f7; border-color: #dde3ea; }
.courier-box-reference { color: #526178; font-size: .66rem; font-weight: 650; white-space: nowrap; }
.courier-supply-form {
    display: grid; align-content: start; gap: .55rem; min-height: 9.5rem; padding: .72rem .78rem;
    background: #fbfcfe; border-top: 1px solid #e1e7ef;
}
.courier-supply-form label { gap: .28rem; margin: 0; font-size: .63rem; font-weight: 750; }
.courier-supply-form label > span { color: #8a96a8; font-size: .54rem; font-weight: 600; }
.courier-supply-form input:not([type="checkbox"]):not([type="radio"]),
.courier-supply-form textarea { margin-top: 0; min-height: 2.25rem; font-size: .68rem; }
.courier-supply-form textarea { min-height: 4.25rem; resize: vertical; }
.courier-supply-form-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 0; }
.courier-supply-form-actions.is-end { justify-content: flex-end; }
.courier-supply-form-actions label.checkbox-row {
    width: fit-content; min-height: 2.1rem; margin: 0; padding: .38rem .58rem;
}
.courier-supply-form-actions label.checkbox-row input[type="checkbox"] {
    width: 1.15rem !important; min-width: 1.15rem; height: 1.15rem; min-height: 1.15rem;
    margin: 0; padding: 0;
}
.courier-supply-form-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.1rem; }
.courier-supply-form-actions button .nav-icon { width: .72rem; height: .72rem; }
.courier-supply-empty {
    display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 8rem; padding: 1rem;
    color: #8390a2; text-align: left;
}
.courier-supply-empty > .nav-icon { width: 1.1rem; height: 1.1rem; color: #91a0b4; }
.courier-supply-empty > span { display: grid; gap: .12rem; }
.courier-supply-empty strong { color: #56657c; font-size: .7rem; }
.courier-supply-empty small { max-width: 16rem; font-size: .59rem; line-height: 1.4; }

/* Create outward order — guided, compact form workspace. Presentation only; form bindings and workflow stay unchanged. */
.outward-create-card {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.outward-create-rail {
    position: sticky;
    top: .8rem;
    display: grid;
    gap: .65rem;
    min-width: 0;
}
.outward-create-rail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .15rem;
}
.outward-create-rail-heading > span { color: #53627a; font-size: .7rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.outward-create-rail-heading > strong { color: #3159d9; font-size: .67rem; font-weight: 750; }
.outward-create-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: .18rem;
    padding: .4rem;
    background: #fff;
    border: 1px solid #dce4ef;
    border-radius: .75rem;
    box-shadow: 0 10px 26px -24px rgb(29 47 75 / .7);
}
.outward-create-steps button {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: center;
    gap: .48rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: .45rem .5rem;
    color: #66758b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: .65rem;
    box-shadow: none;
    text-align: left;
}
.outward-create-steps button:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(50% + .85rem);
    left: 1.34rem;
    z-index: 0;
    width: 1px;
    height: .55rem;
    background: #d4ddea;
}
.outward-create-step-number {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    color: #77859a;
    background: #fff;
    border: 1px solid #d8e0eb;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 800;
}
.outward-create-steps button > span:last-child { display: grid; min-width: 0; gap: .03rem; }
.outward-create-steps strong { overflow: hidden; font-size: .78rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.outward-create-steps small { overflow: hidden; color: #7d899b; font-size: .67rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.outward-create-steps button:hover:not(:disabled) { color: #3159d9; background: #eef3ff; }
.outward-create-steps button.is-active {
    color: #294fc7;
    background: linear-gradient(100deg, #eef3ff, #f8faff);
    border-color: #cdd9f8;
    box-shadow: inset 3px 0 0 #3159d9;
}
.outward-create-steps button.is-active .outward-create-step-number {
    color: #fff;
    background: #3159d9;
    border-color: #3159d9;
}
.outward-create-steps button.is-complete .outward-create-step-number {
    color: #087b72;
    background: #eaf8f5;
    border-color: #bee5dd;
}
.outward-create-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    min-width: 0;
    margin-top: .75rem;
}
.outward-create-workspace {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: .78rem;
    box-shadow: 0 14px 34px -30px rgb(27 43 67 / .75);
}
.outward-create-workspace-header {
    display: grid;
    gap: .1rem;
    padding: .78rem .9rem;
    background: linear-gradient(105deg, #f8faff, #fff 55%);
    border: 0;
    border-bottom: 1px solid #e3e9f1;
    border-radius: 0;
}
.outward-create-workspace-header > span {
    color: #3159d9;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.outward-create-workspace-header h2 { margin: 0; color: #24344c; font-size: 1rem; }
.outward-create-workspace-header p { margin: 0; color: #6d7b90; font-size: .72rem; line-height: 1.45; }
.outward-create-workspace-body { padding: .55rem; background: #fff; }
.outward-create-form { display: grid; gap: .5rem; }
.outward-create-form.is-order-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.outward-create-form.is-order-layout > .outward-create-form-section:first-child { grid-column: 1 / -1; }
.outward-create-form-section {
    min-width: 0;
    padding: .62rem;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: .68rem;
    box-shadow: 0 8px 18px -22px rgb(26 43 68 / .75);
}
.outward-create-form-section:nth-child(1) { border-top: 3px solid #5e7fe5; }
.outward-create-form-section:nth-child(2) { border-top: 3px solid #d9a12c; }
.outward-create-form-section:nth-child(3) { border-top: 3px solid #8a63c7; }
.outward-create-form-section > header { margin-bottom: .5rem; padding-bottom: 0; border-bottom: 0; }
.outward-create-form-section > header h3 { margin: 0; color: #304059; font-size: .84rem; }
.outward-create-form-section > header p { margin: .1rem 0 0; color: #738095; font-size: .68rem; line-height: 1.4; }
.outward-create-field-grid { display: grid; gap: .6rem .7rem; align-items: start; }
.outward-create-field-grid.is-two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outward-create-field-grid.is-three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.outward-create-field-grid > label {
    display: grid;
    gap: .26rem;
    min-width: 0;
    margin: 0;
    color: #4b5970;
    font-size: .73rem;
    font-weight: 720;
}
.outward-create-field-grid > label.is-wide { grid-column: 1 / -1; }
.outward-create-field-grid :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .searchable-select-input) {
    width: 100%;
    min-height: 2.35rem;
    margin: 0;
    padding: .48rem .62rem;
    color: #26364f;
    background: #fff;
    border-color: #cbd6e5;
    font-size: .8rem;
    font-weight: 520;
}
.outward-create-field-grid :is(input, textarea)::placeholder { color: #98a4b5; }
.outward-create-textareas textarea { min-height: 4.5rem; resize: vertical; }
.outward-create-address-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); gap: .5rem; align-items: start; }
.outward-create-address-grid > .outward-create-form-section { padding: .62rem; }
.outward-create-address-grid > .outward-create-form-section + .outward-create-form-section { border-left: 1px solid #dfe6ef; }
.outward-create-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.outward-create-section-header-row > div { min-width: 0; }
.outward-create-toggle {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    flex: none;
    min-height: 1.9rem;
    margin: 0;
    padding: .28rem .5rem;
    color: #3159c9;
    background: #f0f4ff;
    border: 1px solid #d1dcfa;
    border-radius: .5rem;
    font-size: .7rem;
    font-weight: 750;
}
.outward-create-toggle input { margin: 0; }
.outward-create-copy-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 5rem;
    padding: .7rem;
    color: #087b72;
    background: #f0faf8;
    border: 1px solid #cae9e3;
    border-radius: .62rem;
}
.outward-create-copy-note > .nav-icon { flex: none; width: .9rem; height: .9rem; }
.outward-create-copy-note > span { display: grid; gap: .08rem; }
.outward-create-copy-note strong { color: #21685f; font-size: .76rem; }
.outward-create-copy-note small { color: #65817d; font-size: .67rem; line-height: 1.4; }
.outward-create-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.outward-create-preference-grid > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .5rem;
    min-height: 3.2rem;
    margin: 0;
    padding: .55rem .62rem;
    background: #f8faff;
    border: 1px solid #dce4f2;
    border-radius: .58rem;
}
.outward-create-preference-grid input { margin: 0; }
.outward-create-preference-grid span { display: grid; gap: .05rem; }
.outward-create-preference-grid strong { color: #3d4d65; font-size: .74rem; }
.outward-create-preference-grid small { color: #778598; font-size: .66rem; line-height: 1.35; }
.outward-create-review { display: grid; gap: .7rem; }
.outward-create-review-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .62rem .7rem;
    color: #087b72;
    background: #edf9f6;
    border: 1px solid #c9e9e1;
    border-radius: .65rem;
}
.outward-create-review-note > .nav-icon { flex: none; width: .85rem; height: .85rem; }
.outward-create-review-note p { margin: 0; color: #4e706b; font-size: .72rem; line-height: 1.45; }
.outward-create-review-list {
    display: grid;
    grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr);
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: .7rem;
}
.outward-create-review-list :is(dt, dd) { margin: 0; padding: .58rem .7rem; border-bottom: 1px solid #e6ebf2; }
.outward-create-review-list :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }
.outward-create-review-list dt { color: #718096; background: #f7f9fc; font-size: .67rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.outward-create-review-list dd { overflow-wrap: anywhere; color: #33435b; font-size: .75rem; }
.outward-create-preview {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #f5f8ff, #fbfcff);
    border: 1px solid #d9e3f5;
    border-radius: .72rem;
}
.outward-create-preview > header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem;
    background: rgb(255 255 255 / .65);
    border-right: 0;
    border-bottom: 1px solid #dfe6f2;
}
.outward-create-preview-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    color: #3159d9;
    background: #fff;
    border: 1px solid #d3def8;
    border-radius: .52rem;
}
.outward-create-preview-icon .nav-icon { width: .78rem; height: .78rem; }
.outward-create-preview header > div { display: grid; gap: .02rem; }
.outward-create-preview header span:not(.outward-create-preview-icon) { color: #718096; font-size: .61rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.outward-create-preview h3 { margin: 0; color: #293950; font-size: .82rem; }
.outward-create-preview section { display: grid; align-content: center; gap: .16rem; min-height: 3rem; padding: .52rem .65rem; border-bottom: 1px solid #e2e8f1; }
.outward-create-preview section:last-child { border-bottom: 0; }
.outward-create-preview section > strong { color: #68768b; font-size: .62rem; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.outward-create-preview section > span { overflow-wrap: anywhere; color: #405069; font-size: .73rem; line-height: 1.42; }
.outward-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 0;
    padding: .62rem .75rem;
    background: rgb(255 255 255 / .96);
    border-top: 1px solid #dfe6ef;
    backdrop-filter: blur(8px);
}
.outward-create-actions > div { display: flex; align-items: center; gap: .45rem; }
.outward-create-actions :is(button, a) { min-height: 2.25rem; }
.outward-create-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.outward-create-actions button .nav-icon { width: .68rem; height: .68rem; }
.outward-create-cancel { padding: .5rem .65rem; color: #66758b; font-size: .74rem; font-weight: 700; text-decoration: none; }
.outward-create-cancel:hover { color: #b42335; }
.outward-create-secondary { color: #41516a; background: #fff; border-color: #cbd6e4; }

/* Manifest detail — compact scan-first workspace. */
.manifest-report-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.manifest-report-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-height: 2.35rem; }
.manifest-report-actions .nav-icon { width: .78rem; height: .78rem; }
.manifest-builder-card,
.manifest-reconciliation-summary,
.manifest-content-card,
.manifest-activity-card,
.manifest-lifecycle-card { margin-bottom: .75rem; }
.manifest-builder-card > .outward-section-heading,
.manifest-content-card > .outward-section-heading,
.manifest-activity-card > .outward-section-heading,
.manifest-lifecycle-card > .outward-section-heading { background: linear-gradient(110deg, #fbfcff, #f7f9fd); }
.manifest-builder-card .outward-section-heading { border-bottom: 0; padding-bottom: .35rem; }
.manifest-builder-card .outward-section-heading h2,
.manifest-content-card .outward-section-heading h2,
.manifest-activity-card .outward-section-heading h2,
.manifest-lifecycle-card .outward-section-heading h2 { font-size: .92rem; }
.manifest-builder-card .outward-section-heading small { margin-top: .08rem; font-size: .68rem; }
.manifest-scan-controls { display: grid; grid-template-columns: minmax(16rem, 1fr) auto auto; align-items: center; gap: .5rem; padding: .45rem 1rem .85rem; }
.manifest-scan-controls input { width: 100%; min-height: 2.55rem; font-size: .78rem; }
.manifest-scan-controls button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.55rem; white-space: nowrap; }
.manifest-scan-controls button .nav-icon { width: .72rem; height: .72rem; }
.manifest-add-all { color: #31557f; background: #f5f8fc; border-color: #cbd8e7; }
.manifest-reconciliation-summary { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.manifest-reconciliation-summary article { position: relative; gap: .18rem; padding: .72rem .8rem .68rem; border-top: 3px solid #7695ef; }
.manifest-reconciliation-summary article:nth-child(2) { border-top-color: #2aa990; }
.manifest-reconciliation-summary article:nth-child(3) { border-top-color: #dfa529; }
.manifest-reconciliation-summary article:nth-child(4) { border-top-color: #d85d71; }
.manifest-reconciliation-summary article:nth-child(n + 5) { border-top-color: #8b62c8; }
.manifest-reconciliation-summary span { font-size: .61rem; }
.manifest-reconciliation-summary strong { font-size: 1.05rem; }
.manifest-content-card .outward-orders-table { min-width: 52rem; }
.manifest-content-card .outward-orders-table thead th { background: linear-gradient(180deg, #f5f8fc, #eef3f8); }
.manifest-content-card .outward-orders-table code { display: inline-flex; padding: .22rem .46rem; color: #2859bf; background: #eff4ff; border: 1px solid #cfdbfa; border-radius: .45rem; font-weight: 750; }
.manifest-activity-card .outward-section-heading,
.manifest-lifecycle-card .outward-section-heading { padding: .68rem 1rem; }
.manifest-activity-card .outward-orders-table th,
.manifest-activity-card .outward-orders-table td { padding-block: .66rem; }
.manifest-empty-row td { height: 5.5rem; padding: 1rem !important; text-align: center; }
.manifest-empty-row td strong,
.manifest-empty-row td span { display: block; }
.manifest-empty-row td strong { color: #33435b; font-size: .8rem; }
.manifest-empty-row td span { margin-top: .2rem; color: #7a879a; font-size: .68rem; }
.manifest-lifecycle-body { display: flex; align-items: center; justify-content: space-between; gap: .85rem; padding: .72rem 1rem .82rem; }
.manifest-lifecycle-copy { display: grid; gap: .13rem; }
.manifest-lifecycle-copy strong { color: #33435a; font-size: .78rem; }
.manifest-lifecycle-copy span { color: #748298; font-size: .68rem; }
.manifest-lifecycle-body > .primary { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-height: 2.35rem; white-space: nowrap; }
.manifest-lifecycle-body > .primary .nav-icon { width: .72rem; height: .72rem; }
.manifest-lifecycle-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: .65rem; width: 100%; }
.manifest-lifecycle-form label { display: grid; gap: .3rem; min-width: 0; color: #53627a; font-size: .68rem; font-weight: 750; }
.manifest-lifecycle-form label:first-child { grid-column: span 3; }
.manifest-lifecycle-form input { width: 100%; min-height: 2.35rem; }
.manifest-lifecycle-form button { min-height: 2.35rem; white-space: nowrap; }

/* B2C pick-wave execution — dedicated scan-first workspace (kept separate from B2B picking). */
.b2c-wave-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; width: auto; }
.b2c-wave-heading-actions :is(button, a) { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.25rem; padding: .48rem .72rem; font-size: .72rem; font-weight: 750; line-height: 1; white-space: nowrap; }
.b2c-wave-heading-actions .nav-icon { width: .72rem; height: .72rem; }
.b2c-wave-heading-actions .b2c-wave-back { color: #42526a; background: #fff; border: 1px solid #cbd6e4; border-radius: .55rem; box-shadow: 0 2px 5px rgb(29 47 75 / 8%); text-decoration: none; }
.b2c-wave-heading-actions .b2c-wave-back:hover { color: #2856c5; border-color: #9eb5ec; background: #f7f9ff; }
.b2c-wave-summary { position: relative; grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr)); margin-bottom: .7rem; padding-bottom: .22rem; }
.b2c-wave-summary article { position: relative; padding: .72rem .9rem .68rem 1rem; }
.b2c-wave-summary article::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: #6e8ce8; }
.b2c-wave-summary article:nth-child(4)::before { background: #22a589; }
.b2c-wave-summary article:nth-child(5)::before { background: #dc9c22; }
.b2c-wave-summary strong { font-size: 1rem; }
.b2c-wave-progress { position: absolute; right: 0; bottom: 0; left: 0; height: .22rem; overflow: hidden; background: #e8edf5; }
.b2c-wave-progress i { display: block; height: 100%; background: linear-gradient(90deg, #315ddd, #2dac91); transition: width .2s ease; }
.b2c-wave-state-note { display: grid; grid-template-columns: minmax(15rem, .7fr) minmax(22rem, 1.3fr); align-items: center; gap: 1rem; margin-bottom: .7rem; padding: .8rem 1rem; border-left: 3px solid #dc9c22; background: #fffcf5; }
.b2c-wave-state-note strong { color: #2d3d55; font-size: .78rem; }
.b2c-wave-state-note p { margin: 0; color: #68768b; font-size: .7rem; line-height: 1.45; }
.b2c-wave-scan-card { margin-bottom: .7rem; }
.b2c-wave-scan-card > .outward-section-heading { padding: .65rem .85rem; background: linear-gradient(110deg, #fbfcff, #f7f9fd); }
.b2c-wave-scan-card .outward-section-heading h2 { font-size: .92rem; }
.b2c-wave-scan-card .outward-section-heading small { font-size: .67rem; }
.b2c-wave-scan-card > .outward-section-heading > .b2c-wave-view-toggle { display: inline-flex; flex: 0 0 auto; grid-template-columns: none; align-items: center; gap: .2rem; width: auto; padding: .2rem; background: #eef2f8; border: 1px solid #dce4ee; border-radius: .58rem; }
.b2c-wave-scan-card > .outward-section-heading > .b2c-wave-view-toggle button { width: auto; min-width: 5rem; min-height: 1.85rem; padding: .3rem .72rem; color: #617087; background: transparent; border-color: transparent; border-radius: .42rem; box-shadow: none; font-size: .67rem; }
.b2c-wave-view-toggle button.active { color: #fff; background: #315ddd; box-shadow: 0 2px 6px rgb(49 93 221 / 20%); }
.b2c-wave-scan-row { display: grid; grid-template-columns: minmax(16rem, 1fr) auto 11rem; align-items: end; gap: .55rem; padding: .65rem .85rem .78rem; }
.b2c-wave-scan-row > label { display: grid; gap: .28rem; min-width: 0; }
.b2c-wave-scan-row > label > span,
.b2c-wave-task-list article > div > span { color: #78869a; font-size: .61rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.b2c-wave-scan-row input { width: 100%; min-height: 2.55rem; font-size: .82rem; }
.b2c-wave-scan-row > button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.55rem; white-space: nowrap; }
.b2c-wave-scan-row > button .nav-icon { width: .72rem; height: .72rem; }
.b2c-wave-scanned-total { display: grid; align-content: center; min-height: 2.55rem; padding: .35rem .7rem; background: #f1faf7; border: 1px solid #cae9df; border-radius: .55rem; }
.b2c-wave-scanned-total span { color: #568075; font-size: .59rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.b2c-wave-scanned-total strong { color: #087b68; font-size: 1rem; }
.b2c-wave-feedback { margin: -.25rem .85rem .7rem; padding: .5rem .65rem; border-radius: .5rem; font-size: .7rem; }
.b2c-wave-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); align-items: start; gap: .7rem; }
.b2c-wave-primary-column { display: grid; gap: .7rem; min-width: 0; }
.b2c-wave-candidate-card > .outward-section-heading,
.b2c-wave-active-pick > .outward-section-heading,
.b2c-wave-worklist-card > .outward-section-heading,
.b2c-wave-order-rail > .outward-section-heading { padding: .68rem .82rem; background: linear-gradient(110deg, #fbfcff, #f7f9fd); }
.b2c-wave-candidate-list { display: grid; gap: .45rem; padding: .65rem; }
.b2c-wave-candidate-list > button { display: grid; grid-template-columns: minmax(10rem, 1fr) repeat(3, minmax(5rem, auto)) auto; align-items: center; gap: .75rem; padding: .62rem .7rem; text-align: left; background: #fff; }
.b2c-wave-candidate-list > button > span { display: grid; gap: .12rem; }
.b2c-wave-candidate-list small { color: #748299; font-size: .63rem; }
.b2c-wave-candidate-list strong { color: #2d3c53; font-size: .72rem; }
.b2c-wave-location-badge { display: inline-flex; align-items: center; padding: .28rem .55rem; color: #087b72 !important; background: #edf9f7; border: 1px solid #c3e6df; border-radius: 99px; font-size: .67rem !important; letter-spacing: 0 !important; text-transform: none !important; }
.b2c-wave-active-body { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .8rem; padding: .75rem .85rem .3rem; }
.b2c-wave-active-body .sku-image-placeholder { width: 6rem; height: 6rem; margin: 0; border-radius: .65rem; }
.b2c-wave-product-context { display: grid; align-content: start; gap: .55rem; }
.b2c-wave-product-context dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 0; }
.b2c-wave-product-context dl > div { min-width: 0; padding: .42rem .55rem; background: #f7f9fc; border: 1px solid #e2e8f0; border-radius: .45rem; }
.b2c-wave-product-context dt,
.b2c-wave-order-list dt { color: #8591a3; font-size: .57rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.b2c-wave-product-context dd,
.b2c-wave-order-list dd { margin: .1rem 0 0; overflow: hidden; color: #34445c; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.b2c-wave-active-pick .picking-counter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; overflow: hidden; border: 1px solid #dfe6ef; border-radius: .55rem; }
.b2c-wave-active-pick .picking-counter > div { min-width: 0; padding: .42rem .6rem; border-right: 1px solid #dfe6ef; }
.b2c-wave-active-pick .picking-counter > div:last-child { border-right: 0; }
.b2c-wave-active-pick .picking-counter span { font-size: .58rem; }
.b2c-wave-active-pick .picking-counter strong { font-size: .9rem; }
.b2c-wave-pick-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .45rem 0 0; padding: .6rem .85rem .75rem; border-top: 1px solid #e3e9f1; }
.b2c-wave-pick-steps .picking-scan-step { min-width: 0; padding: .5rem .6rem; background: #fafbfd; }
.b2c-wave-pick-steps .picking-scan-step-label { font-size: .68rem; }
.b2c-wave-pick-steps .picking-scan-step-label small { display: block; margin-top: .08rem; font-size: .6rem; }
.b2c-wave-pick-steps input { width: 100%; min-height: 2.3rem; }
.b2c-wave-sibling-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; padding: .58rem .85rem; background: #f7f4fd; border-top: 1px solid #e4dbf2; }
.b2c-wave-sibling-strip > strong { margin-right: .2rem; color: #665080; font-size: .66rem; }
.b2c-wave-sibling-strip > span { padding: .24rem .42rem; color: #654a87; background: #fff; border: 1px solid #ded1ef; border-radius: 99px; font-size: .61rem; }
.b2c-wave-task-list { display: grid; }
.b2c-wave-task-list article { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 1.45fr) minmax(6rem, .72fr) minmax(4rem, .4fr) minmax(4rem, .4fr) auto; align-items: center; gap: .6rem; min-width: 0; padding: .62rem .72rem; border-bottom: 1px solid #e2e8f0; transition: background .15s ease, box-shadow .15s ease; }
.b2c-wave-task-list article:last-child { border-bottom: 0; }
.b2c-wave-task-list article:nth-child(even) { background: #fbfcfe; }
.b2c-wave-task-list article.active { background: #eef5ff; box-shadow: inset 3px 0 #3565dd; }
.b2c-wave-task-list article.complete { background: #f3faf7; opacity: .78; }
.b2c-wave-task-list article > div { display: grid; gap: .1rem; min-width: 0; }
.b2c-wave-task-list article > div > strong { overflow: hidden; color: #2c3b52; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.b2c-wave-task-list article > div > small { overflow: hidden; color: #738197; font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
.b2c-wave-task-list article > button { display: grid; place-items: center; width: 2rem; min-width: 2rem; height: 2rem; padding: 0; color: #315ddd; background: #f0f4ff; border-color: #d2dcf8; }
.b2c-wave-task-list article > button .nav-icon { width: .72rem; height: .72rem; }
.b2c-wave-qty-cell strong { font-size: .8rem !important; }
.b2c-wave-qty-cell.pending strong { color: #a86c0f !important; }
.b2c-wave-task-complete { display: inline-flex; align-items: center; gap: .25rem; color: #0c866f; font-size: .65rem; font-weight: 750; }
.b2c-wave-task-complete .nav-icon { width: .68rem; height: .68rem; }
.b2c-wave-order-rail { position: sticky; top: .75rem; max-height: calc(100dvh - 1.5rem); }
.b2c-wave-order-list { max-height: calc(100dvh - 8rem); overflow-y: auto; scrollbar-width: thin; }
.b2c-wave-order-list > article { display: grid; gap: .5rem; padding: .72rem .78rem; border-bottom: 1px solid #e2e8f0; }
.b2c-wave-order-list > article:last-child { border-bottom: 0; }
.b2c-wave-order-list > article.complete { background: #f3faf7; }
.b2c-wave-order-list > article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.b2c-wave-order-list > article > div:first-child > strong { overflow: hidden; color: #263750; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.b2c-wave-order-list dl { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; }
.b2c-wave-order-list dl > div { min-width: 0; }
.b2c-wave-order-progress { height: .28rem; overflow: hidden; background: #e5ebf3; border-radius: 99px; }
.b2c-wave-order-progress i { display: block; height: 100%; background: linear-gradient(90deg, #5d7ce0, #25a98d); }
.b2c-wave-generation-bar { padding: .62rem .7rem; background: linear-gradient(100deg, #eef3ff, #f6f9ff); border-color: #cad7f7; }
.b2c-wave-generation-copy { display: flex !important; align-items: center !important; gap: .6rem !important; }
.b2c-wave-generation-copy > div { display: grid; gap: .12rem; }
.b2c-wave-generation-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: #315ddd !important; background: #fff; border: 1px solid #cbd8fa; border-radius: .55rem; }
.b2c-wave-generation-icon .nav-icon { width: .9rem; height: .9rem; }
.b2c-wave-generation-copy strong { color: #294273; font-size: .74rem; }
.b2c-wave-generation-copy span:not(.b2c-wave-generation-icon) { color: #657895; font-size: .65rem; }
.b2c-wave-generation-actions { display: flex !important; align-items: center; gap: .4rem !important; }
.b2c-wave-mode-picker { display: inline-flex !important; gap: .15rem !important; padding: .16rem; background: #dfe8fb; border-radius: 99px; }
.b2c-wave-mode-picker button { min-height: 1.8rem; padding: .25rem .65rem; color: #5e6f8a; background: transparent; border-color: transparent; border-radius: 99px; box-shadow: none; font-size: .65rem; }
.b2c-wave-mode-picker button.active { color: #fff; background: #315ddd; }
.b2c-wave-generation-actions > .primary { display: inline-flex; align-items: center; gap: .35rem; }

@media (max-width: 1150px) {
    .b2c-wave-workspace { grid-template-columns: 1fr; }
    .b2c-wave-order-rail { position: static; max-height: none; }
    .b2c-wave-order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
    .b2c-wave-order-list > article:nth-child(odd) { border-right: 1px solid #e2e8f0; }
}

@media (max-width: 1000px) {
    .outward-create-layout { grid-template-columns: 1fr; }
    .outward-create-rail { position: static; }
    .outward-create-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .outward-create-steps button:not(:last-child)::after { top: 50%; right: -.35rem; left: auto; width: .7rem; height: 1px; }
    .outward-create-preview { grid-template-columns: 12rem repeat(4, minmax(0, 1fr)); }
    .outward-create-preview > header { border-right: 1px solid #dfe6f2; border-bottom: 0; }
    .outward-create-preview section { border-right: 1px solid #e2e8f1; border-bottom: 0; }
    .outward-create-preview section:last-child { border-right: 0; }
    .outward-create-address-grid { grid-template-columns: 1fr; }
    .outward-packing-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .outward-packing-metrics > div:nth-child(3n) { border-right: 1px solid #e0e7f1; }
    .shipping-queue-filters { grid-template-columns: minmax(12rem, .45fr) minmax(15rem, 1fr) auto; }
    .modal.courier-supply-modal { width: min(94vw, 68rem); }
    .modal.outward-audit-modal { width: min(94vw, 72rem); }
    .courier-supply-grid { grid-template-columns: 1fr; overflow-y: auto; }
    .courier-supply-panel { min-height: 23rem; }
    .manifest-reconciliation-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .manifest-lifecycle-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manifest-lifecycle-form label:first-child { grid-column: span 2; }
    .b2c-wave-scan-row { grid-template-columns: minmax(14rem, 1fr) auto 9rem; }
    .b2c-wave-task-list article { grid-template-columns: minmax(7rem, .9fr) minmax(10rem, 1.3fr) minmax(5rem, .6fr) repeat(2, 3.5rem) auto; }
}
@media (max-width: 700px) {
    .outward-create-steps { display: flex; overflow-x: auto; scrollbar-width: thin; }
    .outward-create-steps button { flex: 0 0 11rem; }
    .outward-create-form.is-order-layout { grid-template-columns: 1fr; }
    .outward-create-form.is-order-layout > .outward-create-form-section:first-child { grid-column: auto; }
    .outward-create-field-grid.is-three-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-create-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-create-preview > header { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #e2e8f1; }
    .outward-create-preview section:nth-last-child(2) { border-right: 0; }
    .outward-create-preview section:nth-last-child(-n + 2) { border-top: 1px solid #e2e8f1; }
    .outward-create-actions { align-items: stretch; flex-direction: column; }
    .outward-create-actions > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-create-actions > div .primary { grid-column: 1 / -1; }
    .outward-packing-workspace-summary .outward-section-heading { align-items: flex-start; }
    .outward-packing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .outward-packing-metrics > div:nth-child(3n),
    .outward-packing-metrics > div:nth-child(2n) { border-right: 1px solid #e0e7f1; }
    .outward-packing-box-selector { grid-template-columns: 1fr; }
    .outward-packing-box-selector .outward-section-heading { border-right: 0; border-bottom: 1px solid #e1e8f1; }
    .outward-packing-box-selector .outward-section-heading > small { display: block; }
    .outward-packing-active-box > .outward-section-heading { position: static; align-items: stretch; flex-direction: column; }
    .outward-section-heading > .outward-packing-box-actions { justify-content: flex-start; flex-wrap: wrap; }
    .shipping-queue-tabs { overflow-x: auto; }
    .shipping-queue-tabs button { flex: none; }
    .shipping-queue-filters { grid-template-columns: 1fr; }
    .shipping-queue-filters button { width: 100%; }
    .shipping-details-grid { grid-template-columns: 1fr; }
    .modal.courier-supply-modal {
        width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    }
    .courier-supply-header { grid-template-columns: auto minmax(0, 1fr) auto; padding: .7rem; }
    .courier-supply-summary { padding-inline: .7rem; overflow-x: auto; }
    .courier-supply-grid { padding: .6rem; }
    .courier-supply-panel { min-height: 22rem; }
    .courier-supply-form { min-height: 0; }
    .courier-supply-form-actions { align-items: stretch; flex-direction: column; }
    .courier-supply-form-actions button { width: 100%; }
    .modal.outward-audit-modal {
        width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0;
    }
    .outward-audit-modal-header { padding: .7rem; }
    .outward-audit-summary { padding-inline: .7rem; overflow-x: auto; }
    .outward-audit-modal-content { display: block; padding: .6rem; overflow-y: auto; }
    .outward-audit-panel + .outward-audit-panel { margin-top: .6rem; }
    .outward-audit-table-wrap { max-height: 18rem; }
    .manifest-report-actions { justify-content: flex-start; }
    .manifest-scan-controls { grid-template-columns: 1fr 1fr; }
    .manifest-scan-controls input { grid-column: 1 / -1; }
    .manifest-reconciliation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .manifest-lifecycle-body { align-items: stretch; flex-direction: column; }
    .manifest-lifecycle-form { grid-template-columns: 1fr; }
    .manifest-lifecycle-form label:first-child { grid-column: auto; }
    .b2c-wave-heading-actions { justify-content: flex-start; }
    .b2c-wave-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2c-wave-summary article:first-child { grid-column: 1 / -1; }
    .b2c-wave-scan-card > .outward-section-heading { align-items: flex-start; flex-direction: column; }
    .b2c-wave-scan-row { grid-template-columns: 1fr 1fr; }
    .b2c-wave-scan-row > label { grid-column: 1 / -1; }
    .b2c-wave-product-context dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .b2c-wave-pick-steps { grid-template-columns: 1fr; }
    .b2c-wave-task-list article { grid-template-columns: 1fr 1fr auto; }
    .b2c-wave-task-list .b2c-wave-sku-cell { grid-column: 1 / -1; grid-row: 1; }
    .b2c-wave-order-cell { grid-column: 1 / -1; }
    .b2c-wave-task-list article > button,
    .b2c-wave-task-complete { grid-column: 3; grid-row: 2 / span 2; }
    .b2c-wave-order-list { grid-template-columns: 1fr; }
    .b2c-wave-order-list > article:nth-child(odd) { border-right: 0; }
    .b2c-wave-generation-bar { align-items: stretch; flex-direction: column; }
    .b2c-wave-generation-actions { flex-wrap: wrap; justify-content: flex-start !important; }
}
@media (max-width: 520px) {
    .outward-create-workspace-body { padding: .55rem; }
    .outward-create-field-grid.is-two-column,
    .outward-create-field-grid.is-three-column,
    .outward-create-preference-grid,
    .outward-create-preview { grid-template-columns: 1fr; }
    .outward-create-preview section { border-right: 0; border-bottom: 1px solid #e2e8f1; }
    .outward-create-preview section:nth-last-child(-n + 2) { border-top: 0; }
    .outward-create-preview section:last-child { border-bottom: 0; }
    .outward-create-section-header-row { align-items: stretch; flex-direction: column; }
    .outward-create-toggle { justify-content: center; }
    .manifest-scan-controls { grid-template-columns: 1fr; padding: .4rem .7rem .7rem; }
    .manifest-scan-controls input { grid-column: auto; }
    .manifest-reconciliation-summary { grid-template-columns: 1fr 1fr; }
    .b2c-wave-scan-row { grid-template-columns: 1fr; }
    .b2c-wave-scan-row > label { grid-column: auto; }
    .b2c-wave-active-body { grid-template-columns: 1fr; }
    .b2c-wave-active-body .sku-image-placeholder { width: 100%; height: 9rem; }
    .b2c-wave-candidate-list > button { grid-template-columns: 1fr 1fr; }
    .b2c-wave-candidate-list > button > span:first-child { grid-column: 1 / -1; }
    .b2c-wave-candidate-list > button > .nav-icon { display: none; }
}

/* Scanner-friendly select: the chosen item is a chip above an emptied input */
.searchable-select-stacked { flex-direction: column; align-items: stretch; gap: .3rem; }
.searchable-select-chosen { align-self: flex-start; max-width: 100%; }
.searchable-select-chosen-clear { all: unset; cursor: pointer; margin-left: .2rem; padding: 0 .25rem; line-height: 1; color: inherit; }
.searchable-select-chosen-clear:hover { color: var(--danger); }
.putaway-page .bin-pallet-picker-row { align-items: end; }

/* Dashboard numbers are links to the records they count */
.outward-dash-kpis strong a, .outward-dash-stat-row strong a, .outward-dash-health-row strong a, .report-section-heading p a, .report-section-heading small a { color: inherit; text-decoration: none; }
.outward-dash-kpis strong a:hover, .outward-dash-stat-row strong a:hover, .outward-dash-health-row strong a:hover, .report-section-heading p a:hover, .report-section-heading small a:hover { text-decoration: underline; }

/* SKU receipt: compact re-open action in the Recent scans table */
.asn-receipt-history-table td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.asn-receipt-reopen { width: 1.9rem; height: 1.9rem; min-width: 0; min-height: 0; padding: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.asn-receipt-reopen .nav-icon { width: .95rem; height: .95rem; }

/* ASN codes link to the ASN detail page */
.asn-code-link { text-decoration: none; }
.asn-code-link:hover code { text-decoration: underline; }

/* Few menu items (limited permissions): keep them packed at the top instead of stretching the grid rows */
.sidebar-nav { align-content: start; }
.packing-qc-groups > section > header .qc-bulk-actions { display: inline-flex; gap: .3rem; margin-left: auto; }
.qc-bulk-button { border: 1px solid #cdd6e3; background: #fff; color: #3454d1; border-radius: 6px; padding: .12rem .5rem; font-size: .6rem; font-weight: 700; cursor: pointer; }
.qc-bulk-button:disabled { color: #9aa6b8; cursor: default; }

.override-batches { border: 1px solid #dfe5ee; border-radius: 12px; background: #fbfcfe; padding: .75rem; margin: .25rem 0 1rem; }
.override-batches > header { display: grid; gap: .1rem; margin-bottom: .6rem; }
.override-batches > header small { color: #6b7890; }
.override-batches ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.override-batches-status { padding: .6rem .75rem; color: #51607a; font-size: .9rem; }
.override-batches-status.is-empty { color: #9a5b00; background: #fff7e6; border-radius: 8px; }
.override-batch { border: 1px solid #d6deea; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.override-batch:hover:not(.is-disabled) { border-color: #9db1e8; }
.override-batch.is-selected { border-color: #3454d1; box-shadow: 0 0 0 3px rgba(52, 84, 209, .15); background: #f5f7ff; }
.override-batch.is-disabled { opacity: .6; }
.override-batch > label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .65rem .8rem; cursor: pointer; margin: 0; }
.override-batch.is-disabled > label { cursor: not-allowed; }
.override-batch-main { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; }
.override-batch-main > strong { font-size: .95rem; }
.override-batch-tag { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #1d6b43; background: #e3f6ec; border-radius: 999px; padding: .1rem .5rem; }
.override-batch-tag.is-muted { color: #51607a; background: #eceff5; }
.override-batch-fields { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .25rem .9rem; color: #33415c; font-size: .82rem; }
.override-batch-fields small { color: #8390a6; font-weight: 800; font-size: .6rem; letter-spacing: .05em; margin-right: .2rem; }
.override-batch-warning { flex-basis: 100%; color: #b3261e; }
.override-batch-qty { display: grid; justify-items: end; line-height: 1.1; }
.override-batch-qty b { font-size: 1.15rem; color: #1f2a44; }
.override-batch-qty small { color: #8390a6; font-size: .65rem; }
.override-batch-qty { min-width: 5rem; }
.pick-task-override-pending { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: #9a5b00; background: #fff4dc; border: 1px solid #f0d9a6; border-radius: 999px; padding: .2rem .6rem; text-decoration: none; }
.pick-task-override-pending svg { width: 14px; height: 14px; }
.box-reprint-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; padding: .7rem .8rem 0; }
.box-reprint-list { list-style: none; margin: 0; padding: .7rem .8rem .9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.box-reprint-list li { border: 1px solid #d6deea; border-radius: 10px; background: #fff; }
.box-reprint-list li.is-selected { border-color: #3454d1; background: #f5f7ff; box-shadow: 0 0 0 2px rgba(52, 84, 209, .12); }
.box-reprint-list label { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; cursor: pointer; margin: 0; }
.box-reprint-list code { font-weight: 800; }
.box-reprint-list small { margin-left: auto; color: #8390a6; }
.import-errors { display: grid; gap: .6rem; margin: 1rem 0; }
.import-error-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.import-error-list li small { display: block; margin-top: .15rem; color: #51607a; font-weight: 400; }
.import-errors p { margin: 0; }
.import-error-table { max-height: 22rem; overflow: auto; background: #fff; border-radius: 8px; }