/* ==========================================================
   SIABSEN - Elegant Education Theme
   ========================================================== */
:root{
  --navy-900:#0b1f3a;
  --navy-800:#122c52;
  --navy-700:#1b3a6b;
  --gold-500:#c9a227;
  --gold-400:#dab84f;
  --bg-soft:#f4f6fb;
  --ink-900:#101828;
  --ink-500:#5b6472;
  --ok:#1f8a4c;
  --late:#c0392b;
  --early:#b8860b;
  --radius:14px;
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow-md:0 10px 30px rgba(16,24,40,.10);
}

*{box-sizing:border-box;}
body{
  font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg-soft);
  color:var(--ink-900);
  margin:0;
}

/* ---------- Login & Kiosk (fullscreen) ---------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(1200px 600px at 10% 0%, var(--navy-700), var(--navy-900) 60%);
  padding:20px;
}
.auth-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow-md);
  padding:40px 36px;
  text-align:center;
}
.auth-logo{
  width:76px;height:76px;border-radius:18px;object-fit:cover;
  margin-bottom:14px;background:var(--navy-800);
}
.auth-card h1{font-size:1.35rem;font-weight:700;margin:0 0 4px;color:var(--navy-900);}
.auth-card p.subtitle{color:var(--ink-500);font-size:.9rem;margin-bottom:26px;}
.auth-card .form-control{border-radius:10px;padding:12px 14px;border:1px solid #e3e7ef;}
.auth-card .form-control:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,.15);}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border:none;color:#1a1400;font-weight:600;border-radius:10px;padding:11px 18px;
  transition:.2s;
}
.btn-gold:hover{filter:brightness(1.05);color:#1a1400;}
.btn-navy{background:var(--navy-800);border:none;color:#fff;border-radius:10px;padding:11px 18px;font-weight:600;}
.btn-navy:hover{background:var(--navy-900);color:#fff;}

/* ---------- Kiosk Scan Page ---------- */
.kiosk{
  min-height:100vh;background:linear-gradient(160deg, var(--navy-900), var(--navy-700));
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;
  text-align:center;padding:30px;
}
.kiosk .kiosk-logo{width:64px;height:64px;border-radius:14px;object-fit:cover;margin-bottom:10px;}
.kiosk h1{font-weight:700;letter-spacing:.5px;font-size:1.6rem;margin-bottom:2px;}
.kiosk .clock{font-size:3.2rem;font-weight:700;font-variant-numeric:tabular-nums;margin:18px 0 6px;}
.kiosk .date{color:#c9d3e6;margin-bottom:26px;}
.camera-panel{
  width:min(92vw,420px);margin:0 auto 18px;text-align:center;
}
.camera-frame{
  position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;
  border:2px solid rgba(201,162,39,.65);background:#020914;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.camera-frame video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1);}
.camera-frame canvas{display:none;}
.camera-status{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:10px;
  background:rgba(7,18,35,.82);color:#ffd9d6;font-size:.72rem;backdrop-filter:blur(5px);}
.camera-status.ready{color:#d7f7e4;}
.camera-title{font-size:.82rem;font-weight:700;color:#fff;margin-top:8px;}
.camera-subtitle{font-size:.68rem;color:#aebbd0;margin-top:2px;line-height:1.4;}
.camera-corner{position:absolute;width:24px;height:24px;border-color:#dab84f;z-index:2;}
.camera-corner-tl{top:12px;left:12px;border-top:3px solid;border-left:3px solid;border-radius:6px 0 0 0;}
.camera-corner-tr{top:12px;right:12px;border-top:3px solid;border-right:3px solid;border-radius:0 6px 0 0;}
.camera-corner-bl{bottom:12px;left:12px;border-bottom:3px solid;border-left:3px solid;border-radius:0 0 0 6px;}
.camera-corner-br{bottom:12px;right:12px;border-bottom:3px solid;border-right:3px solid;border-radius:0 0 6px 0;}
.capture-confirm{margin:12px auto 0;display:flex;align-items:center;gap:9px;justify-content:center;color:#cfe9dc;font-size:.72rem;}
.capture-confirm img{width:58px;height:44px;object-fit:cover;border-radius:7px;border:1px solid rgba(255,255,255,.25);}
.camera-error{max-width:430px;}
.scan-ring{
  width:220px;height:220px;border-radius:50%;
  border:4px dashed rgba(201,162,39,.65);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 26px;position:relative;
}
.scan-ring i{font-size:64px;color:var(--gold-400);}
.kiosk-hint{color:#c9d3e6;font-size:.95rem;max-width:420px;}
.kiosk input.hidden-capture{
  position:absolute;opacity:0;height:1px;width:1px;pointer-events:none;
}
.result-card{
  margin-top:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:18px;padding:22px 30px;min-width:320px;backdrop-filter:blur(6px);
  animation:pop .35s ease;
}
@keyframes pop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}
.result-card h2{margin:6px 0;font-size:1.4rem;}
.result-card .kategori{font-weight:700;font-size:1.05rem;padding:4px 14px;border-radius:20px;display:inline-block;margin-top:6px;}
.kategori-ok{background:#1f8a4c;color:#fff;}
.kategori-late{background:#c0392b;color:#fff;}
.kategori-early{background:#b8860b;color:#fff;}
.kategori-error{background:#6b7280;color:#fff;}

/* ---------- Admin Layout ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:250px;flex-shrink:0;background:linear-gradient(180deg, var(--navy-900), var(--navy-800));
  color:#e7ebf3;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{
  display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand img{width:38px;height:38px;border-radius:10px;object-fit:cover;background:#fff2;}
.sidebar .brand .name{font-weight:700;font-size:.95rem;line-height:1.2;}
.sidebar .brand .name small{display:block;font-weight:400;color:#a9b4c7;font-size:.72rem;}
.sidebar nav{padding:14px 10px;}
.sidebar nav .nav-section{
  text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;color:#7c8aa5;margin:16px 12px 6px;
}
.sidebar nav a{
  display:flex;align-items:center;gap:10px;color:#cfd8e8;text-decoration:none;
  padding:10px 12px;border-radius:10px;font-size:.9rem;margin-bottom:2px;
}
.sidebar nav a i{width:18px;text-align:center;color:#9fb0cc;}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar nav a.active{background:var(--gold-500);color:#1a1400;font-weight:600;}
.sidebar nav a.active i{color:#1a1400;}

.main-area{flex:1;min-width:0;}
.topbar{
  background:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:10;
}
.topbar .page-title{font-weight:700;font-size:1.1rem;color:var(--navy-900);}
.topbar .user-chip{display:flex;align-items:center;gap:10px;}
.topbar .user-chip .avatar{
  width:38px;height:38px;border-radius:50%;background:var(--navy-800);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.content-wrap{padding:26px;}

.card-elegant{
  background:#fff;border:none;border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.card-elegant .card-header{
  background:transparent;border-bottom:1px solid #eef1f6;font-weight:700;color:var(--navy-900);
  border-radius:var(--radius) var(--radius) 0 0 !important;padding:16px 20px;
}
.card-elegant .card-body{padding:20px;}

.stat-card{
  border-radius:var(--radius);padding:20px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.stat-card .icon{
  width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:12px;
}
.stat-card .value{font-size:1.7rem;font-weight:700;}
.stat-card .label{font-size:.85rem;opacity:.9;}
.stat-navy{background:linear-gradient(135deg,var(--navy-700),var(--navy-900));}
.stat-gold{background:linear-gradient(135deg,#e0b13a,var(--gold-500));}
.stat-ok{background:linear-gradient(135deg,#2fa968,#1f8a4c);}
.stat-late{background:linear-gradient(135deg,#e0574a,var(--late));}

table.table-elegant{margin-bottom:0;}
table.table-elegant thead th{
  background:#f7f8fb;color:var(--ink-500);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid #eef1f6;padding:12px 14px;white-space:nowrap;
}
table.table-elegant tbody td{padding:12px 14px;vertical-align:middle;font-size:.9rem;border-bottom:1px solid #f1f3f8;}
table.table-elegant tbody tr:hover{background:#fafbfe;}

.badge-status{padding:5px 12px;border-radius:20px;font-size:.76rem;font-weight:600;display:inline-block;}
.badge-ontime{background:#e6f6ec;color:var(--ok);}
.badge-late{background:#fbeaea;color:var(--late);}
.badge-early{background:#fbf1de;color:var(--early);}
.badge-muted{background:#eef0f4;color:var(--ink-500);}

.pill-tipe-siswa{background:#e8f0fe;color:#1a56db;padding:4px 10px;border-radius:8px;font-size:.75rem;font-weight:600;}
.pill-tipe-guru{background:#f3e8fd;color:#7e22ce;padding:4px 10px;border-radius:8px;font-size:.75rem;font-weight:600;}

.attendance-thumb{width:52px;height:40px;object-fit:cover;border-radius:7px;border:1px solid #e3e7ef;display:block;box-shadow:0 2px 5px rgba(16,24,40,.08);}
.attendance-thumb:hover{transform:scale(1.06);}
.btn-icon-sm{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;}

.form-label{font-weight:600;color:var(--navy-900);font-size:.86rem;}
.form-control, .form-select{border-radius:10px;border:1px solid #e3e7ef;padding:10px 12px;}
.form-control:focus, .form-select:focus{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,39,.15);}

.logo-preview{
  width:90px;height:90px;border-radius:14px;object-fit:cover;border:1px solid #e3e7ef;background:#f7f8fb;
}

@media (max-width: 992px){
  .sidebar{position:fixed;left:-260px;z-index:1050;transition:.25s;}
  .sidebar.show{left:0;}
  .content-wrap{padding:16px;}
}