:root{--blue:#0d6efd;--navy:#073b78;--yellow:#ffd43b;--soft:#eef7ff;--line:#cfe8ff}*{box-sizing:border-box}body{margin:0;font-family:Tahoma,Arial,sans-serif;background:var(--soft);color:#102a43;font-size:13px}.login-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eaf6ff,#fff7cf)}.login-card{width:380px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 35px #0d6efd22;padding:26px}.brand{font-weight:800;color:var(--navy);font-size:22px}.btn-yellow{background:var(--yellow);border-color:#f0c400;color:#172554;font-weight:700}.app{display:flex;min-height:100vh}.sidebar{width:255px;background:linear-gradient(180deg,#083c7a,#062a55);color:#fff;position:fixed;inset:0 auto 0 0}.side-head{padding:18px;border-bottom:1px solid #ffffff22}.side-logo{display:flex;gap:10px;align-items:center;font-weight:800}.logo-box{width:38px;height:38px;border-radius:10px;background:var(--yellow);color:#073b78;display:grid;place-items:center}.menu{padding:12px}.menu a,.menu button{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:0;border-radius:8px;background:transparent;color:#eaf4ff;text-decoration:none;font-weight:600;text-align:left}.menu a:hover,.menu button:hover,.menu .active{background:#ffffff18;color:var(--yellow)}.submenu{margin:4px 0 8px 25px;border-left:1px solid #ffffff25}.submenu a{font-size:12px;padding:9px 12px}.main{margin-left:255px;width:calc(100% - 255px)}.topbar{height:62px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;box-shadow:0 2px 10px #0d6efd12}.content{padding:20px}.page-title{font-size:20px;font-weight:800;color:#073b78}.card-erp{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 5px 18px #0d6efd12;margin-bottom:16px}.card-head{background:linear-gradient(90deg,var(--blue),#25a8ff);color:#fff;border-radius:10px 10px 0 0;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:800}.card-body{padding:16px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:0 5px 15px #0d6efd12}.stat b{font-size:24px;color:#073b78}.form-control,.form-select{border:1px solid #b9d7ef;border-radius:4px;font-size:13px}.form-label{font-weight:700;color:#123b64;margin-bottom:4px}.table{font-size:13px}.table thead th{background:#e8f5ff;color:#073b78;border-bottom:2px solid #badfff}.badge-aktif{background:#d1fae5;color:#065f46}.badge-non{background:#fee2e2;color:#991b1b}.btn{border-radius:5px;font-size:13px}.required{color:red}.invalid-msg{color:#dc2626;font-size:12px;margin-top:3px}.close-x{color:#fff;text-decoration:none;border:1px solid #ffffff77;width:28px;height:28px;border-radius:6px;display:grid;place-items:center}@media(max-width:850px){.sidebar{position:relative;width:100%;height:auto}.app{display:block}.main{margin-left:0;width:100%}}