.rd-crm-appointments {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rd-crm-appointments-header,
.rd-crm-appointments-controls,
.rd-crm-appointments-group summary,
.rd-crm-appointments-item button,
.rd-crm-appointments-footer {
	display: flex;
	align-items: center;
}

.rd-crm-appointments-header {
	justify-content: space-between;
	gap: var(--rd-spacing-md);
}

.rd-crm-appointments-controls {
	justify-content: flex-end;
	gap: var(--rd-spacing-x-sm);
}

.rd-crm-appointments-controls .rd-select select {
	max-width: var(--rd-spacing-xxx-huge);
}

.rd-crm-appointments-groups,
.rd-crm-appointments-skeleton {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rd-spacing-sm);
}

.rd-crm-appointments-groups {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.rd-crm-appointments-group {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-md);
	overflow-x: hidden;
	overflow-y: auto;
}

.rd-crm-appointments-group summary {
	position: sticky;
	top: 0;
	z-index: 1;
	justify-content: space-between;
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	background: var(--rd-list-default-dark);
	color: var(--rd-gray-700);
	font-weight: var(--rd-fontweights-open-sans-1);
	cursor: pointer;
}

.rd-crm-appointments-group[data-group="missed"] summary {
	background: var(--rd-error-inactive);
	color: var(--rd-red-900);
	box-shadow: inset var(--rd-spacing-xx-sm) 0 0 var(--rd-error-default);
}

.rd-crm-appointments-group[data-group="today"] summary {
	background: var(--rd-warning-inactive);
	color: var(--rd-warning-900);
	box-shadow: inset var(--rd-spacing-xx-sm) 0 0 var(--rd-warning-default);
}

.rd-crm-appointments-group[data-group="upcoming"] summary {
	background: var(--rd-success-inactive);
	color: var(--rd-green-900);
	box-shadow: inset var(--rd-spacing-xx-sm) 0 0 var(--rd-success-default);
}

.rd-crm-appointments-callback-filter {
	margin: 0;
	white-space: nowrap;
}

.rd-crm-appointments-group ul {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rd-crm-appointments-item + .rd-crm-appointments-item,
.rd-crm-appointments-empty {
	border-top: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
}

.rd-crm-appointments-item button {
	width: 100%;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	border: 0;
	background: var(--rd-list-default-light);
	color: var(--rd-gray-700);
	text-align: left;
	cursor: pointer;
}

.rd-crm-appointments-item button:hover,
.rd-crm-appointments-item button:focus-visible {
	background: var(--rd-list-hover);
}

.rd-crm-appointments-item-main {
	min-width: 0;
	flex: 1;
}

.rd-crm-appointments-item-main strong,
.rd-crm-appointments-item-main span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rd-crm-appointments-item-main span,
.rd-crm-appointments-item time,
.rd-crm-appointments-empty {
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-3);
}

.rd-crm-appointments-item time {
	flex: 0 0 auto;
}

.rd-crm-appointments-empty {
	padding: var(--rd-spacing-sm);
}

.rd-crm-appointments-footer {
	justify-content: flex-end;
	margin-top: auto;
	padding-top: var(--rd-spacing-sm);
}

.rd-crm-appointments-skeleton > div {
	padding: var(--rd-spacing-sm);
	border: var(--rd-borderwidth-border-default) solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-md);
}

.rd-crm-appointments-skeleton .rd-skeleton + .rd-skeleton {
	margin-top: var(--rd-spacing-sm);
}

@media (max-width: 900px) {
	.rd-crm-widget-header.rd-crm-appointments-header {
		display: block;
	}

	.rd-crm-appointments-controls {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		margin-top: var(--rd-spacing-x-sm);
	}

	.rd-crm-appointments-controls .rd-select {
		grid-column: 1 / -1;
	}

	.rd-crm-appointments-controls .rd-select select {
		width: 100%;
		max-width: none;
	}

	.rd-crm-appointments-controls pc-knob-multi-select {
		min-width: 0;
	}

	.rd-crm-appointments-groups,
	.rd-crm-appointments-skeleton {
		grid-template-columns: 1fr;
	}

	.rd-crm-appointments-groups {
		grid-auto-rows: max-content;
	}

	.rd-crm-appointments-group ul {
		flex: none;
		max-height: var(--rd-spacing-xxx-huge);
	}

	.rd-crm-appointments-group {
		height: auto;
	}
}
/*
 * An empty group keeps only its summary row. Without this the three-column grid stretches
 * every column to the tallest one, so two empty groups cost the same vertical space as a
 * full one just to repeat "Keine Termine".
 */
.rd-crm-appointments-group[data-empty="true"] {
	height: auto;
	align-self: start;
	overflow: visible;
}

.rd-crm-appointments-group[data-empty="true"] > summary {
	cursor: default;
	color: var(--rd-gray-500);
}

.rd-crm-appointments-group[data-empty="true"] > summary::marker,
.rd-crm-appointments-group[data-empty="true"] > summary::-webkit-details-marker {
	content: "";
	display: none;
}