:root {
	/* --- 1. BRANDING & COLORS (From style.css) --- */
	--il-blue: #13294B;
	--il-altgeld: #DD3403;
	--il-cloud: #F8FAFC;
	--il-font-sans: 'Source Sans Pro', sans-serif;
    --il-storm-95: #F4F4F4; /* Default Footer Background */
	
	/* --- 2. THEME VARIABLES (Default / Light Mode) --- */
	/* Backgrounds */
	--bg-body: #fff;
	--bg-card: #F5F5F5;
	--bg-card-header: #13294b;
	--bg-nav: #e8e9eb;
	
	/* Text */
	--text-main: #333;
	--text-muted: #666;
	--text-header: #13294b;
	--text-card-header: #ffffff;
	--text-nav: #13294B;
	
	/* Specific Component Colors (Light Mode) */
	--stats-header-color: #13294b;    /* Navy for stats title */
	--highlight-color: #13294b;       /* Navy text for summary highlights */
	--table-even-bg: #C8C6C7;         /* Light gray for even rows */
	--table-hover-bg: #ffe0b2;        /* Pastel orange for hover */
	--curr-month-bg: #e3f2fd;         /* Light blue for current month */
	--curr-month-text: #0d1f3a;       /* Dark text for current month */
	
	/* Borders & Accents */
	--border-color: #e0e0e0;
	--shadow-color: rgba(0, 0, 0, 0.1);
}

/* --- 3. DARK THEME OVERRIDES --- */
body.dark-mode {
	/* Backgrounds */
	--bg-body: #121212;
	--bg-card: #1e1e1e;
	--bg-card-header: #1D58A7; /* Industrial Blue Header */
	--bg-nav: #1e1e1e;

	/* Text */
	--text-main: #e0e0e0; 
	--text-muted: #a0a0a0;
	--text-header: #f8f9fa;
	--text-card-header: #DD3403; 
	--text-nav: #4da3ff; /* Lighter blue for links */

	/* Specific Component Colors (Dark Mode) */
	--stats-header-color: #1D58A7;    /* Industrial Blue for stats title */
	--highlight-color: #4da3ff;       /* Accessible Light Blue for highlights */
	--table-even-bg: #2c2c2c;         /* Dark gray for even rows */
	--table-hover-bg: #5a3a2a;        /* Muted dark orange for hover */
	--curr-month-bg: #1D58A7;         /* Industrial Blue BG for current month */
	--curr-month-text: #ffffff;       /* White text for current month */

	/* Borders & Accents */
	--border-color: #333;
	--shadow-color: rgba(0, 0, 0, 0.5);

    /* --- TOOLKIT COMPONENT OVERRIDES --- */
    /* KEY FIX: Redefine the 'Storm 95' variable (normally #f4f4f4) 
       to be Industrial Blue. This penetrates the Shadow DOM. */
    --il-storm-95: #1D58A7;
    
    /* Additional variables that toolkit components might listen to */
    --il-footer-background: #1D58A7;
    --il-footer-bg: #1D58A7; 
}

/* --- 4. GENERAL APP STYLES --- */
body {
	background-color: var(--bg-body);
	color: var(--text-main);
	transition: background-color 0.3s ease, color 0.3s ease;
	font-family: var(--il-font-sans);
}

.card {
	background-color: var(--bg-card);
	box-shadow: 0 4px 6px var(--shadow-color);
}

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

.card-content {
	background-color: var(--bg-card);
	color: var(--text-main);
}

/* --- 5. DATA COMPONENT OVERRIDES --- */

/* Breadcrumbs */
.breadcrumb {
	color: var(--text-muted) !important;
}

.breadcrumb a {
	color: var(--text-nav) !important;
}

.breadcrumb a:hover {
	color: var(--il-altgeld) !important;
}

/* Force Summary Text & Headers to use Variables */
.summary-text-wrapper {
	color: var(--text-main) !important;
}

.stats-header-title {
	color: var(--stats-header-color) !important;
}

/* Metadata & Tables */
.metadata-table, .stats-table {
	background-color: var(--bg-card) !important;
	color: var(--text-main) !important;
}

.metadata-table td, .stats-table td, .stats-table th {
	border-bottom: 1px solid var(--border-color) !important;
}

.meta-label { color: var(--text-header) !important; }
.meta-value { color: var(--text-main) !important; }

/* Executive Summary Highlights */
.summary-highlight {
	color: var(--highlight-color) !important;
}

/* Statistics Table Rows */
.stats-table tr:nth-child(even) {
	background-color: var(--table-even-bg) !important;
}

.stats-table tr:not(.current-month-row):hover {
	background-color: var(--table-hover-bg) !important;
	color: var(--text-main) !important;
}

/* Current Month Row */
.stats-table tr.current-month-row td {
	background-color: var(--curr-month-bg) !important;
	color: var(--curr-month-text) !important;
	border-top: 2px solid var(--border-color) !important;
	border-bottom: 2px solid var(--border-color) !important;
}

/* Dark Mode Map Fix */
body.dark-mode .leaflet-container {
	filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* --- 6. NAVIGATION STYLES --- */
.site-navigation {
	width: 100%; 
	background-color: var(--bg-nav);
	padding: 1rem 0; 
	box-sizing: border-box;
	transition: background-color 0.3s ease;
}

.site-navigation ul {
	list-style: none;
	max-width: 1200px;     
	width: 100%;           
	margin: 0 auto;        
	padding: 0 20px;     
	box-sizing: border-box; 
	display: flex;
	flex-direction: column; 
	align-items: flex-start;
}

.site-navigation > ul > li { margin: 0.5rem 0; }

.site-navigation a {
	text-decoration: none;
	color: var(--text-nav);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	display: block;
}

.site-navigation a:hover {
	color: var(--il-altgeld);
	text-decoration: underline;
}

@media (min-width: 900px) {
	.site-navigation { padding: 1.2rem 0; }
	.site-navigation ul { flex-direction: row; align-items: center; justify-content: flex-start; }
	.site-navigation > ul > li { margin: 0 1.5rem 0 0; }
}

/* --- 7. FOOTER STYLES --- */
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }
.footer-links a { color: var(--il-blue); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.ext-link::after { content: " \2197"; font-size: 0.8em; }

.sponsor-logo {
	max-width: 200px;
	margin-top: 1rem;
	display: block;
}

/* --- 8. GLOBAL HEADER & FOOTER RE-BRANDING (DARK MODE) --- */
body.dark-mode ilw-header,
body.dark-mode ilw-footer {
	/* We rely on the --il-storm-95 variable above to penetrate the Shadow DOM.
	   However, we also set the background here for any exposed parts. */
	background-color: #1D58A7 !important;
	color: #ffffff !important; 
}

/* Header Links: Ensure they are white on the Industrial Blue background */
body.dark-mode ilw-header a {
	color: #ffffff !important;
}

/* Footer Links: Altgeld Orange on Industrial Blue (Requested) */
body.dark-mode .footer-links a { 
	color: var(--il-altgeld) !important; 
	font-weight: 700; 
}

/* --- 9. TOGGLE BUTTON --- */
#theme-toggle {
	background: none;
	border: 2px solid currentColor;
	color: inherit;
	cursor: pointer;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 15px;
	border-radius: 20px;
	font-size: 0.9rem;
	transition: all 0.2s;
}

#theme-toggle:hover { background-color: rgba(255,255,255, 0.2); }

/* Dashboard Spacing Fix */
.dashboard-grid { margin-top: 2rem; }