/* MARK: VARIABLES */

:root {
	--background: whitesmoke;
	--copy: #da1a4e;
	--highlight: yellow;
	--shadow: rgba(0, 0, 0, 0.300);
	--darkGray: #0000004d;
	--lightGray: #e8e8e8;
}



/* MARK: FONTS */

@font-face {
	font-family: "RobotoCondensedSemiBold";
	src: url("RobotoCondensed-SemiBold.woff");
}

@font-face {
	font-family: "RobotoCondensedRegular";
	src: url("RobotoCondensed-Regular.woff");
}

@font-face {
	font-family: "RobotoCondensedThin";
	src: url("RobotoCondensed-Thin.woff");
}



/* MARK: KEYFRAMES */

@keyframes animateIndex {
	to {
		opacity: 0.8;
		background-color: var(--copy);
		color: var(--background);
	}
}

@keyframes animateMark {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes animateProcessing {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes animateDetails {
	from {
		opacity: 0;
		translate: 0 -1rem;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

@keyframes animateMessage {
	to {
		opacity: 0;
		font-size: 0;
		padding: 0;
	}
}



/* MARK: SEMANTIC */

html {
	font-size: 16px;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
	scroll-padding-top: 5rem;
}

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	font-family: "RobotoCondensedRegular";
	background-color: var(--background);
	color: var(--copy);
	margin: 0;
	height: fit-content;
}

nav {
	display: flex;
	gap: 1rem;
	width: 100%;
}

aside {
	text-align: center;
	position: sticky;
	top: 4rem;
	box-shadow: 0 1px 5px var(--shadow) inset;
	margin-bottom: 1rem;
	z-index: 1;
	p {
		padding: 1rem 0 1rem 0;
	}
}

aside > * {
	animation-name: animateMessage;
	animation-delay: 3s;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

main {
	max-width: 900px;
	width: 90%;
	margin: auto;
}

article {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

footer {
	display: flex;
	font-size: 0.6rem;
	justify-content: center;
	align-items: center;
	margin: 5rem 0 2rem 0;
	background-color: var(--background);
	width: 100%;
	min-height: 5rem;
	p {
		margin: 0;
	}
}

hr {
	border: 1px solid var(--copy);
	width: 100%;
	/* margin: 4rem 0 4rem 0; */
}



/* MARK: CALLIGRAPHY */

h1 {
	font-family: "RobotoCondensedSemiBold";
	font-size: 4rem;
	margin-bottom: 0;
	mark {
		padding: 0 0.75rem 0 0.75rem;
	}
}

h2 {
	font-family: "RobotoCondensedThin";
	font-size: 3rem;
	margin: 0;
	mark {
		padding: 0 0.75rem 0 0.75rem;
	}
}

h3 {
	font-family: "RobotoCondensedRegular";
	font-size: 2rem;
	margin: 0;
	mark {
		padding: 0 0.75rem 0 0.75rem;
	}
}

h4 {
	font-family: "RobotoCondensedThin";
	font-size: 1.5rem;
	margin: 0;
}

h5 {
	font-family: "RobotoCondensedRegular";
	font-size: 1rem;
	margin: 0;
}

h6 {
	font-family: "RobotoCondensedThin";
	margin: 0;
}

p {
	line-height: 1.5rem;
	mark {
		padding: 0 0.2rem 0 0.2rem;
	}
}

sup {
	font-size: 0.4rem;
}

mark {
	white-space-collapse: preserve;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	animation-name: animateMark;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
	animation-duration: 0.5s;
	background-color: var(--highlight);
	color: var(--copy);
}

ol {
	list-style: lower-roman;
	padding-left: 1rem;
	li {
		margin-bottom: 2rem;
	}
	li:last-child {
		margin-bottom: 0;
	}
}

ul {
	list-style: none;
	padding: 0;
}

:focus {
	outline: 0;
}

:focus-visible {
	outline: 1px solid var(--copy);
	outline-offset: 6px;
	border-radius: 8px;
}

.small {
	font-size: 0.7rem;
	line-height: 1rem;
}

.utf8 {
	font-size: 2rem;
	transform: translateY(20px);
}



/* MARK: FLASH */

.flashInfo {
	color: var(--copy);
	background-color: var(--highlight);
}

.flashSuccess {
	color: var(--copy);
	background-color: var(--highlight);
}

.flashError {
	color: var(--background);
	background-color: var(--copy);
}

.flashMessage {
	padding: 1rem;
	margin: 0;
}



/* MARK: LINKS */

a:link {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
}

a:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 5px;
}

a:active {
	color: inherit;
}



/* LINK ATTRIBUTE SELECTORS */

a[href^="http://"]:link {
	text-decoration: none !important;
}

a[href^="http://"]:hover {
	text-decoration: underline !important;
	text-decoration-thickness: 5px !important;
}



/* MARK:NAVIGATION */

.navPrimary {
	position: fixed;
	animation-name: animateNavPrimary;
	animation-fill-mode: forwards;
	animation-duration: 5s;
	z-index: 1;
	padding: 1rem;
	align-items: center;
	background-color: var(--background);
}

.navSecondary {
	align-items: center;
	flex-wrap: wrap;
	margin: 1rem 0 2rem 0;
	a {
		font-size: 0.8rem;
		text-align: center;
	}
	p {
		line-height: 0.25rem;
	}
}

.navSpacer {
	align-self: baseline;
	font-size: 2.5rem;
}


.imgSecondary {
	height: 3rem;
	width: 3rem;
}

.banner {
	position: fixed;
	text-align: center;
	background-color: var(--highlight);
	right: 0;
	z-index: 2;
	padding: 6rem 5rem 0 5rem;
	color: var(--copy);
	font-size: 0.8rem;
	box-shadow: 0px 1px 7px var(--shadow);
	transform: translate(50%, -50%) rotate(45deg);
	p {
		line-height: 1rem;
	}
}

.TBD, .locked, .closed {
	color: lightgray;
	button {
		border-color: lightgray;
	}
	button:hover, button:focus {
		border-color: var(--copy);
	}
}

.locked:hover {
	text-decoration: none;
}



/* MARK: FORMS/INPUTS */

.formGrid {
	display: grid;
	gap: 4rem;
	align-items: start;
	margin-top: 3rem;
}

.formGridGeneral {
	grid-template-columns: 1fr 1fr;
}

.formGridNarrow {
	max-width: 400px;
	grid-template-columns: 1fr;
}

.formGridThree {
	column-gap: 4rem;
	row-gap: 2rem;
}

fieldset {
	border: 1px solid var(--darkGray);
	border-radius: 10px;
	padding: 0.5rem 2rem 2rem 2rem;
	margin: 0;
	input[type="text"], input[type="email"], input[type="password"], textarea, .autoComplete {
		width: 100%;
	}
	label {
		margin-top: 1.5rem;
	}
}

legend {
	font-family: "RobotoCondensedThin";
	font-size: 1.5rem;
	font-weight: 700;
}

label {
	display: inherit;
	margin: 1rem 0 1rem 0;
	font-size: 1rem;
}

::placeholder {
	font-size: 0.8rem;
}

option:disabled, optgroup:disabled {
	color: var(--darkGray);
}

/* .selectDisabled, option:before {
	font-size: 0.8rem;
	color: blue;
} */

input, textarea, select, fileinput[type="file"] {
	display: block;
	padding: 1rem;
	border: 0;
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	box-shadow: 1px 1px 5px var(--shadow) inset;
	background-color: var(--background);
}

input[type="radio"] {
	box-shadow: none;
}

textarea {
	resize: vertical;
	width: 100%;
}

input[type="submit"], button, .buttonHREF {
	color: inherit;
	height: max-content;
	font-size: inherit;
	font-family: "RobotoCondensedSemiBold";
	border-radius: 10px;
	padding: 1rem 2rem 1rem 2rem;
	border: 2px solid var(--copy);
	box-shadow: none;
	background: none;
	cursor: pointer;
}

.buttonHREFSmall {
	display: block;
	color: inherit;
	height: max-content;
	font-size: 0.5rem;
	font-family: "RobotoCondensedSemiBold";
	border-radius: 5px;
	padding: 0.5rem;
	border: 2px solid var(--copy);
	box-shadow: none;
	background: none;
	cursor: pointer;
}

input[type="submit"]:hover, button:hover {
	background-color: var(--copy);
	color: var(--background);
}

input[type="file"] {
	width: 100%;
}

button:focus, input[type="submit"]:focus, .buttonHREF:focus {
	outline: 0;
	background-color: var(--copy);
	color: var(--background);
	/* border-radius: 10px; */
}

.buttonHREF:hover, .buttonHREFSmall:hover {
	color: var(--background);
	background-color: var(--copy);
	text-decoration: none;
}

td button {
	font-size: 0.5rem;
	padding: 0.5rem;
	border-radius: 5px;
}

td button:focus {
	border-radius: 5px;
}

.checkBox {
	margin: 0.5rem 0 0 0;
	width: 100%;
}

.checkBox > * {
	display: inline;
}

.selectBox {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	width: 100%;
}

.imgCaptcha {
	width: 100%;
	filter: grayscale(100%) contrast(90%) hue-rotate(30deg);
	border: 1px solid var(--darkGray);
	border-radius: 10px;
	margin-bottom: 0.5rem;
}

.buttonContainer {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.buttonItem {
	display: block;
	width: fit-content;
	margin-top: 2rem;
}

.buttonSelect {
	display: flex;
	gap: 1rem;
	margin-top: 3rem;
	/* flex-wrap: wrap; */
}

.buttonDocuments {
	display: flex;
	gap: 1rem;
	width: 100%;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}


#processing {
	display: none;
	color: var(--copy);
	font-weight: bold;
	padding: 1rem 2rem 1rem 2rem;
	border: 2px solid transparent;
	width: fit-content;
	animation-name: animateProcessing;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.flexTel {
	display: flex;
	p {
		margin-right: 1rem;
	}
}



/* MARK: AUTOCOMPLETE */

.autoComplete {
	position: relative;
}

.autoCompleteItem {
	position: absolute;
	z-index: 1;
	color: black;
	line-height: 1.2;
	font-size: 0.9rem;
	div {
		background-color: var(--background);
		padding: 0.5rem 1rem 0.5rem 1rem;
	}
	div:hover {
		text-decoration: underline;
	}
}

.autoCompleteActive {
	text-decoration: underline;
}



/* MARK: TABLES */

.tableTickets, .tableProcess, .tableAdmin {
	width: 100%;
	margin: 1rem 0 1rem 0;
	border-collapse: separate;
	border-spacing: 0;

	tr {
		height: 3rem;
	}

	tr:nth-child(even){
		background-color: var(--lightGray);
	}

	tr:first-child:hover {
		background-color: inherit;
	}

	th {
		text-align: left;
		padding: 0.75rem;
		white-space: nowrap;
	}

	td {
		padding: 0.75rem;
		height: 3rem;
		white-space: nowrap;
	}

	td:last-child {
		width: 0;
		padding: 0 1rem 0 1rem;
		vertical-align: inherit;
	}

	/* BORDERINGS */
	tr th {
		border-top: 1px solid var(--darkGray);
	}

	th:last-child, td:last-child {
		border-right: 1px solid var(--darkGray);
	}

	tr:last-child td {
		border-bottom: 1px solid var(--darkGray);
	}

	tr td:first-child, tr th:first-child {
		border-left: 1px solid var(--darkGray);
	}

	tr:first-child th:first-child {
		border-top-left-radius: 10px;
	}

	tr:first-child th:last-child {
		border-top-right-radius: 10px;
	}

	tr:last-child td:last-child {
		border-bottom-right-radius: 10px;
	}

	tr:last-child td:first-child {
		border-bottom-left-radius: 10px;
	}
}

.tableProcess {
	margin-top: 2rem;
}

.tableReport {
	td {
		height: unset;
	}
	.rowUnwrap {
		font-size: 0.8rem;
		white-space: unset;
		line-height: 1.2;
	}
}

.rowEllipsis {
	display: block;
	height: 1.2rem;
	width: 100%;
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	/* background-color: blue; */
}

.rowComment {
	display: block;
	font-size: 0.6rem;
	margin-top: 0.5rem;
}



/* MARK:IMAGES */

figure {
	margin: 0;
	padding: 0;
}

figcaption {
	font-size: 0.8rem;
	white-space: break-spaces;
}

.imgLogo {
	display: block;
	height: 2rem;
}

.imgLogoReport {
	display: block;
	height: 5rem;
	margin-bottom: 2rem;
}

.imgBackground {
	position: fixed;
	top: 4rem;
	z-index: -1;
}

.imgProcess {
	display: block;
	max-width: 100%;
	margin: 0.5rem auto 1rem auto;

	font-family: "RobotoCondensedRegular";
	font: url("RobotoCondensed-Regular.woff");
}



/* MARK: ASSET CONTRACTOR DOCUMENT PROCESS */

.contractor, .ticket, .document, .asset, .process {
	box-shadow: 0px 5px 10px var(--shadow);
	padding: 2rem;
	background-size: 200px 200px;
	background-image: url(tile.jpg);
	background-repeat: repeat;
	align-self: start;
	border-radius: 3px;
}

.contractor {
	position: relative;
	aspect-ratio: 1.5 / 1;
	max-width: 400px;
	border-radius: 2px;
	h4 {
		margin-bottom: 1rem;
	}
	p {
		font-size: 0.9rem;
		margin: 0;
		line-height: 1.2;
	}
}

.document {
	position: relative;
	aspect-ratio: 1 / 1.4;
	max-width: 200px;
	text-align: center;
	padding: 2rem 1rem 1rem 1rem;
	p {
		font-size: 0.8rem;
		margin: 0;
		line-height: 1.2;
	}
}

.asset {
	h5 {
		margin-bottom: 1rem;
	}
	p {
		font-size: 0.9rem;
		margin: 0;
		line-height: 1.2;
	}
}

.process {
	position: relative;
	max-width: 450px;
}

.documentButtons {
	position: absolute;
	display: flex;
	gap: 0.5rem;
	left: 1rem;
	bottom: 1rem;
}

.contractorEdit, .processEdit {
	position: absolute;
	font-size: 0.6rem;
	right: 1.5rem;
	top: 1.5rem;
}

.contractorNone {
	width: 100%;
	text-align: center;
	margin-top: 2rem;
}

.assetGrid {
	display: grid;
	gap: 2rem;
	margin-bottom: 2rem;
}

.contractorGrid, .documentGrid, .processGrid, .ticketGrid {
	display: grid;
	gap: 3rem;
	margin-top: 3rem;
	/* background-color: blue; */
}

.documentGrid {
	margin-top: unset;
}



/* MARK: DETAILS */

details[open] > *:not(summary) {
	font-size: 0.8rem;
	text-align: left;
	padding: 2rem 2.5rem 1.5rem 2.5rem;
	color: var(--background);
	margin: 1rem 0 3rem 0;
	border-radius: 10px;
	background-color: var(--copy);
	animation: animateDetails 200ms ease-in-out;
	max-height: 30vh;
	overflow-y: auto;
	scrollbar-width: thin;
}

summary {
	display: flex;
	position: relative;
	cursor: pointer;
	padding-right: 2rem;
	width: fit-content;
}

summary::before, summary::after {
	content: "";
	width: 1rem;
	border-bottom: 2px solid var(--copy);
	position: absolute;
	transform: translateY(-50%);
	transition: 200ms;
	top: calc(50% - 1px);
	right: 0;
}

summary::after {
	transform: rotate(90deg);
	transform-origin: 50% 50%;
}

[open] summary::after {
	transform: rotate(0deg);
}



/* MARK: DIALOGUE */

dialog {
	max-width: 700px;
	scrollbar-width: thin;
	color: inherit;
	border: 0;
}

::backdrop {
	backdrop-filter: blur(6px);
}

.dialogWwarning, .dialogTicket, .dialogProcess {
	border-radius: 15px;
}
.dialogWwarning {
	padding: 2rem;
	max-width: 1000px;
	box-shadow: 0px 5px 10px var(--shadow);
}

.dialogTicketGrid  {
	display: grid;
	gap: 2rem;
	margin: 1.5rem 0 1.5rem 0;
	align-self: start;
}

.dialogTicket {
	h4 {
		margin: 0 0 0.5rem 0;
	}
	p {
		font-size: 0.9rem;
		margin: 0;
		line-height: 1.2;
	}
	label {
		margin-top: 0.5rem;
	}
}

.dialogTicketOverview, .dialogTicketDocuments, .dialogTicketComments {
	margin-bottom: 2rem;
}


/*
.ticketSetup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: blue;
}

.ticketCheckBox {
	margin: 1.5rem 0 0 0;
	width: 100%;
}

.ticketCheckBox > * {
	display: inline;
} */




/* MARK: INDEX PAGE */

.indexHeader {
	width: initial;
	p mark {
		padding: 1rem;
		line-height: 2.4rem;
	}
}

.indexMain {
	display: flex;
	min-width: 100%;
	flex-direction: column;
	row-gap: 5rem;
}

.indexMain > div {
	box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.455);
	animation-name: animateIndex;
	animation-fill-mode: forwards;
	animation-duration: 2s;
	h2 {
		font-family: "RobotoCondensedRegular";
		line-height: 2rem;
	}
	h3 {
		font-family: "RobotoCondensedThin";
		margin-bottom: 1rem;
	}
	p {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

.indexMain > div:nth-child(odd) {
	border-radius: 0 3rem 3rem 0;
}

.indexMain > div:nth-child(even) {
	border-radius: 3rem 0 0 3rem;
}



/* MARK: PROCESSES PAGE */

.processSetup, .processTask, .processLink, .processLink {
	display: grid;
	column-gap: 3rem;
}

.processTask, .processLink {
	grid-template-columns: 1fr 1fr;
	align-items: end;
	div select, div input {
		width: 100%;
	}
}



/* MARK: GENERAL */

.gridGeneral {
	display: grid;
	gap: 4rem;
	margin-top: 3rem;
}

.gridGroup {
	width: 100%;
	display: inherit;
	gap: inherit;
}

.flexGeneral {
	display: flex;
	margin-top: 3rem;
}

.divBorder {
	border: 1px solid var(--darkGray);
	border-radius: 5px;
	padding: 1.2rem;
	width: fit-content;
	background-color: var(--lightGray);
}



/* MARK: MOBILE */

@media (max-width: 800px) {

	header {
		padding: 2rem 1rem 1rem 1rem;
	}

	footer {
		flex-direction: column;
	}

	fieldset {
		width: 100%;
	}

	.indexMain > div {
		padding: 2rem;
	}

	.indexMain > div:nth-child(odd) {
		margin-right: 10vw;
	}

	.indexMain > div:nth-child(even) {
		margin-left: 10vw;
	}

	.imgBackground {
		height: 100vh;
	}

	.navSecondary h3 {
		width: 100%;
	}

	select {
		width: 100%;
	}

	dialog {
		width: 90%;
	}

	.gridGeneral, .formGridGeneral {
		grid-template-columns: minmax(0, 1fr);
	}

	.fieldsetProcess {
		display: grid;
	}

	.tableOverflow {
		overflow-x: scroll;
		scrollbar-width: thin;
		border-right: 1px solid var(--darkGray);
	}

	/* .tableTickets td, .tableProcess td, .tableAdmin td { */
		/* white-space: nowrap; */
	/* } */

	.contractorFlex, .flexProcess {
		flex-direction: column;
		row-gap: 2rem;
	}

	/* .contractor, .process {
		width: 100%;
	} */

	.processPreview {
		margin-top: 2rem;
			background-color: blue;

	}

	.processSetup, .processTask, .processLink {
		grid-template-columns: 1fr;
	}

}



/* MARK: DESKTOP */

@media (min-width: 801px) {

	header {
		padding: 2rem 1rem 1rem 3rem;
	}

	footer {
		gap: 2rem;
	}

	form {
		grid-template-columns: 1fr 1fr;
	}

	dialog {
		min-width: 600px;
	}

	.formGridThree {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.navSecondary {
		justify-content: end;
	}

	.indexMain > div {
		padding: 3rem;
	}

	.indexMain > div:nth-child(odd) {
		margin-right: 30vw;
		text-align: right;
	}

	.indexMain > div:nth-child(even) {
		margin-left: 30vw;
	}

	.imgBackground {
		min-width: 100vw;
		min-height: 100vh;
	}

	.assetGrid {
		grid-template-columns: auto auto;
	}

	.contractorGrid, .processGrid, .ticketGrid {
		grid-template-columns: 1fr 1fr;
	}

	.documentGrid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.processPreview {
		max-width: 50%;
		margin: 3rem auto auto auto;
	}

	.processSetup {
		grid-template-columns: 1fr 1fr;
	}

	.dialogTicketGrid {
		grid-template-columns: 1fr 1fr;
	}

	.buttonDelete {
		flex-grow: 2;
		text-align: end;
	}

}



/* MARK: PRINT MODE */

.printHeader, .printFooter {
	display: none;
}

.printBody {
	margin-top: 4rem;
}

@media print {

	body {
		background-color: white;
	}

	main {
		padding: 0;
		margin: 0;
		width: 100%;
	}

	nav, h3, h4, header, footer, .banner, .flashMessage {
		display: none;
	}

	.tableOverflow {
		border-right: 0;
	}

	.tableReport {
		width: 100%;
	}

	.printNone {
		display: none;
	}

	.printHeader {
		display: block;
		max-height: fit-content;
	}

	.printBody {
		margin-top: 0;
	}

	.printFooter {
		display: block;
		font-size: 0.8rem;
		width: 100%;
		margin: auto;
		text-align: center;
	}

}