/**
 * BILLING MODULE CSS
 * Styles for billing tables, payment status, and account management
 */

/* --- BILLING TABLE (Modernized) --- */
.bill-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; margin-top: 5px; }
.bill-table th { text-align: left; font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; padding: 0 20px 10px 20px; font-weight: 700; }
.bill-table tbody tr { background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.03); transition: var(--transition); border-radius: 16px; }
.bill-table tbody tr:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.bill-table td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.bill-table td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.bill-table td { padding: 18px 20px; font-size: 0.9rem; vertical-align: middle; border: none; color: var(--text-main); border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
.bill-table td:first-child { border-left: 1px solid #f1f5f9; } 
.bill-table td:last-child { border-right: 1px solid #f1f5f9; }

/* Payment Status Buttons */
.btn-status-due { 
    cursor: pointer; border: 1px solid #fecaca; background: #fff1f2; color: #991b1b; 
    padding: 8px 16px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; 
    transition: var(--transition); display: inline-block; width: 90px; text-align:center; 
}
.btn-status-due:hover { background: #fecaca; transform: scale(1.05); }

.btn-status-paid { 
    cursor: pointer; border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; 
    padding: 8px 16px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; 
    transition: var(--transition); display: inline-block; width: 90px; text-align:center; 
}
.btn-status-paid:hover { background: #a7f3d0; transform: scale(1.05); }

.status-badge { padding: 6px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.status-paid { background: #d1fae5; color: #065f46; }
.status-unpaid { background: #fee2e2; color: #991b1b; }