/* Portal customer — gaya mengikuti core Menara. Token (warna, bayangan, radius, mode gelap) ada di tokens.css (dihasilkan dari core oleh
   deploy/sync-portal-tokens.py; jangan diedit tangan). Tanpa font/CDN eksternal; tanpa atribut style inline (CSP ketat). */
:root{--muted:var(--text-muted);--line:var(--border-strong);--soft:var(--surface-raised);--on-accent:var(--on-solid);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--sans:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'DejaVu Sans',sans-serif}
*{box-sizing:border-box}
a{color:var(--accent)}
h1,h2,h3{text-wrap:balance;letter-spacing:-.012em}
::selection{background:rgba(38,163,221,.28);color:inherit}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--brand);outline-offset:2px;box-shadow:var(--ring);border-radius:var(--radius-s)}
.mono,.code,code,time{font-family:var(--mono)}

/* ---------- kerangka: bilah atas seperti core ---------- */
.link{background:none;border:0;font:inherit;cursor:pointer;color:var(--accent)}
.inl{display:inline;margin:0}
.fresh{padding:8px 16px;font-size:.82rem;text-align:center;background:var(--surface-raised);color:var(--muted);border-bottom:1px solid var(--border)}
.fresh.ok::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:middle}
.fresh.warn{background:var(--warn-soft);color:var(--warn);font-weight:700}.fresh.crit{background:var(--crit-soft);color:var(--crit);font-weight:700}
.main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:24px 16px 32px}
.main.narrow{max-width:460px}
@keyframes page-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h1{font-size:1.45rem;font-weight:800;margin:0 0 16px;line-height:1.25}
h2{font-size:.95rem;font-weight:700;margin:24px 0 10px}
.muted{color:var(--muted);font-size:.9rem}.small{font-size:.82rem}
.sr{position:absolute;left:-9999px}

/* ---------- kartu, formulir, tombol ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.card h2{margin:0 0 12px}
.form{display:flex;flex-direction:column;gap:14px}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:5px}
.inp{display:flex;align-items:center;gap:8px}
input[type=text],input[type=email],input[type=password],input[type=search]{flex:1;min-width:0;font:inherit;padding:10px 12px;min-height:44px;border:1px solid var(--border-strong);border-radius:var(--radius-s);background:var(--surface);color:var(--text)}
input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
.chk{display:flex;gap:10px;align-items:center;min-height:44px}
.chk input{width:22px;height:22px;accent-color:var(--accent)}
.btn{font:inherit;font-size:.86rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:9px 16px;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface-raised);color:var(--text);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.off{opacity:.5;cursor:default}
.toggle{min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-raised);color:var(--text);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.flash{padding:12px 14px;border-radius:var(--radius-s);margin:0 0 16px;border:1px solid var(--border);background:var(--surface)}
.flash.crit{border-color:var(--crit);background:var(--crit-soft);color:var(--crit);font-weight:600}.flash.warn{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}.flash.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.qr{width:200px;height:200px;margin:8px 0 16px;background:#fff;padding:10px;border-radius:var(--radius-s)}
.qr svg{width:100%;height:100%;display:block}
.key{font-family:var(--mono);font-size:1.05rem;letter-spacing:.05em;word-break:break-all}
.codes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 16px}
.codes code{display:block;padding:10px;border:1px dashed var(--border-strong);border-radius:var(--radius-s);text-align:center;font-size:1.05rem}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:.9rem}
.kv dt{color:var(--muted);font-weight:600}.kv dd{margin:0}
.plain{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}

/* ---------- ringkasan ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 8px}
.tenant h2{font-size:1rem;margin:0 0 12px}
.tag,.code.tenant-code{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--surface-raised);border:1px solid var(--border);font-size:.74rem;font-family:var(--mono);color:var(--text)}
.score{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ring{width:132px;height:132px;flex:none}
.ring .track{stroke:var(--surface-raised)}
.ring .val{stroke:var(--accent)}
.ring.ok .val{stroke:var(--ok)}.ring.warn .val{stroke:var(--warn)}.ring.crit .val{stroke:var(--crit)}
.ring .rn{font:800 40px var(--sans);fill:var(--text)}.ring .rg{font:700 18px var(--sans);fill:var(--muted)}
.lvl{font-weight:800;font-size:1.05rem;margin:0}.lvl.ok{color:var(--ok)}.lvl.warn{color:var(--warn)}.lvl.crit{color:var(--crit)}
.parts{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:8px}
.parts li{display:grid;grid-template-columns:96px 1fr 2.2em;align-items:center;gap:10px;font-size:.88rem}
.parts meter{width:100%;height:10px}
.spark{margin:0}.spark svg{width:100%;height:56px;display:block}
.spark polyline{stroke:var(--accent)}.spark circle{fill:var(--accent)}
.spark figcaption{font-size:.8rem}
.avg .big{font-size:1.6rem;font-weight:800}

/* ---------- lencana ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap;background:var(--info-soft);color:var(--info)}
.pill.crit{background:var(--crit-soft);color:var(--crit)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.info{background:var(--accent-soft);color:var(--accent)}
.pill.st-open{background:var(--accent-soft);color:var(--accent)}.pill.st-prog{background:var(--warn-soft);color:var(--warn)}.pill.st-done{background:var(--ok-soft);color:var(--ok)}
.ok-line{color:var(--ok);font-weight:700}
.toplist{padding-left:20px;display:flex;flex-direction:column;gap:10px}

/* ---------- filter (chip), pencarian, daftar ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:600;font-size:.84rem;text-decoration:none}
.chip:hover{background:var(--surface-raised);color:var(--text)}
.chip[aria-current=true]{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.search{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.search input{flex:1;min-width:180px}
.flist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.frow{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;align-items:start;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);color:var(--text);text-decoration:none;min-height:44px;box-shadow:var(--shadow)}
.frow:hover{border-color:var(--accent)}
.frow .ft{font-weight:700}.frow .fm{grid-column:2;color:var(--muted);font-size:.84rem}

/* ---------- tabel tiket ---------- */
table.tickets{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow)}
.tickets th,.tickets td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.tickets th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted);background:var(--surface-raised)}
.tickets tr:last-child td{border-bottom:0}
.tid{text-decoration:none}.tid:hover .mono,.tid:focus-visible .mono{text-decoration:underline}
.tk-title{font-size:1.05rem;margin:0 0 12px}
.tkv{margin:0 0 16px}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}
.tl{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.tl li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);box-shadow:var(--shadow)}
.tl-i{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.cm{margin:4px 0 0;white-space:normal;overflow-wrap:anywhere}

/* ---------- ponsel ---------- */
@media (max-width:760px){
  .ring{width:108px;height:108px}
  .tickets,.tickets tbody,.tickets tr,.tickets td{display:block;width:100%}
  .tickets thead{position:absolute;left:-9999px}
  .tickets{background:transparent;border:0;box-shadow:none}
  .tickets tr{margin-bottom:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);box-shadow:var(--shadow)}
  .tickets td{border:0;padding:3px 0;display:flex;gap:8px}
  .tickets td::before{content:attr(data-label);min-width:120px;flex:none;color:var(--muted);font-size:.78rem;font-weight:700}
}
@media (max-width:480px){.kv{grid-template-columns:1fr}.main{padding:16px 12px 28px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.blk{margin:0 0 22px}.blk h2{font-size:1.02rem;margin:0 0 8px}
.tn{font-size:1.1rem;margin:22px 0 10px}
table.mod td,table.mod th{vertical-align:top}
.btn-link{font-weight:600}
/* grafik SVG (tanpa style inline) */
.t-ok{fill:var(--ok);stroke:var(--ok);background:var(--ok)}.t-warn{fill:var(--warn);stroke:var(--warn);background:var(--warn)}.t-crit{fill:var(--crit);stroke:var(--crit);background:var(--crit)}.t-info{fill:var(--accent);stroke:var(--accent);background:var(--accent)}.t-off{fill:var(--border-strong);stroke:var(--border-strong);background:var(--border-strong)}
rect.t-ok,rect.t-warn,rect.t-crit,rect.t-info,rect.t-off{stroke:none}
circle.t-ok,circle.t-warn,circle.t-crit,circle.t-info,circle.t-off{fill:none}
svg .bg{fill:var(--surface-raised);stroke:none}circle.bg{fill:none;stroke:var(--surface-raised)}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:0 0 18px}
.card.chart{margin:0}.card.chart h3{font-size:.95rem;margin:0 0 12px}
.hbars{display:flex;flex-direction:column;gap:9px}
.hb-row{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:10px;font-size:.84rem}
.hb-l{overflow-wrap:anywhere;color:var(--muted)}.hb-svg{width:100%;height:9px;border-radius:5px;overflow:hidden}.hb-v{font-variant-numeric:tabular-nums}
.stacks{display:flex;flex-direction:column;gap:10px}.st-row{display:grid;grid-template-columns:minmax(70px,26%) 1fr auto;align-items:center;gap:10px;font-size:.84rem}
.stackbar{width:100%;height:12px;border-radius:6px;overflow:hidden}.st-n{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.donut svg{width:132px;height:132px;flex:none;transform:none}.donut .dn{font:800 8px var(--sans);fill:var(--text)}
.dleg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.84rem}.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px}
/* band ringkasan (seperti dashboard core) */
.heatmap{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.hcell{display:flex;flex-direction:column;gap:2px;min-width:132px;padding:10px 12px;border-radius:var(--radius-s);border:1px solid var(--border);background:var(--surface);font-size:.8rem}
.hcell b{font-size:1.2rem}.hcell.t-crit{border-color:var(--crit);background:var(--crit-soft);fill:none;stroke:none}.hcell.t-warn{border-color:var(--warn);background:var(--warn-soft)}.hcell.t-info{background:var(--surface)}.hcell.t-ok{border-color:var(--ok);background:var(--ok-soft)}.hcell.t-off{background:var(--surface-raised)}
@media (max-width:560px){.hb-row{grid-template-columns:1fr auto}.hb-row .hb-svg{grid-column:1/-1;order:3}}
.hcell{text-decoration:none;color:var(--text)}.hcell span{color:var(--muted);font-weight:600}

/* kelas bantu pengganti atribut style (CSP): lebar bar, persen cincin, jumlah kolom */
.w-0{width:0%!important}.w-1{width:1%!important}.w-2{width:2%!important}.w-3{width:3%!important}.w-4{width:4%!important}.w-5{width:5%!important}.w-6{width:6%!important}.w-7{width:7%!important}.w-8{width:8%!important}.w-9{width:9%!important}.w-10{width:10%!important}.w-11{width:11%!important}.w-12{width:12%!important}.w-13{width:13%!important}.w-14{width:14%!important}.w-15{width:15%!important}.w-16{width:16%!important}.w-17{width:17%!important}.w-18{width:18%!important}.w-19{width:19%!important}.w-20{width:20%!important}.w-21{width:21%!important}.w-22{width:22%!important}.w-23{width:23%!important}.w-24{width:24%!important}.w-25{width:25%!important}.w-26{width:26%!important}.w-27{width:27%!important}.w-28{width:28%!important}.w-29{width:29%!important}.w-30{width:30%!important}.w-31{width:31%!important}.w-32{width:32%!important}.w-33{width:33%!important}.w-34{width:34%!important}.w-35{width:35%!important}.w-36{width:36%!important}.w-37{width:37%!important}.w-38{width:38%!important}.w-39{width:39%!important}.w-40{width:40%!important}.w-41{width:41%!important}.w-42{width:42%!important}.w-43{width:43%!important}.w-44{width:44%!important}.w-45{width:45%!important}.w-46{width:46%!important}.w-47{width:47%!important}.w-48{width:48%!important}.w-49{width:49%!important}.w-50{width:50%!important}.w-51{width:51%!important}.w-52{width:52%!important}.w-53{width:53%!important}.w-54{width:54%!important}.w-55{width:55%!important}.w-56{width:56%!important}.w-57{width:57%!important}.w-58{width:58%!important}.w-59{width:59%!important}.w-60{width:60%!important}.w-61{width:61%!important}.w-62{width:62%!important}.w-63{width:63%!important}.w-64{width:64%!important}.w-65{width:65%!important}.w-66{width:66%!important}.w-67{width:67%!important}.w-68{width:68%!important}.w-69{width:69%!important}.w-70{width:70%!important}.w-71{width:71%!important}.w-72{width:72%!important}.w-73{width:73%!important}.w-74{width:74%!important}.w-75{width:75%!important}.w-76{width:76%!important}.w-77{width:77%!important}.w-78{width:78%!important}.w-79{width:79%!important}.w-80{width:80%!important}.w-81{width:81%!important}.w-82{width:82%!important}.w-83{width:83%!important}.w-84{width:84%!important}.w-85{width:85%!important}.w-86{width:86%!important}.w-87{width:87%!important}.w-88{width:88%!important}.w-89{width:89%!important}.w-90{width:90%!important}.w-91{width:91%!important}.w-92{width:92%!important}.w-93{width:93%!important}.w-94{width:94%!important}.w-95{width:95%!important}.w-96{width:96%!important}.w-97{width:97%!important}.w-98{width:98%!important}.w-99{width:99%!important}.w-100{width:100%!important}
.p-0{--p:0}.p-1{--p:1}.p-2{--p:2}.p-3{--p:3}.p-4{--p:4}.p-5{--p:5}.p-6{--p:6}.p-7{--p:7}.p-8{--p:8}.p-9{--p:9}.p-10{--p:10}.p-11{--p:11}.p-12{--p:12}.p-13{--p:13}.p-14{--p:14}.p-15{--p:15}.p-16{--p:16}.p-17{--p:17}.p-18{--p:18}.p-19{--p:19}.p-20{--p:20}.p-21{--p:21}.p-22{--p:22}.p-23{--p:23}.p-24{--p:24}.p-25{--p:25}.p-26{--p:26}.p-27{--p:27}.p-28{--p:28}.p-29{--p:29}.p-30{--p:30}.p-31{--p:31}.p-32{--p:32}.p-33{--p:33}.p-34{--p:34}.p-35{--p:35}.p-36{--p:36}.p-37{--p:37}.p-38{--p:38}.p-39{--p:39}.p-40{--p:40}.p-41{--p:41}.p-42{--p:42}.p-43{--p:43}.p-44{--p:44}.p-45{--p:45}.p-46{--p:46}.p-47{--p:47}.p-48{--p:48}.p-49{--p:49}.p-50{--p:50}.p-51{--p:51}.p-52{--p:52}.p-53{--p:53}.p-54{--p:54}.p-55{--p:55}.p-56{--p:56}.p-57{--p:57}.p-58{--p:58}.p-59{--p:59}.p-60{--p:60}.p-61{--p:61}.p-62{--p:62}.p-63{--p:63}.p-64{--p:64}.p-65{--p:65}.p-66{--p:66}.p-67{--p:67}.p-68{--p:68}.p-69{--p:69}.p-70{--p:70}.p-71{--p:71}.p-72{--p:72}.p-73{--p:73}.p-74{--p:74}.p-75{--p:75}.p-76{--p:76}.p-77{--p:77}.p-78{--p:78}.p-79{--p:79}.p-80{--p:80}.p-81{--p:81}.p-82{--p:82}.p-83{--p:83}.p-84{--p:84}.p-85{--p:85}.p-86{--p:86}.p-87{--p:87}.p-88{--p:88}.p-89{--p:89}.p-90{--p:90}.p-91{--p:91}.p-92{--p:92}.p-93{--p:93}.p-94{--p:94}.p-95{--p:95}.p-96{--p:96}.p-97{--p:97}.p-98{--p:98}.p-99{--p:99}.p-100{--p:100}
.cc-1{--cc:1}.cc-2{--cc:2}.cc-3{--cc:3}.cc-4{--cc:4}.cc-5{--cc:5}.cc-6{--cc:6}.cc-7{--cc:7}.cc-8{--cc:8}
.nav-btn{background:none;border:0;font:inherit;cursor:pointer;text-align:left;width:100%}
form.inl{display:block}
.hero .ha-bar i,.band-bar i{display:block;height:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fresh-org{color:var(--text)}
.fh{display:block;font-size:.8rem;margin:2px 0 0}.fh .pill{margin-right:4px}.card.handling{margin:0 0 14px}
.frow .fh{grid-column:2}
dialog.dlg{max-width:min(480px,92vw);border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface);color:var(--text);box-shadow:var(--shadow);padding:20px 22px}
dialog.dlg::backdrop{background:rgba(0,0,0,.45)}dialog.dlg h2{margin:0 0 10px;font-size:1.1rem}dialog.dlg .actions{margin-top:14px;text-align:right}
h2.sec{margin:26px 0 10px;font-size:1.15rem}td .sub{display:block;font-size:.76rem;color:var(--muted);margin-top:2px;font-weight:400}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.off{background:var(--surface-raised);color:var(--muted)}
.kpi.sel{outline:2px solid var(--accent);outline-offset:1px}a.kpi{text-decoration:none;color:inherit}a.kpi:hover{border-color:var(--accent)}