/* ============================================
   ClockIn Healoka — app.css
   Warna cerah, mobile-first, iOS safe area
   ============================================ */
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html{ height:100%; -webkit-text-size-adjust:100% }
body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; background:#F0F4FF; color:#1E2D4A; min-height:100vh; min-height:-webkit-fill-available }

/* ---- SCREEN ---- */
.screen{ display:none }
.screen.active{ display:block }

/* ===========================
   LOGIN
   =========================== */
.login-bg{
  min-height:100vh; min-height:-webkit-fill-available;
  display:flex; flex-direction:column;
  background:linear-gradient(160deg,#EBF1FF 0%,#DDEAFF 55%,#F0F4FF 100%)
}
.login-top{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px 20px }
.login-logo{ font-size:56px; margin-bottom:12px }
.login-title{ font-size:30px; font-weight:800; color:#2D5CB8; letter-spacing:-1px }
.login-title span{ color:#3DBE88 }
.login-sub{ font-size:14px; color:#8896A8; margin-top:6px }
.login-card{ background:#fff; border-radius:24px 24px 0 0; padding:28px 24px calc(28px + env(safe-area-inset-bottom)); box-shadow:0 -4px 24px rgba(59,111,212,.10) }
.login-note{ text-align:center; font-size:12px; color:#94A3B8; margin-top:14px }
.pass-wrap{ position:relative }
.pass-wrap input{ padding-right:44px }
.btn-eye{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:18px; cursor:pointer; color:#94A3B8 }

/* ===========================
   TOPBAR
   =========================== */
.topbar{
  background:#fff; padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 1px 6px rgba(59,111,212,.08);
  position:sticky; top:0; z-index:100
}
.topbar-logo{ font-size:17px; font-weight:800; color:#2D5CB8; letter-spacing:-0.5px }
.topbar-logo span{ color:#3DBE88 }
.avatar{ width:34px; height:34px; border-radius:50%; background:#3B6FD4; color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer }

/* ===========================
   SIDE MENU
   =========================== */
.menu-overlay{ display:none; position:fixed; inset:0; background:rgba(30,45,74,.35); z-index:200 }
.menu-overlay.open{ display:block }
.side-menu{ position:fixed; top:0; right:-280px; width:260px; height:100vh; background:#fff; z-index:201; transition:right .25s ease; box-shadow:-4px 0 20px rgba(59,111,212,.12); padding-top:env(safe-area-inset-top) }
.side-menu.open{ right:0 }
.side-menu-head{ padding:24px 20px; background:linear-gradient(135deg,#3B6FD4,#2D5CB8); color:#fff }
.side-avatar{ width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff; font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:10px }
.side-nama{ font-size:15px; font-weight:700 }
.side-nik{ font-size:12px; opacity:.8; margin-top:2px }
.side-jabatan{ font-size:12px; opacity:.8; margin-top:1px }
.side-menu-body{ padding:16px 12px }
.side-link{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:500; color:#1E2D4A; cursor:pointer; text-decoration:none; background:none; border:none; width:100%; text-align:left; margin-bottom:4px; transition:background .15s }
.side-link:hover{ background:#F0F4FF }

/* ===========================
   TAB CONTENT
   =========================== */
.tab-body{ padding:14px 14px calc(80px + env(safe-area-inset-bottom)); overflow-y:auto }
.tab-pane{ display:none }
.tab-pane.active{ display:block }
.page-title{ font-size:15px; font-weight:700; color:#1E2D4A; margin-bottom:14px }

/* ===========================
   GREETING CARD
   =========================== */
.greeting-card{
  background:linear-gradient(135deg,#3B6FD4 0%,#2552B0 100%);
  border-radius:18px; padding:18px; color:#fff;
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:14px
}
.greet-name{ font-size:16px; font-weight:700; margin-bottom:2px }
.greet-sub{ font-size:12px; opacity:.8; margin-bottom:6px }
.shift-info{ font-size:11px; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:20px; display:inline-block }
.jam-wrap{ text-align:right; flex-shrink:0 }
.jam{ font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1 }
.tgl{ font-size:11px; opacity:.7; margin-top:4px }

/* ===========================
   STATUS ROW
   =========================== */
.status-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px }
.status-box{ background:#fff; border-radius:14px; padding:12px 8px; text-align:center; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.status-lbl{ font-size:10px; color:#94A3B8; margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.3px }
.status-val{ font-size:17px; font-weight:700; color:#1E2D4A }
.status-val.green{ color:#1A7A52 }
.status-val.red{ color:#C0392B }
.status-val.orange{ color:#B7611A }

/* ===========================
   GPS CARD
   =========================== */
.gps-card{ background:#fff; border-radius:14px; padding:14px; margin-bottom:14px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.gps-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
.gps-dot{ width:10px; height:10px; border-radius:50%; background:#F5A623; flex-shrink:0; animation:pulse 1.4s infinite }
.gps-dot.ok{ background:#3DBE88; animation:none }
.gps-dot.err{ background:#E74C3C; animation:none }
@keyframes pulse{ 0%,100%{ opacity:1;transform:scale(1) } 50%{ opacity:.5;transform:scale(.85) } }
.gps-label{ font-size:13px; font-weight:600; color:#1E2D4A }
.gps-detail{ font-size:11px; color:#94A3B8; margin-bottom:3px }
.gps-jarak{ font-size:12px; font-weight:600; color:#3B6FD4 }

/* ===========================
   FOTO SELFIE
   =========================== */
.foto-section{ background:#fff; border-radius:14px; padding:14px; margin-bottom:14px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.foto-section-title{ font-size:12px; font-weight:700; color:#64748B; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px }
.foto-area{ background:#F4F7FF; border:2px dashed #B8C9F0; border-radius:12px; min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:all .2s }
.foto-area.ok{ border-style:solid; border-color:#3DBE88; background:#F0FBF6 }
.foto-ph{ text-align:center }
.foto-ph-icon{ font-size:40px; margin-bottom:8px }
.foto-ph-text{ font-size:13px; color:#94A3B8 }
.foto-ts{ position:absolute; bottom:0; left:0; right:0; background:rgba(20,35,65,.78); color:#fff; font-size:10px; padding:8px 12px; line-height:1.7; border-radius:0 0 10px 10px }
.cam-ctrl{ display:flex; gap:8px; margin-top:8px }

/* ===========================
   TOMBOL ABSEN
   =========================== */
.absen-btns{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px }
.btn-absen{ padding:16px; font-size:15px; font-weight:700; border-radius:16px }

/* ===========================
   HASIL ABSEN (gaya SIAP BKPSDM)
   =========================== */
.hasil-card{ background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 2px 20px rgba(59,111,212,.12); margin-bottom:16px }
.hasil-header{ background:#2D5CB8; color:#fff; padding:13px 16px; font-size:14px; font-weight:700; text-align:center }
.hasil-foto-wrap{ position:relative }
.hasil-foto{ width:100%; display:block; max-height:280px; object-fit:cover }
.hasil-wm{ position:absolute; bottom:0; left:0; right:0; background:rgba(20,35,65,.82); color:#fff; padding:10px 14px; font-size:10px; line-height:1.9 }
.hasil-body{ padding:14px 16px; background:#F8FAFF }
.hasil-row{ display:flex; gap:8px; margin-bottom:7px; font-size:13px }
.hasil-row:last-child{ margin-bottom:0 }
.hasil-lbl{ color:#94A3B8; min-width:88px; font-size:12px; flex-shrink:0 }
.hasil-val{ color:#1E2D4A; font-weight:600; flex:1 }

/* ===========================
   RIWAYAT
   =========================== */
.bulan-nav{ display:flex; align-items:center; justify-content:space-between; background:#fff; border-radius:14px; padding:10px 14px; margin-bottom:14px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.bulan-lbl{ font-size:14px; font-weight:700; color:#1E2D4A }
.btn-nav{ background:#EBF1FF; border:none; border-radius:10px; padding:7px 14px; font-size:18px; color:#2D5CB8; cursor:pointer; font-weight:700 }
.ring-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px }
.ring-box{ background:#fff; border-radius:12px; padding:12px; text-align:center; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.ring-val{ font-size:22px; font-weight:800; color:#3B6FD4 }
.ring-lbl{ font-size:10px; color:#94A3B8; margin-top:2px }
.riw-item{ background:#fff; border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.riw-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.riw-tgl{ font-size:13px; font-weight:700; color:#1E2D4A }
.riw-foto-row{ display:flex; gap:10px; margin-bottom:10px }
.riw-foto-box{ flex:1; text-align:center }
.riw-foto-box img{ width:100%; border-radius:8px; object-fit:cover; height:90px; background:#F4F7FF }
.riw-foto-box .no-foto{ height:90px; background:#F4F7FF; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#CBD5E1 }
.riw-foto-lbl{ font-size:10px; color:#94A3B8; margin-top:4px }
.riw-detail{ font-size:12px; color:#94A3B8; line-height:1.7 }
.riw-detail strong{ color:#1E2D4A }

/* ===========================
   IZIN / CUTI
   =========================== */
.sub-tabs{ display:flex; background:#fff; border-radius:12px; padding:4px; margin-bottom:14px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.sub-tab{ flex:1; border:none; background:none; padding:9px 8px; font-size:13px; font-weight:600; color:#94A3B8; border-radius:9px; cursor:pointer; transition:all .15s }
.sub-tab.active{ background:#EBF1FF; color:#2D5CB8 }
.subtab-pane{ display:none }
.subtab-pane.active{ display:block }
.form-card{ background:#fff; border-radius:16px; padding:18px; box-shadow:0 1px 6px rgba(59,111,212,.07); margin-bottom:14px }
.upload-area{ background:#F4F7FF; border:2px dashed #B8C9F0; border-radius:10px; padding:18px; text-align:center; font-size:13px; color:#94A3B8; cursor:pointer }
.izin-item{ background:#fff; border-radius:14px; padding:14px; margin-bottom:10px; box-shadow:0 1px 6px rgba(59,111,212,.07) }
.izin-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px }
.izin-jenis{ font-size:13px; font-weight:700; color:#1E2D4A; text-transform:capitalize }
.izin-tgl{ font-size:12px; color:#94A3B8; margin-bottom:4px }
.izin-alasan{ font-size:12px; color:#64748B }
.empty{ text-align:center; padding:30px; color:#94A3B8; font-size:13px }

/* ===========================
   BADGE / PILL
   =========================== */
.badge{ display:inline-block; font-size:11px; padding:3px 10px; border-radius:20px; font-weight:600 }
.badge-hadir{ background:#EAF6F1; color:#1A7A52 }
.badge-telat,.badge-Telat{ background:#FEF3C7; color:#92400E }
.badge-alpha,.badge-Alpha{ background:#FDE8E8; color:#C0392B }
.badge-izin,.badge-Izin,.badge-tidak_masuk{ background:#EBF1FF; color:#2D5CB8 }
.badge-sakit,.badge-Sakit{ background:#FFF3F3; color:#C0392B }
.badge-cuti,.badge-Cuti{ background:#F3E8FF; color:#7B2D8B }
.badge-wfh,.badge-WFH{ background:#E0F7FA; color:#006064 }
.badge-pending,.badge-Pending{ background:#FEF3C7; color:#92400E }
.badge-disetujui,.badge-Disetujui{ background:#EAF6F1; color:#1A7A52 }
.badge-ditolak,.badge-Ditolak{ background:#FDE8E8; color:#C0392B }
.badge-dicatat,.badge-Dicatat{ background:#EAF6F1; color:#1A7A52 }

/* ===========================
   FORM
   =========================== */
.form-group{ margin-bottom:14px }
.form-group label{ display:block; font-size:11px; font-weight:700; color:#64748B; text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px }
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; border:1.5px solid #E2E8F0; border-radius:12px;
  padding:12px 14px; font-size:14px; color:#1E2D4A;
  background:#FAFBFF; outline:none; font-family:inherit;
  -webkit-appearance:none; appearance:none
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color:#3B6FD4 }
.form-group textarea{ resize:vertical; min-height:80px }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* ===========================
   BUTTONS
   =========================== */
.btn{ border:none; border-radius:14px; padding:13px 20px; font-size:14px; font-weight:700; cursor:pointer; width:100%; font-family:inherit; transition:opacity .15s; display:flex; align-items:center; justify-content:center; gap:6px }
.btn:disabled{ opacity:.45; cursor:not-allowed }
.btn:active:not(:disabled){ opacity:.82 }
.btn-primary{ background:#3B6FD4; color:#fff }
.btn-outline{ background:#fff; color:#3B6FD4; border:2px solid #3B6FD4 }
.btn-ghost{ background:#F0F4FF; color:#64748B }
.btn-full{ width:100% }
.btn-sm{ padding:9px 14px; font-size:12px; border-radius:10px }

/* ===========================
   BOTTOM NAV
   =========================== */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; display:flex;
  border-top:1px solid #E8EDF5;
  padding-bottom:env(safe-area-inset-bottom);
  z-index:100
}
.nav-btn{ flex:1; border:none; background:none; padding:10px 8px 8px; text-align:center; cursor:pointer; font-family:inherit }
.nav-icon{ font-size:22px; margin-bottom:2px }
.nav-lbl{ font-size:10px; color:#94A3B8; font-weight:600 }
.nav-btn.active .nav-lbl{ color:#3B6FD4 }

/* ===========================
   TOAST
   =========================== */
.toast{
  position:fixed; bottom:calc(80px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%) translateY(16px);
  background:#1E2D4A; color:#fff; padding:12px 22px;
  border-radius:30px; font-size:13px; font-weight:500;
  opacity:0; transition:all .3s; pointer-events:none;
  z-index:999; white-space:nowrap; max-width:88vw; text-align:center
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.toast.ok{ background:#1A7A52 }
.toast.err{ background:#C0392B }

/* ===========================
   LOADER
   =========================== */
.loader{ position:fixed; inset:0; background:rgba(240,244,255,.85); display:flex; align-items:center; justify-content:center; z-index:998 }
.loader-spin{ width:36px; height:36px; border:3px solid #BFDBFE; border-top-color:#3B6FD4; border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }