/* p-invoer: pagina's "Aannames", "Prijslijst" en "Notities". Alleen var(--token). */

/* ===================== Aannames ===================== */
.aan-balk {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--roest-zacht);
  border-bottom: 1px solid var(--roest-rand); color: var(--tekst);
  font-size: 13.5px;
}
.aan-balk .ico { color: var(--roest-tekst); flex: none; }
.aan-balk .knop { margin-left: auto; }
.aan-balk[hidden] { display: none; }

.aan-rijen { display: grid; }
.aan-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 190px;
  gap: 20px; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--lijn);
}
.aan-rijen .aan-rij:first-child { border-top: 0; }
.aan-rij[data-gewijzigd="ja"] { background: var(--opp-2); }
.aan-rij__kop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.aan-label { font-size: 14.5px; font-weight: 650; color: var(--tekst); letter-spacing: -.012em; }
.aan-merk { display: inline-flex; align-items: center; gap: 7px; }
.aan-rij__tekst .mini { margin-top: 3px; max-width: 58ch; }
.aan-rij__veld { display: flex; justify-content: flex-start; }
.aan-rij__raakt { display: grid; gap: 2px; }

.aan-getal { position: relative; display: inline-flex; align-items: center; width: 100%; }
.aan-getal .veld { padding-right: 62px; text-align: right; }
.aan-eenheid {
  position: absolute; right: 12px; font-size: 12px; font-weight: 600; font-stretch: 88%;
  color: var(--invoer-tekst); pointer-events: none; opacity: .85;
}
.aan-select { width: 100%; }

.aan-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--lijn); border-radius: var(--r-m); overflow: hidden; }
.aan-snelheid { background: var(--opp); padding: 15px 17px; display: grid; gap: 6px; }
.aan-snelheid p { font-size: 13.5px; color: var(--tekst-2); }
.aan-eerlijk { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--lijn-2); }

@media (max-width: 900px) {
  .aan-rij { grid-template-columns: minmax(0, 1fr) 170px; }
  .aan-rij__raakt { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
}
@media (max-width: 640px) {
  .aan-rij { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 15px; }
  .aan-balk { padding: 12px 15px; }
  .aan-balk .knop { margin-left: 0; }
  .aan-twee { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== Prijslijst ===================== */
.pl-kop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-kop__cel { padding: 20px 22px; border-right: 1px solid var(--lijn); position: relative; }
.pl-kop__cel:last-child { border-right: 0; }
.pl-kop__cel:first-child::before {
  content: ""; position: absolute; left: 22px; top: 0; width: 26px; height: 3px; background: var(--roest);
}
.pl-kop__waarde {
  font-size: 30px; font-weight: 700; font-stretch: 96%; letter-spacing: -.032em;
  line-height: 1.1; margin: 8px 0 6px;
}
.pl-kop__cel .mini { max-width: 46ch; }

.pl-tabel { min-width: 780px; }
.pl-code { color: var(--tekst-3); font-size: 12px; letter-spacing: .04em; }
.pl-afw { display: inline-flex; align-items: baseline; gap: 7px; justify-content: flex-end; }
.pl-afw .num { font-weight: 650; }
.pl-afw__woord {
  font-size: 10.5px; font-weight: 600; font-stretch: 88%; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tekst-3);
}
.pl-afw[data-ernst="slecht"] .num { color: var(--slecht-tekst); }
.pl-afw[data-ernst="let-op"] .num { color: var(--let-op-tekst); }
.pl-afw[data-ernst="goed"] .num { color: var(--goed-tekst); }

@media (max-width: 700px) {
  .pl-kop { grid-template-columns: minmax(0, 1fr); }
  .pl-kop__cel { border-right: 0; border-bottom: 1px solid var(--lijn); padding: 17px 15px; }
  .pl-kop__cel:last-child { border-bottom: 0; }
  .pl-kop__cel:first-child::before { left: 15px; }
  .pl-kop__waarde { font-size: 25px; }
}

/* ===================== Notities ===================== */
.not-veld {
  min-height: 320px; resize: vertical; line-height: 1.62; font-size: 14.5px;
  background: var(--opp-2); padding: 15px 17px;
}
.not-veld::placeholder { color: var(--tekst-3); }
.not-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-stretch: 88%; color: var(--tekst-3);
}
.not-status[data-staat="bewaard"] { color: var(--goed-tekst); }
.not-status[data-staat="bezig"] { color: var(--let-op-tekst); }
.not-voet { display: flex; justify-content: flex-end; margin-top: 9px; }
.not-wis--zeker {
  background: var(--slecht-zacht); border-color: var(--slecht); color: var(--slecht-tekst);
}