/* OAKK historische rendementen — overzicht + jaardetail */

.oakkRend .oakkRendBijgewerkt {
	margin: 2px 0 10px;
	font-size: 12px;
	font-weight: 600;
	color: #007A84;
	text-transform: uppercase;
	letter-spacing: .5px;
}

.oakkRend .oakkRendUitleg,
.oakkRend .oakkRendFaq {
	margin-top: 28px;
}

.oakkRend .oakkRendFaq h3 {
	margin: 18px 0 4px;
	font-size: 1.05rem;
	color: #1B2D4F;
}

.oakkRend .oakkRendFaq p {
	margin: 0;
	line-height: 1.6;
}

.oakkRend .ytdBadge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .5px;
	background: #e0f2f4;
	color: #007A84;
	vertical-align: middle;
}

/* ── Tabellen (overzicht + dagwaarden) ─────────────────────────────────────── */
.oakkRend table.oakkRendTabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin: 8px 0 24px;
}

.oakkRend table.oakkRendTabel thead th {
	background: #1B2D4F;
	color: rgba(255, 255, 255, .85);
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 9px 12px;
	text-align: right;
	white-space: nowrap;
}

.oakkRend table.oakkRendTabel thead th:first-child { text-align: left; }

.oakkRend table.oakkRendTabel tbody tr { border-bottom: 1px solid #D8E2EE; }
.oakkRend table.oakkRendTabel tbody tr:hover { background: #F7F9FC; }

.oakkRend table.oakkRendTabel tbody td {
	padding: 8px 12px;
	text-align: right;
	white-space: nowrap;
}

.oakkRend table.oakkRendTabel tbody td:first-child { text-align: left; font-weight: 500; }
.oakkRend table.oakkRendTabel td.pos { color: #007A84; }
.oakkRend table.oakkRendTabel td.neg { color: #E05252; }
.oakkRend table.oakkRendTabel td.leeg { color: #94a3b8; }

.oakkRend .weekendRij td { color: #6B7A99; font-style: italic; }
.oakkRend .weekendBadge {
	font-size: 9px;
	background: #EEF2FF;
	color: #6366F1;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 5px;
	font-style: normal;
	font-weight: 500;
	vertical-align: middle;
}

/* ── Jaarnavigatie ──────────────────────────────────────────────────────────── */
.oakkRendJaarNav { margin: 4px 0 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.oakkRendJaarNav a,
.oakkRendJaarNav span.active {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	border: 1.5px solid #D8E2EE;
	background: #fff;
	color: #6B7A99;
	text-decoration: none;
}

.oakkRendJaarNav a:hover { border-color: #009AA6; color: #009AA6; }
.oakkRendJaarNav span.active { background: #1B2D4F; border-color: #1B2D4F; color: #fff; }
.oakkRendJaarNav a.terug { border: none; background: none; margin-left: auto; color: #009AA6; }

/* ── Filters ────────────────────────────────────────────────────────────────── */
.oakkRendFilters { display: flex; flex-wrap: wrap; gap: 20px; margin: 8px 0 16px; }
.oakkRendFilters .filterGroep { display: flex; flex-direction: column; gap: 6px; }

.oakkRendFilters .filterLabel {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #6B7A99;
}

.oakkRendFilters .knopGroep { display: flex; gap: 4px; flex-wrap: wrap; }

.oakkRend .filterKnop {
	padding: 5px 13px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border: 1.5px solid #D8E2EE;
	background: #fff;
	color: #6B7A99;
}

.oakkRend .filterKnop:hover { border-color: #009AA6; color: #009AA6; }
.oakkRend .filterKnop.active { background: #1B2D4F; border-color: #1B2D4F; color: #fff; }

.oakkRend .filterKnop .dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}

/* ── Stats ──────────────────────────────────────────────────────────────────── */
.oakkRendStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	margin: 4px 0 16px;
}

.oakkRendStats .statKaart {
	background: #fff;
	border: 1px solid #D8E2EE;
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.oakkRendStats .statLabel { font-size: 11px; color: #6B7A99; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.oakkRendStats .statWaarde { font-size: 20px; font-weight: 600; color: #1B2D4F; }
.oakkRendStats .statWaarde.pos { color: #007A84; }
.oakkRendStats .statWaarde.neg { color: #E05252; }
.oakkRendStats .statSub { font-size: 11px; color: #6B7A99; }

/* ── Kaarten (grafiek + tabel) ──────────────────────────────────────────────── */
.oakkRendKaart {
	background: #fff;
	border: 1px solid #D8E2EE;
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 16px;
}

.oakkRendKaart .kaartKop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid #D8E2EE;
	font-weight: 600;
	font-size: 14px;
	color: #1B2D4F;
}

.oakkRendKaart .kaartSub { font-size: 12px; font-weight: 400; color: #6B7A99; }
.oakkRendKaart .kaartGrafiek { padding: 14px 14px 10px; }
.oakkRendKaart .kaartTabel { overflow-x: auto; }
.oakkRendKaart table.oakkRendTabel { margin: 0; }

@media (max-width: 640px) {
	.oakkRendFilters { gap: 12px; }
	.oakkRendJaarNav a.terug { margin-left: 0; }
}