/* Dark Mode Theme for FluxCP-NG */

/* Dark Mode Variables */
:root[data-theme="dark"] {
	/* Colors */
	--color-bg-primary: #1a1a1a;
	--color-bg-secondary: #2d2d2d;
	--color-bg-tertiary: #3a3a3a;
	--color-text: #e0e0e0;
	--color-text-secondary: #b0b0b0;
	--color-text-muted: #808080;
	--color-border: #404040;
	--color-primary: #64b5f6;
	--color-primary-hover: #42a5f5;
	--color-success: #81c784;
	--color-warning: #ffb74d;
	--color-danger: #e57373;
	--color-info: #4fc3f7;
	
	/* Shadows */
	--shadow-sm: 0 2px 4px rgba(0,0,0,0.5);
	--shadow-md: 0 4px 8px rgba(0,0,0,0.6);
	--shadow-lg: 0 8px 16px rgba(0,0,0,0.7);
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 9999;
	background: linear-gradient(135deg, #424242 0%, #212121 100%);
	color: #fff;
	border: 2px solid #616161;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
	transition: all 0.3s ease;
}

.dark-mode-toggle:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(0,0,0,0.7);
}

.dark-mode-toggle i {
	font-size: 20px;
}

/* Dark Mode Styles */
:root[data-theme="dark"] body {
	background-color: var(--color-bg-primary);
	color: var(--color-text);
}

:root[data-theme="dark"] #container {
	background-color: var(--color-bg-secondary);
}

:root[data-theme="dark"] #content {
	background-color: var(--color-bg-secondary);
	color: var(--color-text);
}

:root[data-theme="dark"] .generic-table,
:root[data-theme="dark"] .vertical-table {
	background-color: var(--color-bg-tertiary);
	border-color: var(--color-border);
}

:root[data-theme="dark"] .generic-table th,
:root[data-theme="dark"] .vertical-table th {
	background: linear-gradient(135deg, #424242 0%, #303030 100%);
	color: var(--color-text);
	border-color: var(--color-border);
}

:root[data-theme="dark"] .generic-table td,
:root[data-theme="dark"] .vertical-table td {
	background-color: var(--color-bg-tertiary);
	color: var(--color-text);
	border-color: var(--color-border);
}

:root[data-theme="dark"] .generic-table tr:hover td,
:root[data-theme="dark"] .vertical-table tr:hover td {
	background-color: #4a4a4a;
}

/* Cards and Boxes */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .box {
	background-color: var(--color-bg-tertiary);
	border-color: var(--color-border);
	box-shadow: var(--shadow-md);
}

/* Forms */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
	background-color: var(--color-bg-tertiary);
	color: var(--color-text);
	border-color: var(--color-border);
}

:root[data-theme="dark"] input[type="text"]:focus,
:root[data-theme="dark"] input[type="password"]:focus,
:root[data-theme="dark"] input[type="email"]:focus,
:root[data-theme="dark"] input[type="number"]:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
	border-color: var(--color-primary);
	background-color: #404040;
}

/* Buttons */
:root[data-theme="dark"] button,
:root[data-theme="dark"] .button {
	background: linear-gradient(135deg, #424242 0%, #303030 100%);
	color: var(--color-text);
	border-color: var(--color-border);
}

:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] .button:hover {
	background: linear-gradient(135deg, #505050 0%, #404040 100%);
}

/* Links */
:root[data-theme="dark"] a {
	color: var(--color-primary);
}

:root[data-theme="dark"] a:hover {
	color: var(--color-primary-hover);
}

/* Navigation */
:root[data-theme="dark"] #navigation {
	background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
	border-color: var(--color-border);
}

:root[data-theme="dark"] #navigation ul li a {
	color: var(--color-text);
}

:root[data-theme="dark"] #navigation ul li a:hover {
	background-color: #404040;
	color: var(--color-primary);
}

/* Sidebar */
:root[data-theme="dark"] #sidebar {
	background-color: var(--color-bg-secondary);
	border-color: var(--color-border);
}

:root[data-theme="dark"] #sidebar h2 {
	background: linear-gradient(135deg, #424242 0%, #303030 100%);
	color: var(--color-text);
}

/* Gradients (inverser les couleurs claires) */
:root[data-theme="dark"] div[style*="linear-gradient(135deg, #e8f5e9"] {
	background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #e3f2fd"] {
	background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #fff3e0"] {
	background: linear-gradient(135deg, #e65100 0%, #f57c00 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #f3e5f5"] {
	background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #ffebee"] {
	background: linear-gradient(135deg, #b71c1c 0%, #c62828 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #e8eaf6"] {
	background: linear-gradient(135deg, #1a237e 0%, #283593 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #fff8e1"] {
	background: linear-gradient(135deg, #f57f17 0%, #f9a825 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #e1f5fe"] {
	background: linear-gradient(135deg, #01579b 0%, #0277bd 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #fce4ec"] {
	background: linear-gradient(135deg, #880e4f 0%, #ad1457 100%) !important;
}

:root[data-theme="dark"] div[style*="linear-gradient(135deg, #fff9c4"] {
	background: linear-gradient(135deg, #f57f17 0%, #f9a825 100%) !important;
}

/* White backgrounds to dark */
:root[data-theme="dark"] div[style*="background: white"],
:root[data-theme="dark"] div[style*="background:white"] {
	background: var(--color-bg-tertiary) !important;
}

/* Text colors */
:root[data-theme="dark"] span[style*="color: var(--color-text-secondary)"] {
	color: var(--color-text-secondary) !important;
}

/* Specific elements */
:root[data-theme="dark"] .stat-value {
	color: var(--color-text);
}

:root[data-theme="dark"] .not-applicable {
	color: var(--color-text-muted);
}

/* Code blocks */
:root[data-theme="dark"] pre,
:root[data-theme="dark"] code {
	background-color: #1e1e1e;
	color: #d4d4d4;
	border-color: var(--color-border);
}

/* Alerts and Messages */
:root[data-theme="dark"] .alert,
:root[data-theme="dark"] .message {
	background-color: var(--color-bg-tertiary);
	border-color: var(--color-border);
	color: var(--color-text);
}

/* Pagination */
:root[data-theme="dark"] .pagination a {
	background-color: var(--color-bg-tertiary);
	color: var(--color-text);
	border-color: var(--color-border);
}

:root[data-theme="dark"] .pagination a:hover {
	background-color: #404040;
	color: var(--color-primary);
}

/* Calculators Dark Mode */
:root[data-theme="dark"] form[action*="calculator"] {
	background-color: var(--color-bg-tertiary) !important;
}

:root[data-theme="dark"] form[action*="calculator"] h3 {
	color: var(--color-primary);
}

:root[data-theme="dark"] form[action*="calculator"] label {
	color: var(--color-text);
}

:root[data-theme="dark"] form[action*="calculator"] button {
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
}

/* Info boxes */
:root[data-theme="dark"] div[style*="background: #f5f5f5"] {
	background: var(--color-bg-tertiary) !important;
	color: var(--color-text) !important;
}

/* Element Resistance Table Dark Mode */
:root[data-theme="dark"] .element-resistance-table {
	background-color: var(--color-bg-tertiary);
}

:root[data-theme="dark"] .element-resistance-table th {
	background: linear-gradient(135deg, #424242 0%, #303030 100%) !important;
	color: var(--color-text) !important;
}

:root[data-theme="dark"] .element-resistance-table td {
	border-color: var(--color-border) !important;
}

/* Stat cards dark mode */
:root[data-theme="dark"] div[style*="background: white"] {
	background: var(--color-bg-tertiary) !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.dark-mode-toggle {
		bottom: 10px;
		right: 10px;
		width: 45px;
		height: 45px;
	}

	.dark-mode-toggle i {
		font-size: 18px;
	}
}