html, body {
height: 100%;
margin: 0;
}

body {
display: flex;
flex-direction: column;
min-height: 100vh;
}

main {
flex: 1;
}

.billing-page{
padding:40px 60px;
}

.billing-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.billing-header h2{
font-size:28px;
margin-bottom:4px;
}

.credit-text{
color:#6b7280;
}

.billing-filter{
display:flex;
gap:12px;
align-items:center;
}

.search-box{
position:relative;
}

.search-box input{
width:320px;
padding:10px 14px 10px 38px;
border:1px solid #d1d5db;
border-radius:8px;
background:white;
}

.search-icon{
position:absolute;
left:10px;
top:8px;
color:#9ca3af;
}

.billing-filter select{
padding:10px 14px;
border:1px solid #d1d5db;
border-radius:8px;
background:white;
}

.billing-filter button{
background:#14532d;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
cursor:pointer;
}

.transaction-table{
background:white;
border:1px solid #e5e7eb;
border-radius:12px;
overflow-x: auto;
}

table{
width:100%;
border-collapse:collapse;
min-width: 600px;
}

thead{
background:#f9fafb;
}

th{
padding:14px 18px;
text-align:left;
border-bottom:1px solid #e5e7eb;
}

td{
padding:14px 18px;
border-bottom:1px solid #f0f0f0;
}

.credit{
color:#16a34a;
font-weight:600;
}

.debit{
color:#dc2626;
font-weight:600;
}

.empty{
text-align:center;
padding:60px;
color:#9ca3af;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
  .billing-page {
    padding: 30px;
  }
}

@media (max-width: 768px) {
  .billing-page {
    padding: 20px;
  }
  .billing-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .billing-filter {
    width: 100%;
    flex-wrap: wrap;
  }
  .search-box {
    width: 100%;
  }
  .search-box input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .billing-header h2 {
    font-size: 22px;
  }
  .billing-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .billing-filter select, 
  .billing-filter button {
    width: 100%;
  }
}