@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ============================================================
   ระบบเช็คชื่อเข้าเรียน — Stylesheet
   แนวทาง: สมุดบันทึกการมาเรียนหน้าเสาธง
   น้ำเงินหมึกเข้ม + กระดาษเส้นบรรทัด + ทองเหลืองระฆังโรงเรียน
   ============================================================ */

:root{
  --ink:#16233A;          /* น้ำเงินหมึก */
  --ink-soft:#3C4C6B;
  --muted:#6B7890;
  --paper:#F2F5FA;        /* พื้นหลัง */
  --card:#FFFFFF;
  --rule:#DFE5EF;         /* เส้นบรรทัด */
  --brass:#D99B1F;        /* ทองเหลือง */
  --brass-soft:#FDF3DC;

  --present:#1E8E5A;
  --late:#D98816;
  --leave:#3D6FC4;
  --absent:#C6413A;

  --present-bg:#E4F4EC;
  --late-bg:#FCF0DE;
  --leave-bg:#E7EFFB;
  --absent-bg:#FBE9E8;

  --r:14px;
  --shadow:0 1px 2px rgba(22,35,58,.06), 0 8px 24px -12px rgba(22,35,58,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Sarabun','IBM Plex Sans Thai',Tahoma,'Leelawadee UI',sans-serif;
  font-size:16px; line-height:1.6; padding-bottom:84px;
}
h1,h2,h3,h4,.display{font-family:'IBM Plex Sans Thai','Sarabun',Tahoma,sans-serif; letter-spacing:-.01em; margin:0}
.num{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}
a{color:var(--ink)}

/* ---------- โครงหน้า ---------- */
.wrap{max-width:760px; margin:0 auto; padding:16px}
.stack > * + *{margin-top:14px}

/* ---------- แถบบน ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--ink); color:#fff;
  padding:12px 16px; display:flex; align-items:center; gap:12px;
  box-shadow:0 2px 12px rgba(22,35,58,.25);
}
.topbar__brand{display:flex; flex-direction:column; min-width:0; flex:1}
.topbar__title{font-size:16px; font-weight:600; font-family:'IBM Plex Sans Thai',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__sub{font-size:12px; color:#A9B7CF}
.topbar a{color:#fff; text-decoration:none}
.topbar__btn{
  background:rgba(255,255,255,.12); border:0; color:#fff; border-radius:10px;
  padding:8px 12px; font-size:14px; font-family:inherit; cursor:pointer; white-space:nowrap;
}
.topbar__btn:active{background:rgba(255,255,255,.25)}

/* ---------- การ์ด ---------- */
.card{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.card--flat{box-shadow:none}
.card__title{font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; margin-bottom:12px}
.card__title small{font-weight:400; color:var(--muted); font-size:13px}

.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); font-weight:600}

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--rule); background:#fff; color:var(--ink);
  border-radius:12px; padding:12px 16px; font-size:15px; font-family:inherit; font-weight:500;
  cursor:pointer; text-decoration:none; min-height:46px; transition:transform .06s ease;
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--brass{background:var(--brass); border-color:var(--brass); color:#3A2A05; font-weight:600}
.btn--danger{background:#fff; border-color:var(--absent); color:var(--absent)}
.btn--block{display:flex; width:100%}
.btn--sm{padding:8px 12px; min-height:38px; font-size:14px; border-radius:10px}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn-row .btn{flex:1 1 auto}

/* ---------- ฟอร์ม ---------- */
.field{display:block; margin-bottom:14px}
.field > span{display:block; font-size:13px; color:var(--ink-soft); font-weight:500; margin-bottom:6px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=tel],select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--rule); border-radius:12px;
  font-family:inherit; font-size:16px; background:#fff; color:var(--ink); min-height:48px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass)}
.hint{font-size:12.5px; color:var(--muted); margin-top:6px}

/* ---------- แจ้งเตือน ---------- */
.alert{border-radius:12px; padding:12px 14px; font-size:14.5px; margin-bottom:12px; border:1px solid}
.alert--success{background:var(--present-bg); border-color:#B7E2CC; color:#12603C}
.alert--error{background:var(--absent-bg); border-color:#F0BFBC; color:#8E2822}
.alert--info{background:var(--leave-bg); border-color:#C3D6F3; color:#25497F}
.alert--warn{background:var(--late-bg); border-color:#F0D6A6; color:#8A5A0B}

/* ---------- แถบสรุปสด (signature) ---------- */
.tally{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); padding:14px 16px; box-shadow:var(--shadow)}
.tally__head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px}
.tally__count{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; letter-spacing:-.02em}
.tally__count small{font-size:13px; color:var(--muted); font-family:'Sarabun',sans-serif; font-weight:400}
.tally__bar{display:flex; height:14px; border-radius:99px; overflow:hidden; background:#EDF0F6; border:1px solid var(--rule)}
.tally__seg{transition:width .35s cubic-bezier(.4,0,.2,1)}
.tally__legend{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13px}
.tally__legend span{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft)}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block}

/* ---------- รายชื่อเช็คชื่อ ---------- */
.roll{background:var(--card); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.roll__row{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--rule)}
.roll__row:last-child{border-bottom:0}
.roll__row[data-status=absent]{background:linear-gradient(90deg,var(--absent-bg),transparent 60%)}
.roll__row[data-status=leave]{background:linear-gradient(90deg,var(--leave-bg),transparent 60%)}
.roll__row[data-status=late]{background:linear-gradient(90deg,var(--late-bg),transparent 60%)}
.roll__no{
  flex:0 0 34px; height:34px; border-radius:9px; background:#EEF1F7; color:var(--ink-soft);
  display:grid; place-items:center; font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600;
}
.roll__name{flex:1; min-width:0; font-size:15px; line-height:1.3}
.roll__name small{display:block; color:var(--muted); font-size:12px; font-family:'IBM Plex Mono',monospace}
.roll__actions{display:flex; gap:4px; flex:0 0 auto}
.pill{
  border:1px solid var(--rule); background:#fff; color:var(--muted);
  min-width:44px; height:40px; border-radius:11px; font-family:inherit; font-size:13.5px; font-weight:600;
  cursor:pointer; display:grid; place-items:center; padding:0 6px; transition:all .12s ease;
}
.pill:active{transform:scale(.94)}
.pill[aria-pressed=true]{color:#fff; border-color:transparent}
.pill--present[aria-pressed=true]{background:var(--present)}
.pill--late[aria-pressed=true]{background:var(--late)}
.pill--leave[aria-pressed=true]{background:var(--leave)}
.pill--absent[aria-pressed=true]{background:var(--absent)}

/* ---------- สถิติ ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.stat-grid--4{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:12px 14px; border-left:4px solid var(--rule)}
.stat__label{font-size:12.5px; color:var(--muted)}
.stat__value{font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; line-height:1.2}
.stat__value small{font-size:13px; font-family:'Sarabun',sans-serif; color:var(--muted); font-weight:400}
.stat--present{border-left-color:var(--present)} .stat--present .stat__value{color:var(--present)}
.stat--late{border-left-color:var(--late)}       .stat--late .stat__value{color:var(--late)}
.stat--leave{border-left-color:var(--leave)}     .stat--leave .stat__value{color:var(--leave)}
.stat--absent{border-left-color:var(--absent)}   .stat--absent .stat__value{color:var(--absent)}
.stat--ink{border-left-color:var(--brass)}

/* ---------- ตาราง ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--rule); background:#fff}
table.data{width:100%; border-collapse:collapse; font-size:14px; min-width:480px}
table.data th{background:var(--ink); color:#fff; font-weight:500; text-align:left; padding:10px 12px; white-space:nowrap; font-size:13px}
table.data td{padding:9px 12px; border-bottom:1px solid var(--rule)}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even){background:#FAFBFD}
.tc{text-align:center} .tr{text-align:right}

.badge{display:inline-block; padding:2px 9px; border-radius:99px; font-size:12.5px; font-weight:600}
.badge--present{background:var(--present-bg); color:var(--present)}
.badge--late{background:var(--late-bg); color:var(--late)}
.badge--leave{background:var(--leave-bg); color:var(--leave)}
.badge--absent{background:var(--absent-bg); color:var(--absent)}
.badge--none{background:#EEF1F7; color:var(--muted)}

/* ---------- แถบสัปดาห์ ---------- */
.week{border:1px solid var(--rule); border-radius:12px; padding:12px 14px; background:#fff}
.week + .week{margin-top:10px}
.week__head{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:8px}
.week__rate{font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--present)}
.mini-bar{display:flex; height:10px; border-radius:99px; overflow:hidden; background:#EDF0F6}

/* ---------- แกลเลอรีภาพ ---------- */
.gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.gallery figure{margin:0; border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:#fff}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#EEF1F7}
.gallery figcaption{padding:8px 10px; font-size:12.5px; color:var(--muted)}

/* ---------- แถบเมนูล่าง ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff;
  border-top:1px solid var(--rule); display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 20px -8px rgba(22,35,58,.2);
}
.tabbar a{
  flex:1; text-align:center; text-decoration:none; color:var(--muted);
  font-size:11px; padding:6px 2px; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabbar a.is-active{color:var(--ink); background:var(--brass-soft)}
.tabbar svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}

/* ---------- อื่น ๆ ---------- */
.empty{text-align:center; padding:36px 20px; color:var(--muted)}
.empty strong{display:block; color:var(--ink); font-size:16px; margin-bottom:6px; font-family:'IBM Plex Sans Thai',sans-serif}
.divider{height:1px; background:var(--rule); margin:16px 0}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.saving{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:8px 16px; border-radius:99px; font-size:13.5px; opacity:0; transition:opacity .2s; z-index:60; pointer-events:none}
.saving.show{opacity:1}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.chip{white-space:nowrap; border:1px solid var(--rule); background:#fff; border-radius:99px; padding:7px 14px;
  font-size:14px; text-decoration:none; color:var(--ink-soft)}
.chip.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}

@media (min-width:640px){
  .stat-grid--4{grid-template-columns:repeat(4,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  body{padding-bottom:24px}
  .tabbar{position:sticky; bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---------- สำหรับพิมพ์เป็น PDF ---------- */
@media print{
  body{background:#fff; padding:0; font-size:12pt}
  .topbar,.tabbar,.no-print,.btn{display:none !important}
  .card,.roll,.table-scroll{box-shadow:none; border:1px solid #999; break-inside:avoid}
  table.data th{background:#16233A !important; color:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .wrap{max-width:none; padding:0}
}