/* =============================================================================
   ACCOUNT-SUBDOMEIN — pagina-styling
   Hero-concept: de toegangspas — één sleutel, alle deuren. Het klei-accent
   komt automatisch via data-site="account". Uitsluitend semantische
   design-system-tokens (README §8.1).
   ============================================================================= */

/* ── HERO: login + levende toegangspas ───────────────────────────────────── */
.access-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 110% 90% at 15% 20%,
      var(--color-bg-accent-soft), transparent 62%);
}
/* Poster-opzet (vormtaal-patroon "poster"): kop op affiche-formaat,
   de levende toegangspas rechts als object naast het loginformulier. */
.access-hero__poster {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;
  padding-block: var(--space-m);
}
/* Mobiel: compacter — het loginformulier is de prioriteit boven de vouw,
   de toegangspas begint er nét onder. */
@media (max-width: 1023.98px) {
  .access-hero__poster { padding-block: var(--space-s); gap: var(--space-xs); }
  .access-hero__copy { gap: var(--space-xs); }
  .access-hero__copy .text-lead {
    font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--text-body-family);
  }
  .access-hero__form { gap: var(--space-xs); }
}
@media (min-width: 1024px) {
  .access-hero__poster .access-demo {
    position: absolute;
    right: var(--container-gutter);
    top: 50%;
    translate: 0 -50%;
    width: min(460px, 38%);
    z-index: 2;             /* interactief — moet altijd klikbaar boven liggen */
  }
  .access-hero__copy { max-width: 58%; }
}
.access-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  align-items: flex-start;
}
.access-hero__copy em { font-style: italic; color: var(--color-text-accent); }
.access-hero__form {
  width: min(420px, 100%);
  gap: var(--space-s);
}

/* ── De toegangspas ──────────────────────────────────────────────────────── */
.access-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.access-demo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
/* De plek-tabs (uitgelicht.php) en rol-tabs gebruiken de DS-chip
   (components.css §CHIP) — de oude lokale tab-styling is daarheen
   gepromoveerd (promotieregel: tweede gebruiker → design system). */

/* ── De pas als fysiek 3D-object ─────────────────────────────────────────
   Voorkant = identiteit, achterkant = rechten. account.js draait de pas
   (rotateY op .pass__inner); de rol-tabs en de flip-knoppen sturen hem.
   Zonder JS: beide kanten statisch onder elkaar (vangnet onderaan). */
.pass-scene { perspective: 1200px; width: 100%; }
.pass {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;             /* pasjes-verhouding */
  min-height: 280px;
}
.pass__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-in-out);
}
@media (prefers-reduced-motion: reduce) {
  .pass__inner { transition: none; }
}
.pass__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background-color: var(--color-bg-raised);
  background-image: linear-gradient(155deg, transparent 55%, var(--tint-paper));
  box-shadow: var(--shadow-artefact);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.pass__face--back {
  transform: rotateY(180deg);
  overflow-y: auto;
  scrollbar-width: thin;
}
.pass__num { margin-top: auto; letter-spacing: 0.06em; }
/* Magneetstrip — de fysieke pas-signatuur */
.pass__stripe {
  height: var(--space-xs);
  margin-inline: calc(-1 * var(--space-m));
  background: var(--color-bg-accent);
  opacity: 0.85;
}
.pass__flip {
  align-self: flex-start;
  color: var(--color-text-accent);
  cursor: pointer;
  padding-block: var(--space-3xs);
  transition: color var(--duration-fast) var(--ease-out);
}
.pass__flip:hover { color: var(--color-accent-hover); }
.pass__flip:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}
.pass__face--back .pass__flip { margin-top: auto; }
/* No-JS-vangnet: geen 3D — beide kanten als losse kaarten onder elkaar */
html:not(.js) .pass { aspect-ratio: auto; min-height: 0; }
html:not(.js) .pass__inner { transition: none; }
html:not(.js) .pass__face { position: static; transform: none; margin-bottom: var(--space-s); }
html:not(.js) .pass__flip { display: none; }

.access-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
/* De "chip" van de pas — klein accentblokje, als op een ov-kaart */
.access-card__chip {
  width: var(--size-icon-l);
  height: var(--size-icon-m);
  border-radius: var(--radius-s);
  background: var(--color-bg-accent);
}
.access-card__doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.access-door {
  display: flex;
  gap: var(--space-2xs);
  align-items: baseline;
  font: var(--text-body-s-weight) var(--text-body-s-size)/var(--text-body-s-line) var(--text-body-s-family);
}
.access-door--open span   { color: var(--color-text-success); }
.access-door--closed      { color: var(--color-text-muted); }
.access-door--closed span { color: var(--color-text-error); }

/* ── Accountcentrum: dashboard-hiërarchie (pas centraal, rest ernaast) ──── */
.account-dash {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 1024px) {
  .account-dash { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.account-dash__pass {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 560px;
}
.account-dash__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.account-grid { align-items: start; }

/* ── REGISTER — compact beheer (gebruikers + curatie) ────────────────────
   Eén scanbare regel per item; klik = uitklappen om te bewerken. Native
   <details>, dus zonder JS gewoon bruikbaar. Schaalt naar tientallen
   regels: elke dichte regel is één control-hoogte. */
.register {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
  overflow: hidden;
}
.register__cols,
.register__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 130px 110px var(--size-icon-m);
  align-items: center;
  gap: var(--space-s);
  padding-inline: var(--space-s);
}
@media (max-width: 767.98px) {
  .register__cols,
  .register__line { grid-template-columns: minmax(0, 1fr) auto var(--size-icon-m); }
  .register__col-sinds, .register__status { display: none; }
  .register__cols span:nth-child(3) { display: none; }
}
.register__cols {
  min-height: var(--size-control-s);
  border-bottom: var(--border-thin) solid var(--color-line);
  background: var(--color-bg-sunken);
  letter-spacing: 0.04em;
}
.register__row { border-bottom: var(--border-thin) solid var(--color-line); }
.register__row:last-child { border-bottom: 0; }
.register__line {
  min-height: var(--size-control-l);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.register__line:hover { background: var(--color-hover-overlay); }
.register__line:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(-1 * var(--focus-ring-width));
}
.register__row[open] > .register__line { background: var(--color-bg-accent-soft); }
.register__name {
  font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--text-body-family);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.register__row--uit .register__line { opacity: 0.6; }
.register__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--text-caption-family);
  color: var(--color-text-muted);
}
.register__status::before {
  content: '';
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-radius: var(--radius-full);
  background: var(--color-line-strong);
}
.register__status.is-actief::before { background: var(--color-text-success); }
.register__status.is-uit::before    { background: var(--color-text-error); }
/* Chevron draait open/dicht mee */
.register__chev {
  width: var(--size-icon-s);
  height: var(--size-icon-s);
  background: linear-gradient(var(--color-icon-muted), var(--color-icon-muted)) center / 100% var(--border-thin) no-repeat,
              linear-gradient(var(--color-icon-muted), var(--color-icon-muted)) center / var(--border-thin) 100% no-repeat;
  transition: rotate var(--duration-base) var(--ease-out);
}
.register__row[open] > .register__line .register__chev {
  rotate: 45deg;   /* + wordt × */
}
.register__detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-s) var(--space-l);
  border-top: var(--border-thin) solid var(--color-line);
  background: var(--color-bg-sunken);
}
/* Het detail-paneel is zelf sunken — velden krijgen hier de basiskleur als
   fill, anders vallen ze tegen de achtergrond weg (feedback Ruud 2026-07-07). */
.register__detail .form-field__input,
.register__detail input[type="checkbox"] {
  background: var(--color-bg);
}
.register__detail input[type="checkbox"]:checked { background: var(--color-bg-accent); }
.register__detail .form-field__input:focus-visible { background: var(--color-bg-raised); }
.register__row--nieuw .register__name { font-weight: 600; }
.register__leeg {
  padding: var(--space-l) var(--space-s);
  border-bottom: var(--border-thin) solid var(--color-line);
}

/* ── CONTACT — de balie van het accountcentrum ───────────────────────────
   Het formulier als baliepas (chip + magneetstrip), met een bordje ernaast. */
.contact-desk {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-desk { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}
.contact-pass {
  gap: var(--space-m);
  padding: var(--space-l);
}
.contact-pass__fields { max-width: none; }   /* de pas bepaalt de breedte */
.contact-pass .pass__stripe { margin-inline: calc(-1 * var(--space-l)); }
.contact-desk__note { justify-content: center; }
.contact-desk__note .measure { max-width: 340px; }
.contact-desk__list { list-style: none; margin: 0; padding: 0; }

/* De CTA-pas (gedeeld CTA-component van dit domein) */
.cta-pass {
  align-items: flex-start;
  gap: var(--space-m);
  max-width: var(--container-text);
  padding: var(--space-2xl);
}
.cta-pass .pass__stripe { margin-inline: calc(-1 * var(--space-2xl)); width: auto; align-self: stretch; }
.page-header h1 em { font-style: italic; color: var(--color-text-accent); }

/* Engelse-versie-blok op de Uitgelicht-beheerpagina */
.uitgelicht-en {
  gap: var(--space-s);
  margin: 0;
  padding: var(--space-s);
  border: var(--border-thin) dashed var(--color-line-strong);
  border-radius: var(--radius-m);
}
.uitgelicht-en legend { padding-inline: var(--space-2xs); }

.user-card { gap: var(--space-s); }
.user-card--disabled { opacity: 0.65; }
.user-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
}
.user-card__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
}
/* Compact bewerkraster: het grid zelf komt uit het DS (.form-grid met
   subgrid-uitlijning, fix wrappende labels 2026-07-08); hier alleen de
   volle-breedte-rijen. */
.user-card__form .user-card__perms,
.user-card__form .user-card__save { grid-column: 1 / -1; }
.user-card__perms { border: 0; margin: 0; padding: 0; }
.user-card__perm {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
/* checkbox-styling komt sinds DS v2.11.0 uit het design system zelf */