/* board/datepicker.css — หน้าตาปฏิทินกลางของบอร์ด (ย้ายมาจาก index.html 2026-07-26)
 *
 * ทำไมต้องมีไฟล์นี้: `<input type="date">` ของเบราว์เซอร์วาดปฏิทินตาม **ภาษาของเครื่อง** ไม่ใช่ของหน้าเว็บ
 * — เครื่องหนึ่งขึ้น `Jul 2026 / Su Mo Tu` อีกเครื่องขึ้นไทย และโค้ดสั่งไม่ได้เลย (ยืนยันบน production)
 * ปฏิทินของหน้า Room เป็นของเราเอง จึงเหมือนกันทุกเครื่อง → ยกมาใช้ทุกที่ที่มีช่องวันที่
 * กฎการแสดงผลอยู่ที่ datepicker.js จุดเดียว (เดือน/วันเป็นอังกฤษ · ปี ค.ศ. · ค่าในช่อง dd/mm/yyyy)
 *
 * คลาสทั้งชุด `.cal*` ย้ายมาจาก <style> ใน index.html แบบคำต่อคำ — หน้า Room หน้าตาไม่เปลี่ยน
 * ห้ามก๊อปคลาสเหล่านี้กลับไปไว้ในหน้าใดหน้าหนึ่งอีก (นี่คือที่เดียวของมันแล้ว)
 */

/* ปฏิทิน custom — แสดงทั้งเดือนเหมือนกันทุกเครื่อง (ไม่พึ่ง native date picker ที่แต่ละเครื่องต่างกัน) */
.cal{position:fixed;background:var(--surface);border-radius:14px;box-shadow:0 16px 44px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08);
     padding:14px;z-index:9600;width:286px;display:none}
.cal.show{display:block}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-mon{font-size:14px;font-weight:800;color:var(--ink)}
.cal-nav{width:30px;height:30px;border:none;border-radius:8px;background:var(--bg);color:var(--ink-2);
         display:grid;place-items:center;cursor:pointer;transition:background var(--speed) var(--ease)}
.cal-nav:hover{background:var(--line-2);color:var(--ink)}
.cal-nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cal-dw{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:5px}
.cal-dw span{text-align:center;font-size:10.5px;font-weight:800;color:var(--ink-3)}
.cal-dg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-day{height:34px;border:none;background:none;border-radius:9px;font-size:13px;font-weight:600;color:var(--ink);
         cursor:pointer;font-variant-numeric:tabular-nums;transition:background 120ms var(--ease)}
.cal-day:hover{background:var(--bg)}
.cal-day.today{color:var(--sold-dk);font-weight:800;box-shadow:inset 0 0 0 1.5px var(--sold)}
.cal-day.sel{background:var(--sold);color:#fff;font-weight:800;box-shadow:none}
.cal-day:disabled{visibility:hidden}
/* วันที่เลือกไม่ได้ (เกิน min/max เช่นหน้าแม่บ้านที่ห้ามเลือกวันอนาคต) — ยังเห็นเลขวันอยู่ แต่จางและกดไม่ได้
   ต่างจาก :disabled เปล่าๆ ข้างบนซึ่งเป็นช่องว่างก่อนวันที่ 1 ของเดือน (ต้องมองไม่เห็น) */
.cal-day.out:disabled{visibility:visible;color:var(--ink-3);opacity:.4;cursor:not-allowed}

/* กล่องแสดงวันที่แทน native input — เป็น <input type="text" readonly> จึงยืมสไตล์ช่องกรอกของหน้านั้น
   มาทั้งชุด (สูง/ขอบ/มุม/ฟอนต์/โฟกัส) เท่าช่องข้างๆ เป๊ะทุกหน้าโดยไม่ต้องเขียน CSS แยกต่อหน้า */
input.dp-in{cursor:pointer;caret-color:transparent}
/* ยกเว้นกฎ [readonly] ของหน้า INVOICE/FOLIO ที่สงวนไว้ให้ "ช่องที่ระบบคำนวณให้" (พื้นจาง ตัวหนา)
   — ช่องวันที่ไม่ใช่ช่องคำนวณ ต้องดูเป็นช่องที่กรอกได้ตามเดิม */
.staytable input.dp-in[readonly],.field input.dp-in[readonly]{background:var(--surface);font-weight:inherit;cursor:pointer}

@media screen and (max-width:767px){
  /* ปฏิทิน .cal: เดิมอิงตำแหน่งปุ่มแบบ desktop (getBoundingClientRect ของตัวเรียก) ล้นขอบล่างจอเตี้ย —
     บนมือถือยึดกลางจอเสมอ (!important สู้ค่า inline left/top ที่ open() ตั้งไว้) */
  .cal{left:50%!important;top:50%!important;transform:translate(-50%,-50%);
    width:min(320px,calc(100vw - 32px));max-height:80vh;overflow-y:auto}
  .cal-day{height:44px}
}