/* ============================================================
   VPNET Responsive Rules
   ============================================================ */

.mobile {
    display: none !important;
}

@media (max-width: 1200px) {
    .vp-page-view {
        max-height: none !important;
        padding: var(--vp-space-4) var(--vp-space-4) 80px;
    }

    .vp-sidebar {
        display: none;
    }

    .vp-mobile-nav {
        display: flex !important;
    }

    /* Header: compact on mobile */
    .vp-header > div {
        padding: var(--vp-space-3) var(--vp-space-4) !important;
    }
    .vp-header-user-text,
    .vp-header-logout-text {
        display: none;
    }
    .vp-header-user {
        padding: 8px 10px;
    }
    .vp-header .btn-outline-danger {
        padding: 8px 10px;
    }

    .mobile {
        display: block !important;
    }

    .desktop {
        display: none !important;
    }

    .vp-page-title {
        margin-top: var(--vp-space-4);
        font-size: var(--vp-text-xl);
    }

    .card {
        border-radius: var(--vp-radius-lg);
    }

    /* Old compat classes */
    .sidebar { display: none; }
    .sidebar-logo { display: none; }
    .header { display: none !important; }
    .page-view { max-height: 95vh !important; }
    .page-title {
        margin-top: 16px !important;
        margin-left: 3px !important;
        font-size: 22px !important;
    }

    #last_installs { display: none; }
    #appview-organic-list { height: 500px !important; }
    #appview-nonorganic-list { height: 500px !important; }
}

@media (max-width: 576px) {
    .vp-auth-card {
        margin: var(--vp-space-4);
        padding: var(--vp-space-6);
    }
}