/*========================================
  1. ROOT VARIABLES
========================================*/
:root {
    --navbar-height: 50px; /* navbar height */
    --navbar-bg: #004080; /* navbar background color */
    --navbar-text: white; /* navbar text color */
    --body-bg: #fff; /* body background color */
}

/*========================================
  2. GLOBAL RESET
========================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


body {
    padding-top: var(--navbar-height);
    background-color: #fff; /* white page background */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}


.body-content {
    min-height: 100vh; /* Make it at least viewport height */
    width:100% !important;
}


/*========================================
  3. NAVBAR BASE STYLES
========================================*/
.navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    height: var(--navbar-height); /* corrected */
    display: flex;
    align-items: center; /* vertical center */
    padding: 0 20px;
    z-index: 2050;
    position: relative;
}

    .navbar,
    .navbar .nav-link {
        height: var(--navbar-height) !important;  
        padding-top: 0 !important;  
        padding-bottom: 0 !important;  
        display: flex;
        align-items: center;  
    }



/* Only force navbar height — NOT dropdowns, NOT nav-links */
/*.navbar {
    height: var(--navbar-height) !important;
    display: flex;
    align-items: center;
}*/

    /* Nav links: remove height constraint */
    /*.navbar .nav-link {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        align-items: center;
    }*/




        /*-------------------------
  3a. Navbar brand
-------------------------*/
        .navbar .navbar-brand {
            font-size: 1.1rem;
            font-weight: bold;
            font-family: Tahoma;
        }

        /*-------------------------
  3b. Navbar main links
-------------------------*/
        .navbar .nav-link {
            color: inherit; /* Inherit text color */
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            margin-right: 20px !important;
            position: relative;
            transition: color 0.3s ease, filter 0.3s ease; /* Smooth transition */
        }

            /* Hover effect for main menu */
            .navbar .nav-link:hover {
                filter: brightness(1.2);
                background-color: #5f89d5;
                transition: 0.6s ease-in-out;
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
            }

            /* Bottom underline effect for main menu */
            .navbar .nav-link::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 2px;
                background-color: red;
                transition: 0.3s ease-in-out;
                visibility: hidden;
            }

            .navbar .nav-link:hover::before {
                width: 100%;
                visibility: visible !important;
            }

        /*========================================
  4. DROPDOWN (SUBMENU) STYLES
========================================*/
        .navbar .dropdown {
            position: relative; /* Important for positioning submenu */
        }

        /*-------------------------
  4a. Submenu base
-------------------------*/
        .navbar .dropdown-menu {
            position: absolute;
            top: 100%; /* right below parent */
            left: 0;
            min-width: 150px;
            display: none; /* hidden by default */
            flex-direction: column;
            padding: 0;
            margin: 0;
            border-radius: 5px;
            z-index: 2050 !important; /* higher than report-bar (1030) */
        }

            /*-------------------------
  4b. Submenu links
  ADDITION: apply main menu hover effect to submenu
-------------------------*/
            .navbar .dropdown-menu .dropdown-item {
                padding: 10px 15px;
                color: white;
                text-decoration: none;
                display: block;
                transition: background 0.3s ease, filter 0.3s ease; /* ADDED filter transition */
                position: relative; /* ADDED for underline */
            }

                /* Hover effect (like main menu) */
                .navbar .dropdown-menu .dropdown-item:hover {
                    filter: brightness(1.2); /* same as main menu */
                    background-color: #5f89d5; /* same as main menu */
                    border-top-left-radius: 7px; /* same rounding */
                    border-top-right-radius: 7px;
                }

                /* Bottom underline effect for submenu (like main menu) */
                .navbar .dropdown-menu .dropdown-item::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background-color: red;
                    transition: 0.3s ease-in-out;
                    visibility: hidden;
                }

                .navbar .dropdown-menu .dropdown-item:hover::before {
                    width: 100%;
                    visibility: visible !important;
                }

        /*-------------------------
  4c. Show submenu on hover (desktop)
-------------------------*/
        .navbar .dropdown:hover > .dropdown-menu {
            display: flex;
            position: absolute;  /*ensures dropdown is positioned relative to navbar */
            z-index: 2050; /* higher than report-bar and navbar */




            
        }

/*========================================
  5. MOBILE MODE
========================================*/
.mobile-mode {
    display: none;
}

.desktop-mode {
    display: block;
}

.navbar-toggler {
    color: transparent !important;
    border-color: transparent !important;
    border: 0;
    box-shadow: none;
    outline: none !important;
}

    .navbar-toggler:focus {
        box-shadow: none;
        outline: none !important;
    }


/* Active menu item */
.navbar .nav-link.active,
.navbar .dropdown-item.active {
    background-color: #fff; /* same as body background */
    color: #004080 !important; /* optional: make text visible */
    border-radius: 0; /* optional */
    filter: none; /* remove hover brightness */
}

.navbar-nav.ms-auto {
    margin-left: auto !important;
}

/*-------------------------
  5a. Mobile responsive styles
-------------------------*/
@media(min-width:269px) {

    /* Show mobile/ hide desktop */
    .mobile-mode {
        display: block;
    }

    .desktop-mode {
        display: none;
    }

    /* Main menu links */
    .navbar .nav-link {
        color: black;
        cursor: pointer;
        margin-right: 20px !important;
        font-size: 20px;
        font-weight: bold;
    }

    /* Dropdown hidden by default */
    .navbar .dropdown-menu {
        display: none;
        flex-direction: column;
        position: relative;
        left: 0;
        border-radius: 0;
        optional for flat mobile design z-index: 2050 !important; /* higher than report-bar (1030) */
    }



    /* Show submenu when 'show' class is added via JS */
    .navbar .dropdown.show > .dropdown-menu {
        display: flex;
        position: relative;  /*optional: change to absolute if overlaps are needed */
        z-index: 2050;  /*same as desktop*/ 




        /*display: flex;
        position: fixed;*/ /* fixed above report-bar */
        /*top: var(--navbar-height);
        left: 0;
        z-index: 2001;
        width: 100%;*/ /* mobile: full width dropdown */
    }

    /* Submenu links hover effect on mobile (same as desktop) */
    .navbar .dropdown-menu .dropdown-item {
        color: black; /* dark text on mobile */
    }

        .navbar .dropdown-menu .dropdown-item:hover {
            filter: brightness(1.2);
            background-color: #5f89d5;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
}