@charset "utf-8";

/* == General Styles == */

/* = Reset = */
:root {
	--shadow: rgb(0 0 0 / .6);
}

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

html {
	font-size:20px;
	line-height:1;
	font-family:sans-serif;
	color:var(--bg-dark);
}

@media only screen and (max-width: 992px) {
	html {
		font-size:18px;
	}
}

@media only screen and (max-width: 576px) {
	html {
		font-size:15px;
	}
}

/* = Elements = */
h1, h2 {
	text-align:center;
	cursor:default;
}
h1 {
	font-size:1.5em;
}
h2 {
	font-size:1.25em;
}

a {
	text-decoration: none;
}

/* = Formating classes = */
.d-block {
	display:block;
}
.d-none {
	display:none;
}

.w-100 {
	width:100%;
}

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

.smaller-text {
	font-size:.8em;
}
.bigger-text {
	font-size:1.25em;
}

.disabled {
	opacity:.5;
	cursor:not-allowed;
}

.faded {
	opacity:.5;
}

.position-absolute {
	position:absolute;
}

/* = Margins = */
.mt-4 {
	margin-top:1.5rem;
}

.my-4 {
	margin-top:1.5rem;
	margin-bottom:1.5rem;
}

.mb-2 {
	margin-bottom:.5rem;
}

.me-2 {
	margin-right:.5rem;
}

/* = Containers = */
.wrapper {
	width:100%;
	max-width:36rem;
	padding:1.5rem;
	background-color:var(--primary-dark);
	background:linear-gradient(to bottom, var(--primary-dark) 0%, var(--primary-light) 100%);
	box-shadow:0 .25rem .5rem .25rem var(--shadow);
}
.wrapper:has(#login-form) {
	max-width:25rem;
}

.warning {
	font-size:.8em;
	font-style:italic;
	color:white;
	margin-top:-.5rem;
	padding:.25rem;
	background-color:darkred;
	box-shadow:0 .1rem .25rem .1rem var(--shadow);
}

.flex {
	display:flex;
	justify-content:space-evenly;
	-webkit-justify-content:space-evenly;
}

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

.justify-start {
	justify-content:flex-start;
}
.justify-end {
	justify-content:flex-end;
}

.grid-column {
	display:grid;
	grid-gap:1rem;
}
.grid-column .btn {
	min-height:3rem;
}


@media only screen and (max-width: 576px) {
	.flex {
		flex-direction:column;
	}
}

/* == Structure == */
body {
	background-color:var(--secondary-light);
	background-image:var(--bg-img);
	background-position:center;
	background-size:cover;
	background-attachment:fixed;
}

main {
	display:grid;
	justify-content:center;
	justify-items:center;
	align-content:space-evenly;
	height:calc(100vh - 1.25rem);
	padding:1.5rem 1.5rem .75rem;
	margin-bottom:1.25rem;
}

/* = Header = */
header {
	position:fixed;
	right:1rem;
	top:1rem;
	width:auto;
	text-shadow:1px 1px 3px var(--bg-dark);
}

.welcome {
	position:fixed;
	left:1rem;
	top:1rem;
	color:var(--bg-light);
	font-size:.8em;
	z-index:-1;
}

#fullscreen,
#logout {
	font-size:2em;
	color:var(--secondary-dark);
}

#fullscreen {
	cursor:pointer;
	margin-right:.5rem;
}

/* = Branding = */
.brand {
	max-height:20vh;
	width:100%;
	max-width:calc(100vw - 4rem);
	text-align:center;
	margin-bottom:1.5rem;
}
.brand img {
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}

/* = Footer = */
footer {
	font-family:'Lato', sans-serif;
	font-size:.8em;
	position:fixed;
	bottom:.5rem;
	right:.5rem;
	line-height:1;
	width:auto;
	color:var(--bg-light);
	z-index:-1;
	text-shadow:1px 1px 3px var(--bg-dark);
}
footer a {
	font-weight:900;
	color:var(--bg-light);
	text-decoration:underline;
}

/* == Content == */

/* = Homepage = */
.home-menu {
	margin:0 2rem;
}
.home-menu svg {
	font-size:1.25rem;
	margin-left:1rem;
}

.ilustration {
	display:flex;
	align-items:center;
	width:30%;
}

.ilustration img {
	width:100%;
	display:block;
}

@media only screen and (max-width: 576px) {
	.ilustration {
		width:100%;
	}
	
	.ilustration img {
		width:50%;
	}
}

/* = Tables = */
.wrapper:has(table) {
	padding:.75rem;
	width:60rem;
	max-width:calc(100vw - 2rem);
	max-height:calc(80vh - 4rem);
	overflow:auto;
}

table {
	border-collapse:collapse;
	width:100%;
	border-block:1px solid var(--secondary-dark);
}
thead {
	border-bottom:2px solid var(--secondary-dark);
}
th {
	text-align:left;
}
td, th {
	padding:.25rem;
}
thead,
tr:nth-child(even) {
	background-color:rgb(var(--secondary-light-rgb) / .5);
	
}

.table .actions {
	width:6rem;
	text-align:center;
}
.table .actions span {
	display: inline-grid;
	grid-template:auto / repeat(3, max-content);
	margin:0 .25rem;
	grid-gap:.75rem;
	color:var(--secondary-dark);
}
.table .actions button {
	font-size: 1.25rem;
	color:var(--secondary-dark);
	cursor: pointer;
	margin:0 .25rem;
}
.table .actions [date] {
	display:inline-block;
}

.empty-table {
	margin:4rem;
	color:var(--primary-dark);
}
/*
.table-nav .actions {
	display:inline-block;
}*/

/* = Grid = */
.d-grid {
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	grid-gap:1rem;
}

.col-third {
	grid-column:span 2;
}

.col-two-thirds {
	grid-column:span 4;
}

.col-half {
	grid-column:span 3;
}

.col-full {
	grid-column:1 / 7;
}

@media only screen and (max-width: 576px) {
	.col-third:not(.keep-small) {
		grid-column:span 3;
	}
}

/* == User Interface == */

/* = Buttons = */
button {
	background-color: transparent;
	border:none;
	padding:0;
	font-size: 1rem;
}

.btn {
	padding:.5rem 1.5rem;
	font-weight:bold;
	background-color:var(--secondary-dark);
	color:white;
	border:none;
	border-radius:100vmax;
	box-shadow:0 .1rem .25rem .1rem var(--shadow);
	cursor:pointer;
	-webkit-user-select:none;
  	user-select:none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
}
.btn:hover {
	background-color:var(--primary-dark);
}
.btn:focus-visible {
	outline:transparent;
	box-shadow: 0 .1rem .25rem .1rem var(--shadow),
				inset 0 0 .25rem .1rem white;
}

.btn-dark {
	background-color:black !important;
}
.btn-dark:hover {
	background-color:var(--secondary-dark) !important;
}

.btn-sm {
	font-size:.8rem;
	padding:.25rem .75rem;
}

.btn-plus {
	border-radius: .25rem;
	padding:.25rem .5rem;
}

/* = Forms = */
label,
input,
textarea,
select {
	display:block;
	font-size:1rem;
}
label.error {
	position:relative;
	background-color:darkred;
	color:white;
	font-size:.8em;
	font-weight:normal;
	font-style:italic;
	text-align:center;
	padding:.25rem;
	margin:calc(.5rem + .1rem) 0 0;
	box-shadow:0 .1rem .25rem .1rem var(--shadow);
}
label.error::before {
	content:"";
	position:absolute;
	top:-.5rem;
	left:calc(50% - .5rem);
	width:0; 
  	height:0; 
	border-left:.5rem solid transparent;
	border-right:.5rem solid transparent;
  	border-bottom:.5rem solid #800;
}
input,
textarea,
select {
	border:none;
	border-bottom:1px solid var(--primary-dark);
	line-height:normal !important;
}
input::placeholder,
textarea::placeholder,
select {
	color:var(--primary-dark) !important;
}
input:focus, input:hover,
textarea:focus, textarea:hover,
select:focus, select:hover {
	background-color:var(--secondary-light) !important;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline:transparent;
	outline-offset:0;
}
input:focus,
textarea:focus,
select:focus {
	box-shadow:0 0 .25rem .1rem var(--shadow);
	border-color:transparent;
}
input:not([type=checkbox]),
textarea,
select {
	width:100%;
	padding:.25rem .5rem;
}
input[type="checkbox"] {
	margin-right:.75rem;
	width:1.25rem;
	height:1.25rem;
	min-width:1.25rem;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
	accent-color:var(--secondary-dark);
}
input[type="radio"] {
	width:1rem;
	height:1rem;
	min-width:1rem;
	box-shadow:none !important;
}
textarea {
	font-family:inherit;
}
/*select option:not(:first-child) {
	color:var(--bg-dark);
}*/
/*select option:first-child {*/
select option {
	color:var(--primary-dark) !important;
}

.radio {
	align-self: start;
	display:grid;
	grid-template-columns:min-content auto; 
	align-items:center;
	grid-gap:.5rem;
}
.radio .control-label {
	grid-column:span 2;
	margin-bottom:0;
}

.radio label.error {
	grid-row-start: -1;
	grid-column:1 / 3;
}

.control-label {
	font-weight:bold;
	margin-bottom:.5rem;
}

.control-label.required::after {
	content: ' *';
	color:red;
}

.disclaimer {
	font-style:italic;
	margin-top:.5rem;
}

.password {
	position: relative;
}
.password input {
	padding-right: 2.5rem;
}
.password .btn {
	display:inline-block;
	height:100%;
	width:2rem;
	text-align: center;
	padding:.25rem;
	background-color:var(--secondary-dark);
	color:white;
	position:absolute;
	right:0;
	top:0;
	bottom:auto;
	border-radius:0;
	box-shadow:none;
	border-bottom:1px solid var(--primary-dark);
}
.password .btn svg {
	vertical-align:-.25em !important;
}

.check {
	display:flex;
	align-items:center;
	min-height:1.7rem;
}
.check label {
	margin:0;
}

.submit {
	display:flex;
	justify-content:flex-end;
	-webkit-justify-content:flex-end;
}
.submit .btn {
	margin-left:1rem;
}

#itemsCount {
	display:inline-block;
}
#itemsCount select {
	display:inline-block;
	width:auto;
}

/* = Modal = */
.modal {
	display:flex;
	justify-content:center;
	-webkit-justify-content:center;
	align-items:center;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgb(0 0 0 / .8);
	z-index:9;
}
.modal.hidden {
	display:none;
}
.modal .modal-body {
	position:relative;
	padding:1.5rem .5rem 2rem;
	margin:0 1rem;
	max-width:24rem;
	min-height:10rem;
	font-size:2em;
	width:100%;
	text-align:center;
	display:flex;
	justify-content:center;
	-webkit-justify-content:center;
	align-items:center;
	background-color:white;
	box-shadow:0 .25rem .5rem .25rem var(--shadow);
	color:var(--primary-dark);
}
.modal .modal-body.error {
	background-color:indianred;
	color:black;
}
.modal-body #close {
	font-size:1.6rem;
	position:absolute;
	right:.5rem;
	top:.2rem;
	cursor:pointer;
}
.modal-body form {
	margin:.5rem 0;
}
.modal-body textarea {
	background-color:rgb(var(--secondary-light-rgb) / .33);
}
.modal-body .buttons {
	position:absolute;
	bottom:.5rem;
	right:.5rem;
	top:auto;
	height:1.5rem;
	display:grid;
	grid-auto-flow:column;
	justify-items:end;
	grid-gap:.5rem;
	font-size:1rem;
}
.modal-body .btn svg {
	margin-left:.5rem;
}

/* = Pagination = */
.table-nav {
	display:flex;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	align-content:center;
	margin-top:.75rem;
}

.table-nav > * {
	list-style-type:none;
	display:inline-flex;
	justify-content:space-between;
	-webkit-justify-content:space-between;
	align-items: center;
	gap:.5rem;
}

.pagination {
	padding-left:.5rem;
}

.table-nav .actions > * {
	height:fit-content;
}

.pagination li {
	display:inline-flex;
	justify-content:center;
	-webkit-justify-content:center;
	align-content:center;
	flex-wrap:wrap;
}
.pagination a {
	text-decoration:none;
	font-size:.8rem;
	background-color:white;
	padding:.25rem .5rem;
	font-weight:bold;
	color:var(--primary-dark);
	border:none;
	border-radius:.25rem;
	display:inline-block;
	box-shadow:0 .1rem .25rem .1rem var(--shadow);
}
.pagination li a:hover {
	background-color:var(--secondary-dark);
	color:white;
}
.pagination .next a, .pagination .prev a {
	text-transform:uppercase;
}
.pagination .currentpage a {
	background-color:var(--secondary-dark);
	color:var(--primary-light);
}
.pagination .currentpage a:hover {
	color:white;
}
.pagination .items {
	font-size:.8em;
	text-align:right;
	display:block;
	align-self:center;
}

/* = Tooltip Styles = */
#tooltip {
    text-align:center;
	font-size:.8em;
	line-height:1rem;
    color:var(--tooltip-color);
	font-weight:bold;
    background:var(--tooltip-bg);
    position:absolute;
    z-index:99;
    padding:.5rem;
	border-radius:.25rem;
}
#tooltip:after {
	width:0;
	height:0;
	border-left:.5rem solid transparent;
	border-right:.5rem solid transparent;
	border-top:.5rem solid var(--tooltip-bg);
	content:'';
	position:absolute;
	left:50%;
	bottom:-.5rem;
	margin-left:-.5rem;
}
#tooltip.top:after {
	border-top-color:transparent;
	border-bottom:.5rem solid var(--tooltip-bg);
	top:-1rem;
	bottom:auto;
}
#tooltip.left:after {
	left:.5rem;
	margin:0;
}
#tooltip.right:after {
	right:.5rem;
	left:auto;
	margin:0;
}