:root { --sb: #1e293b; --pr: #2563eb; --bg: #f1f5f9; }
* { box-sizing: border-box; }
body { background: var(--bg); font-family: 'Segoe UI', system-ui, sans-serif; margin: 0; }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#1e293b 0%,#2563eb 100%); }
.login-box { background:white; border-radius:16px; padding:2.5rem; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:1.5rem; }
.login-logo i { font-size:2.8rem; color:var(--pr); }
.login-logo h1 { font-size:1.9rem; font-weight:800; color:#1e293b; margin:0; letter-spacing:2px; }
.login-logo p { color:#64748b; font-size:.8rem; letter-spacing:3px; margin:0; }

.app-layout { display:flex; min-height:100vh; }
.sidebar { width:240px; min-height:100vh; background:var(--sb); color:#cbd5e1; display:flex; flex-direction:column; padding:1.25rem 1rem; position:sticky; top:0; flex-shrink:0; overflow-y:auto; }
.sidebar-brand { display:flex; align-items:center; gap:.65rem; font-size:1.2rem; font-weight:800; color:white; letter-spacing:1px; }
.sidebar-brand i { color:var(--pr); font-size:1.4rem; }
.sidebar-sub { font-size:.6rem; letter-spacing:3px; color:#475569; margin-top:2px; margin-left:2rem; }
.divider { border-color:#334155; margin:.85rem 0; }
.side-nav { list-style:none; padding:0; margin:0; flex:1; }
.side-nav li { margin-bottom:3px; }
.side-link { display:flex; align-items:center; gap:.65rem; padding:.55rem .75rem; color:#94a3b8; text-decoration:none; border-radius:8px; transition:all .2s; font-size:.88rem; }
.side-link:hover { background:rgba(37,99,235,.15); color:white; }
.side-link.active { background:var(--pr); color:white; }
.sidebar-foot { border-top:1px solid #334155; padding-top:.85rem; }
.side-user { display:flex; align-items:center; gap:.65rem; font-size:.85rem; color:white; margin-bottom:.5rem; }
.side-user i { font-size:1.4rem; color:#64748b; }

.main-area { flex:1; padding:1.5rem; min-height:100vh; }
.sec { animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.sec-head h2 { font-size:1.3rem; font-weight:700; color:#1e293b; margin:0; }

.rekap-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.85rem; }
.rkap-card { background:white; border-radius:12px; padding:.85rem 1rem; box-shadow:0 1px 4px rgba(0,0,0,.07); }
.rkap-lbl { font-size:.72rem; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.rkap-val { font-size:1.7rem; font-weight:800; color:#1e293b; }

.badge-aktif { background:#dcfce7!important; color:#16a34a!important; }
.badge-pasif { background:#fef3c7!important; color:#d97706!important; }
.badge-unres { background:#fee2e2!important; color:#dc2626!important; }
.badge-nonaktif { background:#f1f5f9!important; color:#64748b!important; }

.table th { font-size:.78rem; text-transform:uppercase; color:#64748b; font-weight:700; border-top:none; white-space:nowrap; }
.table td { vertical-align:middle; font-size:.88rem; }

.mob-toggle { position:fixed; top:1rem; left:1rem; z-index:999; display:none; }

@media(max-width:768px) {
  .sidebar { position:fixed; left:-250px; z-index:1000; transition:left .25s; height:100vh; }
  .sidebar.open { left:0; }
  .main-area { padding:1rem; padding-top:3.5rem; }
  .mob-toggle { display:block!important; }
}