@bg: #e8e8e8;
@light: #f2f2f2;
@body: #dadada;
@line: #cfcfcf;

body {
	background-color: #fff;
	overflow-x: hidden;
	overflow-y: scroll;
	&.calendar {
		background-color: @body;
	}
}

body, input, textarea, select, button {
	font-family: 'basier', sans-serif;
	font-size: 12px;
	line-height: 1.5em;
}

button {
	border: 0;
	background-color: transparent;
}

.semibold() {
	font-family: 'basier_semibold';
}

header {
	background-color: #fff;
	height: 70px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	box-shadow: 0 1px @line;
	z-index: 99;
	display: grid;
	grid-template-columns: 1fr 300px 1fr;
	align-items: center;
	#title {
		#roomSelect {
			display: flex;
			align-items: center;
			cursor: pointer;
			width: 425px;
			svg {
				margin-right: 20px;
			}
			h2 {
				font-size: 100%;
			}
			h1 {
				font-size: 16px;
				line-height: 1.5em;
				background: url('/images/icon-select-arrow.svg') no-repeat right 9px;
				padding-right: 20px;
			}
			&:hover {
				.title h1 {
					opacity: 0.5;
				}
			}
		}
	}
	#datepicker {
		font-size: 16px;
		text-align: center;
		.arrow {
			display: inline-block;
			vertical-align: middle;
			width: 40px;
			height: 40px;
			background: no-repeat center;
			font-size: 0;
			&.arrow-left {
				background-image: url('/images/arrow-left.svg');
			}
			&.arrow-right {
				background-image: url('/images/arrow-right.svg');
			}
			&:hover {
				opacity: 0.5;
			}
		}
		.month {
			display: inline-block;
			vertical-align: middle;
			cursor: pointer;
			width: 125px;
			text-align: center;
			&:hover {
				opacity: 0.5;
			}
		}
	}
	#rightPanel {
		justify-self: end;
		padding-right: 30px;
		display: flex;
		align-items: center;
		.button {
			text-transform: uppercase;
			cursor: pointer;
			text-align: right;
			padding: 10px 22px 9px 0;
			letter-spacing: 0.2px;
			&:hover {
				opacity: 0.5;
			}
		}
		.admin {
			background: url('/images/icon-admin.svg?2') no-repeat right center;
			color: #eb9a00;
		}
		.book {
			background: url('/images/icon-add.svg') no-repeat right center;
			width: 95px;
		}
		.cancel {
			background: url('/images/icon-close.svg') no-repeat right center;
			width: 95px;
		}
		.login {
			background: url('/images/icon-login.svg') no-repeat right center;
		}
		.print, .help {
			height: 40px;
			width: 40px;
			button {
				width: 100%;
				height: 100%;
				cursor: pointer;
				opacity: 0.6;
				appearance: none;
				border: 0;
				background-color: transparent;
				font-size: 0;
				&:hover {
					opacity: 0.4;
				}
			}
		}
		.print {
			margin-left: 20px;
		}
		.print button {
			background: url('/images/icon-print.svg') no-repeat center;
		}
		.help button {
			background: url('/images/icon-help.svg') no-repeat center;
		}
		#logout-form {
			padding: 0;
		}
		.user {
			text-align: right;
			padding: 0 25px;
			button,
			a {
				background: none;
				border: 0;
				cursor: pointer;
				&:hover {
					text-decoration: underline;
				}
			}
			&.logged button,
			&.logged a {
				opacity: 0.5;
			}
		}
	}
}

nav {
	position: fixed;
	left: 0;
	top: 70px;
	background-color: #fff;
	z-index: 98;
	box-shadow: 1px 0 @line;
	a {
		display: flex;
		font-size: 16px;
		box-shadow: 0 1px @line;
		height: 0;
		overflow: hidden;
		transition: height 0.2s ease;
		&.active .title {
			background-color: rgba(0,0,0,.02);
		}
		.title {
			width: 360px;
			padding-left: 20px;
			vertical-align: middle;
			padding-top: 25px;
		}
		&:hover {
			.title {
				background-color: rgba(0,0,0,.04);
				text-decoration: underline;
			}
		}
	}
}

body.navVisibile {
	nav a {
		height: 70px;
	}
	main {
		opacity: 0.3;
	}
}

// .fill-1 svg * { fill: #FFCE00; }
// .fill-2 svg * { fill: #FE2728; }
// .fill-3 svg * { fill: #006400; }
// .fill-4 svg * { fill: #000000; }
// .fill-5 svg * { fill: #800080; }

main {
	padding-top: 70px;
	transition: opacity 0.3s ease;

	.toggleView {
		position: fixed;
		left: 0;
		top: 70px;
		z-index: 9;
		button {
			appearance: none;
			text-transform: uppercase;
			width: 70px;
			height: 50px;
			background-color: @light;
			cursor: pointer;
			border: 0;
			letter-spacing: 0.2px;
			color: #777;
			border-bottom: 1px solid @line;
			box-shadow: 1px 1px 2px 0 rgba(0,0,0,.05);
			// font-size: 9px;
			// .semibold;
			&:hover {
				background-color: #fff;
			}
		}
	}

	.week {
		padding-left: 70px;
		position: relative;
		height: 800px;
		background-color: @bg;
		box-shadow: 0 -50px @body inset; // separator
		.legend {
			color: #666;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			width: 100%;
			div {
				height: 50px;
				padding-right: 15px;
				font-size: 10px;
				border-top: 1px dashed rgba(0,0,0,.25);
				span {
					display: block;
					background-color: @bg;
					margin-top: -9px;
					padding: 0 4px 0 0;
					text-align: right;
					width: 36px;
					margin-left: 16px;
				}
			}
			&:before {
				display: block;
				content: '';
				height: 49px;
				margin-bottom: 50px;
				border-bottom: 1px solid @line;
			}
		}

		.days {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			position: relative;
			z-index: 2;
			height: 100%;
			.day {
				border-left: 1px solid @line;
				height: 100%;
				h2 {
					height: 50px;
					line-height: 50px;
					padding-left: 15px;
					font-size: 100%;
					background-color: #fff;
					box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
					position: sticky;
					letter-spacing: 0.2px;
					text-transform: uppercase;
					white-space: nowrap;
					top: 70px;
					z-index: 3;
					border-bottom: 1px solid @line;
				}
				&.past {
					h2 {
						color: #777;
						background-color: @light;
					}
				}
				&.current {
					h2 {
						.semibold;
					}
				}
				.events {
					position: relative;
					button {
						appearance: none;
						cursor: pointer;
					}
					a.event:hover .event-details .title {
						text-decoration: underline;
					}
					.event {
						text-align: left;
						position: absolute;
						left: 0;
						width: 100%;
						padding: 3px 2px 2px;
						&.draft {
							opacity: 0.5;
						}
						.details {
							background-color: #fff;
							padding: 8px 16px 8px 13px;
							// min-height: 75px;
							border-radius: 9px;
							height: 100%;
							min-height: 100%;
							overflow: hidden;
							position: relative;
							box-shadow: 0 1px 1px 0 rgba(60,60,60,.3);
							transition: box-shadow 0.1s ease;
							&:after {
								content: '';
								display: block;
								position: absolute;
								height: 15px;
								border-radius: 0 0 9px 9px;
								left: 0;
								right: 0;
								bottom: 0;
							}
							&:after {
								background: linear-gradient( 0deg, rgba(255,255,255,0.9) 5%, rgba(255,255,255,0) 100% );								
							}
						}
						.blocks {
							position: absolute;
							right: 0;
							top: 0;
							width: 30%;
							height: 100%;
							&:hover {
								width: 100%;
							}
						}
						.block {
							position: absolute;
							width: 16px;
							right: 0;
							color: #000;
							overflow: hidden;
							z-index: 2;
							transition: width 0.2s ease;
							border-radius: 11px;
							border: 4px solid #fff;
							.block-details {
								padding: 4px 9px;
								width: ~"calc( ( 100vw - 70px) / 7 )";
								height: 100%;
								background-color: #fea;
							}
						}
						&:hover { //:not(.information):not(.blocked)
							z-index: 4;
							.details {
								overflow: auto;
								height: auto !important;
								box-shadow: 0 8px 12px 0 rgba(60,60,60,.2);
							}
						}
						.blocks:hover {
							.block {
								width: 100%;
							}
						}

						.title {
							.semibold;
							line-height: 1.2em;
    						// margin: 1px 0;
						}
						.notes {
							position: absolute;
							right: 0px;
							top: 0px;
							&:before {
								content: 'INFO';
								display: block;
								color: red;
								padding: 11px 14px;
							}
							.text {
								display: none;
								position: absolute;
								// left: 8px;
								// top: 31px;
								left: 50%;
								bottom: 83%;
								background-color: #fdd;
								padding: 8px 13px;
								border-radius: 9px;
								z-index: 4;
								width: 170px;
								margin-left: -85px;
								&:after {
									content: '';
									position: absolute;
									left: 50%;
									top: 100%;
									width: 0;
									margin-left: -5px;
									height: 0;
									display: block;
									border-width: 5px;
									border-color: #fdd transparent transparent transparent;
									border-style: solid;
								}
							}
							&:hover {
								&:before {
									opacity: 0.6;
								}
								.text {
									display: block;
								}
							}
						}
						&.mode-cyclic {
							.details {
								// background-color: rgb(242,242,242);
								// &:after {
								// 	background: linear-gradient( 0deg, rgba(242,242,242,0.9) 5%, rgba(242,242,242,0) 100% );								
								// }
							}
						}
						&.own {
							.details {
								border: 2px solid #555;
								padding: 6px 11px;
								// box-shadow: 0 0 0 2px #555 inset;
							}
						}
						&.awaiting {
							.details {
								background-color: #fbe4b2;
								color: #88794a;
								&:after {
									background: linear-gradient( 0deg, rgba(251,228,178,0.9) 5%, rgba(251,228,178,0) 100% );								
								}
							}
							&.own .details {
								box-shadow: 0 0 0 2px #d4b58e inset;
							}
						}
						&.to-update {
							.details {
								background-color: #c4e3ff;
								color: #344b6f;
								&:after {
									background: linear-gradient( 0deg, rgba(196,227,255,0.9) 5%, rgba(196,227,255,0) 100% );								
								}
							}
							&.own .details {
								box-shadow: 0 0 0 2px #87a9d6 inset;
							}
						}
						&.blocked, &.information {
							.details {
								background-color: rgb(212,212,212);
								&:after {
									background: linear-gradient( 0deg, rgba(212,212,212,0.9) 5%, rgba(212,212,212,0) 100% );								
								}
							}
						}
					}
				}
			}
		}
	}

}

body.shortView {
	main {
		.toggleView button:before {
			content: 'RO';
		}
		.week {
			height: auto;
			padding-bottom: 50px;
			.legend {
				display: none;
			}
			.days {
				.day {
					padding-bottom: 15px;
					.events {
						padding: 0 2px;
						.event {
							position: relative;
							top: 0 !important;
							height: auto !important;
							min-height: 0;
							margin-top: 0;
							+ .event {
								margin-top: -2px;
							}
							.details {
								padding: 8px 13px 10px 13px;
							}
							.blocks {
								position: static;
								width: 100%;
								height: auto !important;
							}
							.block {
								position: static;
								height: auto !important;
								width: auto !important;
								border: none !important;
								margin: 8px -7px 0;
								.block-details {
									width: auto !important;
									padding: 6px 7px;
								}
							}
						}
					}
				}
			}
		}
	}
}

#dates {
	display: none;
	position: fixed;
	top: 70px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 90;
	align-items: center;
	justify-content: center;
	.years {
		display: grid;
		grid-template-columns: repeat(7, 150px);
		.year {
			h2 {
				font-size: 16px;
				margin-bottom: 1em;
			}
			.months {
				a {
					display: block;
					padding: 4px 0;
					span {
						display: inline-block;
						width: 15px;
						// text-align: right;
						margin-right: 10px;
					}
					&.past {
						opacity: 0.5;
					}
					&.current {
						.semibold;
					}
					&.active {
						text-decoration: underline;
					}
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
	}
}



body.datesVisible {
	#dates {
		display: flex;
	}
}
body.helpVisible {
	#help {
		display: flex;
	}
}


.h3() {
	.semibold;
	margin-top: 3em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #333;
	margin-bottom: 1.5em;
	font-size: 14px;
}


form {
	font-size: 14px;
	padding: 0 70px;
	.group {
		padding: 6em 0;
		+ .group {
			border-top: 1px solid #e3e3e3;
		}
		.padded {
			width: 630px;
			margin: 0 auto;
			& > h3:first-child {
				margin-top: 0;
			}
		}
	}
	h3 {
		.h3;
	}
	h4 {
		.semibold;
	}
	.bigger {
		font-size: 16px;
	}
	select {
		width: 100%;
	}
	input[type=text],
	input[type=email],
	input[type=password] {
		width: 100%;
	}
	select,
	input[type=text],
	input[type=email],
	input[type=password],
	input[type=date],
	input[type=time] {
		cursor: pointer;
		height: 40px;
		padding-left: 12px;
		padding-right: 8px;
		font-size: 14px;
	}

	select,
	input[type=text],
	input[type=email],
	input[type=password],
	input[type=date],
	input[type=time],
	textarea {
		border: 1px solid #aaa;
		border-radius: 4px;
	}

	textarea {
		display: block;
		width: 100%;
		resize: vertical;
		min-height: 80px;
		max-height: 300px;
		padding: 12px;
		font-size: 14px;
	}
	label + textarea {
		margin-top: 1em;
	}
	label {
		display: block;
		padding: 5px 0 5px 30px;
		span {
			cursor: pointer;
			&:before {
				display: block;
				content: '';
				width: 16px;
				height: 16px;
				border: 1px solid #aaa;
				border-radius: 3px;
				float: left;
				margin-left: -30px;
				box-shadow: 0 0 0 3px #fff inset;
			}
		}
		input {
			// display: none;
			width: 1px;
			opacity: 0;
			&:checked + span:before {
				background-color: #000;
				border-color: #000;
			}
		}
		&:hover {
			span {
				color: #555;
				&:before {
					border-color: #ccc;
				}
			}
		}
	}
	p + label {
		margin-top: 1em;
	}
	.datetime {
		display: flex;
		gap: 40px;
		.timepicker {
			select:first-child {
				margin-right: 10px;
			}
			select:last-child {
				margin-left: 10px;
			}
			select {
				width: auto;
			}
		}
	}
	.datetime + label {
		margin-top: 1.2em;
	}
	// .columns {
	// 	columns: 2;
	// }
	.rules {
		background-color: @bg;
		border-radius: 7px;
		padding: 20px 25px;
		margin: 3em 0 1em;
		ol {
			margin: 10px 0 0 15px;
			li {
				margin-top: 5px;
			}
		}
	}
	.checkboxes, .note {
		margin-top: 3em;
	}
	.submit {
		appearance: none;
		background-color: #333;
		border: 0;
		border-radius: 0;
		color: #fff;
		font-size: 16px;
		text-transform: uppercase;
		padding: 15px 50px 17px;
		.semibold;
		cursor: pointer;
		letter-spacing: 1px;
		&:hover {
			background-color: #000;
		}
	}
	.submit {
		margin-top: 4em;
	}
	.cancel {
		border: 1px solid #FE2728;
		color: #FE2728;
		padding: 0 5px 1px;
		cursor: pointer;
		background-color: transparent;
		opacity: 0.7;
		border-radius: 2px;
		margin-top: 3em;
		float: right;
		&:hover {
			opacity: 1;
		}
	}
	.message {
		padding: 15px 25px;
		border-radius: 7px;
		margin: 1.2em 0 1em;
		&.error {
			background-color: #ffe0e0;
			color: #d40a0a;
		}
		&:empty {
			visibility: hidden;
			padding: 0;
			height: 0;
		}
	}
}

#login {
	display: none;
	position: fixed;
	top: 70px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 90;
	align-items: center;
	justify-content: center;
	form {
		.group .padded {
			width: 400px;
		}
	}
}

body.loginVisible {
	#login {
		display: flex;
	}
}


#help {
	display: none;
	position: fixed;
	top: 70px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 90;
	align-items: center;
	justify-content: center;
	.group .padded {
		width: 400px;
	}
	h3 {
		.h3;
		&:first-child {
			margin-top: 0;
		}
	}
	.legend {
		font-size: 0;
		background-color: @bg;
		padding: 10px;
		border-radius: 11px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		div {
			display: block;
			padding: 9px 10px 36px 13px;
			border-radius: 5px;
			font-size: 12px;
			.semibold;
			&.status-pending {
				background-color: #fbe4b2;
				color: #88794a;
			}
			&.status-enabled {
				background-color: #fff;
			}
			&.status-own {
				background-color: #fff;
				box-shadow: 0 0 0 2px #555 inset;
			}
			&.status-waitingForData {
				background-color: #c4e3ff;
				color: #344b6f;
			}
			&.status-blocking {
				background-color: rgb(212,212,212);
			}
			&.status-repeating {
				background-color: rgb(242,242,242);
			}
		}
	}
}

body.helpVisible {
	#help {
		display: flex;
	}
}

#event-form {
	.submit {
		margin-top: 0;
	}
}


// #rightPanel {
// 	display: none !important;
// }