/* One stylesheet, two surfaces. Desktop is dense and informational; mobile is
   thumb-sized because it is used standing up, one-handed, wearing gloves. */
:root{--bg:#0f1720;--ink:#eef3f7;--muted:#8fa1b0;--line:#2b3b4c;--card:#1b2836;--field:#0f1720;
--in:#37b37e;--out:#e0803a;--warn:#e6c14e;--bad:#e2564c;--accent:#3585c4;--radius:10px}
*{box-sizing:border-box}
:root{color-scheme:dark}
body{margin:0;font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
h1{font-size:22px;margin:16px 0 12px}h2{font-size:15px;margin:0 0 10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}.num{text-align:right;font-variant-numeric:tabular-nums}
.err{background:rgba(226,86,76,.15);color:#f2a29b;padding:8px 10px;border-radius:6px;margin:0 0 10px}
/* desktop */
.topbar{display:flex;align-items:center;gap:18px;background:#16222e;color:#fff;padding:0 22px;height:52px;border-bottom:1px solid var(--line)}
.topbar a{color:#cfd8e0;text-decoration:none}.topbar a:hover{color:#fff}
.topbar .brand{font-weight:700;letter-spacing:.14em;color:#fff;display:flex;align-items:center}.topbar .brand img{height:30px;display:block}.topbar .spacer{flex:1}.topbar .who{color:#8fa1b0;font-size:13px}
.topbar .sysname{font-weight:800;letter-spacing:.06em;color:#fff;font-size:15px;text-decoration:none;margin-right:6px;white-space:nowrap}
.topbar .sysname:hover{color:#fff}
.topbar .navlink{padding:6px 12px;border-radius:7px;transition:background .12s,color .12s}
.topbar .navlink:hover{background:rgba(255,255,255,.07)}
.topbar .navlink.active{color:#fff;background:rgba(53,133,196,.28);box-shadow:inset 0 -2px 0 var(--accent)}
@media(max-width:760px){.topbar .sysname{display:none}}
.login-logo{display:block;width:150px;max-width:70%;height:auto;margin:0 auto 14px}
.mlogo{display:block;width:140px;max-width:60%;height:auto;margin:2px auto 14px}
.wrap{max-width:1180px;margin:0 auto;padding:6px 22px 60px}
.centered{display:flex;min-height:100vh;align-items:center;justify-content:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--muted);font-size:13px}
.kpi span{display:block;font-size:30px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi.warn span{color:var(--bad)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
th,td{padding:7px 8px;border-bottom:1px solid var(--line)}
table.kv td:first-child{color:var(--muted);width:40%}
.list{padding:0;overflow:hidden}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input{flex:1;min-width:220px}
.filters .spacer{flex:1 0 0;min-width:0}
@media(max-width:640px){.filters .spacer{display:none}}
input,select{padding:9px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;background:var(--field);color:var(--ink)}
input::placeholder{color:var(--muted)}
button,.btn{padding:9px 14px;border:0;border-radius:7px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#243447;color:var(--muted)}
.pill.in_stock,.pill.in,.pill.ok,.pill.new_tag{background:rgba(55,179,126,.18);color:#4fd39a}
.pill.issued,.pill.out{background:rgba(224,128,58,.18);color:#f0a45f}
.pill.missing,.pill.invalid,.pill.not_in_stock{background:rgba(226,86,76,.2);color:#f0857b}
.pill.moved,.pill.unexpected,.pill.duplicate,.pill.already_in_stock,.pill.adjust_add,.pill.adjust_remove{background:rgba(230,193,78,.18);color:#e6c14e}
.login{width:340px}.login input,.login button{width:100%;margin-bottom:10px}
/* material card-grid view */
.viewtoggle{display:inline-flex;gap:0}
.viewtoggle .btn{border-radius:0}.viewtoggle .btn:first-child{border-radius:7px 0 0 7px}.viewtoggle .btn:last-child{border-radius:0 7px 7px 0;border-left:0}
.viewtoggle .btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:16px}
.item-card{display:flex;flex-direction:column;gap:8px;padding:14px;margin:0;color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.item-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,80,125,.10)}
.item-card .ic-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.item-card .ic-tag{font-size:12px;color:var(--muted);font-family:ui-monospace,Consolas,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-card .ic-part{font-size:18px;font-weight:700;line-height:1.2}
.item-card .ic-spec{font-size:13px}
.item-card .ic-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:2px 0 0}
.item-card .ic-meta>div{display:flex;flex-direction:column}
.item-card .ic-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.item-card .ic-meta dd{margin:0;font-size:14px;font-variant-numeric:tabular-nums}
.item-card .ic-foot{font-size:12px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.pad{padding:16px}
/* location card-grid view */
.loc-card{display:flex;flex-direction:column;gap:8px;padding:14px;margin:0;color:var(--ink);text-decoration:none;transition:border-color .12s,box-shadow .12s}
.loc-card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(20,80,125,.10)}
.loc-card .ic-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.loc-card .lc-shelf{font-size:18px;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.loc-card .lc-count{font-size:20px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.loc-card .lc-count.has{color:var(--in)}
.loc-card .lc-qr code{font-size:12px;word-break:break-all}
.loc-card .ic-foot{font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
/* sortable tables */
th.th-sort{cursor:pointer;user-select:none;white-space:nowrap}
th.th-sort:hover{color:var(--ink)}
th.th-sort::after{content:"\2195";opacity:.35;margin-left:4px;font-size:10px}
th.th-sort[aria-sort="ascending"]::after{content:"\2191";opacity:1}
th.th-sort[aria-sort="descending"]::after{content:"\2193";opacity:1}
th.th-sort:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* server-side sort header links (Materials) */
th .sortlink{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font:inherit;font-weight:600;white-space:nowrap}
th .sortlink:hover{color:var(--ink)}
th .sortlink::after{content:"\2195";opacity:.3;font-size:10px}
th .sortlink.asc::after{content:"\2191";opacity:1}
th .sortlink.desc::after{content:"\2193";opacity:1}
.perpage{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap}
.perpage select{width:auto;min-width:0}
.pager{display:flex;gap:14px;align-items:center;justify-content:center}
.inline{display:flex;gap:8px;margin-top:12px}
/* mobile */
body.mobile{background:#0f1720;color:#eef3f7}
.mbar{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#16222e;position:sticky;top:0;z-index:5}
.mbar .back{color:#8fa1b0;font-size:26px;text-decoration:none;line-height:1}
.mtitle{font-weight:700;flex:1}.muser{font-size:12px;color:#8fa1b0}
.mwrap{padding:14px;padding-bottom:90px;max-width:560px;margin:0 auto}
.mcard{background:#1b2836;border-radius:14px;padding:16px;margin-bottom:14px}
.mcard input{width:100%;margin-bottom:10px;background:#0f1720;border-color:#2b3b4c;color:#fff}
button.big,.big.btn{width:100%;padding:16px;font-size:17px;border-radius:12px;text-align:center}
.menu{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
padding:26px 10px;border-radius:16px;text-decoration:none;color:#fff;font-weight:700;font-size:17px;background:#243447}
.tile .ico{font-size:30px}
.tile.in{background:#12603f}.tile.out{background:#8a4310}.tile.chk{background:#1b4f7a}
.reader{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3;margin-bottom:12px}
.reader video{width:100%;height:100%;object-fit:cover}
.reader::after{content:"";position:absolute;inset:18% 12%;border:3px solid rgba(255,255,255,.75);border-radius:12px}
.scanhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.counter{text-align:right}.counter span{font-size:32px;font-weight:800;display:block;line-height:1}
.counter small{color:#8fa1b0;font-size:11px;text-transform:uppercase}
.manualrow{display:flex;gap:8px;margin-bottom:12px}.manualrow input{flex:1;background:#0f1720;border-color:#2b3b4c;color:#fff}
.lines{list-style:none;padding:0;margin:0}
.lines li{background:#1b2836;border-left:5px solid #35506b;border-radius:8px;padding:10px 12px;margin-bottom:8px}
.lines li b{display:block;font-size:15px}.lines li span{font-size:12px;color:#93a6b8}
.lines li.ok,.lines li.new_tag{border-left-color:#2ea36b}
.lines li.duplicate,.lines li.moved,.lines li.unexpected,.lines li.queued,.lines li.already_in_stock{border-left-color:#d9a520}
.lines li.invalid,.lines li.not_in_stock{border-left-color:#e2564c}
.footbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;padding:12px 14px;background:#16222e;max-width:560px;margin:0 auto}
.footbar form{flex:0 0 auto}.footbar .big.btn{flex:1}
.toast{position:fixed;left:14px;right:14px;bottom:80px;background:#243447;padding:12px 14px;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;font-size:14px}
.toast.show{opacity:1}.toast.bad{background:#7a2a24}.toast.warn{background:#7a5a12}
.totals{display:flex;justify-content:space-between;text-align:center}
.totals span{display:block;font-size:26px;font-weight:800}.totals div{font-size:11px;color:#8fa1b0;text-transform:uppercase}
.warnbox{border:1px solid #6d5a1e}.bad{border:1px solid #7a2a24}
.warnbox ul,.bad ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:#c3d0da}
.done{text-align:center}.tick{font-size:56px;color:#2ea36b}
.applied{list-style:none;padding:0;color:#93a6b8}
.check{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:14px}
.check input{width:auto;margin:0}
.step{color:#8fa1b0;font-size:13px;margin-top:0}
.resume{border:1px solid #3b5470}
@media(max-width:900px){.cols,.kpis{grid-template-columns:1fr 1fr}}