/* ─── CSS Variables ──────────────────────────────────────────────────────────── */
:root {
  --blue:         #185FA5;
  --blue-dark:    #0C447C;
  --blue-mid:     #1A6DBF;
  --blue-light:   #EFF4FA;
  --blue-bg:      #F6F9FC;
  --blue-border:  #C2D8F0;

  --green:        #0F6E56;
  --green-bg:     #E1F5EE;
  --green-border: #A8DFD0;
  --green-text:   #0A5240;

  --yellow:       #854F0B;
  --yellow-bg:    #FAEEDA;
  --yellow-border:#F5C98A;

  --red:          #A32D2D;
  --red-bg:       #FCEBEB;
  --red-border:   #F5ABAB;

  --text:         #1A2B3C;
  --text-sec:     #4A5C6E;
  --text-muted:   #8A9BAC;

  --white:        #FFFFFF;
  --border:       #DCE6F1;
  --bg:           #F6F9FC;

  --shadow-sm:    0 1px 4px rgba(12,68,124,.08);
  --shadow:       0 2px 12px rgba(12,68,124,.10);
  --shadow-lg:    0 8px 28px rgba(12,68,124,.15);
  --shadow-card:  0 2px 8px rgba(12,68,124,.07);

  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-xl:    20px;

  --nav-h:        66px;
  --header-h:     60px;
  --band-h:       38px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.5;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  overflow-x:hidden;
}
button{font-family:inherit;cursor:pointer;}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
input,select,textarea{font-family:inherit;}

/* ─── App Shell (employee page) ─────────────────────────────────────────────── */
.app-shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  max-width:480px;
  margin:0 auto;
  background:var(--white);
  position:relative;
}

/* ─── App Header ─────────────────────────────────────────────────────────────── */
.app-header{
  background:var(--blue);
  padding:0 16px;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:100;
  flex-shrink:0;
}
.header-left{display:flex;flex-direction:column;gap:1px;}
.header-greeting{
  font-size:11.5px;
  color:rgba(255,255,255,.75);
  font-weight:400;
  letter-spacing:.2px;
}
.header-name{
  font-size:15.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.1px;
}
.header-avatar{
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  color:#fff;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s;
  letter-spacing:0;
}
.header-avatar:active{background:rgba(255,255,255,.3);}

/* ─── Status Band ─────────────────────────────────────────────────────────────── */
.status-band{
  background:var(--blue-dark);
  height:var(--band-h);
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:6px;
  font-size:12.5px;
  color:rgba(255,255,255,.85);
  font-weight:500;
  flex-shrink:0;
}
.band-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  flex-shrink:0;
}
#bandShift{color:rgba(255,255,255,.65);}

/* ─── Page Content ────────────────────────────────────────────────────────────── */
.page-content{
  flex:1;
  overflow-y:auto;
  padding-bottom:calc(var(--nav-h) + 8px);
}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ─── Clock Section ───────────────────────────────────────────────────────────── */
.clock-section{
  background:var(--blue-dark);
  padding:20px 16px 22px;
  text-align:center;
  color:#fff;
}
.clock-time{
  font-size:48px;
  font-weight:700;
  letter-spacing:2px;
  font-variant-numeric:tabular-nums;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.clock-date{
  font-size:13.5px;
  margin-top:6px;
  color:rgba(255,255,255,.75);
  font-weight:400;
  letter-spacing:.3px;
}

/* ─── Section Padding ─────────────────────────────────────────────────────────── */
.section{padding:16px;}
.section+.section{padding-top:0;}

/* ─── Employee Select Cards ───────────────────────────────────────────────────── */
.select-prompt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  margin:12px 16px 0;
  background:var(--white);
  border:2px dashed var(--blue-border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.select-prompt:active{background:var(--blue-light);}
.select-prompt-icon{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--blue-light);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.select-prompt-text{flex:1;}
.select-prompt-label{font-size:14px;font-weight:600;color:var(--blue);}
.select-prompt-sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
.select-prompt-arrow{font-size:20px;color:var(--blue-border);font-weight:300;}

.employee-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin:12px 16px 0;
  background:var(--blue-light);
  border:1.5px solid var(--blue-border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .15s;
}
.employee-card:active{background:#e3ecf8;}
.emp-avatar-circle{
  width:42px;height:42px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
  flex-shrink:0;
  letter-spacing:0;
}
.emp-info{flex:1;}
.emp-name-text{font-size:15px;font-weight:700;color:var(--text);}
.emp-meta{font-size:12px;color:var(--text-sec);margin-top:2px;}
.emp-change-btn{
  font-size:12px;font-weight:600;
  color:var(--blue);
  background:rgba(24,95,165,.1);
  border-radius:6px;
  padding:4px 10px;
}

/* ─── Camera Section ─────────────────────────────────────────────────────────── */
.camera-section{padding:12px 16px 0;}
.camera-wrap{
  width:100%;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#0a1520;
  position:relative;
  box-shadow:var(--shadow);
}
.camera-idle{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;
  color:rgba(255,255,255,.7);
}
.camera-idle-icon{font-size:40px;opacity:.6;}
.camera-idle-text{font-size:13.5px;text-align:center;max-width:200px;line-height:1.4;}
.camera-live{position:absolute;inset:0;}
#video{width:100%;height:100%;object-fit:cover;display:block;}
.camera-ui{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:10px;
  pointer-events:none;
}
.camera-ui *{pointer-events:all;}
.cam-top{display:flex;justify-content:flex-end;}
.cam-bottom{display:flex;justify-content:center;padding-bottom:8px;}
.btn-flip-cam{
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.45);
  border:none;color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.btn-capture{
  width:68px;height:68px;border-radius:50%;
  border:4px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.18);
  cursor:pointer;
  position:relative;
  transition:transform .1s;
  backdrop-filter:blur(4px);
}
.btn-capture::after{
  content:'';position:absolute;inset:6px;
  border-radius:50%;background:#fff;
}
.btn-capture:active{transform:scale(.93);}
.camera-preview-wrap{position:absolute;inset:0;}
#photoPreview{width:100%;height:100%;object-fit:cover;}
.camera-retake-bar{
  position:absolute;bottom:0;left:0;right:0;
  padding:8px;
  display:flex;justify-content:center;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
}
.camera-init-overlay{
  position:absolute;inset:0;
  background:#0a1520;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;color:rgba(255,255,255,.7);font-size:13px;
}

/* ─── GPS Chip ────────────────────────────────────────────────────────────────── */
.gps-chip{
  display:flex;align-items:center;gap:8px;
  margin:10px 16px 0;
  padding:9px 14px;
  border-radius:24px;
  font-size:12.5px;font-weight:600;
  border:1.5px solid transparent;
  transition:all .3s;
}
.gps-chip.getting{background:#EEF3FA;border-color:var(--blue-border);color:var(--blue-dark);}
.gps-chip.good{background:var(--green-bg);border-color:var(--green-border);color:var(--green-text);}
.gps-chip.bad{background:var(--yellow-bg);border-color:var(--yellow-border);color:var(--yellow);}
.gps-chip.out{background:var(--red-bg);border-color:var(--red-border);color:var(--red);}
.gps-chip.error{background:var(--red-bg);border-color:var(--red-border);color:var(--red);}
.chip-dot{
  width:8px;height:8px;border-radius:50%;background:currentColor;
  flex-shrink:0;
}
.gps-chip.getting .chip-dot{animation:blink 1.2s infinite;}
.gps-chip.bad .chip-dot{animation:blink 1.2s infinite;}

/* ─── Action Buttons ─────────────────────────────────────────────────────────── */
.action-section{padding:12px 16px 4px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:14px 20px;
  font-size:15px;font-weight:700;
  border:none;border-radius:var(--radius);
  cursor:pointer;
  transition:all .15s;
  touch-action:manipulation;
  user-select:none;
  letter-spacing:.1px;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-primary{
  width:100%;
  background:var(--blue);
  color:#fff;
  box-shadow:0 4px 14px rgba(24,95,165,.3);
}
.btn-primary:not(:disabled):hover{background:var(--blue-mid);}
.btn-primary.danger{
  background:var(--red);
  box-shadow:0 4px 14px rgba(163,45,45,.3);
}
.btn-outline{
  width:100%;
  background:transparent;
  color:var(--blue);
  border:2px solid var(--blue-border);
}
.btn-outline:not(:disabled):hover{background:var(--blue-light);}
.btn-outline-sm{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.5);
  color:#fff;
  font-size:13px;font-weight:600;
  padding:7px 16px;
  border-radius:8px;
}
.btn-gap{height:10px;}
.btn-sm-white{
  background:#fff;color:var(--blue);
  border:1.5px solid var(--blue-border);
  font-size:13px;font-weight:600;
  padding:8px 16px;border-radius:8px;
}

/* ─── Result Card ─────────────────────────────────────────────────────────────── */
.result-card{
  margin:12px 16px;
  padding:20px 16px;
  border-radius:var(--radius-lg);
  text-align:center;
  border:1.5px solid;
}
.result-card.success{background:var(--green-bg);border-color:var(--green-border);}
.result-card.suspicious{background:var(--yellow-bg);border-color:var(--yellow-border);}
.result-icon{font-size:44px;margin-bottom:8px;}
.result-title{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;}
.result-body{font-size:13px;color:var(--text-sec);line-height:1.6;margin-bottom:16px;}
.result-body strong{color:var(--text);}
.result-time-pill{
  display:inline-block;
  background:rgba(0,0,0,.06);
  border-radius:20px;padding:4px 12px;
  font-size:12px;font-weight:600;color:var(--text-sec);
  margin-bottom:16px;
}

/* ─── Bottom Navigation ───────────────────────────────────────────────────────── */
.bottom-nav{
  position:fixed;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:480px;
  height:var(--nav-h);
  background:#fff;
  border-top:1px solid var(--border);
  display:flex;
  z-index:200;
  box-shadow:0 -2px 12px rgba(12,68,124,.08);
}
.nav-item{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:3px;
  border:none;background:none;
  color:var(--text-muted);
  font-size:10.5px;font-weight:600;
  cursor:pointer;
  transition:color .15s;
  padding:0;
}
.nav-item svg{width:22px;height:22px;transition:transform .15s;}
.nav-item.active{color:var(--blue);}
.nav-item.active svg{transform:scale(1.1);}
.nav-item:active{color:var(--blue-dark);}

/* ─── Bottom Sheet (employee modal) ─────────────────────────────────────────── */
.sheet-overlay{
  position:fixed;inset:0;
  background:rgba(10,30,60,.5);
  z-index:400;
  display:flex;align-items:flex-end;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.sheet-overlay.open{opacity:1;pointer-events:all;}
.bottom-sheet{
  background:#fff;
  width:100%;max-width:480px;
  margin:0 auto;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  max-height:80vh;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -8px 32px rgba(12,68,124,.18);
}
.sheet-overlay.open .bottom-sheet{transform:translateY(0);}
.sheet-handle{
  width:36px;height:4px;border-radius:2px;
  background:var(--border);
  margin:10px auto 0;
  flex-shrink:0;
}
.sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sheet-title{font-size:15px;font-weight:700;color:var(--text);}
.sheet-close{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:none;
  color:var(--text-muted);font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.sheet-search{
  padding:10px 16px 8px;
  flex-shrink:0;
}
.sheet-search input{
  width:100%;padding:9px 12px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;background:var(--bg);outline:none;
  color:var(--text);
}
.sheet-search input:focus{border-color:var(--blue);}
.sheet-body{overflow-y:auto;padding:4px 0 16px;}
.sheet-group-label{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--text-muted);
  padding:10px 16px 4px;
}
.sheet-emp-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;
  cursor:pointer;
  transition:background .12s;
}
.sheet-emp-item:active{background:var(--blue-light);}
.sheet-emp-avatar{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
  flex-shrink:0;
}
.sheet-emp-name{font-size:14px;font-weight:600;color:var(--text);}
.sheet-emp-sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
.sheet-emp-item.selected .sheet-emp-name{color:var(--blue);}
.sheet-emp-check{margin-left:auto;color:var(--blue);font-size:16px;}

/* ─── Riwayat Tab ─────────────────────────────────────────────────────────────── */
.history-item{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  display:flex;gap:12px;align-items:flex-start;
}
.history-date-badge{
  min-width:48px;
  text-align:center;
  flex-shrink:0;
}
.history-day{font-size:20px;font-weight:800;color:var(--text);line-height:1;}
.history-mon{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;}
.history-info{flex:1;}
.history-times{display:flex;gap:16px;margin-bottom:4px;}
.history-time-block label{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.history-time-block span{display:block;font-size:14px;font-weight:700;color:var(--text);}
.history-photo{width:40px;height:40px;border-radius:8px;object-fit:cover;cursor:pointer;}
.history-item.history-libur,.history-item.history-absen{opacity:.7;}
.history-date-badge.libur .history-day{color:var(--blue);}
.history-date-badge.absen .history-day{color:var(--text-muted);}
.history-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#F8FAFC;border-radius:12px;margin-bottom:4px;}
.hist-nav-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:4px 14px;cursor:pointer;font-size:18px;color:var(--blue);}
.hist-nav-label{font-weight:700;font-size:14px;}
.hist-day-label{font-size:11px;color:var(--text-muted);margin-bottom:4px;}

/* ─── Jadwal Tab ──────────────────────────────────────────────────────────────── */
.schedule-card{
  margin:16px;
  background:#fff;
  border-radius:var(--radius);
  border:1.5px solid var(--blue-border);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.schedule-header{
  background:var(--blue);
  padding:14px 16px;
  color:#fff;
}
.schedule-header-title{font-size:13px;font-weight:600;opacity:.8;}
.schedule-header-val{font-size:22px;font-weight:800;margin-top:2px;}
.schedule-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--border);
}
.schedule-row:last-child{border-bottom:none;}
.schedule-label{font-size:12.5px;color:var(--text-muted);}
.schedule-value{font-size:14px;font-weight:700;color:var(--text);}

/* ─── Profil Tab ──────────────────────────────────────────────────────────────── */
.profile-hero{
  background:var(--blue);
  padding:24px 16px 20px;
  text-align:center;
  color:#fff;
}
.profile-avatar-lg{
  width:80px;height:80px;border-radius:50%;
  background:rgba(255,255,255,.2);
  border:3px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:800;
  margin:0 auto 12px;
  letter-spacing:0;
  overflow:hidden;
}
.profile-photo-btn{
  position:absolute;bottom:10px;right:-4px;
  width:26px;height:26px;border-radius:50%;
  background:#fff;color:#185FA5;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  border:2px solid #185FA5;
  line-height:1;
}
.profile-name{font-size:20px;font-weight:800;}
.profile-outlet{font-size:13px;opacity:.75;margin-top:3px;}
.profile-stat-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin:16px 0;
  background:#fff;
}
.profile-stat{
  text-align:center;padding:14px 8px;
  border-right:1px solid var(--border);
}
.profile-stat:last-child{border-right:none;}
.profile-stat-val{font-size:22px;font-weight:800;color:var(--blue);}
.profile-stat-label{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ─── Admin Layout ────────────────────────────────────────────────────────────── */
.admin-wrap{max-width:900px;margin:0 auto;}
.admin-header{
  background:var(--blue);
  padding:0;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 8px rgba(12,68,124,.18);
}
.admin-header-top{
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 10px;
}
.admin-logo{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;
}
.admin-brand{color:#fff;}
.admin-brand-name{font-size:14px;font-weight:700;line-height:1.2;}
.admin-brand-sub{font-size:11.5px;opacity:.7;margin-top:1px;}
.admin-date-badge{
  margin-left:auto;
  background:rgba(255,255,255,.15);
  color:#fff;padding:5px 12px;border-radius:20px;
  font-size:12px;font-weight:600;
}
.admin-nav{
  display:flex;
  border-top:1px solid rgba(255,255,255,.12);
}
.admin-nav-link{
  padding:10px 18px;
  font-size:13px;font-weight:600;
  color:rgba(255,255,255,.65);
  border-bottom:2.5px solid transparent;
  transition:all .15s;
}
.admin-nav-link:hover{color:#fff;}
.admin-nav-link.active{color:#fff;border-bottom-color:#fff;}
.admin-content{padding:16px 20px;max-width:900px;margin:0 auto;}

/* ─── KPI Cards ───────────────────────────────────────────────────────────────── */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:16px;
}
@media(min-width:560px){.kpi-grid{grid-template-columns:repeat(4,1fr);}}
.kpi-card{
  background:#fff;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.kpi-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
}
.kpi-card.green::before{background:var(--green);}
.kpi-card.yellow::before{background:#E8950A;}
.kpi-card.red::before{background:var(--red);}
.kpi-card.blue::before{background:var(--blue);}
.kpi-num{font-size:32px;font-weight:800;line-height:1;margin-bottom:4px;}
.kpi-card.green .kpi-num{color:var(--green);}
.kpi-card.yellow .kpi-num{color:var(--yellow);}
.kpi-card.red .kpi-num{color:var(--red);}
.kpi-card.blue .kpi-num{color:var(--blue);}
.kpi-label{font-size:12px;color:var(--text-muted);font-weight:500;}

/* ─── Filter Bar ──────────────────────────────────────────────────────────────── */
.filter-card{
  background:#fff;
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:16px;
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.filter-group{flex:1;min-width:130px;}
.filter-group label{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;
  margin-bottom:5px;
}
.filter-group select,.filter-group input{
  width:100%;padding:9px 10px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:13.5px;color:var(--text);background:#fff;outline:none;
  appearance:none;-webkit-appearance:none;
}
.filter-group select:focus,.filter-group input:focus{border-color:var(--blue);}
.filter-group select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238A9BAC' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;
}
.filter-actions{display:flex;gap:8px;align-items:flex-end;flex-shrink:0;}
.filter-row-2{
  display:flex;gap:8px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
  justify-content:flex-end;
}
.filter-row-2 .btn{padding:9px 14px;font-size:13px;width:auto;}

/* ─── Admin Table ─────────────────────────────────────────────────────────────── */
.table-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  overflow:hidden;
  margin-bottom:16px;
}
.table-card-header{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.table-card-title{font-size:14px;font-weight:700;color:var(--text);}
.table-info{font-size:12px;color:var(--text-muted);}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:600px;}
thead th{
  background:var(--blue-light);
  color:var(--blue-dark);
  padding:10px 12px;
  text-align:left;
  font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;
  border-bottom:2px solid var(--blue-border);
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:var(--blue-bg);}
tbody tr.row-suspicious td{background:#FFF5F5;}
tbody tr.row-suspicious:hover td{background:#FEE8E8;}
tbody tr.row-late td{background:#FFFBF0;}
tbody tr.row-late:hover td{background:#FFF3D0;}

/* ─── Table Avatar ────────────────────────────────────────────────────────────── */
.table-person{display:flex;align-items:center;gap:9px;}
.tbl-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
  flex-shrink:0;
}
.tbl-name{font-weight:600;font-size:13px;color:var(--text);}
.tbl-sub{font-size:11px;color:var(--text-muted);}

/* ─── Badges ──────────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:20px;
  font-size:11.5px;font-weight:700;white-space:nowrap;
}
.badge-ok{background:var(--green-bg);color:var(--green-text);}
.badge-late{background:var(--yellow-bg);color:var(--yellow);}
.badge-suspicious{background:var(--red-bg);color:var(--red);}
.badge-blue{background:var(--blue-light);color:var(--blue-dark);}
.badge-absent{background:#F3F4F6;color:#6B7280;}

/* ─── Photo Thumb ─────────────────────────────────────────────────────────────── */
.photo-thumb{
  width:38px;height:38px;border-radius:6px;object-fit:cover;
  cursor:pointer;border:1px solid var(--border);
  transition:transform .15s,box-shadow .15s;
}
.photo-thumb:hover{transform:scale(1.12);box-shadow:var(--shadow);}

/* ─── Time Display in Table ───────────────────────────────────────────────────── */
.time-val{
  font-size:14px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.time-absent{color:var(--text-muted);font-weight:400;font-size:13px;}

/* ─── Photo Modal ─────────────────────────────────────────────────────────────── */
.photo-modal-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.88);
  display:none;align-items:center;justify-content:center;
  padding:16px;
}
.photo-modal-overlay.open{display:flex;}
.modal-img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.modal-close-btn{
  position:absolute;top:16px;right:16px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.15);border:none;
  color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ─── Summary Table ───────────────────────────────────────────────────────────── */
.summary-title{
  font-size:14px;font-weight:700;color:var(--text);
  padding:0 0 10px;
  border-bottom:2px solid var(--border);
  margin-bottom:12px;
}

/* ─── Settings Page ───────────────────────────────────────────────────────────── */
.settings-tabs-bar{
  display:flex;
  background:#fff;
  border-bottom:2px solid var(--border);
  position:sticky;
  top:calc(var(--header-h) + var(--band-h) + 10px);
  z-index:50;
}
.settings-tab-btn{
  flex:1;padding:12px 8px;
  font-size:14px;font-weight:700;
  color:var(--text-muted);
  border:none;background:none;border-bottom:2.5px solid transparent;
  cursor:pointer;transition:all .15s;
  text-align:center;
}
.settings-tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);}
.settings-panel{display:none;padding:16px 20px;}
.settings-panel.active{display:block;}

/* ─── List Items (settings) ──────────────────────────────────────────────────── */
.list-card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow-card);border:1px solid var(--border);
  overflow:hidden;margin-bottom:12px;
}
.list-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.list-item:last-child{border-bottom:none;}
.list-avatar{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
  flex-shrink:0;
}
.list-info{flex:1;min-width:0;}
.list-name{font-size:14px;font-weight:700;color:var(--text);}
.list-sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
.list-actions{display:flex;gap:6px;flex-shrink:0;}
.btn-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;border:none;cursor:pointer;
  transition:background .12s;
}
.btn-icon.edit{background:var(--blue-light);color:var(--blue);}
.btn-icon.del{background:var(--red-bg);color:var(--red);}
.btn-icon:active{opacity:.7;}

/* ─── Add Form ────────────────────────────────────────────────────────────────── */
.add-card{
  background:#fff;border-radius:var(--radius);
  border:2px dashed var(--blue-border);
  padding:16px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.add-card-title{
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--blue);margin-bottom:12px;
}
.form-field{margin-bottom:10px;}
.form-label{
  display:block;font-size:11.5px;font-weight:600;
  color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;
  margin-bottom:4px;
}
.form-input,.form-select{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;color:var(--text);background:#fff;outline:none;
}
.form-input:focus,.form-select:focus{border-color:var(--blue);}
.form-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%238A9BAC' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
@media(max-width:380px){.form-row-3{grid-template-columns:1fr 1fr;}}

/* ─── Inline Edit Form ────────────────────────────────────────────────────────── */
.inline-edit{
  background:var(--blue-light);
  border-top:1px solid var(--blue-border);
  padding:14px;
}
.delete-confirm{
  display:none;
  background:var(--red-bg);
  border-top:1px solid var(--red-border);
  padding:10px 14px;
  align-items:center;gap:8px;
  font-size:13px;color:var(--red);font-weight:500;
}
.delete-confirm.show{display:flex;}

/* ─── Toast ───────────────────────────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:calc(var(--nav-h) + 12px);
  left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:#fff;
  padding:11px 20px;border-radius:24px;
  font-size:13.5px;font-weight:600;
  z-index:9999;white-space:nowrap;
  opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--shadow-lg);
  pointer-events:none;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.success{background:var(--green);}
.toast.error{background:var(--red);}

/* ─── Empty State ─────────────────────────────────────────────────────────────── */
.empty-state{
  text-align:center;padding:36px 20px;
  color:var(--text-muted);font-size:13.5px;
}
.empty-icon{font-size:40px;margin-bottom:8px;opacity:.5;}

/* ─── Section Title ───────────────────────────────────────────────────────────── */
.section-heading{
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-muted);
  padding:14px 16px 6px;
}

/* ─── No-data row ─────────────────────────────────────────────────────────────── */
.no-data-row td{
  text-align:center;padding:28px;
  color:var(--text-muted);font-size:13px;
}

/* ─── Spinner ─────────────────────────────────────────────────────────────────── */
.spinner{
  width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .6s linear infinite;
  flex-shrink:0;
}
.spinner-blue{border-color:rgba(24,95,165,.2);border-top-color:var(--blue);}

/* ─── Divider ─────────────────────────────────────────────────────────────────── */
.divider{height:8px;background:var(--bg);}

/* ─── Outlet coords badge ─────────────────────────────────────────────────────── */
.coords-set{color:var(--green);font-size:11px;font-weight:600;}
.coords-missing{color:var(--yellow);font-size:11px;font-weight:600;}

/* ─── Login Screen ────────────────────────────────────────────────────────────── */
#loginScreen{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  background:var(--blue);
  transition:opacity .35s ease;
}
#loginScreen.hidden{opacity:0;pointer-events:none;}
.login-top{
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:32px 20px 24px;
  color:#fff;
  text-align:center;
}
.login-logo{
  font-size:52px;
  width:80px;height:80px;
  background:rgba(255,255,255,.15);
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.login-brand{font-size:22px;font-weight:800;letter-spacing:-.2px;}
.login-brand-sub{font-size:13px;opacity:.72;margin-top:4px;font-weight:400;}
.login-card{
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:24px 20px 40px;
  box-shadow:0 -8px 32px rgba(0,0,0,.15);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#loginScreen{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.login-top{flex-shrink:0;}
#empLoginList{max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.login-card-title{
  font-size:16px;font-weight:700;color:var(--text);
  margin-bottom:18px;
}

/* ─── Animations ──────────────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-8px);}40%,80%{transform:translateX(8px);}}
.animate-up{animation:slideUp .25s ease forwards;}

/* ─── Mini Leave Calendar (Jadwal tab karyawan) ──────────────────────────────── */
.mini-leave-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  max-width: 280px;
}
.mlc-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 2px 0;
}
.mlc-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  background: #fff;
  font-weight: 500;
}
.mlc-cell.empty    { background: transparent; border: none; }
.mlc-cell.mlc-leave { background: #E6F1FB; border-color: #93C5FD; color: #0C447C; font-weight: 800; }
.mlc-cell.mlc-wknd  { background: #F3F4F6; color: #9CA3AF; }

/* ─── Admin User Chip (shared across admin pages) ───────────────────────────── */
.admin-user-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.13);
  border-radius: 20px; padding: 4px 12px 4px 6px;
  margin-left: auto;
}
.admin-user-chip-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
}
.admin-user-chip-name { font-size: 12px; font-weight: 600; color: #fff; }
.admin-user-chip-out {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: rgba(255,255,255,.7); padding: 0; margin-left: 4px;
}
.admin-user-chip-out:hover { color: #fff; }

/* ─── Shift Badges ────────────────────────────────────────────────────────────── */
.shift-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  padding: 1px 7px; border-radius: 20px;
  vertical-align: middle; line-height: 1.6;
}
.shift-pagi  { background: #FFF7ED; color: #B45309; border: 1px solid #FDE68A; }
.shift-siang { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }

/* ─── Login Outlet Grid ────────────────────────────────────────────────────────── */
.outlet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.outlet-btn {
  background: var(--blue-bg);
  border: 2px solid var(--blue-border);
  border-radius: 16px;
  padding: 20px 8px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.outlet-btn:hover  { border-color: var(--oc, var(--blue)); background: #EBF3FC; box-shadow: 0 3px 12px rgba(12,68,124,.12); }
.outlet-btn:active { transform: scale(.93); }
.outlet-btn-icon   { font-size: 34px; margin-bottom: 10px; line-height: 1; }
.outlet-btn-name   { font-size: 11px; font-weight: 800; color: var(--blue-dark); letter-spacing: .5px; line-height: 1.3; }
.outlet-btn-skeleton {
  background: var(--border);
  border-radius: 16px;
  height: 100px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:.9} }

/* Login back row + step label */
.login-back-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.login-back-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px; font-weight: 600;
  color: var(--text-sec);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.login-back-btn:active { background: var(--border); }
.login-step-label { font-size: 13px; font-weight: 700; color: var(--blue); }

/* Employee buttons in login step 2 */
.emp-login-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  transition: background .1s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.emp-login-btn:active { background: var(--blue-border); transform: scale(.98); }
.emp-login-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}

/* ─── Check-in Stepper ────────────────────────────────────────────────────────── */
.checkin-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 14px;
}
.csi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.csi-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  transition: background .2s, color .2s;
}
.csi.active .csi-dot { background: var(--blue); color: #fff; }
.csi.done   .csi-dot { background: var(--green); color: #fff; }
.csi-lbl {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); letter-spacing: .3px;
  white-space: nowrap;
}
.csi.active .csi-lbl { color: var(--blue); }
.csi.done   .csi-lbl { color: var(--green); }
.csi-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 15px;
  min-width: 28px;
  transition: background .25s;
}
.csi-line.done { background: var(--green); }

/* ─── Step Panels ──────────────────────────────────────────────────────────────── */
.step-pane { padding: 0 16px 8px; }
.step-pane-head {
  font-size: 15px; font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.loc-rules {
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  font-size: 12.5px;
  color: var(--text-sec);
  line-height: 1.9;
}

/* ─── Confirm Step ─────────────────────────────────────────────────────────────── */
.confirm-photo-wrap {
  text-align: center;
  margin-bottom: 14px;
}
.confirm-photo-wrap img {
  width: 140px; height: 140px;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid var(--blue);
  box-shadow: var(--shadow);
}
.confirm-detail {
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  border-radius: 12px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--blue-border);
  gap: 12px;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row-label { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.confirm-row-val   { font-weight: 600; color: var(--text); font-size: 13px; text-align: right; }

/* ─── Profile 4-stat KPI grid ─────────────────────────────────────────────────── */
.profile-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 16px 14px;
}
.profile-kpi {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px 10px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.profile-kpi-val {
  font-size: 24px; font-weight: 900;
  line-height: 1.1; margin-bottom: 5px;
}
.profile-kpi-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); letter-spacing: .2px;
}
.profile-kpi.blue   .profile-kpi-val { color: var(--blue); }
.profile-kpi.green  .profile-kpi-val { color: var(--green); }
.profile-kpi.orange .profile-kpi-val { color: #B45309; }
.profile-kpi.red    .profile-kpi-val { color: var(--red); }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media(max-width:360px){
  .clock-time{font-size:40px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:560px){
  .filter-row{flex-wrap:nowrap;}
}

/* ─── Mobile Admin Layout (≤640px) ──────────────────────────────────────────── */
@media(max-width:640px){
  /* Content padding */
  .admin-content{padding:12px;}

  /* Header */
  .admin-header-top{padding:10px 12px 8px;gap:8px;}
  .admin-date-badge{display:none;}
  .admin-brand-name{font-size:13px;}
  .admin-brand-sub{font-size:10.5px;}
  .admin-logo{width:32px;height:32px;}

  /* Nav: horizontal scroll, no page overflow */
  .admin-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .admin-nav::-webkit-scrollbar{display:none;}
  .admin-nav-link{padding:9px 12px;font-size:12px;white-space:nowrap;flex-shrink:0;}

  /* Tables: remove min-width so table-wrap handles overflow */
  table{min-width:0;font-size:12px;}
  thead th{padding:8px 6px;font-size:10.5px;}
  tbody td{padding:8px 6px;}

  /* Filters */
  .filter-group{min-width:calc(50% - 5px);}
  .filter-actions{flex-wrap:wrap;width:100%;}
  .filter-actions .btn{flex:1!important;width:auto!important;padding:9px 6px!important;font-size:13px!important;}
  /* Secondary filter row: buttons take equal full width on mobile */
  .filter-row-2{justify-content:stretch;}
  .filter-row-2 .btn{flex:1;text-align:center;font-size:13px!important;padding:10px 8px!important;}
}