/**
 * Admin Sidebar Styles
 * Beautiful sidebar navigation for admin panel
 */

/* Sidebar Base */
#admin-sidebar {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 191, 166, 0.3) transparent;
}

#admin-sidebar::-webkit-scrollbar {
	width: 6px;
}

#admin-sidebar::-webkit-scrollbar-track {
	background: transparent;
}

#admin-sidebar::-webkit-scrollbar-thumb {
	background: rgba(0, 191, 166, 0.3);
	border-radius: 3px;
}

#admin-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 191, 166, 0.5);
}

/* Sidebar Navigation Links */
#admin-sidebar nav a {
	position: relative;
	overflow: hidden;
}

#admin-sidebar nav a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	background: linear-gradient(90deg, var(--accent1), var(--accent2));
	transition: width 0.3s ease;
	opacity: 0.1;
}

#admin-sidebar nav a:hover::before,
#admin-sidebar nav a.active::before {
	width: 100%;
}

/* Active State Enhancement */
#admin-sidebar nav a.active {
	box-shadow: 0 4px 12px rgba(0, 191, 166, 0.15);
}

/* Badge Animation */
#admin-sidebar nav a .badge {
	animation: pulse 2s ease-in-out infinite;
}

/* Mobile Responsive */
@media (max-width: 1023px) {
	#admin-sidebar {
		box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
	}
	
	#sidebar-overlay {
		backdrop-filter: blur(4px);
	}
}

/* Desktop: Always visible */
@media (min-width: 1024px) {
	#admin-sidebar {
		transform: translateX(0) !important;
	}
	
	#sidebar-toggle {
		display: none;
	}
	
	/* Adjust main content when sidebar is visible */
	body[data-area="admin"] main,
	body.admin-area main {
		margin-left: 16rem; /* 256px = w-64 */
	}
	
	/* Alternative: Use class-based approach */
	.admin-content {
		margin-left: calc(16rem + 1rem);
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* Light Theme Adjustments */
[data-theme="light"] #admin-sidebar {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] #admin-sidebar nav a:hover {
	background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] #admin-sidebar nav a.active {
	background: linear-gradient(90deg, rgba(0, 191, 166, 0.1), rgba(45, 156, 219, 0.1));
}

/* Dark Theme Adjustments */
[data-theme="dark"] #admin-sidebar {
	background: rgba(22, 27, 34, 0.95);
	backdrop-filter: blur(20px);
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] #admin-sidebar nav a:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* Smooth Transitions */
#admin-sidebar,
#admin-sidebar nav a {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Hover Effect */
#admin-sidebar nav a:hover svg {
	transform: scale(1.1);
}

#admin-sidebar nav a svg {
	transition: transform 0.2s ease;
}