/* ---------------------------------------------------------------------------
 * 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; }

/* Verwijderen: rood, in twee sterktes. De knop die een venster opent is omlijnd, de knop
   die het echt doet is gevuld — zo is aan de knop te zien of er nog een stap volgt.
   De gevulde regel staat na de omlijnde: gelijke specificiteit, dus de volgorde beslist. */
.ictp .button.ictpusr-danger {
	background: #fff;
	border-color: #b32d2e;
	color: #b32d2e;
	box-shadow: none;
}
.ictp .button.ictpusr-danger:hover:not([disabled]) {
	background: #fbeaea;
	border-color: #8a1f21;
	color: #8a1f21;
}
.ictp .button.ictpusr-del-go {
	background: #b32d2e;
	border-color: #b32d2e;
	color: #fff;
}
.ictp .button.ictpusr-del-go:hover {
	background: #8a1f21;
	border-color: #8a1f21;
	color: #fff;
}

/* De namenlijst in de bevestiging: schuift zelf als het er veel zijn, zodat de knoppen
   eronder in beeld blijven. */
.ictpusr-dellist {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}
.ictpusr-dellist li {
	padding: 5px 0;
	border-bottom: 1px solid #f0f0f1;
}

/* 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) */
/* Meerdere actieknoppen in één tabelcel: als flexrij, zodat ze naast elkaar blijven
   staan. Zonder dit breken ze af zodra de cel krap wordt — en dat wordt ze snel, want
   de naamkolom pakt alle ruimte. `gap` regelt de tussenruimte, dus de knoppen zelf
   krijgen geen marge. */
.ictp .ictp-rowactions {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
}
/* `gap` doet de tussenruimte, en het label van een knop breekt nooit af: de cel
   krijgt `width: 1%` (zo smal als het mag), en zonder dit zou een knop tot één
   letter per regel geknepen worden. */
.ictp .ictp-rowactions .button { margin: 0; white-space: nowrap; }
/* Géén `width: 1%` op deze cel. Dat lijkt logisch ("zo smal mogelijk"), maar bij een
   tabel met automatische kolombreedtes is het een *voorkeur*: de andere kolommen
   claimen dan de resterende 99% naar hun eigen inhoud, en met een lange naam plus
   adres in de eerste kolom komt de som boven de beschikbare breedte uit — dan schuift
   de tabel horizontaal en valt de laatste knop buiten beeld. Zonder die breedte krijgt
   deze cel gewoon wat haar inhoud nodig heeft (de knoppen breken niet af) en gaat de
   rest naar de naamkolom. */
.ictp .widefat td.ictp-actions-cell { text-align: right; }

/* Kopknoppen: het omhulsel zweeft naar rechts, niet elke knop apart — anders
   staan twee knoppen in omgekeerde volgorde. */
.ictp .ictpmod-headeractions { float: right; display: inline-flex; gap: 8px; }
.ictp .ictpmod-headeractions .ictp-header-action { float: none; }
.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; }

/* Toegangsmatrix: kolommen per menugroep; koppen en schoolkolom blijven staan
   tijdens het scrollen (binnen het kader, zodat ook breed scrollen werkt). */
.ictp .ictp-access-wrap {
	max-height: 70vh;
	overflow: auto;
	border: 1px solid #c3c4c7;
	margin: 0 0 12px;
}
.ictp .ictp-access-wrap .ictp-access { border: 0; width: auto; min-width: 100%; }
.ictp .ictp-access th,
.ictp .ictp-access td { white-space: nowrap; }
.ictp .ictp-access td { text-align: center; vertical-align: middle; }
.ictp .ictp-access thead th {
	position: sticky;
	background: #f6f7f7;
	z-index: 2;
	box-shadow: inset 0 -1px 0 #c3c4c7;
}
.ictp .ictp-access .ictp-access-groups th {
	top: 0;
	height: 32px;
	padding: 0 10px;
	line-height: 32px;
	box-sizing: border-box;
	text-align: left;
	font-weight: 600;
	color: var( --ictp-accent-dark );
}
.ictp .ictp-access .ictp-access-labels th { top: 32px; text-align: center; font-size: 12px; }
.ictp .ictp-access .ictp-access-school {
	position: sticky;
	left: 0;
	z-index: 1;
	text-align: left;
	font-weight: 600;
	background: #fff;
	box-shadow: inset -1px 0 0 #c3c4c7;
}
.ictp .ictp-access.striped > tbody > :nth-child( odd ) .ictp-access-school { background: #f6f7f7; }
.ictp .ictp-access thead .ictp-access-school { z-index: 3; top: 0; background: #f6f7f7; vertical-align: bottom; }
.ictp .ictp-access .is-group-start { border-left: 2px solid var( --ictp-accent ); }
.ictp .ictp-access tbody tr:hover td { background: var( --ictp-accent-soft ); }
.ictp .ictp-access tbody tr:hover .ictp-access-school { background: #e3eef8; }

/* Audit-log: tegels, filterbalk, categorielabels. */
.ictp-audit .ictp-audit-tiles { display: grid; grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) ); gap: 12px; margin: 16px 0; max-width: 1100px; }
.ictp-audit .ictp-audit-tile { display: flex; flex-direction: column; padding: 16px 18px; background: #fff; border: 1px solid var( --ictp-border ); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ); }
.ictp-audit .ictp-audit-tile:hover { border-color: var( --ictp-accent ); }
.ictp-audit .ictp-audit-tile-v { font-size: 26px; font-weight: 700; line-height: 1.2; }
.ictp-audit .ictp-audit-tile-l { color: var( --ictp-muted ); }
.ictp-audit .ictp-audit-tile.is-alert .ictp-audit-tile-v { color: #b42318; }
.ictp-audit .ictp-audit-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ictp-audit .ictp-audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ictp-audit .ictp-audit-filters label > span { font-weight: 600; }
.ictp-audit .ictp-audit-filters .ictp-audit-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.ictp-audit .ictp-audit-buttons { display: flex; gap: 8px; margin-left: auto; }
.ictp-audit .ictp-audit-table td { vertical-align: middle; }
.ictp-audit .ictp-audit-table tr.is-failure td { background: #fef3f2; }
.ictp-audit .ictp-audit-cat { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ictp-audit .ictp-audit-cat--login { background: #eef4ff; color: #3538cd; }
.ictp-audit .ictp-audit-cat--m365 { background: #e8f2fb; color: #2a6aa8; }
.ictp-audit .ictp-audit-cat--infra { background: #ecfdf3; color: #067647; }
.ictp-audit .ictp-audit-cat--beheer { background: #f2f4f7; color: #475467; }
.ictp-audit .ictp-audit-pages { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
@media ( max-width: 782px ) {
	.ictp-audit .ictp-audit-buttons { margin-left: 0; width: 100%; flex-wrap: wrap; }
}