/* Durchlaufplan
 * assets/style.css
 */

/* STRUCTURE */

.screenreader {
	display: inline-block !important;
	overflow: hidden !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0px !important;
}

body {
	font-family: sans-serif;
	font-size: 2rem;
	margin: 0;
	background-color: #eff1f5;
	color: #4c4f69;
	accent-color: #d20f39;
	@media (prefers-color-scheme: dark) {
		background-color: #1e1e2e;
		color: #cdd6f4;
		accent-color: #f38ba8;
	}
}
a {
	color: #209fb5;
}
a:hover {
	color: #1e66f5;
}
@media (prefers-color-scheme: dark) {
	a {
		color: #74c7ec;
	}
	a:hover {
		color: #89dceb;
	}
}

header {
	padding: 5px 35px;
	background-color: #df8e1d;
	@media (prefers-color-scheme: dark) {
		background-color: #f9e2af;
	}
}
header,
header a,
header a:hover {
	text-decoration: none;
	color: #181825;
}

main, aside {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

footer {
	margin: 10rem 5rem;
	text-align: center;
	font-family: monospace;
}
footer p {
	margin: 0.5rem;
}
footer,
footer a {
	color: #7c7f93;
}
@media (prefers-color-scheme: dark) {
	footer,
	footer a {
		color: #9399b2;
	}
}
.footer-horizontal-line {
	height: 0.2rem;
	width: 100%;
	margin: 0 0 3rem 0;
	background: linear-gradient(90deg, #eff1f5 0%, #df8e1d 50%, #eff1f5 100%);
	@media (prefers-color-scheme: dark) {
		background: linear-gradient(90deg, #1e1e2e 0%, #f9e2af 50%, #1e1e2e 100%);
	}
}

.row {
	display: flex;
	flex-direction: row;
}

/* INPUT / FORMS */

form {
	min-width: 40rem;
	margin: 1rem 1rem 3rem 1rem;
	padding: 1.5rem 1rem;
	border-radius: 1rem;
	background-color: #ccd0da;
	@media (prefers-color-scheme: dark) {
		background-color: #313244;
	}
}

.js-button,
textarea,
select,
input {
	font-family: monospace;
	font-size: 2rem;
	padding: 1rem;
	border-radius: 1rem;
	border: 2px solid #9ca0b0;
	color: #4c4f69;
	background-color: #bcc0cc;
	@media (prefers-color-scheme: dark) {
		border-color: #6c7086;
		color: #cdd6f4;
		background-color: #45475a;
	}
}
.js-button:hover,
select:hover,
input:hover {
	background-color: #acb0be;
}
@media (prefers-color-scheme: dark) {
	.js-button:hover,
	select:hover,
	input:hover {
		background-color: #585b70;
	}
}
.js-button,
textarea,
select,
input,
label {
	margin: 1rem;
}

textarea {
	width: 90%;
	resize: vertical;
}
.input-text {
	width: 87.3%;
}
.input-date,
.input-week {
	width: 20rem;
}
.input-dropdown-special-week {
	width: 15rem;
	font-size: 1.5rem;
	margin: 0.2rem;
	padding: 0.2rem;
	border: none;
	background: none;
	color: #e6e9ef;
	@media (prefers-color-scheme: dark) {
		color: #181825;
	}
}
.input-dropdown-special-week:hover {
	background: none;
}
.input-dropdown {
	width: 93%;
}
label > .input-checkbox {
	width: 3rem;
	height: 3rem;
}
td > .input-checkbox {
	margin: 0;
	width: 2rem;
	height: 2rem;
}

.checkbox-selection-menu {
	margin: 0 0 1rem 1rem;
	padding: 0.7rem;
	border-radius: 0.7rem;
	background-color: #bcc0cc;
	@media (prefers-color-scheme: dark) {
		background-color: #45475a;
	}
}
.checkbox-selection-menu > summary {
	padding: 1rem 0 1rem 1rem;
	font-weight: bold;
}
.checkbox-selection-menu-item input {
	width: 1.5rem;
	height: 1.5rem;
}

.js-button,
.input-submit {
	cursor: pointer;
}
.js-button:active,
.input-submit:active {
	translate: 0 5px;
	background-color: #9ca0b0;
	@media (prefers-color-scheme: dark) {
		background-color: #313244;
	}
}

.button-red {
	color: #d20f39;
}
.button-red:hover {
	background-color: #dd7878;
	color: #e6e9ef;
}
.button-red:active {
	background-color: #d20f39;
	color: #e6e9ef;
}
@media (prefers-color-scheme: dark) {
	.button-red {
		color: #f38ba8;
	}
	.button-red:hover {
		background-color: #eba0ac;
		color: #181825;
	}
	.button-red:active {
		background-color: #f38ba8;
		color: #181825;
	}
}

.button-green {
	color: #40a02b;
}
.button-green:hover {
	background-color: #179299;
	color: #e6e9ef;
}
.button-green:active {
	background-color: #40a02b;
	color: #e6e9ef;
}
@media (prefers-color-scheme: dark) {
	.button-green {
		color: #a6e3a1;
	}
	.button-green:hover {
		background-color: #94e2d5;
		color: #181825;
	}
	.button-green:active {
		background-color: #a6e3a1;
		color: #181825;
	}
}

.button-select-all {
	margin: 0;
	font-size: 1.6rem;
}

#preview-calendar-week {
	margin: 0 1rem 1rem 1rem;
	font-size: 1.6rem;
	color: #6c6f85;
	@media (prefers-color-scheme: dark) {
		color: #a6adc8;
	}
}

/* TABLE */

table {
	display: block;
	overflow: auto;
	white-space: nowrap;
	width: 100%;
	max-width: fit-content;
	height: 75vh;
	@media (width < 64rem) {
		height: 90vh;
	}
	margin: 1rem 0;
	font-size: 1.8rem;
	border-collapse: seperate;
	border-spacing: 0;
	border: 0.3rem solid #ccd0da;
	color: #4c4f69;
	background-color: #bcc0cc;
	@media (prefers-color-scheme: dark) {
		border-color #313244;
		color: #cdd6f4;
		background-color: #45475a;
	}
}
thead {
	position: sticky;
	top: 0;
	background-color: #acb0be;
	@media (prefers-color-scheme: dark) {
		background-color: #585b70;
	}
}
thead, tbody, tr, th, td {
	padding: 1rem;
	margin: 0;
}
th, td {
	border: 1px solid #6c6f85;
	@media (prefers-color-scheme: dark) {
		border-color: #9399b2;
	}
}
th {
	white-space: wrap;
}
td > ul {
	padding: 0 1rem;
	list-style: inside;
}

/* Special Week Colors */

.standardwoche,
.urlaubszeit,
.schulwoche-1aj,
.schulwoche-2aj,
.schulwoche-3aj {
	color: #e6e9ef;
}
.standardwoche {
	background-color: #4c4f69;
}
.urlaubszeit {
	background-color: #dd7878;
}
.schulwoche-1aj {
	background-color: #04a5e5;
}
.schulwoche-2aj {
	background-color: #40a02b;
}
.schulwoche-3aj {
	background-color: #fe640b;
}
@media (prefers-color-scheme: dark) {
	.standardwoche,
	.urlaubszeit,
	.schulwoche-1aj,
	.schulwoche-2aj,
	.schulwoche-3aj {
		color: #181825;
	}
	.standardwoche {
		background-color: #cdd6f4;
	}
	.urlaubszeit {
		background-color: #f2cdcd;
	}
	.schulwoche-1aj {
		background-color: #89dceb;
	}
	.schulwoche-2aj {
		background-color: #a6e3a1;
	}
	.schulwoche-3aj {
		background-color: #fab387;
	}
}

#color-legend-container {
	margin: 1rem 1rem 3rem 1rem;
	padding: 1.5rem 1rem;
	border-radius: 1rem;
	background-color: #ccd0da;
	@media (prefers-color-scheme: dark) {
		background-color: #313244;
	}
}

#color-legend-container h4 {
	margin: 0.7rem 0 1rem 0;
}
#color-legend-container p {
	height: 100%;
	margin: 0 1rem 0 0;
	display: flex;
	justify-content: start;
	align-items: center;
}

.color-legend {
	width: 2rem;
	height: 2rem;
	margin: 0 1rem;
	border: 0.2rem solid #ffffff;
}

/* Special Table Cells */

.table-week-number {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-weight: bold;
	padding: 0 1rem;
	font-size: 2rem;
}
.table-week-days {
	font-size: 1.2rem;
}

.table-namelist {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	font-size: 1.6rem;
}
.table-gesamt {
	display: flex;
	flex-direction: row;
	justify-content: center;
	font-style: italic;
	font-size: 1.4rem;
}

.table-hoverable:hover {
	background-color: #acb0be;
	@media (prefers-color-scheme: dark) {
		background-color: #585b70;
	}
}
.table-selected {
	color: #181825;
	background-color: #dd7878;
	@media (prefers-color-scheme: dark) {
		background-color: #f2cdcd;
	}
}
.table-selected.table-hoverable:hover {
	color: #181825;
	background-color: #dc8a78;
	@media (prefers-color-scheme: dark) {
		background-color: #f5e0dc;
	}
}

.table-selected a {
	color: #181825;
}

.table-select-box {
	text-align: right;
}

/* Table Text */

.sick {
	background-color: #d20f39;
	color: #e6e9ef;
}
@media (prefers-color-scheme: dark) {
	.sick {
		background-color: #f38ba8;
		color: #181825;
	}
}

.notes {
	text-decoration: underline dotted 2px;
	cursor: help;
}

.wrap {
	white-space: wrap;
}

/* Azubi Displayer */

.azubi-displayer span {
	padding: 0.3rem;
	border-radius: 0.5rem;
}

.azubi-displayer:hover {
	a,
	button {
		visibility: visible;
	}
}

.azubi-displayer a,
.azubi-displayer button {
	visibility: hidden;
	margin: 0 0 0 0.5rem;
	font-size: 1.6rem;
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	color: #11111b;
}

/* Azubi Selector */

td:hover {
	.azubi-selector {
		visibility: visible;
	}
}

.azubi-selector {
	position: relative;
	visibility: hidden;
	margin: 0;
	font-size: 1.6rem;
}

.azubi-selector label {
	display: flex;
	flex-direction: row;
}

.azubi-selector input {
	width: 100%; /* 60% if button is visible */
	height: 2rem;
}

.azubi-selector label > button {
	display: none;
	flex-grow: 1;
	height: 100%;
}

.azubi-selector input,
.azubi-selector label > button {
	margin: 0;
	padding: 0.3rem;
	border-radius: 0;
	border: 1px solid #dce0e8;
	background-color: #dce0e8;
	color: #11111b;
	font-size: 1.6rem;
}

.azubi-selector-list {
	position: absolute;
	max-height: 10rem;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
	border-radius: 0.5rem;
	background-color: #ffffff;
	list-style-type: none;
}
.azubi-selector-list:has(li) {
	padding: 0.5rem;
}

.azubi-selector-list button {
	width: 100%;
	margin: 0 0 0.2rem 0;
	border-radius: 0.3rem;
	background-color: none;
	border: none;
	font-size: 1.6rem;
	text-align: start;
}