/* Reports: grafik garis dan donat (SVG), kepala KPI, daftar perhatian. Warna dari token --s1..s5 supaya ikut mode gelap. */
.attns{display:flex;flex-direction:column;margin-top:6px}
.attn{display:flex;align-items:center;gap:12px;padding:13px 6px;border-top:1px solid var(--line-2);border-radius:10px}
.attn>span:nth-child(2){flex:1}@media (hover:hover) and (pointer:fine){.attn:hover{background:var(--surface-2)}}.attn .pill{min-width:30px;text-align:center}
.attn svg.i{width:16px;height:16px;color:var(--ink-3)}
/* ===== chart ===== */
:root{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--so:#9AA8C2;--g1:#2a78d6;--g3:#eda100;--g4:#e34948}
html[data-theme="dark"]{--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--so:#6F7E9A;--g1:#3987e5;--g3:#c98500;--g4:#e66767}
.f1,.fs1,.fg1{background:var(--s1)}.f2,.fs2{background:var(--s2)}.f3,.fs3{background:var(--s3)}.f4,.fs4{background:var(--s4)}.f5,.fs5{background:var(--s5)}.fso,.fo{background:var(--so)}.fg3{background:var(--g3)}.fg4{background:var(--g4)}.fg1{background:var(--g1)}
.chart{position:relative}
.legend{align-items:center}.legend span{display:inline-flex;align-items:center}.legend small{margin-left:auto;color:var(--ink-3)}
svg.lc{width:100%;max-width:780px;height:auto;display:block;overflow:visible;margin-top:6px}
svg.lc .gl{stroke:var(--line-2);stroke-width:1}svg.lc .ax{fill:var(--ink-3);font-size:11.5px;font-family:var(--sans)}
svg.lc .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg.lc .s1{stroke:var(--s1)}svg.lc .s3{stroke:var(--s3)}
svg.lc .pt{stroke:var(--surface);stroke-width:2}svg.lc .pt.f1{fill:var(--s1);background:none}svg.lc .pt.f3{fill:var(--s3);background:none}
svg.lc .dl{fill:var(--ink-2);font-size:12px;font-weight:600;font-family:var(--sans)}
svg.lc .xh{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:0}
svg.lc .hit{fill:transparent;cursor:crosshair}
.ctip{position:absolute;z-index:5;pointer-events:none;min-width:150px;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 26px rgba(15,23,60,.18);font-size:12.5px;line-height:1.45}
html[data-theme="dark"] .ctip{box-shadow:0 10px 26px rgba(0,0,0,.5)}
.ctip b{display:block;margin-bottom:3px;color:var(--ink)}.ctip div{display:flex;align-items:center;gap:8px;color:var(--ink-2)}.ctip div i{width:9px;height:9px;border-radius:3px;flex:none}.ctip div strong{margin-left:auto;padding-left:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.donut{display:flex;flex-direction:column;align-items:center;gap:14px}
svg.dn{width:190px;height:190px;display:block}
svg.dn .arc{transition:stroke-width .15s;cursor:pointer;transform-origin:center}
@media (hover:hover) and (pointer:fine){svg.dn .arc:hover{stroke-width:33}}
.as1,.ag1{stroke:var(--s1)}.as2{stroke:var(--s2)}.as3{stroke:var(--s3)}.as4{stroke:var(--s4)}.as5{stroke:var(--s5)}.aso{stroke:var(--so)}.ag3{stroke:var(--g3)}.ag4{stroke:var(--g4)}.ag1{stroke:var(--g1)}
svg.dn .dc1{fill:var(--ink);font-size:20px;font-weight:800;font-family:var(--head)}svg.dn .dc2{fill:var(--ink-3);font-size:11.5px;font-family:var(--sans)}
.dlist{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column}
.dlist li{display:grid;grid-template-columns:12px minmax(0,1fr) auto 52px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2);font-size:13px}
.dlist li i{width:10px;height:10px;border-radius:3px}.dlist li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dlist li b{font-variant-numeric:tabular-nums;font-weight:600}.dlist li em{font-style:normal;color:var(--ink-3);text-align:right}
.chart-split{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:24px;align-items:start}
.chart-split .donut{position:sticky;top:90px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:9px;vertical-align:baseline}
.ph3{margin:4px 0 0;font-size:15px}
@media (max-width:900px){.chart-split{grid-template-columns:1fr}.chart-split .donut{position:static}}
@media (min-width:981px){.two-col.keep{grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr)}}
.two-col.keep .tbl-wrap{overflow-x:auto}
.two-col.keep>.panel{margin-top:0!important;margin-bottom:0}
.ctip div{white-space:nowrap}
/* ===== line chart gaya baru: halus, area gradasi, KPI di atas ===== */
svg.lc{max-width:none}
svg.lc .ln{stroke-width:3}
svg.lc .gl{stroke:var(--line);opacity:.7}
svg.lc .ax{font-size:12px}
svg.lc .area{pointer-events:none}
svg.lc .gs0{stop-opacity:.3}svg.lc .gs1{stop-opacity:0}
svg.lc .c1{stop-color:var(--s1)}svg.lc .c3{stop-color:var(--s3)}
svg.lc .pt{opacity:0;transition:opacity .12s}svg.lc .pt.on{opacity:1}
svg.lc .area.a3{display:none}
.kh{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-end;margin-bottom:14px}
.kh-t{font-size:14px;color:var(--ink-2);font-weight:600}
.kh-n{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.kh-n b{font-family:var(--head);font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.kh-n small{font-family:var(--head);font-size:clamp(18px,2vw,24px);color:var(--ink-3);margin-left:-8px}
.dbadge{font-size:13px;font-weight:700;padding:5px 11px;border-radius:9px}
.dbadge.up{background:var(--green-bg);color:var(--green)}.dbadge.down{background:var(--red-bg);color:var(--red)}
.kh-s{margin:4px 0 0;color:var(--ink-2);font-size:13.5px}
.kh-r{display:flex;gap:8px;align-items:center}
.kh-r select{height:42px;border:1px solid var(--line);border-radius:12px;padding:0 34px 0 14px;background:var(--surface);font-weight:500;box-shadow:0 1px 2px rgba(var(--accent-rgb,30,64,175),.06)}
.kh-r .icon-btn{width:46px;height:42px;border-radius:12px}

.f1,.f2,.f3,.f4,.f5,.fso,.fgo,.fg1,.fg3,.fg4{display:inline-block}
.fo{background:var(--so)}
.ao{stroke:var(--so)}
@media print{.chart .ctip{display:none}.kh-r,.toolbar{display:none}}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--ink-2);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
.a1{stroke:var(--s1)}.a2{stroke:var(--s2)}.a3{stroke:var(--s3)}.a4{stroke:var(--s4)}.a5{stroke:var(--s5)}
@media (min-width:981px){.two-col.keep{grid-template-columns:minmax(0,2.3fr) minmax(260px,1fr)}}
.two-col.keep td{white-space:nowrap}
.two-col.keep td:nth-child(2){max-width:210px;overflow:hidden;text-overflow:ellipsis}