/*
|--------------------------------------------------------------------------
| Solat Tracker Calendar
|--------------------------------------------------------------------------
*/

.calendar-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;

}

.calendar-header h2{
    margin:0;
}


/*
|--------------------------------------------------------------------------
| Month Navigation
|--------------------------------------------------------------------------
*/

.calendar-navigation{

    display:grid;

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

    align-items:center;

    gap:10px;

    margin-bottom:15px;

}

.calendar-month-title{

    text-align:center;

    font-size:22px;

}

.calendar-nav-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:50px;

    height:45px;

    border:1px solid var(--border);

    border-radius:10px;

    background:var(--card);

    font-size:22px;

    transition:.2s ease;

}

.calendar-nav-button:hover{

    background:var(--card-hover);

    transform:translateY(-1px);

}


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

.calendar-card{

    padding:18px;

}


/*
|--------------------------------------------------------------------------
| Weekdays
|--------------------------------------------------------------------------
*/

.calendar-weekdays{

    display:grid;

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

    gap:8px;

    margin-bottom:8px;

}

.calendar-weekdays > div{

    text-align:center;

    padding:10px 5px;

    color:var(--muted);

    font-size:13px;

    font-weight:600;

}


/*
|--------------------------------------------------------------------------
| Calendar Grid
|--------------------------------------------------------------------------
*/

.calendar-grid{

    display:grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap:8px;

}


/*
|--------------------------------------------------------------------------
| Calendar Day
|--------------------------------------------------------------------------
*/

.calendar-day{

    position:relative;

    min-height:105px;

    padding:12px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#121826;

    color:var(--text);

    text-decoration:none;

    transition:.2s ease;

    min-width:0;

}

a.calendar-day:hover{

    transform:translateY(-2px);

    border-color:var(--primary);

}


/*
|--------------------------------------------------------------------------
| Empty Cell
|--------------------------------------------------------------------------
*/

.calendar-day.empty{

    background:transparent;

    border-color:transparent;

}


/*
|--------------------------------------------------------------------------
| Day Number
|--------------------------------------------------------------------------
*/

.calendar-day-number{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:5px;

    font-size:16px;

    font-weight:700;

}

.today-dot{

    padding:3px 6px;

    border-radius:5px;

    background:var(--primary);

    color:#fff;

    font-size:9px;

    font-weight:600;

}


/*
|--------------------------------------------------------------------------
| Status Colors
|--------------------------------------------------------------------------
*/

.calendar-complete{

    border-left:
        4px solid #22c55e;

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.12),
            #121826
        );

}

.calendar-partial{

    border-left:
        4px solid #eab308;

    background:
        linear-gradient(
            135deg,
            rgba(234,179,8,.12),
            #121826
        );

}

.calendar-missed{

    border-left:
        4px solid #ef4444;

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.13),
            #121826
        );

}

.calendar-none{

    border-left:
        4px solid #64748b;

}

.calendar-locked{

    border-left:
        4px solid #374151;

    background:#0f141e;

    opacity:.48;

}


/*
|--------------------------------------------------------------------------
| Today
|--------------------------------------------------------------------------
*/

.calendar-today{

    box-shadow:
        0 0 0 2px var(--primary);

}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.calendar-progress{

    margin-top:22px;

    font-size:18px;

    font-weight:700;

}

.calendar-percentage{

    margin-top:3px;

    color:var(--muted);

    font-size:12px;

}

.calendar-status-icon{

    margin-top:25px;

    color:var(--muted);

    font-size:18px;

}


/*
|--------------------------------------------------------------------------
| Mini Status
|--------------------------------------------------------------------------
*/

.calendar-mini-status{

    position:absolute;

    left:12px;

    bottom:9px;

    display:flex;

    gap:7px;

    color:var(--muted);

    font-size:10px;

}

.calendar-complete .calendar-mini-status{

    color:#86efac;

}

.calendar-partial .calendar-mini-status{

    color:#fde047;

}

.calendar-missed .calendar-mini-status{

    color:#fca5a5;

}


/*
|--------------------------------------------------------------------------
| Legend
|--------------------------------------------------------------------------
*/

.calendar-legend-card{

    margin-top:15px;

}

.calendar-legend-card h3{

    margin-top:0;

    margin-bottom:15px;

}

.calendar-legend{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.legend-item{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--muted);

    font-size:13px;

}

.legend-color{

    width:14px;

    height:14px;

    border-radius:4px;

    display:inline-block;

}

.legend-color.complete{
    background:#22c55e;
}

.legend-color.partial{
    background:#eab308;
}

.legend-color.missed{
    background:#ef4444;
}

.legend-color.none{
    background:#64748b;
}

.legend-color.locked{
    background:#374151;
}


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

.calendar-summary-card{

    margin-top:15px;

}

.calendar-summary-grid{

    display:grid;

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

    gap:12px;

}

.calendar-summary-item{

    padding:18px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#121826;

}

.calendar-summary-item strong{

    display:block;

    font-size:25px;

}

.calendar-summary-item span{

    display:block;

    margin-top:3px;

    color:var(--muted);

    font-size:13px;

}

.calendar-summary-item.complete{

    border-left:
        4px solid #22c55e;

}

.calendar-summary-item.partial{

    border-left:
        4px solid #eab308;

}

.calendar-summary-item.missed{

    border-left:
        4px solid #ef4444;

}

.calendar-summary-item.none{

    border-left:
        4px solid #64748b;

}

.calendar-summary-item.locked{

    border-left:
        4px solid #374151;

}


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

@media(max-width:768px){

    .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;

    }

}


@media(max-width:420px){

    .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);

    }

}

/*
|--------------------------------------------------------------------------
| Dashboard Calendar Preview
|--------------------------------------------------------------------------
*/

.dashboard-calendar-card{

    margin-top:15px;

}


.dashboard-calendar-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:15px;

}


.dashboard-calendar-header h2{

    margin:0;

}


.dashboard-calendar-header p{

    margin-top:5px;

}


.dashboard-calendar-link{

    color:#c4b5fd;

    font-size:13px;

    text-decoration:none;

}


.dashboard-calendar-link:hover{

    color:#fff;

    text-decoration:underline;

}


/*
|--------------------------------------------------------------------------
| Month
|--------------------------------------------------------------------------
*/

.dashboard-calendar-month{

    text-align:center;

    margin-bottom:12px;

    font-size:18px;

    font-weight:700;

}


/*
|--------------------------------------------------------------------------
| Weekdays
|--------------------------------------------------------------------------
*/

.dashboard-calendar-weekdays{

    display:grid;

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

    gap:6px;

    margin-bottom:6px;

}


.dashboard-calendar-weekdays > div{

    text-align:center;

    padding:6px;

    color:var(--muted);

    font-size:11px;

    font-weight:600;

}


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

.dashboard-calendar-grid{

    display:grid;

    grid-template-columns:
        repeat(7, minmax(0, 1fr));

    gap:6px;

}


/*
|--------------------------------------------------------------------------
| Day
|--------------------------------------------------------------------------
*/

.dashboard-calendar-day{

    position:relative;

    min-height:72px;

    padding:8px;

    border:1px solid var(--border);

    border-radius:9px;

    background:#121826;

    color:var(--text);

    text-decoration:none;

    transition:.2s ease;

}


a.dashboard-calendar-day:hover{

    transform:translateY(-1px);

    border-color:var(--primary);

}


.dashboard-calendar-day.empty{

    background:transparent;

    border-color:transparent;

}


/*
|--------------------------------------------------------------------------
| Day Number
|--------------------------------------------------------------------------
*/

.dashboard-calendar-day-number{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:4px;

    font-size:12px;

    font-weight:700;

}


.dashboard-calendar-day-number span{

    padding:2px 4px;

    border-radius:4px;

    background:var(--primary);

    color:#fff;

    font-size:7px;

}


/*
|--------------------------------------------------------------------------
| Status
|--------------------------------------------------------------------------
*/

.dashboard-calendar-complete{

    border-left:
        3px solid #22c55e;

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.15),
            #121826
        );

}


.dashboard-calendar-partial{

    /*
    |--------------------------------------------------------------------------
    | Incomplete but still within the current/overnight window
    |--------------------------------------------------------------------------
    |
    | This is deliberately neutral. Amber is applied only by
    | .dashboard-calendar-amber after the following day's Subuh.
    |
    */

    border-left:
        3px solid #64748b;

}


.dashboard-calendar-amber{

    border-left:
        3px solid #f59e0b;

    background:
        linear-gradient(
            135deg,
            rgba(245,158,11,.16),
            #121826
        );

}


.dashboard-calendar-missed{

    border-left:
        3px solid #ef4444;

    background:
        linear-gradient(
            135deg,
            rgba(239,68,68,.16),
            #121826
        );

}


.dashboard-calendar-none{

    border-left:
        3px solid #64748b;

}


.dashboard-calendar-locked{

    border-left:
        3px solid #374151;

    background:#0f141e;

    opacity:.45;

}


.dashboard-calendar-today{

    box-shadow:
        0 0 0 2px var(--primary);

}


/*
|--------------------------------------------------------------------------
| Score
|--------------------------------------------------------------------------
*/

.dashboard-calendar-score{

    margin-top:13px;

    font-size:16px;

    font-weight:700;

}


.dashboard-calendar-percent{

    margin-top:2px;

    color:var(--muted);

    font-size:10px;

}


.dashboard-calendar-none{

    padding-top:15px;

    color:var(--muted);

}


.dashboard-calendar-lock{

    margin-top:18px;

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| Legend
|--------------------------------------------------------------------------
*/

.dashboard-calendar-legend{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:15px;

    padding-top:13px;

    border-top:
        1px solid var(--border);

}


.dashboard-calendar-legend span{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--muted);

    font-size:11px;

}


.dashboard-legend-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    display:inline-block;

}


.dashboard-legend-dot.complete{

    background:#22c55e;

}


.dashboard-legend-dot.amber{

    background:#f59e0b;

}


.dashboard-legend-dot.missed{

    background:#ef4444;

}


.dashboard-legend-dot.none{

    background:#64748b;

}


.dashboard-legend-dot.locked{

    background:#374151;

}


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

@media(max-width:768px){

    .dashboard-calendar-header{

        flex-direction:column;

        align-items:stretch;

    }


    .dashboard-calendar-link{

        text-align:center;

    }


    .dashboard-calendar-grid{

        gap:4px;

    }


    .dashboard-calendar-day{

        min-height:62px;

        padding:6px;

    }


    .dashboard-calendar-score{

        margin-top:10px;

        font-size:14px;

    }


    .dashboard-calendar-percent{

        font-size:9px;

    }


    .dashboard-calendar-legend{

        display:grid;

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

        gap:10px;

    }

}


@media(max-width:420px){

    .dashboard-calendar-day{

        min-height:55px;

        padding:5px;

    }


    .dashboard-calendar-day-number{

        font-size:10px;

    }


    .dashboard-calendar-score{

        margin-top:8px;

        font-size:12px;

    }


    .dashboard-calendar-percent{

        display:none;

    }


    .dashboard-calendar-lock{

        margin-top:12px;

        font-size:11px;

    }

}