/* Universal admin input fix: ensure all admin input/select/textarea fields are readable in dark mode, regardless of parent class */
body.dark input, body.dark select, body.dark textarea {
	background: #0b1014 !important;
	color: #e6eef8 !important;
	border: 1.5px solid #22303a !important;
	box-shadow: none !important;
}
body.dark input:disabled, body.dark select:disabled, body.dark textarea:disabled {
	background: #181c22 !important;
	color: #888 !important;
	opacity: 0.7;
}
:root{
	--bg-color: #f8fafc;
	--text-color: #222;
	--card-bg: #fff;
	--muted-bg: #f0f4f8;
	--border-color: #ccc;
    --input-bg: #fff;
}

body.light{ background:var(--bg-color); color:var(--text-color);} 
body.dark{ --bg-color:#121318; --text-color:#eee; --card-bg:#0f1720; --muted-bg:#19202a; --border-color:#222; background:var(--bg-color); color:var(--text-color);} 
body.blue{ --bg-color:#e7f5ff; --text-color:#222; background:var(--bg-color); color:var(--text-color);} 
body.green{ --bg-color:#e6fcf5; --text-color:#222; background:var(--bg-color); color:var(--text-color);} 

header{ padding:1em; background:var(--card-bg); border-bottom:1px solid var(--border-color); }
main{ padding:2em; }
section{ margin-bottom:2em; background:var(--card-bg); border-radius:8px; box-shadow:0 2px 8px #0001; padding:1em; }
input, select, button, textarea { margin:0.5em; padding:0.5em; color:var(--text-color); background:var(--input-bg); border:1px solid var(--border-color); border-radius:4px; }

body.dark { --input-bg: #0b1014; }
#forecast-blocks{ margin-top:1em; }
.forecast-block{ border:1px dashed #888; padding:1em; margin-bottom:0.5em; border-radius:4px; background:var(--muted-bg); }

/* Utility classes for theme-aware elements */
.card{ background:var(--card-bg); color:var(--text-color); border:1px solid var(--border-color); border-radius:6px; }
.muted{ background:var(--muted-bg); color:var(--text-color); }
.text-inverse{ color:var(--text-color); }

/* Ensure images and canvases don't get white backgrounds in dark mode */
.image-wrapper, .roi-canvas, img{ background:transparent; }

/* Enhanced readability for admin cards and tables across themes */
.card, section, header, main, .simple-card, .subcard { /* slightly stronger border and padding */
	border-color: var(--border-color);
	color: var(--text-color);
}
.card pre, .card .mono, .mono, pre { color: var(--text-color); background: transparent; }

/* Make form labels and inputs within tuning card high-contrast in dark theme */
.card#ml .kv, .card#ml input, .card#ml select, .card#ml label, .card#ml .small {
	color: var(--text-color);
}

/* Tuning section specific: ensure background is darker in dark theme so white text has contrast */
body.dark .card#ml, body.dark section#ml, body.dark .card#tuning {
	background: #0b1014; /* slightly darker than card-bg */
	color: var(--text-color);
}
/* Specific fix: ensure small numeric inputs and toggles in ML card are legible in dark mode */
body.dark .card#ml input[type="number"],
body.dark .card#ml input[type="text"],
body.dark .card#ml input[type="checkbox"],
body.dark .card#ml select,
body.dark #ml .kv div input,
body.dark #ml .kv div select {
	background: #0b1014 !important;
	color: #e6eef8 !important;
	border: 1px solid #22303a !important;
}
/* Ensure the small status spans and pre blocks inside tuning are readable */
body.dark #ml .small, body.dark #ml .code, body.dark #ml .mono { color: #dbe9f2 !important; }
/* Stronger rule: ensure inputs/selects/textareas inside admin subcards use the theme input background and visible borders */
.subcard.card input, .subcard.card select, .subcard.card textarea, .diagnostics-card input, .diagnostics-card select, .diagnostics-card textarea, #recentHistoryPanel pre {
	background: var(--input-bg);
	color: var(--text-color);
	border: 1px solid var(--border-color);
}

/* Ensure diagnostic monospace pre blocks have a subtle background in dark mode for readability */
body.dark .diagnostics-card pre, body.dark #recentHistoryPanel pre, body.dark .card .diagnostics, body.dark pre.mono {
	background: #081013;
	color: var(--text-color);
	border-color: #162029;
}
.card table, table { color: var(--text-color); border-collapse: collapse; }
table th, table td { padding: 6px 8px; border: 1px solid var(--border-color); }
.tiny { color: var(--text-color); opacity: 0.9; }

/* Header icon helper: place a small icon before headings */
.h-icon { display:inline-flex; align-items:center; gap:8px; }
.h-icon img { width:20px; height:20px; opacity:0.95; }

/* Ensure buttons are legible on dark backgrounds */
button, .btn { color: var(--text-color); border-color: var(--border-color); background: transparent; }