/* FLOWTRACK — design tokens จาก Design Flow Dashboard.dc.html */
:root {
  --bg: #f4f2ee;
  --ink: #1c1b18;
  --paper: #ffffff;
  --border: #e3ded4;
  --border-soft: #eee9df;
  --muted: #7a7466;
  --dim: #5c574c;
  --faint: #a8a294;
  --gold: #d9a441;
  --gold-soft: #fdf8ee;
  --gold-border: #f0dfb8;
  --brown: #8a5a2b;
  --brown-dark: #5f3d1c;
  --red: #a8442e;
  --red-bg: #faeae4;
  --green: #3d6b35;
  --green-bg: #e9f2e4;
  --green-border: #c9dfc0;
  --blue: #2e5aa8;
  --blue-bg: #e6edf9;
  --tan: #eee9df;
  --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif;
  color: var(--ink);
}
a { color: var(--brown); text-decoration: none; }
a:hover { color: var(--brown-dark); text-decoration: underline; }
button { font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.app { min-height: 100vh; display: flex; flex-direction: column; }

/* ===== Top bar ===== */
.topbar {
  background: var(--ink); color: var(--bg);
  display: flex; align-items: center; gap: 16px;
  padding: 0 28px; height: 56px; flex-shrink: 0;
}
.topbar .brand { font-weight: 700; font-size: 16px; letter-spacing: 0.02em; }
.topbar .brand em { color: var(--gold); font-style: normal; }
.topbar .tagline { font-size: 13px; color: var(--faint); }
.topbar .tagline b { color: var(--gold); }
.topbar .tagline b.b-side { color: var(--bg); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.topbar .updated { color: var(--faint); }
.topbar .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.topbar .avatar.role-b { background: var(--bg); }
.topbar .logout { color: var(--faint); font-size: 12px; }
.topbar .logout:hover { color: var(--bg); }
/* ชื่อหน้า + ปุ่มค้นหาบน topbar — desktop มี topbar-nav/topbar-search อยู่แล้ว จึงโชว์เฉพาะมือถือ */
.topbar-page, .topbar-search-btn { display: none; }

.main { display: flex; flex: 1; min-height: 0; }

/* ===== Left: list pane ===== */
.list-pane { flex: 1; padding: 24px 28px; overflow-y: auto; min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card {
  display: block; background: var(--paper); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; cursor: pointer; color: inherit;
}
.stat-card:hover { border-color: var(--gold); text-decoration: none; color: inherit; }
.stat-card .lbl { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat-card .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stat-card .val { font-size: 26px; font-weight: 700; margin-top: 4px; }
.stat-card .sub { font-size: 11px; color: var(--faint); margin-top: 2px; }

.filters { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-pill {
  display: inline-block; border: 1px solid var(--border); background: var(--paper);
  color: var(--dim); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.filter-pill:hover { text-decoration: none; border-color: var(--gold); color: var(--dim); }
.filter-pill.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-pill.active:hover { color: var(--bg); }
.filters .count { margin-left: auto; font-size: 12px; color: var(--faint); }
/* บน desktop ตัวหุ้มนี้ต้องไม่มีตัวตน — pill ยังเป็น flex item ของ .filters เหมือนเดิม
   บนมือถือมันกลายเป็นแถบเลื่อนแนวนอนของตัวเอง เพื่อไม่ให้ปุ่ม .btn-new ถูกดันหลุดขอบจอ */
.filter-scroll { display: contents; }
.btn-new {
  display: inline-block; background: var(--gold); color: var(--ink);
  border: 1px solid var(--gold); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 600;
}
.btn-new:hover { background: #c9932f; text-decoration: none; color: var(--ink); }

.project-list { display: flex; flex-direction: column; gap: 10px; }
.project-card {
  display: block; background: var(--paper); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; cursor: pointer; color: inherit;
}
.project-card:hover { border-color: var(--gold); text-decoration: none; color: inherit; }
.project-card.selected { border-color: var(--gold); box-shadow: 0 2px 10px rgba(217, 164, 65, 0.25); }
.project-card .row1 { display: flex; align-items: baseline; gap: 10px; }
.project-card .jobno { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.project-card .title {
  font-weight: 600; font-size: 15px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.project-deadline-line {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap; width: fit-content;
  margin-top: 7px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 11.5px; color: var(--blue); background: var(--blue-bg);
}
.project-deadline-line.soon { color: var(--brown); background: var(--gold-soft); border-color: var(--gold-border); }
.project-deadline-line.today,
.project-deadline-line.overdue,
.project-deadline-line.missing { color: var(--red); background: var(--red-bg); border-color: #eccfc4; }
.project-deadline-line.done { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.project-shipment-line {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin-top: 7px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 11.5px; line-height: 1.35; color: var(--dim); background: var(--bg);
}
.project-shipment-line .ps-lot { font-family: var(--mono); font-weight: 700; }
.project-shipment-line.confirmed { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.project-shipment-line.pending { color: var(--brown); background: var(--gold-soft); border-color: var(--gold-border); }
.project-shipment-line.missing { color: var(--red); background: var(--red-bg); border-color: #eccfc4; }
.project-quote-line {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  width: fit-content; max-width: 100%; margin-top: 7px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 11.5px; line-height: 1.35; color: var(--dim); background: var(--bg);
}
.project-quote-line .pq-no { font-family: var(--mono); font-weight: 700; }
.project-quote-line .pq-state { font-weight: 600; border-radius: 5px; padding: 1px 6px; }
.project-quote-line.present { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.project-quote-line.missing.urgent { color: var(--red); background: var(--red-bg); border-color: #eccfc4; }
.project-quote-line.missing.warning { color: var(--brown); background: var(--gold-soft); border-color: var(--gold-border); }
.project-quote-line.missing.legacy { color: var(--muted); background: var(--bg); border-color: var(--border); }
.project-doc-lines { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.project-doc-lines .project-quote-line,
.project-doc-lines .project-shipment-line { margin-top: 0; }
.project-doc-score {
  width: fit-content; max-width: 100%; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 7px; font-size: 11.5px; line-height: 1.35; color: var(--muted); background: var(--bg);
}
.status-badge {
  font-size: 11.5px; font-weight: 600; border-radius: 6px;
  padding: 3px 9px; white-space: nowrap;
}

.pipeline { display: flex; align-items: center; margin-top: 12px; }
.pipeline .step { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pipeline .bar { height: 5px; border-radius: 3px; background: var(--border); margin-right: 4px; }
.pipeline .txt {
  font-size: 10.5px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline .step.done .bar { background: var(--green); }
.pipeline .step.done .txt { color: var(--green); font-weight: 600; }
.pipeline .step.active .bar { background: var(--gold); }
.pipeline .step.active .txt { color: var(--brown); font-weight: 700; }

.alert-chip {
  margin-top: 10px; font-size: 12px; color: var(--red); background: var(--red-bg);
  border-radius: 7px; padding: 6px 10px; display: inline-block;
}
.empty-list { color: var(--faint); font-size: 13px; padding: 32px 0; text-align: center; }

/* ===== Right: detail pane ===== */
.detail-pane {
  width: 460px; flex-shrink: 0; background: var(--paper);
  border-left: 1px solid var(--border); overflow-y: auto;
}
.detail-head { padding: 22px 24px 8px; }
.detail-head .jobno { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.detail-head .title { font-size: 18px; font-weight: 700; margin-top: 2px; }
.detail-head .customer { font-size: 13px; color: var(--muted); margin-top: 2px; }
.detail-head .badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.badge-rev { font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 4px 10px; }
.approved-note {
  margin-top: 12px; font-size: 12.5px; color: var(--green); background: var(--green-bg);
  border: 1px solid var(--green-border); border-radius: 8px; padding: 8px 12px;
}

.section { padding: 14px 24px; border-bottom: 1px solid var(--border-soft); }
.section-title {
  font-size: 12px; font-weight: 600; color: var(--faint);
  letter-spacing: 0.06em; margin-bottom: 10px;
}
.project-next-overview {
  border: 1px solid var(--gold-border); background: var(--gold-soft); border-radius: 9px; padding: 11px 12px;
}
.pnext-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.pnext-owner { margin-left: auto; color: var(--brown); font-size: 11.5px; font-weight: 600; }
.pnext-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.pnext-docs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.doc-chip { border-radius: 999px; padding: 3px 8px; font-size: 10.5px; border: 1px solid var(--border); }
.doc-chip.done { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.doc-chip.missing { color: var(--muted); background: var(--paper); }

.project-schedule-overview { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--blue-bg); }
.project-schedule-overview.soon { background: var(--gold-soft); border-color: var(--gold-border); }
.project-schedule-overview.today,
.project-schedule-overview.overdue,
.project-schedule-overview.missing { background: var(--red-bg); border-color: #eccfc4; }
.project-schedule-overview.done { background: var(--green-bg); border-color: var(--green-border); }
.schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.schedule-grid > div { display: flex; flex-direction: column; gap: 2px; }
.schedule-grid .ship-due { grid-column: 1 / -1; }
.schedule-grid span { font-size: 11px; color: var(--muted); }
.schedule-grid b { font-size: 13px; }
.schedule-state { margin-top: 9px; font-size: 12px; font-weight: 700; }
.project-schedule-overview.overdue .schedule-state,
.project-schedule-overview.today .schedule-state,
.project-schedule-overview.missing .schedule-state { color: var(--red); }
.project-schedule-overview.soon .schedule-state { color: var(--brown); }
.project-schedule-overview.done .schedule-state { color: var(--green); }
.deadline-quick-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
.deadline-quick-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; }
.deadline-quick-row input[type="date"] { margin: 0; }
.deadline-quick-row .btn-mini { min-height: 38px; white-space: nowrap; }
.production-deadline-summary { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--green-border); border-radius: 8px; background: var(--green-bg); }
.production-deadline-summary > span { display: block; font-size: 12px; color: var(--dim); margin-bottom: 2px; }
.production-deadline-summary > b { display: block; font-size: 14px; color: var(--green); }
.schedule-edit { margin-top: 10px; }

/* ใบส่งที่ผูกกับโปรเจกต์ — แยก "ยืนยันแล้ว / กำลังแพ็ก / ไม่มีเอกสาร" ให้เห็นก่อนปิดงาน */
.project-shipment-overview {
  border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--bg);
}
.project-shipment-overview.confirmed { background: var(--green-bg); border-color: var(--green-border); }
.project-shipment-overview.pending { background: var(--gold-soft); border-color: var(--gold-border); }
.project-shipment-overview.missing { background: var(--red-bg); border-color: #eccfc4; color: var(--red); }
.project-shipment-overview .pso-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.project-shipment-overview .pso-head strong { font-family: var(--mono); font-size: 14px; }
.project-shipment-overview .pso-state {
  font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px;
  background: rgba(255,255,255,.58); color: var(--dim);
}
.project-shipment-overview.confirmed .pso-state { color: var(--green); }
.project-shipment-overview.pending .pso-state { color: var(--brown); }
.project-shipment-overview .pso-meta { margin-top: 5px; font-size: 12.5px; color: var(--dim); }
.project-shipment-overview .pso-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
.project-shipment-overview .pso-hint { margin-top: 5px; font-size: 12px; color: inherit; }
.project-shipment-overview .pso-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.project-shipment-overview .pso-actions .btn-mini { margin-top: 0; background: var(--paper); }

/* ใบเสนอราคาที่ผูกกับโปรเจกต์ — ยอด/ไฟล์/การชำระเงินเห็นเฉพาะหัวหน้าขึ้นไป */
.project-quotation-overview {
  border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; background: var(--bg);
}
.project-quotation-overview.present { background: var(--green-bg); border-color: var(--green-border); }
.project-quotation-overview.missing { background: var(--red-bg); border-color: #eccfc4; color: var(--red); }
.project-quotation-overview .pqo-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.project-quotation-overview .pqo-head strong { font-family: var(--mono); font-size: 14px; }
.project-quotation-overview .pqo-total { margin-top: 8px; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--ink); }
.project-quotation-overview .pqo-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--dim); }
.project-quotation-overview .pqo-file {
  display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--paper); font-size: 12px;
}
.project-quotation-overview .pqo-filename { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-quotation-overview .pqo-filesize { color: var(--faint); white-space: nowrap; }
.project-quotation-overview .pqo-file .btn-mini { margin-top: 0; flex-shrink: 0; }
.project-quotation-overview .pqo-file.missing-file { color: var(--red); background: var(--red-bg); border-color: #eccfc4; }
.project-quotation-overview .pqo-payment { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--dim); }
.project-quotation-overview .pqo-payment b { font-family: var(--mono); color: var(--ink); }
.project-quotation-overview .pqo-hint { margin-top: 5px; font-size: 12px; color: inherit; }
.project-quotation-overview .pqo-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.project-quotation-overview .pqo-actions .btn-mini { margin-top: 0; background: var(--paper); }

/* Action zone */
.actions .msg-wait { font-size: 13px; color: var(--faint); }
.action-form { margin-top: 10px; }
.action-form label { display: block; font-size: 12.5px; color: var(--dim); margin: 8px 0 4px; }
.action-form input[type="file"],
.action-form input[type="date"],
.action-form input[type="text"],
.action-form textarea {
  width: 100%; font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--bg); color: var(--ink);
}
.action-form textarea { resize: vertical; min-height: 64px; }
.field-hint { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.btn {
  display: inline-block; border: none; border-radius: 8px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 10px;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #33312c; }
.btn-approve { background: var(--green); color: #fff; }
.btn-approve:hover { background: #2f5429; }
.btn-revise { background: var(--red-bg); color: var(--red); border: 1px solid #eccfc4; }
.btn-revise:hover { background: #f5ddd4; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #c9932f; }
.action-split { display: flex; gap: 10px; }
.action-split > form { flex: 1; }
.flash { margin: 0 24px; margin-top: 14px; font-size: 13px; border-radius: 8px; padding: 9px 12px; }
.flash.ok { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); }
.flash.err { color: var(--red); background: var(--red-bg); border: 1px solid #eccfc4; }

/* Status stepper */
.stepper { display: flex; flex-direction: column; }
.step-row { display: flex; gap: 12px; }
.step-rail { display: flex; flex-direction: column; align-items: center; width: 18px; }
.step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid #d5cfc2; flex-shrink: 0; margin-top: 2px;
}
.step-line { width: 2px; flex: 1; background: var(--border); min-height: 14px; }
.step-body { padding-bottom: 14px; min-width: 0; }
.step-label { font-size: 13px; color: var(--faint); }
.step-meta { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.step-row.done .step-dot { background: var(--green); border-color: var(--green); }
.step-row.done .step-line { background: var(--green); }
.step-row.done .step-label { color: var(--green); font-weight: 600; }
.step-row.active .step-dot { background: var(--gold); border-color: var(--gold); }
.step-row.active .step-label { color: var(--ink); font-weight: 700; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 12px; }
.event { display: flex; gap: 12px; }
.event .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.event.side-a .avatar { background: var(--gold); color: var(--ink); }
.event.side-b .avatar { background: var(--ink); color: var(--bg); }
.event .bubble {
  flex: 1; min-width: 0; border-radius: 10px; padding: 10px 13px;
  border: 1px solid var(--border-soft);
}
.event.side-a .bubble { background: var(--gold-soft); border-color: var(--gold-border); }
.event.side-b .bubble { background: #f9f7f3; border-color: #e8e3d9; }
.event .head { display: flex; align-items: baseline; gap: 8px; }
.event .act { font-size: 13px; font-weight: 600; }
.event .time { font-size: 11px; color: var(--faint); margin-left: auto; white-space: nowrap; }
.file-chip {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px;
}
.file-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500; color: #fff;
  border-radius: 4px; padding: 2px 6px;
}
.file-tag.t-pdf { background: var(--red); }
.file-tag.t-skp { background: var(--blue); }
.file-tag.t-img { background: var(--green); }
.file-tag.t-other { background: var(--muted); }
.file-chip .fname {
  font-size: 12px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip .fsize { font-size: 11px; color: var(--faint); white-space: nowrap; }
.file-chip .dl { font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.file-chip .lock { font-size: 11px; }
.event .comment {
  font-size: 12.5px; color: var(--dim); margin-top: 7px;
  border-left: 3px solid var(--gold); padding-left: 9px;
}

/* ===== Login & forms page ===== */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px;
  padding: 32px; width: 100%; max-width: 380px;
}
.auth-card .brand { font-weight: 700; font-size: 20px; }
.auth-card .brand em { color: var(--gold); font-style: normal; }
.auth-card .sub { font-size: 13px; color: var(--muted); margin-top: 4px; margin-bottom: 20px; }
.auth-card label { display: block; font-size: 12.5px; color: var(--dim); margin: 12px 0 4px; }
.auth-card input {
  width: 100%; font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  background: var(--bg); color: var(--ink);
}
.auth-card .btn { width: 100%; margin-top: 18px; padding: 11px; }
.auth-card .err { color: var(--red); background: var(--red-bg); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 14px; }
.auth-card .hint { font-size: 11.5px; color: var(--faint); margin-top: 14px; }

.page-wrap { max-width: 640px; margin: 0 auto; padding: 28px; }
.page-card { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 28px; }
.page-card h1 { font-size: 18px; margin: 0 0 4px; }
.page-card .sub { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.back-link { display: inline-block; font-size: 13px; margin-bottom: 14px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .main { flex-direction: column; }
  .detail-pane { width: 100%; border-left: none; border-top: 1px solid var(--border); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .list-pane { padding: 16px; }
  .topbar { padding: 0 16px; gap: 10px; }
  .topbar .tagline, .topbar .updated { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .project-card, .stat-card, .filter-pill, .btn { transition: border-color .15s, background .15s, box-shadow .15s; }
}

/* ===== Language switcher ===== */
.lang-switch { font-size: 12px; white-space: nowrap; }
.lang-switch a { color: var(--faint); }
.lang-switch a.active { color: var(--gold); font-weight: 600; }
.lang-switch a:hover { color: var(--bg); text-decoration: none; }
.lang-switch .sep { color: var(--faint); margin: 0 5px; }
.auth-card .lang-switch { display: block; text-align: right; margin-bottom: 6px; }
.auth-card .lang-switch a { color: var(--muted); }
.auth-card .lang-switch a.active { color: var(--brown); font-weight: 600; }
.auth-card .lang-switch a:hover { color: var(--ink); }

/* ===== Help / user guide ===== */
.help-wrap { max-width: 860px; margin: 0 auto; padding: 28px 28px 60px; }
.help-hero { margin-bottom: 8px; }
.help-hero h1 { font-size: 24px; margin: 0 0 4px; }
.help-hero .sub { font-size: 14px; color: var(--muted); }
.help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.help-toc a {
  font-size: 12.5px; border: 1px solid var(--border); background: var(--paper);
  border-radius: 999px; padding: 6px 14px; color: var(--dim);
}
.help-toc a:hover { border-color: var(--gold); text-decoration: none; color: var(--dim); }
.help-sec { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px; margin-bottom: 16px; }
.help-sec h2 { font-size: 17px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.help-sec h2 .ic {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.help-sec h2 .a { background: var(--gold); color: var(--ink); }
.help-sec h2 .b { background: var(--ink); color: var(--bg); }
.help-sec h2 .g { background: var(--green-bg); color: var(--green); }
.help-sec .lead { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.help-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.help-steps > li {
  counter-increment: s; position: relative; padding: 0 0 14px 40px; margin: 0;
  font-size: 13.5px; line-height: 1.65;
}
.help-steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--brown); font-family: var(--mono);
}
.help-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 2px;
  width: 1px; background: var(--border);
}
.help-steps b { font-weight: 600; }
.help-note {
  font-size: 12.5px; color: var(--dim); background: var(--gold-soft);
  border: 1px solid var(--gold-border); border-radius: 8px; padding: 10px 13px; margin-top: 12px;
}
.help-note.lock { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.help-note.warn { background: var(--red-bg); border-color: #eccfc4; color: var(--red); }

/* ตัวอย่างหน้าตาไฟล์ที่ระบบออกให้ (packing list) */
.help-example {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin: 12px 0 0; overflow-x: auto; white-space: pre;
  color: var(--dim);
}
.help-example b { color: var(--ink); }

/* ตารางสถานะ */
.status-grid { display: flex; flex-direction: column; gap: 8px; }
.status-row { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.status-row .sb { flex-shrink: 0; margin-top: 1px; }
.status-row .desc { color: var(--dim); line-height: 1.5; }
.help-inline-badge {
  font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px;
  white-space: nowrap; display: inline-block;
}

/* ป้าย role ในบรรทัด */
.rtag { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 7px; font-family: var(--mono); }
.rtag.a { background: var(--gold); color: var(--ink); }
.rtag.b { background: var(--ink); color: var(--bg); }

@media (max-width: 700px) {
  .help-wrap { padding: 16px 16px 48px; }
  .help-sec { padding: 18px; }
}

/* ===== Claim module: topbar nav ===== */
.topbar-nav { display: flex; gap: 4px; }
.topbar-nav a {
  font-size: 13px; color: var(--faint); padding: 6px 12px; border-radius: 8px; font-weight: 500;
}
.topbar-nav a:hover { color: var(--bg); text-decoration: none; background: rgba(255,255,255,0.06); }
.topbar-nav a.active { color: var(--ink); background: var(--gold); font-weight: 600; }

.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  font-size: 13px; color: var(--faint); padding: 6px 12px; border-radius: 8px; font-weight: 500;
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
}
.nav-dropdown-toggle:hover { color: var(--bg); background: rgba(255,255,255,0.06); }
.nav-dropdown-toggle.active { color: var(--ink); background: var(--gold); font-weight: 600; }
.nav-dropdown-toggle .nav-caret { font-size: 10px; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 160px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(28,27,24,.22);
}
.nav-dropdown-menu[hidden] { display: none; }
.nav-dropdown-menu a { font-size: 13px; color: var(--dim); padding: 8px 10px; border-radius: 8px; font-weight: 500; }
.nav-dropdown-menu a:hover { text-decoration: none; background: var(--bg); }
.nav-dropdown-menu a.active { color: var(--ink); background: var(--gold); font-weight: 600; }

/* item progress bar ใต้การ์ดเครม — เรียง เสร็จ→ค้าง จากซ้าย และ PENDING เป็น "ราง" ไม่ใช่สีทึบ
   ไม่งั้นใบที่ยังไม่ผลิตสักชิ้นจะได้แถบสีเต็มความกว้าง อ่านผิดเป็นเสร็จ 100% */
.item-bar { display: flex; gap: 2px; margin-top: 10px; height: 6px; }
.item-seg { border-radius: 3px; min-width: 6px; }
.item-seg.is-pending { background: var(--tan); box-shadow: inset 0 0 0 1px var(--border); }

/* select / number ในฟอร์ม (ใช้สไตล์เดียวกับ input) */
.action-form select, .action-form .ipt,
.action-form input[type="number"] {
  width: 100%; font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--bg); color: var(--ink);
}
.item-row { display: flex; gap: 6px; margin-bottom: 6px; }
.item-row .ir-part { flex: 1; }
.item-row .ir-qty { width: 64px; }
.item-row .ir-reason { width: 130px; }
.item-row input, .item-row select {
  font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  background: var(--bg); color: var(--ink);
}

/* ปุ่มเล็ก */
.btn-mini {
  display: inline-block; border: 1px solid var(--border); background: var(--paper);
  border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 8px; color: var(--dim);
  font-family: 'IBM Plex Sans Thai','Noto Sans SC',sans-serif;
}
.btn-mini:hover { border-color: var(--gold); }
.btn-mini-blue { background: var(--blue-bg); color: var(--blue); border-color: #cfe0f5; margin-right: 6px; }
.btn-mini-blue:hover { background: #d8e6f8; }
.btn-mini-red { background: var(--red-bg); color: var(--red); border-color: #eccfc4; }
.btn-mini-red:hover { background: #f5ddd4; }

/* รูปหน้างาน */
.photo-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-thumb {
  width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); display: block; background: var(--bg);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* รายการชิ้นส่วนในใบเครม */
.item-list { display: flex; flex-direction: column; gap: 10px; }
.claim-item { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--paper); }
.claim-item .ci-head { display: flex; align-items: center; gap: 8px; }
.claim-item .ci-name { font-size: 13.5px; font-weight: 600; flex: 1; min-width: 0; }
.claim-item .ci-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.claim-item .ci-note {
  font-size: 12px; color: var(--dim); margin-top: 6px;
  border-left: 3px solid var(--border); padding-left: 8px;
}
.claim-item .ci-actions { margin-top: 8px; }
.claim-item .ci-actions form { margin: 0; }
.lp-qty { color: var(--muted); font-weight: 400; font-size: 12px; }

/* สร้างล๊อต */
.lot-new-card { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.lot-pick { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; margin-bottom: 6px; }
.lot-pick-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; cursor: pointer; border: 1px solid transparent;
}
.lot-pick-row:hover { background: var(--bg); }
.lot-pick-row .lp-part { flex: 1; font-weight: 500; }
.lot-pick-row .lp-claim { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
/* ปุ่มถอดรายการออกจากใบส่ง / ปุ่มลบแบบเน้นอันตราย */
.btn-remove {
  border: 1px solid var(--border); background: var(--paper); color: var(--faint);
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; padding: 0;
  font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.btn-remove:hover { border-color: var(--red); color: var(--red); background: var(--red-bg); }
/* ปุ่มย่อยประเภทในออเดอร์เดียวกัน */
.btn-split {
  border: 1px solid var(--border); background: var(--paper); color: var(--brown);
  border-radius: 6px; width: 22px; height: 22px; line-height: 1; padding: 0;
  font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.btn-split:hover { border-color: var(--gold); background: var(--gold-soft); }
.btn-mini.btn-danger { color: var(--red); border-color: #eccfc4; background: var(--red-bg); }
.btn-mini.btn-danger:hover { background: #f6ded6; border-color: var(--red); }

/* งานที่โรงงานกดจัดส่งไปแล้วแต่ยังไม่มีใบส่ง — ตามเก็บย้อนหลังได้ */
.lot-pick-row .lp-late {
  font-size: 10.5px; font-weight: 500; margin-left: 6px; white-space: nowrap;
  color: #8a5a2b; background: #f7ecd9; border: 1px solid #f0dfb8;
  border-radius: 5px; padding: 1px 6px;
}

/* ===== Claim new: per-item rows with photo ===== */
.item-row { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--paper); }
.item-row .ir-top { display: flex; gap: 6px; }
.item-row .ir-top .ir-part { flex: 1 1 auto; min-width: 0; }
.item-row .ir-top .ir-qty { flex: 0 0 64px; width: 64px; }
.item-row .ir-top .ir-reason { flex: 0 0 140px; width: 140px; }
.action-form .item-row input[type="number"].ir-qty { width: 64px; }   /* กัน rule width:100% ของ number */
.ir-photo-label { display: block; font-size: 11.5px; color: var(--muted); margin: 8px 0 4px; }
.item-row .ir-photo { width: 100%; font-size: 12px; }

/* per-item photo thumbnails (เล็กกว่าปกติ) ในหน้า detail */
.ci-photos { margin-top: 8px; }
.photo-thumb.sm { width: 64px; height: 64px; border-radius: 8px; }

/* ===== Dispatch (การส่งออก) ===== */
.ship-group-label { font-size: 12px; font-weight: 600; color: var(--dim); margin: 12px 0 6px; }
.ship-group-label:first-of-type { margin-top: 2px; }

/* เลขออเดอร์โรงงาน (MY2607028) — คู่กับ job_no */
.order-no {
  font-family: var(--mono); font-size: 11px; color: var(--brown);
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 5px; padding: 1px 6px;
}

/* ===== ค้นหาทั่วระบบ ===== */
.topbar-search { margin-left: 10px; flex: 0 1 230px; min-width: 0; }
.topbar-search input {
  width: 100%; font: inherit; font-size: 12.5px;
  background: rgba(255,255,255,.10); color: var(--bg);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 6px 13px; outline: none;
}
.topbar-search input::placeholder { color: rgba(255,255,255,.45); }
.topbar-search input:focus { background: rgba(255,255,255,.16); border-color: var(--gold); }

.search-big { display: flex; gap: 8px; align-items: center; }
.search-big input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; background: var(--paper); color: var(--ink);
}
.search-big input:focus { outline: none; border-color: var(--gold); }
.search-big .btn { margin-top: 0; flex-shrink: 0; }

.search-count { font-size: 12.5px; color: var(--muted); margin: 16px 0 4px; }
.search-group { margin-top: 16px; }
.search-rows { display: flex; flex-direction: column; gap: 6px; }
.search-row {
  display: flex; align-items: center; gap: 10px; color: inherit;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 14px;
}
.search-row:hover { border-color: var(--gold); text-decoration: none; color: inherit; }
.search-row .sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-row .sr-title { font-size: 14px; font-weight: 600; }
.search-row .sr-sub { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.search-row .sr-meta { font-size: 12px; color: var(--dim); }

@media (max-width: 900px) { .topbar-search { display: none; } }

/* ===== รายละเอียดใบส่ง: แถบสรุป + รายการกล่อง ===== */
/* ตัวเลขสรุปเป็น "ข้อมูล" ไม่ใช่ปุ่ม — แยกแถวและไม่ทำกรอบให้ดูกดได้ */
.lot-stats {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 12px; font-size: 13px; color: var(--dim);
}
.lot-stats .ls-item b { font-size: 17px; font-weight: 700; color: var(--ink); }
.lot-stats .ls-sep { color: var(--faint); }
.lot-stats .ls-ok {
  margin-left: 2px; font-size: 11.5px; color: var(--green);
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-radius: 6px; padding: 2px 8px;
}
.lot-stats .ls-pending {
  margin-left: 2px; font-size: 11.5px; color: var(--brown);
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 6px; padding: 2px 8px;
}
.lot-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.lot-actions .btn { margin-top: 0; }

/* รายการกล่อง — สะท้อนหน้าตา packing list จริง */
.lot-box-list { display: flex; flex-direction: column; gap: 8px; }
.lot-box {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; background: var(--paper); color: inherit;
}
.lot-box:hover { border-color: var(--gold); text-decoration: none; color: inherit; }
.lot-box .lb-top { display: flex; align-items: baseline; gap: 8px; }
.lot-box .lb-label {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  background: var(--bg); border-radius: 5px; padding: 2px 7px; flex-shrink: 0;
}
.lot-box .lb-orders {
  font-family: var(--mono); font-size: 11px; color: var(--brown);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lot-box .lb-none { color: var(--faint); }
.lot-box .lb-pcs {
  font-size: 12.5px; font-weight: 600; color: var(--dim); flex-shrink: 0;
}
.lot-box .lb-lines { margin-top: 7px; display: flex; flex-direction: column; gap: 2px; }
.lot-box .lb-line { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
.lot-box .lb-qty { font-family: var(--mono); min-width: 26px; text-align: right; color: var(--ink); }
.lot-box .lb-cat { min-width: 74px; }
.lot-box .lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-box .lb-empty { margin-top: 6px; font-size: 12px; color: var(--faint); }

/* สรุปของในใบส่ง */
.lot-ref-list { display: flex; flex-direction: column; gap: 6px; }
.lot-ref {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px 10px;
}
.lot-ref .lr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lot-ref .lr-name { font-size: 13px; font-weight: 500; }
.lot-ref .lr-sub { font-size: 11.5px; color: var(--muted); align-self: flex-start; }

/* ===== Packing list แบบเริ่มจากกล่อง (box-first) ===== */
.pack-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 24px 60px; }
.pack-head h1 { font-size: 20px; margin: 6px 0 2px; }
.pack-head .sub { font-size: 13px; color: var(--muted); }
.pack-cols { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; margin-top: 18px; }

/* คลังของ */
.pack-pool {
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; position: sticky; top: 14px;
}
.pool-list { display: flex; flex-direction: column; gap: 4px; max-height: 44vh; overflow-y: auto; }
.pool-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  border: 1px solid transparent; cursor: grab; user-select: none;
}
.pool-item:hover { background: var(--bg); border-color: var(--border); }
.pool-item.dragging { opacity: .45; }
.pool-item .pi-grip { color: var(--faint); font-size: 13px; cursor: grab; }
.pool-item .pi-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pool-item .pi-name { font-size: 13px; font-weight: 500; }
.pool-item .pi-sub { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.pool-item .pi-placed {
  font-size: 10.5px; margin-left: 5px; color: var(--green);
  background: var(--green-bg); border: 1px solid var(--green-border);
  border-radius: 5px; padding: 0 5px;
}
.pool-form { border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 4px; }
.place-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.place-row select { flex: 1 1 96px; min-width: 0; }
.action-form .place-row input[type="number"] { width: 62px; flex: 0 0 62px; }
.place-row .btn { margin-top: 0; flex: 1 1 100%; }

/* กล่องเป็นพื้นที่รับการลากวาง */
.box-card[data-box] { transition: border-color .12s, background .12s; }
.box-card.drop-on { border-color: var(--gold); background: var(--gold-soft); }
.box-empty { font-size: 12.5px; color: var(--faint); padding: 14px 0; text-align: center; }
.box-lines { display: flex; flex-direction: column; gap: 4px; }
.box-lines .bl-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.bl-row .bl-label { flex: 1; min-width: 0; font-size: 13px; }
.box-note-form { margin-top: 8px; }
.box-note-form input { font-size: 12.5px; }

@media (max-width: 900px) {
  .pack-cols { grid-template-columns: 1fr; }
  .pack-pool { position: static; }
  .pool-item { cursor: default; }        /* ลากวางบนจอสัมผัสไม่เวิร์ก → ใช้ติ๊กแล้วกดปุ่ม */
  .pool-item .pi-grip { display: none; }
  .pack-wrap { padding: 14px 12px 40px; }
}

/* ===== Packing list (จัดกล่อง) ===== */
.pack-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pack-toolbar form { margin: 0; }
.pack-summary {
  font-family: var(--mono); font-size: 12px; color: var(--brown);
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 6px; padding: 4px 10px;
}
.pack-warn {
  font-size: 12.5px; border-radius: 8px; padding: 9px 12px; margin: 12px 0;
  background: #faeae4; border: 1px solid #f0d2c6; color: #a8442e;
}
.pack-warn.ok { background: #e9f2e4; border-color: #cfe0c6; color: #3d6b35; }
.pack-warn ul { margin: 5px 0 0; padding-left: 18px; }
.quote-gate-warning {
  font-size: 12.5px; color: var(--red); background: var(--red-bg); border: 1px solid #eccfc4;
  border-radius: 9px; padding: 10px 12px; margin-top: 12px;
}
.quote-gate-warning .field-hint { margin-top: 5px; color: var(--dim); }
.quote-override-box {
  display: grid; gap: 6px; min-width: min(360px, 100%); padding: 9px 10px; margin-bottom: 8px;
  border: 1px solid var(--gold-border); border-radius: 8px; background: var(--gold-soft);
}
.quote-override-check { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; color: var(--brown) !important; }
.quote-override-box input[type="text"] { width: 100%; }
.pack-toolbar .quote-override-box { margin: 0 0 8px; }

.box-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  background: var(--paper); margin-bottom: 12px;
}
.box-card .box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.box-card .box-label {
  font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--bg); border-radius: 6px; padding: 3px 10px;
}
.box-card .box-pcs { font-size: 12px; color: var(--muted); flex: 1; }
.box-card .action-form { margin-top: 0; }
.box-card .box-remarks {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--bg); border-radius: 8px; padding: 9px 11px;
  white-space: pre-wrap; margin-top: 10px;
}

.bl-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.bl-row .bl-pick { flex: 1 1 190px; min-width: 0; }
.bl-row .bl-name { flex: 1 1 150px; min-width: 0; }
.bl-row .bl-cat { flex: 0 0 120px; }
.bl-row .bl-qty { flex: 0 0 64px; }
.action-form .bl-row input[type="number"].bl-qty { width: 64px; }   /* กัน rule width:100% ของ number */
.bl-row input, .bl-row select { margin: 0; font-size: 12.5px; padding: 6px 8px; }

/* ===== แก้ไฟล์ที่แนบผิด (replace-in-place, ใช้ <details> ไม่ต้องพึ่ง JS) ===== */
.replace-box { margin-top: 6px; }
.replace-box > summary {
  font-size: 11.5px; color: var(--brown); cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 4px; user-select: none;
}
.replace-box > summary::-webkit-details-marker { display: none; }
.replace-box > summary::before { content: "✎"; font-size: 11px; }
.replace-box > summary:hover { color: var(--brown-dark); text-decoration: underline; }
.replace-box[open] > summary { margin-bottom: 6px; }
.replace-box form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.replace-box input[type="file"] { font-size: 11px; max-width: 190px; }
.replace-box .btn-mini { margin-top: 0; }

.photo-thumb-wrap { display: flex; flex-direction: column; gap: 3px; }
.replace-box.sm > summary { font-size: 10.5px; }
.replace-box.sm input[type="file"] { max-width: 150px; }

/* แก้ชื่องาน (A) ที่หัว detail */
.detail-head .edit-project { margin-top: 8px; }
.detail-head .edit-project .action-form { margin-top: 6px; }
.detail-head .edit-project label { margin-top: 6px; }

/* ===== PWA / notification inbox ===== */
.nav-badge, .mini-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px;
  border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
}
.mini-badge.resolved { background: var(--green-bg); color: var(--green); }
.mobile-bottom-nav, .mobile-more-sheet { display: none; }

.inbox-wrap { width: min(900px, 100%); margin: 0 auto; padding: 28px 28px 72px; }
.inbox-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.inbox-hero h1 { font-size: 24px; margin: 0 0 3px; }
.inbox-hero .sub { color: var(--muted); font-size: 13px; }
.push-setup-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ink); color: var(--bg); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px;
}
.push-setup-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.push-setup-copy strong { color: var(--gold); }
.push-setup-copy span { color: #d5cfc2; font-size: 12.5px; line-height: 1.45; }
.push-setup-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.push-setup-actions .btn { margin: 0; background: var(--gold); color: var(--ink); }
.push-setup-actions .btn-mini { margin: 0; background: transparent; color: var(--bg); border-color: #5c574c; }

.inbox-section { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.inbox-section h2 { font-size: 16px; margin: 0 0 14px; }
.inbox-count { color: var(--faint); font-weight: 500; font-size: 12px; margin-left: 4px; }
.inbox-group-label { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .04em; margin: 14px 0 7px; }
.inbox-group-label.overdue { color: var(--red); }
.inbox-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.task-card { border: 1px solid var(--border); border-radius: 11px; padding: 13px; color: inherit; background: var(--paper); }
.task-card:hover { text-decoration: none; color: inherit; border-color: var(--gold); }
.task-card.overdue { border-color: #eccfc4; background: #fffafa; }
.task-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-code { font: 500 11.5px var(--mono); color: var(--muted); }
.task-age { color: var(--red); background: var(--red-bg); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; }
.task-title { font-size: 14px; font-weight: 650; margin-top: 5px; }
.task-customer { color: var(--muted); font-size: 12px; margin-top: 1px; }
.task-action { color: var(--brown); background: var(--gold-soft); border-radius: 7px; padding: 7px 9px; font-size: 12px; margin-top: 9px; line-height: 1.45; }

.notification-history { display: flex; flex-direction: column; }
.notification-row { display: flex; align-items: flex-start; gap: 10px; color: inherit; padding: 12px 4px; border-top: 1px solid var(--border-soft); }
.notification-row:first-child { border-top: 0; }
.notification-row:hover { text-decoration: none; color: inherit; }
.notification-row.resolved { opacity: .65; }
.notification-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); margin-top: 6px; flex-shrink: 0; }
.notification-row.unread .notification-dot { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.notification-copy { min-width: 0; flex: 1; }
.notification-title { font-size: 13.5px; font-weight: 650; }
.notification-body { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-time { color: var(--faint); font-size: 10.5px; margin-top: 4px; }
.mobile-detail-back { display: none; }
.remember-row { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.auth-card .remember-row input { width: auto; margin: 0; }

/* ===== Quotation module (ใบเสนอราคา) ===== */
.file-drop-zone {
  position: relative; display: grid; place-items: center; gap: 4px; min-height: 112px;
  padding: 18px 14px; border: 2px dashed var(--border); border-radius: 10px;
  background: var(--bg); text-align: center; color: var(--muted); cursor: pointer;
}
.action-form .file-drop-zone input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  padding: 0; border: 0; cursor: pointer;
}
.file-drop-zone:hover, .file-drop-zone:focus-within, .file-drop-zone.drag-on {
  border-color: var(--gold); background: var(--gold-soft);
}
.file-drop-zone.drag-on { box-shadow: 0 0 0 3px rgba(217,164,65,.14); }
.file-drop-copy { display: grid; gap: 2px; pointer-events: none; }
.file-drop-copy strong { color: var(--ink); font-size: 13px; }
.file-drop-copy span { font-size: 11.5px; color: var(--faint); }
.file-drop-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--faint); pointer-events: none;
}
.file-drop-zone.has-file .file-drop-name { color: var(--green); font-weight: 600; }
.quote-items { display: flex; flex-direction: column; gap: 2px; }
.quote-line { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--dim); border-bottom: 1px solid var(--border-soft); }
.quote-line:last-child { border-bottom: none; }
.qi-amount { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.quote-line .qi-no { width: 20px; flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--faint); text-align: right; }
.quote-line .qi-desc { flex: 1; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-line .qi-qty, .quote-line .qi-price {
  width: 82px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--muted);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quote-line .qi-amount { width: 98px; flex-shrink: 0; text-align: right; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-line.qi-total { border-top: 1px solid var(--border); border-bottom: none; margin-top: 4px; padding-top: 10px; font-weight: 700; }
.quote-line.qi-total .qi-amount { width: 115px; font-size: 14px; }
.quote-line.qi-empty { color: var(--faint); font-size: 12px; justify-content: center; padding: 14px 0; border-bottom: none; }
.qi-filesize { color: var(--faint); font-size: 11px; margin-left: 6px; }

/* แถวแก้รายการ (B) — ลำดับ column คงที่: description, quantity, unit, unit_price */
/* หมายเหตุ: ใช้ nth-child ไม่ใช้ :first-of-type/:last-of-type — of-type นับตาม tag name (input)
   ไม่ใช่ตาม type attribute เลยแมตช์ผิดตัวเมื่อ text/number อยู่ปนกัน */
.qi-edit-row { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.qi-edit-row input:nth-child(1) { flex: 1 1 160px; min-width: 0; }   /* description */
.qi-edit-row input:nth-child(2) { flex: 0 0 70px; }                  /* quantity */
.qi-edit-row input:nth-child(3) { flex: 0 0 90px; }                  /* unit */
.qi-edit-row input:nth-child(4) { flex: 0 0 100px; }                 /* unit_price */
.action-form .qi-edit-row input[type="number"]:nth-child(2) { width: 70px; }   /* กัน rule width:100% ของ number */
.action-form .qi-edit-row input[type="number"]:nth-child(4) { width: 100px; }  /* กัน rule width:100% ของ number */

.quote-revisions { display: flex; flex-direction: column; gap: 6px; }
.quote-rev-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 8px; }
.quote-rev-row .qi-amount { margin-left: auto; }

.quote-payment { display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.quote-payment > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.quote-payment > div:last-child { font-weight: 700; color: var(--ink); }
.quote-payment > div:last-child .qi-amount { font-size: 15px; }

/* ===== Payments module (จ่ายเงิน) ===== */
.pay-fields { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.pay-fields label { flex: 1 1 160px; min-width: 0; }

/* รายการค้างจ่าย — คอลัมน์ตัวเลขกว้างเท่ากันทุกแถวรวมหัวตาราง เพื่อกวาดตาเทียบได้ */
.po-list { display: flex; flex-direction: column; margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--paper); }
.po-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--dim); border-bottom: 1px solid var(--border-soft); cursor: pointer; }
/* แถวข้อมูลเป็น <label> — .action-form label{display:block} (specificity สูงกว่า .po-row เฉย ๆ) จะชนะและพัง layout ถ้าไม่เจาะจงกว่า */
.action-form .po-row { display: flex; margin: 0; font-size: 12.5px; color: var(--dim); }
.po-row:last-child { border-bottom: none; }
.po-row.po-head { cursor: default; font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: .04em; background: var(--bg); }
.po-check { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.po-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.po-no { width: 86px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-job { flex: 1; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-total, .po-paid, .po-outstanding {
  width: 100px; flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--dim);
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-outstanding { width: 108px; font-weight: 700; color: var(--ink); font-size: 13px; }  /* ยอดค้าง — ตัวเลขที่มองบ่อยที่สุด */
.po-this { width: 110px; flex-shrink: 0; }
.action-form .po-row input[type="number"].po-alloc { width: 110px; }   /* กัน rule width:100% ของ number */
.po-alloc { text-align: right; font-family: var(--mono); }
.po-row.po-head .po-total { margin-left: auto; }   /* แถวหัวไม่มีคอลัมน์ po-job → ดันกลุ่มตัวเลขชิดขวาให้ตรงกับแถวข้อมูล */

.po-summary {
  font-family: var(--mono); font-size: 12.5px; color: var(--brown);
  background: var(--gold-soft); border: 1px solid var(--gold-border);
  border-radius: 8px; padding: 9px 12px; margin: 12px 0; min-height: 14px;
}
/* สถานะสรุปยอด (สลับผ่าน recalc() ใน payments.php): เกิน = แดง, ขาด = น้ำตาล/ทอง (สีตั้งต้น), พอดี = เขียว */
.po-summary.over { color: var(--red); background: var(--red-bg); border-color: var(--red); }
.po-summary.exact { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }

/* ประวัติการจ่าย */
.pay-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--paper); margin-bottom: 10px; }
.pay-item:last-child { margin-bottom: 0; }
.pay-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-no { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pay-date { font-size: 12px; color: var(--muted); }
.pay-amount { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); margin-left: auto; }
.pay-method { font-size: 11.5px; color: var(--brown); background: var(--gold-soft); border: 1px solid var(--gold-border); border-radius: 6px; padding: 2px 8px; }
.pay-item-meta { font-size: 12px; color: var(--muted); margin-top: 5px; }
.pay-item-note { font-size: 12px; color: var(--dim); margin-top: 6px; border-left: 3px solid var(--border); padding-left: 8px; }
.pay-item-lines { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.pay-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pl-no { font-family: var(--mono); width: 86px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-title { flex: 1; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-amount { font-family: var(--mono); width: 100px; flex-shrink: 0; text-align: right; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-confirm-form { margin-top: 10px; }

/* ตารางค้างจ่าย (payments.php): tablet (768px) แคบกว่า desktop แต่ยังกว้างกว่า breakpoint 700 ที่ยุบเป็นหลายบรรทัด — ย่อคอลัมน์แทนเพื่อกัน body เลื่อนแนวนอน
   ความกว้างต้องพอสำหรับตัวเลขจริงหลัก "ล้าน" 7 หลัก (เช่น ¥2,734,002.00 / ¥1,367,001.00) ไม่ใช่แค่กันหน้าเลื่อนแนวนอน
   วัดจริงด้วย scrollWidth/clientWidth ต่อ element ที่ 1280/768/375px ด้วย IBM Plex Mono ที่โหลดแล้วจริง (ไม่ใช่ font fallback)
   ค่าเดิมเคยวัดจากยอด 6 หลัก (¥367,001.00) พอดีตอนนั้นแต่ไม่พอกับ 7 หลักขึ้นไป — ยอด 7 หลักต้องการจริง
   .po-total/.po-paid ~94px, .po-outstanding ~101px, .po-alloc ~109px (ที่ 768px) จึงขยายเผื่อ buffer ไว้ด้านล่าง
   ถ้าจะแก้ค่าพวกนี้อีกในอนาคต ต้องวัดใหม่ด้วยยอดจำนวนหลักเท่ากันหรือมากกว่านี้ ไม่ใช่เดาแล้วบอกว่า "น่าจะพอ" */
@media (max-width: 900px) {
  .po-no { width: 82px; }
  .po-total, .po-paid { width: 100px; }
  .po-outstanding { width: 108px; }
  .po-this { width: 104px; }
  .action-form .po-row input[type="number"].po-alloc { width: 116px; }
}

@media (max-width: 700px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .topbar { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; position: sticky; top: 0; z-index: 50; }
  .topbar-nav, .topbar .right { display: none; }
  .topbar .brand { font-size: 17px; }

  .mobile-bottom-nav {
    position: fixed; display: grid; grid-template-columns: repeat(5,1fr); z-index: 80;
    left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: rgba(28,27,24,.98); border-top: 1px solid #39362f;
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button {
    border: 0; background: transparent; color: var(--faint); padding: 7px 2px 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: 500 9.5px 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; min-width: 0;
  }
  .mobile-bottom-nav a:hover { text-decoration: none; }
  .mobile-bottom-nav .active { color: var(--gold); }
  .mobile-bottom-nav .nav-icon { position: relative; font: 700 19px/1 var(--mono); }
  .mobile-bottom-nav .nav-icon b { position: absolute; top: -7px; right: -13px; min-width: 16px; height: 16px; padding: 0 4px; display:grid;place-items:center;border-radius:99px;background:var(--red);color:#fff;font:700 9px sans-serif; }

  .mobile-more-sheet {
    display: block; position: fixed; z-index: 90; left: 12px; right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom)); background: var(--paper); border: 1px solid var(--border);
    border-radius: 16px; padding: 14px; box-shadow: 0 18px 60px rgba(28,27,24,.28);
  }
  .mobile-more-sheet[hidden] { display: none; }
  .mobile-more-head { display:flex;align-items:center;justify-content:space-between;padding:3px 4px 10px;border-bottom:1px solid var(--border-soft); }
  .mobile-more-head button { border:0;background:var(--bg);width:36px;height:36px;border-radius:50%;font-size:22px; }
  .mobile-more-links { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px; }
  .mobile-more-links > a, .mobile-more-links > button, .mobile-more-links > .lang-switch { min-height:44px;border:1px solid var(--border);background:var(--paper);border-radius:10px;padding:10px;color:var(--dim);font:500 13px 'IBM Plex Sans Thai','Noto Sans SC',sans-serif; }
  .mobile-more-links > .lang-switch { grid-column:1/-1;text-align:center; }
  .mobile-more-links .lang-switch a { color:var(--muted); }
  .mobile-more-links .lang-switch a.active { color:var(--brown); }

  .main.mobile-detail-open .list-pane { display: none; }
  .main:not(.mobile-detail-open) .detail-pane { display: none; }
  .main.mobile-detail-open .detail-pane { display: block; min-height: calc(100vh - 52px - 66px); }
  .mobile-detail-back { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; color: var(--brown); }
  .detail-head { padding-top: 10px; }
  .topbar .brand { flex-shrink: 0; }
  .topbar-page {
    display: block; min-width: 0; flex: 1; font-size: 13px; color: var(--faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar-page b { color: var(--bg); font-weight: 600; }
  .topbar-search-btn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-left: auto; width: 40px; height: 40px; margin-right: -8px;
    color: var(--faint); font: 700 17px/1 var(--mono);
  }
  .topbar-search-btn:hover { color: var(--bg); text-decoration: none; }

  .list-pane { padding: 14px 12px 20px; overflow: visible; }
  /* stat เป็นแถบเลื่อนแนวนอนแถวเดียว — หน้างานผลิตมี 7 ใบ ซึ่งแบบ 2 คอลัมน์กิน 4 แถว (~222px)
     ดันการ์ดงานใบแรกตกครึ่งล่างของจอ · แถวเดียวเหลือ ~56px และยังเห็นครบทุกใบด้วยการเลื่อน */
  /* ⚠️ ห้ามใส่ mask-image / scroll-snap บนตัวเลื่อนนี้ — WebKit บน iOS มีบั๊ก hit-testing
     กับ overflow container ที่ถูก mask: เลื่อนแถบแล้วแตะ จะโดนตำแหน่งเก่าก่อนเลื่อน = "กดแล้วไม่ทำงาน"
     (เคยใส่แล้วพังจริงบน iPhone 7 ก.ย. 69) pill ที่โดนตัดครึ่งที่ขอบขวาเป็นสัญญาณว่าเลื่อนได้พออยู่แล้ว */
  .stats {
    display: flex; grid-template-columns: none; gap: 8px; margin-bottom: 12px;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stat-card {
    flex: 0 0 auto; min-width: 152px;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-block-size: 44px;
  }
  .stat-card .lbl { min-width: 0; flex: 1; font-size: 12px; }
  .stat-card .lbl span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-card .val { font-size: 20px; margin-top: 0; }
  .stat-card .sub { display: none; }

  /* pill เลื่อนได้ในแถบของตัวเอง ส่วน .btn-new ตกลงมาบรรทัดใหม่และมองเห็นเสมอ */
  .filters { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .filter-scroll {
    display: flex; gap: 8px; flex: 1 1 100%; min-width: 0;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;   /* เหตุผลเดียวกับ .stats ด้านบน: ห้าม mask / snap */
  }
  .filter-scroll::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
  .filter-pill { scroll-margin-inline: 12px; }
  .filter-pill, .btn-new { min-block-size: 40px; display:flex;align-items:center;white-space:nowrap; }
  .btn-new { flex: 1 1 auto; justify-content: center; min-block-size: 44px; }
  .filters .count { display:none; }

  /* toggle เต็มความกว้าง แตะง่ายทั้งสองฝั่ง */
  .view-toggle { display: flex; width: 100%; }
  .vt-item { flex: 1; min-block-size: 40px; }

  /* ปุ่มสร้างหลัก → ลอยมุมขวาล่างในระยะนิ้วโป้ง และกดได้ตลอดแม้เลื่อนรายการไปไกล
     (เดิมอยู่บนสุด ต้องเลื่อนกลับขึ้นไปทุกครั้ง) */
  .fab-mobile {
    position: fixed; z-index: 70; right: 14px; left: auto; flex: none;
    bottom: calc(74px + env(safe-area-inset-bottom));
    min-block-size: 50px; padding: 0 20px; border-radius: 999px;
    font-size: 14px; box-shadow: 0 8px 24px rgba(28, 27, 24, .3);
  }
  /* กัน FAB บังการ์ดใบสุดท้าย — เผื่อที่เฉพาะหน้าที่มี FAB จริง */
  .main:has(.fab-mobile) .list-pane { padding-bottom: 78px; }
  .project-card { padding: 14px; }
  .pipeline .txt { font-size: 9px; }
  .detail-pane { overflow: visible; }
  .section, .detail-head { padding-left: 16px; padding-right: 16px; }
  .detail-pane .actions {
    position: sticky; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 35;
    max-height: 46vh; overflow-y: auto; padding-bottom: 18px;
    background: rgba(255,255,255,.97); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(28,27,24,.08);
  }
  .actions .btn, .action-form .btn { min-height: 46px; width: 100%; }
  .action-split { flex-direction: column; gap: 4px; }
  .action-form input, .action-form select, .action-form textarea, .auth-card input { font-size: 16px !important; min-height: 44px; }
  .item-row .ir-top { flex-wrap: wrap; }
  .item-row .ir-top .ir-part { flex-basis: 100%; }
  .item-row .ir-top .ir-reason { flex: 1 1 160px; width: auto; }
  .bl-row .bl-pick, .bl-row .bl-name { flex-basis: 100%; }
  .bl-row .bl-cat { flex: 1 1 120px; }
  .box-card { padding: 12px 13px; }
  .page-wrap { padding: 14px 12px 30px; }
  .page-card { padding: 18px 15px; }

  .inbox-wrap { padding: 16px 12px 26px; }
  .inbox-hero h1 { font-size: 21px; }
  .push-setup-card { align-items: stretch; flex-direction: column; padding: 15px; }
  .push-setup-actions { flex-direction: column; align-items: stretch; }
  .push-setup-actions .btn, .push-setup-actions .btn-mini { min-height: 44px; width: 100%; }
  .inbox-section { padding: 14px 12px; }
  .inbox-list { grid-template-columns: 1fr; }
  .task-card { min-height: 44px; }
  .notification-row { min-height: 58px; }
  .notification-body { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  /* Quotation module: ยุบ 5 คอลัมน์ไม่ให้ตัวเลขทับกัน — desc ขึ้นบรรทัดแรกเต็มความกว้าง แล้วกลุ่มตัวเลขชิดขวาบรรทัดถัดไป */
  .quote-line { flex-wrap: wrap; }
  .quote-line .qi-desc { flex-basis: 100%; margin-bottom: 2px; }
  .quote-line .qi-qty { margin-left: auto; }
  .quote-line.qi-total { flex-wrap: nowrap; }
  .quote-line.qi-total .qi-desc { flex-basis: auto; flex: 1; margin-bottom: 0; }
  .qi-edit-row input:nth-child(1) { flex-basis: 100%; }
  .qi-edit-row input:nth-child(2), .qi-edit-row input:nth-child(3) { flex: 1 1 90px; }
  .action-form .qi-edit-row input[type="number"]:nth-child(2) { width: auto; }

  /* Payments module */
  .pay-fields label { flex-basis: 100%; }
  .po-row.po-head { display: none; }
  .po-row { flex-wrap: wrap; row-gap: 6px; }
  .po-job { flex-basis: 100%; margin: 2px 0; white-space: normal; }
  .po-total { margin-left: auto; }
}

/* ===== จัดการผู้ใช้ (Admin) ===== */
.user-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.user-card {
  background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
}
.user-card.inactive { opacity: 0.6; background: var(--bg); }
.uc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uc-username { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.uc-name { color: var(--dim); flex: 1 1 auto; min-width: 0; }
.uc-badge {
  font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.uc-role-a { background: var(--gold-soft); color: var(--brown); border: 1px solid var(--gold-border); }
.uc-role-b { background: var(--blue-bg); color: var(--blue); border: 1px solid #cfe0f5; }
.uc-level-staff { background: var(--tan); color: var(--dim); }
.uc-level-manager { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.uc-level-admin { background: var(--red-bg); color: var(--red); border: 1px solid #eccfc4; }
.uc-status-active { background: var(--green-bg); color: var(--green); }
.uc-status-inactive { background: var(--border-soft); color: var(--faint); }
.uc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.uc-actions .replace-box { margin: 0; }
.uc-actions .action-form input[type="text"] { width: auto; min-width: 180px; }
.uc-you { font-size: 12px; color: var(--faint); font-weight: 400; }

/* ===== กรอก Deadline หลายงาน ===== */
.deadline-bulk-wrap { width: min(980px, 100%); margin: 0 auto; padding: 28px 24px 48px; }
.deadline-bulk-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0 18px; }
.deadline-bulk-hero h1 { margin: 0 0 4px; font-size: 27px; }
.deadline-bulk-hero .sub { color: var(--muted); font-size: 13px; }
.deadline-bulk-count { min-width: 46px; height: 46px; padding: 0 12px; display: grid; place-items: center; border-radius: 99px; background: var(--red-bg); border: 1px solid #eccfc4; color: var(--red); font: 700 18px var(--mono); }
.deadline-bulk-list { display: flex; flex-direction: column; gap: 9px; }
.deadline-bulk-row { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 18px; align-items: center; padding: 14px 16px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; }
.deadline-bulk-row:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,164,65,.12); }
.deadline-bulk-project { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deadline-bulk-project strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.deadline-bulk-project > span:not(.deadline-bulk-code) { color: var(--muted); font-size: 12px; }
.deadline-bulk-project small { color: var(--faint); font-size: 11.5px; }
.deadline-bulk-code { color: var(--brown); font: 600 12px var(--mono); }
.deadline-bulk-input > span { display: block; margin-bottom: 4px; color: var(--dim); font-size: 11.5px; }
.deadline-bulk-input input[type="date"] { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; font-size: 13px; }
.deadline-bulk-actions { position: sticky; bottom: 14px; display: flex; justify-content: flex-end; margin-top: 14px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(28,27,24,.1); backdrop-filter: blur(8px); }
.deadline-bulk-actions .btn { margin: 0; }
.deadline-bulk-empty { margin-top: 20px; padding: 30px 18px; border: 1px dashed var(--border); border-radius: 12px; background: var(--paper); }

@media (max-width: 700px) {
  .deadline-bulk-wrap { padding: 16px 12px 28px; }
  .deadline-bulk-hero { align-items: flex-start; }
  .deadline-bulk-hero h1 { font-size: 21px; }
  .deadline-bulk-row { grid-template-columns: 1fr; gap: 10px; padding: 13px; }
  .deadline-bulk-project strong { white-space: normal; }
  .deadline-bulk-input input[type="date"] { min-height: 46px; font-size: 16px; }
  .deadline-bulk-actions { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .deadline-bulk-actions .btn { width: 100%; min-height: 46px; }
}

/* ===================================================================
   เชื่อมเครม ⇄ งานผลิต / การส่งออก
   ใช้โทน/ระยะเดียวกับ .project-shipment-line ที่มีอยู่แล้ว เพื่อให้การ์ดงาน
   ไม่กลายเป็นแถบสีหลายแบบปนกัน
   =================================================================== */

/* สลับมุมมองข้อมูลชุดเดียวกัน (ใบเครม ↔ ชิ้นส่วน) — คนละชนิดกับ .btn-new ที่เป็น "การกระทำ" */
.view-toggle {
  display: inline-flex; gap: 2px; margin-bottom: 12px; padding: 3px;
  background: var(--tan); border: 1px solid var(--border); border-radius: 999px;
}
.vt-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-block-size: 32px; padding: 5px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.vt-item:hover { color: var(--dim); text-decoration: none; }
.vt-item.active {
  background: var(--paper); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(28, 27, 24, .14);
}
.vt-item.active:hover { color: var(--ink); }

/* บรรทัดเครมบนการ์ดงาน */
.project-claim-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  width: fit-content; max-width: 100%; margin-top: 7px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 7px;
  font-size: 11.5px; line-height: 1.35; color: var(--dim); background: var(--bg);
}
.project-claim-line.open { color: var(--brown); background: var(--gold-soft); border-color: var(--gold-border); }
.project-claim-line.done { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }

/* ใบเครมของงานนี้ (แผงรายละเอียดงาน) */
.project-claims-section .project-claim-row {
  display: block; margin-top: 8px; padding: 10px 12px; color: inherit;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
}
.project-claims-section .project-claim-row:hover { border-color: var(--gold); text-decoration: none; color: inherit; }
.pcr-head { display: flex; align-items: center; gap: 8px; }
.pcr-no { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--dim); flex: 1; min-width: 0; }
.pcr-meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.pcr-due { font-weight: 600; }
.pcr-due.overdue, .pcr-due.today { color: var(--red); }
.pcr-due.soon { color: var(--brown); }
.pcr-due.done { color: var(--green); }

/* กำหนดส่งบนแผงใบเครม */
.claim-due-box { margin-top: 8px; }
.claim-due-box .project-deadline-line { margin-top: 0; }
.claim-due-box .replace-box { margin-top: 6px; }
.claim-due-box .hint { margin: 4px 0 6px; font-size: 11.5px; color: var(--faint); }

/* ===== หน้าติดตามชิ้นส่วน (claim_items.php) ===== */
.citem-list { display: flex; flex-direction: column; gap: 8px; }
.citem-row {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
}
.citem-row.pickable:hover { border-color: var(--gold); }
.citem-pick { display: flex; align-items: center; min-width: 24px; min-height: 24px; padding-top: 2px; }
.citem-pick input { width: 18px; height: 18px; accent-color: var(--gold); }
.citem-body { flex: 1; min-width: 0; }
.citem-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.citem-name { font-weight: 600; font-size: 14px; }
.citem-qty { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.citem-top .status-badge { margin-left: auto; }
.citem-meta { margin-top: 3px; font-size: 12px; color: var(--muted); }
.citem-note { margin-top: 5px; font-size: 12px; color: var(--dim); }
.citem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.citem-tag {
  font-size: 11px; line-height: 1.4; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--dim);
}
.citem-tag.lot { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
.citem-tag.due.soon { color: var(--brown); background: var(--gold-soft); border-color: var(--gold-border); }
.citem-tag.due.today, .citem-tag.due.overdue, .citem-tag.stale { color: var(--red); background: var(--red-bg); border-color: #eccfc4; }
.citem-tag.due.done { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }

.citem-bulk-hint { margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.citem-bulk-actions { margin-top: 14px; }
.citem-bulk-actions .btn { width: auto; }

@media (max-width: 700px) {
  .citem-row { padding: 12px; }
  .citem-pick input { width: 22px; height: 22px; }
  .citem-top .status-badge { margin-left: 0; }
  /* ปุ่มบันทึกต้องอยู่ในมือเสมอ ไม่ต้องเลื่อนกลับขึ้นไปหา */
  .citem-bulk-actions {
    position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 35;
    padding: 10px; border: 1px solid var(--border); border-radius: 12px;
    background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(28,27,24,.1);
  }
  .citem-bulk-actions .btn { width: 100%; min-height: 46px; }
}