/* ==========================================================
   ROCK YOUR TIME®
   MOBILE
========================================================== */

/* ----------------------------------------------------------
   TABLETS
---------------------------------------------------------- */

@media (max-width: 1200px){

    .dashboard-summary,
    .summary-grid,
    .radar-grid,
    .radar-summary,
    .admin-grid{

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px,1fr)
            );

    }

}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 992px){

    /* ------------------------------------------
       SIDEBAR
    ------------------------------------------ */

    /* ------------------------------------------
       MAIN
    ------------------------------------------ */

    .ryt-main{

        margin-left:0;

        padding:24px;

        padding-bottom:90px;

    }

    /* ------------------------------------------
       MOBILE NAV
    ------------------------------------------ */

    .ryt-mobile-nav{

        display:block;

    }

    /* ------------------------------------------
       PAGE HEADERS
    ------------------------------------------ */

    .page-header,
    .dashboard-header,
    .admin-header{

        flex-direction:column;

        align-items:flex-start;

    }

    /* ------------------------------------------
       DASHBOARD
    ------------------------------------------ */

    .dashboard-summary,
    .summary-grid,
    .radar-grid,
    .radar-summary{

        grid-template-columns:1fr;

    }

    /* ------------------------------------------
       ADMIN
    ------------------------------------------ */

    .admin-grid{

        grid-template-columns:1fr;

    }

    .import-summary{

        grid-template-columns:1fr;

    }

    /* ------------------------------------------
       TABLES
    ------------------------------------------ */

    .admin-table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

}

/* ----------------------------------------------------------
   SMALL DEVICES
---------------------------------------------------------- */

@media (max-width:768px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.6rem;

    }

    h3{

        font-size:1.25rem;

    }

    .ryt-auth-card{

        padding:28px;

    }

    .club-grid{

        grid-template-columns:1fr;

    }

    .dashboard-empty{

        padding:50px 20px;

    }

    .recommendation-card{

        padding:24px;

    }

    .summary-card{

        padding:22px;

    }

    .dashboard-card{

        padding:24px;

    }

    .portfolio-card{

        padding:24px;

    }

    .admin-card{

        padding:24px;

    }

}

/* ----------------------------------------------------------
   EXTRA SMALL DEVICES
---------------------------------------------------------- */

@media (max-width:576px){

    body{

        font-size:.95rem;

    }

    .ryt-main{

        padding:18px;

        padding-bottom:90px;

    }

    .ryt-auth-page{

        padding:20px;

    }

    .ryt-auth-card{

        padding:24px;

        border-radius:20px;

    }

    .ryt-app-header{

        gap:12px;

    }

    .ryt-app-name{

        font-size:1.5rem;

    }

    .ryt-button,
    .ryt-primary-button,
    .ryt-secondary-button{

        width:100%;

    }

    .dashboard-greeting{

        font-size:1.8rem;

    }

    .opportunity-score{

        width:60px;

        height:60px;

        font-size:1.2rem;

    }

}

/* ----------------------------------------------------------
   PRINT
---------------------------------------------------------- */

@media print{

    .ryt-sidebar,

    .ryt-mobile-nav,

    .ryt-primary-button,

    .ryt-secondary-button,

    .ryt-outline-button{

        display:none !important;

    }

    .ryt-main{

        margin:0;

        padding:0;

    }

    body{

        background:white;

    }

}