/* Simulated Security ASM - Design System */
:root {
	--background: oklch(1 0 0);
	--foreground: oklch(0.1448 0 0);
	--card: oklch(0.9702 0 0);
	--card-foreground: oklch(0.1448 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.1448 0 0);
	--primary: oklch(0.5461 0.2152 262.8809);
	--primary-foreground: oklch(0.9851 0 0);
	--secondary: oklch(0.9702 0 0);
	--secondary-foreground: oklch(0.1448 0 0);
	--muted: oklch(0.9702 0 0);
	--muted-foreground: oklch(0.5555 0 0);
	--accent: oklch(0.9702 0 0);
	--accent-foreground: oklch(0.1448 0 0);
	--destructive: oklch(0.6368 0.2078 25.3313);
	--destructive-foreground: oklch(0.9851 0 0);
	--border: oklch(0.9219 0 0);
	--input: oklch(0.9219 0 0);
	--ring: oklch(0.5461 0.2152 262.8809);
	--chart-1: oklch(0.5461 0.2152 262.8809);
	--chart-2: oklch(0.6368 0.2078 25.3313);
	--chart-3: oklch(0.3715 0 0);
	--chart-4: oklch(0.5555 0 0);
	--chart-5: oklch(0.7155 0 0);
	--sidebar: oklch(0.9702 0 0);
	--sidebar-foreground: oklch(0.5555 0 0);
	--sidebar-primary: oklch(0.5461 0.2152 262.8809);
	--sidebar-primary-foreground: oklch(0.9851 0 0);
	--sidebar-accent: oklch(1 0 0);
	--sidebar-accent-foreground: oklch(0.1448 0 0);
	--sidebar-border: oklch(0.9219 0 0);
	--sidebar-ring: oklch(0.5461 0.2152 262.8809);
	--font-sans: Inter, sans-serif;
	--font-serif: serif;
	--font-mono: Roboto Mono, monospace;
	--radius: 0.5rem;
	--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
	--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
	--shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
		0px 1px 2px -1px hsl(0 0% 0% / 0.1);
	--shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
		0px 1px 2px -1px hsl(0 0% 0% / 0.1);
	--shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
		0px 2px 4px -1px hsl(0 0% 0% / 0.1);
	--shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
		0px 4px 6px -1px hsl(0 0% 0% / 0.1);
	--shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.1),
		0px 8px 10px -1px hsl(0 0% 0% / 0.1);
	--shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.25);
	--tracking-normal: 0rem;
	--spacing: 0.25rem;
}

.dark {
	--background: oklch(0.1448 0 0);
	--foreground: oklch(0.9851 0 0);
	--card: oklch(0.2046 0 0);
	--card-foreground: oklch(0.9851 0 0);
	--popover: oklch(0.1448 0 0);
	--popover-foreground: oklch(0.9851 0 0);
	--primary: oklch(0.6231 0.188 259.8145);
	--primary-foreground: oklch(0.9851 0 0);
	--secondary: oklch(0.2686 0 0);
	--secondary-foreground: oklch(0.9851 0 0);
	--muted: oklch(0.2046 0 0);
	--muted-foreground: oklch(0.7155 0 0);
	--accent: oklch(0.2686 0 0);
	--accent-foreground: oklch(0.9851 0 0);
	--destructive: oklch(0.6447 0.241 27.376);
	--destructive-foreground: oklch(0.9851 0 0);
	--border: oklch(0.2686 0 0);
	--input: oklch(0.2686 0 0);
	--ring: oklch(0.6231 0.188 259.8145);
	--chart-1: oklch(0.6231 0.188 259.8145);
	--chart-2: oklch(0.6447 0.241 27.376);
	--chart-3: oklch(0.9249 0 0);
	--chart-4: oklch(0.6401 0 0);
	--chart-5: oklch(0.464 0 0);
	--sidebar: oklch(0.1448 0 0);
	--sidebar-foreground: oklch(0.7155 0 0);
	--sidebar-primary: oklch(0.6231 0.188 259.8145);
	--sidebar-primary-foreground: oklch(0.9851 0 0);
	--sidebar-accent: oklch(0.2686 0 0);
	--sidebar-accent-foreground: oklch(0.9851 0 0);
	--sidebar-border: oklch(0.2686 0 0);
	--sidebar-ring: oklch(0.6231 0.188 259.8145);
}

/* Base Styles */
body {
	font-family: var(--font-sans);
	background: var(--background);
	color: var(--foreground);
	letter-spacing: var(--tracking-normal);
	line-height: 1.6;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Theme utilities */
/* Swap light/dark logos depending on theme */
.logo-dark {
	display: none;
}
.dark .logo-light {
	display: none;
}
.dark .logo-dark {
	display: inline;
}

/* Toggle icon swap */
.icon-moon {
	display: none;
}
.dark .icon-sun {
	display: none;
}
.dark .icon-moon {
	display: inline;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	transition: all 0.2s ease;
}
.theme-toggle:hover {
	box-shadow: var(--shadow-sm);
	transform: translateY(-1px);
}

/* Tailwind utility tweaks for dark mode harmony */
.dark .bg-red-100 {
	background-color: oklch(0.32 0.12 25.33) !important;
}
.dark .text-red-600 {
	color: oklch(0.66 0.2 27.3) !important;
}
.dark .hover\:bg-gray-50:hover {
	background-color: rgba(255, 255, 255, 0.06) !important;
}
.dark .hover\:bg-gray-100:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .border-gray-100 {
	border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .border-gray-200 {
	border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Role chips colors in dark */
.dark .bg-blue-100 {
	background-color: rgba(59, 130, 246, 0.15) !important;
}
.dark .text-blue-800 {
	color: oklch(0.72 0.12 260) !important;
}
.dark .bg-purple-100 {
	background-color: rgba(168, 85, 247, 0.15) !important;
}
.dark .text-purple-800 {
	color: oklch(0.73 0.15 300) !important;
}
.dark .bg-gray-100 {
	background-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .text-gray-800 {
	color: var(--foreground) !important;
}

.dark .bg-white{
	background: var(--border) !important;
}

/* Modern UI Components */
.nav-link {
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 0.5rem 1rem;
	border-radius: calc(var(--radius) - 2px);
}

.nav-link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--destructive);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 80%;
}

.nav-link.active {
	color: var(--destructive);
	font-weight: 600;
}

/* Card Animations */
.card-animated {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid var(--border);
	background: var(--card);
	border-radius: var(--radius);
}

.card-animated:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--destructive);
}

/* Buttons */
.btn {
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-primary {
	background: var(--destructive);
	color: var(--destructive-foreground);
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius);
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.btn-signin {
	background: linear-gradient(
		135deg,
		var(--destructive),
		oklch(0.7368 0.2078 25.3313)
	);
	color: white;
	box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.25);
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	font-weight: 600;
	border-radius: calc(var(--radius) + 2px);
}

.btn-signin:hover {
	background: linear-gradient(
		135deg,
		oklch(0.7368 0.2078 25.3313),
		var(--destructive)
	);
	box-shadow: 0 6px 20px 0 rgba(220, 38, 38, 0.4);
	transform: translateY(-2px);
}

.btn-signin::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: left 0.5s;
}

.btn-signin:hover::before {
	left: 100%;
}

.btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.2),
		transparent
	);
	transition: left 0.5s;
}

.btn-primary:hover::before {
	left: 100%;
}

.btn-primary:hover {
	background: oklch(0.7368 0.2078 25.3313);
	box-shadow: var(--shadow-lg);
	transform: translateY(-1px);
}

/* Form Elements */
.form-input {
	background: var(--background);
	border: 1px solid var(--border);
	color: var(--foreground);
	padding: 0.75rem;
	border-radius: calc(var(--radius) - 2px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
}

.form-input:focus {
	outline: none;
	border-color: var(--destructive);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Animations */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Animation classes - only trigger once */
.animate-fade-in-up {
	animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-slide-in-left {
	animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale-in {
	animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Scroll animation classes - for elements that animate on scroll */
.scroll-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.animate {
	opacity: 1;
	transform: translateY(0);
}

.animate-slide-in-left {
	animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-scale-in {
	animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Highlight Red Utility */
.highlight-red {
	color: var(--destructive);
	font-weight: 600;
}

/* Logo Animation */
.logo-hover {
	position: relative;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-hover::before {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent
	);
	transition: left 0.6s ease-in-out;
	z-index: 1;
}

.logo-hover:hover::before {
	left: 100%;
}

/* Mobile Menu Animation */
.mobile-menu {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateY(-10px);
	opacity: 0;
}

.mobile-menu.active {
	transform: translateY(0);
	opacity: 1;
}

/* Minimal Scrollbar */
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: var(--muted);
}

::-webkit-scrollbar-thumb {
	background: var(--muted-foreground);
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--destructive);
}