@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* # base styles */

html:has(.admin-dashboard),
body:has(.admin-dashboard) {
	height: 100% !important;
}

body:has(.admin-dashboard) {
	margin: 0;
	padding: 0;
	font-family: 'DM Sans', sans-serif;
}

.admin-dashboard__container-main {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.admin-dashboard * {
	box-sizing: border-box;
}

.admin-dashboard {
	display: flex;
	width: 100%;
	height: 100%;
}

/* # nav bar */

.admin-dashboard__nav {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 61px;
	background: rgba(239, 233, 232, 1);
	container-type: inline-size;
	container-name: admin-dashboard-nav;
	transition: width 200ms ease-in-out;

	&.open {
		width: 350px;
	}

	& ul {
		list-style-type: none;
		margin: 0;
		padding: 0;

		& li {
			position: relative;
		}
	}

	& .accordion-content {
		position: absolute;
		width: max-content;
		top: 0;
		left: -200%;
		transform: translateX(-100%);
		transition: all 200ms ease-in-out;
		z-index: -5;

		&.open {
			left: 100%;
			transform: translateX(0%);
		}
	}

	&:after {
		content: '';
		height: 100%;
		width: 100%;
		background: rgba(239, 233, 232, 1);
		position: absolute;
		z-index: -1;
	}
}

/* ## buttons & interactions */

/* ### all buttons */

.dashboard__button {
	display: flex;
	align-items: center;
	gap: 15px;
	padding-left: 19px;
	height: 46px;
	width: 100%;
	border: none;
	border-radius: 0;
	color: #233235;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
	text-wrap: nowrap;
	position: relative;

	& svg {
		width: 21px;
		height: 20px;
		position: absolute;
	}

	/* ### main buttons */

	&.primary {
		background-color: #efe9e8;
		overflow: hidden;
		z-index: 50;
		/* position: relative; */

		& span {
			margin-left: 41px;
			text-wrap: nowrap;
			opacity: 0;
		}

		&.active {
			background-color: rgba(184, 209, 209, 1);
			color: #233235;

			/* adds border to active class */
			&:before {
				content: '';
				width: 6px;
				height: 100%;
				background-color: rgba(0, 125, 122, 1);
				position: absolute;
				left: 0;
			}

			/* active arrow */
			&:after {
				content: '';
				display: block;
				position: absolute;
				right: 0;
				border-width: 14px;
				border-style: solid;
				border-right-color: #fff;
				border-bottom-color: transparent;
				border-left-color: transparent;
				border-top-color: transparent;
				z-index: 100;
			}
		}

		&:hover:not(.active) {
			background-color: rgba(251, 245, 242, 1);

			/* applies left border */
			&:before {
				content: '';
				width: 6px;
				height: 100%;
				background-color: #f1d7cc;
				position: absolute;
				left: 0;
			}
		}
	}

	/* ### accordion buttons */

	&.secondary {
		background-color: rgba(229, 241, 241, 1);

		&.active {
			background-color: rgba(211, 234, 234, 1);
			font-weight: 700;

			/* adds active border to active class */
			&:before {
				content: '';
				width: 6px;
				height: 100%;
				background-color: rgba(184, 209, 209, 1);
				position: absolute;
				left: 0;
			}
		}

		&:hover:before {
			content: '';
			width: 6px;
			height: 100%;
			background-color: rgba(184, 209, 209, 1);
			position: absolute;
			left: 0;
		}
	}

	&:hover {
		color: #233235;
	}

	&:focus {
		color: #233235;
		outline: none;
	}
}

/* ### resize button */

.admin-dashboard__nav-resize-container {
	display: flex;
	justify-content: center;
	margin-top: auto;
	margin-bottom: 20px;

	& .admin-dashboard__nav-resize-button {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 2px solid rgba(104, 104, 104, 1);
		border-radius: 50%;
		height: 35px;
		width: 35px;
		color: #233235;
		cursor: pointer;
		transition: all 100ms ease-in-out;

		& svg {
			width: 21px;
			height: 18px;
			transform: rotate(180deg);
			transition: transform 100ms ease-in-out;
		}

		&:hover {
			background: rgba(241, 215, 204, 1);
			border-color: rgba(241, 215, 204, 1);
			color: #000;
		}

		&:focus {
			outline: 2px solid rgba(0, 125, 122, 1);
		}
	}
}

/* # main content */

.admin-dashboard__content {
	height: 100%;
	flex: 1;
	padding: 30px;
	background: #fff;
	overflow-y: auto;

	/* ## tab content */
	& .tabcontent {
		display: none;
		padding: 0;

		&.active {
			display: block;
		}
	}
}

/* # container queries */

@container admin-dashboard-nav (width > 61px) {
	.admin-dashboard__nav {
		& .accordion-content {
			max-height: 0;
			width: 100%;
			position: static;
			left: auto;
			top: auto;
			transform: initial;
			transition: max-height 400ms ease-in-out;

			&.active {
				max-height: 500px;
			}
		}

		& ul li {
			overflow: hidden;
		}
	}

	.dashboard__button {
		&.primary {
			overflow: visible;

			& span {
				opacity: 1;
			}
		}
	}

	.admin-dashboard__nav-resize-container {
		justify-content: flex-end;
		padding-right: 20px;

		& .admin-dashboard__nav-resize-button svg {
			transform: rotate(0deg);
		}
	}
}

/* # media queries */

@media screen and (min-width: 768px) {
	.admin-dashboard__content {
		padding: 50px;
	}
}

/* # table status indicators */

.adminDB-buyer-unfulfilled-status {
	color: rgba(220, 93, 1, 1) !important;
	font-weight: 700 !important;
}

.adminDB-buyer-pending-status {
	font-weight: 700 !important;
}

.adminDB-buyer-partial-status {
	color: rgba(220, 159, 1, 1) !important;
	font-weight: 700 !important;
}

.adminDB-buyer-fulfilled-status {
	color: rgba(0, 94, 92, 1) !important;
	font-weight: 700 !important;
}

.adminDB-buyer-complete-status {
	color: rgba(0, 94, 92, 1) !important;
	font-weight: 700 !important;
}

.adminDB-balance-refund,
.adminDB-balance-to-charge {
	color: #c0392b !important;
	font-weight: 700 !important;
	font-size: 0.85em;
}

.adminDB-balance-refunded {
	color: #27ae60 !important;
	font-weight: 700 !important;
	font-size: 0.85em;
}

.adminDB-balance-partial-refund {
	color: #e67e22 !important;
	font-weight: 700 !important;
	font-size: 0.85em;
}

/* # pagination */

.admindb-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.admindb-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	background: #fff;
	color: #233235;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
	user-select: none;
}

.admindb-pagination__btn:hover:not(.admindb-pagination__btn--active):not(.admindb-pagination__btn--disabled) {
	background: rgba(229, 241, 241, 1);
	border-color: rgba(184, 209, 209, 1);
}

.admindb-pagination__btn--active {
	background: rgba(0, 125, 122, 1);
	color: #fff;
	border-color: rgba(0, 125, 122, 1);
	cursor: default;
}

.admindb-pagination__btn--disabled {
	color: #c0c0c0;
	border-color: #e8e8e8;
	cursor: default;
	background: #f9f9f9;
}

.admindb-pagination__ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	font-size: 14px;
	color: #888;
	user-select: none;
}

.admindb-pagination__per-page {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 16px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #233235;
}

.admindb-pagination__per-page select {
	padding: 6px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	font-family: 'DM Sans', sans-serif;
	font-size: 14px;
	color: #233235;
	background: #fff;
	cursor: pointer;
}

.admindb-pagination__per-page select:focus {
	outline: 2px solid rgba(0, 125, 122, 0.4);
	border-color: rgba(0, 125, 122, 1);
}

/* pagination loading state */

.admindb-pagination--loading {
	pointer-events: none;
	opacity: 0.4;
}