/* S7.3 staging — tambahan UI V2 */
.badge.ok{background:rgba(110,231,183,.14);color:#6ee7b7;border-color:rgba(110,231,183,.3)}
.nodata{color:#f5a623;font-size:11.5px;font-weight:700;letter-spacing:.2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
.name{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muted{color:var(--muted)}
.note{background:rgba(94,200,255,.07);border:1px solid rgba(94,200,255,.2);border-radius:10px;padding:9px 12px;font-size:11.5px;color:var(--muted);margin:10px 0}
.note.warn{background:rgba(245,166,35,.08);border-color:rgba(245,166,35,.28);color:#f5c07a}
.chartbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0 4px}
.chart{width:100%;height:auto;display:block}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.pager{display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:11.5px;color:var(--muted);margin:10px 0}
.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 11px;font:inherit;font-size:12px;cursor:pointer}
.btn:hover{border-color:rgba(124,156,255,.5)}
.btn[disabled]{opacity:.4;cursor:default}
.btn.primary{background:linear-gradient(140deg,rgba(124,156,255,.9),rgba(94,200,255,.8));color:#08101c;font-weight:700;border:0}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.report{width:100%;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.55;resize:vertical}
.tbl{display:table}
@media (max-width:760px){
  .topbar{flex-direction:column;align-items:flex-start;gap:8px}
  .badgebar{flex-wrap:wrap;gap:6px}
  .badgebar .badge{font-size:10px}
  .brandtitle{font-size:16px}
  .logo{width:34px;height:34px;font-size:17px}
}
@media (max-width:900px){
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .name{max-width:200px}
}
@media (max-width:640px){
  main#main{padding:10px 12px 30px}
  .subtabs{overflow-x:auto;flex-wrap:nowrap}
  .subtabs .tab{white-space:nowrap}
  .filters{flex-direction:column}
  .filters select,.filters input{min-width:0;width:100%}
  .tbl{display:block;overflow-x:auto;white-space:nowrap}
  .name{max-width:180px}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media print{.portalnav,.subtabs,.filters,.toolbar{display:none!important}body{background:#fff;color:#000}}

.tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.tw .tbl{min-width:640px}

.badgebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.badgebar .badge{display:inline-block;padding:4px 9px;border-radius:999px;background:rgba(94,200,255,.10);border:1px solid rgba(94,200,255,.28);color:#9fd8ff;font-size:10px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.badgebar .badge.ok{background:rgba(110,231,183,.12);border-color:rgba(110,231,183,.32);color:#6ee7b7}
.bt-controls{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}
.bt-controls label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.bt-controls select{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 10px;font:inherit;font-size:12.5px;min-width:140px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:rgba(124,156,255,.07)}
tr.picked td{background:rgba(124,156,255,.12);box-shadow:inset 2px 0 0 #7c9cff}
.mini-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
.chart-title{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:4px}
@media (min-width:1100px){.mini-grid{grid-template-columns:1fr 1fr}.mini-grid .chartbox:last-child{grid-column:1/-1}}

.tbl .chip{white-space:nowrap}
.tbl td:nth-child(3),.tbl td:nth-child(4){white-space:nowrap}

.tbl td.rat{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.flag{color:#f5a623;font-weight:700;cursor:help}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.metric-toggle{display:inline-flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:3px}
.metric-toggle .mt{background:transparent;border:0;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer}
.metric-toggle .mt.on{background:linear-gradient(140deg,rgba(124,156,255,.95),rgba(94,200,255,.85));color:#08101c}