:root {
	--body-width: 800px;

	--bg: #f2f2f2;
	--bg-view: #fdfdfd;
	--bg-view-hover: #fff;
	--bg-button: #efefef;
	--bg-button-hover: #eaeaea;

	--border-color: #888;
	--border-light: #bbb;

	--fg: #111;
	--fg-dim: #666;
	--fg-dim2: #bbb;
	--fg-dim3: #ddd;

	--accent: var(--blue-2);
	--accent-light: var(--blue-4);
	--accent-dark: var(--blue-1);

	--margin: 20px;
	--padding: 15px;
	--padding-small: 7px;
	--padding-tiny: 3px;
	--padding-large: 24px;

	--border-radius: 4px;

	--shadow-in: var(--shadow-in-out);
	--shadow-dark: var(--shadow-dark-out);
	--shadow-light: var(--shadow-light-out);

	--shadow-in-out: #e4e4e4;
	--shadow-dark-out: #ececec;
	--shadow-light-out: #fafafa;
	--shadow-in-view: #ddd;
	--shadow-dark-view: #fafafa;
	--shadow-light-view: #ffffff;

	/** Mobile breaking point is 660px */
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #080808;
		--bg-view: #141414;
		--bg-view-hover: #1a1a1a;
		--bg-button: #242424;
		--bg-button-hover: #202020;
		--border-color: #383838;
		--border-light: #2e2e2e;

		--fg: #eee;
		--fg-dim: #999;
		--fg-dim2: #444;
		--fg-dim3: #222;

		--shadow-in-out: #080808;
		--shadow-dark-out: #040404;
		--shadow-light-out: #0c0c0c;
		--shadow-in-view: #000;
		--shadow-dark-view: #101010;
		--shadow-light-view: #181818;
	}
}

/* Color palette */

:root {
	--red-0: #350414;
	--red-1: #69071e;
	--red-2: #ef112f;
	--red-3: #f9d4d4;
	--red-4: #fff1ef;

	--orange-0: #392018;
	--orange-1: #78431e;
	--orange-2: #f2861d;
	--orange-3: #fae9cb;
	--orange-4: #fff7e6;

	--yellow-0: #463503;
	--yellow-1: #a07405;
	--yellow-2: #ffdf00;
	--yellow-3: #fffcd3;
	--yellow-4: #fffeec;

	--green-0: #082a14;
	--green-1: #146e3b;
	--green-2: #28db3b;
	--green-3: #d8f8d8;
	--green-4: #f1fbf1;

	--blue-0: #08102f;
	--blue-1: #134270;
	--blue-2: #13aae7;
	--blue-3: #b4ecf1;
	--blue-4: #eafbf9;
}


/* Prefs */

.pref {
	--pref-bg: var(--blue-4);
	--pref-bg-sel: var(--blue-2);
	--pref-bg-dark: var(--blue-0);
	--pref-fg: var(--blue-1);
	--pref-fg-dark: var(--blue-3);
	--pref-border: var(--blue-1);
}
.pref-No {
	--pref-bg: var(--red-4);
	--pref-bg-sel: var(--red-2);
	--pref-bg-dark: var(--red-0);
	--pref-fg: var(--red-0);
	--pref-fg-dark: var(--red-3);
	--pref-border: var(--red-1);
}
.pref-Maybe {
	--pref-bg: var(--orange-4);
	--pref-bg-sel: var(--orange-2);
	--pref-bg-dark: var(--orange-0);
	--pref-fg: var(--orange-0);
	--pref-fg-dark: var(--orange-3);
	--pref-border: var(--orange-1);
}
.pref-Ok {
	--pref-bg: var(--yellow-4);
	--pref-bg-sel: var(--yellow-2);
	--pref-bg-dark: var(--yellow-0);
	--pref-fg: var(--yellow-0);
	--pref-fg-dark: var(--yellow-3);
	--pref-border: var(--yellow-1);
}
.pref-Yes {
	--pref-bg: var(--green-4);
	--pref-bg-sel: var(--green-2);
	--pref-bg-dark: var(--green-0);
	--pref-fg: var(--green-0);
	--pref-fg-dark: var(--green-3);
	--pref-border: var(--green-1);
}
.pref, .pref-No, .pref-Maybe, .pref-Ok, .pref-Yes {
	--pref-text: var(--pref-border);
}
@media (prefers-color-scheme: dark) {
	.pref, .pref-No, .pref-Maybe, .pref-Ok, .pref-Yes {
		--pref-text: var(--pref-bg-sel);
	}
}
.pref-No.override {
	--pref-bg: linear-gradient(135deg,
			var(--red-4)     0%, var(--red-4)     25%,
			var(--orange-4) 25%, var(--orange-4)  50%,
			var(--red-4)    50%, var(--red-4)     75%,
			var(--orange-4) 75%, var(--orange-4) 100%
		);
	--pref-bg-dark: linear-gradient(135deg,
			var(--red-0)     0%, var(--red-0)     25%,
			var(--orange-0) 25%, var(--orange-0)  50%,
			var(--red-0)    50%, var(--red-0)     75%,
			var(--orange-0) 75%, var(--orange-0) 100%
		);
	--pref-bg-sel: linear-gradient(135deg,
			var(--red-2)     0%, var(--red-2)     25%,
			var(--orange-2) 25%, var(--orange-2)  50%,
			var(--red-2)    50%, var(--red-2)     75%,
			var(--orange-2) 75%, var(--orange-2) 100%
		);
}

/* General */

.debug {
	color: var(--orange-2);
}

.destructive {
	--accent: var(--red-2);
	--accent-light: var(--red-4);
	--accent-dark: var(--red-1);
}

.padding-small {
	--padding: var(--padding-small);
}
.text-center {
	text-align: center;
}

.dim {
	color: var(--fg-dim);
}

:root {
	/* --font-family: Inter, system-ui, sans-serif; */
	--font-family: InterVariable, system-ui, sans-serif;
	font-family: var(--font-family);
	font-weight: 400;
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body {
	margin: 0 auto;
	background: var(--bg);
	color: var(--fg);
	text-size-adjust: none;
}

body { max-width: var(--body-width); }
body { padding: var(--padding-large); }

fullbleed {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding-inline-start: var(--padding-large);
	padding-inline-end: var(--padding-large);
	box-sizing: border-box;
	overflow-x: auto;

	td, th { white-space: nowrap; }
}

header, footer {
	--border-color: var(--border-light);
	min-height: 27px;
}

header {
	border-bottom: 1px solid var(--border-color);
	margin-bottom: var(--padding-large);
	padding: var(--padding) 0;
}
header h1 {
	font-size: 1.45rem;
	font-weight: 400;
	margin: 0;
}

footer {
	border-top: 1px solid var(--border-color);
	margin-top: var(--padding-large);
	padding: var(--padding) 0;
	display: flex;

	column-gap: var(--padding);
}

h1, h2, h3, h4, h5, h6 { margin: var(--margin) 0; }

div.header-bar {
	display: flex;
	margin: var(--margin) 0;
	column-gap: var(--padding);
}
div.header-bar h1, div.header-bar h2, div.header-bar h3,
div.header-bar h4, div.header-bar h5, div.header-bar h6 {
	margin: 0;
	flex-grow: 1;
}

div.links {
	margin: var(--margin) 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--padding);
	row-gap: var(--padding-small);
}

a {
	color: var(--accent);
	cursor: pointer;
	text-decoration: underline;
	font-weight: 500;
}
a:hover:not(.destructive) {
	color: #0099ff;
}
button, a.button, a.color-button {
	display: block;
	padding: var(--padding-small) var(--padding);
	border-radius: var(--border-radius);
	font-size: 13px;
	text-decoration: none;
	box-shadow:  7px  7px 10px var(--shadow-dark),
	            -7px -7px 10px var(--shadow-light);
}
a.button:hover,
a.color-button:hover { box-shadow: 0 0 7px var(--accent); }

a.button       { background: var(--bg-view); }
a.button:hover { background: var(--bg-view-hover); }
.card a.button       { background: var(--bg-button); }
.card a.button:hover { background: var(--bg-button-hover); }
a.color-button { background: var(--accent); color: white; }
.inputlike a.button       { background: var(--bg-view); }
.inputlike a.button:hover { background: var(--bg-view-hover); }

hr {
	border: none;
	border-top: 1px solid var(--border-color);
}

:is(label, labellike) {
	user-select: none;
	position: relative;

	&.required::before {
		content: "*";
		color: var(--red-2);
	}
}

input, select, button {
	font-family: var(--font-family);
	font-size: 13px;
}

button[type="submit"] {
	background: var(--accent);
	border: none;
	border-radius: var(--border-radius);
	padding: var(--padding-small) var(--padding);
	color: white;
	font-weight: 500;
	box-shadow:  7px  7px 10px var(--shadow-dark),
	            -7px -7px 10px var(--shadow-light);
}
button[type="submit"]:hover {
	box-shadow: 0 0 7px var(--accent);
}

input:is([type="date"], [type="datetime-local"], [type="time"]) {
	-webkit-appearance: none;
}
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], select, textarea,
segmented-select, .inputlike {
	min-height: 34px;
	box-sizing: border-box;
	background: var(--bg-view);
	color: var(--fg);
	padding: var(--padding-small);
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 5px var(--shadow-in);

	.card & {
		background: var(--bg);
	}

	.inputlike & {
		background: var(--bg-view);
	}
}
.inputlike * {
	--shadow-in: var(--shadow-in-out) !important;
	--shadow-dark: var(--shadow-dark-out) !important;
	--shadow-light: var(--shadow-light-out) !important;
}

segmented-select {
	display: flex;
	padding: 0;
	box-sizing: border-box;

	font-size: 13px;

	> label {
		padding: var(--padding-small) var(--padding);

		margin-top: -1px; margin-bottom: -1px;
		border: 1px solid transparent;

		flex: 1 1 0;
		text-align: center;

		&:first-child { margin-left: -1px; }
		&:last-child { margin-right: -1px; }

		&:has(input:checked) {
			background: var(--bg-view);
			border: 1px solid var(--border-color);
			border-radius: var(--border-radius);
			font-weight: 600;
		}
	}

	input[type=radio] {
		appearance: none;
		margin: 0;
		width: 0;
		height: 0;
	}

}

textarea {
	resize: vertical;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--bg-view);
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
	box-shadow: inset 0 0 5px var(--shadow-in);

	width: 20px;
	height: 20px;
}
.card input[type="checkbox"] { background: var(--bg); }
input[type="checkbox"]:checked {
	background: var(--blue-2);
	border-color: var(--blue-1);
	box-shadow: none;

	position: relative;

	&::after {
		position: absolute;
		top: 1px; /* fallback */
		top: 0.5px;
		left: 3px;

		content: "✓";
		color: white;
		font-weight: 800;
	}
}

/* message-toast */

.message-toast {
	padding: var(--padding);
	margin-bottom: var(--padding);
	border: 1px solid var(--toast-border);
	background: var(--toast-bg);
	border-radius: var(--toast-br);
	color: var(--toast-fg);

	--toast-br: var(--border-radius);
	--toast-bg: var(--blue-3);
	--toast-border: var(--blue-1);
	--toast-fg: var(--blue-0);
}
@media (prefers-color-scheme: dark) {
	.message-toast {
		color: var(--toast-bg);
		background: var(--toast-fg);
	}
}

.message-toast p { margin: var(--padding-small) 0; }

.message-toast > *:first-child { margin-top: 0; }
.message-toast > *:last-child { margin-bottom: 0; }

.message-toast.err {
	--toast-bg: var(--red-3);
	--toast-border: var(--red-1);
	--toast-fg: var(--red-0);
}
.message-toast.warn {
	--toast-bg: var(--yellow-3);
	--toast-border: var(--yellow-1);
	--toast-fg: var(--yellow-0);
}
.message-toast.info {
	--toast-bg: var(--green-3);
	--toast-border: var(--green-1);
	--toast-fg: var(--green-0);
}

/* Card Style */

.card {
	padding: var(--padding);
	margin: var(--margin) 0;
	border: 1px solid var(--border-color);
	border-radius: var(--card-br);
	background: var(--bg-view);
	box-shadow:  10px  10px 15px var(--shadow-dark),
	            -10px -10px 15px var(--shadow-light);

	--card-br: var(--border-radius);
}
.card * {
	--shadow-in:    var(--shadow-in-view);
	--shadow-dark:  var(--shadow-dark-view);
	--shadow-light: var(--shadow-light-view);
}

ul.card {
	list-style-type: none;
	padding: 0;
}
ul.card li { padding: var(--padding); border-bottom: 1px solid var(--border-light); }
ul.card li:last-child { border-bottom: unset; }
ul.card li:has(> a) { padding: 0; }

ul.horizontal {
	display: flex;
	flex-direction: row;
}
ul.horizontal li {
	flex-basis: 0;
	flex-grow: 1;
	text-align: center;
}

ul.horizontal li { border-bottom: unset; border-right: 1px solid var(--border-light); }
ul.horizontal li:last-child { border-right: unset; }

a.card,
ul.card li > a {
	display: block;
	padding: var(--padding);

	color: var(--fg);
	text-decoration: none;
	font-weight: 700;
}
a.card:hover,
ul.card li > a:hover { box-shadow: 0 0 7px var(--accent); }

ul.card:not(.horizontal) li:first-child > a { border-top-left-radius: var(--card-br); border-top-right-radius: var(--card-br); }
ul.card:not(.horizontal) li:last-child > a { border-bottom-left-radius: var(--card-br); border-bottom-right-radius: var(--card-br); }

ul.card.horizontal li:first-child > a { border-top-left-radius: var(--card-br); border-bottom-left-radius: var(--card-br); }
ul.card.horizontal li:last-child > a { border-top-right-radius: var(--card-br); border-bottom-right-radius: var(--card-br); }

a.card:hover,
ul.card li > a:hover {
	background: var(--bg-view-hover);
}

a.card[tb-active],
ul.card li > a[tb-active] {
	color: var(--accent);
	background: linear-gradient(var(--bg), var(--bg-view));
}
a.card[tb-active]:hover,
ul.card li > a[tb-active]:hover {
	color: var(--accent);
	background: linear-gradient(var(--bg), var(--bg-view-hover));
}

/* Forms */

form div.form-control-row {
	margin-top: var(--padding);
	column-gap: var(--padding);
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
}
form div.form-control-row .left { margin-right: auto; }


form { h1, h2, h3, h4, h5, h6 { margin: 0; }}
.form-header { margin: 0; } /* TODO: rausnehmen */

.form-grid {
	display: grid;
	grid-gap: var(--padding);

	.message-toast, .form-control-row,
	p, pre, ul {
		margin: 0;
	}

	& > hr {
		width: 100%;
		margin: var(--padding-tiny) 0;
	}

	label:has(input[type="checkbox"]) {
		display: inline-block;
		padding: var(--padding-small) 0;

		text-align: left;

		position: relative;
		padding-left: 27px;

		input[type="checkbox"] {
			position: absolute;
			left: 0;
			top: 0;
			margin-left: 0;
		}
	}

	& input[type="checkbox"] {
		margin: var(--padding-small) var(--padding-tiny);
	}

	/* Mobile Specific */

	grid-template-columns: 1fr;
	& > :is(label, labellike) {
		margin-bottom: calc(-1 * var(--padding-small));
	}

	& > * { grid-column: 1; }

	/* Desktop Specific */

	@media (min-width: 660px) {
		grid-template-columns: 2fr 5fr 2fr 5fr;

		& > :is(label, labellike):not(:has(input[type="checkbox"])) {
			text-align: right;
			padding: var(--padding-small) 0;
			grid-column: 1;

			&.left  { grid-column: 1; }
			&.right { grid-column: 3; }
		}

		& > * {
			grid-column: 2/5;

			&.left  { grid-column: 2; }
			&.right { grid-column: 4; }
		}
	}
}


/* Login Form */

#login-form {
	display: grid;
	column-gap: var(--padding-large);
	row-gap: var(--padding-small);
	grid-template-columns: 0fr 0fr;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}
#login-form input[name="name"]    { grid-column: 1; }
#login-form input[name="passwd"]  { grid-column: 1; }
#login-form button[type="submit"] { grid-column: 2; grid-row: 1; }

/* Mass */

div.mass {
	display: flex;
	/*justify-content: space-between;*/
	align-items: center;
	row-gap: var(--padding-small);
	column-gap: var(--padding);
	flex-wrap: wrap;
}
@media (max-width: 660px) {
	div.mass {
		flex-direction: column;
		align-items: start;
		row-gap: var(--padding);
	}
	div.mass .mass-prefs {
		align-self: center;
	}
}
div.mass-info {
	margin-right: auto;
}

div.mass-info h3, div.mass-info p {
	margin: 0px;
}
div.mass-info p {
	font-weight: normal;
}
div.rank-Weekday.mass-info h3 {
	font-weight: 500;
}
div.rank-Sunday.mass-info h3 {
	font-weight: 700;
}
div.rank-Solemnity.mass-info h3 {
	font-weight: 700;
}
div.rank-Solemnity.mass-info span.occasion {
	font-weight: 700;
}
div.rank-Mandatory.mass-info h3 {
	font-weight: 700;
}
div.rank-Mandatory.mass-info h3::after {
	content: " ＊";
	color: var(--red-2);
	font-family: arial;
}
div.rank-Mandatory.mass-info span.occasion {
	font-weight: 700;
}

div.mass .mass-prefs {
	display: flex;
	column-gap: 6px;
}

div.mass .mass-pref-additional { width: 100%; display: none; }
div.mass .mass-pref-additional input {
	width: 100%;
	padding: var(--padding-small);
	box-sizing: border-box;
}
div.mass.rank-Mandatory .mass-pref-additional { display: unset; }
div.mass.rank-Mandatory:not(:has(input.pref-No:checked)) .mass-pref-additional
	{ display: none; }

div.mass input.pref {
	-webkit-appearance: none;
	appearance: none;
	margin: 0px;
	height: 1.7rem;
	width: 1.7rem;
	background: var(--pref-bg);
	border: 1px solid var(--pref-border);
	border-radius: 50%;
	cursor: pointer;
}
div.mass input.pref.pref-No { margin-right: 10px; }
div.mass input.pref:checked {
	background: var(--pref-bg-sel);
}
@media (prefers-color-scheme: dark) {
	div.mass input.pref {
		background: var(--pref-bg-dark);
	}
}

/* Tables */

table { margin-left: auto; margin-right: auto; }
table:not(.nostripe) tbody tr:nth-child(odd) { background: var(--bg-view); }

/* Plan Table */

table#plan-table th { white-space: nowrap; }
table#plan-table th:first-child { text-align: left; }
table#plan-table th[hx-get] { cursor: pointer; }
table#plan-table td, table#plan-table th {
	text-align: center;
	padding: var(--padding-tiny);
	min-width: 50px;
	box-sizing: border-box;
}
table#plan-table th.rank-Weekday { font-weight: 500; }
table#plan-table th.rank-Mandatory { color: var(--red-2); }

table#plan-table td.pref {
	border: 1px solid var(--pref-border);
	background: var(--pref-bg);
	color: var(--pref-fg);
	font-size: 0.85rem;
	cursor: pointer;
}
@media (prefers-color-scheme: dark) {
	table#plan-table td.pref {
		background: var(--pref-bg-dark);
		color: var(--pref-fg-dark);
	}
}
table#plan-table td.pref.pref-No { opacity: 0; }
table#plan-table td.pref.pref-No:has(span:not(:empty)) { opacity: unset; }
table#plan-table td.server-count.full { color: var(--blue-2); }
table#plan-table td.server-count.empty { color: var(--orange-2); }
table#plan-table td.mass-count.full { color: var(--blue-2); }
table#plan-table td.mass-count.empty  { color: var(--red-2); }

/* Entry Edit */

table.entry-edit { width: 100%; margin: var(--padding) 0; }
table.entry-edit tr {
	border: 1px solid var(--pref-border);
	background: var(--pref-bg) !important;
}
@media (prefers-color-scheme: dark) {
	table.entry-edit tr { background: var(--pref-bg-dark) !important; }
}
table.entry-edit tr th      { text-align: left; }
table.entry-edit td.serving { text-align: center; }

table.entry-edit tr.rank-Sunday,
table.entry-edit tr.rank-Solemnity,
table.entry-edit tr.rank-Mandatory { font-weight: bold; }
table.entry-edit tr.rank-Mandatory th { color: var(--red-2); }

/* Masses */

table.masses-list td,
table.masses-list th { padding: var(--padding-tiny) var(--padding-small); }

table.masses-list tr.rank-Sunday,
table.masses-list tr.rank-Solemnity,
table.masses-list tr.rank-Mandatory { font-weight: bold; }
table.masses-list tr.rank-Mandatory td.rank { color: var(--red-2); }

table.masses-list td.servers { text-align: center; }

table.masses-list td.edit { font-weight: normal; }
table.masses-list {
	td, th { white-space: nowrap; }
}

/* table.masses-list td.occasion,
table.masses-list td.notes { font-weight: normal; } */

/* Stat SVG */

svg {
	max-width: var(--body-width);
	min-width: 600px;
	display: block;
	margin: 0 auto;
}

/* Pref Stats */

table#prefstat-table {
	--colpadh: var(--padding-small);
	thead th { padding-left: var(--colpadh); padding-right: var(--colpadh); }
	tbody td { text-align: right; }
	tbody th { text-align: left; }

	.inactive { color: var(--fg-dim); }
}

/* Role Stats */

table#rolestat-table {
	--colpadh: var(--padding-small);
	thead th { padding-left: var(--colpadh); padding-right: var(--colpadh); }
	tbody td { text-align: right; }
	tbody th { text-align: left; }

	.role-weihrauch { background-color: #cecdcb55; }
	.role-leuchter { background-color: #ffd89855; }
	.role-kreuz { background-color: #98bcff55; }
	.role-fackeltraeger { background-color: #ffee7055; }
	.role-altardienst { background-color: #ff8e8e55; }
	.role-kollekte { background-color: #e299ff55; }
	.role-zeremoniar { background-color: #25baff55; }

	.inactive { color: var(--fg-dim); }
}

.role-none { --role-color: #888888; }
.role-weihrauch { --role-color: #cecdcb; }
.role-leuchter { --role-color: #ffd898; }
.role-kreuz { --role-color: #98bcff; }
.role-fackeltraeger { --role-color: #ffee70; }
.role-altardienst { --role-color: #ff8e8e; }
.role-kollekte { --role-color: #e299ff; }
.role-zeremoniar { --role-color: #25baff; }

/* Users */

table#users-list td {
	white-space: nowrap;
	padding: var(--padding-tiny) var(--padding-small);
}
table#users-list .inactive { color: var(--fg-dim); }
table#users-list .inactive td:first-child::after {
    content: " (inakt.)";
    font-size: 0.85rem;
}
table#users-list .rank-Admin td:first-child::after {
    content: " (A)";
    color: var(--red-2);
    font-weight: bold;
}