/* ==========================================
   ExpenseTrackify - Transactions
========================================== */

.search-box{
    display:flex;
    align-items:center;
    gap:10px;
    background:#1f2937;
    padding:12px 16px;
    border-radius:12px;
    margin-bottom:15px;
}

.search-box input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:#fff;
    font-size:15px;
}

.filter-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:20px;
}

.filter-row select{
    padding:10px;
    border-radius:10px;
    border:none;
}

.transaction-actions{
    display:flex;
    gap:8px;
    margin-top:8px;
}

.transaction-actions button{
    border:none;
    padding:8px;
    border-radius:8px;
    cursor:pointer;
}

.popup{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    justify-content:center;
    align-items:center;
    z-index:999;
}

.popup-content{
    background:#1e293b;
    color:#fff;
    width:90%;
    max-width:420px;
    padding:20px;
    border-radius:15px;
    position:relative;
}

#closePopup{

margin-top:20px;

position:sticky;

bottom:0;

width:100%;

}

.image-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.9);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.image-modal img{

max-width:90%;

max-height:90%;

border-radius:12px;

}

.image-modal span{

position:absolute;

top:20px;

right:30px;

font-size:40px;

color:#fff;

cursor:pointer;

}

.receipt-thumb{

width:120px;

height:120px;

object-fit:cover;

margin:8px;

border-radius:10px;

cursor:pointer;

}

.pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
}

.pagination button{
    width:40px;
    height:40px;
    border:none;
    border-radius:10px;
    cursor:pointer;
}

.pagination button.active{
    background:#4CAF50;
    color:#fff;
}

.image-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.9);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

.image-modal img{
max-width:90%;
max-height:85%;
border-radius:12px;
}

.close-image,
.prev-image,
.next-image{
position:absolute;
background:#fff;
border:none;
padding:12px 16px;
font-size:22px;
cursor:pointer;
border-radius:10px;
}

.close-image{
top:20px;
right:20px;
}

.prev-image{
left:20px;
top:50%;
transform:translateY(-50%);
}

.next-image{
right:20px;
top:50%;
transform:translateY(-50%);
}

.receipt-thumb{
width:90px;
height:90px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
margin:5px;
}

.image-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.image-modal img{
max-width:90%;
max-height:90%;
border-radius:12px;
}

.close-image,
.prev-image,
.next-image{
position:absolute;
background:none;
border:none;
color:#fff;
font-size:35px;
cursor:pointer;
}

.close-image{
top:20px;
right:20px;
}

.prev-image{
left:20px;
top:50%;
transform:translateY(-50%);
}

.next-image{
right:20px;
top:50%;
transform:translateY(-50%);
}