/* Unified site navigation: one stable layout across every page. */
.top-nav,
.top-nav.nav-scrolled,
body.in-corefi-app .top-nav {
    background: #080c0b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.top-nav .nav-inner {
    width: 80% !important;
    max-width: 1540px !important;
    min-height: 72px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

@media (min-width: 769px) {
    .top-nav .nav-inner {
        display: grid !important;
        direction: ltr !important;
        grid-template-columns: minmax(240px, 1fr) auto minmax(240px, 1fr) !important;
        grid-template-areas: "actions links logo" !important;
        align-items: center !important;
        column-gap: 28px !important;
    }

    .top-nav .nav-logo {
        grid-area: logo;
        justify-self: end;
    }

    .top-nav .nav-links {
        grid-area: links;
        justify-self: center;
    }

    .top-nav .nav-actions {
        grid-area: actions;
        justify-self: start;
    }

    html[dir="rtl"] .top-nav .nav-logo,
    html[dir="rtl"] .top-nav .nav-links,
    html[dir="rtl"] .top-nav .nav-actions { direction: rtl !important; }

    html[dir="ltr"] .top-nav .nav-logo,
    html[dir="ltr"] .top-nav .nav-links,
    html[dir="ltr"] .top-nav .nav-actions { direction: ltr !important; }
}

.top-nav .nav-logo {
    gap: 10px !important;
    color: #f7f8f8 !important;
}

.top-nav .nav-logo > span {
    color: #f7f8f8 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.top-nav .nav-logo-icon {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.top-nav .nav-logo-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.top-nav .nav-links {
    width: auto !important;
    flex: none !important;
    gap: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.top-nav .nav-link {
    min-height: auto !important;
    padding: 25px 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #d7dcda !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

.top-nav .nav-link:hover,
.top-nav .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
}

.top-nav .nav-link-indicator { display: none !important; }

.top-nav .nav-actions {
    gap: 15px !important;
}

.top-nav .cart-btn,
.top-nav #langToggle,
.top-nav .btn-login,
.top-nav .nav-user-trigger,
.top-nav .nav-menu-btn {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
}

.top-nav .cart-btn:hover,
.top-nav #langToggle:hover,
.top-nav .btn-login:hover,
.top-nav .nav-user-trigger:hover,
.top-nav .nav-user-trigger[aria-expanded="true"],
.top-nav .nav-menu-btn:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.top-nav .cart-btn {
    width: 38px !important;
    height: 42px !important;
    min-width: 38px !important;
    min-height: 42px !important;
}

.top-nav #langToggle.language-toggle {
    width: auto !important;
    min-width: 68px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 7px !important;
}

.top-nav .nav-user-trigger {
    min-height: 42px !important;
    padding: 4px !important;
}

.top-nav .nav-user-trigger img {
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    .top-nav .nav-inner {
        width: calc(100% - 28px) !important;
        min-height: 58px !important;
        display: flex !important;
        gap: 6px !important;
    }

    .top-nav .nav-menu-btn {
        display: inline-flex !important;
        order: 1 !important;
        width: 38px !important;
        height: 42px !important;
        min-width: 38px !important;
        min-height: 42px !important;
    }

    .top-nav .nav-logo {
        order: 2 !important;
        flex: 1 !important;
        justify-content: center !important;
    }

    .top-nav .nav-actions {
        order: 3 !important;
        gap: 3px !important;
    }

    .top-nav .nav-logo-icon {
        width: 31px !important;
        height: 31px !important;
    }

    .top-nav .nav-links {
        gap: 4px !important;
        padding: 10px !important;
        background: #0d1110 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55) !important;
    }

    .top-nav .nav-link {
        width: 100% !important;
        min-height: 42px !important;
        padding: 11px 12px !important;
        border-radius: 8px !important;
    }

    .top-nav .nav-link:hover,
    .top-nav .nav-link.active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .top-nav .nav-user-dropdown {
        min-width: 0 !important;
        padding: 8px !important;
        background: #0d1110 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 14px !important;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.68) !important;
    }

    .top-nav .nav-user-dropdown a {
        min-height: 50px !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }

    .top-nav .nav-user-dropdown a i {
        width: 22px !important;
        color: #86a99f !important;
    }
}

@media (max-width: 520px) {
    .top-nav .nav-logo > span { display: none !important; }
    .top-nav .nav-user-trigger > span { display: none !important; }
    .top-nav .nav-user-trigger .nav-user-caret { display: none !important; }
    .top-nav .nav-actions { gap: 1px !important; }
    .top-nav #langToggle.language-toggle { min-width: 62px !important; }
}

/* The server picker is a direct, full-width destination with no dashboard sidebar. */
#page-dashboard > .corefi-app > .corefi-main,
#page-servers > .corefi-app > .corefi-main {
    width: 100% !important;
    flex: 1 1 100% !important;
}

#page-payments > .dash-layout > .dash-main {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Retired UI: keep old cached markup invisible during the PWA cleanup cycle. */
.chat-fab,
.chat-panel,
.pwa-install-banner {
    display: none !important;
}

/* Mobile server picker: use the document as the only vertical scroller.
   The old nested CoreFi scroller had no fixed height after the sidebar was
   removed, so overscroll containment swallowed touch gestures on phones. */
@media (max-width: 768px) {
    html,
    body,
    body.in-corefi-app {
        height: auto !important;
        min-height: 100% !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body.in-corefi-app:not(.mobile-drawer-lock) {
        position: static !important;
    }

    #page-servers.active,
    #page-servers.active > .corefi-app,
    #page-servers.active > .corefi-app > .corefi-main,
    #page-servers #serversView.servers-view-corefi,
    #page-servers .servers-scroll-area,
    #page-servers .srv-pick-scroll {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overscroll-behavior: auto !important;
        touch-action: pan-y !important;
    }

    #page-servers.active {
        min-height: 100dvh !important;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    }

    #page-servers .srv-pick-scroll {
        flex: 0 0 auto !important;
        width: 100% !important;
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        -webkit-overflow-scrolling: auto !important;
    }
}