.dashboard{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:var(--space-xl);
}

.dashboard-card{
    width:100%;
    max-width:720px;

    background:var(--surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    padding:3rem;

    display:flex;
    flex-direction:column;

    gap:2rem;
}

.message-card{
    background:#f7fbf6;

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

    padding:1.25rem;

    border-radius:var(--radius-md);
}

.message-card h2{
    margin-bottom:.75rem;
    font-size:var(--font-size-lg);
}

.message-card p{
    color:var(--text-secondary);
    line-height:1.7;
}

.summary-section{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.summary-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}

.summary-item{
    background:#f7fbf6;

    border:1px solid #e6f1e5;

    border-radius:var(--radius-md);

    padding:1rem;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.summary-item span{
    color:var(--text-secondary);
}

.summary-item strong{
    color:var(--primary);
}

.history-section{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

#historyContainer{
    display:flex;
    flex-direction:column;
    gap:.75rem;
}

.history-card{

    background:#fbfdfb;

    border:1px solid #e6f1e5;

    border-radius:var(--radius-md);

    padding:1rem 1.2rem;

    box-shadow:var(--shadow-sm);

}

.history-card h3{

    margin-bottom:1rem;

    color:var(--heading-color);

}

.history-details{

    display:flex;

    flex-direction:column;

    gap:.65rem;

}

.history-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:.35rem;

    border-bottom:1px dashed #e6f1e5;

     font-size:.9rem;

}

.history-row:last-child{

    border-bottom:none;

}

.history-row span{

    color:var(--text-secondary);

}

.history-row strong{

    color:var(--primary);

     font-size:.9rem;

}

.history-header{
    margin-bottom:1rem;
}

.history-header h2{
    font-size:1.6rem;
    color:var(--heading-color);
    margin-bottom:.35rem;
}


.history-card p{
    color:var(--text-secondary);
    font-size:.95rem;
    line-height: 1.5;
}
@media (max-width:768px){

    .dashboard-card{
        padding:2rem 1.5rem;
    }

    .summary-grid{
        grid-template-columns:1fr;
    }

}