/* ===========================================
   BOOTSTRAP OVERRIDE CSS
   Custom overrides for Bootstrap .bg-primary
   =========================================== */

/* Root variables for consistent theming */
:root {
    --custom-primary: #1e3a8a;
    --custom-primary-light: #3b82f6;
    --custom-primary-dark: #1e40af;
    --custom-primary-rgb: 30, 58, 138;
}

/* ===========================================
   BOOTSTRAP .bg-primary OVERRIDES
   =========================================== */

/* Override Bootstrap's .bg-primary class */
.bg-primary {
    background-color: var(--custom-primary) !important;
    background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    /* Override Bootstrap's rgba system */
    --bs-bg-opacity: 1 !important;
    --bs-primary-rgb: var(--custom-primary-rgb) !important;
}

/* Override the specific Bootstrap utility that uses rgba */
.bg-primary[style*="background-color: rgba(var(--bs-primary-rgb)"] {
    background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    background-color: var(--custom-primary) !important;
}

/* ===========================================
   CUSTOM BACKGROUND CLASSES
   =========================================== */

/* Solid color version */
.bg-custom-primary {
    background-color: var(--custom-primary) !important;
    color: white !important;
}

/* Gradient version */
.bg-custom-primary-gradient {
    background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    color: white !important;
}

/* Darker version */
.bg-custom-primary-dark {
    background-color: var(--custom-primary-dark) !important;
    color: white !important;
}

/* Lighter version */
.bg-custom-primary-light {
    background-color: var(--custom-primary-light) !important;
    color: white !important;
}

/* ===========================================
   BOOTSTRAP COMPONENT OVERRIDES
   =========================================== */

/* Override Bootstrap buttons */
.btn-primary {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
}

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

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.5) !important;
}

.btn-primary:disabled {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
    opacity: 0.65;
}

/* Override Bootstrap text colors */
.text-primary {
    color: var(--custom-primary) !important;
}

/* Override Bootstrap borders */
.border-primary {
    border-color: var(--custom-primary) !important;
}

/* Override Bootstrap alerts */
.alert-primary {
    background-color: rgba(30, 58, 138, 0.1) !important;
    border-color: rgba(30, 58, 138, 0.2) !important;
    color: var(--custom-primary) !important;
}

/* Override Bootstrap badges */
.badge-primary {
    background-color: var(--custom-primary) !important;
}

/* Override Bootstrap progress bars */
.progress-bar {
    background-color: var(--custom-primary) !important;
}

/* Override Bootstrap list groups */
.list-group-item-primary {
    background-color: rgba(30, 58, 138, 0.1) !important;
    color: var(--custom-primary) !important;
}

/* Override Bootstrap tables */
.table-primary {
    background-color: rgba(30, 58, 138, 0.1) !important;
}

/* Override Bootstrap navs */
.nav-pills .nav-link.active {
    background-color: var(--custom-primary) !important;
}

/* Override Bootstrap pagination */
.page-link {
    color: var(--custom-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--custom-primary) !important;
    border-color: var(--custom-primary) !important;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Background utilities with opacity */
.bg-primary-75 {
    background-color: rgba(30, 58, 138, 0.75) !important;
}

.bg-primary-50 {
    background-color: rgba(30, 58, 138, 0.5) !important;
}

.bg-primary-25 {
    background-color: rgba(30, 58, 138, 0.25) !important;
}

/* Text utilities */
.text-primary-light {
    color: var(--custom-primary-light) !important;
}

.text-primary-dark {
    color: var(--custom-primary-dark) !important;
}

/* Border utilities */
.border-primary-light {
    border-color: var(--custom-primary-light) !important;
}

.border-primary-dark {
    border-color: var(--custom-primary-dark) !important;
}

/* ===========================================
   RESPONSIVE OVERRIDES
   =========================================== */

@media (max-width: 576px) {
    .bg-primary {
        background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .bg-primary {
        background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    }
}

@media (min-width: 769px) {
    .bg-primary {
        background: linear-gradient(135deg, var(--custom-primary), var(--custom-primary-light)) !important;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .bg-primary {
        background-color: var(--custom-primary) !important;
        -webkit-print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}
.modal {
    z-index: 1080 !important;
}
.modal-backdrop {
    z-index: 1075 !important;
}