/* Videostijl pakket 3: de groep Product.
   Productscan (geschiedenis, detailvenster, v2, admin), Producten (lijst, detail, vensters), testdag-vensters,
   Winst (Dagwinst, Per product, BEP-velden), Leveranciersprijzen (+ geschiedenis) en Aanvragen voor de leverancier.
   Bouwt op vs-shared.css (pakket 1): zelfde tokens (--vs-*), kaarten, velden, badges en knoppen. Niets dubbel.
   De hoofdschermen van de Productscan (upload, bezig, resultaat, Mijn scans) en de Winst-uitkomst blijven zoals ze zijn.

   Geladen ná vs-shared.css. Winnen zonder !important: elke regel begint met
     body:not(#vs):not(#vs-product)  → twee id's, net als vs-shared; later geladen wint bij gelijke zwaarte.
   Rust bij werken: geen gloed en geen animatie. Alleen het wachtlijstje van Dagwinst draait een ring. */

/* ---------- Kop voor pagina's zonder #165-kop (Geschiedenis, Aanvragen) ---------- */
body:not(#vs):not(#vs-product) :is(#vpHistoryHead, #supplierDeskHead) { display: flex; flex-direction: column; gap: 8px; margin: 0; }
body:not(#vs):not(#vs-product) :is(#vpHistoryHead, #supplierDeskHead) .vs-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--vs-copy); max-width: 62ch; }

/* ---------- Vensters: labels, groepjes en hulpregels ---------- */
/* Eén label-stijl (zoals vs-label), ook voor de oude .label, de groepskopjes en een label met de tekst erin. */
body:not(#vs):not(#vs-product) .office-modal-card :is(.label, .calc-group-label, .calc-staffel label > span, label.pd-testday-field),
body:not(#vs):not(#vs-product) #supplierQuotesCenter :is(.sq-name-edit, .sq-file-label) {
  font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vs-copy);
}
body:not(#vs):not(#vs-product) .office-modal-card label.pd-testday-field { display: grid; gap: 8px; }
/* Stukjes in een venster (Verkoopprijs, Inkoop + verzending): glas, geen dubbele rand. */
body:not(#vs):not(#vs-product) .office-modal-card .calc-staffel-block {
  display: grid; gap: 8px; margin: 14px 0 0; padding: 14px; border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none;
}
body:not(#vs):not(#vs-product) .office-modal-card .calc-staffel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body:not(#vs):not(#vs-product) .office-modal-card .calc-staffel label { display: grid; gap: 6px; min-width: 0; }
body:not(#vs):not(#vs-product) .office-modal-card .calc-staffel label > span { font-weight: 500; color: var(--vs-muted); }
/* Hulpregels: klein en rustig. Foutregels blijven rood. */
body:not(#vs):not(#vs-product) .office-modal-card :is(.calc-field-hint, .pd-field-help, .pd-testday-hint, .wc-field-hint) { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--vs-muted); }
body:not(#vs):not(#vs-product) .office-modal-card :is(.calc-field-error, .pd-field-error) { font-size: 13px; color: var(--vs-bad); }
/* Kopjes van een deel in het testdag-venster: klein mono-regeltje, zoals de kop boven een tabel. */
body:not(#vs):not(#vs-product) .office-modal-card .pd-testday-section > h4 {
  margin: 0 0 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vs-muted);
}
body:not(#vs):not(#vs-product) .office-modal-card .pd-testday-section { padding: 18px 0 0; border: 0; border-top: 1px solid var(--vs-row); background: none; }
body:not(#vs):not(#vs-product) .office-modal-card .pd-testday-section:first-child { padding-top: 0; border-top: 0; }
body:not(#vs):not(#vs-product) .office-modal-card .pd-testday-product { margin: 0; font-size: 15px; font-weight: 600; color: var(--vs-text); }
/* Een productkeuze in een venster (Shopify kiezen, testdag-product): rustige rijen. */
body:not(#vs):not(#vs-product) .office-modal-card :is(.wc-product-list, .shopify-pick-list) > :is(button, li, div) { border-radius: 12px; }

/* Scan-detailvenster: "Toevoegen aan producten" (of "Product bekijken") is de enige blauwe knop. */
body:not(#vs):not(#vs-product) #evalFullModal :is(#evalModalRerunBtn, #evalModalBackBtn) {
  border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); box-shadow: none;
}
body:not(#vs):not(#vs-product) #evalFullModal :is(#evalModalRerunBtn, #evalModalBackBtn):hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-product) #evalFullModal .eval-modal-head { gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--vs-hair); }
body:not(#vs):not(#vs-product) #evalFullModal .eval-modal-meta { font-size: 13px; color: var(--vs-muted); }
body:not(#vs):not(#vs-product) #evalFullModal .eval-product-exists { color: var(--vs-ok); font-size: 13px; font-weight: 600; }

/* Admin: kalibratie- en leerpanelen gebruiken de gewone kaart. */
body:not(#vs):not(#vs-product) :is(#calibrationPanel, #adminLearnPanel, #evalModalCalibration).cal-panel {
  border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; color: var(--vs-text);
}
body:not(#vs):not(#vs-product) :is(#calCompareModal, #calReportModal, #calRerunModal, #pilotFeedbackModal) :is(table) { width: 100%; border-collapse: collapse; font-size: 14px; }
body:not(#vs):not(#vs-product) :is(#calCompareModal, #calReportModal, #calRerunModal, #pilotFeedbackModal) th {
  padding: 10px 12px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--vs-muted); background: var(--vs-head-bg); border-bottom: 1px solid var(--vs-hair);
}
body:not(#vs):not(#vs-product) :is(#calCompareModal, #calReportModal, #calRerunModal, #pilotFeedbackModal) td { padding: 10px 12px; border-top: 1px solid var(--vs-row); color: var(--vs-copy); }

/* ---------- Productscan: oude Geschiedenis-pagina ---------- */
/* Deze pagina valt buiten vs-shared (data-agent="geschiedenis"); hier krijgt hij dezelfde rustige onderdelen. */
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] .center-head-geschiedenis { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #historyBackBtn,
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory :is(.history-filter, .pd-text-btn) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; box-shadow: none; color: var(--vs-copy); font: 500 13px "IBM Plex Sans", sans-serif; cursor: pointer;
}
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-filter[hidden] { display: none; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] :is(#historyBackBtn, #beoordelaarHistory .history-filter, #beoordelaarHistory .pd-text-btn):hover:not(:disabled) { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-filter.is-on { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .pd-text-btn:disabled { opacity: 0.5; cursor: default; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory { flex-direction: column; align-items: stretch; min-width: 0; padding-left: 0; padding-right: 0; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-tools {
  display: grid; gap: 14px; margin: 0 0 18px; padding: 18px; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-tools-title { margin: 0 auto 0 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-count { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--vs-muted); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-filters { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory :is(#historySearch, #historySortSelect) {
  box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1px solid var(--vs-field-edge); border-radius: 12px; background-color: var(--vs-field); box-shadow: none; color: var(--vs-text); font: 400 15px "IBM Plex Sans", sans-serif;
}
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory #historySearch { flex: 1 1 260px; min-width: 0; max-width: 100%; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory #historySearch::placeholder { color: var(--vs-muted); opacity: 1; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory :is(#historySearch, #historySortSelect):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
/* De scans zelf: glazen kaartjes met naam, datum en één badge. */
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-item {
  min-width: 0; padding: 14px; border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; transform: none; transition: border-color 0.15s;
}
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-item.is-clickable:hover { border-color: rgba(91, 139, 255, 0.4); background: var(--vs-glass); transform: none; box-shadow: none; }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-name { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--vs-text); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-score { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--vs-copy); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-date { font-size: 12px; color: var(--vs-muted); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-item .badge {
  display: inline-flex; align-items: center; margin-top: 10px; padding: 4px 10px; border: 1px solid var(--vs-hair); border-radius: 999px; background: rgba(255, 255, 255, 0.05); box-shadow: none; color: var(--vs-copy); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none;
}
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-item .badge.testen { border-color: rgba(126, 224, 181, 0.3); background: rgba(126, 224, 181, 0.12); color: var(--vs-ok); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-item .badge:is(.afwijzen, .twijfel) { border-color: rgba(255, 196, 107, 0.3); background: rgba(255, 196, 107, 0.12); color: var(--vs-warn); }
body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .cal-compare-bar { border: 1px solid var(--vs-edge-hero); border-radius: 18px; background: var(--vs-hero); box-shadow: none; }

/* ---------- Productscan v2 (alleen voor accounts met v2 aan) ---------- */
body:not(#vs):not(#vs-product).is-eval-v2 :is(#evalV2Root, #evalV2History) .eval-v2-block {
  border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none;
}
body:not(#vs):not(#vs-product).is-eval-v2 :is(#evalV2Root, #evalV2History) :is(input[type="text"], input[type="search"], select, textarea) {
  box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1px solid var(--vs-field-edge); border-radius: 12px; background-color: var(--vs-field); box-shadow: none; color: var(--vs-text); font: 400 15px "IBM Plex Sans", sans-serif;
}
body:not(#vs):not(#vs-product).is-eval-v2 :is(#evalV2Root, #evalV2History) :is(input, select, textarea):focus { border-color: var(--vs-accent); outline: 2px solid rgba(91, 139, 255, 0.35); outline-offset: 0; }
body:not(#vs):not(#vs-product).is-eval-v2 :is(#evalV2Root, #evalV2History) .result-action.is-primary { border: 0; border-radius: 12px; background: var(--vs-accent); color: #ffffff; font-weight: 600; box-shadow: 0 8px 24px rgba(91, 139, 255, 0.25); }
body:not(#vs):not(#vs-product).is-eval-v2 :is(#evalV2Root, #evalV2History) .result-action:not(.is-primary) { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); box-shadow: none; }

/* ---------- Productdetail: Prijzen en BEP ---------- */
/* Het BEP-vak is de uitkomst van de kaart: licht blauw, cijfer in mono. */
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card .wc-bep-outcome {
  padding: 14px 16px; border: 1px solid rgba(91, 139, 255, 0.22); border-radius: 12px; background: rgba(91, 139, 255, 0.08); box-shadow: none;
}
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card .wc-bep-value { margin: 4px 0 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--vs-text); }
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card .pd-price-card-top h3 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
/* Een lege bundel (2 of 3 stuks) is een rustig vak met één knop, niet een halve kaart. */
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card.is-add { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; border-style: dashed; background: transparent; }
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card.is-add:not(:has([data-pd-add-bundle])) { opacity: 0.55; }
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card.is-add [data-pd-add-bundle] {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); font: 500 14px "IBM Plex Sans", sans-serif; text-decoration: none; cursor: pointer;
}
body:not(#vs):not(#vs-product) #productDetailCenter .pd-price-card.is-add [data-pd-add-bundle]:hover { border-color: rgba(91, 139, 255, 0.4); color: var(--vs-text); }
body:not(#vs):not(#vs-product) #productDetailCenter .pd-prices-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Winst: Dagwinst ---------- */
/* De Shopify-statusregel mag afbreken, dan loopt hij op de telefoon niet uit zijn kaart. */
body:not(#vs):not(#vs-product) #calcCenter .wc-link-status { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* Wachten op de cijfers: een kort lijstje dat groen wordt, zoals bij de Productscan. */
body:not(#vs):not(#vs-product) .vp-wait { display: grid; gap: 10px; margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--vs-edge-hero); border-radius: 16px; background: var(--vs-hero); list-style: none; }
body:not(#vs):not(#vs-product) .vp-wait[hidden] { display: none; }
body:not(#vs):not(#vs-product) .vp-wait li { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--vs-muted); }
body:not(#vs):not(#vs-product) .vp-wait li.is-now { color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-product) .vp-wait li.is-done { color: var(--vs-copy); }
body:not(#vs):not(#vs-product) .vp-wait li.is-bad { color: var(--vs-bad); }
body:not(#vs):not(#vs-product) .vp-wait-mark { flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--vs-ghost-line); border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; }
body:not(#vs):not(#vs-product) .vp-wait li.is-now .vp-wait-mark { border: 3px solid rgba(91, 139, 255, 0.2); border-top-color: var(--vs-accent); animation: vpRing 1.2s linear infinite; }
body:not(#vs):not(#vs-product) .vp-wait li.is-done .vp-wait-mark { border: 0; background: var(--vs-ok); color: #0a0d1a; }
body:not(#vs):not(#vs-product) .vp-wait li.is-bad .vp-wait-mark { border: 0; background: var(--vs-bad); color: #0a0d1a; }
@keyframes vpRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body:not(#vs):not(#vs-product) .vp-wait li.is-now .vp-wait-mark { animation: none; border-color: var(--vs-accent); } }

/* ---------- Leveranciersprijzen ---------- */
/* Stappen: een rij met rondjes. Bezig = blauw, klaar = groen vinkje, nog niet = grijs. */
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid var(--vs-hair); border-radius: 14px; background: var(--vs-glass); box-shadow: none; color: var(--vs-muted); font: 500 14px "IBM Plex Sans", sans-serif; text-align: left; cursor: pointer;
}
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step > span {
  flex: 0 0 26px; width: 26px; height: 26px; box-sizing: border-box; display: grid; place-items: center; border: 1px solid var(--vs-ghost-line); border-radius: 50%; background: none; color: var(--vs-muted); font: 500 12px "IBM Plex Mono", ui-monospace, monospace;
}
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-active { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.1); color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-active > span { border: 0; background: var(--vs-accent); color: #ffffff; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-done { color: var(--vs-copy); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-done > span { border: 0; background: var(--vs-ok); color: #0a0d1a; font-size: 0; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-done > span::before { content: "✓"; font: 800 13px/1 "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step.is-locked { opacity: 0.55; cursor: default; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step:focus-visible { outline: 2px solid var(--vs-text); outline-offset: 2px; }
/* Kaarten en regels. */
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-card { border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; padding: 24px; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-card h2 { margin: 0 0 6px; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-card p { color: var(--vs-copy); font-size: 14px; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter :is(.sq-product, .sq-result, .sq-upload-zone) { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-upload-zone { border-style: dashed; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-product-label { color: var(--vs-text); font-size: 14px; font-weight: 600; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-icon { border: 1px solid var(--vs-ghost-line); border-radius: 12px; background: transparent; color: var(--vs-copy); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-remove { min-height: 36px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--vs-muted); font: 500 13px "IBM Plex Sans", sans-serif; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-remove:hover { border-color: rgba(255, 143, 156, 0.35); color: var(--vs-bad); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-source-tab { border: 1px solid var(--vs-ghost-line); border-radius: 999px; background: transparent; color: var(--vs-muted); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-source-tab.is-on { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-next { border-top: 1px solid var(--vs-row); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-price { border: 1px solid var(--vs-hair); border-radius: 12px; background: var(--vs-head-bg); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-price strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--vs-ok); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-status.is-error { color: var(--vs-bad); }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-status.is-success { color: var(--vs-ok); }
/* Prijslijst opgeslagen: groen, met een vinkje voor elke regel. */
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-upload-done { border: 1px solid rgba(126, 224, 181, 0.3); border-radius: 16px; background: rgba(126, 224, 181, 0.07); box-shadow: none; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-upload-done p { display: flex; align-items: baseline; gap: 10px; color: var(--vs-copy); font-size: 14px; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter #sqUploadDoneMeta p::before { content: "✓"; flex: 0 0 20px; width: 20px; height: 20px; display: inline-grid; place-items: center; align-self: center; border-radius: 50%; background: var(--vs-ok); color: #0a0d1a; font-size: 11px; font-weight: 800; }
body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-upload-done strong { color: var(--vs-text); font-weight: 600; }
/* Geschiedenis-venster. */
body:not(#vs):not(#vs-product) #sqHistoryModal .sq-history-item { border: 1px solid var(--vs-hair); border-radius: 16px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-product) #sqHistoryModal .sq-history-item h3 { font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; color: var(--vs-text); }
body:not(#vs):not(#vs-product) #sqHistoryModal :is(.sq-history-item p, .sq-history-empty) { color: var(--vs-muted); }
body:not(#vs):not(#vs-product) #sqHistoryModal .sq-history-empty { margin: 0; padding: 32px 16px; font-size: 14px; line-height: 1.6; text-align: center; }
body:not(#vs):not(#vs-product) #sqHistoryModal .sq-history-scroll > .sq-status { padding: 14px 16px; border: 1px solid rgba(255, 196, 107, 0.3); border-radius: 14px; background: rgba(255, 196, 107, 0.08); color: var(--vs-copy); }

/* ---------- Aanvragen (alleen de leverancier) ---------- */
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter { display: grid; gap: 18px; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter > .center-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0; padding: 0; border: 0; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-lang { display: inline-flex; gap: 8px; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter :is(.supplier-lang, .supplier-desk-filters) .sq-secondary {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--vs-ghost-line); border-radius: 999px; background: transparent; box-shadow: none; color: var(--vs-copy); font: 500 13px "IBM Plex Sans", sans-serif;
}
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter :is(.supplier-lang, .supplier-desk-filters) .sq-secondary:is(.is-on, [aria-pressed="true"]) { border-color: rgba(91, 139, 255, 0.45); background: rgba(91, 139, 255, 0.14); color: var(--vs-text); font-weight: 600; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter #supplierDeskSearch { flex: 1 1 280px; min-width: 0; min-height: 48px; padding: 0 14px; font-size: 15px; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-filters { display: flex; flex-wrap: wrap; gap: 8px; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-card { margin: 0; padding: 22px; border: 1px solid var(--vs-edge); border-radius: 20px; background: var(--vs-card); box-shadow: none; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-card h2 { margin: 0; font-family: "Sora", "IBM Plex Sans", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--vs-text); }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-card p { color: var(--vs-copy); font-size: 14px; line-height: 1.55; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .sq-upload input[type="file"] { box-sizing: border-box; width: 100%; padding: 12px; border: 1px dashed var(--vs-field-edge); border-radius: 12px; background: var(--vs-glass); color: var(--vs-muted); }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-status {
  display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 999px; background: rgba(91, 139, 255, 0.14); color: var(--vs-info-text); font: 600 12px/1.4 "IBM Plex Sans", sans-serif; white-space: nowrap;
}
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-file { border: 1px solid var(--vs-hair); border-radius: 14px; background: var(--vs-glass); box-shadow: none; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-link { color: var(--vs-info-text); font-weight: 600; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter :is(.supplier-desk-empty, .supplier-desk-new) { margin: 0; padding: 20px 16px; color: var(--vs-muted); font-size: 14px; text-align: center; }
body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-new { padding: 12px 16px; border: 1px solid rgba(91, 139, 255, 0.3); border-radius: 14px; background: rgba(91, 139, 255, 0.08); color: var(--vs-info-text); text-align: left; }
/* Doorsturen naar Dennis (venster in de Geschiedenis). */
body:not(#vs):not(#vs-product) #dennisForwardModal :is(ul, ol) { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
body:not(#vs):not(#vs-product) #dennisForwardModal li { padding: 10px 14px; border: 1px solid var(--vs-hair); border-radius: 12px; background: var(--vs-glass); color: var(--vs-copy); font-size: 14px; }

/* ---------- Telefoon ---------- */
@media (max-width: 720px) {
  body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-card { padding: 18px; }
  body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-list { grid-template-columns: minmax(0, 1fr); }
  body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-filters { flex-basis: 100%; }
  body:not(#vs):not(#vs-product) .office-modal-card .calc-staffel { gap: 8px; }
}
@media (max-width: 560px) {
  body:not(#vs):not(#vs-product) #supplierQuotesCenter .sq-step { padding: 8px 10px; font-size: 13px; }
  body:not(#vs):not(#vs-product)[data-agent="geschiedenis"] #beoordelaarHistory .history-tools { padding: 14px; }
  body:not(#vs):not(#vs-product).is-supplier #supplierDeskCenter .supplier-desk-card { padding: 16px; }
}