/** biome-ignore-all lint/style/noDescendingSpecificity: necessary for component styling */
/** biome-ignore-all lint/complexity/noImportantStyles: necessary for component styling */
:root {
	--default-font-family: Inter, system-ui, sans-serif;
	--default-transition-duration: none;
	--radius: 0.5rem;
	--background: oklch(1 0 0);
	--foreground: oklch(0.141 0.005 285.823);
	--card: var(--background);
	--card-foreground: var(--foreground);
	--card-outer: var(--sidebar);
	--popover: var(--background);
	--popover-foreground: var(--foreground);
	/* emerald-400 */
	--primary: oklch(76.5% 0.177 163.223);
	/* emerald-700 */
	--primary-contrast: oklch(50.8% 0.118 165.612);
	--primary-foreground: var(--foreground);
	/* violet-700 */
	--secondary: oklch(49.1% 0.27 292.581);
	--secondary-contrast: oklch(49.1% 0.27 292.581);
	--secondary-foreground: var(--background);
	/* cyan-500 */
	--avatar: oklch(71.5% 0.143 215.221);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.4448 0.0053 134.16);
	--muted-filter: invert(0.4);
	--muted-filter-contrast: none;
	--accent: oklch(0.967 0.001 286.375);
	--accent-foreground: oklch(0.21 0.006 285.885);
	--destructive: oklch(0.704 0.191 22.216);
	--tooltip: var(--secondary);
	--tooltip-foreground: var(--secondary-foreground);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: var(--primary);
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: var(--foreground);
	--sidebar-primary: var(--primary);
	--sidebar-primary-foreground: var(--primary-foreground);
	--sidebar-accent: oklch(92.3% 0.003 48.717);
	--sidebar-accent-foreground: var(--accent-foreground);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.841 0.238 128.85);
}

@media (prefers-color-scheme: dark) {
	:root {
		--background: oklch(14.7% 0.004 49.25);
		--foreground: oklch(0.985 0 0);
		--card: oklch(0.21 0.006 285.885);
		--card-foreground: oklch(0.985 0 0);
		--card-outer: var(--background);
		--popover: oklch(0.21 0.006 285.885);
		--popover-foreground: oklch(0.985 0 0);
		--primary-contrast: var(--primary);
		--primary-foreground: var(--background);
		/* violet-400 */
		--secondary-contrast: oklch(70.2% 0.183 293.541);
		--secondary-foreground: var(--foreground);
		--muted: oklch(0.274 0.006 286.033);
		--muted-foreground: oklch(0.705 0.015 286.067);
		--muted-filter: invert(0.5);
		--muted-filter-contrast: brightness(1.3);
		--accent: oklch(0.274 0.006 286.033);
		--accent-foreground: oklch(0.985 0 0);
		--destructive: oklch(0.704 0.191 22.216);
		--border: oklch(1 0 0 / 10%);
		--input: oklch(1 0 0 / 15%);
		--ring: var(--primary);
		--sidebar: oklch(0.21 0.006 285.885);
		--sidebar-foreground: var(--foreground);
		--sidebar-primary: var(--primary);
		--sidebar-primary-foreground: var(--primary-foreground);
		--sidebar-accent: var(--accent);
		--sidebar-accent-foreground: var(--accent-foreground);
		--sidebar-border: oklch(1 0 0 / 10%);
		--sidebar-ring: oklch(0.405 0.101 131.063);
	}

	.icon:not(.brand, .color) {
		filter: invert(1);
	}

	.badge,
	.btn,
	.btn-icon,
	.btn-icon-destructive,
	.logo {
		.icon {
			filter: none;
		}
	}
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("/static/fonts/Inter-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("/static/fonts/Inter-Italic-Variable.woff2") format("woff2");
}

@view-transition {
	navigation: auto;
}

.show-sm-up {
	display: none;
}

@container (min-width: 480px) {
	.show-sm-up {
		display: revert;
	}
}


.badge-outline {
	a {
		&:hover {
			@media (hover: hover) {
				background-color: inherit;
			}
		}
	}
}

.flex-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--spacing) * 2);
}

input[type="radio"]:checked::before {
	width: calc(var(--spacing) * 2.5);
	height: calc(var(--spacing) * 2.5);
}

.icon {
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
	flex-shrink: 0;
	max-width: none;
}

.badge-secondary,
.btn-secondary,
.btn-lg-secondary {
	.icon {
		filter: invert(1);
	}
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-link,
.btn-destructive {
	&:has(> img) {
		padding-inline: calc(var(--spacing) * 3);
	}
}

.btn-lg,
.btn-lg-primary,
.btn-lg-secondary,
.btn-lg-outline,
.btn-lg-ghost,
.btn-lg-link,
.btn-lg-destructive {
	&:has(> img) {
		padding-inline: calc(var(--spacing) * 4);
	}
}

p {
	a {
		color: var(--primary-contrast);
		text-decoration: none;
		text-underline-offset: auto;

		&:hover {
			text-decoration: underline;
		}
	}
}

code {
	border-radius: var(--radius-lg);
	background-color: var(--color-muted);
	padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2)
}

b,
strong {
	font-weight: var(--font-weight-semibold)
}

th,
td {
	&.thin {
		width: 1px;
	}
}

aside {
	>nav {
		header {
			.icon {
				width: calc(var(--spacing) * 5);
				height: calc(var(--spacing) * 5);
			}
		}

		.select {
			margin: calc(var(--spacing) * 4);

			>button {
				display: flex;
				justify-content: space-between;
				width: 100%;
				background-color: var(--popover);

				&:hover,
				&:focus {
					background-color: var(--accent);
				}
			}

			[data-popover] {
				z-index: 100;

				.scrollbar {
					max-height: calc(var(--spacing) * 96);

					[role="group"] {
						display: flex;
						flex-direction: column;
						gap: calc(var(--spacing) * 1);

						a[role="option"] {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							gap: calc(var(--spacing) * 2.5);
							text-wrap: auto;
							cursor: pointer;
							border: 1px solid var(--border);
							padding: calc(var(--spacing) * 2.5);

							&[aria-hidden="true"] {
								display: none;
							}

							button {
								background-color: transparent;

								&:hover,
								&:focus {
									background-color: color-mix(in oklab,
											var(--destructive) 10%,
											transparent);

									.icon {
										color: var(--destructive);
									}
								}
							}

							>div {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								gap: var(--spacing);

								>div {
									display: flex;
									flex-direction: column;
									color: var(--muted-foreground);
									font-size: var(--text-xs);
									letter-spacing: var(--tracking-wide);

									>div {
										display: flex;
										flex-direction: column;
										gap: 0;
									}
								}
							}
						}
					}
				}
			}
		}

		>section {
			>div {
				>ul {
					>li {
						>a {
							height: calc(var(--spacing) * 9);

							&[aria-current="page"] {
								background-color: var(--sidebar-primary);
								color: var(--sidebar-primary-foreground);

								.icon {
									filter: none;
								}
							}
						}

						>details {
							>summary {
								height: calc(var(--spacing) * 9);

								&::after {
									background-color: var(--sidebar-foreground);
								}
							}
						}
					}
				}
			}
		}

		>footer {
			>.dropdown-menu {
				.avatar-menu-item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					gap: calc(var(--spacing) * 2);
					padding: calc(var(--spacing) * 2);
					height: calc(var(--spacing) * 12);
					width: 100%;

					>img,
					>svg {
						&:first-child {
							width: calc(var(--spacing) * 8);
							height: calc(var(--spacing) * 8);
							border-radius: var(--radius);
							flex-shrink: 0;
						}
					}

					>div {
						flex: 1;
						display: flex;
						flex-direction: column;
						text-align: left;
						font-size: var(--text-sm);
						line-height: var(--text-xs--line-height);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: 500;

						>small {
							color: var(--muted-foreground);
							font-size: var(--text-xs);
						}
					}
				}
			}
		}
	}
}

main {
	#maintenance {
		background: url(../images/maintenance.svg) repeat-x 21px 0, #000;
		min-height: 4px;
		width: 100%;
	}

	>header {
		background-color: var(--background);
		position: sticky;
		inset-inline: 0;
		inset-block-start: 0;
		isolation: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
		border-bottom: 1px solid var(--border);
		z-index: 20;
		height: calc(var(--spacing) * 14);
		width: 100%;
		padding-inline: calc(var(--spacing) * 4);

		@media (min-width: 768px) {
			padding-right: calc(var(--spacing) * 8);
		}

		@media (min-width: 1280px) {
			padding-right: calc(var(--spacing) * 12);
		}

		>div {
			display: flex;
			align-items: center;
			gap: calc(var(--spacing) * 2);

			>button.btn-sm-icon-ghost {
				width: calc(var(--spacing) * 7);
				height: calc(var(--spacing) * 7);
				margin-left: calc(var(--spacing) * -1.5);
			}

			>ol {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 0 calc(var(--spacing) * 1.5);
				font-size: var(--text-xs);
				color: var(--muted-foreground);
				word-break: break-word;

				@media (min-width: 640px) {
					gap: calc(var(--spacing) * 2);
				}

				>li {
					display: inline-flex;
					align-items: center;
					gap: 0 calc(var(--spacing) * 1.5);

					>a {
						&:hover {
							text-decoration: underline;
						}
					}

					>.icon:not(.brand, .color) {
						width: calc(var(--spacing) * 3.5);
						height: calc(var(--spacing) * 3.5);
						filter: var(--muted-filter);
					}
				}
			}
		}

		&:has(div:nth-of-type(2)) {
			>div {
				>ol {
					display: none;

					@media (min-width: 640px) {
						display: flex;
					}
				}
			}
		}
	}

	>article {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 8);
		padding: calc(var(--spacing) * 4);
		container-type: inline-size;

		@media (min-width: 768px) {
			padding: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
		}

		@media (min-width: 1280px) {
			padding: calc(var(--spacing) * 10) calc(var(--spacing) * 12);
		}

		h1 {
			font-size: var(--text-2xl);
			font-weight: var(--font-weight-semibold);
		}

		.cards {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: calc(var(--spacing) * 5);
			container-type: inline-size;

			.card-group,
			.card {
				width: 100%;

				@container (min-width: 834px) {
					width: 49%;
				}
			}

			.card-group {
				display: flex;
				flex-direction: column;
				gap: calc(var(--spacing) * 5);

				.card {
					width: 100%;
				}
			}

			.card {
				&.empty {
					background-color: transparent;
					border: 1px dashed var(--border);
					border-radius: var(--radius);
					box-shadow: none;
				}

				&.feature {
					h2 {
						font-size: var(--text-2xl);
						font-weight: var(--font-weight-semibold);
					}

					a {
						font-size: var(--text-base);
					}
				}
			}

			&.full {
				width: 100%;

				.card {
					width: 100%;
				}
			}

			&.stacked {
				flex-direction: column;
				gap: calc(var(--spacing) * 8);

				.card {
					width: 100%;
					max-width: 800px;
				}

				&.half {
					width: 49%;
				}
			}

			&.pricing {
				gap: calc(var(--spacing) * 6);

				.card {
					flex: 1 1 32%;

					section {
						flex: 1;

						.price {

							s,
							strong {
								font-size: var(--text-3xl);
								font-weight: var(--font-weight-bold);
							}

							s,
							span {
								color: var(--muted-foreground);
							}
						}

						p,
						small {
							color: var(--muted-foreground);
						}

						small {
							font-size: var(--text-sm);
						}

						.pricing-includes.coming-soon {
							font-size: var(--text-sm);
							font-weight: var(--font-weight-medium);
							color: var(--muted-foreground);
							margin: 0;

							a {
								color: var(--primary-contrast);
								text-decoration: underline;

								&:hover {
									text-decoration: none;
								}
							}
						}
					}

					footer {
						a {
							flex: 1;
							text-align: center;
						}
					}
				}
			}
		}

		.card {
			padding-block: calc(var(--spacing) * 5);

			&.outer {
				background-color: var(--card-outer);

				>header {

					h2,
					h3 {
						font-weight: var(--font-weight-normal);
						line-height: normal;
					}
				}
			}

			h2,
			h3 {
				display: flex;
				align-items: center;
				gap: calc(var(--spacing) * 2);
				font-size: var(--text-xl);
				font-weight: var(--font-weight-medium);

				a:hover {
					text-decoration: underline;
				}

				.icon {
					width: calc(var(--spacing) * 5);
					height: calc(var(--spacing) * 5);
					margin-top: 1px;
				}
			}

			header,
			footer {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				gap: calc(var(--spacing) * 2);
			}

			header {
				border-bottom: 1px solid var(--border);
				padding-bottom: calc(var(--spacing) * 5);

				.search {
					margin-left: calc(var(--spacing) * 4);
				}
			}

			footer {
				border-top: 1px solid var(--border);
				padding-top: calc(var(--spacing) * 5);
			}

			section {
				display: flex;
				flex-direction: column;
				gap: calc(var(--spacing) * 4);
			}

			.badge,
			.badge-secondary,
			.badge-outline {
				font-size: var(--text-base);
				font-weight: var(--font-weight-normal);
			}

			.enum {
				display: flex;
				flex-wrap: wrap;
				gap: calc(var(--spacing) * 2);

				.badge,
				.badge-secondary,
				.badge-outline {
					padding-block: calc(var(--spacing) * 1);
					padding-inline: calc(var(--spacing) * 2.5);
					overflow: initial;

					a:hover {
						text-decoration: underline;
					}

					button {
						cursor: pointer;
					}
				}

				.value {
					font-weight: var(--font-weight-normal);
				}
			}
		}

		.info {
			display: flex;
			flex-wrap: wrap;
			gap: calc(var(--spacing) * 2) calc(var(--spacing) * 6);
			color: var(--muted-foreground);
			font-size: var(--text-sm);
			font-weight: var(--font-weight-medium);

			>div {
				display: flex;
				align-items: center;
				gap: calc(var(--spacing) * 1);
				width: fit-content;

				.icon {
					width: calc(var(--spacing) * 5);
					height: calc(var(--spacing) * 5);

					&:not(.brand, .color) {
						filter: var(--muted-filter);
					}
				}
			}

			.field label {
				font-weight: var(--font-weight-normal);
			}
		}

		.column {
			display: flex;
			flex-direction: column;
			gap: calc(var(--spacing) * 3);
		}

		.row {
			display: flex;
			align-items: center;
			gap: calc(var(--spacing) * 3);
		}

		.alert,
		.alert-destructive {
			width: fit-content;

			&:has(> .icon) {
				display: flex;
				gap: calc(var(--spacing) * 3);
			}

			h4 {
				font-weight: var(--font-weight-medium);
			}

			code {
				color: var(--foreground);
			}

			>.icon {
				--tw-translate-y: calc(var(--spacing) * 0.5);
				translate: var(--tw-translate-x) var(--tw-translate-y);
			}
		}

		header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: calc(var(--spacing) * 2);
		}

		.summary {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: calc(var(--spacing) * 8);
			width: 100%;
			margin-bottom: calc(var(--spacing) * 2);

			section {
				display: flex;
				flex-direction: column;
				gap: calc(var(--spacing) * 3);

				&.weight-buttons {
					padding-right: 0;
					margin-right: calc(var(--spacing) * -8);
					gap: calc(var(--spacing) * 1);

					.icon {
						width: calc(var(--spacing) * 6);
						height: calc(var(--spacing) * 6);
					}
				}

				&.primary {
					flex: 1;
				}

				&.secondary {
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
				}

				h1,
				h2,
				h3 {
					display: flex;
					align-items: center;
					gap: calc(var(--spacing) * 3);

					a {
						&:hover {
							text-decoration: underline;
						}
					}

					.icon {
						width: calc(var(--spacing) * 6);
						height: calc(var(--spacing) * 6);
						flex-shrink: 0;
						margin-top: 1px;
					}
				}

				label {
					font-size: var(--text-base);
				}

				.stats {
					flex-direction: row;

					.col {
						align-items: flex-end;
					}

					.value {
						font-size: var(--text-xl);
						font-weight: var(--font-weight-semibold);
					}
				}
			}
		}
	}
}

#firm-view {
	header {
		.button-group {
			gap: calc(var(--spacing) * 2);
		}
	}

	section {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
	}
}

#account,
#user {
	.summary {
		h1 {

			img,
			svg {
				width: calc(var(--spacing) * 10);
				height: calc(var(--spacing) * 10);
				border-radius: var(--radius);
				flex-shrink: 0;
			}
		}
	}
}

#users {
	.title {

		img,
		svg {
			width: calc(var(--spacing) * 10);
			height: calc(var(--spacing) * 10);
			border-radius: var(--radius);
			flex-shrink: 0;
		}
	}
}

.button-group {
	isolation: auto;

	>.btn {
		border-right: 1px solid var(--background);
	}
}

[role="option"] {
	&:has([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]) {
		padding: 0;
	}
}

[role="menuitem"] {
	text-align: left;
}

.button-group {
	&:not([data-orientation="vertical"]) {
		> :first-child {
			border-left-width: 1px;
		}
	}
}

.search {
	position: relative;
	flex-grow: 1;

	input {
		padding-inline: calc(var(--spacing) * 8);
	}

	div {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: var(--muted-foreground);

		&:first-child {
			left: calc(var(--spacing) * 2);
			pointer-events: none;
		}

		&:last-child {
			right: calc(var(--spacing) * 2);
			cursor: pointer;
		}

		>.icon {
			width: calc(var(--spacing) * 4);
			height: calc(var(--spacing) * 4);
			filter: var(--muted-filter);
		}
	}
}

.datatable {
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius);

	>div {
		overflow-x: auto;
		overflow-y: hidden;

		table.table {
			thead {
				tr {
					&:hover {
						background-color: transparent;
					}

					th {
						font-weight: var(--font-weight-medium);
						padding-block: calc(var(--spacing) * 2);
						white-space: wrap;

						button {
							display: flex;
							align-items: center;
							gap: calc(var(--spacing) * 2);
							text-align: left;
							cursor: pointer;

							span {
								white-space: nowrap;
							}

							.icon {
								flex-shrink: 0;
							}
						}
					}
				}
			}

			tbody {
				tr {

					&:hover,
					&:hover td {
						background-color: var(--sidebar);
					}

					&.empty {
						&:hover {
							background-color: transparent;
						}

						td {
							color: var(--muted-foreground);
							text-align: center;
							height: calc(var(--spacing) * 24);
						}
					}

					&[data-state="selected"] {
						background-color: var(--muted);
					}

					td {
						&:first-of-type {
							font-weight: var(--font-weight-medium);
						}

						&.numeric {
							text-align: right;
						}

						.value {
							width: fit-content;

							&.numeric {
								display: inline-block;
								font-variant-numeric: tabular-nums;
							}
						}
					}
				}
			}

			tr {
				transition: background-color 0;
				border-bottom: 1px solid var(--border);

				th,
				td {
					padding: calc(var(--spacing) * 3);
					vertical-align: middle;

					.icon:not(.brand, .color) {
						width: calc(var(--spacing) * 4);
						height: calc(var(--spacing) * 4);
						filter: var(--muted-filter);
					}
				}

				td {
					&:last-of-type {
						position: sticky;
						right: 0;
						z-index: 1;
						width: calc(var(--spacing) * 1);
						background-color: var(--background);

						&:has([aria-expanded="true"]) {
							z-index: 10;
						}

						button {
							padding-inline: calc(var(--spacing) * 2);
						}
					}

					&.title {
						max-width: calc(var(--spacing) * 95);

						>div {
							display: flex;
							align-items: center;
							gap: calc(var(--spacing) * 2);

							>img:first-child {
								width: calc(var(--spacing) * 8);
								height: calc(var(--spacing) * 8);
								border-radius: var(--radius);
								flex-shrink: 0;
							}

							>a {
								&:first-child {
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								&:hover {
									text-decoration: underline;
								}
							}
						}
					}

					.enum {
						display: flex;
						flex-wrap: wrap;
						gap: calc(var(--spacing) * 1);

						&.multiple {
							cursor: pointer;
						}
					}
				}
			}
		}
	}

	nav[aria-label="pagination"] {
		display: flex;
		align-items: center;
		gap: calc(var(--spacing) * 2);
		position: sticky;
		z-index: 10;
		inset-block-end: 0;
		background-color: var(--muted);
		padding: calc(var(--spacing) * 2);
		border-radius: 0 0 var(--radius) var(--radius);

		&.stuck {
			border-radius: 0;
		}
	}

	.spinner {
		display: none;

		img {
			width: calc(var(--spacing) * 6);
			height: calc(var(--spacing) * 6);
		}
	}

	&.loading {
		&::before {
			content: "";
			position: absolute;
			inset: 0;
			background-color: color-mix(in oklab, var(--background) 75%, transparent);
			z-index: 15;
			border-radius: var(--radius);
		}

		.spinner {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 50;
		}
	}
}

.dropdown-menu {
	.fixed-width {
		width: calc(var(--spacing) * 96);
	}

	[data-popover] {
		header {
			flex-wrap: nowrap;
			padding-block: 0 !important;

			.icon:not(.brand, .color) {
				filter: var(--muted-filter);
			}
		}

		.scrollbar {
			max-height: calc(var(--spacing) * 128);
		}

		&[role="menu"] [role="heading"] {
			font-size: var(--text-xs);
			line-height: var(--tw-leading, var(--text-xs--line-height));
			color: var(--muted-foreground);
		}

		&[role="group"] [role="group"] [role="heading"] {
			padding-left: calc(var(--spacing) * 5);
		}

		[role="menuitem"],
		[role="menuitemcheckbox"],
		[role="menuitemradio"],
		[role="option"] {
			.icon:last-child:not(.brand, .color) {
				filter: var(--muted-filter);
			}
		}
	}
}

[data-tooltip] {
	&::before {
		background-color: var(--tooltip);
		color: var(--tooltip-foreground);
		max-width: none;
		translate: var(--tw-translate-x) 0;
	}

	.icon {
		width: calc(var(--spacing) * 4);
		height: calc(var(--spacing) * 4);
		cursor: help;
	}
}

.constructive {
	background-color: transparent;
	border-color: var(--primary-contrast);
	color: var(--primary-contrast);

	&:hover,
	&:focus {
		background-color: color-mix(in oklab,
				var(--primary-contrast) 10%,
				transparent) !important;
	}

	.icon {
		filter: var(--muted-filter-contrast);
	}
}

.destructive {
	background-color: transparent;
	border-color: var(--destructive);
	color: var(--destructive);

	&:hover,
	&:focus {
		background-color: color-mix(in oklab,
				var(--destructive) 10%,
				transparent) !important;
	}
}

.filter {
	button {
		display: flex;
		gap: calc(var(--spacing) * 2);
		padding-block: calc(var(--spacing) * 1.5);
		padding-inline: calc(var(--spacing) * 2.5);
		cursor: pointer;

		&.badge-outline,
		&.btn-outline {
			background-color: var(--popover);

			&:hover,
			&:focus {
				background-color: var(--accent);
			}
		}

		.icon {
			width: calc(var(--spacing) * 4);
			height: calc(var(--spacing) * 4);
		}
	}

	.scrollbar {
		max-height: calc(var(--spacing) * 48);
	}

	.enum {
		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--spacing) * 1);

		button {
			padding: 0;
			cursor: pointer;
		}
	}

	[data-popover] {
		max-width: calc(var(--spacing)*124);
	}

	.dropdown-menu {
		position: initial;

		[data-popover] {
			position: initial;
			width: 100%;

			.scrollbar {
				max-height: calc(var(--spacing) * 36);
			}
		}
	}
}

.scrollbar {
	overflow-x: hidden;
	overflow-y: auto;
}

.toaster {
	left: calc(var(--spacing) * 0);

	@media (min-width: 640px) {
		max-width: calc(var(--spacing) * 100);
	}

	.toast {
		background-color: var(--color-popover);

		.toast-content {
			section {
				font-size: var(--text-base);

				p {
					word-break: break-word;
				}
			}

			.icon {
				color: var(--primary);
				width: calc(var(--spacing) * 5);
				height: calc(var(--spacing) * 5);
				filter: var(--muted-filter-contrast);
			}
		}

		&[data-category="error"] {
			.toast-content {
				background-color: color-mix(in oklab,
						var(--destructive) 10%,
						transparent);
			}

			.icon {
				color: var(--destructive);
			}
		}
	}
}

.tabs {
	[role="tablist"] {
		flex-wrap: wrap;
		gap: calc(var(--spacing) * 2);
		justify-content: flex-start;
		border: 1px solid var(--border);
		min-height: calc(var(--spacing) * 10);
		height: auto;
		container-type: inline-size;

		@container (min-width: 720px) {
			justify-content: center;
		}

		[role="tab"] {
			flex: none;

			@container (min-width: 720px) {
				flex: 1;
			}

			&[aria-selected="true"] {
				background-color: var(--primary);
				color: var(--primary-foreground);

				.icon {
					filter: none;
				}
			}
		}
	}

	>div {
		>.card {
			gap: calc(var(--spacing) * 5);
			box-shadow: none;

			>header {
				>h2 {
					font-size: var(--text-xl);
				}
			}

			>section {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				flex-wrap: wrap;

				>.card {
					gap: calc(var(--spacing) * 5);

					>section {
						display: flex;
						flex-direction: column;
						gap: calc(var(--spacing) * 5);

						&.secondary {
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: space-between;
							align-items: center;
							gap: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
						}

						&.stats:not(:first-of-type) {
							border-top: 1px solid var(--border);
							padding-top: calc(var(--spacing) * 5);
						}

						h4 {
							font-size: var(--text-lg);
							font-weight: var(--font-weight-medium);
							margin-block: calc(var(--spacing) * 1);
						}

						&.stats {
							container-type: inline-size;

							.row {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								container-type: inline-size;

								@container (min-width: 360px) {
									flex-direction: row;
									justify-content: space-between;
								}
							}
						}
					}
				}
			}
		}
	}
}

.prose {

	ol,
	ul {
		display: flex;
		gap: calc(var(--spacing) * 2);
		flex-direction: column;
		margin-left: calc(var(--spacing) * 6);
	}

	ol {
		list-style-type: decimal;
	}

	ul {
		list-style-type: disc;
	}
}

pre {
	overflow: scroll;
}

dialog {
	>div {
		background-color: var(--popover);
		color: var(--foreground);
		width: 100%;
		max-width: 425px;
		max-height: 612px;

		.btn-outline {
			background-color: var(--popover);

			&:hover {
				background-color: var(--accent);
			}
		}
	}
}

.badge-boolean {
	font-size: var(--text-sm) !important;
	font-weight: var(--font-weight-normal) !important;
	margin-block: calc(var(--spacing) * 0.5) !important;
	padding-inline: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5) !important;

	.icon {
		width: calc(var(--spacing) * 4.5) !important;
		height: calc(var(--spacing) * 4.5) !important;
		margin-top: 1px;
	}
}

.col {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 2);

	&.loose {
		gap: calc(var(--spacing) * 3);
	}
}

.stats {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 6);

	.row {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;

		&:has(.group) {
			align-items: flex-start;
		}

		>div {
			width: 100%;

			&:nth-child(1):nth-last-child(2),
			&:nth-child(2):nth-last-child(1) {
				width: 50%;
			}
		}
	}

	.col {
		&.group {
			gap: calc(var(--spacing) * 4);
		}
	}

	.label {
		color: var(--muted-foreground);
		font-size: var(--text-sm);
		font-weight: normal;
		line-height: var(--leading-tight);
		text-transform: uppercase;
		user-select: unset;
	}

	.value {
		font-size: var(--text-lg);
		font-weight: var(--font-weight-medium);

		&[aria-hidden="true"] {
			display: none;
		}

		&.numeric {
			font-variant-numeric: tabular-nums;
		}
	}

	code.value {
		color: var(--foreground);
		width: 100%;
	}
}

.logo {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	padding: calc(var(--spacing) * 2);
	height: calc(var(--spacing) * 12);

	div {
		&:has(.icon) {
			background-color: var(--color-primary);
			color: var(--color-sidebar-primary-foreground);
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(var(--spacing) * 8);
			height: calc(var(--spacing) * 8);
			border-radius: var(--radius-lg);

			.icon {
				filter: none;
			}
		}

		&:not(:has(.icon)) {
			display: flex;
			flex-direction: column;
			color: var(--foreground);
			font-size: var(--text-lg);
			font-weight: var(--font-weight-semibold);
			line-height: var(--leading-tight);

			span {
				font-size: var(--text-xs);
				font-weight: var(--font-weight-medium);
			}
		}
	}
}

.auth {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--spacing) * 8);
	margin-top: calc(var(--spacing) * 8);

	.logo {
		div {
			&:has(.icon) {
				width: calc(var(--spacing) * 12);
				height: calc(var(--spacing) * 12);

				.icon {
					width: calc(var(--spacing) * 8);
					height: calc(var(--spacing) * 8);
				}
			}
		}
	}

	.card {
		width: 100%;
		max-width: var(--container-md);
	}
}

.form,
.field {

	label,
	input {
		font-size: var(--text-base);
	}

	label {
		display: flex;
		gap: calc(var(--spacing) * 2);

		.icon {
			width: calc(var(--spacing) * 4);
			height: calc(var(--spacing) * 4);

			&:not(.brand, .color) {
				filter: var(--muted-filter);
			}
		}
	}

	.error {
		color: var(--destructive);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-semibold);
	}

	.input {
		height: calc(var(--spacing) * 10);
	}

	.btn-lg,
	.btn-lg-outline {
		font-size: var(--text-base);
	}
}

.chart {
	width: 100%;
}

.divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-foreground);

	&::after {
		position: absolute;
		left: 0;
		right: 0;
		height: 1px;
		content: "";
		background-color: var(--border);
	}

	span {
		padding-inline: calc(var(--spacing) * 2);
		background-color: var(--color-card);
		z-index: 1;
	}
}

.card header rocket-combobox {
	margin-block: calc(var(--spacing) * -1);
}

.progress {
	background-color: color-mix(in oklab, var(--primary) 20%, transparent);
	position: relative;
	height: calc(var(--spacing) * 2);
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	margin-bottom: calc(var(--spacing) * 4);

	>div {
		background-color: var(--primary);
		height: 100%;
	}
}

.attribution {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	text-align: right;
}

.uptime {
	display: flex;
	gap: calc(var(--spacing) * 3) calc(var(--spacing) * 1);
	align-items: center;
	flex-wrap: wrap;

	.status {
		width: calc(var(--spacing) * 2);
		height: calc(var(--spacing) * 6);
		border-radius: var(--radius);

		&.up {
			background-color: var(--primary);
		}

		&.down {
			background-color: var(--destructive);
		}

		&:hover {
			transform: scale(1.2);
		}
	}
}

rocket-filter {
	.input {
		&:not([type="checkbox"]):not([type="radio"]) {
			width: calc(var(--spacing) * 36);
		}

		&[type="date"] {
			padding-inline: calc(var(--spacing) * 2);
		}

		&.w-full {
			min-width: calc(var(--spacing) * 48);
			width: 100%;
		}
	}
}

rocket-reveal {
	display: inline-block;
	position: relative;

	>div:not(.reveal) {
		cursor: pointer;

		&.active {
			background-color: var(--primary);
		}
	}

	.reveal {
		position: absolute;
		top: calc(1 / 2 * 100%);
		left: 100%;
		translate: 0 calc(calc(1 / 2 * 100%) * -1);
		margin-left: calc(var(--spacing) * 1.5);
		font-size: var(--text-base);

		&[aria-hidden="true"] {
			display: none;
		}

		&[data-side="left"] {
			left: auto;
			right: 100%;
			margin-right: calc(var(--spacing) * 1.5);
		}
	}
}

rocket-field-search {
	.stats {

		>.col,
		.empty {
			margin-block: calc(var(--spacing) * 2);
		}

		.col {
			&:not(:has(.value:not([aria-hidden="true"]))) {
				display: none;
			}

			h4.label {
				font-size: var(--text-lg);
			}

			h5.label {
				font-size: var(--text-base);
				margin-top: calc(var(--spacing) * 2);
			}

			.label {
				font-weight: var(--font-weight-normal) !important;
			}

			.col {
				margin-left: calc(var(--spacing) * 8);
			}
		}

		.empty {
			display: none;
		}

		&:not(:has(.value:not([aria-hidden="true"]))) .empty {
			display: block;
		}
	}
}

.grow {
	flex-grow: 1;
}

.video-container {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 1000px;
	background: #000;
	cursor: pointer;

	>div {
		&:hover button {
			opacity: 1;
		}

		button {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: calc(var(--spacing) * 18);
			height: calc(var(--spacing) * 18);
			opacity: 0.8;
			cursor: pointer;
			transition: opacity 0.3s;
			pointer-events: none;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	img,
	iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
	}
}