/* Schermspecifieke opmaak: kop met gegevens, akkoordbalk, verwerken en nieuwe artikelen, Exact-instellingen,
   account en 2FA, de schermen zonder zijbalk (inloggen, wachtwoord) en de foutpagina's. */

/* kop van een artikel, levering of Exact-artikel */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--r-2); font-size: var(--t-ui); color: var(--inkt-2); }
.meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--lijn-sterk); margin-right: 14px; vertical-align: middle; }
.meta a { font-weight: 550; }
.kop h1 + .meta { margin-top: var(--r-3); }
.kop-tekst .labels { margin-top: var(--r-3); }
.opbouw { margin-bottom: 0; }

/* akkoord: bar onder een tabel met selectievakjes en het akkoordformulier op de productpagina */
.akkoordbalk { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-4); align-items: flex-end; padding: var(--r-4) var(--r-5); border-top: 1px solid var(--lijn); background: var(--paneel-2); border-radius: 0 0 var(--straal) var(--straal); }
.akkoordbalk-tekst { flex: 1 1 100%; font-size: var(--t-ui); }
.akkoordbalk .veld-groep { flex: 1 1 18rem; }
.akkoordbalk .veld-groep span { font-size: var(--t-mini); font-weight: 600; color: var(--inkt-2); }
.akkoordbalk .veld { width: 100%; }
.akkoordbalk-acties { display: flex; gap: var(--r-2); flex-wrap: wrap; }
.paneel > form.akkoordbalk, .knoprij > form.akkoordbalk { border: 1px solid var(--lijn); border-radius: var(--straal); }
.akkoord-reden { color: var(--geel); font-size: var(--t-mini); }
.paneel > .akkoordformulier { margin-inline: 0; }
.paneel > .akkoordformulier + * { margin-top: var(--r-4); }
.akkoordformulier > .akkoordbalk { margin: 0; }
.allesbalk { display: flex; justify-content: flex-end; margin: 0 0 var(--r-3); }

/* verwerken en nieuwe artikelen */
/* nieuwe artikelen: kaartjes per factuur; "Alle velden bekijken" gaat naar de eigen pagina van het voorstel */
.actiebalk { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-5); align-items: center; justify-content: space-between; padding: var(--r-4) var(--r-5); background: var(--paneel-2); border-block: 1px solid var(--lijn-zacht); }
.paneel > .actiebalk { margin-inline: 0; }
.actiebalk .aantallen { padding: 0; border: 0; font-size: var(--t-basis); color: var(--inkt-2); }
.actiebalk-tekst { flex: 1 1 20rem; min-width: 0; }
.actiebalk-tekst > * + * { margin-top: 2px; }
.actiebalk-form { display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-4); align-items: center; }
.actiebalk-form .veld-groep.vink { min-height: 0; align-self: center; }
.actiebalk-noot { max-width: 32rem; }
.paneel > .actiebalk-uitleg { border-top: 0; }
.actiebalk-uitleg > summary { font-weight: 500; color: var(--inkt-3); padding-block: var(--r-2); }
.kaartgroep { padding: var(--r-4) var(--r-5) var(--r-5); }
.paneel > .kaartgroep { margin-inline: 0; }
.paneel > .kaartgroep + .kaartgroep { margin-top: 0; border-top: 1px solid var(--lijn-zacht); }
.kaartgroep-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r-1) var(--r-3); font-size: var(--t-basis); margin-bottom: var(--r-3); }
.kaartgroep-kop .sub { font-weight: 400; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--r-3); }
.kaart { display: flex; flex-direction: column; gap: var(--r-2); min-width: 0; padding: var(--r-3) var(--r-4); background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--straal); box-shadow: var(--schaduw); }
.kaart-let { border-color: var(--geel-merk); }
.kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); flex-wrap: wrap; }
.kaart-code { font-size: var(--t-mini); color: var(--inkt-3); }
.kaart-code .code { color: var(--inkt-2); font-weight: 600; }
.voorstel-titel { margin: 0; font-size: var(--t-basis); line-height: 1.35; color: var(--inkt); font-weight: 650; overflow-wrap: anywhere; }
.kaart-kenmerken { font-size: var(--t-ui); color: var(--inkt-2); }
.kaart-exactnaam { font-size: var(--t-mini); color: var(--inkt-2); overflow-wrap: anywhere; }
.kaart-exactnaam .badge { margin-right: var(--r-1); }
.kaart-prijzen { display: flex; gap: var(--r-5); margin-top: var(--r-1); }
.kaart-prijzen dt { font-size: var(--t-mini); font-weight: 600; color: var(--inkt-3); }
.kaart-prijzen dd { font-size: var(--t-basis); font-variant-numeric: tabular-nums; }
.kaart-prijzen dd.kaart-verkoop { font-weight: 650; }
.kaart-prijzen dd.sub { font-size: var(--t-mini); }
.kaart-reden { font-size: var(--t-mini); padding: var(--r-2) var(--r-3); border-radius: var(--straal-klein); }
.kaart-reden p + p { margin-top: 2px; }
.kaart-meer { display: flex; align-items: center; gap: var(--r-1); margin-inline: calc(-1 * var(--r-4)); margin-bottom: calc(-1 * var(--r-3)); padding: var(--r-2) var(--r-4); border-top: 1px solid var(--lijn-zacht); border-radius: 0 0 var(--straal) var(--straal); font-size: var(--t-ui); font-weight: 500; color: var(--accent); text-decoration: none; }
.kaart-meer:hover { background: var(--accent-vlak); color: var(--accent-sterk); }
.kaart-meer .ic { width: 16px; height: 16px; }
.kaart-velden { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--r-3) var(--r-5); }
.kaart-veld { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-ui); }
.kaart-veld dt { font-size: var(--t-mini); font-weight: 600; color: var(--inkt-3); }
.kaart-velden.een-kolom { grid-template-columns: minmax(0, 1fr); gap: var(--r-3); }
.paneel > .kaart-velden, .paneel > .kaart-prijzen { padding-block: var(--r-2); }
.paneel > .kaart-velden:last-child { padding-bottom: var(--r-5); }
.kaart-prijzen.groot { flex-wrap: wrap; gap: var(--r-3) var(--r-7); padding-bottom: var(--r-4); border-bottom: 1px solid var(--lijn-zacht); }
.kaart-prijzen.groot dd { font-size: var(--t-kop); }
.voorstel-pagina { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-5); align-items: start; }
.voorstel-hoofd, .voorstel-rail { display: grid; gap: var(--r-5); min-width: 0; }
@media (min-width: 1100px) { .voorstel-pagina { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); } .voorstel-rail { position: sticky; top: var(--r-5); } }
.paneel > .form { padding-bottom: var(--r-5); }
.paneel > .blok:last-child, .paneel > .sub:last-child { margin-bottom: var(--r-5); }
.aanvullijst { display: grid; gap: var(--r-2); margin-bottom: var(--r-4); list-style: none; }
.aanvullijst li { display: grid; grid-template-columns: minmax(0, 12rem) auto; justify-content: start; align-items: center; gap: var(--r-3); }
.nakijklijst { margin-bottom: var(--r-5); padding-left: 18px; list-style: disc; font-size: var(--t-ui); display: grid; gap: var(--r-1); }
.kaart-voet { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); flex-wrap: wrap; margin-top: auto; min-height: 32px; }
.kaart-voet form { margin-left: auto; }
.paneel > .kaart-export { margin-top: 0; }
.kaart-export > summary { font-weight: 500; color: var(--inkt-2); }
.exportlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--r-4); max-height: 22rem; overflow-y: auto; padding: var(--r-2) var(--r-3); border: 1px solid var(--lijn-zacht); border-radius: var(--straal-klein); }
.exportlijst .veld-groep.vink { min-height: 30px; align-self: auto; }
.exportlijst label { overflow-wrap: anywhere; }
.pagina-voet { padding-inline: var(--r-1); }
.pagina-voet a { color: var(--inkt-2); }
.nieuw-artikel { border: 1px solid var(--lijn-zacht); border-radius: var(--straal); }
.nieuw-artikel > summary { padding: var(--r-3) var(--r-4); font-weight: 500; }
.paneel > .nieuw-artikel { margin-inline: var(--r-5); }
.nieuw-artikel > :not(summary) { margin-inline: 0; }
.aanroep { padding: var(--r-3) 0; border-top: 1px solid var(--lijn-zacht); }
.aanroep-kop { display: flex; flex-wrap: wrap; gap: var(--r-2); align-items: center; }
.aanroep-kop code { overflow-wrap: anywhere; }
.stap { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--inkt); color: var(--op-kleur); font-weight: 650; font-size: var(--t-mini); }
pre.json { background: var(--paneel-2); border: 1px solid var(--lijn); border-radius: var(--straal-klein); padding: var(--r-3); overflow-x: auto; margin: var(--r-2) 0 0; font-size: var(--t-mini); }
.modus { display: flex; flex-wrap: wrap; gap: var(--r-3); align-items: center; }

/* instellingen */
.stappen { padding-left: 20px; list-style: decimal; display: grid; gap: var(--r-2); }
.stappen li::marker { color: var(--inkt-3); font-weight: 650; }
.exact-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-5); align-items: start; }
@media (min-width: 1100px) { .exact-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.waarschuwingen { padding-left: 18px; list-style: disc; }
.logo-blok { display: flex; flex-wrap: wrap; gap: var(--r-6); align-items: flex-start; }
.logo-voorbeeld { display: flex; flex-direction: column; gap: var(--r-2); align-items: flex-start; min-width: 8rem; max-width: 14rem; }
.logo-voorbeeld img { border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--paneel); object-fit: contain; }
.logo-voorbeeld .merk-tegel { border: 1px solid var(--lijn); width: 56px; height: 56px; }
.logo-voorbeeld .merk-teken { font-size: var(--t-cijfer); }
.logo-blok .form { flex: 1 1 22rem; }
.paneel > .logo-blok { align-items: flex-start; }

/* account, 2FA en back-upcodes */
.qr-blok { display: flex; flex-wrap: wrap; gap: var(--r-6); align-items: flex-start; }
.qr { width: 224px; height: 224px; border: 1px solid var(--lijn); border-radius: var(--straal); background: var(--paneel); max-width: 100%; }
.geheim { font-family: var(--mono); font-size: var(--t-basis); letter-spacing: 0.05em; overflow-wrap: anywhere; background: var(--paneel-2); border: 1px solid var(--lijn); padding: 6px 10px; border-radius: var(--straal-klein); display: inline-block; }
.codelijst { margin-block: var(--r-2); display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--r-2); }
.codelijst li { font-family: var(--mono); font-size: var(--t-kop); background: var(--paneel-2); border: 1px solid var(--lijn); border-radius: var(--straal-klein); padding: 8px var(--r-3); letter-spacing: 0.04em; white-space: nowrap; }
.treffers li { padding: 10px var(--r-5); border-bottom: 1px solid var(--lijn-zacht); display: flex; flex-wrap: wrap; gap: 2px var(--r-3); align-items: baseline; }
.treffers li:last-child { border-bottom: 0; }
.treffers a { font-weight: 600; }
.bestandenlijst li { display: flex; flex-wrap: wrap; gap: 2px var(--r-3); align-items: baseline; padding: 6px 0; }
.paneel > .treffers { margin-inline: 0; margin-top: 0; }
.paneel > .treffers:last-child { margin-bottom: 0; }

/* schermen zonder zijbalk: inloggen, 2FA, wachtwoord. Twee vlakken: links het merk in druif, rechts het formulier op papier. */
body.publiek { min-height: 100vh; background: var(--vlak); }
.publiek-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.publiek-merkvlak {
  --druif: #2b1a55; --druif-licht: #3d2578; --druif-tekst: #ffffff; --druif-zacht: rgba(255, 255, 255, 0.72);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--r-8);
  padding: var(--r-8) clamp(var(--r-6), 5vw, 56px);
  background: linear-gradient(160deg, var(--druif) 0%, var(--druif-licht) 55%, var(--accent) 125%);
  color: var(--druif-tekst);
}
.publiek-merkvlak::before, .publiek-merkvlak::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.publiek-merkvlak::before { width: 620px; height: 620px; right: -220px; bottom: -260px; background: rgba(255, 255, 255, 0.07); }
.publiek-merkvlak::after { width: 280px; height: 280px; right: 160px; bottom: 200px; background: rgba(255, 255, 255, 0.05); }
.publiek-merk { display: flex; align-items: center; gap: var(--r-3); color: var(--druif-tekst); }
.publiek-merk .merk-tegel { width: 48px; height: 48px; border-radius: var(--straal-klein); background: var(--paneel); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45); }
.publiek-merk .merk-teken { font-size: 24px; color: var(--druif); }
.publiek-merk .merk-naam { font-size: var(--t-kop); font-weight: 700; letter-spacing: 0.02em; }
.publiek-merk .merk-sub { color: var(--druif-zacht); }

/* het wijnrek: zes vakken breed, een fles is een lichte cirkel met de bodemkring erin */
.wijnrek { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; align-self: flex-start; }
.wijnrek span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); position: relative; }
.wijnrek span.vol { background: rgba(255, 255, 255, 0.92); border-color: transparent; }
.wijnrek span.vol::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 3px solid var(--druif-licht); background: var(--druif); }

.publiek-claim { max-width: 30rem; }
.publiek-kop { font-size: clamp(30px, 3.6vw, 48px); font-weight: 760; font-stretch: 106%; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--r-5); color: var(--druif-tekst); }
.publiek-trefwoorden { display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-5); margin: 0; padding: 0; list-style: none; font-size: var(--t-mini); font-weight: 560; letter-spacing: 0.14em; text-transform: uppercase; color: var(--druif-zacht); }

.publiek-paneel { align-self: center; justify-self: center; width: 100%; max-width: 400px; padding: var(--r-8) var(--r-5); outline: none; display: flex; flex-direction: column; gap: var(--r-4); }
.publiek-paneel > * { margin: 0; }
.publiek-eyebrow { font-size: var(--t-mini); font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.publiek-paneel h1 { font-size: 32px; font-weight: 740; font-stretch: 104%; letter-spacing: -0.02em; line-height: 1.1; margin-top: calc(-1 * var(--r-2)); }
.publiek-intro { color: var(--inkt-3); }
.publiek-paneel .form { max-width: none; margin-top: var(--r-3); gap: var(--r-5); }
.publiek-paneel label { font-size: var(--t-ui); color: var(--inkt); }
.publiek-paneel .veld-groep { gap: 6px; }
.publiek-paneel .veld { height: 46px; padding-inline: var(--r-4); font-size: var(--t-basis); border-radius: 12px; border-width: 1.5px; border-color: var(--lijn); transition: border-color 0.15s, box-shadow 0.15s; }
.publiek-paneel .veld:hover { border-color: var(--lijn-sterk); }
.publiek-paneel .veld:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.publiek-paneel .code-veld { height: 56px; }
.publiek-paneel p { color: var(--inkt-2); }
.publiek-paneel .form-acties { flex-direction: column; align-items: stretch; gap: var(--r-4); margin-top: var(--r-1); }
.publiek-paneel .form-acties > a { align-self: center; font-size: var(--t-ui); color: var(--inkt-2); }
.publiek-paneel .veld-groep.vink { align-self: flex-start; }
.publiek-knop { height: 48px; border-radius: 12px; font-size: var(--t-basis); gap: var(--r-2); }
.publiek-knop .ic { transition: transform 0.15s; }
.publiek-knop:hover .ic { transform: translateX(3px); }
.wachtwoord-veld { position: relative; }
.wachtwoord-veld .veld { padding-right: 48px; }
.wachtwoord-oog { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: var(--straal-klein); background: none; color: var(--inkt-3); display: grid; place-items: center; cursor: pointer; }
.wachtwoord-oog:hover { color: var(--inkt); background: var(--paneel-2); }
.wachtwoord-oog .ic { width: 18px; height: 18px; }
.wachtwoord-oog .ic + .ic, .wachtwoord-oog[aria-pressed="true"] .ic:first-child { display: none; }
.wachtwoord-oog[aria-pressed="true"] .ic + .ic { display: block; }
.publiek-voet { margin-top: var(--r-6); color: var(--inkt-3); font-size: var(--t-mini); }
.publiek .meldingen { margin-bottom: 0; }

@media (max-width: 880px) {
  .publiek-wrap { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .publiek-merkvlak { padding: var(--r-5) var(--r-4); gap: var(--r-5); justify-content: flex-start; }
  .publiek-merkvlak::before { width: 360px; height: 360px; right: -140px; bottom: -200px; }
  .publiek-merkvlak::after { display: none; }
  .wijnrek { display: none; }
  .publiek-kop { font-size: 24px; margin-bottom: var(--r-3); }
  .publiek-trefwoorden { display: none; }
  .publiek-paneel { padding: var(--r-6) var(--r-4) var(--r-7); max-width: 440px; }
  .publiek-paneel h1 { font-size: 26px; }
}

/* foutpagina's */
.fout-code { font-family: var(--mono); font-size: var(--t-cijfer-groot); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--rood); }
.fout-icoon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rood-vlak); color: var(--rood); }
.fout-icoon .ic { width: 22px; height: 22px; }
.fout-kop { display: flex; align-items: center; gap: var(--r-4); }
.fout-acties { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.akkoordformulier > .akkoordbalk { border-radius: 0; }
.paneel > .akkoordformulier + .pager { margin-top: 0; }
/* kop van een inkoopfactuur (wizard): leverancier met het kale factuurnummer, de kerngegevens als een regel met labels */
.kop-nummer { font-family: var(--mono); font-weight: 500; font-size: 0.8em; letter-spacing: 0; color: var(--inkt-3); white-space: nowrap; }
.factuurfeiten { display: flex; flex-wrap: wrap; gap: var(--r-2) var(--r-6); margin-top: var(--r-3); font-size: var(--t-ui); }
.factuurfeiten > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.factuurfeiten dt { font-size: var(--t-mini); color: var(--inkt-3); }
.factuurfeiten dd { color: var(--inkt); font-weight: 550; }
.factuurfeiten dd .sub { font-weight: 400; color: var(--inkt-3); }
.factuurfeiten .getal { font-variant-numeric: tabular-nums; }
.factuurfeiten .code { font-family: var(--mono); font-weight: 450; }
.kop > .factuur-acties { align-self: flex-start; margin-top: var(--r-5); }
.knop .knop-extern { width: 14px; height: 14px; margin-left: -2px; opacity: 0.7; }
@media (max-width: 640px) {
  .factuurfeiten { gap: var(--r-2) var(--r-5); }
  .kop > .factuur-acties { margin-top: 0; }
  .meta { gap: 2px 12px; }
  .meta > span + span::before { display: none; }
}

/* Exact-artikel: kop met iconen, kenmerken als definitielijst met iconen, kopieerknop, leveranciers en prijsopbouw */
.kop h1 { overflow-wrap: anywhere; text-wrap: balance; }
.meta-artikel { row-gap: 6px; }
.meta-item { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.meta-item .ic { width: 15px; height: 15px; color: var(--inkt-3); }
.raster-exact { align-items: start; }
.raster-exact > .paneel, .raster-exact > .kolom { min-width: 0; }

.dl-icoon > .dl-rij { grid-template-columns: minmax(9.5rem, 12rem) minmax(0, 1fr); align-items: start; }
.kenmerk-label { display: flex; align-items: flex-start; gap: var(--r-2); color: var(--inkt-3); }
.kenmerk-label .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--inkt-3); }
.dl-icoon dd { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--r-2); }
.dl-icoon dd .code.barcode { font-size: var(--t-kop); letter-spacing: 0.04em; color: var(--inkt); font-weight: 500; overflow-wrap: anywhere; }
.gedempt, .gedempt-dd { color: var(--inkt-3); }
.gedempt-dd { font-size: var(--t-mini); }
.exact-id { font-size: var(--t-label); overflow-wrap: anywhere; }
.leeg-klein { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-5); }
.leeg-klein .ic { width: 22px; height: 22px; color: var(--inkt-3); }
.blok-icoon { display: flex; align-items: flex-start; gap: var(--r-3); margin: var(--r-4) var(--r-5) 0; }
.blok-icoon .ic { margin-top: 2px; }
.blok.goed .ic { color: var(--groen); }
.blok.let .ic { color: var(--geel); }
/* de inspringing komt van .paneel > .uitleg in componenten.css; hier niet nog eens (gaf een dubbele inspringing) */
.paneel > .uitleg { padding: 0; }
.paneel > .akkoord-acties { padding: var(--r-4) var(--r-5) var(--r-5); }
.paneel > .paneel-noot { border-top: 0; }

/* kopieerknop */
.kopieer { display: inline-flex; align-items: center; }
.kopieer-knop { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border: 1px solid var(--lijn); border-radius: var(--straal-klein); background: var(--paneel); color: var(--inkt-2); font: inherit; font-size: var(--t-mini); font-weight: 550; cursor: pointer; }
.kopieer-knop:hover { border-color: var(--lijn-sterk); color: var(--inkt); background: var(--paneel-2); }
.kopieer-knop .ic { width: 13px; height: 13px; }
.kopieer-gelukt { display: none; align-items: center; gap: 5px; color: var(--groen); }
.kopieer.is-gekopieerd .kopieer-tekst { display: none; }
.kopieer.is-gekopieerd .kopieer-gelukt { display: inline-flex; }
.kopieer.is-gekopieerd .kopieer-knop { border-color: transparent; background: var(--groen-vlak); color: var(--groen); }

/* leveranciers */
.lev-tabel .lev-naam { min-width: 12rem; max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
.lev-tabel .lev-naam > .lev-ster { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--blauw); }
.lev-tabel .lev-naam > .lev-ster .ic { width: 15px; height: 15px; fill: currentColor; }
.lev-tabel .lev-tekst { overflow-wrap: anywhere; }
.lev-tabel .lev-code { white-space: normal; overflow-wrap: anywhere; max-width: 12rem; }
.lev-tabel tr.lev-hoofd td { background: color-mix(in srgb, var(--blauw-vlak) 45%, var(--paneel)); }
.lev-tabel tr.beste td { background: color-mix(in srgb, var(--groen-vlak) 45%, var(--paneel)); }
.lev-tabel tr.beste td:first-child { box-shadow: inset 3px 0 0 var(--groen-merk); }
.lev-tabel tr.lev-hoofd td:first-child { box-shadow: inset 3px 0 0 var(--blauw); }
.lev-tabel tr.beste.lev-hoofd td:first-child { box-shadow: inset 3px 0 0 var(--groen-merk); }
.lev-tabel tr.verouderd td { color: var(--inkt-3); }
.lev-tabel tr.verouderd .sterk { font-weight: 500; }
.lev-tabel td .sub { margin-top: 2px; font-weight: 400; }
.lev-tabel td.r .sub { white-space: normal; }
.badge.info { background: var(--blauw-vlak); color: var(--blauw); }

/* lijst */
.kol-naam .naam { overflow-wrap: anywhere; font-weight: 520; }
.kol-naam .naam-tekst { display: block; max-width: 34rem; }
.lijst-tabel .kol-naam { min-width: 16rem; max-width: 30rem; white-space: normal; }
.lijst-tabel .kol-naam .naam-tekst { display: block; color: var(--inkt); font-weight: 560; overflow-wrap: anywhere; }
.lijst-tabel .kol-naam .badges { margin-top: 4px; }
.lijst-tabel .kol-naam .sub { margin-top: 2px; }
.lijst-tabel .barcode-kol { letter-spacing: 0.02em; }
.lijst-tabel td .badge { font-variant-numeric: tabular-nums; }
.lijst-tabel td.r .gedempt { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .dl-icoon > .dl-rij { grid-template-columns: 1fr; gap: 2px; }
  .lev-tabel .lev-naam, .lijst-tabel .kol-naam { min-width: 0; max-width: none; }
  .lev-tabel td.stipkolom { display: none; }
  .lijst-tabel .kol-naam .naam-tekst { font-size: var(--t-basis); }
}
.labels .knop { height: auto; min-height: 32px; white-space: normal; text-align: left; max-width: 100%; padding-block: 5px; }
@media (max-width: 640px) {
  .lev-tabel td.s-4 { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
  .lev-tabel td.s-4 .badges { justify-content: flex-start; }
  .lev-tabel .lev-code { max-width: none; }
  .tabel.smal.proef-tabel th:last-child, .tabel.smal.proef-tabel td:last-child { padding-right: var(--r-3); }
  .tabel.proef-tabel .kol-naam { min-width: 0; }
}
.tabel tr.vervaagt td { opacity: 0; transition: opacity .2s ease-out; }
.tabel tr.klapt-in td { opacity: 0; padding-top: 0; padding-bottom: 0; border-width: 0; line-height: 0; font-size: 0; overflow: hidden; transition: padding .25s ease-in-out, line-height .25s ease-in-out, font-size .25s ease-in-out, border-width .25s ease-in-out; }
.tabel tr.klapt-in td * { padding-top: 0; padding-bottom: 0; border-width: 0; line-height: 0; font-size: 0; min-height: 0; transition: inherit; }
@media (prefers-reduced-motion: reduce) { .tabel tr.vervaagt td, .tabel tr.klapt-in td, .tabel tr.klapt-in td * { transition: none; } }
.print-regel { display: none; }
.tellijst .tel-vak { min-width: 6rem; }
@media print {
  .zijbalk, .geen-print, .sla-over, .meldingen, header.bovenbalk, .inhoud > .kop, .voet { display: none !important; }
  .print-regel { display: block; margin: 0 0 .5rem; font-size: var(--t-label); }
  .app { display: block; }
  .paneel { border: 0; box-shadow: none; padding: 0; }
  .tellijst { font-size: var(--t-label); }
  .tellijst th, .tellijst td { padding: 3px 6px; border-bottom: 1px solid var(--inkt-3); }
  .tellijst .tel-vak { border-left: 1px solid var(--inkt-3); border-right: 1px solid var(--inkt-3); min-width: 4.5rem; }
  .tabel-wrap { overflow: visible; }
  .tellijst tr { break-inside: avoid; }
  .tellijst thead { display: table-header-group; }
}

/* stap Prijzen: de rustige actierij onder de tabel Verkoopprijzen (teller links, akkoord rechts) */
.paneel > .actierij { margin-inline: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3) var(--r-5); padding: var(--r-4) var(--r-5); border-top: 1px solid var(--lijn-zacht); }
.actierij-teller { margin-right: auto; font-size: var(--t-ui); color: var(--inkt-2); font-variant-numeric: tabular-nums; }
.actierij .veld-groep.vink { min-height: 0; align-self: center; }
.actierij-reden > summary { color: var(--inkt-3); font-size: var(--t-ui); padding-block: var(--r-2); }
.actierij-reden .veld { width: min(24rem, 100%); margin-top: var(--r-2); }
.prijzentabel .sub { display: block; }
.kandidaten { display: grid; gap: var(--r-1); margin: 0 0 var(--r-2); padding: 0; border: 0; min-width: 0; }

/* Inkoophistorie: de lijst met producten en de tarieven per leverancier op het Exact-artikel */
.ih-tabel .ih-nr { width: 3rem; font-variant-numeric: tabular-nums; }
.ih-tabel .ih-lev { color: var(--inkt-2); }
.ih-tarieven .ih-groep th, .ih-tarieven .ih-groep td { background: var(--paneel-2); font-size: var(--t-ui); font-weight: 600; color: var(--inkt); border-top: 1px solid var(--lijn); position: static; }
.ih-tarieven tbody:first-of-type .ih-groep th, .ih-tarieven tbody:first-of-type .ih-groep td { border-top: 0; }
.ih-tarieven .ih-groep .sub { display: inline; margin-left: var(--r-2); font-weight: 400; }
.ih-tarieven .ih-groep .badge { margin-left: var(--r-2); }
.ih-tarieven .ih-controle { display: block; margin-top: 2px; font-size: var(--t-mini); font-weight: 400; color: var(--inkt-2); white-space: normal; }
.ih-tarieven tbody tr:not(.ih-groep) td:first-child { padding-left: calc(var(--r-5) + var(--r-3)); color: var(--inkt-2); }
.ih-tarieven .ih-retour td { color: var(--inkt-2); font-style: normal; }
.ih-tarieven .ih-retour td .sub { display: inline; margin-left: var(--r-2); }
.ih-volledig > summary { display: flex; align-items: baseline; gap: var(--r-3); padding: var(--r-4) var(--r-5); cursor: pointer; }
.ih-volledig > summary h2 { margin: 0; font-size: var(--t-sectie); }
.ih-klopt { color: var(--groen); }
.ih-toets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); margin: 0; padding: var(--r-3) var(--r-5); font-size: var(--t-ui); color: var(--inkt-2); border-bottom: 1px solid var(--lijn-zacht); }
.ih-jaren { padding: var(--r-3) var(--r-5) 0; }
.ih-jaren > summary { cursor: pointer; font-size: var(--t-ui); font-weight: 550; color: var(--accent); }
.ih-jaren .tabel { max-width: 28rem; margin-top: var(--r-2); }

/* ---------- postvak ---------- */
.upload-mail { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--r-2); margin: var(--r-3) auto 0; color: var(--inkt-2); font-size: var(--t-ui); }
.upload-mail > .ic { color: var(--inkt-3); }
.upload-mail-status { flex-basis: 100%; text-align: center; color: var(--inkt-3); font-size: var(--t-mini); }
.pv-boven { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-3); }
.pv-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2) var(--r-3); color: var(--inkt-3); font-size: var(--t-mini); }
.pv-status p { margin: 0; }
.pv-adres { overflow-wrap: anywhere; white-space: normal; }
.pv-adressen td { vertical-align: middle; }
.pv-afzender { display: flex; align-items: center; gap: var(--r-2); }
.pv-afzender + .pv-afzender { margin-top: 2px; }
.pv-nieuw > summary { padding: 0; font-size: var(--t-mini); }
.pv-nieuw > :not(summary) { margin-inline: 0; }
.pv-nieuw .hulp { max-width: 32ch; }
.pv-kop { margin: 0 var(--r-5) var(--r-3); }
.pv-bericht > .blok { margin: 0 var(--r-5) var(--r-3); }
.pv-acties { display: flex; flex-wrap: nowrap; gap: var(--r-2); align-items: center; justify-content: flex-end; }
.pv-voet { padding: var(--r-3) var(--r-5) var(--r-4); }