.oee-container {
	position: relative;
	width: 100%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 1.5em 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	border-radius: 8px;
	overflow: hidden;
}

.oee-theme-light {
	background: #f2f3f5;
	color: #2b2f33;
	border: 1px solid #dcdfe3;
}

.oee-theme-dark {
	background: #17181a;
	color: #e6e6e6;
}

.oee-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 14px;
	padding: 12px 14px 6px;
}

.oee-header-main {
	flex: 1 1 220px;
	min-width: 0;
}

.oee-title {
	font-size: 15px;
	font-weight: 700;
}

.oee-updated {
	font-size: 11px;
	white-space: nowrap;
	min-height: 1.3em;
}

.oee-model-run {
	font-size: 11px;
	white-space: nowrap;
	min-height: 1.3em;
}

.oee-theme-light .oee-title { color: #23262a; }
.oee-theme-light .oee-updated { color: #8a8f94; }
.oee-theme-light .oee-model-run { color: #8a8f94; }
.oee-theme-dark .oee-title { color: #f0f0f0; }
.oee-theme-dark .oee-updated { color: #9a9a9a; }
.oee-theme-dark .oee-model-run { color: #9a9a9a; }

.oee-model-picker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
}

.oee-model-picker label {
	white-space: nowrap;
}

.oee-model-select {
	max-width: 300px;
	padding: 3px 6px;
	font-size: 12px;
	border-radius: 4px;
}

.oee-theme-light .oee-model-select {
	background: #fafafa;
	border: 1px solid #ccc;
	color: #2b2f33;
}

.oee-theme-dark .oee-model-select {
	background: #2a2b2f;
	border: 1px solid #4a4b50;
	color: #e6e6e6;
}

.oee-model-fixed {
	font-size: 11.5px;
	padding: 3px 8px;
	border-radius: 4px;
}

.oee-theme-light .oee-model-fixed { background: #f2f2f2; color: #555; }
.oee-theme-dark .oee-model-fixed { background: rgba(255,255,255,0.08); color: #cfcfcf; }

.oee-model-status {
	font-size: 11px;
	min-height: 1.3em;
}

.oee-theme-light .oee-model-status { color: #767676; }
.oee-theme-dark .oee-model-status { color: #a0a0a0; }

.oee-model-status-error {
	color: #d14343 !important;
}

.oee-model-origin {
	padding: 0 14px 10px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-align: center;
}

.oee-theme-light .oee-model-origin { color: #5b6169; }
.oee-theme-dark .oee-model-origin { color: #a7acb2; }

/*
 * Tabbladen: aaneengesloten gekleurde "blokken" (zoals bv. bekende
 * dashboard-tabstrips) i.p.v. losse knoppen met een dunne onderlijn. Actief
 * tabblad = volle accentkleur met witte tekst; niet-actief = lichte tint van
 * diezelfde kleur; een dun wit/licht lijntje scheidt de blokken van elkaar.
 */
.oee-tabs {
	display: flex;
	flex-wrap: wrap;
}

.oee-tab {
	appearance: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 11px 16px;
	margin: 0;
	white-space: nowrap;
	text-align: center;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.oee-theme-light .oee-tab {
	background: #f5dedb;
	color: #4c5157;
	border-right: 1px solid #ffffff;
}
.oee-theme-light .oee-tab:hover { background: #eeccc6; color: #2b2f33; }
.oee-theme-light .oee-tab.is-active { background: #c0392b; color: #ffffff; }

.oee-theme-dark .oee-tab {
	background: rgba(255, 106, 90, 0.14);
	color: #cfcfcf;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.oee-theme-dark .oee-tab:hover { background: rgba(255, 106, 90, 0.22); color: #f0f0f0; }
.oee-theme-dark .oee-tab.is-active { background: #c0392b; color: #ffffff; }

/*
 * Tabblad-groep (bv. "Wind", "Onweer", "Sneeuw"): één blok in de tabstrip
 * dat, i.p.v. een tabblad direct te tonen, een dropdown opent met de
 * subtabbladen erin. Zelfde kleuren/vormgeving als de gewone tabblokken,
 * plus een pijltje. Kleuren met !important: sommige WordPress-thema's
 * stylen generieke [aria-expanded]/[role="menu"]-elementen zelf (bv. voor
 * eigen accordions of navigatiemenu's) — dat mag deze knop/dropdown niet
 * overnemen.
 */
.oee-tab-group-wrap {
	position: relative;
	display: flex;
}

.oee-tab-group {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 1 1 auto;
	border-radius: 0 !important;
	margin: 0 !important;
	border: none !important;
}

.oee-theme-light .oee-tab-group {
	background: #f5dedb !important;
	color: #4c5157 !important;
	border-right: 1px solid #ffffff !important;
}
.oee-theme-light .oee-tab-group:hover { background: #eeccc6 !important; color: #2b2f33 !important; }
.oee-theme-light .oee-tab-group.is-active { background: #c0392b !important; color: #ffffff !important; }

.oee-theme-dark .oee-tab-group {
	background: rgba(255, 106, 90, 0.14) !important;
	color: #cfcfcf !important;
	border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
}
.oee-theme-dark .oee-tab-group:hover { background: rgba(255, 106, 90, 0.22) !important; color: #f0f0f0 !important; }
.oee-theme-dark .oee-tab-group.is-active { background: #c0392b !important; color: #ffffff !important; }

.oee-tab-caret {
	font-size: 9px;
	line-height: 1;
	transition: transform 0.15s ease;
}

.oee-tab-group[aria-expanded="true"] .oee-tab-caret {
	transform: rotate(180deg);
}

.oee-tab-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 210px;
	max-width: calc(100vw - 24px);
	margin-top: 6px;
	padding: 6px;
	border-radius: 10px;
}

.oee-tab-dropdown[hidden] {
	display: none !important;
}

.oee-tab-dropdown .oee-tab {
	width: 100%;
	text-align: left;
	border-right: none !important;
	margin: 0 !important;
	padding: 9px 11px !important;
	border-radius: 6px !important;
	background: transparent !important;
	font-weight: 500;
}

.oee-theme-light .oee-tab-dropdown {
	background: #ffffff !important;
	border: 1px solid rgba(20, 20, 25, 0.14);
	box-shadow: 0 8px 22px rgba(20, 20, 25, 0.18);
}

.oee-theme-dark .oee-tab-dropdown {
	background: #26272b !important;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}

.oee-theme-light .oee-tab-dropdown .oee-tab { color: #4c5157 !important; }
.oee-theme-dark .oee-tab-dropdown .oee-tab { color: #cfcfcf !important; }

.oee-theme-light .oee-tab-dropdown .oee-tab:hover { background: #f2f3f5 !important; color: #2b2f33 !important; }
.oee-theme-dark .oee-tab-dropdown .oee-tab:hover { background: rgba(255, 255, 255, 0.08) !important; color: #f0f0f0 !important; }

.oee-theme-light .oee-tab-dropdown .oee-tab.is-active {
	background: #fbe9e7 !important;
	color: #c0392b !important;
	font-weight: 700;
}

.oee-theme-dark .oee-tab-dropdown .oee-tab.is-active {
	background: rgba(255, 106, 90, 0.18) !important;
	color: #ff6a5a !important;
	font-weight: 700;
}

.oee-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 8px 14px;
	font-size: 11.5px;
}

.oee-theme-light .oee-legend {
	color: #4c5157;
	background: #f7f9fb;
	border-top: 1px solid #eceef0;
}

.oee-theme-dark .oee-legend {
	color: #cfcfcf;
	background: rgba(255, 255, 255, 0.045);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.oee-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.oee-legend-item[hidden] {
	display: none;
}

.oee-swatch {
	display: inline-block;
	width: 16px;
	height: 3px;
	border-radius: 2px;
}

/* Kleurvlakje voor de dynamische categorie-legende (verdelings-/kans-tabbladen),
   i.p.v. het dunne lijntje dat de spaghetti-tabbladen gebruiken. */
.oee-swatch-cat {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

.oee-legend-dynamic[hidden],
.oee-legend-standard[hidden] {
	display: none;
}

.oee-legend-dynamic {
	display: flex;
}

.oee-swatch-oper { background: #e60012; }
.oee-swatch-ctrl { background: #0a22e6; }
.oee-swatch-member { background: #347d3c; opacity: 0.8; }
.oee-swatch-mean { background: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px); }

.oee-theme-dark .oee-swatch-oper { background: #ff4d4d; }
.oee-theme-dark .oee-swatch-ctrl { background: #6b86ff; }
.oee-theme-dark .oee-swatch-member { background: #6cc37d; opacity: 0.7; }
.oee-theme-dark .oee-swatch-mean { background: repeating-linear-gradient(90deg, #e6e6e6 0 2px, transparent 2px 5px); }

.oee-scale-viewport {
	/* Géén eigen scroll/touch-gedrag meer (overflow, touch-action, ...): de
	   kaart heeft geen eigen, onafhankelijke zoom/pan meer — ze staat gewoon
	   "vast" in de pagina, en pinch-zoomt/scrollt gewoon MEE als onderdeel
	   van de pagina (native browserzoom), niet los ervan. Zie .oee-scale-inner
	   hieronder voor waarom dit element toch blijft bestaan. */
	display: block;
	width: 100%;
}

.oee-scale-inner {
	/* De volledige kaart (koptekst, tabbladen, grafiek, legende, ...) wordt
	   hierin op een vaste, "desktop-brede" breedte opgebouwd (ensemble.js,
	   resize()) en dan als GEHEEL via transform:scale() verkleind getoond
	   zodat ze past op een smaller scherm — dat is een ÉÉNMALIGE, statische
	   schaling (geen interactieve/eigen pinch-zoom meer): ze zorgt er enkel
	   voor dat tekst (bv. de dagkoppen) altijd voldoende ruimte heeft en dus
	   nooit over elkaar komt te staan, ongeacht schermbreedte. Wil je verder
	   inzoomen, dan gebruik je gewoon de normale pinch-zoom van de browser op
	   de hele pagina — die kaart zoomt daar dan ook gewoon in mee, als
	   onderdeel van de pagina. Sommige thema's passen globaal een
	   `max-width: 100%`-reset toe op de inhoud van een bericht/pagina, wat
	   deze vaste breedte zou breken (en zo de dagkoppen weer over elkaar zou
	   doen komen te staan) — vandaar de override. */
	max-width: none !important;
	transform-origin: top left;
}

.oee-canvas {
	display: block;
	margin-top: 12px;
	/* Belangrijk: NIET width:100% — de breedte/hoogte worden expliciet door
	   ensemble.js gezet (resize()), los van de werkelijke schermbreedte,
	   zodat de grafiek altijd op een leesbare resolutie getekend wordt. De
	   verkleinde weergave gebeurt niet op de canvas apart, maar op de hele
	   omvattende .oee-scale-inner (zie hierboven). Sommige thema's passen
	   globaal `img, canvas { max-width: 100% }` toe (responsive media) —
	   dat zou deze aanpak breken, vandaar de override. */
	max-width: none !important;
	cursor: crosshair;
}

.oee-tooltip {
	position: absolute;
	z-index: 5;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
	line-height: 1.5;
	pointer-events: none;
	min-width: 180px;
	max-width: 240px;
}

.oee-tooltip[hidden] {
	display: none;
}

.oee-theme-light .oee-tooltip {
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(20, 20, 25, 0.12);
	color: #2b2f33;
	box-shadow: 0 4px 14px rgba(20, 20, 25, 0.12);
}

.oee-theme-dark .oee-tooltip {
	background: rgba(20, 20, 22, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #f0f0f0;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.oee-tt-title {
	font-weight: 700;
	margin-bottom: 4px;
}

.oee-tt-row {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.oee-tt-row span {
	flex: 1 1 auto;
	opacity: 0.8;
}

.oee-tt-row b {
	font-weight: 600;
	margin-left: 8px;
}

.oee-tt-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.oee-attribution {
	padding: 4px 14px 10px;
	font-size: 10.5px;
}

.oee-theme-light .oee-attribution { color: #8a8f94; }
.oee-theme-dark .oee-attribution { color: #9a9a9a; }

.oee-theme-light .oee-attribution a { color: #2f6497; text-decoration: none; }
.oee-theme-dark .oee-attribution a { color: #9fc4ec; text-decoration: none; }
.oee-attribution a:hover { text-decoration: underline; }

.oee-error {
	padding: 14px 16px;
	border-radius: 6px;
	background: #3a2020;
	color: #f3caca;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
}

/*
 * Breedte-varianten voor de shortcode: [meteogram_ensemble width="full|wide|900px|80%"]
 */
.oee-width-full,
.oee-width-wide {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.oee-width-full {
	max-width: 100vw;
	border-radius: 0;
}

.oee-width-wide {
	max-width: 1400px;
}

.oee-width-custom {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Vroeger stond hier een @media (max-width:600px)-blok met verkleinde
   lettergroottes/padding voor smalle schermen. Dat is niet meer nodig: de
   hele kaart (.oee-scale-inner) wordt nu altijd op een vaste, "desktop"-
   breedte opgebouwd (zie resize() in ensemble.js) en als GEHEEL via
   transform:scale() verkleind getoond op een smal scherm — dat verkleint
   alles (tekst, padding, iconen, ...) al evenredig mee, dus aparte
   mobiele lettergroottes zouden nu net een inconsistent (te klein/te groot
   t.o.v. de rest) resultaat geven. */

/* Mouseover in de stijl van Weer Meters: donker venster, grijze labels, vette waarden. */
.oee-tooltip,
.oee-theme-light .oee-tooltip,
.oee-theme-dark .oee-tooltip {
	background: #1c2430;
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 12.5px;
	line-height: 1.55;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}
.oee-tt-title {
	color: #fff;
}
.oee-tt-row span {
	opacity: 1;
	color: #c4cedb;
}
.oee-tt-row b {
	color: #fff;
	font-weight: 700;
}