:root{
  --bg:#0F1729; --bg-elevated:#131D33; --surface:#182238; --surface-hi:#1E2A46;
  --border:#2A3752; --text:#EDF1F7; --muted:#8B9AB8; --accent:#F2A93B; --accent-dim:#C98A2A;
  --danger:#E5484D; --success:#34D399; --info:#5B8DEF;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(circle at 15% 0%, #16213D 0%, var(--bg) 45%);
  color:var(--text); font-family:'Inter',Arial,sans-serif; min-height:100vh;
}
h1,h2,h3,.brand{font-family:'Space Grotesk',Arial,sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

.btn{border:1px solid var(--border); background:var(--surface-hi); color:var(--text);
  padding:9px 16px; border-radius:8px; font-size:14px; font-weight:600; transition:.15s; display:inline-block;}
.btn:hover{border-color:var(--accent); background:#243254;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#1A1204;}
.btn-primary:hover{background:#FFC266; border-color:#FFC266;}
.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger);}
.btn-danger:hover{background:var(--danger);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted);}
.btn-ghost:hover{color:var(--text);background:var(--surface-hi);}
.btn-sm{padding:6px 10px;font-size:12.5px;border-radius:6px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-block{width:100%;text-align:center;}

input,select,textarea{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  padding:9px 11px; border-radius:7px; font-size:14px; font-family:inherit; width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
label{font-size:12.5px; color:var(--muted); display:block; margin-bottom:5px; font-weight:600;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px;}
.field{margin-bottom:14px;}

/* ---- Public wrapper ---- */
.public-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.public-card{width:100%; max-width:420px;}
.logo-row{display:flex; align-items:center; gap:10px; margin-bottom:24px; justify-content:center;}
.logo-row .brand{font-size:22px; font-weight:700; letter-spacing:-.02em;}
.public-card .card{padding:26px;}
.public-card h2{margin:0 0 4px; font-size:19px;}
.public-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 20px;}
.divider{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:20px 0;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border);}
.status-msg{padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:14px;}
.status-msg.err{background:rgba(229,72,77,.12); color:#FF9EA1; border:1px solid rgba(229,72,77,.3);}
.status-msg.ok{background:rgba(52,211,153,.12); color:#8FF2CD; border:1px solid rgba(52,211,153,.3);}
.status-msg.warn{background:rgba(242,169,59,.12); color:#FFD08A; border:1px solid rgba(242,169,59,.3);}
.hint{color:var(--muted); font-size:12.5px; line-height:1.5;}

/* ---- Admin shell ---- */
.shell{display:flex; min-height:100vh;}
.sidebar{width:225px; background:var(--bg-elevated); border-right:1px solid var(--border);
  padding:20px 14px; display:flex; flex-direction:column; flex-shrink:0;}
.sidebar .logo-row{justify-content:flex-start; margin:6px 8px 26px;}
.nav-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--muted); font-size:14px; font-weight:600; margin-bottom:2px; border:none; background:none;
  width:100%; text-align:left;}
.nav-item:hover{background:var(--surface-hi); color:var(--text);}
.nav-item.active{background:var(--surface-hi); color:var(--accent);}
.nav-spacer{flex:1;}
.main{flex:1; padding:28px 34px; max-width:1180px;}
.page-title{font-size:23px; margin:0 0 4px;}
.page-sub{color:var(--muted); font-size:14px; margin:0 0 24px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase;
  letter-spacing:.03em; padding:10px 12px; border-bottom:1px solid var(--border);}
td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:10px;}
.table-wrap table{min-width:640px;}

.badge{display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700;}
.badge-hadir{background:rgba(52,211,153,.15); color:var(--success);}
.badge-telat{background:rgba(242,169,59,.15); color:var(--accent);}
.badge-tidak{background:rgba(229,72,77,.15); color:#FF8B8F;}
.badge-belum{background:rgba(139,154,184,.15); color:var(--muted);}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:26px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px;}
.stat-card .n{font-family:'Space Grotesk',Arial,sans-serif; font-size:26px; font-weight:700;}
.stat-card .l{color:var(--muted); font-size:12.5px; margin-top:2px;}

.pattern-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:16px;}
.pattern-col-head{font-size:11.5px; font-weight:700; color:var(--accent); text-align:center; padding-bottom:4px;}
.pattern-cell select{font-size:12.5px; padding:7px 6px;}
.pattern-row-label{grid-column:1/-1; color:var(--muted); font-size:11px; margin:6px 0 0;}

.toolbar{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:18px;}
.toolbar .field{margin-bottom:0; min-width:150px;}
.section-gap{margin-top:30px;}
.flex-between{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.duty-tonight{display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:12px;
  background:linear-gradient(135deg,#22304F,#182238); border:1px solid var(--border); margin-bottom:26px;}
.duty-tonight .name{font-family:'Space Grotesk',Arial,sans-serif; font-size:19px; font-weight:700;}
.duty-tonight .meta{color:var(--muted); font-size:13px; margin-top:2px;}
.empty{color:var(--muted); font-size:13.5px; padding:30px; text-align:center;}
.row-actions{display:flex; gap:6px; flex-wrap:wrap;}
@media(max-width:760px){
  .shell{flex-direction:column;}
  .sidebar{width:100%; flex-direction:row; overflow-x:auto; padding:10px;}
  .sidebar .logo-row{display:none;}
  .nav-item{white-space:nowrap; width:auto;}
  .nav-spacer{display:none;}
  .main{padding:20px 16px;}
}

/* ================= HALAMAN ABSEN — MENU BAR WARNA-WARNI ================= */
.absen-wrap{max-width:460px;margin:0 auto;padding:18px 14px 60px;}
.absen-head{text-align:center;margin-bottom:18px;}
.absen-head .brand{font-size:20px;font-weight:700;}
.absen-info{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;margin-bottom:18px;}
.absen-info .nm{font-family:'Space Grotesk',Arial,sans-serif;font-size:18px;font-weight:700;}
.absen-info .mt{color:var(--muted);font-size:13px;margin-top:3px;}

.menubar{border-radius:14px;margin-bottom:12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 10px rgba(0,0,0,.18);}
.menubar-head{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;color:#fff;font-weight:700;font-size:14.5px;}
.menubar-head .ico{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;}
.menubar-head .lbl{flex:1;}
.menubar-head .chk{width:24px;height:24px;border-radius:99px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.menubar-head .chk.done{background:#fff;color:#1a7a4c;}
.menubar-body{background:var(--surface);padding:16px;display:none;}
.menubar.open .menubar-body{display:block;}
.menubar-head .chevron{transition:.2s;font-size:12px;opacity:.85;}
.menubar.open .chevron{transform:rotate(180deg);}

.mb-rumah .menubar-head{background:linear-gradient(120deg,#3E6FE0,#5B8DEF);}
.mb-depan .menubar-head{background:linear-gradient(120deg,#D98A1F,#F2A93B);}
.mb-tengah .menubar-head{background:linear-gradient(120deg,#1FAE7C,#34D399);}
.mb-belakang .menubar-head{background:linear-gradient(120deg,#7B4FE0,#9B6BF2);}
.mb-buku .menubar-head{background:linear-gradient(120deg,#D6414A,#F2578B);}

.foto-preview{width:100%;aspect-ratio:4/3;background:var(--bg-elevated);border:1px dashed var(--border);
  border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px;color:var(--muted);font-size:13px;}
.foto-preview img{width:100%;height:100%;object-fit:cover;}
.foto-actions{display:flex;gap:8px;}
.foto-actions .btn{flex:1;}
.foto-status{margin-top:10px;font-size:12.5px;}
.foto-status.ok{color:var(--success);font-weight:700;}
.foto-status.pending{color:var(--muted);}
.foto-status.err{color:#FF9EA1;}

.confirm-bar{position:sticky;bottom:0;background:var(--bg);padding:14px 0 4px;margin-top:6px;}