:root{
  --bg:#14181a;
  --panel:#1c2225;
  --panel-2:#232a2d;
  --line:#343c40;
  --ink:#eee7d8;
  --ink-dim:#a9a89c;
  --paper:#eee6d3;
  --paper-ink:#1c1a16;
  --accent:#f2b705;
  --accent-ink:#14181a;
  --good:#5c8a4a;
  --warn:#c1440e;
  --bad:#8a3324;
  --radius:2px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.45;
  min-height:100vh;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:600;
  margin:0 0 .5em;
  color:var(--ink);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---- topbar ---- */
.topbar{
  display:flex;align-items:center;gap:24px;
  background:var(--panel);
  border-bottom:3px solid var(--accent);
  padding:0 20px;
  height:56px;
}
.brand{
  font-family:'Oswald',sans-serif;
  font-weight:700;font-size:1.05rem;letter-spacing:.06em;
  color:var(--ink);
}
.brand span{color:var(--accent)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.nav a{
  color:var(--ink-dim);
  padding:8px 12px;
  font-size:.86rem;
  font-weight:500;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.logout-form{display:flex;align-items:center;gap:10px}
.whoami{color:var(--ink-dim);font-size:.82rem}
.logout-form button{
  background:none;border:1px solid var(--line);color:var(--ink-dim);
  padding:6px 12px;font-size:.8rem;cursor:pointer;border-radius:var(--radius);
}
.logout-form button:hover{border-color:var(--accent);color:var(--accent)}

/* ---- layout ---- */
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
.wrap-narrow{max-width:420px;margin:0 auto;padding:28px 20px 60px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:20px;border-bottom:1px solid var(--line);padding-bottom:14px}
.page-head p{color:var(--ink-dim);margin:4px 0 0;font-size:.9rem}
.actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---- cards / stat blocks ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:28px}
.stat{
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:16px 18px;border-radius:var(--radius);
}
.stat .num{font-family:'IBM Plex Mono',monospace;font-size:1.6rem;font-weight:600;color:var(--ink)}
.stat .label{color:var(--ink-dim);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px}

/* ---- forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.82rem;color:var(--ink-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;border-radius:var(--radius);font-size:.95rem;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checkbox-row{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.checkbox-row input{width:auto}
.checkbox-row label{margin:0;text-transform:none;color:var(--ink)}
.hint{color:var(--ink-dim);font-size:.8rem;margin-top:6px}

button,.btn{
  display:inline-block;
  background:var(--accent);color:var(--accent-ink);
  border:none;padding:11px 20px;font-weight:600;font-size:.9rem;
  cursor:pointer;border-radius:var(--radius);font-family:'Inter',sans-serif;
  text-transform:uppercase;letter-spacing:.03em;
}
button:hover,.btn:hover{opacity:.9;text-decoration:none}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-danger{background:var(--bad);color:var(--ink)}
.btn-sm{padding:6px 12px;font-size:.78rem}

.error-msg{background:rgba(138,51,36,.2);border:1px solid var(--bad);color:#f0c5bb;padding:12px 14px;border-radius:var(--radius);margin-bottom:18px;font-size:.9rem}
.info-msg{background:rgba(92,138,74,.18);border:1px solid var(--good);color:#cfe4c4;padding:12px 14px;border-radius:var(--radius);margin-bottom:18px;font-size:.9rem}

/* ---- ledger tables ---- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{
  text-align:left;font-family:'Oswald',sans-serif;font-weight:600;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim);
  border-bottom:2px solid var(--accent);padding:10px 12px;
}
tbody td{padding:11px 12px;border-bottom:1px solid var(--line)}
tbody tr:hover{background:var(--panel-2)}
td.num,th.num{font-family:'IBM Plex Mono',monospace;text-align:right}
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.table-wrap table{margin:0}

/* ---- badges ---- */
.badge{
  display:inline-block;padding:3px 9px;border-radius:var(--radius);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
.badge-hadir{background:rgba(92,138,74,.22);color:#a9d497}
.badge-izin,.badge-sakit{background:rgba(242,183,5,.18);color:var(--accent)}
.badge-alpha{background:rgba(138,51,36,.22);color:#f0a08c}
.badge-libur{background:rgba(169,168,156,.18);color:var(--ink-dim)}
.badge-aktif{background:rgba(92,138,74,.22);color:#a9d497}
.badge-nonaktif{background:rgba(169,168,156,.18);color:var(--ink-dim)}
.badge-pending{background:rgba(242,183,5,.18);color:var(--accent)}
.badge-dibayar{background:rgba(92,138,74,.22);color:#a9d497}

/* ---- auth pages ---- */
.auth-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(var(--bg),var(--bg)),
    repeating-linear-gradient(45deg, rgba(242,183,5,.05) 0 10px, transparent 10px 20px);
  padding:20px;
}
.auth-card{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-top:4px solid var(--accent);border-radius:var(--radius);padding:32px 30px;
}
.auth-card h1{font-size:1.3rem;margin-bottom:4px}
.auth-card .sub{color:var(--ink-dim);font-size:.85rem;margin-bottom:24px}
.auth-links{margin-top:18px;font-size:.85rem;color:var(--ink-dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

.empty{padding:40px 20px;text-align:center;color:var(--ink-dim)}

@media (max-width:640px){
  .topbar{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  .nav{order:3;width:100%}
  .field-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
}