/* ============================================================================
 * CORE THEME - Brand Colors and Bootstrap Overrides
 * ============================================================================
 *
 * CSS ARCHITECTURE (4-Layer System):
 * 1. Vendor CSS (vendor/css/*.css) - Bootstrap & theme framework (DO NOT EDIT)
 * 2. core-theme.css (THIS FILE) - Brand colors & Bootstrap overrides
 * 3. app.css - Page-specific styles using semantic variables
 * 4. Component .razor.css - Scoped component styles
 *
 * IMPORTANT: Load order matters! core-theme.css must load AFTER vendor CSS
 * but BEFORE app.css. Check Styles.razor to verify correct order.
 *
 * ===============================================================================
 * AI AGENT INSTRUCTIONS - How to Customize for New Sites (or Brand/Color Changes)
 * ===============================================================================
 *
 * STEP 1: Update Brand Colors (REQUIRED)
 * - Change --primary-brand to the client's main brand color
 * - Change --secondary-brand to a complementary accent color
 * - Update --bs-primary-rgb to match (convert hex to RGB values)
 *
 * STEP 2: Verify Propagation
 * - Brand colors automatically flow to: buttons, links, form focus states,
 *   menu active states, badges, and all Bootstrap primary components
 * - Check the site visually after changing - most elements should update
 *
 * STEP 3: Override Specific Elements (if needed)
 * - If any element needs a different color, add an override in app.css
 * - Use CSS variables when possible: var(--primary-brand)
 * - Use color-mix() for hover states: color-mix(in srgb, var(--primary-brand) 80%, black)
 *
 * WHAT NOT TO DO:
 * - Do NOT edit vendor CSS files
 * - Do NOT use hardcoded hex colors in app.css (use variables)
 * - Do NOT add !important unless overriding vendor CSS
 *
 * ============================================================================ */

:root {
	/* ============================================================================
		* BRAND COLORS - CUSTOMIZE THESE FIRST FOR ANY NEW SITE
		* ============================================================================ */
	--primary-brand: #230FD2;     /* GlobalCove brand - deep blue-violet */
	--secondary-brand: #006432;   /* GlobalCove accent - forest green */

	/* Override Bootstrap's primary color to use our brand color */
	--bs-primary: var(--primary-brand);
	--bs-primary-rgb: 35, 15, 210; /* RGB values of primary-brand (#230FD2) */

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

	/* Theme Colors - Light Theme Default */
	--theme-bg-primary: #ffffff;
	--theme-bg-secondary: #f8f9fa;
	--theme-bg-tertiary: #e9ecef;
	--theme-text-primary: #212529;
	--theme-text-secondary: #6c757d;
	--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 brand colors for active states */
	--menu-bg: var(--theme-bg-primary);
	--menu-text: var(--theme-text-primary);
	--menu-active-bg: var(--primary-brand);  /* Solid color, no gradient */
	--menu-active-text: #ffffff;
	--menu-hover-bg: var(--theme-bg-secondary);

	/* Button Colors - Automatically use brand colors */
	--btn-primary-bg: var(--primary-brand);
	--btn-primary-text: #ffffff;
	--btn-primary-hover: color-mix(in srgb, var(--primary-brand) 80%, black);
	--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);

	/* Input/Form Colors - Light theme uses slightly off-white background */
	--input-bg: #f7f7f7;

	/* Typography */
	--font-heading: 'Segoe UI', sans-serif;
	--font-body: 'Plus Jakarta Sans', 'Public Sans', 'Segoe UI', sans-serif;

	/* 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);

	/* Input/Form Colors - Dark theme uses darker background than cards */
	--input-bg: #262626;
}

/* 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);

		/* Input/Form Colors */
		--input-bg: #262626;
	}
}

/* Base Application Styles */
body {
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary);
	font-family: 'Plus Jakarta Sans', 'Public Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding-top: var(--content-padding-top);
	transition: background-color 0.3s ease, color 0.3s ease;
}

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

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

/* Navigation Styles */
.navbar {
	background-color: var(--navbar-bg) !important;
	border-bottom: 1px solid var(--navbar-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	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 */
.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 {
	background-color: var(--btn-primary-hover) !important;
	border-color: var(--btn-primary-hover) !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: var(--btn-primary-text) !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: var(--btn-primary-text) !important;
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--secondary-brand) 25%, transparent) !important;
}

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

a:hover {
	color: color-mix(in srgb, var(--primary-brand) 80%, black);
}

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

.footer a:hover {
	color: color-mix(in srgb, var(--primary-brand) 80%, black) !important;
}

/* Footer Text - Override vendor purple text color to default dark gray */
.footer.bg-footer-theme,
.bg-footer-theme {
	color: #544f5a !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;
}

/* Background Colors */
.bg-primary-brand {
	background-color: var(--primary-brand) !important;
}

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

/* Form Styles */
.form-control,
.form-select {
	background-color: var(--input-bg);
	border-color: var(--theme-border);
	color: var(--theme-text-primary);
}

.form-control:focus,
.form-select:focus {
	background-color: var(--input-bg);
	border-color: var(--primary-brand);
	color: var(--theme-text-primary);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary-brand) 25%, transparent);
}

/* Dark mode form improvements */
[data-theme="dark"] .form-control,
.dark-theme .form-control,
[data-theme="dark"] .form-select,
.dark-theme .form-select {
	background-color: var(--input-bg);
	border-color: var(--theme-border);
	color: var(--theme-text-primary);
}

[data-theme="dark"] .form-control:focus,
.dark-theme .form-control:focus,
[data-theme="dark"] .form-select:focus,
.dark-theme .form-select:focus {
	background-color: var(--input-bg);
	border-color: var(--primary-brand);
	color: var(--theme-text-primary);
}

/* Form floating labels - Material Design style */
.form-floating > .form-control,
.form-floating > .form-select {
	background-color: var(--input-bg) !important;
}

[data-theme="dark"] .form-floating > .form-control,
.dark-theme .form-floating > .form-control,
[data-theme="dark"] .form-floating > .form-select,
.dark-theme .form-floating > .form-select {
	background-color: var(--input-bg) !important;
}

/* NOTE: Floating label color rules have been moved to the Material Design Component Fixes section below
* to ensure proper behavior (gray when inactive, brand color only when actively focused) */

/* Form check (checkbox/radio) label styling */
.form-check-label {
	color: var(--theme-text-primary);
}

[data-theme="dark"] .form-check-label,
.dark-theme .form-check-label {
	color: var(--theme-text-primary);
}

/* Form check (checkbox/radio) input styling */
.form-check-input:checked {
	background-color: var(--primary-brand);
	border-color: var(--primary-brand);
}

.form-check-input:focus {
	border-color: var(--primary-brand);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-brand) 25%, transparent);
}

/* ============================================================================
* MATERIAL DESIGN COMPONENT FIXES - Purple to Primary Override
* ============================================================================
* These rules override Material Design components that are showing purple
* instead of the primary brand color.
* Uses !important to override vendor CSS specificity.
*/

/* Text Input Hover State - Override purple border from vendor */
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus),
.form-floating > .form-control:hover:not(:disabled):not(:focus),
.form-floating > .form-select:hover:not(:disabled):not(:focus) {
	border-color: var(--theme-text-muted);
}

/* Text Input Focus State - Reduced box-shadow for subtler effect */
.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 color-mix(in srgb, var(--primary-brand) 15%, transparent) !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(--theme-text-primary) !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(--theme-text-primary) !important;
	color: var(--theme-text-primary) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
}

/* Override browser autofill background in dark mode - Replace yellow with dark theme */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill:hover,
[data-theme="dark"] textarea:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill:active,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill:hover,
[data-theme="dark"] select:-webkit-autofill:focus,
[data-theme="dark"] select:-webkit-autofill:active,
.dark-theme input:-webkit-autofill,
.dark-theme input:-webkit-autofill:hover,
.dark-theme input:-webkit-autofill:focus,
.dark-theme input:-webkit-autofill:active,
.dark-theme textarea:-webkit-autofill,
.dark-theme textarea:-webkit-autofill:hover,
.dark-theme textarea:-webkit-autofill:focus,
.dark-theme textarea:-webkit-autofill:active,
.dark-theme select:-webkit-autofill,
.dark-theme select:-webkit-autofill:hover,
.dark-theme select:-webkit-autofill:focus,
.dark-theme select:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
}

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

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

/* Floating Label - Default inactive state should be gray */
.form-floating > label {
	color: var(--theme-text-muted) !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(--theme-text-muted) !important;
}

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

/* Floating Outline Label - Fix background behind floated label text
* The label::after creates the "gap" in the border. Vendor uses purple #312d4b */
.form-floating-outline label::after,
.form-floating-outline > span::after {
	background: var(--card-bg) !important;
}

/* Floating Label - Placeholder color when focused (vendor uses purple #76728e) */
.form-floating > .form-control:focus::placeholder,
.form-floating > .form-select:focus::placeholder,
.form-floating-outline > .form-control:focus::placeholder,
.form-floating-outline > .form-select:focus::placeholder {
	color: var(--theme-text-muted) !important;
}

/* Checkbox - Unchecked state (override purple from vendor) */
.form-check-input {
	--bs-form-check-bg: var(--card-bg);
	background-color: var(--card-bg);
	border-color: var(--theme-text-muted) !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) */
.form-check-input:indeterminate {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

/* Checkbox - Focus state */
.form-check-input:focus {
	border-color: var(--primary-brand) !important;
	box-shadow: 0 0 0 0.1rem color-mix(in srgb, var(--primary-brand) 15%, transparent) !important;
}

/* Material Design ripple effect on checkboxes */
.form-check:not(.form-switch) .form-check-input::after {
	background-color: color-mix(in srgb, var(--primary-brand) 20%, transparent) !important;
}

/* Radio buttons - Checked state */
.form-check-input[type="radio"]:checked {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !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 data tables with selection) */
.dt-checkboxes-cell .form-check-input:checked,
.dt-checkboxes-cell .form-check-input: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: 35, 15, 210 !important; /* RGB values of primary-brand (#230FD2) */
}

/* Range input styling */
.form-range {
	/* Track styling - use secondary brand color */
}

.form-range::-webkit-slider-runnable-track {
	background-color: var(--secondary-brand);
}

.form-range::-moz-range-track {
	background-color: var(--secondary-brand);
}

.form-range::-webkit-slider-thumb {
	background-color: var(--primary-brand);
}

.form-range::-moz-range-thumb {
	background-color: var(--primary-brand);
}

.form-range::-webkit-slider-thumb:active {
	background-color: var(--primary-brand);
}

.form-range::-moz-range-thumb:active {
	background-color: var(--primary-brand);
}

.form-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem color-mix(in srgb, var(--primary-brand) 25%, transparent);
}

.form-range:focus::-moz-range-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem color-mix(in srgb, var(--primary-brand) 25%, transparent);
}

/* Navigation Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--primary-brand);
	color: var(--btn-primary-text);
}

.nav-pills .nav-link:hover {
	background-color: color-mix(in srgb, var(--primary-brand) 15%, transparent);
	color: var(--primary-brand);
}

.nav-pills .nav-link.active:hover {
	background-color: color-mix(in srgb, var(--primary-brand) 85%, black);
	color: var(--btn-primary-text);
}

/* Dropdown Styles */
.dropdown-menu {
	background-color: var(--card-bg);
	border-color: var(--card-border);
	box-shadow: 0 4px 12px var(--card-shadow);
}

.dropdown-item {
	color: var(--theme-text-primary);
}

.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--theme-bg-secondary);
	color: var(--theme-text-primary);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:not(.disabled).active,
.dropdown-item:not(.disabled):active {
	background-color: var(--primary-brand) !important;
	color: var(--btn-primary-text) !important;
}

/* Dropdown toggle button styling */
.dropdown-toggle.btn-outline-primary:active,
.dropdown-toggle.btn-outline-primary.show,
.show > .dropdown-toggle.btn-outline-primary {
	background-color: var(--secondary-brand) !important;
	border-color: var(--secondary-brand) !important;
	color: var(--btn-primary-text) !important;
}

/* Dark mode dropdown improvements */
[data-theme="dark"] .dropdown-menu,
.dark-theme .dropdown-menu {
	background-color: var(--theme-bg-secondary);
	border-color: var(--theme-border);
}

[data-theme="dark"] .dropdown-item,
.dark-theme .dropdown-item {
	color: var(--theme-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
.dark-theme .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus,
.dark-theme .dropdown-item:focus {
	background-color: var(--theme-bg-tertiary);
	color: var(--theme-text-primary);
}

[data-theme="dark"] .dropdown-header,
.dark-theme .dropdown-header {
	color: var(--theme-text-secondary);
}

[data-theme="dark"] .dropdown-divider,
.dark-theme .dropdown-divider {
	border-color: var(--theme-border);
}

/* Modal/Dialog Styles */
.modal-content {
	background-color: var(--card-bg);
	border-color: var(--card-border);
	color: var(--theme-text-primary);
}

[data-theme="dark"] .modal-content,
.dark-theme .modal-content {
	background-color: var(--theme-bg-secondary);
	border-color: var(--theme-border);
}

[data-theme="dark"] .modal-header,
.dark-theme .modal-header {
	border-bottom-color: var(--theme-border);
}

[data-theme="dark"] .modal-footer,
.dark-theme .modal-footer {
	border-top-color: var(--theme-border);
}

[data-theme="dark"] .btn-close,
.dark-theme .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-backdrop,
.dark-theme .modal-backdrop {
	background-color: rgba(0, 0, 0, 0.7);
}

/* Heading Typography - Sora geometric font */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Footer Styles */
.footer {
	background-color: var(--theme-bg-secondary);
	border-top: 1px solid var(--theme-border);
	color: var(--theme-text-secondary);
}