/* p-vf-uur: "Wat een uur oplevert", uitbreiding met invoer, stap 3b en stap 5. Alleen var(--token). */

/* Het scherm is een grid zonder vaste kolombreedte: een brede tabel rekt anders de hele pagina op.
   Met minmax(0, 1fr) blijft de pagina zo breed als het scherm en scrolt de tabel in zijn eigen kader. */
.uu-scherm { grid-template-columns: minmax(0, 1fr); }
/* De uitwerking wisselt van inhoud bij elke wijziging; de wikkel zelf telt niet mee in de opmaak. */
.uu-blok { display: contents; }

/* Het invulblok klapt in en uit */
.uu-invoer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.uu-invoer > summary::-webkit-details-marker { display: none; }
.uu-invoer > summary:hover { background: var(--opp-2); }
.uu-invoer > summary:focus-visible { outline: 2px solid var(--roest); outline-offset: -2px; }
.uu-invoer__kop .paneel-kop__tekst { flex: 1; min-width: 0; }
.uu-invoer:not([open]) > summary { border-bottom: 0; }
.uu-invoer__body { display: grid; gap: var(--sp-4); }

/* Stap 1: per werkstroom een rij met naam en toelichting, en twee velden */
.uu-rij {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
.uu-rij__naam { min-width: 0; }
.uu-rij__naam .mini { margin-top: 2px; }
.uu-rij__veld { display: flex; justify-content: flex-end; align-items: center; min-width: 0; }
.uu-rij__veldnaam { display: none; }   /* alleen op de telefoon: daar staat de kop niet boven de velden */
.uu-rij--kop {
  padding: 4px 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tekst-3);
}
.uu-rij--kop span:nth-child(n+2) { text-align: right; }
.uu-rij--totaal { background: var(--opp-2); padding: 12px 10px; border-bottom: 0; border-radius: var(--r-s); }
.uu-tot { font-weight: 650; }

/* Stap 2: een knop per regel, het veld rechts */
.uu-knop {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--lijn);
}
.uu-knop__tekst { min-width: 0; }
.uu-knop__tekst .mini { margin-top: 2px; max-width: 62ch; }
.uu-knop__veld { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.uu-knop--berekend .uu-knop__veld { font-weight: 650; }
.uu-chip { display: inline-flex; max-width: 100%; }

.uu-tabel-rek { min-width: 520px; }
.uu-tabel-groep { min-width: 420px; }

@media (max-width: 640px) {
  /* invulvelden onder elkaar: naam bovenaan, daaronder de twee velden naast elkaar met hun eigen label */
  .uu-rij { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .uu-rij__naam { grid-column: 1 / -1; }
  .uu-rij--kop { display: none; }
  .uu-rij__veld { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: flex-start; }
  .uu-rij__veldnaam { display: block; font-size: 11.5px; color: var(--tekst-3); }
  .uu-knop { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .uu-knop__veld { justify-content: flex-start; }
  .uu-invoer__body { padding-left: 14px; padding-right: 14px; }
}