body.dark-mode {
	--bg-page: #111315;
	--bg-card: #1E2126;
	--bg-sidebar: #181A1F;
	--bg-main-container: #16181B;

	--text-primary: #E5E7EB;
	--text-secondary: #9CA3AF;
	--text-muted: #6B7280;

	--card-border: #2A2F36;
	--card-shadow: 0 10px 30px rgba(0,0,0,0.45);
/* 	--card-hover-shadow: 0 16px 40px rgba(0,0,0,0.6); */

	--sidebar-active-bg: #FF8A00;
	--sidebar-active-text: #FFFFFF;

	--progress-remaining: #2A2F36;

	--input-bg: #1F2329;
	--input-border: #2B3138;
	--input-text: #E5E7EB;
	--input-placeholder: #6B7280;

	--calendar-bg: #1E2126;

	--icon-default: #9CA3AF;
	--icon-active: #FF8A00;

	--border-subtle: #2A2F36;
	--shadow-card: 0 10px 30px rgba(0,0,0,0.45);
	--shadow-card-hover: 0 10px 30px rgba(0,0,0,0.45);
/* 	--shadow-card-hover: 0 16px 40px rgba(0,0,0,0.6); */

	--purple: #A855F7;
}

* {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease, box-shadow 0.2s ease;
}

a {
	color: #22C55E;
}

a:hover {
	color: #16A34A;
}

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

body.dark-mode a:hover {
	color: #4ADE80;
}

.btn-link {
	color: #22C55E;
}

.form-control:focus,
.form-select:focus,
.btn:focus,
.btn-close:focus,
.search-input:focus {
	box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
}

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

.navbar {
	background-color: #E5E7EB !important;
	color: #1F2933;
}

.navbar-brand {
	color: #FF8A00 !important;
	font-weight: 700;
}

.navbar-light .navbar-nav .nav-link {
	color: #1F2933;
}

.navbar-light .navbar-nav .nav-link:hover {
	color: #FF8A00;
}

body.dark-mode .navbar {
	background-color: #111315 !important;
	color: #FFFFFF;
}

body.dark-mode .navbar-brand {
	color: #FF8A00 !important;
}

body.dark-mode .navbar-nav .nav-link {
	color: #FFFFFF;
}

body.dark-mode .navbar-nav .nav-link:hover {
	color: #FF8A00;
}

.navbar-dark .navbar-nav .nav-link {
	color: rgba(255,255,255,0.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
	color: #FFFFFF;
}

.theme-toggle-container .theme-label {
	color: #4B5563;
}

body.dark-mode .theme-toggle-container .theme-label {
	color: #9CA3AF;
}

.theme-toggle-container .theme-label.active,
.theme-toggle-container .theme-label.text-warning {
	color: #FF8A00;
}

body.dark-mode .theme-toggle-container .theme-label.active,
body.dark-mode .theme-toggle-container .theme-label.text-warning {
	color: #FF8A00;
}

.theme-range {
	background: #D1D5DB!important;
}

body.dark-mode .theme-range {
	background: #4B5563!important;
}

.theme-range::-webkit-slider-thumb {
	background: #FF8A00!important;
	border-color: #FF8A00!important;
}

.theme-range::-moz-range-thumb {
	background: #FF8A00!important;
	border-color: #FF8A00!important;
}

input[type="range"].theme-range {
  -webkit-appearance: none;
  width: 50px;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
  position:relative;
  top:-2px;
}

input[type="range"].theme-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF8A00!important;
  cursor: pointer;
}

input[type="range"].theme-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF8A00!important;
  cursor: pointer;
  border: none;
}

.card {
	background-color: var(--bg-card);
	border: 1px solid var(--card-border);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	padding: var(--card-padding);
	transition: transform var(--card-hover-transform), box-shadow 0.2s ease;
}

.card:hover {
	transform: var(--card-hover-transform);
	box-shadow: var(--shadow-card-hover);
}

.card-header {
	border-bottom: 1px solid var(--border-subtle);
}

.sticky-top .card-header {
	color:#fff!important;
	background-color: #FF8A00!important;
	text-align:center;
	border-bottom: 1px solid var(--border-subtle);
}

.sticky-top .card-header h5 { color:#fff; }

.card-body {
	color: var(--text-primary);
}

.text-muted {
	color: var(--text-muted) !important;
}

.text-secondary {
	color: var(--text-secondary) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
}

p {
	color: var(--text-secondary);
}

a {
	color: var(--primary-orange);
}

.navbar-nav .nav-link {
	color: #1E2126;
	font-weight: 500;
}

.navbar-nav .nav-link:hover {
	color: #FF8A00;
}

.navbar-nav .nav-link.active,
body.dark-mode .navbar-nav .nav-link.active {
	color: #FF8A00;
}

.btn {
	border: none;
	background: transparent;
}

.btn:hover {
	background: transparent;
}

.btn.active,
.nav-link.active {
	color: #FF8A00 !important;
}

body.dark-mode .btn.active,
body.dark-mode .nav-link.active {
	color: #FF8A00 !important;
}

.btn-primary:hover {
	background-color: #E67E00;
}

.btn-outline-primary {
/* 	border: none; */
}

.btn-outline-primary:hover {
	background-color: #FF8A00;
}

.btn-secondary,
.btn-outline-secondary {
	border: none;
}

.btn-primary {
	color:#fff!important;
	background-color: #22C55E;
	border-color: #22C55E;
	border-radius: var(--btn-radius);
}

.btn-primary:hover {
	background-color: #16A34A;
	border-color: #16A34A;
}

.btn-primary:focus,
.btn-primary:active {
	background-color: #16A34A!important;
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25)!important;
}

.btn-outline-primary {
	color: #fff!important;
	background-color: var(--primary-orange)!important;
	border-color: var(--primary-orange)!important;
	border-width: 1px!important;
	border-radius: var(--btn-radius);
}

.btn-outline-primary:hover {
	background-color: var(--primary-orange-dark)!important;
	border-color: var(--primary-orange-dark)!important;
	color: #FFFFFF;
}

.btn-secondary {
	color:#fff!important;
	background-color: var(--primary-orange)!important;
	border-color: var(--primary-orange)!important;
	border-radius: var(--btn-radius);
}

.btn-secondary:hover {
	color:#fff!important;
	background-color: var(--primary-orange-dark)!important;
	border-color: var(--primary-orange-dark)!important;
}

.btn-outline-secondary {
	color: var(--text-secondary);
	border-color: var(--text-secondary);
	border-radius: var(--btn-radius);
}

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

.btn-danger:hover {
	color: #fff !important;
	background-color: #bb2d3b !important;
	border-color: #b02a37 !important;
}

.btn-outline-danger {
	color: #dc3545 !important;
	border-color: #dc3545 !important;
	border-radius: var(--btn-radius);
}

.btn-outline-danger:hover {
	color: #fff !important;
	background-color: #dc3545 !important;
}

.form-control {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	color: var(--input-text);
	border-radius: var(--input-radius);
}

.form-control::placeholder {
	color: var(--input-placeholder);
}

.form-control:focus {
	background-color: var(--input-bg);
	border-color: var(--primary-orange);
	color: var(--input-text);
	box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.15);
}

.form-select {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	color: var(--input-text);
	border-radius: var(--input-radius);
}

.form-select:focus {
	border-color: var(--primary-orange);
	box-shadow: 0 0 0 0.2rem rgba(255, 138, 0, 0.15);
}

.input-group-text {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	color: var(--text-secondary);
}

.table {
	color: var(--text-primary);
}

.table thead th {
	background-color: var(--bg-card);
	border-color: var(--border-subtle);
	color: var(--text-secondary);
}

.table td,
.table th {
	border-color: var(--border-subtle);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(128, 128, 128, 0.05);
}

.alert-success {
	background-color: var(--stat-completed-bg);
	border: none;
	color: var(--stat-completed-text);
}

.alert-warning {
	background-color: var(--sidebar-active-bg);
	border: none;
	color: var(--stat-total-text);
}

.alert-danger {
	background-color: #FEE2E2;
	border: none;
	color: #DC2626;
}

body.dark-mode .alert-success {
	background-color: rgba(34, 197, 94, 0.15);
	color: var(--green);
}

body.dark-mode .alert-warning {
	background-color: rgba(255, 138, 0, 0.15);
	color: var(--primary-orange);
}

body.dark-mode .alert-danger {
	background-color: rgba(220, 38, 38, 0.15);
	color: #F87171;
}

.badge.bg-primary {
	background-color: var(--primary-orange) !important;
}

.badge.bg-success {
	background-color: var(--green) !important;
}

.badge.bg-warning {
	background-color: var(--primary-orange) !important;
	color: #000;
}

.badge.bg-danger {
	background-color: #DC2626 !important;
}

.badge.bg-purple {
	background-color: var(--purple) !important;
}

.progress {
	background-color: var(--progress-remaining);
	border-radius: 999px;
	height: 8px;
}

.progress-bar {
	background-color: var(--progress-arc);
}

.list-group-item {
	background-color: var(--bg-card);
	border-color: var(--border-subtle);
	color: var(--text-primary);
}

.dropdown-menu {
	background-color: var(--bg-card);
	border: 1px solid var(--border-subtle);
}

.dropdown-item {
	color: var(--text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-active-text);
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
	background-color: var(--primary-orange);
	color: #FFFFFF;
}

.modal-content {
	background-color: var(--bg-card);
	border: 1px solid var(--border-subtle);
	color: var(--text-primary);
}

.modal-header {
	border-bottom-color: var(--border-subtle);
}

.modal-footer {
	border-top-color: var(--border-subtle);
}

.btn-close {
	filter: invert(1);
}

body.dark-mode .btn-close {
	filter: invert(0);
}

.select2-container--default .select2-selection--single {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--btn-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--input-text);
}

.select2-dropdown {
	background-color: var(--bg-card);
	border: 1px solid var(--border-subtle);
}

.select2-results__option {
	color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--primary-orange);
	color: #FFFFFF;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: var(--primary-orange);
}

.select2-container--default .select2-selection--multiple {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
}

.select2-selection__choice {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-active-text);
	border: none;
	border-radius: 4px;
}

.popover {
	background-color: var(--bg-card);
	border: 1px solid var(--border-subtle);
}

.popover-body {
	color: var(--text-primary);
}

.bs-popover-auto[x-placement^=top] .popover-arrow::before,
.bs-popover-top .popover-arrow::before {
	border-top-color: var(--border-subtle);
}

.bs-popover-auto[x-placement^=top] .popover-arrow::after,
.bs-popover-top .popover-arrow::after {
	border-top-color: var(--bg-card);
}

footer {
	background-color: #E5E7EB !important;
	color: #1F2933;
	border-top: none !important;
}

footer a {
	color: #1F2933;
	opacity: 0.8;
}

footer a:hover {
	color: #FF8A00;
	opacity: 1;
}

body.dark-mode footer {
	background-color: #1E2126 !important;
	color: #FFFFFF;
}

body.dark-mode footer a {
	color: #FFFFFF;
	opacity: 0.8;
}

body.dark-mode footer a:hover {
	color: #FF8A00;
	opacity: 1;
}

.border-top,
.border-bottom,
.border-start,
.border-end {
	border-color: var(--border-subtle) !important;
}

.avatar {
	border-radius: var(--avatar-radius);
}

.stat-card {
	border-radius: var(--card-radius);
	padding: var(--card-padding);
}

.stat-card-total {
	background-color: var(--stat-total-bg);
	color: var(--stat-total-text);
}

.stat-card-ongoing {
	background-color: var(--stat-ongoing-bg);
	color: var(--stat-ongoing-text);
}

.stat-card-completed {
	background-color: var(--stat-completed-bg);
	color: var(--stat-completed-text);
}

body.dark-mode .stat-card-total {
	background-color: rgba(255, 138, 0, 0.2);
}

body.dark-mode .stat-card-ongoing {
	background-color: rgba(139, 92, 246, 0.2);
}

body.dark-mode .stat-card-completed {
	background-color: rgba(34, 197, 94, 0.2);
}

.note-tile {
	border-radius: var(--card-radius);
	padding: 16px;
	color: #FFFFFF;
}

.note-purple {
	background-color: var(--note-purple);
}

.note-orange {
	background-color: var(--note-orange);
}

.note-light-orange {
	background-color: var(--note-light-orange);
	color: var(--text-primary);
}

.sidebar {
	background-color: var(--bg-sidebar);
	width: var(--sidebar-width);
}

.sidebar-nav-item {
	padding: 12px 16px;
	border-radius: var(--sidebar-active-radius);
	color: var(--text-secondary);
	transition: all 0.2s ease;
}

.sidebar-nav-item:hover {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-active-text);
}

.sidebar-nav-item.active {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-active-text);
}

body.dark-mode .sidebar-nav-item.active {
	background-color: var(--sidebar-active-bg);
	color: var(--sidebar-active-text);
}

.fa-icon {
	color: var(--icon-default);
}

.fa-icon.active,
.sidebar-nav-item.active .fa-icon {
	color: var(--icon-active);
}

body.dark-mode .sidebar-nav-item.active .fa-icon {
	color: var(--sidebar-active-text);
}

.search-input {
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	color: var(--input-text);
	padding: 10px 16px;
}

.search-input::placeholder {
	color: var(--input-placeholder);
}

.search-input:focus {
	border-color: var(--primary-orange);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.1);
}

.calendar-widget {
	background-color: var(--calendar-bg);
	border-radius: var(--card-radius);
	padding: 16px;
}

.calendar-day {
	padding: 8px;
	border-radius: 8px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.calendar-day:hover {
	background-color: var(--sidebar-active-bg);
}

.calendar-day.active {
	background-color: var(--calendar-active);
	color: var(--calendar-selected-text);
}

body.dark-mode .calendar-day.active {
	background-color: var(--calendar-active);
	color: var(--calendar-selected-text);
}

.text-success {
	color: var(--green) !important;
}

.text-warning {
	color: var(--primary-orange) !important;
}

.text-danger {
	color: #DC2626 !important;
}

body.dark-mode .text-danger {
	color: #F87171 !important;
}

.bg-success {
	background-color: var(--green) !important;
}

.bg-warning {
	background-color: var(--primary-orange) !important;
}

.bg-danger {
	background-color: #DC2626 !important;
}

body.dark-mode .bg-danger {
	background-color: #DC2626 !important;
}

.spinner-border {
	color: var(--primary-orange);
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--bg-page);
}

::-webkit-scrollbar-thumb {
	background: var(--text-muted);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
	background: #4B5563;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
	background: #6B7280;
}

body.dark-mode .logo-text { font-weight:bold; color:#fff; }
body.dark-mode .logo-text span { color: #FF8A00; }

body.dark-mode #key_metrics i,
body.dark-mode #features i { font-size:2.5rem; margin:10px 0 20px 0; color: #FF8A00; }