/*
 * Flows · Grid · ริบบิ้นความจุ  (ui/flows/* · ui/grid/* · ui/ribbon.js)
 *
 * ═══════════════════════════════════════════════════════════════════════════
 *  ไฟล์นี้ไม่มีค่าที่คำนวณจากข้อมูลอยู่เลยแม้แต่ค่าเดียว — ตั้งใจ
 *  CSP เป็น style-src 'self' ซึ่งบล็อก style= ในสตริง HTML แบบเงียบ ๆ
 *  ความสูงบล็อก · ตำแหน่งเส้นเพดาน · ตำแหน่งเส้น "ตอนนี้" · ความกว้างแท่ง
 *  ออกไปเป็น data-box / data-at / data-w แล้วเปลือกเซ็ตผ่าน CSSOM ให้
 *  (applyGeometry / applyWidths ใน js/app.js)
 *  ที่นี่มีแต่ค่าคงที่: ความกว้างช่อง ความสูงกราฟ เส้น สี
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * กฎ "เส้นก่อนสี" ของ ui/floor.js ใช้กับไฟล์นี้ด้วย: ช่องที่ใกล้เต็มกับช่องที่เกิน
 * ต้องแยกออกด้วยลายเส้น ไม่ใช่ด้วยสีอย่างเดียว จอนี้ถูกอ่านในที่มืดโดยคนที่ตื่นมาตั้งแต่เที่ยง
 * และแสงสีของบาร์ทำให้ความต่างของสีหายไปก่อนความต่างของเส้นเสมอ
 */

:root {
  --flow-col: 62px;      /* ความกว้างหนึ่งช่องเวลาบน Flows */
  --flow-h: 196px;       /* ความสูงของกราฟบล็อก — สเกลเต็มพอดีหนึ่งช่อง */
  --tg-col: 54px;        /* ความกว้างหนึ่งช่องเวลาบน Grid */
  --tg-name: 96px;       /* คอลัมน์ชื่อโต๊ะที่ปักซ้ายไว้ */
  --tg-row: 50px;        /* แท่งกินความสูง 88% = 44px — มันเป็นปุ่มเปิดแผ่นรายละเอียด */
}

/* ───────────────────────── ส่วนที่ใช้ร่วมกัน ───────────────────────── */

/*
 * กล่องที่เลื่อนแนวนอนได้ — ตัวหน้าต้องไม่เลื่อนตาม
 *
 * min-width:0 คือบรรทัดที่ห้ามลบ: กล่องลูกของ flex/grid มี min-width:auto โดยปริยาย
 * ซึ่งแปลว่า "อย่างน้อยเท่าเนื้อข้างใน" — ตารางกว้าง 1,200px จะดัน #view ออกไป
 * แล้วทั้งหน้าเลื่อนแนวนอนพร้อมกับแถบแท็บล่างที่หลุดออกนอกจอ
 */
.flow-scroll, .tg-scroll, .ribbon {
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.flow-scroll:focus-visible, .tg-scroll:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* ───────────────────────── Flows ───────────────────────── */

.flows { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }

/* ชิปโซนเลื่อนเป็นแถวเดียว ไม่ตัดบรรทัด — โซนแปดโซนที่ตัดบรรทัดกินจอไปครึ่งหนึ่ง
   ก่อนที่กราฟจะได้ขึ้นเลยสักพิกเซล */
.room-bar {
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 2px; min-width: 0;
}
.room-bar .chip { flex: none; white-space: nowrap; font-size: 14px; }

.flow-note {
  margin: 0; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--accent-wash-faint);
  color: var(--ink-dim); font-size: 12.5px;
  line-height: 1.75;                      /* ไทยต้องการที่หายใจแนวตั้ง */
}

/* ป้ายบอกว่าสองแถวตัวเลขคืออะไร — ไม่มีป้าย เลขสองแถวคือปริศนา */
.flow-legend {
  display: flex; gap: 14px;
  font-size: 11px; color: var(--ink-mute); line-height: 1.75;
}
.flow-legend span::before { content: '· '; color: var(--bronze); }

/* กล่องเลื่อนต้องสูงเท่าเนื้อจริง ไม่งั้นเส้น "ตอนนี้" ที่สูง 100% จะสูงเท่าศูนย์ */
.flow-track { position: relative; display: inline-block; min-width: 100%; }
.flow-row { display: flex; }

.flow-col {
  flex: none; width: var(--flow-col);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 2px;
  border-left: 1px solid var(--line-soft);
  text-align: center;
}
.flow-col:last-child { border-right: 1px solid var(--line-soft); }
.flow-col b { font-size: 12px; color: var(--ink); line-height: 1.4; }
.flow-n { font-size: 12px; color: var(--ink-mute); line-height: 1.4; }
.flow-c { font-size: 14px; font-weight: 600; color: var(--sel-text); line-height: 1.4; }
.flow-c i { font-style: normal; font-size: 11px; color: var(--ink-mute); font-weight: 400; }

/* ใกล้เต็ม / เกิน — เส้นก่อนสี */
.flow-col.is-warn { border-bottom: 2px dashed var(--bronze); }
.flow-col.is-over { border-bottom: 3px double var(--danger); }
.flow-col.is-over .flow-c { color: var(--danger-text); }

.flow-stack {
  flex: none; width: var(--flow-col); height: var(--flow-h);
  position: relative;
  border-left: 1px solid var(--line-soft);
  background: linear-gradient(var(--accent-glow), transparent 60%);
}
.flow-stack:last-of-type { border-right: 1px solid var(--line-soft); }

/* บล็อกหนึ่งใบจอง — ตำแหน่งกับความสูงมาจาก data-box ผ่าน CSSOM */
.flow-blk {
  position: absolute; left: 0;
  box-sizing: border-box;
  min-height: 15px;
  padding: 0 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--bronze);
  border-radius: 3px;
  background: var(--accent-wash);
  font-style: normal;
  /* บล็อกซ้อนกันเป็นตั้ง ต้องเห็นรอยต่อ ไม่ใช่เห็นเป็นแท่งเดียวยาว */
  box-shadow: inset 0 -1px 0 var(--surface);
}
.flow-blk b { font-size: 11px; font-weight: 600; color: var(--sel-text); }
.flow-stack.is-over .flow-blk { border-color: var(--danger); }

/* เส้นเพดานของช่องนั้น — ประเภทเส้นบอกความหมาย สีเป็นตัวช่วยอ่านเท่านั้น */
.flow-cap {
  position: absolute; left: 0; width: 100%;
  border-top: 2px dashed var(--bronze);
  opacity: .85;
  pointer-events: none;
}
.flow-stack.is-over .flow-cap { border-top-style: solid; border-top-color: var(--danger); }

/* เส้น "ตอนนี้" — พาดทั้งแกน ตั้งแต่แถวตัวเลขลงมาถึงก้นกราฟ */
.flow-now {
  position: absolute; top: 0; height: 100%;
  width: 0; border-left: 2px solid var(--danger);
  pointer-events: none;
}
/* ป้ายอยู่ "ก้น" เส้น ไม่ใช่หัวเส้น — หัวเส้นคือแถวเวลา ป้ายจะไปทับป้ายช่องที่มันชี้พอดี
   ซึ่งคือช่องที่คนกำลังจะอ่าน ส่วนก้นกราฟเป็นที่ว่างเกือบตลอดคืน */
.flow-now b {
  position: absolute; bottom: 0; left: 2px;
  padding: 1px 4px; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--danger); color: #fff;
  font-size: 10px; line-height: 1.5; white-space: nowrap;
}

.flow-foot {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.flow-foot b { font-size: 18px; font-weight: 600; color: var(--ink); }
.flow-foot > span > span { font-size: 11px; color: var(--ink-mute); margin-left: 5px; letter-spacing: .04em; }
/* ไทยห้าม letter-spacing เด็ดขาด — สระลอยออกจากพยัญชนะ */
:root[lang="th"] .flow-foot > span > span { letter-spacing: 0; }

/* ───────────────────────── ริบบิ้นใต้ผังโต๊ะ ───────────────────────── */

.ribbon { margin: 10px 0 0; }
.ribbon-track { display: flex; gap: 6px; margin: 0; padding: 0 0 2px; list-style: none; }

.ribbon-chip {
  /*
   * position: relative ที่ดูเหมือนไม่จำเป็น — จำเป็นมาก
   *
   * ข้างในชิปมี .sr ซึ่งเป็น position:absolute (คลาสกลางของแอป)
   * ถ้าชิปไม่ใช่กล่องอ้างอิง กล่องอ้างอิงของมันจะกลายเป็น ICB คือทั้งหน้าจอ
   * แล้วข้อความที่ "มองไม่เห็น" นั้นจะไปนั่งอยู่ที่ x=600 นอกกล่องที่เลื่อนได้
   * ผลคือทั้งหน้าเลื่อนแนวนอนได้ถึง 1,200px ทั้งที่ริบบิ้นเองกว้าง 362px และตัดขอบถูกต้อง
   * วัดเจอตอนตรวจด้วยเบราว์เซอร์: html.scrollWidth = 1200 ขณะที่ body กับ #view = 390
   * (แท็บ Flows กับ Grid ไม่โดน เพราะ .flow-stack และ .tg-bar เป็นกล่องอ้างอิงอยู่แล้ว)
   */
  position: relative;
  flex: none; min-width: 66px;
  padding: 5px 8px 6px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  line-height: 1.4;
}
.ribbon-chip b { font-size: 12px; color: var(--ink); }
.ribbon-n { font-size: 11px; color: var(--ink-mute); }
.ribbon-c { font-size: 14px; font-weight: 600; color: var(--sel-text); }
.ribbon-c i { font-style: normal; font-size: 11px; font-weight: 400; color: var(--ink-mute); }

.ribbon-bar { width: 100%; height: 3px; margin-top: 3px; background: var(--line-soft); border-radius: 2px; }
.ribbon-bar i { display: block; height: 100%; background: var(--bronze); border-radius: 2px; }
/* ไม่มีเพดาน = ไม่มีแท่ง แต่ต้องกันที่ไว้ ไม่งั้นชิปเตี้ยกว่าเพื่อนแล้วแถวเป็นฟันปลา */
.ribbon-bar.is-off { background: none; }

.ribbon-chip.is-warn { border-style: dashed; border-color: var(--bronze); }
.ribbon-chip.is-over { border-width: 2px; border-color: var(--danger); }
.ribbon-chip.is-over .ribbon-c { color: var(--danger-text); }
.ribbon-chip.is-over .ribbon-bar i { background: var(--danger); }
/* ช่องของ "ตอนนี้" — พื้นต่างและเส้นใต้หนา ไม่ใช่สีอย่างเดียว */
.ribbon-chip.is-now { background: var(--accent-wash); box-shadow: inset 0 -3px 0 var(--bronze); }

/* ───── ริบบิ้นบนมือถือ: หนึ่งบรรทัด ─────
   ใต้ผังโต๊ะบนจอ 390px ริบบิ้นสี่บรรทัดสูง 76px ซึ่งเท่ากับหนึ่งในสี่ของผังที่เหลืออยู่
   ของที่คนหน้าประตูอ่านจากแถบนี้จริง ๆ คือ "อีกเดี๋ยวกี่หัวลง" = เวลา + จำนวนที่นั่ง
   จำนวน "ใบจอง" กับแท่งความคืบหน้าเป็นรายละเอียดของแท็บ Flows ซึ่งอยู่ห่างแค่แท็บเดียว
   (ข้อความสำหรับเสียงอ่านใน .sr ยังครบทุกตัวเลขเหมือนเดิม การตัดนี้เป็นเรื่องของตา ไม่ใช่ของข้อมูล)
   เพดานสีอันตราย/ใกล้เต็ม ยังอ่านออกจากเส้นขอบซึ่งไม่ได้ถูกตัด */
@media (max-width: 699px) {
  .ribbon { margin: 6px 0 0; }
  .ribbon-chip {
    flex-direction: row; align-items: baseline; gap: 6px;
    min-width: 0; padding: 5px 9px;
  }
  .ribbon-n, .ribbon-bar { display: none; }
  .ribbon-chip b { font-size: 12.5px; }
  .ribbon-c { font-size: 13.5px; }
}

/* ───── ริบบิ้นใต้ผังบนจอกว้าง (คอม · iPad แนวนอน): หนึ่งบรรทัดเหมือนมือถือ ─────
   เจ้าของ 19 ต.ค. "ยังแสดงโต้ะไม่ครบนะ ดูตรง รอบๆ บาร์สิ" — ผังบนจอคอมถูกจำกัดด้วยความสูง
   ริบบิ้นสี่บรรทัด (76px) คืนความสูงให้ผังได้ราว 40px ด้วยเหตุผลเดียวกับมือถือข้างบน
   1100px ต้องตรงกับ WIDE_FLOOR_PX ใน js/ui/floor.js */
@media (min-width: 1100px) {
  #app:has(.floor-row) .ribbon { margin: 6px 0 0; }
  #app:has(.floor-row) .ribbon-chip {
    flex-direction: row; align-items: baseline; gap: 6px;
    min-width: 0; padding: 4px 10px;
  }
  #app:has(.floor-row) .ribbon-n,
  #app:has(.floor-row) .ribbon-bar { display: none; }
  #app:has(.floor-row) .ribbon-chip b { font-size: 12.5px; }
  #app:has(.floor-row) .ribbon-c { font-size: 13.5px; }
}

/* ───────────────────────── Grid (โต๊ะ × เวลา) ───────────────────────── */

.tg { padding-bottom: 12px; }
.tg-track { position: relative; display: inline-block; min-width: 100%; }

/* แถวกว้าง 100% ของ track ซึ่งถูกกำหนดโดยแถวหัวที่กว้างที่สุด
   เลนจึงกว้างเท่าแถบเวลาเสมอ โดยไม่ต้องคำนวณความกว้างด้วย JS เลย */
.tg-row { display: flex; width: 100%; min-height: var(--tg-row); }

/*
 * 203 โต๊ะ = 203 แถว · วาดเฉพาะแถวที่อยู่ในจอด้วย content-visibility ของเบราว์เซอร์เอง
 *
 * ไม่ใช้ตัวจำลองหน้าต่างที่เขียนเอง เพราะตัวแบบนั้นต้องผูก listener กับการเลื่อน
 * แล้ววาดใหม่ระหว่างเลื่อน ซึ่งบนแท็บเล็ตของร้านแปลว่าแถวกระพริบ
 * และมันหลุดออกจากความจริงได้เมื่อความสูงแถวไม่เท่าที่เดาไว้ — ของเบราว์เซอร์หลุดไม่ได้
 */
.tg-row:not(.tg-head) { content-visibility: auto; contain-intrinsic-size: auto var(--tg-row); }

.tg-head { position: sticky; top: 0; z-index: 2; background: var(--ground); border-bottom: 1px solid var(--line); }

.tg-name {
  flex: none; width: var(--tg-name);
  position: sticky; left: 0; z-index: 1;
  background: var(--ground);
  border-right: 1px solid var(--line);
  padding: 4px 8px;
  display: flex; flex-direction: column; justify-content: center;
}
.tg-name b { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.tg-name small { font-size: 10.5px; color: var(--ink-mute); line-height: 1.3; }

.tg-lane { flex: 1 1 auto; position: relative; min-width: 0; border-bottom: 1px solid var(--line-soft); }
.tg-times { display: flex; border-bottom: 0; }
.tg-tick {
  flex: none; width: var(--tg-col);
  border-left: 1px solid var(--line-soft);
  padding: 6px 0; text-align: center;
}
.tg-tick.is-hour { border-left-color: var(--line); }
.tg-tick b { font-size: 11px; color: var(--ink-dim); }

/* แท่งการจอง — ตำแหน่งและความกว้างมาจาก data-box ผ่าน CSSOM */
.tg-bar {
  /* top/height มาจาก data-box (6% / 88%) ไม่ใช่จากที่นี่ — ห้ามตั้งซ้ำ มันจะทับกันเอง */
  position: absolute;
  box-sizing: border-box;
  /* กดเปิดแผ่นรายละเอียดได้ จึงต้องไม่เล็กกว่าเป้าสัมผัสทั้งสองด้าน */
  min-width: 44px;
  padding: 0 6px;
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--st-booked); border-radius: 5px;
  background: var(--st-wash);
  color: var(--ink);
  overflow: hidden; white-space: nowrap;
  text-align: left;
}
.tg-bar b { font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tg-bar i { font-style: normal; font-size: 11px; color: var(--ink-mute); margin-left: auto; }
.tg-bar:active { background: var(--accent-wash); }

/* สถานะแยกด้วยลายเส้นก่อน แล้วค่อยด้วยสี (กฎเดียวกับผังโต๊ะ) */
.tg-bar.is-booked  { border-style: dashed; }
.tg-bar.is-arrived { border-style: dotted; border-width: 2px; }
.tg-bar.is-seated  { border-style: solid; border-color: var(--ok); }
.tg-bar.is-at_risk { border-style: solid; border-color: var(--danger); border-left-width: 4px; }
.tg-bar.is-closed  { border-style: solid; border-color: var(--line); background: none; opacity: .62; }

/* ── นั่งเกินเวลา (UX 19 ต.ค. H5) ──
   แท่งของกลุ่มที่ยังนั่งหลังเวลาจบยืดถึง "ตอนนี้" (ui/grid/matrix.js) · ช่วงที่เกินเป็นลายทแยงสีอันตราย + ป้าย +80′
   ใบถัดไปบนเลนเดียวกันที่จะมาเจอโต๊ะไม่ว่าง: ขอบหนาสีอันตราย + ป้าย ! และพื้นทึบ ทับแท่งที่ยืดมาให้อ่านออก
   ลาย ไม่ใช่สีอย่างเดียว (กฎเดียวกับสถานะอื่นในตารางนี้) */
.tg-bar.is-over { border-color: var(--danger); }
.tg-tail {
  position: absolute; pointer-events: none;
  border-left: 2px solid var(--danger);
  background: repeating-linear-gradient(135deg, var(--danger-wash) 0 5px, transparent 5px 10px);
}
/* ลายที่เข้มพอจะเห็นบนแท็บเล็ต — ค่าที่มี var() ข้างใน "ใช้ไม่ได้ตอนคำนวณ" ไม่ตกไปบรรทัดก่อนหน้า จึงต้องแยกใต้ @supports */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .tg-tail { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 24%, transparent) 0 5px, transparent 5px 10px); }
}
.tg-bar b, .tg-bar i, .tg-overn { position: relative; }
/* ท้ายแท่ง ติดเส้น "ตอนนี้" — ต้นแท่งของกลุ่มที่นั่งมานานมักเลื่อนพ้นจอซ้ายไปแล้ว */
.tg-overn { font-style: normal; font-size: 11px; font-weight: 700; color: var(--danger-text); }
.tg-bar.has-clash { z-index: 1; border: 2px solid var(--danger); background: var(--surface-2); }
.tg-clash {
  flex: none; display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); color: var(--on-accent, #fff);
  font-size: 11px; font-weight: 700; line-height: 1;
}

.tg-group { border-bottom: 1px solid var(--line-soft); }
.tg-gh {
  position: sticky; left: 0;
  width: 100%; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border: 0; border-top: 1px solid var(--line);
  background: var(--surface-2); color: var(--sel-text);
  font-size: 13px; font-weight: 600; line-height: 1.75;
  text-align: left;
}
/* ป้ายกลุ่มต้องยังอ่านออกตอนเลื่อนไปดูตีสาม — ปักตัวป้าย ไม่ใช่ปักทั้งปุ่ม
   ลูกศรพับอยู่ในป้ายด้วย ไม่ใช่ชิดขวาสุดของตาราง ซึ่งอยู่นอกจอเกือบตลอดเวลา */
.tg-gh > span { position: sticky; left: 10px; }
.tg-gh i { font-style: normal; color: var(--ink-mute); }
.tg-gh:active { background: var(--accent-wash); }

/* ชั้นวางเส้น "ตอนนี้" — เริ่มหลังคอลัมน์ชื่อ เปอร์เซ็นต์จึงอิงความกว้างของเลนพอดี */
.tg-over {
  position: absolute; top: 0; bottom: 0;
  left: var(--tg-name); right: 0;
  pointer-events: none;
}
.tg-now { position: absolute; top: 0; height: 100%; width: 0; border-left: 2px solid var(--danger); }

/* ───────────────────────── จอกว้าง ───────────────────────── */

@media (min-width: 720px) {
  :root { --flow-col: 74px; --tg-col: 62px; --tg-name: 112px; }
  .flow-foot b { font-size: 20px; }
}