: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); }

/* กระดิ่งแจ้งเตือน */
.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 laid out in a grid (label above value) */
.doc-head .doc-no { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.doc-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 40%), 1fr)); gap: .65rem 1.25rem; margin: 0; }
.doc-fields > div { min-width: 0; }
.doc-fields dt { font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); margin-bottom: .1rem; }
.doc-fields dd { margin: 0; overflow-wrap: anywhere; }
.doc-fields .wide { grid-column: 1 / -1; }

/* 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; }
@media (max-width: 575.98px) { .track-label { flex-basis: 100%; } }

/* page heading: menu group above the title (where am I) */
.page-crumb { font-size: .78rem; color: var(--bs-secondary-color); margin-bottom: .1rem; }
.page-crumb .bi-chevron-right { font-size: .65rem; }

/* 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 .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; } }
.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; }
@media (max-width: 767.98px) { .rl-grid { grid-template-columns: minmax(0, 1fr) auto; } .rl-prod { grid-column: 1 / -1; } }
/* ใบแจ้งรับ: ฟอร์มเพิ่มสินค้า — ปุ่มเพิ่มตรงกับช่องกรอก (ป้ายชื่อด้านบน), จอเล็ก = ปุ่มเต็มแถว */
.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); }