/**
 * Survey Funnel Pro — frontend sidebar organization, alignment & idle icon motion.
 * Loaded after sfp-modern.css and sfp-dash-nav-icons.css so it wins the cascade.
 *
 * Goals:
 *  - One consistent icon column so every label starts at the same x.
 *  - Even vertical rhythm; tighter, better-grouped sections with subtle dividers.
 *  - Active item contained as a pill (equal left/right inset) — no edge bleed.
 *  - Every nav icon animates gently at idle, with livelier motion on hover/active.
 */

:root {
	--sfp-nav-gutter: 14px;   /* left/right inset for nav rows + headings + chrome */
	--sfp-nav-icon: 32px;     /* fixed icon chip size = the alignment column */
	--sfp-nav-gap: 12px;      /* space between icon chip and label */
	--sfp-nav-row-gap: 2px;   /* space between links within a group */
}

/* ---------------------------------------------------------------------------
   Shell: align header / nav / footer to the same gutter
   --------------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-sidebar {
	--sfp-sidebar-w: 272px;
}

.sfp-dash-wrap .sfp-dash-sidebar__head {
	padding: 18px var(--sfp-nav-gutter);
	gap: var(--sfp-nav-gap);
	min-height: 64px;
}

.sfp-dash-wrap .sfp-dash-sidebar__brand {
	gap: var(--sfp-nav-gap);
}

/* Brand mark uses the same column width as nav icons for a clean left edge. */
.sfp-dash-wrap .sfp-dash-sidebar__logo--mark {
	width: var(--sfp-nav-icon);
	height: var(--sfp-nav-icon);
	border-radius: 10px;
}

.sfp-dash-wrap .sfp-dash-sidebar__nav {
	padding: 14px var(--sfp-nav-gutter) 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Active pill should not touch the scroll edge */
.sfp-dash-wrap .sfp-dash-nav__link.is-active {
	margin-right: 2px;
}

/* ---------------------------------------------------------------------------
   Groups: even rhythm + hairline divider between sections
   --------------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-nav__group {
	margin: 0;
	padding: 0;
}

.sfp-dash-wrap .sfp-dash-nav__group + .sfp-dash-nav__group {
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.sfp-dash-wrap .sfp-dash-nav__heading {
	margin: 0 0 6px;
	padding: 0 0 0 2px;
	border-left: 0;                 /* drop the misaligned tick */
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #94a3b8;
}

.sfp-dash-wrap .sfp-dash-nav__links {
	display: flex;
	flex-direction: column;
	gap: var(--sfp-nav-row-gap);
}

/* ---------------------------------------------------------------------------
   Links: fixed icon column, contained active pill, crisp hover
   --------------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-nav__link {
	display: grid;
	grid-template-columns: var(--sfp-nav-icon) 1fr;
	align-items: center;
	column-gap: var(--sfp-nav-gap);
	padding: 7px 10px;
	border-radius: 11px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.2;
	color: #475569;
	text-decoration: none;
	position: relative;
	transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sfp-dash-wrap .sfp-dash-nav__icon {
	width: var(--sfp-nav-icon);
	height: var(--sfp-nav-icon);
	border-radius: 9px;
}

.sfp-dash-wrap .sfp-dash-nav__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfp-dash-wrap .sfp-dash-nav__link:hover:not(.is-active):not(.is-disabled) {
	background: rgba(99, 102, 241, 0.08);
	color: #4338ca;
	transform: none;                /* keep label column from shifting */
}

/* Active = contained pill (equal insets), accent dot instead of edge bar */
.sfp-dash-wrap .sfp-dash-nav__link.is-active {
	padding-left: 10px;             /* normalize: no left-shift from inset bar */
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.16), rgba(236, 72, 153, 0.09));
	color: #4338ca;
	font-weight: 650;
	box-shadow: none;
}

.sfp-dash-wrap .sfp-dash-nav__link.is-active::after {
	content: '';
	position: absolute;
	right: 10px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-radius: 50%;
	background: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
	animation: sfpNavActiveDot 2.4s ease-in-out infinite;
}

.sfp-dash-wrap .sfp-dash-nav__link.is-disabled {
	opacity: 0.4;
}

/* ---------------------------------------------------------------------------
   Footer alignment
   --------------------------------------------------------------------------- */
.sfp-dash-wrap .sfp-dash-sidebar__foot {
	padding: 12px var(--sfp-nav-gutter) 16px;
	gap: 4px;
}

.sfp-dash-wrap .sfp-dash-sidebar__account,
.sfp-dash-wrap .sfp-dash-sidebar__signout {
	padding: 8px 10px;
	border-radius: 9px;
}

/* ===========================================================================
   Idle icon motion — every icon gets gentle continuous life.
   Hover/active layer (in sfp-dash-nav-icons.css) still adds livelier motion.
   =========================================================================== */

/* A soft idle breathing applied to each chip, staggered per group position. */
.sfp-dash-wrap .sfp-dash-nav__icon {
	will-change: transform;
}

.sfp-dash-wrap .sfp-dash-nav__link .sfp-nav-icon {
	transform-origin: center;
}

/* Dashboard — the pulsing tile keeps pulsing at idle (already), add the others drifting */
.sfp-dash-wrap .sfp-nav-icon--dashboard .sfp-nav-icon__tile {
	animation: sfpNavIdleTile 3.6s ease-in-out infinite;
}
.sfp-dash-wrap .sfp-nav-icon--dashboard .sfp-nav-icon__tile:nth-of-type(2) { animation-delay: 0.2s; }
.sfp-dash-wrap .sfp-nav-icon--dashboard .sfp-nav-icon__tile:nth-of-type(3) { animation-delay: 0.4s; }
.sfp-dash-wrap .sfp-nav-icon--dashboard .sfp-nav-icon__tile--pulse { animation: sfpNavTilePulse 2.4s ease-in-out infinite; }

/* Surveys — lines gently scan at idle (was hover-only) */
.sfp-dash-wrap .sfp-nav-icon--surveys .sfp-nav-icon__line {
	animation: sfpNavLineScan 3s ease-in-out infinite;
}
.sfp-dash-wrap .sfp-nav-icon--surveys .sfp-nav-icon__dot {
	animation: sfpNavSpark 2.2s ease-in-out infinite;
}

/* Responses — typing dots bounce at idle */
.sfp-dash-wrap .sfp-nav-icon--responses .sfp-nav-icon__dot {
	animation: sfpNavDotBounce 1.6s ease-in-out infinite;
}

/* Leads — ring rotates + ping at idle */
.sfp-dash-wrap .sfp-nav-icon--leads .sfp-nav-icon__ring {
	transform-origin: 12px 12px;
	animation: sfpNavRingSpin 7s linear infinite;
}
.sfp-dash-wrap .sfp-nav-icon--leads .sfp-nav-icon__ping {
	transform-origin: center;
	animation: sfpNavPing 2.6s ease-out infinite;
}

/* Analytics — bars grow at idle, staggered */
.sfp-dash-wrap .sfp-nav-icon--analytics .sfp-nav-icon__bar {
	transform-origin: bottom center;
	animation: sfpNavBarGrow 2s ease-in-out infinite;
}

/* Templates — top layer floats at idle */
.sfp-dash-wrap .sfp-nav-icon--templates .sfp-nav-icon__layer {
	animation: sfpNavLayerFloat 3s ease-in-out infinite;
}

/* Integrations — connector pulses at idle */
.sfp-dash-wrap .sfp-nav-icon--integrations .sfp-nav-icon__bolt,
.sfp-dash-wrap .sfp-nav-icon--integrations .sfp-nav-icon__plug {
	animation: sfpNavBoltPulse 2s ease-in-out infinite;
}

/* Help — question dot orbits at idle */
.sfp-dash-wrap .sfp-nav-icon--help .sfp-nav-icon__dot {
	transform-origin: 15px 15px;
	animation: sfpNavRingSpin 6s linear infinite;
}

/* Branding — swatch floats, spark twinkles */
.sfp-dash-wrap .sfp-nav-icon--branding .sfp-nav-icon__swatch {
	animation: sfpNavLayerFloat 2.6s ease-in-out infinite;
}
.sfp-dash-wrap .sfp-nav-icon--branding .sfp-nav-icon__spark {
	animation: sfpNavSpark 1.8s ease-in-out infinite;
}

/* Agency — the cluster gently breathes */
.sfp-dash-wrap .sfp-nav-icon--agency {
	animation: sfpNavIdleFloat 3.4s ease-in-out infinite;
}

/* Hover/active intensifies: speed up + lift the whole chip */
.sfp-dash-wrap .sfp-dash-nav__link:hover .sfp-dash-nav__icon,
.sfp-dash-wrap .sfp-dash-nav__link.is-active .sfp-dash-nav__icon {
	transform: translateY(-1px) scale(1.06);
}

.sfp-dash-wrap .sfp-dash-nav__link:hover .sfp-nav-icon--leads .sfp-nav-icon__ring {
	animation-duration: 2.4s;
}
.sfp-dash-wrap .sfp-dash-nav__link:hover .sfp-nav-icon--tools,
.sfp-dash-wrap .sfp-dash-nav__link:hover .sfp-nav-icon--help .sfp-nav-icon__dot {
	animation-duration: 2.2s;
}

@keyframes sfpNavActiveDot {
	0%, 100% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); }
	50%      { box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.08); }
}

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

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

/* ---------------------------------------------------------------------------
   Dark theme tuning
   --------------------------------------------------------------------------- */
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__heading {
	color: #64748b;
}
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__group + .sfp-dash-nav__group {
	border-top-color: rgba(148, 163, 184, 0.14);
}
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__link {
	color: #cbd5e1;
}
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__link:hover:not(.is-active):not(.is-disabled) {
	background: rgba(99, 102, 241, 0.16);
	color: #e0e7ff;
}
html[data-sfp-theme='dark'] .sfp-dash-wrap .sfp-dash-nav__link.is-active {
	background: linear-gradient(90deg, rgba(99, 102, 241, 0.28), rgba(236, 72, 153, 0.14));
	color: #e0e7ff;
}

/* ---------------------------------------------------------------------------
   Collapsed builder rail — center the icon column, hide labels cleanly
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
	.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 {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 7px 0;
	}
	.sfp-dash-wrap--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__link.is-active::after,
	body.sfp-dash--builder .sfp-dash-sidebar.is-builder-collapsed .sfp-dash-nav__link.is-active::after {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Respect reduced motion: stop idle animation entirely
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sfp-dash-wrap .sfp-dash-nav__link.is-active::after,
	.sfp-dash-wrap .sfp-nav-icon--dashboard .sfp-nav-icon__tile,
	.sfp-dash-wrap .sfp-nav-icon--surveys .sfp-nav-icon__line,
	.sfp-dash-wrap .sfp-nav-icon--surveys .sfp-nav-icon__dot,
	.sfp-dash-wrap .sfp-nav-icon--responses .sfp-nav-icon__dot,
	.sfp-dash-wrap .sfp-nav-icon--leads .sfp-nav-icon__ring,
	.sfp-dash-wrap .sfp-nav-icon--leads .sfp-nav-icon__ping,
	.sfp-dash-wrap .sfp-nav-icon--analytics .sfp-nav-icon__bar,
	.sfp-dash-wrap .sfp-nav-icon--templates .sfp-nav-icon__layer,
	.sfp-dash-wrap .sfp-nav-icon--integrations .sfp-nav-icon__bolt,
	.sfp-dash-wrap .sfp-nav-icon--integrations .sfp-nav-icon__plug,
	.sfp-dash-wrap .sfp-nav-icon--help .sfp-nav-icon__dot,
	.sfp-dash-wrap .sfp-nav-icon--branding .sfp-nav-icon__swatch,
	.sfp-dash-wrap .sfp-nav-icon--branding .sfp-nav-icon__spark,
	.sfp-dash-wrap .sfp-nav-icon--agency {
		animation: none !important;
	}
}