/*============================================================================================*/
/* Modern admin theme — light "Mazer"-inspired palette + overrides on top of Matrix Admin. */
/*============================================================================================*/

:root {
	--color-primary: #435EBE;
	--color-primary-dark: #25396F;
	--color-primary-light: #5F7AD1;
	--color-accent: #57CAEB;
	--color-accent-hover: #3BB4D6;
	--color-success: #5DDAB4;
	--color-danger: #FF7976;
	--color-purple: #9694FF;
	--color-text: #25396F;
	--color-text-muted: #8493C4;
	--color-bg: #F2F7FF;
	--color-surface: #ffffff;
	--color-border: #E5EAF5;
	--color-sidebar: #ffffff;
	--color-sidebar-hover: #EEF1FB;

	/* matrix-style.css defines its own variable system — override it here so every
	   selector already built on var(--primary)/var(--accent) picks up the new palette. */
	--primary: var(--color-primary);
	--primary-dark: var(--color-primary-dark);
	--accent: var(--color-accent);
	--accent-dark: var(--color-accent-hover);
	--danger: var(--color-danger);
}

body {
	background-color: var(--color-bg);
	color: var(--color-text);
}

#header {
	background: var(--color-surface) !important;
	border-bottom: 1px solid var(--color-border);
}

#header h1 a {
	color: var(--color-primary) !important;
}

#user-nav.navbar-inverse {
	left: auto !important;
	right: 20px !important;
	top: 20px !important;
	background-color: transparent !important;
	border-color: transparent;
	box-shadow: none;
}

#user-nav > ul {
	display: flex;
	align-items: center;
	gap: 4px;
	border: none !important;
}

#user-nav > ul > li {
	border: none !important;
}

#user-nav .nav > li > a {
	color: var(--color-text) !important;
	border-radius: 8px;
	padding: 8px 12px !important;
}

 

#sidebar > ul {
	background-color: var(--color-sidebar) !important;
	border-right: 1px solid var(--color-border);
	min-height: 100vh;
}


#sidebar > ul > li {
	margin: 3px 8px;
	border-radius: 8px;
}



#sidebar > ul > li > a {
	color: var(--color-text) !important;
	border-left: none;
	border-radius: 8px;
}

#sidebar > ul > li > a > i {
	color: var(--color-text-muted) !important;
}

#sidebar > ul > li > a:hover {
	background-color: var(--color-sidebar-hover) !important;
	color: var(--color-primary) !important;
}

#sidebar > ul > li.active,
#sidebar > ul > li.submenu.open {
	background-color: transparent !important;
	box-shadow: none !important;
}

#sidebar > ul > li.active > a {
	background: var(--color-primary) !important;
	color: var(--color-surface) !important;
	border-left: none;
	border-radius: 8px;
	font-weight: 600;
}

#sidebar > ul > li.active > a > i,
#sidebar > ul > li:hover > a > i {
	color: inherit !important;
}

#sidebar > ul li ul {
	background-color: var(--color-sidebar) !important;
}

#sidebar > ul li ul li a {
	color: var(--color-text-muted) !important;
}

#sidebar > ul li ul li a:hover,
#sidebar > ul li ul li.active a {
	background-color: var(--color-sidebar-hover) !important;
	color: var(--color-primary) !important;
	border-radius: 8px;
}

























 
 

.box,
.widget-box {
	border-color: var(--color-border);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(37, 57, 111, 0.06);
    overflow: visible !important;
}

.box-header,
.widget-title,
.panel-heading {
	background-color: var(--color-surface);
	border-bottom: 2px solid var(--color-accent);
}

.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.btn-primary:hover {
	background-color: var(--color-primary-light) !important;
	border-color: var(--color-primary-light) !important;
}

.btn-success {
	background-color: var(--color-success) !important;
	border-color: var(--color-success) !important;
	color: var(--color-primary-dark) !important;
}

.btn-danger {
	background-color: var(--color-danger) !important;
	border-color: var(--color-danger) !important;
}

.btn-warning {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	color: var(--color-primary-dark) !important;
}

.table-bordered thead th,
table thead th {
	background-color: var(--color-bg);
	color: var(--color-primary-dark);
}

.nav-tabs > li.active > a {
	border-top: 2px solid var(--color-accent);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
	border-color: var(--color-border);
	border-radius: 8px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(67, 94, 190, 0.18);
}

/* Dashboard quick-action tiles (Dashboard/Admin/Users/Orders/Settings/Logout) —
   cycle through the Mazer-style stat-icon colors (purple/cyan/green/coral) */
.quick-actions li.bg_lb,
.bg_db,
.bg_lv {
	background: var(--color-purple) !important;
}

.quick-actions li {
	border-radius: 10px;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-shadow: 0 2px 10px rgba(37, 57, 111, 0.08);
}

.quick-actions li:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(37, 57, 111, 0.14);
}

.quick-actions li:nth-child(4n+2) {
	background: var(--color-accent) !important;
}

.quick-actions li:nth-child(4n+3) {
	background: var(--color-success) !important;
}

.quick-actions li:nth-child(4n+3) a {
	color: var(--color-primary-dark) !important;
}

.quick-actions li:nth-child(4n) {
	background: var(--color-danger) !important;
}