/* eConnect UI — colours measured from the design screens (Portal / Superadmin / คลัง). */
:root {
  --green-900: #014a2f;   /* sidebar */
  --green-800: #01482c;
  --green-700: #026f42;   /* active menu */
  --green-600: #015d39;   /* primary button */
  --green-100: #e2f3ea;
  --bg: #f6fbfe;          /* page */
  --card: #ffffff;
  --line: #e1e8f4;
  --line-strong: #c9d5ee;
  --blue: #1530b0;        /* titles, links */
  --ink: #1d2b5a;         /* body text */
  --muted: #6b7896;
  --thead: #ebf3fc;
  --thead-ink: #10206b;
  --red: #e02424;
  --orange: #d9620b;
  --font: "Kanit", "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
  --radius: 10px;
  --sidebar-w: 214px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-weight: 300; font-size: 14px; color: var(--ink); background: var(--bg); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
input, select, textarea, button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--green-700); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- icons ---------- */
.ic { width: 20px; height: 20px; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.xs { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex: none; background: var(--green-900); color: #fff; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; margin: 14px 14px 10px; padding: 10px 12px; background: #fff; border-radius: 8px; color: var(--blue); }
.brand:hover { text-decoration: none; }
.brand img { width: 40px; height: auto; }
.brand b { display: block; font-size: 19px; line-height: 1.05; font-weight: 600; color: #0e2c8a; }
.brand small { display: block; font-size: 17px; line-height: 1.1; font-weight: 600; color: #0e2c8a; }
.menu { display: flex; flex-direction: column; padding: 4px 0; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 11px 22px; color: #fff; font-size: 16px; font-weight: 400; }
.menu-item:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.menu-item.active { background: var(--green-700); box-shadow: inset 5px 0 0 #fff; }
.menu-item .ic { width: 24px; height: 24px; }
.menu-item .caret { margin-left: auto; width: 16px; height: 16px; }
.menu-item.soon { color: rgba(255, 255, 255, .45); cursor: default; }
.menu-item span { white-space: nowrap; }
.menu-item.soon em { display: none; }
.submenu { display: flex; flex-direction: column; background: rgba(0, 0, 0, .14); padding: 4px 0; }
.submenu a { color: rgba(255, 255, 255, .85); padding: 7px 22px 7px 60px; font-size: 14.5px; }
.submenu a.on { color: #fff; font-weight: 500; }
.submenu a.on::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9ee6bf; margin: 0 8px 2px -14px; }
.sidebar-foot { margin-top: auto; }
.sidebar-foot img { display: block; width: 100%; opacity: .85; }
.sidebar-foot p { margin: 0; padding: 10px 18px 16px; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.85); border-top: 1px solid rgba(255,255,255,.2); }
.sidebar-foot p b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: relative; height: 124px; background: #0f2031 url("../img/banner.jpg") left center / auto 100% no-repeat; display: flex; align-items: center; justify-content: flex-end; padding: 0 20px; }
.banner { display: none; }
.top-actions { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.wh-switch { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 10px; padding: 6px 10px; color: var(--green-600); }
.wh-switch select { border: 0; background: transparent; font-weight: 500; color: var(--blue); max-width: 220px; cursor: pointer; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--blue); cursor: pointer; }
.icon-btn:hover { border-color: var(--line-strong); text-decoration: none; }
.icon-btn.danger { color: var(--red); border-color: transparent; background: transparent; }
.topbar .icon-btn { width: 46px; height: 46px; border: 0; color: var(--blue); }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 7px 14px 7px 8px; cursor: pointer; color: var(--blue); font-size: 16px; font-weight: 400; }
.user-menu summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #2346d6; color: #fff; }
.user-pop { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 220px; box-shadow: 0 8px 24px rgba(16, 32, 107, .12); display: grid; gap: 8px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--red); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.menu-toggle { display: none; }

.content { padding: 18px 22px 40px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- page head ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--blue); font-size: 15px; }
.crumbs span { color: var(--blue); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.page-title { display: flex; align-items: center; gap: 16px; }
.page-icon { color: var(--green-600); }
.page-icon .ic { width: 50px; height: 50px; stroke-width: 1.8; }
.page-title h1 { font-size: 30px; font-weight: 600; color: var(--blue); line-height: 1.2; }
.page-title p { margin: 2px 0 0; color: var(--blue); font-size: 15.5px; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: center; padding: 12px 22px; border-radius: 6px; border: 1px solid var(--line-strong); background: #fff; color: var(--blue); font-size: 16.5px; font-weight: 400; }
.tab:hover { text-decoration: none; border-color: var(--blue); }
.tab.on { background: var(--green-600); border-color: var(--green-600); color: #fff; }

/* ---------- cards & forms ---------- */
.card { background: var(--card); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 1px 2px rgba(16, 32, 107, .05); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-title { font-size: 21px; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.badge-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--green-600); color: #fff; }
.badge-ic.plain { background: none; color: var(--green-600); }
.sec { font-size: 17px; font-weight: 600; color: var(--blue); margin-bottom: 10px; }
.grid { display: grid; gap: 14px 18px; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.tight { gap: 10px 16px; }
.span2 { grid-column: span 2; }
label { display: block; font-weight: 500; color: var(--blue); font-size: 14.5px; }
label > input:not([type=checkbox]):not([type=radio]), label > select, label > .field-icon, label > .range { margin-top: 6px; }
label > select + select { margin-top: 6px; }
.req { color: var(--red); font-style: normal; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 40px; padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font-weight: 300; color: var(--ink); }
input::placeholder { color: #9aa6c2; }
input:disabled, select:disabled { background: #eef2f8; color: #7c88a6; }
input[type=date] { padding: 6px 8px; }
.field-icon { position: relative; display: flex; flex-direction: row; align-items: center; }
label.field-icon > input, label.field-icon > select { margin-top: 0 !important; }
.field-icon > .ic { position: absolute; left: 12px; color: var(--blue); pointer-events: none; }
.field-icon > input:not([type=checkbox]):not([type=radio]), .field-icon > select { padding-left: 40px; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 16px 0 0; padding: 12px 16px 16px; }
legend { padding: 0 6px; font-weight: 600; color: var(--blue); font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.hint { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.check-field { display: flex; flex-direction: column; gap: 10px; font-weight: 500; color: var(--blue); font-size: 14.5px; }
.check, .radio { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 300; color: var(--ink); cursor: pointer; }
.check input, .radio input { width: 18px; height: 18px; accent-color: var(--green-600); }
.radio-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.radio-row .lbl { font-weight: 600; color: var(--blue); }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.form-foot.end { justify-content: flex-end; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field-error { color: var(--red); margin: 8px 0 0; font-size: 13.5px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 22px; border-radius: 6px; border: 1px solid transparent; font-size: 15.5px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--green-600); color: #fff; }
.btn.primary:hover { background: var(--green-800); }
.btn.outline { background: #fff; color: var(--blue); border-color: var(--line-strong); }
.btn.outline:hover { border-color: var(--blue); }
.btn.light { background: var(--green-100); color: var(--green-600); }
.btn.sm { min-height: 34px; padding: 5px 14px; font-size: 14px; }
.btn.block { width: 100%; }

/* ---------- alerts ---------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; font-weight: 400; line-height: 1.6; }
.alert.success { background: #e3f6ec; color: #075e35; }
.alert.error { background: #fdecec; color: #a11616; }
.alert.warn { background: #fff4e0; color: #7a4b00; }
.alert.info { background: #e8f0fe; color: #1d3fbf; }
.alert ul { margin: 4px 0 0; padding-left: 18px; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th { background: var(--thead); color: var(--thead-ink); font-weight: 400; font-size: 13.5px; padding: 11px 10px; text-align: left; white-space: nowrap; }
.table td { padding: 10px; border-bottom: 1px solid var(--line); color: var(--blue); vertical-align: middle; }
.table tbody tr:hover td { background: #f8fbff; }
.table tr.hl td { background: #f1fbf5; }
.table tr.sub > td { background: #f8fbff; padding: 8px 18px 14px; }
.table.compact th, .table.compact td { padding: 7px 8px; font-size: 13.5px; }
.table .num { text-align: right; }
.table .w1 { width: 1%; white-space: nowrap; }
.table .empty, p.empty { text-align: center; color: var(--muted); padding: 26px; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: 6px; font-size: 13px; font-weight: 400; white-space: nowrap; }
.pill.green { background: #dcf5e6; color: #08703d; }
.pill.blue { background: #e0ecfd; color: #1b4fc4; }
.pill.yellow { background: #fdf2cc; color: #8a5a00; }
.pill.orange { background: #fde6d4; color: var(--orange); }
.pill.purple { background: #ede4fd; color: #6a2ccc; }
.pill.red { background: #fde2e2; color: #b81c1c; }
.pill.gray { background: #eceff5; color: #5b6784; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot.green { background: #13a35a; }
.dot.red { background: var(--red); }
.progress { width: 110px; height: 8px; border-radius: 99px; background: #e4e9f3; overflow: hidden; }
.progress span { display: block; height: 100%; background: #2a63e6; border-radius: 99px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.pages { display: flex; gap: 6px; }
.pages a { display: grid; place-items: center; min-width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pages a.on { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filters .grow, .grow { flex: 1; min-width: 220px; }
.range { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.search { display: flex; gap: 8px; }
.search .field-icon { width: 340px; max-width: 100%; }

/* ---------- receiving ---------- */
.add-line { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.qty-field { width: 130px; }
.receipt-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 22px; margin: 0; flex: 1; }
.kv dt { color: var(--muted); font-size: 12.5px; }
.kv dd { margin: 2px 0 0; color: var(--blue); font-weight: 400; }
.kv.small { background: #f3f6fb; border-radius: 8px; padding: 12px 14px; }
.over-po { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: #f3f6fb; flex-wrap: wrap; max-width: 560px; color: var(--blue); }
.over-po.on { background: #fff4e5; color: #8a4b00; }
.unlock-form { display: flex; gap: 8px; width: 100%; }
.stamp-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.stamp-bar label { width: 230px; }
.item { padding: 0; overflow: hidden; }
.item-head { display: flex; justify-content: space-between; background: #0b7bbd; color: #fff; padding: 12px 20px; font-weight: 500; font-size: 15.5px; gap: 12px; }
.item > .kv, .item > .entries, .item > .item-foot { margin: 14px 20px; }
.entry { display: grid; grid-template-columns: 110px 150px 1.1fr 150px 150px 120px 1.3fr 1fr 36px; gap: 10px; align-items: end; padding: 10px 0; border-top: 1px dashed var(--line); }
.entry:first-child { border-top: 0; }
.entry label { font-size: 13px; }
.entry label select + select { margin-top: 6px; }
.item-foot { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.item-foot .inline { width: 200px; }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select { min-width: 130px; }
.w-qty { width: 90px !important; }

/* ---------- login ---------- */
body.blank { background: #fff; }
/* คลัง / Portal / ผลิต login = eConnect_WMS_Login and eConnect_Portal_Login used the same way as the Super Admin stage
   below (picture = mockup, elements on measured coordinates). Values are WMS; Portal overrides follow. */
.login-stage.ls { background-image: url("../img/login-stage-wms.jpg"); }
.login-stage.ls[data-system=portal] { background-image: url("../img/login-stage-portal.jpg"); }
.ls .st-card { left: calc(1097 * var(--u)); top: calc(150 * var(--u)); width: calc(491 * var(--u)); height: calc(662 * var(--u)); border-radius: calc(16 * var(--u)); }
.ls .hero-portal, .ls .logo-portal, .ls[data-system=portal] .hero-wms, .ls[data-system=portal] .logo-wms { display: none !important; }
.ls[data-system=portal] .logo-portal { display: block !important; }
.ls-logo { left: calc(79 * var(--u)); top: calc(26 * var(--u)); width: calc(332 * var(--u)); height: calc(90 * var(--u)); max-width: none; }
.ls-tag { left: 0; right: 0; top: calc(124.5 * var(--u)); text-align: center; font-size: calc(21 * var(--u)); line-height: calc(28 * var(--u)); font-weight: 500; color: #0b1650; white-space: nowrap; }
.ls-line { left: calc(214 * var(--u)); top: calc(170 * var(--u)); width: calc(64 * var(--u)); height: calc(3 * var(--u)); border-radius: 2px; background: #1b8b58; }
.ls-sys { left: calc(30 * var(--u)); top: calc(202 * var(--u)); width: calc(431 * var(--u)); height: calc(58 * var(--u)); display: block; font-size: inherit; }
.login-stage label.ls-sys > select { width: 100%; height: 100%; margin: 0; padding: 0 calc(48 * var(--u)) 0 calc(82 * var(--u)); border: 0; border-radius: calc(8 * var(--u));
  background: #e4f1ee; font: inherit; font-size: calc(22 * var(--u)); font-weight: 500; color: #0b4a2c; appearance: none; cursor: pointer; }
.login-stage label.ls-sys > select:focus { outline: none; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(14, 139, 94, .2); }
.ls-sys > .ic { position: absolute; left: calc(17 * var(--u)); top: calc(9 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); color: #0b6a3e; pointer-events: none; display: none; }
.ls[data-system=wms] .sys-wms, .ls[data-system=portal] .sys-portal, .ls[data-system=production] .sys-production { display: block; }
.ls-sys > .ls-chev { display: block; left: auto; right: calc(15 * var(--u)); top: calc(15 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); color: #0b4a2c; }
.ls .st-in { left: calc(30 * var(--u)); width: calc(431 * var(--u)); height: calc(58 * var(--u)); }
.ls .st-user { top: calc(275 * var(--u)); }
.ls .st-pass { top: calc(344 * var(--u)); }
.login-stage.ls label.st-in > input { padding-left: calc(64 * var(--u)); border-color: #d6dcef; background: #f9f9fc; font-size: calc(18 * var(--u)); }
.ls .st-in > .ic { left: calc(16.6 * var(--u)); top: calc(14 * var(--u)); color: #0a1d4a; }
.ls .st-eye { right: calc(16.5 * var(--u)); top: calc(14 * var(--u)); }
.ls .st-remember { left: calc(30 * var(--u)); top: calc(418 * var(--u)); height: calc(25 * var(--u)); gap: calc(14 * var(--u)); color: #0b1650; }
.ls .st-remember input { width: calc(25 * var(--u)); height: calc(25 * var(--u)); border-color: #46506a; border-radius: calc(3 * var(--u)); }
.ls .st-forgot { right: calc(33 * var(--u)); top: calc(417 * var(--u)); color: #1a6ee8; font-size: calc(17.5 * var(--u)); }
.ls .st-btn { left: calc(31 * var(--u)); top: calc(459 * var(--u)); width: calc(429 * var(--u)); height: calc(59 * var(--u)); border-radius: calc(6 * var(--u)); background: #01814d; font-size: calc(22 * var(--u)); }
.ls .st-btn:hover { background: #016e41; }
.ls .st-or { left: calc(30 * var(--u)); right: calc(30 * var(--u)); top: calc(537.5 * var(--u)); color: #8a93a8; font-size: calc(16 * var(--u)); }
.ls-links { left: calc(30 * var(--u)); width: calc(431 * var(--u)); top: calc(603.5 * var(--u)); height: calc(26 * var(--u)); display: flex; justify-content: space-between; padding: 0; list-style: none;
  font-size: calc(14.5 * var(--u)); font-weight: 500; color: #0a1858; white-space: nowrap; }
.ls-links li { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ls-links .ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.ls-links a { display: flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.ls-links a:hover { text-decoration: underline; }
.ls-msg { left: calc(30 * var(--u)); right: calc(30 * var(--u)); top: calc(534 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(8 * var(--u));
  font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); text-align: center; }
.ls-msg.err { background: #fdecec; color: #b42318; font-weight: 500; }
.ls-msg.note { background: #eaf2ff; color: #1a4fb0; }
.ls-card.has-msg .st-or, .ls-card.has-msg .ls-links { display: none; }
.st-lang.navy { left: calc(1506 * var(--u)); top: calc(22 * var(--u)); width: calc(132 * var(--u)); height: calc(48 * var(--u)); justify-content: center; gap: calc(12 * var(--u)); padding: 0;
  border-radius: calc(24 * var(--u)); background: #042759; color: #fff; font-size: calc(24 * var(--u)); }
.st-lang .flag { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.ls-foot { position: absolute; left: 0; top: calc(884 * var(--u)); height: calc(36 * var(--u)); width: calc(1672 * var(--u)); font-size: calc(13 * var(--u)); color: #4357a7; }
.ls-foot > * { position: absolute; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; }
.ls-copy { left: calc(304 * var(--u)); }
.ls-nav { left: calc(1222 * var(--u)); gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); color: #4557aa; }
.ls-nav::before { content: ""; width: calc(34 * var(--u)); height: 2px; margin-right: calc(2 * var(--u)); background: #1b8b58; }
.ls-nav i { font-style: normal; }
.ls .foot-th, .ls[data-system=portal] .foot-en { display: none; }
.ls[data-system=portal] .foot-th { display: flex; }
/* Portal (eConnect_Portal_Login) */
.ls[data-system=portal] .st-card { left: calc(1099 * var(--u)); top: calc(142 * var(--u)); width: calc(497 * var(--u)); }
.ls[data-system=portal] .ls-logo { left: calc(75 * var(--u)); top: calc(28 * var(--u)); width: calc(356 * var(--u)); height: calc(96 * var(--u)); }
.ls[data-system=portal] .ls-line { left: calc(216 * var(--u)); top: calc(134 * var(--u)); background: #248757; }
.ls[data-system=portal] .ls-tag { top: calc(142 * var(--u)); }
.ls[data-system=portal] .ls-sys { left: calc(27 * var(--u)); width: calc(443 * var(--u)); height: calc(61 * var(--u)); }
.ls[data-system=portal] label.ls-sys > select { padding-left: calc(81 * var(--u)); background: #e6f1f1; font-size: calc(25 * var(--u)); color: #00544c; }
.ls[data-system=portal] .ls-sys > .ic { left: calc(12 * var(--u)); top: calc(10 * var(--u)); color: #0b5e55; }
.ls[data-system=portal] .ls-chev { display: none; }
.ls[data-system=portal] .st-in { left: calc(26 * var(--u)); width: calc(443 * var(--u)); height: calc(59 * var(--u)); }
.ls[data-system=portal] .st-user { top: calc(278 * var(--u)); }
.ls[data-system=portal] .st-pass { top: calc(353 * var(--u)); }
.login-stage.ls[data-system=portal] label.st-in > input { border-color: #d7dff2; background: #f8fafe; }
.ls[data-system=portal] .st-eye { right: calc(14.5 * var(--u)); }
.ls[data-system=portal] .st-remember { left: calc(27 * var(--u)); top: calc(429 * var(--u)); }
.ls[data-system=portal] .st-forgot { right: calc(29 * var(--u)); top: calc(427.5 * var(--u)); }
.ls[data-system=portal] .st-btn { left: calc(27 * var(--u)); top: calc(470 * var(--u)); width: calc(443 * var(--u)); background: #017b49; }
.ls[data-system=portal] .st-or { left: calc(28 * var(--u)); right: calc(28 * var(--u)); top: calc(546.5 * var(--u)); }
/* หน้าเข้าสู่ระบบผู้ใช้บริการแบบเดียวทุกระบบ (ไม่มีช่องเลือกระบบ ทีมแจ้ง 20/10/2026): โลโก้ลงมา ช่องกรอกขึ้นไปแทนที่ช่องเลือกระบบเดิม */
.ls-one .ls-logo { top: calc(60 * var(--u)); mix-blend-mode: multiply; }
.ls-one .ls-tag { top: calc(158.5 * var(--u)); }
.ls-one .ls-line { top: calc(204 * var(--u)); }
.ls-one .st-user { top: calc(240 * var(--u)); }
.ls-one .st-pass { top: calc(309 * var(--u)); }
.ls-one .st-remember { top: calc(383 * var(--u)); }
.ls-one .st-forgot { top: calc(382 * var(--u)); }
.ls-one .st-btn { top: calc(424 * var(--u)); }
.ls-one .st-or { top: calc(520 * var(--u)); }
.ls-one .ls-msg { top: calc(502 * var(--u)); }
.ls[data-system=portal] .ls-links { left: calc(28 * var(--u)); width: calc(440 * var(--u)); top: calc(599.5 * var(--u)); color: #0c1862; }
.ls[data-system=portal] .ls-msg { top: calc(543 * var(--u)); }
.ls[data-system=portal] .st-lang.navy { left: calc(1521 * var(--u)); top: calc(18 * var(--u)); width: calc(123 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(22 * var(--u)); background: #03356f; font-size: calc(22 * var(--u)); }
.ls[data-system=portal] .st-lang .flag { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.ls[data-system=portal] .ls-foot { top: calc(876 * var(--u)); }
.ls[data-system=portal] .ls-copy { left: calc(317 * var(--u)); color: #4c5c9c; }
.ls[data-system=portal] .ls-nav { left: calc(1215 * var(--u)); color: #0c1b6b; }

/* Super Admin = eConnect_Super_Login_2 as a "stage": the picture is the mockup and each element is placed on the
   coordinate measured from it. 1 unit (--u) = 1 mockup pixel; the stage fits the screen height (or width). */
.login-stage { --u: min(calc(100vh / 941), calc(100vw / 1672)); --ink: #0c1844; position: relative; min-height: 100vh; overflow: hidden;
  background: #f0f5f6 no-repeat left top / auto calc(941 * var(--u)); color: var(--ink); font-weight: 400; }
.login-stage :where(*) { box-sizing: border-box; }
.stage-hero { display: none; }
.st-card, .st-lang, .st-foot { position: absolute; }
.st-card { left: calc(1098 * var(--u)); top: calc(134 * var(--u)); width: calc(540 * var(--u)); height: calc(712 * var(--u)); margin: 0;
  background: #fff; border-radius: calc(18 * var(--u)); }
.st-card > * { position: absolute; margin: 0; }
.st-crown { left: calc(214 * var(--u)); top: calc(-26 * var(--u)); width: calc(96 * var(--u)); height: calc(96 * var(--u)); display: grid; place-items: center;
  border: calc(4 * var(--u)) solid #fff; border-radius: 50%; background: #0e8b5e; color: #fff; }
.st-crown .ic { width: calc(56 * var(--u)); height: calc(56 * var(--u)); margin-top: calc(3 * var(--u)); }
.st-word { left: calc(150 * var(--u)); top: calc(72 * var(--u)); width: calc(242 * var(--u)); height: calc(72 * var(--u)); max-width: none; }
.st-title { left: 0; right: 0; top: calc(162 * var(--u)); text-align: center; font-size: calc(31 * var(--u)); line-height: calc(40 * var(--u)); font-weight: 600; color: var(--ink); white-space: nowrap; }
.st-title b { font-weight: 600; color: #0b7d4e; }
.st-sub { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(212 * var(--u)); text-align: center; font-size: calc(19 * var(--u)); line-height: calc(26 * var(--u)); color: #1d3157; }
.st-sub.err { color: #c62828; font-size: calc(16 * var(--u)); font-weight: 500; }
.st-sub.note { color: #1b6df5; font-size: calc(16 * var(--u)); }
.st-in { left: calc(31 * var(--u)); width: calc(478 * var(--u)); height: calc(61 * var(--u)); display: block; color: inherit; font-size: inherit; font-weight: 400; }
.st-user { top: calc(268 * var(--u)); }
.st-pass { top: calc(344 * var(--u)); }
.login-stage label.st-in > input { width: 100%; height: 100%; margin: 0; padding: 0 calc(56 * var(--u)) 0 calc(66 * var(--u)); border: 1px solid #e1e7f1; border-radius: calc(8 * var(--u));
  background: #f9fbfe; font: inherit; font-size: calc(19.4 * var(--u)); font-weight: 400; color: var(--ink); }
.login-stage .st-in > input::placeholder { color: #8e98b2; opacity: 1; }
/* keep the design's fill when the browser autofills a saved login */
.login-stage .st-in > input:-webkit-autofill, .login .lf > input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #f9fbfe inset; -webkit-text-fill-color: var(--ink, #1b2836); caret-color: currentColor; }
.login-stage .st-in > input:focus { outline: none; border-color: #0e8b5e; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(14, 139, 94, .14); background: #fff; }
.st-in > .ic { position: absolute; left: calc(18.5 * var(--u)); top: calc(15.5 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: #082445; pointer-events: none; }
.st-eye { position: absolute; right: calc(18.5 * var(--u)); top: calc(15.5 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); padding: 0; border: 0; background: none; color: #0a1640; cursor: pointer; }
.st-eye .ic { width: 100%; height: 100%; }
.st-remember { left: calc(32 * var(--u)); top: calc(427 * var(--u)); display: flex; align-items: center; gap: calc(13 * var(--u)); height: calc(24 * var(--u));
  font-size: calc(16 * var(--u)); font-weight: 500; color: var(--ink); cursor: pointer; }
.st-remember input { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: 0; appearance: none; border: calc(1.5 * var(--u)) solid #6aa79f; border-radius: calc(4 * var(--u)); background: #fff; cursor: pointer; }
.st-remember input:checked { background: #0e8b5e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; border-color: #0e8b5e; }
.st-forgot { right: calc(33 * var(--u)); top: calc(426 * var(--u)); height: calc(26 * var(--u)); padding: 0; border: 0; background: none; font: inherit; font-size: calc(16 * var(--u)); font-weight: 500; color: #1b6df5; cursor: pointer; }
.st-btn { left: calc(32 * var(--u)); top: calc(472 * var(--u)); width: calc(476 * var(--u)); height: calc(59 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  border: 0; border-radius: calc(8 * var(--u)); background: #0b8c5f; color: #fff; font: inherit; font-size: calc(23 * var(--u)); font-weight: 500; cursor: pointer; }
.st-btn:hover { background: #097a52; }
.st-btn .ic { width: calc(25 * var(--u)); height: calc(25 * var(--u)); stroke-width: 2.6; }
.st-or { left: calc(32 * var(--u)); right: calc(32 * var(--u)); top: calc(555 * var(--u)); height: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u));
  font-size: calc(15.5 * var(--u)); color: #2d4064; white-space: nowrap; }
.st-or::before, .st-or::after { content: ""; flex: 1; height: 1px; background: #dfe4ef; }
.st-feats { left: calc(32 * var(--u)); width: calc(476 * var(--u)); top: calc(591 * var(--u)); height: calc(92 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); padding: 0; list-style: none; }
.st-feats li { position: relative; display: flex; flex-direction: column; align-items: center; }
.st-feats li + li::before { content: ""; position: absolute; left: 0; top: calc(4 * var(--u)); bottom: calc(4 * var(--u)); width: 1px; background: #eef1f5; }
.st-feats .ic { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-top: calc(6 * var(--u)); color: #0d6b55; }
.st-feats span { margin-top: calc(12 * var(--u)); font-size: calc(16.7 * var(--u)); line-height: calc(24 * var(--u)); color: #2a3d61; white-space: nowrap; }
.st-lang { left: calc(1523 * var(--u)); top: calc(33 * var(--u)); width: calc(120 * var(--u)); height: calc(50 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
  border-radius: calc(10 * var(--u)); background: #fff; color: #0c1846; font-size: calc(19 * var(--u)); font-weight: 500; cursor: default; }
.st-lang .ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.st-foot { left: calc(1102 * var(--u)); top: calc(884 * var(--u)); display: flex; align-items: center; height: calc(22 * var(--u)); font-size: calc(13 * var(--u)); color: #4a5872; white-space: nowrap; }
.st-foot i { margin: 0 calc(27 * var(--u)) 0 calc(33 * var(--u)); font-style: normal; color: #a6afba; }
/* tablets and phones: picture on top, card below (the 1:1 stage would be too small to read) */
@media (max-width: 1040px) {
  .login-stage, .login-stage.ls, .login-stage.ls[data-system] { --u: 1px; background: #f0f5f6 !important; display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
  .stage-hero { display: block; width: 100%; }
  .login-stage .st-lang { position: relative; left: auto !important; top: auto !important; order: -1; align-self: flex-end; margin: 12px 16px -62px 0; z-index: 1; }
  .login-stage .st-card { position: relative; left: auto !important; top: auto !important; width: min(540px, calc(100% - 32px)) !important; height: auto !important; margin-top: 40px; padding: 26px 24px;
    display: grid; grid-template-columns: 1fr auto; gap: 14px 10px; box-shadow: 0 10px 34px rgba(12, 24, 68, .14); }
  .login-stage .st-card > * { position: relative; left: auto !important; right: auto !important; top: auto !important; grid-column: 1 / -1; }
  .login-stage .st-card > .st-in, .login-stage .st-card > .ls-sys, .login-stage .st-card > .st-btn, .login-stage .st-card > .st-feats, .login-stage .st-card > .ls-links { width: 100% !important; }
  .st-crown { justify-self: center; margin-top: -52px !important; }
  .st-word, .ls-logo, .ls-line { justify-self: center; }
  .ls-logo { width: min(332px, 100%) !important; height: auto !important; }
  .st-title { font-size: 26px; white-space: normal; }
  .ls-tag { white-space: normal; }
  .st-remember { grid-column: 1 !important; }
  .st-forgot { grid-column: 2 !important; }
  .ls-links { flex-wrap: wrap; justify-content: center; gap: 10px 16px; height: auto !important; }
  .st-foot, .ls-foot { position: static; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 18px; white-space: normal; height: auto; width: auto !important; text-align: center; }
  .ls-foot > * { position: static; justify-content: center; flex-wrap: wrap; white-space: normal; }
}
/* ---------- shell as in the team's screens (eConnect_Super_* / คลัง: 88px banner bar, white logo box, bell, user box, TH) ---------- */
.topbar { height: 88px; padding: 0 7px 0 20px; background: #00193c url("../img/banner-top.jpg") left top / auto 100% no-repeat; }
/* narrower screens: the team's 1536px screens show the banner without the SMART WAREHOUSE block (the bell would cover it) */
@media (max-width: 1700px) {
  .topbar { background-image: linear-gradient(to right, rgba(0, 25, 60, 0) 760px, #00193c 859px), url("../img/banner-top-short.jpg");
    background-size: 100% 100%, auto 100%; background-repeat: no-repeat; background-position: left top; }
}
.top-actions { gap: 13px; }
.topbar .icon-btn.bell { width: 51px; height: 54px; border-radius: 6px; color: #1d4ed8; }
.topbar .icon-btn.bell .ic { width: 28px; height: 28px; }
.user-menu summary { height: 54px; min-width: 197px; border-radius: 6px; padding: 0 16px; gap: 11px; font-size: 18px; font-weight: 500; color: #1a3fe0; }
.user-menu summary > .ic.sm { margin-left: auto; width: 20px; height: 20px; stroke-width: 2.6; }
.avatar { width: 28px; height: 28px; background: none; color: #1a3fe0; }
.avatar .ic { width: 28px; height: 28px; }
.top-lang { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 5px; border-radius: 20px; background: rgba(255, 255, 255, .07); color: #fff; font-size: 18px; font-weight: 600; }
.top-lang .flag { width: 30px; height: 30px; }
.brand.full { justify-content: center; height: 68px; margin: 10px 6px 11px 17px; padding: 3px 5px; }
.brand.full img { width: 182px; max-width: 100%; height: auto; }
.menu-item { font-size: 17px; gap: 18px; padding: 12px 18px; }
.menu-item .ic { width: 28px; height: 28px; }
.menu-item .caret { width: 18px; height: 18px; stroke-width: 2.6; transition: transform .15s; }
.menu-item.group.open .caret { transform: rotate(180deg); }
.sidebar-foot p { border-top: 0; font-size: 12.5px; }
.foot-logo { display: flex !important; align-items: center; gap: 8px; font-size: 19px !important; font-weight: 500; margin-bottom: 8px !important; }
.foot-logo i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #012c1e; font-style: normal; font-weight: 700; font-size: 20px; line-height: 1; }
.page-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; color: #3d4a6b; font-size: 14px; }
.content { flex: 1; }

/* Super Admin (eConnect_Super_Dashboard / จัดการสิทธิ์_1 / สร้างผู้ใช้งาน, measured at 1619 × 971) */
body.sys-superadmin { --bg: #eef8fd; background: var(--bg); }
.sys-superadmin .sidebar { background: #012c1e; }
.sys-superadmin .menu-item { min-height: 66px; padding: 0 14px 0 18px; gap: 22px; font-size: 19px; }
.sys-superadmin .menu-item .ic { width: 35px; height: 35px; }
.sys-superadmin .menu-item .caret { width: 18px; height: 18px; }
.sys-superadmin .menu-item.active { background: #005344; box-shadow: none; }
.sys-superadmin .menu-item.group.open { min-height: 60px; background: #0a3a2c; }
.sys-superadmin .submenu { background: none; padding: 0 0 6px; }
.sys-superadmin .submenu a { position: relative; padding: 9px 14px 9px 62px; font-size: 17px; color: #fff; font-weight: 400; }
.sys-superadmin .submenu a::before, .sys-superadmin .submenu a.on::before { content: ""; position: absolute; left: 35px; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0; border-radius: 50%; background: #fff; }
.sys-superadmin .submenu a.on { background: #084132; }
.sys-superadmin .submenu a:hover { text-decoration: none; background: rgba(255, 255, 255, .06); }
.sys-superadmin .sidebar-foot p { font-size: 14px; }
.sys-superadmin .content { padding: 16px 16px 14px; gap: 13px; }

.crumbs.sa { gap: 12px; font-size: 17px; }
.crumbs.sa .crumb-home { width: 21px; height: 21px; color: #1530d8; }
.crumbs.sa a { color: #1530d8; }
.crumbs.sa span { color: #1d2433; }
.crumbs.sa .ic.sm { color: #1d2433; stroke-width: 2.4; }
.page-head.sa { align-items: flex-start; }
.page-head.sa .page-icon { display: grid; place-items: center; width: 76px; height: 70px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(20, 40, 90, .08); color: #0d5c3f; }
.page-head.sa .page-icon .ic { width: 44px; height: 44px; }
.page-head.sa h1 { font-size: 32px; font-weight: 600; color: #0d1526; }
.page-head.sa h1 em { font-style: normal; color: #0f7a4c; }
.page-head.sa .page-title p { margin-top: 4px; font-size: 17px; color: #1530d8; }
.head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.btn.blue { background: #1d4ed8; color: #fff; min-height: 44px; padding: 0 22px; font-size: 17px; }
.btn.blue:hover { background: #1740b3; }
.btn.back { min-height: 54px; min-width: 195px; font-size: 18px; border-color: #1d4ed8; color: #1530d8; }
.date-pill { display: flex; align-items: center; gap: 22px; height: 55px; min-width: 324px; padding: 0 22px; border: 1px solid #c6d6f5; border-radius: 6px; background: #fff; color: #0d1b3d; font-size: 18px; }
.date-pill > .ic:first-child { width: 24px; height: 24px; color: #1d4ed8; }
.date-pill > .ic.sm { margin-left: auto; color: #1d4ed8; stroke-width: 2.6; }
.sa-search { display: flex; gap: 12px; justify-content: flex-end; }
.sa-search .field-icon { width: 305px; }
.sa-search input, .sa-search select { height: 44px; margin: 0; }
.sa-search select { width: 153px; }
.sa-search .btn { min-height: 44px; min-width: 150px; font-size: 17px; }
.sa-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-tabs a { display: grid; place-items: center; min-width: 233px; height: 46px; padding: 0 18px; border-radius: 6px; background: #e1e9f6; color: #0d1b3d; font-size: 18px; }
.sa-tabs a:hover { text-decoration: none; background: #d4dff0; }
.sa-tabs a.on { background: #0b6b3f; color: #fff; }

.sa-card { padding: 16px 16px 14px; }
.sa-title { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: #1530d8; }
.sa-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.sa-head .sa-title { margin: 0; }
.sa-head > a:not(.btn) { font-size: 15px; color: #1530d8; }
.sa-table th { background: #eef3fb; color: #0d1b3d; font-size: 15.5px; font-weight: 500; }
.sa-table td { color: #0d1b3d; font-size: 15.5px; padding: 7px 10px; }
.table .center, .sa-table th.center { text-align: center; }

.sa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sa-kpi { display: flex; gap: 16px; min-height: 150px; padding: 16px; border: 1px solid; border-radius: 10px; }
.sa-kpi > div { flex: 1; min-width: 0; }
.sa-kpi.blue { background: #eaf3fd; border-color: #d6e6fb; }
.sa-kpi.green { background: #eaf8f1; border-color: #d3eedf; }
.sa-kpi.sky { background: #e9f1fd; border-color: #d5e3f8; }
.sa-kpi.purple { background: #f3ecfd; border-color: #e5d8fa; }
.kpi-ic { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; }
.kpi-ic .ic { width: 40px; height: 40px; }
.blue .kpi-ic, .sky .kpi-ic { background: #d4e5fb; color: #0a5bea; }
.green .kpi-ic { background: #c9ecd9; color: #0d6b45; }
.purple .kpi-ic { background: #e6d6fb; color: #8b3fd9; }
.sa-kpi h3 { margin-top: 10px; font-size: 17px; font-weight: 500; color: #1530d8; }
.sa-kpi.purple h3, .sa-kpi.purple .kpi-num { color: #8b3fd9; }
.kpi-num { margin: 6px 0 0; font-size: 36px; font-weight: 600; line-height: 1.1; color: #0d1b3d; }
.kpi-num small { font-size: 15px; font-weight: 400; color: #3d4a6b; }
.kpi-sub { display: flex; flex-direction: column; align-items: flex-end; margin: 4px 0 0; }
.kpi-sub b { font-size: 17px; font-weight: 600; color: #0d1b3d; }
.kpi-sub b.up { color: #127a3c; }
.kpi-sub span { font-size: 14px; color: #4b5875; }

.sa-row3 { display: grid; grid-template-columns: minmax(0, 455fr) minmax(0, 536fr) minmax(0, 354fr); gap: 13px; }
.sa-row2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 13px; }
.donut-wrap { display: flex; align-items: center; gap: 24px; padding: 4px 8px; }
.donut { flex: none; width: 178px; height: 178px; }
.donut-num { font-size: 30px; font-weight: 600; fill: #0d1b3d; }
.donut-lbl { font-size: 15px; fill: #0d1b3d; }
.legend { display: grid; flex: 1; gap: 18px; margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; font-size: 16px; color: #0d1b3d; }
.legend i { width: 16px; height: 16px; border-radius: 50%; }
.legend b { font-weight: 400; }
.legend.inline { display: flex; gap: 18px; margin-bottom: 2px; }
.legend.inline li { display: flex; gap: 8px; font-size: 15px; }
.legend.inline i { width: 14px; height: 14px; border-radius: 3px; }
.bars { display: block; width: 100%; height: auto; }
.bars .grid-line { stroke: #e3e9f3; }
.bars .axis { font-size: 13px; fill: #3d4a6b; }
.sys-ok { display: flex; align-items: center; gap: 18px; padding: 8px 26px 16px; }
.sys-ok .ic { width: 66px; height: 66px; color: #0d6b45; }
.sys-ok b { display: block; font-size: 21px; font-weight: 600; color: #0d6b45; }
.sys-ok span { font-size: 15px; color: #3d4a6b; }
.sys-table { width: 100%; border-collapse: collapse; border: 1px solid #e3e9f3; }
.sys-table td { padding: 11px 14px; border-bottom: 1px solid #e3e9f3; font-size: 16px; color: #0d1b3d; }
.sys-table td:first-child { display: flex; align-items: center; gap: 18px; border-right: 1px solid #e3e9f3; }
.sys-table .ic { width: 26px; height: 26px; color: #0d4d33; }
.dot.gray { background: #9aa4b8; }

.sa-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 13px; align-items: start; }
.sa-split.wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sa-side { display: grid; gap: 13px; }
.sa-table.users tbody tr { cursor: pointer; }
.sa-table tr.sel td { background: #eef4ff; }
.row-link { color: inherit; }
.act { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.act:hover { background: #eef3fb; }
.act .ic { width: 20px; height: 20px; }
.act.edit { color: #1d4ed8; }
.act.del { color: #e02424; }
.txt-green { color: #0d8a4a; }
.txt-red { color: #e02424; }
.bulk-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border-radius: 6px; background: #eef4ff; color: #0d1b3d; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pager .per { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #0d1b3d; }
.pager .per select { width: 80px; height: 40px; }
.pages { display: flex; gap: 6px; }
.pg { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid #d5ddeb; border-radius: 4px; background: #fff; color: #0d1b3d; font-size: 16px; }
.pg:hover { text-decoration: none; border-color: #1d4ed8; }
.pg.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.pg.off { pointer-events: none; opacity: .4; }
.profile { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; }
.avatar-lg { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: #dce8fb; color: #1d4ed8; }
.avatar-lg .ic { width: 46px; height: 46px; }
.profile h3 { font-size: 24px; font-weight: 600; color: #0d1b3d; }
.profile p { display: flex; align-items: center; margin: 4px 0 0; font-size: 18px; }
.profile-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin: 0; }
.profile-kv > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; font-size: 15px; }
.profile-kv dt { color: #3d4a6b; }
.profile-kv dd { margin: 0; color: #0d1b3d; overflow-wrap: anywhere; }
.sys-right { margin-bottom: 10px; border: 1px solid; border-radius: 6px; }
.sys-right summary { display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 17px; color: #0d1b3d; }
.sys-right summary::-webkit-details-marker { display: none; }
.sys-right summary > .ic:not(.chev) { width: 30px; height: 30px; }
.sys-right summary b { font-weight: 500; }
.sys-right summary em { margin-left: auto; font-style: normal; font-size: 16px; }
.sys-right .chev { width: 20px; height: 20px; stroke-width: 2.4; transition: transform .15s; }
.sys-right[open] .chev { transform: rotate(180deg); }
.sys-right ul { columns: 2; margin: 0; padding: 2px 14px 12px 58px; font-size: 14.5px; color: #3d4a6b; }
.sys-right > p { margin: 0; padding: 0 14px 12px 58px; font-size: 14.5px; }
.sys-right.wms { background: #eaf7ef; border-color: #c9e8d5; }
.sys-right.wms summary > .ic { color: #0d6b45; }
.sys-right.production { background: #f3ebfd; border-color: #e2d3f8; }
.sys-right.production summary > .ic { color: #8b3fd9; }
.sys-right.portal { background: #eaf1fd; border-color: #d3e1f8; }
.sys-right.portal summary > .ic { color: #1d4ed8; }
.sys-right.admin { background: #eef3f2; border-color: #d6e2dd; }
.sys-right.admin summary > .ic { color: #0d5c3f; }
.sys-right.none { opacity: .7; }
.sys-right summary input { width: 20px; height: 20px; accent-color: #0b6b3f; }
.pill.ok { background: #d4f0e0; color: #0d6b45; }
.pill.off { background: #e6e9ef; color: #5d6880; }
.pill.sys.wms { background: #d9f0e2; color: #0d6b45; }
.pill.sys.production { background: #ece0fb; color: #7a33c4; }
.pill.sys.portal { background: #dde8fb; color: #1d4ed8; }
.sa-table.hist td, .sa-table.hist th { padding: 6px 10px; font-size: 14.5px; }
.perm-set { margin: 14px 0 0; padding: 10px 14px 14px; border: 1px solid #e3e9f3; border-radius: 8px; }
.perm-set legend { padding: 0 6px; font-size: 16px; font-weight: 600; color: #1530d8; }

/* สร้างผู้ใช้งาน wizard */
.wz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 14px 70px; list-style: none; background: #fff; border-radius: 10px; }
.wz-steps li { position: relative; display: flex; align-items: center; gap: 16px; }
.wz-steps li + li::before { content: ""; position: absolute; right: calc(100% + 30px); top: 50%; width: 30%; height: 2px; background: #c9d4e8; }
.wz-steps li + li::after { content: ""; position: absolute; right: calc(100% + 30px); top: calc(50% - 4px); width: 8px; height: 8px; border: solid #c9d4e8; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.wz-steps li > span { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: #9aa3b5; color: #fff; font-size: 24px; font-weight: 500; }
.wz-steps li.on > span, .wz-steps li.done > span { background: #1d4ed8; }
.wz-steps b { display: block; font-size: 19px; font-weight: 600; color: #3d4a6b; }
.wz-steps li.on b { color: #1530d8; }
.wz-steps small { font-size: 15px; color: #6b7896; }
.type-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #0d1b3d; font-size: 15px; }
.type-switch button { height: 38px; padding: 0 16px; border: 1px solid #c9d4e8; border-radius: 19px; background: #fff; color: #0d1b3d; cursor: pointer; }
.type-switch button.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.wizard { display: grid; gap: 13px; }
.wz-grid { display: grid; grid-template-columns: minmax(0, 615fr) minmax(0, 748fr); gap: 14px; align-items: stretch; }
.wz-grid > .sa-card, .wz-step > .sa-card { display: flex; flex-direction: column; }
.wz-title { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; font-size: 24px; font-weight: 600; color: #1530d8; }
.wz-title small { display: block; font-size: 16px; font-weight: 400; color: #3d4a6b; }
.wz-ic.blue { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #1d4ed8; color: #fff; }
.wz-ic.blue .ic { width: 26px; height: 26px; }
.wz-ic.plain { color: #1d4ed8; }
.wz-ic.plain .ic { width: 34px; height: 34px; }
.wz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wz-form label, .toggle-field > span { color: #0d1b3d; font-size: 16px; font-weight: 500; }
.wz-form textarea { width: 100%; margin-top: 6px; }
.pw { position: relative; display: block; margin-top: 6px; }
.pw input { width: 100%; padding-right: 44px; margin: 0 !important; }
.pw .eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0; border: 0; background: none; color: #5d6880; cursor: pointer; }
.toggle-field > span { display: block; margin-bottom: 8px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; color: #0d1b3d; font-weight: 400; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { position: relative; width: 52px; height: 30px; border-radius: 15px; background: #c3cad6; transition: background .15s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch input:checked + i { background: #0d8a4a; }
.switch input:checked + i::after { left: 25px; }
.switch input:focus-visible + i { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.switch b { font-size: 17px; font-weight: 400; }
.counter { display: block; margin-top: 4px; text-align: right; font-size: 15px; font-weight: 400; color: #3d4a6b; }
.check.all { font-size: 17px; color: #0d1b3d; white-space: nowrap; }
.check.all input, .menu-table input { width: 22px; height: 22px; accent-color: #1d4ed8; }
.info-box { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding: 12px 16px; border: 1px solid #c6d6f5; border-radius: 6px; background: #eef4fe; }
.info-box > .ic { flex: none; width: 28px; height: 28px; color: #1d4ed8; }
.info-box b { display: block; font-size: 17px; font-weight: 500; color: #0d1b3d; }
.info-box span { font-size: 15px; color: #3d4a6b; }
.wizard[data-type=USER] .for-admin, .wizard[data-type=ADMIN] .for-user, .wizard[data-type=SUPERADMIN] .for-admin { display: none !important; }
.menu-table { width: 100%; border-collapse: collapse; border: 1px solid #e3e9f3; }
.menu-table th { padding: 14px; background: #f5f8fc; font-size: 16.5px; font-weight: 500; color: #0d1b3d; text-align: center; }
.menu-table td { padding: 12px 14px; border-top: 1px solid #e3e9f3; vertical-align: middle; }
.menu-table td:first-child { width: 58px; text-align: center; border-right: 1px solid #e3e9f3; }
.menu-name { display: flex; align-items: center; gap: 22px; }
.menu-name .ic { width: 34px; height: 34px; color: #0d1b3d; }
.menu-name b { display: block; font-size: 17px; font-weight: 500; color: #0d1b3d; }
.menu-name small { font-size: 15px; color: #3d4a6b; }
.menu-detail { margin: 8px 0 0 56px; font-size: 14.5px; color: #3d4a6b; }
.pill.pick { padding: 6px 14px; border-radius: 16px; background: #d4f0e0; color: #0d6b45; font-size: 15px; }
.pill.pick.off { background: #e6e9ef; color: #5d6880; }
.chev-btn { margin-left: 46px; padding: 4px; border: 0; background: none; color: #0d1b3d; cursor: pointer; vertical-align: middle; }
.chev-btn .ic { transition: transform .15s; }
.chev-btn.open .ic { transform: rotate(180deg); }
.menu-row.locked { opacity: .55; }
.wz-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 20px; }
.wz-foot .btn { min-width: 176px; min-height: 50px; font-size: 18px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 16px; }
.role-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 14px; border: 1px solid #d5ddeb; border-radius: 8px; color: #0d1b3d; font-weight: 400; cursor: pointer; }
.role-card:has(input:checked) { border-color: #1d4ed8; background: #f1f6ff; }
.role-card input { grid-row: span 2; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #1d4ed8; }
.role-card b { font-size: 16px; }
.role-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.role-sys em { padding: 2px 8px; border-radius: 10px; font-size: 13px; font-style: normal; }
.role-sys em.wms { background: #d9f0e2; color: #0d6b45; }
.role-sys em.production { background: #ece0fb; color: #7a33c4; }
.role-sys em.portal { background: #dde8fb; color: #1d4ed8; }
.wh-grid { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.confirm-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.confirm-kv > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef1f6; font-size: 16px; }
.confirm-kv dt { color: #3d4a6b; }
.confirm-kv dd { margin: 0; color: #0d1b3d; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 1200px) {
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-row3 { grid-template-columns: 1fr 1fr; }
  .sa-row3 > :last-child { grid-column: span 2; }
  .sa-split, .sa-split.wide-left, .wz-grid, .sa-row2 { grid-template-columns: minmax(0, 1fr); }
  .head-actions { align-items: stretch; width: 100%; }
}
@media (max-width: 700px) {
  .sa-kpis, .sa-row3 { grid-template-columns: minmax(0, 1fr); }
  .sa-row3 > :last-child { grid-column: auto; }
  .wz-steps { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .wz-steps li + li::before, .wz-steps li + li::after { display: none; }
  .profile-kv, .confirm-kv { grid-template-columns: minmax(0, 1fr); }
  .sa-tabs a { flex: 1; min-width: 0; }
  .sa-search { flex-wrap: wrap; }
  .sa-search .field-icon { width: 100%; }
  .date-pill { min-width: 0; }
  .donut-wrap { flex-direction: column; }
  .top-lang { display: none; }
}
/* Portal › พาร์ทเนอร์ (eConnect_Portal_พาร์ทเนอร์: green tile icon, dark title, dark-green buttons) */
.crumbs.portal { gap: 12px; font-size: 16px; }
.crumbs.portal a, .crumbs.portal span { color: #1530b0; }
.page-head.portal .page-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: #0c4a32; color: #fff; }
.page-head.portal .page-icon .ic { width: 32px; height: 32px; stroke-width: 2; }
.page-head.portal h1 { font-size: 29px; font-weight: 600; color: #0d1b3d; }
.page-head.portal .page-title p { color: #1530b0; font-size: 16px; }
.page-head.portal .tabs { gap: 0; }
.page-head.portal .tab { min-width: 168px; border-radius: 0; }
.page-head.portal .tab:first-child { border-radius: 4px 0 0 4px; }
.page-head.portal .tab:last-child { border-radius: 0 4px 4px 0; }
.page-head.portal .tab.on { background: #0c4a32; border-color: #0c4a32; }
.pt-card { padding: 14px 18px 16px; }
.pt-title { color: #0d1b3d; font-size: 19px; }
.pt-title small { font-size: 16px; font-weight: 500; color: #1530b0; }
.pt-title > .ic { width: 28px; height: 28px; color: #0c4a32; }
.badge-ic.dark { width: 26px; height: 26px; border-radius: 4px; background: #0c4a32; }
.pt-grid { display: grid; gap: 10px 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pt-grid > * { grid-column: span 3; }
.pt-grid.c .a-code { grid-column: span 2; } .pt-grid.c .a-name { grid-column: span 3; } .pt-grid.c .a-tax { grid-column: span 2; } .pt-grid.c .a-addr { grid-column: span 5; }
.pt-grid.c .a-sub, .pt-grid.c .a-dis, .pt-grid.c .a-pro { grid-column: span 2; } .pt-grid.c .a-zip { grid-column: span 2; } .pt-grid.c .a-place { grid-column: span 4; }
.pt-grid.c .a-ct { grid-column: span 3; } .pt-grid.c .a-ph { grid-column: span 3; } .pt-grid.c .a-em { grid-column: span 3; } .pt-grid.c .a-st { grid-column: span 3; }
.pt-grid.v .a-code { grid-column: span 3; } .pt-grid.v .a-name { grid-column: span 3; } .pt-grid.v .a-addr { grid-column: span 6; }
.pt-grid.v .a-st { grid-column: span 3; } .pt-grid.v .a-em { grid-column: span 3; }
.pt-grid label, .site-grid label { color: #1530b0; font-size: 15px; font-weight: 500; }
.pt-grid input, .pt-grid select, .site-grid input, .site-grid select { height: 38px; }
.pt-grid .field-icon, .site-grid .field-icon { margin-top: 6px; }
.pt-grid .field-icon > .ic, .site-grid .field-icon > .ic { color: #1d4ed8; width: 18px; height: 18px; }
.sites { margin-top: 16px; padding: 12px 14px 4px; border: 1px solid #e1e8f4; border-radius: 8px; background: #fbfdff; }
.pt-sec { display: flex; align-items: center; gap: 10px; margin: 0; color: #1530b0; }
.pt-sec .ic { color: #0c4a32; width: 24px; height: 24px; }
.site { padding: 10px 0; border-top: 1px dashed #d6e0f0; }
.site:first-child { border-top: 0; }
.site-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 16px; padding-right: 56px; }
.site-grid > label { grid-column: span 3; }
.site-grid > .s-addr { grid-column: span 6; }
.site-grid > .s-map { grid-column: span 6; }
.map-row { display: flex; gap: 8px; margin-top: 6px; }
.map-row input { flex: 1; margin: 0 !important; }
.site-del { position: absolute; right: 4px; bottom: 4px; width: 40px; height: 40px; border: 1px solid #f3b4b4; border-radius: 6px; }
.btn.primary.dark { background: #0c4a32; }
.btn.primary.dark:hover { background: #083823; }
.pt-list-head { flex-wrap: wrap; }
.pt-search { display: flex; gap: 10px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.pt-search .field-icon { min-width: 260px; max-width: 460px; flex: 1; }
.pt-search input, .pt-search select { height: 40px; margin: 0; }
.filter-sel { position: relative; display: flex; align-items: center; }
.filter-sel > .ic { position: absolute; left: 10px; color: #1d4ed8; pointer-events: none; }
.filter-sel select { padding-left: 36px; border-color: #1d4ed8; color: #1530b0; min-width: 160px; }
.btn.excel { border-color: #0c7a43; color: #0d1b3d; min-height: 40px; }
.btn.excel .ic { color: #0c7a43; }
.pt-table th { background: #eef3fb; color: #0d1b3d; font-weight: 500; }
.pt-table td { color: #0d1b3d; padding: 6px 10px; }
.pt-table tr.sel td { background: #eef4ff; }
.pt-table td.ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act.boxed { border: 1px solid; border-radius: 4px; width: 30px; height: 30px; }
.act.edit.boxed { border-color: #bcd0f5; background: #f2f6fe; }
.act.del.boxed { border-color: #f5c2c2; background: #fff5f5; }
form.inline { display: inline; }
@media (max-width: 1100px) {
  .pt-grid > *, .pt-grid.c > *, .pt-grid.v > * { grid-column: span 6 !important; }
  .site-grid > label, .site-grid > .s-addr, .site-grid > .s-map { grid-column: span 6; }
}
@media (max-width: 640px) {
  .pt-grid > *, .pt-grid.c > *, .pt-grid.v > *, .site-grid > label, .site-grid > .s-addr, .site-grid > .s-map { grid-column: 1 / -1 !important; }
  .site-grid { padding-right: 0; padding-bottom: 50px; }
}
/* ---------- MRP screens (eConnect_MRP_*) ---------- */
.mrp-head { display: grid; grid-template-columns: 1.1fr 1.6fr .8fr .6fr 1.3fr .8fr; gap: 10px 16px; }
.mrp-head label, .mrp-filter label, .mrp-waste label, .mrp-dlg label { color: #0d1b3d; font-size: 15px; font-weight: 500; }
.mrp-head input, .mrp-head select { height: 42px; }
.type-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.type-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 46px; border: 1px solid #d5ddeb; border-radius: 6px; cursor: pointer; color: #0d1b3d; }
.type-card:has(input:checked) { border-color: #0c7a43; background: #effaf4; }
.type-card input { position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; accent-color: #0c4a32; }
.type-card .ic { width: 38px; height: 38px; color: #0c4a32; flex: none; }
.type-card b { display: block; color: #1530b0; font-size: 16px; }
.type-card small { color: #3d4a6b; font-size: 14px; }
.mrp-add { align-items: flex-end; gap: 12px; }
.mrp-add .field-icon { flex-direction: column; align-items: stretch; }
.mrp-add .field-icon > .ic { top: auto; bottom: 11px; }
.mrp-lines input.seq { width: 52px; text-align: center; height: 34px; }
.mrp-lines input.num { width: 130px; text-align: right; height: 34px; }
.mrp-lines tr[hidden] { display: none; }
.mrp-filter { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.mrp-filter > label { min-width: 160px; }
.mrp-filter > .grow { flex: 1; min-width: 220px; }
.mrp-filter input, .mrp-filter select { height: 42px; margin-top: 6px; }
.mrp-filter .range { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mrp-filter .range input { margin: 0; }
.mrp-filter-inline { display: flex; padding: 10px 18px; }
.mrp-filter-inline label { display: flex; align-items: center; gap: 10px; color: #0d1b3d; }
.mrp-filter-inline select { width: 220px; margin: 0; }
.mrp-waste { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 16px 24px; }
.mrp-waste small { display: block; margin-top: 4px; font-weight: 400; }
.btn.lg { min-height: 50px; font-size: 18px; padding: 0 26px; }
.btn.ok { background: #0c6b3f; color: #fff; }
.btn.no { background: #d92626; color: #fff; }
.btn.ok:hover { background: #09552f; } .btn.no:hover { background: #b51d1d; }
.btn.sm.blue { min-height: 32px; font-size: 14px; padding: 0 12px; }
.txt-orange { color: #e0661a; }
.mrp-orders td { vertical-align: middle; }
.pill.lg { padding: 8px 18px; font-size: 16px; }
dialog.mrp-dlg { width: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(13, 27, 61, .3); color: #0d1b3d; }
dialog.mrp-dlg.sm { width: min(460px, calc(100vw - 32px)); }
dialog.mrp-dlg::backdrop { background: rgba(10, 20, 40, .45); }
.mrp-dlg header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid #e3e9f3; }
.mrp-dlg header h2 { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 600; color: #1530b0; }
.mrp-dlg header .ic { width: 28px; height: 28px; color: #0c4a32; }
.mrp-dlg .plus-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0c4a32; }
.mrp-dlg .plus-ic .ic { color: #fff; width: 20px; height: 20px; }
.mrp-dlg .x { border: 0; background: none; font-size: 30px; line-height: 1; color: #0d1b3d; cursor: pointer; }
.dlg-body { display: grid; gap: 14px; padding: 18px 22px; }
.dlg-body input, .dlg-body select { height: 44px; }
.mrp-dlg footer { display: flex; justify-content: flex-end; gap: 12px; padding: 14px 22px 18px; border-top: 1px solid #e3e9f3; }
.mrp-dlg footer .btn { min-width: 130px; min-height: 46px; font-size: 17px; }
.qty-unit { display: flex; align-items: center; margin-top: 6px; position: relative; }
.qty-unit input { margin: 0 !important; padding-right: 60px; }
.qty-unit em { position: absolute; right: 12px; font-style: normal; color: #3d4a6b; }
.mrp-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; background: #f2fbf6; }
.mrp-kv.two { grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; padding: 4px 0; }
.mrp-kv dt { font-size: 13.5px; color: #3d4a6b; }
.mrp-kv dd { margin: 2px 0 0; color: #0d1b3d; font-weight: 500; }
.mrp-kv.two > div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.wh-block { margin-top: 14px; border: 1px solid #e1e8f4; border-left: 4px solid #0c4a32; border-radius: 6px; padding: 10px 12px; }
.wh-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; color: #0d1b3d; font-size: 16px; }
.wh-head b { display: flex; align-items: center; gap: 8px; }
.wh-head .ic { color: #0c4a32; }
.wh-head .btn { margin-left: auto; }
.mrp-explode tr.lv1 td, .mrp-explode tr.lv2 td { background: #faf7ff; }
.mrp-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.mrp-foot .info-box { flex: 1; margin: 0; }
.bar { display: inline-block; vertical-align: middle; width: 90px; height: 8px; margin-right: 6px; border-radius: 4px; background: #e3e9f3; overflow: hidden; }
.bar > span { display: block; height: 100%; background: #b8c3d6; }
.bar > span.b { background: #2a6cf0; } .bar > span.g { background: #0c7a43; }
.bar.lg { width: 70%; height: 12px; border-radius: 6px; }
.job-top { display: flex; align-items: flex-start; gap: 16px; }
.job-top .mrp-kv { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.job-kpis { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; margin-bottom: 12px; }
.job-kpis > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 12px 14px; border: 1px solid #e1e8f4; border-radius: 8px; color: #0d1b3d; }
.job-kpis > div > .ic { grid-row: span 2; width: 36px; height: 36px; color: #1d4ed8; }
.job-kpis b { font-size: 20px; }
.job-kpis .wide { grid-template-columns: 1fr auto; }
.job-kpis .wide span:first-child { grid-column: 1 / -1; }
.job-tabs { display: flex; gap: 6px; border-bottom: 1px solid #e3e9f3; margin-bottom: 12px; }
.job-tabs button { padding: 10px 18px; border: 0; border-bottom: 3px solid transparent; background: none; font: inherit; font-size: 16px; color: #3d4a6b; cursor: pointer; }
.job-tabs button.on { border-bottom-color: #0c4a32; color: #0c4a32; font-weight: 600; }
.st-form { display: flex; gap: 6px; align-items: center; }
.st-form input { width: 100px; height: 32px; text-align: right; margin: 0; }
.st-form select { width: 150px; height: 32px; margin: 0; }
.st-steps { display: flex; justify-content: space-between; margin: 18px 0 4px; padding: 0 20px; list-style: none; counter-reset: s; }
.st-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #3d4a6b; }
.st-steps li + li::before { content: ""; position: absolute; top: 20px; right: calc(50% + 24px); width: calc(100% - 48px); height: 2px; background: #c9d4e8; }
.st-steps span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e3e9f3; color: #3d4a6b; font-weight: 600; font-size: 18px; }
.st-steps li.done span { background: #0c7a43; color: #fff; }
.st-steps li.now span { background: #1d4ed8; color: #fff; }
.st-steps li.done::before, .st-steps li.now::before { background: #0c7a43; }
.st-steps b { font-weight: 500; color: #0d1b3d; }
.waste-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; }
@media (max-width: 1100px) {
  .mrp-head, .type-cards, .mrp-waste, .mrp-kv, .job-kpis, .job-top .mrp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mrp-kv.two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mrp-head, .type-cards, .mrp-waste, .mrp-kv, .job-kpis, .job-top .mrp-kv { grid-template-columns: 1fr; }
  .st-steps { flex-direction: column; gap: 10px; } .st-steps li + li::before { display: none; }
}
/* MRP Dashboard / สต็อกสินค้า */
.mrp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mk { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 107, .06); color: #0d1b3d; }
.mk:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(16, 32, 107, .12); }
.mk > span { display: grid; place-items: center; flex: none; width: 62px; height: 62px; border-radius: 10px; color: #fff; }
.mk > span .ic { width: 34px; height: 34px; stroke-width: 2.2; }
.mk.blue > span { background: #1d6ef0; } .mk.green > span { background: #16a35a; } .mk.orange > span { background: #f5a623; }
.mk.red > span { background: #e53935; } .mk.purple > span { background: #8b3fd9; }
.mk h3 { font-size: 16px; font-weight: 500; color: #0d1b3d; }
.mk b { font-size: 30px; font-weight: 600; }
.mk b small { font-size: 16px; font-weight: 500; margin-left: 8px; }
.mrp-row { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 13px; }
.mrp-row.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mrp-donut { display: flex; align-items: center; gap: 14px; }
.mrp-donut svg { width: 170px; flex: none; }
.mrp-donut .dn { font-size: 30px; font-weight: 700; fill: #0d1b3d; }
.mrp-donut .dl { font-size: 12px; fill: #3d4a6b; }
.mrp-donut ul { flex: 1; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: #0d1b3d; }
.mrp-donut li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
.mrp-donut li i { width: 10px; height: 10px; border-radius: 50%; }
.mrp-donut .g1 { background: #16a35a; } .mrp-donut .g2 { background: #0b5134; } .mrp-donut .g3 { background: #2bb673; } .mrp-donut .g4 { background: #9aa4b8; } .mrp-donut .g5 { background: #e53935; }
.oee { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #f2fbf6; color: #0d1b3d; }
.oee b { margin-left: auto; font-weight: 500; color: #6b7896; font-size: 14px; }
.pill.teal { background: #d7f5ee; color: #0b7d68; }
.bell-on { position: relative; display: inline-grid; color: #0d1b3d; }
.bell-on i { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #e53935; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; }
.bell-off { color: #b8c3d6; }
@media (max-width: 1200px) { .mrp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mrp-row, .mrp-row.even { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .mrp-kpis { grid-template-columns: minmax(0, 1fr); } .mrp-donut { flex-direction: column; } }
.error-card { max-width: 560px; margin: 40px auto; text-align: center; display: grid; gap: 12px; justify-items: center; }
.error-card h1 { color: var(--blue); font-size: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .grid.g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 20; left: calc(-1 * var(--sidebar-w)); transition: left .2s; }
  .sidebar.open { left: 0; }
  .menu-toggle { display: inline-grid; place-items: center; position: absolute; left: 12px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: #fff; color: var(--green-600); z-index: 2; }
  .topbar { height: auto; min-height: 84px; flex-wrap: wrap; padding: 12px 16px 12px 64px; background-size: cover; }
  .content { padding: 14px 16px 32px; }
  .grid.g2, .grid.g6 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .entry { grid-template-columns: 1fr 1fr; }
  .login-main { flex-direction: column; }
  .login-hero, .login.super .login-hero { width: 100%; max-width: none; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .login-panel, .login.super .login-panel { padding: 84px 16px 32px; }
  .login-links { flex-wrap: wrap; justify-content: center; }
  .login-foot { flex-wrap: wrap; height: auto; gap: 10px; padding: 14px 16px; }
  .login-foot .sep { display: none; }
  .login-foot nav { margin-left: 0; }
  .super-foot { position: static; margin-top: 24px; }
  .tab { min-width: 0; flex: 1; }
  .user-name { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- labels (lot / pallet barcode) ---------- */
.labels-bar { display: flex; gap: 10px; padding: 16px; }
.labels { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 16px; }
.label { width: 90mm; border: 1px solid #222; border-radius: 4px; padding: 3mm 4mm; color: #000; font-size: 11px; break-inside: avoid; }
.label header { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label .bc svg { width: 100%; height: 16mm; display: block; }
.label .code { text-align: center; font-size: 14px; font-weight: 500; letter-spacing: .08em; }
.label dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1mm 3mm; margin: 2mm 0 0; }
.label dt { font-size: 9px; color: #444; }
.label dd { margin: 0; }
@media print {
  .no-print { display: none !important; }
  body.blank { background: #fff; }
  .labels { padding: 0; gap: 4mm; }
}

/* ---------- lot reservation ---------- */
.alloc { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.alloc-block { margin-bottom: 18px; }
.alloc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; color: var(--blue); }
.alloc-head .btn { margin-left: 8px; }

/* ---------- production steps ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 99px; background: #f1f4fa; color: var(--muted); font-weight: 400; }
.steps li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #dfe5f1; color: var(--muted); font-size: 13px; }
.steps li.done { background: var(--green-100); color: var(--green-600); }
.steps li.done > span { background: var(--green-600); color: #fff; }
.steps li.now { background: #e0ecfd; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.steps li.now > span { background: var(--blue); color: #fff; }

/* ---------- dashboards, permission grids ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 4px; color: var(--blue); }
.kpi:hover { text-decoration: none; box-shadow: 0 2px 10px rgba(16, 32, 107, .1); }
.kpi span { color: var(--muted); font-size: 13.5px; }
.kpi b { font-size: 34px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); }
.kpi.warn b { color: var(--orange); }
.kpi.bad b { color: var(--red); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 18px; }

/* ---------- printable documents ---------- */
.doc { max-width: 210mm; margin: 0 auto 24px; background: #fff; color: #111; padding: 14mm; font-size: 12.5px; }
.doc-head { display: flex; align-items: center; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 8px; }
.doc-head img { height: 40px; }
.doc-head h1 { font-size: 22px; color: #111; }
.doc-head p { margin: 0; color: #444; }
.doc-bc { margin-left: auto; }
.doc-bc svg { height: 44px; width: auto; }
.doc-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; margin: 12px 0; }
.doc-kv dt { font-size: 10.5px; color: #555; }
.doc-kv dd { margin: 0; font-weight: 400; }
.doc h2 { font-size: 15px; margin: 14px 0 6px; color: #111; }
.doc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc-table th, .doc-table td { border: 1px solid #999; padding: 5px 6px; text-align: left; }
.doc-table th { background: #f0f0f0; font-weight: 500; }
.doc-table .num { text-align: right; }
.doc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; text-align: center; }
.doc-sign span { display: block; border-bottom: 1px solid #111; height: 34px; margin-bottom: 6px; }
details.transport > summary { cursor: pointer; list-style: revert; margin-bottom: 0; }
details.transport[open] > summary { margin-bottom: 10px; }
@media print { .doc { padding: 0; } }

/* ===== eConnect_Portal_Dashboard ===== */
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 2px 0 14px; }
.pd-head h1 { font-size: 30px; font-weight: 600; color: #0b5a2e; line-height: 1.25; }
.pd-head p { font-size: 17px; color: #4a5568; margin-top: 2px; }
.pd-date { position: relative; display: flex; align-items: center; gap: 12px; min-width: 210px; padding: 8px 14px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .1); color: #0d1b3d; cursor: pointer; }
.pd-date > .ic:first-child { width: 28px; height: 28px; color: #0b6b36; }
.pd-date label { display: grid; line-height: 1.3; font-size: 14px; cursor: pointer; }
.pd-date label b { font-size: 15px; font-weight: 500; }
.pd-date input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pd-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.pd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pd-kpi { display: flex; align-items: flex-start; gap: 14px; padding: 16px 14px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); color: #0d1b3d; min-width: 0; }
.pd-kpi:hover { text-decoration: none; box-shadow: 0 3px 12px rgba(0, 0, 0, .12); }
.pd-ic { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 6px; color: #fff; }
.pd-ic .ic { width: 32px; height: 32px; }
.pd-ic.g { background: #0e8a47; } .pd-ic.r { background: #f04848; }
.pd-kpi h3 { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-kpi h3 small { font-size: 11px; color: #4a5568; }
.pd-kpi b { display: block; font-size: 26px; font-weight: 600; line-height: 1.3; }
.pd-trend { font-style: normal; font-size: 17px; font-weight: 500; }
.pd-trend.up { color: #0e8a47; } .pd-trend.down { color: #e53935; } .pd-trend.flat { color: #9aa5b1; }
.pd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.pd-card { padding: 16px 16px 12px; border-radius: 8px; }
.pd-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pd-card-head h2 { font-size: 19px; font-weight: 600; color: #0d1b3d; }
.pd-more { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; background: #f2f5f3; color: #0d1b3d; font-size: 13px; }
.pd-more .ic { width: 14px; height: 14px; }
.pd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-tile { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #eef8f2; border-radius: 6px; color: #0d1b3d; }
.pd-tile > .ic { width: 38px; height: 38px; flex: none; color: #0b6b36; }
.pd-tile div { display: grid; line-height: 1.25; }
.pd-tile span { font-size: 13.5px; } .pd-tile b { font-size: 22px; font-weight: 600; } .pd-tile small { font-size: 13px; color: #2d3748; }
.pd-tile.red { background: #fdeeee; } .pd-tile.red > .ic { color: #e53935; }
.pd-tile.grey { background: #f1f4f7; } .pd-tile.grey > .ic { color: #4a5a6c; }
.pd-sub { font-size: 15.5px; font-weight: 600; color: #0d1b3d; margin: 16px 0 6px; }
.pd-chart { display: block; width: 100%; height: auto; }
.pd-chart .grid-line { stroke: #e5ebe8; } .pd-chart .axis { font-size: 12.5px; fill: #3d4a5c; }
.pd-legend { display: flex; justify-content: center; gap: 22px; list-style: none; margin: 4px 0 0; padding: 0; font-size: 13.5px; color: #0d1b3d; }
.pd-legend li { display: flex; align-items: center; gap: 6px; }
.pd-legend i { width: 11px; height: 11px; border-radius: 50%; }
.pd-table th { background: #f1f4f6; font-size: 13.5px; font-weight: 500; color: #0d1b3d; }
.pd-table td { font-size: 13.5px; padding-top: 8px; padding-bottom: 8px; }
.pd-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.pd-state::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pd-state.ok { color: #0e8a47; } .pd-state.off { color: #9aa5b1; }
.pd-state.run { color: #1d6ef0; background: #e8f0fe; padding: 2px 8px; border-radius: 4px; }
.pd-type { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; border-radius: 4px; }
.pd-type .ic { width: 18px; height: 18px; }
.pd-type.blue { color: #1d6ef0; } .pd-type.orange { color: #f26b1d; } .pd-type.purple { color: #5b3fd9; } .pd-type.yellow { color: #f5a623; }
@media (max-width: 1400px) { .pd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .pd-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-tiles { grid-template-columns: 1fr 1fr; } .pd-head { flex-direction: column; } }
/* WMS dashboard (same visual language as the Portal dashboard) */
.pd-wh { display: inline-block; margin-left: 10px; padding: 2px 12px; border-radius: 6px; background: #e2f3ea; color: #0b5a2e; font-size: 17px; font-weight: 500; vertical-align: middle; }
.pd-date.static { cursor: default; }
.pd-ic.o { background: #f5a623; } .pd-ic.b { background: #1d6ef0; }
.pd-kpi h3 small { display: block; font-size: 11px; color: #6b7686; font-weight: 400; }
.pd-trend small { font-size: 11px; color: #6b7686; font-weight: 400; }
a.pd-tile { text-decoration: none; } a.pd-tile:hover { box-shadow: inset 0 0 0 2px #0e8a47; }
.pd-tile.warn { background: #fff4df; } .pd-tile.warn > .ic { color: #e08a00; }
.pd-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-badge { display: inline-block; min-width: 24px; padding: 0 8px; margin-left: 6px; border-radius: 12px; font-size: 13px; text-align: center; color: #fff; vertical-align: middle; }
.pd-badge.r { background: #e53935; } .pd-badge.o { background: #f5a623; }
@media (max-width: 1100px) { .pd-row.three { grid-template-columns: 1fr; } }

/* ===== popup เลือกระบบ / คลัง (หลังเข้าสู่ระบบ) ===== */
.choose-stage { display: grid; place-items: center; min-height: 100vh; overflow: auto; }
.choose-stage .stage-hero { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.choose-shade { position: fixed; inset: 0; background: rgba(4, 33, 22, .55); backdrop-filter: blur(3px); }
.choose-dlg { position: relative; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; margin: 24px 0; padding: 26px 28px 20px; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); color: #0d1b3d; }
.choose-dlg header { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5ebe8; }
.choose-logo { width: 150px; flex: none; }
.choose-dlg h1 { font-size: 22px; font-weight: 600; color: #0b5a2e; }
.choose-dlg header p { font-size: 13.5px; color: #4a5568; margin-top: 2px; }
.choose-group { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 16px; font-weight: 600; color: #0d1b3d; }
.choose-group .ic { width: 20px; height: 20px; color: #0b6b36; }
.choose-group small { font-size: 12.5px; font-weight: 400; color: #6b7686; }
.choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choose-grid form { margin: 0; }
.choose-card { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 40px 12px 14px; border: 1.5px solid #dbe5df; border-radius: 12px; background: #f7fbf9; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.choose-card:hover, .choose-card:focus-visible { border-color: #0e8a47; box-shadow: 0 4px 14px rgba(14, 138, 71, .18); background: #fff; }
.choose-card.current { border-color: #0e8a47; background: #eaf7ef; }
.cc-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; background: #0e8a47; color: #fff; }
.cc-ic .ic { width: 26px; height: 26px; }
.choose-card.production .cc-ic { background: #5b3fd9; } .choose-card.portal .cc-ic { background: #1d6ef0; }
.cc-txt { display: grid; line-height: 1.35; min-width: 0; }
.cc-txt b { font-size: 15.5px; font-weight: 600; } .cc-txt small { font-size: 12.5px; color: #5b6575; }
.cc-tag { position: absolute; top: 8px; right: 34px; padding: 1px 8px; border-radius: 10px; background: #f5a623; color: #fff; font-size: 11px; font-style: normal; }
.cc-tag.cur { background: #0e8a47; }
.cc-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #8a96a3; }
.choose-dlg footer { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 12px; border-top: 1px solid #e5ebe8; }
@media (max-width: 640px) { .choose-grid { grid-template-columns: 1fr; } .choose-dlg header { flex-direction: column; align-items: flex-start; } .choose-dlg { padding: 20px 16px; } }
/* หน้าเลือกระบบแบบสองฝั่ง (ทีมแจ้ง 20/10/2026): ซ้าย = ระบบ · ขวา = คลังย่อยเมื่อกดคลังสินค้า */
.choose-dlg.cx { width: min(1240px, calc(100vw - 32px)); padding: 26px 30px 20px; }
.cx .choose-logo { width: 210px; padding-right: 22px; border-right: 1px solid #e5ebe8; }
.cx-body { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: 0; min-height: 400px; }
.cx-sys { display: grid; align-content: start; gap: 14px; padding: 22px 24px 10px 0; border-right: 1px solid #e5ebe8; }
.cx-sys form { margin: 0; }
.cx-card { min-height: 92px; padding: 16px 40px 16px 16px; background: #fff; }
.cx-card .cc-ic { width: 60px; height: 60px; border-radius: 12px; }
.cx-card .cc-ic .ic { width: 32px; height: 32px; }
.cx-card .cc-txt b { font-size: 18px; } .cx-card .cc-txt small { font-size: 13.5px; }
.cx-card.wms.on { border-color: #0e8a47; background: #eaf7ef; }
.cx-card.portal { background: #f2f6fe; }
.cx-panel { padding: 22px 0 10px 28px; min-width: 0; }
.cx-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cx-head > .ic { width: 38px; height: 38px; color: #0b6b36; }
.cx-head h2 { font-size: 21px; font-weight: 600; color: #0d1b3d; }
.cx-head p { font-size: 14px; color: #4a5568; }
.cx-search { display: flex; margin-bottom: 14px; }
.cx-search input { width: 100%; height: 44px; }
.cx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-height: 470px; overflow: auto; padding: 2px; }
.cx-grid form { margin: 0; }
.cx-grid form[hidden] { display: none; }
.cx-wh-card { position: relative; display: flex; align-items: center; gap: 16px; width: 100%; min-height: 96px; padding: 12px 44px 12px 12px; border: 1.5px solid #dbe5df; border-radius: 10px;
  background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cx-wh-card:hover, .cx-wh-card:focus-visible { border-color: #0e8a47; box-shadow: 0 4px 14px rgba(14, 138, 71, .18); }
.cx-wh-card.on { border-color: #0e8a47; background: #eaf7ef; }
.cx-thumb { flex: none; width: 92px; height: 66px; border-radius: 6px; object-fit: cover; }
.cx-txt { display: grid; min-width: 0; line-height: 1.35; }
.cx-txt small { font-size: 13px; color: #4a5568; }
.cx-txt b { font-size: 16.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-place { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #4a5568; }
.cx-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0e8a47; color: #fff; }
.cx-check .ic { width: 18px; height: 18px; }
.cx-none { padding: 18px; text-align: center; color: #6b7686; }
.cx-empty { display: flex; gap: 14px; padding: 18px; border-radius: 10px; background: #fff7e6; color: #7a4b00; }
.cx-empty > .ic { flex: none; width: 28px; height: 28px; }
.cx-empty p { font-size: 14px; margin-top: 4px; }
.cx-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 300px; color: #6b7686; text-align: center; }
.cx-hint[hidden] { display: none; }
.cx-hint .ic { width: 36px; height: 36px; }
@media (max-width: 900px) {
  .cx-body { grid-template-columns: 1fr; }
  .cx-sys { border-right: 0; padding-right: 0; border-bottom: 1px solid #e5ebe8; padding-bottom: 16px; }
  .cx-panel { padding-left: 0; }
  .cx-grid { grid-template-columns: 1fr; max-height: none; }
  .cx .choose-logo { border-right: 0; }
}
.user-pop a.link-btn { display: flex; align-items: center; gap: 6px; padding: 6px 0; color: inherit; text-decoration: none; }
/* Super Admin › ผู้ใช้งาน: ทุกคลัง */
.wh-all { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 10px 12px; border: 1px dashed #b9cfc2; border-radius: 8px; background: #f6fbf8; }
.wh-grid.off { opacity: .45; pointer-events: none; }
.d-block { display: block; }
.link-btn.rsv { color: #1d6ef0; text-decoration: underline dotted; font-weight: 600; cursor: pointer; }

/* ค้นหาที่อยู่ไทย (th-address.js) */
.th-addr { position: relative; grid-column: 1 / -1; }
.th-addr label { display: grid; gap: 4px; font-size: 14px; }
.th-addr label small { color: #6b7686; font-weight: 400; }
.th-addr input { width: 100%; background: #f6fbf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6b36' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 18px; padding-left: 36px; border-color: #b9cfc2; }
.th-addr-list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 320px; overflow: auto; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #cfdcd4; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.th-addr-list li { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.th-addr-list li em { float: right; font-style: normal; color: #0b6b36; font-weight: 600; }
.th-addr-list li:hover, .th-addr-list li.on { background: #eaf7ef; }
.th-addr-list li.none { color: #6b7686; cursor: default; }

/* ===== พอดีจอ: B ย่อตามขนาดจออัตโนมัติ · E ตารางไม่ตัดขึ้นบรรทัดใหม่ ===== */
/* B: แบบหน้าจอออกแบบบน 1536–1920 px — จอแคบกว่านั้นย่อทั้งหน้าเป็นสัดส่วนเดียวกัน (ไม่ต่ำกว่า 85%) จอใหญ่เหมือนแบบ 100% */
:root { --z: 1; }
@media (max-width: 1599px) { :root { --z: .95; } }
@media (max-width: 1499px) { :root { --z: .9; } }
@media (max-width: 1399px) { :root { --z: .87; } }
@media (max-width: 1299px) { :root { --z: .85; } }
@media (max-width: 900px) { :root { --z: 1; } } /* แท็บเล็ต/มือถือใช้ layout แบบจอเล็กอยู่แล้ว */
.shell { zoom: var(--z); min-height: calc(100vh / var(--z)); }
.sidebar { height: calc(100vh / var(--z)); }
/* E: ข้อความยาวในตารางแสดงบรรทัดเดียว ตัดด้วย … (วางเมาส์ดูเต็ม) — เซลล์ที่มีช่องกรอก/ปุ่ม/กราฟไม่ถูกตัด · ตารางที่ต้องการขึ้นบรรทัดใส่ class "wrap" */
.table td:not(:has(input, select, textarea, button, .btn, form, .bar, img, svg, dialog, a, .pill)) { white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.table.wrap td { white-space: normal; max-width: none; }
.table td small.d-block, .table td .muted.d-block { overflow: hidden; text-overflow: ellipsis; }
/* ===== D: ฟอร์มเพิ่ม/แก้ไขเป็นแผงด้านขวา (form[data-drawer] — app.js) เปิดหน้ามาเห็นรายการทันที ===== */
form.drawer { position: fixed; top: 0; right: 0; z-index: 70; width: min(760px, 94vw); height: calc(100vh / var(--z, 1)); margin: 0; overflow-y: auto;
  border-radius: 0; box-shadow: -10px 0 30px rgba(10, 25, 40, .18); transform: translateX(105%); transition: transform .22s ease; visibility: hidden; }
form.drawer.open { transform: none; visibility: visible; }
.drawer-bg { position: fixed; inset: 0; z-index: 69; background: rgba(10, 25, 40, .35); }
form.drawer > .card-head, form.drawer > .sa-head { position: sticky; top: 0; z-index: 2; background: inherit; background-color: #fff; margin: -16px -16px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
form.drawer .drawer-x { margin-left: auto; width: 36px; height: 36px; border: 0; border-radius: 8px; background: #f1f4f7; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }
form.drawer .drawer-x:hover { background: #e3e9ef; }
form.drawer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
form.drawer .span2, form.drawer .span3, form.drawer .grid > .wide { grid-column: 1 / -1; }
form.drawer .form-foot, form.drawer .pt-foot, form.drawer .sa-foot { position: sticky; bottom: 0; background: #fff; padding: 12px 0 4px; margin-top: 12px; border-top: 1px solid var(--line); z-index: 2; }
.drawer-add { margin-left: auto; }
body.drawer-on { overflow: hidden; }
@media (max-width: 640px) { form.drawer { width: 100vw; } form.drawer .grid { grid-template-columns: 1fr !important; } }form.drawer { padding-bottom: 0; }
form.drawer .form-foot, form.drawer .pt-foot, form.drawer .sa-foot { margin-bottom: 0; padding-bottom: 14px; }
/* ปุ่มจัดการคอลัมน์สุดท้ายติดขวาเสมอ เมื่อตารางกว้างกว่าจอ (เลื่อนตารางแล้วยังกดได้) */
/* ติดขวาเฉพาะตารางที่คอลัมน์สุดท้ายเป็นปุ่มจัดการ — หัวและเซลล์ของคอลัมน์ติดไปด้วยกัน */
.table-wrap .table:has(tbody td:last-child :is(.btn, .act, .icon-btn, form)) tr > :last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -6px 0 8px -6px rgba(10, 25, 40, .18); }
.table-wrap .table:has(tbody td:last-child :is(.btn, .act, .icon-btn, form)) thead tr > :last-child { z-index: 2; background: var(--thead); }
.table-wrap .table:has(tbody td:last-child :is(.btn, .act, .icon-btn, form)) tbody tr:hover > :last-child { background: #f8fbff; }/* Super Admin กลุ่มสิทธิ์ / Company: ฟอร์มเป็นแผงลอยแล้ว ตารางใช้เต็มความกว้าง */
.sa-split:has(> form.drawer) > section { grid-column: 1 / -1; }
/* พิมพ์: ไม่ย่อตามจอ ไม่แสดงแผงฟอร์ม */
@media print {
  .shell { zoom: 1; min-height: 0; }
  .sidebar, form.drawer, .drawer-bg, .drawer-add { display: none !important; }
  .table td { white-space: normal !important; max-width: none !important; overflow: visible !important; }
}
/* หน้ารายการพอดีจอ (app.js fitTables / foldFilters) */
.table-wrap.fit { overflow: auto; overscroll-behavior: contain; }
.table-wrap.fit thead th { position: sticky; top: 0; z-index: 3; }
.table-wrap.fit .table:has(tbody td:last-child :is(.btn, .act, .icon-btn, form)) thead tr > :last-child { z-index: 4; }
form.fold { overflow: hidden; margin-bottom: 0; }
form.fold.fold-open { max-height: none !important; overflow: visible; }
.fold-bar { display: block; width: 100%; margin: -10px 0 0; padding: 6px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: #f6f9fc;
  color: var(--blue); font: inherit; font-size: 13px; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold-bar:hover { background: #eef4fb; }
@media print { .table-wrap.fit { max-height: none !important; overflow: visible; } .fold-bar { display: none; } form.fold { max-height: none !important; } }
/* หน้ารายการพอดีจอ: ซ่อนแถบลิขสิทธิ์ท้ายหน้า (มีอยู่ที่มุมล่างเมนูซ้ายแล้ว) · ลดขอบล่าง · แถวตารางกระชับ */
@media screen { body.has-fit .page-foot { display: none; } body.has-fit .content { padding-bottom: 12px; } }
.table-wrap.fit .table td { padding-top: 7px; padding-bottom: 7px; }
.table-wrap.fit .table th { padding-top: 9px; padding-bottom: 9px; }.table td:has(> .bar) { white-space: nowrap; } /* แถบความคืบหน้า + % บรรทัดเดียว */
/* ปุ่มและป้ายในตารางพอดีจอเตี้ยลง ให้เห็นแถวมากขึ้น */
.table-wrap.fit .table .btn { min-height: 30px; padding-top: 2px; padding-bottom: 2px; }
.table-wrap.fit .table .pill { padding-top: 1px; padding-bottom: 1px; }
/* พื้นที่หน้าเว็บสูงไม่ถึง 960 px (รวมจอ 1920×1080 ที่เปิดเบราว์เซอร์เต็มจอ) เฉพาะหน้ารายการ: หัวเตี้ยลง ซ่อน breadcrumb และคำอธิบายใต้ชื่อหน้า ให้เห็น 10 แถว */
@media screen and (max-height: 959px) and (min-width: 901px) {
  body.has-fit .topbar { height: 64px; }
  body.has-fit .topbar .icon-btn.bell { width: 44px; height: 44px; }
  body.has-fit .crumbs { display: none; }
  body.has-fit .page-head p { display: none; }
  body.has-fit .content { gap: 10px; padding-top: 12px; }
}@media print { body.has-fit .page-foot { display: flex; } body.has-fit .crumbs { display: flex; } body.has-fit .page-head p { display: block; } }

/* ---- Super Admin: สร้างผู้ใช้บริการ / สร้างผู้ใช้งาน (ต้นไม้สิทธิ์ ระบบ → เมนู → เมนูย่อย) ---- */
.svc-grid { grid-template-columns: minmax(0, 625fr) minmax(0, 650fr); }
.svc-form .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.svc-form .field-icon .ic { width: 18px; height: 18px; }
.svc-form input.ro { background: #f3f5f9; color: #4a5672; }
.company-note { display: block; margin-top: 4px; font-size: 13px; }
.company-note.old { color: #0d6b45; }
.company-note.new { color: #b45309; }
.status-radio { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.status-radio > span { flex-basis: 100%; font-weight: 500; }
.radio.big input { width: 24px; height: 24px; accent-color: #0b5a34; }
.radio.big.red input { accent-color: #dc2626; }
.role-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px; background: #f5f8fc; flex-direction: row; }
.role-pick > span { display: inline-flex; gap: 6px; align-items: center; font-weight: 500; color: #1d3a8a; }
.role-pick select { margin-top: 0 !important; width: auto; min-width: 220px; }
.perm-tree { border: 1px solid #e3e9f3; border-radius: 10px; overflow: hidden; }
.pt-head { display: grid; grid-template-columns: 1fr 190px; background: #f5f8fc; font-weight: 500; font-size: 16px; color: #0d1b3d; text-align: center; }
.pt-head span { padding: 12px; }
.pt-head span + span { border-left: 1px solid #e3e9f3; }
.pt-row { display: grid; grid-template-columns: 1fr 190px; align-items: center; min-height: 46px; border-top: 1px solid #eef2f8; cursor: default; font-weight: 300; }
label.pt-row { cursor: pointer; }
.pt-cell { display: flex; align-items: center; gap: 12px; padding: 6px 14px; }
.pt-cell + .pt-cell { justify-content: center; border-left: 1px solid #eef2f8; align-self: stretch; }
.pt-cell.end { justify-content: flex-end; }
.pt-row input[type=checkbox] { width: 22px; height: 22px; accent-color: #1d4ed8; flex: none; }
.pt-row.lvl0 { min-height: 56px; }
.pt-row.lvl0 b { font-size: 16.5px; font-weight: 500; }
.pt-row.lvl1 .pt-cell:first-child { padding-left: 64px; }
.pt-row.lvl1 b { font-weight: 500; }
.pt-row.lvl2 .pt-cell:first-child { padding-left: 110px; }
.pt-ic { display: inline-grid; place-items: center; color: #0d1b3d; }
.pt-ic .ic { width: 26px; height: 26px; }
.pt-ic-sm .ic { width: 20px; height: 20px; }
.pt-off { font-style: normal; font-size: 12.5px; color: #b45309; }
.pt-sys .chev-btn { margin-left: 0; }
.pill.xs { padding: 1px 6px; font-size: 11.5px; }
.wh-pick { margin-top: 14px; }
.sys-icons { display: flex; gap: 6px; }
.sys-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef3fb; color: #1d3a8a; }
.sys-ic.wms { background: #e5f5ec; color: #0d6b45; }
.sys-ic.production { background: #f1ebfb; color: #6b3fb5; }
.scope-pick select { max-width: 100%; }
@media (max-width: 1280px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---- ฟอร์มสร้างผู้ใช้บริการ / ผู้ใช้งาน พอดี 1 จอ (เหมือนภาพที่ทีมออกแบบ) ---- */
.th-addr-inline { position: relative; }
.th-addr-inline .th-addr-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.svc-form .wz-steps { padding-top: 8px; padding-bottom: 8px; margin-bottom: 10px; }
.svc-form .wz-steps li span { width: 40px; height: 40px; font-size: 18px; }
.svc-form .wz-steps li b { font-size: 16px; }
.svc-form .sa-card { padding: 14px 18px 16px; }
.svc-form .wz-title { margin-bottom: 6px; font-size: 21px; }
.svc-form .wz-title small { font-size: 13px; }
.svc-form .wz-head { margin-bottom: 4px; }
.svc-form .wz-form { gap: 6px 16px; }
.svc-form .wz-form label, .svc-form .status-radio > span { font-size: 14.5px; }
.svc-form .wz-form input:not([type=checkbox]):not([type=radio]), .svc-form .wz-form select { height: 38px; margin-top: 3px; }
.svc-form .wz-form textarea { margin-top: 3px; }
.svc-form .pw input { height: 38px; }
.svc-form .status-radio { gap: 6px 24px; }
.svc-form .radio.big input { width: 20px; height: 20px; }
.svc-form .role-pick { margin: 2px 0 8px; padding: 5px 10px; }
.svc-form .pt-row { min-height: 42px; }
.svc-form .pt-row.lvl0 { min-height: 48px; }
.svc-form .pt-head span { padding: 9px; }
.svc-form .wh-pick { margin-top: 8px; }
.svc-form .wh-pick .sec { margin: 0 0 4px; font-size: 15px; }
.svc-form .wz-foot { margin-top: 10px; }
.svc-form .menu-table th { padding: 10px; }
.svc-form .menu-table td { padding: 8px 12px; }
.svc-form .info-box { padding: 8px 12px; }
.svc-grid { align-items: start; }
.svc-grid > .sa-card { display: flex; flex-direction: column; }
/* ต้นไม้สิทธิ์ยาว: เลื่อนในแผงขวา หน้าไม่ยาวตาม */
.svc-form .perm-tree { max-height: calc(100vh / var(--z, 1) - 470px); min-height: 220px; overflow: auto; }
.svc-form .pt-head { position: sticky; top: 0; z-index: 2; }
/* เมนูซ้ายไม่มีแถบเลื่อนแนวนอน */
.sidebar, .side, .side-nav { overflow-x: hidden; }
.svc-form .g4 { display: grid; grid-template-columns: 1.3fr 1fr 1fr 0.8fr; gap: 6px 14px; }
.svc-form .g3 .status-radio { align-self: end; padding-bottom: 6px; }
.svc-form .g3 .status-radio > span { flex-basis: 100%; }
.svc-form .remarks-field { position: relative; }
.svc-form .remarks-field .counter { position: absolute; right: 8px; bottom: 4px; }
@media screen { body:has(.svc-form) .page-foot { display: none; } body:has(.svc-form) .content { padding-bottom: 12px; } }
/* จอเตี้ย (โน้ตบุ๊ก): ฟอร์มสร้างผู้ใช้บริการ/ผู้ใช้งานยังอยู่ในจอเดียว */
@media screen and (max-height: 900px) {
  body:has(.svc-form) .page-head p, body:has(.svc-form) .page-head .sub { display: none; }
  body:has(.svc-form) .page-head { margin-bottom: 6px; }
  .svc-form .wz-steps { padding-top: 5px; padding-bottom: 5px; margin-bottom: 8px; }
  .svc-form .wz-steps li small { display: none; }
  .svc-form .wz-steps li span { width: 34px; height: 34px; font-size: 16px; }
  .svc-form .sa-card { padding: 10px 16px 12px; }
  .svc-form .wz-title { margin-bottom: 4px; font-size: 19px; }
  .svc-form .wz-form { gap: 4px 14px; }
  .svc-form .wz-form input:not([type=checkbox]):not([type=radio]), .svc-form .wz-form select, .svc-form .pw input { height: 34px; }
  .svc-form .pt-row { min-height: 38px; }
  .svc-form .pt-row.lvl0 { min-height: 42px; }
}
@media screen and (max-height: 900px) { .svc-form .wz-form > label.span2.pair { grid-column: auto; } }
@media screen and (max-height: 720px) { .svc-form .wz-foot { margin-top: 6px; } .svc-form .sa-card { padding-bottom: 8px; } body:has(.svc-form) .content { padding-bottom: 6px; } }
@media (max-width: 900px) { .svc-form .g4, .svc-form .g3 { grid-template-columns: 1fr 1fr; } .svc-form .perm-tree { max-height: none; } .th-addr-inline .th-addr-list { max-height: 50vh; overflow: auto; } }
@media (max-width: 560px) { .svc-form .g4, .svc-form .g3 { grid-template-columns: 1fr; } }
/* สถานะ = fieldset + legend (ผูกป้ายกับกลุ่มปุ่มเลือก) หน้าตาเหมือนเดิม */
.svc-form fieldset.status-radio { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; align-items: center; gap: 6px 24px; flex-wrap: wrap; }
.svc-form fieldset.status-radio > legend { float: left; width: 100%; padding: 0; font-weight: 500; font-size: 14.5px; }
@media print {
  .svc-form .perm-tree { max-height: none; min-height: 0; overflow: visible; }
  .svc-form .pt-head { position: static; }
}
/* รายการค้นหาในช่องตำบล: กว้างพอให้ ตำบล › อำเภอ › จังหวัด  รหัสไปรษณีย์ อยู่บรรทัดเดียว (เกินช่องตำบลไปทางขวาได้) */
.th-addr-inline .th-addr-list { right: auto; width: max(100%, 460px); max-width: calc(100vw / var(--z, 1) - 40px); }
.th-addr-inline .th-addr-list li { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.th-addr-inline .th-addr-list li em { float: none; margin-left: auto; padding-left: 12px; }
@media (max-width: 560px) { .th-addr-inline .th-addr-list { width: 100%; } .th-addr-inline .th-addr-list li { white-space: normal; flex-wrap: wrap; } }

/* รับสินค้า (ทีมแจ้ง 20/10/2026): รับทันที 1 แถว = 1 ล็อต · รับล่วงหน้าซ่อนช่องล็อต · popup รับสินค้าบนรายการรับ */
#lines-table.adv .imm { display: none; }
#lines-table td input, #lines-table td select { min-width: 0; }
#lines-table td input[type=date] { width: 150px; }
#lines-table td select[data-place] { min-width: 150px; }
#lines-table td select[name$="[unit_id]"] { min-width: 96px; }
#lines-table td .btn { white-space: nowrap; }
#lines-table td input[name$="[mfg_lot]"] { width: 130px; }
tr.rl-split td { background: #f3faf6; border-top: 1px dashed #b9dcc7; }
.rcv-modal-bg { position: fixed; inset: 0; z-index: 80; background: rgba(13, 27, 61, .45); }
.rcv-modal { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1280px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
.rcv-modal > header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 24px 10px; border-bottom: 1px solid var(--line); }
.rcv-modal > header h2 { font-size: 22px; font-weight: 600; color: var(--blue); }
.rcv-modal > header p { font-size: 14px; color: var(--blue); }
.rcv-modal .rcv-x { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--blue); cursor: pointer; text-decoration: none; }
.rcv-body { overflow: auto; padding: 14px 24px; }
.rcv-info { display: grid; grid-template-columns: 96px minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rcv-info .rcv-ic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 10px; background: #eef4fc; color: #1d5fd0; }
.rcv-info .rcv-ic .ic { width: 52px; height: 52px; }
.rcv-info dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.rcv-info dt { color: var(--blue); } .rcv-info dd { margin: 0; color: #1d3b8f; }
.rcv-info dl + dl { padding-left: 18px; border-left: 1px solid var(--line); }
.rcv-sub { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 8px; }
.rcv-sub h3 { font-size: 19px; font-weight: 600; color: var(--blue); }
.rcv-table th, .rcv-table td { white-space: nowrap; }
.rcv-table td input.w-qty { width: 90px; }
.rcv-table td input[type=date] { width: 140px; }
.rcv-table td input[data-lot] { width: 140px; }
.rcv-table tr.rl-split td { background: #f3faf6; }
.rcv-table tr.rl-split td:first-child { border-left: 3px solid #0e8a47; }
.rcv-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 24px 18px; border-top: 1px solid var(--line); }
.rcv-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; background: #eef4fc; font-size: 13.5px; color: var(--blue); }
.rcv-note .ic { flex: none; color: #1d5fd0; }
.rcv-note ul { margin: 0; padding-left: 18px; }
.rcv-foot .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.rcv-foot .btn { min-width: 130px; justify-content: center; }
.btn.blue { background: #1d6ef0; border-color: #1d6ef0; color: #fff; }
.btn.blue:hover { background: #155ad0; }
body.rcv-on { overflow: hidden; }
@media (max-width: 900px) { .rcv-info { grid-template-columns: 1fr; } .rcv-info .rcv-ic { display: none; } .rcv-info dl + dl { padding-left: 0; border-left: 0; } }

/* หน้า "ผู้ใช้งาน" ของแต่ละระบบ (ทีมแจ้ง 20/10/2026 ข้อ 12) */
.su-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
.su-menu { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.su-menu > b { font-size: 13.5px; color: var(--blue); }
.su-menu .check { font-size: 13px; }
.su-whs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; margin-top: 6px; }
.su-whs.muted { opacity: .55; }
form.inline { display: inline; }

/* โลโก้ใหม่ในเมนูซ้ายทุกระบบ (ทีมแจ้ง 20/10/2026): โลโก้เต็ม + ชื่อระบบใต้โลโก้ */
.brand.full.sys { flex-direction: column; gap: 2px; height: auto; padding: 8px 8px 6px; }
.brand.full.sys img { width: 170px; }
.brand.full.sys small { font-size: 13.5px; line-height: 1.2; font-weight: 600; color: var(--green-600); letter-spacing: .2px; }
.foot-logo .foot-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: #fff; vertical-align: middle; }
.foot-logo .foot-mark img { width: 16px; height: auto; display: block; }

/* popup ผลการนำเข้าไฟล์ (แก้ไข04) */
.imp-sum { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; font-size: 16px; }
.imp-sum li { display: flex; align-items: center; gap: 8px; }
.imp-sum .good { color: var(--green, #15803d); }
.imp-sum .bad { color: #dc2626; }
.imp-table td.cell-bad { background: #fee2e2; color: #b91c1c; font-weight: 600; outline: 1px solid #fca5a5; }
.imp-table td.imp-err { color: #b91c1c; font-size: 13px; min-width: 220px; }

/* ชื่อผู้ใช้งาน: รหัสบริษัทนำหน้า (แก้ไข04) */
.pfx-input { display: flex; align-items: stretch; }
.pfx-input .pfx { display: inline-flex; align-items: center; padding: 0 10px; background: var(--soft, #eef4fb); border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; font-weight: 600; color: var(--blue); }
.pfx-input .pfx[hidden] { display: none; }
.pfx-input .pfx:not([hidden]) + input { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; }
.pfx-input input { flex: 1; min-width: 0; }
.req-note { color: #b91c1c; }

/* เบิกสินค้า (ภาพ eConnect_เบิก_1-9 แก้ไข05) */
.wd-top { display: grid; grid-template-columns: 1fr 220px 260px; gap: 16px; align-items: end; }
.wd-top .radio-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wd-top .tip { color: var(--blue); cursor: help; display: inline-flex; }
.wd-cards .wd-card { display: flex; flex-direction: column; gap: 12px; }
.wd-info { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.wd-info.wd-item { grid-template-columns: 96px 1fr 1fr; }
.wd-pic { width: 96px; height: 96px; border-radius: 12px; background: var(--soft, #eef4fb); display: grid; place-items: center; color: var(--blue); }
.wd-pic .ic { width: 44px; height: 44px; }
.wd-kv { margin: 0; display: grid; gap: 4px; font-size: 14px; }
.wd-kv > div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.wd-kv dt { color: var(--muted, #5b6b86); font-weight: 400; } .wd-kv dd { margin: 0; color: var(--blue); }
.wd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.wd-two dl + dl { padding-left: 18px; border-left: 1px solid var(--line); }
.wd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd-stats .st, .wd-tiles .st { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.wd-stats .st b, .wd-tiles .st b { display: block; font-size: 17px; }
.st.blue b, .st.blue .ic { color: var(--blue); } .st.orange b, .st.orange .ic { color: #ea7a0f; } .st.purple b, .st.purple .ic { color: #7c3aed; } .st.green b, .st.green .ic { color: #15803d; }
.st.green { background: #ecfdf3; } .st.orange { background: #fff7ed; }
.wd-stats .wd-add { grid-column: 1 / -1; justify-content: center; }
.wd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0; }
.wd-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wd-how { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-how .btn[disabled] { opacity: .45; cursor: not-allowed; }
.wd-lots { display: block; margin-top: 4px; }
.wd-lot-head { display: grid; grid-template-columns: 96px 1fr 1fr auto; gap: 16px; align-items: center; margin-bottom: 12px; }
.wd-need { text-align: right; } .wd-need b { display: block; font-size: 30px; color: var(--blue); }
.wd-sum b { font-size: 22px; color: var(--blue); margin: 0 18px 0 6px; }
.wd-filters .range { display: flex; gap: 6px; align-items: center; }
.progress.inline { display: inline-block; width: 80px; vertical-align: middle; }
.progress.full span { background: #15803d; }
.pill.outline { background: #fff; border: 1px solid var(--line); color: var(--ink, #1f2a44); }
.icon-btn[aria-disabled="true"] { opacity: .3; cursor: not-allowed; }
td.center, th.center { text-align: center; }
@media (max-width: 1100px) { .wd-top, .wd-info.wd-item, .wd-lot-head { grid-template-columns: 1fr; } .wd-tiles { grid-template-columns: 1fr 1fr; } }
.wd-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.wd-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 900px) { .wd-four, .wd-three { grid-template-columns: 1fr 1fr; } }
/* แพ็กสินค้า (ภาพ แพ็ค 1-3 แก้ไข05) */
.pk-head { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 24px; }
.pk-head > * + * { padding-left: 20px; border-left: 1px solid var(--line); }
.pk-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .pk-bar .progress { flex: 1; }
.pk-box select { width: 100%; } .pk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk-scan { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pk-scan-form { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 320px; }
.pk-scan-form input[name="code"] { flex: 1; }
.pk-scan-ic { display: grid; place-items: center; width: 46px; height: 42px; border-radius: 8px; background: var(--soft, #eef4fb); color: var(--blue); }
.pk-tables .row-ok td { background: #ecfdf3; } .pk-tables td.bad { color: #dc2626; } .pk-tables .row-ok .ic { color: #16a34a; }
.wd-kv dd.ok { color: #15803d; }
@media (max-width: 1100px) { .pk-head { grid-template-columns: 1fr; } .pk-head > * + * { padding-left: 0; border-left: 0; } }
/* ลูกค้า / เวนเดอร์ (แก้ไข06 ข้อ 4): Export · Template · Import Excel แถวเดียวกัน · ปุ่มเพิ่ม ลงไปแถวล่าง */
.pt-list-head .pt-search { flex-wrap: nowrap; }
.pt-list-head .pt-search .btn { white-space: nowrap; }
.pt-list-head::after { content: ''; flex-basis: 100%; order: 4; height: 0; }
.pt-list-head .drawer-add { order: 5; margin-left: auto; }
@media (max-width: 1100px) { .pt-list-head .pt-search { flex-wrap: wrap; } }

/* พิมพ์บาร์โค้ด (แก้ไข06) */
.bc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; align-items: start; }
.bc-side { display: grid; gap: 14px; }
.bc-set .radio-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.bc-ic .ic { width: 22px; height: 22px; vertical-align: middle; }
.bc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.bc-copies { display: flex; } .bc-copies input { flex: 1; border-radius: 8px 0 0 8px; } .bc-copies span { padding: 0 12px; display: grid; place-items: center; background: var(--soft, #eef4fb); border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; }
.bc-prev { background: #eef4fb; } .bc-prev-box { display: grid; place-items: center; padding: 10px; }
.bc-btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; } .bc-btns .btn { justify-content: center; min-height: 52px; }
.bc-thumb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--soft, #eef4fb); color: var(--blue); }
.bc-list tr[data-bc-row] { cursor: pointer; }
/* ป้าย */
.bl { width: 70mm; height: 50mm; box-sizing: border-box; border: 1.5px solid #111; border-radius: 3mm; padding: 2.5mm 3.5mm; background: #fff; color: #000;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; break-inside: avoid; font-family: inherit; }
.bl-top { display: flex; justify-content: space-between; align-items: center; gap: 2mm; }
.bl-logo { height: 7mm; width: auto; }
.bl-pcode { font-weight: 600; font-size: 3.3mm; }
.bl-wh { background: #111; color: #fff; border-radius: 1.5mm; padding: 1mm 3mm; text-align: center; line-height: 1.1; } .bl-wh b { display: block; font-size: 3.6mm; } .bl-wh small { font-size: 2.6mm; }
.bl-title { text-align: center; font-weight: 700; font-size: 4.4mm; line-height: 1.15; max-height: 10mm; overflow: hidden; }
.bl-loc .bl-title { font-size: 6.5mm; }
.bl-code { display: flex; justify-content: center; align-items: center; min-height: 0; flex: 1 1 0; overflow: hidden; margin: 1mm 0; }
.bl-code svg { max-width: 100%; height: 100%; width: auto; }
.bl-prod:not(.bl-qr) .bl-code svg { width: 100%; height: 100%; }
.bl-num { text-align: center; font-size: 3.4mm; letter-spacing: .3mm; font-weight: 600; }
.bl-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #111; padding-top: 1mm; font-size: 3mm; font-weight: 600; text-align: center; }
.bl-foot span + span { border-left: 1px solid #111; }
@media (max-width: 1200px) { .bc-wrap { grid-template-columns: 1fr; } }
.pk-switch { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin: -6px 0 10px; } .pk-switch input { width: 240px; }
.bl-note { text-align: center; font-size: 2.4mm; color: #555; }

/* แผนผลิตแบบคลังทำงาน (แก้ไข08) */
.mrp-stage-lines .stage-head td { background: #e9f6ee; padding: 8px 10px; }
.mrp-stage-lines .stage-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mrp-stage-lines .stage-bar select { width: 320px; max-width: 100%; display: inline-block; flex: 0 0 auto; height: 36px; }
.mrp-stage-lines .stage-bar b { color: #14532d; white-space: nowrap; }
.mrp-stage-lines .stage-tools .btn.sm { padding: 4px 10px; min-height: 32px; }
.mrp-stage-lines .stage-tools { display: flex; gap: 6px; align-items: center; } /* แก้ไข15.1: ต่อจากจำนวนรายการ (ไม่ชิดขวาสุดของตารางที่กว้าง จนมองไม่เห็น) */
.mrp-stage-lines .stage-tools .del-stage { display: inline-flex; align-items: center; gap: 4px; color: #b42318; border-color: #f3b8b2; }
.mrp-stage-lines select { min-width: 120px; }
.mrp-add-stage { flex-wrap: wrap; }
.mrp-route { margin: 10px 0; } .mrp-route input[type="date"] { min-width: 150px; }

/* แก้ไข09: ปุ่ม เบิกสินค้า (กำหนดวันเบิกสินค้า) น้ำเงิน = ยังไม่กำหนด · เขียว = กำหนดแล้ว */
.btn.blue-solid { background: #1d3fd8; border-color: #1d3fd8; color: #fff; }
.btn.blue-solid:hover { background: #1733b5; }
.btn.green-solid { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn.green-solid:hover { background: #138a3f; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
dialog.mrp-dlg.wide { width: min(860px, calc(100vw - 32px)); }
dialog.mrp-dlg footer.split { justify-content: space-between; }
.w-method { min-width: 205px; }
.table tr.row-hl td { background: #f0f7f2; }

/* ---------- รายงานคลังสินค้า (แก้ไข15.1) ---------- */
.report-wh { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); }
.report-wh span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; background: #eef1f5; color: #667; font-weight: 400; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 14px; border-radius: 12px; background: #eef8f1; }
.report-card { display: flex; gap: 12px; align-items: center; padding: 6px 8px; }
.report-card .rc-ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: #d9f2e2; color: #157347; }
.report-card .rc-ic .ic { width: 26px; height: 26px; }
.report-card.blue .rc-ic { background: #dde9fb; color: #1d4ed8; } .report-card.orange .rc-ic { background: #fdebd3; color: #c2610c; }
.report-card.red .rc-ic { background: #fde2e1; color: #c0262d; } .report-card.purple .rc-ic { background: #ece3fb; color: #7c3aed; } .report-card.gray .rc-ic { background: #e9ecef; color: #555; }
.report-card small { display: block; color: #335; font-size: 13px; }
.report-card b { font-size: 24px; color: #14365f; } .report-card em { font-style: normal; color: #667; font-size: 13px; }
.rep-bar { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: #e6e9ef; vertical-align: middle; overflow: hidden; }
.rep-bar i { display: block; height: 100%; background: #9aa4b2; } .rep-bar.green i { background: #16a34a; } .rep-bar.blue i { background: #2563eb; } .rep-bar.orange i { background: #f59e0b; }
.report-table td, .report-table th { white-space: nowrap; }
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .page-foot, .report-filters { display: none !important; }
  .print-only { display: block; }
  .shell, .main, .content { display: block !important; margin: 0 !important; padding: 0 !important; }
  .report-table { font-size: 10px; } .table-wrap { overflow: visible !important; }
}

/* แก้ไข16 ข้อ 5: ปรับจำนวน — เลือกคลัง WIP ต้นทาง · แถวเบิก WIP ค้าง */
.mrp-adjust select.w-wh { width: auto; min-width: 110px; margin-top: 4px; padding: 2px 6px; font-size: 12px; }
.mrp-adjust tr.wip-stock-row td { background: #faf5ff; }

/* แก้ไข18 ข้อ 4: แผนผลิต — ช่องที่ผู้ใช้ต้องกรอก / เลือกเอง (คลัง · Activity · จำนวน) สีเทาบางๆ */
.mrp-stage-lines td select:not(:disabled), .mrp-stage-lines td input.num:not(:disabled) { background-color: #eef0f3; border-color: #cfd5dc; }
.mrp-stage-lines td select:not(:disabled):focus, .mrp-stage-lines td input.num:not(:disabled):focus { background-color: #fff; }

/* แก้ไข17: ระบบจัดซื้อ (eConnect จัดซื้อ Module) */
.pur-cards { background: transparent; padding: 0; }
.pur-cards .report-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; padding: 14px; color: inherit; text-decoration: none; position: relative; box-shadow: 0 1px 2px rgba(13, 27, 61, .04); }
.pur-cards a.report-card:hover { border-color: #9fc7ae; }
.pur-cards .report-card.on { border: 2px solid #f0a325; background: #fffdf6; }
.pur-cards .report-card.green.on { border-color: #157347; background: #f3fbf6; }
.pur-cards .report-card .rc-go { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #8a96a8; }
.report-card.green .rc-ic { background: #d9f2e2; color: #157347; }
.report-card.yellow .rc-ic { background: #fdf2cc; color: #8a5a00; }
.pur-today { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; color: #335; }
.pur-today b { color: #14365f; }
.pur-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pur-split.with-panel { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 1180px) { .pur-split.with-panel { grid-template-columns: minmax(0, 1fr); } }
.pur-filter { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; }
.pur-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #335; min-width: 130px; }
.pur-filter label.grow { flex: 1 1 260px; }
.pur-filter .range { display: flex; gap: 6px; align-items: center; }
.pur-filter .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pur-filter.inline { margin: 0; align-items: center; }
.pur-table tr.sel td { background: #f0f6ff; }
.pur-table td.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pur-table .act { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #335; }
.pur-panel { position: sticky; top: 12px; padding: 0; overflow: hidden; }
.pur-panel .pp-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #eef1f5; }
.pur-panel .pp-head h2 { font-size: 17px; margin: 0; color: #0d1b3d; }
.pur-panel .pp-head .x { font-size: 22px; text-decoration: none; color: #445; }
.pur-panel .pp-top { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.pur-panel .pp-top h3 { margin: 6px 0 0; font-size: 20px; color: #0d1b3d; }
.pur-panel .pp-top dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 2px 8px; font-size: 12px; color: #556; }
.pur-panel .pp-top dd { margin: 0; color: #14365f; }
.pp-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid #eef1f5; overflow-x: auto; }
.pp-tabs label { cursor: pointer; }
.pp-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.pp-tabs span { display: block; padding: 8px 10px; font-size: 13px; color: #556; border-bottom: 2px solid transparent; white-space: nowrap; }
.pp-tabs input:checked + span { color: #157347; border-bottom-color: #157347; font-weight: 600; }
.pp-tabs input:focus-visible + span { outline: 2px solid #157347; }
.pp-body { padding: 12px 16px; max-height: 52vh; overflow: auto; }
.pp-body h4 { margin: 4px 0 8px; font-size: 14px; color: #14365f; }
.pp-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.pp-kv dt { color: #667; }
.pp-kv dd { margin: 0; color: #0d1b3d; }
.pp-box { margin-top: 12px; padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 10px; background: #f8fafc; }
.pp-reason { margin-top: 12px; padding: 10px 12px; border-left: 4px solid #e5484d; background: #fff6f6; border-radius: 6px; }
.pp-note { margin-top: 12px; padding: 10px 12px; border-left: 4px solid #f0a325; background: #fff9ec; border-radius: 6px; }
.pp-reason p, .pp-note p { margin: 4px 0 0; }
.pp-sum { margin-top: 12px; padding: 10px 12px; border: 1px solid #e3e8ef; border-radius: 10px; display: grid; gap: 6px; }
.pp-sum div { display: flex; justify-content: space-between; gap: 10px; }
.pp-sum b { margin-left: auto; color: #0d1b3d; }
.po-sum { max-width: 420px; margin-left: auto; }
.pp-log { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13px; }
.pp-log p { margin: 2px 0 0; color: #445; }
.pp-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.pp-files li { display: flex; gap: 6px; align-items: center; }
.pp-files small { margin-left: auto; color: #889; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-top: 1px solid #eef1f5; }
.pp-actions .btn { flex: 1 1 140px; justify-content: center; }
.pp-actions .btn.block { flex-basis: 100%; }
.pp-actions .inline-form { display: contents; }
.btn.outline.danger { color: #c0262d; border-color: #f1b5b7; }
.btn.danger:not(.outline) { background: #c0262d; color: #fff; border-color: #c0262d; }
.pur-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.pur-row.three { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .pur-row, .pur-row.three { grid-template-columns: minmax(0, 1fr); } }
.pur-donut-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pur-donut { width: 170px; height: 170px; flex: 0 0 auto; }
.pur-donut .dn { font-size: 28px; font-weight: 700; fill: #0d1b3d; }
.pur-donut .dl { font-size: 13px; fill: #667; }
.pur-donut-wrap .legend { flex: 1 1 140px; }
.pur-donut-wrap .legend li { display: flex; gap: 6px; align-items: center; }
.pur-donut-wrap .legend b { margin-left: auto; }
.pur-form .card { margin-bottom: 16px; }
.pur-step { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 12px; color: #0d1b3d; }
.pur-step span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #157347; color: #fff; font-size: 14px; }
.pur-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.pur-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pur-grid label { display: block; font-size: 14px; color: #0d1b3d; }
.pur-grid label > input, .pur-grid label > select, .pur-grid label > textarea, .pur-grid label > .code-auto { display: block; width: 100%; margin-top: 4px; }
.pur-grid label > small { display: block; margin-top: 2px; }
.pur-grid .span3 { grid-column: span 3; }
.pur-grid .span4 { grid-column: 1 / -1; }
@media (max-width: 900px) { .pur-grid, .pur-grid.two { grid-template-columns: minmax(0, 1fr); } .pur-grid .span3 { grid-column: auto; } }
.pur-radio { border: 0; padding: 0; margin: 0; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pur-radio legend { font-size: 14px; color: #0d1b3d; padding: 0; margin-bottom: 4px; }
.pur-radio label { flex-direction: row; align-items: center; gap: 6px; }
.pur-lines td input, .pur-lines td select { width: 100%; min-width: 80px; }
.pur-lines td input.num { min-width: 90px; }
.pur-lines td [data-name] { display: block; font-size: 13px; margin-bottom: 4px; }
.pur-lines tfoot td { background: #f5f7fa; }
.file-btn { cursor: pointer; }
.pur-files-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .pur-files-grid { grid-template-columns: minmax(0, 1fr); } }
.pur-files .drop { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 20px; border: 2px dashed #c9d3df; border-radius: 12px; cursor: pointer; color: #445; text-align: center; flex-wrap: wrap; }
.pur-files .drop small { display: block; color: #889; }
.pur-files .drop input { max-width: 240px; }
.pur-sec { margin: 14px 0 8px; padding: 6px 10px; background: #eef3fb; border-radius: 6px; font-size: 15px; color: #14365f; }
.pur-vendor-dlg { width: min(880px, calc(100vw - 32px)); }
.pur-vendor-dlg .code-auto { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pur-vendor-dlg .code-auto input[name="code"] { flex: 0 1 140px; }
.pur-vendor-dlg .chk { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
dialog.mrp-dlg .dlg-body { padding: 14px 18px; max-height: 70vh; overflow: auto; }
dialog.mrp-dlg header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eef1f5; }
dialog.mrp-dlg header .x { font-size: 22px; text-decoration: none; color: #445; background: none; border: 0; cursor: pointer; }
dialog.mrp-dlg footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #eef1f5; }
dialog.mrp-dlg textarea { width: 100%; }
.pur-recv { width: min(1180px, calc(100vw - 32px)); }
.pur-recv-table tr.sub td { background: #f5f7fa; }
.pur-stock-dlg { width: min(900px, calc(100vw - 32px)); }
.psd-top { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.psd-top .pp-kv { flex: 1 1 260px; }
.psd-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1 1 380px; }
.psd-kpi div { border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px; }
.psd-kpi small { display: block; color: #667; }
.psd-kpi b { font-size: 22px; color: #157347; }
.psd-kpi em { font-style: normal; color: #667; margin-left: 4px; }
.psd-alert { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 10px; background: #fff1f1; color: #c0262d; flex: 0 1 320px; }
.psd-alert b { display: block; font-size: 24px; }
.psd-alert small { display: block; }
.alert.slim { padding: 8px 12px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; }
.dot.yellow { background: #f0a325; }

/* ===== แก้ไข19: popup รับทั้งหมดแต่รับไม่ครบ ===== */
.rcv-short { border: 0; border-radius: 14px; padding: 22px 24px; width: min(640px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.rcv-short::backdrop { background: rgba(15, 23, 42, .45); }
.rcv-short h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 12px; color: var(--text, #1f2937); }
.rcv-short h2 .ic { color: #d97706; }
.rcv-short .rcv-short-left { color: #dc2626; font-weight: 600; }
.rcv-short-q { text-align: center; font-weight: 600; margin: 16px 0 12px; }
.rcv-short .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }