/* PretCarburant.ro — grafice.css v1
   Cadrul, legenda, rezumatul, tooltip-ul, tabelul si panoul GPL ale graficelor
   desenate de static/js/grafice.js (API-ul PCGrafice; documentatia e in capul lui).
   Panoul GPL (.pcg-panou): un grafic-linie cu GPL si alt carburant isi muta singur
   seria GPL (~4 lei/L) intr-un grafic mic, cu axa Y proprie, sub cel principal
   (~7,5-9 lei/L), in acelasi cadru; altfel GPL ar turti toate liniile. Axa Y si
   marginea din dreapta au aceeasi latime in ambele, deci datele cad una sub alta.

   Culorile entitatilor sunt SURSA UNICA pentru grafice: grafice.js le citeste
   de aici (getComputedStyle), deci o culoare se schimba doar in acest fisier.
   Sunt validate cu validate_palette.js (skill-ul dataviz), nu alese din ochi:
     light, suprafata #FFFFFF, ordinea fixa de mai jos (adiacent): PASS,
       CVD minim 14,4 · vedere normala minim 21,4 · toate >= 3:1;
     dark, suprafata #1A1A18: PASS, CVD minim 10,1 · normal 21,2 · toate >= 3:1;
     cei 5 carburanti (pot aparea impreuna pe pagina de statie) --pairs all:
       light CVD 9,9 / normal 15,8; dark CVD 8,9 / normal 19,1;
     perechile care chiar apar impreuna (Brent+benzina+motorina, Brent+kerosen,
       Brent+VLSFO) --pairs all: PASS in ambele teme.
   Ordinea fixa a sloturilor: benzina, motorina, gpl, benzina premium,
   motorina premium, Brent, kerosen, VLSFO. Nu se adauga o a noua nuanta:
   o serie noua fara entitate ia „context" (gri) sau se imparte in grafice mici.
   Plus/minus (conventia proprietarului: plus verde, minus rosu, ca la bursa)
   se folosesc DOAR unde graficul arata variatii, mereu cu semn (+/−) langa
   valoare: perechea e separata si pe luminozitate (CVD 9,0 light / 10,4 dark). */

:root{
  --pcg-incarcat:1;
  --pcg-benzina:#E8593C;
  --pcg-motorina:#2563EB;
  --pcg-gpl:#1D9E75;
  --pcg-benzina-premium:#8A4B06;
  --pcg-motorina-premium:#5B21B6;
  --pcg-brent:#92074C;
  --pcg-kerosen:#127CA3;
  --pcg-vlsfo:#A6930B;
  --pcg-context:#8F8F87;
  --pcg-context-bara:#C4C4BC;
  --pcg-plus:#009038;
  --pcg-minus:#A51C24;
  --pcg-plus-text:#0A7A34;
  --pcg-minus-text:#A51C24;
  --pcg-grila:rgba(26,26,26,.07);
  --pcg-cruce:rgba(26,26,26,.30);
  --pcg-umbra:0 1px 2px rgba(16,16,14,.05),0 12px 32px -12px rgba(16,16,14,.18);
  --pcg-umbra-tt:0 1px 2px rgba(16,16,14,.08),0 10px 28px -6px rgba(16,16,14,.22);
}
[data-theme="dark"]{
  --pcg-benzina:#F75839;
  --pcg-motorina:#5991FC;
  --pcg-gpl:#029E72;
  --pcg-benzina-premium:#955905;
  --pcg-motorina-premium:#8035EC;
  --pcg-brent:#C60475;
  --pcg-kerosen:#1A86B3;
  --pcg-vlsfo:#A99613;
  --pcg-context:#77776F;
  --pcg-context-bara:#4B4B46;
  --pcg-plus:#12AD48;
  --pcg-minus:#C81E2B;
  --pcg-plus-text:#3DCB6E;
  --pcg-minus-text:#F26D6D;
  --pcg-grila:rgba(240,239,235,.08);
  --pcg-cruce:rgba(240,239,235,.34);
  --pcg-umbra:0 1px 2px rgba(0,0,0,.35),0 14px 36px -14px rgba(0,0,0,.7);
  --pcg-umbra-tt:0 1px 2px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.75);
}

/* Cadrul: un card pe suprafata, cu umbra fina. */
.pcg{position:relative;margin:16px 0 32px;padding:18px 18px 12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--pcg-umbra)}
.pcg-plot{position:relative;height:300px}
.pcg-plot canvas{display:block}
.pcg-plot canvas:focus{outline:none}
.pcg-plot canvas:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}

/* Rezumatul (valoarea curenta + variatia pe perioada afisata). Inaltimea e
   rezervata ca sa nu sara pagina cand scriptul il completeaza. */
.pcg-rezumat{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:40px;margin:0 0 10px}
.pcg-rezumat:empty{display:none}
.pcg-rez-val{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1.1;color:var(--c-text)}
.pcg-rez-uni{font-size:14px;font-weight:500;color:var(--c-text-3)}
.pcg-rez-dif{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--c-bg);color:var(--c-text-2);font-variant-numeric:tabular-nums}
.pcg-rez-dif.pcg-plus{color:var(--pcg-plus-text)}
.pcg-rez-dif.pcg-minus{color:var(--pcg-minus-text)}
.pcg-rez-per{font-size:13px;color:var(--c-text-3)}

/* Legenda (la >= 2 serii; cu panou GPL si la o singura serie ramasa sus, ca eticheta
   statica): chei-linie, clic = ascunde/arata seria. */
.pcg-legenda{display:flex;flex-wrap:wrap;gap:6px 6px;min-height:30px;margin:0 0 8px}
.pcg-legenda:empty{display:none}
/* Cadru cu panou GPL: legenda apare sigur, deci randul ei se rezerva din CSS; altfel graficul
   si panoul coboara cu un rand cand scriptul o completeaza (pagina „sare"). */
.pcg:has(> .pcg-panou:not([hidden])) > .pcg-legenda:empty{display:flex}
.pcg-leg{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--c-border);border-radius:999px;background:transparent;color:var(--c-text-2);font:500 13px/1.3 var(--font);cursor:pointer;transition:opacity .15s,border-color .15s}
.pcg-leg:hover{border-color:var(--c-text-3)}
.pcg-leg[aria-pressed="false"]{opacity:.45}
.pcg-leg[aria-pressed="false"] .pcg-leg-nume{text-decoration:line-through}
.pcg-leg-cheie{display:inline-block;width:14px;height:3px;border-radius:2px;flex:none}
.pcg-leg-cheie.pcg-cheie-bara{width:10px;height:10px;border-radius:3px}
/* Eticheta statica: cu panou GPL, in graficul de sus a ramas o singura serie. O numeste,
   nu comuta nimic, deci nu arata a buton (fara chenar, cursor sau hover); aceeasi greutate
   ca numele din antetul panoului, fiindca cele doua etichete sunt perechi. */
.pcg-leg.pcg-leg--static{cursor:default;border-color:transparent;padding-left:0;padding-right:0;font-weight:600}
.pcg-leg.pcg-leg--static:hover{border-color:transparent}

/* Panoul GPL: separator fin, antet cu cheie-linie + numele seriei + „scara separata",
   apoi graficul mic. Antetul are inaltimea rezervata: sablonul il randeaza gol, scriptul
   il completeaza (pagina nu sare). */
.pcg-panou{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-border)}
.pcg-panou[hidden]{display:none}
.pcg-panou-cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:20px;margin:0 0 4px}
.pcg-panou-nume{font:600 13px/1.3 var(--font);color:var(--c-text-2)}
.pcg-panou-nota{font:400 12px/1.3 var(--font);color:var(--c-text-3)}
.pcg-panou-nume+.pcg-leg-cheie{margin-left:6px}
.pcg-plot.pcg-plot--mic{height:150px}

/* Tooltip-ul HTML: valoarea conduce, numele seriei urmeaza. */
.pcg-tt{position:absolute;top:0;left:0;z-index:5;min-width:140px;max-width:260px;padding:10px 12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;box-shadow:var(--pcg-umbra-tt);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;font-family:var(--font)}
.pcg-tt.pcg-tt--vizibil{opacity:1;transform:none}
.pcg-tt-titlu{font-size:12px;font-weight:500;color:var(--c-text-3);margin:0 0 6px;white-space:nowrap}
.pcg-tt-rand{display:flex;align-items:center;gap:8px;line-height:1.35}
.pcg-tt-rand+.pcg-tt-rand{margin-top:5px}
.pcg-tt-cheie{flex:none;width:12px;height:3px;border-radius:2px}
.pcg-tt-cheie.pcg-cheie-bara{width:9px;height:9px;border-radius:2px}
.pcg-tt-val{font-size:15px;font-weight:700;color:var(--c-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pcg-tt-uni{font-size:12px;font-weight:500;color:var(--c-text-3);margin-left:2px}
.pcg-tt-nume{font-size:12px;color:var(--c-text-2);margin-left:auto;padding-left:10px;white-space:normal;overflow-wrap:anywhere;min-width:0}
.pcg-tt-extra{display:block;font-size:11px;color:var(--c-text-3)}

/* Tabelul (alternativa accesibila la grafic). */
.pcg-tabel{margin:10px 0 0;border-top:1px solid var(--c-border);padding-top:8px}
.pcg-tabel>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--c-text-2);padding:4px 0;list-style:none;display:inline-flex;align-items:center;gap:6px}
.pcg-tabel>summary::-webkit-details-marker{display:none}
.pcg-tabel>summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.pcg-tabel[open]>summary::before{transform:rotate(45deg)}
.pcg-tabel-scroll{max-height:320px;overflow:auto;margin-top:8px;border:1px solid var(--c-border);border-radius:10px}
.pcg-t{width:100%;border-collapse:collapse;font-size:13px}
.pcg-t th,.pcg-t td{padding:7px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--c-border)}
.pcg-t th{text-transform:none;letter-spacing:normal;font-size:13px;background:transparent}
.pcg-t th:first-child,.pcg-t td:first-child{text-align:left}
.pcg-t thead th{position:sticky;top:0;background:var(--c-surface);font-weight:600;color:var(--c-text-2);z-index:1}
.pcg-t td{font-variant-numeric:tabular-nums;color:var(--c-text)}
.pcg-t tbody tr:last-child td{border-bottom:0}
.pcg-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media (max-width:600px){
  .pcg{padding:14px 12px 10px;border-radius:14px;margin:12px 0 24px}
  .pcg-plot{height:260px}
  .pcg-plot.pcg-plot--mic{height:130px}
  .pcg-rez-val{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
  .pcg-tt{transition:none}
  .pcg-leg{transition:none}
}
/* pe mobil pastilele legendei mosteneau min-height:48px global: 102px de legenda peste 260px de grafic */
@media (max-width:600px){.pcg-leg{min-height:36px}.pcg:has(> .pcg-panou:not([hidden])) > .pcg-legenda:empty{min-height:36px}}
@media print{
  .pcg{box-shadow:none}
  .pcg-tt{display:none}
  /* canvas-ul pastra latimea inline de pe ecran (914px) pe o zona tiparibila de ~718px */
  .pcg-plot,.pcg-plot.pcg-plot--mic{height:auto!important}
  .pcg-plot canvas{width:100%!important;height:auto!important}
}