.wd-crm-wrap {
	--wd-crm-border: #d6dde5;
	--wd-crm-border-strong: #bdc8d4;
	--wd-crm-danger: #a63232;
	--wd-crm-muted: #5d6876;
	--wd-crm-panel: #fff;
	--wd-crm-accent: #0a71b5;
	--wd-crm-accent-dark: #075f9a;
	--wd-crm-accent-soft: #eef7fd;
	--wd-crm-soft: #f6f8fa;
	--wd-crm-text: #202833;
	--wd-crm-radius: 8px;
	color: var(--wd-crm-text);
	font-family: inherit;
	line-height: 1.45;
}

.wd-crm-page .entry-title,
.wd-crm-page .wp-block-post-title,
.wd-crm-page main > h1:first-child,
.wd-crm-page article > h1:first-child {
	display: none;
}

.wd-crm-wrap * {
	box-sizing: border-box;
}

.wd-crm-wrap [hidden] {
	display: none !important;
}

.wd-crm-header {
	align-items: center;
	border-bottom: 1px solid var(--wd-crm-border);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 12px;
}

.wd-crm-header h2,
.wd-crm-panel h3 {
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 6px;
}

.wd-crm-muted {
	color: var(--wd-crm-muted);
	margin: 0;
}

.wd-crm-tabs {
	align-items: center;
	background: #f5f9fd;
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 8px;
}

.wd-crm-tabs-prefix {
	color: var(--wd-crm-text);
	font-size: 20px;
	font-weight: 700;
	/* Ruimte tussen CRM en het eerste tabblad. */
	padding: 0 14px 0 6px;
}

.wd-crm-tabs a {
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--wd-crm-accent-dark) !important;
	font-weight: 600;
	min-height: 38px;
	padding: 7px 12px;
	text-decoration: none;
}

.wd-crm-tabs a.is-active {
	background: var(--wd-crm-accent-dark);
	border-color: var(--wd-crm-accent-dark);
	color: #fff !important;
}

.wd-crm-tabs .wd-crm-logout {
	background: #fff;
	border-color: var(--wd-crm-border);
	margin-left: auto;
}

.wd-crm-panel,
.wd-crm-card,
.wd-crm-login {
	background: var(--wd-crm-panel);
	border: 1px solid var(--wd-crm-border-strong);
	border-top: 4px solid #d9effc;
	border-radius: var(--wd-crm-radius);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	margin: 0 0 22px;
	overflow: hidden;
	padding: 18px;
}

.wd-crm-login {
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
}

.wd-crm-grid-form,
.wd-crm-inline-form {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wd-crm-inline-form {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
}

.wd-crm-settings-form {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wd-crm-brand-logo-field .wd-crm-muted {
	display: block;
	font-size: 13px;
	margin-top: 6px;
}

.wd-crm-filter-form {
	border-bottom: 1px solid var(--wd-crm-border);
	margin: 0 0 14px;
	padding: 0 0 14px;
}

.wd-crm-live-filter {
	align-items: end;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.wd-crm-live-filter label {
	font-weight: 600;
	max-width: 420px;
	width: 100%;
}

.wd-crm-live-filter input {
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	display: block;
	font: inherit;
	margin-top: 5px;
	min-height: 40px;
	padding: 8px;
	width: 100%;
}

/* Zoekveld met het trechtertje erin, zonder label erboven: de lijst begint
   daardoor een regel hoger. */
.wd-crm-filter-field {
	display: block;
	max-width: 420px;
	position: relative;
	width: 100%;
}

.wd-crm-filter-icon {
	fill: var(--wd-crm-accent);
	height: 16px;
	left: 11px;
	opacity: 0.75;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
}

.wd-crm-live-filter .wd-crm-filter-field input {
	margin-top: 0;
	padding-left: 34px;
}

/* Sorteerbare kolomkoppen. De knop is er voor het toetsenbord en moet er als
   een kolomkop uitzien, niet als een knop. De uitroeptekens houden hem uit
   handen van de knopopmaak van het thema en van oudere kopieen van deze
   stylesheet; zonder dat wordt het een blauwe pil. */
.wd-crm-table th.wd-crm-sortable {
	padding: 0;
}

.wd-crm-table th .wd-crm-sort-button {
	align-items: center;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: 700;
	gap: 6px;
	margin: 0;
	padding: 9px 8px;
	text-align: left;
	text-transform: none;
	width: 100%;
}

.wd-crm-table th .wd-crm-sort-button:hover,
.wd-crm-table th .wd-crm-sort-button:focus {
	background: #e8f1fb !important;
	color: inherit !important;
}

.wd-crm-sort-arrow::before {
	color: var(--wd-crm-accent);
	content: "\2195";
	opacity: 0.4;
}

.wd-crm-table th[aria-sort="ascending"] .wd-crm-sort-arrow::before {
	content: "\2191";
	opacity: 1;
}

.wd-crm-table th[aria-sort="descending"] .wd-crm-sort-arrow::before {
	content: "\2193";
	opacity: 1;
}

.wd-crm-grid-form label,
.wd-crm-login label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	gap: 5px;
}

.wd-crm-grid-form input,
.wd-crm-grid-form select,
.wd-crm-grid-form textarea,
.wd-crm-login input,
.wd-crm-field {
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	font: inherit;
	min-height: 40px;
	padding: 8px;
	width: 100%;
}

.wd-crm-grid-form textarea {
	min-height: 120px;
}

.wd-crm-full {
	grid-column: 1 / -1;
}

.wd-crm-google-heading {
	margin: 8px 0 0;
}

.wd-crm-grid-form label:has(.wd-crm-google-quarter) {
	grid-column: span 1;
}

.wd-crm-google-redirect {
	grid-column: span 2;
}

.wd-crm-grid-form label:has(.wd-crm-google-refresh) {
	grid-column: span 2;
}

.wd-crm-settings-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.wd-crm-settings-footer-action {
	margin: 0;
}

.wd-crm-relation-form {
	grid-template-columns: 1fr 1fr 1.25fr;
}

.wd-crm-phone-group {
	display: grid;
	gap: 8px;
	grid-template-columns: 112px minmax(0, 1fr);
}

.wd-crm-phone-group select,
.wd-crm-phone-group input {
	margin: 0;
}

.wd-crm-relation-notes {
	grid-column: 1 / 3;
}

.wd-crm-relation-notes textarea {
	min-height: 72px;
}

.wd-crm-assignment-form {
	align-items: start;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(220px, 0.9fr);
}

.wd-crm-assignment-form label:has(.wd-crm-assignment-title-input) {
	grid-column: 1 / 3;
	grid-row: 1;
}

.wd-crm-assignment-form label:has(input[name="hourly_rate"]) {
	grid-column: 3;
	grid-row: 1;
}

.wd-crm-assignment-form label:has(.wd-crm-billing-name-input) {
	grid-column: 1 / 3;
	grid-row: 2;
}

.wd-crm-assignment-form label:has(.wd-crm-kvk-input) {
	grid-column: 3;
	grid-row: 2;
}

.wd-crm-assignment-form label:has(.wd-crm-vat-input) {
	grid-column: 3;
	grid-row: 3;
}

.wd-crm-assignment-form label:has(.wd-crm-billing-email-input) {
	grid-column: 3;
	grid-row: 4;
}

.wd-crm-billing-address-field {
	grid-column: 1 / 3;
	grid-row: 3 / 5;
}

.wd-crm-assignment-form textarea {
	min-height: 96px;
}

.wd-crm-assignment-actions {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: 14px;
}

.wd-crm-assignment-actions form {
	margin: 0;
}

.wd-crm-button-muted {
	align-items: center;
	background: #f8fafc !important;
	border: 1px solid var(--wd-crm-border-strong) !important;
	border-radius: 999px;
	color: var(--wd-crm-muted) !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
}

.wd-crm-checkbox {
	align-items: center;
	flex-direction: row !important;
	font-weight: 500 !important;
}

.wd-crm-checkbox input {
	min-height: 0;
	width: auto;
}

.wd-crm-marketing-consent {
	align-self: end;
	min-height: 40px;
}

.wd-crm-button,
.wd-crm-grid-form button:not(.wd-crm-button-secondary):not(.wd-crm-delete-link):not(.wd-crm-sort-button):not(.wd-crm-toolbar-button),
.wd-crm-settings-actions > button,
.wd-crm-assignment-actions > button,
.wd-crm-login button,
.wd-crm-inline-form button:not(.wd-crm-delete-link):not(.wd-crm-toolbar-button) {
	align-items: center;
	background: var(--wd-crm-accent);
	border: 1px solid var(--wd-crm-accent);
	border-radius: 999px;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
	text-decoration: none;
}

.wd-crm-button-secondary,
.wd-crm-small-button {
	align-items: center;
	background: var(--wd-crm-accent-soft);
	border: 1px solid #c8e4f6;
	border-radius: 999px;
	color: var(--wd-crm-accent-dark) !important;
	display: inline-flex;
	font: inherit;
	justify-content: center;
	min-height: 32px;
	padding: 4px 10px;
	text-decoration: none;
}

.wd-crm-settings-actions .wd-crm-button-secondary {
	min-height: 40px;
	padding: 8px 14px;
}

@media (max-width: 860px) {
	.wd-crm-settings-form {
		grid-template-columns: 1fr;
	}

	.wd-crm-google-redirect,
	.wd-crm-grid-form label:has(.wd-crm-google-refresh) {
		grid-column: 1 / -1;
	}
}

/* De bevestigingsknop staat soms in een formulier en soms los in een
   knoppenbalk; met de vorm hier ziet hij er overal hetzelfde uit. */
.wd-crm-delete-confirm {
	align-items: center;
	background: var(--wd-crm-danger) !important;
	border: 1px solid var(--wd-crm-danger) !important;
	border-radius: 999px !important;
	color: #fff !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
	text-decoration: none;
}

.wd-crm-delete-link {
	background: transparent !important;
	border: 0 !important;
	color: var(--wd-crm-danger) !important;
	cursor: pointer;
	font: inherit;
	font-weight: 400;
	padding: 0;
	text-decoration: none;
}

.wd-crm-two-col {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.wd-crm-status-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 12px 0;
}

.wd-crm-status-grid div {
	background: var(--wd-crm-soft);
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	padding: 10px;
}

.wd-crm-section-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 0 12px;
}

.wd-crm-section-heading h3 {
	margin: 0;
}

.wd-crm-heading-select {
	align-items: center;
	display: flex;
	gap: 8px;
	font-weight: 600;
	margin-left: auto;
	white-space: nowrap;
}

.wd-crm-heading-select select {
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	min-height: 38px;
	padding: 6px 10px;
}

.wd-crm-archive-form {
	border-top: 1px solid var(--wd-crm-border);
	margin-top: 14px;
	padding-top: 14px;
}

.wd-crm-table {
	border-collapse: collapse;
	width: 100%;
}

.wd-crm-table th,
.wd-crm-table td {
	border-bottom: 1px solid var(--wd-crm-border);
	padding: 9px 8px;
	text-align: left;
	vertical-align: top;
}

.wd-crm-table th {
	background: #f5f9fd;
	font-weight: 700;
}

.wd-crm-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wd-crm-action-column {
	min-width: 190px;
	width: 190px;
}

/* Op een tabelcel haalt display:flex de cel uit de rij: hij krijgt zijn eigen
   hoogte en zijn onderrand loopt niet meer gelijk met de rest van de regel.
   Vandaar inline-flex op de inhoud in plaats van flex op de cel zelf. */
.wd-crm-table td.wd-crm-actions {
	display: table-cell;
	white-space: nowrap;
}

.wd-crm-table td.wd-crm-actions > * {
	display: inline-flex;
	margin: 0 6px 0 0;
	vertical-align: middle;
}

.wd-crm-table td.wd-crm-actions > *:last-child {
	margin-right: 0;
}

/* Totaalregel onder een tabel: zelfde uitlijning als de kolom erboven. */
.wd-crm-table tfoot .wd-crm-total-row td {
	border-bottom: 0;
	border-top: 2px solid var(--wd-crm-border);
	font-weight: 700;
}

/* Contactformulier op de website. Zelfde opzet als het e-bookformulier:
   een raster dat op een smal scherm onder elkaar valt. */
.wd-crm-contact-row {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wd-crm-contact-field {
	display: flex;
	flex-direction: column;
	font-weight: 600;
	gap: 6px;
}

.wd-crm-contact-full {
	grid-column: 1 / -1;
}

.wd-crm-contact-field input,
.wd-crm-contact-field textarea {
	border: 1px solid #c9d2d6;
	border-radius: 6px;
	box-sizing: border-box;
	font: inherit;
	font-weight: 400;
	padding: 10px 12px;
	width: 100%;
}

.wd-crm-contact-actions {
	margin: 16px 0 0;
}

.wd-crm-contact-actions button {
	background: #1e73be;
	border: 0;
	border-radius: 40px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 12px 30px;
}

.wd-crm-contact-actions button:hover {
	background: #185d98;
}

.wd-crm-contact-notice {
	border-radius: 6px;
	margin: 0 0 14px;
	padding: 12px 14px;
}

.wd-crm-contact-notice.is-ok {
	background: #e8f6ec;
	border: 1px solid #b7e0c4;
}

.wd-crm-contact-notice.is-fout {
	background: #fdecec;
	border: 1px solid #f2bdbd;
}

/* Afspraakformulier: de vrije momenten per dag, als knopjes om uit te kiezen. */
.wd-crm-afspraak-uitleg {
	margin: 0 0 12px;
}

/* Eerst een dag kiezen; pas daarna worden de tijden opgehaald. */
.wd-crm-afspraak-dagkeuze {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.wd-crm-afspraak-dagknop {
	border: 1px solid #c9d2d6;
	border-radius: 999px;
	color: inherit;
	display: inline-block;
	font-size: 0.95rem;
	padding: 6px 12px;
	text-decoration: none;
}

.wd-crm-afspraak-dagknop:hover {
	background: #eef7fd;
}

/* Het thema kleurt links blauw; op een blauwe knop moet de tekst wit blijven. */
.wd-crm-afspraak-dagknop.is-actief {
	background: #1e73be;
	border-color: #1e73be;
	color: #fff !important;
}

.wd-crm-afspraak-tijden {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.wd-crm-afspraak-tijd input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.wd-crm-afspraak-tijd span {
	border: 1px solid #c9d2d6;
	border-radius: 999px;
	cursor: pointer;
	display: inline-block;
	font-size: 0.95rem;
	padding: 6px 12px;
}

.wd-crm-afspraak-tijd input:checked + span {
	background: #1e73be;
	border-color: #1e73be;
	color: #fff;
}

.wd-crm-afspraak-tijd input:focus-visible + span {
	outline: 2px solid #1e73be;
	outline-offset: 2px;
}

.wd-crm-afspraak-leeg {
	color: #5d6876;
}

/* Afgeronde opdrachten op de relatiepagina: een opsomming met de knop
   achter de naam. */
.wd-crm-archived-assignments {
	margin-top: 14px;
}

.wd-crm-completed-list {
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.wd-crm-completed-list li {
	align-items: center;
	display: flex;
	gap: 12px;
	margin: 0 0 8px;
}

.wd-crm-completed-list form {
	margin: 0;
}

/* Relatielijst: vaste kolombreedtes. Zonder dit rekt een lange bedrijfsnaam
   of opdrachtnaam de hele tabel uit het verband. Wat niet past wordt afgekapt;
   het hele veld staat in de title van de cel. */
.wd-crm-relations-table {
	table-layout: fixed;
}

.wd-crm-relations-table th,
.wd-crm-relations-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-crm-relations-table th:nth-child(1),
.wd-crm-relations-table td:nth-child(1) {
	width: 13%;
}

.wd-crm-relations-table th:nth-child(2),
.wd-crm-relations-table td:nth-child(2) {
	width: 15%;
}

.wd-crm-relations-table th:nth-child(3),
.wd-crm-relations-table td:nth-child(3) {
	width: 19%;
}

.wd-crm-relations-table th:nth-child(4),
.wd-crm-relations-table td:nth-child(4) {
	width: 23%;
}

.wd-crm-relations-table th:nth-child(5),
.wd-crm-relations-table td:nth-child(5) {
	width: 14%;
}

.wd-crm-relations-table th:nth-child(6),
.wd-crm-relations-table td:nth-child(6) {
	width: 16%;
}

/* De CRM-pagina heeft aan de tabbalk genoeg; de paginatitel eronder is
   dubbelop. Alleen op die pagina, via de body-klasse van de plugin. */
body.wd-crm-page .wp-block-post-title {
	display: none;
}

/* Een inline-flex knop laat de spaties tussen de tekstdelen vallen; gap zet
   ze er als flexafstand weer tussen. */
.wd-crm-marketing-confirm {
	gap: 0.35em;
}

/* Uitkomst per verzending: korte labels onder elkaar. */
.wd-crm-campaign-note {
	color: var(--wd-crm-muted);
	display: block;
	font-size: 0.85rem;
}

.wd-crm-campaign-note.is-goed {
	color: #2f7d4f;
}

.wd-crm-campaign-note.is-bounce {
	color: var(--wd-crm-danger);
}

.wd-crm-campaign-note.is-reden {
	font-style: italic;
}

/* Melding bij een adres dat is teruggekomen. */
.wd-crm-bounce-warning {
	align-items: center;
	background: #fdf3e6;
	border: 1px solid #edd0a6;
	border-radius: var(--wd-crm-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
	padding: 10px 12px;
}

.wd-crm-bounce-warning form {
	margin: 0 0 0 auto;
}

/* Een lead wacht nog op een besluit: flauw geel, net genoeg om op te vallen. */
.wd-crm-table tbody tr.wd-crm-row-lead > td {
	background: #fdf8e3;
}

.wd-crm-table tbody tr.wd-crm-row-lead:hover > td {
	background: #f9f1cf;
}

/* Regels die geen aandacht vragen: doorlopend en gearchiveerd. Grijs genoeg
   om ze apart te zetten, licht genoeg om leesbaar te blijven. */
.wd-crm-table tbody tr.wd-crm-row-muted > td {
	background: #f4f5f7;
	color: var(--wd-crm-muted);
}

.wd-crm-table tbody tr.wd-crm-row-muted:hover > td {
	background: #eceef1;
}

/* In het opdrachtenoverzicht staat er alleen bij een gearchiveerde opdracht
   iets in deze kolom. Een vaste breedte reserveren gaat dan ten koste van de
   kolommen die de tekst moeten dragen; deze krimpt mee tot wat er staat. */
.wd-crm-assignments-table .wd-crm-action-column {
	min-width: 0;
	width: 1%;
}

.wd-crm-billing-table .wd-crm-actions {
	justify-content: flex-start;
}

.wd-crm-limited-column {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-crm-compose-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wd-crm-html-editor-wrap {
	display: grid;
	gap: 8px;
}

.wd-crm-html-editor-wrap > label {
	font-weight: 700;
}

.wd-crm-html-toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Opmaakknoppen boven een editor: klein, lichtgrijs en rechthoekig, zodat ze
   niet met de knoppen van het formulier verward worden. De selector noemt de
   omhullende wrap mee, anders wint de knopopmaak van het formulier eromheen
   en worden het blauwe pillen. */
.wd-crm-html-editor-wrap .wd-crm-html-toolbar button {
	background: #f2f2f2 !important;
	border: 1px solid #ccd0d4 !important;
	border-radius: 3px !important;
	color: #1f2933 !important;
	display: inline-flex !important;
	font: inherit;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	min-height: 28px !important;
	min-width: 30px;
	padding: 3px 9px !important;
}

.wd-crm-html-editor-wrap .wd-crm-html-toolbar button:hover,
.wd-crm-html-editor-wrap .wd-crm-html-toolbar button:focus {
	background: #e5e5e5 !important;
	border-color: #8c8f94 !important;
	color: #1f2933 !important;
}

/* Aan-stand: donkerder grijs, tekst blijft zwart. */
.wd-crm-html-editor-wrap .wd-crm-html-toolbar button.is-active {
	background: #d5d7da !important;
	border-color: #8c8f94 !important;
	color: #1f2933 !important;
}

.wd-crm-html-visual,
.wd-crm-html-editor-wrap textarea {
	background: #fff;
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	box-sizing: border-box;
	font: inherit;
	line-height: 1.45;
	min-height: 260px;
	padding: 12px;
	width: 100%;
}

.wd-crm-html-visual:focus,
.wd-crm-html-editor-wrap textarea:focus {
	border-color: var(--wd-crm-accent);
	box-shadow: 0 0 0 3px rgba(28, 104, 166, 0.12);
	outline: 0;
}

.wd-crm-html-editor-wrap.is-html-code .wd-crm-html-toolbar button[data-wd-crm-html-mode] {
	background: #d5d7da !important;
	border-color: #8c8f94 !important;
	color: #1f2933 !important;
}

.wd-crm-template-preview {
	background: var(--wd-crm-soft);
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	margin: 14px 0;
	padding: 12px;
}

.wd-crm-template-preview > div {
	margin-top: 8px;
}

/* Opdrachtkoppeling, Bron, Template en de knop op een regel; pas bij een smal
   scherm gaan ze onder elkaar. */
.wd-crm-grid-form.wd-crm-marketing-filters {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.wd-crm-grid-form.wd-crm-marketing-filters label {
	flex: 1 1 170px;
	min-width: 0;
}

.wd-crm-grid-form.wd-crm-marketing-filters select {
	/* Zonder dit maakt de langste optie het veld onkrimpbaar en breekt de
	   regel alsnog af. */
	min-width: 0;
}

.wd-crm-grid-form.wd-crm-marketing-filters .wd-crm-filter-actions {
	align-self: end;
	flex: 0 0 auto;
	margin: 0;
}

/* Het zoekveld staat direct onder de filterregel; wat lucht ertussen. */
.wd-crm-marketing-search {
	margin-top: 10px;
}

/* Even hoog als de keuzevelden ernaast, zodat de regel uitlijnt. */
.wd-crm-grid-form.wd-crm-marketing-filters .wd-crm-button-secondary {
	min-height: 40px;
	padding: 8px 14px;
}

/* Selectielijst: het vinkje in het midden van de regel in plaats van op de
   tekstregel eronder, en minder lucht tussen de regels. */
.wd-crm-marketing-table th,
.wd-crm-marketing-table td {
	line-height: 1.35;
	padding-bottom: 6px;
	padding-top: 6px;
	vertical-align: middle;
}

.wd-crm-marketing-table .wd-crm-check-column {
	line-height: 1;
}

.wd-crm-marketing-table th.wd-crm-sortable {
	padding-bottom: 0;
	padding-top: 0;
}

.wd-crm-marketing-table th .wd-crm-sort-button {
	padding-bottom: 6px;
	padding-top: 6px;
}

/* Samenvoegvelden: wel herkenbaar, maar in de gewone letter en grootte. */
.wd-crm-merge-field {
	background: var(--wd-crm-accent-soft);
	border-radius: 4px;
	color: var(--wd-crm-accent-dark);
	font: inherit;
	padding: 1px 5px;
	white-space: nowrap;
}

/* Opslaan links, verwijderen helemaal rechts. */
.wd-crm-template-actions {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.wd-crm-email-layout {
	/* Lijst en berichtvenster delen dezelfde hoogte en vullen het scherm
	   tot onderaan. De aftrek is de ruimte boven het venster: menubalk,
	   paneelrand, kop en de zoekregel. */
	--wd-crm-email-height: max(420px, calc(100vh - 260px));
	/* Boven het berichtvenster staan alleen afzender, onderwerp en de
	   knoppenregel; de aftrek is daar dus kleiner dan bij de lijst, zodat
	   het bericht net zo ver doorloopt als de lijst ernaast. */
	--wd-crm-email-message-height: max(340px, calc(var(--wd-crm-email-height) - 100px));
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
}

.wd-crm-email-list {
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	max-height: var(--wd-crm-email-height);
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.wd-crm-email-row {
	border-bottom: 1px solid var(--wd-crm-border);
	color: var(--wd-crm-text) !important;
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 10px;
	text-decoration: none;
}

.wd-crm-email-row strong,
.wd-crm-email-row span,
.wd-crm-email-row small {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wd-crm-email-row:last-child {
	border-bottom: 0;
}

.wd-crm-email-row.is-active,
.wd-crm-email-row:hover {
	background: var(--wd-crm-accent-soft);
}

.wd-crm-email-row span,
.wd-crm-email-row small {
	color: var(--wd-crm-muted);
}

.wd-crm-email-detail {
	min-width: 0;
}

.wd-crm-email-relation {
	align-items: center;
	background: var(--wd-crm-soft);
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin: 12px 0;
	padding: 10px 12px;
}

.wd-crm-email-compose {
	grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.wd-crm-email-compose > label textarea {
	min-height: 360px;
}

.wd-crm-email-body {
	background: var(--wd-crm-soft);
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	max-height: var(--wd-crm-email-message-height);
	overflow-y: auto;
	padding: 14px;
	white-space: pre-wrap;
}

.wd-crm-email-html {
	white-space: normal;
}

.wd-crm-email-frame {
	background: #fff;
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	box-sizing: border-box;
	/* Trekt de regels af die in deze kolom boven het bericht staan:
	   onderwerp, afzender, datum en de relatiebalk. */
	height: var(--wd-crm-email-message-height);
	margin-top: 12px;
	width: 100%;
}

.wd-crm-email-attachments {
	background: #fff;
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	display: grid;
	gap: 8px;
	margin-top: 12px;
	padding: 12px;
}

.wd-crm-email-attachment {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: space-between;
}

.wd-crm-timeline {
	border-left: 3px solid #d9effc;
	display: grid;
	gap: 12px;
	margin-left: 10px;
	padding-left: 16px;
}

.wd-crm-timeline-item {
	background: #fff;
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	padding: 12px;
	position: relative;
}

.wd-crm-timeline-item::before {
	background: var(--wd-crm-accent);
	border-radius: 50%;
	content: "";
	height: 10px;
	left: -23px;
	position: absolute;
	top: 17px;
	width: 10px;
}

.wd-crm-timeline-table th:first-child,
.wd-crm-timeline-table td:first-child {
	width: 120px;
}

.wd-crm-timeline-table th:nth-child(2),
.wd-crm-timeline-table td:nth-child(2) {
	width: 160px;
}

.wd-crm-timeline-table th:last-child,
.wd-crm-timeline-table td:last-child {
	text-align: right;
	width: 150px;
}

.wd-crm-timeline-row {
	cursor: pointer;
}

.wd-crm-timeline-row:hover,
.wd-crm-timeline-row.is-open {
	background: var(--wd-crm-accent-soft);
}

.wd-crm-timeline-detail-row td {
	background: #fff;
	padding: 0;
}

	.wd-crm-timeline-detail {
		border-bottom: 1px solid var(--wd-crm-border);
		display: block;
		padding: 16px 14px 18px;
	}

	.wd-crm-timeline-body {
		max-width: none;
		text-align: left;
	}

	.wd-crm-timeline-body p {
		margin: 0 0 10px;
	}

	/* Onderbalk van een opengeklapt timeline-item: bijwerken links,
	   verwijderen rechts. */
	.wd-crm-timeline-detail-actions {
		align-items: center;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		margin: 14px 0 0;
	}

	/* Staat alleen de verwijderknop er, dan hoort die ook rechts. */
	.wd-crm-timeline-detail-actions > .wd-crm-timeline-delete:only-child {
		margin-left: auto;
	}

	.wd-crm-timeline-note-form {
		display: grid;
		gap: 12px;
	}

	.wd-crm-timeline-note-form textarea {
		border: 1px solid var(--wd-crm-border);
		border-radius: var(--wd-crm-radius);
		font: inherit;
		min-height: 120px;
		padding: 10px;
		width: 100%;
	}

	.wd-crm-timeline-note-form button {
		justify-self: start;
	}

	.wd-crm-timeline-value {
		white-space: nowrap;
	}

	.wd-crm-timeline-row-time-form {
		display: none;
		justify-content: flex-end;
	}

	.wd-crm-timeline-row.is-open .wd-crm-timeline-row-time-form {
		display: flex;
	}

	.wd-crm-timeline-row.is-open [data-wd-crm-amount-display] {
		display: none;
	}

	.wd-crm-timeline-row-time-form label {
		align-items: center;
		display: flex;
		gap: 8px;
		justify-content: flex-end;
		margin: 0;
		width: 100%;
	}

	.wd-crm-timeline-row-time-form label span {
		font-size: 14px;
		font-weight: 700;
	}

	.wd-crm-timeline-row-time-form input {
		border: 1px solid var(--wd-crm-border);
		border-radius: var(--wd-crm-radius);
		box-shadow: none;
		font: inherit;
		min-height: 40px;
		max-width: 92px;
		padding: 8px;
		text-align: right;
	}

	.wd-crm-timeline-row-upcoming {
		background: #e8f5ff;
		color: var(--wd-crm-accent-dark);
	}

	.wd-crm-timeline-row-upcoming:hover,
	.wd-crm-timeline-row-upcoming.is-open {
		background: #d9effc;
	}

	.wd-crm-file-list {
		display: grid;
		gap: 10px;
		margin-top: 12px;
	}

	.wd-crm-file-row {
		align-items: center;
		border-top: 1px solid var(--wd-crm-border);
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: flex-end;
		padding-top: 10px;
	}

	.wd-crm-file-row > a {
		margin-right: auto;
	}

.wd-crm-pill {
	background: var(--wd-crm-soft);
	border: 1px solid var(--wd-crm-border);
	border-radius: 999px;
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	padding: 3px 8px;
}

.wd-crm-money-positive {
	color: #166534;
	font-weight: 700;
}

.wd-crm-money-negative {
	color: #991b1b;
	font-weight: 700;
}

.wd-crm-notice {
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: var(--wd-crm-radius);
	margin: 0 0 14px;
	padding: 10px 12px;
}

.wd-crm-dialog {
	border: 0;
	border-radius: var(--wd-crm-radius);
	box-shadow: 0 20px 70px rgba(15, 23, 42, 0.3);
	max-width: min(920px, calc(100vw - 32px));
	padding: 0;
	width: 100%;
}

.wd-crm-wide-dialog {
	max-width: min(80vw, 1180px);
	width: 80vw;
}

.wd-crm-dialog::backdrop {
	background: rgba(15, 23, 42, 0.48);
}

.wd-crm-dialog-inner {
	padding: 18px;
}

@media (max-width: 720px) {
	.wd-crm-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.wd-crm-table {
		display: block;
		overflow-x: auto;
	}

	.wd-crm-email-layout,
	.wd-crm-email-compose {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Publiek e-book aanvraagformulier ([wd_crm_ebook_form])
   Staat op de website zelf, niet in het CRM-dashboard, en gebruikt daarom
   neutrale opmaak die zich voegt naar het thema.
   --------------------------------------------------------------------------- */

.wd-crm-ebook-form {
	max-width: 640px;
	/* Zorgt dat de melding na verzenden niet onder de sticky header valt
	   wanneer de browser naar #wd-crm-ebook springt. */
	scroll-margin-top: 120px;
}

.wd-crm-ebook-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.wd-crm-ebook-row .wd-crm-ebook-field {
	flex: 1 1 220px;
}

.wd-crm-ebook-field {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
}

/* De homepage zet het formulier in een witte kaart en gaf de velden daar een
   eigen rand en ronding. Die regels stonden in het CSS-snippet van de site;
   ze horen bij dit formulier, dus staan ze hier. Selector en volgorde zijn
   ongewijzigd, zodat de homepage er hetzelfde uitziet. */
body .wd-ebook-form-card input:not([type="submit"]),
body.home .wd-ebook-form-card input:not([type="submit"]) {
	border: 1px solid var(--wd-line);
	border-radius: 12px;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	width: 100%;
}

.wd-crm-ebook-field input {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid #c9d2d6;
	border-radius: 6px;
	font: inherit;
	font-weight: 400;
	box-sizing: border-box;
}

.wd-crm-ebook-field input:focus {
	outline: 2px solid #1e73be;
	outline-offset: 1px;
	border-color: #1e73be;
}

.wd-crm-ebook-actions {
	margin: 18px 0 0;
}

.wd-crm-ebook-actions button {
	background: #1e73be;
	color: #fff;
	border: 0;
	border-radius: 40px;
	padding: 12px 30px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wd-crm-ebook-actions button:hover {
	background: #185d98;
}

/* Specifieker dan .entry-content p, zodat de themastijl dit niet overruled. */
.wd-crm-ebook-form p.wd-crm-ebook-consent {
	margin: 10px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: #6b787e;
}

.wd-crm-ebook-notice {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid transparent;
}

.wd-crm-ebook-notice.is-ok {
	background: #eaf7ed;
	border-color: #b7e0c2;
	color: #1d6b33;
}

.wd-crm-ebook-notice.is-fout {
	background: #fdecec;
	border-color: #f3c2c2;
	color: #a12626;
}

/* Opslaan links, verwijderen rechts in het clientgegevens-blok */
.wd-crm-relation-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.wd-crm-relation-delete-note {
	font-size: 12px;
}

.wd-crm-hidden-form {
	display: none;
}

/* Verwijderknop bij een relatie: duidelijk als laatste stap */
/* Aanzetten leest als een gewone link; pas de bevestiging is nadrukkelijk.
   De bevestigingsknop erft wit-op-rood al van .wd-crm-delete-confirm. */
.wd-crm-relation-delete .wd-crm-delete-link {
	color: var(--wd-crm-danger) !important;
	font-weight: 400 !important;
}

/* Onderwerpregel van een e-mail over de volle breedte */
.wd-crm-email-compose label:has(> .wd-crm-full-input) {
	grid-column: 1 / -1;
}

/* Marketing: selectiekolom, voorbeeld en bevestiging */
.wd-crm-check-column {
	width: 34px;
	text-align: center;
}

.wd-crm-check-column input[type="checkbox"] {
	width: 17px;
	height: 17px;
	cursor: pointer;
	margin: 0;
	vertical-align: middle;
}

.wd-crm-preview-note {
	margin: 0 0 8px;
	font-size: 12px;
}

.wd-crm-preview-subject {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wd-crm-border);
}

.wd-crm-marketing-confirm {
	background: #8b1a1a !important;
	border-color: #8b1a1a !important;
}

/* E-mailtab: kop, knop, zoekveld en lijst staan samen in de linkerkolom,
   zodat het geopende bericht rechts op kophoogte begint. */
.wd-crm-email-side {
	min-width: 0;
}

.wd-crm-email-title {
	margin: 0 0 10px;
}

/* Zoekveld en knop naast elkaar; het veld groeit mee, de knop houdt
   zijn breedte en lijnt onderaan uit met het invoerveld. */
.wd-crm-email-filter {
	align-items: end;
	display: flex;
	gap: 10px;
	margin: 0 0 12px;
}

.wd-crm-email-filter .wd-crm-filter-field {
	flex: 1 1 auto;
	max-width: none;
	min-width: 0;
}

.wd-crm-email-filter input {
	border: 1px solid var(--wd-crm-border);
	border-radius: var(--wd-crm-radius);
	box-sizing: border-box;
	font: inherit;
	min-height: 40px;
	padding: 8px 8px 8px 34px;
	width: 100%;
}

.wd-crm-email-filter .wd-crm-button-secondary {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Meer laden met de stand erachter */
.wd-crm-email-more {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 10px;
}

.wd-crm-email-more .wd-crm-muted {
	font-size: 12px;
}

/* Titel van het geopende bericht kleiner dan de tabkop, zodat de
   hierarchie zichtbaar blijft. */
.wd-crm-email-subject-head h3 {
	font-size: 1.05rem;
	line-height: 1.3;
}

.wd-crm-email-row[hidden] {
	display: none !important;
}