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

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

.rent{

    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);
}

.rental-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:6px;
    margin-left: 10px;
    padding:6px 12px;

    background:#EEF4FF;
    border:1px solid #C7D7FE;
    border-radius:8px;

    color:#366bd4;
    text-decoration:none;
    font-size:13px;
    font-weight:600;

    transition:.2s;
}

.renter-avatar {
    border-radius: 28px;
    border: 10px black;
    color: gray;
    background: #D3E2FF;
    width: 25px;
    text-align: center;
    height: 25px;
}

.rental-link:hover{
    background:#366bd4;
    color:#fff;
    border-color:#366bd4;
}

.rent-title{

    display:flex;

    flex-direction:column;

    gap:5px;

    flex:1;
}

.rent h3{

    margin:0;

    font-size:14px;

    font-weight:500;

    color:#667085;
}

.rent span{

    font-size:34px;

    font-weight:700;

    color:#111827;
}

.rent-icon{

    width:58px;
    height:58px;

    padding:14px;

    background:#f5f7fb;

    border-radius:50%;

    object-fit:contain;
}


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

.renter-overview-bar{

    display:grid;

    grid-template-columns:
        250px
        220px
        120px
        150px
        120px
        120px
        120px
        120px
        120px
        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
=========================== */

.renter-card{

    display:grid;

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

    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;
}

.renter-card:hover{

    background:#fafcff;
}


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

.renter-card h3{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#101828;
}

.renter-card p{

    margin:0;

    font-size:14px;

    color:#475467;
}


/* ===========================
   Status
=========================== */

.status-paid{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:90px;

    height:32px;

    border-radius:8px;

    background:#ECFDF3;

    color:#16A34A;

    font-weight:600;

    font-size:13px;
}

.status-open{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:90px;

    height:32px;

    border-radius:8px;

    background:#FFF7ED;

    color:#EA580C;

    font-weight:600;

    font-size:13px;
}


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

.renter-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
=========================== */

.renter-overview-item h3{

    margin:0;

    font-size:14px;

    font-weight:600;

    color:#667085;
}