/* ---------------------------------------------------------------------------
 * Metronic-achtige look voor de backend-pagina's (zelfde stijl als de frontend).
 * ------------------------------------------------------------------------- */
.ictp {
	--ictp-accent: #3581ca;
	--ictp-accent-dark: #2a6aa8;
	--ictp-accent-soft: rgba( 53, 129, 202, 0.12 );
	--ictp-border: #e6e8ec;
	--ictp-muted: #6b7280;
}

.ictp .ictp-card {
	background: #fff;
	border: 1px solid var( --ictp-border );
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, 0.06 ), 0 1px 2px rgba( 16, 24, 40, 0.04 );
	padding: 18px 22px;
	margin: 16px 0;
	max-width: 1100px;
}
.ictp .ictp-card h2 { margin-top: 0; font-size: 16px; }

/* Tabbladen (Instellingen) als pill-tabs */
.ictp .ictp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 20px;
}
.ictp .ictp-tabs a {
	padding: 8px 18px;
	text-decoration: none;
	color: var( --ictp-muted );
	background: #fff;
	border: 1px solid var( --ictp-border );
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
}
.ictp .ictp-tabs a:hover { color: var( --ictp-accent ); border-color: var( --ictp-accent ); }
.ictp .ictp-tabs a.is-active {
	background: var( --ictp-accent );
	border-color: var( --ictp-accent );
	color: #fff;
	box-shadow: 0 2px 6px rgba( 53, 129, 202, 0.35 );
}

/* Primaire knoppen in onze huisstijlkleur */
.ictp .button-primary {
	background: var( --ictp-accent );
	border-color: var( --ictp-accent );
	box-shadow: none;
	text-shadow: none;
}
.ictp .button-primary:hover,
.ictp .button-primary:focus { background: var( --ictp-accent-dark ); border-color: var( --ictp-accent-dark ); }
.ictp .page-title-action { border-radius: 999px; }

.ictp .ictp-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 600;
	margin-right: 8px;
}

.ictp .ictp-badge--ok { background: #d1e7dd; color: #0f5132; }
.ictp .ictp-badge--warn { background: #fff3cd; color: #664d03; }
.ictp .ictp-badge--err { background: #f8d7da; color: #842029; }

.ictp .ictp-modules { list-style: disc; margin-left: 20px; }

.ictp #ictp-test-result { margin-top: 10px; }

/* Mailgroepen-module */
.ictp .ictp-two-col {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.ictp .ictp-two-col > div { flex: 1 1 320px; }

.ictp .ictp-member-list { max-height: 420px; overflow-y: auto; }

/* Geen verticale cel-randen in onze tabellen (thema kan die opdringen) */
.ictp .widefat th,
.ictp .widefat td { border-left: 0; border-right: 0; }

.ictp .ictp-role {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 1px 8px;
	border-radius: 10px;
	background: #e2e4e7;
	color: #3c434a;
	vertical-align: middle;
}
.ictp .ictp-role-owner { background: #fff3cd; color: #664d03; }
.ictp .ictp-role-on { background: #d1e7dd; color: #0f5132; }
.ictp .ictp-role-off { background: #f8d7da; color: #842029; }
.ictp .ictpmod-groupbadge { background: #cfe2ff; color: #084298; }

/* Ledenkop met "+ Lid toevoegen" */
.ictp .ictp-members-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ictp .ictp-members-head h2 { margin: 0; }
.ictp .ictp-members-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#ictpmod-members .check-column { width: 2.5em; text-align: center; vertical-align: middle; }
.ictp .ictp-add-plus { font-weight: 700; }

/* Modal (lid toevoegen) */
.ictp-modal { position: fixed; inset: 0; z-index: 100000; }
.ictp-modal-backdrop { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.5 ); }
.ictp-modal-box {
	position: relative;
	width: 520px;
	max-width: 92vw;
	margin: 8vh auto 0;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	padding: 18px 22px;
	max-height: 80vh;
	overflow: auto;
}
.ictp-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ictp-modal-head h2 { margin: 0; }
.ictp-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #666; padding: 0 4px; }
.ictp-modal-close:hover { color: #000; }
.ictp-modal-box .ictpusr-pw { font-size: 14px; font-weight: 600; }
.ictpusr-modal-foot { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* Bulkknoppen in de werkbalk zijn uit tot er iets aangevinkt is. */
.ictp .ictp-toolbar .button[disabled] { opacity: .55; cursor: not-allowed; }
/* Keuzelijsten (groep/Team/school): begrensde breedte i.p.v. meegroeien met de langste optie. */
.ictp .ictp-wide-select { width: 100%; max-width: 460px; box-sizing: border-box; }

/* Toevoegen/Verwijderen: randloze tekst, hover toont de knop */
.ictp .button.button-link-add,
.ictp .button.button-link-delete { background: none; border: 1px solid transparent; box-shadow: none; }
.ictp .button.button-link-add { color: #2271b1; }
.ictp .button.button-link-add:hover { background: #e7f1fb; color: #135e96; }
.ictp .button.button-link-delete { color: #b32d2e; }
.ictp .button.button-link-delete:hover { background: #fbeaea; color: #8a1f21; }

/* Selectielijst in de "lid toevoegen"-modal */
.ictpmod-staged-wrap { margin-top: 14px; border-top: 1px solid #dcdcde; padding-top: 12px; }
.ictpmod-staged-title { font-size: 13px; margin: 0 0 8px; }
.ictpmod-staged { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.ictpmod-staged li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 10px; background: #f6f7f7; border-radius: 6px; }
.ictpmod-staged li.ictpmod-empty { background: none; padding: 0; }
.ictpmod-unstage { border: none; background: none; color: #d63638; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ictpmod-unstage:hover { color: #8a1f21; }

/* "+ Team toevoegen"-knop rechts in de titel (backend) */
.ictp .ictp-header-action { float: right; }
.ictp .ictp-search-results { margin-top: 8px; }
.ictp .ictp-spinner { display: none; }
.ictp .ictp-spinner.is-active { display: inline-block; }

/* Sorteerbare kolomkoppen + werkbalk (gedeeld, zie assets/list-tools.js) */
.ictp .ictp-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ictp .ictp-sort:hover { background: #f0f2f5; }
.ictp .ictp-sort:focus-visible { outline: 2px solid #3581ca; outline-offset: -2px; }
.ictp .ictp-sort-arrow { margin-left: 5px; font-size: 10px; color: #3581ca; }
/* In wp-admin blijven de tabellen tabellen: de kolomkoppen zijn er altijd, dus de
   sorteerkeuze uit list-tools.js is daar niet nodig. */
.ictp .ictp-sortbar { display: none; }
.ictp .ictp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.ictp .ictp-toolbar > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ictp .ictp-toolbar-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }