.totals{
    color:#65B22E;
}

.content-card-content h3{
    font-size:2rem;
    text-align:center;
}

canvas{
    width:100% !important;
}

.icon-grid .tabChoice{
    cursor:pointer;
}

.tabChoice.checked .icon-tile-icon{
    background:#65B22E;
}

/* Smaller chart containers */
.content-card-content div[style*="height:220px"]{
    height:180px !important;
}

/* Gender chart container */
#clubsAndSocsTab .content-card.span-6 .content-card-content div[style*="height:220px"]{
    height:300px !important;
}

@media (max-width:768px){

    .content-card-content div[style*="height:220px"]{
        height:220px !important;
    }

    #clubsAndSocsTab .content-card.span-6 .content-card-content div[style*="height:220px"]{
        height:350px !important;
    }
}

.chartSummary { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; margin: .75rem 0 0; }
.chartSummary-label { font-weight: 600; }
.chartSummary-value { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.chartSummary-percent { opacity: .7; }

.dashboard-tabs-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.5rem 0;
}

.dashboard-tabs {
	--tab-primary: #512179;
	--tab-secondary: #efe6f5;
	position: relative;
	display: inline-flex;
	background-color: #fff;
	box-shadow: 0 0 1px 0 rgba(81, 33, 121, 0.15), 0 6px 12px 0 rgba(81, 33, 121, 0.15);
	padding: 0.5rem;
	border-radius: 99px;
	height: 65px;
}

.dashboard-tabs input[type="radio"] {
	display: none;
}

.dashboard-tabs .tab {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 48px;
	width: 210px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #444;
	border-radius: 99px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease-in;
}

.dashboard-tabs .tab i {
	font-size: 0.9rem;
}

.dashboard-tabs input[type="radio"]:checked + label {
	color: var(--tab-primary);
}

.dashboard-tabs .glider {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
	height: 48px;
	width: 210px;
	background-color: var(--tab-secondary);
	border-radius: 99px;
	transition: transform 0.25s ease-out;
}

#radio-clubsSocs:checked ~ .glider { transform: translateX(0); }
#radio-volunteering:checked ~ .glider { transform: translateX(210px); }
#radio-studentVoice:checked ~ .glider { transform: translateX(420px); }
#radio-other:checked ~ .glider { transform: translateX(630px); }

.dashboard-projects-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.dashboard-tabs {
		overflow-x: auto;
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	/* The glider's translateX values assume tabs sit edge-to-edge with no
	   wrapping; that breaks once the bar scrolls, so fall back to a plain
	   background highlight on the active tab instead of animating it. */
	.dashboard-tabs .glider {
		display: none;
	}

	.dashboard-tabs input[type="radio"]:checked + label {
		background-color: var(--tab-secondary);
	}
}