* {
	box-sizing: border-box;
}

.body-header {
	text-align: center;
	margin-bottom: 1rem;
}

.body-header h1 {
	margin: 0;
	font-size: 1.8rem;
}

.updated-date {
	display: block;
	text-align: center;
	margin-top: 0.25rem;
	font-size: 0.95rem;
	color: #555;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #ffffff;
	font-family: 'Inter', sans-serif;
}

main {
	flex: 1;
	padding: 20px;
	width: 100%;
	max-width: none;
	margin: 0;
	overflow-x: hidden;
}

table {
	width: 100%;
	border-collapse: separate;
	/* Essential for border-radius to work on the table */
	border-radius: 10px;
	/* Adjust the value for desired rounding */
	border: 1px solid #ccc;
	/* Add a border for visibility */
	overflow: hidden;
	/* Important to clip content at the rounded corners */
}

table td, table th {
	border-bottom: 1px solid #ccc;
	padding: 10px;
}

/* Remove border from last row cells */
table tr:last-child td {
	border-bottom: 1px solid #ccc;
}

/* Remove border from last row in thead (in case multiple header rows exist) */
table tr:last-child th {
	border-bottom: 1px solid #ccc;
}

th {
	background-color: #f0f0f0;
	text-align: left;
}

.unpaid {
	color: red;
}

.paid {
	color: green;
}

ul {
	list-style-type: disc;
	padding-left: 20px;
}

label {
	display: block;
	margin-bottom: 10px;
}

.amount {
	text-align: right;
}

.center {
	text-align: center;
}

.total {
	text-align: right;
	font-weight: bold;
}

.total-red {
	text-align: right;
	font-weight: bold;
	color: indianred;
}

.total-label-blue {
	text-align: left;
	font-weight: bold;
	color: dodgerblue;
}

.light-green {
	background-color: #d4edda;
}

.orange {
	background-color: #ffe5b4;
}

.red {
	background-color: #f8d7da;
}

.gray {
	background-color: #cccccc;
	/* Negative utilization */
	color: black;
}

.dark-red {
	background-color: #b30000;
	/* Dark red for over-limit */
	color: white;
}

.greenish-red {
	background-color: yellowgreen;
	/* Amber/orange */
	color: black;
}

.green {
	background-color: #d4edda;
	/* Soft green */
	color: black;
}

/* Style for the total row label cell */
.total {
	font-weight: bold;
	background-color: #f2f2f2;
	/* light gray background */
}

/* Style for the numeric cells in the total row */
.total-cell {
	font-weight: bold;
	background-color: #f9f9f9;
	/* slightly lighter gray for contrast */
}