/* =====================================================================
   Lestari Cyber-Enterprise Telemetry — tema Task Tracker (dimuat SETELAH ui.css).
   Navy samudra + cyan listrik, glassmorphism, hairline 1px, Plus Jakarta Sans + Inter.
   Hanya tampilan. Gelap saja (sesuai DESIGN.md). Hapus <link href="lux.css"> untuk kembali ke tampilan polos.
   ===================================================================== */
:root,html[data-theme=light],html[data-theme=dark]{
  color-scheme:dark;
  --s1:#08334a;--s2:#052536;--s3:#031a27;--hl:#e6f6ff;--g1:#33bbff;--g2:#00aaff;--g3:#0088cc;--ongold:#052536;--ks:1;
  --serif:"Plus Jakarta Sans",Inter,ui-sans-serif,system-ui,sans-serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bg:#052536;--card:#08334a;--card-glass:rgba(8,51,74,.55);--card2:#0b415e;
  --ink:#fff;--mut:#9ba8af;--faint:#8c9aa3;--body:#cdd3d7;
  --line:rgba(205,211,215,.13);--line2:rgba(205,211,215,.07);--hov:rgba(11,65,94,.5);
  --side:#052536;--cyp:#08334a;
  --acc:#00aaff;--acc2:#33bbff;--accbg:rgba(0,170,255,.14);--ring:rgba(0,170,255,.32);
  --gold:#00aaff;--gold2:#33bbff;
  --ok:#00e5a3;--okbg:rgba(0,229,163,.11);--warn:#ffb020;--warnbg:rgba(255,176,32,.11);--bad:#ff5c73;--badbg:rgba(255,59,86,.13);
  --info:#4cc3ff;--infobg:rgba(0,170,255,.13);--pur:#b9a6ff;--purbg:rgba(150,120,255,.15);--gry:#cdd3d7;--grybg:rgba(205,211,215,.1);
  --sline:rgba(0,170,255,.16);
  --sh:0 1px 0 rgba(0,170,255,.18) inset,0 10px 30px -14px rgba(0,0,0,.55);
  --sh2:0 0 32px -4px rgba(0,170,255,.18),0 30px 80px -10px rgba(0,0,0,.7);
  --r:8px;
}
html[data-co=AMG]{--g1:#5dffc9;--g2:#00e5a3;--g3:#00b383;--acc:#00e5a3;--acc2:#5dffc9;--accbg:rgba(0,229,163,.13);--ring:rgba(0,229,163,.3);--gold:#00e5a3;--gold2:#5dffc9;--sline:rgba(0,229,163,.18)}

html,body{background:var(--bg)}
body{font:14px/1.55 var(--sans);letter-spacing:0;color:var(--body);font-feature-settings:"tnum","kern";
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 380px at 88% -140px,rgba(0,170,255,.16),transparent 70%),
    linear-gradient(rgba(0,170,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,170,255,.035) 1px,transparent 1px);
  background-size:auto,48px 48px,48px 48px;background-attachment:fixed}
::selection{background:rgba(0,170,255,.4);color:#fff}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(0,170,255,.22);border-radius:6px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:transparent}

/* ===================== SIDEBAR ===================== */
#side{background:rgba(8,51,74,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-right:1px solid var(--line);width:264px;padding:18px 14px;gap:12px;color:var(--body);position:sticky;box-shadow:none}
#side::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(0,170,255,.5),rgba(0,170,255,.04) 60%,transparent)}
.brand{padding:6px 8px 14px;gap:12px;font:700 16px/1.1 var(--serif);letter-spacing:-.01em;color:#fff;border-bottom:1px solid var(--line);margin-bottom:4px}
.brand i{width:30px;height:30px;border-radius:6px;flex:none;position:relative;background:rgba(0,170,255,.14);border:1px solid rgba(0,170,255,.5);box-shadow:0 0 14px rgba(0,170,255,.35),inset 0 0 10px rgba(0,170,255,.2)}
.brand i::after{content:"T";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 15px var(--serif);color:var(--g1)}
.srch{background:rgba(5,37,54,.8);border:1px solid var(--line);color:var(--mut);border-radius:4px;padding:8px 11px}
.srch:hover{border-color:rgba(0,170,255,.55);color:var(--body)}
#side kbd{background:rgba(0,170,255,.1);border:1px solid var(--sline);color:var(--g1);border-radius:3px}
#tabs{gap:2px;margin:8px 0}
.tab{background:transparent;font-family:inherit;width:100%;text-align:left;color:var(--body);padding:9px 12px;border-radius:4px;font-weight:500;font-size:14px;position:relative;transition:background .15s,color .15s;border:1px solid transparent}
.tab svg{stroke-width:1.6;opacity:.85}
.tab:hover{background:rgba(8,51,74,.7);color:#fff}
.tab.on{background:rgba(0,170,255,.12);border-color:rgba(0,170,255,.32);color:#fff;font-weight:600;box-shadow:inset 0 0 12px rgba(0,170,255,.12)}
.tab.on::before{content:"";position:absolute;left:-15px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--g2);box-shadow:0 0 10px var(--g2)}
.tab.on svg{stroke:var(--g2);opacity:1}
.tab .pill,.tab .pill.red{background:var(--bad);color:#1a0006;font-weight:700;box-shadow:0 0 10px rgba(255,59,86,.45)}
.cobar{background:rgba(5,37,54,.8);border:1px solid var(--line);border-radius:6px;padding:3px}
.cob{color:var(--mut);border-radius:4px;font-weight:600}
.cob:hover:not(.on){background:rgba(11,65,94,.6);color:#fff}
.cob.on{background:var(--g2);color:var(--ongold);box-shadow:0 0 14px rgba(0,170,255,.4)}
html[data-co=AMG] .cob.on{box-shadow:0 0 14px rgba(0,229,163,.4)}
.side-foot{border-top:1px solid var(--line)}
#who{color:var(--body)}#who b{color:#fff}#who small{color:var(--mut)}
#who .av{background:rgba(0,170,255,.15);color:var(--g1);border:1px solid rgba(0,170,255,.5);box-shadow:0 0 10px rgba(0,170,255,.3)}
.sf .btn{background:rgba(11,65,94,.4);border-color:var(--sline);color:var(--body);box-shadow:none}
.sf .btn:hover{background:rgba(11,65,94,.7);border-color:var(--g2);color:#fff}

/* ===================== TOP BAR + MAIN ===================== */
.top{padding:20px 40px 16px;border-bottom:0;background:rgba(5,37,54,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);position:sticky}
.top::after{content:"";position:absolute;left:40px;right:40px;bottom:0;height:1px;background:linear-gradient(90deg,rgba(0,170,255,.6),rgba(0,170,255,.12) 50%,transparent)}
.top h1{font:700 calc(28px*var(--ks))/1.15 var(--serif);letter-spacing:-.02em;color:#fff}
main{padding:30px 40px 110px;max-width:1400px}

/* ===================== KONTROL ===================== */
.btn{border-radius:4px;padding:7px 14px;font-weight:600;font-size:13px;background:rgba(11,65,94,.4);border:1px solid rgba(0,170,255,.3);color:#fff;box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:rgba(11,65,94,.75);border-color:var(--g2);box-shadow:0 0 14px -2px rgba(0,170,255,.35)}
.btn.pri,html[data-theme=dark] .btn.pri{background:var(--g2);border-color:var(--g2);color:var(--ongold);box-shadow:0 0 14px rgba(0,170,255,.4);text-shadow:none}
.btn.pri:hover{background:var(--g1);border-color:var(--g1);box-shadow:0 0 20px rgba(0,170,255,.6);filter:none}
html[data-co=AMG] .btn.pri{box-shadow:0 0 14px rgba(0,229,163,.4)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--body)}.btn.ghost:hover{background:rgba(8,51,74,.6);color:#fff}
input,select,textarea{border-radius:4px;padding:8px 12px;background:rgba(5,37,54,.85);border:1px solid rgba(205,211,215,.2);color:#fff}
input::placeholder,textarea::placeholder{color:var(--mut)}
input:focus,select:focus,textarea:focus{border-color:var(--g2);box-shadow:0 0 0 1px var(--g2),0 0 12px rgba(0,170,255,.25);outline:0}
input[type=checkbox],input[type=radio]{accent-color:var(--g2)}
input[type=date]{color-scheme:dark}
select option{background:#08334a;color:#fff}
:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
label.f{font-weight:600;color:var(--mut)}

/* ===================== KARTU, TABEL ===================== */
.card,html .ik-card,.fg,.box{border-radius:8px;background:var(--card-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:var(--sh)}
html .ik-card{padding:20px 22px}
html .ik-card h3,html .ik-sec{text-transform:none;letter-spacing:0;font-weight:600;color:var(--mut);font-size:13px}
html .ik-sec{font:700 calc(18px*var(--ks)) var(--serif);letter-spacing:-.01em;color:#fff;margin:34px 2px 12px}
th,table.tk th,table.pk th{text-transform:uppercase;letter-spacing:.08em;font-family:var(--serif);font-size:11px;font-weight:700;color:var(--mut);background:rgba(8,51,74,.8);border-bottom:1px solid rgba(0,170,255,.2);padding:11px 14px}
td{border-bottom-color:var(--line2);color:var(--body)}
tbody tr:nth-child(even) td{background:rgba(8,51,74,.18)}
tr.r:hover td,.tk-r:hover,.fi:hover,html .ik-tbl tr.p:hover td{background:rgba(11,65,94,.45)}
tr.r:hover td:first-child,html .ik-tbl tr.p:hover td:first-child{box-shadow:inset 2px 0 0 var(--g2)}
tr.tu td:first-child{border-left-color:var(--g2)}
.t1{font-weight:600;color:#fff}
.badge{font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.tag,.cochip{letter-spacing:.04em;border-radius:99px}
.bar{height:5px;background:rgba(205,211,215,.12);border-radius:3px}
.bar i,.lpbar i{background:linear-gradient(90deg,var(--g3),var(--g1));box-shadow:0 0 8px rgba(0,170,255,.5);border-radius:3px}
.pl{border-radius:99px;font-weight:600;background:transparent;border:1px solid var(--line);color:var(--body)}
.pl:hover{border-color:var(--g2);color:#fff}
.pl.on,html[data-theme=dark] .pl.on{background:var(--accbg);border-color:var(--g2);color:#fff;box-shadow:0 0 10px rgba(0,170,255,.25)}
.pl.on b{color:inherit}
.tk-tab.on{border-bottom-color:var(--g2);color:#fff}
.tk-tab.on span{background:var(--accbg);color:var(--g1)}
.pk-seg{border-radius:6px}.pk-seg button.on{background:var(--g2);color:var(--ongold)}
.cmdg{text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:600}
.cmdi.on{background:rgba(0,170,255,.14)}
.modal,.cmdbox,#drawer{border-radius:12px;background:rgba(8,51,74,.94);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);border:1px solid rgba(0,170,255,.28);box-shadow:var(--sh2)}
.modal h3{font:700 calc(22px*var(--ks)) var(--serif);letter-spacing:-.01em}
.mask,#cmd{background:rgba(3,26,39,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#toast{background:rgba(8,51,74,.96);color:#fff;border:1px solid rgba(0,170,255,.4);box-shadow:var(--sh2)}
.empty{font-family:var(--serif);font-size:16px;color:var(--mut)}
.hero{border-radius:12px}
.hero h2,html .ik-bar h2{font:700 calc(30px*var(--ks))/1.15 var(--serif);letter-spacing:-.03em}
.st b{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums}
.lpc{border-radius:8px}
a{color:var(--g1)}

/* ===================== LOGIN ===================== */
#view>.card[style*="max-width:380px"]{max-width:420px!important;margin:9vh auto!important;padding:34px 34px 30px!important;border-radius:12px;border:1px solid rgba(0,170,255,.38);
  background:rgba(8,51,74,.88);box-shadow:var(--sh2);position:relative;overflow:visible}
#view>.card[style*="max-width:380px"]::before{content:"";position:absolute;left:34px;right:34px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--g2),transparent);box-shadow:0 0 14px var(--g2)}
#view>.card[style*="max-width:380px"] h3{font:700 calc(28px*var(--ks)) var(--serif)!important;letter-spacing:-.02em;margin:6px 0 6px!important}

/* ===================== HALAMAN "HARI INI": KARTU KPI ===================== */
.knav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}
.knav input[type=date]{border-radius:4px}
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:16px;margin-top:12px}
.kc{position:relative;border:1px solid var(--line);border-radius:8px;padding:16px 18px 15px;background:var(--card-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--sh);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.kc::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,170,255,.7),transparent);opacity:.7}
.kc.clk{cursor:pointer}
.kc.clk:hover{border-color:rgba(0,170,255,.55);box-shadow:var(--sh),0 0 22px -6px rgba(0,170,255,.45)}
.kc.on{border-color:var(--g2);box-shadow:inset 0 0 12px rgba(0,170,255,.2),0 0 16px rgba(0,170,255,.25)}
.kc.dim{opacity:.55}
.kl{order:-1;margin:0 0 10px;font:700 11px/16px var(--serif);text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.kc{display:flex;flex-direction:column}
.kv{font:700 calc(40px*var(--ks))/1.05 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff}
.ks{margin-top:6px;font-size:12px;line-height:1.4;color:var(--mut)}
.kpan{margin-top:14px;border:1px solid var(--g2);border-radius:8px;padding:12px 20px 16px;background:rgba(8,51,74,.7);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 0 12px rgba(0,170,255,.18),0 0 16px rgba(0,170,255,.2)}
.kpan>div:first-child b{font:700 calc(18px*var(--ks)) var(--serif);letter-spacing:-.01em;color:#fff}
.hi-t th{background:transparent!important}
.hi-t tbody tr:hover{background:rgba(11,65,94,.45)!important}
.hi-t td.hi-go,.hi-t tbody tr:hover td:first-child{color:var(--g1)!important}

/* tombol/tab berlatar --acc yang ditulis inline oleh script */
[style*="background:var(--acc"]{border-radius:4px;color:var(--ongold)!important}
html[data-theme=light] [style*="background:var(--acc"]{color:var(--ongold)!important}

/* ===================== HP ===================== */
@media(max-width:900px){
  #side{width:auto;padding:10px 12px}
  #side::after,.tab.on::before{display:none}
  .top{padding:14px 18px 12px}.top::after{left:18px;right:18px}.top h1{font-size:22px}
  main{padding:20px 16px 100px}
  .brand{border-bottom:0;margin:0;padding:0}.brand i{width:26px;height:26px}.brand i::after{font-size:13px}
}
@media(max-width:640px){
  .kg{grid-template-columns:repeat(2,1fr);gap:10px}
  .kc{padding:13px 13px 12px}.kv{font-size:calc(30px*var(--ks))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{body{background:#fff!important;color:#000}.kc,.kpan,.card{box-shadow:none;background:#fff;color:#000}}

/* ===================== EVALUASI TIM (bagan organisasi) ===================== */
.evo-scroll{overflow-x:auto;padding:8px 4px 28px;margin-top:10px}
.evo{width:max-content;min-width:100%;--lc:rgba(0,170,255,.38)}
.evroot{display:flex;justify-content:flex-start;padding-left:11px}
.evtrunk{height:22px;margin:0 0 0 181px;width:0;border-left:1px solid var(--lc)}
.evrow{display:flex;justify-content:flex-start;align-items:flex-start}
.evcol{position:relative;padding:22px 11px 0;flex:none}
.evcol::before{content:"";position:absolute;top:0;left:0;right:0;height:0;border-top:1px solid var(--lc)}
.evcol::after{content:"";position:absolute;top:0;left:50%;height:22px;border-left:1px solid var(--lc)}
.evcol:first-child::before{left:50%}.evcol:last-child::before{right:50%}.evcol:only-child::before{display:none}
.evbox{position:relative;width:340px;flex:none}
.evb2{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;background:rgba(8,51,74,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--sh);overflow:hidden}
.evb2[data-st=bad]{border-color:rgba(255,59,86,.45)}.evb2[data-st=warn]{border-color:rgba(255,176,32,.32)}
.evb2.lv1{--lvc:#0e4a6e}.evb2.lv2{--lvc:#0088cc}.evb2.lv3{--lvc:#2f7fa8}.evb2.lv4{--lvc:#52606b}
.evph{flex:none;width:76px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(0,170,255,.22),rgba(5,37,54,.9));border-right:1px solid var(--line);font:700 22px var(--serif);color:var(--g1);overflow:hidden}
.evph img{width:100%;height:100%;object-fit:cover}
.evbd{flex:1;min-width:0}
.evband{background:var(--lvc);color:#fff;font:700 11px/16px var(--serif);letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.evdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.evdot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}.evdot.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.evin{padding:9px 11px 10px}
.evname{display:block;color:#fff;font:700 15px/1.25 var(--serif);letter-spacing:-.01em}
.evch{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 7px;font-size:12px;color:var(--mut)}
.evch em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}.evch .late em{color:var(--bad)}
.evt{margin:7px 0 6px;color:var(--body);font-size:12px;line-height:1.45}
.evlink{background:none;border:0;padding:0;color:var(--g1);font:600 12px var(--sans);cursor:pointer}.evlink:hover{text-decoration:underline}
.evdw{flex-basis:100%;padding:0 12px 12px;border-top:1px solid var(--line)}
.evtg{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;border:1px solid var(--g2);background:var(--bg);color:var(--g1);font:700 14px/18px var(--sans);cursor:pointer;display:grid;place-items:center;padding:0;z-index:2}
.evtg:hover{background:var(--g2);color:var(--ongold);box-shadow:0 0 12px rgba(0,170,255,.5)}
.evstack{margin:22px 0 0 26px}
.evitem{position:relative;padding:0 0 18px 26px}
.evitem::before{content:"";position:absolute;left:0;top:-22px;bottom:0;border-left:1px solid var(--lc)}
.evitem:last-child::before{bottom:auto;height:62px}
.evitem::after{content:"";position:absolute;left:0;top:40px;width:26px;border-top:1px solid var(--lc)}
.evitem>.evstack{margin-top:30px}
.evd h5,.evdw h5{margin:10px 0 6px;font:700 11px/16px var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.evr{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:6px 6px;border-radius:4px;cursor:pointer}
.evr:hover{background:rgba(11,65,94,.55)}
.evr-t{min-width:0;flex:1}.evr-t b{display:block;font-weight:600;color:#fff;font-size:12.5px}.evr-t small{color:var(--mut);font-size:11px}
.evr-p{flex:none;display:flex;align-items:center;gap:6px;width:104px}.evr-p .bar{flex:1}.evr-p em{font-style:normal;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--body);width:32px;text-align:right}
.evm{display:block;margin-top:10px;color:var(--mut);font-size:12px}
@media(max-width:900px){.evo{width:auto}.evrow{flex-direction:column;align-items:stretch}.evcol{padding:14px 0 0 18px;border-left:1px solid var(--lc);margin-left:10px}.evcol::before,.evcol::after,.evtrunk{display:none}.evbox{width:100%}.evroot{justify-content:flex-start}}
.evai{align-items:flex-start;margin:8px 0 6px;padding:8px 10px;border:1px solid rgba(0,170,255,.28);border-radius:4px;background:rgba(0,170,255,.07);display:flex;flex-direction:column;gap:4px}
.evai>b{font:700 10px/14px var(--serif);letter-spacing:.08em;text-transform:uppercase;color:var(--g1)}
.evaj{color:#fff;font-weight:600;font-size:12.5px;line-height:1.35}.evat{color:var(--body);font-size:12px;line-height:1.45}
.evam,.evaw{color:var(--mut);font-size:11px;font-style:normal}
.evst{margin:4px 0 6px;color:var(--faint);font-size:11px}

/* Pemilih tanggal dd/mm/yyyy (.dp): latar putih dari ui.css membuat teks putih tak terlihat di tema gelap */
.dp-t,.dp-b{background:rgba(5,37,54,.85)!important;color:#fff!important;border:1px solid rgba(0,170,255,.35)!important;border-radius:4px!important}
.dp-t{color:var(--hl,#e6f6ff)!important;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dp-t::placeholder{color:var(--mut)}
.dp-t.bad{border-color:var(--bad)!important;background:var(--badbg)!important}
.dp-b:hover{border-color:var(--g2)!important;box-shadow:0 0 10px rgba(0,170,255,.3)}
.dp-b{filter:none}