/*
 * หน้ารายการจอง  (ui/reservations/*.js)
 *
 * ไฟล์แยกโดยตั้งใจ: หนึ่งไฟล์ CSS ต่อหนึ่งแพ็กเกจ (layout.css กับ header.css วางบรรทัดฐานไว้แล้ว)
 * app.css เป็นไฟล์ที่ทุกแพ็กเกจอยากแตะ ถ้าทุกคนแตะจริง มันจะเป็นจุดที่ทุก branch ชนกัน
 *
 * ── กติกาที่ทุกบรรทัดในไฟล์นี้ต้องผ่าน ───────────────────────────────────────
 *
 *   CSP เป็น style-src 'self' — ค่าที่คำนวณได้ต้องมาทาง data-* + CSSOM เท่านั้น
 *   หน้านี้ไม่มีอะไรต้องคำนวณเลย ทุกขนาดเป็นค่าคงที่ จึงไม่มี data-* สักตัว
 *
 *   เป้าสัมผัสขั้นต่ำ 44px ทุกอัน — ถือมือเดียว บนดาดฟ้า ตอนห้าทุ่ม ในที่มืด
 *   (.daybar ใน app.css สูง 40px ซึ่งต่ำกว่าเส้นนี้ ชิปของหน้านี้จึงไม่ใช้คลาสนั้น)
 *
 *   ไทยห้าม letter-spacing และ line-height ต้องไม่ต่ำกว่า 1.75
 *   ทั้งสองข้อถูกคุมจากส่วนกลางแล้วด้วย :root[lang="th"] ใน app.css (--lh / --track)
 *   หน้าที่ของไฟล์นี้คือ **ห้ามเขียนทับมัน** — ห้ามใส่ line-height เป็นตัวเลขดิบกับข้อความไทย
 *   ตัวเลขดิบใช้ได้เฉพาะกับกล่องที่มีแต่ตัวเลขและอักษรละติน (เวลา · จำนวนคน · ชื่อโต๊ะ)
 *
 *   ทั้งสองธีมต้องอ่านออก — ใช้ตัวแปรของธีมเท่านั้น ห้ามมีค่าสีดิบในไฟล์นี้
 *
 *   ห้ามให้หน้าเลื่อนออกด้านข้างที่ 390px — ทุกแถวมี min-width: 0 ที่คอลัมน์ที่ยืดได้
 *   คอลัมน์ที่ลืม min-width คือสาเหตุเดียวของแถบเลื่อนแนวนอนใน flexbox และมันไม่มี error
 */

.rsv { padding-top: 2px; }

/* ───────── แถบค้นหา ───────── */

.rsv-bar {
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 8px;
  min-width: 0;
}

.rsv-find {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  min-height: 46px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2, var(--surface));
}
.rsv-find:focus-within { border-color: var(--bronze); }
.rsv-find-i { flex: none; color: var(--ink-mute); }

.rsv-q {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  color: var(--ink);
  font-size: 16px;            /* ต่ำกว่า 16px = iOS ซูมเข้าเองตอนแตะ แล้วหน้าเลื่อนออกข้าง */
  line-height: var(--lh);
  padding: 0;
  /* ตัว <input> เองต้องสูงเท่าเป้าสัมผัส ไม่ใช่แค่กรอบรอบ ๆ มัน
     กล่องข้อความสูง 25px ที่วางอยู่กลางกรอบ 46px คือแถบรับนิ้วที่พลาดได้จริงในที่มืด */
  min-height: 44px;
}
.rsv-q::placeholder { color: var(--ink-mute); }
/* ปุ่มล้างของเบราว์เซอร์เองซ้อนกับปุ่มของเรา และมันเล็กกว่า 44px เสมอ */
.rsv-q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.rsv-clear {
  flex: none;
  min-width: 44px; min-height: 44px;
  margin-right: -8px;
  background: none; border: 0;
  color: var(--ink-dim); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.rsv-clear:active { color: var(--sel-text); }

.rsv-more {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--ink-dim); font-size: 14px;
  line-height: var(--lh);
  white-space: nowrap;
}
.rsv-more:active { border-color: var(--bronze); color: var(--sel-text); }
/* [hidden] ของ UA เป็น display:none ที่แพ้กฎของผู้เขียนทุกข้อ
   .rsv-more-n กับ .rsv-clear ตั้ง display ไว้ จึงต้องประกาศคู่ของมันเอง ไม่งั้น "ซ่อน" แล้วยังเห็น
   (เจอจากภาพหน้าจอจริง: ปุ่มกากบาทกับตราจำนวนตัวกรองโผล่ทั้งที่ยังไม่มีอะไรให้ล้าง) */
.rsv-more-n[hidden], .rsv-clear[hidden] { display: none; }

.rsv-more-n {
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--bronze); color: var(--on-accent);
  font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ───────── ชิปกรองห้าตัว ───────── */

/* เลื่อนออกได้ในตัวมันเอง ไม่ใช่ทำให้ทั้งหน้าเลื่อนออกข้าง
   overscroll-behavior กันไม่ให้การปัดชิปไปสุดแล้วลากหน้าเว็บทั้งหน้าไปด้วย */
.rsv-chips {
  display: flex; gap: 8px;
  padding-bottom: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rsv-chips::-webkit-scrollbar { display: none; }

.rsv-chip {
  flex: none;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink-dim); font-size: 13px;
  line-height: var(--lh);
  white-space: nowrap;
}
.rsv-chip[aria-pressed="true"] {
  border-color: var(--bronze); color: var(--sel-text);
  background: var(--accent-wash-faint);
  font-weight: 600;
}

/* ───────── บรรทัด "แสดง n (c) จาก N" ───────── */

/* แถบหัวถาวรบอกยอด "ทั้งคืน" เสมอ พอมีตัวกรอง สองตัวเลขนั้นจะไม่ตรงกัน
   ถ้าไม่บอกตรงนี้ คนจะอ่านยอดบนหัวแล้วเชื่อว่านั่นคือสิ่งที่อยู่ในรายการข้างล่าง */
.rsv-showing {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 2px 10px;
  color: var(--ink-mute); font-size: 13px;
  line-height: var(--lh);
}
.rsv-reset {
  flex: none;
  min-height: 44px; padding: 0 12px;
  background: none; border: 0;
  color: var(--accent-text); font-size: 13px;
  line-height: var(--lh);
  text-decoration: underline;
}

/* ───────── หัวข้อของช่วง ───────── */

.rsv-sec { margin-bottom: 14px; }

.rsv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 2px;
  padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
  color: var(--ink-mute);
  line-height: var(--lh);
}
.rsv-head-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ตัวพิมพ์ใหญ่กับ tracking เป็นเรื่องของอักษรละตินล้วน
   ภาษาไทยไม่มีตัวพิมพ์ใหญ่ และ tracking ถูกปิดไว้แล้วจากส่วนกลาง */
:root:not([lang="th"]) .rsv-head-t { text-transform: uppercase; letter-spacing: .1em; }

.rsv-head-t--btn {
  display: flex; align-items: center; gap: 6px;
  min-height: 44px; margin: -10px 0;   /* พื้นที่รับนิ้วโตโดยไม่ดันหัวข้อให้สูงขึ้น */
  padding: 0; background: none; border: 0;
  color: inherit; font: inherit;
}
.rsv-caret { font-size: 13px; color: var(--ink-dim); }

/* คู่ตัวเลข n (c) — กลุ่มสายตาเดียว ไม่ใช่สองตัวเลขที่ต้องเอามาเทียบกันในหัว
   รูปแบบเดียวกับ .counts-pair บนแถบหัว เพื่อให้สายตาอ่านมันเป็นของชนิดเดียวกัน */
.rsv-pair { flex: none; display: inline-flex; align-items: baseline; gap: 4px; }
.rsv-pair b { font-size: 15px; font-weight: 600; color: var(--ink); }
.rsv-pair i { font-style: normal; font-size: 13px; color: var(--ink-mute); }

.rsv-none {
  margin: 0; padding: 14px 2px;
  color: var(--ink-mute); font-size: 13px;
  line-height: var(--lh);
}

.rsv-hintline {
  margin: 10px 0 0;
  color: var(--ink-mute); font-size: 12px;
  line-height: var(--lh);
}

/* ───────── แถวหนึ่งของการจอง ───────── */

.rsv-item { border-bottom: 1px solid var(--line-soft); }

/* สามปุ่มบนแถวเดียว — แถวหลัก · เชฟรอนแท็ก · กล่องโต๊ะ
   ต้องเป็นพี่น้องกัน ไม่ใช่ซ้อนกัน เพราะ <button> ใน <button> ถูกตัวแยกวิเคราะห์ยกออกมาเสมอ
   (ดูคอมเมนต์ที่ rowHTML ใน list.js) จึงต้องมีกล่อง flex ครอบอีกชั้นหนึ่งเพื่อให้ยังอยู่บรรทัดเดียว */
.rsv-line {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}

.rsv-row {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  min-height: 60px;
  padding: 9px 2px;
  border: 0; background: none;
  text-align: left; color: var(--ink);
}
.rsv-row:active, .rsv-tbl:active { background: var(--accent-wash-faint); }

.rsv-time {
  flex: none; width: 46px;
  font-size: 16px; font-weight: 600;
  line-height: 1.2;              /* ตัวเลขล้วน ไม่มีสระไทย */
}

/* รางไอคอน — กว้างเท่ากันทุกแถวของรายการเดียวกัน ชื่อแขกจึงเริ่มที่ตำแหน่งเดียวกันเสมอ
   ชิดขวาเพื่อให้ไอคอนอยู่ติดชื่อ ไม่ใช่ลอยอยู่กลางช่องว่าง
   ความกว้างมาจาก data-icons ที่ listHTML คำนวณไว้ (0–4) ไม่ใช่จากจำนวนไอคอนของแถวนั้น */
.rsv-icons {
  flex: none;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  min-width: 0;
  color: var(--ink-mute);
}
.rsv-rows[data-icons="0"] .rsv-icons { display: none; }
.rsv-rows[data-icons="1"] .rsv-icons { width: 13px; }
.rsv-rows[data-icons="2"] .rsv-icons { width: 29px; }
.rsv-rows[data-icons="3"] .rsv-icons { width: 45px; }
.rsv-rows[data-icons="4"] .rsv-icons { width: 61px; }
.rsv-i { flex: none; display: block; }
/* เค้กคือข้อมูลที่ต้องสะดุดตา วันเกิดที่พลาดคือวันเกิดที่แขกจำได้ */
.rsv-i--cake { color: var(--accent-text); }
.rsv-i--tag  { color: var(--accent-text); }

.rsv-who { flex: 1 1 auto; min-width: 0; }
.rsv-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px;
  line-height: var(--lh);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rsv-sub {
  display: block;
  font-size: 12px; color: var(--ink-mute);
  line-height: var(--lh);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* "ตรงที่โน้ต" — บอกว่าเจอจากช่องไหน โดยไม่แสดงเนื้อของช่องนั้น
   เบอร์โทรและอีเมลห้ามขึ้นบนแถวเด็ดขาด รายการนี้ถูกมองข้ามห้องจากที่ที่คนอื่นก็เห็น */
.rsv-hit { color: var(--accent-text); }
.rsv-hit::before { content: ' · '; color: var(--ink-mute); }
.rsv-q-mark { color: var(--sel-text); }
.rsv-q-mark::before { content: ' · '; color: var(--ink-mute); }

.rsv-party {
  flex: none;
  min-width: 24px; text-align: right;
  font-size: 18px; font-weight: 600;
  line-height: 1.2;
}

/* กล่องเลขโต๊ะทางขวา — งานของโฮสต์ที่ประตูคือ ชื่อ → โต๊ะ และมันต้องกวาดตาเจอในคอลัมน์เดียว */
.rsv-tbl {
  flex: none;
  /* 44px คือเป้าสัมผัส ไม่ใช่ขนาดที่ตาเห็น — กล่องนี้ถูกแตะจริงเพื่อเปิดแผงของใบนั้น */
  min-width: 46px; min-height: 44px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink); font-size: 14px; font-weight: 600;
  line-height: 1.2;
}
.rsv-tbl--many { font-size: 12px; }
/* ยังไม่ได้จัดโต๊ะ = กล่องว่าง ไม่ใช่ไม่มีกล่อง คอลัมน์ต้องตรงกันทั้งรายการ */
.rsv-tbl--none { border-style: dashed; color: var(--ink-mute); font-weight: 400; }

/* แท็กบนแถว — ขึ้นเสมอ ใต้สถานะ (เจ้าของ 21 ต.ค.) · ห่อบรรทัดได้ ไม่ตัดทิ้ง: แท็กที่ถูกตัดคือเรื่องแพ้ที่ครัวไม่เห็น */
.rsv-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 4px 0 2px;
}
.rsv-tagpill {
  padding: 3px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-dim); font-size: 12px;
  line-height: var(--lh);
}

/* ปุ่มลัด — อยู่ใต้แถว ไม่ใช่ในแถว เพราะแถวทั้งแถวเป็นปุ่มเปิดแผงอยู่แล้ว
   ปุ่มซ้อนในปุ่มเป็น HTML ที่ผิด และบนจอสัมผัสมันคือการกดผิดทุกสิบครั้ง */
.rsv-quick { padding: 0 2px 10px; }
.rsv-quick .btn { min-height: 44px; }

.rsv-goreq {
  display: block; width: 100%;
  min-height: 48px; margin-top: 8px;
  padding: 0 14px;
  border: 1px dashed var(--bronze); border-radius: var(--r);
  background: var(--accent-wash-faint);
  color: var(--sel-text); font-size: 14px;
  line-height: var(--lh);
}

/* แถวที่คำสั่งยังส่งไม่ถึงเซิร์ฟเวอร์ — จุดเดียวกับที่ใช้บนผังโต๊ะ ไม่ใช่ภาษาใหม่ */
.rsv-line.is-pending .rsv-time { position: relative; }
.rsv-line.is-pending .rsv-time::after {
  content: '';
  position: absolute; top: -2px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sel-text);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ───────── จอที่แคบกว่าภาพของเจ้าของ ───────── */

@media (max-width: 359px) {
  /* ที่ 320px ยังต้องไม่มีแถบเลื่อนแนวนอน — ยอมให้ปุ่ม "เพิ่มเติม" ลงไปอยู่บรรทัดที่สอง */
  .rsv-bar { flex-wrap: wrap; }
  .rsv-more { flex: 1 1 100%; justify-content: center; }
  .rsv-time { width: 42px; font-size: 15px; }
  /* กล่องโต๊ะแคบลงได้ แต่ห้ามต่ำกว่าเป้าสัมผัส — มันเป็นปุ่มเปิดใบจอง ไม่ใช่ป้าย */
  .rsv-tbl { min-width: 44px; padding: 0 4px; }
  .rsv-row { gap: 8px; }
}
/* เรื่องอาหาร/สุขภาพ (0074) — สีเตือนของธีม ไม่ใช่สีของหมวด: ไอคอนนี้คือ "ระวัง" ไม่ใช่ป้ายหมวด */
.rsv-i--care { color: var(--danger-text); }

/* โน้ตบนแถวรายการจอง (เจ้าของ 21 ต.ค.) — บรรทัดเดียว ตัดท้าย · โน้ตการบริการของแขกมีเส้นนำหน้าแยกจากโน้ตของใบ */
.rsv-note {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.rsv-note--svc { padding-left: 7px; border-left: 2px solid var(--accent-text); }

/* ── ป้ายสียอดใช้จ่าย (spend_flag · คุณตอง 22 ต.ค. "ไม่มีสีแจ้งเหมือนใน 7rooms") ──
   เขียว = ใส่ยอดแล้ว (มีตัวเลข) · แดง = ยังไม่ใส่ (มีคำ) + แถบสีที่ขอบซ้ายของแถว
   ต่างกันทั้งสีและรูปร่าง — กวาดตาลงคอลัมน์แล้วเห็นแถบแดงก่อนอ่านคำ */
.rsv-spend {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.rsv-spend--ok { color: var(--st-seated); background: var(--st-seated-fill); }
.rsv-spend--miss { color: var(--danger-text); background: var(--danger-wash); box-shadow: inset 0 0 0 1px var(--st-overdue); }
.rsv-line--nospend { box-shadow: inset 4px 0 0 var(--st-overdue); }
.rsv-chip--nospend { color: var(--danger-text); }
.rsv-chip--nospend[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--st-overdue); }

/* มัดจำที่จ่ายแล้ว (ปุ่มบันทึกมัดจำ · 22 ต.ค.) — สีบรอนซ์ของ "จองไว้" ไม่ใช่สีเงินเขียว เพราะยังไม่ใช่ยอดใช้จ่าย */
.rsv-dep {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  font-size: 11.5px; line-height: 18px; font-weight: 600; white-space: nowrap;
  color: var(--st-booked); background: var(--st-booked-fill);
}