/* ═══════════════════════════════════════
   METEO CISTERNA — DARK THEME OVERRIDE
   Add this AFTER the original w3/CumulusMX CSS
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
	--bg-primary: #0a0e17;
	--bg-secondary: #111827;
	--bg-card: #1a2332;
	--border: rgba(56,189,248,0.08);
	--border-accent: rgba(56,189,248,0.2);
	--text-primary: #f0f4f8;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--cyan: #22d3ee;
	--cyan-dim: rgba(34,211,238,0.15);
	--font-body: 'DM Sans', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
}

body {
	font-family: var(--font-body) !important;
	background: var(--bg-primary) !important;
	color: var(--text-primary) !important;
}

/* w3 theme overrides */
.w3-theme-dark, #Header { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.w3-theme-light, #Content { background: transparent !important; color: var(--text-primary) !important; }
.w3-theme-white, .w3-card { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.w3-theme-l1, .w3-theme-l2, .w3-theme-l3, .w3-theme-l4, .w3-theme-l5, .w3-theme-l6 { background: var(--bg-card) !important; color: var(--text-primary) !important; }
.w3-theme-d1, .w3-theme-d2, .w3-theme-d3, .w3-theme-d4, .w3-theme-d5 { background: rgba(34,211,238,0.06) !important; color: var(--cyan) !important; }
.w3-theme-bdr { border-color: var(--border) !important; }
.w3-theme-hvr:hover { background: var(--cyan-dim) !important; color: var(--cyan) !important; }
.w3-theme-txt { color: var(--cyan) !important; }

/* Text */
h1, h2, h3, h4, h5, h6 { color: var(--text-primary) !important; font-family: var(--font-body) !important; }
.subText { color: var(--text-muted) !important; }
p, td, th, span, label, div { color: inherit; }
a { color: var(--cyan) !important; }
.credits, .w3-small { color: var(--text-muted) !important; }

/* Tables */
.w3-table tr { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.w3-table tr:hover, .w3-hoverable tr:hover { background: rgba(56,189,248,0.04) !important; }

/* Selects & inputs */
.w3-select, select { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-accent) !important; border-radius: 8px !important; }
.w3-select option, select option { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.w3-radio, .w3-check { accent-color: var(--cyan); }
.w3-btn { color: var(--text-secondary) !important; }
.w3-btn:hover { color: var(--cyan) !important; }

/* Menu bar */
.w3-bar { background: var(--bg-secondary) !important; }
.w3-bar-item { color: var(--text-secondary) !important; }
.w3-bar-item:hover, .w3-bar-item.w3-theme-d4 { color: var(--cyan) !important; }

/* Buttons (monthly record, chart selectors) */
.mx-button, .w3-bar-block .w3-btn { background: var(--bg-card) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }
.mx-button:hover, .mx-button.w3-theme-d3 { background: var(--cyan-dim) !important; color: var(--cyan) !important; border-color: var(--cyan) !important; }

/* Dropdown */
.w3-dropdown-content { background: var(--bg-card) !important; border: 1px solid var(--border) !important; }

/* Highcharts dark theme */
.highcharts-background { fill: var(--bg-card) !important; }
.highcharts-title, .highcharts-subtitle { fill: var(--text-primary) !important; }
.highcharts-axis-title, .highcharts-axis-labels text { fill: var(--text-muted) !important; }
.highcharts-grid-line { stroke: rgba(255,255,255,0.06) !important; }
.highcharts-legend-item text { fill: var(--text-secondary) !important; }
.highcharts-tooltip-box { fill: var(--bg-card) !important; stroke: var(--border-accent) !important; }
.highcharts-tooltip text { fill: var(--text-primary) !important; }
.highcharts-navigator-mask-inside { fill: rgba(34,211,238,0.1) !important; }
.highcharts-navigator-series .highcharts-graph { stroke: var(--cyan) !important; }
.highcharts-range-selector-buttons text { fill: var(--text-secondary) !important; }
.highcharts-button rect { fill: var(--bg-secondary) !important; stroke: var(--border) !important; }
.highcharts-button text { fill: var(--text-secondary) !important; }
.highcharts-button-hover rect, .highcharts-button-pressed rect { fill: var(--cyan-dim) !important; stroke: var(--cyan) !important; }
.highcharts-button-hover text, .highcharts-button-pressed text { fill: var(--cyan) !important; }
.highcharts-scrollbar-track { fill: var(--bg-secondary) !important; }
.highcharts-scrollbar-thumb { fill: var(--bg-card) !important; }
.highcharts-exporting-group .highcharts-button rect { fill: var(--bg-secondary) !important; }

/* NOAA report pre */
pre { color: var(--text-primary) !important; font-family: var(--font-mono) !important; }

/* Chart container sizing */
#chartcontainer { min-height: 400px; }

/* Select-a-chart selectors */
.select-value, .select-color { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-accent) !important; border-radius: 6px !important; margin: 2px; }

/* Modal */
.w3-modal-content { background: var(--bg-card) !important; color: var(--text-primary) !important; }

/* Footer */
#Footer { background: var(--bg-secondary) !important; border-top: 1px solid var(--border) !important; }
#Footer p, #Footer em, #Footer span { color: var(--text-muted) !important; }

/* Responsive: hide the original logo on small screens */
.logo { max-height: 40px; filter: brightness(2); }