/* public/schermen/tracker/product.css — scherm "product" van de producttracker (ontwerp 22-10-2026, docs/ontwerp/tracker/03-product.html). Alles onder .tt; kleuren alleen uit de huid-variabelen (nooit een hexwaarde). */
.tt .pr-kop{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px}
.tt .pr-titel{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tt .pr-kruimel{margin-top:2px}
.tt .pr-knoppen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative}
.tt .pr-knoppen .knop.wit.icoon{min-height:32px;padding:0 10px}
.tt .pr-regel{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12.5px;color:var(--grijs);margin:-6px 0 2px;align-items:center}
.tt .pr-regel b{color:var(--tekst)}
.tt .pr-regel .pr-land{margin-left:auto}

/* schakelaar (seg) */
.tt .pr-seg{display:inline-flex;border:1px solid var(--rand);border-radius:var(--r2);overflow:hidden;vertical-align:middle;background:var(--vlak)}
.tt .pr-seg button{padding:0 14px;min-height:28px;display:inline-flex;align-items:center;font:inherit;font-size:13px;color:var(--tekst);background:var(--vlak);border:0;border-right:1px solid var(--rand);cursor:pointer}
.tt .pr-seg button:last-child{border-right:0}
.tt .pr-seg button.aan{background:var(--donker);color:var(--wit);font-weight:500}
.tt .pr-seg.klein button{min-height:24px;padding:0 8px}
.tt .pr-seg.smal button{min-height:26px;padding:0 8px}

/* foto en tegels */
.tt .pr-boven{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:start}
.tt .pr-foto{width:120px;height:120px;border-radius:var(--r);background:var(--grijs-300);display:flex;align-items:center;justify-content:center;color:var(--grijs);overflow:hidden}
.tt .pr-tegels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tt .pr-tegels .tegel2{position:relative;min-height:116px}
.tt .pr-tegels .tegel2 .pr-range{margin:2px 0}
.tt .pr-range{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;overflow-wrap:anywhere}
.tt .pr-range small{font-size:12px;color:var(--grijs);font-weight:400;margin-left:4px}
.tt .pr-range.klein{font-size:17px}
.tt .pr-tegels .tegel2 .spark{position:absolute;right:14px;bottom:12px;width:96px;height:30px;opacity:.9}
.tt .pr-tegels .tegel2 .chip.up, .tt .pr-tegels .tegel2 .chip.down{background:transparent;padding:0}
.tt .pr-tegels .tegel2 .chip.neutraal{background:var(--lijn)}

/* winstcalculator */
.tt .pr-calc{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr) 170px;gap:8px 14px;align-items:center;font-size:13px}
.tt .pr-calc .veld, .tt .pr-uit{white-space:nowrap;min-height:32px;padding:5px 10px;text-align:right;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:4px;font-variant-numeric:tabular-nums}
.tt .pr-calc input{border:0;outline:0;background:transparent;font:inherit;color:inherit;text-align:right;width:100%;min-width:0;padding:0}
.tt .pr-calc .veld i{font-style:normal;color:var(--grijs)}
.tt .pr-uit{white-space:nowrap;border:1px solid var(--rand);border-radius:var(--r2);background:var(--grijs-100)}
.tt .pr-uit.marge{background:var(--groen-100);color:var(--groen-900);font-weight:600}
.tt .pr-uit.marge.neg{background:var(--koraal-100);color:var(--koraal-900)}
.tt .pr-calc .vol{grid-column:span 2}
.tt .pr-plekken{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.tt .pr-plekken .pr-opslaan{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.tt .pr-plekken .pr-opslaan .k{text-align:right}
.tt .pr-plekvelden{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.tt .pr-plekvelden input{width:46px;min-height:26px;padding:2px 6px;text-align:center;border:1px solid var(--rand);border-radius:var(--r2);background:var(--vlak);color:var(--tekst);font:inherit;font-variant-numeric:tabular-nums}
.tt .pr-plekvelden input:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-l)}
.tt .pr-eerder{margin-top:10px;border-top:1px solid var(--lijn);padding-top:8px}
.tt .pr-eerder .rij{display:flex;gap:14px;padding:4px 0;font-size:12.5px;flex-wrap:wrap}
.tt .pr-eerder .rij span:first-child{min-width:130px;color:var(--grijs)}

/* balk met de keuzes boven de grafieken */
.tt .pr-bekijk{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tt .pr-bekijk select.sel{min-height:28px;padding:0 10px;font:inherit;font-size:13px;color:var(--tekst);cursor:pointer}
.tt .pr-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tt .pr-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 10px}
.tt .pr-g3 .g{font-size:20px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tt .pr-g3 .g.dominant{color:var(--groen)}

/* grafieken */
.tt .pr-graf{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.tt .pr-graf .as{stroke:var(--grijs-300);stroke-width:1}
.tt .pr-graf text{font-size:10px;fill:var(--grijs);font-family:inherit}
.tt .pr-graf .lijn{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tt .pr-graf .l1{stroke:var(--blauw-900)}
.tt .pr-graf .l2{stroke:var(--blauw-300)}
.tt .pr-graf .l3{stroke:var(--blauw-500)}
.tt .pr-graf .vorig{stroke-dasharray:4 4;opacity:.7}
.tt .pr-graf .eigen{stroke:var(--grijs);stroke-width:1.5;stroke-dasharray:2 4;fill:none}
.tt .pr-graf .p1{fill:var(--blauw-900)}
.tt .pr-graf .p2{fill:var(--blauw-300)}
.tt .pr-graf .p3{fill:var(--blauw-500)}
.tt .pr-graf .hit{fill:transparent;stroke:none;cursor:default}
.tt .tt .pr-graf g:hover .pt{r:4}
.tt .pr-leg{display:flex;gap:14px;font-size:11.5px;color:var(--grijs);margin-top:2px}
.tt .pr-leg i{display:inline-block;width:14px;height:0;border-top:2px solid var(--blauw-900);margin-right:5px;vertical-align:middle}
.tt .pr-leg i.l2{border-top-color:var(--blauw-300)}
.tt .pr-leg i.vorig{border-top-style:dashed}
.tt .pr-leg i.eigen{border-top-color:var(--grijs);border-top-style:dotted}
.tt .pr-grafleeg{height:150px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--grijs);background:var(--grijs-100);border-radius:var(--r2);margin-top:8px;padding:0 20px}

/* verdelingsbalken (reviews, zichtbaarheid) */
.tt .pr-dek{display:grid;grid-template-columns:var(--kol,36px 1fr 80px);gap:12px;align-items:center;padding:7px 0;font-size:13px;font-variant-numeric:tabular-nums}
.tt .pr-dek i{display:block;height:6px;border-radius:3px;background:var(--grijs-300);position:relative;overflow:hidden}
.tt .pr-dek i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--blauw-700);border-radius:3px}
.tt .pr-dek span:last-child{text-align:right}

/* tabellen in kaarten */
.tt .pr-tabelkaart{padding:0;overflow:hidden}
.tt .pr-tabelkop{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--lijn);flex-wrap:wrap}
.tt .pr-tabelkop .vul{flex:1}
.tt .pr-scrol{overflow-x:auto}
.tt .pr-rond th, .tt .pr-rond td{padding-left:10px;padding-right:10px}
.tt .pr-rond td.pr-prod{white-space:normal;min-width:240px;max-width:380px}
.tt .pr-rond tr.dit td, .tt .pr-rond tr.jouw td{background:var(--blauw-100)}
.tt .pr-rond tr:hover td{background:var(--grijs-100)}
.tt .pr-rond tr.dit:hover td, .tt .pr-rond tr.jouw:hover td{background:var(--blauw-100)}
.tt .pr-rond .pr-pt{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}
.tt .pr-rond .pr-mini{width:40px;height:40px;border-radius:8px;background:var(--grijs-300);flex:none;display:flex;align-items:center;justify-content:center;color:var(--grijs);overflow:hidden}
.tt .pr-rond .pr-pt .t{font-weight:600;line-height:1.3;display:block}
.tt .pr-rond .pr-pt a{color:var(--tekst)}
.tt .pr-rond .pr-pt a:hover{color:var(--blauw)}
.tt .pr-rond .pr-vk{font-weight:600;font-size:14px}
.tt .pr-rond .pr-vk small{font-weight:400;color:var(--grijs);font-size:12px;margin-left:3px}
.tt .pr-onder{padding:12px 18px;color:var(--grijs);border-top:1px solid var(--lijn);font-size:13px}
.tt .pr-onder a{margin-left:4px}
.tt .tt-groen{background:var(--groen-100);color:var(--groen-900)}
.tt .tt-rood{background:var(--koraal-100);color:var(--koraal-900)}
.tt .pr-offers th, .tt .pr-offers td{padding:9px 8px}

/* lijstkeuze onder een knop */
.tt .pr-pop{position:absolute;z-index:30;min-width:240px;max-width:320px;background:var(--vlak);border:1px solid var(--rand);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:2px;text-align:left;font-size:13px}
.tt .pr-pop .kopje{padding:4px 8px;color:var(--grijs);font-size:12px;font-weight:500}
.tt .pr-pop button.keuze{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-radius:var(--r2);padding:8px;font:inherit;color:var(--tekst);cursor:pointer}
.tt .pr-pop button.keuze:hover{background:var(--blauw-100);color:var(--blauw)}
.tt .pr-pop .nieuw{display:flex;gap:6px;padding:6px 4px 2px;border-top:1px solid var(--lijn);margin-top:4px}
.tt .pr-pop .nieuw input{flex:1;min-width:0;border:1px solid var(--rand);border-radius:var(--r2);padding:5px 8px;font:inherit;min-height:30px;background:var(--vlak);color:var(--tekst)}
.tt .pr-pop .nieuw input:focus{outline:0;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-l)}
.tt .pr-leegtekst{padding:24px 0;text-align:center;color:var(--grijs)}
.tt .pr-fout{align-items:center;gap:12px;flex-wrap:wrap}

@media (max-width:1100px){
  .tt .pr-tegels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tt .pr-plekken{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .tt .pr-g2{grid-template-columns:1fr}
  .tt .pr-boven{grid-template-columns:1fr}
  .tt .pr-calc{grid-template-columns:minmax(0,1fr) 120px}
}