.glass{background:rgba(15,23,42,.78);backdrop-filter:blur(16px)}
.card{border:1px solid rgba(51,65,85,.5);background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.96))}
.modal-bg{background:rgba(0,0,0,.65);backdrop-filter:blur(10px)}
.toggle{width:44px;height:26px;background:#1e293b;border-radius:99px;position:relative;transition:.25s;cursor:pointer;border:1px solid #334155;flex-shrink:0;display:inline-block}
.toggle.on{background:#8b5cf6;border-color:#8b5cf6;box-shadow:0 0 12px rgba(139,92,246,.35)}
.toggle span{width:18px;height:18px;background:#e2e8f0;border-radius:99px;position:absolute;top:3px;left:3px;transition:.25s cubic-bezier(.34,1.56,.64,1);display:block}
.toggle.on span{left:21px;background:#fff}
.sidebar{transition:transform .25s ease}
@media(max-width:1024px){.sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)}}
.req::after{content:" *";color:#f87171;font-weight:700}
.cell-input{width:100%;background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:5px 8px;outline:none;transition:.15s;font-size:11px}
.cell-input:focus{border-color:#8b5cf6;box-shadow:0 0 0 2px rgba(139,92,246,.2)}
::placeholder{color:#64748b}
@keyframes payspin{to{transform:rotate(360deg)}}
.pay-spin{display:inline-block;animation:payspin .7s linear infinite}

.dash-grid > *{min-width:0}
@media(min-width:1024px){
  .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
  #d-trend{grid-column:1 / -1}
  .dash-grid > .card{display:flex;flex-direction:column}
  .dash-grid > .card > div[class*="h-["]{flex:1;min-height:240px}
}
@media(max-width:1023px){
  .dash-grid{display:flex;flex-direction:column;gap:1.5rem}
  #d-performa{order:1}#d-speed{order:2}#d-pct{order:3}#d-pemohon{order:4}#d-kec{order:5}#d-desa{order:6}#d-trend{order:7}
}
#view-dashboard .card,.dash-grid > .card{border-radius:22px!important;padding:24px!important;transition:border-color .18s,transform .18s}
#view-dashboard .dash-grid > .card:hover{border-color:rgba(11,244,200,.25)!important;transform:translateY(-2px)}
#kpiGrid{gap:1.25rem!important}

.text-\[9px\]{font-size:10.5px !important}
.text-\[10px\]{font-size:11.5px !important}
.text-\[11px\]{font-size:12px !important}
.text-\[12px\]{font-size:13px !important}
.text-\[13px\]{font-size:13.5px !important}
.text-\[28px\]{font-size:30px !important}

#view-dashboard h3{font-size:13.5px !important;font-weight:600}
.active-nav{background:rgba(139,92,246,.15)!important;border-color:rgba(139,92,246,.35)!important;color:#c4b5fd!important}
.search-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#0f172a;border:1px solid #334155;border-radius:12px;max-height:240px;overflow:auto;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.search-dropdown div{padding:9px 12px;font-size:12px;cursor:pointer;border-bottom:1px solid rgba(51,65,85,.3)}
.search-dropdown div:last-child{border-bottom:none}
.search-dropdown div:hover{background:#1e293b;color:#e2e8f0}
.sortable{cursor:pointer;user-select:none}
.sortable:hover{color:#e2e8f0}
.sort-arrow{font-size:10px;margin-left:4px;opacity:.6}

.scroll-pr::-webkit-scrollbar { width: 4px; }
.scroll-pr::-webkit-scrollbar-thumb { background: rgba(51,65,85,0.6); border-radius: 4px; }
.scroll-pr::-webkit-scrollbar-track { background: transparent; }

body, input, select, textarea, button{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important}
.font-mono,code,pre,#liveClock{font-family:'Poppins',system-ui,-apple-system,sans-serif !important;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

body{background:#1b1c1c !important}
.card{border:1px solid rgba(60,61,61,.9)!important;background:linear-gradient(145deg,#242525,#1e1f1f)!important;border-radius:18px!important}
.glass{background:rgba(20,21,21,.72)!important;backdrop-filter:blur(18px) saturate(1.2)!important;border-color:rgba(60,61,61,.8)!important}
aside#sidebar{background:#141515!important;border-right:1px solid rgba(60,61,61,.9)!important}
header.glass{background:rgba(20,21,21,.8)!important}
.cell-input,input,select,textarea{background:#1e1f1f!important}
#confirmModal .box{background:linear-gradient(145deg,#2a2b2b,#1e1f1f)!important;border-color:rgba(60,61,61,.9)!important}
.toast{background:rgba(30,31,31,.96)!important}
.toast.success{background:linear-gradient(135deg,rgba(11,244,200,.18),rgba(30,31,31,.97))!important}
.toast.error{background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(30,31,31,.97))!important}
.toast.info{background:linear-gradient(135deg,rgba(242,160,255,.18),rgba(30,31,31,.97))!important}

*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-thumb{background:rgba(80,80,90,.5);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}

@media(max-width:640px){
  button{min-height:38px}
  .card{border-radius:14px!important}
  table{font-size:11px!important}
  h2#pageTitle{font-size:15px!important}
  .kpiA{gap:8px}
  .kpiA-orb{width:44px!important;height:44px!important;font-size:34px!important}
  .kpiA-val{font-size:24px!important}
}

.tab-fade{animation:tabIn .28s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

:root{--neon:#0bf4c8;--neon2:#00d9b4;--neon-soft:rgba(11,244,200,.13);--neon-text:#5cf5da;--accent2:#f2a0ff;--accent3:#fad85d}

.active-nav{background:var(--neon-soft)!important;border-color:rgba(11,244,200,.4)!important;color:var(--neon-text)!important;box-shadow:0 0 14px rgba(11,244,200,.13)}

.text-violet-300,.text-violet-400,.text-violet-200{color:var(--neon-text)!important}
.bg-violet-600{background:linear-gradient(135deg,var(--neon),var(--neon2))!important;color:#00110a!important}
.bg-violet-600:hover,.hover\:bg-violet-500:hover{filter:brightness(1.08)}
.bg-violet-500\/20{background:var(--neon-soft)!important}
.border-violet-500\/35,.border-violet-500\/30{border-color:rgba(11,244,200,.35)!important}
.from-violet-500{--tw-gradient-from:var(--neon)!important}
.to-indigo-600{--tw-gradient-to:var(--neon2)!important}
.ring-violet-500,.focus\:border-violet-500:focus{border-color:var(--neon)!important}
.cell-input:focus{border-color:var(--neon)!important;box-shadow:0 0 0 2px rgba(11,244,200,.2)!important}
.toggle.on{background:var(--neon)!important;border-color:var(--neon)!important;box-shadow:0 0 12px rgba(11,244,200,.4)!important}

.kpi-val{text-shadow:0 0 16px rgba(11,244,200,.2)}

.kpiA{background:linear-gradient(145deg,#242525,#1e1f1f);border:1px solid var(--kc-bd,rgba(60,61,61,.9));position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;display:flex;align-items:center;justify-content:space-between;gap:14px}
.kpiA:hover{transform:translateY(-3px);box-shadow:0 12px 28px var(--kc-sh,rgba(0,0,0,.3))}
.kpiA::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--kc-ac,#0bf4c8)}
.kpiA-body{min-width:0;flex:1}
.kpiA-lab{color:#8c8f8f;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.kpiA-val{font-size:30px;font-weight:800;margin-top:4px;line-height:1.04}
.kpiA-sub{font-size:11.5px;color:#8c8f8f;margin-top:10px}
.kpiA-orb{width:72px;height:72px;flex:none;display:grid;place-items:center;font-size:48px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.4))}
.kpi-c0{--kc-ac:#f2a0ff;--kc-bd:#f2a0ff44;--kc-sh:rgba(242,160,255,.22)}
.kpi-c1{--kc-ac:#0bf4c8;--kc-bd:#0bf4c844;--kc-sh:rgba(11,244,200,.22)}
.kpi-c2{--kc-ac:#fad85d;--kc-bd:#fad85d44;--kc-sh:rgba(250,216,93,.22)}
.kpi-c3{--kc-ac:#c3b1ff;--kc-bd:#c3b1ff44;--kc-sh:rgba(195,177,255,.22)}
.ket-title{text-align:left!important;margin:0!important}
.profile-avatar{background:linear-gradient(135deg,var(--neon),var(--accent2))}
.profile-menu{right:0;top:calc(100% + 8px);width:max-content;min-width:200px;max-width:min(340px,calc(100vw - 32px))}
.break-anywhere{word-break:break-all}
.ket-detail-btn{color:var(--neon-text)}
.cm-ic.danger{background:rgba(244,63,94,.18)}
.cm-ic.normal{background:rgba(139,92,246,.18)}
.empty-option{opacity:.5}
body.modal-open{overflow:hidden}
.legend-c0{background:#0bf4c8}.legend-c1{background:#f2a0ff}.legend-c2{background:#fad85d}.legend-c3{background:#c3b1ff}
.legend-c4{background:#22d3ee}.legend-c5{background:#fb7cae}.legend-c6{background:#5ce0c0}.legend-c7{background:#a78bfa}
body.light .kpiA{background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.06)}
body.light .kpiA-lab,body.light .kpiA-sub{color:#64748b}

*::-webkit-scrollbar-thumb{background:rgba(11,244,200,.3)!important}

@media(min-width:1024px){
  aside#sidebar{transition:width .28s cubic-bezier(.4,0,.2,1)}
  body.rail aside#sidebar{width:74px!important}
  body.rail #mainWrap{padding-left:74px!important}
  #mainWrap{transition:padding-left .28s cubic-bezier(.4,0,.2,1)}
  body.rail aside#sidebar .rail-hide{display:none!important}
  body.rail aside#sidebar nav>button{justify-content:center;gap:0;padding-left:0;padding-right:0}
  body.rail aside#sidebar .p-5{padding:14px 8px!important;justify-content:center}
}

body.nav-open{overflow:hidden;touch-action:none}
body.nav-open aside#sidebar{overflow-y:auto;touch-action:pan-y}
#railToggle{transition:.15s}
#railToggle:hover{background:var(--neon-soft);color:var(--neon-text)}

.chart-wrap{position:relative}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#4a4a52;pointer-events:none}

#toastWrap{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:260px;max-width:360px;padding:13px 16px;border-radius:14px;display:flex;align-items:flex-start;gap:11px;font-size:13px;font-weight:500;color:#e2e8f0;box-shadow:0 12px 40px rgba(0,0,0,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);transform:translateX(120%);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.toast.show{transform:translateX(0);opacity:1}
.toast.success{background:linear-gradient(135deg,rgba(16,185,129,.22),rgba(15,23,42,.95));border-color:rgba(16,185,129,.4)}
.toast.error{background:linear-gradient(135deg,rgba(244,63,94,.22),rgba(15,23,42,.95));border-color:rgba(244,63,94,.4)}
.toast.info{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(15,23,42,.95));border-color:rgba(139,92,246,.4)}
.toast .ic{width:22px;height:22px;flex-shrink:0;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.toast.success .ic{background:rgba(16,185,129,.25);color:#6ee7b7}
.toast.error .ic{background:rgba(244,63,94,.25);color:#fda4af}
.toast.info .ic{background:rgba(139,92,246,.25);color:#c4b5fd}
.toast .msg{flex:1;line-height:1.45;padding-top:1px}
#confirmModal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:20px}
#confirmModal.show{display:flex}
#confirmModal .box{width:100%;max-width:360px;background:linear-gradient(145deg,rgba(30,41,59,.97),rgba(15,23,42,.98));border:1px solid rgba(51,65,85,.6);border-radius:20px;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.6);transform:scale(.92);opacity:0;transition:.25s cubic-bezier(.34,1.56,.64,1)}
#confirmModal.show .box{transform:scale(1);opacity:1}
#confirmModal .cm-ic{width:52px;height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px}
#confirmModal .cm-title{font-size:15px;font-weight:700;text-align:center;color:#f1f5f9;margin-bottom:6px}
#confirmModal .cm-msg{font-size:12.5px;text-align:center;color:#94a3b8;line-height:1.55;margin-bottom:20px}
#confirmModal .cm-btns{display:flex;gap:10px}
#confirmModal .cm-btns button{flex:1;padding:11px;border-radius:12px;font-size:12.5px;font-weight:600;transition:.15s;cursor:pointer}
#confirmModal .cm-cancel{background:rgba(51,65,85,.5);color:#cbd5e1;border:1px solid rgba(71,85,105,.5)}
#confirmModal .cm-cancel:hover{background:rgba(71,85,105,.7)}
#confirmModal .cm-ok{color:#fff;border:none}
#confirmModal .cm-ok.danger{background:linear-gradient(135deg,#f43f5e,#e11d48)}
#confirmModal .cm-ok.danger:hover{filter:brightness(1.1)}
#confirmModal .cm-ok.normal{background:linear-gradient(135deg,#0bf4c8,#00d9b4);color:#00110a}
#confirmModal .cm-ok.normal:hover{filter:brightness(1.1)}

#ketDetailModal{position:fixed;inset:0;z-index:9998;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);padding:20px}
#ketDetailModal.show{display:flex}
#ketDetailModal .box{width:100%;max-width:480px;background:linear-gradient(145deg,#2a2b2b,#1e1f1f);border:1px solid rgba(60,61,61,.9);border-radius:20px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.6);transform:scale(.94);opacity:0;transition:.25s cubic-bezier(.34,1.56,.64,1);max-height:80vh;overflow:auto}
#ketDetailModal.show .box{transform:scale(1);opacity:1}
#ketDetailBody{font-size:13px;line-height:1.6;color:#cbd5e1;white-space:pre-wrap;word-break:break-word}

body.light{background:#eef1f6 !important;color:#1e293b !important}
body.light aside#sidebar{background:#ffffff !important;border-right:1px solid #dfe4ec !important}
body.light header.glass{background:rgba(255,255,255,.9) !important;border-color:#dfe4ec !important}
body.light .glass{background:rgba(255,255,255,.85) !important;border-color:#dfe4ec !important}
body.light .card{background:#ffffff !important;border:1px solid #e2e7f0 !important;box-shadow:0 1px 3px rgba(16,24,40,.06)}
body.light .cell-input,body.light input,body.light select,body.light textarea{background:#f8fafc !important;color:#1e293b !important;border-color:#cbd5e1 !important}
body.light #confirmModal .box,body.light #ketDetailModal .box,body.light #modal .box{background:#ffffff !important;border-color:#e2e7f0 !important}
body.light .toast{background:rgba(255,255,255,.98) !important;color:#1e293b !important;box-shadow:0 10px 30px rgba(16,24,40,.15)}

body.light .text-slate-200,body.light .text-slate-300,body.light .text-slate-100{color:#1e293b !important}
body.light .text-slate-400,body.light .text-slate-500{color:#475569 !important}
body.light .text-slate-600{color:#64748b !important}
body.light h1,body.light h2,body.light h3,body.light label,body.light th,body.light td{color:#1e293b}
body.light #liveClock{background:#e7ebf2 !important;border-color:#d3dae6 !important;color:#475569 !important}
body.light #refreshBtn,body.light #themeToggle{background:#e7ebf2 !important;border-color:#d3dae6 !important;color:#475569 !important}

body.light .border-slate-700,body.light .border-slate-800,body.light .border-slate-600{border-color:#dbe2ec !important}
body.light .bg-slate-800,body.light .bg-slate-800\/80,body.light .bg-slate-800\/40,body.light .bg-slate-800\/60,body.light .bg-slate-900{background:#f1f4f9 !important}
body.light table thead.bg-slate-900,body.light thead.sticky{background:#eef1f6 !important}
body.light tr:hover,body.light .hover\:bg-slate-800\/40:hover,body.light .hover\:bg-slate-800\/30:hover{background:#f4f7fb !important}

body.light{--neon-text:#0f9d58}
body.light .text-violet-300,body.light .text-violet-400,body.light .text-violet-200{color:#0f9d58 !important}
body.light .kpi-val{text-shadow:none !important}
.kpi-total{color:#fff}
body.light .kpi-total{color:#1e293b !important}
body.light .text-sky-300{color:#0369a1 !important}
body.light .text-amber-300{color:#b45309 !important}

body.light #maintenanceControl .bg-amber-600{background:#d97706 !important;color:#fff !important;border:1px solid #b45309}
body.light #maintenanceControl .bg-emerald-600{background:#059669 !important;color:#fff !important}
body.light #maintenanceControl .bg-slate-800\/60{background:#eef1f6 !important}
body.light #maintenanceControl .text-slate-200{color:#1e293b !important}
body.light .active-nav{background:rgba(15,157,88,.1)!important;border-color:rgba(15,157,88,.35)!important;color:#0f9d58 !important}
body.light .search-dropdown{background:#ffffff !important;border-color:#dbe2ec !important;box-shadow:0 10px 30px rgba(16,24,40,.12)}
body.light .search-dropdown div:hover{background:#f1f4f9 !important;color:#1e293b !important}
body.light *::-webkit-scrollbar-thumb{background:rgba(100,116,139,.4)!important}
body.light .es-title{color:#334155}

body.light .bg-white{background:#0f9d58 !important;color:#fff !important}
body.light .bg-white:hover,body.light .hover\:bg-slate-200:hover{background:#0c8a4d !important}

body.light [class*="bg-slate-900"],body.light [class*="bg-slate-800"]{background:#f1f4f9 !important}
body.light .bg-violet-600\/15,body.light .bg-violet-500\/20,body.light .bg-violet-600\/20{background:rgba(15,157,88,.12)!important}

body.light #userEmailBadge{color:#1e293b !important}

body.light .toggle{background:#cbd5e1 !important;border-color:#b6c2d3 !important}
body.light .toggle span{background:#fff !important}

body.light #modal .bg-slate-900\/50{background:#eef1f6 !important}