/* =========================================================
   SZENENTRACKER – INDEXKALENDER
   ========================================================= */

.kalender-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#kalender-month-label {
	font-weight: bold;
	font-size: 18px;
	color: var(--txt);
}

.kalender-container table {
	border-collapse: collapse;
	width: 100%;
	max-width: 400px;
	margin: auto;
	table-layout: fixed;
}

.kalender-container th,
.kalender-container td {
	border: 0;
	padding: 3px;
	color: var(--fontnormal);
	text-align: center;
	width: 14.28%;
	box-sizing: border-box;
}

.kalender-container h3 {
	text-align: center;
	margin-bottom: 5px;
}

.kalender-nav {
	margin-top: 20px;
}

.kalender-nav button {
	font-size: 16px;
	margin: 20px 5px;
	padding: 4px 8px;
}


/* ---------------------------------------------------------
   GESAMTBEREICH
   --------------------------------------------------------- */

.kalender-wrapper {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;

	gap: 20px;

	margin: 10px 0;
	padding: 20px;

	background: var(--back) var(--katbild);
	background-size: cover;

	box-sizing: border-box;
}

.kalender-box {
	display: flex;
	flex-direction: row;
	width: 270px;
	min-width: 0;
}


/* ---------------------------------------------------------
   LISTEN
   --------------------------------------------------------- */

.plot-list,
.pers-list {
	width: 450px;
	height: 250px;

	padding: 3px 20px;

	background: var(--body);

	border-top: 3px solid var(--bordercolor);
	border-bottom: 3px solid var(--bordercolor);

	box-shadow: 0 2px 6px rgba(0,0,0,0.1);

	font-size: 11px;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0;

	overflow: auto;

	box-sizing: border-box;
	align-self: start;
}

.plot-list h2,
.pers-list h2 {
	margin: 0 auto;

	background: none;

	color: var(--txt);
}

.plot-list h4,
.pers-list h4 {
	margin-top: 0;
	margin-bottom: 5px;
}

.plot-list ul,
.pers-list ul {
	margin: 0;
	padding-left: 0;

	max-height: none;

	overflow: visible;

	list-style: none;
}


/* =========================================================
   DATUMSGRUPPEN IN DER TERMINLISTE
   ========================================================= */

.szenentracker-calendar-date {
	margin: 0 !important;
	padding: 8px 0 !important;

	border-bottom: 1px solid color-mix(
		in srgb,
		var(--bordercolor) 45%,
		transparent
	);
}

.szenentracker-calendar-date:last-child {
	border-bottom: 0;
}

.szenentracker-calendar-date > div {
	display: flex !important;
	align-items: flex-start;

	gap: 8px;
}

.szenentracker-calendar-date-label {
	flex: 0 0 52px;

	min-width: 52px !important;

	padding-top: 2px;

	color: var(--txt);

	font-size: 10px;
	font-weight: bold;
	line-height: 1.4;
}

.szenentracker-calendar-date-content {
	flex: 1 1 auto;

	min-width: 0;
}


/* =========================================================
   NORMALE KALENDEREINTRÄGE
   ========================================================= */

.szenentracker-calendar-entry {
	position: relative;

	margin: 0 0 6px;
	padding-left: 11px;

	color: var(--fontnormal);

	line-height: 1.5;
}

.szenentracker-calendar-entry:last-child {
	margin-bottom: 0;
}

.szenentracker-calendar-entry > a,
.szenentracker-calendar-entry strong {
	color: var(--txt);
}


/* ---------------------------------------------------------
   FREISTEHENDE PLOTSZENE
   also Plot ohne Eventzuordnung
   --------------------------------------------------------- */

.szenentracker-calendar-plot {
	padding: 5px 7px 5px 11px;

	border-left: 2px solid var(--bordercolor);

	background: color-mix(
		in srgb,
		var(--bordercolor) 7%,
		transparent
	);
}

.szenentracker-calendar-plot strong {
	color: var(--txt);
}


/* ---------------------------------------------------------
   GEBURTSTAG
   --------------------------------------------------------- */

.szenentracker-calendar-birthday {
	padding: 5px 7px 5px 11px;

	border-left: 2px dotted var(--bordercolor);

	background: color-mix(
		in srgb,
		var(--bordercolor) 4%,
		transparent
	);
}


/* =========================================================
   EVENT
   ========================================================= */

.szenentracker-calendar-event {
	position: relative;

	margin: 0 0 8px;
	padding: 7px 8px 7px 10px;

	border-left: 2px solid var(--bordercolor);

	background: color-mix(
		in srgb,
		var(--bordercolor) 8%,
		transparent
	);
}

.szenentracker-calendar-event:last-child {
	margin-bottom: 0;
}


/* Eventtitel + Beschreibung */

.szenentracker-calendar-event-title {
	color: var(--fontnormal);

	font-size: 10.5px;
	line-height: 1.55;
}

.szenentracker-calendar-event-title > b,
.szenentracker-calendar-event-title > strong {
	display: inline-block;

	margin-bottom: 2px;

	color: var(--txt);

	font-size: 11px;
	font-weight: bold;
}


/* Links innerhalb von Eventbeschreibungen */

.szenentracker-calendar-event-title a {
	color: var(--txt);
	font-weight: bold;
	text-decoration: none;
}

.szenentracker-calendar-event-title a:hover {
	text-decoration: underline;
}


/* =========================================================
   DEM EVENT ZUGEORDNETE PLOTSZENEN
   ========================================================= */

.szenentracker-calendar-event-scenes {
	position: relative;

	margin: 7px 0 0 6px;
	padding: 4px 0 0 13px;

	border-left: 1px solid var(--bordercolor);
}


/* kleine Verbindung vom Event zur Szenenliste */

.szenentracker-calendar-event-scenes::before {
	content: "";

	position: absolute;
	top: 0;
	left: -1px;

	width: 10px;
	height: 1px;

	background: var(--bordercolor);
}


/* einzelne Plotszene */

.szenentracker-calendar-event-scene {
	position: relative;

	margin: 0;
	padding: 4px 4px 4px 9px;

	color: var(--fontnormal);

	font-size: 10px;
	line-height: 1.5;
}


/* Querstrich von der senkrechten Eventlinie zur Szene */

.szenentracker-calendar-event-scene::before {
	content: "";

	position: absolute;
	left: -13px;
	top: 11px;

	width: 9px;
	height: 1px;

	background: var(--bordercolor);
}


/* letzte Szene beendet die vertikale Linie optisch */

.szenentracker-calendar-event-scene:last-child::after {
	content: "";

	position: absolute;
	left: -14px;
	top: 12px;
	bottom: -5px;

	width: 2px;

	background: var(--body);
}


/* Szenendatum */

.szenentracker-calendar-event-scene-date {
	display: inline-block;

	min-width: 35px;
	margin-right: 2px;

	color: var(--txt);

	font-size: 9px;
	font-weight: bold;
	line-height: 1.4;
}


/* Szenentitel */

.szenentracker-calendar-event-scene a {
	color: var(--txt);

	font-weight: normal;
	text-decoration: none;
}

.szenentracker-calendar-event-scene a strong {
	color: var(--txt);
	font-weight: bold;
}

.szenentracker-calendar-event-scene a:hover,
.szenentracker-calendar-event-scene a:hover strong {
	text-decoration: underline;
}


/* =========================================================
   KALENDERTAGE
   ========================================================= */

.highlight-user {
	background: rgba(0,0,0,0.2);
	font-weight: bold;
}

.highlight-plot {
	color: #fff !important;
	font-weight: bold;
	background-color: #292320;
}

.highlight-personal {
	color: #fff !important;
	background-color: #7b602f;
	font-weight: bold;
}

.highlight-fullmoon {
	font-weight: bold;
	color: #0d0d0d !important;
	background-color: rgba(255,255,200,1);
}


/* =========================================================
   EVENTVERWALTUNG
   ========================================================= */

.button-danger {
	background-color: var(--link2) !important;
	color: #0d0d0d !important;
}

form.event-form {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	gap: 20px 30px;

	align-items: flex-start;

	margin-bottom: 40px;
}

form.event-form label {
	display: flex;
	flex-direction: column;

	margin-bottom: 0;

	font-weight: bold;
}

form.event-form textarea {
	grid-column: 1 / -1;

	min-height: 80px;

	margin-top: 15px;

	resize: vertical;
}

form.event-form .actions {
	grid-column: 1 / -1;

	margin-top: 10px;
}

.kalender-width {
	min-width: 100%;
}


/* =========================================================
   SCHMALERE ANSICHT
   ========================================================= */

@media (max-width: 800px) {

	.kalender-wrapper {
		flex-wrap: wrap;
		justify-content: center;
	}

	.kalender-box {
		width: 100%;
		max-width: 300px;
	}

	.plot-list,
	.pers-list {
		flex: 1 1 280px;

		width: auto;
		min-width: 0;
	}


	/* Eventlisten etwas großzügiger */

	.szenentracker-calendar-date-label {
		flex-basis: 45px;

		min-width: 45px !important;
	}

	.szenentracker-calendar-event {
		padding-right: 6px;
	}

	.szenentracker-calendar-event-scenes {
		margin-left: 3px;
		padding-left: 11px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

	.kalender-wrapper {
		display: block;

		padding: 12px;
	}

	.kalender-box,
	.plot-list,
	.pers-list {
		width: 100%;
		max-width: none;
	}

	.plot-list,
	.pers-list {
		height: auto;
		max-height: 320px;

		margin-top: 12px;
		padding: 8px 12px;

		font-size: 12px;
	}


	/* Datum oberhalb statt als schmale Seitenspalte */

	.szenentracker-calendar-date > div {
		display: block !important;
	}

	.szenentracker-calendar-date-label {
		display: block;

		min-width: 0 !important;

		margin-bottom: 5px;

		color: var(--txt);

		font-size: 11px;
	}


	/* Events */

	.szenentracker-calendar-event {
		padding: 8px 9px;

		font-size: 12px;
	}

	.szenentracker-calendar-event-title {
		font-size: 12px;
	}

	.szenentracker-calendar-event-title > b,
	.szenentracker-calendar-event-title > strong {
		font-size: 13px;
	}


	/* Zugeordnete Szenen */

	.szenentracker-calendar-event-scenes {
		margin-top: 8px;
		padding-left: 13px;
	}

	.szenentracker-calendar-event-scene {
		padding-top: 5px;
		padding-bottom: 5px;

		font-size: 11.5px;
	}

	.szenentracker-calendar-event-scene-date {
		min-width: 39px;

		font-size: 10px;
	}


	/* Eventformular */

	form.event-form {
		grid-template-columns: 1fr;

		gap: 12px;
	}

	form.event-form textarea,
	form.event-form .actions {
		grid-column: auto;
	}
}