/* ---------------------------------------------------------
   RaceOwl Global Styles
   Modernized for Bootstrap 5
--------------------------------------------------------- */

/* Google Font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

/* Apply global font */
body {
    font-family: 'Open Sans', Helvetica, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}


/* ---------------------------------------------------------
   Navbar Styling (Light Gray Theme)
--------------------------------------------------------- */

.raceowl-nav {
    /* Updated to a clean, light gray (Silver/Gainsboro) */
    background-color: #e9ecef !important;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

    .raceowl-nav .navbar-brand img {
        height: 40px;
    }

.navbar-nav .nav-link {
    /* Dark text for high contrast against light gray */
    color: #495057 !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        /* Primary blue color on hover for a pop of color */
        color: #0d6efd !important;
        background-color: rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

/* ---------------------------------------------------------
   Buttons & Navigation Elements
--------------------------------------------------------- */

/* Primary Custom Button */
.btn-custom {
    background-color: #4CAF50;
    color: white !important;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .btn-custom:hover {
        background-color: #45a049;
    }

/* Login/Logout Button - Adjusted for high contrast on light gray nav */
.btn-outline-light {
    border-color: #495057 !important; /* Dark gray border */
    color: #495057 !important; /* Dark gray text */
    font-weight: 600;
}

    .btn-outline-light:hover {
        background-color: #495057 !important; /* Dark background on hover */
        color: #ffffff !important; /* White text on hover */
    }

/* Dropdown menu styling */
.dropdown-menu {
    border-radius: 4px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.dropdown-item {
    font-size: 14px;
    padding: 0.5rem 1.25rem;
}

    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #0d6efd;
    }

/* ---------------------------------------------------------
   Navbar Alignment Fixes
--------------------------------------------------------- */

.navbar-nav .nav-item {
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

.footer {
    border-top: 1px solid #e2e2e2;
    font-size: 14px;
}

/* ---------------------------------------------------------
   Page Layout
--------------------------------------------------------- */

.main-content {
    padding: 20px;
}

/* Optional: Make images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   Utility Classes
--------------------------------------------------------- */

.text-right {
    text-align: right;
}

.mt-0 {
    margin-top: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

/* ---------------------------------------------------------
   REPAIR: Fix jQuery UI Dialog Z-Index
   Ensures popups appear ON TOP of Bootstrap elements
--------------------------------------------------------- */
.ui-dialog {
    z-index: 1055 !important; /* Higher than Bootstrap Navbar/Modal (1050) */
}

.ui-widget-overlay {
    z-index: 1054 !important; /* Just below the dialog */
}