/* ==========================================================
   app.css — สไตล์กลางของทุกหน้า
   ผู้ใช้สูงอายุ ใช้ PC (CLAUDE.md ข้อ 6): ตัวอักษร 18px · หัวข้อ 32px · ปุ่ม/ช่องกรอกสูง ≥ 54px
   สีอ้างอิง Mockup · มือถือดูได้ (เมนูย้ายขึ้นด้านบน)
   ========================================================== */
:root {
  --ink: #14202e;
  --ink-2: #33415a;
  --muted: #4a5870;
  --bg: #f4f6f8;
  --card: #ffffff;
  --line: #d5dde6;
  --line-2: #e6ebf0;
  --field-line: #8d9cad;
  --side: #0f2a3a;
  --side-ink: #dce7ee;
  --side-hover: #18394d;
  --brand: #0b6e83;
  --brand-dark: #08515f;
  --ok-bg: #e3f4ea; --ok: #05603a;
  --warn-bg: #fef0d9; --warn: #8a4b06;
  --bad-bg: #fde7e5; --bad: #a41e14;
  --info-bg: #e2f1f5; --info: #0a5a6b;
  --line-green: #05803a;
  --radius: 10px;
  --tap: 54px;
  --font: "IBM Plex Sans Thai", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.auth-pending body { visibility: hidden; } /* ซ่อนหน้าจนกว่าจะรู้ว่า login แล้ว */
[hidden] { display: none !important; } /* ให้ hidden ชนะ display ของ .btn / .card ฯลฯ เสมอ */
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
:focus-visible { outline: 3px solid #f0a020; outline-offset: 2px; }
h1 { margin: 0; font-size: 32px; line-height: 1.3; }
h2 { margin: 0 0 14px; font-size: 22px; line-height: 1.35; }
p { margin: 0 0 12px; }

/* ---------- โครงหน้า: เมนูซ้าย + เนื้อหา ---------- */
.app { display: flex; flex-wrap: wrap; min-height: 100vh; }
.side {
  flex: 0 0 240px;
  background: var(--side);
  color: var(--side-ink);
  padding: 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand { font-weight: 700; font-size: 20px; color: #fff; padding: 6px 14px 18px; overflow-wrap: anywhere; }
.side-links { display: flex; flex-direction: column; gap: 6px; }
.side a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 16px;
  border-radius: var(--radius); color: var(--side-ink); text-decoration: none; font-size: 18px;
}
.side a:hover { background: var(--side-hover); color: #fff; }
.side a[aria-current="page"] { background: var(--brand); color: #fff; font-weight: 600; }
.side-user { margin-top: auto; padding: 18px 6px 0; display: flex; flex-direction: column; gap: 8px; }
.side-email { font-size: 15px; color: #9fb4c3; overflow-wrap: anywhere; padding: 0 8px; }
.btn.btn-side { background: transparent; color: var(--side-ink); border-color: #4b6577; }
.btn.btn-side:hover { background: var(--side-hover); color: #fff; }

.main { flex: 1 1 600px; min-width: 0; padding: 28px 32px 48px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.sub { color: var(--muted); font-size: 18px; margin: 4px 0 0; }

/* ---------- การ์ด / ตาราง / ป้าย ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0; }
.card + .card { margin-top: 18px; }
.tbl { overflow-x: auto; position: relative; } /* relative: ของที่ position:absolute ข้างในไม่หลุดกรอบ */
table { width: 100%; border-collapse: collapse; font-size: 18px; }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: 16px; padding: 12px; border-bottom: 2px solid var(--line); white-space: nowrap; background: #f8fafb; }
td { padding: 12px; border-bottom: 1px solid var(--line-2); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.t-ok { background: var(--ok-bg); color: var(--ok); }
.t-warn { background: var(--warn-bg); color: var(--warn); }
.t-bad { background: var(--bad-bg); color: var(--bad); }
.t-info { background: var(--info-bg); color: var(--info); }
.t-mute { background: #eef1f4; color: #44546a; }
.muted { color: var(--muted); }
.empty { color: var(--muted); text-align: center; padding: 28px 12px; }

/* ---------- ปุ่ม ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); min-width: var(--tap); padding: 0 22px;
  border-radius: var(--radius); border: 1.5px solid #9fb0c0; background: #fff; color: var(--ink);
  font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { background: #eef3f6; color: var(--ink); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { background: #821810; color: #fff; }
.btn-line { background: var(--line-green); border-color: var(--line-green); color: #fff; }
.btn-line:hover { background: #04692f; color: #fff; }
.btn-small { padding: 0 16px; font-size: 17px; } /* แคบลง แต่สูงเท่าปุ่มปกติ (≥ 54px) */
.btn-icon { padding: 0; font-size: 26px; line-height: 1; color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- ช่องกรอก ---------- */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 17px; color: var(--ink-2); font-weight: 600; }
input, select, textarea {
  font: inherit; font-size: 18px; min-height: var(--tap); padding: 0 14px;
  border: 1.5px solid var(--field-line); border-radius: 8px; background: #fff; color: var(--ink); width: 100%;
}
textarea { padding: 12px 14px; min-height: 110px; }
input[aria-invalid="true"] { border-color: var(--bad); background: #fff8f7; }
.form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.form-row > .field { flex: 1 1 220px; }

/* ---------- ตัวกรอง / ตารางคลิกได้ / รายละเอียด (หน้าสต็อกยา และหน้าอื่นที่คล้ายกัน) ---------- */
h3 { margin: 0 0 12px; font-size: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.filters > .field { flex: 1 1 200px; }
.filters > .filter-search { flex: 3 1 320px; }
.card-flush { padding: 0; overflow: hidden; }
.table-click tbody tr[data-id] { cursor: pointer; }
.table-click tbody tr[data-id]:hover td { background: #f3f8fa; }
.table-click tbody tr.sel td { background: #e3f1f5; }
.table-click td:first-child { white-space: nowrap; } /* รหัสยาไม่ตัดบรรทัด */
.cell-main { font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.detail { margin-top: 26px; scroll-margin-top: 16px; }
.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; }
.detail-head h2 { margin: 0; flex: 1 1 320px; }
.detail-code { font-weight: 400; font-size: 18px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 18px; }
.detail-grid .card + .card { margin-top: 0; }
dl.info { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
dl.info dt { color: var(--muted); }
dl.info dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
tr.row-bad td { background: #fff6f5; }
tr.row-total td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }

/* ---------- ตารางกรอกแบบ Excel (หน้ารับของ / ส่งของ) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.input-with-btn { display: flex; gap: 8px; }
.input-with-btn select { flex: 1; min-width: 0; }
.input-with-btn .btn { flex: 0 0 auto; padding: 0 16px; }
.form-row > .field-supplier { flex: 2 1 340px; }
.grid-wrap { margin-top: 18px; }
.entry-grid th, .entry-grid td { padding: 6px 4px; vertical-align: top; }
.entry-grid td input, .entry-grid td select { padding: 0 8px; }
.entry-grid .col-no { width: 32px; padding-top: 18px; text-align: right; }
.entry-grid .in-product { min-width: 220px; }
.entry-grid .in-lot { min-width: 110px; }
.entry-grid .in-date { min-width: 104px; }
.entry-grid .in-num { min-width: 72px; text-align: right; }
.entry-grid .in-money { min-width: 100px; }
.entry-grid select { min-width: 96px; }
.entry-grid select.single { background: #f4f6f8; }
.entry-grid .col-check { min-width: 190px; }
.check-box { display: inline-block; vertical-align: top; width: calc(100% - 60px); padding-top: 12px; }
.col-check .btn-icon { float: right; }
.check-msg { font-size: 15px; color: var(--bad); margin-top: 4px; white-space: normal; }
.check-msg.warn { color: var(--warn); }
.grid-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; margin-top: 14px; font-size: 20px; }
details.more { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; background: #fafbfc; }
details.more summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; color: var(--brand); }
details.more[open] { padding-bottom: 18px; }
tr.row-void td { color: var(--muted); }
tr.row-void .cell-main { text-decoration: line-through; }

/* ---------- หน้าส่งของออก ---------- */
.field-label { display: block; font-size: 17px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.min-months { margin-top: 16px; }
.backorder-box { margin-top: 18px; border: 1.5px solid #f1c78a; background: var(--warn-bg); border-radius: 12px; padding: 14px 18px; }
.backorder-box h3 { color: var(--warn); margin-bottom: 8px; }
.backorder-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 6px 0; }
.entry-grid .col-lots { min-width: 280px; padding-top: 14px; font-size: 16px; line-height: 1.6; }
.deliver-grid .in-product { min-width: 300px; }
.deliver-grid td:nth-child(3), .deliver-grid th:nth-child(3) { width: 110px; }
.deliver-grid td:nth-child(4), .deliver-grid th:nth-child(4) { width: 130px; }
.lot-line { white-space: nowrap; }
.entry-grid .col-result { min-width: 210px; }
.result-box { padding: 12px 0 6px; }
.lot-skip { color: var(--bad); }
.lot-note { color: var(--info); font-weight: 600; }
.last-doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 20px; }
.last-doc b { color: var(--ok); }

/* ---------- หน้านับสต็อก ---------- */
.seg { margin-bottom: 18px; }
.count-table .in-num { width: 130px; text-align: right; }
.count-table .col-reason { min-width: 240px; }
.count-table .col-reason input { margin-top: 6px; }
.count-summary { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 19px; margin-top: 18px; }
.text-ok { color: var(--ok); }
.text-bad { color: var(--bad); }
.print-blank { display: none; }

/* ---------- หน้าแรก ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 22px; }
.cards .card + .card { margin-top: 0; }
.big-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 150px; text-decoration: none; color: var(--ink); }
.big-card:hover { border-color: var(--brand); color: var(--ink); }
.big-title { font-size: 19px; }
.big-card b { font-size: 40px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.text-warn { color: var(--warn); }
.actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 24px; }
.action { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; padding: 16px 24px; border-radius: 14px;
  background: var(--brand); color: #fff; text-decoration: none; font-size: 22px; font-weight: 700; }
.action:hover { background: var(--brand-dark); color: #fff; }
.action span { font-size: 16px; font-weight: 400; color: #cde6ec; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.section-head h2 { margin: 0; }

/* ---------- หน้ารายงาน ---------- */
.form-row > .field-wide-2 { flex: 3 1 320px; }
.form-actions { margin: 14px 0 18px; }
.download-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.download-row:first-of-type { border-top: 0; }
.download-row .form-row { flex: 1 1 360px; }
.field-inline { flex-direction: row; align-items: center; gap: 10px; }
.field-inline select { width: auto; min-width: 180px; }
.audit-changes { font-size: 16px; white-space: normal; min-width: 240px; }

/* หน้าต่างกรอกฟอร์ม (ui.js formDialog) */
.notify-dialog.form-dialog { width: min(820px, 100%); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; margin: 8px 0 14px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.field-hint { font-weight: 400; font-size: 15px; color: var(--muted); }
.form-dialog .form-error { margin-bottom: 4px; }

/* ---------- หน้า login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 460px; }
.login-card h1 { margin-bottom: 6px; }
.login-card form { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.login-card .btn { width: 100%; }
.form-error { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius); padding: 12px 16px; }
.form-error:empty { display: none; }

/* ---------- หน้าข้อความเต็มหน้า (ตั้งค่าไม่ครบ ฯลฯ) ---------- */
.fatal { max-width: 640px; margin: 12vh auto; padding: 0 16px; }
.fatal h1 { margin-bottom: 14px; }
.fatal-hint { color: var(--muted); }

/* ---------- แจ้งเตือน (notify.js) ---------- */
.notify-stack { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(460px, calc(100vw - 32px)); }
.notify { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1.5px solid var(--line); border-left-width: 1.5px; border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(15, 42, 58, .16); font-size: 18px; }
.notify.out { opacity: 0; transition: opacity .2s; }
.notify-icon { flex: 0 0 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.notify-success { border-color: #9bd3b0; } .notify-success .notify-icon { background: var(--ok-bg); color: var(--ok); }
.notify-error { border-color: #f0a9a2; } .notify-error .notify-icon { background: var(--bad-bg); color: var(--bad); }
.notify-warning { border-color: #f1c78a; } .notify-warning .notify-icon { background: var(--warn-bg); color: var(--warn); }
.notify-info { border-color: #9fcdd8; } .notify-info .notify-icon { background: var(--info-bg); color: var(--info); }
.notify-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.notify-title { display: block; }
.notify-detail { color: var(--ink-2); margin-top: 2px; }
.notify-hint { color: var(--muted); margin-top: 6px; font-size: 17px; }
.notify-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notify-close { flex: 0 0 44px; height: 44px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); border-radius: 8px; }
.notify-close:hover { background: #eef1f4; }

.notify-dialog-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 42, 58, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.notify-dialog { background: #fff; border-radius: 16px; padding: 26px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 16px 48px rgba(0, 0, 0, .25); }
.notify-dialog h2 { font-size: 24px; margin-bottom: 10px; }
.notify-dialog.danger h2 { color: var(--bad); }
.nd-message { color: var(--ink-2); white-space: pre-line; }
.nd-list { margin: 0 0 14px; padding-left: 22px; }
.nd-input { margin-top: 6px; }
.nd-error { color: var(--bad); min-height: 1.4em; margin-top: 6px; }
.nd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- มือถือ / แท็บเล็ต: ดูอย่างเดียว เมนูย้ายขึ้นด้านบน ---------- */
@media (max-width: 860px) {
  .app { align-content: flex-start; } /* ไม่ให้แถบเมนูยืดเต็มครึ่งจอ */
  .side { flex: 1 1 100%; padding: 12px; }
  .brand { padding: 4px 8px 8px; }
  .side-links { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .side a { min-height: 48px; padding: 0 14px; font-size: 17px; }
  .side-user { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 4px 0; margin-top: 0; }
  .main { padding: 20px 16px 40px; }
  h1 { font-size: 28px; }
  .notify-stack { right: 16px; bottom: 16px; }
}

@media print {
  .side, .notify-stack, .btns, .no-print { display: none !important; }
  body { background: #fff; font-size: 14pt; }
  .main { padding: 0; }
  .card { border: 0; padding: 0; }
  /* ใบนับที่พิมพ์: ช่องว่างให้เขียนจำนวน แทนช่องกรอก */
  .count-table input, .count-table select, .count-table .col-result, .count-table .col-reason,
  .count-table th:nth-child(6), .count-table th:nth-child(7) { display: none !important; }
  .print-blank { display: inline; }
}