/*
==================================================
 GTA LEGACY UCP - MOBILE SIDEBAR FIX
 Dán file này SAU svietgame-modern.css
==================================================
*/

@media (max-width: 767.98px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    body.mobile-sidebar-open {
        overflow: hidden !important;
        touch-action: none;
    }

    #wrapper {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #content-wrapper,
    #content {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    /*
     * Sidebar gọn hơn trên điện thoại.
     * 230px đủ rộng để chữ không bị xuống dòng quá nhiều.
     */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1060 !important;

        width: 230px !important;
        min-width: 230px !important;
        max-width: 76vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;

        padding: 0 10px 18px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        transform: translate3d(-100%, 0, 0);
        transition: transform .24s ease;
        box-shadow: 10px 0 35px rgba(2, 6, 23, .32);
    }

    .sidebar.toggled {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 76vw !important;
        transform: translate3d(0, 0, 0);
    }

    /*
     * Không dùng lớp phủ ::before cũ vì không thể nhấn để đóng.
     */
    body.sidebar-toggled::before {
        content: none !important;
        display: none !important;
    }

    .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1050;

        display: block;
        visibility: hidden;
        opacity: 0;

        background: rgba(2, 6, 23, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

        transition:
            opacity .22s ease,
            visibility .22s ease;
    }

    .mobile-sidebar-backdrop.is-visible {
        visibility: visible;
        opacity: 1;
    }

    /*
     * Để tuyết không che chữ trong menu.
     */
    #sv-snow-layer,
    #snow-container,
    #snow-canvas,
    #sv-snow-canvas {
        z-index: 1040 !important;
    }

    #sv-snow-canvas {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: block !important;

    pointer-events: none !important;
    user-select: none !important;

    z-index: 1040 !important;
}

    /*
     * Logo sidebar.
     */
    .sidebar .sidebar-brand {
        width: 100% !important;
        height: 108px !important;
        min-height: 108px !important;

        padding: 10px 8px 8px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sidebar .sidebar-brand img,
    .sidebar .ucp-logo {
        width: auto !important;
        max-width: 116px !important;
        max-height: 92px !important;
        height: auto !important;
        padding: 0 !important;
        object-fit: contain !important;
    }

    .sidebar hr.sidebar-divider {
        width: calc(100% - 8px) !important;
        margin: 6px 4px 8px !important;
        border-color: rgba(148, 163, 184, .18) !important;
    }

    /*
     * Tiêu đề nhóm menu căn trái, nhỏ và gọn.
     */
    .sidebar .sidebar-heading {
        width: 100% !important;
        padding: 12px 12px 5px !important;
        margin: 0 !important;

        color: #94a3b8 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: .8px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

    /*
     * Mỗi mục menu dùng toàn bộ chiều rộng.
     * Ghi đè width nhỏ mặc định của SB Admin 2.
     */
    .sidebar .nav-item {
        width: 100% !important;
        margin: 3px 0 !important;
    }

    .sidebar .nav-item .nav-link {
        width: 100% !important;
        min-height: 43px !important;

        padding: 9px 11px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;

        border-radius: 11px !important;

        color: #d6deea !important;
        text-align: left !important;
        white-space: normal !important;
    }

    .sidebar .nav-item .nav-link i {
        width: 20px !important;
        min-width: 20px !important;
        margin: 0 !important;

        color: #8fa0b8 !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    .sidebar .nav-item .nav-link span {
        display: block !important;
        min-width: 0 !important;

        color: inherit !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .sidebar .nav-item.active .nav-link {
        color: #fff !important;
        background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .30) !important;
    }

    .sidebar .nav-item.active .nav-link i {
        color: #fff !important;
    }

    .sidebar .nav-item .nav-link:hover {
        color: #fff !important;
        background: rgba(59, 130, 246, .18) !important;
        transform: none !important;
    }

    /*
     * Card người dùng ở cuối sidebar.
     */
    .sidebar .sidebar-card,
    .sidebar .user-card,
    .sidebar .profile-card {
        width: 100% !important;
        margin: 16px 0 0 !important;
        padding: 13px 10px !important;
        border-radius: 12px !important;
    }

    /*
     * Topbar và nút hamburger.
     */
    .topbar {
        position: sticky !important;
        top: 0;
        z-index: 1030 !important;

        width: 100% !important;
        min-height: 64px !important;
        padding: 7px 10px !important;
        margin: 0 !important;

        border-radius: 0 !important;
    }

    #sidebarToggleTop {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 8px 0 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;
    }

    .topbar .navbar-search {
        max-width: 170px !important;
        margin-right: auto !important;
    }

    .topbar .img-profile {
        width: 36px !important;
        height: 36px !important;
        object-fit: cover !important;
    }

    /*
     * Nội dung chính dùng trọn chiều rộng khi menu đóng.
     */
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 10px 8px !important;
    }

    .container-fluid > .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }

    .container-fluid > .row > [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /*
     * Card thống kê gọn hơn trên điện thoại.
     */
    .stat-box {
        min-height: 94px !important;
        padding: 16px !important;
        border-radius: 17px !important;
    }

    .stat-title {
        max-width: 175px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .stat-number {
        margin-top: 6px !important;
        font-size: 24px !important;
    }

    .stat-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        flex: 0 0 48px !important;
        font-size: 19px !important;
    }

    .modern-card,
    .security-card {
        border-radius: 17px !important;
    }
}

/*
 * Điện thoại rất nhỏ.
 */
@media (max-width: 380px) {
    .sidebar,
    .sidebar.toggled {
        width: 215px !important;
        min-width: 215px !important;
        max-width: 74vw !important;
    }

    .sidebar .nav-item .nav-link {
        padding: 8px 9px !important;
        gap: 8px !important;
    }

    .sidebar .nav-item .nav-link span {
        font-size: 12px !important;
    }

    .topbar .navbar-search {
        max-width: 135px !important;
    }
}