/*
 * VEROMAX private app shell — versie 2 (rust en overzicht), 25 oktober 2026
 *
 * De gedeelde ontwerplaag voor alle beveiligde toepassingen. Wordt als
 * laatste stylesheet geladen, na veromax.css en de paginaspecifieke CSS.
 *
 * Uitgangspunten:
 *  - Eén rustige typografie: Inter voor alle tekst, gewone zinsletters.
 *    IBM Plex Mono alleen nog voor tijdstempels, codes en de kleine
 *    paginacode bovenaan. Geen gespatieerde hoofdletterlabels meer.
 *  - Signaalkleur 620 alleen voor actieve navigatie, focus en een levend
 *    statuspunt. Nooit meer als decoratie op koppen of kaartranden.
 *  - Eén knoppenladder: hoofdactie (gevuld), tweede actie (omrand),
 *    stille actie, gevaarlijke actie. Elke knop is in rust een knop.
 *  - Een duidelijk donkerdere pagina met lichte kaarten en een zachte
 *    schaduw: je ziet meteen waar een blok begint en eindigt.
 *
 * Versie 3 (26 oktober 2026): kopbalk met het Apps-menu links en het
 * accountmenu rechts (app_shell_core.php + app-header.js), meer contrast
 * tussen pagina en kaarten, iets ronder (8 px kaarten, 6 px bediening) en
 * donkere pictogramtegels als vaste herkenningspunten per toepassing.
 */

/* =========================================================
   01. TOKENS
   Ook de oudere variabelen van de pagina's worden hier op dezelfde waarden
   gezet, zodat elke app uit dezelfde bron put.
   ========================================================= */

body.v-app-shell:not(.access-page) {
  --app-bg: #EDEDE9;
  --app-surface: #FCFCFA;
  --app-surface-2: #F2F2EE;
  --app-surface-hover: #F6F6F3;
  --app-border: rgba(21, 23, 22, .1);
  --app-border-strong: rgba(21, 23, 22, .22);
  --app-text: #151716;
  --app-text-2: #4F5351;
  --app-text-3: #636663;
  --app-primary-bg: #151716;
  --app-primary-bg-hover: #2C302E;
  --app-primary-text: #FAFAF8;
  --app-shadow-overlay: 0 1.25rem 3.5rem rgba(8, 9, 9, .22);
  --app-shadow-card: 0 1px 2px rgba(21, 23, 22, .05), 0 2px 6px rgba(21, 23, 22, .035);
  --app-shadow-menu: 0 .75rem 2rem rgba(8, 9, 9, .14), 0 1px 3px rgba(8, 9, 9, .08);
  --app-backdrop: rgba(8, 9, 9, .45);
  --app-radius: 6px;
  --app-radius-lg: 8px;
  --app-font: var(--v-font-institutional);
  --app-font-mono: var(--v-font-system);
  --app-fs-xs: .75rem;      /* 12 */
  --app-fs-sm: .8125rem;    /* 13 */
  --app-fs-md: .875rem;     /* 14 */
  --app-fs-base: .9375rem;  /* 15 */
  --app-fs-lg: 1.0625rem;   /* 17 */
  --app-fs-h2: 1.25rem;     /* 20 */
  --app-fs-h1: clamp(1.5rem, 1.3rem + .6vw, 1.875rem);
  --app-fs-kpi: clamp(1.5rem, 1.3rem + .5vw, 1.875rem);
  --app-gap: 1rem;
  --app-section-gap: 2.5rem;
  --app-control-h: 2.5rem;
  --app-ok: #1F6E50;
  --app-warn: #8A5A0E;
  --app-danger: #A8402F;
  --app-ok-weak: rgba(31, 110, 80, .1);
  --app-warn-weak: rgba(138, 90, 14, .1);
  --app-danger-weak: rgba(168, 64, 47, .09);
  --app-live: #1F8A5F;

  /* Gedeelde basis (veromax.css) */
  --v-bg: var(--app-bg);
  --v-surface: var(--app-surface);
  --v-surface-subtle: var(--app-surface-2);
  --v-text: var(--app-text);
  --v-text-muted: var(--app-text-2);
  --v-text-faint: var(--app-text-3);
  --v-rule: var(--app-border);
  --v-rule-strong: var(--app-border-strong);
  --v-ok: var(--app-ok);
  --v-warn: var(--app-warn);
  --v-danger: var(--app-danger);
  --v-ok-weak: var(--app-ok-weak);
  --v-warn-weak: var(--app-warn-weak);
  --v-danger-weak: var(--app-danger-weak);
  --v-control-bg: rgba(21, 23, 22, .05);
  --v-control-bg-hover: rgba(21, 23, 22, .08);
  --v-control-bg-active: rgba(21, 23, 22, .12);
  --v-placeholder: #6B6E6B;

  /* Oudere app-variabelen (investments-shell, home-system, energie) */
  --bg: var(--app-bg);
  --text: var(--app-text);
  --label: var(--app-text-2);
  --hint: var(--app-text-3);
  --glass-bg: var(--app-surface);
  --glass-border: var(--app-border);
  --row-hover: var(--app-surface-hover);
  --input-bg: var(--app-surface);
  --input-border: var(--app-border-strong);
  --input-text: var(--app-text);
  --toggle-border: var(--app-border-strong);
  --popup-bg: var(--app-surface);
  --popup-border: var(--app-border);
  --overlay-bg: var(--app-backdrop);
  --chart-grid: rgba(21, 23, 22, .08);
  --chart-text: rgba(21, 23, 22, .62);

  /* Grafiekpalet (versie 3.1, 26 oktober 2026). Elke grootheid houdt in elke
     toepassing dezelfde kleur. De volgorde in gestapelde grafieken is met het
     palettenscript gecontroleerd op kleurenblindheid en gewoon zicht, in licht
     en donker (zie de merkbijbel, 9.5). Basiskleuren: */
  --series-amber: #c98500;
  --series-blue: #2a78d6;
  --series-aqua: #1baf7a;
  --series-violet: #6250d6;
  --series-magenta: #d55181;
  --series-gray: #a5a7a4;
  --series-ink: #3a3d3c;
  --series-signal: var(--v-620);
  /* Betekenis per grootheid: */
  --series-solar: var(--series-amber);
  --series-home: var(--series-ink);
  --series-grid-import: var(--series-blue);
  --series-export: var(--series-violet);
  --series-water: var(--series-aqua);
  --series-cost-energy: var(--series-amber);
  --series-cost-network: var(--series-blue);
  --series-cost-levies: var(--series-magenta);
  --series-cost-fixed: var(--series-gray);
  --series-cost-water: var(--series-aqua);
  --series-cost-injection: var(--series-violet);
  --series-saved: var(--series-amber);
  --series-peak: var(--series-ink);
  --series-supply: var(--series-amber);
  --series-return: var(--series-blue);
  --series-dhw: var(--series-aqua);
  --series-outside: var(--series-violet);
  --series-hashrate: var(--series-signal);
  --series-asic: var(--series-aqua);
  --series-vr: var(--series-gray);
  --accent-green: var(--app-ok);
  --accent-green-weak: var(--app-ok-weak);
  --accent-red: var(--app-danger);
  --accent-red-weak: var(--app-danger-weak);
  --accent-orange-weak: var(--app-warn-weak);
  --accent-blue-weak: var(--app-surface-2);
  --v-app-success: var(--app-ok);
  --v-app-warning: var(--app-warn);
  --v-app-error: var(--app-danger);

  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: var(--app-fs-md);
  line-height: 1.55;
  letter-spacing: 0;
  font-feature-settings: "cv11", "ss01";
}

html[data-theme="dark"] body.v-app-shell:not(.access-page),
body.v-app-shell.v-theme-dark:not(.access-page) {
  --app-bg: #0A0B0B;
  --app-surface: #141615;
  --app-surface-2: #1C1E1D;
  --app-surface-hover: #191B1A;
  --app-border: rgba(250, 250, 248, .09);
  --app-border-strong: rgba(250, 250, 248, .17);
  --app-text: #ECECE8;
  --app-text-2: #A9ABA8;
  --app-text-3: #878A87;
  --app-primary-bg: #ECECE8;
  --app-primary-bg-hover: #FFFFFF;
  --app-primary-text: #0A0B0B;
  --app-shadow-overlay: 0 1.25rem 3.5rem rgba(0, 0, 0, .55);
  --app-shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --app-shadow-menu: 0 .75rem 2rem rgba(0, 0, 0, .6), 0 0 0 1px rgba(250, 250, 248, .06);
  --app-backdrop: rgba(0, 0, 0, .6);
  --app-ok: #5DB38C;
  --app-warn: #E0B05C;
  --app-danger: #E3806F;
  --app-ok-weak: rgba(93, 179, 140, .12);
  --app-warn-weak: rgba(224, 176, 92, .12);
  --app-danger-weak: rgba(227, 128, 111, .12);
  --app-live: #5DB38C;
  --v-control-bg: rgba(250, 250, 248, .06);
  --v-control-bg-hover: rgba(250, 250, 248, .1);
  --v-control-bg-active: rgba(250, 250, 248, .14);
  --v-placeholder: #8A8D8A;
  --chart-grid: rgba(250, 250, 248, .08);
  --chart-text: rgba(250, 250, 248, .62);
  --series-blue: #3987e5;
  --series-aqua: #199e70;
  --series-violet: #9085e9;
  --series-gray: #5f6461;
  --series-ink: #c9cbc8;
}

/* De inlogpagina is de publieke grens en behoudt haar eigen opzet: ze
   krijgt geen van de bovenstaande waarden. De gedeelde knop en melding
   vallen daar terug op de oorspronkelijke merkwaarden (620 als hoofdactie). */

html { background: var(--v-bg); }
html:has(body.v-app-shell:not(.access-page)) { background: var(--app-bg, #F3F3EF); }
html[data-theme="dark"]:has(body.v-app-shell:not(.access-page)) { background: #0A0B0B; }

.v-app-shell .grid-overlay { display: none; }

/* =========================================================
   02. TYPOGRAFIE
   ========================================================= */

.v-app-shell:not(.access-page) h1,
.v-app-shell:not(.access-page) h2,
.v-app-shell:not(.access-page) h3,
.v-app-shell:not(.access-page) h4 {
  color: var(--app-text);
  font-family: var(--app-font);
  letter-spacing: -.012em;
  text-transform: none;
}

.v-app-shell:not(.access-page) h2 { font-size: var(--app-fs-h2); font-weight: 600; line-height: 1.3; }
.v-app-shell:not(.access-page) h3 { font-size: var(--app-fs-base); font-weight: 600; line-height: 1.35; }
.v-app-shell:not(.access-page) h4 { font-size: var(--app-fs-md); font-weight: 600; line-height: 1.4; }

.v-app-shell:not(.access-page) .v-meta,
.v-app-shell:not(.access-page) .v-label,
.v-app-shell:not(.access-page) .v-datum {
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell:not(.access-page) .v-meta--signal { color: var(--app-text-3); }

/* Kleine systeemcode boven de paginatitel. Sinds 26 oktober 2026 niet meer
   gebruikt op de beveiligde pagina's (de kopbalk toont al waar je bent);
   de regel blijft voor oudere of publieke opmaak. */
.v-app-shell .app-kicker,
.v-app-shell .v-page-code {
  display: block;
  margin: 0 0 .4rem;
  color: var(--app-text-3);
  font-family: var(--app-font-mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.v-app-shell .app-kicker::after,
.v-app-shell .app-kicker::before { display: none; }

.v-app-shell .v-mono,
.v-app-shell time { font-family: var(--app-font-mono); font-size: .95em; letter-spacing: 0; }

/* =========================================================
   03. PAGINAKOP
   Eén titel per pagina, één korte omschrijving en rechts de actuele status.
   ========================================================= */

.v-app-shell .app-wrapper {
  width: min(100%, 90rem);
  padding: 2rem var(--v-page-gutter) 3rem;
}

.v-app-shell .app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}

.v-app-shell .app-header > .app-kicker { grid-column: 1 / -1; }
.v-app-shell .app-title-block { min-width: 0; }

.v-app-shell .app-title,
.v-app-shell .v-page-title {
  margin: 0;
  color: var(--app-text);
  font-size: var(--app-fs-h1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.v-app-shell .app-title span { opacity: 1; color: inherit; }

.v-app-shell .app-subtitle,
.v-app-shell .v-page-lede {
  max-width: 46rem;
  margin: .4rem 0 0;
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-base);
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.v-app-shell .v-page-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .75rem;
  color: var(--app-text-2);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  text-decoration: none;
}

.v-app-shell .v-page-back:hover { color: var(--app-text); text-decoration: underline; text-underline-offset: .2em; }

.v-app-shell .v-page-status,
.v-app-shell .v-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

@media (max-width: 48rem) {
  .v-app-shell .app-wrapper { padding-top: 1.5rem; }
  .v-app-shell .app-header { grid-template-columns: 1fr; align-items: start; }
  .v-app-shell .v-page-status,
  .v-app-shell .v-page-actions { justify-content: flex-start; }
}

/* Paginaband (versie 3): titel, omschrijving, status en tabbladen staan op
   een lichte band die over de volle breedte doorloopt en aansluit op de
   kopbalk. Daaronder begint de inhoud op de grijze pagina. Zo is meteen
   zichtbaar wat navigatie is en wat inhoud. De band loopt door met een
   schaduw zonder spreiding opzij (geen extra horizontale scroll); clip-path
   houdt die schaduw binnen de hoogte van de band. */
.v-app-shell :is(main, .app-wrapper):has(> .v-pagehead:first-child) { padding-top: 0; }

.v-app-shell .v-pagehead {
  position: relative;
  margin: 0 0 1.75rem;
  padding: 1.75rem 0 1.5rem;
  background: var(--app-surface);
  box-shadow: 0 0 0 100vmax var(--app-surface), 0 1px 0 100vmax var(--app-border);
  clip-path: inset(0 -100vmax -1px);
}

.v-app-shell .v-pagehead > .app-header { margin-bottom: 0; }

/* Met tabbladen: de tabs vormen de onderrand van de band. */
.v-app-shell .v-pagehead:has(> .v-tabs, > .tabs) { padding-bottom: 0; }
.v-app-shell .v-pagehead > .app-header:has(+ .v-tabs, + .tabs) { margin-bottom: 1.25rem; }

.v-app-shell .v-pagehead > .v-tabs,
.v-app-shell .v-pagehead > .tabs {
  margin: 0 0 0 -.9rem;
  border-bottom: 0;
}

@media (max-width: 48rem) {
  .v-app-shell .v-pagehead { padding-top: 1.25rem; margin-bottom: 1.25rem; }
  .v-app-shell .v-pagehead > .v-tabs,
  .v-app-shell .v-pagehead > .tabs { margin-right: calc(var(--v-page-gutter) * -1); }
}

@media print {
  .v-app-shell .v-pagehead { box-shadow: none; clip-path: none; }
}

/* Kaartkop: één titel, eventueel een korte grijze omschrijving eronder,
   bediening of eenheid rechts. Geen klein label meer boven de titel. */
.v-app-shell .v-card-desc {
  margin: .2rem 0 0;
  color: var(--app-text-2);
  font-size: var(--app-fs-sm);
  font-weight: 400;
  line-height: 1.45;
}

/* =========================================================
   04. STATUS: PUNTEN, STATUSVAK EN LABELS
   ========================================================= */

/* Statusvak (live / verouderd / offline) */
.v-app-shell .home-header-status,
.v-app-shell .mining-connection,
.v-app-shell .energy-live-state,
.v-app-shell .heat-live-state {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .55rem .85rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell .home-header-status strong,
.v-app-shell .mining-connection strong,
.v-app-shell .energy-live-state strong,
.v-app-shell .heat-live-state strong {
  display: block;
  margin: 0;
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell .home-header-status span:last-child,
.v-app-shell .mining-connection span:not(.mining-status-dot),
.v-app-shell .energy-live-state span:last-child,
.v-app-shell .heat-live-state span:last-child {
  display: block;
  margin-top: .05rem;
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-xs);
  letter-spacing: 0;
}

/* Statuspunten: één vorm, geen gloed. */
.v-app-shell .home-status-dot,
.v-app-shell .mining-status-dot,
.v-app-shell .energy-live-dot,
.v-app-shell .energy-source-dot,
.v-app-shell .heat-live-dot,
.v-app-shell .integration-status-card__indicator {
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--app-text-3);
  box-shadow: none;
  color: inherit;
}

.v-app-shell .is-live.home-status-dot,
.v-app-shell .is-live.mining-status-dot,
.v-app-shell .is-live.energy-live-dot,
.v-app-shell .is-live.energy-source-dot,
.v-app-shell .is-live.heat-live-dot,
.v-app-shell .integration-status-card__indicator--ok { background: var(--app-live); box-shadow: 0 0 0 3px var(--app-ok-weak); }

.v-app-shell .is-warning.home-status-dot,
.v-app-shell .is-stale.home-status-dot,
.v-app-shell .is-stale.mining-status-dot,
.v-app-shell .is-warning.mining-status-dot,
.v-app-shell .is-warning.energy-live-dot,
.v-app-shell .is-warning.energy-source-dot,
.v-app-shell .is-warning.heat-live-dot { background: var(--app-warn); box-shadow: none; }

.v-app-shell .is-offline.home-status-dot,
.v-app-shell .is-offline.mining-status-dot,
.v-app-shell .is-offline.energy-live-dot,
.v-app-shell .is-offline.energy-source-dot,
.v-app-shell .is-offline.heat-live-dot { background: var(--app-danger); box-shadow: none; }

/* Labels / badges: klein, zinsletters, kleur alleen voor betekenis. */
.v-app-shell .v-badge,
.v-app-shell .badge,
.v-app-shell .energy-alert-summary,
.v-app-shell .energy-alert-card__head > strong,
.v-app-shell .energy-peak-source,
.v-app-shell .tarieven-badge,
.v-app-shell .mining-chip,
.v-app-shell .energy-stage,
.v-app-shell .heat-stage,
.v-app-shell .counter-pill,
.v-app-shell .vtable-count {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 1.5rem;
  padding: .1rem .5rem;
  border: 1px solid var(--app-border);
  border-radius: 3px;
  background: var(--app-surface-2);
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
}

.v-app-shell .v-badge--ok,
.v-app-shell .badge-green,
.v-app-shell .is-ok.energy-alert-summary,
.v-app-shell .energy-alert-card.is-ok .energy-alert-card__head > strong,
.v-app-shell .is-gemeten.energy-peak-source,
.v-app-shell .tarieven-badge,
.v-app-shell .mining-chip.is-online {
  border-color: transparent;
  background: var(--app-ok-weak);
  color: var(--app-ok);
}

.v-app-shell .v-badge--warn,
.v-app-shell .badge-orange,
.v-app-shell .badge-blue,
.v-app-shell .is-warning.energy-alert-summary,
.v-app-shell .energy-alert-card.is-warning .energy-alert-card__head > strong,
.v-app-shell .is-handmatig.energy-peak-source {
  border-color: transparent;
  background: var(--app-warn-weak);
  color: var(--app-warn);
}

.v-app-shell .v-badge--danger,
.v-app-shell .badge-red,
.v-app-shell .is-critical.energy-alert-summary,
.v-app-shell .energy-alert-card.is-critical .energy-alert-card__head > strong {
  border-color: transparent;
  background: var(--app-danger-weak);
  color: var(--app-danger);
}

/* =========================================================
   05. KNOPPENLADDER
   Hoofdactie (gevuld) · tweede actie (omrand) · stil · gevaarlijk.
   ========================================================= */

.v-app-button,
.v-app-shell .btn,
.v-app-shell .primary-action,
.v-app-shell .secondary-action,
.v-app-shell .report-action,
.v-app-shell .tarieven-dialoog__acties button,
.v-app-shell .mining-confirm__actions button,
.v-app-shell .mining-performance-apply,
.v-app-shell .date-icon-btn,
.v-app-shell .home-disabled-action {
  min-height: var(--app-control-h, 2.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: auto;
  padding: 0 1rem;
  border: 1px solid var(--app-border-strong, var(--v-rule-strong));
  border-radius: var(--app-radius, 4px);
  background: var(--app-surface, transparent);
  color: var(--app-text, var(--v-text));
  font-family: var(--app-font, var(--v-font-institutional));
  font-size: var(--app-fs-md, .875rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--v-motion-fast) var(--v-ease-standard),
    color var(--v-motion-fast) var(--v-ease-standard),
    border-color var(--v-motion-fast) var(--v-ease-standard);
}

.v-app-button:hover:not(:disabled),
.v-app-shell .btn:hover:not(:disabled),
.v-app-shell .primary-action:hover:not(:disabled),
.v-app-shell .secondary-action:hover:not(:disabled),
.v-app-shell .report-action:hover:not(:disabled),
.v-app-shell .tarieven-dialoog__acties button:hover:not(:disabled),
.v-app-shell .mining-confirm__actions button:hover:not(:disabled),
.v-app-shell .mining-performance-apply:not(:disabled):hover,
.v-app-shell .date-icon-btn:hover:not(:disabled) {
  transform: none;
  border-color: var(--app-text-3, var(--v-text));
  background: var(--app-surface-2, var(--v-control-bg-hover));
  color: var(--app-text, var(--v-text));
}

.v-app-button:active:not(:disabled),
.v-app-shell .btn:active:not(:disabled) { transform: translateY(1px); }

/* Hoofdactie */
.v-app-button--primary,
.v-app-shell .btn-green,
.v-app-shell .primary-action,
.v-app-shell .tarieven-dialoog__acties button.is-primary,
.v-app-shell .mining-confirm__actions button:not(.is-danger):last-child {
  border-color: var(--app-primary-bg, var(--v-620));
  background: var(--app-primary-bg, var(--v-620));
  color: var(--app-primary-text, var(--v-100));
}

.v-app-button--primary:hover:not(:disabled),
.v-app-shell .btn-green:hover:not(:disabled),
.v-app-shell .primary-action:hover:not(:disabled),
.v-app-shell .tarieven-dialoog__acties button.is-primary:hover:not(:disabled),
.v-app-shell .mining-confirm__actions button:not(.is-danger):last-child:hover:not(:disabled) {
  border-color: var(--app-primary-bg-hover, var(--v-text));
  background: var(--app-primary-bg-hover, var(--v-text));
  color: var(--app-primary-text, var(--v-bg));
}

/* Tweede actie: de standaard hierboven. Varianten die vroeger oranje of
   blauw omrand waren, worden gewone tweede acties. */
.v-app-button--secondary,
.v-app-shell .btn-orange,
.v-app-shell .btn-blue { background: var(--app-surface, transparent); border-color: var(--app-border-strong, var(--v-rule-strong)); color: var(--app-text, var(--v-text)); }

/* Stille actie: geen rand in rust, wel een vlak bij aanwijzen. */
.v-app-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--app-text-2, var(--v-text-muted));
}

/* Gevaarlijke actie: altijd rood, ook in rust. */
.v-app-button--danger,
.v-app-shell .btn-red,
.v-app-shell .is-danger.btn,
.v-app-shell .tarieven-dialoog__acties button.is-danger,
.v-app-shell .mining-confirm__actions button.is-danger {
  border-color: color-mix(in srgb, var(--app-danger, var(--v-danger)) 45%, transparent);
  background: var(--app-surface, transparent);
  color: var(--app-danger, var(--v-danger));
}

.v-app-button--danger:hover:not(:disabled),
.v-app-shell .btn-red:hover:not(:disabled),
.v-app-shell .is-danger.btn:hover:not(:disabled),
.v-app-shell .tarieven-dialoog__acties button.is-danger:hover:not(:disabled),
.v-app-shell .mining-confirm__actions button.is-danger:hover:not(:disabled) {
  border-color: var(--app-danger, var(--v-danger));
  background: var(--app-danger, var(--v-danger));
  color: var(--app-surface, var(--v-bg));
}

/* Compacte maat voor werkbalken en tabelrijen. */
.v-app-shell .btn-sm,
.v-app-shell .btn-icon,
.v-app-button--sm,
.v-app-shell .v-utility-control--compact {
  min-height: 2rem;
  padding: 0 .7rem;
  font-size: var(--app-fs-sm);
}

/* Een knop in een gekozen toestand (periodekeuze in Investments). */
.v-app-shell .btn-sm.is-active,
.v-app-shell .btn-sm[aria-pressed="true"] {
  border-color: var(--app-text);
  background: var(--app-text);
  color: var(--app-bg);
}

.v-app-button--block { width: 100%; }

.v-app-button:focus-visible,
.v-app-shell .btn:focus-visible,
.v-app-shell button:focus-visible,
.v-app-shell a:focus-visible,
.v-app-shell [tabindex]:focus-visible,
.v-app-card:focus-visible,
.v-app-section__action:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

/* Uitgeschakeld en bezig: voor elke knop gelijk. */
.v-app-button:disabled,
.v-app-button[aria-disabled="true"],
.v-app-shell .btn[disabled],
.v-app-shell .btn-sm[disabled],
.v-app-shell .btn-icon[disabled],
.v-app-shell .top-btn[disabled],
.v-app-shell .tab-btn[disabled],
.v-app-shell .row-btn[disabled],
.v-app-shell .date-icon-btn[disabled],
.v-app-shell .energy-range button[disabled],
.v-app-shell .heat-range button[disabled],
.v-app-shell .mining-range button[disabled],
.v-app-shell .tarieven-dialoog__acties button[disabled],
.v-app-shell .primary-action:disabled,
.v-app-shell .secondary-action:disabled,
.v-app-shell .v-button[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.v-app-button.is-loading,
.v-app-button[aria-busy="true"],
.v-app-shell .btn[aria-busy="true"],
.v-app-shell .btn-sm[aria-busy="true"],
.v-app-shell .row-btn[aria-busy="true"],
.v-app-shell .primary-action[aria-busy="true"],
.v-app-shell .tarieven-dialoog__acties button[aria-busy="true"] {
  cursor: wait;
}

.v-app-button.is-loading::after,
.v-app-button[aria-busy="true"]::after,
.v-app-shell .btn[aria-busy="true"]::after,
.v-app-shell .primary-action[aria-busy="true"]::after {
  width: .8rem;
  height: .8rem;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: v-app-spin .7s linear infinite;
}

/* Pictogramknoppen in tabelrijen (bewerken, verwijderen). */
.v-app-shell .row-btn {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: .35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-text-2);
}

.v-app-shell .row-btn:hover { border-color: var(--app-border-strong); background: var(--app-surface-2); color: var(--app-text); transform: none; }
.v-app-shell .row-btn.danger { border-color: transparent; color: var(--app-danger); }
.v-app-shell .row-btn.danger:hover { border-color: var(--app-danger); background: var(--app-danger-weak); color: var(--app-danger); }

/* =========================================================
   06. KEUZESCHAKELAAR (24u / 7d / 30d, EUR / USD)
   ========================================================= */

.v-app-shell .energy-range,
.v-app-shell .heat-range,
.v-app-shell .mining-range,
.v-app-shell .currency-switch,
.v-app-shell .v-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  overflow: visible;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface-2);
}

.v-app-shell .energy-range button,
.v-app-shell .heat-range button,
.v-app-shell .mining-range button,
.v-app-shell .currency-switch button,
.v-app-shell .v-segmented button {
  min-width: 3rem;
  height: auto;
  min-height: 2rem;
  padding: 0 .75rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  outline: 0;
  cursor: pointer;
}

.v-app-shell .energy-range button:hover,
.v-app-shell .heat-range button:hover,
.v-app-shell .mining-range button:hover,
.v-app-shell .currency-switch button:hover,
.v-app-shell .v-segmented button:hover { background: transparent; color: var(--app-text); outline: 0; }

.v-app-shell .energy-range button:focus-visible,
.v-app-shell .heat-range button:focus-visible,
.v-app-shell .mining-range button:focus-visible,
.v-app-shell .currency-switch button:focus-visible,
.v-app-shell .v-segmented button:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 1px; background: transparent; }

.v-app-shell .energy-range button.is-active,
.v-app-shell .heat-range button.is-active,
.v-app-shell .mining-range button.is-active,
.v-app-shell .currency-switch button.active,
.v-app-shell .v-segmented button[aria-pressed="true"],
.v-app-shell .v-segmented button.is-active {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: 0 1px 2px rgba(8, 9, 9, .08);
}

/* =========================================================
   07. TABBLADEN
   Gedeelde tabs (.v-tabs) en de bestaande tabs van Investments.
   ========================================================= */

.v-app-shell .v-tabs,
.v-app-shell .tabs {
  display: flex;
  gap: .25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid var(--app-border);
  scrollbar-width: none;
}

.v-app-shell .v-tabs::-webkit-scrollbar,
.v-app-shell .tabs::-webkit-scrollbar { display: none; }

.v-app-shell .v-tabs__tab,
.v-app-shell .tab-btn {
  position: relative;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 .9rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-md);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  opacity: 1;
  cursor: pointer;
}

.v-app-shell .v-tabs__tab:hover,
.v-app-shell .tab-btn:hover { color: var(--app-text); background: transparent; }

.v-app-shell .v-tabs__tab[aria-selected="true"],
.v-app-shell .tab-btn.active {
  color: var(--app-text);
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--v-620);
}

.v-app-shell .v-tabs__tab:focus-visible,
.v-app-shell .tab-btn:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }

.v-app-shell .v-tabs__count {
  margin-left: .35rem;
  color: var(--app-text-3);
  font-weight: 500;
}

.v-app-shell .v-tabpanel[hidden] { display: none !important; }

/* =========================================================
   08. SECTIES EN KAARTEN
   ========================================================= */

.v-app-shell .home-section,
.v-app-shell .v-app-section {
  padding: 0;
  margin: 0 0 var(--app-section-gap);
  border: 0;
}

.v-app-shell .home-section-head,
.v-app-shell .v-app-section__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

.v-app-shell .home-section-head h2,
.v-app-shell .v-app-section__title {
  margin: 0;
  font-size: var(--app-fs-h2);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
}

.v-app-shell .v-section-lede {
  max-width: 52rem;
  margin: .3rem 0 0;
  color: var(--app-text-2);
  font-size: var(--app-fs-md);
}

/* Vroegere oranje bovenschriften boven elke kop zijn overbodig naast
   de kop zelf. Waar ze nog voorkomen, blijven ze klein en grijs. */
.v-app-shell .home-eyebrow,
.v-app-shell .v-app-section__eyebrow,
.v-app-shell .mining-eyebrow {
  margin: 0 0 .25rem;
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell .glass-card,
.v-app-shell .v-app-card,
.v-app-shell .energy-panel,
.v-app-shell .heat-panel,
.v-app-shell .heat-detail-card,
.v-app-shell .energy-source-card,
.v-app-shell .energy-tariff-card,
.v-app-shell .energy-alert-card,
.v-app-shell .tarieven-nu-card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

/* Kleine bovenschriften in kaarten: grijs en in zinsletters. */
.v-app-shell .energy-panel__head span,
.v-app-shell .heat-panel__head span,
.v-app-shell .energy-tariff-card__head,
.v-app-shell .energy-alert-card__head > span,
.v-app-shell .mining-card-kicker,
.v-app-shell .card-title {
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell .card-title { margin-bottom: 1rem; color: var(--app-text); font-size: var(--app-fs-base); font-weight: 600; }
.v-app-shell .card-title .dot { display: none; }

.v-app-shell .energy-panel__head h3,
.v-app-shell .heat-panel__head h3,
.v-app-shell .heat-detail-card h3,
.v-app-shell #tab-mining .glass-card h3 {
  margin: .15rem 0 0;
  font-size: var(--app-fs-base);
  font-weight: 600;
  letter-spacing: -.005em;
}

.v-app-shell .energy-panel__head small,
.v-app-shell .heat-panel__head small { color: var(--app-text-3); font-size: var(--app-fs-xs); }

/* Definitielijsten (label links, waarde rechts) */
.v-app-shell .energy-source-card dl > div,
.v-app-shell .energy-tariff-card dl > div,
.v-app-shell .heat-detail-card dl > div,
.v-app-shell .tarieven-nu-card__lijst > div,
.v-app-shell .mining-system-list > div,
.v-app-shell .mining-energy-row,
.v-app-shell .home-bridge-list > div {
  padding: .6rem 0;
  border-top: 1px solid var(--app-border);
  font-size: var(--app-fs-md);
}

.v-app-shell .energy-source-card dt,
.v-app-shell .energy-tariff-card dt,
.v-app-shell .heat-detail-card dt,
.v-app-shell .tarieven-nu-card__lijst dt,
.v-app-shell .mining-system-list dt,
.v-app-shell .home-bridge-list dt { color: var(--app-text-2); font-size: var(--app-fs-md); }

.v-app-shell .energy-source-card dd,
.v-app-shell .energy-tariff-card dd,
.v-app-shell .heat-detail-card dd,
.v-app-shell .tarieven-nu-card__lijst dd,
.v-app-shell .mining-system-list dd,
.v-app-shell .home-bridge-list dd {
  color: var(--app-text);
  font-size: var(--app-fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   09. KERNCIJFERS
   ========================================================= */

.v-app-shell .energy-kpis,
.v-app-shell .energy-cost-kpis,
.v-app-shell .heat-kpis,
.v-app-shell .mining-kpis,
.v-app-shell .stats-grid {
  gap: .75rem;
  border: 0;
}

.v-app-shell .energy-kpi,
.v-app-shell .heat-kpi,
.v-app-shell .mining-kpi,
.v-app-shell .stat-card {
  min-width: 0;
  min-height: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-card);
}

.v-app-shell .energy-kpi__label,
.v-app-shell .heat-kpi > span,
.v-app-shell .mining-kpi-label,
.v-app-shell .stat-label {
  display: block;
  min-height: 0;
  margin: 0;
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.v-app-shell .energy-kpi strong,
.v-app-shell .heat-kpi strong,
.v-app-shell .mining-kpi-value,
.v-app-shell .stat-value {
  margin-top: .5rem;
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: var(--app-fs-kpi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.v-app-shell .energy-kpi small,
.v-app-shell .heat-kpi small,
.v-app-shell .mining-kpi-value small {
  color: var(--app-text-3);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.v-app-shell .energy-kpi p,
.v-app-shell .heat-kpi p,
.v-app-shell .mining-kpi-meta,
.v-app-shell .stat-sub {
  min-height: 0;
  margin: .35rem 0 0;
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-xs);
  letter-spacing: 0;
  line-height: 1.45;
}

/* =========================================================
   10. TABELLEN
   Eén rustige tabelstijl: duidelijke kop, ruime rijen, alleen
   horizontale lijnen, cijfers netjes onder elkaar.
   ========================================================= */

.v-app-shell .table-wrap,
.v-app-shell .energy-table-wrap,
.v-app-shell .heat-table-wrap,
.v-app-shell .v-table-wrap {
  overflow: auto;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
}

/* Een tabel die los op de pagina staat, is zelf een kaart. */
.v-app-shell .energy-table-wrap,
.v-app-shell .heat-table-wrap { box-shadow: var(--app-shadow-card); }

.v-app-shell .data-table,
.v-app-shell .energy-table,
.v-app-shell .heat-table,
.v-app-shell .v-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--app-font);
  font-size: var(--app-fs-md);
  font-variant-numeric: tabular-nums;
}

.v-app-shell .data-table th,
.v-app-shell .energy-table thead th,
.v-app-shell .heat-table thead th,
.v-app-shell .v-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  backdrop-filter: none;
  opacity: 1;
}

.v-app-shell .data-table td,
.v-app-shell .energy-table td,
.v-app-shell .energy-table tbody th,
.v-app-shell .heat-table td,
.v-app-shell .v-table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--app-border);
  color: var(--app-text);
  font-size: var(--app-fs-md);
  line-height: 1.4;
  vertical-align: middle;
}

.v-app-shell .energy-table tbody th { font-weight: 500; text-align: left; }

.v-app-shell .data-table tbody tr:last-child td,
.v-app-shell .energy-table tbody tr:last-child td,
.v-app-shell .energy-table tbody tr:last-child th,
.v-app-shell .heat-table tbody tr:last-child td,
.v-app-shell .v-table tbody tr:last-child td { border-bottom: 0; }

.v-app-shell .data-table tbody tr:hover td,
.v-app-shell .energy-table tbody tr:hover td,
.v-app-shell .energy-table tbody tr:hover th,
.v-app-shell .heat-table tbody tr:hover td { background: var(--app-surface-hover); }

.v-app-shell .energy-table tr.energy-table-total th,
.v-app-shell .energy-table tr.energy-table-total td {
  border-top: 1px solid var(--app-border-strong);
  background: var(--app-surface-2);
  font-weight: 600;
}

/* Sorteerbare kolomkoppen */
.v-app-shell .data-table th[role="columnheader"][tabindex],
.v-app-shell .data-table.sortable th { cursor: pointer; }
.v-app-shell .data-table th:hover { color: var(--app-text); }
.v-app-shell .data-table th.sorted,
.v-app-shell .data-table.sortable th.sort-actief,
.v-app-shell .data-table th.sorted .sort-arrow,
.v-app-shell .data-table.sortable th.sort-actief .sort-arrow { color: var(--app-text); }
.v-app-shell .data-table th .sort-arrow { color: var(--app-text-3); opacity: 1; }

/* Kleurblokje voor een reeks in een tabel of legende */
.v-app-shell .energy-table i,
.v-app-shell .energy-legend i,
.v-app-shell .heat-legend i {
  width: .6rem;
  height: .6rem;
  border-radius: 2px;
}

.v-app-shell .energy-table-note,
.v-app-shell .energy-table-hint,
.v-app-shell .heat-table-hint,
.v-app-shell .table-hint {
  margin: .6rem 0 0;
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  letter-spacing: 0;
  line-height: 1.5;
}

.v-app-shell .vtable-empty,
.v-app-shell .empty-state { color: var(--app-text-2); opacity: 1; }
.v-app-shell .empty-state p { font-family: var(--app-font); font-size: var(--app-fs-md); letter-spacing: 0; text-transform: none; }
.v-app-shell .empty-state .icon { color: var(--app-text-3); }

/* Lege grafiek of lijst */
.v-app-shell .energy-empty,
.v-app-shell .heat-empty {
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-text-3);
  font-size: var(--app-fs-md);
}

/* =========================================================
   11. FORMULIERVELDEN
   ========================================================= */

.v-app-shell:not(.access-page) label,
.v-app-shell .integration-field > span,
.v-app-shell .password-field label,
.v-app-shell .mining-control-field > span,
.v-app-shell .mining-dialog-fields label > span,
.v-app-shell .mining-otp-field > span,
.v-app-shell .mining-energy-setting > label,
.v-app-shell .tarieven-veld label {
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell:not(.access-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.v-app-shell:not(.access-page) select,
.v-app-shell:not(.access-page) textarea {
  min-height: var(--app-control-h);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-text);
  font-family: var(--app-font);
  font-size: var(--app-fs-md);
  letter-spacing: 0;
}

.v-app-shell:not(.access-page) textarea { min-height: 5rem; padding: .6rem .75rem; }

.v-app-shell:not(.access-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
.v-app-shell:not(.access-page) select:hover,
.v-app-shell:not(.access-page) textarea:hover { border-color: var(--app-text-3); }

.v-app-shell:not(.access-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
.v-app-shell:not(.access-page) select:focus,
.v-app-shell:not(.access-page) textarea:focus {
  border-color: var(--v-620);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-620) 18%, transparent);
}

.v-app-shell:not(.access-page) input::placeholder,
.v-app-shell:not(.access-page) textarea::placeholder { color: var(--v-placeholder); opacity: 1; }

.v-app-shell input[type="checkbox"],
.v-app-shell input[type="radio"] { accent-color: var(--app-text); }

.v-app-shell .hint,
.v-app-shell .integration-field small,
.v-app-shell .password-field small,
.v-app-shell .tarieven-veld__hulp,
.v-app-shell .mining-control-field small,
.v-app-shell .mining-dialog-fields label > small,
.v-app-shell .mining-otp-field small {
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-xs);
  letter-spacing: 0;
  line-height: 1.45;
}

.v-app-shell .error-msg,
.v-app-shell .tarieven-veld__fout,
.v-app-shell .tarieven-dialoog__fout {
  color: var(--app-danger);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
}

/* =========================================================
   12. VENSTERS (MODALS)
   Eén vorm voor elk venster: rustige achtergrond, duidelijke titel,
   knoppen rechtsonder met de hoofdactie uiterst rechts.
   ========================================================= */

.v-app-shell .popup,
.v-app-shell .tarieven-dialoog,
.v-app-shell .mining-confirm,
.v-app-shell .vmx-bevestig {
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow-overlay);
}

.v-app-shell .popup,
.v-app-shell .mining-confirm,
.v-app-shell .vmx-bevestig { padding: 1.5rem; }

.v-app-shell .tarieven-dialoog { padding: 0; }
.v-app-shell .tarieven-dialoog__form { gap: 1rem; padding: 1.5rem; }

.v-app-shell .tarieven-dialoog::backdrop,
.v-app-shell .mining-confirm::backdrop,
.v-app-shell .vmx-bevestig::backdrop { background: var(--app-backdrop); backdrop-filter: none; }

.v-app-shell .overlay { background: var(--app-backdrop); backdrop-filter: none; }

.v-app-shell .popup-title,
.v-app-shell .tarieven-dialoog h2,
.v-app-shell .mining-confirm h2,
.v-app-shell .vmx-bevestig h2 {
  margin: 0 0 .25rem;
  padding-right: 2.5rem;
  color: var(--app-text);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.v-app-shell .popup-title { margin-bottom: 1.25rem; }

.v-app-shell .mining-confirm__kicker,
.v-app-shell .vmx-bevestig__kicker {
  margin: 0 0 .35rem;
  color: var(--app-text-3);
  font-family: var(--app-font);
  font-size: var(--app-fs-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-shell .vmx-bevestig.is-danger .vmx-bevestig__kicker { color: var(--app-danger); }

.v-app-shell .tarieven-dialoog p,
.v-app-shell .mining-confirm p,
.v-app-shell .vmx-bevestig__tekst {
  color: var(--app-text-2);
  font-size: var(--app-fs-md);
  line-height: 1.55;
}

.v-app-shell .popup-close {
  top: .9rem;
  right: .9rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-text-2);
}

.v-app-shell .popup-close:hover { border-color: var(--app-border); background: var(--app-surface-2); color: var(--app-text); }

.v-app-shell .popup-actions,
.v-app-shell .tarieven-dialoog__acties,
.v-app-shell .vmx-bevestig__acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border);
}

.v-app-shell .mining-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border);
}

/* Achtergrond niet laten meescrollen terwijl een venster open staat. */
body.v-app-shell:has(dialog[open]),
body.v-app-shell:has(.overlay.show),
body.v-app-shell:has(.overlay.active),
body.v-app-shell:has(.overlay.open) { overflow: hidden; }

@media (max-width: 32rem) {
  .v-app-shell .popup-actions,
  .v-app-shell .tarieven-dialoog__acties,
  .v-app-shell .vmx-bevestig__acties,
  .v-app-shell .mining-confirm__actions { flex-direction: column-reverse; }

  .v-app-shell .popup-actions > *,
  .v-app-shell .tarieven-dialoog__acties > *,
  .v-app-shell .vmx-bevestig__acties > *,
  .v-app-shell .mining-confirm__actions > * { width: 100%; }
}

/* =========================================================
   13. MELDINGEN
   Rustig vlak met een smalle statusrand links. Tekst in gewone letters.
   ========================================================= */

.v-app-feedback {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: .25rem .75rem;
  min-height: 0;
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--app-border, var(--v-rule-strong));
  border-left-width: 3px;
  border-radius: var(--app-radius, 4px);
  background: var(--app-surface, var(--v-surface-subtle));
  color: var(--app-text, var(--v-text));
  font-family: var(--app-font, var(--v-font-institutional));
  font-size: var(--app-fs-md, .875rem);
  letter-spacing: 0;
  line-height: 1.5;
}

.v-app-feedback::before {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
  grid-row: 1 / span 2;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "i";
  font-family: var(--app-font, var(--v-font-institutional));
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}

.v-app-feedback > * { grid-column: 2; }
.v-app-feedback:empty { display: none; }

.v-app-feedback > strong,
.v-app-feedback > span:first-child:not(:only-child),
.v-app-feedback__title {
  display: block;
  margin: 0;
  color: currentColor;
  font-family: var(--app-font, var(--v-font-institutional));
  font-size: var(--app-fs-md, .875rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.v-app-feedback > span:last-child:not(:only-child),
.v-app-feedback > p,
.v-app-feedback__text {
  min-width: 0;
  margin: 0;
  color: var(--app-text-2, var(--v-text));
  font-family: var(--app-font, var(--v-font-institutional));
  font-size: var(--app-fs-md, .875rem);
  letter-spacing: 0;
}

.v-app-feedback__icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}

.v-app-feedback__icon::before { content: "i"; }

.v-app-feedback--success,
.v-app-feedback.is-live,
.v-app-feedback.success,
.v-app-feedback[data-state="success"] { border-color: var(--app-border, var(--v-rule)); border-left-color: var(--v-app-success); color: var(--v-app-success); }
.v-app-feedback--success::before,
.v-app-feedback.is-live::before,
.v-app-feedback.success::before,
.v-app-feedback[data-state="success"]::before,
.v-app-feedback--success .v-app-feedback__icon::before { content: "✓"; }

.v-app-feedback--warning,
.v-app-feedback.is-warning,
.v-app-feedback[data-state="warning"] { border-color: var(--app-border, var(--v-rule)); border-left-color: var(--v-app-warning); background: color-mix(in srgb, var(--v-app-warning) 6%, var(--app-surface, transparent)); color: var(--v-app-warning); }
.v-app-feedback--warning::before,
.v-app-feedback.is-warning::before,
.v-app-feedback[data-state="warning"]::before,
.v-app-feedback--warning .v-app-feedback__icon::before { content: "!"; }

.v-app-feedback--error,
.v-app-feedback.is-error,
.v-app-feedback.error,
.v-app-feedback[data-state="error"] { border-color: var(--app-border, var(--v-rule)); border-left-color: var(--v-app-error); background: color-mix(in srgb, var(--v-app-error) 6%, var(--app-surface, transparent)); color: var(--v-app-error); }
.v-app-feedback--error::before,
.v-app-feedback.is-error::before,
.v-app-feedback.error::before,
.v-app-feedback[data-state="error"]::before,
.v-app-feedback--error .v-app-feedback__icon::before { content: "×"; }

.toast.v-app-feedback:not(.show) { display: none; }
.toast.v-app-feedback.show { display: grid; }

/* Losse informatieregels (bijvoorbeeld "indicatieve berekening") */
.v-app-shell .energy-disclaimer,
.v-app-shell .energy-costs-notice,
.v-app-shell .energy-alert-footnote,
.v-app-shell .energy-tariff-note,
.v-app-shell .tarieven-notice,
.v-app-shell .tarieven-melding,
.v-app-shell .request-message {
  max-width: none;
  margin: 0 0 1rem;
  padding: .65rem .9rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  background: var(--app-surface);
  color: var(--app-text-2);
  font-family: var(--app-font);
  font-size: var(--app-fs-md);
  letter-spacing: 0;
  line-height: 1.5;
}

.v-app-shell .energy-alert-footnote { margin-top: 1rem; border-style: solid; background: transparent; }
.v-app-shell .tarieven-melding.is-succes,
.v-app-shell .request-message--success { border-left: 3px solid var(--app-ok); color: var(--app-ok); }
.v-app-shell .tarieven-melding.is-fout,
.v-app-shell .tarieven-notice,
.v-app-shell .request-message--error { border-left: 3px solid var(--app-danger); color: var(--app-danger); }
.v-app-shell .energy-tariff-note { border-left: 3px solid var(--app-warn); }

/* =========================================================
   14. KLEINE SAMENVATTINGSKAART (dashboard en elders)
   ========================================================= */

.v-app-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--app-gap, 1rem);
}

a.v-app-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--v-motion-fast) var(--v-ease-standard), background var(--v-motion-fast) var(--v-ease-standard);
}

a.v-app-card:hover { border-color: var(--app-border-strong); background: var(--app-surface-hover); }

.v-app-card__meta { margin: 0 0 .5rem; color: var(--app-text-3); font-size: var(--app-fs-sm); }
.v-app-card__title { margin: 0; font-size: var(--app-fs-lg); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.v-app-card__text { margin: .4rem 0 0; color: var(--app-text-2); font-size: var(--app-fs-md); }

/* Grotere keuzetegels die werkelijk een actie uitvoeren (Mining). */
.v-app-action-card {
  position: relative;
  border: 1px solid var(--app-border-strong) !important;
  border-radius: var(--app-radius-lg) !important;
  background: var(--app-surface) !important;
  transition: border-color var(--v-motion-fast) var(--v-ease-standard), background var(--v-motion-fast) var(--v-ease-standard);
}

.v-app-action-card:not(:disabled):hover { border-color: var(--app-text-3) !important; background: var(--app-surface-hover) !important; }
.v-app-action-card:not(:disabled):focus-visible { outline: 2px solid var(--v-focus) !important; outline-offset: 2px !important; }
.v-app-action-card:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   15. KOPBALK MET APPS-MENU EN ACCOUNTMENU
   Links: knop "Apps" (uitklapmenu met alle toepassingen per groep), het
   woordmerk en de naam van de huidige toepassing. Rechts: het accountmenu.
   De markup komt uit app_shell_core.php, het gedrag uit app-header.js.
   ========================================================= */

.v-app-shell .v-appbar {
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface);
  box-shadow: 0 1px 2px rgba(21, 23, 22, .04);
}

.v-appbar__inner {
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.v-appbar__start {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.v-appbar__brand {
  display: block;
  flex: 0 0 auto;
  padding-block: .5rem;
}

/* Het woordmerk blijft minstens 16 px hoog (merkregel 16.7). */
.v-appbar__brand img {
  width: 10.5rem;
  height: auto;
}

.v-appbar__current {
  min-width: 0;
  overflow: hidden;
  padding-left: 1rem;
  border-left: 1px solid var(--app-border-strong);
  color: var(--app-text);
  font-size: var(--app-fs-base);
  font-weight: 600;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* De knop Apps is het vaste vertrekpunt: altijd gevuld en op dezelfde plek. */
.v-appbar__apps {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .85rem 0 .7rem;
  border: 1px solid var(--app-primary-bg);
  border-radius: var(--app-radius);
  background: var(--app-primary-bg);
  color: var(--app-primary-text);
  font: 600 var(--app-fs-md)/1 var(--app-font);
  cursor: pointer;
  transition: background-color var(--v-motion-fast) var(--v-ease-standard);
}

.v-appbar__apps:hover,
.v-menu.is-open .v-appbar__apps { background: var(--app-primary-bg-hover); border-color: var(--app-primary-bg-hover); }

.v-appbar__account {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0 .6rem 0 .3rem;
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background: var(--app-surface);
  color: var(--app-text);
  font: 500 var(--app-fs-md)/1 var(--app-font);
  cursor: pointer;
  transition: background-color var(--v-motion-fast) var(--v-ease-standard), border-color var(--v-motion-fast) var(--v-ease-standard);
}

.v-appbar__account:hover,
.v-menu.is-open .v-appbar__account { background: var(--app-surface-2); border-color: var(--app-text-3); }

.v-appbar__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--app-text-2);
  transition: transform var(--v-motion-fast) var(--v-ease-standard);
}

.v-menu.is-open .v-appbar__chevron { transform: rotate(180deg); }

.v-appbar__apps:focus-visible,
.v-appbar__account:focus-visible,
.v-menu__item:focus-visible {
  outline: 2px solid var(--v-focus);
  outline-offset: 2px;
}

.v-avatar {
  width: 1.875rem;
  height: 1.875rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--app-primary-bg);
  color: var(--app-primary-text);
  font-size: var(--app-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
}

.v-avatar--lg {
  width: 3rem;
  height: 3rem;
  font-size: var(--app-fs-base);
}

/* Pictogramtegel: vast herkenningspunt per toepassing (menu en startpagina). */
.v-app-icon {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--app-radius);
  background: var(--app-primary-bg);
  color: var(--app-primary-text);
}

.v-app-icon .v-icon { width: 1.125rem; height: 1.125rem; }

.v-app-icon--lg { width: 2.5rem; height: 2.5rem; }
.v-app-icon--lg .v-icon { width: 1.35rem; height: 1.35rem; }

/* Uitklappanelen */
.v-menu { position: relative; }

.v-menu__panel {
  position: absolute;
  z-index: calc(var(--v-z-header) + 1);
  top: calc(100% + .5rem);
  width: 18.5rem;
  max-width: calc(100vw - 2 * var(--v-page-gutter));
  max-height: calc(100svh - 5rem);
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-menu);
}

.v-menu__panel[hidden] { display: none; }
.v-menu__panel--apps { left: 0; }
.v-menu__panel--account { right: 0; width: 20rem; }

.v-menu__group {
  margin: .85rem .6rem .35rem;
  color: var(--app-text-3);
  font-family: var(--app-font-mono);
  font-size: var(--app-fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.v-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-menu__item {
  position: relative;
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .375rem .6rem;
  border: 0;
  border-radius: var(--app-radius);
  background: transparent;
  color: var(--app-text);
  font: 500 var(--app-fs-md)/1.3 var(--app-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.v-menu__item:hover { background: var(--app-surface-2); }

/* Huidige toepassing: vlak plus smalle 620-lijn links. */
.v-menu__item[aria-current="page"] {
  background: var(--app-surface-2);
  font-weight: 600;
}

.v-menu__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: .55rem;
  bottom: .55rem;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--v-620);
}

.v-menu__text { flex: 1 1 auto; min-width: 0; }

.v-menu__icon { width: 1.25rem; height: 1.25rem; margin-inline: .35rem; color: var(--app-text-2); }

.v-menu__profile {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .5rem;
  padding: .75rem .6rem 1rem;
  border-bottom: 1px solid var(--app-border);
}

.v-menu__profile strong {
  display: block;
  color: var(--app-text);
  font-size: var(--app-fs-base);
  font-weight: 600;
}

.v-menu__role {
  display: block;
  margin-top: .2rem;
  color: var(--app-text-2);
  font-family: var(--app-font-mono);
  font-size: var(--app-fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.v-menu__profile small {
  display: block;
  margin-top: .35rem;
  color: var(--app-text-3);
  font-size: var(--app-fs-xs);
  line-height: 1.4;
}

.v-menu__footer {
  display: block;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--app-border);
}

/* Schakelaar voor donkere weergave (de knop draagt aria-pressed). */
.v-switch {
  position: relative;
  width: 2.25rem;
  height: 1.3rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--app-border-strong);
  transition: background-color var(--v-motion-fast) var(--v-ease-standard);
}

.v-switch::after {
  content: "";
  position: absolute;
  top: .15rem;
  left: .15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #FAFAF8;
  box-shadow: 0 1px 2px rgba(8, 9, 9, .25);
  transition: transform var(--v-motion-fast) var(--v-ease-standard);
}

.v-menu__item--switch[aria-pressed="true"] .v-switch { background: var(--app-primary-bg); }
.v-menu__item--switch[aria-pressed="true"] .v-switch::after { background: var(--app-primary-text); transform: translateX(.95rem); }

/* Oude navigatiebalk (wordt niet meer gebruikt, blijft veilig verborgen). */
.v-app-switch { display: none; }

@media (max-width: 56rem) {
  .v-appbar__current { display: none; }
}

@media (max-width: 40rem) {
  .v-appbar__inner { gap: .5rem; }
  .v-appbar__start { gap: .6rem; }

  .v-appbar__apps {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding: 0;
  }

  .v-appbar__apps span,
  .v-appbar__account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .v-appbar__account { min-height: 2.75rem; padding-right: .45rem; }
}

@media print {
  .v-appbar__end,
  .v-appbar .v-menu:first-child { display: none; }
  .v-utility-header { position: static; box-shadow: none; }
}

/* =========================================================
   16. VOETREGEL
   ========================================================= */

.v-app-shell .status-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--app-border);
  color: var(--app-text-3);
  font-family: var(--app-font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  opacity: 1;
}

/* =========================================================
   17. AANRAAKSCHERM, BEWEGING
   ========================================================= */

@keyframes v-app-spin { to { transform: rotate(360deg); } }

@media (pointer: coarse), (max-width: 48rem) {
  .v-app-shell .btn,
  .v-app-shell .btn-sm,
  .v-app-shell .btn-icon,
  .v-app-shell .date-icon-btn,
  .v-app-shell .energy-range button,
  .v-app-shell .heat-range button,
  .v-app-shell .mining-range button,
  .v-app-shell .currency-switch button,
  .v-app-shell .tarieven-dialoog__acties button,
  .v-app-shell .v-utility-control,
  .v-app-shell .v-tabs__tab,
  .v-app-shell .tab-btn,
  .v-app-button {
    min-height: 2.75rem;
  }

  .v-app-shell .btn-icon,
  .v-app-shell .row-btn {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-app-button,
  a.v-app-card { transition: none; }

  .v-app-button.is-loading::after,
  .v-app-button[aria-busy="true"]::after,
  .v-app-shell .btn[aria-busy="true"]::after { animation-duration: 1.8s; }
}

/* =========================================================
   18. INKLAPBAAR ONDERDEEL (<details class="v-disclosure">)
   Voor zelden gebruikte formulieren, zodat ze de pagina niet vullen.
   ========================================================= */

.v-disclosure {
  margin-top: 1rem;
  border: 1px solid var(--v-rule);
  border-radius: var(--app-radius-lg, 8px);
  background: var(--v-surface);
  box-shadow: var(--app-shadow-card, none);
}

.v-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .75rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.v-disclosure__summary::-webkit-details-marker { display: none; }

.v-disclosure__summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  flex: 0 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--v-text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--v-motion-fast) var(--v-ease-standard);
}

.v-disclosure[open] > .v-disclosure__summary::after { transform: rotate(-135deg) translateY(-2px); }

.v-disclosure__summary strong,
.v-disclosure__summary small { display: block; }
.v-disclosure__summary strong { font-size: .9375rem; font-weight: 600; }
.v-disclosure__summary small { margin-top: .1rem; color: var(--v-text-faint); font-size: .8125rem; }
.v-disclosure__summary:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.v-disclosure__summary:focus-visible { outline: 2px solid var(--v-focus); outline-offset: -2px; }
.v-disclosure[open] > .v-disclosure__summary { border-bottom: 1px solid var(--v-rule); }


/* =========================================================
   19. KLEINE AANVULLINGEN
   ========================================================= */

/* Meldingen staan niet tegen de tabbladen aan. Een melding dat alles
   live is, herhaalt alleen het statusvak bovenaan: die blijft enkel
   hoorbaar voor schermlezers. */
.v-app-shell .home-notice,
.v-app-shell .mining-notice { margin: 0 0 1.5rem; }

.v-app-shell .home-notice.is-live,
.v-app-shell .mining-notice.is-live,
.v-app-shell .heat-notice.is-live {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Winst en verlies behouden hun betekeniskleur. */
.v-app-shell .stat-value.green { color: var(--app-ok); }
.v-app-shell .stat-value.red { color: var(--app-danger); }
.v-app-shell .stat-value.orange { color: var(--app-text); }

/* Zoekveld en knoppen in een tabelkop blijven op één rij. */
.v-app-shell .vtable-tools { flex-wrap: nowrap; gap: .4rem; }
.v-app-shell .vtable-search {
  width: min(14rem, 100%);
  min-height: 2rem !important;
  padding: 0 .65rem !important;
  font-size: var(--app-fs-sm) !important;
}

@media (max-width: 48rem) {
  .v-app-shell .vtable-tools { flex-wrap: wrap; }
}

/* Pagina's met een raster als lichaam mogen nooit breder worden dan het
   scherm door de navigatie of een brede tabel. */
.v-app-shell.dashboard-page > *,
.v-app-shell.diagnostics-page > * { min-width: 0; }

.v-app-shell .app-subtitle { opacity: 1; }
.v-app-shell .tabs { flex-wrap: nowrap; }

/* Kerncijfers: op een telefoon twee naast elkaar in plaats van één per scherm. */
@media (max-width: 40rem) {
  .v-app-shell .energy-kpis,
  .v-app-shell .energy-cost-kpis,
  .v-app-shell .heat-kpis,
  .v-app-shell .mining-kpis,
  .v-app-shell .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }

  .v-app-shell .energy-kpi,
  .v-app-shell .heat-kpi,
  .v-app-shell .mining-kpi,
  .v-app-shell .stat-card { padding: .85rem .9rem; }

  .v-app-shell { --app-fs-kpi: 1.375rem; }
}

@media (max-width: 20rem) {
  .v-app-shell .energy-kpis,
  .v-app-shell .energy-cost-kpis,
  .v-app-shell .heat-kpis,
  .v-app-shell .mining-kpis,
  .v-app-shell .stats-grid { grid-template-columns: 1fr; }
}

/* Lange lijsten (403 transacties) blijven compact maar leesbaar. */
.v-app-shell .data-table td { padding-block: .5rem; }
.v-app-shell .data-table td:last-child { white-space: nowrap; }

@media (pointer: fine) and (min-width: 48.01rem) {
  .v-app-shell .row-btn { width: 2rem; height: 2rem; }
}

/* Werkbalk: zoekveld, keuzelijst en knoppen even hoog. */
.v-app-shell .toolbar { align-items: center; gap: .5rem; }
.v-app-shell .toolbar > .btn,
.v-app-shell .toolbar > input,
.v-app-shell .toolbar .vmx-choice__input { min-height: 2.75rem; }

.v-app-shell .v-tabpanel:focus { outline: none; }
.v-app-shell .v-tabpanel:focus-visible { outline: 2px solid var(--v-focus); outline-offset: 6px; }

/* Tabellen waarvan de eerste kolom een gewone cel is (Tarieven). */
.v-app-shell .energy-table td:first-child { text-align: left; }

/* Firmware en herstarten: ook in rust herkenbaar als risicovolle acties. */
.v-app-shell .mining-control-grid button.is-danger { border-color: color-mix(in srgb, var(--app-danger) 40%, var(--app-border)) !important; }
.v-app-shell .mining-control-grid button.is-danger strong { color: var(--app-danger); }

.v-app-shell .energy-empty,
.v-app-shell .heat-empty,
.v-app-shell .energy-alert-footnote,
.v-app-shell .energy-disclaimer { max-width: none; }
.v-app-shell .energy-legend i { margin-right: 0; }

/* Inlogpagina: de knop en melding behouden de oorspronkelijke
   systeemstijl van de publieke façade. */
.access-page .v-app-button {
  font-family: var(--v-font-system);
  font-size: var(--v-font-size-xs);
  letter-spacing: var(--v-tracking-label);
  text-transform: uppercase;
  border-radius: var(--v-radius-xs);
}

.access-page .v-app-feedback {
  border-left-width: 1px;
  border-radius: 0;
  font-size: var(--v-font-size-sm);
}

@media (max-width: 48rem) {
  .v-app-shell .home-section-head,
  .v-app-shell .v-app-section__header { align-items: flex-start; }

  .v-app-shell .v-tabs__tab,
  .v-app-shell .tab-btn { padding: 0 .6rem; font-size: var(--app-fs-sm); }
}