:root{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --surface-2:#EEF2F7;
  --ink:#131B2E;
  --ink-muted:#5C6B84;
  --accent:#1D5FD6;
  --accent-soft:#E6EDFC;
  --accent-2:#0E9488;
  --line:#DEE4EC;
  --success:#1E8E5A;
  --success-bg:#E4F5EC;
  --warning:#B5790A;
  --warning-bg:#FBF0DD;
  --danger:#C43D3D;
  --danger-bg:#FBE9E9;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "IBM Plex Sans", Arial, sans-serif;
  font-size:14.5px;
}
a{ color:var(--accent); text-decoration:none; }

/* ---------- Shell layout ---------- */
.shell{ display:flex; min-height:100vh; }

.sidebar{
  width:220px; flex-shrink:0; background:var(--surface);
  border-right:1px solid var(--line); padding:20px 0;
}
.sidebar-brand{
  display:flex; align-items:center; gap:8px;
  padding:0 20px 20px; font-weight:700; font-size:1.05rem;
}
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; color:var(--ink-muted); font-size:0.92rem; font-weight:500;
  border-left:3px solid transparent;
}
.sidebar nav a:hover{ background:var(--surface-2); color:var(--ink); }
.sidebar nav a.active{
  background:var(--accent-soft); color:var(--accent); border-left-color:var(--accent);
}

.main{ flex:1; min-width:0; }

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; background:var(--surface); border-bottom:1px solid var(--line);
}
.topbar h1{ font-size:1.15rem; margin:0; }
.topbar .who{ font-size:0.85rem; color:var(--ink-muted); display:flex; align-items:center; gap:12px; }
.topbar .who a{ color:var(--ink-muted); }

.page{ padding:24px 28px; max-width:1200px; }

/* ---------- Cards / KPI ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.kpi-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px;
}
.kpi-card .kpi-label{ font-size:0.78rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; }
.kpi-card .kpi-value{ font-size:1.7rem; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:20px;
}
.card h2{ font-size:1rem; margin:0 0 14px; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
@media (max-width:700px){ .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; } }

label.field{ display:flex; flex-direction:column; gap:6px; font-size:0.85rem; color:var(--ink-muted); }
label.field input, label.field select, label.field textarea{
  font-size:0.92rem; padding:9px 11px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-family:inherit;
}
label.field.checkbox{ flex-direction:row; align-items:center; gap:8px; }

.btn{
  appearance:none; border:none; border-radius:8px; padding:9px 16px;
  font-size:0.9rem; font-weight:600; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-ghost{ background:var(--surface-2); color:var(--ink); }
.btn-sm{ padding:5px 10px; font-size:0.78rem; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table{ width:100%; border-collapse:collapse; font-size:0.87rem; }
thead th{
  text-align:left; padding:10px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-size:0.72rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-muted); white-space:nowrap;
}
tbody td{ padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-2); }

.pill{
  display:inline-block; font-size:0.72rem; font-weight:600; padding:3px 9px;
  border-radius:999px; white-space:nowrap;
}
.pill.hadir, .pill.aktif, .pill.ok{ background:var(--success-bg); color:var(--success); }
.pill.terlambat, .pill.pulang_awal{ background:var(--warning-bg); color:var(--warning); }
.pill.alpha, .pill.nonaktif{ background:var(--danger-bg); color:var(--danger); }
.pill.admin{ background:var(--accent-soft); color:var(--accent); }
.pill.staff{ background:var(--surface-2); color:var(--ink-muted); }

.thumb{
  width:40px; height:40px; border-radius:8px; object-fit:cover; border:1px solid var(--line);
  cursor:pointer; background:var(--surface-2);
}

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:16px; }
.filter-bar label.field{ min-width:150px; }

.alert{ padding:12px 16px; border-radius:10px; font-size:0.88rem; margin-bottom:16px; }
.alert-ok{ background:var(--success-bg); color:var(--success); }
.alert-error{ background:var(--danger-bg); color:var(--danger); }

.muted{ color:var(--ink-muted); }
.empty-state{ padding:30px; text-align:center; color:var(--ink-muted); }

/* ---------- Login page ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:30px 26px; box-shadow:0 8px 30px -14px rgba(19,27,46,.2);
}
.login-box h1{ font-size:1.3rem; margin:0 0 6px; }

/* ---------- Modal (preview foto) ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(19,27,46,.55);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.modal-box{ background:#fff; border-radius:12px; padding:14px; max-width:90vw; }
.modal-box img{ max-width:80vw; max-height:80vh; border-radius:8px; display:block; }
.modal-close{ text-align:right; margin-top:8px; }