*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f7fb;color:#172033}.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#102a43;color:white;padding:24px 14px;display:flex;flex-direction:column}.brand{font-size:20px;font-weight:800;padding:10px 12px 25px}.sidebar nav{display:grid;gap:6px}.sidebar a{color:#dbeafe;text-decoration:none;padding:12px;border-radius:10px}.sidebar a:hover{background:#1d4ed8;color:white}.logout{margin-top:auto;background:#173b5c}.main{margin-left:240px;padding:24px;min-height:100vh}.top{background:white;border-radius:14px;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;box-shadow:0 2px 10px #0000000a}.top small{display:block;color:#64748b;margin-top:3px}.alert{padding:12px 15px;border-radius:10px;margin-bottom:15px}.success{background:#dcfce7;color:#166534}.error{background:#fee2e2;color:#991b1b}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:white;border-radius:14px;padding:20px;box-shadow:0 2px 10px #0000000a}.stat b{font-size:28px;display:block;margin-top:8px}.muted{color:#64748b}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:15px}.toolbar form{display:flex;gap:8px;flex-wrap:wrap}input,select,textarea{border:1px solid #d7dee8;border-radius:8px;padding:10px;background:white;font:inherit}button,.btn{border:0;border-radius:8px;padding:10px 14px;background:#2563eb;color:white;text-decoration:none;cursor:pointer;display:inline-block}.btn.secondary{background:#475569}.btn.green{background:#16a34a}.btn.red{background:#dc2626}.btn.light{background:#e2e8f0;color:#172033}.tablewrap{overflow:auto;background:white;border-radius:14px}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px 12px;border-bottom:1px solid #edf0f4;text-align:left;white-space:nowrap}.table th{background:#f8fafc}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:grid;gap:6px}.full{grid-column:1/-1}.actions{display:flex;gap:7px}.qr{width:90px;height:90px}.loginbody{min-height:100vh;display:grid;place-items:center;background:#102a43}.login{width:min(420px,92vw);background:white;padding:30px;border-radius:18px}.login h1{margin-top:0}.login .field{margin:12px 0}.login button{width:100%}.scanner{max-width:650px;margin:auto}.reader{background:#111;border-radius:14px;overflow:hidden;min-height:320px}.result{margin-top:15px;font-size:18px}.printhead{display:none}.filters{display:flex;gap:10px;flex-wrap:wrap}.badge{padding:5px 9px;border-radius:999px;font-size:12px;background:#e2e8f0}.hadir{background:#dcfce7;color:#166534}.izin{background:#fef3c7;color:#92400e}.sakit{background:#dbeafe;color:#1d4ed8}.alpa{background:#fee2e2;color:#991b1b}@media(max-width:900px){.sidebar{width:70px}.brand span,.sidebar nav a,.logout{font-size:0}.sidebar nav a:first-letter,.logout:first-letter{font-size:18px}.main{margin-left:70px}.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.main{padding:12px}.grid,.formgrid{grid-template-columns:1fr}.top{font-size:13px}.table{font-size:13px}}
@media print{.sidebar,.top,.no-print,.alert{display:none!important}.main{margin:0;padding:0}.printhead{display:block;text-align:center;margin-bottom:20px}.card,.tablewrap{box-shadow:none}.table th,.table td{border:1px solid #bbb}}