/* Dark Mode CSS - Add to header without modifying main CSS */
/* ========================================================= */

/* Dark Mode - Nav Menu Specific Styles */
/* ==================================== */

/* Main Nav Menu */
body.dark-mode .nav_menu {
	background: var(--dark-header) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

/* Top Navigation Bar */
body.dark-mode .navbar-nav > li > a {
	color: var(--dark-text) !important;
}

body.dark-mode .navbar-nav > li > a:hover,
body.dark-mode .navbar-nav > li > a:focus {
	background-color: var(--dark-hover) !important;
	color: var(--dark-text) !important;
}

/* Top Search Box */
body.dark-mode .top_search .form-control {
	background: var(--dark-input) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .top_search .form-control:focus {
	background: var(--dark-input) !important;
	border-color: var(--dark-success) !important;
	box-shadow: 0 0 5px rgba(26, 187, 156, 0.3) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .top_search .input-group-btn button {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	border-left: 0 !important;
	color: var(--dark-text) !important;
}

body.dark-mode .top_search .input-group-btn button:hover {
	background: var(--dark-hover) !important;
}

/* Notifications Dropdown */
body.dark-mode .dropdown-menu.msg_list {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .dropdown-menu.msg_list:after {
	border-bottom-color: var(--dark-border) !important;
}

body.dark-mode ul.msg_list li {
	background: var(--dark-input) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode ul.msg_list li:hover {
	background: var(--dark-hover) !important;
}

body.dark-mode ul.msg_list li a {
	color: var(--dark-text) !important;
}

body.dark-mode ul.msg_list li a .time {
	color: var(--dark-muted) !important;
}

body.dark-mode ul.msg_list li a .message {
	color: var(--dark-text) !important;
}

/* User Profile Dropdown */
body.dark-mode .user-profile img {
	border: 2px solid var(--dark-border) !important;
}

body.dark-mode .dropdown-menu > li > a {
	color: var(--dark-text) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .dropdown-menu > li > a:hover {
	background: var(--dark-hover) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .dropdown-menu > li:last-child > a {
	border-bottom: none !important;
}

/* Info Number Badges */
body.dark-mode .info-number .badge {
	background: var(--dark-success) !important;
	color: white !important;
	border: 1px solid var(--dark-border) !important;
}

/* Toggle Button (Hamburger Menu) */
body.dark-mode .toggle a {
	color: var(--dark-text) !important;
}

body.dark-mode .toggle a:hover {
	color: var(--dark-success) !important;
	background: var(--dark-hover) !important;
}

/* Navbar Brand/Logo Area */
body.dark-mode .navbar-header {
	background: var(--dark-header) !important;
}

body.dark-mode .site_title {
	color: var(--dark-text) !important;
}

body.dark-mode .site_title i {
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

/* Top Menu Active States */
body.dark-mode .nav.top_menu > li.active > a {
	background: var(--dark-success) !important;
	color: white !important;
}

body.dark-mode .nav.top_menu > li > a:hover {
	background: var(--dark-hover) !important;
	color: var(--dark-text) !important;
}

/* Page Title Area */
body.dark-mode .page-title {
	background: var(--dark-header) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .page-title h3 {
	color: var(--dark-text) !important;
}

/* Breadcrumbs (if any) */
body.dark-mode .breadcrumb {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .breadcrumb > li + li:before {
	color: var(--dark-muted) !important;
}

body.dark-mode .breadcrumb > .active {
	color: var(--dark-muted) !important;
}

/* Nav Tabs in Content */
body.dark-mode .nav.nav-tabs {
	background: var(--dark-card) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .nav.nav-tabs > li > a {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .nav.nav-tabs > li.active > a,
body.dark-mode .nav.nav-tabs > li.active > a:hover,
body.dark-mode .nav.nav-tabs > li.active > a:focus {
	background: var(--dark-card) !important;
	border-bottom-color: var(--dark-card) !important;
	color: var(--dark-success) !important;
}

body.dark-mode .nav.nav-tabs > li > a:hover {
	background: var(--dark-hover) !important;
	border-color: var(--dark-border) !important;
}

/* Bar Tabs (Horizontal Tabs) */
body.dark-mode ul.bar_tabs {
	background: var(--dark-card) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode ul.bar_tabs > li {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode ul.bar_tabs > li > a {
	background: var(--dark-card) !important;
	color: var(--dark-text) !important;
}

body.dark-mode ul.bar_tabs > li.active {
	border-color: var(--dark-border) !important;
	border-bottom-color: var(--dark-card) !important;
}

body.dark-mode ul.bar_tabs > li.active > a {
	background: var(--dark-card) !important;
	color: var(--dark-success) !important;
}

body.dark-mode ul.bar_tabs > li > a:hover {
	background: var(--dark-hover) !important;
}

/* Mobile Nav Toggle */
@media (max-width: 991px) {
	body.dark-mode .navbar-toggle {
		background: var(--dark-card) !important;
		border: 1px solid var(--dark-border) !important;
	}

	body.dark-mode .navbar-toggle .icon-bar {
		background: var(--dark-text) !important;
	}

	body.dark-mode .navbar-collapse {
		background: var(--dark-card) !important;
		border: 1px solid var(--dark-border) !important;
	}
}

/* Right Side Navigation (if exists) */
body.dark-mode .nav-right {
	background: var(--dark-header) !important;
}

/* Navigation Icons */
body.dark-mode .navbar-nav > li > a i {
	color: var(--dark-text) !important;
}

body.dark-mode .navbar-nav > li > a:hover i {
	color: var(--dark-success) !important;
}

/* Navbar Divider */
body.dark-mode .navbar .divider-vertical {
	border-right: 1px solid var(--dark-border) !important;
}

/* Dark Mode - Bootstrap Buttons */
/* ============================= */

/* Primary Button */
body.dark-mode .btn-primary {
	background: #0d6efd !important;
	border-color: #0d6efd !important;
	color: white !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode .btn-primary:focus,
body.dark-mode .btn-primary:active,
body.dark-mode .btn-primary.active {
	background: #0b5ed7 !important;
	border-color: #0a58ca !important;
	color: white !important;
}

body.dark-mode .btn-primary:disabled {
	background: #0d6efd !important;
	border-color: #0d6efd !important;
	opacity: 0.65 !important;
}

/* Success Button */
body.dark-mode .btn-success {
	background: #198754 !important;
	border-color: #198754 !important;
	color: white !important;
}

body.dark-mode .btn-success:hover,
body.dark-mode .btn-success:focus,
body.dark-mode .btn-success:active,
body.dark-mode .btn-success.active {
	background: #157347 !important;
	border-color: #146c43 !important;
	color: white !important;
}

body.dark-mode .btn-success:disabled {
	background: #198754 !important;
	border-color: #198754 !important;
	opacity: 0.65 !important;
}

/* Info Button */
body.dark-mode .btn-info {
	background: #0dcaf0 !important;
	border-color: #0dcaf0 !important;
	color: #000 !important;
}

body.dark-mode .btn-info:hover,
body.dark-mode .btn-info:focus,
body.dark-mode .btn-info:active,
body.dark-mode .btn-info.active {
	background: #31d2f2 !important;
	border-color: #25cff2 !important;
	color: #000 !important;
}

/* Warning Button */
body.dark-mode .btn-warning {
	background: #ffc107 !important;
	border-color: #ffc107 !important;
	color: #000 !important;
}

body.dark-mode .btn-warning:hover,
body.dark-mode .btn-warning:focus,
body.dark-mode .btn-warning:active,
body.dark-mode .btn-warning.active {
	background: #ffca2c !important;
	border-color: #ffc720 !important;
	color: #000 !important;
}

/* Danger Button */
body.dark-mode .btn-danger {
	background: #dc3545 !important;
	border-color: #dc3545 !important;
	color: white !important;
}

body.dark-mode .btn-danger:hover,
body.dark-mode .btn-danger:focus,
body.dark-mode .btn-danger:active,
body.dark-mode .btn-danger.active {
	background: #bb2d3b !important;
	border-color: #b02a37 !important;
	color: white !important;
}

/* Dark Button */
body.dark-mode .btn-dark {
	background: #212529 !important;
	border-color: #212529 !important;
	color: white !important;
}

body.dark-mode .btn-dark:hover,
body.dark-mode .btn-dark:focus,
body.dark-mode .btn-dark:active,
body.dark-mode .btn-dark.active {
	background: #424649 !important;
	border-color: #373b3e !important;
	color: white !important;
}

/* Light Button */
body.dark-mode .btn-light {
	background: #f8f9fa !important;
	border-color: #f8f9fa !important;
	color: #000 !important;
}

body.dark-mode .btn-light:hover,
body.dark-mode .btn-light:focus,
body.dark-mode .btn-light:active,
body.dark-mode .btn-light.active {
	background: #f9fafb !important;
	border-color: #f9fafb !important;
	color: #000 !important;
}

/* Secondary Button */
body.dark-mode .btn-secondary {
	background: #6c757d !important;
	border-color: #6c757d !important;
	color: white !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode .btn-secondary:focus,
body.dark-mode .btn-secondary:active,
body.dark-mode .btn-secondary.active {
	background: #5c636a !important;
	border-color: #565e64 !important;
	color: white !important;
}

/* Outline Buttons */
body.dark-mode .btn-outline-primary {
	color: #0d6efd !important;
	border-color: #0d6efd !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-primary:hover {
	background: #0d6efd !important;
	color: white !important;
}

body.dark-mode .btn-outline-success {
	color: #198754 !important;
	border-color: #198754 !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-success:hover {
	background: #198754 !important;
	color: white !important;
}

body.dark-mode .btn-outline-info {
	color: #0dcaf0 !important;
	border-color: #0dcaf0 !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-info:hover {
	background: #0dcaf0 !important;
	color: #000 !important;
}

body.dark-mode .btn-outline-warning {
	color: #ffc107 !important;
	border-color: #ffc107 !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-warning:hover {
	background: #ffc107 !important;
	color: #000 !important;
}

body.dark-mode .btn-outline-danger {
	color: #dc3545 !important;
	border-color: #dc3545 !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-danger:hover {
	background: #dc3545 !important;
	color: white !important;
}

body.dark-mode .btn-outline-dark {
	color: #212529 !important;
	border-color: #212529 !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-dark:hover {
	background: #212529 !important;
	color: white !important;
}

body.dark-mode .btn-outline-light {
	color: #f8f9fa !important;
	border-color: #f8f9fa !important;
	background: transparent !important;
}

body.dark-mode .btn-outline-light:hover {
	background: #f8f9fa !important;
	color: #000 !important;
}

/* Button Group */
body.dark-mode .btn-group .btn {
	border-color: var(--dark-border) !important;
}

body.dark-mode .btn-group .btn.active {
	background: var(--dark-success) !important;
	color: white !important;
}



/* Button App (Custom Buttons from your CSS) */
body.dark-mode .btn.btn-app {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .btn.btn-app:hover {
	background: var(--dark-hover) !important;
	border-color: var(--dark-success) !important;
	color: var(--dark-success) !important;
}

body.dark-mode .btn.btn-app > .fa,
body.dark-mode .btn.btn-app > .glyphicon,
body.dark-mode .btn.btn-app > .ion {
	color: var(--dark-text) !important;
}

body.dark-mode .btn.btn-app:hover > .fa,
body.dark-mode .btn.btn-app:hover > .glyphicon,
body.dark-mode .btn.btn-app:hover > .ion {
	color: var(--dark-success) !important;
}

/* Button Toolbar */
body.dark-mode .btn-toolbar {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

/* Floating Action Button (FAB) - if any */
body.dark-mode .btn-fab {
	background: var(--dark-success) !important;
	color: white !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .btn-fab:hover {
	background: #17a689 !important;
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Icon Buttons */
body.dark-mode .btn-icon {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .btn-icon:hover {
	background: var(--dark-hover) !important;
	border-color: var(--dark-success) !important;
	color: var(--dark-success) !important;
}

/* Button States */
body.dark-mode .btn:focus,
body.dark-mode .btn:active:focus,
body.dark-mode .btn.active:focus {
	outline: 2px solid var(--dark-success) !important;
	outline-offset: 2px !important;
}

/* Disabled Buttons */
body.dark-mode .btn:disabled,
body.dark-mode .btn.disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* Toggle Buttons */
body.dark-mode .btn-toggle {
	background: var(--dark-input) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .btn-toggle.active {
	background: var(--dark-success) !important;
	color: white !important;
}

/* Block Button */
body.dark-mode .btn-block {
	display: block !important;
	width: 100% !important;
}

/* Button Groups in Forms */
body.dark-mode .form-actions .btn {
	margin-right: 5px !important;
}

/* Button in Tables */
body.dark-mode table .btn {
	margin: 2px !important;
}

/* Social Buttons (if any) */
body.dark-mode .btn-facebook {
	background: #3b5998 !important;
	color: white !important;
}

body.dark-mode .btn-twitter {
	background: #1da1f2 !important;
	color: white !important;
}

body.dark-mode .btn-google {
	background: #db4437 !important;
	color: white !important;
}

body.dark-mode .btn-linkedin {
	background: #0077b5 !important;
	color: white !important;
}

/* Custom Theme Success Button (from your original CSS) */
body.dark-mode .bg-green,
body.dark-mode .green {
	color: #1ABB9C !important;
}

body.dark-mode .border-green {
	border-color: #1ABB9C !important;
}

/* Custom Primary Button from your theme */
body.dark-mode .bg-blue {
	background: #3498DB !important;
	color: white !important;
}

/* Custom buttons from your original CSS */
body.dark-mode a.btn-success,
body.dark-mode a.btn-primary,
body.dark-mode a.btn-warning,
body.dark-mode a.btn-danger {
	color: white !important;
}

/* Dark Mode Variables */
:root {
	--dark-bg: #121212;
	--dark-card: #1e1e1e;
	--dark-text: #e0e0e0;
	--dark-muted: #b0b0b0;
	--dark-border: #2d2d2d;
	--dark-header: #1a1a1a;
	--dark-sidebar: #2a2a2a;
	--dark-hover: #2d2d2d;
	--dark-input: #2d2d2d;
	--dark-table-header: #252525;
	--dark-success: #1ABB9C;
}

/* Dark Mode Body */
body.dark-mode {
	background-color: var(--dark-bg) !important;
	color: var(--dark-text) !important;
}

/* Main Content Area */
body.dark-mode .container.body .right_col {
	background: var(--dark-bg) !important;
}

body.dark-mode .main_container .top_nav {
	background: var(--dark-header) !important;
	border-bottom: 1px solid var(--dark-border) !important;
}

/* Panels and Cards */
body.dark-mode .x_panel {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .x_title {
	border-bottom: 2px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .x_title h2,
body.dark-mode .x_title h2 small {
	color: var(--dark-text) !important;
}

/* Sidebar */
body.dark-mode .left_col {
	background: var(--dark-sidebar) !important;
}

body.dark-mode .nav_title {
	background: var(--dark-header) !important;
}

body.dark-mode .nav.side-menu > li > a,
body.dark-mode .nav.child_menu > li > a {
	color: var(--dark-text) !important;
}

body.dark-mode .nav.side-menu > li:hover,
body.dark-mode .nav.child_menu > li:hover {
	background: var(--dark-hover) !important;
}

body.dark-mode .nav.side-menu > li.active {
	background: rgba(26, 187, 156, 0.1) !important;
}

/* Tables */
body.dark-mode table,
body.dark-mode table.jambo_table {
	background: var(--dark-card) !important;
	color: var(--dark-text) !important;
	border-color: var(--dark-border) !important;
}

body.dark-mode table.jambo_table thead {
	background: var(--dark-table-header) !important;
	color: var(--dark-text) !important;
}

body.dark-mode table.jambo_table tbody tr {
	border-color: var(--dark-border) !important;
}

body.dark-mode table.jambo_table tbody tr:hover td {
	background: rgba(26, 187, 156, 0.1) !important;
}

/* Forms and Inputs */
body.dark-mode .form-control {
	background-color: var(--dark-input) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .form-control:focus {
	background-color: var(--dark-input) !important;
	border-color: var(--dark-success) !important;
	color: var(--dark-text) !important;
	box-shadow: 0 0 0 0.2rem rgba(26, 187, 156, 0.25) !important;
}

body.dark-mode .input-group .form-control {
	background: var(--dark-input) !important;
	border-color: var(--dark-border) !important;
}

body.dark-mode ::placeholder {
	color: var(--dark-muted) !important;
	opacity: 0.7 !important;
}

/* Buttons */
body.dark-mode .btn-default {
	background-color: var(--dark-card) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .btn-default:hover {
	background-color: var(--dark-hover) !important;
	border-color: var(--dark-border) !important;
}

/* Tiles and Stats */
body.dark-mode .tile-stats {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .tile-stats .count,
body.dark-mode .tile-stats h3 {
	color: var(--dark-text) !important;
}

body.dark-mode .tile-stats .icon i {
	color: var(--dark-muted) !important;
}

/* Dashboard Widgets */
body.dark-mode .dashboard_graph {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .dashboard_graph .x_title {
	background: transparent !important;
	color: var(--dark-text) !important;
}

/* Progress Bars */
body.dark-mode .progress {
	background-color: var(--dark-input) !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .dropdown-menu > li > a {
	color: var(--dark-text) !important;
}

body.dark-mode .dropdown-menu > li > a:hover {
	background-color: var(--dark-hover) !important;
}

/* Modals */
body.dark-mode .modal-content {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .modal-header {
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .modal-footer {
	border-top: 1px solid var(--dark-border) !important;
}

/* Tabs */
body.dark-mode .nav-tabs {
	border-bottom: 1px solid var(--dark-border) !important;
}

body.dark-mode .nav-tabs > li > a {
	background: var(--dark-card) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .nav-tabs > li.active > a {
	background: var(--dark-card) !important;
	border-bottom-color: var(--dark-card) !important;
	color: var(--dark-success) !important;
}

/* Lists */
body.dark-mode ul.to_do {
	background: var(--dark-card) !important;
}

body.dark-mode ul.to_do li {
	background: var(--dark-input) !important;
	color: var(--dark-text) !important;
}

/* Well Elements */
body.dark-mode .well {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

/* Profile Cards */
body.dark-mode .profile_view .well {
	background: var(--dark-card) !important;
	border-color: var(--dark-border) !important;
}

body.dark-mode .profile_view .bottom {
	background: var(--dark-input) !important;
	border-top: 1px solid var(--dark-border) !important;
}

/* Calendar/Datepicker */
body.dark-mode .daterangepicker {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .daterangepicker .calendar-table {
	background: var(--dark-card) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .daterangepicker td.available:hover {
	background: var(--dark-hover) !important;
	color: var(--dark-text) !important;
}

/* Timeline */
body.dark-mode .timeline .block {
	border-left: 3px solid var(--dark-border) !important;
}

/* Pagination */
body.dark-mode .pagination > li > a,
body.dark-mode .pagination > li > span {
	background: var(--dark-card) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .pagination > .active > a,
body.dark-mode .pagination > .active > span {
	background: var(--dark-success) !important;
	border-color: var(--dark-success) !important;
}

/* Alerts */
body.dark-mode .alert-success {
	background: rgba(26, 187, 156, 0.2) !important;
	border-color: rgba(26, 187, 156, 0.3) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .alert-info {
	background: rgba(52, 152, 219, 0.2) !important;
	border-color: rgba(52, 152, 219, 0.3) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .alert-warning {
	background: rgba(243, 156, 18, 0.2) !important;
	border-color: rgba(243, 156, 18, 0.3) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .alert-danger {
	background: rgba(231, 76, 60, 0.2) !important;
	border-color: rgba(231, 76, 60, 0.3) !important;
	color: var(--dark-text) !important;
}

/* Badges */
body.dark-mode .badge {
	background: var(--dark-success) !important;
	color: white !important;
}

/* Text Colors */
body.dark-mode .text-muted {
	color: var(--dark-muted) !important;
}

/* Links */
body.dark-mode a {
	color: var(--dark-success) !important;
}

body.dark-mode a:hover {
	color: #17a689 !important;
	text-decoration: none !important;
}

/* Scrollbar Styling for Dark Mode */
body.dark-mode ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
	background: var(--dark-card);
}

body.dark-mode ::-webkit-scrollbar-thumb {
	background: var(--dark-border);
	border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
	background: var(--dark-muted);
}
/* Dark Mode - Cards and Table Hover Effects */
/* ========================================= */

/* Cards (Custom Cards from your CSS) */
body.dark-mode .card {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .card-header {
	background: var(--dark-header) !important;
	border-bottom: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
	padding: 15px 20px !important;
}

body.dark-mode .card-header h3,
body.dark-mode .card-header h4,
body.dark-mode .card-header h5 {
	color: var(--dark-text) !important;
	margin: 0 !important;
}

body.dark-mode .card-body {
	padding: 20px !important;
	background: var(--dark-card) !important;
}

body.dark-mode .card-footer {
	background: var(--dark-header) !important;
	border-top: 1px solid var(--dark-border) !important;
	padding: 15px 20px !important;
	color: var(--dark-text) !important;
}

/* Card Hover Effects */
body.dark-mode .card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
	border-color: var(--dark-success) !important;
	transform: translateY(-2px) !important;
	transition: all 0.3s ease !important;
}

/* Card Variants */
body.dark-mode .card-primary {
	border-left: 4px solid #0d6efd !important;
}

body.dark-mode .card-success {
	border-left: 4px solid #198754 !important;
}

body.dark-mode .card-warning {
	border-left: 4px solid #ffc107 !important;
}

body.dark-mode .card-danger {
	border-left: 4px solid #dc3545 !important;
}

body.dark-mode .card-info {
	border-left: 4px solid #0dcaf0 !important;
}

/* Table Hover Effects */
body.dark-mode table.table-hover tbody tr:hover {
	background: var(--dark-hover) !important;
	cursor: pointer !important;
}

body.dark-mode table.table-hover tbody tr:hover td {
	color: var(--dark-text) !important;
	border-color: var(--dark-border) !important;
}

/* Specific Table Hover from your CSS */
body.dark-mode table.jambo_table tbody tr:hover td {
	background: rgba(26, 187, 156, 0.15) !important;
	border-top: 1px solid rgba(26, 187, 156, 0.3) !important;
	border-bottom: 1px solid rgba(26, 187, 156, 0.3) !important;
}

/* Selected Row in Tables */
body.dark-mode table.jambo_table tbody tr.selected {
	background: rgba(26, 187, 156, 0.25) !important;
}

body.dark-mode table.jambo_table tbody tr.selected td {
	border-top: 1px solid rgba(26, 187, 156, 0.4) !important;
	border-bottom: 1px solid rgba(26, 187, 156, 0.4) !important;
	color: var(--dark-text) !important;
}

/* Alternate Row Colors */
body.dark-mode table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode table tbody tr:nth-child(odd) {
	background: var(--dark-card) !important;
}

/* Table Striped */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(even) {
	background: var(--dark-card) !important;
}

body.dark-mode .table-striped tbody tr:hover {
	background: var(--dark-hover) !important;
}

/* Table Bordered */
body.dark-mode .table-bordered {
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .table-bordered th,
body.dark-mode .table-bordered td {
	border: 1px solid var(--dark-border) !important;
}

/* Table Responsive */
body.dark-mode .table-responsive {
	border: 1px solid var(--dark-border) !important;
	border-radius: 4px !important;
}

/* Table Headers Hover */
body.dark-mode table thead th:hover {
	background: var(--dark-hover) !important;
	cursor: pointer !important;
}

/* Sortable Tables */
body.dark-mode table thead th.sortable:hover {
	background: var(--dark-hover) !important;
	color: var(--dark-success) !important;
}

/* Table Row Click Effect */
body.dark-mode table tbody tr {
	transition: background-color 0.2s ease !important;
}

body.dark-mode table tbody tr:active {
	background: rgba(26, 187, 156, 0.2) !important;
}

/* Card with Table Inside */
body.dark-mode .card .table {
	margin-bottom: 0 !important;
}

body.dark-mode .card .table thead th {
	border-top: none !important;
}

/* Dashboard Cards (from your CSS) */
body.dark-mode .dashboard-widget {
	background: var(--dark-card) !important;
	border-top: 5px solid var(--dark-success) !important;
}

body.dark-mode .dashboard-widget .dashboard-widget-title {
	border-bottom: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .dashboard-widget .dashboard-widget-title i {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-success) !important;
}

/* Profile Cards */
body.dark-mode .profile_view .well {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .profile_view .bottom {
	background: var(--dark-header) !important;
	border-top: 1px solid var(--dark-border) !important;
}

/* Pricing Cards */
body.dark-mode .pricing {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .pricing .title {
	background: var(--dark-success) !important;
}

body.dark-mode .pricing_features {
	background: var(--dark-header) !important;
}

body.dark-mode .pricing_footer {
	background: var(--dark-card) !important;
	border-top: 1px solid var(--dark-border) !important;
}

/* Media Cards (for gallery) */
body.dark-mode .thumbnail {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
}

body.dark-mode .thumbnail:hover {
	border-color: var(--dark-success) !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .caption {
	background: var(--dark-header) !important;
	color: var(--dark-text) !important;
	border-top: 1px solid var(--dark-border) !important;
}

/* Accordion Cards */
body.dark-mode .accordion .panel {
	background: var(--dark-card) !important;
	border: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .accordion .panel-heading {
	background: var(--dark-header) !important;
	border-bottom: 1px solid var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .accordion .panel-body {
	background: var(--dark-card) !important;
	border-top: 1px solid var(--dark-border) !important;
}

body.dark-mode .accordion .panel:hover {
	background: var(--dark-hover) !important;
}

/* Card Shadows on Hover */
body.dark-mode .x_panel:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
	border-color: var(--dark-success) !important;
}

/* Table Row Highlight on Hover - More Subtle Effect */
body.dark-mode table tbody tr:hover {
	position: relative !important;
}

body.dark-mode table tbody tr:hover::before {

	background: linear-gradient(90deg,
	rgba(26, 187, 156, 0.05) 0%,
	rgba(26, 187, 156, 0.1) 50%,
	rgba(26, 187, 156, 0.05) 100%) !important;
}

body.dark-mode table tbody tr:hover td {
	position: relative !important;
	z-index: 1 !important;
}

/* DataTables Hover Effects */
body.dark-mode .dataTables_wrapper .dataTables_filter input:hover,
body.dark-mode .dataTables_wrapper .dataTables_length select:hover {
	border-color: var(--dark-success) !important;
}

body.dark-mode .dataTables_paginate .paginate_button:hover {
	background: var(--dark-hover) !important;
	border-color: var(--dark-border) !important;
	color: var(--dark-text) !important;
}

body.dark-mode .dataTables_paginate .paginate_button.current:hover {
	background: var(--dark-success) !important;
	color: white !important;
}

/* Table Action Buttons on Hover */
body.dark-mode table tbody tr:hover .btn {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

body.dark-mode table tbody tr .btn {
	opacity: 0.7 !important;
	transform: translateY(2px) !important;
	transition: all 0.2s ease !important;
}

/* Card with Hover Animation */
body.dark-mode .card-hover {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode .card-hover:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Table with Gradient Header */
body.dark-mode .table-gradient thead {
	background: linear-gradient(135deg, var(--dark-header), var(--dark-card)) !important;
}

/* Zebra Striped Tables with Hover */
body.dark-mode .table-zebra tbody tr:nth-child(even):hover {
	background: rgba(26, 187, 156, 0.15) !important;
}

body.dark-mode .table-zebra tbody tr:nth-child(odd):hover {
	background: rgba(26, 187, 156, 0.2) !important;
}

/* Card Groups */
body.dark-mode .card-group .card {
	border-right: 1px solid var(--dark-border) !important;
}

body.dark-mode .card-group .card:last-child {
	border-right: none !important;
}

/* Deck Cards */
body.dark-mode .card-deck .card {
	margin-bottom: 15px !important;
}