/* ==========================================================================
   Chipstack Wallet - Glassmorphism, Crextio Gradient, Material You, Soft-UI
   ========================================================================== */

/* 1. Global Page Background (Radial-Gradient Aura) */
.content-body {
	position: relative !important;
	overflow: hidden !important;
	background: 
		radial-gradient(circle at 90% 10%, rgba(255, 246, 229, 0.95) 0%, rgba(255, 255, 255, 0) 65%),
		radial-gradient(circle at 10% 90%, rgba(234, 239, 248, 0.95) 0%, rgba(255, 255, 255, 0) 65%),
		#f7f6f2 !important;
}

body[data-theme-version="dark"] .content-body {
	background: 
		radial-gradient(circle at 90% 10%, rgba(112, 89, 226, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
		radial-gradient(circle at 10% 90%, rgba(255, 94, 94, 0.1) 0%, rgba(0, 0, 0, 0) 60%),
		#090d14 !important;
}

/* 2. Glassmorphic Card Styles */
.content-body .card {
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	border-radius: 24px !important; /* Material You bo-goc */
	box-shadow: 
		0 10px 30px -10px rgba(0, 0, 0, 0.03),
		0 1px 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 15px 35px -5px rgba(112, 89, 226, 0.01) !important;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative;
}

.content-body .card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.55) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	box-shadow: 
		0 20px 40px -15px rgba(0, 0, 0, 0.06),
		0 1px 2px 0 rgba(255, 255, 255, 0.7) inset,
		0 20px 45px -5px rgba(112, 89, 226, 0.03) !important;
}

/* Dark Mode Card Overrides */
body[data-theme-version="dark"] .content-body .card {
	background: rgba(18, 24, 38, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 
		0 10px 35px -10px rgba(0, 0, 0, 0.35),
		0 1px 1px 0 rgba(255, 255, 255, 0.05) inset,
		0 15px 40px -5px rgba(0, 0, 0, 0.2) !important;
}

body[data-theme-version="dark"] .content-body .card:hover {
	background: rgba(18, 24, 38, 0.65) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 
		0 20px 45px -15px rgba(0, 0, 0, 0.45),
		0 1px 2px 0 rgba(255, 255, 255, 0.08) inset !important;
}

/* 3. Colored Stat Cards (Gradients & Micro-Reflections, supports bg-* and text-bg-*) */
.content-body .card.bg-primary,
.content-body .card.text-bg-primary {
	background: linear-gradient(135deg, rgba(112, 89, 226, 0.75), rgba(89, 66, 203, 0.85)) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 
		0 12px 30px -10px rgba(112, 89, 226, 0.35), 
		0 1px 2px 0 rgba(255, 255, 255, 0.4) inset !important;
}
.content-body .card.bg-primary:hover,
.content-body .card.text-bg-primary:hover {
	background: linear-gradient(135deg, rgba(112, 89, 226, 0.8), rgba(89, 66, 203, 0.9)) !important;
	box-shadow: 
		0 20px 40px -12px rgba(112, 89, 226, 0.45), 
		0 1px 2px 0 rgba(255, 255, 255, 0.5) inset !important;
}

.content-body .card.bg-danger,
.content-body .card.text-bg-danger {
	background: linear-gradient(135deg, rgba(255, 94, 94, 0.75), rgba(220, 60, 60, 0.85)) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 
		0 12px 30px -10px rgba(255, 94, 94, 0.35), 
		0 1px 2px 0 rgba(255, 255, 255, 0.4) inset !important;
}
.content-body .card.bg-danger:hover,
.content-body .card.text-bg-danger:hover {
	background: linear-gradient(135deg, rgba(255, 94, 94, 0.8), rgba(220, 60, 60, 0.9)) !important;
	box-shadow: 
		0 20px 40px -12px rgba(255, 94, 94, 0.45), 
		0 1px 2px 0 rgba(255, 255, 255, 0.5) inset !important;
}

.content-body .card.bg-info,
.content-body .card.text-bg-info {
	background: linear-gradient(135deg, rgba(67, 166, 214, 0.75), rgba(43, 137, 182, 0.85)) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 
		0 12px 30px -10px rgba(67, 166, 214, 0.35), 
		0 1px 2px 0 rgba(255, 255, 255, 0.4) inset !important;
}
.content-body .card.bg-info:hover,
.content-body .card.text-bg-info:hover {
	background: linear-gradient(135deg, rgba(67, 166, 214, 0.8), rgba(43, 137, 182, 0.9)) !important;
	box-shadow: 
		0 20px 40px -12px rgba(67, 166, 214, 0.45), 
		0 1px 2px 0 rgba(255, 255, 255, 0.5) inset !important;
}

.content-body .card.bg-success,
.content-body .card.text-bg-success {
	background: linear-gradient(135deg, rgba(43, 193, 85, 0.75), rgba(30, 160, 68, 0.85)) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: 
		0 12px 30px -10px rgba(43, 193, 85, 0.35), 
		0 1px 2px 0 rgba(255, 255, 255, 0.4) inset !important;
}
.content-body .card.bg-success:hover,
.content-body .card.text-bg-success:hover {
	background: linear-gradient(135deg, rgba(43, 193, 85, 0.8), rgba(30, 160, 68, 0.9)) !important;
	box-shadow: 
		0 20px 40px -12px rgba(43, 193, 85, 0.45), 
		0 1px 2px 0 rgba(255, 255, 255, 0.5) inset !important;
}

/* Dark Mode Stat Card Overrides */
body[data-theme-version="dark"] .content-body .card.bg-primary,
body[data-theme-version="dark"] .content-body .card.text-bg-primary {
	background: linear-gradient(135deg, rgba(112, 89, 226, 0.65), rgba(89, 66, 203, 0.75)) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body[data-theme-version="dark"] .content-body .card.bg-danger,
body[data-theme-version="dark"] .content-body .card.text-bg-danger {
	background: linear-gradient(135deg, rgba(255, 94, 94, 0.65), rgba(220, 60, 60, 0.75)) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body[data-theme-version="dark"] .content-body .card.bg-info,
body[data-theme-version="dark"] .content-body .card.text-bg-info {
	background: linear-gradient(135deg, rgba(67, 166, 214, 0.65), rgba(43, 137, 182, 0.75)) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
body[data-theme-version="dark"] .content-body .card.bg-success,
body[data-theme-version="dark"] .content-body .card.text-bg-success {
	background: linear-gradient(135deg, rgba(43, 193, 85, 0.65), rgba(30, 160, 68, 0.75)) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 4. White Buttons inside Stat Cards */
.content-body .card .btn-white {
	background: rgba(255, 255, 255, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 14px !important;
	padding: 8px 16px !important;
	font-weight: 600 !important;
	transition: all 0.25s ease !important;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.content-body .card.bg-primary .btn-white,
.content-body .card.text-bg-primary .btn-white { color: #7059E2 !important; }
.content-body .card.bg-danger .btn-white,
.content-body .card.text-bg-danger .btn-white { color: #FF5E5E !important; }
.content-body .card.bg-info .btn-white,
.content-body .card.text-bg-info .btn-white { color: #43A6D6 !important; }
.content-body .card.bg-success .btn-white,
.content-body .card.text-bg-success .btn-white { color: #2BC155 !important; }

.content-body .card .btn-white:hover {
	background: #ffffff !important;
	transform: scale(1.04) translateY(-1px) !important;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1) !important;
}

/* 5. Typography & Headers */
.content-body .card-title {
	font-weight: 700 !important;
	color: #2D3748 !important;
	letter-spacing: -0.2px;
}

body[data-theme-version="dark"] .content-body .card-title {
	color: #ffffff !important;
}

.content-body .card.bg-primary h4, 
.content-body .card.bg-danger h4, 
.content-body .card.bg-info h2, 
.content-body .card.bg-success h2,
.content-body .card.text-bg-primary p,
.content-body .card.text-bg-primary span,
.content-body .card.text-bg-danger p,
.content-body .card.text-bg-danger span,
.content-body .card.text-bg-info p,
.content-body .card.text-bg-info span,
.content-body .card.text-bg-success p,
.content-body .card.text-bg-success span {
	color: #ffffff !important;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Subtitle text readability in normal white cards */
.content-body .card-body span,
.content-body .card-body p,
.content-body .card-body small {
	color: #475569 !important; /* Darker slate gray instead of light gray */
}

body[data-theme-version="dark"] .content-body .card-body span,
body[data-theme-version="dark"] .content-body .card-body p,
body[data-theme-version="dark"] .content-body .card-body small {
	color: #cbd5e1 !important;
}

/* Force standard white color back inside colored stat cards */
.content-body .card.bg-primary *,
.content-body .card.text-bg-primary *,
.content-body .card.bg-danger *,
.content-body .card.text-bg-danger *,
.content-body .card.bg-info *,
.content-body .card.text-bg-info *,
.content-body .card.bg-success *,
.content-body .card.text-bg-success * {
	color: #ffffff !important;
}

body[data-theme-version="dark"] .content-body .text-muted {
	color: #94a3b8 !important;
}

.content-body .card-header {
	background: transparent !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding: 20px 24px !important;
}

body[data-theme-version="dark"] .content-body .card-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 6. Action Buttons (Material You & Soft-UI Glow) */
.content-body .btn {
	border-radius: 12px !important; /* Rounded corners globally for buttons */
	font-weight: 600 !important;
	padding: 8px 18px !important;
	transition: all 0.2s ease !important;
}

.content-body .btn-primary {
	background: #7059E2 !important;
	border-color: #7059E2 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(112, 89, 226, 0.2) !important;
}

.content-body .btn-primary:hover {
	background: #5942cb !important;
	border-color: #5942cb !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(112, 89, 226, 0.3) !important;
}

.content-body .btn-success {
	background: #2BC155 !important;
	border-color: #2BC155 !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(43, 193, 85, 0.2) !important;
}

.content-body .btn-success:hover {
	background: #22a144 !important;
	border-color: #22a144 !important;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(43, 193, 85, 0.3) !important;
}

/* Force high-contrast white text for primary and success buttons and their child elements */
.content-body .btn-primary,
.content-body .btn-primary *,
.content-body .btn-success,
.content-body .btn-success * {
	color: #ffffff !important;
}

/* 7. Dropdown Controls & Modals & Select Pickers */
.custom-dropdown .btn-outline-primary {
	border: 1px solid rgba(112, 89, 226, 0.3) !important;
	background: rgba(112, 89, 226, 0.05) !important;
	color: #7059E2 !important;
	border-radius: 12px !important;
	padding: 6px 14px !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
}

.custom-dropdown .btn-outline-primary:hover {
	background: #7059E2 !important;
	color: #ffffff !important;
	border-color: #7059E2 !important;
}

.content-body select,
.content-body .bootstrap-select,
.content-body .bootstrap-select .dropdown-toggle,
.content-body .bootstrap-select .btn {
	border-radius: 12px !important; /* Material You rounded dropdowns */
}

.dropdown-menu {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(15px) !important;
	-webkit-backdrop-filter: blur(15px) !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	border-radius: 14px !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

body[data-theme-version="dark"] .dropdown-menu {
	background: rgba(18, 24, 38, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

.dropdown-menu .dropdown-item {
	font-weight: 500 !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	margin: 2px 6px !important;
	width: auto !important;
	transition: all 0.15s ease !important;
}

.dropdown-menu .dropdown-item:hover {
	background: rgba(112, 89, 226, 0.1) !important;
	color: #7059E2 !important;
}

/* 8. Header & Sidebar (OBSIDIAN Glassmorphism - Keeping original dark style) */
.header {
	background: rgba(255, 255, 255, 0.5) !important;
	backdrop-filter: blur(15px) !important;
	-webkit-backdrop-filter: blur(15px) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.deznav {
	background: rgba(30, 41, 59, 0.8) !important; /* Dark Slate Glass */
	backdrop-filter: blur(15px) !important;
	-webkit-backdrop-filter: blur(15px) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.nav-header {
	background: rgba(30, 41, 59, 0.85) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Dark Mode Sidebar & Header Overrides */
body[data-theme-version="dark"] .header {
	background: rgba(11, 15, 23, 0.6) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body[data-theme-version="dark"] .deznav {
	background: rgba(11, 15, 23, 0.6) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body[data-theme-version="dark"] .nav-header {
	background: rgba(11, 15, 23, 0.65) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Header Action Buttons & Avatars styled to fit style */
.header-right .btn-success {
	background: #2BC155 !important;
	border-color: #2BC155 !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 10px rgba(43, 193, 85, 0.15) !important;
	transition: all 0.2s ease !important;
}
.header-right .btn-success:hover {
	background: #22a144 !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(43, 193, 85, 0.25) !important;
}

#wl_header_avatar {
	background: #7059E2 !important;
	border-radius: 50% !important;
	box-shadow: 0 4px 10px rgba(112, 89, 226, 0.2) !important;
}

body[data-theme-version="dark"] #wl_header_balance_container span {
	color: #ffffff !important;
}
body[data-theme-version="dark"] #wl_header_balance {
	color: #ffffff !important;
}

/* 9. Forms & Inputs (Material You Fields) */
.content-body .form-control, 
.content-body select,
.content-body .bootstrap-select .btn,
.content-body .bootstrap-select {
	border-radius: 12px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	background-color: rgba(255, 255, 255, 0.8) !important;
	color: #2D3748 !important;
	font-weight: 500 !important;
	font-size: 14px !important; /* Uniform font size */
	height: 44px !important; /* Resets large custom heights to match buttons */
	padding: 10px 16px !important; /* Uniform padding */
	line-height: 22px !important;
	transition: all 0.2s ease !important;
}

.content-body .form-control:focus, 
.content-body .bootstrap-select .btn:focus {
	border-color: #7059E2 !important;
	box-shadow: 0 0 0 3px rgba(112, 89, 226, 0.15) !important;
	background-color: #ffffff !important;
}

body[data-theme-version="dark"] .content-body .form-control,
body[data-theme-version="dark"] .content-body select,
body[data-theme-version="dark"] .content-body .bootstrap-select .btn,
body[data-theme-version="dark"] .content-body .bootstrap-select {
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	background-color: rgba(18, 24, 38, 0.8) !important;
	color: #e2e8f0 !important;
}

body[data-theme-version="dark"] .content-body .form-control:focus,
body[data-theme-version="dark"] .content-body .bootstrap-select .btn:focus {
	border-color: #7059E2 !important;
	background-color: rgba(18, 24, 38, 0.95) !important;
}

/* 10. Tables & Lists blending */
.content-body .table-responsive,
.content-body table {
	background: transparent !important;
}

.content-body thead.table-primary,
.content-body thead,
.content-body th {
	background: rgba(112, 89, 226, 0.08) !important; /* Soft purple tint */
	color: #7059E2 !important; /* Clear purple text */
	border-color: rgba(112, 89, 226, 0.15) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 11px !important;
	letter-spacing: 0.5px !important;
}

body[data-theme-version="dark"] .content-body thead.table-primary,
body[data-theme-version="dark"] .content-body thead,
body[data-theme-version="dark"] .content-body th {
	background: rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 11. Custom Forecast Icon Wrapper */
.forecast-icon-wrapper,
.content-body div[style*="background-color: rgba(43, 193, 85, 0.1)"] {
	width: 56px !important;
	height: 56px !important;
	background: rgba(43, 193, 85, 0.1) !important;
	border: 1px solid rgba(43, 193, 85, 0.2) !important;
	border-radius: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* 12. Alert boxes rounded Material You override */
.content-body .alert {
	border-radius: 20px !important; /* Material You high rounded style */
	border-width: 1.5px !important;
	padding: 18px 20px !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
}

body[data-theme-version="dark"] .content-body .alert {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* 13. Charts legend/labels readability in Dark Mode */
body[data-theme-version="dark"] .apexcharts-legend-text,
body[data-theme-version="dark"] .apexcharts-text,
body[data-theme-version="dark"] .apexcharts-datalabel,
body[data-theme-version="dark"] .apexcharts-datalabel-label,
body[data-theme-version="dark"] .apexcharts-datalabel-value {
	fill: #cbd5e1 !important;
	color: #cbd5e1 !important;
}

/* 14. Nav Tabs & Nav Underline Rounded style (Topup/Transfer) */
.content-body .nav-tabs,
.content-body .nav-underline {
	border-bottom: 0 !important;
	gap: 8px !important;
	margin-bottom: 20px !important;
}
.content-body .nav-tabs .nav-link,
.content-body .nav-underline .nav-link,
.content-body .card-header-tabs .nav-link,
.content-body #nav-tab button.nav-link,
#underline-topup-tab,
#underline-transfer-tab {
	border-radius: 30px !important; /* Pill shape */
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
	background: rgba(255, 255, 255, 0.5) !important;
	color: #475569 !important;
	padding: 8px 20px !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
}
body[data-theme-version="dark"] .content-body .nav-tabs .nav-link,
body[data-theme-version="dark"] .content-body .nav-underline .nav-link,
body[data-theme-version="dark"] .card-header-tabs .nav-link,
body[data-theme-version="dark"] .content-body #nav-tab button.nav-link,
body[data-theme-version="dark"] #underline-topup-tab,
body[data-theme-version="dark"] #underline-transfer-tab {
	border-color: rgba(255, 255, 255, 0.05) !important;
	background: rgba(18, 24, 38, 0.4) !important;
	color: #cbd5e1 !important;
}
.content-body .nav-tabs .nav-link.active,
.content-body .nav-underline .nav-link.active,
.content-body .card-header-tabs .nav-link.active,
.content-body #nav-tab button.nav-link.active,
#underline-topup-tab.active,
#underline-transfer-tab.active {
	background: #7059E2 !important;
	color: #ffffff !important;
	border-color: #7059E2 !important;
	box-shadow: 0 4px 12px rgba(112, 89, 226, 0.2) !important;
}
body[data-theme-version="dark"] .content-body .nav-tabs .nav-link.active,
body[data-theme-version="dark"] .content-body .nav-underline .nav-link.active,
body[data-theme-version="dark"] .card-header-tabs .nav-link.active,
body[data-theme-version="dark"] .content-body #nav-tab button.nav-link.active,
body[data-theme-version="dark"] #underline-topup-tab.active,
body[data-theme-version="dark"] #underline-transfer-tab.active {
	background: #7059E2 !important;
	border-color: #7059E2 !important;
	box-shadow: 0 4px 15px rgba(112, 89, 226, 0.3) !important;
}
.content-body .nav-underline .nav-link::after,
.content-body .nav-underline .nav-link.active::after,
.content-body #nav-tab button::after {
	display: none !important; /* Hide bootstrap underline line */
}

/* 15. ApexCharts Tooltip styling for Glassmorphism & High Legibility */
.apexcharts-tooltip {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
	color: #2D3748 !important;
}

.apexcharts-tooltip .apexcharts-tooltip-title {
	background: rgba(0, 0, 0, 0.02) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
	color: #2D3748 !important;
	font-weight: 700 !important;
	padding: 8px 12px !important;
}

.apexcharts-tooltip .apexcharts-tooltip-series-group {
	background: transparent !important;
	color: #2D3748 !important;
}

.apexcharts-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text {
	color: #2D3748 !important;
}

.apexcharts-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text-y-label {
	color: #475569 !important; /* Dark slate gray for label name */
	font-weight: 500 !important;
}

.apexcharts-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text-y-value {
	color: #2D3748 !important; /* Dark bold for value */
	font-weight: 700 !important;
}

/* Dark theme overrides for tooltips */
body[data-theme-version="dark"] .apexcharts-tooltip {
	background: rgba(18, 24, 38, 0.95) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
	color: #ffffff !important;
}

body[data-theme-version="dark"] .apexcharts-tooltip .apexcharts-tooltip-title {
	background: rgba(255, 255, 255, 0.03) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	color: #ffffff !important;
}

body[data-theme-version="dark"] .apexcharts-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text-y-label {
	color: #cbd5e1 !important;
}

body[data-theme-version="dark"] .apexcharts-tooltip .apexcharts-tooltip-series-group .apexcharts-tooltip-text-y-value {
	color: #ffffff !important;
}

/* 16. Compact Language Dropdown Style Override */
.content-body #wl_language_select {
	max-width: 200px !important;
	height: 38px !important;
	font-size: 13px !important;
	padding: 6px 12px !important;
	line-height: 20px !important;
}

/* 17. High Contrast & Readability for Light/Pastel Action Buttons */
.content-body .btn.light.btn-primary {
	background-color: rgba(112, 89, 226, 0.12) !important;
	border-color: rgba(112, 89, 226, 0.2) !important;
	color: #7059E2 !important;
}
.content-body .btn.light.btn-primary * {
	color: #7059E2 !important;
}
.content-body .btn.light.btn-primary:hover {
	background-color: #7059E2 !important;
	border-color: #7059E2 !important;
	color: #ffffff !important;
}
.content-body .btn.light.btn-primary:hover * {
	color: #ffffff !important;
}

.content-body .btn.light.btn-success {
	background-color: rgba(43, 193, 85, 0.12) !important;
	border-color: rgba(43, 193, 85, 0.2) !important;
	color: #2BC155 !important;
}
.content-body .btn.light.btn-success * {
	color: #2BC155 !important;
}
.content-body .btn.light.btn-success:hover {
	background-color: #2BC155 !important;
	border-color: #2BC155 !important;
	color: #ffffff !important;
}
.content-body .btn.light.btn-success:hover * {
	color: #ffffff !important;
}

.content-body .btn.light.btn-danger {
	background-color: rgba(255, 94, 94, 0.12) !important;
	border-color: rgba(255, 94, 94, 0.2) !important;
	color: #FF5E5E !important;
}
.content-body .btn.light.btn-danger * {
	color: #FF5E5E !important;
}
.content-body .btn.light.btn-danger:hover {
	background-color: #FF5E5E !important;
	border-color: #FF5E5E !important;
	color: #ffffff !important;
}
.content-body .btn.light.btn-danger:hover * {
	color: #ffffff !important;
}

/* 18. Profile Header Card Alignment & Spacing Overrides */
.content-body .card.rounded-0.h-auto.mb-0 {
	margin-left: 30px !important;
	margin-right: 30px !important;
	margin-top: 15px !important;
	margin-bottom: 20px !important;
	border-radius: 24px !important;
	border: 1px solid rgba(255, 255, 255, 0.45) !important;
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	box-shadow: 
		0 10px 30px -10px rgba(0, 0, 0, 0.03),
		0 1px 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

body[data-theme-version="dark"] .content-body .card.rounded-0.h-auto.mb-0 {
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: rgba(18, 24, 38, 0.55) !important;
	box-shadow: 
		0 10px 35px -10px rgba(0, 0, 0, 0.35),
		0 1px 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

/* Specific profile tab footer styling to prevent line overlapping */
.content-body .card.rounded-0.h-auto.mb-0 .card-footer {
	background: transparent !important;
	border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
	padding-top: 14px !important;
	padding-bottom: 12px !important;
}

body[data-theme-version="dark"] .content-body .card.rounded-0.h-auto.mb-0 .card-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

@media only screen and (max-width: 767px) {
	.content-body .card.rounded-0.h-auto.mb-0 {
		margin-left: 15px !important;
		margin-right: 15px !important;
		margin-top: 10px !important;
		margin-bottom: 15px !important;
		border-radius: 16px !important;
	}
	.content-body .card.rounded-0.h-auto.mb-0 .card-footer {
		padding-top: 10px !important;
		padding-bottom: 8px !important;
	}
}

/* 20. Premium Mac-style Gradient & Glassmorphism Login Page */
.auth-wrapper {
	position: relative !important;
	overflow: hidden !important;
	background: transparent !important;
	background-blend-mode: normal !important; /* Disable black-and-white luminosity blend mode from style.css */
	background-color: transparent !important;  /* Disable dark base color from style.css */
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* Premium macOS Sequoia Fluid Glass Background with Ultra-Smooth Blur */
.auth-wrapper::before {
	content: "" !important;
	position: absolute !important;
	top: -40px !important;
	left: -40px !important;
	right: -40px !important;
	bottom: -40px !important;
	background: url('../images/pic/login-bg.png') no-repeat center center/cover !important;
	filter: blur(40px) saturate(1.3) !important; /* Deep blur creates an ultra-smooth high-res gradient mesh and removes all pixelation */
	z-index: -2 !important;
	transform: scale(1.1) !important; /* Scale up slightly to prevent white edges caused by blur */
	display: block !important;
}

/* Remove the dark overlay from style.css */
.auth-wrapper::after {
	content: none !important;
	display: none !important;
}

/* Premium macOS SVG wave background (deprecated) */
.auth-wrapper .mac-wave-bg {
	display: none !important;
}

.auth-wrapper .card {
	background: rgba(255, 255, 255, 0.4) !important;
	backdrop-filter: blur(28px) !important;
	-webkit-backdrop-filter: blur(28px) !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 28px !important;
	box-shadow: 
		0 25px 50px -12px rgba(0, 0, 0, 0.08),
		0 1px 2px 0 rgba(255, 255, 255, 0.5) inset !important;
	overflow: hidden;
	z-index: 10 !important;
}

.auth-wrapper .card h3 {
	font-weight: 700 !important;
	color: #2D3748 !important;
	letter-spacing: -0.5px;
}

.auth-wrapper .card p {
	color: #475569 !important;
	font-weight: 500 !important;
}

/* Dark Mode Login Page Spacing and Gradient overrides */
body[data-theme-version="dark"] .auth-wrapper {
	background: transparent !important;
	background-blend-mode: normal !important;
	background-color: transparent !important;
}

body[data-theme-version="dark"] .auth-wrapper::before {
	content: "" !important;
	position: absolute !important;
	top: -40px !important;
	left: -40px !important;
	right: -40px !important;
	bottom: -40px !important;
	background: url('../images/pic/login-bg.png') no-repeat center center/cover !important;
	filter: blur(40px) saturate(1.3) brightness(0.85) !important; /* Slightly dim for dark mode comfort */
	z-index: -2 !important;
	transform: scale(1.1) !important;
	display: block !important;
}

body[data-theme-version="dark"] .auth-wrapper::after {
	content: none !important;
	display: none !important;
}

body[data-theme-version="dark"] .auth-wrapper .mac-wave-bg {
	display: none !important;
}

body[data-theme-version="dark"] .auth-wrapper .card {
	background: rgba(18, 24, 38, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 
		0 25px 55px rgba(0, 0, 0, 0.45),
		0 1px 1px 0 rgba(255, 255, 255, 0.05) inset !important;
}

body[data-theme-version="dark"] .auth-wrapper .card h3 {
	color: #ffffff !important;
}

body[data-theme-version="dark"] .auth-wrapper .card p {
	color: #cbd5e1 !important;
}