/* ยืนยันและตรวจสอบข้อมูล OT — ธีมระบบงานองค์กร โทนน้ำเงิน
   แถบหัวสีน้ำเงินมีเส้นตารางจาง ๆ แบบใบลงเวลา · การ์ดขาว · ฟอนต์ IBM Plex Sans Thai
   กลางวัน/กลางคืนสลับเองตามเวลาพระอาทิตย์ขึ้น-ตกของกรุงเทพฯ (data-theme="day" | "night" ตั้งจาก SunClock + site.js)
   ไม่มีปุ่มให้ผู้ใช้สลับเอง และไม่อิงค่าโหมดมืดของเครื่อง */
:root{
  --night-op:0;
  --bg:#EEF5FF; --surface:#FFFFFF; --surface-2:#F2F7FF;
  --ink:#0E2748; --muted:#5A6E8A; --border:#D5E4F7; --title:#0D3B7A;
  --accent:#1668E3; --accent-2:#2F80F2; --accent-ink:#0F4FB8; --accent-tint:#E4EFFF; --on-accent:#FFFFFF;
  --cyan-ink:#0A7F95; --cyan-tint:#DDF6FA; --neutral-tint:#EAF0F8;
  --urgent:#A9530A; --urgent-tint:#FDEFD6; --ok:#157040; --ok-tint:#DDF3E5; --bad:#B42318; --bad-tint:#FDE6E2;
  --weekend:#F5F9FF; --edited:#FFF6DB;
  --shadow:0 18px 44px -24px rgba(16,72,160,.5); --shadow-sm:0 8px 22px -16px rgba(16,72,160,.45);
  --hero-ink:#FFFFFF; --hero-muted:rgba(255,255,255,.88); --hero-glass:#FFFFFF; --hero-glass-ink:#0F4FB8;
  --auth-top:#DDEAFF; --auth-orb-1:rgba(31,111,224,.24); --auth-orb-2:rgba(6,182,212,.16); --auth-dot:rgba(15,79,184,.14);
  --font-display:"IBM Plex Sans Thai","Leelawadee UI","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  --font-body:"IBM Plex Sans Thai","Leelawadee UI","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  /* ความกว้างหน้า: ยืด-หดตามจอ ขอบข้างโตตามจอ (16–48px) และจำกัดสูงสุดไว้ไม่ให้บรรทัดยาวเกินบนจอกว้างมาก */
  --page-max:112rem; --gutter:clamp(16px,2.5vw,48px);
}
:root[data-theme="night"]{
  --night-op:1;
  --bg:#0B1426; --surface:#12213F; --surface-2:#172A50;
  --ink:#E6EEFF; --muted:#9AB0D2; --border:#243E6B; --title:#BFD6FF;
  --accent:#3F82EE; --accent-2:#5B9BFF; --accent-ink:#A9CBFF; --accent-tint:#17315F; --on-accent:#FFFFFF;
  --cyan-ink:#8EE6F2; --cyan-tint:#0F3540; --neutral-tint:#1B2A45;
  --urgent:#FBC27A; --urgent-tint:#3A2A12; --ok:#86E0A6; --ok-tint:#12331F; --bad:#FF9E94; --bad-tint:#3B1B1D;
  --weekend:#0F1B35; --edited:#3A3214;
  --shadow:0 18px 44px -24px rgba(0,0,0,.75); --shadow-sm:0 8px 22px -16px rgba(0,0,0,.7);
  --hero-ink:#F2F6FF; --hero-muted:rgba(226,236,255,.85); --hero-glass:rgba(255,255,255,.1); --hero-glass-ink:#FFFFFF;
  --auth-top:#081530; --auth-orb-1:rgba(63,130,238,.22); --auth-orb-2:rgba(34,211,238,.1); --auth-dot:rgba(169,203,255,.1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  font-size:1rem; line-height:1.7; padding-inline:var(--gutter); min-height:100vh; display:flex; flex-direction:column;
  transition:background-color 1.2s ease, color 1.2s ease;
}
h1,h2,h3{font-family:var(--font-display); margin:0; line-height:1.3; text-wrap:balance; font-weight:600;}
h1{font-size:clamp(1.6rem,3.4vw,2.1rem);}
h2{font-size:1.25rem;}
h3{font-size:1.05rem; font-weight:500;}
p{margin:0;}
a{color:var(--accent-ink); text-underline-offset:3px;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
::selection{background:var(--accent); color:var(--on-accent);}
.num,code{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
code{font-size:.85em; background:var(--surface-2); padding:.05rem .35rem; border-radius:4px;}
.muted{color:var(--muted);}
.small{font-size:.875rem; line-height:1.6;}
.nowrap{white-space:nowrap;}
[hidden]{display:none !important;}
svg.i{width:1.1em; height:1.1em; flex:none; vertical-align:-.15em;}

/* ───────────────────────── แถบหัวหน้า ───────────────────────── */
.sky{
  position:relative; isolation:isolate; overflow:hidden; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-bottom:5rem;
  color:var(--hero-ink);
  background:linear-gradient(135deg,#0A47AE 0%,#1259C9 55%,#1F6FE0 100%);
}
/* กลางคืน: ค่อย ๆ เปลี่ยนเป็นน้ำเงินเข้มทับด้านบน (ไล่สีแบบ gradient เปลี่ยนตรง ๆ แบบนุ่มไม่ได้) */
.sky::before{
  content:""; position:absolute; inset:0; z-index:-2; opacity:var(--night-op); transition:opacity 2s ease;
  background:linear-gradient(135deg,#060F24 0%,#0B1A3A 55%,#122955 100%);
}
.sky-art{position:absolute; inset:0; z-index:-1; pointer-events:none;}
/* เส้นตารางจาง ๆ แบบใบลงเวลา — จางหายไปทางด้านล่าง */
.sky-art .grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:36px 36px; background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 55%,transparent 100%);
}
.sky-art .glow{position:absolute; top:-14rem; right:-10rem; width:38rem; height:38rem; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.14) 0%,transparent 62%);}
/* ขอบล่างจางลงเป็นสีพื้นหน้า เนื้อหาที่ซ้อนขึ้นมาจะดูต่อเนื่อง */
.sky::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5.5rem; z-index:-1; pointer-events:none; background:linear-gradient(180deg,transparent,var(--bg));}

/* ── แถบเมนูบนท้องฟ้า ── */
.topbar{position:relative; z-index:5;}
.topbar .bar{max-width:var(--page-max); margin:0 auto; display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; padding-block:.9rem;}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--hero-ink); flex:none;}
.brand img{width:2.2rem; height:2.2rem; display:block; background:#fff; border-radius:50%; padding:.15rem;}
.brand b{font-family:var(--font-display); font-size:1.08rem; font-weight:600; display:block; line-height:1.2;}
.brand small{font-size:.72rem; opacity:.85; display:block; line-height:1.3;}
.nav{display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; flex:1; min-width:0; justify-content:center;}
.nav .sep{width:1px; height:1.2rem; background:rgba(255,255,255,.35); margin-inline:.35rem;}
.nav a,details.menu summary{
  position:relative; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border-radius:8px;
  color:var(--hero-muted); text-decoration:none; font-size:.9rem; font-weight:500; white-space:nowrap;
}
.nav a:hover,details.menu summary:hover,details.menu[open] summary{color:var(--hero-ink); background:rgba(255,255,255,.14);}
.nav a.active,details.menu.on summary{color:var(--hero-ink); font-weight:600;}
.nav a.active::after,details.menu.on summary::before{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:-.2rem; height:2px; border-radius:2px; background:var(--hero-ink);
}
.nav .count{font-family:var(--font-mono); font-size:.7rem; font-weight:500; min-width:1.3rem; padding:0 .35rem; border-radius:999px; background:#fff; color:#0F4FB8; text-align:center; line-height:1.3rem;}
.nav .count.urgent{background:#FDEFD6; color:#A9530A;}
.me{display:flex; align-items:center; gap:.55rem; font-size:.82rem; flex:none;}
.me .who{color:var(--hero-muted);}
.me .who b{color:var(--hero-ink); font-weight:600;}
.me form{margin:0;}
.sun-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--hero-muted); white-space:nowrap;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); padding:.15rem .6rem; border-radius:999px;
}
.btn-ghost-light{
  display:inline-flex; align-items:center; gap:.4rem; font:inherit; font-size:.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
  color:var(--hero-ink); background:transparent; border:1.5px solid rgba(255,255,255,.75); border-radius:999px; padding:.25rem .9rem;
}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);}
@media (max-width:1500px){ .me .who{display:none;} }
/* เมนูของ HR/Admin ยาว (มีเส้นคั่น) — จอกว้างไม่พอให้อยู่แถวเดียวกับโลโก้ ย้ายเมนูลงแถวที่สองกลางจอ แทนการตัดบรรทัดทีละคำ */
@media (min-width:1061px) and (max-width:1900px){
  .bar:has(.nav .sep) .nav{order:3; flex-basis:100%; padding-bottom:.2rem;}
  .bar:has(.nav .sep) .me{margin-left:auto;}
}
@media (max-width:1060px){
  .nav{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:.35rem;}
  .me{margin-left:auto;}
}

details.menu{position:relative;}
details.menu summary{list-style:none; cursor:pointer;}
details.menu summary::-webkit-details-marker{display:none;}
details.menu summary::after{content:"▾"; font-size:.7rem;}
.menu-panel{
  position:absolute; top:calc(100% + .45rem); right:0; z-index:30; min-width:12.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow); padding:.4rem; display:flex; flex-direction:column; gap:.1rem;
}
.menu-panel a{color:var(--ink) !important; border-radius:8px;}
.menu-panel a:hover{background:var(--surface-2) !important;}
.menu-panel a.active{color:var(--accent-ink) !important; background:var(--accent-tint);}
.menu-panel a.active::after{display:none;}
@media (max-width:1060px){ .menu-panel{position:fixed; top:auto; left:var(--gutter); right:var(--gutter);} }

/* ── แถบบอกโหมด (ทดสอบ / สวมสิทธิ์) ── */
.mode-bars{max-width:var(--page-max); margin:0 auto .4rem; display:flex; flex-direction:column; gap:.4rem; position:relative; z-index:4;}
.mode-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.2rem .6rem; padding:.35rem 1rem; border-radius:999px;
  font-size:.86rem; line-height:1.5; text-align:center; color:var(--ink); background:var(--surface); box-shadow:var(--shadow-sm);
}
.mode-bar form{margin:0;}
.mode-bar.test{background:repeating-linear-gradient(-45deg,var(--cyan-tint) 0 12px,var(--surface) 12px 24px);}
.mode-bar.test > b:first-child{color:var(--cyan-ink);}
.mode-bar.imp{background:var(--urgent-tint);}
.mode-bar.imp > b:first-child{color:var(--urgent);}
.mode-bar a,.mode-bar .link-btn{font-weight:600;}
.mode-bar.preview{background:var(--accent-tint);}
.mode-bar.preview > b:first-child{color:var(--accent-ink);}
.preview-tabs{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.45rem .6rem;}
.preview-tabs form{margin:0;}
.preview-days{display:inline-flex; flex-wrap:wrap; align-items:center; gap:3px; padding:3px; border-radius:999px; background:rgba(0,20,70,.28);}
.preview-days .lbl{font-size:.78rem; color:var(--hero-muted); padding:0 .35rem 0 .45rem;}
.preview-days button,.preview-reset,.preview-guide summary{
  font:inherit; font-size:.8rem; cursor:pointer; border:0; border-radius:999px; color:var(--hero-ink); background:transparent; padding:.2rem .55rem; line-height:1.5;
}
.preview-days button{min-width:2rem; font-family:var(--font-mono);}
.preview-days button:hover,.preview-reset:hover,.preview-guide summary:hover{background:rgba(255,255,255,.2);}
.preview-days button.on{background:var(--surface); color:var(--accent-ink); font-weight:600;}
.preview-days button.reset-day{font-family:var(--font-body);}
.preview-reset,.preview-guide summary{padding:.3rem .85rem; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); font-weight:600;}
.preview-guide{position:relative;}
.preview-guide summary{list-style:none;}
.preview-guide summary::-webkit-details-marker{display:none;}
.preview-guide summary::after{content:" ▾"; font-size:.7rem;}
.preview-guide .guide-panel{
  position:absolute; right:0; top:calc(100% + .45rem); z-index:40; width:min(36rem, calc(100vw - 2rem)); padding:.9rem 1.1rem; border-radius:14px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.35rem; font-size:.86rem; text-align:left;
}
.preview-guide .guide-panel b{color:var(--title);}
.preview-guide .guide-panel ol{margin:0 0 .3rem; padding-left:1.3rem; display:flex; flex-direction:column; gap:.2rem;}
.preview-guide .guide-panel .small{color:var(--muted);}
@media (max-width:760px){ .preview-guide .guide-panel{position:fixed; left:1rem; right:1rem; top:auto; width:auto;} }
.preview-tabs a{padding:.3rem .85rem; border-radius:999px; font-size:.84rem; color:var(--hero-ink); background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); text-decoration:none;}
.preview-tabs a:hover{background:rgba(255,255,255,.24);}
.preview-tabs a.on{background:var(--surface); color:var(--accent-ink); font-weight:600; box-shadow:none;}
.preview-role{display:inline-flex; gap:2px; padding:2px; border-radius:999px; background:rgba(0,20,70,.28); margin-right:.35rem;}
.preview-role a{box-shadow:none; background:transparent; font-weight:600;}
.preview-toast{position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:60; max-width:calc(100% - 2rem); padding:.6rem 1rem; border-radius:10px; font-size:.88rem; color:var(--surface); background:var(--ink); box-shadow:var(--shadow);}

/* ── หัวหน้าบนท้องฟ้า ── */
.hero-inner{max-width:var(--page-max); margin:0 auto; position:relative; z-index:3; padding-top:1.4rem;}
.sky .page-head h1{color:var(--hero-ink); text-shadow:0 4px 18px rgba(0,30,90,.25);}
.sky .page-head .sub{color:var(--hero-muted);}
.sky .page-head .sub a{color:var(--hero-ink);}
.sky .crumb,.sky .crumb a{color:var(--hero-muted);}
.sky .page-head .btn-secondary{background:var(--hero-glass); color:var(--hero-glass-ink); border-color:rgba(255,255,255,.35);}
.sky .page-head .btn-secondary:hover{filter:brightness(1.05);}

/* ───────────────────────── พื้นที่เนื้อหา ───────────────────────── */
.wrap{max-width:var(--page-max); width:100%; margin:-3.2rem auto 0; padding-bottom:4rem; display:flex; flex-direction:column; gap:1.5rem; flex:1; position:relative; z-index:2;}
.page-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem;}
.page-head .sub{color:var(--muted); margin-top:.25rem; max-width:65ch;}
.page-head .actions{display:flex; gap:.5rem; flex-wrap:wrap;}
.crumb{font-size:.85rem; color:var(--muted); margin-bottom:.15rem;}
.crumb a{color:inherit;}
footer.site{max-width:var(--page-max); width:100%; margin:0 auto; padding-block:1.25rem; border-top:1px solid var(--border); font-size:.8rem; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;}
footer.site .to-top{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .8rem; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); color:var(--accent-ink); font-weight:600; text-decoration:none;}
footer.site .to-top:hover{box-shadow:inset 0 0 0 1px var(--accent-ink);}
footer.site .to-top svg{width:.95rem; height:.95rem;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }

.wrap > *,.stack > *,.cols > *{min-width:0;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.2rem 1.3rem; display:flex; flex-direction:column; gap:.85rem; box-shadow:var(--shadow-sm); transition:background-color 1.2s, border-color 1.2s;}
.card.lift{box-shadow:var(--shadow);}
.card-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem 1rem; flex-wrap:wrap;}
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,clamp(19rem,22vw,26rem)); gap:1.25rem; align-items:start;}
.cols > .side{display:flex; flex-direction:column; gap:1.25rem;}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;}
@media (max-width:900px){ .cols{grid-template-columns:minmax(0,1fr);} }
/* หน้าคำขอ: การ์ดประวัติต่อใต้ตารางรายวันทันที แถบขวายาวลงข้าง ๆ ได้ทั้งสองแถว
   แถวที่ 2 เป็น 1fr — ความสูงส่วนเกินของแถบขวาไปลงแถวล่าง ไม่ดันให้เกิดช่องว่างระหว่างตารางกับประวัติ */
@media (min-width:901px){
  .cols.detail-cols{grid-template-rows:auto 1fr;}
  .cols.detail-cols > .side{grid-column:2; grid-row:1 / span 2;}
  .cols.detail-cols > .detail-history{grid-column:1; grid-row:2;}
}
.history-grid{display:grid; gap:1rem 2rem;}
.history-grid.two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
@media (max-width:640px){ .history-grid.two{grid-template-columns:minmax(0,1fr);} }
.history-grid > div{display:flex; flex-direction:column; gap:.6rem;}
@media (max-width:640px){ .grid-2{grid-template-columns:minmax(0,1fr);} }
.stack{display:flex; flex-direction:column; gap:.6rem;}
.row{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;}

.section-title{display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem 1rem; flex-wrap:wrap;}
.section-title h2{color:var(--title); font-size:1.35rem;}
.section-title .en{display:block; font-size:.8rem; font-weight:500; color:var(--muted); margin-bottom:.05rem;}
.section-title .more{display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; font-weight:600; text-decoration:none;}
.section-title .more span{display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; border:1.5px solid currentColor;}

/* ── ข้อความแจ้ง ── */
.flash,.alert{border-radius:12px; padding:.7rem 1rem; display:flex; gap:.65rem; align-items:flex-start; line-height:1.6; font-size:.95rem;}
.flash{box-shadow:var(--shadow-sm);}
.flash svg,.alert svg{flex:none; width:1.1rem; height:1.1rem; margin-top:.2rem;}
.flash.ok,.alert.ok{background:var(--ok-tint); color:var(--ink);}
.flash.ok svg,.alert.ok svg{color:var(--ok);}
.flash.error,.alert.error{background:var(--bad-tint); color:var(--ink);}
.flash.error svg,.alert.error svg{color:var(--bad);}
.alert.warn{background:var(--urgent-tint); color:var(--ink);}
.alert.warn svg{color:var(--urgent);}
.alert.info{background:var(--accent-tint); color:var(--ink);}
.alert.info svg{color:var(--accent-ink);}
.alert ul{margin:.2rem 0 0; padding-left:1.1rem;}
.alert b{font-weight:600;}
.alert.wrong-owner{box-shadow:inset 0 0 0 1.5px var(--bad); padding-block:1rem;}
.alert.wrong-owner > div{display:flex; flex-direction:column; gap:.5rem; min-width:0;}
.alert.wrong-owner > div > b{font-size:1.05rem; color:var(--bad);}
.alert.wrong-owner p{margin:0;}
.alert.wrong-owner .kv{background:var(--surface); border-radius:10px; padding:.55rem .8rem;}
.alert.wrong-owner:focus{outline:none;}
table.data td.edited[title]{cursor:help;}

/* ── ปุ่มและฟอร์ม ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font:inherit; font-weight:600; font-size:.95rem;
  padding:.52rem 1.1rem; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none; line-height:1.4; white-space:nowrap;
  transition:filter .15s, background-color .15s, transform .15s;
}
.btn svg{width:1rem; height:1rem;}
.btn-primary{background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:var(--on-accent); box-shadow:0 8px 18px -10px rgba(22,104,227,.8);}
.btn-primary:hover{filter:brightness(1.07);}
.btn-secondary{background:var(--surface); color:var(--accent-ink); border-color:var(--border);}
.btn-secondary:hover{background:var(--surface-2);}
.btn-danger{background:var(--surface); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent);}
.btn-danger:hover{background:var(--bad-tint);}
.btn-ok{background:linear-gradient(180deg,#1E8A51,#157040); color:#fff; box-shadow:0 8px 18px -10px rgba(21,112,64,.8);}
.btn-ok:hover{filter:brightness(1.07);}
.btn-danger-solid{background:linear-gradient(180deg,#D23B3B,#B42828); color:#fff; box-shadow:0 8px 18px -10px rgba(180,40,40,.8);}
.btn-danger-solid:hover{filter:brightness(1.07);}

/* ── หน้าต่างยืนยัน (<dialog>) — ใช้กับการกระทำที่ย้อนกลับไม่ได้ เช่น ลบคำขอ ── */
.dialog{border:1px solid var(--border); border-radius:16px; padding:1.3rem 1.4rem; width:min(32rem, calc(100% - 2rem)); max-height:calc(100% - 2rem);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow);}
.dialog::backdrop{background:rgba(8,20,45,.55);}
.dialog h2{margin:0 0 .35rem; font-size:1.2rem; color:var(--title);}
.dialog .who{margin:0 0 .9rem; color:var(--muted); font-size:.95rem;}
.dialog .alert{margin-bottom:.8rem;}
.dialog .alert p{margin:.25rem 0 0;}
.dialog .alert b[hidden] + p{margin-top:0;}
.dialog .field textarea{min-height:4.5rem;}
.dialog .alert.error{box-shadow:inset 0 0 0 1.5px var(--bad);}
.dialog .alert.error b{color:var(--bad); font-size:1.02rem;}
.dialog-actions{display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem;}
.btn-glass{background:var(--hero-glass); color:var(--hero-glass-ink); box-shadow:0 12px 26px -14px rgba(0,30,90,.6); border-color:rgba(255,255,255,.35);}
.btn-glass:hover{transform:translateY(-1px);}
.btn-sm{padding:.25rem .7rem; font-size:.85rem; border-radius:8px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; box-shadow:none;}
.link-btn{background:none; border:0; padding:0; font:inherit; color:var(--accent-ink); cursor:pointer; text-decoration:underline; text-underline-offset:3px;}

label{font-size:.875rem; font-weight:600; color:var(--ink);}
.field{display:flex; flex-direction:column; gap:.3rem; min-width:0;}
.hint{font-size:.8rem; color:var(--muted); font-weight:400;}
input[type=text],input[type=password],input[type=search],input[type=date],select,textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.5rem .75rem; width:100%; min-width:0;
}
textarea{min-height:5.5rem; resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-tint);}
input[type=checkbox]{accent-color:var(--accent); width:1rem; height:1rem;}
.check{display:inline-flex; align-items:center; gap:.45rem; font-weight:500; cursor:pointer;}
.filters{display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end;}
.filters .field{flex:1 1 9rem;}
.filters .field.wide{flex:2 1 14rem;}
.drop{border:2px dashed var(--border); border-radius:14px; padding:1.4rem; background:var(--surface-2); display:flex; flex-direction:column; gap:.7rem; align-items:flex-start;}
.drop.drag{border-color:var(--accent-2); background:var(--accent-tint);}
.drop input[type=file]{font:inherit; font-size:.9rem; max-width:100%; color:var(--ink);}

/* ── ป้ายสถานะ ── */
.chip{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.8rem; font-weight:600; line-height:1.55; padding:.02rem .6rem; border-radius:999px;}
.chip.pending{background:var(--accent-tint); color:var(--accent-ink);}
.chip.rejected{background:var(--bad-tint); color:var(--bad);}
.chip.approved{background:var(--ok-tint); color:var(--ok);}
.chip.replaced{background:var(--neutral-tint); color:var(--muted);}
.chip.deleted{background:var(--neutral-tint); color:var(--bad);}
.chip.urgent{background:var(--urgent-tint); color:var(--urgent);}
.chip.urgent::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--urgent);}
.chip.edited{background:var(--surface); color:var(--muted); box-shadow:inset 0 0 0 1px var(--border);}
.chips{display:inline-flex; flex-wrap:wrap; gap:.3rem; align-items:center;}

/* ── ตัวเลข ── */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem;}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));} }
.stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.75rem 1rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:.05rem; box-shadow:var(--shadow-sm);}
.stat:hover{border-color:var(--accent-2);}
.stat.on{box-shadow:inset 0 0 0 2px var(--accent-2), var(--shadow-sm); border-color:var(--accent-2);}
.stat .k{font-size:.8rem; color:var(--muted); font-weight:600;}
.stat .v{font-family:var(--font-display); font-size:1.75rem; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums;}
.stat .note{font-size:.78rem; color:var(--urgent); font-weight:600;}
.stat .v small{font-size:.9rem; font-weight:500; color:var(--muted);}
.stat .sum-note{font-size:.8rem; color:var(--muted);}
.stat .sum-note b{color:var(--accent-ink); font-weight:600;}
.stat.static:hover{border-color:var(--border);}

/* ── ผลเทียบกับไฟล์ OT ของ HR: เขียว = ตรงกัน · เหลือง = ตัวเลขไม่ตรง · แดง = ข้อมูลผิด ── */
.mchip{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; font-size:.8rem; font-weight:600; line-height:1.55; padding:.02rem .6rem; border-radius:999px;}
.mchip::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:currentColor;}
.mchip.m-ok{background:var(--ok-tint); color:var(--ok);}
.mchip.m-diff{background:var(--urgent-tint); color:var(--urgent);}
.mchip.m-bad{background:var(--bad-tint); color:var(--bad);}
.mchip.m-none{background:var(--neutral-tint); color:var(--muted);}
.match-stats{margin-top:-.2rem;}
.match-stats .stat .v{font-size:1.4rem;}
.match-stats .stat.m-ok .v{color:var(--ok);}
.match-stats .stat.m-diff .v{color:var(--urgent);}
.match-stats .stat.m-bad .v{color:var(--bad);}

/* การ์ดไฟล์ของรอบในหน้าติดตามการส่ง OT */
.file-card{display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-start; justify-content:space-between;
  background:var(--neutral-tint); border-radius:12px; padding:.8rem 1rem;}
.file-card .actions{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;}

/* สรุป OT รายคน — แถบใต้ยอดรวมเทียบกับคนที่ OT มากสุดของตาราง */
table.summary th.tot,table.summary td.tot{background:var(--accent-tint);}
table.summary td{white-space:nowrap;}
table.summary tbody td.tot b{color:var(--accent-ink); font-weight:600;}
table.summary .bar{display:block; height:3px; width:var(--w); min-width:2px; margin:.25rem 0 0 auto; border-radius:2px; background:var(--accent-2); opacity:.7;}
.summary-filter{padding-block:.85rem;}

.totals{display:grid; grid-template-columns:repeat(var(--cols,6),minmax(0,1fr)); border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface);}
.totals > div{padding:.55rem .75rem; display:flex; flex-direction:column; gap:.05rem; border-right:1px solid var(--border); min-width:0;}
.totals > div:last-child{border-right:0; background:var(--accent-tint);}
.totals .k{font-size:.75rem; letter-spacing:.04em; color:var(--muted); font-weight:600;}
.totals .v{font-family:var(--font-mono); font-size:1.2rem; font-weight:500;}
.totals .zero{color:var(--muted);}
@media (max-width:640px){
  .totals{grid-template-columns:repeat(3,minmax(0,1fr));}
  .totals > div:nth-child(3){border-right:0;}
  .totals > div:nth-child(-n+3){border-bottom:1px solid var(--border);}
}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.35rem 1rem; margin:0; font-size:.95rem;}
.kv dt{color:var(--muted);}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere;}

/* ── ตาราง ── */
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.data{border-collapse:collapse; width:100%; font-size:.925rem;}
table.data th,table.data td{text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--border); vertical-align:middle;}
table.data th{font-size:.78rem; font-weight:600; color:var(--muted); background:var(--surface-2); white-space:nowrap;}
table.data td.r,table.data th.r{text-align:right;}
table.data td.c,table.data th.c{text-align:center;}
table.data td.num{white-space:nowrap;}
table.data tbody tr:hover td{background:var(--accent-tint);}
table.data tfoot td{font-weight:600; background:var(--surface-2); border-bottom:0;}
table.data .dash{color:var(--muted);}
table.data tr.weekend td{background:var(--weekend);}
table.data td.edited{background:var(--edited) !important; box-shadow:inset 0 -2px 0 var(--urgent);}
table.data tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--urgent);}
table.data .day{color:var(--muted); font-size:.78rem; margin-left:.35rem; font-family:var(--font-body);}
.day-table:not(.show-all) tr.quiet{display:none;}

/* ── ตารางรายวัน ── */
table.days{font-size:.93rem;}
table.days thead th{background:var(--surface-2); vertical-align:bottom;}
table.days thead th.grp{text-align:center; color:var(--accent-ink); border-bottom:1px solid var(--border); padding-bottom:.3rem;}
table.days thead th.grp span{font-weight:400; color:var(--muted);}
table.days thead th.sub{font-size:.9rem; color:var(--ink); min-width:4.6rem; padding-top:.3rem;}
table.days thead th.tot{min-width:4.8rem;}
table.days td{padding:.55rem .75rem;}
table.days td.d{white-space:nowrap;}
table.days td.d .dow{display:inline-block; min-width:2.1rem; margin-right:.55rem; padding:.02rem .3rem; border-radius:6px; text-align:center; font-size:.74rem; font-weight:600; color:var(--muted); background:var(--neutral-tint);}
table.days tr.weekend td.d .dow{color:var(--accent-ink); background:var(--accent-tint);}
table.days td.t{white-space:nowrap; line-height:1.45;}
table.days td.t .second{display:block; color:var(--muted);}
table.days td.t .none{color:var(--muted); font-size:.85rem;}
table.days td.t .warn{display:block; color:var(--urgent); font-size:.76rem; font-weight:600;}
table.days td.ot{color:var(--ink); font-weight:500;}
/* tbody tr ช่วยให้ชนะสไตล์แถวเสาร์-อาทิตย์ (table.data tr.weekend td) ช่องรวมจะมีพื้นสีเท่ากันทุกแถว */
table.days tbody tr td.tot{background:color-mix(in srgb,var(--accent-tint) 70%,transparent); color:var(--accent-ink); font-weight:600;}
table.days tbody tr:hover td.tot{background:var(--accent-tint);}
table.days tfoot td{border-top:2px solid var(--border);}
table.days tfoot td.tot{background:var(--accent-tint);}
.seg{display:inline-flex; gap:.15rem; padding:.18rem; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);}
/* ปุ่มกลุ่ม — ใช้ได้ทั้งแบบกดสลับด้วย JS (button) และแบบลิงก์เปลี่ยนตัวกรอง (a) */
.seg button, .seg a{font:inherit; font-size:.85rem; font-weight:500; border:0; border-radius:8px; padding:.28rem .75rem; background:transparent; color:var(--muted); cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;}
.seg button b, .seg a b{font-family:var(--font-mono); font-weight:500; font-size:.78rem; padding:0 .35rem; border-radius:999px; background:var(--neutral-tint);}
.seg button.on, .seg a.on{background:var(--surface); color:var(--accent-ink); font-weight:600; box-shadow:var(--shadow-sm);}
.seg button.on b, .seg a.on b{background:var(--accent-tint); color:var(--accent-ink);}
.table-legend{display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--muted);}
.table-legend .sw{display:inline-block; width:.8rem; height:.8rem; border-radius:3px; margin-left:.5rem;}
.table-legend .sw.we{background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--border);}
.table-legend .sw.warn{background:var(--urgent);}
table.list td a.name{font-weight:600; text-decoration:none; color:var(--ink);}
table.list td a.name:hover{color:var(--accent-ink); text-decoration:underline;}
.table-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm);}
.table-card table.data tr:last-child td{border-bottom:0;}
.table-tools{display:flex; justify-content:space-between; align-items:center; gap:.5rem 1rem; flex-wrap:wrap; padding:.65rem 1rem; border-bottom:1px solid var(--border);}
.empty{padding:2.5rem 1rem; text-align:center; color:var(--muted); display:flex; flex-direction:column; gap:.4rem; align-items:center;}
.empty b{color:var(--ink); font-family:var(--font-display); font-size:1.05rem; font-weight:500;}
.pager{display:flex; gap:.4rem; align-items:center; justify-content:flex-end; padding:.6rem .9rem; border-top:1px solid var(--border); font-size:.875rem;}

/* ── รอบและกำหนดส่ง ── */
.round-card{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; align-items:center;}
.round-card .label{font-family:var(--font-display); font-size:1.6rem; font-weight:600; line-height:1.25; color:var(--title);}
.round-card .period{font-family:var(--font-mono); font-size:.9rem; color:var(--muted);}
@media (max-width:640px){ .round-card{grid-template-columns:1fr;} }
.window{display:flex; gap:.3rem; flex-wrap:wrap;}
.window span{font-family:var(--font-mono); font-size:.78rem; padding:.15rem .45rem; border-radius:6px; background:var(--neutral-tint); color:var(--muted);}
.window span.open{background:var(--accent); color:var(--on-accent);}
.window span.urg{background:var(--urgent-tint); color:var(--urgent); box-shadow:inset 0 0 0 1.5px var(--urgent);}
.window span.today{outline:2px solid var(--ink); outline-offset:1px;}

/* ── หน้าตั้งค่า: ช่วงรับข้อมูล (เปิดรับ / ช่วงผ่อนผัน / ปิดรับ แถวละ วันที่ + เวลา) ── */
fieldset.plain{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:.9rem;}
.win-rows{display:flex; flex-direction:column;}
.win-row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap:.5rem 1rem; align-items:end;
  padding:.75rem 0; border-bottom:1px solid var(--border);}
.win-row:first-child{padding-top:0;}
.win-row:last-child{border-bottom:0; padding-bottom:0;}
.win-k{display:flex; flex-direction:column; gap:.2rem; align-self:center; min-width:0;}
.win-k b{font-weight:600; color:var(--title);}
[data-group].off{opacity:.45;}
@media (max-width:560px){
  .win-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .win-k{grid-column:1 / -1;}
}
.confirm-card{box-shadow:inset 0 0 0 2px var(--accent-2), var(--shadow);}
.confirm-card:focus{outline:none;}

/* ── หน้าตั้งค่า: แท็บในแถบหัวหน้า (ช่วงรับข้อมูล / สิทธิ์ผู้ใช้) ── */
.sky .page-head .seg{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3);}
.sky .page-head .seg a{color:var(--hero-ink);}
.sky .page-head .seg a.on{background:var(--hero-glass); color:var(--hero-glass-ink);}
:root[data-theme="night"] .sky .page-head .seg a.on{background:rgba(255,255,255,.24);}

/* ── หน้าตั้งค่า: สิทธิ์ผู้ใช้ ── */
.chip.role-admin{background:var(--accent); color:var(--on-accent);}
.chip.role-hr{background:var(--accent-tint); color:var(--accent-ink);}
.chip.role-user{background:var(--neutral-tint); color:var(--muted);}
.chip.role-now{background:var(--ok-tint); color:var(--ok); font-size:.72rem; margin-left:.35rem;}
.role-lock{display:inline-block; max-width:14rem; white-space:normal; text-align:right;}
/* ตัวกรอง 5 ปุ่ม — จอแคบให้ขึ้นบรรทัดใหม่ทั้งปุ่ม ไม่ตัดคำกลางปุ่ม */
.role-tools .seg{flex-wrap:wrap; max-width:100%;}
.role-tools .seg a{white-space:nowrap;}
.role-opts{display:flex; flex-direction:column; gap:.5rem;}
.role-opt{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .7rem; align-items:start; padding:.7rem .9rem;
  border:1px solid var(--border); border-radius:12px; cursor:pointer; font-size:.95rem; font-weight:400; background:var(--surface);}
.role-opt input{margin:.3rem 0 0; accent-color:var(--accent); width:1rem; height:1rem;}
.role-opt b{font-weight:600; color:var(--title);}
.role-opt .hint{grid-column:2; font-size:.85rem;}
.role-opt:has(input:checked){border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-tint);}
.role-opt.off{opacity:.5; cursor:not-allowed;}
fieldset[disabled] .role-opt{cursor:default;}

/* ── ลายเซ็น (กระดาษขาวเสมอ ทั้งกลางวันและกลางคืน) ── */
.sig-box{background:#FFFFFF; color:#16202E; border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem .6rem; display:flex; flex-direction:column; align-items:center; gap:.1rem; text-align:center; min-width:12rem;}
.sig-box .line{height:3.4rem; width:100%; border-bottom:1px dotted #16202E; display:flex; align-items:flex-end; justify-content:center; padding-bottom:.15rem;}
.sig-box img{max-height:3.2rem; max-width:100%; object-fit:contain;}
.sig-box .stamp{font-style:italic; font-size:1.05rem; font-family:var(--font-body);}
.sig-box .who{font-size:.85rem;}
.sig-box .role{font-size:.78rem; color:#5C6B80;}
.sig-box .empty-line{color:#8A96A8; font-size:.8rem;}
.sig-pair{display:flex; gap:1rem; flex-wrap:wrap;}
.sig-pair > *{flex:1 1 12rem;}
/* รูปย่อในตารางลายเซ็นพนักงาน — พื้นขาวเสมอ ลายเซ็นสแกนส่วนใหญ่เป็นหมึกเข้มบนพื้นโปร่งใส */
.sig-thumb{max-height:2.6rem; max-width:11rem; object-fit:contain; background:#FFFFFF; border:1px solid var(--border); border-radius:8px; padding:.15rem .3rem;}
.text-urgent{color:var(--urgent); font-weight:600;}
.sig-search input[type=search]{width:min(16rem, 46vw);}

/* ── ประวัติ ── */
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.timeline li{display:grid; grid-template-columns:.75rem minmax(0,1fr); gap:.6rem; padding-bottom:.75rem; position:relative;}
.timeline li::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--accent-2); margin-top:.5rem;}
.timeline li::after{content:""; position:absolute; left:.25rem; top:1.2rem; bottom:0; width:1px; background:var(--border);}
.timeline li:last-child::after{display:none;}
.timeline .t{font-size:.9rem; line-height:1.5;}
.timeline .t b{font-weight:600;}
.timeline .m{font-size:.8rem; color:var(--muted);}
.reason{background:var(--bad-tint); border-radius:12px; padding:.7rem .9rem; font-size:.95rem; white-space:pre-wrap; overflow-wrap:anywhere;}

details.raw summary{cursor:pointer; color:var(--muted); font-size:.9rem;}
details.raw pre{font-family:var(--font-mono); font-size:.78rem; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.75rem; max-height:26rem; overflow:auto; white-space:pre;}
input.hm{width:4.6rem; text-align:right; font-family:var(--font-mono); padding:.25rem .45rem; font-size:.875rem;}
input.hm.changed{background:var(--edited); border-color:var(--urgent);}
.reupload{display:flex; flex-direction:column; gap:.75rem; scroll-margin-top:1.5rem;}
.reupload-steps{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.25rem;}
.reupload-steps li::marker{color:var(--accent-ink); font-weight:600;}
.reupload:target .drop{box-shadow:0 0 0 3px var(--accent-tint);}

/* ───────────────────────── หน้าแรก ───────────────────────── */
.sky.home{padding-bottom:6rem;}
.sky.home .hero-inner{padding-top:1.6rem;}
/* คอลัมน์ข้อความกว้างไม่เกิน 42rem แล้วปฏิทินต่อท้ายทันที — จอกว้างปฏิทินจะไม่ลอยห่างไปชิดขอบขวา (จอแคบคอลัมน์ข้อความหดลงเอง) */
/* จอทั่วไป: ข้อความ+สถิติ (ซ้าย) | ปฏิทิน (ขวา) · จอกว้าง ≥1680px: ข้อความ | ปฏิทิน | สถิติ 2×2 กระจายเต็มแถว · จอแคบ: เรียงลงล่าง */
.home-grid{
  display:grid; grid-template-columns:minmax(0,42rem) minmax(0,clamp(21rem,26vw,27rem)); grid-template-areas:"hero cal" "stats cal";
  justify-content:start; column-gap:clamp(2rem,4vw,4.5rem); row-gap:1rem; align-items:center; padding-bottom:1.5rem;
}
.home-grid > .home-hero{grid-area:hero; align-self:end;}
.home-grid > .hero-stats{grid-area:stats; align-self:start;}
.home-grid > .cal-card{grid-area:cal;}
@media (max-width:900px){ .home-grid{grid-template-columns:minmax(0,1fr); grid-template-areas:"hero" "stats" "cal";} }
@media (min-width:1680px){
  /* กล่องสถิติกว้างและสูงเท่าปฏิทิน ขอบบน-ล่างตรงกัน */
  .home-grid{grid-template-columns:minmax(0,42rem) minmax(0,27rem) minmax(0,27rem); grid-template-areas:"hero cal stats"; justify-content:space-between;}
  .home-grid > .home-hero{align-self:center;}
  .home-grid > .cal-card{align-self:stretch;}
  .home-grid > .hero-stats{
    align-self:stretch; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr));
    gap:.7rem; width:100%; padding:.7rem; border-radius:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  }
  .home-grid .hero-stat{justify-content:center; padding:1rem 1.3rem; border-radius:12px;}
  .home-grid .hero-stat .ico{top:.85rem; right:.95rem; padding:.45rem; border-radius:10px;}
  .home-grid .hero-stat .ico svg{width:1.35rem; height:1.35rem;}
  .home-grid .hero-stat b{font-size:1.9rem;}
  .home-grid .hero-stat .lbl{font-size:.84rem; white-space:normal;}
}
.home-hero{display:flex; flex-direction:column; gap:.55rem; max-width:40rem;}
.home-hero .org{font-size:.85rem; color:var(--hero-muted);}
.home-hero h1{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700; line-height:1.2; color:var(--hero-ink);}
.home-hero h1 small{display:block; font-size:clamp(1rem,2vw,1.2rem); font-weight:500; color:var(--hero-muted); margin-top:.35rem;}
.lead{color:var(--hero-muted); max-width:46ch; font-size:1rem;}
.hero-actions{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem;}
.btn-light{background:#FFFFFF; color:#0F4FB8; box-shadow:0 10px 24px -14px rgba(0,20,70,.7);}
.btn-light:hover{background:#F2F7FF;}
.btn-outline-light{background:transparent; color:var(--hero-ink); border-color:rgba(255,255,255,.6);}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}

/* ปฏิทินรอบ (ด้านขวาของหัวหน้าแรก) */
.cal-card{background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:14px; padding:1rem 1.1rem 1.1rem; box-shadow:0 24px 48px -28px rgba(0,20,70,.8); display:flex; flex-direction:column; gap:.7rem;}
.cal-card .cal-head{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;}
.cal-card .cal-head b{font-size:1rem; font-weight:600; color:var(--title);}
.cal-card .cal-head span{font-size:.78rem; color:var(--muted);}
.mini-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.25rem; text-align:center;}
.mini-cal .dow{font-size:.7rem; color:var(--muted); font-weight:600; padding-bottom:.1rem;}
.mini-cal .d{font-family:var(--font-mono); font-size:.8rem; line-height:1; padding:.5rem 0; border-radius:6px; color:var(--muted); background:var(--surface-2);}
.mini-cal .d.blank{background:transparent;}
.mini-cal .d.open{background:var(--accent); color:var(--on-accent); font-weight:500;}
.mini-cal .d.urg{background:var(--urgent-tint); color:var(--urgent); box-shadow:inset 0 0 0 1.5px var(--urgent); font-weight:500;}
.mini-cal .d.closed{background:transparent; color:color-mix(in srgb,var(--muted) 70%,transparent);}
.mini-cal .d.today{outline:2px solid var(--ink); outline-offset:1px; color:var(--ink);}
.cal-legend{display:flex; flex-wrap:wrap; gap:.2rem .8rem; font-size:.72rem; color:var(--muted);}
.cal-legend span{display:inline-flex; align-items:center; gap:.3rem;}
.cal-legend i{width:.7rem; height:.7rem; border-radius:3px; display:inline-block;}
.cal-legend .l-open{background:var(--accent);}
.cal-legend .l-urg{background:var(--urgent-tint); box-shadow:inset 0 0 0 1.5px var(--urgent);}
.cal-legend .l-in{background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border);}

/* แถบสถานะรอบของฉัน (ซ้อนขึ้นมาบนแถบหัว) */
.wrap.flush{margin-top:0; padding-top:.5rem;}
.quick-panel{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:.9rem 1rem;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:.5rem; align-items:center;
}
.qf{display:flex; flex-direction:column; gap:.1rem; padding:.2rem .9rem; border-right:1px solid var(--border); min-width:0;}
.qf:nth-child(4){border-right:0;}
.qf .k{font-size:.78rem; color:var(--muted);}
.qf b{font-weight:600; font-size:.98rem; overflow-wrap:anywhere;}
.quick-panel .btn{padding:.62rem 1.2rem;}
@media (max-width:900px){
  .quick-panel{grid-template-columns:repeat(2,minmax(0,1fr));}
  .qf{border-right:0; border-bottom:1px solid var(--border); padding-block:.5rem;}
  .quick-panel .btn{grid-column:1 / -1;}
}

/* กล่องไอคอน */
.icon-tile{width:2.8rem; height:2.8rem; border-radius:10px; display:grid; place-items:center; color:var(--accent-ink); background:var(--accent-tint); flex:none;}
.icon-tile svg{width:1.35rem; height:1.35rem;}

/* การ์ดคำขอ — แถบสีด้านบนบอกสถานะ */
/* จำนวนคอลัมน์ตามความกว้างจริง: การ์ดกว้างอย่างน้อย ~11rem แล้วยืดเต็มแถว (แท็บเล็ตยังได้ 4 ใบต่อแถว) */
.req-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); gap:1rem;}
.req-card{position:relative; background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--accent); border-radius:12px; display:flex; flex-direction:column; gap:.5rem; padding:.9rem 1rem 1rem; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, border-color .15s ease;}
.req-card:hover{box-shadow:var(--shadow);}
.req-card.st-rejected{border-top-color:var(--bad);}
.req-card.st-approved{border-top-color:var(--ok);}
.req-card.st-urgent{border-top-color:var(--urgent);}
.req-card .req-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem;}
.req-card .req-top .k{display:block; font-size:.74rem; color:var(--muted);}
.req-card .req-top b{font-size:1.02rem; font-weight:600; color:var(--title); line-height:1.35;}
.req-meta{display:flex; flex-wrap:wrap; gap:.2rem .8rem; font-size:.8rem; color:var(--muted);}
.req-meta span{display:inline-flex; align-items:center; gap:.3rem;}
.req-foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem; padding-top:.5rem; border-top:1px solid var(--border);}
.req-foot .big{font-family:var(--font-mono); font-size:1.4rem; font-weight:500; color:var(--accent-ink); line-height:1.15; font-variant-numeric:tabular-nums;}
.req-foot .big small{display:block; font-family:var(--font-body); font-size:.72rem; font-weight:400; color:var(--muted);}
.go{display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:8px; background:var(--accent-tint); color:var(--accent-ink); flex:none;}
.req-card.placeholder{align-items:center; justify-content:center; text-align:center; padding:1.5rem; gap:.5rem; min-height:11rem; border:1px dashed var(--border); box-shadow:none;}

/* ชั่วโมง OT แยกประเภท */
.types-band{
  position:relative; overflow:hidden; border-radius:14px; padding:1.4rem; color:#fff; box-shadow:var(--shadow);
  background:linear-gradient(135deg,#0A47AE 0%,#1259C9 60%,#1F6FE0 100%);
  display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr); gap:1.3rem; align-items:stretch;
}
:root[data-theme="night"] .types-band{background:linear-gradient(135deg,#060F24 0%,#0B1A3A 60%,#142B5A 100%);}
.types-band .intro{display:flex; flex-direction:column; gap:.4rem;}
.types-band .intro h2{color:#fff; font-size:1.25rem;}
.types-band .intro p{font-size:.86rem; opacity:.9;}
.ot-types{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr)); gap:.8rem;}
@media (max-width:1000px){ .types-band{grid-template-columns:minmax(0,1fr);} }
.ot-type{position:relative; background:var(--surface); color:var(--ink); border-radius:12px; padding:1.1rem 1rem 1rem; display:flex; flex-direction:column; gap:.15rem;}
.ot-type.top{box-shadow:inset 0 0 0 2px #7FB2FF, 0 16px 32px -20px rgba(0,20,70,.6);}
.ot-type .ribbon{position:absolute; top:.8rem; right:.8rem; white-space:nowrap; font-size:.7rem; font-weight:600; padding:.05rem .5rem; border-radius:999px; color:var(--accent-ink); background:var(--accent-tint);}
.ot-type h3{font-size:1.05rem; font-weight:600; color:var(--title);}
.ot-type .rate{font-size:.78rem; color:var(--muted);}
.ot-type .hours{font-family:var(--font-mono); font-size:1.85rem; font-weight:500; color:var(--accent-ink); line-height:1.2; margin-top:.4rem; font-variant-numeric:tabular-nums;}
.ot-type .unit{font-size:.74rem; color:var(--muted);}
.ot-type ul{list-style:none; margin:.6rem 0 .8rem; padding:.6rem 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:.2rem; font-size:.82rem;}
.ot-type li{display:flex; gap:.45rem; align-items:flex-start;}
.ot-type li svg{color:var(--accent); margin-top:.28rem; width:.85rem; height:.85rem;}
.ot-type .btn{margin-top:auto;}

/* สถิติย่อ — การ์ดขาวแบบเดียวกับปฏิทิน ตัวเลขน้ำเงิน ไอคอนในกล่องฟ้าอ่อน (กลางคืนเป็นการ์ดกรมท่าตามโทเคน)
   ใต้ปุ่มในหัวหน้า · จอแคบเป็น 2×2 · จอกว้างดู .home-grid */
.hero-stats{display:flex; flex-wrap:wrap; gap:.5rem; max-width:100%;}
.hero-stat{
  position:relative; overflow:hidden; display:flex; flex-direction:column; min-width:7.5rem; padding:.5rem 2.4rem .5rem .9rem;
  border-radius:10px; color:var(--ink); background:var(--surface); border:1px solid var(--border); box-shadow:0 14px 28px -18px rgba(0,20,70,.8);
}
.hero-stat .ico{position:absolute; top:.45rem; right:.5rem; line-height:0; padding:.25rem; border-radius:7px; color:var(--accent-ink); background:var(--accent-tint);}
.hero-stat .ico svg{width:.9rem; height:.9rem;}
.hero-stat b{font-family:var(--font-mono); font-size:1.15rem; font-weight:600; line-height:1.35; color:var(--accent-ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.hero-stat b.txt{font-family:var(--font-body);}
.hero-stat .lbl{font-size:.74rem; line-height:1.35; color:var(--muted); white-space:nowrap;}
@media (max-width:600px){
  .hero-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%;}
  .hero-stat{min-width:0;}
  .hero-stat .lbl{white-space:normal;}
}

/* หน้าติดตามการส่ง OT: กล่องสถิติที่มีคนอยู่กดได้ พาไปที่รายชื่อของกลุ่มนั้น · กลุ่มที่ว่างเป็นตัวเลขจาง กดไม่ได้ */
.compare-stats .stat-link{text-decoration:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;}
.compare-stats .stat-link:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:0 18px 30px -18px rgba(0,20,70,.9);}
.compare-stats .stat-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.compare-stats .is-zero b{color:var(--muted);}
.compare-ok summary{cursor:pointer;}

/* ── หน้าเข้าสู่ระบบ: พื้นไล่สีมีวงแสงและลายจุด · กล่องกลางจอสองฝั่ง (แผงชื่อระบบ + ฟอร์ม) ── */
body.auth-page{padding:0;}
.auth-wrap{position:relative; isolation:isolate; overflow:hidden; min-height:100vh; padding:2.5rem 20px; display:grid; align-content:center; justify-items:center; gap:1.2rem;}
.auth-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42rem 30rem at 8% 6%,var(--auth-orb-1),transparent 70%),
    radial-gradient(38rem 30rem at 96% 100%,var(--auth-orb-2),transparent 70%),
    linear-gradient(180deg,var(--auth-top) 0%,var(--bg) 70%);
  transition:background 1.2s ease;
}
.auth-bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--auth-dot) 1.1px,transparent 1.3px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 80%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000 20%,transparent 80%);
}
.auth-card{
  width:min(100%,56rem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  background:var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 44px 90px -46px rgba(8,34,90,.6), 0 2px 8px rgba(8,34,90,.05);
}
.auth-side{
  position:relative; isolation:isolate; overflow:hidden; color:#fff; padding:2rem 2rem 1.8rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  background:linear-gradient(155deg,#0A47AE 0%,#1259C9 60%,#1F6FE0 100%);
}
.auth-side::before{content:""; position:absolute; inset:0; z-index:-2; opacity:var(--night-op); transition:opacity 2s ease; background:linear-gradient(155deg,#060F24 0%,#0B1A3A 60%,#142B5A 100%);}
.auth-org{display:flex; align-items:center; gap:.7rem;}
.auth-org img{width:2.7rem; height:2.7rem; border-radius:50%; background:#fff; padding:.2rem; box-shadow:0 0 0 4px rgba(255,255,255,.18);}
.auth-org b{display:block; font-size:.95rem; font-weight:600; line-height:1.25;}
.auth-org small{display:block; font-size:.75rem; opacity:.8;}
.auth-intro{display:flex; flex-direction:column; gap:.6rem;}
.auth-intro h1{font-size:clamp(2rem,3.4vw,2.6rem); font-weight:700; line-height:1.15; color:#fff;}
.auth-intro p{font-size:.98rem; color:rgba(255,255,255,.86); max-width:28ch;}
.auth-round{display:flex; gap:.7rem; align-items:flex-start; padding:.8rem .95rem; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);}
.auth-round > svg{width:1.25rem; height:1.25rem; flex:none; margin-top:.15rem;}
.auth-round b{display:block; font-size:.92rem; font-weight:600;}
.auth-round span{display:block; font-size:.8rem; opacity:.86;}
.auth-pane{padding:2.3rem 2.2rem 2rem; display:flex; flex-direction:column; justify-content:center; gap:1.15rem;}
.auth-pane-head h2{font-size:1.6rem; font-weight:700; color:var(--title); line-height:1.25;}
.auth-pane-head p{font-size:.88rem; color:var(--muted); margin-top:.2rem;}
.input-icon{position:relative;}
.input-icon > svg{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.input-icon input{height:3rem; padding-left:2.55rem; font-size:1rem; background:var(--surface);}
.input-icon input#password{padding-right:2.8rem;}
.pw-toggle{position:absolute; right:.35rem; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:2.3rem; height:2.3rem; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer;}
.pw-toggle:hover{background:var(--surface-2); color:var(--ink);}
.pw-toggle .hide{display:none;}
.pw-toggle[aria-pressed="true"] .show{display:none;}
.pw-toggle[aria-pressed="true"] .hide{display:block;}
.caps{font-size:.8rem; font-weight:600; color:var(--urgent);}
.auth-submit{height:3rem; font-size:1rem; margin-top:.15rem;}
.auth-dev{border-top:1px dashed var(--border); padding-top:.9rem;}
.auth-foot{display:flex; flex-wrap:wrap; justify-content:center; gap:.3rem 1.2rem; font-size:.82rem; color:var(--muted);}
.auth-foot a{color:inherit; text-decoration:none;}
.auth-foot a:hover{color:var(--accent-ink); text-decoration:underline;}
@media (max-width:760px){
  .auth-wrap{align-content:start; padding-top:1.5rem;}
  .auth-card{grid-template-columns:minmax(0,1fr);}
  .auth-side{padding:1.4rem 1.3rem; gap:1rem;}
  .auth-intro h1{font-size:1.7rem;}
  .auth-intro p{font-size:.9rem;}
  .auth-pane{padding:1.5rem 1.3rem 1.4rem;}
}

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