/*
|--------------------------------------------------------------------------
| Fitness AI Mobile CSS
|--------------------------------------------------------------------------
| Mobile First Optimizations
| Android / iPhone Friendly
|--------------------------------------------------------------------------
*/

/* --------------------------------------------------
   Smooth Scrolling
-------------------------------------------------- */

html{
    scroll-behavior:smooth;
}

body{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}

/* --------------------------------------------------
   Mobile Safe Area
-------------------------------------------------- */

.app-content{

    padding-left:15px;
    padding-right:15px;

    padding-top:85px;
    padding-bottom:95px;

}

/* --------------------------------------------------
   Touch Friendly Buttons
-------------------------------------------------- */

.btn,
.form-control,
.form-select,
.bottom-nav-item,
.sidebar-menu a{

    min-height:48px;

}

/* --------------------------------------------------
   Mobile Cards
-------------------------------------------------- */

.dashboard-card,
.workout-card,
.ai-card,
.analysis-card,
.progress-card,
.profile-card,
.assessment-card{

    margin-bottom:15px;

}

/* --------------------------------------------------
   Topbar Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .topbar{

        height:65px;

    }

    .app-content{

        padding-top:80px;

    }

    .app-name{

        font-size:15px;

    }

    .menu-btn{

        width:40px;
        height:40px;

    }

    .top-avatar{

        width:38px;
        height:38px;

    }

}

/* --------------------------------------------------
   Bottom Navigation Mobile
-------------------------------------------------- */

.bottom-nav{

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

}

.bottom-nav-item{

    font-size:10px;

}

.bottom-nav-item i{

    font-size:18px;

}

/* --------------------------------------------------
   Sidebar Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .sidebar-offcanvas{

        width:280px;

    }

}

/* --------------------------------------------------
   Welcome Card
-------------------------------------------------- */

@media(max-width:576px){

    .welcome-card{

        padding:20px;

    }

    .welcome-card h2{

        font-size:22px;

    }

}

/* --------------------------------------------------
   Dashboard Stats Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .stat-value{

        font-size:24px;

    }

}

/* --------------------------------------------------
   Fitness Score Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .fitness-score{

        font-size:48px;

    }

}

/* --------------------------------------------------
   Quick Actions Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .quick-actions{

        gap:10px;

    }

    .quick-action{

        padding:15px;

    }

    .quick-action i{

        font-size:24px;

    }

}

/* --------------------------------------------------
   Forms Mobile
-------------------------------------------------- */

@media(max-width:576px){

    .form-control,
    .form-select{

        min-height:50px;

        font-size:14px;

    }

}

/* --------------------------------------------------
   Tables Mobile
-------------------------------------------------- */

.table-responsive{

    border-radius:15px;

}

/* --------------------------------------------------
   Chart Area
-------------------------------------------------- */

.chart-wrapper{

    overflow:hidden;

}

.chart-wrapper canvas{

    max-width:100%;

}

/* --------------------------------------------------
   Profile Page
-------------------------------------------------- */

@media(max-width:576px){

    .profile-card img{

        width:100px;
        height:100px;

    }

    .profile-name{

        font-size:20px;

    }

}

/* --------------------------------------------------
   Assessment Form
-------------------------------------------------- */

@media(max-width:576px){

    .assessment-card{

        padding:20px;

    }

}

/* --------------------------------------------------
   Landscape Phones
-------------------------------------------------- */

@media (max-width:900px) and (orientation:landscape){

    .app-content{

        padding-top:75px;
        padding-bottom:85px;

    }

}

/* --------------------------------------------------
   Tablets
-------------------------------------------------- */

@media(min-width:768px){

    .app-content{

        max-width:900px;
        margin:0 auto;

    }

}

/* --------------------------------------------------
   Large Screens
-------------------------------------------------- */

@media(min-width:1200px){

    .app-content{

        max-width:1100px;
        margin:0 auto;

    }

}

/* --------------------------------------------------
   Loading Spinner
-------------------------------------------------- */

.app-loader{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#ffffff;

    z-index:99999;

    display:flex;

    align-items:center;
    justify-content:center;

}

.app-loader.hidden{

    display:none;

}

/* --------------------------------------------------
   Utility Classes
-------------------------------------------------- */

.text-small{
    font-size:12px;
}

.text-muted-app{
    color:#6b7280;
}

.radius-xl{
    border-radius:24px;
}

.shadow-soft{
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

/* --------------------------------------------------
   Prevent Content Behind Bottom Nav
-------------------------------------------------- */

.last-section{

    margin-bottom:100px;

}