/* ===== Excel Grid Engine — ธีมตารางแบบ Excel สำหรับหน้ากรอกข้อมูล ===== */
.xlwrap{overflow:auto;max-height:72vh;border:1px solid #c8cdd4;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(22,38,74,.06)}
table.xl{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
table.xl th,table.xl td{border-right:1px solid #d8dde3;border-bottom:1px solid #d8dde3;padding:0;background:#fff}
table.xl th{background:linear-gradient(180deg,#f6f7f9,#e9ecef);color:#243043;font-weight:600;padding:8px 10px;position:sticky;top:0;z-index:5;text-align:center;border-bottom:2px solid #b9c0c9;user-select:none}
table.xl td{padding:0;height:34px}
table.xl td.xl-text{padding:6px 10px;background:#fbfcfd;white-space:nowrap}
/* freeze คอลัมน์ชื่อ (td/th ที่มี .xl-fz) */
table.xl .xl-fz{position:sticky;left:0;z-index:4;background:#fbfcfd;box-shadow:2px 0 0 #d8dde3}
table.xl th.xl-fz{z-index:6;background:linear-gradient(180deg,#f6f7f9,#e9ecef)}
/* input/select เต็มเซลล์แบบ Excel */
table.xl td input,table.xl td select{width:100%;height:34px;border:none;outline:none;text-align:center;font:inherit;background:transparent;padding:0 6px;border-radius:0;box-sizing:border-box}
table.xl td input:hover{background:#f4f7f5}
/* เซลล์ที่เลือก: กรอบเขียว Excel + fill handle */
table.xl td.xl-sel{outline:2px solid #217346;outline-offset:-2px;position:relative;z-index:2}
table.xl td.xl-sel::after{content:"";position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;background:#217346;border:1px solid #fff;cursor:crosshair;z-index:3}
table.xl td.xl-rng{background:#e7f1ec !important}
table.xl td.xl-rng input,table.xl td.xl-rng select{background:transparent}
table.xl tr:hover td.xl-text{background:#f2f6f9}
table.xl th.xl-colsel{background:linear-gradient(180deg,#d9ead f,#cfe5d8);background:#d6e9dd}
/* แถบสถานะแบบ Excel */
#xlstatus{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;background:#217346;color:#fff;padding:8px 18px;border-radius:99px;font-size:13.5px;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:99;display:none;white-space:nowrap}
#xlstatus b{color:#ffe9a8}
/* ป้ายบอกวิธีใช้ */
.xlhint{display:flex;gap:14px;flex-wrap:wrap;align-items:center;background:#f2f7f4;border:1px solid #cfe3d6;border-radius:10px;padding:8px 14px;margin:8px 0;font-size:13px;color:#2b5c40}
.xlhint b{color:#217346}
.xlhint .k{background:#fff;border:1px solid #b9d4c3;border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-family:inherit;font-weight:600;color:#217346;font-size:12.5px}
@media(max-width:768px){ .xlwrap{max-height:66vh} table.xl td,table.xl td input,table.xl td select{height:40px} }