/* 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-tabel); color: var(--inkt-2); }
.meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #aab0b8; 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: 13.5px; }
.akkoordbalk .veld-groep { flex: 1 1 18rem; }
.akkoordbalk .veld-groep span { font-size: var(--t-klein); 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: 12px; }
.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 */
.voorstel { border-top: 1px solid var(--lijn); padding: var(--r-4) var(--r-5); }
.voorstel:first-of-type { border-top: 0; }
.voorstel > * + * { margin-top: var(--r-3); }
.voorstel-kop { display: flex; gap: var(--r-3); align-items: flex-start; flex-wrap: wrap; }
.voorstel-kop > div { flex: 1 1 18rem; min-width: 0; }
.voorstel-kop input[type="checkbox"] { margin-top: 3px; }
.voorstel-kop .badge { margin-left: auto; }
.voorstel-titel { font-size: 14.5px; color: var(--inkt); font-weight: 620; }
.voorstel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--r-3) var(--r-5); }
.voorstel-veld { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-tabel); }
.voorstel-veld .veldnaam { font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--inkt-3); }
.voorstel details { border: 1px solid var(--lijn-zacht); border-radius: var(--straal); }
.voorstel details > summary { padding: var(--r-2) var(--r-3); font-size: 13px; }
.voorstel details > :not(summary) { margin-inline: var(--r-3); }
.voorstel details > .tabel-wrap { margin-inline: 0; }
.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; }
.exportbalk { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-4); align-items: center; justify-content: space-between; padding: var(--r-3) var(--r-5); border-top: 1px solid var(--lijn); background: var(--paneel-2); border-radius: 0 0 var(--straal) var(--straal); }
.exportbalk .akkoordbalk-tekst { flex: 1 1 14rem; }
.selecteer-alles { padding: var(--r-3) var(--r-5); border-bottom: 1px solid var(--lijn-zacht); }
.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: #fff; font-weight: 650; font-size: 12px; }
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: 12px; }
.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: #fff; object-fit: contain; }
.logo-voorbeeld .merk-tegel { border: 1px solid var(--lijn); width: 56px; height: 56px; }
.logo-voorbeeld .merk-teken { font-size: 28px; }
.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: #fff; max-width: 100%; }
.geheim { font-family: var(--mono); font-size: 14px; 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: 15px; 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 */
body.publiek { min-height: 100vh; background: var(--vlak); }
.publiek-wrap { max-width: 28rem; margin: 0 auto; padding: var(--r-8) var(--r-4) var(--r-7); display: flex; flex-direction: column; gap: var(--r-4); }
.publiek-merk { display: flex; align-items: center; gap: var(--r-3); background: var(--zij); color: var(--zij-tekst-sterk); padding: var(--r-4) var(--r-5); border-radius: var(--straal); }
.publiek-merk .merk-tegel { width: 40px; height: 40px; }
.publiek-paneel { padding: var(--r-6); outline: none; display: flex; flex-direction: column; gap: var(--r-4); }
.publiek-paneel > * { margin: 0; }
.publiek-paneel h1 { font-size: 22px; }
.publiek-paneel .form { max-width: none; }
.publiek-paneel p { color: var(--inkt-2); }
.publiek-voet { text-align: center; color: var(--inkt-3); font-size: var(--t-klein); }
.publiek .meldingen { margin-bottom: 0; }

/* foutpagina's */
.fout-code { font-family: var(--mono); font-size: 56px; 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; }
@media (max-width: 640px) {
  .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: 15px; letter-spacing: 0.04em; color: var(--inkt); font-weight: 500; overflow-wrap: anywhere; }
.gedempt, .gedempt-dd { color: var(--inkt-3); }
.gedempt-dd { font-size: 12.5px; }
.exact-id { font-size: 11.5px; 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); }
.paneel > .uitleg { padding: var(--r-3) var(--r-5) 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: 4px; background: var(--paneel); color: var(--inkt-2); font: inherit; font-size: 12px; 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: #bfdccd; 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: #f5f8fc; }
.lev-tabel tr.beste td { background: #f3faf6; }
.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); }
.badge.info .ic { fill: none; }
.lev-tabel .badge .ic { fill: none; }

/* 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: 14px; }
}
.labels .knop { height: auto; min-height: 30px; 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 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: 11px; }
  .app { display: block; }
  .paneel { border: 0; box-shadow: none; padding: 0; }
  .tellijst { font-size: 11px; }
  .tellijst th, .tellijst td { padding: 3px 6px; border-bottom: 1px solid #999; }
  .tellijst .tel-vak { border-left: 1px solid #999; border-right: 1px solid #999; min-width: 4.5rem; }
  .tabel-wrap { overflow: visible; }
  .tellijst tr { break-inside: avoid; }
  .tellijst thead { display: table-header-group; }
}