.ac-sidebar {
	background: var(--ac-white);
	border: 0.5px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--space-2);

	@media (--below-md) {
		display: none;
	}

	/* ── Profile section ── */
	&__profile {
		padding: 14px var(--space-2) var(--space-3);
		text-align: center;
		border-block-end: 0.5px solid var(--ac-border);
		margin-block-end: var(--space-2);
	}

	&__avatar {
		inline-size: 52px;
		block-size: 52px;
		border-radius: var(--radius-full);
		background: var(--ac-primary-light);
		border: 2px solid var(--ac-primary-mid);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: var(--text-lg);
		font-weight: var(--weight-semibold);
		color: var(--ac-primary-hover);
		margin-inline: auto;
		margin-block-end: var(--space-2);
		background-size: cover;
		background-position: center;
		overflow: hidden;

		& img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}
	}

	&__name {
		font-size: var(--text-base);
		font-weight: var(--weight-medium);
		color: var(--ac-text);
	}

	/* ── Navigation ── */
	&__list {
		list-style: none;
	}

	&__item {
		margin-block-end: 3px;
	}

	&__link {
		display: flex;
		align-items: center;
		gap: calc(var(--space-2) + 1px);
		padding: var(--space-2) calc(var(--space-2) + 2px);
		border-radius: var(--ac-radius);
		font-size: var(--text-base);
		font-weight: var(--weight-medium);
		color: var(--ac-text-muted);
		text-decoration: none;
		transition:
			background var(--duration-fast) var(--ease-out),
			color var(--duration-fast) var(--ease-out);

		&:hover {
			background: var(--ac-bg);
			color: var(--ac-text);

			& .ac-sidebar__icon svg {
				stroke: var(--ac-text-muted);
			}
		}

		&--active {
			background: var(--ac-primary-light);
			color: var(--ac-primary-hover);

			& .ac-sidebar__icon svg {
				stroke: var(--ac-primary);
			}
		}

		&--danger {
			color: var(--ac-error);

			& .ac-sidebar__icon svg {
				stroke: var(--ac-error);
			}
		}
	}

	&__icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;

		& svg {
			inline-size: 14px;
			block-size: 14px;
			stroke: var(--ac-text-hint);
			transition: stroke var(--duration-fast) var(--ease-out);
		}
	}

	&__divider {
		block-size: 0.5px;
		background: var(--ac-border);
		margin-block: var(--space-1) var(--space-2);
	}
}

/* ── Mobile navigation ── */
.ac-mobile-nav {
	display: none;
	background: var(--ac-white);
	border: 0.5px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	padding: var(--space-1);
	margin-block-end: var(--space-4);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */

	&::-webkit-scrollbar {
		display: none;
	}

	@media (--below-md) {
		display: block;
	}

	&__list {
		list-style: none;
		display: flex;
		gap: 2px;
	}

	&__item {
		flex-shrink: 0;
	}

	&__link {
		display: flex;
		align-items: center;
		gap: calc(var(--space-1) + 2px);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--ac-radius);
		font-size: var(--text-base);
		font-weight: var(--weight-medium);
		color: var(--ac-text-muted);
		text-decoration: none;
		white-space: nowrap;
		transition:
			background var(--duration-fast) var(--ease-out),
			color var(--duration-fast) var(--ease-out);

		&:hover {
			background: var(--ac-bg);
			color: var(--ac-text);
		}

		&--active {
			background: var(--ac-primary-light);
			color: var(--ac-primary-hover);

			& .ac-mobile-nav__icon svg {
				stroke: var(--ac-primary);
			}
		}
	}

	&__icon {
		display: flex;
		align-items: center;

		& svg {
			inline-size: 14px;
			block-size: 14px;
			stroke: var(--ac-text-hint);
		}
	}
}