/*
|--------------------------------------------------------------------------
| PROJECT REDLINE - RESPONSIVE SYSTEM
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| MOBILE SCROLL FIX
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    html,
    body,
    #app {

        overflow-y: auto !important;

        overflow-x: hidden;

        min-height: 100vh;

        -webkit-overflow-scrolling: touch;
    }

    /*
    |--------------------------------------------------------------------------
    | PAGE LOCK FIX
    |--------------------------------------------------------------------------
    */

    body.page-lock {

        overflow-y: auto !important;
    }

    /*
    |--------------------------------------------------------------------------
    | CONTENT FIX
    |--------------------------------------------------------------------------
    */

    .app-content,
    main,
    .page-content {

        overflow: visible !important;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE HEIGHT FIX
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .garage-page,
    .jobs-page,
    .showroom-page,
    .race-page,
    .profile-page {

        height: auto !important;

        min-height: 100vh;
    }
}

/*
|--------------------------------------------------------------------------
| GLOBAL MOBILE
|--------------------------------------------------------------------------
*/


@media (max-width: 768px) {

    html,
    body {

        overflow-x: hidden;

        touch-action: manipulation;

        -webkit-tap-highlight-color: transparent;
    }

    * {

        scrollbar-width: none;
    }

    *::-webkit-scrollbar {

        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| NAVBAR MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .navbar {

        position: relative;

        height: auto;

        padding:
            14px
            12px
            16px;

        flex-direction: column;

        align-items: stretch;

        gap: 14px;
    }

    /*
    |--------------------------------------------------------------------------
    | CONTAINER
    |--------------------------------------------------------------------------
    */

    .navbar-container {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 14px;
    }

    /*
    |--------------------------------------------------------------------------
    | LEFT
    |--------------------------------------------------------------------------
    */

    .navbar-left {

        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 14px;
    }

    /*
    |--------------------------------------------------------------------------
    | BRAND
    |--------------------------------------------------------------------------
    */

    .navbar-brand {

        justify-content: center;
    }

    .navbar-brand span {

        font-size: 16px;
    }

    /*
    |--------------------------------------------------------------------------
    | NAVIGATION
    |--------------------------------------------------------------------------
    */

    .navbar-nav {

        width: 100%;

        display: flex;

        overflow-x: auto;

        gap: 10px;

        padding-bottom: 2px;

        scrollbar-width: none;
    }

    .navbar-nav::-webkit-scrollbar {

        display: none;
    }

    .navbar-link {

        flex-shrink: 0;

        min-width: fit-content;

        padding:
            12px
            16px;

        border-radius: 14px;

        font-size: 13px;
    }

    /*
    |--------------------------------------------------------------------------
    | RIGHT
    |--------------------------------------------------------------------------
    */

    .navbar-right {

        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            auto;

        gap: 10px;

        align-items: stretch;
    }

    /*
    |--------------------------------------------------------------------------
    | BALANCE
    |--------------------------------------------------------------------------
    */

    .navbar-balance {

        width: 100%;

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 10px;
    }

    .navbar-balance-card {

        min-width: 0;

        padding:
            12px;
    }

    .navbar-balance-value,
    .navbar-balance-value-gold {

        font-size: 13px;
    }

    /*
    |--------------------------------------------------------------------------
    | LEVEL
    |--------------------------------------------------------------------------
    */

    .navbar-level-card {

        width: 100%;

        grid-column: span 2;
    }

    /*
    |--------------------------------------------------------------------------
    | PROFILE
    |--------------------------------------------------------------------------
    */

    .navbar-profile-card {

        width: 56px;

        min-width: 56px;

        height: 56px;

        padding: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;
    }

    /*
    |--------------------------------------------------------------------------
    | HIDE NAME
    |--------------------------------------------------------------------------
    */

    .navbar-profile-main {

        display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | AVATAR
    |--------------------------------------------------------------------------
    */

    .navbar-profile-avatar-wrapper {

        width: 56px;
        height: 56px;

        margin: 0;
    }

    .navbar-avatar {

        width: 100%;
        height: 100%;

        object-fit: cover;

        border-radius: 50%;
    }

    /*
    |--------------------------------------------------------------------------
    | DROPDOWN
    |--------------------------------------------------------------------------
    */

    .navbar-profile-dropdown {

        top: calc(100% + 12px);

        right: 0;

        width: 220px;
    }
}

/*
|--------------------------------------------------------------------------
| GARAGE MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .garage-layout {

        flex-direction: column;

        gap: 18px;
    }

    .garage-car-view {

        min-height: 260px;
    }

    .garage-side-panel {

        width: 100%;
    }

    .layered-car-container {

        transform:
            scale(0.8);
    }

    .garage-controls {

        flex-wrap: wrap;

        gap: 10px;
    }

    .garage-button {

        flex: 1;

        min-width: 120px;
    }
}

/*
|--------------------------------------------------------------------------
| SHOWROOM MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .showroom-grid {

        grid-template-columns:
            1fr;
    }

    .showroom-card {

        min-height: auto;
    }

    .showroom-car-image {

        transform:
            scale(0.92);
    }
}

/*
|--------------------------------------------------------------------------
| PROFILE MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .profile-modal {

        width: calc(100vw - 20px);

        height: calc(100vh - 20px);

        border-radius: 24px;

        overflow-y: auto;
    }

    .profile-overview,
    .profile-settings-modal {

        flex-direction: column;
    }

    .profile-overview-left,
    .profile-overview-right,
    .profile-settings-left,
    .profile-settings-right {

        width: 100%;
    }

    .profile-settings-grid,
    .profile-overview-grid {

        grid-template-columns:
            1fr;
    }

    .profile-settings-actions {

        flex-direction: column;
    }

    .profile-settings-save,
    .profile-settings-logout {

        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| JOBS MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .jobs-grid {

        grid-template-columns:
            1fr;
    }

    .job-card {

        padding: 18px;
    }

    .job-button {

        width: 100%;

        height: 54px;
    }
}

/*
|--------------------------------------------------------------------------
| RACE MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .race-layout {

        flex-direction: column;
    }

    .race-track {

        min-height: 260px;
    }

    .race-controls {

        grid-template-columns:
            1fr
            1fr;
    }
}

/*
|--------------------------------------------------------------------------
| TOUCH TARGETS
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    button,
    .navbar-link,
    .job-button,
    .garage-button,
    input,
    select {

        min-height: 48px;
    }
}

body {

    padding-bottom:
        env(safe-area-inset-bottom);
}

@media (max-width: 768px) {

    .heavy-blur {

        backdrop-filter: blur(6px);
    }

    .cinematic-shadow {

        box-shadow:
            0 0 28px rgba(0,0,0,0.24);
    }
}

/*
|--------------------------------------------------------------------------
| FORCE MOBILE SCROLL
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    #app,
    .app-content,
    .main-content,
    .page-content,
    .garage-page,
    .showroom-page,
    .jobs-page,
    .race-page {

        position: relative !important;

        overflow-y: visible !important;

        overflow-x: hidden !important;

        height: auto !important;

        min-height: 100vh !important;
    }

    .modal-overlay,
    .profile-modal-wrapper {

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }
}