/**
 * Navigation Components
 * Remote Madam Design System
 */

/* ============================================
   NAVBAR
   ============================================ */

.navbar {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	transition: all var(--transition-base) ease;
}

.navbar--scrolled {
	background-color: rgba(18, 18, 18, 0.95);
	backdrop-filter: blur(10px);
	box-shadow: var(--shadow-md);
}

.navbar__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-4) var(--container-padding);
}

.navbar__brand {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
}

.navbar__logo {
	height: 50px;
	width: auto;
}

.navbar__name {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
}

.navbar__menu {
	display: flex;
	align-items: center;
	gap: var(--spacing-6);
}

.navbar__link {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
	transition: color var(--transition-fast) ease;
	position: relative;
}

.navbar__link:hover,
.navbar__link--active {
	color: var(--color-white);
}

.navbar__link--active::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gradient-primary);
	border-radius: var(--radius-full);
}

.navbar__actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
}

.navbar__toggle {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface-hover);
	border-radius: var(--radius-md);
	color: var(--color-white);
	transition: all var(--transition-fast) ease;
}

.navbar__toggle:hover {
	background-color: var(--color-surface-active);
}

/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--color-surface);
	z-index: var(--z-modal);
	transform: translateX(-100%);
	transition: transform var(--transition-base) ease;
	overflow-y: auto;
}

.mobile-menu--open {
	transform: translateX(0);
}

.mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-4) var(--container-padding);
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__close {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface-hover);
	border-radius: var(--radius-md);
	color: var(--color-white);
}

.mobile-menu__content {
	padding: var(--spacing-6);
}

.mobile-menu__link {
	display: block;
	padding: var(--spacing-3) 0;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu__link:last-child {
	border-bottom: none;
}

.mobile-menu__actions {
	padding: var(--spacing-6);
	border-top: 1px solid var(--color-border);
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-4) 0;
	font-size: var(--font-size-sm);
}

.breadcrumbs__item {
	color: var(--color-muted);
	transition: color var(--transition-fast) ease;
}

.breadcrumbs__item:hover {
	color: var(--color-white);
}

.breadcrumbs__item--active {
	color: var(--color-white);
}

.breadcrumbs__separator {
	color: var(--color-border);
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination {
	display: flex;
	align-items: center;
	gap: var(--spacing-2);
	margin-top: var(--spacing-8);
}

.pagination__item {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-fast) ease;
}

.pagination__item:hover {
	background-color: var(--color-surface-hover);
	border-color: var(--color-border-hover);
	color: var(--color-white);
}

.pagination__item--active {
	background: var(--gradient-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.pagination__item--disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pagination__item--disabled:hover {
	background-color: var(--color-surface);
	border-color: var(--color-border);
	color: var(--color-muted);
}

/* ============================================
   STEPS
   ============================================ */

.steps {
	display: flex;
	align-items: center;
	gap: var(--spacing-4);
	margin-bottom: var(--spacing-8);
}

.steps__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-3);
	flex: 1;
}

.steps__number {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	transition: all var(--transition-fast) ease;
}

.steps__item--active .steps__number {
	background: var(--gradient-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.steps__item--completed .steps__number {
	background-color: var(--color-success);
	border-color: var(--color-success);
	color: var(--color-white);
}

.steps__label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-muted);
}

.steps__item--active .steps__label {
	color: var(--color-white);
}

.steps__connector {
	flex: 1;
	height: 2px;
	background-color: var(--color-border);
}

.steps__item--completed .steps__connector {
	background-color: var(--color-success);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	.navbar__menu {
		display: none;
	}

	.navbar__toggle {
		display: flex;
	}

	.breadcrumbs {
		overflow-x: auto;
		white-space: nowrap;
	}

	.steps {
		flex-direction: column;
		align-items: flex-start;
	}

	.steps__connector {
		display: none;
	}
}