/* ===========================
   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;
}

.expense-account-selection{

    display:grid;

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

    gap:20px;

    margin-top:35px;

}


.expense-account-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    padding:25px;

    border:1px solid #e6e9ee;

    border-radius:16px;

    background:#fff;

    cursor:pointer;

    text-align:left;

    transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;

}


.expense-account-card:hover{

    transform:translateY(-3px);

    border-color:#d8dee8;

    box-shadow:
            0 10px 28px rgba(28,41,57,.07);

}


.expense-account-icon{

    width:50px;
    height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:14px;

    background:#eef3ff;

    color:#366bd4;

    font-size:18px;

    font-weight:700;

}


.expense-account-icon.business{

    background:#edf7f1;

    color:#238653;

}


.expense-account-content{

    flex:1;

}


.expense-account-label{

    display:block;

    margin-bottom:4px;

    font-size:10px;

    font-weight:700;

    letter-spacing:.12em;

    color:#98a2b3;

}


.expense-account-content h3{

    margin:0 0 4px;

    font-size:20px;

}


.expense-account-content p{

    margin:0;

    color:#667085;

    font-size:13px;

}


.expense-account-arrow{

    color:#98a2b3;

    font-size:20px;

}


.expense-page-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin:25px 0;

}


.expense-back-btn{

    display:block;

    margin-bottom:10px;

    padding:0;

    border:0;

    background:none;

    color:#667085;

    cursor:pointer;

}


#expense-account-title{

    margin:0;

    font-size:30px;

}


.expense-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:25px;

}


.expense-pagination button:disabled{

    opacity:.4;

    cursor:not-allowed;

}


.no-expenses,
.expense-loading{

    padding:40px;

    text-align:center;

    color:#98a2b3;

    background:#fff;

    border:1px dashed #d0d5dd;

}


@media(max-width:700px){

    .expense-account-selection{

        grid-template-columns:1fr;

    }

    .expense-page-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .expense-card{
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px 15px;

        width:100%;
        min-width:0;

        padding:16px;
        box-sizing:border-box;
    }

    .expense-id-info{
        min-width:0;
    }

    .expense-id-info h3{
        margin:0;
        font-size:15px;
    }

    .expense-date{
        text-align:right;
        white-space:nowrap;
        font-size:13px;
    }

    .expense-category{
        min-width:0;
    }

    .expense-amount{
        text-align:right;
        white-space:nowrap;
    }

    .expense-payment{
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .expense-actions{
        display:flex;
        justify-content:flex-end;
        gap:6px;
    }

}
/* V18: direkte Bearbeitung importierter Bankbuchungen */
.expense-import-hint{display:flex;align-items:flex-start;gap:10px;margin:4px 0 14px;padding:12px 14px;border:1px solid #dbe4ef;border-radius:12px;background:#f7f9fc;color:#40536a;font-size:13px;line-height:1.45}.expense-import-hint.hidden{display:none}.expense-import-hint svg{width:18px;height:18px;flex:0 0 18px;color:#21456f;margin-top:1px}.expenseFormBox input:disabled,.expenseFormBox select:disabled{background:#f1f4f8;color:#687789;cursor:not-allowed}.expense-actions button[title]{position:relative}.small-btn.icon-only:disabled{opacity:.32;cursor:not-allowed;pointer-events:none}
.expense-amount.transfer-neutral strong{color:#35506f}.expense-amount.transfer-neutral .expense-source-line{color:#718096}