/* ========= Top Header Menu (Theme Aware + Safe Fallbacks) ========= */

:root {
    /* fallback values ONLY if AppShell is not loaded */
    --blue: #2563eb;
    --blue2: #1d4ed8;
    --blueSoft: rgba(37,99,235,.14);
    --border: #d7e3f4;
    --rowAlt: rgba(37,99,235,.06);
    --surface: #ffffff;
    --text: #0f172a;
}

#menu {
    background: linear-gradient(90deg, var(--blue2, #1d4ed8), var(--blue, #2563eb));
    border-bottom: 1px solid var(--border, #d7e3f4);
    margin: 0;
    padding: 0;
}

    #menu > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center; /* ← this centers them */
    }

        #menu > ul > li {
            position: relative;
        }

    /* Top items (a tags + asp LinkButtons render as <a>) */
    #menu a,
    #menu .hdrBtn,
    #menu .aspNetDisabled {
        display: block;
        padding: 12px 18px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        background: transparent;
        border: 0;
        cursor: pointer;
        transition: background .2s ease, opacity .2s ease;
    }

        #menu a:hover,
        #menu .hdrBtn:hover {
            background: var(--blueSoft, rgba(37,99,235,.14));
        }

    #menu .aspNetDisabled {
        opacity: .6;
        cursor: default;
    }

    /* ========= Dropdown ========= */
    #menu ul li ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        padding: 6px 0;
        z-index: 1000;
        background: var(--surface, #fff);
        border: 1px solid var(--border, #d7e3f4);
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,.15);
    }

    #menu ul li:hover > ul {
        display: block;
    }

    #menu ul li ul li {
        width: 100%;
    }

        #menu ul li ul li a {
            color: var(--text, #0f172a);
            padding: 10px 14px;
            font-weight: 500;
        }

            #menu ul li ul li a:hover {
                background: var(--rowAlt, rgba(37,99,235,.06));
            }