/* MYEBASHIM v6 — final rounded UI and rebuilt mobile navigation */

:root {
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

main,
.site-header,
.site-footer,
.container,
section,
article,
aside,
form,
nav,
div {
    min-width: 0;
}

/* Rounded visual language across the site */
.button,
button:not(.main-nav__backdrop),
input,
select,
textarea,
.form-field input,
.form-field select,
.form-field textarea,
.search-form input,
.search-form select {
    border-radius: 11px;
}

.content-card,
.profile-card,
.aside-card,
.info-card,
.data-panel,
.server-monitor,
.server-card,
.news-card,
.clan-card,
.team-card,
.member-card,
.admin-sidebar,
.admin-card,
.admin-user-card,
.admin-role-card,
.auth-card,
.empty-state,
.rank-search,
.rank-podium-card,
.rank-ladder-card,
.stats-player-card,
.profile-clan-card,
.profile-quick-nav,
.mb-panel,
.mb-server-card,
.mb-benefits,
.mb-donate-card,
.mb-donor-card,
.ban-card,
.bans-filter,
.bans-summary article,
.server-admin-hero,
.server-admin-stat,
.server-admin-card,
.server-sanction-card,
.server-admin-form,
.server-db-card {
    border-radius: var(--radius) !important;
}

.rank-ladder__grid > *,
.mb-product,
.metric,
.stats-icon-item,
.profile-quick-link,
.server-admin-permission,
.server-admin-preset {
    border-radius: 12px;
}

.table-wrap,
.table-wrap--cards,
.data-table,
.server-admin-table-wrap {
    border-radius: var(--radius);
}

/* Desktop navigation stays unchanged and clean */
.main-nav__backdrop,
.mobile-menu-head {
    display: none;
}

.main-nav__panel {
    display: contents;
}

.main-nav__icon,
.mobile-account-nav__icon {
    display: none !important;
}

@media (min-width: 1081px) {
    .main-nav {
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        background: transparent !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .main-nav__panel {
        display: contents;
    }

    .main-nav__links {
        display: flex !important;
    }

    .mobile-account-nav {
        display: none !important;
    }

    .menu-toggle {
        display: none !important;
    }
}

/* Rebuilt mobile/tablet navigation */
@media (max-width: 1080px) {
    body.menu-open {
        overflow: hidden !important;
        touch-action: none;
    }

    .site-header {
        z-index: 1000;
    }

    .site-header__inner {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px !important;
    }

    .brand {
        width: max-content;
        max-width: calc(100vw - 76px);
    }

    .header-actions {
        display: none !important;
    }

    .menu-toggle {
        position: relative;
        z-index: 1002;
        display: grid !important;
        grid-column: 2 !important;
        width: 42px;
        height: 42px;
        margin: 0 !important;
        padding: 9px;
        border: 0 !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.055) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
    }

    .menu-toggle:hover,
    .menu-toggle[aria-expanded="true"] {
        background: rgba(226,19,35,.14) !important;
    }

    .menu-toggle span {
        width: 19px;
        border-radius: 999px;
    }

    .main-nav {
        position: fixed !important;
        inset: var(--header-height) 0 0 0 !important;
        z-index: 999 !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: opacity .2s ease, visibility .2s ease !important;
    }

    .main-nav.is-open {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .main-nav__backdrop {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(0,0,0,.64);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        cursor: default;
    }

    .main-nav__panel {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: 8px;
        display: block;
        width: min(340px, calc(100% - 16px));
        max-width: calc(100% - 16px);
        padding: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 20px;
        background:
            radial-gradient(circle at 100% 0, rgba(226,19,35,.10), transparent 210px),
            rgba(10,10,12,.985);
        box-shadow: -22px 0 70px rgba(0,0,0,.48);
        transform: translateX(calc(100% + 22px));
        transition: transform .24s cubic-bezier(.22,.75,.2,1);
        scrollbar-width: thin;
    }

    .main-nav.is-open .main-nav__panel {
        transform: translateX(0);
    }

    .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 2px 11px;
    }

    .mobile-menu-head > div {
        display: grid;
        gap: 1px;
    }

    .mobile-menu-head small {
        color: var(--red-light);
        font-size: .54rem;
        font-weight: 900;
        letter-spacing: .16em;
    }

    .mobile-menu-head strong {
        color: #f7f7f8;
        font-family: var(--font-display);
        font-size: 1.05rem;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .mobile-menu-close {
        position: relative;
        display: grid;
        width: 36px;
        height: 36px;
        place-items: center;
        padding: 0;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.055) !important;
        cursor: pointer;
    }

    .mobile-menu-close span {
        position: absolute;
        width: 17px;
        height: 2px;
        border-radius: 999px;
        background: #d8d8dc;
    }

    .mobile-menu-close span:first-child { transform: rotate(45deg); }
    .mobile-menu-close span:last-child { transform: rotate(-45deg); }

    .main-nav__links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px 0 11px;
        border-bottom: 1px solid rgba(255,255,255,.065);
    }

    .main-nav__link {
        display: flex !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 11px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #9a9da4 !important;
        font-family: var(--font-body) !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
        letter-spacing: .035em !important;
        line-height: 1.2 !important;
        text-transform: uppercase;
    }

    .main-nav__link::before,
    .main-nav__link::after {
        display: none !important;
    }

    .main-nav__link:hover,
    .main-nav__link:focus-visible {
        background: rgba(255,255,255,.045) !important;
        color: #fff !important;
    }

    .main-nav__link.is-active,
    .main-nav__link[aria-current="page"] {
        background: rgba(226,19,35,.13) !important;
        color: #ff4353 !important;
    }

    .main-nav__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-account-nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 12px 0 0 !important;
        border: 0 !important;
    }

    .mobile-account-nav__title {
        grid-column: auto !important;
        margin: 0 0 5px !important;
        padding: 0 8px;
        color: #696c74;
        font-size: .56rem;
        font-weight: 900;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .mobile-account-nav > a,
    .mobile-account-nav form,
    .mobile-account-nav form button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .mobile-account-nav > a,
    .mobile-account-nav form button {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto !important;
        min-height: 46px !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 7px 10px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.025) !important;
        color: #fff !important;
        text-align: left !important;
    }

    .mobile-account-nav > a:hover,
    .mobile-account-nav > a:focus-visible,
    .mobile-account-nav form button:hover,
    .mobile-account-nav__admin {
        background: rgba(255,255,255,.052) !important;
    }

    .mobile-account-nav__admin {
        box-shadow: inset 3px 0 0 rgba(226,19,35,.72);
    }

    .mobile-account-nav__copy {
        display: grid !important;
        min-width: 0;
        gap: 0 !important;
    }

    .mobile-account-nav__copy small {
        color: #6f7279 !important;
        font-size: .51rem !important;
        font-weight: 900 !important;
        letter-spacing: .09em !important;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .mobile-account-nav__copy strong {
        overflow: hidden;
        color: #e9e9ec !important;
        font-size: .72rem !important;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-account-nav__arrow {
        display: block !important;
        color: #5f6269 !important;
        font-size: 1.05rem !important;
        line-height: 1;
    }

    .mobile-account-nav > a b {
        display: grid !important;
        min-width: 20px !important;
        height: 20px !important;
        place-items: center;
        padding: 0 5px;
        border-radius: 999px !important;
        background: var(--red) !important;
        color: #fff !important;
        font-size: .58rem !important;
    }

    .mobile-account-nav form {
        grid-column: auto !important;
    }

    .mobile-account-nav form button {
        cursor: pointer;
    }
}

@media (max-width: 520px) {
    :root {
        --header-height: 64px;
    }

    .container {
        width: min(calc(100% - 22px), var(--container));
    }

    .brand__logo {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        flex-basis: 40px !important;
    }

    .brand__text {
        font-size: .9rem !important;
    }

    .main-nav__panel {
        top: 6px;
        right: 6px;
        bottom: 6px;
        width: calc(100% - 12px);
        max-width: calc(100% - 12px);
        padding: 11px;
        border-radius: 17px;
    }

    .main-nav__links {
        gap: 2px !important;
    }

    .main-nav__link {
        min-height: 40px !important;
        padding-inline: 9px !important;
        font-size: .68rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-nav,
    .main-nav__panel {
        transition: none !important;
    }
}

/* v7 hotfix: the sticky header uses backdrop-filter, so fixed descendants are
   positioned against the 64px header box on mobile. Keep the drawer absolute
   to the header and give it an explicit viewport height. */
@media (max-width: 1080px) {
    .site-header {
        overflow: visible !important;
    }

    .main-nav {
        position: absolute !important;
        top: 100% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: calc(100dvh - var(--header-height)) !important;
        min-height: calc(100dvh - var(--header-height)) !important;
        transform: translateX(-50%) !important;
    }

    .main-nav__panel {
        top: 8px !important;
        bottom: 8px !important;
        max-height: calc(100dvh - var(--header-height) - 16px) !important;
    }
}

/* Compact admin navigation instead of a clipped horizontal strip. */
@media (max-width: 760px) {
    .admin-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px !important;
        overflow: hidden !important;
    }

    .admin-sidebar nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .admin-sidebar nav a {
        min-width: 0 !important;
        width: 100% !important;
        padding: 10px 9px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: rgba(255,255,255,.025) !important;
        overflow: hidden !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-sidebar nav a.is-active,
    .admin-sidebar nav a:hover {
        background: rgba(226,19,35,.12) !important;
        color: #ff4353 !important;
    }
}

@media (max-width: 390px) {
    .admin-sidebar nav {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile menu: fixed to the current viewport, independent of page scroll. */
@media (max-width: 1080px) {
    body.menu-open {
        overflow: hidden !important;
        touch-action: none !important;
    }

    body > .main-nav {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483000 !important;
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body > .main-nav.is-open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body > .main-nav > .main-nav__backdrop {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, .72) !important;
    }

    body > .main-nav > .main-nav__panel {
        position: fixed !important;
        inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 1px solid rgba(255, 255, 255, .08) !important;
        border-radius: 18px !important;
        background: radial-gradient(circle at 100% 0, rgba(226,19,35,.12), transparent 240px), #09090b !important;
        box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
        transform: translateY(18px) scale(.985) !important;
        opacity: 0 !important;
        transition: transform .22s ease, opacity .22s ease !important;
    }

    body > .main-nav.is-open > .main-nav__panel {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }

    body > .main-nav .main-nav__links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        gap: 5px !important;
    }

    body > .main-nav .mobile-account-nav {
        width: 100% !important;
    }
}