/*
 * Bootstrap Integration for DevExpress Fluent Themes
 * 
 * Problem: DevExpress Fluent themes update their own components with dynamic accent colors,
 * but the bootstrap CSS variables in fluent-light.bs5.min.css and fluent-dark.bs5.min.css
 * are hardcoded to blue (#0f6cbd).
 * 
 * Solution: Override Bootstrap variables to use DevExpress's dynamic accent color variables.
 * DevExpress sets --dxbl-accent-color when a Fluent accent color is selected.
 */

:root, [data-bs-theme=light], [data-bs-theme=dark] {
    /* Map Bootstrap primary to DevExpress accent color */
    /* Try multiple DevExpress variable names in order of preference */
    --bs-primary: var(--dxbl-accent-color, var(--DS-color-accent-default-rest, var(--dx-color-primary, #0f6cbd))) !important;
    
    /* Border and hover states */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 10%, transparent) !important;
    --bs-primary-border-subtle: var(--bs-primary) !important;
    --bs-primary-text-emphasis: var(--bs-primary) !important;
}

/* Ensure badge text/icons are white on primary background */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.badge.bg-primary i,
.badge.bg-primary svg,
.badge.text-bg-primary i,
.badge.text-bg-primary svg {
    color: white !important;
    fill: white !important;
}

/* Connection card icons - use white on accent color background */
/*.connection-icon {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.connection-icon i,
.connection-icon svg {
    color: white !important;
    fill: white !important;
}*/

/* Primary buttons */
.btn-primary {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
    border-color: color-mix(in srgb, var(--bs-primary) 85%, black) !important;
}

/* Outline primary buttons */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

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

/* Primary alerts */
.alert-primary {
    --bs-alert-bg: var(--bs-primary-bg-subtle) !important;
    --bs-alert-border-color: var(--bs-primary) !important;
    --bs-alert-color: var(--bs-primary) !important;
}

/* Pricing cards hover effect */
.card.border:hover {
    border-color: var(--bs-primary) !important;
}