/**
 * Dashboard sidebar — animated nav icons + inline brand mark.
 */

/* Brand mark (inline SVG — animations run unlike <img>) */
.sfp-dash-sidebar__logo--mark {
	width: 36px;
	height: 36px;
	text-decoration: none;
	border: none;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	flex-shrink: 0;
	border-radius: 10px;
	transition: transform 0.22s ease, filter 0.22s ease;
}

.sfp-brand-mark--inline {
	width: 32px;
	height: 32px;
	display: block;
}

.sfp-dash-sidebar__brand:hover .sfp-dash-sidebar__logo--mark,
.sfp-dash-sidebar__brand:focus-within .sfp-dash-sidebar__logo--mark {
	transform: scale(1.05);
	filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.4));
}

/* Nav icon slot */
.sfp-dash-nav__link::before {
	display: none !important;
	content: none !important;
}

.sfp-dash-nav__icon {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--sfp-nav-icon-bg, #e0e7ff) 100%, transparent);
	color: var(--sfp-nav-icon-fg, #4338ca);
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
	transition:
		background 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

.sfp-nav-icon {
	display: block;
	width: 20px;
	height: 20px;
}

.sfp-dash-nav__label {
	flex: 1;
	min-width: 0;
}

/* Per-item colors */
.sfp-dash-nav__link[data-sfp-nav='dashboard'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #dbeafe;
	--sfp-nav-icon-fg: #1d4ed8;
}

.sfp-dash-nav__link[data-sfp-nav='surveys'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #fce7f3;
	--sfp-nav-icon-fg: #be185d;
}

.sfp-dash-nav__link[data-sfp-nav='responses'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #e0e7ff;
	--sfp-nav-icon-fg: #4338ca;
}

.sfp-dash-nav__link[data-sfp-nav='leads'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #d1fae5;
	--sfp-nav-icon-fg: #047857;
}

.sfp-dash-nav__link[data-sfp-nav='analytics'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #ffedd5;
	--sfp-nav-icon-fg: #c2410c;
}

.sfp-dash-nav__link[data-sfp-nav='templates'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #fae8ff;
	--sfp-nav-icon-fg: #7e22ce;
}

.sfp-dash-nav__link[data-sfp-nav='integrations'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #fef9c3;
	--sfp-nav-icon-fg: #a16207;
}

.sfp-dash-nav__link[data-sfp-nav='help'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #e0f2fe;
	--sfp-nav-icon-fg: #0369a1;
}

.sfp-dash-nav__link[data-sfp-nav='branding'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #cffafe;
	--sfp-nav-icon-fg: #0e7490;
}

.sfp-dash-nav__link[data-sfp-nav='agency'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: #ede9fe;
	--sfp-nav-icon-fg: #6d28d9;
}

.sfp-dash-nav__link:hover .sfp-dash-nav__icon,
.sfp-dash-nav__link.is-active .sfp-dash-nav__icon {
	box-shadow:
		inset 0 0 0 1px rgba(99, 102, 241, 0.12),
		0 4px 10px rgba(99, 102, 241, 0.12);
}

.sfp-dash-nav__link.is-active .sfp-dash-nav__icon {
	background: linear-gradient(145deg, rgba(99, 102, 241, 0.2), rgba(236, 72, 153, 0.12));
	color: #4338ca;
}

/* ----------------------- Icon animations ----------------------- */
@keyframes sfpNavTilePulse {
	0%,
	100% {
		opacity: 0.55;
		transform: scale(0.92);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes sfpNavLineScan {
	0%,
	100% {
		opacity: 0.45;
	}
	50% {
		opacity: 1;
	}
}

@keyframes sfpNavDotBounce {
	0%,
	80%,
	100% {
		transform: translateY(0);
		opacity: 0.35;
	}
	40% {
		transform: translateY(-2px);
		opacity: 1;
	}
}

@keyframes sfpNavBarGrow {
	0%,
	100% {
		transform: scaleY(0.65);
		transform-origin: bottom center;
	}
	50% {
		transform: scaleY(1);
		transform-origin: bottom center;
	}
}

@keyframes sfpNavRingSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes sfpNavPing {
	0% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	70% {
		transform: scale(1.35);
		opacity: 0;
	}
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

@keyframes sfpNavLayerFloat {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1.5px);
	}
}

@keyframes sfpNavBoltPulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}

@keyframes sfpNavSpark {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}

.sfp-nav-icon--dashboard .sfp-nav-icon__tile--pulse {
	animation: sfpNavTilePulse 2.2s ease-in-out infinite;
}

.sfp-dash-nav__link.is-active .sfp-nav-icon--surveys .sfp-nav-icon__line,
.sfp-dash-nav__link:hover .sfp-nav-icon--surveys .sfp-nav-icon__line {
	animation: sfpNavLineScan 1.8s ease-in-out infinite;
}

.sfp-nav-icon--responses .sfp-nav-icon__dot {
	animation: sfpNavDotBounce 1.4s ease-in-out infinite;
}

.sfp-nav-icon--analytics .sfp-nav-icon__bar {
	animation: sfpNavBarGrow 1.6s ease-in-out infinite;
	transform-origin: bottom center;
}

.sfp-nav-icon--leads .sfp-nav-icon__ring {
	transform-origin: center;
	animation: sfpNavRingSpin 6s linear infinite;
}

.sfp-nav-icon--leads .sfp-nav-icon__ping {
	transform-origin: center;
	animation: sfpNavPing 2s ease-out infinite;
}

.sfp-nav-icon--templates .sfp-nav-icon__layer {
	animation: sfpNavLayerFloat 2.4s ease-in-out infinite;
}

.sfp-nav-icon--integrations .sfp-nav-icon__bolt,
.sfp-nav-icon--integrations .sfp-nav-icon__plug {
	animation: sfpNavBoltPulse 1.6s ease-in-out infinite;
}

.sfp-nav-icon--help .sfp-nav-icon__dot {
	animation: sfpNavRingSpin 4s linear infinite;
	transform-origin: 15px 15px;
}

.sfp-nav-icon--branding .sfp-nav-icon__swatch {
	animation: sfpNavLayerFloat 2s ease-in-out infinite;
}

.sfp-nav-icon--branding .sfp-nav-icon__spark {
	animation: sfpNavSpark 1.5s ease-in-out infinite;
}

.sfp-dash-nav__link:hover .sfp-dash-nav__icon {
	transform: scale(1.04);
}

.sfp-dash-nav__link.is-active .sfp-dash-nav__icon {
	transform: scale(1.06);
}

/* Builder collapsed rail — icons only */
@media (min-width: 769px) {
	.sfp-dash-wrap--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__label,
	body.sfp-dash--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.sfp-dash-wrap--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__link,
	body.sfp-dash--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__link {
		font-size: inherit;
	}
}

html[data-sfp-theme='dark'] .sfp-dash-nav__icon {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='dashboard'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(59, 130, 246, 0.2);
	--sfp-nav-icon-fg: #93c5fd;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='surveys'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(236, 72, 153, 0.18);
	--sfp-nav-icon-fg: #f9a8d4;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='responses'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(99, 102, 241, 0.2);
	--sfp-nav-icon-fg: #a5b4fc;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='leads'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(16, 185, 129, 0.18);
	--sfp-nav-icon-fg: #6ee7b7;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='analytics'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(249, 115, 22, 0.18);
	--sfp-nav-icon-fg: #fdba74;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='templates'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(168, 85, 247, 0.18);
	--sfp-nav-icon-fg: #d8b4fe;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='integrations'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(234, 179, 8, 0.16);
	--sfp-nav-icon-fg: #fde047;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='help'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(14, 165, 233, 0.18);
	--sfp-nav-icon-fg: #7dd3fc;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='branding'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(6, 182, 212, 0.18);
	--sfp-nav-icon-fg: #67e8f9;
}

html[data-sfp-theme='dark'] .sfp-dash-nav__link[data-sfp-nav='agency'] .sfp-dash-nav__icon {
	--sfp-nav-icon-bg: rgba(139, 92, 246, 0.2);
	--sfp-nav-icon-fg: #c4b5fd;
}

@media (prefers-reduced-motion: reduce) {
	.sfp-nav-icon--dashboard .sfp-nav-icon__tile--pulse,
	.sfp-nav-icon--responses .sfp-nav-icon__dot,
	.sfp-nav-icon--analytics .sfp-nav-icon__bar,
	.sfp-nav-icon--leads .sfp-nav-icon__ring,
	.sfp-nav-icon--leads .sfp-nav-icon__ping,
	.sfp-nav-icon--templates .sfp-nav-icon__layer,
	.sfp-nav-icon--integrations .sfp-nav-icon__bolt,
	.sfp-nav-icon--integrations .sfp-nav-icon__plug,
	.sfp-nav-icon--help .sfp-nav-icon__dot,
	.sfp-nav-icon--branding .sfp-nav-icon__swatch,
	.sfp-nav-icon--branding .sfp-nav-icon__spark,
	.sfp-brand-mark--inline animate,
	.sfp-brand-mark--inline animateTransform {
		animation: none !important;
	}
}