/* Dark Mode Styles */
:root {
	--bg-primary: #F7F6F3;
	--bg-secondary: #ffffff;
	--bg-card: #ffffff;
	--text-primary: #063A1C;
	--text-secondary: #205A44;
	--text-muted: #B3B5B4;
	--border-color: #E5DED4;
	--shadow: rgba(0,0,0,0.08);
	--hover-bg: #F7F6F3;
}

.dark-mode {
	--bg-primary: #1a1a1a;
	--bg-secondary: #2d2d2d;
	--bg-card: #2d2d2d;
	--text-primary: #e0e0e0;
	--text-secondary: #b0b0b0;
	--text-muted: #888888;
	--border-color: #444444;
	--shadow: rgba(0,0,0,0.3);
	--hover-bg: #3d3d3d;
}

/* Apply dark mode to body */
.dark-mode body {
	background: var(--bg-primary) !important;
	color: var(--text-primary) !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.dark-mode .dashboard-card,
.dark-mode .card {
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Stats cards - keep gradient but adjust */
.dark-mode .stats-card {
	background: linear-gradient(135deg, #205A44 0%, #063A1C 100%) !important;
	color: #ffffff !important;
}

/* Chart containers */
.dark-mode .chart-container {
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .chart-number-view {
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .chart-number-view h6 {
	color: var(--text-primary) !important;
}

.dark-mode .chart-number-label,
.dark-mode .chart-number-group-label {
	color: var(--text-primary) !important;
}

.dark-mode .chart-number-value {
	color: var(--text-secondary) !important;
}

.dark-mode .chart-number-table tbody tr:hover {
	background: var(--hover-bg) !important;
}

/* Tables */
.dark-mode .table {
	background: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

.dark-mode .table thead {
	background: #063A1C !important;
	color: #ffffff !important;
}

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

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

.dark-mode .table tbody td {
	color: var(--text-primary) !important;
}

.dark-mode .table tbody td strong {
	color: var(--text-primary) !important;
}

/* Form controls */
.dark-mode .form-control,
.dark-mode .form-select {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
	background: var(--bg-secondary) !important;
	border-color: #205A44 !important;
	color: var(--text-primary) !important;
}

.dark-mode .form-control::placeholder {
	color: var(--text-muted) !important;
}

/* Buttons */
.dark-mode .btn {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.dark-mode .btn-outline-secondary {
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .btn-outline-secondary:hover {
	background: var(--hover-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

/* Modals */
.dark-mode .modal-content {
	background: var(--bg-card) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .modal-header {
	border-bottom-color: var(--border-color) !important;
}

.dark-mode .modal-footer {
	border-top-color: var(--border-color) !important;
}

.dark-mode .modal-backdrop {
	background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Alerts */
.dark-mode .alert {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .alert-danger {
	background: #3d1a1a !important;
	border-color: #5c2a2a !important;
	color: #ffcccc !important;
}

.dark-mode .alert-success {
	background: #1a3d1a !important;
	border-color: #2a5c2a !important;
	color: #ccffcc !important;
}

.dark-mode .alert-warning {
	background: #3d3d1a !important;
	border-color: #5c5c2a !important;
	color: #ffffcc !important;
}

/* Badges */
.dark-mode .badge {
	color: var(--text-primary) !important;
}

.dark-mode .badge.text-bg-secondary {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
}

/* Text colors */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
	color: var(--text-primary) !important;
}

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

/* Links */
.dark-mode a {
	color: #4CAF50 !important;
}

.dark-mode a:hover {
	color: #66BB6A !important;
}

/* Scrollbars */
.dark-mode .dashboard-scroll-container::-webkit-scrollbar-track {
	background: var(--bg-primary) !important;
}

.dark-mode .dashboard-scroll-container::-webkit-scrollbar-thumb {
	background: var(--border-color) !important;
}

.dark-mode .dashboard-scroll-container::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted) !important;
}

.dark-mode .buttons-scroll-container::-webkit-scrollbar-track {
	background: var(--bg-primary) !important;
}

.dark-mode .buttons-scroll-container::-webkit-scrollbar-thumb {
	background: var(--border-color) !important;
}

.dark-mode .buttons-scroll-container::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted) !important;
}

/* Chart toggle button */
.dark-mode .chart-toggle-btn {
	background: #205A44 !important;
}

.dark-mode .chart-toggle-btn:hover {
	background: #063A1C !important;
}

/* Section titles and labels */
.dark-mode .section-title {
	color: var(--text-primary) !important;
}

/* Pill UI elements (for index.html form) */
.dark-mode .pill {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
}

.dark-mode .pill input.form-control,
.dark-mode .pill select.form-select {
	color: var(--text-primary) !important;
}

.dark-mode .pill-text {
	background: var(--bg-secondary) !important;
	border-color: var(--border-color) !important;
	color: var(--text-primary) !important;
}

.dark-mode .file-btn {
	color: #4CAF50 !important;
}

.dark-mode .file-btn:hover {
	color: #66BB6A !important;
}

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

/* Dark mode toggle button */
.dark-mode-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1000;
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px var(--shadow);
	transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px var(--shadow);
}

.dark-mode-toggle svg {
	width: 24px;
	height: 24px;
	fill: var(--text-primary);
	transition: fill 0.3s ease;
}

.dark-mode .dark-mode-toggle {
	background: var(--bg-card);
	border-color: var(--border-color);
}

/* Smooth transitions */
* {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}