/* ============================================================
   G-TIME CAPTURE — Stylesheet
   แนวดีไซน์: iOS 26 / Liquid Glass / Glassmorphism
   ============================================================ */

/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
  --font: "Inter","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;

  /* สีหลัก: ขาวใส / ฟ้าอ่อน / ม่วงอ่อน / เทาเข้ม */
  --blue:#5b8def;
  --blue-2:#6aa6ff;
  --purple:#a78bfa;
  --purple-2:#c4b5fd;
  --ink:#1c2333;           /* เทาเข้ม (ตัวอักษรหลัก) */
  --ink-soft:#5b6373;
  --ink-faint:#8b93a6;

  --grad: linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);

  /* กระจก */
  --glass-bg: rgba(255,255,255,.55);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.7);
  --glass-blur: 22px;

  --radius:28px;
  --radius-lg:32px;
  --radius-sm:18px;

  --shadow-soft: 0 18px 50px -20px rgba(60,80,140,.45);
  --shadow-card: 0 12px 36px -16px rgba(60,80,140,.38);
  --shadow-float: 0 22px 60px -18px rgba(50,60,120,.55);

  --ok:#2ecc8f;
  --late:#ff9f43;
  --danger:#ff6b6b;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:#e9eefb;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* =========================================================
   พื้นหลัง Gradient + แสงเบลอ Abstract
   ========================================================= */
.bg{
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1200px 800px at 80% -10%, #dbe4ff 0%, transparent 55%),
    radial-gradient(1000px 700px at -10% 110%, #efe1ff 0%, transparent 55%),
    linear-gradient(160deg,#eef3ff 0%,#f5f0ff 50%,#eaf1ff 100%);
}
.blob{position:fixed;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;animation:float 16s ease-in-out infinite;}
.blob.b1{width:340px;height:340px;background:#9cc0ff;top:-80px;right:-60px;}
.blob.b2{width:300px;height:300px;background:#d3b6ff;bottom:-60px;left:-70px;animation-delay:-5s;}
.blob.b3{width:220px;height:220px;background:#bde0ff;top:40%;left:55%;animation-delay:-9s;opacity:.4;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(20px,-30px) scale(1.08);}
  66%{transform:translate(-25px,15px) scale(.95);}
}

/* =========================================================
   โครงมือถือ (Phone Frame) — กลางจอบน Desktop
   ========================================================= */
.app{
  position:relative;
  width:100%;
  max-width:430px;
  height:100dvh;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media(min-width:480px){
  body{padding:24px 0;background:
    radial-gradient(1200px 800px at 80% -10%, #dbe4ff 0%, transparent 55%),
    radial-gradient(1000px 700px at -10% 110%, #efe1ff 0%, transparent 55%),
    linear-gradient(160deg,#e7eeff 0%,#efe7ff 50%,#e4edff 100%);}
  .app{
    height:min(900px,calc(100dvh - 48px));
    border-radius:46px;
    border:1px solid rgba(255,255,255,.6);
    box-shadow:var(--shadow-float),0 0 0 10px rgba(255,255,255,.25);
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);
  }
}

/* =========================================================
   HEADER แบบ Floating Pill / Dynamic Island
   ========================================================= */
.island{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;
  background:rgba(20,24,40,.82);
  color:#fff;
  border-radius:30px;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);
  font-size:13px;font-weight:600;
  transition:.4s cubic-bezier(.3,1.2,.4,1);
  max-width:90%;
}
.island .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);}
.island .clock{font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.island .sep{opacity:.4;}

/* =========================================================
   SCREENS / SPA
   ========================================================= */
.screens{flex:1;position:relative;overflow:hidden;}
.screen{
  position:absolute;inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:74px 20px 110px;
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.99);
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.9,.3,1), visibility .38s;
}
.screen::-webkit-scrollbar{width:0;}
.screen.active{opacity:1;visibility:visible;transform:none;}
/* หน้าที่ไม่มี bottom nav (login/camera) */
.screen.full{padding-bottom:24px;}

/* =========================================================
   GLASS CARD
   ========================================================= */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow-card);
}
.card{padding:20px;}

/* หัวข้อหน้า */
.page-head{margin:4px 4px 18px;}
.page-head h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.5px;}
.page-head p{margin:4px 0 0;color:var(--ink-soft);font-size:14px;}

/* =========================================================
   ปุ่ม
   ========================================================= */
.btn{
  border:none;cursor:pointer;font-family:inherit;
  border-radius:20px;font-weight:700;font-size:16px;
  padding:16px 20px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .15s ease, box-shadow .25s ease, filter .2s;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -10px rgba(91,141,239,.7);}
.btn-primary:active{filter:brightness(1.05);}
.btn-glass{background:var(--glass-bg-strong);color:var(--ink);border:1px solid var(--glass-border);backdrop-filter:blur(12px);}
.btn-ghost{background:transparent;color:var(--ink-soft);}
.btn-danger{background:linear-gradient(135deg,#ff7a7a,#ff5b8a);color:#fff;box-shadow:0 14px 30px -12px rgba(255,107,107,.7);}
.btn-sm{padding:11px 16px;font-size:14px;width:auto;border-radius:15px;}
.btn[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.3);}

/* =========================================================
   FORM
   ========================================================= */
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin:0 0 7px 6px;}
.input{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:15px 16px;border-radius:18px;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.8);
  outline:none;transition:.2s;
}
.input::placeholder{color:var(--ink-faint);}
.input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(91,141,239,.15);}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%238b93a6' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 16px center;}

/* =========================================================
   1) WELCOME / LOGIN
   ========================================================= */
#screen-login{display:flex;flex-direction:column;justify-content:center;text-align:center;}
.logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:26px;animation:pop .6s cubic-bezier(.2,1.4,.4,1);}
.logo{
  width:88px;height:88px;border-radius:26px;
  background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 40px -12px rgba(122,108,236,.7);
  margin-bottom:16px;position:relative;overflow:hidden;
}
.logo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.45),transparent 50%);}
.logo svg{width:46px;height:46px;color:#fff;position:relative;z-index:1;}

/* โลโก้บริษัทแบบรูปภาพ — แสดงบนพื้นการ์ดขาวใส (ไม่ใช้ gradient) */
.logo-img{width:140px;height:140px;border-radius:34px;background:#fff;padding:16px;}
.logo-img::after{display:none;}
.logo-img img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;}
.tagline{color:var(--ink-soft);font-size:14px;margin-top:6px;}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(10px);}to{opacity:1;transform:none;}}

/* =========================================================
   2) DASHBOARD
   ========================================================= */
.hero{
  background:var(--grad);
  border-radius:var(--radius-lg);
  padding:22px;color:#fff;position:relative;overflow:hidden;
  box-shadow:0 22px 50px -18px rgba(122,108,236,.65);
  margin-bottom:18px;
}
.hero::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.18);top:-70px;right:-40px;}
.hero::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.12);bottom:-60px;left:-20px;}
.hero .row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;}
.hero .hi{font-size:14px;opacity:.9;}
.hero .name{font-size:24px;font-weight:800;margin-top:2px;}
.hero .meta{font-size:13px;opacity:.9;margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}
.hero .chip{background:rgba(255,255,255,.22);padding:4px 10px;border-radius:20px;backdrop-filter:blur(6px);}
.hero .avatar{width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;backdrop-filter:blur(6px);overflow:hidden;}
.hero .bignum{position:relative;z-index:1;margin-top:18px;font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;}
.hero .date{position:relative;z-index:1;opacity:.92;font-size:13px;}

/* สถานะวันนี้ */
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:20px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.6);margin-bottom:16px;border:1px solid var(--glass-border);
}
.status-pill .d{width:9px;height:9px;border-radius:50%;}
.s-none{color:var(--ink-soft);} .s-none .d{background:var(--ink-faint);}
.s-in{color:#1c8f63;} .s-in .d{background:var(--ok);box-shadow:0 0 8px var(--ok);}
.s-out{color:#7c5bd1;} .s-out .d{background:var(--purple);box-shadow:0 0 8px var(--purple);}

/* การ์ดสรุป grid */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
.mini{padding:16px;text-align:left;}
.mini .lbl{font-size:12px;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:6px;}
.mini .val{font-size:22px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;}
.mini .sub{font-size:12px;color:var(--ink-faint);margin-top:2px;}
.ico{width:18px;height:18px;}

/* ปุ่มใหญ่ 2 ปุ่ม */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.action{
  border:none;cursor:pointer;font-family:inherit;
  border-radius:var(--radius);padding:22px 16px;color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-weight:700;font-size:15px;transition:transform .15s,box-shadow .25s;
}
.action:active{transform:scale(.95);}
.action .circle{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.action.in{background:linear-gradient(135deg,#39d98a,#2ecc8f);box-shadow:0 18px 36px -14px rgba(46,204,143,.7);}
.action.out{background:linear-gradient(135deg,#7aa2ff,#a78bfa);box-shadow:0 18px 36px -14px rgba(122,108,236,.7);}
.action[disabled]{opacity:.4;pointer-events:none;filter:grayscale(.4);}

/* =========================================================
   3) CAMERA
   ========================================================= */
#screen-camera{padding:74px 16px 24px;}
.cam-wrap{
  position:relative;width:100%;aspect-ratio:3/4;border-radius:var(--radius-lg);
  overflow:hidden;background:#0c1020;box-shadow:var(--shadow-float);
  border:1px solid rgba(255,255,255,.4);
}
.cam-wrap video,.cam-wrap canvas,.cam-wrap img{width:100%;height:100%;object-fit:cover;display:block;}
.cam-wrap video{transform:scaleX(-1);} /* mirror เหมือนกล้องหน้า */
.cam-frame{position:absolute;inset:18px;border:2px dashed rgba(255,255,255,.45);border-radius:24px;pointer-events:none;}
.cam-badge{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  padding:8px 16px;border-radius:20px;font-weight:700;font-size:14px;color:#fff;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;z-index:2;
}
.cam-badge.in{background:rgba(46,204,143,.85);}
.cam-badge.out{background:rgba(122,108,236,.85);}
.cam-badge svg{width:16px;height:16px;}
.cam-time{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff;font-weight:700;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.4);padding:6px 14px;border-radius:16px;backdrop-filter:blur(8px);font-size:14px;}

/* ความคืบหน้าจำนวนรูป + แถบ thumbnail */
.shot-progress{text-align:center;font-weight:700;font-size:14px;color:var(--ink-soft);margin-bottom:12px;}
.thumb-strip{display:flex;gap:8px;justify-content:center;margin-top:14px;min-height:4px;}
.thumb-strip img{width:52px;height:68px;object-fit:cover;border-radius:12px;border:2px solid #fff;box-shadow:var(--shadow-card);animation:pop .3s cubic-bezier(.2,1.4,.4,1);}
.thumb-strip .slot{width:52px;height:68px;border-radius:12px;border:2px dashed rgba(140,150,180,.45);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:14px;font-weight:700;}
.confirm-photos{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.confirm-photos img{width:70px;height:92px;object-fit:cover;border-radius:14px;border:2px solid #fff;box-shadow:var(--shadow-card);}

/* shutter */
.shutter-bar{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:24px;}
.shutter{
  width:78px;height:78px;border-radius:50%;border:5px solid #fff;
  background:var(--grad);cursor:pointer;box-shadow:0 14px 30px -10px rgba(91,141,239,.7);
  transition:transform .15s;display:flex;align-items:center;justify-content:center;
}
.shutter:active{transform:scale(.9);}
.shutter .inner{width:58px;height:58px;border-radius:50%;background:#fff;}
.cam-side-btn{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:var(--glass-bg-strong);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--shadow-card);transition:transform .15s;}
.cam-side-btn:active{transform:scale(.9);}

/* กล้องถูกปฏิเสธ */
.cam-denied{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px;color:#fff;gap:14px;
  background:linear-gradient(160deg,#2a2f45,#1a1d2e);
}
.cam-denied.show{display:flex;}
.cam-denied .ic{width:64px;height:64px;border-radius:22px;background:rgba(255,107,107,.25);display:flex;align-items:center;justify-content:center;color:#ff9b9b;}
.cam-denied h3{margin:0;font-size:18px;}
.cam-denied p{margin:0;font-size:13px;opacity:.8;line-height:1.6;max-width:260px;}

/* =========================================================
   4) HISTORY
   ========================================================= */
.search-bar{position:relative;margin-bottom:16px;}
.search-bar .input{padding-left:44px;}
.search-bar svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-faint);width:18px;height:18px;}

.hist-card{padding:16px;margin-bottom:13px;display:flex;gap:14px;align-items:center;animation:rise .4s ease both;}
@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.hist-thumbs{display:flex;flex-shrink:0;}
.thumb{width:52px;height:52px;border-radius:16px;object-fit:cover;border:2px solid #fff;background:#dfe6f5 center/cover;box-shadow:var(--shadow-card);cursor:pointer;}
.thumb+.thumb{margin-left:-18px;}
.thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:10px;text-align:center;}
.hist-info{flex:1;min-width:0;}
.hist-date{font-weight:800;font-size:15px;}
.hist-times{font-size:13px;color:var(--ink-soft);margin-top:4px;display:flex;gap:12px;flex-wrap:wrap;font-variant-numeric:tabular-nums;}
.hist-times b{color:var(--ink);font-weight:700;}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:5px 10px;border-radius:14px;}
.badge.ontime{background:rgba(46,204,143,.16);color:#1c8f63;}
.badge.late{background:rgba(255,159,67,.18);color:#c9742a;}
.badge.pending{background:rgba(139,147,166,.18);color:var(--ink-soft);}
.badge.done{background:rgba(122,108,236,.16);color:#7c5bd1;}

.empty-state{text-align:center;padding:50px 20px;color:var(--ink-faint);}
.empty-state .ic{width:70px;height:70px;border-radius:24px;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--ink-faint);}

/* =========================================================
   5) ADMIN
   ========================================================= */
.grid2.stats .mini .val{font-size:24px;}
.emp-row{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:10px;}
.emp-av{width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;overflow:hidden;}
.emp-info{flex:1;min-width:0;}
.emp-info .n{font-weight:700;font-size:14px;}
.emp-info .d{font-size:12px;color:var(--ink-soft);}

.admin-toolbar{display:flex;gap:8px;margin-bottom:14px;}
.admin-toolbar .input{padding:11px 14px;font-size:14px;}

/* หัวข้อย่อยในหน้า */
.section-title{font-size:14px;font-weight:800;color:var(--ink);margin:18px 4px 12px;display:flex;align-items:center;gap:8px;}
.section-title svg{width:16px;height:16px;flex-shrink:0;}

/* เลือกวันทำงาน (อา-ส) */
.weekday-pick{display:flex;gap:6px;flex-wrap:wrap;}
.weekday-pick button{flex:1;min-width:38px;border:1px solid var(--glass-border);background:rgba(255,255,255,.55);border-radius:13px;padding:10px 0;font-family:inherit;font-weight:700;font-size:13px;color:var(--ink-soft);cursor:pointer;transition:.2s;}
.weekday-pick button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 18px -10px rgba(91,141,239,.8);}
.weekday-pick button:active{transform:scale(.94);}

/* ปุ่มแสดงเพิ่ม (pagination) */
.more-btn{width:100%;border:1px dashed rgba(140,150,180,.45);background:transparent;color:var(--ink-soft);font-family:inherit;font-weight:700;font-size:13px;padding:12px;border-radius:16px;cursor:pointer;margin-top:2px;}
.more-btn:active{transform:scale(.98);}

/* ตัวคั่นหมวดในฟอร์ม (modal เพิ่ม/แก้ไขพนักงาน) */
.form-sec{font-size:12px;font-weight:800;color:var(--ink-soft);margin:16px 2px 9px;padding-bottom:6px;border-bottom:1px solid rgba(140,150,180,.18);}
.form-sec:first-child{margin-top:0;}
/* ไอคอนในแถวข้อมูลโปรไฟล์ (รองรับ svg ที่ไม่ได้ระบุขนาด) */
.info-row .ic svg{width:20px;height:20px;}

/* ไอคอนการ์ดสถิติ (ภาพรวม/รายงาน) — chip ไล่เฉดสี + ไอคอนขาว */
.stat-ic{width:44px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:#fff;}
.stat-ic svg{width:23px;height:23px;}
.stat-ic.blue  {background:linear-gradient(135deg,#6aa6ff,#5b8def);box-shadow:0 10px 20px -8px rgba(91,141,239,.85);}
.stat-ic.green {background:linear-gradient(135deg,#39d98a,#2ecc8f);box-shadow:0 10px 20px -8px rgba(46,204,143,.85);}
.stat-ic.orange{background:linear-gradient(135deg,#ffb454,#ff9f43);box-shadow:0 10px 20px -8px rgba(255,159,67,.85);}
.stat-ic.purple{background:linear-gradient(135deg,#b79bff,#a78bfa);box-shadow:0 10px 20px -8px rgba(122,108,236,.85);}
.grid2.stats .mini{padding:18px;}
.grid2.stats .mini .val{font-size:26px;}
.grid2.stats .mini .lbl{margin-top:3px;font-size:12.5px;}

/* Segmented control (ตัวกรอง) */
.seg{display:flex;gap:6px;background:rgba(255,255,255,.45);padding:5px;border-radius:16px;border:1px solid var(--glass-border);margin-bottom:14px;}
.seg button{flex:1;border:none;background:transparent;font-family:inherit;font-weight:700;font-size:13px;padding:9px;border-radius:12px;color:var(--ink-soft);cursor:pointer;transition:.2s;}
.seg button.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-card);}

/* การ์ดการลา */
.leave-card{padding:16px;margin-bottom:12px;}
.leave-card .lh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.leave-card .lt{font-weight:800;font-size:15px;}
.leave-card .ld{font-size:13px;color:var(--ink-soft);margin-top:3px;}
.leave-card .lr{font-size:13px;color:var(--ink);margin-top:8px;background:rgba(140,150,180,.08);padding:8px 12px;border-radius:12px;}
.leave-actions{display:flex;gap:8px;margin-top:12px;}

/* กราฟแท่งง่าย ๆ (CSS) */
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bar-row:last-child{margin-bottom:0;}
.bar-name{width:88px;flex-shrink:0;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-track{flex:1;height:22px;background:rgba(140,150,180,.12);border-radius:8px;overflow:hidden;}
.bar-fill{height:100%;border-radius:8px;background:var(--grad);min-width:2px;transition:width .5s cubic-bezier(.2,.9,.3,1);}
.bar-val{width:26px;text-align:right;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;}

/* พิกัด/ตำแหน่ง */
.loc-line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);margin-top:8px;}
.loc-line a{color:var(--blue);font-weight:700;text-decoration:none;}

/* รายการพนักงาน (จัดการพนักงาน) */
.emp-row .role-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;margin-top:4px;}
.role-tag.admin{background:rgba(122,108,236,.16);color:#7c5bd1;}
.role-tag.employee{background:rgba(91,141,239,.14);color:#4a78d6;}
.role-tag.off{background:rgba(255,107,107,.16);color:#d85b5b;}
.emp-actions{display:flex;gap:6px;flex-shrink:0;}
.icon-btn{width:36px;height:36px;border-radius:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--glass-bg-strong);border:1px solid var(--glass-border);color:var(--ink-soft);transition:transform .15s,background .2s;}
.icon-btn:active{transform:scale(.9);}
.icon-btn.danger{color:#d85b5b;}
.icon-btn svg{width:17px;height:17px;}

/* =========================================================
   6) PROFILE
   ========================================================= */
.profile-head{text-align:center;margin-bottom:22px;}
.profile-av{position:relative;width:96px;height:96px;border-radius:32px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;margin:0 auto 14px;box-shadow:0 18px 36px -12px rgba(122,108,236,.6);overflow:hidden;cursor:pointer;}
/* ปุ่มกล้องมุมล่างขวาของรูปโปรไฟล์ */
.profile-av .av-edit{position:absolute;right:0;bottom:0;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card);border:2px solid #fff;}
.profile-av .av-edit svg{width:16px;height:16px;}
.av-img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-av .av-img{position:absolute;inset:0;}
.profile-head .nm{font-size:22px;font-weight:800;}
.profile-head .rl{color:var(--ink-soft);font-size:14px;margin-top:3px;}

.info-list{padding:6px 4px;}
.info-row{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid rgba(140,150,180,.12);}
.info-row:last-child{border-bottom:none;}
.info-row .ic{width:40px;height:40px;border-radius:13px;background:rgba(91,141,239,.12);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.info-row .t{flex:1;}
.info-row .t .k{font-size:12px;color:var(--ink-soft);}
.info-row .t .v{font-size:15px;font-weight:700;margin-top:1px;}
.acct-active{color:var(--ok)!important;}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */
.bottom-nav{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  width:calc(100% - 32px);max-width:398px;z-index:35;
  display:flex;justify-content:space-around;align-items:center;
  padding:10px 8px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:28px;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:var(--shadow-float);
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .3s;
}
.bottom-nav.hidden{transform:translateX(-50%) translateY(120px);opacity:0;pointer-events:none;}
.nav-btn{
  border:none;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ink-faint);font-size:10px;font-weight:600;
  padding:6px 10px;border-radius:16px;transition:.25s;flex:1;
}
.nav-btn svg{width:23px;height:23px;transition:.25s;}
.nav-btn.active{color:var(--blue);}
.nav-btn.active svg{transform:translateY(-1px);}
.nav-btn.active::before{content:"";position:absolute;}

/* =========================================================
   LOADING BAR (แสดงระหว่างเรียก API)
   ========================================================= */
.loading-bar{position:absolute;top:0;left:0;right:0;height:3px;z-index:80;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .2s;}
.loading-bar.on{opacity:1;}
.loading-bar::before{content:"";position:absolute;height:100%;width:40%;border-radius:3px;background:var(--grad);animation:loadingbar 1s ease-in-out infinite;}
@keyframes loadingbar{0%{left:-40%;}100%{left:100%;}}

/* =========================================================
   TOAST
   ========================================================= */
.toast-wrap{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:60;width:calc(100% - 40px);max-width:390px;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;
  background:rgba(28,33,51,.9);color:#fff;backdrop-filter:blur(14px);
  box-shadow:var(--shadow-float);font-size:14px;font-weight:600;
  transform:translateY(-20px);opacity:0;transition:.4s cubic-bezier(.2,1.2,.4,1);
}
.toast.show{transform:none;opacity:1;}
.toast .tic{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast.ok .tic{background:rgba(46,204,143,.25);color:#5ff0b4;}
.toast.warn .tic{background:rgba(255,159,67,.25);color:#ffc888;}
.toast.err .tic{background:rgba(255,107,107,.25);color:#ff9b9b;}
.toast .tt small{display:block;font-weight:500;opacity:.7;font-size:12px;margin-top:1px;}

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay{
  position:absolute;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(20,24,40,.45);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:.3s;padding:24px;
}
.modal-overlay.show{opacity:1;visibility:visible;}
.modal{
  width:100%;max-width:360px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  backdrop-filter:blur(24px);box-shadow:var(--shadow-float);
  transform:scale(.9) translateY(20px);transition:.35s cubic-bezier(.2,1.2,.4,1);
  /* จำกัดความสูง + ให้เนื้อหาเลื่อนได้เมื่อฟอร์มยาว */
  max-height:100%;display:flex;flex-direction:column;
}
.modal-overlay.show .modal{transform:none;}
.modal .mhead{padding:18px 20px 12px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.modal .mhead h3{margin:0;font-size:17px;font-weight:800;}
.modal .mclose{border:none;background:rgba(0,0,0,.06);width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;}
.modal .mbody{padding:4px 20px 22px;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;}
.modal .mbody::-webkit-scrollbar{width:0;}
.modal img.proof{width:100%;border-radius:18px;display:block;background:#dfe6f5;}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.proof-grid .cap{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:6px;font-weight:600;}

/* หลักฐานหลายรูปต่อช่วง (เข้างาน/ออกงาน) */
.proof-section+.proof-section{margin-top:16px;}
.proof-section .cap{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:8px;}
.proof-multi{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;}
.proof-multi img{width:100%;border-radius:12px;display:block;background:#dfe6f5;aspect-ratio:3/4;object-fit:cover;}
.proof-empty{color:var(--ink-faint);font-size:13px;padding:14px;text-align:center;background:rgba(140,150,180,.08);border-radius:12px;}

/* utility */
.muted{color:var(--ink-soft);}
.center{text-align:center;}
.mt8{margin-top:8px;} .mt12{margin-top:12px;} .mt16{margin-top:16px;} .mb12{margin-bottom:12px;}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;}
hr.soft{border:none;border-top:1px solid rgba(140,150,180,.15);margin:14px 0;}