@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

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

body {
	--green: oklch(0.4434 0.0916 165.45);
	--smoke: oklch(0.9702 0 0);
	--lt-gray: oklch(0.9551 0 0);
	--lobster: oklch(0.5511 0.1984 30.86);
	--editing: oklch(0.7853 0.076 143.58);
	--alternate-background: oklch(0.8373 0.1251 208.59 / 45.69%);
	--soft-background: oklch(0.7363 0.1302 42);
	--white: White;
	--black: Black;
	position: relative;
	min-height: 100dvh;
	max-width: 100vw;
	display: grid;
	grid-template: 75px 1fr 25px / auto 1fr;
	grid-column-gap: 1rem;
	grid-row-gap: .25rem;
	font-family: "Fira Sans";
	font-size: 1rem;
}



.container, 
.section-container, 
.nav-container {
	width: 100%;
	display: grid;
	gap: .25rem;
}

.section-container {
	gap: 1rem;
}

label[for='csrf_token'] {
	display: none;
}

nav {
	grid-area: 1/1/2/3;
	display: grid;
	background: var(--white);
	top:0;
	position: sticky;
	z-index: 10;
	align-self:start;
}

.note-editor {
	z-index: 0;
}

.nav-container {
	background: linear-gradient(60deg, rgba(3,99,71,0.4) 0%, rgba(255,255,255,0) 100%, rgba(0,0,0,.2) 0%);
	font-size: 1.25rem;
	height: 100%;
	position: sticky;
	a {
		text-decoration: none;
		color: var(--green);
	}
}

aside {
	grid-area: 2/1/3/2;	
	height: 100%;
	display: grid;
}

.side-links {
	align-self: start;	
	padding: 5px;
	
}

.admin-panel {
	align-self: end;
}

main {
	grid-area: 2/2/3/3;
	display: grid;
	max-width: 95%;
	gap: 1rem;
	scroll-margin-top: 500px;
	
	align-self: start;
	align-items: start;
}

footer {
	grid-area: 3/1/4/3;
	background: var(--black);
	color: var(--white);
	text-align: center;
	align-self: end;
}

div#alertBox:not(:has(*)) {
	display: none;
}

input[type='checkbox'] {
	justify-self: start;
}

button, .btn, .btn-small {
	background-color: var(--green);
	color: var(--smoke);
	border: 0;
	border-radius: 15px;
	font-size: 1.15rem;
	padding: .25rem;
	text-align: center;
	text-decoration: none;
	cursor:pointer;	
}

.btn-small {
	font-size: 1rem;
}

input, select {
	border-radius: 5px;
}

.col-2 {
	grid-template-columns: repeat(2, 1fr);
	justify-self: start;
}

.col-3 {
	grid-template-columns: repeat(3,1fr);
}
.col-4 {
	grid-template-columns: repeat(4, 1fr);
}
.col-5 {
	grid-template-columns: repeat(5, minmax(auto, 1fr));
}
.col-6 {
	grid-template-columns: repeat(6,1fr);
}
.col-max {
	grid-template-columns: repeat(auto-fit, minmax(min(100%/3, max(50px, 100%/9)), 1fr));
	align-items: center;	
}
.span-2 {
	grid-column: auto / span 2;
}
.card, .note-card, .box-card {
	border: 1px solid var(--black);
	border-radius: 15px;
	background: var(--smoke);
	align-items: center;
	padding: 5px;
}
.note-card {
	background: var(--green);
	color: var(--smoke);
	align-self: start;
}
.box-card {
	gap: 1rem;
	padding: 15px;
	box-shadow: 2px 2px 20px 2px var(--green) inset;
}

.v-scroll {
	max-height: 300px;
	overflow-y:scroll;
}

.control-menu {	
	&:hover .sub-menu {
		display: grid;		
	}
}


.relative {
	position: relative;
}

.sub-menu {
	position: absolute;
	left: 1rem;
	top: 0;
	background: lightgray 30%;
	padding: min(5px, 5%);
	z-index: 1;
	max-width: fit-content;
	a {
		color: var(--green);
		text-decoration: none;
	}
	&:hover a:hover{
		color: SlateBlue;
	}
}



.side-group {
	font-size: .75rem;
	gap: 0;
}
.side-sub-group {
	margin-left: 5px;
}

.page-heading {
	font-size: clamp(1.75rem, 2rem, 2.5rem);
	color: var(--green);
	text-transform: uppercase;
}
.small-heading {
	font-size: 1.25rem;
	font-weight: bolder;
	text-transform: uppercase;
}

.card-heading{
	font-size:1.05rem;
	font-weight: bold;
	text-transform: uppercase;
}
.heading {
	font-size: 1.25rem;
}

.group-panel {
	background: var(--black);
	color: var(--white);
	font-size:1.5rem;
	span {
		padding-left: 1rem;
	}
}

.sub-group-panel {
	background: darkgray;
	
	span {
		padding-left: 2.5rem;
		font-size: 1.15rem;
	}
	
}

.table-header {
	font-size: 1.25rem;
	background: var(--green);
	color: var(--smoke)
}
.table-row {
	color: var(--black);
	border-radius: 5px;
}

.alert-danger {
	font-size: 1.25rem;
	background: Tomato;
	color: var(--white);
}

.overdue {
	background: MIstyRose;
}

.alert-success {
	background: rgb(198, 249, 120);
	color: var(--black);
}
.alert-warning {
	background: rgb(204, 204, 96);
	color: var(--black);
}

.hide {
	display: none;
}

.center {
	justify-self: center;
	
}

.vertical-center {
	align-self:center;
}

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

.top {
	align-self: start;
}

.right {
	align-self: end;
	align-items: end;
	text-align: end;
}

.top-right {
	justify-self:end;
	align-self:start;
	text-align: end;
}

.edit-panel {
	background: var(--editing);
}

.hide-button, .hide-button-trash {
	background: none;
	border:none;
}

.hide-button-trash {
	margin-top: .5rem;
	color: var(--lobster);
}

.lobster {
	background: var(--lobster);
	color: var(--smoke);
	.card {
		background: var(--lobster)
	}
}

.small {
	font-size: .75rem;
}

.large {
	font-size: 1.5rem;
}

img {
	object-fit: cover;
	width:100%;
	height:100%;
	aspect-ratio: 16 / 9;
}
.image-div {
	width: 100px;
	height: 100px;
}

.note-editable, .blank {
	background: var(--white);
}

.flex {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.accent {
	color: var(--green);
	font-size: 1.25rem;
	font-weight: bolder;
	max-width: 80%;
}

.box-advert {
	max-width: 75%;
	gap: 1rem;
	div {
		width: 250px;
	}
}

.stack-advert {
	max-width: 300px;
	grid-template-rows: repeat(3, 1fr);
	.image {
		grid-area: 1/1/3/2;
		object-fit:contain;
		height: 200px;
	}
	.text {
		grid-area: 2/1/4/2;
		background: var(--white);
				
		width: 85%;
		padding: 10px 15px;
		border-radius: 10px;
		border: 1px solid var(--smoke);
		box-shadow: 5px 5px var(--lt-gray)
	}
}

.google-review {
	.checked {
		color: orange;
	}
}

.review-text {
	max-width: 250px;
}

.nav-bar {
	grid-template-areas: 
	'logo . email . call .'
	'logo links links links links links';
	.logo {
		grid-area: logo;
		max-width: 100px;
	}
	.links {
		grid-area: links;
		grid-template-columns: repeat(5,1fr);
		text-align: center;
	}

	.email {
		grid-area: email;
	}

	.call {
		grid-area: call;
	}

	.btn {
		color: var(--smoke);
		text-align: center;
	}
}

.truncate {
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width: minmax(100px,200px);	
}

.calendar-header {
	width: 100%;
	background-color: darkgrey;
}
.entry {
	border-bottom: 1px solid black;
}

.tall {
	line-height: 2em;
}

.service-group {
	width: 90%;
	line-height: 1.25rem;
}

.alt-back {
	background: var(--alternate-background);
	color: var(--black);
}

.soft-back {
	background: var(--soft-background);
	color: var(--black)
}

#dash_panel {
	gap: 1rem;
}

#smallNavButton {
	display: none;
}
@media screen and (max-width: 800px) {

	body {
		grid-template: 75px 1fr 25px / 1fr;
	}
	#siteNavBar {
		display: none;
	}
	#smallNavButton {
		display: grid;
	}
	.col-2, .col-3, .col-4, .col-5, .col-6, .col-max {
		grid-template-columns: 1fr;
	}

	span.span-2 {
		grid-column: auto;		
	}

	ul {
		list-style-type: none;
	}
	.flex {
		flex-wrap: wrap;
	}
}

#map {
	height: 500px;
}

.flex-left {
	display: flex;
	justify-content: left;
}

.color-default {
	background-color: rgb(3 155 229);
	color: white;
}
.color-3 {
	background-color: rgb(142 36 170);
	color: white;
}
.color-4 {
	background-color: rgb(230 124 115);
}
.color-5 {
	background-color: rgb(246 191 38);
}
.color-6 {
	background-color: rgb(244 81 30);
}
.color-10 {
	background-color: rgb(11, 128, 67);
	color: white;
}
.color-11 {
	background-color: rgb(213 0 0);
}

.part-needed {
	background-color: rgb(250, 78, 78);
}

.part-ordered {
	background-color: rgb(243, 243, 143);
}

.sig-panel {
	width: 100%;
	max-width: 500px;
	height: 200px;
	canvas {
		width: 100%;
		height: 100%;
	}
}