/* ============================================================
   IQOS-OPS — design tokens
   ปรับที่นี่ที่เดียว ทุกหน้าเปลี่ยนตาม
   ============================================================ */
:root{
  /* brand — ดึงจาก i-qos-thai.com: --s-color-1 #47be9d (มิ้นท์) · --s-color-2 #67d88f */
  --mint:#47be9d; --mint-2:#67d88f;

  --bg:#f5f7f7; --surface:#fff; --surface-2:#fafbfb; --surface-3:#eff2f2;
  --line:#e2e7e6; --line-strong:#ccd4d3;
  /* --text-3 ต้องผ่าน AA บนพื้นทุกตัว (บน --bg #f5f7f7 = 4.8:1) — อ่อนกว่านี้ไม่ผ่านเกณฑ์ */
  --text:#141a19; --text-2:#586462; --text-3:#666f6d;
  /* accent = พื้น/แบรนด์ · accent-ink = ตัวอักษรบนพื้นมิ้นท์ · accent-text = ตัวอักษรสีแบรนด์บนพื้นอ่อน (ต้องผ่าน AA) */
  --accent:#47be9d; --accent-hover:#3aab8c; --accent-ink:#06251d;
  --accent-text:#1c7a63; --accent-soft:#e7f6f1; --accent-line:#b3e2d3;
  --warn:#9a5600; --warn-soft:#fdf1e0; --warn-line:#f0d5ab;
  --danger:#b3261e; --danger-soft:#fdecea; --danger-line:#f2c2be;
  --info:#175cd3; --info-soft:#eaf1fd; --info-line:#c2d6f7;

  /* shape: อินพุต/ปุ่ม 8 · การ์ด 14 · pill เต็ม — กติกาเดียวทั้งระบบ */
  --r-field:8px; --r-card:14px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(10,26,22,.05), 0 1px 3px rgba(10,26,22,.04);
  --shadow-2:0 4px 12px rgba(10,26,22,.07), 0 2px 4px rgba(10,26,22,.04);
  --shadow-3:0 16px 48px rgba(10,26,22,.16);
  --sidebar-w:236px; --topbar-h:56px; --bottomnav-h:0px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Helvetica Neue",Arial,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#0d1211; --surface:#151b1a; --surface-2:#1a2120; --surface-3:#222b29;
    --line:#27302e; --line-strong:#3a4644;
    --text:#e8efed; --text-2:#96a4a1; --text-3:#8a9895; /* AA บน --surface #151b1a = 5.8:1 */
    --accent:#47be9d; --accent-hover:#5cd0b0; --accent-ink:#04201a;
    --accent-text:#5fd3b2; --accent-soft:#10322a; --accent-line:#1e5546;
    --warn:#e0a35c; --warn-soft:#2c2214; --warn-line:#523f20;
    --danger:#f2837a; --danger-soft:#31191a; --danger-line:#5a2a29;
    --info:#7fb0f5; --info-soft:#131f31; --info-line:#243f69;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45);
    --shadow-3:0 18px 52px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#0d1211; --surface:#151b1a; --surface-2:#1a2120; --surface-3:#222b29;
  --line:#27302e; --line-strong:#3a4644;
  --text:#e8efed; --text-2:#96a4a1; --text-3:#8a9895; /* AA บน --surface #151b1a = 5.8:1 */
  --accent:#47be9d; --accent-hover:#5cd0b0; --accent-ink:#04201a;
  --accent-text:#5fd3b2; --accent-soft:#10322a; --accent-line:#1e5546;
  --warn:#e0a35c; --warn-soft:#2c2214; --warn-line:#523f20;
  --danger:#f2837a; --danger-soft:#31191a; --danger-line:#5a2a29;
  --info:#7fb0f5; --info-soft:#131f31; --info-line:#243f69;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px rgba(0,0,0,.45);
  --shadow-3:0 18px 52px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff); background:var(--bg); color:var(--text);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
.wrap-any{overflow-wrap:anywhere;word-break:break-word}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh}
.app.collapsed{--sidebar-w:60px}
.side{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; min-width:0;
}
.brand{
  height:var(--topbar-h); display:flex; align-items:center; gap:9px;
  padding:0 12px 0 16px; border-bottom:1px solid var(--line); flex:none; overflow:hidden;
}
.brand-mark{
  width:26px;height:26px;border-radius:7px;background:var(--accent);
  display:grid;place-items:center;color:var(--accent-ink);font-weight:700;font-size:12px;letter-spacing:.02em;flex:none;
}
.brand-mark.lg{width:40px;height:40px;border-radius:11px;font-size:16px}
.brand-name{font-weight:650;letter-spacing:-.01em;white-space:nowrap}
.brand-env{
  font-size:10px;padding:2px 6px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--surface-3);color:var(--text-3);letter-spacing:.04em;
}
.collapse-btn{margin-left:auto;flex:none}
.app.collapsed .brand{padding:0;justify-content:center}
.app.collapsed .brand-name,.app.collapsed .brand-env,.app.collapsed .brand-mark{display:none}
/* ตอนหุบ ปุ่มกางมาแทนที่โลโก้ ไม่งั้นกางกลับไม่ได้ */
.app.collapsed .collapse-btn{margin:0}
.nav{padding:10px 8px; display:flex; flex-direction:column; gap:1px; overflow-y:auto; overflow-x:hidden; flex:1}
.nav-label{
  font-size:11px;color:var(--text-3);padding:14px 10px 5px;letter-spacing:.04em;font-weight:600;white-space:nowrap;
}
.nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-field);
  color:var(--text-2);font-weight:500;transition:background .12s,color .12s;white-space:nowrap;
}
.nav a:hover{background:var(--surface-3);color:var(--text)}
.nav a[aria-current=page]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.nav a svg{flex:none}
.nav .count{
  margin-left:auto;font-size:11px;background:var(--surface-3);color:var(--text-2);
  padding:1px 7px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums;
}
.nav a[aria-current=page] .count{background:var(--surface);color:var(--accent-text)}
/* โหมดหุบ: เหลือไอคอน + จุดแจ้งจำนวนค้าง */
.app.collapsed .nav{padding:10px 6px}
.app.collapsed .nav-label{height:1px;padding:9px 0 8px;overflow:hidden;color:transparent;border-top:1px solid var(--line);margin:0 6px}
.app.collapsed .nav a{justify-content:center;padding:9px 0;position:relative}
.app.collapsed .nav a span:not(.count){display:none}
.app.collapsed .nav .count{
  position:absolute;top:3px;right:6px;margin:0;padding:0;min-width:15px;height:15px;
  display:grid;place-items:center;font-size:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;
}
.side-foot{border-top:1px solid var(--line);padding:8px}
.who{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-field);
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
}
.who:hover{background:var(--surface-3)}
.app.collapsed .who{justify-content:center;padding:8px 0}
.app.collapsed .who > span:not(.avatar){display:none}
.avatar{
  width:28px;height:28px;border-radius:var(--r-pill);background:var(--surface-3);
  display:grid;place-items:center;font-weight:650;font-size:12px;color:var(--text-2);flex:none;
}
.avatar-accent{background:var(--accent);color:var(--accent-ink)}
.who-name{font-weight:600;font-size:13px;line-height:1.3}
.who-role{font-size:11px;color:var(--text-3);line-height:1.3}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar-h);border-bottom:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;position:sticky;top:0;z-index:30;
}
.crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-3);min-width:0}
.crumb b{
  font-weight:650;color:var(--text);font-size:15px;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw;display:block;
}
.crumb .sep{color:var(--line-strong)}
.crumb a{cursor:pointer}
.crumb a:hover{color:var(--text)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.usermenu{position:relative}
.usermenu-trigger{
  display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 6px;border:0;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;
}
.usermenu-trigger:hover{background:var(--surface-3)}
.usermenu-trigger .um-name{font-weight:600;font-size:13px;line-height:1.2}
.usermenu-trigger .um-role{font-size:11px;color:var(--text-3);line-height:1.2}
.usermenu-trigger .chev{transition:transform .15s;color:var(--text-3);display:inline-flex}
.usermenu-trigger[aria-expanded=true] .chev{transform:rotate(180deg)}
.um-panel{
  position:absolute;right:0;top:calc(100% + 6px);width:236px;z-index:50;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-2);padding:5px;
}
.um-panel[hidden]{display:none}
.um-head{padding:9px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
.um-head .n{font-weight:650}
.um-head .u{font-size:12px;color:var(--text-3);overflow-wrap:anywhere}
.um-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;
  border-radius:var(--r-field);cursor:pointer;text-align:left;font-weight:500;color:var(--text-2);
}
.um-item:hover{background:var(--surface-3);color:var(--text)}
.um-item.danger{color:var(--danger)}
.um-item .k{margin-left:auto;font-size:11px;color:var(--text-3)}
.um-sep{height:1px;background:var(--line);margin:5px 0}
.page{padding:20px;max-width:1320px;width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  height:34px;padding:0 13px;border-radius:var(--r-field);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font-weight:550;cursor:pointer;
  transition:background .12s,border-color .12s,transform .06s;
}
.btn svg,.dd-trigger svg,.um-item svg,.usermenu-trigger svg,.subnav svg,.botnav svg{flex:none}
.btn:hover{background:var(--surface-3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:650}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-danger{color:var(--danger);border-color:var(--danger-line);background:var(--danger-soft)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--text)}
.btn-icon{width:34px;padding:0;flex:none}
.btn-sm{height:28px;padding:0 10px;font-size:13px}
.btn-sm.btn-icon{width:28px}
.btn-lg{height:42px;font-size:15px;width:100%}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-weight:600;font-size:13px}
.hint{font-size:12px;color:var(--text-3)}
.err{font-size:12px;color:var(--danger);display:flex;align-items:center;gap:5px}
.input,.textarea{
  height:36px;padding:0 11px;border-radius:var(--r-field);border:1px solid var(--line-strong);
  background:var(--surface);width:100%;transition:border-color .12s,box-shadow .12s;
}
.textarea{height:auto;padding:9px 11px;resize:vertical;min-height:96px;font-family:var(--ff-mono);font-size:13px;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:focus,.textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input[aria-invalid=true]{border-color:var(--danger)}
.input[readonly],.textarea[readonly]{background:var(--surface-2);color:var(--text-2)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .input{padding-right:76px}
.input-wrap.one .input{padding-right:44px}
.input-wrap .in-actions{position:absolute;right:5px;display:flex;gap:2px}
.search{position:relative;flex:1;min-width:180px;max-width:340px}
.search .input{padding-left:33px}
.search > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-3)}

/* custom dropdown — ไม่ใช้ <select> ของ browser */
.dd{position:relative}
.dd-trigger{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;
  border-radius:var(--r-field);border:1px solid var(--line-strong);background:var(--surface);
  cursor:pointer;font-weight:500;white-space:nowrap;max-width:100%;
}
.dd-trigger .dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-trigger:hover{background:var(--surface-3)}
.dd-trigger[aria-expanded=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dd-trigger.icon{width:34px;padding:0;justify-content:center;border-color:transparent;background:transparent;color:var(--text-2)}
.dd-trigger.icon:hover{background:var(--surface-3);color:var(--text)}
.dd-trigger .chev{margin-left:auto;transition:transform .15s;display:inline-flex}
.dd-trigger[aria-expanded=true] .chev{transform:rotate(180deg)}
.dd-block .dd-trigger{width:100%;justify-content:space-between}
.dd-menu{
  position:absolute;top:calc(100% + 5px);left:0;min-width:190px;max-width:min(280px,86vw);z-index:55;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-2);padding:5px;max-height:60dvh;overflow:auto;
}
.dd-menu.right{left:auto;right:0}
.dd-menu.up{top:auto;bottom:calc(100% + 5px)}
.dd-menu[hidden]{display:none}
.dd-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;border:0;background:none;
  border-radius:var(--r-field);cursor:pointer;text-align:left;font-weight:500;
}
.dd-item:hover{background:var(--surface-3)}
.dd-item[aria-selected=true]{color:var(--accent-text);font-weight:600}
.dd-item.danger{color:var(--danger)}
.dd-item .tick{margin-left:auto;opacity:0;display:inline-flex}
.dd-item[aria-selected=true] .tick{opacity:1}

/* checkbox + switch เขียนเอง (ไม่พึ่งหน้าตา default ของ browser) */
.check{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;min-height:34px;font-size:13.5px;position:relative}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:20px;height:20px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);
  display:grid;place-items:center;color:transparent;flex:none;transition:background .12s,border-color .12s;
}
.check input:checked + .box{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.switch{
  width:46px;height:28px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--surface-3);position:relative;cursor:pointer;flex:none;padding:0;transition:background .15s,border-color .15s;
}
.switch i{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-1);transition:transform .15s;
}
.switch[aria-checked=true]{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked=true] i{transform:translateX(18px)}
.switch[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- card / table ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1)}
.card-head{
  padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.card-head h2{margin:0;font-size:14px;font-weight:650;letter-spacing:-.01em}
.card-head .sub{font-size:12px;color:var(--text-3)}
.card-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.card-body{padding:16px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}

table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.03em;
  padding:9px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2);
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer;transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
.t-num{font-family:var(--ff-mono);font-size:13px;font-weight:600}
.t-sub{font-size:12px;color:var(--text-3);margin-top:1px}
table.t-audit td[data-col=detail]{max-width:430px}

/* ---------- status ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap;
}
.pill-wait{background:var(--surface-3);color:var(--text-2);border-color:var(--line-strong)}
.pill-slip{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.pill-pack{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.pill-ship{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-line)}
.pill-done{background:transparent;color:var(--text-3);border-color:var(--line-strong)}
.pill-cancel{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line)}
.tag{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;
  font-size:11px;font-weight:600;background:var(--surface-3);color:var(--text-2);
}
.tag-phase{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-line);height:22px;padding:0 9px}
.tag-off{background:var(--danger-soft);color:var(--danger)}
.role{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:650;border:1px solid transparent;white-space:nowrap;
}
.role-superadmin{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-line)}
.role-admin{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.role-user{background:var(--surface-3);color:var(--text-2);border-color:var(--line-strong)}

/* pipeline stepper */
.steps{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.step{
  flex:1;padding:10px 12px 11px;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.step:last-child{border-right:0}
.step-n{font-size:11px;color:var(--text-3);font-weight:600}
.step-t{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-d{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step.is-done{background:var(--surface-2)}
.step.is-done .step-t{color:var(--text-2)}
.step.is-now{background:var(--accent-soft)}
.step.is-now .step-t,.step.is-now .step-n{color:var(--accent-text)}

/* ---------- states: loading / empty / error ---------- */
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;border-radius:6px;height:12px;animation:sh 1.4s ease infinite}
@keyframes sh{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}
.skel-row{display:flex;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.skel-row:last-child{border-bottom:0}
.skel-row .sk-main{flex:1;min-width:0}
.empty{padding:52px 20px;text-align:center;color:var(--text-2)}
.empty-mark{
  width:44px;height:44px;border-radius:12px;background:var(--surface-3);color:var(--text-2);
  display:grid;place-items:center;margin:0 auto 12px;
}
.empty h3{margin:0 0 5px;font-size:15px;color:var(--text);font-weight:650}
.empty p{margin:0 auto;max-width:42ch;font-size:13px;overflow-wrap:anywhere}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.is-error .empty-mark{background:var(--danger-soft);color:var(--danger)}
.banner{
  display:flex;gap:10px;padding:11px 13px;border-radius:var(--r-card);
  border:1px solid var(--info-line);background:var(--info-soft);color:var(--info);font-size:13px;
}
.banner svg{flex:none;margin-top:1px}
.banner-warn{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.banner-accent{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent-text)}
.banner b{font-weight:650}

/* ---------- modal / toast ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(12,16,20,.5);backdrop-filter:blur(2px);
  display:grid;place-items:center;padding:20px;z-index:60;
}
.scrim[hidden]{display:none}
.modal{
  background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow-3);
  width:100%;max-width:440px;border:1px solid var(--line);
  display:flex;flex-direction:column;max-height:88dvh;
}
.modal-head{padding:16px 18px 0;flex:none}
.modal-head h3{margin:0 0 4px;font-size:16px;font-weight:650;letter-spacing:-.01em}
.modal-head p{margin:0;color:var(--text-2);font-size:13px}
.modal-body{padding:16px 18px;overflow:auto}
.modal-foot{padding:0 18px 18px;display:flex;gap:8px;justify-content:flex-end;flex:none}
.modal-head + .modal-foot{padding-top:16px}
/* toast ห้ามบังการกดของที่อยู่ข้างล่าง (บนมือถือมันคาดเต็มความกว้าง) */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:80;max-width:min(360px,92vw);pointer-events:none}
.toast{
  display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
  font-weight:550;font-size:13px;animation:slide .18s ease;
}
.toast svg{flex:none}
@keyframes slide{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.toast-ok svg{stroke:var(--accent-text)} .toast-err svg{stroke:var(--danger)}

/* ---------- settings layout: sub-route จริง ---------- */
.settings{display:grid;grid-template-columns:212px 1fr;gap:20px;align-items:start}
.subnav{display:flex;flex-direction:column;gap:1px;position:sticky;top:calc(var(--topbar-h) + 20px)}
.subnav a{
  display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:var(--r-field);
  color:var(--text-2);font-weight:500;
}
.subnav a:hover{background:var(--surface-3);color:var(--text)}
.subnav a[aria-current=page]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-1);border:1px solid var(--line)}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row-main{min-width:0;flex:1}
.row-t{font-weight:600;overflow-wrap:anywhere}
.row-s{font-size:12.5px;color:var(--text-3);overflow-wrap:anywhere}
.row-act{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-sm{display:flex;flex-direction:column;gap:9px}
.pw-meter{height:4px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.pw-meter i{display:block;height:100%;width:0;background:var(--danger);transition:width .2s,background .2s}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 15px;box-shadow:var(--shadow-1)}
.tile-k{font-size:12.5px;color:var(--text-3);display:flex;align-items:center;gap:7px}
.tile-v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.2}
.tile-s{font-size:12px;color:var(--text-3)}
.code{
  font-family:var(--ff-mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-field);padding:10px 12px;white-space:pre-wrap;word-break:break-word;margin:0;
  max-height:40dvh;overflow:auto;
}
.kv{display:inline-flex;align-items:center;gap:5px;font-size:12px;background:var(--surface-3);
  border-radius:5px;padding:1px 7px;margin:2px 4px 2px 0;overflow-wrap:anywhere}
.kv b{font-weight:650}
.kv .arr{color:var(--text-3);display:inline-flex;align-items:center}

/* ---------- bottom nav (มือถือเท่านั้น) ---------- */
.botnav{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.botnav-inner{display:grid;grid-template-columns:repeat(4,1fr)}
.botnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px 7px;color:var(--text-3);font-size:11px;font-weight:600;position:relative;
  -webkit-tap-highlight-color:transparent;min-height:52px;
}
.botnav a[aria-current=page]{color:var(--accent-text)}
.botnav .dot{
  position:absolute;top:5px;left:50%;margin-left:5px;min-width:16px;height:16px;padding:0 4px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);font-size:10px;font-weight:700;
}
.drawer-scrim{position:fixed;inset:0;background:rgba(8,20,17,.5);z-index:45;display:none}
.drawer-scrim.on{display:block}

/* ---------- หน้า login: ไม่มี sidebar / bottom nav ---------- */
body[data-shell=auth] .side,
body[data-shell=auth] .topbar,
body[data-shell=auth] .botnav,
body[data-shell=auth] .drawer-scrim{display:none}
body[data-shell=auth] .app{grid-template-columns:1fr}
body[data-shell=auth] .main{padding-bottom:0}
body[data-shell=auth] .page{
  display:grid;place-items:center;min-height:100dvh;max-width:none;padding:20px;
}
/* บังคับเปลี่ยนรหัสครั้งแรก: ตัดทางไปหน้าอื่นจริงๆ ไม่ใช่แค่ซ่อนลิงก์ */
body[data-shell=locked] .nav,
body[data-shell=locked] .botnav,
body[data-shell=locked] .side-foot{display:none}
body[data-shell=locked] .main{padding-bottom:0}

/* หน้าที่ไม่มี bottom nav ไม่ต้องเว้นที่ให้มัน */
body[data-shell=auth] .toasts,
body[data-shell=locked] .toasts{bottom:calc(12px + env(safe-area-inset-bottom))}

.auth{width:100%;max-width:420px}
.auth-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow-2);padding:24px 22px;display:flex;flex-direction:column;gap:15px;
}
.auth-brand{display:flex;align-items:center;gap:12px}
.auth-title{font-weight:700;font-size:17px;letter-spacing:-.01em}
.auth-sub{font-size:12.5px;color:var(--text-3)}
.auth-err{
  display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-field);
  background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger);font-size:13px;
}
.auth-err svg{flex:none;margin-top:1px}
.auth-err[hidden]{display:none}
.auth-foot{margin:0;text-align:center;font-size:12px;color:var(--text-3)}

/* ============================================================
   RESPONSIVE — มือถือเป็นหลัก
   กติกา: ห้ามมี horizontal scroll ทุกหน้า
   ตารางบนมือถือ = การ์ดต่อแถว (ไม่ใช่ตารางเลื่อนขวา)
   ============================================================ */
@media (max-width:1024px){
  :root{--bottomnav-h:58px}
  .app{grid-template-columns:1fr}
  .app.collapsed{--sidebar-w:236px}
  .side{
    position:fixed;left:0;top:0;z-index:46;width:262px;max-width:84vw;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.16,1,.3,1);
  }
  .side.open{transform:none;box-shadow:var(--shadow-3)}
  .collapse-btn{display:none}
  .botnav{display:block}
  .main{padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom))}
  .settings{grid-template-columns:1fr;gap:12px}
  /* แท็บตั้งค่าต้องพอดีจอ ไม่ต้องเลื่อนขวาหา → 3 ช่องต่อแถว ตกบรรทัดเอง */
  .subnav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:static}
  .subnav a{
    justify-content:center;text-align:center;padding:9px 6px;font-size:13px;min-height:38px;
    background:var(--surface);border:1px solid var(--line);
  }
  .subnav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .subnav svg{display:none}
  .grid-2{grid-template-columns:1fr}
  .page{padding:12px}
  .hide-sm{display:none !important}
  .toasts{left:12px;right:12px;bottom:calc(var(--bottomnav-h) + 12px);max-width:none}
  .toast{width:100%}
  .usermenu-trigger .um-who{display:none}
  .usermenu-trigger{padding:0 4px}

  /* ตาราง → การ์ด: ปิด table layout ทั้งหมด แล้วจัดใหม่ด้วย grid */
  table,thead,tbody,tr,th,td{display:block;width:auto}
  thead{display:none}
  tbody tr{
    display:grid;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line);
    grid-template-columns:1fr auto;
  }
  tbody tr:last-child{border-bottom:0}
  tbody td{padding:0;border:0;min-width:0}

  /* ตารางออเดอร์ (Phase 1) */
  table.t-orders tbody tr{grid-template-areas:"id total" "cust cust" "status status" "track site"}
  table.t-orders td[data-col=id]{grid-area:id}
  table.t-orders td[data-col=total]{grid-area:total;text-align:right !important;font-weight:650;font-size:15px}
  table.t-orders td[data-col=cust]{grid-area:cust;margin-top:2px}
  table.t-orders td[data-col=status]{grid-area:status;margin-top:7px;display:flex;align-items:center;gap:8px}
  table.t-orders td[data-col=status] .t-sub{margin:0}
  table.t-orders td[data-col=track]{grid-area:track;margin-top:7px;overflow:hidden;text-overflow:ellipsis}
  table.t-orders td[data-col=site]{grid-area:site;margin-top:7px;text-align:right}
  table.t-orders td[data-col=track] .mono{font-size:12px}

  /* ตาราง audit */
  table.t-audit tbody tr{grid-template-areas:"act when" "who who" "detail detail"}
  table.t-audit td[data-col=act]{grid-area:act;min-width:0}
  table.t-audit td[data-col=when]{grid-area:when;text-align:right;color:var(--text-3);font-size:12px;white-space:nowrap}
  table.t-audit td[data-col=who]{grid-area:who;margin-top:2px}
  table.t-audit td[data-col=detail]{grid-area:detail;margin-top:6px;max-width:none}

  /* stepper 5 ช่องบนมือถือกินจอครึ่งหน้า → ย่อเป็นแถบจุด + ชื่อขั้นปัจจุบัน */
  .steps{align-items:center;padding:10px 12px;gap:7px;background:var(--surface)}
  .step{flex:none;width:auto;padding:0;border:0;background:none;flex-direction:row;align-items:center;gap:7px}
  .step .step-d{display:none}
  .step .step-t,.step .step-n{display:none}
  .step::before{content:"";width:9px;height:9px;border-radius:var(--r-pill);background:var(--line-strong);flex:none}
  .step.is-done::before{background:var(--accent-line)}
  .step.is-now::before{background:var(--accent)}
  .step.is-now{flex:1;min-width:0}
  .step.is-now .step-t{display:block;color:var(--accent-text);font-size:13.5px;order:1}
  .step.is-now .step-n{display:block;color:var(--text-3);font-size:12px;margin-left:auto;white-space:nowrap;order:2}
  .step.is-now .step-n::after{content:" / 5"}
  .step.is-now::before{order:0}

  /* touch target บนมือถือต้องกดง่าย */
  .btn-sm{height:34px;padding:0 12px}
  .btn-sm.btn-icon{width:34px}
  .switch{width:54px;height:32px}
  .switch i{width:26px;height:26px}
  .switch[aria-checked=true] i{transform:translateX(22px)}
  .input-wrap .input{padding-right:86px}
  .input-wrap.one .input{padding-right:48px}
  .textarea{min-height:172px}
  .crumb a{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
  /* iOS ซูมอัตโนมัติถ้า font < 16px ตอนโฟกัส input */
  .input,.textarea{font-size:16px}
  .row{padding:12px 14px;gap:11px;flex-wrap:wrap}
  /* กลุ่มควบคุมที่กว้าง (เช่น ช่องวันที่ + ปุ่มบันทึก) ลงบรรทัดใหม่เต็มความกว้าง ไม่บีบข้อความซ้ายให้เละ */
  .row-act.wide{width:100%;margin-left:0;margin-top:9px}
  .row-act.wide .input{flex:1;width:auto}
  .modal{max-width:none;border-radius:16px}
  .card-head{padding:12px 14px}
  .card-body{padding:14px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .toolbar{gap:6px}
  .search{max-width:none;flex:1 1 100%}
  .crumb b{max-width:44vw}
  /* :not(.btn-lg) เพราะบล็อกนี้อยู่ท้ายไฟล์ = specificity เท่ากันแล้วชนะ .btn-lg (ปุ่ม CTA จะเตี้ยลงเท่าปุ่มธรรมดา) */
  .btn:not(.btn-lg){height:36px}
  /* ปุ่มเล็กอยู่บรรทัดเดียวกับเนื้อหาแถว · กลุ่มควบคุมที่กว้างค่อยตกบรรทัดเอง */
  .row-act{justify-content:flex-end}
}
@media (min-width:1025px){.only-sm{display:none}}