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

.m365mc .m365mc-card {
	background: #fff;
	border: 1px solid var( --m365-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;
}
.m365mc .m365mc-card h2 { margin-top: 0; font-size: 16px; }

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

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

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

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

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

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

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

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

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

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

/* Ledenkop met "+ Lid toevoegen" */
.m365mc .m365mc-members-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.m365mc .m365mc-members-head h2 { margin: 0; }
.m365mc .m365mc-add-plus { font-weight: 700; }

/* Modal (lid toevoegen) */
.m365mc-modal { position: fixed; inset: 0; z-index: 100000; }
.m365mc-modal-backdrop { position: absolute; inset: 0; background: rgba( 0, 0, 0, 0.5 ); }
.m365mc-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;
}
.m365mc-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.m365mc-modal-head h2 { margin: 0; }
.m365mc-modal-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: #666; padding: 0 4px; }
.m365mc-modal-close:hover { color: #000; }
.m365mc-modal-box .m365usr-pw { font-size: 14px; font-weight: 600; }
.m365usr-modal-foot { margin-top: 16px; display: flex; gap: 8px; justify-content: flex-end; }

/* Werkbalk boven de gebruikerslijst (filter + bulk-actie) */
.m365usr-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; }
.m365usr-toolbar .regular-text { flex: 1; min-width: 220px; }
.m365usr-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; }

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

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

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