/* DevNitro Core Theme Variables and Base Styles
 * This file contains the foundational CSS for DevNitro theming
 * It defines CSS custom properties for the DevNitro brand colors
 *
 * ARCHITECTURE:
 * 1. vendor/css/core.dist.css - Bootstrap base
 * 2. vendor/css/theme-default.dist.css - Vendor theme
 * 3. css/core-theme.css - THIS FILE: Brand colors + Bootstrap overrides
 * 4. app.css - Application-specific component styles
 */

:root {
	/* ============================================================================
	 * DEVNITRO BRAND COLORS
	 * ============================================================================ */
	--primary-brand: #FFA300;     /* Pantone 137 C - "Nitro" orange/gold */
	--primary-hover: #cc8200;     /* Darker for hover states */
	--primary-brand-rgb: 255, 163, 0; /* RGB values of #FFA300 */
	--secondary-brand: #00A3E0;   /* Pantone 299 C - "Dev" sky blue */
	--secondary-hover: #0082B3;   /* Darker for hover states */
	--secondary-brand-rgb: 0, 163, 224; /* RGB values of #00A3E0 */

	/* Override Bootstrap's primary color to use DevNitro brand color */
	--bs-primary: var(--primary-brand);
	--bs-primary-rgb: 255, 163, 0; /* RGB values of #FFA300 */

	/* Override Bootstrap link colors (prevents purple from showing) */
	--bs-link-color: var(--primary-brand);
	--bs-link-color-rgb: 255, 163, 0; /* RGB values of #FFA300 */
	--bs-link-hover-color: var(--primary-hover);
	--bs-link-hover-color-rgb: 204, 130, 0; /* RGB values of #cc8200 */

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

	/* Bootstrap dropdown colors (Note: vendor overrides these on .dropdown-menu, see below) */
	--bs-dropdown-link-active-bg: var(--secondary-brand);
	--bs-dropdown-link-active-color: var(--btn-primary-text);
	--bs-dropdown-link-hover-bg: var(--theme-bg-tertiary);
	--bs-dropdown-link-hover-color: var(--theme-text-primary);

	/* Body styling - DevNitro dark theme default */
	--bs-body-bg: #2a2a2a;
	--bs-body-color: #e0e0e0;
	--bs-heading-color: #ffffff;

	/* Theme Colors - DevNitro Dark Theme Default */
	--theme-bg-primary: #2a2a2a;
	--theme-bg-secondary: #1a1a1a;
	--theme-bg-tertiary: #3a3a3a;
	--theme-text-primary: #ffffff;
	--theme-text-secondary: #e0e0e0;
	--theme-text-muted: #b0b0b0;
	--theme-border: #444444;
	--theme-shadow: rgba(0, 0, 0, 0.3);

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

	/* Menu Colors - Uses DevNitro brand colors for active states */
	--menu-bg: var(--theme-bg-primary);
	--menu-text: var(--theme-text-primary);
	--menu-active-bg: var(--primary-brand);
	--menu-active-text: #ffffff;
	--menu-hover-bg: var(--theme-bg-tertiary);

	/* Button Colors - Automatically use DevNitro 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-tertiary);
	--card-border: var(--theme-border);
	--card-shadow: var(--theme-shadow);

	/* Input/Form Colors - between secondary (too dark) and tertiary (too light) */
	--input-bg: #262626;

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

/* Light Theme Variables (for future use) */
[data-theme="light"], .light-theme {
	--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 - Light */
	--navbar-bg: #ffffff;
	--navbar-text: #212529;
	--navbar-border: #dee2e6;

	/* Menu Colors - Light */
	--menu-bg: #ffffff;
	--menu-text: #212529;
	--menu-hover-bg: #f8f9fa;

	/* Card Colors - Light */
	--card-bg: #ffffff;
	--card-border: #dee2e6;
	--card-shadow: rgba(0, 0, 0, 0.1);
}

/* Auto Theme (respects system preference) */
@media (prefers-color-scheme: light) {
	[data-theme="auto"] {
		--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);

		--navbar-bg: #ffffff;
		--navbar-text: #212529;
		--navbar-border: #dee2e6;
		--menu-bg: #ffffff;
		--menu-text: #212529;
		--menu-hover-bg: #f8f9fa;
		--card-bg: #ffffff;
		--card-border: #dee2e6;
		--card-shadow: rgba(0, 0, 0, 0.1);
	}
}

/* Base Application Styles */
body {
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
	overflow-x: hidden; /* Prevent horizontal scroll from 100vw elements */
}

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

/* 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 - DevNitro Primary */
.btn-primary {
	background-color: var(--btn-primary-bg) !important;
	border-color: var(--btn-primary-bg) !important;
	color: var(--btn-primary-text) !important;
	text-transform: none;
}

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

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

.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;
}

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

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

/* Footer Links - Use DevNitro Yellow for better contrast on dark backgrounds */
.footer a {
	color: var(--secondary-brand) !important;
}

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

/* Footer Text */
.footer.bg-footer-theme,
.bg-footer-theme {
	color: var(--theme-text-secondary) !important;
}

/* Ensure footer text (not links) uses default color */
.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;
}

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

/* ============================================================================
 * FORM CONTROL FIXES - Override vendor purple with DevNitro brand colors
 * ============================================================================
 * These rules override Material Design components that show purple instead of
 * the DevNitro primary blue (#0066FF) color.
 */

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

/* Native select option styling - overrides vendor purple (#312d4b) */
select.form-select option,
.form-select option,
select option {
	background-color: var(--card-bg) !important;
	color: var(--theme-text-primary) !important;
}

/* Hover/focus uses gray, not brand color */
select.form-select option:hover,
.form-select option:hover,
select option:hover,
select.form-select option:checked,
.form-select option:checked,
select option:checked {
	background-color: var(--theme-bg-tertiary) !important;
	color: var(--theme-text-primary) !important;
}

/* Text Input Hover State - Override purple border (#76728e) 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 - Use DevNitro Yellow for focus outline */
.form-control:focus,
.form-select:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select:focus {
	background-color: var(--input-bg);
	border-color: var(--primary-brand) !important;
	color: var(--theme-text-primary);
	box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary-brand) 25%, transparent) !important;
}

/* Text Input Text Color - Keep text light, 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;
}

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

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

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

/* Override vendor CSS - Keep floating labels muted 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 orange 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 #312d4b 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[type="checkbox"]:indeterminate {
	background-color: var(--primary-brand) !important;
	border-color: var(--primary-brand) !important;
}

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

/* Material Design ripple effect on checkboxes - Change purple to secondary brand */
.form-check:not(.form-switch) .form-check-input::after {
	background-color: color-mix(in srgb, var(--secondary-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;
}

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

/* Ensure labels stay correct color 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(--theme-text-primary) !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;
}

/* Override vendor dropdown Bootstrap CSS variables (vendor sets these on .dropdown-menu, not :root) */
.dropdown-menu {
	--bs-dropdown-bg: var(--card-bg);
	--bs-dropdown-border-color: var(--card-border);
	--bs-dropdown-divider-bg: var(--theme-border);
	--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-tertiary);
	--bs-dropdown-link-active-color: var(--btn-primary-text);
	--bs-dropdown-link-active-bg: var(--secondary-brand);
	--bs-dropdown-link-disabled-color: var(--theme-text-muted);
	--bs-dropdown-header-color: var(--theme-text-muted);
}

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

/* DataTables checkboxes */
.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;
}

/* Range input styling */
.form-range::-webkit-slider-runnable-track {
	background-color: var(--theme-border);
}

.form-range::-moz-range-track {
	background-color: var(--theme-border);
}

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

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

.form-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px var(--theme-bg-primary), 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 var(--theme-bg-primary), 0 0 0 0.25rem color-mix(in srgb, var(--primary-brand) 25%, transparent);
}

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

/* ============================================================================
 * 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-tertiary);
	color: var(--theme-text-primary);
}

/* Active class uses secondary brand (orange) - matches BlankSite */
.dropdown-item.active,
.dropdown-item:not(.disabled).active {
	background-color: var(--secondary-brand) !important;
	color: var(--btn-primary-text) !important;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
	color: var(--theme-text-muted);
	pointer-events: none;
	background-color: transparent;
}

.dropdown-header {
	color: var(--theme-text-muted);
}

.dropdown-divider {
	border-color: var(--theme-border);
}

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

/* ============================================================================
 * 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: var(--primary-hover);
	color: var(--btn-primary-text);
}

/* ============================================================================
 * PAGINATION
 * ============================================================================ */

.pagination .page-link {
	color: var(--primary-brand);
	background-color: var(--theme-bg-secondary);
	border-color: var(--theme-border);
}

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

.pagination .page-link:hover {
	background-color: var(--theme-bg-tertiary);
	color: var(--primary-brand);
}

/* ============================================================================
 * LIST GROUP
 * ============================================================================ */

.list-group-item {
	background-color: var(--card-bg);
	border-color: var(--theme-border);
	color: var(--theme-text-primary);
}

.list-group-item.active {
	background-color: var(--primary-brand);
	border-color: var(--primary-brand);
	color: var(--btn-primary-text);
}

/* ============================================================================
 * PROGRESS BARS
 * ============================================================================ */

.progress {
	background-color: var(--theme-bg-secondary);
}

.progress-bar {
	background-color: var(--primary-brand);
}

/* ============================================================================
 * MODAL/DIALOG STYLES
 * ============================================================================ */

.modal-content {
	background-color: var(--card-bg);
	border-color: var(--card-border);
	color: var(--theme-text-primary);
}

.modal-header {
	border-bottom-color: var(--theme-border);
}

.modal-footer {
	border-top-color: var(--theme-border);
}

.btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-backdrop {
	--bs-backdrop-opacity: 0.7;
}

/* ============================================================================
 * ALERTS
 * ============================================================================ */

.alert-primary {
	background-color: color-mix(in srgb, var(--primary-brand) 10%, transparent);
	border-color: color-mix(in srgb, var(--primary-brand) 30%, transparent);
	color: var(--primary-brand);
}

/* ============================================================================
 * TABLES
 * ============================================================================ */

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

.table > :not(caption) > * > * {
	background-color: transparent;
	border-bottom-color: var(--theme-border);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: rgba(255, 255, 255, 0.02);
}

.table-hover > tbody > tr:hover > * {
	background-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================================
 * FOOTER STYLES
 * ============================================================================ */

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

/* ============================================================================
 * HOME PAGE / LANDING PAGE STYLES
 * Full-bleed gradient background that extends to edges
 * ============================================================================ */

/* When home-hero is present, extend gradient to fill gaps */
body:has(.home-hero) {
	background:
		linear-gradient(0deg,
			rgba(var(--primary-brand-rgb), 0.20) 0%,
			rgba(var(--primary-brand-rgb), 0.08) 25%,
			transparent 50%,
			rgba(var(--secondary-brand-rgb), 0.08) 75%,
			rgba(var(--secondary-brand-rgb), 0.20) 100%),
		linear-gradient(180deg, #3a3d41 0%, #2d3035 50%, #252829 100%) !important;
}

.layout-wrapper:has(.home-hero) {
	background: transparent !important;
	min-height: 100vh;
}

/* Make child containers transparent so layout gradient shows through */
.layout-wrapper:has(.home-hero) .layout-container,
.layout-wrapper:has(.home-hero) .layout-page,
.layout-wrapper:has(.home-hero) .content-wrapper,
.layout-wrapper:has(.home-hero) .container-p-y,
.layout-wrapper:has(.home-hero) .flex-grow-1 {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Footer styling for home page - remove bottom margin */
.layout-wrapper:has(.home-hero) .footer {
	margin-bottom: 0 !important;
}

/* Prevent horizontal scrollbar from 100vw technique */
.layout-wrapper:has(.home-hero) {
	overflow-x: hidden;
}