{
			--volt-primary: #262B40;
			--volt-secondary: #61DAFB;
			--volt-accent: #F5B759;
			--volt-success: #05A677;
			--volt-info: #0948B3;
			--volt-warning: #F5B759;
			--volt-danger: #FA5252;
			--volt-dark: #262B40;
			--volt-light: #F5F8FB;
			--volt-gray-100: #F5F8FB;
			--volt-gray-200: #E9ECEF;
			--volt-gray-300: #DEE2E6;
			--volt-gray-400: #CED4DA;
			--volt-gray-500: #ADB5BD;
			--volt-gray-600: #93A5BE;
			--volt-gray-700: #66799E;
			--volt-gray-800: #506690;
			--volt-gray-900: #4A5568;
			--volt-body-bg: #F5F8FB;
			--volt-sidebar-bg: #262B40;
			--volt-card-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
			--volt-border-radius: 0.5rem;
		}

		body {
			font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			background: var(--volt-body-bg);
			color: var(--volt-gray-900);
		}


		/* Sidebar Volt style */
		.sidebar {
			position: fixed;
			top: 0;
			left: 0;
			height: 100vh;
			width: 260px;
			background: var(--volt-sidebar-bg);
			z-index: 1000;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.sidebar.collapsed {
			width: 70px;
		}

		.sidebar.collapsed .sidebar-nav-link span,
		.sidebar.collapsed .sidebar-user-name,
		.sidebar.collapsed .sidebar-user-email {
			display: none;
		}

		.sidebar.collapsed .sidebar-nav-link {
			justify-content: center;
			padding: 0.75rem 0;
		}

		.sidebar.collapsed .sidebar-nav-link i {
			margin-right: 0;
			font-size: 1.25rem;
		}

		.sidebar.collapsed .sidebar-brand img {
			display: none;
		}

		.sidebar.collapsed .sidebar-brand::after {
			display: none;
		}

		.sidebar.collapsed .sidebar-user {
			padding: 1rem 0;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.sidebar.collapsed .sidebar-user-avatar {
			margin-right: 0;
		}

		.sidebar.collapsed .sidebar-user div:not(.sidebar-user-avatar) {
			display: none;
		}

		.sidebar.collapsed .sidebar-user .btn {
			padding: 0.5rem 0;
			border: none;
		}

		.sidebar.collapsed .sidebar-user .btn span {
			display: none;
		}

		.sidebar.collapsed .sidebar-user .btn i {
			margin-right: 0 !important;
			font-size: 1.1rem;
		}

		.sidebar-brand {
			padding: 1.5rem;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		}

		.sidebar-brand-icon {
			width: 40px;
			height: 40px;
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--volt-dark);
			font-size: 1.25rem;
			margin-right: 0.75rem;
		}

		.sidebar-brand-text {
			color: #fff;
			font-weight: 700;
			font-size: 1.25rem;
		}

		.sidebar-nav {
			padding: 1rem 0;
		}

		.sidebar-nav-item {
			padding: 0 1rem;
			margin-bottom: 0;
		}

		.sidebar-nav-link {
			display: flex;
			align-items: center;
			padding: 0.5rem 1rem;
			color: rgba(255, 255, 255, 0.7);
			text-decoration: none;
			border-radius: var(--volt-border-radius);
			transition: all 0.2s ease;
		}

		.sidebar-nav-link:hover {
			color: #fff;
			background: rgba(255, 255, 255, 0.1);
		}

		.sidebar-nav-link.active {
			color: #fff;
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
		}

		.sidebar-nav-link.active i {
			color: var(--volt-dark);
		}

		.sidebar-nav-link i {
			width: 20px;
			margin-right: 0.75rem;
			text-align: center;
		}

		.sidebar-user {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 1rem 1.5rem;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.sidebar-user-info {
			display: flex;
			align-items: center;
		}

		.sidebar-user-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--volt-dark);
			font-weight: 700;
			margin-right: 0.75rem;
		}

		.sidebar-user-name {
			color: #fff;
			font-weight: 600;
			font-size: 0.875rem;
		}

		.sidebar-user-email {
			color: rgba(255, 255, 255, 0.5);
			font-size: 0.75rem;
		}

		/* Main content */
		.main-content {
			margin-left: 260px;
			min-height: 100vh;
			transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.sidebar.collapsed ~ .main-content {
			margin-left: 70px;
		}

		@media(max-width: 991.98px) {
			.main-content,
			.sidebar.collapsed ~ .main-content {
				margin-left: 0;
			}
			.sidebar.collapsed {
				width: 260px; /* Keep full width on mobile if somehow toggled */
			}
		}

		.sidebar-toggle-btn {
			position: absolute;
			right: -15px;
			top: 25px;
			width: 30px;
			height: 30px;
			background: var(--volt-secondary);
			border: none;
			border-radius: 50%;
			color: var(--volt-dark);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			z-index: 1100;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.sidebar.collapsed .sidebar-toggle-btn {
			right: 20px;
			top: 25px; /* Adjust position when collapsed */
		}

		.sidebar.collapsed .sidebar-toggle-btn i {
			transform: rotate(180deg);
		}

		/* Cards Volt style */
		.card {
			border: none;
			border-radius: var(--volt-border-radius);
			box-shadow: var(--volt-card-shadow);
			background: #fff;
		}

		.card-header {
			background: transparent;
			border-bottom: 1px solid var(--volt-gray-200);
			padding: 1.25rem;
		}

		.card-body {
			padding: 1.25rem;
		}

		/* Stat cards */
		.stat-card {
			position: relative;
			overflow: hidden;
		}

		.stat-card::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -50%;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle, rgba(97, 218, 251, 0.1) 0%, transparent 70%);
			pointer-events: none;
		}

		.stat-card .stat-icon {
			width: 56px;
			height: 56px;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.5rem;
		}

		.stat-card .stat-icon.icon-primary {
			background: rgba(97, 218, 251, 0.15);
			color: #61DAFB;
		}

		.stat-card .stat-icon.icon-success {
			background: rgba(5, 166, 119, 0.15);
			color: var(--volt-success);
		}

		.stat-card .stat-icon.icon-warning {
			background: rgba(245, 183, 89, 0.15);
			color: var(--volt-warning);
		}

		.stat-card .stat-icon.icon-info {
			background: rgba(9, 72, 179, 0.15);
			color: var(--volt-info);
		}

		.stat-card .stat-value {
			font-size: 1.75rem;
			font-weight: 700;
			color: var(--volt-dark);
		}

		.stat-card .stat-label {
			color: var(--volt-gray-600);
			font-size: 0.875rem;
		}

		/* Buttons Volt style */
		.btn-volt {
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
			border: none;
			color: var(--volt-dark);
			font-weight: 600;
			padding: 0.625rem 1.25rem;
			border-radius: var(--volt-border-radius);
			transition: all 0.2s ease;
		}

		.btn-volt:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 20px rgba(97, 218, 251, 0.4);
			color: var(--volt-dark);
		}

		.btn-volt-dark {
			background: var(--volt-dark);
			color: #fff;
		}

		.btn-volt-dark:hover {
			background: #1a1e2e;
			color: #fff;
			box-shadow: 0 5px 20px rgba(38, 43, 64, 0.4);
		}

		.btn-volt-outline {
			background: transparent;
			border: 2px solid var(--volt-secondary);
			color: var(--volt-dark);
		}

		.btn-volt-outline:hover {
			background: var(--volt-secondary);
			color: var(--volt-dark);
		}

		/* Table Volt style */
		.table-volt {
			border-radius: var(--volt-border-radius);
			overflow: hidden;
		}

		.table-volt thead th {
			background: var(--volt-dark);
			color: #fff;
			font-weight: 600;
			text-transform: uppercase;
			font-size: 0.75rem;
			letter-spacing: 0.5px;
			padding: 1rem 1.25rem;
			border: none;
		}

		.table-volt tbody td {
			padding: 1rem 1.25rem;
			vertical-align: middle;
			border-bottom: 1px solid var(--volt-gray-200);
		}

		.table-volt tbody tr:hover {
			background: rgba(97, 218, 251, 0.05);
		}

		/* Avatar */
		.avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 1rem;
		}

		.avatar-volt {
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
			color: var(--volt-dark);
		}

		/* Badges */
		.badge-volt-success {
			background: rgba(5, 166, 119, 0.15);
			color: var(--volt-success);
			font-weight: 600;
			padding: 0.35rem 0.75rem;
			border-radius: 20px;
		}

		.badge-volt-danger {
			background: rgba(250, 82, 82, 0.15);
			color: var(--volt-danger);
			font-weight: 600;
			padding: 0.35rem 0.75rem;
			border-radius: 20px;
		}

		.badge-volt-info {
			background: rgba(9, 72, 179, 0.15);
			color: var(--volt-info);
			font-weight: 600;
			padding: 0.35rem 0.75rem;
			border-radius: 20px;
		}


		.badge-volt-primary {
			background: rgba(97, 218, 251, 0.15);
			color: #0891B2;
			font-weight: 600;
			padding: 0.35rem 0.75rem;
			border-radius: 20px;
		}

		.badge-volt-secondary {
			background: rgba(108, 117, 125, 0.1);
			color: #6c757d;
			font-weight: 600;
			padding: 0.35rem 0.75rem;
			border-radius: 20px;
		}

		/* Modal Volt */
		.modal-content {
			border: none;
			border-radius: 12px;
			overflow: hidden;
		}

		.modal-header-volt {
			background: var(--volt-dark);
			color: #fff;
			padding: 1.25rem 1.5rem;
			border: none;
		}

		.modal-header-volt .btn-close {
			filter: brightness(0) invert(1);
		}

		/* Login page */
		.login-page {
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, var(--volt-dark) 0%, #1a1e2e 50%, #0d0f17 100%);
			position: relative;
			overflow-x: hidden;
			background-attachment: fixed;
		}

		.login-page::before {
			content: '';
			position: absolute;
			width: 600px;
			height: 600px;
			background: radial-gradient(circle, rgba(97, 218, 251, 0.15) 0%, transparent 70%);
			top: -200px;
			right: -200px;
		}

		.login-page::after {
			content: '';
			position: absolute;
			width: 400px;
			height: 400px;
			background: radial-gradient(circle, rgba(78, 205, 196, 0.1) 0%, transparent 70%);
			bottom: -100px;
			left: -100px;
		}

		.login-card {
			background: #fff;
			border-radius: 16px;
			padding: 2.5rem;
			width: 100%;
			max-width: 420px;
			box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
			position: relative;
			z-index: 10;
			margin: 0 auto;
		}

		@media(max-width: 576px) {
			.login-page {
				align-items: flex-start;
				padding: 1.5rem 0.5rem;
			}
			.login-card {
				padding: 1.25rem;
				border-radius: 12px;
			}
			/* Remove container padding to gain more space */
			.login-page .container {
				padding-left: 0;
				padding-right: 0;
			}
		}

		.login-logo {
			font-size: 2rem;
			font-weight: 800;
			color: var(--volt-dark);
			margin-bottom: 0.5rem;
		}

		.login-logo span {
			color: var(--volt-secondary);
		}

		/* Page header */
		.page-header {
			margin: 1rem;
		}

		.page-title {
			font-size: 1.5rem;
			font-weight: 700;
			color: var(--volt-dark);
			margin-bottom: 0.25rem;
		}

		.page-subtitle {
			color: var(--volt-gray-600);
			font-size: 0.875rem;
		}

		/* Animations */
		.fade-in {
			animation: fadeIn 0.5s ease;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Responsive */
		@media(max-width: 991.98px) {
			.sidebar {
				transform: translateX(-100%);
				box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
			}
			.sidebar.show {
				transform: translateX(0);
			}
			.main-content {
				margin-left: 0;
				padding-top: 5rem;
			}
			.navbar-mobile {
				display: flex !important;
			}
			.sidebar-overlay {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				z-index: 999;
			}
			.sidebar-overlay.show {
				display: block;
			}
			.sidebar-nav {
				padding-top: 4rem !important;
			}
		}

		.navbar-mobile {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 60px;
			background: var(--volt-sidebar-bg);
			z-index: 1001;
			padding: 0 1.5rem;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		}

		.navbar-mobile-brand img {
			height: 35px;
		}

		.navbar-mobile-toggler {
			background: transparent;
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: #fff;
			padding: 0.5rem;
			border-radius: 0.375rem;
			font-size: 1.25rem;
			cursor: pointer;
		}

		.sidebar-close {
			display: none;
			position: absolute;
			top: 1.5rem;
			right: 1.5rem;
			color: rgba(255, 255, 255, 0.7);
			font-size: 1.5rem;
			background: transparent;
			border: none;
			cursor: pointer;
		}

		@media(max-width: 991.98px) {
			.sidebar-close {
				display: block;
			}
		}

		/* Form inputs Volt */
		.form-control {
			border: 1px solid var(--volt-gray-300);
			border-radius: var(--volt-border-radius);
			padding: 0.75rem 1rem;
			transition: all 0.2s ease;
			font-size: 16px !important; /* Prevents auto-zoom on mobile */
		}

		.form-control:focus {
			border-color: var(--volt-secondary);
			box-shadow: 0 0 0 3px rgba(97, 218, 251, 0.15);
		}

		.form-label {
			font-weight: 600;
			color: var(--volt-gray-800);
			margin-bottom: 0.4rem;
		}

		@media(max-width: 576px) {
			.form-control-lg {
				padding: 0.6rem 0.8rem;
				font-size: 16px !important;
			}
			.form-label {
				font-size: 0.85rem;
				margin-bottom: 0.25rem;
			}
		}

		/* Welcome banner */
		.welcome-banner {
			background: linear-gradient(135deg, var(--volt-dark) 0%, #1a1e2e 100%);
			border-radius: var(--volt-border-radius);
			padding: 2rem;
			color: #fff;
			position: relative;
			overflow: hidden;
		}

		.welcome-banner::before {
			content: '';
			position: absolute;
			top: -50%;
			right: -20%;
			width: 300px;
			height: 300px;
			background: radial-gradient(circle, rgba(97, 218, 251, 0.2) 0%, transparent 70%);
		}

		.welcome-banner h3 {
			font-weight: 700;
			margin-bottom: 0.5rem;
		}

		.welcome-banner p {
			color: rgba(255, 255, 255, 0.7);
			margin-bottom: 0;
		}
		/* Scroll to Top Button */
		#scroll-top-btn {
			position: fixed;
			bottom: 30px;
			right: 30px;
			width: 50px;
			height: 50px;
			background: linear-gradient(135deg, var(--volt-secondary) 0%, #4ECDC4 100%);
			color: var(--volt-dark);
			border-radius: 50%;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.25rem;
			cursor: pointer;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
			z-index: 1060;
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
		}

		#scroll-top-btn.show {
			opacity: 1;
			visibility: visible;
			bottom: 25px;
		}

		#scroll-top-btn:hover {
			transform: translateY(-5px);
			box-shadow: 0 6px 20px rgba(97, 218, 251, 0.4);
		}

		@media(max-width: 768px) {
			#scroll-top-btn {
				bottom: 20px;
				right: 20px;
				width: 45px;
				height: 45px;
			}
		}