/* ===========================
   Statistik-Karten
=========================== */

.expenses{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:30px;
}

.expense{

    display:flex;
    align-items:center;
    gap:18px;

    background:#fff;

    padding:25px;

    border-radius:14px;

    border:1px solid #eef2f7;

    box-shadow:
            0 1px 2px rgba(16,24,40,.04),
            0 12px 32px rgba(16,24,40,.06);
}

.expense-title{

    display:flex;

    flex-direction:column;

    gap:5px;

    flex:1;
}

.expense h3{

    margin:0;

    font-size:14px;

    font-weight:500;

    color:#667085;
}

.expense span{

    font-size:34px;

    font-weight:700;

    color:#111827;
}

.expense-icon{

    width:58px;
    height:58px;

    padding:14px;

    background:#f5f7fb;

    border-radius:50%;

    object-fit:contain;
}


/* ===========================
   Tabellenkopf
=========================== */

.expense-overview-bar{

    display:grid;

    grid-template-columns:
        250px
        220px
        150px
        150px
        150px
        150px;


    align-items:center;

    background:#fff;

    margin-top:30px;

    padding:18px 24px;

    border:1px solid #eef2f7;

    border-radius:14px 14px 0 0;

    font-size:14px;

    font-weight:600;

    color:#667085;
}


/* ===========================
   Tabellenzeile
=========================== */

.expense-card{

    display:grid;

    grid-template-columns:
        250px
        220px
        150px
        150px
        150px
        50px;

    align-items:center;

    padding:18px 24px;

    background:#fff;

    border-left:1px solid #eef2f7;
    border-right:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;

    transition:.2s;
}

.expense-card:hover{

    background:#fafcff;
}


/* ===========================
   Texte
=========================== */

.expense-card h3{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#101828;
}

.expense-card p{

    margin:0;

    font-size:14px;

    color:#475467;
}

/* ===========================
   Aktionen
=========================== */

.expense-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;
}

.action-btn-pay,
.action-btn-edit,
.action-btn-delete{

    width:34px;
    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:transparent;

    border:none;

    cursor:pointer;

    transition:.2s;
}

.action-btn-pay:hover,
.action-btn-edit:hover,
.action-btn-delete:hover{

    transform:scale(1.15);
}

.btn-icon{

    width:18px;
    height:18px;

    object-fit:contain;
}


/* ===========================
   Kopfzeile
=========================== */

.expense-overview-item h3{

    margin:0;

    font-size:14px;

    font-weight:600;

    color:#667085;
}