:root{
  --bg:#f5f4f0; --card:#fff; --ink:#23201a; --muted:#7a7266;
  --line:#e3ded4; --accent:#b5651d; --accent2:#7a4a12;
  --db1:#b5651d; --db2:#557a46; --ok:#1f8a4c;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Sarabun","Noto Sans Thai",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5}

[x-cloak]{display:none!important}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.5rem 1rem;
  background:var(--accent);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{display:block;border-radius:8px}
.topbar-right{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
/* ชื่อโครงการที่กำลังแสดง (เลือกได้ในเมนู) */
.topbar-project{flex:1;min-width:0;font-weight:700;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ปุ่ม hamburger */
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:9px 8px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);border-radius:8px;cursor:pointer}
.hamburger:hover{background:rgba(255,255,255,.22)}
.hamburger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px}

/* เมนู dropdown */
.menu-backdrop{position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.25)}
.menu{position:absolute;top:calc(100% + .4rem);right:1rem;z-index:30;width:min(320px,calc(100vw - 2rem));
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);padding:.4rem;overflow:hidden}
.menu-user{font-weight:700;color:var(--accent2);padding:.7rem .8rem;
  border-bottom:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-project{display:flex;flex-direction:column;gap:.25rem;padding:.7rem .8rem;
  border-bottom:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.menu-project select{font:inherit;font-size:.95rem;color:var(--ink);padding:.45rem .5rem;
  border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer}
.menu-project select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* เมนูย่อย (ตามสิทธิ์) ใต้ตัวเลือกโครงการ */
.menu-sub{list-style:none;margin:0;padding:.35rem 0;border-bottom:1px solid var(--line)}
.menu-link{display:block;padding:.55rem .8rem;margin:0 .2rem;border-radius:8px;
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}
.menu-link:hover{background:#faf6ee}
.menu-link.active{background:#fdf2df;color:var(--accent2);box-shadow:inset 3px 0 0 var(--accent)}
.menu-role{display:block;font-weight:400;font-size:.78rem;color:var(--muted);white-space:normal}
.menu-gmail{display:block;margin:.4rem .2rem;padding:.55rem .7rem;border-radius:9px;background:#e8f0fe;color:#1a56c4;
  text-decoration:none;font-weight:700;font-size:.9rem;text-align:center}
.menu-gmail:hover{background:#d2e3fc}
.menu-rgt{display:block;margin:.4rem .2rem;padding:.55rem .7rem;border-radius:9px;border:1px solid var(--accent);
  color:var(--accent);text-decoration:none;font-weight:700;font-size:.9rem;text-align:center}
.menu-rgt:hover{background:var(--accent);color:#fff}
.menu-elevate{margin:.5rem .4rem .2rem;font-size:.82rem;color:var(--muted);line-height:1.45}
.menu-elevate strong{color:var(--ink)}
.menu-elevate-note{margin:.4rem .2rem;padding:.55rem .7rem;border-radius:9px;background:#fdf2df;
  color:var(--accent2);font-size:.82rem;line-height:1.45}
.menu-about{padding:.8rem;font-size:.82rem;color:var(--muted);line-height:1.5}
.menu-about p{margin:0 0 .5rem}
.menu-about-title{color:var(--muted);font-weight:400;font-size:.78rem}
.menu-copyright{margin:0;font-size:.75rem}
.menu-logout{display:block;text-align:center;margin:.2rem;padding:.6rem;
  color:#fff;background:var(--accent);text-decoration:none;border-radius:9px;font-weight:700}
.menu-logout:hover{background:var(--accent2)}

/* หน้า login */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:2rem 1.8rem;max-width:380px;width:100%;text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.08)}
.login-logo{width:64px;height:64px;margin:0 auto .9rem;background:#a5673a;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.4rem;
  border-radius:12px;letter-spacing:1px}
.login-card h1{font-size:1.15rem;margin:0 0 .2rem}
.login-sub{margin:0 0 1.2rem;color:var(--muted);font-size:.9rem}
.login-card form{display:flex;flex-direction:column;gap:.7rem}
.login-card input{font:inherit;font-size:1.1rem;text-align:center;letter-spacing:2px;
  padding:.7rem;border:1px solid var(--line);border-radius:9px}
.login-card button{font:inherit;font-size:1rem;font-weight:700;color:#fff;background:var(--accent);
  border:0;border-radius:9px;padding:.7rem;cursor:pointer}
.login-card button:hover{background:var(--accent2)}
.login-error{background:#fdecea;color:#a02b20;border:1px solid #f5c6c2;border-radius:8px;
  padding:.55rem .7rem;font-size:.88rem;margin-bottom:.9rem}
.login-skip{display:inline-block;margin-top:1rem;color:var(--accent2);font-size:.9rem}
.login-note{margin:1rem 0 0;color:var(--muted);font-size:.78rem}
.login-note a{color:var(--muted)}
.privacy{max-width:640px;text-align:left;line-height:1.6;font-size:.92rem}
.privacy .login-logo,.privacy h1,.privacy .login-sub{text-align:center}
.privacy h2{font-size:1rem;margin:1.2rem 0 .3rem}
.privacy p,.privacy ul{margin:0 0 .5rem}
.privacy a{color:var(--accent2)}
.toggle{background:rgba(255,255,255,.18);border:0;color:#fff;
  padding:.4rem .8rem;border-radius:6px;font:inherit;cursor:pointer}
.toggle:hover{background:rgba(255,255,255,.28)}

main{max-width:1200px;margin:0 auto;padding:1rem}

/* ฟอร์มค้นหา = ช่องค้นหา (บนสุด แสดงเสมอ) + แผงตัวกรอง */
.searchform{position:sticky;top:56px;z-index:10;background:var(--card);
  border:1px solid var(--line);border-radius:10px;margin-bottom:1rem}
.searchbar{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:.3rem .8rem;padding:.8rem .8rem .7rem}
.searchbar label{display:flex;flex-direction:column;flex:1 1 320px;font-size:.78rem;
  font-weight:700;color:var(--accent2);gap:.25rem}
.searchbar input{font:inherit;font-size:1rem;color:var(--ink);width:100%;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.searchbar input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.searchhint{font-size:.74rem;color:var(--muted);padding-bottom:.6rem}
.searchbar .htmx-indicator{position:absolute;top:.8rem;right:.9rem}
.filters{display:flex;flex-wrap:wrap;gap:.6rem .8rem;align-items:flex-end;
  border-top:1px solid var(--line);padding:.8rem}
.filters.closed{display:none}
.filters label{display:flex;flex-direction:column;font-size:.78rem;
  color:var(--muted);gap:.25rem}
.filters select,.filters input{font:inherit;font-size:.92rem;color:var(--ink);
  padding:.4rem .5rem;border:1px solid var(--line);border-radius:7px;
  background:#fff;min-width:120px;max-width:220px}
.filters select:disabled{background:#f0eee9;color:#aaa}
.reset{align-self:center;font-size:.82rem;color:var(--accent2);text-decoration:none;
  border:1px solid var(--line);padding:.4rem .7rem;border-radius:7px}
.reset:hover{background:#faf6ee}
.htmx-indicator{opacity:0;transition:opacity .2s;font-size:.8rem;color:var(--accent)}
.htmx-request .htmx-indicator,.htmx-indicator.htmx-request{opacity:1}

/* ตัวกรองช่วงระยะทางจากวัดพระธรรมกาย (ท้ายแถวตัวกรอง): ป้าย + ช่องตัวเลขสองข้าง แล้วแถบเลื่อนสองหัว = 2 บรรทัด */
.distpick{display:flex;flex-direction:column;gap:.3rem;min-width:300px;max-width:340px}
.distpick-label{font-size:.78rem;color:var(--muted);white-space:nowrap}
.distpick-row{display:flex;align-items:center;gap:.3rem}
.distpick-word{font-size:.85rem;color:var(--muted);white-space:nowrap}
.filters .distpick-num{width:3.9rem;min-width:0;text-align:right;padding-left:.3rem;padding-right:.3rem}
.distpick-clear{font:inherit;font-size:.78rem;color:var(--accent2);background:none;border:0;
  cursor:pointer;padding:.1rem .25rem;text-decoration:underline}

/* แถบเลื่อนสองหัว = range สองอันซ้อนกัน: ตัวแถบไม่รับเมาส์ เฉพาะ "หัว" เท่านั้นที่จับได้
   (ไม่มี input แบบสองหัวใน HTML) — ช่วงที่เลือกวาดด้วย --lo/--hi บนรางข้างหลัง */
.distpick-range{position:relative;height:1.2rem}
.distpick-rail{position:absolute;top:50%;left:0;right:0;height:4px;margin-top:-2px;
  border-radius:2px;background:var(--line)}
.distpick-rail::after{content:"";position:absolute;top:0;bottom:0;border-radius:2px;
  left:var(--lo,0%);right:calc(100% - var(--hi,100%));background:var(--accent)}
/* ล้างกรอบ/ความกว้างของ ".filters input" ทิ้ง — range สองอันต้องทับกันพอดีและกว้างเท่ารางข้างหลัง */
.distpick-range input{position:absolute;top:0;left:0;width:100%;min-width:0;max-width:none;
  height:1.2rem;margin:0;padding:0;border:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none}
.distpick-range input:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.distpick-range input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}
.distpick-range input::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}

/* (i) + คำอธิบายลอย — CSS ล้วน: กางเมื่อ hover หรือโฟกัสด้วยคีย์บอร์ด/แตะ
   ฟองกางลง "ข้างล่าง" เสมอ เพราะหัวตารางตรึงอยู่ขอบบนของกล่องที่เลื่อนได้ (กางขึ้นจะถูกตัด) */
.hint{position:relative;display:inline-flex;align-items:center;vertical-align:middle;cursor:help}
.hint-i{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--muted);
  font:italic 700 .68rem/1 "Sarabun",system-ui,sans-serif}
.hint:hover .hint-i,.hint:focus .hint-i{border-color:var(--accent);color:var(--accent2)}
.hint-bubble{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:40;width:max-content;max-width:210px;padding:.35rem .5rem;border-radius:6px;
  background:var(--ink);color:#fff;font-size:.75rem;font-weight:400;line-height:1.4;
  white-space:normal;text-align:left;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hint:hover .hint-bubble,.hint:focus .hint-bubble{display:block}

/* ตัวกรองวันในสัปดาห์ × ช่วงเวลา: ปุ่มสรุป + แผงตารางติ๊ก */
.slotpick,.viewpick{position:relative;display:flex;flex-direction:column;gap:.25rem}
.slotpick-label,.viewpick-label{font-size:.78rem;color:var(--muted)}
.slotpick-btn,.viewpick-btn{font:inherit;font-size:.92rem;color:var(--ink);text-align:left;cursor:pointer;
  padding:.4rem 1.6rem .4rem .5rem;border:1px solid var(--line);border-radius:7px;min-width:150px;
  max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right .55rem center}
.slotpick-btn.active,.viewpick-btn.active{border-color:var(--accent);background-color:#fdf2df;color:var(--accent2);font-weight:700}
.slotpick-panel,.viewpick-panel{position:absolute;top:100%;left:0;z-index:20;margin-top:.3rem;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;min-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.slotgrid{width:100%;border-collapse:collapse;font-size:.9rem}
.slotgrid th,.slotgrid td{padding:0;border-bottom:1px solid var(--line);text-align:center}
.slotgrid tbody tr:last-child th,.slotgrid tbody tr:last-child td{border-bottom:0}
.slotgrid thead th{font-size:.8rem;color:var(--accent2);padding:.2rem .6rem .35rem;line-height:1.2}
.slotgrid thead th small{display:block;white-space:nowrap;font-weight:400;font-size:.7rem;color:var(--muted)}
.slotgrid thead th:first-child,.slotgrid tbody th{text-align:left}
.slotgrid tbody tr:hover{background:#faf6ee}
.filters .slotgrid label{flex-direction:row;align-items:center;gap:.45rem;cursor:pointer;
  font-size:.9rem;color:var(--ink);padding:.35rem .6rem;min-height:36px;justify-content:center}
.filters .slotgrid tbody th label{justify-content:flex-start;font-weight:600}
.filters .slotgrid input{min-width:0;width:18px;height:18px;margin:0;padding:0;accent-color:var(--accent);cursor:pointer}
.slotpick-note{margin:.4rem 0 .5rem;font-size:.74rem;color:var(--muted)}
.slotpick-actions{display:flex;flex-wrap:wrap;gap:.35rem}
.slotpick-actions button{font:inherit;font-size:.8rem;cursor:pointer;color:var(--accent2);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem}
.slotpick-actions button:hover{background:#faf6ee}
.slotpick-actions .done{margin-left:auto;background:var(--accent);border-color:var(--accent);color:#fff;border-radius:7px}

/* สลับรูปแบบแสดงผล (รูปภาพ/ตาราง) */
.viewtoggle{display:flex;align-self:center;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#fff}
.viewtoggle .seg{margin:0;cursor:pointer}
.viewtoggle .seg input{position:absolute;opacity:0;width:0;height:0}
.viewtoggle .seg span{display:block;padding:.42rem .8rem;font-size:.85rem;
  color:var(--accent2);user-select:none}
.viewtoggle .seg+.seg span{border-left:1px solid var(--line)}
.viewtoggle .seg input:checked+span{background:var(--accent);color:#fff}

.summary{margin:.2rem 0 .8rem;color:var(--muted);font-size:.9rem}
.summary strong{color:var(--accent2);font-size:1.05rem}

/* ตาราง: กล่องเลื่อนเอง (ทั้งแนวตั้ง/แนวนอน) สูงพอดีจอใต้แถบบน (56px) + ฟอร์มค้นหา (--form-h วัดด้วย JS)
   หัวตารางตรึงขอบบนกล่อง, คอลัมน์ที่ปักหมุด (.pin) ตรึงซ้าย — ระยะ left คำนวณใน cols.js */
.tablewrap{overflow:auto;max-height:max(320px,calc(100vh - 56px - var(--form-h, 0px) - 4.5rem));
  border:1px solid var(--line);border-radius:10px;background:var(--card)}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
.table th,.table td{padding:.55rem .7rem;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line)}
.table thead th{position:sticky;top:0;background:#efe7d9;color:var(--accent2);
  font-weight:700;white-space:nowrap;z-index:2;cursor:grab}
.table .pin{position:sticky;left:0;z-index:1;background:var(--card)}
.table thead th.pin{z-index:3;background:#e8dcc6}
.table .pin-last{box-shadow:inset -2px 0 0 #d8ccb6}
.table tbody tr:hover td.pin{background:#faf6ee}
.table th.dragging{opacity:.45}
.table th.drop-before{box-shadow:inset 3px 0 0 var(--accent)}
.table th.drop-after{box-shadow:inset -3px 0 0 var(--accent)}
.table tbody tr:hover{background:#faf6ee}
.sortbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.sortbtn:hover{text-decoration:underline}
.sortbtn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:3px}
.sortbtn .arrow{font-size:.75rem;opacity:.35}
.th-sort[aria-sort="ascending"] .arrow,.th-sort[aria-sort="descending"] .arrow{opacity:1}
.table tbody tr:last-child td{border-bottom:0}
.table .th-thumb{width:88px} .table .th-monk{text-align:center}
.tcell-thumb a{display:block;width:80px;height:56px}
.tcell-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.tcell-thumb .noimg-sm{color:#b0a692;font-size:.78rem}
.tcell-name{font-weight:700;min-width:150px}
.tcell-monk{text-align:center;font-weight:700;color:var(--accent2)}
.tcell-loc{color:var(--ink);min-width:160px}
.tcell-date{white-space:nowrap;min-width:120px}
.tcell-date .t{display:block;color:var(--muted);font-size:.82rem}
.tcell-date .nodate{color:#b0a692}
.tcell-date .dmk{display:block;white-space:normal;font-size:.82rem}
.tcell-unit .special{font-weight:700;color:var(--accent2);
  background:#fdf2df;padding:0 .35rem;border-radius:4px}
.tcell-dist{white-space:nowrap}
.tcell-dist .nodate{color:#b0a692}
.table .th-host,.tcell-host{text-align:center;white-space:nowrap}
.card .host,.lb-info-box .host{font-size:.85rem;color:var(--ok)}
.card .host .check,.tcell-host .check{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--ok);color:#fff;font-weight:700}
.lb-info-box .host .check{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--ok);color:#fff;font-weight:700}
.card .host .check,.lb-info-box .host .check{width:1.1rem;height:1.1rem;font-size:.7rem;vertical-align:middle}
.table .empty{text-align:center;color:var(--muted);padding:2rem}
.tcell-text{min-width:90px}
.tcell-contact{min-width:150px;line-height:1.35}
.tcell-contact .c-name{display:block}
.c-tel{color:var(--accent2);white-space:nowrap;text-decoration:none;font-size:.85rem}
.c-tel:hover{text-decoration:underline}
.card .kv,.lb-info-box .kv{font-size:.85rem}

/* ข้างจำนวนวัด: เฟือง ⚙ = ตั้งค่าคอลัมน์ของตาราง (ย้าย/แสดง/ปักหมุด) */
.summary-bar{display:flex;align-items:center;gap:.6rem;margin:.2rem 0 .8rem;position:relative;z-index:5}
.summary-bar .summary{margin:0}
.gear{position:relative}
.gear-btn{font:inherit;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--accent2);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.25rem .45rem}
.gear-btn:hover,.gear-btn[aria-expanded="true"]{background:#fdf2df;border-color:var(--accent)}
.gear-panel{position:absolute;left:0;top:calc(100% + .3rem);z-index:25;width:min(340px,calc(100vw - 2rem));
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;
  box-shadow:0 8px 24px rgba(0,0,0,.14);color:var(--ink)}
.viewpick-title{margin:0 0 .4rem;font-weight:700;font-size:.85rem;color:var(--accent2)}
.viewpick-title small{display:block;font-weight:400;font-size:.72rem;color:var(--muted)}
.gear-list,.viewpick-list{list-style:none;margin:0 0 .5rem;padding:0;max-height:min(60vh,460px);overflow-y:auto}
.gear-list li{display:flex;align-items:center;gap:.3rem;padding:.2rem .2rem;border-bottom:1px solid var(--line);
  background:var(--card);cursor:grab}
.gear-list li:last-child{border-bottom:0}
.gear-list li.pinned{background:#fdf6ea}
.gear-list li.off label span{color:var(--muted)}
.gear-list li.dragging{opacity:.45}
.gear-list li.drop-before{box-shadow:inset 0 3px 0 var(--accent)}
.gear-list li.drop-after{box-shadow:inset 0 -3px 0 var(--accent)}
.gear-handle{color:#b0a692;font-size:1rem;width:1rem;text-align:center;user-select:none}
.gear-list label,.viewpick-list label{flex:1;display:flex;align-items:center;gap:.45rem;min-height:32px;
  font-size:.88rem;color:var(--ink);cursor:pointer}
.gear-list input,.filters .viewpick-list input{width:17px;height:17px;min-width:0;margin:0;padding:0;accent-color:var(--accent);cursor:pointer}
.gear-pin,.gear-move{font:inherit;font-size:.78rem;cursor:pointer;background:none;border:1px solid transparent;
  border-radius:6px;padding:.15rem .3rem;color:var(--muted)}
.gear-pin{filter:grayscale(1);opacity:.45}
.gear-pin.on{filter:none;opacity:1;border-color:var(--accent);background:#fdf2df}
.gear-pin:hover,.gear-move:hover:not(:disabled){background:#faf6ee;border-color:var(--line);opacity:1}
.gear-move:disabled{opacity:.25;cursor:default}

/* แผงตัวกรอง: เพิ่ม/ลด การแสดงผล (ใช้หน้าตาเดียวกับตัวกรองวัน/ช่วงเวลา) */
/* แผงยาวกว่าที่เหลือในจอ (ฟอร์มค้นหา sticky → เลื่อนหน้าไม่ช่วย): fitPanel() จำกัดความสูง แล้วเลื่อนในแผงแทน */
.viewpick-panel{min-width:260px;overflow-y:auto;overscroll-behavior:contain}
.viewpick-panel .viewpick-list{max-height:none;overflow:visible}
.viewpick-list li{border-bottom:1px solid var(--line)}
.viewpick-list li:last-child{border-bottom:0}
.filters .viewpick-list label{flex-direction:row;padding:.1rem .2rem;font-size:.88rem;color:var(--ink)}

/* แผงตัวกรองเลือกหลายค่า (ชื่อที่จอง): ช่องค้นหาตรึงบน + รายการติ๊กเลื่อนในแผง */
.multipick-panel{min-width:280px;max-width:min(380px,92vw);display:flex;flex-direction:column;overflow:hidden}
.filters .multipick-q{width:100%;max-width:none;min-width:0;margin-bottom:.4rem;box-sizing:border-box}
.multipick-list{flex:1 1 auto;min-height:0;max-height:min(50vh,360px)}
.multipick-list li{border-bottom:1px solid var(--line)}
.multipick-list li:last-child{border-bottom:0}
.multipick-list label span{overflow-wrap:anywhere}
.filters .multipick-list input{flex:none} /* ป้ายยาวขึ้นสองบรรทัด (วันทอดกฐินวัดพระธรรมกาย) ช่องติ๊กไม่หด */

.grid{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
/* แสดงรูปกลุ่มพระเต็มภาพ ไม่ crop (นับจำนวนได้) + พื้นหลังเป็นภาพเบลอของรูปเดียวกัน */
.thumb{position:relative;aspect-ratio:2/1;background:#efe7d9;overflow:hidden}
.thumb .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(22px) brightness(.98) saturate(1.1);transform:scale(1.18)}
.thumb a{position:relative;z-index:1;display:flex;width:100%;height:100%;
  align-items:center;justify-content:center}
.thumb .fg{max-width:100%;max-height:100%;object-fit:contain;display:block;
  box-shadow:0 2px 12px rgba(0,0,0,.28)}
.noimg{position:relative;z-index:1;width:100%;height:100%;display:flex;
  align-items:center;justify-content:center;color:#b0a692;font-size:.9rem}
.card .body,.lb-info-box{padding:.65rem .8rem;display:flex;flex-direction:column;gap:.45rem}
.card h3,.lb-info-box h3{margin:0;font-size:1.05rem;font-weight:700;line-height:1.3}
.badges{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.badge{font-size:.75rem;padding:.14rem .55rem;border-radius:999px;color:#fff;white-space:nowrap}
.badge.db1{background:var(--db1)} .badge.db2{background:var(--db2)}
.badge.type{background:#e8e2d5;color:var(--ink)}
.badge.monk{background:#e6b422;color:#4a3608;font-weight:700;font-size:.82rem;padding:.16rem .7rem}
.loc{font-size:.9rem;color:var(--ink)}
.ceremony{font-size:.85rem;color:var(--ink)}
.ceremony .k{color:var(--muted)}
.ceremony strong{color:var(--accent2)}
.ceremony .nodate{color:#b0a692}
.dmk{color:var(--ok);font-weight:600}
.ceremony .dmk{display:block}
.unit{font-size:.85rem;color:var(--ink)}
.unit .k{color:var(--muted)}
.unit .special{font-weight:700;color:var(--accent2);
  background:#fdf2df;padding:0 .35rem;border-radius:4px}
.dist{font-size:.85rem;color:var(--muted)}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:2rem}

#more-wrap{display:flex;justify-content:center;margin:1.2rem 0}
.more{background:var(--accent);color:#fff;border:0;border-radius:8px;
  padding:.6rem 1.4rem;font:inherit;cursor:pointer}
.more:hover{background:var(--accent2)}

/* หน้าต่างดูรูปลอย (lightbox): รูปซ้าย + ข้อมูลวัดขวา (มือถือ: รูปบน ข้อมูลล่าง) */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:50;display:flex;background:rgba(20,16,10,.92)}
.lb[hidden]{display:none}
.lb-stage{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none}
.lb-img{max-width:calc(100% - 2rem);max-height:calc(100% - 2rem);object-fit:contain;display:block;
  transition:transform .15s ease;transform-origin:center;user-select:none;-webkit-user-drag:none;
  box-shadow:0 4px 24px rgba(0,0,0,.5);cursor:zoom-in}
.lb-img.zoomed{cursor:grab}
.lb-img.dragging{cursor:grabbing;transition:none}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:64px;
  font-size:2.4rem;line-height:1;color:#fff;background:rgba(0,0,0,.45);border:0;border-radius:10px;cursor:pointer}
.lb-nav:hover:not(:disabled){background:var(--accent)}
.lb-nav:disabled{opacity:.25;cursor:default}
.lb-prev{left:.8rem} .lb-next{right:.8rem}
.lb-side{width:340px;flex-shrink:0;background:var(--card);display:flex;flex-direction:column;overflow-y:auto}
.lb-tools{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);
  background:#efe7d9}
.lb-tools button{font:inherit;font-size:1.1rem;font-weight:700;width:36px;height:36px;cursor:pointer;
  color:var(--accent2);background:#fff;border:1px solid var(--line);border-radius:8px}
.lb-tools button:hover:not(:disabled){background:#faf6ee}
.lb-tools button:disabled{opacity:.4;cursor:default}
.lb-zoom{min-width:3.2rem;text-align:center;font-size:.85rem;color:var(--accent2)}
.lb-open{font-size:.8rem;color:var(--accent2);white-space:nowrap}
.lb-count{margin-left:auto;font-size:.85rem;color:var(--muted);white-space:nowrap}
.lb-tools .lb-close{color:#fff;background:var(--accent);border-color:var(--accent)}
.lb-tools .lb-close:hover{background:var(--accent2)}
.lb-info-box{padding:.9rem 1rem}
.lb-info-box h3{font-size:1.2rem}

/* ---------- ภาพกิจกรรมกฐิน: การ์ดละหลายรูป (ประเภทแปะมุมรูป) ---------- */
.act-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px;padding:4px;background:#efe9dd}
.act-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#e3dccd}
.act-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.act-photo:hover img{transform:scale(1.05)}
.act-type{position:absolute;left:0;right:0;bottom:0;padding:.15rem .35rem;font-size:.68rem;line-height:1.3;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.7));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-none{display:flex;align-items:center;justify-content:center;min-height:90px;background:#f0eee9;color:var(--muted);font-size:.9rem}
.lb-caption{margin:0 0 .6rem;padding:.35rem .6rem;border-radius:7px;background:#fdf2df;color:var(--accent2);font-weight:700}

/* ---------- เมนูจัดการระบบ (ตั้งค่าสิทธิ์ / บริหารผู้ใช้) ---------- */
.adm-title{font-size:1.25rem;margin:.2rem 0 1rem;color:var(--accent2)}
.adm h2{font-size:1.05rem;margin:0 0 .7rem}
.adm-note{color:var(--muted);font-size:.85rem;margin:.4rem 0}
.adm-sub{display:block;color:var(--muted);font-size:.78rem;font-weight:400}
.adm-flash{background:#e8f5ec;color:#1b5e34;border:1px solid #bfe3cb;border-radius:8px;padding:.55rem .8rem}
.adm-error{background:#fdecea;color:#a02b20;border:1px solid #f5c6c2;border-radius:8px;padding:.55rem .8rem}
.adm-ok{color:var(--ok);font-weight:600}
.adm-warn{color:#9a5b00;font-weight:600}
.adm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:.8rem}
.adm-btn{display:inline-block;font:inherit;font-weight:700;font-size:.92rem;color:#fff;background:var(--accent);
  border:0;border-radius:8px;padding:.5rem 1rem;text-decoration:none;cursor:pointer}
.adm-btn:hover{background:var(--accent2)}
.adm-btn.subtle{background:#fff;color:var(--accent2);border:1px solid var(--line)}
.adm-btn.subtle:hover{background:#faf6ee}
.adm-btn.danger{background:#b3261e}
.adm-btn.danger:hover{background:#8c1d18}
/* เข้าใช้สิทธิ์ของผู้ใช้คนนี้ (impersonate) — สีเขียวเข้มให้ต่างจากปุ่มหลัก และอยู่บรรทัดเดียวเสมอ */
.adm-btn.go{background:var(--db2);white-space:nowrap}
.adm-btn.go:hover{background:#406034}
.adm-link{color:var(--accent2);font-weight:600}
.adm-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem;margin-bottom:1rem}
.adm-form{display:flex;flex-direction:column;gap:.8rem;max-width:720px}
.adm-field{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:700;color:var(--accent2);margin:0}
.adm-field input,.adm-field select,.adm-filter input,.adm-filter select{font:inherit;font-size:.95rem;font-weight:400;
  color:var(--ink);padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.adm-field input:focus,.adm-field select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.adm-lookup{min-height:1.4em;font-size:.88rem;margin-top:-.4rem}
.adm-set{border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem .8rem;margin:0;background:var(--card)}
.adm-set legend{font-weight:700;color:var(--accent2);padding:0 .3rem}
.adm-check{display:flex;align-items:flex-start;gap:.5rem;padding:.3rem 0;cursor:pointer;font-size:.95rem}
.adm-check input{width:18px;height:18px;margin:.2rem 0 0;flex-shrink:0;accent-color:var(--accent)}
.adm-check small{color:var(--muted)}
.adm-zones{display:flex;flex-direction:column;gap:.3rem;margin-top:.4rem}
.adm-zone{border:1px solid var(--line);border-radius:8px;padding:.1rem .6rem}
/* แถวโซน = กดที่ไหนก็กางรายจังหวัด (ยกเว้นช่องติ๊กโซน) — ปุ่มบอกชัดว่ากางได้ */
.adm-zone summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:.2rem .8rem;padding:.15rem 0}
.adm-zone summary::-webkit-details-marker{display:none}
.adm-zone summary .adm-check{display:inline-flex;cursor:pointer}
.adm-zone-toggle{color:var(--accent);font-size:.85rem;font-weight:600;white-space:nowrap;padding:.2rem 0}
.adm-zone-toggle::after{content:" ▾";font-size:.8em}
.adm-zone[open] .adm-zone-toggle::after{content:" ▴"}
.adm-zone[open] summary{border-bottom:1px solid var(--line)}
.adm-provinces{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 .8rem;padding:0 0 .4rem 1.5rem}
.adm-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem}
.adm-actions .adm-btn{white-space:nowrap}
.adm-delete{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin-top:1.5rem;
  padding-top:1rem;border-top:1px dashed var(--line)}
.adm-filter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem .8rem;margin:1rem 0 .2rem}
.adm-filter label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:var(--muted)}
/* วันทอดกฐินวัดพระธรรมกาย (หน้าตั้งค่าสิทธิ์ — docs/adr/0024) */
.adm-days{margin-top:1rem}
.adm-day{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.adm-day input{font:inherit;font-size:.95rem;color:var(--ink);padding:.4rem .5rem;border:1px solid var(--line);border-radius:8px;background:#fff}
/* รหัสผ่าน IT หน่วยงาน (หน้าตั้งค่าสิทธิ์ — docs/adr/0027) */
.adm-itkeys{display:flex;flex-direction:column;gap:.7rem}
.adm-itkeys h2,.adm-itkeys p{margin:0}
.adm-itlink{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.adm-itlink input{flex:1 1 320px;min-width:0;font-size:.85rem;color:var(--ink);padding:.45rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.adm-itkeys .adm-day input{flex:1 1 240px;min-width:0}
.adm-itcode{white-space:nowrap}
.adm-itcode .mono{display:inline-block;min-width:8.5em;letter-spacing:1px}
.adm-itcode .adm-btn{padding:.25rem .6rem;font-size:.8rem}
.login-key{text-transform:uppercase}
.adm-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:10px}
.adm-table{border-collapse:collapse;width:100%;font-size:.9rem}
.adm-table th,.adm-table td{padding:.5rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.adm-table thead th{background:#faf6ee;color:var(--accent2);white-space:nowrap}
.adm-table tbody tr:last-child td{border-bottom:0}
.adm-table tr.inactive td{color:var(--muted)}
.adm-table .mono{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;white-space:nowrap}
.adm-table .empty{text-align:center;color:var(--muted)}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:.1rem .55rem;border-radius:99px}
.pill.ok{background:#e8f5ec;color:#1b5e34}
.pill.off{background:#f0eee9;color:#7a7266}
.pill.bad{background:#fdecea;color:#a02b20}
.adm-sub.warn{color:#a02b20}
.adm-table .wrap{white-space:normal;word-break:break-all;max-width:420px}
.adm-req{min-width:260px;max-width:460px}
.adm-req-params{margin:.2rem 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.25rem}
.adm-req-params li{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:.05rem .4rem;font-size:.8rem}
.adm-tabs{display:flex;flex-wrap:wrap;gap:.3rem;border-bottom:2px solid var(--line);margin-bottom:1rem}
.adm-tab{padding:.5rem .9rem;border-radius:8px 8px 0 0;color:var(--muted);text-decoration:none;font-weight:600;
  margin-bottom:-2px;border-bottom:2px solid transparent}
.adm-tab:hover{color:var(--accent2);background:#faf6ee}
.adm-tab.active{color:var(--accent2);border-bottom-color:var(--accent)}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem;margin-bottom:.4rem}
.adm-stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;min-width:0}
.adm-stat strong{display:block;font-size:1.4rem;color:var(--accent2);line-height:1.2}
.adm-stat span{font-size:.82rem;color:var(--muted)}
.adm-stat small{display:block;font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-stat.warn strong{color:#a02b20}
.adm-log{margin:0;padding:.8rem;font-family:ui-monospace,Menlo,monospace;font-size:.78rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-all;max-height:70vh;overflow:auto}
.adm-newkey{border-color:var(--accent);background:#fffaf0}
.adm-keybox{display:flex;gap:.5rem;flex-wrap:wrap}
.adm-keybox input{flex:1 1 320px;font-family:ui-monospace,Menlo,monospace;font-size:.9rem;padding:.5rem .6rem;
  border:1px solid var(--accent);border-radius:8px;background:#fff}
.adm-rowactions{display:flex;gap:.4rem;flex-wrap:wrap}
.adm-rowactions .adm-btn{font-size:.8rem;padding:.3rem .6rem;white-space:nowrap}
/* หน้าต่างลอย "เพิ่มผู้ใช้": ปุ่มเดียวด้านบน กดแล้วฟอร์มลอยทับ (ไม่บังตารางรายชื่อ) */
.adm-modal{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-start;justify-content:center;
  padding:3rem 1rem 1rem;overflow-y:auto}
.adm-modal-back{position:fixed;inset:0;background:rgba(0,0,0,.45)}
.adm-modal-box{position:relative;width:min(760px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:1rem 1.1rem 1.2rem}
.adm-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.4rem}
.adm-modal-head h2{margin:0;font-size:1.1rem;color:var(--accent2)}
.adm-modal-close{font:inherit;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:.3rem .55rem}
.adm-modal-close:hover{background:#faf6ee;color:var(--ink)}
.adm-modal-body .adm-form{max-width:none}
.adm-modal-body .adm-flash,.adm-modal-body .adm-error{margin-top:0}
/* เฟือง ⚙ ของตารางรายชื่อผู้ใช้: ย้ายด้วย ▲▼ อย่างเดียว (ไม่ลาก) */
.adm .gear-list li{cursor:default}
.adm h2{margin-top:1.2rem}
.adm-card h2{margin-top:0}
/* ชื่อสิทธิ์ของผู้ใช้ (หน้าผู้ใช้): แถวละสิทธิ์ + ปุ่มแก้พื้นที่/เอาออก, ฟอร์มพับไว้ */
.adm-assign{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.adm-assign>div:first-child{flex:1 1 240px;min-width:0}
.adm-assign .adm-sub{display:block}
.adm-assign form{margin:0}
.adm-assign-edit{flex-basis:100%;order:3}
.adm-assign-edit summary,.adm-addrole summary{list-style:none;display:inline-block;font-size:.85rem;padding:.35rem .8rem}
.adm-assign-edit summary::-webkit-details-marker,.adm-addrole summary::-webkit-details-marker{display:none}
.adm-assign-edit[open]>form,.adm-addrole[open]>form{margin-top:.6rem}
.adm-addrole{margin-top:.9rem}
.adm-role{margin:.1rem 0}
.adm-role small{display:block;color:var(--muted)}
.matrix thead th{text-align:center;min-width:110px}
.matrix thead th a{color:var(--accent2)}
.matrix-users{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}
.matrix th.matrix-item{font-weight:600;color:var(--ink);background:none;white-space:nowrap}
.matrix thead th.matrix-item{background:#faf6ee;color:var(--accent2)}
.matrix-group th{background:#f5f1e8;color:var(--accent2);font-size:.82rem}
.matrix-yes{text-align:center!important;color:var(--ok);font-weight:700}
.matrix-no{text-align:center!important;color:#c9c2b5}
.matrix-area{font-size:.82rem;text-align:center!important}
/* สิทธิ์จาก RGT (docs/adr/0017): ป้าย RGT + การ์ดอ่านอย่างเดียวในหน้าผู้ใช้ */
.pill.rgt{background:#e7eef8;color:#1f4f8a;vertical-align:.1em}
.adm-rgt{border-color:#c9d8ec;background:#f7faff}
.adm-rgt h2 .pill{font-size:.72rem}
.adm-dl{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;gap:.45rem 1rem;margin:0 0 .6rem}
.adm-dl dt{font-size:.85rem;font-weight:700;color:var(--accent2)}
.adm-dl dd{margin:0;min-width:0}
.adm-dl dd .adm-sub{display:block}
.adm-tag{display:inline-block;font-size:.85rem;background:#fff;border:1px solid #c9d8ec;border-radius:6px;padding:.05rem .45rem;margin:0 .3rem .2rem 0}
.adm-assign-rgt>div:first-child strong{color:#1f4f8a}
.adm-quotas{border-style:dashed}
/* แถบ "กำลังใช้สิทธิ์แทน" ใต้แถบบน (docs/adr/0017) */
.acting-as{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;margin:0;padding:.45rem 1rem;
  background:#fff4d6;border-bottom:1px solid #e8cf8a;color:#6b4a00;font-size:.9rem;font-weight:600}
.acting-as .adm-btn{font-size:.8rem;padding:.25rem .7rem}
.adm-rowactions form{margin:0}

@media(max-width:640px){
  .adm-dl{grid-template-columns:1fr;gap:.1rem}
  .adm-dl dd{margin-bottom:.4rem}
  .lb{flex-direction:column}
  .lb-side{width:auto;max-height:45vh}
  .lb-nav{width:40px;height:52px;font-size:2rem}
  .lb-prev{left:.4rem} .lb-next{right:.4rem}

  .toggle{display:block}
  /* มือถือ: ชื่อโครงการต้องเห็นปี (พ.ศ.) ครบ — ลดระยะ/ขนาดตัวอักษรในแถบบน */
  .topbar{gap:.5rem}
  .topbar-project{font-size:.85rem}
  /* บนมือถือ: ตัวกรองไม่ sticky (เลื่อนหายไปตามเนื้อหา ไม่บังการ์ด/รูป) */
  .searchform{position:static;top:auto}
  .searchbar label{flex-basis:100%}
  .searchhint{padding-bottom:0}
  .filters{display:none;max-height:75vh;overflow-y:auto}
  .filters.open{display:flex}
  .filters label,.filters select,.filters input{max-width:none;width:100%}
  .filters label{flex:1 1 100%}
  .slotpick{flex:1 1 100%}
  .distpick{flex:1 1 100%;min-width:0;max-width:none}
  .filters .distpick-num{width:4.5rem;flex:0 0 auto}
  .slotpick-btn,.viewpick-btn{max-width:none;width:100%}
  .slotpick-panel{position:static;box-shadow:none;min-width:0}
  .slotgrid{width:100%}
  .filters .slotgrid label{width:auto}
  /* มือถือ: ตารางกว้างกว่าจอ → เลื่อนในกล่อง (ทั้งแนวนอน/ตั้ง) หัวตารางตรึงที่ขอบบนกล่อง */
  .tablewrap{max-height:calc(100vh - 56px - 1rem)}
  .viewpick{flex:1 1 100%}
  /* มือถือ: แผงเฟืองเป็นแผ่นล่างจอ (ไม่ถูกเลื่อนหายไปกับตาราง) */
  .gear-panel{position:fixed;left:.5rem;right:.5rem;bottom:.5rem;top:auto;width:auto;z-index:40;
    max-height:75vh;overflow-y:auto;box-shadow:0 -6px 28px rgba(0,0,0,.25)}
  .viewpick-panel{position:static;box-shadow:none;min-width:0}
}
/* ป้ายสถานะแบบรายชื่อผู้ใช้ของ RGT (ออนไลน์ / N นาทีที่แล้ว / ออฟไลน์ — docs/adr/0018) */
.presence{display:inline-flex;align-items:center;gap:.4rem;padding:.2rem .6rem;border-radius:99px;border:1px solid transparent;
  font-size:.8rem;line-height:1.2;white-space:nowrap}
.presence-dot{width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto}
.presence.is-online{color:#0f7b3d;background:#e8f7ee;border-color:#bfe6cd}
.presence.is-online .presence-dot{background:#18a558}
.presence.is-idle{color:#8a5a00;background:#fff6e5;border-color:#f0dcae}
.presence.is-idle .presence-dot{background:#e0a204}
.presence.is-off{color:#6c757d;background:#f1f3f5;border-color:#e2e6ea}
.presence.is-off .presence-dot{background:#adb5bd}

/* ช่องค้นหาสาย + รายการคำแนะนำ (docs/adr/0025) */
.searchcol,.teamsearch{display:flex;flex-direction:column;flex:1 1 300px;gap:.25rem;min-width:0;align-self:flex-start}
.searchcol>label{flex:none}
.searchcol .searchhint,.teamhint{padding-bottom:0;font-size:.74rem;color:var(--muted)}
.teamsearch>label{flex:none;font-size:.78rem;font-weight:700;color:var(--accent2)}
.teambox{position:relative;display:block}
.teambox input{padding-right:2.2rem}
.teamclear{position:absolute;top:50%;right:.35rem;transform:translateY(-50%);border:0;background:none;
  color:var(--muted);font-size:1rem;line-height:1;padding:.35rem .45rem;cursor:pointer;border-radius:6px}
.teamclear:hover{color:var(--ink);background:var(--bg)}
.teamlist{position:absolute;left:0;right:0;top:calc(100% + .2rem);z-index:30;margin:0;padding:.25rem 0;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);
  max-height:min(60vh,22rem);overflow-y:auto}
.teamlist li{display:flex;align-items:baseline;gap:.5rem;padding:.5rem .75rem;cursor:pointer;font-size:.92rem;font-weight:400;color:var(--ink)}
.teamlist li.active{background:#f8efe5}
.teamlist .tname{font-weight:700}
.teamlist .tunit{flex:1;min-width:0;color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teamlist .tcount{margin-left:auto;color:var(--muted);font-size:.8rem;white-space:nowrap}
.teamlist .teamempty{cursor:default;color:var(--muted);font-size:.85rem}
.teamhint.exact{color:var(--accent2);font-weight:700}
@media(max-width:640px){
  .searchcol,.teamsearch{flex-basis:100%}
}

/* ---------- สรุปผลการคีย์ (docs/adr/0026): ตัวเลขชิดกลาง, เขียว = ครบตามเป้า, แดงอ่อน = ยังไม่มี ---------- */
.keying-wrap{max-height:calc(100vh - 56px - 9rem)}
.table.keying thead th{cursor:default;text-align:center}
.keying .kc,.keying .kc-no{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.keying .kc-no{color:var(--muted);width:3rem}
.keying .kc-zone,.keying .kc-loc{white-space:nowrap;color:var(--muted)}
.keying td.pin{font-weight:600;white-space:nowrap}
.keying .kc a{color:inherit;text-decoration:underline dotted}
.keying .kc.full{background:#e3f4e8;color:#1b5e34}
.keying .kc.zero{background:#fdecea;color:#a02b20}
.keying tr.keying-total td{background:#faf6ee;font-weight:700;color:var(--accent2)}
.keying tr.keying-total td.pin{background:#f3ead9}
.keying-unit .kv{white-space:nowrap}
.keying-unit .kv.miss{background:#fdecea;color:#a02b20;text-align:center}
.keying-unit th.kc-miss{background:#f6d8d4}
.keying-miss{display:flex;flex-wrap:wrap;gap:.3rem}
/* เมนูสรุปภาพกิจกรรมกฐินหลัก (docs/adr/0028) */
.drive-search{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0}
.drive-search input[type=search]{flex:1 1 16rem;max-width:28rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:6px;font:inherit}
.drive-days{margin:.4rem 0 .8rem}
.drive-days summary{cursor:pointer;font-weight:600;color:var(--accent2);margin-bottom:.4rem}
.drive-days .keying-wrap{max-height:22rem}
.keying tr.drive-day-on td{background:#faf6ee}
.drive .drive-st{font-weight:600}
.drive .drive-sent{background:#e3f4e8;color:#1b5e34}
.drive .drive-incomplete{background:#fff4dc;color:#8a5a00}
.drive .drive-problem{background:#fdecea;color:#a02b20}
.drive .drive-none{color:var(--muted)}
.drive .drive-reason{min-width:16rem;font-size:.92em}
.adm.adm-wide{max-width:none}