@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

:root {
	--font-family: 'Roboto', sans-serif;
	--clr-txt: #fff;
	--clr-txt-faded: #aaa;
	--clr-active: #f80;
	--clr-active-hover: #fb0;
	--clr-bg: #222;
	--clr-card: #333;
	--clr-card-special: #444;
	--clr-carder-card: #555;
	--clr-carder-card-hover: #666;
	--clr-card-hover: #2a2a2a;
	--clr-border: #555;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

html {
	color-scheme: dark;
	background-color: var(--clr-bg);
	color: var(--clr-txt);
	font-family: var(--font-family);
	font-size: max(0.85dvw, 1rem);
}

body {
	position: relative;
}

a {
	color: var(--clr-active);
}

a:hover, a:focus {
	color: var(--clr-active-hover);
}

.website-heading {
	width: 100%;
	padding: 1rem;
	border-bottom: var(--clr-border) 0.1rem solid;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 3rem;
	position: sticky;
	top: 0;
	background-color: var(--clr-bg);
	z-index: 20;
}

.main-header {
	font-size: 2rem;
	font-weight: bold;
}

.no-selection-menu {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: calc(100dvh / 6);
}

.mainpage-flavor {
	font-weight: bold;
	font-size: 3rem;
	text-align: center;
	max-width: 20ch;
	margin-bottom: calc(100dvh / 10);
}

.mainpage-instructions {
	text-align: center;
	font-weight: 200;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.mainpage-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 5rem;
	margin: calc(100dvh / 10) auto 0 auto;
}

.mainpage-buttons a,
.login-menu-wrapper input[type="submit"] {
	background-color: var(--clr-active);
	border-radius: 2rem;
	padding: 1rem 2rem;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5rem;
	color: var(--clr-txt);
	transition: scale 0.125s ease-in-out;
	border: none;
}

.mainpage-buttons a:hover,
.mainpage-buttons a:focus,
.login-menu-wrapper input[type="submit"]:hover,
.login-menu-wrapper input[type="submit"]:focus {
	background-color: var(--clr-active-hover);
	scale: 1.1;
}

.login-menu-wrapper {
	margin: calc(100dvh / 6) auto 0 auto;
	width: clamp(300px, 30dvw, 1800px);
}

.login-menu-title {
	font-size: 3rem;
	font-weight: bold;
	margin-top: 3rem;
	margin-bottom: calc(100dvh / 7);
	text-align: center;
}

.input-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 1rem;
	font-size: 1.25rem;
	position: relative;
}

.input-group:nth-last-of-type(2) {
	margin-bottom: calc(100dvh / 10);
}

.input-group .input-wrapper {
	width: 100%;
	position: relative;
}

.input-group input {
	display: block;
	width: 100%;
	font-size: 1.25rem;
	padding: 0.5ch;
	border: none;
	background-color: var(--clr-card-hover);
	border-radius: 1rem;
	outline: none;
	transition: border-radius 0.125s ease-in-out;
}

.input-group .input-wrapper::after {
	content: '';
   background-color: var(--clr-active);
   width: 100%;
	height: 0.2ch;
	position: absolute;
	transform-origin: center center;
	scale: 0;
	transition: scale 0.125s ease-in-out;
}

.input-group input:focus {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group .input-wrapper:focus-within::after {
	scale: 1;
}

.login-menu-wrapper .submit-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.error-message {
	color: #f00;
	position: absolute;
	bottom: -1.5rem;
}

.success-message {
	color: #0f0;
	position: absolute;
	bottom: -1.5rem;
}

.login-sublink {
	margin-top: 1rem;
}

.interface-stacker {
	width: clamp(400px, 90%, 4000px);
	margin: auto;
}

.interface-date-container {
	width: 100%;
	table-layout: fixed;
	margin-top: 0.5rem;
}

.interface-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: calc(100dvh / 10);
}

.greeting {
	font-weight: bold;
	font-size: 1.5rem;
}

.greeting-subtext {
	display: block;
	/* color: var(--clr-active); */
}

.faded {
	color: var(--clr-txt-faded) !important;
	font-style: italic !important;
}

.datecell-container {
	padding: 0.5rem;
	margin: 0.5rem;
	min-height: 20dvh;
	background-color: var(--clr-card);
	border-radius: 1rem;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.125s ease-in-out;
}

.datecell-container.today {
	background-color: var(--clr-card-special);
	border: 1px solid var(--clr-carder-card-hover);
}

.datecell-container.expected-leave {
	background-color: #522;
	border: 1px solid #f00;
}

.datecell-container.today.expected-leave {
	background-color: #744;
	border: 1px solid #fff;
}

.datecell-container:hover {
	background-color: var(--clr-card-hover);
}

.datecell-content {
	width: 100%;
}

.datecell-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.datecell-no-content {
	color: var(--clr-txt-faded);
	font-style: italic;
	user-select: none;
	text-align: center;
	display: block;
	width: 100%;
}

.datecell-adnotation-wrapper {
	width: 100%;
	overflow: hidden;
	border-radius: 0.5rem;
	position: relative;
	cursor: pointer;
	white-space: nowrap;
}

.datecell-adnotation-item {
	background-color: var(--clr-carder-card);
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.125s ease-in-out;
}

.datecell-adnotation-item:hover {
	background-color: var(--clr-carder-card-hover);
}

.datecell-description-wrapper {
	display: block;
	padding: 0.25rem 0.5ch 0.25rem 2ch;
	user-select: none;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

.datecell-adnotation-wrapper::before {
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	width: 1ch;
	position: absolute;
}

.datecell-fake-button {
	padding-right: 1ch;
	user-select: none;
}

.datecell-ns-color::before {
	background-color: #111;
}

.datecell-wip-color::before {
	background-color: #f80;
}

.datecell-d-color::before {
	background-color: #0f0;
}

.datecell-f-color::before {
   background-color: #f00;
}

.fullscreen-cover {
	position: fixed;
	overflow: hidden;
	width: 100dvw;
	height: 100dvh;
	top: 0;
	background-color: #0008;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100;
}

.adnotation-popup-close-button {
	padding: 1ch;
	border: none;
	cursor: pointer;
	background-color: var(--clr-carder-card);
}

.adnotation-popup-close-button:hover {
	background-color: var(--clr-card-hover);
}

.adnotation-popup {
	border-radius: 1rem;
	min-width: 70dvw;
	min-height: 50dvh;
	background-color: var(--clr-card);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: flex-start;
}

.adnotation-small-popup {
	border-radius: 0.5rem;
	min-width: 30dvw;
	min-height: 10dvh;
	background-color: var(--clr-card);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: flex-start;
}

.adnotation-small-footer {
	margin: 1rem auto;
}

.adnotation-popup-title {
	font-size: 2rem;
   font-weight: bold;
   margin-bottom: 1rem;
}

.adnotation-popup-title-container {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5ch;
}

.adnotation-popup-status {
	margin-top: 1rem;
	font-size: 1.5rem;
}

.adnotation-popup-status-reason {
	margin-top: 0.5rem;
}

.datecell-add-adnotation {
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	background-color: transparent;
}

.datecell-add-leave {
	border: none;
	cursor: pointer;
	font-size: 1.35rem;
	background-color: transparent;
}

.no-perms {
	cursor: not-allowed !important;
	user-select: none;
}

.datecell-add-leave.confirmed {
	text-decoration: underline;
}

.datecell-add-controls {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.input-group textarea {
	resize: none;
	background-color: var(--clr-bg);
	border: none;
	font-family: var(--font-family);
	width: 100%;
	height: 15ch;
	padding: 0.15rem;
	border-radius: 0.5rem;
	font-size: 1.25rem;
}

.radio-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 2ch;
}

.radio-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1ch;
}

.radio-group label {
	display: block;
	white-space: nowrap;
	cursor: pointer;
}

input[type="radio"] {
	accent-color: var(--clr-active);
	cursor: pointer;
}

.minor-action-button {
	background-color: var(--clr-active);
	border-radius: 1rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.25rem;
	color: var(--clr-txt);
	transition: scale 0.125s ease-in-out;
	border: none;
	cursor: pointer;
	display: inline-block;
}

.minor-action-button:hover,
.minor-action-button:focus {
	background-color: var(--clr-active-hover);
	color: var(--clr-txt);
	scale: 1.05;
}

.adnotation-popup-content {
	margin-bottom: 1.5rem;
}



/* style by zrobić mobilne rozdzielczości używalne */
@media (max-width: 1200px) {
	.interface-date-container .datecell-container {
		margin: 0.25rem;
	}

	.radio-container {
		flex-direction: column;
	}
}

@media (max-width: 900px) {
	.interface-date-container,
	.interface-date-container tbody {
		display: block;
	}

	.interface-date-container td {
		display: inline-block;
	}

	.interface-date-container tr {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
	}
}