/* Sales OS -- KPI-k (2026-10-12): havi / negyedeves / eves KPI-k ertekesitonkent (views/kpi.js). A diagram a Riportok
 * jeloloit hasznalja (reports.css: .rp-svg, .rp-grid, .rp-ax, .rp-tip, .rp-tbl), ez a fajl a halmozott oszlopok
 * kategoria-szineit adja: a dataviz referencia-paletta 8 helye ROGZITETT sorrendben (a validalt sorrend a CVD-vedelem),
 * vilagos es sotet modra kulon lepcsokkel; a 8. utani sorozat "Egyéb" (semleges). A szin az ertekesitot koveti (a sorrend
 * a nev szerinti, mind a harom diagramon ugyanaz), a szoveg sosem a sorozat szinet viseli. */

.kp {
  --kp-1: #2a78d6; --kp-2: #eb6834; --kp-3: #1baf7a; --kp-4: #eda100;
  --kp-5: #e87ba4; --kp-6: #008300; --kp-7: #4a3aa7; --kp-8: #e34948; --kp-o: #8d8781;
}
:root[data-theme="dark"] .kp {
  --kp-1: #3987e5; --kp-2: #d95926; --kp-3: #199e70; --kp-4: #c98500;
  --kp-5: #d55181; --kp-6: #008300; --kp-7: #9085e9; --kp-8: #e66767; --kp-o: #8a837d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kp {
    --kp-1: #3987e5; --kp-2: #d95926; --kp-3: #199e70; --kp-4: #c98500;
    --kp-5: #d55181; --kp-6: #008300; --kp-7: #9085e9; --kp-8: #e66767; --kp-o: #8a837d;
  }
}

.kp .page-h p { overflow-wrap: anywhere; }
.kp-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 14px; }
.kp-bar .field { min-width: 160px; flex: 0 1 220px; }
.kp-bar .field.kp-pf { flex: 0 0 auto; min-width: 0; }
.kp-nav { display: inline-flex; gap: 6px; align-items: center; }
.kp-nav .kp-rng { font-size: 12.5px; color: var(--text-2); min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }
.kp-body { display: flex; flex-direction: column; gap: 16px; }
.kp-body > .kpis { margin: 0; }
.kp-cur { font-size: 11px; font-weight: 600; color: var(--muted); }

/* Halmozott oszlop: a szegmensek kozott 2 px felulet-res (1-1 px korvonal a felulet szinevel). */
.kp-svg .kp-seg { stroke: var(--surface); stroke-width: 1px; }
.kp-svg .kp-hit:hover .kp-seg, .kp-svg .kp-hit:focus .kp-seg { opacity: .82; }
.kp-svg .kp-part { fill: none; stroke: var(--border-strong); stroke-dasharray: 3 3; stroke-width: 1; }
.kp-s1 { fill: var(--kp-1); background: var(--kp-1); } .kp-s2 { fill: var(--kp-2); background: var(--kp-2); }
.kp-s3 { fill: var(--kp-3); background: var(--kp-3); } .kp-s4 { fill: var(--kp-4); background: var(--kp-4); }
.kp-s5 { fill: var(--kp-5); background: var(--kp-5); } .kp-s6 { fill: var(--kp-6); background: var(--kp-6); }
.kp-s7 { fill: var(--kp-7); background: var(--kp-7); } .kp-s8 { fill: var(--kp-8); background: var(--kp-8); }
.kp-so { fill: var(--kp-o); background: var(--kp-o); }
.kp-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.kp-leg .kp-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.kp-tbl th, .kp-tbl td { white-space: nowrap; }
.kp-tbl td.l { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.kp-tbl tr.kp-sub td { color: var(--muted); font-size: 11.5px; }
.kp-tbl tr.kp-sub td.l { padding-left: 22px; }
.kp-tbl td small { display: block; color: var(--muted); font-size: 11px; }
.kp-tbl th.kp-now, .kp-tbl td.kp-now { background: var(--surface-2); }
.kp-tbl .kp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }
.kp-def { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }

/* Telefonon a 4 KPI-kartya egymas alatt: ket oszlopban a hosszu feliratok ("Feldolgozott leadek") szo kozben tornenek. */
@media (max-width: 640px) {
  .kp .kp-body > .kpis { grid-template-columns: 1fr; }
}