/* ══════════════════════════════════════════════════════════════════
   Tableory · โหมดจัดผังโต๊ะ
   ไฟล์แยก เพราะ css/app.css มีเจ้าของอยู่ตอนนี้ (ดู handoff-layout.md)
   ต้องโหลด "หลัง" app.css เสมอ — กฎบางข้อในนี้เขียนทับ transform ของ .tbl
   ทุกสีมาจากโทเคนของ app.css ทั้งหมด จึงตามธีมสว่าง/มืดเองโดยไม่ต้องประกาศซ้ำ
   ══════════════════════════════════════════════════════════════════ */

/* ───────── ผังตอนอยู่ในโหมดแก้ไข ─────────
   ต้องชัดจนไม่มีทางเผลอว่าตอนนี้ "ของขยับได้" — พนักงานที่เอานิ้วปัดผังตอนเที่ยงคืน
   ห้ามย้ายโต๊ะโดยไม่ตั้งใจ ขอบเส้นประรอบผังคือสัญญาณหลัก */
.floor--editing {
  outline: 2px dashed var(--bronze);
  /* วาดเส้นด้าน "ใน" ขอบผัง — ผืนผังอยู่ในกรอบที่ตั้ง overflow ไว้ (.floor-wrap)
     ของเดิม offset +3px ถูกกรอบตัดทิ้งทั้งเส้นบน iPad สัญญาณ "กำลังจัดผัง" จึงหายไปเลย (16 ต.ค.) */
  outline-offset: -3px;
}

/* หัวใจของ "ลากโต๊ะ ไม่ใช่ลากผัง"
   touch-action: none บอกเบราว์เซอร์ว่าเจสเจอร์ที่เริ่มบนโต๊ะเป็นของเรา
   ส่วนเจสเจอร์ที่เริ่มบนพื้นยังตกเป็นของ .floor-wrap (pan-x pan-y pinch-zoom) เหมือนเดิม
   ผังจึงยังลากและหนีบซูมได้ตามปกติ โดยไม่ต้องไปดัก preventDefault เอาเองทั้งหมด
   (ถ้าดักเองหมด การหนีบซูมจะพังทันที) */
.floor--editing .tbl {
  touch-action: none;
  cursor: grab;
}
.floor--editing .tbl:active { cursor: grabbing; }

/* ใบที่กำลังลากอยู่ — ยกขึ้นมาเหนือใบอื่น และห้ามมี transition
   ไม่งั้นโต๊ะจะ "ไล่ตามนิ้ว" ช้ากว่านิ้วหนึ่งเฟรมตลอดเวลา */
.floor--editing .tbl.is-dragging {
  z-index: 30;
  transition: none;
  box-shadow: 0 0 0 3px var(--bronze), 0 10px 26px var(--shadow-2);
  opacity: .92;
}

/* ใบที่ถูกย้ายแล้วแต่ยังไม่ได้บันทึก — ต้องนับได้ด้วยตาว่าค้างอยู่กี่ใบ */
.floor--editing .tbl.is-moved::before {
  content: '';
  position: absolute; top: -4px; left: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 2px var(--ground);
}

/* โต๊ะที่มีแขกนั่งอยู่ ตอนอยู่ในโหมดแก้ไข — ย้ายได้ แต่ต้องรู้ตัวก่อนลาก
   เซิร์ฟเวอร์จะถามซ้ำอีกทีตอนบันทึก (409 table_in_service) นี่คือด่านแรกด้วยสายตา */
.floor--editing .tbl--seated,
.floor--editing .tbl--at_risk,
.floor--editing .tbl--overdue { cursor: grab; }
.floor--editing .tbl--seated::after,
.floor--editing .tbl--overdue::after {
  content: '●';
  position: absolute; bottom: -3px; right: -3px;
  font-size: 9px; line-height: 1; color: var(--st-seated);
}
.floor--editing .tbl--overdue::after { color: var(--st-overdue); }

/* มุมหมุนของโต๊ะ (tbl.rot — ดู migration 0019)
   .tbl ใน app.css ตั้ง transform: translate(-50%,-50%) ไว้แล้ว กฎนี้จึงต้องประกาศทั้งชุดใหม่
   ไม่งั้นการหมุนจะลบการจัดกึ่งกลางทิ้งแล้วโต๊ะกระโดดไปครึ่งใบ */
.tbl[data-rot] { transform: translate(-50%, -50%) rotate(var(--tbl-rot, 0deg)); }
.tbl[data-rot]:active { transform: translate(-50%, -50%) rotate(var(--tbl-rot, 0deg)) scale(.93); }

/* ───────── แถบโหมดแก้ไข ─────────
   อยู่ที่เดียวกับแถบเลือกโต๊ะ (.pickbar) เพราะเป็นของประเภทเดียวกัน:
   โหมดที่กินหน้าจอทั้งหน้าและต้องมีทางออกที่เห็นชัดเสมอ */
.laybar {
  position: fixed; z-index: 30;
  left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom));
  margin: 0 auto; max-width: 900px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
  background: var(--surface-2);
  border-top: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze);
  box-shadow: 0 -10px 28px var(--shadow-2);
}
.laybar-txt { flex: 1 1 200px; min-width: 0; }
.laybar-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--sel-text); }
.laybar-txt span {
  display: block; font-size: 11.5px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.laybar-err { color: var(--danger-text) !important; }
.laybar-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.laybar-btns .btn { min-width: 84px; min-height: var(--tap); }

/* ปุ่มเข้าโหมด — เป้าสัมผัสเท่าแท็บอื่นในแถวเดียวกัน */
.ztab--tool[data-lay="enter"] { background: transparent; font-size: 13px; }

/* ───────── ฟอร์มตั้งค่าโต๊ะ ─────────
   .spend ของ app.css เป็นตารางสองคอลัมน์อยู่แล้ว ใช้ซ้ำแทนที่จะสร้างคลาสใหม่ */
#sheet-root input[type="number"] {
  min-height: var(--tap);
  padding: 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-size: 16px;                       /* 16px ขึ้นไป ไม่งั้น iOS ซูมเข้าเองตอนโฟกัส */
  font-variant-numeric: tabular-nums;
}
#sheet-root input[type="number"]:focus { border-color: var(--bronze); outline: none; }
#sheet-root input[type="number"]:disabled { opacity: .45; }