/* kit: standaard-opmaak van de registratie-kit */
/* Eén vormtaal voor de meegeleverde pagina's (beheer, mijn gegevens, wachtwoord, activeren):
   alleen design-systeem-tokens, dus elk project krijgt 'm in z'n eigen look. */
.kit-pagina { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
.kit-pagina .kit-kop { max-width: 46rem; }
.kit-pagina .kit-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); }
.kit-pagina .kit-titel { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-heading); }
.kit-pagina .kit-lead { margin: 0; max-width: 40rem; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.kit-pagina .kit-paneel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); min-width: 0; }
.kit-pagina .kit-paneel-primair { border-top: 3px solid var(--color-primary); }
.kit-pagina .kit-voet { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.kit-pagina .kit-vrij { margin: 0; }
/* Een formulier of lijst ín een paneel is geen tweede kaart. */
.kit-pagina .kit-paneel .inline-form { margin: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
.kit-pagina .inline-form-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.kit-pagina .view { gap: var(--space-4); }
.kit-pagina .vh-title h1 { font-size: var(--text-xl); }

/* Beheer: de gebruikers zijn het werk (breed), registreren en de rollen staan ernaast. */
.kit-beheer .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
.kit-beheer .kit-zij { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.kit-beheer .kit-hoofd .table-wrap { box-shadow: var(--shadow-md); }

/* Mijn gegevens en wachtwoord: op de as van de app, één rustig paneel met uitleg ernaast. */
.kit-account .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 36rem) minmax(14rem, 18rem); align-items: start; }
.kit-account .kit-uitleg { margin: 0; padding-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }

/* Activeren: je komt uit een mail en hebt één taak — een gerichte kolom, kop en formulier op één as. */
.kit-activeren { max-width: 34rem; margin-inline: auto; text-align: left; }
.kit-activeren .kit-kop { max-width: none; }
/* Eén formulier op z'n eigen pagina: de paginakop zegt al wat het is — geen tweede titel erboven. */
.kit-account .inline-form-title, .kit-activeren .inline-form-title { display: none; }

@media (max-width: 900px) {
  .kit-pagina { gap: var(--space-6); }
  .kit-beheer .kit-raster, .kit-account .kit-raster { grid-template-columns: 1fr; }
}

/* landing: gewone pagina, landschap over de volle breedte, tekst op de linkerrand */
.pm-start { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-8) 0 var(--space-16); }
.pm-start-beeld { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border-subtle); }
.pm-start-beeld img { display: block; width: 100%; height: auto; }
.pm-start-tekst { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: 48rem; }
.pm-start-merk { display: flex; align-items: center; gap: var(--space-3); }
.pm-start-logo { display: block; width: 40px; height: 40px; }
.pm-start-naam { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-lg); color: var(--color-text-heading); }
.pm-start-titel { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-heading); }
.pm-start-lead { margin: 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.pm-start-actie { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-2); }
.pm-start-knop { min-height: 44px; }
.pm-start-noot { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 40rem) { .pm-start { gap: var(--space-8); padding-top: var(--space-4); } .pm-start-titel { font-size: var(--text-3xl); } .pm-start-lead { font-size: var(--text-base); } .pm-start-knop { flex: 1 1 100%; text-align: center; } }

/* kop: inloggen rustig, de ingang op de pagina is de hoofdactie (zoals de website) */
.app-header .persona-login { padding: var(--space-2) 0; background: transparent; border: 0; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; }
.app-header .persona-login:hover { background: transparent; color: var(--color-text-heading); }

/* werkpagina's van de Admin: de lijst is de hoofdrol (volle breedte), de opzet van een project
   staat eronder als tijdlijn: vier feiten in de volgorde waarin ze gebeuren, zoals op het bord */
.pm-werk { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-2); }
.pm-werk .pm-hoofd { min-width: 0; }
.pm-werk .pm-hoofd .view { gap: var(--space-4); }
.pm-werk .pm-zij { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.pm-werk .pm-zij-label { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); }
.pm-werk .pm-lijn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.pm-werk .pm-stap { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pm-werk .pm-stap::before { content: ""; position: absolute; top: calc(0.875rem - 1px); left: 2.25rem; right: calc(-1 * var(--space-6) + var(--space-2)); height: 2px; background: var(--color-border); }
.pm-werk .pm-stap:last-child::before { display: none; }
.pm-werk .pm-stap-nr { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); border: 2px solid var(--color-border-strong); background: var(--color-bg); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary); }
.pm-werk .pm-stap-titel { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text-heading); }
.pm-werk .pm-stap-uitleg { margin: 0; max-width: 32ch; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-secondary); }
.pm-werk .pm-stap.is-hier .pm-stap-nr { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-on-primary); }
.pm-werk .pm-stap.is-hier::before { background: var(--color-primary); }
.pm-werk .pm-stap.is-hier:has(+ .pm-stap:not(.is-hier))::before { background: var(--color-border); }
.pm-werk .pm-stap-titel a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.pm-werk .pm-stap-titel a:hover { color: var(--color-text-heading); }
.pm-werk .pm-zij-voet { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
@media (max-width: 48rem) {
  .pm-werk { gap: var(--space-8); }
  .pm-werk .pm-lijn { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pm-werk .pm-stap { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); padding-bottom: var(--space-5); }
  .pm-werk .pm-stap-nr { grid-row: span 2; }
  .pm-werk .pm-stap-titel { margin: 0; padding-top: 0.2rem; }
  .pm-werk .pm-stap::before { top: 1.75rem; bottom: 0; left: calc(0.875rem - 1px); right: auto; width: 2px; height: auto; }
  .pm-werk .pm-stap:last-child { padding-bottom: 0; }
}

/* My projects: geen werkende hero, de lijst is de pagina. De intro staat als hint onder de lijst. */
[data-pagina="page-my-projects"] > .page-block { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
[data-pagina="page-my-projects"] > .page-block > .page-section { order: 1; margin-top: calc(-1 * var(--space-6)); padding: 0; max-width: none; }
[data-pagina="page-my-projects"] > .page-block > .page-section p { font-size: var(--text-sm); color: var(--color-text-secondary); }
[data-pagina="page-my-projects"] > .page-block > [data-screen="s1792606926768-tamdt3"] { order: 0; }
/* Uitnodigingen die niet doorgingen: een melding voor de projectmanager, alleen als er iets te melden is */
[data-pagina="page-my-projects"] > .page-block > [data-screen="s1792610090552-z4cucp"] { order: 2; padding: var(--space-5) var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-left: 4px solid var(--color-amber); border-radius: var(--radius-lg); }
[data-pagina="page-my-projects"] [data-screen="s1792610090552-z4cucp"] .vh-title h1 { font-size: var(--text-lg); }
[data-pagina="page-my-projects"] [data-screen="s1792610090552-z4cucp"] .table-wrap { box-shadow: none; }
[data-pagina="page-my-projects"] [data-screen="s1792610090552-z4cucp"]:has(.empty-state) { display: none; }
@media (max-width: 40rem) {
  [data-pagina="page-my-projects"] > .page-block { gap: var(--space-6); }
  [data-pagina="page-my-projects"] > .page-block > [data-screen="s1792610090552-z4cucp"] { padding: var(--space-4); }
}

/* Account: gegevens als één rustige lijst (label links, waarde rechts), zelfde as als elke pagina */
.kit-account .detail-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.kit-account .detail-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.kit-account .detail-row dt { margin: 0; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); text-align: left; }
.kit-account .detail-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; color: var(--color-text); }
.kit-account .inline-form-foot { margin-top: var(--space-5); }
/* Activeren: één taak, op dezelfde linkerrand als de rest van de app */
.kit-activeren { margin-inline: 0; }
@media (max-width: 40rem) {
  .kit-account .detail-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}
/* Organisaties: vijf kolommen plus twee rij-knoppen; de knoppen onder elkaar zodat alles past */
.pm-werk [data-screen="s1792606926766-xlzzde"] .row-actions { display: grid; grid-template-columns: max-content 2.75rem; gap: var(--space-2); align-items: center; justify-content: end; }
.pm-werk [data-screen="s1792606926766-xlzzde"] .row-actions > .btn-row { grid-column: 1; }
.pm-werk [data-screen="s1792606926766-xlzzde"] .row-actions > [data-open] { grid-column: 2; grid-row: 1 / span 2; width: 2.75rem; min-width: 2.75rem; justify-content: center; }
@media (max-width: 48rem) { .pm-werk [data-screen="s1792606926766-xlzzde"] .row-actions { display: flex; flex-direction: column; } }
/* In een project (drill): de pagina gaat over dat ene project; de opzet-lijn, de hint en de melding wijken */
.pm-werk:has(.crumbs:not([hidden])) .pm-zij { display: none; }
[data-pagina="page-my-projects"] > .page-block:has(.crumbs:not([hidden])) > .page-section,
[data-pagina="page-my-projects"] > .page-block:has(.crumbs:not([hidden])) > [data-screen="s1792610090552-z4cucp"] { display: none; }

/* My details: Change password is de dagelijkse knop; Deactivate (onomkeerbaar) staat er los van, licht, aan het eind */
.kit-account .inline-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.kit-account .inline-form-foot .btn-primary { order: 0; }
.kit-account .inline-form-foot .is-danger { order: 1; margin-left: auto; background: transparent; border-color: transparent; box-shadow: none; color: var(--color-danger); padding-inline: var(--space-2); text-decoration: underline; text-underline-offset: 3px; }
.kit-account .inline-form-foot .is-danger:hover { background: var(--color-danger-soft); }

/* Gesprek (PM-tool, 22-10): een chat. Mijn berichten rechts in de merkkleur, die van anderen links met naam en rol. */
.dc-gesprek { max-width: 52rem; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dc-kop { display: flex; flex-direction: column; gap: var(--space-2); }
.dc-terug { font-size: var(--text-sm); color: var(--color-text-secondary); text-decoration: none; width: fit-content; }
.dc-terug::before { content: "\2190\00a0"; }
.dc-terug:hover { color: var(--color-primary); }
.dc-kop-rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dc-titel { display: flex; align-items: baseline; gap: var(--space-2); }
.dc-titel h1 { margin: 0; font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-text-heading); letter-spacing: -0.01em; }
.dc-aantal { font-size: var(--text-sm); color: var(--color-text-muted); }
.dc-gesprek .refresh-btn { display: none; }
.dc-draad { list-style: none; margin: 0; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); }
.dc-bericht { position: relative; align-self: flex-start; max-width: min(36rem, 82%); display: flex; flex-direction: column; gap: var(--space-1); }
.dc-mij { display: none; }
.dc-wie { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-1); }
.dc-naam { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.dc-rol { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: 600; line-height: 1.6; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.dc-rol:empty { display: none; }
.dc-rol .pill, .dc-rol span { all: unset; }
.dc-tekst { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle);
  border-radius: 4px var(--radius-lg) var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--color-text);
  line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-tijd { margin: 0; padding-left: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.dc-bericht:has(.dc-mij .pill-on) { align-self: flex-end; align-items: flex-end; }
.dc-bericht:has(.dc-mij .pill-on) .dc-wie { display: none; }
.dc-bericht:has(.dc-mij .pill-on) .dc-tekst { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-primary);
  border-radius: var(--radius-lg) 4px var(--radius-lg) var(--radius-lg); }
.dc-bericht:has(.dc-mij .pill-on) .dc-tijd { padding-right: var(--space-1); }
.dc-leeg { margin: 0; padding: var(--space-8); text-align: center; color: var(--color-text-muted); background: var(--color-bg-subtle); border-radius: var(--radius-xl); }
.dc-composer { max-width: 52rem; margin: calc(-1 * var(--space-4)) 0 0; padding: var(--space-4); background: var(--color-bg-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); position: sticky; bottom: var(--space-4); z-index: 2; }
.dc-composer .form-fields label, .dc-composer .field-label, .dc-composer .inline-form-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.dc-composer textarea { width: 100%; min-height: 4.5rem; resize: vertical; border: 0; background: transparent; font: inherit; color: var(--color-text); padding: var(--space-1); }
.dc-composer textarea:focus { outline: none; }
.dc-composer:focus-within { border-color: var(--color-border-focus); box-shadow: var(--shadow-md), 0 0 0 3px var(--color-primary-soft); }
.dc-composer-voet { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.dc-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 640px) { .dc-bericht { max-width: 92%; } .dc-draad { padding: var(--space-4) var(--space-3); } .dc-hint { display: none; } }

/* De composer staat als eigen blok onder het gesprek: zelfde breedte als de draad. */
[data-screen="s1792654660907-z4me61"] { max-width: 52rem; }
[data-screen="s1792654660907-z4me61"] .form-wrapper { max-width: none; width: 100%; }
.dc-composer { width: 100%; max-width: none; box-sizing: border-box; }

/* Screenshots in een bericht (finding): klein naast elkaar, klik opent groot. */
.dc-beelden { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin: var(--space-2, 8px) 0 0; }
.dc-beelden:empty, .dc-beelden[data-leeg] { display: none; }
.dc-beelden img { max-width: 160px; max-height: 120px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--color-border, #E2DED5); object-fit: cover; }