/* ============================================================================
 * 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: Update PWA Manifest & Theme Meta (REQUIRED)
 * - Update theme_color in wwwroot/site.webmanifest to match --primary-brand
 * - Update background_color in wwwroot/site.webmanifest to match --theme-bg-primary
 * - Update <meta name="theme-color"> in App.razor to match --primary-brand
 * - Replace favicon PNGs in wwwroot/assets/favicons/ with new brand icons
 *
 * STEP 4: 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);
	--bs-heading-color: var(--theme-text-primary);
	/* Override Bootstrap component backgrounds to use theme variables */
	--bs-body-bg: var(--theme-bg-primary);
	--bs-body-color: var(--theme-text-primary);
	--bs-card-bg: var(--card-bg);
	--bs-card-title-color: var(--theme-text-primary);
	--bs-card-color: var(--theme-text-primary);
	--bs-modal-bg: var(--card-bg);
	--bs-dropdown-bg: var(--card-bg);
	--bs-dropdown-link-color: var(--theme-text-primary);
	--bs-dropdown-link-hover-color: var(--theme-text-primary);
	--bs-dropdown-link-hover-bg: var(--theme-bg-secondary);
	--bs-popover-bg: var(--card-bg);
	--bs-popover-header-bg: var(--theme-bg-secondary);
	--bs-offcanvas-bg: var(--card-bg);
	--bs-accordion-bg: var(--card-bg);
	--bs-accordion-active-bg: var(--theme-bg-secondary);
	--bs-nav-tabs-link-active-bg: var(--card-bg);
	--bs-nav-tabs-link-active-border-color: var(--theme-border);
	--bs-border-color: var(--theme-border);
	--bs-form-check-bg: var(--input-bg);
	/* 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;
	/* Layout Settings */
	--navbar-height: 80px;
	--menu-width: 260px;
	--content-padding-top: calc(var(--navbar-height) + 20px);
	/* ============================================================================
		* EXPERIENCE TOKENS - marketing pages (css/experience.css)
		* "Ink" sections stay dark in both themes; "signal" colors are the brand
		* violet/green lifted so they pass WCAG AA on ink.
		* ============================================================================ */
	/* Typography: Segoe UI to match the logo. System font only (not licensed for web
	   embedding), so nothing downloads. Mac falls back to San Francisco, Android to Roboto.
	   Headings use the weights in experience.css (800/750/700). See docs/agents/STYLING.md#typography. */
	--font-display: 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;
	--font-heading: var(--font-display);
	--font-body: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Roboto, Arial, sans-serif;
	/* Accent: the contrast phrase inside headlines and pull quotes. Same family as the
	   headings at Semilight, so contrast comes from weight, not a second typeface. */
	--font-accent: var(--font-display);
	--font-accent-weight: 350;
	--bs-body-font-family: var(--font-body);
	--font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
	--ink-bg: #08061C;
	--ink-bg-raised: #120E33;
	--ink-border: rgba(150, 140, 255, 0.18);
	--ink-line: rgba(150, 140, 255, 0.10);
	--ink-text: #F1EFFF;
	--ink-text-muted: #ABA6D8;
	--signal: #8B7DFF; /* primary-brand lifted for ink backgrounds (6.2:1) */
	--signal-green: #34D98A; /* secondary-brand lifted for ink backgrounds (11:1) */
	--ink-on-signal: #08061C;
}

/* 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: var(--font-body);
	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);
}

/* ============================================================================
 * PAGE LAYOUT SYSTEM
 * ============================================================================
 * Consistent page widths and spacing. Apply one class to the outermost
 * content <div> of each page. Responsive padding on mobile.
 *
 * .page-full-width  - edge-to-edge (dashboards, data-heavy pages)
 * .page-wide        - max 1400px  (multi-column pages, replaces container-xxl)
 * .page-standard    - max 1000px  (single-column lists, settings)
 * .page-narrow      - max  720px  (forms, confirmations, sparse content)
 */

.page-full-width,
.page-wide,
.page-standard,
.page-narrow {
	margin: 0 auto;
	padding: 1rem 2rem;
	color: var(--theme-text-primary, #212529);
}

.page-full-width {
	max-width: 100%;
}

.page-wide {
	max-width: 1400px;
}

.page-standard {
	max-width: 1000px;
}

.page-narrow {
	max-width: 720px;
}

/* Shared page header pattern: icon + title + subtitle */
.page-header {
	margin-bottom: 1.5rem;
}

.page-header h1 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
	color: var(--theme-text-primary, #212529);
}

.page-header h1 i {
	color: var(--primary-brand, #696cff);
}

.page-header .text-muted {
	color: var(--theme-text-muted, #6c757d) !important;
}

@media (max-width: 768px) {
	.page-full-width,
	.page-wide,
	.page-standard,
	.page-narrow {
		padding: 1rem;
	}
}
/* Footer Styles */
.footer {
	background-color: var(--theme-bg-secondary);
	border-top: 1px solid var(--theme-border);
	color: var(--theme-text-secondary);
}