/* ================= HEADER & SIDEBAR LUXURY & SHINY ================= */

/* 1️⃣ Define CSS variable for gradient */
:root {
  --luxury-gradient: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
}

/* ================= HEADER ================= */
html.color-header .topbar {
	background: var(--luxury-gradient);
	box-shadow: 0 4px 20px rgba(0,0,0,0.7);
	backdrop-filter: blur(8px);
	padding: 12px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease-in-out;
}

html.color-header .topbar .navbar-nav .nav-link {
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.5px;
	transition: all 0.3s ease-in-out;
	text-shadow: 0 0 2px rgba(255,255,255,0.6);
}

html.color-header .topbar .navbar-nav .nav-link:hover {
	color: #ffef00; /* shiny gold on hover */
	text-shadow: 0 0 8px rgba(255,239,0,0.8);
}

html.color-header .search-bar input {
	color: #222;
	background: rgba(255,255,255,0.95);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 12px;
	padding: 8px 15px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.1);
	transition: all 0.3s ease-in-out;
}

html.color-header .search-bar input:focus {
	box-shadow: 0 0 12px rgba(255,239,0,0.7);
	border-color: #ffd700;
	outline: none;
}

html.color-header .user-info .user-name,
html.color-header .user-info .designattion {
	color: #fff;
	font-weight: 600;
	text-shadow: 0 0 3px rgba(255,255,255,0.6);
}

html.color-header .user-box {
	border-left: 1px solid rgba(255,255,255,0.35)!important;
	padding-left: 12px;
}

html.color-header .mobile-toggle-menu {
	color: #fff;
}

/* ================= SIDEBAR ================= */
html.color-sidebar .sidebar-wrapper {
	background: var(--luxury-gradient);
	backdrop-filter: blur(14px);
	border-right: 1px solid rgba(255,255,255,0.05);
	box-shadow: inset -2px 0 15px rgba(0,0,0,0.5);
	border-radius: 15px;
	transition: all 0.4s ease-in-out;
}

html.color-sidebar .sidebar-header {
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding: 15px;
}

html.color-sidebar .logo-icon {
	filter: drop-shadow(0 0 8px rgba(255,239,0,0.9));
}

html.color-sidebar .menu-label {
	color: rgba(255,255,255,0.7);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-size: 12px;
}

html.color-sidebar .sidebar-wrapper .sidebar-header .logo-text,
html.color-sidebar .sidebar-wrapper .sidebar-header .toggle-icon {
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.6);
}

html.color-sidebar .sidebar-wrapper .metismenu a {
	color: rgba(255,255,255,0.95);
	padding: 12px 22px;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
}

html.color-sidebar .sidebar-wrapper .metismenu a:hover,
html.color-sidebar .sidebar-wrapper .metismenu .mm-active>a {
	color: #ffef00;
	background: rgba(255,239,0,0.2);
	box-shadow: 0 0 15px rgba(255,239,0,0.5);
	text-shadow: 0 0 4px rgba(0,0,0,0.4);
}

html.color-sidebar .sidebar-wrapper .metismenu ul {
	background: rgba(255,255,255,0.05);
	border-radius: 10px;
}

/* ================= COLOR CLASSES ================= */
.sidebarcolor1 { --luxury-gradient: linear-gradient(160deg,#0f0c29,#302b63,#24243e); }
.sidebarcolor2 { --luxury-gradient: linear-gradient(160deg,#1f1c2c,#928dab); }
.sidebarcolor3 { --luxury-gradient: linear-gradient(160deg,#ff416c,#ff4b2b); }
.sidebarcolor4 { --luxury-gradient: linear-gradient(160deg,#00b09b,#96c93d); }
.sidebarcolor5 { --luxury-gradient: linear-gradient(160deg,#6a11cb,#2575fc); }
.sidebarcolor6 { --luxury-gradient: linear-gradient(160deg,#ff7e5f,#feb47b); }
.sidebarcolor7 { --luxury-gradient: linear-gradient(160deg,#f953c6,#b91d73); }
.sidebarcolor8 { --luxury-gradient: linear-gradient(160deg,#ff6a00,#ee0979); }

/* Smooth transitions for luxury feel */
html.color-header .topbar,
html.color-sidebar .sidebar-wrapper,
html.color-sidebar .metismenu a,
html.color-header .search-bar input {
	transition: all 0.3s ease-in-out;
}