/*
 * Enerview bovenop Tabler (tabler.io). Tabler levert de basis (kaarten, knoppen, formulieren, licht/donker);
 * hier alleen de merkkleur en wat Tabler niet heeft: grafieken, live-blok, navigatie onderin, vergelijkbalken.
 * Energiekleuren: stroom (groen), teruglevering (amber), gas (blauw), vaste kosten (grijs).
 */
:root, [data-bs-theme="light"] {
	--tblr-primary: #0f8a5f;
	--tblr-primary-rgb: 15, 138, 95;
	--tblr-primary-text-emphasis: #0b6a49;
	--tblr-primary-bg-subtle: #e3f3ec;
	--tblr-primary-border-subtle: #9fd5bf;
	--tblr-link-color: #0b6a49;
	--tblr-link-color-rgb: 11, 106, 73;
	--tblr-link-hover-color: #08513a;
	--ev-import: #0f8a5f;
	--ev-export: #b26f00;
	--ev-gas: #2563b8;
	--ev-fixed: #8b9a93;
}
[data-bs-theme="dark"] {
	--tblr-primary: #2fbf8a;
	--tblr-primary-rgb: 47, 191, 138;
	--tblr-primary-text-emphasis: #6fdcb2;
	--tblr-primary-bg-subtle: rgba(47, 191, 138, .14);
	--tblr-primary-border-subtle: rgba(47, 191, 138, .35);
	--tblr-link-color: #6fdcb2;
	--tblr-link-color-rgb: 111, 220, 178;
	--tblr-link-hover-color: #94e7c7;
	--ev-import: #2fbf8a;
	--ev-export: #f2b43c;
	--ev-gas: #6aa6ef;
	--ev-fixed: #5d6e66;
}
:root {
	/* Eigen namen, gekoppeld aan Tabler zodat licht/donker vanzelf meegaat. */
	--ev-bg: var(--tblr-body-bg);
	--ev-surface: var(--tblr-bg-surface);
	--ev-surface-2: var(--tblr-bg-surface-secondary);
	--ev-line: var(--tblr-border-color);
	--ev-text: var(--tblr-body-color);
	--ev-muted: var(--tblr-secondary);
	--ev-accent: var(--tblr-primary);
	--ev-accent-ink: var(--tblr-primary-text-emphasis);
	--ev-accent-soft: rgba(var(--tblr-primary-rgb), .12);
	--ev-danger: var(--tblr-danger);
	--ev-warn: var(--tblr-warning);
	--ev-radius: var(--tblr-border-radius-lg);
	--ev-radius-sm: var(--tblr-border-radius);
	--ev-shadow: var(--tblr-shadow-card);
	--ev-ease: cubic-bezier(.16, 1, .3, 1);
}
.btn-primary { --tblr-btn-bg: var(--tblr-primary); --tblr-btn-border-color: var(--tblr-primary); --tblr-btn-hover-bg: var(--tblr-primary-text-emphasis);
	--tblr-btn-hover-border-color: var(--tblr-primary-text-emphasis); --tblr-btn-active-bg: var(--tblr-primary-text-emphasis); --tblr-btn-color: #fff; --tblr-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-primary { --tblr-btn-color: #06281b; --tblr-btn-hover-color: #06281b; }
.form-check-input:checked { background-color: var(--tblr-primary); border-color: var(--tblr-primary); }

.op-07 { color: var(--tblr-secondary); }
.op-06 { opacity: .6; }
.ev-icon { flex: none; }
[data-bs-theme="light"] .ev-when-dark, :root:not([data-bs-theme="dark"]) .ev-when-dark { display: none; }
[data-bs-theme="dark"] .ev-when-light { display: none; }
.ev-footer-version { font-variant-numeric: tabular-nums; }

/* ---------- Logo ---------- */
.ev-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--tblr-body-color); text-decoration: none; }
.ev-logo:hover { color: var(--tblr-body-color); text-decoration: none; }
.ev-logo-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tblr-primary); color: #fff; }
[data-bs-theme="dark"] .ev-logo-mark { color: #06281b; }
.ev-avatar { background: var(--tblr-primary-bg-subtle); color: var(--tblr-primary-text-emphasis); font-weight: 600; }

/* ---------- Navigatie ---------- */
.ev-menubar .navbar { min-height: 3rem; }
.ev-menubar .nav-item.active .nav-link, .ev-menubar .nav-link[aria-current] { color: var(--tblr-primary-text-emphasis); }
.ev-switch .dropdown-toggle { max-width: 16rem; font-weight: 600; }
.ev-switch .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.ev-tabbar { display: none; }
@media (max-width: 767.98px) {
	.ev-menubar { display: none; }
	.ev-logo-text { display: none; }
	.ev-switch { margin-right: auto; }
	.ev-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
		background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); }
	.ev-tabbar a, .ev-tabbar span.disabled { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
		border-radius: 10px; color: var(--tblr-secondary); font-size: .625rem; font-weight: 500; text-decoration: none; }
	.ev-tabbar a.active { color: var(--tblr-primary-text-emphasis); background: var(--ev-accent-soft); font-weight: 600; }
	.ev-tabbar span.disabled { opacity: .45; }
	.ev-app .page-wrapper { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Paginakop (Tabler page-header) ---------- */
.ev-pagehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.ev-pagetitle { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0; }
.ev-pagesub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .35rem; color: var(--tblr-secondary); font-size: .875rem; }
.ev-pagesub > span:not(.ev-chip) { display: inline-flex; align-items: center; gap: .35rem; }
.ev-lede { color: var(--tblr-secondary); margin: .35rem 0 0; }
.ev-back { display: inline-flex; align-items: center; gap: .25rem; color: var(--tblr-secondary); font-size: .875rem; margin-bottom: .5rem; }
.ev-caption { color: var(--tblr-secondary); font-size: .8125rem; line-height: 1.5; margin: .5rem 0 0; }
.ev-empty { color: var(--tblr-secondary); margin: .25rem 0; }
.ev-narrow { max-width: 760px; }
.ev-link { display: inline-flex; align-items: center; gap: .15rem; font-size: .875rem; font-weight: 600; }

/* ---------- Panelen = Tabler-kaarten ---------- */
.ev-panel { position: relative; background: var(--tblr-bg-surface); border: var(--tblr-border-width) solid var(--tblr-border-color-translucent, var(--tblr-border-color));
	border-radius: var(--tblr-border-radius-lg); box-shadow: var(--tblr-shadow-card); padding: 1.25rem; margin-bottom: 1rem; }
.ev-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: 1rem; }
.ev-panel-head h2, .ev-panel-title { font-size: 1rem; font-weight: 600; margin: 0; }
.ev-panel-title { margin-bottom: .85rem; }
.ev-panel-danger { border-color: var(--tblr-danger); }
.ev-panel-compact { padding-top: .9rem; padding-bottom: .9rem; }
.ev-subhead { font-size: .9375rem; font-weight: 600; margin: 0 0 .25rem; }
.ev-legendrow { color: var(--tblr-secondary); font-size: .8125rem; }

.ev-row { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-top: 1px solid var(--tblr-border-color); }
.ev-row:first-of-type, .ev-panel-head + .ev-row, .ev-caption + .ev-row { border-top: 0; }
.ev-row-top { align-items: flex-start; }
.ev-rowlink { color: inherit; text-decoration: none; padding: .85rem .5rem; border-radius: var(--tblr-border-radius); }
.ev-rowlink:hover { color: inherit; background: var(--tblr-bg-surface-secondary); text-decoration: none; }
.ev-list.ev-panel { padding: .5rem 1rem; }

.ev-notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; margin-bottom: 1rem; border-radius: var(--tblr-border-radius-lg);
	background: var(--tblr-primary-bg-subtle); border: 1px solid var(--tblr-primary-border-subtle); }
.ev-notice > .ev-icon, .ev-notice > .spinner-grow { color: var(--tblr-primary-text-emphasis); margin-top: 2px; }
.ev-notice p { margin: .15rem 0 0; color: var(--tblr-secondary); }
.ev-notice-sun { background: rgba(var(--tblr-warning-rgb), .12); border-color: rgba(var(--tblr-warning-rgb), .35); }
.ev-notice-sun > .ev-icon { color: var(--ev-export); }
.ev-emptypanel { display: flex; gap: 1rem; align-items: flex-start; }
.ev-emptypanel > .ev-icon { color: var(--tblr-primary); }
.ev-emptypanel h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.ev-emptypanel p { color: var(--tblr-secondary); }

.ev-chip, .ev-statuschip { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border-radius: 999px;
	background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); color: var(--tblr-secondary); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.ev-badge { display: inline-block; padding: .2rem .5rem; border-radius: var(--tblr-border-radius); font-size: .75rem; font-weight: 600;
	background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); }
.ev-badge-error { background: rgba(var(--tblr-danger-rgb), .14); color: var(--tblr-danger-text-emphasis, var(--tblr-danger)); }
.ev-badge-warning { background: rgba(var(--tblr-warning-rgb), .16); color: var(--tblr-warning-text-emphasis, var(--tblr-warning)); }
.ev-badge-info { background: var(--tblr-primary-bg-subtle); color: var(--tblr-primary-text-emphasis); }

.ev-status { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tblr-secondary); flex: none; }
.ev-status-online { background: var(--ev-import); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .22); }
.ev-status-offline { background: var(--tblr-danger); }

.ev-events { list-style: none; margin: .75rem 0 0; padding: 0; }
.ev-events li { display: grid; grid-template-columns: auto 1fr auto; gap: .65rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--tblr-border-color); font-size: .875rem; }
.ev-events time { font-size: .8125rem; white-space: nowrap; color: var(--tblr-secondary); }

/* ---------- Kerncijfers ---------- */
.ev-stats { display: grid; gap: .25rem; margin: 0; }
.ev-stat { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--tblr-border-color); }
.ev-stat:first-child { border-top: 0; padding-top: 0; }
.ev-stat dt { display: flex; align-items: center; gap: .65rem; font-weight: 500; color: var(--tblr-secondary); margin: 0; }
.ev-stat dd { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.ev-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ev-stats-row .ev-stat { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem 1.25rem; margin: 0; }
.ev-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .ev-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ev-stats-row { grid-template-columns: 1fr; gap: .75rem; } .ev-stats-row .ev-stat { flex-direction: row; align-items: center; } }
.ev-stat-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--tblr-border-radius); flex: none;
	background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); }
.ev-c-import { background: rgba(var(--tblr-primary-rgb), .14); color: var(--ev-import); }
.ev-c-export { background: rgba(var(--tblr-warning-rgb), .16); color: var(--ev-export); }
.ev-c-gas { background: rgba(var(--tblr-blue-rgb, 37, 99, 184), .14); color: var(--ev-gas); }
.ev-c-accent { background: var(--tblr-primary-bg-subtle); color: var(--tblr-primary-text-emphasis); }

/* ---------- Dashboard ---------- */
.ev-dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.ev-dash > .ev-panel { margin-bottom: 0; }
@media (max-width: 1199.98px) { .ev-dash { grid-template-columns: 1fr 1fr; } .ev-dash > .ev-now { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .ev-dash { grid-template-columns: 1fr; } }
.ev-cost-total { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; margin: .25rem 0 1rem; }
.ev-mini { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding-top: .8rem; border-top: 1px solid var(--tblr-border-color); }
.ev-mini dt { display: flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 500; color: var(--tblr-secondary); margin: 0 0 .1rem; }
.ev-mini dd { font-weight: 600; font-variant-numeric: tabular-nums; margin: 0; }

/* Live-blok: de ondergrond kleurt mee met de richting van de stroom (verbruik groen, teruglevering amber). */
.ev-now { background: color-mix(in srgb, var(--ev-import) 6%, var(--tblr-bg-surface)); border-color: color-mix(in srgb, var(--ev-import) 25%, var(--tblr-border-color));
	transition: background-color .6s var(--ev-ease), border-color .6s var(--ev-ease); }
.ev-now.ev-live-export { background: color-mix(in srgb, var(--ev-export) 8%, var(--tblr-bg-surface)); border-color: color-mix(in srgb, var(--ev-export) 30%, var(--tblr-border-color)); }
.ev-now-value { font-size: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums; color: var(--tblr-primary-text-emphasis); margin: .25rem 0 .6rem; }
.ev-live-export .ev-now-value { color: var(--ev-export); }
.ev-stale .ev-now-value { color: var(--tblr-secondary) !important; }
.ev-stale.ev-now { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); }
.ev-now-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .875rem; margin-bottom: .75rem; }
.ev-flow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .875rem; }
.ev-livestate { display: inline-flex; align-items: center; font-size: .8125rem; color: var(--tblr-secondary); }
.ev-live-ok { color: var(--tblr-primary-text-emphasis); font-weight: 600; }
.ev-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; margin-right: .45rem; }
.ev-is-live .ev-live-dot { background: var(--ev-import); opacity: 1; animation: ev-pulse 2s ease-in-out infinite; }
.ev-live-export.ev-is-live .ev-live-dot { background: var(--ev-export); }
@keyframes ev-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ev-is-live .ev-live-dot { animation: none; } }
.ev-live-spark { display: block; width: 100%; height: 72px; }
.ev-live-spark:empty { display: none; } /* nog geen live metingen: geen lege ruimte */
.ev-live-line { fill: none; stroke: var(--ev-import); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ev-live-area { fill: var(--ev-import); fill-opacity: .12; }
.ev-live-export .ev-live-line { stroke: var(--ev-export); }
.ev-live-export .ev-live-area { fill: var(--ev-export); }
.ev-live-spark .ev-chart-zero { vector-effect: non-scaling-stroke; }

/* ---------- Live-pagina ---------- */
.ev-livehead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.ev-livehead .ev-now-value { margin-top: 0; }
.ev-livechart { min-height: 220px; margin: 0 -.25rem .5rem; touch-action: pan-y; }
.ev-livechart svg { display: block; width: 100%; height: auto; color: var(--tblr-body-color); }
.ev-lc-area-up { fill: var(--ev-import); fill-opacity: .14; }
.ev-lc-area-dn { fill: var(--ev-export); fill-opacity: .18; }
.ev-lc-line-up { fill: none; stroke: var(--ev-import); stroke-width: 1.75; stroke-linejoin: round; }
.ev-lc-line-dn { fill: none; stroke: var(--ev-export); stroke-width: 1.75; stroke-linejoin: round; }
.ev-lc-cursor { stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 3 3; }
.ev-lc-dot-up { fill: var(--ev-import); stroke: var(--tblr-bg-surface); stroke-width: 2; }
.ev-lc-dot-dn { fill: var(--ev-export); stroke: var(--tblr-bg-surface); stroke-width: 2; }
.ev-lc-tip { fill: var(--tblr-bg-surface-secondary); stroke: var(--tblr-border-color); }
.ev-lc-tiptext { fill: currentColor; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-livepanel.ev-stale .ev-lc-line-up { stroke: var(--tblr-secondary); }
.ev-livegrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; }
.ev-livegrid > .ev-panel { margin-bottom: 0; }
@media (max-width: 991.98px) { .ev-livegrid { grid-template-columns: 1fr; } }

/* Periode- en bereikkeuze (segmented control) */
.ev-segmented { display: inline-flex; padding: 3px; border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); }
.ev-segmented a, .ev-segmented button { padding: .35rem .85rem; border: 0; background: transparent; border-radius: calc(var(--tblr-border-radius) - 2px);
	color: var(--tblr-secondary); font-weight: 500; font-size: .875rem; text-decoration: none; cursor: pointer; }
.ev-segmented a:hover, .ev-segmented button:hover { color: var(--tblr-body-color); text-decoration: none; }
.ev-segmented .active { background: var(--tblr-bg-surface); color: var(--tblr-body-color); font-weight: 600; box-shadow: var(--tblr-shadow-card); }
.ev-histbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ev-stepper { display: flex; align-items: center; gap: .75rem; }
.ev-stepper h2 { font-size: 1rem; font-weight: 600; margin: 0; min-width: 12ch; text-align: center; }
.ev-iconbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--tblr-border-radius); padding: 0;
	border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-body-color); }
.ev-iconbtn:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.ev-iconbtn.disabled { opacity: .4; pointer-events: none; }
@media (max-width: 575.98px) { .ev-histbar { flex-direction: column; align-items: stretch; } .ev-segmented { justify-content: space-between; } .ev-segmented a { flex: 1; text-align: center; } .ev-stepper { justify-content: space-between; } }

/* Tabel */
.ev-tablewrap { overflow-x: auto; }
.ev-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ev-table th, .ev-table td { padding: .5rem .5rem; border-top: 1px solid var(--tblr-border-color); text-align: left; white-space: nowrap; }
.ev-table thead th { border-top: 0; color: var(--tblr-secondary); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.ev-table tbody th { font-weight: 600; }
.ev-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ev-table tbody tr:hover { background: var(--tblr-bg-surface-secondary); }

/* ---------- Kosten en vergelijken ---------- */
.ev-legend-fixed { background: var(--ev-fixed); }
.ev-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.ev-compare > .ev-panel { margin-bottom: 0; }
@media (max-width: 991.98px) { .ev-compare { grid-template-columns: 1fr; } }
.ev-cmp h2 { display: flex; align-items: center; }
.ev-cmp-row { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: .75rem; margin-bottom: .6rem; font-size: .875rem; }
.ev-cmp-row > span { color: var(--tblr-secondary); }
.ev-cmp-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-cmp-track { height: 10px; border-radius: 999px; background: var(--tblr-bg-surface-secondary); overflow: hidden; }
.ev-cmp-bar { height: 100%; border-radius: 999px; transition: width .8s var(--ev-ease); }
.ev-cmp-import { background: var(--ev-import); }
.ev-cmp-gas { background: var(--ev-gas); }
.ev-cmp-ref { background: var(--ev-fixed); }

/* ---------- Instellingen ---------- */
.ev-settings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ev-sidenav { display: flex; flex-direction: column; gap: .1rem; position: sticky; top: 1rem; }
.ev-sidenav-group { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary); padding: 1rem .75rem .35rem; }
.ev-sidenav-group:first-child { padding-top: 0; }
.ev-sidenav a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: var(--tblr-border-radius);
	color: var(--tblr-body-color); font-weight: 500; text-decoration: none; }
.ev-sidenav a:hover { background: var(--tblr-bg-surface-secondary); text-decoration: none; }
.ev-sidenav a.active { background: var(--tblr-primary-bg-subtle); color: var(--tblr-primary-text-emphasis); font-weight: 600; }
.ev-sidenav a .ev-icon { color: var(--tblr-secondary); }
.ev-sidenav a.active .ev-icon { color: inherit; }
.ev-sidenav a.ev-danger:hover, .ev-sidenav a.ev-danger.active { color: var(--tblr-danger); background: rgba(var(--tblr-danger-rgb), .1); }
@media (max-width: 767.98px) {
	.ev-settings { grid-template-columns: 1fr; gap: 1rem; }
	.ev-sidenav { flex-direction: row; position: static; overflow-x: auto; scrollbar-width: none; margin: 0 -.75rem; padding: 0 .75rem .25rem; }
	.ev-sidenav-group { display: none; }
	.ev-sidenav a { flex: none; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: 999px; padding: .4rem .8rem; }
}
.ev-colorpick { display: inline-flex; align-items: center; gap: .35rem; }
.ev-colorpick input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface); cursor: pointer; }
.ev-linkbtn { border: 0; background: none; padding: 0; color: var(--tblr-secondary); font-size: .8125rem; text-decoration: underline; cursor: pointer; }

/* Lichte labels (Tabler -lt): in het lichte thema donkerdere tekst voor voldoende contrast. */
[data-bs-theme="light"] .bg-success-lt { color: #1b6b30 !important; }
[data-bs-theme="light"] .bg-warning-lt { color: #7a4a00 !important; background-color: rgba(var(--tblr-warning-rgb), .16) !important; }
[data-bs-theme="light"] .bg-danger-lt { color: #a1281f !important; }
[data-bs-theme="light"] .bg-info-lt { color: #155e8c !important; }
[data-bs-theme="light"] .bg-secondary-lt { color: #4b5563 !important; }

/* Beheer: kaarten binnen het tab-paneel als lichte vlakken, geen kaart-in-kaart met dubbele schaduw. */
.ev-admin .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ev-admin .nav-tabs .nav-link { white-space: nowrap; }
.ev-admin > .card-body .card { box-shadow: none; background: var(--tblr-bg-surface-secondary); border-color: transparent; }
.ev-admin > .card-body .card .card { background: var(--tblr-bg-surface); }
.ev-admin > .card-body .ev-panel { box-shadow: none; }

.ev-code-input { font-size: 1.75rem; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; }
.ev-recovery-codes { font-family: var(--tblr-font-monospace); columns: 2; }

/* ---------- Grafieken (SVG, op de server getekend). Op smalle schermen horizontaal scrollen. ---------- */
.ev-chart { overflow-x: auto; }
.ev-chart svg { display: block; width: 100%; min-width: 600px; height: auto; color: var(--tblr-body-color); }
.ev-chart-grid { stroke: currentColor; stroke-opacity: .10; }
.ev-chart-zero { stroke: currentColor; stroke-opacity: .35; }
.ev-chart-axis { fill: currentColor; fill-opacity: .6; font-size: 12px; font-variant-numeric: tabular-nums; }
.ev-chart-hit { fill: transparent; }
.ev-chart g:hover .ev-chart-hit { fill: currentColor; fill-opacity: .05; }
.ev-bar-import { fill: var(--ev-import); }
.ev-bar-export { fill: var(--ev-export); }
.ev-bar-gas { fill: var(--ev-gas); }
.ev-bar-gap { fill-opacity: .5; }
.ev-bar-missing { fill: currentColor; fill-opacity: .2; }
.ev-legend { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; margin-right: .35rem; }
.ev-legend-import { background: var(--ev-import); }
.ev-legend-export { background: var(--ev-export); }
.ev-legend-gas { background: var(--ev-gas); }