@import url('https://fonts.googleapis.com/css?family=Raleway:400,600');

html {
	font-size: 14pt;
/*	line-height: 16pt;*/
    --background-color-1: #DDD;
    --background-color-2: #EEE;
	--hover-color: #ffe7dd;
    --highlight-border-color: #888;
}

body {
	font-family: Raleway, sans-serif;
	font-weight: 400;
	margin: 0;
}

h1 {
	font-size: xx-large;
	margin: 3rem 0;
}

div.main1 {
	margin: 0 12px;
}

main {
	margin: 3rem auto 0 auto;
	width: fit-content;
}

input, button {
	font-size: 1rem;
	font-family: Raleway;
	outline-color: #e95420; /* doesn't seem to work */
}

input[type=email]:invalid {
	border-color: red;
}

input[name=year] {
	width: 6ch;
}

input[name=month] {
	width: 4ch;
}

textarea {
	font-family: Raleway, sans-serif;
	font-weight: 400;
	font-size: 0.9em;
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 699px) {
	main {
		margin: 3rem 0;
		width: inherit;
	}

	input[type=time] {
		/*min-width: 3.2rem;*/
		width: 6.5ch;
		/* height: 2rem; */
	}

}

a {
	color: #ed1c26;
	text-decoration: none;
}

a:hover {
	color: #005085;
}

.topbar {
	height: 50px;
	background-color: #ed1c26;
}


/*** Header ***/

header {
	margin: 1.5rem;
}

header .menu-bar {
	display: grid;
	grid-template-columns: auto auto;
	gap: 16px;
}

header .menu {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
	gap: 16px;
	font-weight: bold;
}

header .current-user {
	text-align: right;
	font-weight: bold;
}

header img {
	float: left;
	margin-right: 2rem;
	width: 4rem;
}

header .SKG_Botnang {
	color: #ed1c26;
	font-size: 1.5rem;
	font-weight: 900;
}

header .SKG_Botnang2 {
	padding-top: 8px;
	color: #ed1c26;
	font-size: qrem;
}

@media (max-width: 699px) {
	header {
		margin: 8px 0 40px 0;
	}
	
	header .SKG_Botnang {
		padding-top: 2px;
	}
	
	header .SKG_Botnang2 {
		padding-top: 12px;
		font-weight: 700;
	}
}

h2 {
	font-weight: bold;
	text-rendering: optimizelegibility;
}

@media (max-width: 699px) {
	h2 {
		font-size: 20px;
		line-height: 20px;
	}
}


/*** Flashes ***/

ul.flashes {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 auto 3rem auto;
	width: fit-content;
	padding: 0;
}

ul.flashes li {
	border: 3px solid grey;
	padding: 16px;
	border-radius: 10px;
}

ul.flashes li.error {
	color: red;
	border-color: red;
}

@media (max-width: 699px) {
	ul.flashes {
		margin: 0 12px 3rem 12px;
	}
}


/*** Login ***/

.login-grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 10px;
	margin: 1rem 0;
}

.login-grid > div {
	text-align: left;
}

.password-rules {
	max-width: 20em;
}

@media (max-width: 699px) {
	.login-grid {
		display: block;
	}

	.login-grid > label {
		display: block;
	}

	.login-grid > input {
		margin: 0.5rem 0 1rem 0;
		width: 100%;
		box-sizing: border-box;
	}

	.login-button {
		margin: 0 0 0 auto;
		display: block;
	}
}


/* ZGrid */
/* ----- */

div.zgrid {
    display: grid;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
	--hover-color: #ffe7dd;
	--background-color-1: #DDD;
	--background-color-2: #EEE;
    --highlight-border-color: #888;
}

div.zgrid > * {
	display: contents; /* keeps cell-level grid layout while providing hover container */
}

div.zgrid > * > *{
	padding: 4px;
	hyphens: auto;
	cursor: pointer
}

/* Alternate row background colors */
div.zgrid > :nth-child(2n + 1) > * {
    background-color: var(--background-color-1);
}

div.zgrid > :nth-child(2n + 2) > * {
    background-color: var(--background-color-2);
}

/* Highlight only spans/buttons inside the hovered row */
div.zgrid :hover > * {
    background-color: var(--hover-color); /* light highlight */
}

/* Header row styling */
div.zgrid :first-child > * {
    font-weight: bold;
    border-bottom: 2px solid var(--highlight-border-color);
}

div.zgrid :first-child > span:not(.numhead) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    font-weight: bold;
}

div.zgrid :first-child > span.numhead {
    writing-mode: sideways-lr;
}

/* Number alignment */
div.zgrid .number {
    text-align: right;
}

/* Button styling */
div.zgrid > * > button {
    border: 2px solid var(--background-color-2);
    padding: 2px;
    line-height: 0;
    background-color: transparent;
    cursor: pointer;
}

div.zgrid > * > button:hover {
    border: 2px groove var(--highlight-border-color);
}


/*** User Management ***/

.users-grid {
    grid-template-columns: repeat(10, auto);
    margin-bottom: 20px;
}

/* User ID, Stundenlohn align right */
.users-grid > :nth-child(n + 2) > :nth-child(2),
.users-grid > :nth-child(n + 2) > :nth-child(8) {
	text-align: right;
}

.users-grid > :nth-child(n + 2) > :nth-child(6),
.users-grid > :nth-child(n + 2) > :nth-child(9),
.users-grid > :nth-child(n + 2) > :nth-child(10) {
	text-align: center;
}

.user-actions {
	display: flex;
	gap: 10px;
	margin: 20px 0 40px 0;
}


.user-grid {
	--cols: 2;
	display: grid;
	grid-template-columns: repeat(var(--cols), max-content);
	grid-gap: 10px;
	margin-bottom: 20px;
}

.user-grid input[type=checkbox] {
	width: fit-content;
	margin: 0;
}


.wage-grid {
	--cols: 5;
	display: grid;
	grid-template-columns: max-content 6em 6em max-content max-content;
	gap: 10px;
	margin-bottom: 20px;
	align-items: end;
}

.wage-grid > * {
	display: contents;
}

.wage-grid > :first-child > * {
	text-align: center;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--highlight-border-color);
}

input[type=number],
input[inputmode=number] {
  text-align: right;
}

.new-wage {
	display: grid;
	grid-template-columns: max-content 6em 6em auto;
	gap: 10px;
	align-items: end;
}

.new-wage > * {
	display: contents;
}

.new-wage > :first-child > * {
	text-align: center;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--highlight-border-color);
}

.new-wage input[type=number],
.new-wage input[inputmode=number] {
	text-align: right;
}


/*** Overview ***/

.scroll-container {
	margin: 1em 0;
}

@media (max-width: 699px) {
	.scroll-container {
		width: 100%;
		overflow-x: scroll;
	}

	table.overview td,
	table.periods td {
		height: 2rem;
	}
}

table.overview {
	border-collapse: collapse;
	font-size: smaller;
}

table.overview table,
table.overview td,
table.periods  td {
	border: 4px solid #EEE;
}

table.overview thead,
table.periods thead {
	font-weight: bold;
}

table.overview tr.bold {
	font-weight: bold;
}

table.overview td,
table.periods {
	padding: 2px;
	text-align: center;
}

td.align-right {
	text-align: right;
}

td.align-left {
	text-align: left;
}

table.overview tbody div {
	display: block;
	color: grey;
}

table.overview tbody tr.valid-timesheet a {
	display: block;
	color: black;
}

table.overview tbody tr.valid-timesheet:hover a {
	background-color: #ccc;
	color: red;
}

table.overview tbody tr.first-sheet td {
	padding-top: 1em;
}

tr.weekday-Sa td,
tr.weekday-So td {
	background-color: #ddd;
}

table.periods {
	border-collapse: collapse;
	margin: 2px auto 2px auto;
}


/* Grid doesn't work with scrolling */
div.overview-grid {
	display: grid;
	grid-template-columns: repeat(7, max-content);
	gap: 4px;
	margin-bottom: 40px;
	background-color: #EEE;
	border: 4px solid #EEE;
	font-size: smaller;
}

div.overview-grid > * {
	text-align: right;
	background-color: white;
	padding: 6px;
}

/* Center week number and created date */
div.overview-grid > :nth-child(7n+1),
div.overview-grid > :nth-child(7n+7) {
	text-align: center;
}

/* Center and bolden headings */
div.overview-grid > :nth-child(-n+7) {
	text-align: center;
	font-weight: bold;
}

/* Bolden footer of grid */
div.overview-grid > :nth-last-child(-n+7) ~ * {
	font-weight: bold;
}

tr.month-view td:nth-child(6) {
	text-align: right;
}


/*** Timesheet ***/

div.week {
	margin: 40px 0;
	font-weight: bold;
}

form.change-week {
	display: inline;
}


/*** Table of weekdays ***/

table.timesheet td {
	padding: 4px;
}

thead td {
	text-align: center;
}

.c-time, .c-checkbox {
	text-align: center;
}

span.break-wrapper {
	border: 3px solid #ccc;
	padding: 1px 2px;
	white-space: nowrap;
}

span.break-wrapper.changed {
	border-color: #0a0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.break {
	width: 2ch;
	padding: 0;
	border: none;
	text-align: center;
	appearance: textfield;
}

div.comment {
	margin-top: 2em;
}

div.scroll-container textarea {
	width: 100%;
}

div.correct-reason {
	border: 1px solid grey;
	padding: 2px;
	font-size: 0.9em;
	white-space: pre-wrap;
	color: grey;
	border-radius: 2px;
	margin-top: 2px;
}

textarea[name=correct_reason] {
	border-color: #0a0;
	border-style: solid;
}

div.timesheet-extra {
	margin-top: 1em;
}

div.day-range {
	display: none;
}

@media (max-width: 699px) {
	table.timesheet td {
		padding: 4px 1px;
	}

	table.timesheet span.date-string {
		display: none;
	}

	div.break-wrapper {
		padding: 0.3rem;
	}

	div.day-range {
		display: block;
		font-weight: normal;
	}

}

@media (min-width: 699.01px) {
	table.timesheet span.weekday:after {
		content: ",";
	}
}

div.trash {
	width: 20px;
	height: 30px;
	cursor: pointer;
	background-image: url(/static/trash.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

div.trash-z2 {
	width: 14px;
	height: 15px;
	cursor: pointer;
	background-image: url(/static/trash.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

div.trash:hover, div.trash-z2:hover {
	background-image: url(/static/trash-hover.svg);
}

button.icon {
	border: none;
	padding: 0;
	background-color: unset;
}


/*** Grid of weekdays ***/

div.week-container {
	display: grid;
	grid-template-columns: repeat(8, max-content);
	grid-gap: 10px;
	justify-content: center;
	margin-bottom: 1em;
	margin-top: 1em;
}

.c-label {
	display: none;
}

.c-date, .c-day-hours {
	text-align: right;
}

.c-weekday {
	text-align: center;
}

input[type=time] {
	border: 3px solid #ccc;
	min-width: 3.2rem;
}

/*
#week-header {
	margin-bottom: 1em;
}
*/


div.last-saved {
	font-size: smaller;
	margin: 1em 0 5em 0;
}

input[type=time].changed {
	border-color: #0a0;
}


/*
** Custom checkbox
*/


/* The container */
.checkbox-container {
  display: inline-block; /* Allows centering within table cell */
  position: relative;
  top: 2px;
  height: 19px;
  width: 19px;
  border: 3px solid #ccc;
  justify-self: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-container.changed {
  border-color: #0a0;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ddd;
}

.checkbox-container:focus-within {
	outline: 2px solid #e95420;
}

/* When the checkbox is checked, add a blue background */
/*
.checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;
}
*/

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid black;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


@media (max-width: 699px) {
	div.week-container {
		grid-template-columns: max-content max-content;
	}

	div.heading {
		display: none;
	}
	
	div.c-label {
		display: block
	}
	
	.c-weekday, .c-date {
		margin-top: 10px;
		font-weight: bold;
	}
	
	.c-weekday, .c-date {
		text-align: left;
	}
	
	.checkbox-container {
		justify-self: left;
		width: 1.3rem;
		height: 1.3rem;
	}

	.checkmark {
		width: 1.5rem;
		height: 1.5rem;
	}

	.checkbox-container .checkmark:after {
	  left: 0.5rem;
	  top: 0.3rem;
	}
}


/*** Footer ***/

footer {
	margin: 2rem 0 1rem 1.5rem;
	font-size: 0.8em;
}

footer p {
	margin: 0 0 9px 0;
}

@media (max-width: 699px) {
	footer {
		margin: 1.5em 0px;
	}
}

div.bottomBar {
	height: 50px;
	background-color: #86f369;
}