@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@700;800&display=swap");
@import "tailwindcss";
@import "@xyflow/react/dist/style.css";

/* Flowbite theme and plugin imports (per Flowbite docs) */
@import "flowbite/src/themes/default";

@plugin "flowbite/plugin";

/* Source path to Flowbite package (adjust path if node_modules located elsewhere) */
@source "../../../node_modules/flowbite";

@utility font-auth-body {
	font-family: "Inter", sans-serif;
}

@utility font-auth-headline {
	font-family: "Manrope", sans-serif;
}

@utility auth-pulse-gradient {
	background-image: linear-gradient(135deg, #3130c0 0%, #6f3dd9 100%);
}

@utility auth-glass-panel {
	background: rgb(255 255 255 / 80%);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

@utility auth-grid-pattern {
	background-image:
		linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
	background-size: 32px 32px;
}

@utility card-hover {
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 24px 70px -38px rgba(11, 28, 48, 0.45);
	}
}

@layer base {
	@keyframes pulse-dot {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.5; }
	}
}

@utility status-dot-pulse {
	animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@layer components {
	.org-chart-editor__canvas {
		background:
			radial-gradient(circle at top, rgb(255 255 255 / 0.94), rgb(240 244 255 / 0.86) 38%, rgb(231 238 255 / 0.72) 100%);
	}

	.dark .org-chart-editor__canvas {
		background:
			radial-gradient(circle at top, rgb(15 23 42 / 0.92), rgb(15 23 42 / 0.84) 36%, rgb(2 6 23 / 0.92) 100%);
	}

	.org-chart-editor__canvas .react-flow__attribution {
		display: none;
	}

	.org-chart-editor__canvas .react-flow__controls {
		border: 1px solid rgb(203 213 225 / 0.9);
		border-radius: 1rem;
		overflow: hidden;
		box-shadow: 0 18px 40px -28px rgb(15 23 42 / 0.35);
	}

	.org-chart-editor__canvas .react-flow__controls-button {
		background: rgb(255 255 255 / 0.92);
		border-bottom: 1px solid rgb(226 232 240 / 0.9);
		color: rgb(15 23 42);
	}

	.org-chart-editor__canvas .react-flow__minimap {
		background: rgb(255 255 255 / 0.85);
		border: 1px solid rgb(226 232 240 / 0.9);
		border-radius: 1rem;
		overflow: hidden;
	}

	.org-chart-editor__canvas .react-flow__node-orgCard {
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	.org-chart-editor__canvas .react-flow__edge-path {
		stroke: rgb(71 85 105);
		stroke-width: 2;
	}

	.dark .org-chart-editor__canvas .react-flow__edge-path {
		stroke: rgb(148 163 184);
	}
}