/* ═══════════════════════════════════════════════════════════════════════════
   MTW Support Ticket — design system "Modernist" ปรับ accent เป็นแบรนด์ morethanweb
   สไตล์แบน ไม่มีมุมโค้ง เส้นคั่นหนา 2px — โทเคนตามเอกสาร handoff
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --color-bg:#f2f2f3; --color-surface:#ffffff; --color-text:#1b1a19;
  --color-accent:#0e4bd1;
  --color-accent-100:#eef3ff; --color-accent-200:#d5e1ff; --color-accent-300:#adc6ff;
  --color-accent-400:#6d93f5; --color-accent-500:#2c63e0; --color-accent-600:#0e4bd1;
  --color-accent-700:#0a3aa6; --color-accent-800:#092b79; --color-accent-900:#0a1f4f;
  --color-accent-2-100:#fffae0; --color-accent-2-200:#fff2b0; --color-accent-2-800:#6b5600;
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3;
  --color-neutral-400:#bab6b6; --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;
  --brand-yellow:#ffe500; --brand-yellow-deep:#f0d500;
  --color-divider:rgba(27,26,25,.26);
  --rule-strong:rgba(27,26,25,.62);
  --st-warn:#e0b400; --st-ok:#1f7a3d; --st-late:#d92b1c;
  --font-heading:"Archivo","IBM Plex Sans Thai",system-ui,sans-serif;
  --font-body:"Archivo","IBM Plex Sans Thai",system-ui,sans-serif;
  --shadow-lg:0 12px 32px rgba(45,43,43,.22);
  --tk-cols:92px minmax(0,2.2fr) minmax(0,1.1fr) 118px 200px 102px;
  --form-cols:1fr 1fr;
}
body.hide-sla{ --tk-cols:92px minmax(0,2.2fr) minmax(0,1.1fr) 118px 200px; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); font-weight:800; line-height:1.22; letter-spacing:-0.015em; margin:0 0 8px; }
h1{ font-size:42px; } h2{ font-size:32px; } h3{ font-size:25px; } h4{ font-size:20px; } h5{ font-size:16px; }
h6{ font-size:15px; letter-spacing:.08em; text-transform:uppercase; }
p{ margin:0 0 12px; }
a{ color:var(--color-accent-700); text-decoration:none; }
a:hover{ color:var(--color-accent); text-decoration:underline; }

/* ลิงก์ที่ระบบแปลงจาก URL ในข้อความ/ช่อง URL — ขีดเส้นใต้ตลอดให้รู้ว่ากดได้ + ลูกศรเปิดแท็บใหม่ */
.msg-link{ color:var(--color-accent-700); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.msg-link:hover{ color:var(--color-accent); }
.msg-link::after{ content:"\2197"; display:inline-block; margin-left:3px; text-decoration:none; }
img{ display:block; max-width:100%; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
::selection{ background:rgba(14,75,209,.28); }
button{ font-family:var(--font-body); }
@keyframes mtwIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

.hr{ height:2px; border:0; margin:16px 0; background:var(--color-divider); }
.rule-strong{ height:2px; background:var(--rule-strong); }
.text-muted{ color:var(--color-neutral-700); }

/* ── ปุ่ม ─────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.2;
  color:var(--color-text); background:transparent; border:1px solid transparent;
  padding:8px 15px; border-radius:0;
}
.btn:hover{ text-decoration:none; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
/* ฟอร์มที่กำลังส่ง (app.js ล็อกปุ่มกันส่งซ้ำ) — ชี้ให้รู้ว่ากำลังทำงาน ไม่ใช่ปุ่มใช้ไม่ได้ */
form.is-sending button:disabled, form.is-sending input[type="submit"]:disabled{ opacity:.6; cursor:progress; }
.btn-primary{ background:var(--color-accent); color:#fff; border-color:var(--color-accent); }
.btn-primary:hover{ background:var(--color-accent-700); border-color:var(--color-accent-700); color:#fff; }
.btn-secondary{ border-color:var(--color-divider); background:var(--color-surface); }
.btn-secondary:hover{ background:rgba(27,26,25,.07); }
.btn-ghost{ color:var(--color-accent); padding-inline:4px; }
.btn-ghost:hover{ background:rgba(14,75,209,.1); color:var(--color-accent); }
.btn-block{ width:100%; justify-content:flex-start; text-align:left; }
.btn-cta{ min-height:38px; padding:0 16px; white-space:nowrap; }

/* ปุ่ม action ในกล่องตอบกลับ */
.action-btn{
  min-height:38px; padding:0 16px; font-family:var(--font-heading); font-weight:800;
  font-size:15px; cursor:pointer; border:1px solid var(--color-divider);
  background:var(--color-surface); color:#1b1a19;
}
.action-btn.primary{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.action-btn.warn{ background:var(--brand-yellow); border-color:var(--brand-yellow); color:#1b1a19; }
.link-btn{ background:transparent; border:0; color:var(--color-accent); font-size:15px; font-weight:600; cursor:pointer; padding:0; }
.link-btn:hover{ text-decoration:underline; }
.small-btn{
  padding:5px 10px; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid var(--color-divider); background:var(--color-surface); color:var(--color-text);
}
.small-btn:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.small-btn.danger-on{ background:var(--st-late); border-color:var(--st-late); color:#fff; }
a.small-btn, a.small-btn:hover{ text-decoration:none; }
.small-btn.accent{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.small-btn.accent:hover{ background:var(--color-accent-700); border-color:var(--color-accent-700); color:#fff; }

/* ── ฟอร์ม ────────────────────────────────────────────────────────────────── */
.field>label{ display:block; font-size:15px; margin-bottom:5px; color:rgba(27,26,25,.7); }
.input{
  width:100%; min-height:36px; padding:6px 10px; font:inherit; font-size:15px;
  color:var(--color-text); caret-color:var(--color-accent);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:0;
}
.input:hover{ border-color:rgba(27,26,25,.45); }
.input:focus-visible{ border-color:var(--color-accent); outline-offset:0; }
.input[readonly]{ background:var(--color-bg); }
textarea.input{ min-height:90px; resize:vertical; }
select.input{
  appearance:none;
  /* !important เพื่อชนะ style="background:…" แบบ inline ที่ตั้งสีพื้น — ไม่งั้น shorthand จะลบรูปลูกศรทิ้ง */
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text) 50%),linear-gradient(135deg,var(--color-text) 50%,transparent 50%) !important;
  background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px !important;
  background-size:5px 5px,5px 5px !important; background-repeat:no-repeat !important;
  padding-right:28px;
}
.input.err{ border-color:var(--st-late); }

/* ช่องรหัสผ่าน + ปุ่มลูกตาเปิด/ปิดการมองเห็น */
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:40px; }
.pw-eye{
  position:absolute; top:1px; right:1px; bottom:1px; width:36px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--color-neutral-500);
}
.pw-eye:hover{ color:var(--color-text); }
.pw-eye:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; }
.pw-eye svg{ width:18px; height:18px; }
.pw-eye .i-hide{ display:none; }
.pw-eye.on .i-show{ display:none; }
.pw-eye.on .i-hide{ display:block; }

.field-hint{ font-size:15px; line-height:1.55; margin-top:4px; color:var(--color-neutral-700); }
.field-hint.err{ color:var(--st-late); }
/* คุณภาพคำตอบ: บรรทัดช่วยใต้ป้าย + กล่องเตือนใต้ช่องเมื่อกรอกคำแก้ขัด ("-", "ตามรูป") */
.field-help{ font-size:15px; line-height:1.55; color:var(--color-neutral-600); margin:-2px 0 6px; }
.quality-hint{ display:flex; gap:8px; align-items:flex-start; margin-top:6px; padding:8px 11px; font-size:15px; line-height:1.55; color:var(--st-late); background:#fdecea; border-left:4px solid var(--st-late); }
.quality-ok{ margin-top:6px; font-size:15px; font-weight:600; color:var(--st-ok); }
.quality-hint[hidden],.quality-ok[hidden]{ display:none; }
textarea.input.err{ background:#fff5f4 !important; }
.form-grid{ display:grid; grid-template-columns:var(--form-cols); gap:14px; }
.span-2{ grid-column:1/-1; }

.err-box{
  display:block; margin:14px 0; padding:11px 14px; background:var(--color-surface);
  border-left:4px solid var(--st-late); font-size:15px; line-height:1.6; color:var(--st-late); font-weight:600;
}

/* ปุ่มตัวเลือก (repro / severity / scope ฯลฯ) */
.choice-btn{
  padding:8px 13px; font-size:15px; font-weight:600; cursor:pointer; text-align:left;
  border:1px solid var(--color-divider); background:var(--color-bg); color:#1b1a19;
}
.choice-btn.selected{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.choice-btn.err{ border-color:var(--st-late); }
.choice-btn[data-color]{ }
.choice-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.choice-col{ display:grid; gap:8px; margin-top:2px; }

/* พื้นที่แนบไฟล์ (คลิกเลือก / ลากมาวาง / Ctrl+V) — ใช้ร่วมทุกฟอร์ม; ระหว่างลาก: ตัวพื้นที่เป็นสีน้ำเงิน + กรอบประรอบ zone ที่รับวาง (เช่น ทั้งกล่องตอบกลับ) */
.drop-area{
  display:block; width:100%; padding:13px 16px; cursor:pointer; font-size:15px; line-height:1.5; text-align:center;
  border:2px dashed var(--color-divider); background:var(--color-bg); color:var(--color-neutral-700);
}
.drop-area .da-main{ display:block; font-weight:600; color:var(--color-text); }
.drop-area .da-main svg{ width:18px; height:18px; vertical-align:-3px; margin-right:3px; }
.drop-area .da-sub{ display:block; margin-top:2px; }
.drop-area .da-limit{ font-weight:600; color:var(--color-text); } /* ขนาดไฟล์สูงสุด — เน้นให้เห็นในบรรทัดสีเทา */
.drop-area.is-dragover .da-limit{ color:inherit; }
.composer .drop-area{ background:var(--color-surface); margin-top:10px; } /* ต้องอยู่ก่อนกฎสถานะด้านล่าง (specificity เท่ากัน) ไม่งั้นสีตอนลาก/มีไฟล์แล้วไม่ขึ้นในกล่องตอบกลับ */
.drop-area:hover{ border-color:var(--color-accent-400); }
.drop-area.is-dragover{ border-color:var(--color-accent); background:var(--color-accent-200); }
.drop-area.is-dragover .da-main, .drop-area.is-dragover .da-sub{ color:var(--color-accent-800); }
.drop-area.done{ border-color:var(--st-ok); background:#f1f8f3; }
.drop-area.done .da-main{ color:var(--st-ok); }
.drop-area.err{ border-color:var(--st-late); }
.drop-zone-on{ outline:3px dashed var(--color-accent); outline-offset:-3px; }
form.drop-zone-on{ outline-offset:8px; }
@media (hover:none) and (pointer:coarse){ .drop-area .da-kbd{ display:none; } } /* มือถือไม่มี Ctrl+V */
/* รายการไฟล์ที่เลือกไว้ก่อนส่ง (ทุกพื้นที่แนบไฟล์) — เพิ่มได้หลายรอบ ลบได้รายไฟล์ */
.pick-list{ display:grid; gap:6px; margin-top:8px; }
.pick-item{ display:flex; align-items:center; gap:10px; padding:7px 10px; font-size:15px; background:var(--color-surface); border:1px solid var(--color-divider); min-width:0; }
.pick-item .pi-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.pick-item .pi-tag{ color:var(--color-neutral-700); font-weight:400; }
.pick-item .pi-size{ color:var(--color-neutral-700); white-space:nowrap; }
.pick-item .pi-rm{ border:1px solid var(--color-divider); background:var(--color-bg); color:var(--st-late); font-size:15px; font-weight:600; padding:2px 8px; cursor:pointer; white-space:nowrap; }
.pick-item .pi-rm:hover{ border-color:var(--st-late); background:#fdecea; }
.pick-warn{ font-size:15px; color:var(--st-late); font-weight:600; padding:6px 10px; background:#fdecea; border-left:4px solid var(--st-late); }
.pick-item .pi-thumb{ width:48px; height:48px; object-fit:cover; flex:none; border:1px solid var(--color-divider); background:var(--color-bg); cursor:zoom-in; }
.pick-item .pi-ext{ width:48px; height:48px; flex:none; display:grid; place-items:center; font-family:var(--font-heading); font-weight:800; font-size:15px; letter-spacing:.04em; background:var(--color-neutral-200); color:var(--color-neutral-800); }
/* กล่องดูรูปเต็มจอ (เฉพาะรูปที่เพิ่งเลือกก่อนส่ง — ไฟล์ในเธรดเปิดในแท็บใหม่ตามเดิม) */
.pick-lightbox{ position:fixed; inset:0; z-index:1000; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; background:rgba(27,26,25,.86); cursor:zoom-out; }
.pick-lightbox img{ max-width:min(96vw,1400px); max-height:80vh; object-fit:contain; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.5); cursor:default; }
.pick-lightbox .lb-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; font-size:15px; color:#fff; cursor:default; }
.pick-lightbox .lb-cap{ font-weight:600; max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick-lightbox .lb-close{ border:1px solid #fff; background:transparent; color:#fff; font-size:15px; font-weight:700; padding:5px 12px; cursor:pointer; }

/* segmented */
.seg{ display:inline-flex; overflow:hidden; border:1px solid var(--color-divider); background:var(--color-surface); }
.seg-opt{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-size:15px;
  cursor:pointer; white-space:nowrap; border:0; background:transparent; color:inherit;
}
.seg-opt + .seg-opt{ border-left:1px solid var(--color-divider); }
.seg-opt.on{ background:var(--color-accent); color:#fff; font-weight:700; }
.seg-opt:not(.on):hover{ background:rgba(27,26,25,.07); }
/* แท็บมุมมองในแถบตัวกรอง (หน้ารายการ ticket): ที่แคบแล้วตกบรรทัด ไม่ถูกตัดหาย — เดิมบนมือถือเห็นแค่ 3 แท็บแรก
   กด "ของฉัน / ปิดแล้ว / แสดงทั้งหมด" ไม่ได้ · เส้นคั่นใช้ช่องว่าง 1px บนพื้นสีเส้น จึงคั่นได้ทั้งระหว่างแท็บและระหว่างแถว */
.filters .seg{ display:flex; flex-wrap:wrap; gap:1px; max-width:100%; background:var(--color-divider); }
.filters .seg .seg-opt{ flex:1 1 auto; justify-content:center; background:var(--color-surface); }
.filters .seg .seg-opt + .seg-opt{ border-left:0; }
.filters .seg .seg-opt.on{ background:var(--color-accent); }
.filters .seg .seg-opt:not(.on):hover{ background:var(--color-neutral-200); }

/* สวิตช์ */
.switch{
  width:46px; height:26px; padding:3px; border:1px solid var(--color-divider);
  cursor:pointer; display:flex; justify-content:flex-start; background:var(--color-neutral-300); flex:none;
}
.switch .knob{ width:18px; height:18px; background:#fff; display:block; }
.switch.on{ justify-content:flex-end; background:var(--color-accent); }
.switch.on.ok{ background:var(--st-ok); }
.switch.on.yellow{ background:var(--brand-yellow); }
.switch.lg{ width:56px; height:30px; }
.switch.lg .knob{ width:22px; height:22px; }
.switch:disabled{ cursor:not-allowed; opacity:.45; }
.switch-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--color-bg); border:1px solid var(--color-divider);
}
.switch-row .t{ display:block; font-size:15px; font-weight:600; }
.switch-row .d{ display:block; font-size:15px; color:var(--color-neutral-700); margin-top:2px; line-height:1.5; }

/* ── ป้าย ─────────────────────────────────────────────────────────────────── */
.tag{ display:inline-flex; align-items:center; font-size:15px; letter-spacing:.02em; padding:3px 10px; }
.tag-neutral{ background:var(--color-neutral-100); color:var(--color-neutral-800); }
.tag-accent{ background:var(--color-accent-100); color:var(--color-accent-800); }
.status-dot{ width:9px; height:9px; flex:none; display:inline-block; }
.status-inline{ display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:600; white-space:nowrap; }
.phase-chip{
  width:19px; height:19px; display:inline-grid; place-items:center; flex:none;
  font-family:var(--font-heading); font-weight:800; font-size:15px;
  background:var(--color-neutral-300); color:#1b1a19;
}
.phase-chip.p2{ background:var(--brand-yellow); }
.phase-chip.p3{ background:var(--color-accent); color:#fff; }
.id-chip{ font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--color-accent-700); white-space:nowrap; } /* เลข ticket ห้ามตัดบรรทัดที่ขีด (MTW- / 1012) */
.kicker{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-neutral-600); }
.badge-req{ font-size:15px; font-weight:600; background:var(--brand-yellow); padding:2px 7px; vertical-align:middle; }
.sev-chip{ font-size:15px; font-weight:700; padding:3px 9px; color:#fff; }
.role-chip{ font-size:15px; padding:3px 8px; font-weight:600; background:var(--color-accent-100); color:var(--color-accent-700); display:inline-block; }
.role-chip.inside{ background:var(--color-text); color:var(--color-bg); }

/* แถบข้อความแจ้ง (border ซ้าย 4px) */
.strip{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:12px 15px; margin:0 0 14px; background:var(--color-surface);
  border-left:4px solid var(--color-accent); font-size:15px; line-height:1.55;
}
.strip .strip-t{ font-weight:700; white-space:nowrap; }
.strip .strip-b{ color:var(--color-neutral-700); flex:1 1 240px; }
.strip.warn{ border-left-color:var(--brand-yellow); }
.strip.late{ border-left-color:var(--st-late); }
.strip.late .strip-t{ color:var(--st-late); }
.strip.dim{ border-left-color:var(--color-neutral-400); }
.strip.deep{ border-left-color:var(--color-accent-700); }

/* ── หน้าเข้าสู่ระบบ ─────────────────────────────────────────────────────── */
.login-grid{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login-left{ background:var(--color-accent); color:#fff; padding:44px 44px 36px; display:flex; flex-direction:column; gap:28px; }
.login-logo{ background:#fff; padding:10px 14px; align-self:flex-start; }
.login-logo img{ height:30px; width:auto; }
.login-yellow-rule{ height:2px; background:var(--brand-yellow); }
.login-left h1{ margin:0; font-size:clamp(34px,4.4vw,58px); letter-spacing:-.02em; max-width:12em; line-height:1.22; }
.login-left h1 .hl{ background:var(--brand-yellow); color:var(--color-accent-900); padding:0 8px; }
.login-lead{ margin:0; font-size:19px; line-height:1.55; font-weight:500; text-wrap:pretty; }
.login-sub{ margin:0; font-size:15px; line-height:1.7; opacity:.82; text-wrap:pretty; }
.login-steps{ margin-top:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid rgba(255,255,255,.35); }
.login-steps>div{ padding:16px 12px 0; }
.login-steps>div+div{ border-left:1px solid rgba(255,255,255,.3); }
.login-steps .n{ font-family:var(--font-heading); font-weight:800; font-size:26px; color:var(--brand-yellow); }
.login-steps .t{ font-size:15px; letter-spacing:.04em; margin-top:4px; }
.login-right{ background:var(--color-surface); padding:44px; display:flex; flex-direction:column; justify-content:center; container-type:inline-size; }
.login-stack{ width:100%; max-width:420px; margin:auto 0; }
.login-stack.solo{ margin:auto; }
.login-demo{ margin-top:26px; padding-top:16px; border-top:2px solid var(--color-divider); }
.role-grid{ display:grid; gap:8px; }
/* จอกว้าง: ยกการ์ดสาธิตไปคู่กับฟอร์ม เติมพื้นที่ครึ่งขวาให้เต็ม */
@container (min-width: 640px){
  .login-stack.has-demo{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:40px; max-width:960px; align-items:start; }
  .login-stack.has-demo .login-demo{ margin-top:0; padding-top:0; border-top:0; border-left:2px solid var(--color-divider); padding-left:32px; }
  .login-stack.has-demo + .login-foot{ max-width:960px; }
}
/* ช่วงกลาง: คอลัมน์การ์ดแคบ — ซ่อนป้ายเฟสให้ข้อความไม่เบียด */
@container (min-width: 640px) and (max-width: 879px){
  .login-stack.has-demo .rc-phase{ display:none; }
  .login-stack.has-demo .role-card{ grid-template-columns:34px 1fr; }
}
.role-card{
  display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; width:100%;
  text-align:left; padding:11px 12px; background:var(--color-bg); border:1px solid var(--color-divider);
  cursor:pointer; font-family:var(--font-body);
}
.role-card:hover{ border-color:var(--color-accent); background:var(--color-accent-100); }
.role-card .rc-badge{
  display:grid; place-items:center; width:34px; height:34px; font-family:var(--font-heading);
  font-weight:800; font-size:15px; background:var(--color-neutral-300); color:#1b1a19;
}
.role-card .rc-badge.accent{ background:var(--color-accent); color:#fff; }
.role-card .rc-badge.yellow{ background:var(--brand-yellow); }
.role-card .rc-badge.dark{ background:var(--color-text); color:#fff; }
.role-card .rc-label{ display:block; font-weight:600; font-size:15px; }
.role-card .rc-sub{ display:block; font-size:15px; color:var(--color-neutral-700); margin-top:1px; }
.role-card .rc-phase{ font-size:15px; letter-spacing:.06em; color:var(--color-accent); font-weight:600; }
.login-foot{
  width:100%; max-width:420px; margin-top:32px; padding-top:14px; border-top:1px solid var(--color-divider);
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; font-size:15px; color:var(--color-neutral-600);
}
.login-foot.solo{ margin-inline:auto; }

/* ── โครงหลังล็อกอิน ─────────────────────────────────────────────────────── */
.app-header{
  display:flex; align-items:center; gap:16px; padding:10px 18px; background:var(--color-surface);
  border-bottom:2px solid var(--rule-strong); position:relative; flex-wrap:wrap;
}
.app-header .logo{ height:24px; width:auto; }
.app-header .app-name{
  font-family:var(--font-heading); font-weight:800; font-size:15px; letter-spacing:.02em;
  padding-left:14px; border-left:2px solid var(--color-divider);
}
.header-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--color-divider); cursor:pointer; color:var(--color-text);
}
.icon-btn:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.icon-btn.logout:hover{ border-color:var(--st-late); color:var(--st-late); }
.bell-badge{
  position:absolute; top:-9px; right:-9px; min-width:21px; height:21px;
  background:var(--brand-yellow); color:#1b1a19; font-size:15px; font-weight:700;
  display:grid; place-items:center; padding:0 4px;
}
.me-cluster{ display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--color-divider); }
.me-chip{
  display:inline-grid; place-items:center; width:34px; height:34px; font-family:var(--font-heading);
  font-weight:800; font-size:15px; background:var(--color-neutral-300); color:#1b1a19; border:0; cursor:pointer;
}
.me-chip.accent{ background:var(--color-accent); color:#fff; }
.me-chip.yellow{ background:var(--brand-yellow); }
.me-chip.dark{ background:var(--color-text); color:#fff; }
.me-name-mini{ font-size:15px; line-height:1.3; }
.me-name-mini .n{ font-weight:700; display:block; }
.me-name-mini .r{ color:var(--color-neutral-700); font-size:15px; display:block; }

.notif-panel{
  display:none; position:absolute; top:56px; right:18px; width:min(360px,calc(100% - 36px));
  background:var(--color-surface); border:2px solid var(--color-text); padding:16px; z-index:40;
  box-shadow:var(--shadow-lg); animation:mtwIn .16s ease-out;
}
.notif-panel.open{ display:block; }
.notif-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 0 10px; border-bottom:2px solid var(--rule-strong); }
.notif-item{
  display:grid; grid-template-columns:8px 1fr; gap:11px; align-items:start; width:100%;
  text-align:left; padding:12px 0; background:transparent; border:0; border-bottom:1px solid var(--color-divider);
  cursor:pointer; font-family:var(--font-body); text-decoration:none; color:inherit;
}
.notif-item:hover{ text-decoration:none; }
.notif-item:hover .nt{ color:var(--color-accent); }
.notif-item .dot{ width:8px; height:8px; margin-top:5px; display:inline-block; background:var(--color-accent); }
.notif-item .nt{ display:block; font-size:15px; font-weight:600; line-height:1.45; }
.notif-item .nm{ display:block; font-size:15px; color:var(--color-neutral-700); margin-top:3px; }
.notif-item.read{ opacity:.55; }
.notif-item.read .nt{ font-weight:500; }
.notif-item.read .dot{ background:var(--color-neutral-400) !important; }
.notif-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; margin-top:4px; border-top:1px solid var(--color-divider); }
.notif-foot a{ font-size:15px; font-weight:600; }
.notif-foot button{ background:none; border:0; padding:0; font:inherit; font-size:15px; font-weight:600; color:var(--color-accent-700); cursor:pointer; }
.notif-foot button:hover{ color:var(--color-accent); text-decoration:underline; }

.shell{ display:grid; grid-template-columns:208px minmax(0,1fr); }
.sidenav{
  display:flex; flex-direction:column; background:var(--color-surface);
  border-right:2px solid var(--color-divider); min-height:calc(100vh - 55px); padding:14px 0;
}
.nav-item{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 8px; width:100%;
  text-align:left; padding:11px 18px; cursor:pointer; border:0; text-decoration:none; color:inherit;
  border-left:3px solid transparent; background:transparent; font-size:15px; font-weight:500;
}
.nav-item:hover{ background:var(--color-accent-100); text-decoration:none; }
.nav-item.active{ border-left-color:var(--color-accent); background:var(--color-accent-100); font-weight:700; }
/* ป้ายตัวเลข: ชิดขวา — ถ้ายาวเกินความกว้างเมนู (เช่นมี "รอตอบ n") จะพับลงบรรทัดใหม่แทนล้นออกนอกกรอบ */
.nav-item .nav-badge{ font-size:15px; font-weight:700; color:var(--color-neutral-700); white-space:nowrap; margin-left:auto; display:inline-flex; align-items:center; gap:6px; }
.nav-item .nav-await{ background:var(--brand-yellow); color:#1b1a19; padding:0 6px; line-height:20px; font-weight:700; }
.nav-user{ margin-top:auto; padding:16px 18px 0; border-top:2px solid var(--color-divider); }
.nav-user .u-label{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-neutral-600); }
.nav-user .u-name{ font-size:15px; font-weight:600; margin-top:5px; }
.nav-user .u-org{ font-size:15px; color:var(--color-neutral-700); margin-top:2px; }

main.main{ padding:28px 32px 60px; min-width:0; }

.tabbar{
  display:none; grid-template-columns:repeat(var(--tabs,4),1fr); position:sticky; bottom:0;
  background:var(--color-surface); border-top:2px solid var(--rule-strong); z-index:30;
}
/* เมนูเกิน 4 รายการ: ช่องสุดท้ายเป็นปุ่ม "เพิ่มเติม" เปิดแผงเมนูที่เหลือ ลอยอยู่เหนือแถบ (แถบเป็น sticky จึงใช้เป็นกรอบอ้างอิงได้) */
.tab-more{
  position:absolute; left:0; right:0; bottom:100%; max-height:60vh; overflow-y:auto;
  background:var(--color-surface); border-top:2px solid var(--rule-strong); box-shadow:0 -10px 24px rgba(27,26,25,.16);
}
.tab-more[hidden]{ display:none; }
.tab-more-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:50px; padding:12px 18px;
  font-size:15px; font-weight:700; color:var(--color-text); text-decoration:none; border-bottom:1px solid var(--color-divider);
}
.tab-more-item:last-child{ border-bottom:0; }
.tab-more-item:hover{ text-decoration:none; color:var(--color-accent); }
.tab-more-item.active{ color:var(--color-accent); background:var(--color-accent-100); }
.tab-more-item .tm-badge{ font-weight:400; color:var(--color-neutral-700); }
.tab-more-btn .tm-caret{ margin-left:4px; vertical-align:-2px; transition:transform .15s; }
.tab-more-btn[aria-expanded="true"]{ color:var(--color-text); background:var(--color-bg); }
.tab-more-btn[aria-expanded="true"] .tm-caret{ transform:rotate(180deg); }
.tab-item{
  padding:14px 4px; min-height:44px; font-size:15px; font-weight:700; cursor:pointer; border:0;
  border-top:3px solid transparent; background:transparent; color:var(--color-neutral-700);
  text-align:center; text-decoration:none;
}
.tab-item.active{ border-top-color:var(--color-accent); color:var(--color-accent); }

/* ── หัวหน้าจอ ───────────────────────────────────────────────────────────── */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.page-head .ph-txt{ flex:1 1 240px; min-width:0; }
.page-kicker{ margin:0 0 4px; color:var(--color-accent); }
.page-title{ margin:0; font-size:29px; }
.page-lead{ font-size:15px; color:var(--color-neutral-700); max-width:52em; }

/* ── แดชบอร์ด ────────────────────────────────────────────────────────────── */
.stat-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-bottom:2px solid var(--color-divider); background:var(--color-surface);
}
.stat-grid.six{ grid-template-columns:repeat(6,1fr); }
.stat-cell{ padding:18px 20px; }
.stat-cell + .stat-cell{ border-left:1px solid var(--color-divider); }
.stat-cell.off{ opacity:.55; }
.stat-cell .s-en{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-neutral-600); }
.stat-cell .s-num{ font-family:var(--font-heading); font-weight:800; font-size:38px; line-height:1; margin:10px 0 6px; }
.stat-cell .s-th{ font-size:15px; }
.dash-grid{ display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:24px; margin-top:26px; align-items:start; }
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  border-bottom:2px solid var(--rule-strong); padding-bottom:8px;
}
.panel-head h4{ margin:0; }
.queue-item{
  display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%;
  text-align:left; padding:14px 4px; background:transparent; border:0; border-bottom:1px solid var(--color-divider);
  cursor:pointer; text-decoration:none; color:inherit;
}
.queue-item:hover{ background:var(--color-accent-100); text-decoration:none; }
.queue-item .dot{ width:8px; height:8px; display:inline-block; }
.queue-item .q-id{ font-family:var(--font-heading); font-weight:800; font-size:15px; color:var(--color-neutral-700); white-space:nowrap; }
.queue-item .q-co{ font-size:15px; color:var(--color-neutral-600); }
.queue-item .q-title{ display:block; font-size:15px; font-weight:600; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-item .q-right{ text-align:right; }
.queue-item .q-st{ display:block; font-size:15px; font-weight:600; }
.queue-item .q-sla{ font-size:15px; font-weight:600; }
.queue-item .q-await{ display:inline-block; margin-top:4px; font-size:15px; font-weight:600; background:var(--brand-yellow); color:#1b1a19; padding:1px 7px; white-space:nowrap; }
.sla-report-row{ padding:13px 0; border-bottom:1px solid var(--color-divider); }
.sla-report-row .r-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.sla-report-row .r-name{ font-size:15px; font-weight:600; }
.sla-report-row .r-pct{ font-size:15px; font-family:var(--font-heading); font-weight:800; }
.sla-report-row .r-bar-wrap{ height:8px; background:var(--color-neutral-200); margin:7px 0 6px; }
.sla-report-row .r-bar{ height:100%; }
.sla-report-row .r-meta{ display:flex; gap:12px; font-size:15px; color:var(--color-neutral-700); margin-top:6px; flex-wrap:wrap; }
.routing-box{ margin-top:18px; background:var(--color-accent); color:#fff; padding:18px; }
.routing-box .rb-k{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-yellow); }
.routing-box .rb-b{ font-size:15px; line-height:1.65; margin-top:8px; }
.bysystem-row{ padding:14px 0; border-bottom:1px solid var(--color-divider); }
.bysystem-row .b-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bysystem-row .b-bar-wrap{ height:8px; background:var(--color-neutral-200); margin-top:8px; }
.bysystem-row .b-bar{ height:100%; background:var(--color-accent); }

.start-box{
  margin-bottom:24px; background:var(--color-surface); border:1px solid var(--color-divider);
  border-left:4px solid var(--color-accent); padding:20px 22px;
}
.start-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:18px 0 0; }
.start-steps .st-cell{ padding:0 18px; }
.start-steps .st-cell:first-child{ padding-left:0; }
.start-steps .st-cell + .st-cell{ border-left:1px solid var(--color-divider); }
.start-steps .st-cell.off{ opacity:.5; }
.start-steps .st-num{
  width:26px; height:26px; display:grid; place-items:center; flex:none;
  font-family:var(--font-heading); font-weight:800; font-size:15px; background:var(--color-text); color:#fff;
}
.start-steps .st-num.accent{ background:var(--color-accent); }
.start-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:15px; border-top:1px solid var(--color-divider); }

/* ── รายการ ticket ───────────────────────────────────────────────────────── */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding-bottom:14px; }
.tk-head{
  display:grid; grid-template-columns:var(--tk-cols); gap:12px; padding:9px 12px;
  background:var(--color-text); color:var(--color-bg); font-size:15px; letter-spacing:.08em; text-transform:uppercase;
}
.tk-row{
  display:grid; grid-template-columns:var(--tk-cols); gap:12px; align-items:center; width:100%;
  text-align:left; padding:13px 12px; background:var(--color-surface); border:0;
  border-bottom:1px solid var(--color-divider); cursor:pointer; text-decoration:none; color:inherit;
}
.tk-row:hover{ background:var(--color-accent-100); text-decoration:none; }
.tk-row .t-title{ display:block; font-size:15px; font-weight:600; line-height:1.4; }
.tk-row .t-sub{ display:block; font-size:15px; color:var(--color-neutral-700); margin-top:2px; }
.tk-row .t-meta{ display:contents; }
.tk-row .t-co{ font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-row .t-phase{ display:flex; align-items:center; gap:7px; font-size:15px; white-space:nowrap; }
.tk-row .t-sla{ font-size:15px; font-weight:600; }
.tk-group-head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; justify-content:space-between;
  padding:10px 12px; background:var(--color-accent-100); border-top:2px solid var(--color-accent);
  border-bottom:1px solid var(--color-divider);
}
.tk-group-head .g-name{ font-family:var(--font-heading); font-weight:800; font-size:15px; letter-spacing:.02em; line-height:1.45; }
.tk-group-head .g-meta{ font-size:15px; color:var(--color-neutral-700); }
.tk-empty{ padding:40px 12px; text-align:center; font-size:15px; color:var(--color-neutral-700); background:var(--color-surface); border-bottom:1px solid var(--color-divider); }
body.hide-sla .tk-sla{ display:none !important; }

/* ป้าย "ใครถึงตาตอบ" — 2 ท่อน (เหตุการณ์ / เวลาที่ผ่านมา) อยู่บรรทัดเดียวเมื่อที่พอ ไม่พอค่อยพับ */
.t-status{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.reply-flag{
  display:inline-flex; flex-wrap:wrap; align-items:center; column-gap:6px; font-size:15px; font-weight:600;
  padding:3px 8px; line-height:1.4; max-width:100%;
}
.reply-flag > span{ white-space:nowrap; }
.reply-flag .rf-time{ font-weight:500; }
.reply-flag .rf-dot{ width:7px; height:7px; flex:none; display:inline-block; background:currentColor; margin-right:6px; }
.reply-flag.ours{ background:var(--brand-yellow); color:#1b1a19; }                                                   /* ถึงตาฝั่งเรา */
.reply-flag.theirs{ background:var(--color-neutral-100); color:var(--color-neutral-700); font-weight:500; }          /* รออีกฝั่ง */
.reply-flag.other{ background:transparent; border:1px solid var(--brand-yellow); color:var(--color-neutral-800); font-weight:500; } /* ถึงตา IT ลูกค้า */
.tk-row.awaiting{ box-shadow:inset 4px 0 0 var(--brand-yellow); }
.tk-row.awaiting:hover{ background:var(--color-accent-2-100); }
.seg-count{ font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:20px; background:var(--brand-yellow); color:#1b1a19; padding:0 6px; }
.seg-opt.on .seg-count{ background:#fff; color:var(--color-accent); }

/* ── รายละเอียด ticket ───────────────────────────────────────────────────── */
.detail-grid{ display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:26px; margin-top:24px; align-items:start; }
.d-head{ display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.d-id{ font-family:var(--font-heading); font-weight:800; font-size:15px; background:var(--brand-yellow); padding:3px 9px; }
.d-updated{ font-size:15px; color:var(--color-neutral-700); margin-left:auto; }
.d-title{ margin:10px 0 14px; font-size:28px; max-width:24em; text-wrap:pretty; }
.stepper{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--color-surface); border-bottom:2px solid var(--color-divider); }
.step-cell{ padding:16px 18px; }
.step-cell + .step-cell{ border-left:1px solid var(--color-divider); }
.step-cell.now{ background:var(--color-accent-100); }
.step-cell.todo,.step-cell.skip{ opacity:.55; }
.step-cell .sp-num{
  width:24px; height:24px; display:grid; place-items:center; flex:none;
  font-family:var(--font-heading); font-weight:800; font-size:15px; background:var(--color-neutral-300); color:#1b1a19;
}
.step-cell.now .sp-num{ background:var(--color-accent); color:#fff; }
.step-cell.done .sp-num{ background:var(--color-text); color:#fff; }
.step-cell .sp-t{ font-family:var(--font-heading); font-weight:800; font-size:15px; }
.step-cell .sp-sub{ font-size:15px; line-height:1.5; margin-top:7px; color:var(--color-neutral-700); }
.step-cell.skip .sp-sub{ color:var(--st-late); }

.thread-msg{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:13px; padding:16px 0; border-top:1px solid var(--color-divider); }
.avatar{
  width:38px; height:38px; display:grid; place-items:center; font-family:var(--font-heading);
  font-weight:800; font-size:15px; background:var(--color-neutral-300); color:#1b1a19;
}
.avatar.sys{ background:var(--color-bg); color:var(--color-neutral-600); border:1px solid var(--color-divider); }
.avatar.accent{ background:var(--color-accent); color:#fff; }
.avatar.deep{ background:var(--color-accent-700); color:#fff; }
.avatar.yellow{ background:var(--brand-yellow); }
.avatar.dark{ background:var(--color-text); color:#fff; }
.msg-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:9px; }
.msg-who{ font-size:15px; font-weight:700; }
.msg-at{ font-size:15px; color:var(--color-neutral-600); margin-left:auto; }
.msg-badge{
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px;
  background:var(--color-accent-100); color:var(--color-accent-700);
}
.msg-badge.sys{ background:var(--color-bg); color:var(--color-neutral-700); border:1px solid var(--color-divider); }
.msg-text{ margin:7px 0 0; font-size:15px; line-height:1.65; white-space:pre-line; }
.msg-text.sys{ font-size:15px; color:var(--color-neutral-700); font-style:italic; }
.verify-block{ display:grid; gap:7px; margin-top:11px; padding:13px 15px; background:var(--color-surface); border-left:3px solid var(--color-accent); }
.verify-block.it{ border-left-color:var(--brand-yellow); }
.verify-block .v-title{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-700); }
.verify-block .v-row{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:10px; font-size:15px; line-height:1.55; }
.verify-block .v-row .k{ color:var(--color-neutral-700); }
.verify-block .v-row .v{ font-weight:600; text-wrap:pretty; }
.file-chip{
  display:inline-block; margin-top:8px; font-size:15px; padding:5px 9px;
  background:var(--color-bg); border:1px solid var(--color-divider); color:inherit; text-decoration:none;
}
.file-chip:hover{ border-color:var(--color-accent); color:var(--color-accent); text-decoration:none; }

.composer{ margin-top:20px; padding:18px; background:var(--color-accent-100); border-top:2px solid var(--color-accent); }
.composer .c-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.composer textarea.input{ background:var(--color-surface); }
.composer .c-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; align-items:center; }
.composer .c-hint{ margin-top:10px; font-size:15px; color:var(--color-accent-700); }
.composer .status-zone{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--color-divider); }
.composer .sz-kicker{ font-size:15px; color:var(--color-neutral-700); margin-bottom:9px; }
.composer .sz-kicker b{ color:var(--color-accent-800); }
.lock-note{ margin-top:20px; padding:16px 18px; background:var(--color-surface); border-left:4px solid var(--brand-yellow); font-size:15px; line-height:1.6; }
.verify-panel{ margin-bottom:14px; padding:15px 16px; background:var(--color-surface); border-left:4px solid var(--brand-yellow); }
.verify-done{
  display:flex; align-items:center; gap:9px; margin-bottom:12px; padding:10px 14px;
  background:var(--color-surface); border-left:4px solid var(--st-ok); font-size:15px; color:var(--st-ok); font-weight:600;
}
.info-panel{ margin-bottom:16px; padding:16px 18px; background:var(--color-surface); border-left:4px solid var(--brand-yellow); }

.meta-panel{ background:var(--color-surface); border:1px solid var(--color-divider); }
.meta-panel .mp-head{
  padding:14px 16px; border-bottom:2px solid var(--color-divider);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
}
.meta-panel .mp-actions{
  display:flex; gap:7px; flex-wrap:wrap; padding:11px 16px;
  border-bottom:1px solid var(--color-divider); background:var(--color-bg);
}
.meta-row{
  display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:11px 16px;
  border-bottom:1px solid var(--color-divider); font-size:15px;
}
.meta-row .k{ color:var(--color-neutral-700); }
.meta-row .v{ font-weight:600; overflow-wrap:anywhere; }
.mp-section{ border-top:1px solid var(--color-divider); padding:13px 16px; }
.collab-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px; font-size:15px;
  background:var(--color-bg); border:1px solid var(--color-divider);
}
.collab-chip.owner{ background:var(--color-accent-100); border-color:var(--color-accent-300); font-weight:600; }
.collab-chip .own-tag{ font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--color-accent-700); }
.linked-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start;
  padding:10px 11px; background:var(--color-bg); border:1px solid var(--color-divider);
}
.linked-row .kind{ font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; white-space:nowrap; background:var(--color-accent-100); color:var(--color-accent-700); }
.linked-row .kind.same{ background:var(--brand-yellow); color:#1b1a19; }

/* ── dialog ──────────────────────────────────────────────────────────────── */
.dlg-backdrop{
  display:none; position:fixed; inset:0; place-items:start center; padding:20px;
  overflow-y:auto; background:rgba(27,26,25,.55); z-index:70;
}
.dlg-backdrop.open{ display:grid; }
.dialog{
  width:min(480px,100%); display:flex; flex-direction:column; gap:14px; padding:20px 22px;
  background:var(--color-surface); border:2px solid var(--color-text); box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 40px); overflow-y:auto; animation:mtwIn .16s ease-out;
}
.dialog.wide{ width:min(560px,100%); }
.dialog-title{ font-family:var(--font-heading); font-weight:800; font-size:20px; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.pick-option{
  display:grid; gap:2px; text-align:left; padding:11px 13px; cursor:pointer; width:100%;
  border:1px solid var(--color-divider); background:var(--color-surface); font-family:var(--font-body);
}
.pick-option.selected{ border-color:var(--color-accent); background:var(--color-accent-100); }
.pick-option:disabled,.pick-option.blocked{ cursor:not-allowed; opacity:.5; }
.pick-option .po-t{ font-size:15px; font-weight:600; }
.pick-option .po-m{ font-size:15px; color:var(--color-neutral-700); }
.pick-list{ display:grid; gap:7px; max-height:36vh; overflow-y:auto; }

/* ── บริษัท ──────────────────────────────────────────────────────────────── */
.company-card{
  background:var(--color-surface); border:1px solid var(--color-divider); border-left:4px solid var(--color-accent);
  padding:18px 20px; display:grid; grid-template-columns:var(--form-cols); gap:18px; align-items:start;
}
.co-id{ font-family:var(--font-heading); font-weight:800; font-size:15px; background:var(--color-text); color:var(--color-bg); padding:2px 7px; }
.legacy-note{ font-size:15px; line-height:1.5; padding:9px 12px; background:var(--color-accent-2-100); border-left:3px solid var(--brand-yellow); }

/* ── ผู้ใช้งาน ───────────────────────────────────────────────────────────── */
.table{ width:100%; border-collapse:collapse; font-size:15px; }
.table th{
  text-align:left; font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(27,26,25,.6); padding:10px 8px; border-bottom:2px solid var(--color-divider); white-space:nowrap;
}
.table td{ padding:11px 8px; border-bottom:1px solid var(--color-divider); vertical-align:top; }
.table tbody tr:hover{ background:rgba(27,26,25,.03); }
.roleref-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.roleref-card{ background:var(--color-surface); border:1px solid var(--color-divider); border-top:4px solid var(--color-neutral-400); padding:16px 18px; }
.roleref-card.mtw{ border-top-color:var(--color-accent); }
.roleref-card.cust{ border-top-color:var(--brand-yellow); }
.roleref-card ul{ margin:11px 0 0; padding-left:17px; font-size:15px; line-height:1.7; color:var(--color-neutral-800); }
.danger-zone{ padding-top:15px; border-top:2px solid var(--color-divider); }
.danger-confirm{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:11px; padding:11px 13px;
  background:#fbeae8; border:2px solid var(--st-late);
}
.del-btn{
  margin-top:11px; padding:8px 14px; font-size:15px; font-weight:700; cursor:pointer;
  color:var(--st-late); background:var(--color-surface); border:2px solid var(--st-late);
}
.confirm-del-btn{ padding:7px 13px; font-size:15px; font-weight:700; cursor:pointer; color:#fff; background:var(--st-late); border:2px solid var(--st-late); }

/* ── SLA ─────────────────────────────────────────────────────────────────── */
.sla-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; margin-bottom:22px; background:var(--color-accent-100); border-left:4px solid var(--color-accent);
}
.sla-banner.off{ background:var(--color-surface); border-left-color:var(--color-neutral-400); }
.tier-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tier-card{ background:var(--color-surface); border:1px solid var(--color-divider); border-top:4px solid var(--color-neutral-500); padding:18px; }
.tier-card.gold{ border-top-color:var(--brand-yellow); }
.tier-card.silver{ border-top-color:var(--color-accent); }
.day-chip{
  min-width:34px; padding:6px 8px; font-size:15px; font-weight:600; cursor:pointer;
  border:1px solid var(--color-divider); background:var(--color-surface); color:var(--color-neutral-700);
}
.day-chip.on{ border-color:var(--color-accent); background:var(--color-accent); color:#fff; }
/* หน้าตั้งค่า SLA ตอนปิด SLA ทั้งระบบ: ส่วนที่ "ยังไม่มีผล" แสดงจางแต่แก้ล่วงหน้าได้ — ชี้/โฟกัสแล้วกลับมาชัด จะได้ไม่ดูเหมือนถูกล็อก */
.sla-idle{ opacity:.6; transition:opacity .15s; }
.sla-idle:hover,.sla-idle:focus-within{ opacity:1; }
.indep-tag{ display:inline-block; margin-left:8px; padding:2px 8px; font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:0; vertical-align:2px; background:#f1f8f3; color:var(--st-ok); }
.sla-co-row{
  display:grid; grid-template-columns:minmax(0,1.4fr) 128px minmax(0,1.5fr) 128px 56px; gap:12px;
  align-items:center; padding:13px 14px; background:var(--color-surface); border-bottom:1px solid var(--color-divider);
}
.sla-co-row.off{ opacity:.6; }
.sla-co-edit{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0 14px 14px;
  background:var(--color-surface); border-bottom:1px solid var(--color-divider);
}

/* ── โปรไฟล์ / ช่วยเหลือ ─────────────────────────────────────────────────── */
.profile-grid{ display:grid; grid-template-columns:minmax(0,1.7fr) 300px; gap:26px; align-items:start; }
.panel-card{ background:var(--color-surface); border:1px solid var(--color-divider); padding:22px; }
.session-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--color-divider);
}
.session-row .remember-tag{ display:inline-block; margin-top:5px; padding:1px 8px; font-size:15px; font-weight:600; background:var(--color-accent-100); color:var(--color-accent-700); }
/* หน้า login: ช่องจดจำการเข้าสู่ระบบ */
.remember-opt{ display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; font-size:15px; line-height:1.5; cursor:pointer; }
.remember-opt input{ width:20px; height:20px; flex:none; margin:1px 0 0; accent-color:var(--color-accent); }
.remember-opt b{ font-weight:600; }
.remember-opt .ro-sub{ display:block; color:var(--color-neutral-700); }
.help-phase{ padding:18px 20px; border-bottom:1px solid var(--color-divider); background:var(--color-surface); }
.help-phase.off{ opacity:.55; }
.help-phase .hp-num{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  font-family:var(--font-heading); font-weight:800; font-size:15px; background:var(--color-neutral-300);
}
.help-phase .hp-num.yellow{ background:var(--brand-yellow); }
.help-phase .hp-num.accent{ background:var(--color-accent); color:#fff; }
.aside-blue{ background:var(--color-accent); color:#fff; padding:20px; }
.aside-blue .ab-k{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-yellow); }
.aside-attach{ background:var(--color-surface); border:1px solid var(--color-divider); border-top:0; }

/* checkbox แบบชิป/ช่องติ๊ก (ใช้ใน dialog ขอบเขต) */
label.choice-btn{ display:inline-flex; align-items:center; gap:6px; }
label.choice-btn input,label.check-sq input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
label.choice-btn:has(input:checked){ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.check-sq{
  width:20px; height:20px; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--color-divider); background:var(--color-surface); color:#fff; font-size:15px; font-weight:700;
}
.check-sq::after{ content:''; }
.check-sq:has(input:checked){ background:var(--color-accent); border-color:var(--color-accent); }
.check-sq:has(input:checked)::after{ content:'✓'; }

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast{
  position:fixed; right:22px; bottom:22px; background:var(--color-text); color:var(--color-bg);
  padding:12px 18px; font-size:15px; font-weight:600; z-index:80; animation:mtwIn .18s ease-out;
  max-width:min(420px,90vw);
}

/* ═══ responsive: 1240px ย่อ sidebar / ตัดคอลัมน์บริษัท ═══════════════════ */
@media (max-width:1240px){
  .shell{ grid-template-columns:184px minmax(0,1fr); }
  :root{ --tk-cols:80px minmax(0,1fr) 96px 118px 74px; --form-cols:minmax(0,1fr); }
  body.hide-sla{ --tk-cols:80px minmax(0,1fr) 96px 118px; }
  .tk-co{ display:none !important; }
  .tier-grid,.roleref-grid{ grid-template-columns:minmax(0,1fr); }
  .profile-grid{ grid-template-columns:minmax(0,1fr); }
  .sla-co-row{ grid-template-columns:minmax(0,1fr) auto; }
  .sla-co-edit{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ═══ responsive: 900px มือถือ — tab bar + การ์ดแถว ═══════════════════════ */
@media (max-width:900px){
  .shell{ grid-template-columns:minmax(0,1fr); }
  .sidenav{ display:none; }
  .tabbar{ display:grid; }
  main.main{ padding:18px 16px 40px; }
  .login-grid{ grid-template-columns:1fr; }
  .login-left{ padding:32px 24px 28px; }
  .login-right{ padding:32px 24px; }
  .stat-grid,.stat-grid.six{ grid-template-columns:repeat(2,1fr); }
  .stat-cell + .stat-cell{ border-left:0; }
  .stat-cell:nth-child(even){ border-left:1px solid var(--color-divider); }
  .stat-cell:nth-child(n+3){ border-top:1px solid var(--color-divider); }
  .stat-cell .s-num{ font-size:32px; }
  .dash-grid,.detail-grid{ grid-template-columns:minmax(0,1fr); }
  .start-steps{ grid-template-columns:minmax(0,1fr); }
  .start-steps .st-cell{ padding:14px 0; }
  .start-steps .st-cell + .st-cell{ border-left:0; border-top:1px solid var(--color-divider); }
  .stepper{ grid-template-columns:minmax(0,1fr); }
  .step-cell + .step-cell{ border-left:0; border-top:1px solid var(--color-divider); }
  .tk-head{ display:none; }
  .tk-row{ display:block; padding:13px 12px; }
  .tk-row .t-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:8px; }
  .tk-row .t-title{ margin-top:4px; white-space:normal; }
  .company-card{ grid-template-columns:minmax(0,1fr); }
  .header-right{ flex-wrap:wrap; }
  .me-name-mini{ display:none; }
  .app-header .app-name{ display:none; }
  .login-steps{ grid-template-columns:1fr; }
  .login-steps>div+div{ border-left:0; border-top:1px solid rgba(255,255,255,.3); }
  .nav-hide-mobile{ display:none; }
  .small-btn,.choice-btn{ min-height:38px; }
  .icon-btn,.me-chip{ width:40px; height:40px; }
}