.page{

    width:100%;

    max-width:1100px;

    margin:auto;

    padding:20px;

}

.topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:25px;

}

.title-area h1{

    font-size:28px;

}

.content{

    width:100%;

}

.card{

    background:var(--card);

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

    border-radius:var(--radius);

    padding:20px;

    margin-bottom:20px;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    background:var(--card-hover);

}

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

.btn-logout{

    background:#1b2230;

    border:1px solid #374151;

    color:#fca5a5;

}


.btn-logout:hover{

    background:#7f1d1d;

    border-color:#ef4444;

    color:#fff;

}

.dashboard-header,
.day-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;

}

.muted{

    color:var(--muted);

    margin-top:4px;

}


/*
|--------------------------------------------------------------------------
| Section Header
|--------------------------------------------------------------------------
*/

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}

.section-header h2{

    margin:0;

}


/*
|--------------------------------------------------------------------------
| Completion
|--------------------------------------------------------------------------
*/

.completion{

    text-align:right;

}

.completion strong{

    display:block;

    font-size:28px;

    color:var(--primary-hover);

}

.completion span{

    color:var(--muted);

    font-size:13px;

}


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

.prayer-grid{

    display:grid;

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

    gap:12px;

}

.prayer-card{

    padding:18px;

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

    border-radius:14px;

    background:#121826;

    transition:.25s ease;

}

.prayer-card:hover{

    transform:translateY(-2px);

    background:var(--card-hover);

}

.prayer-name{

    font-weight:600;

    margin-bottom:8px;

}

.prayer-status{

    font-size:13px;

    color:var(--muted);

}


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

.summary-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:20px;

}

.summary-card{

    display:flex;

    align-items:center;

    gap:14px;

    background:var(--card);

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

    border-radius:var(--radius);

    padding:18px;

}

.summary-icon{

    font-size:26px;

}

.summary-card strong{

    display:block;

    font-size:24px;

}

.summary-card span:not(.summary-icon){

    display:block;

    color:var(--muted);

    font-size:13px;

}


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

.tracker-actions{

    display:grid;

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

    gap:15px;

}

.action-card{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    background:#121826;

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

    border-radius:14px;

    transition:.25s ease;

}

.action-card:hover{

    background:var(--card-hover);

}

.action-card > span{

    font-size:30px;

}

.action-card strong{

    display:block;

}

.action-card small{

    display:block;

    color:var(--muted);

    margin-top:3px;

}


/*
|--------------------------------------------------------------------------
| Information
|--------------------------------------------------------------------------
*/

.info-card ul{

    margin-top:15px;

    padding-left:20px;

}

.info-card li{

    margin-bottom:8px;

    color:var(--muted);

}


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

.date-navigation{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

}

.nav-date{

    display:inline-block;

    padding:10px 16px;

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

    border-radius:10px;

    background:var(--card);

    transition:.25s ease;

}

.nav-date:hover{

    background:var(--card-hover);

}

.today-link{

    background:var(--primary);

    border-color:var(--primary);

}

.today-link:hover{

    background:var(--primary-hover);

}

.nav-date.disabled{

    opacity:.35;

    pointer-events:none;

}


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

.prayer-form{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:25px;

}

.prayer-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:16px;

    background:#121826;

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

    border-radius:14px;

}

.prayer-row.readonly{

    background:#121826;

}

.prayer-row-name{

    min-width:90px;

}


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

.status-options{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:8px;

}

.status-option{

    cursor:pointer;

}

.status-option input{

    display:none;

}

.status-option span{

    display:inline-block;

    padding:8px 12px;

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

    border-radius:8px;

    color:var(--muted);

    font-size:13px;

    transition:.2s ease;

}

.status-option input:checked + span{

    color:#fff;

    border-color:var(--primary);

    background:var(--primary);

}


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

.status-badge{

    display:inline-block;

    padding:7px 12px;

    border-radius:8px;

    font-size:13px;

    font-weight:600;

}

.status-done{

    border-color:#166534;

    background:#14532d;

    color:#dcfce7;

}

.status-missed{

    border-color:#991b1b;

    background:#7f1d1d;

    color:#fee2e2;

}

.status-qada{

    border-color:#92400e;

    background:#78350f;

    color:#fef3c7;

}

.status-none{

    border-color:#374151;

    background:#1f2937;

    color:#d1d5db;

}


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

.day-note{

    margin-top:20px;

}

.readonly-note{

    padding:16px;

    background:#121826;

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

    border-radius:12px;

}

.readonly-note p{

    margin-top:8px;

    color:var(--muted);

    white-space:normal;

}


/*
|--------------------------------------------------------------------------
| Small Button
|--------------------------------------------------------------------------
*/

.btn-small{

    width:auto;

    padding:10px 16px;

    display:inline-block;

    text-align:center;

}

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

.prayer-time-card{

    margin-bottom:20px;

}


.prayer-now-grid{

    display:grid;

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

    gap:15px;

    margin-bottom:20px;

}


.prayer-now{

    padding:20px;

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

    border-radius:14px;

    background:#121826;

}


.prayer-now-label{

    display:block;

    color:var(--muted);

    font-size:13px;

    margin-bottom:8px;

}


.prayer-now strong{

    display:block;

    font-size:25px;

    margin-bottom:4px;

}


.prayer-now > span:not(.prayer-now-label){

    color:var(--muted);

    font-size:14px;

}


.prayer-now small{

    display:block;

    margin-top:12px;

    font-size:24px;

    font-weight:700;

}


.prayer-now.current{

    border-left:
        4px solid var(--primary);

}


.prayer-now.next{

    border-left:
        4px solid #22c55e;

}


/*
|--------------------------------------------------------------------------
| Prayer Times List
|--------------------------------------------------------------------------
*/

.prayer-times-list{

    display:grid;

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

    gap:10px;

}


.prayer-time-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:13px 15px;

    background:#121826;

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

    border-radius:10px;

}


.prayer-time-row span{

    color:var(--muted);

}


.prayer-time-row strong{

    font-size:16px;

}

/*
|--------------------------------------------------------------------------
| Dashboard Header Actions
|--------------------------------------------------------------------------
*/

.dashboard-header-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

}


/*
|--------------------------------------------------------------------------
| Dashboard Header Buttons
|--------------------------------------------------------------------------
*/

.dashboard-header-actions .btn-small{

    min-width:130px;

    min-height:52px;

    padding:10px 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    white-space:nowrap;

    text-align:center;

    flex-shrink:0;

}


/*
|--------------------------------------------------------------------------
| Logout
|--------------------------------------------------------------------------
*/

.btn-logout{

    background:#1b2230;

    border:1px solid #374151;

    color:#fca5a5;

}


.btn-logout:hover{

    background:#7f1d1d;

    border-color:#ef4444;

    color:#fff;

}