/* ==================================================================
 * Veranstaltungskalender (EXT:sf_event_mgt) - Monatsansicht
 * ------------------------------------------------------------------
 * Passt optisch zur Listenansicht (events.css), funktioniert aber
 * auch ohne sie. Alle Regeln sind mit .tx-sf-event-mgt .event-calendar
 * eingegrenzt und schlagen dadurch sowohl die events_default.css der
 * Extension als auch die Kalender-Regeln aus der screen.css.
 *
 * Ab Tablet: Monatsraster mit Kalenderwochen.
 * Smartphone: Liste der Tage, an denen etwas stattfindet.
 * ================================================================== */

.tx-sf-event-mgt .event-calendar {
	--cal-accent: var(--bs-primary, #2a9d8f);
	--cal-accent-rgb: var(--bs-primary-rgb, 42, 157, 143);
	--cal-border: var(--bs-border-color, #dedede);
	--cal-muted: var(--bs-secondary-color, #6c757d);
	--cal-text: var(--bs-body-color, #212121);
	--cal-head-bg: #f2f2f3;
	--cal-weekend-bg: #fafafa;
	--cal-other-bg: #f6f6f7;
	--cal-radius: var(--bs-border-radius-lg, .5rem);
	margin: 0 0 3rem 0;
}

.tx-sf-event-mgt .event-calendar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ==================================================================
 * 1. Monatsnavigation
 * ================================================================== */

.tx-sf-event-mgt .event-calendar .event-calendar__browser {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser-prev,
.tx-sf-event-mgt .event-calendar .event-calendar__browser-next {
	flex: 1 1 0;
	padding: 0;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser-current {
	flex: 0 0 auto;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser-current h3 {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.2;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser a {
	display: inline-block;
	padding: .35rem .95rem;
	border: 1px solid var(--cal-accent);
	border-radius: 999px;
	color: var(--cal-accent);
	font-size: .9rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser a:hover,
.tx-sf-event-mgt .event-calendar .event-calendar__browser a:focus-visible {
	background: var(--cal-accent);
	color: #fff;
}

.tx-sf-event-mgt .event-calendar .event-calendar__browser a:focus-visible {
	outline: 2px solid var(--cal-accent);
	outline-offset: 2px;
}


/* ==================================================================
 * 2. Raster (Kopfzeile + Wochen)
 * ================================================================== */

.tx-sf-event-mgt .event-calendar .event-calendar__weekdays,
.tx-sf-event-mgt .event-calendar .event-calendar__days {
	display: grid;
	grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr));
	background: none;
}

/* Rahmen um das gesamte Raster */
.tx-sf-event-mgt .event-calendar .event-calendar__weekdays {
	overflow: hidden;
	border: 1px solid var(--cal-border);
	border-radius: var(--cal-radius) var(--cal-radius) 0 0;
	background: var(--cal-head-bg);
}

.tx-sf-event-mgt .event-calendar .event-calendar__days {
	border-right: 1px solid var(--cal-border);
	border-left: 1px solid var(--cal-border);
	border-bottom: 1px solid var(--cal-border);
}

.tx-sf-event-mgt .event-calendar .event-calendar__days:last-child {
	overflow: hidden;
	border-radius: 0 0 var(--cal-radius) var(--cal-radius);
}

/* --- Wochentage --------------------------------------------------- */

.tx-sf-event-mgt .event-calendar .event-calendar__weekdays-weekday {
	margin: 0;
	padding: .6rem .5rem;
	background: none;
	color: var(--cal-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
}

/* --- Kalenderwoche ------------------------------------------------ */

.tx-sf-event-mgt .event-calendar .event-calendar__weeknumber {
	width: auto;
	margin: 0;
	padding: .55rem .25rem;
	border-right: 1px solid var(--cal-border);
	background: var(--cal-head-bg);
	color: var(--cal-muted);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.tx-sf-event-mgt .event-calendar .event-calendar__days .event-calendar__weeknumber::before {
	content: "KW";
	display: block;
	font-size: .65rem;
	font-weight: 400;
	letter-spacing: .04em;
}

/* --- Tage --------------------------------------------------------- */

.tx-sf-event-mgt .event-calendar .event-calendar__day {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
	min-height: 7.5rem;
	margin: 0;
	padding: .4rem;
	border: 0;
	border-right: 1px solid var(--cal-border);
	background: #fff;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day:last-child {
	border-right: 0;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day6,
.tx-sf-event-mgt .event-calendar .event-calendar__day7 {
	background: var(--cal-weekend-bg);
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-other-month {
	background: var(--cal-other-bg);
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-width: 1.85rem;
	height: 1.85rem;
	padding: 0 .3rem;
	border-radius: 999px;
	color: var(--cal-text);
	font-size: .9rem;
	font-weight: 600;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-other-month .event-calendar__day-date {
	color: var(--cal-muted);
	font-weight: 400;
}

/* Heute */
.tx-sf-event-mgt .event-calendar .event-calendar__day-today {
	background: rgba(var(--cal-accent-rgb), .07);
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-today .event-calendar__day-date {
	background: var(--cal-accent);
	color: #fff;
}

/* --- Termine ------------------------------------------------------ */

.tx-sf-event-mgt .event-calendar .event-calendar__day-event {
	position: relative;
	margin: 0;
	padding: .3rem .45rem;
	border: 0;
	border-left: 3px solid var(--cal-accent);
	border-radius: .3rem;
	background: rgba(var(--cal-accent-rgb), .12);
	font-size: .8rem;
	line-height: 1.3;
	transition: background-color .15s ease;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-other-month .event-calendar__day-event {
	opacity: .65;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--cal-text);
	font-weight: 600;
	text-decoration: none;
	/* Lange Woerter sauber trennen statt mitten im Wort umzubrechen */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Der ganze Termin ist klickbar */
.tx-sf-event-mgt .event-calendar .event-calendar__day-event a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event:hover,
.tx-sf-event-mgt .event-calendar .event-calendar__day-event:focus-within {
	background: var(--cal-accent);
	opacity: 1;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event:hover a,
.tx-sf-event-mgt .event-calendar .event-calendar__day-event:focus-within a,
.tx-sf-event-mgt .event-calendar .event-calendar__day-event:hover .event-calendar__day-event-time,
.tx-sf-event-mgt .event-calendar .event-calendar__day-event:focus-within .event-calendar__day-event-time {
	color: #fff;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event:focus-within {
	outline: 2px solid var(--cal-accent);
	outline-offset: 2px;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event a:focus-visible {
	outline: none;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event-time {
	margin-top: .15rem;
	color: var(--cal-muted);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
}

.tx-sf-event-mgt .event-calendar .event-calendar__day-event-time:empty {
	display: none;
}


/* ==================================================================
 * 3. Tablet: etwas kompakter
 * ================================================================== */

@media (max-width: 991.98px) {

	.tx-sf-event-mgt .event-calendar .event-calendar__weekdays,
	.tx-sf-event-mgt .event-calendar .event-calendar__days {
		grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr));
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day {
		min-height: 6rem;
		padding: .3rem;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-event {
		padding: .25rem .35rem;
		font-size: .75rem;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-event-time {
		font-size: .7rem;
	}

}


/* ==================================================================
 * 4. Smartphone: Terminliste statt Raster
 * ================================================================== */

@media (max-width: 767.98px) {

	.tx-sf-event-mgt .event-calendar .event-calendar__browser {
		flex-wrap: wrap;
		gap: .75rem;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__browser-current {
		order: -1;
		flex-basis: 100%;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__browser a {
		padding: .3rem .75rem;
		font-size: .85rem;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__days {
		display: block;
		border: 0;
		border-radius: 0;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day {
		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: .4rem .75rem;
		min-height: 0;
		padding: .75rem 0;
		border: 0;
		border-bottom: 1px solid var(--cal-border);
		background: none;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-today {
		background: none;
	}

	/* Kopfzeile, Kalenderwochen, leere Tage und Tage aus den
	   Nachbarmonaten ausblenden (muss nach der Tag-Regel oben stehen) */
	.tx-sf-event-mgt .event-calendar .event-calendar__weekdays,
	.tx-sf-event-mgt .event-calendar .event-calendar__weeknumber,
	.tx-sf-event-mgt .event-calendar .event-calendar__day:not(.has-events),
	.tx-sf-event-mgt .event-calendar .event-calendar__day-other-month {
		display: none;
	}

	/* Datum links, mit Wochentag darueber */
	.tx-sf-event-mgt .event-calendar .event-calendar__day-date {
		display: flex;
		flex-direction: column;
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		width: 3rem;
		height: auto;
		padding: .3rem 0;
		border-radius: var(--bs-border-radius, .375rem);
		background: var(--cal-head-bg);
		font-size: 1.25rem;
		line-height: 1.1;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-date::before {
		color: var(--cal-muted);
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-today .event-calendar__day-date::before {
		color: inherit;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day1 .event-calendar__day-date::before { content: "Mo"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day2 .event-calendar__day-date::before { content: "Di"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day3 .event-calendar__day-date::before { content: "Mi"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day4 .event-calendar__day-date::before { content: "Do"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day5 .event-calendar__day-date::before { content: "Fr"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day6 .event-calendar__day-date::before { content: "Sa"; }
	.tx-sf-event-mgt .event-calendar .event-calendar__day7 .event-calendar__day-date::before { content: "So"; }

	.tx-sf-event-mgt .event-calendar .event-calendar__day-event {
		grid-column: 2;
		padding: .45rem .6rem;
		font-size: .9rem;
	}

	.tx-sf-event-mgt .event-calendar .event-calendar__day-event-time {
		font-size: .8rem;
	}

	/* Hinweis, wenn im Monat nichts stattfindet */
	.tx-sf-event-mgt .event-calendar:not(:has(.event-calendar__day.has-events:not(.event-calendar__day-other-month)))::after {
		content: "In diesem Monat sind keine Veranstaltungen eingetragen.";
		display: block;
		padding: 1rem;
		border-radius: var(--cal-radius);
		background: var(--cal-head-bg);
		color: var(--cal-muted);
		text-align: center;
	}

}