/* Dark Mode Feature */

/* Smooth Transitions */
body, #header, .box, #menu ul li, h1, h2, h3, h4, h5, h6, strong, b {
	transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

#sidebar {
	transition: margin-left 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}

#sidebar:after {
	transition: background-color 0.5s ease;
}

input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
	transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

#menu ul {
	transition: color 0.5s ease;
}

/* Dark Mode Toggle */
#dark-mode-toggle {
	position: fixed;
	bottom: 30px;
	right: 90px;
	width: 50px;
	height: 50px;
	background-color: var(--accent1);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	color: #ffffff;
	z-index: 9000;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease;
	font-size: 1.5rem;
}

#dark-mode-toggle:hover {
	transform: scale(1.1);
	background-color: var(--accent1muted);
}

/* Dark Mode Styles */
body.dark-mode {
	background-color: #1f2226;
	color: #c0c0c0;
	color-scheme: dark;
}

body.dark-mode a {
	color: #f85050;
}

body.dark-mode #sidebar {
	background-color: rgba(36, 41, 46, 0.5);
	backdrop-filter: blur(40px);
	-webkit-backdrop-filter: blur(40px);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, 
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode strong, body.dark-mode b {
	color: #ffffff;
}

body.dark-mode .box {
	border-color: rgba(255,255,255,0.15);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode select,
body.dark-mode textarea {
	background-color: #2f3640;
	border-color: rgba(255,255,255,0.15);
	color: #ffffff;
}

body.dark-mode input:focus, 
body.dark-mode select:focus, 
body.dark-mode textarea:focus {
	border-color: #f85050;
	box-shadow: 0 0 0 1px #f85050;
}

body.dark-mode #menu ul li {
	border-top-color: rgba(255,255,255,0.15);
}

/* Fix for Header and Sidebar injected content */
body.dark-mode #header {
	background-color: #1f2226;
}

body.dark-mode #menu ul {
	color: #ffffff;
}

body.dark-mode #menu ul a:hover,
body.dark-mode #menu ul span:hover {
	color: #f85050 !important;
	background-color: rgba(248, 80, 80, 0.1);
}

body.dark-mode #menu ul a.opener:hover:before,
body.dark-mode #menu ul span.opener:hover:before {
	color: #f85050;
}

body.dark-mode #menu ul a.active,
body.dark-mode #menu ul span.active {
	background-color: #930706;
	color: white !important;
}

body.dark-mode #menu ul a.active:before,
body.dark-mode #menu ul span.active:before {
	color: #1f2226;
}

body.dark-mode .toggle:before {
	color: #ffffff;
}

body.dark-mode table th {
	color: #dcdcdc;
}

body.dark-mode .button.disabled,
body.dark-mode .button:disabled {
	color: #dcdcdc;
	opacity: 0.5;
}

body.dark-mode #search form:before {
	color: #f85050;
}

/* ApexCharts Dark Mode Overrides */
body.dark-mode .apexcharts-xaxis-label,
body.dark-mode .apexcharts-yaxis-label,
body.dark-mode .apexcharts-text tspan {
	fill: #ffffff !important;
}