@import "tailwindcss";
@import "flowbite/src/themes/default";
@import "./colors.css";

@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";

@theme {
	--animate-fade-in-up: fadeInUp 0.5s ease-out forwards;

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

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

@theme {
	--animate-draw: draw 2s linear forwards;
	--animate-slide-up: slide-up 0.3s ease-out forwards;
	--animate-slide-down: slide-down 0.3s ease-in forwards;
	--animate-slide-in: slide-in 0.4s ease-out forwards;

	@keyframes draw {
		to {
			stroke-dashoffset: 0;
		}
	}

	@keyframes slide-up {
		from {
			opacity: 0;
			transform: translateY(20px);
		}

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

	@keyframes slide-down {
		from {
			opacity: 1;
			transform: translateY(0);
		}

		to {
			opacity: 0;
			transform: translateY(20px);
		}
	}

	@keyframes slide-in {
		from {
			opacity: 0;
			transform: translateX(100%);
		}

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

	--animate-blob: blob 7s infinite;

	@keyframes blob {
		0% {
			transform: translate(0px, 0px) scale(1);
		}

		33% {
			transform: translate(30px, -50px) scale(1.1);
		}

		66% {
			transform: translate(-20px, 20px) scale(0.9);
		}

		100% {
			transform: translate(0px, 0px) scale(1);
		}
	}
}

.animation-delay-2000 {
	animation-delay: 2s;
}

.animation-delay-4000 {
	animation-delay: 4s;
}

@layer components {
	/* Buttons */
	.btn {
		@apply inline-flex items-center justify-center rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer shadow-sm;
		font-size: 14px;
		line-height: 20px;
		padding: 6px 12px;
	}

	.btn-icon {
		@apply mr-2 -ml-1 w-5 h-5;
	}

	.btn-lg {
		@apply px-4 py-2.5 text-base;
	}

	.btn-primary {
		@apply bg-[#006b53] text-white hover:bg-[#005544] focus:ring-[#006b53] border border-transparent;
	}

	.btn-secondary {
		@apply bg-white text-[#303030] border border-[#d4d4d4] hover:bg-[#f7f7f7] focus:ring-[#303030] shadow-sm;
	}

	.btn-destructive {
		@apply bg-[#d82c0d] text-white hover:bg-[#bc2200] focus:ring-[#d82c0d] border border-transparent;
	}

	.btn-destructive-outline {
		@apply bg-white text-[#d82c0d] border border-[#d82c0d] hover:bg-[#fef3f2] focus:ring-[#d82c0d] shadow-sm;
	}

	.btn-success {
		@apply bg-[#008060] text-white hover:bg-[#006b53] focus:ring-[#008060] border border-transparent;
	}

	.btn-success-outline {
		@apply bg-white text-[#008060] border border-[#008060] hover:bg-[#f0fdf4] focus:ring-[#008060] shadow-sm;
	}

	.btn-plain {
		@apply bg-transparent text-[#005bd3] hover:underline shadow-none p-0 h-auto;
	}

	.btn-monochrome {
		@apply bg-transparent text-[#303030] hover:bg-[#f1f1f1] border border-transparent shadow-none;
	}

	/* Inputs */
	.input-group {
		@apply space-y-1;
	}

	.label {
		@apply block text-sm font-medium text-[#303030] mb-1;
	}

	.input {
		@apply block w-full rounded-lg border-gray-300 shadow-sm focus:border-[#006b53] focus:ring-[#006b53] sm:text-sm py-2 px-3 transition-shadow text-[#303030];
	}

	select.input {
		@apply appearance-none bg-white;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
		background-position: right 0.5rem center;
		background-repeat: no-repeat;
		background-size: 1.5em 1.5em;
		padding-right: 2.5rem;
	}

	/* Currency Price Input Component */
	.currency-price-input {
		@apply flex items-center border border-gray-300 rounded-lg bg-white overflow-hidden transition-shadow;
	}

	.currency-price-input:focus-within {
		@apply border-[#006b53] ring-1 ring-[#006b53];
	}

	.currency-price-input__currency-wrapper {
		@apply relative flex items-center;
	}

	.currency-price-input__currency {
		@apply appearance-none bg-transparent border-0 text-sm font-medium text-[#303030] py-2 pl-3 pr-6 cursor-pointer;
		@apply focus:outline-none focus:ring-0;
		min-width: 4rem;
		/* Hide native dropdown arrow in all browsers */
		-webkit-appearance: none;
		-moz-appearance: none;
		background-image: none;
	}

	/* Additional selectors for IE and Edge */
	.currency-price-input__currency::-ms-expand {
		display: none;
	}

	.currency-price-input__chevron {
		@apply absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-[#616161] pointer-events-none;
	}

	.currency-price-input__divider {
		@apply w-px h-6 bg-gray-300 flex-shrink-0;
	}

	.currency-price-input__price {
		@apply flex-1 border-0 bg-transparent text-sm text-[#303030] py-2 px-3;
		@apply focus:outline-none focus:ring-0;
	}

	.currency-price-input__price::placeholder {
		@apply text-[#8a8a8a];
	}

	.input-error {
		@apply border-red-500 focus:border-red-500 focus:ring-red-500;
	}

	.input-help {
		@apply mt-1 text-xs text-[#616161];
	}

	.input-error-msg {
		@apply mt-1 text-xs text-[#d82c0d] flex items-center gap-1;
	}

	/* Cards */
	.card {
		@apply bg-white rounded-xl shadow-sm border border-[#e1e3e5] overflow-hidden;
	}

	.card-section {
		@apply p-4 md:p-5;
	}

	.card-header {
		@apply px-4 py-3 md:px-5 md:py-4 border-b border-[#e1e3e5] flex items-center justify-between bg-[#fcfcfc];
	}

	/* Badges */
	.badge {
		@apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium border;
	}

	.badge-default {
		@apply bg-[#e4e5e7] text-[#303030] border-[#d4d4d4];
	}

	.badge-success {
		@apply bg-[#aee9d1] text-[#002f24] border-[#aee9d1];
	}

	.badge-info {
		@apply bg-[#a4e8f2] text-[#002d3a] border-[#a4e8f2];
	}

	.badge-warning {
		@apply bg-[#ffea8a] text-[#4a3000] border-[#ffea8a];
	}

	.badge-critical {
		@apply bg-[#fed3d1] text-[#4a0403] border-[#fed3d1];
	}

	.badge-attention {
		@apply bg-[#ffebd3] text-[#4a1500] border-[#ffebd3];
	}

	.badge-new {
		@apply bg-[#e4e5e7] text-[#303030] border-[#d4d4d4] uppercase tracking-wider;
	}

	/* Banners */
	.banner {
		@apply p-4 rounded-lg border flex gap-3 mb-4;
	}

	.banner-default {
		@apply bg-[#f1f1f1] border-[#d4d4d4] text-[#303030];
	}

	.banner-success {
		@apply bg-[#edfffa] border-[#aee9d1] text-[#002f24];
	}

	.banner-info {
		@apply bg-[#f1f8f5] border-[#b4e1fa] text-[#002d3a];
		/* Adjusted for better contrast if needed, or stick to Polaris exact */
	}

	.banner-warning {
		@apply bg-[#fff5ea] border-[#ffea8a] text-[#4a3000];
	}

	.banner-critical {
		@apply bg-[#fff0ee] border-[#fed3d1] text-[#4a0403];
	}

	/* Button Group */
	.btn-group {
		@apply flex flex-wrap gap-2;
	}

	.btn-group-segmented {
		@apply flex gap-0;
	}

	.btn-group-segmented .btn {
		@apply rounded-none border-r-0 first:rounded-l-lg last:rounded-r-lg last:border-r;
	}

	.btn-group-segmented .btn:focus {
		@apply z-10;
	}

	/* Layouts */
	.layout {
		@apply grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-8;
	}

	.layout-section {
		@apply col-span-1 md:col-span-12;
	}

	.layout-section-one-half {
		@apply col-span-1 md:col-span-6;
	}

	.layout-section-one-third {
		@apply col-span-1 md:col-span-4;
	}

	.layout-annotated-header {
		@apply col-span-1 md:col-span-4 space-y-2;
	}

	.layout-annotated-content {
		@apply col-span-1 md:col-span-8;
	}

	/* Modal */
	.modal-overlay {
		@apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm transition-opacity duration-300;
	}

	.modal-container {
		@apply bg-white rounded-xl shadow-2xl w-full max-h-[90vh] flex flex-col transition-all duration-300 transform scale-100;
	}

	.modal-sm {
		@apply max-w-md;
	}

	.modal-md {
		@apply max-w-2xl;
	}

	.modal-lg {
		@apply max-w-4xl;
	}

	.modal-header {
		@apply px-5 py-4 border-b border-[#e1e3e5] flex items-center justify-between bg-[#fcfcfc] rounded-t-xl;
	}

	.modal-body {
		@apply p-5 overflow-y-auto;
	}

	.modal-footer {
		@apply px-5 py-4 border-t border-[#e1e3e5] flex items-center justify-end gap-3 bg-[#fcfcfc] rounded-b-xl;
	}

	/* Simple Modal (for chat modals) */
	.modal {
		@apply fixed inset-0 z-50 flex items-center justify-center p-4;
	}

	.modal-backdrop {
		@apply absolute inset-0 bg-black/50 backdrop-blur-sm;
	}

	.modal-content {
		@apply relative bg-white rounded-xl shadow-2xl w-full max-h-[90vh] flex flex-col z-10;
	}

	.modal-content .modal-header {
		@apply shrink-0;
	}

	.modal-content .modal-body {
		@apply flex-1 overflow-y-auto;
	}
}

.group:hover svg path {
	animation: draw 0.4s ease-in-out forwards;
}

.bg-noise {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
}

/* Step Form System */
@layer components {
	/* Step Indicator Container */
	.step-indicator-container {
		@apply w-full;
	}

	/* Progress Bar */
	.step-progress-bar {
		@apply mb-6;
	}

	.step-progress-track {
		@apply h-1 bg-[#e1e3e5] rounded-full overflow-hidden;
	}

	.step-progress-fill {
		@apply h-full bg-[#006b53] rounded-full transition-all duration-500 ease-out;
	}

	/* Step Indicators Row */
	.step-indicators {
		@apply flex items-start justify-between relative;
	}

	/* Individual Step Indicator */
	.step-indicator {
		@apply flex flex-col items-center text-center cursor-pointer transition-all duration-200 flex-1 min-w-0 bg-transparent border-0;
	}

	.step-indicator:focus {
		@apply outline-none;
	}

	.step-number {
		@apply w-10 h-10 rounded-full flex items-center justify-center font-semibold text-sm transition-all duration-300 border-2 mb-2;
	}

	.step-number-text {
		@apply block;
	}

	.step-check {
		@apply w-5 h-5;
	}

	/* Step States */
	.step-pending .step-number {
		@apply bg-white border-[#d4d4d4] text-[#8c8c8c];
	}

	.step-pending .step-label {
		@apply text-[#8c8c8c];
	}

	.step-active .step-number {
		@apply bg-[#006b53] border-[#006b53] text-white shadow-lg;
		box-shadow: 0 0 0 4px rgba(0, 107, 83, 0.15);
	}

	.step-active .step-label {
		@apply text-[#006b53] font-semibold;
	}

	.step-complete .step-number {
		@apply bg-[#aee9d1] border-[#aee9d1] text-[#002f24];
	}

	.step-complete .step-number .step-number-text {
		@apply hidden;
	}

	.step-complete .step-number .step-check {
		@apply block;
	}

	.step-complete .step-label {
		@apply text-[#303030];
	}

	/* Step Info */
	.step-info {
		@apply flex flex-col;
	}

	.step-label {
		@apply text-sm font-medium transition-colors duration-200;
	}

	.step-description {
		@apply text-xs text-[#616161] mt-0.5 hidden md:block;
	}

	/* Connector Line */
	.step-connector {
		@apply flex-1 h-0.5 bg-[#e1e3e5] self-center mt-5 mx-2 transition-colors duration-300;
	}

	.step-connector-complete {
		@apply bg-[#aee9d1];
	}

	/* Step Content */
	.step-content {
		@apply transition-all duration-300 ease-out;
	}

	/* Step Form Card */
	.step-form-card {
		@apply bg-white rounded-xl shadow-sm border border-[#e1e3e5] overflow-hidden;
	}

	.step-form-header {
		@apply px-6 py-5 border-b border-[#e1e3e5] bg-[#fcfcfc];
	}

	.step-form-title {
		@apply text-lg font-semibold text-[#303030];
	}

	.step-form-subtitle {
		@apply text-sm text-[#616161] mt-1;
	}

	.step-form-body {
		@apply p-6;
	}

	/* Step Navigation */
	.step-navigation {
		@apply flex items-center justify-between mt-8 pt-6 border-t border-[#e1e3e5];
	}

	.step-nav-hint {
		@apply text-xs text-[#8c8c8c] hidden sm:block;
	}
}

/* Step Animations */
@theme {
	--animate-slide-in: step-slide-in 0.35s ease-out forwards;
	--animate-slide-out-left: step-slide-out-left 0.3s ease-in forwards;
	--animate-slide-out-right: step-slide-out-right 0.3s ease-in forwards;
	--animate-shake: shake 0.5s ease-in-out;

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

	@keyframes step-slide-out-left {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(-30px);
		}
	}

	@keyframes step-slide-out-right {
		from {
			opacity: 1;
			transform: translateX(0);
		}
		to {
			opacity: 0;
			transform: translateX(30px);
		}
	}

	@keyframes shake {
		0%,
		100% {
			transform: translateX(0);
		}
		10%,
		30%,
		50%,
		70%,
		90% {
			transform: translateX(-4px);
		}
		20%,
		40%,
		60%,
		80% {
			transform: translateX(4px);
		}
	}
}

.animate-slide-in {
	animation: step-slide-in 0.35s ease-out forwards;
}

.animate-slide-out-left {
	animation: step-slide-out-left 0.3s ease-in forwards;
}

.animate-slide-out-right {
	animation: step-slide-out-right 0.3s ease-in forwards;
}

.animate-shake {
	animation: shake 0.5s ease-in-out;
}

/* Global Loading Bar */
.loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	z-index: 99999;
	background: linear-gradient(90deg, #006b53, #00a67e, #006b53);
	background-size: 200% 100%;
	transition: width 0.3s ease, opacity 0.3s ease;
	width: 0%;
	opacity: 0;
	pointer-events: none;
}

.loading-bar-active {
	opacity: 1;
	animation: loading-bar-progress 1.8s ease-in-out infinite, loading-bar-shimmer 1.5s linear infinite;
}

.loading-bar-complete {
	width: 100% !important;
	animation: none;
	opacity: 0;
	transition: width 0.15s ease, opacity 0.3s ease 0.15s;
}

.loading-bar-hidden {
	width: 0%;
	opacity: 0;
}

@keyframes loading-bar-progress {
	0% { width: 0%; }
	20% { width: 25%; }
	50% { width: 60%; }
	80% { width: 85%; }
	100% { width: 95%; }
}

@keyframes loading-bar-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Button Loading State */
.btn-loading {
	position: relative;
	pointer-events: none;
}

/* Spinner icon inside <button> elements */
.btn-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	flex-shrink: 0;
	animation: btn-spin 0.8s linear infinite;
}

/* Spinner for <input type="submit"> — CSS-only spinner via pseudo-element */
input[type="submit"].btn-loading {
	color: transparent !important;
	background-image: none;
}

input[type="submit"].btn-loading::after {
	content: attr(value);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: inherit;
}

/* Fallback: just show the text with reduced opacity */
input[type="submit"].btn-loading {
	color: currentColor !important;
	opacity: 0.7;
}

@keyframes btn-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Command Palette Animations */
.command-palette-open {
	opacity: 1 !important;
}

.command-palette-dialog-open {
	opacity: 1 !important;
	transform: scale(1) !important;
}