.statement-container{

background:#fff;

padding:30px;

border-radius:10px;

}



.statement-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

}



.company-logo{

width:90px;

height:90px;

object-fit:contain;

}



.statement-title h1{

font-size:22px;

}



.customer-box{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

background:#f8f9fa;

padding:20px;

margin-top:20px;

}




.statement-summary{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:15px;

margin:25px 0;

}



.summary-card{

background:#fff;

border:1px solid #ddd;

padding:20px;

border-radius:10px;

}



.credit{

color:#198754;

font-weight:bold;

}



.debit{

color:#dc3545;

font-weight:bold;

}



.statement-table{

width:100%;

border-collapse:collapse;

}



.statement-table th{

background:#f1f3f5;

padding:12px;

text-align:left;

}



.statement-table td{

padding:12px;

border-bottom:1px solid #eee;

}



.statement-footer{

display:flex;

justify-content:flex-end;

gap:20px;

font-size:18px;

margin-top:20px;

}



.export-actions{

margin-top:30px;

}



@media(max-width:768px){

.statement-summary{

grid-template-columns:1fr;

}


.customer-box{

grid-template-columns:1fr;

}


.statement-header{

display:block;

}


.statement-table{

font-size:12px;

}

}
.transaction-debit{

    color:#dc3545;
    font-weight:700;

}


.transaction-credit{

    color:#198754;
    font-weight:700;

}


.transaction-balance{

    font-weight:700;

}


.statement-container{
position:relative;
overflow:hidden;
}


.watermark{

position:absolute;

top:40%;

left:20%;

font-size:80px;

font-weight:bold;

color:rgba(0,0,0,0.05);

transform:rotate(-30deg);

pointer-events:none;

z-index:0;

}


.statement-header,
.customer-box,
.statement-summary,
.statement-table,
.statement-footer,
.export-actions{

position:relative;

z-index:1;

}