:root { --sidebar-w: 240px; --sidebar-bg: #1e293b; }
body { font-family: 'Noto Sans', 'Noto Sans Thai', system-ui, sans-serif; background: #f1f5f9; }

.sidebar { background: var(--sidebar-bg) !important; color: #cbd5e1; }
.sidebar .nav-link { color: #cbd5e1; border-radius: .5rem; padding: .45rem 1rem; }
/* หัวกลุ่มเมนู (กดพับ/กาง) */
.sidebar .nav-group { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .15rem; padding: .55rem 1rem; border: 0; border-radius: .5rem;
    background: transparent; font-size: .85rem; font-weight: 600; color: #94a3b8; text-align: left; }
html[lang=en] .sidebar .nav-group { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sidebar button.nav-group:hover { background: rgba(255,255,255,.05); color: #e2e8f0; }
.sidebar .nav-group i:first-child { width: 1.4rem; font-size: .95rem; }
.sidebar .nav-group .count { margin-left: auto; padding: 0 .45rem; border-radius: 1rem; background: rgba(255,255,255,.08); font-size: .68rem; letter-spacing: 0; }
.sidebar .nav-group .chev { font-size: .7rem; transition: transform .15s; }
.sidebar .nav-group.collapsed .chev { transform: rotate(-90deg); }
.sidebar .nav-group.active { color: #93c5fd; }
.sidebar .nav-group.fav { color: #fbbf24; cursor: default; }
.sidebar .nav-section .collapse, .sidebar .nav-section .collapsing { padding-left: .35rem; }
.sidebar .nav-sub { padding: .45rem 1rem .15rem; font-size: .7rem; color: #64748b; border-top: 1px dashed rgba(255,255,255,.1); margin-top: .25rem; }
/* แถวเมนู + ปุ่มดาว (โผล่เมื่อชี้ / แสดงตลอดบนจอสัมผัสและเมื่อปักแล้ว) */
.sidebar .nav-row { display: flex; align-items: center; }
.sidebar .nav-row .nav-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-pin { flex: none; border: 0; background: transparent; color: #64748b; padding: .3rem .55rem; border-radius: .4rem; opacity: 0; }
.sidebar .nav-row:hover .nav-pin, .sidebar .nav-pin:focus-visible, .sidebar .nav-pin.on { opacity: 1; }
.sidebar .nav-pin:hover { color: #fbbf24; background: rgba(255,255,255,.06); }
.sidebar .nav-pin.on { color: #fbbf24; }
@media (hover: none) { .sidebar .nav-pin { opacity: .7; } }
/* ค้นหาเมนู */
.menu-search { position: relative; }
.menu-search .bi-search { position: absolute; left: 1rem; top: .45rem; color: #64748b; font-size: .85rem; pointer-events: none; }
.menu-search input { padding-left: 2rem; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); color: #fff; }
.menu-search input::placeholder { color: #94a3b8; }
.menu-search input:focus { background: rgba(255,255,255,.12); color: #fff; border-color: #3b82f6; box-shadow: none; }
.menu-search kbd { position: absolute; right: .9rem; top: .35rem; font-size: .7rem; background: rgba(255,255,255,.1); color: #94a3b8; }
.menu-search input:not(:placeholder-shown) + kbd, .menu-search input:focus + kbd { display: none !important; }
.sidebar .nav-empty, .sidebar .nav-hint { padding: .6rem 1rem; color: #64748b; }
.sidebar .nav-row.hit .nav-link { background: rgba(37,99,235,.35); color: #fff; }
.sidebar .nav-link i { width: 1.4rem; display: inline-block; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: #2563eb; color: #fff; }

@media (min-width: 992px) {
    main.container-fluid { max-width: 1600px; }
}
.sidebar.offcanvas { width: min(var(--sidebar-w) + 40px, 85vw); }

/* เมนูด้านบน (จอใหญ่) */
.topnav { position: sticky; top: 0; z-index: 1030; align-items: center; gap: .25rem; padding: .35rem .75rem; background: var(--sidebar-bg); color: #cbd5e1; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.topnav-brand { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; margin-right: .5rem; display: inline-flex; align-items: center; gap: .45rem; }
.topnav-brand .brand-mark { flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); border-radius: .45rem; }
.login-brand img { border-radius: .7rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 6px 16px -6px rgba(15, 23, 42, .6); }
.topnav-menu { display: flex; align-items: center; gap: .1rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.topnav-link { display: inline-flex; align-items: center; gap: .3rem; color: #cbd5e1; background: transparent; border: 0; border-radius: .5rem; padding: .4rem .65rem; white-space: nowrap; text-decoration: none; font-size: .92rem; }
.topnav-link:hover, .topnav-link[aria-expanded=true] { background: rgba(255,255,255,.08); color: #fff; }
.topnav-link.active { background: #2563eb; color: #fff; }
.topnav-link.fav { color: #fbbf24; }
.topnav-link .bi-chevron-down { font-size: .65rem; opacity: .7; }
.topnav-dd { min-width: 15rem; max-height: calc(100vh - 5rem); overflow-y: auto; }
.topnav-dd .top-item { display: flex; align-items: center; }
.topnav-dd .top-item .dropdown-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topnav-dd .dropdown-item i { width: 1.4rem; display: inline-block; }
.topnav-dd .dropdown-item.hit { background: #e0e7ff; }
.top-pin { border: 0; background: transparent; color: #94a3b8; padding: .25rem .6rem; border-radius: .4rem; opacity: 0; }
.top-item:hover .top-pin, .top-pin:focus-visible, .top-pin.on { opacity: 1; }
.top-pin.on, .top-pin:hover { color: #f59e0b; }
.topnav-search { position: relative; width: 14rem; flex: none; }
.topnav-search > .bi-search { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .85rem; }
.topnav-search input { padding-left: 1.9rem; padding-right: 1.8rem; background: rgba(255,255,255,.08); border-color: transparent; color: #fff; }
.topnav-search input::placeholder { color: #94a3b8; }
.topnav-search input:focus { background: #fff; color: #0f172a; }
.topnav-search kbd { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); font-size: .65rem; padding: .05rem .3rem; background: rgba(255,255,255,.12); }
.topnav-search #topMenuResults { width: 22rem; right: 0; left: auto; }
.topnav-bell { margin: 0 .35rem; }
.topnav-company select { background-color: rgba(255,255,255,.08); color: #fff; border-color: transparent; max-width: 8rem; }
.topnav-company option { color: #0f172a; }
.topnav-company-name { max-width: 10rem; font-size: .85rem; }
.topnav-user { min-width: 17rem; }

.topbar {
    position: sticky; top: 0; z-index: 1020; background: var(--sidebar-bg); color: #fff;
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem; min-height: 52px;
}

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex;
    background: #fff; border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 8px rgba(0,0,0,.04);
}
.bottom-nav a { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; padding: .45rem 0 .35rem; font-size: .72rem; color: #64748b; text-decoration: none; }
.bottom-nav a i { display: block; font-size: 1.35rem; line-height: 1.2; }
.bottom-nav a.active { color: #2563eb; font-weight: 600; }

.card { border: 0; box-shadow: 0 1px 3px rgba(15,23,42,.08); border-radius: .75rem; }
.stat-card .icon { width: 42px; height: 42px; border-radius: .7rem; display: grid; place-items: center; font-size: 1.25rem; flex: none; }
/* dashboard quick actions: gradient buttons, icon + label + today's count */
.quick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.quick-btn { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: .9rem; color: #fff; text-decoration: none; font-weight: 600;
    box-shadow: 0 4px 14px -6px rgba(15, 23, 42, .45); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.quick-btn:hover, .quick-btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .5); filter: saturate(1.1); }
.quick-btn .q-icon { width: 38px; height: 38px; border-radius: .75rem; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255, 255, 255, .2); flex: none; }
.quick-btn .q-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.quick-btn .q-label { font-size: 1.02rem; }
.quick-btn .q-sub { font-size: .75rem; font-weight: 400; opacity: .85; }
.quick-btn .q-go { margin-left: auto; opacity: .7; }
@media (max-width: 575.98px) {
    .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .quick-btn { padding: .55rem .6rem; gap: .5rem; }
    .quick-btn .q-icon { width: 34px; height: 34px; font-size: 1.1rem; }
    .quick-btn .q-go { display: none; }
}
.q-in { background: linear-gradient(135deg, #16a34a, #0d9488); }
.q-out { background: linear-gradient(135deg, #e11d48, #f97316); }
.q-transfer { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.q-adjust { background: linear-gradient(135deg, #f59e0b, #ea580c); }
/* dashboard overview: 3 small stats + KPI rows (status colour on the left) */
.dash-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .75rem; }
.dash-stat { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .55rem .65rem; border-radius: .6rem; background: var(--bs-tertiary-bg); min-width: 0; transition: transform .15s ease; }
.dash-stat:hover { transform: translateY(-2px); }
.dash-stat .icon { width: 30px; height: 30px; font-size: 1rem; border-radius: .5rem; }
.stat-card .icon.g-blue { background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; }
.stat-card .icon.g-slate { background: linear-gradient(135deg, #64748b, #94a3b8); color: #fff; }
.stat-card .icon.g-green { background: linear-gradient(135deg, #10b981, #0d9488); color: #fff; }
.stat-card .icon.g-red { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
.kpi-row { border-left: 3px solid var(--bs-border-color); }
.kpi-row.kpi-good { border-left-color: var(--bs-success); }
.kpi-row.kpi-bad, .kpi-row.kpi-warn { border-left-color: var(--bs-warning); }
/* dashboard: "needs attention" card — one small heading per topic */
.att-head { display: flex; align-items: center; gap: .4rem; padding: .45rem 1rem; font-size: .85rem; font-weight: 600; background: var(--bs-tertiary-bg); border-top: 1px solid var(--bs-border-color-translucent); color: inherit; }
.card-header + .att-head { border-top: 0; }
.att-head a, a.att-head span { font-size: .8rem; }
.dash-moves .badge { flex: none; }
.table th { white-space: nowrap; font-weight: 600; color: #475569; }
#scanReader video { width: 100% !important; }

@media (max-width: 991.98px) {
    main.container-fluid { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
    .form-control, .form-select, .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; }
    input, select, textarea { font-size: 16px !important; } /* prevent iOS auto-zoom */
    .table { font-size: .9rem; }
}

/* ไอคอน Debug Toolbar ของ CI4 (เฉพาะ development) ไม่ให้บังแถบเมนูล่างบนมือถือ */
@media (max-width: 991.98px) { #debug-icon { bottom: calc(72px + env(safe-area-inset-bottom)) !important; } }

/* โครงสร้าง BOM หลายชั้น */
.bom-tree { padding-left: 1.1rem; margin: .25rem 0 0; }
.bom-tree li { margin: .2rem 0; }
.bom-tree .bom-tree { border-left: 1px dashed var(--bs-border-color); }

/* แถบขั้นตอนรับสินค้า 3 ขั้น */
.inbound-steps { display: flex; gap: .35rem; }
.inbound-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-radius: .5rem;
    background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); text-decoration: none; font-size: .85rem; }
.inbound-step:hover { color: var(--bs-body-color); }
.inbound-step .num { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--bs-body-bg); font-weight: 600; }
.inbound-step .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbound-step.active { background: var(--bs-primary); color: #fff; }
.inbound-step.active .num { color: var(--bs-primary); }
/* small motion: hover lifts a step; the current step fills left to right, its number pops, one light sweep — off with reduced motion */
.inbound-step { position: relative; overflow: hidden; isolation: isolate; transition: transform .15s ease, color .2s ease, box-shadow .2s ease; }
.inbound-step > * { position: relative; z-index: 1; }
a.inbound-step:not(.active):hover { transform: translateY(-1px); box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .08); }
a.inbound-step:not(.active):hover .num { background: var(--bs-primary); color: #fff; transition: background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: no-preference) {
    .inbound-step.active { background: var(--bs-tertiary-bg); animation: step-text .45s ease-out both; }
    .inbound-step.active::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--bs-primary); transform-origin: left center; animation: step-fill .45s cubic-bezier(.2, .7, .2, 1) both; }
    .inbound-step.active::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-100%); animation: step-shine .9s ease-in-out .45s 1 both; }
    .inbound-step.active .num { animation: step-pop .35s ease-out .3s both; }
}
@keyframes step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes step-text { from { color: var(--bs-secondary-color); } to { color: #fff; } }
@keyframes step-shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes step-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (max-width: 575.98px) { .inbound-step .bi { display: none; } .inbound-step { padding: .4rem; font-size: .8rem; } }

/* พิมพ์รายงาน: ซ่อนเมนู/ตัวกรอง ใช้เต็มหน้า */
@media print {
    .sidebar, .topbar, .bottom-nav, .no-print, .alert-dismissible { display: none !important; }
    main.container-fluid { margin-left: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .card { border: 0 !important; box-shadow: none !important; }
    .report-table { font-size: 11px; }
    @page { size: A4 landscape; margin: 10mm; }
}
.report-table th, .report-table td { white-space: nowrap; }
.report-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-card { transition: transform .1s; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
/* report hub + report page */
.report-card { border-left: 4px solid transparent; }
.report-card.rc-primary { border-left-color: var(--bs-primary); } .report-card.rc-success { border-left-color: var(--bs-success); }
.report-card.rc-warning { border-left-color: var(--bs-warning); } .report-card.rc-danger { border-left-color: var(--bs-danger); }
.report-icon, .rh-group-icon, .rp-tile-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .6rem; }
.report-icon { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; }
.rh-group-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .6rem; }
.rh-group-icon { width: 2rem; height: 2rem; font-size: 1rem; }
.rh-search { position: relative; min-width: min(100%, 280px); }
.rh-search i, .rp-table-filter i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.rh-search input { padding-left: 2.1rem; }
.rh-other { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; font-size: .9rem; }
.rh-other:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.rp-preset { padding: .15rem .65rem; border: 1px solid var(--bs-border-color); border-radius: 999px; font-size: .8rem; color: var(--bs-body-color); text-decoration: none; }
.rp-preset:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.rp-preset.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.rp-switch { max-height: 70vh; overflow-y: auto; }
.rp-tile-icon { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
.rp-table-filter { position: relative; width: min(100%, 260px); }
.rp-table-filter input { padding-left: 2rem; }
/* table keeps its header in view while scrolling */
.rp-scroll { max-height: 70vh; }
.rp-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); }
@media print { .rp-scroll { max-height: none; overflow: visible; } }

/* กระดิ่งแจ้งเตือน */
.notify-bell { position: relative; text-decoration: none; line-height: 1; }
.notify-bell .badge { position: absolute; top: -.45rem; right: -.7rem; font-size: .6rem; }
.notify-item { border-left: 4px solid transparent; }
.notify-item.sev-danger { border-left-color: var(--bs-danger); }
.notify-item.sev-warning { border-left-color: var(--bs-warning); }
.notify-item.sev-info { border-left-color: var(--bs-info); }
.notify-item.unread { background: rgba(var(--bs-primary-rgb), .05); }
.notify-item.unread .notify-title::after { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--bs-primary); margin-left: .35rem; vertical-align: middle; }

/* ช่องบังคับกรอก: * สีแดงหลังป้ายชื่อ (app.js ใส่คลาส required ให้ป้ายของช่องที่มี required) */
label.required::after { content: ' *'; color: var(--bs-danger); font-weight: 600; }

/* Auto complete รหัสสินค้า */
.sku-ac { position: absolute; left: 0; right: 0; z-index: 1050; max-height: 18rem; overflow-y: auto; margin-top: 2px; }
.sku-ac .list-group-item { text-align: left; }

/* roles page: permission cards */
.roles-list .list-group-item.active .badge { background: #fff !important; color: var(--bs-primary) !important; }
.roles-tools { top: .5rem; z-index: 5; }
.perm-row.perm-on { background: rgba(var(--bs-primary-rgb), .04); }
/* roles page: permission pills coloured by level (view grey / use blue / edit green / other orange) — outlined = off, filled = on */
.perm-pill { display: inline-flex; align-items: center; gap: .2rem; border-radius: 2rem; padding: .2rem .7rem; font-size: .8rem; cursor: pointer; user-select: none;
    border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); background: var(--bs-body-bg); transition: background .12s, color .12s, border-color .12s; }
.perm-pill:hover { border-color: var(--bs-secondary); }
.perm-pill .bi-check2 { display: none; }
.btn-check:checked + .perm-pill .bi-check2 { display: inline; }
.btn-check:focus-visible + .perm-pill { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.btn-check:checked + .pp-view { background: #64748b; border-color: #64748b; color: #fff; }
.btn-check:checked + .pp-use { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.btn-check:checked + .pp-edit { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.btn-check:checked + .pp-other { background: #f59e0b; border-color: #f59e0b; color: #1f2937; }
.perm-name { min-width: 14rem; }
.perm-progress { height: 3px; border-radius: 0; background: var(--bs-secondary-bg); }
.perm-chevron { transition: transform .15s; }
[aria-expanded="false"] > .perm-chevron { transform: rotate(-90deg); }
.role-icon { flex: none; width: 2.1rem; height: 2.1rem; border-radius: .6rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #64748b, #94a3b8); }
.role-icon.is-admin { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.roles-list .active .role-icon { box-shadow: 0 0 0 2px #fff; }
@media (min-width: 992px) { .roles-jump { position: sticky; top: 1rem; } }
/* login mode: three selectable cards */
.login-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.login-mode { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; cursor: pointer; background: var(--bs-body-bg); }
.login-mode > i { font-size: 1.4rem; color: var(--bs-secondary-color); }
.login-mode span { display: flex; flex-direction: column; line-height: 1.3; }
.login-mode small { color: var(--bs-secondary-color); }
.btn-check:checked + .login-mode { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .2); }
.btn-check:checked + .login-mode > i { color: var(--bs-primary); }
.btn-check:disabled + .login-mode { opacity: .6; cursor: default; }
.roles-savebar { position: sticky; bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 -2px 12px rgba(0, 0, 0, .08); }
@media (min-width: 992px) { .roles-savebar { bottom: .5rem; } }
@media (min-width: 992px) { .roles-list { max-height: 50vh; overflow-y: auto; } }/* เมนูด้านบน: จอไม่กว้างพอ = แสดงเฉพาะไอคอนของ หน้าหลัก/รายการโปรด/ผู้ใช้/บริษัท */
.topnav .lbl-wide { display: none; }
@media (min-width: 1700px) { .topnav .lbl-wide { display: inline; } }
.topnav-link { padding: .38rem .5rem; font-size: .9rem; }
.topnav-search { width: 9.5rem; transition: width .15s; }
.topnav-search:focus-within { width: 16rem; }

/* รูปหลักฐาน */
.att-thumb { width: 7.5rem; }
.att-thumb img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: .5rem; border: 1px solid #e2e8f0; background: #f8fafc; }
.att-thumb figcaption { font-size: .75rem; margin-top: .2rem; }

/* เมนูด้านซ้าย (ผู้ใช้เลือกในตั้งค่าการแสดงผล) */
@media (min-width: 992px) {
    body.menu-side .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w); overflow-y: auto; }
    body.menu-side main.container-fluid { width: auto; margin-left: var(--sidebar-w); margin-right: 0; max-width: 1400px; }
}

/* ตารางนัดคิวรถ: คอลัมน์ = ประตู, แนวตั้ง = เวลา */
.dock-board { overflow-x: auto; }
.dock-head, .dock-grid { display: grid; grid-template-columns: 3.5rem repeat(var(--dock-cols), minmax(8rem, 1fr)); gap: 0 .35rem; min-width: calc(3.5rem + var(--dock-cols) * 8.35rem); }
.dock-head span { font-weight: 600; text-align: center; padding-bottom: .35rem; }
.dock-grid { position: relative; height: var(--dock-h); }
.dock-hours { position: relative; border-right: 1px solid #e2e8f0; }
.dock-hours span { position: absolute; right: .35rem; font-size: .72rem; color: #64748b; transform: translateY(-.45rem); }
.dock-col { position: relative; background: repeating-linear-gradient(to bottom, #e2e8f0 0 1px, transparent 1px 56px), #f8fafc; border-radius: .35rem; }
.dock-slot { position: absolute; left: 3px; right: 3px; border-radius: .35rem; padding: .1rem .35rem; font-size: .78rem; line-height: 1.25; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 2px #fff; }
.dock-slot:hover { filter: brightness(.95); }
.dock-overdue { outline: 2px dashed var(--bs-danger); outline-offset: -2px; }
.dock-now { position: absolute; left: 3.5rem; right: 0; border-top: 2px solid var(--bs-danger); pointer-events: none; }

/* ผังคลัง (heat map): สีตามความจุ / กลุ่ม ABC / ความถี่การหยิบ */
.map-aisle { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .5rem; }
.map-aisle-name { width: 3.5rem; flex-shrink: 0; font-size: .8rem; font-weight: 600; color: #64748b; padding-top: .45rem; }
.map-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.map-cell { width: 5.6rem; min-height: 3rem; border-radius: .4rem; padding: .2rem .35rem; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; font-size: .72rem; line-height: 1.2; border: 1px solid rgba(0, 0, 0, .06); }
.map-cell:hover { outline: 2px solid #0f172a; }
.map-code { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-val { text-align: right; font-size: .8rem; font-weight: 700; }
.map-special { border-style: dashed; border-color: #64748b; }
.map-empty { background: #f1f5f9; color: #94a3b8; }
.map-none { background: #e2e8f0; color: #334155; }
.map-heat-0 { background: #f1f5f9; color: #334155; }
.map-heat-1 { background: #dcfce7; color: #14532d; }
.map-heat-2 { background: #bbf7d0; color: #14532d; }
.map-heat-3 { background: #fde68a; color: #713f12; }
.map-heat-4 { background: #fdba74; color: #7c2d12; }
.map-heat-5 { background: #f87171; color: #450a0a; }
.map-over { background: #b91c1c; color: #fff; }
.map-abc-a { background: #fecaca; color: #7f1d1d; }
.map-abc-b { background: #fde68a; color: #713f12; }
.map-abc-c { background: #bfdbfe; color: #1e3a8a; }
.map-legend > span { display: inline-block; min-width: 1.4rem; padding: 0 .3rem; border-radius: .25rem; margin-left: .15rem; text-align: center; }

/* document header: fields packed by content width (label above value) — no half-empty rows;
   the note grows to fill what is left of its row, short fields stay compact */
.doc-head .doc-no { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.doc-fields { display: flex; flex-wrap: wrap; gap: .65rem 2rem; margin: 0; }
.doc-fields > div { flex: 0 1 auto; min-width: 6.5rem; max-width: 20rem; }
.doc-fields dt { font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); margin-bottom: .1rem; white-space: nowrap; }
.doc-fields dd { margin: 0; overflow-wrap: anywhere; }
.doc-fields .wide { flex: 1 1 16rem; max-width: none; }
@media (max-width: 575.98px) { .doc-fields > div { flex: 1 1 40%; } }

/* help button (?) next to titles/fields — explanation opens in a popover */
.help-tip { display: inline-block; margin-left: .25rem; font-size: .95em; line-height: 1; text-decoration: none; cursor: pointer; vertical-align: baseline; }
.help-tip:focus-visible { outline: 2px solid var(--bs-primary); border-radius: 50%; }
.popover { max-width: min(22rem, calc(100vw - 2rem)); font-size: .85rem; }

/* form sections (e.g. product master): small heading + divider */
.form-section { font-weight: 600; font-size: .9rem; color: var(--bs-secondary-color); text-transform: none; margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.form-section .bi { color: var(--bs-primary); }

/* product tracking settings: one choice per row (label left, buttons right) */
.track-box { border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .25rem .9rem; background: var(--bs-tertiary-bg); }
.track-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 0; }
.track-row + .track-row { border-top: 1px dashed var(--bs-border-color-translucent); }
.track-label { flex: 0 0 11rem; font-weight: 500; }
.flow-note { flex: 0 0 calc(100% - 12rem); max-width: calc(100% - 12rem); margin-left: 12rem; padding: .45rem .65rem; border-radius: .45rem; font-size: .85rem; line-height: 1.5; background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.flow-note.flow-note-qc { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
@media (max-width: 767.98px) { .flow-note { flex-basis: 100%; max-width: 100%; margin-left: 0; } }
@media (max-width: 575.98px) { .track-label { flex-basis: 100%; } }

/* page heading = one breadcrumb line: menu group › menu (link on sub pages) › current page (h1) */
.page-crumb { --bs-breadcrumb-divider: "\203A"; --bs-breadcrumb-item-padding-x: .45rem; align-items: center; font-size: .9rem; color: var(--bs-secondary-color); }
.page-crumb .breadcrumb-item + .breadcrumb-item::before { color: var(--bs-tertiary-color); font-size: 1.05rem; line-height: 1; }
.page-crumb a { color: inherit; text-decoration: none; }
.page-crumb a:hover { color: var(--bs-primary); text-decoration: underline; }
.page-crumb .page-title { display: inline; font-size: 1.05rem; font-weight: 600; color: var(--bs-emphasis-color); margin: 0; }

/* long card forms: the save / cancel bar stays in view while scrolling */
form.card > .card-footer:last-child { position: sticky; bottom: 0; z-index: 4; background: var(--bs-body-bg) !important; box-shadow: 0 -.35rem .6rem -.5rem rgba(15, 23, 42, .18); border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius); }
@media (max-width: 991.98px) { form.card > .card-footer:last-child { bottom: calc(58px + env(safe-area-inset-bottom)); } }

/* submit button while the request is running */
.btn.is-busy { pointer-events: none; opacity: .75; }

/* confirm dialog: keep line breaks of the question */
#confirmModal .confirm-text { white-space: pre-line; }

/* list tables: sortable headers, clickable rows */
th.sortable { white-space: nowrap; }
th.sortable a { color: inherit; text-decoration: none; }
th.sortable .bi { font-size: .75em; opacity: .35; }
th.sortable.sorted .bi, th.sortable:hover .bi { opacity: 1; color: var(--bs-primary); }
th.sort-client { cursor: pointer; user-select: none; }
tr[data-href] { cursor: pointer; }
.list-pager .btn.disabled { opacity: .35; }

/* product form UOM table: one card per unit on phones (no sideways scrolling) */
@media (max-width: 767.98px) {
    .uom-table thead { display: none; }
    .uom-table, .uom-table tbody { display: block; }
    .uom-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .75rem; padding: .65rem .25rem; border-bottom: 1px solid var(--bs-border-color); }
    .uom-table td { display: block; border: 0; padding: 0; min-width: 0; background: transparent !important; }
    .uom-table td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
    .uom-table td:first-child, .uom-table td:nth-child(2) { grid-column: span 1; }
    .uom-table .uom-receive { text-align: left !important; }
    .uom-table .uom-del { align-self: end; }
    .uom-table tr.uom-base { background: var(--bs-tertiary-bg); border-radius: .4rem; }
}

/* product form: each group is its own tinted panel with a numbered, colored heading */
.product-groups { background: var(--bs-tertiary-bg); counter-reset: fg; }
.fg { --fg: #2563eb; --fg-bg: #eff6ff; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-left: 4px solid var(--fg);
      border-radius: .6rem; padding: 0 1rem .35rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.fg:last-child { margin-bottom: 0; }
.fg > .form-section:first-child, .fg > .form-section#units { counter-increment: fg; margin: 0 -1rem .9rem; padding: .6rem 1rem; background: var(--fg-bg); color: var(--fg);
      border-bottom: 1px solid var(--bs-border-color-translucent); border-radius: 0 .5rem 0 0; font-size: .95rem; }
.fg > .form-section:first-child::before, .fg > .form-section#units::before { content: counter(fg); display: inline-flex; align-items: center; justify-content: center;
      width: 1.45rem; height: 1.45rem; margin-right: .45rem; border-radius: 50%; background: var(--fg); color: #fff; font-size: .8rem; font-weight: 700; }
.fg > .form-section .bi { color: var(--fg); }
.fg-units { --fg: #0d9488; --fg-bg: #f0fdfa; }
.fg-size  { --fg: #d97706; --fg-bg: #fffbeb; }
.fg-track { --fg: #7c3aed; --fg-bg: #f5f3ff; }
.fg-other { --fg: #e11d48; --fg-bg: #fff1f2; }
.fg .uom-table thead th { background: transparent; }
@media (prefers-color-scheme: dark) { .fg { --fg-bg: rgba(255, 255, 255, .05); } }

/* warehouse layout page: three columns (warehouse → zone → storage) */
.layout-cols { counter-reset: fg; }
.layout-cols .fg { padding-bottom: .75rem; }
.layout-cols .list-group-item { border-radius: .4rem; margin-bottom: .2rem; border: 0; }
.layout-form { background: var(--bs-tertiary-bg); border-radius: .5rem; padding: .6rem .7rem; margin-bottom: .6rem; }
.storage-card { border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .7rem .8rem; margin-bottom: .6rem; background: var(--bs-body-bg); }
form.storage-card { background: var(--bs-tertiary-bg); }

/* pick-several buttons (e.g. company types) */
.type-pick { border-radius: 2rem; }
.btn-check:disabled + .type-pick { opacity: 1; }

/* integrations: 3-step strip + tabs */
.int-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .5rem; }
.int-step { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .75rem; border-radius: .6rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); color: inherit; text-decoration: none; }
.int-step:hover { border-color: var(--bs-primary); }
.int-step small { display: block; color: var(--bs-secondary-color); font-size: .78rem; }
.int-step-no { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.int-tabs .nav-link { font-weight: 600; }
.int-form { background: var(--bs-tertiary-bg); border-radius: .6rem; padding: .75rem; margin-bottom: .75rem; }
.int-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .15rem 1rem; }

/* reorder-point levels: "block" rows in red */
.level-row.is-block .form-control, .level-row.is-block .form-select { border-color: var(--bs-danger); }
.level-row.is-block .level-action { color: var(--bs-danger); font-weight: 600; }

/* language management: edited cells tinted */
.lang-table td.lang-changed { background: var(--bs-warning-bg-subtle); }
.lang-table textarea { min-height: 2rem; resize: vertical; }

/* process steps: flow boxes (required steps locked, QC switchable) */
/* process steps fill the row; every box gets the same width and height */
.flow-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
@media (min-width: 768px) { .flow-steps { flex-wrap: nowrap; } }
.flow-step { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .55rem; align-items: center;
    padding: .6rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .6rem; background: var(--bs-body-bg); color: inherit; text-decoration: none; }
.flow-step .flow-icon { grid-row: span 2; font-size: 1.4rem; color: var(--fg, var(--bs-primary)); }
.flow-step .flow-name { font-weight: 600; }
.flow-step small { grid-column: 2 / -1; color: var(--bs-secondary-color); }
.flow-optional { border-style: dashed; cursor: pointer; opacity: .65; }
.flow-optional.on { border-style: solid; border-color: var(--bs-success); opacity: 1; background: var(--bs-success-bg-subtle); }
.flow-arrow { color: var(--bs-secondary-color); align-self: center; flex: none; }
@media (max-width: 575.98px) { .flow-steps { flex-direction: column; align-items: stretch; } .flow-arrow { transform: rotate(90deg); align-self: center; } }

/* dashboard: pending work by stage (inbound green / outbound red / stock blue), idle steps folded away */
.work-groups { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.wg-inbound { --wg: 22, 163, 74; } .wg-outbound { --wg: 225, 29, 72; } .wg-stock { --wg: 79, 70, 229; }
.work-group { border-left: 3px solid rgb(var(--wg)); padding-left: .65rem; }
.work-group-title { font-size: .8rem; font-weight: 600; color: rgb(var(--wg)); margin-bottom: .35rem; }
.work-tiles { display: flex; flex-wrap: wrap; gap: .4rem; }
.work-tile { width: 9rem; }
.work-tile { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; padding: .5rem .6rem; border-radius: .55rem; border: 1px solid var(--bs-border-color-translucent);
    color: var(--bs-secondary-color); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.work-tile i { font-size: 1.1rem; }
.work-tile .work-n { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.work-tile .work-label { grid-column: 1 / -1; font-size: .78rem; line-height: 1.2; margin-top: .2rem; }
.work-tile.has-work { color: var(--bs-body-color); border-color: rgba(var(--wg), .35); background: rgba(var(--wg), .08); }
.work-tile.has-work i, .work-tile.has-work .work-n { color: rgb(var(--wg)); }
.work-tile.has-work:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -8px rgba(var(--wg), .6); }
.work-idle .work-tile { opacity: .7; padding: .35rem .5rem; }
.work-idle .work-tile .work-n { font-size: 1rem; }
.work-tile:hover { border-color: var(--bs-primary); }
[aria-controls="workIdle"][aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* add-line rows: button lines up with the inputs (below their labels) */
@media (min-width: 576px) { .add-line-btn { padding-top: 2rem; } }

/* document page colour groups: document (blue) / items (green) / more information (purple) — accent bar + tinted icon */
.grp { --grp: var(--bs-primary); --grp-rgb: var(--bs-primary-rgb); border-left: 4px solid var(--grp) !important; overflow: hidden; }
.grp-doc { --grp: var(--bs-primary); --grp-rgb: var(--bs-primary-rgb); }
.grp-items { --grp: var(--bs-success); --grp-rgb: var(--bs-success-rgb); }
.grp-extra { --grp: #7c4dcc; --grp-rgb: 124, 77, 204; }
.grp-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.grp-icon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: inline-grid; place-items: center; font-size: 1.1rem; color: var(--grp); background: rgba(var(--grp-rgb), .12); }
.grp-title { font-size: 1rem; font-weight: 600; margin: 0; }
.grp-sub { font-size: .8rem; color: var(--bs-secondary-color); }
/* add zone: bottom of the items box, tinted with the group colour */
.add-zone { padding: 1rem; background: rgba(var(--grp-rgb), .06); border-top: 1px dashed rgba(var(--grp-rgb), .45); }
.add-zone-title { font-size: .95rem; font-weight: 600; color: var(--grp); margin: 0 0 .75rem; }
/* one height for every control in the add row: the quantity box (large elsewhere for touch) drops to the normal size */
.add-zone .input-group-lg > .form-control, .add-zone .input-group-lg > .form-select { padding: .375rem .75rem; font-size: 1rem; border-radius: var(--bs-border-radius); min-height: 0; height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2)); }
.add-zone .input-group-lg > .form-select { padding-right: 2.25rem; }
.add-zone .input-group-lg > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.add-zone .input-group-lg > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* more information rows: label toggles the switch, closed by default */
.doc-section + .doc-section { border-top: 1px solid var(--bs-border-color-translucent); }
.doc-section-row { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; }
.doc-section.open > .doc-section-row { background: rgba(var(--grp-rgb), .07); }
.doc-section-label { cursor: pointer; margin: 0; font-weight: 500; }
.doc-section-label .bi { color: var(--grp); margin-right: .25rem; }
.doc-section-body { padding: .75rem 1rem 1rem; }
.doc-section .form-switch .form-check-input { width: 2.5em; height: 1.25em; cursor: pointer; }
.doc-section .form-switch .form-check-input:checked { background-color: var(--grp); border-color: var(--grp); }
/* vehicles strip in the document header (teal) */
.doc-vehicles { margin-top: 1rem; padding: .6rem .75rem; border-radius: .6rem; background: rgba(var(--bs-info-rgb), .09); border: 1px solid rgba(var(--bs-info-rgb), .3); }
.doc-vehicles-label { font-weight: 600; font-size: .875rem; color: var(--bs-info-text-emphasis); margin-right: .25rem; }
.doc-vehicles .veh-chip { background: var(--bs-body-bg); }

/* document list: status tabs with counts, table-like rows (one line per document on wide screens), numbered pager */
.status-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 767.98px) { .status-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; } .status-tab { flex: none; } }
.status-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none; font-size: .875rem; }
.status-tab:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.status-tab .dot { width: .5rem; height: .5rem; border-radius: 50%; }
.status-tab .n { font-size: .75rem; padding: 0 .45rem; border-radius: 999px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); font-weight: 600; }
.status-tab.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.status-tab.active .n { background: rgba(255, 255, 255, .25); color: #fff; }
.doc-list { overflow: hidden; }
.doc-list-head, .doc-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .6rem 1rem; align-items: center; }
.doc-list-head { display: none; }
.doc-list-row { color: inherit; text-decoration: none; border-top: 1px solid var(--bs-border-color-translucent); }
.doc-list-row:first-of-type { border-top: 0; }
.doc-list-row:hover { background: var(--bs-tertiary-bg); }
.doc-list-row .c-doc { grid-column: 1; }
.doc-list-row .c-meta { display: none; }
.doc-list-row .c-progress { grid-column: 2; grid-row: 1 / span 3; min-width: 7rem; text-align: end; }
.doc-list-row .c-partner, .doc-list-row .c-date { grid-column: 1; min-width: 0; }
.doc-list-row .c-date { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .875rem; color: var(--bs-secondary-color); }
.doc-list .c-products, .doc-list .c-vehicles, .doc-list .c-staging { display: none; }
.doc-list-row .c-progress .progress { margin-top: .25rem; }
/* wide: one line per document — doc | supplier | products | date | progress; extra wide adds vehicles + staging */
@media (min-width: 992px) {
    .doc-list-head, .doc-list-row { grid-template-columns: 13rem minmax(10rem, .8fr) minmax(0, 1.2fr) 9.5rem 9rem; }
    .doc-list-head { display: grid; padding-block: .5rem; font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color-translucent); }
    .doc-list-row > span { grid-column: auto !important; grid-row: auto !important; }
    .doc-list .c-products { display: block; min-width: 0; }
    .doc-list-row .c-meta { display: block; margin-top: .15rem; font-size: .75rem; color: var(--bs-secondary-color); }
    .doc-list-row .c-date { color: var(--bs-body-color); font-size: .9rem; }
}
@media (min-width: 1400px) {
    .doc-list-head, .doc-list-row { grid-template-columns: 14rem minmax(11rem, .8fr) minmax(0, 1.3fr) 9rem 9.5rem 5.5rem 9.5rem; }
    .doc-list .c-vehicles, .doc-list .c-staging { display: block; min-width: 0; }
}
.status-tab { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.doc-list-row { transition: background-color .15s ease; }
@media (prefers-reduced-motion: no-preference) {
    .doc-list-row { animation: row-in .3s ease-out both; }
    .doc-list-row:nth-of-type(2) { animation-delay: 25ms; }
    .doc-list-row:nth-of-type(3) { animation-delay: 50ms; }
    .doc-list-row:nth-of-type(4) { animation-delay: 75ms; }
    .doc-list-row:nth-of-type(5) { animation-delay: 100ms; }
    .doc-list-row:nth-of-type(6) { animation-delay: 125ms; }
    .doc-list-row:nth-of-type(7) { animation-delay: 150ms; }
    .doc-list-row:nth-of-type(8) { animation-delay: 175ms; }
    .doc-list-row:nth-of-type(9) { animation-delay: 200ms; }
    .doc-list-row:nth-of-type(10) { animation-delay: 225ms; }
    .doc-list-row:nth-of-type(11) { animation-delay: 250ms; }
}
@keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* receiving: scan box (opens the receipt) kept apart from the search card */
.scan-card { padding: .85rem 1rem; border-radius: var(--bs-border-radius-lg); background: rgba(var(--bs-primary-rgb), .06); border: 1px solid rgba(var(--bs-primary-rgb), .25); }
/* search card: one field per topic; always open on wide screens, folds on phones (opens itself when filters are set) */
.filter-card { overflow: hidden; }
.filter-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .6rem 1rem; border: 0; background: transparent; color: inherit; font-weight: 600; text-align: start; }
.filter-toggle .bi-chevron-down { transition: transform .2s ease; }
.filter-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.filter-body > .row { padding: 0 1rem .85rem; }
@media (min-width: 768px) {
    .filter-card .filter-body.collapse:not(.show) { display: block; }
    .filter-toggle { pointer-events: none; padding-bottom: .35rem; }
    .filter-toggle .bi-chevron-down { display: none; }
}
/* put-away page: summary tiles, stepped form (1 item → 2 location → 3 quantity), list rows, QC-blocked group (amber) */
.min-w-0 { min-width: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.stat-tile { --tone: var(--bs-primary-rgb); display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-left: 4px solid rgb(var(--tone)); color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.stat-tile:hover { transform: translateY(-1px); box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .08); }
.stat-tile.tone-success { --tone: var(--bs-success-rgb); }
.stat-tile.tone-warning { --tone: var(--bs-warning-rgb); }
.stat-tile.tone-info { --tone: var(--bs-info-rgb); }
.stat-tile.tone-danger { --tone: var(--bs-danger-rgb); }
/* QC page: pending group (cyan), quarantine group (red), pass / fail inputs tinted */
.qc-grp { --grp: var(--bs-info); --grp-rgb: var(--bs-info-rgb); }
.qc-quarantine { border-left: 4px solid var(--bs-danger) !important; --grp: var(--bs-danger); --grp-rgb: var(--bs-danger-rgb); }
.qc-pass .form-control, .qc-pass .input-group-text { border-color: rgba(var(--bs-success-rgb), .55); }
.qc-pass .form-control { background: rgba(var(--bs-success-rgb), .06); }
.qc-fail .form-control, .qc-fail .input-group-text { border-color: rgba(var(--bs-danger-rgb), .55); }
.qc-fail .form-control { background: rgba(var(--bs-danger-rgb), .05); }
.qc-fail-step { background: rgba(var(--bs-danger-rgb), .04); }
.stat-icon { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: grid; place-items: center; font-size: 1.15rem; color: rgb(var(--tone)); background: rgba(var(--tone), .12); flex: none; }
.stat-n { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) { .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .4rem; } .stat-tile { padding: .5rem .6rem; gap: .4rem; } .stat-icon { display: none; } .stat-n { font-size: 1.15rem; } .stat-label { font-size: .7rem; line-height: 1.2; display: block; } }
@media (min-width: 992px) { .putaway-side { position: sticky; top: 4.5rem; } }
.putaway-hint { align-items: center; gap: .5rem; padding: 1rem; border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); color: var(--bs-secondary-color); font-size: .875rem; }
.putaway-row { display: flex; align-items: center; gap: .75rem; }
.putaway-row > .min-w-0 { flex: 1 1 auto; }
.flex-none { flex: none; }
.putaway-row.is-current { background: rgba(var(--bs-primary-rgb), .08); box-shadow: inset 4px 0 0 var(--bs-primary); }
.putaway-form { border-color: rgba(var(--bs-primary-rgb), .45); overflow: hidden; }
.pf-step { display: flex; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.pf-step:first-of-type { background: rgba(var(--bs-primary-rgb), .05); }
.pf-num { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: var(--bs-primary); }
.pf-label { font-size: .75rem; color: var(--bs-secondary-color); }
.putaway-form .pf-step:last-of-type { border-bottom: 0; }
.qc-blocked { border-left: 4px solid var(--bs-warning) !important; --grp: var(--bs-warning); --grp-rgb: var(--bs-warning-rgb); }
.qc-blocked .putaway-row { background: rgba(var(--bs-warning-rgb), .05); }
/* put away by SKU: group header per receipt, split rows (location + quantity) */
.putaway-group { display: flex; align-items: center; gap: .5rem; padding: .45rem 1rem; font-size: .85rem; font-weight: 600; color: var(--bs-body-color); background: rgba(var(--grp-rgb, var(--bs-success-rgb)), .07); border-top: 1px solid var(--bs-border-color-translucent); }
.putaway-group > .bi { color: var(--grp, var(--bs-success)); }
.putaway-group > .ms-auto { font-size: .75rem; color: var(--bs-secondary-color); }
#pending .putaway-row { padding-block: .5rem; }
.putaway-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; margin-top: .15rem; font-size: .8rem; color: var(--bs-secondary-color); }
.putaway-meta .badge { font-size: .7rem; }
.putaway-group:first-child { border-top: 0; }
.split-row { display: flex; gap: .5rem; align-items: flex-end; }
.split-row .mb-3 { margin-bottom: .5rem !important; }
.split-qty { width: 9.5rem; flex: none; margin-bottom: .5rem; }
[data-loc-code]::placeholder { text-transform: none; font-family: var(--bs-body-font-family); }
.split-extra { padding-top: .5rem; border-top: 1px dashed var(--bs-border-color); margin-top: .25rem; }
@media (max-width: 575.98px) { .split-row { flex-wrap: wrap; } .split-qty { width: 100%; } }
/* put away by pallet: one card per pallet with its suggested location */
.pallet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pallet-card { border-left: 4px solid var(--bs-primary) !important; --grp: var(--bs-primary); --grp-rgb: var(--bs-primary-rgb); }
.pallet-card.is-current { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); }
.pallet-card.is-held { border-left-color: var(--bs-warning) !important; --grp: var(--bs-warning); --grp-rgb: var(--bs-warning-rgb); }
.pallet-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.pallet-items { list-style: none; margin: 0 1rem .75rem; padding: .5rem .75rem; border-radius: .5rem; background: var(--bs-tertiary-bg); font-size: .875rem; }
/* quick receive / issue: one-line hint strip */
.quick-hint { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .5rem .85rem; border-radius: var(--bs-border-radius-lg); background: rgba(var(--bs-success-rgb), .07); border: 1px solid rgba(var(--bs-success-rgb), .25); font-size: .875rem; }
.quick-hint > .bi { color: var(--bs-success); font-size: 1.1rem; }
/* shipping: one card per order ready to ship */
.pallet-items li { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }
.pager-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin: 1rem 0; }

/* vehicles in the document header: one chip per vehicle + inline add */
.veh-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .875rem; }
.veh-add .form-control { min-width: 9rem; }
.veh-add .form-select { min-width: 8.5rem; }
.veh-add .input-group { flex-wrap: nowrap; }
@media (max-width: 575.98px) { .veh-add { flex: 1 1 100%; } .veh-add .form-control, .veh-add .form-select { min-width: 0; } }

/* dashboard: online users (green = active in the last 2 minutes, amber = idle) */
.online-users { max-height: 22rem; overflow-y: auto; }
.online-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--bs-success); flex: none; box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .2); }
.online-dot.idle { background: var(--bs-warning); box-shadow: 0 0 0 .2rem rgba(var(--bs-warning-rgb), .2); }
.online-users [aria-expanded="true"] { background: var(--bs-primary-bg-subtle); }
.online-users [aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* drop-down lists use the page font (the browser's option list otherwise falls back to the system font) */
select, select option, select optgroup, datalist option { font-family: 'Noto Sans', 'Noto Sans Thai', system-ui, sans-serif; }

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

/* instant updates (assets/realtime.js): changed-document banner, viewers, company toasts */
.rt-area .rt-changed { position: sticky; top: 4.25rem; z-index: 1020; }
.rt-viewers { color: var(--bs-secondary-color); }
.rt-locked main form :is(button, input, select, textarea):disabled { cursor: not-allowed; }
.rt-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(22rem, calc(100vw - 2rem)); }
.rt-toast { display: block; padding: .6rem .8rem; border-radius: .7rem; background: var(--bs-body-bg); color: var(--bs-body-color); text-decoration: none;
    border-left: 4px solid var(--bs-primary); opacity: 0; transform: translateY(.5rem); transition: opacity .3s ease, transform .3s ease; }
.rt-toast.show { opacity: 1; transform: none; }
.rt-toast:hover { color: var(--bs-body-color); background: var(--bs-tertiary-bg); }
@media (max-width: 767.98px) { .rt-toasts { bottom: 4.5rem; } }
.rt-status { position: fixed; left: 1rem; bottom: 1rem; z-index: 1090; padding: .35rem .7rem; border-radius: 2rem; font-size: .8rem;
    background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border: 1px solid var(--bs-warning-border-subtle); }
@media (max-width: 767.98px) { .rt-status { bottom: 4.5rem; } }

/* login page: illustration panel (left) + sign-in form (right); phones: coloured header then the form */
.login-page { min-height: 100vh; margin: 0; background: #f1f5f9; }
.login-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.login-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2.25rem 3rem; color: #fff;
    background: radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .14), transparent 40%), linear-gradient(150deg, #1e293b 0%, #1d4ed8 55%, #0ea5e9 100%); }
.login-hero::after { content: ""; position: absolute; width: 28rem; height: 28rem; right: -9rem; bottom: -9rem; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.login-brand { display: flex; align-items: center; gap: .75rem; position: relative; z-index: 1; }
.login-hero-body { margin: auto 0; max-width: 34rem; position: relative; z-index: 1; }
.login-art { width: 100%; max-width: 30rem; height: auto; margin-bottom: 1.5rem; filter: drop-shadow(0 18px 30px rgba(15, 23, 42, .35)); }
.login-hero-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 700; margin-bottom: .5rem; }
.login-hero-text { opacity: .85; margin-bottom: 1.25rem; }
.login-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.login-features li { display: flex; align-items: center; gap: .6rem; }
.login-features i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: rgba(255, 255, 255, .16); flex: none; }
.login-panel { display: flex; flex-direction: column; padding: 1.5rem 2rem; background: var(--bs-body-bg); }
.login-top { display: flex; justify-content: flex-end; }
.login-form-wrap { width: 100%; max-width: 24rem; margin: auto; padding: 2rem 0; }
.login-field .input-group-text { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.login-field .form-control { padding-top: .65rem; padding-bottom: .65rem; }
.login-field .form-control:focus { box-shadow: none; }
.login-field:focus-within { border-radius: var(--bs-border-radius); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .2); }
.login-eye { border: var(--bs-border-width) solid var(--bs-border-color); border-left: 0; color: var(--bs-secondary-color); background: var(--bs-body-bg); }
.login-submit { background: linear-gradient(135deg, #2563eb, #0ea5e9); border: 0; box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .7); }
.login-submit:hover { filter: brightness(1.05); }
.login-rf { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; padding: .7rem .9rem; border-radius: .7rem; border: 1px dashed var(--bs-border-color);
    color: var(--bs-body-color); text-decoration: none; }
.login-rf:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.login-foot { text-align: center; }
@media (max-width: 991.98px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-hero { padding: 1.25rem 1.25rem 2.5rem; }
    .login-hero-body { margin: 1rem 0 0; }
    .login-art, .login-features { display: none; }
    .login-hero-title { font-size: 1.3rem; }
    .login-hero-text { margin-bottom: 0; font-size: .9rem; }
    .login-panel { margin-top: -1.25rem; border-radius: 1.25rem 1.25rem 0 0; padding: 1rem 1.25rem; }
    .login-form-wrap { padding: 1rem 0; }
}
/* login page motion: content fades up, background drifts, button shine (off when reduced motion is preferred) */
.login-hero { background-size: 160% 160%; animation: login-bg 18s ease-in-out infinite alternate; }
.login-hero::before { content: ""; position: absolute; width: 14rem; height: 14rem; left: -4rem; top: 30%; border-radius: 50%; background: rgba(255, 255, 255, .07); animation: login-drift 14s ease-in-out infinite alternate; }
.login-hero::after { animation: login-drift 18s ease-in-out infinite alternate-reverse; }
.login-art { animation: login-rise .8s ease-out both, login-float 6s ease-in-out .8s infinite; }
.login-hero-title, .login-hero-text, .login-features li, .login-form-wrap > * { animation: login-rise .7s ease-out both; }
.login-hero-title { animation-delay: .15s; }
.login-hero-text { animation-delay: .25s; }
.login-features li:nth-child(1) { animation-delay: .35s; }
.login-features li:nth-child(2) { animation-delay: .45s; }
.login-features li:nth-child(3) { animation-delay: .55s; }
.login-form-wrap > :nth-child(2) { animation-delay: .08s; }
.login-form-wrap > :nth-child(3) { animation-delay: .16s; }
.login-form-wrap > :nth-child(4) { animation-delay: .24s; }
.login-submit { position: relative; overflow: hidden; }
.login-submit::after { content: ""; position: absolute; inset: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg); animation: login-shine 4.5s ease-in-out 1.2s infinite; }
.login-features i { transition: transform .2s ease; }
.login-features li:hover i { transform: scale(1.12) rotate(-6deg); }
@keyframes login-bg { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@keyframes login-drift { from { transform: translate(0, 0); } to { transform: translate(2.5rem, -2rem); } }
@keyframes login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes login-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes login-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    .login-hero, .login-hero::before, .login-hero::after, .login-art, .login-hero-title, .login-hero-text, .login-features li, .login-form-wrap > *, .login-submit::after { animation: none; }
}
.login-logo { display: block; height: 46px; width: auto; margin-bottom: 1.75rem; }
@media (max-width: 991.98px) { .login-logo { display: none; } }
.print-logo { display: block; height: 40px; width: auto; }

/* product form: put away rule demo — the lot that goes out first lifts and slides to the exit (FIFO / FEFO / LIFO) */
.track-rule { align-items: flex-start; }
.rot-demo { flex: 1 1 100%; margin-left: 12rem; }
@media (max-width: 575.98px) { .rot-demo { margin-left: 0; } }
.rot-shelf { position: relative; display: flex; align-items: flex-end; gap: .6rem; max-width: 30rem; padding: .7rem .75rem .4rem; overflow: hidden;
    background: var(--bs-tertiary-bg); border-radius: .5rem; border-bottom: 4px solid var(--bs-border-color); }
.rot-lot { position: relative; display: flex; flex-direction: column; align-items: center; width: 5.6rem; padding: .35rem .25rem; font-size: .72rem; line-height: 1.25;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; }
.rot-lot i { font-size: 1.35rem; color: #b45309; }
.rot-order { position: absolute; top: .2rem; left: .25rem; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border-radius: 50%;
    background: var(--bs-secondary); color: #fff; font-size: .68rem; font-weight: 700; }
.rot-lot.rot-first { z-index: 1; border-color: var(--bs-success); box-shadow: 0 0 0 .2rem rgba(var(--bs-success-rgb), .25); animation: rot-go 2.8s ease-in-out infinite; }
.rot-lot.rot-first .rot-order { background: var(--bs-success); }
.rot-out { margin-left: auto; align-self: center; color: var(--bs-success); font-weight: 600; font-size: .8rem; white-space: nowrap; animation: rot-pulse 2.8s ease-in-out infinite; }
@keyframes rot-go {
    0%, 15% { transform: none; opacity: 1; }
    40% { transform: translateY(-.5rem); opacity: 1; }
    75% { transform: translate(var(--rot-dx, 8rem), -.5rem); opacity: 0; }
    76%, 85% { transform: none; opacity: 0; }
    100% { transform: none; opacity: 1; }
}
@keyframes rot-pulse { 0%, 55%, 100% { transform: none; } 70% { transform: scale(1.15); } }
@media (max-width: 575.98px) { .rot-lot { width: 4.8rem; } .rot-shelf { gap: .4rem; } }
@media (prefers-reduced-motion: reduce) { .rot-lot.rot-first, .rot-out { animation: none; } }

/* users page: initials avatar (admin = primary), online dot, clickable rows */
.user-avatar { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    color: #fff; background: linear-gradient(135deg, #64748b, #94a3b8); }
.user-avatar.is-admin { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.user-online { position: absolute; right: -1px; bottom: -1px; width: .75rem; height: .75rem; border-radius: 50%; background: var(--bs-success); border: 2px solid var(--bs-body-bg); }
.user-row { cursor: pointer; }
.user-row:hover { background: var(--bs-tertiary-bg); }
.user-filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.user-filters .btn { white-space: nowrap; }
/* user form: what the chosen role can do, grouped by menu */
.role-perms { border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; padding: .75rem .9rem; background: var(--bs-tertiary-bg); }
.role-perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; align-items: start; }
.role-perm-group { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; overflow: hidden; }
.rpg-head { display: flex; align-items: center; gap: .4rem; padding: .4rem .7rem; font-size: .85rem; font-weight: 600; background: var(--bs-secondary-bg); }
.rpg-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .7rem; font-size: .8rem; border-top: 1px solid var(--bs-border-color-translucent); }
.rpg-mod { min-width: 0; }
.rpg-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; flex: none; max-width: 60%; }
.rp-act { padding: .05rem .4rem; border-radius: 1rem; font-size: .7rem; white-space: nowrap; border: 1px solid transparent; }
.rp-view { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.rp-use { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.rp-edit { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border-color: var(--bs-success-border-subtle); }
.rp-other { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }

/* login: light pattern on the form side (dot grid + soft blue glows), form sits on a floating card */
.login-panel { position: relative;
    background-color: var(--bs-body-bg);
    background-image:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, .10), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(14, 165, 233, .10), transparent 40%),
        radial-gradient(rgba(37, 99, 235, .16) 1px, transparent 1.2px);
    background-size: auto, auto, 22px 22px; }
.login-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 46px, rgba(37, 99, 235, .035) 46px 47px); }
.login-panel > * { position: relative; }
.login-form-wrap { max-width: 27rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1.1rem;
    padding: 2rem 2rem 1.75rem; box-shadow: 0 24px 48px -28px rgba(15, 23, 42, .35); }
@media (max-width: 575.98px) { .login-form-wrap { padding: 1.5rem 1.25rem; } }
/* process settings: RF receive choices inside the inbound "Receive" box */
/* ขั้นตอนการทำงาน: กล่องวิธีรับบน RF ต่อลงมาจากกล่อง "รับสินค้า" — คลิกกล่องเพื่อเปิด / ปิด, ภาพเคลื่อนไหวเล็ก ๆ บอกวิธีรับ */
.flow-subrow { align-items: flex-start; margin-top: .5rem; }
.flow-ghost { flex: 1 1 0; min-width: 0; }
.flow-subs { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; position: relative; }
.flow-subs > * { margin-left: 1.4rem; }
.flow-subs::before { content: ''; position: absolute; left: .6rem; top: -.5rem; bottom: 1.4rem; border-left: 2px dashed var(--bs-border-color); }
.flow-subs .flow-step::before { content: ''; position: absolute; left: -.8rem; top: 50%; width: .8rem; border-top: 2px dashed var(--bs-border-color); }
.flow-subs-title { font-size: .8rem; color: var(--bs-secondary-color); }
.flow-subs .flow-step { flex: none; position: relative; padding-top: .45rem; padding-bottom: .45rem; user-select: none; transition: opacity .15s, background-color .15s, border-color .15s; }
.flow-sub:hover { border-color: var(--bs-success); opacity: 1; }
.flow-sub:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.flow-sub .flow-icon { font-size: 1.15rem; }
.flow-sub small { grid-column: 2; }
.rfm-anim { grid-column: 3; grid-row: 1 / span 2; position: relative; width: 3rem; height: 1.8rem; }
.rfm-anim i, .rfm-anim b { position: absolute; display: block; }
.rfm-anim i { width: .6rem; height: .5rem; border-radius: 2px; background: var(--bs-primary); opacity: 0; }
.rfm-normal b { right: 0; top: .1rem; bottom: 0; width: .8rem; border: 2px solid var(--bs-secondary-color); border-top: 0; border-radius: 0 0 2px 2px; }
.rfm-normal i { left: 0; bottom: .15rem; animation: rfm-slide 3s linear infinite; }
.rfm-normal i:nth-child(2) { animation-delay: 1s; }
.rfm-normal i:nth-child(3) { animation-delay: 2s; }
.rfm-pallet b { left: .2rem; right: .2rem; bottom: 0; height: .3rem; border-radius: 1px; background: var(--bs-secondary-color); }
.rfm-pallet i { width: .75rem; height: .55rem; bottom: .35rem; }
.rfm-pallet i:nth-child(1) { left: .55rem; animation: rfm-drop1 3.6s ease-out infinite; }
.rfm-pallet i:nth-child(2) { left: 1.5rem; animation: rfm-drop2 3.6s ease-out infinite; }
.rfm-pallet i:nth-child(3) { left: 1rem; bottom: .95rem; animation: rfm-drop3 3.6s ease-out infinite; }
.flow-sub:not(.on) .rfm-anim i { animation-play-state: paused; }
@keyframes rfm-slide { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 65% { left: 2.3rem; opacity: 1; } 80%, 100% { left: 2.3rem; opacity: 0; } }
@keyframes rfm-drop1 { 0% { transform: translateY(-1rem); opacity: 0; } 10%, 80% { transform: none; opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes rfm-drop2 { 0%, 15% { transform: translateY(-1rem); opacity: 0; } 25%, 80% { transform: none; opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes rfm-drop3 { 0%, 30% { transform: translateY(-1rem); opacity: 0; } 40%, 80% { transform: none; opacity: 1; } 92%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rfm-anim i { animation: none; opacity: 1; } .rfm-normal i:nth-child(2) { left: 1rem; } .rfm-normal i:nth-child(3) { left: 2.2rem; } }
@media (max-width: 575.98px) { .flow-ghost, .flow-subrow .flow-arrow { display: none; } }
/* ใบสั่งเบิก: modal เลือกสินค้า กว้างเกือบเต็มจอ */
@media (min-width: 992px) { .picker-dialog { max-width: min(1600px, 96vw); } }
.d-contents { display: contents; }
/* ขั้นกรอกจำนวน: ช่องหน่วยกว้างเท่ากันทุกแถว (ขอบช่องตรงกัน) */
.input-group > .picker-unit { width: 7rem; flex: none !important; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-selected { max-height: 5rem; overflow-y: auto; }
.picker-steps li { color: var(--bs-secondary-color); }
.picker-steps .badge { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.picker-steps li.active { color: var(--bs-body-color); font-weight: 600; }
.picker-steps li.active .badge { background: var(--bs-primary); color: #fff; }
[data-picker-qty] td:first-child { min-width: 10rem; }
/* ใบแจ้งรับ: รายการสินค้า 1 แถว — สินค้า | จำนวน | ราคาทุน | ปุ่ม (จอแคบ: จำนวน / ราคาทุน / ปุ่ม ขึ้นบรรทัดใหม่) */
.rl-row { padding-top: .55rem; padding-bottom: .55rem; }
.rl-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .4rem 1rem; align-items: center; }
/* lot / dates / serials + item status: a row under the product on narrow screens, middle columns on wide screens */
.rl-meta { grid-column: 1 / -1; order: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
@media (max-width: 767.98px) { .rl-grid { grid-template-columns: minmax(0, 1fr) auto; } .rl-prod { grid-column: 1 / -1; } }
.rl-cell { white-space: nowrap; }
.rl-lbl { color: var(--bs-secondary-color); margin-right: .2rem; }
.rl-lbl::after { content: ":"; }
@media (max-width: 1199.98px) { .rl-cell.rl-empty { display: none; } } /* narrow: only fields that have a value or are required */
@media (min-width: 1200px) {
    .rl-grid { grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr) 10.5rem 11.5rem 4.5rem; } /* fixed widths for qty / cost / buttons so the heading lines up with every row */
    .rl-meta { grid-column: auto; order: 0; display: grid; grid-template-columns: minmax(7rem, 1.2fr) 6.5rem 6.5rem 8.5rem; gap: .5rem; align-items: center; }
    .rl-meta.with-serial { grid-template-columns: minmax(7rem, 1.2fr) 6.5rem 6.5rem 6.5rem 8.5rem; }
    .rl-lbl { display: none; }
}
.rl-head { padding-top: .4rem; padding-bottom: .4rem; background: var(--bs-tertiary-bg); font-size: .78rem; color: var(--bs-secondary-color); font-weight: 600; }
/* ใบแจ้งรับ: ฟอร์มเพิ่มสินค้า — ปุ่มเพิ่มตรงกับช่องกรอก (ป้ายชื่อด้านบน), จอเล็ก = ปุ่มเต็มแถว */
.add-line-row .form-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* block: an inline-block with overflow hidden sits on a taller line and pushes the input down */
@media (max-width: 991.98px) { .add-line-row .add-line-btn { padding-top: 0; } }
.row > .d-contents > * { flex-shrink: 0; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }

/* product form: pick substitution — one card per rule, tap to switch "must match" / "can substitute"; rules that do not apply are dimmed */
.sub-box { border: 1px solid var(--bs-border-color-translucent); border-radius: .6rem; padding: .8rem .9rem; background: var(--bs-tertiary-bg); }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; } /* auto-fit = cards stretch to fill the row */
.sub-card { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .65rem .75rem; cursor: pointer; user-select: none;
    background: var(--bs-body-bg); border: 1.5px solid var(--bs-border-color); border-radius: .55rem; transition: border-color .15s, background-color .15s, opacity .15s; }
.sub-card:hover { border-color: var(--bs-primary-border-subtle); }
.sub-icon { flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; border-radius: .45rem; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: 1.05rem; }
.sub-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sub-text small { color: var(--bs-secondary-color); }
.sub-text .sub-na { display: none; color: var(--bs-warning-text-emphasis); }
.sub-state { align-self: flex-start; margin-top: .35rem; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.sub-state span { display: inline-block; padding: .1rem .45rem; border-radius: 999px; }
.sub-state .on { display: none; background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.sub-state .off { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.btn-check:checked + .sub-card { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.btn-check:checked + .sub-card .sub-icon { background: var(--bs-success); color: #fff; }
.btn-check:checked + .sub-card .on { display: inline-block; }
.btn-check:checked + .sub-card .off { display: none; }
.btn-check:focus-visible + .sub-card { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.sub-card.is-na { opacity: .55; }
.sub-card.is-na .sub-na { display: block; }
.sub-summary { padding: .45rem .65rem; border-radius: .45rem; background: var(--bs-body-bg); border: 1px dashed var(--bs-border-color); }


/* searchable drop down (select[data-search], app.js): text box + filtered list under it */
.search-select { position: relative; flex: 1 1 auto; min-width: 0; }
.search-select-menu { width: 100%; max-height: 18rem; overflow-y: auto; }
.input-group > .search-select:not(:last-child) > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .search-select:not(:first-child) > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* product list: round icon tinted by stock state */
.product-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1rem; }
.min-w-0 { min-width: 0; }

/* help assistant chat (partials/kb_chat.php) */
.kb-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 1035; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0;
    background: #2563eb; color: #fff; font-size: 1.4rem; box-shadow: 0 6px 18px rgba(37, 99, 235, .35); }
.kb-fab:hover { background: #1d4ed8; }
.kb-chat.showing ~ .kb-fab, .kb-chat.show ~ .kb-fab { display: none; }
/* room under the last row of the page so the chat button never covers its buttons */
@media (min-width: 992px) { body > main.container-fluid { padding-bottom: 4.5rem !important; } }
@media (max-width: 991.98px) { .kb-fab { bottom: calc(4.4rem + env(safe-area-inset-bottom)); width: 2.9rem; height: 2.9rem; font-size: 1.2rem; } }
.kb-chat { --bs-offcanvas-width: 400px; display: flex; flex-direction: column; }
.kb-log { background: var(--bs-tertiary-bg); display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; }
.kb-msg { max-width: 92%; padding: .55rem .75rem; border-radius: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.kb-msg.me { align-self: flex-end; background: #2563eb; color: #fff; border-bottom-right-radius: .25rem; }
.kb-msg.bot { align-self: flex-start; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-bottom-left-radius: .25rem; }
.kb-sec { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .25rem; }
.kb-q { font-weight: 600; }
.kb-a { margin-top: .2rem; }
.kb-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.kb-chip { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; text-decoration: none; text-align: left; }
.kb-chip:hover { border-color: #2563eb; color: #2563eb; }
.kb-doc { display: block; padding: .4rem .5rem; margin-top: .3rem; border-radius: .5rem; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); text-decoration: none; }
.kb-doc:hover { border-color: #2563eb; }
.kb-doc span { display: block; font-size: .78rem; color: var(--bs-secondary-color); }
.kb-msg mark { padding: 0 .1rem; border-radius: .2rem; }
@media print { .kb-fab, .kb-chat { display: none !important; } }

/* searchable multi-select (data-multi-select) */
.ms-select { position: relative; }
.ms-toggle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ms-menu { width: 100%; min-width: 16rem; }
.ms-list { max-height: 16rem; overflow-y: auto; }
.ms-item { cursor: pointer; padding: .3rem .5rem; white-space: normal; }
.font-sans { font-family: var(--bs-body-font-family); }

/* stock on hand page (/stock) */
.stk-views { display: inline-flex; padding: .25rem; gap: .25rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.stk-views a { padding: .4rem .9rem; border-radius: .55rem; color: var(--bs-secondary-color); text-decoration: none; font-weight: 500; white-space: nowrap; }
.stk-views a:hover { color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.stk-views a.active { background: var(--bs-primary); color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, .25); }
.stk-tile-icon { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .7rem; font-size: 1.25rem; flex-shrink: 0; }
.stk-tile-link { transition: transform .1s, box-shadow .1s; }
.stk-tile-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); }
.stk-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .3rem .15rem .6rem; border-radius: 999px; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: .8rem; text-decoration: none; }
.stk-chip:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.stk-pill { display: inline-block; padding: .05rem .45rem; border-radius: .4rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); font-family: var(--bs-font-monospace); font-size: .75rem; white-space: nowrap; }
.stk-loc { display: inline-block; padding: .15rem .5rem; border-radius: .45rem; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); font-family: var(--bs-font-monospace); font-weight: 600; font-size: .85rem; }
.stk-cat { display: inline-block; margin-top: .2rem; font-size: .72rem; color: var(--bs-secondary-color); }
@media (min-width: 992px) { .stk-product { min-width: 15rem; } }
.stk-doc + .stk-doc { margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--bs-border-color); }
.stk-doc { max-width: 20rem; }
.stk-lbl { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.stk-low { height: .3rem; width: 5rem; margin: .2rem 0 .1rem auto; }
.stk-scroll { max-height: 75vh; }
.stk-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg); box-shadow: inset 0 -1px 0 var(--bs-border-color); font-size: .8rem; color: var(--bs-secondary-color); }
.stock-table td { padding-top: .6rem; padding-bottom: .6rem; }
@media print { .stk-scroll { max-height: none; overflow: visible; } .stk-views, .stk-tile-link .bi-chevron-right { display: none; } }

/* KPI page (/kpi) */
.kpi-section > .card-body { padding: 1rem; }
.kpi-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.kpi-sec-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; flex-shrink: 0; }
.kpi-volume { font-size: .8rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .15rem .7rem; }
.kpi-tile { border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-border-color); box-shadow: none; transition: box-shadow .15s; }
.kpi-tile:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, .07); }
.kpi-tile.kpi-good { border-left-color: var(--bs-success); }
.kpi-tile.kpi-off { border-left-color: var(--bs-warning); }
.kpi-tile .card-body { padding: .85rem 1rem; }
.kpi-icon { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; font-size: 1.05rem; flex-shrink: 0; }
.kpi-label { font-size: .82rem; color: var(--bs-secondary-color); line-height: 1.3; padding-top: .1rem; }
.kpi-label .bi-info-circle { font-size: .75em; opacity: .6; }
.kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.kpi-bar { position: relative; height: .4rem; margin-top: .45rem; border-radius: 999px; background: var(--bs-tertiary-bg); }
.kpi-bar-fill { height: 100%; border-radius: 999px; }
.kpi-bar-target { position: absolute; top: -.2rem; width: 2px; height: .8rem; background: var(--bs-body-color); opacity: .55; border-radius: 1px; transform: translateX(-1px); }
.kpi-delta { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px; }
.kpi-target { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; }
.kpi-target.ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.kpi-target.off { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.kpi-ring-wrap { position: relative; width: 9.5rem; height: 9.5rem; }
.kpi-ring { width: 100%; height: 100%; }
.kpi-ring circle { fill: none; stroke-width: 9; }
.kpi-ring-bg { stroke: var(--bs-tertiary-bg); }
.kpi-ring-val { stroke-linecap: round; transition: stroke-dasharray .4s; }
.kpi-ring-val.stroke-success { stroke: var(--bs-success); } .kpi-ring-val.stroke-warning { stroke: var(--bs-warning); }
.kpi-ring-val.stroke-primary { stroke: var(--bs-primary); } .kpi-ring-val.stroke-danger { stroke: var(--bs-danger); }
.kpi-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-size: .75rem; font-weight: 700; margin-right: .3rem; }
.kpi-people-bar { height: .25rem; margin-top: .25rem; border-radius: 999px; background: var(--bs-tertiary-bg); max-width: 12rem; }
.kpi-people-bar span { display: block; height: 100%; border-radius: 999px; background: var(--bs-info); }

/* stock movements page (/movements) */
.mv-types { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .6rem; padding-bottom: .6rem; }
.mv-type { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .4rem .3rem .7rem; border-radius: 999px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); font-size: .85rem; text-decoration: none; }
.mv-type:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.mv-type .mv-count { min-width: 1.6rem; text-align: center; padding: 0 .4rem; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .75rem; font-weight: 600; }
.mv-type.active { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.mv-type.active .mv-count { background: rgba(255, 255, 255, .25); color: #fff; }
.mv-type.mv-success .bi { color: var(--bs-success); } .mv-type.mv-danger .bi { color: var(--bs-danger); } .mv-type.mv-info .bi { color: var(--bs-info); }
.mv-type.mv-warning .bi { color: var(--bs-warning); } .mv-type.mv-primary .bi { color: var(--bs-primary); } .mv-type.mv-secondary .bi, .mv-type.mv-dark .bi { color: var(--bs-secondary-color); }
.mv-type.active .bi { color: #fff !important; }
.mv-type.mv-zero:not(.active) { opacity: .55; }
.mv-table .mv-day td { background: var(--bs-tertiary-bg); font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color); padding-top: .35rem; padding-bottom: .35rem; }
.mv-table td { padding-top: .55rem; padding-bottom: .55rem; }
.mv-loc { display: inline-block; padding: .1rem .45rem; border-radius: .4rem; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); font-family: var(--bs-font-monospace); font-size: .78rem; font-weight: 600; }
.mv-note { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 992px) { .mv-product { min-width: 14rem; } }

/* help chat: live warehouse data card (KbData) */
.kb-card { border: 1px solid var(--bs-border-color); border-radius: .6rem; padding: .5rem .6rem; background: var(--bs-body-bg); }
.kb-card-head { display: flex; align-items: flex-start; gap: .5rem; }
.kb-card-head > .bi { font-size: 1.1rem; color: #2563eb; line-height: 1.3; }
.kb-card-title { font-weight: 700; color: var(--bs-body-color); text-decoration: none; overflow-wrap: anywhere; }
a.kb-card-title:hover { color: #2563eb; text-decoration: underline; }
.kb-card-sub { font-size: .75rem; color: var(--bs-secondary-color); }
.kb-facts { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; margin: .45rem 0 0; font-size: .8rem; }
.kb-facts dt { font-weight: 400; color: var(--bs-secondary-color); white-space: nowrap; }
.kb-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kb-table { margin-top: .45rem; max-height: 16rem; overflow: auto; border-top: 1px solid var(--bs-border-color); }
.kb-table table { width: 100%; font-size: .78rem; border-collapse: collapse; }
.kb-table th { position: sticky; top: 0; background: var(--bs-body-bg); color: var(--bs-secondary-color); font-weight: 600; text-align: left; padding: .25rem .3rem; }
.kb-table td { padding: .2rem .3rem; border-top: 1px solid var(--bs-border-color-translucent); vertical-align: top; }
.kb-table td:not(:first-child), .kb-table th { white-space: nowrap; }
.kb-table td:first-child { min-width: 8rem; }
.kb-table td:last-child, .kb-table th:last-child { text-align: right; }
.kb-card-note { margin-top: .4rem; font-size: .78rem; color: var(--bs-secondary-color); }
.kb-fixed { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }

/* receiving: lines on the right can be picked to fill the form */
.rcv-line, .pick-line, .qc-line { cursor: pointer; }
.rcv-line:focus-visible, .pick-line:focus-visible, .qc-line:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

/* staff KPI page (/staff-kpi): compact filter, month tiles, rank badges */
.skpi-date { width: 9.5rem; }
.skpi-table td { padding-top: .5rem; padding-bottom: .5rem; }
.skpi-muted td { color: var(--bs-secondary-color); }
.skpi-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bs-tertiary-bg); font-weight: 700; font-size: .8rem; }
.skpi-rank.skpi-top { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.skpi-score { min-width: 2.2rem; text-align: right; }
.skpi-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.skpi-month { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border: 1px solid var(--bs-border-color); border-left-width: 3px; border-radius: .5rem; text-decoration: none; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.skpi-month:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); }
.skpi-month.skpi-success { border-left-color: var(--bs-success); }
.skpi-month.skpi-info { border-left-color: var(--bs-info); }
.skpi-month.skpi-warning { border-left-color: var(--bs-warning); }

/* date boxes (assets/dates.js, flatpickr): look like the other inputs, calendar above modals */
.flatpickr-input.form-control[readonly], .flatpickr-input.form-select[readonly] { background-color: var(--bs-body-bg); }
.flatpickr-calendar { z-index: 1080; font-family: inherit; }

/* stock: serials typed at receipt for products that do not track serials */
.stk-refser { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem; max-width: 12rem; }

/* shipping page list: doc-list + an actions cell (ship form / buttons) */
.ship-list .doc-list-row:hover { background: transparent; }
.ship-list .c-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem .75rem; margin-top: .35rem; }
.ship-list .c-act form { flex: 1 1 18rem; max-width: 26rem; }
.ship-list .ship-links { display: flex; flex-wrap: wrap; gap: .15rem .9rem; flex-basis: 100%; justify-content: flex-end; white-space: nowrap; font-size: .8rem; }
.ship-list .c-act-head { display: none; }
.ship-list .ship-load { flex-basis: 100%; display: flex; justify-content: flex-end; }
.ship-list .ship-load > span { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; line-height: 1.4; }
.ship-list .ship-load.is-loaded > span { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success-text-emphasis); }
.ship-list .ship-load.is-waiting > span { background: rgba(var(--bs-warning-rgb), .18); color: var(--bs-warning-text-emphasis); }
@media (min-width: 992px) {
    .ship-list .doc-list-row .c-act { grid-column: 1 / -1 !important; }
}
@media (min-width: 1400px) {
    .ship-list .doc-list-head, .ship-list .doc-list-row { grid-template-columns: 12rem minmax(9rem, .8fr) minmax(0, 1fr) 8.5rem 7.5rem 5rem 6rem 27rem; }
    .ship-list .c-act-head { display: block; }
    .ship-list .doc-list-row .c-act { grid-column: auto !important; margin-top: 0; flex-direction: column; align-items: stretch; gap: .45rem; padding-left: .75rem; }
    .ship-list .c-act form { flex: 0 0 auto; max-width: none; }
    .ship-list .c-act > .btn { align-self: flex-end; }
}