/* app/assets/app.css — สไตล์กลางของหน้า PHP ใหม่ทั้งหมด
   ค่าตาม handoff/handoff-design-spec-new-pages-2026-10-23.md หัวข้อ 1–2 */
:root{
  --p900:#2E0764;--p800:#4C1D95;--p700:#5B21B6;--p600:#7C3AED;--p500:#8B5CF6;
  --p400:#A78BFA;--p300:#C4B5FD;--p200:#DDD6FE;--p100:#EDE9FE;--p50:#F5F3FF;
  --y300:#FCD34D;--y400:#FBBF24;
  --white:#fff;--gray50:#F9FAFB;--gray100:#F3F4F6;--gray200:#E5E7EB;--gray300:#D1D5DB;
  --gray500:#6B7280;--gray600:#4B5563;--gray700:#374151;--gray900:#111827;

  --st-present:#047857;--st-present-bg:#D1FAE5;--st-present-fg:#065F46;
  --st-leave:#1D4ED8;--st-leave-bg:#DBEAFE;--st-leave-fg:#1E40AF;
  --st-sick:#B45309;--st-sick-bg:#FEF3C7;--st-sick-fg:#92400E;
  --st-absent:#B91C1C;--st-absent-bg:#FEE2E2;--st-absent-fg:#991B1B;
  --st-late:#6D28D9;--st-late-bg:#EDE9FE;--st-late-fg:#5B21B6;
  --st-activity:#0F766E;--st-activity-bg:#CCFBF1;--st-activity-fg:#115E59;
  --ok-bg:#D1FAE5;--ok-fg:#065F46;
  --warn-bg:#FEF3C7;--warn-fg:#78350F;--warn-line:#FDE68A;--warn-soft:#FFFBEB;
  --bad-bg:#FEE2E2;--bad-fg:#991B1B;--bad-soft:#FEF2F2;
  --required:#B91C1C;--focus:#7C3AED;

  --s1:4px;--s2:6px;--s3:8px;--s4:12px;--s5:16px;--s6:20px;--s7:24px;--s8:28px;--s9:56px;
  --r-chip:10px;--r-ctl:12px;--r-row:14px;--r-tile:16px;--r-card:18px;--r-panel:20px;--rFull:999px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Sarabun',sans-serif;color:var(--gray900);background:var(--gray50);font-size:15px;line-height:1.5}
body.mobile{background:var(--p50)}
a{color:var(--p700)}a:hover{color:var(--p800)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1,h2,h3{margin:0;line-height:1.3}

/* C1 แถบเมนูหลัก */
.topbar{background:var(--white);border-bottom:1px solid var(--gray100)}
.topbar-in{max-width:1280px;margin:0 auto;padding:12px var(--s7);display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{width:40px;height:40px;object-fit:contain;border-radius:var(--r-ctl)}
.brand strong{display:block;font-size:14px;color:var(--p800)}
.brand span{font-size:12px;color:var(--gray600)}
.mainnav{display:flex;flex-wrap:wrap;gap:2px;flex:1}
.mainnav a{padding:8px 12px;border-radius:var(--rFull);font-size:14px;font-weight:600;color:var(--gray700);text-decoration:none;white-space:nowrap;flex-shrink:0}
.mainnav a:hover{background:var(--p50);color:var(--p700)}
.mainnav a[aria-current="page"]{background:var(--p700);color:var(--white);font-weight:700}
.userbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.userpill{font-size:13px;font-weight:700;padding:6px 12px;border-radius:var(--rFull);background:var(--warn-bg);color:var(--warn-fg)}
@media (max-width:900px){.mainnav{order:3;width:100%;flex:none;flex-wrap:nowrap;overflow-x:auto}}

/* หน้าแอดมิน */
.page{max-width:1280px;margin:0 auto;padding:var(--s8) var(--s7) var(--s9);display:flex;flex-direction:column;gap:var(--s6)}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-head h1{font-size:28px;font-weight:800;line-height:1.2}
.page-head p{margin:4px 0 0;color:var(--gray600)}
.row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end}
@media (max-width:430px){.page{padding:var(--s6) var(--s5) 40px}}

/* C11 แถบแท็บย่อย */
.subtabs{display:flex;flex-wrap:wrap;gap:4px;background:var(--gray100);border-radius:var(--r-row);padding:4px;align-self:flex-start}
.subtabs a{padding:8px 16px;border-radius:var(--r-chip);font-size:14px;font-weight:600;color:var(--gray700);text-decoration:none}
.subtabs a[aria-current="page"]{background:var(--white);color:var(--p700);font-weight:700}

/* C3 การ์ด */
.card{background:var(--white);border:1px solid var(--gray200);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:var(--s4)}
.mobile .card{border-color:var(--p200)}
.card h2{font-size:18px;font-weight:800}
.card-flush{padding:0;overflow:hidden;gap:0}
.card-bar{padding:14px 18px;border-bottom:1px solid var(--gray100);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.card-foot{padding:12px 18px;border-top:1px solid var(--gray100);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;font-size:14px;color:var(--gray600)}
.infobox{flex:1 1 320px;border-radius:var(--r-tile);padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:var(--white);border:1px solid var(--p200)}
.infobox.warn{background:var(--warn-soft);border-color:var(--warn-line)}

/* C4/C5 ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 18px;border-radius:var(--rFull);border:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s ease}
.btn-primary{background:var(--p700);color:var(--white)}
.btn-primary:hover{background:var(--p800);color:var(--white)}
.btn-outline{background:var(--white);color:var(--p700);border:2px solid var(--p700)}
.btn-gray{background:var(--gray100);color:var(--gray900)}
.btn-line{background:var(--white);color:var(--gray700);border:1.5px solid var(--gray300)}
.btn-warn{background:var(--warn-soft);color:var(--warn-fg);border:1.5px solid var(--warn-line)}
.btn-danger{background:var(--st-absent);color:var(--white)}
.btn-sm{height:36px;padding:0 12px;border-radius:var(--r-chip);font-size:13px}
.btn-lg{height:52px;font-size:16px}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* C6 ป้าย */
.pill{display:inline-block;font-size:13px;font-weight:700;padding:3px 10px;border-radius:var(--rFull);white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill-warn{background:var(--warn-bg);color:var(--warn-fg)}
.pill-bad{background:var(--bad-bg);color:var(--bad-fg)}
.pill-neutral{background:var(--gray100);color:var(--gray700)}
.pill-in{background:#E0F2FE;color:#075985}
.sname .pill{font-size:12px;margin-left:4px;vertical-align:1px}

/* C9 แถบแจ้ง */
.notice{padding:12px 14px;border-radius:var(--r-ctl);font-size:15px;font-weight:700;animation:notice-in .2s ease-out}
.notice-ok{background:var(--ok-bg);color:var(--ok-fg)}
.notice-warn{background:var(--warn-bg);color:var(--warn-fg)}
.notice-bad{background:var(--bad-bg);color:var(--bad-fg)}
.notice ul{margin:6px 0 0;padding-left:20px;font-weight:400}
@keyframes notice-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* C10 ช่องกรอก */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.label{font-size:14px;font-weight:700;color:var(--gray700)}
.field .hint{font-size:13px;color:var(--gray600)}
.field .err{font-size:13px;color:var(--st-absent-fg)}
.req{color:var(--required)}
.input,select.input,textarea.input{height:44px;width:100%;padding:0 12px;border:1.5px solid var(--gray300);border-radius:var(--r-ctl);font:inherit;font-size:15px;background:var(--white);color:var(--gray900)}
textarea.input{height:auto;padding:12px;resize:vertical}
.input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.input[aria-invalid="true"]{border-color:var(--st-absent)}
.mobile .input{height:48px;font-size:16px}
.input-search{border-radius:var(--rFull);width:280px;max-width:100%}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--p700)}

/* C12 ตาราง */
.tablebox{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:10px 14px;text-align:left;vertical-align:middle}
.tbl thead th{background:var(--p50);color:var(--p800);font-weight:800;white-space:nowrap}
.tbl tbody tr{border-top:1px solid var(--gray100);transition:background-color .1s ease}
.tbl tbody tr:hover{background:var(--p50)}
.tbl tbody th{font-weight:700}
.tbl .num{text-align:right}
.tbl .actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.tbl tr.is-off>*:not(.col-actions){opacity:.6}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--gray700)}

/* ป้ายครูที่ปรึกษา (หน้า 6.8) */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 12px;border-radius:var(--rFull);background:var(--p100);color:var(--p800);font-size:14px;font-weight:600}
.chip button{width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--p800);cursor:pointer;font-size:16px;line-height:1}
.chip button:hover{background:var(--p200)}

/* หน้ามือถือ (เข้าสู่ระบบ เปลี่ยนรหัสผ่าน) */
.narrow{max-width:440px;margin:0 auto;padding:56px var(--s7) 32px;display:flex;flex-direction:column;gap:var(--s8)}
.login-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.login-head img{width:72px;height:72px;object-fit:contain;border-radius:var(--r-panel)}
.login-head .school{font-size:14px;font-weight:700;color:var(--p800)}
.login-head h1{font-size:26px;font-weight:800}
.login-head p{margin:0;color:var(--gray600)}
.panel{background:var(--white);border:1px solid var(--p200);border-radius:var(--r-panel);padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.pw-wrap{position:relative}
.pw-wrap .input{padding-right:52px}
.pw-toggle{position:absolute;right:2px;top:2px;width:44px;height:44px;border:none;background:transparent;border-radius:var(--r-ctl);cursor:pointer;color:var(--gray600)}
.cf-box{min-height:65px;display:flex;align-items:center;justify-content:center}
.footnote{margin:0;text-align:center;font-size:14px;color:var(--gray600)}

/* ── หน้ามือถือของครู (สเปกส่งต่องาน หน้า 2–3) ── */
.m-head{background:var(--white);border-bottom:1px solid var(--p100);padding:12px var(--s5);display:flex;align-items:center;gap:10px}
.m-head h1{font-size:19px;font-weight:800}
.m-head span{font-size:13px;color:var(--gray600)}
.m-back{width:44px;height:44px;border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center;color:var(--gray700);flex-shrink:0}
.datebar{background:var(--white);border-bottom:1px solid var(--p100);padding:8px var(--s5);display:flex;align-items:center;justify-content:space-between;gap:8px}
.datebar-mid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.datebar-mid strong{font-size:16px;font-weight:800}
.datebar-mid span{font-size:12px;color:var(--gray600)}
.m-iconbtn{width:44px;height:44px;border:1.5px solid var(--gray300);border-radius:var(--r-ctl);background:var(--white);color:var(--gray700);display:flex;align-items:center;justify-content:center;font-size:22px;text-decoration:none;flex-shrink:0}
.m-iconbtn.is-off{border-style:dashed;border-color:var(--gray200);background:var(--gray50);color:#9CA3AF}
.m-body{max-width:560px;margin:0 auto;padding:14px var(--s5) 24px;display:flex;flex-direction:column;gap:var(--s4)}
.m-wrap{max-width:560px;margin:0 auto}
.counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--white);border-radius:var(--r-card);padding:12px}
.count{padding:8px 10px;border-radius:var(--r-ctl);display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.count span{font-size:14px;font-weight:600}
.count strong{font-size:20px;font-weight:800;line-height:1}
.st-present{background:var(--st-present-bg);color:var(--st-present-fg)}
.st-leave{background:var(--st-leave-bg);color:var(--st-leave-fg)}
.st-sick{background:var(--st-sick-bg);color:var(--st-sick-fg)}
.st-absent{background:var(--st-absent-bg);color:var(--st-absent-fg)}
.st-late{background:var(--st-late-bg);color:var(--st-late-fg)}
.st-activity{background:var(--st-activity-bg);color:var(--st-activity-fg)}
#status-area:focus{outline:none}
#status-area:empty{display:none}
.slist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.srow{background:var(--white);border:1px solid var(--p100);border-radius:var(--r-row);padding:10px 12px;display:flex;flex-direction:column;gap:var(--s3)}
.srow-top{display:flex;align-items:center;gap:10px}
.seat{width:30px;height:30px;border-radius:50%;background:var(--p100);color:var(--p800);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sname{font-size:15px;font-weight:600;flex:1}
.stgroup{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1)}
.stbtn{height:40px;min-width:44px;padding:0 2px;border-radius:var(--r-chip);border:1.5px solid var(--gray300);background:var(--white);color:var(--gray700);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}
.stbtn[aria-checked="true"]{color:var(--white);border-width:2px}
.stbtn[data-st="present"][aria-checked="true"]{background:var(--st-present);border-color:var(--st-present)}
.stbtn[data-st="leave"][aria-checked="true"]{background:var(--st-leave);border-color:var(--st-leave)}
.stbtn[data-st="sick"][aria-checked="true"]{background:var(--st-sick);border-color:var(--st-sick)}
.stbtn[data-st="absent"][aria-checked="true"]{background:var(--st-absent);border-color:var(--st-absent)}
.stbtn[data-st="late"][aria-checked="true"]{background:var(--st-late);border-color:var(--st-late)}
.stbtn[data-st="activity"][aria-checked="true"]{background:var(--st-activity);border-color:var(--st-activity)}
.savebar{position:sticky;bottom:0;z-index:5;margin:0 calc(-1 * var(--s5));padding:12px var(--s5) calc(12px + env(safe-area-inset-bottom));background:var(--p50)}
.mcard{background:var(--white);border:1px solid var(--p200);border-radius:var(--r-card);padding:18px;display:flex;flex-direction:column;gap:var(--s4)}
.mcard h2{font-size:18px;font-weight:800}
.mcard-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pending{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r-ctl);background:var(--bad-soft);color:var(--bad-fg);font-size:15px;font-weight:700;text-decoration:none}
.pending span{font-size:13px}
.followitem{padding:12px;border-radius:var(--r-ctl);background:var(--bad-soft);display:flex;flex-direction:column;gap:2px}
.followitem strong{font-size:15px}
.followitem span{font-size:14px;color:var(--bad-fg)}

/* ── ภาพรวมการเช็คชื่อของแอดมิน (หน้า 5) ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{border-radius:var(--r-tile);padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tile span{font-size:14px;font-weight:600}
.tile strong{font-size:28px;font-weight:800;line-height:1.1}
.tile small{font-size:13px;color:var(--gray600)}
.tile-plain{background:var(--white);border:1px solid var(--gray200)}
.tbl tr.row-wait{background:var(--warn-soft)}
@media (max-width:430px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ตัวแบ่งหน้า */
.pager{display:flex;gap:6px}

/* ── ย้ายเข้า-ออก (สเปกก้อน 3) ── */
.muted{color:var(--gray600)}
.empty{margin:0;padding:32px;text-align:center;color:var(--gray600)}
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filters .field{width:180px}
.filters .field-q{width:auto}
.tbl tr.is-cancel .xname,.tbl tr.is-cancel td{text-decoration:line-through;color:var(--gray500)}
.tbl tr.is-cancel td.col-actions{text-decoration:none}
.tbl tr.row-new{animation:row-new 2s ease-out}
@keyframes row-new{from{background:var(--p50)}to{background:var(--white)}}
.tbl th.col-name{font-weight:600}
.xfer{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-areas:"form will" "act will";gap:20px;align-items:start}
.xfer-form{grid-area:form}
.xfer-actions{grid-area:act;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center}
.xfer-actions .hint{font-size:13px;color:var(--gray600)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.formnote{margin:0;font-size:14px;color:var(--gray600)}
.facts{margin:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.facts div{display:flex;flex-direction:column}
.facts dt{font-size:13px;color:var(--gray600)}
.facts dd{margin:0;font-weight:700}
/* C16 กล่อง "เมื่อกดบันทึก ระบบจะ" */
.willbox{grid-area:will;background:var(--p50);border:1px solid var(--p200);border-radius:var(--r-card);padding:22px;display:flex;flex-direction:column;gap:10px}
.willbox h2{font-size:17px;font-weight:800;color:var(--p800)}
.willbox ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5}
.willbox li.bad{color:var(--bad-fg);font-weight:700}
.will-empty{margin:0;color:var(--gray600)}
.danger-zone{border-color:var(--bad-bg)}
.danger-zone h2{font-size:16px}
.danger-zone form{align-self:flex-start}
.btn-danger-line{color:var(--bad-fg);border-color:#FCA5A5}
.btn-danger-line:hover{background:var(--bad-soft)}
dialog.dlg{border:none;border-radius:var(--r-panel);padding:24px;width:calc(100% - 32px);max-width:480px;box-shadow:0 20px 50px rgba(17,24,39,.25)}
dialog.dlg::backdrop{background:rgba(17,24,39,.45)}
dialog.dlg h2{font-size:18px;font-weight:800}
dialog.dlg p{white-space:pre-line;margin:12px 0 20px;line-height:1.6}
.dlg-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
/* หน้าต่าง "บันทึกการเช็คชื่อแล้ว" */
dialog.dlg-saved{max-width:400px;text-align:center}
dialog.dlg-saved p{margin:6px 0 16px;color:var(--gray600)}
.saved-icon{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;background:var(--ok-bg);color:var(--ok-fg);font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center}
.saved-counts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}
.dlg-saved .dlg-actions{justify-content:stretch}
.dlg-saved .dlg-actions .btn{flex:1}
@media (max-width:900px){.xfer{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "will" "act"}}
@media (max-width:430px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .filters .field,.filters .field-q{width:100%}
  .tbl-xfer .col-name{position:sticky;left:0;background:var(--white);z-index:1}
  .tbl-xfer thead .col-name{background:var(--p50)}
}

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

/* ── บันทึกโฮมรูม (สเปกส่งต่องาน หน้า 4 และ 6) ── */
.hr-form{display:flex;flex-direction:column;gap:var(--s5)}
.mcard h3.hr-sub{font-size:15px;font-weight:800;margin:0}
.hr-sep{border-top:1px dashed var(--p200)}
.daypick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
.dayopt{position:relative;height:56px;border-radius:var(--r-ctl);border:1.5px solid var(--gray300);background:var(--white);color:var(--gray900);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}
.dayopt input{position:absolute;opacity:0;width:1px;height:1px}
.dayopt .dow{font-size:12px}
.dayopt strong{font-size:17px;font-weight:800;line-height:1.1}
.dayopt:has(input:checked){background:var(--p700);border:2px solid var(--p700);color:var(--white)}
.dayopt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.dayopt.is-off{border-style:dashed;border-color:var(--gray200);background:var(--gray50);color:#9CA3AF;cursor:not-allowed}
.absent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.absent li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--gray50);border:1px solid var(--gray100);font-size:15px}
.hr-text{max-height:calc(12 * 1.5em + 24px)}
.photo-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.photo-pick{height:48px;border-radius:var(--r-ctl);cursor:pointer}
.photo-pick:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.photo-pick.is-off{opacity:.55;cursor:not-allowed}
.thumbs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.thumbs:empty{display:none}
.thumb{position:relative;aspect-ratio:1/1;border-radius:var(--r-chip);overflow:hidden;background:var(--gray100)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* ปุ่มลบ: วงกลม 32×32 มุมขวาบน พื้นที่กด 44×44 */
.thumb-del{position:absolute;top:0;right:0;width:44px;height:44px;border:none;background:transparent;cursor:pointer;padding:0}
.thumb-del::before{content:"×";position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:20px;line-height:32px;text-align:center}
.thumb-del{font-size:0}
.thumb-bar{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--p700);transition:width .2s linear}
.thumb:not(.is-busy) .thumb-bar{display:none}
.thumb.is-busy img{opacity:.6}
.thumb-msg{display:none}
.thumb.is-failed{background:var(--bad-soft);border:1px solid var(--bad-bg)}
.thumb.is-failed img{opacity:.35}
.thumb.is-failed .thumb-msg{display:block;position:absolute;inset:auto 4px 40px;font-size:12px;font-weight:700;color:var(--bad-fg);text-align:center}
.thumb-retry{display:none}
.thumb.is-failed .thumb-retry{display:block;position:absolute;left:6px;right:6px;bottom:6px;height:30px;border:none;border-radius:var(--r-chip);background:var(--white);color:var(--bad-fg);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.pill.st-leave,.pill.st-sick,.pill.st-absent,.pill.st-late,.pill.st-activity{font-size:13px}
/* หน้าติดตามของแอดมิน */
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--gray700)}
.tbl-hr th.wk,.tbl-hr td.wk{text-align:center;padding-left:6px;padding-right:6px}
.tbl-hr th.wk small{display:block;font-size:12px;font-weight:400;color:var(--gray600)}
.tbl-hr a.pill{text-decoration:none;min-width:40px;border-radius:var(--r-chip)}
.tbl-hr .sticky-1,.tbl-hr .sticky-2{position:sticky;background:var(--white);z-index:1}
.tbl-hr thead .sticky-1,.tbl-hr thead .sticky-2{background:var(--p50)}
.tbl-hr .sticky-1{left:0;min-width:72px}
.tbl-hr .sticky-2{left:72px;min-width:180px;max-width:240px;font-size:13px}

/* ── หน้ารายงาน (สเปกรายงาน C18–C21) ── */
a.followlink{text-decoration:none;color:inherit}
a.followlink:hover strong{text-decoration:underline}
.tbl-month th,.tbl-month td{padding:6px 4px}
.tbl-month .m-no{position:sticky;left:0;width:48px;min-width:48px;background:var(--white);z-index:1;padding-left:12px}
.tbl-month .m-name{position:sticky;left:48px;width:220px;min-width:220px;background:var(--white);z-index:1;font-weight:600;font-size:14px}
.tbl-month .m-name a{color:inherit;text-decoration:none}
.tbl-month .m-name a:hover{text-decoration:underline;color:var(--p700)}
.tbl-month .m-name .pill{font-size:11px;padding:1px 6px;margin-top:2px}
.tbl-month thead .m-no,.tbl-month thead .m-name{background:var(--p50)}
.tbl-month tbody tr:hover .m-no,.tbl-month tbody tr:hover .m-name{background:var(--p50)}
.tbl-month .m-day{width:34px;min-width:34px;text-align:center;line-height:1.2;position:relative;padding:6px 0}
.tbl-month .m-day span{display:block;font-size:11px;font-weight:400;color:var(--gray600)}
.tbl-month .m-day a,.tbl-month .m-day b{font-size:13px;font-weight:800;color:var(--p800);text-decoration:none}
.tbl-month .m-day.is-hol{background:var(--gray100)}
.tbl-month .m-day .dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--warn-fg);margin:2px auto 0}
.tbl-month .m-cell{text-align:center;padding:3px 1px}
.tbl-month .m-sum{width:56px;min-width:56px;font-size:13px}
.tbl-month .m-foot{font-size:11px;color:var(--gray600)}
.tbl-month tfoot td,.tbl-month tfoot th{border-top:2px solid var(--p200);background:var(--p50)}
.cell{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-chip);font-size:13px;font-weight:700}
.cell.c-hol{background:var(--gray100);color:var(--gray500);font-size:10px;width:30px}
.cell.c-none{color:var(--gray500)}
.cell.c-out,.calday.c-out{background:repeating-linear-gradient(45deg,var(--gray50) 0 4px,var(--white) 4px 8px)}
.preview-box{margin:0;background:var(--p50);padding:16px;border-radius:var(--r-row);font-size:15px}
.results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.results a{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;min-height:48px;padding:8px 12px;border-radius:var(--r-ctl);border:1px solid var(--gray200);text-decoration:none;color:var(--gray900)}
.results a:hover{background:var(--p50);border-color:var(--p200)}
.results span{font-size:14px;color:var(--gray600)}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
table.cal{width:100%;border-collapse:separate;border-spacing:4px;background:var(--white);border:1px solid var(--gray200);border-radius:var(--r-card);padding:10px}
table.cal caption{text-align:left;font-size:15px;font-weight:800;padding:0 4px 6px;caption-side:top}
table.cal th{font-size:12px;font-weight:600;color:var(--gray600)}
table.cal td{padding:0}
.calday{display:flex;flex-direction:column;align-items:center;justify-content:center;height:48px;border-radius:var(--r-chip);background:var(--gray50)}
.calday small{font-size:12px;color:var(--gray600);line-height:1}
.calday b{font-size:15px;font-weight:800;line-height:1.3}
.calday.st-present small,.calday.st-leave small,.calday.st-sick small,.calday.st-absent small,.calday.st-late small,.calday.st-activity small{color:inherit;opacity:.8}
.calday.c-hol{background:var(--gray100);color:var(--gray500)}
.calday.c-hol b{font-size:11px}
.calday.c-none{color:var(--gray500)}
@media (max-width:430px){.tbl-month .m-name{width:140px;min-width:140px}}