/* keten.css — Verkoopketen (prototype v7 → app-tokens)
   Bouwt voort op de kozf-basis (koz-knop, koz-kaart, koz-prijsregel …)
   uit kozijnoff.css; hier alleen wat de keten zelf nodig heeft. */

.vkk-wortel { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }

/* ---- tabs + tegels ---- */
.vkk-tabs { display: flex; gap: 6px; margin: 12px 0; }
.vkk-tab { border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; border-radius: 99px;
  padding: 7px 16px; font: 700 .74rem var(--font-ui); color: var(--c-ink-3); cursor: pointer; }
.vkk-tab .mono { font-size: .64rem; }
.vkk-tab.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }
.vkk-tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vkk-tegel { background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 12px 14px; cursor: pointer; box-shadow: var(--schaduw-tegel); }
.vkk-tegel.aan { border-color: var(--c-ink); }
.vkk-tegel .tt { display: flex; align-items: center; gap: 8px; font-size: .72rem; }
.vkk-tegel .tt .mono { margin-left: auto; font-size: .64rem; color: var(--c-ink-3); }
.vkk-tegel .tgroot { font-size: 1.3rem; font-weight: 700; margin: 4px 0 2px; }
.vkk-tegel .tsub { font-size: .66rem; color: var(--c-ink-3); line-height: 1.6; }

/* ---- categorie-chips + status ---- */
.vkk-cat { font-family: var(--font-mono); font-size: 9px; font-weight: 700; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.vkk-cat.is-kozijnen { background: var(--c-terra-t); color: var(--c-terra-d); }
.vkk-cat.is-isolatie { background: var(--c-groen-t); color: var(--c-groen-d); }
.vkk-cat.is-overig { background: var(--c-lijn); color: var(--c-ink-2); }
.vkk-st { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; white-space: nowrap; }
.vkk-st-concept { background: var(--let-t); color: var(--let); }   /* Zand §4: geel is memo, geen status */
.vkk-st-verzonden { background: var(--c-sage-t); color: var(--c-groen-d); }
.vkk-st-akkoord { background: var(--c-groen-t); color: var(--c-groen-d); }
.vkk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: baseline; }
.vkk-dot.is-groen { background: var(--c-groen); }
.vkk-dot.is-oranje { background: var(--c-amber); }
.vkk-dot.is-rood { background: var(--c-rood); }

/* ---- lijstrijen ---- */
.vkk-rij { display: grid; grid-template-columns: 120px 1.1fr 130px 1.3fr 110px 110px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .76rem; }
.vkk-oprij { display: grid; grid-template-columns: 110px 1fr 1.2fr 90px 90px 90px 90px 90px 110px; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkk-rij:hover, .vkk-oprij:hover { background: var(--c-creme); }
.vkk-rij:last-child, .vkk-oprij:last-child { border-bottom: 0; }
.vkk-rij--kop { cursor: default; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); background: var(--c-paneel-2); }
.vkk-rij--kop:hover { background: var(--c-paneel-2); }
.vkk-oprij small { color: var(--c-ink-3); font-size: .62rem; }
.vkk-oprij.m-rood { box-shadow: inset 3px 0 0 var(--c-rood); }
.vkk-oprij.m-oranje { box-shadow: inset 3px 0 0 var(--c-amber); }
.vkk-ms { font-size: .7rem; color: var(--c-ink-2); }

/* ---- offerte-detail ---- */
.vkk-tweekol { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .vkk-tweekol { grid-template-columns: 1fr; } }
.vkk-maatregel { display: grid; grid-template-columns: 1.6fr 150px 100px 100px 26px; gap: 7px; align-items: center; padding: 4px 0; }
.vkk-maatregel--kop { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); padding: 2px 0; }
.vkk-maatregel input, .vkk-maatregel select { border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px;
  padding: 6px 8px; background: #fff; font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; }
.vkk-maatregel input.num { text-align: right; font-family: var(--font-mono); }
.vkk-maatregel input:disabled, .vkk-maatregel select:disabled { background: var(--c-creme); color: var(--c-ink-2); }
.vkk-x { border: none; background: none; color: var(--c-rood); font-size: 15px; cursor: pointer; }
.vkk-koflink { color: var(--c-terra-d); font-weight: 700; text-decoration: none; }
.vkk-koflink:hover { text-decoration: underline; }
.vkk-relblok { font-size: 12px; color: var(--c-ink-3); margin-top: 10px; line-height: 1.6; }
.vkk-catknoppen { display: grid; gap: 8px; }
.vkk-catknoppen .koz-knop { text-align: left; }
.vkk-catknoppen .koz-knop span { font-weight: 500; font-size: 11px; }

/* ---- splitsing ---- */
.vkk-splitsrij { display: grid; grid-template-columns: 1fr 110px 110px 150px; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.vkk-splitsrij small { color: var(--c-ink-3); }
.vkk-splitsrij .mono { text-align: right; }
.vkk-ink { color: var(--c-ink-3); font-size: .68rem; }
.vkk-groepsel { display: flex; gap: 4px; justify-content: flex-end; }
.vkk-groepsel button { width: 30px; height: 30px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px;
  background: #fff; font: 700 .72rem var(--font-mono); color: var(--c-ink-3); cursor: pointer; }
.vkk-groepsel button.aan { background: var(--c-ink); color: var(--c-creme); border-color: var(--c-ink); }

/* ---- opdracht-detail: facturen ---- */
.vkk-factuurrij { display: grid; grid-template-columns: 110px 1fr 100px 110px 110px; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; }
.vkk-factuurrij small { color: var(--c-ink-3); font-size: .62rem; }
.vkk-fb { text-align: right; font-weight: 700; }
.vkk-factuurknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .vkk-tab, .vkk-tegel, .vkk-rij, .vkk-oprij, .vkk-groepsel button { transition: background .16s ease, border-color .16s ease, color .16s ease; }
}

/* ---- verkoopwerkbank (gecombineerde lijsten) ---- */
.vkb-rij { display: grid; grid-template-columns: 140px 130px 1fr 1.2fr 110px 120px; gap: 10px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkb-oprij { display: grid; grid-template-columns: 130px 110px 1fr 1.2fr 95px 95px 95px 120px; gap: 8px; align-items: center;
  padding: 10px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); cursor: pointer; font-size: .74rem; }
.vkb-rij:hover, .vkb-oprij:hover { background: var(--c-creme); }
.vkb-rij:last-child, .vkb-oprij:last-child { border-bottom: 0; }

/* ---- prijsregels-hub ---- */
.pr-schemakop { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-size: .78rem; }
.pr-goed { color: var(--c-groen-d); font-weight: 700; }
.pr-fout { color: var(--c-rood); font-weight: 700; }
.pr-schemarij { display: grid; grid-template-columns: 1fr 80px 26px; gap: 6px; margin-bottom: 5px; }
.pr-catrij { display: grid; grid-template-columns: 1fr 140px 90px 26px; gap: 6px; margin-bottom: 5px; }
.pr-uitvrij { display: grid; grid-template-columns: 1fr 26px; gap: 6px; margin-bottom: 5px; max-width: 300px; }
.pr-schemarij input, .pr-catrij input, .pr-catrij select, .pr-uitvrij input {
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 7px; padding: 6px 8px; background: #fff;
  font-family: var(--font-ui); font-size: 12px; color: var(--c-ink); min-width: 0; }
.pr-schemarij input.num, .pr-catrij input.num { text-align: right; font-family: var(--font-mono); }

/* V8 · filterchips en de verkoper in de gecombineerde lijsten */
.vkb-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.vkb-flabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-3); font-weight: 700; margin-right: 3px; }
.vkb-flabel + .vkb-chip { margin-right: 2px; }
.vkb-chip { border: var(--lijndikte) solid var(--c-lijn); background: #fff; border-radius: 99px;
  padding: 3px 11px; font-size: .68rem; font-family: inherit; cursor: pointer; color: var(--c-ink-2);
  transition: border-color 160ms ease, background 160ms ease; }
.vkb-chip:hover { border-color: var(--c-groen); }
.vkb-chip.is-actief { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); font-weight: 700; }
.vkb-verk, .vkb-vb { font-style: normal; display: block; font-size: .64rem; color: var(--c-ink-3); line-height: 1.4; }
.vkb-vb { color: var(--c-amber); }