/* 
 * BOOTSTRAP OVERRIDES - RateRight Header/Footer Consistency Fix
 * This file uses !important declarations to override Bootstrap 5
 * and ensure header/footer consistency across all pages.
 */

/* ============================================================================
   HEADER OVERRIDES - Force Landing Page Style
   ============================================================================ */

/* Force navbar to match landing page dark style */
.navbar {
    background: #1e293b !important;
    background-color: #1e293b !important;
    backdrop-filter: blur(10px) !important;
}

/* Override Bootstrap navbar-light class */
.navbar-light {
    background-color: #1e293b !important;
}

/* Force navbar brand (logo) to be always visible and white */
.navbar-brand {
    color: white !important;
    font-weight: bold !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: white !important;
    opacity: 1 !important;
}

/* Force all navbar links to be white */
.navbar-nav .nav-link {
    color: white !important;
    opacity: 0.9 !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: white !important;
    opacity: 1 !important;
}

/* Force dropdown toggle text to be white */
.navbar-nav .dropdown-toggle {
    color: white !important;
    opacity: 0.9 !important;
}

.navbar-nav .dropdown-toggle:hover,
.navbar-nav .dropdown-toggle:focus {
    color: white !important;
    opacity: 1 !important;
}

/* Ensure navbar toggler is visible on dark background */
.navbar-toggler {
    border-color: rgba(255,255,255,0.3) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ============================================================================
   FOOTER OVERRIDES - Force Landing Page Style  
   ============================================================================ */

/* Force footer to solid dark background, no gradient */
.footer {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
    color: white !important;
    padding: 3rem 2rem !important;
}

/* Ensure all footer text is white */
.footer,
.footer * {
    color: white !important;
}

/* Footer link styling to match landing page */
.footer a {
    color: rgba(255,255,255,0.5) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.footer a:hover {
    color: white !important;
}

/* Specific override for footer link classes */
.footer .text-white-50 {
    color: rgba(255,255,255,0.5) !important;
}

.footer .text-light {
    color: white !important;
}

/* ============================================================================
   COLOR REPLACEMENTS - Orange (#ff6600) to Blue (#2563eb)
   ============================================================================ */

/* Replace construction orange with blue in CSS variables */
:root {
    --construction-orange: #2563eb !important;
    --construction-blue: #2563eb !important;
}

/* Force any elements using orange background to use blue */
*[style*="background: #ff6600"],
*[style*="background-color: #ff6600"],
.bg-orange,
[class*="orange"] {
    background: #2563eb !important;
    background-color: #2563eb !important;
}

/* Force any elements using orange color to use blue */
*[style*="color: #ff6600"],
.text-orange,
[class*="orange"] {
    color: #2563eb !important;
}

/* Replace orange in borders */
*[style*="border-color: #ff6600"],
.border-orange {
    border-color: #2563eb !important;
}

/* Budget badge and similar elements */
.budget-badge {
    background-color: #2563eb !important;
    color: white !important;
}

/* Any construction-themed elements that might use orange */
.construction-header,
.btn-construction,
.badge-construction {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
}

/* Button overrides - ensure primary buttons use blue */
.btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* ============================================================================
   UTILITY OVERRIDES - Fix Common Bootstrap Conflicts
   ============================================================================ */

/* Ensure container doesn't override header/footer styling */
.container .navbar,
.container-fluid .navbar {
    background: #1e293b !important;
}

.container .footer,
.container-fluid .footer {
    background: #0f172a !important;
}

/* Fix any gradient bleeding issues */
.footer::before,
.footer::after {
    display: none !important;
}

/* Ensure fixed positioning works properly */
.navbar-fixed-top,
.navbar.fixed-top {
    background: #1e293b !important;
    backdrop-filter: blur(10px) !important;
}

/* Mobile responsiveness fixes */
@media (max-width: 768px) {
    .navbar {
        background: #1e293b !important;
    }
    
    .navbar-collapse {
        background: #1e293b !important;
    }
    
    .footer {
        background: #0f172a !important;
        padding: 2rem 1rem !important;
    }
}


/* ============================================================================
   DROPDOWN OVERRIDES - Ensure dropdowns work on dark background
   ============================================================================ */

/* Dropdown menu positioning and styling */
.dropdown-menu {
    background-color: white !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

.dropdown-item {
    color: #333 !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* ============================================================================
   NOTIFICATION BADGES - Ensure they're visible on dark header
   ============================================================================ */

.notification-count {
    background-color: #2563eb !important;
    color: white !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
}

/* Text-only notification count styling */
.notification-count.text-only {
    background-color: #2563eb !important;
    color: white !important;
    margin-left: 4px !important;
    display: inline-block !important;
}

/* ============================================================================
   FINAL SAFETY OVERRIDES - Catch any missed elements
   ============================================================================ */

/* Force any remaining orange elements to blue */
[style*="#ff6600"] {
    color: #2563eb !important;
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Ensure header stays dark across all page states */
header,
nav,
.header,
.navigation {
    background: #1e293b !important;
}

/* Ensure footer stays solid dark across all page states */
footer,
.footer,
.site-footer {
    background: #0f172a !important;
    background-image: none !important;
}

/* ============================================================================
   MOBILE HAMBURGER MENU FIX - Aggressive Layout Override
   ============================================================================ */

/* Mobile only - completely reorder navbar elements with maximum specificity */
@media (max-width: 991.98px) {
    /* Force flexbox layout with maximum specificity */
    .navbar.navbar-expand-lg.navbar-light.bg-light > .container,
    .navbar.navbar-expand-lg > .container,
    .navbar > .container,
    .navbar > .container-fluid {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    
    /* FORCE hamburger to left with maximum specificity */
    .navbar.navbar-expand-lg .navbar-toggler,
    .navbar .navbar-toggler,
    .navbar-toggler {
        order: -10 !important;
        margin-right: 1rem !important;
        margin-left: 0 !important;
        position: relative !important;
        /* z-index removed - see navigation_fix.css */
    }
    
    /* FORCE logo to center with maximum specificity */
    .navbar.navbar-expand-lg .navbar-brand,
    .navbar .navbar-brand,
    .navbar-brand {
        order: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
        position: relative !important;
        flex-grow: 1 !important;
    }
    
    /* FORCE dropdown to appear under hamburger (left side) */
    .navbar.navbar-expand-lg .navbar-collapse,
    .navbar .navbar-collapse,
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: 280px !important;
        background: #1e293b !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        border-radius: 0 0 8px 8px !important;
        /* z-index removed - see navigation_fix.css */
        order: 10 !important;
    }
    
    /* Style the mobile dropdown properly */
    .navbar-collapse .navbar-nav {
        padding: 0.75rem 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .navbar-collapse .nav-link {
        color: white !important;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    
    .navbar-collapse .nav-link:hover {
        background: rgba(255,255,255,0.15) !important;
    }
}

/* ============================================================================
   BOOTSTRAP WARNING COLOR OVERRIDES - Change Orange to Blue
   ============================================================================ */

/* Override ALL Bootstrap warning colors to blue */
.bg-warning {
    background-color: #2563eb !important;
}

.text-warning {
    color: #2563eb !important;
}

.badge.bg-warning {
    background-color: #2563eb !important;
    color: white !important;
}

.card-header.bg-warning {
    background-color: #2563eb !important;
    color: white !important;
}

.alert-warning {
    background-color: rgba(37, 99, 235, 0.1) !important;
    border-color: #2563eb !important;
    color: #1e40af !important;
}

/* Override Bootstrap's warning CSS variables globally */
:root {
    --bs-warning: #2563eb !important;
    --bs-warning-rgb: 37, 99, 235 !important;
    --bs-yellow: #2563eb !important;
}

/* ============================================================================
   NUCLEAR OPTION - High Specificity Bootstrap Warning Color Overrides
   ============================================================================ */

/* NUCLEAR OPTION - Override bg-warning with maximum specificity */
.card-header.bg-warning,
.bg-warning,
[class*="bg-warning"] {
    background-color: #2563eb !important;
    background: #2563eb !important;
}

/* Fix the custom btn-construction class */
.btn-construction,
.btn.btn-construction,
[class*="btn-construction"] {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: white !important;
}

/* Force Bootstrap warning color variable with high specificity */
.bg-warning {
    --bs-bg-opacity: 1 !important;
    background-color: #2563eb !important;
    background-color: rgba(37, 99, 235, var(--bs-bg-opacity)) !important;
}