*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f4f5f7;color:#222}
.topbar{height:64px;background:#00AEEF;color:#fff;display:flex;align-items:center;padding:0 20px;position:fixed;top:0;left:0;right:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.brand{font-size:34px;font-weight:800;letter-spacing:-2px;margin-right:40px}.userbox{display:flex;flex-direction:column;font-size:13px}.userbox strong{font-size:15px}
.app{display:flex;padding-top:64px;min-height:100vh}.sidebar{width:240px;background:#fff;border-right:1px solid #ddd;position:fixed;top:64px;bottom:0;left:0;overflow:auto}
.sidebar a{display:block;padding:13px 16px;text-decoration:none;color:#111;border-bottom:1px solid #f0f0f0}.sidebar a:hover{background:#E8F8FD;color:#00AEEF}
.menu-title{font-weight:700;padding:12px 14px;background:#eee;border-bottom:1px solid #ddd}.soon{float:right;color:#999;font-size:11px}.sidebar-bottom{margin-top:18px;border-top:5px solid #ddd}
.content{margin-left:240px;padding:18px;width:calc(100% - 240px)}
.card{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.card-header{padding:14px 16px;border-bottom:1px solid #ddd;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:space-between}.card-body{padding:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat{padding:18px;background:#fff;border:1px solid #ddd;border-radius:6px}.stat .num{font-size:28px;font-weight:700;color:#00AEEF}.stat .label{color:#666;margin-top:5px}
.btn{display:inline-block;border:0;border-radius:4px;padding:9px 13px;text-decoration:none;cursor:pointer;font-size:14px}.btn-primary{background:#00AEEF;color:#fff}.btn-secondary{background:#555;color:#fff}.btn-danger{background:#d93636;color:#fff}.btn-light{background:#eee;color:#111}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{margin-bottom:13px}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}.field input,.field select,.searchbar input,.searchbar select{width:100%;padding:9px;border:1px solid #bbb;border-radius:4px;background:#fff}
.searchbar{display:grid;grid-template-columns:2fr 1fr auto auto;gap:8px;margin-bottom:14px}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{border-bottom:1px solid #ddd;padding:9px 10px;text-align:left;white-space:nowrap;font-size:13px}.table th{background:#FFF3A6;color:#333;position:sticky;top:0}.table tr:hover td{background:#F4FCFF}
.alert{padding:11px 13px;border-radius:4px;margin-bottom:14px}.alert-success{background:#e7f7ec;color:#176b32}.alert-error{background:#fde8e8;color:#8b1e1e}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f1f1f1}.login-card{width:360px;background:#fff;border-radius:8px;padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.15)}.login-logo{font-size:42px;color:#00AEEF;font-weight:800;text-align:center;margin-bottom:6px}.muted{color:#777;font-size:13px}.actions{display:flex;gap:6px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.sidebar{width:190px}.content{margin-left:190px;width:calc(100% - 190px)}.form-row{grid-template-columns:1fr}.searchbar{grid-template-columns:1fr}}

/* SITUMAN - tema biru kuning terinspirasi identitas kelistrikan */
.topbar{
    background:linear-gradient(90deg,#00AEEF 0%,#008FCB 100%);
    border-bottom:5px solid #FFD100;
}
.brand{
    color:#FFD100;
    text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.btn-primary{
    background:#00AEEF;
    color:#fff;
}
.btn-primary:hover{
    background:#008FCB;
}
.table th{
    background:#FFF3A6;
    border-bottom:2px solid #00AEEF;
}
.sidebar a:hover{
    background:#E8F8FD;
    color:#007FAF;
}
.stat .num{
    color:#009ED4;
}
.login-logo{
    color:#00AEEF;
}
.login-card{
    border-top:6px solid #FFD100;
}

/* V2.3 Monitoring */
.monitor-table{font-size:12px;white-space:nowrap}
.monitor-table th{padding:7px 6px;text-align:center;vertical-align:middle;border:1px solid #8ea9b8}
.monitor-table td{padding:6px;border:1px solid #cbd5db}
.mh-blue{background:#8fd3f4!important;color:#083b57}
.mh-yellow{background:#ffe96b!important;color:#4d4300}
.mh-green{background:#9be28f!important;color:#174a0d}
.mh-pink{background:#f3a5b7!important;color:#65152a}
.mh-orange{background:#ffc26b!important;color:#603700}
.row-total td{font-weight:700;background:#eaf6fb}
.badge-up{background:#ffd5dc;color:#a40024;padding:3px 7px;border-radius:10px;font-weight:700}
.badge-down{background:#d8f3d2;color:#176b10;padding:3px 7px;border-radius:10px;font-weight:700}
.progress-cell{min-width:100px;font-weight:700}
.progress-low{background:#ffe96b}
.progress-good{background:#b7ecad}
.monitor-scroll{overflow:auto;max-height:72vh;border:1px solid #dbe5ea}
.sticky-first{position:sticky;left:0;background:#fff;z-index:2}
.monitor-table thead th{position:sticky;top:0;z-index:3}


/* V3.3.1 Layout stability */
.app{display:block;padding-top:64px;min-height:100vh}
.content{
  margin-left:240px;
  width:auto;
  min-width:0;
  padding:18px;
  overflow-x:hidden;
}
.content>.card{width:100%;max-width:none}
.monitor-scroll{width:100%;max-width:100%;overflow:auto}
@media(max-width:900px){
  .content{margin-left:190px;width:auto}
}
@media(max-width:650px){
  .sidebar{position:static;width:100%;height:auto}
  .content{margin-left:0;padding:10px}
  .app{display:block}
}