/* Custom MeatMatrix Purple Theme 
 * This file overrides Bootstrap and component colors to use the purple theme
 * Primary color: rgba(100, 50, 220, 0.64) - Purple with alpha
 * Dark accent: #1E1A34 - Dark purple for headers and accents
 * 
 * Updated: 2025-08-07 - Changed from orange (254, 113, 9) to purple theme
 */
:root {
    /* Primary Purple Color Variables */
    --mm-primary-purple: rgba(100, 50, 220, 0.64);
    --mm-primary-purple-rgb: 100, 50, 220;
    --mm-primary-purple-alpha: rgba(100, 50, 220, 0.64);
    --mm-primary-dark: #1E1A34;
    /* Bootstrap Primary Color Overrides */
    --bs-primary: var(--mm-primary-purple);
    --bs-primary-rgb: var(--mm-primary-purple-rgb);
    --bs-primary-text-emphasis: #2c1810;
    --bs-primary-bg-subtle: rgba(100, 50, 220, 0.1);
    --bs-primary-border-subtle: rgba(100, 50, 220, 0.3);
    /* DevExpress CSS Variable Overrides - All !important */
    --dxbl-accent: var(--mm-primary-purple) !important;
    --dxbl-accent-light: var(--mm-primary-purple-alpha) !important;
    --dxbl-accent-dark: var(--mm-primary-dark) !important;
    --dxbl-primary: var(--mm-primary-purple) !important;
    --dxbl-primary-light: var(--mm-primary-purple-alpha) !important;
    --dxbl-checkbox-checked-bg: var(--mm-primary-purple) !important;
    --dxbl-checkbox-checked-border: var(--mm-primary-purple) !important;
    --dxbl-checkbox-check-element-checked-bg: var(--mm-primary-purple) !important;
    --dxbl-checkbox-check-element-bg: var(--mm-primary-purple) !important;
    --dxbl-checkbox-indeterminate-bg: var(--mm-primary-purple) !important;
    --dxbl-loading-indicator-color: var(--mm-primary-purple) !important;
    --dxbl-loading-panel-spinner-color: var(--mm-primary-purple) !important;
    --dxbl-spinner-border-color: rgba(100, 50, 220, 0.2) !important;
    --dxbl-spinner-border-top-color: var(--mm-primary-purple) !important;
    /* Bootstrap Dark Mode Primary Overrides */
    --bs-primary-text-emphasis-dark: rgba(100, 50, 220, 0.9);
    --bs-primary-bg-subtle-dark: rgba(100, 50, 220, 0.15);
    --bs-primary-border-subtle-dark: rgba(100, 50, 220, 0.4);
    /* Link Colors */
    --bs-link-color: var(--mm-primary-purple);
    --bs-link-hover-color: rgba(100, 50, 220, 0.9);
    /* Button Colors */
    --bs-btn-color: rgba(100, 50, 220, 0.64);
    --bs-btn-bg: var(--mm-primary-purple-alpha);
    --bs-btn-border-color: var(--mm-primary-purple-alpha);
    --bs-btn-hover-color: rgba(100, 50, 220, 0.9);
    --bs-btn-hover-bg: var(--mm-primary-purple);
    --bs-btn-hover-border-color: var(--mm-primary-purple);
    --bs-btn-focus-shadow-rgb: var(--mm-primary-purple-rgb);
    --bs-btn-active-color: rgba(100, 50, 220, 0.9);
    --bs-btn-active-bg: var(--mm-primary-dark);
    --bs-btn-active-border-color: var(--mm-primary-dark);
    /* Form Control Focus */
    --bs-form-focus-border-color: rgba(100, 50, 220, 0.6);
    --bs-form-focus-box-shadow: 0 0 0 0.25rem rgba(100, 50, 220, 0.25);
}

/* Primary Button Styles */
.btn-primary {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
    color: white !important;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
    color: white !important;
}

.btn-primary:focus, .btn-primary.focus {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
    box-shadow: 0 0 0 0.2rem rgba(100, 50, 220, 0.5) !important;
}

.btn-primary:active, .btn-primary.active {
    background-color: var(--mm-primary-dark) !important;
    border-color: var(--mm-primary-dark) !important;
}

/* Link Styles */
a {
    color: var(--mm-primary-purple);
}

a:hover {
    color: rgba(100, 50, 220, 0.64);
}

/* Form Control Focus States */
.form-control:focus, .form-select:focus {
    border-color: rgba(100, 50, 220, 0.6) !important;
    box-shadow: 0 0 0 0.25rem rgba(100, 50, 220, 0.25) !important;
}

/* Bootstrap Badges */
.badge-primary {
    background-color: var(--mm-primary-purple-alpha) !important;
}

/* Bootstrap Alerts */
.alert-primary {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
}

/* Progress Bars */
.progress-bar {
    background-color: var(--mm-primary-purple-alpha) !important;
}

/* Nav Pills Active State */
.nav-pills .nav-link.active {
    background-color: var(--mm-primary-purple-alpha) !important;
}

/* Pagination Active */
.page-item.active .page-link {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
}

/* List Group Active */
.list-group-item.active {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
}

/* Dropdown Item Active */
.dropdown-item:active {
    background-color: var(--mm-primary-purple-alpha) !important;
}

/* Text Colors */
.text-primary {
    color: var(--mm-primary-purple) !important;
}

/* Border Colors */
.border-primary {
    border-color: var(--mm-primary-purple) !important;
}

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

/* Custom DevExpress Blazor Overrides */
.dxbl-btn-primary {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
    color: white !important;
}

.dxbl-btn-primary:hover {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* Ensure consistency with existing styles */
.dxbl-btn-standalone {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
}

/* Override any remaining orange colors if they exist */
*[style*="254, 113, 9"] {
    color: var(--mm-primary-purple) !important;
}

*[style*="#FE7109"] {
    color: var(--mm-primary-purple) !important;
}

/* Bootstrap Orange Override */
.btn-outline-warning, .btn-warning {
    color: #fff;
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
}

.btn-outline-warning:hover, .btn-warning:hover {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* Ensure focus states use purple */
.form-check-input:focus {
    border-color: rgba(100, 50, 220, 0.6) !important;
    box-shadow: 0 0 0 0.25rem rgba(100, 50, 220, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* DevExpress Blazor Component Overrides */

/* DevExpress Checkbox Purple Theme - Ultra Aggressive */
.dxbl-checkbox-mark,
.dxbl-checkbox .dxbl-checkbox-mark,
.dxbl-checkbox-checked .dxbl-checkbox-mark,
.dxbl-checkbox:not(.dxbl-disabled):not(.dxbl-invalid) .dxbl-checkbox-mark,
.dxbl-checkbox-checked:not(.dxbl-disabled) .dxbl-checkbox-mark,
.dxbl-checkbox-checked .dxbl-checkbox-check-element {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
    color: white !important;
}

/* Target any checkbox with inline styles */
.dxbl-checkbox-mark[style],
.dxbl-checkbox-check-element[style] {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* DevExpress Checkbox focus state */
.dxbl-checkbox:not(.dxbl-disabled) .dxbl-checkbox-mark:focus {
    box-shadow: 0 0 0 0.25rem rgba(100, 50, 220, 0.25) !important;
    border-color: rgba(100, 50, 220, 0.6) !important;
}

/* DevExpress Loading Panel Purple Theme - Ultra Aggressive */
.dxbl-loading-panel .dxbl-loading-panel-indicator,
.dxbl-loading-panel-indicator,
.dxbl-loading-panel-spinner,
.dxbl-spinner,
.spinner-border,
[class*="loading"],
[class*="spinner"] {
    border-color: rgba(100, 50, 220, 0.2) !important;
    border-top-color: var(--mm-primary-purple) !important;
    border-left-color: var(--mm-primary-purple) !important;
    border-right-color: rgba(100, 50, 220, 0.2) !important;
    border-bottom-color: rgba(100, 50, 220, 0.2) !important;
}

.dxbl-loading-panel .dxbl-loading-panel-indicator::before,
.dxbl-loading-panel .dxbl-loading-panel-indicator::after {
    border-top-color: var(--mm-primary-purple) !important;
    border-color: rgba(100, 50, 220, 0.2) !important;
}

/* Target any loading elements with inline styles */
.dxbl-loading-panel-indicator[style],
.dxbl-loading-panel-spinner[style],
[class*="spinner"][style] {
    border-color: rgba(100, 50, 220, 0.2) !important;
    border-top-color: var(--mm-primary-purple) !important;
}

/* DevExpress Button Primary Override (ensure consistency) */
.dxbl-btn.dxbl-btn-primary {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple-alpha) !important;
    color: white !important;
}

.dxbl-btn.dxbl-btn-primary:hover {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

.dxbl-btn.dxbl-btn-primary:focus {
    background-color: var(--mm-primary-purple) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* DevExpress Grid Selection Colors */
.dxbl-grid-data-row-selected {
    background-color: rgba(100, 50, 220, 0.1) !important;
}

.dxbl-grid-data-row-selected:hover {
    background-color: rgba(100, 50, 220, 0.2) !important;
}

/* DevExpress ComboBox and TextBox focus states */
.dxbl-text-edit:focus,
.dxbl-combo-box:focus,
.dxbl-date-edit:focus {
    border-color: rgba(100, 50, 220, 0.6) !important;
    box-shadow: 0 0 0 0.25rem rgba(100, 50, 220, 0.25) !important;
}

/* Force override any orange colors that might still appear */
/* This targets any element with orange/amber colors and forces purple */
[style*="rgb(255, 193, 7)"],
[style*="rgb(255, 173, 51)"],
[style*="rgb(255, 152, 0)"],
[style*="rgb(254, 113, 9)"],
[style*="#ffc107"],
[style*="#ffad33"],
[style*="#ff9800"],
[style*="#fe7109"],
[style*="orange"],
[class*="orange"],
[class*="warning"]:not(.btn):not(.alert):not(.badge),
.text-warning {
    background-color: var(--mm-primary-purple-alpha) !important;
    border-color: var(--mm-primary-purple) !important;
}

/* Specific override for any DevExpress default theme colors */
.dxbl-checkbox-mark[style*="orange"],
.dxbl-loading-panel-indicator[style*="orange"],
.dxbl-spinner[style*="orange"] {
    border-color: rgba(100, 50, 220, 0.2) !important;
    border-top-color: var(--mm-primary-purple) !important;
    background-color: var(--mm-primary-purple) !important;
}