.tab-bar
{
	display: flex;
	gap: 0;
	margin: 20px 0 0 0;
	border-bottom: 2px solid black;
}
.tab
{
	padding: 8px 20px;
	background: white;
	border: 2px solid black;
	border-bottom: none;
	font-family: Monaco;
	font-size: 14px;
	cursor: pointer;
	margin-right: 4px;
	transition: all 0.15s ease;
}
.tab.active
{
	background: black;
	color: white;
}
#view-chart
{
	padding-top: 0;
}
#view-table
{
	padding-top: 16px;
}
.table-scroll
{
	overflow-x: scroll;
	width: 100%;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.table-scroll::-webkit-scrollbar
{
	display: none;
}
.table-mirror-scroll
{
	overflow-x: scroll;
	width: 100%;
	height: 18px;
	position: sticky;
	bottom: 0;
	background: lightblue;
	padding: 4px 0 0 0;
	margin-top: 8px;
}
.table-mirror-scroll::-webkit-scrollbar
{
	height: 12px;
}
.table-mirror-scroll::-webkit-scrollbar-track
{
	background: #ddd;
	border: 1px solid #bbb;
}
.table-mirror-scroll::-webkit-scrollbar-thumb
{
	background: #222;
	border-radius: 2px;
}
.table-mirror-inner
{
	height: 1px;
}
#cal-table
{
	border-collapse: collapse;
	font-family: Monaco;
	font-size: 13px;
	white-space: nowrap;
}
#cal-table th, #cal-table td
{
	border: 1px solid #bbb;
	text-align: center;
	padding: 2px 10px;
	min-width: 44px;
}
#cal-table th
{
	background: #222;
	color: white;
	font-weight: bold;
	position: sticky;
	top: 0;
}
#cal-table td.row-header
{
	background: #f0f0f0;
	font-weight: bold;
	color: #333;
	position: sticky;
	left: 0;
	z-index: 1;
}
#cal-table td.avg-row
{
	background: #e0e0e0;
	font-weight: bold;
}
#cal-table td.empty
{
	background: #f8f8f8;
	color: #bbb;
}
#cal-table th.year-header
{
	background: #000;
	font-size: 12px;
	padding: 4px 5px;
}
#cal-table th.month-header
{
	background: #444;
	font-size: 10px;
}
.controls
{
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 20px 0;
	flex-wrap: wrap;
}
.group-buttons
{
	display: flex;
	gap: 8px;
}
.nav-arrows
{
	display: flex;
	align-items: center;
	gap: 12px;
}
.nav-arrows span
{
	font-family: Monaco;
	font-size: 15px;
	min-width: 160px;
	text-align: center;
}
.button.active
{
	background-color: black;
	color: white;
}
.chart-container
{
	width: 100%;
	background: white;
	border: 2px solid black;
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
}
canvas
{
	display: block;
	width: 100%;
}
.stats-row
{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}
.stat-box
{
	background: white;
	border: 2px solid black;
	padding: 14px 22px;
	font-family: Monaco;
	font-size: 14px;
	line-height: 1.8;
}
.stat-label
{
	color: #666;
	font-size: 12px;
}
.stat-value
{
	font-size: 22px;
	font-weight: bold;
}