/* Adaptive one-line desktop navbar.
   Loaded after the main bundle so it can protect the header at laptop widths. */
@media (min-width: 769px) {
    .nav-label {
        display: inline-block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
    .nav-label-short {
        display: inline-block;
    }
    .navbar {
        max-width: 100vw;
        min-width: 0;
    }
    .navbar-brand,
    .navbar-menu,
    .navbar-user {
        min-width: 0;
    }
    .navbar-menu {
        flex: 1 1 auto;
        overflow: hidden;
    }
    .navbar-menu li {
        flex: 0 0 auto;
    }
    .navbar-user {
        max-width: min(54vw, 560px);
    }
    .navbar-username {
        max-width: clamp(76px, 8vw, 140px);
    }
}

@media (max-width: 1800px) and (min-width: 769px) {
    .navbar {
        padding-left: 16px;
        padding-right: 16px;
        gap: 10px;
    }
    .navbar-menu {
        gap: 2px;
        justify-content: flex-start;
    }
    .navbar-menu a {
        padding: 7px 10px;
        font-size: 0.84rem;
        gap: 5px;
    }
    .navbar-user {
        gap: 8px;
    }
    .navbar-username {
        max-width: 112px;
    }
}

@media (min-width: 769px) {
    .navbar.navbar-fit-compact .navbar-menu,
    .navbar.navbar-fit-tight .navbar-menu,
    .navbar.navbar-fit-minimal .navbar-menu,
    .navbar.navbar-fit-compact .navbar-user,
    .navbar.navbar-fit-tight .navbar-user,
    .navbar.navbar-fit-minimal .navbar-user {
        gap: 6px;
    }
    .navbar.navbar-fit-compact .navbar-menu a,
    .navbar.navbar-fit-tight .navbar-menu a,
    .navbar.navbar-fit-minimal .navbar-menu a {
        padding: 7px 9px;
        font-size: 0;
        gap: 0;
    }
    .navbar.navbar-fit-compact .nav-label,
    .navbar.navbar-fit-tight .nav-label,
    .navbar.navbar-fit-minimal .nav-label {
        display: none !important;
    }
    .navbar.navbar-fit-compact .navbar-menu a i,
    .navbar.navbar-fit-tight .navbar-menu a i,
    .navbar.navbar-fit-minimal .navbar-menu a i {
        font-size: 1rem;
    }
    .navbar.navbar-fit-compact .navbar-divider,
    .navbar.navbar-fit-tight .navbar-divider,
    .navbar.navbar-fit-minimal .navbar-divider {
        display: none;
    }
    .navbar.navbar-fit-compact .online-label,
    .navbar.navbar-fit-tight .online-label,
    .navbar.navbar-fit-minimal .online-label,
    .navbar.navbar-fit-compact .navbar-user .btn-text,
    .navbar.navbar-fit-tight .navbar-user .btn-text,
    .navbar.navbar-fit-minimal .navbar-user .btn-text {
        display: none;
    }
    .navbar.navbar-fit-tight .navbar-brand .brand-text,
    .navbar.navbar-fit-minimal .navbar-brand .brand-text {
        display: none;
    }
    .navbar.navbar-fit-tight .navbar-brand > i,
    .navbar.navbar-fit-minimal .navbar-brand > i {
        font-size: 1.3rem;
    }
    .navbar.navbar-fit-tight .nav-hide-narrow,
    .navbar.navbar-fit-minimal .nav-hide-narrow {
        display: none !important;
    }
    .navbar.navbar-fit-tight .navbar-xp-widget,
    .navbar.navbar-fit-minimal .navbar-xp-widget {
        padding: 3px 6px;
    }
    .navbar.navbar-fit-tight .navbar-xp-bar,
    .navbar.navbar-fit-minimal .navbar-xp-bar {
        min-width: 38px;
    }
    .navbar.navbar-fit-tight .navbar-username {
        max-width: 92px;
    }
    .navbar.navbar-fit-minimal .navbar-xp-widget {
        display: none;
    }
    .navbar.navbar-fit-minimal .navbar-username {
        max-width: 78px;
    }
}

@media (max-width: 1720px) and (min-width: 769px) {
    .navbar-menu {
        justify-content: flex-start;
    }
    .navbar-menu a {
        padding: 7px 8px;
        font-size: 0.8rem;
        gap: 5px;
    }
    .navbar-menu a i {
        font-size: 0.95rem;
    }
    .navbar-menu .nav-label-full {
        display: none;
    }
    .navbar-menu .nav-label-short {
        display: inline-block;
        max-width: 86px;
    }
    .navbar-divider {
        display: none;
    }
    .online-label,
    .navbar-user .btn-text {
        display: none;
    }
}

@media (max-width: 1360px) and (min-width: 769px) {
    .navbar {
        padding-left: 10px;
        padding-right: 10px;
        gap: 7px;
    }
    .navbar-brand .brand-text {
        display: inline;
    }
    .navbar-brand > i {
        font-size: 1.28rem;
    }
    .nav-hide-narrow {
        display: none !important;
    }
    .navbar-user {
        gap: 5px;
        max-width: 50vw;
    }
    .navbar-xp-widget {
        padding: 3px 6px;
    }
    .navbar-xp-bar {
        min-width: 38px;
    }
    .navbar-username {
        max-width: 90px;
    }
}

@media (max-width: 1180px) and (min-width: 769px) {
    .navbar-brand .brand-text {
        display: inline;
	font-size: 1rem;
    }
    .navbar-brand > i {
        font-size: 1.15rem;
    }
    .navbar-menu a {
        padding-left: 7px;
        padding-right: 7px;
    }
    .navbar-menu .nav-label-short {
        max-width: 76px;
    }
}

@media (max-width: 1120px) and (min-width: 769px) {
    .navbar-xp-widget {
        display: none;
    }
    .navbar-username {
        max-width: 74px;
    }
    .online-badge {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 1040px) and (min-width: 769px) {
    .navbar-menu a {
        padding: 7px 8px;
        font-size: 0;
        gap: 0;
    }
    .navbar-menu .nav-label {
        display: none !important;
    }
    .navbar-menu a i {
        font-size: 1rem;
    }
}

/* Tablet/mobile: skip the awkward two-row navbar and go straight to burger. */
@media (max-width: 768px) {
    .navbar-menu,
    .navbar-xp-widget,
    .navbar-username,
    .vip-nav-badge,
    .mobile-nav,
    .navbar-rating-mobile,
    .navbar-support-mobile,
    .navbar-info-mobile,
    .navbar-collab-link {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
    body.burger-open {
        overflow: hidden;
    }

    .navbar {
        flex-wrap: nowrap !important;
        height: 56px !important;
        padding: 0 10px !important;
        gap: 8px !important;
        row-gap: 0 !important;
    }
    .navbar-user {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        order: 3;
    }
    .navbar-primary-group {
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .navbar-icons-group {
        display: contents !important;
    }
    .navbar-icons-group > * {
        display: none !important;
    }
    .navbar-icons-group > .dm-navbar-link {
        display: inline-flex !important;
        order: 2;
    }
    .navbar .online-widget {
        display: flex !important;
    }
    .navbar-user > .btn[href*="admin"],
    .navbar-user > .btn[href*="staff"] {
        display: none !important;
    }
    .navbar-brand {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        font-size: 1.15rem;
        gap: 8px;
        white-space: nowrap;
    }
    .navbar-brand .brand-text {
        display: none;
    }
    .navbar-brand .brand-text-short {
        display: inline;
        font-size: 1.08rem;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .navbar-brand > i {
        font-size: 1rem;
    }
    .navbar-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
        flex-shrink: 0;
    }
    .navbar-user .btn-sm,
    .online-badge,
    .navbar-primary-group > a,   
    .navbar-icons-group > {
        min-width: 40px;
        min-height: 40px;
        padding: 0 10px !important;
        border-radius: 11px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .online-label {
        display: none !important;
    }
    .navbar-user .notif-bell-wrap > .btn-sm,
    .navbar-user .dm-navbar-link {
        width: 38px;
        min-width: 38px;
        height: 38px;
        padding: 0 !important;
        background: linear-gradient(135deg, rgba(108, 92, 231, 0.18), rgba(0, 206, 201, 0.12)) !important;
        border: 1px solid rgba(108, 92, 231, 0.45) !important;
        color: var(--primary-color) !important;
    }

    .burger-btn {
        order: 1;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
    }
    .burger-btn span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: var(--text-main);
        transition: transform 0.3s ease, opacity 0.2s ease;
    }
    .burger-btn.active {
        background: rgba(108, 92, 231, 0.18);
        box-shadow: 0 0 14px rgba(108, 92, 231, 0.45);
    }
    .burger-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .burger-btn.active span:nth-child(2) { opacity: 0; }
    .burger-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    .burger-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1500;
        background: rgba(0, 0, 0, 0.62);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0.28s;
    }
    .burger-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .burger-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1600;
        width: min(86vw, 360px);
        height: 100dvh;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(18px, env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 0 22px 22px 0;
        border-right: 1px solid rgba(108, 92, 231, 0.35);
        background:
            radial-gradient(ellipse at 0 0, rgba(108, 92, 231, 0.22), transparent 55%),
            radial-gradient(ellipse at 100% 100%, rgba(0, 206, 201, 0.14), transparent 60%),
            linear-gradient(180deg, #11141d 0%, #0c0f17 100%);
        box-shadow: 6px 0 32px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(108, 92, 231, 0.08);
        transform: translateX(-105%);
        transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .burger-drawer.active {
        transform: translateX(0);
    }
    .burger-close {
        position: absolute;
        top: calc(max(14px, env(safe-area-inset-top)) + 16px);
        right: 22px;
        z-index: 3;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-sec);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .burger-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 12px 10px;
        padding: 12px 52px 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    }
    .burger-avatar {
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.55), 0 0 18px rgba(108, 92, 231, 0.35);
    }
    .burger-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .burger-user-info {
        flex: 1;
        min-width: 0;
    }
    .burger-username {
        display: block;
        color: var(--text-main);
        font-weight: 800;
        font-size: 0.96rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .burger-xp {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        font-size: 0.72rem;
        color: var(--text-sec);
        flex-wrap: wrap;
    }
    .burger-xp-bar {
        width: 100%;
        height: 5px;
        margin-top: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        overflow: hidden;
    }
    .burger-xp-fill {
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    }

    .burger-nav {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 2px 8px 12px;
    }
    .burger-group {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-bottom: 6px;
        padding-top: 4px;
    }
    .burger-group:not(:last-child) {
        border-bottom: 1px solid rgba(108, 92, 231, 0.10);
        padding-bottom: 6px;
        margin-bottom: 8px;
    }
    .burger-group-title {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px 6px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-sec);
        opacity: 0.78;
    }
    .burger-group-title i {
        color: var(--primary-color);
    }
    .burger-link {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 42px;
        padding: 7px 10px;
        border-radius: 10px;
        color: var(--text-main);
        font-size: 0.92rem;
        text-decoration: none;
    }
    .burger-link i {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        color: var(--text-sec);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .burger-link span {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .burger-link:hover,
    .burger-link.active {
        background: rgba(108, 92, 231, 0.14);
        color: var(--primary-color);
    }
    .burger-link:hover i,
    .burger-link.active i {
        color: var(--primary-color);
        background: rgba(108, 92, 231, 0.18);
        border-color: rgba(108, 92, 231, 0.45);
    }
    .burger-link-admin {
        background: linear-gradient(90deg, rgba(108, 92, 231, 0.20), rgba(0, 206, 201, 0.10), transparent);
        color: var(--primary-color);
        font-weight: 700;
    }
    .burger-link-logout {
        color: var(--danger-color);
    }
    .burger-badge {
        margin-left: auto;
        min-width: 20px;
        padding: 2px 8px;
        border-radius: 999px;
        background: linear-gradient(135deg, #ff5f6d, #ff7675);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 800;
        text-align: center;
    }
    .burger-divider {
        height: 1px;
        margin: 5px 12px;
        border: 0;
        background: linear-gradient(90deg, transparent, rgba(108, 92, 231, 0.30), transparent);
    }
}