/* public/schermen/prijs/prijs.css — de prijsassistent (30-09-2026): het prijsblok op de voorstelkaart in de Stuurhut,
   het blok Prijs op de artikelpagina en het scherm Prijstesten. Alleen indeling; kleuren, maten en afstanden komen
   uit de variabelen van bouwdoos.css. */

.prs-kaart { display: grid; gap: var(--a2); margin-top: var(--a2); }
.prs-meta { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a2); font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.prs-meta b { color: var(--tekst); font-weight: 600; }
.prs-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.prs-drie > div { display: grid; gap: var(--a1); align-content: start; min-width: 0; }
.prs-kop { font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.prs-onbekend { font-size: var(--tekst-basis); color: var(--tekst); }
.prs-onbekend small { display: block; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.prs-bron { font-size: var(--tekst-klein); color: var(--tekst-zacht); }   /* 12 px: in een kaart nooit kleiner (kijk:beeld) */
@media (max-width: 900px) { .prs-drie { grid-template-columns: minmax(0, 1fr); } }

/* Scherm Prijstesten: lijst met per test foto, naam, A/B, dag n van 28 en de dagstrook; detail eronder. */
.pt-lijst { display: grid; gap: var(--a2); }
.pt-rij { display: grid; grid-template-columns: 48px minmax(160px, 2fr) minmax(90px, auto) minmax(140px, 1fr) minmax(220px, 3fr); gap: var(--a3);
  align-items: center; width: 100%; text-align: left; font: inherit; color: var(--tekst); cursor: pointer;
  background: var(--vlak); border: none; border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a2) var(--a3); min-height: var(--rijhoogte); }
.pt-rij:hover, .pt-rij:focus-visible, .pt-rij--open { background: var(--accent-licht); }
.pt-naam, .pt-ab, .pt-dag { display: grid; gap: 2px; min-width: 0; font-size: var(--tekst-tabel); }
.pt-ab { font-variant-numeric: tabular-nums; }
.pt-strook { min-width: 0; overflow-x: auto; }
.pt-detail { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a4); display: grid; gap: var(--a3); }
.pt-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-tabel); }
.pt-tabel th, .pt-tabel td { padding: 4px var(--a2); border-bottom: 1px solid var(--lijn); text-align: left; }
.pt-tabel .num { text-align: right; font-variant-numeric: tabular-nums; }
.pt-leeg { padding: var(--a4); background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); font-size: var(--tekst-basis); }
.pt-regels { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--a3); }
.pt-regel { background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); display: grid; gap: var(--a2); align-content: start; }
.pt-regel h3 { margin: 0; font-size: var(--tekst-kop); }
.pt-regel p { margin: 0; font-size: var(--tekst-klein); color: var(--tekst-zacht); }
.pt-drempel { display: grid; gap: 2px; font-size: var(--tekst-klein); }
.pt-drempel input { width: 8em; }
@media (max-width: 1100px) { .pt-rij { grid-template-columns: 48px minmax(0, 1fr) auto; } .pt-dag, .pt-strook { grid-column: 2 / -1; } }

/* Artikelpagina: het blok Prijs (klus 6). */
.prs-tabelkader { overflow-x: auto; }
.prs-voorstellen { display: grid; gap: var(--a3); margin-top: var(--a3); }
.prs-voorstel { display: grid; gap: var(--a2); padding: var(--a3); border-radius: var(--radius-laag); background: var(--laag-week-van); }
.prs-voorstel-zin { font-size: var(--tekst-voorstel); }
.prs-knoppen { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; justify-content: flex-end; }
.prs-tegen { display: flex; gap: var(--a1); align-items: center; font-size: var(--tekst-klein); margin-right: auto; }
.prs-tegen input { width: 7em; }

/* Nawerk: de waarneming op de kaart "inkoopprijs invullen" en het blok Suggesties op Prijstesten. */
.prs-waarneming { font-size: var(--tekst-basis); margin-top: var(--a2); padding: var(--a2) var(--a3); border-radius: var(--radius-veld); background: var(--laag-week-van); }
.prs-sugg-blok { display: grid; gap: var(--a2); }
.prs-sugg-blokkop { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: baseline; }
.prs-sugg-blokkop h2 { margin: 0; font-size: var(--tekst-titel); }
.prs-sugg-lijst { display: grid; gap: var(--a2); }
.prs-sugg { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--a3); align-items: start;
  background: var(--vlak); border-radius: var(--radius-laag); box-shadow: var(--schaduw); padding: var(--a3); }
.prs-sugg-tekst { display: grid; gap: var(--a1); min-width: 0; }
.prs-sugg-kop { display: flex; gap: var(--a2); align-items: baseline; flex-wrap: wrap; font-size: var(--tekst-basis); }
.prs-sugg-zin { font-size: var(--tekst-basis); }
.prs-sugg-knoppen { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; justify-content: flex-end; }
.prs-sugg-knoppen .prs-bron { margin-right: auto; }

/* Nawerk klus 2: Start test in drie tikken en Eigen test. */
.prs-start { display: grid; gap: var(--a2); padding: var(--a3); border-radius: var(--radius-veld); background: var(--laag-week-van); font-size: var(--tekst-basis); }
.prs-start input { width: 7em; }
.prs-start p { margin: 0; }
.prs-eigen-knop { justify-self: start; font-size: var(--tekst-klein); }
.pt-testen { display: grid; gap: var(--a2); }