/* Uitgebreid meetdashboard. Alleen deze route; de rekenkern blijft in ons-huis.php. */
.oh-page--metingen { background: #f5f8fb; color: #142742; }
.oh-page--metingen .oh-wrap { max-width: 1440px; padding: 0 28px; }
.ohm-dashboard { padding-bottom: 20px; }
.ohm-dashboard *, .ohm-dashboard *::before, .ohm-dashboard *::after { box-sizing: border-box; }
.ohm-dashboard :is(h1,h2,h3) { color: #142742; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.ohm-dashboard .oh-icon { width: 24px; height: 24px; }
.ohm-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 264px; overflow: hidden; margin: 0 0 16px; padding: 32px; border-radius: 0 0 14px 14px; background: #f1f6fc; }
.ohm-hero > img { position: absolute; z-index: -2; top: 0; right: 0; width: 48%; height: 100%; object-fit: cover; object-position: center 35%; }
.ohm-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#f1f6fc 0%,#f1f6fc 43%,rgba(241,246,252,.7) 58%,rgba(241,246,252,0) 82%); }
.ohm-hero-copy { max-width: 650px; }
.ohm-back { display: inline-block; margin-bottom: 20px; color: #1a6b3c; font-size: .76rem; font-weight: 700; text-decoration: none; }
.ohm-back:hover { text-decoration: underline; }
.ohm-eyebrow { margin: 0 0 8px; color: #1a6b3c; font-size: .73rem; font-weight: 750; letter-spacing: .02em; }
.ohm-hero h1 { margin: 0 0 8px; font-size: clamp(2rem, 3.3vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.ohm-hero p:not(.ohm-eyebrow) { margin: 0 0 16px; max-width: 600px; color: #48607d; font-size: .9rem; line-height: 1.55; }
.ohm-updated { display: inline-flex; align-items: center; gap: 6px; color: #157347; font-size: .7rem; font-weight: 700; }
.ohm-updated.is-current { color: #157347; }
.ohm-updated.is-delayed { color: #a16207; }
.ohm-updated.is-late { color: #b91c1c; }

.ohm-card, .ohm-kpi { min-width: 0; border: 1px solid #e1e9f1; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(28,50,75,.045); }
.ohm-card { padding: 20px; }
.ohm-card h2 { margin: 0 0 4px; font-size: 1.03rem; font-weight: 750; line-height: 1.3; }
.ohm-card-head { margin-bottom: 14px; }
.ohm-card-head p { margin: 0; color: #667b91; font-size: .76rem; line-height: 1.45; }
.ohm-kpis { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.ohm-kpi { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 128px; overflow: hidden; padding: 14px; }
.ohm-kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #168347; background: #e8f5ee; }
.ohm-kpi--sun .ohm-kpi-icon { color: #ee9a00; background: #fff5d8; }
.ohm-kpi--grid .ohm-kpi-icon { color: #358fdf; background: #e8f4ff; }
.ohm-kpi--peak .ohm-kpi-icon { color: #e54865; background: #ffeaf0; }
.ohm-kpi--cost .ohm-kpi-icon { color: #8d62d9; background: #f1ebff; }
.ohm-kpi small, .ohm-kpi strong, .ohm-kpi div > span { display: block; }
.ohm-kpi small { color: #476078; font-size: .7rem; line-height: 1.25; }
.ohm-kpi strong { margin-top: 4px; color: #142742; font-size: clamp(1.08rem, 1.45vw, 1.48rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.ohm-kpi div > span { margin-top: 3px; color: #5d7185; font-size: .65rem; }
.ohm-kpi > svg { width: 100%; height: 28px; margin-top: auto; }
.ohm-kpi > svg path { fill: none; stroke: #f2ad25; stroke-width: 2; vector-effect: non-scaling-stroke; }

.ohm-summary-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 12px; margin-bottom: 12px; }
.ohm-since--wide { grid-column: 1 / -1; }
.ohm-since h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ohm-since h2 small { color: #71859c; font-size: .72rem; font-weight: 500; }
.ohm-since-items { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.ohm-since-items > div { display: grid; grid-template-columns: 26px 1fr; align-items: center; column-gap: 8px; min-width: 0; }
.ohm-since-items > div > span { grid-row: span 2; color: #17a157; }
.ohm-since-items > div:first-child > span, .ohm-since-items > div:last-child > span { color: #eba300; }
.ohm-since-items strong { font-size: 1.08rem; line-height: 1.2; overflow-wrap: anywhere; }
.ohm-since-items small { color: #667b91; font-size: .66rem; line-height: 1.4; }
.ohm-weather { display: flex; flex-direction: column; }
.ohm-weather h2 { display: flex; justify-content: space-between; }
.ohm-weather h2 span { color: #8ca9c5; font-size: 1.6rem; }
.ohm-weather p { margin: 8px 0; font-size: .85rem; line-height: 1.5; }
.ohm-weather small { margin-top: auto; color: #667b91; font-size: .69rem; }

.ohm-two-col, .ohm-three-col { display: grid; gap: 12px; margin-bottom: 12px; }
.ohm-two-col { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ohm-three-col { grid-template-columns: 1.28fr 1fr 1fr; }
.ohm-flow { display: flex; align-items: center; gap: 32px; min-height: 228px; padding: 8px 0; }
.ohm-flow-sources { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ohm-flow-source { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border: 1px solid #e5eaf0; border-radius: 9px; background: #f7fafc; opacity: .58; }
.ohm-flow-source.is-active { opacity: 1; }
.ohm-flow-source--sun.is-active { border-color: #f8dda2; background: #fff9ea; }
.ohm-flow-source--battery.is-active { border-color: #bfe8d1; background: #edf9f2; }
.ohm-flow-source--grid.is-active { border-color: #c9e5ff; background: #f0f8ff; }
.ohm-flow-source > span { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 8px; color: #f0a400; background: #fff4d8; }
.ohm-flow-source--battery > span { color: #19a85b; background: #ddf5e6; }
.ohm-flow-source--grid > span { color: #418fe4; background: #e1f0ff; }
.ohm-flow-source div { min-width: 0; }
.ohm-flow-source small, .ohm-flow-source strong { display: block; }
.ohm-flow-source small { color: #4a617c; font-size: .69rem; }
.ohm-flow-source strong { margin-top: 2px; color: #162842; font-size: 1.06rem; }
.ohm-flow-source i { margin-left: auto; font-size: 1.45rem; font-style: normal; font-weight: 700; }
.ohm-flow-source--sun i { color: #f3b131; }
.ohm-flow-source--battery i { color: #33b66d; }
.ohm-flow-source--grid i { color: #6baef0; }
.ohm-flow-home { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; min-height: 174px; flex: none; border: 1px solid #dfe8f2; border-radius: 12px; background: #f7f9fc; text-align: center; }
.ohm-flow-home > span { color: #527699; }
.ohm-flow-home > span .oh-icon { width: 40px; height: 40px; }
.ohm-flow-home small { margin-top: 6px; color: #4b6178; font-size: .72rem; }
.ohm-flow-home strong { margin-top: 6px; color: #142742; font-size: 1.43rem; letter-spacing: -.04em; }
.ohm-routes { display: flex; flex-wrap: wrap; gap: 6px; }
.ohm-routes span { padding: 5px 8px; border: 1px solid #e3eaf0; border-radius: 999px; background: #f7f9fb; color: #718293; font-size: .64rem; font-weight: 650; }
.ohm-routes span.is-active { border-color: #b9e6cc; background: #edf9f1; color: #126b3b; }
.ohm-caveat { margin: 12px 0 0; color: #6b7d8e; font-size: .68rem; line-height: 1.55; }
.ohm-line-chart, .ohm-price-chart, .ohm-history-chart { width: 100%; }
.ohm-line-chart svg { display: block; width: 100%; height: 182px; }
.ohm-gridline { fill: none; stroke: #e7eef4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ohm-sun-line { fill: none; stroke: #efa900; stroke-width: 2.6; vector-effect: non-scaling-stroke; }
.ohm-axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: #71859a; font-size: .61rem; }
.ohm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; color: #587087; font-size: .68rem; }
.ohm-dot { display: inline-block; width: 9px; height: 9px; flex: none; border-radius: 50%; }
.ohm-dot--sun { background: #f8b92a; }.ohm-dot--battery, .ohm-dot--cheap { background: #2bb367; }.ohm-dot--grid { background: #63acfa; }.ohm-dot--dear { background: #ed5264; }
.ohm-now-strip { display: flex; gap: 8px; margin-top: 14px; }
.ohm-now-strip > span { display: flex; justify-content: space-between; gap: 8px; flex: 1; padding: 9px 10px; border-radius: 8px; background: #f3f7fb; color: #5a7085; font-size: .69rem; }
.ohm-now-strip strong { color: #142742; }
.ohm-empty { display: flex; align-items: center; justify-content: center; min-height: 120px; margin: 0; padding: 16px; border-radius: 8px; background: #f5f8fb; color: #677d90; font-size: .78rem; text-align: center; }

.ohm-price-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.ohm-price-stats > div { padding: 11px; border-radius: 8px; background: #f6f9fc; }
.ohm-price-stats small, .ohm-price-stats strong, .ohm-price-stats span { display: block; }
.ohm-price-stats small { color: #536a82; font-size: .67rem; }
.ohm-price-stats strong { margin: 5px 0; font-size: 1.15rem; letter-spacing: -.025em; }
.ohm-price-stats span { color: #6a7f94; font-size: .64rem; }
.ohm-price-stats > div:nth-child(2) strong { color: #149a56; }
.ohm-price-stats > div:nth-child(3) strong { color: #d44b59; }
.ohm-price-chart svg, .ohm-history-chart svg { display: block; width: 100%; height: 176px; }
.ohm-price-bar--cheap { fill: #48b96f; }.ohm-price-bar--normal { fill: #72b3f2; }.ohm-price-bar--dear { fill: #f06b59; }
.ohm-price-bar.is-now { stroke: #142742; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ohm-price-chart .ohm-legend, .ohm-history-chart .ohm-legend { margin-top: 12px; margin-bottom: 0; }
.ohm-history-bar--sun { fill: #f8b92a; }.ohm-history-bar--grid { fill: #6aaefa; }
.ohm-history-result { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #f4f8fb; }
.ohm-history-result strong { color: #4d6279; font-size: .68rem; }
.ohm-history-result span { margin-left: auto; color: #168b4d; font-size: 1.05rem; font-weight: 800; }
.ohm-history-result small { flex: 1 0 100%; color: #71859a; font-size: .62rem; }
.ohm-period-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 0 0 12px; }
.ohm-period-summary > div { min-width: 0; padding: 9px 10px; border-radius: 8px; background: #f4f8fb; }
.ohm-period-summary small { display: block; color: #596d83; font-size: .66rem; }
.ohm-period-summary strong { display: block; margin-top: 3px; color: #142742; font-size: .95rem; overflow-wrap: anywhere; }
.ohm-comparison-row .ohm-caveat { margin-top: 10px; }
.ohm-results-row { margin-top: 12px; }

.ohm-three-col .ohm-card { min-height: 252px; }
.ohm-table-scroll { width: 100%; overflow-x: auto; }
.ohm-compare { width: 100%; min-width: 370px; border-collapse: collapse; text-align: left; }
.ohm-compare th, .ohm-compare td { padding: 10px 7px; border-bottom: 1px solid #e9eef3; font-size: .68rem; }
.ohm-compare thead { background: #f3f7fb; }
.ohm-compare th { color: #3b5370; font-weight: 700; }
.ohm-compare td { color: #1c3653; font-weight: 650; white-space: nowrap; }
.ohm-measured-list { margin-top: 16px; }
.ohm-measured-list > div { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid #e9eef3; }
.ohm-measured-list small { color: #5c7187; font-size: .7rem; }
.ohm-measured-list strong { font-size: .81rem; white-space: nowrap; }
.ohm-results { display: grid; gap: 8px; margin-top: 12px; }
.ohm-results > div { padding: 10px 12px; border-radius: 9px; background: #f4f8fb; }
.ohm-results small, .ohm-results strong, .ohm-results span { display: block; }
.ohm-results small { color: #526a83; font-size: .66rem; }
.ohm-results strong { margin-top: 3px; color: #138d4a; font-size: 1.15rem; letter-spacing: -.02em; }
.ohm-results span { color: #71859a; font-size: .61rem; }

.ohm-aquarium { margin-bottom: 12px; }
.ohm-aquarium-grid { display: grid; grid-template-columns: 210px minmax(200px,.95fr) minmax(260px,1.2fr); gap: 18px; align-items: stretch; }
.ohm-aquarium-grid > img { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 9px; }
.ohm-aquarium-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ohm-aquarium-facts > div { padding: 12px; border-radius: 8px; background: #f4f8fb; }
.ohm-aquarium-facts small, .ohm-aquarium-facts strong { display: block; }
.ohm-aquarium-facts small { color: #577089; font-size: .65rem; }
.ohm-aquarium-facts strong { margin-top: 8px; font-size: .99rem; overflow-wrap: anywhere; }
.ohm-aquarium-facts .ohm-aquarium-total { grid-column: 1 / -1; background: #e8f5ee; }
.ohm-aquarium-total strong { color: #147a3c; font-size: 1.35rem; }
.ohm-aquarium-facts .ohm-aquarium-year { grid-column: 1 / -1; background: #e8f5ee; }
.ohm-aquarium-year strong { color: #1a6b3c; font-size: 1.18rem; }
.ohm-aquarium-year small:last-child { margin-top: 4px; }
.ohm-aquarium-chart h3 { margin: 0 0 10px; font-size: .8rem; }
.ohm-aquarium-chart svg { display: block; width: 100%; height: 164px; }
.ohm-aquarium-line { fill: none; stroke: #418fe4; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ohm-advice-row { margin-bottom: 12px; }
.ohm-advice-banner { margin: 14px 0 10px; padding: 12px; border: 1px solid #d3ebdc; border-radius: 9px; background: #eef9f2; }
.ohm-advice-banner strong, .ohm-advice-banner small { display: block; }
.ohm-advice-banner strong { color: #117746; font-size: .84rem; }.ohm-advice-banner small { margin-top: 4px; color: #58766a; font-size: .68rem; }
.ohm-advice-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ohm-advice-values > div { display: flex; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 8px; background: #f5f8fb; }
.ohm-advice-values span { color: #5c7088; font-size: .68rem; }.ohm-advice-values strong { color: #142742; font-size: .73rem; text-align: right; }
.ohm-insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.ohm-insight-grid > div { min-width: 0; padding: 12px; border-radius: 8px; background: #f5f8fb; }
.ohm-insight-grid span { color: #38a360; }.ohm-insight-grid small, .ohm-insight-grid strong { display: block; }
.ohm-insight-grid small { margin-top: 4px; color: #627790; font-size: .63rem; line-height: 1.4; }
.ohm-insight-grid strong { margin-top: 8px; color: #142742; font-size: 1.06rem; overflow-wrap: anywhere; }
.ohm-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 18px; padding: 24px 30px; border-radius: 12px; background: #fff0c5; }
.ohm-cta h2 { margin: 0 0 5px; font-size: 1.11rem; }.ohm-cta p { margin: 0; color: #556b82; font-size: .77rem; line-height: 1.5; }
.ohm-cta .btn { flex: none; padding: 13px 18px; border-radius: 9px; background: #f2b51d; color: #13253f; font-size: .79rem; font-weight: 800; text-decoration: none; }
.ohm-cta .btn:hover { background: #e7a900; }
.ohm-archive { margin-bottom: 40px; }
.ohm-archive > summary { padding: 18px 22px; border: 1px solid #dce6ee; border-radius: 12px; background: #fff; color: #1a6b3c; cursor: pointer; font-size: .86rem; font-weight: 700; }
.ohm-archive[open] > summary { margin-bottom: 18px; }
.ohm-archive > summary span { float: right; }

@media (max-width: 1180px) {
    .ohm-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .ohm-three-col { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ohm-three-col > :last-child { grid-column: 1 / -1; }
    .ohm-aquarium-grid { grid-template-columns: 190px minmax(180px,1fr) minmax(230px,1.2fr); gap: 12px; }
}
@media (max-width: 860px) {
    .oh-page--metingen .oh-wrap { padding: 0 16px; }
    .ohm-hero { min-height: 230px; padding: 24px; }
    .ohm-hero > img { width: 44%; }
    .ohm-hero-copy { max-width: 70%; }
    .ohm-summary-grid, .ohm-two-col { grid-template-columns: 1fr; }
    .ohm-aquarium-grid { grid-template-columns: 180px 1fr; }
    .ohm-aquarium-chart { grid-column: 1 / -1; }
    .ohm-aquarium-grid > img { height: 180px; }
}
@media (max-width: 620px) {
    .oh-page--metingen .oh-wrap { padding: 0 12px; }
    .ohm-hero { display: block; min-height: 0; padding: 22px 18px 176px; }
    .ohm-hero-copy { max-width: none; }
    .ohm-hero > img { top: auto; bottom: 0; width: 100%; height: 166px; object-position: center 36%; }
    .ohm-hero::after { background: linear-gradient(180deg,#f1f6fc 0%,#f1f6fc 55%,rgba(241,246,252,.6) 66%,transparent 82%); }
    .ohm-hero h1 { font-size: 2rem; }
    .ohm-hero p:not(.ohm-eyebrow) { font-size: .8rem; }
    .ohm-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .ohm-kpi { min-height: 116px; padding: 12px; }
    .ohm-kpi strong { font-size: 1.07rem; }
    .ohm-card { padding: 16px; }
    .ohm-period-summary { grid-template-columns: 1fr; }
    .ohm-since-items { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    .ohm-three-col { grid-template-columns: 1fr; }
    .ohm-three-col > :last-child { grid-column: auto; }
    .ohm-flow { gap: 10px; }
    .ohm-flow-home { width: 112px; min-height: 160px; }
    .ohm-flow-home strong { font-size: 1rem; }
    .ohm-flow-source { gap: 5px; padding: 7px; }.ohm-flow-source > span { width: 26px; height: 26px; }
    .ohm-flow-source > span .oh-icon { width: 20px; height: 20px; }
    .ohm-flow-source strong { font-size: .83rem; }.ohm-flow-source small { font-size: .61rem; }
    .ohm-aquarium-grid { grid-template-columns: 1fr; }
    .ohm-aquarium-grid > img { height: 190px; }
    .ohm-aquarium-chart { grid-column: auto; }
    .ohm-insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ohm-cta { flex-direction: column; align-items: flex-start; padding: 20px; }
    .ohm-cta .btn { width: 100%; text-align: center; }
}
@media (max-width: 390px) {
    .ohm-price-stats { gap: 4px; }.ohm-price-stats > div { padding: 8px; }
    .ohm-price-stats strong { font-size: .94rem; }
    .ohm-flow-home { width: 98px; }.ohm-flow-source i { font-size: 1rem; }
}