/* p-vf-klanten: Versfabriek-uitbreiding. Alleen var(--token). */

/* Kolommen kiezen: klapt open onder de filters, geen zwevend menu dat op een telefoon uit beeld valt */
.afn-kolkeuze { margin-top: 12px; }
.afn-kolkeuze > summary { display: inline-flex; cursor: pointer; list-style: none; }
.afn-kolkeuze > summary::-webkit-details-marker { display: none; }
.afn-kolkeuze[open] > summary { background: var(--roest-zacht); }
.afn-kolkeuze > .mini { margin: 8px 0 0; }
.afn-kolkeuze__lijst { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.afn-kolkeuze__item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* Detail van een afnemer: soort klant en de cijfers uit het werkboek */
.afn-typeblok { max-width: 100%; min-width: 0; }
.afn-typeblok .iv-keuze { max-width: 100%; }
.afn-typenoot { max-width: 44ch; color: var(--tekst); }
.afn-cijfers .afn-detail__lijst { grid-template-columns: repeat(2, minmax(0, 270px)); }
.afn-typecel { white-space: nowrap; }

/* Uitleg: wat een soort klant waard is */
.afn-typelijst { display: grid; gap: 8px; margin-top: 12px; }
.afn-typelijst ul { margin: 0; padding-left: 18px; }
.afn-typetabel { min-width: 0; }
.afn-typetabel td, .afn-typetabel th { padding: 6px 10px; }

/* Terugwinnen: de tweede rij feiten (omzet ooit, marge ooit, orders, soort klant) */
.tw-rij__feiten--ooit { margin-top: -4px; }
.tw-feit--keuze { display: grid; gap: 4px; align-content: start; }
.tw-feit--keuze .iv-keuze { width: 100%; }
.tw-klein { min-width: 760px; }
.tw-klein td { vertical-align: top; }
.tw-klein .iv-keuze { max-width: 190px; }
.tw-kleindeel > summary { cursor: pointer; }

/* De uitgeklapte afnemer blijft zo breed als het kader (de breedte zet afnemers.js) en
   staat links vast als de tabel opzij schuift. */
.afn-detail__in, .afn-waarom {
  position: sticky; left: 0; box-sizing: border-box; width: var(--afn-kader, 100%);
}

/* Telefoon: de afnemer blijft links staan als de tabel opzij schuift. */
@media (max-width: 700px) {
  .afn-tabel tbody tr:not(.afn-detail) td:first-child,
  .afn-tabel thead th:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--opp);
    box-shadow: 1px 0 0 var(--lijn);
  }
  .afn-tabel thead th:first-child { z-index: 3; background: var(--opp-3); }
  .afn-tabel tbody tr:not(.afn-detail):hover td:first-child { background: var(--opp-2); }
  .afn-tabel tbody tr[data-actief="ja"] td:first-child { background: var(--roest-zacht); }
  .afn-tabel tbody tr:not(.afn-detail) td:first-child { max-width: 150px; }
  .afn-cijfers .afn-detail__lijst { grid-template-columns: 1fr; }
  .tw-rij__feiten--ooit { margin-top: 0; }
}