/* SmartSD HR — theme 3 (blue + pink + mustard, Baloo, black outline buttons, no green) */
:root{
  --ink:#16181d;--text:#23262d;--muted:#6b6658;--bg:#FDF6E9;--card:#fff;
  --blue:#4070F0;--blue2:#2E5AD8;--bluebg:#DCE6FF;--cyan:#2aa0d6;--cyanbg:#D6EEFF;
  --amber:#C79400;--amberbg:#FDEABB;--red:#e0466f;--redbg:#FFD6E0;--purple:#7a5fe0;--purplebg:#E8DEFF;
  --pink:#F2609F;--pinkbg:#FDD9EB;--yellow:#F6C63F;--gray:#ECE7DA;
}
*{box-sizing:border-box;font-family:'Baloo 2',sans-serif}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-weight:500;font-size:16px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue2)}
.hidden{display:none!important}

/* header */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:2.5px solid var(--ink);display:flex;align-items:center;gap:10px;padding:10px 16px}
.brand{font-weight:800;font-size:21px;color:var(--yellow);-webkit-text-stroke:1px var(--ink);text-shadow:2px 2px 0 var(--ink);white-space:nowrap}
.top .who{margin-left:auto;font-weight:700;font-size:14px;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.narrow{max-width:560px}

/* cards, tiles, buttons */
.card{background:var(--card);border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:16px;margin-bottom:16px}
.card h2,.card h3{margin:0 0 10px;font-weight:800;color:var(--ink)}
.card h2{font-size:20px}.card h3{font-size:17px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.tile{border:2.5px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:10px 12px;background:var(--bluebg);text-align:left;cursor:pointer}
.tile small{display:block;font-weight:700;color:var(--ink)}
.tile b{display:block;font-size:28px;font-weight:800;color:var(--ink);line-height:1.1}
.tile em{font-style:normal;font-size:12px;color:#4a5260}
.tile:nth-child(5n+2){background:var(--purplebg)}.tile:nth-child(5n+3){background:var(--cyanbg)}
.tile:nth-child(5n+4){background:var(--amberbg)}.tile:nth-child(5n){background:var(--pinkbg)}
.tile.on{outline:3px solid var(--blue);outline-offset:2px}
.tile:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);background:#fff;color:var(--ink);font-weight:800;padding:8px 14px;cursor:pointer;min-height:42px;text-decoration:none}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:var(--blue);color:#fff}
.btn.pink{background:var(--pink);color:#fff}
.btn.yellow{background:var(--yellow)}
.btn.danger{background:#FFD9E0;color:#B42347}
.btn.small{min-height:32px;padding:3px 10px;font-size:14px;box-shadow:2px 2px 0 var(--ink)}
.btn.big{width:100%;min-height:64px;font-size:22px;border-radius:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>.grow{flex:1 1 180px}
.stack>*+*{margin-top:10px}
.muted{color:var(--muted)}
.small{font-size:14px}
.num{font-variant-numeric:tabular-nums}

/* tags */
.tag{display:inline-block;border:2px solid var(--ink);border-radius:999px;font-weight:700;box-shadow:1.5px 1.5px 0 var(--ink);padding:0 9px;font-size:13px;white-space:nowrap;background:var(--gray)}
.tag.present,.tag.approved{background:var(--bluebg)}
.tag.late,.tag.pending,.tag.sick_wait_cert{background:var(--amberbg)}
.tag.absent,.tag.no_out,.tag.rejected{background:var(--redbg);color:#B42347}
.tag.leave,.tag.personal,.tag.sick,.tag.vacation{background:var(--purplebg)}
.tag.working,.tag.extra{background:var(--cyanbg)}
.tag.not_yet,.tag.off,.tag.future,.tag.cancelled,.tag.not_started{background:var(--gray)}

/* forms */
label.f{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
label.f>input,label.f>select,label.f>textarea{display:block;width:100%;margin-top:3px;border:2px solid var(--ink);border-radius:10px;background:#fff;padding:8px 10px;min-height:42px}
label.f>textarea{min-height:70px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}

/* tables: header stays while scrolling */
.tablecard{border:2.5px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);background:#fff;overflow:auto;max-height:70vh;margin-bottom:16px}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:15px}
th,td{padding:7px 10px;border-bottom:1px solid #e6e0d0;text-align:left;vertical-align:middle;white-space:nowrap}
th{position:sticky;top:0;z-index:2;background:var(--yellow);font-weight:800;color:var(--ink);border-bottom:2.5px solid var(--ink)}
td.r,th.r{text-align:right}
tr.total td{font-weight:800;background:#FFF3D4;position:sticky;bottom:0}
.drill{background:none;border:0;padding:0 2px;cursor:pointer;color:var(--blue2);font-weight:800;text-decoration:underline dotted;font-variant-numeric:tabular-nums}
.drill.zero{color:var(--muted);text-decoration:none}
.thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:2px solid var(--ink);cursor:zoom-in;vertical-align:middle}

/* bottom tabs (staff) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:2.5px solid var(--ink);display:flex}
.tabs button{flex:1;border:0;background:none;padding:8px 2px 10px;font-weight:700;font-size:13px;color:#3a4150;cursor:pointer}
.tabs button span{display:block;font-size:20px;line-height:1.2}
.tabs button.active{background:var(--yellow);color:var(--ink)}
body.has-tabs{padding-bottom:76px}

/* side nav (admin) */
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.nav button{border:2px solid var(--ink);border-radius:12px;background:#fff;font-weight:700;padding:6px 12px;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.nav button.active{background:var(--yellow);font-weight:800}
.badge{display:inline-block;min-width:22px;border-radius:999px;background:var(--pink);color:#fff;font-size:12px;padding:0 6px;margin-left:4px;border:1.5px solid var(--ink)}

/* modal + drawer */
.modal{position:fixed;inset:0;z-index:50;background:rgba(22,24,29,.45);display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow:auto}
.modal .box{background:#fff;border:2.5px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink);padding:16px;width:100%;max-width:560px;margin:auto 0}
.modal .box.wide{max-width:980px}
.modal .head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.modal .head h3{margin:0;font-weight:800;font-size:19px;flex:1}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:60;background:var(--ink);color:#fff;border-radius:12px;padding:10px 16px;font-weight:700;max-width:90vw;box-shadow:3px 3px 0 var(--pink)}
.toast.err{background:#B42347}

/* clocking */
.today{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.today div{border:2px solid var(--ink);border-radius:14px;padding:8px 12px;background:var(--bg)}
.today b{display:block;font-size:30px;font-weight:800;color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;border:2px solid var(--ink);border-radius:14px;padding:10px;margin-bottom:10px}
.check .ic{font-size:22px;width:28px;text-align:center}
.check.ok{background:var(--bluebg)}.check.bad{background:var(--redbg)}
video.cam,img.shot{width:100%;max-height:300px;object-fit:cover;border-radius:14px;border:2.5px solid var(--ink);background:#222;transform:scaleX(-1)}
img.shot{transform:none}
.problems{background:var(--redbg);border:2px solid var(--ink);border-radius:12px;padding:8px 12px;margin:10px 0;color:#7d1530;font-weight:700}
.banner{background:var(--amberbg);border:2.5px solid var(--ink);border-radius:14px;padding:10px 14px;margin-bottom:16px;font-weight:700}

/* kiosk */
.kiosk{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;text-align:center}
.kiosk #qr{background:#fff;border:4px solid var(--ink);border-radius:24px;box-shadow:8px 8px 0 var(--ink);padding:22px}
.kiosk .clock{font-size:56px;font-weight:800;color:var(--ink);line-height:1}
.kiosk h1{margin:0;font-size:30px;font-weight:800}

/* name column stays put when a wide table scrolls sideways */
th.sc,td.sc{position:sticky;left:0;z-index:1;background:#fff;box-shadow:2px 0 0 #e6e0d0}
th.sc{z-index:3;background:var(--yellow)}
tr.total td.sc{background:#FFF3D4}
.link{background:none;border:0;padding:0;color:var(--ink);font-weight:700;cursor:pointer;text-align:left;text-decoration:underline dotted 1.5px;text-underline-offset:3px}
.note{font-size:13px;color:#4a5260;margin:4px 0 0}
.warn{color:#B42347;font-weight:700}

/* phones (leads and พี่เม open these pages from LINE) */
@media (max-width:560px){
  .wrap{padding:12px}
  .top{padding:8px 12px}
  .top .sub,.mh{display:none!important}
  .brand{font-size:18px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .tile{padding:6px 8px;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
  .tile b{font-size:21px}
  .tile small{font-size:12px;line-height:1.2}
  .tile em{font-size:11px}
  .nav{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .nav button{white-space:nowrap;padding:5px 10px}
  th,td{padding:6px 8px;font-size:14px}
  .card{padding:12px;border-radius:14px;box-shadow:3px 3px 0 var(--ink)}
}

/* two-way switch (ปฏิทิน / ตาราง) */
.seg{display:flex;gap:4px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;padding:4px;margin-bottom:14px;box-shadow:3px 3px 0 var(--ink)}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:8px 6px;font-weight:800;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff}

/* month calendar */
.calhead{margin-bottom:12px}
.calhead h2{margin:0;text-align:center;font-size:22px;font-weight:800;color:var(--ink)}
.calhead select{width:100%;margin-bottom:10px;text-align:left}
.cal-tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.cal{padding:14px 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 2px;text-align:center}
.cal-grid .wd{font-size:13px;font-weight:800;color:var(--muted)}
.cd{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;padding:2px 0;cursor:pointer;min-width:0;color:inherit}
.cd .mascot{display:block;transition:transform .15s}
.cd:hover .mascot{transform:translateY(-2px) rotate(-4deg)}
.cd .dn{position:absolute;top:-4px;left:calc(50% - 26px);font-size:11px;font-weight:800;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:0 4px;line-height:1.35}
.cd .blank{width:40px;height:40px;border-radius:50%;background:var(--gray);display:flex;align-items:center;justify-content:center;font-weight:800;color:#8a8474}
.cd .blank.off{background:transparent;border:2px dashed #d8d0bd}
.cd .t{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;min-height:14px;color:#3a4150;white-space:nowrap}
.cd .t.warn{color:#B42347}
.cd.today .mascot,.cd.today .blank{outline:3px solid var(--blue);outline-offset:2px;border-radius:50%}
.cd.dim{opacity:.2}
.cd .part{position:absolute;top:28px;left:calc(50% + 12px);width:10px;height:10px;border-radius:50%;background:var(--purple);border:1.5px solid var(--ink)}
.modal .box table td{white-space:normal}

/* staff app in LINE: yellow, a big friendly character, floating pill tabs with a round clock button */
body.staff{background:var(--yellow)}
.staff .top{background:var(--yellow);border-bottom:0}
.staff .brand{color:var(--ink);-webkit-text-stroke:0;text-shadow:2px 2px 0 #fff}
.hero{display:flex;align-items:flex-end;gap:6px;margin:-6px 0 -22px;position:relative;z-index:1}
.hero .hi{flex:1;padding-bottom:30px}
.hero .hi small{display:block;font-weight:700;color:var(--ink)}
.hero .hi h1{margin:0;font-size:27px;font-weight:800;color:var(--ink);line-height:1.15}
.hero svg.hero-svg{width:150px;height:150px;flex:none;overflow:visible}
.staff .card.main{border-radius:26px;padding-top:22px}
body.staff.has-tabs{padding-bottom:104px}
.staff .tabs{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));border:2.5px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);padding:0 6px;align-items:center}
.staff .tabs button{padding:8px 2px;border-radius:999px;margin:4px 0}
.staff .tabs button.active{background:var(--yellow)}
.staff .tabs .fab{flex:0 0 76px;background:none!important;padding:0;margin:0}
.staff .tabs .fab span{width:66px;height:66px;margin:-30px auto 2px;border-radius:50%;background:var(--pink);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:30px}
.staff .tabs .fab:active span{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.staff .toast{bottom:110px}

/* line icons (see ICONS in common.js) */
svg.i{width:1.2em;height:1.2em;vertical-align:-.22em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs button span svg.i{width:25px;height:25px;display:block;margin:0 auto 1px}
.staff .tabs .fab span svg.i{width:32px;height:32px;margin:0;color:#fff;stroke-width:2.3}
.check .ic svg.i{width:24px;height:24px}
.check.ok .ic{color:var(--blue2)}.check.bad .ic{color:#B42347}
.seg svg.i{margin-right:2px}

/* the hurried little character (Loop-Parade style walk) + ringing alarm */
.hero .say{display:inline-block;margin-top:6px;background:#fff;border:2.5px solid var(--ink);border-radius:14px 14px 14px 4px;padding:3px 10px;font-size:14px;font-weight:800;box-shadow:2px 2px 0 var(--ink)}
.hero .say.hot{background:var(--pink);color:#fff}
.hero-svg .runner,.hero-svg .leg,.hero-svg .alarm,.hero-svg .arm,.hero-svg .speed path{transform-box:fill-box}
.hero-svg .runner{transform-origin:50% 100%}
.hero-svg .leg{transform-origin:50% 0}
.hero-svg .alarm{transform-origin:50% 90%}
.hero-svg .arm{transform-origin:0 100%}
.hero-svg .speed,.hero-svg .sweat,.hero-svg .ring-lines{opacity:0}
/* rush: lean forward, legs scissor fast, alarm rattles, sweat, speed lines */
.hero-svg.rush .runner{animation:hr-bob .34s ease-in-out infinite}
.hero-svg.rush .leg-a{animation:hr-leg .34s ease-in-out infinite}
.hero-svg.rush .leg-b{animation:hr-leg .34s ease-in-out infinite reverse}
.hero-svg.rush .alarm{animation:hr-ring .14s linear infinite}
.hero-svg.rush .ring-lines{opacity:1;animation:hr-blink .28s steps(2) infinite}
.hero-svg.rush .sweat{opacity:1;animation:hr-drop .7s ease-in infinite}
.hero-svg.rush .speed{opacity:1}
.hero-svg.rush .speed path{animation:hr-speed .45s linear infinite}
.hero-svg.rush .speed path:nth-child(2){animation-delay:.15s}
.hero-svg.rush .speed path:nth-child(3){animation-delay:.3s}
.hero-svg.rush .arm{animation:hr-arm .34s ease-in-out infinite}
/* happy: little hop and wave · chill: slow sway */
.hero-svg.happy .runner{animation:hr-hop 1.4s ease-in-out infinite}
.hero-svg.happy .arm{animation:hr-wave 1.4s ease-in-out infinite}
.hero-svg.chill .runner{animation:hr-sway 3.2s ease-in-out infinite}
/* after a successful clock: one big joyful jump */
.hero.yay .hero-svg .runner{animation:hr-yay .5s ease-out 3}
@keyframes hr-bob{0%,100%{transform:translateY(0) rotate(7deg)}50%{transform:translateY(-7px) rotate(9deg)}}
@keyframes hr-leg{0%,100%{transform:rotate(32deg)}50%{transform:rotate(-32deg)}}
@keyframes hr-ring{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}
@keyframes hr-blink{0%{opacity:1}100%{opacity:.2}}
@keyframes hr-drop{0%{transform:translate(0,0);opacity:1}100%{transform:translate(8px,14px);opacity:0}}
@keyframes hr-speed{0%{transform:translateX(14px);opacity:0}30%{opacity:1}100%{transform:translateX(-16px);opacity:0}}
@keyframes hr-arm{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(25deg)}}
@keyframes hr-hop{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}}
@keyframes hr-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}75%{transform:rotate(12deg)}}
@keyframes hr-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes hr-yay{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-26px) scale(1.06,.94)}}
/* the round clock button rattles like an alarm when it is time to clock */
.staff .tabs .fab.ring span{animation:fab-ring 1.6s ease-in-out infinite}
@keyframes fab-ring{0%,60%,100%{transform:rotate(0)}64%,72%,80%{transform:rotate(-14deg)}68%,76%,84%{transform:rotate(14deg)}}
/* calendar: today's character hops; tapping any day makes it hop once */
.cd.today .mascot{animation:hr-hop 1.6s ease-in-out infinite}
.cd:active .mascot{transform:translateY(-4px) scale(1.08)}
@media (prefers-reduced-motion:reduce){.hero-svg *,.hero-svg,.tabs .fab span,.cd .mascot{animation:none!important}}