/* ===================== PERSOONLIJKE INSTELLINGEN =====================
   Profiel/account/meldingen/co-ouder/over/uitloggen (design-handoff scherm 'isSettings').
   Full-bleed mobiel op de app-tokens; placeholders waar de functie nog ontbreekt. */

.account {
  max-width: 480px;
  margin-inline: auto;
  padding: 0 18px calc(24px + 3.5rem);
}

/* Profiel-kaart. */
.account__profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: var(--shadow-4);
}
.account__avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-accent);
  font-weight: 800;
  font-size: var(--text-22);
}
.account__profile-main { flex: 1; min-width: 0; }
.account__name { display: block; font-size: var(--text-lg); font-weight: 700; }
.account__email { display: block; margin-top: 1px; font-size: var(--text-13); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; }
.account__edit { flex: none; font: inherit; font-size: var(--text-13); font-weight: 700; color: var(--color-accent); background: none; border: 0; padding: 4px 6px; text-decoration: none; cursor: pointer; }
.account__edit:active { opacity: 0.7; }

/* Samengevoegde account-kaart: identiteit (avatar + naam + e-mail + Bewerken) mét de
   detailrijen (telefoon, inloggegevens) in één kaart — geen dubbele naam/e-mail meer. */
.account__card {
  margin-bottom: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.account__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--color-line);
}
.account__card .account__row:last-child,
.account__card .account__navrow:last-child { border-bottom: 0; }

/* Sectie-label. */
.account__label { display: block; margin: 0 4px 10px; font-size: var(--text-xs); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-faint); }

/* Lijst-kaart met rijen. */
.account__list {
  margin-bottom: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: var(--shadow-4);
  overflow: hidden;
}
.account__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
}
.account__list .account__row:last-child,
.account__list .account__navrow:last-child { border-bottom: 0; }
.account__row-label { font-size: var(--text-15); color: var(--color-text-muted); }
.account__row-value { font-size: var(--text-15); font-weight: 600; color: var(--color-text); text-align: right; }
.account__row-value--muted { font-weight: 500; color: var(--color-faint); }
/* Intro-tekst boven een lijst-kaart (bv. Meldingen): links uitgelijnd, met lucht eronder. */
.account__intro { margin: 0 0 var(--space-4); text-align: left; font-size: var(--text-sm); line-height: 1.5; color: var(--color-faint); }
.account__row--toggle .account__row-label { font-weight: 600; color: var(--color-text); }

/* Placeholder-schakelaar (niet-functioneel; echte voorkeuren komen later). */
.account__switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 27px;
  padding: 3px;
  border-radius: 14px;
  background: var(--color-line);
}
.account__switch--on { background: var(--color-accent); justify-content: flex-end; }
.account__switch-knob { width: 21px; height: 21px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

/* Functionele meldingstoggle: button_to-knop die als rij oogt (reset). */
.account__toggle-form { margin: 0; }
.account__toggle { appearance: none; -webkit-appearance: none; background: none; border: 0; width: 100%; cursor: pointer; font: inherit; color: inherit; text-align: left; }

/* Co-ouder-rij. */
.account__coparent {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 18px;
  box-shadow: var(--shadow-4);
  text-decoration: none;
  color: var(--color-text);
}
.account__coparent:active { background: var(--color-softer); }
.account__coparent-avatar { flex: none; display: grid; place-items: center; overflow: hidden; width: 44px; height: 44px; border-radius: 13px; background: var(--color-coparent-soft); color: var(--color-coparent); font-weight: 800; }
.account__coparent-main { flex: 1; min-width: 0; }
.account__coparent-name { display: block; font-size: var(--text-15); font-weight: 700; }
.account__coparent-status { display: block; margin-top: 1px; font-size: var(--text-13); font-weight: 600; color: var(--color-green); }
.account__coparent-status--muted { color: var(--color-faint); }
.account__chevron { flex: none; width: 19px; height: 19px; color: var(--color-faint); }

/* Over-rijen (placeholder-pagina's). */
.account__navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  cursor: default;
}
.account__navrow-label { font-size: var(--text-15); font-weight: 600; }
.account__navrow--link { color: var(--color-text); text-decoration: none; cursor: pointer; }
.account__navrow--link:active { background: var(--color-softer); }
/* Een rij mag ook een <button> zijn (opent een sheet i.p.v. te navigeren). Zonder reset
   slaan de browser-defaults door: rand, knop-vulling, auto-breedte en gecentreerde tekst.
   Zelfde reset als .account__toggle hierboven; de scheidingslijn (border-bottom van
   .account__navrow) zetten we expliciet terug, en :last-child wint er nog steeds van. */
button.account__navrow {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}
/* Zichtbaar-maar-uitgeschakeld (Gezinsinstellingen solo: "Kosten verrekenen" heeft een
   co-ouder nodig) — de slot-badge zegt waaróm. */
.account__navrow--locked { opacity: 0.6; cursor: default; }

/* Uitloggen. */
.account__logout-form { margin: 0; }
.account__logout {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--text-15);
  font-weight: 700;
  text-align: center;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--color-error-soft);
  color: var(--color-error);
  cursor: pointer;
  transition: transform 0.14s ease;
}
.account__logout:active { transform: scale(0.97); }

/* Account verwijderen — zwaarste actie: gevuld rood, duidelijk onderscheiden van uitloggen. */
.account__delete-form { margin: 10px 0 0; }
.account__delete {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--text-15);
  font-weight: 700;
  text-align: center;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--color-error);
  color: var(--color-on-accent);
  cursor: pointer;
  transition: transform 0.14s ease;
}
.account__delete:active { transform: scale(0.97); }
.account__version { margin-top: 14px; text-align: center; font-size: var(--text-xs); color: var(--color-faint); }

/* Avatar-knop rechtsboven (→ persoonlijke instellingen). Gedeeld over alle koppen. */
.home__head-actions { display: flex; align-items: center; gap: var(--space-2); }
.topbar-avatar {
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 800;
  font-size: var(--text-15);
  text-decoration: none;
}
.topbar-avatar:active { transform: scale(0.95); }
/* In de app-topbar staat 'ie naast het kebab-menu (iets compacter). */
.app__topbar .topbar-avatar { width: 32px; height: 32px; font-size: var(--text-sm); }

/* Sectie-kop: actie-knop + avatar samen rechts. */
.section-head__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.section-head__actions .topbar-avatar { width: 34px; height: 34px; font-size: var(--text-sm); }

/* ── Beveiliging-rijen (back-up-wachtwoord / app-slot): twee-regelig + actie rechts ── */
.account__secrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
  text-decoration: none;
}
.account__list .account__secrow:last-child { border-bottom: 0; }
.account__secrow--link { cursor: pointer; }
.account__secrow--link:active { background: var(--color-softer); }
.account__secrow-text { flex: 1; min-width: 0; }
/* Gelijk aan .account__navrow-label / .account__row-label (de overige settings-rijen). */
.account__secrow-title { display: block; font-size: var(--text-15); font-weight: 600; color: var(--color-text); }
.account__secrow-sub { display: block; margin-top: 2px; font-size: var(--text-13); color: var(--color-text-muted); }
/* Een rij die (nog) niet naar z'n scherm gaat maar eerst een drempel wegneemt: de subtekst
   ís dan de actie ("Voeg eerst een kind toe"), geen omschrijving — dus accent i.p.v. muted.
   Staat bewust ná .account__secrow-sub: gelijke specificiteit, dus volgorde beslist. */
.account__secrow-badge { flex: none; font-size: var(--text-13); font-weight: 700; color: var(--color-green); }

/* Meldingen-scherm: onderwerp (titel/sub) bovenaan, kanaal-keuzebalk daaronder full-width. */
.account__secrow--stack { flex-direction: column; align-items: stretch; gap: 10px; }

/* Segmented control (Uit · Push · E-mail · Beide): vier segmenten in één pill-balk. Elk
   segment is een los button_to-form; de gap-lijnen scheiden ze. */
.account__channelseg {
  display: flex;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: var(--color-softer);
}
.account__channelseg-form { flex: 1; margin: 0; display: flex; }
.account__channelseg-seg {
  flex: 1;
  appearance: none;
  border: 0;
  border-left: 1px solid var(--color-line);
  background: transparent;
  padding: 9px 6px;
  font: inherit;
  font-size: var(--text-13);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: center;
}
.account__channelseg-form:first-child .account__channelseg-seg { border-left: 0; }
.account__channelseg-seg:active { background: var(--color-soft); }
.account__channelseg-seg--active { background: var(--color-accent); color: var(--color-on-accent); }

/* Meldingen: gemengd-hint onder de hoofdkeuze + per-onderwerp-uitklap. Zelfde
   details/summary-idioom als .leden-perkid (verborgen marker, chevron-rotatie). */
.account__mixhint { margin: 10px 0 0; font-size: var(--text-13); line-height: 1.45; color: var(--color-accent); }
.account__disclose-summary { display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; cursor: pointer; list-style: none; }
.account__disclose-summary::-webkit-details-marker { display: none; }
.account__disclose[open] .account__disclose-summary { border-bottom: 1px solid var(--color-line); }
.account__disclose-chev { flex: none; width: 18px; height: 18px; color: var(--color-faint); transition: transform var(--dur-fast) var(--curve-decel); }
.account__disclose[open] .account__disclose-chev { transform: rotate(180deg); }

/* ── Back-up-wachtwoord-scherm (instellen + bevestiging) ───────────────── */
/* Zelfde max-width + 18px zij-padding als .gezinhub / .gezin-section (consistente kantlijn). */
.backup-pw { max-width: 520px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 40px; display: flex; flex-direction: column; }
.backup-pw__back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 4px 0 18px; color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); text-decoration: none; }
.backup-pw__back svg { width: 18px; height: 18px; }
/* Ronde badge (rustiger dan een afgerond vierkant) — consistent met de groene cirkel op
   het bevestigingsscherm. */
.backup-pw__icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--color-soft); color: var(--color-accent); margin-bottom: 18px; }
.backup-pw__icon svg { width: 25px; height: 25px; }
.backup-pw__icon--success { background: var(--color-green-soft); color: var(--color-green); }
.backup-pw__title { font-family: var(--font-display); font-size: var(--text-26); font-weight: 600; line-height: 1.18; letter-spacing: -0.2px; margin: 0 0 10px; }
.backup-pw__lede { font-size: var(--text-15); line-height: 1.5; color: var(--color-text-muted); margin: 0 0 18px; }
.backup-pw__note { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; background: var(--color-coparent-soft); color: var(--color-coparent); font-size: var(--text-sm); line-height: 1.45; margin-bottom: 22px; }
.backup-pw__note--neutral { background: var(--color-soft); color: var(--color-text-muted); }
.backup-pw__note-icon { flex: none; width: 19px; height: 19px; margin-top: 1px; }
.backup-pw__alert { padding: 12px 15px; border-radius: 12px; background: var(--color-error-soft); color: var(--color-error); font-size: var(--text-sm); margin-bottom: 16px; }
.backup-pw__form { display: flex; flex-direction: column; }
.backup-pw__label { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-faint); margin: 0 2px 8px; }
.backup-pw__rules { list-style: none; margin: 12px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.backup-pw__rule { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); color: var(--color-text-muted); }
.backup-pw__rule-icon { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--color-line); color: var(--color-on-accent); }
.backup-pw__rule.is-ok { color: var(--color-text); }
.backup-pw__rule.is-ok .backup-pw__rule-icon { background: var(--color-green); }
.backup-pw__match { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin: 8px 2px 0; }
.backup-pw__match.is-ok { color: var(--color-green); }
/* margin-top zorgt voor lucht tussen het herhaal-veld (of de match-melding) en de knop. */
.backup-pw__submit { width: 100%; margin-top: 22px; padding: 15px; border: 0; border-radius: 14px; background: var(--color-accent); color: var(--color-on-accent); font-family: var(--font-sans); font-size: var(--text-base); font-weight: 700; cursor: pointer; }
.backup-pw__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.backup-pw__later { display: block; text-align: center; margin-top: 16px; color: var(--color-text-muted); font-weight: 600; font-size: var(--text-15); text-decoration: none; }
.backup-pw--done { align-items: center; text-align: center; justify-content: center; min-height: 68vh; }
.backup-pw--done .backup-pw__icon { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 22px; }
.backup-pw--done .backup-pw__icon svg { width: 34px; height: 34px; }
.backup-pw--done .backup-pw__note { display: inline-flex; text-align: left; }
.backup-pw__done-cta { margin-top: 26px; }

/* ── Account/instellingen-sub-scherm (full-bleed, zelfde kantlijn als .gezinhub) ── */
.account-section { max-width: 520px; margin: 0 auto; padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 40px; }
.account-section__lede { font-size: var(--text-15); line-height: 1.5; color: var(--color-text-muted); margin: -4px 0 18px; }
.account-section__group { display: block; font-size: var(--text-xs); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-faint); margin: 4px 2px 10px; }
.account-section .form { margin-top: 4px; }
.account-section .button { width: 100%; margin-top: 10px; }
.account-section__actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.account-section__actions .button { margin-top: 0; }
.account-section__alert { padding: 12px 15px; border-radius: 12px; background: var(--color-error-soft); color: var(--color-error); font-size: var(--text-sm); margin-bottom: 16px; }

/* Agenda koppelen — tweede blok op de agenda-instellingenpagina, onder de kleurkiezers
   (ICS-feed, design-spec 2026-07-18 §5). Alleen structuur: velden en knoppen hergebruiken
   bestaande klassen (.field__label, .button, .infocard__secret, .sheet-actions). */
.calendar-feed { margin-top: 28px; }
.calendar-feed__fieldset { border: 0; padding: 0; margin: 0 0 4px; }
.calendar-feed__option { display: flex; align-items: center; gap: 8px; padding: 8px 2px; font-size: var(--text-15); }

/* Profiel bewerken — grote gecentreerde avatar-hero. De cirkel zelf is NIET klikbaar;
   alleen de drie hoek-iconen (camera/shuffle/×). */
.account-edit__hero { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 24px; }
.account-edit__avatar-wrap { position: relative; display: inline-block; }
.account-edit__avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-soft);
  color: var(--color-accent);
  font-weight: 800;
  font-size: var(--text-32);
}
/* Hoek-icoon-formulier: absoluut per hoek. camera = rechtsonder, shuffle = linksonder, × = rechtsboven. */
.account-edit__badge { position: absolute; margin: 0; z-index: 1; }
.account-edit__badge--camera  { right: -2px; bottom: -2px; }
.account-edit__badge--shuffle { left: -2px;  bottom: -2px; }
.account-edit__badge--delete  { right: -2px; top: -2px; }
/* Het ronde icoon-knopje (label of button) zelf. */
.account-edit__badge-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 2px solid var(--color-bg);
  padding: 0;
  cursor: pointer;
}
.account-edit__badge-btn svg { width: 15px; height: 15px; }
.account-edit__badge-btn--delete { background: var(--color-error); }
/* Bestand-input onzichtbaar; alleen het camera-icoon (label) is de klikzone. */
.account-edit__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-edit__avatar-hint { max-width: 22rem; text-align: center; font-size: var(--text-13); color: var(--color-text-muted); }
/* Gegenereerd figuurtje / geüploade foto vullen de avatar-cirkel. object-fit + block, en de
   avatar-container klipt rond (overflow: hidden). Géén eigen border-radius op de media: dan
   zou de container-achtergrond langs de geronde rand als randje doorschemeren. */
.avatar-figure,
.avatar-img { display: block; width: 100%; height: 100%; }
.avatar-img { object-fit: cover; }
/* Zodra er een foto/figuurtje in een avatar zit, verdwijnt de accent-achtergrond van de
   container (die is alleen voor de initiaal) — anders schemert 'ie als randje langs de rand. */
.topbar-avatar:has(.avatar-figure), .topbar-avatar:has(.avatar-img),
.account__avatar:has(.avatar-figure), .account__avatar:has(.avatar-img),
.account-edit__avatar:has(.avatar-figure), .account-edit__avatar:has(.avatar-img),
.account__coparent-avatar:has(.avatar-figure), .account__coparent-avatar:has(.avatar-img),
.leden-person__avatar:has(.avatar-figure), .leden-person__avatar:has(.avatar-img),
.kindhub__avatar:has(.avatar-figure), .kindhub__avatar:has(.avatar-img),
.kinddetail__avatar:has(.avatar-figure), .kinddetail__avatar:has(.avatar-img),
.leden-kid__avatar:has(.avatar-figure), .leden-kid__avatar:has(.avatar-img) {
  background: transparent;
}
/* E-mail read-only (login-identiteit): rustig gedempt, niet-typbaar. */
.form__input--readonly { color: var(--color-text-muted); background: var(--color-softer); cursor: default; }
.account-edit__field-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.account-edit__hint { font-size: var(--text-13); color: var(--color-text-muted); }
.account-edit__change { flex: none; font-size: var(--text-13); font-weight: 700; color: var(--color-accent); text-decoration: none; }
.account-edit__change:active { opacity: 0.7; }
/* Pending e-mailwissel: rustige amber-notitie met badge, wacht op bevestiging. */
.account-edit__pending { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--color-amber-soft); font-size: var(--text-13); line-height: 1.45; color: var(--color-text); }
.account-edit__pending-badge { flex: none; font-size: var(--text-11); font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--color-amber); color: var(--color-on-accent); }
/* Toggle-rij (coach-context): label links, schakelaar rechts — in een .account__list-kaart. */
.account-section__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; border-bottom: 1px solid var(--color-line); cursor: pointer; }
.account__list .account-section__toggle:last-child { border-bottom: 0; }
.account-section__toggle input { flex: none; width: 18px; height: 18px; accent-color: var(--color-accent); }
.account-section__toggle span { flex: 1; font-size: var(--text-15); font-weight: 600; }