:root{
  --ink:#14213d; --navy:#0f2a4a; --teal:#0f766e; --teal-2:#14b8a6; --paper:#f5f7fa; --line:#e3e8ef; --muted:#64748b;
  --wa:#25d366;
}
body{background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.94rem}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;height:56px;padding:0 16px;background:var(--navy);color:#fff}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:8px}
.brand small{font-weight:400;color:#9fb3c8;font-size:.8rem}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--teal-2);color:var(--navy);font-size:.8rem;font-weight:800}
.periode-select{min-width:170px}
.shell{display:flex;min-height:calc(100vh - 56px)}
.sidenav{width:220px;flex:0 0 220px;background:#fff;border-right:1px solid var(--line);padding:12px 8px;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto}
.sidenav a{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;color:#334155;text-decoration:none;margin-bottom:2px}
.sidenav a:hover{background:#f1f5f9}
.sidenav a.active{background:#e6f4f2;color:var(--teal);font-weight:600}
.sidenav-foot{font-size:.78rem;color:var(--muted);padding:16px 12px 4px;border-top:1px solid var(--line);margin-top:12px}
.content{flex:1;min-width:0;padding:22px 24px 60px}
.shell-guest .content{max-width:420px;margin:8vh auto}
@media (max-width:991px){
  .sidenav{position:fixed;left:-240px;top:56px;z-index:40;transition:left .2s;box-shadow:0 10px 30px rgba(0,0,0,.15)}
  body.nav-open .sidenav{left:0}
  .content{padding:16px}
}
.page-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.page-title h1{font-size:1.35rem;font-weight:700;margin:0}
.page-title .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.card{border:1px solid var(--line);border-radius:12px;box-shadow:none}
.card-header{background:#fff;font-weight:600;border-bottom:1px solid var(--line)}
.stat{padding:16px 18px}
.stat .lbl{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat .val{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums}
.stat .sub{font-size:.8rem;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:#475569;background:#f8fafc;vertical-align:bottom}
.badge-soft{background:#eef2f7;color:#334155;font-weight:500}
.btn-wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn-wa:hover{background:#1ebe5b;color:#fff}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty i{font-size:2.5rem;color:var(--teal)}

/* Grid input gaji ala spreadsheet */
.grid-wrap{overflow:auto;max-height:calc(100vh - 230px);border:1px solid var(--line);border-radius:10px;background:#fff}
.grid{border-collapse:separate;border-spacing:0;font-size:.85rem}
.grid th,.grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0}
.grid thead th{position:sticky;top:0;z-index:3;background:#f1f5f9;padding:6px 8px;font-size:.72rem;text-transform:uppercase;min-width:96px;max-width:120px;white-space:normal;line-height:1.2}
.grid .sticky-col{position:sticky;left:0;z-index:2;background:#fff;min-width:210px;padding:4px 8px}
.grid thead .sticky-col{z-index:4;background:#f1f5f9}
.grid input{width:100%;min-width:96px;border:0;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums;background:transparent}
.grid input:focus{outline:2px solid var(--teal-2);background:#f0fdfa}
.grid td.changed input{background:#fff7d6}
.grid td.calc{padding:6px 8px;text-align:right;font-weight:600;background:#f8fafc;white-space:nowrap}
.grid tr.warn td.calc.bersih{color:#b45309}
.grid tr.bad td.calc.bersih{color:#dc2626;background:#fef2f2}
.grid tfoot td{position:sticky;bottom:0;background:#e2e8f0;font-weight:700;padding:6px 8px;text-align:right;z-index:2}
.grid tfoot td.sticky-col{z-index:4;text-align:left}
.nip{font-size:.72rem;color:var(--muted)}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}

/* Status WA */
.st-belum{color:var(--muted)} .st-terkirim{color:#0369a1} .st-dibuka{color:#15803d} .st-gagal{color:#dc2626}
@media (max-width:575px){
  .brand small{display:none}
  .periode-select{min-width:0;width:150px}
  .stat .val{font-size:1.05rem;word-break:keep-all}
  .stat{padding:12px}
}