@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin 'tailwind-scrollbar';

@variant dark (&:where(.dark, .dark *));

@utility container {
	margin-inline: auto;
	padding-inline: 2rem;
}

@theme {
	--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);

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

	--font-family-sans: var(--font-sans);

	--min-height-navbar: calc(100vh - var(--navbar-height));
}

@layer theme {
	:root {
		--background: hsl(0 0% 100%);
		--foreground: hsl(240 10% 3.9%);
		--card: hsl(0 0% 100%);
		--card-foreground: hsl(240 10% 3.9%);
		--popover: hsl(0 0% 100%);
		--popover-foreground: hsl(240 10% 3.9%);
		--primary: hsl(142.1 76.2% 36.3%);
		--primary-foreground: hsl(355.7 100% 97.3%);
		--secondary: hsl(240 4.8% 95.9%);
		--secondary-foreground: hsl(240 5.9% 10%);
		--muted: hsl(240 4.8% 95.9%);
		--muted-foreground: hsl(240 3.8% 46.1%);
		--accent: hsl(240 4.8% 95.9%);
		--accent-foreground: hsl(240 5.9% 10%);
		--destructive: hsl(0 72.22% 50.59%);
		--destructive-foreground: hsl(0 0% 98%);
		--border: hsl(240 5.9% 90%);
		--input: hsl(240 5.9% 90%);
		--ring: hsl(142.1 76.2% 36.3%);
		--radius: 0.5rem;
	}
	.dark {
		--background: hsl(20 14.3% 4.1%);
		--foreground: hsl(0 0% 95%);
		--card: hsl(24 9.8% 10%);
		--card-foreground: hsl(0 0% 95%);
		--popover: hsl(0 0% 9%);
		--popover-foreground: hsl(0 0% 95%);
		--primary: hsl(142.1 70.6% 45.3%);
		--primary-foreground: hsl(144.9 80.4% 10%);
		--secondary: hsl(240 3.7% 15.9%);
		--secondary-foreground: hsl(0 0% 98%);
		--muted: hsl(0 0% 15%);
		--muted-foreground: hsl(240 5% 64.9%);
		--accent: hsl(12 6.5% 15.1%);
		--accent-foreground: hsl(0 0% 98%);
		--destructive: hsl(0 62.8% 30.6%);
		--destructive-foreground: hsl(0 85.7% 97.3%);
		--border: hsl(240 3.7% 15.9%);
		--input: hsl(240 3.7% 15.9%);
		--ring: hsl(142.4 71.8% 29.2%);
	}
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-border);
	}
	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		appearance: none;
		margin: 0;
	}
	input[type="number"] {
		appearance: textfield;
	}
	body {
		@apply bg-background text-foreground;
	}
}

:root {
	--navbar-height: 57px;
	@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-primary/50;
}

h1 {
	@apply text-xl font-bold dark:text-white;
}

h2 {
	@apply text-lg font-semibold dark:text-white;
}

h3 {
	@apply text-base font-medium dark:text-white;
}

h3 {
	@apply text-sm font-normal dark:text-white;
}

.header-container {
	--thickness: 4px;
}

@supports (backdrop-filter: blur(24px)) or (-webkit-backdrop-filter: blur(24px)) {
	.backdrop {
		@apply pointer-events-none absolute inset-0 -z-10;
		-webkit-backdrop-filter: blur(24px);
		backdrop-filter: blur(24px);
		background: linear-gradient(to bottom, hsl(0deg 0% 95% / 0.3), transparent 50%);
	}

	.dark .backdrop {
		background: linear-gradient(to bottom, hsl(220deg 10% 10% / 0.3), transparent 50%);
	}

	.backdrop-edge {
		@apply pointer-events-none absolute right-0 bottom-0 left-0 -z-10;
		height: var(--thickness);
		background: hsl(0deg 0% 100% / 0.1);
		-webkit-backdrop-filter: blur(18px) brightness(0.97);
		backdrop-filter: blur(18px) brightness(0.97);
		transform: translateY(100%);
	}

	.dark .backdrop-edge {
		background: hsl(220deg 10% 10% / 0.1);
		-webkit-backdrop-filter: blur(18px) brightness(1.03);
		backdrop-filter: blur(18px) brightness(1.03);
	}
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
	.backdrop {
		height: 200%;
		-webkit-mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
		mask-image: linear-gradient(to bottom, black 0% 50%, transparent 50% 100%);
	}

	.backdrop-edge {
		height: 100%;
		inset: 0;
		-webkit-mask-image: linear-gradient(
			to bottom,
			black 0,
			black var(--thickness),
			transparent var(--thickness)
		);
		mask-image: linear-gradient(
			to bottom,
			black 0,
			black var(--thickness),
			transparent var(--thickness)
		);
	}
}

/* Platform compatibility fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	/* WebKit specific styles (Linux/Safari) */
	.backdrop {
		background: linear-gradient(to bottom, hsl(0deg 0% 95% / 0.2), transparent 50%);
	}

	.dark .backdrop {
		background: linear-gradient(to bottom, hsl(220deg 10% 10% / 0.2), transparent 50%);
	}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	/* Edge specific styles */
	.backdrop {
		background: linear-gradient(to bottom, hsl(0deg 0% 95% / 0.4), transparent 50%);
	}

	.dark .backdrop {
		background: linear-gradient(to bottom, hsl(220deg 10% 10% / 0.4), transparent 50%);
	}
}
