/* =========================================================
   SHARED FILE UPLOAD PAGES
   Used by Sample Upload and Site Upload
========================================================= */

.sampleUploadPage {
	min-height: 100%;
	color: #3f443f;
	font-family: "Roboto", sans-serif;
	background: #f7f4eb;
}

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


/* =========================================================
   PAGE HERO
========================================================= */

.sampleUploadHero {
	margin-bottom: 0;
	background: #fcf9f0;
	border-radius: 18px;
}

.sampleUploadHeroOverlay {
	display: none;
}

.sampleUploadHeroContent {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	max-width: 1500px;
	min-height: 190px;
	margin: 0 auto;
	padding: 2.25rem 2.5rem;
}

.sampleUploadHeroText {
	flex: 1 1 auto;
	min-width: 0;
}

.sampleUploadHeroText h1 {
	margin: 0 0 0.5rem;
	color: #708090;
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.sampleUploadHeroText p {
	max-width: 760px;
	margin: 0;
	color: #708090;
	font-size: 1rem;
	line-height: 1.65;
}

.sampleUploadHeroActions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.sampleUploadMain {
	padding: 2.5rem 1.5rem 4rem;
}

.sampleUploadContainer {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}


/* =========================================================
   GENERAL CARDS
========================================================= */

.sampleUploadCard {
	overflow: hidden;
	margin-bottom: 1.75rem;
	background: #ffffff;
	border: 1px solid #ddd9cf;
	border-radius: 18px;
	box-shadow: 0 12px 30px rgba(59, 57, 49, 0.08);
}

.sampleUploadCardHeader {
	padding: 1.4rem 1.6rem;
	background: linear-gradient(
		180deg,
		#f7f7f3 0%,
		#f1f1eb 100%
	);
	border-bottom: 1px solid #ddd9cf;
}

.sampleUploadCardBody {
	padding: 1.75rem;
}

.sampleUploadSectionHeading {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.sampleUploadSectionIcon {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #ffffff;
	font-size: 1.15rem;
	background: #7a2c37;
	border-radius: 13px;
	box-shadow: 0 7px 16px rgba(122, 44, 55, 0.19);
}

.sampleUploadSectionHeading > div:last-child {
	min-width: 0;
}

.sampleUploadSectionHeading h2 {
	margin: 0 0 0.25rem;
	color: #2c4d34;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.sampleUploadSectionHeading p {
	margin: 0;
	color: #6e736e;
	font-size: 0.9rem;
	line-height: 1.5;
}


/* =========================================================
   COLLAPSIBLE CARDS
========================================================= */

.sampleUploadCollapsibleSection {
	overflow: hidden;
}

/* Removes the browser-provided triangle so only the
   Font Awesome chevron appears. */
.sampleUploadCollapsibleHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sampleUploadCollapsibleHeader::-webkit-details-marker {
	display: none;
}

.sampleUploadCollapsibleHeader::marker {
	content: "";
}

.sampleUploadCollapsibleHeader:focus {
	outline: none;
}

.sampleUploadCollapsibleHeader:focus-visible {
	box-shadow: inset 0 0 0 3px rgba(44, 77, 52, 0.12);
}

.sampleUploadCollapsibleIcon {
	flex: 0 0 auto;
	margin-left: 1rem;
	color: #2c4d34;
	font-size: 1rem;
	transition: transform 0.2s ease;
}

.sampleUploadCollapsibleSection[open]
	> .sampleUploadCollapsibleHeader
	.sampleUploadCollapsibleIcon {
	transform: rotate(180deg);
}

/* The summary already carries sampleUploadCardHeader and the
   body already carries sampleUploadCardBody, so avoid doubling
   borders or spacing. */
.sampleUploadCollapsibleSection:not([open])
	> .sampleUploadCollapsibleHeader {
	border-bottom-color: transparent;
}

.sampleUploadCollapsibleBody {
	border-top: 0;
}


/* =========================================================
   DRAG-AND-DROP UPLOAD AREA
========================================================= */

.sampleUploadDropZone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 330px;
	padding: 2.75rem 2rem;
	text-align: center;
	background: linear-gradient(
		135deg,
		rgba(247, 244, 235, 0.8),
		rgba(241, 244, 239, 0.9)
	);
	border: 2px dashed #b8beb5;
	border-radius: 16px;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.sampleUploadDropZone:hover,
.sampleUploadDropZone.nv-file-over {
	background: #f1f5ef;
	border-color: #2c4d34;
	box-shadow: 0 12px 25px rgba(44, 77, 52, 0.1);
	transform: translateY(-2px);
}

.sampleUploadDropZoneText {
	margin-bottom: 1.5rem;
}

.sampleUploadDropZoneText h3 {
	margin: 0 0 1.2rem;
	color: #343b35;
	font-size: 1.25rem;
	font-weight: 700;
}

.sampleUploadDropZoneText p {
	margin: 0;
	color: #707770;
	font-size: 0.92rem;
}

.sampleUploadDropZone input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* =========================================================
   UPLOAD PROGRESS
========================================================= */

.sampleUploadProgressArea {
	margin-top: 1.5rem;
	padding: 1.2rem;
	background: #f6f7f4;
	border: 1px solid #dfe2dc;
	border-radius: 12px;
}

.sampleUploadProgressHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.65rem;
	color: #4f5650;
	font-size: 0.85rem;
	font-weight: 600;
}

.sampleUploadProgress {
	height: 10px;
	overflow: hidden;
	margin: 0;
	background: #dedfd9;
	border-radius: 999px;
}

.sampleUploadProgress .progress-bar {
	background: #2c4d34;
	border-radius: 999px;
	transition: width 0.25s ease;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.sampleUploadFieldGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
}

.sampleUploadField {
	min-width: 0;
}

.sampleUploadField label {
	display: block;
	margin-bottom: 0.45rem;
	color: #3e443f;
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.35;
}

.sampleUploadField .form-control,
.sampleUploadField .form-select {
	width: 100%;
	min-height: 46px;
	padding: 0.7rem 0.85rem;
	color: #3d433e;
	font-size: 0.92rem;
	background-color: #ffffff;
	border: 1px solid #cfd3cc;
	border-radius: 9px;
	box-shadow: none;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.sampleUploadField .form-control:hover,
.sampleUploadField .form-select:hover {
	border-color: #aeb6ac;
}

.sampleUploadField .form-control:focus,
.sampleUploadField .form-select:focus {
	background-color: #ffffff;
	border-color: #2c4d34;
	box-shadow: 0 0 0 0.2rem rgba(44, 77, 52, 0.12);
	outline: none;
}

.sampleUploadField .form-control:disabled,
.sampleUploadField .form-select:disabled {
	color: #8b908b;
	background-color: #eeeeea;
	cursor: not-allowed;
}

.sampleUploadFieldHelp {
	margin-top: 0.4rem;
	color: #7b817b;
	font-size: 0.77rem;
	line-height: 1.45;
}


/* =========================================================
   SPREADSHEET LAYOUT SETTINGS
========================================================= */

.sampleUploadSettingsGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.35rem;
}

/* The Site Upload page has only one settings panel. */
.sampleUploadSettingsGrid > .sampleUploadSettingPanel:only-child {
	grid-column: 1 / -1;
}

.sampleUploadSettingPanel {
	padding: 1.3rem;
	background: #f8f8f5;
	border: 1px solid #dedfd8;
	border-radius: 14px;
}

.sampleUploadSettingHeader {
	margin-bottom: 1rem;
}

.sampleUploadSettingHeader h3 {
	margin: 0 0 0.3rem;
	color: #2c4d34;
	font-size: 1rem;
	font-weight: 700;
}

.sampleUploadSettingHeader p {
	margin: 0;
	color: #747a74;
	font-size: 0.82rem;
	line-height: 1.5;
}


/* =========================================================
   RADIO OPTIONS
========================================================= */

.sampleUploadRadioGroup {
	display: grid;
	gap: 0.75rem;
}

.sampleUploadRadioOption {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	padding: 0.85rem;
	background: #ffffff;
	border: 1px solid #d7dad4;
	border-radius: 10px;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;
}

.sampleUploadRadioOption:hover {
	background: #f6f8f5;
	border-color: #aeb9ac;
	box-shadow: 0 5px 12px rgba(44, 77, 52, 0.06);
}

.sampleUploadRadioOption .form-check-input {
	flex: 0 0 auto;
	margin: 0.18rem 0 0;
	cursor: pointer;
}

.sampleUploadRadioOption .form-check-input:checked {
	background-color: #7a2c37;
	border-color: #7a2c37;
}

.sampleUploadRadioOption .form-check-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(122, 44, 55, 0.12);
}

.sampleUploadRadioContent {
	display: block;
	min-width: 0;
	line-height: 1.45;
}

.sampleUploadRadioText,
.sampleUploadRadioContent strong {
	display: inline;
	font-size: 0.87rem;
	line-height: 1.45;
	color: #404640;
}

.sampleUploadRadioContent strong {
	font-weight: 700;
}

.sampleUploadRadioContent small {
	display: block;
	margin-top: 0.35rem;

	color: #757b75;
	font-size: 0.77rem;
	line-height: 1.45;
}

/* =========================================================
   VERTICAL IMPORT SUBSECTION
========================================================= */

.sampleUploadSubsection {
	margin-top: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid #e1e1da;
}

.sampleUploadSubsectionHeader {
	position: relative;
	margin-bottom: 1.25rem;
	padding-left: 1rem;
}

.sampleUploadSubsectionHeader::before {
	position: absolute;
	top: 0.1rem;
	bottom: 0.1rem;
	left: 0;
	width: 4px;
	content: "";
	background: #7a2c37;
	border-radius: 999px;
}

.sampleUploadSubsectionHeader h3 {
	margin: 0 0 0.25rem;
	color: #2c4d34;
	font-size: 1rem;
	font-weight: 700;
}

.sampleUploadSubsectionHeader p {
	margin: 0;
	color: #757b75;
	font-size: 0.82rem;
	line-height: 1.5;
}


/* =========================================================
   ANALYSIS PARAMETER MAPPING
========================================================= */

.sampleUploadParameterSection {
	min-width: 0;
}

.sampleUploadParameterList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.sampleUploadParameterRow {
	min-width: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.sampleUploadParameterRow:hover {
	border-color: transparent;
	box-shadow: none;
	transform: none;
}

/* =========================================================
   BUTTONS
========================================================= */

.sampleUploadPrimaryButton,
.sampleUploadSecondaryButton,
.sampleUploadCancelButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.7rem 1.2rem;
	font-size: 0.87rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border-radius: 9px;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.sampleUploadPrimaryButton {
	color: #ffffff;
	background: #2c4d34;
	border: 1px solid #2c4d34;
	box-shadow: 0 7px 15px rgba(44, 77, 52, 0.18);
}

.sampleUploadPrimaryButton:hover,
.sampleUploadPrimaryButton:focus {
	color: #ffffff;
	background: #3c6546;
	border-color: #3c6546;
	box-shadow: 0 9px 20px rgba(44, 77, 52, 0.22);
	transform: translateY(-1px);
}

.sampleUploadPrimaryButton:active {
	transform: translateY(0);
}

.sampleUploadPrimaryButton:disabled {
	color: rgba(255, 255, 255, 0.8);
	background: #8f9c91;
	border-color: #8f9c91;
	box-shadow: none;
	cursor: not-allowed;
	transform: none;
}

.sampleUploadSecondaryButton {
	color: #ffffff;
	background: #708090;
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.sampleUploadSecondaryButton:hover,
.sampleUploadSecondaryButton:focus {
	color: #ffffff;
	background: #96abc0;
	border-color: #96abc0;
	box-shadow: 0 8px 17px rgba(20, 32, 22, 0.16);
	transform: translateY(-1px);
}

.sampleUploadCancelButton {
	color: #5d625d;
	background: #ffffff;
	border: 1px solid #cfd2cc;
	box-shadow: none;
}

.sampleUploadCancelButton:hover,
.sampleUploadCancelButton:focus {
	color: #7a2c37;
	background: #faf4f5;
	border-color: #b98c92;
	box-shadow: 0 7px 15px rgba(122, 44, 55, 0.08);
	transform: translateY(-1px);
}


/* =========================================================
   FORM ACTIONS
========================================================= */

.sampleUploadFormActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.8rem;
	margin-top: 2rem;
	padding: 1.25rem;
	background: #eeeeea;
	border: 1px solid #dadbd4;
	border-radius: 14px;
}


/* =========================================================
   ALERTS
========================================================= */

.sampleUploadAlert {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: 10px;
}

.sampleUploadAlert > i {
	flex: 0 0 auto;
	margin-top: 0.15rem;
	font-size: 1.05rem;
}

.sampleUploadAlert strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.88rem;
}

.sampleUploadAlert p {
	margin: 0;
	font-size: 0.83rem;
	line-height: 1.5;
}

.sampleUploadAlertError {
	color: #772934;
	background: #f9edef;
	border: 1px solid #e5bdc3;
}

.sampleUploadAlertError > i {
	color: #9a3543;
}


/* =========================================================
   BOOTSTRAP OVERRIDES INSIDE UPLOAD PAGES
========================================================= */

.sampleUploadPage .btn:focus,
.sampleUploadPage .btn:focus-visible {
	outline: none;
}

.sampleUploadPage .form-select {
	background-position: right 0.8rem center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

	.sampleUploadHeroContent {
		flex-wrap: wrap;
		min-height: 0;
		padding: 2rem 1.5rem;
	}

	.sampleUploadHeroText {
		flex: 1 1 100%;
	}

	.sampleUploadHeroActions {
		flex: 1 1 100%;
		justify-content: flex-start;
	}

	.sampleUploadMain {
		padding: 2rem 1.25rem 3rem;
	}

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

	.sampleUploadSettingsGrid > .sampleUploadSettingPanel:only-child {
		grid-column: auto;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

	.sampleUploadHeroContent {
		display: block;
		padding: 1.5rem 1rem;
	}

	.sampleUploadHeroText h1 {
		font-size: 1.75rem;
	}

	.sampleUploadHeroText p {
		font-size: 0.88rem;
		line-height: 1.55;
	}

	.sampleUploadHeroActions {
		width: 100%;
		margin-top: 1.25rem;
	}

	.sampleUploadHeroActions .btn {
		width: 100%;
	}

	.sampleUploadMain {
		padding: 1.25rem 0.75rem 2.5rem;
	}

	.sampleUploadCard {
		margin-bottom: 1.25rem;
		border-radius: 14px;
	}

	.sampleUploadCardHeader {
		padding: 1.15rem;
	}

	.sampleUploadCardBody {
		padding: 1.15rem;
	}

	.sampleUploadSectionHeading {
		align-items: flex-start;
	}

	.sampleUploadSectionIcon {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		font-size: 1rem;
		border-radius: 11px;
	}

	.sampleUploadSectionHeading h2 {
		font-size: 1.08rem;
	}

	.sampleUploadSectionHeading p {
		font-size: 0.8rem;
	}

	.sampleUploadCollapsibleIcon {
		margin-left: 0.35rem;
	}

	.sampleUploadFieldGrid,
	.sampleUploadParameterList {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.sampleUploadDropZone {
		min-height: 280px;
		padding: 2rem 1rem;
	}

	.sampleUploadFormActions {
		flex-direction: column-reverse;
		align-items: stretch;
		padding: 1rem;
	}

	.sampleUploadFormActions .btn {
		width: 100%;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 479.98px) {

	.sampleUploadHeroContent {
		text-align: center;
	}

	.sampleUploadSectionHeading {
		flex-direction: column;
		align-items: flex-start;
	}

	.sampleUploadCollapsibleHeader {
		align-items: flex-start;
	}

	.sampleUploadDropZone {
		min-height: 250px;
	}

	.sampleUploadPrimaryButton,
	.sampleUploadSecondaryButton,
	.sampleUploadCancelButton {
		padding-right: 1rem;
		padding-left: 1rem;
	}

}

/* =========================================================
   UPLOADED FILE LIST PAGE
========================================================= */

.uploadListPage {
	min-height: 100%;
	padding: 1.5rem;
	color: #3f443f;
	background: #f7f4eb;
}

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


/* =========================================================
   MAIN CARD
========================================================= */

.uploadListCard {
	width: 100%;
	max-width: 1800px;
	margin: 2rem auto;
	overflow: hidden;

	background: #ffffff;
	border: 1px solid #dedbd2;
	border-radius: 22px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   PAGE HEADER
========================================================= */

.uploadListHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;

	padding: 2.5rem 3rem;

	background:
		linear-gradient(
			135deg,
			#eef3ef 0%,
			#f8f7f2 100%
		);

	border-bottom: 1px solid #e4e1d8;
}

.uploadListHeaderContent {
	max-width: 700px;
}

.uploadListEyebrow {
	margin-bottom: 0.5rem;

	color: #6d7b70;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.uploadListHeader h1 {
	margin: 0;

	color: #2f4636;
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1.2;
}

.uploadListHeader p {
	margin: 0.8rem 0 0;

	color: #66716a;
	font-size: 1rem;
	line-height: 1.6;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.uploadListHeaderActions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
}

.uploadListPrimaryButton,
.uploadListSecondaryButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;

	min-height: 44px;
	padding: 0.8rem 1.5rem;

	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;

	border-radius: 999px;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.uploadListPrimaryButton {
	color: #ffffff;
	background: #35563d;
	border: 1px solid #35563d;
	box-shadow: 0 7px 15px rgba(53, 86, 61, 0.18);
}

.uploadListPrimaryButton:hover,
.uploadListPrimaryButton:focus {
	color: #ffffff;
	background: #294330;
	border-color: #294330;
	box-shadow: 0 9px 18px rgba(53, 86, 61, 0.22);
	transform: translateY(-2px);
}

.uploadListSecondaryButton {
	color: #35563d;
	background: #ffffff;
	border: 1px solid #cfc9ba;
}

.uploadListSecondaryButton:hover,
.uploadListSecondaryButton:focus {
	color: #35563d;
	background: #f7f5ef;
	border-color: #bdb6a7;
	box-shadow: 0 8px 17px rgba(20, 32, 22, 0.08);
	transform: translateY(-2px);
}


/* =========================================================
   TOOLBAR
========================================================= */

.uploadListToolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;

	padding: 1.4rem 3rem;

	background: #fbfaf7;
	border-bottom: 1px solid #ece8de;
}

.uploadListToolbarText {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.uploadListToolbarText > i {
	flex: 0 0 auto;
	color: #6d8674;
	font-size: 1.25rem;
}

.uploadListToolbarText > div {
	min-width: 0;
}

.uploadListToolbarLabel,
.uploadListToolbarDescription {
	display: block;
}

.uploadListToolbarLabel {
	color: #304736;
	font-size: 0.95rem;
	font-weight: 600;
}

.uploadListToolbarDescription {
	margin-top: 0.15rem;

	color: #7d847f;
	font-size: 0.85rem;
	line-height: 1.4;
}

.uploadListCount {
	flex: 0 0 auto;

	color: #35563d;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	white-space: nowrap;
}

.uploadListCount span {
	margin-left: 0.3rem;

	color: #888888;
	font-size: 0.9rem;
	font-weight: 500;
}


/* =========================================================
   DESKTOP TABLE
========================================================= */

.uploadListDesktop {
	display: block;
	width: 100%;
}

.uploadListTableHeader,
.uploadListTableRow {
	display: grid;
	grid-template-columns:
		minmax(190px, 2fr)
		minmax(145px, 1.25fr)
		minmax(250px, 3fr)
		minmax(280px, 2fr);
	align-items: center;
	column-gap: 1.25rem;
}

.uploadListTableHeader {
	padding: 1.1rem 3rem;

	color: #5f665f;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;

	background: #f4f2eb;
	border-bottom: 1px solid #ddd8ca;
}

.uploadListTableRow {
	min-height: 82px;
	padding: 1.15rem 3rem;

	border-bottom: 1px solid #efede7;

	transition:
		background-color 0.18s ease,
		box-shadow 0.18s ease;
}

.uploadListTableRow:last-child {
	border-bottom: 0;
}

.uploadListTableRow:hover {
	background: #faf9f5;
}


/* =========================================================
   SORTABLE COLUMNS
========================================================= */

.uploadListSortableColumn {
	display: flex;
	align-items: center;
	gap: 0.4rem;

	cursor: pointer;
	user-select: none;

	transition: color 0.18s ease;
}

.uploadListSortableColumn:hover {
	color: #35563d;
}

.uploadListSortableColumn i {
	color: #90978f;
	font-size: 0.7rem;
}


/* =========================================================
   DATE COLUMN
========================================================= */

.uploadListDateColumn {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
}

.uploadListDateIcon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	color: #4f6655;
	background: #edf2ed;
	border-radius: 50%;
}

.uploadListDateText {
	min-width: 0;

	color: #4c554e;
	font-size: 0.88rem;
	line-height: 1.45;
}


/* =========================================================
   STATUS COLUMN
========================================================= */

.uploadListStatusColumn {
	min-width: 0;
}

.uploadListStatusBadge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;

	max-width: 100%;
	padding: 0.45rem 0.95rem;

	color: #49604d;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;

	background: #eef2ef;
	border-radius: 999px;
}

.uploadListStatusDot {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;

	background: currentColor;
	border-radius: 50%;
}

.uploadListStatusComplete {
	color: #2d8a47;
	background: #e8f6ec;
}

.uploadListStatusPending {
	color: #9a7214;
	background: #fff6df;
}

.uploadListStatusError {
	color: #b93d3d;
	background: #fdeaea;
}


/* =========================================================
   FILE COLUMN
========================================================= */

.uploadListFileColumn {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
}

.uploadListFileIcon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;

	width: 42px;
	height: 42px;

	color: #4f6655;
	background: #edf2ed;
	border-radius: 50%;
}

.uploadListFileDetails {
	min-width: 0;
}

.uploadListFileName {
	overflow: hidden;

	color: #2f4636;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.uploadListFileMeta {
	margin-top: 0.2rem;

	color: #8a8a8a;
	font-size: 0.78rem;
}


/* =========================================================
   ACTIONS COLUMN
========================================================= */

.uploadListActionsColumn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	min-width: 0;
}

.uploadListActionButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;

	min-height: 38px;
	padding: 0.55rem 1rem;

	font-size: 0.83rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;

	border-radius: 999px;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.uploadListEditButton {
	color: #35563d;
	background: #edf3ee;
	border: 1px solid #d4ddd4;
}

.uploadListEditButton:hover,
.uploadListEditButton:focus {
	color: #294330;
	background: #e2ece4;
	border-color: #bdcdbf;
	transform: translateY(-1px);
}

.uploadListDownloadButton {
	color: #ffffff;
	background: #35563d;
	border: 1px solid #35563d;
}

.uploadListDownloadButton:hover,
.uploadListDownloadButton:focus {
	color: #ffffff;
	background: #294330;
	border-color: #294330;
	transform: translateY(-1px);
}

.uploadListDeleteButton {
	color: #b73b3b;
	background: #fff0f0;
	border: 1px solid #f3cfcf;
}

.uploadListDeleteButton:hover,
.uploadListDeleteButton:focus {
	color: #972e2e;
	background: #fde4e4;
	border-color: #e7b5b5;
	transform: translateY(-1px);
}


/* =========================================================
   MOBILE CARDS
========================================================= */

.uploadListMobile {
	display: none;
}

.uploadListMobileCard {
	padding: 1.5rem;

	background: #ffffff;
	border: 1px solid #e5e1d7;
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(59, 57, 49, 0.05);
}

.uploadListMobileCard + .uploadListMobileCard {
	margin-top: 1rem;
}

.uploadListMobileCardHeader {
	display: flex;
	align-items: center;
	gap: 1rem;

	margin-bottom: 1rem;
}

.uploadListMobileFileHeading {
	min-width: 0;
}

.uploadListMobileDate {
	margin-top: 0.35rem;

	color: #888888;
	font-size: 0.82rem;
	line-height: 1.4;
}

.uploadListMobileStatus {
	margin-bottom: 1rem;
}

.uploadListMobileLabel {
	display: block;
	margin-bottom: 0.5rem;

	color: #888888;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.uploadListMobileActions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}


/* =========================================================
   EMPTY LIST
========================================================= */

.uploadListDesktop:empty,
.uploadListMobile:empty {
	display: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

	.uploadListTableHeader,
	.uploadListTableRow {
		grid-template-columns:
			minmax(170px, 1.7fr)
			minmax(135px, 1.15fr)
			minmax(220px, 2.4fr)
			minmax(250px, 1.8fr);
	}

	.uploadListHeader,
	.uploadListToolbar,
	.uploadListTableHeader,
	.uploadListTableRow {
		padding-right: 2rem;
		padding-left: 2rem;
	}

}


/* =========================================================
   MOBILE / SMALL TABLET
========================================================= */

@media (max-width: 991.98px) {

	.uploadListPage {
		padding: 1rem;
	}

	.uploadListCard {
		margin: 1rem auto;
		border-radius: 18px;
	}

	.uploadListHeader {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;

		padding: 2rem;
	}

	.uploadListHeaderContent {
		max-width: none;
	}

	.uploadListHeaderActions {
		justify-content: flex-start;
		width: 100%;
	}

	.uploadListToolbar {
		align-items: flex-start;
		padding: 1.25rem 2rem;
	}

	.uploadListDesktop {
		display: none;
	}

	.uploadListMobile {
		display: block;
		padding: 1.5rem;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

	.uploadListPage {
		padding: 0.65rem;
	}

	.uploadListCard {
		margin: 0.65rem auto;
		border-radius: 14px;
	}

	.uploadListHeader {
		padding: 1.5rem 1.15rem;
	}

	.uploadListHeader h1 {
		font-size: 1.75rem;
	}

	.uploadListHeader p {
		font-size: 0.9rem;
	}

	.uploadListHeaderActions {
		flex-direction: column;
		align-items: stretch;
	}

	.uploadListHeaderActions .btn {
		width: 100%;
	}

	.uploadListToolbar {
		flex-direction: column;
		gap: 1rem;
		padding: 1.1rem 1.15rem;
	}

	.uploadListCount {
		font-size: 1.65rem;
	}

	.uploadListMobile {
		padding: 1rem;
	}

	.uploadListMobileCard {
		padding: 1.15rem;
		border-radius: 13px;
	}

	.uploadListMobileActions {
		flex-direction: column;
		align-items: stretch;
	}

	.uploadListMobileActions .btn {
		width: 100%;
	}

}

/* =========================================================
   UPLOAD SAMPLE FILE
   PRO-ONLY SOIL / TISSUE MAPPING
   THIS COMPONENT ONLY
========================================================= */


/* Crown beside Soil Analysis / Tissue Analysis headers */

:host .sampleUploadSectionHeading h2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.42rem;
}

:host .sampleUploadPremiumCrown {
	color: #a47c2b;
	font-size: 0.78rem;
	line-height: 1;
}


/* =========================================================
   LOCKED ANALYSIS SECTION
========================================================= */

:host .sampleUploadPremiumAnalysisBody {
	position: relative;
}

:host .sampleUploadPremiumAnalysisLocked {
	cursor: help;
	user-select: none;
}


/* Grey out the individual mapping fields */

:host
.sampleUploadPremiumAnalysisLocked
.sampleUploadParameterRow {
	opacity: 0.48;
	filter: grayscale(0.7);
}


/* Disabled dropdowns / inputs */

:host
.sampleUploadPremiumAnalysisLocked
.form-control,
:host
.sampleUploadPremiumAnalysisLocked
.form-select {
	color: #7a817b;
	background: #f2f1ed;
	border-color: #d8d5ce;

	pointer-events: none;
}


/* Muted labels and definition text */

:host
.sampleUploadPremiumAnalysisLocked
.sampleUploadField label,
:host
.sampleUploadPremiumAnalysisLocked
.sampleUploadFieldHelp {
	color: #8a908b;
}


/* =========================================================
   PRO POPOVER

   ngbPopover uses container="body", so ::ng-deep is needed
   for this component stylesheet to reach the generated
   Bootstrap popover.
========================================================= */

:host ::ng-deep .sampleUploadPremiumPopover.popover {
	min-width: 230px;
	max-width: 280px;

	overflow: hidden;

	background: #fffdf9;

	border: 1px solid rgba(122, 44, 55, 0.12);
	border-radius: 14px;

	box-shadow:
		0 14px 34px rgba(40, 28, 31, 0.16),
		0 3px 10px rgba(40, 28, 31, 0.08);
}


/* Popover title */

:host
::ng-deep
.sampleUploadPremiumPopover
.popover-header {
	margin: 0;
	padding: 0.8rem 1rem 0.45rem;

	color: #7a2c37;
	background: transparent;

	border: 0;

	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
}


/* Crown in popover title */

:host
::ng-deep
.sampleUploadPremiumPopover
.popover-header::before {
	margin-right: 0.4rem;

	color: #a47c2b;

	font-family:
		"Font Awesome 6 Free",
		"Font Awesome 5 Free",
		FontAwesome;

	font-weight: 900;

	content: "\f521";
}


/* Popover message */

:host
::ng-deep
.sampleUploadPremiumPopover
.popover-body {
	padding: 0.35rem 1rem 0.95rem;

	color: #59605a;
	background: transparent;

	font-size: 0.8rem;
	line-height: 1.45;
}


/* =========================================================
   POPOVER ARROW
========================================================= */

:host
::ng-deep
.sampleUploadPremiumPopover
.popover-arrow::before {
	border-top-color: rgba(122, 44, 55, 0.12);
}

:host
::ng-deep
.sampleUploadPremiumPopover
.popover-arrow::after {
	border-top-color: #fffdf9;
}


/* Bottom placement */

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-bottom
.popover-arrow::before,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="bottom"]
.popover-arrow::before {
	border-top-color: transparent;
	border-bottom-color: rgba(122, 44, 55, 0.12);
}

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-bottom
.popover-arrow::after,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="bottom"]
.popover-arrow::after {
	border-top-color: transparent;
	border-bottom-color: #fffdf9;
}


/* Left placement */

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-start
.popover-arrow::before,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="left"]
.popover-arrow::before {
	border-top-color: transparent;
	border-left-color: rgba(122, 44, 55, 0.12);
}

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-start
.popover-arrow::after,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="left"]
.popover-arrow::after {
	border-top-color: transparent;
	border-left-color: #fffdf9;
}


/* Right placement */

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-end
.popover-arrow::before,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="right"]
.popover-arrow::before {
	border-top-color: transparent;
	border-right-color: rgba(122, 44, 55, 0.12);
}

:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-end
.popover-arrow::after,
:host
::ng-deep
.sampleUploadPremiumPopover.bs-popover-auto[data-popper-placement^="right"]
.popover-arrow::after {
	border-top-color: transparent;
	border-right-color: #fffdf9;
}