@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));
@custom-variant compact (&:is([compact] *));

@font-face {
	font-family: "Noto Sans";
	font-style: normal;
	font-weight: 100 900;
	src: url("../third-party/NotoSans-VariableFont_wdth,wght.ttf")
		format("truetype");
}

@font-face {
	font-family: "Noto Sans";
	font-style: italic;
	font-weight: 100 900;
	src: url("../third-party/NotoSans-Italic-VariableFont_wdth,wght.ttf")
		format("truetype");
}

@theme inline {
	--background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
	--background-image-gradient-conic: conic-gradient(
		from 180deg at 50% 50%,
		var(--tw-gradient-stops)
	);

	--font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
	--font-path: "Noto Sans", system-ui, -apple-system, sans-serif;
	--font-mono: "Noto Sans", consolas, monospace;

	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-background: var(--background);
	--color-foreground: var(--foreground);

	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);

	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);

	--color-destructive: var(--destructive);
	--color-destructive-foreground: var(--destructive-foreground);

	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);

	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);

	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);

	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-inverse-surface: var(--md-sys-color-inverse-surface);
	--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);

	--color-info: var(--info);
	--color-info-foreground: var(--info-foreground);

	--color-success: var(--success);
	--color-success-foreground: var(--success-foreground);

	--color-warning: var(--warning);
	--color-warning-foreground: var(--warning-foreground);

	--radius-lg: var(--radius);
	--radius-md: calc(var(--radius) - 2px);
	--radius-sm: calc(var(--radius) - 4px);

	--animate-accordion-down: accordion-down 0.2s ease-out;
	--animate-accordion-up: accordion-up 0.2s ease-out;

	--theme-panel-elevation: 0 12px 24px rgb(0 0 0 / 0.24);
	--theme-panel-enter-offset: -10px;
	--theme-panel-enter-scale-y: 0.96;
	--theme-panel-title-font-size: 24px;
	--theme-panel-title-font-weight: 500;
	--theme-panel-title-line-height: 1.1;
	--theme-panel-card-padding: 16px;
	--theme-panel-block-gap: 12px;
	--theme-panel-color-picker-size: 42px;
	--theme-panel-label-font-size: 14px;
	--theme-panel-slider-gap: 16px;
	--theme-panel-slider-label-margin-block: 8px;
	--theme-panel-slider-inset: 12px;
	--theme-panel-slider-track-height: 14px;

	@keyframes accordion-down {
		from {
			height: 0;
		}

		to {
			height: var(--radix-accordion-content-height);
		}
	}

	@keyframes accordion-up {
		from {
			height: var(--radix-accordion-content-height);
		}

		to {
			height: 0;
		}
	}
}

@layer utilities {
	.anchor-none {
		overflow-anchor: none;
	}
}

:root {
	--md-sys-color-primary: rgb(51 97 141);
	--md-sys-color-surface-tint: rgb(51 97 141);
	--md-sys-color-on-primary: rgb(255 255 255);
	--md-sys-color-primary-container: rgb(208 228 255);
	--md-sys-color-on-primary-container: rgb(21 73 116);
	--md-sys-color-secondary: rgb(82 96 112);
	--md-sys-color-on-secondary: rgb(255 255 255);
	--md-sys-color-secondary-container: rgb(214 228 247);
	--md-sys-color-on-secondary-container: rgb(59 72 87);
	--md-sys-color-tertiary: rgb(106 87 121);
	--md-sys-color-on-tertiary: rgb(255 255 255);
	--md-sys-color-tertiary-container: rgb(241 219 255);
	--md-sys-color-on-tertiary-container: rgb(81 64 96);
	--md-sys-color-error: rgb(186 26 26);
	--md-sys-color-on-error: rgb(255 255 255);
	--md-sys-color-error-container: rgb(255 218 214);
	--md-sys-color-on-error-container: rgb(147 0 10);
	--md-sys-color-background: rgb(248 249 255);
	--md-sys-color-on-background: rgb(25 28 32);
	--md-sys-color-surface: rgb(248 249 255);
	--md-sys-color-on-surface: rgb(25 28 32);
	--md-sys-color-surface-variant: rgb(223 227 235);
	--md-sys-color-on-surface-variant: rgb(66 71 78);
	--md-sys-color-outline: rgb(115 119 127);
	--md-sys-color-outline-variant: rgb(194 199 207);
	--md-sys-color-inverse-surface: rgb(45 49 53);
	--md-sys-color-inverse-on-surface: rgb(239 240 247);
	--md-sys-color-inverse-primary: rgb(158 202 252);
	--md-sys-color-surface-dim: rgb(216 218 224);
	--md-sys-color-surface-bright: rgb(248 249 255);
	--md-sys-color-surface-container-lowest: rgb(255 255 255);
	--md-sys-color-surface-container-low: rgb(242 243 249);
	--md-sys-color-surface-container: rgb(236 238 244);
	--md-sys-color-surface-container-high: rgb(230 232 238);
	--md-sys-color-surface-container-highest: rgb(224 226 232);

	--background: var(--md-sys-color-surface-container);
	--background-start: var(--md-sys-color-surface-container);
	--background-end: var(--md-sys-color-surface-container);
	--foreground: var(--md-sys-color-on-surface);
	--card: var(--md-sys-color-surface-container-high);
	--card-foreground: var(--md-sys-color-on-surface);
	--popover: var(--md-sys-color-surface-container);
	--popover-foreground: var(--md-sys-color-on-surface);
	--primary: var(--md-sys-color-primary);
	--primary-foreground: var(--md-sys-color-on-primary);
	--secondary: var(--md-sys-color-surface-container-highest);
	--secondary-foreground: var(--md-sys-color-on-surface);
	--muted: var(--md-sys-color-surface-container-high);
	--muted-foreground: var(--md-sys-color-on-surface-variant);
	--accent: var(--md-sys-color-primary-container);
	--accent-foreground: var(--md-sys-color-on-primary-container);
	--info: var(--md-sys-color-primary);
	--info-foreground: hsl(210 40% 98%);
	--success: hsl(145 58% 34%);
	--success-foreground: hsl(140 55% 96%);
	--warning: hsl(45 96% 44%);
	--warning-foreground: hsl(35 45% 11%);
	--destructive: var(--md-sys-color-error);
	--destructive-foreground: var(--md-sys-color-on-error);
	--border: var(--md-sys-color-outline-variant);
	--input: var(--md-sys-color-outline-variant);
	--ring: var(--md-sys-color-primary);
	--radius: 1.75rem;
}

.dark {
	--md-sys-color-primary: rgb(158 202 252);
	--md-sys-color-surface-tint: rgb(158 202 252);
	--md-sys-color-on-primary: rgb(0 50 86);
	--md-sys-color-primary-container: rgb(21 73 116);
	--md-sys-color-on-primary-container: rgb(208 228 255);
	--md-sys-color-secondary: rgb(186 200 219);
	--md-sys-color-on-secondary: rgb(36 49 64);
	--md-sys-color-secondary-container: rgb(59 72 87);
	--md-sys-color-on-secondary-container: rgb(214 228 247);
	--md-sys-color-tertiary: rgb(213 190 229);
	--md-sys-color-on-tertiary: rgb(58 42 72);
	--md-sys-color-tertiary-container: rgb(81 64 96);
	--md-sys-color-on-tertiary-container: rgb(241 219 255);
	--md-sys-color-error: rgb(255 180 171);
	--md-sys-color-on-error: rgb(105 0 5);
	--md-sys-color-error-container: rgb(147 0 10);
	--md-sys-color-on-error-container: rgb(255 218 214);
	--md-sys-color-background: rgb(16 20 24);
	--md-sys-color-on-background: rgb(224 226 232);
	--md-sys-color-surface: rgb(16 20 24);
	--md-sys-color-on-surface: rgb(224 226 232);
	--md-sys-color-surface-variant: rgb(66 71 78);
	--md-sys-color-on-surface-variant: rgb(194 199 207);
	--md-sys-color-outline: rgb(140 145 153);
	--md-sys-color-outline-variant: rgb(66 71 78);
	--md-sys-color-inverse-surface: rgb(224 226 232);
	--md-sys-color-inverse-on-surface: rgb(45 49 53);
	--md-sys-color-inverse-primary: rgb(51 97 141);
	--md-sys-color-surface-dim: rgb(16 20 24);
	--md-sys-color-surface-bright: rgb(54 57 62);
	--md-sys-color-surface-container-lowest: rgb(11 14 18);
	--md-sys-color-surface-container-low: rgb(25 28 32);
	--md-sys-color-surface-container: rgb(29 32 36);
	--md-sys-color-surface-container-high: rgb(39 42 47);
	--md-sys-color-surface-container-highest: rgb(50 53 58);

	--background: var(--md-sys-color-surface-container);
	--background-start: var(--md-sys-color-surface-container);
	--background-end: var(--md-sys-color-surface-container);
	--foreground: var(--md-sys-color-on-surface);
	--card: var(--md-sys-color-surface-container-high);
	--card-foreground: var(--md-sys-color-on-surface);
	--popover: var(--md-sys-color-surface-container);
	--popover-foreground: var(--md-sys-color-on-surface);
	--primary: var(--md-sys-color-primary);
	--primary-foreground: var(--md-sys-color-on-primary);
	--secondary: var(--md-sys-color-surface-container-highest);
	--secondary-foreground: var(--md-sys-color-on-surface);
	--muted: var(--md-sys-color-surface-container-high);
	--muted-foreground: var(--md-sys-color-on-surface-variant);
	--accent: var(--md-sys-color-primary-container);
	--accent-foreground: var(--md-sys-color-on-primary-container);
	--info: var(--md-sys-color-primary);
	--info-foreground: var(--md-sys-color-on-primary);
	--success: hsl(141 44% 67%);
	--success-foreground: hsl(141 50% 12%);
	--warning: hsl(43 88% 70%);
	--warning-foreground: hsl(35 45% 11%);
	--destructive: var(--md-sys-color-error);
	--destructive-foreground: var(--md-sys-color-on-error);
	--border: var(--md-sys-color-outline-variant);
	--input: var(--md-sys-color-outline-variant);
	--ring: var(--md-sys-color-primary);
}

@media (prefers-color-scheme: dark) {
	.system {
		--md-sys-color-primary: rgb(158 202 252);
		--md-sys-color-on-primary: rgb(0 50 86);
		--md-sys-color-primary-container: rgb(21 73 116);
		--md-sys-color-on-primary-container: rgb(208 228 255);
		--md-sys-color-error: rgb(255 180 171);
		--md-sys-color-on-error: rgb(105 0 5);
		--md-sys-color-surface: rgb(16 20 24);
		--md-sys-color-on-surface: rgb(224 226 232);
		--md-sys-color-on-surface-variant: rgb(194 199 207);
		--md-sys-color-outline-variant: rgb(66 71 78);
		--md-sys-color-surface-container: rgb(29 32 36);
		--md-sys-color-surface-container-high: rgb(39 42 47);
		--md-sys-color-surface-container-highest: rgb(50 53 58);

		--background: var(--md-sys-color-surface-container);
		--background-start: var(--md-sys-color-surface-container);
		--background-end: var(--md-sys-color-surface-container);
		--foreground: var(--md-sys-color-on-surface);
		--card: var(--md-sys-color-surface-container-high);
		--card-foreground: var(--md-sys-color-on-surface);
		--popover: var(--md-sys-color-surface-container);
		--popover-foreground: var(--md-sys-color-on-surface);
		--primary: var(--md-sys-color-primary);
		--primary-foreground: var(--md-sys-color-on-primary);
		--secondary: var(--md-sys-color-surface-container-highest);
		--secondary-foreground: var(--md-sys-color-on-surface);
		--muted: var(--md-sys-color-surface-container-high);
		--muted-foreground: var(--md-sys-color-on-surface-variant);
		--accent: var(--md-sys-color-primary-container);
		--accent-foreground: var(--md-sys-color-on-primary-container);
		--info: var(--md-sys-color-primary);
		--info-foreground: var(--md-sys-color-on-primary);
		--success: hsl(141 44% 67%);
		--success-foreground: hsl(141 50% 12%);
		--warning: hsl(43 88% 70%);
		--warning-foreground: hsl(35 45% 11%);
		--destructive: var(--md-sys-color-error);
		--destructive-foreground: var(--md-sys-color-on-error);
		--border: var(--md-sys-color-outline-variant);
		--input: var(--md-sys-color-outline-variant);
		--ring: var(--md-sys-color-primary);
	}
}

body {
	--toastify-font-family: var(--font-sans);
	--toastify-color-light: var(--md-sys-color-background);
	/*--toastify-color-info: #3498db;*/
	--toastify-color-success: var(--success);
	/*--toastify-color-warning: #f1c40f;*/
	--toastify-color-error: var(--destructive);
	/*--toastify-color-transparent: rgba(255, 255, 255, 0.7);*/

	--toastify-icon-color-info: var(--toastify-color-info);
	--toastify-icon-color-success: var(--toastify-color-success);
	--toastify-icon-color-warning: var(--toastify-color-warning);
	--toastify-icon-color-error: var(--toastify-color-error);

	/* size and fonts are not customized */

	--toastify-text-color-light: var(--foreground);

	--toastify-color-progress-light: var(--md-sys-color-primary-container);
	--toastify-color-progress-info: var(--md-sys-color-primary-container);
	--toastify-color-progress-success: var(--toastify-color-success);
	--toastify-color-progress-warning: color-mix(
		in srgb,
		var(--md-sys-color-primary) 72%,
		var(--md-sys-color-primary-container)
	);
	--toastify-color-progress-error: var(--toastify-color-error);

	.Toastify__toast {
		border-radius: var(--radius);
		box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
		overflow: hidden;
	}

	.Toastify__progress-bar--wrp {
		border-radius: 0 0 var(--radius) var(--radius);
		overflow: hidden;
	}

	.Toastify__progress-bar {
		border-radius: inherit;
	}

	.Toastify__close-button--light {
		color: var(--foreground);
	}
}

@layer base {
	* {
		@apply border-border;
	}

	button:not(:disabled),
	[role="button"]:not(:disabled) {
		cursor: pointer;
	}

	button:disabled,
	[role="button"]:disabled {
		cursor: not-allowed;
	}

	html {
		background: var(--background);
	}

	body {
		@apply bg-background text-foreground;
		background:
			linear-gradient(145deg, transparent 0%, var(--background-end) 72%),
			var(--background-start);
		color-scheme: light;
	}

	#app {
		background: transparent;
	}

	.dark body {
		color-scheme: dark;
	}
}

@media (prefers-color-scheme: dark) {
	@layer base {
		.system body {
			color-scheme: dark;
		}
	}
}

.project-table-button:hover .project-table-header-chevron-up-down {
	visibility: visible;
}

/* re-enable text-sizing for heading components */

h1 {
	@apply text-2xl;
}

h2 {
	@apply text-xl;
}

h3 {
	@apply text-lg;
}

h4 {
	@apply text-base;
}

h5 {
	@apply text-base;
}

h6 {
	@apply text-sm;
}

code {
	@apply font-mono;
}

th.border-primary,
td.border-primary {
	border-color: transparent;
}

thead th {
	font-weight: 500;
}

html {
	overscroll-behavior: none;
}

.vrc-get-dialog-content[data-state="open"] {
	animation: vrc-get-dialog-in 200ms ease-out;
}

.vrc-get-dialog-content[data-state="closed"] {
	animation: vrc-get-dialog-out 200ms ease-in;
}

@keyframes vrc-get-dialog-in {
	from {
		opacity: 0;
		scale: 0.95;
	}

	to {
		opacity: 1;
		scale: 1;
	}
}

@keyframes vrc-get-dialog-out {
	from {
		opacity: 1;
		scale: 1;
	}

	to {
		opacity: 0;
		scale: 0.95;
	}
}

.theme-panel {
	background: var(--md-sys-color-surface-container);
	box-shadow: var(--theme-panel-elevation);
	transform-origin: bottom left;
}

.theme-dialog-content {
	width: min(48rem, calc(100vw - 2rem));
}

.large-dialog-content {
	width: min(48rem, calc(100vw - 2rem));
}

.theme-panel__content {
	display: flex;
	flex-direction: column;
	gap: var(--theme-panel-block-gap);
}

.theme-panel__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 2px;
}

.theme-panel__title {
	margin: 0;
	color: var(--md-sys-color-on-surface);
	font-size: var(--theme-panel-title-font-size);
	font-weight: var(--theme-panel-title-font-weight);
	line-height: var(--theme-panel-title-line-height);
}

.theme-panel__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
	gap: var(--theme-panel-block-gap);
}

.theme-panel__column {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: var(--theme-panel-block-gap);
}

.theme-panel__column--options {
	align-self: start;
}

.theme-card,
.theme-sliders,
.theme-schemes {
	border-radius: var(--radius);
	padding: var(--theme-panel-card-padding);
	background: var(--md-sys-color-surface-container-high);
}

.theme-card__label {
	display: block;
	margin-bottom: 10px;
	color: var(--md-sys-color-on-surface);
	font-size: var(--theme-panel-label-font-size);
}

.theme-card__color-row {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 12px;
}

.theme-card__picker {
	width: var(--theme-panel-color-picker-size);
	height: var(--theme-panel-color-picker-size);
	flex: none;
	border: 0;
	border-radius: 9999px;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.theme-card__picker::-webkit-color-swatch-wrapper {
	padding: 0;
}

.theme-card__picker::-webkit-color-swatch {
	border: 2px solid var(--md-sys-color-on-surface);
	border-radius: 9999px;
}

.theme-sliders {
	display: flex;
	flex-direction: column;
	gap: var(--theme-panel-slider-gap);
}

.theme-slider {
	display: block;
}

.theme-slider span {
	display: block;
	margin-block: var(--theme-panel-slider-label-margin-block);
	margin-inline: var(--theme-panel-slider-inset);
	color: var(--md-sys-color-on-surface);
	font-size: var(--theme-panel-label-font-size);
}

.theme-slider input[type="range"] {
	display: block;
	width: 100%;
	accent-color: var(--md-sys-color-primary);
}

.theme-slider__track {
	display: block;
	width: calc(100% - (var(--theme-panel-slider-inset) * 2));
	height: var(--theme-panel-slider-track-height);
	margin-top: var(--theme-panel-slider-label-margin-block);
	margin-inline: var(--theme-panel-slider-inset);
	border-radius: 9999px;
	pointer-events: none;
}

.theme-slider__track--hue {
	background: linear-gradient(
		90deg,
		#ff0000 0%,
		#ffff00 17%,
		#00ff00 33%,
		#00ffff 50%,
		#0000ff 67%,
		#ff00ff 83%,
		#ff0000 100%
	);
}

.theme-slider__track--chroma {
	background: linear-gradient(
		90deg,
		hsl(var(--theme-hue, 0) 0% 55%) 0%,
		hsl(var(--theme-hue, 0) 100% 50%) 100%
	);
}

.theme-slider__track--tone {
	background: linear-gradient(
		90deg,
		#000000 0%,
		hsl(var(--theme-hue, 0) 30% 50%) 50%,
		#ffffff 100%
	);
}

.theme-mode-toggle {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px;
	border-radius: 9999px;
	padding: 2px;
	background: var(--md-sys-color-surface-container-high);
}

.theme-mode-toggle__button {
	min-width: 0;
	height: 36px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--md-sys-color-on-surface-variant);
	font-size: 14px;
}

.theme-mode-toggle__button.selected {
	background: var(--md-sys-color-primary-container);
	color: var(--md-sys-color-on-primary-container);
}

.theme-schemes__title {
	margin: 0 0 8px;
	color: var(--md-sys-color-on-surface);
	font-size: var(--theme-panel-label-font-size);
	font-weight: 500;
}

.theme-schemes-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.theme-scheme-option {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 42px;
	gap: 10px;
	padding: 0;
	color: var(--md-sys-color-on-surface);
	font-size: var(--theme-panel-label-font-size);
}

.theme-scheme-option:has(input:focus-visible) {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
}

.theme-scheme-option input {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--md-sys-color-primary);
}

@media (max-width: 720px) {
	.theme-panel__main {
		grid-template-columns: minmax(0, 1fr);
	}

	.theme-panel__column--options {
		align-self: stretch;
	}
}

@media (max-width: 460px) {
	.theme-schemes-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 this is a ad-hoc way to apply toastify variables.
 We could not find way to correctly order the toastify css and this css so put in body to get higher specificity
 */

/* Radix ui sets display:block for each scroll viewport element but it seem it make worse */
[data-radix-scroll-area-viewport] > div {
	/* biome-ignore lint/complexity/noImportantStyles: necessary to override element */
	display: block !important;
}

/*
 * Add padding end for horizontal scroll bar of scrollable card if vertical scroll bar is invisible
 * This prevents the horizontal scroll bar hide corner of the card
 */
.vrc-get-scrollable-card:not(
		:has(> .vrc-get-scrollable-card-vertical-bar)
	) > div[data-radix-scroll-area-viewport]
	> div
	> div.vrc-get-scrollable-card-horizontal-bar {
	@apply pe-2.5;
}

/*
 * Add padding end for the content area of scrollable card if vertical scroll bar is visible
 * This prevents the table / items from being hidden behind the vertical scroll bar
 */
.vrc-get-scrollable-card:has(
		> .vrc-get-scrollable-card-vertical-bar
	) > div[data-radix-scroll-area-viewport]
	> div {
	@apply pe-2.5;
}

.vrc-get-sidebar-hostname-warning-container {
	contain-intrinsic-size: 0 7em;
	contain: size;
}

.fade-in {
	animation: fadeInUp 0.1s ease-in-out;
}

.slide-left {
	animation: slideLeft 0.1s ease-in-out;
}

.slide-right {
	animation: slideRight 0.1s ease-in-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideLeft {
	from {
		opacity: 0;
		transform: translateX(20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}
