/* ELS Core Theme Variables and Base Styles
 * This file contains the foundational CSS for ELS theming
 * It defines CSS custom properties for the ELS brand colors
 */

:root {
	/* ============================================================================
	 * ELS BRAND COLORS
	 * ============================================================================ */
	--primary-brand: #0f599e;     /* ELS Blue */
	--primary-hover: #003D7F;     /* Darker Blue for hover states */
	--secondary-brand: #0f599e;   /* 80CC36 ELS Green accent */

	/* Override Bootstrap's primary color to use ELS brand color */
	--bs-primary: var(--primary-brand);
	--bs-primary-rgb: 15, 89, 158; /* RGB values of #0f599e */

	/* Override Bootstrap link colors (prevents purple from showing) */
	--bs-link-color: var(--primary-brand);
	--bs-link-color-rgb: 15, 89, 158;
	--bs-link-hover-color: var(--primary-hover);
	--bs-link-hover-color-rgb: 0, 61, 127; /* RGB values of #003D7F */

	/* Secondary color override */
	--bs-secondary: #8a8d93;
	--bs-secondary-rgb: 138, 141, 147;

	/* Standard Bootstrap theme colors */
	--bs-success: #56ca00;
	--bs-info: #16b1ff;
	--bs-warning: #ffb400;
	--bs-danger: #ff4c51;
	--bs-light: #dfdfe3;
	--bs-dark: #4b4b4b;

	/* Override Bootstrap dropdown active colors */
	--bs-dropdown-link-active-bg: var(--primary-brand);
	--bs-dropdown-link-active-color: #ffffff;

	/* Body styling from ELS backup */
	--bs-body-bg: #f4f5fa;
	--bs-body-color: #89868d;
	--bs-heading-color: #544f5a;

	/* Theme Colors - Light Theme Default */
	--theme-bg-primary: #ffffff;
	--theme-bg-secondary: #f8f9fa;
	--theme-bg-tertiary: #e9ecef;
	--theme-text-primary: #544f5a;
	--theme-text-secondary: #89868d;
	--theme-text-muted: #868e96;
	--theme-border: #dee2e6;
	--theme-shadow: rgba(0, 0, 0, 0.1);

	/* Navigation Colors */
	--navbar-bg: var(--theme-bg-primary);
	--navbar-text: var(--theme-text-primary);
	--navbar-border: var(--theme-border);

	/* Menu Colors - Uses ELS brand colors for active states */
	--menu-bg: var(--theme-bg-primary);
	--menu-text: var(--theme-text-primary);
	--menu-active-bg: linear-gradient(98deg, var(--primary-brand) 0%, var(--secondary-brand) 114%);
	--menu-active-text: #ffffff;
	--menu-hover-bg: var(--theme-bg-secondary);

	/* Button Colors - Automatically use ELS brand colors */
	--btn-primary-bg: var(--primary-brand);
	--btn-primary-text: #ffffff;
	--btn-primary-hover: var(--primary-hover);
	--btn-outline-primary: var(--secondary-brand);
	--btn-outline-hover-bg: var(--secondary-brand);

	/* Card/Surface Colors */
	--card-bg: var(--theme-bg-primary);
	--card-border: var(--theme-border);
	--card-shadow: var(--theme-shadow);

	/* Layout Settings */
	--navbar-height: 80px;
	--menu-width: 260px;
	--content-padding-top: calc(var(--navbar-height) + 20px);
}

/* Dark Theme Variables */
[data-theme="dark"], .dark-theme {
	--theme-bg-primary: #1a1a1a;
	--theme-bg-secondary: #2a2a2a;
	--theme-bg-tertiary: #3a3a3a;
	--theme-text-primary: #f5f5f5;
	--theme-text-secondary: #e0e0e0;
	--theme-text-muted: #c0c0c0;
	--theme-border: #444444;
	--theme-shadow: rgba(0, 0, 0, 0.3);

	/* Navigation Colors - Dark */
	--navbar-bg: #1a1a1a;
	--navbar-text: #f5f5f5;
	--navbar-border: #333333;

	/* Menu Colors - Dark */
	--menu-bg: #1a1a1a;
	--menu-text: #f5f5f5;
	--menu-hover-bg: #2a2a2a;

	/* Card Colors - Dark */
	--card-bg: #2a2a2a;
	--card-border: #444444;
	--card-shadow: rgba(0, 0, 0, 0.5);
}

/* Auto Theme (respects system preference) */
@media (prefers-color-scheme: dark) {
	[data-theme="auto"] {
		--theme-bg-primary: #1a1a1a;
		--theme-bg-secondary: #2a2a2a;
		--theme-bg-tertiary: #3a3a3a;
		--theme-text-primary: #f5f5f5;
		--theme-text-secondary: #e0e0e0;
		--theme-text-muted: #c0c0c0;
		--theme-border: #444444;
		--theme-shadow: rgba(0, 0, 0, 0.3);

		--navbar-bg: #1a1a1a;
		--navbar-text: #f5f5f5;
		--navbar-border: #333333;
		--menu-bg: #1a1a1a;
		--menu-text: #f5f5f5;
		--menu-hover-bg: #2a2a2a;
		--card-bg: #2a2a2a;
		--card-border: #444444;
		--card-shadow: rgba(0, 0, 0, 0.5);
	}
}

/* Base Application Styles */
body {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Layout Structure */
.layout-wrapper {
	background-color: var(--bs-body-bg) !important;
}

.layout-page {
	background-color: var(--bs-body-bg) !important;
}

/* Navigation Styles */
.navbar {
	background-color: var(--navbar-bg) !important;
	border-bottom: 1px solid var(--navbar-border);
	transition: all 0.3s ease;
}

.navbar-brand {
	color: var(--primary-brand) !important;
	font-weight: 700;
}

/* Navigation Link Styles */
.navbar-light .navbar-nav .nav-link {
	color: var(--navbar-text) !important;
	font-weight: 500;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
	color: var(--primary-brand) !important;
}

.navbar-light .navbar-nav .nav-link.active {
	color: var(--primary-brand) !important;
}

/* Dark theme nav link styling */
[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
.dark-theme .navbar-light .navbar-nav .nav-link {
	color: var(--navbar-text) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link:hover,
.dark-theme .navbar-light .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-light .navbar-nav .nav-link:focus,
.dark-theme .navbar-light .navbar-nav .nav-link:focus {
	color: var(--primary-brand) !important;
}

/* Menu Styles */
.menu {
	background-color: var(--menu-bg);
	color: var(--menu-text);
}

.menu-item.active > .menu-link:not(.menu-toggle) {
	background: var(--menu-active-bg);
	color: var(--menu-active-text);
	border-radius: 0 50px 50px 0;
}

.menu-item:hover > .menu-link {
	background-color: var(--menu-hover-bg);
}

/* Card Styles */
.card {
	background-color: var(--card-bg) !important;
	border-color: var(--card-border);
	box-shadow: 0 2px 8px var(--card-shadow);
}

/* Button Styles - ELS Blue Primary */
.btn-primary {
	background-color: var(--btn-primary-bg) !important;
	border-color: var(--btn-primary-bg) !important;
	color: var(--btn-primary-text) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--btn-primary-hover) !important;
	border-color: var(--btn-primary-hover) !important;
	color: #ffffff !important;
}

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

.btn-outline-primary:hover {
	background-color: var(--btn-outline-hover-bg) !important;
	border-color: var(--btn-outline-hover-bg) !important;
	color: #ffffff !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.show,
.btn-outline-primary:focus {
	background-color: var(--btn-outline-hover-bg) !important;
	border-color: var(--btn-outline-hover-bg) !important;
	color: #ffffff !important;
}

/* Links */
a {
	color: var(--primary-brand);
}

a:hover {
	color: var(--primary-hover);
}

/* Footer Links - Override vendor purple to ELS blue */
.footer a {
	color: var(--primary-brand) !important;
}

.footer a:hover {
	color: var(--primary-hover) !important;
}

/* Footer Text - Override vendor purple text color to default dark gray */
.footer.bg-footer-theme,
.bg-footer-theme {
	color: var(--bs-heading-color) !important;
}

/* Ensure footer text (not links) uses default color, but preserve Bootstrap color classes */
.footer.bg-footer-theme *:not(a):not(.footer-link):not([class*="text-"]) {
	color: inherit !important;
}

/* Text Colors */
.text-muted {
	color: var(--theme-text-muted) !important;
}

.text-primary-brand {
	color: var(--primary-brand) !important;
}

.text-secondary-brand {
	color: var(--secondary-brand) !important;
}

/* Badges */
.badge-primary {
	background-color: var(--primary-brand) !important;
}

/* Form Controls */
.form-control:focus,
.form-select:focus {
	border-color: var(--primary-brand);
	box-shadow: 0 0 0 0.1rem rgba(15, 89, 158, 0.15);
}

.form-check-input:checked {
	background-color: var(--primary-brand);
	border-color: var(--primary-brand);
}

/* Progress Bars */
.progress-bar {
	background-color: var(--primary-brand);
}

/* Nav Pills */
.nav-pills .nav-link.active {
	background-color: var(--primary-brand);
}

/* Pagination */
.pagination .page-link {
	color: var(--primary-brand);
}

.pagination .page-item.active .page-link {
	background-color: var(--primary-brand);
	border-color: var(--primary-brand);
}

/* List Group */
.list-group-item.active {
	background-color: var(--primary-brand);
	border-color: var(--primary-brand);
}

/* Alerts */
.alert-primary {
	background-color: color-mix(in srgb, var(--primary-brand) 10%, white);
	border-color: color-mix(in srgb, var(--primary-brand) 30%, white);
	color: var(--primary-hover);
}

/* ============================================================================
 * MATERIAL DESIGN COMPONENT FIXES - Purple to Blue Override
 * ============================================================================
 * These rules override Material Design components that are showing purple
 * instead of the ELS primary blue (#0f599e) color.
 * Uses !important to override vendor CSS specificity.
 */

/* Text Input Focus State - Change purple border to blue */
.form-control:focus,
.form-select:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
	border-color: var(--primary-brand) !important;
	box-shadow: 0 0 0 0.1rem rgba(15, 89, 158, 0.15) !important;
}

/* Text Input Text Color - Keep text gray/dark, not blue (All States) */
.form-control,
.form-select,
.form-control:not(:focus),
.form-select:not(:focus),
input.form-control,
select.form-select,
textarea.form-control {
	color: var(--bs-heading-color) !important;
}

/* Override browser autofill text color - Critical for Chrome/Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
input:-internal-autofill-selected {
	-webkit-text-fill-color: var(--bs-heading-color) !important;
	color: var(--bs-heading-color) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
}

/* Ensure form controls inside input groups have correct text color */
.input-group .form-control,
.input-group .form-select {
	color: var(--bs-heading-color) !important;
}

/* Fix for form-floating labels - keep input text gray */
.form-floating .form-control,
.form-floating .form-select {
	color: var(--bs-heading-color) !important;
}

/* Floating Label - Default inactive state should be gray */
.form-floating > label {
	color: var(--bs-body-color) !important;
}

/* Override vendor CSS - Keep floating labels gray even when they have content */
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
	color: var(--bs-body-color) !important;
}

/* Floating Label - Change to primary blue ONLY when actively focused */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-select:focus ~ label {
	color: var(--primary-brand) !important;
}

/* Checkbox - Checked state */
.form-check-input:checked {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Checkbox - Indeterminate state (partial selection) */
/* Note: Only applies to checkboxes, not radio buttons */
.form-check-input[type="checkbox"]:indeterminate {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Checkbox - Focus state (removes purple ring) */
.form-check-input:focus {
	border-color: var(--primary-brand) !important;
	box-shadow: 0 0 0 0.1rem rgba(15, 89, 158, 0.15) !important;
}

/* Material Design ripple effect on checkboxes - Change purple to blue */
.form-check:not(.form-switch) .form-check-input::after {
	background-color: rgba(15, 89, 158, 0.2) !important;
}

/* Radio buttons - Checked state */
.form-check-input[type="radio"]:checked {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Prevent form-check labels from turning purple/blue - keep default text color */
.form-check-label {
	color: var(--bs-heading-color) !important;
}

/* Ensure labels stay dark even when input is focused, active, or checked */
.form-check-input:focus ~ .form-check-label,
.form-check-input:active ~ .form-check-label,
.form-check-input:checked ~ .form-check-label {
	color: var(--bs-heading-color) !important;
}

/* Switch toggle - Checked state */
.form-switch .form-check-input:checked {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Input Group - Focus state */
.input-group:focus-within {
	border-color: var(--primary-brand) !important;
}

/* Select2/Dropdown - Active/Selected items */
.select2-container--default .select2-results__option--highlighted {
	background-color: var(--primary-brand) !important;
}

/* DataTables checkboxes (used in Track and Reports pages) */
.dt-checkboxes-cell .form-check-input:checked,
.dt-checkboxes-cell .form-check-input[type="checkbox"]:indeterminate {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Override any lingering purple color references in vendor CSS */
[class*="primary"] {
	--bs-primary: var(--primary-brand) !important;
	--bs-primary-rgb: 15, 89, 158 !important;
}