.dashboard-container{

    max-width:1200px;

    margin:auto;

    padding:40px 20px 60px;
}

.dashboard-header{

    margin-bottom:32px;
}

.dashboard-title{

    font-family:'Outfit',sans-serif;

    font-size:2rem;

    font-weight:700;

    color:#1F2937;
}

.dashboard-subtitle{

    margin-top:8px;

    color:#6B7280;

    font-size:1rem;
}

.summary-grid{

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(220px,1fr)
    );

    gap:20px;

    margin-bottom:32px;
}

.summary-card{

    background:#ffffff;

    border-radius:16px;

    padding:24px;

    box-shadow:
    0 4px 16px rgba(0,0,0,0.08);

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.summary-card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 12px 24px rgba(0,0,0,0.08);
}

.summary-label{

    font-size:0.9rem;

    color:#6B7280;
}

.summary-value{

    font-size:2rem;

    font-weight:700;

    margin-top:8px;

    color:#1F2937;
}

.invitation-section{

    margin-top:32px;
}

.section-title{

    font-family:'Outfit',sans-serif;

    font-size:1.4rem;

    font-weight:700;

    margin-bottom:20px;

    color:#1F2937;
}

.search-container{

    margin-bottom:24px;
}

.search-input{

    width:100%;

    padding:14px 18px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    font-size:15px;

    font-family:'Inter',sans-serif;

    background:#ffffff;

    transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.search-input:focus{

    outline:none;

    border-color:#6D28D9;

    box-shadow:
    0 0 0 4px
    rgba(109,40,217,0.08);
}

.sort-container{

    margin-bottom:24px;
}

.sort-select{

    width:100%;

    padding:14px 18px;

    border:1px solid #E5E7EB;

    border-radius:16px;

    font-size:15px;

    font-family:'Inter',sans-serif;

    background:#ffffff;

    cursor:pointer;

    transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.sort-select:focus{

    outline:none;

    border-color:#6D28D9;

    box-shadow:
    0 0 0 4px
    rgba(109,40,217,0.08);
}

.invitation-grid{

    display:grid;

    gap:20px;
}

.invitation-card{

    font-family:'Inter',sans-serif;

    background:#ffffff;

    border-radius:24px;

    padding:28px;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.06);

   border:1px solid #E5E7EB;

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.invitation-card:hover{

    transform:
    translateY(-4px);

    box-shadow:
    0 20px 40px rgba(0,0,0,0.10);
}

.invitation-name{

    font-size:24px;

    font-weight:700;

    margin-bottom:16px;

    color:#111827;
}

.status-badge{

    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    margin-bottom:18px;
}

.status-upcoming{

    background:#DCFCE7;

    color:#166534;
}

.status-today{

    background:#FEF3C7;

    color:#92400E;
}

.status-completed{

    background:#E5E7EB;

    color:#374151;
}

.invitation-meta{

    color:#6B7280;

    line-height:1.8;

    font-size:15px;

    margin-bottom:20px;
}

.invitation-id{

    font-size:13px;

    color:#9CA3AF;

    margin-top:10px;
}

.invitation-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;
}

.action-btn{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    font-size:0.9rem;
}

.action-primary{

    background:
    linear-gradient(
        135deg,
        #6D28D9,
        #EC4899
    );

    color:white;
}

.action-secondary{

    border:1px solid #D1D5DB;

    color:#374151;

    background:white;
}

@media(max-width:768px){

    .invitation-actions{

        flex-direction:column;
    }

    .action-btn{

        width:100%;

        text-align:center;
    }
}

.host-lookup-card{
    background:#ffffff;
    border-radius:20px;
    padding:24px;
    margin-bottom:24px;
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.form-label{
    display:block;
    font-weight:600;
    margin-bottom:12px;
}

.host-lookup-row{
    display:flex;
    gap:12px;
    align-items:center;
}

.host-lookup-row .search-input{
    flex:1;
    margin-bottom:0;
}

#loadInvitationsBtn{
    min-width:180px;
    white-space:nowrap;
}

.host-lookup-message{
    margin-top:12px;
    min-height:20px;
    font-size:0.9rem;
}

@media (max-width:768px){

    .host-lookup-row{
        flex-direction:column;
        align-items:stretch;
    }

    #loadInvitationsBtn{
        width:100%;
    }

}