/* ======================================================
   Design tokens
   Pas hier kleuren, radii en spacing aan voor de hele plugin
====================================================== */

.energiek-zvc {
  --zvc-color-text:          #1B1F29;
  --zvc-color-text-muted:    rgba(27, 31, 41, 0.75);
  --zvc-color-green:         #33715C;
  --zvc-color-green-focus:   rgba(63, 126, 108, 0.65);
  --zvc-color-green-glow:    rgba(63, 126, 108, 0.15);
  --zvc-color-border:        #E4EEEA;
  --zvc-color-bg:            #FFFFFF;
  --zvc-color-bg-muted:      #F6F3EF;
  --zvc-color-error:         rgba(136, 90, 90, 0.95);
  --zvc-color-error-border:  rgba(136, 90, 90, 0.85);
  --zvc-color-error-bg:      rgba(245, 202, 195, 0.28);
  --zvc-color-error-glow:    rgba(136, 90, 90, 0.12);
  --zvc-color-alert-border:  rgba(136, 90, 90, 0.25);
  --zvc-color-alert-bg:      rgba(245, 202, 195, 0.35);

  --zvc-radius-card:         16px;
  --zvc-radius-input:        10px;
  --zvc-radius-btn:          12px;
  --zvc-gap:                 12px;

  max-width: 100%;
  color: var(--zvc-color-text);
}

/* ======================================================
   Controls
====================================================== */

.energiek-zvc__controls {
  display: flex;
  gap: var(--zvc-gap);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 14px;
}

.energiek-zvc__btn--clear {
  margin-left: auto;
  color: var(--zvc-color-text-muted);
  font-size: 13px;
}

.energiek-zvc__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.energiek-zvc__select {
  padding: 8px 10px;
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-input);
  background: var(--zvc-color-bg);
  color: var(--zvc-color-text);
}

/* ======================================================
   Input container
====================================================== */

.energiek-zvc__grid {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}

.energiek-zvc__gridinner {
  padding: 0;
  display: grid;
  gap: var(--zvc-gap);
}

/* ======================================================
   Blokken
====================================================== */

.energiek-zvc__monthblock {
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-card);
  background: var(--zvc-color-bg);
  overflow: hidden;
  padding: 0;
}

.energiek-zvc__monthblocktitle {
  display: none;
}

/* ======================================================
   Tabellen
====================================================== */

.energiek-zvc__matrixwrap {
  overflow-x: auto;
  position: relative;
}

.energiek-zvc__matrixwrap--month::after {
  display: none;
}

.energiek-zvc__matrix {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.energiek-zvc__matrix th,
.energiek-zvc__matrix td {
  border: none;
  padding: 6px 8px;
  text-align: left;
  vertical-align: middle;
}

/* Alleen scheidingslijnen tussen tbody rijen */
.energiek-zvc__matrix tbody tr td {
  border-top: 1px solid var(--zvc-color-border);
}

.energiek-zvc__matrix thead th {
  border: none;
  background: var(--zvc-color-bg);
  font-weight: 600;
  font-size: 12px;
  padding-top: 10px;
  padding-bottom: 6px;
}

.energiek-zvc__matrix th:first-child,
.energiek-zvc__matrix td:first-child {
  padding-left: 12px;
}

.energiek-zvc__matrix th:last-child,
.energiek-zvc__matrix td:last-child {
  border-right: none;
}

.energiek-zvc__matrix tbody tr:last-child td {
  border-bottom: none;
}

.energiek-zvc__rowlabel {
  font-weight: 600;
  background: var(--zvc-color-bg);
}

.energiek-zvc__rowlabel-inner {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* ======================================================
   Jaarinvoer — horizontale rij
====================================================== */

.energiek-zvc__yearrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0;
  padding: 12px;
  overflow-x: auto;
}

/* Elk inputwrap in de jaarrij */
.energiek-zvc__yearrow .energiek-zvc__inputwrap {
  padding: 0 16px 0 0;
  min-width: 110px;
}

/* Verticale scheidingslijn tussen groepen */
.energiek-zvc__yearsep--vertical {
  width: 1px;
  background: var(--zvc-color-border);
  align-self: stretch;
  margin: 0 16px 0 0;
  flex-shrink: 0;
  min-height: 52px; /* Hoogte van sublabel + input */
}

/* Maandtabel: scrollt horizontaal, labelkolom vast */
.energiek-zvc__matrix--month {
  min-width: 640px;
}

.energiek-zvc__matrix--month .energiek-zvc__rowlabel {
  width: 180px;
  white-space: nowrap;
}

/* ======================================================
   Inputs
====================================================== */

.energiek-zvc__inputwrap {
  position: relative;
}

.energiek-zvc__inputrow {
  display: flex;
  align-items: center;
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-input);
  background: var(--zvc-color-bg);
  overflow: hidden;
}

.energiek-zvc__inputrow:focus-within {
  border-color: var(--zvc-color-green-focus);
  box-shadow: 0 0 0 3px var(--zvc-color-green-glow);
}

.energiek-zvc__inputsuffix {
  font-size: 12px;
  color: var(--zvc-color-text-muted);
  padding: 0 8px 0 2px;
  white-space: nowrap;
  user-select: none;
}

.energiek-zvc__sublabel {
  font-size: 12px;
  color: var(--zvc-color-text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.energiek-zvc__input {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-input);
  background: var(--zvc-color-bg);
  color: var(--zvc-color-text);
  outline: none;
}

/* Als de input binnen een inputrow zit, border weghalen — de row heeft de border */
.energiek-zvc__inputrow .energiek-zvc__input {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  padding: 8px 6px 8px 9px;
}

.energiek-zvc__inputrow .energiek-zvc__input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.energiek-zvc__matrix--month .energiek-zvc__input {
  max-width: 72px;
  padding: 5px 7px;
  font-size: 13px;
}

.energiek-zvc__input:focus {
  border-color: var(--zvc-color-green-focus);
  box-shadow: 0 0 0 3px var(--zvc-color-green-glow);
}

.energiek-zvc .energiek-zvc__input--invalid,
.energiek-zvc .energiek-zvc__input--invalid + .energiek-zvc__inputrow,
.energiek-zvc .energiek-zvc__inputrow:has(.energiek-zvc__input--invalid) {
  border-color: var(--zvc-color-error-border);
  background: var(--zvc-color-error-bg);
  box-shadow: 0 0 0 3px var(--zvc-color-error-glow);
}

.energiek-zvc__fieldmsg {
  margin-top: 6px;
  font-size: 12px;
  color: var(--zvc-color-error);
  line-height: 1.35;
}

/* ======================================================
   Inline meldingen
====================================================== */

.energiek-zvc__inlinealerts {
  margin-top: 10px;
}

.energiek-zvc__inlinealert {
  border: 1px solid var(--zvc-color-alert-border);
  background: var(--zvc-color-alert-bg);
  border-radius: var(--zvc-radius-card);
  padding: 10px 12px;
  color: var(--zvc-color-text);
}

/* ======================================================
   Resultaatsectie
====================================================== */

.energiek-zvc__results {
  margin-top: 16px;
}

/* ======================================================
   Maandgrafiek — bovenaan, volledige breedte
====================================================== */

.energiek-zvc__monthchartcard {
  margin-bottom: var(--zvc-gap);
}

/* ======================================================
   Charts layout — donuts onderaan
====================================================== */

.energiek-zvc__charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: var(--zvc-gap);
  margin-top: var(--zvc-gap);
}

.energiek-zvc__chartcard {
  background: var(--zvc-color-bg);
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* ======================================================
   Titelregel met icoon links en titel gecentreerd
====================================================== */

.energiek-zvc__charttitleline {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 54px;
  margin-bottom: 12px;
}

/* Icoon: 3x groter, Energiek groen */
.energiek-zvc__icon {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--zvc-color-green);
}

.energiek-zvc__icon svg {
  width: 100%;
  height: 100%;
}

/* Titel */
.energiek-zvc__charttitle {
  font-weight: 600;
  text-align: center;
  color: var(--zvc-color-text);
  line-height: 1.2;
}

.energiek-zvc__charttitle strong {
  font-weight: 700;
}

/* ======================================================
   Chart canvas
====================================================== */

.energiek-zvc__chartwrap {
  position: relative;
  height: 260px;
}

.energiek-zvc__chartwrap--bar {
  height: 320px;
}

.energiek-zvc__chartwrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ======================================================
   Tooltip
====================================================== */

.energiek-zvc__tipwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.energiek-zvc__tooltip {
  display: none;
  position: fixed;
  background: var(--zvc-color-text);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 8px;
  width: 220px;
  pointer-events: none;
  z-index: 9999;
  white-space: normal;
}

/* Pijltje onderaan de tooltip */
.energiek-zvc__tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--zvc-color-text);
}

.energiek-zvc__actions {
  display: flex;
  align-items: center;
  gap: var(--zvc-gap);
  margin-top: var(--zvc-gap);
}

.energiek-zvc__btn {
  padding: 10px 14px;
  border: 1px solid var(--zvc-color-border);
  border-radius: var(--zvc-radius-btn);
  background: var(--zvc-color-bg);
  color: var(--zvc-color-text);
  cursor: pointer;
  transition: transform 0.02s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.energiek-zvc__btn:hover {
  border-color: var(--zvc-color-green-focus);
  box-shadow: 0 6px 18px rgba(27, 31, 41, 0.08);
}

.energiek-zvc__btn:active {
  transform: translateY(1px);
}

.energiek-zvc__hint {
  color: var(--zvc-color-text-muted);
  font-size: 13px;
}

/* ======================================================
   Responsive
====================================================== */

@media (max-width: 900px) {
  .energiek-zvc__charts {
    grid-template-columns: 1fr;
  }

  .energiek-zvc__chartwrap {
    height: 280px;
  }

  .energiek-zvc__chartwrap--bar {
    height: 340px;
  }
}