/**
 * VO2 shared neumorphic surfaces — site-wide migration base
 * Load after vo2-tokens.css
 */

/* ---- Dropdown panel (profile, filters, …) ---- */
.vo2-dropdown-menu,
.header-toolbar .dropdown-menu.vo2-profile-menu {
    min-width: 13.5rem;
    padding: 0.45rem !important;
    margin-top: 0.55rem !important;
    border: none !important;
    border-radius: 18px !important;
    background: var(--surface-1, #eef1f6) !important;
    box-shadow: var(--nm-raised-sm, -4px -4px 10px rgba(255, 255, 255, 0.92), 5px 5px 12px rgba(163, 177, 198, 0.55));
}

.vo2-dropdown-menu .dropdown-item,
.header-toolbar .dropdown-menu.vo2-profile-menu .dropdown-item {
    border-radius: 12px;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fg-2, #3a4254) !important;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.vo2-dropdown-menu .dropdown-item:hover,
.vo2-dropdown-menu .dropdown-item:focus,
.header-toolbar .dropdown-menu.vo2-profile-menu .dropdown-item:hover,
.header-toolbar .dropdown-menu.vo2-profile-menu .dropdown-item:focus {
    background: var(--surface-2, #f3f5f9) !important;
    color: var(--primary, #df2063) !important;
    box-shadow: var(--nm-inset-sm, inset 2px 2px 5px rgba(163, 177, 198, 0.55), inset -2px -2px 5px rgba(255, 255, 255, 0.92));
}

.vo2-dropdown-menu .dropdown-divider,
.header-toolbar .dropdown-menu.vo2-profile-menu .dropdown-divider {
    margin: 0.35rem 0.25rem;
    border-color: rgba(163, 177, 198, 0.35);
}

.vo2-dropdown-menu .dropdown-item .badge,
.header-toolbar .dropdown-menu.vo2-profile-menu .dropdown-item .badge {
    margin-inline-start: 0.35rem;
    vertical-align: middle;
}

/* ---- Horizontal chip nav (page sub-tabs, filters) ---- */
.vo2-chip-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.35rem 0.15rem 0.55rem;
    margin: 0;
    list-style: none;
}

.vo2-chip-nav::-webkit-scrollbar {
    display: none;
}

.vo2-chip-nav .nav-link,
.vo2-chip-nav a.vo2-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: var(--r-pill, 999px);
    border: none;
    background: var(--surface-1, #eef1f6);
    color: var(--fg-2, #3a4254) !important;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: var(--nm-raised-sm);
    transition: box-shadow 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.vo2-chip-nav .nav-link:hover,
.vo2-chip-nav .nav-link:focus,
.vo2-chip-nav a.vo2-chip:hover {
    color: var(--primary, #df2063) !important;
    transform: translateY(-1px);
}

.vo2-chip-nav .nav-link.active,
.vo2-chip-nav a.vo2-chip.active {
    background: linear-gradient(145deg, var(--vo2-pink-400, #ea4782), var(--vo2-pink-600, #be1553));
    color: var(--fg-inv, #fff) !important;
    box-shadow:
        -3px -3px 8px rgba(255, 255, 255, 0.35),
        4px 4px 10px rgba(119, 13, 58, 0.28);
}

/* ---- Vertical pill nav (edit profile sidebar desktop) ---- */
.vo2-nav-pills.nav-pills {
    gap: 0.45rem;
}

@media (min-width: 992px) {
    .vo2-nav-pills.nav-pills {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch;
        width: 100%;
    }

    .vo2-nav-pills .nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: start;
        white-space: normal;
    }
}

.vo2-nav-pills .nav-link {
    position: relative;
    border: none !important;
    border-radius: 14px !important;
    background: var(--surface-1, #eef1f6) !important;
    color: var(--fg-2, #3a4254) !important;
    font-weight: 700;
    box-shadow: var(--nm-raised-sm);
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

.vo2-nav-pills .nav-link:hover,
.vo2-nav-pills .nav-link:focus {
    color: var(--primary, #df2063) !important;
    box-shadow: var(--nm-inset-sm);
}

.vo2-nav-pills .nav-link.active {
    background: linear-gradient(145deg, var(--vo2-pink-400, #ea4782), var(--vo2-pink-600, #be1553)) !important;
    color: var(--fg-inv, #fff) !important;
    box-shadow:
        -3px -3px 8px rgba(255, 255, 255, 0.35),
        4px 4px 10px rgba(119, 13, 58, 0.28);
}

@media (min-width: 992px) {
    .vo2-nav-pills .nav-link.active::before {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-end: -8px;
        transform: translateY(-50%);
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-inline-start: 8px solid var(--vo2-pink-500, #df2063);
    }
}

@media (max-width: 991.98px) {
    .vo2-nav-pills {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.35rem;
    }

    .vo2-nav-pills::-webkit-scrollbar {
        display: none;
    }

    .vo2-nav-pills .nav-link {
        flex: 0 0 auto;
        font-size: 0.72rem;
        padding: 0.5rem 0.75rem !important;
        border-radius: var(--r-pill, 999px) !important;
    }

    .vo2-nav-pills .nav-link.active::before {
        display: none;
    }
}

/* Sticky tab bar on edit-profile pages */
.vo2-tab-sticky {
    position: sticky;
    top: 4.5rem;
    z-index: 90;
    background: var(--surface-0, #e8ecf2);
    padding: 0.35rem 0 0.15rem;
    margin-bottom: 0.75rem;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 6px 16px rgba(163, 177, 198, 0.18);
}

@media (max-width: 575.98px) {
    .vo2-tab-sticky {
        top: 3.85rem;
        margin-inline: -0.5rem;
        padding-inline: 0.5rem;
    }
}