/* round 7 module (kpis), built by B17: existing variables only, no hex colours. OEE and KPI report — js/kpis.js */
.kp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.kp-nav{display:inline-flex;align-items:center;gap:8px}
.kp-lbl{font-size:var(--fs-13,13px);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-chips{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
/* R10: area filters use the shared .chip / .chip.on (css/ui.css); .kp-chip stays as the handler hook */
.kp-sp{flex:1}
.kp-cap{font-size:var(--fs-11,11px);color:var(--ink3)}
.kp-exp{position:relative} .kp-exp>summary{list-style:none;cursor:pointer} .kp-exp>summary::-webkit-details-marker{display:none}
.kp-expm{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:150px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;box-shadow:var(--sh,0 8px 24px rgba(0,0,0,.18));padding:4px;display:flex;flex-direction:column}
.kp-expm button{border:0;background:none;color:var(--ink);font:inherit;font-size:var(--fs-13,13px);text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer} .kp-expm button:hover{background:var(--paper2)}
.kp-cm{font-size:var(--fs-12,12px);color:var(--ink3)}
.kp-p{font-size:var(--fs-14,14px);margin:0 0 6px}
.kp-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.kp-oee p.empty,.kp-card p.empty{margin:0;padding:8px 0 2px;text-align:left;font-size:var(--fs-13,13px);color:var(--ink2)}
.kp-warn{margin:0 0 10px;padding:8px 11px;border-radius:8px;background:var(--amber-l);border:1px solid var(--amber-bd,var(--amber));color:var(--ink)}
.kp-card{margin:0;min-width:0}
.kp-ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.kp-ch h3{margin:0;font-size:var(--fs-16,16px)}
.kp-oee{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:14px}
.kp-oc .kp-ch{justify-content:space-between}
.kp-tag{font-size:var(--fs-11,11px);font-weight:700;padding:2px 8px;border-radius:5px;background:var(--grey-l);color:var(--ink2);white-space:nowrap}
.kp-tag.ok{background:var(--green-l);color:var(--green-t,var(--green))} .kp-tag.near{background:var(--amber-l);color:var(--amber-t,var(--ink))} .kp-tag.low{background:var(--red-l);color:var(--red-t,var(--red))}
.kp-ob{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center}
.kp-ring{width:92px;height:92px}
.kp-ring-bg{fill:none;stroke:var(--grey-l);stroke-width:8}
.kp-ring-fg{fill:none;stroke:var(--grey);stroke-width:8;stroke-linecap:round}
.kp-ring.ok .kp-ring-fg{stroke:var(--green)} .kp-ring.near .kp-ring-fg{stroke:var(--amber)} .kp-ring.low .kp-ring-fg{stroke:var(--red)}
.kp-ring-v{font:800 17px var(--font);fill:var(--ink)} .kp-ring-l{font:600 11px var(--font);fill:var(--ink2);letter-spacing:.08em}
.kp-m{margin-bottom:6px} .kp-m:last-child{margin-bottom:0}
.kp-mh{display:grid;grid-template-columns:88px minmax(0,1fr) 40px;align-items:center;gap:8px;font-size:var(--fs-13,13px)}
.kp-mv{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:var(--fs-13,13px)}
.kp-ms{margin-left:0;line-height:1.35;font-size:var(--fs-12,12px)}
.kp-mbar{position:relative;display:block;height:7px;border-radius:4px;background:var(--grey-l)}
.kp-mbar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--grey)}
.kp-mbar i.ok{background:var(--green)} .kp-mbar i.near{background:var(--amber)} .kp-mbar i.low{background:var(--red)}
.kp-mbar b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dotted var(--ink2)}
.kp-flag{display:inline-block;font-size:10.5px;font-weight:700;padding:0 6px;border-radius:4px;background:var(--amber-l);color:var(--amber-t,var(--ink))}
.kp-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.kp-row2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
.kp-big{font-size:var(--fs-26,26px);font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.kp-list{margin-top:10px}
.kp-li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--rule2);font-size:var(--fs-13,13px)}
.kp-li .mono{font-family:var(--mono);font-size:var(--fs-12,12px);white-space:nowrap}
.kp-lm{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-bad{color:var(--red-t,var(--red));font-weight:600;white-space:nowrap}
.kp-empty{padding:14px 0 6px;color:var(--ink2);font-size:var(--fs-13,13px)}
.kp-empty .xs{margin-top:4px}
.kp-tsvg{width:100%;height:auto;display:block}
.kp-tb{fill:var(--grey)} .kp-tb.cur{fill:var(--red)}
.kp-tv{font:600 10px var(--font);fill:var(--ink2);font-variant-numeric:tabular-nums} .kp-tx{font:10px var(--font);fill:var(--ink3);font-variant-numeric:tabular-nums}
.kp-tl{fill:none;stroke:var(--smt);stroke-width:1.8} .kp-td{fill:var(--smt)}
.kp-fr{display:grid;grid-template-columns:130px minmax(0,1fr) 42px;gap:10px;align-items:center;padding:5px 0;font-size:var(--fs-13,13px)}
.kp-fl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kp-fv{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-13,13px)}
.kp-wip{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:end}
.kp-wbars{display:flex;align-items:flex-end;gap:12px;height:110px}
.kp-wb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;width:52px}
.kp-wb i{display:block;width:40px;border-radius:3px 3px 0 0;min-height:2px}
.kp-wb i.b0{background:var(--green)} .kp-wb i.b1{background:var(--green-bd,var(--green-l))} .kp-wb i.b2{background:var(--amber)} .kp-wb i.b3{background:var(--red)}
.kp-wn{font-weight:700;font-size:var(--fs-12,12px);font-variant-numeric:tabular-nums}
.kp-foot{margin-top:8px}
.kp-rb{display:flex;gap:8px;justify-content:flex-end}
.kp-ph{display:none}
@media (max-width:1200px){.kp-row3{grid-template-columns:1fr 1fr} .kp-row3>:last-child{grid-column:1 / -1}}   /* R10: no hole at 1024 */
@media (max-width:900px){.kp-row3,.kp-row2{grid-template-columns:1fr}.kp-wip{grid-template-columns:1fr}}
/* print / PDF: black on white, one report */
@media print{
  html:has(.kp-bar),html:has(.kp-bar) body,html:has(.kp-bar) main,html:has(.kp-bar) .shell{background:white!important;color:black!important;color-scheme:light}
  .kp-ph{display:block!important;margin:0 0 10px;font-size:13px;color:black}
  .kp-card,.kp-warn{background:white!important;border:1px solid black!important;box-shadow:none!important;color:black!important;break-inside:avoid}
  .kp-card *{color:black!important}
  .kp-oee{grid-template-columns:1fr;gap:8px} .kp-row3{grid-template-columns:repeat(3,minmax(0,1fr))} .kp-row2{grid-template-columns:1.5fr 1fr}
  .kp-mbar{background:white;outline:1px solid black} .kp-ring-bg{stroke:black;stroke-opacity:.2}
  .kp-mbar i,.kp-mbar i.ok,.kp-mbar i.near,.kp-mbar i.low,.kp-wb i{background:black!important}
  .kp-ring-fg,.kp-ring.ok .kp-ring-fg,.kp-ring.near .kp-ring-fg,.kp-ring.low .kp-ring-fg{stroke:black}
  .kp-ring-v,.kp-ring-l,.kp-tv,.kp-tx{fill:black}
  .kp-tb,.kp-tb.cur{fill:black} .kp-tl{stroke:black} .kp-td{fill:black}
  .kp-tag,.kp-flag{background:white!important;border:1px solid black}
}
/* R10 G3: no grid holes at 1024 — three OEE cards in a row, or two with the third full width */
.kp-oee{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.kp-oee{grid-template-columns:repeat(2,minmax(0,1fr))} .kp-oee>.kp-oc:nth-child(3):last-child{grid-column:1 / -1} .kp-bar .kp-cap{display:none}}
@media (max-width:760px){.kp-oee{grid-template-columns:1fr}}
@media print{.kp-oee{grid-template-columns:1fr}}