.tt-workshop-registration-form {
	font-size: 16px;
	color: var(--tt-color-text);
}

.tt-workshop-registration-form .field-error-message {
	color: var(--tt-color-warning);
	font-size: 12px;
}

.tt-workshop-registration-form .tt-button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.tt-workshop-registration-form input:not([type="hidden"]),
.tt-workshop-registration-form select,
.weekly-timetable-filters input {
	border-color: var(--tt-color-border);
}

.tt-workshop-registration-form input:focus-visible,
.tt-workshop-registration-form select:focus-visible,
.weekly-timetable-filters input:focus-visible {
	outline: .1875rem solid var(--tt-color-accent);
	outline-offset: .125rem;
}

.tt-workshop-brand-highlight {
	color: var(--tt-color-brand);
}

.workshop-table .workshop-submit-button {
	background: var(--tt-color-brand);
	border-color: var(--tt-color-brand);
	color: var(--tt-color-brand-contrast);
}

.workshop-table .workshop-submit-button:hover,
.workshop-table .workshop-submit-button:focus {
	color: var(--tt-color-brand-contrast);
	filter: brightness(.92);
}

/* Keep the workshop list visually aligned with the course list: no legacy
 * table rules and alternating colours per workshop record. */
.workshop-table,
.workshop-table tr,
.workshop-table td {
	border: 0 !important;
}

.workshop-table .tt-workshop-list__row > td {
	padding: .625rem .75rem !important;
	vertical-align: middle !important;
}

.workshop-table .tt-workshop-list__row > td:first-child {
	padding-left: 10px !important;
}

.workshop-table .workshop-submit-button {
	display: inline-flex !important;
	width: 100%;
	height: 2.625rem !important;
	min-height: 2.625rem !important;
	margin: 0 !important;
	padding: .5rem .75rem !important;
	line-height: 1.25 !important;
}

.workshop-table .tt-workshop-list__row--odd {
	background-color: var(--tt-color-surface);
}

.workshop-table .tt-workshop-list__row--even {
	background-color: var(--tt-color-table-row-even);
}

.workshop-table tr:hover > td {
	background-color: transparent !important;
}

[v-cloak] {
	display: none;
}

.weekly-timetable-filters {
	max-width: 210px;
}

.teacher-dropdown-wrapper {
	margin-bottom: 10px;
}

.startdate-wrapper {
	margin-bottom: 20px;
}

.cell-with-additional-field-info {
	line-height: 1em;
}

.additional-field-info {
	font-size: 12px;
}

/* Mobile workshop list (≤ 782px): one card per workshop.
 * Desktop is untouched; [tt_workshoplist]. */
.tt-workshop-list__short {
	display: none;
}

@media (max-width: 782px) {
	.tt_table:has(> .workshop-table) {
		overflow-x: visible;
	}

	.workshop-table,
	.workshop-table tbody,
	.workshop-table tr,
	.workshop-table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.workshop-table .tt-workshop-list__row {
		margin: 0 0 .75rem;
		padding: .75rem 10px;
		border: 1px solid var(--tt-color-border) !important;
		border-radius: var(--tt-radius);
		background-color: var(--tt-color-surface) !important;
	}

	.workshop-table .tt-workshop-list__row > td,
	.workshop-table .tt-workshop-list__row > td:first-child {
		padding: .125rem 0 !important;
		text-align: start;
	}

	.workshop-table .tt-workshop-list__row > td:empty {
		display: none;
	}

	/* Day, date and time: bold on one line; extra info below. */
	.workshop-table .tt-workshop-list__row > td:nth-child(2),
	.workshop-table .tt-workshop-list__row > td:nth-child(3) {
		display: inline;
		font-weight: 700;
	}

	.workshop-table .tt-workshop-list__row > td:nth-child(2) {
		margin-inline-end: .375rem;
	}

	.workshop-table .tt-workshop-list__row > td:nth-child(4) {
		margin-top: .125rem;
	}

	.workshop-table .workshop-infoextern {
		font-weight: 400;
	}

	.tt-workshop-list__long {
		display: none;
	}

	.tt-workshop-list__short {
		display: inline;
	}

	.workshop-table .tanzlehrer .font18 {
		display: none !important;
	}

	.workshop-table .workshop-submit-button {
		height: auto !important;
		min-height: 2.75rem !important;
		margin-top: .5rem !important;
		white-space: normal;
	}
}

/* Mobile workshop timetable (≤ 782px): stacked by day, today first.
 * Stacking comes from the [tt_gruppenstundenplan] rules in ttplugin.css (.tt-timetable);
 * this block only adds the workshop cards. Desktop is untouched; [tt_ttworkshopstundenplan]. */
@media (max-width: 782px) {
	@supports (display: contents) {
		.tt-timetable .tt-timetable__head {
			background-color: var(--tt-color-surface-muted);
		}

		/* Empty days; trailing line breaks after the signup button or at the end of an entry. */
		.tt-timetable .tt-timetable__head--empty,
		.tt-timetable .tt-timetable__signup ~ br,
		.tt-timetable .tt-timetable__entry > br + br + br:last-child {
			display: none;
		}

		.tt-timetable .tt-timetable__entry {
			display: block;
			margin: 0 0 .75rem;
			padding: .75rem 10px;
			border: 1px solid var(--tt-color-border);
			border-radius: var(--tt-radius);
			background-color: var(--tt-color-surface);
		}

		.tt-timetable .tt-timetable__signup {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 100%;
			min-height: 2.75rem;
			margin-top: .5rem;
			padding: .4375rem .75rem;
			border-radius: var(--tt-radius);
			background: var(--tt-color-brand);
			color: var(--tt-color-brand-contrast);
			font-weight: 700;
			text-decoration: none;
		}
	}
}

/* Workshop timetable, desktop (≥ 783px): cards come from ttplugin.css;
 * here the "Anmelden" button and trailing line breaks. [tt_ttworkshopstundenplan]. */
.tt-timetable__soon {
	color: var(--tt-color-text-muted);
	font-style: italic;
}

@media (min-width: 783px) {
	.tt-timetable .tt-timetable__signup ~ br,
	.tt-timetable .tt-timetable__entry > br + br + br:last-child {
		display: none;
	}

	.tt-timetable .tt-timetable__signup {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 100%;
		min-height: 2.375rem;
		margin-top: .5rem;
		padding: .375rem .5rem;
		border-radius: var(--tt-radius);
		background: var(--tt-color-brand);
		color: var(--tt-color-brand-contrast);
		font-weight: 700;
		text-decoration: none;
		overflow-wrap: normal;
	}
}

@media (min-width: 783px) and (max-width: 1100px) {
	.tt-timetable .tt-timetable__signup {
		padding: .25rem;
	}
}