/* ═══ Chonni HRM Design System — locked v3 ═══ */
:root{
  --blue:#3981C3; --green:#60B259; --yellow:#F5C647; --red:#D23651;
  --bg:#F5F6FA; --ink:#14171C; --muted:#66707F;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(255,255,255,.8);
  --line:rgba(20,23,28,.1); --line-soft:rgba(20,23,28,.05);
  --refract:linear-gradient(115deg,rgba(255,255,255,.9),rgba(255,255,255,0) 40%);
  --shadow:0 2px 6px rgba(20,23,28,.04),0 18px 44px rgba(20,23,28,.08);
  --grid-line:rgba(20,23,28,.045);
  /* v148: พื้นทึบจริง — ใช้เมื่อปิดเบลอ (มือถือ/ลิ้นชักเมนู) ไม่งั้นจะเห็นทะลุ
     ที่ผ่านมามีแต่ --glass ซึ่งโปร่ง 55% และพึ่ง backdrop-filter ช่วยบัง */
  --card:#FFFFFF; --card-2:#F8FAFC;
  color-scheme:light;
}
html.dark{
  color-scheme:dark;
  --bg:#090C11; --ink:#E9EDF3; --muted:#8792A3;
  --glass:rgba(21,26,35,.48); --glass-strong:rgba(24,30,40,.8);
  --line:rgba(233,237,243,.09); --line-soft:rgba(233,237,243,.045);
  --refract:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);
  --shadow:0 2px 6px rgba(0,0,0,.35),0 20px 50px rgba(0,0,0,.42);
  --grid-line:rgba(233,237,243,.035);
  --card:#141A23; --card-2:#0F141C;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
/* ฟอนต์หน้าจอมาจากตั้งค่าระบบ (v149) — ค่าสำรองคือฟอนต์เดิม เผื่อ CSS โหลดก่อนตัวแปร */
body{font-family:var(--font-ui,'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif);
  background:var(--bg);color:var(--ink);overflow-x:hidden;transition:background .4s,color .4s}
.mono{font-family:'IBM Plex Mono',monospace}
::selection{background:rgba(57,129,195,.35)}
a{color:inherit;text-decoration:none}

/* atmosphere */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%);
  mask:radial-gradient(ellipse 90% 70% at 50% 0%,#000 40%,transparent 100%)}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3}
html:not(.dark) .blob{opacity:.18}
.blob.b1{width:560px;height:560px;background:var(--blue);top:-180px;left:-120px}
.blob.b2{width:480px;height:480px;background:var(--red);bottom:-200px;right:-100px}
.blob.b3{width:380px;height:380px;background:var(--green);top:38%;right:22%}
@media (prefers-reduced-motion:no-preference){
  .blob.b1{animation:drift1 26s ease-in-out infinite alternate}
  .blob.b2{animation:drift2 30s ease-in-out infinite alternate}
  .blob.b3{animation:drift1 22s ease-in-out infinite alternate-reverse}
  @keyframes drift1{to{transform:translate(120px,90px) scale(1.15)}}
  @keyframes drift2{to{transform:translate(-140px,-80px) scale(.9)}}
}
.aurora-line{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;
  background:linear-gradient(90deg,var(--blue),var(--green),var(--yellow),var(--red));
  background-size:300% 100%}
@media (prefers-reduced-motion:no-preference){
  .aurora-line{animation:flow 9s linear infinite}
  @keyframes flow{to{background-position:300% 0}}
}
#cursor{position:fixed;width:380px;height:380px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(57,129,195,.09),transparent 65%);
  transform:translate(-50%,-50%);left:-500px;top:-500px}

/* ring signature */
.ring{border-radius:50%;background:conic-gradient(from -40deg,
  var(--blue) 0 21%,transparent 21% 25%, var(--green) 25% 46%,transparent 46% 50%,
  var(--red) 50% 71%,transparent 71% 75%, var(--yellow) 75% 96%,transparent 96% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 64%,#000 65%);
  mask:radial-gradient(closest-side,transparent 64%,#000 65%)}
@media (prefers-reduced-motion:no-preference){.ring.spin{animation:spin 16s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}}

/* glass / spot / beam */
.glass{position:relative;border-radius:20px;background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--refract);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.spot{--mx:50%;--my:50%}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s;
  background:radial-gradient(340px circle at var(--mx) var(--my),var(--spot-c,rgba(57,129,195,.14)),transparent 62%)}
.spot:hover::after{opacity:1}
@property --bb{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam{position:relative}
.beam::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;z-index:1;
  background:conic-gradient(from var(--bb),transparent 0 78%,var(--blue) 86%,var(--green) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .beam::before{animation:bb 5s linear infinite}
  @keyframes bb{to{--bb:360deg}}
}
.tilt{transform-style:preserve-3d}
.tilt > *{transform:translateZ(18px)}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  .in{opacity:0;transform:translateY(16px);animation:up .7s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.06s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}
  .d4{animation-delay:.3s}.d5{animation-delay:.4s}.d6{animation-delay:.5s}.d7{animation-delay:.6s}
  @keyframes up{to{opacity:1;transform:none}}
}

/* layout */
.layout{display:flex;min-height:100vh;position:relative;z-index:2}
.sidebar{width:236px;flex-shrink:0;margin:14px 0 14px 14px;padding:18px 13px;border-radius:20px;
  display:flex;flex-direction:column;position:sticky;top:14px;height:calc(100vh - 28px);
  max-height:calc(100vh - 28px)}
/* nav เลื่อนได้เอง — กล่องผู้ใช้ด้านล่างจึงอยู่ในกรอบเสมอ ต่อให้เมนูยาวแค่ไหน */
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -4px;padding:0 4px;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.side-nav::-webkit-scrollbar{width:5px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.side-nav::-webkit-scrollbar-thumb:hover{background:var(--blue)}
/* ═══ v142: หัวระบบ — จัดเป็นบล็อกเดียวมีขอบล่างคั่นจากเมนู ═══ */
.side-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;flex-wrap:wrap;
  position:relative;padding:9px 10px 13px;margin:0 -2px 6px;border-radius:14px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--blue) 6%,transparent),
    color-mix(in srgb,var(--green) 5%,transparent) 62%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.side-brand .sb-name{flex:1;min-width:0;text-decoration:none;color:inherit;
  display:block;line-height:1.25}
.side-brand .sb-name small{display:block;font-size:10px;color:var(--muted);
  margin-top:2px;letter-spacing:.01em}
.side-brand .sb-name:hover b{color:var(--blue)}
.side-close{display:none;background:none;border:0;color:var(--muted);cursor:pointer;
  padding:6px;border-radius:9px;transition:.2s}
.side-close:hover{color:var(--ink);background:var(--line-soft)}
.side-scrim{display:none;position:fixed;inset:0;z-index:39;
  background:rgba(4,8,16,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s}
.side-scrim.show{opacity:1}
.nav-toggle{display:none;background:var(--glass);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;padding:9px;border-radius:11px;flex:0 0 auto;transition:.2s}
.nav-toggle:hover{border-color:var(--blue)}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.side-brand .ring{width:38px;height:38px;flex-shrink:0;
  filter:drop-shadow(0 2px 7px color-mix(in srgb,var(--blue) 26%,transparent));
  transition:transform .35s cubic-bezier(.34,1.4,.5,1)}
.side-brand:hover .ring{transform:rotate(8deg) scale(1.04)}
.side-brand b{font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* แถบเวอร์ชันใต้ชื่อระบบ — บรรทัดเดียว ไม่ตกบรรทัด ไม่แย่งสายตากับเมนู */
/* แถบเวอร์ชัน — บรรทัดเดียว ไม่ตกบรรทัด และรวมเฟส+ชื่อชุดเป็นแคปซูลเดียว
   จะได้ไม่ดูเป็นชิ้นส่วนสามชิ้นลอย ๆ อย่างเดิม */
.sb-ver{width:100%;display:flex;align-items:center;gap:6px;margin-top:11px;
  font-family:'IBM Plex Mono',monospace;line-height:1;white-space:nowrap}
.sb-badge{display:inline-flex;align-items:stretch;flex:1;min-width:0;
  border-radius:99px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));
  background:var(--card);
  box-shadow:0 1px 6px color-mix(in srgb,var(--blue) 14%,transparent)}
.sb-ver .ver-pill{display:flex;align-items:center;padding:4px 9px;
  letter-spacing:.1em;font-size:8.5px;font-weight:600;color:#fff;
  background:linear-gradient(115deg,var(--blue),var(--green))}
.sb-ver .ver-no{display:flex;align-items:center;flex:1;min-width:0;
  padding:4px 9px;overflow:hidden;text-overflow:ellipsis;
  font-size:8.5px;letter-spacing:.14em;color:var(--muted)}
.sb-ver .ver-tag{padding:4px 8px;border-radius:99px;font-size:8.5px;font-weight:600;
  letter-spacing:.04em;color:var(--muted);background:var(--line-soft);
  border:1px solid var(--line);flex:0 0 auto}
html.dark .side-brand{background:linear-gradient(160deg,
    color-mix(in srgb,var(--blue) 11%,transparent),
    color-mix(in srgb,var(--green) 8%,transparent) 62%,transparent)}
@media (prefers-reduced-motion:reduce){
  .side-brand .ring,.side-brand:hover .ring{transition:none;transform:none}
}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;
  color:var(--muted);font-size:13.5px;cursor:pointer;transition:.18s;position:relative}
.nav-item svg{flex-shrink:0;opacity:.85}
.nav-item:hover{color:var(--ink);background:var(--line-soft);padding-left:15px}
.nav-item.active{color:var(--ink);background:var(--line-soft)}
.nav-item.active::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:2.5px;
  border-radius:99px;background:linear-gradient(var(--blue),var(--green))}
.nav-sec{font-size:var(--fs-xs);letter-spacing:.08em;font-weight:600;
  color:var(--muted);padding:16px 12px 6px;opacity:.75}
.side-foot{display:none}
.main{flex:1;padding:26px 28px 60px;max-width:1180px;position:relative;z-index:1}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.topbar h2{font-size:22px;font-weight:600;
  background:linear-gradient(100deg,var(--ink) 55%,var(--blue) 78%,var(--green));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.topbar .date{font-size:12px;color:var(--muted);font-weight:300;margin-top:3px;display:flex;gap:10px}
#clock{color:var(--blue)}
.top-right{display:flex;align-items:center;gap:12px}
.cmdk{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;min-width:230px;
  cursor:pointer;color:var(--muted);font-size:13px;background:var(--glass);
  border:1px solid var(--line);transition:.2s}
.cmdk:hover{border-color:var(--blue);box-shadow:0 0 18px rgba(57,129,195,.18)}
.cmdk .kbd{margin-left:auto}
.kbd{display:inline-block;padding:1px 6px;border-radius:5px;border:1px solid var(--line);
  background:var(--line-soft);font-family:'IBM Plex Mono',monospace;font-size:10.5px}
.avatar{width:37px;height:37px;border-radius:50%;position:relative;display:flex;align-items:center;
  justify-content:center;background:var(--glass-strong);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--blue);cursor:pointer}
.avatar::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(var(--blue),var(--green),var(--yellow),var(--red),var(--blue));
  -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 83%);
  mask:radial-gradient(closest-side,transparent 82%,#000 83%)}
@media (prefers-reduced-motion:no-preference){.avatar:hover::after{animation:spin 3s linear infinite}}

/* bento */
.bento{display:grid;gap:17px;grid-template-columns:repeat(12,1fr)}
.cell{padding:21px 23px}
.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}
.c4{grid-column:span 4}.c5{grid-column:span 5}.c6{grid-column:span 6}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}
.c10{grid-column:span 10}.c11{grid-column:span 11}.c12{grid-column:span 12}
@media(max-width:1000px){
  .c3{grid-column:span 6}
  .c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11{grid-column:span 12}

  /* เมนูกลายเป็นลิ้นชักเลื่อนออกมา — ไม่ใช่ซ่อนทิ้งแบบเดิม */
  /* v148: ลิ้นชักต้องทึบ 100% — เดิมใช้ --glass (โปร่ง 55%) คู่กับ backdrop-filter
     พอ v144 ปิดเบลอบนมือถือเพื่อแก้สีทึม เมนูจึงกลายเป็นโปร่งจนอ่านไม่ออก */
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;margin:0;width:270px;
    height:100%;max-height:100%;border-radius:0 20px 20px 0;
    background:var(--card)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:translateX(-102%);transition:transform .3s cubic-bezier(.22,1,.36,1);
    box-shadow:24px 0 60px rgba(0,0,0,.45)}
  .sidebar::before{display:none}
  .sidebar.open{transform:translateX(0)}
  .side-scrim{display:block;pointer-events:none}
  .side-scrim.show{pointer-events:auto}
  .side-close,.nav-toggle{display:flex;align-items:center;justify-content:center}
  .main{padding:20px 20px 56px;max-width:100%}
  .cmdk{min-width:0}
}
@media(max-width:760px){
  .topbar h2{font-size:19px}
  .cmdk-label{display:none}
  .cmdk{padding:9px 11px}
  .cmdk .kbd{display:none}
  .stat .num{font-size:27px}
}
@media(max-width:620px){
  .c3{grid-column:span 12}
  .bento{gap:12px}
  .cell{padding:16px 16px}
  .main{padding:16px 13px 48px}
  /* v194: มือถือ — จัดหัวหน้าใหม่ ปุ่มลอยแยกแถวบน ชื่อได้เต็มบรรทัดไม่ถูกแทรกกลาง */
  .topbar{gap:10px;margin-bottom:16px;flex-direction:column;align-items:stretch}
  .topbar-left{order:2;flex:none;width:100%;align-items:flex-start}
  .top-right{order:1;width:100%;justify-content:flex-end;gap:8px}
  .page-actions{order:3;width:100%}
  .topbar h2{font-size:17.5px;line-height:1.35;overflow-wrap:anywhere}
  .topbar .crumbs{font-size:11.5px}
  .topbar .date{flex-wrap:wrap;row-gap:2px}
  .nav-toggle{flex:0 0 auto;margin-top:2px}
  .cmdk{flex:1;min-width:0}
  .cmdk .cmdk-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .avatar{width:33px;height:33px}
  .sidebar{width:min(84vw,290px)}
  .btn{padding:0 16px}
}
.stat .label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.stat .label i{width:7px;height:7px;border-radius:2.5px;display:inline-block}
.stat .num{font-family:'IBM Plex Mono',monospace;font-size:31px;font-weight:500;margin:9px 0 2px;letter-spacing:-.02em}
.stat .num small{font-size:14px;color:var(--muted);font-weight:400}
.stat .delta{font-size:11.5px;font-weight:300}
.cell h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.005em}
.cell .ph{font-size:var(--fs-sm);letter-spacing:0;line-height:1.55;
  color:var(--muted);margin-top:4px;margin-bottom:7px}

/* table */
table{width:100%;border-collapse:collapse;font-size:var(--fs-base);margin-top:8px}
th{font-size:var(--fs-sm);letter-spacing:.01em;color:var(--muted);
  text-align:left;font-weight:500;padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:10.5px 10px;border-bottom:1px solid var(--line-soft)}
tr:last-child td{border-bottom:0}
tbody tr{transition:.15s}
tbody tr:hover{background:var(--line-soft)}
tr.link{cursor:pointer}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3.5px 10px;
  border-radius:999px;font-weight:500;border:1px solid transparent}
.chip i{width:5.5px;height:5.5px;border-radius:50%}
.chip.ok{color:var(--green);background:rgba(96,178,89,.1);border-color:rgba(96,178,89,.25)}.chip.ok i{background:var(--green)}
.chip.warn{color:var(--yellow);background:rgba(245,198,71,.1);border-color:rgba(245,198,71,.3)}.chip.warn i{background:var(--yellow)}
html:not(.dark) .chip.warn{color:#9A7A0A}
.chip.off{color:var(--red);background:rgba(210,54,81,.1);border-color:rgba(210,54,81,.25)}.chip.off i{background:var(--red)}
.chip.info{color:var(--blue);background:rgba(57,129,195,.1);border-color:rgba(57,129,195,.28)}.chip.info i{background:var(--blue)}

/* forms & buttons */
.field{margin-bottom:15px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.field input,.field select{width:100%;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--line-soft);border:1px solid var(--line);border-radius:12px;transition:.25s}
.field input:focus,.field select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.22),0 0 24px rgba(57,129,195,.18)}
.field select option{background:var(--bg);color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 22px;min-height:42px;line-height:1.2;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:#fff;position:relative;overflow:hidden;
  text-align:center;vertical-align:middle;box-sizing:border-box;
  background:linear-gradient(135deg,var(--blue),#2B6AA6);transition:transform .18s,box-shadow .3s;
  box-shadow:0 8px 24px rgba(57,129,195,.3)}
.btn:hover{box-shadow:0 12px 34px rgba(57,129,195,.45);transform:translateY(-1px)}
.btn.ghost{background:var(--line-soft);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--blue);box-shadow:0 0 18px rgba(57,129,195,.15)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:620px){.form-grid{grid-template-columns:1fr}}

/* flash */
.flash{padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:14px;border:1px solid}
.flash.ok{color:var(--green);background:rgba(96,178,89,.1);border-color:rgba(96,178,89,.3)}
.flash.error{color:var(--red);background:rgba(210,54,81,.1);border-color:rgba(210,54,81,.3)}

/* pagination */
/* (v80: .pager ชุดเก่าถูกแทนด้วยคอมโพเนนต์กลาง _pager.html) */

/* login page */
.login-wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px}
#three{position:absolute;inset:0;z-index:0}
.login-card{position:relative;z-index:2;width:min(412px,100%);padding:46px 40px 38px;border-radius:24px}
.login-logo{width:70px;height:70px;margin:0 auto;position:relative}
.login-logo .ring{position:absolute;inset:0}
.login-logo span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:24px}
.eyebrow{display:block;text-align:center;color:var(--blue);font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.32em;margin:18px 0 4px;min-height:14px}
.login-card h1{text-align:center;font-size:20px;font-weight:600}
.login-card .sub{text-align:center;color:var(--muted);font-size:13px;font-weight:300;margin:5px 0 30px}
.login-card .btn{width:100%;min-height:46px;margin-top:10px}
.login-foot{margin-top:24px;text-align:center;font-size:11.5px;color:var(--muted);font-weight:300}

/* charts */
.chart{width:100%;height:250px}
.donut{width:100%;height:230px}

/* command palette */
#palette{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding-top:14vh;background:rgba(5,8,12,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#palette.open{display:flex}
.pal{width:min(560px,92vw);border-radius:18px;overflow:hidden}
.pal input{width:100%;padding:17px 20px;font:inherit;font-size:15.5px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line)}
.pal input:focus{outline:none}
.pal-list{max-height:320px;overflow-y:auto;padding:8px}
.pal-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  font-size:13.5px;cursor:pointer;color:var(--ink)}
.pal-item:hover,.pal-item.sel{background:rgba(57,129,195,.14)}
.pal-item .tag{margin-left:auto;font-size:var(--fs-xs);
  color:var(--muted);letter-spacing:.1em}
.pal-item i{width:7px;height:7px;border-radius:2.5px;flex-shrink:0}
.pal-empty{padding:22px;text-align:center;color:var(--muted);font-size:13px}
.pal-foot{display:flex;gap:14px;padding:10px 16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--muted)}

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 24px;font-size:13.5px}
.detail-grid .dl{color:var(--muted);font-size:11.5px;margin-top:12px}
.detail-grid .dv{margin-top:2px}
a.cell{display:block}

/* ═══ PT / Intern module — ต่อจาก design system v3 ═══ */
textarea{width:100%;padding:11px 14px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--line-soft);border:1px solid var(--line);border-radius:12px;
  transition:.25s;resize:vertical;font-family:'IBM Plex Sans Thai',sans-serif}
textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.16)}

.pt-sec{font-size:var(--fs-md);letter-spacing:.02em;color:var(--muted);
  font-weight:600;margin:22px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line-soft)}
.pt-sec:first-of-type{margin-top:6px}

.pt-note{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:14px;
  padding:10px 14px;border-radius:10px;background:var(--line-soft);
  border-left:2px solid var(--blue)}

.pt-alert{font-size:12.5px;line-height:1.6;padding:11px 14px;border-radius:11px;
  margin:12px 0;border:1px solid var(--line);background:var(--line-soft);color:var(--muted)}
.pt-alert.ok{color:var(--green);background:rgba(96,178,89,.09);border-color:rgba(96,178,89,.25)}
.pt-alert.warn{color:var(--yellow);background:rgba(245,198,71,.09);border-color:rgba(245,198,71,.28)}
.pt-alert.err{color:var(--red);background:rgba(210,54,81,.09);border-color:rgba(210,54,81,.26)}

.pt-row{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.pt-row:last-child{border-bottom:0}

.pt-bar{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.pt-bar span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width .6s cubic-bezier(.22,1,.36,1)}

.pt-map{height:420px;border-radius:14px;margin-top:10px;overflow:hidden;
  border:1px solid var(--line);transition:opacity .3s}
.leaflet-container{background:var(--line-soft)}
html.dark .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9)}

input[type=range]{-webkit-appearance:none;appearance:none;height:6px;padding:0;
  background:var(--line-soft);border-radius:99px;border:1px solid var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--bg);
  box-shadow:0 2px 8px rgba(57,129,195,.5)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  background:var(--blue);cursor:pointer;border:2px solid var(--bg)}

/* ── บัญชีของฉัน ── */
.acct-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.acct-avatar{width:60px;height:60px;border-radius:18px;flex:0 0 auto;
  display:grid;place-items:center;font-size:24px;font-weight:600;color:#fff;
  background:conic-gradient(from 210deg,var(--blue),var(--green),var(--yellow),var(--red),var(--blue));
  box-shadow:0 10px 30px rgba(57,129,195,.32)}
.acct-rules{list-style:none;margin-top:14px;margin-bottom:16px}
.acct-rules li{position:relative;padding-left:20px;font-size:13px;line-height:1.9;color:var(--muted)}
.acct-rules li::before{content:"";position:absolute;left:4px;top:12px;
  width:5px;height:5px;border-radius:50%;background:var(--blue)}

/* ── เปิดสิทธิ์จากทะเบียนพนักงาน ── */
.grant-row td{vertical-align:middle}
.grant-pick{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.grant-pick select{padding:7px 10px;font:inherit;font-size:12.5px;color:var(--ink);
  background:var(--line-soft);border:1px solid var(--line);border-radius:9px;min-width:132px}


/* ── ตารางบนจอเล็ก: เลื่อนแนวนอนแทนการบีบคอลัมน์จนอ่านไม่ออก ── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tw::-webkit-scrollbar{height:6px}
.tw::-webkit-scrollbar-track{background:transparent}
.tw::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.tw table{margin-top:8px}
@media(max-width:900px){.tw table{min-width:660px}}

/* ปุ่มในตารางไม่ตัดบรรทัดจนเบี้ยว */
.grant-pick{flex-wrap:nowrap}
@media(max-width:620px){
  .grant-pick{flex-wrap:wrap;justify-content:flex-start}
  .acct-head{gap:13px}
  .acct-avatar{width:50px;height:50px;font-size:20px;border-radius:15px}
  .pt-map{height:300px}
}

/* ── หน้าเช็คอินของพาร์ตไทม์ / นักศึกษา ── */
.me-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.me-big{width:100%;justify-content:center;padding:16px;font-size:16px;font-weight:600;
  border-radius:14px;margin-top:12px}
.me-big:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.me-timer{text-align:center;padding:22px 0 6px}
.me-timer #elapsed{font-size:44px;font-weight:500;letter-spacing:-.02em;
  font-family:'IBM Plex Mono',monospace}
.me-cam{width:100%;max-width:280px;border-radius:14px;display:none;
  border:1px solid var(--line);background:var(--line-soft)}
.me-shot{width:100%;max-width:280px;border-radius:14px;border:1px solid var(--green)}
.me-summary{background:var(--line-soft);border-radius:14px;padding:14px 16px;margin-top:14px}
.me-summary>div{display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;font-size:13.5px}
.me-summary>div span{color:var(--muted)}
.me-summary .total{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;
  font-size:15px}
.me-summary .total b{font-size:17px}
@media(max-width:620px){
  .me-timer #elapsed{font-size:38px}
  .me-big{padding:18px;font-size:17px}
}

/* ── แถบขั้นตอนงวดจ่าย ── */
.run-steps{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.run-step{flex:1;min-width:104px;display:flex;align-items:center;gap:10px;
  padding:13px 16px;border-radius:13px;background:var(--line-soft);
  border:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.run-step b{width:21px;height:21px;border-radius:50%;flex:0 0 auto;display:grid;
  place-items:center;font-size:11px;font-family:'IBM Plex Mono',monospace;
  background:var(--line);color:var(--muted)}
.run-step.done{color:var(--green);border-color:rgba(96,178,89,.3)}
.run-step.done b{background:var(--green);color:#fff}
.run-step.now{color:var(--ink);border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(57,129,195,.25),0 6px 22px rgba(57,129,195,.14)}
.run-step.now b{background:var(--blue);color:#fff}
@media(max-width:620px){.run-steps{gap:8px;margin-bottom:15px}
  .run-step{min-width:0;flex:1 1 45%;padding:10px 12px}}

@media print{
  .sidebar,.topbar,.flash,.nav-toggle,.side-scrim,.btn,.pt-note,
  .toast-stack,.page-actions,.crumbs,.side-nav{display:none!important}
  .main{padding:0;max-width:100%}
  .glass,.cell{background:#fff!important;border:1px solid #ddd!important;
    box-shadow:none!important;color:#000!important}
  body{background:#fff!important;color:#000!important}

  /* v131 — ชั้นตกแต่งต้องหายให้หมดตอนพิมพ์
     เบราว์เซอร์ส่วนใหญ่ไม่รองรับ mask-composite ตอนพิมพ์ กรอบเรืองแสง (.beam)
     จึงกลายเป็นแถบสีทึบพาดทับเนื้อหา ส่วน .blob ที่เบลออยู่เบื้องหลัง
     ก็กลายเป็นรอยสีเปรอะเต็มหน้ากระดาษ */
  .atmos,.blob,.ring{display:none!important}
  .glass::before,.glass::after,.beam::before,.beam::after,
  .spot::after,.cell::before,.cell::after{
    display:none!important;content:none!important;background:none!important;
    -webkit-mask:none!important;mask:none!important;animation:none!important}
  *{box-shadow:none!important;text-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ═══ กลุ่มเมนูแบบพับได้ ═══ */
.nav-group{margin:1px 0}
.nav-parent{width:100%;background:none;border:0;font:inherit;font-size:13.5px;
  text-align:left;cursor:pointer}
.nav-parent span{flex:1;min-width:0}
.nav-caret{flex:0 0 auto;opacity:.6;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.nav-group.open .nav-caret{transform:rotate(180deg)}
/* grid 0fr→1fr คุมได้แค่ "แถวเดียว" — ลูกของ .nav-sub จึงต้องมี .nav-sub-inner
   ห่อไว้ชั้นเดียวเสมอ (ลิงก์หลายตัวเป็นลูกโดยตรง = แถว implicit ที่ไม่ยอมพับ) */
.nav-sub{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1)}
.nav-group.open .nav-sub{grid-template-rows:1fr}
.nav-sub-inner{min-height:0;overflow:hidden}
.nav-sub .nav-item{padding:9px 12px 9px 38px;font-size:13.5px;position:relative}
.nav-sub .nav-item::after{content:"";position:absolute;left:21px;top:0;bottom:0;
  width:1px;background:var(--line)}
.nav-sub .nav-item:first-child::after{top:4px}
.nav-sub .nav-item:last-child::after{bottom:4px}
.nav-sub .nav-item:hover{padding-left:41px}
.nav-sub .nav-item.active{background:var(--line-soft);font-weight:500}
.nav-sub .nav-item.active::before{left:19px;top:18%;bottom:18%;width:2.5px;z-index:1}
/* v240: หัวย่อยในกลุ่ม — แบ่งของที่มาคนละแหล่ง (เช่น "จาก HumanSoft" / "คำนวณเอง (Native)") โดยไม่เพิ่มกลุ่ม */
.nav-subcap{margin:7px 12px 2px 38px;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);opacity:.65;user-select:none;position:relative}
.nav-subcap::after{content:"";position:absolute;left:-17px;top:0;bottom:0;width:1px;background:var(--line)}

/* ═══ ตัวเลือกธีม 3 สถานะ ═══ */
.theme-pick{display:flex;gap:2px;padding:2px;margin:0 8px 6px;border-radius:10px;
  background:var(--line-soft);border:1px solid var(--line)}
.theme-pick button{flex:1;display:flex;align-items:center;justify-content:center;
  height:26px;border:0;border-radius:8px;background:none;cursor:pointer;
  color:var(--muted);transition:.18s}
.theme-pick button svg{width:14px;height:14px}
.theme-pick button:hover{color:var(--ink)}
.theme-pick button.on{color:var(--blue);background:var(--glass-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* ═══ ปรับความคมชัดในโหมดสว่าง ═══ */
html:not(.dark) .pt-alert.warn{color:#8A6A05;background:rgba(245,198,71,.16);
  border-color:rgba(200,160,30,.4)}
html:not(.dark) .pt-alert.ok{color:#2F6B2A;background:rgba(96,178,89,.13);
  border-color:rgba(96,178,89,.35)}
html:not(.dark) .pt-alert.err{color:#A21F38;background:rgba(210,54,81,.1);
  border-color:rgba(210,54,81,.32)}
html:not(.dark) .chip.ok{color:#2F6B2A}
html:not(.dark) .chip.info{color:#1F5C90}
html:not(.dark) .run-step.done{color:#2F6B2A}
html:not(.dark) .me-summary{background:rgba(20,23,28,.035)}
html:not(.dark) .theme-pick button.on{background:#fff}
html:not(.dark) .side-scrim{background:rgba(30,38,52,.45)}
html:not(.dark) .acct-avatar{box-shadow:0 8px 22px rgba(57,129,195,.24)}
html:not(.dark) .me-big{color:#fff}


/* ═══ รูปโปรไฟล์ ═══ */
.ava{width:36px;height:36px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:#fff;position:relative;background:var(--blue)}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.tone-blue{background:linear-gradient(140deg,#3981C3,#2C6DAB)}
.ava.tone-green{background:linear-gradient(140deg,#60B259,#48934A)}
.ava.tone-yellow{background:linear-gradient(140deg,#E0AE2C,#C08F16)}
.ava.tone-red{background:linear-gradient(140deg,#D23651,#AE2942)}

/* avatar บนแถบบน — คงวงแหวน 4 สีไว้เป็นลายเซ็นแบรนด์ */
.avatar{overflow:visible;background:var(--glass-strong)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar.tone-blue,.avatar.tone-green,.avatar.tone-yellow,.avatar.tone-red{color:var(--blue)}

/* ═══ การ์ดผู้ใช้ท้ายเมนู ═══ */
.user-card{flex:0 0 auto;margin-top:12px;border-radius:15px;
  background:var(--line-soft);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:border-color .2s}
.user-card:hover{border-color:var(--line)}
.user-card.open{border-color:var(--blue);
  box-shadow:0 0 0 1px rgba(57,129,195,.2),0 12px 34px rgba(0,0,0,.18)}

.user-trigger{order:2;display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;background:none;border:0;cursor:pointer;font:inherit;
  color:var(--ink);border-radius:15px;text-align:left}
.user-meta{flex:1;min-width:0;display:block}
.user-meta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.user-meta small{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.user-caret{flex:0 0 auto;opacity:.55;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.user-card.open .user-caret{transform:rotate(180deg)}

.user-menu{order:1;display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .3s cubic-bezier(.22,1,.36,1)}
.user-card.open .user-menu{grid-template-rows:1fr}
.user-menu>*{min-height:0}
.user-menu-inner{padding:6px 0 2px}
.user-menu-item{display:flex;align-items:center;gap:10px;margin:2px 6px;
  padding:9px 10px;border-radius:10px;font-size:13px;color:var(--muted);transition:.18s}
.user-menu-item:hover{color:var(--ink);background:var(--glass-strong)}
.user-menu-item.danger{color:var(--red)}
.user-menu-item.danger:hover{background:rgba(210,54,81,.1)}
.user-menu-sec{font-size:var(--fs-xs);letter-spacing:.06em;font-weight:600;
  color:var(--muted);padding:9px 16px 5px;opacity:.85}

/* ═══ อัปโหลดรูปในหน้าบัญชีของฉัน ═══ */
.ava-edit{position:relative;width:74px;height:74px;flex:0 0 auto;border-radius:22px;
  overflow:hidden;cursor:pointer;display:grid;place-items:center;
  font-size:26px;font-weight:500;color:#fff}
.ava-edit img{width:100%;height:100%;object-fit:cover;display:block}
.ava-edit .cam{position:absolute;inset:auto 0 0 0;padding:5px 0 4px;
  background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
  gap:4px;font-size:10px;color:#fff;opacity:0;transition:.2s}
.ava-edit:hover .cam{opacity:1}
html:not(.dark) .user-menu-item:hover{background:#fff}

/* ป้าย พ.ศ. ใต้ช่องเลือกวันที่ — เบราว์เซอร์แสดงช่องเป็น ค.ศ. เสมอ */
.be-hint{font-size:var(--fs-xs);color:var(--blue);opacity:.85;
  margin-top:4px;padding-left:2px;letter-spacing:0}

/* บันทึกผลการ sync */
.hs-log{font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.75;
  color:var(--muted);background:var(--line-soft);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-top:12px;max-height:520px;
  overflow:auto;white-space:pre-wrap;word-break:break-word}

/* ═══ รากฐาน v29.1 — สภาพพร้อมต่อยอดทุกโมดูล ═══ */

/* focus ที่มองเห็นได้เมื่อใช้คีย์บอร์ด (เมาส์ไม่ขึ้นกรอบ) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input[type=checkbox]:focus-visible,input[type=range]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
.field input:focus-visible,.field select:focus-visible,textarea:focus-visible{outline:none}

/* สถานะปุ่มให้ครบวงจร */
.btn:active{transform:translateY(0) scale(.985)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;
  box-shadow:none;transform:none;pointer-events:none}
.btn.danger{background:linear-gradient(135deg,var(--red),#AE2942);
  box-shadow:0 8px 24px rgba(210,54,81,.3)}
.btn.danger:hover{box-shadow:0 12px 34px rgba(210,54,81,.45)}

/* checkbox / radio ตามสีแบรนด์ */
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}

/* scrollbar บาง สม่ำเสมอทุกกล่องเลื่อน */
.pal-list,.hs-log,.tw{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pal-list::-webkit-scrollbar{width:5px}
.pal-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

/* ═══ Dialog กลางของระบบ — แทน confirm()/alert() ของเบราว์เซอร์ ═══ */
/* ═══ Dialog กลางของระบบ (v44 redesign — อ่านง่ายทั้งโหมดสว่าง/มืด) ═══
   ก่อนหน้านี้ใช้ .glass ทับม่านดำ ทำให้กล่อง "จม" ไปกับฉากหลัง
   ตอนนี้กล่องเป็นพื้นทึบยกระดับ (elevated surface) + ม่านโปร่งกว่าเดิม */
.dlg-veil{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(10,14,20,.42),rgba(6,9,14,.62));
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  opacity:0;transition:opacity .22s}
html:not(.dark) .dlg-veil{
  background:radial-gradient(120% 90% at 50% 0%,rgba(35,45,62,.20),rgba(20,28,42,.34))}
.dlg-veil.show{opacity:1}

.dlg{width:min(440px,100%);border-radius:22px;padding:26px 26px 20px;position:relative;
  overflow:hidden;isolation:isolate;
  background:var(--dlg-bg);border:1px solid var(--dlg-line);
  box-shadow:var(--dlg-shadow);
  transform:translateY(16px) scale(.96);
  transition:transform .32s cubic-bezier(.22,1,.36,1)}
:root{
  --dlg-bg:#FFFFFF; --dlg-line:rgba(20,23,28,.09);
  --dlg-shadow:0 2px 8px rgba(20,23,28,.06),0 26px 60px -12px rgba(20,23,28,.28);
  --dlg-sub:rgba(20,23,28,.04);
}
html.dark{
  --dlg-bg:#161B24; --dlg-line:rgba(233,237,243,.11);
  --dlg-shadow:0 2px 8px rgba(0,0,0,.4),0 30px 70px -14px rgba(0,0,0,.72);
  --dlg-sub:rgba(233,237,243,.05);
}
/* แถบสีบางด้านบน บอกชนิดของกล่อง (ถาม/อันตราย/แจ้งเตือน) */
.dlg::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),#5AA0DC)}
.dlg.k-danger::before{background:linear-gradient(90deg,var(--red),#E4677F)}
.dlg.k-info::before{background:linear-gradient(90deg,var(--yellow),#FFDD8A)}
/* แสงนวลมุมบนซ้าย — ให้กล่องดูมีมิติโดยไม่ต้องใช้ blur ทับฉากหลัง */
.dlg::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(320px circle at 12% -10%,var(--dlg-glow,rgba(57,129,195,.10)),transparent 68%)}
.dlg.k-danger{--dlg-glow:rgba(210,54,81,.10)}
.dlg.k-info{--dlg-glow:rgba(245,198,71,.12)}
.dlg-veil.show .dlg{transform:none}

.dlg-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;
  margin-bottom:15px;border:1px solid}
.dlg-icon.ask{color:var(--blue);background:rgba(57,129,195,.11);border-color:rgba(57,129,195,.26)}
.dlg-icon.danger{color:var(--red);background:rgba(210,54,81,.1);border-color:rgba(210,54,81,.24)}
.dlg-icon.info{color:#9A7A0A;background:rgba(245,198,71,.14);border-color:rgba(245,198,71,.32)}
html.dark .dlg-icon.info{color:var(--yellow)}

.dlg h4{font-size:16px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em;color:var(--ink)}
.dlg p{font-size:13.5px;line-height:1.75;color:var(--muted);white-space:pre-line;
  word-break:break-word}
/* บรรทัดที่ 2 ขึ้นไปของข้อความ = คำอธิบายผลลัพธ์ → ทำเป็นกล่องย่อยให้อ่านง่าย */
.dlg p .dlg-note{display:block;margin-top:11px;padding:10px 13px;border-radius:12px;
  background:var(--dlg-sub);border:1px solid var(--dlg-line);font-size:12.5px;line-height:1.7}
.dlg-act{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.dlg-act .btn{padding:0 20px;min-height:40px;font-size:13.5px}
.dlg-act .btn.ghost{background:var(--dlg-sub)}
.dlg-act .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:420px){.dlg{padding:22px 20px 18px}
  .dlg-act{flex-direction:column-reverse}
  .dlg-act .btn{width:100%;text-align:center}}
@media (prefers-reduced-motion:reduce){
  .dlg-veil,.dlg{transition:none}}


/* ═══ โมดูลเอกสาร HR — เอกสาร A4 (redesign v40) ═══ */
.sheet-frame{background:var(--line-soft);border:1px solid var(--line);
  border-radius:14px;padding:18px;margin-top:10px;overflow:auto}
.doc-a4{background:#fff;color:#1a1d22;max-width:730px;margin:0 auto;
  padding:40px 46px 30px;border:1px solid rgba(20,23,28,.12);border-radius:2px;
  box-shadow:0 10px 30px rgba(20,23,28,.14);
  font-family:'Sarabun','TH Sarabun New','IBM Plex Sans Thai',sans-serif;
  font-size:13px;line-height:1.9}
html.dark .doc-a4{color:#1a1d22}
.doc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.doc-co{display:flex;align-items:center;gap:10px;min-width:0}
.doc-logo{height:44px;max-width:150px;object-fit:contain;flex:0 0 auto}
.doc-ring{width:28px;height:28px;flex:0 0 auto}
.doc-co b{font-size:13.5px;letter-spacing:.01em}
.doc-co small{display:block;font-size:10.5px;color:#5b6470;line-height:1.55;margin-top:2px}
.doc-nobox{flex:0 0 auto;text-align:center;border:1px solid #c9ced6;border-radius:6px;
  padding:7px 14px;min-width:150px}
.doc-nobox .lbl{display:block;font-size:9.5px;letter-spacing:.22em;color:#8a93a0}
.doc-nobox .no{display:block;font-family:'IBM Plex Mono',monospace;font-size:12.5px;
  font-weight:500;margin:2px 0}
.doc-nobox .dt{display:block;font-size:10.5px;color:#5b6470}
.doc-title{text-align:center;font-size:16px;font-weight:600;margin:22px 0 6px;
  letter-spacing:.02em}
.doc-rule{position:relative;width:196px;height:9px;margin:0 auto 20px;
  border:0;overflow:visible}
.doc-rule::before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#1a1d22 18%,#1a1d22 82%,transparent)}
.doc-rule::after{content:"";position:absolute;top:1.5px;left:50%;width:6px;height:6px;
  margin-left:-3px;transform:rotate(45deg);background:#fff;
  border:1px solid #1a1d22;box-shadow:0 0 0 3px #fff}
.doc-body{overflow-wrap:break-word}
.doc-body p{text-indent:2.4em;margin-bottom:9px;text-align:justify}
/* v60 — สไตล์เอกสารบนจอต้องตรงกับตอนพิมพ์ ไม่งั้นพรีวิวหลอกตา */
.doc-body p.ind{text-indent:2.2em}
.doc-body p.flush,.doc-body p.consent,.doc-body p.note-box,
.doc-body .sign-right,.doc-body table p{text-indent:0}
.doc-body p[style*="margin-left"],.doc-body p[style*="text-align:center"]{text-indent:0}
.doc-body .sign-right{margin:16px 0 10px auto;text-align:center;width:290px;max-width:100%;line-height:2}
.doc-body p.consent{margin-left:22px;letter-spacing:.5px}
.doc-body table.tbl3{width:100%;border-collapse:collapse;margin:8px 0;font-size:.94em}
.doc-body table.tbl3 th,.doc-body table.tbl3 td{border:1px solid #99a1aa;padding:6px 8px;
  vertical-align:top;text-align:left}
.doc-body table.tbl3 tr.tall td{height:56px}
.doc-body table.tbl-rate{width:100%;border-collapse:collapse;margin:8px 0;font-size:.9em}
.doc-body table.tbl-rate th,.doc-body table.tbl-rate td{border:1px solid #99a1aa;padding:5px 7px}
.doc-body table.tbl-rate th:not(:first-child),
.doc-body table.tbl-rate td:not(:first-child){width:62px;text-align:center}
.doc-body table.tbl-rate .sub{color:#6b7480;font-size:.9em}
.doc-body .note-box{border:1px solid #99a1aa;padding:7px 10px;text-align:center;margin:10px 0}
.doc-formcode{margin-top:14px;text-align:center;font-size:11.5px;color:#6b7480;
  letter-spacing:.3px}
.sig-line{display:block;border-bottom:1px dotted #7c8590;width:180px;
  margin:0 auto 4px;height:34px}
.doc-sign-row{display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;margin-top:34px}
.doc-sign1{text-align:center;line-height:2}
.doc-sign2{display:flex;justify-content:space-around;gap:16px;margin-top:34px;
  text-align:center;line-height:2;font-size:12.5px}
.doc-sign2>div{flex:1}
.doc-sign2.wit{margin-top:20px}
.doc-ack{margin-top:8px}
.doc-seal{width:92px;height:92px;border:1.5px dashed #9aa4b0;border-radius:50%;
  display:grid;place-items:center;text-align:center;font-size:10.5px;color:#8a93a0;
  line-height:1.5;flex:0 0 auto}
.doc-note{margin-top:20px;padding-top:9px;border-top:1px solid #dde1e7;
  font-size:10.5px;color:#5b6470;line-height:1.7}
.doc-auth{display:flex;gap:14px;align-items:center;justify-content:space-between;
  margin-top:26px;padding:10px 12px;border:1px solid #dde1e7;border-radius:6px;
  background:#f7f8fa}
.doc-auth-text{font-size:9.5px;color:#5b6470;line-height:1.65}
.doc-auth-text b{display:block;color:#1a1d22;font-size:10px;letter-spacing:.04em;
  margin-bottom:1px;word-break:normal}
.doc-qr{flex:0 0 auto;background:#fff;padding:4px;border:1px solid #dde1e7;border-radius:4px}
.doc-qr svg{width:58px;height:58px;display:block}
.doc-auth.draft{justify-content:center;border-style:dashed;background:none}
@media(max-width:620px){.doc-a4{padding:24px 20px}.doc-top{flex-direction:column}}


/* ═══ เมนูย่อยของหน้าตั้งค่า (v45.1) — แท็บใต้ชื่อหน้า ═══
   หน้าที่มีการ์ดเยอะ (ตั้งค่าเอกสาร) แบ่งเป็นหมวดแทนการเรียงยาว */
.subnav{display:flex;gap:6px;padding:6px;border-radius:16px;margin-bottom:16px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subnav::-webkit-scrollbar{display:none}
.subnav-i{display:flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:10px 16px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--muted);
  background:transparent;position:relative;white-space:nowrap;
  transition:color .2s,background .25s}
.subnav-i svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
.subnav-i:hover{color:var(--ink);background:var(--line-soft)}
.subnav-i.on{color:var(--ink);background:var(--glass-strong);
  box-shadow:0 1px 2px rgba(20,23,28,.05),0 6px 18px -6px rgba(20,23,28,.18)}
html.dark .subnav-i.on{box-shadow:0 1px 2px rgba(0,0,0,.35),0 8px 22px -8px rgba(0,0,0,.6)}
.subnav-i.on::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--green))}
.subnav-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.subnav-n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:500;
  padding:2px 7px;border-radius:7px;background:var(--line-soft);
  border:1px solid var(--line);color:var(--muted)}
.subnav-i.on .subnav-n{color:var(--blue);border-color:rgba(57,129,195,.3);
  background:rgba(57,129,195,.1)}

.pane-head{margin:2px 2px 14px}
.pane-head h4{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pane-head p{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.6}
.tabpane[hidden]{display:none}
.tabpane .bento{animation:paneIn .34s cubic-bezier(.22,1,.36,1) both}
@keyframes paneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabpane .bento{animation:none}}
@media(max-width:620px){
  .subnav{margin-bottom:12px}
  .subnav-i{padding:9px 13px;font-size:12.5px}
  .subnav-i span{display:none}
  .subnav-i.on span{display:inline}
}


/* ═══ ตัวเลือกไฟล์ (v48) — แทน <input type=file> หน้าตาดิบของเบราว์เซอร์ ═══
   JS ใน app.js ห่อ input ทุกตัวในระบบให้อัตโนมัติ ไม่ต้องแก้ทีละหน้า
   โครงสร้าง: <label.filepick> [input opacity:0 คลุมทั้งกล่อง] ไอคอน + ข้อความ + ปุ่มลบ */
.filepick{position:relative;display:flex;align-items:center;gap:11px;
  padding:8px 13px;min-height:46px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--line);background:var(--line-soft);
  transition:border-color .2s,background .2s,box-shadow .25s;min-width:0}
.filepick:hover{border-color:rgba(57,129,195,.5);background:rgba(57,129,195,.05)}
.filepick:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.16)}
.filepick.over{border-style:solid;border-color:var(--blue);
  background:rgba(57,129,195,.09);box-shadow:0 0 0 3px rgba(57,129,195,.14)}
.filepick > input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;z-index:1}
.fp-ico{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:grid;
  place-items:center;color:var(--blue);background:rgba(57,129,195,.11);
  border:1px solid rgba(57,129,195,.2);overflow:hidden;transition:.2s}
.fp-ico svg{width:16px;height:16px}
.fp-ico img{width:100%;height:100%;object-fit:cover}
.filepick.has .fp-ico{color:var(--green);background:rgba(96,178,89,.12);
  border-color:rgba(96,178,89,.26)}
.fp-main{min-width:0;flex:1}
.fp-title{display:block;font-size:12.5px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-sub{display:block;font-size:10.5px;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-x{position:relative;z-index:2;flex:0 0 auto;width:26px;height:26px;padding:0;
  display:none;place-items:center;border:1px solid var(--line);border-radius:9px;
  background:var(--glass-strong);color:var(--muted);cursor:pointer;
  font:inherit;line-height:1;transition:.18s}
.fp-x:hover{color:var(--red);border-color:rgba(210,54,81,.4);
  background:rgba(210,54,81,.09)}
.filepick.has .fp-x{display:grid}
.filepick.err{border-color:var(--red);background:rgba(210,54,81,.06)}
.filepick.err .fp-sub{color:var(--red)}

/* ขนาดกะทัดรัด — ใช้ในตาราง/แถวปุ่ม (ปฏิทินหน้าที่, หน้าตั้งค่า) */
.filepick.sm{padding:7px 11px;gap:9px;border-radius:11px;border-width:1.2px}
.filepick.sm .fp-ico{width:26px;height:26px;border-radius:8px}
.filepick.sm .fp-ico svg{width:14px;height:14px}
.filepick.sm .fp-title{font-size:12px}
.filepick.sm .fp-sub{font-size:10px;margin-top:1px}
.filepick.sm .fp-x{width:22px;height:22px}
@media(max-width:620px){.filepick{padding:11px 13px}}
@media (prefers-reduced-motion:reduce){.filepick,.fp-ico,.fp-x{transition:none}}


/* ═══ ระยะห่างระหว่าง "แถบด้านบน" กับกริดการ์ด (v49) ═══
   ก่อนหน้านี้แต่ละหน้าใส่ margin-bottom เองบ้างไม่ใส่บ้าง — แถบขั้นตอน/แถบกรอง
   เลยชิดการ์ดจนดูอึดอัด กติกากลางนี้ทำให้ทุกหน้าเว้นระยะเท่ากันโดยไม่ต้องแก้ทีละไฟล์
   (margin ของ sibling จะยุบรวมกัน จึงไม่บวกซ้ำกับ margin-bottom เดิมของแต่ละหน้า) */
.bento:not(:first-child){margin-top:20px}
form:not(:first-child) > .bento:first-child,
section:not(:first-child) > .bento:first-child{margin-top:20px}
/* แถบเครื่องมือ/ข้อความนำเหนือกริด — ระยะเท่ากันทั้งระบบ */
.pt-note,.pt-alert{margin-bottom:16px}
.glass.cell + .bento,.pt-note + .bento,.pt-alert + .bento{margin-top:20px}
/* การ์ดเดี่ยว ๆ ที่วางเรียงนอกกริด (เช่น หน้าออกเอกสาร) ไม่ให้ติดกัน */
.main > .glass.cell + .glass.cell,
.main > .glass.cell + form,
.main > form + .glass.cell{margin-top:18px}
@media(max-width:620px){
  .bento:not(:first-child),
  form:not(:first-child) > .bento:first-child,
  section:not(:first-child) > .bento:first-child,
  .glass.cell + .bento,.pt-note + .bento,.pt-alert + .bento{margin-top:15px}
  .pt-note,.pt-alert{margin-bottom:13px}
}


/* ═══ แถวควบคุมในการ์ด (v51) — ให้ทุกองค์ประกอบสูงเท่ากันและเรียงได้สมส่วน ═══
   ปัญหาเดิม: ฟอร์มอัปโหลด/ตัวกรองแต่ละหน้าเขียน flex เองคนละแบบ
   ช่องเลือกไฟล์สูงกว่าปุ่ม ปุ่มลอยไม่ตรงแนว ตอนนี้ใช้คลาสกลางคลาสเดียว */
.ctl-row{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-end}
.ctl-row > .field{margin:0;min-width:0}
.ctl-row > .field.grow{flex:1 1 220px}
.ctl-row > .btn{flex:0 0 auto;min-height:42px;line-height:1.2;
  white-space:nowrap}
/* ปุ่มในแถวที่ไม่มี label กำกับ ให้เสมอกับช่องกรอกที่มี label */
.ctl-row.has-labels > .btn{align-self:flex-end}
.ctl-row .filepick{min-height:46px}
/* ช่องกรอกกับ select ในแถว ให้สูงเท่ากันเป๊ะ */
.ctl-row .field input,.ctl-row .field select,
.ctl-row > input,.ctl-row > select{height:46px;padding:0 14px;width:100%;
  font:inherit;font-size:14px;color:var(--ink);background:var(--line-soft);
  border:1px solid var(--line);border-radius:12px}
.ctl-row .field label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:620px){
  .ctl-row{gap:9px}
  .ctl-row > .field.grow,.ctl-row > .btn{flex:1 1 100%}
  .ctl-row > .btn{width:100%}
}
/* ช่องเลือกไฟล์ในตาราง (ปฏิทินหน้าที่) — จำกัดความกว้าง ไม่ให้ดันแถวบวม */
td .filepick.sm{max-width:210px;min-height:34px}
td form .btn{min-height:34px;padding:0 14px;font-size:12.5px;line-min-height:34px}
/* ตารางบริษัทในหน้าตั้งค่า — ช่องข้อมูลติดต่อจัดเป็นกริดให้อ่านง่าย (v51) */
.cf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:6px;margin-top:6px}
.cf-grid input{width:100%;padding:7px 12px;font:inherit;font-size:12px;color:var(--ink);
  background:var(--line-soft);border:1px solid var(--line);border-radius:10px}
.cf-grid input:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.18)}

/* v60 — หน้าเลือกเอกสาร: การ์ดกระชับ จัดกลุ่มตามวงจรงาน HR */
.tpl-grid{display:grid;gap:10px;margin-top:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tpl-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;text-decoration:none;
  color:inherit;transition:border-color .15s,transform .15s,background .15s}
.tpl-card:hover{border-color:var(--blue);transform:translateY(-1px);
  background:color-mix(in srgb,var(--blue) 6%,transparent)}
.tpl-card b{font-weight:600;line-height:1.45}
.tpl-card span{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.tpl-grid{grid-template-columns:1fr}}

.doc-title.sm{font-size:16px;letter-spacing:0}

/* v63 — แถบความคืบหน้าชุดเอกสาร */
.setbar{height:7px;border-radius:99px;background:var(--line-soft);margin-top:9px;
  overflow:hidden}
.setbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  box-shadow:0 0 10px rgba(96,178,89,.4);transition:width .3s}

/* v65 — ไฮไลต์ช่องข้อมูลจำเป็น + ช่องที่กรอกไม่ครบ */
label.req-star::after{content:" *";color:#ff7b8f;font-weight:600}
.field-err{border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(210,54,81,.28) !important;
  animation:fieldshake .34s ease}
@keyframes fieldshake{
  20%{transform:translateX(-5px)}40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.dlg p{white-space:pre-line}
/* แบนเนอร์ความพร้อมของข้อมูลระบบ (หน้าออกเอกสาร) */
.ready-warn{border:1px solid rgba(245,198,71,.45);background:rgba(245,198,71,.08);
  border-radius:13px;padding:12px 15px;margin-bottom:14px}
.ready-warn b{color:#f2d685}
.ready-warn ul{margin:6px 0 0 18px}
.ready-warn li{margin:3px 0}
.ready-warn a{color:var(--blue)}

/* v66 — ตัวเลขใหญ่ในการ์ดสถิติรายงานกำลังพล */
.big{font-size:34px;font-weight:600;line-height:1.25;margin:2px 0}

/* v67 — การ์ด KPI ของรายงาน + กล่องช่วยอธิบายทั้งระบบ */
.kpi{display:flex;gap:14px;align-items:flex-start}
.kpi .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;font-size:19px;border:1px solid var(--line)}
.kpi .ic.blue{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.kpi .ic.green{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.kpi .ic.red{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.kpi .ic.yellow{background:color-mix(in srgb,var(--yellow) 16%,transparent);color:#b8860b}
html.dark .kpi .ic.yellow{color:var(--yellow)}
.kpi .big{font-size:31px;font-weight:600;line-height:1.15;margin:2px 0 1px}
.kpi .sub{font-size:12px;color:var(--muted)}
details.help{margin-top:13px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--blue) 4%,transparent);overflow:hidden}
details.help summary{cursor:pointer;list-style:none;padding:9px 14px;font-size:12.5px;
  font-weight:500;color:var(--blue);display:flex;gap:8px;align-items:center;
  user-select:none}
details.help summary::before{content:"?";width:18px;height:18px;border-radius:50%;
  border:1.4px solid currentColor;display:grid;place-items:center;font-size:11px;
  flex:0 0 auto}
details.help[open] summary{border-bottom:1px solid var(--line)}
details.help .hbody{padding:11px 15px 13px;font-size:13px;line-height:1.85;
  color:var(--ink)}
details.help .hbody b{color:var(--blue)}
details.help .hbody ul{margin:4px 0 0 18px}
details.help .hbody li{margin:3px 0}

/* v69 — ปุ่มแอ็กชันในตารางตำแหน่ง เรียงแถวเดียวไม่ห่อรก */
.op-acts{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.op-acts .btn{white-space:nowrap}

/* v69/v72 — ผังองค์กรแบบแผนภูมิ (โหนดเม็ดยา ต่อเส้นจริง) */
.orgtree{margin-top:18px;display:flex;flex-direction:column;align-items:center}
.org-root{min-width:270px;max-width:340px;text-align:center;padding:18px 26px;
  border-radius:16px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--co-c) 88%,#000 6%),
             color-mix(in srgb,var(--co-c) 55%,#0a1626));
  box-shadow:0 10px 30px color-mix(in srgb,var(--co-c) 35%,transparent)}
.org-root::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.22),transparent 45%)}
.org-root-badge{display:inline-grid;place-items:center;min-width:40px;height:40px;
  padding:0 10px;border-radius:11px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);font-weight:600;margin-bottom:8px}
.org-root-name{font-size:15.5px;font-weight:600}
.org-root-sub{font-size:11.5px;opacity:.85;margin-top:2px}
.org-trunk{width:2px;height:24px;background:var(--line)}
.org-branches{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;
  position:relative;padding-top:20px;max-width:100%}
.org-branches::before{content:"";position:absolute;top:0;left:7%;right:7%;
  height:2px;background:var(--line)}
.org-branch{position:relative;width:198px;margin-bottom:22px;
  display:flex;flex-direction:column;align-items:center}
.org-branch::before{content:"";position:absolute;top:-20px;left:50%;width:2px;
  height:20px;background:var(--line)}
/* โหนดแผนก: เม็ดยาดำแบบผังจริง */
.n-dept{background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:600;
  padding:7px 16px;border-radius:10px;text-align:center;max-width:100%;
  line-height:1.45;box-shadow:0 4px 12px color-mix(in srgb,var(--ink) 22%,transparent);
  position:relative;z-index:1}
/* สแต็กใต้แผนก: เส้นแกนกลางร้อยทุกโหนด */
.n-stack{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 0 2px;position:relative;width:100%}
.n-stack::before{content:"";position:absolute;top:0;bottom:-6px;left:50%;
  width:2px;background:var(--line)}
.n-stack > *{position:relative;z-index:1}
.n-head{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:500;
  background:color-mix(in srgb,var(--yellow) 14%,var(--glass));
  border:1px solid color-mix(in srgb,var(--yellow) 45%,transparent);
  border-radius:11px;padding:6px 12px;max-width:100%}
.n-head span:last-child{display:flex;flex-direction:column;line-height:1.35}
.n-head em{font-style:normal;font-size:10px;color:var(--muted);
  letter-spacing:.06em}
.n-head.none{border:1.4px dashed var(--line);background:var(--glass);
  color:var(--muted);font-style:italic;font-size:11.5px;font-weight:400;
  padding:6px 13px}
.org-ava{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:600;font-size:12px;flex:0 0 auto}
.n-div{display:flex;align-items:center;gap:8px;justify-content:space-between;
  font-size:11.5px;background:color-mix(in srgb,var(--blue) 8%,var(--glass));
  border:1px solid color-mix(in srgb,var(--blue) 30%,transparent);
  border-radius:9px;padding:4.5px 12px;max-width:100%;color:var(--ink)}
.n-div b{font-size:11px;color:var(--blue)}
.n-foot{display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:11px;color:var(--muted);margin-top:9px}
.n-foot a{color:var(--blue)}
.org-set summary{cursor:pointer;font-size:10.5px;color:var(--muted);
  list-style:none;user-select:none}
.org-set summary::before{content:"⚙ "}
.org-set .setform{display:flex;gap:6px;margin-top:7px}
.org-set select{font-size:11.5px;max-width:130px}
@media(max-width:700px){
  .org-branch{width:100%;max-width:280px}
  .org-branches{gap:0}
  .org-branches::before{left:50%;right:auto;width:2px;height:100%}}

/* v70 — สรรหา: กลุ่มเฟส + แถบขั้นตอนจิ๋ว + การ์ดทางเข้า */
a.entry{text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
a.entry:hover{transform:translateY(-2px);border-color:var(--blue)}
.phase-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.phase{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 10px 7px 8px;
  border:1px dashed var(--line);border-radius:13px;position:relative}
.phase-tag{font-size:10.5px;letter-spacing:.08em;color:var(--muted);
  font-weight:600;padding:0 4px;white-space:nowrap}
.phase-arrow{color:var(--muted);font-size:15px}
.btn.dim{opacity:.6}
.ministeps{display:inline-flex;gap:4px;margin-top:6px;align-items:center}
.ministeps i{width:8px;height:8px;border-radius:50%;background:transparent;
  border:1.4px solid var(--line);display:inline-block}
.ministeps i.done{background:var(--green);border-color:var(--green)}
.ministeps i.now{background:var(--blue);border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 25%,transparent)}
.ministeps i.skip{border-style:dashed;opacity:.55}
.ministeps i.x{border-color:var(--red);opacity:.5}
.ministeps[data-off] i{background:transparent}
.run-step.skip{opacity:.55;border-style:dashed}
.run-step.skip b{border-style:dashed;background:transparent;color:var(--muted)}
.qrbox{display:inline-block;background:#fff;border-radius:13px;padding:10px;
  margin-top:6px;box-shadow:var(--shadow)}
.qrbox svg{display:block;width:150px;height:150px}

/* v71 — ตารางตำแหน่ง: ปุ่มไอคอนกะทัดรัด + แถบความคืบหน้า */
.op-acts{flex-wrap:nowrap;align-items:center}
.op-acts .btn{min-height:32px}
.btn.ic{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;padding-left:11px;padding-right:11px}
.btn.ic span{font-size:11.5px}
.btn.ic.warn:hover{border-color:var(--red);color:var(--red)}
.codot{width:8px;height:8px;border-radius:3px;display:inline-block;margin-right:7px;
  vertical-align:1px}
.hbarw{display:flex;align-items:center;gap:8px}
.hbar{flex:1;height:6px;border-radius:99px;background:var(--line-soft);
  overflow:hidden;min-width:44px}
.hbar i{display:block;height:100%;border-radius:99px;background:var(--green)}
.sm-num{font-size:12px;color:var(--muted);flex:0 0 auto}
@media(max-width:900px){.btn.ic span{display:none}
  .btn.ic{padding-left:9px;padding-right:9px}}

/* v73 — ชั้นตำแหน่ง L1-L12 */
.lv-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lv-pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  padding:3px 10px 3px 4px;border-radius:99px;border:1px solid var(--line);
  color:#20242c;background:var(--lv,#eee)}
.lv-pill b{font-size:10px;background:rgba(255,255,255,.55);border-radius:99px;
  padding:1px 7px;color:#20242c}
html.dark .lv-pill{color:#20242c}
.n-head[style*="--lvbg"]{background:var(--lvbg);border-color:color-mix(in srgb,#000 14%,var(--lvbg));color:#20242c}
.n-head[style*="--lvbg"] em{color:#4a5160}
.pos-list{margin-top:14px;display:flex;flex-direction:column;gap:7px;
  max-height:340px;overflow:auto;padding-right:4px}
.pos-row{display:flex;align-items:center;gap:10px;font-size:12.5px;
  border:1px solid var(--line-soft);border-radius:11px;padding:6px 11px}
.pos-row .lv-pill{padding:3px 4px}
.pos-row .pos-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pos-row select{font-size:11.5px;padding:4px 8px}
.pos-row .setform{margin:0}

/* v74 — แถบแจ้งอัปเดตระบบ */
.update-bar{position:fixed;left:50%;bottom:-70px;transform:translateX(-50%);
  z-index:120;display:flex;gap:14px;align-items:center;padding:11px 16px 11px 19px;
  border-radius:99px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(16px);box-shadow:var(--shadow);font-size:13.5px;
  transition:bottom .35s cubic-bezier(.2,.9,.3,1.2);white-space:nowrap;max-width:94vw}
.update-bar.show{bottom:22px}
.update-bar button{border:0;border-radius:99px;padding:8px 17px;font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#4a95d8,#2a6198)}
@media(max-width:560px){.update-bar{white-space:normal;border-radius:16px}}

/* v76 — แบ่งหน้ากลาง */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px}
.pager-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pager .pgon{background:var(--blue);color:#fff;border-color:var(--blue);
  cursor:default;min-width:38px;text-align:center}
.pager .btn.dis{opacity:.4;cursor:default;pointer-events:none}
.pager{margin-top:14px}

/* v77 — โมดัลกลางของหน้าภายใน (ใช้กับแก้ไขประกาศ) */
.veil{position:fixed;inset:0;background:rgba(28,36,52,.34);z-index:90;
  display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .18s;
  backdrop-filter:blur(4px)}
.veil.show{opacity:1}
.veil[hidden]{display:none}
.mbox{background:var(--glass-strong);border:1px solid var(--line);border-radius:17px;
  max-width:430px;width:100%;padding:20px 19px;backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 24px 60px rgba(12,17,28,.28);max-height:88vh;overflow:auto}
html.dark .veil{background:rgba(6,9,15,.6)}
.mbox h4{font-size:15px;font-weight:600}

/* v85 — ป้ายจำนวนใบรออนุมัติบนเมนู */
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;
  border-radius:99px;background:var(--red);color:#fff;font-size:11px;
  font-weight:600;display:inline-grid;place-items:center;
  box-shadow:0 2px 8px color-mix(in srgb,var(--red) 45%,transparent)}

/* v87 — เส้นทางหน้า (breadcrumb) ใต้หัวข้อ */
.crumbs{font-size:11.5px;color:var(--muted);letter-spacing:.02em;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.crumbs i{font-style:normal;opacity:.5}
.crumbs b{color:var(--ink);font-weight:500}

/* ═══ v88 — ระเบียบตัวอักษรและการวางฟอร์ม (ทั้งระบบ) ═══ */
/* สเกลตัวอักษรมาตรฐาน — ใช้แทนการฝัง font-size รายจุด */
:root{--fs-xs:11px;--fs-sm:11.5px;--fs-md:12.5px;--fs-base:13px;
  --fs-lg:15px;--fs-xl:17px}
.ph, .sub, .dl{font-size:var(--fs-sm)}
table{font-size:var(--fs-base)}
th{font-size:var(--fs-sm);letter-spacing:.02em}
.chip{font-size:var(--fs-xs)}
.field label{font-size:var(--fs-sm)}
.btn{font-size:var(--fs-base)}
.btn.sm{font-size:var(--fs-md);min-height:34px;padding:0 14px}
.btn.ic{min-height:32px;padding:0 11px}
.ctl-row .btn{min-height:38px}
/* ปุ่มที่ครอบข้อความหลายบรรทัด ให้ยืดตามเนื้อหาแต่ยังกึ่งกลาง */
.btn.multi{min-height:0;padding-top:10px;padding-bottom:10px;white-space:normal;line-height:1.45}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-base)}

/* แถวฟอร์ม: ป้าย-ช่องกรอก-ปุ่ม เริ่มที่เส้นเดียวกันจากด้านบน
   (จัดชิดล่างไม่ได้ เพราะบางช่องมีข้อความกำกับใต้ช่อง เช่น ป้าย พ.ศ.
   จะดันช่องอื่นให้ลอยสูงต่ำไม่เท่ากัน) */
.ctl-row{align-items:flex-start}
.ctl-row:not(.has-labels){align-items:center}
.ctl-row.has-labels > .btn,
.ctl-row.has-labels > button,
.ctl-row.has-labels > a.btn,
.ctl-row.has-labels > form > .btn{margin-top:var(--label-h) !important;
  align-self:flex-start}
:root{--label-h:23px}      /* ความสูงป้ายกำกับ + ระยะห่าง — ใช้จัดปุ่มให้ตรงแนว */
.ctl-row > .field{display:flex;flex-direction:column;margin:0}
.ctl-row .field label{margin:0 0 5px;line-height:18px;height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl-row .field > .ph,.ctl-row .field > .be-hint{order:9}
.ctl-row input:not([type=file]), .ctl-row select{height:38px;box-sizing:border-box}
/* ช่องอัปโหลดไฟล์มี UI ของตัวเอง (.filepick) — ปล่อยให้สูงตามเนื้อหา */
.ctl-row .filepick{width:100%;min-height:42px}
.ctl-row input[type=file]{height:auto}
.ctl-row > .field:has(.filepick){align-self:stretch}
.ctl-row .btn{min-height:38px}
.ctl-row textarea{min-height:38px}
/* การ์ดในแถวเดียวกันสูงเท่ากันและเนื้อหาชิดบนเสมอ */
/* การ์ดใน bento เป็น grid item อยู่แล้ว → สูงเท่ากันเองโดยไม่ต้องบังคับ flex
   (บังคับ flex column ทำให้ text-align:center ของเนื้อหาในการ์ดใช้ไม่ได้
   เช่น QR ในหน้าตำแหน่งที่เปิดรับ จะหลุดไปชิดซ้าย) */
.bento > .cell > .tw:last-child, .bento > .cell > form:last-child{margin-bottom:0}
/* ของที่ต้องอยู่กึ่งกลางการ์ดเสมอ ไม่ว่าการ์ดจะเป็น flex หรือ block */
.qrbox, .doc-seal{align-self:center;margin-left:auto;margin-right:auto;display:block}
.qrbox{width:max-content}
.kpi{align-items:flex-start}
/* ผังข้อความแบบ pre (เช่น ผังสองประตูในหน้าสรรหา) — ใช้ฟอนต์ไทยได้ปกติ */
.flowmap{font-size:var(--fs-md);color:var(--muted)}
/* กล่องติ๊กในแถวฟอร์ม — วางแนวเดียวกับช่องกรอก ไม่ต้องดัน margin เอง */
.ctl-row.has-labels > .check{margin-top:var(--label-h);height:38px;
  display:inline-flex;align-items:center;gap:8px}
.ctl-row.has-labels > label.check{white-space:normal;line-height:1.45}

/* ═══ v90 — แถบงานที่ต้องทำ (หน้าแรก) ═══ */
.todo-bar{margin-bottom:18px}
.todo-bar.ok{background:var(--glass);border:1px solid var(--line);
  border-radius:15px;padding:14px 17px}
.todo-head{font-size:var(--fs-base);font-weight:600;margin-bottom:10px;
  display:flex;align-items:center;gap:9px}
.todo-head .ph{margin:0;font-weight:400}
.todo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:11px}
.todo-card{display:flex;align-items:center;gap:13px;padding:13px 15px;
  border-radius:14px;background:var(--glass);border:1px solid var(--line);
  border-left:4px solid var(--blue);text-decoration:none;color:inherit;
  transition:transform .15s,border-color .15s,box-shadow .15s}
.todo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.todo-card.red{border-left-color:var(--red)}
.todo-card.yellow{border-left-color:var(--yellow)}
.todo-card.blue{border-left-color:var(--blue)}
.todo-n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;
  min-width:44px;text-align:center;line-height:1}
.todo-card.red .todo-n{color:var(--red)}
.todo-card.yellow .todo-n{color:var(--yellow)}
.todo-card.blue .todo-n{color:var(--blue)}
.todo-card > div:nth-child(2){flex:1;min-width:0}
.todo-card b{font-size:var(--fs-base);font-weight:600}
.todo-card .ph{margin:2px 0 0;font-size:var(--fs-xs);line-height:1.5}
.todo-go{color:var(--muted);font-size:17px}
.nav-sub .nav-more{color:var(--blue);font-weight:500}

/* v90 — การ์ดรวมเครื่องมือในหน้าโมดูล */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:10px;margin-top:12px}
.tool{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--glass);text-decoration:none;
  color:inherit;transition:transform .15s,border-color .15s}
.tool:hover{transform:translateY(-2px);border-color:var(--blue)}
.tool .ic{font-size:19px;width:26px;text-align:center;flex:0 0 auto}
.tool b{display:block;font-size:var(--fs-base);font-weight:500}
.tool em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--muted);
  margin-top:1px}

/* v91 — การ์ด QR: จัดกึ่งกลางทั้งแนวตั้งและแนวนอน */
.qr-card{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:4px}
.qr-card h3{width:100%;text-align:center}
.qr-card .qrbox{margin:10px auto 4px}
.qr-card .ph{text-align:center;margin:0}

/* v92 — เลือกประเภทเอกสารแบบการ์ด (แนวระบบ HR มาตรฐาน) */
.kindpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:9px;margin-bottom:14px}
.kind{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--glass);cursor:pointer;
  transition:border-color .15s,background .15s}
.kind input{position:absolute;opacity:0;width:0;height:0}
.kind:hover{border-color:var(--blue)}
.kind.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 9%,transparent);
  box-shadow:inset 0 0 0 1px var(--blue)}
.kind .ki{font-size:18px;width:24px;text-align:center;flex:0 0 auto}
.kind b{display:block;font-size:var(--fs-base);font-weight:500;line-height:1.35}
.kind em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--muted)}
.kind-form{padding-top:2px}

/* v92 — กล่องเลือกพนักงานหลายคน (บันทึกอบรมกลุ่ม) */
.pick-box{margin-top:8px;max-height:210px;overflow:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:6px;
  padding:9px;border:1px solid var(--line);border-radius:12px;
  background:var(--line-soft)}
.pick{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;
  cursor:pointer;transition:background .15s}
.pick:hover{background:var(--glass)}
.pick input{margin:0;flex:0 0 auto}
.pick b{display:block;font-size:var(--fs-md);font-weight:500}
.pick em{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--muted)}

/* v93 — ตั้งสายอนุมัติ */
.flow-step{display:flex;align-items:flex-start;gap:13px;padding:11px 0;
  border-bottom:1px solid var(--line-soft)}
.flow-step:last-of-type{border-bottom:0}
.flow-n{width:30px;height:30px;border-radius:50%;flex:0 0 auto;margin-top:22px;
  display:grid;place-items:center;background:var(--line-soft);
  border:1px solid var(--line);font-family:'IBM Plex Mono',monospace;
  font-size:var(--fs-md);color:var(--muted)}
.tool.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--glass))}


/* ═══ v94 — รายการตรวจเอกสารในแฟ้มพนักงาน ═══ */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:8px;margin-top:12px}
.check-grid .check{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:11px;border:1px solid var(--line);background:var(--glass);
  min-height:0;height:auto;margin:0}
.check-grid .check .st{width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:12px;line-height:1;color:#fff;
  background:var(--muted)}
.check-grid .check.ok{border-color:color-mix(in srgb,var(--green) 45%,transparent);
  background:color-mix(in srgb,var(--green) 7%,var(--glass))}
.check-grid .check.ok .st{background:var(--green)}
.check-grid .check.miss{border-color:color-mix(in srgb,var(--red) 45%,transparent);
  background:color-mix(in srgb,var(--red) 6%,var(--glass))}
.check-grid .check.miss .st{background:var(--red)}
.check-grid .check > div{min-width:0;font-size:var(--fs-base);line-height:1.35}
.check-grid .check small{display:block;font-size:var(--fs-xs);color:var(--muted);
  margin-top:1px}

/* ═══ v94 — สไตล์ที่ขาดหายของ class ที่หน้าต่าง ๆ ใช้อยู่ ═══ */
/* กริดคู่ ป้าย-ค่า (ใช้ในใบคำขอ/รายละเอียด) */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:11px 18px}
.dl-grid > div{min-width:0}
/* กล่องฟอร์มย่อยที่สลับตามประเภทคำขอ */
.fset{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-soft)}
.fset[hidden]{display:none}
/* ข้อความช่วยเหลือใต้ช่องกรอก */
.hint{font-size:var(--fs-xs);color:var(--muted);margin-top:4px;line-height:1.55}
/* หัวข้อผู้ถือครอง (หน้าสินทรัพย์) */
.org-head{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:12px;border:1px solid var(--line);background:var(--glass)}
/* กล่องแจ้งผลสำเร็จในใบคำขอ */
.ready-ok{border:1px solid color-mix(in srgb,var(--green) 40%,transparent);
  background:color-mix(in srgb,var(--green) 8%,transparent);
  border-radius:12px;padding:11px 14px;font-size:var(--fs-base)}
/* รายการรหัสซ้ำ (หน้า Humansoft) */
.dupbox{border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  margin-top:9px;background:var(--line-soft)}
/* แถบเกินกำหนด */
.ovd{color:var(--red);font-weight:500}
/* หน้าปัจจุบันของตัวแบ่งหน้าแบบเก่า */
.pager .cur, .cur{background:var(--blue);color:#fff;border-radius:9px;
  padding:5px 11px;display:inline-block}
/* ดาวแดงที่ปิดไว้ (ฟิลด์ไม่บังคับในวิซาร์ด) */
.req-star-off{display:none}
/* ตัวเลือกผู้ลงนามในวิซาร์ดเอกสาร */
.sg-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* ปุ่มเลือกชื่อพยานในวิซาร์ดออกเอกสาร (v125) */
.wit-pick{white-space:nowrap}

/* ═══════════════ v95 — ชั้นประสบการณ์ใช้งานกลาง ═══════════════ */

/* ── Toast แจ้งเตือน (แทนแถบ flash แข็ง ๆ) ── */
.toast-stack{position:fixed;top:18px;right:18px;z-index:200;display:flex;
  flex-direction:column;gap:10px;max-width:min(390px,92vw);pointer-events:none}
.toast{position:relative;display:flex;align-items:flex-start;gap:11px;
  padding:13px 14px 14px;border-radius:14px;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 12px 40px rgba(10,14,22,.22);
  font-size:var(--fs-base);line-height:1.5;color:var(--ink);
  transform:translateX(120%) scale(.96);opacity:0;pointer-events:auto;
  transition:transform .34s cubic-bezier(.2,.9,.3,1.25),opacity .28s}
.toast.show{transform:none;opacity:1}
.toast .t-ic{width:23px;height:23px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;
  background:var(--blue);margin-top:1px}
.toast.ok .t-ic{background:var(--green)}
.toast.error .t-ic{background:var(--red)}
.toast.warn .t-ic{background:var(--yellow);color:#3a2f06}
.toast .t-msg{flex:1;min-width:0;word-break:break-word}
.toast .t-x{background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:13px;line-height:1;padding:2px 3px;border-radius:6px;flex:0 0 auto}
.toast .t-x:hover{color:var(--ink);background:var(--line-soft)}
.toast .t-bar{position:absolute;left:0;bottom:0;height:2.5px;width:100%;
  background:var(--blue);transform-origin:left;animation:toastbar linear forwards}
.toast.ok .t-bar{background:var(--green)}
.toast.error .t-bar{background:var(--red)}
@keyframes toastbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:560px){.toast-stack{left:12px;right:12px;top:12px;max-width:none}}

/* ── ปุ่ม: แรงกด + สถานะกำลังบันทึก ── */
.btn{isolation:isolate}
.btn .rp{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);animation:rp .6s ease-out;pointer-events:none;z-index:0}
.btn.ghost .rp{background:color-mix(in srgb,var(--blue) 22%,transparent)}
@keyframes rp{to{transform:scale(2.4);opacity:0}}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.loading{position:relative;color:transparent !important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:17px;height:17px;
  border-radius:50%;border:2.2px solid rgba(255,255,255,.35);
  border-top-color:#fff;animation:spin .7s linear infinite}
.btn.ghost.loading::after{border-color:color-mix(in srgb,var(--ink) 25%,transparent);
  border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── สถานะว่าง (ใช้แบบเดียวกันทั้งระบบ) ── */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:34px 20px;text-align:center;color:var(--muted)}
.empty-state .es-ic{width:52px;height:52px;border-radius:16px;display:grid;
  place-items:center;font-size:24px;background:var(--line-soft);
  border:1px solid var(--line);margin-bottom:3px}
.empty-state b{color:var(--ink);font-size:var(--fs-lg);font-weight:600}
.empty-state span{font-size:var(--fs-base);max-width:420px;line-height:1.65}
.empty-state .btn{margin-top:9px}

/* ── ไฮไลต์แถวที่เพิ่งบันทึก ── */
@keyframes rowNew{0%{background:color-mix(in srgb,var(--green) 22%,transparent)}
  100%{background:transparent}}
.row-new{animation:rowNew 2.6s ease-out}

/* ── การ์ด: ยกตัวนุ่มขึ้นเมื่อชี้ (ทั้งระบบ) ── */
.bento > .cell{transition:transform .18s ease,box-shadow .25s ease}
.bento > .cell:hover{transform:translateY(-1px)}
tbody tr.link{cursor:pointer}
tbody tr.link:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}

/* ── ป้ายสถานะเร่งด่วนเต้นเบา ๆ ── */
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}}
.nav-badge{animation:pulseDot 2.4s ease-out infinite}
@media (prefers-reduced-motion: reduce){
  .toast{transition:none}.btn .rp{display:none}
  .nav-badge,.row-new{animation:none}
  .bento > .cell:hover{transform:none}}
/* ปุ่มหลักของหน้า (มาตรฐานเดียวทุกหน้า) */
.page-actions{display:flex;gap:9px;align-items:center;margin-left:auto;
  flex-wrap:wrap}
.page-actions:empty{display:none}
@media(max-width:760px){.page-actions{order:9;width:100%;margin:8px 0 0}}
/* ลำดับเข้าฉากเพิ่มเติม (การ์ดที่แทรกภายหลัง) */
.in.d3b{animation-delay:.20s}
.in.d3c{animation-delay:.26s}
.in.d5{animation-delay:.34s}
.in.d2b{animation-delay:.16s}
/* v106 — แถวบัญชี: กริดคอลัมน์ตายตัว ทุกแถวตรงแนวกันเป๊ะ */
.conn-row{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;
  align-items:center;gap:12px 14px;padding:13px 15px;margin-bottom:10px;
  border:1px solid var(--line);border-radius:13px;background:var(--glass)}
.conn-row .cr-info b{font-size:var(--fs-lg)}
.conn-row .cr-info .ph{margin:3px 0 0}
.conn-row .cr-act{display:flex;align-items:center;gap:9px;flex-wrap:nowrap}
.conn-row .cr-act select{width:168px}
.conn-row .cr-act input[name=caller]{width:116px;height:34px;padding:0 12px;
  font:inherit;font-size:12.5px;color:var(--ink);background:var(--line-soft);
  border:1px solid var(--line);border-radius:10px}
.conn-row .cr-act input[name=caller]:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.22)}
.conn-row .cr-act select{height:34px;padding-top:0;padding-bottom:0;font-size:12.5px}
.conn-row .cr-more{justify-self:end}
.conn-row .cr-more > summary{cursor:pointer;list-style:none;white-space:nowrap;
  padding:6px 2px}
.conn-row .cr-more > summary::-webkit-details-marker{display:none}
.conn-row .cr-more > summary::before{content:"⋯ ";font-weight:700}
.conn-row .cr-more-in{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;
  grid-column:1/-1}
@media(max-width:900px){
  .conn-row{grid-template-columns:1fr}
  .conn-row .cr-act{flex-wrap:wrap}
  .conn-row .cr-more{justify-self:start}}

/* ── select ทั้งระบบ — หน้าตาเดียวกับ input ของธีม ไม่ใช่ dropdown ดิบของ browser ── */
select:not([multiple]){appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font:inherit;color:var(--ink);background-color:var(--line-soft);
  border:1px solid var(--line);border-radius:10px;padding:8px 34px 8px 12px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2366707F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
  cursor:pointer;transition:border-color .2s, box-shadow .2s}
select:not([multiple]):focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(57,129,195,.22)}
select:not([multiple]):disabled{opacity:.55;cursor:not-allowed}
select:not([multiple]) option{background:var(--bg);color:var(--ink)}
html.dark select:not([multiple]){
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238792A3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
/* ให้ select ใน .field คงระยะเดิมของฟอร์ม แต่เผื่อที่ลูกศรด้านขวา */
.field select:not([multiple]){padding:11px 36px 11px 14px;border-radius:12px}

/* ── v119: ป๊อปอัพทั้งระบบ — โทนสว่าง สีสดตามแบรนด์ ──
   ใช้ได้ทุกที่: .mbox = กล่อง · .mbox-head/.mbox-body/.mbox-foot = ส่วนหัว/เนื้อ/ท้าย
   (.op-* คือชื่อเดิมของป๊อปอัพตำแหน่งงาน — ยังใช้ได้เหมือนกันทุกประการ) */
.op-bar{display:flex;align-items:center;gap:16px;justify-content:space-between;
  flex-wrap:wrap}
.op-bar .ph{max-width:760px}

.mbox{
  --op-surface:#fff;                 /* พื้นกล่อง — ขาวสะอาด ไม่โปร่งจนดูหม่น */
  --op-field:#fff;                   /* ช่องกรอกขาว ตัดกับพื้นสีอ่อน */
  --op-tint:#F7F9FD;                 /* แถบหัว/ท้าย */
  background:var(--op-surface);border:0;border-radius:20px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 30px 80px rgba(18,26,44,.30),0 2px 8px rgba(18,26,44,.10)}
html.dark .mbox{--op-surface:#141922;--op-field:rgba(255,255,255,.045);
  --op-tint:#191F2A;box-shadow:0 30px 80px rgba(0,0,0,.62)}
.mbox.wide,.op-modal{max-width:900px}
.op-modal,.mbox.split{padding:0;display:flex;flex-direction:column;max-height:92vh;
  overflow:hidden;border-radius:22px}

/* หัวป๊อปอัพ — แถบไล่สีแบรนด์บาง ๆ ให้ดูสดใส */
.op-mhead,.mbox-head{position:relative;display:flex;align-items:flex-start;
  justify-content:space-between;gap:12px;padding:20px 26px 14px;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--blue) 11%,var(--op-tint)),
    color-mix(in srgb,var(--green) 8%,var(--op-tint)) 62%,var(--op-tint));
  border-bottom:1px solid var(--line)}
.op-mhead::before,.mbox-head::before{content:"";position:absolute;left:0;right:0;top:0;
  height:4px;background:linear-gradient(90deg,var(--blue),var(--green) 34%,
    var(--yellow) 67%,var(--red))}
.op-mhead h4,.mbox-head h4{font-size:19px;font-weight:700;letter-spacing:-.2px}
.op-mhead .op-sub,.mbox-head .op-sub{font-size:12.5px;color:var(--muted);margin-top:3px;
  line-height:1.65;max-width:640px}
.op-x,.mbox-x{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:var(--op-surface);color:var(--muted);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.16s}
.op-x:hover,.mbox-x:hover{color:var(--red);border-color:var(--red);transform:rotate(90deg)}

.op-modal form,.mbox.split form{display:flex;flex-direction:column;min-height:0;
  margin-top:0 !important}
.op-body,.mbox-body{flex:1;min-height:0;overflow-y:auto;padding:6px 26px 22px;
  background:var(--op-surface)}

/* หัวข้อกลุ่ม — แต่ละกลุ่มสีของตัวเอง (ตั้งด้วย style="--sc:var(--green)") */
.op-sec,.mbox-sec{display:flex;align-items:center;gap:9px;margin:20px 0 11px;
  font-size:13px;font-weight:600;color:var(--ink)}
.op-sec::before,.mbox-sec::before{content:"";width:26px;height:26px;border-radius:9px;
  flex:0 0 auto;background:color-mix(in srgb,var(--sc,var(--blue)) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,var(--blue)) 34%,transparent);
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--sc,var(--blue)) 26%,transparent)}
.op-sec::after,.mbox-sec::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.op-body .op-sec:first-child,.mbox-body .mbox-sec:first-child{margin-top:10px}

/* ช่องกรอกในป๊อปอัพ — ขาว สว่าง ขอบชัด */
.mbox .field label{font-size:12.5px;font-weight:500;color:var(--ink);
  opacity:.78;margin-bottom:6px}
.mbox .field input,.mbox .field select,.mbox .field textarea,.mbox textarea{
  background:var(--op-field);border:1px solid var(--line);border-radius:12px;
  font-size:14px;transition:border-color .18s,box-shadow .18s,background .18s}
.mbox .field input::placeholder,.mbox textarea::placeholder{
  color:var(--muted);opacity:.62}
.mbox .field input:hover,.mbox .field select:hover,.mbox textarea:hover{
  border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.mbox .field input:focus,.mbox .field select:focus,.mbox textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--blue) 17%,transparent);
  background:var(--op-surface)}
.mbox textarea{width:100%;padding:11px 14px;font:inherit;color:var(--ink);
  line-height:1.75;resize:vertical}

/* จัดช่องกรอกเป็นกริดเท่า ๆ กัน ไม่ปล่อยให้กว้างสั้นไม่เท่ากัน */
.op-body .ctl-row,.mbox-body .ctl-row{display:grid;gap:13px 14px;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));align-items:start}
.op-body .ctl-row .field,.op-body .ctl-row .field.grow,
.mbox-body .ctl-row .field,.mbox-body .ctl-row .field.grow{width:auto !important;
  min-width:0;flex:none}
.op-body .ctl-row .field:has(textarea),
.mbox-body .ctl-row .field:has(textarea){grid-column:span 2}
.op-body .ctl-row .field:has(textarea) textarea,
.mbox-body .ctl-row .field:has(textarea) textarea{min-height:104px}
@media(max-width:560px){.op-body .ctl-row,.mbox-body .ctl-row{grid-template-columns:1fr}
  .op-body .ctl-row .field:has(textarea),
  .mbox-body .ctl-row .field:has(textarea){grid-column:span 1}}

.op-foot,.mbox-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  flex:0 0 auto;padding:14px 26px;border-top:1px solid var(--line);
  background:var(--op-tint)}
.op-foot .op-note,.mbox-foot .op-note{margin-right:auto;font-size:12px;color:var(--muted)}
@media(max-width:700px){
  .op-modal,.mbox.split{max-height:96vh;border-radius:18px}
  .op-mhead,.mbox-head{padding:16px 16px 12px}
  .op-body,.mbox-body{padding:4px 16px 18px}
  .op-foot,.mbox-foot{padding:12px 16px}
  .op-foot .op-note,.mbox-foot .op-note{display:none}
  .op-foot > .btn,.mbox-foot > .btn{flex:1}}

/* ── v121: ไทม์ไลน์บันทึกการติดต่อผู้สมัคร ── */
.tl{display:flex;flex-direction:column;gap:0}
.tl-row{display:flex;gap:13px;position:relative;padding-bottom:15px}
.tl-row::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--line),transparent)}
.tl-row:last-child{padding-bottom:0}
.tl-row:last-child::before{display:none}
.tl-dot{flex:0 0 auto;width:32px;height:32px;border-radius:11px;display:grid;
  place-items:center;font-size:15px;background:var(--line-soft);
  border:1px solid var(--line);z-index:1}
.tl-blue{background:color-mix(in srgb,var(--blue) 15%,transparent);
  border-color:color-mix(in srgb,var(--blue) 38%,transparent)}
.tl-green{background:color-mix(in srgb,var(--green) 15%,transparent);
  border-color:color-mix(in srgb,var(--green) 38%,transparent)}
.tl-yellow{background:color-mix(in srgb,var(--yellow) 20%,transparent);
  border-color:color-mix(in srgb,var(--yellow) 45%,transparent)}
.tl-red{background:color-mix(in srgb,var(--red) 15%,transparent);
  border-color:color-mix(in srgb,var(--red) 38%,transparent)}
.tl-muted{background:var(--line-soft)}
.tl-body{flex:1;min-width:0;padding-top:3px}
.tl-top{display:flex;align-items:center;gap:8px;font-size:14px}
.tl-when{font-size:11.5px;color:var(--muted);white-space:nowrap}
.tl-detail{font-size:13.5px;line-height:1.75;margin-top:3px;white-space:pre-line}
.tl-meta{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.tl-del{font:inherit;font-size:11.5px;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:99px;padding:1px 9px;cursor:pointer}
.tl-del:hover{color:var(--red);border-color:var(--red)}
.chip.sm{font-size:10.5px;padding:1px 8px}

/* การ์ดขั้นตอนกดเข้าไปดูรายละเอียดได้ */
a.run-step{text-decoration:none;color:inherit;cursor:pointer;transition:.16s}
a.run-step:hover{border-color:var(--blue);transform:translateY(-1px)}
@keyframes cardFlash{0%,100%{box-shadow:var(--shadow)}
  35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 30%,transparent)}}
.flash{animation:cardFlash 1.3s ease}


/* ═══ v129: สติกเกอร์ QR ทรัพย์สิน ═══ */
.qr-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.qr-sheet.sm{grid-template-columns:repeat(auto-fill,minmax(125px,1fr))}
.qr-card{border:1px solid var(--line);border-radius:11px;padding:10px;display:flex;
  gap:10px;align-items:center;background:#fff;position:relative}
.qr-card::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--green));
  opacity:.5}
.qr-card .qr-img{width:64px;height:64px;flex:0 0 auto}
.qr-sheet.sm .qr-card .qr-img{width:44px;height:44px}
.qr-card .qr-img svg{width:100%;height:100%;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.qr-card .qr-img svg image{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.qr-card .qr-txt{display:flex;flex-direction:column;gap:2px;font-size:11px;
  color:#14181f;overflow:hidden;min-width:0}
.qr-card .qr-txt b{font-size:12.5px;letter-spacing:.02em}
.qr-card .qr-name{font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.qr-card .qr-where{color:#5b6470;line-height:1.35}
.qr-card .qr-where i{font-style:normal;font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:#96a0ad;margin-right:3px}
.qr-sheet.sm .qr-card .qr-txt{font-size:9.5px}
.qr-sheet.sm .qr-card .qr-where i{display:none}
@media print{
  .side-nav,.topbar,.ctl-row,.help,.page-actions,
  .qr-hide-print,h1,.ch,.ph{display:none!important}
  .qr-card{break-inside:avoid;page-break-inside:avoid;
    border:1px solid #999!important;background:#fff!important}
  /* v138: โลโก้จางใน QR ต้องพิมพ์ออกมาด้วย ไม่ใช่ถูกตัดทิ้งเพราะเป็นสีอ่อน */
  .qr-card .qr-img svg,.qr-card .qr-img svg image{
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
    display:block!important;visibility:visible!important;opacity:1}
  .qr-card .qr-txt{color:#000!important}
  .glass{box-shadow:none!important;background:#fff!important;border:0!important;
    padding:0!important;margin:0!important}
  .qr-sheet{gap:6px}
  @page{margin:8mm}
}


/* ═══ v130: ตรวจนับหน้างานบนมือถือ (ออฟไลน์ได้) ═══ */
.net-bar{padding:9px 13px;border-radius:10px;font-size:12.5px;font-weight:500;
  margin-bottom:12px;text-align:center}
.net-bar.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.net-bar.warn{background:color-mix(in srgb,var(--yellow) 18%,transparent);color:#b8860b}
.net-bar.off{background:color-mix(in srgb,var(--red) 13%,transparent);color:var(--red)}
html.dark .net-bar.warn{color:var(--yellow)}
.it-card{border:1px solid var(--line);border-radius:11px;padding:11px;margin-bottom:9px}
.it-card.q-wait{border-color:var(--yellow);
  background:color-mix(in srgb,var(--yellow) 7%,transparent)}
.it-card.q-ok{border-color:var(--green);
  background:color-mix(in srgb,var(--green) 6%,transparent)}
.it-head{display:flex;justify-content:space-between;align-items:center;gap:9px}
.it-state{font-size:11.5px;color:var(--muted)}
.it-sub{font-size:12.5px;margin-top:2px}
.it-row{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.it-row .it-cond{min-width:118px}
.it-row .it-note{flex:1;min-width:120px}
.it-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
@media (max-width:640px){.it-btns .btn{flex:1 1 46%}}


/* ═══ v133: ช่องเลือกแบบพิมพ์ค้นได้ (searchable select) ═══ */
.ss{position:relative}
.ss .ss-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;
  border:0;padding:0;margin:0}
.ss-box{position:relative;display:flex;align-items:center}
.ss-box .ss-input{width:100%;padding-right:30px}
.ss-caret{position:absolute;right:11px;color:var(--muted);font-size:11px;
  pointer-events:auto;cursor:pointer;transition:.2s}
.ss.open .ss-caret{transform:rotate(180deg);color:var(--blue)}
.ss-list{display:none;position:absolute;z-index:30;left:0;right:0;top:calc(100% + 5px);
  max-height:270px;overflow-y:auto;padding:5px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-lg,0 12px 34px rgba(8,15,30,.18));
  scrollbar-width:thin}
.ss.open .ss-list{display:block}
.ss-item{padding:8px 11px;border-radius:9px;font-size:13px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-item.on{background:var(--line-soft)}
.ss-item.sel{color:var(--blue);font-weight:500}
.ss-item:hover{background:var(--line-soft)}
.ss-none{padding:9px 11px;font-size:12px;color:var(--muted)}


/* ═══ v136: กระดิ่งงานที่ถึงกำหนด ═══ */
.bell{position:relative;width:38px;height:38px;border-radius:12px;display:grid;
  place-items:center;color:var(--muted);background:var(--glass);
  border:1px solid var(--line);transition:.2s}
.bell:hover{color:var(--blue);border-color:var(--blue)}
.bell.has{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.bell-dot{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;box-shadow:0 2px 7px color-mix(in srgb,var(--red) 45%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .bell.has .bell-dot{animation:bellpulse 2.4s ease-in-out infinite}
}
@keyframes bellpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}


/* ═══ v141: การ์ดเลือกเอกสารที่ต้องอนุมัติก่อนออก ═══
   เดิมเป็นเช็กบ็อกซ์ 38 ตัวเรียงติดกันเป็นพรม อ่านยากและตัวหนังสือตกบรรทัดไม่เท่ากัน
   จัดใหม่เป็นการ์ดเลือกได้ แบ่งตามช่วงชีวิตพนักงาน มีค้นหาและตัวนับ */
.apv-bar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.apv-bar .field{min-width:190px}
.apv-count{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap;
  padding:6px 13px;border-radius:99px;background:var(--line-soft);
  border:1px solid var(--line)}
.apv-count b{color:var(--blue);font-size:14px}

.apv-group{margin-bottom:18px}
.apv-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:9px;border-bottom:1px solid var(--line)}
.apv-head b{font-size:13.5px}
.apv-head span{font-size:11.5px;color:var(--muted);flex:1;min-width:120px}
.apv-all{border:0;background:none;font:inherit;font-size:11.5px;color:var(--blue);
  cursor:pointer;padding:2px 6px;border-radius:7px;white-space:nowrap}
.apv-all:hover{background:color-mix(in srgb,var(--blue) 10%,transparent)}

.apv-grid{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}
.apv-item{position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:11px 13px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);cursor:pointer;transition:.16s;min-height:52px}
.apv-item:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));
  transform:translateY(-1px)}
.apv-item input{position:absolute;opacity:0;pointer-events:none}
.apv-tick{flex:0 0 auto;width:18px;height:18px;margin-top:1px;border-radius:6px;
  border:1.6px solid var(--line);display:grid;place-items:center;transition:.16s}
.apv-tick::after{content:"";width:9px;height:5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) scale(.4);opacity:0;
  transition:.16s;margin-top:-2px}
.apv-item input:checked ~ .apv-tick{background:var(--blue);border-color:var(--blue)}
.apv-item input:checked ~ .apv-tick::after{opacity:1;transform:rotate(-45deg) scale(1)}
.apv-item input:checked ~ .apv-text .apv-name{color:var(--ink);font-weight:500}
.apv-item:has(input:checked){border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 6%,var(--card));
  box-shadow:0 2px 10px color-mix(in srgb,var(--blue) 12%,transparent)}
.apv-item input:focus-visible ~ .apv-tick{outline:2px solid var(--blue);
  outline-offset:2px}
.apv-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.apv-name{font-size:12.8px;line-height:1.45;color:var(--ink)}
.apv-text em{font-style:normal;font-size:10.5px;color:var(--yellow);letter-spacing:.02em}
html.dark .apv-text em{color:#e5b93c}
.apv-item.sug{border-style:dashed}
.apv-item.sug:has(input:checked){border-style:solid}

.apv-none{padding:18px;text-align:center;font-size:12.5px;color:var(--muted)}
.apv-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--line)}
.apv-foot .ph{flex:1;min-width:200px;margin:0}
@media (max-width:640px){
  .apv-grid{grid-template-columns:1fr}
  .apv-count{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .apv-item,.apv-tick,.apv-tick::after{transition:none}
  .apv-item:hover{transform:none}
}


/* ═══ v144: หน้าลงเวลาพาร์ตไทม์/ฝึกงาน — ให้เหมือนแอปลงเวลาที่คุ้นเคย ═══
   ผู้ใช้แจ้งว่าบนมือถือดูมืดและทึม จึงเพิ่มการ์ดสีสด ตัวอักษรใหญ่ขึ้น
   และแยกสถานะตำแหน่งออกมาเป็นการ์ดที่อ่านจบในแวบเดียว */
.clockcard{padding:0!important;border:0!important;background:none!important;
  box-shadow:none!important}
.clock-hero{border-radius:20px;padding:20px 18px 18px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#3981C3,#4aa3a6 55%,#60B259);
  box-shadow:0 10px 26px color-mix(in srgb,#3981C3 34%,transparent);
  -webkit-print-color-adjust:exact}
.clock-hero .ch-date{font-size:12.5px;opacity:.92;letter-spacing:.02em}
.clock-hero .ch-time{font-size:46px;font-weight:600;line-height:1.1;margin:4px 0 2px;
  letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.clock-hero .ch-note{font-size:11.5px;opacity:.85}

/* การ์ดสถานะตำแหน่ง */
.geo-card{margin-top:12px;border-radius:14px;padding:12px 13px;
  border:1.5px solid var(--line);background:var(--card);display:flex;
  flex-direction:column;gap:10px}
.geo-card .geo-main{display:flex;gap:11px;align-items:flex-start}
.geo-ico{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;
  place-items:center;font-size:15px;font-weight:700;
  background:var(--line-soft);color:var(--muted)}
.geo-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.geo-txt b{font-size:14px;line-height:1.4}
.geo-txt span{font-size:12px;color:var(--muted);line-height:1.5}
.geo-coord{font-size:11px!important;opacity:.85}
.geo-acts{display:flex;gap:8px;flex-wrap:wrap}
.geo-btn{flex:1;min-width:130px;text-align:center;font:inherit;font-size:12.5px;
  padding:9px 12px;border-radius:11px;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:var(--glass);color:var(--ink);
  transition:.16s}
.geo-btn:hover{border-color:var(--blue);color:var(--blue)}
.geo-card.ok{border-color:color-mix(in srgb,var(--green) 55%,transparent);
  background:color-mix(in srgb,var(--green) 8%,var(--card))}
.geo-card.ok .geo-ico{background:var(--green);color:#fff}
.geo-card.ok .geo-txt b{color:var(--green)}
.geo-card.warn{border-color:color-mix(in srgb,var(--yellow) 60%,transparent);
  background:color-mix(in srgb,var(--yellow) 10%,var(--card))}
.geo-card.warn .geo-ico{background:var(--yellow);color:#3b2f05}
.geo-card.err{border-color:color-mix(in srgb,var(--red) 50%,transparent);
  background:color-mix(in srgb,var(--red) 7%,var(--card))}
.geo-card.err .geo-ico{background:var(--red);color:#fff}
.geo-card.err .geo-txt b{color:var(--red)}

/* กะการทำงาน */
.shift-list{display:flex;flex-direction:column;gap:8px}
.shift-item{position:relative;display:flex;align-items:center;gap:11px;
  padding:11px 13px;border:1.5px solid var(--line);border-radius:13px;
  background:var(--card);cursor:pointer;transition:.16s}
.shift-item input{position:absolute;opacity:0;pointer-events:none}
.shift-body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.shift-body b{font-size:13.5px}
.shift-body span{font-size:12.5px;color:var(--muted)}
.shift-dot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--line);transition:.16s}
.shift-item:has(input:checked){border-color:var(--blue);
  background:color-mix(in srgb,var(--blue) 7%,var(--card))}
.shift-item:has(input:checked) .shift-dot{border-color:var(--blue);
  box-shadow:inset 0 0 0 4px var(--blue)}
.shift-plain{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:12px;padding:11px 13px;border-radius:13px;
  background:var(--line-soft);border:1px solid var(--line);font-size:12.5px}
.shift-plain span{color:var(--muted)}
.note-count{text-align:right;font-size:11px;color:var(--muted);margin-top:3px}

/* ปุ่มลงเวลาใหญ่ */
.me-big{display:flex;align-items:center;justify-content:center;gap:10px}
.me-big em{font-style:normal;opacity:.85;font-size:14px}

/* หน้ายืนยันหลังลงเวลา */
.ok-card{display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:18px 10px 4px}
.ok-ring{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:27px;color:#fff;background:linear-gradient(135deg,var(--green),#2f9e6b);
  box-shadow:0 8px 20px color-mix(in srgb,var(--green) 38%,transparent);margin-bottom:5px}
.ok-card b{font-size:15.5px;color:var(--green)}
.ok-card span{font-size:12.5px;color:var(--muted)}
.ok-list{list-style:none;margin:14px 0 4px;padding:0;display:flex;
  flex-direction:column;gap:7px}
.ok-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:12px;background:var(--line-soft);border:1px solid var(--line);
  font-size:12.5px;flex-wrap:wrap}
.ok-list li i{font-style:normal;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;color:#fff;background:var(--green)}
.ok-list li span{color:var(--muted);flex:1;min-width:90px}
.ok-list li b{font-size:12.5px}

/* บนมือถือ: การ์ดสว่างขึ้น ตัวอักษรใหญ่ขึ้น ปุ่มกดง่ายขึ้น */
@media (max-width:640px){
  .clock-hero .ch-time{font-size:40px}
  .geo-txt b{font-size:13.5px}
  .me-big{padding:17px;font-size:16.5px}
  .glass{background:var(--card);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  html.dark .glass{background:var(--card)}
  /* v148: แผงลอยทุกชนิดต้องทึบเมื่อไม่มีเบลอช่วยบัง */
  .mbox,.cmdk-panel,.ss-list,.umenu,.dlg,.toast{
    background:var(--card)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .geo-btn{min-width:0}
}
html.dark .glass{background:var(--card)}
@media (max-width:640px){
}
@media (prefers-reduced-motion:reduce){
  .geo-btn,.shift-item,.shift-dot{transition:none}
}


/* ═══ v145: ภาพรวมโมดูลพาร์ตไทม์/แม่บ้าน/นักศึกษาฝึกงาน ═══ */
.pt-today{border-radius:18px;padding:16px 17px;color:#fff;
  background:linear-gradient(135deg,#2f6fae,#3f9a86 58%,#60B259);
  box-shadow:0 10px 26px color-mix(in srgb,#3981C3 30%,transparent)}
.pt-today-head{display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;margin-bottom:13px}
.pt-today-head b{font-size:15px;display:block}
.pt-today-head span{font-size:11.5px;opacity:.85}
.pt-today-head .btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);
  color:#fff;backdrop-filter:blur(3px)}
.pt-today-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.ptn{border-radius:13px;padding:11px 8px;text-align:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.ptn b{display:block;font-size:24px;font-weight:600;line-height:1.15}
.ptn span{font-size:11px;opacity:.92}
.ptn.work{background:rgba(255,255,255,.26)}
.ptn.done,.ptn.none,.ptn.all{background:rgba(255,255,255,.12)}

.type-strip{display:flex;gap:9px;flex-wrap:wrap}
.type-chip{flex:1;min-width:132px;display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:14px;text-decoration:none;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  transition:.16s}
.type-chip:hover{border-color:var(--blue);transform:translateY(-1px)}
.type-chip b{font-size:19px;font-weight:600;color:var(--muted);min-width:26px}
.type-chip span{font-size:12.5px;line-height:1.35}
.type-chip.on b{color:var(--blue)}

.board{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  margin-top:12px}
.bcard{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;
  color:var(--ink);transition:.16s}
.bcard:hover{border-color:var(--blue);transform:translateY(-1px)}
.bdot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--line)}
.bcard.working .bdot{background:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent)}
.bcard.done .bdot{background:var(--blue)}
.bcard.working{border-color:color-mix(in srgb,var(--green) 45%,var(--line));
  background:color-mix(in srgb,var(--green) 6%,var(--card))}
.binfo{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.binfo b{font-size:13.5px}
.bsub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.btime{font-size:11.5px;color:var(--muted);white-space:nowrap}

.cost-total{font-size:30px;font-weight:600;margin-top:8px;letter-spacing:-.01em}
.cost-total small{font-size:14px;color:var(--muted);font-weight:400;margin-left:4px}
.todo-list{display:flex;flex-direction:column;gap:8px;margin-top:11px}
.todo-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);text-decoration:none;
  color:var(--ink);font-size:12.5px;transition:.16s}
.todo-row:hover{border-color:var(--blue)}
.todo-row b{font-size:17px;font-weight:600;min-width:28px;color:var(--blue)}
.todo-row.warn{border-color:color-mix(in srgb,var(--yellow) 50%,transparent);
  background:color-mix(in srgb,var(--yellow) 8%,var(--card))}
.todo-row.warn b{color:var(--yellow)}
.todo-row.ok b{color:var(--green)}
@media (max-width:640px){
  .pt-today-nums{grid-template-columns:repeat(2,1fr)}
  .board{grid-template-columns:1fr}
  .type-chip{min-width:0;flex:1 1 46%}
}
@media (prefers-reduced-motion:reduce){
  .type-chip,.bcard,.todo-row{transition:none}
  .type-chip:hover,.bcard:hover{transform:none}
}


/* แถบอนุมัติเวลาหลายรายการ (v145) */
.bulk-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:11px;
  padding:10px 13px;border-radius:13px;background:var(--line-soft);
  border:1px solid var(--line)}
.bulk-all{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.bulk-bar .ph b{color:var(--blue);font-size:14px}
.bulk-bar .btn{margin-left:auto}
.bulk-bar .btn + .btn{margin-left:0}
@media (max-width:640px){.bulk-bar .btn{margin-left:0;flex:1}}


/* ═══ v147: ติดตั้งเป็นแอป (PWA) ═══ */
.pwa-bar{position:fixed;left:12px;right:12px;z-index:120;display:flex;align-items:center;
  gap:11px;padding:12px 13px;border-radius:15px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(8,15,30,.20);
  transform:translateY(140%);opacity:0;transition:.32s cubic-bezier(.3,1.2,.5,1)}
.pwa-bar.show{transform:translateY(0);opacity:1}
.pwa-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--green))}
.pwa-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink)}
.pwa-go{border:0;border-radius:10px;padding:9px 15px;font:inherit;font-size:12.5px;
  font-weight:500;color:#fff;background:var(--blue);cursor:pointer;white-space:nowrap}
.pwa-x{border:0;background:none;color:var(--muted);font-size:14px;cursor:pointer;
  padding:6px 4px;line-height:1}
@media (min-width:900px){.pwa-bar{left:auto;right:18px;width:390px}}
@media (prefers-reduced-motion:reduce){.pwa-bar{transition:none}}

/* เปิดจากไอคอนแอป: กันเนื้อหาชนขอบจอมน/ปุ่มโฮมของ iPhone */
@media (display-mode:standalone){
  .topbar{padding-top:calc(env(safe-area-inset-top))}
  .main{padding-bottom:calc(26px + env(safe-area-inset-bottom))}
  .sidebar{padding-top:calc(13px + env(safe-area-inset-top))}
}


/* ═══ v149: หน้าเทียบฟอนต์ ═══ */
.fnt-demo{margin-top:11px;padding:14px 15px;border-radius:14px;
  background:var(--line-soft);border:1px solid var(--line)}
.fnt-big{font-size:27px;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.fnt-row{font-size:15px;line-height:1.85;margin-top:5px}
.fnt-test{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:20px;line-height:2}
.fnt-test span{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;font-family:var(--font-ui);line-height:1.6}
@media (max-width:640px){
  .fnt-big{font-size:22px}
  .fnt-test{font-size:17px}
}

/* ════════════════════════════════════════════════════════════════════
   v151 — RESPONSIVE ทุก Device (มือถือเล็ก · มือถือ · แท็บเล็ต · เดสก์ท็อป · จอใหญ่)
   หลักคิด: แก้จากส่วนกลางที่ theme.css ชั้นเดียว ไม่ไล่แก้ inline style ทีละเทมเพลต
   ──────────────────────────────────────────────────────────────────── */

/* 1) กันการ์ดใน grid ระเบิดออกนอกจอ (grid blowout)
   ลูกของ grid มี min-width:auto โดยปริยาย → ข้อความยาว/ตารางใน .cell
   จะดัน .bento กว้างเกินจอบนมือถือ */
.bento>.cell{min-width:0}
.cell{overflow-wrap:break-word}

/* 2) สื่อทุกชนิดห้ามล้นการ์ด */
.cell img,.cell video,.cell canvas{max-width:100%;height:auto}
.cell iframe{max-width:100%}

/* 3) ความสูงจอมือถือจริง (แถบ URL ของ Safari/Chrome ยืดหด)
   เบราว์เซอร์เก่าใช้บรรทัด vh เดิม เบราว์เซอร์ใหม่ทับด้วย dvh */
.layout{min-height:100dvh}
.login-wrap{min-height:100dvh}

/* 4) แท็บเล็ต 621–1000px: เดิมการ์ด c4–c11 กลายเป็นคอลัมน์เดียวหมด
   ทั้งที่ iPad มีที่พอวางคู่ — ให้การ์ดขนาดกลางจับคู่กัน */
@media(min-width:621px) and (max-width:1000px){
  .c4,.c5,.c6{grid-column:span 6}
}

/* 5) มือถือ ≤640px: ปลดล็อกความกว้างตายตัวที่ฝังใน inline style
   (width/min-width/max-width เป็น px มี 290+ จุดในเทมเพลต)
   !important ในไฟล์ CSS ชนะ inline style ที่ไม่มี !important เสมอ */
@media(max-width:640px){
  .ctl-row>.field,.ctl-row>form,.ctl-row>select,.ctl-row>input{
    flex:1 1 100%;width:100% !important;
    min-width:0 !important;max-width:none !important}
  .ctl-row>form .btn{width:100%}
  /* ช่องกรอกเรียงลงมาแล้ว ปุ่มไม่ต้องเว้นหัวเท่าความสูง label อีก */
  .ctl-row.has-labels > .btn,
  .ctl-row.has-labels > button,
  .ctl-row.has-labels > a.btn,
  .ctl-row.has-labels > form > .btn{margin-top:0 !important}
  /* iOS Safari ซูมหน้าจอเองถ้าช่องกรอกตัวอักษรเล็กกว่า 16px */
  .field input,.field select,.field textarea,
  .ctl-row input,.ctl-row select,textarea{font-size:16px}
}

/* 6) นิ้วสัมผัส (ทุกอุปกรณ์จอสัมผัส ไม่อิงความกว้างจอ):
   ปุ่ม/ลิงก์เมนูต้องกดได้ ≥44px ตามเกณฑ์ Apple HIG / Material */
@media(pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .btn.ic{min-height:40px;min-width:40px}
  td .btn,.tw .btn{min-height:38px}
  .side-nav a,.nav-parent{min-height:42px}
  .check{padding-top:6px;padding-bottom:6px}
}

/* 7) มือถือจอเล็กพิเศษ ≤360px */
@media(max-width:360px){
  .main{padding:13px 9px 44px}
  .cell{padding:14px 13px}
  .topbar h2{font-size:16px}
}

/* 8) จอใหญ่ ≥1600px: ใช้พื้นที่เพิ่มขึ้นแต่ยังอ่านสบาย */
@media(min-width:1600px){
  .main{max-width:1320px}
}

/* ═══════════ Theme v4 (v172) — refinement layer ═══════════
   ชั้นเก็บงานทับระบบเดิม: แสง-เงาลึกขึ้น จังหวะ hover/focus ชัดขึ้น
   และลายเซ็นแบรนด์ "วงแหวน 4 สี" ปรากฏใน active states ทั้งระบบ
   (ค่า override เท่านั้น — ไม่เพิ่ม/เปลี่ยนชื่อคลาส) */
:root{
  --ease:cubic-bezier(.22,.72,.2,1);
  --ring:linear-gradient(90deg,#3981C3,#60B259 34%,#F5C647 67%,#D23651);
  --shadow:0 1px 2px rgba(20,23,28,.04),0 6px 16px rgba(20,23,28,.05),
    0 24px 56px -12px rgba(20,23,28,.10);
  --shadow-lift:0 2px 4px rgba(20,23,28,.05),0 12px 26px rgba(20,23,28,.08),
    0 34px 72px -14px rgba(20,23,28,.14);
  --focus:0 0 0 2px var(--bg),0 0 0 4.5px rgba(57,129,195,.55);
}
html.dark{
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.35),
    0 28px 64px -12px rgba(0,0,0,.5);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.42),
    0 40px 84px -14px rgba(0,0,0,.58);
  --focus:0 0 0 2px var(--bg),0 0 0 4.5px rgba(96,164,224,.6);
}

/* กระจกเจียรขอบบน — เส้นแสงบาง ๆ ให้การ์ดดูมีมิติ */
.glass{border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow)}
html.dark .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow)}

/* ปุ่ม: จังหวะกดดีดเบา ๆ */
.btn{transition:transform .18s var(--ease),box-shadow .18s var(--ease),
  background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px)}
}

/* โฟกัสคีย์บอร์ดชัดทุกจุด */
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible{outline:none;box-shadow:var(--focus);border-radius:8px}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(57,129,195,.6);
  box-shadow:0 0 0 3px rgba(57,129,195,.14)}

/* ลายเซ็นแบรนด์: แถบวงแหวน 4 สีใต้แท็บที่เปิดอยู่ */
.subnav-i.on::after{background:var(--ring);height:2.5px;border-radius:2px}

/* เมนูข้าง: รายการที่เปิดอยู่มีแถบแบรนด์ด้านซ้าย */
.side-nav .nav-item.active{position:relative}
.side-nav .nav-item.active::before{content:"";position:absolute;left:-1px;
  top:16%;bottom:16%;width:3px;border-radius:3px;background:var(--ring)}

/* ตาราง: แถวรับ hover นุ่ม ๆ + ตัวเลขจัดคอลัมน์ตรง */
.tw tbody tr{transition:background .16s var(--ease)}
.tw tbody tr:hover{background:var(--line-soft)}
.mono{font-variant-numeric:tabular-nums}

/* หัวเรื่อง: กระชับ มีน้ำหนัก */
h1,h2{letter-spacing:-.02em}
.big{letter-spacing:-.03em}

/* ชิป: จุดสถานะเรืองแสงตามสีของมัน */
.chip i{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 18%,transparent)}

/* สกรอลบาร์บางเข้าธีม */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 34%,transparent);
  border-radius:99px;border:2.5px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 55%,transparent);
  border:2.5px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* การ์ดสถิติ: ไอคอนมีแสงไล่เฉด */
.kpi .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
  inset 0 -8px 14px -8px rgba(20,23,28,.12)}
html.dark .kpi .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
  inset 0 -8px 14px -8px rgba(0,0,0,.4)}

/* details/summary นุ่มขึ้น */
details summary{transition:color .18s var(--ease)}
details summary:hover{color:var(--blue)}
details[open] summary{margin-bottom:4px}

/* การ์ดใน bento ยกตัวเมื่อ hover (เดสก์ท็อป + ไม่ปิดโมชัน) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .bento > .cell.glass{transition:transform .22s var(--ease),
    box-shadow .22s var(--ease)}
  .bento > .cell.glass:hover{transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--shadow-lift)}
  html.dark .bento > .cell.glass:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-lift)}
}

/* v173: snapshot ใน viewer — คุมโลโก้/ภาพของเอกสารเก่าที่ออกไปแล้วใน DB
   (snapshot เป็น HTML ถาวร แก้ย้อนหลังไม่ได้ จึงคุมจากฝั่งผู้แสดงผล) */
.sheet-frame img{max-width:100%;height:auto}
.sheet-frame .doc-logo, .doc-a4 .doc-logo{
  height:52px !important;width:auto !important;max-width:170px !important;
  object-fit:contain}
.sheet-frame .doc-top{display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px}
.sheet-frame .doc-co{display:flex;align-items:center;gap:10px;min-width:0}
.sheet-frame .doc-nobox{flex:0 0 auto}

/* v174: หัวหมวดเมนู — จัดระเบียบแบบ HRM สากล */
.nav-cap{margin:13px 12px 4px;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  opacity:.75;user-select:none}
.nav-cap:first-child{margin-top:6px}

/* v180: องค์ประกอบฟอร์มทุกตัวใช้ฟอนต์ระบบเสมอ (เบราว์เซอร์ไม่สืบทอดให้เอง) */
input, select, textarea, button, option, optgroup{font-family:inherit}

/* v185: checkbox / radio ขนาดคงที่ทุกที่ในระบบ
   เดิม .field input{width:100%;padding:11px 14px} เหมาไปโดน checkbox ด้วย
   ทำให้กล่องติ๊กยืดเต็มความกว้างและสูงผิดสัดส่วน (พบ 8 หน้า) */
input[type=checkbox], input[type=radio]{
  width:17px;height:17px;min-width:17px;min-height:17px;
  padding:0;margin:0;flex:0 0 auto;vertical-align:-3px;
  border-radius:5px;cursor:pointer}
input[type=radio]{border-radius:50%}
.field input[type=checkbox], .field input[type=radio]{
  width:17px;height:17px;padding:0;border:0;background:none;box-shadow:none}
/* ป้ายข้างช่องติ๊ก: อยู่บรรทัดเดียว กดที่ข้อความก็ติ๊กได้ */
label:has(> input[type=checkbox]), label:has(> input[type=radio]){
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  white-space:nowrap;line-height:1.4}
.field > .ph label{white-space:nowrap}

/* v199: ชื่อในตารางที่กดเข้าแฟ้มได้ — ให้เห็นชัดว่าเป็นลิงก์ */
a.lead-link{color:var(--blue);text-decoration:none;border-bottom:1px dotted currentColor}
a.lead-link:hover{border-bottom-style:solid}
a.lead-link b{font-weight:600}

/* v200: แถวปุ่มในตาราง — อยู่บรรทัดเดียว ไม่ตกบรรทัด */
.row-actions{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.row-actions .btn{padding:0 11px;min-height:30px}
.row-actions select{min-height:30px;padding:0 8px}
@media (max-width:900px){.row-actions{flex-wrap:wrap;white-space:normal}}

/* v201: ตารางงานอีเวนต์ — กันข้อมูลล้นการ์ดบนจอแคบ
   คอลัมน์รอง (การศึกษา/สนใจ/มาเมื่อ) ซ่อนเมื่อจอไม่พอ ข้อมูลสำคัญยังอยู่ครบ
   (กดเข้าแฟ้มเพื่อดูรายละเอียดทั้งหมด) */
@media (max-width:1200px){ .col-opt{display:none} }
@media (max-width:640px){
  .tw table{font-size:12.5px}
  .tw th, .tw td{padding-left:8px;padding-right:8px}
}

/* ═══ v347 แผงดูข้อมูลข้างจอ (peek) + ลิ้นชักงานรอฉัน — เปิดจากแถวตาราง/ปุ่มบนแถบบน ไม่ออกจากหน้าเดิม ═══ */
button.bell{font:inherit;cursor:pointer}
.pk-scrim{position:fixed;inset:0;z-index:180;background:rgba(5,8,12,.32);opacity:0;pointer-events:none;transition:opacity .25s}
.pk-scrim.on{opacity:1;pointer-events:auto}
.pk-drawer{position:fixed;top:12px;right:12px;bottom:12px;z-index:190;width:min(460px,calc(100vw - 24px));
  display:flex;flex-direction:column;border-radius:20px;background:var(--card);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(20,23,28,.22);transform:translateX(calc(100% + 24px));visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s;outline:none}
.pk-drawer.open{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
html.dark .pk-drawer{box-shadow:0 24px 60px rgba(0,0,0,.55)}
html.pk-lock,html.pk-lock body{overflow:hidden}
.pk-body{display:flex;flex-direction:column;min-height:0;flex:1}
.pk-head{display:flex;align-items:center;gap:11px;padding:16px 16px 12px 18px;border-bottom:1px solid var(--line-soft)}
.pk-back{display:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--line-soft);
  color:var(--ink);font-size:17px;line-height:1;cursor:pointer;flex:none}
.pk-back.show{display:grid;place-items:center}
.pk-tile,.pk-ava{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;font-size:19px}
.pk-tile{background:rgba(57,129,195,.12);border:1px solid rgba(57,129,195,.22)}
.pk-ava{color:#fff;font-weight:600;background:linear-gradient(135deg,var(--blue),#2B6AA6)}
.pk-title{flex:1;min-width:0}
.pk-title b{display:block;font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pk-title small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.pk-x{width:32px;height:32px;border-radius:10px;border:0;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;flex:none}
.pk-x:hover,.pk-back:hover{color:var(--blue);background:var(--line-soft)}
.pk-scroll{flex:1;overflow-y:auto;padding:6px 18px 16px;overscroll-behavior:contain}
.pk-sec{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}
.pk-row{display:flex;align-items:center;gap:11px;padding:9px 10px;margin:0 -10px;border-radius:12px;color:inherit;text-decoration:none;transition:background .15s}
a.pk-row:hover{background:var(--line-soft)}
.pk-row.static{cursor:default}
.pk-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--line-soft);font-size:15px}
.pk-rt{flex:1;min-width:0}
.pk-rt b{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-rt small{display:block;color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-rv{flex:none;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pk-empty{padding:14px;border-radius:12px;background:var(--line-soft);color:var(--muted);font-size:12.5px;text-align:center}
.pk-todo{display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:7px;border-radius:12px;border:1px solid var(--line);
  border-left:4px solid var(--blue);color:inherit;text-decoration:none}
.pk-todo:hover{box-shadow:var(--shadow)}
.pk-todo.red{border-left-color:var(--red)}.pk-todo.yellow,.pk-todo.amber{border-left-color:var(--yellow)}.pk-todo.blue{border-left-color:var(--blue)}
.pk-n{min-width:34px;text-align:center;font-size:19px;font-weight:600}
.pk-todo.red .pk-n{color:var(--red)}.pk-todo.yellow .pk-n,.pk-todo.amber .pk-n{color:#9A7A0A}.pk-todo.blue .pk-n{color:var(--blue)}
html.dark .pk-todo.yellow .pk-n,html.dark .pk-todo.amber .pk-n{color:var(--yellow)}
.pk-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line-soft)}
.pk-hint{margin-left:auto;font-size:11px;color:var(--muted)}
.pk-chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.pk-kv{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:6px}
.pk-kv > div{padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:11.5px;color:var(--muted);min-width:0}
.pk-kv b{display:block;color:var(--ink);font-size:13px;font-weight:500;overflow-wrap:anywhere}
.pk-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pk-stats > div{padding:8px 4px;border-radius:11px;background:var(--line-soft);text-align:center}
.pk-stats b{display:block;font-size:17px;font-weight:600}
.pk-stats small{display:block;font-size:11px;color:var(--muted)}
.pk-stats > div.warn b{color:#9A7A0A}.pk-stats > div.bad b{color:var(--red)}
html.dark .pk-stats > div.warn b{color:var(--yellow)}
.pk-bar{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12.5px;padding:5px 0}
.pk-bar i{grid-column:1/-1;height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.pk-bar em{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--green))}
.pk-tl{position:relative;padding-left:20px}
.pk-tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.pk-ti{position:relative;padding:5px 0 9px}
.pk-ti::before{content:"";position:absolute;left:-18px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--card);border:2px solid var(--muted)}
.pk-ti.done::before{background:var(--green);border-color:var(--green)}
.pk-ti.now::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 4px rgba(57,129,195,.18)}
.pk-ti.bad::before{background:var(--red);border-color:var(--red)}
.pk-ti b{display:block;font-size:13px;font-weight:500}
.pk-ti small{display:block;font-size:11.5px;color:var(--muted)}
.pk-detail{padding:12px 14px;border-radius:14px;background:var(--line-soft);font-size:13px;margin-top:10px;white-space:pre-line;overflow-wrap:anywhere}
.pk-warn{padding:10px 12px;border-radius:12px;margin-top:10px;font-size:12.5px;color:var(--red);background:rgba(210,54,81,.08);border:1px solid rgba(210,54,81,.25)}
.pk-form{display:grid;gap:8px;margin-top:6px}
.pk-form textarea{width:100%;min-height:74px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--line-soft);
  font:inherit;font-size:13px;color:var(--ink);resize:vertical}
.pk-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(57,129,195,.15)}
.pk-form textarea.pk-need{border-color:var(--red);box-shadow:0 0 0 3px rgba(210,54,81,.15)}
.pk-loading{display:grid;gap:10px;padding:22px 18px}
.pk-skel{display:block;height:54px;border-radius:14px;background:linear-gradient(90deg,var(--line-soft) 25%,var(--line) 50%,var(--line-soft) 75%);
  background-size:200% 100%;animation:pkshim 1.1s linear infinite}
.pk-skel.short{height:22px;width:60%}
@keyframes pkshim{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pk-drawer,.pk-scrim{transition:none}.pk-skel{animation:none}}
@media(max-width:620px){
  .pk-drawer{top:0;right:0;bottom:0;width:100vw;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  .pk-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .pk-kv{grid-template-columns:1fr}
  .pk-stats{grid-template-columns:repeat(3,1fr)}
  .pk-hint{display:none}
}
.pk-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ═══ v348 แถบหน้าย่อยแบบใหม่ — .subnav (HRM) และ .h-tabs (HRD) หลัง static/js/subnav.js ยกระดับ (.sn-ready)
   ไม่มีสคริปต์ = หน้าตาเดิมทุกอย่าง · ตัวชี้ไล่สีเลื่อนตามแท็บที่เปิด · ปุ่มเลื่อน + ขอบจางเมื่อยาวเกินจอ ·
   เมนู "ทั้งหมด +N" · มือถือ ≤700px ยุบเป็นปุ่มเดียวเปิดแผ่นล่าง ═══ */
.sn-ready{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:visible;position:relative}
.subnav.sn-ready{padding:5px}
.h-tabs.sn-ready{padding:5px;border-radius:14px;background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}
.sn-track{position:relative;display:flex;align-items:center;gap:3px;flex:1 1 auto;min-width:0;padding:2px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;--sn-fl:0px;--sn-fr:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--sn-fl),#000 calc(100% - var(--sn-fr)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--sn-fl),#000 calc(100% - var(--sn-fr)),transparent 100%)}
.sn-track::-webkit-scrollbar{display:none}
.sn-ind{position:absolute;top:2px;bottom:2px;left:0;width:0;border-radius:11px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,var(--blue),#2B6AA6);box-shadow:0 6px 18px rgba(57,129,195,.35);
  transition:transform .42s cubic-bezier(.2,.9,.25,1.05),width .42s cubic-bezier(.2,.9,.25,1.05),opacity .2s}
.sn-ind.show{opacity:1}
.sn-ready .subnav-i,.h-tabs.sn-ready a{position:relative;z-index:1;flex:0 0 auto;white-space:nowrap;transition:color .3s,background .2s}
.sn-ready .subnav-i.on,.sn-ready .subnav-i.on:hover{background:transparent;box-shadow:none;color:#fff}
html.dark .sn-ready .subnav-i.on{box-shadow:none}
.sn-ready .subnav-i.on::after{display:none}
.sn-ready .subnav-i.on .subnav-n{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.16)}
.h-tabs.sn-ready a{background:transparent;border-color:transparent;box-shadow:none;padding:8px 14px}
.h-tabs.sn-ready a:hover{background:var(--line-soft);border-color:transparent}
.h-tabs.sn-ready a.on,.h-tabs.sn-ready a.on:hover{background:transparent;color:#fff;box-shadow:none}
.sn-arrow{display:none;flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--line-soft);
  color:var(--muted);font:inherit;font-size:17px;line-height:1;cursor:pointer;place-items:center;padding:0;transition:color .2s,border-color .2s,opacity .2s}
.sn-over .sn-arrow{display:grid}
.sn-arrow:hover:not(:disabled){color:var(--blue);border-color:var(--blue)}
.sn-arrow:disabled{opacity:.3;cursor:default}
.sn-more{position:relative;flex:0 0 auto;display:none}
.sn-more.show{display:block}
.sn-more-btn{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 12px;border-radius:10px;border:1px dashed var(--line);
  background:none;color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.sn-more-btn b{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--blue)}
.sn-more-btn:hover,.sn-more.open .sn-more-btn{color:var(--blue);border:1px solid var(--blue)}
.sn-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(340px,calc(100vw - 32px));max-height:min(60vh,420px);overflow:auto;
  display:none;grid-template-columns:1fr 1fr;gap:3px;padding:8px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.sn-more.open .sn-menu{display:grid}
.sn-menu-i,.sn-sheet-i{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;border:0;background:none;
  color:var(--ink);font:inherit;font-size:12.5px;text-align:left;text-decoration:none;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.sn-menu-i:hover{background:var(--line-soft)}
.sn-menu-i.on{color:var(--blue);font-weight:600;background:rgba(57,129,195,.1)}
.sn-cur{display:none}
.sn-scrim{position:fixed;inset:0;z-index:175;background:rgba(5,8,12,.32);opacity:0;pointer-events:none;transition:opacity .25s}
.sn-scrim.on{opacity:1;pointer-events:auto}
.sn-sheet{position:fixed;left:0;right:0;bottom:0;z-index:185;max-height:78vh;overflow:auto;padding:8px 14px calc(18px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -18px 44px rgba(20,23,28,.18);
  transform:translateY(105%);visibility:hidden;transition:transform .34s cubic-bezier(.2,.9,.25,1),visibility 0s linear .34s;outline:none}
.sn-sheet.open{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.2,.9,.25,1)}
html.dark .sn-sheet{box-shadow:0 -18px 44px rgba(0,0,0,.5)}
.sn-handle{display:block;width:42px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sn-sheet-head{display:flex;align-items:baseline;gap:8px;margin:0 2px 10px}
.sn-sheet-head b{font-size:15px;font-weight:600}
.sn-sheet-head small{margin-left:auto;color:var(--muted);font-size:11.5px;font-family:'IBM Plex Mono',monospace}
.sn-sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sn-sheet-i{border:1px solid var(--line);background:var(--card-2);padding:12px}
.sn-sheet-i.on{border-color:var(--blue);background:rgba(57,129,195,.1);color:var(--blue);font-weight:600}
@media(max-width:700px){
  .sn-ready .sn-track,.sn-ready .sn-arrow,.sn-ready .sn-more{display:none}
  .sn-ready .sn-cur{display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:42px;padding:0 14px;border:0;border-radius:11px;cursor:pointer;
    color:#fff;font:inherit;font-size:13px;font-weight:500;background:linear-gradient(135deg,var(--blue),#2B6AA6);box-shadow:0 6px 18px rgba(57,129,195,.3)}
  .sn-cur span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sn-cur small{font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:.85}
  .sn-cur::after{content:"▾";font-size:11px;opacity:.9}
}
@media (prefers-reduced-motion:reduce){.sn-ind,.sn-sheet,.sn-scrim{transition:none}}

/* ═══ v349 ตารางฉลาด — static/js/smarttable.js เติมคลาสเหล่านี้เอง (ไม่มีสคริปต์ = ตารางเดิมทุกอย่าง) ═══ */
.st-ready th.st-sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;transition:color .15s}
.st-ready th.st-sortable:hover{color:var(--ink)}
.st-ready th.st-sortable:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.st-ic{display:inline-block;width:10px;margin-left:5px;font-size:10px;line-height:1;opacity:.35;vertical-align:1px}
.st-ic::before{content:"↕"}
.st-ready th.st-asc,.st-ready th.st-desc{color:var(--blue)}
.st-ready th.st-asc .st-ic,.st-ready th.st-desc .st-ic{opacity:1}
.st-ready th.st-asc .st-ic::before{content:"↑"}
.st-ready th.st-desc .st-ic::before{content:"↓"}
.st-hide{display:none !important}
.st-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.st-find{display:flex;align-items:center;gap:7px;flex:1 1 220px;max-width:340px;height:36px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--line-soft);transition:border-color .2s,box-shadow .2s}
.st-find::before{content:"";width:13px;height:13px;flex:0 0 auto;opacity:.55;background:currentColor;color:var(--muted);
  -webkit-mask:radial-gradient(circle at 42% 42%,transparent 4px,#000 4.5px,#000 5.8px,transparent 6.3px),linear-gradient(45deg,transparent 60%,#000 61%,#000 72%,transparent 73%);
  mask:radial-gradient(circle at 42% 42%,transparent 4px,#000 4.5px,#000 5.8px,transparent 6.3px),linear-gradient(45deg,transparent 60%,#000 61%,#000 72%,transparent 73%)}
.st-find:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(57,129,195,.14)}
.st-find input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:12.5px;color:var(--ink)}
.st-count{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;white-space:nowrap}
.st-bar.st-active .st-count{color:var(--blue);font-weight:600}
.st-note{font-size:11px;color:var(--muted)}
.st-reset{height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:none;color:var(--muted);
  font:inherit;font-size:12px;cursor:pointer}
.st-reset:hover{color:var(--blue);border-color:var(--blue)}
tr.st-none td{text-align:center;color:var(--muted);padding:22px 10px}
@media(max-width:620px){.st-find{max-width:none}.st-note{flex-basis:100%}}

/* ═══ v350 จัดหน้าแรกเอง — คลาสเหล่านี้ใช้บนแดชบอร์ด (dashboard.html) กับ static/js/dashlayout.js ═══ */
.dw-off{display:none !important}
.dw-stats{display:grid;grid-template-columns:repeat(12,1fr);gap:17px}
@media(max-width:1000px){.dw-stats{gap:12px}}
.dw-editing > [data-w]{position:relative;outline:2px dashed color-mix(in srgb,var(--blue) 45%,transparent);outline-offset:4px;
  border-radius:20px;cursor:grab;transition:outline-color .2s,opacity .2s}
.dw-editing > [data-w].dw-off{display:block !important;opacity:.45;filter:saturate(.3)}
.dw-editing > [data-w].dw-off.dw-stats{display:grid !important}
.dw-editing > [data-w].dw-drag{opacity:.35}
.dw-editing > [data-w].dw-over{outline:2px solid var(--blue);outline-offset:4px}
.dw-tools{position:absolute;top:-14px;left:14px;z-index:5;display:flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:10px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font-size:12px}
.dw-tools b{font-weight:600;margin-right:4px;white-space:nowrap}
.dw-btn{min-width:28px;height:26px;padding:0 8px;border-radius:7px;border:1px solid var(--line);background:var(--line-soft);color:var(--ink);
  font:inherit;font-size:12px;cursor:pointer}
.dw-btn:hover{color:var(--blue);border-color:var(--blue)}
.dw-bar{position:sticky;top:10px;z-index:30;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-bottom:22px;border-radius:14px}
.dw-tip{flex:1 1 280px;font-size:12.5px;color:var(--muted)}
.dw-status{font-size:12px;color:var(--muted)}
.dw-status.bad{color:var(--red)}
@media(max-width:620px){.dw-tools{left:8px}.dw-tools b{max-width:120px;overflow:hidden;text-overflow:ellipsis}}
.dw-todo .todo-bar{margin-bottom:0}
.dw-grid > [data-w]{min-width:0}   /* v350: ตาราง/กราฟในการ์ดไม่ดันกริดหน้าแรกให้ล้นจอแคบ */

/* ═══ v351 ⌘K ค้นพนักงาน/คำขอ — แถวสองบรรทัด + หัวหมวด (สร้างจาก static/js/app.js ด้วย textContent) ═══ */
.pal-main{display:flex;flex-direction:column;min-width:0;flex:1}
.pal-main b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-main small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.pal-sec{padding:10px 13px 4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.pal-note{padding:8px 13px;font-size:11.5px;color:var(--muted)}