/*
-------------------------------------------------------
Solat Tracker
File    : mobile.css
-------------------------------------------------------
*/


@media(max-width:768px){


/*
|--------------------------------------------------------------------------
| Calendar Mobile
|--------------------------------------------------------------------------
*/

.calendar-header{

    flex-direction:column;

    align-items:stretch;

    text-align:center;

}


.calendar-header .btn{

    width:100%;

}


.calendar-navigation{

    grid-template-columns:
        45px 1fr 45px;

}


.calendar-nav-button{

    width:45px;

    height:42px;

}


.calendar-month-title{

    font-size:19px;

}


.calendar-card{

    padding:10px;

}


.calendar-weekdays{

    gap:4px;

}


.calendar-weekdays > div{

    padding:7px 2px;

    font-size:11px;

}


.calendar-grid{

    gap:4px;

}


.calendar-day{

    min-height:82px;

    padding:8px;

    border-radius:9px;

}


.calendar-day-number{

    font-size:13px;

}


.today-dot{

    display:none;

}


.calendar-progress{

    margin-top:15px;

    font-size:15px;

}


.calendar-percentage{

    font-size:10px;

}


.calendar-mini-status{

    left:8px;

    bottom:7px;

    gap:4px;

    font-size:9px;

}


.calendar-status-icon{

    margin-top:17px;

    font-size:14px;

}


.calendar-summary-grid{

    grid-template-columns:
        repeat(2, 1fr);

}


.calendar-legend{

    display:grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:12px;

}


/*
|--------------------------------------------------------------------------
| Prayer Time Mobile
|--------------------------------------------------------------------------
*/

.prayer-now-grid{

    grid-template-columns:1fr;

}


.prayer-times-list{

    grid-template-columns:
        repeat(2, 1fr);

}


.prayer-now strong{

    font-size:22px;

}


.prayer-now small{

    font-size:20px;

}


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.page{

    padding:15px;

}


/*
|--------------------------------------------------------------------------
| Topbar
|--------------------------------------------------------------------------
*/

.topbar{

    flex-direction:column;

    gap:15px;

    text-align:center;

}


.title-area h1{

    font-size:22px;

}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.card{

    padding:15px;

}


/*
|--------------------------------------------------------------------------
| Dashboard
|--------------------------------------------------------------------------
*/

.dashboard-header-actions{

    width:100%;

    flex-direction:column;

    gap:10px;

}


.dashboard-header-actions .btn-small{

    width:100%;

    min-width:0;

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    text-align:center;

}


.dashboard-header-actions .btn{

    width:100%;

    text-align:center;

}


.dashboard-header,
.day-header{

    flex-direction:column;

    align-items:stretch;

    text-align:center;

}


.dashboard-header .btn,
.day-header .btn{

    width:100%;

}


.section-header{

    align-items:flex-start;

}


/*
|--------------------------------------------------------------------------
| Prayer Grid
|--------------------------------------------------------------------------
*/

.prayer-grid{

    grid-template-columns:
        repeat(2, 1fr);

}


/*
|--------------------------------------------------------------------------
| Summary
|--------------------------------------------------------------------------
*/

.summary-grid{

    grid-template-columns:
        repeat(2, 1fr);

}


/*
|--------------------------------------------------------------------------
| Tracker Actions
|--------------------------------------------------------------------------
*/

.tracker-actions{

    grid-template-columns:1fr;

}


/*
|--------------------------------------------------------------------------
| Prayer Form
|--------------------------------------------------------------------------
*/

.prayer-row{

    flex-direction:column;

    align-items:stretch;

}


.prayer-row-name{

    min-width:0;

}


.status-options{

    justify-content:flex-start;

}


.status-option{

    flex:1;

}


.status-option span{

    display:block;

    text-align:center;

}


/*
|--------------------------------------------------------------------------
| Date Navigation
|--------------------------------------------------------------------------
*/

.date-navigation{

    display:grid;

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

}


.nav-date{

    padding:9px 5px;

    text-align:center;

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| Login / Authentication
|--------------------------------------------------------------------------
|
| Keep authentication buttons vertical on mobile.
|--------------------------------------------------------------------------
*/

.login-links{

    width:100%;

    display:grid;

    grid-template-columns:1fr;

    gap:10px;

}


.login-links .btn{

    width:100%;

    min-width:0;

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.login-card{

    width:100%;

    max-width:none;

}


/*
|--------------------------------------------------------------------------
| Login Header
|--------------------------------------------------------------------------
*/

.login-header{

    text-align:center;

}


.login-logo{

    font-size:56px;

}


.login-header h2{

    font-size:30px;

}


.login-header p{

    font-size:16px;

}


}


@media(max-width:420px){


/*
|--------------------------------------------------------------------------
| Calendar Small Mobile
|--------------------------------------------------------------------------
*/

.calendar-day{

    min-height:72px;

    padding:6px;

}


.calendar-day-number{

    font-size:12px;

}


.calendar-progress{

    margin-top:12px;

    font-size:14px;

}


.calendar-mini-status{

    font-size:8px;

}


.calendar-summary-grid{

    grid-template-columns:
        repeat(2, 1fr);

}


.prayer-times-list{

    grid-template-columns:1fr;

}


/*
|--------------------------------------------------------------------------
| Prayer Grid
|--------------------------------------------------------------------------
*/

.prayer-grid{

    grid-template-columns:1fr;

}


/*
|--------------------------------------------------------------------------
| Summary Grid
|--------------------------------------------------------------------------
*/

.summary-grid{

    grid-template-columns:
        1fr 1fr;

}


/*
|--------------------------------------------------------------------------
| Login
|--------------------------------------------------------------------------
*/

.login-card{

    margin-top:20px;

}


.login-logo{

    font-size:50px;

}


.login-header h2{

    font-size:27px;

}


.login-header p{

    font-size:15px;

}


.login-links{

    grid-template-columns:1fr;

}


.login-links .btn{

    width:100%;

    min-width:100%;

}

}