:root{--sidebar-w:250px;--bg:#f3f3f3;--sidebar:#506a88;--sidebar-dark:#0f2b60;--card-border:#d9d9d9;--shadow:0 2px 8px #0000001f}*{box-sizing:border-box}body{background:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}html,body,#root{height:100%;margin:0}.appShell{background:#fff;height:100vh;display:flex;overflow:hidden}.appMain{background:#fff;flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.sidebar{color:#fff;background:#506a88;flex-direction:column;width:250px;height:100vh;display:flex;overflow:hidden}.sidebarBrand{text-align:center;letter-spacing:.2px;padding:28px 18px;font-size:28px;font-weight:900;line-height:1.15}.sidebarDivider{border-top:2px solid #ffffff40;width:100%;margin:10px 0 16px}.brandText{text-align:center;font-weight:800;line-height:1.2}.sidebarNav{padding:14px 0}.navItem{color:#fff;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:14px 16px;font-size:18px;font-weight:700;display:flex}.navItem .navIcon{color:#fff;opacity:.95;place-items:center;width:30px;display:grid}.navItem:hover{background:#0000001f}.navItem.active{background:var(--sidebar-dark)}.navLabel{text-align:left}.topbar{background:#dcdcdc;flex:0 0 64px;justify-content:space-between;align-items:center;height:64px;padding:0 18px;display:flex}.topbarLeft{align-items:center;gap:14px;display:flex}.topbarRight{align-items:center;display:flex;position:relative}.profileBtn{cursor:pointer;background:0 0;border:0;border-radius:10px;padding:0}.profileBtn:hover{background:#0000000f}.profileMenu{z-index:50;background:#fff;border:1px solid #d6d6d6;border-radius:10px;width:210px;position:absolute;top:52px;right:0;overflow:hidden;box-shadow:0 10px 20px #00000026}.profileName{color:#15306f;border-bottom:1px solid #eee;padding:12px 14px;font-weight:900}.logoutBtn{text-align:left;color:#d71919;cursor:pointer;background:0 0;border:0;width:100%;padding:12px 14px;font-weight:900}.logoutBtn:hover{background:#f6f6f6}.topbarTitle{color:#15306f;margin:0;font-size:34px;font-weight:900}.topbarDivider{opacity:.6;background:#7a7a7a;width:2px;height:32px}.topbarRole{color:#0f2b60;font-weight:800}.appContent{background:var(--bg);flex:1;height:calc(100vh - 64px);min-height:0;padding:20px;overflow:hidden}.dashboardWrap{max-width:980px;margin:0 auto}.statRow{justify-content:center;gap:28px;padding:10px 0 18px;display:flex}.statCard{width:260px;box-shadow:var(--shadow);border-radius:6px;padding:14px 16px;position:relative}.statCard.green{background:#18e66a}.statCard.blue{background:#1360ff}.statCardInner{justify-content:space-between;align-items:center;display:flex}.statTitle{color:#fff;text-align:center;margin-bottom:10px;font-size:22px;font-weight:900}.statLeft{flex:1}.statValue{color:#111;font-size:30px;font-weight:900}.statUnit{color:#111;font-size:18px;font-weight:800}.statRight{justify-content:center;align-items:center;gap:10px;width:90px;display:flex;position:relative}.statIcon{color:#111;opacity:.95}.statRight.noIcon{justify-content:flex-end}.activeDot.only{width:22px;height:22px;position:static;box-shadow:0 0 0 4px #33f06f59}.activeDot{background:#33f06f;border-radius:999px;width:18px;height:18px;position:absolute;right:8px;box-shadow:0 0 0 3px #33f06f59}.dashGrid{grid-template-columns:1fr 280px;align-items:start;gap:18px;display:grid}.chartBlock{width:100%}.chartTabs{background:#f6f6f6;border:1px solid #e2b97b;border-radius:6px;margin-bottom:8px;display:inline-flex;overflow:hidden;box-shadow:0 1px 3px #00000014}.chartTab{color:#111;cursor:pointer;background:0 0;border:0;padding:10px 18px;font-size:22px;font-weight:900}.chartTab.active{color:#1f57ff;background:#fff;box-shadow:inset 0 0 0 1px #0000000d}.chartCard{border:1px solid var(--card-border);box-shadow:var(--shadow);background:#fff;border-radius:6px;padding:10px 12px 14px}.chartTitle{text-align:center;margin:6px 0;font-weight:900}.chartArea{grid-template-columns:46px 1fr;gap:10px;height:260px;padding:4px 6px 0;display:grid}.yAxis{color:#7d7d7d;flex-direction:column;justify-content:space-between;font-size:12px;font-weight:700;display:flex}.plot{border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-radius:4px;padding:6px 10px 10px;position:relative;overflow:hidden}.gridLine{background:#eaeaea;height:1px;position:absolute;left:0;right:0}.bars{justify-content:space-between;align-items:stretch;gap:10px;height:100%;padding:0 6px;display:flex}.barGroup{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:8px;height:100%;display:flex}.bar{background:linear-gradient(#52b6ff,#1679c8);border-radius:6px;width:36px;box-shadow:inset 0 -2px #0000001f}.barLabel{color:#6a6a6a;font-size:12px;font-weight:800}.chartFooterSpace{height:6px}.activityCard{border:1px solid var(--card-border);box-shadow:var(--shadow);background:#fff;border-radius:6px;padding:10px 12px}.activityHeader{text-align:center;margin:4px 0 10px;font-weight:900}.activityList{flex-direction:column;gap:10px;display:flex}.activityRow{grid-template-columns:32px 1fr;align-items:center;gap:10px;display:grid}.activityIconWrap{color:#fff;border-radius:999px;place-items:center;width:32px;height:32px;display:grid}.activityIconWrap.orange{background:#f2a23a}.activityIconWrap.blue{background:#2e5bff}.activityIconWrap.green{background:#19e34f}.activityTitle{color:#333;font-size:14px;font-weight:900}.activityTime{color:#777;margin-top:2px;font-size:11px}.actIcon{color:#fff;border-radius:999px;place-items:center;width:26px;height:26px;display:grid}.actIcon.ok{background:#19e34f}.actIcon.basket{background:#f0a23a}.actIcon.tool{background:#5c76ff}.activityFooter{text-align:center;margin-top:10px}.activityLink{color:#1f57ff;font-weight:900;text-decoration:none}.userWrap{flex-direction:column;max-width:980px;height:100%;min-height:0;margin:0 auto;display:flex}.userCard{flex-direction:column;flex:1;min-height:0;display:flex}.userCardTop{flex:none}.userTitle{text-align:center;margin:0;font-size:34px;font-weight:900}.btnAdd{cursor:pointer;color:#fff;background:#22d645;border:0;border-radius:6px;width:44px;height:32px;font-size:28px;font-weight:900;line-height:28px;position:absolute;top:16px;right:16px;box-shadow:0 2px 6px #0000002e}.tableWrap{flex-direction:column;flex:1;min-height:0;display:flex}.userTable{border-collapse:collapse;width:100%;font-size:14px}.userTable thead th{text-align:center;background:#f0f0f0;padding:12px 10px;font-weight:900}.userTable tbody td{text-align:center;color:#444;border-top:1px solid #eee;padding:10px;font-weight:700}.userTable tbody tr:nth-child(2n){background:#fafafa}.userTableScroll{flex:1;min-height:0;overflow-y:auto}.badge{color:#fff;border-radius:999px;padding:6px 18px;font-size:12px;font-weight:900;display:inline-block;box-shadow:0 2px 6px #0000002e}.badge.ok{background:#19e34f}.badge.no{background:#d71919}.btnView{color:#1a66ff;cursor:pointer;background:#dcdcdc;border:1px solid #bdbdbd;border-radius:4px;padding:4px 16px;font-weight:900}.aksi{justify-content:center;gap:10px;display:flex}.iconBtn{cursor:pointer;background:0 0;border:0;padding:2px}.historyWrap{justify-content:center;height:100%;min-height:0;display:flex}.historyCard{flex-direction:column;flex:1;width:920px;min-height:0;display:flex}.historyHeader{flex:none}.historyHeaderTitle{text-align:center;margin:0;font-size:34px;font-weight:900}.historyBody{flex-direction:column;flex:1;min-height:0;display:flex}.historyTableScroll{min-height:0;overflow-y:auto}.historyTable{border-collapse:collapse;width:100%;font-size:14px}.historyTable thead th{text-align:center;z-index:2;background:#f0f0f0;padding:12px 10px;font-size:14px;font-weight:900;position:sticky;top:0}.historyTable tbody td{text-align:center;color:#444;border-top:1px solid #eee;padding:12px 10px;font-weight:700}.historyTable tbody tr:nth-child(2n){background:#f7f7f7}.historyStatus{font-weight:900}.historyEmpty{text-align:center;color:#666;padding:18px 10px;font-weight:800}.historyFooter{text-align:center;margin-top:16px}.monitoringWrap{justify-content:center;height:100%;min-height:0;display:flex}.monitoringCard{flex-direction:column;flex:1;width:920px;min-height:0;display:flex}.monitoringHeader{flex:none}.monitoringHeaderTitle{text-align:center;margin:0;font-size:34px;font-weight:900}.monitoringBody{flex-direction:column;flex:1;min-height:0;display:flex}.monitoringTableScroll{min-height:0;overflow-y:auto}.monitoringTable{border-collapse:collapse;width:100%;font-size:14px}.monitoringTable thead th{z-index:2;background:#f0f0f0;position:sticky;top:0}.monitoringTable tbody tr:nth-child(2n){background:#f7f7f7}.monitoringEmpty{text-align:center;color:#666;padding:18px 10px;font-weight:800}.pill{color:#fff;border-radius:999px;min-width:54px;padding:5px 14px;font-size:12px;font-weight:900;display:inline-block;box-shadow:0 2px 6px #0000002e}.pill.ok{background:#19e34f}.pill.no{background:#d71919}.monitoringFooter{text-align:center;margin-top:16px}.uShell{background:#fff;height:100vh;display:flex;overflow:hidden}.uMain{flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.uSidebar{color:#fff;background:#506a88;flex-direction:column;width:250px;height:100vh;display:flex;overflow:hidden}.uSidebarBrand{text-align:center;letter-spacing:.2px;padding:28px 18px;font-size:28px;font-weight:900;line-height:1.15}.uBrandLine{margin:0;padding:0;display:block}.uSidebarDivider{border-top:2px solid #ffffff40;width:100%;margin:10px 0 16px}.uBrandText{text-align:center;font-size:18px;font-weight:900;line-height:1.2}.uSidebarNav{flex-direction:column;padding:14px 0;display:flex}.uNavItem{color:#fff;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:14px 16px;font-size:18px;font-weight:800;display:flex}.uNavItem:hover{background:#0000001f}.uNavItem.active{background:#0f2b60}.uNavIcon{opacity:.95;place-items:center;width:30px;display:grid}.uTopbar{background:#dcdcdc;flex:0 0 64px;justify-content:space-between;align-items:center;height:64px;padding:0 18px;display:flex}.uTopbarLeft{align-items:center;gap:14px;display:flex}.uTopbarTitle{color:#15306f;margin:0;font-size:34px;font-weight:900}.uTopbarDivider{opacity:.6;background:#7a7a7a;width:2px;height:32px}.uTopbarRole{color:#0f2b60;font-weight:800}.uTopbarRight{align-items:center;display:flex;position:relative}.uProfileBtn{cursor:pointer;background:0 0;border:0;border-radius:10px;padding:0}.uProfileBtn:hover{background:#0000000f}.uProfileMenu{z-index:50;background:#fff;border:1px solid #d6d6d6;border-radius:10px;width:210px;position:absolute;top:52px;right:0;overflow:hidden;box-shadow:0 10px 20px #00000026}.uProfileName{color:#15306f;border-bottom:1px solid #eee;padding:12px 14px;font-weight:900}.uLogoutBtn{text-align:left;color:#d71919;cursor:pointer;background:0 0;border:0;width:100%;padding:12px 14px;font-weight:900}.uLogoutBtn:hover{background:#f6f6f6}.uContent{background:#f3f3f3;flex:1;min-height:0;padding:20px;overflow:auto}.uDashWrap{max-width:1100px;margin:0 auto}.uDashGrid{grid-template-columns:1fr 1fr;align-items:start;gap:18px;display:grid}.uDashBottom{grid-template-columns:1fr 320px;align-items:start;gap:18px;margin-top:18px;display:grid}.uChartCard{background:#fff;border:1px solid #d9d9d9;border-radius:6px;padding:10px 12px 12px;box-shadow:0 2px 8px #0000001f}.uChartTitle{text-align:center;margin:4px 0 10px;font-weight:900}.uChartSvgWrap{width:100%;height:180px}.uRuleLines{flex-direction:column;gap:6px;padding:6px 2px 2px;display:flex}.uRuleLine{color:#333;font-size:13px;font-weight:800;line-height:1.35}.uFuzzyResultCard{background:#fff;border:1px solid #d9d9d9;border-radius:6px;padding:12px 14px;box-shadow:0 2px 8px #0000001f}.uFuzzyTitle{text-align:center;margin-bottom:10px;font-weight:900}.uFuzzyRow{color:#333;justify-content:space-between;padding:6px 0;font-weight:800;display:flex}.uFuzzyLabel{color:#555}.uFuzzyValue{color:#111}.uFuzzyActions{justify-content:space-between;gap:10px;margin-top:10px;display:flex}.uFuzzyAction{text-align:center;background:#f6f6f6;border:1px solid #e2e2e2;border-radius:6px;flex:1;padding:8px}.uFuzzyActionLabel{color:#333;margin-bottom:6px;font-weight:900}.uPill{color:#fff;border-radius:999px;min-width:54px;padding:6px 14px;font-weight:900;display:inline-block;box-shadow:0 2px 6px #0000002e}.uPill.on{background:#19e34f}.uPill.off{background:#d71919}@media (max-width:980px){.uDashGrid,.uDashBottom{grid-template-columns:1fr}.uChartSvgWrap{height:160px}}.hamburgerBtn{color:#15306f;cursor:pointer;background:0 0;border:none;margin-right:14px;padding:0;display:none}.closeBtn{color:#fff;position:absolute;top:16px;right:16px}@media (max-width:1024px){.historyCard,.monitoringCard{width:100%}}@media (max-width:768px){.hamburgerBtn{align-items:center;display:flex}.sidebar,.uSidebar{z-index:999;width:250px;height:100vh;transition:left .3s ease-in-out;position:fixed;top:0;left:-300px;box-shadow:4px 0 15px #0000004d}.sidebar.open,.uSidebar.open{left:0}.sidebarBackdrop{z-index:998;opacity:0;visibility:hidden;background:#0009;transition:opacity .3s ease-in-out;position:fixed;inset:0}.sidebarBackdrop.open{opacity:1;visibility:visible}.topbarTitle,.uTopbarTitle{font-size:20px}.topbarRole,.uTopbarRole,.topbarDivider,.uTopbarDivider{display:none}.statRow{flex-direction:column;gap:12px}.statCard{width:100%}.dashGrid,.uDashGrid,.uDashBottom{grid-template-columns:1fr}.userTableScroll,.historyTableScroll,.monitoringTableScroll{max-width:100vw;overflow-x:auto}.uChartSvgWrap{height:160px}}.loginScreen{background:#f3f0ea;place-items:center;min-height:100vh;display:grid}.loginCard{background:#4f6787;border-radius:26px;flex-direction:column;align-items:center;width:520px;height:360px;padding:34px 48px 28px;display:flex;box-shadow:0 10px 22px #00000038}.loginTitle{color:#fff;letter-spacing:.2px;margin:4px 0 26px;font-size:54px;font-weight:900}.loginForm{flex-direction:column;align-items:center;gap:18px;width:100%;display:flex}.loginRow{grid-template-columns:44px 1fr;align-items:center;column-gap:14px;width:360px;display:grid}.loginIcon{color:#fff;place-items:center;display:grid}.loginInput{color:#fff;background:#ffffff0f;border:1.6px solid #9b8cff;border-radius:6px;outline:none;height:42px;padding:0 14px;font-size:16px}.loginInput::placeholder{color:#caaeff;font-weight:700}.loginBtn{color:#3c2a85;cursor:pointer;background:#efeff7;border:0;border-radius:10px;height:44px;margin-top:10px;padding:0 28px;font-size:16px;font-weight:900;box-shadow:0 6px 12px #00000038}.loginBtn:active{transform:translateY(1px);box-shadow:0 4px 9px #0003}@media (max-width:600px){.loginCard{width:90%;height:auto;padding:34px 24px}.loginRow{grid-template-columns:36px 1fr;width:100%}.loginTitle{font-size:38px}}*{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif}body{background:#f5f6fa}html,body,#root{height:100%}.app{height:100%;display:flex}.main{flex-direction:column;flex:1;display:flex}.sidebar{color:#fff;background:#3c5874;width:260px;height:100vh;padding:25px 15px}.sidebar h2{text-align:center;margin-bottom:20px;font-size:22px;font-weight:700}.sidebar .divider{opacity:.6;background:#fff;width:100%;height:2px;margin-bottom:20px}.menu a{text-decoration:none}.menu-item{color:#fff;border-radius:10px;align-items:center;gap:14px;margin-bottom:12px;padding:14px 18px;font-size:16px;display:flex}.menu-icon{min-width:22px;font-size:20px}.menu-item.active{background:#1e3a5f}.menu a:visited,.menu a:link,.menu a:hover{color:#fff}.content{flex:1;padding:20px 30px}.header{justify-content:space-between;margin-bottom:20px;display:flex}.topbar{background:#e9ecef;border-bottom:1px solid #d0d0d0;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex}.topbar-left{align-items:center;gap:12px;display:flex}.topbar-title{color:#0f172a;font-size:28px;font-weight:700}.topbar-divider{color:#6b7280;font-size:24px}.topbar-role{color:#6b7280;font-size:14px}.topbar-profile{font-size:32px}icon profile kanan .profile-icon{color:#475569;cursor:pointer;font-size:34px}.cards{gap:20px;margin-bottom:20px;display:flex}.card{color:#fff;border-radius:10px;flex:1;justify-content:space-between;padding:20px;display:flex}.green{background:#27e56c}.blue{background:#1e6bff}.main-grid{grid-template-columns:3fr 1fr;gap:20px;display:grid}.chart-card,.activity{background:#fff;border-radius:10px;padding:20px}.tabs{gap:10px;margin-bottom:10px;display:flex}.tabs button{background:#eee;border:none;border-radius:6px;padding:8px 15px}.tabs .active{background:#fff;border:1px solid #ddd}.user-card{background:#fff;border-radius:10px;padding:20px}.user-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.add-btn{color:#fff;cursor:pointer;background:#18d84f;border:none;border-radius:8px;padding:10px 15px;font-size:20px}table{border-collapse:collapse;width:100%}th,td{text-align:center;padding:12px}thead{background:#f3f3f3}tbody tr:nth-child(2n){background:#fafafa}.status{color:#fff;border-radius:20px;padding:6px 15px;font-weight:700}.aktif{background:#1be65d}.nonaktif{background:#d12b2b}.lihat{background:#ddd;border:none;border-radius:6px;padding:5px 15px}.aksi span{cursor:pointer;margin:0 5px;font-size:18px}