/* 1. Base Fallback for older browsers */
.bg-violet-custom {
    background-color: var(--secondary); /* Standard Bootstrap Purple Hex */
}

/* 2. Modern Enhancement for newer browsers */
@supports (background: linear-gradient(135deg, #fc8d59 0%, var(--primary) 100%)) {
    .bg-violet-custom {
        background: linear-gradient(135deg, #fc8d59 0%, var(--primary) 100%);
    }
}

/* 3. Handling Transparency (Glassmorphism Degradation) */
.glass-panel {
    background-color: var(--secondary); /* Solid enough to read if blur fails */
}

@supports (backdrop-filter: blur(10px)) {
    .glass-panel {
        background-color: rgba(111, 66, 193, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* 4. Disabling Animations for Users with "Reduced Motion" */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-link, .btn {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Custom Inputs & Form Controls --- */
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: var(--primary-light); /* Light violet border on focus */
    outline: 0;
    /* Soft violet glow degradation */
    box-shadow: 0 0 0 0.2rem var(--primary-light);
}

/* Custom checkbox/radio degradation */
.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--primary-dark);;
    background-color: var(--primary-dark);
}

.flex-gap {
    display: flex;
    gap: 1rem; /* Works in all modern browsers */
}