.custom-navlink {
    position: relative;
    transition: box-shadow 0.2s;
    font-size: 1.15rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.2rem;
    box-sizing: border-box;
    height: auto;
}

/* Align nav items and logo bottom using flex on navbar container and nav */
.custom-navbar .container,
.custom-navbar .container-fluid {
    display: flex !important;
    align-items: flex-end !important;
    height: 100px;
    padding: 0 !important;
}
/* thin divider to separate the navbar from the page content */
.custom-navbar {
    position: sticky; /* keep navbar pinned to top when scrolling */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* above page content but compatible with Bootstrap layering */
    border-bottom: 1px solid #e9ecef; /* light gray matching Bootstrap */
    box-shadow: 0 1px 0 rgba(0,0,0,0.04); /* subtle hairline shadow for depth */
    background: white; /* ensure consistent background behind the border */
}
.custom-navbar .navbar-nav {
    display: flex !important;
    align-items: flex-end !important;
    height: 100%;
    margin-top: auto !important;
    gap: 1.25rem; /* space nav items apart */
}
.custom-navbar .nav-link.custom-navlink {
    display: flex !important;
    align-items: flex-end !important;
    height: 100%;
    padding-bottom: 0.2rem; /* keep visual spacing while bottom-aligning */
    margin-bottom: 0;
}
.custom-navbar .navbar-nav .nav-item {
    display: flex;
    align-items: flex-end;
    height: 100%;
    margin-top: auto;
}
.custom-navlink:hover {
    /* greyer flat glow (no vertical offset) to avoid 3D raised effect */
    box-shadow: 0 0 6px rgba(96,96,96,0.18);
    background: #f8f9fa;
}
.custom-navlink.selected {
    font-weight: 600;
}
.custom-navlink.selected::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: #007bff; /* changed to Bootstrap blue */
    border-radius: 2px 2px 0 0;
}
.custom-navlink {
    position: relative;
    transition: box-shadow 0.2s;
    font-size: 1.25rem; /* increased text size */
    padding-left: 1.75rem; /* slightly wider padding for touch/visual spacing */
    padding-right: 1.75rem;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.2rem;
    box-sizing: border-box;
    height: auto;
    margin-top: auto;
}

/* Space between the navbar's bottom border (separator) and the page content.
   Use the general sibling selector because `#page-content` may not be the
   immediate following element in Dash's layout. Adjust value as needed. */
.custom-navbar ~ #page-content {
    padding-top: 1.5rem; /* ~24px of spacing */
}

@media (max-width: 576px) {
    .custom-navbar ~ #page-content {
        padding-top: 1rem; /* slightly smaller spacing on small screens */
    }
}

/* Stronger visual treatment for disabled nav links (Portfolio) */
.custom-navlink.disabled {
    opacity: 0.55; /* clearly faded */
    filter: grayscale(60%); /* desaturate color */
    /* allow pointer-events so tooltip can trigger, but prevent clicks via not-allowed cursor */
    pointer-events: auto;
    cursor: not-allowed; /* show not-allowed cursor */
    color: #6c757d !important; /* Bootstrap muted color */
}

.custom-navlink.disabled::after {
    /* ensure no selected underline appears for disabled links */
    content: none !important;
}

.custom-navlink.disabled:hover {
    /* suppress hover glow for disabled links */
    box-shadow: none;
    background: transparent;
}

/* Interpretation styles removed. */