:root{
  --primary:#1450A3;
  --primary-dark:#0B3A80;
  --accent:#F2A007;
  --success:#1CA97A;
  --warning:#F2A007;
  --danger:#E33A3A;
  --info:#2AAAE2;
  --sidebar-w:260px;
  --bg:#F3F6FB;
  --card-radius:14px;
}
*{box-sizing:border-box}
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  margin:0;
  color:#1E2A3A;
}
.app-wrapper{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--primary-dark),var(--primary));
  color:#fff;
  position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;
  transition:transform .25s ease;
  z-index:1000;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;
  padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.15);
}
.sidebar-brand img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
.brand-title{font-weight:700;font-size:1rem;letter-spacing:.5px}
.brand-sub{font-size:.72rem;opacity:.8}
.sidebar-menu{list-style:none;margin:0;padding:10px 0 30px}
.sidebar-menu li a{
  display:flex;align-items:center;gap:10px;
  padding:11px 20px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;
  border-left:3px solid transparent;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active{
  background:rgba(255,255,255,.12);
  border-left-color:var(--accent);
  color:#fff;
}
.sidebar-menu .menu-heading{
  padding:14px 20px 6px;font-size:.68rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.5);
}

/* MAIN */
.main-content{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.topbar{
  height:64px;background:#fff;display:flex;align-items:center;gap:14px;
  padding:0 24px;box-shadow:0 1px 4px rgba(0,0,0,.06);position:sticky;top:0;z-index:900;
}
.btn-toggle{border:none;background:none;font-size:1.4rem;color:var(--primary);display:none}
.topbar-title{font-weight:600;font-size:1.05rem;color:var(--primary-dark)}
.topbar-user{margin-left:auto}
.page-content{padding:24px;flex:1}
.page-footer{padding:14px 24px;text-align:center;font-size:.8rem;color:#8996a8}

/* CARDS */
.card{border:none;border-radius:var(--card-radius);box-shadow:0 2px 10px rgba(20,80,163,.06)}
.stat-card{
  border-radius:var(--card-radius);padding:20px;color:#fff;display:flex;align-items:center;gap:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.stat-card .icon{font-size:1.8rem;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.stat-card .value{font-size:1.6rem;font-weight:700;line-height:1}
.stat-card .label{font-size:.8rem;opacity:.9}
.bg-grad-blue{background:linear-gradient(135deg,#1450A3,#2AAAE2)}
.bg-grad-green{background:linear-gradient(135deg,#0E9F6E,#1CA97A)}
.bg-grad-orange{background:linear-gradient(135deg,#DD6B20,#F2A007)}
.bg-grad-red{background:linear-gradient(135deg,#C53030,#E33A3A)}
.bg-grad-purple{background:linear-gradient(135deg,#6B46C1,#9061F9)}
.bg-grad-teal{background:linear-gradient(135deg,#0D9488,#14B8A6)}

/* BADGES */
.badge-hadir{background:#DEF7EC;color:#046C4E}
.badge-terlambat{background:#FEECDC;color:#B45309}
.badge-izin{background:#E1EFFE;color:#1E429F}
.badge-sakit{background:#F3E8FF;color:#6B21A8}
.badge-alpa{background:#FDE8E8;color:#9B1C1C}
.badge-hadir,.badge-terlambat,.badge-izin,.badge-sakit,.badge-alpa{
  padding:5px 12px;border-radius:20px;font-size:.75rem;font-weight:600;display:inline-block;
}

/* AUTH PAGES */
.auth-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary) 60%, var(--info));
  padding:20px;
}
.auth-card{background:#fff;border-radius:18px;padding:40px 36px;max-width:420px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.auth-logo{width:70px;height:70px;object-fit:contain;margin:0 auto 12px;display:block}

/* SCANNER PAGE */
.scanner-wrapper{
  min-height:100vh;background:radial-gradient(circle at top,var(--primary) 0,var(--primary-dark) 100%);
  color:#fff;display:flex;flex-direction:column;align-items:center;padding:24px;
}
.scanner-header{text-align:center;margin-bottom:10px}
.scanner-header h1{font-size:1.6rem;font-weight:700;margin:0}
.scanner-header .sub{opacity:.85;font-size:.95rem}
.scanner-clock{font-size:2.2rem;font-weight:700;letter-spacing:1px;margin-top:6px}
.scanner-date{opacity:.85}
#reader{width:100%;max-width:480px;border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35);border:4px solid rgba(255,255,255,.25)}
.scan-instruction{margin-top:16px;font-size:1.1rem;text-align:center;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.result-card{
  background:#fff;color:#1E2A3A;border-radius:20px;max-width:480px;width:100%;
  padding:28px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35);
  animation:popIn .35s ease;
}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.result-card.status-terlambat{border-top:8px solid var(--warning)}
.result-card.status-hadir{border-top:8px solid var(--success)}
.result-card.status-duplikat{border-top:8px solid var(--info)}
.result-card.status-error{border-top:8px solid var(--danger)}
.result-title{font-weight:700;font-size:1.3rem;margin-bottom:14px}
.result-title.ok{color:var(--success)}
.result-title.warn{color:var(--warning)}
.result-title.err{color:var(--danger)}
.result-photo{width:170px;height:170px;object-fit:cover;border-radius:16px;border:4px solid #eee;margin-bottom:14px}
.result-table{text-align:left;margin:0 auto;font-size:.95rem}
.result-table td{padding:4px 8px}
.result-table td:first-child{color:#8996a8;white-space:nowrap}
.scanner-mode-badge{
  position:fixed;top:16px;right:16px;background:rgba(255,255,255,.15);
  padding:8px 16px;border-radius:30px;font-size:.85rem;font-weight:600;
}
.scanner-back{position:fixed;top:16px;left:16px}

.id-card{
  width:340px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.15);
  border:1px solid #e3e8ef;
}
.id-card-head{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px}
.id-card-head img{width:34px;height:34px;background:#fff;border-radius:6px;padding:2px}
.id-card-body{padding:14px;display:flex;gap:12px}
.id-card-body img.foto{width:80px;height:96px;object-fit:cover;border-radius:8px;border:1px solid #ddd}
.id-card-qr{padding:10px;text-align:center;border-top:1px dashed #ccc}

@media (max-width: 991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .main-content{margin-left:0}
  .btn-toggle{display:block}
}