/* SlimHuys v2 — UI styling, in lijn met .agent/v2/templates/. */
:root {
--mist:#ECFAF3; --munt:#B8EBD2; --blad:#4FCB8E; --slim:#22B36B;
--spar:#0E7A47; --donker:#04342C; --nacht:#042E1D; --crème:#F7FAF8;
--steen:#5F5E5A; --grijs:#F1EFE8;
--line:rgba(4,46,29,0.08); --line-2:rgba(4,46,29,0.14);
--rood:#A32D2D; --rood-bg:#FCEBEB;
--info:#185FA5; --info-bg:#E6F1FB;
--warn-bg:#FAEEDA; --duur:#BA7517;
--paars:#534AB7; --paars-bg:#EEEDFE;
--neg:#3B82F6; --neg-soft:#A8C8F2;
/* Solar-token voor PV-productie-visualisaties (KPI's + chart-shadows).
Apart van --zon dat als fallback in een combo-chart-export-bar zit. */
--solar:#F5C84C; --solar-soft:#FCE8A8;
/* Donkere zon-tint voor dashed forecast-lijnen die over gele bars
lopen (combo-chart Dashboard + tarieven-overlay). #F5C84C op #F5C84C
was onleesbaar. */
--solar-line:#8B5A2B;
/* Site-brede heat-palette voor prijsniveaus — overal gelijk aan de
homepage-heatmap zodat goedkoop=groen, duur=rood, negatief=blauw
consistent visueel betekenis hebben. */
--heat-cold:#3B82F6; /* prijs < 0 → blauw */
--heat-cheap-1:#9FE1CB; /* very_low / ≤p25 — lichtmint */
--heat-cheap-2:#5DCAA5; /* low / ≤p50 — mint */
--heat-mid:#FAC775; /* medium / ≤p75 — geel */
--heat-warm:#EF9F27; /* high / ≤p90 — oranje */
--heat-hot:#D85A30; /* peak / >p90 — rood */
/* Semantic surface-tokens — vervangen door dark-mode-overrides hieronder.
Default = light. Brand-tokens (slim/munt/spar) blijven gelijk. */
--bg:var(--crème); /* page background */
--surface:#ffffff; /* card backgrounds */
--surface-alt:var(--grijs); /* subtle row-stripe / inset blocks */
--text:var(--nacht); /* primary text */
--text-muted:var(--steen); /* secondary text */
--text-on-dark:#ffffff; /* tekst op donkere achtergrond (topbar) */
--border:var(--line);
--border-strong:var(--line-2);
--shadow-card:0 1px 3px rgba(4,46,29,0.05);
--shadow-modal:0 24px 48px rgba(4,46,29,0.18);
}
/* Dark-mode palette — door getoggled. Brand-
kleuren (slim, munt, spar) blijven hetzelfde voor herkenbaarheid;
alleen surface/text/border-tokens flippen + een paar accent-tints
gaan donkerder. Deze block laden we lui (= alleen-toegepast als de
selector hit). Geen JS-flash bij eerste paint dankzij de inline
theme-init in de Blade-shell. */
[data-theme="dark"] {
--bg:#0d1715;
--surface:#162421;
--surface-alt:#1f2c29;
--text:#e6f4ec;
--text-muted:#a8b8b2;
--text-on-dark:#e6f4ec;
--mist:#1a2d27; /* "subtle accent strip" — was bijna-wit */
--grijs:#1f2c29;
--crème:#0d1715; /* legacy alias = same as --bg in dark */
/* Brand-tokens (--donker/--nacht/--steen) blijven hun originele dark-
hex behouden; ze worden gebruikt als BACKGROUND op topbar/heatmap/
buttons/etc. Tekst is geconverteerd naar `color:var(--text)` (sed
migration 2026-05-10) zodat dark-mode-flip via --text werkt zonder
bg-elementen onbedoeld licht te maken. */
--spar:#7fdbb0; /* link-color, bumped contrast op donker */
--line:rgba(255,255,255,0.08);
--line-2:rgba(255,255,255,0.14);
--rood-bg:#3a1818;
--info-bg:#0f2944;
--warn-bg:#3a2912;
--paars-bg:#1c1a3a;
--shadow-card:0 1px 3px rgba(0,0,0,0.4);
--shadow-modal:0 24px 48px rgba(0,0,0,0.6);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body, #app { min-height:100vh; }
/* Safety-net tegen horizontale scroll: voorkomt dat één breed element de
hele page mee-versleept op kleine viewports. Individuele charts/tables
regelen hun eigen overflow via .table-scroll / chart-specifieke rules. */
html, body { overflow-x:hidden; max-width:100vw; }
body {
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
color:var(--text);
background:var(--crème);
-webkit-font-smoothing:antialiased;
line-height:1.5;
font-size:14px;
}
a { color:var(--spar); text-decoration:none; }
a:hover { text-decoration:underline; }
/* ============== APP LAYOUTS ============== */
/* Public layout (auth-pages + landing): topbar + main + footer */
.public-layout { display:flex; flex-direction:column; min-height:100vh; }
header.topbar {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:16px 28px;
}
.topbar-inner {
max-width:1200px; margin:0 auto;
display:flex; align-items:center; justify-content:space-between;
}
.topbar nav { display:flex; gap:6px; align-items:center; }
.topbar nav a {
color:rgba(255,255,255,0.85); padding:8px 14px; border-radius:8px;
font-size:13px; font-weight:500;
}
.topbar nav a:hover { color:#fff; background:rgba(255,255,255,0.06); text-decoration:none; }
.topbar nav a.is-active,
.topbar nav a[aria-current="page"] { color:#fff; background:rgba(255,255,255,0.10); }
.topbar nav a.btn-cta { background:var(--slim); color:#fff; }
.topbar nav a.btn-cta:hover { background:var(--blad); color:var(--text); }
/* Topbar Leveranciers-menu — knop met ▾ + dropdown-paneel daaronder. */
.topbar nav .nav-menu { position:relative; }
.topbar nav .nav-trigger {
display:inline-flex; align-items:center; gap:6px;
background:transparent; border:0; cursor:pointer;
color:rgba(255,255,255,0.85); padding:8px 14px; border-radius:8px;
font-size:13px; font-weight:500; font-family:inherit;
}
.topbar nav .nav-trigger:hover,
.topbar nav .nav-menu.is-open .nav-trigger { color:#fff; background:rgba(255,255,255,0.06); }
.topbar nav .nav-caret { transition:transform 0.15s; opacity:0.7; }
.topbar nav .nav-menu.is-open .nav-caret { transform:rotate(180deg); opacity:1; }
/* Panel default verborgen; alleen zichtbaar als parent .is-open heeft. De
SPA-versie unmount via v-if dus is hier immuun voor; voor server-rendered
Blade-pages is dit dé show/hide-mechaniek. */
.topbar nav .nav-menu .nav-panel,
.topbar nav .user-menu .nav-panel { display:none; }
.topbar nav .nav-menu.is-open .nav-panel,
.topbar nav .user-menu.is-open .nav-panel { display:flex; }
.topbar nav .nav-panel {
position:absolute; top:calc(100% + 6px); right:0;
background:var(--surface); border:1px solid var(--line); border-radius:12px;
box-shadow:0 8px 24px rgba(4,46,29,0.18);
min-width:240px; padding:6px; z-index:50;
flex-direction:column;
}
.topbar nav .nav-panel a {
color:var(--text); padding:8px 12px; border-radius:8px;
font-size:13px; font-weight:500; text-decoration:none;
background:transparent;
}
.topbar nav .nav-panel a:hover { background:var(--mist); color:var(--text); }
.topbar nav .nav-panel hr {
border:0; border-top:1px solid var(--line); margin:6px 4px;
}
/* User-menu — avatar-chip met dropdown voor logged-in state. Hergebruikt
de generieke .nav-panel-styling; eigen .user-* classes voor specifiek
item-rendering (header met naam/email, logout-knop). */
.topbar nav .user-menu { position:relative; }
.topbar nav .user-trigger {
display:inline-flex; align-items:center; gap:6px;
background:transparent; border:0; cursor:pointer; padding:4px 8px 4px 4px;
border-radius:999px; color:rgba(255,255,255,0.85); font-family:inherit;
}
.topbar nav .user-trigger:hover,
.topbar nav .user-menu.is-open .user-trigger { background:rgba(255,255,255,0.06); color:#fff; }
.topbar nav .user-avatar {
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:50%;
background:var(--munt); color:var(--donker);
font-size:11px; font-weight:600; letter-spacing:0;
}
.topbar nav .user-menu.is-open .nav-caret { transform:rotate(180deg); }
.topbar nav .user-panel { min-width:230px; }
.topbar nav .user-panel .user-header { padding:10px 12px 6px; }
.topbar nav .user-panel .user-name { font-size:13px; font-weight:600; color:var(--text); line-height:1.2; }
.topbar nav .user-panel .user-email { font-size:11px; color:var(--text-muted); margin-top:2px; word-break:break-all; }
.topbar nav .user-panel .user-logout {
display:block; width:100%; text-align:left;
background:transparent; border:0; cursor:pointer;
color:var(--rood, #D85A30); padding:8px 12px; border-radius:8px;
font-size:13px; font-weight:500; font-family:inherit;
}
.topbar nav .user-panel .user-logout:hover { background:#fdecea; }
.logo { display:inline-flex; align-items:center; line-height:1; text-decoration:none; }
.logo:hover { text-decoration:none; }
.logo img { display:block; height:34px; width:auto; }
/* Hamburger-knop in topbar — boven 720px verborgen, alleen op mobiel
actief om de nav-drawer te openen. .burger-close (X-icoon) wordt
getoond zodra header.is-mobile-open. */
.topbar-burger {
display:none; align-items:center; justify-content:center;
background:transparent; border:0; cursor:pointer;
width:40px; height:40px; border-radius:8px;
color:rgba(255,255,255,0.9); padding:0;
}
.topbar-burger:hover { background:rgba(255,255,255,0.06); color:#fff; }
.topbar-burger .burger-close { display:none; }
header.topbar.is-mobile-open .topbar-burger .burger-open { display:none; }
header.topbar.is-mobile-open .topbar-burger .burger-close { display:inline-block; }
footer.site-footer {
padding:18px 28px; border-top:1px solid var(--line);
color:var(--text-muted); font-size:12px; background:var(--surface);
display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
footer.site-footer nav { display:flex; gap:14px; flex-wrap:wrap; }
footer.site-footer a { color:var(--text-muted); }
footer.site-footer a:hover { color:var(--spar); text-decoration:none; }
/* App layout (ingelogde pages): sidebar + main */
/* App-shell + fixed mini-footer. Footer staat fixed onderaan viewport
(altijd zichtbaar), shell heeft padding-bottom om content-overlap te
voorkomen. Sidebar past precies in viewport-minus-footer. */
:root { --mini-footer-h: 48px; }
.app-shell {
min-height:100vh;
padding-bottom:var(--mini-footer-h);
}
.app-layout { display:grid; grid-template-columns:232px minmax(0, 1fr); }
.sidebar-cell { background:var(--surface); border-right:1px solid var(--line); }
.sidebar {
padding:18px 14px;
position:sticky; top:0;
/* viewport minus footer: sidebar staat altijd op dezelfde plek, geen
layout-shift bij content-load. Op lange pages plakt 'ie aan top via
sticky; user-foot zit altijd net boven de fixed footer. */
height:calc(100vh - var(--mini-footer-h));
display:flex; flex-direction:column; gap:18px;
overflow-y:auto;
}
.sidebar-foot { margin-top:auto; }
.sidebar .logo { padding:6px 6px 12px; border-bottom:1px solid var(--line); }
.sidebar .logo img { height:32px; }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a, .sidebar-nav .nav-btn {
display:flex; align-items:center; gap:10px;
padding:8px 10px; border-radius:9px;
font-size:13px; font-weight:500; color:var(--text);
border:0; background:transparent; cursor:pointer; text-align:left;
}
.sidebar-nav a:hover, .sidebar-nav .nav-btn:hover { background:var(--mist); text-decoration:none; }
.sidebar-nav a.is-active, .sidebar-nav .nav-btn.is-active {
background:var(--mist); color:var(--spar);
}
.sidebar-nav .nav-icon { width:18px; height:18px; flex-shrink:0; opacity:0.75; }
.sidebar-nav a.is-active .nav-icon { opacity:1; }
.sidebar-section { font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); font-weight:500; padding:14px 10px 4px; }
.sidebar-nav .nav-icon { width:18px; height:18px; flex-shrink:0; opacity:0.85; color:var(--text-muted); }
.sidebar-nav a.is-active .nav-icon { opacity:1; color:var(--spar); }
.sidebar-nav a.is-disabled, .sidebar-nav button.nav-btn.is-disabled {
color:var(--text-muted); opacity:0.55; cursor:not-allowed; pointer-events:none;
}
.sidebar-nav .nav-badge {
margin-left:auto; background:var(--slim); color:#fff;
font-size:10px; font-weight:500; padding:2px 7px; border-radius:999px;
line-height:1.3;
}
/* Klikbare user-trigger onderaan de sidebar — opent een dropdown met
Account / Admin / Uitloggen. Admin & Account horen niet als gewone nav-
items (zijn user-/sessie-gerelateerd, niet werkruimte). */
.sidebar-foot {
position:relative;
padding:8px 0 0; border-top:1px solid var(--line);
}
.sidebar-user-trigger {
width:100%; padding:8px 8px;
display:grid; grid-template-columns:32px minmax(0, 1fr) auto;
gap:10px; align-items:center;
background:transparent; border:0; border-radius:8px;
cursor:pointer; font-family:inherit; text-align:left;
}
.sidebar-user-trigger:hover { background:var(--mist); }
.sidebar-foot.is-open .sidebar-user-trigger { background:var(--mist); }
.sidebar-user-trigger .avatar {
width:32px; height:32px; border-radius:50%;
background:linear-gradient(135deg, var(--slim), var(--spar));
color:#fff; font-weight:600; font-size:13px;
display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sidebar-user-trigger .meta { font-size:12px; line-height:1.3; min-width:0; }
.sidebar-user-trigger .meta strong {
display:block; color:var(--text); font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:13px;
}
.sidebar-user-trigger .meta small {
display:block; color:var(--text-muted);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:11px;
}
.sidebar-user-trigger .chevron { color:var(--text-muted); transition:transform 0.15s; }
.sidebar-foot.is-open .chevron { transform:rotate(180deg); }
.sidebar-user-panel {
position:absolute;
bottom:calc(100% + 6px); left:8px; right:8px;
background:var(--surface); border:1px solid var(--line); border-radius:10px;
box-shadow:0 8px 24px rgba(4,46,29,0.18);
padding:6px; z-index:50;
display:flex; flex-direction:column; gap:2px;
}
.sidebar-user-panel a {
display:flex; align-items:center; gap:10px;
padding:8px 10px; border-radius:6px;
color:var(--text); font-size:13px; font-weight:500; text-decoration:none;
}
.sidebar-user-panel a:hover { background:var(--mist); text-decoration:none; }
.sidebar-user-panel hr { border:0; border-top:1px solid var(--line); margin:4px 2px; }
.sidebar-user-panel .user-logout {
display:block; width:100%; text-align:left;
background:transparent; border:0; cursor:pointer; font-family:inherit;
color:var(--rood); padding:8px 10px; border-radius:6px;
font-size:13px; font-weight:500;
}
.sidebar-user-panel .user-logout:hover { background:#fdecea; }
main.app-main { padding:20px 28px 40px; min-width:0; }
/* Welkomst-banner na voltooide onboarding (?welcome=1) — groene tint,
dismissable. P1-CTA-banner = oranje tint zolang user geen P1-meter heeft. */
.welcome-banner, .p1-cta-banner {
display:flex; align-items:center; gap:14px;
padding:14px 18px; border-radius:12px;
margin-bottom:16px;
border:1px solid;
}
.welcome-banner {
background:linear-gradient(155deg, var(--mist) 0%, #DCF4E5 100%);
border-color:var(--munt);
color:var(--text);
}
.p1-cta-banner {
background:linear-gradient(155deg, var(--warn-bg, #FAEEDA) 0%, #FFF1D6 100%);
border-color:#F5DCAB;
color:var(--text);
}
.welcome-banner-icon, .p1-cta-icon {
width:40px; height:40px; flex-shrink:0;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.welcome-banner-icon { background:var(--slim); color:#fff; }
.p1-cta-icon { background:#EF9F27; color:#fff; }
.welcome-banner-content, .p1-cta-content {
flex:1; font-size:13px; line-height:1.5;
}
.welcome-banner-content strong, .p1-cta-content strong {
display:block; font-size:14px; margin-bottom:2px; color:var(--text);
}
.welcome-banner-close {
background:transparent; border:0; cursor:pointer;
font-size:22px; line-height:1; color:var(--text-muted);
padding:0 6px; flex-shrink:0;
}
.welcome-banner-close:hover { color:var(--text); }
@media (max-width:640px) {
.welcome-banner, .p1-cta-banner { flex-wrap:wrap; gap:10px; padding:12px 14px; }
.welcome-banner-content, .p1-cta-content { flex-basis:100%; }
}
/* Radio-cards voor contract-type-keuze (Account → Energiecontract). 3 visuele
tegels naast elkaar; native radio is gestyled-weg. */
.contract-type-row {
display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
margin-top:6px;
}
.contract-type-option {
display:flex; flex-direction:column; gap:2px;
padding:14px 14px;
border:1px solid var(--line-2); border-radius:12px;
cursor:pointer; background:var(--surface);
transition:border-color 0.15s, background 0.15s;
}
.contract-type-option:hover { border-color:var(--slim); }
.contract-type-option.is-active {
border-color:var(--slim); background:var(--mist);
box-shadow:0 0 0 3px rgba(34,179,107,0.12);
}
.contract-type-option input[type="radio"] { display:none; }
.contract-type-option .cto-title {
font-size:14px; font-weight:600; color:var(--text);
}
.contract-type-option .cto-sub {
font-size:11px; color:var(--text-muted); line-height:1.4;
}
@media (max-width:640px) {
.contract-type-row { grid-template-columns:1fr; }
}
/* ============== ONBOARDING-WIZARD ==============
Apart layout dat AppLayout (sidebar+main+footer) bypasses. Body krijgt
.ob-mode-class wanneer /app/onboarding actief is. */
.ob {
min-height:100vh;
display:grid;
grid-template-rows:auto auto 1fr;
background:var(--crème);
}
.ob-top {
padding:20px 32px;
border-bottom:1px solid var(--line);
background:var(--surface);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:12px;
}
.ob-top .logo img { height:28px; display:block; }
.ob-progress-info { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--text-muted); }
.ob-skip {
background:transparent; border:0; color:var(--text-muted);
font-size:13px; cursor:pointer; padding:6px 10px; border-radius:6px;
font-family:inherit;
}
.ob-skip:hover { color:var(--text); background:var(--grijs); }
.stepper-wrap {
background:var(--surface); padding:0 32px 18px;
border-bottom:1px solid var(--line);
}
.ob-stepper {
max-width:760px; margin:0 auto;
display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
}
.step-pill {
height:4px; border-radius:2px;
background:var(--grijs);
transition:background 0.4s;
}
.step-pill.done { background:var(--slim); }
.step-pill.current {
background:linear-gradient(90deg, var(--slim) 0%, var(--blad) 100%);
background-size:200% 100%;
animation:ob-shimmer 2.5s ease-in-out infinite;
}
@keyframes ob-shimmer {
0% { background-position:-100% 0; }
100% { background-position:100% 0; }
}
.step-meta {
max-width:760px; margin:8px auto 0;
display:flex; justify-content:space-between;
font-size:11px; color:var(--text-muted);
}
.step-meta strong { color:var(--text); font-weight:500; }
.ob-main {
padding:40px 32px 60px;
overflow-y:auto;
}
.ob-card { max-width:720px; margin:0 auto; }
.step-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
color:var(--spar); font-weight:500; margin-bottom:8px;
}
.step-h {
font-size:32px; font-weight:500;
letter-spacing:-0.6px; margin:0 0 12px;
line-height:1.2;
}
.step-sub {
font-size:15px; color:var(--text-muted);
line-height:1.6; margin:0 0 32px;
max-width:560px;
}
.step-actions {
display:flex; justify-content:space-between; align-items:center;
margin-top:32px; gap:8px; flex-wrap:wrap;
}
.step-actions-left, .step-actions-right { display:flex; gap:8px; }
/* Welkom-hero (stap 1) */
.welcome-hero {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:40px 36px;
border-radius:18px;
margin-bottom:24px;
position:relative; overflow:hidden;
}
.welcome-hero::before {
content:''; position:absolute;
top:-100px; right:-100px;
width:360px; height:360px;
background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
pointer-events:none;
}
.welcome-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--blad); font-weight:500; margin-bottom:10px;
position:relative; z-index:2;
}
.welcome-h {
font-size:30px; font-weight:500; line-height:1.2;
letter-spacing:-0.5px; color:#fff; margin-bottom:12px;
position:relative; z-index:2;
}
.welcome-sub {
font-size:14px; color:var(--munt);
max-width:460px; line-height:1.6; margin-bottom:24px;
position:relative; z-index:2;
}
.welcome-stats {
display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;
border-top:1px solid rgba(184,235,210,0.2);
padding-top:20px; position:relative; z-index:2;
}
.ws-l { font-size:10px; color:var(--munt); text-transform:uppercase; letter-spacing:0.5px; }
.ws-v { font-size:22px; font-weight:500; color:#fff; margin-top:4px; letter-spacing:-0.4px; }
.welcome-list {
display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;
}
.welcome-item {
display:flex; align-items:start; gap:12px;
padding:16px;
background:var(--surface); border:1px solid var(--line); border-radius:12px;
}
.welcome-item-icon {
width:32px; height:32px;
background:var(--mist); color:var(--spar);
border-radius:8px;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.welcome-item-icon svg { width:16px; height:16px; }
.welcome-item-h { font-size:13px; font-weight:500; }
.welcome-item-s { font-size:11px; color:var(--text-muted); margin-top:2px; line-height:1.5; }
.ob-supplier-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.ob-supplier-mini {
display:grid; grid-template-columns:36px 1fr auto;
gap:12px; align-items:center;
padding:10px 14px;
border:1px solid var(--line); border-radius:10px;
cursor:pointer; transition:border-color 0.15s; background:var(--surface);
}
.ob-supplier-mini:hover { border-color:var(--line-2); }
.ob-supplier-mini.selected {
border-color:var(--slim); background:var(--mist);
}
.ob-supplier-mini-logo {
width:36px; height:36px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:500; color:#fff;
background:var(--nacht);
}
.ob-supplier-mini-name { font-size:13px; font-weight:500; }
.ob-supplier-mini-meta { font-size:11px; color:var(--text-muted); margin-top:1px; }
.ob-supplier-mini-rate { font-size:12px; color:var(--spar); font-weight:500; }
.ob-supplier-search {
width:100%;
padding:11px 14px 11px 40px;
background:var(--crème); border:1px solid var(--line-2); border-radius:10px;
color:var(--text); font-size:14px; margin-bottom:14px;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat; background-position:14px center;
}
/* Device-pick (stap 5) */
.device-grid {
display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}
.device-pick {
background:var(--surface); border:2px solid var(--line); border-radius:14px;
padding:22px 20px; cursor:pointer; transition:all 0.15s;
display:flex; flex-direction:column; gap:6px;
text-align:left; font-family:inherit;
position:relative;
}
.device-pick:hover { border-color:var(--line-2); }
.device-pick.selected {
border-color:var(--slim); background:var(--mist);
}
.device-pick.selected::before {
content:'✓'; position:absolute; top:14px; right:14px;
width:24px; height:24px; border-radius:50%;
background:var(--slim); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:600;
}
.device-pick-icon {
width:44px; height:44px; border-radius:11px;
background:var(--mist); color:var(--spar);
display:flex; align-items:center; justify-content:center;
margin-bottom:8px;
}
.device-pick-icon svg { width:22px; height:22px; }
.device-pick-h { font-size:15px; font-weight:500; }
.device-pick-s { font-size:12px; color:var(--text-muted); line-height:1.5; }
/* Done-view (stap 6) */
.done-view { text-align:center; padding:24px 0; }
.done-icon {
width:88px; height:88px;
background:var(--mist); color:var(--spar);
border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
margin-bottom:20px;
}
.done-icon svg { width:44px; height:44px; }
.done-h {
font-size:28px; font-weight:500;
letter-spacing:-0.5px; margin:0 0 10px;
}
.done-s {
font-size:15px; color:var(--text-muted); line-height:1.6;
max-width:480px; margin:0 auto 28px;
}
.done-recap {
background:var(--surface); border:1px solid var(--line);
border-radius:14px; padding:18px 22px;
text-align:left; max-width:460px; margin:0 auto 24px;
}
.done-recap-h {
font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
color:var(--text-muted); margin-bottom:8px;
}
.done-recap-row {
display:flex; align-items:center; gap:10px;
padding:10px 0; font-size:13px;
border-top:1px solid var(--line);
}
.done-recap-row:first-of-type { border-top:0; }
.done-recap-check {
width:20px; height:20px; flex-shrink:0;
background:var(--mist); color:var(--spar);
border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
}
.done-recap-check.skipped { background:var(--grijs); color:var(--text-muted); }
.done-recap-check svg { width:12px; height:12px; }
/* Mobile */
@media (max-width:720px) {
.ob-top { padding:14px 18px; }
.ob-main { padding:24px 18px 60px; }
.stepper-wrap { padding:0 18px 14px; }
.step-h { font-size:24px; }
.welcome-hero { padding:28px 22px; }
.welcome-h { font-size:24px; }
.welcome-stats { grid-template-columns:1fr; gap:10px; padding-top:14px; }
.welcome-list { grid-template-columns:1fr; }
.device-grid { grid-template-columns:1fr; }
.step-meta { font-size:10px; }
}
/* Compacte 1-regel mini-footer fixed onderaan viewport — altijd zichtbaar.
Shell heeft padding-bottom om content-overlap te voorkomen. */
.app-mini-footer {
position:fixed;
bottom:0; left:0; right:0;
z-index:30;
background:var(--surface); border-top:1px solid var(--line);
padding:10px 28px;
font-size:12px;
height:var(--mini-footer-h);
}
.app-mini-footer .mini-inner {
max-width:1400px; margin:0 auto;
display:flex; justify-content:space-between; align-items:center;
gap:16px; flex-wrap:wrap;
}
.app-mini-footer nav { display:flex; gap:14px; flex-wrap:wrap; }
.app-mini-footer a { color:var(--text-muted); text-decoration:none; }
.app-mini-footer a:hover { color:var(--spar); text-decoration:none; }
.app-mini-footer .mini-meta { color:var(--text-muted); }
@media (max-width:760px) {
.app-mini-footer { padding:10px 16px; font-size:11px; }
.app-mini-footer .mini-inner { gap:8px; }
.app-mini-footer nav { gap:10px; }
}
main.public-main { flex:1; padding:32px 28px; max-width:1200px; margin:0 auto; width:100%; }
/* Form-card — gecentreerde card voor login/register/forgot */
.form-card {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
padding:28px 32px; width:100%; max-width:400px;
}
/* AUTH SPLIT-SCREEN LAYOUT (login/register/forgot/reset) */
.auth-split {
display:grid; grid-template-columns:1fr 1fr;
min-height:100vh;
}
.auth-split-left {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:32px 48px 28px;
display:flex; flex-direction:column;
position:relative; overflow:hidden;
}
.auth-split-left::before {
content:''; position:absolute; top:-150px; right:-150px;
width:480px; height:480px;
background:radial-gradient(circle, rgba(79,203,142,0.15) 0%, transparent 70%);
pointer-events:none;
}
.auth-split-right {
background:var(--surface); padding:32px;
display:flex; align-items:center; justify-content:center;
overflow-y:auto;
}
.auth-split-right .form-card {
border:0; padding:0; box-shadow:none;
max-width:380px; width:100%;
}
.auth-split-left .logo { margin-bottom:auto; }
.auth-split-left .logo img { height:34px; }
.auth-content { position:relative; z-index:2; max-width:480px; }
.auth-eyebrow {
color:var(--blad);
font-size:11px; text-transform:uppercase; letter-spacing:1.2px;
font-weight:500; margin-bottom:14px;
}
.auth-h {
font-size:36px; font-weight:500; letter-spacing:-0.6px;
line-height:1.15; color:#fff; margin-bottom:14px;
}
.auth-sub {
font-size:15px; color:var(--munt); line-height:1.6;
margin-bottom:28px;
}
/* Live-tarief card op het donkere paneel */
.live-tariff-card {
background:rgba(0,0,0,0.22);
border:1px solid rgba(184,235,210,0.18);
border-radius:12px;
padding:14px 18px;
max-width:420px;
}
.lt-eyebrow {
font-size:10px; text-transform:uppercase; letter-spacing:0.8px;
color:var(--blad); font-weight:500;
display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.lt-eyebrow::before {
content:''; width:7px; height:7px; border-radius:50%;
background:var(--blad); box-shadow:0 0 0 4px rgba(79,203,142,0.2);
}
.lt-row {
display:flex; justify-content:space-between; align-items:center;
padding:7px 0;
font-size:14px; color:rgba(255,255,255,0.78);
border-top:1px solid rgba(184,235,210,0.1);
}
.lt-row:first-of-type { border-top:0; }
.lt-row strong { color:#fff; font-weight:500; }
.lt-row .lt-warn { color:var(--p-piek, #EF9F27); }
.auth-split-foot {
margin-top:auto; padding-top:24px;
display:flex; gap:18px; flex-wrap:wrap;
font-size:11px; color:rgba(255,255,255,0.5);
position:relative; z-index:2;
}
.auth-split-foot a { color:rgba(255,255,255,0.65); }
.auth-split-foot a:hover { color:#fff; text-decoration:none; }
@media (max-width:880px) {
.auth-split { grid-template-columns:1fr; }
.auth-split-left {
padding:28px 24px 24px;
min-height:auto;
}
.auth-split-left .logo { margin-bottom:18px; }
.auth-h { font-size:24px; }
.auth-sub { margin-bottom:18px; font-size:14px; }
.auth-split-right { padding:32px 24px 48px; }
.auth-split-foot { padding-top:14px; }
}
/* Onder 720px: het dark-pane neemt te veel ruimte voordat de user bij
het formulier komt. We comprimeren tot een compacte 'live tarief'-strip
bovenaan en verbergen de heading + live-tariff-card body — de user
ziet het login-formulier dan meteen in beeld. */
@media (max-width:720px) {
.auth-split-left {
padding:14px 18px;
flex-direction:row; align-items:center; justify-content:space-between;
gap:12px;
}
.auth-split-left::before { display:none; }
.auth-split-left .logo { margin:0; flex-shrink:0; }
.auth-split-left .logo img { height:24px; }
.auth-eyebrow, .auth-h, .auth-sub, .live-tariff-card, .auth-split-foot {
display:none;
}
.auth-split-right { padding:24px 18px 40px; }
}
/* ============== TYPOGRAFIE ============== */
.page-title { font-size:24px; font-weight:500; letter-spacing:-0.5px; color:var(--text); margin-bottom:6px; }
.page-sub { color:var(--text-muted); font-size:13px; margin-bottom:22px; }
.form-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.form-title { font-size:22px; font-weight:500; letter-spacing:-0.4px; color:var(--text); margin-bottom:6px; }
.form-sub { font-size:13px; color:var(--text-muted); margin-bottom:18px; line-height:1.55; }
.form-bottom { font-size:13px; color:var(--text-muted); text-align:center; margin-top:18px; }
/* ============== CARDS ============== */
.card {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
padding:20px 22px;
margin-bottom:14px;
/* Grid/flex items hebben default min-width:auto = min-content. Als
een kind (SVG, lange tekst, flex-row) niet shrinkt, breekt de card
het viewport op smalle schermen. min-width:0 forceert shrink. */
min-width:0;
}
.card .section-h { font-size:15px; font-weight:500; color:var(--text); margin-bottom:4px; }
.card .section-s { font-size:12px; color:var(--text-muted); margin-bottom:12px; line-height:1.5; }
.form-grid {
display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px;
margin-bottom:18px;
}
.form-grid > .descr .section-h { font-size:14px; font-weight:500; color:var(--text); }
.form-grid > .descr .section-s { font-size:12px; color:var(--text-muted); margin-top:4px; line-height:1.5; }
@media (max-width:780px) {
.form-grid { grid-template-columns:1fr; gap:8px; }
}
/* ============== FORM FIELDS ============== */
.field { display:block; margin-bottom:14px; }
/* Twee-kolom-grid voor gerelateerde velden (Voornaam+Achternaam, Taal+Tijdzone). */
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row .field { margin-bottom:14px; }
@media (max-width:640px) { .field-row { grid-template-columns:1fr; gap:0; } }
/* Footer met Annuleer + Opslaan voor formulieren met dirty-state. */
.form-actions {
display:flex; justify-content:flex-end; gap:8px;
margin-top:8px; padding-top:14px; border-top:1px solid var(--line);
}
/* Inlog-historie events op Beveiliging-tab. */
.login-history { display:flex; flex-direction:column; }
.login-event {
display:grid; grid-template-columns:36px 1fr auto; gap:14px; align-items:center;
padding:12px 0; border-bottom:1px solid var(--line);
}
.login-event:last-child { border-bottom:0; }
.le-icon {
width:36px; height:36px; border-radius:9px;
display:flex; align-items:center; justify-content:center;
}
.le-icon.le-success, .le-icon.le-magic_link { background:var(--mist); color:var(--spar); }
.le-icon.le-failed, .le-icon.le-pending { background:var(--warn-bg); color:var(--duur); }
.le-title { font-size:14px; font-weight:600; color:var(--text); }
.le-meta { font-size:12px; color:var(--text-muted); margin-top:2px; }
.le-badge { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.le-badge.tone-warn { color:var(--duur); font-weight:500; }
.le-badge.tone-muted { color:var(--text-muted); }
.field-label {
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:6px;
}
.field-label label { font-size:12px; font-weight:500; color:var(--text); }
.field-label .help-link { font-size:12px; color:var(--spar); }
.field-hint { font-size:12px; color:var(--text-muted); margin-top:5px; line-height:1.4; }
.field-error { font-size:12px; color:var(--rood, #d85a30); margin-top:5px; line-height:1.4; }
.input.has-error,
.input.has-icon-left.has-error,
.input.has-icon-left.has-icon-right.has-error { border-color: var(--rood, #d85a30); }
.input.has-error:focus,
.input.has-icon-left.has-error:focus,
.input.has-icon-left.has-icon-right.has-error:focus { box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.18); }
.input-wrap { position:relative; }
.input, select.input {
width:100%;
font:inherit; font-size:14px;
padding:10px 13px;
background:var(--crème);
border:1px solid var(--line-2);
border-radius:9px;
color:var(--text);
outline:none; transition:all 0.15s;
}
.input:focus, select.input:focus {
background:var(--surface); border-color:var(--slim);
box-shadow:0 0 0 3px rgba(34,179,107,0.15);
}
.input::placeholder { color:var(--text-muted); opacity:0.7; }
.input.has-icon-left { padding-left:36px; }
.input.has-icon-right { padding-right:36px; }
.input-icon {
position:absolute; top:50%; left:12px; transform:translateY(-50%);
width:16px; height:16px; color:var(--text-muted); pointer-events:none;
display:flex; align-items:center; justify-content:center;
}
.input-toggle {
position:absolute; top:50%; right:8px; transform:translateY(-50%);
width:28px; height:28px; border:0; background:transparent; cursor:pointer;
color:var(--text-muted); display:flex; align-items:center; justify-content:center;
border-radius:6px;
}
.input-toggle:hover { background:var(--grijs); color:var(--text); }
select.input { appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }
/* Manifest-driven koppel-form (resources/js/components/ConnectFlow.vue) */
.connect-form { display:flex; flex-direction:column; gap:10px; }
.connect-field { display:flex; flex-direction:column; gap:4px; }
.connect-help { font-size:11px; color:var(--text-muted); line-height:1.4; }
.connect-help a { color:var(--spar); font-weight:500; }
/* DeviceCard — generieke card voor vehicles/batteries/chargers (resources/js/components/DeviceCard.vue) */
.device-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.device-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.device-name { font-size:15px; font-weight:600; color:var(--text); }
.device-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.device-soc strong { font-size:32px; font-weight:500; color:var(--text); letter-spacing:-1px; line-height:1; }
.device-soc small { font-size:14px; color:var(--text-muted); margin-left:2px; }
.device-soc-bar { height:8px; background:var(--grijs); border-radius:4px; overflow:hidden; margin-bottom:14px; }
.device-soc-fill { height:100%; background:linear-gradient(90deg, var(--munt), var(--slim)); transition:width 0.3s; }
.device-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 14px; }
.device-stat { display:flex; flex-direction:column; gap:2px; font-size:12px; }
.device-stat-l { color:var(--text-muted); }
.device-stat strong { color:var(--text); font-weight:500; font-size:13px; }
.device-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.device-group { margin-top:24px; }
.device-group:first-of-type { margin-top:14px; }
.device-group-h { font-size:14px; font-weight:600; color:var(--text); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.device-group-emoji { font-size:18px; }
.device-grid-wrap { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
/* Checkbox */
.check-row {
display:flex; align-items:flex-start; gap:8px;
font-size:13px; color:var(--text); cursor:pointer;
user-select:none;
}
.check-row input[type=checkbox] { margin-top:2px; accent-color:var(--slim); cursor:pointer; }
.check-row a { color:var(--spar); }
/* ============== BUTTONS ============== */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:6px;
padding:9px 16px; border-radius:9px;
font:inherit; font-size:13px; font-weight:500;
border:0; cursor:pointer; text-decoration:none;
transition:all 0.15s;
line-height:1.3;
}
.btn:hover { text-decoration:none; }
.btn[disabled], .btn.is-loading { opacity:0.6; cursor:not-allowed; }
/* Keyboard-focus zichtbaar voor knoppen, links en tabs zodat keyboard-only
gebruikers (en screen-reader-users) bijhouden waar focus zit. */
.btn:focus-visible, .tab-nav-item:focus-visible, .sidebar-nav a:focus-visible,
.sidebar-nav .nav-btn:focus-visible, .topbar nav a:focus-visible,
.btn-link:focus-visible {
outline:2px solid var(--slim);
outline-offset:2px;
}
.btn-primary { background:var(--slim); color:#fff; }
.btn-primary:hover { background:var(--spar); }
.btn-outline { background:var(--surface); color:var(--text); border:1px solid var(--line-2); }
.btn-outline:hover { border-color:var(--slim); color:var(--spar); }
.btn-danger { background:var(--surface); color:var(--rood); border:1px solid #F09595; }
.btn-danger:hover { background:var(--rood-bg); }
.btn-link { background:transparent; color:var(--spar); padding:4px 0; font-weight:500; }
.btn-link:hover { background:transparent; text-decoration:underline; }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:12px; }
/* SlimHuys P1-bridge — pairing-panel hangt onder zijn kv-row in de
Slimme-meter-categorie. Crème-achtergrond + nestbaar tussen kv-rows. */
.bridge-pairing-panel {
margin:6px 0 14px;
padding:14px 16px;
background:var(--crème);
border-radius:11px;
}
/* Pairing-code-display voor SlimHuys P1-bridge-flow */
.pairing-code-display {
position:relative;
background:var(--surface); border:1px solid var(--lijn);
border-radius:10px; padding:22px 24px; text-align:center;
margin-top:14px;
}
.pairing-code-display .pc-close {
position:absolute; top:10px; right:10px;
width:28px; height:28px; padding:0;
display:flex; align-items:center; justify-content:center;
background:transparent; border:none; border-radius:6px;
color:var(--text-muted); cursor:pointer;
font-size:16px; line-height:1;
}
.pairing-code-display .pc-close:hover {
background:var(--mist); color:var(--text);
}
.pairing-code-display .pc-label {
font-size:11px; color:var(--text-muted); text-transform:uppercase;
letter-spacing:0.6px; margin-bottom:12px; font-weight:500;
}
.pairing-code-display .pc-code {
font-family: 'SF Mono', Menlo, monospace;
font-size:42px; font-weight:600; color:var(--text);
letter-spacing:8px; line-height:1;
}
.pairing-code-display .pc-meta {
font-size:12px; color:var(--text-muted); margin-top:14px;
}
/* SlimHuys P1-bridge — management-credentials reveal-block per
gepaird device. Hangt net als pairing-panel onder zijn kv-row in
de Slimme-meter-categorie, met dezelfde crème-achtergrond. */
.bridge-mgmt {
margin:6px 0 14px;
padding:12px 14px;
background:var(--crème);
border-radius:11px;
}
.bridge-mgmt-head {
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap;
}
.bridge-mgmt-panel {
margin-top:12px; padding-top:12px;
border-top:1px solid var(--lijn);
}
.bridge-mgmt-panel .bm-row {
display:flex; align-items:center; gap:10px;
padding:6px 0; flex-wrap:wrap;
font-size:13px;
}
.bridge-mgmt-panel .bm-label {
flex:0 0 130px; color:var(--text-muted); font-weight:500;
}
.bridge-mgmt-panel .bm-value {
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
font-family: 'SF Mono', Menlo, monospace;
color:var(--text);
}
.bridge-mgmt-panel .bm-value code {
background:var(--surface); padding:3px 8px; border-radius:5px;
border:1px solid var(--lijn);
}
/* ============== ALERTS ============== */
.alert {
display:flex; align-items:flex-start; gap:10px;
padding:11px 14px; border-radius:10px; margin-bottom:14px;
font-size:13px; line-height:1.5;
border:1px solid;
}
.alert.info { background:var(--info-bg); border-color:#B5D4F4; color:#052749; }
.alert.warn { background:var(--warn-bg); border-color:#FAC775; color:var(--duur); }
.alert.ok { background:var(--mist); border-color:var(--munt); color:var(--spar); }
.alert.err { background:var(--rood-bg); border-color:#E7B5B5; color:var(--rood); }
/* ============== PILLS / BADGES ============== */
.pill {
display:inline-flex; align-items:center; gap:5px;
padding:3px 9px; border-radius:999px;
font-size:11px; font-weight:500;
}
.pill.ok { background:var(--mist); color:var(--spar); }
.pill.info { background:var(--info-bg); color:var(--info); }
.pill.warn { background:var(--warn-bg); color:var(--duur); }
.pill.err { background:var(--rood-bg); color:var(--rood); }
.pill.muted { background:var(--grijs); color:var(--text-muted); }
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
/* ============== TAB-NAV (underlined tabs voor account-pagina) ============== */
.tab-nav {
display:flex; gap:0;
border-bottom:1px solid var(--line);
margin-bottom:24px; overflow-x:auto;
}
.tab-nav-item {
font:inherit; cursor:pointer; border:0; background:transparent;
padding:10px 16px; font-size:13px; font-weight:500; color:var(--text-muted);
white-space:nowrap; text-decoration:none;
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:all 0.15s;
}
.tab-nav-item:hover { color:var(--text); text-decoration:none; }
.tab-nav-item.is-active { color:var(--spar); border-bottom-color:var(--slim); }
.tab-nav-item.is-disabled { color:var(--text-muted); opacity:0.45; cursor:not-allowed; pointer-events:none; }
/* ============== ROW-LIST (sessions, login-history) ============== */
.row-list { display:flex; flex-direction:column; }
.row-item {
display:grid; grid-template-columns:auto 1fr auto; gap:12px;
padding:12px 0; border-bottom:1px solid var(--line);
align-items:center;
}
.row-item:last-child { border-bottom:0; }
.row-icon {
width:36px; height:36px; border-radius:9px;
background:var(--grijs); color:var(--text-muted);
display:inline-flex; align-items:center; justify-content:center;
font-size:14px; flex-shrink:0;
}
.row-icon.icon-ok { background:var(--mist); color:var(--spar); }
.row-icon.icon-warn { background:var(--warn-bg); color:var(--duur); }
.row-name { font-size:13px; font-weight:500; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row-meta { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.45; }
.row-action { font-size:12px; color:var(--text-muted); }
/* ============== PROFILE HEADER ============== */
.profile-head {
display:grid; grid-template-columns:auto 1fr; gap:14px;
padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--line);
align-items:center;
}
.profile-avatar {
width:48px; height:48px; border-radius:50%;
background:linear-gradient(135deg, var(--slim), var(--spar));
color:#fff; font-weight:600; font-size:18px;
display:inline-flex; align-items:center; justify-content:center;
}
.profile-meta-h { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--text); }
.profile-meta-s { font-size:12px; color:var(--text-muted); margin-top:2px; }
.profile-meta-pills { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
/* ============== PASSWORD STRENGTH ============== */
.pw-strength { margin:8px 0 4px; }
.pw-bar { display:flex; gap:4px; height:4px; margin-bottom:6px; }
.pw-bar-seg { flex:1; background:var(--line-2); border-radius:2px; transition:background 0.2s; }
.pw-bar.s1 .pw-bar-seg:nth-child(-n+1) { background:var(--rood); }
.pw-bar.s2 .pw-bar-seg:nth-child(-n+2) { background:var(--duur); }
.pw-bar.s3 .pw-bar-seg:nth-child(-n+3) { background:var(--blad); }
.pw-bar.s4 .pw-bar-seg { background:var(--slim); }
.pw-label { font-size:11px; color:var(--text-muted); }
.pw-label strong { color:var(--text); font-weight:500; }
.pw-checks {
display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
margin-top:8px; font-size:11px; color:var(--text-muted);
}
.pw-check { display:inline-flex; align-items:center; gap:5px; }
.pw-check svg { width:13px; height:13px; flex-shrink:0; }
.pw-check.is-ok { color:var(--spar); }
.pw-check.is-ok svg { color:var(--slim); }
@media (max-width:480px) { .pw-checks { grid-template-columns:1fr; } }
/* Divider met "of" tussen primary auth en alternative */
.divider {
display:flex; align-items:center; gap:10px;
margin:18px 0; color:var(--text-muted);
font-size:11px; text-transform:uppercase; letter-spacing:1px;
}
.divider::before, .divider::after {
content:''; flex:1; height:1px; background:var(--line);
}
/* Auth-success confirmation state (forgot-sent) */
.auth-success {
text-align:center; padding:8px 0;
}
.auth-success-icon {
width:64px; height:64px; border-radius:16px;
background:var(--mist); color:var(--spar);
display:inline-flex; align-items:center; justify-content:center;
margin:0 auto 16px;
}
.auth-success-icon svg { width:32px; height:32px; }
.auth-success h2 {
font-size:22px; font-weight:500; letter-spacing:-0.3px;
color:var(--text); margin-bottom:8px;
}
.auth-success p {
font-size:14px; color:var(--text-muted); line-height:1.55;
max-width:340px; margin:0 auto 18px;
}
/* ============== QR + BACKUP CODES ============== */
.qr-block {
background:var(--surface); border:1px solid var(--line); border-radius:11px;
padding:18px; text-align:center;
}
.qr-block img { max-width:200px; height:auto; display:block; margin:0 auto 10px; }
.code-block {
background:var(--grijs); padding:9px 12px; border-radius:7px;
font-family:ui-monospace, 'SF Mono', monospace;
font-size:12px; user-select:all; word-break:break-all;
text-align:center; color:var(--text);
}
.backup-codes {
display:grid; grid-template-columns:repeat(2, 1fr); gap:6px;
background:var(--mist); padding:14px; border-radius:10px;
font-family:ui-monospace, 'SF Mono', monospace;
font-size:13px; margin:10px 0;
border:1px solid var(--munt);
color:var(--text);
}
.backup-codes div { padding:4px 6px; user-select:all; }
/* ============== VERBRUIK & KOSTEN ============== */
/* Insight callout */
.insight {
display:grid; grid-template-columns:auto 1fr; gap:14px;
background:var(--mist); border:1px solid var(--munt); border-radius:14px;
padding:18px 22px; margin-bottom:14px; align-items:flex-start;
}
.insight-icon {
width:42px; height:42px; border-radius:10px;
background:var(--slim); color:#fff;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.insight-title { font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; }
.insight-body { font-size:13px; color:var(--spar); line-height:1.55; }
.insight-body strong { color:var(--text); }
/* Period-tabs (top-right action) */
.period-controls {
display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
.period-tabs {
display:flex; gap:2px; padding:3px; background:var(--grijs); border-radius:9px;
}
.period-tabs button {
font:inherit; cursor:pointer; border:0; background:transparent;
padding:6px 12px; border-radius:6px;
font-size:12px; font-weight:500; color:var(--text-muted);
}
.period-tabs button.is-active {
background:var(--surface); color:var(--text);
box-shadow:0 1px 3px rgba(4,46,29,0.06);
}
.period-nav {
display:flex; align-items:center; gap:8px;
font-size:12px; color:var(--text-muted);
}
.period-nav-btn {
font:inherit; cursor:pointer; border:1px solid var(--line); background:var(--surface);
width:26px; height:26px; border-radius:7px;
display:flex; align-items:center; justify-content:center;
font-size:16px; line-height:1; color:var(--text);
transition:background 0.15s ease, border-color 0.15s ease;
}
.period-nav-btn:hover:not(:disabled) { background:var(--mist); border-color:var(--munt); }
.period-nav-btn:disabled { opacity:0.4; cursor:not-allowed; }
.period-nav-label { min-width:140px; text-align:center; font-weight:500; color:var(--text); }
/* Day chart-bars (verbruik per dag) */
.day-chart {
position:relative; height:200px;
margin:14px 0 4px;
display:grid;
grid-template-columns:38px 1fr;
gap:8px;
}
.day-chart.has-right-axis { grid-template-columns:38px 1fr 52px; }
.day-chart-y-right {
position:relative; padding:6px 0;
}
.day-chart-y-right span {
font-size:10px; color:var(--duur); text-align:left; padding-left:6px;
font-variant-numeric:tabular-nums;
}
.day-chart-x.has-right-axis { grid-template-columns:38px 1fr 52px; }
.day-chart-y { display:flex; flex-direction:column-reverse; justify-content:space-between; padding:6px 0; }
.day-chart-y span { font-size:10px; color:var(--text-muted); text-align:right; padding-right:6px; }
.day-chart-bars {
position:relative;
display:grid; gap:2px;
align-items:stretch;
border-bottom:1px solid var(--line-2);
padding:2px 2px 0;
}
.day-chart-bar-lane { position:relative; min-width:0; cursor:pointer; height:100%; }
.day-chart-bar {
position:absolute; left:0; right:0;
background:var(--blad);
border-radius:2px 2px 0 0;
min-height:1px;
transition:opacity 0.15s;
}
.day-chart-bar.now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.day-chart-bar.below-zero { border-radius:0 0 2px 2px; }
.day-chart-bar-lane:hover .day-chart-bar { opacity:0.75; }
/* Paired bars: vorig jaar (lichtgroen, links) + dit jaar (donker, rechts).
Vue zet --bar-bottom + --bar-height per bar; alleen die twee CSS-vars
herrekenen per data-update. Inline-style writes bij 168 bars zijn anders
168×2 properties = veel re-render. */
.day-chart-bar-lane.paired .day-bar-prev,
.day-chart-bar-lane.paired .day-bar-current {
position:absolute; border-radius:2px 2px 0 0;
min-height:1px; transition:opacity 0.15s;
bottom:var(--bar-bottom); height:var(--bar-height);
}
.day-chart-bar-lane.paired .day-bar-prev { background:var(--munt); left:5%; right:52%; }
.day-chart-bar-lane.paired .day-bar-current { background:var(--blad); left:52%; right:5%; }
.day-chart-bar-lane.paired .day-bar-current.cost { left:8%; right:8%; }
.day-chart-bar-lane.paired .day-bar-current.now { background:var(--spar); }
.day-chart-bar-lane.paired .day-bar-current.below-zero {
background:var(--neg); border-radius:0 0 2px 2px;
}
.day-chart-bar-lane.paired:hover .day-bar-prev,
.day-chart-bar-lane.paired:hover .day-bar-current { opacity:0.75; }
/* Cost-overlay-lijn (oranje) over de hele chart. */
.day-chart-cost-line {
position:absolute; inset:0;
width:100%; height:100%;
pointer-events:none; overflow:visible;
grid-column:1 / -1; grid-row:1;
}
.day-chart-cost-line polyline {
fill:none; stroke:var(--duur); stroke-width:1.5;
vector-effect:non-scaling-stroke;
}
.day-chart-cost-line .cost-seg {
stroke:var(--duur); stroke-width:3;
stroke-linecap:round; vector-effect:non-scaling-stroke;
}
.day-chart-cost-line .cost-zero {
stroke:var(--duur); stroke-width:0.5; stroke-dasharray:2,2;
opacity:0.5; vector-effect:non-scaling-stroke;
}
/* X-axis-labels matchen 1-op-1 met bar-lanes. */
.day-chart-x-labels-paired {
display:grid; padding:0 2px;
font-size:10px; color:var(--text-muted);
}
.day-chart-x-labels-paired span { text-align:center; min-width:0; white-space:nowrap; overflow:hidden; }
/* kWh / € / Beide-toggle. */
.chart-mode-toggle {
display:inline-flex; gap:1px; padding:2px;
background:var(--grijs); border-radius:8px;
}
.chart-mode-toggle button {
font:inherit; cursor:pointer; border:0; background:transparent;
padding:5px 12px; border-radius:6px;
font-size:12px; font-weight:500; color:var(--text-muted);
}
.chart-mode-toggle button.is-active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(4,46,29,0.08); }
.chart-legend .legend-line {
display:inline-block; width:14px; height:2px;
background:var(--duur); margin-right:2px;
vertical-align:middle;
}
.day-chart .zero-line {
position:absolute; left:0; right:0;
height:1px; background:rgba(4,46,29,0.35);
pointer-events:none; z-index:2;
}
.day-chart-x {
display:grid; grid-template-columns:38px 1fr; gap:8px;
font-size:10px; color:var(--text-muted); margin-top:6px;
}
.day-chart-x-labels { display:grid; grid-template-columns:repeat(6, 1fr); padding:0 2px; }
/* SOLAR-CARD — Mijn-huis Zonnepanelen-card met 12-mnd-chart. */
.solar-card .card-head-icon .ico {
width:32px; height:32px; border-radius:8px;
display:flex; align-items:center; justify-content:center;
}
.solar-yearly { text-align:left; padding:8px 0 14px; }
.solar-yearly-value { font-size:32px; font-weight:600; color:var(--duur); letter-spacing:-0.5px; line-height:1; }
.solar-yearly-unit { font-size:14px; font-weight:500; color:var(--text-muted); margin-left:2px; }
.solar-yearly-sub { font-size:12px; color:var(--text-muted); margin-top:4px; }
.solar-chart { padding:6px 0; }
.solar-chart-bars {
display:grid; grid-template-columns:repeat(12, 1fr); gap:4px;
height:64px;
border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.solar-bar-lane { display:flex; align-items:flex-end; height:100%; }
.solar-bar {
width:100%; background:var(--solar);
border-radius:3px 3px 0 0; min-height:2px;
transition:opacity 0.15s;
}
.solar-bar.is-future { background:var(--solar-soft); }
.solar-bar.is-current { background:var(--duur); }
.solar-bar-lane:hover .solar-bar { opacity:0.75; }
.solar-chart-labels {
display:grid; grid-template-columns:repeat(12, 1fr); gap:4px;
margin-top:4px; font-size:10px; color:var(--text-muted); text-align:center;
}
.solar-footer {
display:flex; gap:18px; flex-wrap:wrap;
padding:12px 0 0;
margin-top:10px; border-top:1px solid var(--line);
font-size:12px; color:var(--text-muted);
}
.solar-footer strong { color:var(--text); font-weight:600; }
/* Mini-bar-chart in admin-userlist — PV (boven) + P1 (onder) per dag. */
.admin-flow-chart {
display:grid; grid-template-columns:repeat(14, 1fr); gap:2px;
height:60px; border-bottom:1px solid var(--line-2); padding-bottom:2px;
}
.admin-flow-bar {
position:relative; cursor:help;
display:flex; flex-direction:column; justify-content:flex-end;
}
.admin-flow-pv {
background:var(--solar); border-radius:2px 2px 0 0;
min-height:1px; opacity:0.85; margin-bottom:1px;
}
.admin-flow-p1 {
background:var(--blad); border-radius:2px 2px 0 0;
min-height:1px;
}
.admin-flow-bar:hover { opacity:0.7; }
/* Impersonation-banner — verschijnt voor admin die als andere user inlogt. */
.impersonation-banner {
position:sticky; top:0; z-index:50;
display:flex; justify-content:space-between; align-items:center;
gap:14px; padding:10px 18px;
background:var(--paars); color:#fff;
font-size:13px;
border-radius:0 0 12px 12px;
margin:-28px -28px 18px;
box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.impersonation-banner strong { font-weight:600; }
.impersonation-banner .btn { background:var(--surface); color:var(--paars); border-color:#fff; }
.impersonation-banner .btn:hover { background:rgba(255,255,255,0.85); }
/* Auto-fill-banner bovenaan Account/Woning — trigger detectie uit koppelingen. */
.auto-fill-banner {
display:flex; justify-content:space-between; align-items:center;
gap:14px; padding:12px 16px;
background:var(--mist); border:1px solid var(--munt); border-radius:11px;
margin-bottom:14px;
}
/* SUPPLIER-CARD — Mijn-huis Energieleverancier-card met logo-tile. */
.supplier-card { padding-bottom:0; }
.supplier-head {
display:grid; grid-template-columns:auto minmax(0, 1fr) auto;
gap:14px; align-items:center; margin-bottom:14px;
}
.supplier-logo {
width:46px; height:46px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
color:#fff; font-weight:700; font-size:14px;
letter-spacing:-0.3px; flex-shrink:0;
text-transform:uppercase;
}
.supplier-meta h3 { font-size:17px; font-weight:600; color:var(--text); margin:0; display:flex; align-items:center; flex-wrap:wrap; }
.supplier-meta .sub { font-size:12px; color:var(--text-muted); margin-top:3px; }
.supplier-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
@media (max-width:640px) {
.supplier-head { grid-template-columns:auto 1fr; gap:10px; }
.supplier-actions { grid-column:1 / -1; justify-content:flex-end; margin-top:6px; }
}
.supplier-highlight {
display:flex; justify-content:space-between; align-items:center;
padding:12px 14px; margin:0 -2px 12px;
background:var(--mist); border-radius:9px;
}
.supplier-highlight .hl-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--spar); font-weight:500; }
.supplier-highlight .hl-value { font-size:18px; font-weight:600; color:var(--text); letter-spacing:-0.3px; }
.supplier-highlight .hl-sub { font-size:12px; color:var(--text-muted); margin-left:3px; font-weight:400; letter-spacing:0; }
/* INTEGRATIES-PAGE — categorie-secties met gekleurde kop-iconen. */
.integ-cat { margin-bottom:24px; }
.integ-cat-head {
display:flex; align-items:center; gap:12px;
margin-bottom:10px; padding:0 4px;
}
.integ-cat-ico {
width:38px; height:38px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
font-size:18px; flex-shrink:0;
}
.integ-cat-head h2 { font-size:15px; font-weight:600; color:var(--text); margin:0; }
.integ-cat-head p { font-size:12px; color:var(--text-muted); margin:2px 0 0; }
/* Compacte legenda boven charts (verbruik/productie/teruglevering). */
.chart-legend {
display:flex; align-items:center; gap:6px;
font-size:11px; color:var(--text-muted);
flex-wrap:wrap;
}
.chart-legend > span:not(.legend-dot) { margin-right:8px; }
.legend-dot { width:9px; height:9px; border-radius:2px; display:inline-block; }
/* Device breakdown (donut + list) */
.donut-wrap {
display:flex; align-items:center; justify-content:center;
position:relative; padding:14px 0;
}
.donut-svg { width:160px; height:160px; transform:rotate(-90deg); }
.donut-center {
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
pointer-events:none;
}
.donut-center strong { font-size:28px; font-weight:500; color:var(--text); letter-spacing:-0.5px; line-height:1; }
.donut-center small { font-size:11px; color:var(--text-muted); margin-top:2px; }
.device-row-bd {
display:grid; grid-template-columns:14px 1fr auto auto; gap:10px;
padding:9px 0; align-items:center;
border-bottom:1px solid var(--line);
font-size:13px;
}
.device-row-bd:last-child { border-bottom:0; }
.device-row-bd .swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.device-row-bd .name { color:var(--text); }
.device-row-bd .name small { display:block; color:var(--text-muted); font-size:11px; margin-top:1px; }
.device-row-bd .kwh { color:var(--text); font-variant-numeric:tabular-nums; }
.device-row-bd .pct { color:var(--text-muted); min-width:36px; text-align:right; font-variant-numeric:tabular-nums; }
/* Benchmark bar */
.benchmark-bar-wrap {
position:relative; height:28px; border-radius:7px;
overflow:hidden; background:var(--grijs);
margin:14px 0 8px;
}
.benchmark-zone { position:absolute; top:0; bottom:0; }
.benchmark-zone.low { left:0; width:33.3%; background:rgba(34,179,107,0.15); }
.benchmark-zone.avg { left:33.3%; width:33.4%; background:rgba(186,117,23,0.18); }
.benchmark-zone.high { left:66.7%; width:33.3%; background:rgba(163,45,45,0.15); }
.benchmark-zone-label {
position:absolute; top:50%; transform:translateY(-50%);
font-size:10px; color:var(--text-muted); font-weight:500;
}
.benchmark-zone.low .benchmark-zone-label { left:8px; }
.benchmark-zone.avg .benchmark-zone-label { left:50%; transform:translate(-50%, -50%); }
.benchmark-zone.high .benchmark-zone-label { right:8px; }
.benchmark-scale {
display:flex; justify-content:space-between;
font-size:10px; color:var(--text-muted); margin-top:4px;
}
.benchmark-stats {
display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
}
.bs-l { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; }
.bs-v { font-size:18px; font-weight:500; color:var(--text); margin-top:3px; letter-spacing:-0.3px; }
/* Month table */
.month-table { width:100%; border-collapse:collapse; font-size:13px; }
.month-table th {
font-size:10px; text-transform:uppercase; letter-spacing:0.5px;
color:var(--text-muted); font-weight:500;
padding:10px 12px; text-align:left;
background:var(--grijs); border-bottom:1px solid var(--line-2);
}
.month-table td {
padding:11px 12px; border-bottom:1px solid var(--line);
font-variant-numeric:tabular-nums;
}
.month-table tr.is-now { background:var(--mist); }
.month-table tr.is-now td { font-weight:500; color:var(--text); }
.month-table .month-name { font-weight:500; color:var(--text); }
.month-table .month-name .yr { color:var(--text-muted); font-size:11px; font-weight:400; margin-left:4px; }
.month-table .num { text-align:right; }
/* Maand-vs-vorige-maand-pijltje naast de Verbruik-cel. Down = verbruik
gedaald = goed (groen); up = gestegen = waarschuwing (oranje-ish). */
.month-table .mo-trend { font-size:11px; font-weight:500; margin-left:6px; letter-spacing:0; }
.month-table .mo-trend.is-down { color:var(--slim); }
.month-table .mo-trend.is-up { color:var(--text-muted); }
/* Verbruik responsive */
@media (max-width:1100px) {
.three-two-col { grid-template-columns:1fr; }
}
@media (max-width:720px) {
.month-table .col-hide-mobile { display:none; }
.day-chart { height:160px; }
}
/* ============== DASHBOARD COMBO-CHART (verbruik + prijs) ============== */
.combo-chart {
display:grid; grid-template-columns:34px 1fr 38px;
align-items:stretch; height:240px; margin:14px 0 6px;
position:relative;
}
.ca-y { display:flex; flex-direction:column-reverse; justify-content:space-between; padding:6px 0; }
.ca-y-l { text-align:right; padding-right:6px; }
.ca-y-r { text-align:left; padding-left:6px; }
.ca-y span { font-size:10px; color:var(--text-muted); line-height:1; }
.ca-y span small { display:block; color:var(--munt); margin-top:1px; }
.ca-bars {
position:relative;
display:grid; grid-template-columns:repeat(24, 1fr);
align-items:stretch; gap:3px;
border-bottom:1px solid var(--line-2);
padding:0 2px;
}
.ca-bar-stack {
position:relative; min-width:0; height:100%;
}
.ca-bar {
position:absolute; left:0; right:0;
min-height:1px;
transition:opacity 0.15s;
}
.ca-bar.import { background:var(--blad); border-radius:3px 3px 0 0; }
.ca-bar.export { background:var(--zon, #F0997B); border-radius:0 0 3px 3px; }
/* Eigen-zon-verbruik onderaan de stack — flat top als er net-import op
gestackt wordt, anders zelf ook rounded top. */
.ca-bar.solar { background:var(--solar-soft); border-top:1px solid var(--solar); border-radius:3px 3px 0 0; }
.ca-bar-stack:has(.ca-bar.import) .ca-bar.solar { border-radius:0; }
.ca-bar-stack:hover .ca-bar { opacity:0.75; }
.ca-bar-stack.is-now .ca-bar.import { background:var(--slim); }
.combo-chart .zero-line {
position:absolute; left:0; right:0;
height:1px; background:rgba(4,46,29,0.35);
pointer-events:none; z-index:2;
}
.ca-line-svg {
position:absolute; inset:0;
pointer-events:none;
width:100%; height:100%;
}
.ca-line-svg polyline,
.ca-line-svg path {
fill:none; stroke:var(--duur); stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
vector-effect:non-scaling-stroke;
}
.ca-line-svg polyline.forecast-line {
stroke:var(--solar-line); stroke-width:2;
stroke-dasharray:4 3; opacity:0.9;
}
.ca-line-svg path.forecast-band {
fill:var(--solar-line); opacity:0.16; stroke:none;
}
.ca-now-line {
position:absolute; top:0; bottom:0;
border-left:2px dashed var(--donker);
pointer-events:none;
}
.ca-now-line::before {
content:'NU ' attr(data-time);
position:absolute; top:-22px; left:-26px;
background:var(--donker); color:#fff;
font-size:10px; font-weight:600; letter-spacing:0.3px;
padding:3px 7px; border-radius:5px;
white-space:nowrap;
}
.ca-x-axis {
display:grid; grid-template-columns:34px 1fr 38px; gap:0;
font-size:10px; color:var(--text-muted); margin-top:4px;
}
.ca-x-labels { display:grid; grid-template-columns:repeat(8, 1fr); padding:0 2px; }
.ca-x-labels span { text-align:left; }
.combo-legend {
display:flex; gap:14px; align-items:center; flex-wrap:wrap;
font-size:11px; color:var(--text-muted);
}
.combo-legend-swatch {
display:inline-flex; align-items:center; gap:5px;
}
.combo-legend-swatch::before {
content:''; width:14px; height:6px; border-radius:2px;
display:inline-block;
}
.combo-legend-swatch.kw::before { background:var(--blad); }
.combo-legend-swatch.kw-export::before { background:var(--zon, #F0997B); }
.combo-legend-swatch.solar::before { background:var(--solar); }
.combo-legend-swatch.solar-forecast::before {
background:transparent; height:0;
border-top:2px dashed var(--solar-line);
border-radius:0;
}
.combo-legend-swatch.eur::before { background:var(--duur); height:2px; }
/* APPARATEN IN HUIS (placeholder cards) */
.device-list { display:flex; flex-direction:column; }
.device-row {
display:grid; grid-template-columns:36px 1fr auto; gap:12px;
padding:11px 0; border-bottom:1px solid var(--line); align-items:center;
}
.device-row:last-child { border-bottom:0; }
.device-row.is-active { background:var(--mist); margin:0 -16px; padding-left:16px; padding-right:16px; border-radius:9px; border-bottom-color:transparent; }
.device-row .ico {
width:36px; height:36px; border-radius:9px;
background:var(--mist); color:var(--spar);
display:inline-flex; align-items:center; justify-content:center;
font-size:18px; flex-shrink:0;
}
.device-row.is-active .ico { background:var(--slim); color:#fff; }
.device-row.muted .ico { background:var(--grijs); color:var(--text-muted); }
.device-row .name { font-size:13px; font-weight:500; color:var(--text); }
.device-row .name small { display:block; font-weight:400; color:var(--text-muted); font-size:11px; margin-top:1px; }
.device-row .power { font-size:13px; font-weight:500; color:var(--text); }
.add-device-row {
display:flex; align-items:center; justify-content:center; gap:8px;
margin-top:14px; padding:14px;
border:1.5px dashed var(--line-2); border-radius:11px;
font-size:13px; color:var(--spar); cursor:pointer;
}
.add-device-row:hover { background:var(--mist); border-color:var(--munt); }
/* MONTHLY-GRID (Deze maand-card) */
.month-grid {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
margin-bottom:14px;
}
.month-cell .mo-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.month-cell .mo-value { font-size:22px; font-weight:500; color:var(--text); margin-top:3px; letter-spacing:-0.3px; }
.month-cell .mo-value.green { color:var(--spar); }
.month-cell .mo-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
.month-cell.solar { background:#FFFBEB; border-radius:8px; padding:10px; border:1px solid var(--solar-soft); }
.month-cell.solar .mo-label { color:var(--duur); }
/* SLIM-SCORE RING */
.score-ring {
width:120px; height:120px; margin:8px auto 14px;
position:relative;
}
.score-ring svg { transform:rotate(-90deg); }
.score-ring-bg { fill:none; stroke:var(--mist); stroke-width:10; }
.score-ring-fill { fill:none; stroke:var(--slim); stroke-width:10; stroke-linecap:round; transition:stroke-dasharray 0.4s; }
.score-ring-text {
position:absolute; inset:0;
display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.score-ring-text strong { font-size:28px; font-weight:500; color:var(--text); letter-spacing:-0.5px; }
.score-ring-text small { font-size:11px; color:var(--spar); font-weight:500; }
.score-stats { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.score-stat { display:flex; justify-content:space-between; }
.score-stat .v.good { color:var(--spar); font-weight:500; }
.score-stat .v.warn { color:var(--duur); font-weight:500; }
/* ============== DASHBOARD KPI-ROW ============== */
.kpi-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:14px; }
.kpi {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
padding:16px 18px;
}
.kpi.highlight { background:var(--mist); border-color:var(--munt); }
.kpi.solar { background:#FFFBEB; border-color:var(--solar-soft); }
/* Sparkline-bars in een KPI-tegel — laatste ~5 min vermogen-trend. */
.kpi-spark {
display:block; width:100%; height:42px; margin-top:10px;
overflow:visible;
}
.kpi-spark-zero { stroke:var(--line-2); stroke-width:0.4; stroke-dasharray:1.5,1.5; }
.kpi-spark .is-import { fill:var(--blad); }
.kpi-spark .is-export { fill:var(--duur); }
.kpi.solar .kpi-label { color:var(--duur); }
.kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; }
.kpi-value { font-size:24px; font-weight:500; letter-spacing:-0.4px; color:var(--text); margin:6px 0 4px; line-height:1.1; }
.kpi-value .unit { font-size:12px; color:var(--text-muted); margin-left:3px; font-weight:400; letter-spacing:0; }
.kpi-delta { font-size:11px; color:var(--text-muted); }
.kpi-delta.up { color:var(--rood); }
.kpi-delta.down { color:var(--spar); }
.kpi-info-btn { background:none; border:none; padding:0 0 0 4px; cursor:pointer; color:var(--text-muted); opacity:0.6; vertical-align:-2px; transition:opacity 0.15s; }
.kpi-info-btn:hover, .kpi-info-btn[aria-expanded="true"] { opacity:1; color:var(--spar); }
.kpi-info-panel { margin-top:10px; padding:10px 12px; background:var(--crème); border-left:3px solid var(--spar); border-radius:4px; font-size:12px; line-height:1.5; color:var(--text); }
.kpi-info-panel strong { display:block; margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--spar); }
.kpi-info-panel p { margin:0 0 6px; }
.kpi-info-panel p:last-child { margin-bottom:0; }
/* Combined fase-balans-tile — drie regels L1/L2/L3 in één KPI ipv 3 losse */
.kpi.kpi-phases { padding:14px 16px; }
.phase-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.phase-line {
display:grid; grid-template-columns:24px 1fr auto;
align-items:baseline; gap:10px; font-size:13px;
}
.phase-tag {
font-size:10px; font-weight:600;
color:var(--text-muted); background:var(--mist);
padding:2px 6px; border-radius:4px;
text-align:center; align-self:center;
letter-spacing:0.3px;
}
.phase-power { font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
.phase-power.is-export { color:var(--duur); }
.phase-power.is-high { color:var(--rood); }
.phase-meta { font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
@media (max-width:1100px) { .kpi-row { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .kpi-row { grid-template-columns:1fr; } }
/* GREETING + LIVE STATUS */
.greeting-bar {
display:flex; align-items:flex-start; justify-content:space-between;
gap:14px; margin-bottom:18px; flex-wrap:wrap;
}
.greet-h { font-size:24px; font-weight:500; letter-spacing:-0.4px; color:var(--text); margin-bottom:2px; }
.greet-sub { font-size:13px; color:var(--text-muted); }
.greeting-pills { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
/* TIPS (Slim doen vandaag) */
.tip-list { display:flex; flex-direction:column; gap:10px; }
.tip {
background:var(--crème); border-left:3px solid var(--slim);
padding:11px 14px; border-radius:0 9px 9px 0;
font-size:13px;
}
.tip.do { border-left-color:var(--slim); }
.tip.avoid { border-left-color:var(--duur); }
.tip.plan { border-left-color:var(--info); }
.tip.wait { border-left-color:var(--text-muted); }
.tip-h { font-weight:500; color:var(--text); overflow-wrap:anywhere; }
.tip-s { font-size:11px; color:var(--text-muted); margin-top:2px; overflow-wrap:anywhere; }
/* ============== MIJN HUIS — HOME-HEADER ============== */
.home-header {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff; border-radius:16px;
padding:24px 28px; margin-bottom:14px;
display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
position:relative; overflow:hidden;
}
.home-header::before {
content:''; position:absolute; top:-100px; right:-100px;
width:300px; height:300px;
background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
}
.home-header-content { position:relative; z-index:2; }
.home-header h2 { font-size:22px; font-weight:500; color:#fff; letter-spacing:-0.3px; margin-bottom:4px; }
.home-header .home-addr { font-size:13px; color:var(--munt); margin-bottom:18px; }
.home-stats { display:flex; gap:28px; flex-wrap:wrap; }
.home-stat-l { font-size:11px; color:var(--munt); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.home-stat-v { font-size:18px; color:#fff; font-weight:500; margin-top:3px; }
.home-stat-v.label-a { color:var(--blad); }
.home-illu {
position:relative; z-index:2;
width:120px; height:100px;
display:flex; align-items:center; justify-content:center;
font-size:64px;
opacity:0.85;
}
/* MIJN HUIS — Card-head met icon */
.card-head-icon {
display:flex; align-items:center; gap:14px; margin-bottom:18px;
}
.card-head-icon .ico {
width:36px; height:36px; border-radius:9px;
background:var(--mist); color:var(--spar);
display:flex; align-items:center; justify-content:center;
font-size:18px; flex-shrink:0;
}
.card-head-icon h3 { font-size:15px; font-weight:500; color:var(--text); }
.card-head-icon .sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.card-head-icon .right { margin-left:auto; }
/* KV-list (key-value rows) */
.kv-list { display:flex; flex-direction:column; }
.kv-row {
display:grid; grid-template-columns:auto 1fr; gap:10px;
padding:10px 0; font-size:13px;
border-bottom:1px solid var(--line);
}
.kv-row:last-child { border-bottom:0; }
.kv-row .kv-label { color:var(--text-muted); }
.kv-row .kv-value { color:var(--text); font-weight:500; text-align:right; }
.kv-row .kv-value.mono { font-family:ui-monospace, 'SF Mono', monospace; font-size:12px; font-weight:400; }
.kv-row .kv-value small { display:block; color:var(--text-muted); font-weight:400; font-size:11px; margin-top:2px; }
/* Status-pill ok/warn/off */
.status-pill {
display:inline-flex; align-items:center; gap:5px;
padding:2px 8px; border-radius:999px;
font-size:11px; font-weight:500;
}
.status-pill::before {
content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.status-pill.ok { background:var(--mist); color:var(--spar); }
.status-pill.ok::before { background:var(--slim); box-shadow:0 0 0 3px rgba(34,179,107,0.2); animation:pulse 1.6s ease-in-out infinite; }
.status-pill.warn { background:var(--warn-bg); color:var(--duur); }
.status-pill.warn::before { background:var(--duur); }
.status-pill.off { background:var(--grijs); color:var(--text-muted); }
.status-pill.off::before { background:var(--steen); }
/* METER-LIVE (4 cells) */
.meter-live {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
background:var(--crème); border-radius:11px; padding:14px 16px;
margin-top:14px;
}
.meter-live-cell .ml-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:500; }
.meter-live-cell .ml-value { font-size:18px; font-weight:500; color:var(--text); margin-top:3px; font-variant-numeric:tabular-nums; }
.meter-live-cell .ml-value .ml-unit { font-size:11px; color:var(--text-muted); font-weight:400; margin-left:2px; }
.meter-live-cell.export .ml-value { color:var(--duur); }
/* MIJN HUIS RESPONSIVE */
@media (max-width:780px) {
.home-header { grid-template-columns:1fr; padding:20px 22px; }
.home-illu { display:none; }
.home-stats { gap:18px; }
}
/* ============== TARIEVEN-PAGINA — HERO STRIP / ALERT / etc. ============== */
.alert-strip {
display:grid; grid-template-columns:auto 1fr auto; gap:14px;
padding:14px 18px;
background:var(--mist); border:1px solid var(--munt); border-radius:12px;
margin-bottom:14px; align-items:center;
}
.alert-strip-icon {
width:36px; height:36px; border-radius:9px;
background:var(--slim); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.alert-strip-h { font-size:13px; font-weight:500; color:var(--text); }
.alert-strip-s { font-size:12px; color:var(--spar); margin-top:2px; }
.hero-strip {
display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:12px;
margin-bottom:14px;
}
.hc { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.hc.now {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff; border-color:transparent;
}
.hc-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
color:var(--text-muted); font-weight:500;
display:inline-flex; align-items:center; gap:6px;
}
.hc.now .hc-eyebrow { color:var(--blad); }
.hc-eyebrow .live-dot {
width:7px; height:7px; border-radius:50%; background:var(--blad);
box-shadow:0 0 0 3px rgba(79,203,142,0.25);
animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity:1; }
50% { opacity:0.4; }
}
.hc-big {
font-size:24px; font-weight:500; letter-spacing:-0.4px;
color:var(--text); margin:6px 0 4px; line-height:1.1;
}
.hc.now .hc-big { font-size:30px; color:#fff; }
.hc-big .unit { font-size:13px; color:var(--text-muted); margin-left:3px; font-weight:400; letter-spacing:0; }
.hc.now .hc-big .unit { color:var(--munt); }
.hc-meta { font-size:11px; color:var(--text-muted); line-height:1.4; }
.hc.now .hc-meta { color:var(--munt); }
.hc-pill {
display:inline-flex; align-items:center; gap:4px;
font-size:11px; font-weight:500;
padding:3px 8px; border-radius:999px;
margin-top:6px;
}
.hc-pill.up { background:var(--rood-bg); color:var(--rood); }
.hc-pill.down { background:var(--mist); color:var(--spar); }
.hc.now .hc-pill.down { background:rgba(34,179,107,0.2); color:var(--blad); }
.hc.now .hc-pill.up { background:rgba(163,45,45,0.25); color:#FCC; }
/* TABS-segmented (chart-tabs) */
.tabs-row { display:flex; gap:2px; padding:3px; background:var(--grijs); border-radius:10px; }
.tabs-row button {
font:inherit; cursor:pointer; border:0; background:transparent;
padding:7px 14px; border-radius:7px;
font-size:12px; font-weight:500; color:var(--text-muted);
}
.tabs-row button.is-active {
background:var(--surface); color:var(--text);
box-shadow:0 1px 3px rgba(4,46,29,0.06);
}
.tabs-row button[disabled] { opacity:0.4; cursor:not-allowed; }
/* DAY-META (4 cellen onder chart) */
.day-meta {
display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
margin-top:14px; padding-top:14px;
border-top:1px solid var(--line);
}
.day-meta-cell { font-size:12px; }
.day-meta-l { color:var(--text-muted); margin-bottom:3px; }
.day-meta-v { font-weight:500; color:var(--text); }
.day-meta-v.cheap { color:var(--spar); }
.day-meta-v.expensive { color:var(--rood); }
.day-meta-delta { font-size:11px; margin-top:2px; font-weight:500; }
.day-meta-delta.is-down { color:var(--spar); }
.day-meta-delta.is-up { color:var(--rood); }
/* Tomorrow ghost-line over today's bars in vergelijk-mode */
.bars .compare-overlay {
position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; overflow:visible;
}
.bars .compare-overlay polyline {
fill:none; stroke:var(--donker); stroke-width:1.5;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:3 3; opacity:0.7;
vector-effect:non-scaling-stroke;
}
/* Solar-forecast als sun-arc-polyline boven de price-bars. z-index:4
zodat 'ie boven de NU-bar-outline (z-index:3) zichtbaar blijft, maar
onder de NU-marker-lijn (z-index:5) die als anker dient. */
.bars .solar-overlay {
position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; overflow:visible;
z-index:4;
}
.bars .solar-overlay polyline {
fill:none; stroke:var(--solar-line); stroke-width:2;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:4 3; opacity:0.9;
vector-effect:non-scaling-stroke;
}
.solar-legend {
display:flex; align-items:center; gap:6px;
font-size:12px; color:var(--text-muted); margin-top:8px;
}
.solar-legend .swatch {
display:inline-block; width:14px; height:0;
border-top:2px dashed var(--solar-line);
}
.solar-legend strong { color:var(--text); font-weight:600; }
/* TWO-COL grid (Finder + Breakdown) */
.two-col { display:grid; grid-template-columns:1.1fr 1fr; gap:14px; margin-bottom:14px; }
/* FINDER */
.finder-controls {
display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;
}
@media (max-width:600px) { .finder-controls { grid-template-columns:1fr; } }
.finder-result {
background:var(--mist); border:1px solid var(--munt); border-radius:11px;
padding:14px 16px;
}
.finder-result-l {
font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
color:var(--spar); font-weight:500;
}
.finder-result-h {
font-size:22px; font-weight:500; color:var(--text);
margin:4px 0; letter-spacing:-0.3px;
}
.finder-result-meta { font-size:12px; color:var(--spar); }
.finder-alts {
margin-top:10px; padding-top:10px;
border-top:1px solid rgba(34,179,107,0.2);
display:flex; flex-direction:column; gap:5px;
font-size:12px; color:var(--text-muted);
}
.finder-alts strong { color:var(--text); font-weight:500; }
.finder-empty {
background:var(--grijs); border:1px solid var(--line);
padding:14px 16px; border-radius:11px;
font-size:13px; color:var(--text-muted);
}
/* BREAKDOWN STACKED BAR */
.bd-bar {
display:flex; height:24px; border-radius:9px; overflow:hidden;
margin-bottom:14px; border:1px solid var(--line);
}
.bd-bar > div { transition:filter 0.15s; }
.bd-bar > div:hover { filter:brightness(1.1); }
.bd-list { display:flex; flex-direction:column; gap:8px; }
.bd-li {
display:grid; grid-template-columns:14px 1fr auto; gap:10px;
align-items:center; font-size:13px;
}
.bd-li .swatch { width:14px; height:14px; border-radius:3px; flex-shrink:0; }
.bd-li .name { color:var(--text); }
.bd-li .name small { display:block; color:var(--text-muted); font-size:11px; margin-top:1px; }
.bd-li .val { color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.bd-total {
padding-top:10px; margin-top:10px; border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:baseline;
font-size:13px; color:var(--text-muted);
}
.bd-total strong { font-weight:600; color:var(--spar); font-size:16px; font-variant-numeric:tabular-nums; }
/* UURTABEL */
.uurtable { width:100%; border-collapse:collapse; font-size:13px; }
.uurtable th, .uurtable td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.uurtable th {
font-size:11px; text-transform:uppercase; letter-spacing:0.5px;
color:var(--text-muted); font-weight:500;
background:var(--grijs); border-bottom:1px solid var(--line-2);
}
.uurtable .num { text-align:right; font-variant-numeric:tabular-nums; }
.uurtable tr.now-row { background:var(--mist); }
.uurtable tr.now-row td { font-weight:500; color:var(--text); }
.level-tag {
display:inline-block; padding:2px 9px; border-radius:6px;
font-size:11px; font-weight:500;
}
.level-tag.lv-very-low { background:var(--heat-cheap-1); color:var(--spar); }
.level-tag.lv-low { background:var(--heat-cheap-2); color:#fff; }
.level-tag.lv-medium { background:var(--heat-mid); color:#7A4F1A; }
.level-tag.lv-high { background:var(--heat-warm); color:#fff; }
.level-tag.lv-peak { background:var(--heat-hot); color:#fff; }
.level-tag.lv-negative { background:var(--heat-cold); color:#fff; }
.vs-bar-track {
display:inline-block; width:80px; height:6px;
background:var(--grijs); border-radius:3px; vertical-align:middle;
position:relative; overflow:visible;
}
.vs-bar-fill {
position:absolute; top:0; height:6px;
background:var(--slim); border-radius:3px;
}
.vs-bar-fill.up { background:var(--rood); }
.vs-up { color:var(--rood); font-weight:500; }
.vs-down { color:var(--spar); font-weight:500; }
.uurtable-foot {
text-align:center; padding:14px 0;
font-size:12px; color:var(--spar);
border-top:1px solid var(--line);
}
.uurtable-foot button { background:transparent; border:0; color:var(--spar); font:inherit; cursor:pointer; font-weight:500; }
.uurtable-foot button:hover { text-decoration:underline; }
/* CHART NU-LIJN — NU-badge zweeft boven de chart, gestreepte lijn omlaag. */
.bar-chart .bars { position:relative; overflow:visible; }
.now-line {
position:absolute; top:0; bottom:0;
border-left:2px dashed var(--donker);
pointer-events:none;
z-index:5;
}
.now-line::before {
content:'NU'; position:absolute;
top:-22px; left:50%; transform:translateX(-50%);
background:var(--donker); color:#fff;
font-size:11px; font-weight:600; letter-spacing:0.3px;
padding:3px 8px; border-radius:4px;
white-space:nowrap;
}
@media (max-width:980px) {
.two-col, .hero-strip { grid-template-columns:1fr; }
.day-meta { grid-template-columns:repeat(2, 1fr); }
}
/* ============== BAR CHART ============== */
.bar-chart { padding-top:28px; }
.bar-chart .bars {
position:relative;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
height:160px;
gap:1px;
}
.bar-chart .bar-lane { position:relative; min-width:0; cursor:pointer; }
.bar-chart .bar {
position:absolute; left:0; right:0;
min-height:1px;
border-radius:2px 2px 0 0;
transition:opacity 0.15s;
}
.bar-chart .bar.below-zero { border-radius:0 0 2px 2px; }
.bar-chart .bar-lane:hover .bar { opacity:0.7; }
.bar-chart .bar.bar-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.zero-line {
position:absolute; left:0; right:0;
height:1px; background:rgba(4,46,29,0.35);
pointer-events:none; z-index:2;
}
.zero-line::after {
content:'0'; position:absolute; right:-2px; top:-7px;
font-size:9px; color:var(--text-muted); background:var(--surface);
padding:0 4px; border-radius:3px;
}
.bar-axis { display:grid; grid-template-columns:repeat(4, 1fr); margin-top:6px; font-size:11px; color:var(--text-muted); }
/* WEEK-OVERZICHT op /app/tarieven — 7 dagen × 24 uur heatmap.
Day-label-kolom + 24 cell-kolommen. Cellen gekleurd via percentile-
based heat-mapping (zelfde palet als de homepage-heatmap). */
.weekmap-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.weekmap { display:flex; flex-direction:column; gap:4px; }
.weekmap-axis {
display:grid; grid-template-columns:54px repeat(24, 1fr);
font-size:10px; color:var(--text-muted); margin-bottom:4px;
align-items:end;
}
.weekmap-axis .weekmap-axis-label { text-transform:uppercase; letter-spacing:0.5px; font-size:10px; }
.weekmap-row {
display:grid; grid-template-columns:54px repeat(24, 1fr);
gap:3px; align-items:stretch;
}
.weekmap-day {
display:flex; flex-direction:column; justify-content:center;
font-size:12px; line-height:1.2; padding-right:8px;
}
.weekmap-day strong { color:var(--text); font-weight:500; }
.weekmap-day small { color:var(--text-muted); font-size:10px; }
.weekmap-cell {
height:24px; border-radius:4px; cursor:default;
transition:transform 0.1s;
}
.weekmap-cell:hover { transform:scale(1.08); z-index:2; }
.weekmap-cell.is-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; }
.weekmap-foot {
display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
font-size:13px; color:var(--text-muted);
}
@media (max-width:720px) {
.weekmap-axis, .weekmap-row { grid-template-columns:42px repeat(24, 1fr); gap:2px; }
.weekmap-cell { height:18px; border-radius:3px; }
.weekmap-day { font-size:11px; padding-right:4px; }
.weekmap-day small { font-size:9px; }
}
/* Hero mini-bars op homepage — kleinere variant met dezelfde zero-line */
.hpc-mini-bars { position:relative; }
.hpc-mini-bar-lane { position:relative; min-width:0; }
.hpc-mini-bar {
position:absolute; left:0; right:0;
min-height:1px; border-radius:1px;
}
.hpc-mini-bar.below-zero { border-radius:0 0 1px 1px; }
.hpc-mini-bar.is-now { outline:2px solid var(--donker); outline-offset:1px; z-index:3; border-radius:2px; }
.hpc-mini-bars .zero-line { background:rgba(4,46,29,0.25); }
.hpc-mini-bars .zero-line::after { display:none; }
@media (max-width:720px) {
.bar-chart .bars { height:120px; }
}
/* ============== DROPDOWN (custom select replacement) ============== */
.dropdown { position:relative; display:inline-block; }
.dropdown.is-block { display:block; width:100%; }
.dropdown-trigger {
background:var(--surface); border:1px solid var(--line-2); border-radius:8px;
padding:8px 12px 8px 14px; font-size:13px; color:var(--text);
display:inline-flex; align-items:center; gap:10px; cursor:pointer;
min-height:36px; line-height:1; min-width:140px;
transition:border-color 0.12s, box-shadow 0.12s;
}
.dropdown-trigger.is-block { width:100%; justify-content:space-between; }
.dropdown-trigger:hover { border-color:var(--slim); }
.dropdown.is-open .dropdown-trigger { border-color:var(--slim); box-shadow:0 0 0 3px rgba(34,179,107,0.12); }
.dropdown-label { flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dropdown-caret { color:var(--text-muted); flex-shrink:0; transition:transform 0.15s; }
.dropdown.is-open .dropdown-caret { transform:rotate(180deg); color:var(--spar); }
.dropdown-panel {
position:absolute; top:calc(100% + 6px); right:0;
min-width:100%; max-height:280px; overflow-y:auto;
background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
box-shadow:0 14px 36px rgba(4,46,29,0.14);
padding:6px; z-index:80;
display:flex; flex-direction:column; gap:1px;
animation:dropdownIn 0.12s ease-out;
}
.dropdown-panel.align-left { left:0; right:auto; }
.dropdown-option {
background:transparent; border:0; cursor:pointer;
padding:9px 12px; border-radius:6px;
font-size:13px; color:var(--text); text-align:left;
white-space:nowrap;
display:flex; flex-direction:column; gap:2px;
}
.dropdown-option:hover { background:var(--mist); }
.dropdown-option.is-selected { background:var(--mist); color:var(--spar); font-weight:500; }
.dropdown-option:focus-visible { outline:2px solid var(--slim); outline-offset:1px; }
.dropdown-option-sub { font-size:11px; color:var(--text-muted); font-weight:400; }
.dropdown.size-sm .dropdown-trigger { padding:6px 10px 6px 12px; font-size:12px; min-height:32px; min-width:120px; }
@keyframes dropdownIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
/* ============== LOADING STATES ============== */
.skeleton {
background:linear-gradient(90deg, var(--grijs) 0%, #fafaf6 50%, var(--grijs) 100%);
background-size:200% 100%;
animation:shimmer 1.4s ease-in-out infinite;
border-radius:8px;
}
.skeleton-line { height:14px; margin:8px 0; }
.skeleton-line.h-large { height:28px; max-width:60%; }
.skeleton-card { padding:18px; }
.skeleton-block { height:160px; margin-top:12px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
/* ============== MODAL (app-confirm-dialog) ============== */
.modal-backdrop {
position:fixed; inset:0; z-index:10000;
background:rgba(4,46,29,0.45);
display:flex; align-items:center; justify-content:center;
padding:20px;
animation:fadeIn 0.15s ease-out;
}
/* Modal moet boven toaster (z-index 9999) staan — een blocking confirm-
dialoog mag nooit ge-overlapt worden door een achtergrond-toast. */
.modal {
background:var(--surface); border-radius:14px; padding:24px 26px;
max-width:420px; width:100%;
box-shadow:0 20px 60px rgba(0,0,0,0.3);
animation:scaleIn 0.18s ease-out;
}
.modal-title { font-size:18px; color:var(--text); margin-bottom:8px; }
.modal-body { font-size:14px; color:var(--text-muted); margin-bottom:18px; line-height:1.5; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
/* ============== APP LAYOUT MOBILE ============== */
/* Mobile top-bar (logo + hamburger) — boven 780px verborgen, daaronder
vervangt deze de always-visible sidebar. */
.app-mobile-bar { display:none; }
.mobile-nav-backdrop { display:none; }
@media (max-width:780px) {
.app-layout { grid-template-columns:minmax(0, 1fr); }
/* Mobile top-bar: logo + burger, sticky aan de top zodat 'ie meescroll't. */
.app-mobile-bar {
display:flex; align-items:center; justify-content:space-between;
padding:10px 16px;
background:var(--surface); border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:60;
}
.app-mobile-bar .logo img { height:28px; }
.mobile-burger {
display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:0; cursor:pointer;
width:40px; height:40px; border-radius:8px;
color:var(--text); padding:0;
}
.mobile-burger:hover { background:var(--mist); }
/* Sidebar-cell wordt drawer: verborgen totdat .mobile-nav-open op shell. */
.sidebar-cell {
position:fixed; top:0; right:0; bottom:0;
width:min(85vw, 320px);
z-index:200;
transform:translateX(100%); transition:transform 0.22s ease-out;
border-right:0; border-left:1px solid var(--line);
box-shadow:-12px 0 32px rgba(4,46,29,0.12);
}
.app-shell.mobile-nav-open .sidebar-cell { transform:translateX(0); }
/* Backdrop: dimt content en sluit drawer bij klik. */
.app-shell.mobile-nav-open .mobile-nav-backdrop {
display:block; position:fixed; inset:0;
background:rgba(4,46,29,0.32); z-index:150;
animation:fadeIn 0.18s;
}
/* Sidebar-content blijft verticaal (zoals desktop), maar past nu binnen
de drawer. Logo bovenin verberg je — de mobile-bar heeft 'm al. */
.sidebar {
height:100vh; overflow-y:auto; overflow-x:hidden;
padding:18px 14px;
}
.sidebar > .logo { display:none; }
main.app-main { padding:18px 16px 32px; min-width:0; }
}
/* =================================================================
PUBLIC HOMEPAGE — marketing landing voor niet-ingelogde bezoekers
================================================================= */
.public-home { max-width:1200px; margin:0 auto; padding:0 24px; width:100%; overflow-x:hidden; }
.public-home > section, .public-home > div { max-width:100%; }
/* HERO */
.hero-section {
display:grid; grid-template-columns:1fr 1.1fr; gap:48px;
padding:64px 0 56px;
align-items:center;
}
.hero-eyebrow {
font-size:12px; text-transform:uppercase; letter-spacing:1px;
color:var(--slim); font-weight:500; margin-bottom:14px;
}
.hero-h {
font-size:48px; font-weight:500; letter-spacing:-1px;
line-height:1.1; color:var(--text); margin-bottom:18px;
}
.hero-h .hi { color:var(--slim); }
.hero-sub {
font-size:16px; color:var(--text-muted); line-height:1.6;
max-width:560px; margin-bottom:24px;
}
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.btn-large { padding:13px 24px; font-size:14px; }
.hero-trust { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); }
.hero-trust span::before { content:'✓'; color:var(--slim); margin-right:5px; font-weight:600; }
/* ============== LEVERANCIER LANDING PAGE ============== */
/* Server-rendered SEO-pagina (geen Vue) — eigen layout zodat de SPA niet
over de content heen mount. Brand-consistent met de homepage maar simpeler. */
.leverancier-page { font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:var(--text); background:var(--crème); margin:0; }
/* Server-rendered topbar deelt nu de .topbar-class met de SPA — zie boven.
Geen aparte .lev-topbar styling meer (was duplicate code met afwijkende
gradient + dropdown-styling). */
.lev-wrap { max-width:880px; margin:0 auto; padding:48px 24px 64px; }
.lev-hero h1 { font-size:38px; line-height:1.15; letter-spacing:-1px; font-weight:500; margin:0 0 18px; max-width:720px; }
.lev-big { display:flex; align-items:baseline; gap:6px; margin:8px 0 12px; }
.lev-num { font-size:64px; font-weight:500; letter-spacing:-1.5px; line-height:1; color:var(--spar); }
.lev-unit { font-size:20px; color:var(--text-muted); }
.lev-meta { font-size:16px; color:var(--text-muted); max-width:640px; line-height:1.55; margin:0 0 22px; }
.lev-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }
.lev-card {
background:var(--surface); border:1px solid var(--line); border-radius:16px;
padding:28px 28px 24px; margin-top:18px;
}
.lev-card h2 { font-size:20px; font-weight:500; letter-spacing:-0.4px; margin:0 0 14px; color:var(--text); }
.lev-breakdown { width:100%; border-collapse:collapse; font-size:14px; }
.lev-breakdown td { padding:8px 0; border-top:1px solid var(--line); color:var(--text); }
.lev-breakdown tr:first-child td { border-top:0; }
.lev-breakdown td.num { text-align:right; font-variant-numeric:tabular-nums; }
.lev-breakdown tr.subtotal td { font-weight:500; padding-top:12px; }
.lev-breakdown tr.total td { font-weight:600; font-size:16px; padding-top:12px; border-top:2px solid var(--donker); color:var(--text); }
.lev-fineprint { font-size:12px; color:var(--text-muted); margin-top:14px; line-height:1.5; }
.lev-kv { display:grid; grid-template-columns:200px 1fr; gap:10px 18px; font-size:14px; margin:0; }
.lev-kv dt { color:var(--text-muted); font-weight:500; }
.lev-kv dd { margin:0; color:var(--text); }
@media (max-width:600px) {
.lev-num { font-size:48px; }
.lev-hero h1 { font-size:28px; }
.lev-wrap { padding:32px 18px 48px; }
.lev-card { padding:20px; }
.lev-kv { grid-template-columns:1fr; gap:4px 0; }
.lev-kv dt { margin-top:10px; }
}
/* HERO PRICE CARD */
.hero-price-card {
background:var(--surface); border:1px solid var(--line); border-radius:16px;
padding:28px;
}
/* Header-rij van de hero-card: leverancier-dropdown links, daarboven-rechts
stapelt vandaag/morgen-tabs en het bucket-label. */
.hpc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.hpc-head-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hpc-bucket { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; }
.hpc-big { font-size:46px; font-weight:500; letter-spacing:-1px; color:var(--text); margin:8px 0; line-height:1; }
.hpc-big .unit { font-size:18px; color:var(--text-muted); margin-left:4px; font-weight:400; letter-spacing:0; }
.hpc-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:500; }
/* Segmented control voor Vandaag/Morgen — bedient alleen de bars + stats. */
.hpc-tabs {
display:inline-flex; background:var(--crème); border-radius:999px; padding:3px;
gap:2px;
}
.hpc-tabs button {
border:0; background:transparent; padding:6px 14px; border-radius:999px;
font-size:12px; font-weight:500; color:var(--text-muted); cursor:pointer;
transition:background-color 0.15s, color 0.15s;
}
.hpc-tabs button:hover:not(:disabled) { color:var(--text); }
.hpc-tabs button.is-active { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.hpc-tabs button.is-disabled, .hpc-tabs button:disabled {
opacity:0.45; cursor:not-allowed;
}
.hpc-mini-bars { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; align-items:stretch; height:110px; margin:18px 0 14px; }
.hpc-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.hpc-stat-l { font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; }
.hpc-stat-v { font-size:14px; font-weight:500; color:var(--text); margin-top:2px; }
/* SECTION HEADERS */
section.public-section { padding:48px 0; border-top:1px solid var(--line); }
.section-eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--slim); font-weight:500; margin-bottom:10px; }
.section-title { font-size:34px; font-weight:500; letter-spacing:-0.8px; line-height:1.15; color:var(--text); margin-bottom:12px; max-width:620px; }
.section-sub { font-size:15px; color:var(--text-muted); max-width:580px; line-height:1.6; margin-bottom:28px; }
/* HOW-IT-WORKS */
.how-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.how-card {
background:var(--surface); border:1px solid var(--line); border-radius:16px;
padding:28px 24px;
}
.how-num {
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:9px;
background:var(--mist); color:var(--spar);
font-weight:500; font-size:13px; margin-bottom:14px;
}
.how-h { font-size:18px; font-weight:500; letter-spacing:-0.3px; color:var(--text); margin-bottom:6px; }
.how-s { font-size:14px; color:var(--text-muted); line-height:1.6; }
/* HEATMAP */
.heatmap-section {
background:var(--nacht); color:rgba(255,255,255,0.82); border-radius:20px;
padding:42px 36px; margin:32px 0;
}
.heatmap-section .section-title { color:#fff; }
.heatmap-section .section-sub { color:var(--munt); }
.heatmap-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.heatmap-tabs {
display:inline-flex; gap:2px; padding:3px;
background:rgba(255,255,255,0.06); border:1px solid rgba(184,235,210,0.18);
border-radius:999px;
}
.heat-tab {
appearance:none; border:0; background:transparent; cursor:pointer;
padding:7px 16px; border-radius:999px;
font-size:13px; font-weight:500; color:var(--munt);
transition:background 0.15s, color 0.15s;
}
.heat-tab:hover { color:#fff; }
.heat-tab.active { background:var(--surface); color:var(--text); }
.heatmap {
display:grid; grid-template-columns:60px 1fr; gap:8px;
margin:24px 0 14px;
transition:opacity 0.15s;
}
.heatmap.heat-loading { opacity:0.5; }
.heatmap-cols { display:grid; gap:3px; }
.heatmap-row { display:grid; grid-template-columns:repeat(24, 1fr); gap:3px; align-items:stretch; }
.heatmap-cell { height:22px; border-radius:3px; }
.heatmap-day-labels { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--munt); padding-top:1px; }
.heatmap-day-labels span { height:22px; line-height:22px; }
/* Year-mode heeft 12 rijen × 24 cols — iets ruimere cellen passen
visueel beter; month-mode heeft 7 rijen, week-mode 8. */
.heatmap.heatmap-year .heatmap-cell,
.heatmap.heatmap-year .heatmap-day-labels span { height:26px; line-height:26px; }
.heatmap.heatmap-month .heatmap-cell,
.heatmap.heatmap-month .heatmap-day-labels span { height:30px; line-height:30px; }
.heatmap-axis { display:grid; grid-template-columns:60px repeat(4, 1fr); gap:8px; font-size:11px; color:var(--munt); margin-top:8px; }
.heatmap-axis div { text-align:left; }
.heatmap-legend { display:flex; align-items:center; gap:10px; margin-top:18px; font-size:11px; color:var(--munt); }
.heatmap-legend-bar { display:flex; height:8px; width:200px; border-radius:4px; overflow:hidden; }
.heatmap-legend-bar div { flex:1; }
/* Heatmap-cell hover state + custom tooltip */
.heatmap-cell { transition:transform 0.1s, box-shadow 0.1s; cursor:pointer; }
.heatmap-cell:hover { transform:scale(1.18); box-shadow:0 0 0 2px #fff inset; z-index:5; position:relative; }
.heat-tooltip {
position:fixed; z-index:1000;
background:#042E1D;
color:#fff;
border:1px solid rgba(184,235,210,0.18);
border-radius:10px;
padding:12px 14px;
font-size:12px; line-height:1.5;
min-width:220px;
box-shadow:0 8px 24px rgba(0,0,0,0.4);
pointer-events:none;
}
.heat-tooltip .htt-h {
font-weight:500; color:#fff;
margin-bottom:8px; padding-bottom:8px;
border-bottom:1px solid rgba(255,255,255,0.1);
}
.heat-tooltip .htt-row {
display:flex; justify-content:space-between; align-items:center;
gap:14px; padding:3px 0;
color:rgba(236,250,243,0.75);
}
.heat-tooltip .htt-row .label-dot {
display:inline-flex; align-items:center; gap:6px;
}
.heat-tooltip .htt-row .label-dot::before {
content:''; width:7px; height:7px; border-radius:50%;
background:var(--blad); display:inline-block;
}
.heat-tooltip .htt-row.is-tax .label-dot::before { background:#EF9F27; }
.heat-tooltip .htt-row.is-vat .label-dot::before { background:#D85A30; }
.heat-tooltip .htt-row.is-markup .label-dot::before { background:var(--munt); }
.heat-tooltip .htt-row.is-solar .label-dot::before { background:var(--solar); }
.heat-tooltip .htt-row.is-export .label-dot::before { background:var(--zon, #F0997B); }
.heat-tooltip .htt-row.is-produced .label-dot::before { background:var(--solar); }
.heat-tooltip .htt-row.is-forecast .label-dot::before {
background:transparent;
border-top:2px dashed var(--solar-line);
width:10px; height:0; border-radius:0;
}
.heat-tooltip .htt-row.is-solar { padding-left:14px; color:rgba(236,250,243,0.55); }
.heat-tooltip .htt-row.is-solar .label-dot::before { width:5px; height:5px; }
.heat-tooltip .htt-row.is-net { padding-left:14px; color:rgba(236,250,243,0.55); }
.heat-tooltip .htt-row.is-net .label-dot::before { width:5px; height:5px; }
.heat-tooltip .htt-row strong { color:#fff; font-weight:500; }
.heat-tooltip .htt-row.total {
margin-top:6px; padding-top:8px;
border-top:1px solid rgba(255,255,255,0.1);
color:#fff;
}
.heat-tooltip .htt-row.total strong { font-weight:600; font-size:13px; }
/* LEVERANCIERS-TABEL */
.lev-section { padding:48px 0; }
.lev-grid { display:grid; grid-template-columns:1.7fr 1fr; gap:28px; }
.lev-table-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.lev-table { width:100%; border-collapse:collapse; font-size:13px; }
.lev-table th { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; padding:12px 16px; text-align:left; background:var(--grijs); border-bottom:1px solid var(--line); }
.lev-table td { padding:12px 16px; border-bottom:1px solid var(--line); }
.lev-table tr:last-child td { border-bottom:0; }
.lev-table .name strong { font-weight:500; color:var(--text); }
.lev-table .name small { font-size:11px; color:var(--text-muted); display:block; margin-top:1px; }
.lev-table .num { text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
.lev-cta-card { background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%); color:#fff; border-radius:16px; padding:28px; }
.lev-cta-card h3 { font-size:18px; font-weight:500; margin-bottom:6px; }
.lev-cta-card p { font-size:13px; color:var(--munt); margin-bottom:18px; line-height:1.55; }
.lev-cta-card .field-label label { color:rgba(255,255,255,0.78); }
.lev-cta-card .input { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.15); color:#fff; }
.lev-cta-card .input:focus { background:rgba(255,255,255,0.1); border-color:var(--blad); box-shadow:0 0 0 3px rgba(79,203,142,0.2); }
/* STATS-STRIP */
.stats-strip {
display:grid; grid-template-columns:repeat(4, 1fr);
background:var(--mist); border-radius:20px; padding:36px;
text-align:center; margin:24px 0;
}
.stats-strip > div { padding:0 16px; border-right:1px solid rgba(34,179,107,0.15); }
.stats-strip > div:last-child { border-right:0; }
.stat-v { font-size:28px; font-weight:500; letter-spacing:-0.5px; color:var(--text); margin-bottom:4px; }
.stat-l { font-size:12px; color:var(--spar); }
/* iOS-APP TEASER */
.ios-teaser {
display:grid; grid-template-columns:1fr 1fr; gap:48px;
background:var(--surface); border:1px solid var(--line); border-radius:20px;
padding:48px; margin:24px 0;
align-items:center;
}
.ios-pill { background:var(--munt); color:var(--blad); margin-bottom:14px; }
.ios-illu { display:flex; align-items:center; justify-content:center; padding:24px 0; }
/* Eenvoudige phone-frame: ronde hoeken + drop-shadow rond de screenshot.
Geen physical bezel-render — de screenshot zelf heeft al de iOS-status-
bar en home-indicator. */
.ios-phone {
width:100%; max-width:280px;
border-radius:32px; overflow:hidden;
box-shadow: 0 20px 50px rgba(4,46,29,0.18), 0 0 0 1px var(--line);
background:var(--surface);
aspect-ratio: 9 / 19.5;
}
.ios-phone img { width:100%; height:100%; object-fit:cover; display:block; }
.ios-phone.ios-phone-empty img { display:none; }
.ios-phone-fallback {
width:100%; height:100%; display:flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, var(--mist) 0%, #fff 100%);
}
.ios-phone-fallback-text {
font-size:13px; color:var(--text-muted); text-align:center; line-height:1.5;
padding:24px;
}
@media (max-width: 720px) {
.ios-teaser { grid-template-columns:1fr; gap:24px; padding:28px; }
.ios-phone { max-width:220px; margin:0 auto; }
}
/* SLIM LADEN TEASER */
.slim-teaser {
display:grid; grid-template-columns:1fr 1fr; gap:48px;
background:var(--surface); border:1px solid var(--line); border-radius:20px;
padding:48px; margin:24px 0;
align-items:center;
}
.slim-features { list-style:none; padding:0; margin:18px 0; display:grid; gap:8px; }
.slim-features li { font-size:14px; color:var(--text); display:flex; align-items:center; gap:8px; }
.slim-features li::before { content:'✓'; color:var(--slim); font-weight:600; flex-shrink:0; }
.slim-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.slim-pill { font-size:11px; padding:4px 10px; border-radius:999px; background:var(--mist); color:var(--spar); border:1px solid var(--munt); }
.slim-illu { background:var(--mist); border-radius:16px; padding:32px; height:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; }
.slim-illu .bars { display:grid; grid-template-columns:repeat(24, 1fr); gap:2px; height:100%; align-items:stretch; }
.slim-illu .bars > div { position:relative; }
.slim-illu .bar { background:var(--munt); border-radius:1px; min-height:1px; }
.slim-illu .bar.cheap { background:var(--slim); }
/* FAQ */
.faq-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; }
.faq-list { display:flex; flex-direction:column; }
details.faq-item { border-bottom:1px solid var(--line); padding:18px 0; }
details.faq-item:last-child { border-bottom:0; }
details.faq-item summary {
cursor:pointer; list-style:none; display:flex;
justify-content:space-between; align-items:center;
font-size:15px; font-weight:500; color:var(--text);
}
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary::after {
content:'+'; color:var(--slim); font-size:22px; font-weight:300; line-height:1; margin-left:14px;
}
details.faq-item[open] summary::after { content:'−'; }
details.faq-item .faq-a { font-size:14px; color:var(--text-muted); line-height:1.6; padding-top:10px; }
/* CTA-FINAL */
.final-cta { text-align:center; padding:64px 0; border-top:1px solid var(--line); }
.final-cta h2 { font-size:32px; font-weight:500; letter-spacing:-0.5px; color:var(--text); margin-bottom:18px; }
/* MARKETING FOOTER */
footer.marketing-footer { background:var(--surface); border-top:1px solid var(--line); padding:48px 0 28px; margin-top:32px; }
.marketing-footer .inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:28px; }
.footer-brand img { height:30px; margin-bottom:12px; }
.footer-brand p { font-size:13px; color:var(--text-muted); line-height:1.55; max-width:280px; }
.footer-col h4 { font-size:12px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text); font-weight:500; margin-bottom:12px; }
.footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.footer-col a { color:var(--text-muted); }
.footer-col a:hover { color:var(--spar); text-decoration:none; }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:11px; color:var(--text-muted); }
/* RESPONSIVE */
@media (max-width:900px) {
.hero-section { grid-template-columns:1fr; gap:32px; padding:32px 0; }
.hero-h { font-size:34px; }
.how-grid { grid-template-columns:1fr; }
.lev-grid { grid-template-columns:1fr; gap:20px; }
.stats-strip { grid-template-columns:repeat(2, 1fr); padding:24px 16px; gap:18px 0; }
.stats-strip > div { border-right:0; padding:8px 0; }
.slim-teaser { grid-template-columns:1fr; padding:32px 24px; gap:24px; }
.slim-illu { height:200px; padding:20px; }
.faq-grid { grid-template-columns:1fr; gap:18px; }
.footer-grid { grid-template-columns:1fr 1fr 1fr; gap:24px; }
.footer-brand { grid-column:1 / -1; }
.heatmap-section { padding:32px 20px; margin:16px 0; }
.heatmap-cell { height:18px; }
}
@media (max-width:600px) {
.hpc-mini-bars { height:80px; }
.hpc-stats { grid-template-columns:1fr 1fr; }
.footer-grid { grid-template-columns:1fr; }
/* Public-home hero: kleinere text + smallere padding zodat hij past op
iPhone-SE-class viewports zonder horizontale overflow. */
.public-home { padding:0 16px; }
.hero-section { padding:24px 0 28px; gap:24px; min-width:0; }
.hero-section > div { min-width:0; }
.hero-h { font-size:24px; letter-spacing:-0.5px; word-break:break-word; }
.hero-sub { font-size:14px; max-width:100%; word-break:break-word; }
.hero-trust { gap:8px 14px; flex-direction:column; }
/* Hero-price-card kleiner, anders eet 'ie de schermbreedte op */
.hero-price-card { padding:18px; max-width:100%; }
.hero-price-card .hpc-big { font-size:36px; }
/* Topbar logo iets kleiner zodat alle nav-items ernaast passen */
header.topbar { padding:10px 14px; }
.topbar .logo img { height:26px; }
/* Section-titel verkleinen */
.section-title { font-size:22px; line-height:1.2; word-break:break-word; }
.section-eyebrow { font-size:11px; }
/* Lev-cta-card alleen krijgt mobile-padding (table-card heeft 0) */
.lev-cta-card { padding:20px; }
}
/* ============================================================
MOBILE FIXES — onder 720px
Sluit aan op de bestaande min-width breakpoints; expliciet hier
gegroepeerd zodat charts/tabellen/headers responsive worden.
============================================================ */
/* Tabel-overflow-wrapper: alle tables die niet passen op mobiel
krijgen horizontale scroll i.p.v. zelf de card op te blazen. */
.table-scroll {
overflow-x:auto;
-webkit-overflow-scrolling:touch;
margin:0 -4px;
}
.table-scroll table { min-width:520px; }
@media (max-width:720px) {
/* Combo-chart op dashboard: lagere hoogte, kleinere assen */
.combo-chart { height:200px; grid-template-columns:30px 1fr 36px; }
.ca-y span { font-size:9px; }
.ca-y span small { font-size:8px; }
/* Day-chart op /verbruik: ruimer voor touch */
.day-chart { height:170px; grid-template-columns:32px 1fr; gap:6px; }
/* Hero-strip op tarieven en /verbruik kpi-row stapelen tot 2 cols
i.p.v. 1 kolom, anders ben je eindeloos aan het scrollen. */
.hero-strip, .kpi-row { grid-template-columns:1fr 1fr; gap:10px; }
.kpi-value { font-size:20px; }
/* Two-col layouts (donut+benchmark, etc.) stapelen vanaf 720px,
niet pas vanaf 980px. */
.two-col { grid-template-columns:1fr; gap:14px; }
/* Topbar: hamburger-modus — burger-knop wordt zichtbaar, horizontale
nav verandert in een full-width drawer onder de header die alleen
openvouwt zodra .is-mobile-open op header.topbar staat. */
header.topbar { padding:12px 16px; position:relative; }
.topbar-inner { position:relative; }
.topbar-burger { display:inline-flex; }
.topbar nav {
display:none;
position:absolute;
top:calc(100% + 0px); left:0; right:0;
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
flex-direction:column; align-items:stretch; gap:2px;
padding:10px 14px 16px;
border-top:1px solid rgba(255,255,255,0.08);
box-shadow:0 12px 28px rgba(0,0,0,0.30);
z-index:100;
flex-wrap:nowrap; justify-content:flex-start;
}
header.topbar.is-mobile-open nav { display:flex; }
.topbar nav a, .topbar nav .nav-trigger {
width:100%; text-align:left;
padding:12px 14px; font-size:14px; border-radius:9px;
}
.topbar nav a.btn-cta { text-align:center; margin-top:6px; padding:12px 14px; }
.topbar nav .nav-menu, .topbar nav .user-menu { width:100%; position:static; }
.topbar nav .nav-menu .nav-panel,
.topbar nav .user-menu .nav-panel {
position:static; box-shadow:none; min-width:0;
background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.10);
margin:4px 0 6px; padding:6px;
}
.topbar nav .nav-panel a {
color:rgba(255,255,255,0.85); padding:10px 12px;
}
.topbar nav .nav-panel a:hover { background:rgba(255,255,255,0.10); color:#fff; }
.topbar nav .nav-panel hr { border-top-color:rgba(255,255,255,0.10); }
/* User-panel header (naam/email): tekst-kleuren omkeren naar licht */
.topbar nav .user-panel .user-name { color:#fff; }
.topbar nav .user-panel .user-email { color:rgba(255,255,255,0.65); }
.topbar nav .user-panel .user-logout { color:#FF8A66; }
.topbar nav .user-panel .user-logout:hover { background:rgba(216,90,48,0.15); }
/* Heatmap (homepage): compactere rij-hoogte zodat 24 cellen
leesbaar blijven op telefoon */
.heatmap-cell { height:16px; }
.heatmap-day-labels span { height:16px; line-height:16px; font-size:10px; }
.heatmap-axis { grid-template-columns:50px repeat(4, 1fr); font-size:10px; }
.heatmap-cols { gap:2px; }
.heatmap-row { gap:2px; }
/* Home-stats banner op /mijn-huis: 3 stats wrappen i.p.v. overflowen */
.home-stats { flex-wrap:wrap; gap:14px; }
.home-stats > div { flex:1 1 calc(50% - 7px); min-width:0; }
/* Kpi-row in /verbruik: wel grid-2-col blijven, maar smaller */
.month-grid { grid-template-columns:1fr 1fr; gap:10px; }
/* Touch-targets: minimaal 40px voor alle knoppen op mobiel */
.btn { min-height:40px; padding:10px 18px; }
.btn-sm { min-height:36px; padding:8px 14px; font-size:12px; }
.tab-nav-item { min-height:40px; padding:10px 14px; }
.period-tabs button, .tabs-row button { min-height:36px; padding:8px 14px; font-size:12px; }
}
@media (max-width:480px) {
/* Heel klein scherm: stack verder uit */
.hero-strip, .kpi-row { grid-template-columns:1fr; }
.home-stats > div { flex:1 1 100%; }
main.app-main { padding:14px 12px 32px; }
.card { padding:14px 14px; }
/* Heatmap nog kleiner */
.heatmap-cell { height:14px; }
.heatmap-day-labels span { height:14px; line-height:14px; font-size:9px; }
/* Combo-chart en day-chart compacter */
.combo-chart { height:180px; }
.day-chart { height:150px; }
/* Topbar logo iets kleiner */
.topbar .logo img { height:28px; }
}
/* ============== GLOSSARY-TOOLTIP ==============
Termen krijgen een dotted-underline (visuele hint dat je 'm op kunt
zoeken). Een gedeelde tooltip-bubble toont de definitie bij hover/click.
Bubble is global (één per page, gepositioneerd door JS) zodat 'ie altijd
bovenop andere elementen staat. */
.glossary-term {
border-bottom:1px dotted currentColor;
cursor:help;
position:relative;
}
.glossary-term:hover, .glossary-term:focus { color:var(--spar); outline:none; }
/* Donkere body-pages: dotted-underline in lichte tint */
.blog-post-page .glossary-term:hover,
.blog-post-page .glossary-term:focus { color:var(--spar); }
#glossary-tip {
position:fixed;
z-index:9999;
background:var(--nacht);
color:#fff;
padding:10px 14px;
border-radius:10px;
box-shadow:0 12px 32px rgba(4,46,29,0.35);
font-size:13px;
line-height:1.45;
max-width:320px;
pointer-events:none;
opacity:0;
transform:translateY(4px);
transition:opacity 0.12s, transform 0.12s;
}
#glossary-tip.is-open {
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
#glossary-tip .gt-term {
display:block;
font-size:11px;
font-weight:600;
color:var(--blad);
text-transform:uppercase;
letter-spacing:0.5px;
margin-bottom:4px;
}
#glossary-tip .gt-arrow {
position:absolute;
width:10px; height:10px;
background:var(--nacht);
transform:rotate(45deg);
z-index:-1;
}
/* ============== BLOG ==============
Server-rendered onder /blog en /blog/{slug}. De .blog-page en
.blog-post-page body-class voorkomen lekkage naar de SPA-styling. */
.blog-page,
.blog-post-page { background:var(--crème); }
.blog-post-page { line-height:1.7; font-size:16px; }
/* Reading-progress-bar bovenaan article-pagina */
.blog-progress {
position:fixed; top:0; left:0; height:3px; width:0%;
background:var(--slim); z-index:200; transition:width 0.1s;
}
/* ----- HERO ----- */
.blog-hero {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:64px 32px 72px;
position:relative;
overflow:hidden;
}
.blog-hero::before {
content:''; position:absolute; top:-120px; right:-120px;
width:480px; height:480px;
background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
pointer-events:none;
}
.blog-hero-inner { max-width:1080px; margin:0 auto; position:relative; z-index:2; }
.blog-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--blad); font-weight:500; margin-bottom:14px;
}
.blog-hero h1 {
font-size:38px; font-weight:500; line-height:1.15;
letter-spacing:-0.6px; color:#fff; margin:0 0 12px;
max-width:720px;
}
.blog-hero p {
font-size:15px; color:var(--munt);
line-height:1.6; max-width:600px; margin:0;
}
/* ----- FILTERBAR ----- */
.blog-filterbar {
background:var(--surface);
border-bottom:1px solid var(--line);
padding:14px 32px;
position:sticky; top:0; z-index:40;
}
.blog-filter-inner {
max-width:1080px; margin:0 auto;
display:flex; align-items:center; gap:14px;
overflow-x:auto; flex-wrap:wrap;
}
.blog-filter-l {
font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
color:var(--text-muted); font-weight:500; flex-shrink:0;
}
.blog-filterbar .filter-chip {
background:transparent; border:1px solid var(--line-2);
padding:6px 14px; border-radius:999px;
font-size:12px; color:var(--text-muted);
cursor:pointer; font-family:inherit;
transition:all 0.12s; flex-shrink:0; font-weight:500;
text-decoration:none;
}
.blog-filterbar .filter-chip:hover { border-color:var(--slim); color:var(--spar); text-decoration:none; }
.blog-filterbar .filter-chip.active { background:var(--nacht); color:#fff; border-color:var(--text); }
/* ----- MAIN ----- */
main.blog-main {
max-width:1080px;
margin:40px auto 0;
padding:0 32px 80px;
}
/* Featured */
.blog-featured {
display:grid;
grid-template-columns:1.1fr 1fr;
gap:28px;
background:var(--surface);
border:1px solid var(--line);
border-radius:16px;
overflow:hidden;
margin-bottom:56px;
cursor:pointer;
transition:border-color 0.18s, box-shadow 0.18s;
text-decoration:none;
color:inherit;
}
.blog-featured:hover { border-color:var(--slim); box-shadow:0 12px 36px rgba(4,46,29,0.07); text-decoration:none; }
.blog-featured-thumb {
background:linear-gradient(135deg, var(--nacht) 0%, var(--donker) 100%);
position:relative; overflow:hidden; min-height:320px;
}
.blog-featured-thumb svg { position:absolute; inset:0; width:100%; height:100%; }
.blog-featured-body {
padding:32px 36px 32px 0;
display:flex; flex-direction:column; justify-content:center;
}
.blog-featured-meta {
display:flex; gap:10px; align-items:center;
margin-bottom:14px; font-size:11px; color:var(--text-muted);
}
.blog-featured h2 {
font-size:28px; font-weight:500;
letter-spacing:-0.4px; line-height:1.25;
margin:0 0 14px;
}
.blog-featured-sub {
font-size:15px; color:var(--text-muted);
line-height:1.65; margin:0 0 22px;
}
.blog-author {
display:flex; align-items:center; gap:10px;
font-size:12px; color:var(--text-muted);
}
/* Author-init (blog-context — los van .author-* in MyHouse) */
.blog-page .author-init,
.blog-post-page .author-init {
width:28px; height:28px;
background:var(--slim); color:#fff;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:11px; font-weight:500; flex-shrink:0;
}
.blog-page .author-init.sm,
.blog-post-page .author-init.sm { width:22px; height:22px; font-size:9px; }
.blog-post-page .author-init.lg { width:36px; height:36px; font-size:13px; background:var(--blad); color:var(--text); }
.blog-post-page .author-init.xl { width:56px; height:56px; font-size:18px; background:var(--slim); color:#fff; }
.blog-author .author-name { font-weight:500; color:var(--text); }
/* Grid header */
.blog-grid-h {
display:flex; align-items:baseline; justify-content:space-between;
margin-bottom:22px;
}
.blog-grid-h h2 { font-size:22px; font-weight:500; letter-spacing:-0.4px; margin:0; }
.blog-grid-h-meta { font-size:13px; color:var(--text-muted); }
/* Post-grid */
.blog-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
gap:24px;
}
.blog-card {
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
overflow:hidden;
cursor:pointer;
transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
display:flex; flex-direction:column;
text-decoration:none; color:inherit;
}
.blog-card:hover {
border-color:var(--slim);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(4,46,29,0.07);
text-decoration:none;
}
.blog-thumb {
aspect-ratio:16 / 10;
position:relative;
overflow:hidden;
background:var(--mist);
}
/* Categorie-getinte thumbs als geen hero_image_url is gezet */
.blog-thumb.thumb-tutorial { background:linear-gradient(135deg, var(--paars-bg) 0%, #DCD9F8 100%); }
.blog-thumb.thumb-product { background:linear-gradient(135deg, var(--info-bg) 0%, #C9E1F8 100%); }
.blog-thumb.thumb-opinion { background:linear-gradient(135deg, var(--warn-bg) 0%, #F5DCAB 100%); }
.blog-thumb.thumb-update { background:linear-gradient(135deg, var(--mist) 0%, var(--munt) 100%); }
.blog-card-body {
padding:18px 20px 20px;
display:flex; flex-direction:column; flex:1;
}
.blog-card-meta {
display:flex; gap:8px; align-items:center;
margin-bottom:10px; font-size:11px; color:var(--text-muted);
}
.blog-card-body h3 {
font-size:16px; font-weight:500;
line-height:1.35; margin:0 0 10px;
letter-spacing:-0.2px;
}
.blog-card-sub {
font-size:13px; color:var(--text-muted);
line-height:1.55; margin:0 0 16px; flex:1;
}
.blog-card-foot {
display:flex; align-items:center; justify-content:space-between;
font-size:11px; color:var(--text-muted);
}
.blog-card-foot-author {
display:flex; align-items:center; gap:8px;
}
/* Empty-state */
.blog-empty {
text-align:center; padding:48px 24px; color:var(--text-muted);
}
.blog-empty h2 { font-size:20px; font-weight:500; margin:0 0 8px; color:var(--text); }
/* Badges per categorie — gedeeld met .leverancier-page maar ook hier
gespecificeerd op blog-page om collisions met andere .badge-rules te
vermijden. */
.blog-page .badge,
.blog-post-page .badge {
display:inline-block;
padding:3px 10px; border-radius:999px;
font-size:10px; font-weight:500;
letter-spacing:0.4px; text-transform:uppercase;
background:var(--mist); color:var(--spar);
}
.blog-page .badge.product, .blog-post-page .badge.product { background:var(--info-bg); color:var(--info); }
.blog-page .badge.tutorial, .blog-post-page .badge.tutorial { background:var(--paars-bg); color:var(--paars); }
.blog-page .badge.opinion, .blog-post-page .badge.opinion { background:var(--warn-bg); color:var(--duur); }
.blog-page .badge.update, .blog-post-page .badge.update { background:var(--mist); color:var(--spar); }
/* ============== ARTICLE PAGE ============== */
.blog-article-head {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:48px 32px 64px;
position:relative; overflow:hidden;
}
.blog-article-head::before {
content:''; position:absolute; top:-120px; right:-120px;
width:480px; height:480px;
background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
pointer-events:none;
}
.blog-article-head-inner {
max-width:760px; margin:0 auto; position:relative; z-index:2;
}
.blog-crumbs {
display:flex; gap:8px; align-items:center;
font-size:12px; color:var(--munt);
margin-bottom:26px; flex-wrap:wrap;
}
.blog-crumbs a { color:var(--munt); text-decoration:none; }
.blog-crumbs a:hover { color:#fff; text-decoration:underline; }
.blog-crumbs .sep { color:var(--munt); opacity:0.5; }
.blog-crumbs .current { color:#fff; font-weight:500; }
.blog-article-meta {
display:flex; gap:10px; align-items:center;
margin-bottom:16px; font-size:12px; color:var(--munt);
flex-wrap:wrap;
}
.blog-article-title {
font-size:36px; font-weight:500;
line-height:1.2; letter-spacing:-0.6px;
color:#fff; margin:0 0 14px;
}
.blog-article-lede {
font-size:17px; color:var(--munt);
line-height:1.55; margin:0 0 28px; max-width:640px;
}
.blog-article-author {
display:flex; align-items:center; gap:12px;
padding-top:24px;
border-top:1px solid rgba(184,235,210,0.2);
}
.blog-article-author .author-meta-l { font-size:13px; color:#fff; font-weight:500; line-height:1.3; }
.blog-article-author .author-meta-r { font-size:11px; color:var(--munt); }
/* Hero-image — alleen als post.hero_image_url ingevuld is */
.blog-hero-image {
max-width:1080px; margin:-32px auto 0;
padding:0 32px;
position:relative; z-index:3;
}
.blog-hero-image-inner {
aspect-ratio:16 / 7;
border-radius:16px;
overflow:hidden;
background:var(--nacht);
}
.blog-hero-image-inner img { width:100%; height:100%; object-fit:cover; display:block; }
/* Article body */
article.blog-article-body {
max-width:720px;
margin:56px auto 0;
padding:0 32px 64px;
font-size:16px;
line-height:1.7;
color:var(--text);
}
article.blog-article-body h2 {
font-size:24px; font-weight:500;
letter-spacing:-0.4px; margin:48px 0 16px;
line-height:1.3;
}
article.blog-article-body h3 {
font-size:18px; font-weight:500;
margin:32px 0 12px; line-height:1.3;
}
article.blog-article-body p { margin:0 0 22px; }
article.blog-article-body > p:first-of-type::first-letter {
font-size:56px; font-weight:500;
float:left; line-height:0.95;
margin:4px 10px 0 0; color:var(--spar);
}
article.blog-article-body ul,
article.blog-article-body ol { margin:0 0 22px 22px; }
article.blog-article-body li { margin-bottom:8px; }
article.blog-article-body strong { font-weight:600; }
article.blog-article-body em { color:var(--text-muted); font-style:italic; }
article.blog-article-body a { color:var(--spar); text-decoration:underline; }
article.blog-article-body a:hover { color:var(--text); }
article.blog-article-body code {
background:var(--grijs);
padding:2px 6px; border-radius:4px;
font-family:ui-monospace, 'SF Mono', monospace;
font-size:14px; color:var(--text);
}
article.blog-article-body pre {
background:var(--nacht); color:#E1F5EE;
padding:16px 18px; border-radius:10px;
overflow-x:auto; margin:0 0 22px;
font-size:13px; line-height:1.55;
}
article.blog-article-body pre code {
background:transparent; color:inherit; padding:0;
font-size:13px;
}
article.blog-article-body blockquote {
margin:36px 0;
padding:24px 28px;
background:var(--mist);
border-left:4px solid var(--slim);
border-radius:0 12px 12px 0;
font-size:18px; line-height:1.55;
color:var(--text); font-weight:500;
letter-spacing:-0.2px;
}
article.blog-article-body blockquote p { margin:0; }
article.blog-article-body img {
max-width:100%; height:auto;
border-radius:14px;
margin:24px 0;
display:block;
}
article.blog-article-body hr {
border:0; height:1px;
background:var(--line);
margin:40px 0;
}
/* Article foot — share, author-bio */
.blog-article-foot {
max-width:720px; margin:0 auto;
padding:0 32px;
}
.blog-share {
display:flex; align-items:center; gap:16px;
padding:24px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
margin:32px 0;
}
.blog-share-l {
font-size:12px; color:var(--text-muted);
font-weight:500; text-transform:uppercase;
letter-spacing:0.5px;
}
.blog-share-buttons { display:flex; gap:8px; }
.blog-share-btn {
width:36px; height:36px;
border-radius:9px;
background:var(--surface);
border:1px solid var(--line-2);
color:var(--text-muted);
display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; transition:all 0.12s;
text-decoration:none;
font-family:inherit;
}
.blog-share-btn:hover { border-color:var(--slim); color:var(--spar); text-decoration:none; }
.blog-share-btn.copied { border-color:var(--slim); background:var(--mist); color:var(--spar); }
.blog-share-btn svg { width:16px; height:16px; }
.blog-author-bio {
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:22px 26px;
display:flex; gap:16px;
align-items:flex-start;
margin:32px 0;
}
.blog-author-bio-h { font-size:15px; font-weight:500; margin:0 0 4px; }
.blog-author-bio-meta { font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.blog-author-bio-text { font-size:14px; color:var(--text-muted); line-height:1.6; }
/* CTA-strip onderaan article */
.blog-cta-strip {
max-width:720px; margin:56px auto 0;
padding:0 32px;
}
.blog-cta-card {
background:var(--nacht); color:#fff;
border-radius:16px;
padding:32px 36px;
position:relative; overflow:hidden;
}
.blog-cta-card::before {
content:''; position:absolute; top:-100px; right:-100px;
width:320px; height:320px;
background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
pointer-events:none;
}
.blog-cta-h {
font-size:22px; font-weight:500;
letter-spacing:-0.3px; line-height:1.25;
margin-bottom:8px;
position:relative; z-index:1;
}
.blog-cta-s {
font-size:14px; color:var(--munt);
line-height:1.55; margin-bottom:22px;
max-width:460px;
position:relative; z-index:1;
}
.blog-cta-buttons {
display:flex; gap:10px; flex-wrap:wrap;
position:relative; z-index:1;
}
/* Related-posts */
.blog-related {
background:var(--grijs);
padding:56px 32px;
margin-top:64px;
}
.blog-related-inner { max-width:1080px; margin:0 auto; }
.blog-related-h {
font-size:22px; font-weight:500;
letter-spacing:-0.4px; margin:0 0 24px;
}
.blog-related-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.blog-related-card {
background:var(--surface);
border:1px solid var(--line);
border-radius:12px;
overflow:hidden;
cursor:pointer;
transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
text-decoration:none; color:inherit;
display:flex; flex-direction:column;
}
.blog-related-card:hover {
border-color:var(--slim);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(4,46,29,0.06);
text-decoration:none;
}
.blog-related-thumb {
aspect-ratio:16 / 9;
overflow:hidden;
position:relative;
background:var(--mist);
}
.blog-related-thumb.thumb-tutorial { background:linear-gradient(135deg, var(--paars-bg) 0%, #DCD9F8 100%); }
.blog-related-thumb.thumb-product { background:linear-gradient(135deg, var(--info-bg) 0%, #C9E1F8 100%); }
.blog-related-thumb.thumb-opinion { background:linear-gradient(135deg, var(--warn-bg) 0%, #F5DCAB 100%); }
.blog-related-thumb.thumb-update { background:linear-gradient(135deg, var(--mist) 0%, var(--munt) 100%); }
.blog-related-body { padding:14px 16px 16px; }
.blog-related-meta {
display:flex; gap:8px; align-items:center;
font-size:11px; color:var(--text-muted);
margin-bottom:8px;
}
.blog-related-h3 {
font-size:14px; font-weight:500;
line-height:1.4; margin:0 0 6px;
letter-spacing:-0.1px;
}
.blog-related-sub {
font-size:12px; color:var(--text-muted);
line-height:1.55; margin:0;
}
/* ----- BLOG MOBILE ----- */
@media (max-width:760px) {
.blog-hero { padding:40px 18px 56px; }
.blog-hero h1 { font-size:26px; }
.blog-filterbar { padding:12px 18px; }
main.blog-main { padding:0 18px 60px; }
.blog-featured { grid-template-columns:1fr; }
.blog-featured-thumb { min-height:200px; }
.blog-featured-body { padding:20px 22px 24px; }
.blog-featured h2 { font-size:22px; }
.blog-article-head { padding:32px 18px 48px; }
.blog-article-title { font-size:26px; }
.blog-article-lede { font-size:15px; }
.blog-hero-image { padding:0 18px; margin-top:-24px; }
article.blog-article-body { padding:0 18px 48px; margin-top:40px; font-size:15px; }
article.blog-article-body > p:first-of-type::first-letter { font-size:44px; }
.blog-article-foot { padding:0 18px; }
.blog-related { padding:36px 18px; }
.blog-related-grid { grid-template-columns:1fr; }
.blog-related-card .blog-related-thumb { aspect-ratio:16 / 8; }
.blog-cta-strip { padding:0 18px; }
.blog-cta-card { padding:24px 22px; }
}
/* ============== STATUS-PAGE ============== */
.status-page { background:var(--crème); }
.status-wrap { max-width:880px; margin:0 auto; padding:48px 24px 64px; }
.status-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--spar); font-weight:500; margin-bottom:10px;
}
.status-hero { margin-bottom:36px; }
.status-hero h1 {
font-size:32px; font-weight:500; letter-spacing:-0.5px;
margin:0 0 12px; line-height:1.25;
}
.status-meta {
font-size:14px; color:var(--text-muted); line-height:1.6;
margin:0 0 20px; max-width:640px;
}
.status-overall {
display:inline-flex; align-items:center; gap:10px;
padding:8px 16px; border-radius:999px;
font-size:13px;
background:var(--surface); border:1px solid var(--line);
}
.status-overall .status-overall-dot {
width:10px; height:10px; border-radius:50%;
}
.status-overall.is-ok { color:var(--spar); }
.status-overall.is-ok .status-overall-dot { background:var(--slim); box-shadow:0 0 0 4px rgba(34,179,107,0.15); }
.status-overall.is-warn { color:var(--duur, #BA7517); }
.status-overall.is-warn .status-overall-dot { background:#EF9F27; box-shadow:0 0 0 4px rgba(239,159,39,0.15); }
.status-pipelines h2 {
font-size:18px; font-weight:500;
letter-spacing:-0.3px; margin:0 0 14px;
}
.status-list {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
overflow:hidden;
}
.status-row {
display:flex; gap:14px; align-items:center;
padding:14px 18px;
border-bottom:1px solid var(--line);
}
.status-row:last-child { border-bottom:0; }
.status-icon {
width:32px; height:32px; flex-shrink:0; border-radius:50%;
display:flex; align-items:center; justify-content:center;
}
.status-icon-ok { background:var(--mist); color:var(--spar); }
.status-icon-warn { background:var(--warn-bg, #FAEEDA); color:#BA7517; }
.status-icon-err { background:var(--rood-bg, #FCEBEB); color:var(--rood, #A32D2D); }
.status-icon-muted { background:var(--grijs); color:var(--text-muted); }
.status-row-content { flex:1; min-width:0; }
.status-row-name {
font-size:14px; font-weight:500; color:var(--text);
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin-bottom:2px;
}
.status-row-meta { font-size:12px; color:var(--text-muted); line-height:1.45; }
.status-help {
margin-top:32px; padding:18px 22px;
background:var(--surface); border:1px solid var(--line); border-radius:12px;
font-size:13px; color:var(--text-muted); line-height:1.6;
}
.status-help a { color:var(--spar); }
/* ============== CONTACT-FORM ============== */
.contact-form-card { display:block; }
.contact-form { display:flex; flex-direction:column; gap:14px; position:relative; }
.contact-form-row {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.contact-field {
display:flex; flex-direction:column; gap:6px;
}
.contact-field > span {
font-size:12px; font-weight:500; color:var(--text);
}
.contact-field input, .contact-field textarea {
background:var(--crème); border:1px solid var(--line-2); border-radius:10px;
padding:11px 14px; font-size:14px; color:var(--text);
font-family:inherit; transition:border-color 0.15s;
}
.contact-field input:focus, .contact-field textarea:focus {
outline:0; border-color:var(--slim);
box-shadow:0 0 0 3px rgba(34,179,107,0.12);
}
.contact-field textarea { resize:vertical; min-height:120px; line-height:1.55; }
.contact-field-err { font-size:11px; color:var(--rood, #A32D2D); }
.contact-success {
padding:18px 22px;
background:var(--mist); border:1px solid var(--munt); border-radius:12px;
font-size:14px; line-height:1.6; color:var(--text);
}
.contact-success strong { display:block; margin-bottom:4px; font-size:15px; }
.contact-error {
padding:12px 16px; background:var(--rood-bg, #FCEBEB);
border:1px solid #F5D0CD; border-radius:10px;
font-size:13px; color:var(--rood, #A32D2D); margin-bottom:14px;
}
@media (max-width:640px) {
.contact-form-row { grid-template-columns:1fr; }
}
/* ============== TOGGLE-SLIDER ==============
iOS-stijl pill-toggle voor on/off-velden. Groen bij ON, grijs bij OFF,
transitie. Disabled-state voor "komt later"-channels. */
.slimhuys-toggle {
display:inline-block; position:relative;
width:36px; height:20px;
background:var(--line-2);
border:0; border-radius:999px;
cursor:pointer;
transition:background-color 0.18s;
flex-shrink:0;
padding:0;
}
.slimhuys-toggle::after {
content:'';
position:absolute;
top:2px; left:2px;
width:16px; height:16px;
background:var(--surface); border-radius:50%;
box-shadow:0 1px 3px rgba(4,46,29,0.20);
transition:transform 0.18s;
}
.slimhuys-toggle.is-on { background:var(--slim); }
.slimhuys-toggle.is-on::after { transform:translateX(16px); }
.slimhuys-toggle:disabled,
.slimhuys-toggle.is-disabled {
cursor:not-allowed; opacity:0.4;
}
.slimhuys-toggle:focus-visible {
outline:2px solid var(--slim); outline-offset:2px;
}
/* Notif-table — type/desc + 3 channel-kolommen (E-mail/Push/SMS) */
.notif-table {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
overflow:hidden;
}
.notif-head, .notif-row {
display:grid;
grid-template-columns:1fr 64px 64px;
align-items:center;
gap:12px;
padding:14px 22px;
}
.notif-head {
border-bottom:1px solid var(--line);
padding:14px 22px 12px;
}
.notif-head > div {
font-size:10px; font-weight:600;
text-transform:uppercase; letter-spacing:0.6px;
color:var(--text-muted);
text-align:center;
}
.notif-head > div:first-child { text-align:left; }
.notif-row { border-top:1px solid var(--line); }
.notif-row:first-of-type { border-top:0; }
.notif-row > .slimhuys-toggle { justify-self:center; }
.notif-info { min-width:0; }
.notif-name {
font-size:14px; font-weight:500; color:var(--text);
margin-bottom:3px;
}
.notif-desc {
font-size:12px; color:var(--text-muted); line-height:1.5;
}
.notif-category {
font-size:11px; font-weight:600;
text-transform:uppercase; letter-spacing:0.5px;
color:var(--text-muted);
background:var(--mist);
padding:12px 22px 10px;
}
.notif-row + .notif-category { border-top:1px solid var(--line); }
.notif-category + .notif-row { border-top:0; }
/* Quiet-hours-row: tweede grid-item heeft géén toggle-icoon maar 2 time-
inputs + wis-knop, dus volle breedte i.p.v. 3-koloms. */
.notif-row.notif-row-quiet {
grid-template-columns: 1fr;
}
.notif-quiet-controls {
display:flex; align-items:center; gap:8px;
margin-top:10px; flex-wrap:wrap;
}
.notif-quiet-input {
width:auto; min-width:108px; padding:6px 10px; font-size:13px;
}
.notif-quiet-sep { color:var(--text-muted); font-size:13px; }
/* Theme-toggle-card boven de notification-tabel. Drie pillen-stijl
selector, mid-grid op desktop, full-width op mobile. */
.theme-toggle-card {
display:flex; align-items:center; justify-content:space-between;
gap:14px; flex-wrap:wrap;
background:var(--surface); border:1px solid var(--border);
border-radius:12px; padding:14px 16px;
margin-bottom:14px;
}
.theme-toggle-info strong {
display:block; font-size:14px; color:var(--text); font-weight:500;
margin-bottom:2px;
}
.theme-toggle-info small { display:block; font-size:12px; color:var(--text-muted); line-height:1.5; }
.theme-toggle-pills {
display:inline-flex; background:var(--surface-alt); border-radius:9px;
padding:3px; gap:2px;
}
.theme-toggle-pills button {
background:transparent; border:0; cursor:pointer;
padding:6px 14px; border-radius:7px;
font-size:13px; font-weight:500; color:var(--text-muted);
font-family:inherit;
transition:background 0.15s, color 0.15s;
}
.theme-toggle-pills button.is-active {
background:var(--surface); color:var(--text);
box-shadow:var(--shadow-card);
}
.theme-toggle-pills button:hover:not(.is-active) { color:var(--text); }
@media (max-width:640px) {
.notif-head, .notif-row {
grid-template-columns:1fr 48px 48px;
padding:12px 16px;
}
.notif-head > div { font-size:9px; }
.notif-category { padding:10px 16px 8px; }
}
/* ============== OVER-PAGE ============== */
.over-page { background:var(--crème); }
.over-hero {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:64px 32px 72px;
position:relative; overflow:hidden;
}
.over-hero::before {
content:''; position:absolute; top:-120px; right:-120px;
width:480px; height:480px;
background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
pointer-events:none;
}
.over-hero-inner { max-width:880px; margin:0 auto; position:relative; z-index:2; }
.over-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--blad); font-weight:500; margin-bottom:14px;
}
.over-hero h1 {
font-size:38px; font-weight:500; line-height:1.15;
letter-spacing:-0.6px; color:#fff; margin:0 0 14px;
max-width:760px;
}
.over-hero p {
font-size:16px; color:var(--munt);
line-height:1.6; max-width:640px; margin:0;
}
.over-wrap { max-width:760px; margin:0 auto; padding:48px 24px 80px; }
.over-author {
display:flex; align-items:center; gap:14px;
padding:18px 22px; background:var(--surface);
border:1px solid var(--line); border-radius:14px;
margin:-32px 0 36px;
box-shadow:0 8px 24px rgba(4,46,29,0.06);
}
.over-author-circle {
width:48px; height:48px; border-radius:50%;
background:linear-gradient(135deg, var(--slim), var(--spar));
color:#fff; font-weight:600; font-size:16px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.over-author-name { font-size:15px; font-weight:500; color:var(--text); }
.over-author-meta { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.45; }
.over-section { margin:48px 0; }
.over-section-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:0.7px;
color:var(--spar); font-weight:500; margin-bottom:8px;
}
.over-section h2 {
font-size:26px; font-weight:500; letter-spacing:-0.4px;
margin:0 0 20px; line-height:1.25;
}
.over-prose, .over-prose-intro {
font-size:15px; color:var(--text); line-height:1.75;
}
.over-prose p { margin:0 0 18px; }
.over-prose strong { font-weight:600; }
.over-prose em { color:var(--text-muted); font-style:italic; }
.over-prose a, .over-prose-intro a { color:var(--spar); text-decoration:underline; }
.over-prose-intro { margin-bottom:24px; max-width:680px; }
.over-callout {
margin:28px 0;
padding:22px 26px;
background:var(--mist);
border-left:4px solid var(--slim);
border-radius:0 12px 12px 0;
font-size:16px; line-height:1.55;
color:var(--text); font-weight:500;
letter-spacing:-0.1px;
}
.over-stats {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 100%);
color:#fff;
padding:36px 36px;
border-radius:18px;
margin:48px 0;
position:relative; overflow:hidden;
}
.over-stats::before {
content:''; position:absolute; top:-100px; right:-100px;
width:300px; height:300px;
background:radial-gradient(circle, rgba(79,203,142,0.18) 0%, transparent 70%);
pointer-events:none;
}
.over-stats-h {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--blad); font-weight:500; margin-bottom:18px;
position:relative; z-index:2;
}
.over-stats-grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
position:relative; z-index:2;
}
.over-stat-l { font-size:10px; color:var(--munt); text-transform:uppercase; letter-spacing:0.5px; }
.over-stat-v { font-size:24px; font-weight:500; color:#fff; margin-top:4px; letter-spacing:-0.4px; }
.over-stat-s { font-size:11px; color:var(--munt); margin-top:4px; line-height:1.5; }
.over-principles {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
margin-top:18px;
}
.over-principle {
background:var(--surface); border:1px solid var(--line);
border-radius:14px; padding:20px;
}
.over-principle-icon {
width:36px; height:36px; border-radius:9px;
display:flex; align-items:center; justify-content:center;
margin-bottom:12px;
}
.over-principle-icon svg { width:18px; height:18px; }
.over-principle-icon.eu { background:var(--info-bg, #E6F1FB); color:var(--info, #185FA5); }
.over-principle-icon.privacy { background:var(--mist); color:var(--spar); }
.over-principle-icon.open { background:var(--paars-bg, #EEEDFE); color:var(--paars, #534AB7); }
.over-principle-icon.honest { background:var(--warn-bg, #FAEEDA); color:var(--duur, #BA7517); }
.over-principle-h { font-size:14px; font-weight:500; color:var(--text); margin-bottom:4px; }
.over-principle-s { font-size:13px; color:var(--text-muted); line-height:1.55; }
.over-principle-s a { color:var(--spar); }
.over-projects {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
margin-top:24px;
}
.over-project {
background:var(--surface); border:1px solid var(--line);
border-radius:14px; padding:20px;
text-decoration:none; color:inherit;
display:flex; flex-direction:column; gap:8px;
transition:border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.over-project:hover {
border-color:var(--slim); transform:translateY(-2px);
box-shadow:0 10px 24px rgba(4,46,29,0.07);
text-decoration:none;
}
.over-project-mark {
width:40px; height:40px; border-radius:9px;
display:inline-flex; align-items:center; justify-content:center;
font-weight:600; font-size:13px; color:#fff;
}
.over-project-mark.r112 { background:#A32D2D; }
.over-project-mark.gi { background:#185FA5; }
.over-project-h { font-size:15px; font-weight:500; color:var(--text); }
.over-project-tagline { font-size:13px; color:var(--text-muted); line-height:1.55; }
.over-project-foot {
font-size:11px; color:var(--text-muted); margin-top:auto;
border-top:1px solid var(--line); padding-top:8px;
}
.over-contact {
background:var(--surface); border:1px solid var(--line);
border-radius:14px; padding:24px;
margin-top:14px;
}
.over-contact-h {
font-size:14px; font-weight:500; color:var(--text);
margin-bottom:18px;
}
.over-contact-methods {
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.over-contact-method {
display:flex; align-items:center; gap:12px;
padding:14px 16px; background:var(--crème);
border:1px solid var(--line); border-radius:10px;
text-decoration:none; color:inherit;
transition:border-color 0.18s;
}
.over-contact-method:hover { border-color:var(--slim); text-decoration:none; }
.over-contact-method svg { width:20px; height:20px; color:var(--spar); flex-shrink:0; }
.over-contact-method-l { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; }
.over-contact-method-v { font-size:13px; color:var(--text); font-weight:500; margin-top:2px; }
@media (max-width:760px) {
.over-hero { padding:40px 18px 56px; }
.over-hero h1 { font-size:26px; }
.over-wrap { padding:32px 18px 60px; }
.over-section h2 { font-size:22px; }
.over-stats { padding:24px 22px; }
.over-stats-grid { grid-template-columns:1fr 1fr; gap:16px; }
.over-principles, .over-projects, .over-contact-methods { grid-template-columns:1fr; }
.over-callout { padding:18px 20px; font-size:15px; }
.over-author { padding:14px 16px; }
}
/* ============== FAQ-PAGE ============== */
.faq-page { background:var(--crème); }
.faq-hero {
background:linear-gradient(155deg, var(--nacht) 0%, var(--donker) 60%, #073629 100%);
color:#fff;
padding:56px 32px 64px;
position:relative; overflow:hidden;
}
.faq-hero::before {
content:''; position:absolute; top:-100px; right:-100px;
width:400px; height:400px;
background:radial-gradient(circle, rgba(79,203,142,0.16) 0%, transparent 70%);
pointer-events:none;
}
.faq-hero-inner { max-width:880px; margin:0 auto; position:relative; z-index:2; }
.faq-eyebrow {
font-size:11px; text-transform:uppercase; letter-spacing:1px;
color:var(--blad); font-weight:500; margin-bottom:14px;
}
.faq-hero h1 {
font-size:34px; font-weight:500; line-height:1.2;
letter-spacing:-0.5px; color:#fff; margin:0 0 12px;
}
.faq-hero p {
font-size:15px; color:var(--munt);
line-height:1.6; max-width:560px; margin:0;
}
.faq-hero p a { color:var(--blad); text-decoration:underline; }
.faq-wrap { max-width:880px; margin:0 auto; padding:48px 24px 80px; }
.faq-toc {
display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:10px; margin-bottom:48px;
}
.faq-toc-item {
display:flex; align-items:center; gap:10px;
padding:14px 16px;
background:var(--surface); border:1px solid var(--line); border-radius:12px;
text-decoration:none; color:var(--text);
font-size:14px; font-weight:500;
transition:border-color 0.15s, transform 0.15s;
}
.faq-toc-item:hover {
border-color:var(--slim); transform:translateY(-1px);
text-decoration:none;
}
.faq-toc-icon {
width:32px; height:32px; flex-shrink:0;
background:var(--mist); color:var(--spar);
border-radius:8px;
display:flex; align-items:center; justify-content:center;
}
.faq-toc-icon svg { width:16px; height:16px; }
.faq-toc-item small {
margin-left:auto; font-size:11px; color:var(--text-muted);
font-weight:400;
}
.faq-section { margin:40px 0; scroll-margin-top:80px; }
.faq-section-h {
display:flex; align-items:center; gap:12px;
font-size:22px; font-weight:500;
letter-spacing:-0.3px; margin:0 0 16px;
}
.faq-section-icon {
width:36px; height:36px;
background:var(--mist); color:var(--spar);
border-radius:9px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.faq-section-icon svg { width:18px; height:18px; }
/* /faq-pagina: boxed-style. Op de homepage staat een aparte flat-list-
stijl (zie hierboven, "FAQ"), die /faq-blokken zijn enkel op de FAQ-
pagina via .faq-section ge-scope'd zodat 't niet doorlekt. */
.faq-section .faq-list { display:flex; flex-direction:column; gap:10px; }
.faq-section .faq-item {
background:var(--surface); border:1px solid var(--line); border-radius:12px;
transition:border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.faq-section .faq-item:hover { border-color:var(--line-2); }
.faq-section .faq-item[open] {
border-color:var(--munt);
box-shadow:0 1px 0 var(--mist) inset, 0 6px 18px rgba(4,46,29,0.05);
}
.faq-section .faq-q {
cursor:pointer; padding:16px 20px;
font-size:15px; font-weight:500; color:var(--text); line-height:1.4;
display:flex; align-items:center; justify-content:space-between; gap:14px;
list-style:none; user-select:none;
}
.faq-section .faq-q::-webkit-details-marker { display:none; }
.faq-section .faq-q::after {
content:''; flex-shrink:0;
width:22px; height:22px; border-radius:50%;
background:var(--mist) url("data:image/svg+xml;utf8,") no-repeat center / 12px 12px;
transition:transform 0.22s, background-color 0.18s;
}
.faq-section .faq-item[open] .faq-q::after {
transform:rotate(45deg); background-color:var(--munt);
}
.faq-section .faq-a {
padding:4px 20px 18px;
font-size:14.5px; color:var(--text-muted); line-height:1.65;
border-top:1px solid var(--mist); margin-top:0;
}
.faq-section .faq-item[open] .faq-q { padding-bottom:12px; }
/* Typografie binnen het antwoord — zonder deze regels valt CommonMark-
output terug op browser-defaults (geen ruimte tussen , te brede
-padding, dichte paragrafen). */
.faq-section .faq-a > *:first-child { margin-top:12px; }
.faq-section .faq-a > *:last-child { margin-bottom:0; }
.faq-section .faq-a p { margin:0 0 12px; }
.faq-section .faq-a ul,
.faq-section .faq-a ol { padding-left:22px; margin:8px 0 14px; }
.faq-section .faq-a li { margin:0 0 8px; padding-left:4px; }
.faq-section .faq-a li:last-child { margin-bottom:0; }
.faq-section .faq-a li > p { margin:0 0 6px; }
.faq-section .faq-a strong { color:var(--text); font-weight:600; }
.faq-section .faq-a a { color:var(--spar); text-decoration:underline; text-underline-offset:2px; }
.faq-section .faq-a a:hover { color:var(--blad); }
.faq-section .faq-a code {
font-family:ui-monospace, 'SF Mono', monospace; font-size:13px;
background:var(--mist); color:var(--text);
padding:1px 6px; border-radius:5px;
}
.faq-section .faq-a pre {
background:var(--nacht); color:#e6f4ec;
padding:14px 16px; border-radius:8px;
overflow-x:auto; font-size:12.5px; line-height:1.55;
margin:10px 0 14px;
}
.faq-section .faq-a pre code { background:none; color:inherit; padding:0; }
.faq-section .faq-a blockquote {
border-left:3px solid var(--munt);
margin:12px 0; padding:6px 14px;
background:var(--mist); color:var(--text);
border-radius:0 8px 8px 0;
}
.faq-section .faq-a blockquote p:last-child { margin-bottom:0; }
.faq-section .faq-a hr { border:0; border-top:1px solid var(--line); margin:14px 0; }
.faq-help {
margin-top:56px;
padding:28px 32px;
background:var(--surface); border:1px solid var(--line); border-radius:14px;
text-align:center;
}
.faq-help h2 { font-size:18px; font-weight:500; margin:0 0 8px; }
.faq-help p { font-size:14px; color:var(--text-muted); margin:0; line-height:1.6; }
.faq-help a { color:var(--spar); }
@media (max-width:760px) {
.faq-hero { padding:40px 18px 48px; }
.faq-hero h1 { font-size:26px; }
.faq-wrap { padding:32px 18px 60px; }
.faq-toc { grid-template-columns:1fr 1fr; }
.faq-section-h { font-size:18px; }
}
/* ============== EMPTY-STATE ============== */
.empty-state {
text-align:center;
padding:48px 28px 56px;
max-width:520px; margin:24px auto;
}
.empty-state-icon {
width:72px; height:72px;
background:var(--mist); color:var(--spar);
border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
margin-bottom:18px;
}
.empty-state-icon svg { width:32px; height:32px; }
.empty-state-title {
font-size:20px; font-weight:500;
color:var(--text); letter-spacing:-0.3px;
margin:0 0 10px;
}
.empty-state-message {
font-size:14px; color:var(--text-muted);
line-height:1.6; margin:0 0 22px;
}
.empty-state-actions {
display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
/* ============== TOUR-CARD ============== */
.tour-card {
background:var(--surface); border:1px solid var(--line); border-radius:14px;
padding:18px 22px;
margin-bottom:16px;
}
.tour-card-head {
display:flex; justify-content:space-between; align-items:center;
margin-bottom:14px;
}
.tour-card-head strong {
font-size:11px; text-transform:uppercase; letter-spacing:0.6px;
color:var(--text-muted); font-weight:500;
}
.tour-close {
background:transparent; border:0; cursor:pointer;
font-size:22px; line-height:1; color:var(--text-muted);
padding:0 4px;
}
.tour-close:hover { color:var(--text); }
.tour-tiles {
display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
}
.tour-tile {
display:flex; flex-direction:column; gap:6px;
padding:14px 16px;
background:var(--crème); border:1px solid var(--line); border-radius:10px;
text-decoration:none; color:inherit;
transition:border-color 0.18s, transform 0.18s;
}
.tour-tile:hover {
border-color:var(--slim); transform:translateY(-1px);
text-decoration:none;
}
.tour-tile-icon {
width:32px; height:32px; border-radius:8px;
background:var(--mist); color:var(--spar);
display:flex; align-items:center; justify-content:center;
margin-bottom:4px;
}
.tour-tile strong { font-size:13px; color:var(--text); font-weight:500; }
.tour-tile span { font-size:12px; color:var(--text-muted); line-height:1.5; }
@media (max-width:760px) {
.tour-tiles { grid-template-columns:1fr; }
}
/* =================================================================
RESPONSIVE PATCHES — uitgebreide audit 2026-05-10, gebundeld
zodat we ze als groep kunnen bijhouden ipv scattered door de file.
================================================================= */
/* Leveranciers-tabel + CTA-card stack op tablet — 2-col legt af bij <768px */
@media (max-width:768px) {
.lev-grid { grid-template-columns:1fr; gap:24px; }
}
/* PublicHome stats-strip: 4-koloms krap op iPhone, naar 2-col + minder padding */
@media (max-width:640px) {
.stats-strip { grid-template-columns:repeat(2, 1fr); padding:24px 18px; gap:20px 12px; }
.stats-strip > div { border-right:0; padding:0 4px; }
.stat-v { font-size:22px; }
}
/* Account → Energiecontract: 3 radio-cards naast elkaar wordt te krap onder 480px */
@media (max-width:480px) {
.contract-type-row { grid-template-columns:1fr; gap:8px; }
}
/* Onboarding device-pick: 2-col te krap op iPhone SE (<380px) */
@media (max-width:380px) {
.device-grid { grid-template-columns:1fr; }
}
/* Heatmap-tooltip mocht buiten viewport vallen — clamp 'm op mobile */
@media (max-width:480px) {
.heat-tooltip { max-width:calc(100vw - 20px); min-width:0; padding:10px 12px; }
.heatmap-legend-bar { width:140px; }
}
/* Dropdown-panel kon afval'len op smalle schermen, vooral rechts-uitgelijnde */
@media (max-width:480px) {
.dropdown-panel { max-width:calc(100vw - 20px); }
}
/* Dashboard KPI-tiles: padding minder op mobile zodat content beter past */
@media (max-width:600px) {
.kpi { padding:14px 14px; }
}
/* ============================================================
DARK-MODE OVERRIDES — specifieke elementen die `var(--donker)` of
`var(--nacht)` als FOREGROUND (border, dash-line) gebruiken op een
dark surface. Daar wordt dark op dark onzichtbaar; in dark mode
moeten deze juist light tinten zijn voor contrast. Als BACKGROUND
blijven de tokens dark, dat is overal correct.
============================================================ */
[data-theme="dark"] .ca-now-line,
[data-theme="dark"] .now-line {
border-left-color:var(--text-muted);
}
[data-theme="dark"] .lev-breakdown tr.total td {
border-top-color:var(--text-muted);
}
/* Solar-soft (#FCE8A8) achtergrond is fel-geel — werkt op licht maar
te bright op donker. In dark mode pakken we een warm-amber tint die
nog duidelijk als "geel/zon" leesbaar is (#3a2f15 zag eruit als
dirt-brown naast de mint+coral-bars in het dashboard-chart). */
[data-theme="dark"] {
--solar-soft:rgba(245,200,76,0.32);
}
/* `.kpi.solar` en `.month-cell.solar` hadden hardcoded #FFFBEB (cream) bg —
vervangen door gedimde dark-yellow tint zodat 't yellow-accent-karakter
behouden blijft maar tekst leesbaar wordt. */
[data-theme="dark"] .kpi.solar,
[data-theme="dark"] .month-cell.solar { background:#2a2510; border-color:#3a2f15; }
/* Info-alerts (`.alert.info`) hebben donkerblauwe tekst hardcoded —
in dark mode moet die naar lichtblauw flippen voor contrast. */
[data-theme="dark"] .alert.info { color:#a8c8f2; border-color:#1c4775; }
/* Logo-swap: /img/logo.svg heeft donkere tekst (Slim*) en een donkere
dakelijn — onleesbaar op de dark-mode achtergrond. We swappen via
content:url() naar de donker-achtergrond-variant. Toegepast op alle
plekken waar het light-logo nu op een potentieel-donker oppervlak
staat (sidebar, footer, onboarding-header). De public-topbar gebruikt
al logo-on-dark.svg. */
[data-theme="dark"] img.logo-adaptive { content:url(/img/logo-on-dark.svg); }
/* Auto-fill-banner gebruikt --mist + --munt — in dark mode is --mist
wel donker maar de munt-border + dim background gaven onvoldoende
visueel gewicht aan de inhoud. Surface-alt + sterkere border + iets
accentueerde strong-tekst. */
[data-theme="dark"] .auto-fill-banner {
background:var(--surface-alt);
border-color:rgba(127,219,176,0.35);
}
/* =================================================================== */
/* PUBLIEKE PRIJS-PAGES (stroomprijzen-vandaag, leverancier/prijzen-vandaag,
gemiddelde-stroomprijs, negatieve-stroomprijzen, wanneer-X, wat-kost,
vergelijken, saldering) — server-rendered SEO. Brand-consistent met
.lev-* / .over-*; eigen naam-prefix omdat layout-grids verschillen. */
/* =================================================================== */
.prijs-page, .watkost-page, .wanneer-page, .vergelijken-page, .saldering-page {
font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
color:var(--text); background:var(--crème); margin:0;
}
.prijs-wrap, .watkost-wrap, .wanneer-wrap, .vergelijken-wrap, .saldering-wrap {
max-width:960px; margin:0 auto; padding:48px 24px 64px;
}
.prijs-hero { margin-bottom:24px; }
.prijs-hero h1 { font-size:38px; line-height:1.15; letter-spacing:-1px; font-weight:500; margin:0 0 14px; max-width:760px; }
.prijs-eyebrow { display:inline-block; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); margin:0 0 12px; font-weight:600; }
.prijs-big { display:flex; align-items:baseline; gap:6px; margin:8px 0 12px; }
.prijs-num { font-size:64px; font-weight:500; letter-spacing:-1.5px; line-height:1; color:var(--spar); }
.prijs-unit { font-size:20px; color:var(--text-muted); }
.prijs-meta { font-size:16px; color:var(--text-muted); max-width:760px; line-height:1.55; margin:0 0 22px; }
.prijs-cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.prijs-card {
background:var(--surface); border:1px solid var(--line); border-radius:16px;
padding:24px 28px; margin-top:18px;
}
.prijs-card h2 { font-size:20px; font-weight:500; letter-spacing:-0.4px; margin:0 0 14px; color:var(--text); }
.prijs-card h3 { font-size:16px; font-weight:500; margin:18px 0 10px; color:var(--text); }
.prijs-card p { font-size:14px; line-height:1.6; color:var(--text); margin:0 0 12px; }
.prijs-card p:last-child { margin-bottom:0; }
.prijs-list { margin:0 0 12px; padding-left:20px; font-size:14px; line-height:1.7; color:var(--text); }
.prijs-fineprint { font-size:12px; color:var(--text-muted); margin-top:14px; line-height:1.5; }
.prijs-empty { font-size:14px; color:var(--text-muted); font-style:italic; padding:18px 0; }
/* Tabellen */
.prijs-table { width:100%; border-collapse:collapse; font-size:14px; }
.prijs-table th { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; padding:10px 8px; text-align:left; border-bottom:1px solid var(--line); }
.prijs-table th.num, .prijs-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.prijs-table td { padding:10px 8px; border-bottom:1px solid var(--line); color:var(--text); }
.prijs-table tr:last-child td { border-bottom:0; }
.prijs-year-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:14px; font-size:14px; }
.prijs-year-list li strong { color:var(--spar); }
/* Chart-card */
.prijs-chart-card { padding:22px 24px 18px; }
.prijs-chart-head { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:12px; }
.prijs-chart-head h2 { margin:0; }
.prijs-chart-legend { display:flex; gap:14px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; }
.legend-swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
.swatch-bar { background:var(--blad); }
.swatch-now { background:var(--donker); border-radius:50%; }
.prijs-chart { width:100%; overflow:hidden; border-radius:8px; }
.prijs-chart svg { width:100%; height:auto; display:block; }
.prijs-chart .bar-negative { fill:var(--neg); }
.prijs-chart .bar-low { fill:var(--blad); }
.prijs-chart .bar-medium-low { fill:#7dd6a8; }
.prijs-chart .bar-medium { fill:var(--solar); }
.prijs-chart .bar-medium-high { fill:#e89b3c; }
.prijs-chart .bar-high { fill:var(--rood); }
/* Extremes (cheapest/duurste uur) */
.prijs-extremes-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.prijs-extreme { padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.prijs-extreme-low { background:linear-gradient(155deg, #ECFAF3 0%, #FFFFFF 100%); border-color:rgba(34,179,107,0.2); }
.prijs-extreme-high { background:linear-gradient(155deg, #FCEBEB 0%, #FFFFFF 100%); border-color:rgba(163,45,45,0.2); }
.prijs-extreme-h { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:600; margin-bottom:8px; }
.prijs-extreme-time { font-size:22px; font-weight:500; color:var(--text); margin-bottom:4px; }
.prijs-extreme-price { font-size:14px; color:var(--text-muted); margin-bottom:12px; }
.prijs-extreme-cta { font-size:13px; color:var(--spar); text-decoration:none; font-weight:500; }
.prijs-extreme-cta:hover { text-decoration:underline; }
.prijs-extreme-tip { font-size:12px; color:var(--text-muted); font-style:italic; }
[data-theme="dark"] .prijs-extreme-low { background:linear-gradient(155deg, rgba(34,179,107,0.15) 0%, var(--surface) 100%); }
[data-theme="dark"] .prijs-extreme-high { background:linear-gradient(155deg, rgba(163,45,45,0.15) 0%, var(--surface) 100%); }
/* Stats */
.prijs-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:8px; }
.prijs-stat-l { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:4px; }
.prijs-stat-v { font-size:20px; font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
.prijs-stats-sub { font-size:13px; color:var(--text-muted); margin:18px 0 10px; text-transform:uppercase; letter-spacing:1px; }
.prijs-other-suppliers { font-size:14px; line-height:2; }
.prijs-other-suppliers a { color:var(--spar); text-decoration:none; }
.prijs-other-suppliers a:hover { text-decoration:underline; }
.prijs-cta { background:linear-gradient(155deg, var(--mist) 0%, var(--surface) 100%); border-color:rgba(79,203,142,0.2); }
[data-theme="dark"] .prijs-cta { background:linear-gradient(155deg, rgba(79,203,142,0.10) 0%, var(--surface) 100%); }
/* Wat-kost-pages */
.watkost-cat h2 { margin-bottom:14px; }
.watkost-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; }
.watkost-tile { display:block; padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--text); transition:border-color 0.15s, transform 0.15s; }
.watkost-tile:hover { border-color:var(--blad); transform:translateY(-1px); }
.watkost-tile-h { font-size:16px; font-weight:500; margin-bottom:6px; }
.watkost-tile-kwh { font-size:12px; color:var(--text-muted); margin-bottom:14px; }
.watkost-tile-cost { font-size:22px; font-weight:500; color:var(--spar); margin-bottom:14px; }
.watkost-tile-sub { font-size:11px; color:var(--text-muted); margin-left:6px; font-weight:400; }
.watkost-tile-cta { font-size:12px; color:var(--spar); }
.watkost-detail-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.watkost-detail-tile { padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.watkost-detail-tile.highlight { background:linear-gradient(155deg, var(--mist) 0%, var(--surface) 100%); border-color:rgba(79,203,142,0.25); }
.watkost-detail-l { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.watkost-detail-v { font-size:24px; font-weight:500; color:var(--text); margin-bottom:4px; }
.watkost-detail-tile.highlight .watkost-detail-v { color:var(--spar); }
.watkost-detail-s { font-size:11px; color:var(--text-muted); }
.watkost-best-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:18px; padding:16px 0 18px; }
.watkost-best-l { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.watkost-best-time { font-size:24px; font-weight:500; color:var(--text); }
.watkost-best-v { font-size:20px; font-weight:500; color:var(--text); }
.watkost-best-v.highlight { color:var(--spar); }
.watkost-best-v.save { color:var(--slim); }
.watkost-best-tip { font-size:13px; color:var(--text-muted); font-style:italic; margin-bottom:14px; }
.watkost-other-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.watkost-other-tile {
display:flex; flex-direction:column; gap:8px;
padding:14px 16px; border-radius:10px;
border:1px solid var(--line); background:var(--surface);
color:var(--text); text-decoration:none;
transition:border-color 0.15s, transform 0.15s, background 0.15s;
}
.watkost-other-tile:visited { color:var(--text); }
.watkost-other-tile:hover { border-color:var(--blad); transform:translateY(-1px); background:var(--surface); text-decoration:none; color:var(--text); }
.watkost-other-cat { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); font-weight:600; }
.watkost-other-name { font-size:14px; font-weight:500; line-height:1.35; color:var(--text); flex:1; }
.watkost-other-foot { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; padding-top:6px; border-top:1px solid var(--line); margin-top:auto; }
.watkost-other-kwh { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.watkost-other-cost { color:var(--spar); font-weight:500; font-variant-numeric:tabular-nums; }
[data-theme="dark"] .watkost-detail-tile.highlight, [data-theme="dark"] .prijs-cta {
background:linear-gradient(155deg, rgba(79,203,142,0.10) 0%, var(--surface) 100%);
}
/* Wanneer-pages */
.wanneer-form { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px; }
.wanneer-form label { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); }
.wanneer-form select, .wanneer-form input[type="number"] {
font-size:15px; padding:8px 12px; border:1px solid var(--line-2); border-radius:8px;
background:var(--surface); color:var(--text); min-width:120px;
}
.wanneer-best { background:linear-gradient(155deg, var(--mist) 0%, var(--surface) 100%); border-color:rgba(79,203,142,0.25); }
.wanneer-best-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--spar); font-weight:600; margin-bottom:6px; }
.wanneer-best h2 { font-size:26px; margin:0 0 14px; }
.wanneer-best-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:18px; margin-bottom:16px; }
.wanneer-best-l { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.wanneer-best-v { font-size:22px; font-weight:500; color:var(--text); }
.wanneer-best-diff { color:var(--spar); }
.wanneer-best-tip { font-size:13px; color:var(--text-muted); margin-bottom:14px; }
[data-theme="dark"] .wanneer-best { background:linear-gradient(155deg, rgba(79,203,142,0.10) 0%, var(--surface) 100%); }
/* Vergelijker */
.vergelijken-form { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-top:18px; }
.vergelijken-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.vergelijken-form input[type="number"] {
font-size:16px; padding:8px 12px; border:1px solid var(--line-2); border-radius:8px;
background:var(--surface); color:var(--text); width:160px; font-variant-numeric:tabular-nums;
}
.input-with-unit { display:inline-flex; align-items:center; gap:8px; }
.vergelijken-unit { font-size:13px; color:var(--text-muted); font-weight:400; text-transform:none; letter-spacing:0; }
.vergelijken-winner { background:linear-gradient(155deg, var(--mist) 0%, var(--surface) 100%); border-color:rgba(79,203,142,0.25); }
.vergelijken-winner-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--spar); font-weight:600; margin-bottom:6px; }
.vergelijken-winner h2 { font-size:26px; margin:0 0 14px; }
.vergelijken-spread { font-size:13px; color:var(--text-muted); margin-top:10px; }
.vergelijken-table tr.is-cheapest td { background:rgba(79,203,142,0.08); }
.vergelijken-table .vergelijken-meta { display:block; font-size:11px; color:var(--text-muted); margin-top:2px; }
[data-theme="dark"] .vergelijken-winner { background:linear-gradient(155deg, rgba(79,203,142,0.10) 0%, var(--surface) 100%); }
/* Saldering */
.saldering-countdown { display:inline-flex; align-items:baseline; gap:10px; background:var(--surface); padding:14px 22px; border-radius:12px; border:1px solid var(--line); margin:6px 0 16px; }
.saldering-countdown-n { font-size:48px; font-weight:500; color:var(--rood); letter-spacing:-1px; line-height:1; }
.saldering-countdown-l { font-size:13px; color:var(--text-muted); }
.saldering-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:14px 0 24px; }
.saldering-form label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.saldering-form input[type="number"] {
font-size:16px; padding:8px 12px; border:1px solid var(--line-2); border-radius:8px;
background:var(--surface); color:var(--text); width:160px; font-variant-numeric:tabular-nums;
}
.saldering-result { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.saldering-result-tile { padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); }
.saldering-result-tile.highlight { background:linear-gradient(155deg, #FCEBEB 0%, var(--surface) 100%); border-color:rgba(163,45,45,0.2); }
.saldering-result-l { font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.saldering-result-v { font-size:28px; font-weight:500; color:var(--text); font-variant-numeric:tabular-nums; }
.saldering-result-tile.highlight .saldering-result-v { color:var(--rood); }
.saldering-result-s { font-size:11px; color:var(--text-muted); margin-top:4px; }
.saldering-result-per { font-size:14px; color:var(--text-muted); font-weight:400; margin-left:4px; }
[data-theme="dark"] .saldering-result-tile.highlight { background:linear-gradient(155deg, rgba(163,45,45,0.15) 0%, var(--surface) 100%); }
/* Mobile responsiveness voor alle nieuwe SEO-pages */
@media (max-width:720px) {
.prijs-num { font-size:48px; }
.prijs-hero h1 { font-size:28px; }
.prijs-wrap, .watkost-wrap, .wanneer-wrap, .vergelijken-wrap, .saldering-wrap { padding:32px 18px 48px; }
.prijs-card { padding:20px 18px; }
.prijs-extremes-grid { grid-template-columns:1fr; }
.prijs-stats-grid { grid-template-columns:repeat(2, 1fr); }
.watkost-detail-grid { grid-template-columns:1fr; }
.saldering-result { grid-template-columns:1fr; }
.saldering-countdown-n { font-size:36px; }
.vergelijken-form { gap:10px; }
.vergelijken-form input[type="number"] { width:100%; }
.vergelijken-table { font-size:13px; }
}
/* Reauth-banner op /app/integraties — toont wanneer 1+ koppelingen
definitief verlopen zijn en handmatige re-login nodig hebben. */
.reauth-banner {
display:flex; gap:14px;
padding:18px 20px; margin:0 0 24px;
background:linear-gradient(155deg, var(--rood-bg) 0%, var(--surface) 100%);
border:1px solid rgba(163,45,45,0.2); border-radius:12px;
}
.reauth-banner-icon { font-size:24px; line-height:1; flex-shrink:0; color:var(--rood); }
.reauth-banner-body { flex:1; }
.reauth-banner-body strong { display:block; font-size:15px; color:var(--text); margin-bottom:4px; }
.reauth-banner-body p { font-size:13px; color:var(--text-muted); margin:0 0 12px; line-height:1.5; }
.reauth-banner-actions { display:flex; flex-wrap:wrap; gap:8px; }
[data-theme="dark"] .reauth-banner {
background:linear-gradient(155deg, rgba(163,45,45,0.15) 0%, var(--surface) 100%);
}
/* App-store-CTA's op de app-teaser. Geen letterlijke vendor-badges (die
zouden pixel-accurate moeten zijn) maar eigen knoppen met de officiële
logo's — toegestaan onder Apple's marketing-guidelines én Google Play's
brand-guidelines als promotional button. */
.ios-pill-live { background:var(--mist); color:var(--spar); }
.store-btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.app-store-btn {
display:inline-flex; align-items:center; gap:10px;
padding:10px 22px; border-radius:10px;
background:#000; color:#fff; text-decoration:none;
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
transition:transform 0.15s, background 0.15s;
}
.app-store-btn:hover { background:#1a1a1a; transform:translateY(-1px); color:#fff; text-decoration:none; }
.app-store-icon { width:28px; height:28px; flex-shrink:0; }
.app-store-btn-text { display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.app-store-btn-text small { font-size:10px; opacity:0.85; letter-spacing:0.2px; }
.app-store-btn-text strong { font-size:20px; font-weight:500; letter-spacing:-0.3px; margin-top:1px; }
/* Play-knop deelt black-button-look met de App-Store-knop; alleen de
icon-paths zelf zijn 4-kleurig (officiële Google Play-logo). */
.play-store-btn .app-store-btn-text strong { font-family:'Roboto',-apple-system,BlinkMacSystemFont,sans-serif; }
/* Provider-switcher op /stroomprijzen-vandaag — keuze persisteert
via SupplierPreference-cookie en wordt op andere SEO-pages
(wanneer-X, wat-kost, gemiddelde-stroomprijs) gerespecteerd. */
.prijs-switcher { display:inline-flex; align-items:center; gap:10px; margin-top:6px; font-size:13px; color:var(--text-muted); }
.prijs-switcher label { font-weight:500; }
.prijs-switcher select {
font-size:14px; padding:6px 10px; border:1px solid var(--line-2); border-radius:8px;
background:var(--surface); color:var(--text); cursor:pointer;
font-family:inherit;
}
.prijs-switcher select:hover { border-color:var(--blad); }
/* Floating tooltip op de prijs-chart — toont kwartier-detail bij hover
of focus. Positie wordt door inline-JS gezet per cursor-positie. */
.prijs-chart { position:relative; }
.prijs-tooltip {
position:absolute; pointer-events:none;
background:var(--text); color:#fff;
padding:10px 14px; border-radius:8px;
font-size:13px; line-height:1.4;
white-space:nowrap;
transform:translate(-50%, -100%);
box-shadow:0 6px 18px rgba(0,0,0,0.18);
opacity:0; transition:opacity 0.12s;
z-index:5;
}
.prijs-tooltip.is-visible { opacity:1; }
.prijs-tooltip-h { font-weight:500; font-size:12px; opacity:0.85; margin-bottom:4px; }
.prijs-tooltip-day { font-weight:400; opacity:0.7; margin-left:4px; }
.prijs-tooltip-price strong { font-size:18px; font-weight:500; font-variant-numeric:tabular-nums; }
.prijs-tooltip-unit { opacity:0.7; font-size:12px; margin-left:2px; }
.prijs-tooltip-meta { font-size:11px; opacity:0.7; margin-top:4px; }
.prijs-tooltip::after {
content:''; position:absolute; left:50%; top:100%;
transform:translateX(-50%); border:5px solid transparent;
border-top-color:var(--text);
}
/* Actieve bar: lichte witte outline om de geselecteerde te benadrukken. */
.prijs-chart svg rect[data-price] { cursor:pointer; transition:filter 0.1s; }
.prijs-chart svg rect[data-price]:hover { filter:brightness(1.1); }
.prijs-chart svg rect.is-active { stroke:var(--text); stroke-width:1.5; filter:brightness(1.1); }
.prijs-chart svg rect[data-price]:focus { outline:none; }
.prijs-chart svg rect[data-price]:focus-visible { stroke:var(--spar); stroke-width:2; }