/* Sales OS -- RIPORTOK (3. hullam): a Riportok nezet diagramjai es elrendezese. Csak tokenek + a diagram-paletta
 * (dataviz referencia-paletta 1-2. hely, a Supply OS feluleteire validalva: vilagos #FFFFFF es sotet #211D1A
 * mellett minden ellenorzes PASS). A szoveg sosem a sorozat szinet viseli; a sorozat-szin csak a jelolon van.
 * Sotet mod: data-theme="dark" es a rendszer-beallitas (data-theme="light" nelkul), mint a tokens.css-ben. */

.rp {
  --rp-s1: #2a78d6; --rp-s2: #eb6834; --rp-prev: #8d8781; --rp-band: #b7d3f6; --rp-other: var(--border-strong);
  --rp-hatch-bg: #cde2fb; --rp-grid: var(--border); --rp-track: var(--surface-2);
}
:root[data-theme="dark"] .rp {
  --rp-s1: #3987e5; --rp-s2: #d95926; --rp-prev: #8a837d; --rp-band: #184f95; --rp-hatch-bg: #104281;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rp { --rp-s1: #3987e5; --rp-s2: #d95926; --rp-prev: #8a837d; --rp-band: #184f95; --rp-hatch-bg: #104281; }
}

.rp .page-h p { overflow-wrap: anywhere; }
.rp-filters { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.rp-fsel .field { min-width: 150px; flex: 0 1 200px; }
.rp-fsel .btn { align-self: flex-end; }
.rp-fsel .seg { align-self: flex-start; }
.rp-tabs { margin: 0 0 14px; }
.rp-body { display: flex; flex-direction: column; gap: 16px; }
.rp-body > .kpis { margin: 0; }
.rp-note { margin: 0; }
.rp-help { margin: 8px 0 0; }
.rp-inl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.rp-inl .input { width: auto; }
.rp-new { font-size: 11px; font-weight: 600; color: var(--info); }
.rp-info { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); cursor: help; }
.rp-info:hover, .rp-info:focus-visible { color: var(--text); background: var(--surface-2); }
.rp-how summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.rp-how p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.rp-tbl td { white-space: nowrap; }

/* SVG-diagram: vekony jelolok, szurke halo, a tengelyszoveg tokenben. */
.rp-svg .rp-grid { stroke: var(--rp-grid); stroke-width: 1; }
.rp-svg .rp-base { stroke: var(--border-strong); stroke-width: 1; }
.rp-svg .rp-ax { fill: var(--muted); font-family: var(--font-mono); font-size: 10px; }
.rp-svg .rp-s1 { fill: var(--rp-s1); }
.rp-svg .rp-proj { fill: url(#rp-hatch); stroke: var(--rp-s1); stroke-width: 1; }
.rp-svg .rp-hatch-bg { fill: var(--rp-hatch-bg); }
.rp-svg .rp-hatch-ln { stroke: var(--rp-s1); stroke-width: 2; }
.rp-svg .rp-prev { fill: none; stroke: var(--rp-prev); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-svg .rp-prev-dot { fill: var(--rp-prev); stroke: var(--surface); stroke-width: 2; }
.rp-svg .rp-trend { fill: none; stroke: var(--rp-s2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rp-svg .rp-trend-dot { fill: var(--rp-s2); stroke: var(--surface); stroke-width: 2; }
.rp-svg .rp-hit:hover path { filter: brightness(1.08); }
.rp-tip { white-space: normal; width: max-content; max-width: 260px; z-index: 5; }

/* Jelmagyarazat-kulcsok. */
.rp-leg .rp-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rp-key.rp-s1 { background: var(--rp-s1); }
.rp-key.rp-prev, .rp-key.rp-trend { height: 3px; border-radius: 2px; vertical-align: 3px; width: 16px; }
.rp-key.rp-prev { background: var(--rp-prev); }
.rp-key.rp-trend { background: var(--rp-s2); }
.rp-key.rp-proj { background: repeating-linear-gradient(45deg, var(--rp-s1) 0 2px, var(--rp-hatch-bg) 2px 6px); }
.rp-key.rp-bband { background: var(--rp-band); }
.rp-key.rp-bexp { background: var(--rp-s1); width: 4px; }

/* Vizszintes savok: cimke | sav | ertek (a sav vege kerekitett, a talp szogletes). */
.rp-hb { display: flex; flex-direction: column; gap: 8px; }
/* A cimke es az ertek felul, a sav alattuk teljes szelessegben: keskeny kartyaban (g2) es telefonon is olvashato. */
.rp-hr, .rp-br { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: end; }
.rp-hr .rp-ht, .rp-br .rp-bt { grid-column: 1 / -1; grid-row: 2; }
.rp-hl { min-width: 0; display: flex; flex-direction: column; }
.rp-hl b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.rp-hl small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-ht { height: 12px; background: var(--rp-track); border-radius: 0 4px 4px 0; overflow: hidden; }
.rp-ht i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--rp-s1); }
.rp-ht i.rp-other { background: var(--rp-other); }
.rp-ht i.rp-loss { background: color-mix(in srgb, var(--bad) 70%, var(--surface)); }
.rp-hv { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--text); }

/* Elorejelzes-sav: a [also, felso] tartomany halvany savval, a varhato ertek eros jellel. */
.rp-band { display: flex; flex-direction: column; gap: 14px; }
.rp-bt { position: relative; height: 18px; background: var(--rp-track); border-radius: 4px; }
.rp-bt .rp-bband { position: absolute; top: 3px; bottom: 3px; background: var(--rp-band); border-radius: 4px; }
.rp-bt .rp-bexp { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--rp-s1); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface); }
.rp-br .rp-hv { display: flex; flex-direction: column; align-items: flex-end; }
.rp-br .rp-hv small { font-size: 10.5px; color: var(--muted); }

@media (max-width: 640px) {
  .rp-ch { overflow-x: auto; }
  .rp-ch .rp-svg { min-width: 540px; }
  .rp-fsel .field { flex: 1 1 140px; min-width: 0; }
  .rp-pchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rp-pchips::-webkit-scrollbar { display: none; }
}