/* ============================================================
   Elebiz Solution — CSS หลักของหลังบ้าน
   เขียนจาก token ตรง ๆ ตาม docs/design-system.md
   ★ ไม่ใช้ Tailwind และไม่มี build step (docs/codeigniter4-setup.md ทางเลือก ข.)
     ไฟล์นี้คือของจริงที่เสิร์ฟ อัปขึ้นโฮสต์แล้วใช้ได้เลย
   ============================================================ */

:root {
  /* Primary — เขียวใบไม้เข้ม */
  --primary:#0d631b; --primary-container:#2e7d32; --on-primary:#fff;
  --primary-fixed:#a3f69c; --on-primary-fixed:#002204; --on-primary-fixed-variant:#005312;
  --inverse-primary:#88d982; --surface-tint:#1b6d24;

  /* Secondary — ส้มอำพัน (ยอดเงิน / รอดำเนินการ) */
  --secondary:#875200; --secondary-container:#f89c00; --on-secondary:#fff;
  --on-secondary-container:#623a00;

  /* Tertiary — เขียวน้ำทะเล (ระบบ / IoT) */
  --tertiary:#006157; --tertiary-fixed:#8df5e4; --on-tertiary-fixed:#00201c;

  /* Surface */
  --background:#f2fcef; --surface:#f2fcef;
  --surface-lowest:#ffffff; --surface-low:#ecf7e9; --surface-highest:#dbe5d9;
  --surface-variant:#dbe5d9;
  --on-surface:#151e16; --on-surface-variant:#40493d;
  --inverse-on-surface:#e9f4e7; --outline:#707a6c;

  /* Error */
  --error:#ba1a1a; --error-container:#ffdad6; --on-error:#fff; --on-error-container:#93000a;

  /* Type */
  --font-th:'Prompt','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-en:'Manrope',system-ui,sans-serif;

  /* Spacing · radius · shadow */
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(21,30,22,.06);
  --sh-2:0 4px 12px rgba(21,30,22,.10);

  --sidebar-w:260px;
}

/* ★ ห้ามนิยามสีไว้เฉพาะใน media query — dark mode สลับด้วย attribute */
:root[data-theme="dark"]{
  --background:#101410; --surface:#101410;
  --surface-lowest:#171d17; --surface-low:#1c231c; --surface-highest:#2a322a;
  --surface-variant:#2a322a;
  --on-surface:#e0e4dd; --on-surface-variant:#c0c8bd; --outline:#8a938a;
  --primary:#88d982; --on-primary:#003910; --primary-container:#00521a;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; background:var(--background); color:var(--on-surface);
  font-family:var(--font-th);
  /* ★ ข้อความไทยต้องการที่ให้สระบน-ล่าง อย่างน้อย 1.6 */
  line-height:1.6; font-size:16px;
  -webkit-text-size-adjust:100%;
}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* ★ Focus ring ต้องเห็นได้ทุก interactive element */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ── โครงหน้า ───────────────────────────────────────────── */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100dvh}

.sidebar{
  background:var(--surface-lowest); border-right:1px solid var(--surface-highest);
  display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto;
}
.sidebar__brand{
  padding:20px 16px; font-weight:700; font-size:18px; color:var(--primary);
  border-bottom:1px solid var(--surface-highest); display:flex; align-items:center; gap:10px;
}
.sidebar__org{font-size:12px; color:var(--on-surface-variant); font-weight:400; display:block}
.sidebar__nav{padding:8px; flex:1}
.sidebar__group{
  font-size:12px; color:var(--on-surface-variant); font-weight:600;
  padding:16px 12px 6px; text-transform:none;
}

/* ============================================================
   กลุ่มเมนูพับเก็บได้
   ★★★ checkbox + label ล้วน ๆ ไม่ใช่ <details> — แถบล่างบนมือถือเลือกลิงก์
       ด้วย CSS จากโครงสร้าง DOM ส่วน <details> ที่ปิดอยู่จะซ่อนลูกในระดับ
       เบราว์เซอร์ ซึ่ง CSS ของเราแทรกแซงไม่ได้ แล้วทางลัดบนมือถือจะหายเงียบ ๆ
   ============================================================ */
.navgroup__t{position:absolute; width:1px; height:1px; opacity:0; margin:0}
/* ★ เป้าแตะเต็มแถบ ไม่ใช่แค่ตัวหนังสือ */
label.sidebar__group{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; min-height:34px; border-radius:var(--r-sm);
}
label.sidebar__group:hover{background:var(--surface-low)}
.navgroup__caret{font-size:11px; transition:transform .15s ease}
.navgroup__t:focus-visible + .sidebar__group{outline:2px solid var(--primary); outline-offset:-2px}

@media (min-width:768px){
  /* ★ พับได้เฉพาะจอใหญ่ — บนมือถือแผ่นเมนูเป็นแผ่นเต็มจอ เลื่อนหาง่ายกว่าพับ */
  .navgroup__t:not(:checked) ~ .navlink{display:none}
  .navgroup__t:not(:checked) + .sidebar__group .navgroup__caret{transform:rotate(-90deg)}
}
.navlink{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--r-sm);
  color:var(--on-surface); min-height:44px; font-size:14px;
}
.navlink:hover{background:var(--surface-low); text-decoration:none}
.navlink[aria-current="page"]{background:var(--primary-fixed); color:var(--on-primary-fixed); font-weight:600}
.navlink .ico{width:20px; text-align:center; flex:0 0 20px; opacity:.85}
/* ★★ เมนูล่าสุดที่กด — ใช้ตอนเปิดหน้าลูกที่ไม่มีแถวในเมนู (เช่นหน้าเช็คอิน)
      ★ ต้องดู **อ่อนกว่า** หน้าที่เปิดอยู่จริงอย่างเห็นได้ชัด ไม่ใช่สีเดียวกัน
        ไม่งั้นจะอ่านว่า "ตอนนี้อยู่หน้านี้" ซึ่งไม่จริง และพาให้กดวนที่เดิม */
.navlink--last{background:var(--surface-low); font-weight:600}
.navlink--last::after{
  content:''; margin-left:auto; width:6px; height:6px; border-radius:999px;
  background:var(--primary); opacity:.6; flex:0 0 6px;
}
/* เมนูที่ยังไม่มีหน้าจริง — จางลงและกดไม่ได้ ไม่ใช่ลิงก์ที่พาไป 404 */
.navlink--soon{color:var(--on-surface-variant); opacity:.55; cursor:default}
.navlink__soon{
  margin-left:auto; font-size:10px; padding:2px 6px; border-radius:999px;
  border:1px solid var(--outline); white-space:nowrap;
}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
  position:sticky; top:0; z-index:5; background:var(--background);
  border-bottom:1px solid var(--surface-highest);
  padding:14px 24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.topbar h1{margin:0; font-size:20px; font-weight:600}
.topbar__right{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:14px}

/* ── เมนูส่วนบุคคลใต้ชื่อผู้ใช้ ──────────────────────────────────
   ★ ใช้ <details> ล้วน ๆ ไม่มี JavaScript — หน้าหลังบ้านต้องใช้ได้
     แม้สคริปต์โหลดไม่ทัน และเป้าแตะต้อง ≥ 44px ตามกติกาหน้ามือถือ */
.usermenu{position:relative}
.usermenu__name{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:4px;
  min-height:44px; padding:0 8px; border-radius:8px;
}
.usermenu__name::-webkit-details-marker{display:none}
.usermenu__name:hover{background:var(--surface-variant)}
.usermenu[open] .usermenu__name{background:var(--surface-variant)}
.usermenu__caret{font-size:10px; opacity:.6}
.usermenu[open] .usermenu__caret{transform:rotate(180deg)}
.usermenu__panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:250px; padding:6px;
  background:var(--surface); border:1px solid var(--outline);
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.14);
}
.usermenu__label{
  margin:4px 10px 2px; font-size:11px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--on-surface-variant);
}
.usermenu__hint{margin:2px 10px 6px; font-size:11px; line-height:1.5; color:var(--on-surface-variant)}
.usermenu__sep{margin:6px 0; border:0; border-top:1px solid var(--outline)}
.usermenu__item{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:44px; padding:0 10px; border:0; border-radius:8px;
  background:none; color:inherit; font:inherit; text-align:left;
  text-decoration:none; cursor:pointer;
}
.usermenu__item:hover{background:var(--surface-variant)}
.usermenu__item--danger{color:var(--error)}

/* ★ จอแคบ: กันแผงล้นขอบขวา */
@media (max-width:520px){
  .usermenu__panel{min-width:min(280px, calc(100vw - 24px))}
}
.content{padding:24px; max-width:1280px; width:100%}
/* ★★ หน้าที่ต้องใช้พื้นที่ทั้งหมด (กล่องข้อความ) — จอกว้างต้องได้ใช้จริง
   ★ ไม่ปลด max-width ให้ทุกหน้า เพราะตารางและฟอร์มยาวเกิน ~1280px อ่านยากขึ้น */
.content--wide{max-width:none}

/* ── การ์ด · ตาราง ─────────────────────────────────────── */
.card{background:var(--surface-lowest); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:20px; margin-bottom:16px}
.card__title{margin:0 0 4px; font-size:16px; font-weight:600}
.card__hint{margin:0 0 16px; font-size:13px; color:var(--on-surface-variant)}

.grid{display:grid; gap:16px}
.grid--kpi{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.stat{background:var(--surface-lowest); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:18px 20px}
.stat__label{font-size:13px; color:var(--on-surface-variant); margin:0}
.stat__value{font-size:32px; font-weight:700; margin:6px 0 0; font-variant-numeric:tabular-nums; line-height:1.2}
.stat__sub{font-size:12px; color:var(--on-surface-variant); margin:2px 0 0}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--surface-highest); vertical-align:middle}
th{font-weight:600; color:var(--on-surface-variant); font-size:13px; white-space:nowrap}
tbody tr:hover{background:var(--surface-low)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ★ AmountText — จัดขวา ตัวเลข tabular 2 ตำแหน่ง ติดลบสีแดงในวงเล็บ */
.amount{font-variant-numeric:tabular-nums; text-align:right; display:inline-block}
.amount--neg{color:var(--error)}

/* ── แท็บ — ไม่ใช้ JavaScript ───────────────────────────── */
/* ★★ ทำด้วย radio + label ล้วน ๆ เพราะหน้าหลังบ้านต้องใช้ได้แม้ JS พัง
   และเพราะทุกแถวยังอยู่ใน DOM ผู้ใช้จึงกด Ctrl+F หาข้ามแท็บได้
   ★ เป้าแตะ 44px ตาม CLAUDE.md หมวดหน้าจอ ข้อ 5 */
.tabs > input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.tabs__list{
  display:flex; gap:4px; flex-wrap:wrap; margin:0 0 16px;
  border-bottom:1px solid var(--surface-highest);
}
.tabs__tab{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px;
  font-size:14px; font-weight:600; color:var(--on-surface-variant); cursor:pointer;
  border-bottom:2px solid transparent; border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.tabs__tab:hover{background:var(--surface-low)}
.tabs__count{font-size:12px; font-weight:500; opacity:.75}
.tabs__panel{display:none}

.tabs > input:nth-of-type(1):checked ~ .tabs__list .tabs__tab:nth-child(1){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(1):focus-visible ~ .tabs__list .tabs__tab:nth-child(1){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(1):checked ~ .tabs__panels > .tabs__panel:nth-child(1){display:block}
.tabs > input:nth-of-type(2):checked ~ .tabs__list .tabs__tab:nth-child(2){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(2):focus-visible ~ .tabs__list .tabs__tab:nth-child(2){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(2):checked ~ .tabs__panels > .tabs__panel:nth-child(2){display:block}
.tabs > input:nth-of-type(3):checked ~ .tabs__list .tabs__tab:nth-child(3){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(3):focus-visible ~ .tabs__list .tabs__tab:nth-child(3){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(3):checked ~ .tabs__panels > .tabs__panel:nth-child(3){display:block}
.tabs > input:nth-of-type(4):checked ~ .tabs__list .tabs__tab:nth-child(4){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(4):focus-visible ~ .tabs__list .tabs__tab:nth-child(4){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(4):checked ~ .tabs__panels > .tabs__panel:nth-child(4){display:block}
.tabs > input:nth-of-type(5):checked ~ .tabs__list .tabs__tab:nth-child(5){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(5):focus-visible ~ .tabs__list .tabs__tab:nth-child(5){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(5):checked ~ .tabs__panels > .tabs__panel:nth-child(5){display:block}
.tabs > input:nth-of-type(6):checked ~ .tabs__list .tabs__tab:nth-child(6){
  color:var(--primary); border-bottom-color:var(--primary); background:var(--surface-low);
}
.tabs > input:nth-of-type(6):focus-visible ~ .tabs__list .tabs__tab:nth-child(6){
  outline:2px solid var(--primary); outline-offset:2px;
}
.tabs > input:nth-of-type(6):checked ~ .tabs__panels > .tabs__panel:nth-child(6){display:block}

/* ── Badge สถานะ ───────────────────────────────────────── */
/* ★ ห้ามสื่อสถานะด้วยสีอย่างเดียว — ทุก badge มีข้อความกำกับเสมอ */
.badge{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap; line-height:1.5;
}
.badge--ok{background:var(--primary-fixed); color:var(--on-primary-fixed)}
.badge--wait{background:var(--secondary-container); color:var(--on-secondary-container)}
.badge--danger{background:var(--error-container); color:var(--on-error-container)}
.badge--info{background:var(--tertiary-fixed); color:var(--on-tertiary-fixed)}
.badge--mute{background:var(--surface-highest); color:var(--on-surface-variant)}

/* ── ปุ่ม · ฟอร์ม ──────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border:0; border-radius:999px;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  background:var(--primary); color:var(--on-primary);
}
.btn:hover{opacity:.92; text-decoration:none}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn--tonal{background:var(--primary-fixed); color:var(--on-primary-fixed)}
.btn--outline{background:transparent; color:var(--primary); border:1px solid var(--outline)}
.btn--text{background:transparent; color:var(--primary); padding:0 8px}
.btn--danger{background:var(--error); color:var(--on-error)}
.btn--sm{min-height:36px; padding:0 14px; font-size:13px}

.field{margin-bottom:16px}
.field label{display:block; font-size:14px; font-weight:500; margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; min-height:44px; padding:10px 12px; font:inherit; font-size:16px;
  border:1px solid var(--outline); border-radius:var(--r-sm);
  background:var(--surface-lowest); color:inherit;
}
.field__hint{font-size:12px; color:var(--on-surface-variant); margin-top:4px}
.formgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 16px}
/* ★ ช่องที่ต้องกินความกว้างทั้งแถว (เช่นช่องบันทึกช่วยจำยาว ๆ)
   ไม่มีตัวนี้ ช่องยาวจะถูกบีบให้เท่ากับช่องสั้นข้าง ๆ แล้วพิมพ์ไม่เห็นข้อความ */
.field--wide{grid-column:1 / -1}

.toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px}
.toolbar .field{margin-bottom:0}

/* ── สถานะพิเศษ ────────────────────────────────────────── */
.empty{text-align:center; padding:48px 24px; color:var(--on-surface-variant)}
.empty__title{font-weight:600; color:var(--on-surface); margin:0 0 6px}

.alert{padding:12px 16px; border-radius:var(--r-sm); margin-bottom:16px; font-size:14px}
.alert--ok{background:var(--primary-fixed); color:var(--on-primary-fixed)}
.alert--err{background:var(--error-container); color:var(--on-error-container)}
.alert--warn{background:var(--secondary-container); color:var(--on-secondary-container)}

/* ── ผังห้อง ───────────────────────────────────────────── */
.rooms{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px}
.room{
  background:var(--surface-lowest); border:1px solid var(--surface-highest);
  border-left:4px solid var(--outline);
  border-radius:var(--r-sm); padding:10px 12px; display:block; color:inherit;
}
.room:hover{box-shadow:var(--sh-2); text-decoration:none}
.room--available{border-left-color:var(--primary)}
.room--occupied{border-left-color:var(--secondary-container)}
.room--blocked{border-left-color:var(--outline); opacity:.65}
.room--maintenance{border-left-color:var(--error)}
/* ★ จองรายวัน กับ มีผู้เช่ารายเดือน ต้องแยกสีกัน — คนละงานคนละคนดูแล */
.room--booked{border-left-color:var(--tertiary)}
/* ★ ยังไม่มีแถวปฏิทินของวันนั้น = ยังขายไม่ได้ ไม่ใช่ว่าง (กฎปฏิทินห้อง ข้อ 4) */
.room--unknown{border-left-color:var(--outline); background:repeating-linear-gradient(
  135deg, var(--surface-lowest), var(--surface-lowest) 6px, var(--surface-highest) 6px, var(--surface-highest) 12px)}
/* ★★ รูปแบบการขาย (รายวัน/รายเดือน) ไม่ใช่สถานะของวันนั้น จึงบอกด้วย
   กรอบและข้อความ ไม่ใช่สี — ไม่งั้นจะไปชนกับสีที่บอกสถานะปฏิทิน */
.room--daily{border-top:2px dashed var(--tertiary); border-right:2px dashed var(--tertiary)}
.room--both{border-top:2px dashed var(--tertiary)}
.room__mode{font-weight:600; color:var(--tertiary)}

.room__no{font-weight:700; font-size:16px}
.room__meta{font-size:12px; color:var(--on-surface-variant); font-variant-numeric:tabular-nums}

.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--on-surface-variant); margin-bottom:14px}
.legend span::before{content:''; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px}
.legend .l-available::before{background:var(--primary)}
.legend .l-occupied::before{background:var(--secondary-container)}
.legend .l-blocked::before{background:var(--outline)}
.legend .l-maintenance::before{background:var(--error)}
.legend .l-booked::before{background:var(--tertiary)}
.legend .l-unknown::before{background:var(--outline)}
.legend .l-mode-monthly::before{background:var(--surface-highest)}
.legend .l-mode-daily::before{background:transparent; border:2px dashed var(--tertiary)}
.legend .l-mode-both::before{background:var(--tertiary); opacity:.5}


/* ── ปฏิทินการจองรายวัน ─────────────────────────────────── */
.cal__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.cal__head .card__title{flex:1 1 auto; text-align:center}
.cal__legend{margin:0 0 12px; font-size:12px; color:var(--on-surface-variant)}
.cal__legend span{margin-right:10px; white-space:nowrap}

.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal__dow{
  text-align:center; font-size:12px; font-weight:600; color:var(--on-surface-variant); padding:4px 0;
}
.cal__cell{
  display:flex; flex-direction:column; gap:2px; min-height:72px; padding:6px 4px;
  border:1px solid var(--surface-highest); border-radius:var(--r-sm);
  background:var(--surface-lowest); color:var(--on-surface); font-size:11px;
}
.cal__cell:hover{background:var(--surface-low); text-decoration:none}
.cal__cell--pad{background:transparent; border-color:transparent; min-height:0}
.cal__cell--today{border-color:var(--primary); border-width:2px}
/* ★ วันที่เลือกอยู่ต้องดูออกโดยไม่พึ่งสีอย่างเดียว จึงหนาขึ้นและมีเงาด้วย */
.cal__cell--picked{background:var(--primary-fixed); color:var(--on-primary-fixed); font-weight:600; box-shadow:var(--sh-2)}
.cal__day{font-size:13px; font-weight:700; font-variant-numeric:tabular-nums}
.cal__mark{white-space:nowrap; font-variant-numeric:tabular-nums}
.cal__mark--in{color:var(--primary)}
.cal__mark--out{color:var(--tertiary)}
.cal__mark--stay{color:var(--on-surface-variant)}
.cal__mark--void{color:var(--error); text-decoration:line-through}
.cal__cell--picked .cal__mark{color:inherit}
.cal__group{margin:18px 0 6px; font-size:14px; font-weight:600}
.cal__empty{margin:0 0 8px; font-size:13px; color:var(--on-surface-variant)}


/* ── Responsive ────────────────────────────────────────── */
/* < 1024px : sidebar ยุบเหลือไอคอน */
/* ★★ เดิมย่อเหลือ 72px แล้วซ่อนตัวหนังสือ เหลือแต่ไอคอน
      แต่ทุกเมนูใช้ไอคอน "•" เหมือนกันหมด = จุดกลม 15 จุดเรียงกัน เดาไม่ออกสักอัน
      จึงคงตัวหนังสือไว้ แล้วบีบความกว้าง/ตัวอักษรแทน */
@media (max-width:1023px){
  :root{--sidebar-w:196px}
  .navlink{font-size:13px; padding:9px 10px; gap:8px}
  .sidebar__group{padding:12px 10px 4px}
  .sidebar__brand{padding:14px 12px; font-size:16px}
  .content{padding:16px}
}

/* < 768px : sidebar กลายเป็นแถบล่าง + แผ่นเมนูเต็มที่ดึงขึ้นมาได้
   ★★ ของเดิมโชว์แค่ 4 ช่องแรกแล้ว `display:none` ที่เหลือทั้งหมด
      แปลว่าบนมือถือเข้าได้แค่ 4 หน้า เมนูที่เหลือ "ไม่มีทางกดถึง" เลย
      ตอนนี้ 4 ช่องแรกยังเป็นทางลัดเหมือนเดิม แต่เพิ่มปุ่ม "เมนู"
      ที่เปิดแผ่นรายการทั้งหมดขึ้นมา (ใช้ checkbox ล้วน ไม่ต้องพึ่ง JS) */
@media (max-width:767px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed; bottom:0; left:0; right:0; top:auto; height:auto; max-height:none;
    flex-direction:column; border-right:0; border-top:1px solid var(--surface-highest);
    /* ★ ไม่งั้นโดน home indicator ของ iPhone บัง */
    padding-bottom:env(safe-area-inset-bottom); z-index:10; overflow:visible;
  }
  .sidebar__brand{display:none}
  .sidebar__nav{display:flex; padding:4px; width:100%; flex:0 0 auto}
  .navlink{
    flex:1; flex-direction:column; gap:2px; font-size:11px; min-height:56px;
    justify-content:center; text-align:center; padding:6px 2px;
  }
  .navlink span:not(.ico){position:static; width:auto; height:auto; clip:auto; overflow:visible}
  .navlink__soon{display:none}
  /* ★ จุดบอก "ล่าสุด" ไม่ขึ้นบนแถบล่าง — แถบล่างเรียงเป็นคอลัมน์ จุดจะกลายเป็นบรรทัดที่สาม */
  .navlink--last::after{display:none}

  /* แถบล่าง (ยังไม่กดเปิด): เห็นเฉพาะทางลัด 4 อัน + ปุ่มเมนู */
  /* ★★★ `.navgroup` ต้องเป็น `display:contents` ไม่งั้นลิงก์ในกลุ่มจะกลายเป็น
     กล่องซ้อนอีกชั้น แล้วแถบล่างจะเรียงผิดทั้งแถบ */
  .navgroup{display:contents}
  .navgroup__t{display:none}
  /* ★ ใช้ตัวเลือกแบบลูกหลาน ไม่ใช่ `>` เพราะลิงก์อยู่ใน `.navgroup` แล้ว */
  .sidebar__nav > *, .sidebar__nav .navgroup > *{display:none}
  .sidebar__nav .navlink--quick,
  .sidebar__nav > .navlink--more{display:flex}
  /* ★★ กลุ่มที่พับไว้ต้องไม่ทำให้ทางลัดบนแถบล่างหายไป */
  .navgroup__t:not(:checked) ~ .navlink--quick{display:flex}
  .navlink--more{cursor:pointer; color:var(--primary); font-weight:600}

  /* แผ่นเมนูเต็ม (กดปุ่มเมนูแล้ว) */
  .nav-toggle:checked ~ .sidebar{
    max-height:84dvh; overflow-y:auto; border-radius:16px 16px 0 0; box-shadow:var(--sh-2);
  }
  .nav-toggle:checked ~ .sidebar .sidebar__nav{flex-direction:column; padding:8px 8px 16px}
  .nav-toggle:checked ~ .sidebar .sidebar__nav > *,
  .nav-toggle:checked ~ .sidebar .sidebar__nav .navgroup > *{display:flex}
  .nav-toggle:checked ~ .sidebar .sidebar__group{display:flex}
  .nav-toggle:checked ~ .sidebar .navgroup__t{display:none}
  .nav-toggle:checked ~ .sidebar .navlink{
    flex:0 0 auto; flex-direction:row; justify-content:flex-start; text-align:left;
    font-size:15px; min-height:48px; gap:10px; padding:11px 12px;
  }
  .nav-toggle:checked ~ .sidebar .navlink__soon{display:inline-block}
  .nav-toggle:checked ~ .nav-scrim{display:block}

  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .topbar{padding:12px 16px}
  .topbar h1{font-size:18px}
  .topbar__right{gap:8px}
}

/* ตัวสลับแผ่นเมนูมือถือ — ไม่ใช้ display:none เพราะต้อง Tab ถึงและกด Space ได้ */
.nav-toggle{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.nav-toggle:focus-visible ~ .sidebar .navlink--more{outline:3px solid var(--primary); outline-offset:-3px}
.nav-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9}
@media (min-width:768px){
  .nav-toggle,.nav-scrim,.navlink--more{display:none}
}

/* พิมพ์ใบแจ้งหนี้ */
@media print{
  .sidebar,.topbar,.btn,.toolbar{display:none!important}
  .app{grid-template-columns:1fr}
  .card{box-shadow:none; border:1px solid #ccc}
}

/* ── ตารางติ๊กเลือก (เปิดโมดูลตอนสร้างองค์กร · สวิตช์ค่าตั้งระบบ) ── */
.checkgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:6px}
.checkgrid__item{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px;
  border:1px solid var(--surface-highest); border-radius:var(--r-sm); font-size:14px; cursor:pointer;
}
.checkgrid__item--fixed{opacity:.6; cursor:default}
.checkgrid__item input{width:18px; height:18px}

/* ── ตารางห้องว่างรายวันแยกตามประเภท ────────────────────── */
.avail th,.avail td{padding:6px 8px; text-align:center; font-variant-numeric:tabular-nums}
.avail__type{text-align:left!important; position:sticky; left:0; background:var(--surface-lowest); min-width:150px}
.avail__weekend{color:var(--tertiary)}
.avail__cell{min-width:52px}
/* ★ ห้ามสื่อด้วยสีอย่างเดียว — ตัวเลขที่เหลืออยู่ในช่องเสมอ สีเป็นแค่ตัวช่วยกวาดตา */
.avail__cell--low{background:var(--secondary-container)}
.avail__cell--none{background:var(--error-container); color:var(--on-error-container)}
.avail__left{display:block; font-size:16px; font-weight:700}
.avail__detail{display:block; font-size:10px; color:var(--on-surface-variant); min-height:12px}
.avail__cell--none .avail__detail{color:inherit; opacity:.8}

/* ★★★ ห้องขาด (-N) — คืนที่มีแขกแต่ไม่มีห้องรองรับ (คำสั่ง 2026-10-07)
   ★★ ต้องต่างจาก "ขายหมดพอดี" (0) ให้เห็นชัด ทั้งสีและตัวเลขที่ติดลบ
      เพราะ 0 คือข่าวดี แต่ -1 คือมีแขกที่ต้องโทรหาวันนี้ */
.avail__cell--short{background:var(--error); color:var(--on-error)}
.avail__cell--short .avail__detail{color:inherit; opacity:.9}
.avail__cell--short .avail__link:hover{background:rgba(255,255,255,.18)}

/* ★★ คลิกช่องไหนก็ได้เพื่อแก้จำนวนห้องเปิดจองของวันนั้น (คำขอ 2026-10-07)
   ★ เป้าแตะต้องเต็มช่อง ไม่ใช่แค่ตัวเลข — บนมือถือเล็งตัวเลขเล็ก ๆ ไม่ไหว */
.avail__link{display:block; margin:-6px -8px; padding:6px 8px; color:inherit; text-decoration:none}
.avail__link:hover{background:color-mix(in srgb, var(--primary) 12%, transparent)}
.avail__link:focus-visible{outline:2px solid var(--primary); outline-offset:-2px}
.avail__cell--editing{outline:2px solid var(--primary); outline-offset:-2px}

/* ── สวิตช์เปิด/ปิด ────────────────────────────────────────────
   ★★★ ใช้ checkbox จริงเสมอ ไม่ใช่ div ที่ผูก JS — คนที่ใช้ keyboard
       และ screen reader ต้องใช้ได้ และฟอร์มต้องส่งค่าได้แม้ JS พัง
   ★★ เป้าแตะ ≥ 44px ตามกฎหน้าจอของโปรเจกต์ */
.switch{display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer}
.switch input{position:absolute; opacity:0; width:44px; height:26px; margin:0; cursor:pointer}
.switch__track{position:relative; flex:none; width:44px; height:26px; border-radius:13px;
  background:var(--surface-high); box-shadow:inset 0 0 0 2px var(--outline);
  transition:background .15s, box-shadow .15s}
.switch__dot{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--outline); transition:transform .15s, background .15s}
.switch input:checked + .switch__track{background:var(--primary); box-shadow:inset 0 0 0 2px var(--primary)}
.switch input:checked + .switch__track .switch__dot{transform:translateX(18px); background:var(--on-primary)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--primary); outline-offset:2px}
.switch__text{font-size:13px; color:var(--on-surface-variant)}


/* ── หน้าทางเข้าและลิงก์ (/admin/entry) ────────────────────────
   ★ ช่องลิงก์ต้องเลือกทั้งเส้นได้ด้วยคลิกเดียว และคัดลอกด้วยปุ่ม
     ลิงก์ LIFF พิมพ์เองผิดง่ายมากและผิดแล้วไม่มีข้อความบอกว่าผิดตรงไหน */
.linkrow{margin:10px 0}
.linkrow__label{font-size:13px; font-weight:600; margin-bottom:4px}
.linkrow__hint{display:block; font-weight:400; font-size:11px; color:var(--on-surface-variant)}
.linkrow__box{display:flex; gap:6px; align-items:center}
.linkrow__input{
  flex:1 1 auto; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; background:var(--surface-variant);
}
.entrybox{
  border:1px solid var(--outline); border-radius:12px;
  padding:12px; margin:10px 0;
}
.entrybox__head{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px}

@media (max-width:520px){
  /* ★ จอแคบ: ปุ่มคัดลอกลงบรรทัดใหม่ ไม่บีบช่องลิงก์จนอ่านไม่ออก */
  .linkrow__box{flex-wrap:wrap}
  .linkrow__input{flex:1 1 100%}
}

/* ============================================================
   ติ๊กเลือกหลายอย่าง — ใช้ที่ "โมดูลที่แสดงในแอปนี้" (/admin/liff)
   ★ เป้าแตะสูง 44px ตามกฎหน้าจอ เพราะหน้าหลังบ้านเปิดบนมือถือด้วย
   ============================================================ */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.chip{display:inline-flex; align-items:center; gap:8px; min-height:44px;
      padding:0 14px; border:1px solid var(--outline); border-radius:999px;
      background:var(--surface-lowest); cursor:pointer; font-size:14px}
.chip:hover{background:var(--surface-low)}
.chip input{width:18px; height:18px; min-height:0; margin:0; accent-color:var(--primary)}
/* ★ ติ๊กแล้วต้องเห็นชัดจากระยะไกล ไม่ใช่ดูที่ช่องสี่เหลี่ยมเล็ก ๆ อย่างเดียว */
.chip:has(input:checked),
/* ★ ป้ายที่ติดอยู่กับห้องแชทนี้ — ใช้หน้าตาเดียวกับ chip ที่ติ๊กแล้ว */
.chip--on{border-color:var(--primary); background:var(--primary-fixed);
          color:var(--on-primary-fixed); font-weight:600}

/* ★ ฟอร์มสั้น ๆ ที่อยู่ในช่องตาราง (เช่น "จับคู่ผู้รับ" ในหน้าพัสดุ)
   ★★ ไม่ใช้ .formgrid เพราะอันนั้นกินความกว้างเต็มการ์ด แล้วตารางจะแตก */
.inlineform{display:flex; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap}
.inlineform input{min-height:36px; padding:4px 8px; font-size:13px}

/* ============================================================
   กล่องข้อความ (/admin/chat · /hq/chat) — สามคอลัมน์
   ★★ รายชื่อบทสนทนา | บทสนทนา | กรอบบุคคล
   ★ จอแคบพับเหลือคอลัมน์เดียวเรียงลงมา — หน้าหลังบ้านเปิดบนมือถือด้วย
   ============================================================ */
.inbox{display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr) minmax(220px,280px);
       gap:14px; align-items:start}
.inbox__col{background:var(--surface-lowest); border-radius:var(--r-md); box-shadow:var(--sh-1);
            padding:14px; min-width:0}
.inbox__head{font-size:14px; font-weight:700; margin:0 0 2px}
.inbox__hint{font-size:12px; color:var(--on-surface-variant); margin:0 0 10px}

/* ช่องค้นหาในกล่องข้อความ */
.chatsearch{display:flex; gap:6px; align-items:center; margin-bottom:10px}
.chatsearch input{flex:1; min-width:0; min-height:36px; padding:4px 10px; font-size:13px}
/* ★ ป้ายกำกับที่มีไว้ให้โปรแกรมอ่านหน้าจอ ไม่ได้แสดงบนจอ */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* แท็บช่องทาง — ทั้งหมด / LINE / Facebook / Instagram */
.chtabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.chtab{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px;
       border:1px solid var(--outline); border-radius:999px; font-size:13px;
       color:var(--on-surface-variant); text-decoration:none; background:var(--surface-lowest)}
.chtab:hover{background:var(--surface-low); text-decoration:none}
.chtab--on{border-color:var(--primary); background:var(--primary-fixed);
           color:var(--on-primary-fixed); font-weight:600}
/* ★ ป้ายผู้ให้บริการกำกับชื่อช่องทาง — ชื่อช่องทางเป็นชื่อที่องค์กรตั้งเอง
   อ่านแล้วอาจไม่รู้ว่าเป็น LINE หรือ Facebook */
.chtab__mark{font-size:10px; font-weight:700; letter-spacing:.3px; opacity:.7}

/* ★★★ รายชื่อบทสนทนาเลื่อนแยกจากหน้า (คำขอเจ้าของระบบ 2026-10-13)
   ★★ เดิมกล่องยาวตามจำนวนห้อง ⇒ ห้องเยอะ ๆ ต้องเลื่อนลงไปไกลมากกว่าจะเห็นบทสนทนา
      โดยเฉพาะบนมือถือที่คอลัมน์เรียงลงมา
   ★ `overscroll-behavior:contain` — เลื่อนสุดกรอบแล้วไม่ลากทั้งหน้าตามไปด้วย
   ★ `position:relative` ให้ JS วัดตำแหน่งห้องที่เลือกเทียบกับกรอบนี้ได้ตรง */
.thrlist{position:relative; overflow-y:auto; overscroll-behavior:contain;
         min-height:220px; max-height:calc(100vh - 300px); max-height:calc(100dvh - 300px);
         margin:0 -6px; padding:0 6px}
/* ★ ทางกลับไปรายชื่อ — มีความหมายเฉพาะจอแคบที่คอลัมน์เรียงลงมา */
.inbox__back{display:none}

/* หนึ่งบรรทัดในรายชื่อบทสนทนา */
.thr{display:flex; gap:10px; align-items:flex-start; min-height:56px; padding:8px;
     border-radius:12px; text-decoration:none; color:inherit}
.thr:hover{background:var(--surface-low); text-decoration:none}
.thr--on{background:var(--primary-fixed); color:var(--on-primary-fixed)}
.thr__body{min-width:0; flex:1}
.thr__name{font-weight:600; font-size:14px; display:flex; gap:6px; align-items:center}
/* ★ ตัดบรรทัดเดียวด้วย ellipsis — ชื่อ LINE ยาวเกินกรอบได้เสมอ */
.thr__name span, .thr__last, .thr__meta{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thr__last{font-size:13px; color:var(--on-surface-variant)}
.thr--on .thr__last, .thr--on .thr__meta{color:inherit; opacity:.85}
.thr__meta{font-size:11px; color:var(--on-surface-variant); font-variant-numeric:tabular-nums}

/* รูปโปรไฟล์ — ★ ไม่มีรูปให้ใช้ตัวอักษรแรกของชื่อ ไม่ใช่ช่องว่าง */
.ava{width:40px; height:40px; border-radius:50%; flex:0 0 40px; object-fit:cover;
     background:var(--surface-highest); display:inline-flex; align-items:center;
     justify-content:center; font-weight:700; color:var(--on-surface-variant); font-size:15px}
.ava--lg{width:64px; height:64px; flex-basis:64px; font-size:24px}
.ava--sm{width:28px; height:28px; flex-basis:28px; font-size:12px}
.ava__wrap{position:relative; flex:0 0 auto}
/* ป้ายช่องทางมุมล่างขวาของรูป แบบเดียวกับกล่องข้อความของ Meta */
.ava__ch{position:absolute; right:-2px; bottom:-2px; width:17px; height:17px; border-radius:50%;
         font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center;
         border:2px solid var(--surface-lowest); background:var(--surface-highest);
         color:var(--on-surface-variant)}

/* ฟองข้อความ
   ★★★ `max-width` ต้องอยู่ที่ `.bub__body` (ลูกโดยตรงของ flex container)
       **ห้ามอยู่ที่ `.bub__txt`** — เปอร์เซ็นต์ของ `.bub__txt` จะไปเทียบกับ
       กล่องพ่อที่หดตามเนื้อหา (shrink-to-fit) ผลคือความกว้างยุบจนเหลือ
       ตัวอักษรละบรรทัด **ข้อความไทยจะเรียงลงมาในแนวตั้ง**
       (เกิดจริง 2026-09-24 — เจ้าของระบบแจ้งว่า "เรียงตัวแบบแปลก ๆ") */
.bub{display:flex; gap:8px; align-items:flex-end; margin-bottom:10px; max-width:100%}
.bub--out{flex-direction:row-reverse}
.bub__body{min-width:0; max-width:min(72%,620px)}
.bub__txt{padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.7;
          background:var(--surface-low); color:var(--on-surface);
          /* ★ `anywhere` ตัดเฉพาะคำยาวผิดปกติ (ลิงก์) ไม่ไปตัดคำไทยกลางคำ */
          overflow-wrap:anywhere}
.bub--out .bub__txt{background:var(--primary-fixed); color:var(--on-primary-fixed)}
/* ★★ ชื่อคนที่พูดในกลุ่ม — เล็กกว่าเนื้อความ แต่ต้องอ่านออกจริง (11px คือขั้นต่ำ)
   ★ อยู่เหนือฟอง ไม่ใช่ในฟอง เพื่อไม่ให้ปนกับข้อความที่ลูกค้าพิมพ์ */
.bub__who{font-size:11px; color:var(--on-surface-variant); margin:0 0 2px 6px;
          line-height:1.6; overflow-wrap:anywhere}
.bub__meta{font-size:11px; color:var(--on-surface-variant); font-variant-numeric:tabular-nums;
           margin-top:2px}
.bub--out .bub__meta{text-align:right}
.bub__img{display:block; max-width:100%; border-radius:14px}
/* ★ เครื่องเล่นเสียงกว้างพอกดปุ่มได้บนมือถือ แต่ไม่ล้นฟอง */
.bub__media{display:block; width:min(280px,100%)}
/* ★ สูงตามจอ ไม่ใช่ 56vh ตายตัว — จอสูง ๆ จะได้เห็นบทสนทนามากขึ้น */
.chatlog{display:flex; flex-direction:column; margin-bottom:14px;
         min-height:240px; max-height:calc(100dvh - 430px); overflow-y:auto;
         overscroll-behavior:contain; scroll-behavior:smooth; padding-right:4px}
/* ★★ เส้นคั่นวันที่ — ไม่งั้นข้อความเมื่อวานกับวันนี้ปนกันจนอ่านผิด */
.bub__day{align-self:center; margin:8px 0 10px; padding:2px 12px; border-radius:999px;
          background:var(--surface-highest); color:var(--on-surface-variant); font-size:11px}

/* กรอบบุคคล */
.person{text-align:center}
.person__name{font-weight:700; font-size:15px; margin:8px 0 2px}
.person__sub{font-size:12px; color:var(--on-surface-variant); margin:0}
.person__rows{margin-top:14px; text-align:left; font-size:13px}
.person__row{display:flex; justify-content:space-between; gap:10px; padding:7px 0;
             border-top:1px solid var(--outline)}
.person__row span:last-child{color:var(--on-surface-variant); text-align:right;
                             font-variant-numeric:tabular-nums}

/* ★ จอกว้างมาก — ขยายคอลัมน์ข้าง ไม่ใช่ปล่อยให้คอลัมน์กลางกว้างจนตาไล่ไม่ทัน */
@media (min-width:1600px){
  .inbox{grid-template-columns:minmax(280px,360px) minmax(0,1fr) minmax(280px,340px); gap:18px}
}

@media (max-width:1100px){
  /* ★ กรอบบุคคลลงไปอยู่ใต้บทสนทนา ไม่ใช่หายไป — เป็นที่เดียวที่บอกว่าคุยกับใคร */
  .inbox{grid-template-columns:minmax(220px,280px) minmax(0,1fr)}
  .inbox__col--person{grid-column:1 / -1}
}
@media (max-width:760px){
  .inbox{grid-template-columns:1fr}
  .inbox__col--person{grid-column:auto}
  .bub__body{max-width:86%}
  /* ★★ มือถือ: รายชื่อไม่เกินครึ่งจอ · เปิดห้องอยู่ให้เตี้ยลงอีก บทสนทนาจะโผล่เร็ว
     ★ ยังเลื่อนดูห้องอื่นในกรอบได้ตามปกติ */
  .thrlist{min-height:180px; max-height:min(45vh, 420px); max-height:min(45dvh, 420px)}
  .inbox--open .thrlist{min-height:140px; max-height:min(28vh, 260px); max-height:min(28dvh, 260px)}
  /* ★ JS พาเลื่อนมาที่บทสนทนา — เว้นที่ให้แถบหัวที่ติดด้านบน (sticky) ไม่บังหัวห้อง */
  .inbox__col--conv{scroll-margin-top:72px}
  .inbox__back{display:inline-flex; align-items:center; min-height:44px; margin:-6px 0 6px;
               font-size:13px; text-decoration:none}
  #inbox-list{scroll-margin-top:72px}
}