/* ============================================================
   AP Accountgegevens — account
   Exact volgens OPDRACHT-ACCOUNTGEGEVENS.md (5 aug 2026).
   Wrapper .ap-account; tekstmaten in px MET !important (thema forceert
   font-size/weight). Opslaan-knop + pill staan in de vaste header.
   ============================================================ */

/* ---- Pagina + reset ---- */
.ap-content:has(.ap-account){
	background:#F5F7FB radial-gradient(900px 320px at 18% -8%, rgba(27,77,228,.045), transparent 70%) no-repeat !important;
	max-width:none !important;
}
.ap-account, .ap-account *{ box-sizing:border-box; }
.ap-account{
	font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	color:#0C1F3F; width:100%; max-width:1360px; padding:24px 32px 44px;
}
.ap-account p, .ap-account h1, .ap-account h2{ margin:0; }
.ap-account input, .ap-account button{ font-family:inherit; }
.ap-account [hidden]{ display:none !important; }
/* De account-wrapper is geen flex-kolom; hero krijgt hier z'n eigen afstand. */
.ap-account .ap-pagehero{ margin-bottom:20px !important; }

/* ---- Header-knop + pill (in de vaste header, alleen op Accountgegevens) ---- */
.ap-global-header .ap-acc-hdr-dirty{
	display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px;
	background:#FFF6E5; color:#8A6100; font-size:11.5px !important; font-weight:550 !important; white-space:nowrap;
}
.ap-global-header .ap-acc-hdr-dirty i{ font-size:14px; }
.ap-global-header .ap-acc-hdr-save{
	display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; border-radius:9px;
	background:#1B4DE4 !important; border:0 !important; color:#fff !important;
	font-size:12.5px !important; font-weight:550 !important; font-family:inherit; cursor:pointer; white-space:nowrap;
	transition:background .15s;
}
.ap-global-header .ap-acc-hdr-save i{ font-size:14px; }
.ap-global-header .ap-acc-hdr-save:hover{ background:#143BB0 !important; }
.ap-global-header .ap-acc-hdr-save.is-opgeslagen{ background:#1B7A4B !important; }

/* ---- Kolommen ---- */
.ap-acc-kolommen{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.ap-acc-links{ flex:2 1 480px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.ap-acc-rechts{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:20px; }

/* ---- Kaart-basis ---- */
.ap-acc-card{
	border-radius:14px; border:1px solid #E7EBF2; overflow:hidden;
	background:linear-gradient(180deg,#FFFFFF 0%,#FDFEFF 100%);
	box-shadow:0 1px 1px rgba(16,35,64,.03), 0 8px 24px -20px rgba(16,35,64,.45);
}
.ap-acc-card--pad{ padding:18px 20px; }
.ap-acc-kop{ display:flex; align-items:flex-start; gap:13px; padding:18px 20px 14px; }
.ap-acc-kop--plat{ align-items:center; }
.ap-acc-ic{ flex:0 0 34px; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; }
.ap-acc-ic--blauw{ background:#EEF3FE; color:#1B4DE4; }
.ap-acc-ic i{ font-size:17px; }
.ap-acc-koptekst{ min-width:0; flex:1; }
.ap-acc-h2{ font-size:14px !important; font-weight:600 !important; letter-spacing:-.015em; color:#0C1F3F; }
.ap-acc-sub{ margin-top:3px; font-size:12px !important; font-weight:400 !important; line-height:1.45 !important; color:#7A889E; }

/* ---- Velden ---- */
.ap-acc-veldraster{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; padding:4px 20px 18px; }
.ap-acc-veld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ap-acc-veld > span{ font-size:11.5px !important; font-weight:550 !important; color:#42536B; }
.ap-account .ap-acc-veld input{
	width:100%; height:38px; padding:0 12px; border-radius:9px; border:1px solid #DDE3ED !important;
	background:#fff !important; font-size:13px !important; font-weight:400 !important; color:#0C1F3F !important;
}
.ap-account .ap-acc-veld input:focus{ outline:none; border-color:#1B4DE4 !important; box-shadow:0 0 0 3px rgba(27,77,228,.12); }
.ap-acc-veld--breed{ grid-column:1 / -1; }
.ap-acc-pcplaats{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:14px; padding:0; }

/* ---- Inloggegevens-rijen ---- */
.ap-acc-rij{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; box-shadow:0 0 0 1px #F5F7FB; }
.ap-acc-rij__tekst{ min-width:0; flex:1 1 200px; display:flex; flex-direction:column; gap:2px; }
.ap-acc-rij__lab{ font-size:11.5px !important; font-weight:550 !important; color:#42536B; }
.ap-acc-rij__val{ font-size:13px !important; font-weight:400 !important; color:#0C1F3F; word-break:break-word; }
.ap-acc-rij__val--grijs{ color:#7A889E; }
.ap-account .ap-acc-rij__input{ height:38px; padding:0 12px; border-radius:9px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:13px !important; color:#0C1F3F !important; }
.ap-acc-pill{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:11px !important; font-weight:600 !important; }
.ap-acc-pill--groen{ background:#E9F8EF; color:#1B7A4B; }

/* ---- Knoppen ---- */
.ap-account .ap-acc-btn{
	display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:8px;
	background:#fff !important; border:1px solid #DDE3ED !important; color:#42536B !important;
	font-size:12px !important; font-weight:550 !important; font-family:inherit; cursor:pointer; text-decoration:none; white-space:nowrap;
	transition:background .15s, border-color .15s, color .15s;
}
.ap-account .ap-acc-btn i{ font-size:14px; }
.ap-account .ap-acc-btn--licht:hover{ background:#F5F8FE !important; border-color:#1B4DE4 !important; color:#1B4DE4 !important; }

/* ---- Logboek ---- */
.ap-acc-logrij{ display:flex; gap:12px; padding:11px 20px; box-shadow:0 0 0 1px #F5F7FB; }
.ap-acc-logic{ flex:0 0 28px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; }
.ap-acc-logic i{ font-size:15px; }
.ap-acc-logic--geel{ background:#FFF6E5; color:#8A6100; }
.ap-acc-logic--groen{ background:#E9F8EF; color:#1B7A4B; }
.ap-acc-logtekst{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ap-acc-log__t{ font-size:12.5px !important; font-weight:400 !important; line-height:1.45 !important; color:#0C1F3F; }
.ap-acc-log__m{ font-size:11px !important; font-weight:400 !important; color:#8B99AE; }
.ap-acc-leegregel{ padding:0 20px 14px; font-size:12.5px !important; color:#7A889E; }
.ap-acc-logvoet{ padding:12px 20px; background:#FBFCFE; border-top:1px solid #EEF1F7; font-size:11.5px !important; font-weight:400 !important; line-height:1.5 !important; color:#8B99AE; }

/* ---- KvK-controle ---- */
.ap-acc-kvk{ grid-column:1 / -1; }
.ap-acc-kvk__labrij{ display:flex; align-items:center; gap:9px; font-size:11.5px !important; font-weight:550 !important; color:#42536B; }
.ap-acc-kvkbadge{ display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:10.5px !important; font-weight:600 !important; }
.ap-acc-kvk__rij{ display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; }
.ap-account .ap-acc-kvk__rij input{ flex:1 1 160px; height:38px; padding:0 12px; border-radius:9px; border:1px solid #DDE3ED !important; background:#fff !important; font-size:13px !important; color:#0C1F3F !important; }
.ap-account .ap-acc-kvk__rij input:focus{ outline:none; box-shadow:0 0 0 3px rgba(27,77,228,.12); }
.ap-acc-kvk__hint{ display:flex; align-items:flex-start; gap:6px; margin-top:8px; font-size:11.5px !important; font-weight:400 !important; line-height:1.45 !important; color:#8B99AE; }
.ap-acc-kvk__hint i{ font-size:14px; margin-top:1px; }
/* Statussen */
.ap-acc-kvk[data-status="verplicht"] .ap-acc-kvkbadge{ background:#FFF6E5; color:#8A6100; }
.ap-acc-kvk[data-status="bezig"] .ap-acc-kvkbadge{ background:#EEF3FE; color:#1B4DE4; }
.ap-acc-kvk[data-status="bezig"] .ap-acc-kvk__rij input{ border-color:#C9D9F6 !important; }
.ap-acc-kvk[data-status="ok"] .ap-acc-kvkbadge{ background:#E9F8EF; color:#1B7A4B; }
.ap-acc-kvk[data-status="ok"] .ap-acc-kvk__rij input{ border-color:#CDEEDC !important; }
.ap-acc-kvk[data-status="ok"] .ap-acc-kvk__hint{ color:#1B7A4B; }
.ap-acc-kvk[data-status="ok"] .ap-acc-kvk__hint i{ color:#1B7A4B; }
.ap-acc-kvk[data-status="fout"] .ap-acc-kvkbadge{ background:#FBE9E7; color:#B0403A; }
.ap-acc-kvk[data-status="fout"] .ap-acc-kvk__rij input{ border-color:#E3B8B4 !important; }
.ap-acc-kvk[data-status="fout"] .ap-acc-kvk__hint{ color:#B0403A; }

/* ---- Meldingen ---- */
.ap-acc-card--pad .ap-acc-h2 + .ap-acc-sub{ margin-bottom:6px; }
.ap-acc-meldrij{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #F1F4F9; cursor:pointer; }
.ap-acc-meldrij:first-of-type{ margin-top:6px; }
.ap-acc-meldtekst{ min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
.ap-acc-meldtekst b{ font-size:12.5px !important; font-weight:600 !important; color:#0C1F3F; }
.ap-acc-meldtekst span{ font-size:11.5px !important; font-weight:400 !important; color:#7A889E; }

/* ---- Schakelaar ---- */
.ap-acc-switch{ position:relative; flex:0 0 38px; width:38px; height:22px; }
.ap-acc-switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.ap-acc-switch__slee{ position:absolute; inset:0; border-radius:999px; background:#D5DCE8; transition:background .15s; }
.ap-acc-switch__slee::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgba(11,36,71,.25); transition:transform .15s; }
.ap-acc-switch input:checked + .ap-acc-switch__slee{ background:#1B4DE4; }
.ap-acc-switch input:checked + .ap-acc-switch__slee::after{ transform:translateX(16px); }

/* ---- Actieve sessies ---- */
.ap-acc-sessie{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid #F1F4F9; }
.ap-acc-sessie > i{ font-size:17px; color:#93A2B8; flex:0 0 auto; }
.ap-acc-sessie__tekst{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.ap-acc-sessie__naam{ font-size:12.5px !important; font-weight:550 !important; color:#0C1F3F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-acc-sessie__meta{ font-size:11.5px !important; font-weight:400 !important; color:#8B99AE; }
.ap-acc-sessie__st{ flex:0 0 auto; font-size:12px !important; font-weight:600 !important; }
.ap-acc-sessie__st--dit{ color:#1B7A4B; }
.ap-account .ap-acc-sessie__uit{ flex:0 0 auto; background:none !important; border:0 !important; padding:0; color:#B0403A !important; font-size:12px !important; font-weight:600 !important; font-family:inherit; cursor:pointer; }
.ap-account .ap-acc-sessie__uit:hover{ text-decoration:underline; }

/* ---- Account verwijderen ---- */
.ap-acc-verwijder{ background:#fff; border:1px solid #E7EBF2; border-radius:14px; padding:16px 20px; display:flex; flex-direction:column; gap:9px; box-shadow:0 1px 1px rgba(16,35,64,.03); }
.ap-acc-verwijder__t{ font-size:13px !important; font-weight:600 !important; color:#0C1F3F; }
.ap-acc-verwijder__u{ font-size:12px !important; font-weight:400 !important; line-height:1.5 !important; color:#7A889E; }
.ap-account .ap-acc-verwijder__link{ align-self:flex-start; display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:8px; background:#fff !important; border:1px solid #E7D3D3 !important; color:#B0403A !important; font-size:12px !important; font-weight:550 !important; text-decoration:none; }
.ap-account .ap-acc-verwijder__link:hover{ background:#FDF4F4 !important; }

/* ============================================================
   Mobiel (720px)
   ============================================================ */
@media (max-width:720px){
	.ap-account{ padding:20px 20px 40px; }
	main .ap-acc-kolommen{ flex-direction:column !important; }
	.ap-acc-links, .ap-acc-rechts{ flex:1 1 auto; width:100%; }
	main .ap-acc-veldraster{ grid-template-columns:1fr !important; }
	.ap-acc-pcplaats{ grid-template-columns:110px minmax(0,1fr); }
	.ap-account .ap-acc-veld input,
	.ap-account .ap-acc-rij__input,
	.ap-account .ap-acc-kvk__rij input{ height:44px; }
}